@krizaka/ui 3.29.0 → 3.31.0

package/registry/detail-layout.json

@@ -136,7 +136,7 @@
         "why": "A viewer sees the object itself first, with its facts and the actions that concern it beside it.",
         "path": "examples/detail-layout/video.tsx",
         "module": "@krizaka/ui/registry/examples/detail-layout/video",
-        "code": "\"use client\";\n\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { Facts } from \"@krizaka/ui/page\";\nimport { Stat } from \"@krizaka/ui/stat\";\nimport { Tabs } from \"@krizaka/ui/tabs\";\n\n// TEMPLATE — one video in Orochia's studio: the way back to the list, its thumbnail, title and status, its facts, the\n// actions; the tabs (overview · sales · comments); the side panel with the price and the audience — under the content on\n// a phone, where the actions wrap under the title.\nexport default function DetailLayoutVideo() {\n  return (\n    <div className=\"brand-orochia w-full\">\n      <Tabs.Root defaultValue=\"overview\">\n        <DetailLayout\n          back={<a href=\"#videos\">← Videos</a>}\n          media={<div className=\"aspect-video w-40 bg-linear-to-br from-accent to-accent-2\" />}\n          eyebrow=\"Video · v-2087\"\n          title=\"Night shoot, part 2\"\n          status={<Badge tone=\"success\" dot>Published</Badge>}\n          meta={<Facts items={[{ label: \"12:48\" }, { label: \"Unlock €4.99\" }, { label: \"18+ checked\", tone: \"ok\" }]} />}\n          actions={\n            <>\n              <Button size=\"sm\" variant=\"secondary\" shape=\"cut\">Edit</Button>\n              <Button size=\"sm\" variant=\"primary\" shape=\"cut\">Share</Button>\n            </>\n          }\n          tabs={\n            <Tabs.List aria-label=\"Video\">\n              <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n              <Tabs.Trigger value=\"sales\">Sales</Tabs.Trigger>\n              <Tabs.Trigger value=\"comments\">Comments</Tabs.Trigger>\n            </Tabs.List>\n          }\n          aside={\n            <div className=\"flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n              <Stat label=\"Unlocks\" value=\"146\" trend=\"up\" trendLabel=\"+12\" hint=\"7 days\" />\n              <Stat label=\"Earned\" value=\"€653\" hint=\"after the 10 % fee\" />\n            </div>\n          }\n        >\n          <Tabs.Content value=\"overview\" className=\"text-sm leading-relaxed text-fg-secondary\">\n            The second half of the night shoot in Old Montréal: the rooftop, the rain, the last take at dawn.\n          </Tabs.Content>\n          <Tabs.Content value=\"sales\" className=\"text-sm text-fg-secondary\">146 unlocks, 3 tips.</Tabs.Content>\n          <Tabs.Content value=\"comments\" className=\"text-sm text-fg-secondary\">28 comments, 2 waiting for moderation.</Tabs.Content>\n        </DetailLayout>\n      </Tabs.Root>\n    </div>\n  );\n}\n"
+        "code": "\"use client\";\n\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { Facts } from \"@krizaka/ui/page\";\nimport { Stat } from \"@krizaka/ui/stat\";\nimport { Tabs } from \"@krizaka/ui/tabs\";\n\n// TEMPLATE — one video in Orochia's studio: the way back to the list, its thumbnail, title and status, its facts, the\n// actions; the tabs (overview · sales · comments); the side panel with the price and the audience — under the content on\n// a phone, where the actions wrap under the title.\nexport default function DetailLayoutVideo() {\n  return (\n    <div className=\"brand-orochia w-full\">\n      <Tabs.Root defaultValue=\"overview\">\n        <DetailLayout\n          back={<a href=\"#videos\">← Videos</a>}\n          media={<div className=\"aspect-video w-40 bg-linear-to-br from-accent to-accent-2\" />}\n          eyebrow=\"Video · v-2087\"\n          title=\"Night shoot, part 2\"\n          status={<Badge tone=\"success\" dot>Published</Badge>}\n          meta={<Facts items={[{ label: \"12:48\" }, { label: \"Unlock €4.99\" }, { label: \"18+ checked\", tone: \"ok\" }]} />}\n          actions={\n            <>\n              <Button size=\"sm\" variant=\"secondary\">Edit</Button>\n              <Button size=\"sm\" variant=\"primary\">Share</Button>\n            </>\n          }\n          tabs={\n            <Tabs.List aria-label=\"Video\">\n              <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n              <Tabs.Trigger value=\"sales\">Sales</Tabs.Trigger>\n              <Tabs.Trigger value=\"comments\">Comments</Tabs.Trigger>\n            </Tabs.List>\n          }\n          aside={\n            <div className=\"flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n              <Stat label=\"Unlocks\" value=\"146\" trend=\"up\" trendLabel=\"+12\" hint=\"7 days\" />\n              <Stat label=\"Earned\" value=\"€653\" hint=\"after the 10 % fee\" />\n            </div>\n          }\n        >\n          <Tabs.Content value=\"overview\" className=\"text-sm leading-relaxed text-fg-secondary\">\n            The second half of the night shoot in Old Montréal: the rooftop, the rain, the last take at dawn.\n          </Tabs.Content>\n          <Tabs.Content value=\"sales\" className=\"text-sm text-fg-secondary\">146 unlocks, 3 tips.</Tabs.Content>\n          <Tabs.Content value=\"comments\" className=\"text-sm text-fg-secondary\">28 comments, 2 waiting for moderation.</Tabs.Content>\n        </DetailLayout>\n      </Tabs.Root>\n    </div>\n  );\n}\n"
       },
       {
         "name": "checkout",
@@ -147,7 +147,7 @@
         "why": "A person pays in a few taps and sees the exact total before committing.",
         "path": "examples/detail-layout/checkout.tsx",
         "module": "@krizaka/ui/registry/examples/detail-layout/checkout",
-        "code": "\"use client\";\n\nimport { Button } from \"@krizaka/ui/button\";\nimport { Chip } from \"@krizaka/ui/chip\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { Field, Textarea } from \"@krizaka/ui/field\";\nimport { Stat } from \"@krizaka/ui/stat\";\nimport * as React from \"react\";\n\nconst AMOUNTS = [3, 5, 10, 20];\n\n// TEMPLATE — tipping a creator (Orochia): who is paid, the amount in one tap, an optional word, the summary beside the\n// action — under the form on a phone, where the pay button stays last. The total is always said before the button.\nexport default function DetailLayoutCheckout() {\n  const [amount, setAmount] = React.useState(\"5\");\n  return (\n    <div className=\"brand-orochia w-full\">\n      <DetailLayout\n        back={<a href=\"#elena\">← Elena's page</a>}\n        eyebrow=\"Tip\"\n        title=\"Say thanks to Elena\"\n        meta=\"She keeps 90 %. Paid out every Monday.\"\n        aside={\n          <div className=\"flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n            <Stat label=\"You pay\" value={`€${amount}`} hint=\"no fee added on top\" />\n            <Button variant=\"primary\" shape=\"cut\" className=\"w-full\">{`Tip €${amount}`}</Button>\n          </div>\n        }\n      >\n        <form className=\"flex max-w-lg flex-col gap-5\" onSubmit={(e) => e.preventDefault()}>\n          <Chip.Group type=\"single\" label=\"Amount\" value={amount} onValueChange={(v) => v && setAmount(v)} required>\n            {AMOUNTS.map((a) => (\n              <Chip key={a} value={String(a)}>{`€${a}`}</Chip>\n            ))}\n          </Chip.Group>\n          <Field.Root>\n            <Field.Label htmlFor=\"note\">A word for her (optional)</Field.Label>\n            <Textarea id=\"note\" rows={3} placeholder=\"The rooftop scene was incredible.\" />\n          </Field.Root>\n        </form>\n      </DetailLayout>\n    </div>\n  );\n}\n"
+        "code": "\"use client\";\n\nimport { Button } from \"@krizaka/ui/button\";\nimport { Chip } from \"@krizaka/ui/chip\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { Field, Textarea } from \"@krizaka/ui/field\";\nimport { Stat } from \"@krizaka/ui/stat\";\nimport * as React from \"react\";\n\nconst AMOUNTS = [3, 5, 10, 20];\n\n// TEMPLATE — tipping a creator (Orochia): who is paid, the amount in one tap, an optional word, the summary beside the\n// action — under the form on a phone, where the pay button stays last. The total is always said before the button.\nexport default function DetailLayoutCheckout() {\n  const [amount, setAmount] = React.useState(\"5\");\n  return (\n    <div className=\"brand-orochia w-full\">\n      <DetailLayout\n        back={<a href=\"#elena\">← Elena's page</a>}\n        eyebrow=\"Tip\"\n        title=\"Say thanks to Elena\"\n        meta=\"She keeps 90 %. Paid out every Monday.\"\n        aside={\n          <div className=\"flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n            <Stat label=\"You pay\" value={`€${amount}`} hint=\"no fee added on top\" />\n            <Button variant=\"primary\" className=\"w-full\">{`Tip €${amount}`}</Button>\n          </div>\n        }\n      >\n        <form className=\"flex max-w-lg flex-col gap-5\" onSubmit={(e) => e.preventDefault()}>\n          <Chip.Group type=\"single\" label=\"Amount\" value={amount} onValueChange={(v) => v && setAmount(v)} required>\n            {AMOUNTS.map((a) => (\n              <Chip key={a} value={String(a)}>{`€${a}`}</Chip>\n            ))}\n          </Chip.Group>\n          <Field.Root>\n            <Field.Label htmlFor=\"note\">A word for her (optional)</Field.Label>\n            <Textarea id=\"note\" rows={3} placeholder=\"The rooftop scene was incredible.\" />\n          </Field.Root>\n        </form>\n      </DetailLayout>\n    </div>\n  );\n}\n"
       },
       {
         "name": "job",
@@ -155,7 +155,7 @@
         "description": "An engine job without tabs or side panel.",
         "path": "examples/detail-layout/job.tsx",
         "module": "@krizaka/ui/registry/examples/detail-layout/job",
-        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\n\n// Without tabs or side panel: an object's header and its content.\nexport default function DetailLayoutJob() {\n  return (\n    <DetailLayout\n      className=\"w-full\"\n      back={<a href=\"#jobs\">← Jobs</a>}\n      eyebrow=\"Job · job-4822\"\n      title=\"Podcast transcript\"\n      status={<Badge tone=\"accent\" dot>Running</Badge>}\n      meta=\"Whisper large · started 5 min ago\"\n      actions={<Button size=\"sm\" variant=\"danger\" shape=\"cut\">Cancel</Button>}\n    >\n      <p className=\"text-sm text-fg-secondary\">The transcript appears here as it is written.</p>\n    </DetailLayout>\n  );\n}\n"
+        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\n\n// Without tabs or side panel: an object's header and its content.\nexport default function DetailLayoutJob() {\n  return (\n    <DetailLayout\n      className=\"w-full\"\n      back={<a href=\"#jobs\">← Jobs</a>}\n      eyebrow=\"Job · job-4822\"\n      title=\"Podcast transcript\"\n      status={<Badge tone=\"accent\" dot>Running</Badge>}\n      meta=\"Whisper large · started 5 min ago\"\n      actions={<Button size=\"sm\" variant=\"danger\">Cancel</Button>}\n    >\n      <p className=\"text-sm text-fg-secondary\">The transcript appears here as it is written.</p>\n    </DetailLayout>\n  );\n}\n"
       }
     ]
   },
