@krizaka/ui 3.42.0 → 3.43.1

package/dist/RotatingWord-D9s7FXFD.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+
+interface MotionObserverProps {
+    /**
+     * Hold the loops of the page (`.kz-loop`, the backdrop's drift) still until the page has loaded and settled
+     * (`html[data-motion="settling"]` → `"ready"`, about 1.2 s after `load`): nothing repaints the first screen while it
+     * paints.
+     * @default true
+     */
+    settle?: boolean;
+    /**
+     * Pause every animation of a scope while it is off screen (`data-offscreen` on `.kz-backdrop`, `.kz-iso`,
+     * `[data-motion-scope]` and the page's sections).
+     * @default true
+     */
+    pauseOffscreen?: boolean;
+}
+/**
+ * The Krizaka motion conductor. Mount it once at the root of the app; it renders nothing and keeps no animation frame
+ * running. It reveals every `[data-reveal]` element once as it enters the viewport (including elements added later:
+ * client navigation needs nothing more), pauses what is off screen, lets the first screen settle before its loops
+ * start. Nothing follows the pointer (krizaka-ui#393: the spotlight and the magnetic buttons are retired). Under
+ * prefers-reduced-motion everything is revealed at once.
+ */
+declare function MotionObserver({ settle, pauseOffscreen }?: MotionObserverProps): null;
+
+interface RotatingWordProps {
+    /** The alternatives, passed translated; the first one is what the server renders. */
+    words: readonly string[];
+    /**
+     * Milliseconds each word stays.
+     * @default 2600
+     */
+    interval?: number;
+    /** Classes for every word (a colour, gradient text). */
+    className?: string;
+}
+/**
+ * A word that rolls through alternatives — the Krizaka headline signature. Every word shares one grid cell from the
+ * first paint, so the line keeps the width of the longest one (no layout shift); the current one rolls in. The server
+ * render shows the first word; it stays put under prefers-reduced-motion and while the tab is hidden. Decorative
+ * (`aria-hidden`): give the heading a stable accessible label.
+ */
+declare function RotatingWord({ words, interval, className }: RotatingWordProps): React.JSX.Element;
+
+export { MotionObserver as M, RotatingWord as R, type MotionObserverProps as a, type RotatingWordProps as b };

package/dist/app-shell.d.ts

