{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "cost-meter", "title": "Cost meter", "description": "Cost 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/cost-meter.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState, type KeyboardEvent, type PointerEvent } from \"react\";\nimport { motion, useSpring, useTransform } from \"framer-motion\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { easeCss } from \"@/components/bjork-ui/_core/motion\";\nimport {\n AI_PANEL,\n FOCUS_RING,\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 type CostPeriod = \"today\" | \"7d\" | \"30d\";\n\nexport interface ModelUsage {\n id: string;\n model: string;\n /** Uncached input tokens. */\n inputTokens: number;\n outputTokens: number;\n /** Input tokens served from the prompt cache. */\n cachedTokens: number;\n /** Cost for the period, in `currency`. */\n cost: number;\n /** What the cached tokens would have cost at the full input price, minus what they did cost. */\n cacheSavings?: number;\n}\n\nexport interface DailySpend {\n /** ISO date, such as \"2026-10-08\". */\n date: string;\n cost: number;\n}\n\nexport interface CostMeterProps {\n /** Spend for the selected period. */\n spend: number;\n /** Budget for the selected period. Amber at 80%, red at 100%, overage hatched. */\n budget: number;\n breakdown?: ModelUsage[];\n /** Daily spend, oldest first. The last 14 entries are drawn. */\n history?: DailySpend[];\n period?: CostPeriod;\n defaultPeriod?: CostPeriod;\n onPeriodChange?: (period: CostPeriod) => void;\n /** ISO 4217 code. Default \"USD\". */\n currency?: string;\n /** Header label. Default \"Spend\". */\n label?: string;\n /** Demo/preview only: shows the crosshair on this history point (0-based, of the drawn points) on mount. */\n defaultActivePoint?: number;\n tone?: BjorkTone;\n className?: string;\n}\n\ninterface PeriodUsage {\n spend: number;\n budget: number;\n breakdown: ModelUsage[];\n}\n\nconst HISTORY_VALUES = [0.31, 0.42, 0.28, 0.55, 0.61, 0.38, 0.22, 0.44, 0.63, 0.68, 0.5, 0.55, 0.66, 0.84];\n\nexport const SAMPLE_USAGE: { history: DailySpend[]; periods: Record } = {\n // Fourteen days ending Oct 8, 2026.\n history: HISTORY_VALUES.map((cost, i) => ({ date: `2026-${i < 6 ? \"09\" : \"10\"}-${String(i < 6 ? 25 + i : i - 5).padStart(2, \"0\")}`, cost })),\n periods: {\n today: {\n spend: 0.84,\n budget: 0.75,\n breakdown: [\n { id: \"halcyon-3-pro\", model: \"Halcyon 3 Pro\", inputTokens: 148_000, outputTokens: 17_600, cachedTokens: 96_000, cost: 0.64, cacheSavings: 0.26 },\n { id: \"corvid-reasoner\", model: \"Corvid Reasoner\", inputTokens: 26_000, outputTokens: 4_100, cachedTokens: 0, cost: 0.17 },\n { id: \"kestrel-mini\", model: \"Kestrel Mini\", inputTokens: 92_000, outputTokens: 18_400, cachedTokens: 31_000, cost: 0.03 },\n ],\n },\n \"7d\": {\n spend: 4.3,\n budget: 5,\n breakdown: [\n { id: \"halcyon-3-pro\", model: \"Halcyon 3 Pro\", inputTokens: 812_000, outputTokens: 94_000, cachedTokens: 560_000, cost: 3.41, cacheSavings: 1.51 },\n { id: \"corvid-reasoner\", model: \"Corvid Reasoner\", inputTokens: 128_000, outputTokens: 29_000, cachedTokens: 0, cost: 0.75 },\n { id: \"kestrel-mini\", model: \"Kestrel Mini\", inputTokens: 384_000, outputTokens: 71_000, cachedTokens: 120_000, cost: 0.14, cacheSavings: 0.02 },\n ],\n },\n \"30d\": {\n spend: 14.4,\n budget: 20,\n breakdown: [\n { id: \"halcyon-3-pro\", model: \"Halcyon 3 Pro\", inputTokens: 2_840_000, outputTokens: 312_000, cachedTokens: 1_900_000, cost: 11.62, cacheSavings: 5.13 },\n { id: \"corvid-reasoner\", model: \"Corvid Reasoner\", inputTokens: 410_000, outputTokens: 96_000, cachedTokens: 0, cost: 2.31 },\n { id: \"kestrel-mini\", model: \"Kestrel Mini\", inputTokens: 1_200_000, outputTokens: 240_000, cachedTokens: 400_000, cost: 0.47, cacheSavings: 0.05 },\n ],\n },\n },\n};\n\nconst PERIODS: { id: CostPeriod; label: string; long: string }[] = [\n { id: \"today\", label: \"Today\", long: \"today\" },\n { id: \"7d\", label: \"7d\", long: \"the last 7 days\" },\n { id: \"30d\", label: \"30d\", long: \"the last 30 days\" },\n];\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\nconst HATCH =\n \"repeating-linear-gradient(-45deg, var(--bjork-error) 0 2px, color-mix(in srgb, var(--bjork-error) 28%, transparent) 2px 4.5px)\";\n\nfunction shortDate(iso: string): string {\n const m = /^(\\d{4})-(\\d{2})-(\\d{2})/.exec(iso);\n return m ? `${MONTHS[Number(m[2]) - 1]} ${Number(m[3])}` : iso;\n}\n\nfunction money(n: number, currency: string): string {\n return new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency, minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(n);\n}\n\n/**\n * Spend against a budget: a large springing figure, a budget bar that turns amber then red, a per-model breakdown\n * with cache savings, and a 14-day sparkline you can scrub with a pointer or the arrow keys.\n */\nexport function CostMeter({\n spend,\n budget,\n breakdown = [],\n history = [],\n period,\n defaultPeriod = \"30d\",\n onPeriodChange,\n currency = \"USD\",\n label = \"Spend\",\n defaultActivePoint,\n tone: toneProp,\n className,\n}: CostMeterProps) {\n const { style } = useAiTone(toneProp);\n const reduce = useReduceMotion();\n const hydrated = useHydrated();\n const [current, setPeriod] = useControllable(period, defaultPeriod, onPeriodChange);\n const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n const baseId = useId();\n const labelId = `${baseId}-label`;\n\n const ratio = budget > 0 ? spend / budget : 0;\n const level = ratio >= 1 ? \"over\" : ratio >= 0.8 ? \"warn\" : \"ok\";\n const levelColor = level === \"over\" ? \"var(--bjork-error)\" : level === \"warn\" ? \"var(--bjork-warning)\" : \"var(--bjork-accent)\";\n const base = Math.max(budget, spend) || 1;\n const within = Math.min(spend, budget) / base;\n const over = Math.max(0, spend - budget) / base;\n const fmt = (n: number) => money(n, currency);\n\n // The figure springs to new values; reduced motion jumps.\n const figure = useSpring(spend, { stiffness: 140, damping: 24, mass: 0.9 });\n const figureText = useTransform(figure, (v) => fmt(Math.max(0, v)));\n useEffect(() => {\n if (reduce) figure.jump(spend);\n else figure.set(spend);\n }, [spend, reduce, figure]);\n\n // Announce crossing into amber or red.\n const [seen, setSeen] = useState({ level, message: \"\" });\n if (seen.level !== level) {\n setSeen({\n level,\n message:\n level === \"over\" ? `Over budget: ${fmt(spend)} of ${fmt(budget)}` : level === \"warn\" ? `${Math.round(ratio * 100)}% of budget used` : \"\",\n });\n }\n\n const onTabKey = (e: KeyboardEvent, i: number) => {\n const delta = e.key === \"ArrowRight\" ? 1 : e.key === \"ArrowLeft\" ? -1 : 0;\n let next = delta ? (i + delta + PERIODS.length) % PERIODS.length : -1;\n if (e.key === \"Home\") next = 0;\n if (e.key === \"End\") next = PERIODS.length - 1;\n if (next < 0) return;\n e.preventDefault();\n setPeriod(PERIODS[next].id);\n tabRefs.current[next]?.focus();\n };\n\n const transition = reduce || !hydrated ? \"none\" : `transform 520ms ${easeCss.out}, background-color 200ms ease-out`;\n\n return (\n \n
\n

\n {label}\n

\n
\n {PERIODS.map((p, i) => {\n const selected = p.id === current;\n return (\n {\n tabRefs.current[i] = el;\n }}\n type=\"button\"\n role=\"tab\"\n id={`${baseId}-tab-${p.id}`}\n aria-selected={selected}\n aria-controls={`${baseId}-panel`}\n tabIndex={selected ? 0 : -1}\n onClick={() => setPeriod(p.id)}\n onKeyDown={(e) => onTabKey(e, i)}\n className={cn(\n \"h-7 min-w-[44px] cursor-pointer rounded-[7px] px-2.5 font-mono text-[11px] transition-[background-color,color,box-shadow] duration-150\",\n selected\n ? \"bg-[color:var(--bjork-field)] text-[color:var(--bjork-text)] shadow-[var(--bjork-shadow-surface)]\"\n : \"text-[color:var(--bjork-text-muted)] hover:text-[color:var(--bjork-text)]\",\n FOCUS_RING,\n )}\n >\n {p.label}\n \n );\n })}\n
\n
\n\n
\n
\n \n {figureText}\n \n of {fmt(budget)}\n \n {level === \"over\" ? `${fmt(spend - budget)} over` : `${Math.round(ratio * 100)}%`}\n \n
\n\n p.id === current)?.long}, ${Math.round(ratio * 100)}%`}\n className=\"relative mt-3\"\n >\n
\n \n \n
\n {/* Budget line when over, and the 80% warning tick. */}\n
\n \n {level === \"over\" && (\n \n )}\n
\n
\n\n {breakdown.length > 0 && }\n \n\n {history.length > 1 && }\n\n \n \n );\n}\n\nfunction Breakdown({ rows, fmt }: { rows: ModelUsage[]; fmt: (n: number) => string }) {\n const th = \"pb-1.5 text-right font-mono text-[10px] font-normal uppercase tracking-[0.08em] text-[color:var(--bjork-text-faint)]\";\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {rows.map((r) => (\n \n \n \n \n \n \n ))}\n \n
Usage by model
\n Model\n \n In / out\n \n Cached\n \n Cost\n
\n {r.model}\n \n {formatTokens(r.inputTokens)}\n / \n {formatTokens(r.outputTokens)}\n \n \n {r.cachedTokens ? formatTokens(r.cachedTokens) : \"—\"}\n \n {r.cacheSavings ? (\n −{fmt(r.cacheSavings)}\n ) : null}\n \n {fmt(r.cost)}\n
\n );\n}\n\nconst CHART_H = 64;\nconst PAD_TOP = 8;\n\nfunction Sparkline({ points, fmt, defaultActive }: { points: DailySpend[]; fmt: (n: number) => string; defaultActive?: number }) {\n const [active, setActive] = useState(defaultActive ?? null);\n const [said, setSaid] = useState(\"\");\n const boxRef = useRef(null);\n const summaryId = useId();\n // useId output contains characters that break url(#id) references.\n const gradId = `spend-grad-${useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n\n const n = points.length;\n const max = Math.max(...points.map((p) => p.cost), 0.0001);\n const total = points.reduce((s, p) => s + p.cost, 0);\n const peak = points.reduce((best, p, i) => (p.cost > points[best].cost ? i : best), 0);\n // x in 0..100 (percent of width), y in px.\n const xs = points.map((_, i) => (i / (n - 1)) * 100);\n const ys = points.map((p) => PAD_TOP + (1 - p.cost / max) * (CHART_H - PAD_TOP - 2));\n const line = points.map((_, i) => `${i ? \"L\" : \"M\"}${xs[i]},${ys[i]}`).join(\" \");\n const area = `${line} L100,${CHART_H} L0,${CHART_H} Z`;\n\n const point = active !== null ? points[active] : null;\n const say = (i: number) => setSaid(`${shortDate(points[i].date)}: ${fmt(points[i].cost)}`);\n\n const fromPointer = (e: PointerEvent) => {\n const r = boxRef.current?.getBoundingClientRect();\n if (!r) return;\n const i = Math.round(((e.clientX - r.left) / r.width) * (n - 1));\n setActive(Math.min(n - 1, Math.max(0, i)));\n };\n\n const onKey = (e: KeyboardEvent) => {\n const cur = active ?? n - 1;\n let next = cur;\n if (e.key === \"ArrowRight\") next = Math.min(n - 1, cur + 1);\n else if (e.key === \"ArrowLeft\") next = Math.max(0, cur - 1);\n else if (e.key === \"Home\") next = 0;\n else if (e.key === \"End\") next = n - 1;\n else if (e.key === \"Escape\") {\n setActive(null);\n return;\n } else return;\n e.preventDefault();\n setActive(next);\n say(next);\n };\n\n // Tooltip hugs the crosshair but never leaves the chart: pinned left near the start, right near the end.\n const tipAlign = active === null ? 0 : active / (n - 1);\n\n return (\n
\n
\n Last {n} days\n {fmt(total)}\n
\n

\n Daily spend over the last {n} days, {fmt(total)} in total, highest on {shortDate(points[peak].date)} at {fmt(points[peak].cost)}.\n Use the left and right arrow keys to read each day.\n

\n {\n if (active === null) {\n setActive(n - 1);\n say(n - 1);\n }\n }}\n onBlur={() => setActive(null)}\n onPointerMove={fromPointer}\n onPointerDown={fromPointer}\n onPointerLeave={(e) => {\n if (e.pointerType === \"mouse\" && document.activeElement !== boxRef.current) setActive(null);\n }}\n className={cn(\"relative cursor-crosshair touch-pan-y rounded-[6px]\", FOCUS_RING)}\n style={{ height: CHART_H }}\n >\n \n \n \n \n \n \n \n \n \n \n \n {/* The crosshair and dot are HTML so they stay round and crisp under the stretched viewBox. */}\n {point && active !== null && (\n <>\n \n \n \n {shortDate(point.date)}{\" \"}\n {fmt(point.cost)}\n \n \n )}\n
\n
\n {shortDate(points[0].date)}\n {shortDate(points[n - 1].date)}\n
\n \n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/ai/cost-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