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:T10ff,"use client"; import { Children, Fragment, useEffect, useState, type HTMLAttributes, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type KbdSize = "sm" | "md" | "lg"; // Symbols and names people write on keycaps, mapped to KeyboardEvent.key. const ALIASES: Record = { "⌘": "Meta", cmd: "Meta", command: "Meta", meta: "Meta", win: "Meta", "⌃": "Control", ctrl: "Control", control: "Control", "⌥": "Alt", opt: "Alt", option: "Alt", alt: "Alt", "⇧": "Shift", shift: "Shift", "↵": "Enter", "⏎": "Enter", enter: "Enter", return: "Enter", "⎋": "Escape", esc: "Escape", escape: "Escape", "⌫": "Backspace", backspace: "Backspace", "⌦": "Delete", del: "Delete", "⇥": "Tab", tab: "Tab", "␣": " ", space: " ", "↑": "ArrowUp", "↓": "ArrowDown", "←": "ArrowLeft", "→": "ArrowRight", }; function toKey(label: string) { const l = label.trim(); if (l.toLowerCase() === "mod") return /Mac|iPhone|iPad/.test(navigator.platform) ? "Meta" : "Control"; return (ALIASES[l] ?? ALIASES[l.toLowerCase()] ?? l).toLowerCase(); } const sizes: Record = { sm: "h-5 min-w-5 rounded-[5px] px-1 text-[10px] [--depth:2px]", md: "h-7 min-w-7 rounded-md px-1.5 text-xs [--depth:3px]", lg: "h-10 min-w-10 rounded-lg px-2.5 text-sm [--depth:4px]", }; export interface KbdProps extends HTMLAttributes { size?: KbdSize; /** Animate a press when the matching physical key goes down. */ listen?: boolean; /** KeyboardEvent.key to react to. Defaults to the text content ("⌘", "Shift", "K", "Mod"...). */ match?: string; /** Force the pressed look (controlled). */ pressed?: boolean; } export function Kbd({ size = "md", listen = true, match, pressed, className, children, ...props }: KbdProps) { const [down, setDown] = useState(false); const label = match ?? (typeof children === "string" ? children : undefined); useEffect(() => { if (!listen || !label) return; const key = toKey(label); // Passive observers only: never preventDefault, so page shortcuts keep working. const on = (e: KeyboardEvent) => e.key.toLowerCase() === key && setDown(true); const off = (e: KeyboardEvent) => e.key.toLowerCase() === key && setDown(false); const reset = () => setDown(false); window.addEventListener("keydown", on); window.addEventListener("keyup", off); window.addEventListener("blur", reset); return () => { window.removeEventListener("keydown", on); window.removeEventListener("keyup", off); window.removeEventListener("blur", reset); }; }, [listen, label]); const isDown = pressed ?? down; return ( {children} ); } export interface KbdGroupProps extends HTMLAttributes { /** Rendered between keys, e.g. "+" or "then". */ separator?: ReactNode; } export function KbdGroup({ separator, className, children, ...props }: KbdGroupProps) { const keys = Children.toArray(children); return ( {keys.map((k, i) => ( {i > 0 && separator != null && ( {separator} )} {k} ))} ); } 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":[null,["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/kbd.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]