@@ -184,7 +184,7 @@
   "registryDependencies": [],
   "demo": {
     "path": "examples/detail-layout/video.tsx",
-    "content": "\"use client\";\n\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { Facts } from \"@krizaka/ui/page\";\nimport { Stat } from \"@krizaka/ui/stat\";\nimport { Tabs } from \"@krizaka/ui/tabs\";\n\n// TEMPLATE — one video in Orochia's studio: the way back to the list, its thumbnail, title and status, its facts, the\n// actions; the tabs (overview · sales · comments); the side panel with the price and the audience — under the content on\n// a phone, where the actions wrap under the title.\nexport default function DetailLayoutVideo() {\n  return (\n    <div className=\"brand-orochia w-full\">\n      <Tabs.Root defaultValue=\"overview\">\n        <DetailLayout\n          back={<a href=\"#videos\">← Videos</a>}\n          media={<div className=\"aspect-video w-40 bg-linear-to-br from-accent to-accent-2\" />}\n          eyebrow=\"Video · v-2087\"\n          title=\"Night shoot, part 2\"\n          status={<Badge tone=\"success\" dot>Published</Badge>}\n          meta={<Facts items={[{ label: \"12:48\" }, { label: \"Unlock €4.99\" }, { label: \"18+ checked\", tone: \"ok\" }]} />}\n          actions={\n            <>\n              <Button size=\"sm\" variant=\"secondary\" shape=\"cut\">Edit</Button>\n              <Button size=\"sm\" variant=\"primary\" shape=\"cut\">Share</Button>\n            </>\n          }\n          tabs={\n            <Tabs.List aria-label=\"Video\">\n              <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n              <Tabs.Trigger value=\"sales\">Sales</Tabs.Trigger>\n              <Tabs.Trigger value=\"comments\">Comments</Tabs.Trigger>\n            </Tabs.List>\n          }\n          aside={\n            <div className=\"flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n              <Stat label=\"Unlocks\" value=\"146\" trend=\"up\" trendLabel=\"+12\" hint=\"7 days\" />\n              <Stat label=\"Earned\" value=\"€653\" hint=\"after the 10 % fee\" />\n            </div>\n          }\n        >\n          <Tabs.Content value=\"overview\" className=\"text-sm leading-relaxed text-fg-secondary\">\n            The second half of the night shoot in Old Montréal: the rooftop, the rain, the last take at dawn.\n          </Tabs.Content>\n          <Tabs.Content value=\"sales\" className=\"text-sm text-fg-secondary\">146 unlocks, 3 tips.</Tabs.Content>\n          <Tabs.Content value=\"comments\" className=\"text-sm text-fg-secondary\">28 comments, 2 waiting for moderation.</Tabs.Content>\n        </DetailLayout>\n      </Tabs.Root>\n    </div>\n  );\n}\n"
+    "content": "\"use client\";\n\nimport { Badge } from \"@krizaka/ui/badge\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { DetailLayout } from \"@krizaka/ui/detail-layout\";\nimport { Facts } from \"@krizaka/ui/page\";\nimport { Stat } from \"@krizaka/ui/stat\";\nimport { Tabs } from \"@krizaka/ui/tabs\";\n\n// TEMPLATE — one video in Orochia's studio: the way back to the list, its thumbnail, title and status, its facts, the\n// actions; the tabs (overview · sales · comments); the side panel with the price and the audience — under the content on\n// a phone, where the actions wrap under the title.\nexport default function DetailLayoutVideo() {\n  return (\n    <div className=\"brand-orochia w-full\">\n      <Tabs.Root defaultValue=\"overview\">\n        <DetailLayout\n          back={<a href=\"#videos\">← Videos</a>}\n          media={<div className=\"aspect-video w-40 bg-linear-to-br from-accent to-accent-2\" />}\n          eyebrow=\"Video · v-2087\"\n          title=\"Night shoot, part 2\"\n          status={<Badge tone=\"success\" dot>Published</Badge>}\n          meta={<Facts items={[{ label: \"12:48\" }, { label: \"Unlock €4.99\" }, { label: \"18+ checked\", tone: \"ok\" }]} />}\n          actions={\n            <>\n              <Button size=\"sm\" variant=\"secondary\">Edit</Button>\n              <Button size=\"sm\" variant=\"primary\">Share</Button>\n            </>\n          }\n          tabs={\n            <Tabs.List aria-label=\"Video\">\n              <Tabs.Trigger value=\"overview\">Overview</Tabs.Trigger>\n              <Tabs.Trigger value=\"sales\">Sales</Tabs.Trigger>\n              <Tabs.Trigger value=\"comments\">Comments</Tabs.Trigger>\n            </Tabs.List>\n          }\n          aside={\n            <div className=\"flex flex-col gap-4 rounded-xl border border-border-default bg-surface-1 p-4\">\n              <Stat label=\"Unlocks\" value=\"146\" trend=\"up\" trendLabel=\"+12\" hint=\"7 days\" />\n              <Stat label=\"Earned\" value=\"€653\" hint=\"after the 10 % fee\" />\n            </div>\n          }\n        >\n          <Tabs.Content value=\"overview\" className=\"text-sm leading-relaxed text-fg-secondary\">\n            The second half of the night shoot in Old Montréal: the rooftop, the rain, the last take at dawn.\n          </Tabs.Content>\n          <Tabs.Content value=\"sales\" className=\"text-sm text-fg-secondary\">146 unlocks, 3 tips.</Tabs.Content>\n          <Tabs.Content value=\"comments\" className=\"text-sm text-fg-secondary\">28 comments, 2 waiting for moderation.</Tabs.Content>\n        </DetailLayout>\n      </Tabs.Root>\n    </div>\n  );\n}\n"
   },
   "props": [
     {

package/registry/docs-hub-page.json

@@ -165,7 +165,7 @@
         "why": "A newcomer picks a collection, starts quickly and sees what is new, from one hub.",
         "path": "examples/docs-hub-page/krizaka.tsx",
         "module": "@krizaka/ui/registry/examples/docs-hub-page/krizaka",
-        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CodeBlock } from \"@krizaka/ui/code-block\";\nimport { DocsHubPage } from \"@krizaka/ui/docs-hub-page\";\nimport { Kbd } from \"@krizaka/ui/kbd\";\n\nconst COLLECTIONS = [\n  { id: \"ui\", title: \"Krizaka UI\", href: \"#ui\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Tokens, a Tailwind preset, the components — live, generated from their code.\", links: [{ href: \"#blocks\", label: \"Blocks\" }, { href: \"#layouts\", label: \"Layouts\" }, { href: \"#templates\", label: \"Templates\" }] },\n  { id: \"java\", title: \"Krizaka Java\", href: \"#java\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Parent, BOM, starters, messaging, Problem Details.\", links: [{ href: \"#bom\", label: \"BOM\" }, { href: \"#messaging\", label: \"Messaging\" }] },\n  { id: \"orazaka\", brand: \"orazaka\", title: \"Orazaka\", href: \"#orazaka\", mark: <ProductLogo id=\"orazaka\" size={26} animated={false} />, description: \"The sovereign AI engine: install, packs, administration.\", links: [{ href: \"#cli\", label: \"CLI\" }, { href: \"#packs\", label: \"Packs\" }, { href: \"#admin\", label: \"Admin\" }] },\n  { id: \"orochia\", brand: \"orochia\", title: \"Orochia\", href: \"#orochia\", mark: <ProductLogo id=\"orochia\" size={26} animated={false} />, description: \"The creator platform: payments, auctions, the admin console.\", links: [{ href: \"#payouts\", label: \"Payouts\" }, { href: \"#console\", label: \"Console\" }] },\n];\n\n// TEMPLATE — krizaka.com/docs: the search in the middle of the hero (⌘K), the collections each in its product's brand\n// with their quick links, a quick start beside the most read pages, what is new, the owl's promise. On a phone: search,\n// then one collection per row.\nexport default function DocsHubPageKrizaka() {\n  return (\n    <DocsHubPage\n      eyebrow=\"Documentation\"\n      title=\"Build with Krizaka\"\n      lead=\"Every building block the products are made of, documented from its source.\"\n      search={\n        <Button variant=\"secondary\" size=\"lg\" shape=\"cut\" className=\"w-full justify-between text-fg-secondary\">\n          Search the documentation <Kbd>⌘K</Kbd>\n        </Button>\n      }\n      searchHints={<>Try: <a href=\"#cli\">orazaka install</a> · <a href=\"#button\">Button</a> · <a href=\"#bom\">BOM</a></>}\n      collectionsTitle=\"Collections\"\n      collections={COLLECTIONS}\n      quickstarts={{ title: \"Start in one line\", children: <CodeBlock code=\"npx orazaka install\" language=\"bash\" file=\"Terminal\" copyLabel=\"Copy\" copiedLabel=\"Copied\" /> }}\n      popular={{ title: \"Most read\", items: [{ href: \"#cli\", title: \"The CLI\", meta: \"Orazaka\" }, { href: \"#button\", title: \"Button\", meta: \"Krizaka UI\" }, { href: \"#bom\", title: \"The BOM\", meta: \"Java\" }] }}\n      whatsNew={{ title: \"What's new\", items: [{ href: \"#ui-260\", title: \"Page blocks: frame, hero, cards, decisions\", meta: \"@krizaka/ui 2.6.0\" }, { href: \"#java-010\", title: \"The platform kit on Maven Central\", meta: \"0.1.0\" }] }}\n      promise={{ label: \"The owl's promise\", text: \"Every page here is generated from the code it documents — when the code changes, the page does.\" }}\n    />\n  );\n}\n"
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CodeBlock } from \"@krizaka/ui/code-block\";\nimport { DocsHubPage } from \"@krizaka/ui/docs-hub-page\";\nimport { Kbd } from \"@krizaka/ui/kbd\";\n\nconst COLLECTIONS = [\n  { id: \"ui\", title: \"Krizaka UI\", href: \"#ui\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Tokens, a Tailwind preset, the components — live, generated from their code.\", links: [{ href: \"#blocks\", label: \"Blocks\" }, { href: \"#layouts\", label: \"Layouts\" }, { href: \"#templates\", label: \"Templates\" }] },\n  { id: \"java\", title: \"Krizaka Java\", href: \"#java\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Parent, BOM, starters, messaging, Problem Details.\", links: [{ href: \"#bom\", label: \"BOM\" }, { href: \"#messaging\", label: \"Messaging\" }] },\n  { id: \"orazaka\", brand: \"orazaka\", title: \"Orazaka\", href: \"#orazaka\", mark: <ProductLogo id=\"orazaka\" size={26} animated={false} />, description: \"The sovereign AI engine: install, packs, administration.\", links: [{ href: \"#cli\", label: \"CLI\" }, { href: \"#packs\", label: \"Packs\" }, { href: \"#admin\", label: \"Admin\" }] },\n  { id: \"orochia\", brand: \"orochia\", title: \"Orochia\", href: \"#orochia\", mark: <ProductLogo id=\"orochia\" size={26} animated={false} />, description: \"The creator platform: payments, auctions, the admin console.\", links: [{ href: \"#payouts\", label: \"Payouts\" }, { href: \"#console\", label: \"Console\" }] },\n];\n\n// TEMPLATE — krizaka.com/docs: the search in the middle of the hero (⌘K), the collections each in its product's brand\n// with their quick links, a quick start beside the most read pages, what is new, the owl's promise. On a phone: search,\n// then one collection per row.\nexport default function DocsHubPageKrizaka() {\n  return (\n    <DocsHubPage\n      eyebrow=\"Documentation\"\n      title=\"Build with Krizaka\"\n      lead=\"Every building block the products are made of, documented from its source.\"\n      search={\n        <Button variant=\"secondary\" size=\"lg\" className=\"w-full justify-between text-fg-secondary\">\n          Search the documentation <Kbd>⌘K</Kbd>\n        </Button>\n      }\n      searchHints={<>Try: <a href=\"#cli\">orazaka install</a> · <a href=\"#button\">Button</a> · <a href=\"#bom\">BOM</a></>}\n      collectionsTitle=\"Collections\"\n      collections={COLLECTIONS}\n      quickstarts={{ title: \"Start in one line\", children: <CodeBlock code=\"npx orazaka install\" language=\"bash\" file=\"Terminal\" copyLabel=\"Copy\" copiedLabel=\"Copied\" /> }}\n      popular={{ title: \"Most read\", items: [{ href: \"#cli\", title: \"The CLI\", meta: \"Orazaka\" }, { href: \"#button\", title: \"Button\", meta: \"Krizaka UI\" }, { href: \"#bom\", title: \"The BOM\", meta: \"Java\" }] }}\n      whatsNew={{ title: \"What's new\", items: [{ href: \"#ui-260\", title: \"Page blocks: frame, hero, cards, decisions\", meta: \"@krizaka/ui 2.6.0\" }, { href: \"#java-010\", title: \"The platform kit on Maven Central\", meta: \"0.1.0\" }] }}\n      promise={{ label: \"The owl's promise\", text: \"Every page here is generated from the code it documents — when the code changes, the page does.\" }}\n    />\n  );\n}\n"
       }
     ]
   },
