@krizaka/ui 3.8.0 → 3.9.0

package/registry/error-page.json

@@ -122,7 +122,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  | \"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  | \"chat\"\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  | \"match-dialog\"\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  | \"photo-grid\"\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  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"splash-handoff\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\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/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\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/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\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 */\ninterface ExampleBase {\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/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on krizaka.com/docs/ui/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: 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  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\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 ui.krizaka.com (apps/site) renders as\n// ui.krizaka.com/components/<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  | \"chat\"\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  | \"markdown\"\n  | \"longform-page\"\n  | \"marketing-layout\"\n  | \"marquee\"\n  | \"mascot-quote\"\n  | \"mascot-state\"\n  | \"mascots\"\n  | \"match-dialog\"\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  | \"photo-grid\"\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  | \"recipes\"\n  | \"screen\"\n  | \"scroll-stage\"\n  | \"search-field\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"settings-layout\"\n  | \"skeleton\"\n  | \"skip-link\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"split-view\"\n  | \"splash-handoff\"\n  | \"stage-banner\"\n  | \"stat\"\n  | \"status-page\"\n  | \"step-progress\"\n  | \"stepper\"\n  | \"swipe-deck\"\n  | \"swipeable-row\"\n  | \"switch\"\n  | \"tab-bar\"\n  | \"tabs\"\n  | \"tag-input\"\n  | \"tag-selector\"\n  | \"terminal-replay\"\n  | \"theme\"\n  | \"toast\"\n  | \"toc\"\n  | \"tooltip\"\n  | \"tree-view\"\n  | \"txt\"\n  | \"verified-badge\"\n  | \"vertical-video\"\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/**\n * `stable`: its API only changes in a major. `beta`: it may still change in a minor. `deprecated`: no product uses it and\n * no work plans to — it still works, says what replaces it, and goes in the major named by `deprecated.removedIn`.\n */\nexport type Status = \"stable\" | \"beta\" | \"deprecated\";\n\n/** What a deprecated component says (required when `status` is `deprecated`, absent otherwise). */\nexport interface Deprecation {\n  /** The version that deprecated it (`3.6.0`). */\n  readonly since: string;\n  /** The major that removes it (`4.0.0`). */\n  readonly removedIn: string;\n  /** What replaces it, when a component does. */\n  readonly use?: ComponentName;\n  /** Why it goes: no product uses it, no planned work needs it. */\n  readonly reason: string;\n}\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/** Why a reader needs a template: the seven intents the templates are grouped by (sidebar sub-headings, catalogue filter). */\nexport type TemplatePurpose = \"convince\" | \"explain\" | \"show\" | \"act\" | \"operate\" | \"converse\" | \"recover\";\n\n/** The groups of templates, in reading order: the title, and the one line that says when to come to that group. */\nexport const templatePurposes = {\n  convince: { title: \"Convince\", useWhen: \"You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof.\" },\n  explain: { title: \"Explain\", useWhen: \"You come here when a reader must understand: how it works, a documentation hub or article, a changelog, a FAQ, a policy.\" },\n  show: { title: \"Show\", useWhen: \"You come here when the work itself is the argument: a gallery, a story, a case study, an object and its details.\" },\n  act: { title: \"Act\", useWhen: \"You come here when a person must do something once: reach the team, sign in or up, set up, pay.\" },\n  operate: { title: \"Operate\", useWhen: \"You come here when a person works every day: a dashboard, a console with a table, settings, an app shell.\" },\n  converse: { title: \"Converse\", useWhen: \"You come here when people talk: an inbox, a chat, comments, a notifications centre.\" },\n  recover: { title: \"Recover\", useWhen: \"You come here when the way is blocked: an empty list, an error, a missing page, maintenance, a product still being built.\" },\n} as const satisfies Record<TemplatePurpose, { readonly title: string; readonly useWhen: string }>;\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 */\ninterface ExampleBase {\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/** A plain example, or a template: a whole screen with its intent (`purpose`) and the user goal its layout serves (`why`). */\nexport type Example =\n  | (ExampleBase & { readonly template?: false; readonly purpose?: undefined; readonly why?: undefined })\n  | (ExampleBase & {\n      /**\n       * A template: a whole screen of a product composed from the platform (a layout and its blocks, real words, its\n       * phone version thought out), copied as a starting point — at most 160 lines, listed on ui.krizaka.com/templates.\n       */\n      readonly template: true;\n      /** The intent that groups it: why you need this block. */\n      readonly purpose: TemplatePurpose;\n      /** Why this layout: the user goal it serves, in one sentence. */\n      readonly why: 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  /** Required for, and only for, a `deprecated` component. */\n  readonly deprecated?: Deprecation;\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/examples/app-shell/console.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

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

@@ -0,0 +1,93 @@
+"use client";
+
+// registry/examples/app-shell/console.tsx
+import { configureKrizakaFetch, defineKeys, keepPreviousData, krizakaFetch, KrizakaQueryProvider, useMutation, useQuery, useQueryClient } from "@krizaka/query";
+import { ProductLogo } from "@krizaka/ui";
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Card } from "@krizaka/ui/card";
+import { Command, CommandDialog } from "@krizaka/ui/command";
+import { DataTable, DataTableFilters } from "@krizaka/ui/data-table";
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { PageHeader } from "@krizaka/ui/page-header";
+import { useState } from "react";
+import { z } from "zod";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var rows = Array.from({ length: 60 }, (_, i) => ({ id: `po-${1060 - i}`, creator: ["Elena Varga", "Noah Petit", "Maya Chen"][i % 3], status: ["paid", "pending", "failed"][i % 4 % 3], amount: i * 7919 % 9e4 / 100 }));
+async function fakeApi(input, init) {
+  if (init?.method === "POST") return Response.json(rows.unshift({ id: `po-${1061 + rows.length}`, ...JSON.parse(String(init.body)), status: "pending" }));
+  const q = new URL(String(input), "https://api.example").searchParams;
+  const [by, dir] = (q.get("sort") ?? "id:descending").split(":");
+  const found = rows.filter((p) => !q.get("status") || q.get("status").split(",").includes(p.status)).sort((a, b) => (a[by] > b[by] ? 1 : -1) * (dir === "descending" ? -1 : 1));
+  const [page, size] = [Number(q.get("page")), Number(q.get("size"))];
+  return Response.json({ rows: found.slice((page - 1) * size, page * size), total: found.length });
+}
+var keys = defineKeys("payouts", { list: (query) => [query] });
+var columns = [
+  { id: "id", header: "Payout", sortable: true, card: "title" },
+  { id: "creator", header: "Creator", sortable: true },
+  { id: "status", header: "Status", filter: "facet", options: [{ value: "paid", label: "Paid" }, { value: "pending", label: "Pending" }, { value: "failed", label: "Failed" }] },
+  { id: "amount", header: "Amount", sortable: true, align: "end", cell: (p) => `$${p.amount.toFixed(2)}` }
+];
+var newPayout = createKrizakaForm({ schema: z.object({ creator: z.string().min(2), amount: z.number().int().min(100) }), defaultValues: { creator: "", amount: 2500 }, i18n: { t: () => void 0 } });
+var icon = (d) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d }) });
+var NONE = [];
+function Payouts() {
+  const client = useQueryClient();
+  const [query, setQuery] = useState({ sort: null, filters: {}, page: 1, pageSize: 6 });
+  const list = useQuery({
+    queryKey: keys.list(query),
+    queryFn: ({ signal }) => krizakaFetch("/api/payouts", { signal, query: { sort: query.sort && `${query.sort.column}:${query.sort.direction}`, status: query.filters.status, page: query.page, size: query.pageSize } }),
+    placeholderData: keepPreviousData,
+    meta: { list: true }
+  });
+  const create = useMutation({ mutationFn: (body) => krizakaFetch("/api/payouts", { method: "POST", json: { ...body, amount: body.amount / 100 } }), onSuccess: () => client.invalidateQueries({ queryKey: ["payouts"] }) });
+  const form = newPayout.useForm({ onSubmit: (values) => create.mutateAsync(values) });
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-6 xl:grid-cols-[1fr_20rem]", children: [
+    /* @__PURE__ */ jsx(DataTable, { caption: "Payouts", rows: list.data?.rows ?? NONE, columns, getRowId: (p) => p.id, manual: { sorting: true, filtering: true, pagination: true }, rowCount: list.data?.total, defaultPageSize: 6, onStateChange: setQuery, loading: list.isPending, error: list.error?.message, toolbar: /* @__PURE__ */ jsx(DataTableFilters, {}) }),
+    /* @__PURE__ */ jsx(Card.Root, { className: "h-fit", children: /* @__PURE__ */ jsxs(Card.Body, { children: [
+      /* @__PURE__ */ jsx(Card.Title, { children: "New payout" }),
+      /* @__PURE__ */ jsxs(form.Form, { "aria-label": "New payout", className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(form.TextField, { name: "creator", label: "Creator" }),
+        /* @__PURE__ */ jsx(form.Money, { name: "amount", label: "Amount", currency: "USD" }),
+        /* @__PURE__ */ jsx(form.Submit, { children: "Create the payout" })
+      ] })
+    ] }) })
+  ] });
+}
+function AppShellConsole() {
+  useState(() => configureKrizakaFetch({ fetch: fakeApi }));
+  const [palette, setPalette] = useState(false);
+  return /* @__PURE__ */ jsxs(KrizakaQueryProvider, { children: [
+    /* @__PURE__ */ jsxs(AppShell.Root, { children: [
+      /* @__PURE__ */ jsxs(AppShell.Sidebar, { label: "Console", brand: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ProductLogo, { id: "krizaka", size: 24, animated: false }),
+        " Console"
+      ] }), closeLabel: "Close the menu", collapseLabels: ["Collapse", "Expand"], children: [
+        /* @__PURE__ */ jsx(AppShell.Group, { children: "Money" }),
+        /* @__PURE__ */ jsx(AppShell.Item, { href: "#payouts", icon: icon("M3 7h18v10H3zM12 12h.01"), label: "Payouts", shortcut: "g p", current: true }),
+        /* @__PURE__ */ jsx(AppShell.Item, { href: "#ledger", icon: icon("M5 4h14v16H5zM8 8h8M8 12h8M8 16h5"), label: "Ledger", shortcut: "g l" }),
+        /* @__PURE__ */ jsx(AppShell.Group, { children: "System" }),
+        /* @__PURE__ */ jsx(AppShell.Item, { href: "#backups", icon: icon("M4 7c0-2 16-2 16 0v10c0 2-16 2-16 0zM4 12c0 2 16 2 16 0"), label: "Backups", shortcut: "g b" })
+      ] }),
+      /* @__PURE__ */ jsxs(AppShell.Body, { children: [
+        /* @__PURE__ */ jsx(AppShell.Header, { title: "Finance", menuLabel: "Open the menu", children: /* @__PURE__ */ jsx(AppShell.Search, { label: "Search", onOpen: () => setPalette(true) }) }),
+        /* @__PURE__ */ jsxs(AppShell.Main, { children: [
+          /* @__PURE__ */ jsx(PageHeader, { as: "h2", title: "Payouts", description: "Every payout, newest first. Sorting, filters and pages are answered by the API.", className: "mb-6", actions: /* @__PURE__ */ jsx(ActionBar, { size: "sm", label: "Help", actions: [{ href: "#docs", label: "Docs" }, { href: "#report", label: "Report a problem" }] }) }),
+          /* @__PURE__ */ jsx(Payouts, {})
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(CommandDialog, { open: palette, onOpenChange: setPalette, label: "Search the console", children: [
+      /* @__PURE__ */ jsx(Command.Input, { placeholder: "Go to a section or find a payout" }),
+      /* @__PURE__ */ jsx(Command.List, { label: "Results", emptyLabel: "Nothing matches.", children: /* @__PURE__ */ jsxs(Command.Group, { heading: "Go to", children: [
+        /* @__PURE__ */ jsx(Command.Item, { onSelect: () => setPalette(false), children: "Payouts" }),
+        /* @__PURE__ */ jsx(Command.Item, { onSelect: () => setPalette(false), children: "Ledger" }),
+        /* @__PURE__ */ jsx(Command.Item, { onSelect: () => setPalette(false), children: "Backups" })
+      ] }) })
+    ] })
+  ] });
+}
+export {
+  AppShellConsole as default
+};

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

@@ -0,0 +1,103 @@
+"use client";
+
+import { configureKrizakaFetch, defineKeys, keepPreviousData, krizakaFetch, KrizakaQueryProvider, useMutation, useQuery, useQueryClient } from "@krizaka/query";
+import { ProductLogo } from "@krizaka/ui";
+import { ActionBar } from "@krizaka/ui/action-bar";
+import { AppShell } from "@krizaka/ui/app-shell";
+import { Card } from "@krizaka/ui/card";
+import { Command, CommandDialog } from "@krizaka/ui/command";
+import { DataTable, type DataTableColumn, DataTableFilters, type DataTableQuery } from "@krizaka/ui/data-table";
+import { createKrizakaForm } from "@krizaka/ui/form";
+import { PageHeader } from "@krizaka/ui/page-header";
+import { useState } from "react";
+import { z } from "zod";
+
+type Payout = { id: string; creator: string; status: string; amount: number };
+const rows: Payout[] = Array.from({ length: 60 }, (_, i) => ({ id: `po-${1060 - i}`, creator: ["Elena Varga", "Noah Petit", "Maya Chen"][i % 3]!, status: ["paid", "pending", "failed"][i % 4 % 3]!, amount: ((i * 7919) % 90_000) / 100 }));
+// The API, faked in the page: it lists (sorted, filtered, paged) and creates.
+async function fakeApi(input: RequestInfo | URL, init?: RequestInit) {
+  if (init?.method === "POST") return Response.json(rows.unshift({ id: `po-${1061 + rows.length}`, ...JSON.parse(String(init.body)), status: "pending" }));
+  const q = new URL(String(input), "https://api.example").searchParams;
+  const [by, dir] = (q.get("sort") ?? "id:descending").split(":") as [keyof Payout, string];
+  const found = rows.filter((p) => !q.get("status") || q.get("status")!.split(",").includes(p.status)).sort((a, b) => (a[by] > b[by] ? 1 : -1) * (dir === "descending" ? -1 : 1));
+  const [page, size] = [Number(q.get("page")), Number(q.get("size"))];
+  return Response.json({ rows: found.slice((page - 1) * size, page * size), total: found.length });
+}
+const keys = defineKeys("payouts", { list: (query: DataTableQuery) => [query] });
+const columns: DataTableColumn<Payout>[] = [
+  { id: "id", header: "Payout", sortable: true, card: "title" },
+  { id: "creator", header: "Creator", sortable: true },
+  { id: "status", header: "Status", filter: "facet", options: [{ value: "paid", label: "Paid" }, { value: "pending", label: "Pending" }, { value: "failed", label: "Failed" }] },
+  { id: "amount", header: "Amount", sortable: true, align: "end", cell: (p) => `$${p.amount.toFixed(2)}` },
+];
+const newPayout = createKrizakaForm({ schema: z.object({ creator: z.string().min(2), amount: z.number().int().min(100) }), defaultValues: { creator: "", amount: 2500 }, i18n: { t: () => undefined } });
+const icon = (d: string) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden><path d={d} /></svg>;
+const NONE: Payout[] = [];
+
+function Payouts() {
+  const client = useQueryClient();
+  const [query, setQuery] = useState<DataTableQuery>({ sort: null, filters: {}, page: 1, pageSize: 6 });
+  const list = useQuery({
+    queryKey: keys.list(query),
+    queryFn: ({ signal }) => krizakaFetch("/api/payouts", { signal, query: { sort: query.sort && `${query.sort.column}:${query.sort.direction}`, status: query.filters.status as string[] | undefined, page: query.page, size: query.pageSize } }) as Promise<{ rows: Payout[]; total: number }>,
+    placeholderData: keepPreviousData,
+    meta: { list: true },
+  });
+  const create = useMutation({ mutationFn: (body: { creator: string; amount: number }) => krizakaFetch("/api/payouts", { method: "POST", json: { ...body, amount: body.amount / 100 } }), onSuccess: () => client.invalidateQueries({ queryKey: ["payouts"] }) });
+  const form = newPayout.useForm({ onSubmit: (values) => create.mutateAsync(values) });
+  return (
+    <div className="grid gap-6 xl:grid-cols-[1fr_20rem]">
+      <DataTable caption="Payouts" rows={list.data?.rows ?? NONE} columns={columns} getRowId={(p) => p.id} manual={{ sorting: true, filtering: true, pagination: true }} rowCount={list.data?.total} defaultPageSize={6} onStateChange={setQuery} loading={list.isPending} error={list.error?.message} toolbar={<DataTableFilters />} />
+      <Card.Root className="h-fit">
+        <Card.Body>
+          <Card.Title>New payout</Card.Title>
+          <form.Form aria-label="New payout" className="flex flex-col gap-4">
+            <form.TextField name="creator" label="Creator" />
+            <form.Money name="amount" label="Amount" currency="USD" />
+            <form.Submit>Create the payout</form.Submit>
+          </form.Form>
+        </Card.Body>
+      </Card.Root>
+    </div>
+  );
+}
+
+// TEMPLATE — a console: the shell with its sections (each with a `g` shortcut), a search that opens the palette (⌘K), a page
+// header with its links, a server-side table (TanStack Table behind DataTable, filters and pages sent to the API through
+// @krizaka/query) and a form that creates a row and refreshes the table. On a phone the sidebar is a drawer, the table cards.
+export default function AppShellConsole() {
+  useState(() => configureKrizakaFetch({ fetch: fakeApi as typeof fetch }));
+  const [palette, setPalette] = useState(false);
+  return (
+    <KrizakaQueryProvider>
+      <AppShell.Root>
+        <AppShell.Sidebar label="Console" brand={<><ProductLogo id="krizaka" size={24} animated={false} /> Console</>} closeLabel="Close the menu" collapseLabels={["Collapse", "Expand"]}>
+          <AppShell.Group>Money</AppShell.Group>
+          <AppShell.Item href="#payouts" icon={icon("M3 7h18v10H3zM12 12h.01")} label="Payouts" shortcut="g p" current />
+          <AppShell.Item href="#ledger" icon={icon("M5 4h14v16H5zM8 8h8M8 12h8M8 16h5")} label="Ledger" shortcut="g l" />
+          <AppShell.Group>System</AppShell.Group>
+          <AppShell.Item href="#backups" icon={icon("M4 7c0-2 16-2 16 0v10c0 2-16 2-16 0zM4 12c0 2 16 2 16 0")} label="Backups" shortcut="g b" />
+        </AppShell.Sidebar>
+        <AppShell.Body>
+          <AppShell.Header title="Finance" menuLabel="Open the menu">
+            <AppShell.Search label="Search" onOpen={() => setPalette(true)} />
+          </AppShell.Header>
+          <AppShell.Main>
+            <PageHeader as="h2" title="Payouts" description="Every payout, newest first. Sorting, filters and pages are answered by the API." className="mb-6" actions={<ActionBar size="sm" label="Help" actions={[{ href: "#docs", label: "Docs" }, { href: "#report", label: "Report a problem" }]} />} />
+            <Payouts />
+          </AppShell.Main>
+        </AppShell.Body>
+      </AppShell.Root>
+      <CommandDialog open={palette} onOpenChange={setPalette} label="Search the console">
+        <Command.Input placeholder="Go to a section or find a payout" />
+        <Command.List label="Results" emptyLabel="Nothing matches.">
+          <Command.Group heading="Go to">
+            <Command.Item onSelect={() => setPalette(false)}>Payouts</Command.Item>
+            <Command.Item onSelect={() => setPalette(false)}>Ledger</Command.Item>
+            <Command.Item onSelect={() => setPalette(false)}>Backups</Command.Item>
+          </Command.Group>
+        </Command.List>
+      </CommandDialog>
+    </KrizakaQueryProvider>
+  );
+}

package/registry/examples/code-block/annotated.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/code-block/annotated.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/code-block/annotated.tsx
+import { CodeBlock } from "@krizaka/ui/code-block";
+import { jsx } from "react/jsx-runtime";
+var code = `export async function loadVideos(signal: AbortSignal) {
+  const response = await fetch("/api/videos", { signal });
+  if (!response.ok) throw new Error("Could not load the videos");
+  return response.json();
+}`;
+function CodeBlockAnnotated() {
+  return /* @__PURE__ */ jsx(
+    CodeBlock,
+    {
+      className: "w-full max-w-xl",
+      code,
+      language: "ts",
+      file: "videos.ts",
+      copyLabel: "Copy",
+      copiedLabel: "Copied",
+      lineNumbers: true,
+      annotations: [
+        { lines: 2, kind: "focus" },
+        { lines: 3, kind: "added" }
+      ]
+    }
+  );
+}
+export {
+  CodeBlockAnnotated as default
+};

package/registry/examples/code-block/annotated.tsx

@@ -0,0 +1,26 @@
+import { CodeBlock } from "@krizaka/ui/code-block";
+
+const code = `export async function loadVideos(signal: AbortSignal) {
+  const response = await fetch("/api/videos", { signal });
+  if (!response.ok) throw new Error("Could not load the videos");
+  return response.json();
+}`;
+
+// Lines numbered and set apart: line 2 is where to look (everything else is dimmed), line 3 is the line to add.
+export default function CodeBlockAnnotated() {
+  return (
+    <CodeBlock
+      className="w-full max-w-xl"
+      code={code}
+      language="ts"
+      file="videos.ts"
+      copyLabel="Copy"
+      copiedLabel="Copied"
+      lineNumbers
+      annotations={[
+        { lines: 2, kind: "focus" },
+        { lines: 3, kind: "added" },
+      ]}
+    />
+  );
+}

package/registry/examples/component-page/button.tsx

@@ -2,7 +2,7 @@ import { Button } from "@krizaka/ui/button";
 import { ComponentPage } from "@krizaka/ui/component-page";
 import { LinkCard } from "@krizaka/ui/link-card";
 
-// TEMPLATE — a component's page (what krizaka.com/docs/ui generates from the registry): name, summary, status and
+// TEMPLATE — a component's page (what ui.krizaka.com generates from the registry): name, summary, status and
 // platforms, the live preview, the import line, its sections; related components aside (under it on a phone).
 export default function ComponentPageButton() {
   return (

package/registry/examples/markdown/ai-stream.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/markdown/ai-stream.js

@@ -0,0 +1,31 @@
+"use client";
+
+// registry/examples/markdown/ai-stream.tsx
+import { Button } from "@krizaka/ui/button";
+import { Markdown } from "@krizaka/ui/markdown";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var answer = `Use **a queue**, not a loop: \`createQueue\` runs two files at once, retries a failure after a pause and lets you pause one file.
+
+1. Add each file with its \`id\`.
+2. Pause it with \`queue.pause(id)\`.
+3. Read the progress from the snapshot.
+
+See [the pacer docs](https://www.krizaka.com/docs/ui).`;
+function MarkdownAiStream() {
+  const [count, setCount] = React.useState(130);
+  const [started, setStarted] = React.useState(false);
+  const playing = started && count < answer.length;
+  React.useEffect(() => {
+    if (!playing) return;
+    const timer = setTimeout(() => setCount((n) => n + 6), 40);
+    return () => clearTimeout(timer);
+  }, [count, playing]);
+  return /* @__PURE__ */ jsxs("div", { className: "grid max-w-xl gap-4", children: [
+    /* @__PURE__ */ jsx(Markdown, { streaming: count < answer.length, children: answer.slice(0, count) }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => (setCount(0), setStarted(true)), className: "justify-self-start", children: "Play it" })
+  ] });
+}
+export {
+  MarkdownAiStream as default
+};

package/registry/examples/markdown/ai-stream.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Button } from "@krizaka/ui/button";
+import { Markdown } from "@krizaka/ui/markdown";
+import * as React from "react";
+
+const answer = `Use **a queue**, not a loop: \`createQueue\` runs two files at once, retries a failure after a pause and lets you pause one file.
+
+1. Add each file with its \`id\`.
+2. Pause it with \`queue.pause(id)\`.
+3. Read the progress from the snapshot.
+
+See [the pacer docs](https://www.krizaka.com/docs/ui).`;
+
+// A text that arrives in pieces: `streaming` closes the unfinished end (no stray `**`) and shows a caret. It rests
+// mid-answer; the button plays it from the first letter.
+export default function MarkdownAiStream() {
+  const [count, setCount] = React.useState(130);
+  const [started, setStarted] = React.useState(false);
+  const playing = started && count < answer.length;
+  React.useEffect(() => {
+    if (!playing) return;
+    const timer = setTimeout(() => setCount((n) => n + 6), 40);
+    return () => clearTimeout(timer);
+  }, [count, playing]);
+  return (
+    <div className="grid max-w-xl gap-4">
+      <Markdown streaming={count < answer.length}>{answer.slice(0, count)}</Markdown>
+      <Button size="sm" variant="secondary" onClick={() => (setCount(0), setStarted(true))} className="justify-self-start">Play it</Button>
+    </div>
+  );
+}

package/registry/examples/markdown/basic.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/markdown/basic.js

@@ -0,0 +1,26 @@
+"use client";
+
+// registry/examples/markdown/basic.tsx
+import { Markdown } from "@krizaka/ui/markdown";
+import { jsx } from "react/jsx-runtime";
+var text = `## What changed in 3.9
+
+The queue now **retries** a failed upload with a backoff, and \`pause\` keeps its place.
+
+- Pause, resume and retry per file
+- A 429 waits for its \`Retry-After\`
+
+| Entry | Size |
+| :--- | ---: |
+| \`@krizaka/pacer\` | 2 kB |
+
+\`\`\`ts title="uploads.ts"
+const queue = createQueue({ retries: 3 });
+\`\`\`
+`;
+function MarkdownBasic() {
+  return /* @__PURE__ */ jsx(Markdown, { className: "max-w-xl", codeLabels: { copy: "Copy", copied: "Copied" }, children: text });
+}
+export {
+  MarkdownBasic as default
+};

package/registry/examples/markdown/basic.tsx

@@ -0,0 +1,22 @@
+import { Markdown } from "@krizaka/ui/markdown";
+
+const text = `## What changed in 3.9
+
+The queue now **retries** a failed upload with a backoff, and \`pause\` keeps its place.
+
+- Pause, resume and retry per file
+- A 429 waits for its \`Retry-After\`
+
+| Entry | Size |
+| :--- | ---: |
+| \`@krizaka/pacer\` | 2 kB |
+
+\`\`\`ts title="uploads.ts"
+const queue = createQueue({ retries: 3 });
+\`\`\`
+`;
+
+// A Markdown text on the tokens: headings, lists, a table, a titled code block. Raw HTML is never rendered.
+export default function MarkdownBasic() {
+  return <Markdown className="max-w-xl" codeLabels={{ copy: "Copy", copied: "Copied" }}>{text}</Markdown>;
+}

package/registry/examples/markdown/native/ai-stream.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/markdown/native/ai-stream.js

@@ -0,0 +1,17 @@
+"use client";
+
+// registry/examples/markdown/native/ai-stream.tsx
+import { Markdown } from "@krizaka/ui/native/markdown";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var arriving = `Use **a queue**, not a loop: \`createQueue\` runs two files at once, retries a failure and lets you pause one.
+
+1. Add each file with its \`id\`.
+2. Pause it with \`queue.pause(id)\`.
+3. Read the progress from the **snap`;
+function NativeMarkdownAiStream() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(Markdown, { streaming: true, children: arriving }) });
+}
+export {
+  NativeMarkdownAiStream as default
+};

package/registry/examples/markdown/native/ai-stream.tsx

@@ -0,0 +1,17 @@
+import { Markdown } from "@krizaka/ui/native/markdown";
+import { View } from "react-native";
+
+// An AI answer cut mid-sentence: `streaming` closes what is open, so no `**` or half a link shows on the phone.
+const arriving = `Use **a queue**, not a loop: \`createQueue\` runs two files at once, retries a failure and lets you pause one.
+
+1. Add each file with its \`id\`.
+2. Pause it with \`queue.pause(id)\`.
+3. Read the progress from the **snap`;
+
+export default function NativeMarkdownAiStream() {
+  return (
+    <View style={{ width: 340 }}>
+      <Markdown streaming>{arriving}</Markdown>
+    </View>
+  );
+}

package/registry/examples/markdown/native/basic.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentType } from "react";
+/** A named example of the @krizaka/ui registry; `defaultOpen` opens what it opens (a dialog, a menu, toasts) at load. */
+declare const Example: ComponentType<{ defaultOpen?: boolean }>;
+export default Example;

package/registry/examples/markdown/native/basic.js

@@ -0,0 +1,28 @@
+"use client";
+
+// registry/examples/markdown/native/basic.tsx
+import { Markdown } from "@krizaka/ui/native/markdown";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+var text = `## What changed in 3.9
+
+The queue now **retries** a failed upload with a backoff, and \`pause\` keeps its place.
+
+- Pause, resume and retry per file
+- A 429 waits for its \`Retry-After\`
+
+| Entry | Size |
+| :--- | ---: |
+| \`@krizaka/pacer\` | 2 kB |
+
+\`\`\`ts title="uploads.ts"
+const queue = createQueue({ retries: 3 });
+\`\`\`
+`;
+function NativeMarkdownBasic() {
+  return /* @__PURE__ */ jsx(View, { style: { width: 340 }, children: /* @__PURE__ */ jsx(Markdown, { onLinkPress: () => {
+  }, children: text }) });
+}
+export {
+  NativeMarkdownBasic as default
+};