4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T32b0,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Card, type CardHighlight, type CardProps, } from "./card"; export interface BentoGridProps extends React.HTMLAttributes { /** Force an explicit column count; omit for a responsive auto-fit grid. */ columns?: number; } export const BentoGrid = React.forwardRef( ({ className, columns, style, children, ...p }, ref) => { const gridRef = React.useRef(null); const setRefs = React.useCallback( (node: HTMLDivElement | null) => { gridRef.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }, [ref], ); React.useEffect(() => { const grid = gridRef.current; if (!grid) return; if ( typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ) return; let frame = 0; let pending: { x: number; y: number } | null = null; /* Measuring inside the frame would force a synchronous layout on every * pointer move, since the previous frame already wrote inline styles. * The geometry only changes on resize or scroll, so it is cached and the * reads happen up front, never interleaved with the writes. */ type Measured = { grid: DOMRect; cards: [HTMLElement, DOMRect][] }; let cache: Measured | null = null; let observed: HTMLElement[] = []; const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => { cache = null; }); resizeObserver?.observe(grid); const measure = (): Measured => { const cards = Array.from( grid.querySelectorAll("[data-bento-card]"), ); const same = cards.length === observed.length && cards.every((card, i) => card === observed[i]); if (!same && resizeObserver) { for (const card of observed) resizeObserver.unobserve(card); for (const card of cards) resizeObserver.observe(card); observed = cards; } return { grid: grid.getBoundingClientRect(), cards: cards.map((card) => [card, card.getBoundingClientRect()]), }; }; const paint = () => { frame = 0; const point = pending; if (!point) return; if (!cache) cache = measure(); const rects = cache; grid.style.setProperty("--bento-x", `${point.x - rects.grid.left}px`); grid.style.setProperty("--bento-y", `${point.y - rects.grid.top}px`); grid.style.setProperty("--bento-fill-o", "1"); grid.style.setProperty("--edge-o", "1"); for (const [card, r] of rects.cards) { card.style.setProperty("--edge-x", `${point.x - r.left}px`); card.style.setProperty("--edge-y", `${point.y - r.top}px`); } }; const invalidate = () => { cache = null; }; const onMove = (e: PointerEvent) => { pending = { x: e.clientX, y: e.clientY }; if (!frame) frame = requestAnimationFrame(paint); }; const onLeave = () => { if (frame) cancelAnimationFrame(frame); frame = 0; pending = null; grid.style.setProperty("--bento-fill-o", "0"); grid.style.setProperty("--edge-o", "0"); }; grid.addEventListener("pointermove", onMove, { passive: true }); grid.addEventListener("pointerleave", onLeave, { passive: true }); window.addEventListener("scroll", invalidate, { passive: true, capture: true, }); return () => { grid.removeEventListener("pointermove", onMove); grid.removeEventListener("pointerleave", onLeave); window.removeEventListener("scroll", invalidate, { capture: true }); resizeObserver?.disconnect(); if (frame) cancelAnimationFrame(frame); }; }, []); return (

{children}

); }, ); BentoGrid.displayName = "BentoGrid"; export interface BentoCardProps extends CardProps { /** * Column span. Not a position: the grid is `grid-flow-dense`, so a wide card * lets narrower ones backfill ahead of it. Nothing clamps this against * `columns`, so overshoot and the card overflows its track. */ span?: number; /** Row span. Rows are `minmax(9rem,auto)`, so this raises the floor, not the height. */ rowSpan?: number; highlight?: CardHighlight; } export const BentoCard = React.forwardRef( ({ className, span, rowSpan, style, children, ...p }, ref) => ( {children} ), ); BentoCard.displayName = "BentoCard"; /** * The three cells below are content, not containers. BentoCard supplies the * surface, the span, and the edge glow; a cell supplies only padding and fill. * They work as a child of any Card, not just a bento cell. */ const cellShell = "@container flex h-full flex-col p-6"; /** Mono uppercase label beside an icon tile. Shared by BentoInfo and BentoText. */ function CellLabel({ icon, label, }: { icon?: React.ReactNode; label: React.ReactNode; }) { return (

{icon != null && ( {icon} )} {label}

); } const metricValueSizes = { // Sized against the cell, not the viewport: a display number in a narrow card // otherwise renders at its full viewport size and overruns its neighbour. md: "text-[clamp(2rem,18cqi,3.5rem)] font-bold text-ink/70", lg: "text-[clamp(2.5rem,25cqi,6rem)] font-black text-ink", } as const; const NUMERIC = /^-?\d+(\.\d+)?$/; function parseTarget(value: React.ReactNode): number | null { if (typeof value === "number") return Number.isFinite(value) ? value : null; if (typeof value === "string" && NUMERIC.test(value)) return Number(value); return null; } function decimalsOf(value: React.ReactNode): number { const text = String(value); const dot = text.indexOf("."); return dot === -1 ? 0 : text.length - dot - 1; } const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches; const COUNT_UP_MS = 900; /** * Counts from zero to `target` on mount using rAF alone. No motion dependency, so the * registry-copied source has nothing extra to resolve. Runs in a layout effect so the * first paint is already at zero rather than flashing the final value. * * A hidden or throttled tab never delivers a frame, and a metric stuck at zero is worse * than one that never animated, so the count is skipped outright when the document is * hidden and snapped to the target if no frame arrives. */ function useCountUp(target: number | null, decimals: number, run: boolean) { const [display, setDisplay] = React.useState(target); const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect; useIsomorphicLayoutEffect(() => { const hidden = typeof document !== "undefined" && document.hidden; if (!run || target == null || hidden || prefersReducedMotion()) { setDisplay(target); return; } setDisplay(0); let frame = 0; let start = 0; let painted = false; const step = (now: number) => { painted = true; if (!start) start = now; const progress = Math.min((now - start) / COUNT_UP_MS, 1); const eased = 1 - (1 - progress) ** 3; setDisplay(Number((target * eased).toFixed(decimals))); if (progress < 1) frame = requestAnimationFrame(step); }; frame = requestAnimationFrame(step); const rescue = setTimeout(() => { if (!painted) setDisplay(target); }, COUNT_UP_MS + 300); return () => { cancelAnimationFrame(frame); clearTimeout(rescue); }; }, [target, decimals, run]); return display; } export interface BentoMetricProps extends Omit, "children"> { value: React.ReactNode; label: React.ReactNode; icon?: React.ReactNode; /** Trailing unit on the value, keyed to the alternate accent. */ suffix?: React.ReactNode; /** Aside under the value. Flavour text, a caveat, a comparison. */ note?: React.ReactNode; /** `lg` is the standalone stat treatment: display weight, full-strength ink. */ size?: keyof typeof metricValueSizes; /** Count up from zero on mount. Ignored for non-numeric values. */ animate?: boolean; } export const BentoMetric = React.forwardRef( ( { className, value, label, icon, suffix, note, size = "md", animate, ...props }, ref, ) => { const target = parseTarget(value); const decimals = decimalsOf(value); const counted = useCountUp(target, decimals, animate === true); const shown = target == null ? value : (counted ?? target).toFixed(decimals); return (

{shown} {suffix != null && ( {suffix} )}

{note != null && (

{note}

)}

{icon} {label}

); }, ); BentoMetric.displayName = "BentoMetric"; export interface BentoInfoProps extends React.HTMLAttributes { label: React.ReactNode; icon?: React.ReactNode; } /** * Label, icon tile, then anything. kajo's `variant="tech-stack"` union is gone: * pass Chips as children instead. */ export const BentoInfo = React.forwardRef( ({ className, label, icon, children, ...props }, ref) => (

{children}

), ); BentoInfo.displayName = "BentoInfo"; export interface BentoTextProps extends Omit, "title"> { label?: React.ReactNode; icon?: React.ReactNode; title: React.ReactNode; body?: React.ReactNode; } export const BentoText = React.forwardRef( ({ className, label, icon, title, body, children, ...props }, ref) => (

{label != null && }

{title}

{body != null && (

{body}

)} {children}

), ); BentoText.displayName = "BentoText"; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@usva","registryDependencies":["https://usva.build/r/card.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"bento-grid.tsx","content":"$51","type":"registry:ui","target":"components/ui/bento-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]