@@ -196,7 +196,7 @@
   ],
   "demo": {
     "path": "examples/docs-hub-page/krizaka.tsx",
-    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CodeBlock } from \"@krizaka/ui/code-block\";\nimport { DocsHubPage } from \"@krizaka/ui/docs-hub-page\";\nimport { Kbd } from \"@krizaka/ui/kbd\";\n\nconst COLLECTIONS = [\n  { id: \"ui\", title: \"Krizaka UI\", href: \"#ui\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Tokens, a Tailwind preset, the components — live, generated from their code.\", links: [{ href: \"#blocks\", label: \"Blocks\" }, { href: \"#layouts\", label: \"Layouts\" }, { href: \"#templates\", label: \"Templates\" }] },\n  { id: \"java\", title: \"Krizaka Java\", href: \"#java\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Parent, BOM, starters, messaging, Problem Details.\", links: [{ href: \"#bom\", label: \"BOM\" }, { href: \"#messaging\", label: \"Messaging\" }] },\n  { id: \"orazaka\", brand: \"orazaka\", title: \"Orazaka\", href: \"#orazaka\", mark: <ProductLogo id=\"orazaka\" size={26} animated={false} />, description: \"The sovereign AI engine: install, packs, administration.\", links: [{ href: \"#cli\", label: \"CLI\" }, { href: \"#packs\", label: \"Packs\" }, { href: \"#admin\", label: \"Admin\" }] },\n  { id: \"orochia\", brand: \"orochia\", title: \"Orochia\", href: \"#orochia\", mark: <ProductLogo id=\"orochia\" size={26} animated={false} />, description: \"The creator platform: payments, auctions, the admin console.\", links: [{ href: \"#payouts\", label: \"Payouts\" }, { href: \"#console\", label: \"Console\" }] },\n];\n\n// TEMPLATE — krizaka.com/docs: the search in the middle of the hero (⌘K), the collections each in its product's brand\n// with their quick links, a quick start beside the most read pages, what is new, the owl's promise. On a phone: search,\n// then one collection per row.\nexport default function DocsHubPageKrizaka() {\n  return (\n    <DocsHubPage\n      eyebrow=\"Documentation\"\n      title=\"Build with Krizaka\"\n      lead=\"Every building block the products are made of, documented from its source.\"\n      search={\n        <Button variant=\"secondary\" size=\"lg\" shape=\"cut\" className=\"w-full justify-between text-fg-secondary\">\n          Search the documentation <Kbd>⌘K</Kbd>\n        </Button>\n      }\n      searchHints={<>Try: <a href=\"#cli\">orazaka install</a> · <a href=\"#button\">Button</a> · <a href=\"#bom\">BOM</a></>}\n      collectionsTitle=\"Collections\"\n      collections={COLLECTIONS}\n      quickstarts={{ title: \"Start in one line\", children: <CodeBlock code=\"npx orazaka install\" language=\"bash\" file=\"Terminal\" copyLabel=\"Copy\" copiedLabel=\"Copied\" /> }}\n      popular={{ title: \"Most read\", items: [{ href: \"#cli\", title: \"The CLI\", meta: \"Orazaka\" }, { href: \"#button\", title: \"Button\", meta: \"Krizaka UI\" }, { href: \"#bom\", title: \"The BOM\", meta: \"Java\" }] }}\n      whatsNew={{ title: \"What's new\", items: [{ href: \"#ui-260\", title: \"Page blocks: frame, hero, cards, decisions\", meta: \"@krizaka/ui 2.6.0\" }, { href: \"#java-010\", title: \"The platform kit on Maven Central\", meta: \"0.1.0\" }] }}\n      promise={{ label: \"The owl's promise\", text: \"Every page here is generated from the code it documents — when the code changes, the page does.\" }}\n    />\n  );\n}\n"
+    "content": "import { ProductLogo } from \"@krizaka/ui\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { CodeBlock } from \"@krizaka/ui/code-block\";\nimport { DocsHubPage } from \"@krizaka/ui/docs-hub-page\";\nimport { Kbd } from \"@krizaka/ui/kbd\";\n\nconst COLLECTIONS = [\n  { id: \"ui\", title: \"Krizaka UI\", href: \"#ui\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Tokens, a Tailwind preset, the components — live, generated from their code.\", links: [{ href: \"#blocks\", label: \"Blocks\" }, { href: \"#layouts\", label: \"Layouts\" }, { href: \"#templates\", label: \"Templates\" }] },\n  { id: \"java\", title: \"Krizaka Java\", href: \"#java\", mark: <ProductLogo id=\"krizaka\" size={26} animated={false} />, description: \"Parent, BOM, starters, messaging, Problem Details.\", links: [{ href: \"#bom\", label: \"BOM\" }, { href: \"#messaging\", label: \"Messaging\" }] },\n  { id: \"orazaka\", brand: \"orazaka\", title: \"Orazaka\", href: \"#orazaka\", mark: <ProductLogo id=\"orazaka\" size={26} animated={false} />, description: \"The sovereign AI engine: install, packs, administration.\", links: [{ href: \"#cli\", label: \"CLI\" }, { href: \"#packs\", label: \"Packs\" }, { href: \"#admin\", label: \"Admin\" }] },\n  { id: \"orochia\", brand: \"orochia\", title: \"Orochia\", href: \"#orochia\", mark: <ProductLogo id=\"orochia\" size={26} animated={false} />, description: \"The creator platform: payments, auctions, the admin console.\", links: [{ href: \"#payouts\", label: \"Payouts\" }, { href: \"#console\", label: \"Console\" }] },\n];\n\n// TEMPLATE — krizaka.com/docs: the search in the middle of the hero (⌘K), the collections each in its product's brand\n// with their quick links, a quick start beside the most read pages, what is new, the owl's promise. On a phone: search,\n// then one collection per row.\nexport default function DocsHubPageKrizaka() {\n  return (\n    <DocsHubPage\n      eyebrow=\"Documentation\"\n      title=\"Build with Krizaka\"\n      lead=\"Every building block the products are made of, documented from its source.\"\n      search={\n        <Button variant=\"secondary\" size=\"lg\" className=\"w-full justify-between text-fg-secondary\">\n          Search the documentation <Kbd>⌘K</Kbd>\n        </Button>\n      }\n      searchHints={<>Try: <a href=\"#cli\">orazaka install</a> · <a href=\"#button\">Button</a> · <a href=\"#bom\">BOM</a></>}\n      collectionsTitle=\"Collections\"\n      collections={COLLECTIONS}\n      quickstarts={{ title: \"Start in one line\", children: <CodeBlock code=\"npx orazaka install\" language=\"bash\" file=\"Terminal\" copyLabel=\"Copy\" copiedLabel=\"Copied\" /> }}\n      popular={{ title: \"Most read\", items: [{ href: \"#cli\", title: \"The CLI\", meta: \"Orazaka\" }, { href: \"#button\", title: \"Button\", meta: \"Krizaka UI\" }, { href: \"#bom\", title: \"The BOM\", meta: \"Java\" }] }}\n      whatsNew={{ title: \"What's new\", items: [{ href: \"#ui-260\", title: \"Page blocks: frame, hero, cards, decisions\", meta: \"@krizaka/ui 2.6.0\" }, { href: \"#java-010\", title: \"The platform kit on Maven Central\", meta: \"0.1.0\" }] }}\n      promise={{ label: \"The owl's promise\", text: \"Every page here is generated from the code it documents — when the code changes, the page does.\" }}\n    />\n  );\n}\n"
   },
   "props": [
     {

package/registry/empty-state.json

@@ -122,7 +122,7 @@
         "why": "A person facing an empty page knows what belongs here and how to start.",
         "path": "examples/empty-state/library.tsx",
         "module": "@krizaka/ui/registry/examples/empty-state/library",
-        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { EmptyState } from \"@krizaka/ui/empty-state\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { Page } from \"@krizaka/ui/page\";\n\n// TEMPLATE — a page with nothing in it yet (a creator's library): the page keeps its title and place, the bird says it is\n// empty, one sentence tells what will fill it, one button does the first thing. Never a blank screen.\nexport default function EmptyStateLibrary() {\n  return (\n    <Page className=\"brand-orochia\">\n      <h1 className=\"font-display text-2xl font-extrabold tracking-tight text-fg\">Library</h1>\n      <EmptyState\n        icon={<Mascot bird=\"flamingo\" mood=\"empty\" size={96} />}\n        title=\"Nothing here yet\"\n        description=\"Your videos, once published, wait here with their sales. The first one takes about ten minutes.\"\n        action={<Button variant=\"primary\" shape=\"cut\">Publish a first video</Button>}\n      />\n    </Page>\n  );\n}\n"
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { EmptyState } from \"@krizaka/ui/empty-state\";\nimport { Mascot } from \"@krizaka/ui/mascots\";\nimport { Page } from \"@krizaka/ui/page\";\n\n// TEMPLATE — a page with nothing in it yet (a creator's library): the page keeps its title and place, the bird says it is\n// empty, one sentence tells what will fill it, one button does the first thing. Never a blank screen.\nexport default function EmptyStateLibrary() {\n  return (\n    <Page className=\"brand-orochia\">\n      <h1 className=\"font-display text-2xl font-extrabold tracking-tight text-fg\">Library</h1>\n      <EmptyState\n        icon={<Mascot bird=\"flamingo\" mood=\"empty\" size={96} />}\n        title=\"Nothing here yet\"\n        description=\"Your videos, once published, wait here with their sales. The first one takes about ten minutes.\"\n        action={<Button variant=\"primary\">Publish a first video</Button>}\n      />\n    </Page>\n  );\n}\n"
       }
     ]
   },

