@krizaka/ui 3.29.0 → 3.31.0

package/registry/app-shell.json

@@ -333,7 +333,7 @@
         "why": "A creator moves between the sections of an app and reads this week's figures at home.",
         "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"
+        "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\">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",
@@ -344,7 +344,7 @@
         "why": "An administrator works a queue: scans it, sorts it and acts on many rows at once.",
         "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"
+        "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\">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",
@@ -352,7 +352,7 @@
         "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"
+        "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\">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"
       },
       {
         "name": "desktop",
@@ -360,7 +360,7 @@
         "description": "The Orazaka Mac app's window (`desktop`): the title bar moves the window and clears the traffic lights, no drawer, the desktop's density, ⌘1–⌘3 to the sections.",
         "path": "examples/app-shell/desktop.tsx",
         "module": "@krizaka/ui/registry/examples/app-shell/desktop",
-        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppShell } from \"@krizaka/ui/app-shell\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Progress } from \"@krizaka/ui/progress\";\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 Mac app's window (Tauri 2, ADR-002): `desktop` — the title bar moves the window and clears the traffic lights, no\n// drawer, desktop density. The menu bar answers the same keys (`acceleratorOf(\"mod+1\")` → `CmdOrCtrl+1`).\nexport default function AppShellDesktop() {\n  return (\n    <AppShell.Root desktop style={{ [\"--kz-window-height\" as string]: \"34rem\" }}>\n      <AppShell.Sidebar label=\"Orazaka\" brand={<><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</>} collapseLabels={[\"Collapse\", \"Expand\"]} closeLabel=\"Close\">\n        <AppShell.Item href=\"#workspace\" icon={dot} label=\"Workspace\" shortcut=\"mod+1\" />\n        <AppShell.Item href=\"#models\" icon={dot} label=\"Models\" shortcut=\"mod+2\" current />\n        <AppShell.Item href=\"#jobs\" icon={dot} label=\"Jobs\" shortcut=\"mod+3\" badge={2} />\n        <AppShell.Group>Machine</AppShell.Group>\n        <AppShell.Item href=\"#backups\" icon={dot} label=\"Backups\" />\n        <AppShell.Item href=\"#logs\" icon={dot} label=\"Logs\" />\n      </AppShell.Sidebar>\n      <AppShell.Body>\n        <AppShell.Header title=\"Models\" menuLabel=\"Open the menu\" actions={<Button size=\"sm\" variant=\"primary\" shape=\"cut\">Add a model</Button>} />\n        <AppShell.Main className=\"space-y-4\">\n          <div className=\"flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-surface-1 p-4\">\n            <div className=\"min-w-0 flex-1 space-y-2\">\n              <p className=\"text-sm font-semibold\">qwen2.5 7B · chat</p>\n              <Progress value={64} label=\"Downloading qwen2.5 7B\" />\n            </div>\n            <Badge tone=\"accent\">3.1 of 4.8 GB</Badge>\n          </div>\n          <p className=\"text-[13px] text-fg-secondary\">Models run on this Mac (Metal). Nothing leaves your network.</p>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n"
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AppShell } from \"@krizaka/ui/app-shell\";\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Progress } from \"@krizaka/ui/progress\";\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 Mac app's window (Tauri 2, ADR-002): `desktop` — the title bar moves the window and clears the traffic lights, no\n// drawer, desktop density. The menu bar answers the same keys (`acceleratorOf(\"mod+1\")` → `CmdOrCtrl+1`).\nexport default function AppShellDesktop() {\n  return (\n    <AppShell.Root desktop style={{ [\"--kz-window-height\" as string]: \"34rem\" }}>\n      <AppShell.Sidebar label=\"Orazaka\" brand={<><ProductLogo id=\"orazaka\" size={22} animated={false} /> Orazaka</>} collapseLabels={[\"Collapse\", \"Expand\"]} closeLabel=\"Close\">\n        <AppShell.Item href=\"#workspace\" icon={dot} label=\"Workspace\" shortcut=\"mod+1\" />\n        <AppShell.Item href=\"#models\" icon={dot} label=\"Models\" shortcut=\"mod+2\" current />\n        <AppShell.Item href=\"#jobs\" icon={dot} label=\"Jobs\" shortcut=\"mod+3\" badge={2} />\n        <AppShell.Group>Machine</AppShell.Group>\n        <AppShell.Item href=\"#backups\" icon={dot} label=\"Backups\" />\n        <AppShell.Item href=\"#logs\" icon={dot} label=\"Logs\" />\n      </AppShell.Sidebar>\n      <AppShell.Body>\n        <AppShell.Header title=\"Models\" menuLabel=\"Open the menu\" actions={<Button size=\"sm\" variant=\"primary\">Add a model</Button>} />\n        <AppShell.Main className=\"space-y-4\">\n          <div className=\"flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-surface-1 p-4\">\n            <div className=\"min-w-0 flex-1 space-y-2\">\n              <p className=\"text-sm font-semibold\">qwen2.5 7B · chat</p>\n              <Progress value={64} label=\"Downloading qwen2.5 7B\" />\n            </div>\n            <Badge tone=\"accent\">3.1 of 4.8 GB</Badge>\n          </div>\n          <p className=\"text-[13px] text-fg-secondary\">Models run on this Mac (Metal). Nothing leaves your network.</p>\n        </AppShell.Main>\n      </AppShell.Body>\n    </AppShell.Root>\n  );\n}\n"
       }
     ]
   },

package/registry/argument-card.json

@@ -41,8 +41,7 @@
     "What it does, the bird's quote and the long version are never on the face: a detail page (`more`), or `panelLabel`.",
     "One idea per card; one bird per idea: small in the corner (`mark`), its quote (`rule`) where the card unfolds.",
     "Give each subject its hue with `--kz-hue` on the card (or a wrapper); the brand's accent otherwise.",
