Bento

Bento Code

Pronew

An editor window where a query types into the find field and a highlight scans down to the match.

auth.ts0/0

1import { verify } from "./token"

3// Resolve the signed-in user for a request

4export async function getUser(request) {

5 const cookie = request.headers.get("cookie")

6 if (!cookie) return null

8 const session = await verify(cookie)

9 if (session.expired) return null

11 return session.user

12}

Find the line that matters

Search every file in the repo and land on the match, not on a list of results.

Installation

npx shadcn@latest add @blank-pro/bento-code

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoCode } from "@/components/ui/bento-code"

<BentoCode code={source} query="session" filename="auth.ts" />

The highlight lands on the first line that contains query (case does not matter) and the find field counts every occurrence. Syntax is shaded in steps of the ink rather than colored; only the match takes the card's --bento-light.

The window runs off the bottom of the stage, so give the card a height (h-96, or a grid row).