package/registry/engine-flow.json

@@ -42,6 +42,7 @@
     "Give each node its brand scope (`className=\"brand-<id>\"`) and the figure the hub's: photons going in wear the app's colour, those coming back the engine's.",
     "Draw only what runs: `flow=\"both\"` where results really come back, `planned` (with a `status` word) where nothing is wired yet.",
     "Keep a text version (a list) in the page; give each node a one-line `description` and its `href`.",
+    "Tune the stream, not the story: `density` (sparse · normal · dense), `speed`, `easing`, `stagger`, and `trigger` (`always`, `hover`, `active`) change how the photons travel, never what the figure claims; `breathe={false}` keeps the engine still.",
     "Five to eight nodes: radial reads at a glance; on a phone the default `compactLayout` puts them in a row above the hub."
   ],
   "accessibility": {
@@ -97,6 +98,13 @@
             "description": "The apps around it.",
             "required": true
           },
+          {
+            "name": "breathe",
+            "type": "boolean",
+            "default": "true",
+            "description": "The engine's mark swells slowly (a loop, still under reduced motion).",
+            "required": false
+          },
           {
             "name": "compactLayout",
             "type": "false | FlowLayout",
@@ -118,6 +126,20 @@
             "description": "The node shown in the detail line at first.",
             "required": false
           },
+          {
+            "name": "density",
+            "type": "FlowDensity",
+            "default": "normal",
+            "description": "How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.",
+            "required": false
+          },
+          {
+            "name": "easing",
+            "type": "FlowEasing",
+            "default": "linear",
+            "description": "The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any\nCSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).",
+            "required": false
+          },
           {
             "name": "hint",
             "type": "ReactNode",
@@ -145,6 +167,20 @@
             "default": "16",
             "description": "Photon speed, in units per second (the stage is 100 units wide).",
             "required": false
+          },
+          {
+            "name": "stagger",
+            "type": "number",
+            "default": "300",
+            "description": "Milliseconds between one conduit's photons and the next's: 0 sends them all together.",
+            "required": false
+          },
+          {
+            "name": "trigger",
+            "type": "FlowTrigger",
+            "default": "always",
+            "description": "When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the\nconduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they\nare always paused, and still under reduced motion.",
+            "required": false
           }
         ]
       }