-    "Secondary actions as an icon `ActionBar` in `actions`; the way in as `more`.",
-    "`hover=\"quiet\"` for reasons read as prose (a product's argument, a policy): no glow, a lift and a ring on focus. The default `light` keeps the pointer's light."
+    "Secondary actions as an icon `ActionBar` in `actions`; the way in as `more`."
   ],
   "accessibility": {
     "keyboard": [
@@ -54,7 +53,7 @@
     "notes": [
       "An `article` named by its title; the hook's label is read before the line (visually hidden); the fold is a native `details` element.",
       "The way in is described by the card's title (`aria-describedby`), so several `Read more` links stay distinct.",
-      "The lift, the light and the panel's chevron stop under `prefers-reduced-motion`; the quiet hover keeps its surface and ring, and never lifts."
+      "One quiet hover (krizaka-ui#393): the surface and the hairline go one step up in a short colour transition — nothing moves, no light follows the pointer; a ring on the whole card when a link inside takes the keyboard focus. The panel's chevron stops under `prefers-reduced-motion`."
     ]
   },
   "related": [
@@ -109,7 +108,7 @@
             "name": "hover",
             "type": "CardHover",
             "default": null,
-            "description": "The hover of the card: `light` (the pointer's light, the default) or `quiet` (no glow, a lift, a ring on focus).",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0.",
             "required": false
           },
           {
@@ -203,21 +202,13 @@
         "module": "@krizaka/ui/registry/examples/argument-card/grid",
         "code": "import { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\n\nconst reasons = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\" },\n  { id: \"pipeline\", title: \"One pipeline\", hook: \"Elsewhere, each feature guards itself — or forgets.\" },\n  { id: \"telemetry\", title: \"Zero telemetry\", hook: \"Elsewhere, usage data is the price of the free tier.\" },\n];\n\n// A product page's reasons, side by side: each card the same height, the hook at the same place on every card.\nexport default function ArgumentCardGrid() {\n  return (\n    <CardGrid className=\"w-full max-w-5xl\" min={260} reveal={false}>\n      {reasons.map((r) => (\n        <ArgumentCard key={r.id} id={`why-${r.id}`} title={r.title} hook={{ label: \"The trap elsewhere\", text: r.hook }} more={{ href: `#${r.id}`, label: \"Details\" }} />\n      ))}\n    </CardGrid>\n  );\n}\n"
       },
-      {
-        "name": "hover-light",
-        "title": "The light hover",
-        "description": "`hover=\"light\"`, the default: the pointer's light and the coloured lift, said explicitly.",
-        "path": "examples/argument-card/hover-light.tsx",
-        "module": "@krizaka/ui/registry/examples/argument-card/hover-light",
-        "code": "import { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\n\nconst reasons = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\" },\n  { id: \"pipeline\", title: \"One pipeline\", hook: \"Elsewhere, each feature guards itself — or forgets.\" },\n  { id: \"telemetry\", title: \"Zero telemetry\", hook: \"Elsewhere, usage data is the price of the free tier.\" },\n];\n\n// The default hover, said explicitly: the pointer's light on the reasons.\nexport default function ArgumentCardHoverLight() {\n  return (\n    <CardGrid className=\"w-full max-w-5xl\" min={260} reveal={false}>\n      {reasons.map((r) => (\n        <ArgumentCard key={r.id} hover=\"light\" id={`light-${r.id}`} title={r.title} hook={{ label: \"The trap elsewhere\", text: r.hook }} more={{ href: `#${r.id}`, label: \"Details\" }} />\n      ))}\n    </CardGrid>\n  );\n}\n"
-      },
       {
         "name": "hover-quiet",
         "title": "The quiet hover",
         "description": "`hover=\"quiet\"` on a grid of reasons: no glow, a lift, a ring on focus.",
         "path": "examples/argument-card/hover-quiet.tsx",
         "module": "@krizaka/ui/registry/examples/argument-card/hover-quiet",
-        "code": "import { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\n\nconst reasons = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\" },\n  { id: \"pipeline\", title: \"One pipeline\", hook: \"Elsewhere, each feature guards itself — or forgets.\" },\n  { id: \"telemetry\", title: \"Zero telemetry\", hook: \"Elsewhere, usage data is the price of the free tier.\" },\n];\n\n// The quiet hover on the reasons: no glow, a lift, a ring on focus. The grid is quiet, so every card is.\nexport default function ArgumentCardHoverQuiet() {\n  return (\n    <CardGrid className=\"w-full max-w-5xl\" min={260} reveal={false} hover=\"quiet\">\n      {reasons.map((r) => (\n        <ArgumentCard key={r.id} id={`quiet-${r.id}`} title={r.title} hook={{ label: \"The trap elsewhere\", text: r.hook }} more={{ href: `#${r.id}`, label: \"Details\" }} />\n      ))}\n    </CardGrid>\n  );\n}\n"
+        "code": "import { ArgumentCard } from \"@krizaka/ui/argument-card\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\n\nconst reasons = [\n  { id: \"local\", title: \"Local inference\", hook: \"Elsewhere, every prompt crosses the ocean.\" },\n  { id: \"pipeline\", title: \"One pipeline\", hook: \"Elsewhere, each feature guards itself — or forgets.\" },\n  { id: \"telemetry\", title: \"Zero telemetry\", hook: \"Elsewhere, usage data is the price of the free tier.\" },\n];\n\n// The quiet hover on the reasons: no glow, a lift, a ring on focus. The grid is quiet, so every card is.\nexport default function ArgumentCardHoverQuiet() {\n  return (\n    <CardGrid className=\"w-full max-w-5xl\" min={260} reveal={false}>\n      {reasons.map((r) => (\n        <ArgumentCard key={r.id} id={`quiet-${r.id}`} title={r.title} hook={{ label: \"The trap elsewhere\", text: r.hook }} more={{ href: `#${r.id}`, label: \"Details\" }} />\n      ))}\n    </CardGrid>\n  );\n}\n"
       }
     ]
   },
