@krizaka/ui 3.38.0 → 3.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bird-plate.js +1 -1
- package/dist/blocks.css +72 -6
- package/dist/chip-link.js +1 -1
- package/dist/chip-row.js +1 -1
- package/dist/{chunk-IANSFIVC.js → chunk-7JFHTPI3.js} +13 -3
- package/dist/chunk-7JFHTPI3.js.map +1 -0
- package/dist/{chunk-RE5WJ4QP.js → chunk-ADRUEPYC.js} +4 -4
- package/dist/chunk-ADRUEPYC.js.map +1 -0
- package/dist/{chunk-BCVLLY3R.js → chunk-EZC54B5C.js} +89 -22
- package/dist/chunk-EZC54B5C.js.map +1 -0
- package/dist/{chunk-BTTDIVVJ.js → chunk-F2UZ2WWL.js} +2 -2
- package/dist/chunk-F2UZ2WWL.js.map +1 -0
- package/dist/{chunk-JFJECOZ2.js → chunk-M4DBVG43.js} +87 -22
- package/dist/chunk-M4DBVG43.js.map +1 -0
- package/dist/flock.d.ts +40 -0
- package/dist/flock.js +198 -0
- package/dist/flock.js.map +1 -0
- package/dist/image-cropper.js +1 -1
- package/dist/kanban.js +1 -1
- package/dist/kanban.js.map +1 -1
- package/dist/map.js +2 -2
- package/dist/map.js.map +1 -1
- package/dist/mascot-quote.js +1 -1
- package/dist/mascot-state.js +1 -1
- package/dist/mascots.d.ts +32 -2
- package/dist/mascots.js +3 -1
- package/dist/mascots.js.map +1 -1
- package/dist/motion.css +1 -1
- package/dist/native/vertical-video.js +1 -1
- package/dist/native/vertical-video.js.map +1 -1
- package/dist/native.d.ts +1 -1
- package/dist/native.js +11 -11
- package/dist/native.js.map +1 -1
- package/dist/nav-bar.d.ts +1 -1
- package/dist/nav-bar.js +1 -1
- package/dist/photo-grid.js +1 -1
- package/dist/photo-grid.js.map +1 -1
- package/dist/site-footer.d.ts +5 -17
- package/dist/site-footer.js +33 -29
- package/dist/site-footer.js.map +1 -1
- package/dist/{sites-B4sYlfPQ.d.ts → sites-inztN_Bv.d.ts} +8 -0
- package/dist/sites.d.ts +11 -1
- package/dist/sites.js +12 -2
- package/dist/sites.js.map +1 -1
- package/dist/slider.js +3 -3
- package/dist/slider.js.map +1 -1
- package/dist/step-showcase.js +1 -1
- package/dist/step-showcase.js.map +1 -1
- package/dist/story.css +3 -3
- package/dist/video-player.js +1 -1
- package/dist/video-trimmer.js +1 -1
- package/dist/video-trimmer.js.map +1 -1
- package/package.json +24 -10
- package/registry/account-menu.json +1 -1
- package/registry/achievement.json +1 -1
- package/registry/action-bar.json +4 -4
- package/registry/activity-feed.json +1 -1
- package/registry/alert.json +1 -1
- package/registry/anatomy-plate.json +1 -1
- package/registry/app-header.json +1 -1
- package/registry/app-shell.json +1 -1
- package/registry/argument-card.json +3 -3
- package/registry/audio-player.json +1 -1
- package/registry/auth-layout.json +1 -1
- package/registry/avatar.json +1 -1
- package/registry/badge.json +1 -1
- package/registry/bird-plate.json +1 -1
- package/registry/button.json +1 -1
- package/registry/captcha.json +1 -1
- package/registry/card-grid.json +1 -1
- package/registry/card.json +1 -1
- package/registry/catalogue-page.json +1 -1
- package/registry/changelog-page.json +1 -1
- package/registry/chat.json +1 -1
- package/registry/checkbox.json +1 -1
- package/registry/chip-link.json +2 -2
- package/registry/chip-row.json +1 -1
- package/registry/chip.json +1 -1
- package/registry/choice-grid.json +1 -1
- package/registry/code-block.json +1 -1
- package/registry/combobox.json +1 -1
- package/registry/command.json +1 -1
- package/registry/comparison-table.json +1 -1
- package/registry/component-page.json +1 -1
- package/registry/confirm-button.json +1 -1
- package/registry/contact-page.json +3 -3
- package/registry/continue-prompt.json +1 -1
- package/registry/countdown.json +1 -1
- package/registry/cover-hero.json +1 -1
- package/registry/cta-panel.json +3 -3
- package/registry/dashboard-layout.json +1 -1
- package/registry/data-table.json +1 -1
- package/registry/date-picker.json +1 -1
- package/registry/decision-list.json +1 -1
- package/registry/description-list.json +1 -1
- package/registry/detail-layout.json +1 -1
- package/registry/dialog.json +1 -1
- package/registry/docs-article-page.json +1 -1
- package/registry/docs-hub-page.json +1 -1
- package/registry/docs-layout.json +1 -1
- package/registry/docs-nav.json +1 -1
- package/registry/document-viewer.json +1 -1
- package/registry/dropdown-menu.json +1 -1
- package/registry/empty-state.json +1 -1
- package/registry/engine-flow.json +1 -1
- package/registry/error-page.json +1 -1
- package/registry/examples/action-bar/buttons.js +2 -2
- package/registry/examples/action-bar/buttons.tsx +2 -2
- package/registry/examples/action-bar/icons.js +1 -1
- package/registry/examples/action-bar/icons.tsx +1 -1
- package/registry/examples/argument-card/building-block.js +1 -1
- package/registry/examples/argument-card/building-block.tsx +1 -1
- package/registry/examples/contact-page/team.js +1 -1
- package/registry/examples/contact-page/team.tsx +1 -1
- package/registry/examples/cta-panel/discuss.js +2 -2
- package/registry/examples/cta-panel/discuss.tsx +2 -2
- package/registry/examples/flock/pair.d.ts +4 -0
- package/registry/examples/flock/pair.js +22 -0
- package/registry/examples/flock/pair.tsx +16 -0
- package/registry/examples/flock/ridge.d.ts +4 -0
- package/registry/examples/flock/ridge.js +24 -0
- package/registry/examples/flock/ridge.tsx +19 -0
- package/registry/examples/search-field/global.js +13 -10
- package/registry/examples/search-field/global.tsx +11 -7
- package/registry/examples/site-footer/company.js +0 -4
- package/registry/examples/site-footer/company.tsx +3 -7
- package/registry/field.json +1 -1
- package/registry/file-upload.json +1 -1
- package/registry/filter-bar.json +1 -1
- package/registry/flock.json +226 -0
- package/registry/footnote.json +1 -1
- package/registry/force-update-screen.json +1 -1
- package/registry/form.json +1 -1
- package/registry/gallery-page.json +1 -1
- package/registry/genui.json +1 -1
- package/registry/glow-card.json +1 -1
- package/registry/goal-gauge.json +1 -1
- package/registry/how-it-works-page.json +1 -1
- package/registry/image-cropper.json +1 -1
- package/registry/index.json +39 -7
- package/registry/iso.json +1 -1
- package/registry/kanban.json +2 -2
- package/registry/kbd.json +1 -1
- package/registry/landing-page.json +1 -1
- package/registry/landscape.json +1 -1
- package/registry/language-switch.json +1 -1
- package/registry/legal-page.json +1 -1
- package/registry/link-card.json +1 -1
- package/registry/list.json +1 -1
- package/registry/loader.json +1 -1
- package/registry/longform-page.json +1 -1
- package/registry/maintenance-screen.json +1 -1
- package/registry/map.json +3 -3
- package/registry/markdown.json +1 -1
- package/registry/marketing-layout.json +1 -1
- package/registry/marquee.json +1 -1
- package/registry/mascot-quote.json +1 -1
- package/registry/mascot-state.json +1 -1
- package/registry/mascots.json +91 -3
- package/registry/match-dialog.json +1 -1
- package/registry/media-capture.json +1 -1
- package/registry/media-gallery.json +1 -1
- package/registry/media-grid.json +1 -1
- package/registry/meta-row.json +1 -1
- package/registry/meter.json +1 -1
- package/registry/nav-bar.json +2 -2
- package/registry/number-ticker.json +1 -1
- package/registry/opening-hours.json +1 -1
- package/registry/page-header.json +1 -1
- package/registry/page-hero.json +1 -1
- package/registry/page-index.json +1 -1
- package/registry/page.json +1 -1
- package/registry/pagination.json +1 -1
- package/registry/photo-grid.json +2 -2
- package/registry/pointer-light.json +1 -1
- package/registry/popover.json +1 -1
- package/registry/pricing-page.json +1 -1
- package/registry/product-page.json +1 -1
- package/registry/profile-card.json +1 -1
- package/registry/progress.json +1 -1
- package/registry/promise-card.json +1 -1
- package/registry/radio-group.json +1 -1
- package/registry/rail-nav.json +2 -2
- package/registry/recipes.json +1 -1
- package/registry/scroll-stage.json +1 -1
- package/registry/search-field.json +3 -3
- package/registry/section-backdrop.json +3 -3
- package/registry/separator.json +1 -1
- package/registry/service-card.json +1 -1
- package/registry/settings-layout.json +1 -1
- package/registry/showcase.json +1 -1
- package/registry/site-footer.json +11 -11
- package/registry/sites.json +3 -3
- package/registry/skeleton.json +1 -1
- package/registry/skip-link.json +1 -1
- package/registry/slider.json +2 -2
- package/registry/slot-picker.json +1 -1
- package/registry/slot.json +1 -1
- package/registry/specimen-tag.json +1 -1
- package/registry/spinner.json +1 -1
- package/registry/split-view.json +1 -1
- package/registry/stage-banner.json +1 -1
- package/registry/stat.json +1 -1
- package/registry/status-page.json +1 -1
- package/registry/step-progress.json +1 -1
- package/registry/step-showcase.json +2 -2
- package/registry/stepper.json +1 -1
- package/registry/sticky-action.json +1 -1
- package/registry/swipe-deck.json +1 -1
- package/registry/switch.json +1 -1
- package/registry/tabs.json +1 -1
- package/registry/tag-input.json +1 -1
- package/registry/tag-selector.json +1 -1
- package/registry/terminal-replay.json +1 -1
- package/registry/theme.json +1 -1
- package/registry/toast.json +1 -1
- package/registry/toc.json +1 -1
- package/registry/tooltip.json +1 -1
- package/registry/tree-view.json +1 -1
- package/registry/update-prompt.json +1 -1
- package/registry/verified-badge.json +1 -1
- package/registry/vertical-video.json +1 -1
- package/registry/video-player.json +1 -1
- package/registry/video-trimmer.json +2 -2
- package/registry/virtual.json +1 -1
- package/registry/waveform.json +1 -1
- package/dist/chunk-BCVLLY3R.js.map +0 -1
- package/dist/chunk-BTTDIVVJ.js.map +0 -1
- package/dist/chunk-IANSFIVC.js.map +0 -1
- package/dist/chunk-JFJECOZ2.js.map +0 -1
- package/dist/chunk-RE5WJ4QP.js.map +0 -1
|
@@ -239,7 +239,7 @@
|
|
|
239
239
|
},
|
|
240
240
|
{
|
|
241
241
|
"path": "meta.ts",
|
|
242
|
-
"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 | \"anatomy-plate\"\n | \"bird-plate\"\n | \"footnote\"\n | \"page-index\"\n | \"specimen-tag\"\n | \"action-bar\"\n | \"action-sheet\"\n | \"activity-feed\"\n | \"alert\"\n | \"app-header\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"captcha\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"chip-row\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"comparison-table\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cover-hero\"\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 | \"docs-nav\"\n | \"document-viewer\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"engine-flow\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"force-update-screen\"\n | \"form\"\n | \"gallery-page\"\n | \"genui\"\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 | \"longform-page\"\n | \"maintenance-screen\"\n | \"map\"\n | \"markdown\"\n | \"meta-row\"\n | \"waveform\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-grid\"\n | \"language-switch\"\n | \"media-gallery\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"opening-hours\"\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 | \"rail-nav\"\n | \"recipes\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"service-card\"\n | \"settings-layout\"\n | \"account-menu\"\n | \"showcase\"\n | \"step-showcase\"\n | \"site-footer\"\n | \"sites\"\n | \"skeleton\"\n | \"skip-link\"\n | \"slider\"\n | \"slot-picker\"\n | \"slot\"\n | \"spinner\"\n | \"sticky-action\"\n | \"splash-handoff\"\n | \"split-view\"\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 | \"update-prompt\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n * component that answers there, when one does.\n */\nexport type Absence =\n | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n readonly web?: Absence;\n readonly native?: Absence;\n readonly desktop: DesktopSupport;\n}\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 /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n readonly parity: Parity;\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"
|
|
242
|
+
"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 | \"anatomy-plate\"\n | \"bird-plate\"\n | \"flock\"\n | \"footnote\"\n | \"page-index\"\n | \"specimen-tag\"\n | \"action-bar\"\n | \"action-sheet\"\n | \"activity-feed\"\n | \"alert\"\n | \"app-header\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"captcha\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"chip-row\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"comparison-table\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cover-hero\"\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 | \"docs-nav\"\n | \"document-viewer\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"engine-flow\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"force-update-screen\"\n | \"form\"\n | \"gallery-page\"\n | \"genui\"\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 | \"longform-page\"\n | \"maintenance-screen\"\n | \"map\"\n | \"markdown\"\n | \"meta-row\"\n | \"waveform\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-grid\"\n | \"language-switch\"\n | \"media-gallery\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"opening-hours\"\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 | \"rail-nav\"\n | \"recipes\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"service-card\"\n | \"settings-layout\"\n | \"account-menu\"\n | \"showcase\"\n | \"step-showcase\"\n | \"site-footer\"\n | \"sites\"\n | \"skeleton\"\n | \"skip-link\"\n | \"slider\"\n | \"slot-picker\"\n | \"slot\"\n | \"spinner\"\n | \"sticky-action\"\n | \"splash-handoff\"\n | \"split-view\"\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 | \"update-prompt\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n * component that answers there, when one does.\n */\nexport type Absence =\n | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n readonly web?: Absence;\n readonly native?: Absence;\n readonly desktop: DesktopSupport;\n}\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 /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n readonly parity: Parity;\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"
|
|
243
243
|
},
|
|
244
244
|
{
|
|
245
245
|
"path": "video-trimmer/index.ts",
|
|
@@ -251,7 +251,7 @@
|
|
|
251
251
|
},
|
|
252
252
|
{
|
|
253
253
|
"path": "video-trimmer/video-trimmer.tsx",
|
|
254
|
-
"content": "// Client. The trim timeline of a video editor: the clip as a filmstrip (or any track content), the part kept framed\n// between two edge handles — each a `slider` named by a prop, its value read as a time, never past the other one —\n// the outside dimmed, and a playhead to scrub. The handles sit on their value by their outer edge (the start handle\n// to the right of its value, the end handle to its left), so the frame encloses exactly what is kept. Every part\n// takes its own classes (`classNames`) and the handles their own content (`renderHandle`).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { clamp, formatClock } from \"../media\";\n\nexport const videoTrimmer = tv({\n slots: {\n root: \"w-full select-none\",\n header: \"mb-2 flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary\",\n kept: \"rounded-full bg-accent-soft px-2.5 py-0.5 font-sans text-xs font-semibold text-fg\",\n track: \"relative h-16 touch-none rounded-xl bg-surface-2 data-[disabled]:opacity-50\",\n strip: \"pointer-events-none absolute inset-0 flex overflow-hidden rounded-xl\",\n frame: \"h-full min-w-0 flex-1 object-cover\",\n shade: \"pointer-events-none absolute inset-y-0 bg-scrim-strong\",\n range: \"pointer-events-none absolute inset-y-0 border-y-[3px] border-accent\",\n handle:\n \"absolute inset-y-0 z-10 flex w-6 cursor-ew-resize items-center justify-center bg-accent text-on-accent shadow-md \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n \"data-[edge=start]:rounded-l-xl data-[edge=end]:-translate-x-full data-[edge=end]:rounded-r-xl\",\n grip: \"flex gap-[3px] [&>span]:h-5 [&>span]:w-[2px] [&>span]:rounded-sm [&>span]:bg-on-accent/70\",\n playhead:\n \"absolute -inset-y-1.5 z-20 w-[3px] -translate-x-1/2 cursor-ew-resize rounded-full bg-fg shadow-md \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n },\n});\n\ntype Part = keyof ReturnType<typeof videoTrimmer>;\n\nexport type VideoTrimmerLabels = {\n /** The start handle (\"Start\"). */\n start: string;\n /** The end handle (\"End\"). */\n end: string;\n /** The playhead (\"Playhead\"). */\n playhead: string;\n /** The length kept, above the track: `(length) => length + \" kept\"` (the length already formatted). */\n kept: (length: string) => string;\n};\n\nexport const videoTrimmerLabels: VideoTrimmerLabels = {\n start: \"Start\",\n end: \"End\",\n playhead: \"Playhead\",\n kept: (length) => `${length} kept`,\n};\n\nexport type VideoTrimmerProps = {\n /** The length of the clip, in seconds. */\n duration: number;\n /** The part kept, `[start, end]` in seconds (controlled). */\n value?: readonly [number, number];\n /** The part kept at first, uncontrolled. Default: the whole clip. */\n defaultValue?: readonly [number, number];\n /** Called on every move of a handle. */\n onValueChange?: (value: [number, number]) => void;\n /** Called once a drag or a key press ends: render a preview, save. */\n onValueCommit?: (value: [number, number]) => void;\n /** The time played, in seconds: shows the playhead. */\n time?: number;\n /** Called when the playhead is moved (a drag on the track, the arrows on the playhead). */\n onSeek?: (time: number) => void;\n /** The shortest part that can be kept, in seconds. Default 0.5. */\n minLength?: number;\n /** One arrow press, in seconds. Default 0.1. */\n step?: number;\n /** Shift + arrow, Page Up / Page Down, in seconds. Default 1. */\n largeStep?: number;\n /** Pictures of the clip, in order: the filmstrip. */\n frames?: readonly string[];\n /** Track content instead of the filmstrip (a waveform, a coloured band). */\n children?: React.ReactNode;\n /** A time as read and shown. Default `m:ss` with tenths. */\n formatTime?: (seconds: number) => string;\n /** Shows the times and the length kept above the track. Default `true`. */\n showHeader?: boolean;\n /** Not available (a render is running). */\n disabled?: boolean;\n /** Classes per part: `root`, `header`, `kept`, `track`, `strip`, `frame`, `shade`, `range`, `handle`, `grip`, `playhead`. */\n classNames?: Partial<Record<Part, string>>;\n /** The content of a handle (default: two grip lines). */\n renderHandle?: (edge: \"start\" | \"end\") => React.ReactNode;\n /** The words, passed translated; English by default. */\n labels?: Partial<VideoTrimmerLabels>;\n};\n\nconst tenths = (seconds: number) => `${formatClock(seconds)}.${Math.floor((Math.max(0, seconds) % 1) * 10)}`;\n\ntype Grip = \"start\" | \"end\" | \"playhead\";\n\n/** Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included. */\nexport function VideoTrimmer({\n duration,\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueCommit,\n time,\n onSeek,\n minLength = 0.5,\n step = 0.1,\n largeStep = 1,\n frames,\n children,\n formatTime = tenths,\n showHeader = true,\n disabled,\n classNames = {},\n renderHandle,\n labels: given,\n}: VideoTrimmerProps) {\n const labels = { ...videoTrimmerLabels, ...given };\n const s = videoTrimmer();\n const track = React.useRef<HTMLDivElement>(null);\n const grip = React.useRef<Grip | null>(null);\n const [inner, setInner] = React.useState<[number, number]>(() => [defaultValue?.[0] ?? 0, defaultValue?.[1] ?? duration]);\n const [start, end] = valueProp ?? inner;\n const total = duration > 0 ? duration : 1;\n const pct = (seconds: number) => (clamp(seconds, 0, total) / total) * 100;\n\n const set = (next: [number, number], commit = false) => {\n if (!valueProp) setInner(next);\n onValueChange?.(next);\n if (commit) onValueCommit?.(next);\n };\n const move = (edge: \"start\" | \"end\", to: number, commit = false) => {\n const next: [number, number] =\n edge === \"start\" ? [clamp(to, 0, end - minLength), end] : [start, clamp(to, start + minLength, duration)];\n set([Math.round(next[0] * 1000) / 1000, Math.round(next[1] * 1000) / 1000], commit);\n };\n const seek = (to: number) => onSeek?.(clamp(to, start, Math.max(start, end - 0.05)));\n\n const at = (clientX: number) => {\n const box = track.current?.getBoundingClientRect();\n if (!box || box.width === 0) return 0;\n return clamp(((clientX - box.left) / box.width) * duration, 0, duration);\n };\n\n const keys = (which: Grip) => (event: React.KeyboardEvent) => {\n const current = which === \"start\" ? start : which === \"end\" ? end : (time ?? start);\n const big = largeStep;\n const small = event.shiftKey ? largeStep : step;\n const target: Record<string, number> = {\n ArrowLeft: current - small,\n ArrowDown: current - small,\n ArrowRight: current + small,\n ArrowUp: current + small,\n PageDown: current - big,\n PageUp: current + big,\n Home: 0,\n End: duration,\n };\n const to = target[event.key];\n if (to === undefined || disabled) return;\n event.preventDefault();\n if (which === \"playhead\") seek(to);\n else move(which, to, true);\n };\n\n const handle = (edge: \"start\" | \"end\") => {\n const own = edge === \"start\" ? start : end;\n return (\n <div\n key={edge}\n role=\"slider\"\n tabIndex={disabled ? -1 : 0}\n aria-label={edge === \"start\" ? labels.start : labels.end}\n aria-valuemin={edge === \"start\" ? 0 : Math.round((start + minLength) * 10) / 10}\n aria-valuemax={edge === \"start\" ? Math.round((end - minLength) * 10) / 10 : Math.round(duration * 10) / 10}\n aria-valuenow={Math.round(own * 10) / 10}\n aria-valuetext={formatTime(own)}\n aria-disabled={disabled || undefined}\n data-edge={edge}\n className={s.handle({ className: classNames.handle })}\n style={{ left: `${pct(own)}%` }}\n onPointerDown={(event) => {\n if (disabled) return;\n event.stopPropagation();\n track.current?.setPointerCapture?.(event.pointerId);\n grip.current = edge;\n }}\n onKeyDown={keys(edge)}\n >\n {renderHandle ? (\n renderHandle(edge)\n ) : (\n <span className={s.grip({ className: classNames.grip })}>\n <span />\n <span />\n </span>\n )}\n </div>\n );\n };\n\n return (\n <div className={s.root({ className: classNames.root })}>\n {showHeader && (\n <div className={s.header({ className: classNames.header })}>\n <span>{formatTime(start)}</span>\n <span className={s.kept({ className: classNames.kept })}>{labels.kept(formatTime(end - start))}</span>\n <span>{formatTime(end)}</span>\n </div>\n )}\n <div\n ref={track}\n className={s.track({ className: classNames.track })}\n data-disabled={disabled ? \"\" : undefined}\n onPointerDown={(event) => {\n if (disabled) return;\n track.current?.setPointerCapture?.(event.pointerId);\n const t = at(event.clientX);\n grip.current = onSeek ? \"playhead\" : Math.abs(t - start) < Math.abs(t - end) ? \"start\" : \"end\";\n if (grip.current === \"playhead\") seek(t);\n else move(grip.current, t);\n }}\n onPointerMove={(event) => {\n if (!grip.current) return;\n const t = at(event.clientX);\n if (grip.current === \"playhead\") seek(t);\n else move(grip.current, t);\n }}\n onPointerUp={() => {\n if (grip.current && grip.current !== \"playhead\") onValueCommit?.([start, end]);\n grip.current = null;\n }}\n onPointerCancel={() => {\n grip.current = null;\n }}\n >\n <div className={s.strip({ className: classNames.strip })}>\n {children ?? frames?.map((src, i) => <img key={`${i}-${src}`} src={src} alt=\"\" draggable={false} className={s.frame({ className: classNames.frame })} />)}\n </div>\n <div className={s.shade({ className: classNames.shade })} style={{ left: 0, width: `${pct(start)}%`, borderRadius: \"0.75rem 0 0 0.75rem\" }} />\n <div className={s.shade({ className: classNames.shade })} style={{ right: 0, width: `${100 - pct(end)}%`, borderRadius: \"0 0.75rem 0.75rem 0\" }} />\n <div className={s.range({ className: classNames.range })} style={{ left: `${pct(start)}%`, right: `${100 - pct(end)}%` }} />\n {time !== undefined && (\n <div\n role=\"slider\"\n tabIndex={disabled || !onSeek ? -1 : 0}\n aria-label={labels.playhead}\n aria-valuemin={Math.round(start * 10) / 10}\n aria-valuemax={Math.round(end * 10) / 10}\n aria-valuenow={Math.round(time * 10) / 10}\n aria-valuetext={formatTime(time)}\n aria-readonly={!onSeek || undefined}\n className={s.playhead({ className: classNames.playhead })}\n style={{ left: `${pct(time)}%` }}\n onKeyDown={onSeek ? keys(\"playhead\") : undefined}\n />\n )}\n {handle(\"start\")}\n {handle(\"end\")}\n </div>\n </div>\n );\n}\n"
|
|
254
|
+
"content": "// Client. The trim timeline of a video editor: the clip as a filmstrip (or any track content), the part kept framed\n// between two edge handles — each a `slider` named by a prop, its value read as a time, never past the other one —\n// the outside dimmed, and a playhead to scrub. The handles sit on their value by their outer edge (the start handle\n// to the right of its value, the end handle to its left), so the frame encloses exactly what is kept. Every part\n// takes its own classes (`classNames`) and the handles their own content (`renderHandle`).\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { clamp, formatClock } from \"../media\";\n\nexport const videoTrimmer = tv({\n slots: {\n root: \"w-full select-none\",\n header: \"mb-2 flex items-center justify-between font-mono text-[11px] tabular-nums text-fg-secondary\",\n kept: \"rounded-sm bg-accent-soft px-2.5 py-0.5 font-sans text-xs font-semibold text-fg\",\n track: \"relative h-16 touch-none rounded-xl bg-surface-2 data-[disabled]:opacity-50\",\n strip: \"pointer-events-none absolute inset-0 flex overflow-hidden rounded-xl\",\n frame: \"h-full min-w-0 flex-1 object-cover\",\n shade: \"pointer-events-none absolute inset-y-0 bg-scrim-strong\",\n range: \"pointer-events-none absolute inset-y-0 border-y-[3px] border-accent\",\n handle:\n \"absolute inset-y-0 z-10 flex w-6 cursor-ew-resize items-center justify-center bg-accent text-on-accent shadow-md \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n \"data-[edge=start]:rounded-l-xl data-[edge=end]:-translate-x-full data-[edge=end]:rounded-r-xl\",\n grip: \"flex gap-[3px] [&>span]:h-5 [&>span]:w-[2px] [&>span]:rounded-sm [&>span]:bg-on-accent/70\",\n playhead:\n \"absolute -inset-y-1.5 z-20 w-[3px] -translate-x-1/2 cursor-ew-resize rounded-full bg-fg shadow-md \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n },\n});\n\ntype Part = keyof ReturnType<typeof videoTrimmer>;\n\nexport type VideoTrimmerLabels = {\n /** The start handle (\"Start\"). */\n start: string;\n /** The end handle (\"End\"). */\n end: string;\n /** The playhead (\"Playhead\"). */\n playhead: string;\n /** The length kept, above the track: `(length) => length + \" kept\"` (the length already formatted). */\n kept: (length: string) => string;\n};\n\nexport const videoTrimmerLabels: VideoTrimmerLabels = {\n start: \"Start\",\n end: \"End\",\n playhead: \"Playhead\",\n kept: (length) => `${length} kept`,\n};\n\nexport type VideoTrimmerProps = {\n /** The length of the clip, in seconds. */\n duration: number;\n /** The part kept, `[start, end]` in seconds (controlled). */\n value?: readonly [number, number];\n /** The part kept at first, uncontrolled. Default: the whole clip. */\n defaultValue?: readonly [number, number];\n /** Called on every move of a handle. */\n onValueChange?: (value: [number, number]) => void;\n /** Called once a drag or a key press ends: render a preview, save. */\n onValueCommit?: (value: [number, number]) => void;\n /** The time played, in seconds: shows the playhead. */\n time?: number;\n /** Called when the playhead is moved (a drag on the track, the arrows on the playhead). */\n onSeek?: (time: number) => void;\n /** The shortest part that can be kept, in seconds. Default 0.5. */\n minLength?: number;\n /** One arrow press, in seconds. Default 0.1. */\n step?: number;\n /** Shift + arrow, Page Up / Page Down, in seconds. Default 1. */\n largeStep?: number;\n /** Pictures of the clip, in order: the filmstrip. */\n frames?: readonly string[];\n /** Track content instead of the filmstrip (a waveform, a coloured band). */\n children?: React.ReactNode;\n /** A time as read and shown. Default `m:ss` with tenths. */\n formatTime?: (seconds: number) => string;\n /** Shows the times and the length kept above the track. Default `true`. */\n showHeader?: boolean;\n /** Not available (a render is running). */\n disabled?: boolean;\n /** Classes per part: `root`, `header`, `kept`, `track`, `strip`, `frame`, `shade`, `range`, `handle`, `grip`, `playhead`. */\n classNames?: Partial<Record<Part, string>>;\n /** The content of a handle (default: two grip lines). */\n renderHandle?: (edge: \"start\" | \"end\") => React.ReactNode;\n /** The words, passed translated; English by default. */\n labels?: Partial<VideoTrimmerLabels>;\n};\n\nconst tenths = (seconds: number) => `${formatClock(seconds)}.${Math.floor((Math.max(0, seconds) % 1) * 10)}`;\n\ntype Grip = \"start\" | \"end\" | \"playhead\";\n\n/** Keeps a part of a clip between two handles over its filmstrip, with a playhead to scrub — the keyboard included. */\nexport function VideoTrimmer({\n duration,\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueCommit,\n time,\n onSeek,\n minLength = 0.5,\n step = 0.1,\n largeStep = 1,\n frames,\n children,\n formatTime = tenths,\n showHeader = true,\n disabled,\n classNames = {},\n renderHandle,\n labels: given,\n}: VideoTrimmerProps) {\n const labels = { ...videoTrimmerLabels, ...given };\n const s = videoTrimmer();\n const track = React.useRef<HTMLDivElement>(null);\n const grip = React.useRef<Grip | null>(null);\n const [inner, setInner] = React.useState<[number, number]>(() => [defaultValue?.[0] ?? 0, defaultValue?.[1] ?? duration]);\n const [start, end] = valueProp ?? inner;\n const total = duration > 0 ? duration : 1;\n const pct = (seconds: number) => (clamp(seconds, 0, total) / total) * 100;\n\n const set = (next: [number, number], commit = false) => {\n if (!valueProp) setInner(next);\n onValueChange?.(next);\n if (commit) onValueCommit?.(next);\n };\n const move = (edge: \"start\" | \"end\", to: number, commit = false) => {\n const next: [number, number] =\n edge === \"start\" ? [clamp(to, 0, end - minLength), end] : [start, clamp(to, start + minLength, duration)];\n set([Math.round(next[0] * 1000) / 1000, Math.round(next[1] * 1000) / 1000], commit);\n };\n const seek = (to: number) => onSeek?.(clamp(to, start, Math.max(start, end - 0.05)));\n\n const at = (clientX: number) => {\n const box = track.current?.getBoundingClientRect();\n if (!box || box.width === 0) return 0;\n return clamp(((clientX - box.left) / box.width) * duration, 0, duration);\n };\n\n const keys = (which: Grip) => (event: React.KeyboardEvent) => {\n const current = which === \"start\" ? start : which === \"end\" ? end : (time ?? start);\n const big = largeStep;\n const small = event.shiftKey ? largeStep : step;\n const target: Record<string, number> = {\n ArrowLeft: current - small,\n ArrowDown: current - small,\n ArrowRight: current + small,\n ArrowUp: current + small,\n PageDown: current - big,\n PageUp: current + big,\n Home: 0,\n End: duration,\n };\n const to = target[event.key];\n if (to === undefined || disabled) return;\n event.preventDefault();\n if (which === \"playhead\") seek(to);\n else move(which, to, true);\n };\n\n const handle = (edge: \"start\" | \"end\") => {\n const own = edge === \"start\" ? start : end;\n return (\n <div\n key={edge}\n role=\"slider\"\n tabIndex={disabled ? -1 : 0}\n aria-label={edge === \"start\" ? labels.start : labels.end}\n aria-valuemin={edge === \"start\" ? 0 : Math.round((start + minLength) * 10) / 10}\n aria-valuemax={edge === \"start\" ? Math.round((end - minLength) * 10) / 10 : Math.round(duration * 10) / 10}\n aria-valuenow={Math.round(own * 10) / 10}\n aria-valuetext={formatTime(own)}\n aria-disabled={disabled || undefined}\n data-edge={edge}\n className={s.handle({ className: classNames.handle })}\n style={{ left: `${pct(own)}%` }}\n onPointerDown={(event) => {\n if (disabled) return;\n event.stopPropagation();\n track.current?.setPointerCapture?.(event.pointerId);\n grip.current = edge;\n }}\n onKeyDown={keys(edge)}\n >\n {renderHandle ? (\n renderHandle(edge)\n ) : (\n <span className={s.grip({ className: classNames.grip })}>\n <span />\n <span />\n </span>\n )}\n </div>\n );\n };\n\n return (\n <div className={s.root({ className: classNames.root })}>\n {showHeader && (\n <div className={s.header({ className: classNames.header })}>\n <span>{formatTime(start)}</span>\n <span className={s.kept({ className: classNames.kept })}>{labels.kept(formatTime(end - start))}</span>\n <span>{formatTime(end)}</span>\n </div>\n )}\n <div\n ref={track}\n className={s.track({ className: classNames.track })}\n data-disabled={disabled ? \"\" : undefined}\n onPointerDown={(event) => {\n if (disabled) return;\n track.current?.setPointerCapture?.(event.pointerId);\n const t = at(event.clientX);\n grip.current = onSeek ? \"playhead\" : Math.abs(t - start) < Math.abs(t - end) ? \"start\" : \"end\";\n if (grip.current === \"playhead\") seek(t);\n else move(grip.current, t);\n }}\n onPointerMove={(event) => {\n if (!grip.current) return;\n const t = at(event.clientX);\n if (grip.current === \"playhead\") seek(t);\n else move(grip.current, t);\n }}\n onPointerUp={() => {\n if (grip.current && grip.current !== \"playhead\") onValueCommit?.([start, end]);\n grip.current = null;\n }}\n onPointerCancel={() => {\n grip.current = null;\n }}\n >\n <div className={s.strip({ className: classNames.strip })}>\n {children ?? frames?.map((src, i) => <img key={`${i}-${src}`} src={src} alt=\"\" draggable={false} className={s.frame({ className: classNames.frame })} />)}\n </div>\n <div className={s.shade({ className: classNames.shade })} style={{ left: 0, width: `${pct(start)}%`, borderRadius: \"0.75rem 0 0 0.75rem\" }} />\n <div className={s.shade({ className: classNames.shade })} style={{ right: 0, width: `${100 - pct(end)}%`, borderRadius: \"0 0.75rem 0.75rem 0\" }} />\n <div className={s.range({ className: classNames.range })} style={{ left: `${pct(start)}%`, right: `${100 - pct(end)}%` }} />\n {time !== undefined && (\n <div\n role=\"slider\"\n tabIndex={disabled || !onSeek ? -1 : 0}\n aria-label={labels.playhead}\n aria-valuemin={Math.round(start * 10) / 10}\n aria-valuemax={Math.round(end * 10) / 10}\n aria-valuenow={Math.round(time * 10) / 10}\n aria-valuetext={formatTime(time)}\n aria-readonly={!onSeek || undefined}\n className={s.playhead({ className: classNames.playhead })}\n style={{ left: `${pct(time)}%` }}\n onKeyDown={onSeek ? keys(\"playhead\") : undefined}\n />\n )}\n {handle(\"start\")}\n {handle(\"end\")}\n </div>\n </div>\n );\n}\n"
|
|
255
255
|
}
|
|
256
256
|
],
|
|
257
257
|
"dependencies": [
|
package/registry/virtual.json
CHANGED
|
@@ -332,7 +332,7 @@
|
|
|
332
332
|
},
|
|
333
333
|
{
|
|
334
334
|
"path": "meta.ts",
|
|
335
|
-
"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 | \"anatomy-plate\"\n | \"bird-plate\"\n | \"footnote\"\n | \"page-index\"\n | \"specimen-tag\"\n | \"action-bar\"\n | \"action-sheet\"\n | \"activity-feed\"\n | \"alert\"\n | \"app-header\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"captcha\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"chip-row\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"comparison-table\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cover-hero\"\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 | \"docs-nav\"\n | \"document-viewer\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"engine-flow\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"force-update-screen\"\n | \"form\"\n | \"gallery-page\"\n | \"genui\"\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 | \"longform-page\"\n | \"maintenance-screen\"\n | \"map\"\n | \"markdown\"\n | \"meta-row\"\n | \"waveform\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-grid\"\n | \"language-switch\"\n | \"media-gallery\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"opening-hours\"\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 | \"rail-nav\"\n | \"recipes\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"service-card\"\n | \"settings-layout\"\n | \"account-menu\"\n | \"showcase\"\n | \"step-showcase\"\n | \"site-footer\"\n | \"sites\"\n | \"skeleton\"\n | \"skip-link\"\n | \"slider\"\n | \"slot-picker\"\n | \"slot\"\n | \"spinner\"\n | \"sticky-action\"\n | \"splash-handoff\"\n | \"split-view\"\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 | \"update-prompt\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n * component that answers there, when one does.\n */\nexport type Absence =\n | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n readonly web?: Absence;\n readonly native?: Absence;\n readonly desktop: DesktopSupport;\n}\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 /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n readonly parity: Parity;\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"
|
|
335
|
+
"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 | \"anatomy-plate\"\n | \"bird-plate\"\n | \"flock\"\n | \"footnote\"\n | \"page-index\"\n | \"specimen-tag\"\n | \"action-bar\"\n | \"action-sheet\"\n | \"activity-feed\"\n | \"alert\"\n | \"app-header\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"captcha\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"chip-row\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"comparison-table\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cover-hero\"\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 | \"docs-nav\"\n | \"document-viewer\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"engine-flow\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"force-update-screen\"\n | \"form\"\n | \"gallery-page\"\n | \"genui\"\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 | \"longform-page\"\n | \"maintenance-screen\"\n | \"map\"\n | \"markdown\"\n | \"meta-row\"\n | \"waveform\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-grid\"\n | \"language-switch\"\n | \"media-gallery\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"opening-hours\"\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 | \"rail-nav\"\n | \"recipes\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"service-card\"\n | \"settings-layout\"\n | \"account-menu\"\n | \"showcase\"\n | \"step-showcase\"\n | \"site-footer\"\n | \"sites\"\n | \"skeleton\"\n | \"skip-link\"\n | \"slider\"\n | \"slot-picker\"\n | \"slot\"\n | \"spinner\"\n | \"sticky-action\"\n | \"splash-handoff\"\n | \"split-view\"\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 | \"update-prompt\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n * component that answers there, when one does.\n */\nexport type Absence =\n | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n readonly web?: Absence;\n readonly native?: Absence;\n readonly desktop: DesktopSupport;\n}\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 /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n readonly parity: Parity;\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"
|
|
336
336
|
},
|
|
337
337
|
{
|
|
338
338
|
"path": "virtual/index.ts",
|
package/registry/waveform.json
CHANGED
|
@@ -209,7 +209,7 @@
|
|
|
209
209
|
},
|
|
210
210
|
{
|
|
211
211
|
"path": "meta.ts",
|
|
212
|
-
"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 | \"anatomy-plate\"\n | \"bird-plate\"\n | \"footnote\"\n | \"page-index\"\n | \"specimen-tag\"\n | \"action-bar\"\n | \"action-sheet\"\n | \"activity-feed\"\n | \"alert\"\n | \"app-header\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"captcha\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"chip-row\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"comparison-table\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cover-hero\"\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 | \"docs-nav\"\n | \"document-viewer\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"engine-flow\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"force-update-screen\"\n | \"form\"\n | \"gallery-page\"\n | \"genui\"\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 | \"longform-page\"\n | \"maintenance-screen\"\n | \"map\"\n | \"markdown\"\n | \"meta-row\"\n | \"waveform\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-grid\"\n | \"language-switch\"\n | \"media-gallery\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"opening-hours\"\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 | \"rail-nav\"\n | \"recipes\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"service-card\"\n | \"settings-layout\"\n | \"account-menu\"\n | \"showcase\"\n | \"step-showcase\"\n | \"site-footer\"\n | \"sites\"\n | \"skeleton\"\n | \"skip-link\"\n | \"slider\"\n | \"slot-picker\"\n | \"slot\"\n | \"spinner\"\n | \"sticky-action\"\n | \"splash-handoff\"\n | \"split-view\"\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 | \"update-prompt\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n * component that answers there, when one does.\n */\nexport type Absence =\n | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n readonly web?: Absence;\n readonly native?: Absence;\n readonly desktop: DesktopSupport;\n}\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 /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n readonly parity: Parity;\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"
|
|
212
|
+
"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 | \"anatomy-plate\"\n | \"bird-plate\"\n | \"flock\"\n | \"footnote\"\n | \"page-index\"\n | \"specimen-tag\"\n | \"action-bar\"\n | \"action-sheet\"\n | \"activity-feed\"\n | \"alert\"\n | \"app-header\"\n | \"app-shell\"\n | \"argument-card\"\n | \"audio-player\"\n | \"auth-layout\"\n | \"avatar\"\n | \"badge\"\n | \"button\"\n | \"captcha\"\n | \"card\"\n | \"card-grid\"\n | \"catalogue-page\"\n | \"changelog-page\"\n | \"chat\"\n | \"checkbox\"\n | \"chip\"\n | \"chip-link\"\n | \"chip-row\"\n | \"choice-grid\"\n | \"cn\"\n | \"code-block\"\n | \"combobox\"\n | \"comparison-table\"\n | \"command\"\n | \"component-page\"\n | \"confirm-button\"\n | \"contact-page\"\n | \"continue-prompt\"\n | \"countdown\"\n | \"cover-hero\"\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 | \"docs-nav\"\n | \"document-viewer\"\n | \"dropdown-menu\"\n | \"empty-state\"\n | \"engine-flow\"\n | \"error-page\"\n | \"fab\"\n | \"field\"\n | \"file-upload\"\n | \"filter-bar\"\n | \"force-update-screen\"\n | \"form\"\n | \"gallery-page\"\n | \"genui\"\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 | \"longform-page\"\n | \"maintenance-screen\"\n | \"map\"\n | \"markdown\"\n | \"meta-row\"\n | \"waveform\"\n | \"marketing-layout\"\n | \"marquee\"\n | \"mascot-quote\"\n | \"mascot-state\"\n | \"mascots\"\n | \"match-dialog\"\n | \"media-capture\"\n | \"media-grid\"\n | \"language-switch\"\n | \"media-gallery\"\n | \"media-picker\"\n | \"meter\"\n | \"nav-bar\"\n | \"number-ticker\"\n | \"onboarding\"\n | \"opening-hours\"\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 | \"rail-nav\"\n | \"recipes\"\n | \"screen\"\n | \"scroll-stage\"\n | \"search-field\"\n | \"section-backdrop\"\n | \"segmented\"\n | \"separator\"\n | \"service-card\"\n | \"settings-layout\"\n | \"account-menu\"\n | \"showcase\"\n | \"step-showcase\"\n | \"site-footer\"\n | \"sites\"\n | \"skeleton\"\n | \"skip-link\"\n | \"slider\"\n | \"slot-picker\"\n | \"slot\"\n | \"spinner\"\n | \"sticky-action\"\n | \"splash-handoff\"\n | \"split-view\"\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 | \"update-prompt\"\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 * Why a component is not on a platform — a decision, never a silence (the parity matrix of ui.krizaka.com/platforms):\n * - `gap` (✗): it belongs there and is not built yet; `issue` is the issue that tracks it (`krizaka/krizaka-ui#275`);\n * - `n/a`: it is not meant for that platform (a site's page block on a phone, a swipe on a desktop); `use` names the\n * component that answers there, when one does.\n */\nexport type Absence =\n | { readonly status: \"gap\"; readonly issue: string; readonly reason: string; readonly use?: undefined }\n | { readonly status: \"n/a\"; readonly reason: string; readonly use?: ComponentName; readonly issue?: undefined };\n\n/**\n * Desktop is the Orazaka Mac app (Tauri 2: the system WebView renders the web components — ADR-002). `web`: the web\n * component runs there as it is; `desktop`: it also has a desktop form (a window's title bar, a denser layout…), said in\n * its documentation; otherwise the absence and why.\n */\nexport type DesktopSupport = \"web\" | \"desktop\" | Absence;\n\n/**\n * The three platforms of Krizaka UI — web · native (React Native, Expo) · desktop — for one component. The side a\n * component has is `platforms`; the side it lacks says why here: `native` is required for (and only for) a web-only\n * component, `web` for a native-only one; `desktop` always. `scripts/registry.test.mjs` fails on a missing decision.\n */\nexport interface Parity {\n readonly web?: Absence;\n readonly native?: Absence;\n readonly desktop: DesktopSupport;\n}\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 /** The platforms it is not on, and why; and its desktop form (see `Parity`). */\n readonly parity: Parity;\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"
|
|
213
213
|
},
|
|
214
214
|
{
|
|
215
215
|
"path": "waveform/bars.ts",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mascots/geometry.ts","../src/mascots/mascot.tsx"],"sourcesContent":["/**\n * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\n * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\n * introduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n * \"la grue écoute\"), the magpie that keeps the score (2026-10, with Kachizaka: \"la pie compte les points\") and the\n * beaver that builds the shop (2026-10, with Akinaza: \"le castor artisan\" — the one figure of the flock without\n * feathers: its paws are drawn as wings, its paddle tail behind it), redrawn on one 120 × 120 grid so that any figure\n * can wear any mood.\n *\n * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\n * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\n * and highlights are black and white at a low opacity over the role, so they hold in both themes.\n */\n\nexport const MASCOT_BIRDS = [\"falcon\", \"owl\", \"duck\", \"flamingo\", \"pigeon\", \"lovebird\", \"crane\", \"magpie\", \"beaver\"] as const;\nexport type MascotBird = (typeof MASCOT_BIRDS)[number];\n\nexport const MASCOT_MOODS = [\"welcome\", \"thinking\", \"success\", \"empty\", \"error\"] as const;\nexport type MascotMood = (typeof MASCOT_MOODS)[number];\n\nexport type MascotTone = \"brand\" | \"own\";\n\ntype Point = readonly [number, number];\n\nexport interface BirdGeometry {\n /** The ground shadow: centre x, y and radii. */\n readonly shadow: readonly [number, number, number, number];\n /** Legs and feet, stroked in the beak colour. */\n readonly legs: readonly string[];\n /** Drawn behind the body (tail, parcel strings). */\n readonly back?: readonly string[];\n readonly body: string;\n readonly belly: string;\n /** Left then right wing, and the point each one turns around. */\n readonly wings: readonly [{ readonly d: string; readonly pivot: Point }, { readonly d: string; readonly pivot: Point }];\n /** A neck, stroked in the body colour with this width (the flamingo). */\n readonly neck?: { readonly d: string; readonly width: number };\n /** The head: a circle. */\n readonly head: { readonly cx: number; readonly cy: number; readonly r: number };\n /** Ear tufts, a crest, a visor's frame: filled with the detail colour. */\n readonly details: readonly string[];\n /** A band behind the eyes (the falcon's visor), in the page's surface. */\n readonly visor?: { readonly x: number; readonly y: number; readonly w: number; readonly h: number };\n /** Glasses (the duck): stroked rings around the eyes. */\n readonly glasses?: boolean;\n readonly beak: string;\n /** The eyes: centres, the radius of the white, the radius of the pupil (no white when `white` is 0). */\n readonly eyes: { readonly at: readonly Point[]; readonly white: number; readonly pupil: number };\n /** The parcel the pigeon carries: its three faces. */\n readonly parcel?: readonly [string, string, string];\n}\n\nconst mirror = (d: string) => d.replace(/(-?\\d+(?:\\.\\d+)?) (-?\\d+(?:\\.\\d+)?)/g, (_, x: string, y: string) => `${120 - Number(x)} ${y}`);\n\nconst falconWing = \"M29 58 C17 68 19 88 37 86 C31 76 31 66 29 58 Z\";\nconst pigeonWing = \"M36 58 C20 50 16 80 38 84 C34 74 34 66 36 58 Z\";\n\nexport const BIRDS: Readonly<Record<MascotBird, BirdGeometry>> = {\n falcon: {\n shadow: [60, 110, 26, 3.5],\n legs: [\"M51 94 L48 108 M44 108 L52 108\", \"M69 94 L72 108 M68 108 L76 108\"],\n body: \"M30 62 C30 42 90 42 90 62 C90 88 78 98 60 98 C42 98 30 88 30 62 Z\",\n belly: \"M41 66 C41 55 79 55 79 66 C79 82 71 90 60 90 C49 90 41 82 41 66 Z\",\n wings: [\n { d: falconWing, pivot: [29, 58] },\n { d: mirror(falconWing), pivot: [91, 58] },\n ],\n head: { cx: 60, cy: 38, r: 22 },\n details: [\"M46 20 L52 10 L56 19 Z\", \"M74 20 L68 10 L64 19 Z\"],\n visor: { x: 41, y: 29, w: 38, h: 13 },\n beak: \"M54 45 L66 45 L60 57 Z\",\n eyes: { at: [[50, 35.5], [70, 35.5]], white: 0, pupil: 3.2 },\n },\n owl: {\n shadow: [60, 110, 24, 3.5],\n legs: [\"M53 100 L51 107 M47 107 L55 107\", \"M67 100 L69 107 M65 107 L73 107\"],\n body: \"M28 52 C28 20 92 20 92 52 C92 86 82 102 60 102 C38 102 28 86 28 52 Z\",\n belly: \"M42 66 C42 52 78 52 78 66 C78 86 72 94 60 94 C48 94 42 86 42 66 Z\",\n wings: [\n { d: \"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\", pivot: [29, 58] },\n { d: mirror(\"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\"), pivot: [91, 58] },\n ],\n head: { cx: 60, cy: 42, r: 0 },\n details: [\"M31 20 L47 31 L31 41 Z\", \"M89 20 L73 31 L89 41 Z\"],\n beak: \"M55 50 L65 50 L60 59 Z\",\n eyes: { at: [[47, 41], [73, 41]], white: 10, pupil: 4 },\n },\n duck: {\n shadow: [60, 110, 30, 3.5],\n legs: [],\n back: [\"M88 80 C100 76 104 66 96 62 C98 70 94 74 88 74 Z\"],\n body: \"M26 80 C26 62 94 62 94 80 C94 100 82 106 60 106 C38 106 26 100 26 80 Z\",\n belly: \"M38 84 C38 72 82 72 82 84 C82 96 74 101 60 101 C46 101 38 96 38 84 Z\",\n wings: [\n { d: \"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\", pivot: [27, 74] },\n { d: mirror(\"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\"), pivot: [93, 74] },\n ],\n head: { cx: 60, cy: 42, r: 23 },\n details: [\"M57 20 C54 11 63 8 66 14 C62 13 60 16 61 20 Z\"],\n glasses: true,\n beak: \"M43 51 C43 46 55 45 60 45 C65 45 77 46 77 51 C77 56 66 60 60 60 C54 60 43 56 43 51 Z\",\n eyes: { at: [[51, 37], [69, 37]], white: 0, pupil: 2.6 },\n },\n flamingo: {\n shadow: [60, 110, 20, 3],\n legs: [\"M56 86 L55 97 L58 108 M53 108 L62 108\", \"M65 86 L66 108 M62 108 L71 108\"],\n body: \"M38 70 C38 54 88 54 88 70 C88 86 76 90 62 90 C48 90 38 86 38 70 Z\",\n belly: \"M46 72 C46 63 80 63 80 72 C80 82 72 85 63 85 C54 85 46 82 46 72 Z\",\n wings: [\n { d: \"M42 64 C30 68 32 84 47 84 C43 76 43 70 42 64 Z\", pivot: [42, 64] },\n { d: \"M84 64 C96 68 94 84 79 84 C83 76 83 70 84 64 Z\", pivot: [84, 64] },\n ],\n neck: { d: \"M58 60 C58 42 40 34 46 22\", width: 7 },\n head: { cx: 48, cy: 18, r: 11 },\n details: [],\n beak: \"M38 16 C28 18 29 28 24 33 C33 28 38 23 40 20 Z\",\n eyes: { at: [[46, 15]], white: 3.2, pupil: 1.8 },\n },\n pigeon: {\n shadow: [60, 112, 22, 3],\n legs: [\"M52 94 L51 99 M48 99 L54 99\", \"M68 94 L69 99 M66 99 L72 99\"],\n back: [\"M53 98 L52 103\", \"M67 98 L68 103\", \"M30 68 C16 72 14 62 28 56 C17 57 15 49 32 48 Z\"],\n body: \"M34 64 C34 44 86 44 86 64 C86 86 74 96 60 96 C46 96 34 86 34 64 Z\",\n belly: \"M43 68 C43 57 77 57 77 68 C77 82 70 88 60 88 C50 88 43 82 43 68 Z\",\n wings: [\n { d: pigeonWing, pivot: [36, 58] },\n { d: mirror(pigeonWing), pivot: [84, 58] },\n ],\n head: { cx: 60, cy: 36, r: 19 },\n details: [\"M54 18 C56 12 64 12 66 18 C63 16 57 16 54 18 Z\"],\n beak: \"M55 41 L65 41 L60 50 Z\",\n eyes: { at: [[52, 33], [68, 33]], white: 5, pupil: 2.4 },\n parcel: [\"M60 100 L71 105 L60 110 L49 105 Z\", \"M49 105 L60 110 L60 118 L49 113 Z\", \"M71 105 L60 110 L60 118 L71 113 Z\"],\n },\n /**\n * The lovebird — the inseparable that introduces two people. A plump little parrot: a short tail, a round head\n * with its coloured face (the detail colour), the white eye-rings of the species and a short hooked beak.\n */\n lovebird: {\n shadow: [60, 110, 23, 3.5],\n legs: [\"M53 96 L52 106 M48 106 L56 106\", \"M67 96 L68 106 M64 106 L72 106\"],\n back: [\"M74 90 C82 98 88 104 95 103 C91 98 86 91 82 84 Z\"],\n body: \"M32 66 C32 46 88 46 88 66 C88 90 76 100 60 100 C44 100 32 90 32 66 Z\",\n belly: \"M42 70 C42 59 78 59 78 70 C78 85 70 92 60 92 C50 92 42 85 42 70 Z\",\n wings: [\n { d: \"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\", pivot: [33, 60] },\n { d: mirror(\"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\"), pivot: [87, 60] },\n ],\n head: { cx: 60, cy: 38, r: 21 },\n details: [\"M43 40 C42 28 51 22 60 22 C69 22 78 28 77 40 C76 50 68 55 60 55 C52 55 44 50 43 40 Z\"],\n beak: \"M55 44 C55 40 65 40 65 44 C65 50 62 54 60 55 C58 54 55 50 55 44 Z\",\n eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 },\n },\n /**\n * The crane — the one that listens: posed, unhurried, drawn in one line. A tall wader seen in profile, standing still\n * on two straight legs, the neck a single stroke up to a small head with its crown (the detail colour) and a long,\n * straight beak; the folded wings low on its back. The flamingo bends and answers; the crane stands and listens.\n */\n crane: {\n shadow: [62, 110, 20, 3],\n legs: [\"M56 87 L55 108 M51 108 L59 108\", \"M67 87 L68 108 M64 108 L73 108\"],\n body: \"M40 66 C38 54 84 54 86 68 C88 82 76 88 62 88 C48 88 40 80 40 66 Z\",\n belly: \"M48 70 C48 62 78 62 79 70 C80 79 72 84 63 84 C54 84 48 79 48 70 Z\",\n wings: [\n { d: \"M44 62 C33 68 35 82 49 83 C45 76 45 69 44 62 Z\", pivot: [44, 62] },\n { d: \"M82 62 C93 67 96 82 80 84 C83 76 83 69 82 62 Z\", pivot: [82, 62] },\n ],\n neck: { d: \"M52 62 C48 47 52 37 48 26\", width: 6 },\n head: { cx: 47, cy: 21, r: 8.5 },\n details: [\"M41 16.5 C42 11 52 11 53 16.5 C50 14.6 44 14.6 41 16.5 Z\"],\n beak: \"M40.5 18.5 L19 22.5 L40.5 25.5 Z\",\n eyes: { at: [[45.5, 19.5]], white: 2.8, pupil: 1.6 },\n },\n /**\n * The magpie — the one that keeps the score: it counts the points, remembers every trophy and chatters with the\n * league. A sleek pied bird: a dark cap (the detail colour) over a round head, a white belly, a long tail behind it\n * (the detail colour), a short straight beak. It watches no one (that is the falcon): it counts.\n */\n magpie: {\n shadow: [58, 110, 24, 3.5],\n legs: [\"M53 95 L51 107 M47 107 L55 107\", \"M65 95 L67 107 M63 107 L71 107\"],\n back: [\"M72 88 C84 94 96 102 106 108 C104 111 100 112 97 110 C88 104 78 98 68 94 Z\"],\n body: \"M34 64 C34 44 84 44 84 64 C84 88 72 98 58 98 C44 98 34 88 34 64 Z\",\n belly: \"M43 70 C43 60 73 60 73 70 C73 84 67 90 58 90 C49 90 43 84 43 70 Z\",\n wings: [\n { d: \"M35 58 C22 64 22 84 40 88 C36 78 35 68 35 58 Z\", pivot: [35, 58] },\n { d: \"M83 58 C96 64 96 84 78 88 C82 78 83 68 83 58 Z\", pivot: [83, 58] },\n ],\n head: { cx: 58, cy: 36, r: 19 },\n details: [\"M40 34 C40 22 48 16 58 16 C68 16 76 22 76 34 C70 29 64 28 58 28 C52 28 46 29 40 34 Z\"],\n beak: \"M53 42 L63 42 L58 50 Z\",\n eyes: { at: [[50, 35], [66, 35]], white: 4.4, pupil: 2.3 },\n },\n /**\n * The beaver — the artisan that builds the shop, Akinaza's figure (and Canada's). Round and sturdy, sitting up: two\n * round ears and a nose (the detail colour), the two front teeth (the beak colour), small paws drawn as its wings,\n * and its flat paddle tail lying behind it. No feathers, the same moods.\n */\n beaver: {\n shadow: [62, 110, 30, 3.5],\n legs: [\"M50 100 L48 106 M43 106 L53 106\", \"M70 100 L72 106 M67 106 L77 106\"],\n back: [\"M74 94 C86 92 104 96 108 103 C106 110 90 111 76 104 Z\"],\n body: \"M30 72 C30 48 90 48 90 72 C90 96 78 104 60 104 C42 104 30 96 30 72 Z\",\n belly: \"M42 76 C42 64 78 64 78 76 C78 92 70 98 60 98 C50 98 42 92 42 76 Z\",\n wings: [\n { d: \"M38 66 C28 70 30 84 42 84 C44 78 42 72 38 66 Z\", pivot: [38, 66] },\n { d: \"M82 66 C92 70 90 84 78 84 C76 78 78 72 82 66 Z\", pivot: [82, 66] },\n ],\n head: { cx: 60, cy: 40, r: 22 },\n details: [\"M37 30 C33 23 39 16 46 20 C43 23 40 26 37 30 Z\", \"M83 30 C87 23 81 16 74 20 C77 23 80 26 83 30 Z\", \"M55 45 C55 42 65 42 65 45 C65 48 62 49 60 49 C58 49 55 48 55 45 Z\"],\n beak: \"M56 51 H64 V58 C64 59.5 63 60 62 60 H58 C57 60 56 59.5 56 58 Z\",\n eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 },\n },\n};\n\n/** What a mood adds around the bird: a badge, a thought, an empty tray. */\nexport const MOOD_PARTS = {\n /** The badge of `success` and `error`, top right. */\n badge: { cx: 98, cy: 22, r: 11 },\n check: \"M92.5 22.5 L96.8 26.6 L103.6 18.4\",\n bang: { line: \"M98 15.5 L98 23.5\", dot: [98, 28] as Point },\n /** `thinking`: three dots rising to the right of the head. */\n dots: [\n [88, 26, 2.6],\n [96, 19, 3.2],\n [105, 11, 3.8],\n ] as const,\n /** `empty`: an open tray beside the bird. */\n tray: \"M90 96 L110 96 L107 108 L93 108 Z\",\n /** `success`: two sparkles. */\n sparkles: [\"M16 26 L18 31 L23 33 L18 35 L16 40 L14 35 L9 33 L14 31 Z\", \"M104 52 L105.2 55 L108 56 L105.2 57 L104 60 L102.8 57 L100 56 L102.8 55 Z\"],\n} as const;\n\n/** The happy eye of `success`: an arch. */\nexport const archEye = ([x, y]: Point, r: number) => `M${x - r} ${y + r * 0.45} Q${x} ${y - r * 1.15} ${x + r} ${y + r * 0.45}`;\n/** The lowered lid of `empty`: a line across the eye. */\nexport const lidEye = ([x, y]: Point, r: number) => `M${x - r} ${y + 0.4} L${x + r} ${y + 0.4}`;\n/** The heavy lid of `empty` over an eye with a white: its upper half. */\nexport const upperLid = ([x, y]: Point, r: number) => `M${x - r} ${y} A${r} ${r} 0 0 1 ${x + r} ${y} Z`;\n/** The worried brow of `error`, above one eye (`side` -1 left, 1 right). */\nexport const brow = ([x, y]: Point, r: number, side: number) =>\n `M${x - r * 1.1} ${y - r * 1.25 - (side < 0 ? 0 : r * 0.7)} L${x + r * 1.1} ${y - r * 1.5 - (side < 0 ? r * 0.7 : 0)}`;\n\nexport interface MascotPalette {\n /** Top and bottom of the body gradient. */\n readonly from: string;\n readonly to: string;\n /** Wings and details (tufts, crest). */\n readonly wing: string;\n readonly detail: string;\n /** Beak and feet. */\n readonly beak: string;\n /** The pupils (and the falcon's visor lights). */\n readonly eye: string;\n}\n\n/** The signature palettes of the Krizaka story (`tone=\"own\"`), from the first drawings of each bird. */\nexport const OWN_PALETTES: Readonly<Record<MascotBird, MascotPalette>> = {\n falcon: { from: \"#ff9f00\", to: \"#ff2a00\", wing: \"#d84315\", detail: \"#b4320d\", beak: \"#ffb300\", eye: \"#00c8d4\" },\n owl: { from: \"#a78bfa\", to: \"#6d28d9\", wing: \"#7c3aed\", detail: \"#5b21b6\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n duck: { from: \"#f43f5e\", to: \"#be123c\", wing: \"#db2777\", detail: \"#9f1239\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n flamingo: { from: \"#f9a8d4\", to: \"#db2777\", wing: \"#ec4899\", detail: \"#be185d\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n pigeon: { from: \"#22d3ee\", to: \"#6366f1\", wing: \"#a855f7\", detail: \"#4338ca\", beak: \"#f59e0b\", eye: \"#1f2937\" },\n lovebird: { from: \"#6ee7b7\", to: \"#059669\", wing: \"#047857\", detail: \"#fb7185\", beak: \"#f97316\", eye: \"#1f2937\" },\n // The sandhill crane (grue du Canada): sand-grey plumage, its red crown, dark legs and beak.\n crane: { from: \"#ebe3d6\", to: \"#9c8f80\", wing: \"#7d7266\", detail: \"#dc2626\", beak: \"#44403c\", eye: \"#1f2937\" },\n // The Eurasian magpie (pie bavarde): slate and ink, the cobalt sheen of its wings, a dark beak.\n magpie: { from: \"#64748b\", to: \"#1e293b\", wing: \"#1d4ed8\", detail: \"#0f172a\", beak: \"#334155\", eye: \"#1f2937\" },\n // The North American beaver (castor du Canada): warm brown fur, a dark nose and tail, its orange front teeth.\n beaver: { from: \"#b07a4a\", to: \"#6b4226\", wing: \"#5c3a21\", detail: \"#3f2716\", beak: \"#f59e0b\", eye: \"#1f2937\" },\n};\n\n/** Fixed light and shade, laid at a low opacity over a role (they read on both themes). */\nexport const LIGHT = \"#ffffff\";\nexport const SHADE = \"#000000\";\n/** The parcel's faces (pigeon). */\nexport const PARCEL = [\"#f59e0b\", \"#d97706\", \"#b45309\"] as const;\n","// The Krizaka flock on the web: one bird, one mood, drawn from ./geometry in the host's brand colours.\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { archEye, BIRDS, brow, lidEye, LIGHT, type MascotBird, type MascotMood, type MascotPalette, type MascotTone, MOOD_PARTS, OWN_PALETTES, PARCEL, SHADE, upperLid } from \"./geometry\";\n\nconst CSS = `\n.kzb-bird { transform-box: view-box; transform-origin: 60px 108px; }\n.kzb-eye { transform-box: fill-box; transform-origin: center; }\n.kzb-wing { transform-box: view-box; }\n[data-animated] .kzb-bird { animation: kzb-bob 3.6s ease-in-out infinite; }\n[data-animated] .kzb-blink { animation: kzb-blink 5.2s ease-in-out infinite; }\n[data-animated][data-mood=\"welcome\"] .kzb-wing-r { animation: kzb-wave 1.1s ease-in-out infinite alternate; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot { animation: kzb-dot 1.5s ease-in-out infinite; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(2) { animation-delay: .2s; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(3) { animation-delay: .4s; }\n[data-animated][data-mood=\"success\"] .kzb-bird { animation: kzb-hop 1.6s cubic-bezier(.3,1.6,.5,1) 1, kzb-bob 3.6s ease-in-out 1.6s infinite; }\n[data-animated][data-mood=\"success\"] .kzb-badge { animation: kzb-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both; }\n[data-animated][data-mood=\"success\"] .kzb-sparkle { animation: kzb-twinkle 2.4s ease-in-out infinite; }\n[data-animated][data-mood=\"error\"] .kzb-bird { animation: kzb-shake .5s ease-in-out .2s 2, kzb-bob 3.6s ease-in-out 1.2s infinite; }\n[data-animated][data-mood=\"empty\"] .kzb-bird { animation: kzb-sway 5s ease-in-out infinite; }\n.kzb-badge, .kzb-sparkle, .kzb-dot { transform-box: fill-box; transform-origin: center; }\n@keyframes kzb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }\n@keyframes kzb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }\n@keyframes kzb-wave { from { transform: rotate(-8deg); } to { transform: rotate(-38deg); } }\n@keyframes kzb-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }\n@keyframes kzb-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-9px); } 60% { transform: translateY(0); } 100% { transform: translateY(0); } }\n@keyframes kzb-pop { from { transform: scale(0); } to { transform: scale(1); } }\n@keyframes kzb-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }\n@keyframes kzb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }\n@keyframes kzb-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2deg); } }\n@media (prefers-reduced-motion: reduce) {\n .kzb-bird, .kzb-blink, .kzb-wing-r, .kzb-dot, .kzb-badge, .kzb-sparkle { animation: none !important; }\n}\n`;\n\n/** The host's roles (`tone=\"brand\"`): the accent paints the bird, so it wears the product it is shown in. */\nconst BRAND: MascotPalette = {\n from: \"var(--kz-accent-2, var(--kz-accent))\",\n to: \"var(--kz-accent)\",\n wing: \"var(--kz-accent)\",\n detail: \"var(--kz-accent-2, var(--kz-accent))\",\n beak: \"var(--kz-warning)\",\n eye: \"var(--kz-text-primary)\",\n};\nconst OUTLINE = \"var(--kz-border-strong, color-mix(in srgb, currentColor 35%, transparent))\";\nconst SURFACE = \"var(--kz-surface-0)\";\n\nexport type MascotProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n /** Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment), `magpie` (the score: points, standings, trophies), `beaver` (the shop: a small business at work). */\n bird?: MascotBird;\n /** What the moment is: `welcome` (onboarding), `thinking` (a long task running), `success` (it is done), `empty` (nothing here yet), `error` (it failed). */\n mood?: MascotMood;\n /** `brand` (default): the host's accent, so the bird wears the product it is in. `own`: the bird's signature colours of the Krizaka story. */\n tone?: MascotTone;\n /** Width and height in pixels. */\n size?: number;\n /** A light idle motion and the mood's gesture. Off with `false`; always off under `prefers-reduced-motion`. */\n animated?: boolean;\n /** An accessible name (the bird becomes an image); without it the mascot is decorative. */\n title?: string;\n};\n\n/**\n * One of the nine Krizaka figures in one mood — for the moments a product speaks to a person: a welcome, a long wait,\n * a success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).\n */\nexport function Mascot({ bird = \"owl\", mood = \"welcome\", tone = \"brand\", size = 96, animated = true, title, className, ...props }: MascotProps) {\n const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n const g = BIRDS[bird];\n const p = tone === \"own\" ? OWN_PALETTES[bird] : BRAND;\n const body = `url(#kzb-${uid})`;\n const line = { stroke: OUTLINE, strokeWidth: 1.4, strokeLinejoin: \"round\" as const };\n const eyeR = g.eyes.white || g.eyes.pupil * 1.2;\n const eyes = g.eyes.at.map((at, i) => {\n const look = mood === \"thinking\" ? 1.4 : 0;\n if (mood === \"success\") return <path key={i} d={archEye(at, eyeR * 0.85)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n if (mood === \"empty\" && g.eyes.white > 0)\n return (\n <g key={i}>\n <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />\n <circle cx={at[0]} cy={at[1] + g.eyes.pupil * 0.7} r={g.eyes.pupil} fill={SHADE} />\n <path d={upperLid(at, g.eyes.white)} fill={p.detail} {...line} />\n </g>\n );\n if (mood === \"empty\") return <path key={i} d={lidEye(at, eyeR * 0.8)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n return (\n <g key={i} className=\"kzb-eye kzb-blink\">\n {g.eyes.white > 0 && <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />}\n <circle cx={at[0] + look} cy={at[1] - look} r={g.eyes.pupil} fill={g.visor ? p.eye : SHADE} />\n {g.eyes.white > 0 && <circle cx={at[0] + look - g.eyes.pupil * 0.35} cy={at[1] - look - g.eyes.pupil * 0.35} r={g.eyes.pupil * 0.35} fill={LIGHT} />}\n </g>\n );\n });\n const [wl, wr] = g.wings;\n return (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 120 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-bird={bird}\n data-mood={mood}\n data-animated={animated ? \"\" : undefined}\n className={className}\n {...(title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true })}\n {...props}\n >\n <style>{CSS}</style>\n <defs>\n <linearGradient id={`kzb-${uid}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" style={{ stopColor: p.from }} />\n <stop offset=\"100%\" style={{ stopColor: p.to }} />\n </linearGradient>\n </defs>\n <ellipse cx={g.shadow[0]} cy={g.shadow[1]} rx={g.shadow[2]} ry={g.shadow[3]} fill={SHADE} opacity={0.14} />\n {mood === \"empty\" && <path d={MOOD_PARTS.tray} stroke={OUTLINE} strokeWidth={1.6} strokeDasharray=\"3 3\" strokeLinejoin=\"round\" />}\n <g className=\"kzb-bird\">\n {g.legs.map((d) => (\n <path key={d} d={d} stroke={p.beak} strokeWidth={2.6} strokeLinecap=\"round\" />\n ))}\n {g.back?.map((d) => (d.endsWith(\"Z\") ? <path key={d} d={d} fill={p.detail} {...line} /> : <path key={d} d={d} stroke={OUTLINE} strokeWidth={1.4} />))}\n {g.parcel && (\n <g {...line}>\n {g.parcel.map((d, i) => (\n <path key={d} d={d} fill={PARCEL[i]} />\n ))}\n </g>\n )}\n <path d={g.body} fill={body} {...line} />\n <path d={g.belly} fill={LIGHT} opacity={0.28} />\n {[wl, wr].map((w, i) => {\n const turn = mood === \"success\" ? (i === 0 ? 28 : -28) : mood === \"welcome\" && i === 1 ? -20 : 0;\n return (\n <g key={i} className={i === 1 ? \"kzb-wing kzb-wing-r\" : \"kzb-wing\"} style={{ transformOrigin: `${w.pivot[0]}px ${w.pivot[1]}px`, transform: turn ? `rotate(${turn}deg)` : undefined }}>\n <path d={w.d} fill={p.wing} {...line} />\n <path d={w.d} fill={SHADE} opacity={0.16} />\n </g>\n );\n })}\n {g.neck && <path d={g.neck.d} stroke={body} strokeWidth={g.neck.width} strokeLinecap=\"round\" />}\n {g.head.r > 0 && <circle cx={g.head.cx} cy={g.head.cy} r={g.head.r} fill={body} {...line} />}\n {g.details.map((d) => (\n <path key={d} d={d} fill={p.detail} {...line} />\n ))}\n {g.visor && <rect x={g.visor.x} y={g.visor.y} width={g.visor.w} height={g.visor.h} rx={4} fill={SURFACE} {...line} />}\n {eyes}\n {g.glasses && (\n <g stroke={OUTLINE} strokeWidth={1.3}>\n {g.eyes.at.map(([x, y]) => (\n <circle key={x} cx={x} cy={y} r={6.5} fill={LIGHT} fillOpacity={0.12} />\n ))}\n <path d={`M${g.eyes.at[0][0] + 6.5} ${g.eyes.at[0][1]} L${g.eyes.at[1][0] - 6.5} ${g.eyes.at[1][1]}`} />\n </g>\n )}\n {mood === \"error\" &&\n g.eyes.at.map((at, i) => <path key={i} d={brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1)} stroke={OUTLINE} strokeWidth={2} strokeLinecap=\"round\" />)}\n <path d={g.beak} fill={p.beak} {...line} />\n </g>\n {mood === \"thinking\" && (\n <g>\n {MOOD_PARTS.dots.map(([cx, cy, r]) => (\n <circle key={cx} className=\"kzb-dot\" cx={cx} cy={cy} r={r} fill=\"var(--kz-text-secondary)\" />\n ))}\n </g>\n )}\n {mood === \"success\" && (\n <>\n {MOOD_PARTS.sparkles.map((d) => (\n <path key={d} className=\"kzb-sparkle\" d={d} fill={p.from} />\n ))}\n <g className=\"kzb-badge\">\n <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-success)\" />\n <path d={MOOD_PARTS.check} stroke={SURFACE} strokeWidth={2.6} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </g>\n </>\n )}\n {mood === \"error\" && (\n <g className=\"kzb-badge\">\n <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-danger)\" />\n <path d={MOOD_PARTS.bang.line} stroke={SURFACE} strokeWidth={2.8} strokeLinecap=\"round\" />\n <circle cx={MOOD_PARTS.bang.dot[0]} cy={MOOD_PARTS.bang.dot[1]} r={1.6} fill={SURFACE} />\n </g>\n )}\n </svg>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/chip-link/chip-link.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A chip that is a link — a filter that is an address (`/explore?tag=night`): the look\n// of `Chip`, the current filter marked by `selected` (`aria-current`, the accent), usable in a Server Component.\n// `chipVariants` styles anything else (a router link you render yourself).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const chipVariants = tv({\n base:\n \"inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border font-semibold no-underline transition-colors \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n variants: {\n size: { sm: \"h-7 px-3 text-xs\", md: \"h-9 px-3.5 text-xs\" },\n selected: {\n false: \"border-border-default bg-surface-1 text-fg-secondary hover:border-border-strong hover:text-fg\",\n true: \"border-accent bg-accent-soft text-fg\",\n },\n },\n defaultVariants: { size: \"md\", selected: false },\n});\n\nexport type ChipVariantsProps = VariantProps<typeof chipVariants>;\n\nexport type ChipLinkProps = React.ComponentProps<\"a\"> & {\n /**\n * sm · md.\n * @default \"md\"\n */\n size?: ChipVariantsProps[\"size\"];\n /** The current filter: the accent, `aria-current` (`page` by default) and `data-state=\"on\"`. */\n selected?: boolean;\n /**\n * What `aria-current` says when selected: `page` (a filter that is a page) or `true`.\n * @default \"page\"\n */\n current?: \"page\" | \"true\";\n /** Renders your router's `<Link>` with the chip's look. */\n asChild?: boolean;\n};\n\n/** A filter that is a link, with the look of `Chip`. */\nexport function ChipLink({ size, selected = false, current = \"page\", asChild, className, ...props }: ChipLinkProps) {\n const Comp = asChild ? Slot.Root : \"a\";\n return (\n <Comp\n data-state={selected ? \"on\" : \"off\"}\n aria-current={selected ? current : undefined}\n className={chipVariants({ size, selected, className })}\n {...props}\n />\n );\n}\n"],"mappings":";AAGA,SAAS,YAAY;AAErB,SAAS,UAA6B;AAuClC;AArCG,IAAM,eAAe,GAAG;AAAA,EAC7B,MACE;AAAA,EAEF,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,oBAAoB,IAAI,qBAAqB;AAAA,IACzD,UAAU;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,MAAM,UAAU,MAAM;AACjD,CAAC;AAsBM,SAAS,SAAS,EAAE,MAAM,WAAW,OAAO,UAAU,QAAQ,SAAS,WAAW,GAAG,MAAM,GAAkB;AAClH,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,WAAW,OAAO;AAAA,MAC9B,gBAAc,WAAW,UAAU;AAAA,MACnC,WAAW,aAAa,EAAE,MAAM,UAAU,UAAU,CAAC;AAAA,MACpD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/family-mark.tsx","../src/sites/sites.ts"],"sourcesContent":["// The mark of a site of the family (`@krizaka/ui/sites`): its brand's `ProductLogo`, still (a list of marks never\n// moves), or GitHub's, in the text colour. Shared by `NavBar.Family` and `SiteFooter` — not an entry of its own.\nimport type * as React from \"react\";\n\nimport { ProductLogo } from \"./marks/ProductLogo\";\nimport type { SiteMark } from \"./sites/sites\";\n\n/** GitHub's mark, in the text colour (both themes). */\nexport function GitHubGlyph({ size = 16, className }: { size?: number; className?: string }) {\n return (\n <svg viewBox=\"0 0 16 16\" width={size} height={size} fill=\"currentColor\" aria-hidden className={className}>\n <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z\" />\n </svg>\n );\n}\n\n/** A site's mark, decorative (its name is always written beside it). */\nexport function FamilyMark({ mark, size }: { mark: SiteMark; size: number }): React.ReactElement {\n if (mark === \"github\") return <GitHubGlyph size={Math.round(size * 0.8)} />;\n return <ProductLogo id={mark} size={size} animated={false} />;\n}\n","// Server-safe: plain data. The Krizaka family — every site Krizaka runs, once. The family switcher of the bar\n// (`NavBar.Family`) and the common footer (`SiteFooter`) both read it, so adding a site is one release of this package:\n// every bar and every footer of the family follow.\n//\n// The words of the family (a site's one line, the groups, the statuses, the footer's signature) are brand data, written\n// here in English and French (`familyLabels`) — a site passes the set of its locale, or its own translation.\n\n/** A site of the family. */\nexport type SiteId = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\" | \"ui\" | \"java\" | \"motion\" | \"github\";\n\n/** What a site is: the company, a product, or an open-source project. It chooses the footer's signature line. */\nexport type SiteKind = \"company\" | \"product\" | \"open-source\";\n\n/**\n * `released`: open to visit. `upcoming`: announced, not released yet (said \"Coming soon\"). `construction`: under\n * construction — nothing offered (a QA-only app may run; the public page says so). `development`: being built in the\n * open, with a dev site (said \"In development\"). A site with none yet would use its repository as its address.\n */\nexport type SiteStatus = \"released\" | \"upcoming\" | \"construction\" | \"development\";\n\n/** The groups of the family, in reading order: Krizaka · Products · Open source · GitHub. */\nexport type SiteGroup = \"krizaka\" | \"products\" | \"open-source\" | \"github\";\n\n/** The mark a site wears: a brand of `ProductLogo` (Krizaka UI and Krizaka Java wear Krizaka's), or GitHub's. */\nexport type SiteMark = \"krizaka\" | \"orazaka\" | \"orochia\" | \"yasakia\" | \"yororis\" | \"yomizaka\" | \"kachizaka\" | \"akinaza\" | \"github\";\n\nexport interface Site {\n readonly id: SiteId;\n /** The name, never translated. */\n readonly name: string;\n /** The address of the site (its home). */\n readonly url: string;\n /** The address without the scheme, as people say it (`ui.krizaka.com`). */\n readonly host: string;\n readonly kind: SiteKind;\n readonly group: SiteGroup;\n readonly status: SiteStatus;\n readonly mark: SiteMark;\n /** The repository the site is built from. */\n readonly repo: string;\n}\n\nconst site = (s: Omit<Site, \"host\">): Site => ({ ...s, host: s.url.replace(/^https?:\\/\\//, \"\").replace(/\\/$/, \"\") });\n\n/** Every site of the family, in reading order (the group order, then the order inside each group). */\nexport const sites: readonly Site[] = [\n site({ id: \"krizaka\", name: \"Krizaka\", url: \"https://www.krizaka.com\", kind: \"company\", group: \"krizaka\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-com\" }),\n site({ id: \"orazaka\", name: \"Orazaka\", url: \"https://dev.orazaka.com\", kind: \"product\", group: \"products\", status: \"released\", mark: \"orazaka\", repo: \"https://github.com/krizaka/orazaka\" }),\n site({ id: \"orochia\", name: \"Orochia\", url: \"https://dev.orochia.com\", kind: \"product\", group: \"products\", status: \"released\", mark: \"orochia\", repo: \"https://github.com/krizaka/orochia\" }),\n site({ id: \"yasakia\", name: \"Yasakia\", url: \"https://dev.yasakia.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"yasakia\", repo: \"https://github.com/krizaka/yasakia\" }),\n site({ id: \"yororis\", name: \"Yororis\", url: \"https://dev.yororis.com\", kind: \"product\", group: \"products\", status: \"construction\", mark: \"yororis\", repo: \"https://github.com/krizaka/yororis\" }),\n site({ id: \"yomizaka\", name: \"Yomizaka\", url: \"https://dev.yomizaka.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"yomizaka\", repo: \"https://github.com/krizaka/yomizaka\" }),\n site({ id: \"kachizaka\", name: \"Kachizaka\", url: \"https://dev.kachizaka.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"kachizaka\", repo: \"https://github.com/krizaka/kachizaka\" }),\n site({ id: \"akinaza\", name: \"Akinaza\", url: \"https://dev.akinaza.com\", kind: \"product\", group: \"products\", status: \"development\", mark: \"akinaza\", repo: \"https://github.com/krizaka/akinaza\" }),\n site({ id: \"ui\", name: \"Krizaka UI\", url: \"https://ui.krizaka.com\", kind: \"open-source\", group: \"open-source\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-ui\" }),\n site({ id: \"java\", name: \"Krizaka Java\", url: \"https://java.krizaka.com\", kind: \"open-source\", group: \"open-source\", status: \"released\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-build\" }),\n // The motion lab: built in the open on GitHub Pages; what proves itself there moves into Krizaka UI.\n site({ id: \"motion\", name: \"Krizaka Motion\", url: \"https://krizaka.github.io/krizaka-motion\", kind: \"open-source\", group: \"open-source\", status: \"development\", mark: \"krizaka\", repo: \"https://github.com/krizaka/krizaka-motion\" }),\n site({ id: \"github\", name: \"GitHub\", url: \"https://github.com/krizaka\", kind: \"open-source\", group: \"github\", status: \"released\", mark: \"github\", repo: \"https://github.com/krizaka\" }),\n];\n\n/** The groups, in reading order. */\nexport const siteGroups: readonly SiteGroup[] = [\"krizaka\", \"products\", \"open-source\", \"github\"];\n\n/** A site by id. */\nexport function siteById(id: SiteId): Site {\n const found = sites.find((s) => s.id === id);\n if (!found) throw new Error(`Unknown Krizaka site \"${id}\".`);\n return found;\n}\n\n/** The family grouped, in reading order: `[{ group, sites }]`, empty groups left out. */\nexport function sitesByGroup(): { group: SiteGroup; sites: Site[] }[] {\n return siteGroups.map((group) => ({ group, sites: sites.filter((s) => s.group === group) })).filter((g) => g.sites.length > 0);\n}\n\n/** The languages the family's words are written in. */\nexport type SiteLocale = \"en\" | \"fr\";\n\n/** The words of the family: the switcher, the footer, each site's one line. */\nexport interface FamilyLabels {\n /** The family's name: the switcher's navigation and its button, the footer's navigation (“Krizaka family”). */\n family: string;\n /** The heading of each group. */\n groups: Record<SiteGroup, string>;\n /** The badge of a site that is not released. */\n status: Record<Exclude<SiteStatus, \"released\">, string>;\n /** Says which site is the current one (“You are here”). */\n current: string;\n /** One line per site: what it is. */\n descriptions: Record<SiteId, string>;\n /** The footer's signature, by the kind of the current site (“A Krizaka product”). */\n signature: Record<SiteKind, string>;\n /** The footer's place line (“Made in Montréal”). */\n place: string;\n /** The accessible name of the version (“Version”). */\n version: string;\n}\n\n/** The family's words in English and French. Pass `familyLabels[locale]`, or your own translation of the same shape. */\nexport const familyLabels: Record<SiteLocale, FamilyLabels> = {\n en: {\n family: \"Krizaka family\",\n groups: { krizaka: \"Krizaka\", products: \"Products\", \"open-source\": \"Open source\", github: \"GitHub\" },\n status: { upcoming: \"Coming soon\", construction: \"Under construction\", development: \"In development\" },\n current: \"You are here\",\n descriptions: {\n krizaka: \"The company: our products, our open source, our story.\",\n orazaka: \"Sovereign AI on your own servers: chat, documents, images and video — and the engine under the other products.\",\n orochia: \"A video platform for creators.\",\n yasakia: \"Meet real people: introductions, and photos checked before you see them.\",\n yororis: \"A listening space with a face and a voice.\",\n yomizaka: \"Yomizaka reads your leases, contracts and invoices.\",\n kachizaka: \"Predictions among friends — live data, in real time.\",\n akinaza: \"Running a shop in Québec, for less — Loi 25 by design.\",\n ui: \"Components, tokens, icons and charts — web and React Native.\",\n java: \"Spring Boot building blocks on Maven Central.\",\n motion: \"The motion lab: the kit's motion, played live with its knobs.\",\n github: \"Every repository, in the open.\",\n },\n signature: { company: \"A Krizaka company\", product: \"A Krizaka product\", \"open-source\": \"A Krizaka open-source project\" },\n place: \"Made in Montréal\",\n version: \"Version\",\n },\n fr: {\n family: \"Famille Krizaka\",\n groups: { krizaka: \"Krizaka\", products: \"Produits\", \"open-source\": \"Open source\", github: \"GitHub\" },\n status: { upcoming: \"Bientôt\", construction: \"En construction\", development: \"En développement\" },\n current: \"Vous êtes ici\",\n descriptions: {\n krizaka: \"La compagnie : nos produits, notre open source, notre histoire.\",\n orazaka: \"L’IA souveraine sur vos propres serveurs : conversation, documents, images et vidéo — et le moteur des autres produits.\",\n orochia: \"Une plateforme vidéo pour les créateurs.\",\n yasakia: \"Rencontrez de vraies personnes : des présentations, et des photos vérifiées avant que vous les voyiez.\",\n yororis: \"Un espace d’écoute avec un visage et une voix.\",\n yomizaka: \"Yomizaka lit vos baux, contrats et factures.\",\n kachizaka: \"Les pronostics entre amis — des données en direct.\",\n akinaza: \"Tenir une boutique au Québec, pour moins cher — Loi 25 dès la conception.\",\n ui: \"Composants, jetons, icônes et graphiques — web et React Native.\",\n java: \"Des briques Spring Boot sur Maven Central.\",\n motion: \"Le labo du mouvement : le mouvement du kit, joué en direct, avec ses réglages.\",\n github: \"Tous les dépôts, au grand jour.\",\n },\n signature: { company: \"Une compagnie Krizaka\", product: \"Un produit Krizaka\", \"open-source\": \"Un projet open source de Krizaka\" },\n place: \"Fait à Montréal\",\n version: \"Version\",\n },\n};\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/mascots/mascot.tsx","../src/mascots/geometry.ts"],"sourcesContent":["// The Krizaka flock on the web: one bird, one mood, drawn from ./geometry in the host's brand colours.\nimport type * as React from \"react\";\nimport { useId } from \"react\";\n\nimport { archEye, BIRDS, brow, lidEye, LIGHT, type MascotBird, type MascotMood, type MascotPalette, type MascotTone, MOOD_PARTS, OWN_PALETTES, PARCEL, SHADE, upperLid } from \"./geometry\";\n\nconst CSS = `\n.kzb-bird { transform-box: view-box; transform-origin: 60px 108px; }\n.kzb-eye { transform-box: fill-box; transform-origin: center; }\n.kzb-wing { transform-box: view-box; }\n[data-animated] .kzb-bird { animation: kzb-bob 3.6s ease-in-out infinite; }\n[data-animated] .kzb-blink { animation: kzb-blink 5.2s ease-in-out infinite; }\n[data-animated][data-mood=\"welcome\"] .kzb-wing-r { animation: kzb-wave 1.1s ease-in-out infinite alternate; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot { animation: kzb-dot 1.5s ease-in-out infinite; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(2) { animation-delay: .2s; }\n[data-animated][data-mood=\"thinking\"] .kzb-dot:nth-child(3) { animation-delay: .4s; }\n[data-animated][data-mood=\"success\"] .kzb-bird { animation: kzb-hop 1.6s cubic-bezier(.3,1.6,.5,1) 1, kzb-bob 3.6s ease-in-out 1.6s infinite; }\n[data-animated][data-mood=\"success\"] .kzb-badge { animation: kzb-pop .5s cubic-bezier(.3,1.6,.5,1) .3s both; }\n[data-animated][data-mood=\"success\"] .kzb-sparkle { animation: kzb-twinkle 2.4s ease-in-out infinite; }\n[data-animated][data-mood=\"error\"] .kzb-bird { animation: kzb-shake .5s ease-in-out .2s 2, kzb-bob 3.6s ease-in-out 1.2s infinite; }\n[data-animated][data-mood=\"empty\"] .kzb-bird { animation: kzb-sway 5s ease-in-out infinite; }\n.kzb-badge, .kzb-sparkle, .kzb-dot { transform-box: fill-box; transform-origin: center; }\n@keyframes kzb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }\n@keyframes kzb-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }\n@keyframes kzb-wave { from { transform: rotate(-8deg); } to { transform: rotate(-38deg); } }\n@keyframes kzb-dot { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }\n@keyframes kzb-hop { 0% { transform: translateY(0); } 30% { transform: translateY(-9px); } 60% { transform: translateY(0); } 100% { transform: translateY(0); } }\n@keyframes kzb-pop { from { transform: scale(0); } to { transform: scale(1); } }\n@keyframes kzb-twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }\n@keyframes kzb-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }\n@keyframes kzb-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2deg); } }\n@media (prefers-reduced-motion: reduce) {\n .kzb-bird, .kzb-blink, .kzb-wing-r, .kzb-dot, .kzb-badge, .kzb-sparkle { animation: none !important; }\n}\n`;\n\n/** The host's roles (`tone=\"brand\"`): the accent paints the bird, so it wears the product it is shown in. */\nconst BRAND: MascotPalette = {\n from: \"var(--kz-accent-2, var(--kz-accent))\",\n to: \"var(--kz-accent)\",\n wing: \"var(--kz-accent)\",\n detail: \"var(--kz-accent-2, var(--kz-accent))\",\n beak: \"var(--kz-warning)\",\n eye: \"var(--kz-text-primary)\",\n};\nconst OUTLINE = \"var(--kz-border-strong, color-mix(in srgb, currentColor 35%, transparent))\";\nconst SURFACE = \"var(--kz-surface-0)\";\n\nexport type MascotProps = Omit<React.ComponentProps<\"svg\">, \"children\"> & {\n /** Which bird of the flock: `falcon` (watch, security), `owl` (reading, documents), `duck` (building, code), `flamingo` (answers, support), `pigeon` (delivery, notifications), `lovebird` (introductions, two people who meet), `crane` (listening, a calm moment), `magpie` (the score: points, standings, trophies), `beaver` (the shop: a small business at work). */\n bird?: MascotBird;\n /** What the moment is: `welcome` (onboarding), `thinking` (a long task running), `success` (it is done), `empty` (nothing here yet), `error` (it failed). */\n mood?: MascotMood;\n /** `brand` (default): the host's accent, so the bird wears the product it is in. `own`: the bird's signature colours of the Krizaka story. */\n tone?: MascotTone;\n /** Width and height in pixels. */\n size?: number;\n /** A light idle motion and the mood's gesture. Off with `false`; always off under `prefers-reduced-motion`. */\n animated?: boolean;\n /** An accessible name (the bird becomes an image); without it the mascot is decorative. */\n title?: string;\n};\n\n/**\n * One of the nine Krizaka figures in one mood — for the moments a product speaks to a person: a welcome, a long wait,\n * a success, an empty list, an error. Drawn in the host's brand colours by default (`tone=\"own\"` for the story's).\n */\nexport function Mascot({ bird = \"owl\", mood = \"welcome\", tone = \"brand\", size = 96, animated = true, title, className, ...props }: MascotProps) {\n const uid = useId().replace(/[^a-zA-Z0-9_-]/g, \"\");\n const g = BIRDS[bird];\n const p = tone === \"own\" ? OWN_PALETTES[bird] : BRAND;\n const body = `url(#kzb-${uid})`;\n const line = { stroke: OUTLINE, strokeWidth: 1.4, strokeLinejoin: \"round\" as const };\n const eyeR = g.eyes.white || g.eyes.pupil * 1.2;\n const eyes = g.eyes.at.map((at, i) => {\n const look = mood === \"thinking\" ? 1.4 : 0;\n if (mood === \"success\") return <path key={i} d={archEye(at, eyeR * 0.85)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n if (mood === \"empty\" && g.eyes.white > 0)\n return (\n <g key={i}>\n <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />\n <circle cx={at[0]} cy={at[1] + g.eyes.pupil * 0.7} r={g.eyes.pupil} fill={SHADE} />\n <path d={upperLid(at, g.eyes.white)} fill={p.detail} {...line} />\n </g>\n );\n if (mood === \"empty\") return <path key={i} d={lidEye(at, eyeR * 0.8)} stroke={g.visor ? p.eye : OUTLINE} strokeWidth={2.2} strokeLinecap=\"round\" fill=\"none\" />;\n return (\n <g key={i} className=\"kzb-eye kzb-blink\">\n {g.eyes.white > 0 && <circle cx={at[0]} cy={at[1]} r={g.eyes.white} fill={LIGHT} {...line} />}\n <circle cx={at[0] + look} cy={at[1] - look} r={g.eyes.pupil} fill={g.visor ? p.eye : SHADE} />\n {g.eyes.white > 0 && <circle cx={at[0] + look - g.eyes.pupil * 0.35} cy={at[1] - look - g.eyes.pupil * 0.35} r={g.eyes.pupil * 0.35} fill={LIGHT} />}\n </g>\n );\n });\n const [wl, wr] = g.wings;\n return (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 120 120\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-bird={bird}\n data-mood={mood}\n data-animated={animated ? \"\" : undefined}\n className={className}\n {...(title ? { role: \"img\", \"aria-label\": title } : { \"aria-hidden\": true })}\n {...props}\n >\n <style>{CSS}</style>\n <defs>\n <linearGradient id={`kzb-${uid}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" style={{ stopColor: p.from }} />\n <stop offset=\"100%\" style={{ stopColor: p.to }} />\n </linearGradient>\n </defs>\n <ellipse cx={g.shadow[0]} cy={g.shadow[1]} rx={g.shadow[2]} ry={g.shadow[3]} fill={SHADE} opacity={0.14} />\n {mood === \"empty\" && <path d={MOOD_PARTS.tray} stroke={OUTLINE} strokeWidth={1.6} strokeDasharray=\"3 3\" strokeLinejoin=\"round\" />}\n <g className=\"kzb-bird\">\n {g.legs.map((d) => (\n <path key={d} d={d} stroke={p.beak} strokeWidth={2.6} strokeLinecap=\"round\" />\n ))}\n {g.back?.map((d) => (d.endsWith(\"Z\") ? <path key={d} d={d} fill={p.detail} {...line} /> : <path key={d} d={d} stroke={OUTLINE} strokeWidth={1.4} />))}\n {g.parcel && (\n <g {...line}>\n {g.parcel.map((d, i) => (\n <path key={d} d={d} fill={PARCEL[i]} />\n ))}\n </g>\n )}\n <path d={g.body} fill={body} {...line} />\n <path d={g.belly} fill={LIGHT} opacity={0.28} />\n {[wl, wr].map((w, i) => {\n const turn = mood === \"success\" ? (i === 0 ? 28 : -28) : mood === \"welcome\" && i === 1 ? -20 : 0;\n return (\n <g key={i} className={i === 1 ? \"kzb-wing kzb-wing-r\" : \"kzb-wing\"} style={{ transformOrigin: `${w.pivot[0]}px ${w.pivot[1]}px`, transform: turn ? `rotate(${turn}deg)` : undefined }}>\n <path d={w.d} fill={p.wing} {...line} />\n <path d={w.d} fill={SHADE} opacity={0.16} />\n </g>\n );\n })}\n {g.neck && <path d={g.neck.d} stroke={body} strokeWidth={g.neck.width} strokeLinecap=\"round\" />}\n {g.head.r > 0 && <circle cx={g.head.cx} cy={g.head.cy} r={g.head.r} fill={body} {...line} />}\n {g.details.map((d) => (\n <path key={d} d={d} fill={p.detail} {...line} />\n ))}\n {g.visor && <rect x={g.visor.x} y={g.visor.y} width={g.visor.w} height={g.visor.h} rx={4} fill={SURFACE} {...line} />}\n {eyes}\n {g.glasses && (\n <g stroke={OUTLINE} strokeWidth={1.3}>\n {g.eyes.at.map(([x, y]) => (\n <circle key={x} cx={x} cy={y} r={6.5} fill={LIGHT} fillOpacity={0.12} />\n ))}\n <path d={`M${g.eyes.at[0][0] + 6.5} ${g.eyes.at[0][1]} L${g.eyes.at[1][0] - 6.5} ${g.eyes.at[1][1]}`} />\n </g>\n )}\n {mood === \"error\" &&\n g.eyes.at.map((at, i) => <path key={i} d={brow(at, eyeR, g.eyes.at.length === 1 ? 1 : i === 0 ? -1 : 1)} stroke={OUTLINE} strokeWidth={2} strokeLinecap=\"round\" />)}\n <path d={g.beak} fill={p.beak} {...line} />\n </g>\n {mood === \"thinking\" && (\n <g>\n {MOOD_PARTS.dots.map(([cx, cy, r]) => (\n <circle key={cx} className=\"kzb-dot\" cx={cx} cy={cy} r={r} fill=\"var(--kz-text-secondary)\" />\n ))}\n </g>\n )}\n {mood === \"success\" && (\n <>\n {MOOD_PARTS.sparkles.map((d) => (\n <path key={d} className=\"kzb-sparkle\" d={d} fill={p.from} />\n ))}\n <g className=\"kzb-badge\">\n <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-success)\" />\n <path d={MOOD_PARTS.check} stroke={SURFACE} strokeWidth={2.6} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </g>\n </>\n )}\n {mood === \"error\" && (\n <g className=\"kzb-badge\">\n <circle cx={MOOD_PARTS.badge.cx} cy={MOOD_PARTS.badge.cy} r={MOOD_PARTS.badge.r} fill=\"var(--kz-danger)\" />\n <path d={MOOD_PARTS.bang.line} stroke={SURFACE} strokeWidth={2.8} strokeLinecap=\"round\" />\n <circle cx={MOOD_PARTS.bang.dot[0]} cy={MOOD_PARTS.bang.dot[1]} r={1.6} fill={SURFACE} />\n </g>\n )}\n </svg>\n );\n}\n","/**\n * The Krizaka flock — the geometry of the mascots, drawn by the web `Mascot` (`./mascot.tsx`) and the native one\n * (`../native/mascots.tsx`). Five birds that have carried the Krizaka story since the first site (the sentry falcon,\n * the owl that reads, the developer duck, the flamingo that answers, the carrier pigeon), the lovebird that\n * introduces (2026-10, with Yasakia: \"l'inséparable présente\") and the crane that listens (2026-10, with Yororis:\n * \"la grue écoute\"), the magpie that keeps the score (2026-10, with Kachizaka: \"la pie compte les points\") and the\n * beaver that builds the shop (2026-10, with Akinaza: \"le castor artisan\" — the one figure of the flock without\n * feathers: its paws are drawn as wings, its paddle tail behind it), redrawn on one 120 × 120 grid so that any figure\n * can wear any mood.\n *\n * Colours are roles, never fixed: `brand` (the default) paints a bird in the host's accent (`--kz-accent`,\n * `--kz-accent-2`), so the same falcon is blue on krizaka.com, orange in Orazaka and violet in Orochia; `own` gives\n * each bird the signature palette it has in the Krizaka story (the brand layer's exception, like the marks). Shades\n * and highlights are black and white at a low opacity over the role, so they hold in both themes.\n */\n\nexport const MASCOT_BIRDS = [\"falcon\", \"owl\", \"duck\", \"flamingo\", \"pigeon\", \"lovebird\", \"crane\", \"magpie\", \"beaver\"] as const;\nexport type MascotBird = (typeof MASCOT_BIRDS)[number];\n\nexport const MASCOT_MOODS = [\"welcome\", \"thinking\", \"success\", \"empty\", \"error\"] as const;\nexport type MascotMood = (typeof MASCOT_MOODS)[number];\n\nexport type MascotTone = \"brand\" | \"own\";\n\ntype Point = readonly [number, number];\n\nexport interface BirdGeometry {\n /** The ground shadow: centre x, y and radii. */\n readonly shadow: readonly [number, number, number, number];\n /** Legs and feet, stroked in the beak colour. */\n readonly legs: readonly string[];\n /** Drawn behind the body (tail, parcel strings). */\n readonly back?: readonly string[];\n readonly body: string;\n readonly belly: string;\n /** Left then right wing, and the point each one turns around. */\n readonly wings: readonly [{ readonly d: string; readonly pivot: Point }, { readonly d: string; readonly pivot: Point }];\n /** A neck, stroked in the body colour with this width (the flamingo). */\n readonly neck?: { readonly d: string; readonly width: number };\n /** The head: a circle. */\n readonly head: { readonly cx: number; readonly cy: number; readonly r: number };\n /** Ear tufts, a crest, a visor's frame: filled with the detail colour. */\n readonly details: readonly string[];\n /** A band behind the eyes (the falcon's visor), in the page's surface. */\n readonly visor?: { readonly x: number; readonly y: number; readonly w: number; readonly h: number };\n /** Glasses (the duck): stroked rings around the eyes. */\n readonly glasses?: boolean;\n readonly beak: string;\n /** The eyes: centres, the radius of the white, the radius of the pupil (no white when `white` is 0). */\n readonly eyes: { readonly at: readonly Point[]; readonly white: number; readonly pupil: number };\n /** The parcel the pigeon carries: its three faces. */\n readonly parcel?: readonly [string, string, string];\n}\n\nconst mirror = (d: string) => d.replace(/(-?\\d+(?:\\.\\d+)?) (-?\\d+(?:\\.\\d+)?)/g, (_, x: string, y: string) => `${120 - Number(x)} ${y}`);\n\nconst falconWing = \"M29 58 C17 68 19 88 37 86 C31 76 31 66 29 58 Z\";\nconst pigeonWing = \"M36 58 C20 50 16 80 38 84 C34 74 34 66 36 58 Z\";\n\nexport const BIRDS: Readonly<Record<MascotBird, BirdGeometry>> = {\n falcon: {\n shadow: [60, 110, 26, 3.5],\n legs: [\"M51 94 L48 108 M44 108 L52 108\", \"M69 94 L72 108 M68 108 L76 108\"],\n body: \"M30 62 C30 42 90 42 90 62 C90 88 78 98 60 98 C42 98 30 88 30 62 Z\",\n belly: \"M41 66 C41 55 79 55 79 66 C79 82 71 90 60 90 C49 90 41 82 41 66 Z\",\n wings: [\n { d: falconWing, pivot: [29, 58] },\n { d: mirror(falconWing), pivot: [91, 58] },\n ],\n head: { cx: 60, cy: 38, r: 22 },\n details: [\"M46 20 L52 10 L56 19 Z\", \"M74 20 L68 10 L64 19 Z\"],\n visor: { x: 41, y: 29, w: 38, h: 13 },\n beak: \"M54 45 L66 45 L60 57 Z\",\n eyes: { at: [[50, 35.5], [70, 35.5]], white: 0, pupil: 3.2 },\n },\n owl: {\n shadow: [60, 110, 24, 3.5],\n legs: [\"M53 100 L51 107 M47 107 L55 107\", \"M67 100 L69 107 M65 107 L73 107\"],\n body: \"M28 52 C28 20 92 20 92 52 C92 86 82 102 60 102 C38 102 28 86 28 52 Z\",\n belly: \"M42 66 C42 52 78 52 78 66 C78 86 72 94 60 94 C48 94 42 86 42 66 Z\",\n wings: [\n { d: \"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\", pivot: [29, 58] },\n { d: mirror(\"M29 58 C18 68 20 88 36 90 C32 78 32 68 29 58 Z\"), pivot: [91, 58] },\n ],\n head: { cx: 60, cy: 42, r: 0 },\n details: [\"M31 20 L47 31 L31 41 Z\", \"M89 20 L73 31 L89 41 Z\"],\n beak: \"M55 50 L65 50 L60 59 Z\",\n eyes: { at: [[47, 41], [73, 41]], white: 10, pupil: 4 },\n },\n duck: {\n shadow: [60, 110, 30, 3.5],\n legs: [],\n back: [\"M88 80 C100 76 104 66 96 62 C98 70 94 74 88 74 Z\"],\n body: \"M26 80 C26 62 94 62 94 80 C94 100 82 106 60 106 C38 106 26 100 26 80 Z\",\n belly: \"M38 84 C38 72 82 72 82 84 C82 96 74 101 60 101 C46 101 38 96 38 84 Z\",\n wings: [\n { d: \"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\", pivot: [27, 74] },\n { d: mirror(\"M27 74 C14 80 18 98 35 96 C31 88 29 80 27 74 Z\"), pivot: [93, 74] },\n ],\n head: { cx: 60, cy: 42, r: 23 },\n details: [\"M57 20 C54 11 63 8 66 14 C62 13 60 16 61 20 Z\"],\n glasses: true,\n beak: \"M43 51 C43 46 55 45 60 45 C65 45 77 46 77 51 C77 56 66 60 60 60 C54 60 43 56 43 51 Z\",\n eyes: { at: [[51, 37], [69, 37]], white: 0, pupil: 2.6 },\n },\n flamingo: {\n shadow: [60, 110, 20, 3],\n legs: [\"M56 86 L55 97 L58 108 M53 108 L62 108\", \"M65 86 L66 108 M62 108 L71 108\"],\n body: \"M38 70 C38 54 88 54 88 70 C88 86 76 90 62 90 C48 90 38 86 38 70 Z\",\n belly: \"M46 72 C46 63 80 63 80 72 C80 82 72 85 63 85 C54 85 46 82 46 72 Z\",\n wings: [\n { d: \"M42 64 C30 68 32 84 47 84 C43 76 43 70 42 64 Z\", pivot: [42, 64] },\n { d: \"M84 64 C96 68 94 84 79 84 C83 76 83 70 84 64 Z\", pivot: [84, 64] },\n ],\n neck: { d: \"M58 60 C58 42 40 34 46 22\", width: 7 },\n head: { cx: 48, cy: 18, r: 11 },\n details: [],\n beak: \"M38 16 C28 18 29 28 24 33 C33 28 38 23 40 20 Z\",\n eyes: { at: [[46, 15]], white: 3.2, pupil: 1.8 },\n },\n pigeon: {\n shadow: [60, 112, 22, 3],\n legs: [\"M52 94 L51 99 M48 99 L54 99\", \"M68 94 L69 99 M66 99 L72 99\"],\n back: [\"M53 98 L52 103\", \"M67 98 L68 103\", \"M30 68 C16 72 14 62 28 56 C17 57 15 49 32 48 Z\"],\n body: \"M34 64 C34 44 86 44 86 64 C86 86 74 96 60 96 C46 96 34 86 34 64 Z\",\n belly: \"M43 68 C43 57 77 57 77 68 C77 82 70 88 60 88 C50 88 43 82 43 68 Z\",\n wings: [\n { d: pigeonWing, pivot: [36, 58] },\n { d: mirror(pigeonWing), pivot: [84, 58] },\n ],\n head: { cx: 60, cy: 36, r: 19 },\n details: [\"M54 18 C56 12 64 12 66 18 C63 16 57 16 54 18 Z\"],\n beak: \"M55 41 L65 41 L60 50 Z\",\n eyes: { at: [[52, 33], [68, 33]], white: 5, pupil: 2.4 },\n parcel: [\"M60 100 L71 105 L60 110 L49 105 Z\", \"M49 105 L60 110 L60 118 L49 113 Z\", \"M71 105 L60 110 L60 118 L71 113 Z\"],\n },\n /**\n * The lovebird — the inseparable that introduces two people. A plump little parrot: a short tail, a round head\n * with its coloured face (the detail colour), the white eye-rings of the species and a short hooked beak.\n */\n lovebird: {\n shadow: [60, 110, 23, 3.5],\n legs: [\"M53 96 L52 106 M48 106 L56 106\", \"M67 96 L68 106 M64 106 L72 106\"],\n back: [\"M74 90 C82 98 88 104 95 103 C91 98 86 91 82 84 Z\"],\n body: \"M32 66 C32 46 88 46 88 66 C88 90 76 100 60 100 C44 100 32 90 32 66 Z\",\n belly: \"M42 70 C42 59 78 59 78 70 C78 85 70 92 60 92 C50 92 42 85 42 70 Z\",\n wings: [\n { d: \"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\", pivot: [33, 60] },\n { d: mirror(\"M33 60 C20 68 22 88 40 90 C35 80 34 70 33 60 Z\"), pivot: [87, 60] },\n ],\n head: { cx: 60, cy: 38, r: 21 },\n details: [\"M43 40 C42 28 51 22 60 22 C69 22 78 28 77 40 C76 50 68 55 60 55 C52 55 44 50 43 40 Z\"],\n beak: \"M55 44 C55 40 65 40 65 44 C65 50 62 54 60 55 C58 54 55 50 55 44 Z\",\n eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 },\n },\n /**\n * The crane — the one that listens: posed, unhurried, drawn in one line. A tall wader seen in profile, standing still\n * on two straight legs, the neck a single stroke up to a small head with its crown (the detail colour) and a long,\n * straight beak; the folded wings low on its back. The flamingo bends and answers; the crane stands and listens.\n */\n crane: {\n shadow: [62, 110, 20, 3],\n legs: [\"M56 87 L55 108 M51 108 L59 108\", \"M67 87 L68 108 M64 108 L73 108\"],\n body: \"M40 66 C38 54 84 54 86 68 C88 82 76 88 62 88 C48 88 40 80 40 66 Z\",\n belly: \"M48 70 C48 62 78 62 79 70 C80 79 72 84 63 84 C54 84 48 79 48 70 Z\",\n wings: [\n { d: \"M44 62 C33 68 35 82 49 83 C45 76 45 69 44 62 Z\", pivot: [44, 62] },\n { d: \"M82 62 C93 67 96 82 80 84 C83 76 83 69 82 62 Z\", pivot: [82, 62] },\n ],\n neck: { d: \"M52 62 C48 47 52 37 48 26\", width: 6 },\n head: { cx: 47, cy: 21, r: 8.5 },\n details: [\"M41 16.5 C42 11 52 11 53 16.5 C50 14.6 44 14.6 41 16.5 Z\"],\n beak: \"M40.5 18.5 L19 22.5 L40.5 25.5 Z\",\n eyes: { at: [[45.5, 19.5]], white: 2.8, pupil: 1.6 },\n },\n /**\n * The magpie — the one that keeps the score: it counts the points, remembers every trophy and chatters with the\n * league. A sleek pied bird: a dark cap (the detail colour) over a round head, a white belly, a long tail behind it\n * (the detail colour), a short straight beak. It watches no one (that is the falcon): it counts.\n */\n magpie: {\n shadow: [58, 110, 24, 3.5],\n legs: [\"M53 95 L51 107 M47 107 L55 107\", \"M65 95 L67 107 M63 107 L71 107\"],\n back: [\"M72 88 C84 94 96 102 106 108 C104 111 100 112 97 110 C88 104 78 98 68 94 Z\"],\n body: \"M34 64 C34 44 84 44 84 64 C84 88 72 98 58 98 C44 98 34 88 34 64 Z\",\n belly: \"M43 70 C43 60 73 60 73 70 C73 84 67 90 58 90 C49 90 43 84 43 70 Z\",\n wings: [\n { d: \"M35 58 C22 64 22 84 40 88 C36 78 35 68 35 58 Z\", pivot: [35, 58] },\n { d: \"M83 58 C96 64 96 84 78 88 C82 78 83 68 83 58 Z\", pivot: [83, 58] },\n ],\n head: { cx: 58, cy: 36, r: 19 },\n details: [\"M40 34 C40 22 48 16 58 16 C68 16 76 22 76 34 C70 29 64 28 58 28 C52 28 46 29 40 34 Z\"],\n beak: \"M53 42 L63 42 L58 50 Z\",\n eyes: { at: [[50, 35], [66, 35]], white: 4.4, pupil: 2.3 },\n },\n /**\n * The beaver — the artisan that builds the shop, Akinaza's figure (and Canada's). Round and sturdy, sitting up: two\n * round ears and a nose (the detail colour), the two front teeth (the beak colour), small paws drawn as its wings,\n * and its flat paddle tail lying behind it. No feathers, the same moods.\n */\n beaver: {\n shadow: [62, 110, 30, 3.5],\n legs: [\"M50 100 L48 106 M43 106 L53 106\", \"M70 100 L72 106 M67 106 L77 106\"],\n back: [\"M74 94 C86 92 104 96 108 103 C106 110 90 111 76 104 Z\"],\n body: \"M30 72 C30 48 90 48 90 72 C90 96 78 104 60 104 C42 104 30 96 30 72 Z\",\n belly: \"M42 76 C42 64 78 64 78 76 C78 92 70 98 60 98 C50 98 42 92 42 76 Z\",\n wings: [\n { d: \"M38 66 C28 70 30 84 42 84 C44 78 42 72 38 66 Z\", pivot: [38, 66] },\n { d: \"M82 66 C92 70 90 84 78 84 C76 78 78 72 82 66 Z\", pivot: [82, 66] },\n ],\n head: { cx: 60, cy: 40, r: 22 },\n details: [\"M37 30 C33 23 39 16 46 20 C43 23 40 26 37 30 Z\", \"M83 30 C87 23 81 16 74 20 C77 23 80 26 83 30 Z\", \"M55 45 C55 42 65 42 65 45 C65 48 62 49 60 49 C58 49 55 48 55 45 Z\"],\n beak: \"M56 51 H64 V58 C64 59.5 63 60 62 60 H58 C57 60 56 59.5 56 58 Z\",\n eyes: { at: [[51, 36], [69, 36]], white: 4.6, pupil: 2.4 },\n },\n};\n\n/** What a mood adds around the bird: a badge, a thought, an empty tray. */\nexport const MOOD_PARTS = {\n /** The badge of `success` and `error`, top right. */\n badge: { cx: 98, cy: 22, r: 11 },\n check: \"M92.5 22.5 L96.8 26.6 L103.6 18.4\",\n bang: { line: \"M98 15.5 L98 23.5\", dot: [98, 28] as Point },\n /** `thinking`: three dots rising to the right of the head. */\n dots: [\n [88, 26, 2.6],\n [96, 19, 3.2],\n [105, 11, 3.8],\n ] as const,\n /** `empty`: an open tray beside the bird. */\n tray: \"M90 96 L110 96 L107 108 L93 108 Z\",\n /** `success`: two sparkles. */\n sparkles: [\"M16 26 L18 31 L23 33 L18 35 L16 40 L14 35 L9 33 L14 31 Z\", \"M104 52 L105.2 55 L108 56 L105.2 57 L104 60 L102.8 57 L100 56 L102.8 55 Z\"],\n} as const;\n\n/** The happy eye of `success`: an arch. */\nexport const archEye = ([x, y]: Point, r: number) => `M${x - r} ${y + r * 0.45} Q${x} ${y - r * 1.15} ${x + r} ${y + r * 0.45}`;\n/** The lowered lid of `empty`: a line across the eye. */\nexport const lidEye = ([x, y]: Point, r: number) => `M${x - r} ${y + 0.4} L${x + r} ${y + 0.4}`;\n/** The heavy lid of `empty` over an eye with a white: its upper half. */\nexport const upperLid = ([x, y]: Point, r: number) => `M${x - r} ${y} A${r} ${r} 0 0 1 ${x + r} ${y} Z`;\n/** The worried brow of `error`, above one eye (`side` -1 left, 1 right). */\nexport const brow = ([x, y]: Point, r: number, side: number) =>\n `M${x - r * 1.1} ${y - r * 1.25 - (side < 0 ? 0 : r * 0.7)} L${x + r * 1.1} ${y - r * 1.5 - (side < 0 ? r * 0.7 : 0)}`;\n\nexport interface MascotPalette {\n /** Top and bottom of the body gradient. */\n readonly from: string;\n readonly to: string;\n /** Wings and details (tufts, crest). */\n readonly wing: string;\n readonly detail: string;\n /** Beak and feet. */\n readonly beak: string;\n /** The pupils (and the falcon's visor lights). */\n readonly eye: string;\n}\n\n/** The signature palettes of the Krizaka story (`tone=\"own\"`), from the first drawings of each bird. */\nexport const OWN_PALETTES: Readonly<Record<MascotBird, MascotPalette>> = {\n falcon: { from: \"#ff9f00\", to: \"#ff2a00\", wing: \"#d84315\", detail: \"#b4320d\", beak: \"#ffb300\", eye: \"#00c8d4\" },\n owl: { from: \"#a78bfa\", to: \"#6d28d9\", wing: \"#7c3aed\", detail: \"#5b21b6\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n duck: { from: \"#f43f5e\", to: \"#be123c\", wing: \"#db2777\", detail: \"#9f1239\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n flamingo: { from: \"#f9a8d4\", to: \"#db2777\", wing: \"#ec4899\", detail: \"#be185d\", beak: \"#fbbf24\", eye: \"#1f2937\" },\n pigeon: { from: \"#22d3ee\", to: \"#6366f1\", wing: \"#a855f7\", detail: \"#4338ca\", beak: \"#f59e0b\", eye: \"#1f2937\" },\n lovebird: { from: \"#6ee7b7\", to: \"#059669\", wing: \"#047857\", detail: \"#fb7185\", beak: \"#f97316\", eye: \"#1f2937\" },\n // The sandhill crane (grue du Canada): sand-grey plumage, its red crown, dark legs and beak.\n crane: { from: \"#ebe3d6\", to: \"#9c8f80\", wing: \"#7d7266\", detail: \"#dc2626\", beak: \"#44403c\", eye: \"#1f2937\" },\n // The Eurasian magpie (pie bavarde): slate and ink, the cobalt sheen of its wings, a dark beak.\n magpie: { from: \"#64748b\", to: \"#1e293b\", wing: \"#1d4ed8\", detail: \"#0f172a\", beak: \"#334155\", eye: \"#1f2937\" },\n // The North American beaver (castor du Canada): warm brown fur, a dark nose and tail, its orange front teeth.\n beaver: { from: \"#b07a4a\", to: \"#6b4226\", wing: \"#5c3a21\", detail: \"#3f2716\", beak: \"#f59e0b\", eye: \"#1f2937\" },\n};\n\n/** Fixed light and shade, laid at a low opacity over a role (they read on both themes). */\nexport const LIGHT = \"#ffffff\";\nexport const SHADE = \"#000000\";\n/** The parcel's faces (pigeon). */\nexport const PARCEL = [\"#f59e0b\", \"#d97706\", \"#b45309\"] as const;\n"],"mappings":"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","names":[]}
|