@@ -16,13 +16,14 @@ declare const appShell: tailwind_variants.TVReturnType<{
             titlebar?: tailwind_variants.ClassValue;
             drawer?: tailwind_variants.ClassValue;
             overlay?: tailwind_variants.ClassValue;
-            brand?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
             itemHint?: tailwind_variants.ClassValue;
+            footerContent?: tailwind_variants.ClassValue;
             searchLabel?: tailwind_variants.ClassValue;
             searchKeys?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
+            brand?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             itemBadge?: tailwind_variants.ClassValue;
             collapse?: tailwind_variants.ClassValue;
@@ -44,13 +45,14 @@ declare const appShell: tailwind_variants.TVReturnType<{
             titlebar?: tailwind_variants.ClassValue;
             drawer?: tailwind_variants.ClassValue;
             overlay?: tailwind_variants.ClassValue;
-            brand?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
             itemHint?: tailwind_variants.ClassValue;
+            footerContent?: tailwind_variants.ClassValue;
             searchLabel?: tailwind_variants.ClassValue;
             searchKeys?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
+            brand?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             itemBadge?: tailwind_variants.ClassValue;
             collapse?: tailwind_variants.ClassValue;
@@ -71,6 +73,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
     itemHint: string;
     itemBadge: string;
     footer: string;
+    footerContent: string;
     collapse: string;
     body: string;
     header: string;
@@ -96,13 +99,14 @@ declare const appShell: tailwind_variants.TVReturnType<{
             titlebar?: tailwind_variants.ClassValue;
             drawer?: tailwind_variants.ClassValue;
             overlay?: tailwind_variants.ClassValue;
-            brand?: tailwind_variants.ClassValue;
             itemLabel?: tailwind_variants.ClassValue;
             itemHint?: tailwind_variants.ClassValue;
+            footerContent?: tailwind_variants.ClassValue;
             searchLabel?: tailwind_variants.ClassValue;
             searchKeys?: tailwind_variants.ClassValue;
             actions?: tailwind_variants.ClassValue;
             sidebar?: tailwind_variants.ClassValue;
+            brand?: tailwind_variants.ClassValue;
             item?: tailwind_variants.ClassValue;
             itemBadge?: tailwind_variants.ClassValue;
             collapse?: tailwind_variants.ClassValue;
@@ -123,6 +127,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
     itemHint: string;
     itemBadge: string;
     footer: string;
+    footerContent: string;
     collapse: string;
     body: string;
     header: string;
@@ -147,6 +152,7 @@ declare const appShell: tailwind_variants.TVReturnType<{
     itemHint: string;
     itemBadge: string;
     footer: string;
+    footerContent: string;
     collapse: string;
     body: string;
     header: string;

package/dist/app-shell.js

@@ -130,18 +130,20 @@ 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 data-desktop:h-[var(--kz-window-height,100dvh)] data-desktop:overflow-hidden",
-    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] [[data-desktop]_&]:static [[data-desktop]_&]:flex [[data-desktop]_&]:h-auto [[data-desktop]_&]:w-60 [[data-desktop]_&]:select-none [[data-desktop]_&]:data-collapsed:w-[4.75rem]",
+    sidebar: "sticky top-0 hidden h-dvh shrink-0 flex-col overflow-x-clip 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] [[data-desktop]_&]:static [[data-desktop]_&]:flex [[data-desktop]_&]:h-auto [[data-desktop]_&]:w-60 [[data-desktop]_&]:select-none [[data-desktop]_&]:data-collapsed:w-[4.75rem]",
     titlebar: "h-[var(--kz-titlebar-inset,1.75rem)] shrink-0",
     drawer: "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",
     overlay: "kz-overlay fixed inset-0 z-50 bg-overlay",
-    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 [[data-desktop]_&]:h-11",
+    brand: "flex h-14 shrink-0 items-center gap-2.5 overflow-hidden whitespace-nowrap px-4 font-display text-[15px] font-bold tracking-tight transition-[font-size,gap,padding] duration-300 motion-reduce:transition-none [[data-desktop]_&]:h-11 [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:gap-0 [[data-collapsed]_&]:px-0 [[data-collapsed]_&]:text-[0px] [[data-collapsed]_&_a]:gap-0 [[data-collapsed]_&_a]:text-[0px]",
     nav: "flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2",
     group: "mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold 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-sm aria-[current=page]:before:bg-accent [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0 [[data-desktop]_&]:h-8 [[data-desktop]_&]:cursor-default [[data-desktop]_&]:rounded-md [[data-desktop]_&]:text-[13px] [[data-desktop]_&_svg]:h-4 [[data-desktop]_&_svg]:w-4",
     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-sm 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",
+    footer: "shrink-0 overflow-hidden border-t border-border-subtle p-2",
+    // The words the app puts in the footer (account, version): a text-only footer fades out first (a footer with controls stays, clipped) and the box narrows with the sidebar, so nothing spills over the content; they stay in the tree for screen readers.
+    footerContent: "max-w-full overflow-hidden whitespace-nowrap opacity-100 transition-[max-width,opacity] duration-300 motion-reduce:transition-none [[data-collapsed]_&:not(:has(a,button,input,[role=button]))]:max-w-0 [[data-collapsed]_&:not(:has(a,button,input,[role=button]))]:opacity-0 [[data-collapsed]_&:not(:has(a,button,input,[role=button]))]:duration-150",
     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",
     body: "flex min-w-0 flex-1 flex-col [[data-desktop]_&]:min-h-0 [[data-desktop]_&]:overflow-y-auto",
     header: "sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0 px-4 md:px-6 [[data-desktop]_&]:h-12 [[data-desktop]_&]:select-none [[data-desktop]_&]:px-5",
@@ -190,7 +192,7 @@ function SidebarContent({ brand, children, footer, collapseLabels, closeLabel })
     ] }),
     /* @__PURE__ */ jsx2("div", { className: s.nav(), children }),
     (footer || collapseLabels && !inDrawer) && /* @__PURE__ */ jsxs("div", { className: s.footer(), children: [
-      footer,
+      footer && /* @__PURE__ */ jsx2("div", { className: s.footerContent(), children: footer }),
       collapseLabels && !inDrawer && /* @__PURE__ */ jsxs("button", { type: "button", className: s.collapse(), "aria-expanded": !collapsed, onClick: () => setCollapsed(!collapsed), children: [
         /* @__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] })

package/dist/app-shell.js.map

@@ -1 +1 @@
-{"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`.\n// `desktop` (ADR-002): the shell is the window of a desktop app (the Orazaka Mac app, Tauri 2): the sidebar is always\n// there (a window has a minimum width, no drawer), its top clears the traffic lights, the header and the sidebar's top are\n// the title bar (`data-tauri-drag-region`: dragging them moves the window), the density is the desktop's (32 px rows,\n// 13 px text, a 48 px header), the chrome is not selectable, and the content scrolls under a fixed header.\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 data-desktop:h-[var(--kz-window-height,100dvh)] data-desktop:overflow-hidden\",\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      \"[[data-desktop]_&]:static [[data-desktop]_&]:flex [[data-desktop]_&]:h-auto [[data-desktop]_&]:w-60 [[data-desktop]_&]:select-none [[data-desktop]_&]:data-collapsed:w-[4.75rem]\",\n    titlebar: \"h-[var(--kz-titlebar-inset,1.75rem)] shrink-0\",\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\",\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 [[data-desktop]_&]:h-11\",\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 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-sm 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      \"[[data-desktop]_&]:h-8 [[data-desktop]_&]:cursor-default [[data-desktop]_&]:rounded-md [[data-desktop]_&]:text-[13px] [[data-desktop]_&_svg]:h-4 [[data-desktop]_&_svg]:w-4\",\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-sm 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 [[data-desktop]_&]:min-h-0 [[data-desktop]_&]:overflow-y-auto\",\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 px-4 md:px-6 \" +\n      \"[[data-desktop]_&]:h-12 [[data-desktop]_&]:select-none [[data-desktop]_&]:px-5\",\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 [[data-desktop]_&]: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 [[data-desktop]_&]:text-[15px]\",\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 [[data-desktop]_&]:px-6 [[data-desktop]_&]:py-6\",\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  desktop: 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   * The shell is a desktop app's window (the Orazaka Mac app, Tauri 2 — ADR-002): no drawer, the sidebar's top clears the\n   * window's traffic lights (`--kz-titlebar-inset`, 28 px; the window's height is `--kz-window-height`, the viewport by default), the header and that top move the window\n   * (`data-tauri-drag-region`), a denser layout, the chrome not selectable. In a browser it is a fixed-height shell.\n   */\n  desktop?: boolean;\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\", desktop = false, 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, desktop }), [collapsed, setCollapsed, open, desktop]);\n  useShortcuts(collapseShortcut ? { [collapseShortcut]: () => setCollapsed(!collapsed) } : {});\n  return (\n    <ShellContext.Provider value={value}>\n      <div data-desktop={desktop ? \"\" : undefined} 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, desktop } = useShell();\n  const drag = desktop ? { \"data-tauri-drag-region\": \"\" } : {};\n  return (\n    <>\n      {desktop && <div aria-hidden className={s.titlebar()} {...drag} />}\n      <div className={s.brand()} {...drag}>\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      {!shell.desktop && (\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}\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, desktop } = useShell();\n  const drag = desktop ? { \"data-tauri-drag-region\": \"\" } : {};\n  return (\n    <header className={s.header({ className })} {...drag} {...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 && (\n        <h1 className={s.title()} {...drag}>\n          {title}\n        </h1>\n      )}\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\n/**\n * The accelerator of a combination for a desktop app's native menu bar (Tauri's `MenuItem`, Electron's — ADR-002):\n * `mod+k` → `CmdOrCtrl+K`, `shift+mod+/` → `Shift+CmdOrCtrl+/`. The menu and the shell then answer the same keys, and the\n * menu shows them. A sequence (`g d`) has none: a menu item takes one chord.\n */\nexport function acceleratorOf(shortcut: string): string | undefined {\n  if (shortcut.trim().includes(\" \")) return undefined;\n  const parts = shortcut.split(\"+\").filter(Boolean);\n  const names: Record<string, string> = { mod: \"CmdOrCtrl\", meta: \"Super\", ctrl: \"Ctrl\", alt: \"Alt\", shift: \"Shift\" };\n  const raw = (parts.at(-1) ?? \"\").toLowerCase();\n  const key = ALIASES[raw] ?? raw;\n  const keys: Record<string, string> = { escape: \"Escape\", enter: \"Enter\", \" \": \"Space\", arrowup: \"Up\", arrowdown: \"Down\", arrowleft: \"Left\", arrowright: \"Right\", delete: \"Delete\", backspace: \"Backspace\", tab: \"Tab\", \"+\": \"Plus\" };\n  const last = keys[key] ?? (key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1));\n  return [...parts.slice(0, -1).map((part) => names[part.toLowerCase()] ?? part), last].join(\"+\");\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":"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","names":["React","tv","React","key","jsx","tv","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`.\n// `desktop` (ADR-002): the shell is the window of a desktop app (the Orazaka Mac app, Tauri 2): the sidebar is always\n// there (a window has a minimum width, no drawer), its top clears the traffic lights, the header and the sidebar's top are\n// the title bar (`data-tauri-drag-region`: dragging them moves the window), the density is the desktop's (32 px rows,\n// 13 px text, a 48 px header), the chrome is not selectable, and the content scrolls under a fixed header.\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 data-desktop:h-[var(--kz-window-height,100dvh)] data-desktop:overflow-hidden\",\n    sidebar:\n      \"sticky top-0 hidden h-dvh shrink-0 flex-col overflow-x-clip 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      \"[[data-desktop]_&]:static [[data-desktop]_&]:flex [[data-desktop]_&]:h-auto [[data-desktop]_&]:w-60 [[data-desktop]_&]:select-none [[data-desktop]_&]:data-collapsed:w-[4.75rem]\",\n    titlebar: \"h-[var(--kz-titlebar-inset,1.75rem)] shrink-0\",\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\",\n    brand:\n      \"flex h-14 shrink-0 items-center gap-2.5 overflow-hidden whitespace-nowrap px-4 font-display text-[15px] font-bold tracking-tight transition-[font-size,gap,padding] duration-300 motion-reduce:transition-none [[data-desktop]_&]:h-11 \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:gap-0 [[data-collapsed]_&]:px-0 [[data-collapsed]_&]:text-[0px] [[data-collapsed]_&_a]:gap-0 [[data-collapsed]_&_a]:text-[0px]\",\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 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-sm 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      \"[[data-desktop]_&]:h-8 [[data-desktop]_&]:cursor-default [[data-desktop]_&]:rounded-md [[data-desktop]_&]:text-[13px] [[data-desktop]_&_svg]:h-4 [[data-desktop]_&_svg]:w-4\",\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-sm 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 overflow-hidden border-t border-border-subtle p-2\",\n    // The words the app puts in the footer (account, version): a text-only footer fades out first (a footer with controls stays, clipped) and the box narrows with the sidebar, so nothing spills over the content; they stay in the tree for screen readers.\n    footerContent: \"max-w-full overflow-hidden whitespace-nowrap opacity-100 transition-[max-width,opacity] duration-300 motion-reduce:transition-none [[data-collapsed]_&:not(:has(a,button,input,[role=button]))]:max-w-0 [[data-collapsed]_&:not(:has(a,button,input,[role=button]))]:opacity-0 [[data-collapsed]_&:not(:has(a,button,input,[role=button]))]:duration-150\",\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 [[data-desktop]_&]:min-h-0 [[data-desktop]_&]:overflow-y-auto\",\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 px-4 md:px-6 \" +\n      \"[[data-desktop]_&]:h-12 [[data-desktop]_&]:select-none [[data-desktop]_&]:px-5\",\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 [[data-desktop]_&]: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 [[data-desktop]_&]:text-[15px]\",\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 [[data-desktop]_&]:px-6 [[data-desktop]_&]:py-6\",\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  desktop: 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   * The shell is a desktop app's window (the Orazaka Mac app, Tauri 2 — ADR-002): no drawer, the sidebar's top clears the\n   * window's traffic lights (`--kz-titlebar-inset`, 28 px; the window's height is `--kz-window-height`, the viewport by default), the header and that top move the window\n   * (`data-tauri-drag-region`), a denser layout, the chrome not selectable. In a browser it is a fixed-height shell.\n   */\n  desktop?: boolean;\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\", desktop = false, 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, desktop }), [collapsed, setCollapsed, open, desktop]);\n  useShortcuts(collapseShortcut ? { [collapseShortcut]: () => setCollapsed(!collapsed) } : {});\n  return (\n    <ShellContext.Provider value={value}>\n      <div data-desktop={desktop ? \"\" : undefined} 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, desktop } = useShell();\n  const drag = desktop ? { \"data-tauri-drag-region\": \"\" } : {};\n  return (\n    <>\n      {desktop && <div aria-hidden className={s.titlebar()} {...drag} />}\n      <div className={s.brand()} {...drag}>\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 && <div className={s.footerContent()}>{footer}</div>}\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      {!shell.desktop && (\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}\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, desktop } = useShell();\n  const drag = desktop ? { \"data-tauri-drag-region\": \"\" } : {};\n  return (\n    <header className={s.header({ className })} {...drag} {...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 && (\n        <h1 className={s.title()} {...drag}>\n          {title}\n        </h1>\n      )}\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\n/**\n * The accelerator of a combination for a desktop app's native menu bar (Tauri's `MenuItem`, Electron's — ADR-002):\n * `mod+k` → `CmdOrCtrl+K`, `shift+mod+/` → `Shift+CmdOrCtrl+/`. The menu and the shell then answer the same keys, and the\n * menu shows them. A sequence (`g d`) has none: a menu item takes one chord.\n */\nexport function acceleratorOf(shortcut: string): string | undefined {\n  if (shortcut.trim().includes(\" \")) return undefined;\n  const parts = shortcut.split(\"+\").filter(Boolean);\n  const names: Record<string, string> = { mod: \"CmdOrCtrl\", meta: \"Super\", ctrl: \"Ctrl\", alt: \"Alt\", shift: \"Shift\" };\n  const raw = (parts.at(-1) ?? \"\").toLowerCase();\n  const key = ALIASES[raw] ?? raw;\n  const keys: Record<string, string> = { escape: \"Escape\", enter: \"Enter\", \" \": \"Space\", arrowup: \"Up\", arrowdown: \"Down\", arrowleft: \"Left\", arrowright: \"Right\", delete: \"Delete\", backspace: \"Backspace\", tab: \"Tab\", \"+\": \"Plus\" };\n  const last = keys[key] ?? (key.length === 1 ? key.toUpperCase() : key.charAt(0).toUpperCase() + key.slice(1));\n  return [...parts.slice(0, -1).map((part) => names[part.toLowerCase()] ?? part), last].join(\"+\");\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":"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","names":["React","tv","React","key","jsx","tv","value"]}

package/dist/blocks.css

@@ -78,6 +78,18 @@
 }
 .kz-section :is(h2, h3)[id] { scroll-margin-top: var(--kz-anchor-offset, 96px); }
 
+/* Products wear plain Krizaka UI, in their brand colour (Oussama, 2026-10-22): a product's root carries `data-surface="product"` (an app themed at :root, no brand class) or its `.brand-<id>`; the margin red is the notebook's, for the
+   Krizaka sites (www, the blog, ui.). Under a product's brand the margin ink is the brand's accent, so no eyebrow, folio or
+   margin note shows red there, and the faces are the sans and the system monospace. */
+:is([data-surface="product"], .brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza) {
+  --kz-paper-rule-margin: var(--kz-accent-text);
+  /* Nor the notebook's faces: headings in the sans (Young Serif and Courier Prime are Cahier's), code in the system monospace. */
+  --kz-font-display: var(--kz-font-sans);
+  --kz-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+:is([data-surface="product"], .brand-orazaka, .brand-orochia, .brand-yasakia, .brand-yororis, .brand-yomizaka, .brand-kachizaka, .brand-akinaza) :is(.kz-heading-title, .kz-hero-title) {
+  font-weight: 650; /* the serif had one weight; the sans carries the hierarchy with a semibold */
+}
 /* Cahier (ADR-004, #417): the eyebrow is a note in the margin's voice — the typewriter face, lower case, untracked,
    inked in the margin red. No more uppercase tracked overline above every heading. */
 .kz-eyebrow {

package/dist/chip.d.ts

@@ -99,6 +99,10 @@ type ChipGroupProps = (GroupBase & {
     onValueChange?: (value: string) => void;
     /** Keeps one chip selected: pressing the selected chip does not clear it (default `false`). */
     required?: boolean;
+    /** Binds the choice to this search parameter of the URL (`?type=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */
+    routeKey?: string;
+    /** The values the parameter may hold (the chips' `value`s). */
+    routeValues?: readonly string[];
 }) | (GroupBase & {
     /** Any number of choices: the chips are pressed buttons. */
     type: "multiple";
@@ -109,6 +113,8 @@ type ChipGroupProps = (GroupBase & {
     /** Called with the new values on every press. */
     onValueChange?: (value: string[]) => void;
     required?: never;
+    routeKey?: never;
+    routeValues?: never;
 });
 /** Chips that choose together: `type` single · multiple, `value`/`defaultValue` + `onValueChange`. */
 declare function ChipGroup({ label, size, className, children, ...props }: ChipGroupProps): React.JSX.Element;

package/dist/chip.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  useRouteBinding
+} from "./chunk-R3LTSMS5.js";
 import {
   defineRecipe
 } from "./chunk-D3T54RSL.js";
@@ -56,13 +59,15 @@ function ChipBase(props) {
   );
 }
 function ChipGroup({ label, size, className, children, ...props }) {
+  const single = props.type === "single" ? props : void 0;
+  const routed = useRouteBinding(single?.routeKey, single?.routeValues, { value: single?.value, defaultValue: single?.defaultValue, onValueChange: single?.onValueChange });
   const s = chip({ size });
   const context = React.useMemo(() => ({ size }), [size]);
   const common = { "aria-label": label, className: s.group({ className }) };
   let group;
   if (props.type === "single") {
-    const { type: _type, value, defaultValue, onValueChange, required, ...rest } = props;
-    group = /* @__PURE__ */ jsx(SingleGroup, { ...rest, ...common, value, defaultValue, onValueChange, required, children });
+    const { type: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, required, routeKey: _routeKey, routeValues: _routeValues, ...rest } = props;
+    group = /* @__PURE__ */ jsx(SingleGroup, { ...rest, ...common, value: routed.value, defaultValue: routed.defaultValue, onValueChange: routed.onValueChange, required, children });
   } else {
     const { type: _type, required: _required, ...rest } = props;
     group = /* @__PURE__ */ jsx(ToggleGroupPrimitive.Root, { type: "multiple", ...rest, ...common, children });

package/dist/chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip/chip.tsx","../src/chip/recipe.ts"],"sourcesContent":["// Client (a context). A chip is a pressable pill: alone it is a Radix Toggle (aria-pressed), inside `Chip.Group` an\n// item of a Radix Toggle Group (roving focus with the arrows; `single` = radio semantics, `multiple` = pressed\n// buttons). A `removable` chip is a static label with its own remove button (two buttons cannot nest).\nimport { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { chipRecipe } from \"./recipe\";\n\nexport const chip = tv(chipRecipe);\n\nexport type ChipVariants = VariantProps<typeof chip>;\n\ntype GroupContext = { size: ChipVariants[\"size\"] };\nconst ChipGroupContext = React.createContext<GroupContext | null>(null);\n\nfunction RemoveIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype ToggleChipProps = Omit<React.ComponentProps<\"button\">, \"value\" | \"defaultValue\"> &\n  ChipVariants & {\n    /**\n     * sm · md (inside `Chip.Group`, the group's size by default).\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** Inside `Chip.Group`: the value this chip stands for (required there, ignored alone). */\n    value?: string;\n    /** Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press. */\n    selected?: boolean;\n    /** Alone: pressed at first, uncontrolled. */\n    defaultSelected?: boolean;\n    /** Alone: called with the new state on every press. */\n    onSelectedChange?: (selected: boolean) => void;\n    /** A pressable chip (the default); `true` makes it a static chip with a remove button. */\n    removable?: false;\n  };\n\ntype RemovableChipProps = Omit<React.ComponentProps<\"span\">, \"onSelect\"> &\n  ChipVariants & {\n    /** A static chip (a chosen tag, an applied filter) with a remove button. */\n    removable: true;\n    /** The accessible name of the remove button — passed translated, e.g. \"Remove #night\". */\n    removeLabel: string;\n    /** Runs when the remove button is pressed. */\n    onRemove: () => void;\n    /** Disables the remove button. */\n    disabled?: boolean;\n  };\n\nexport type ChipProps = ToggleChipProps | RemovableChipProps;\n\n/** A selectable pill (`selected` / `onSelectedChange`), an item of `Chip.Group` (`value`), or `removable`. */\nfunction ChipBase(props: ChipProps) {\n  const group = React.useContext(ChipGroupContext);\n  if (props.removable) {\n    const { removable: _removable, removeLabel, onRemove, disabled, size, className, children, ...rest } = props;\n    const s = chip({ size: size ?? group?.size });\n    return (\n      <span data-removable=\"\" className={s.base({ className })} {...rest}>\n        {children}\n        <button type=\"button\" aria-label={removeLabel} title={removeLabel} disabled={disabled} onClick={onRemove} className={s.remove()}>\n          <RemoveIcon />\n        </button>\n      </span>\n    );\n  }\n  const { removable: _removable, value, selected, defaultSelected, onSelectedChange, size, className, ...rest } = props;\n  const s = chip({ size: size ?? group?.size });\n  if (group) {\n    if (value === undefined) throw new Error(\"Chip: a chip inside Chip.Group needs a `value`.\");\n    return <ToggleGroupPrimitive.Item value={value} className={s.base({ className })} {...rest} />;\n  }\n  return (\n    <TogglePrimitive.Root\n      pressed={selected}\n      defaultPressed={defaultSelected}\n      onPressedChange={onSelectedChange}\n      className={s.base({ className })}\n      {...rest}\n    />\n  );\n}\n\ntype GroupBase = Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"dir\"> &\n  ChipVariants & {\n    /**\n     * sm · md: the size of every chip of the group.\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** The group's accessible name — passed translated (\"Filter by format\"). */\n    label?: string;\n    /** The arrow keys that move: left / right (horizontal, a row) or up / down (vertical, a column). */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Arrow keys wrap from the last chip to the first (default `true`). */\n    loop?: boolean;\n    /** Disables every chip of the group. */\n    disabled?: boolean;\n  };\n\nexport type ChipGroupProps =\n  | (GroupBase & {\n      /** One choice: the chips behave as radios. */\n      type: \"single\";\n      /** The chosen value (controlled), `\"\"` when none. */\n      value?: string;\n      /** The value chosen at first, uncontrolled. */\n      defaultValue?: string;\n      /** Called with the new value on every choice. */\n      onValueChange?: (value: string) => void;\n      /** Keeps one chip selected: pressing the selected chip does not clear it (default `false`). */\n      required?: boolean;\n    })\n  | (GroupBase & {\n      /** Any number of choices: the chips are pressed buttons. */\n      type: \"multiple\";\n      /** The chosen values (controlled). */\n      value?: string[];\n      /** The values chosen at first, uncontrolled. */\n      defaultValue?: string[];\n      /** Called with the new values on every press. */\n      onValueChange?: (value: string[]) => void;\n      required?: never;\n    });\n\n/** Chips that choose together: `type` single · multiple, `value`/`defaultValue` + `onValueChange`. */\nexport function ChipGroup({ label, size, className, children, ...props }: ChipGroupProps) {\n  const s = chip({ size });\n  const context = React.useMemo(() => ({ size }), [size]);\n  const common = { \"aria-label\": label, className: s.group({ className }) };\n  let group: React.ReactNode;\n  if (props.type === \"single\") {\n    const { type: _type, value, defaultValue, onValueChange, required, ...rest } = props;\n    group = <SingleGroup {...rest} {...common} value={value} defaultValue={defaultValue} onValueChange={onValueChange} required={required}>{children}</SingleGroup>;\n  } else {\n    const { type: _type, required: _required, ...rest } = props;\n    group = (\n      <ToggleGroupPrimitive.Root type=\"multiple\" {...rest} {...common}>\n        {children}\n      </ToggleGroupPrimitive.Root>\n    );\n  }\n  return <ChipGroupContext.Provider value={context}>{group}</ChipGroupContext.Provider>;\n}\n\n/** Radix's single group, plus `required`: the value is held here so that an empty change can be refused. */\nfunction SingleGroup({\n  value,\n  defaultValue,\n  onValueChange,\n  required,\n  ...props\n}: Omit<GroupBase, \"size\" | \"label\"> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  required?: boolean;\n}) {\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const current = value ?? inner;\n  return (\n    <ToggleGroupPrimitive.Root\n      type=\"single\"\n      value={current}\n      onValueChange={(next) => {\n        if (required && !next) return;\n        if (value === undefined) setInner(next);\n        onValueChange?.(next);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** `Chip` (selectable, removable) and `Chip.Group` (single · multiple). */\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n","// The chip's parts and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(chipRecipe)`,\n// React Native reads the same classes into styles (native/chip.tsx). `data-[state=on]:` is the chosen chip.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const chipRecipe = defineRecipe({\n  slots: {\n    group: \"flex flex-wrap items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n    base:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-sm border font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 \" +\n      \"border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg \" +\n      \"data-[state=on]:border-accent data-[state=on]:bg-accent-soft data-[state=on]:text-fg\",\n    remove:\n      \"-mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    size: { sm: { base: \"h-7 px-3 text-xs\" }, md: { base: \"h-9 px-3.5 text-xs\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n"],"mappings":"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","names":["_removable","size","className","rest","s"]}
+{"version":3,"sources":["../src/chip/chip.tsx","../src/chip/recipe.ts"],"sourcesContent":["// Client (a context). A chip is a pressable pill: alone it is a Radix Toggle (aria-pressed), inside `Chip.Group` an\n// item of a Radix Toggle Group (roving focus with the arrows; `single` = radio semantics, `multiple` = pressed\n// buttons). A `removable` chip is a static label with its own remove button (two buttons cannot nest).\nimport { Toggle as TogglePrimitive, ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useRouteBinding } from \"../router\";\nimport { chipRecipe } from \"./recipe\";\n\nexport const chip = tv(chipRecipe);\n\nexport type ChipVariants = VariantProps<typeof chip>;\n\ntype GroupContext = { size: ChipVariants[\"size\"] };\nconst ChipGroupContext = React.createContext<GroupContext | null>(null);\n\nfunction RemoveIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" aria-hidden>\n      <path d=\"M18 6 6 18M6 6l12 12\" />\n    </svg>\n  );\n}\n\ntype ToggleChipProps = Omit<React.ComponentProps<\"button\">, \"value\" | \"defaultValue\"> &\n  ChipVariants & {\n    /**\n     * sm · md (inside `Chip.Group`, the group's size by default).\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** Inside `Chip.Group`: the value this chip stands for (required there, ignored alone). */\n    value?: string;\n    /** Alone: pressed or not (`defaultSelected` uncontrolled), `onSelectedChange` on every press. */\n    selected?: boolean;\n    /** Alone: pressed at first, uncontrolled. */\n    defaultSelected?: boolean;\n    /** Alone: called with the new state on every press. */\n    onSelectedChange?: (selected: boolean) => void;\n    /** A pressable chip (the default); `true` makes it a static chip with a remove button. */\n    removable?: false;\n  };\n\ntype RemovableChipProps = Omit<React.ComponentProps<\"span\">, \"onSelect\"> &\n  ChipVariants & {\n    /** A static chip (a chosen tag, an applied filter) with a remove button. */\n    removable: true;\n    /** The accessible name of the remove button — passed translated, e.g. \"Remove #night\". */\n    removeLabel: string;\n    /** Runs when the remove button is pressed. */\n    onRemove: () => void;\n    /** Disables the remove button. */\n    disabled?: boolean;\n  };\n\nexport type ChipProps = ToggleChipProps | RemovableChipProps;\n\n/** A selectable pill (`selected` / `onSelectedChange`), an item of `Chip.Group` (`value`), or `removable`. */\nfunction ChipBase(props: ChipProps) {\n  const group = React.useContext(ChipGroupContext);\n  if (props.removable) {\n    const { removable: _removable, removeLabel, onRemove, disabled, size, className, children, ...rest } = props;\n    const s = chip({ size: size ?? group?.size });\n    return (\n      <span data-removable=\"\" className={s.base({ className })} {...rest}>\n        {children}\n        <button type=\"button\" aria-label={removeLabel} title={removeLabel} disabled={disabled} onClick={onRemove} className={s.remove()}>\n          <RemoveIcon />\n        </button>\n      </span>\n    );\n  }\n  const { removable: _removable, value, selected, defaultSelected, onSelectedChange, size, className, ...rest } = props;\n  const s = chip({ size: size ?? group?.size });\n  if (group) {\n    if (value === undefined) throw new Error(\"Chip: a chip inside Chip.Group needs a `value`.\");\n    return <ToggleGroupPrimitive.Item value={value} className={s.base({ className })} {...rest} />;\n  }\n  return (\n    <TogglePrimitive.Root\n      pressed={selected}\n      defaultPressed={defaultSelected}\n      onPressedChange={onSelectedChange}\n      className={s.base({ className })}\n      {...rest}\n    />\n  );\n}\n\ntype GroupBase = Omit<React.ComponentProps<\"div\">, \"defaultValue\" | \"dir\"> &\n  ChipVariants & {\n    /**\n     * sm · md: the size of every chip of the group.\n     * @default \"md\"\n     */\n    size?: ChipVariants[\"size\"];\n    /** The group's accessible name — passed translated (\"Filter by format\"). */\n    label?: string;\n    /** The arrow keys that move: left / right (horizontal, a row) or up / down (vertical, a column). */\n    orientation?: \"horizontal\" | \"vertical\";\n    /** Arrow keys wrap from the last chip to the first (default `true`). */\n    loop?: boolean;\n    /** Disables every chip of the group. */\n    disabled?: boolean;\n  };\n\nexport type ChipGroupProps =\n  | (GroupBase & {\n      /** One choice: the chips behave as radios. */\n      type: \"single\";\n      /** The chosen value (controlled), `\"\"` when none. */\n      value?: string;\n      /** The value chosen at first, uncontrolled. */\n      defaultValue?: string;\n      /** Called with the new value on every choice. */\n      onValueChange?: (value: string) => void;\n      /** Keeps one chip selected: pressing the selected chip does not clear it (default `false`). */\n      required?: boolean;\n      /** Binds the choice to this search parameter of the URL (`?type=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */\n      routeKey?: string;\n      /** The values the parameter may hold (the chips' `value`s). */\n      routeValues?: readonly string[];\n    })\n  | (GroupBase & {\n      /** Any number of choices: the chips are pressed buttons. */\n      type: \"multiple\";\n      /** The chosen values (controlled). */\n      value?: string[];\n      /** The values chosen at first, uncontrolled. */\n      defaultValue?: string[];\n      /** Called with the new values on every press. */\n      onValueChange?: (value: string[]) => void;\n      required?: never;\n      routeKey?: never;\n      routeValues?: never;\n    });\n\n/** Chips that choose together: `type` single · multiple, `value`/`defaultValue` + `onValueChange`. */\nexport function ChipGroup({ label, size, className, children, ...props }: ChipGroupProps) {\n  const single = props.type === \"single\" ? props : undefined;\n  const routed = useRouteBinding(single?.routeKey, single?.routeValues, { value: single?.value, defaultValue: single?.defaultValue, onValueChange: single?.onValueChange });\n  const s = chip({ size });\n  const context = React.useMemo(() => ({ size }), [size]);\n  const common = { \"aria-label\": label, className: s.group({ className }) };\n  let group: React.ReactNode;\n  if (props.type === \"single\") {\n    const { type: _type, value: _value, defaultValue: _defaultValue, onValueChange: _onValueChange, required, routeKey: _routeKey, routeValues: _routeValues, ...rest } = props;\n    group = <SingleGroup {...rest} {...common} value={routed.value} defaultValue={routed.defaultValue} onValueChange={routed.onValueChange} required={required}>{children}</SingleGroup>;\n  } else {\n    const { type: _type, required: _required, ...rest } = props;\n    group = (\n      <ToggleGroupPrimitive.Root type=\"multiple\" {...rest} {...common}>\n        {children}\n      </ToggleGroupPrimitive.Root>\n    );\n  }\n  return <ChipGroupContext.Provider value={context}>{group}</ChipGroupContext.Provider>;\n}\n\n/** Radix's single group, plus `required`: the value is held here so that an empty change can be refused. */\nfunction SingleGroup({\n  value,\n  defaultValue,\n  onValueChange,\n  required,\n  ...props\n}: Omit<GroupBase, \"size\" | \"label\"> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  required?: boolean;\n}) {\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const current = value ?? inner;\n  return (\n    <ToggleGroupPrimitive.Root\n      type=\"single\"\n      value={current}\n      onValueChange={(next) => {\n        if (required && !next) return;\n        if (value === undefined) setInner(next);\n        onValueChange?.(next);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** `Chip` (selectable, removable) and `Chip.Group` (single · multiple). */\nexport const Chip = Object.assign(ChipBase, { Group: ChipGroup });\n","// The chip's parts and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(chipRecipe)`,\n// React Native reads the same classes into styles (native/chip.tsx). `data-[state=on]:` is the chosen chip.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const chipRecipe = defineRecipe({\n  slots: {\n    group: \"flex flex-wrap items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\",\n    base:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-sm border font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 \" +\n      \"border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg \" +\n      \"data-[state=on]:border-accent data-[state=on]:bg-accent-soft data-[state=on]:text-fg\",\n    remove:\n      \"-mr-1.5 inline-flex h-6 w-6 items-center justify-center rounded-full text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    size: { sm: { base: \"h-7 px-3 text-xs\" }, md: { base: \"h-9 px-3.5 text-xs\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n"],"mappings":";;;;;;;;;AAGA,SAAS,UAAU,iBAAiB,eAAe,4BAA4B;AAC/E,YAAY,WAAW;AACvB,SAAS,UAA6B;;;ACD/B,IAAM,aAAa,aAAa;AAAA,EACrC,OAAO;AAAA,IACL,OAAO;AAAA,IACP,MACE;AAAA,IAIF,QACE;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,EAAE,MAAM,mBAAmB,GAAG,IAAI,EAAE,MAAM,qBAAqB,EAAE;AAAA,EAC/E;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;;ADAK,cA6CA,YA7CA;AAVC,IAAM,OAAO,GAAG,UAAU;AAKjC,IAAM,mBAAyB,oBAAmC,IAAI;AAEtE,SAAS,aAAa;AACpB,SACE,oBAAC,SAAI,SAAQ,aAAY,WAAU,eAAc,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,eAAW,MACpI,8BAAC,UAAK,GAAE,wBAAuB,GACjC;AAEJ;AAoCA,SAAS,SAAS,OAAkB;AAClC,QAAM,QAAc,iBAAW,gBAAgB;AAC/C,MAAI,MAAM,WAAW;AACnB,UAAM,EAAE,WAAWA,aAAY,aAAa,UAAU,UAAU,MAAAC,OAAM,WAAAC,YAAW,UAAU,GAAGC,MAAK,IAAI;AACvG,UAAMC,KAAI,KAAK,EAAE,MAAMH,SAAQ,OAAO,KAAK,CAAC;AAC5C,WACE,qBAAC,UAAK,kBAAe,IAAG,WAAWG,GAAE,KAAK,EAAE,WAAAF,WAAU,CAAC,GAAI,GAAGC,OAC3D;AAAA;AAAA,MACD,oBAAC,YAAO,MAAK,UAAS,cAAY,aAAa,OAAO,aAAa,UAAoB,SAAS,UAAU,WAAWC,GAAE,OAAO,GAC5H,8BAAC,cAAW,GACd;AAAA,OACF;AAAA,EAEJ;AACA,QAAM,EAAE,WAAW,YAAY,OAAO,UAAU,iBAAiB,kBAAkB,MAAM,WAAW,GAAG,KAAK,IAAI;AAChH,QAAM,IAAI,KAAK,EAAE,MAAM,QAAQ,OAAO,KAAK,CAAC;AAC5C,MAAI,OAAO;AACT,QAAI,UAAU,OAAW,OAAM,IAAI,MAAM,iDAAiD;AAC1F,WAAO,oBAAC,qBAAqB,MAArB,EAA0B,OAAc,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,MAAM;AAAA,EAC9F;AACA,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,iBAAiB;AAAA,MACjB,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA;AAAA,EACN;AAEJ;AAmDO,SAAS,UAAU,EAAE,OAAO,MAAM,WAAW,UAAU,GAAG,MAAM,GAAmB;AACxF,QAAM,SAAS,MAAM,SAAS,WAAW,QAAQ;AACjD,QAAM,SAAS,gBAAgB,QAAQ,UAAU,QAAQ,aAAa,EAAE,OAAO,QAAQ,OAAO,cAAc,QAAQ,cAAc,eAAe,QAAQ,cAAc,CAAC;AACxK,QAAM,IAAI,KAAK,EAAE,KAAK,CAAC;AACvB,QAAM,UAAgB,cAAQ,OAAO,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC;AACtD,QAAM,SAAS,EAAE,cAAc,OAAO,WAAW,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE;AACxE,MAAI;AACJ,MAAI,MAAM,SAAS,UAAU;AAC3B,UAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,cAAc,eAAe,eAAe,gBAAgB,UAAU,UAAU,WAAW,aAAa,cAAc,GAAG,KAAK,IAAI;AACtK,YAAQ,oBAAC,eAAa,GAAG,MAAO,GAAG,QAAQ,OAAO,OAAO,OAAO,cAAc,OAAO,cAAc,eAAe,OAAO,eAAe,UAAqB,UAAS;AAAA,EACxK,OAAO;AACL,UAAM,EAAE,MAAM,OAAO,UAAU,WAAW,GAAG,KAAK,IAAI;AACtD,YACE,oBAAC,qBAAqB,MAArB,EAA0B,MAAK,YAAY,GAAG,MAAO,GAAG,QACtD,UACH;AAAA,EAEJ;AACA,SAAO,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,SAAU,iBAAM;AAC3D;AAGA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAKG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAU,eAAS,gBAAgB,EAAE;AAC3D,QAAM,UAAU,SAAS;AACzB,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,MACP,eAAe,CAAC,SAAS;AACvB,YAAI,YAAY,CAAC,KAAM;AACvB,YAAI,UAAU,OAAW,UAAS,IAAI;AACtC,wBAAgB,IAAI;AAAA,MACtB;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,IAAM,OAAO,OAAO,OAAO,UAAU,EAAE,OAAO,UAAU,CAAC;","names":["_removable","size","className","rest","s"]}

package/dist/choice-grid.d.ts

@@ -53,6 +53,10 @@ type ChoiceGridProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"
     defaultValue?: string;
     /** Makes the grid a radio group: called with the id chosen by click, Enter, Space or the arrow keys. */
     onValueChange?: (id: string) => void;
+    /** Binds the choice to this search parameter of the URL (`?type=…`): the URL is the state. Without it the state is local — only for an ephemeral choice. */
+    routeKey?: string;
+    /** The ids the parameter may hold; the first is the default unless `defaultValue` says otherwise. */
+    routeValues?: readonly string[];
     /** The app's link component for the tiles' internal `href`s (Next's `Link`); an `<a>` otherwise. */
     linkAs?: LinkComponent;
     /**
@@ -79,6 +83,6 @@ type ChoiceGridProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"
  * and choose, Home/End jump, the chosen tile is marked. With `href` on the items, a list of links. Otherwise a list
  * named by `label` that presents the line-up.
  */
-declare function ChoiceGrid({ label, items, tag, caption, prompt, value, defaultValue, onValueChange, linkAs, columns, variant, brand, animated, className, style, ...props }: ChoiceGridProps): React.JSX.Element;
+declare function ChoiceGrid({ label, items, tag, caption, prompt, value: valueProp, defaultValue: defaultValueProp, onValueChange: onValueChangeProp, routeKey, routeValues, linkAs, columns, variant, brand, animated, className, style, ...props }: ChoiceGridProps): React.JSX.Element;
 
 export { ChoiceGrid, type ChoiceGridProps, type ChoiceItem };