@@ -172,7 +208,7 @@
   "files": [
     {
       "path": "engine-flow/engine-flow.tsx",
-      "content": "// Client (the node a visitor points at or focuses). An engine at the hub and the apps it serves around it: one conduit\n// per app, and photons that travel it — towards the hub (`in`: requests), back (`out`: results) or both — in the app's\n// brand colour going in and the hub's coming back. A planned app is drawn dim, its conduit dashed and still.\n//\n// Motion is the Krizaka signature's (motion.css): CSS animations of `stroke-dashoffset`, no animation frame, no canvas;\n// paused off screen (`data-motion-scope` → MotionObserver's `data-offscreen`), held while the page settles (`kz-loop`),\n// a still frame under reduced motion (the photons rest along their conduit). The stage keeps its aspect ratio and the\n// detail line its height: no layout shift.\n//\n// Accessible: the drawing is hidden from assistive technology; every node is a real button named by its label, and the\n// detail line (polite live region) says the chosen node's description with its link. Pair it with a text version (a\n// list) in the page: the figure is a picture of it.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type FlowConduit, flowGeometry, type FlowLayout } from \"./geometry\";\n\nexport interface EngineFlowNode {\n  /** A stable id (`orochia`). */\n  id: string;\n  /** Its name, the button's accessible name (\"Orochia\"). */\n  label: string;\n  /** Its mark (a `ProductLogo`), decorative. */\n  mark?: React.ReactNode;\n  /** One line: what it uses the engine for — shown when the node is pointed at or focused. */\n  description?: React.ReactNode;\n  /** Where it lives (its site). */\n  href?: string;\n  /** The link's words (\"Visit dev.orochia.com\"); defaults to the label. */\n  linkLabel?: React.ReactNode;\n  /** Opens the link in a new tab. */\n  external?: boolean;\n  /** What travels: `in` towards the hub, `out` back from it, `both`.\n   * @default \"in\" */\n  flow?: \"in\" | \"out\" | \"both\";\n  /** Not wired yet: drawn dim, its conduit dashed and still, no photon. */\n  planned?: boolean;\n  /** A word beside the name in the detail line (\"planned\"), passed translated. */\n  status?: React.ReactNode;\n  /** Its brand scope (`brand-orochia`): its conduit, photons and ring take its `--kz-accent`. */\n  className?: string;\n}\n\nexport interface EngineFlowHub {\n  /** The engine's name (\"Orazaka\"). */\n  label: string;\n  /** Its mark, decorative. */\n  mark?: React.ReactNode;\n  /** A line under the name (\"the engine\"). */\n  caption?: React.ReactNode;\n  /** Its brand scope; the photons coming back take its accent. */\n  className?: string;\n}\n\nexport type EngineFlowProps = Omit<React.ComponentProps<\"figure\">, \"children\"> & {\n  /** What the figure shows (\"Orazaka and the products it powers\"), passed translated. */\n  label: string;\n  /** The engine, at the hub. */\n  hub: EngineFlowHub;\n  /** The apps around it. */\n  nodes: readonly EngineFlowNode[];\n  /** How the nodes sit around the hub.\n   * @default \"radial\" */\n  layout?: FlowLayout;\n  /** The layout under a 560 px wide container (a phone); `false` keeps `layout` everywhere.\n   * @default \"top-to-bottom\" */\n  compactLayout?: FlowLayout | false;\n  /** `photons` travel the conduits; `none` draws them still.\n   * @default \"photons\" */\n  particles?: \"photons\" | \"none\";\n  /** The conduits' shape.\n   * @default \"bezier\" */\n  conduit?: FlowConduit;\n  /** The detail line before a node is chosen (\"Point at a product\"). */\n  hint?: React.ReactNode;\n  /** The node shown in the detail line at first. */\n  defaultActive?: string;\n  /** Photon speed, in units per second (the stage is 100 units wide).\n   * @default 16 */\n  speed?: number;\n};\n\nfunction Stage({\n  layout,\n  variant,\n  nodes,\n  hub,\n  conduit,\n  particles,\n  speed,\n  active,\n  onActive,\n  detailId,\n}: {\n  layout: FlowLayout;\n  variant: \"wide\" | \"compact\";\n  nodes: readonly EngineFlowNode[];\n  hub: EngineFlowHub;\n  conduit: FlowConduit;\n  particles: \"photons\" | \"none\";\n  speed: number;\n  active: string | undefined;\n  onActive: (id: string) => void;\n  detailId: string;\n}) {\n  const g = flowGeometry(layout, nodes.length, conduit);\n  const pct = (v: number, of: number) => `${((v / of) * 100).toFixed(3)}%`;\n  return (\n    <div className=\"kz-flow-stage\" data-variant={variant} data-layout={layout} style={{ aspectRatio: `${g.width} / ${g.height}` }}>\n      <svg viewBox={`0 0 ${g.width} ${g.height}`} aria-hidden=\"true\" focusable=\"false\">\n        {nodes.map((node, i) => {\n          const flow = node.flow ?? \"in\";\n          const length = g.lengths[i] ?? 0;\n          // Two to four photons per conduit, evenly spaced; the same speed on every conduit.\n          const gap = length / Math.min(4, Math.max(2, Math.round(length / 16)));\n          const timing = (dir: \"in\" | \"out\") =>\n            ({\n              \"--kz-flow-gap\": gap.toFixed(3),\n              animationDuration: `${(gap / speed).toFixed(2)}s`,\n              animationDelay: `${(-((i * 0.37 + (dir === \"out\" ? 0.5 : 0)) % 1) * (gap / speed)).toFixed(2)}s`,\n            }) as React.CSSProperties;\n          const lanes = node.planned || particles === \"none\" ? [] : flow === \"both\" ? ([\"in\", \"out\"] as const) : [flow];\n          return (\n            <g\n              key={node.id}\n              className={cn(\"kz-flow-link\", node.className)}\n              data-flow={flow}\n              data-planned={node.planned ? \"\" : undefined}\n              data-active={active === node.id ? \"\" : undefined}\n            >\n              <path className=\"kz-flow-wire\" d={g.paths[i]} />\n              {lanes.map((dir) => (\n                <React.Fragment key={dir}>\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} data-halo=\"\" d={g.paths[i]} style={timing(dir)} />\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} d={g.paths[i]} style={timing(dir)} />\n                </React.Fragment>\n              ))}\n            </g>\n          );\n        })}\n      </svg>\n      <div className={cn(\"kz-flow-hub\", hub.className)} style={{ left: pct(g.hub.x, g.width), top: pct(g.hub.y, g.height) }}>\n        {hub.mark ? <span className=\"kz-flow-hub-mark\">{hub.mark}</span> : null}\n        <span className=\"kz-flow-hub-label\">{hub.label}</span>\n        {hub.caption ? <span className=\"kz-flow-hub-caption\">{hub.caption}</span> : null}\n      </div>\n      <ul className=\"kz-flow-nodes\">\n        {nodes.map((node, i) => {\n          const p = g.nodes[i]!;\n          const on = active === node.id;\n          return (\n            <li key={node.id} style={{ left: pct(p.x, g.width), top: pct(p.y, g.height) }}>\n              <button\n                type=\"button\"\n                className={cn(\"kz-flow-node\", node.className)}\n                data-active={on ? \"\" : undefined}\n                data-planned={node.planned ? \"\" : undefined}\n                aria-pressed={on}\n                aria-controls={detailId}\n                onPointerEnter={() => onActive(node.id)}\n                onFocus={() => onActive(node.id)}\n                onClick={() => onActive(node.id)}\n              >\n                {node.mark ? (\n                  <span className=\"kz-flow-node-mark\" aria-hidden=\"true\">\n                    {node.mark}\n                  </span>\n                ) : null}\n                <span className=\"kz-flow-node-label\">{node.label}</span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n\n/** An engine at the hub and the apps it serves, with what travels between them. */\nexport function EngineFlow({\n  label,\n  hub,\n  nodes,\n  layout = \"radial\",\n  compactLayout = \"top-to-bottom\",\n  particles = \"photons\",\n  conduit = \"bezier\",\n  hint,\n  defaultActive,\n  speed = 16,\n  className,\n  ...props\n}: EngineFlowProps) {\n  const [active, setActive] = React.useState<string | undefined>(defaultActive);\n  const detailId = `${React.useId()}-detail`;\n  const chosen = nodes.find((n) => n.id === active);\n  const compact = compactLayout && compactLayout !== layout ? compactLayout : undefined;\n  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), active, onActive: setActive, detailId };\n  return (\n    <figure\n      aria-label={label}\n      className={cn(\"kz-flow\", className)}\n      data-motion-scope=\"\"\n      data-active={chosen ? \"\" : undefined}\n      data-compact={compact ? \"\" : undefined}\n      {...props}\n    >\n      <Stage layout={layout} variant=\"wide\" {...stage} />\n      {compact ? <Stage layout={compact} variant=\"compact\" {...stage} /> : null}\n      <figcaption id={detailId} className={cn(\"kz-flow-detail\", chosen?.className)} aria-live=\"polite\">\n        {chosen ? (\n          <>\n            <strong>{chosen.label}</strong>\n            {chosen.status ? <span className=\"kz-flow-status\">{chosen.status}</span> : null}\n            {chosen.description ? <span> {chosen.description}</span> : null}\n            {chosen.href ? (\n              <>\n                {\" \"}\n                <a href={chosen.href} {...(chosen.external ? { target: \"_blank\", rel: \"noopener\" } : {})}>\n                  {chosen.linkLabel ?? chosen.label}\n                  <span aria-hidden=\"true\"> →</span>\n                </a>\n              </>\n            ) : null}\n          </>\n        ) : (\n          hint\n        )}\n      </figcaption>\n    </figure>\n  );\n}\n"
+      "content": "// Client (the node a visitor points at or focuses). An engine at the hub and the apps it serves around it: one conduit\n// per app, and photons that travel it — towards the hub (`in`: requests), back (`out`: results) or both — in the app's\n// brand colour going in and the hub's coming back. A planned app is drawn dim, its conduit dashed and still.\n//\n// Motion is the Krizaka signature's (motion.css): CSS animations of `stroke-dashoffset`, no animation frame, no canvas;\n// paused off screen (`data-motion-scope` → MotionObserver's `data-offscreen`), held while the page settles (`kz-loop`),\n// a still frame under reduced motion (the photons rest along their conduit). The stage keeps its aspect ratio and the\n// detail line its height: no layout shift.\n//\n// Accessible: the drawing is hidden from assistive technology; every node is a real button named by its label, and the\n// detail line (polite live region) says the chosen node's description with its link. Pair it with a text version (a\n// list) in the page: the figure is a picture of it.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type FlowConduit, flowGeometry, type FlowLayout } from \"./geometry\";\n\nexport interface EngineFlowNode {\n  /** A stable id (`orochia`). */\n  id: string;\n  /** Its name, the button's accessible name (\"Orochia\"). */\n  label: string;\n  /** Its mark (a `ProductLogo`), decorative. */\n  mark?: React.ReactNode;\n  /** One line: what it uses the engine for — shown when the node is pointed at or focused. */\n  description?: React.ReactNode;\n  /** Where it lives (its site). */\n  href?: string;\n  /** The link's words (\"Visit dev.orochia.com\"); defaults to the label. */\n  linkLabel?: React.ReactNode;\n  /** Opens the link in a new tab. */\n  external?: boolean;\n  /** What travels: `in` towards the hub, `out` back from it, `both`.\n   * @default \"in\" */\n  flow?: \"in\" | \"out\" | \"both\";\n  /** Not wired yet: drawn dim, its conduit dashed and still, no photon. */\n  planned?: boolean;\n  /** A word beside the name in the detail line (\"planned\"), passed translated. */\n  status?: React.ReactNode;\n  /** Its brand scope (`brand-orochia`): its conduit, photons and ring take its `--kz-accent`. */\n  className?: string;\n}\n\nexport interface EngineFlowHub {\n  /** The engine's name (\"Orazaka\"). */\n  label: string;\n  /** Its mark, decorative. */\n  mark?: React.ReactNode;\n  /** A line under the name (\"the engine\"). */\n  caption?: React.ReactNode;\n  /** Its brand scope; the photons coming back take its accent. */\n  className?: string;\n}\n\nexport type EngineFlowProps = Omit<React.ComponentProps<\"figure\">, \"children\"> & {\n  /** What the figure shows (\"Orazaka and the products it powers\"), passed translated. */\n  label: string;\n  /** The engine, at the hub. */\n  hub: EngineFlowHub;\n  /** The apps around it. */\n  nodes: readonly EngineFlowNode[];\n  /** How the nodes sit around the hub.\n   * @default \"radial\" */\n  layout?: FlowLayout;\n  /** The layout under a 560 px wide container (a phone); `false` keeps `layout` everywhere.\n   * @default \"top-to-bottom\" */\n  compactLayout?: FlowLayout | false;\n  /** `photons` travel the conduits; `none` draws them still.\n   * @default \"photons\" */\n  particles?: \"photons\" | \"none\";\n  /** The conduits' shape.\n   * @default \"bezier\" */\n  conduit?: FlowConduit;\n  /** The detail line before a node is chosen (\"Point at a product\"). */\n  hint?: React.ReactNode;\n  /** The node shown in the detail line at first. */\n  defaultActive?: string;\n  /** Photon speed, in units per second (the stage is 100 units wide).\n   * @default 16 */\n  speed?: number;\n  /** How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.\n   * @default \"normal\" */\n  density?: FlowDensity;\n  /** When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the\n   * conduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they\n   * are always paused, and still under reduced motion.\n   * @default \"always\" */\n  trigger?: FlowTrigger;\n  /** The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any\n   * CSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).\n   * @default \"linear\" */\n  easing?: FlowEasing;\n  /** Milliseconds between one conduit's photons and the next's: 0 sends them all together.\n   * @default 300 */\n  stagger?: number;\n  /** The engine's mark swells slowly (a loop, still under reduced motion).\n   * @default true */\n  breathe?: boolean;\n};\n\nexport type FlowDensity = \"sparse\" | \"normal\" | \"dense\";\nexport type FlowTrigger = \"always\" | \"hover\" | \"active\";\nexport type FlowEasing = \"linear\" | \"ease-in-out\" | (string & {});\n\n/** How many photons a conduit of this length carries (evenly spaced, so the gap is `length / count`). */\nexport function photonCount(length: number, density: FlowDensity = \"normal\"): number {\n  const base = Math.round(length / 16);\n  if (density === \"sparse\") return Math.min(2, Math.max(1, Math.round(base / 2)));\n  if (density === \"dense\") return Math.min(8, Math.max(4, base * 2));\n  return Math.min(4, Math.max(2, base));\n}\n\nfunction Stage({\n  layout,\n  variant,\n  nodes,\n  hub,\n  conduit,\n  particles,\n  speed,\n  density,\n  easing,\n  stagger,\n  breathe,\n  active,\n  onActive,\n  detailId,\n}: {\n  layout: FlowLayout;\n  variant: \"wide\" | \"compact\";\n  nodes: readonly EngineFlowNode[];\n  hub: EngineFlowHub;\n  conduit: FlowConduit;\n  particles: \"photons\" | \"none\";\n  speed: number;\n  density: FlowDensity;\n  easing: FlowEasing;\n  stagger: number;\n  breathe: boolean;\n  active: string | undefined;\n  onActive: (id: string) => void;\n  detailId: string;\n}) {\n  const g = flowGeometry(layout, nodes.length, conduit);\n  const pct = (v: number, of: number) => `${((v / of) * 100).toFixed(3)}%`;\n  return (\n    <div className=\"kz-flow-stage\" data-variant={variant} data-layout={layout} style={{ aspectRatio: `${g.width} / ${g.height}` }}>\n      <svg viewBox={`0 0 ${g.width} ${g.height}`} aria-hidden=\"true\" focusable=\"false\">\n        {nodes.map((node, i) => {\n          const flow = node.flow ?? \"in\";\n          const length = g.lengths[i] ?? 0;\n          // Photons per conduit (`density`), evenly spaced; the same speed on every conduit.\n          const gap = length / photonCount(length, density);\n          const period = gap / speed;\n          const timing = (dir: \"in\" | \"out\") =>\n            ({\n              \"--kz-flow-gap\": gap.toFixed(3),\n              animationDuration: `${period.toFixed(2)}s`,\n              // Each conduit starts `stagger` ms after the previous (a negative delay: already under way); the way back is half a period behind.\n              animationDelay: `${(-(((i * stagger) / 1000 + (dir === \"out\" ? period / 2 : 0)) % period)).toFixed(2)}s`,\n              ...(easing !== \"linear\" ? { animationTimingFunction: easing } : {}),\n            }) as React.CSSProperties;\n          const lanes = node.planned || particles === \"none\" ? [] : flow === \"both\" ? ([\"in\", \"out\"] as const) : [flow];\n          return (\n            <g\n              key={node.id}\n              className={cn(\"kz-flow-link\", node.className)}\n              data-flow={flow}\n              data-planned={node.planned ? \"\" : undefined}\n              data-active={active === node.id ? \"\" : undefined}\n            >\n              <path className=\"kz-flow-wire\" d={g.paths[i]} />\n              {lanes.map((dir) => (\n                <React.Fragment key={dir}>\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} data-halo=\"\" d={g.paths[i]} style={timing(dir)} />\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} d={g.paths[i]} style={timing(dir)} />\n                </React.Fragment>\n              ))}\n            </g>\n          );\n        })}\n      </svg>\n      <div className={cn(\"kz-flow-hub\", hub.className)} style={{ left: pct(g.hub.x, g.width), top: pct(g.hub.y, g.height) }}>\n        {hub.mark ? <span className={cn(\"kz-flow-hub-mark\", breathe && \"kz-loop\")}>{hub.mark}</span> : null}\n        <span className=\"kz-flow-hub-label\">{hub.label}</span>\n        {hub.caption ? <span className=\"kz-flow-hub-caption\">{hub.caption}</span> : null}\n      </div>\n      <ul className=\"kz-flow-nodes\">\n        {nodes.map((node, i) => {\n          const p = g.nodes[i]!;\n          const on = active === node.id;\n          return (\n            <li key={node.id} style={{ left: pct(p.x, g.width), top: pct(p.y, g.height) }}>\n              <button\n                type=\"button\"\n                className={cn(\"kz-flow-node\", node.className)}\n                data-active={on ? \"\" : undefined}\n                data-planned={node.planned ? \"\" : undefined}\n                aria-pressed={on}\n                aria-controls={detailId}\n                onPointerEnter={() => onActive(node.id)}\n                onFocus={() => onActive(node.id)}\n                onClick={() => onActive(node.id)}\n              >\n                {node.mark ? (\n                  <span className=\"kz-flow-node-mark\" aria-hidden=\"true\">\n                    {node.mark}\n                  </span>\n                ) : null}\n                <span className=\"kz-flow-node-label\">{node.label}</span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n\n/** An engine at the hub and the apps it serves, with what travels between them. */\nexport function EngineFlow({\n  label,\n  hub,\n  nodes,\n  layout = \"radial\",\n  compactLayout = \"top-to-bottom\",\n  particles = \"photons\",\n  conduit = \"bezier\",\n  hint,\n  defaultActive,\n  speed = 16,\n  density = \"normal\",\n  trigger = \"always\",\n  easing = \"linear\",\n  stagger = 300,\n  breathe = true,\n  className,\n  ...props\n}: EngineFlowProps) {\n  const [active, setActive] = React.useState<string | undefined>(defaultActive);\n  const detailId = `${React.useId()}-detail`;\n  const chosen = nodes.find((n) => n.id === active);\n  const compact = compactLayout && compactLayout !== layout ? compactLayout : undefined;\n  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), density, easing, stagger: Math.max(0, stagger), breathe, active, onActive: setActive, detailId };\n  return (\n    <figure\n      aria-label={label}\n      className={cn(\"kz-flow\", className)}\n      data-motion-scope=\"\"\n      data-active={chosen ? \"\" : undefined}\n      data-trigger={trigger === \"always\" ? undefined : trigger}\n      data-density={density === \"normal\" ? undefined : density}\n      data-compact={compact ? \"\" : undefined}\n      {...props}\n    >\n      <Stage layout={layout} variant=\"wide\" {...stage} />\n      {compact ? <Stage layout={compact} variant=\"compact\" {...stage} /> : null}\n      <figcaption id={detailId} className={cn(\"kz-flow-detail\", chosen?.className)} aria-live=\"polite\">\n        {chosen ? (\n          <>\n            <strong>{chosen.label}</strong>\n            {chosen.status ? <span className=\"kz-flow-status\">{chosen.status}</span> : null}\n            {chosen.description ? <span> {chosen.description}</span> : null}\n            {chosen.href ? (\n              <>\n                {\" \"}\n                <a href={chosen.href} {...(chosen.external ? { target: \"_blank\", rel: \"noopener\" } : {})}>\n                  {chosen.linkLabel ?? chosen.label}\n                  <span aria-hidden=\"true\"> →</span>\n                </a>\n              </>\n            ) : null}\n          </>\n        ) : (\n          hint\n        )}\n      </figcaption>\n    </figure>\n  );\n}\n"
     },
     {
       "path": "engine-flow/geometry.ts",
@@ -180,11 +216,11 @@
     },
     {
       "path": "engine-flow/index.ts",
-      "content": "/** @krizaka/ui/engine-flow — `EngineFlow`: an engine at the hub, the apps it serves around it, what travels between them (SVG + CSS, no animation frame). Client. */\nexport { EngineFlow, type EngineFlowHub, type EngineFlowNode, type EngineFlowProps } from \"./engine-flow\";\nexport { FLOW_HEIGHT, type FlowConduit, type FlowGeometry, flowGeometry, type FlowLayout, type FlowPoint,flowPositions } from \"./geometry\";\n"
+      "content": "/** @krizaka/ui/engine-flow — `EngineFlow`: an engine at the hub, the apps it serves around it, what travels between them (SVG + CSS, no animation frame). Client. */\nexport {\n  EngineFlow,\n  type EngineFlowHub,\n  type EngineFlowNode,\n  type EngineFlowProps,\n  type FlowDensity,\n  type FlowEasing,\n  type FlowTrigger,\n  photonCount,\n} from \"./engine-flow\";\nexport { FLOW_HEIGHT, type FlowConduit, type FlowGeometry, flowGeometry, type FlowLayout, type FlowPoint,flowPositions } from \"./geometry\";\n"
     },
     {
       "path": "engine-flow/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Engine flow\",\n  summary:\n    \"An engine at the hub and the apps it serves around it, with what travels between them: photons going in (requests) and coming back (results) along each conduit — radial on a wide screen, top to bottom on a phone, planned apps dim and still.\",\n  status: \"beta\",\n  category: \"data-display\",\n  platforms: \"web\",\n  parity: {\n    native: { status: \"n/a\", reason: \"A diagram of a public site's page; an app screen lists the same facts.\" , use: \"list\" },\n    desktop: \"web\",\n  },\n  whenToUse: [\n    \"Showing one platform and the products built on it, in one glance: « one engine, the products it powers ».\",\n    \"Saying which way data goes per app — in, back, or both — only where it really runs; what is planned is drawn planned.\",\n  ],\n  whenNotToUse: [\n    { when: \"A sequence of steps a reader follows in order.\", use: \"stepper\" },\n    { when: \"Entry points to pages, where the cards are the content.\", use: \"card-grid\" },\n    { when: \"A chart of figures over time.\" },\n  ],\n  bestPractices: [\n    \"Give each node its brand scope (`className=\\\"brand-<id>\\\"`) and the figure the hub's: photons going in wear the app's colour, those coming back the engine's.\",\n    \"Draw only what runs: `flow=\\\"both\\\"` where results really come back, `planned` (with a `status` word) where nothing is wired yet.\",\n    \"Keep a text version (a list) in the page; give each node a one-line `description` and its `href`.\",\n    \"Five to eight nodes: radial reads at a glance; on a phone the default `compactLayout` puts them in a row above the hub.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Goes through the nodes, then the link of the detail line.\" },\n      { keys: \"Enter / Space\", action: \"Chooses the node: the detail line says its description and its link.\" },\n    ],\n    notes: [\n      \"The drawing (conduits, photons) is hidden from assistive technology; each node is a button named by its label, `aria-pressed` when chosen.\",\n      \"The detail line is a polite live region: pointing at or focusing a node announces its line.\",\n      \"Motion is CSS (motion.css): paused off screen (MotionObserver), held while the page settles, a still frame under reduced motion. No animation frame, no canvas.\",\n      \"The stage keeps its aspect ratio and the detail line its height: no layout shift.\",\n    ],\n  },\n  related: [\"card-grid\", \"glow-card\", \"iso\", \"number-ticker\"],\n  web: {\n    imports: [\"EngineFlow\"],\n    examples: [\n      { name: \"radial\", title: \"One engine, the products it powers\", description: \"Radial on a wide screen: both ways where results come back, planned products dim and still.\" },\n      { name: \"compact\", title: \"On a phone\", description: \"Top to bottom: the products in a row above, flowing down into the engine; the detail line names the chosen one.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Engine flow\",\n  summary:\n    \"An engine at the hub and the apps it serves around it, with what travels between them: photons going in (requests) and coming back (results) along each conduit — radial on a wide screen, top to bottom on a phone, planned apps dim and still.\",\n  status: \"beta\",\n  category: \"data-display\",\n  platforms: \"web\",\n  parity: {\n    native: { status: \"n/a\", reason: \"A diagram of a public site's page; an app screen lists the same facts.\" , use: \"list\" },\n    desktop: \"web\",\n  },\n  whenToUse: [\n    \"Showing one platform and the products built on it, in one glance: « one engine, the products it powers ».\",\n    \"Saying which way data goes per app — in, back, or both — only where it really runs; what is planned is drawn planned.\",\n  ],\n  whenNotToUse: [\n    { when: \"A sequence of steps a reader follows in order.\", use: \"stepper\" },\n    { when: \"Entry points to pages, where the cards are the content.\", use: \"card-grid\" },\n    { when: \"A chart of figures over time.\" },\n  ],\n  bestPractices: [\n    \"Give each node its brand scope (`className=\\\"brand-<id>\\\"`) and the figure the hub's: photons going in wear the app's colour, those coming back the engine's.\",\n    \"Draw only what runs: `flow=\\\"both\\\"` where results really come back, `planned` (with a `status` word) where nothing is wired yet.\",\n    \"Keep a text version (a list) in the page; give each node a one-line `description` and its `href`.\",\n    \"Tune the stream, not the story: `density` (sparse · normal · dense), `speed`, `easing`, `stagger`, and `trigger` (`always`, `hover`, `active`) change how the photons travel, never what the figure claims; `breathe={false}` keeps the engine still.\",\n    \"Five to eight nodes: radial reads at a glance; on a phone the default `compactLayout` puts them in a row above the hub.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Tab\", action: \"Goes through the nodes, then the link of the detail line.\" },\n      { keys: \"Enter / Space\", action: \"Chooses the node: the detail line says its description and its link.\" },\n    ],\n    notes: [\n      \"The drawing (conduits, photons) is hidden from assistive technology; each node is a button named by its label, `aria-pressed` when chosen.\",\n      \"The detail line is a polite live region: pointing at or focusing a node announces its line.\",\n      \"Motion is CSS (motion.css): paused off screen (MotionObserver), held while the page settles, a still frame under reduced motion. No animation frame, no canvas.\",\n      \"The stage keeps its aspect ratio and the detail line its height: no layout shift.\",\n    ],\n  },\n  related: [\"card-grid\", \"glow-card\", \"iso\", \"number-ticker\"],\n  web: {\n    imports: [\"EngineFlow\"],\n    examples: [\n      { name: \"radial\", title: \"One engine, the products it powers\", description: \"Radial on a wide screen: both ways where results come back, planned products dim and still.\" },\n      { name: \"compact\", title: \"On a phone\", description: \"Top to bottom: the products in a row above, flowing down into the engine; the detail line names the chosen one.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
@@ -225,6 +261,13 @@
           "description": "The apps around it.",
           "required": true
         },
+        {
+          "name": "breathe",
+          "type": "boolean",
+          "default": "true",
+          "description": "The engine's mark swells slowly (a loop, still under reduced motion).",
+          "required": false
+        },
         {
           "name": "compactLayout",
           "type": "false | FlowLayout",
@@ -246,6 +289,20 @@
           "description": "The node shown in the detail line at first.",
           "required": false
         },
+        {
+          "name": "density",
+          "type": "FlowDensity",
+          "default": "normal",
+          "description": "How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.",
+          "required": false
+        },
+        {
+          "name": "easing",
+          "type": "FlowEasing",
+          "default": "linear",
+          "description": "The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any\nCSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).",
+          "required": false
+        },
         {
           "name": "hint",
           "type": "ReactNode",
@@ -273,6 +330,20 @@
           "default": "16",
           "description": "Photon speed, in units per second (the stage is 100 units wide).",
           "required": false
+        },
+        {
+          "name": "stagger",
+          "type": "number",
+          "default": "300",
+          "description": "Milliseconds between one conduit's photons and the next's: 0 sends them all together.",
+          "required": false
+        },
+        {
+          "name": "trigger",
+          "type": "FlowTrigger",
+          "default": "always",
+          "description": "When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the\nconduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they\nare always paused, and still under reduced motion.",
+          "required": false
         }
       ]
     }

