60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62:T4437,"use client"; import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import { cn } from "@/lib/cn"; /* ------------------------------------------------------------------ */ /* Platform */ /* ------------------------------------------------------------------ */ export type Platform = "mac" | "other"; function detectPlatform(): Platform { const nav = navigator as Navigator & { userAgentData?: { platform?: string } }; const hint = nav.userAgentData?.platform || nav.platform || nav.userAgent; return /mac|iphone|ipad|ipod/i.test(hint) ? "mac" : "other"; } const noop = () => () => {}; /** * The platform the shortcuts should be written for. The server has no way to * know, so it renders the Mac glyphs and the client corrects them right after * hydration, without a mismatch warning. */ export function usePlatform(override?: Platform): Platform { const detected = useSyncExternalStore(noop, detectPlatform, () => "mac" as Platform); return override ?? detected; } /* ------------------------------------------------------------------ */ /* Parsing and formatting */ /* ------------------------------------------------------------------ */ const alias: Record = { cmd: "meta", command: "meta", meta: "meta", "⌘": "meta", win: "meta", super: "meta", ctrl: "ctrl", control: "ctrl", "⌃": "ctrl", alt: "alt", option: "alt", opt: "alt", "⌥": "alt", shift: "shift", "⇧": "shift", enter: "enter", return: "enter", "↵": "enter", "↩": "enter", esc: "esc", escape: "esc", backspace: "backspace", "⌫": "backspace", del: "delete", delete: "delete", "⌦": "delete", space: "space", spacebar: "space", tab: "tab", "⇥": "tab", up: "up", arrowup: "up", "↑": "up", down: "down", arrowdown: "down", "↓": "down", left: "left", arrowleft: "left", "←": "left", right: "right", arrowright: "right", "→": "right", pageup: "pageup", pgup: "pageup", pagedown: "pagedown", pgdn: "pagedown", home: "home", end: "end", capslock: "capslock", caps: "capslock", plus: "+", comma: ",", period: ".", slash: "/", }; const MODIFIERS = ["mod", "ctrl", "alt", "shift", "meta"] as const; const isModifier = (k: string) => (MODIFIERS as readonly string[]).includes(k); /** "mod+shift+p" → [["mod","shift","p"]]; "g i" → [["g"],["i"]]. Steps are pressed one after another. */ export function parseShortcut(keys: string | string[]): string[][] { if (Array.isArray(keys)) return [keys.map(normalizeKey)]; return keys .trim() .split(/\s+/) .filter(Boolean) .map((step) => { // "mod++" means mod and the plus key. const parts = step === "+" ? ["+"] : step.endsWith("++") ? [...step.slice(0, -2).split("+"), "+"] : step.split("+"); return parts.filter(Boolean).map(normalizeKey); }); } export function normalizeKey(key: string) { const k = key.trim(); const lower = k.toLowerCase(); return alias[lower] ?? (k.length === 1 ? lower : lower); } /** Resolves "mod" and sorts modifiers in the order each platform prints them (⌃⌥⇧⌘ on a Mac, Ctrl+Alt+Shift elsewhere). */ export function resolveStep(step: string[], platform: Platform) { const resolved = step.map((k) => (k === "mod" ? (platform === "mac" ? "meta" : "ctrl") : k)); const order = platform === "mac" ? ["ctrl", "alt", "shift", "meta"] : ["ctrl", "meta", "alt", "shift"]; const mods = order.filter((m) => resolved.includes(m)); const rest = resolved.filter((k) => !isModifier(k)); return [...mods, ...rest]; } const macGlyph: Record = { meta: "⌘", ctrl: "⌃", alt: "⌥", shift: "⇧", enter: "↵", backspace: "⌫", delete: "⌦", esc: "esc", tab: "⇥", space: "Space", up: "↑", down: "↓", left: "←", right: "→", capslock: "⇪", pageup: "PgUp", pagedown: "PgDn", home: "Home", end: "End", }; const otherGlyph: Record = { meta: "Win", ctrl: "Ctrl", alt: "Alt", shift: "Shift", enter: "Enter", backspace: "Backspace", delete: "Del", esc: "Esc", tab: "Tab", space: "Space", up: "↑", down: "↓", left: "←", right: "→", capslock: "Caps", pageup: "PgUp", pagedown: "PgDn", home: "Home", end: "End", }; const spoken: Record = { meta: ["Command", "Windows"], ctrl: ["Control", "Control"], alt: ["Option", "Alt"], shift: ["Shift", "Shift"], enter: ["Return", "Enter"], backspace: ["Delete", "Backspace"], delete: ["Forward delete", "Delete"], esc: ["Escape", "Escape"], tab: ["Tab", "Tab"], space: ["Space", "Space"], up: ["Up arrow", "Up arrow"], down: ["Down arrow", "Down arrow"], left: ["Left arrow", "Left arrow"], right: ["Right arrow", "Right arrow"], capslock: ["Caps lock", "Caps lock"], pageup: ["Page up", "Page up"], pagedown: ["Page down", "Page down"], home: ["Home", "Home"], end: ["End", "End"], "+": ["Plus", "Plus"], "?": ["Question mark", "Question mark"], "/": ["Slash", "Slash"], ".": ["Period", "Period"], ",": ["Comma", "Comma"], }; export function keyLabel(key: string, platform: Platform) { const table = platform === "mac" ? macGlyph : otherGlyph; if (table[key]) return table[key]; return key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1); } export function keyName(key: string, platform: Platform) { const s = spoken[key]; if (s) return platform === "mac" ? s[0] : s[1]; return key.length === 1 ? key.toUpperCase() : key; } /** A plain-text rendering for titles, tooltips and screen readers: "⌘⇧P" / "Ctrl+Shift+P", or spoken: "Command Shift P". */ export function formatShortcut(keys: string | string[], platform: Platform, { spoken: speak = false } = {}) { return parseShortcut(keys) .map((step) => { const r = resolveStep(step, platform); if (speak) return r.map((k) => keyName(k, platform)).join(" "); return r.map((k) => keyLabel(k, platform)).join(platform === "mac" ? "" : "+"); }) .join(speak ? ", then " : " then "); } /* ------------------------------------------------------------------ */ /* Events */ /* ------------------------------------------------------------------ */ /** The key an event is about, in the same names parseShortcut uses. Letters and digits come from the physical key so ⌥K on a Mac is still "k". */ export function eventKey(e: KeyboardEvent): string { if (/^Key[A-Z]$/.test(e.code)) return e.code.slice(3).toLowerCase(); if (/^Digit\d$/.test(e.code)) return e.code.slice(5); const named: Record = { Meta: "meta", OS: "meta", Control: "ctrl", Alt: "alt", Shift: "shift", " ": "space" }; return named[e.key] ?? normalizeKey(e.key); } /** Whether a keydown is exactly this single-step shortcut: every modifier matches, none extra. */ export function matchShortcut(e: KeyboardEvent, keys: string | string[], platform: Platform) { const steps = parseShortcut(keys); if (steps.length !== 1) return false; const step = resolveStep(steps[0], platform); const main = step.find((k) => !isModifier(k)); if (!main || eventKey(e) !== main) return false; // Symbols that need Shift to type ("?", "!") match whether or not Shift is listed. const shiftFree = main.length === 1 && !/[a-z0-9]/.test(main); return ( e.metaKey === step.includes("meta") && e.ctrlKey === step.includes("ctrl") && e.altKey === step.includes("alt") && (shiftFree || e.shiftKey === step.includes("shift")) ); } /** Whether focus is somewhere that typing matters (fields, editors). Single-key shortcuts should stand down there. */ export function isTypingTarget(target: EventTarget | null) { const el = target as HTMLElement | null; return !!el?.closest?.("input, textarea, select, [contenteditable=''], [contenteditable='true']"); } /** * The keys held down right now, by name. macOS never sends keyup for a key * pressed while ⌘ is held, so those release themselves shortly after the last * keydown (auto-repeat keeps a held key held), and everything lets go when ⌘ does. */ export function useHeldKeys(enabled = true, { ignoreWhileTyping = false } = {}) { const [held, setHeld] = useState>(() => new Set()); useEffect(() => { if (!enabled) return; const down = new Map(); const timers = new Map(); const commit = () => setHeld(new Set(down.values())); const release = (code: string) => { window.clearTimeout(timers.get(code)); timers.delete(code); if (down.delete(code)) commit(); }; const clear = () => { timers.forEach((t) => window.clearTimeout(t)); timers.clear(); if (down.size) { down.clear(); commit(); } }; const onDown = (e: KeyboardEvent) => { const name = eventKey(e); // Plain typing in a field isn't a shortcut; holding a modifier makes it one. if (ignoreWhileTyping && isTypingTarget(e.target) && !e.metaKey && !e.ctrlKey && !e.altKey) return; const code = e.code || name; if (down.get(code) !== name) { down.set(code, name); commit(); } if (e.metaKey && !isModifier(name)) { window.clearTimeout(timers.get(code)); timers.set(code, window.setTimeout(() => release(code), 350)); } }; const onUp = (e: KeyboardEvent) => { const name = eventKey(e); if (name === "meta") { // Everything pressed under ⌘ is released with it. for (const [code, n] of down) if (!isModifier(n)) release(code); } release(e.code || name); }; const onVisibility = () => document.hidden && clear(); // Capture, so a component that stops a shortcut from propagating still shows it pressed. window.addEventListener("keydown", onDown, true); window.addEventListener("keyup", onUp, true); window.addEventListener("blur", clear); document.addEventListener("visibilitychange", onVisibility); return () => { window.removeEventListener("keydown", onDown, true); window.removeEventListener("keyup", onUp, true); window.removeEventListener("blur", clear); document.removeEventListener("visibilitychange", onVisibility); timers.forEach((t) => window.clearTimeout(t)); }; }, [enabled, ignoreWhileTyping]); return enabled ? held : EMPTY; } const EMPTY: ReadonlySet = new Set(); /* ------------------------------------------------------------------ */ /* Kbd */ /* ------------------------------------------------------------------ */ export type KbdSize = "sm" | "md" | "lg"; export type KbdVariant = "keycap" | "ghost"; export type KbdProps = Omit, "children"> & { /** "mod+k", "shift+?", "g i" (a sequence), or an array of keys for one combo. "mod" is ⌘ on a Mac and Ctrl elsewhere. */ keys?: string | string[]; /** A single literal key, when you'd rather write it yourself. Ignored when keys is set. */ children?: React.ReactNode; size?: KbdSize; /** A raised keycap, or quiet glyphs for menus and highlighted rows. */ variant?: KbdVariant; /** Draw a combo in one cap (⌘⇧P) instead of one cap per key. */ joined?: boolean; /** Write the keys for this platform instead of the one detected. */ platform?: Platform; /** Press the caps down while the real keys are held. */ listen?: boolean; /** Called when the whole shortcut (every step of a sequence) is pressed while listening. */ onMatch?: (event: KeyboardEvent) => void; /** Force the pressed look: true for every cap, or the set of key names held (from useHeldKeys). */ pressed?: boolean | ReadonlySet; }; const capSize: Record = { sm: "h-[18px] min-w-[18px] rounded-[5px] px-1 text-[10.5px]", md: "h-5 min-w-5 rounded-[5px] px-1.5 text-[11px]", lg: "h-7 min-w-7 rounded-[7px] px-2 text-[13px]", }; const gapSize: Record = { sm: "gap-0.5", md: "gap-1", lg: "gap-1.5" }; const GLYPH = /^[⌘⇧⌥⌃↵⌫⌦⇥↑↓←→⇪]$/; export function Kbd({ keys, children, size = "md", variant = "keycap", joined = false, platform: platformProp, listen = false, onMatch, pressed, className, ...rest }: KbdProps) { const platform = usePlatform(platformProp); const own = useHeldKeys(listen); const steps = keys != null ? parseShortcut(keys).map((s) => resolveStep(s, platform)) : []; const held = pressed instanceof Set ? pressed : own; const isDown = (k: string) => pressed === true || held.has(k); // Sequences and full combos report once per press, only while listening. const progress = useRef({ step: 0, at: 0 }); const onMatchRef = useRef(onMatch); useEffect(() => { onMatchRef.current = onMatch; }); const signature = steps.map((s) => s.join("+")).join(" "); useEffect(() => { if (!listen || !signature) return; const parsed = signature.split(" ").map((s) => s.split("+")); const onDown = (e: KeyboardEvent) => { if (e.repeat) return; const p = progress.current; if (performance.now() - p.at > 1200) p.step = 0; const want = parsed[p.step]; const combo = want.filter(isModifier); const main = want.find((k) => !isModifier(k)); const ok = eventKey(e) === main && e.metaKey === combo.includes("meta") && e.ctrlKey === combo.includes("ctrl") && e.altKey === combo.includes("alt") && (e.shiftKey === combo.includes("shift") || (main.length === 1 && !/[a-z0-9]/.test(main))); if (!ok) { p.step = 0; return; } p.at = performance.now(); p.step += 1; if (p.step === parsed.length) { p.step = 0; onMatchRef.current?.(e); } }; window.addEventListener("keydown", onDown); return () => window.removeEventListener("keydown", onDown); }, [listen, signature]); const label = keys != null ? formatShortcut(keys, platform, { spoken: true }) : undefined; // Symbol keys (⌘ ⇧ ↵ ↑) sit small in a mono face; draw them from the sans at a size that matches the letters' cap height. const face = (k: string) => { const text = keyLabel(k, platform); return GLYPH.test(text) ? ( {text} ) : ( text ); }; const cap = (content: React.ReactNode, down: boolean, key: string | number, single = false) => ( {content} ); let body: React.ReactNode; if (keys == null) { body = cap(children, pressed === true, 0, typeof children === "string" && [...children].length === 1); } else { body = steps.map((step, i) => ( {i > 0 && then} {joined || variant === "ghost" ? cap( {step.map((k, j) => ( {platform !== "mac" && j > 0 && +} {face(k)} ))} , step.every(isDown), i, ) : step.map((k, j) => cap(face(k), isDown(k), `${i}-${j}`, [...keyLabel(k, platform)].length === 1))} )); } return ( {label ? ( <> {body} {label} ) : ( body )} ); } 5f:["$","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":[null,["$","$L60",null,{"namespace":"@stealth","registryDependencies":["https://www.stealth.pm/r/tokens.json","https://www.stealth.pm/r/cn.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/ui/kbd.tsx","content":"$62","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]