@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/dialog.json

@@ -1,7 +1,306 @@
 {
   "name": "dialog",
   "type": "primitive",
-  "description": "`Dialog.*`, `Sheet`, `AlertDialog`, `dialog` (the slots). Client (\"use client\").",
+  "title": "Dialog",
+  "summary": "A window over the page — centred, a bottom sheet or a side panel — and `AlertDialog` for a confirmation.",
+  "description": "A window over the page — centred, a bottom sheet or a side panel — and `AlertDialog` for a confirmation.",
+  "status": "stable",
+  "category": "overlays",
+  "platforms": "web",
+  "whenToUse": [
+    "For a short task that must be finished or cancelled before going back: invite someone, edit a title.",
+    "`AlertDialog` to confirm a destructive or irreversible action, with an async `onConfirm`.",
+    "`Sheet` (bottom) on phones, `placement=\"right\"` for a side panel of details.",
+    "A gate the user must answer (age, terms): `hideClose` and `dismissible={false}`."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For information next to an element, without blocking the page.",
+      "use": "popover"
+    },
+    {
+      "when": "For a message that needs no answer.",
+      "use": "toast"
+    },
+    {
+      "when": "For a long form or a flow of several steps: give it its own page."
+    },
+    {
+      "when": "To confirm the deletion of one item in place.",
+      "use": "confirm-button"
+    }
+  ],
+  "bestPractices": [
+    "Always a `Dialog.Title`; a `Dialog.Description` when the title is not enough.",
+    "Name the buttons by what they do (“Send the invitation”), the cancel one by what it keeps (“Keep it”).",
+    "Pass `closeLabel` translated: it names the close button."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Esc",
+        "action": "Closes the dialog (unless `dismissible={false}`)."
+      },
+      {
+        "keys": "Tab / Shift+Tab",
+        "action": "Move within the dialog: the focus is trapped while it is open."
+      }
+    ],
+    "notes": [
+      "Radix Dialog: `role=\"dialog\"` (or `alertdialog`), `aria-modal`, named by its title and described by its description.",
+      "The focus moves into the dialog when it opens and returns to the trigger when it closes; the page behind does not scroll.",
+      "`AlertDialog` keeps the focus on the cancel button first."
+    ]
+  },
+  "related": [
+    "popover",
+    "confirm-button",
+    "command",
+    "toast"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/dialog",
+    "import": "import { Dialog, Sheet, AlertDialog } from \"@krizaka/ui/dialog\";",
+    "props": [
+      {
+        "component": "AlertDialog",
+        "description": "",
+        "props": [
+          {
+            "name": "cancelLabel",
+            "type": "string",
+            "default": null,
+            "description": "The words of the cancel button (it takes the focus at open) — passed translated.",
+            "required": true
+          },
+          {
+            "name": "confirmLabel",
+            "type": "string",
+            "default": null,
+            "description": "The words of the confirm button — passed translated.",
+            "required": true
+          },
+          {
+            "name": "onConfirm",
+            "type": "() => void | Promise<unknown>",
+            "default": null,
+            "description": "Runs on confirm. A promise keeps the dialog open and the button loading until it settles.",
+            "required": true
+          },
+          {
+            "name": "title",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The question asked (\"Delete this video?\"): the dialog's accessible name.",
+            "required": true
+          },
+          {
+            "name": "children",
+            "type": "ReactNode",
+            "default": null,
+            "description": "More content between the description and the actions.",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes of the dialog's content, merged last.",
+            "required": false
+          },
+          {
+            "name": "container",
+            "type": "HTMLElement | null",
+            "default": null,
+            "description": "The element the portal renders into (default: document.body).",
+            "required": false
+          },
+          {
+            "name": "defaultOpen",
+            "type": "boolean",
+            "default": "false",
+            "description": "Open at first, uncontrolled.",
+            "required": false
+          },
+          {
+            "name": "description",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What the action does and what it costs: the dialog's description.",
+            "required": false
+          },
+          {
+            "name": "onOpenChange",
+            "type": "((open: boolean) => void)",
+            "default": null,
+            "description": "Called when it opens or closes (never while `onConfirm` is pending).",
+            "required": false
+          },
+          {
+            "name": "open",
+            "type": "boolean",
+            "default": null,
+            "description": "Open or closed (controlled), with `onOpenChange`.",
+            "required": false
+          },
+          {
+            "name": "tone",
+            "type": "\"danger\" | \"primary\"",
+            "default": "primary",
+            "description": "`danger` for a destructive action (delete, leave, cancel a payment).",
+            "required": false
+          },
+          {
+            "name": "trigger",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "DialogContent",
+        "description": "The dialog itself, portalled over a dimmed overlay, with a close button. Give it a `Dialog.Title`.",
+        "props": [
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the close button — passed translated.",
+            "required": false
+          },
+          {
+            "name": "container",
+            "type": "HTMLElement | null",
+            "default": null,
+            "description": "The element the portal renders into (default: document.body).",
+            "required": false
+          },
+          {
+            "name": "dismissible",
+            "type": "boolean",
+            "default": "true",
+            "description": "`false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\nthrough `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.",
+            "required": false
+          },
+          {
+            "name": "hideClose",
+            "type": "boolean",
+            "default": null,
+            "description": "Leaves the close button out (the content brings its own way out, or none: see `dismissible`).",
+            "required": false
+          },
+          {
+            "name": "placement",
+            "type": "\"center\" | \"bottom\" | \"right\"",
+            "default": "center",
+            "description": "center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height).",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "\"sm\" | \"md\" | \"lg\"",
+            "default": "md",
+            "description": "sm · md · lg: the width of the dialog.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Sheet",
+        "description": "A sheet is a dialog anchored at the bottom (centred from `sm` up): `Dialog.Content placement=\"bottom\"`.",
+        "props": [
+          {
+            "name": "closeLabel",
+            "type": "string",
+            "default": null,
+            "description": "The accessible name of the close button — passed translated.",
+            "required": false
+          },
+          {
+            "name": "container",
+            "type": "HTMLElement | null",
+            "default": null,
+            "description": "The element the portal renders into (default: document.body).",
+            "required": false
+          },
+          {
+            "name": "dismissible",
+            "type": "boolean",
+            "default": null,
+            "description": "`false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes\nthrough `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.",
+            "required": false
+          },
+          {
+            "name": "hideClose",
+            "type": "boolean",
+            "default": null,
+            "description": "Leaves the close button out (the content brings its own way out, or none: see `dismissible`).",
+            "required": false
+          },
+          {
+            "name": "size",
+            "type": "\"sm\" | \"md\" | \"lg\"",
+            "default": "md",
+            "description": "sm · md · lg: the width of the dialog.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "center",
+        "title": "Centred",
+        "description": "A short form, `size=\"md\"`.",
+        "path": "examples/dialog/center.tsx",
+        "module": "@krizaka/ui/registry/examples/dialog/center",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog } from \"@krizaka/ui/dialog\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\nexport default function DialogCenter({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Open</Button>\n      </Dialog.Trigger>\n      <Dialog.Content closeLabel=\"Close\">\n        <Dialog.Header>\n          <Dialog.Title>Invite a collaborator</Dialog.Title>\n          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <Field.Root>\n            <Field.Label htmlFor=\"invite-email\">Email</Field.Label>\n            <Input id=\"invite-email\" type=\"email\" placeholder=\"name@example.com\" />\n          </Field.Root>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Cancel</Button>\n          </Dialog.Close>\n          <Button variant=\"primary\">Send the invitation</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"
+      },
+      {
+        "name": "bottom",
+        "title": "Bottom sheet",
+        "description": "`placement=\"bottom\"`: a sheet on a phone, centred from `sm` up.",
+        "path": "examples/dialog/bottom.tsx",
+        "module": "@krizaka/ui/registry/examples/dialog/bottom",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog } from \"@krizaka/ui/dialog\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\n// `placement=\"bottom\"`: a sheet on a phone, centred from `sm` up.\nexport default function DialogBottom({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Open</Button>\n      </Dialog.Trigger>\n      <Dialog.Content closeLabel=\"Close\" placement=\"bottom\">\n        <Dialog.Header>\n          <Dialog.Title>Invite a collaborator</Dialog.Title>\n          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <Field.Root>\n            <Field.Label htmlFor=\"invite-email-bottom\">Email</Field.Label>\n            <Input id=\"invite-email-bottom\" type=\"email\" placeholder=\"name@example.com\" />\n          </Field.Root>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Cancel</Button>\n          </Dialog.Close>\n          <Button variant=\"primary\">Send the invitation</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"
+      },
+      {
+        "name": "right",
+        "title": "Side panel",
+        "description": "`placement=\"right\"`: full height, for details.",
+        "path": "examples/dialog/right.tsx",
+        "module": "@krizaka/ui/registry/examples/dialog/right",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog } from \"@krizaka/ui/dialog\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\n// `placement=\"right\"`: a side panel, full height.\nexport default function DialogRight({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Open</Button>\n      </Dialog.Trigger>\n      <Dialog.Content closeLabel=\"Close\" placement=\"right\">\n        <Dialog.Header>\n          <Dialog.Title>Invite a collaborator</Dialog.Title>\n          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <Field.Root>\n            <Field.Label htmlFor=\"invite-email-right\">Email</Field.Label>\n            <Input id=\"invite-email-right\" type=\"email\" placeholder=\"name@example.com\" />\n          </Field.Root>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Cancel</Button>\n          </Dialog.Close>\n          <Button variant=\"primary\">Send the invitation</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"
+      },
+      {
+        "name": "sheet-form",
+        "title": "Sheet with a form",
+        "description": "`Sheet`, `size=\"lg\"`.",
+        "path": "examples/dialog/sheet-form.tsx",
+        "module": "@krizaka/ui/registry/examples/dialog/sheet-form",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog, Sheet } from \"@krizaka/ui/dialog\";\nimport { Field, Input, Textarea } from \"@krizaka/ui/field\";\n\n// `Sheet` = `Dialog.Content placement=\"bottom\"`: a form, `size=\"lg\"`.\nexport default function DialogSheetForm({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Edit</Button>\n      </Dialog.Trigger>\n      <Sheet closeLabel=\"Close\" size=\"lg\">\n        <Dialog.Header>\n          <Dialog.Title>Edit the video</Dialog.Title>\n          <Dialog.Description>The title and the description are public.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body className=\"flex flex-col gap-4\">\n          <Field.Root>\n            <Field.Label htmlFor=\"video-title\">Title</Field.Label>\n            <Input id=\"video-title\" defaultValue=\"Night ride across the city\" />\n          </Field.Root>\n          <Field.Root>\n            <Field.Label htmlFor=\"video-description\">Description</Field.Label>\n            <Textarea id=\"video-description\" defaultValue=\"Ten minutes of neon, rain and empty avenues.\" />\n          </Field.Root>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Cancel</Button>\n          </Dialog.Close>\n          <Button variant=\"primary\">Save</Button>\n        </Dialog.Footer>\n      </Sheet>\n    </Dialog.Root>\n  );\n}\n"
+      },
+      {
+        "name": "alert-destructive",
+        "title": "Alert dialog",
+        "description": "`AlertDialog tone=\"danger\"` with an async `onConfirm`.",
+        "path": "examples/dialog/alert-destructive.tsx",
+        "module": "@krizaka/ui/registry/examples/dialog/alert-destructive",
+        "code": "\"use client\";\n\nimport { Button } from \"@krizaka/ui/button\";\nimport { AlertDialog } from \"@krizaka/ui/dialog\";\n\n// An async `onConfirm`: the button loads until it settles; the dialog closes when it resolves, stays open when it rejects.\nexport default function DialogAlertDestructive({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <AlertDialog\n      defaultOpen={defaultOpen}\n      trigger={<Button variant=\"danger\">Delete the video</Button>}\n      title=\"Delete this video?\"\n      description=\"Its views, comments and earnings history go with it. This cannot be undone.\"\n      confirmLabel=\"Delete\"\n      cancelLabel=\"Keep it\"\n      tone=\"danger\"\n      onConfirm={() => new Promise((resolve) => setTimeout(resolve, 1200))}\n    />\n  );\n}\n"
+      },
+      {
+        "name": "gate",
+        "title": "Gate",
+        "description": "No close button: it closes only through its actions.",
+        "path": "examples/dialog/gate.tsx",
+        "module": "@krizaka/ui/registry/examples/dialog/gate",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog } from \"@krizaka/ui/dialog\";\n\n// A question the user must answer: no close button, Escape and the overlay do nothing — it closes through its actions.\nexport default function DialogGate({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Enter the channel</Button>\n      </Dialog.Trigger>\n      <Dialog.Content hideClose dismissible={false} size=\"sm\">\n        <Dialog.Header className=\"pr-5\">\n          <Dialog.Title>Are you 18 or older?</Dialog.Title>\n          <Dialog.Description>This channel shows content for adults only.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Leave</Button>\n          </Dialog.Close>\n          <Dialog.Close asChild>\n            <Button variant=\"primary\">I am 18 or older</Button>\n          </Dialog.Close>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
   "files": [
     {
       "path": "dialog/alert-dialog.tsx",
@@ -14,6 +313,14 @@
     {
       "path": "dialog/index.ts",
       "content": "/** @krizaka/ui/dialog — `Dialog.*`, `Sheet`, `AlertDialog`, `dialog` (the slots). Client (\"use client\"). */\nexport { AlertDialog, type AlertDialogProps } from \"./alert-dialog\";\nexport {\n  Dialog,\n  dialog,\n  DialogBody,\n  DialogContent,\n  type DialogContentProps,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  type DialogVariants,\n  Sheet,\n  type SheetProps,\n} from \"./dialog\";\n"
+    },
+    {
+      "path": "dialog/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Dialog\",\n  summary: \"A window over the page — centred, a bottom sheet or a side panel — and `AlertDialog` for a confirmation.\",\n  status: \"stable\",\n  category: \"overlays\",\n  platforms: \"web\",\n  whenToUse: [\n    \"For a short task that must be finished or cancelled before going back: invite someone, edit a title.\",\n    \"`AlertDialog` to confirm a destructive or irreversible action, with an async `onConfirm`.\",\n    \"`Sheet` (bottom) on phones, `placement=\\\"right\\\"` for a side panel of details.\",\n    \"A gate the user must answer (age, terms): `hideClose` and `dismissible={false}`.\",\n  ],\n  whenNotToUse: [\n    { when: \"For information next to an element, without blocking the page.\", use: \"popover\" },\n    { when: \"For a message that needs no answer.\", use: \"toast\" },\n    { when: \"For a long form or a flow of several steps: give it its own page.\" },\n    { when: \"To confirm the deletion of one item in place.\", use: \"confirm-button\" },\n  ],\n  bestPractices: [\n    \"Always a `Dialog.Title`; a `Dialog.Description` when the title is not enough.\",\n    \"Name the buttons by what they do (“Send the invitation”), the cancel one by what it keeps (“Keep it”).\",\n    \"Pass `closeLabel` translated: it names the close button.\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Esc\", action: \"Closes the dialog (unless `dismissible={false}`).\" },\n      { keys: \"Tab / Shift+Tab\", action: \"Move within the dialog: the focus is trapped while it is open.\" },\n    ],\n    notes: [\n      \"Radix Dialog: `role=\\\"dialog\\\"` (or `alertdialog`), `aria-modal`, named by its title and described by its description.\",\n      \"The focus moves into the dialog when it opens and returns to the trigger when it closes; the page behind does not scroll.\",\n      \"`AlertDialog` keeps the focus on the cancel button first.\",\n    ],\n  },\n  related: [\"popover\", \"confirm-button\", \"command\", \"toast\"],\n  web: {\n    imports: [\"Dialog\", \"Sheet\", \"AlertDialog\"],\n    examples: [\n      { name: \"center\", title: \"Centred\", description: \"A short form, `size=\\\"md\\\"`.\" },\n      { name: \"bottom\", title: \"Bottom sheet\", description: \"`placement=\\\"bottom\\\"`: a sheet on a phone, centred from `sm` up.\" },\n      { name: \"right\", title: \"Side panel\", description: \"`placement=\\\"right\\\"`: full height, for details.\" },\n      { name: \"sheet-form\", title: \"Sheet with a form\", description: \"`Sheet`, `size=\\\"lg\\\"`.\" },\n      { name: \"alert-destructive\", title: \"Alert dialog\", description: \"`AlertDialog tone=\\\"danger\\\"` with an async `onConfirm`.\" },\n      { name: \"gate\", title: \"Gate\", description: \"No close button: it closes only through its actions.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"kbd\"\n  | \"page-header\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"switch\"\n  | \"tabs\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [
@@ -24,8 +331,8 @@
     "button"
   ],
   "demo": {
-    "path": "demos/dialog.tsx",
-    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog } from \"@krizaka/ui/dialog\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\nexport default function DialogDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Open</Button>\n      </Dialog.Trigger>\n      <Dialog.Content closeLabel=\"Close\">\n        <Dialog.Header>\n          <Dialog.Title>Invite a collaborator</Dialog.Title>\n          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <Field.Root>\n            <Field.Label htmlFor=\"invite-email\">Email</Field.Label>\n            <Input id=\"invite-email\" type=\"email\" placeholder=\"name@example.com\" />\n          </Field.Root>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Cancel</Button>\n          </Dialog.Close>\n          <Button variant=\"primary\">Send the invitation</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"
+    "path": "examples/dialog/center.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { Dialog } from \"@krizaka/ui/dialog\";\nimport { Field, Input } from \"@krizaka/ui/field\";\n\nexport default function DialogCenter({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <Dialog.Root defaultOpen={defaultOpen}>\n      <Dialog.Trigger asChild>\n        <Button>Open</Button>\n      </Dialog.Trigger>\n      <Dialog.Content closeLabel=\"Close\">\n        <Dialog.Header>\n          <Dialog.Title>Invite a collaborator</Dialog.Title>\n          <Dialog.Description>They get access to the drafts of this channel.</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <Field.Root>\n            <Field.Label htmlFor=\"invite-email\">Email</Field.Label>\n            <Input id=\"invite-email\" type=\"email\" placeholder=\"name@example.com\" />\n          </Field.Root>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Dialog.Close asChild>\n            <Button variant=\"ghost\">Cancel</Button>\n          </Dialog.Close>\n          <Button variant=\"primary\">Send the invitation</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog.Root>\n  );\n}\n"
   },
   "props": [
     {

package/registry/dropdown-menu.json

@@ -1,19 +1,132 @@
 {
   "name": "dropdown-menu",
   "type": "primitive",
-  "description": "`DropdownMenu.*`, `menu` (the slots). Client (\"use client\").",
+  "title": "Dropdown menu",
+  "summary": "A menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.",
+  "description": "A menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.",
+  "status": "stable",
+  "category": "overlays",
+  "platforms": "web",
+  "whenToUse": [
+    "For the secondary actions of an item or a page: edit, share, download, delete (a “more” button).",
+    "For a few options toggled from a toolbar (`CheckboxItem`)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For the main action of a view: show it as a button.",
+      "use": "button"
+    },
+    {
+      "when": "To search among many commands.",
+      "use": "command"
+    },
+    {
+      "when": "For content that is not a list of actions (a form, details).",
+      "use": "popover"
+    },
+    {
+      "when": "To pick a value in a form: use a select.",
+      "use": "field"
+    }
+  ],
+  "bestPractices": [
+    "Start each item with a verb; put the destructive one last, after a separator, with `tone=\"danger\"`.",
+    "Keep the menu short: more than about seven items is a page or a palette.",
+    "An `IconButton` trigger needs a `label` (“More actions”)."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Enter / Space / Arrow down",
+        "action": "Opens the menu from its trigger."
+      },
+      {
+        "keys": "Arrow keys / Home / End",
+        "action": "Move through the items; typing a letter jumps to an item."
+      },
+      {
+        "keys": "Esc",
+        "action": "Closes the menu and returns the focus to the trigger."
+      }
+    ],
+    "notes": [
+      "Radix DropdownMenu: `role=\"menu\"`, `menuitem`, `menuitemcheckbox`; disabled items are skipped.",
+      "Icons in items are decorative (`aria-hidden`)."
+    ]
+  },
+  "related": [
+    "popover",
+    "command",
+    "button"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/dropdown-menu",
+    "import": "import { DropdownMenu } from \"@krizaka/ui/dropdown-menu\";",
+    "props": [
+      {
+        "component": "DropdownMenuContent",
+        "description": "",
+        "props": [
+          {
+            "name": "container",
+            "type": "HTMLElement | null",
+            "default": null,
+            "description": "The element the portal renders into (default: document.body).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "DropdownMenuItem",
+        "description": "An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes).",
+        "props": [
+          {
+            "name": "tone",
+            "type": "\"danger\" | \"default\"",
+            "default": null,
+            "description": "`danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "DropdownMenuCheckboxItem",
+        "description": "A toggled option: `checked` + `onCheckedChange`.",
+        "props": []
+      }
+    ],
+    "examples": [
+      {
+        "name": "actions",
+        "title": "Actions",
+        "description": "A label, items with icons, a checkbox item, a separator and a destructive item.",
+        "path": "examples/dropdown-menu/actions.tsx",
+        "module": "@krizaka/ui/registry/examples/dropdown-menu/actions",
+        "code": "import { Button } from \"@krizaka/ui/button\";\nimport { DropdownMenu } from \"@krizaka/ui/dropdown-menu\";\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\nexport default function DropdownMenuActions({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger asChild>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"center\">\n        <DropdownMenu.Label>Video</DropdownMenu.Label>\n        <DropdownMenu.Item>{icon(\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\")}Edit</DropdownMenu.Item>\n        <DropdownMenu.Item>{icon(\"M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13\")}Share</DropdownMenu.Item>\n        <DropdownMenu.Item disabled>{icon(\"M12 3v12M7 10l5 5 5-5M5 21h14\")}Download</DropdownMenu.Item>\n        <DropdownMenu.CheckboxItem checked>Pinned to the profile</DropdownMenu.CheckboxItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item tone=\"danger\">{icon(\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\")}Delete</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
   "files": [
     {
       "path": "dropdown-menu/dropdown-menu.tsx",
-      "content": "// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The danger token is too light for small text on a light surface: the label stays a text role, the icon and the\n    // highlight carry the danger.\n    tone: { default: {}, danger: { item: \"data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"
+      "content": "// Client (a portal). Radix does the roving focus, the arrows, Home/End, typeahead, Escape and the focus return.\nimport { DropdownMenu as MenuPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\nimport { floating } from \"../floating\";\n\nexport const menu = tv({\n  slots: {\n    content: cn(floating, \"min-w-48 max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-1 origin-(--radix-dropdown-menu-content-transform-origin)\"),\n    item:\n      \"relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-2 text-sm text-fg outline-hidden transition-colors \" +\n      \"data-highlighted:bg-surface-3 data-disabled:pointer-events-none data-disabled:opacity-40 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0 \" +\n      \"[&>svg]:text-fg-secondary\",\n    indicator: \"ml-auto flex h-4 w-4 items-center justify-center text-fg-accent\",\n    label: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    separator: \"-mx-1 my-1 h-px bg-border-subtle\",\n  },\n  variants: {\n    // The label reads in the danger text role (≥ 4.5:1 on the menu surface, both themes); the icon and the highlight\n    // carry the danger fill.\n    tone: { default: {}, danger: { item: \"text-fg-danger data-highlighted:bg-danger/15 [&>svg]:text-danger\" } },\n  },\n  defaultVariants: { tone: \"default\" },\n});\nconst s = menu();\n\nexport type DropdownMenuContentProps = React.ComponentProps<typeof MenuPrimitive.Content> & {\n  /** The element the portal renders into (default: document.body). */\n  container?: HTMLElement | null;\n};\n\nexport function DropdownMenuContent({ sideOffset = 6, align = \"end\", collisionPadding = 8, container, className, ...props }: DropdownMenuContentProps) {\n  return (\n    <MenuPrimitive.Portal container={container}>\n      <MenuPrimitive.Content sideOffset={sideOffset} align={align} collisionPadding={collisionPadding} className={s.content({ className })} {...props} />\n    </MenuPrimitive.Portal>\n  );\n}\n\nexport type DropdownMenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  /** `danger` for a destructive action: the icon and the highlight carry the danger, the label stays legible. */\n  tone?: \"default\" | \"danger\";\n};\n\n/** An action. `tone=\"danger\"` for a destructive one; `onSelect` runs it (the menu closes). */\nexport function DropdownMenuItem({ tone, className, ...props }: DropdownMenuItemProps) {\n  return <MenuPrimitive.Item data-tone={tone ?? \"default\"} className={menu({ tone }).item({ className })} {...props} />;\n}\n\n/** A toggled option: `checked` + `onCheckedChange`. */\nexport function DropdownMenuCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenuPrimitive.CheckboxItem>) {\n  return (\n    <MenuPrimitive.CheckboxItem className={s.item({ className })} {...props}>\n      {children}\n      <MenuPrimitive.ItemIndicator className={s.indicator()}>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </MenuPrimitive.ItemIndicator>\n    </MenuPrimitive.CheckboxItem>\n  );\n}\n\nexport function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Label>) {\n  return <MenuPrimitive.Label className={s.label({ className })} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof MenuPrimitive.Separator>) {\n  return <MenuPrimitive.Separator className={s.separator({ className })} {...props} />;\n}\n\n/** `DropdownMenu.Root/Trigger/Content/Item/CheckboxItem/Label/Separator/Group`. `open`/`defaultOpen` + `onOpenChange`. */\nexport const DropdownMenu = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuPrimitive.Trigger,\n  Content: DropdownMenuContent,\n  Item: DropdownMenuItem,\n  CheckboxItem: DropdownMenuCheckboxItem,\n  Label: DropdownMenuLabel,\n  Separator: DropdownMenuSeparator,\n  Group: MenuPrimitive.Group,\n};\n"
     },
     {
       "path": "dropdown-menu/index.ts",
       "content": "/** @krizaka/ui/dropdown-menu — `DropdownMenu.*`, `menu` (the slots). Client (\"use client\"). */\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  type DropdownMenuContentProps,\n  DropdownMenuItem,\n  type DropdownMenuItemProps,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  menu,\n} from \"./dropdown-menu\";\n"
     },
+    {
+      "path": "dropdown-menu/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Dropdown menu\",\n  summary: \"A menu of actions opened from a trigger: items with icons, checkbox items, labels, separators, a destructive item.\",\n  status: \"stable\",\n  category: \"overlays\",\n  platforms: \"web\",\n  whenToUse: [\n    \"For the secondary actions of an item or a page: edit, share, download, delete (a “more” button).\",\n    \"For a few options toggled from a toolbar (`CheckboxItem`).\",\n  ],\n  whenNotToUse: [\n    { when: \"For the main action of a view: show it as a button.\", use: \"button\" },\n    { when: \"To search among many commands.\", use: \"command\" },\n    { when: \"For content that is not a list of actions (a form, details).\", use: \"popover\" },\n    { when: \"To pick a value in a form: use a select.\", use: \"field\" },\n  ],\n  bestPractices: [\n    \"Start each item with a verb; put the destructive one last, after a separator, with `tone=\\\"danger\\\"`.\",\n    \"Keep the menu short: more than about seven items is a page or a palette.\",\n    \"An `IconButton` trigger needs a `label` (“More actions”).\",\n  ],\n  accessibility: {\n    keyboard: [\n      { keys: \"Enter / Space / Arrow down\", action: \"Opens the menu from its trigger.\" },\n      { keys: \"Arrow keys / Home / End\", action: \"Move through the items; typing a letter jumps to an item.\" },\n      { keys: \"Esc\", action: \"Closes the menu and returns the focus to the trigger.\" },\n    ],\n    notes: [\n      \"Radix DropdownMenu: `role=\\\"menu\\\"`, `menuitem`, `menuitemcheckbox`; disabled items are skipped.\",\n      \"Icons in items are decorative (`aria-hidden`).\",\n    ],\n  },\n  related: [\"popover\", \"command\", \"button\"],\n  web: {\n    imports: [\"DropdownMenu\"],\n    examples: [\n      { name: \"actions\", title: \"Actions\", description: \"A label, items with icons, a checkbox item, a separator and a destructive item.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
     {
       "path": "floating.ts",
       "content": "// The one surface of everything that floats next to its trigger (popover, menu, tooltip): a raised surface, a border,\n// the large shadow and the `kz-pop` entrance from the side Radix measured (`--radix-*-transform-origin`).\nexport const floating =\n  \"kz-pop z-50 rounded-lg border border-border-default bg-surface-2 text-fg shadow-lg outline-hidden\";\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"kbd\"\n  | \"page-header\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"switch\"\n  | \"tabs\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [
@@ -24,8 +137,8 @@
     "cn"
   ],
   "demo": {
-    "path": "demos/dropdown-menu.tsx",
-    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { DropdownMenu } from \"@krizaka/ui/dropdown-menu\";\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\nexport default function DropdownMenuDemo({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger asChild>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"center\">\n        <DropdownMenu.Label>Video</DropdownMenu.Label>\n        <DropdownMenu.Item>{icon(\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\")}Edit</DropdownMenu.Item>\n        <DropdownMenu.Item>{icon(\"M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13\")}Share</DropdownMenu.Item>\n        <DropdownMenu.Item disabled>{icon(\"M12 3v12M7 10l5 5 5-5M5 21h14\")}Download</DropdownMenu.Item>\n        <DropdownMenu.CheckboxItem checked>Pinned to the profile</DropdownMenu.CheckboxItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item tone=\"danger\">{icon(\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\")}Delete</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n"
+    "path": "examples/dropdown-menu/actions.tsx",
+    "content": "import { Button } from \"@krizaka/ui/button\";\nimport { DropdownMenu } from \"@krizaka/ui/dropdown-menu\";\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\nexport default function DropdownMenuActions({ defaultOpen = false }: { defaultOpen?: boolean }) {\n  return (\n    <DropdownMenu.Root defaultOpen={defaultOpen} modal={false}>\n      <DropdownMenu.Trigger asChild>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"center\">\n        <DropdownMenu.Label>Video</DropdownMenu.Label>\n        <DropdownMenu.Item>{icon(\"M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\")}Edit</DropdownMenu.Item>\n        <DropdownMenu.Item>{icon(\"M4 12v8h16v-8M16 6l-4-4-4 4M12 2v13\")}Share</DropdownMenu.Item>\n        <DropdownMenu.Item disabled>{icon(\"M12 3v12M7 10l5 5 5-5M5 21h14\")}Download</DropdownMenu.Item>\n        <DropdownMenu.CheckboxItem checked>Pinned to the profile</DropdownMenu.CheckboxItem>\n        <DropdownMenu.Separator />\n        <DropdownMenu.Item tone=\"danger\">{icon(\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\")}Delete</DropdownMenu.Item>\n      </DropdownMenu.Content>\n    </DropdownMenu.Root>\n  );\n}\n"
   },
   "props": [
     {