@@ -225,7 +216,7 @@
   "files": [
     {
       "path": "argument-card/argument-card.tsx",
-      "content": "// Server-safe. A card that argues (blocks.css), compact: who (icon, name, facts) → the trap in one line → the way in.\n// The long version — what it does, the rule a bird stands for, the reasons — waits in a panel the reader opens (a\n// native <details>: keyboard, screen readers, no script). Cards of a row share their height; the panel and the foot\n// sit at the bottom, at the same place on every card.\nimport type * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ChevronGlyph } from \"../glyphs\";\nimport { type CardHover, cardHoverClass } from \"../link-card/link-card\";\nimport { type Fact, Facts } from \"../page/page\";\n\nexport type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The id of the title: the card's accessible name. */\n  id: string;\n  /** The title: the subject (a building block, a feature, a plan). */\n  title: React.ReactNode;\n  /** The icon tile (a signature icon): decorative. */\n  icon?: React.ReactNode;\n  /** A mono line under the title (a repository, a package). */\n  meta?: React.ReactNode;\n  /** Small, in the top corner: the bird whose rule it is (a `Mascot` of 40 px, still). Decorative. */\n  mark?: React.ReactNode;\n  /** Compact facts under the line: registry and version, a status said honestly. */\n  facts?: readonly Fact[];\n  /**\n   * The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. `label` (`The trap`) is\n   * read by assistive technology before it, not shown.\n   */\n  hook: { label: React.ReactNode; text: React.ReactNode };\n  /** Unfolded only: what it does, as a few short points, with their label (`What it does`). */\n  points?: { label: React.ReactNode; items: readonly React.ReactNode[] };\n  /** Unfolded only: the rule told by a bird (a `MascotQuote`, `variant=\"inline\"`). */\n  rule?: React.ReactNode;\n  /** Unfolded only: the long version, as labelled paragraphs. */\n  details?: readonly { label: React.ReactNode; text: React.ReactNode }[];\n  /**\n   * Without a detail page: the words that unfold the card in place (`Details`) — a native `<details>` holding the\n   * points, the rule and the long version. Ignored with `more`: the detail page holds them.\n   */\n  panelLabel?: React.ReactNode;\n  /** The way in: a detail page — one short action at the foot (`Details`). With it, the card is only its face. */\n  more?: { href: string; label: React.ReactNode };\n  /** Discreet secondary actions at the foot, on the right (an `ActionBar` with `variant=\"icons\"`). */\n  actions?: React.ReactNode;\n  /**\n   * The title's level.\n   * @default 3\n   */\n  level?: 2 | 3 | 4;\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n  /** The hover of the card: `light` (the pointer's light, the default) or `quiet` (no glow, a lift, a ring on focus). */\n  hover?: CardHover;\n};\n\n/**\n * A card that argues, compact (about a third of a full card): who (icon, name, meta; the bird small in the corner) →\n * the problem in one line → compact facts → one short action. What it does, the bird's rule and the long version are\n * never on the face: they live on the detail page (`more`) or in the card unfolded in place (`panelLabel`).\n */\nexport function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, hover, className, ...props }: ArgumentCardProps) {\n  const H = `h${level}` as \"h2\" | \"h3\" | \"h4\";\n  const fold = !more && panelLabel && (points || rule || (details && details.length > 0));\n  return (\n    <article className={cn(\"kz-block-card kz-arg\", cardHoverClass(hover), className)} data-kz-light=\"\" aria-labelledby={id} {...props}>\n      <div className=\"kz-arg-head\">\n        {icon && (\n          <span className=\"kz-block-icon\" aria-hidden>\n            {icon}\n          </span>\n        )}\n        <div className=\"kz-arg-id\">\n          <H id={id} className=\"kz-arg-title\">\n            {title}\n          </H>\n          {meta && <p className=\"kz-arg-meta\">{meta}</p>}\n        </div>\n        {mark && (\n          <span className=\"kz-arg-mark\" aria-hidden>\n            {mark}\n          </span>\n        )}\n      </div>\n      <p className=\"kz-arg-line\">\n        <span className=\"kz-sr-only\">{hook.label} — </span>\n        {hook.text}\n      </p>\n      {facts && facts.length > 0 && <Facts items={facts} />}\n      {fold && (\n        <details className=\"kz-arg-panel\">\n          <summary>\n            {panelLabel} <ChevronGlyph className=\"h-3.5 w-3.5\" />\n          </summary>\n          <div className=\"kz-arg-panel-body\">\n            {points && (\n              <div>\n                <p className=\"kz-label\">{points.label}</p>\n                <ul className=\"kz-list\">\n                  {points.items.map((item, i) => (\n                    <li key={i}>{item}</li>\n                  ))}\n                </ul>\n              </div>\n            )}\n            {details && details.length > 0 && (\n              <dl>\n                {details.map((d, i) => (\n                  <div key={i}>\n                    <dt className=\"kz-label\">{d.label}</dt>\n                    <dd>{d.text}</dd>\n                  </div>\n                ))}\n              </dl>\n            )}\n            {rule}\n          </div>\n        </details>\n      )}\n      {(more || actions) && (\n        <div className=\"kz-arg-foot\">\n          {more ? (\n            <BlockLink href={more.href} linkAs={linkAs} className=\"kz-arg-more\" aria-describedby={id}>\n              {more.label} <ArrowGlyph className=\"h-3.5 w-3.5\" />\n            </BlockLink>\n          ) : (\n            <span />\n          )}\n          {actions}\n        </div>\n      )}\n    </article>\n  );\n}\n"
+      "content": "// Server-safe. A card that argues (blocks.css), compact: who (icon, name, facts) → the trap in one line → the way in.\n// The long version — what it does, the rule a bird stands for, the reasons — waits in a panel the reader opens (a\n// native <details>: keyboard, screen readers, no script). Cards of a row share their height; the panel and the foot\n// sit at the bottom, at the same place on every card.\nimport type * as React from \"react\";\n\nimport { BlockLink, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ChevronGlyph } from \"../glyphs\";\nimport { type CardHover, cardHoverClass } from \"../link-card/link-card\";\nimport { type Fact, Facts } from \"../page/page\";\n\nexport type ArgumentCardProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The id of the title: the card's accessible name. */\n  id: string;\n  /** The title: the subject (a building block, a feature, a plan). */\n  title: React.ReactNode;\n  /** The icon tile (a signature icon): decorative. */\n  icon?: React.ReactNode;\n  /** A mono line under the title (a repository, a package). */\n  meta?: React.ReactNode;\n  /** Small, in the top corner: the bird whose rule it is (a `Mascot` of 40 px, still). Decorative. */\n  mark?: React.ReactNode;\n  /** Compact facts under the line: registry and version, a status said honestly. */\n  facts?: readonly Fact[];\n  /**\n   * The problem in ONE line (≤ 90 characters): what a reader keeps if they read nothing else. `label` (`The trap`) is\n   * read by assistive technology before it, not shown.\n   */\n  hook: { label: React.ReactNode; text: React.ReactNode };\n  /** Unfolded only: what it does, as a few short points, with their label (`What it does`). */\n  points?: { label: React.ReactNode; items: readonly React.ReactNode[] };\n  /** Unfolded only: the rule told by a bird (a `MascotQuote`, `variant=\"inline\"`). */\n  rule?: React.ReactNode;\n  /** Unfolded only: the long version, as labelled paragraphs. */\n  details?: readonly { label: React.ReactNode; text: React.ReactNode }[];\n  /**\n   * Without a detail page: the words that unfold the card in place (`Details`) — a native `<details>` holding the\n   * points, the rule and the long version. Ignored with `more`: the detail page holds them.\n   */\n  panelLabel?: React.ReactNode;\n  /** The way in: a detail page — one short action at the foot (`Details`). With it, the card is only its face. */\n  more?: { href: string; label: React.ReactNode };\n  /** Discreet secondary actions at the foot, on the right (an `ActionBar` with `variant=\"icons\"`). */\n  actions?: React.ReactNode;\n  /**\n   * The title's level.\n   * @default 3\n   */\n  level?: 2 | 3 | 4;\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n  /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0. */\n  hover?: CardHover;\n};\n\n/**\n * A card that argues, compact (about a third of a full card): who (icon, name, meta; the bird small in the corner) →\n * the problem in one line → compact facts → one short action. What it does, the bird's rule and the long version are\n * never on the face: they live on the detail page (`more`) or in the card unfolded in place (`panelLabel`).\n */\nexport function ArgumentCard({ id, title, icon, meta, mark, facts, hook, points, rule, details, panelLabel, more, actions, level = 3, linkAs, hover, className, ...props }: ArgumentCardProps) {\n  const H = `h${level}` as \"h2\" | \"h3\" | \"h4\";\n  const fold = !more && panelLabel && (points || rule || (details && details.length > 0));\n  return (\n    <article className={cn(\"kz-block-card kz-arg\", cardHoverClass(hover), className)} aria-labelledby={id} {...props}>\n      <div className=\"kz-arg-head\">\n        {icon && (\n          <span className=\"kz-block-icon\" aria-hidden>\n            {icon}\n          </span>\n        )}\n        <div className=\"kz-arg-id\">\n          <H id={id} className=\"kz-arg-title\">\n            {title}\n          </H>\n          {meta && <p className=\"kz-arg-meta\">{meta}</p>}\n        </div>\n        {mark && (\n          <span className=\"kz-arg-mark\" aria-hidden>\n            {mark}\n          </span>\n        )}\n      </div>\n      <p className=\"kz-arg-line\">\n        <span className=\"kz-sr-only\">{hook.label} — </span>\n        {hook.text}\n      </p>\n      {facts && facts.length > 0 && <Facts items={facts} />}\n      {fold && (\n        <details className=\"kz-arg-panel\">\n          <summary>\n            {panelLabel} <ChevronGlyph className=\"h-3.5 w-3.5\" />\n          </summary>\n          <div className=\"kz-arg-panel-body\">\n            {points && (\n              <div>\n                <p className=\"kz-label\">{points.label}</p>\n                <ul className=\"kz-list\">\n                  {points.items.map((item, i) => (\n                    <li key={i}>{item}</li>\n                  ))}\n                </ul>\n              </div>\n            )}\n            {details && details.length > 0 && (\n              <dl>\n                {details.map((d, i) => (\n                  <div key={i}>\n                    <dt className=\"kz-label\">{d.label}</dt>\n                    <dd>{d.text}</dd>\n                  </div>\n                ))}\n              </dl>\n            )}\n            {rule}\n          </div>\n        </details>\n      )}\n      {(more || actions) && (\n        <div className=\"kz-arg-foot\">\n          {more ? (\n            <BlockLink href={more.href} linkAs={linkAs} className=\"kz-arg-more\" aria-describedby={id}>\n              {more.label} <ArrowGlyph className=\"h-3.5 w-3.5\" />\n            </BlockLink>\n          ) : (\n            <span />\n          )}\n          {actions}\n        </div>\n      )}\n    </article>\n  );\n}\n"
     },
     {
       "path": "argument-card/index.ts",
@@ -233,7 +224,7 @@
     },
     {
       "path": "argument-card/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Argument card\",\n  summary:\n    \"A compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"The reasons of a product page, the building blocks of an open-source page, the options of a decision.\",\n    \"When each subject has a problem to state before its solution, and a reader who scans before reading.\",\n  ],\n  whenNotToUse: [\n    { when: \"When the card only leads somewhere.\", use: \"link-card\" },\n    { when: \"For the decisions behind a choice, compared side by side.\", use: \"decision-list\" },\n  ],\n  bestPractices: [\n    \"The hook is ONE line (≤ 90 characters, regular weight) a reader keeps in five seconds — never three bold lines.\",\n    \"What it does, the bird's quote and the long version are never on the face: a detail page (`more`), or `panelLabel`.\",\n    \"One idea per card; one bird per idea: small in the corner (`mark`), its quote (`rule`) where the card unfolds.\",\n    \"Give each subject its hue with `--kz-hue` on the card (or a wrapper); the brand's accent otherwise.\",\n    \"Secondary actions as an icon `ActionBar` in `actions`; the way in as `more`.\",\n    \"`hover=\\\"quiet\\\"` for reasons read as prose (a product's argument, a policy): no glow, a lift and a ring on focus. The default `light` keeps the pointer's light.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Enter / Space\", action: \"On the panel's summary, opens or closes the long version.\" }],\n    notes: [\n      \"An `article` named by its title; the hook's label is read before the line (visually hidden); the fold is a native `details` element.\",\n      \"The way in is described by the card's title (`aria-describedby`), so several `Read more` links stay distinct.\",\n      \"The lift, the light and the panel's chevron stop under `prefers-reduced-motion`; the quiet hover keeps its surface and ring, and never lifts.\",\n    ],\n  },\n  related: [\"card-grid\", \"mascot-quote\", \"action-bar\"],\n  web: {\n    imports: [\"ArgumentCard\"],\n    examples: [\n      { name: \"building-block\", title: \"A building block\", description: \"Compact: the duck in the corner, the trap in one line, facts, one short action and an icon action.\" },\n      { name: \"unfold\", title: \"Unfolded in place\", description: \"No detail page: `panelLabel` unfolds what it does, the cost and the pigeon's rule.\" },\n      { name: \"grid\", title: \"Three reasons\", description: \"A product's reasons side by side in a grid: the hook and the way in, no panel.\" },\n      { name: \"hover-light\", title: \"The light hover\", description: \"`hover=\\\"light\\\"`, the default: the pointer's light and the coloured lift, said explicitly.\" },\n      { name: \"hover-quiet\", title: \"The quiet hover\", description: \"`hover=\\\"quiet\\\"` on a grid of reasons: no glow, a lift, a ring on focus.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Argument card\",\n  summary:\n    \"A compact card that argues — about a third of a full card: who (icon, name, the bird in the corner), the trap in one line, facts and one short action; the long version lives on a detail page or unfolds in place.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  parity: { native: { status: \"n/a\", reason: \"A block of a public site's page; an app screen on a phone is built from Screen, Header and Card.\", use: \"card\" }, desktop: { status: \"n/a\", reason: \"A public site's page, not a window of the Mac app.\" } },\n  whenToUse: [\n    \"The reasons of a product page, the building blocks of an open-source page, the options of a decision.\",\n    \"When each subject has a problem to state before its solution, and a reader who scans before reading.\",\n  ],\n  whenNotToUse: [\n    { when: \"When the card only leads somewhere.\", use: \"link-card\" },\n    { when: \"For the decisions behind a choice, compared side by side.\", use: \"decision-list\" },\n  ],\n  bestPractices: [\n    \"The hook is ONE line (≤ 90 characters, regular weight) a reader keeps in five seconds — never three bold lines.\",\n    \"What it does, the bird's quote and the long version are never on the face: a detail page (`more`), or `panelLabel`.\",\n    \"One idea per card; one bird per idea: small in the corner (`mark`), its quote (`rule`) where the card unfolds.\",\n    \"Give each subject its hue with `--kz-hue` on the card (or a wrapper); the brand's accent otherwise.\",\n    \"Secondary actions as an icon `ActionBar` in `actions`; the way in as `more`.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Enter / Space\", action: \"On the panel's summary, opens or closes the long version.\" }],\n    notes: [\n      \"An `article` named by its title; the hook's label is read before the line (visually hidden); the fold is a native `details` element.\",\n      \"The way in is described by the card's title (`aria-describedby`), so several `Read more` links stay distinct.\",\n      \"One quiet hover (krizaka-ui#393): the surface and the hairline go one step up in a short colour transition — nothing moves, no light follows the pointer; a ring on the whole card when a link inside takes the keyboard focus. The panel's chevron stops under `prefers-reduced-motion`.\",\n    ],\n  },\n  related: [\"card-grid\", \"mascot-quote\", \"action-bar\"],\n  web: {\n    imports: [\"ArgumentCard\"],\n    examples: [\n      { name: \"building-block\", title: \"A building block\", description: \"Compact: the duck in the corner, the trap in one line, facts, one short action and an icon action.\" },\n      { name: \"unfold\", title: \"Unfolded in place\", description: \"No detail page: `panelLabel` unfolds what it does, the cost and the pigeon's rule.\" },\n      { name: \"grid\", title: \"Three reasons\", description: \"A product's reasons side by side in a grid: the hook and the way in, no panel.\" },\n      { name: \"hover-quiet\", title: \"The quiet hover\", description: \"`hover=\\\"quiet\\\"` on a grid of reasons: no glow, a lift, a ring on focus.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "block-link.tsx",
@@ -302,7 +293,7 @@
           "name": "hover",
           "type": "CardHover",
           "default": null,
-          "description": "The hover of the card: `light` (the pointer's light, the default) or `quiet` (no glow, a lift, a ring on focus).",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — every card has the one quiet hover. Removed in 4.0.",
           "required": false
         },
         {

package/registry/auth-layout.json

@@ -129,7 +129,7 @@
         "why": "A returning person signs in fast, with the product's promise beside the form.",
         "path": "examples/auth-layout/sign-in.tsx",
         "module": "@krizaka/ui/registry/examples/auth-layout/sign-in",
-        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — Orochia's sign-in: the brand panel (its gradient, the promise, a creator's sentence) beside a calm form;\n// on a phone one column, the mark above the form, the fields at full width with 44 px targets.\nexport default function AuthLayoutSignIn() {\n  return (\n    <div className=\"brand-orochia\">\n      <AuthLayout\n        brand={<><ProductLogo id=\"orochia\" size={28} animated={false} /> Orochia</>}\n        promise=\"Your fans pay you, not an algorithm.\"\n        aside={\n          <div className=\"flex items-end gap-3\">\n            <Mascot bird=\"flamingo\" mood=\"welcome\" size={64} />\n            <p>“90 % of every tip, unlock and auction reaches me — on Monday.” — Elena, creator</p>\n          </div>\n        }\n        asideFooter=\"© Krizaka · Montréal\"\n        title=\"Welcome back\"\n        description=\"Sign in to your studio.\"\n        footer={<>No account yet? <a className=\"font-semibold text-fg-accent\" href=\"#sign-up\">Create one</a></>}\n        legal={<>By signing in you accept the <a className=\"underline\" href=\"#terms\">terms</a> and the <a className=\"underline\" href=\"#privacy\">privacy policy</a>.</>}\n      >\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-email\">Email</Field.Label>\n            <Input id=\"sign-in-email\" type=\"email\" autoComplete=\"email\" placeholder=\"you@example.com\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-password\">Password</Field.Label>\n            <Input id=\"sign-in-password\" type=\"password\" autoComplete=\"current-password\" />\n            <Field.Hint><a className=\"text-fg-accent\" href=\"#reset\">Forgot it?</a></Field.Hint>\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer className=\"w-full\">\n            Sign in\n          </Button>\n          <Button type=\"button\" variant=\"secondary\" size=\"lg\" shape=\"cut\" className=\"w-full\">\n            Use a passkey\n          </Button>\n        </form>\n      </AuthLayout>\n    </div>\n  );\n}\n"
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — Orochia's sign-in: the brand panel (its gradient, the promise, a creator's sentence) beside a calm form;\n// on a phone one column, the mark above the form, the fields at full width with 44 px targets.\nexport default function AuthLayoutSignIn() {\n  return (\n    <div className=\"brand-orochia\">\n      <AuthLayout\n        brand={<><ProductLogo id=\"orochia\" size={28} animated={false} /> Orochia</>}\n        promise=\"Your fans pay you, not an algorithm.\"\n        aside={\n          <div className=\"flex items-end gap-3\">\n            <Mascot bird=\"flamingo\" mood=\"welcome\" size={64} />\n            <p>“90 % of every tip, unlock and auction reaches me — on Monday.” — Elena, creator</p>\n          </div>\n        }\n        asideFooter=\"© Krizaka · Montréal\"\n        title=\"Welcome back\"\n        description=\"Sign in to your studio.\"\n        footer={<>No account yet? <a className=\"font-semibold text-fg-accent\" href=\"#sign-up\">Create one</a></>}\n        legal={<>By signing in you accept the <a className=\"underline\" href=\"#terms\">terms</a> and the <a className=\"underline\" href=\"#privacy\">privacy policy</a>.</>}\n      >\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-email\">Email</Field.Label>\n            <Input id=\"sign-in-email\" type=\"email\" autoComplete=\"email\" placeholder=\"you@example.com\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-password\">Password</Field.Label>\n            <Input id=\"sign-in-password\" type=\"password\" autoComplete=\"current-password\" />\n            <Field.Hint><a className=\"text-fg-accent\" href=\"#reset\">Forgot it?</a></Field.Hint>\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\" className=\"w-full\">\n            Sign in\n          </Button>\n          <Button type=\"button\" variant=\"secondary\" size=\"lg\" className=\"w-full\">\n            Use a passkey\n          </Button>\n        </form>\n      </AuthLayout>\n    </div>\n  );\n}\n"
       },
       {
         "name": "onboarding",
@@ -140,7 +140,7 @@
         "why": "A new person completes a setup one step at a time, knowing how many remain.",
         "path": "examples/auth-layout/onboarding.tsx",
         "module": "@krizaka/ui/registry/examples/auth-layout/onboarding",
-        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\nimport { Stepper } from \"@krizaka/ui/stepper\";\n\nconst labels = { done: \"Done\", current: \"Current step\", upcoming: \"Upcoming\", error: \"Failed\" };\n\n// TEMPLATE — onboarding a creator (Orochia): the steps said in words above the form of the current one; the brand panel\n// says why it is worth it. On a phone the steps stay horizontal and compact above the fields.\nexport default function AuthLayoutOnboarding() {\n  return (\n    <div className=\"brand-orochia\">\n      <AuthLayout\n        brand={<><ProductLogo id=\"orochia\" size={28} animated={false} /> Orochia</>}\n        promise=\"Three steps, then your first video.\"\n        aside={<p>Your identity is checked once, by a person, and never shown to your fans.</p>}\n        asideFooter=\"© Krizaka · Montréal\"\n        title=\"Your payout account\"\n        description=\"Where your earnings go every Monday.\"\n      >\n        <Stepper\n          aria-label=\"Onboarding\"\n          orientation=\"horizontal\"\n          labels={labels}\n          current={1}\n          steps={[{ title: \"Profile\" }, { title: \"Payouts\" }, { title: \"Identity\" }]}\n        />\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"onboarding-holder\">Account holder</Field.Label>\n            <Input id=\"onboarding-holder\" autoComplete=\"name\" defaultValue=\"Elena Varga\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"onboarding-iban\">IBAN</Field.Label>\n            <Input id=\"onboarding-iban\" inputMode=\"text\" placeholder=\"FR76 …\" aria-describedby=\"onboarding-iban-hint\" />\n            <Field.Hint id=\"onboarding-iban-hint\">Checked before your first payout.</Field.Hint>\n          </Field.Root>\n          <div className=\"flex gap-2\">\n            <Button type=\"button\" variant=\"secondary\" size=\"lg\" shape=\"cut\" className=\"flex-1\">Back</Button>\n            <Button type=\"submit\" variant=\"primary\" size=\"lg\" shape=\"cut\" className=\"flex-1\">Continue</Button>\n          </div>\n        </form>\n      </AuthLayout>\n    </div>\n  );\n}\n"
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\nimport { Stepper } from \"@krizaka/ui/stepper\";\n\nconst labels = { done: \"Done\", current: \"Current step\", upcoming: \"Upcoming\", error: \"Failed\" };\n\n// TEMPLATE — onboarding a creator (Orochia): the steps said in words above the form of the current one; the brand panel\n// says why it is worth it. On a phone the steps stay horizontal and compact above the fields.\nexport default function AuthLayoutOnboarding() {\n  return (\n    <div className=\"brand-orochia\">\n      <AuthLayout\n        brand={<><ProductLogo id=\"orochia\" size={28} animated={false} /> Orochia</>}\n        promise=\"Three steps, then your first video.\"\n        aside={<p>Your identity is checked once, by a person, and never shown to your fans.</p>}\n        asideFooter=\"© Krizaka · Montréal\"\n        title=\"Your payout account\"\n        description=\"Where your earnings go every Monday.\"\n      >\n        <Stepper\n          aria-label=\"Onboarding\"\n          orientation=\"horizontal\"\n          labels={labels}\n          current={1}\n          steps={[{ title: \"Profile\" }, { title: \"Payouts\" }, { title: \"Identity\" }]}\n        />\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"onboarding-holder\">Account holder</Field.Label>\n            <Input id=\"onboarding-holder\" autoComplete=\"name\" defaultValue=\"Elena Varga\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"onboarding-iban\">IBAN</Field.Label>\n            <Input id=\"onboarding-iban\" inputMode=\"text\" placeholder=\"FR76 …\" aria-describedby=\"onboarding-iban-hint\" />\n            <Field.Hint id=\"onboarding-iban-hint\">Checked before your first payout.</Field.Hint>\n          </Field.Root>\n          <div className=\"flex gap-2\">\n            <Button type=\"button\" variant=\"secondary\" size=\"lg\" className=\"flex-1\">Back</Button>\n            <Button type=\"submit\" variant=\"primary\" size=\"lg\" className=\"flex-1\">Continue</Button>\n          </div>\n        </form>\n      </AuthLayout>\n    </div>\n  );\n}\n"
       },
       {
         "name": "verify",
@@ -148,7 +148,7 @@
         "description": "The smallest entry screen: a code.",
         "path": "examples/auth-layout/verify.tsx",
         "module": "@krizaka/ui/registry/examples/auth-layout/verify",
-        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\n// The smallest entry screen: no promise, the brand panel still carries the product's gradient on a desktop.\nexport default function AuthLayoutVerify() {\n  return (\n    <AuthLayout brand={<><ProductLogo id=\"krizaka\" size={28} animated={false} /> Krizaka</>} title=\"Check your email\" description=\"We sent a 6-digit code to eric@tremblay.ca.\">\n      <form className=\"flex flex-col gap-4\">\n        <Field.Root>\n          <Field.Label htmlFor=\"verify-code\">Code</Field.Label>\n          <Input id=\"verify-code\" inputMode=\"numeric\" autoComplete=\"one-time-code\" maxLength={6} />\n        </Field.Root>\n        <Button type=\"submit\" variant=\"primary\" size=\"lg\" shape=\"cut\" className=\"w-full\">Verify</Button>\n      </form>\n    </AuthLayout>\n  );\n}\n"
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\n// The smallest entry screen: no promise, the brand panel still carries the product's gradient on a desktop.\nexport default function AuthLayoutVerify() {\n  return (\n    <AuthLayout brand={<><ProductLogo id=\"krizaka\" size={28} animated={false} /> Krizaka</>} title=\"Check your email\" description=\"We sent a 6-digit code to eric@tremblay.ca.\">\n      <form className=\"flex flex-col gap-4\">\n        <Field.Root>\n          <Field.Label htmlFor=\"verify-code\">Code</Field.Label>\n          <Input id=\"verify-code\" inputMode=\"numeric\" autoComplete=\"one-time-code\" maxLength={6} />\n        </Field.Root>\n        <Button type=\"submit\" variant=\"primary\" size=\"lg\" className=\"w-full\">Verify</Button>\n      </form>\n    </AuthLayout>\n  );\n}\n"
       }
     ]
   },
