{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "context-meter", "title": "Context meter", "description": "Context meter is a production-ready ai component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "next-themes", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/ai/context-meter.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { easeCss } from \"@/components/bjork-ui/_core/motion\";\nimport {\n AI_PANEL,\n FOCUS_RING,\n PRESS,\n formatTokens,\n useAiTone,\n useControllable,\n useHydrated,\n useReduceMotion,\n type BjorkTone,\n} from \"@/components/bjork-ui/ai/_shared\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ContextSegment {\n id: string;\n label: string;\n tokens: number;\n /** Space held back rather than spent, such as room for the reply. Drawn hatched. */\n reserved?: boolean;\n /** Override the fill. Defaults to the next tonal step of the accent. */\n color?: string;\n}\n\nexport type ContextLevel = \"ok\" | \"warn\" | \"danger\";\n\nexport interface ContextMeterProps {\n segments: ContextSegment[];\n /** Context window size in tokens. */\n limit: number;\n /** \"full\" draws the bar and legend. \"compact\" is a ring and number that opens the breakdown in a popover. */\n variant?: \"full\" | \"compact\";\n /** Fraction of the limit where the meter turns amber. Default 0.75. */\n warnAt?: number;\n /** Fraction of the limit where the meter turns red. Default 0.9. */\n dangerAt?: number;\n /** Header label. Default \"Context\". */\n label?: string;\n /** Compact only: controlled popover state. */\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Compact only: which side the popover prefers. It flips when there is no room. Default \"top\". */\n side?: \"top\" | \"bottom\";\n /** Which edge of the trigger the popover lines up with. \"end\" suits a trigger at the right of a footer. Default \"end\". */\n align?: \"start\" | \"end\";\n tone?: BjorkTone;\n className?: string;\n}\n\nexport const SAMPLE_CONTEXT: ContextSegment[] = [\n { id: \"system\", label: \"System prompt\", tokens: 6_800 },\n { id: \"conversation\", label: \"Conversation\", tokens: 71_400 },\n { id: \"files\", label: \"Attached files\", tokens: 46_200 },\n { id: \"tools\", label: \"Tool results\", tokens: 15_600 },\n { id: \"reserved\", label: \"Reserved for output\", tokens: 16_000, reserved: true },\n];\n\n// Tonal steps of the accent, then neutrals. Never a rainbow: every fill reads as the same family.\nconst STEPS = [\n \"var(--bjork-text-medium)\",\n \"var(--bjork-accent)\",\n \"color-mix(in srgb, var(--bjork-accent) 58%, transparent)\",\n \"color-mix(in srgb, var(--bjork-accent) 32%, transparent)\",\n \"var(--bjork-text-soft)\",\n \"var(--bjork-text-faint)\",\n];\nconst HATCH = \"repeating-linear-gradient(-45deg, var(--bjork-text-soft) 0 1.5px, transparent 1.5px 4px)\";\n\nconst LEVEL_WORD: Record = { ok: \"\", warn: \"Getting full\", danger: \"Will summarize soon\" };\nconst LEVEL_COLOR: Record = {\n ok: \"var(--bjork-text-muted)\",\n warn: \"var(--bjork-warning)\",\n danger: \"var(--bjork-error)\",\n};\n\nfunction fillOf(seg: ContextSegment, i: number): string {\n if (seg.reserved) return HATCH;\n return seg.color ?? STEPS[i % STEPS.length];\n}\n\nfunction pct(n: number): string {\n if (n > 0 && n < 0.01) return \"<1%\";\n return `${Math.round(n * 100)}%`;\n}\n\nfunction levelOf(ratio: number, warnAt: number, dangerAt: number): ContextLevel {\n if (ratio >= dangerAt) return \"danger\";\n if (ratio >= warnAt) return \"warn\";\n return \"ok\";\n}\n\n/**\n * How much of the context window a conversation is using, split by what is using it. The bar and legend are\n * linked: pointing at either highlights the same category. Crossing the warn and danger lines is announced.\n */\nexport function ContextMeter({\n segments,\n limit,\n variant = \"full\",\n warnAt = 0.75,\n dangerAt = 0.9,\n label = \"Context\",\n open,\n defaultOpen = false,\n onOpenChange,\n side = \"top\",\n align = \"end\",\n tone: toneProp,\n className,\n}: ContextMeterProps) {\n const { pal, style } = useAiTone(toneProp);\n const used = segments.reduce((sum, s) => sum + Math.max(0, s.tokens), 0);\n const ratio = limit > 0 ? used / limit : 0;\n const level = levelOf(ratio, warnAt, dangerAt);\n\n // Announce threshold transitions only, derived during render.\n const [announce, setAnnounce] = useState({ level, message: \"\" });\n if (announce.level !== level) {\n const message =\n level === \"ok\" ? \"Context usage back under the limit\" : `Context ${pct(ratio)} used. ${LEVEL_WORD[level]}`;\n setAnnounce({ level, message });\n }\n\n const shared = { segments, limit, used, ratio, level, warnAt, dangerAt, label };\n\n return (\n \n {variant === \"full\" ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\ninterface BodyProps {\n segments: ContextSegment[];\n limit: number;\n used: number;\n ratio: number;\n level: ContextLevel;\n warnAt: number;\n dangerAt: number;\n label: string;\n}\n\nfunction MeterBody({ segments, limit, used, ratio, level, warnAt, dangerAt, label }: BodyProps) {\n const reduce = useReduceMotion();\n const hydrated = useHydrated();\n const [hot, setHot] = useState(null);\n const [pinned, setPinned] = useState(null);\n const active = hot ?? pinned;\n const labelId = useId();\n\n const free = Math.max(0, limit - used);\n const scaleBase = Math.max(limit, used);\n // Each segment is a full-width layer that is scaled and shifted, so value changes animate on the compositor.\n const starts = segments.reduce(\n (acc, seg, i) => [...acc, i === 0 ? 0 : acc[i - 1] + Math.max(0, segments[i - 1].tokens)],\n [],\n );\n const layers = segments.map((seg, i) => ({\n seg,\n i,\n start: starts[i] / scaleBase,\n frac: Math.max(0, seg.tokens) / scaleBase,\n }));\n const transition = reduce ? \"none\" : `transform 520ms ${easeCss.out}, opacity 160ms ease-out`;\n const levelColor = LEVEL_COLOR[level];\n const valueText = `${used.toLocaleString(\"en-US\")} of ${limit.toLocaleString(\"en-US\")} tokens, ${pct(ratio)}${\n level === \"ok\" ? \"\" : `. ${LEVEL_WORD[level]}`\n }`;\n\n return (\n
\n
\n
\n \n {label}\n \n \n {level === \"ok\" ? \"\" : LEVEL_WORD[level]}\n \n
\n \n {formatTokens(used)}\n / {formatTokens(limit)}\n \n {pct(ratio)}\n \n \n
\n\n setHot(null)}\n >\n
\n {layers.map(({ seg, i, start, frac }) => (\n setHot(seg.id)}\n className=\"absolute inset-0 origin-left\"\n style={{\n transform: `translateX(${(hydrated ? start : 0) * 100}%) scaleX(${hydrated ? frac : 0})`,\n background: fillOf(seg, i),\n opacity: active && active !== seg.id ? 0.28 : 1,\n transition,\n }}\n />\n ))}\n {/* 2px surface-coloured cuts between segments, moved with transforms like the fills. */}\n {layers.slice(1).map(({ seg, start }) => (\n \n \n
\n ))}\n
\n {/* Threshold ticks under the bar. */}\n
\n {[warnAt, dangerAt].map((t, i) => (\n \n ))}\n
\n \n\n
    \n {layers.map(({ seg, i }) => {\n const on = active === seg.id;\n return (\n
  • \n setHot(seg.id)}\n onPointerLeave={() => setHot(null)}\n onFocus={() => setHot(seg.id)}\n onBlur={() => setHot(null)}\n onClick={() => setPinned((p) => (p === seg.id ? null : seg.id))}\n className={cn(\n \"group flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-[7px] px-2 text-left transition-[background-color,opacity] duration-150\",\n FOCUS_RING,\n on ? \"bg-[color:var(--bjork-surface-active)]\" : \"hover:bg-[color:var(--bjork-surface-active)]\",\n active && !on && \"opacity-55\",\n )}\n >\n \n \n {seg.label}\n \n \n {formatTokens(seg.tokens)}\n \n \n {pct(seg.tokens / Math.max(1, limit))}\n \n \n
    • \n );\n })}\n
  • \n \n \n Free\n \n \n {formatTokens(free)}\n \n \n {pct(free / Math.max(1, limit))}\n \n
    • \n
\n \n );\n}\n\ninterface CompactProps extends BodyProps {\n open?: boolean;\n defaultOpen: boolean;\n onOpenChange?: (open: boolean) => void;\n side: \"top\" | \"bottom\";\n align: \"start\" | \"end\";\n ringTrack: string;\n}\n\nconst RING = 18;\nconst RING_STROKE = 2;\n\nfunction CompactMeter({ open, defaultOpen, onOpenChange, side, align, ringTrack, ...body }: CompactProps) {\n const reduce = useReduceMotion();\n const hydrated = useHydrated();\n const [isOpen, setOpen] = useControllable(open, defaultOpen, onOpenChange);\n const [placement, setPlacement] = useState<\"top\" | \"bottom\">(side);\n const wrapRef = useRef(null);\n const triggerRef = useRef(null);\n const panelId = useId();\n\n const r = (RING - RING_STROKE) / 2;\n const c = 2 * Math.PI * r;\n const shown = Math.min(1, body.ratio);\n const color = body.level === \"ok\" ? \"var(--bjork-accent)\" : LEVEL_COLOR[body.level];\n\n const toggle = () => {\n if (!isOpen) {\n // Flip to the other side when the preferred one has no room for a ~360px panel.\n const rect = triggerRef.current?.getBoundingClientRect();\n if (rect) {\n const roomTop = rect.top;\n const roomBottom = window.innerHeight - rect.bottom;\n const cramped = side === \"top\" ? roomTop < 360 && roomBottom > roomTop : roomBottom < 360 && roomTop > roomBottom;\n setPlacement(cramped ? (side === \"top\" ? \"bottom\" : \"top\") : side);\n }\n }\n setOpen(!isOpen);\n };\n\n useEffect(() => {\n if (!isOpen) return;\n const onDown = (e: PointerEvent) => {\n if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);\n };\n const onKey = (e: KeyboardEvent) => {\n if (e.key !== \"Escape\") return;\n setOpen(false);\n triggerRef.current?.focus();\n };\n document.addEventListener(\"pointerdown\", onDown);\n document.addEventListener(\"keydown\", onKey);\n return () => {\n document.removeEventListener(\"pointerdown\", onDown);\n document.removeEventListener(\"keydown\", onKey);\n };\n }, [isOpen, setOpen]);\n\n return (\n
\n \n \n \n \n \n \n {pct(body.ratio)}\n \n \n\n
\n \n );\n}\n\n", "type": "registry:component", "target": "@components/bjork-ui/ai/context-meter.tsx" }, { "path": "components/bjork-ui/_core/a11y.tsx", "content": "import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n return {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/a11y.tsx" }, { "path": "components/bjork-ui/_core/motion.ts", "content": "// Shared springs, easings and durations. Components import these instead of inventing values.\n\nexport const springs = {\n press: { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 },\n snappy: { type: \"spring\", stiffness: 400, damping: 25, mass: 1 },\n standard: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n soft: { type: \"spring\", stiffness: 200, damping: 25, mass: 1.2 },\n settle: { type: \"spring\", stiffness: 380, damping: 30, mass: 0.8 },\n blurIn: { type: \"spring\", stiffness: 400, damping: 28, mass: 0.6 },\n} as const;\n\nexport const ease = {\n out: [0.23, 1, 0.32, 1],\n inOut: [0.77, 0, 0.175, 1],\n drawer: [0.32, 0.72, 0, 1],\n} as const;\n\nexport const easeCss = {\n out: \"cubic-bezier(0.23,1,0.32,1)\",\n inOut: \"cubic-bezier(0.77,0,0.175,1)\",\n drawer: \"cubic-bezier(0.32,0.72,0,1)\",\n} as const;\n\nexport const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms\n\n// Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1].\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {\n const cx = 3 * x1;\n const bx = 3 * (x2 - x1) - cx;\n const ax = 1 - cx - bx;\n const cy = 3 * y1;\n const by = 3 * (y2 - y1) - cy;\n const ay = 1 - cy - by;\n const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s;\n const sampleY = (s: number) => ((ay * s + by) * s + cy) * s;\n const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx;\n\n const solveX = (x: number) => {\n let s = x;\n for (let i = 0; i < 8; i++) {\n const err = sampleX(s) - x;\n if (Math.abs(err) < 1e-6) return s;\n const d = sampleDX(s);\n if (Math.abs(d) < 1e-6) break;\n s -= err / d;\n }\n let lo = 0;\n let hi = 1;\n s = x;\n while (lo < hi) {\n const v = sampleX(s);\n if (Math.abs(v - x) < 1e-6) return s;\n if (x > v) lo = s;\n else hi = s;\n s = (lo + hi) / 2;\n if (hi - lo < 1e-7) break;\n }\n return s;\n };\n\n return (t: number) => {\n if (t <= 0) return 0;\n if (t >= 1) return 1;\n return sampleY(solveX(t));\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/motion.ts" }, { "path": "components/bjork-ui/ai/_shared.ts", "content": "\"use client\";\n\n// Shared plumbing for the bjork-ui AI components: tone tokens, reduced motion, controllable state and\n// number formatting. Every AI component imports from here so they read as one family.\n\nimport {\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n useSyncExternalStore,\n type CSSProperties,\n} from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { BJORK_PALETTE, type BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { surfaceVars } from \"@/components/bjork-ui/_core/surface\";\n\nexport type { BjorkTone };\nexport type BjorkPalette = (typeof BJORK_PALETTE)[BjorkTone];\n\nconst noopSubscribe = () => () => {};\n\n/** False on the server and the first client render, true after hydration. */\nexport function useHydrated(): boolean {\n return useSyncExternalStore(\n noopSubscribe,\n () => true,\n () => false,\n );\n}\n\n/** Hydration-safe reduced motion: both sides report \"not reduced\" until mount, then the real value applies. */\nexport function useReduceMotion(): boolean {\n const hydrated = useHydrated();\n const reduced = useReducedMotion();\n return hydrated && reduced === true;\n}\n\n/**\n * Resolves the tone and returns the CSS custom properties for it. Spread `style` on the component root so an\n * explicit `tone` prop wins over the page theme, and status colours (success, warning, error) are always defined.\n */\nexport function useAiTone(toneProp?: BjorkTone) {\n const tone = useBjorkTone(toneProp);\n const pal = BJORK_PALETTE[tone];\n const style = {\n ...surfaceVars(tone),\n \"--bjork-text\": pal.text,\n \"--bjork-text-medium\": pal.textMedium,\n \"--bjork-text-muted\": pal.textMuted,\n \"--bjork-text-soft\": pal.textSoft,\n \"--bjork-text-faint\": pal.textFaint,\n \"--bjork-hair\": pal.hair,\n \"--bjork-border\": pal.border,\n \"--bjork-border-strong\": pal.borderStrong,\n \"--bjork-surface\": pal.surface,\n \"--bjork-raised\": pal.raised,\n \"--bjork-surface-active\": pal.active,\n \"--bjork-accent\": pal.accent,\n \"--bjork-accent-ink\": pal.accentInk,\n \"--bjork-accent-fill\": pal.accentFill,\n \"--bjork-accent-soft\": pal.accentSoft,\n \"--bjork-accent-muted\": pal.accentMuted,\n \"--bjork-accent-foreground\": pal.accentFg,\n \"--bjork-success\": pal.success,\n \"--bjork-warning\": pal.warning,\n \"--bjork-error\": pal.error,\n \"--bjork-ring-offset\": pal.bg,\n colorScheme: tone,\n } as CSSProperties;\n return { tone, pal, style };\n}\n\n/** Classes for the shared keyboard focus ring. */\nexport const FOCUS_RING =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]\";\n\n/** Classes for the shared press feedback. */\nexport const PRESS = \"transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none\";\n\n/**\n * Controlled-or-uncontrolled state. Pass `value` to control it; `onChange` fires for every change either way.\n */\nexport function useControllable(\n value: T | undefined,\n defaultValue: T,\n onChange?: (next: T) => void,\n): [T, (next: T) => void] {\n const controlled = value !== undefined;\n const [inner, setInner] = useState(defaultValue);\n const current = controlled ? value : inner;\n const onChangeRef = useRef(onChange);\n useLayoutEffect(() => {\n onChangeRef.current = onChange;\n });\n const set = useCallback(\n (next: T) => {\n if (!controlled) setInner(next);\n onChangeRef.current?.(next);\n },\n [controlled],\n );\n return [current, set];\n}\n\n/** 1234 -> \"1,234\", 18400 -> \"18.4k\", 1_200_000 -> \"1.2M\". */\nexport function formatTokens(n: number): string {\n if (n < 10_000) return Math.round(n).toLocaleString(\"en-US\");\n if (n < 1_000_000) return `${(n / 1000).toFixed(n < 100_000 ? 1 : 0).replace(/\\.0$/, \"\")}k`;\n return `${(n / 1_000_000).toFixed(n < 10_000_000 ? 2 : 1).replace(/\\.?0+$/, \"\")}M`;\n}\n\n/** US dollars with sub-cent precision when it matters: 0.0042 -> \"$0.0042\", 12.5 -> \"$12.50\". */\nexport function formatCost(usd: number): string {\n if (usd === 0) return \"$0.00\";\n if (Math.abs(usd) < 0.01) return `$${usd.toFixed(4)}`;\n if (Math.abs(usd) < 1) return `$${usd.toFixed(3)}`;\n return `$${usd.toLocaleString(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n}\n\n/** 640 -> \"640ms\", 4200 -> \"4.2s\", 95000 -> \"1m 35s\". */\nexport function formatDuration(ms: number): string {\n if (ms < 1000) return `${Math.round(ms)}ms`;\n if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;\n const m = Math.floor(ms / 60_000);\n const s = Math.round((ms % 60_000) / 1000);\n return `${m}m ${s}s`;\n}\n\n/** 2_400_000 bytes -> \"2.4 MB\". */\nexport function formatBytes(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n const units = [\"KB\", \"MB\", \"GB\"];\n let v = bytes / 1024;\n let i = 0;\n while (v >= 1024 && i < units.length - 1) {\n v /= 1024;\n i++;\n }\n return `${v.toFixed(v < 10 ? 1 : 0)} ${units[i]}`;\n}\n\n/** Shimmer keyframes for \"working\" text. Mount once with