@krizaka/ui 3.5.0 → 3.7.0

package/registry/index.json

@@ -1,6 +1,416 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.5.0",
+  "version": "3.7.0",
+  "templatePurposes": {
+    "convince": {
+      "title": "Convince",
+      "useWhen": "You come here when a visitor must decide: a landing, a product, a price, a comparison, a proof."
+    },
+    "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."
+    },
+    "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."
+    },
+    "act": {
+      "title": "Act",
+      "useWhen": "You come here when a person must do something once: reach the team, sign in or up, set up, pay."
+    },
+    "operate": {
+      "title": "Operate",
+      "useWhen": "You come here when a person works every day: a dashboard, a console with a table, settings, an app shell."
+    },
+    "converse": {
+      "title": "Converse",
+      "useWhen": "You come here when people talk: an inbox, a chat, comments, a notifications centre."
+    },
+    "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."
+    }
+  },
+  "templates": [
+    {
+      "component": "landing-page",
+      "platform": "web",
+      "name": "krizaka",
+      "title": "Krizaka",
+      "description": "The studio's landing: the promise, the console alive, proofs, three products in a bento.",
+      "purpose": "convince",
+      "why": "A visitor gets the promise in one screen, the product alive, the proofs and one call to act."
+    },
+    {
+      "component": "marketing-layout",
+      "platform": "web",
+      "name": "pricing",
+      "title": "Pricing and credits",
+      "description": "Plans side by side, what a credit buys, the credits left.",
+      "purpose": "convince",
+      "why": "A buyer compares plans and sees what a credit buys before deciding to commit."
+    },
+    {
+      "component": "marketing-layout",
+      "platform": "web",
+      "name": "product-page",
+      "title": "A product page",
+      "description": "Orazaka's page: hero with facts, reasons, decisions, the owl's promise, the closing call.",
+      "purpose": "convince",
+      "why": "A visitor decides whether a product is for them: the promise first, the proof and the call after."
+    },
+    {
+      "component": "pricing-page",
+      "platform": "web",
+      "name": "credits",
+      "title": "Orazaka plans and credits",
+      "description": "Three plans, the comparison, credits and two questions.",
+      "purpose": "convince",
+      "why": "A buyer compares three plans side by side and answers the last objections before choosing."
+    },
+    {
+      "component": "product-page",
+      "platform": "web",
+      "name": "orazaka",
+      "title": "Orazaka",
+      "description": "The sovereign AI engine's overview, in its orange.",
+      "purpose": "convince",
+      "why": "A visitor understands what a product does, the traps it avoids and the decisions behind it, then acts."
+    },
+    {
+      "component": "catalogue-page",
+      "platform": "web",
+      "name": "components",
+      "title": "Components",
+      "description": "Krizaka UI's components: search, platform filters, compact link cards.",
+      "purpose": "explain",
+      "why": "A reader looking for the right piece scans a filterable catalogue instead of reading every page."
+    },
+    {
+      "component": "changelog-page",
+      "platform": "web",
+      "name": "releases",
+      "title": "Krizaka UI releases",
+      "description": "Two releases with their changes by kind.",
+      "purpose": "explain",
+      "why": "A user checks what changed in each release and whether it concerns them."
+    },
+    {
+      "component": "component-page",
+      "platform": "web",
+      "name": "button",
+      "title": "Button",
+      "description": "The page of the Button, with its preview and its sections.",
+      "purpose": "explain",
+      "why": "A builder decides whether a component fits, sees it live and copies it, all on one page."
+    },
+    {
+      "component": "docs-article-page",
+      "platform": "web",
+      "name": "cli",
+      "title": "Orazaka's CLI",
+      "description": "An article with its pages, breadcrumb, facts, contents and pager.",
+      "purpose": "explain",
+      "why": "A reader follows one article, always knowing where they are, what it covers and what comes next."
+    },
+    {
+      "component": "docs-article-page",
+      "platform": "web",
+      "name": "faq",
+      "title": "FAQ",
+      "description": "Questions as disclosures, each with a short answer, the contents beside them.",
+      "purpose": "explain",
+      "why": "A reader finds the one answer they came for without reading a page."
+    },
+    {
+      "component": "docs-hub-page",
+      "platform": "web",
+      "name": "krizaka",
+      "title": "krizaka.com/docs",
+      "description": "The five collections, a quick start, the most read pages, what is new.",
+      "purpose": "explain",
+      "why": "A newcomer picks a collection, starts quickly and sees what is new, from one hub."
+    },
+    {
+      "component": "how-it-works-page",
+      "platform": "web",
+      "name": "orazaka",
+      "title": "Orazaka's journey",
+      "description": "Install, guard, answer — each with its command.",
+      "purpose": "explain",
+      "why": "A reader grasps a process as a few steps, each with the command that does it."
+    },
+    {
+      "component": "legal-page",
+      "platform": "web",
+      "name": "privacy",
+      "title": "Privacy policy",
+      "description": "A summary and three sections with their contents.",
+      "purpose": "explain",
+      "why": "A person finds a commitment in plain words, with a summary first and the detail by section."
+    },
+    {
+      "component": "marketing-layout",
+      "platform": "web",
+      "name": "docs-hub",
+      "title": "A documentation hub",
+      "description": "Groups of compact link cards under the hero.",
+      "purpose": "explain",
+      "why": "A newcomer finds the right documentation from one page of grouped entry points."
+    },
+    {
+      "component": "detail-layout",
+      "platform": "web",
+      "name": "video",
+      "title": "A video",
+      "description": "Orochia's video page: thumbnail, status, facts, tabs and the sales beside.",
+      "purpose": "show",
+      "why": "A viewer sees the object itself first, with its facts and the actions that concern it beside it."
+    },
+    {
+      "component": "gallery-page",
+      "platform": "web",
+      "name": "made-here",
+      "title": "Made on this Mac",
+      "description": "Images Orazaka generated locally, with their prompt and seed.",
+      "purpose": "show",
+      "why": "A visitor browses real results, each with how it was made."
+    },
+    {
+      "component": "longform-page",
+      "platform": "web",
+      "name": "case-study",
+      "title": "Case study",
+      "description": "A customer's situation, what changed and the figures that prove it, in chapters.",
+      "purpose": "show",
+      "why": "A prospect trusts a result they can read: the before, the change, the proof in numbers."
+    },
+    {
+      "component": "longform-page",
+      "platform": "web",
+      "name": "story",
+      "title": "Our story",
+      "description": "Krizaka's story in chapters, a pull quote and the flamingo's rule.",
+      "purpose": "show",
+      "why": "A reader follows a story in chapters, at their own pace, with a break for the key line."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "feed",
+      "title": "Feed",
+      "description": "A vertical feed: one clip per screen, the action rail on the right, the caption bottom-left; the one in view plays.",
+      "purpose": "show",
+      "why": "A person watches what is new one clip at a time, with every action under the thumb."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "profile",
+      "title": "Profile",
+      "description": "The photo and its ring, the facts, the interests.",
+      "purpose": "show",
+      "why": "A person is recognised at a glance: the photo first, then the facts and interests that start a conversation."
+    },
+    {
+      "component": "auth-layout",
+      "platform": "web",
+      "name": "onboarding",
+      "title": "Onboarding",
+      "description": "The steps in words above the current step's form.",
+      "purpose": "act",
+      "why": "A new person completes a setup one step at a time, knowing how many remain."
+    },
+    {
+      "component": "auth-layout",
+      "platform": "web",
+      "name": "sign-in",
+      "title": "Orochia · sign in",
+      "description": "The brand panel with the promise and a creator's words, email and password, a passkey.",
+      "purpose": "act",
+      "why": "A returning person signs in fast, with the product's promise beside the form."
+    },
+    {
+      "component": "contact-page",
+      "platform": "web",
+      "name": "team",
+      "title": "Talk to the team",
+      "description": "Channels, the form and what happens next.",
+      "purpose": "act",
+      "why": "A visitor reaches a human by the channel they prefer and learns what happens after they write."
+    },
+    {
+      "component": "detail-layout",
+      "platform": "web",
+      "name": "checkout",
+      "title": "Tip checkout",
+      "description": "Who is paid, the amount in one tap, an optional word, the total beside the pay button.",
+      "purpose": "act",
+      "why": "A person pays in a few taps and sees the exact total before committing."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "auth",
+      "title": "Sign in",
+      "description": "The mark, two fields, the main action pinned.",
+      "purpose": "act",
+      "why": "A person signs in with the least typing: the brand, two fields, the main action pinned above the keyboard."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "map",
+      "title": "Map",
+      "description": "The map fills the screen; a marker opens its place in a bottom sheet with the one action.",
+      "purpose": "act",
+      "why": "A person chooses a place by where it is, with every marker also a named button."
+    },
+    {
+      "component": "split-view",
+      "platform": "web",
+      "name": "nearby",
+      "title": "Find a place nearby",
+      "description": "The map is the page; the list beside it says the same in words and moves with it.",
+      "purpose": "act",
+      "why": "A person picks a place by where it is, with the list as an equal way in."
+    },
+    {
+      "component": "app-shell",
+      "platform": "web",
+      "name": "admin-console",
+      "title": "Administration console",
+      "description": "A review queue in a console: sections, counts and a sortable table with bulk actions (cards on a phone).",
+      "purpose": "operate",
+      "why": "An administrator works a queue: scans it, sorts it and acts on many rows at once."
+    },
+    {
+      "component": "app-shell",
+      "platform": "web",
+      "name": "orochia-studio",
+      "title": "Orochia studio",
+      "description": "Elena's home in the creator studio: the shell around this week's figures, the payout, the auction and the sales.",
+      "purpose": "operate",
+      "why": "A creator moves between the sections of an app and reads this week's figures at home."
+    },
+    {
+      "component": "dashboard-layout",
+      "platform": "web",
+      "name": "orazaka-eric",
+      "title": "Orazaka · Eric's console",
+      "description": "An accountant's on-premise console: requests, latency, credits, running jobs and packs, the period in a chip group.",
+      "purpose": "operate",
+      "why": "An operator reads the key figures at a glance and acts on what runs, for the period they chose."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "app-shell",
+      "title": "App shell",
+      "description": "A header, a section's content, the tab bar.",
+      "purpose": "operate",
+      "why": "A person moves between the main sections of the app with one thumb, the tab bar always in reach."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "settings",
+      "title": "Settings",
+      "description": "Sections of switches that apply at once.",
+      "purpose": "operate",
+      "why": "A person changes a preference and sees it apply at once, grouped by what it concerns."
+    },
+    {
+      "component": "settings-layout",
+      "platform": "web",
+      "name": "account",
+      "title": "Account settings",
+      "description": "Profile and notifications, each with its own save; the sections as chips on a phone.",
+      "purpose": "operate",
+      "why": "A person changes one setting at a time, saves it at once and knows where each lives."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "chat",
+      "title": "Chat",
+      "description": "The person, the messages, the composer.",
+      "purpose": "converse",
+      "why": "A person reads the thread and answers from the composer, which stays in reach."
+    },
+    {
+      "component": "screen",
+      "platform": "native",
+      "name": "notifications",
+      "title": "Notifications",
+      "description": "What happened, newest first and by day, with mark-all-as-read as a button.",
+      "purpose": "converse",
+      "why": "A person catches up on what happened without hunting for it."
+    },
+    {
+      "component": "split-view",
+      "platform": "web",
+      "name": "messages",
+      "title": "Messages",
+      "description": "A creator's inbox: threads beside the open one, a reply box at its foot.",
+      "purpose": "converse",
+      "why": "A person reads a thread and replies without leaving the list of conversations."
+    },
+    {
+      "component": "split-view",
+      "platform": "web",
+      "name": "notifications",
+      "title": "Notifications centre",
+      "description": "What happened, newest first and grouped by day; the selected one opens beside the list.",
+      "purpose": "converse",
+      "why": "A person catches up on what happened and acts on one item without losing the list."
+    },
+    {
+      "component": "empty-state",
+      "platform": "web",
+      "name": "library",
+      "title": "An empty page",
+      "description": "A page with nothing in it yet: the bird, what will fill it, the first action.",
+      "purpose": "recover",
+      "why": "A person facing an empty page knows what belongs here and how to start."
+    },
+    {
+      "component": "error-page",
+      "platform": "web",
+      "name": "not-found",
+      "title": "Not found",
+      "description": "The pigeon, a search and three ways back.",
+      "purpose": "recover",
+      "why": "A lost visitor gets back on track with a search and a few ways out, never a dead end."
+    },
+    {
+      "component": "status-page",
+      "platform": "web",
+      "name": "building",
+      "title": "Under construction",
+      "description": "Yazakia on its way: progress and how to hear about it.",
+      "purpose": "recover",
+      "why": "A visitor learns honestly what is coming, how far it is and how to hear about it."
+    },
+    {
+      "component": "status-page",
+      "platform": "web",
+      "name": "maintenance",
+      "title": "Planned maintenance",
+      "description": "What is paused until when, and what still works.",
+      "purpose": "recover",
+      "why": "A person learns what is down, until when, and what they can still do."
+    },
+    {
+      "component": "status-page",
+      "platform": "web",
+      "name": "operational",
+      "title": "Status",
+      "description": "Three services, one slower than usual.",
+      "purpose": "recover",
+      "why": "A person checks in one look whether the service works and which part is slow."
+    }
+  ],
   "items": [
     {
       "name": "achievement",
@@ -109,7 +519,8 @@
         "tailwind-variants@^3.3.1"
       ],
       "registryDependencies": [
-        "cn"
+        "cn",
+        "skip-link"
       ]
     },
     {
@@ -656,7 +1067,7 @@
         "native": 7
       },
       "dependencies": [
-        "@krizaka/intl@^0.1.1",
+        "@krizaka/intl@^0.2.0",
         "tailwind-variants@^3.3.1"
       ],
       "registryDependencies": [
@@ -710,7 +1121,7 @@
       "category": "layouts",
       "platforms": "web",
       "examples": {
-        "web": 2,
+        "web": 3,
         "native": 0
       },
       "dependencies": [
@@ -749,7 +1160,7 @@
       "category": "templates",
       "platforms": "web",
       "examples": {
-        "web": 1,
+        "web": 2,
         "native": 0
       },
       "dependencies": [],
@@ -829,7 +1240,7 @@
       "category": "feedback",
       "platforms": "both",
       "examples": {
-        "web": 3,
+        "web": 4,
         "native": 1
       },
       "dependencies": [
@@ -905,7 +1316,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/intl@^0.1.1",
+        "@krizaka/intl@^0.2.0",
         "tailwind-variants@^3.3.1"
       ],
       "registryDependencies": [
@@ -948,7 +1359,7 @@
         "native": 6
       },
       "dependencies": [
-        "@krizaka/intl@^0.1.1",
+        "@krizaka/intl@^0.2.0",
         "@tanstack/react-form@1.33.5"
       ],
       "registryDependencies": [
@@ -1256,8 +1667,8 @@
       "category": "feedback",
       "platforms": "both",
       "examples": {
-        "web": 6,
-        "native": 2
+        "web": 7,
+        "native": 3
       },
       "dependencies": [
         "tailwind-variants@^3.3.1"
@@ -1276,7 +1687,7 @@
       "category": "templates",
       "platforms": "web",
       "examples": {
-        "web": 1,
+        "web": 2,
         "native": 0
       },
       "dependencies": [],
@@ -1300,7 +1711,7 @@
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.5.0",
+        "@krizaka/tokens@^3.7.0",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -1324,7 +1735,9 @@
       "dependencies": [
         "tailwind-variants@^3.3.1"
       ],
-      "registryDependencies": []
+      "registryDependencies": [
+        "skip-link"
+      ]
     },
     {
       "name": "marquee",
@@ -1790,14 +2203,14 @@
       "name": "pull-to-refresh",
       "type": "native",
       "title": "Pull to refresh",
-      "summary": "The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList.",
-      "description": "The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList.",
+      "summary": "The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList — or `BrandedRefresh`, where the product's own mark is drawn as you pull and turns while it refreshes.",
+      "description": "The platform's pull to refresh in the theme's accent, for any ScrollView or FlatList — or `BrandedRefresh`, where the product's own mark is drawn as you pull and turns while it refreshes.",
       "status": "beta",
       "category": "feedback",
       "platforms": "native",
       "examples": {
         "web": 0,
-        "native": 1
+        "native": 2
       },
       "dependencies": [],
       "registryDependencies": []
@@ -1827,14 +2240,14 @@
       "name": "screen",
       "type": "native",
       "title": "Screen",
-      "summary": "A screen of the app — a header, the content (scrolling, rising with the keyboard), a footer — and the templates built on it: app shell, sign-in, profile, feed, chat, settings.",
-      "description": "A screen of the app — a header, the content (scrolling, rising with the keyboard), a footer — and the templates built on it: app shell, sign-in, profile, feed, chat, settings.",
+      "summary": "A screen of the app — a header, the content (scrolling, rising with the keyboard), a footer — and the templates built on it: app shell, sign-in, profile, feed, chat, settings, a map, notifications.",
+      "description": "A screen of the app — a header, the content (scrolling, rising with the keyboard), a footer — and the templates built on it: app shell, sign-in, profile, feed, chat, settings, a map, notifications.",
       "status": "beta",
       "category": "layout",
       "platforms": "native",
       "examples": {
         "web": 0,
-        "native": 6
+        "native": 8
       },
       "dependencies": [],
       "registryDependencies": []
@@ -1966,6 +2379,24 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "skip-link",
+      "type": "primitive",
+      "title": "Skip link",
+      "summary": "The first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.",
+      "description": "The first tab stop of a page: a link that skips the navigation and lands on the content — hidden until it is focused.",
+      "status": "stable",
+      "category": "navigation",
+      "platforms": "web",
+      "examples": {
+        "web": 1,
+        "native": 0
+      },
+      "dependencies": [
+        "tailwind-variants@^3.3.1"
+      ],
+      "registryDependencies": []
+    },
     {
       "name": "slider",
       "type": "primitive",
@@ -2023,6 +2454,22 @@
       ],
       "registryDependencies": []
     },
+    {
+      "name": "splash-handoff",
+      "type": "native",
+      "title": "Splash hand-off",
+      "summary": "The static native splash dissolves into the product's animated mark until the first screen is ready — same place, same size, same background, no flash.",
+      "description": "The static native splash dissolves into the product's animated mark until the first screen is ready — same place, same size, same background, no flash.",
+      "status": "beta",
+      "category": "feedback",
+      "platforms": "native",
+      "examples": {
+        "web": 0,
+        "native": 1
+      },
+      "dependencies": [],
+      "registryDependencies": []
+    },
     {
       "name": "split-view",
       "type": "primitive",
@@ -2033,7 +2480,7 @@
       "category": "layouts",
       "platforms": "web",
       "examples": {
-        "web": 2,
+        "web": 4,
         "native": 0
       },
       "dependencies": [
@@ -2087,7 +2534,7 @@
       "category": "templates",
       "platforms": "web",
       "examples": {
-        "web": 2,
+        "web": 3,
         "native": 0
       },
       "dependencies": [],
@@ -2357,7 +2804,7 @@
       "title": "Tree view",
       "summary": "A hierarchy the keyboard walks — the ARIA tree: one tab stop, the arrows move and open, a letter jumps, branches load on demand.",
       "description": "A hierarchy the keyboard walks — the ARIA tree: one tab stop, the arrows move and open, a letter jumps, branches load on demand.",
-      "status": "beta",
+      "status": "deprecated",
       "category": "navigation",
       "platforms": "web",
       "examples": {
@@ -2401,6 +2848,29 @@
       "dependencies": [],
       "registryDependencies": []
     },
+    {
+      "name": "vertical-video",
+      "type": "primitive",
+      "title": "Vertical video",
+      "summary": "A 9:16 short video with the action rail of a short-video feed — follow, like, comments, share, your own tip button — and the creator's caption over the picture; `ShortFeed` stacks them as a snap-scrolling feed that plays the one in view.",
+      "description": "A 9:16 short video with the action rail of a short-video feed — follow, like, comments, share, your own tip button — and the creator's caption over the picture; `ShortFeed` stacks them as a snap-scrolling feed that plays the one in view.",
+      "status": "beta",
+      "category": "media",
+      "platforms": "both",
+      "examples": {
+        "web": 2,
+        "native": 1
+      },
+      "dependencies": [
+        "@krizaka/intl@^0.2.0"
+      ],
+      "registryDependencies": [
+        "avatar",
+        "button",
+        "cn",
+        "verified-badge"
+      ]
+    },
     {
       "name": "video-player",
       "type": "primitive",