@krizaka/ui 3.6.0 → 3.7.1

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  | \"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 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"
     }
   ],
   "dependencies": [],

package/registry/examples/avatar/group.js

@@ -3,16 +3,13 @@
 // registry/examples/avatar/group.tsx
 import { Avatar } from "@krizaka/ui/avatar";
 import { jsx, jsxs } from "react/jsx-runtime";
-var PORTRAIT = "data:image/svg+xml;utf8," + encodeURIComponent(
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/><circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>'
-);
 function AvatarGroup() {
   return /* @__PURE__ */ jsxs(Avatar.Group, { max: 3, size: "sm", children: [
-    /* @__PURE__ */ jsx(Avatar, { size: "sm", src: PORTRAIT, alt: "Oussama" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", src: "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp", alt: "Camille Roy" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", src: "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp", alt: "Noor Haddad" }),
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", src: "https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp", alt: "Tom\xE1s Ibarra" }),
     /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "LM" }),
-    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "SK" }),
-    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "JD" }),
-    /* @__PURE__ */ jsx(Avatar, { size: "sm", fallback: "AR" })
+    /* @__PURE__ */ jsx(Avatar, { size: "sm", src: "https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp", alt: "Ada Okafor" })
   ] });
 }
 export {

package/registry/examples/avatar/group.tsx

@@ -1,21 +1,14 @@
 import { Avatar } from "@krizaka/ui/avatar";
 
-const PORTRAIT =
-  "data:image/svg+xml;utf8," +
-  encodeURIComponent(
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/>' +
-      '<circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>',
-  );
-
 // `max={3}`: the others become `+n`.
 export default function AvatarGroup() {
   return (
     <Avatar.Group max={3} size="sm">
-      <Avatar size="sm" src={PORTRAIT} alt="Oussama" />
+      <Avatar size="sm" src="https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp" alt="Camille Roy" />
+      <Avatar size="sm" src="https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp" alt="Noor Haddad" />
+      <Avatar size="sm" src="https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp" alt="Tomás Ibarra" />
       <Avatar size="sm" fallback="LM" />
-      <Avatar size="sm" fallback="SK" />
-      <Avatar size="sm" fallback="JD" />
-      <Avatar size="sm" fallback="AR" />
+      <Avatar size="sm" src="https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp" alt="Ada Okafor" />
     </Avatar.Group>
   );
 }

package/registry/examples/avatar/native/group.js

@@ -5,10 +5,10 @@ import { Avatar } from "@krizaka/ui/native";
 import { jsx, jsxs } from "react/jsx-runtime";
 function NativeAvatarGroup() {
   return /* @__PURE__ */ jsxs(Avatar.Group, { max: 3, size: "md", children: [
-    /* @__PURE__ */ jsx(Avatar, { alt: "Maya" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Noor" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Ines" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Theo" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp", alt: "Camille" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp", alt: "Noor" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp", alt: "Tom\xE1s" }),
+    /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp", alt: "Ada" }),
     /* @__PURE__ */ jsx(Avatar, { alt: "Lou" })
   ] });
 }

package/registry/examples/avatar/native/group.tsx

@@ -3,10 +3,10 @@ import { Avatar } from "@krizaka/ui/native";
 export default function NativeAvatarGroup() {
   return (
     <Avatar.Group max={3} size="md">
-      <Avatar alt="Maya" />
-      <Avatar alt="Noor" />
-      <Avatar alt="Ines" />
-      <Avatar alt="Theo" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp" alt="Camille" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp" alt="Noor" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp" alt="Tomás" />
+      <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp" alt="Ada" />
       <Avatar alt="Lou" />
     </Avatar.Group>
   );

package/registry/examples/avatar/native/presence.js

@@ -4,13 +4,16 @@
 import { Avatar } from "@krizaka/ui/native";
 import { View } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
+var CAMILLE = "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp";
+var TOMAS = "https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp";
+var NOOR = "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp";
 function NativeAvatarPresence() {
   return /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", gap: 16, alignItems: "center" }, children: [
-    /* @__PURE__ */ jsx(Avatar, { alt: "Elena", size: "lg", presence: "online", presenceLabel: "online" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Alex", size: "lg", presence: "away", presenceLabel: "away" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Mina", size: "lg", presence: "offline", presenceLabel: "offline" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Elena's story, new", size: "lg", ring: "story" }),
-    /* @__PURE__ */ jsx(Avatar, { alt: "Alex's story, seen", size: "lg", ring: "seen" })
+    /* @__PURE__ */ jsx(Avatar, { src: CAMILLE, alt: "Camille", size: "lg", presence: "online", presenceLabel: "online" }),
+    /* @__PURE__ */ jsx(Avatar, { src: TOMAS, alt: "Tom\xE1s", size: "lg", presence: "away", presenceLabel: "away" }),
+    /* @__PURE__ */ jsx(Avatar, { src: NOOR, alt: "Noor", size: "lg", presence: "offline", presenceLabel: "offline" }),
+    /* @__PURE__ */ jsx(Avatar, { src: CAMILLE, alt: "Camille's story, new", size: "lg", ring: "story" }),
+    /* @__PURE__ */ jsx(Avatar, { src: TOMAS, alt: "Tom\xE1s's story, seen", size: "lg", ring: "seen" })
   ] });
 }
 export {

package/registry/examples/avatar/native/presence.tsx

@@ -1,15 +1,19 @@
 import { Avatar } from "@krizaka/ui/native";
 import { View } from "react-native";
 
+const CAMILLE = "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp";
+const TOMAS = "https://krizaka-assets.b-cdn.net/site/people/ui/tomas-256.7eaab80903.webp";
+const NOOR = "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp";
+
 // Presence in Messages, story rings in the rail: the dot and the ring are said with the name.
 export default function NativeAvatarPresence() {
   return (
     <View style={{ flexDirection: "row", gap: 16, alignItems: "center" }}>
-      <Avatar alt="Elena" size="lg" presence="online" presenceLabel="online" />
-      <Avatar alt="Alex" size="lg" presence="away" presenceLabel="away" />
-      <Avatar alt="Mina" size="lg" presence="offline" presenceLabel="offline" />
-      <Avatar alt="Elena's story, new" size="lg" ring="story" />
-      <Avatar alt="Alex's story, seen" size="lg" ring="seen" />
+      <Avatar src={CAMILLE} alt="Camille" size="lg" presence="online" presenceLabel="online" />
+      <Avatar src={TOMAS} alt="Tomás" size="lg" presence="away" presenceLabel="away" />
+      <Avatar src={NOOR} alt="Noor" size="lg" presence="offline" presenceLabel="offline" />
+      <Avatar src={CAMILLE} alt="Camille's story, new" size="lg" ring="story" />
+      <Avatar src={TOMAS} alt="Tomás's story, seen" size="lg" ring="seen" />
     </View>
   );
 }

package/registry/examples/avatar/with-image.js

@@ -3,11 +3,8 @@
 // registry/examples/avatar/with-image.tsx
 import { Avatar } from "@krizaka/ui/avatar";
 import { jsx } from "react/jsx-runtime";
-var PORTRAIT = "data:image/svg+xml;utf8," + encodeURIComponent(
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/><circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>'
-);
 function AvatarWithImage() {
-  return /* @__PURE__ */ jsx(Avatar, { src: PORTRAIT, alt: "Oussama", fallback: "OA" });
+  return /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp", alt: "Ada Okafor", fallback: "AO" });
 }
 export {
   AvatarWithImage as default

package/registry/examples/avatar/with-image.tsx

@@ -1,13 +1,6 @@
 import { Avatar } from "@krizaka/ui/avatar";
 
-// A self-contained portrait (no network).
-const PORTRAIT =
-  "data:image/svg+xml;utf8," +
-  encodeURIComponent(
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><rect width="80" height="80" fill="#3b82f6"/>' +
-      '<circle cx="40" cy="31" r="14" fill="#dbeafe"/><path d="M12 80a28 24 0 0 1 56 0z" fill="#dbeafe"/></svg>',
-  );
-
+// A portrait: the image when it loads, the initials while it loads or when it fails.
 export default function AvatarWithImage() {
-  return <Avatar src={PORTRAIT} alt="Oussama" fallback="OA" />;
+  return <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/ada-256.31a5ce640c.webp" alt="Ada Okafor" fallback="AO" />;
 }

package/registry/examples/profile-card/creator.js

@@ -9,9 +9,9 @@ function ProfileCardCreator() {
   return /* @__PURE__ */ jsxs(
     ProfileCard,
     {
-      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "EM", size: "xl" }),
+      visual: /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp", alt: "Noor Haddad", fallback: "NH", size: "xl" }),
       visualSize: 96,
-      name: "Elena Marchetti",
+      name: "Noor Haddad",
       statLabel: "Profile complete",
       value: 80,
       stats: [

package/registry/examples/profile-card/creator.tsx

@@ -6,9 +6,9 @@ import { ProfileCard } from "@krizaka/ui/profile-card";
 export default function ProfileCardCreator() {
   return (
     <ProfileCard
-      visual={<Avatar fallback="EM" size="xl" />}
+      visual={<Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp" alt="Noor Haddad" fallback="NH" size="xl" />}
       visualSize={96}
-      name="Elena Marchetti"
+      name="Noor Haddad"
       statLabel="Profile complete"
       value={80}
       stats={[

package/registry/examples/profile-card/match.js

@@ -9,9 +9,9 @@ function ProfileCardMatch() {
     ProfileCard,
     {
       brand: "yazakia",
-      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "AR", size: "xl" }),
+      visual: /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp", alt: "Camille Roy", fallback: "CR", size: "xl" }),
       visualSize: 88,
-      name: "Alex, 29",
+      name: "Camille, 29",
       stats: [
         { label: "Interests in common", value: 4, max: 6, valueText: "4 of 6" },
         { label: "Answers that match", value: 7, max: 10, valueText: "7 of 10" }

package/registry/examples/profile-card/match.tsx

@@ -6,9 +6,9 @@ export default function ProfileCardMatch() {
   return (
     <ProfileCard
       brand="yazakia"
-      visual={<Avatar fallback="AR" size="xl" />}
+      visual={<Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/camille-256.dc2943029a.webp" alt="Camille Roy" fallback="CR" size="xl" />}
       visualSize={88}
-      name="Alex, 29"
+      name="Camille, 29"
       stats={[
         { label: "Interests in common", value: 4, max: 6, valueText: "4 of 6" },
         { label: "Answers that match", value: 7, max: 10, valueText: "7 of 10" },

package/registry/examples/profile-card/native/default.js

@@ -7,8 +7,8 @@ function NativeProfileCardDefault() {
   return /* @__PURE__ */ jsx(
     ProfileCard,
     {
-      visual: /* @__PURE__ */ jsx(Avatar, { fallback: "EM", size: "xl" }),
-      name: "Elena Marchetti",
+      visual: /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp", alt: "Noor Haddad", fallback: "NH", size: "xl" }),
+      name: "Noor Haddad",
       statLabel: "Profile complete",
       value: 80,
       stats: [

package/registry/examples/profile-card/native/default.tsx

@@ -4,8 +4,8 @@ import { Avatar, Button, ProfileCard } from "@krizaka/ui/native";
 export default function NativeProfileCardDefault() {
   return (
     <ProfileCard
-      visual={<Avatar fallback="EM" size="xl" />}
-      name="Elena Marchetti"
+      visual={<Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/noor-256.c340c41421.webp" alt="Noor Haddad" fallback="NH" size="xl" />}
+      name="Noor Haddad"
       statLabel="Profile complete"
       value={80}
       stats={[

package/registry/examples/screen/native/app-shell.js

@@ -15,7 +15,7 @@ var TABS = [
 ];
 function NativeScreenAppShell() {
   const [tab, setTab] = useState("likes");
-  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Likes", subtitle: "4 people liked you" }), footer: /* @__PURE__ */ jsx(TabBar, { "aria-label": "Main sections", items: TABS, value: tab, onValueChange: setTab }), padding: 0, children: ["Elena, 29", "Noah, 31", "Mina, 27", "Alex, 33"].map((name) => /* @__PURE__ */ jsxs(View, { style: { gap: 2, paddingHorizontal: 16, paddingVertical: 12 }, children: [
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Likes", subtitle: "4 people liked you" }), footer: /* @__PURE__ */ jsx(TabBar, { "aria-label": "Main sections", items: TABS, value: tab, onValueChange: setTab }), padding: 0, children: ["Camille, 29", "Tom\xE1s, 31", "Noor, 27", "Ada, 33"].map((name) => /* @__PURE__ */ jsxs(View, { style: { gap: 2, paddingHorizontal: 16, paddingVertical: 12 }, children: [
     /* @__PURE__ */ jsx(Txt, { variant: "label", children: name }),
     /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: "Liked you today" })
   ] }, name)) }) });

package/registry/examples/screen/native/app-shell.tsx

@@ -21,7 +21,7 @@ export default function NativeScreenAppShell() {
   return (
     <View style={{ width: 360, height: 640 }}>
       <Screen header={<Header title="Likes" subtitle="4 people liked you" />} footer={<TabBar aria-label="Main sections" items={TABS} value={tab} onValueChange={setTab} />} padding={0}>
-        {["Elena, 29", "Noah, 31", "Mina, 27", "Alex, 33"].map((name) => (
+        {["Camille, 29", "Tomás, 31", "Noor, 27", "Ada, 33"].map((name) => (
           <View key={name} style={{ gap: 2, paddingHorizontal: 16, paddingVertical: 12 }}>
             <Txt variant="label">{name}</Txt>
             <Txt variant="caption" tone="secondary">Liked you today</Txt>

package/registry/examples/screen/native/feed.js

@@ -1,23 +1,40 @@
 "use client";
 
 // registry/examples/screen/native/feed.tsx
-import { Avatar, Card, Header, Screen, Txt } from "@krizaka/ui/native";
+import { ShortFeed, VerticalVideo } from "@krizaka/ui/native/vertical-video";
 import { View } from "react-native";
-import { jsx, jsxs } from "react/jsx-runtime";
-var POSTS = [
-  { id: "1", who: "Elena", what: "Sunset session at Cabo da Roca", when: "2 h" },
-  { id: "2", who: "Noah", what: "Best ramen in Porto? I have a list.", when: "5 h" },
-  { id: "3", who: "Mina", what: "Free tickets for the jazz night!", when: "Yesterday" }
+import { jsx } from "react/jsx-runtime";
+var CDN = "https://krizaka-assets.b-cdn.net/site/people/ui";
+var CLIPS = [
+  { id: "1", who: "Camille", face: `${CDN}/camille-256.dc2943029a.webp`, poster: `${CDN}/camille-512.9573eaa0b8.webp`, caption: "Sunset session at Cabo da Roca." },
+  { id: "2", who: "Tom\xE1s", face: `${CDN}/tomas-256.7eaab80903.webp`, poster: `${CDN}/tomas-512.dd7c4fd230.webp`, caption: "Best ramen in Porto? I have a list." }
 ];
 function NativeScreenFeed() {
-  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(Screen, { header: /* @__PURE__ */ jsx(Header, { title: "Moments", subtitle: "From people you matched with" }), children: POSTS.map((p) => /* @__PURE__ */ jsx(Card.Root, { children: /* @__PURE__ */ jsxs(Card.Body, { children: [
-    /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 10 }, children: [
-      /* @__PURE__ */ jsx(Avatar, { alt: p.who, size: "sm" }),
-      /* @__PURE__ */ jsx(Txt, { variant: "label", style: { flex: 1 }, children: p.who }),
-      /* @__PURE__ */ jsx(Txt, { variant: "caption", tone: "secondary", children: p.when })
-    ] }),
-    /* @__PURE__ */ jsx(Txt, { children: p.what })
-  ] }) }, p.id)) }) });
+  return /* @__PURE__ */ jsx(View, { style: { width: 360, height: 640 }, children: /* @__PURE__ */ jsx(
+    ShortFeed,
+    {
+      label: "Moments",
+      height: 640,
+      items: CLIPS,
+      getId: (clip) => clip.id,
+      renderItem: (clip, { active }) => /* @__PURE__ */ jsx(
+        VerticalVideo,
+        {
+          title: `Video by ${clip.who}`,
+          active,
+          posterUri: clip.poster,
+          creator: { name: clip.who, avatarUri: clip.face },
+          caption: clip.caption,
+          likes: 1200,
+          comments: 48,
+          onLike: () => void 0,
+          onComment: () => void 0,
+          onShare: () => void 0,
+          style: { height: 640, aspectRatio: void 0 }
+        }
+      )
+    }
+  ) });
 }
 export {
   NativeScreenFeed as default

package/registry/examples/screen/native/feed.tsx

@@ -1,34 +1,38 @@
-import { Avatar, Card, Header, Screen, Txt } from "@krizaka/ui/native";
+import { ShortFeed, VerticalVideo } from "@krizaka/ui/native/vertical-video";
 import { View } from "react-native";
 
-const POSTS = [
-  { id: "1", who: "Elena", what: "Sunset session at Cabo da Roca", when: "2 h" },
-  { id: "2", who: "Noah", what: "Best ramen in Porto? I have a list.", when: "5 h" },
-  { id: "3", who: "Mina", what: "Free tickets for the jazz night!", when: "Yesterday" },
+const CDN = "https://krizaka-assets.b-cdn.net/site/people/ui";
+const CLIPS = [
+  { id: "1", who: "Camille", face: `${CDN}/camille-256.dc2943029a.webp`, poster: `${CDN}/camille-512.9573eaa0b8.webp`, caption: "Sunset session at Cabo da Roca." },
+  { id: "2", who: "Tomás", face: `${CDN}/tomas-256.7eaab80903.webp`, poster: `${CDN}/tomas-512.dd7c4fd230.webp`, caption: "Best ramen in Porto? I have a list." },
 ];
 
-// A feed: a large title, cards under it (a long feed uses the list of `@krizaka/ui/native/list` in `scroll={false}`).
+// A feed in the vertical format: one clip per screen with the action rail on the right and the caption bottom-left; the one
+// in view plays and the others pause (`uri` is your clip — here the poster stands for it).
 export default function NativeScreenFeed() {
   return (
     <View style={{ width: 360, height: 640 }}>
-      <Screen header={<Header title="Moments" subtitle="From people you matched with" />}>
-        {POSTS.map((p) => (
-          <Card.Root key={p.id}>
-            <Card.Body>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                <Avatar alt={p.who} size="sm" />
-                <Txt variant="label" style={{ flex: 1 }}>
-                  {p.who}
-                </Txt>
-                <Txt variant="caption" tone="secondary">
-                  {p.when}
-                </Txt>
-              </View>
-              <Txt>{p.what}</Txt>
-            </Card.Body>
-          </Card.Root>
-        ))}
-      </Screen>
+      <ShortFeed
+        label="Moments"
+        height={640}
+        items={CLIPS}
+        getId={(clip) => clip.id}
+        renderItem={(clip, { active }) => (
+          <VerticalVideo
+            title={`Video by ${clip.who}`}
+            active={active}
+            posterUri={clip.poster}
+            creator={{ name: clip.who, avatarUri: clip.face }}
+            caption={clip.caption}
+            likes={1200}
+            comments={48}
+            onLike={() => undefined}
+            onComment={() => undefined}
+            onShare={() => undefined}
+            style={{ height: 640, aspectRatio: undefined }}
+          />
+        )}
+      />
     </View>
   );
 }

package/registry/examples/screen/native/profile.js

@@ -10,9 +10,9 @@ function NativeScreenProfile() {
     /* @__PURE__ */ jsx(Button, { label: "Preview", variant: "outline", style: { flex: 1 } })
   ] }), children: [
     /* @__PURE__ */ jsxs(View, { style: { alignItems: "center", gap: 6 }, children: [
-      /* @__PURE__ */ jsx(Avatar, { src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII=", alt: "Elena", size: 112, ring: "story" }),
+      /* @__PURE__ */ jsx(Avatar, { src: "https://krizaka-assets.b-cdn.net/site/people/ui/camille-512.9573eaa0b8.webp", alt: "Camille", size: 112, ring: "story" }),
       /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [
-        /* @__PURE__ */ jsx(Txt, { variant: "title", children: "Elena, 29" }),
+        /* @__PURE__ */ jsx(Txt, { variant: "title", children: "Camille, 29" }),
         /* @__PURE__ */ jsx(VerifiedBadge, { label: "Verified", size: 18 })
       ] }),
       /* @__PURE__ */ jsx(Txt, { tone: "secondary", children: "Lisbon \xB7 Sound engineer" })

package/registry/examples/screen/native/profile.tsx

@@ -7,9 +7,9 @@ export default function NativeScreenProfile() {
     <View style={{ width: 360, height: 640 }}>
       <Screen footer={<View style={{ flexDirection: "row", gap: 8, padding: 16 }}><Button label="Edit profile" style={{ flex: 1 }} /><Button label="Preview" variant="outline" style={{ flex: 1 }} /></View>}>
         <View style={{ alignItems: "center", gap: 6 }}>
-          <Avatar src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII=" alt="Elena" size={112} ring="story" />
+          <Avatar src="https://krizaka-assets.b-cdn.net/site/people/ui/camille-512.9573eaa0b8.webp" alt="Camille" size={112} ring="story" />
           <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-            <Txt variant="title">Elena, 29</Txt>
+            <Txt variant="title">Camille, 29</Txt>
             <VerifiedBadge label="Verified" size={18} />
           </View>
           <Txt tone="secondary">Lisbon · Sound engineer</Txt>

package/registry/examples/swipe-deck/discover.js

@@ -6,10 +6,9 @@ import { PersonCard, SwipeDeck } from "@krizaka/ui/swipe-deck";
 import { VerifiedBadge } from "@krizaka/ui/verified-badge";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
-var png = (data) => `data:image/png;base64,${data}`;
 var PEOPLE = [
-  { id: "e", name: "Elena", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg==")] },
-  { id: "n", name: "Noah", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg==")] }
+  { id: "c", name: "Camille", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: ["https://krizaka-assets.b-cdn.net/site/people/ui/camille-512.9573eaa0b8.webp"] },
+  { id: "t", name: "Tom\xE1s", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: ["https://krizaka-assets.b-cdn.net/site/people/ui/tomas-512.dd7c4fd230.webp"] }
 ];
 function SwipeDeckDiscover() {
   const [people, setPeople] = useState(PEOPLE);

package/registry/examples/swipe-deck/discover.tsx

@@ -5,10 +5,9 @@ import { PersonCard, SwipeDeck } from "@krizaka/ui/swipe-deck";
 import { VerifiedBadge } from "@krizaka/ui/verified-badge";
 import { useState } from "react";
 
-const png = (data: string) => `data:image/png;base64,${data}`;
 const PEOPLE = [
-  { id: "e", name: "Elena", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg==")] },
-  { id: "n", name: "Noah", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg==")] },
+  { id: "c", name: "Camille", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: ["https://krizaka-assets.b-cdn.net/site/people/ui/camille-512.9573eaa0b8.webp"] },
+  { id: "t", name: "Tomás", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: ["https://krizaka-assets.b-cdn.net/site/people/ui/tomas-512.dd7c4fd230.webp"] },
 ];
 
 // Discover: drag right to like, left to pass, the buttons, or ← → on the focused deck.

package/registry/examples/swipe-deck/native/discover.js

@@ -5,10 +5,9 @@ import { Badge, PersonCard, SwipeDeck, Txt, VerifiedBadge } from "@krizaka/ui/na
 import { useState } from "react";
 import { View } from "react-native";
 import { jsx } from "react/jsx-runtime";
-var png = (data) => `data:image/png;base64,${data}`;
 var PEOPLE = [
-  { id: "e", name: "Elena", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaklEQVR42mWMy24UQQxF7arqlwLhIbJhwZZf5I/4IISEBIsIRSKTMOmZnp7uqrJ9zYIeIeCsrqzjw+vHDwYCCM6wbfy5gABKatsysJqLuoHciZ2dGE4ApSrbnyidVn06lVyQUrweur5pmAJAqVQGSEGnRb79mD5/H6dzuRq6929fv7t5MTSd+6VUK3Zj/XQ7frkblyJ926jwkIab6yZw3Eq58rzaz6nMq1RVA+3nMmd73nMMfCkJiRBA7u5O7g6QCFfhyLyVRJg89U3bxKiGJsQ+te6pCge+lETYPT3rujalotqkNLSdexRhJk6lshjOWXeH+WE6Z1HAi+p+Pr+czuxtG0PKlZesd+P09f5xd5iKqrlX1cfpGCiqhDdXr9Ja8DSX24f9/eG4VDGAiAzIIrvpwJ6C96FUXrId15Ivxm8MKCpzKUvRUCpXJTOHO/2Nu6uhqocqLMr4V9iAkxoHMzZjgP7XnMjBZvQLMEROG5iV3IMAAAAASUVORK5CYII="), png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABZklEQVR42m3MzW4TUQyGYZ8zZzJpwp8UiQ0SEvfMLXETICqoKrXQdDohyZwZ258/FpPCAryyrUdv6j99ZDAiSALLFhFkULhcLAAWFEEA7ggEhYkiImQwWNx84WY+Vh0OZzVvcn657bq25MQIFlOLYCDOY/1+23/59uN0mrZX3Yf3u3dvX6+7VvhcMvXH/vT5+u7rzcM02XrVOvyqbXZvNjmlYmoMqtpY5+EwjqOae4CHX7XWWTerktOl5OYwR5AkKSSXp6sxP5fcPJHrVWlLA0Rpctc2iYQ5/5RgEHLTlbY0qt6WZrsuQrp5SlJMzRG16r4/98M4qyM4m/eH+mqzyilWTVNUfZr0bn+8vn16eDqqeZDm2A9jEgawe7Eu8zQPx+nmfrh/PNbZERQRBCf1n0NtkhQym/lU59N5nu0ilkFQDaeqddLsamZwB/+Cy5CEhzuym8M9KP8iEQkSjgwAAP9LhCQB/AYQ5Y+kAv/RXgAAAABJRU5ErkJggg==")] },
-  { id: "n", name: "Noah", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: [png("iVBORw0KGgoAAAANSUhEUgAAAAwAAAAQCAIAAACtAwlQAAABaUlEQVR42mWRzW5TQRSDZ+bOTdMoFMGCFWx4SR6OF0EgQVWECmqbNOnNvTPnHNssIn6kemVZn+yF84eP30mKFEWCZwMmnROKrAAIShSIAOECKaWUkhIlkTXMzxDdbT614z7M8jCsNi+G8UI5nyEjKKKfpuOP6931Z5uO4+X26t377Zu3w2otqYY5SZjNu/uHr5/2N1+it7paR0QZLy9evs651DAjCes2n9ph58uMcIH9+Njn07De5jL8bXJ4kJSUJEkU4BFmuQzVzUTCXUplXJdhJFCGWuqFlMIjJ1aYE0SEpLrelDpmtzKMw2ojJpinnGuYMcLavOzv2+MDrItAdHvatc3VKqUyjDV697YsD7fT7bf2eIewJCK8H+6VMoBx86paa/1pP/26WXY/oy+JSCklAt774U65kLm4mS/N5+k8lP5IBMJimaK1AnO6E5HOf/0vSQGElzBHhEilZ1ASRXgUAAD0vOYfhd832o14udpJswAAAABJRU5ErkJggg==")] }
+  { id: "c", name: "Camille", age: 29, km: 3.2, bio: "Sunsets, vinyl and long walks.", tags: ["Music", "Surf"], photos: ["https://krizaka-assets.b-cdn.net/site/people/ui/camille-512.9573eaa0b8.webp"] },
+  { id: "t", name: "Tom\xE1s", age: 31, km: 12, bio: "Cook, climber, bad puns.", tags: ["Climbing"], photos: ["https://krizaka-assets.b-cdn.net/site/people/ui/tomas-512.dd7c4fd230.webp"] }
 ];
 function NativeSwipeDeckDiscover() {
   const [people, setPeople] = useState(PEOPLE);