50: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"] 51: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"] 52:T1561,"use client"; import { useSyncExternalStore, type ComponentProps } from "react"; import { cn } from "./lib/cn"; import "./kbd.css"; export type KbdPlatform = "mac" | "other"; /* Each key: the glyph people see on that platform, and the word a screen reader says. */ const named: Record = { mod: { mac: "⌘", other: "Ctrl", spoken: "Command", aria: "Meta" }, cmd: { mac: "⌘", other: "⌘", spoken: "Command", aria: "Meta" }, meta: { mac: "⌘", other: "Win", spoken: "Command", aria: "Meta" }, ctrl: { mac: "⌃", other: "Ctrl", spoken: "Control", aria: "Control" }, alt: { mac: "⌥", other: "Alt", spoken: "Option", aria: "Alt" }, option: { mac: "⌥", other: "Alt", spoken: "Option", aria: "Alt" }, shift: { mac: "⇧", other: "Shift", spoken: "Shift", aria: "Shift" }, enter: { mac: "↵", other: "Enter", spoken: "Enter", aria: "Enter" }, return: { mac: "↵", other: "Enter", spoken: "Return", aria: "Enter" }, esc: { mac: "Esc", other: "Esc", spoken: "Escape", aria: "Escape" }, escape: { mac: "Esc", other: "Esc", spoken: "Escape", aria: "Escape" }, tab: { mac: "⇥", other: "Tab", spoken: "Tab", aria: "Tab" }, backspace: { mac: "⌫", other: "Backspace", spoken: "Backspace", aria: "Backspace" }, delete: { mac: "⌦", other: "Del", spoken: "Delete", aria: "Delete" }, space: { mac: "Space", other: "Space", spoken: "Space", aria: "Space" }, up: { mac: "↑", other: "↑", spoken: "Up arrow", aria: "ArrowUp" }, down: { mac: "↓", other: "↓", spoken: "Down arrow", aria: "ArrowDown" }, left: { mac: "←", other: "←", spoken: "Left arrow", aria: "ArrowLeft" }, right: { mac: "→", other: "→", spoken: "Right arrow", aria: "ArrowRight" }, pageup: { mac: "PgUp", other: "PgUp", spoken: "Page up", aria: "PageUp" }, pagedown: { mac: "PgDn", other: "PgDn", spoken: "Page down", aria: "PageDown" }, home: { mac: "Home", other: "Home", spoken: "Home", aria: "Home" }, end: { mac: "End", other: "End", spoken: "End", aria: "End" }, }; /** "mod+shift+k" or ["mod", "K"] → ["mod", "shift", "k"]. A lone "+" stays a key. */ function tokens(keys: string | readonly string[]) { if (typeof keys !== "string") return [...keys]; if (keys === "+") return ["+"]; return keys.split(/\+(?!$)/u).map((key) => key.trim()).filter(Boolean); } function describe(key: string, platform: KbdPlatform) { const known = named[key.toLowerCase()]; if (known) return { glyph: known[platform], spoken: known.spoken, aria: known.aria }; const glyph = key.length === 1 ? key.toUpperCase() : key; return { glyph, spoken: glyph, aria: glyph }; } function detect(): KbdPlatform { const nav = navigator as Navigator & { userAgentData?: { platform?: string } }; const name = nav.userAgentData?.platform ?? nav.platform ?? ""; return /mac|iphone|ipad|ipod/iu.test(name) ? "mac" : "other"; } /** The platform's modifier names. The server renders "other"; Macs switch to ⌘ after hydration. */ export function useKbdPlatform(platform?: KbdPlatform): KbdPlatform { const detected = useSyncExternalStore( () => () => {}, detect, () => "other" as const, ); return platform ?? detected; } /** The value for `aria-keyshortcuts` on the control the keys trigger, e.g. "Meta+K". */ export function toAriaKeyshortcuts(keys: string | readonly string[], platform: KbdPlatform = "other") { return tokens(keys) .map((key) => { if (key.toLowerCase() === "mod") return platform === "mac" ? "Meta" : "Control"; return describe(key, platform).aria; }) .join("+"); } export type KbdProps = Omit, "children"> & { /** One key or a combination: "mod+k", "shift+enter", ["alt", "↑"]. `mod` is ⌘ on a Mac and Ctrl elsewhere. */ keys?: string | readonly string[]; /** Free text instead of keys, e.g. "G then D". */ children?: string; /** `inline` sits quietly inside a button, menu row or tooltip and takes its colour. */ variant?: "default" | "inline"; size?: "sm" | "md"; /** Force a platform instead of detecting it, e.g. in documentation. */ platform?: KbdPlatform; }; /** * Keys drawn as small raised caps. A combination is one `kbd` holding a cap * per key, so it reads as a single shortcut; symbols such as ⌘ carry their * spoken name for screen readers. */ export function Kbd({ keys, children, variant = "default", size = "md", platform, className, ...props }: KbdProps) { const resolved = useKbdPlatform(platform); const list = keys !== undefined ? tokens(keys) : children !== undefined ? [children] : []; const parts = list.map((key) => describe(key, resolved)); const shared = { "data-variant": variant, "data-size": size } as const; if (parts.length === 1) { return ( ); } return ( {parts.map((part, index) => ( {index > 0 && } ))} ); } function Glyph({ glyph, spoken }: { glyph: string; spoken: string }) { if (glyph === spoken) return glyph; return ( <> {spoken} ); } 53:T490,/* kbd.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Key caps: a small raised object with a lip on the bottom edge. */ [data-slot="kbd-group"] { display: inline-flex; align-items: center; gap: 3px; font: inherit; } [data-slot="kbd"] { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-mark); background: var(--raised); box-shadow: inset 0 0 0 1px var(--border), inset 0 -1px 0 var(--border-strong); color: var(--muted-foreground); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-slot="kbd"][data-size="sm"] { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10.5px; } [data-slot="kbd"][data-variant="inline"] { background: transparent; color: inherit; opacity: 0.72; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent); } [data-slot="kbd-group"][data-variant="inline"] { opacity: 1; } } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/kbd.tsx","content":"$52","type":"registry:ui","target":"components/ui/kbd.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/kbd.css","content":"$53","type":"registry:file","target":"components/ui/kbd.css"}],"className":"h-[70svh] min-h-80"}]]}]