@krizaka/ui 3.36.0 → 3.37.0

package/registry/app-shell.json

@@ -368,7 +368,7 @@
   "files": [
     {
       "path": "app-shell/app-shell.tsx",
-      "content": "// 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-full aria-[current=page]:before:bg-accent \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0 \" +\n      \"[[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-full bg-accent px-1.5 text-[11px] font-bold text-on-accent \" +\n      \"[[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col [[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"
+      "content": "// 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"
     },
     {
       "path": "app-shell/index.ts",

package/registry/badge.json

@@ -251,7 +251,7 @@
     },
     {
       "path": "badge/recipe.ts",
-      "content": "// The badge's tones and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(badgeRecipe)`,\n// React Native reads the same classes into styles (native/badge.tsx). Status tones are soft (a tint, a coloured dot, a\n// text role): the invariant status tokens are too light to carry small text on a light surface, or to sit under white\n// text (WCAG AA).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const badgeRecipe = defineRecipe({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full font-semibold uppercase tracking-wider\",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n"
+      "content": "// The badge's tones and sizes, written once as classes of the Krizaka tokens: the web wears them with `tv(badgeRecipe)`,\n// React Native reads the same classes into styles (native/badge.tsx). Status tones are soft (a tint, a coloured dot, a\n// text role): the invariant status tokens are too light to carry small text on a light surface, or to sit under white\n// text (WCAG AA).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const badgeRecipe = defineRecipe({\n  base: \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm font-semibold \",\n  variants: {\n    tone: {\n      neutral: \"bg-surface-3 text-fg-secondary\",\n      accent: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40 [&>[data-dot]]:bg-accent\",\n      success: \"bg-success/15 text-fg ring-1 ring-inset ring-success/40 [&>[data-dot]]:bg-success\",\n      warning: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40 [&>[data-dot]]:bg-warning\",\n      danger: \"bg-danger/15 text-fg ring-1 ring-inset ring-danger/40 [&>[data-dot]]:bg-danger\",\n      /** On a media: veil and text invariant, identical in both themes. */\n      scrim: \"bg-scrim text-fg-on-media backdrop-blur-md\",\n    },\n    size: { sm: \"px-2 py-0.5 text-[10px]\", md: \"px-2.5 py-1 text-[11px]\" },\n    pulse: { true: \"[&>[data-dot]]:motion-safe:animate-pulse\" },\n  },\n  defaultVariants: { tone: \"neutral\", size: \"sm\" },\n});\n"
     },
     {
       "path": "meta.ts",

package/registry/card.json

@@ -437,7 +437,7 @@
     },
     {
       "path": "card/recipe.ts",
-      "content": "// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the hover's tint) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"duration-150 hover:border-border-strong hover:bg-surface-2\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n"
+      "content": "// The card's parts, radii, tones and paddings, written once as classes of the Krizaka tokens: the web wears them with\n// `tv(cardRecipe)`, React Native reads the same classes into styles (native/card.tsx): a part of the card that exists only\n// on the web (the hover's tint) is simply ignored there.\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const cardRecipe = defineRecipe({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"font-mono text-[11.5px] text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-glass border-glass-border\" } },\n    interactive: { true: { root: \"duration-150 hover:border-border-strong hover:bg-surface-2\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n"
     },
     {
       "path": "meta.ts",

package/registry/chip-row.json

@@ -122,7 +122,7 @@
   "files": [
     {
       "path": "chip-row/chip-row.tsx",
-      "content": "// Client (arrow-key focus only). A row of chip links that scrolls sideways with scroll-snap on a phone (the trailing edge\n// fades, no scrollbar) and wraps from `md`: an audience picker, the filters of a page. Each item is a `ChipLink`-style\n// link at least 44 px high; the current one carries `aria-current`. Tab goes through the links; ← → Home End move between them.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { chipVariants } from \"../chip-link\";\n\nexport const chipRow = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-2\",\n    hint: \"text-xs text-fg-muted\",\n    list:\n      \"m-0 flex list-none snap-x snap-proximity gap-2 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n      \"[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)] md:flex-wrap md:overflow-visible md:pb-0 md:[mask-image:none]\",\n    item: \"snap-start\",\n    badge: \"rounded-full bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold leading-none text-fg-muted\",\n  },\n});\n\nconst s = chipRow();\n\nexport type ChipRowProps = Omit<React.ComponentProps<\"nav\">, \"aria-label\"> & {\n  /** What the links choose among (\"For whom?\"): the row's accessible name, passed translated. */\n  label: string;\n  /** A line under the label that says how to choose; read with the row. */\n  hint?: React.ReactNode;\n};\n\n/** A scroll-snap row of chip links; wraps from `md`. Items: `ChipRow.Item`. */\nfunction ChipRowRoot({ label, hint, className, children, ...props }: ChipRowProps) {\n  const id = React.useId();\n  const list = React.useRef<HTMLUListElement>(null);\n  const move = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    const keys = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n    if (!keys.includes(event.key)) return;\n    const links = [...(list.current?.querySelectorAll<HTMLElement>(\"a[href],button:not([disabled])\") ?? [])];\n    const at = links.indexOf(event.target as HTMLElement);\n    if (at < 0) return;\n    const last = links.length - 1;\n    const to = event.key === \"Home\" ? 0 : event.key === \"End\" ? last : Math.min(last, Math.max(0, at + (event.key === \"ArrowRight\" ? 1 : -1)));\n    event.preventDefault();\n    links[to]?.focus();\n    links[to]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  };\n  return (\n    <nav aria-label={label} aria-describedby={hint ? `${id}-hint` : undefined} className={s.root({ className })} {...props}>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      <ul ref={list} className={s.list()} onKeyDown={move}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport type ChipRowItemProps = React.ComponentProps<\"a\"> & {\n  /** The current choice: the accent and `aria-current`. */\n  selected?: boolean;\n  /** What `aria-current` says when selected.\n   * @default \"page\" */\n  current?: \"page\" | \"true\";\n  /** A small tag after the label (\"Soon\"), passed translated. */\n  badge?: React.ReactNode;\n  /** Renders your router's `<Link>` as the chip; put the label and the badge in your link's children yourself. */\n  asChild?: boolean;\n};\n\n/** One link of the row. */\nfunction ChipRowItem({ selected = false, current = \"page\", badge, asChild, className, children, ...props }: ChipRowItemProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <li className={s.item()}>\n      <Comp\n        data-state={selected ? \"on\" : \"off\"}\n        aria-current={selected ? current : undefined}\n        className={chipVariants({ selected, className: [\"min-h-11\", className] })}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {badge ? <span className={s.badge()}>{badge}</span> : null}\n          </>\n        )}\n      </Comp>\n    </li>\n  );\n}\n\nexport const ChipRow = Object.assign(ChipRowRoot, { Item: ChipRowItem });\n"
+      "content": "// Client (arrow-key focus only). A row of chip links that scrolls sideways with scroll-snap on a phone (the trailing edge\n// fades, no scrollbar) and wraps from `md`: an audience picker, the filters of a page. Each item is a `ChipLink`-style\n// link at least 44 px high; the current one carries `aria-current`. Tab goes through the links; ← → Home End move between them.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { chipVariants } from \"../chip-link\";\n\nexport const chipRow = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-2\",\n    hint: \"text-xs text-fg-muted\",\n    list:\n      \"m-0 flex list-none snap-x snap-proximity gap-2 overflow-x-auto p-0 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n      \"[mask-image:linear-gradient(to_right,#000_calc(100%-2rem),transparent)] md:flex-wrap md:overflow-visible md:pb-0 md:[mask-image:none]\",\n    item: \"snap-start\",\n    badge: \"rounded-sm bg-surface-3 px-1.5 py-0.5 text-[0.625rem] font-semibold leading-none text-fg-muted\",\n  },\n});\n\nconst s = chipRow();\n\nexport type ChipRowProps = Omit<React.ComponentProps<\"nav\">, \"aria-label\"> & {\n  /** What the links choose among (\"For whom?\"): the row's accessible name, passed translated. */\n  label: string;\n  /** A line under the label that says how to choose; read with the row. */\n  hint?: React.ReactNode;\n};\n\n/** A scroll-snap row of chip links; wraps from `md`. Items: `ChipRow.Item`. */\nfunction ChipRowRoot({ label, hint, className, children, ...props }: ChipRowProps) {\n  const id = React.useId();\n  const list = React.useRef<HTMLUListElement>(null);\n  const move = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    const keys = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n    if (!keys.includes(event.key)) return;\n    const links = [...(list.current?.querySelectorAll<HTMLElement>(\"a[href],button:not([disabled])\") ?? [])];\n    const at = links.indexOf(event.target as HTMLElement);\n    if (at < 0) return;\n    const last = links.length - 1;\n    const to = event.key === \"Home\" ? 0 : event.key === \"End\" ? last : Math.min(last, Math.max(0, at + (event.key === \"ArrowRight\" ? 1 : -1)));\n    event.preventDefault();\n    links[to]?.focus();\n    links[to]?.scrollIntoView?.({ block: \"nearest\", inline: \"nearest\" });\n  };\n  return (\n    <nav aria-label={label} aria-describedby={hint ? `${id}-hint` : undefined} className={s.root({ className })} {...props}>\n      {hint ? (\n        <p id={`${id}-hint`} className={s.hint()}>\n          {hint}\n        </p>\n      ) : null}\n      <ul ref={list} className={s.list()} onKeyDown={move}>\n        {children}\n      </ul>\n    </nav>\n  );\n}\n\nexport type ChipRowItemProps = React.ComponentProps<\"a\"> & {\n  /** The current choice: the accent and `aria-current`. */\n  selected?: boolean;\n  /** What `aria-current` says when selected.\n   * @default \"page\" */\n  current?: \"page\" | \"true\";\n  /** A small tag after the label (\"Soon\"), passed translated. */\n  badge?: React.ReactNode;\n  /** Renders your router's `<Link>` as the chip; put the label and the badge in your link's children yourself. */\n  asChild?: boolean;\n};\n\n/** One link of the row. */\nfunction ChipRowItem({ selected = false, current = \"page\", badge, asChild, className, children, ...props }: ChipRowItemProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return (\n    <li className={s.item()}>\n      <Comp\n        data-state={selected ? \"on\" : \"off\"}\n        aria-current={selected ? current : undefined}\n        className={chipVariants({ selected, className: [\"min-h-11\", className] })}\n        {...props}\n      >\n        {asChild ? (\n          children\n        ) : (\n          <>\n            {children}\n            {badge ? <span className={s.badge()}>{badge}</span> : null}\n          </>\n        )}\n      </Comp>\n    </li>\n  );\n}\n\nexport const ChipRow = Object.assign(ChipRowRoot, { Item: ChipRowItem });\n"
     },
     {
       "path": "chip-row/index.ts",

package/registry/chip.json

@@ -412,7 +412,7 @@
     },
     {
       "path": "chip/recipe.ts",
-      "content": "// 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-full 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"
+      "content": "// 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"
     },
     {
       "path": "meta.ts",

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.36.0",
+  "version": "3.37.0",
   "templatePurposes": {
     "convince": {
       "title": "Convince",
@@ -3110,7 +3110,7 @@
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.36.0",
+        "@krizaka/tokens@^3.37.0",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -3549,7 +3549,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.36.0",
+        "@krizaka/tokens@^3.37.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4212,7 +4212,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.36.0",
+        "@krizaka/tokens@^3.37.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -4555,7 +4555,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.36.0",
+        "@krizaka/tokens@^3.37.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],

package/registry/language-switch.json

@@ -167,7 +167,7 @@
     },
     {
       "path": "language-switch/language-switch.tsx",
-      "content": "// Client (a disclosure). The one language switch of the family: a globe and the current code (FR), opening a short list of\n// the languages by their own names — links with `hreflang` that keep the page. A disclosure, not a Radix menu: the items\n// are navigation, and the bar must not pay for a menu engine (Escape, outside press, focus-out and the arrows are here).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport type { Language } from \"./href\";\n\nexport const languageSwitch = tv({\n  slots: {\n    root: \"relative inline-flex\",\n    trigger:\n      \"group/language inline-flex h-9 shrink-0 select-none items-center gap-1.5 rounded-full px-2.5 font-mono text-xs font-semibold text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg aria-expanded:bg-surface-3 aria-expanded:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    glyph: \"h-4 w-4 shrink-0\",\n    panel:\n      \"kz-pop absolute right-0 top-full z-50 mt-2 grid min-w-44 max-w-[calc(100vw-2rem)] gap-0.5 rounded-xl border border-border-default bg-surface-1 p-1.5 shadow-lg\",\n    heading: \"px-2.5 pb-1 pt-1.5 text-[11px] font-semibold text-fg-secondary\",\n    item:\n      \"flex min-h-9 items-center justify-between gap-6 rounded-lg px-2.5 py-2 text-sm font-medium text-fg no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring aria-[current=true]:bg-accent-soft\",\n    check: \"h-4 w-4 shrink-0 text-fg-accent\",\n    inline: \"inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface-2/60 p-0.5\",\n    inlineLink:\n      \"inline-flex min-h-9 items-center rounded-full px-3 text-sm font-medium text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=true]:bg-surface-3 aria-[current=true]:text-fg\",\n  },\n});\nconst s = languageSwitch();\n\nexport type LanguageSwitchProps = {\n  /** The control's accessible name (“Language”, “Langue”) — passed translated. */\n  label: string;\n  /** The code of the page's language (`fr`). */\n  current: string;\n  /** The languages offered, each with its name in its own language and the address of the same page (`languagesFor`). */\n  languages: readonly Language[];\n  /**\n   * `menu`: a globe and the code, opening a menu (the bar). `inline`: every language in a row (a mobile panel, a settings page).\n   * @default \"menu\"\n   */\n  variant?: \"menu\" | \"inline\";\n  /** Your router's `<Link>` (it receives `href`, `hrefLang`, `lang`). A plain `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** Opens the menu at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the control. */\n  className?: string;\n};\n\nconst Globe = ({ className }: { className?: string }) => (\n  <svg viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <circle cx=\"12\" cy=\"12\" r=\"9\" />\n    <path d=\"M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z\" />\n  </svg>\n);\n\n/**\n * The language switch, the same on every Krizaka site and app: a compact control — a globe and the current code\n * (`FR`) — that opens a menu of the languages named in their own language (Français · English), each a link with\n * `hreflang` to the same page. It shows the language you are in, never the “other” one. `variant=\"inline\"` lays the\n * languages in a row for a phone's panel or a settings page.\n */\nexport function LanguageSwitch({ label, current, languages, variant = \"menu\", linkAs, defaultOpen = false, className }: LanguageSwitchProps) {\n  const Link = linkAs ?? \"a\";\n  const id = React.useId();\n  const [open, setOpen] = React.useState(defaultOpen);\n  const root = React.useRef<HTMLDivElement>(null);\n  const trigger = React.useRef<HTMLButtonElement>(null);\n  const active = languages.find((l) => l.code === current);\n\n  React.useEffect(() => {\n    if (!open) return;\n    // A press outside closes it (the page under it stays usable).\n    const onPress = (e: PointerEvent) => {\n      if (e.target instanceof Node && !root.current?.contains(e.target)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onPress);\n    return () => document.removeEventListener(\"pointerdown\", onPress);\n  }, [open]);\n\n  if (variant === \"inline\") {\n    return (\n      <div role=\"group\" aria-label={label} className={s.inline({ className })}>\n        {languages.map((l) => (\n          <Link key={l.code} href={l.href} hrefLang={l.code} lang={l.code} aria-current={l.code === current ? \"true\" : undefined} className={s.inlineLink()}>\n            {l.name}\n          </Link>\n        ))}\n      </div>\n    );\n  }\n\n  const links = () => [...(root.current?.querySelectorAll<HTMLElement>(\"[data-language]\") ?? [])];\n  const close = (focus: boolean) => {\n    setOpen(false);\n    if (focus) trigger.current?.focus();\n  };\n  return (\n    <div\n      ref={root}\n      className={s.root({ className })}\n      onKeyDown={(e) => {\n        if (e.key === \"Escape\" && open) {\n          e.stopPropagation();\n          close(true);\n        }\n        if (open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Home\" || e.key === \"End\")) {\n          e.preventDefault();\n          const all = links();\n          const at = all.indexOf(document.activeElement as HTMLElement);\n          const next = e.key === \"Home\" ? 0 : e.key === \"End\" ? all.length - 1 : (at + (e.key === \"ArrowDown\" ? 1 : -1) + all.length) % all.length;\n          all[next]?.focus();\n        }\n      }}\n      // Tab out of the switch closes it.\n      onBlur={(e) => {\n        if (open && !root.current?.contains(e.relatedTarget as Node | null)) setOpen(false);\n      }}\n    >\n      <button\n        ref={trigger}\n        type=\"button\"\n        aria-label={active ? `${label}: ${active.name}` : label}\n        aria-expanded={open}\n        aria-controls={id}\n        onClick={() => setOpen(!open)}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowDown\") {\n            e.preventDefault();\n            setOpen(true);\n            requestAnimationFrame(() => (links().find((l) => l.getAttribute(\"aria-current\") === \"true\") ?? links()[0])?.focus());\n          }\n        }}\n        className={s.trigger()}\n      >\n        <Globe className={s.glyph()} />\n        {/* Drawn by CSS: the code is no text of the button, so its name (`Language: English`) never mismatches what is visible. */}\n        <span aria-hidden data-code={current} className=\"after:content-[attr(data-code)]\" />\n      </button>\n      {open && (\n        <div id={id} role=\"group\" aria-label={label} className={s.panel()}>\n          <p aria-hidden className={s.heading()}>\n            {label}\n          </p>\n          {languages.map((l) => (\n            <Link key={l.code} data-language=\"\" href={l.href} hrefLang={l.code} lang={l.code} aria-current={l.code === current ? \"true\" : undefined} className={s.item()}>\n              {l.name}\n              {l.code === current && (\n                <svg viewBox=\"0 0 24 24\" className={s.check()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                  <path d=\"M20 6 9 17l-5-5\" />\n                </svg>\n              )}\n            </Link>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"
+      "content": "// Client (a disclosure). The one language switch of the family: a globe and the current code (FR), opening a short list of\n// the languages by their own names — links with `hreflang` that keep the page. A disclosure, not a Radix menu: the items\n// are navigation, and the bar must not pay for a menu engine (Escape, outside press, focus-out and the arrows are here).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport type { Language } from \"./href\";\n\nexport const languageSwitch = tv({\n  slots: {\n    root: \"relative inline-flex\",\n    trigger:\n      \"group/language inline-flex h-9 shrink-0 select-none items-center gap-1.5 rounded-sm px-2.5 font-mono text-xs font-semibold text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg aria-expanded:bg-surface-3 aria-expanded:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    glyph: \"h-4 w-4 shrink-0\",\n    panel:\n      \"kz-pop absolute right-0 top-full z-50 mt-2 grid min-w-44 max-w-[calc(100vw-2rem)] gap-0.5 rounded-xl border border-border-default bg-surface-1 p-1.5 shadow-lg\",\n    heading: \"px-2.5 pb-1 pt-1.5 text-[11px] font-semibold text-fg-secondary\",\n    item:\n      \"flex min-h-9 items-center justify-between gap-6 rounded-lg px-2.5 py-2 text-sm font-medium text-fg no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring aria-[current=true]:bg-accent-soft\",\n    check: \"h-4 w-4 shrink-0 text-fg-accent\",\n    inline: \"inline-flex items-center gap-1 rounded-sm border border-border-subtle bg-surface-2/60 p-0.5\",\n    inlineLink:\n      \"inline-flex min-h-9 items-center rounded-sm px-3 text-sm font-medium text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=true]:bg-surface-3 aria-[current=true]:text-fg\",\n  },\n});\nconst s = languageSwitch();\n\nexport type LanguageSwitchProps = {\n  /** The control's accessible name (“Language”, “Langue”) — passed translated. */\n  label: string;\n  /** The code of the page's language (`fr`). */\n  current: string;\n  /** The languages offered, each with its name in its own language and the address of the same page (`languagesFor`). */\n  languages: readonly Language[];\n  /**\n   * `menu`: a globe and the code, opening a menu (the bar). `inline`: every language in a row (a mobile panel, a settings page).\n   * @default \"menu\"\n   */\n  variant?: \"menu\" | \"inline\";\n  /** Your router's `<Link>` (it receives `href`, `hrefLang`, `lang`). A plain `<a>` otherwise. */\n  linkAs?: React.ElementType;\n  /** Opens the menu at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the control. */\n  className?: string;\n};\n\nconst Globe = ({ className }: { className?: string }) => (\n  <svg viewBox=\"0 0 24 24\" className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <circle cx=\"12\" cy=\"12\" r=\"9\" />\n    <path d=\"M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9S14.5 18.4 12 21c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3Z\" />\n  </svg>\n);\n\n/**\n * The language switch, the same on every Krizaka site and app: a compact control — a globe and the current code\n * (`FR`) — that opens a menu of the languages named in their own language (Français · English), each a link with\n * `hreflang` to the same page. It shows the language you are in, never the “other” one. `variant=\"inline\"` lays the\n * languages in a row for a phone's panel or a settings page.\n */\nexport function LanguageSwitch({ label, current, languages, variant = \"menu\", linkAs, defaultOpen = false, className }: LanguageSwitchProps) {\n  const Link = linkAs ?? \"a\";\n  const id = React.useId();\n  const [open, setOpen] = React.useState(defaultOpen);\n  const root = React.useRef<HTMLDivElement>(null);\n  const trigger = React.useRef<HTMLButtonElement>(null);\n  const active = languages.find((l) => l.code === current);\n\n  React.useEffect(() => {\n    if (!open) return;\n    // A press outside closes it (the page under it stays usable).\n    const onPress = (e: PointerEvent) => {\n      if (e.target instanceof Node && !root.current?.contains(e.target)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onPress);\n    return () => document.removeEventListener(\"pointerdown\", onPress);\n  }, [open]);\n\n  if (variant === \"inline\") {\n    return (\n      <div role=\"group\" aria-label={label} className={s.inline({ className })}>\n        {languages.map((l) => (\n          <Link key={l.code} href={l.href} hrefLang={l.code} lang={l.code} aria-current={l.code === current ? \"true\" : undefined} className={s.inlineLink()}>\n            {l.name}\n          </Link>\n        ))}\n      </div>\n    );\n  }\n\n  const links = () => [...(root.current?.querySelectorAll<HTMLElement>(\"[data-language]\") ?? [])];\n  const close = (focus: boolean) => {\n    setOpen(false);\n    if (focus) trigger.current?.focus();\n  };\n  return (\n    <div\n      ref={root}\n      className={s.root({ className })}\n      onKeyDown={(e) => {\n        if (e.key === \"Escape\" && open) {\n          e.stopPropagation();\n          close(true);\n        }\n        if (open && (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Home\" || e.key === \"End\")) {\n          e.preventDefault();\n          const all = links();\n          const at = all.indexOf(document.activeElement as HTMLElement);\n          const next = e.key === \"Home\" ? 0 : e.key === \"End\" ? all.length - 1 : (at + (e.key === \"ArrowDown\" ? 1 : -1) + all.length) % all.length;\n          all[next]?.focus();\n        }\n      }}\n      // Tab out of the switch closes it.\n      onBlur={(e) => {\n        if (open && !root.current?.contains(e.relatedTarget as Node | null)) setOpen(false);\n      }}\n    >\n      <button\n        ref={trigger}\n        type=\"button\"\n        aria-label={active ? `${label}: ${active.name}` : label}\n        aria-expanded={open}\n        aria-controls={id}\n        onClick={() => setOpen(!open)}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowDown\") {\n            e.preventDefault();\n            setOpen(true);\n            requestAnimationFrame(() => (links().find((l) => l.getAttribute(\"aria-current\") === \"true\") ?? links()[0])?.focus());\n          }\n        }}\n        className={s.trigger()}\n      >\n        <Globe className={s.glyph()} />\n        {/* Drawn by CSS: the code is no text of the button, so its name (`Language: English`) never mismatches what is visible. */}\n        <span aria-hidden data-code={current} className=\"after:content-[attr(data-code)]\" />\n      </button>\n      {open && (\n        <div id={id} role=\"group\" aria-label={label} className={s.panel()}>\n          <p aria-hidden className={s.heading()}>\n            {label}\n          </p>\n          {languages.map((l) => (\n            <Link key={l.code} data-language=\"\" href={l.href} hrefLang={l.code} lang={l.code} aria-current={l.code === current ? \"true\" : undefined} className={s.item()}>\n              {l.name}\n              {l.code === current && (\n                <svg viewBox=\"0 0 24 24\" className={s.check()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                  <path d=\"M20 6 9 17l-5-5\" />\n                </svg>\n              )}\n            </Link>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"
     },
     {
       "path": "language-switch/meta.ts",

package/registry/map.json

@@ -1074,7 +1074,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.36.0",
+    "@krizaka/tokens@^3.37.0",
     "@protomaps/basemaps@5.7.2",
     "tailwind-variants@^3.3.1"
   ],

package/registry/meter.json

@@ -342,7 +342,7 @@
     },
     {
       "path": "meter/meter.tsx",
-      "content": "// Server-safe. A measure within a known range — a quota, a balance, a share — as opposed to the progress of a task.\n// `role=\"meter\"`, its value in words; thresholds turn it to warning then danger (or the reverse when high is good);\n// split into parts (90 % to the creator, 10 % to the platform) it becomes a stacked bar or ring with its legend: the\n// text version of what it draws.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const meter = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n    track: \"relative flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-surface-3\",\n    fill: \"h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none\",\n    legend: \"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary\",\n    swatch: \"inline-block h-2 w-2 shrink-0 rounded-full\",\n    ring: \"relative inline-flex shrink-0 items-center justify-center\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    size: { sm: { track: \"h-1.5\", ring: \"h-14 w-14\" }, md: { ring: \"h-24 w-24\" }, lg: { track: \"h-3\", ring: \"h-36 w-36\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The colour of a fill: by tone (thresholds) or by part (the accent, a neutral, accent-2, a lighter neutral). */\nconst BG = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" } as const;\nconst STROKE = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" } as const;\nconst PART_BG = [\"bg-accent\", \"bg-fg-secondary\", \"bg-accent-2\", \"bg-border-strong\"];\nconst PART_STROKE = [\"stroke-accent\", \"stroke-fg-secondary\", \"stroke-accent-2\", \"stroke-border-strong\"];\n\nexport interface MeterPart {\n  /** Its name (“To the creator”) — passed translated. */\n  label: string;\n  /** Its value, in the meter's unit. */\n  value: number;\n  /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */\n  valueText?: string;\n}\n\nexport type MeterProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */\n  label: string;\n  /** The value, between `min` and `max` (ignored with `parts`). */\n  value?: number;\n  /**\n   * The bottom of the range.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */\n  valueText?: string;\n  /**\n   * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with\n   * `optimum=\"high\"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.\n   */\n  thresholds?: { readonly low: number; readonly high: number };\n  /**\n   * Which end is good.\n   * @default \"low\"\n   */\n  optimum?: \"low\" | \"high\";\n  /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */\n  parts?: readonly MeterPart[];\n  /**\n   * bar · ring.\n   * @default \"bar\"\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * sm · md · lg: the bar's thickness, the ring's diameter.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Shows the label and the value above the bar. */\n  showLabel?: boolean;\n  /** A ring's centre: the value, a word. */\n  children?: React.ReactNode;\n};\n\n/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */\nexport function Meter({\n  label,\n  value = 0,\n  min = 0,\n  max = 100,\n  valueText,\n  thresholds,\n  optimum = \"low\",\n  parts,\n  variant = \"bar\",\n  size = \"md\",\n  showLabel,\n  className,\n  children,\n  ...props\n}: MeterProps) {\n  const s = meter({ size });\n  const span = max - min || 1;\n  const ratio = Math.min(1, Math.max(0, (value - min) / span));\n  const level = !thresholds ? \"ok\" : ratio >= thresholds.high ? (optimum === \"low\" ? \"danger\" : \"success\") : ratio >= thresholds.low ? \"warning\" : optimum === \"low\" ? \"success\" : \"danger\";\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round((p.value / span) * 100)} %` }));\n  const a11y = parts\n    ? { role: \"group\" as const, \"aria-label\": label }\n    : { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": min, \"aria-valuemax\": max, \"aria-valuenow\": Math.min(max, Math.max(min, value)), \"aria-valuetext\": words };\n  const legend = parts && (\n    <ul className={s.legend()}>\n      {shares.map((p) => (\n        <li key={p.i} className=\"flex items-center gap-1.5\">\n          <span aria-hidden className={[s.swatch(), PART_BG[p.i % PART_BG.length]].join(\" \")} />\n          <span className=\"text-fg\">{p.label}</span>\n          <span className=\"tabular-nums\">{p.words}</span>\n        </li>\n      ))}\n    </ul>\n  );\n\n  if (variant === \"ring\") {\n    const r = 44;\n    let offset = 0;\n    const arcs = parts\n      ? shares.map((p) => {\n          const arc = { cls: PART_STROKE[p.i % PART_STROKE.length]!, len: p.ratio * 100, start: offset };\n          offset += arc.len;\n          return arc;\n        })\n      : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];\n    return (\n      <div {...a11y} data-level={parts ? undefined : level} className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n        <div className={s.ring()}>\n          <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n            <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth=\"9\" className=\"stroke-border-default\" />\n            {arcs.map((a, i) => (\n              <circle\n                key={i}\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                fill=\"none\"\n                strokeWidth=\"9\"\n                pathLength={100}\n                strokeDasharray={`${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`}\n                strokeDashoffset={-a.start}\n                className={[a.cls, \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n              />\n            ))}\n          </svg>\n          {children !== undefined && <div className={s.center()}>{children}</div>}\n        </div>\n        {legend}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} data-level={parts ? undefined : level} className={s.root({ className })} {...props}>\n      {showLabel && (\n        <div aria-hidden className={s.header()}>\n          <span className={s.caption()}>{label}</span>\n          {!parts && <span className={s.figure()}>{words}</span>}\n        </div>\n      )}\n      <div aria-hidden className={s.track()}>\n        {parts ? (\n          shares.map((p) => <span key={p.i} className={[s.fill(), PART_BG[p.i % PART_BG.length]].join(\" \")} style={{ width: `${p.ratio * 100}%` }} />)\n        ) : (\n          <span className={[s.fill(), BG[level]].join(\" \")} style={{ width: `${ratio * 100}%` }} />\n        )}\n      </div>\n      {legend}\n    </div>\n  );\n}\n\nexport interface MeterValueProps {\n  /** The figure. */\n  value: React.ReactNode;\n  /** A word under it. */\n  caption?: React.ReactNode;\n}\n\n/** For the ring's centre when it shows a figure and a word. */\nexport function MeterValue({ value, caption }: MeterValueProps) {\n  return (\n    <>\n      <span className=\"font-display text-lg font-semibold text-fg tabular-nums\">{value}</span>\n      {caption && <span className=\"text-[10px] text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n"
+      "content": "// Server-safe. A measure within a known range — a quota, a balance, a share — as opposed to the progress of a task.\n// `role=\"meter\"`, its value in words; thresholds turn it to warning then danger (or the reverse when high is good);\n// split into parts (90 % to the creator, 10 % to the platform) it becomes a stacked bar or ring with its legend: the\n// text version of what it draws.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const meter = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n    track: \"relative flex h-2 w-full gap-0.5 overflow-hidden rounded-sm bg-surface-3\",\n    fill: \"h-full rounded-sm transition-[width] duration-700 motion-reduce:transition-none\",\n    legend: \"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary\",\n    swatch: \"inline-block h-2 w-2 shrink-0 rounded-full\",\n    ring: \"relative inline-flex shrink-0 items-center justify-center\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    size: { sm: { track: \"h-1.5\", ring: \"h-14 w-14\" }, md: { ring: \"h-24 w-24\" }, lg: { track: \"h-3\", ring: \"h-36 w-36\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The colour of a fill: by tone (thresholds) or by part (the accent, a neutral, accent-2, a lighter neutral). */\nconst BG = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" } as const;\nconst STROKE = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" } as const;\nconst PART_BG = [\"bg-accent\", \"bg-fg-secondary\", \"bg-accent-2\", \"bg-border-strong\"];\nconst PART_STROKE = [\"stroke-accent\", \"stroke-fg-secondary\", \"stroke-accent-2\", \"stroke-border-strong\"];\n\nexport interface MeterPart {\n  /** Its name (“To the creator”) — passed translated. */\n  label: string;\n  /** Its value, in the meter's unit. */\n  value: number;\n  /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */\n  valueText?: string;\n}\n\nexport type MeterProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */\n  label: string;\n  /** The value, between `min` and `max` (ignored with `parts`). */\n  value?: number;\n  /**\n   * The bottom of the range.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */\n  valueText?: string;\n  /**\n   * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with\n   * `optimum=\"high\"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.\n   */\n  thresholds?: { readonly low: number; readonly high: number };\n  /**\n   * Which end is good.\n   * @default \"low\"\n   */\n  optimum?: \"low\" | \"high\";\n  /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */\n  parts?: readonly MeterPart[];\n  /**\n   * bar · ring.\n   * @default \"bar\"\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * sm · md · lg: the bar's thickness, the ring's diameter.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Shows the label and the value above the bar. */\n  showLabel?: boolean;\n  /** A ring's centre: the value, a word. */\n  children?: React.ReactNode;\n};\n\n/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */\nexport function Meter({\n  label,\n  value = 0,\n  min = 0,\n  max = 100,\n  valueText,\n  thresholds,\n  optimum = \"low\",\n  parts,\n  variant = \"bar\",\n  size = \"md\",\n  showLabel,\n  className,\n  children,\n  ...props\n}: MeterProps) {\n  const s = meter({ size });\n  const span = max - min || 1;\n  const ratio = Math.min(1, Math.max(0, (value - min) / span));\n  const level = !thresholds ? \"ok\" : ratio >= thresholds.high ? (optimum === \"low\" ? \"danger\" : \"success\") : ratio >= thresholds.low ? \"warning\" : optimum === \"low\" ? \"success\" : \"danger\";\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round((p.value / span) * 100)} %` }));\n  const a11y = parts\n    ? { role: \"group\" as const, \"aria-label\": label }\n    : { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": min, \"aria-valuemax\": max, \"aria-valuenow\": Math.min(max, Math.max(min, value)), \"aria-valuetext\": words };\n  const legend = parts && (\n    <ul className={s.legend()}>\n      {shares.map((p) => (\n        <li key={p.i} className=\"flex items-center gap-1.5\">\n          <span aria-hidden className={[s.swatch(), PART_BG[p.i % PART_BG.length]].join(\" \")} />\n          <span className=\"text-fg\">{p.label}</span>\n          <span className=\"tabular-nums\">{p.words}</span>\n        </li>\n      ))}\n    </ul>\n  );\n\n  if (variant === \"ring\") {\n    const r = 44;\n    let offset = 0;\n    const arcs = parts\n      ? shares.map((p) => {\n          const arc = { cls: PART_STROKE[p.i % PART_STROKE.length]!, len: p.ratio * 100, start: offset };\n          offset += arc.len;\n          return arc;\n        })\n      : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];\n    return (\n      <div {...a11y} data-level={parts ? undefined : level} className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n        <div className={s.ring()}>\n          <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n            <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth=\"9\" className=\"stroke-border-default\" />\n            {arcs.map((a, i) => (\n              <circle\n                key={i}\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                fill=\"none\"\n                strokeWidth=\"9\"\n                pathLength={100}\n                strokeDasharray={`${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`}\n                strokeDashoffset={-a.start}\n                className={[a.cls, \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n              />\n            ))}\n          </svg>\n          {children !== undefined && <div className={s.center()}>{children}</div>}\n        </div>\n        {legend}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} data-level={parts ? undefined : level} className={s.root({ className })} {...props}>\n      {showLabel && (\n        <div aria-hidden className={s.header()}>\n          <span className={s.caption()}>{label}</span>\n          {!parts && <span className={s.figure()}>{words}</span>}\n        </div>\n      )}\n      <div aria-hidden className={s.track()}>\n        {parts ? (\n          shares.map((p) => <span key={p.i} className={[s.fill(), PART_BG[p.i % PART_BG.length]].join(\" \")} style={{ width: `${p.ratio * 100}%` }} />)\n        ) : (\n          <span className={[s.fill(), BG[level]].join(\" \")} style={{ width: `${ratio * 100}%` }} />\n        )}\n      </div>\n      {legend}\n    </div>\n  );\n}\n\nexport interface MeterValueProps {\n  /** The figure. */\n  value: React.ReactNode;\n  /** A word under it. */\n  caption?: React.ReactNode;\n}\n\n/** For the ring's centre when it shows a figure and a word. */\nexport function MeterValue({ value, caption }: MeterValueProps) {\n  return (\n    <>\n      <span className=\"font-display text-lg font-semibold text-fg tabular-nums\">{value}</span>\n      {caption && <span className=\"text-[10px] text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n"
     }
   ],
   "dependencies": [

package/registry/nav-bar.json

@@ -606,7 +606,7 @@
     },
     {
       "path": "nav-bar/nav-bar.tsx",
-      "content": "// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { FamilyMark, GitHubGlyph } from \"../family-mark\";\nimport { LanguageSwitch, type LanguageSwitchProps } from \"../language-switch/language-switch\";\nimport { type FamilyLabels, familyLabels, type Site, type SiteId, sitesByGroup } from \"../sites/sites\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { placePanel } from \"./placement\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The ink rule (Cahier, ADR-004): a pen line under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-0.5 before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-[calc(var(--kz-ind-y)+var(--kz-ind-h)-6px)] \" +\n      \"before:scale-x-[0.72] before:bg-fg before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-sm px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:underline group-not-data-[indicator=on]/list:data-active:decoration-2 group-not-data-[indicator=on]/list:data-active:underline-offset-8\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      // `left` is set by NavBarItems (--kz-menu-left): the panel's edge under its trigger, kept inside the page.\n      \"kz-pop absolute left-[var(--kz-menu-left,0px)] top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[left,width,height] duration-300 motion-reduce:transition-none\",\n    // Icon · title · a description of two lines at most. 28 rem (40 rem in two columns), never wider than the page\n    // between its gutters, and never taller than the screen.\n    panel: \"grid w-[min(28rem,calc(100vw-2rem))] max-h-[calc(100dvh-6rem)] gap-0.5 overflow-y-auto p-1.5\",\n    panelWide: \"w-[min(40rem,calc(100vw-2rem))] md:grid-cols-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-lg px-2.5 py-2 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4 [&>svg]:w-4 motion-reduce:transform-none\",\n    menuTitle: \"block line-clamp-2 wrap-break-word text-sm font-semibold leading-5 text-fg\",\n    // Two lines at most, wrapped at word boundaries — a longer one ends in an ellipsis, never cut mid-sentence.\n    menuText: \"mt-0.5 block line-clamp-2 wrap-break-word text-xs leading-4 text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-subtle bg-surface-2 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileGroup: \"grid gap-0.5 [&+&]:mt-1 [&+&]:border-t [&+&]:border-border-subtle [&+&]:pt-2\",\n    mobileGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n    // The family switcher: a chevron attached to the brand, its panel aligned on the bar's left edge.\n    family: \"hidden md:block\",\n    familyTrigger:\n      \"group/trigger -ml-2 mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    familyViewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    familyPanel: \"grid w-[min(92vw,42rem)] gap-x-2 gap-y-3 p-3 sm:grid-cols-2\",\n    familyGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    familyLink:\n      \"group/link flex items-start gap-3 rounded-xl px-3 py-2.5 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    familyMark: \"mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center text-fg\",\n    familyName: \"flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm font-semibold text-fg\",\n    familyText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    familyTag: \"rounded-full px-1.5 py-px text-[10px] font-semibold\",\n    mobileFamily: \"mt-1 grid gap-2 border-t border-border-subtle px-1 pb-1 pt-3\",\n    mobileFamilyLink:\n      \"flex min-h-11 items-center gap-3 rounded-xl px-2 py-2 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    badge:\n      \"hidden h-6 shrink-0 items-center gap-1 rounded-full border border-border-subtle bg-surface-2 px-2 font-mono text-[11px] font-medium text-fg-secondary sm:inline-flex\",\n    repo:\n      \"inline-flex h-9 w-9 shrink-0 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    floating: {\n      true: { root: \"max-w-5xl rounded-full border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\n/** The open menu of `NavBar.Items` (`\"\"`: none), so a plain link can close it when the pointer moves on to it. */\nconst ItemsContext = React.createContext<{ close: () => void }>({ close: () => {} });\n/** True inside `NavBar.Mobile`: the family renders as the panel's last group instead of a switcher. */\nconst MobileContext = React.createContext(false);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\nexport type NavBarItemsProps = Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">;\n\n/**\n * The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see\n * `NavBar.Mobile`). A menu opens on click, Enter, Space or ↓ — or when the pointer rests on its trigger (hover intent,\n * `delayDuration`, 200 ms): passing over the bar opens nothing. While a menu is open the light stays on its trigger;\n * moving on to a plain link closes the menu, so the bar never shows two current items. A click outside or Escape closes.\n */\nexport function NavBarItems({ className, children, value: valueProp, defaultValue, onValueChange, delayDuration = 200, ...props }: NavBarItemsProps) {\n  const { label } = useNavBar();\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const value = valueProp ?? inner;\n  const setValue = React.useCallback(\n    (next: string) => {\n      setInner(next);\n      onValueChange?.(next);\n    },\n    [onValueChange],\n  );\n  const items = React.useMemo(() => ({ close: () => setValue(\"\") }), [setValue]);\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({\n    item: \"[data-nav-item]\",\n    active: \"[data-nav-item][data-active]\",\n    prefer: \"[data-nav-item][data-state=open]\",\n    follow: true,\n  });\n  const root = React.useRef<HTMLElement>(null);\n  const viewport = React.useRef<HTMLDivElement>(null);\n  // The open panel sits under its trigger and stays inside the page (collision): measured when a menu opens, when\n  // the panel changes size (another menu) and when the window does.\n  React.useLayoutEffect(() => {\n    const panel = viewport.current;\n    const nav = root.current;\n    if (!panel || !nav || !value) return;\n    const place = () => {\n      const trigger = nav.querySelector<HTMLElement>(\"[data-nav-item][data-state=open]\");\n      const width = Number.parseFloat(panel.style.getPropertyValue(\"--radix-navigation-menu-viewport-width\"));\n      if (!trigger || !Number.isFinite(width)) return;\n      const left = `${placePanel({ trigger: trigger.getBoundingClientRect().left, root: nav.getBoundingClientRect().left, panel: width, window: document.documentElement.clientWidth })}px`;\n      if (panel.style.getPropertyValue(\"--kz-menu-left\") !== left) panel.style.setProperty(\"--kz-menu-left\", left);\n    };\n    place();\n    const watch = new MutationObserver(place);\n    watch.observe(panel, { attributes: true, attributeFilter: [\"style\"] });\n    window.addEventListener(\"resize\", place);\n    return () => {\n      watch.disconnect();\n      window.removeEventListener(\"resize\", place);\n    };\n  }, [value]);\n  return (\n    <ItemsContext.Provider value={items}>\n      <Nav.Root ref={root} aria-label={label} className={s.items({ className })} value={value} onValueChange={setValue} delayDuration={delayDuration} {...props}>\n        <Nav.List ref={ref} className={s.list()} {...handlers}>\n          {children}\n        </Nav.List>\n        <Nav.Viewport ref={viewport} className={s.viewport()} />\n      </Nav.Root>\n    </ItemsContext.Provider>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n  /** Classes on the list item around the link (to show it from a breakpoint only). */\n  itemClassName?: string;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, itemClassName, onPointerEnter, ...props }: NavBarLinkProps) {\n  const { close } = React.useContext(ItemsContext);\n  return (\n    <Nav.Item className={itemClassName}>\n      <Nav.Link\n        data-nav-item=\"\"\n        data-active={active ? \"\" : undefined}\n        active={active}\n        aria-current={active ? \"page\" : undefined}\n        className={s.item({ className })}\n        onPointerEnter={(e) => {\n          onPointerEnter?.(e);\n          close();\n        }}\n        {...props}\n      />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n  /**\n   * A section with this many links or fewer needs no hidden list: they sit in the bar as plain links (the active one\n   * marked, no dropdown, `label` unused on the desktop). Above it, a dropdown. `0` always makes a dropdown.\n   * @default 3\n   */\n  inlineUpTo?: number;\n  /**\n   * From which breakpoint the inline links stand in the bar. Below it (between the phone panel at `md` and this\n   * breakpoint) the section is the dropdown, so long labels never overflow a tablet-width bar. `md` inlines as soon as\n   * the bar is shown.\n   * @default \"lg\"\n   */\n  inlineFrom?: \"md\" | \"lg\" | \"xl\";\n};\n\n// Static class names (Tailwind reads them at build time).\nconst INLINE_HIDE = { md: \"\", lg: \"max-lg:hidden\", xl: \"max-xl:hidden\" } as const;\nconst DROPDOWN_HIDE = { md: \"\", lg: \"lg:hidden\", xl: \"xl:hidden\" } as const;\n\n/**\n * A menu of the bar: its trigger, and its links in a panel that opens under the bar. A menu of `inlineUpTo` links or\n * fewer (3 by default) is not a menu at all: its links stand in the bar, each with its active state — a hidden list of\n * three is one click more for nothing. The phone's panel groups them as usual (`NavBar.MobileGroup`).\n */\nexport function NavBarMenu({ label, active, columns = 1, inlineUpTo = 3, inlineFrom = \"lg\", children, className, ...props }: NavBarMenuProps) {\n  const links = React.Children.toArray(children);\n  const dropdown = (hide: string) => (\n    <Nav.Item className={cn(hide, className)} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && s.panelWide())}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n  const inline = links.length > 0 && links.length <= inlineUpTo && links.every((c) => React.isValidElement(c) && c.type === NavBarMenuLink);\n  if (inline) {\n    return (\n      <>\n        {inlineFrom !== \"md\" && dropdown(DROPDOWN_HIDE[inlineFrom])}\n        {links.map((link) => {\n          const { title, href, active: here, asChild, children: child, icon: _icon, description: _description, className: linkClass, ...rest } = (link as React.ReactElement<NavBarMenuLinkProps>).props;\n          return (\n            <NavBarLink key={(link as React.ReactElement).key} asChild={asChild} href={asChild ? undefined : href} active={here} className={linkClass} itemClassName={INLINE_HIDE[inlineFrom]} {...rest}>\n              {asChild && React.isValidElement<{ children?: React.ReactNode }>(child) ? React.cloneElement(child, undefined, title) : title}\n            </NavBarLink>\n          );\n        })}\n      </>\n    );\n  }\n  return dropdown(\"\");\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0 flex-1\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`), grouped like the bar's menus\n * (`NavBar.MobileGroup`). A disclosure: Escape, a click on a link or a press outside close it; Escape returns the focus\n * to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    // A press outside the panel and its toggle closes it (the page under it stays usable).\n    const onPress = (e: PointerEvent) => {\n      const target = e.target as Node | null;\n      if (!target || toggle.current?.contains(target) || document.getElementById(panelId)?.contains(target)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    document.addEventListener(\"pointerdown\", onPress);\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.removeEventListener(\"pointerdown\", onPress);\n    };\n  }, [open, setOpen, panelId]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          <MobileContext.Provider value>{children}</MobileContext.Provider>\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileGroupProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading — the same words as the bar's menu (“Product”) — passed translated. */\n  label: string;\n};\n\n/** A group of the mobile panel: the links of one of the bar's menus under its name, in the same order. */\nexport function NavBarMobileGroup({ label, className, children, ...props }: NavBarMobileGroupProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n\nconst tagTone = {\n  upcoming: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40\",\n  construction: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40\",\n  development: \"bg-surface-3 text-fg ring-1 ring-inset ring-border-strong\",\n  current: \"bg-surface-3 text-fg-secondary\",\n};\n\n/** A site's name and its tags: status when not released, “You are here” on the current one. */\nfunction FamilyName({ site, current, labels }: { site: Site; current: boolean; labels: FamilyLabels }) {\n  return (\n    <span className={s.familyName()}>\n      {site.name}\n      {site.status !== \"released\" && <span className={cn(s.familyTag(), tagTone[site.status])}>{labels.status[site.status]}</span>}\n      {current && <span className={cn(s.familyTag(), tagTone.current)}>{labels.current}</span>}\n    </span>\n  );\n}\n\nexport type NavBarFamilyProps = {\n  /** The site this bar belongs to (`@krizaka/ui/sites`): marked in the family, `aria-current=\"true\"`. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** Opens the panel at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the switcher (or, inside `NavBar.Mobile`, of the family's group). */\n  className?: string;\n};\n\n/**\n * The family switcher, attached to the brand (place it right after `NavBar.Brand`): a chevron that opens every site of\n * Krizaka grouped — Krizaka · Products · Open source · GitHub — the current one marked. It opens on click, Enter, Space\n * or ↓ (never on hover); ↑ ↓ walk the sites, Escape closes and returns the focus. Hidden below `md`: place a second\n * `NavBar.Family` as the last child of `NavBar.Mobile`, where it renders as the panel's last group.\n */\nexport function NavBarFamily({ current, labels = familyLabels.en, defaultOpen, className }: NavBarFamilyProps) {\n  const inMobile = React.useContext(MobileContext);\n  const id = React.useId();\n  const groups = sitesByGroup();\n  if (inMobile) {\n    return (\n      <div role=\"group\" aria-labelledby={`${id}-family`} className={s.mobileFamily({ className })}>\n        <p id={`${id}-family`} className={s.familyGroupTitle()}>\n          {labels.family}\n        </p>\n        {groups.map(({ group, sites }) => (\n          <div key={group}>\n            {/* The company's own group is named like the family itself: its heading would repeat the panel's. */}\n            {group !== \"krizaka\" && (\n              <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                {labels.groups[group]}\n              </p>\n            )}\n            <ul aria-labelledby={group !== \"krizaka\" ? `${id}-${group}` : `${id}-family`} className=\"grid gap-0.5\">\n              {sites.map((site) => (\n                <li key={site.id}>\n                  <a href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.mobileFamilyLink()}>\n                    <span className={s.familyMark()}>\n                      <FamilyMark mark={site.mark} size={24} />\n                    </span>\n                    <FamilyName site={site} current={site.id === current} labels={labels} />\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    );\n  }\n  // Click only: a pointer passing over the brand never opens the family (Radix opens its menus on hover by default).\n  const noHover = (e: React.PointerEvent) => e.preventDefault();\n  const columns = [groups.filter((g) => g.group === \"krizaka\" || g.group === \"products\"), groups.filter((g) => g.group === \"open-source\" || g.group === \"github\")];\n  return (\n    <Nav.Root aria-label={labels.family} defaultValue={defaultOpen ? \"family\" : undefined} className={s.family({ className })}>\n      <Nav.List className=\"flex\">\n        <Nav.Item value=\"family\">\n          <Nav.Trigger aria-label={labels.family} onPointerMove={noHover} onPointerLeave={noHover} className={s.familyTrigger()}>\n            <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </Nav.Trigger>\n          <Nav.Content onPointerLeave={noHover} className={s.familyPanel()}>\n            {columns.map((column, i) => (\n              <div key={i} className=\"grid content-start gap-3\">\n                {column.map(({ group, sites }) => (\n                  <div key={group}>\n                    <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                      {labels.groups[group]}\n                    </p>\n                    <ul aria-labelledby={`${id}-${group}`} className=\"grid gap-0.5\">\n                      {sites.map((site) => (\n                        <li key={site.id}>\n                          <Nav.Link href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.familyLink()}>\n                            <span className={s.familyMark()}>\n                              <FamilyMark mark={site.mark} size={28} />\n                            </span>\n                            <span className=\"min-w-0\">\n                              <FamilyName site={site} current={site.id === current} labels={labels} />\n                              <span className={s.familyText()}>{labels.descriptions[site.id]}</span>\n                            </span>\n                          </Nav.Link>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            ))}\n          </Nav.Content>\n        </Nav.Item>\n      </Nav.List>\n      <Nav.Viewport onPointerLeave={noHover} className={s.familyViewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarBadgeProps = React.ComponentProps<\"span\"> & {\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n};\n\n/** A small mono badge beside the brand: the environment and the version (`DEV · v1.2.3`). Hidden below `sm`. */\nexport function NavBarBadge({ env, version, className, children, ...props }: NavBarBadgeProps) {\n  const parts = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean);\n  return (\n    <span className={s.badge({ className })} {...props}>\n      {parts.join(\" · \")}\n      {children}\n    </span>\n  );\n}\n\nexport type NavBarLanguageProps = Omit<LanguageSwitchProps, \"variant\">;\n\n/**\n * The language switch, the same on every site: in the bar a globe and the current code (FR) opening a short menu of\n * the languages by their own names; inside `NavBar.Mobile` the same languages as a row in the preferences.\n */\nexport function NavBarLanguage(props: NavBarLanguageProps) {\n  const inMobile = React.useContext(MobileContext);\n  return <LanguageSwitch variant={inMobile ? \"inline\" : \"menu\"} {...props} />;\n}\n\nexport type NavBarMobilePreferencesProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading (“Preferences”) — passed translated. */\n  label: string;\n};\n\n/** The last group of the mobile panel: the preferences (theme, `NavBar.Language`), in a row under their heading. */\nexport function NavBarMobilePreferences({ label, className, children, ...props }: NavBarMobilePreferencesProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      <div className=\"flex flex-wrap items-center gap-2 px-3 py-1\">{children}</div>\n    </div>\n  );\n}\n\nexport type NavBarRepoProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The repository the site is built from. */\n  href: string;\n  /** The link's accessible name (“Source on GitHub”) — passed translated. */\n  label: string;\n};\n\n/** The site's repository on GitHub, an icon link of `NavBar.Actions`. */\nexport function NavBarRepo({ label, className, ...props }: NavBarRepoProps) {\n  return (\n    <a aria-label={label} className={s.repo({ className })} {...props}>\n      <GitHubGlyph size={18} />\n    </a>\n  );\n}\n\n/**\n * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Language/Mobile/MobileGroup/MobilePreferences/MobileLink` — the Krizaka navigation bar,\n * the same on every site of the family: floating, tightening on scroll, the family switcher on the brand, one light\n * gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Family: NavBarFamily,\n  Badge: NavBarBadge,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Repo: NavBarRepo,\n  Language: NavBarLanguage,\n  Mobile: NavBarMobile,\n  MobilePreferences: NavBarMobilePreferences,\n  MobileGroup: NavBarMobileGroup,\n  MobileLink: NavBarMobileLink,\n};\n"
+      "content": "// Client (scroll, a sliding indicator, menus). Radix NavigationMenu does the menus' semantics and keyboard (Enter, Space\n// and ↓ open; ↑ ↓ Home End walk; Escape closes and returns the focus; Tab out closes); this file draws the Krizaka bar:\n// a floating pill that tightens once the page scrolls, one light that glides to the item under the pointer or the\n// focus and rests on the current page, and a mobile panel that is a plain disclosure (no focus trap, Escape closes).\nimport { NavigationMenu as Nav, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { FamilyMark, GitHubGlyph } from \"../family-mark\";\nimport { LanguageSwitch, type LanguageSwitchProps } from \"../language-switch/language-switch\";\nimport { type FamilyLabels, familyLabels, type Site, type SiteId, sitesByGroup } from \"../sites/sites\";\nimport { useSlidingIndicator } from \"../sliding-indicator\";\nimport { placePanel } from \"./placement\";\n\nexport const navBar = tv({\n  slots: {\n    root:\n      \"group/nav relative z-40 mx-auto flex h-14 w-full items-center gap-2 border-border-subtle bg-surface-1 \" +\n      \"transition-[height,background-color,border-color,box-shadow] duration-300 motion-reduce:transition-none \" +\n      \"data-compact:h-12 data-compact:border-border-default data-compact:bg-surface-1 data-compact:shadow-lg\",\n    brand:\n      \"mr-2 inline-flex shrink-0 items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg no-underline \" +\n      \"rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    items: \"relative hidden md:block\",\n    list:\n      \"group/list relative isolate flex items-center gap-0.5 \" +\n      // The ink rule (Cahier, ADR-004): a pen line under the item that is pointed at or focused, resting on the current page.\n      \"before:absolute before:left-0 before:top-0 before:-z-10 before:h-0.5 before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-[calc(var(--kz-ind-y)+var(--kz-ind-h)-6px)] \" +\n      \"before:scale-x-[0.72] before:bg-fg before:opacity-0 before:transition-[translate,width,opacity] before:duration-300 motion-reduce:before:transition-none \" +\n      \"data-[indicator=on]:before:opacity-100\",\n    item:\n      \"inline-flex h-9 select-none items-center gap-1 rounded-sm px-3.5 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:text-fg data-active:text-fg data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      // Before the light is ready (server render), the current page carries its own tint.\n      \"group-not-data-[indicator=on]/list:data-active:underline group-not-data-[indicator=on]/list:data-active:decoration-2 group-not-data-[indicator=on]/list:data-active:underline-offset-8\",\n    chevron: \"h-3.5 w-3.5 transition-transform duration-300 group-data-[state=open]/trigger:rotate-180 motion-reduce:transition-none\",\n    viewport:\n      // `left` is set by NavBarItems (--kz-menu-left): the panel's edge under its trigger, kept inside the page.\n      \"kz-pop absolute left-[var(--kz-menu-left,0px)] top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[left,width,height] duration-300 motion-reduce:transition-none\",\n    // Icon · title · a description of two lines at most. 28 rem (40 rem in two columns), never wider than the page\n    // between its gutters, and never taller than the screen.\n    panel: \"grid w-[min(28rem,calc(100vw-2rem))] max-h-[calc(100dvh-6rem)] gap-0.5 overflow-y-auto p-1.5\",\n    panelWide: \"w-[min(40rem,calc(100vw-2rem))] md:grid-cols-2\",\n    menuLink:\n      \"group/link flex items-start gap-3 rounded-lg px-2.5 py-2 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-active:bg-accent-soft\",\n    menuIcon:\n      \"flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border-default bg-surface-2 text-fg-accent \" +\n      \"transition-[transform,border-color] duration-300 group-hover/link:-translate-y-0.5 group-hover/link:border-accent [&>svg]:h-4 [&>svg]:w-4 motion-reduce:transform-none\",\n    menuTitle: \"block line-clamp-2 wrap-break-word text-sm font-semibold leading-5 text-fg\",\n    // Two lines at most, wrapped at word boundaries — a longer one ends in an ellipsis, never cut mid-sentence.\n    menuText: \"mt-0.5 block line-clamp-2 wrap-break-word text-xs leading-4 text-fg-secondary\",\n    actions: \"ml-auto flex items-center gap-2\",\n    toggle:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-sm border border-border-subtle bg-surface-2 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    mobile: \"kz-pop absolute inset-x-0 top-full mt-2 grid gap-1 rounded-2xl border border-border-default bg-surface-1 p-2 shadow-lg md:hidden\",\n    mobileGroup: \"grid gap-0.5 [&+&]:mt-1 [&+&]:border-t [&+&]:border-border-subtle [&+&]:pt-2\",\n    mobileGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    mobileLink:\n      \"flex items-center justify-between rounded-xl px-3 py-3 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg-accent\",\n    // The family switcher: a chevron attached to the brand, its panel aligned on the bar's left edge.\n    family: \"hidden md:block\",\n    familyTrigger:\n      \"group/trigger -ml-2 mr-1 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-fg-secondary transition-colors \" +\n      \"hover:bg-surface-3 hover:text-fg data-[state=open]:bg-surface-3 data-[state=open]:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    familyViewport:\n      \"kz-pop absolute left-0 top-full mt-2 h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top-left overflow-hidden \" +\n      \"rounded-2xl border border-border-default bg-surface-1 shadow-lg transition-[width,height] duration-300 motion-reduce:transition-none\",\n    familyPanel: \"grid w-[min(92vw,42rem)] gap-x-2 gap-y-3 p-3 sm:grid-cols-2\",\n    familyGroupTitle: \"px-3 pb-1 pt-1 text-[11px] font-semibold text-fg-secondary\",\n    familyLink:\n      \"group/link flex items-start gap-3 rounded-xl px-3 py-2.5 text-left no-underline outline-hidden transition-colors \" +\n      \"hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    familyMark: \"mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center text-fg\",\n    familyName: \"flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm font-semibold text-fg\",\n    familyText: \"mt-0.5 block text-xs leading-relaxed text-fg-secondary\",\n    familyTag: \"rounded-sm px-1.5 py-px text-[10px] font-semibold\",\n    mobileFamily: \"mt-1 grid gap-2 border-t border-border-subtle px-1 pb-1 pt-3\",\n    mobileFamilyLink:\n      \"flex min-h-11 items-center gap-3 rounded-xl px-2 py-2 text-[15px] font-medium text-fg no-underline hover:bg-surface-2 \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-current:bg-accent-soft\",\n    badge:\n      \"hidden h-6 shrink-0 items-center gap-1 rounded-sm border border-border-subtle bg-surface-2 px-2 font-mono text-[11px] font-medium text-fg-secondary sm:inline-flex\",\n    repo:\n      \"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-sm 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    floating: {\n      true: { root: \"max-w-5xl rounded-sm border pl-5 pr-2 data-compact:max-w-4xl\" },\n      false: { root: \"border-b px-4 md:px-6\" },\n    },\n  },\n  defaultVariants: { floating: true },\n});\nconst s = navBar();\n\ninterface NavBarContext {\n  label: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  panelId: string;\n}\nconst Context = React.createContext<NavBarContext | null>(null);\n/** The open menu of `NavBar.Items` (`\"\"`: none), so a plain link can close it when the pointer moves on to it. */\nconst ItemsContext = React.createContext<{ close: () => void }>({ close: () => {} });\n/** True inside `NavBar.Mobile`: the family renders as the panel's last group instead of a switcher. */\nconst MobileContext = React.createContext(false);\nconst useNavBar = () => {\n  const ctx = React.useContext(Context);\n  if (!ctx) throw new Error(\"NavBar parts must be inside <NavBar.Root>.\");\n  return ctx;\n};\n\nexport type NavBarRootProps = React.ComponentProps<\"header\"> & {\n  /** The accessible name of the navigation (“Main”) — passed translated. */\n  label: string;\n  /**\n   * Pixels of scroll after which the bar tightens (denser, lower, lifted). `false`: never.\n   * @default 24\n   */\n  compactAfter?: number | false;\n  /**\n   * A floating pill (the Krizaka bar) or a full-width bar with a hairline under it.\n   * @default true\n   */\n  floating?: boolean;\n};\n\n/** The bar. Place it in a `sticky top-3` (floating) or `sticky top-0` wrapper — or let it scroll. */\nexport function NavBarRoot({ label, compactAfter = 24, floating = true, className, children, ...props }: NavBarRootProps) {\n  const [compact, setCompact] = React.useState(false);\n  const [open, setOpen] = React.useState(false);\n  const panelId = React.useId();\n  React.useEffect(() => {\n    if (compactAfter === false) return;\n    const onScroll = () => setCompact(window.scrollY > compactAfter);\n    onScroll();\n    window.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", onScroll);\n  }, [compactAfter]);\n  const ctx = React.useMemo(() => ({ label, open, setOpen, panelId }), [label, open, panelId]);\n  return (\n    <Context.Provider value={ctx}>\n      <header data-compact={compact ? \"\" : undefined} data-floating={floating} className={navBar({ floating }).root({ className })} {...props}>\n        {children}\n      </header>\n    </Context.Provider>\n  );\n}\n\nexport type NavBarBrandProps = React.ComponentProps<\"a\"> & {\n  /** Renders your link (a router `<Link>`) with the brand's look. */\n  asChild?: boolean;\n};\n\n/** The brand: a mark and a name, linking home. */\nexport function NavBarBrand({ asChild, className, ...props }: NavBarBrandProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp className={s.brand({ className })} {...props} />;\n}\n\nexport type NavBarItemsProps = Omit<React.ComponentProps<typeof Nav.Root>, \"orientation\">;\n\n/**\n * The desktop navigation: links and menus, with the light that glides between them. Hidden below `md` (see\n * `NavBar.Mobile`). A menu opens on click, Enter, Space or ↓ — or when the pointer rests on its trigger (hover intent,\n * `delayDuration`, 200 ms): passing over the bar opens nothing. While a menu is open the light stays on its trigger;\n * moving on to a plain link closes the menu, so the bar never shows two current items. A click outside or Escape closes.\n */\nexport function NavBarItems({ className, children, value: valueProp, defaultValue, onValueChange, delayDuration = 200, ...props }: NavBarItemsProps) {\n  const { label } = useNavBar();\n  const [inner, setInner] = React.useState(defaultValue ?? \"\");\n  const value = valueProp ?? inner;\n  const setValue = React.useCallback(\n    (next: string) => {\n      setInner(next);\n      onValueChange?.(next);\n    },\n    [onValueChange],\n  );\n  const items = React.useMemo(() => ({ close: () => setValue(\"\") }), [setValue]);\n  const { ref, handlers } = useSlidingIndicator<HTMLUListElement>({\n    item: \"[data-nav-item]\",\n    active: \"[data-nav-item][data-active]\",\n    prefer: \"[data-nav-item][data-state=open]\",\n    follow: true,\n  });\n  const root = React.useRef<HTMLElement>(null);\n  const viewport = React.useRef<HTMLDivElement>(null);\n  // The open panel sits under its trigger and stays inside the page (collision): measured when a menu opens, when\n  // the panel changes size (another menu) and when the window does.\n  React.useLayoutEffect(() => {\n    const panel = viewport.current;\n    const nav = root.current;\n    if (!panel || !nav || !value) return;\n    const place = () => {\n      const trigger = nav.querySelector<HTMLElement>(\"[data-nav-item][data-state=open]\");\n      const width = Number.parseFloat(panel.style.getPropertyValue(\"--radix-navigation-menu-viewport-width\"));\n      if (!trigger || !Number.isFinite(width)) return;\n      const left = `${placePanel({ trigger: trigger.getBoundingClientRect().left, root: nav.getBoundingClientRect().left, panel: width, window: document.documentElement.clientWidth })}px`;\n      if (panel.style.getPropertyValue(\"--kz-menu-left\") !== left) panel.style.setProperty(\"--kz-menu-left\", left);\n    };\n    place();\n    const watch = new MutationObserver(place);\n    watch.observe(panel, { attributes: true, attributeFilter: [\"style\"] });\n    window.addEventListener(\"resize\", place);\n    return () => {\n      watch.disconnect();\n      window.removeEventListener(\"resize\", place);\n    };\n  }, [value]);\n  return (\n    <ItemsContext.Provider value={items}>\n      <Nav.Root ref={root} aria-label={label} className={s.items({ className })} value={value} onValueChange={setValue} delayDuration={delayDuration} {...props}>\n        <Nav.List ref={ref} className={s.list()} {...handlers}>\n          {children}\n        </Nav.List>\n        <Nav.Viewport ref={viewport} className={s.viewport()} />\n      </Nav.Root>\n    </ItemsContext.Provider>\n  );\n}\n\nexport type NavBarLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"active\"> & {\n  /** The current page: `aria-current=\"page\"`, and the light rests on it. */\n  active?: boolean;\n  /** Classes on the list item around the link (to show it from a breakpoint only). */\n  itemClassName?: string;\n};\n\n/** A link of the bar. `asChild` renders your router's `<Link>`. */\nexport function NavBarLink({ active, className, itemClassName, onPointerEnter, ...props }: NavBarLinkProps) {\n  const { close } = React.useContext(ItemsContext);\n  return (\n    <Nav.Item className={itemClassName}>\n      <Nav.Link\n        data-nav-item=\"\"\n        data-active={active ? \"\" : undefined}\n        active={active}\n        aria-current={active ? \"page\" : undefined}\n        className={s.item({ className })}\n        onPointerEnter={(e) => {\n          onPointerEnter?.(e);\n          close();\n        }}\n        {...props}\n      />\n    </Nav.Item>\n  );\n}\n\nexport type NavBarMenuProps = Omit<React.ComponentProps<typeof Nav.Item>, \"children\"> & {\n  /** The trigger's words (“Products”) — passed translated. */\n  label: string;\n  /** The current page is inside this menu: the light rests on its trigger. */\n  active?: boolean;\n  /** The menu's links (`NavBar.MenuLink`), laid out in a panel; `columns` sets the grid. */\n  children: React.ReactNode;\n  /**\n   * Columns of the panel.\n   * @default 1\n   */\n  columns?: 1 | 2;\n  /**\n   * A section with this many links or fewer needs no hidden list: they sit in the bar as plain links (the active one\n   * marked, no dropdown, `label` unused on the desktop). Above it, a dropdown. `0` always makes a dropdown.\n   * @default 3\n   */\n  inlineUpTo?: number;\n  /**\n   * From which breakpoint the inline links stand in the bar. Below it (between the phone panel at `md` and this\n   * breakpoint) the section is the dropdown, so long labels never overflow a tablet-width bar. `md` inlines as soon as\n   * the bar is shown.\n   * @default \"lg\"\n   */\n  inlineFrom?: \"md\" | \"lg\" | \"xl\";\n};\n\n// Static class names (Tailwind reads them at build time).\nconst INLINE_HIDE = { md: \"\", lg: \"max-lg:hidden\", xl: \"max-xl:hidden\" } as const;\nconst DROPDOWN_HIDE = { md: \"\", lg: \"lg:hidden\", xl: \"xl:hidden\" } as const;\n\n/**\n * A menu of the bar: its trigger, and its links in a panel that opens under the bar. A menu of `inlineUpTo` links or\n * fewer (3 by default) is not a menu at all: its links stand in the bar, each with its active state — a hidden list of\n * three is one click more for nothing. The phone's panel groups them as usual (`NavBar.MobileGroup`).\n */\nexport function NavBarMenu({ label, active, columns = 1, inlineUpTo = 3, inlineFrom = \"lg\", children, className, ...props }: NavBarMenuProps) {\n  const links = React.Children.toArray(children);\n  const dropdown = (hide: string) => (\n    <Nav.Item className={cn(hide, className)} {...props}>\n      <Nav.Trigger data-nav-item=\"\" data-active={active ? \"\" : undefined} className={cn(s.item(), \"group/trigger\")}>\n        {label}\n        <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </Nav.Trigger>\n      <Nav.Content className={cn(s.panel(), columns === 2 && s.panelWide())}>{children}</Nav.Content>\n    </Nav.Item>\n  );\n  const inline = links.length > 0 && links.length <= inlineUpTo && links.every((c) => React.isValidElement(c) && c.type === NavBarMenuLink);\n  if (inline) {\n    return (\n      <>\n        {inlineFrom !== \"md\" && dropdown(DROPDOWN_HIDE[inlineFrom])}\n        {links.map((link) => {\n          const { title, href, active: here, asChild, children: child, icon: _icon, description: _description, className: linkClass, ...rest } = (link as React.ReactElement<NavBarMenuLinkProps>).props;\n          return (\n            <NavBarLink key={(link as React.ReactElement).key} asChild={asChild} href={asChild ? undefined : href} active={here} className={linkClass} itemClassName={INLINE_HIDE[inlineFrom]} {...rest}>\n              {asChild && React.isValidElement<{ children?: React.ReactNode }>(child) ? React.cloneElement(child, undefined, title) : title}\n            </NavBarLink>\n          );\n        })}\n      </>\n    );\n  }\n  return dropdown(\"\");\n}\n\nexport type NavBarMenuLinkProps = Omit<React.ComponentProps<typeof Nav.Link>, \"title\" | \"active\"> & {\n  /** The link's name — passed translated. */\n  title: string;\n  /** One line under it — passed translated. */\n  description?: string;\n  /** An icon (a signature icon of `@krizaka/icons`: its node lights up on hover). */\n  icon?: React.ReactNode;\n  /** The current page. */\n  active?: boolean;\n};\n\n/** A link inside a menu: an icon, a name and a line of text. */\nexport function NavBarMenuLink({ title, description, icon, active, href, className, asChild, children, ...props }: NavBarMenuLinkProps) {\n  const body = (\n    <>\n      {icon && <span className={s.menuIcon()}>{icon}</span>}\n      <span className=\"min-w-0 flex-1\">\n        <span className={s.menuTitle()}>{title}</span>\n        {description && <span className={s.menuText()}>{description}</span>}\n      </span>\n    </>\n  );\n  return (\n    <Nav.Link asChild={asChild} href={asChild ? undefined : href} active={active} aria-current={active ? \"page\" : undefined} data-active={active ? \"\" : undefined} className={s.menuLink({ className })} {...props}>\n      {asChild && React.isValidElement<{ children?: React.ReactNode }>(children) ? React.cloneElement(children, undefined, body) : body}\n    </Nav.Link>\n  );\n}\n\n/** The right side: search, theme, language, the call to action. */\nexport function NavBarActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.actions({ className })} {...props} />;\n}\n\nexport type NavBarMobileProps = React.ComponentProps<\"nav\"> & {\n  /** The toggle's name when closed (“Open the menu”) — passed translated. */\n  openLabel: string;\n  /** The toggle's name when open (“Close the menu”) — passed translated. */\n  closeLabel: string;\n};\n\n/**\n * Below `md`: a toggle, and a panel under the bar with its links (`NavBar.MobileLink`), grouped like the bar's menus\n * (`NavBar.MobileGroup`). A disclosure: Escape, a click on a link or a press outside close it; Escape returns the focus\n * to the toggle.\n */\nexport function NavBarMobile({ openLabel, closeLabel, className, children, ...props }: NavBarMobileProps) {\n  const { label, open, setOpen, panelId } = useNavBar();\n  const toggle = React.useRef<HTMLButtonElement>(null);\n  React.useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      toggle.current?.focus();\n    };\n    // A press outside the panel and its toggle closes it (the page under it stays usable).\n    const onPress = (e: PointerEvent) => {\n      const target = e.target as Node | null;\n      if (!target || toggle.current?.contains(target) || document.getElementById(panelId)?.contains(target)) return;\n      setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    document.addEventListener(\"pointerdown\", onPress);\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.removeEventListener(\"pointerdown\", onPress);\n    };\n  }, [open, setOpen, panelId]);\n  return (\n    <>\n      <button ref={toggle} type=\"button\" aria-expanded={open} aria-controls={panelId} aria-label={open ? closeLabel : openLabel} onClick={() => setOpen(!open)} className={s.toggle()}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4.5 w-4.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          {open ? <path d=\"M18 6 6 18M6 6l12 12\" /> : <path d=\"M4 7h16M4 12h16M4 17h10\" />}\n        </svg>\n      </button>\n      {open && (\n        <nav\n          id={panelId}\n          aria-label={label}\n          className={s.mobile({ className })}\n          onClick={(e) => {\n            if ((e.target as Element).closest(\"a\")) setOpen(false);\n          }}\n          {...props}\n        >\n          <MobileContext.Provider value>{children}</MobileContext.Provider>\n        </nav>\n      )}\n    </>\n  );\n}\n\nexport type NavBarMobileGroupProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading — the same words as the bar's menu (“Product”) — passed translated. */\n  label: string;\n};\n\n/** A group of the mobile panel: the links of one of the bar's menus under its name, in the same order. */\nexport function NavBarMobileGroup({ label, className, children, ...props }: NavBarMobileGroupProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\nexport type NavBarMobileLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the mobile panel. */\nexport function NavBarMobileLink({ active, asChild, className, ...props }: NavBarMobileLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.mobileLink({ className })} {...props} />;\n}\n\n\nconst tagTone = {\n  upcoming: \"bg-accent-soft text-fg ring-1 ring-inset ring-accent/40\",\n  construction: \"bg-warning/15 text-fg ring-1 ring-inset ring-warning/40\",\n  development: \"bg-surface-3 text-fg ring-1 ring-inset ring-border-strong\",\n  current: \"bg-surface-3 text-fg-secondary\",\n};\n\n/** A site's name and its tags: status when not released, “You are here” on the current one. */\nfunction FamilyName({ site, current, labels }: { site: Site; current: boolean; labels: FamilyLabels }) {\n  return (\n    <span className={s.familyName()}>\n      {site.name}\n      {site.status !== \"released\" && <span className={cn(s.familyTag(), tagTone[site.status])}>{labels.status[site.status]}</span>}\n      {current && <span className={cn(s.familyTag(), tagTone.current)}>{labels.current}</span>}\n    </span>\n  );\n}\n\nexport type NavBarFamilyProps = {\n  /** The site this bar belongs to (`@krizaka/ui/sites`): marked in the family, `aria-current=\"true\"`. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** Opens the panel at first render (a story, a screenshot). */\n  defaultOpen?: boolean;\n  /** Classes of the switcher (or, inside `NavBar.Mobile`, of the family's group). */\n  className?: string;\n};\n\n/**\n * The family switcher, attached to the brand (place it right after `NavBar.Brand`): a chevron that opens every site of\n * Krizaka grouped — Krizaka · Products · Open source · GitHub — the current one marked. It opens on click, Enter, Space\n * or ↓ (never on hover); ↑ ↓ walk the sites, Escape closes and returns the focus. Hidden below `md`: place a second\n * `NavBar.Family` as the last child of `NavBar.Mobile`, where it renders as the panel's last group.\n */\nexport function NavBarFamily({ current, labels = familyLabels.en, defaultOpen, className }: NavBarFamilyProps) {\n  const inMobile = React.useContext(MobileContext);\n  const id = React.useId();\n  const groups = sitesByGroup();\n  if (inMobile) {\n    return (\n      <div role=\"group\" aria-labelledby={`${id}-family`} className={s.mobileFamily({ className })}>\n        <p id={`${id}-family`} className={s.familyGroupTitle()}>\n          {labels.family}\n        </p>\n        {groups.map(({ group, sites }) => (\n          <div key={group}>\n            {/* The company's own group is named like the family itself: its heading would repeat the panel's. */}\n            {group !== \"krizaka\" && (\n              <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                {labels.groups[group]}\n              </p>\n            )}\n            <ul aria-labelledby={group !== \"krizaka\" ? `${id}-${group}` : `${id}-family`} className=\"grid gap-0.5\">\n              {sites.map((site) => (\n                <li key={site.id}>\n                  <a href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.mobileFamilyLink()}>\n                    <span className={s.familyMark()}>\n                      <FamilyMark mark={site.mark} size={24} />\n                    </span>\n                    <FamilyName site={site} current={site.id === current} labels={labels} />\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    );\n  }\n  // Click only: a pointer passing over the brand never opens the family (Radix opens its menus on hover by default).\n  const noHover = (e: React.PointerEvent) => e.preventDefault();\n  const columns = [groups.filter((g) => g.group === \"krizaka\" || g.group === \"products\"), groups.filter((g) => g.group === \"open-source\" || g.group === \"github\")];\n  return (\n    <Nav.Root aria-label={labels.family} defaultValue={defaultOpen ? \"family\" : undefined} className={s.family({ className })}>\n      <Nav.List className=\"flex\">\n        <Nav.Item value=\"family\">\n          <Nav.Trigger aria-label={labels.family} onPointerMove={noHover} onPointerLeave={noHover} className={s.familyTrigger()}>\n            <svg viewBox=\"0 0 24 24\" className={s.chevron()} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n              <path d=\"m6 9 6 6 6-6\" />\n            </svg>\n          </Nav.Trigger>\n          <Nav.Content onPointerLeave={noHover} className={s.familyPanel()}>\n            {columns.map((column, i) => (\n              <div key={i} className=\"grid content-start gap-3\">\n                {column.map(({ group, sites }) => (\n                  <div key={group}>\n                    <p id={`${id}-${group}`} className={s.familyGroupTitle()}>\n                      {labels.groups[group]}\n                    </p>\n                    <ul aria-labelledby={`${id}-${group}`} className=\"grid gap-0.5\">\n                      {sites.map((site) => (\n                        <li key={site.id}>\n                          <Nav.Link href={site.url} data-current={site.id === current ? \"\" : undefined} aria-current={site.id === current ? \"true\" : undefined} className={s.familyLink()}>\n                            <span className={s.familyMark()}>\n                              <FamilyMark mark={site.mark} size={28} />\n                            </span>\n                            <span className=\"min-w-0\">\n                              <FamilyName site={site} current={site.id === current} labels={labels} />\n                              <span className={s.familyText()}>{labels.descriptions[site.id]}</span>\n                            </span>\n                          </Nav.Link>\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            ))}\n          </Nav.Content>\n        </Nav.Item>\n      </Nav.List>\n      <Nav.Viewport onPointerLeave={noHover} className={s.familyViewport()} />\n    </Nav.Root>\n  );\n}\n\nexport type NavBarBadgeProps = React.ComponentProps<\"span\"> & {\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n};\n\n/** A small mono badge beside the brand: the environment and the version (`DEV · v1.2.3`). Hidden below `sm`. */\nexport function NavBarBadge({ env, version, className, children, ...props }: NavBarBadgeProps) {\n  const parts = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean);\n  return (\n    <span className={s.badge({ className })} {...props}>\n      {parts.join(\" · \")}\n      {children}\n    </span>\n  );\n}\n\nexport type NavBarLanguageProps = Omit<LanguageSwitchProps, \"variant\">;\n\n/**\n * The language switch, the same on every site: in the bar a globe and the current code (FR) opening a short menu of\n * the languages by their own names; inside `NavBar.Mobile` the same languages as a row in the preferences.\n */\nexport function NavBarLanguage(props: NavBarLanguageProps) {\n  const inMobile = React.useContext(MobileContext);\n  return <LanguageSwitch variant={inMobile ? \"inline\" : \"menu\"} {...props} />;\n}\n\nexport type NavBarMobilePreferencesProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The group's heading (“Preferences”) — passed translated. */\n  label: string;\n};\n\n/** The last group of the mobile panel: the preferences (theme, `NavBar.Language`), in a row under their heading. */\nexport function NavBarMobilePreferences({ label, className, children, ...props }: NavBarMobilePreferencesProps) {\n  const id = React.useId();\n  return (\n    <div role=\"group\" aria-labelledby={id} className={s.mobileGroup({ className })} {...props}>\n      <p id={id} className={s.mobileGroupTitle()}>\n        {label}\n      </p>\n      <div className=\"flex flex-wrap items-center gap-2 px-3 py-1\">{children}</div>\n    </div>\n  );\n}\n\nexport type NavBarRepoProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The repository the site is built from. */\n  href: string;\n  /** The link's accessible name (“Source on GitHub”) — passed translated. */\n  label: string;\n};\n\n/** The site's repository on GitHub, an icon link of `NavBar.Actions`. */\nexport function NavBarRepo({ label, className, ...props }: NavBarRepoProps) {\n  return (\n    <a aria-label={label} className={s.repo({ className })} {...props}>\n      <GitHubGlyph size={18} />\n    </a>\n  );\n}\n\n/**\n * `NavBar.Root/Brand/Family/Badge/Items/Link/Menu/MenuLink/Actions/Repo/Language/Mobile/MobileGroup/MobilePreferences/MobileLink` — the Krizaka navigation bar,\n * the same on every site of the family: floating, tightening on scroll, the family switcher on the brand, one light\n * gliding between its items, accessible menus, a mobile panel.\n */\nexport const NavBar = {\n  Root: NavBarRoot,\n  Brand: NavBarBrand,\n  Family: NavBarFamily,\n  Badge: NavBarBadge,\n  Items: NavBarItems,\n  Link: NavBarLink,\n  Menu: NavBarMenu,\n  MenuLink: NavBarMenuLink,\n  Actions: NavBarActions,\n  Repo: NavBarRepo,\n  Language: NavBarLanguage,\n  Mobile: NavBarMobile,\n  MobilePreferences: NavBarMobilePreferences,\n  MobileGroup: NavBarMobileGroup,\n  MobileLink: NavBarMobileLink,\n};\n"
     },
     {
       "path": "nav-bar/placement.ts",
@@ -618,7 +618,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.36.0",
+    "@krizaka/tokens@^3.37.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],