@krizaka/ui 3.7.1 → 3.9.0

package/dist/app-shell.js

@@ -1,8 +1,9 @@
 "use client";
 import {
   ChevronGlyph,
-  CloseGlyph
-} from "./chunk-AZPKXP3O.js";
+  CloseGlyph,
+  SearchGlyph
+} from "./chunk-AFY35UCB.js";
 import {
   cn
 } from "./chunk-G3ETON2A.js";
@@ -12,10 +13,111 @@ import {
 
 // src/app-shell/app-shell.tsx
 import { Dialog as DialogPrimitive, Slot } from "radix-ui";
-import * as React from "react";
+import * as React3 from "react";
+import { tv as tv2 } from "tailwind-variants";
+
+// src/kbd/kbd.tsx
 import { tv } from "tailwind-variants";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var appShell = tv({
+import { jsx } from "react/jsx-runtime";
+var kbdVariants = tv({
+  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
+  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
+  defaultVariants: { size: "md" }
+});
+function Kbd({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
+}
+
+// src/app-shell/shortcuts.ts
+import * as React2 from "react";
+
+// src/media.ts
+import * as React from "react";
+function useLatest(value) {
+  const ref = React.useRef(value);
+  React.useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
+// src/app-shell/shortcuts.ts
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+var ALIASES = { esc: "escape", return: "enter", space: " ", spacebar: " ", up: "arrowup", down: "arrowdown", left: "arrowleft", right: "arrowright", del: "delete", plus: "+" };
+function parseCombo(combo) {
+  const parts = combo.toLowerCase().split("+").filter(Boolean);
+  const key = ALIASES[parts.at(-1) ?? ""] ?? parts.at(-1) ?? "";
+  const has = (name) => parts.slice(0, -1).includes(name);
+  return { key, mod: has("mod"), ctrl: has("ctrl"), alt: has("alt"), shift: has("shift"), meta: has("meta") };
+}
+function matchesCombo(event, combo, apple = isApple()) {
+  const want = parseCombo(combo);
+  const meta = want.meta || want.mod && apple;
+  const ctrl = want.ctrl || want.mod && !apple;
+  if (event.metaKey !== meta || event.ctrlKey !== ctrl || event.altKey !== want.alt) return false;
+  if (want.shift && !event.shiftKey) return false;
+  return event.key.toLowerCase() === want.key;
+}
+function formatShortcut(shortcut, apple = isApple()) {
+  if (shortcut.includes(" ")) return shortcut.split(/\s+/).map((key2) => key2.toUpperCase());
+  const parts = shortcut.split("+").filter(Boolean);
+  const key = parts.at(-1) ?? "";
+  const names = { mod: ["\u2318", "Ctrl"], meta: ["\u2318", "Win"], ctrl: ["\u2303", "Ctrl"], alt: ["\u2325", "Alt"], shift: ["\u21E7", "Shift"] };
+  const shown = parts.slice(0, -1).map((part) => names[part.toLowerCase()]?.[apple ? 0 : 1] ?? part);
+  const glyph = { escape: "Esc", enter: "\u21B5", arrowup: "\u2191", arrowdown: "\u2193", arrowleft: "\u2190", arrowright: "\u2192", " ": "Space" };
+  const last = glyph[ALIASES[key.toLowerCase()] ?? key.toLowerCase()] ?? key.toUpperCase();
+  return [...shown, last];
+}
+var noop = () => () => void 0;
+function useApple() {
+  return React2.useSyncExternalStore(noop, isApple, () => false);
+}
+function ariaKeyShortcuts(shortcut, apple = isApple()) {
+  if (shortcut.includes(" ")) return void 0;
+  const parts = shortcut.split("+").filter(Boolean);
+  const names = { mod: apple ? "Meta" : "Control", meta: "Meta", ctrl: "Control", alt: "Alt", shift: "Shift" };
+  const key = parts.at(-1) ?? "";
+  return [...parts.slice(0, -1).map((part) => names[part.toLowerCase()] ?? part), key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1)].join("+");
+}
+function isEditable(target) {
+  const element = target instanceof HTMLElement ? target : null;
+  if (!element) return { field: false, rich: false };
+  const rich = element.isContentEditable;
+  return { field: rich || /^(input|textarea|select)$/i.test(element.tagName), rich };
+}
+function useShortcuts(map, { enabled = true, timeout = 900 } = {}) {
+  const latest = useLatest(map);
+  const names = Object.keys(map).sort().join("\n");
+  React2.useEffect(() => {
+    if (!enabled) return;
+    const bindings = names.split("\n").filter(Boolean);
+    let buffer = [];
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.isComposing || event.repeat || !event.key) return;
+      const editing = isEditable(event.target);
+      const chord = event.metaKey || event.ctrlKey || event.altKey;
+      const now = Date.now();
+      buffer = [...buffer.filter((entry) => now - entry.at <= timeout), { key: event.key.toLowerCase(), at: now }].slice(-4);
+      for (const binding of bindings) {
+        const handler = latest.current[binding];
+        if (!handler) continue;
+        const keys = binding.toLowerCase().split(/\s+/).map((key) => ALIASES[key] ?? key);
+        const fired = keys.length > 1 ? !chord && !editing.field && buffer.length >= keys.length && keys.every((key, i) => buffer[buffer.length - keys.length + i]?.key === key) : matchesCombo(event, binding) && (chord ? !editing.rich : !editing.field);
+        if (!fired) continue;
+        event.preventDefault();
+        buffer = [];
+        handler(event);
+        return;
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled, names, latest, timeout]);
+}
+
+// src/app-shell/app-shell.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var appShell = tv2({
   slots: {
     root: "flex min-h-dvh w-full bg-surface-0 text-fg",
     sidebar: "sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex w-64 data-collapsed:w-[4.25rem]",
@@ -26,6 +128,7 @@ var appShell = tv({
     group: "mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only",
     item: "group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0",
     itemLabel: "min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only",
+    itemHint: "ml-auto hidden items-center gap-0.5 text-fg-secondary group-hover/item:flex group-focus-visible/item:flex [[data-collapsed]_&]:!hidden",
     itemBadge: "ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent [[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]",
     footer: "shrink-0 border-t border-border-subtle p-2",
     collapse: "hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0",
@@ -33,31 +136,35 @@ var appShell = tv({
     header: "sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6",
     menuButton: "inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
     title: "min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight",
+    search: "inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-lg border border-border-subtle bg-surface-1 px-2.5 text-sm text-fg-secondary transition-colors hover:border-border-default hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring md:w-56 md:justify-start [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+    searchLabel: "sr-only md:not-sr-only md:flex-1 md:truncate md:text-left",
+    searchKeys: "hidden items-center gap-0.5 md:flex",
     actions: "ml-auto flex shrink-0 items-center gap-2",
     main: "min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8"
   }
 });
 var s = appShell();
-var ShellContext = React.createContext(null);
+var ShellContext = React3.createContext(null);
 var useShell = () => {
-  const ctx = React.useContext(ShellContext);
+  const ctx = React3.useContext(ShellContext);
   if (!ctx) throw new Error("AppShell parts must be inside <AppShell.Root>");
   return ctx;
 };
-function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, className, children, ...props }) {
-  const [own, setOwn] = React.useState(defaultCollapsed);
-  const [open, setOpen] = React.useState(false);
+function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, collapseShortcut = "mod+b", className, children, ...props }) {
+  const [own, setOwn] = React3.useState(defaultCollapsed);
+  const [open, setOpen] = React3.useState(false);
   const collapsed = controlled ?? own;
-  const setCollapsed = React.useCallback(
+  const setCollapsed = React3.useCallback(
     (value2) => {
       if (controlled === void 0) setOwn(value2);
       onCollapsedChange?.(value2);
     },
     [controlled, onCollapsedChange]
   );
-  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);
-  return /* @__PURE__ */ jsx(ShellContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
-    skipLabel && /* @__PURE__ */ jsx(SkipLink, { href: "#content", children: skipLabel }),
+  const value = React3.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);
+  useShortcuts(collapseShortcut ? { [collapseShortcut]: () => setCollapsed(!collapsed) } : {});
+  return /* @__PURE__ */ jsx2(ShellContext.Provider, { value, children: /* @__PURE__ */ jsxs("div", { className: s.root({ className }), ...props, children: [
+    skipLabel && /* @__PURE__ */ jsx2(SkipLink, { href: "#content", children: skipLabel }),
     children
   ] }) });
 }
@@ -66,14 +173,14 @@ function SidebarContent({ brand, children, footer, collapseLabels, closeLabel })
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: s.brand(), children: [
       brand,
-      inDrawer && /* @__PURE__ */ jsx(DialogPrimitive.Close, { className: cn(s.menuButton(), "ml-auto flex"), "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseGlyph, { className: "h-4 w-4" }) })
+      inDrawer && /* @__PURE__ */ jsx2(DialogPrimitive.Close, { className: cn(s.menuButton(), "ml-auto flex"), "aria-label": closeLabel, children: /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" }) })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: s.nav(), children }),
+    /* @__PURE__ */ jsx2("div", { className: s.nav(), children }),
     (footer || collapseLabels && !inDrawer) && /* @__PURE__ */ jsxs("div", { className: s.footer(), children: [
       footer,
       collapseLabels && !inDrawer && /* @__PURE__ */ jsxs("button", { type: "button", className: s.collapse(), "aria-expanded": !collapsed, onClick: () => setCollapsed(!collapsed), children: [
-        /* @__PURE__ */ jsx(ChevronGlyph, { direction: collapsed ? "right" : "left", className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx("span", { className: collapsed ? "sr-only" : void 0, children: collapsed ? collapseLabels[1] : collapseLabels[0] })
+        /* @__PURE__ */ jsx2(ChevronGlyph, { direction: collapsed ? "right" : "left", className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx2("span", { className: collapsed ? "sr-only" : void 0, children: collapsed ? collapseLabels[1] : collapseLabels[0] })
       ] })
     ] })
   ] });
@@ -82,43 +189,56 @@ function AppShellSidebar({ label, brand, children, footer, collapseLabels, close
   const shell = useShell();
   const content = { brand, children, footer, collapseLabels, closeLabel };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("nav", { "aria-label": label, "data-collapsed": shell.collapsed ? "" : void 0, className: s.sidebar({ className }), ...props, children: /* @__PURE__ */ jsx(SidebarContent, { ...content }) }),
-    /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: shell.open, onOpenChange: shell.setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
-      /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: s.overlay() }),
+    /* @__PURE__ */ jsx2("nav", { "aria-label": label, "data-collapsed": shell.collapsed ? "" : void 0, className: s.sidebar({ className }), ...props, children: /* @__PURE__ */ jsx2(SidebarContent, { ...content }) }),
+    /* @__PURE__ */ jsx2(DialogPrimitive.Root, { open: shell.open, onOpenChange: shell.setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx2(DialogPrimitive.Overlay, { className: s.overlay() }),
       /* @__PURE__ */ jsxs(DialogPrimitive.Content, { className: s.drawer(), "aria-describedby": void 0, children: [
-        /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "sr-only", children: label }),
-        /* @__PURE__ */ jsx(ShellContext.Provider, { value: { ...shell, collapsed: false, inDrawer: true }, children: /* @__PURE__ */ jsx("nav", { "aria-label": label, className: "flex min-h-0 flex-1 flex-col", onClick: (e) => e.target.closest("a") && shell.setOpen(false), children: /* @__PURE__ */ jsx(SidebarContent, { ...content }) }) })
+        /* @__PURE__ */ jsx2(DialogPrimitive.Title, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx2(ShellContext.Provider, { value: { ...shell, collapsed: false, inDrawer: true }, children: /* @__PURE__ */ jsx2("nav", { "aria-label": label, className: "flex min-h-0 flex-1 flex-col", onClick: (e) => e.target.closest("a") && shell.setOpen(false), children: /* @__PURE__ */ jsx2(SidebarContent, { ...content }) }) })
       ] })
     ] }) })
   ] });
 }
 function AppShellGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx("p", { className: s.group({ className }), ...props });
+  return /* @__PURE__ */ jsx2("p", { className: s.group({ className }), ...props });
 }
