@krizaka/ui 2.6.0 → 2.9.0

package/registry/app-shell.json

@@ -0,0 +1,451 @@
+{
+  "name": "app-shell",
+  "type": "primitive",
+  "title": "App shell",
+  "summary": "The shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title and actions, the content.",
+  "description": "The shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title and actions, the content.",
+  "status": "beta",
+  "category": "layouts",
+  "platforms": "web",
+  "whenToUse": [
+    "Every signed-in screen of a product: a studio, a console, an administration.",
+    "When the app has more than four destinations — fewer fit a NavBar."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For a public page of a site.",
+      "use": "marketing-layout"
+    },
+    {
+      "when": "For a mobile app's tabs: React Native has its own tab bar."
+    }
+  ],
+  "bestPractices": [
+    "Five to nine items, grouped by what the user does (`AppShell.Group`), the current one marked with `current`.",
+    "Give every item an icon: it is all that remains when the sidebar collapses (its words become a tooltip).",
+    "Persist the collapse with `collapsed` + `onCollapsedChange`; put the account in the sidebar's `footer`.",
+    "Render your router's links with `AppShell.Item asChild`."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab",
+        "action": "Moves through the sidebar's items, the collapse button and the header's actions."
+      },
+      {
+        "keys": "Esc",
+        "action": "Closes the drawer on a phone and returns the focus to the menu button."
+      }
+    ],
+    "notes": [
+      "The sidebar is a `nav` named by `label`; the current item carries `aria-current=\"page\"`.",
+      "On a phone the drawer is a modal dialog (Radix): focus trapped inside, Escape and the overlay close it, the focus returns to the button.",
+      "The header's title is the screen's `h1`; nested layouts use `headingAs=\"h2\"`."
+    ]
+  },
+  "related": [
+    "dashboard-layout",
+    "nav-bar",
+    "dialog"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/app-shell",
+    "import": "import { AppShell } from \"@krizaka/ui/app-shell\";",
+    "props": [
+      {
+        "component": "AppShellRoot",
+        "description": "The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body.",
+        "props": [
+          {
+            "name": "collapsed",
+            "type": "boolean",
+            "default": null,
+            "description": "Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice.",
+            "required": false
+          },
+          {
+            "name": "defaultCollapsed",
+            "type": "boolean",
+            "default": "false",
+            "description": "The sidebar starts collapsed to its icons (desktop).",
+            "required": false
+          },
+          {
+            "name": "onCollapsedChange",
+            "type": "((collapsed: boolean) => void)",
+            "default": null,
+            "description": "Called when the sidebar collapses or expands.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AppShellSidebar",
+        "description": "The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer.",
+        "props": [
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The sections: `AppShell.Group` and `AppShell.Item`.",
+            "required": true
+          },
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "default": null,
+            "description": "The drawer's close button words (phone).",
+            "required": true
+          },
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "The navigation's accessible name (`Studio`, `Administration`).",
+            "required": true
+          },
+          {
+            "name": "brand",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain).",
+            "required": false
+          },
+          {
+            "name": "collapseLabels",
+            "type": "readonly [string, string]",
+            "default": null,
+            "description": "The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse.",
+            "required": false
+          },
+          {
+            "name": "footer",
+            "type": "ReactNode",
+            "default": null,
+            "description": "At the bottom, above the collapse button: the account, a plan, the version.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AppShellGroup",
+        "description": "A heading between groups of items.",
+        "props": []
+      },
+      {
+        "component": "AppShellItem",
+        "description": "A destination of the sidebar: icon, words, a count.",
+        "props": [
+          {
+            "name": "label",
+            "type": "string",
+            "default": null,
+            "description": "Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`).",
+            "required": true
+          },
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders your link (Next's `Link`) with the item's look: pass it as the only child.",
+            "required": false
+          },
+          {
+            "name": "badge",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A count beside it (unread, pending): a number or a few characters.",
+            "required": false
+          },
+          {
+            "name": "children",
+            "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
+            "default": null,
+            "description": "Your link element when `asChild`.",
+            "required": false
+          },
+          {
+            "name": "current",
+            "type": "boolean",
+            "default": null,
+            "description": "The screen it opens is the current one: `aria-current=\"page\"`.",
+            "required": false
+          },
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The item's icon (a signature icon): it stays when the sidebar collapses.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AppShellBody",
+        "description": "The column right of the sidebar: Header, then Main.",
+        "props": []
+      },
+      {
+        "component": "AppShellHeader",
+        "description": "The top of the screen: the drawer's button (phone), the title, the actions. Sticky.",
+        "props": [
+          {
+            "name": "menuLabel",
+            "type": "string",
+            "default": null,
+            "description": "The button that opens the drawer on a phone: its words.",
+            "required": true
+          },
+          {
+            "name": "actions",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The screen's actions, on the right.",
+            "required": false
+          },
+          {
+            "name": "title",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The screen's title (an `h1`).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AppShellMain",
+        "description": "The screen's content.",
+        "props": []
+      }
+    ],
+    "examples": [
+      {
+        "name": "orochia-studio",
+        "title": "Orochia studio",
+        "description": "Elena's home in the creator studio: the shell around this week's figures, the payout, the auction and the sales.",
+        "template": true,
+        "path": "examples/app-shell/orochia-studio.tsx",
+        "module": "@krizaka/ui/registry/examples/app-shell/orochia-studio",
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppShell } from \"@krizaka/ui/app-shell\";\nimport { Avatar } from \"@krizaka/ui/avatar\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DashboardLayout, Widget } from \"@krizaka/ui/dashboard-layout\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Stat } from \"@krizaka/ui/stat\";\n\nconst icon = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\nconst NAV = [\n  { id: \"home\", label: \"Home\", d: \"M4 11 12 4l8 7v9H4z\", current: true },\n  { id: \"videos\", label: \"Videos\", d: \"M4 6h12v12H4zM16 10l4-2v8l-4-2\", badge: 2 },\n  { id: \"auctions\", label: \"Auctions\", d: \"M5 19h10M8 5l6 6M11 2l6 6M6 13l4-4\" },\n  { id: \"challenges\", label: \"Challenges\", d: \"M12 3v18M5 7h10l-2 3 2 3H5\" },\n];\nconst MONEY = [\n  { id: \"earnings\", label: \"Earnings\", d: \"M4 18h16M7 14l3-3 3 2 5-6\" },\n  { id: \"payouts\", label: \"Payouts\", d: \"M3 7h18v10H3zM12 12h.01\" },\n];\nconst SALES = [\n  { what: \"Unlock · “Night shoot, part 2”\", who: \"Léa M.\", net: \"€4.50\" },\n  { what: \"Tip\", who: \"Samir K.\", net: \"€9.00\" },\n  { what: \"Auction won · “Backstage cut”\", who: \"Inès B.\", net: \"€61.20\" },\n];\n\n// TEMPLATE — Orochia's creator studio, Elena's home: the shell (sidebar of the studio, drawer on a phone) around a\n// dashboard — this week's figures, the payout on its way, the latest sales, the next auction. On a phone the sidebar\n// is a drawer, the stats stack two by two, every widget takes the full width.\nexport default function AppShellOrochiaStudio() {\n  return (\n    <div className=\"brand-orochia\">\n      <AppShell.Root>\n        <AppShell.Sidebar\n          label=\"Studio\"\n          brand={<><ProductLogo id=\"orochia\" size={24} animated={false} /> Orochia</>}\n          collapseLabels={[\"Collapse\", \"Expand\"]}\n          closeLabel=\"Close the menu\"\n          footer={\n            <div className=\"flex items-center gap-2.5 px-2 py-2 text-sm\">\n              <Avatar fallback=\"EV\" size=\"sm\" />\n              <span className=\"min-w-0 truncate font-medium\">Elena Varga</span>\n            </div>\n          }\n        >\n          {NAV.map((n) => (\n            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} current={n.current} badge={n.badge} />\n          ))}\n          <AppShell.Group>Money</AppShell.Group>\n          {MONEY.map((n) => (\n            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} />\n          ))}\n        </AppShell.Sidebar>\n        <AppShell.Body>\n          <AppShell.Header\n            title=\"Studio\"\n            menuLabel=\"Open the menu\"\n            actions={<Button size=\"sm\" variant=\"primary\" shape=\"cut\">Upload a video</Button>}\n          />\n          <AppShell.Main>\n            <DashboardLayout headingAs=\"h2\" eyebrow=\"This week\" title=\"Good morning, Elena\" description=\"Three sales since yesterday — your auction ends tonight.\">\n              <Widget level={3} title=\"Your week\" span=\"full\">\n                <div className=\"grid grid-cols-2 gap-6 md:grid-cols-4\">\n                  <Stat label=\"Views\" value=\"12.4k\" trend=\"up\" trendLabel=\"+8 %\" hint=\"7 days\" />\n                  <Stat label=\"Supporters\" value=\"318\" trend=\"up\" trendLabel=\"+21\" hint=\"7 days\" />\n                  <Stat label=\"Earned\" value=\"€902\" trend=\"up\" trendLabel=\"+14 %\" hint=\"after the 10 % fee\" />\n                  <Stat label=\"Unlocks\" value=\"146\" trend=\"flat\" trendLabel=\"±0\" hint=\"7 days\" />\n                </div>\n              </Widget>\n              <Widget level={3} title=\"Next payout\" description=\"Every Monday, from €20\" span={2}>\n                <Meter label=\"Towards your payout\" value={74} max={100} valueText=\"€74 of €100 goal\" showLabel />\n                <p className=\"mt-3 text-sm text-fg-secondary\">€902 will reach your bank on Monday.</p>\n              </Widget>\n              <Widget level={3} title=\"Auction\" description=\"“Backstage cut”\" span={2} action={<Badge tone=\"accent\" dot>Open</Badge>}>\n                <p className=\"font-display text-3xl font-extrabold text-fg\">€68</p>\n                <p className=\"text-sm text-fg-secondary\">7 bids · ends tonight at 21:00</p>\n              </Widget>\n              <Widget level={3} title=\"Latest sales\" span=\"full\" action={<Button size=\"sm\" variant=\"ghost\">See all</Button>}>\n                <ul className=\"divide-y divide-border-subtle\">\n                  {SALES.map((s) => (\n                    <li key={s.what} className=\"flex items-center justify-between gap-3 py-2.5 text-sm\">\n                      <span className=\"min-w-0\">\n                        <span className=\"block truncate font-medium text-fg\">{s.what}</span>\n                        <span className=\"text-fg-secondary\">{s.who}</span>\n                      </span>\n                      <span className=\"font-mono font-semibold text-fg-success\">{s.net}</span>\n                    </li>\n                  ))}\n                </ul>\n              </Widget>\n            </DashboardLayout>\n          </AppShell.Main>\n        </AppShell.Body>\n      </AppShell.Root>\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "admin-console",
+        "title": "Administration console",
+        "description": "A review queue in a console: sections, counts and a sortable table with bulk actions (cards on a phone).",
+        "template": true,
+        "path": "examples/app-shell/admin-console.tsx",
+        "module": "@krizaka/ui/registry/examples/app-shell/admin-console",
+        "code": "\"use client\";\n\nimport { ProductLogo } from \"@krizaka/ui\";\nimport { AppShell } from \"@krizaka/ui/app-shell\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DashboardLayout, Widget } from \"@krizaka/ui/dashboard-layout\";\nimport { DataTable, type DataTableColumn } from \"@krizaka/ui/data-table\";\n\nconst icon = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\n\ntype Request = { id: string; creator: string; kind: string; status: \"pending\" | \"approved\" | \"refused\"; age: string };\nconst REQUESTS: Request[] = [\n  { id: \"v-1042\", creator: \"Elena Varga\", kind: \"Identity check\", status: \"pending\", age: \"12 min\" },\n  { id: \"v-1041\", creator: \"Noah Petit\", kind: \"Payout account\", status: \"pending\", age: \"40 min\" },\n  { id: \"v-1039\", creator: \"Maya Chen\", kind: \"Identity check\", status: \"approved\", age: \"2 h\" },\n  { id: \"v-1036\", creator: \"Tom Lebrun\", kind: \"Age check (18+)\", status: \"refused\", age: \"5 h\" },\n];\nconst tone = { pending: \"warning\", approved: \"success\", refused: \"danger\" } as const;\nconst columns: DataTableColumn<Request>[] = [\n  { id: \"creator\", header: \"Creator\", sortable: true, card: \"title\" },\n  { id: \"kind\", header: \"Request\" },\n  { id: \"status\", header: \"Status\", cell: (r) => <Badge tone={tone[r.status]} dot>{r.status}</Badge> },\n  { id: \"age\", header: \"Waiting\", align: \"end\" },\n];\n\n// TEMPLATE — an administration console (Orochia admin): the shell with the console's sections, a queue of requests to\n// review as a sortable table with bulk actions — cards on a phone — and the counts that say how long the queue is.\nexport default function AppShellAdminConsole() {\n  return (\n    <AppShell.Root>\n      <AppShell.Sidebar label=\"Administration\" brand={<><ProductLogo id=\"orochia\" size={24} animated={false} /> Admin</>} closeLabel=\"Close the menu\" collapseLabels={[\"Collapse\", \"Expand\"]}>\n        <AppShell.Group>Review</AppShell.Group>\n        <AppShell.Item href=\"#verification\" icon={icon(\"M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z\")} label=\"Verification\" current badge={2} />\n        <AppShell.Item href=\"#moderation\" icon={icon(\"M4 5h16v11H9l-5 4z\")} label=\"Moderation\" badge={5} />\n        <AppShell.Group>Money</AppShell.Group>\n        <AppShell.Item href=\"#payouts\" icon={icon(\"M3 7h18v10H3zM12 12h.01\")} label=\"Payouts\" />\n        <AppShell.Item href=\"#ledger\" icon={icon(\"M5 4h14v16H5zM8 8h8M8 12h8M8 16h5\")} label=\"Ledger\" />\n        <AppShell.Group>System</AppShell.Group>\n        <AppShell.Item href=\"#backups\" icon={icon(\"M4 7c0-2 16-2 16 0v10c0 2-16 2-16 0zM4 12c0 2 16 2 16 0\")} label=\"Backups\" />\n      </AppShell.Sidebar>\n      <AppShell.Body>\n        <AppShell.Header title=\"Verification\" menuLabel=\"Open the menu\" actions={<Button size=\"sm\" variant=\"secondary\" shape=\"cut\">Export</Button>} />\n        <AppShell.Main>\n          <DashboardLayout headingAs=\"h2\" title=\"Requests to review\" description=\"Oldest first. A decision is logged with your name.\">\n            <Widget level={3} title=\"Pending\" description=\"identity and payout\">\n              <p className=\"font-display text-3xl font-extrabold text-fg\">2</p>\n            </Widget>\n            <Widget level={3} title=\"Oldest wait\">\n              <p className=\"font-display text-3xl font-extrabold text-fg\">40 min</p>\n            </Widget>\n            <Widget level={3} title=\"Queue\" span=\"full\">\n              <DataTable caption=\"Verification requests\" rows={REQUESTS} columns={columns} getRowId={(r) => r.id} rowLabel={(r) => `${r.creator}, ${r.kind}`} selectable />\n            </Widget>\n          </DashboardLayout>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n"
+      },
+      {
+        "name": "basic",
+        "title": "The shell alone",
+        "description": "Sidebar with a group and a count, header with an action, the content.",
+        "path": "examples/app-shell/basic.tsx",
+        "module": "@krizaka/ui/registry/examples/app-shell/basic",
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppShell } from \"@krizaka/ui/app-shell\";\nimport { Button } from \"@krizaka/ui/button\";\n\nconst dot = <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" aria-hidden><circle cx=\"12\" cy=\"12\" r=\"7\" /></svg>;\n\n// The shell alone: the sidebar (it collapses to its icons on a desktop, opens as a drawer on a phone), the header, the\n// content. Your router's links go in `AppShell.Item asChild`.\nexport default function AppShellBasic() {\n  return (\n    <AppShell.Root className=\"min-h-[32rem]\">\n      <AppShell.Sidebar\n        label=\"Studio\"\n        brand={<><ProductLogo id=\"orochia\" size={24} animated={false} /> Studio</>}\n        collapseLabels={[\"Collapse\", \"Expand\"]}\n        closeLabel=\"Close the menu\"\n      >\n        <AppShell.Item href=\"#home\" icon={dot} label=\"Home\" current />\n        <AppShell.Item href=\"#videos\" icon={dot} label=\"Videos\" badge={3} />\n        <AppShell.Group>Money</AppShell.Group>\n        <AppShell.Item href=\"#earnings\" icon={dot} label=\"Earnings\" />\n      </AppShell.Sidebar>\n      <AppShell.Body>\n        <AppShell.Header title=\"Home\" menuLabel=\"Open the menu\" actions={<Button size=\"sm\" variant=\"primary\" shape=\"cut\">Upload</Button>} />\n        <AppShell.Main>\n          <p className=\"text-sm text-fg-secondary\">The screen's content.</p>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "app-shell/app-shell.tsx",
+      "content": "// Client (the collapse, the drawer). The shell of an application screen, read from the products' consoles (Orochia\n// admin and studio, Orazaka web-admin and web-client): a sidebar of sections that collapses to its icons on a desktop,\n// a header with the screen's title and actions, the content — and below `md` the sidebar becomes a drawer opened from\n// the header (Radix Dialog: focus trap, Escape, focus return). Words arrive as props; links through `asChild`.\nimport { Dialog as DialogPrimitive, Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { ChevronGlyph, CloseGlyph } from \"../glyphs\";\n\nexport const appShell = tv({\n  slots: {\n    root: \"flex min-h-dvh w-full bg-surface-0 text-fg\",\n    sidebar:\n      \"sticky top-0 hidden h-dvh shrink-0 flex-col border-r border-border-subtle bg-surface-1 transition-[width] duration-300 motion-reduce:transition-none md:flex \" +\n      \"w-64 data-collapsed:w-[4.25rem]\",\n    drawer:\n      \"kz-dialog fixed inset-y-0 left-0 z-50 flex w-[min(20rem,88vw)] flex-col border-r border-border-default bg-surface-1 pl-[env(safe-area-inset-left)] shadow-lg focus:outline-hidden\",\n    overlay: \"kz-overlay fixed inset-0 z-50 bg-overlay backdrop-blur-xs\",\n    brand: \"flex h-14 shrink-0 items-center gap-2.5 px-4 font-display text-[15px] font-bold tracking-tight [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    nav: \"flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 py-2\",\n    group: \"mt-3 mb-1 px-3 font-mono text-[10.5px] font-semibold uppercase tracking-[0.14em] text-fg-secondary [[data-collapsed]_&]:sr-only\",\n    item:\n      \"group/item relative flex h-10 items-center gap-3 rounded-lg px-3 text-sm font-medium text-fg-secondary no-underline transition-colors \" +\n      \"hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent-soft aria-[current=page]:text-fg \" +\n      \"aria-[current=page]:before:absolute aria-[current=page]:before:inset-y-2 aria-[current=page]:before:-left-2 aria-[current=page]:before:w-1 aria-[current=page]:before:rounded-full aria-[current=page]:before:bg-accent \" +\n      \"[[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0 [&>svg]:h-[18px] [&>svg]:w-[18px] [&>svg]:shrink-0\",\n    itemLabel: \"min-w-0 flex-1 truncate [[data-collapsed]_&]:sr-only\",\n    itemBadge:\n      \"ml-auto inline-flex min-w-5 items-center justify-center rounded-full bg-accent px-1.5 text-[11px] font-bold text-on-accent \" +\n      \"[[data-collapsed]_&]:absolute [[data-collapsed]_&]:right-1.5 [[data-collapsed]_&]:top-1 [[data-collapsed]_&]:min-w-4 [[data-collapsed]_&]:px-1 [[data-collapsed]_&]:text-[10px]\",\n    footer: \"shrink-0 border-t border-border-subtle p-2\",\n    collapse:\n      \"hidden h-9 w-full items-center gap-2 rounded-lg px-3 text-xs font-medium text-fg-secondary hover:bg-surface-2 hover:text-fg md:flex \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [[data-collapsed]_&]:justify-center [[data-collapsed]_&]:px-0\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    header:\n      \"sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle bg-surface-0/85 px-4 backdrop-blur-xl md:px-6\",\n    menuButton:\n      \"inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border-subtle bg-surface-1 text-fg md:hidden \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    title: \"min-w-0 flex-1 truncate font-display text-base font-bold tracking-tight\",\n    actions: \"ml-auto flex shrink-0 items-center gap-2\",\n    main: \"min-w-0 flex-1 px-4 py-6 md:px-6 md:py-8\",\n  },\n});\nconst s = appShell();\n\ninterface ShellState {\n  collapsed: boolean;\n  setCollapsed: (value: boolean) => void;\n  open: boolean;\n  setOpen: (value: boolean) => void;\n  inDrawer: boolean;\n}\nconst ShellContext = React.createContext<ShellState | null>(null);\nconst useShell = () => {\n  const ctx = React.useContext(ShellContext);\n  if (!ctx) throw new Error(\"AppShell parts must be inside <AppShell.Root>\");\n  return ctx;\n};\n\nexport type AppShellRootProps = React.ComponentProps<\"div\"> & {\n  /** The sidebar starts collapsed to its icons (desktop). */\n  defaultCollapsed?: boolean;\n  /** Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice. */\n  collapsed?: boolean;\n  /** Called when the sidebar collapses or expands. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n};\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, className, ...props }: AppShellRootProps) {\n  const [own, setOwn] = React.useState(defaultCollapsed);\n  const [open, setOpen] = React.useState(false);\n  const collapsed = controlled ?? own;\n  const setCollapsed = React.useCallback(\n    (value: boolean) => {\n      if (controlled === undefined) setOwn(value);\n      onCollapsedChange?.(value);\n    },\n    [controlled, onCollapsedChange],\n  );\n  const value = React.useMemo(() => ({ collapsed, setCollapsed, open, setOpen, inDrawer: false }), [collapsed, setCollapsed, open]);\n  return (\n    <ShellContext.Provider value={value}>\n      <div className={s.root({ className })} {...props} />\n    </ShellContext.Provider>\n  );\n}\n\nexport type AppShellSidebarProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** The navigation's accessible name (`Studio`, `Administration`). */\n  label: string;\n  /** The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain). */\n  brand?: React.ReactNode;\n  /** The sections: `AppShell.Group` and `AppShell.Item`. */\n  children: React.ReactNode;\n  /** At the bottom, above the collapse button: the account, a plan, the version. */\n  footer?: React.ReactNode;\n  /** The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse. */\n  collapseLabels?: readonly [string, string];\n  /** The drawer's close button words (phone). */\n  closeLabel: string;\n};\n\nfunction SidebarContent({ brand, children, footer, collapseLabels, closeLabel }: Pick<AppShellSidebarProps, \"brand\" | \"children\" | \"footer\" | \"collapseLabels\" | \"closeLabel\">) {\n  const { collapsed, setCollapsed, inDrawer } = useShell();\n  return (\n    <>\n      <div className={s.brand()}>\n        {brand}\n        {inDrawer && (\n          <DialogPrimitive.Close className={cn(s.menuButton(), \"ml-auto flex\")} aria-label={closeLabel}>\n            <CloseGlyph className=\"h-4 w-4\" />\n          </DialogPrimitive.Close>\n        )}\n      </div>\n      <div className={s.nav()}>{children}</div>\n      {(footer || (collapseLabels && !inDrawer)) && (\n        <div className={s.footer()}>\n          {footer}\n          {collapseLabels && !inDrawer && (\n            <button type=\"button\" className={s.collapse()} aria-expanded={!collapsed} onClick={() => setCollapsed(!collapsed)}>\n              <ChevronGlyph direction={collapsed ? \"right\" : \"left\"} className=\"h-4 w-4\" />\n              <span className={collapsed ? \"sr-only\" : undefined}>{collapsed ? collapseLabels[1] : collapseLabels[0]}</span>\n            </button>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer. */\nexport function AppShellSidebar({ label, brand, children, footer, collapseLabels, closeLabel, className, ...props }: AppShellSidebarProps) {\n  const shell = useShell();\n  const content = { brand, children, footer, collapseLabels, closeLabel };\n  return (\n    <>\n      <nav aria-label={label} data-collapsed={shell.collapsed ? \"\" : undefined} className={s.sidebar({ className })} {...props}>\n        <SidebarContent {...content} />\n      </nav>\n      <DialogPrimitive.Root open={shell.open} onOpenChange={shell.setOpen}>\n        <DialogPrimitive.Portal>\n          <DialogPrimitive.Overlay className={s.overlay()} />\n          <DialogPrimitive.Content className={s.drawer()} aria-describedby={undefined}>\n            <DialogPrimitive.Title className=\"sr-only\">{label}</DialogPrimitive.Title>\n            <ShellContext.Provider value={{ ...shell, collapsed: false, inDrawer: true }}>\n              <nav aria-label={label} className=\"flex min-h-0 flex-1 flex-col\" onClick={(e) => (e.target as Element).closest(\"a\") && shell.setOpen(false)}>\n                <SidebarContent {...content} />\n              </nav>\n            </ShellContext.Provider>\n          </DialogPrimitive.Content>\n        </DialogPrimitive.Portal>\n      </DialogPrimitive.Root>\n    </>\n  );\n}\n\nexport type AppShellGroupProps = React.ComponentProps<\"p\"> & {\n  /** The group's name, above its items (hidden when the sidebar is collapsed). */\n  children: React.ReactNode;\n};\n\n/** A heading between groups of items. */\nexport function AppShellGroup({ className, ...props }: AppShellGroupProps) {\n  return <p className={s.group({ className })} {...props} />;\n}\n\nexport type AppShellItemProps = Omit<React.ComponentProps<\"a\">, \"children\"> & {\n  /** The item's icon (a signature icon): it stays when the sidebar collapses. */\n  icon?: React.ReactNode;\n  /** Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`). */\n  label: string;\n  /** The screen it opens is the current one: `aria-current=\"page\"`. */\n  current?: boolean;\n  /** A count beside it (unread, pending): a number or a few characters. */\n  badge?: React.ReactNode;\n  /** Renders your link (Next's `Link`) with the item's look: pass it as the only child. */\n  asChild?: boolean;\n  /** Your link element when `asChild`. */\n  children?: React.ReactElement;\n};\n\n/** A destination of the sidebar: icon, words, a count. */\nexport function AppShellItem({ icon, label, current, badge, asChild, children, className, ...props }: AppShellItemProps) {\n  const { collapsed } = useShell();\n  const Comp = asChild ? Slot.Root : \"a\";\n  const inner = (\n    <>\n      {icon}\n      <span className={s.itemLabel()}>{label}</span>\n      {badge != null && <span className={s.itemBadge()}>{badge}</span>}\n    </>\n  );\n  return (\n    <Comp aria-current={current ? \"page\" : undefined} title={collapsed ? label : undefined} className={s.item({ className })} {...props}>\n      {asChild && children ? React.cloneElement(children, undefined, inner) : inner}\n    </Comp>\n  );\n}\n\n/** The column right of the sidebar: Header, then Main. */\nexport function AppShellBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={s.body({ className })} {...props} />;\n}\n\nexport type AppShellHeaderProps = Omit<React.ComponentProps<\"header\">, \"title\"> & {\n  /** The screen's title (an `h1`). */\n  title?: React.ReactNode;\n  /** The button that opens the drawer on a phone: its words. */\n  menuLabel: string;\n  /** The screen's actions, on the right. */\n  actions?: React.ReactNode;\n};\n\n/** The top of the screen: the drawer's button (phone), the title, the actions. Sticky. */\nexport function AppShellHeader({ title, menuLabel, actions, className, children, ...props }: AppShellHeaderProps) {\n  const { open, setOpen } = useShell();\n  return (\n    <header className={s.header({ className })} {...props}>\n      <button type=\"button\" className={s.menuButton()} aria-label={menuLabel} aria-expanded={open} aria-haspopup=\"dialog\" onClick={() => setOpen(true)}>\n        <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M4 7h16M4 12h16M4 17h10\" />\n        </svg>\n      </button>\n      {title && <h1 className={s.title()}>{title}</h1>}\n      {children}\n      {actions && <div className={s.actions()}>{actions}</div>}\n    </header>\n  );\n}\n\n/** The screen's content. */\nexport function AppShellMain({ className, ...props }: React.ComponentProps<\"main\">) {\n  return <main className={s.main({ className })} {...props} />;\n}\n\nexport const AppShell = {\n  Root: AppShellRoot,\n  Sidebar: AppShellSidebar,\n  Group: AppShellGroup,\n  Item: AppShellItem,\n  Body: AppShellBody,\n  Header: AppShellHeader,\n  Main: AppShellMain,\n};\n"
+    },
+    {
+      "path": "app-shell/index.ts",
+      "content": "/** @krizaka/ui/app-shell — `AppShell.Root/Sidebar/Group/Item/Body/Header/Main`: an application screen (sidebar that collapses, header, drawer on a phone). Client. */\nexport { AppShell, appShell, AppShellBody, AppShellGroup, type AppShellGroupProps, AppShellHeader, type AppShellHeaderProps, AppShellItem, type AppShellItemProps, AppShellMain, AppShellRoot, type AppShellRootProps, AppShellSidebar, type AppShellSidebarProps } from \"./app-shell\";\n"
+    },
+    {
+      "path": "app-shell/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"App shell\",\n  summary: \"The shell of an application screen: a sidebar of sections that collapses to its icons on a desktop and opens as a drawer on a phone, a sticky header with the screen's title and actions, the content.\",\n  status: \"beta\",\n  category: \"layouts\",\n  platforms: \"web\",\n  whenToUse: [\"Every signed-in screen of a product: a studio, a console, an administration.\", \"When the app has more than four destinations — fewer fit a NavBar.\"],\n  whenNotToUse: [\n    { when: \"For a public page of a site.\", use: \"marketing-layout\" },\n    { when: \"For a mobile app's tabs: React Native has its own tab bar.\" },\n  ],\n  bestPractices: [\"Five to nine items, grouped by what the user does (`AppShell.Group`), the current one marked with `current`.\", \"Give every item an icon: it is all that remains when the sidebar collapses (its words become a tooltip).\", \"Persist the collapse with `collapsed` + `onCollapsedChange`; put the account in the sidebar's `footer`.\", \"Render your router's links with `AppShell.Item asChild`.\"],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Moves through the sidebar's items, the collapse button and the header's actions.\" },\n      { keys: \"Esc\", action: \"Closes the drawer on a phone and returns the focus to the menu button.\" }\n    ],\n    notes: [\"The sidebar is a `nav` named by `label`; the current item carries `aria-current=\\\"page\\\"`.\", \"On a phone the drawer is a modal dialog (Radix): focus trapped inside, Escape and the overlay close it, the focus returns to the button.\", \"The header's title is the screen's `h1`; nested layouts use `headingAs=\\\"h2\\\"`.\"],\n  },\n  related: [\"dashboard-layout\", \"nav-bar\", \"dialog\"],\n  web: {\n    imports: [\"AppShell\"],\n    examples: [\n      { name: \"orochia-studio\", title: \"Orochia studio\", description: \"Elena's home in the creator studio: the shell around this week's figures, the payout, the auction and the sales.\", template: true },\n      { name: \"admin-console\", title: \"Administration console\", description: \"A review queue in a console: sections, counts and a sortable table with bulk actions (cards on a phone).\", template: true },\n      { name: \"basic\", title: \"The shell alone\", description: \"Sidebar with a group and a count, header with an action, the content.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "glyphs.tsx",
+      "content": "// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\nexport const ArrowGlyph = ({ direction = \"right\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" }) => (\n  <Glyph {...p}>\n    <path d={direction === \"left\" ? \"M19 12H5m0 0 6-6m-6 6 6 6\" : \"M5 12h14m0 0-6-6m6 6-6 6\"} />\n  </Glyph>\n);\nexport const ExternalGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 4h6v6M20 4l-9 9\" />\n    <path d=\"M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4\" />\n  </Glyph>\n);\nexport const WarningGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 4 2.5 20h19L12 4Z\" />\n    <path d=\"M12 10v4M12 17.2v.1\" />\n  </Glyph>\n);\nexport const CopyGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" />\n    <path d=\"M15 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3\" />\n  </Glyph>\n);\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    }
+  ],
+  "dependencies": [
+    "radix-ui@^1.7.0",
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "examples/app-shell/orochia-studio.tsx",
+    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppShell } from \"@krizaka/ui/app-shell\";\nimport { Avatar } from \"@krizaka/ui/avatar\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DashboardLayout, Widget } from \"@krizaka/ui/dashboard-layout\";\nimport { Meter } from \"@krizaka/ui/meter\";\nimport { Stat } from \"@krizaka/ui/stat\";\n\nconst icon = (d: string) => (\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n    <path d={d} />\n  </svg>\n);\nconst NAV = [\n  { id: \"home\", label: \"Home\", d: \"M4 11 12 4l8 7v9H4z\", current: true },\n  { id: \"videos\", label: \"Videos\", d: \"M4 6h12v12H4zM16 10l4-2v8l-4-2\", badge: 2 },\n  { id: \"auctions\", label: \"Auctions\", d: \"M5 19h10M8 5l6 6M11 2l6 6M6 13l4-4\" },\n  { id: \"challenges\", label: \"Challenges\", d: \"M12 3v18M5 7h10l-2 3 2 3H5\" },\n];\nconst MONEY = [\n  { id: \"earnings\", label: \"Earnings\", d: \"M4 18h16M7 14l3-3 3 2 5-6\" },\n  { id: \"payouts\", label: \"Payouts\", d: \"M3 7h18v10H3zM12 12h.01\" },\n];\nconst SALES = [\n  { what: \"Unlock · “Night shoot, part 2”\", who: \"Léa M.\", net: \"€4.50\" },\n  { what: \"Tip\", who: \"Samir K.\", net: \"€9.00\" },\n  { what: \"Auction won · “Backstage cut”\", who: \"Inès B.\", net: \"€61.20\" },\n];\n\n// TEMPLATE — Orochia's creator studio, Elena's home: the shell (sidebar of the studio, drawer on a phone) around a\n// dashboard — this week's figures, the payout on its way, the latest sales, the next auction. On a phone the sidebar\n// is a drawer, the stats stack two by two, every widget takes the full width.\nexport default function AppShellOrochiaStudio() {\n  return (\n    <div className=\"brand-orochia\">\n      <AppShell.Root>\n        <AppShell.Sidebar\n          label=\"Studio\"\n          brand={<><ProductLogo id=\"orochia\" size={24} animated={false} /> Orochia</>}\n          collapseLabels={[\"Collapse\", \"Expand\"]}\n          closeLabel=\"Close the menu\"\n          footer={\n            <div className=\"flex items-center gap-2.5 px-2 py-2 text-sm\">\n              <Avatar fallback=\"EV\" size=\"sm\" />\n              <span className=\"min-w-0 truncate font-medium\">Elena Varga</span>\n            </div>\n          }\n        >\n          {NAV.map((n) => (\n            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} current={n.current} badge={n.badge} />\n          ))}\n          <AppShell.Group>Money</AppShell.Group>\n          {MONEY.map((n) => (\n            <AppShell.Item key={n.id} href={`#${n.id}`} icon={icon(n.d)} label={n.label} />\n          ))}\n        </AppShell.Sidebar>\n        <AppShell.Body>\n          <AppShell.Header\n            title=\"Studio\"\n            menuLabel=\"Open the menu\"\n            actions={<Button size=\"sm\" variant=\"primary\" shape=\"cut\">Upload a video</Button>}\n          />\n          <AppShell.Main>\n            <DashboardLayout headingAs=\"h2\" eyebrow=\"This week\" title=\"Good morning, Elena\" description=\"Three sales since yesterday — your auction ends tonight.\">\n              <Widget level={3} title=\"Your week\" span=\"full\">\n                <div className=\"grid grid-cols-2 gap-6 md:grid-cols-4\">\n                  <Stat label=\"Views\" value=\"12.4k\" trend=\"up\" trendLabel=\"+8 %\" hint=\"7 days\" />\n                  <Stat label=\"Supporters\" value=\"318\" trend=\"up\" trendLabel=\"+21\" hint=\"7 days\" />\n                  <Stat label=\"Earned\" value=\"€902\" trend=\"up\" trendLabel=\"+14 %\" hint=\"after the 10 % fee\" />\n                  <Stat label=\"Unlocks\" value=\"146\" trend=\"flat\" trendLabel=\"±0\" hint=\"7 days\" />\n                </div>\n              </Widget>\n              <Widget level={3} title=\"Next payout\" description=\"Every Monday, from €20\" span={2}>\n                <Meter label=\"Towards your payout\" value={74} max={100} valueText=\"€74 of €100 goal\" showLabel />\n                <p className=\"mt-3 text-sm text-fg-secondary\">€902 will reach your bank on Monday.</p>\n              </Widget>\n              <Widget level={3} title=\"Auction\" description=\"“Backstage cut”\" span={2} action={<Badge tone=\"accent\" dot>Open</Badge>}>\n                <p className=\"font-display text-3xl font-extrabold text-fg\">€68</p>\n                <p className=\"text-sm text-fg-secondary\">7 bids · ends tonight at 21:00</p>\n              </Widget>\n              <Widget level={3} title=\"Latest sales\" span=\"full\" action={<Button size=\"sm\" variant=\"ghost\">See all</Button>}>\n                <ul className=\"divide-y divide-border-subtle\">\n                  {SALES.map((s) => (\n                    <li key={s.what} className=\"flex items-center justify-between gap-3 py-2.5 text-sm\">\n                      <span className=\"min-w-0\">\n                        <span className=\"block truncate font-medium text-fg\">{s.what}</span>\n                        <span className=\"text-fg-secondary\">{s.who}</span>\n                      </span>\n                      <span className=\"font-mono font-semibold text-fg-success\">{s.net}</span>\n                    </li>\n                  ))}\n                </ul>\n              </Widget>\n            </DashboardLayout>\n          </AppShell.Main>\n        </AppShell.Body>\n      </AppShell.Root>\n    </div>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "AppShellRoot",
+      "description": "The shell: holds the collapse (desktop) and the drawer (phone) state. Children: Sidebar, then Body.",
+      "props": [
+        {
+          "name": "collapsed",
+          "type": "boolean",
+          "default": null,
+          "description": "Controlled collapse (desktop): pair with `onCollapsedChange` to persist the choice.",
+          "required": false
+        },
+        {
+          "name": "defaultCollapsed",
+          "type": "boolean",
+          "default": "false",
+          "description": "The sidebar starts collapsed to its icons (desktop).",
+          "required": false
+        },
+        {
+          "name": "onCollapsedChange",
+          "type": "((collapsed: boolean) => void)",
+          "default": null,
+          "description": "Called when the sidebar collapses or expands.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "AppShellSidebar",
+      "description": "The sidebar: on a desktop a column that collapses to its icons; on a phone the same content in a drawer.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The sections: `AppShell.Group` and `AppShell.Item`.",
+          "required": true
+        },
+        {
+          "name": "closeLabel",
+          "type": "string",
+          "default": null,
+          "description": "The drawer's close button words (phone).",
+          "required": true
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "The navigation's accessible name (`Studio`, `Administration`).",
+          "required": true
+        },
+        {
+          "name": "brand",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The brand at the top: the product's mark and name (a link home through `asChild` of your router, or plain).",
+          "required": false
+        },
+        {
+          "name": "collapseLabels",
+          "type": "readonly [string, string]",
+          "default": null,
+          "description": "The collapse button's words, `[collapse, expand]` (desktop only). Without it the sidebar cannot collapse.",
+          "required": false
+        },
+        {
+          "name": "footer",
+          "type": "ReactNode",
+          "default": null,
+          "description": "At the bottom, above the collapse button: the account, a plan, the version.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "AppShellGroup",
+      "description": "A heading between groups of items.",
+      "props": []
+    },
+    {
+      "component": "AppShellItem",
+      "description": "A destination of the sidebar: icon, words, a count.",
+      "props": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": null,
+          "description": "Its words: the accessible name, hidden visually when collapsed (the icon carries a tooltip through `title`).",
+          "required": true
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "default": null,
+          "description": "Renders your link (Next's `Link`) with the item's look: pass it as the only child.",
+          "required": false
+        },
+        {
+          "name": "badge",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A count beside it (unread, pending): a number or a few characters.",
+          "required": false
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<unknown, string | JSXElementConstructor<any>>",
+          "default": null,
+          "description": "Your link element when `asChild`.",
+          "required": false
+        },
+        {
+          "name": "current",
+          "type": "boolean",
+          "default": null,
+          "description": "The screen it opens is the current one: `aria-current=\"page\"`.",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The item's icon (a signature icon): it stays when the sidebar collapses.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "AppShellBody",
+      "description": "The column right of the sidebar: Header, then Main.",
+      "props": []
+    },
+    {
+      "component": "AppShellHeader",
+      "description": "The top of the screen: the drawer's button (phone), the title, the actions. Sticky.",
+      "props": [
+        {
+          "name": "menuLabel",
+          "type": "string",
+          "default": null,
+          "description": "The button that opens the drawer on a phone: its words.",
+          "required": true
+        },
+        {
+          "name": "actions",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The screen's actions, on the right.",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The screen's title (an `h1`).",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "AppShellMain",
+      "description": "The screen's content.",
+      "props": []
+    }
+  ]
+}

package/registry/argument-card.json

@@ -206,7 +206,7 @@
     },
     {
       "path": "meta.ts",
-      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"action-bar\"\n  | \"alert\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landscape\"\n  | \"link-card\"\n  | \"loader\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its templates.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [],