@krizaka/ui 3.2.0 → 3.4.0

package/registry/activity-feed.json

@@ -0,0 +1,468 @@
+{
+  "name": "activity-feed",
+  "type": "primitive",
+  "title": "Activity feed",
+  "summary": "What happened, newest first: grouped by day, runs folded (“×3”), “2 min ago” kept fresh, new events announced — and `Timeline`, one thing's history on a rail.",
+  "description": "What happened, newest first: grouped by day, runs folded (“×3”), “2 min ago” kept fresh, new events announced — and `Timeline`, one thing's history on a rail.",
+  "status": "beta",
+  "category": "data-display",
+  "platforms": "both",
+  "whenToUse": [
+    "Orazaka's job activity, Orochia's notifications and tips.",
+    "The bids of a live auction (`live`).",
+    "A payout's or a job's history (`Timeline`)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "For the steps still to come of a process.",
+      "use": "stepper"
+    },
+    {
+      "when": "For records to browse or select.",
+      "use": "list"
+    }
+  ],
+  "bestPractices": [
+    "Write each event as a sentence (“Mina tipped your video $5”), passed translated.",
+    "Give `actor` and `kind` to fold repeated events.",
+    "Pass `now` from the server to render the same “… ago” on both sides."
+  ],
+  "accessibility": {
+    "keyboard": [],
+    "notes": [
+      "Days are headings; each time is a `time` with its full date.",
+      "`live` announces how many new events arrived, politely, never each one."
+    ]
+  },
+  "related": [
+    "list",
+    "stepper",
+    "toast"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/activity-feed",
+    "import": "import { ActivityFeed, Timeline } from \"@krizaka/ui/activity-feed\";",
+    "props": [
+      {
+        "component": "ActivityFeed",
+        "description": "What happened, newest first: grouped by day, runs folded (“Mina tipped ×3”), “2 min ago” kept fresh, new events\nannounced when `live`. Orazaka's job activity, Orochia's notifications, the console's audit log.",
+        "props": [
+          {
+            "name": "aria-label",
+            "type": "string",
+            "default": null,
+            "description": "The feed's accessible name (“Activity”).",
+            "required": true
+          },
+          {
+            "name": "events",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "The events, in any order.",
+            "required": true
+          },
+          {
+            "name": "action",
+            "type": "((event: T) => ReactNode)",
+            "default": null,
+            "description": "After an event's text: an action (Reply, View).",
+            "required": false
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the root.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown when there is no event (an `EmptyState`).",
+            "required": false
+          },
+          {
+            "name": "fold",
+            "type": "boolean",
+            "default": "true",
+            "description": "Fold the runs of the same actor and kind. Default true.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<ActivityFeedLabels>",
+            "default": null,
+            "description": "The words, passed translated; English by default.",
+            "required": false
+          },
+          {
+            "name": "leading",
+            "type": "((event: T) => ReactNode)",
+            "default": null,
+            "description": "Before an event's text: its actor's `Avatar`, an icon.",
+            "required": false
+          },
+          {
+            "name": "live",
+            "type": "boolean",
+            "default": null,
+            "description": "Announce new events politely (a stream).",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": "en-US",
+            "description": "The locale of the dates and the “… ago”. Default `en-US`.",
+            "required": false
+          },
+          {
+            "name": "now",
+            "type": "Date",
+            "default": null,
+            "description": "Now, for the “… ago” and the day headings (pass it from the server for the same text on both sides).",
+            "required": false
+          },
+          {
+            "name": "ticking",
+            "type": "boolean",
+            "default": "true",
+            "description": "Refresh the “… ago” every minute. Default true.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Timeline",
+        "description": "One thing's history on a rail, oldest first: each event a marker in its tone, its time and its words.",
+        "props": [
+          {
+            "name": "aria-label",
+            "type": "string",
+            "default": null,
+            "description": "The timeline's accessible name (“History of the payout”).",
+            "required": true
+          },
+          {
+            "name": "events",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "One thing's events, oldest first (a job's run, a payout's life).",
+            "required": true
+          },
+          {
+            "name": "className",
+            "type": "string",
+            "default": null,
+            "description": "Classes merged on the list.",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": "en-US",
+            "description": "The locale of the times. Default `en-US`.",
+            "required": false
+          },
+          {
+            "name": "timeStyle",
+            "type": "\"date\" | \"time\" | \"datetime\"",
+            "default": "time",
+            "description": "How a time is written: `time` (14:02, default), `datetime`, `date`.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "job-activity",
+        "title": "Activity",
+        "description": "By day, three tips folded into one, how long ago.",
+        "path": "examples/activity-feed/job-activity.tsx",
+        "module": "@krizaka/ui/registry/examples/activity-feed/job-activity",
+        "code": "import { ActivityFeed } from \"@krizaka/ui/activity-feed\";\n\nconst now = new Date(\"2026-10-11T15:00:00Z\");\nconst events = [\n  { id: \"e1\", at: \"2026-10-11T14:58:00Z\", title: \"Dubbing of “Sunset session” finished\", tone: \"success\" as const, kind: \"job.done\", actor: \"studio\" },\n  { id: \"e2\", at: \"2026-10-11T14:31:00Z\", title: \"Elena started a dubbing job\", description: \"English, Spanish · 120 credits\", tone: \"accent\" as const },\n  { id: \"e3\", at: \"2026-10-11T13:05:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e4\", at: \"2026-10-11T12:50:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e5\", at: \"2026-10-11T12:41:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e6\", at: \"2026-10-10T18:20:00Z\", title: \"Clip job failed: the source is too short\", tone: \"danger\" as const },\n  { id: \"e7\", at: \"2026-10-09T09:00:00Z\", title: \"Your payout of $120 was sent\", tone: \"info\" as const },\n];\n\n// Grouped by day, a run of tips folded into one (×3), how long ago — Orazaka's and Orochia's activity.\nexport default function ActivityFeedJobActivity() {\n  return <ActivityFeed aria-label=\"Activity\" events={events} now={now} ticking={false} className=\"max-w-md\" />;\n}\n"
+      },
+      {
+        "name": "live",
+        "title": "Live",
+        "description": "New bids announced, each led by its bidder's avatar.",
+        "path": "examples/activity-feed/live.tsx",
+        "module": "@krizaka/ui/registry/examples/activity-feed/live",
+        "code": "\"use client\";\n\nimport { ActivityFeed } from \"@krizaka/ui/activity-feed\";\nimport { Avatar } from \"@krizaka/ui/avatar\";\nimport { Button } from \"@krizaka/ui/button\";\nimport { useState } from \"react\";\n\nconst NAMES = [\"Mina\", \"Alex\", \"Elena\", \"Noah\"];\n\n// Live: new bids arrive, the feed announces them politely; each event led by its actor's avatar.\nexport default function ActivityFeedLive() {\n  const [events, setEvents] = useState([{ id: \"b0\", at: \"2026-10-11T18:02:00Z\", title: \"Alex bid $25\", actor: \"Alex\", kind: \"bid\" }]);\n  const bid = () =>\n    setEvents((all) => {\n      const who = NAMES[all.length % NAMES.length]!;\n      return [...all, { id: `b${all.length}`, at: new Date(Date.parse(\"2026-10-11T18:02:00Z\") + all.length * 60_000).toISOString(), title: `${who} bid $${25 + all.length * 5}`, actor: who, kind: \"bid\" }];\n    });\n  return (\n    <div className=\"flex max-w-md flex-col gap-3\">\n      <Button size=\"sm\" onClick={bid}>Simulate a bid</Button>\n      <ActivityFeed aria-label=\"Bids\" events={events} live fold={false} now={new Date(\"2026-10-11T18:30:00Z\")} ticking={false} leading={(e) => <Avatar alt={e.actor ?? \"\"} fallback={(e.actor ?? \"?\").charAt(0)} size=\"sm\" />} />\n    </div>\n  );\n}\n"
+      },
+      {
+        "name": "timeline",
+        "title": "Timeline",
+        "description": "A payout's history, oldest first.",
+        "path": "examples/activity-feed/timeline.tsx",
+        "module": "@krizaka/ui/registry/examples/activity-feed/timeline",
+        "code": "import { Timeline } from \"@krizaka/ui/activity-feed\";\n\n// One thing's history, oldest first: a payout from request to bank.\nexport default function ActivityFeedTimeline() {\n  return (\n    <Timeline\n      aria-label=\"History of the payout\"\n      locale=\"en-GB\"\n      timeStyle=\"datetime\"\n      className=\"max-w-md\"\n      events={[\n        { id: \"t1\", at: \"2026-10-09T09:00:00Z\", title: \"Payout requested\", description: \"$120.00 to the account ending 4821\" },\n        { id: \"t2\", at: \"2026-10-09T09:01:00Z\", title: \"Funds reserved\", tone: \"accent\" },\n        { id: \"t3\", at: \"2026-10-10T07:30:00Z\", title: \"Sent to Stripe\", tone: \"info\" },\n        { id: \"t4\", at: \"2026-10-11T10:12:00Z\", title: \"Arrived at the bank\", tone: \"success\" },\n      ]}\n    />\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { ActivityFeed } from \"@krizaka/ui/native\";",
+    "differences": [
+      "A SectionList with sticky day headings; `live` announces through the platform.",
+      "No `Timeline` yet: use `Stepper` for a history on a phone."
+    ],
+    "props": [
+      {
+        "component": "ActivityFeed",
+        "description": "What happened, newest first — the web `ActivityFeed`: by day under sticky headings, runs folded, “2 min ago”, new events announced.",
+        "props": [
+          {
+            "name": "events",
+            "type": "readonly T[]",
+            "default": null,
+            "description": "The events, in any order.",
+            "required": true
+          },
+          {
+            "name": "aria-label",
+            "type": "string",
+            "default": null,
+            "description": "The feed's accessible name.",
+            "required": false
+          },
+          {
+            "name": "empty",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown when there is no event (an `EmptyState`).",
+            "required": false
+          },
+          {
+            "name": "fold",
+            "type": "boolean",
+            "default": "true",
+            "description": "Fold the runs of the same actor and kind. Default true.",
+            "required": false
+          },
+          {
+            "name": "labels",
+            "type": "Partial<ActivityFeedLabels>",
+            "default": null,
+            "description": "The words, passed translated.",
+            "required": false
+          },
+          {
+            "name": "leading",
+            "type": "((event: T) => ReactNode)",
+            "default": null,
+            "description": "Before an event's text: its actor's `Avatar`.",
+            "required": false
+          },
+          {
+            "name": "live",
+            "type": "boolean",
+            "default": null,
+            "description": "Announce new events (a stream).",
+            "required": false
+          },
+          {
+            "name": "locale",
+            "type": "string",
+            "default": "en-US",
+            "description": "The locale of the dates and the “… ago”. Default `en-US`.",
+            "required": false
+          },
+          {
+            "name": "now",
+            "type": "Date",
+            "default": null,
+            "description": "Now, for the “… ago” and the headings. Default: now, refreshed every minute.",
+            "required": false
+          },
+          {
+            "name": "style",
+            "type": "StyleProp<ViewStyle>",
+            "default": null,
+            "description": "Styles of the list.",
+            "required": false
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "notifications",
+        "title": "Notifications",
+        "description": "The activity tab: by day, tips folded.",
+        "path": "examples/activity-feed/native/notifications.tsx",
+        "module": "@krizaka/ui/registry/examples/activity-feed/native/notifications",
+        "code": "import { ActivityFeed } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\n\nconst events = [\n  { id: \"e1\", at: \"2026-10-11T14:58:00Z\", title: \"Dubbing of “Sunset session” finished\", tone: \"success\" as const },\n  { id: \"e2\", at: \"2026-10-11T13:05:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e3\", at: \"2026-10-11T12:50:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e4\", at: \"2026-10-10T18:20:00Z\", title: \"Clip job failed\", description: \"The source is too short\", tone: \"danger\" as const },\n];\n\n// The activity tab: by day, the tips folded, how long ago.\nexport default function NativeActivityFeedNotifications() {\n  return (\n    <View style={{ width: 340, height: 300 }}>\n      <ActivityFeed aria-label=\"Activity\" events={events} now={new Date(\"2026-10-11T15:00:00Z\")} />\n    </View>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/activity-feed/native/notifications.dark.png",
+          "light": "examples/activity-feed/native/notifications.light.png"
+        }
+      }
+    ]
+  },
+  "files": [
+    {
+      "path": "activity-feed/activity-feed.tsx",
+      "content": "// Client (the clock of “… ago”, the announcement of new events). What happened, newest first: an activity feed\n// grouped by day with folded runs and relative times, announced politely when it is live; and a `Timeline` — one\n// thing's history on a rail, oldest first. Words are props.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { type ActivityEvent, type ActivityTone, groupActivity, timeAgo } from \"./group\";\n\nexport const activityFeed = tv({\n  slots: {\n    root: \"flex flex-col gap-5\",\n    group: \"flex flex-col gap-1\",\n    heading: \"sticky top-0 z-10 bg-surface-0/90 py-1 text-xs font-semibold uppercase tracking-wider text-fg-secondary backdrop-blur-sm\",\n    ol: \"m-0 flex list-none flex-col p-0\",\n    item: \"relative flex gap-3 py-2.5\",\n    marker: \"relative mt-1 flex h-2.5 w-2.5 shrink-0 rounded-full bg-[var(--kz-af-tone)] ring-4 ring-surface-0\",\n    rail: \"absolute left-[4.5px] top-5 -bottom-1 w-px bg-border-default\",\n    body: \"flex min-w-0 flex-1 flex-col\",\n    title: \"text-sm text-fg\",\n    count: \"ml-1.5 inline-flex rounded-full bg-surface-3 px-1.5 text-xs font-semibold tabular-nums text-fg-secondary\",\n    description: \"text-xs text-fg-secondary\",\n    time: \"shrink-0 pt-0.5 text-xs tabular-nums text-fg-secondary\",\n    leading: \"shrink-0\",\n  },\n});\n\nconst TONE: Record<ActivityTone, string> = {\n  neutral: \"var(--kz-border-strong)\",\n  accent: \"var(--kz-accent)\",\n  success: \"var(--kz-success)\",\n  warning: \"var(--kz-warning)\",\n  danger: \"var(--kz-danger)\",\n  info: \"var(--kz-info)\",\n};\n\nexport type ActivityFeedLabels = {\n  /** The heading of today's events. */\n  today: string;\n  /** The heading of yesterday's. */\n  yesterday: string;\n  /** A folded run: `(n) => \"×\" + n` (“3 times”). */\n  times: (count: number) => string;\n  /** Announced when new events arrive in a live feed: `(n) => n + \" new events\"`. */\n  newEvents: (count: number) => string;\n};\n\nexport const activityFeedLabels: ActivityFeedLabels = {\n  today: \"Today\",\n  yesterday: \"Yesterday\",\n  times: (count) => `×${count}`,\n  newEvents: (count) => (count === 1 ? \"1 new event\" : `${count} new events`),\n};\n\nexport type ActivityFeedProps<T extends ActivityEvent> = {\n  /** The events, in any order. */\n  events: readonly T[];\n  /** The feed's accessible name (“Activity”). */\n  \"aria-label\": string;\n  /** The locale of the dates and the “… ago”. Default `en-US`. */\n  locale?: string;\n  /** Now, for the “… ago” and the day headings (pass it from the server for the same text on both sides). */\n  now?: Date;\n  /** Refresh the “… ago” every minute. Default true. */\n  ticking?: boolean;\n  /** Fold the runs of the same actor and kind. Default true. */\n  fold?: boolean;\n  /** Announce new events politely (a stream). */\n  live?: boolean;\n  /** Before an event's text: its actor's `Avatar`, an icon. */\n  leading?: (event: T) => React.ReactNode;\n  /** After an event's text: an action (Reply, View). */\n  action?: (event: T) => React.ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ActivityFeedLabels>;\n  /** Shown when there is no event (an `EmptyState`). */\n  empty?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\nfunction useNow(initial: Date | undefined, ticking: boolean) {\n  const [now, setNow] = React.useState(() => initial ?? new Date());\n  React.useEffect(() => {\n    if (!ticking) return;\n    const timer = setInterval(() => setNow(new Date()), 60_000);\n    return () => clearInterval(timer);\n  }, [ticking]);\n  return now;\n}\n\n/**\n * What happened, newest first: grouped by day, runs folded (“Mina tipped ×3”), “2 min ago” kept fresh, new events\n * announced when `live`. Orazaka's job activity, Orochia's notifications, the console's audit log.\n */\nexport function ActivityFeed<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", now: given, ticking = true, fold = true, live, leading, action, labels: words, empty, className }: ActivityFeedProps<T>) {\n  const labels = { ...activityFeedLabels, ...words };\n  const s = activityFeed();\n  const now = useNow(given, ticking && !given);\n  const groups = groupActivity(events, { now, locale, today: labels.today, yesterday: labels.yesterday, fold });\n  const seen = React.useRef(events.length);\n  const [announcement, setAnnouncement] = React.useState(\"\");\n  React.useEffect(() => {\n    const added = events.length - seen.current;\n    seen.current = events.length;\n    if (!live || added <= 0) return;\n    const timer = setTimeout(() => setAnnouncement(labels.newEvents(added)), 0);\n    return () => clearTimeout(timer);\n  }, [events.length, live]); // eslint-disable-line react-hooks/exhaustive-deps -- announce on a new count only\n  return (\n    <section aria-label={label} className={s.root({ className })}>\n      {live ? (\n        <p className=\"sr-only\" aria-live=\"polite\">\n          {announcement}\n        </p>\n      ) : null}\n      {groups.length === 0 && empty ? empty : null}\n      {groups.map((group) => (\n        <div key={group.label} className={s.group()}>\n          <h3 className={s.heading()}>{group.label}</h3>\n          <ol className={s.ol()}>\n            {group.events.map(({ event, count }) => {\n              const date = new Date(event.at);\n              return (\n                <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n                  {leading ? <span className={s.leading()}>{leading(event)}</span> : <span aria-hidden className={s.marker()} />}\n                  <span className={s.body()}>\n                    <span className={s.title()}>\n                      {event.title}\n                      {count > 1 ? <span className={s.count()}>{labels.times(count)}</span> : null}\n                    </span>\n                    {event.description ? <span className={s.description()}>{event.description}</span> : null}\n                  </span>\n                  <time dateTime={date.toISOString()} title={date.toLocaleString(locale)} className={s.time()}>\n                    {timeAgo(date, { now, locale })}\n                  </time>\n                  {action ? <span className=\"shrink-0\">{action(event)}</span> : null}\n                </li>\n              );\n            })}\n          </ol>\n        </div>\n      ))}\n    </section>\n  );\n}\n\nexport type TimelineProps<T extends ActivityEvent> = {\n  /** One thing's events, oldest first (a job's run, a payout's life). */\n  events: readonly T[];\n  /** The timeline's accessible name (“History of the payout”). */\n  \"aria-label\": string;\n  /** The locale of the times. Default `en-US`. */\n  locale?: string;\n  /** How a time is written: `time` (14:02, default), `datetime`, `date`. */\n  timeStyle?: \"time\" | \"datetime\" | \"date\";\n  /** Classes merged on the list. */\n  className?: string;\n};\n\n/** One thing's history on a rail, oldest first: each event a marker in its tone, its time and its words. */\nexport function Timeline<T extends ActivityEvent>({ events, \"aria-label\": label, locale = \"en-US\", timeStyle = \"time\", className }: TimelineProps<T>) {\n  const s = activityFeed();\n  const options: Intl.DateTimeFormatOptions =\n    timeStyle === \"time\" ? { hour: \"2-digit\", minute: \"2-digit\" } : timeStyle === \"date\" ? { dateStyle: \"medium\" } : { dateStyle: \"medium\", timeStyle: \"short\" };\n  const write = new Intl.DateTimeFormat(locale, options);\n  return (\n    <ol aria-label={label} className={s.ol({ className })}>\n      {events.map((event, i) => {\n        const date = new Date(event.at);\n        return (\n          <li key={event.id} className={s.item()} style={{ [\"--kz-af-tone\" as string]: TONE[event.tone ?? \"neutral\"] }}>\n            <span aria-hidden className={s.marker()} />\n            {i < events.length - 1 ? <span aria-hidden className={s.rail()} /> : null}\n            <span className={s.body()}>\n              <span className={s.title()}>{event.title}</span>\n              {event.description ? <span className={s.description()}>{event.description}</span> : null}\n            </span>\n            <time dateTime={date.toISOString()} className={s.time()}>\n              {write.format(date)}\n            </time>\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"
+    },
+    {
+      "path": "activity-feed/group.ts",
+      "content": "// Shared by the web and React Native ActivityFeed: the events grouped by day (“Today”, “Yesterday”, a date), the same\n// events of one actor in a row folded into one (“Mina tipped 3 times”), and how long ago each happened — Intl only.\n\nexport type ActivityTone = \"neutral\" | \"accent\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\nexport type ActivityEvent = {\n  /** A stable id. */\n  id: string;\n  /** When it happened: an ISO date-time, an epoch in ms or a `Date`. */\n  at: string | number | Date;\n  /** What happened, in a sentence — passed translated (“Mina tipped your video $5”). */\n  title: string;\n  /** A detail under it. */\n  description?: string;\n  /** Who did it (folds a run of the same `kind` by the same actor). */\n  actor?: string;\n  /** The kind of event (`tip`, `bid`, `job.done`): with `actor`, what folds. */\n  kind?: string;\n  /** The tone of its marker: success for a payout, danger for a failure. */\n  tone?: ActivityTone;\n};\n\nexport type ActivityGroup<T extends ActivityEvent> = {\n  /** The day's heading (“Today”, “Yesterday”, “Monday, Oct 6”). */\n  label: string;\n  /** Its events, newest first; a folded run is its newest event with `count` > 1. */\n  events: { event: T; count: number }[];\n};\n\nconst dayKey = (date: Date) => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`;\n\n/** Groups events (any order) by day, newest first, folding runs of the same actor and kind when `fold` is set. */\nexport function groupActivity<T extends ActivityEvent>(\n  events: readonly T[],\n  { now = new Date(), locale = \"en-US\", today = \"Today\", yesterday = \"Yesterday\", fold = true }: { now?: Date; locale?: string; today?: string; yesterday?: string; fold?: boolean } = {},\n): ActivityGroup<T>[] {\n  const sorted = [...events].sort((a, b) => new Date(b.at).getTime() - new Date(a.at).getTime());\n  const day = new Intl.DateTimeFormat(locale, { weekday: \"long\", month: \"short\", day: \"numeric\" });\n  const todayKey = dayKey(now);\n  const yesterdayKey = dayKey(new Date(now.getTime() - 86_400_000));\n  const groups: ActivityGroup<T>[] = [];\n  let current: ActivityGroup<T> | null = null;\n  let currentKey = \"\";\n  for (const event of sorted) {\n    const date = new Date(event.at);\n    const key = dayKey(date);\n    if (!current || key !== currentKey) {\n      currentKey = key;\n      current = { label: key === todayKey ? today : key === yesterdayKey ? yesterday : day.format(date), events: [] };\n      groups.push(current);\n    }\n    const last = current.events[current.events.length - 1];\n    if (fold && last && event.actor && event.kind && last.event.actor === event.actor && last.event.kind === event.kind) last.count += 1;\n    else current.events.push({ event, count: 1 });\n  }\n  return groups;\n}\n\nconst UNITS: [Intl.RelativeTimeFormatUnit, number][] = [\n  [\"second\", 60],\n  [\"minute\", 60],\n  [\"hour\", 24],\n  [\"day\", 7],\n  [\"week\", 4.35],\n  [\"month\", 12],\n  [\"year\", Number.POSITIVE_INFINITY],\n];\n\n/** “2 minutes ago”, “yesterday”: how long ago, in the largest unit that reads well (`style` short: “2 min. ago”). */\nexport function timeAgo(at: string | number | Date, { now = new Date(), locale = \"en-US\", style = \"short\" }: { now?: Date; locale?: string; style?: \"long\" | \"short\" | \"narrow\" } = {}): string {\n  let value = (new Date(at).getTime() - now.getTime()) / 1000;\n  let unit: Intl.RelativeTimeFormatUnit = \"second\";\n  for (const [name, size] of UNITS) {\n    unit = name;\n    if (Math.abs(value) < size - 0.5) break;\n    value /= size;\n  }\n  return new Intl.RelativeTimeFormat(locale, { numeric: \"auto\", style }).format(Math.round(value) + 0, unit);\n}\n"
+    },
+    {
+      "path": "activity-feed/index.ts",
+      "content": "/** @krizaka/ui/activity-feed — `ActivityFeed` (by day, folded, “… ago”, live) and `Timeline` (one thing's history). */\nexport { ActivityFeed, activityFeed, type ActivityFeedLabels, activityFeedLabels, type ActivityFeedProps, Timeline, type TimelineProps } from \"./activity-feed\";\nexport { type ActivityEvent, type ActivityGroup, type ActivityTone, groupActivity, timeAgo } from \"./group\";\n"
+    },
+    {
+      "path": "activity-feed/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Activity feed\",\n  summary: \"What happened, newest first: grouped by day, runs folded (“×3”), “2 min ago” kept fresh, new events announced — and `Timeline`, one thing's history on a rail.\",\n  status: \"beta\",\n  category: \"data-display\",\n  platforms: \"both\",\n  whenToUse: [\"Orazaka's job activity, Orochia's notifications and tips.\", \"The bids of a live auction (`live`).\", \"A payout's or a job's history (`Timeline`).\"],\n  whenNotToUse: [\n    { when: \"For the steps still to come of a process.\", use: \"stepper\" },\n    { when: \"For records to browse or select.\", use: \"list\" },\n  ],\n  bestPractices: [\n    \"Write each event as a sentence (“Mina tipped your video $5”), passed translated.\",\n    \"Give `actor` and `kind` to fold repeated events.\",\n    \"Pass `now` from the server to render the same “… ago” on both sides.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\"Days are headings; each time is a `time` with its full date.\", \"`live` announces how many new events arrived, politely, never each one.\"],\n  },\n  related: [\"list\", \"stepper\", \"toast\"],\n  web: {\n    imports: [\"ActivityFeed\", \"Timeline\"],\n    examples: [\n      { name: \"job-activity\", title: \"Activity\", description: \"By day, three tips folded into one, how long ago.\" },\n      { name: \"live\", title: \"Live\", description: \"New bids announced, each led by its bidder's avatar.\" },\n      { name: \"timeline\", title: \"Timeline\", description: \"A payout's history, oldest first.\" },\n    ],\n  },\n  native: {\n    imports: [\"ActivityFeed\"],\n    differences: [\"A SectionList with sticky day headings; `live` announces through the platform.\", \"No `Timeline` yet: use `Stepper` for a history on a phone.\"],\n    examples: [{ name: \"notifications\", title: \"Notifications\", description: \"The activity tab: by day, tips folded.\" }],\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  | \"activity-feed\"\n  | \"action-sheet\"\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  | \"description-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  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\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  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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": [
+    "tailwind-variants@^3.3.1"
+  ],
+  "registryDependencies": [],
+  "demo": {
+    "path": "examples/activity-feed/job-activity.tsx",
+    "content": "import { ActivityFeed } from \"@krizaka/ui/activity-feed\";\n\nconst now = new Date(\"2026-10-11T15:00:00Z\");\nconst events = [\n  { id: \"e1\", at: \"2026-10-11T14:58:00Z\", title: \"Dubbing of “Sunset session” finished\", tone: \"success\" as const, kind: \"job.done\", actor: \"studio\" },\n  { id: \"e2\", at: \"2026-10-11T14:31:00Z\", title: \"Elena started a dubbing job\", description: \"English, Spanish · 120 credits\", tone: \"accent\" as const },\n  { id: \"e3\", at: \"2026-10-11T13:05:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e4\", at: \"2026-10-11T12:50:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e5\", at: \"2026-10-11T12:41:00Z\", title: \"Mina tipped your video $5\", kind: \"tip\", actor: \"mina\", tone: \"success\" as const },\n  { id: \"e6\", at: \"2026-10-10T18:20:00Z\", title: \"Clip job failed: the source is too short\", tone: \"danger\" as const },\n  { id: \"e7\", at: \"2026-10-09T09:00:00Z\", title: \"Your payout of $120 was sent\", tone: \"info\" as const },\n];\n\n// Grouped by day, a run of tips folded into one (×3), how long ago — Orazaka's and Orochia's activity.\nexport default function ActivityFeedJobActivity() {\n  return <ActivityFeed aria-label=\"Activity\" events={events} now={now} ticking={false} className=\"max-w-md\" />;\n}\n"
+  },
+  "props": [
+    {
+      "component": "ActivityFeed",
+      "description": "What happened, newest first: grouped by day, runs folded (“Mina tipped ×3”), “2 min ago” kept fresh, new events\nannounced when `live`. Orazaka's job activity, Orochia's notifications, the console's audit log.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": null,
+          "description": "The feed's accessible name (“Activity”).",
+          "required": true
+        },
+        {
+          "name": "events",
+          "type": "readonly T[]",
+          "default": null,
+          "description": "The events, in any order.",
+          "required": true
+        },
+        {
+          "name": "action",
+          "type": "((event: T) => ReactNode)",
+          "default": null,
+          "description": "After an event's text: an action (Reply, View).",
+          "required": false
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the root.",
+          "required": false
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "default": null,
+          "description": "Shown when there is no event (an `EmptyState`).",
+          "required": false
+        },
+        {
+          "name": "fold",
+          "type": "boolean",
+          "default": "true",
+          "description": "Fold the runs of the same actor and kind. Default true.",
+          "required": false
+        },
+        {
+          "name": "labels",
+          "type": "Partial<ActivityFeedLabels>",
+          "default": null,
+          "description": "The words, passed translated; English by default.",
+          "required": false
+        },
+        {
+          "name": "leading",
+          "type": "((event: T) => ReactNode)",
+          "default": null,
+          "description": "Before an event's text: its actor's `Avatar`, an icon.",
+          "required": false
+        },
+        {
+          "name": "live",
+          "type": "boolean",
+          "default": null,
+          "description": "Announce new events politely (a stream).",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": "en-US",
+          "description": "The locale of the dates and the “… ago”. Default `en-US`.",
+          "required": false
+        },
+        {
+          "name": "now",
+          "type": "Date",
+          "default": null,
+          "description": "Now, for the “… ago” and the day headings (pass it from the server for the same text on both sides).",
+          "required": false
+        },
+        {
+          "name": "ticking",
+          "type": "boolean",
+          "default": "true",
+          "description": "Refresh the “… ago” every minute. Default true.",
+          "required": false
+        }
+      ]
+    },
+    {
+      "component": "Timeline",
+      "description": "One thing's history on a rail, oldest first: each event a marker in its tone, its time and its words.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "default": null,
+          "description": "The timeline's accessible name (“History of the payout”).",
+          "required": true
+        },
+        {
+          "name": "events",
+          "type": "readonly T[]",
+          "default": null,
+          "description": "One thing's events, oldest first (a job's run, a payout's life).",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "default": null,
+          "description": "Classes merged on the list.",
+          "required": false
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": "en-US",
+          "description": "The locale of the times. Default `en-US`.",
+          "required": false
+        },
+        {
+          "name": "timeStyle",
+          "type": "\"date\" | \"time\" | \"datetime\"",
+          "default": "time",
+          "description": "How a time is written: `time` (14:02, default), `datetime`, `date`.",
+          "required": false
+        }
+      ]
+    }
+  ]
+}

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  | \"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  | \"form\"\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  | \"list\"\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  | \"virtual\";\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"
+      "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  | \"activity-feed\"\n  | \"action-sheet\"\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  | \"description-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  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\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  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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/app-shell.json

@@ -267,7 +267,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  | \"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  | \"form\"\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  | \"list\"\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  | \"virtual\";\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"
+      "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  | \"activity-feed\"\n  | \"action-sheet\"\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  | \"description-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  | \"fab\"\n  | \"field\"\n  | \"file-upload\"\n  | \"filter-bar\"\n  | \"form\"\n  | \"gallery-page\"\n  | \"glow-card\"\n  | \"goal-gauge\"\n  | \"header\"\n  | \"how-it-works-page\"\n  | \"image-cropper\"\n  | \"image-viewer\"\n  | \"iso\"\n  | \"kanban\"\n  | \"kbd\"\n  | \"landing-page\"\n  | \"landscape\"\n  | \"legal-page\"\n  | \"link-card\"\n  | \"list\"\n  | \"loader\"\n  | \"map\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"media-capture\"\n  | \"media-picker\"\n  | \"meter\"\n  | \"nav-bar\"\n  | \"number-ticker\"\n  | \"onboarding\"\n  | \"otp-input\"\n  | \"page\"\n  | \"page-header\"\n  | \"page-hero\"\n  | \"pagination\"\n  | \"permission-prompt\"\n  | \"pointer-light\"\n  | \"popover\"\n  | \"pricing-page\"\n  | \"product-page\"\n  | \"profile-card\"\n  | \"progress\"\n  | \"promise-card\"\n  | \"pull-to-refresh\"\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  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"video-player\"\n  | \"video-trimmer\"\n  | \"virtual\";\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": [