-function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }) {
-  const { collapsed } = useShell();
+function AppShellItem({ icon, label, current, badge, shortcut, asChild, children, className, ...props }) {
+  const { collapsed, inDrawer } = useShell();
+  const element = React3.useRef(null);
+  const apple = useApple();
+  useShortcuts(shortcut && !inDrawer ? { [shortcut]: () => element.current?.click() } : {});
   const Comp = asChild ? Slot.Root : "a";
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon,
-    /* @__PURE__ */ jsx("span", { className: s.itemLabel(), children: label }),
-    badge != null && /* @__PURE__ */ jsx("span", { className: s.itemBadge(), children: badge })
+    /* @__PURE__ */ jsx2("span", { className: s.itemLabel(), children: label }),
+    badge != null && /* @__PURE__ */ jsx2("span", { className: s.itemBadge(), children: badge }),
+    shortcut && !inDrawer ? /* @__PURE__ */ jsx2("span", { className: s.itemHint(), "aria-hidden": true, children: formatShortcut(shortcut, apple).map((key) => /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: key }, key)) }) : null
   ] });
-  return /* @__PURE__ */ jsx(Comp, { "aria-current": current ? "page" : void 0, title: collapsed ? label : void 0, className: s.item({ className }), ...props, children: asChild && children ? React.cloneElement(children, void 0, inner) : inner });
+  return /* @__PURE__ */ jsx2(Comp, { ref: element, "aria-current": current ? "page" : void 0, "aria-keyshortcuts": shortcut ? ariaKeyShortcuts(shortcut, apple) : void 0, title: collapsed ? label : void 0, className: s.item({ className }), ...props, children: asChild && children ? React3.cloneElement(children, void 0, inner) : inner });
 }
 function AppShellBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: s.body({ className }), ...props });
+  return /* @__PURE__ */ jsx2("div", { className: s.body({ className }), ...props });
 }
 function AppShellHeader({ title, menuLabel, actions, className, children, ...props }) {
   const { open, setOpen } = useShell();
   return /* @__PURE__ */ jsxs("header", { className: s.header({ className }), ...props, children: [
-    /* @__PURE__ */ jsx("button", { type: "button", className: s.menuButton(), "aria-label": menuLabel, "aria-expanded": open, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M4 12h16M4 17h10" }) }) }),
-    title && /* @__PURE__ */ jsx("h1", { className: s.title(), children: title }),
+    /* @__PURE__ */ jsx2("button", { type: "button", className: s.menuButton(), "aria-label": menuLabel, "aria-expanded": open, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "M4 7h16M4 12h16M4 17h10" }) }) }),
+    title && /* @__PURE__ */ jsx2("h1", { className: s.title(), children: title }),
     children,
-    actions && /* @__PURE__ */ jsx("div", { className: s.actions(), children: actions })
+    actions && /* @__PURE__ */ jsx2("div", { className: s.actions(), children: actions })
+  ] });
+}
+function AppShellSearch({ label, onOpen, shortcut = "mod+k", className, ...props }) {
+  const apple = useApple();
+  useShortcuts({ [shortcut]: () => onOpen() });
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: s.search({ className }), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, apple), onClick: onOpen, ...props, children: [
+    /* @__PURE__ */ jsx2(SearchGlyph, {}),
+    /* @__PURE__ */ jsx2("span", { className: s.searchLabel(), children: label }),
+    /* @__PURE__ */ jsx2("span", { className: s.searchKeys(), "aria-hidden": true, children: formatShortcut(shortcut, apple).map((key) => /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: key }, key)) })
   ] });
 }
 function AppShellMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx("main", { id: "content", tabIndex: -1, className: s.main({ className }), ...props });