@@ -179,7 +179,7 @@
   ],
   "demo": {
     "path": "examples/auth-layout/sign-in.tsx",
-    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — Orochia's sign-in: the brand panel (its gradient, the promise, a creator's sentence) beside a calm form;\n// on a phone one column, the mark above the form, the fields at full width with 44 px targets.\nexport default function AuthLayoutSignIn() {\n  return (\n    <div className=\"brand-orochia\">\n      <AuthLayout\n        brand={<><ProductLogo id=\"orochia\" size={28} animated={false} /> Orochia</>}\n        promise=\"Your fans pay you, not an algorithm.\"\n        aside={\n          <div className=\"flex items-end gap-3\">\n            <Mascot bird=\"flamingo\" mood=\"welcome\" size={64} />\n            <p>“90 % of every tip, unlock and auction reaches me — on Monday.” — Elena, creator</p>\n          </div>\n        }\n        asideFooter=\"© Krizaka · Montréal\"\n        title=\"Welcome back\"\n        description=\"Sign in to your studio.\"\n        footer={<>No account yet? <a className=\"font-semibold text-fg-accent\" href=\"#sign-up\">Create one</a></>}\n        legal={<>By signing in you accept the <a className=\"underline\" href=\"#terms\">terms</a> and the <a className=\"underline\" href=\"#privacy\">privacy policy</a>.</>}\n      >\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-email\">Email</Field.Label>\n            <Input id=\"sign-in-email\" type=\"email\" autoComplete=\"email\" placeholder=\"you@example.com\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-password\">Password</Field.Label>\n            <Input id=\"sign-in-password\" type=\"password\" autoComplete=\"current-password\" />\n            <Field.Hint><a className=\"text-fg-accent\" href=\"#reset\">Forgot it?</a></Field.Hint>\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer className=\"w-full\">\n            Sign in\n          </Button>\n          <Button type=\"button\" variant=\"secondary\" size=\"lg\" shape=\"cut\" className=\"w-full\">\n            Use a passkey\n          </Button>\n        </form>\n      </AuthLayout>\n    </div>\n  );\n}\n"
+    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { AuthLayout } from \"@krizaka/ui/auth-layout\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { Field, Input } from \"@krizaka/ui/field\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\n\n// TEMPLATE — Orochia's sign-in: the brand panel (its gradient, the promise, a creator's sentence) beside a calm form;\n// on a phone one column, the mark above the form, the fields at full width with 44 px targets.\nexport default function AuthLayoutSignIn() {\n  return (\n    <div className=\"brand-orochia\">\n      <AuthLayout\n        brand={<><ProductLogo id=\"orochia\" size={28} animated={false} /> Orochia</>}\n        promise=\"Your fans pay you, not an algorithm.\"\n        aside={\n          <div className=\"flex items-end gap-3\">\n            <Mascot bird=\"flamingo\" mood=\"welcome\" size={64} />\n            <p>“90 % of every tip, unlock and auction reaches me — on Monday.” — Elena, creator</p>\n          </div>\n        }\n        asideFooter=\"© Krizaka · Montréal\"\n        title=\"Welcome back\"\n        description=\"Sign in to your studio.\"\n        footer={<>No account yet? <a className=\"font-semibold text-fg-accent\" href=\"#sign-up\">Create one</a></>}\n        legal={<>By signing in you accept the <a className=\"underline\" href=\"#terms\">terms</a> and the <a className=\"underline\" href=\"#privacy\">privacy policy</a>.</>}\n      >\n        <form className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-email\">Email</Field.Label>\n            <Input id=\"sign-in-email\" type=\"email\" autoComplete=\"email\" placeholder=\"you@example.com\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"sign-in-password\">Password</Field.Label>\n            <Input id=\"sign-in-password\" type=\"password\" autoComplete=\"current-password\" />\n            <Field.Hint><a className=\"text-fg-accent\" href=\"#reset\">Forgot it?</a></Field.Hint>\n          </Field.Root>\n          <Button type=\"submit\" variant=\"primary\" size=\"lg\" className=\"w-full\">\n            Sign in\n          </Button>\n          <Button type=\"button\" variant=\"secondary\" size=\"lg\" className=\"w-full\">\n            Use a passkey\n          </Button>\n        </form>\n      </AuthLayout>\n    </div>\n  );\n}\n"
   },
   "props": [
     {

package/registry/button.json

@@ -2,8 +2,8 @@
   "name": "button",
   "type": "primitive",
   "title": "Button",
-  "summary": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
-  "description": "The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
+  "summary": "The action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
+  "description": "The action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.",
   "status": "stable",
   "deprecated": null,
   "category": "actions",
@@ -46,7 +46,7 @@
     "One primary per view; the danger variant only for what destroys or cannot be undone.",
     "`loading` while the action runs: the button is disabled, says it is busy and draws the glyph; add `progress` when you know how far it is.",
     "End with `status` (`success` / `error`) and `announce` the result in words: sighted people see the check, everyone hears “Saved”. Clear the status after a moment.",
-    "`shape=\"cut\"`, `shimmer` and `magnetic` are the signature: keep them for the one action a page is about.",
+    "One shape for every action (an 8 px radius, the radius of a field); the pill only for a chip-like action. The hover changes a colour, never the position. `shape=\"cut\"`, `shimmer` and `magnetic` are deprecated since 3.31 (krizaka-ui#393) and do nothing.",
     "Style a link without the component with `buttonVariants({ variant, size })`."
   ],
   "accessibility": {
@@ -114,7 +114,7 @@
             "name": "magnetic",
             "type": "boolean",
             "default": null,
-            "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
             "required": false
           },
           {
@@ -128,14 +128,14 @@
             "name": "shape",
             "type": "\"rounded\" | \"pill\" | \"cut\"",
             "default": "rounded",
-            "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+            "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
             "required": false
           },
           {
             "name": "shimmer",
             "type": "boolean",
             "default": null,
-            "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
             "required": false
           },
           {
@@ -204,7 +204,7 @@
             "name": "magnetic",
             "type": "boolean",
             "default": null,
-            "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
             "required": false
           },
           {
@@ -218,14 +218,14 @@
             "name": "shape",
             "type": "\"rounded\" | \"pill\" | \"cut\"",
             "default": "rounded",
-            "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+            "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
             "required": false
           },
           {
             "name": "shimmer",
             "type": "boolean",
             "default": null,
-            "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+            "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
             "required": false
           },
           {
@@ -280,10 +280,10 @@
       {
         "name": "signature",
         "title": "The signature action",
-        "description": "`shape=\"cut\"`, the gradient, `shimmer` and `magnetic`: the one call to action of a hero; the arrow leans forward on hover.",
+        "description": "The gradient beside a quiet outline: the one call to action of a hero; the arrow leans forward on hover, the button never moves.",
         "path": "examples/button/signature.tsx",
         "module": "@krizaka/ui/registry/examples/button/signature",
-        "code": "import { Button } from \"@krizaka/ui/button\";\n\n// The one action a page is about: cut corners, the brand gradient, a sheen on hover, a lean toward the pointer\n// (`magnetic`, with MotionObserver mounted). The arrow of a signature icon leans forward on hover too.\nexport default function ButtonSignature() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"gradient\" size=\"lg\" shape=\"cut\" shimmer magnetic>\n        Start free\n        <svg data-kz-icon=\"ForwardIcon\" viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M5 12h14M13 6l6 6-6 6\" />\n        </svg>\n      </Button>\n      <Button variant=\"outline\" size=\"lg\" shape=\"cut\">\n        Talk to us\n      </Button>\n    </div>\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\n\n// The one action a page is about: the brand gradient beside a quiet outline. The arrow of a signature icon leans\n// forward on hover; the button itself never moves (krizaka-ui#393).\nexport default function ButtonSignature() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-3\">\n      <Button variant=\"gradient\" size=\"lg\">\n        Start free\n        <svg data-kz-icon=\"ForwardIcon\" viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" aria-hidden>\n          <path d=\"M5 12h14M13 6l6 6-6 6\" />\n        </svg>\n      </Button>\n      <Button variant=\"outline\" size=\"lg\">\n        Talk to us\n      </Button>\n    </div>\n  );\n}\n"
       },
       {
         "name": "primary",
@@ -643,7 +643,7 @@
   "files": [
     {
       "path": "button/button.tsx",
-      "content": "// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * rounded · pill · cut (45° corners, the Krizaka chamfer).\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** A sheen of light crosses the button on hover — for the one action a page is about. */\n    shimmer?: boolean;\n    /** The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch). */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer,\n  magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      data-kz-magnetic={magnetic ? \"\" : undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", shimmer && \"kz-sheen\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n"
+      "content": "// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { LoaderGlyph } from \"../spinner/glyph\";\nimport { buttonRecipe } from \"./recipe\";\n\nexport const buttonVariants = tv(buttonRecipe);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n  ButtonVariants & {\n    /**\n     * The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`,\n     * `ghost`, `danger`.\n     * @default \"secondary\"\n     */\n    variant?: ButtonVariants[\"variant\"];\n    /**\n     * sm · md · lg, or `icon` (a square).\n     * @default \"md\"\n     */\n    size?: ButtonVariants[\"size\"];\n    /**\n     * `rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\n     * retired) — it draws `rounded` and warns in development; it will be removed in 4.0.\n     * @default \"rounded\"\n     */\n    shape?: ButtonVariants[\"shape\"];\n    /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /**\n     * Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the\n     * button keeps its colour.\n     */\n    loading?: boolean;\n    /**\n     * Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an\n     * upload, an export).\n     */\n    progress?: number | null;\n    /**\n     * How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of\n     * the status colour opens around it. Clear it to return to rest.\n     */\n    status?: \"success\" | \"error\" | null;\n    /** A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated. */\n    announce?: string;\n    /**\n     * Shows the glyph while `loading` / with a `status`. `false`: you draw your own.\n     * @default true\n     */\n    indicator?: boolean;\n    /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0. */\n    shimmer?: boolean;\n    /** @deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0. */\n    magnetic?: boolean;\n  };\n\nconst STATUS_TEXT = { success: \"text-fg-success\", error: \"text-fg-danger\" } as const;\n\nlet warnedCut = false;\n/** `shape=\"cut\"` (the chamfer) is retired: one warning per page in development, never in production. */\nfunction warnCut() {\n  if (warnedCut || typeof process === \"undefined\" || process.env.NODE_ENV === \"production\") return;\n  warnedCut = true;\n  console.warn('@krizaka/ui/button: shape=\"cut\" is deprecated (krizaka-ui#393) and now draws the default rounded shape. Remove the prop.');\n}\n\nexport function Button({\n  asChild,\n  loading,\n  progress,\n  status,\n  announce,\n  indicator = true,\n  shimmer: _shimmer,\n  magnetic: _magnetic,\n  variant,\n  size,\n  shape,\n  className,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  if (shape === \"cut\") warnCut();\n  const known = loading && typeof progress === \"number\" && Number.isFinite(progress);\n  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;\n  const glyph = indicator && !asChild && (loading || status) ? (status ?? \"loading\") : null;\n  // On a filled variant the glyph stays in the label's colour; on the others it takes the status colour.\n  const filled = variant === \"primary\" || variant === \"gradient\";\n  const button = (\n    <Comp\n      type={asChild ? undefined : \"button\"}\n      aria-busy={loading || undefined}\n      data-loading={loading ? \"\" : undefined}\n      data-variant={variant ?? \"secondary\"}\n      data-kz-status={status ?? undefined}\n      disabled={asChild ? undefined : disabled || loading}\n      aria-disabled={asChild && (disabled || loading) ? true : undefined}\n      className={buttonVariants({\n        variant,\n        size,\n        shape,\n        className: cn(known && \"relative isolate overflow-hidden\", className),\n      })}\n      {...props}\n    >\n      {asChild ? (\n        children\n      ) : (\n        <>\n          {known && (\n            <span aria-hidden className=\"absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500\" style={{ width: `${ratio * 100}%` }} />\n          )}\n          {glyph && (\n            <span\n              aria-hidden\n              data-slot=\"indicator\"\n              className=\"-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0\"\n            >\n              <span className=\"overflow-hidden\">\n                <LoaderGlyph state={glyph} value={known ? ratio : null} className={cn(\"h-4 w-4\", glyph !== \"loading\" && !filled && STATUS_TEXT[glyph])} />\n              </span>\n            </span>\n          )}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n  if (announce === undefined || asChild) return button;\n  return (\n    <>\n      {button}\n      <span role=\"status\" className=\"sr-only\">\n        {announce}\n      </span>\n    </>\n  );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n  /** The accessible name (and tooltip) of the button — required, passed translated. */\n  label: string;\n  /**\n   * sm · md · lg, or `icon` (a square).\n   * @default \"icon\"\n   */\n  size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. Loading or with a status, the glyph takes the icon's place. */\nexport function IconButton({ label, size = \"icon\", children, ...props }: IconButtonProps) {\n  const swap = props.indicator !== false && !props.asChild && (props.loading || props.status);\n  return (\n    <Button aria-label={label} title={label} size={size} {...props}>\n      {swap ? null : children}\n    </Button>\n  );\n}\n"
     },
     {
       "path": "button/index.ts",
@@ -651,11 +651,11 @@
     },
     {
       "path": "button/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Button\",\n  summary:\n    \"The action: six looks, three sizes, three shapes (rounded, pill, the Krizaka cut corners) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.\",\n  status: \"stable\",\n  category: \"actions\",\n  platforms: \"both\",\n  parity: { desktop: \"web\" },\n  whenToUse: [\n    \"To run an action: submit a form, open a dialog, start an upload, save a draft.\",\n    \"One `primary` button for the main action of a view; `secondary`, `outline` or `ghost` for the others.\",\n    \"`IconButton` for a compact action shown by its icon alone (close, add, more), with a `label` for its name.\",\n  ],\n  whenNotToUse: [\n    { when: \"To go to another page: use a link (`asChild` with your router's `<Link>` keeps the button look).\" },\n    { when: \"To turn a setting on or off, with an immediate effect.\", use: \"switch\" },\n    { when: \"For a destructive action that needs a second press to confirm, in place.\", use: \"confirm-button\" },\n    { when: \"To choose one option among several, or filter a list.\", use: \"chip\" },\n  ],\n  bestPractices: [\n    \"Name the action with a verb: “Save”, “Send the invitation” — not “OK” or “Yes”.\",\n    \"One primary per view; the danger variant only for what destroys or cannot be undone.\",\n    \"`loading` while the action runs: the button is disabled, says it is busy and draws the glyph; add `progress` when you know how far it is.\",\n    \"End with `status` (`success` / `error`) and `announce` the result in words: sighted people see the check, everyone hears “Saved”. Clear the status after a moment.\",\n    \"`shape=\\\"cut\\\"`, `shimmer` and `magnetic` are the signature: keep them for the one action a page is about.\",\n    \"Style a link without the component with `buttonVariants({ variant, size })`.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Enter / Space\", action: \"Runs the action.\" },\n      { keys: \"Tab\", action: \"Moves the focus to the next control; the focus ring uses `--kz-ring`.\" },\n    ],\n    notes: [\n      \"A native `<button type=\\\"button\\\">`: the role, the focus and the keyboard come from the platform.\",\n      \"`IconButton` requires `label`: it becomes the `aria-label` of a button that shows no text.\",\n      \"`loading` sets `aria-busy` and disables the button; `disabled` keeps it out of the tab order.\",\n      \"`announce` renders a polite live region next to the button: the result of the action is heard, not only seen.\",\n      \"Under `prefers-reduced-motion` nothing moves (no shake, no lean, no sheen): the check, the cross and the status colour still say it.\",\n    ],\n  },\n  related: [\"confirm-button\", \"dialog\", \"dropdown-menu\", \"tooltip\"],\n  web: {\n    imports: [\"Button\", \"IconButton\"],\n    examples: [\n      { name: \"save-flow\", title: \"Save, then confirm\", description: \"Press it: the glyph traces the wait, a check draws itself, “Changes saved” is announced, then it returns to rest.\" },\n      { name: \"upload-progress\", title: \"An export with progress\", description: \"`progress`: the trace and a light fill grow across the button; it keeps its width and its colour.\" },\n      { name: \"error\", title: \"A failure\", description: \"`status=\\\"error\\\"`: a cross, one shake of the head, a ring of the danger colour — and the reason announced.\" },\n      { name: \"signature\", title: \"The signature action\", description: \"`shape=\\\"cut\\\"`, the gradient, `shimmer` and `magnetic`: the one call to action of a hero; the arrow leans forward on hover.\" },\n      { name: \"primary\", title: \"Primary\", description: \"The main action of a view: the accent.\" },\n      { name: \"gradient\", title: \"Gradient\", description: \"The brand's signature, accent → accent-2: a hero or a closing call to action, once per page.\" },\n      { name: \"secondary\", title: \"Secondary\", description: \"The default: a raised surface, for the other actions.\" },\n      { name: \"outline\", title: \"Outline\", description: \"A lighter action next to a primary one.\" },\n      { name: \"ghost\", title: \"Ghost\", description: \"In toolbars and dense lists: no frame until hovered.\" },\n      { name: \"danger\", title: \"Danger\", description: \"A destructive action: the border and the tint carry the danger, the label stays legible in both themes.\" },\n      { name: \"sizes\", title: \"Sizes\", description: \"`sm`, `md` (default) and `lg`.\" },\n      { name: \"pill\", title: \"Pill\", description: \"`shape=\\\"pill\\\"`: fully rounded.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not available yet: out of the tab order.\" },\n      { name: \"loading\", title: \"Loading\", description: \"While the action runs: disabled, `aria-busy`, `data-loading`, the glyph before the label.\" },\n      { name: \"as-child-link\", title: \"As a link\", description: \"`asChild` renders your `<a>` (or router link) with the button's look.\" },\n      { name: \"icon\", title: \"Icon button\", description: \"`IconButton`: a square button holding an icon; `label` is its accessible name.\" },\n    ],\n  },\n  native: {\n    imports: [\"Button\", \"IconButton\"],\n    differences: [\n      \"The text is the `label` prop (a string), not children: it is also the accessible name.\",\n      \"`onPress` instead of `onClick` (a `Pressable`); haptics, if any, belong to your `onPress`.\",\n      \"`icon` places an icon before the label; there is no `asChild`.\",\n      \"`loading` shows the platform's `ActivityIndicator` in place of the icon.\",\n      \"`variant=\\\"gradient\\\"` draws its fill with react-native-svg (React Native has no CSS gradient).\",\n    ],\n    examples: [\n      { name: \"primary\", title: \"Primary\", description: \"The main action of a screen.\" },\n      { name: \"gradient\", title: \"Gradient\", description: \"accent → accent-2, drawn with react-native-svg: the hero action of a screen.\" },\n      { name: \"secondary\", title: \"Secondary\", description: \"The default look.\" },\n      { name: \"outline\", title: \"Outline\", description: \"A lighter action.\" },\n      { name: \"ghost\", title: \"Ghost\", description: \"No frame: toolbars, headers.\" },\n      { name: \"danger\", title: \"Danger\", description: \"A destructive action.\" },\n      { name: \"sizes\", title: \"Sizes\", description: \"`sm`, `md`, `lg`, and `shape=\\\"pill\\\"`.\" },\n      { name: \"icon\", title: \"With an icon\", description: \"`icon` before the label.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not available yet.\" },\n      { name: \"loading\", title: \"Loading\", description: \"Disabled and busy, a spinner in place of the icon.\" },\n      { name: \"icon-only\", title: \"Icon button\", description: \"`IconButton`: `label` is required, it is the accessible name.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Button\",\n  summary:\n    \"The action: six looks, three sizes, two shapes (an 8 px radius, the pill) — and the whole life of an action built in: a wait traced by the loader glyph, its progress, a success or a failure drawn and announced.\",\n  status: \"stable\",\n  category: \"actions\",\n  platforms: \"both\",\n  parity: { desktop: \"web\" },\n  whenToUse: [\n    \"To run an action: submit a form, open a dialog, start an upload, save a draft.\",\n    \"One `primary` button for the main action of a view; `secondary`, `outline` or `ghost` for the others.\",\n    \"`IconButton` for a compact action shown by its icon alone (close, add, more), with a `label` for its name.\",\n  ],\n  whenNotToUse: [\n    { when: \"To go to another page: use a link (`asChild` with your router's `<Link>` keeps the button look).\" },\n    { when: \"To turn a setting on or off, with an immediate effect.\", use: \"switch\" },\n    { when: \"For a destructive action that needs a second press to confirm, in place.\", use: \"confirm-button\" },\n    { when: \"To choose one option among several, or filter a list.\", use: \"chip\" },\n  ],\n  bestPractices: [\n    \"Name the action with a verb: “Save”, “Send the invitation” — not “OK” or “Yes”.\",\n    \"One primary per view; the danger variant only for what destroys or cannot be undone.\",\n    \"`loading` while the action runs: the button is disabled, says it is busy and draws the glyph; add `progress` when you know how far it is.\",\n    \"End with `status` (`success` / `error`) and `announce` the result in words: sighted people see the check, everyone hears “Saved”. Clear the status after a moment.\",\n    \"One shape for every action (an 8 px radius, the radius of a field); the pill only for a chip-like action. The hover changes a colour, never the position. `shape=\\\"cut\\\"`, `shimmer` and `magnetic` are deprecated since 3.31 (krizaka-ui#393) and do nothing.\",\n    \"Style a link without the component with `buttonVariants({ variant, size })`.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Enter / Space\", action: \"Runs the action.\" },\n      { keys: \"Tab\", action: \"Moves the focus to the next control; the focus ring uses `--kz-ring`.\" },\n    ],\n    notes: [\n      \"A native `<button type=\\\"button\\\">`: the role, the focus and the keyboard come from the platform.\",\n      \"`IconButton` requires `label`: it becomes the `aria-label` of a button that shows no text.\",\n      \"`loading` sets `aria-busy` and disables the button; `disabled` keeps it out of the tab order.\",\n      \"`announce` renders a polite live region next to the button: the result of the action is heard, not only seen.\",\n      \"Under `prefers-reduced-motion` nothing moves (no shake, no lean, no sheen): the check, the cross and the status colour still say it.\",\n    ],\n  },\n  related: [\"confirm-button\", \"dialog\", \"dropdown-menu\", \"tooltip\"],\n  web: {\n    imports: [\"Button\", \"IconButton\"],\n    examples: [\n      { name: \"save-flow\", title: \"Save, then confirm\", description: \"Press it: the glyph traces the wait, a check draws itself, “Changes saved” is announced, then it returns to rest.\" },\n      { name: \"upload-progress\", title: \"An export with progress\", description: \"`progress`: the trace and a light fill grow across the button; it keeps its width and its colour.\" },\n      { name: \"error\", title: \"A failure\", description: \"`status=\\\"error\\\"`: a cross, one shake of the head, a ring of the danger colour — and the reason announced.\" },\n      { name: \"signature\", title: \"The signature action\", description: \"The gradient beside a quiet outline: the one call to action of a hero; the arrow leans forward on hover, the button never moves.\" },\n      { name: \"primary\", title: \"Primary\", description: \"The main action of a view: the accent.\" },\n      { name: \"gradient\", title: \"Gradient\", description: \"The brand's signature, accent → accent-2: a hero or a closing call to action, once per page.\" },\n      { name: \"secondary\", title: \"Secondary\", description: \"The default: a raised surface, for the other actions.\" },\n      { name: \"outline\", title: \"Outline\", description: \"A lighter action next to a primary one.\" },\n      { name: \"ghost\", title: \"Ghost\", description: \"In toolbars and dense lists: no frame until hovered.\" },\n      { name: \"danger\", title: \"Danger\", description: \"A destructive action: the border and the tint carry the danger, the label stays legible in both themes.\" },\n      { name: \"sizes\", title: \"Sizes\", description: \"`sm`, `md` (default) and `lg`.\" },\n      { name: \"pill\", title: \"Pill\", description: \"`shape=\\\"pill\\\"`: fully rounded.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not available yet: out of the tab order.\" },\n      { name: \"loading\", title: \"Loading\", description: \"While the action runs: disabled, `aria-busy`, `data-loading`, the glyph before the label.\" },\n      { name: \"as-child-link\", title: \"As a link\", description: \"`asChild` renders your `<a>` (or router link) with the button's look.\" },\n      { name: \"icon\", title: \"Icon button\", description: \"`IconButton`: a square button holding an icon; `label` is its accessible name.\" },\n    ],\n  },\n  native: {\n    imports: [\"Button\", \"IconButton\"],\n    differences: [\n      \"The text is the `label` prop (a string), not children: it is also the accessible name.\",\n      \"`onPress` instead of `onClick` (a `Pressable`); haptics, if any, belong to your `onPress`.\",\n      \"`icon` places an icon before the label; there is no `asChild`.\",\n      \"`loading` shows the platform's `ActivityIndicator` in place of the icon.\",\n      \"`variant=\\\"gradient\\\"` draws its fill with react-native-svg (React Native has no CSS gradient).\",\n    ],\n    examples: [\n      { name: \"primary\", title: \"Primary\", description: \"The main action of a screen.\" },\n      { name: \"gradient\", title: \"Gradient\", description: \"accent → accent-2, drawn with react-native-svg: the hero action of a screen.\" },\n      { name: \"secondary\", title: \"Secondary\", description: \"The default look.\" },\n      { name: \"outline\", title: \"Outline\", description: \"A lighter action.\" },\n      { name: \"ghost\", title: \"Ghost\", description: \"No frame: toolbars, headers.\" },\n      { name: \"danger\", title: \"Danger\", description: \"A destructive action.\" },\n      { name: \"sizes\", title: \"Sizes\", description: \"`sm`, `md`, `lg`, and `shape=\\\"pill\\\"`.\" },\n      { name: \"icon\", title: \"With an icon\", description: \"`icon` before the label.\" },\n      { name: \"disabled\", title: \"Disabled\", description: \"Not available yet.\" },\n      { name: \"loading\", title: \"Loading\", description: \"Disabled and busy, a spinner in place of the icon.\" },\n      { name: \"icon-only\", title: \"Icon button\", description: \"`IconButton`: `label` is required, it is the accessible name.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "button/recipe.ts",
-      "content": "// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the\n    // focus ring and the hover follow the cut, unlike a clip-path.\n    shape: { rounded: \"rounded-lg\", pill: \"rounded-full\", cut: \"rounded-[10px] [corner-shape:bevel]\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n"
+      "content": "// The button's variants, written once as classes of the Krizaka tokens: the web wears them with `tv(buttonRecipe)`\n// (button.tsx), React Native reads the same classes into styles (native/button.tsx, `nativeRecipe`).\nimport { defineRecipe } from \"../recipes/define\";\n\nexport const buttonRecipe = defineRecipe({\n  base:\n    \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition duration-150 \" +\n    \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n    \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] \" +\n    // Busy is not unavailable: a loading button keeps its colour (it is disabled only so it is not pressed twice).\n    \"[&[data-loading]]:opacity-100\",\n  variants: {\n    variant: {\n      primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).\n      gradient: \"bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110\",\n      secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n      outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent\",\n      ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest\n      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).\n      danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n    },\n    size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n    // One clean shape (krizaka-ui#393): an 8 px radius (`--kz-radius-sm`, the radius of a field — a button beside an\n    // input lines up with it), the pill on demand. `cut` (the retired chamfer) is a deprecated alias of `rounded`.\n    shape: { rounded: \"rounded-sm\", pill: \"rounded-full\", cut: \"rounded-sm\" },\n  },\n  defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n"
     },
     {
       "path": "meta.ts",
@@ -712,7 +712,7 @@
           "name": "magnetic",
           "type": "boolean",
           "default": null,
-          "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
           "required": false
         },
         {
@@ -726,14 +726,14 @@
           "name": "shape",
           "type": "\"rounded\" | \"pill\" | \"cut\"",
           "default": "rounded",
-          "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+          "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
           "required": false
         },
         {
           "name": "shimmer",
           "type": "boolean",
           "default": null,
-          "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
           "required": false
         },
         {
@@ -802,7 +802,7 @@
           "name": "magnetic",
           "type": "boolean",
           "default": null,
-          "description": "The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — a button never moves under the pointer. Removed in 4.0.",
           "required": false
         },
         {
@@ -816,14 +816,14 @@
           "name": "shape",
           "type": "\"rounded\" | \"pill\" | \"cut\"",
           "default": "rounded",
-          "description": "rounded · pill · cut (45° corners, the Krizaka chamfer).",
+          "description": "`rounded` (an 8 px radius, the radius of a field) · `pill`. `cut` is deprecated (krizaka-ui#393: the chamfer is\nretired) — it draws `rounded` and warns in development; it will be removed in 4.0.",
           "required": false
         },
         {
           "name": "shimmer",
           "type": "boolean",
           "default": null,
-          "description": "A sheen of light crosses the button on hover — for the one action a page is about.",
+          "description": "@deprecated Since 3.31 (krizaka-ui#393): does nothing — the hover is quiet. Removed in 4.0.",
           "required": false
         },
         {