package/registry/examples/app-shell/admin-console.js

@@ -38,7 +38,7 @@ function AppShellAdminConsole() {
       /* @__PURE__ */ jsx(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" })
     ] }),
     /* @__PURE__ */ jsxs(AppShell.Body, { children: [
-      /* @__PURE__ */ jsx(AppShell.Header, { title: "Verification", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", shape: "cut", children: "Export" }) }),
+      /* @__PURE__ */ jsx(AppShell.Header, { title: "Verification", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", children: "Export" }) }),
       /* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsxs(DashboardLayout, { headingAs: "h2", title: "Requests to review", description: "Oldest first. A decision is logged with your name.", children: [
         /* @__PURE__ */ jsx(Widget, { level: 3, title: "Pending", description: "identity and payout", children: /* @__PURE__ */ jsx("p", { className: "font-display text-3xl font-extrabold text-fg", children: "2" }) }),
         /* @__PURE__ */ jsx(Widget, { level: 3, title: "Oldest wait", children: /* @__PURE__ */ jsx("p", { className: "font-display text-3xl font-extrabold text-fg", children: "40 min" }) }),

package/registry/examples/app-shell/admin-console.tsx

@@ -44,7 +44,7 @@ export default function AppShellAdminConsole() {
         <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" />
       </AppShell.Sidebar>
       <AppShell.Body>
-        <AppShell.Header title="Verification" menuLabel="Open the menu" actions={<Button size="sm" variant="secondary" shape="cut">Export</Button>} />
+        <AppShell.Header title="Verification" menuLabel="Open the menu" actions={<Button size="sm" variant="secondary">Export</Button>} />
         <AppShell.Main>
           <DashboardLayout headingAs="h2" title="Requests to review" description="Oldest first. A decision is logged with your name.">
             <Widget level={3} title="Pending" description="identity and payout">

package/registry/examples/app-shell/basic.js

@@ -27,7 +27,7 @@ function AppShellBasic() {
       }
     ),
     /* @__PURE__ */ jsxs(AppShell.Body, { children: [
-      /* @__PURE__ */ jsx(AppShell.Header, { title: "Home", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Upload" }) }),
+      /* @__PURE__ */ jsx(AppShell.Header, { title: "Home", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "Upload" }) }),
       /* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-secondary", children: "The screen's content." }) })
     ] })
   ] });

package/registry/examples/app-shell/basic.tsx

@@ -21,7 +21,7 @@ export default function AppShellBasic() {
         <AppShell.Item href="#earnings" icon={dot} label="Earnings" />
       </AppShell.Sidebar>
       <AppShell.Body>
-        <AppShell.Header title="Home" menuLabel="Open the menu" actions={<Button size="sm" variant="primary" shape="cut">Upload</Button>} />
+        <AppShell.Header title="Home" menuLabel="Open the menu" actions={<Button size="sm" variant="primary">Upload</Button>} />
         <AppShell.Main>
           <p className="text-sm text-fg-secondary">The screen's content.</p>
         </AppShell.Main>

package/registry/examples/app-shell/desktop.js

@@ -22,7 +22,7 @@ function AppShellDesktop() {
       /* @__PURE__ */ jsx(AppShell.Item, { href: "#logs", icon: dot, label: "Logs" })
     ] }),
     /* @__PURE__ */ jsxs(AppShell.Body, { children: [
-      /* @__PURE__ */ jsx(AppShell.Header, { title: "Models", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Add a model" }) }),
+      /* @__PURE__ */ jsx(AppShell.Header, { title: "Models", menuLabel: "Open the menu", actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "Add a model" }) }),
       /* @__PURE__ */ jsxs(AppShell.Main, { className: "space-y-4", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-surface-1 p-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [

package/registry/examples/app-shell/desktop.tsx

@@ -20,7 +20,7 @@ export default function AppShellDesktop() {
         <AppShell.Item href="#logs" icon={dot} label="Logs" />
       </AppShell.Sidebar>
       <AppShell.Body>
-        <AppShell.Header title="Models" menuLabel="Open the menu" actions={<Button size="sm" variant="primary" shape="cut">Add a model</Button>} />
+        <AppShell.Header title="Models" menuLabel="Open the menu" actions={<Button size="sm" variant="primary">Add a model</Button>} />
         <AppShell.Main className="space-y-4">
           <div className="flex items-center justify-between gap-3 rounded-lg border border-border-subtle bg-surface-1 p-4">
             <div className="min-w-0 flex-1 space-y-2">

package/registry/examples/app-shell/orochia-studio.js

@@ -55,7 +55,7 @@ function AppShellOrochiaStudio() {
         {
           title: "Studio",
           menuLabel: "Open the menu",
-          actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", shape: "cut", children: "Upload a video" })
+          actions: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "primary", children: "Upload a video" })
         }
       ),
       /* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsxs(DashboardLayout, { headingAs: "h2", eyebrow: "This week", title: "Good morning, Elena", description: "Three sales since yesterday \u2014 your auction ends tonight.", children: [

package/registry/examples/app-shell/orochia-studio.tsx

@@ -59,7 +59,7 @@ export default function AppShellOrochiaStudio() {
           <AppShell.Header
             title="Studio"
             menuLabel="Open the menu"
-            actions={<Button size="sm" variant="primary" shape="cut">Upload a video</Button>}
+            actions={<Button size="sm" variant="primary">Upload a video</Button>}
           />
           <AppShell.Main>
             <DashboardLayout headingAs="h2" eyebrow="This week" title="Good morning, Elena" description="Three sales since yesterday — your auction ends tonight.">

package/registry/examples/argument-card/hover-quiet.js

@@ -10,7 +10,7 @@ var reasons = [
   { id: "telemetry", title: "Zero telemetry", hook: "Elsewhere, usage data is the price of the free tier." }
 ];
 function ArgumentCardHoverQuiet() {
-  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-5xl", min: 260, reveal: false, hover: "quiet", children: reasons.map((r) => /* @__PURE__ */ jsx(ArgumentCard, { id: `quiet-${r.id}`, title: r.title, hook: { label: "The trap elsewhere", text: r.hook }, more: { href: `#${r.id}`, label: "Details" } }, r.id)) });
+  return /* @__PURE__ */ jsx(CardGrid, { className: "w-full max-w-5xl", min: 260, reveal: false, children: reasons.map((r) => /* @__PURE__ */ jsx(ArgumentCard, { id: `quiet-${r.id}`, title: r.title, hook: { label: "The trap elsewhere", text: r.hook }, more: { href: `#${r.id}`, label: "Details" } }, r.id)) });
 }
 export {
   ArgumentCardHoverQuiet as default

package/registry/examples/argument-card/hover-quiet.tsx

@@ -10,7 +10,7 @@ const reasons = [
 // The quiet hover on the reasons: no glow, a lift, a ring on focus. The grid is quiet, so every card is.
 export default function ArgumentCardHoverQuiet() {
   return (
-    <CardGrid className="w-full max-w-5xl" min={260} reveal={false} hover="quiet">
+    <CardGrid className="w-full max-w-5xl" min={260} reveal={false}>
       {reasons.map((r) => (
         <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" }} />
       ))}

package/registry/examples/auth-layout/onboarding.js

@@ -43,8 +43,8 @@ function AuthLayoutOnboarding() {
             /* @__PURE__ */ jsx(Field.Hint, { id: "onboarding-iban-hint", children: "Checked before your first payout." })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", shape: "cut", className: "flex-1", children: "Back" }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", className: "flex-1", children: "Continue" })
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", className: "flex-1", children: "Back" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", className: "flex-1", children: "Continue" })
           ] })
         ] })
       ]

package/registry/examples/auth-layout/onboarding.tsx

@@ -37,8 +37,8 @@ export default function AuthLayoutOnboarding() {
             <Field.Hint id="onboarding-iban-hint">Checked before your first payout.</Field.Hint>
           </Field.Root>
           <div className="flex gap-2">
-            <Button type="button" variant="secondary" size="lg" shape="cut" className="flex-1">Back</Button>
-            <Button type="submit" variant="primary" size="lg" shape="cut" className="flex-1">Continue</Button>
+            <Button type="button" variant="secondary" size="lg" className="flex-1">Back</Button>
+            <Button type="submit" variant="primary" size="lg" className="flex-1">Continue</Button>
           </div>
         </form>
       </AuthLayout>

package/registry/examples/auth-layout/sign-in.js

@@ -44,8 +44,8 @@ function AuthLayoutSignIn() {
           /* @__PURE__ */ jsx(Input, { id: "sign-in-password", type: "password", autoComplete: "current-password" }),
           /* @__PURE__ */ jsx(Field.Hint, { children: /* @__PURE__ */ jsx("a", { className: "text-fg-accent", href: "#reset", children: "Forgot it?" }) })
         ] }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", shimmer: true, className: "w-full", children: "Sign in" }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", shape: "cut", className: "w-full", children: "Use a passkey" })
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", className: "w-full", children: "Sign in" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "lg", className: "w-full", children: "Use a passkey" })
       ] })
     }
   ) });