+  return /* @__PURE__ */ jsx2("main", { id: "content", tabIndex: -1, className: s.main({ className }), ...props });
 }
 var AppShell = {
   Root: AppShellRoot,
@@ -127,6 +247,7 @@ var AppShell = {
   Item: AppShellItem,
   Body: AppShellBody,
   Header: AppShellHeader,
+  Search: AppShellSearch,
   Main: AppShellMain
 };
 export {
@@ -137,7 +258,14 @@ export {
   AppShellItem,
   AppShellMain,
   AppShellRoot,
+  AppShellSearch,
   AppShellSidebar,
-  appShell
+  appShell,
+  ariaKeyShortcuts,
+  formatShortcut,
+  matchesCombo,
+  parseCombo,
+  useApple,
+  useShortcuts
 };
 //# sourceMappingURL=app-shell.js.map

package/dist/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/app-shell/app-shell.tsx"],"sourcesContent":["// Client (the collapse, the drawer). The shell of an application screen, read from the products' consoles (Orochia\n// admin and studio, Orazaka web-admin and web-client): a sidebar of sections that collapses to its icons on a desktop,\n// a header with the screen's title and actions, the content — and below `md` the sidebar becomes a drawer opened from\n// the header (Radix Dialog: focus trap, Escape, focus return). Words arrive as props; links through `asChild`.\nimport { SkipLink } from \"@krizaka/ui/skip-link\";\nimport { Dialog as DialogPrimitive, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph, CloseGlyph } from \"../glyphs\";\n\nexport const appShell = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    sidebar:\n      \"sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex \" +\n      \"w-64 data-collapsed:w-[4.25rem]\",\n    drawer:\n      \"kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden\",\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    brand: \"flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    nav: \"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2\",\n    group: \"mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only\",\n    item:\n      \"group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg \" +\n      \"aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0\",\n    itemLabel: \"min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only\",\n    itemBadge:\n      \"ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent \" +\n      \"[[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    header:\n      \"sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6\",\n    menuButton:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    title: \"min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n    main: \"min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8\",\n  },\n});\nconst s = appShell();\n\ninterface ShellState {\n  collapsed: boolean;\n  setCollapsed: (value: boolean) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inDrawer: boolean;\n}\nconst ShellContext = React.createContext<ShellState | null>(null);\nconst useShell = () => {\n  const ctx = React.useContext(ShellContext);\n  if (!ctx) throw new Error(\"AppShell parts must be inside <AppShell.Root>\");\n  return ctx;\n};\n\nexport type AppShellRootProps = React.ComponentProps<\"div\"> & {\n  /** The sidebar starts collapsed to its icons (desktop). */\n  defaultCollapsed?: boolean;\n  /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */\n  collapsed?: boolean;\n  /** Called when the sidebar collapses or expands. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** The words of the \"skip to content\" link (`Skip to content`), the first tab stop; it lands on `AppShell.Main`. Without it, no link. */\n  skipLabel?: string;\n};\n\n/** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */\nexport function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, className, children, ...props }: AppShellRootProps) {\n  const [own, setOwn] = React.useState(defaultCollapsed);\n  const [open, setOpen] = React.useState(false);\n  const collapsed = controlled ?? own;\n  const setCollapsed = React.useCallback(\n    (value: boolean) => {\n      if (controlled === undefined) setOwn(value);\n      onCollapsedChange?.(value);\n    },\n    [controlled, onCollapsedChange],\n  );\n  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);\n  return (\n    <ShellContext.Provider value={value}>\n      <div className={s.root({ className })} {...props}>\n        {skipLabel && <SkipLink href=\"#content\">{skipLabel}</SkipLink>}\n        {children}\n      </div>\n    </ShellContext.Provider>\n  );\n}\n\nexport type AppShellSidebarProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Studio`, `Administration`). */\n  label: string;\n  /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */\n  brand?: React.ReactNode;\n  /** The sections: `AppShell.Group` and `AppShell.Item`. */\n  children: React.ReactNode;\n  /** At the bottom, above the collapse button: the account, a plan, the version. */\n  footer?: React.ReactNode;\n  /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */\n  collapseLabels?: readonly [string, string];\n  /** The drawer's close button words (phone). */\n  closeLabel: string;\n};\n\nfunction SidebarContent({ brand, children, footer, collapseLabels, closeLabel }: Pick<AppShellSidebarProps, \"brand\" | \"children\" | \"footer\" | \"collapseLabels\" | \"closeLabel\">) {\n  const { collapsed, setCollapsed, inDrawer } = useShell();\n  return (\n    <>\n      <div className={s.brand()}>\n        {brand}\n        {inDrawer && (\n          <DialogPrimitive.Close className={cn(s.menuButton(), \"ml-auto flex\")} aria-label={closeLabel}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n      <div className={s.nav()}>{children}</div>\n      {(footer || (collapseLabels && !inDrawer)) && (\n        <div className={s.footer()}>\n          {footer}\n          {collapseLabels && !inDrawer && (\n            <button type=\"button\" className={s.collapse()} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}>\n              <ChevronGlyph direction={collapsed ? \"right\" : \"left\"} className=\"h-4 w-4\" />\n              <span className={collapsed ? \"sr-only\" : undefined}>{collapsed ? collapseLabels[1] : collapseLabels[0]}</span>\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */\nexport function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps) {\n  const shell = useShell();\n  const content = { brand, children, footer, collapseLabels, closeLabel };\n  return (\n    <>\n      <nav aria-label={label} data-collapsed={shell.collapsed ? \"\" : undefined} className={s.sidebar({ className })} {...props}>\n        <SidebarContent {...content} />\n      </nav>\n      <DialogPrimitive.Root open={shell.open} onOpenChange={shell.setOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay className={s.overlay()} />\n          <DialogPrimitive.Content className={s.drawer()} aria-describedby={undefined}>\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            <ShellContext.Provider value={{ ...shell, collapsed: false, inDrawer: true }}>\n              <nav aria-label={label} className=\"flex min-h-0 flex-1 flex-col\" onClick={(e) => (e.target as Element).closest(\"a\") && shell.setOpen(false)}>\n                <SidebarContent {...content} />\n              </nav>\n            </ShellContext.Provider>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n}\n\nexport type AppShellGroupProps = React.ComponentProps<\"p\"> & {\n  /** The group's name, above its items (hidden when the sidebar is collapsed). */\n  children: React.ReactNode;\n};\n\n/** A heading between groups of items. */\nexport function AppShellGroup({ className, ...props }: AppShellGroupProps) {\n  return <p className={s.group({ className })} {...props} />;\n}\n\nexport type AppShellItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon): it stays when the sidebar collapses. */\n  icon?: React.ReactNode;\n  /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */\n  label: string;\n  /** The screen it opens is the current one: `aria-current=\"page\"`. */\n  current?: boolean;\n  /** A count beside it (unread, pending): a number or a few characters. */\n  badge?: React.ReactNode;\n  /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  /** Your link element when `asChild`. */\n  children?: React.ReactElement;\n};\n\n/** A destination of the sidebar: icon, words, a count. */\nexport function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }: AppShellItemProps) {\n  const { collapsed } = useShell();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      {icon}\n      <span className={s.itemLabel()}>{label}</span>\n      {badge != null && <span className={s.itemBadge()}>{badge}</span>}\n    </>\n  );\n  return (\n    <Comp aria-current={current ? \"page\" : undefined} title={collapsed ? label : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n}\n\n/** The column right of the sidebar: Header, then Main. */\nexport function AppShellBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type AppShellHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The screen's title (an `h1`). */\n  title?: React.ReactNode;\n  /** The button that opens the drawer on a phone: its words. */\n  menuLabel: string;\n  /** The screen's actions, on the right. */\n  actions?: React.ReactNode;\n};\n\n/** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */\nexport function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps) {\n  const { open, setOpen } = useShell();\n  return (\n    <header className={s.header({ className })} {...props}>\n      <button type=\"button\" className={s.menuButton()} aria-label={menuLabel} aria-expanded={open} aria-haspopup=\"dialog\" onClick={() => setOpen(true)}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M4 7h16M4 12h16M4 17h10\" />\n        </svg>\n      </button>\n      {title && <h1 className={s.title()}>{title}</h1>}\n      {children}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n\n/** The screen's content. */\nexport function AppShellMain({ className, ...props }: React.ComponentProps<\"main\">) {\n  return <main id=\"content\" tabIndex={-1} className={s.main({ className })} {...props} />;\n}\n\nexport const AppShell = {\n  Root: AppShellRoot,\n  Sidebar: AppShellSidebar,\n  Group: AppShellGroup,\n  Item: AppShellItem,\n  Body: AppShellBody,\n  Header: AppShellHeader,\n  Main: AppShellMain,\n};\n"],"mappings":"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","names":["value"]}
+{"version":3,"sources":["../src/app-shell/app-shell.tsx","../src/kbd/kbd.tsx","../src/app-shell/shortcuts.ts","../src/media.ts"],"sourcesContent":["// Client (the collapse, the drawer, the shortcuts). The shell of an application screen, read from the products' consoles\n// (Orochia admin and studio, Orazaka web-admin and web-client): a sidebar of sections that collapses to its icons on a\n// desktop, a header with the screen's title, a search that opens the app's command palette and its actions, the content —\n// and below `md` the sidebar becomes a drawer opened from the header (Radix Dialog: focus trap, Escape, focus return).\n// Keyboard: ⌘/Ctrl+B folds the sidebar, ⌘/Ctrl+K opens the search, `g` then a letter goes to a section (`shortcut` of an\n// item). Words arrive as props; links through `asChild`.\nimport { SkipLink } from \"@krizaka/ui/skip-link\";\nimport { Dialog as DialogPrimitive, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph, CloseGlyph, SearchGlyph } from \"../glyphs\";\nimport { Kbd } from \"../kbd\";\nimport { ariaKeyShortcuts, formatShortcut, useApple, useShortcuts } from \"./shortcuts\";\n\nexport const appShell = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    sidebar:\n      \"sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex \" +\n      \"w-64 data-collapsed:w-[4.25rem]\",\n    drawer:\n      \"kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden\",\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    brand: \"flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    nav: \"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2\",\n    group: \"mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only\",\n    item:\n      \"group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg \" +\n      \"aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0\",\n    itemLabel: \"min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only\",\n    itemHint: \"ml-auto hidden items-center gap-0.5 text-fg-secondary group-hover/item:flex group-focus-visible/item:flex [[data-collapsed]_&]:!hidden\",\n    itemBadge:\n      \"ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent \" +\n      \"[[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    header:\n      \"sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6\",\n    menuButton:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    title: \"min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight\",\n    search:\n      \"inline-flex h-9 min-w-9 items-center justify-center gap-2 rounded-lg border border-border-subtle bg-surface-1 px-2.5 text-sm text-fg-secondary transition-colors \" +\n      \"hover:border-border-default hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring md:w-56 md:justify-start [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0\",\n    searchLabel: \"sr-only md:not-sr-only md:flex-1 md:truncate md:text-left\",\n    searchKeys: \"hidden items-center gap-0.5 md:flex\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n    main: \"min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8\",\n  },\n});\nconst s = appShell();\n\ninterface ShellState {\n  collapsed: boolean;\n  setCollapsed: (value: boolean) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inDrawer: boolean;\n}\nconst ShellContext = React.createContext<ShellState | null>(null);\nconst useShell = () => {\n  const ctx = React.useContext(ShellContext);\n  if (!ctx) throw new Error(\"AppShell parts must be inside <AppShell.Root>\");\n  return ctx;\n};\n\nexport type AppShellRootProps = React.ComponentProps<\"div\"> & {\n  /** The sidebar starts collapsed to its icons (desktop). */\n  defaultCollapsed?: boolean;\n  /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */\n  collapsed?: boolean;\n  /** Called when the sidebar collapses or expands. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** The words of the \"skip to content\" link (`Skip to content`), the first tab stop; it lands on `AppShell.Main`. Without it, no link. */\n  skipLabel?: string;\n  /**\n   * The shortcut that folds and unfolds the sidebar (a combination: `mod+b` is ⌘B on a Mac, Ctrl+B elsewhere), or `false`\n   * for none.\n   * @default \"mod+b\"\n   */\n  collapseShortcut?: string | false;\n};\n\n/** The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body. */\nexport function AppShellRoot({ defaultCollapsed = false, collapsed: controlled, onCollapsedChange, skipLabel, collapseShortcut = \"mod+b\", className, children, ...props }: AppShellRootProps) {\n  const [own, setOwn] = React.useState(defaultCollapsed);\n  const [open, setOpen] = React.useState(false);\n  const collapsed = controlled ?? own;\n  const setCollapsed = React.useCallback(\n    (value: boolean) => {\n      if (controlled === undefined) setOwn(value);\n      onCollapsedChange?.(value);\n    },\n    [controlled, onCollapsedChange],\n  );\n  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);\n  useShortcuts(collapseShortcut ? { [collapseShortcut]: () => setCollapsed(!collapsed) } : {});\n  return (\n    <ShellContext.Provider value={value}>\n      <div className={s.root({ className })} {...props}>\n        {skipLabel && <SkipLink href=\"#content\">{skipLabel}</SkipLink>}\n        {children}\n      </div>\n    </ShellContext.Provider>\n  );\n}\n\nexport type AppShellSidebarProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Studio`, `Administration`). */\n  label: string;\n  /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */\n  brand?: React.ReactNode;\n  /** The sections: `AppShell.Group` and `AppShell.Item`. */\n  children: React.ReactNode;\n  /** At the bottom, above the collapse button: the account, a plan, the version. */\n  footer?: React.ReactNode;\n  /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */\n  collapseLabels?: readonly [string, string];\n  /** The drawer's close button words (phone). */\n  closeLabel: string;\n};\n\nfunction SidebarContent({ brand, children, footer, collapseLabels, closeLabel }: Pick<AppShellSidebarProps, \"brand\" | \"children\" | \"footer\" | \"collapseLabels\" | \"closeLabel\">) {\n  const { collapsed, setCollapsed, inDrawer } = useShell();\n  return (\n    <>\n      <div className={s.brand()}>\n        {brand}\n        {inDrawer && (\n          <DialogPrimitive.Close className={cn(s.menuButton(), \"ml-auto flex\")} aria-label={closeLabel}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n      <div className={s.nav()}>{children}</div>\n      {(footer || (collapseLabels && !inDrawer)) && (\n        <div className={s.footer()}>\n          {footer}\n          {collapseLabels && !inDrawer && (\n            <button type=\"button\" className={s.collapse()} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}>\n              <ChevronGlyph direction={collapsed ? \"right\" : \"left\"} className=\"h-4 w-4\" />\n              <span className={collapsed ? \"sr-only\" : undefined}>{collapsed ? collapseLabels[1] : collapseLabels[0]}</span>\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */\nexport function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps) {\n  const shell = useShell();\n  const content = { brand, children, footer, collapseLabels, closeLabel };\n  return (\n    <>\n      <nav aria-label={label} data-collapsed={shell.collapsed ? \"\" : undefined} className={s.sidebar({ className })} {...props}>\n        <SidebarContent {...content} />\n      </nav>\n      <DialogPrimitive.Root open={shell.open} onOpenChange={shell.setOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay className={s.overlay()} />\n          <DialogPrimitive.Content className={s.drawer()} aria-describedby={undefined}>\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            <ShellContext.Provider value={{ ...shell, collapsed: false, inDrawer: true }}>\n              <nav aria-label={label} className=\"flex min-h-0 flex-1 flex-col\" onClick={(e) => (e.target as Element).closest(\"a\") && shell.setOpen(false)}>\n                <SidebarContent {...content} />\n              </nav>\n            </ShellContext.Provider>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n}\n\nexport type AppShellGroupProps = React.ComponentProps<\"p\"> & {\n  /** The group's name, above its items (hidden when the sidebar is collapsed). */\n  children: React.ReactNode;\n};\n\n/** A heading between groups of items. */\nexport function AppShellGroup({ className, ...props }: AppShellGroupProps) {\n  return <p className={s.group({ className })} {...props} />;\n}\n\nexport type AppShellItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon): it stays when the sidebar collapses. */\n  icon?: React.ReactNode;\n  /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */\n  label: string;\n  /** The screen it opens is the current one: `aria-current=\"page\"`. */\n  current?: boolean;\n  /** A count beside it (unread, pending): a number or a few characters. */\n  badge?: React.ReactNode;\n  /**\n   * A keyboard shortcut that goes to it: a sequence (`g d`: G then D) or a combination (`mod+1`). It clicks the item, so a\n   * router link navigates. The keys are shown on hover and focus when the sidebar is open.\n   */\n  shortcut?: string;\n  /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  /** Your link element when `asChild`. */\n  children?: React.ReactElement;\n};\n\n/** A destination of the sidebar: icon, words, a count. */\nexport function AppShellItem({ icon, label, current, badge, shortcut, asChild, children, className, ...props }: AppShellItemProps) {\n  const { collapsed, inDrawer } = useShell();\n  const element = React.useRef<HTMLAnchorElement>(null);\n  const apple = useApple();\n  // Only the sidebar's own items listen: the drawer holds a copy of them, open or not.\n  useShortcuts(shortcut && !inDrawer ? { [shortcut]: () => element.current?.click() } : {});\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      {icon}\n      <span className={s.itemLabel()}>{label}</span>\n      {badge != null && <span className={s.itemBadge()}>{badge}</span>}\n      {shortcut && !inDrawer ? (\n        <span className={s.itemHint()} aria-hidden>\n          {formatShortcut(shortcut, apple).map((key) => (\n            <Kbd key={key} size=\"sm\">\n              {key}\n            </Kbd>\n          ))}\n        </span>\n      ) : null}\n    </>\n  );\n  return (\n    <Comp ref={element} aria-current={current ? \"page\" : undefined} aria-keyshortcuts={shortcut ? ariaKeyShortcuts(shortcut, apple) : undefined} title={collapsed ? label : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n}\n\n/** The column right of the sidebar: Header, then Main. */\nexport function AppShellBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type AppShellHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The screen's title (an `h1`). */\n  title?: React.ReactNode;\n  /** The button that opens the drawer on a phone: its words. */\n  menuLabel: string;\n  /** The screen's actions, on the right. */\n  actions?: React.ReactNode;\n};\n\n/** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */\nexport function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps) {\n  const { open, setOpen } = useShell();\n  return (\n    <header className={s.header({ className })} {...props}>\n      <button type=\"button\" className={s.menuButton()} aria-label={menuLabel} aria-expanded={open} aria-haspopup=\"dialog\" onClick={() => setOpen(true)}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M4 7h16M4 12h16M4 17h10\" />\n        </svg>\n      </button>\n      {title && <h1 className={s.title()}>{title}</h1>}\n      {children}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n\nexport type AppShellSearchProps = Omit<React.ComponentProps<\"button\">, \"children\" | \"onClick\"> & {\n  /** The words (\"Search\", \"Search creators\"): the accessible name, shown beside the keys on a desktop. */\n  label: string;\n  /** Called when the button is pressed or the shortcut is typed: open your command palette (`CommandDialog`) here. */\n  onOpen: () => void;\n  /**\n   * The shortcut that opens it (a combination); shown on its keys.\n   * @default \"mod+k\"\n   */\n  shortcut?: string;\n};\n\n/** The header's search: a button that looks like a field (a magnifier, its words, ⌘K) and opens the app's command palette. */\nexport function AppShellSearch({ label, onOpen, shortcut = \"mod+k\", className, ...props }: AppShellSearchProps) {\n  const apple = useApple();\n  useShortcuts({ [shortcut]: () => onOpen() });\n  return (\n    <button type=\"button\" className={s.search({ className })} aria-keyshortcuts={ariaKeyShortcuts(shortcut, apple)} onClick={onOpen} {...props}>\n      <SearchGlyph />\n      <span className={s.searchLabel()}>{label}</span>\n      <span className={s.searchKeys()} aria-hidden>\n        {formatShortcut(shortcut, apple).map((key) => (\n          <Kbd key={key} size=\"sm\">\n            {key}\n          </Kbd>\n        ))}\n      </span>\n    </button>\n  );\n}\n\n/** The screen's content. */\nexport function AppShellMain({ className, ...props }: React.ComponentProps<\"main\">) {\n  return <main id=\"content\" tabIndex={-1} className={s.main({ className })} {...props} />;\n}\n\nexport const AppShell = {\n  Root: AppShellRoot,\n  Sidebar: AppShellSidebar,\n  Group: AppShellGroup,\n  Item: AppShellItem,\n  Body: AppShellBody,\n  Header: AppShellHeader,\n  Search: AppShellSearch,\n  Main: AppShellMain,\n};\n","// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof kbdVariants>[\"size\"];\n};\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n","// Keyboard shortcuts for an application: a combination (`mod+k`, `shift+/`, `alt+arrowup`) or a sequence (`g d`: press G,\n// then D). `mod` is ⌘ on Apple devices and Ctrl elsewhere. Plain keys and sequences stay out of text fields; a combination\n// with `mod` works in an input (not in a rich-text editor, where ⌘B is bold). Nothing is decided here about the words.\nimport * as React from \"react\";\n\nimport { useLatest } from \"../media\";\n\nexport type ShortcutMap = Readonly<Record<string, ((event: KeyboardEvent) => void) | undefined>>;\n\nconst isApple = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n\nconst ALIASES: Record<string, string> = { esc: \"escape\", return: \"enter\", space: \" \", spacebar: \" \", up: \"arrowup\", down: \"arrowdown\", left: \"arrowleft\", right: \"arrowright\", del: \"delete\", plus: \"+\" };\ntype Modifier = \"mod\" | \"ctrl\" | \"alt\" | \"shift\" | \"meta\";\n\ntype Combo = { key: string; mod: boolean; ctrl: boolean; alt: boolean; shift: boolean; meta: boolean };\n\n/** `\"mod+shift+k\"` → its parts. A lone `+` key is written `plus`. */\nexport function parseCombo(combo: string): Combo {\n  const parts = combo.toLowerCase().split(\"+\").filter(Boolean);\n  const key = ALIASES[parts.at(-1) ?? \"\"] ?? parts.at(-1) ?? \"\";\n  const has = (name: Modifier) => parts.slice(0, -1).includes(name);\n  return { key, mod: has(\"mod\"), ctrl: has(\"ctrl\"), alt: has(\"alt\"), shift: has(\"shift\"), meta: has(\"meta\") };\n}\n\n/** Whether a key event is this combination: its modifiers exactly (`mod` is ⌘ or Ctrl by platform), then its key. */\nexport function matchesCombo(event: Pick<KeyboardEvent, \"key\" | \"metaKey\" | \"ctrlKey\" | \"altKey\" | \"shiftKey\">, combo: string, apple = isApple()): boolean {\n  const want = parseCombo(combo);\n  const meta = want.meta || (want.mod && apple);\n  const ctrl = want.ctrl || (want.mod && !apple);\n  if (event.metaKey !== meta || event.ctrlKey !== ctrl || event.altKey !== want.alt) return false;\n  // Shift is only checked when the binding names it: `?` and `/` need it on most layouts.\n  if (want.shift && !event.shiftKey) return false;\n  return event.key.toLowerCase() === want.key;\n}\n\n/** The keys of a shortcut to show on a keycap: `[\"⌘\", \"K\"]` on a Mac, `[\"Ctrl\", \"K\"]` elsewhere; a sequence `g d` is `[\"G\", \"D\"]`. */\nexport function formatShortcut(shortcut: string, apple = isApple()): string[] {\n  if (shortcut.includes(\" \")) return shortcut.split(/\\s+/).map((key) => key.toUpperCase());\n  const parts = shortcut.split(\"+\").filter(Boolean);\n  const key = parts.at(-1) ?? \"\";\n  const names: Record<string, [string, string]> = { mod: [\"⌘\", \"Ctrl\"], meta: [\"⌘\", \"Win\"], ctrl: [\"⌃\", \"Ctrl\"], alt: [\"⌥\", \"Alt\"], shift: [\"⇧\", \"Shift\"] };\n  const shown = parts.slice(0, -1).map((part) => names[part.toLowerCase()]?.[apple ? 0 : 1] ?? part);\n  const glyph: Record<string, string> = { escape: \"Esc\", enter: \"↵\", arrowup: \"↑\", arrowdown: \"↓\", arrowleft: \"←\", arrowright: \"→\", \" \": \"Space\" };\n  const last = glyph[ALIASES[key.toLowerCase()] ?? key.toLowerCase()] ?? key.toUpperCase();\n  return [...shown, last];\n}\n\nconst noop = () => () => undefined;\n\n/** Whether the person is on an Apple device — `false` on the server and in the first client render (no mismatch), then right. */\nexport function useApple(): boolean {\n  return React.useSyncExternalStore(noop, isApple, () => false);\n}\n\n/** The `aria-keyshortcuts` of a combination (`Control+K`, `Meta+K` on a Mac); a sequence has none (it is not a chord). */\nexport function ariaKeyShortcuts(shortcut: string, apple = isApple()): string | undefined {\n  if (shortcut.includes(\" \")) return undefined;\n  const parts = shortcut.split(\"+\").filter(Boolean);\n  const names: Record<string, string> = { mod: apple ? \"Meta\" : \"Control\", meta: \"Meta\", ctrl: \"Control\", alt: \"Alt\", shift: \"Shift\" };\n  const key = parts.at(-1) ?? \"\";\n  return [...parts.slice(0, -1).map((part) => names[part.toLowerCase()] ?? part), key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1)].join(\"+\");\n}\n\n/** Whether a key press happens in something you type in. */\nfunction isEditable(target: EventTarget | null): { field: boolean; rich: boolean } {\n  const element = target instanceof HTMLElement ? target : null;\n  if (!element) return { field: false, rich: false };\n  const rich = element.isContentEditable;\n  return { field: rich || /^(input|textarea|select)$/i.test(element.tagName), rich };\n}\n\n/**\n * Binds shortcuts for as long as the component lives (`enabled` turns them off). Each key is a combination or a sequence,\n * each value runs when it is pressed; the handler may change on every render. A shortcut that fires is `preventDefault`ed.\n * A sequence waits `timeout` ms for its next key.\n */\nexport function useShortcuts(map: ShortcutMap, { enabled = true, timeout = 900 }: { enabled?: boolean; timeout?: number } = {}) {\n  const latest = useLatest(map);\n  const names = Object.keys(map).sort().join(\"\\n\");\n  React.useEffect(() => {\n    if (!enabled) return;\n    const bindings = names.split(\"\\n\").filter(Boolean);\n    let buffer: { key: string; at: number }[] = [];\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || event.isComposing || event.repeat || !event.key) return;\n      const editing = isEditable(event.target);\n      const chord = event.metaKey || event.ctrlKey || event.altKey;\n      const now = Date.now();\n      buffer = [...buffer.filter((entry) => now - entry.at <= timeout), { key: event.key.toLowerCase(), at: now }].slice(-4);\n      for (const binding of bindings) {\n        const handler = latest.current[binding];\n        if (!handler) continue;\n        const keys = binding.toLowerCase().split(/\\s+/).map((key) => ALIASES[key] ?? key);\n        const fired =\n          keys.length > 1\n            ? !chord && !editing.field && buffer.length >= keys.length && keys.every((key, i) => buffer[buffer.length - keys.length + i]?.key === key)\n            : matchesCombo(event, binding) && (chord ? !editing.rich : !editing.field);\n        if (!fired) continue;\n        event.preventDefault();\n        buffer = [];\n        handler(event);\n        return;\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [enabled, names, latest, timeout]);\n}\n","// Shared by the data and media primitives (client): the clock format, the reduced-motion preference, the\n// in-view observer, a debounced callback. Never an entry of its own.\nimport * as React from \"react\";\n\n/** Seconds as a clock: `75` → `1:15`, `3725` → `1:02:05`. Negative or unknown values read `0:00`. */\nexport function formatClock(seconds: number): string {\n  const s = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const h = Math.floor(s / 3600);\n  const m = Math.floor((s % 3600) / 60);\n  const rest = String(s % 60).padStart(2, \"0\");\n  return h > 0 ? `${h}:${String(m).padStart(2, \"0\")}:${rest}` : `${m}:${rest}`;\n}\n\n/** Clamps `value` between `min` and `max`. */\nexport const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst REDUCE = \"(prefers-reduced-motion: reduce)\";\nconst subscribeReduce = (notify: () => void) => {\n  if (typeof window === \"undefined\" || !window.matchMedia) return () => undefined;\n  const query = window.matchMedia(REDUCE);\n  query.addEventListener?.(\"change\", notify);\n  return () => query.removeEventListener?.(\"change\", notify);\n};\n\n/** `true` when the person asked for less motion (`prefers-reduced-motion: reduce`); follows a change of the setting. */\nexport function usePrefersReducedMotion(): boolean {\n  return React.useSyncExternalStore(\n    subscribeReduce,\n    () => (typeof window !== \"undefined\" && window.matchMedia ? window.matchMedia(REDUCE).matches : false),\n    () => false,\n  );\n}\n\n/** The latest value of a callback, for an effect or an event that must not re-subscribe when it changes. */\nexport function useLatest<T>(value: T) {\n  const ref = React.useRef(value);\n  React.useLayoutEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\n/** Calls `onChange(visible)` when at least `threshold` of the element enters or leaves the viewport. */\nexport function useInView(ref: React.RefObject<Element | null>, onChange: (visible: boolean) => void, enabled = true, threshold = 0.25) {\n  const latest = useLatest(onChange);\n  React.useEffect(() => {\n    const element = ref.current;\n    if (!enabled || !element || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(([entry]) => entry && latest.current(entry.isIntersecting), { threshold });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref, enabled, threshold, latest]);\n}\n\n/** A value controlled by a prop when it is given, held inside otherwise; `set` calls `onChange` either way. */\nexport function useControllable<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void) {\n  const [inner, setInner] = React.useState(defaultValue);\n  const controlled = value !== undefined;\n  const current = controlled ? value : inner;\n  const set = React.useCallback(\n    (next: T) => {\n      if (!controlled) setInner(next);\n      onChange?.(next);\n    },\n    [controlled, onChange],\n  );\n  return [current, set] as const;\n}\n\n/** Starts a media element without an unhandled rejection (autoplay refused, the source replaced meanwhile). */\nexport function playSafely(media: HTMLMediaElement | null | undefined) {\n  try {\n    const started = media?.play() as Promise<void> | undefined;\n    started?.catch?.(() => undefined);\n  } catch {\n    // Not playable here (no media support): the controls stay as they are.\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAOA,SAAS,UAAU,iBAAiB,YAAY;AAChD,YAAYA,YAAW;AACvB,SAAS,MAAAC,WAAU;;;ACPnB,SAAS,UAA6B;AAmB7B;AAjBF,IAAM,cAAc,GAAG;AAAA,EAC5B,MACE;AAAA,EAEF,UAAU,EAAE,MAAM,EAAE,IAAI,gCAAgC,IAAI,6BAA6B,EAAE;AAAA,EAC3F,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAUM,SAAS,IAAI,EAAE,MAAM,WAAW,GAAG,MAAM,GAAa;AAC3D,SAAO,oBAAC,SAAI,WAAW,YAAY,EAAE,MAAM,UAAU,CAAC,GAAI,GAAG,OAAO;AACtE;;;ACnBA,YAAYC,YAAW;;;ACDvB,YAAY,WAAW;AAgChB,SAAS,UAAa,OAAU;AACrC,QAAM,MAAY,aAAO,KAAK;AAC9B,EAAM,sBAAgB,MAAM;AAC1B,QAAI,UAAU;AAAA,EAChB,CAAC;AACD,SAAO;AACT;;;AD/BA,IAAM,UAAU,MAAM,OAAO,cAAc,eAAe,kBAAkB,KAAK,UAAU,YAAY,UAAU,SAAS;AAE1H,IAAM,UAAkC,EAAE,KAAK,UAAU,QAAQ,SAAS,OAAO,KAAK,UAAU,KAAK,IAAI,WAAW,MAAM,aAAa,MAAM,aAAa,OAAO,cAAc,KAAK,UAAU,MAAM,IAAI;AAMjM,SAAS,WAAW,OAAsB;AAC/C,QAAM,QAAQ,MAAM,YAAY,EAAE,MAAM,GAAG,EAAE,OAAO,OAAO;AAC3D,QAAM,MAAM,QAAQ,MAAM,GAAG,EAAE,KAAK,EAAE,KAAK,MAAM,GAAG,EAAE,KAAK;AAC3D,QAAM,MAAM,CAAC,SAAmB,MAAM,MAAM,GAAG,EAAE,EAAE,SAAS,IAAI;AAChE,SAAO,EAAE,KAAK,KAAK,IAAI,KAAK,GAAG,MAAM,IAAI,MAAM,GAAG,KAAK,IAAI,KAAK,GAAG,OAAO,IAAI,OAAO,GAAG,MAAM,IAAI,MAAM,EAAE;AAC5G;AAGO,SAAS,aAAa,OAAmF,OAAe,QAAQ,QAAQ,GAAY;AACzJ,QAAM,OAAO,WAAW,KAAK;AAC7B,QAAM,OAAO,KAAK,QAAS,KAAK,OAAO;AACvC,QAAM,OAAO,KAAK,QAAS,KAAK,OAAO,CAAC;AACxC,MAAI,MAAM,YAAY,QAAQ,MAAM,YAAY,QAAQ,MAAM,WAAW,KAAK,IAAK,QAAO;AAE1F,MAAI,KAAK,SAAS,CAAC,MAAM,SAAU,QAAO;AAC1C,SAAO,MAAM,IAAI,YAAY,MAAM,KAAK;AAC1C;AAGO,SAAS,eAAe,UAAkB,QAAQ,QAAQ,GAAa;AAC5E,MAAI,SAAS,SAAS,GAAG,EAAG,QAAO,SAAS,MAAM,KAAK,EAAE,IAAI,CAACC,SAAQA,KAAI,YAAY,CAAC;AACvF,QAAM,QAAQ,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO;AAChD,QAAM,MAAM,MAAM,GAAG,EAAE,KAAK;AAC5B,QAAM,QAA0C,EAAE,KAAK,CAAC,UAAK,MAAM,GAAG,MAAM,CAAC,UAAK,KAAK,GAAG,MAAM,CAAC,UAAK,MAAM,GAAG,KAAK,CAAC,UAAK,KAAK,GAAG,OAAO,CAAC,UAAK,OAAO,EAAE;AACxJ,QAAM,QAAQ,MAAM,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,SAAS,MAAM,KAAK,YAAY,CAAC,IAAI,QAAQ,IAAI,CAAC,KAAK,IAAI;AACjG,QAAM,QAAgC,EAAE,QAAQ,OAAO,OAAO,UAAK,SAAS,UAAK,WAAW,UAAK,WAAW,UAAK,YAAY,UAAK,KAAK,QAAQ;AAC/I,QAAM,OAAO,MAAM,QAAQ,IAAI,YAAY,CAAC,KAAK,IAAI,YAAY,CAAC,KAAK,IAAI,YAAY;AACvF,SAAO,CAAC,GAAG,OAAO,IAAI;AACxB;AAEA,IAAM,OAAO,MAAM,MAAM;AAGlB,SAAS,WAAoB;AAClC,SAAa,4BAAqB,MAAM,SAAS,MAAM,KAAK;AAC9D;AAGO,SAAS,iBAAiB,UAAkB,QAAQ,QAAQ,GAAuB;AACxF,MAAI,SAAS,SAAS,GAAG,EAAG,QAAO;AACnC,QAAM,QAAQ,SAAS,MAAM,GAAG,EAAE,OAAO,OAAO;AAChD,QAAM,QAAgC,EAAE,KAAK,QAAQ,SAAS,WAAW,MAAM,QAAQ,MAAM,WAAW,KAAK,OAAO,OAAO,QAAQ;AACnI,QAAM,MAAM,MAAM,GAAG,EAAE,KAAK;AAC5B,SAAO,CAAC,GAAG,MAAM,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,SAAS,MAAM,KAAK,YAAY,CAAC,KAAK,IAAI,GAAG,IAAI,WAAW,IAAI,IAAI,YAAY,IAAI,IAAI,OAAO,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG;AAC7K;AAGA,SAAS,WAAW,QAA+D;AACjF,QAAM,UAAU,kBAAkB,cAAc,SAAS;AACzD,MAAI,CAAC,QAAS,QAAO,EAAE,OAAO,OAAO,MAAM,MAAM;AACjD,QAAM,OAAO,QAAQ;AACrB,SAAO,EAAE,OAAO,QAAQ,6BAA6B,KAAK,QAAQ,OAAO,GAAG,KAAK;AACnF;AAOO,SAAS,aAAa,KAAkB,EAAE,UAAU,MAAM,UAAU,IAAI,IAA6C,CAAC,GAAG;AAC9H,QAAM,SAAS,UAAU,GAAG;AAC5B,QAAM,QAAQ,OAAO,KAAK,GAAG,EAAE,KAAK,EAAE,KAAK,IAAI;AAC/C,EAAM,iBAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,WAAW,MAAM,MAAM,IAAI,EAAE,OAAO,OAAO;AACjD,QAAI,SAAwC,CAAC;AAC7C,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,oBAAoB,MAAM,eAAe,MAAM,UAAU,CAAC,MAAM,IAAK;AAC/E,YAAM,UAAU,WAAW,MAAM,MAAM;AACvC,YAAM,QAAQ,MAAM,WAAW,MAAM,WAAW,MAAM;AACtD,YAAM,MAAM,KAAK,IAAI;AACrB,eAAS,CAAC,GAAG,OAAO,OAAO,CAAC,UAAU,MAAM,MAAM,MAAM,OAAO,GAAG,EAAE,KAAK,MAAM,IAAI,YAAY,GAAG,IAAI,IAAI,CAAC,EAAE,MAAM,EAAE;AACrH,iBAAW,WAAW,UAAU;AAC9B,cAAM,UAAU,OAAO,QAAQ,OAAO;AACtC,YAAI,CAAC,QAAS;AACd,cAAM,OAAO,QAAQ,YAAY,EAAE,MAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,QAAQ,GAAG,KAAK,GAAG;AAChF,cAAM,QACJ,KAAK,SAAS,IACV,CAAC,SAAS,CAAC,QAAQ,SAAS,OAAO,UAAU,KAAK,UAAU,KAAK,MAAM,CAAC,KAAK,MAAM,OAAO,OAAO,SAAS,KAAK,SAAS,CAAC,GAAG,QAAQ,GAAG,IACvI,aAAa,OAAO,OAAO,MAAM,QAAQ,CAAC,QAAQ,OAAO,CAAC,QAAQ;AACxE,YAAI,CAAC,MAAO;AACZ,cAAM,eAAe;AACrB,iBAAS,CAAC;AACV,gBAAQ,KAAK;AACb;AAAA,MACF;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,SAAS,OAAO,QAAQ,OAAO,CAAC;AACtC;;;AFCM,SA0BF,UAzBkB,OAAAC,MADhB;AA5FC,IAAM,WAAWC,IAAG;AAAA,EACzB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SACE;AAAA,IAEF,QACE;AAAA,IACF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MACE;AAAA,IAKF,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WACE;AAAA,IAEF,QAAQ;AAAA,IACR,UACE;AAAA,IAEF,MAAM;AAAA,IACN,QACE;AAAA,IACF,YACE;AAAA,IAEF,OAAO;AAAA,IACP,QACE;AAAA,IAEF,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AACD,IAAM,IAAI,SAAS;AASnB,IAAM,eAAqB,qBAAiC,IAAI;AAChE,IAAM,WAAW,MAAM;AACrB,QAAM,MAAY,kBAAW,YAAY;AACzC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+CAA+C;AACzE,SAAO;AACT;AAoBO,SAAS,aAAa,EAAE,mBAAmB,OAAO,WAAW,YAAY,mBAAmB,WAAW,mBAAmB,SAAS,WAAW,UAAU,GAAG,MAAM,GAAsB;AAC5L,QAAM,CAAC,KAAK,MAAM,IAAU,gBAAS,gBAAgB;AACrD,QAAM,CAAC,MAAM,OAAO,IAAU,gBAAS,KAAK;AAC5C,QAAM,YAAY,cAAc;AAChC,QAAM,eAAqB;AAAA,IACzB,CAACC,WAAmB;AAClB,UAAI,eAAe,OAAW,QAAOA,MAAK;AAC1C,0BAAoBA,MAAK;AAAA,IAC3B;AAAA,IACA,CAAC,YAAY,iBAAiB;AAAA,EAChC;AACA,QAAM,QAAc,eAAQ,OAAO,EAAE,WAAW,cAAc,MAAM,SAAS,UAAU,MAAM,IAAI,CAAC,WAAW,cAAc,IAAI,CAAC;AAChI,eAAa,mBAAmB,EAAE,CAAC,gBAAgB,GAAG,MAAM,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAC3F,SACE,gBAAAF,KAAC,aAAa,UAAb,EAAsB,OACrB,+BAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACxC;AAAA,iBAAa,gBAAAA,KAAC,YAAS,MAAK,YAAY,qBAAU;AAAA,IAClD;AAAA,KACH,GACF;AAEJ;AAiBA,SAAS,eAAe,EAAE,OAAO,UAAU,QAAQ,gBAAgB,WAAW,GAAkG;AAC9K,QAAM,EAAE,WAAW,cAAc,SAAS,IAAI,SAAS;AACvD,SACE,iCACE;AAAA,yBAAC,SAAI,WAAW,EAAE,MAAM,GACrB;AAAA;AAAA,MACA,YACC,gBAAAA,KAAC,gBAAgB,OAAhB,EAAsB,WAAW,GAAG,EAAE,WAAW,GAAG,cAAc,GAAG,cAAY,YAChF,0BAAAA,KAAC,cAAW,WAAU,WAAU,GAClC;AAAA,OAEJ;AAAA,IACA,gBAAAA,KAAC,SAAI,WAAW,EAAE,IAAI,GAAI,UAAS;AAAA,KACjC,UAAW,kBAAkB,CAAC,aAC9B,qBAAC,SAAI,WAAW,EAAE,OAAO,GACtB;AAAA;AAAA,MACA,kBAAkB,CAAC,YAClB,qBAAC,YAAO,MAAK,UAAS,WAAW,EAAE,SAAS,GAAG,iBAAe,CAAC,WAAW,SAAS,MAAM,aAAa,CAAC,SAAS,GAC9G;AAAA,wBAAAA,KAAC,gBAAa,WAAW,YAAY,UAAU,QAAQ,WAAU,WAAU;AAAA,QAC3E,gBAAAA,KAAC,UAAK,WAAW,YAAY,YAAY,QAAY,sBAAY,eAAe,CAAC,IAAI,eAAe,CAAC,GAAE;AAAA,SACzG;AAAA,OAEJ;AAAA,KAEJ;AAEJ;AAGO,SAAS,gBAAgB,EAAE,OAAO,OAAO,UAAU,QAAQ,gBAAgB,YAAY,WAAW,GAAG,MAAM,GAAyB;AACzI,QAAM,QAAQ,SAAS;AACvB,QAAM,UAAU,EAAE,OAAO,UAAU,QAAQ,gBAAgB,WAAW;AACtE,SACE,iCACE;AAAA,oBAAAA,KAAC,SAAI,cAAY,OAAO,kBAAgB,MAAM,YAAY,KAAK,QAAW,WAAW,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OACjH,0BAAAA,KAAC,kBAAgB,GAAG,SAAS,GAC/B;AAAA,IACA,gBAAAA,KAAC,gBAAgB,MAAhB,EAAqB,MAAM,MAAM,MAAM,cAAc,MAAM,SAC1D,+BAAC,gBAAgB,QAAhB,EACC;AAAA,sBAAAA,KAAC,gBAAgB,SAAhB,EAAwB,WAAW,EAAE,QAAQ,GAAG;AAAA,MACjD,qBAAC,gBAAgB,SAAhB,EAAwB,WAAW,EAAE,OAAO,GAAG,oBAAkB,QAChE;AAAA,wBAAAA,KAAC,gBAAgB,OAAhB,EAAsB,WAAU,WAAW,iBAAM;AAAA,QAClD,gBAAAA,KAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,GAAG,OAAO,WAAW,OAAO,UAAU,KAAK,GACzE,0BAAAA,KAAC,SAAI,cAAY,OAAO,WAAU,gCAA+B,SAAS,CAAC,MAAO,EAAE,OAAmB,QAAQ,GAAG,KAAK,MAAM,QAAQ,KAAK,GACxI,0BAAAA,KAAC,kBAAgB,GAAG,SAAS,GAC/B,GACF;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAQO,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAuB;AACzE,SAAO,gBAAAA,KAAC,OAAE,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC1D;AAuBO,SAAS,aAAa,EAAE,MAAM,OAAO,SAAS,OAAO,UAAU,SAAS,UAAU,WAAW,GAAG,MAAM,GAAsB;AACjI,QAAM,EAAE,WAAW,SAAS,IAAI,SAAS;AACzC,QAAM,UAAgB,cAA0B,IAAI;AACpD,QAAM,QAAQ,SAAS;AAEvB,eAAa,YAAY,CAAC,WAAW,EAAE,CAAC,QAAQ,GAAG,MAAM,QAAQ,SAAS,MAAM,EAAE,IAAI,CAAC,CAAC;AACxF,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,QAAM,QACJ,iCACG;AAAA;AAAA,IACD,gBAAAA,KAAC,UAAK,WAAW,EAAE,UAAU,GAAI,iBAAM;AAAA,IACtC,SAAS,QAAQ,gBAAAA,KAAC,UAAK,WAAW,EAAE,UAAU,GAAI,iBAAM;AAAA,IACxD,YAAY,CAAC,WACZ,gBAAAA,KAAC,UAAK,WAAW,EAAE,SAAS,GAAG,eAAW,MACvC,yBAAe,UAAU,KAAK,EAAE,IAAI,CAAC,QACpC,gBAAAA,KAAC,OAAc,MAAK,MACjB,iBADO,GAEV,CACD,GACH,IACE;AAAA,KACN;AAEF,SACE,gBAAAA,KAAC,QAAK,KAAK,SAAS,gBAAc,UAAU,SAAS,QAAW,qBAAmB,WAAW,iBAAiB,UAAU,KAAK,IAAI,QAAW,OAAO,YAAY,QAAQ,QAAW,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OACtN,qBAAW,WAAiB,oBAAa,UAAU,QAAW,KAAK,IAAI,OAC1E;AAEJ;AAGO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AACjF,SAAO,gBAAAA,KAAC,SAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAC3D;AAYO,SAAS,eAAe,EAAE,OAAO,WAAW,SAAS,WAAW,UAAU,GAAG,MAAM,GAAwB;AAChH,QAAM,EAAE,MAAM,QAAQ,IAAI,SAAS;AACnC,SACE,qBAAC,YAAO,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC,GAAI,GAAG,OAC9C;AAAA,oBAAAA,KAAC,YAAO,MAAK,UAAS,WAAW,EAAE,WAAW,GAAG,cAAY,WAAW,iBAAe,MAAM,iBAAc,UAAS,SAAS,MAAM,QAAQ,IAAI,GAC7I,0BAAAA,KAAC,SAAI,SAAQ,aAAY,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,eAAW,MAC9H,0BAAAA,KAAC,UAAK,GAAE,2BAA0B,GACpC,GACF;AAAA,IACC,SAAS,gBAAAA,KAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAC1C;AAAA,IACA,WAAW,gBAAAA,KAAC,SAAI,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,KACpD;AAEJ;AAeO,SAAS,eAAe,EAAE,OAAO,QAAQ,WAAW,SAAS,WAAW,GAAG,MAAM,GAAwB;AAC9G,QAAM,QAAQ,SAAS;AACvB,eAAa,EAAE,CAAC,QAAQ,GAAG,MAAM,OAAO,EAAE,CAAC;AAC3C,SACE,qBAAC,YAAO,MAAK,UAAS,WAAW,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,qBAAmB,iBAAiB,UAAU,KAAK,GAAG,SAAS,QAAS,GAAG,OACnI;AAAA,oBAAAA,KAAC,eAAY;AAAA,IACb,gBAAAA,KAAC,UAAK,WAAW,EAAE,YAAY,GAAI,iBAAM;AAAA,IACzC,gBAAAA,KAAC,UAAK,WAAW,EAAE,WAAW,GAAG,eAAW,MACzC,yBAAe,UAAU,KAAK,EAAE,IAAI,CAAC,QACpC,gBAAAA,KAAC,OAAc,MAAK,MACjB,iBADO,GAEV,CACD,GACH;AAAA,KACF;AAEJ;AAGO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAiC;AAClF,SAAO,gBAAAA,KAAC,UAAK,IAAG,WAAU,UAAU,IAAI,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACvF;AAEO,IAAM,WAAW;AAAA,EACtB,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACR;","names":["React","tv","React","key","jsx","tv","value"]}

package/dist/audio-player.js

@@ -4,7 +4,7 @@ import {
   formatClock,
   playSafely,
   useInView
-} from "./chunk-BRKMQ6JV.js";
+} from "./chunk-FZBWEDQI.js";
 import {
   PauseGlyph,
   PlayGlyph

package/dist/badge.d.ts

@@ -3,55 +3,52 @@ import { VariantProps } from 'tailwind-variants';
 import * as React from 'react';
 
 declare const badgeVariants: tailwind_variants.TVReturnType<{
-    tone: {
-        neutral: "bg-surface-3 text-fg-secondary";
-        accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
-        success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
-        warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
-        danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
-        /** On a media: veil and text invariant, identical in both themes. */
-        scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
+    readonly tone: {
+        readonly neutral: "bg-surface-3 text-fg-secondary";
+        readonly accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
+        readonly success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
+        readonly warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
+        readonly danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
+        readonly scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
     };
-    size: {
-        sm: "px-2 py-0.5 text-[10px]";
-        md: "px-2.5 py-1 text-[11px]";
+    readonly size: {
+        readonly sm: "px-2 py-0.5 text-[10px]";
+        readonly md: "px-2.5 py-1 text-[11px]";
     };
-    pulse: {
-        true: "[&>[data-dot]]:motion-safe:animate-pulse";
+    readonly pulse: {
+        readonly true: "[&>[data-dot]]:motion-safe:animate-pulse";
     };
 }, undefined, "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider", {
-    tone: {
-        neutral: "bg-surface-3 text-fg-secondary";
-        accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
-        success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
-        warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
-        danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
-        /** On a media: veil and text invariant, identical in both themes. */
-        scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
+    readonly tone: {
+        readonly neutral: "bg-surface-3 text-fg-secondary";
+        readonly accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
+        readonly success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
+        readonly warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
+        readonly danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
+        readonly scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
     };
-    size: {
-        sm: "px-2 py-0.5 text-[10px]";
-        md: "px-2.5 py-1 text-[11px]";
+    readonly size: {
+        readonly sm: "px-2 py-0.5 text-[10px]";
+        readonly md: "px-2.5 py-1 text-[11px]";
     };
-    pulse: {
-        true: "[&>[data-dot]]:motion-safe:animate-pulse";
+    readonly pulse: {
+        readonly true: "[&>[data-dot]]:motion-safe:animate-pulse";
     };
 }, undefined, tailwind_variants.TVReturnTypeLike<{
-    tone: {
-        neutral: "bg-surface-3 text-fg-secondary";
-        accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
-        success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
-        warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
-        danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
-        /** On a media: veil and text invariant, identical in both themes. */
-        scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
+    readonly tone: {
+        readonly neutral: "bg-surface-3 text-fg-secondary";
+        readonly accent: "bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent";
+        readonly success: "bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success";
+        readonly warning: "bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning";
+        readonly danger: "bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger";
+        readonly scrim: "bg-scrim text-fg-on-media backdrop-blur-md";
     };
-    size: {
-        sm: "px-2 py-0.5 text-[10px]";
-        md: "px-2.5 py-1 text-[11px]";
+    readonly size: {
+        readonly sm: "px-2 py-0.5 text-[10px]";
+        readonly md: "px-2.5 py-1 text-[11px]";
     };
-    pulse: {
-        true: "[&>[data-dot]]:motion-safe:animate-pulse";
+    readonly pulse: {
+        readonly true: "[&>[data-dot]]:motion-safe:animate-pulse";
     };
 }, undefined>>;
 type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/badge.js

@@ -1,7 +1,12 @@
+import {
+  defineRecipe
+} from "./chunk-2VNYHG4E.js";
+
 // src/badge/badge.tsx
 import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var badgeVariants = tv({
+
+// src/badge/recipe.ts
+var badgeRecipe = defineRecipe({
   base: "inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider",
   variants: {
     tone: {
@@ -18,6 +23,10 @@ var badgeVariants = tv({
   },
   defaultVariants: { tone: "neutral", size: "sm" }
 });
+
+// src/badge/badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var badgeVariants = tv(badgeRecipe);
 function Badge({ tone, size, pulse, dot, className, children, ...props }) {
   return /* @__PURE__ */ jsxs("span", { "data-tone": tone ?? "neutral", className: badgeVariants({ tone, size, pulse, className }), ...props, children: [
     dot && /* @__PURE__ */ jsx("span", { "data-dot": "", "aria-hidden": true, className: "h-1.5 w-1.5 rounded-full bg-current" }),

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/badge/badge.tsx"],"sourcesContent":["// Server-safe: no hook, no context.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\n// Status tones are soft (a tint, a coloured dot, a text role): the invariant status tokens are too light to carry\n// small text on a light surface, or to sit under white text (WCAG AA).\nexport const badgeVariants = tv({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider\",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n\nexport type BadgeProps = React.ComponentProps<\"span\"> &\n  BadgeVariants & {\n    /**\n     * neutral · accent · success · warning · danger (soft tints, the text stays a text role) · scrim (on a media).\n     * @default \"neutral\"\n     */\n    tone?: BadgeVariants[\"tone\"];\n    /**\n     * sm · md.\n     * @default \"sm\"\n     */\n    size?: BadgeVariants[\"size\"];\n    /** Makes the `dot` pulse (stopped under reduced motion). */\n    pulse?: BadgeVariants[\"pulse\"];\n    /** A small dot before the text, in the tone's colour (pulsing with `pulse`). */\n    dot?: boolean;\n  };\n\nexport function Badge({ tone, size, pulse, dot, className, children, ...props }: BadgeProps) {\n  return (\n    <span data-tone={tone ?? \"neutral\"} className={badgeVariants({ tone, size, pulse, className })} {...props}>\n      {dot && <span data-dot=\"\" aria-hidden className=\"h-1.5 w-1.5 rounded-full bg-current\" />}\n      {children}\n    </span>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAA6B;AA4ClC,SACU,KADV;AAxCG,IAAM,gBAAgB,GAAG;AAAA,EAC9B,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA;AAAA,MAER,OAAO;AAAA,IACT;AAAA,IACA,MAAM,EAAE,IAAI,2BAA2B,IAAI,0BAA0B;AAAA,IACrE,OAAO,EAAE,MAAM,2CAA2C;AAAA,EAC5D;AAAA,EACA,iBAAiB,EAAE,MAAM,WAAW,MAAM,KAAK;AACjD,CAAC;AAsBM,SAAS,MAAM,EAAE,MAAM,MAAM,OAAO,KAAK,WAAW,UAAU,GAAG,MAAM,GAAe;AAC3F,SACE,qBAAC,UAAK,aAAW,QAAQ,WAAW,WAAW,cAAc,EAAE,MAAM,MAAM,OAAO,UAAU,CAAC,GAAI,GAAG,OACjG;AAAA,WAAO,oBAAC,UAAK,YAAS,IAAG,eAAW,MAAC,WAAU,uCAAsC;AAAA,IACrF;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../src/badge/badge.tsx","../src/badge/recipe.ts"],"sourcesContent":["// Server-safe: no hook, no context.\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { badgeRecipe } from \"./recipe\";\n\n// Status tones are soft (a tint, a coloured dot, a text role): the invariant status tokens are too light to carry\n// small text on a light surface, or to sit under white text (WCAG AA).\nexport const badgeVariants = tv(badgeRecipe);\n\nexport type BadgeVariants = VariantProps<typeof badgeVariants>;\n\nexport type BadgeProps = React.ComponentProps<\"span\"> &\n  BadgeVariants & {\n    /**\n     * neutral · accent · success · warning · danger (soft tints, the text stays a text role) · scrim (on a media).\n     * @default \"neutral\"\n     */\n    tone?: BadgeVariants[\"tone\"];\n    /**\n     * sm · md.\n     * @default \"sm\"\n     */\n    size?: BadgeVariants[\"size\"];\n    /** Makes the `dot` pulse (stopped under reduced motion). */\n    pulse?: BadgeVariants[\"pulse\"];\n    /** A small dot before the text, in the tone's colour (pulsing with `pulse`). */\n    dot?: boolean;\n  };\n\nexport function Badge({ tone, size, pulse, dot, className, children, ...props }: BadgeProps) {\n  return (\n    <span data-tone={tone ?? \"neutral\"} className={badgeVariants({ tone, size, pulse, className })} {...props}>\n      {dot && <span data-dot=\"\" aria-hidden className=\"h-1.5 w-1.5 rounded-full bg-current\" />}\n      {children}\n    </span>\n  );\n}\n","// The badge's tones and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(badgeRecipe)`,\n// React Native reads the same classes into styles (native/badge.tsx). Status tones are soft (a tint, a coloured dot, a\n// text role): the invariant status tokens are too light to carry small text on a light surface, or to sit under white\n// text (WCAG AA).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const badgeRecipe = defineRecipe({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider\",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n"],"mappings":";;;;;AAEA,SAAS,UAA6B;;;ACI/B,IAAM,cAAc,aAAa;AAAA,EACtC,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,QAAQ;AAAA;AAAA,MAER,OAAO;AAAA,IACT;AAAA,IACA,MAAM,EAAE,IAAI,2BAA2B,IAAI,0BAA0B;AAAA,IACrE,OAAO,EAAE,MAAM,2CAA2C;AAAA,EAC5D;AAAA,EACA,iBAAiB,EAAE,MAAM,WAAW,MAAM,KAAK;AACjD,CAAC;;;ADUG,SACU,KADV;AAxBG,IAAM,gBAAgB,GAAG,WAAW;AAsBpC,SAAS,MAAM,EAAE,MAAM,MAAM,OAAO,KAAK,WAAW,UAAU,GAAG,MAAM,GAAe;AAC3F,SACE,qBAAC,UAAK,aAAW,QAAQ,WAAW,WAAW,cAAc,EAAE,MAAM,MAAM,OAAO,UAAU,CAAC,GAAI,GAAG,OACjG;AAAA,WAAO,oBAAC,UAAK,YAAS,IAAG,eAAW,MAAC,WAAU,uCAAsC;AAAA,IACrF;AAAA,KACH;AAEJ;","names":[]}