@krizaka/ui 2.8.0 → 2.10.0

package/registry/achievement.json

@@ -0,0 +1,322 @@
+{
+  "name": "achievement",
+  "type": "primitive",
+  "title": "Achievement",
+  "summary": "Something done, and what it replaced: a milestone reached, a dare completed, a problem out of the way — on one grid of hairlines in a list, their badges arriving one by one; with three line emblems.",
+  "description": "Something done, and what it replaced: a milestone reached, a dare completed, a problem out of the way — on one grid of hairlines in a list, their badges arriving one by one; with three line emblems.",
+  "status": "beta",
+  "category": "data-display",
+  "platforms": "web",
+  "whenToUse": [
+    "Milestones of a creator or a member: what is done, what is next (`locked`).",
+    "What a product removed for its users (“Paying 30 % to a platform” → “90 % to you”).",
+    "Problems sealed one by one on a told page, in time with a `GoalGauge` (the arcade flavour)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "A notification that something just happened.",
+      "use": "toast"
+    },
+    {
+      "when": "A status of an object (published, pending).",
+      "use": "badge"
+    },
+    {
+      "when": "An argument with its reasons and a link.",
+      "use": "argument-card"
+    }
+  ],
+  "bestPractices": [
+    "The title is the outcome in a few words; `replaced` what it removed — struck through, so the change reads at a glance.",
+    "Say a locked step in its badge (“Locked”), not only by the muted colour.",
+    "Use `Emblem` (`sword`, `mirror`, `jewel`) as the glyphs of a set, or your own icons from @krizaka/icons."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "`AchievementList` is an ordered list; `replaced` is a `del` element, read as removed text.",
+      "Emblems and icons are decorative. The badges arrive once in a stage and never under `prefers-reduced-motion`."
+    ]
+  },
+  "related": [
+    "goal-gauge",
+    "badge",
+    "argument-card",
+    "scroll-stage"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/achievement",
+    "import": "import { Achievement, AchievementList, Emblem } from \"@krizaka/ui/achievement\";",
+    "props": [
+      {
+        "component": "Achievement",
+        "description": "Something done: an eyebrow, a badge, what it replaced (struck through) and the outcome.",
+        "props": [
+          {
+            "name": "title",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What was achieved: the outcome, in a few words.",
+            "required": true
+          },
+          {
+            "name": "badge",
+            "type": "ReactNode",
+            "default": null,
+            "description": "The badge in the corner (“Done”, “Unlocked”, arcade “Sealed”).",
+            "required": false
+          },
+          {
+            "name": "brand",
+            "type": "string",
+            "default": null,
+            "description": "A brand scope (`orochia` → `.brand-orochia`).",
+            "required": false
+          },
+          {
+            "name": "eyebrow",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A small line above: its number, its kind (“Milestone 03”).",
+            "required": false
+          },
+          {
+            "name": "icon",
+            "type": "ReactNode",
+            "default": null,
+            "description": "A glyph before the eyebrow (an `Emblem`, an icon). Decorative.",
+            "required": false
+          },
+          {
+            "name": "locked",
+            "type": "boolean",
+            "default": null,
+            "description": "Not reached yet: muted, its badge neutral. Say it in the badge too (“Locked”).",
+            "required": false
+          },
+          {
+            "name": "replaced",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What it replaced or overcame, struck through above the title (“Paying 30 % to a platform”).",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "StoryVariant",
+            "default": "default",
+            "description": "`default`: a calm badge. `arcade`: a mono stamp that slams onto the card.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "AchievementList",
+        "description": "An ordered list of `Achievement`s on one grid of hairlines.",
+        "props": [
+          {
+            "name": "brand",
+            "type": "string",
+            "default": null,
+            "description": "A brand scope (`orochia` → `.brand-orochia`).",
+            "required": false
+          },
+          {
+            "name": "minWidth",
+            "type": "string",
+            "default": "220px",
+            "description": "The narrowest a card gets before the grid drops a column.",
+            "required": false
+          },
+          {
+            "name": "variant",
+            "type": "StoryVariant",
+            "default": null,
+            "description": "The look of every card: `default` or `arcade`.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Emblem",
+        "description": "Three line emblems for achievements and choices (`currentColor`, decorative).",
+        "props": [
+          {
+            "name": "kind",
+            "type": "\"sword\" | \"mirror\" | \"jewel\"",
+            "default": null,
+            "description": "The emblem: `sword` (courage, the first step), `mirror` (clarity, honesty), `jewel` (care, what is kept).",
+            "required": true
+          },
+          {
+            "name": "size",
+            "type": "number",
+            "default": "20",
+            "description": "Width and height in pixels.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "milestones",
+        "title": "Milestones",
+        "description": "Two milestones done, with what they replaced; the next one locked.",
+        "path": "examples/achievement/milestones.tsx",
+        "module": "@krizaka/ui/registry/examples/achievement/milestones",
+        "code": "import { Achievement, AchievementList } from \"@krizaka/ui/achievement\";\n\n// Milestones: what each one replaced, struck through; the next one locked — said in its badge too.\nexport default function AchievementMilestones() {\n  return (\n    <AchievementList className=\"w-full max-w-2xl\">\n      <Achievement eyebrow=\"Milestone 01\" badge=\"Done\" replaced=\"Paying 30 % to a platform\" title=\"90 % of every tip to you\" />\n      <Achievement eyebrow=\"Milestone 02\" badge=\"Done\" replaced=\"Fans who vanish after a like\" title=\"Challenges they back with credits\" />\n      <Achievement eyebrow=\"Milestone 03\" badge=\"Locked\" locked title=\"Your first auction\" />\n    </AchievementList>\n  );\n}\n"
+      },
+      {
+        "name": "arcade",
+        "title": "Arcade flavour",
+        "description": "Heads sealed one by one, each stamp slamming in, with the three emblems.",
+        "path": "examples/achievement/arcade.tsx",
+        "module": "@krizaka/ui/registry/examples/achievement/arcade",
+        "code": "import { Achievement, AchievementList, Emblem } from \"@krizaka/ui/achievement\";\n\n// The arcade flavour: each card's stamp slams in, one after the other, in time with a GoalGauge in the same scene.\nexport default function AchievementArcade() {\n  return (\n    <AchievementList variant=\"arcade\" brand=\"orochia\" className=\"w-full max-w-2xl\">\n      <Achievement icon={<Emblem kind=\"sword\" size={14} />} eyebrow=\"Head 01\" badge=\"Sealed\" replaced=\"Data sent abroad\" title=\"Everything runs on your machine\" />\n      <Achievement icon={<Emblem kind=\"mirror\" size={14} />} eyebrow=\"Head 02\" badge=\"Sealed\" replaced=\"A bill per token\" title=\"One price, no meter\" />\n      <Achievement icon={<Emblem kind=\"jewel\" size={14} />} eyebrow=\"Head 03\" badge=\"Sealed\" replaced=\"A closed box\" title=\"Open source, end to end\" />\n    </AchievementList>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": null,
+  "files": [
+    {
+      "path": "achievement/achievement.tsx",
+      "content": "// Server-safe. Something done, and what it replaced (story.css): a milestone reached, a dare completed, a problem out of\n// the way. A list of them shares one grid of hairlines; in a `Scene` of a `ScrollStage` their badges arrive one by one.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { brandClass, type StoryVariant, storyVariantClass } from \"../story-variant\";\n\nexport type AchievementProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> & {\n  /** What was achieved: the outcome, in a few words. */\n  title: React.ReactNode;\n  /** A small line above: its number, its kind (“Milestone 03”). */\n  eyebrow?: React.ReactNode;\n  /** A glyph before the eyebrow (an `Emblem`, an icon). Decorative. */\n  icon?: React.ReactNode;\n  /** The badge in the corner (“Done”, “Unlocked”, arcade “Sealed”). */\n  badge?: React.ReactNode;\n  /** What it replaced or overcame, struck through above the title (“Paying 30 % to a platform”). */\n  replaced?: React.ReactNode;\n  /** Not reached yet: muted, its badge neutral. Say it in the badge too (“Locked”). */\n  locked?: boolean;\n  /**\n   * `default`: a calm badge. `arcade`: a mono stamp that slams onto the card.\n   * @default \"default\"\n   */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`). */\n  brand?: string;\n};\n\n/** Something done: an eyebrow, a badge, what it replaced (struck through) and the outcome. */\nexport function Achievement({ title, eyebrow, icon, badge, replaced, locked, variant, brand, className, ...props }: AchievementProps) {\n  return (\n    <div data-locked={locked ? \"\" : undefined} className={cn(\"kzs-achievement\", storyVariantClass(variant), brandClass(brand), className)} {...props}>\n      {(eyebrow || badge || icon) && (\n        <div className=\"kzs-achievement-head\">\n          <span className=\"kzs-achievement-eyebrow\">\n            {icon && <span aria-hidden>{icon}</span>}\n            {eyebrow}\n          </span>\n          {badge && <span className=\"kzs-achievement-badge\">{badge}</span>}\n        </div>\n      )}\n      {replaced && (\n        <del className=\"kzs-achievement-replaced\" style={{ textDecorationLine: \"line-through\" }}>\n          {replaced}\n        </del>\n      )}\n      <p className=\"kzs-achievement-title\">{title}</p>\n    </div>\n  );\n}\n\nexport type AchievementListProps = React.OlHTMLAttributes<HTMLOListElement> & {\n  /** The `Achievement`s, in order: each one becomes an item of the list (its badge arrives after the previous one's). */\n  children: React.ReactNode;\n  /**\n   * The narrowest a card gets before the grid drops a column.\n   * @default \"220px\"\n   */\n  minWidth?: string;\n  /** The look of every card: `default` or `arcade`. */\n  variant?: StoryVariant;\n  /** A brand scope (`orochia` → `.brand-orochia`). */\n  brand?: string;\n};\n\n/** An ordered list of `Achievement`s on one grid of hairlines. */\nexport function AchievementList({ children, minWidth, variant, brand, className, style, ...props }: AchievementListProps) {\n  const items = React.Children.toArray(children);\n  return (\n    <ol\n      className={cn(\"kzs-achievements\", storyVariantClass(variant), brandClass(brand), className)}\n      style={minWidth ? ({ \"--kzs-min\": minWidth, ...style } as React.CSSProperties) : style}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={React.isValidElement(child) && child.key != null ? child.key : i} style={{ \"--i\": i } as React.CSSProperties}>\n          {child}\n        </li>\n      ))}\n    </ol>\n  );\n}\n\nexport type EmblemProps = Omit<React.SVGProps<SVGSVGElement>, \"children\"> & {\n  /** The emblem: `sword` (courage, the first step), `mirror` (clarity, honesty), `jewel` (care, what is kept). */\n  kind: \"sword\" | \"mirror\" | \"jewel\";\n  /**\n   * Width and height in pixels.\n   * @default 20\n   */\n  size?: number;\n};\n\n/** Three line emblems for achievements and choices (`currentColor`, decorative). */\nexport function Emblem({ kind, size = 20, ...props }: EmblemProps) {\n  return (\n    <svg\n      viewBox=\"0 0 48 48\"\n      width={size}\n      height={size}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.4}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n      {...props}\n    >\n      {kind === \"sword\" && (\n        <>\n          <path d=\"M24 3 L27 28 L24 36 L21 28 Z\" />\n          <path d=\"M15 30 H33 M24 36 V45\" />\n        </>\n      )}\n      {kind === \"mirror\" && (\n        <>\n          <circle cx=\"24\" cy=\"24\" r=\"17\" />\n          <circle cx=\"24\" cy=\"24\" r=\"9\" />\n          <path d=\"M24 2 V6 M24 42 V46 M2 24 H6 M42 24 H46\" />\n        </>\n      )}\n      {kind === \"jewel\" && (\n        <>\n          <path d=\"M31 10 a13 13 0 1 1 -15 19 a8 8 0 0 0 8 -9 a8 8 0 0 1 7 -10 Z\" />\n          <circle cx=\"29\" cy=\"17\" r=\"2.6\" fill=\"currentColor\" stroke=\"none\" />\n        </>\n      )}\n    </svg>\n  );\n}\n"
+    },
+    {
+      "path": "achievement/index.ts",
+      "content": "/** @krizaka/ui/achievement — `Achievement`, `AchievementList` and the line `Emblem`s. Server-safe. Styles: story.css. */\nexport { Achievement, AchievementList, type AchievementListProps, type AchievementProps, Emblem, type EmblemProps } from \"./achievement\";\n"
+    },
+    {
+      "path": "achievement/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Achievement\",\n  summary:\n    \"Something done, and what it replaced: a milestone reached, a dare completed, a problem out of the way — on one grid of hairlines in a list, their badges arriving one by one; with three line emblems.\",\n  status: \"beta\",\n  category: \"data-display\",\n  platforms: \"web\",\n  whenToUse: [\n    \"Milestones of a creator or a member: what is done, what is next (`locked`).\",\n    \"What a product removed for its users (“Paying 30 % to a platform” → “90 % to you”).\",\n    \"Problems sealed one by one on a told page, in time with a `GoalGauge` (the arcade flavour).\",\n  ],\n  whenNotToUse: [\n    { when: \"A notification that something just happened.\", use: \"toast\" },\n    { when: \"A status of an object (published, pending).\", use: \"badge\" },\n    { when: \"An argument with its reasons and a link.\", use: \"argument-card\" },\n  ],\n  bestPractices: [\n    \"The title is the outcome in a few words; `replaced` what it removed — struck through, so the change reads at a glance.\",\n    \"Say a locked step in its badge (“Locked”), not only by the muted colour.\",\n    \"Use `Emblem` (`sword`, `mirror`, `jewel`) as the glyphs of a set, or your own icons from @krizaka/icons.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"`AchievementList` is an ordered list; `replaced` is a `del` element, read as removed text.\",\n      \"Emblems and icons are decorative. The badges arrive once in a stage and never under `prefers-reduced-motion`.\",\n    ],\n  },\n  related: [\"goal-gauge\", \"badge\", \"argument-card\", \"scroll-stage\"],\n  web: {\n    imports: [\"Achievement\", \"AchievementList\", \"Emblem\"],\n    examples: [\n      { name: \"milestones\", title: \"Milestones\", description: \"Two milestones done, with what they replaced; the next one locked.\" },\n      { name: \"arcade\", title: \"Arcade flavour\", description: \"Heads sealed one by one, each stamp slamming in, with the three emblems.\" },\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  | \"achievement\"\n  | \"action-bar\"\n  | \"alert\"\n  | \"app-shell\"\n  | \"argument-card\"\n  | \"audio-player\"\n  | \"auth-layout\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"card-grid\"\n  | \"catalogue-page\"\n  | \"changelog-page\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"chip-link\"\n  | \"choice-grid\"\n  | \"cn\"\n  | \"code-block\"\n  | \"combobox\"\n  | \"command\"\n  | \"component-page\"\n  | \"confirm-button\"\n  | \"contact-page\"\n  | \"continue-prompt\"\n  | \"countdown\"\n  | \"cta-panel\"\n  | \"dashboard-layout\"\n  | \"data-table\"\n  | \"date-picker\"\n  | \"decision-list\"\n  | \"detail-layout\"\n  | \"dialog\"\n  | \"docs-article-page\"\n  | \"docs-hub-page\"\n  | \"docs-layout\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"error-page\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"iso\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"loader\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"radio-group\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"stepper\"\n  | \"switch\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/**\n * The group of the catalogue. `media`: video, sound, camera, files, cropping. `blocks`: the page blocks — the frame,\n * the hero, sections, cards that lead or argue, decisions, code, calls to act — that every page of a site is made of.\n * `layouts`: the shells of whole screens — an application, a dashboard, settings, sign-in, an object, a list and its\n * item, a site's page, a documentation page — each with its screens. `templates`: the page templates — whole pages of a\n * site (a landing, a product, a docs hub, a long read, a changelog, pricing, status, an error…), each a distinct\n * composition of the blocks, words and content as props.\n */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"media\" | \"blocks\" | \"layouts\" | \"templates\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n  /**\n   * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its phone\n   * version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n   */\n  readonly template?: boolean;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /**\n   * The entry to import from when it is not `@krizaka/ui/native`: a component that needs an Expo module (an optional\n   * peer) has its own, `@krizaka/ui/native/<name>`, so an app that does not use it never installs the module.\n   */\n  readonly entry?: string;\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
+    },
+    {
+      "path": "story-variant.ts",
+      "content": "// The two looks of the storytelling kit (story.css), shared by its entries. Server-safe.\n\n/** The look of the storytelling kit: `default` (sober, for any app) or `arcade` (the opt-in cabinet flavour). */\nexport type StoryVariant = \"default\" | \"arcade\";\n\n/** The class a storytelling component adds for its look (`kzs-arcade` for the arcade flavour). */\nexport const storyVariantClass = (variant: StoryVariant | undefined) => (variant === \"arcade\" ? \"kzs-arcade\" : undefined);\n\n/** The class of a brand scope (`brand-orochia`): the accent and the gradient become that brand's. */\nexport const brandClass = (brand: string | undefined) => (brand ? `brand-${brand}` : undefined);\n"
+    }
+  ],
+  "dependencies": [],
+  "registryDependencies": [
+    "cn"
+  ],
+  "demo": {
+    "path": "examples/achievement/milestones.tsx",
+    "content": "import { Achievement, AchievementList } from \"@krizaka/ui/achievement\";\n\n// Milestones: what each one replaced, struck through; the next one locked — said in its badge too.\nexport default function AchievementMilestones() {\n  return (\n    <AchievementList className=\"w-full max-w-2xl\">\n      <Achievement eyebrow=\"Milestone 01\" badge=\"Done\" replaced=\"Paying 30 % to a platform\" title=\"90 % of every tip to you\" />\n      <Achievement eyebrow=\"Milestone 02\" badge=\"Done\" replaced=\"Fans who vanish after a like\" title=\"Challenges they back with credits\" />\n      <Achievement eyebrow=\"Milestone 03\" badge=\"Locked\" locked title=\"Your first auction\" />\n    </AchievementList>\n  );\n}\n"
+  },
+  "props": [
+    {
+      "component": "Achievement",
+      "description": "Something done: an eyebrow, a badge, what it replaced (struck through) and the outcome.",
+      "props": [
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What was achieved: the outcome, in a few words.",
+          "required": true
+        },
+        {
+          "name": "badge",
+          "type": "ReactNode",
+          "default": null,
+          "description": "The badge in the corner (“Done”, “Unlocked”, arcade “Sealed”).",
+          "required": false
+        },
+        {
+          "name": "brand",
+          "type": "string",
+          "default": null,
+          "description": "A brand scope (`orochia` → `.brand-orochia`).",
+          "required": false
+        },
+        {
+          "name": "eyebrow",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A small line above: its number, its kind (“Milestone 03”).",
+          "required": false
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "default": null,
+          "description": "A glyph before the eyebrow (an `Emblem`, an icon). Decorative.",
+          "required": false
+        },
+        {
+          "name": "locked",
+          "type": "boolean",
+          "default": null,
+          "description": "Not reached yet: muted, its badge neutral. Say it in the badge too (“Locked”).",
+          "required": false
+        },
+        {
+          "name": "replaced",
+          "type": "ReactNode",
+          "default": null,
+          "description": "What it replaced or overcame, struck through above the title (“Paying 30 % to a platform”).",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "StoryVariant",
+          "default": "default",
+          "description": "`default`: a calm badge. `arcade`: a mono stamp that slams onto the card.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "AchievementList",
+      "description": "An ordered list of `Achievement`s on one grid of hairlines.",
+      "props": [
+        {
+          "name": "brand",
+          "type": "string",
+          "default": null,
+          "description": "A brand scope (`orochia` → `.brand-orochia`).",
+          "required": false
+        },
+        {
+          "name": "minWidth",
+          "type": "string",
+          "default": "220px",
+          "description": "The narrowest a card gets before the grid drops a column.",
+          "required": false
+        },
+        {
+          "name": "variant",
+          "type": "StoryVariant",
+          "default": null,
+          "description": "The look of every card: `default` or `arcade`.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Emblem",
+      "description": "Three line emblems for achievements and choices (`currentColor`, decorative).",
+      "props": [
+        {
+          "name": "kind",
+          "type": "\"sword\" | \"mirror\" | \"jewel\"",
+          "default": null,
+          "description": "The emblem: `sword` (courage, the first step), `mirror` (clarity, honesty), `jewel` (care, what is kept).",
+          "required": true
+        },
+        {
+          "name": "size",
+          "type": "number",
+          "default": "20",
+          "description": "Width and height in pixels.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

package/registry/action-bar.json

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

package/registry/alert.json

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