5f: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"] 60: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"] 61:T29ea,"use client"; import { useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore, type Ref, } from "react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; import { usePreviewPlay } from "@/lib/preview-play"; const subscribeNever = () => () => {}; // null on the server and during hydration, so the modifier label is only // decided once we can read the platform. function usePlatformIsMac() { return useSyncExternalStore( subscribeNever, () => /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent), () => null, ); } type KeyName = "mod" | "shift" | "alt" | string; function matchesKey(k: KeyName, e: KeyboardEvent, isMac: boolean) { if (k === "mod") return e.key === (isMac ? "Meta" : "Control"); if (k === "shift") return e.key === "Shift"; if (k === "alt") return e.key === "Alt"; // code, not key, so Shift or a non-Latin layout still lights the cap. return e.code === `Key${k.toUpperCase()}` || e.key.toLowerCase() === k.toLowerCase(); } function isHeld(k: KeyName, e: KeyboardEvent, isMac: boolean) { if (k === "mod") return isMac ? e.metaKey : e.ctrlKey; if (k === "shift") return e.shiftKey; if (k === "alt") return e.altKey; return matchesKey(k, e, isMac); } function labelFor(k: KeyName, isMac: boolean | null) { if (isMac === null && (k === "mod" || k === "shift" || k === "alt")) return ""; if (k === "mod") return isMac ? "⌘" : "Ctrl"; if (k === "shift") return isMac ? "⇧" : "Shift"; if (k === "alt") return isMac ? "⌥" : "Alt"; return k.toUpperCase(); } function spokenFor(k: KeyName, isMac: boolean | null) { if (k === "mod") return isMac ? "Command" : "Control"; if (k === "shift") return "Shift"; if (k === "alt") return isMac ? "Option" : "Alt"; return k.toUpperCase(); } const DEFAULT_KEYS: KeyName[] = ["mod", "k"]; export type KeycapHintHandle = { /** Presses the chord on screen, as a hint or a demo. Calls onTrigger. */ play: (opts?: { beat?: number; hold?: number }) => void; /** Lets go of every key and clears the confirmation. */ reset: () => void; }; export function KeycapHint({ keys = DEFAULT_KEYS, action = "to search", confirmation = "Search opened", onTrigger, className, ref, }: { keys?: KeyName[]; action?: string; confirmation?: string; onTrigger?: () => void; className?: string; ref?: Ref; }) { const isMac = usePlatformIsMac(); const reduceMotion = useReducedMotion(); const [pressed, setPressed] = useState>(() => new Set()); const [confirmed, setConfirmed] = useState(false); const confirmTimer = useRef>(undefined); const chordTimers = useRef[]>([]); const onTriggerRef = useRef(onTrigger); useEffect(() => { onTriggerRef.current = onTrigger; }); const setKey = (i: number, down: boolean) => setPressed((prev) => { if (prev.has(i) === down) return prev; const next = new Set(prev); if (down) next.add(i); else next.delete(i); return next; }); const confirm = () => { setConfirmed(true); onTriggerRef.current?.(); clearTimeout(confirmTimer.current); // Long enough to register, short enough to be gone before the next try. confirmTimer.current = setTimeout(() => setConfirmed(false), 1400); }; const confirmRef = useRef(confirm); useEffect(() => { confirmRef.current = confirm; }); useEffect(() => { if (isMac === null) return; const down = (e: KeyboardEvent) => { keys.forEach((k, i) => { if (matchesKey(k, e, isMac)) setKey(i, true); }); if (!e.repeat && keys.every((k) => isHeld(k, e, isMac))) { // Claim the chord so Ctrl+K doesn't jump to the browser's search. e.preventDefault(); confirmRef.current(); } }; const up = (e: KeyboardEvent) => { // macOS never sends keyup for other keys while Command is held, so // letting go of Command has to release everything. if (isMac && e.key === "Meta") { setPressed(new Set()); return; } keys.forEach((k, i) => { if (matchesKey(k, e, isMac)) setKey(i, false); }); }; // A keyup that lands in another window never arrives. const reset = () => setPressed(new Set()); window.addEventListener("keydown", down); window.addEventListener("keyup", up); window.addEventListener("blur", reset); return () => { window.removeEventListener("keydown", down); window.removeEventListener("keyup", up); window.removeEventListener("blur", reset); }; }, [isMac, keys]); useEffect( () => () => { clearTimeout(confirmTimer.current); chordTimers.current.forEach(clearTimeout); }, [], ); // A click (or Enter on the button) plays the chord the way hands would: // each key goes down a beat after the last, then they all come up. const playChord = ({ beat = 70, hold = 90 } = {}) => { chordTimers.current.forEach(clearTimeout); chordTimers.current = []; keys.forEach((_, i) => chordTimers.current.push(setTimeout(() => setKey(i, true), i * beat)), ); chordTimers.current.push( setTimeout(() => { setPressed(new Set()); confirm(); }, keys.length * beat + hold), ); }; useImperativeHandle(ref, () => ({ play: playChord, reset: () => { chordTimers.current.forEach(clearTimeout); chordTimers.current = []; clearTimeout(confirmTimer.current); setPressed(new Set()); setConfirmed(false); }, })); const spoken = keys.map((k) => spokenFor(k, isMac)).join(" "); return ( Press {action} {/* Swaps in over the action text, out of flow so the row never changes width. */} {confirmation} {confirmed ? confirmation : ""} ); } function Keycap({ label, pressed, reduceMotion, onPress, }: { label: string; pressed: boolean; reduceMotion: boolean | null; onPress: (down: boolean) => void; }) { return ( { if (e.button === 0) onPress(true); }} onPointerUp={() => onPress(false)} onPointerLeave={() => onPress(false)} className={cn( // min-w keeps single letters square while "Ctrl" grows sideways. "relative inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 font-sans text-[13px] leading-none font-medium text-foreground dark:bg-muted", // The skirt is a hard 3px shadow in the border color: the cap sits // on it at rest and drops onto it when pressed. The soft shadow // under it (raw black, it is a cast shadow) collapses with it. "shadow-[0_3px_0_0_var(--border),0_4px_8px_-3px_oklch(0_0_0/0.18)]", !reduceMotion && "transition-[translate,box-shadow]", pressed ? "translate-y-[3px] shadow-[0_0_0_0_var(--border),0_1px_2px_-1px_oklch(0_0_0/0.18)] duration-[40ms] ease-out" : // Springs back a touch slower than it goes down, like a real // switch returning. "translate-y-0 duration-[140ms] ease-[cubic-bezier(0.23,1,0.32,1)]", // Holds the label's space until the platform is known. label === "" && "invisible", )} > {label} ); } export default function KeycapHintDemo() { const play = usePreviewPlay(); const hint = useRef(null); // Index card hover: a hand presses the chord at an unhurried pace, then // again after the confirmation has come and gone. useEffect(() => { const h = hint.current; if (!play || !h) return; const press = () => h.play({ beat: 120, hold: 220 }); const first = setTimeout(press, 250); const loop = setInterval(press, 3000); return () => { clearTimeout(first); clearInterval(loop); h.reset(); }; }, [play]); return ( ); } 5e:["$","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,["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/keycap-hint.tsx","content":"$61","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"},{"path":"lib/preview-play.ts","content":"\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\n// Lets a demo know whether it's showing in an index card, and whether that\n// card is hovered or focused. Demos use it to act themselves out on hover:\n// a star button stars itself, a checkbox scribbles, and so on.\n//\n// null: not in a preview (the component's own page, or real use).\n// false: in a preview, at rest.\n// true: in a preview, being hovered or focused: play the show.\nexport const PreviewPlayContext = createContext(null);\n\nexport function usePreviewPlay() {\n return useContext(PreviewPlayContext);\n}\n","type":"registry:lib","target":"lib/preview-play.ts"}],"className":"h-[70svh] min-h-80"}]]}]