package/registry/examples/auth-layout/sign-in.tsx

@@ -34,10 +34,10 @@ export default function AuthLayoutSignIn() {
             <Input id="sign-in-password" type="password" autoComplete="current-password" />
             <Field.Hint><a className="text-fg-accent" href="#reset">Forgot it?</a></Field.Hint>
           </Field.Root>
-          <Button type="submit" variant="primary" size="lg" shape="cut" shimmer className="w-full">
+          <Button type="submit" variant="primary" size="lg" className="w-full">
             Sign in
           </Button>
-          <Button type="button" variant="secondary" size="lg" shape="cut" className="w-full">
+          <Button type="button" variant="secondary" size="lg" className="w-full">
             Use a passkey
           </Button>
         </form>

package/registry/examples/auth-layout/verify.js

@@ -15,7 +15,7 @@ function AuthLayoutVerify() {
       /* @__PURE__ */ jsx(Field.Label, { htmlFor: "verify-code", children: "Code" }),
       /* @__PURE__ */ jsx(Input, { id: "verify-code", inputMode: "numeric", autoComplete: "one-time-code", maxLength: 6 })
     ] }),
-    /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", shape: "cut", className: "w-full", children: "Verify" })
+    /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "lg", className: "w-full", children: "Verify" })
   ] }) });
 }
 export {

package/registry/examples/auth-layout/verify.tsx

@@ -12,7 +12,7 @@ export default function AuthLayoutVerify() {
           <Field.Label htmlFor="verify-code">Code</Field.Label>
           <Input id="verify-code" inputMode="numeric" autoComplete="one-time-code" maxLength={6} />
         </Field.Root>
-        <Button type="submit" variant="primary" size="lg" shape="cut" className="w-full">Verify</Button>
+        <Button type="submit" variant="primary" size="lg" className="w-full">Verify</Button>
       </form>
     </AuthLayout>
   );