@krizaka/ui 3.10.0 → 3.11.0

package/dist/blocks.css

@@ -247,11 +247,18 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   text-decoration: none;
   color: var(--kz-text-primary);
 }
-.kz-link-card[data-layout="stack"] { grid-template-columns: minmax(0, 1fr); gap: 12px; }
+.kz-link-card[data-layout="stack"] { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
+.kz-link-card[data-layout="stack"] > .kz-block-icon { align-self: flex-start; }
+.kz-link-card[data-layout="stack"] > .kz-link-card-body { flex: 1; }
 .kz-link-card:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
 .kz-link-card > .kz-block-icon { grid-row: span 3; }
 .kz-link-card[data-layout="stack"] > .kz-block-icon { grid-row: auto; }
-.kz-link-card-body { display: grid; gap: 5px; min-width: 0; }
+.kz-link-card-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; align-self: stretch; }
+.kz-link-card:not([data-layout="stack"]) > .kz-block-icon + .kz-link-card-body { grid-column: 2; grid-row: 1 / span 3; }
+/* The foot (facts + the way in) is pinned to the bottom of a card taller than its text, so a row of cards at one height
+   keeps its status and its link on one line. `data-footer="top"` keeps them under the text. */
+.kz-link-card-foot { display: grid; gap: 5px; margin-top: auto; }
+.kz-link-card[data-footer="top"] .kz-link-card-foot { margin-top: 0; }
 .kz-link-card-meta { margin: 0; font-family: var(--kz-font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kz-hue-text, var(--kz-accent-text)); }
 .kz-link-card-title { margin: 0; font-family: var(--kz-font-display); font-size: 16.5px; font-weight: 750; letter-spacing: -0.012em; line-height: 1.3; color: var(--kz-text-primary); }
 .kz-link-card-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--kz-text-secondary); }

package/dist/link-card.d.ts

@@ -26,10 +26,16 @@ type LinkCardProps = Omit<React.ComponentProps<"a">, "title" | "href"> & {
      * @default "row"
      */
     layout?: "row" | "stack";
+    /**
+     * Where the facts (`extra`) and the way in (`cta`) sit when the card is taller than its text — a row of cards at one
+     * height: `bottom` pins them to the card's foot, so they share a line across the row; `top` leaves them under the text.
+     * @default "bottom"
+     */
+    footerAlign?: "bottom" | "top";
     /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */
     linkAs?: LinkComponent;
 };
 /** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */
-declare function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title, layout, linkAs, className, ...props }: LinkCardProps): React.JSX.Element;
+declare function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title, layout, footerAlign, linkAs, className, ...props }: LinkCardProps): React.JSX.Element;
 
 export { LinkCard, type LinkCardProps, LinkComponent };

package/dist/link-card.js

@@ -12,7 +12,7 @@ import {
 
 // src/link-card/link-card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = "h3", layout = "row", linkAs, className, ...props }) {
+function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = "h3", layout = "row", footerAlign = "bottom", linkAs, className, ...props }) {
   const external = isExternal(href);
   return /* @__PURE__ */ jsxs(
     BlockLink,
@@ -23,6 +23,7 @@ function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: T
       className: cn("kz-block-card kz-link-card", className),
       "data-kz-light": "",
       "data-layout": layout === "row" ? void 0 : layout,
+      "data-footer": footerAlign === "top" ? "top" : void 0,
       ...props,
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "kz-block-icon", "aria-hidden": true, children: icon }),
@@ -30,10 +31,12 @@ function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: T
           meta && /* @__PURE__ */ jsx("p", { className: "kz-link-card-meta", children: meta }),
           /* @__PURE__ */ jsx(Title, { className: "kz-link-card-title", children: title }),
           description && /* @__PURE__ */ jsx("p", { className: "kz-link-card-text", children: description }),
-          extra && /* @__PURE__ */ jsx("div", { className: "kz-link-card-extra", children: extra }),
-          (cta || external) && /* @__PURE__ */ jsxs("span", { className: "kz-link-card-cta", children: [
-            cta,
-            external ? /* @__PURE__ */ jsx(ExternalGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowGlyph, { className: "h-3.5 w-3.5" })
+          (extra || cta || external) && /* @__PURE__ */ jsxs("div", { className: "kz-link-card-foot", children: [
+            extra && /* @__PURE__ */ jsx("div", { className: "kz-link-card-extra", children: extra }),
+            (cta || external) && /* @__PURE__ */ jsxs("span", { className: "kz-link-card-cta", children: [
+              cta,
+              external ? /* @__PURE__ */ jsx(ExternalGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowGlyph, { className: "h-3.5 w-3.5" })
+            ] })
           ] })
         ] })
       ]

package/dist/link-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/link-card/link-card.tsx"],"sourcesContent":["// Server-safe. A card that leads somewhere (blocks.css): the whole card is the link — an icon, a title, one sentence,\n// the way in. Compact, one look for every entry point of a page (a documentation hub, the products, the next step).\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ExternalGlyph } from \"../glyphs\";\n\nexport type LinkCardProps = Omit<React.ComponentProps<\"a\">, \"title\" | \"href\"> & {\n  /** Where the card leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** The title: the name of the destination. */\n  title: React.ReactNode;\n  /** One sentence: what the reader finds there. */\n  description?: React.ReactNode;\n  /** The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. */\n  icon?: React.ReactNode;\n  /** A short mono line above the title (a category, a version). */\n  meta?: React.ReactNode;\n  /** The way in, under the text, with an arrow: `Open`, `Read the guide`. */\n  cta?: React.ReactNode;\n  /** Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one. */\n  extra?: React.ReactNode;\n  /**\n   * The title's element: a heading when the cards are the content of a section (a hub), `span` inside a list of links.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"span\";\n  /**\n   * `row`: the icon beside the text (compact, the default); `stack`: the icon above it.\n   * @default \"row\"\n   */\n  layout?: \"row\" | \"stack\";\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */\nexport function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = \"h3\", layout = \"row\", linkAs, className, ...props }: LinkCardProps) {\n  const external = isExternal(href);\n  return (\n    <BlockLink\n      href={href}\n      linkAs={linkAs}\n      external={external}\n      className={cn(\"kz-block-card kz-link-card\", className)}\n      data-kz-light=\"\"\n      data-layout={layout === \"row\" ? undefined : layout}\n      {...props}\n    >\n      {icon && (\n        <span className=\"kz-block-icon\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      <div className=\"kz-link-card-body\">\n        {meta && <p className=\"kz-link-card-meta\">{meta}</p>}\n        <Title className=\"kz-link-card-title\">{title}</Title>\n        {description && <p className=\"kz-link-card-text\">{description}</p>}\n        {extra && <div className=\"kz-link-card-extra\">{extra}</div>}\n        {(cta || external) && (\n          <span className=\"kz-link-card-cta\">\n            {cta}\n            {external ? <ExternalGlyph className=\"h-3.5 w-3.5\" /> : <ArrowGlyph className=\"h-3.5 w-3.5\" />}\n          </span>\n        )}\n      </div>\n    </BlockLink>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmDQ,cAUE,YAVF;AAbD,SAAS,SAAS,EAAE,MAAM,OAAO,aAAa,MAAM,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,SAAS,OAAO,QAAQ,WAAW,GAAG,MAAM,GAAkB;AAChK,QAAM,WAAW,WAAW,IAAI;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACrD,iBAAc;AAAA,MACd,eAAa,WAAW,QAAQ,SAAY;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,gBACH;AAAA,QAEF,qBAAC,SAAI,WAAU,qBACZ;AAAA,kBAAQ,oBAAC,OAAE,WAAU,qBAAqB,gBAAK;AAAA,UAChD,oBAAC,SAAM,WAAU,sBAAsB,iBAAM;AAAA,UAC5C,eAAe,oBAAC,OAAE,WAAU,qBAAqB,uBAAY;AAAA,UAC7D,SAAS,oBAAC,SAAI,WAAU,sBAAsB,iBAAM;AAAA,WACnD,OAAO,aACP,qBAAC,UAAK,WAAU,oBACb;AAAA;AAAA,YACA,WAAW,oBAAC,iBAAc,WAAU,eAAc,IAAK,oBAAC,cAAW,WAAU,eAAc;AAAA,aAC9F;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/link-card/link-card.tsx"],"sourcesContent":["// Server-safe. A card that leads somewhere (blocks.css): the whole card is the link — an icon, a title, one sentence,\n// the way in. Compact, one look for every entry point of a page (a documentation hub, the products, the next step).\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ExternalGlyph } from \"../glyphs\";\n\nexport type LinkCardProps = Omit<React.ComponentProps<\"a\">, \"title\" | \"href\"> & {\n  /** Where the card leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** The title: the name of the destination. */\n  title: React.ReactNode;\n  /** One sentence: what the reader finds there. */\n  description?: React.ReactNode;\n  /** The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. */\n  icon?: React.ReactNode;\n  /** A short mono line above the title (a category, a version). */\n  meta?: React.ReactNode;\n  /** The way in, under the text, with an arrow: `Open`, `Read the guide`. */\n  cta?: React.ReactNode;\n  /** Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one. */\n  extra?: React.ReactNode;\n  /**\n   * The title's element: a heading when the cards are the content of a section (a hub), `span` inside a list of links.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"span\";\n  /**\n   * `row`: the icon beside the text (compact, the default); `stack`: the icon above it.\n   * @default \"row\"\n   */\n  layout?: \"row\" | \"stack\";\n  /**\n   * Where the facts (`extra`) and the way in (`cta`) sit when the card is taller than its text — a row of cards at one\n   * height: `bottom` pins them to the card's foot, so they share a line across the row; `top` leaves them under the text.\n   * @default \"bottom\"\n   */\n  footerAlign?: \"bottom\" | \"top\";\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */\nexport function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = \"h3\", layout = \"row\", footerAlign = \"bottom\", linkAs, className, ...props }: LinkCardProps) {\n  const external = isExternal(href);\n  return (\n    <BlockLink\n      href={href}\n      linkAs={linkAs}\n      external={external}\n      className={cn(\"kz-block-card kz-link-card\", className)}\n      data-kz-light=\"\"\n      data-layout={layout === \"row\" ? undefined : layout}\n      data-footer={footerAlign === \"top\" ? \"top\" : undefined}\n      {...props}\n    >\n      {icon && (\n        <span className=\"kz-block-icon\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      <div className=\"kz-link-card-body\">\n        {meta && <p className=\"kz-link-card-meta\">{meta}</p>}\n        <Title className=\"kz-link-card-title\">{title}</Title>\n        {description && <p className=\"kz-link-card-text\">{description}</p>}\n        {(extra || cta || external) && (\n          <div className=\"kz-link-card-foot\">\n            {extra && <div className=\"kz-link-card-extra\">{extra}</div>}\n            {(cta || external) && (\n              <span className=\"kz-link-card-cta\">\n                {cta}\n                {external ? <ExternalGlyph className=\"h-3.5 w-3.5\" /> : <ArrowGlyph className=\"h-3.5 w-3.5\" />}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    </BlockLink>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA0DQ,cAYM,YAZN;AAdD,SAAS,SAAS,EAAE,MAAM,OAAO,aAAa,MAAM,MAAM,KAAK,OAAO,SAAS,QAAQ,MAAM,SAAS,OAAO,cAAc,UAAU,QAAQ,WAAW,GAAG,MAAM,GAAkB;AACxL,QAAM,WAAW,WAAW,IAAI;AAChC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACrD,iBAAc;AAAA,MACd,eAAa,WAAW,QAAQ,SAAY;AAAA,MAC5C,eAAa,gBAAgB,QAAQ,QAAQ;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,iBAAgB,eAAW,MACxC,gBACH;AAAA,QAEF,qBAAC,SAAI,WAAU,qBACZ;AAAA,kBAAQ,oBAAC,OAAE,WAAU,qBAAqB,gBAAK;AAAA,UAChD,oBAAC,SAAM,WAAU,sBAAsB,iBAAM;AAAA,UAC5C,eAAe,oBAAC,OAAE,WAAU,qBAAqB,uBAAY;AAAA,WAC5D,SAAS,OAAO,aAChB,qBAAC,SAAI,WAAU,qBACZ;AAAA,qBAAS,oBAAC,SAAI,WAAU,sBAAsB,iBAAM;AAAA,aACnD,OAAO,aACP,qBAAC,UAAK,WAAU,oBACb;AAAA;AAAA,cACA,WAAW,oBAAC,iBAAc,WAAU,eAAc,IAAK,oBAAC,cAAW,WAAU,eAAc;AAAA,eAC9F;AAAA,aAEJ;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "The Krizaka front-end platform's components: the primitives (button, card, dialog, toast, menu, field, tabs, chip, switch, slider, command palette, theme, countdown…) on the semantic --kz-* tokens, the animated marks (Krizaka, Orazaka, Orochia, Yasakia, Yororis) and the motion signature — web and /native.",
   "keywords": [
     "krizaka",
@@ -614,7 +614,7 @@
   ],
   "peerDependencies": {
     "@krizaka/query": ">=0.2.1",
-    "@krizaka/tailwind": ">=3.10.0",
+    "@krizaka/tailwind": ">=3.11.0",
     "@maplibre/maplibre-react-native": ">=11",
     "@shopify/flash-list": ">=2",
     "expo-camera": ">=16",
@@ -672,8 +672,8 @@
     "typescript": "^5.9.0",
     "vitest": "^4.1.11",
     "zod": "^4.6.5",
-    "@krizaka/config": "0.4.1",
-    "@krizaka/query": "0.2.1"
+    "@krizaka/query": "0.2.1",
+    "@krizaka/config": "0.4.1"
   },
   "engines": {
     "node": ">=22"
@@ -2098,8 +2098,8 @@
     "sonner": "^2.0.8",
     "tailwind-variants": "^3.3.1",
     "@krizaka/intl": "^0.2.1",
-    "@krizaka/pacer": "^0.1.0",
-    "@krizaka/tokens": "^3.10.0"
+    "@krizaka/tokens": "^3.11.0",
+    "@krizaka/pacer": "^0.1.0"
   },
   "scripts": {
     "build": "node -e \"const fs=require('node:fs');fs.rmSync('dist',{recursive:true,force:true});for(const f of fs.readdirSync('registry/examples',{recursive:true}))if(/\\.(js|d\\.ts)$/.test(f))fs.rmSync('registry/examples/'+f)\" && tsup && node -e \"require('node:fs').copyFileSync('src/motion.css','dist/motion.css');require('node:fs').copyFileSync('src/blocks.css','dist/blocks.css');require('node:fs').copyFileSync('src/story.css','dist/story.css')\" && node scripts/build-registry.mjs",

package/registry/card-grid.json

@@ -26,6 +26,7 @@
     "Set `min` to the narrowest a card still reads well; the grid does the rest at every width.",
     "`fit=\"fit\"` for two or three cards that should share the whole width; `fill` keeps a lone card at its size.",
     "Keep `reveal` on below the first screen, off on it; `columns` makes the stagger restart on each row.",
+    "The default `align=\"stretch\"` gives a row one height; the cards pin their foot to the bottom (`LinkCard` facts + way in, `ArgumentCard` actions) so the footers line up. `align=\"start\"` for cards that unfold.",
     "`as=\"ul\"` when the cards are a list of links."
   ],
   "accessibility": {
@@ -117,6 +118,14 @@
         "module": "@krizaka/ui/registry/examples/card-grid/products",
         "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\n\n// `fit=\"fit\"`: the cards of a short row share the whole width — two products, two halves. One column on a phone.\nexport default function CardGridProducts() {\n  return (\n    <CardGrid className=\"w-full max-w-3xl\" fit=\"fit\" reveal={false}>\n      <LinkCard href=\"#orazaka\" icon={<ProductLogo id=\"orazaka\" size={24} animated={false} />} title=\"Orazaka\" description=\"Sovereign AI on your own servers.\" cta=\"Overview\" />\n      <LinkCard href=\"#orochia\" icon={<ProductLogo id=\"orochia\" size={24} animated={false} />} title=\"Orochia\" description=\"Creators paid for what they make.\" cta=\"Overview\" />\n    </CardGrid>\n  );\n}\n"
       },
+      {
+        "name": "aligned",
+        "title": "An aligned row",
+        "description": "Cards with sentences of different lengths: one height, and the facts and the way in of every card on the same line.",
+        "path": "examples/card-grid/aligned.tsx",
+        "module": "@krizaka/ui/registry/examples/card-grid/aligned",
+        "code": "import { ProductLogo } from \"@krizaka/ui\";\nimport { CardGrid } from \"@krizaka/ui/card-grid\";\nimport { LinkCard } from \"@krizaka/ui/link-card\";\nimport { Facts } from \"@krizaka/ui/page\";\n\n// A row of cards whose sentences have different lengths: the cells share one height and each card pins its facts\n// and its way in to the bottom, so the status and the link of every card sit on the same line.\nexport default function CardGridAligned() {\n  return (\n    <CardGrid className=\"w-full max-w-4xl\" min={220} columns={3} reveal={false}>\n      <LinkCard layout=\"stack\" href=\"#orazaka\" icon={<ProductLogo id=\"orazaka\" size={28} animated={false} />} title=\"Orazaka\" description=\"Sovereign AI on your own servers: chat, image, video and voice.\" extra={<Facts items={[{ label: \"Dev preview\", tone: \"ok\" }]} />} cta=\"Open orazaka\" />\n      <LinkCard layout=\"stack\" href=\"#orochia\" icon={<ProductLogo id=\"orochia\" size={28} animated={false} />} title=\"Orochia\" description=\"Creators, paid.\" extra={<Facts items={[{ label: \"Coming soon\", tone: \"wip\" }]} />} cta=\"Open orochia\" />\n      <LinkCard layout=\"stack\" href=\"#yororis\" icon={<ProductLogo id=\"yororis\" size={28} animated={false} />} title=\"Yororis\" description=\"A quiet place to keep what matters to you, built around the moments of a day and the threads between them.\" extra={<Facts items={[{ label: \"Under construction\", tone: \"wip\" }]} />} cta=\"Open yororis\" />\n    </CardGrid>\n  );\n}\n"
+      },
       {
         "name": "reveal",
         "title": "A list of sections",
@@ -139,7 +148,7 @@
     },
     {
       "path": "card-grid/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Card grid\",\n  summary:\n    \"A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  whenToUse: [\n    \"Entry points of a hub (`LinkCard`), the reasons of a product page (`ArgumentCard`), plans, products.\",\n    \"Any set of peer cards that should read as one group with one rhythm.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a sequence the reader follows in order.\", use: \"stepper\" },\n    { when: \"For rows of data to compare or sort.\", use: \"data-table\" },\n  ],\n  bestPractices: [\n    \"Set `min` to the narrowest a card still reads well; the grid does the rest at every width.\",\n    \"`fit=\\\"fit\\\"` for two or three cards that should share the whole width; `fill` keeps a lone card at its size.\",\n    \"Keep `reveal` on below the first screen, off on it; `columns` makes the stagger restart on each row.\",\n    \"`as=\\\"ul\\\"` when the cards are a list of links.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"The grid adds no role; `as=\\\"ul\\\"` makes it a list (each cell an `li`).\",\n      \"The pointer's light is decorative and never runs on touch screens or under `prefers-reduced-motion`.\",\n      \"Revealed cells are only hidden visually until they enter the viewport; under reduced motion they never move.\",\n    ],\n  },\n  related: [\"link-card\", \"argument-card\", \"pointer-light\"],\n  web: {\n    imports: [\"CardGrid\"],\n    examples: [\n      { name: \"products\", title: \"Two halves\", description: \"`fit=\\\"fit\\\"`: two cards share the whole width.\" },\n      { name: \"reveal\", title: \"A list of sections\", description: \"`as=\\\"ul\\\"`, six links that rise staggered by column on a real page.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Card grid\",\n  summary:\n    \"A responsive grid of cards: as many columns as the width allows (one on a phone), the cells of a row at one height, a staggered reveal and the light that follows the pointer.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  whenToUse: [\n    \"Entry points of a hub (`LinkCard`), the reasons of a product page (`ArgumentCard`), plans, products.\",\n    \"Any set of peer cards that should read as one group with one rhythm.\",\n  ],\n  whenNotToUse: [\n    { when: \"For a sequence the reader follows in order.\", use: \"stepper\" },\n    { when: \"For rows of data to compare or sort.\", use: \"data-table\" },\n  ],\n  bestPractices: [\n    \"Set `min` to the narrowest a card still reads well; the grid does the rest at every width.\",\n    \"`fit=\\\"fit\\\"` for two or three cards that should share the whole width; `fill` keeps a lone card at its size.\",\n    \"Keep `reveal` on below the first screen, off on it; `columns` makes the stagger restart on each row.\",\n    \"The default `align=\\\"stretch\\\"` gives a row one height; the cards pin their foot to the bottom (`LinkCard` facts + way in, `ArgumentCard` actions) so the footers line up. `align=\\\"start\\\"` for cards that unfold.\",\n    \"`as=\\\"ul\\\"` when the cards are a list of links.\",\n  ],\n  accessibility: {\n    keyboard: [],\n    notes: [\n      \"The grid adds no role; `as=\\\"ul\\\"` makes it a list (each cell an `li`).\",\n      \"The pointer's light is decorative and never runs on touch screens or under `prefers-reduced-motion`.\",\n      \"Revealed cells are only hidden visually until they enter the viewport; under reduced motion they never move.\",\n    ],\n  },\n  related: [\"link-card\", \"argument-card\", \"pointer-light\"],\n  web: {\n    imports: [\"CardGrid\"],\n    examples: [\n      { name: \"products\", title: \"Two halves\", description: \"`fit=\\\"fit\\\"`: two cards share the whole width.\" },\n      { name: \"aligned\", title: \"An aligned row\", description: \"Cards with sentences of different lengths: one height, and the facts and the way in of every card on the same line.\" },\n      { name: \"reveal\", title: \"A list of sections\", description: \"`as=\\\"ul\\\"`, six links that rise staggered by column on a real page.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",

package/registry/examples/card-grid/aligned.d.ts

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

package/registry/examples/card-grid/aligned.js

@@ -0,0 +1,18 @@
+"use client";
+
+// registry/examples/card-grid/aligned.tsx
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Facts } from "@krizaka/ui/page";
+import { jsx, jsxs } from "react/jsx-runtime";
+function CardGridAligned() {
+  return /* @__PURE__ */ jsxs(CardGrid, { className: "w-full max-w-4xl", min: 220, columns: 3, reveal: false, children: [
+    /* @__PURE__ */ jsx(LinkCard, { layout: "stack", href: "#orazaka", icon: /* @__PURE__ */ jsx(ProductLogo, { id: "orazaka", size: 28, animated: false }), title: "Orazaka", description: "Sovereign AI on your own servers: chat, image, video and voice.", extra: /* @__PURE__ */ jsx(Facts, { items: [{ label: "Dev preview", tone: "ok" }] }), cta: "Open orazaka" }),
+    /* @__PURE__ */ jsx(LinkCard, { layout: "stack", href: "#orochia", icon: /* @__PURE__ */ jsx(ProductLogo, { id: "orochia", size: 28, animated: false }), title: "Orochia", description: "Creators, paid.", extra: /* @__PURE__ */ jsx(Facts, { items: [{ label: "Coming soon", tone: "wip" }] }), cta: "Open orochia" }),
+    /* @__PURE__ */ jsx(LinkCard, { layout: "stack", href: "#yororis", icon: /* @__PURE__ */ jsx(ProductLogo, { id: "yororis", size: 28, animated: false }), title: "Yororis", description: "A quiet place to keep what matters to you, built around the moments of a day and the threads between them.", extra: /* @__PURE__ */ jsx(Facts, { items: [{ label: "Under construction", tone: "wip" }] }), cta: "Open yororis" })
+  ] });
+}
+export {
+  CardGridAligned as default
+};

package/registry/examples/card-grid/aligned.tsx

@@ -0,0 +1,16 @@
+import { ProductLogo } from "@krizaka/ui";
+import { CardGrid } from "@krizaka/ui/card-grid";
+import { LinkCard } from "@krizaka/ui/link-card";
+import { Facts } from "@krizaka/ui/page";
+
+// A row of cards whose sentences have different lengths: the cells share one height and each card pins its facts
+// and its way in to the bottom, so the status and the link of every card sit on the same line.
+export default function CardGridAligned() {
+  return (
+    <CardGrid className="w-full max-w-4xl" min={220} columns={3} reveal={false}>
+      <LinkCard layout="stack" href="#orazaka" icon={<ProductLogo id="orazaka" size={28} animated={false} />} title="Orazaka" description="Sovereign AI on your own servers: chat, image, video and voice." extra={<Facts items={[{ label: "Dev preview", tone: "ok" }]} />} cta="Open orazaka" />
+      <LinkCard layout="stack" href="#orochia" icon={<ProductLogo id="orochia" size={28} animated={false} />} title="Orochia" description="Creators, paid." extra={<Facts items={[{ label: "Coming soon", tone: "wip" }]} />} cta="Open orochia" />
+      <LinkCard layout="stack" href="#yororis" icon={<ProductLogo id="yororis" size={28} animated={false} />} title="Yororis" description="A quiet place to keep what matters to you, built around the moments of a day and the threads between them." extra={<Facts items={[{ label: "Under construction", tone: "wip" }]} />} cta="Open yororis" />
+    </CardGrid>
+  );
+}

package/registry/index.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/ui",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "templatePurposes": {
     "convince": {
       "title": "Convince",
@@ -683,7 +683,7 @@
       "category": "blocks",
       "platforms": "web",
       "examples": {
-        "web": 2,
+        "web": 3,
         "native": 0
       },
       "dependencies": [],
@@ -1731,7 +1731,7 @@
         "native": 2
       },
       "dependencies": [
-        "@krizaka/tokens@^3.10.0",
+        "@krizaka/tokens@^3.11.0",
         "@protomaps/basemaps@5.7.2",
         "tailwind-variants@^3.3.1"
       ],
@@ -1939,7 +1939,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.10.0",
+        "@krizaka/tokens@^3.11.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],
@@ -2455,7 +2455,7 @@
         "native": 0
       },
       "dependencies": [
-        "@krizaka/tokens@^3.10.0",
+        "@krizaka/tokens@^3.11.0",
         "radix-ui@^1.7.0",
         "tailwind-variants@^3.3.1"
       ],

package/registry/link-card.json

@@ -26,6 +26,7 @@
     "One sentence of description; the title names the destination, the way in (`cta`) says the action.",
     "Use the product's mark or a signature icon as `icon`, never a placeholder.",
     "Pass the app's router link as `linkAs` (Next's `Link`) so internal links prefetch.",
+    "In a row of cards at one height (`CardGrid`), the facts (`extra`) and the way in (`cta`) are pinned to the foot of each card, so they share a line whatever the length of the sentences; `footerAlign=\"top\"` keeps them under the text.",
     "In a hub, keep the default `h3` titles under the section's `h2`; in a list of links, `titleAs=\"span\"`."
   ],
   "accessibility": {
@@ -94,6 +95,13 @@
             "description": "Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one.",
             "required": false
           },
+          {
+            "name": "footerAlign",
+            "type": "\"bottom\" | \"top\"",
+            "default": "bottom",
+            "description": "Where the facts (`extra`) and the way in (`cta`) sit when the card is taller than its text — a row of cards at one\nheight: `bottom` pins them to the card's foot, so they share a line across the row; `top` leaves them under the text.",
+            "required": false
+          },
           {
             "name": "icon",
             "type": "ReactNode",
@@ -175,11 +183,11 @@
     },
     {
       "path": "link-card/link-card.tsx",
-      "content": "// Server-safe. A card that leads somewhere (blocks.css): the whole card is the link — an icon, a title, one sentence,\n// the way in. Compact, one look for every entry point of a page (a documentation hub, the products, the next step).\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ExternalGlyph } from \"../glyphs\";\n\nexport type LinkCardProps = Omit<React.ComponentProps<\"a\">, \"title\" | \"href\"> & {\n  /** Where the card leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** The title: the name of the destination. */\n  title: React.ReactNode;\n  /** One sentence: what the reader finds there. */\n  description?: React.ReactNode;\n  /** The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. */\n  icon?: React.ReactNode;\n  /** A short mono line above the title (a category, a version). */\n  meta?: React.ReactNode;\n  /** The way in, under the text, with an arrow: `Open`, `Read the guide`. */\n  cta?: React.ReactNode;\n  /** Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one. */\n  extra?: React.ReactNode;\n  /**\n   * The title's element: a heading when the cards are the content of a section (a hub), `span` inside a list of links.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"span\";\n  /**\n   * `row`: the icon beside the text (compact, the default); `stack`: the icon above it.\n   * @default \"row\"\n   */\n  layout?: \"row\" | \"stack\";\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */\nexport function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = \"h3\", layout = \"row\", linkAs, className, ...props }: LinkCardProps) {\n  const external = isExternal(href);\n  return (\n    <BlockLink\n      href={href}\n      linkAs={linkAs}\n      external={external}\n      className={cn(\"kz-block-card kz-link-card\", className)}\n      data-kz-light=\"\"\n      data-layout={layout === \"row\" ? undefined : layout}\n      {...props}\n    >\n      {icon && (\n        <span className=\"kz-block-icon\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      <div className=\"kz-link-card-body\">\n        {meta && <p className=\"kz-link-card-meta\">{meta}</p>}\n        <Title className=\"kz-link-card-title\">{title}</Title>\n        {description && <p className=\"kz-link-card-text\">{description}</p>}\n        {extra && <div className=\"kz-link-card-extra\">{extra}</div>}\n        {(cta || external) && (\n          <span className=\"kz-link-card-cta\">\n            {cta}\n            {external ? <ExternalGlyph className=\"h-3.5 w-3.5\" /> : <ArrowGlyph className=\"h-3.5 w-3.5\" />}\n          </span>\n        )}\n      </div>\n    </BlockLink>\n  );\n}\n"
+      "content": "// Server-safe. A card that leads somewhere (blocks.css): the whole card is the link — an icon, a title, one sentence,\n// the way in. Compact, one look for every entry point of a page (a documentation hub, the products, the next step).\nimport type * as React from \"react\";\n\nimport { BlockLink, isExternal, type LinkComponent } from \"../block-link\";\nimport { cn } from \"../cn\";\nimport { ArrowGlyph, ExternalGlyph } from \"../glyphs\";\n\nexport type LinkCardProps = Omit<React.ComponentProps<\"a\">, \"title\" | \"href\"> & {\n  /** Where the card leads. An absolute URL opens in a new tab, with the external mark. */\n  href: string;\n  /** The title: the name of the destination. */\n  title: React.ReactNode;\n  /** One sentence: what the reader finds there. */\n  description?: React.ReactNode;\n  /** The icon tile on the left (a product mark, a signature icon): decorative, the title names the link. */\n  icon?: React.ReactNode;\n  /** A short mono line above the title (a category, a version). */\n  meta?: React.ReactNode;\n  /** The way in, under the text, with an arrow: `Open`, `Read the guide`. */\n  cta?: React.ReactNode;\n  /** Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one. */\n  extra?: React.ReactNode;\n  /**\n   * The title's element: a heading when the cards are the content of a section (a hub), `span` inside a list of links.\n   * @default \"h3\"\n   */\n  titleAs?: \"h2\" | \"h3\" | \"h4\" | \"span\";\n  /**\n   * `row`: the icon beside the text (compact, the default); `stack`: the icon above it.\n   * @default \"row\"\n   */\n  layout?: \"row\" | \"stack\";\n  /**\n   * Where the facts (`extra`) and the way in (`cta`) sit when the card is taller than its text — a row of cards at one\n   * height: `bottom` pins them to the card's foot, so they share a line across the row; `top` leaves them under the text.\n   * @default \"bottom\"\n   */\n  footerAlign?: \"bottom\" | \"top\";\n  /** The app's link component for internal addresses (Next's `Link`); an `<a>` otherwise. */\n  linkAs?: LinkComponent;\n};\n\n/** An entry point: the whole card is one link — icon, title, sentence, the way in. Lifts and lights under the pointer. */\nexport function LinkCard({ href, title, description, icon, meta, cta, extra, titleAs: Title = \"h3\", layout = \"row\", footerAlign = \"bottom\", linkAs, className, ...props }: LinkCardProps) {\n  const external = isExternal(href);\n  return (\n    <BlockLink\n      href={href}\n      linkAs={linkAs}\n      external={external}\n      className={cn(\"kz-block-card kz-link-card\", className)}\n      data-kz-light=\"\"\n      data-layout={layout === \"row\" ? undefined : layout}\n      data-footer={footerAlign === \"top\" ? \"top\" : undefined}\n      {...props}\n    >\n      {icon && (\n        <span className=\"kz-block-icon\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      <div className=\"kz-link-card-body\">\n        {meta && <p className=\"kz-link-card-meta\">{meta}</p>}\n        <Title className=\"kz-link-card-title\">{title}</Title>\n        {description && <p className=\"kz-link-card-text\">{description}</p>}\n        {(extra || cta || external) && (\n          <div className=\"kz-link-card-foot\">\n            {extra && <div className=\"kz-link-card-extra\">{extra}</div>}\n            {(cta || external) && (\n              <span className=\"kz-link-card-cta\">\n                {cta}\n                {external ? <ExternalGlyph className=\"h-3.5 w-3.5\" /> : <ArrowGlyph className=\"h-3.5 w-3.5\" />}\n              </span>\n            )}\n          </div>\n        )}\n      </div>\n    </BlockLink>\n  );\n}\n"
     },
     {
       "path": "link-card/meta.ts",
-      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Link card\",\n  summary:\n    \"An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  whenToUse: [\n    \"The entry points of a hub: a documentation's sections, the products, the next steps of a guide.\",\n    \"Any link that deserves more than its words: what the reader finds there, in one sentence.\",\n  ],\n  whenNotToUse: [\n    { when: \"When the card holds several actions: a card that is a link holds no other link.\", use: \"argument-card\" },\n    { when: \"For a link inside a sentence or a list of plain links.\", use: \"chip-link\" },\n  ],\n  bestPractices: [\n    \"One sentence of description; the title names the destination, the way in (`cta`) says the action.\",\n    \"Use the product's mark or a signature icon as `icon`, never a placeholder.\",\n    \"Pass the app's router link as `linkAs` (Next's `Link`) so internal links prefetch.\",\n    \"In a hub, keep the default `h3` titles under the section's `h2`; in a list of links, `titleAs=\\\"span\\\"`.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focuses the card, which lights and draws the focus ring like the pointer does.\" }],\n    notes: [\n      \"The card is a single link: its accessible name is its whole text — keep it short.\",\n      \"An absolute address opens in a new tab with `rel=\\\"noopener noreferrer\\\"` and the external mark.\",\n      \"The icon and the arrow are decorative; the lift and the light stop under `prefers-reduced-motion`.\",\n    ],\n  },\n  related: [\"card-grid\", \"glow-card\", \"chip-link\"],\n  web: {\n    imports: [\"LinkCard\"],\n    examples: [\n      { name: \"docs-hub\", title: \"A documentation hub\", description: \"Three compact cards in a grid: a mark, a title, a sentence, `Open`.\" },\n      { name: \"stack\", title: \"Stacked, with facts\", description: \"`layout=\\\"stack\\\"`, a category above the title and facts under the text.\" },\n      { name: \"external\", title: \"An external link\", description: \"An absolute address: a new tab and the external mark.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Link card\",\n  summary:\n    \"An entry point where the whole card is one link: an icon tile, a title, one sentence and the way in — compact, the same on every page, lifting and lighting under the pointer or the focus.\",\n  status: \"beta\",\n  category: \"blocks\",\n  platforms: \"web\",\n  whenToUse: [\n    \"The entry points of a hub: a documentation's sections, the products, the next steps of a guide.\",\n    \"Any link that deserves more than its words: what the reader finds there, in one sentence.\",\n  ],\n  whenNotToUse: [\n    { when: \"When the card holds several actions: a card that is a link holds no other link.\", use: \"argument-card\" },\n    { when: \"For a link inside a sentence or a list of plain links.\", use: \"chip-link\" },\n  ],\n  bestPractices: [\n    \"One sentence of description; the title names the destination, the way in (`cta`) says the action.\",\n    \"Use the product's mark or a signature icon as `icon`, never a placeholder.\",\n    \"Pass the app's router link as `linkAs` (Next's `Link`) so internal links prefetch.\",\n    \"In a row of cards at one height (`CardGrid`), the facts (`extra`) and the way in (`cta`) are pinned to the foot of each card, so they share a line whatever the length of the sentences; `footerAlign=\\\"top\\\"` keeps them under the text.\",\n    \"In a hub, keep the default `h3` titles under the section's `h2`; in a list of links, `titleAs=\\\"span\\\"`.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab\", action: \"Focuses the card, which lights and draws the focus ring like the pointer does.\" }],\n    notes: [\n      \"The card is a single link: its accessible name is its whole text — keep it short.\",\n      \"An absolute address opens in a new tab with `rel=\\\"noopener noreferrer\\\"` and the external mark.\",\n      \"The icon and the arrow are decorative; the lift and the light stop under `prefers-reduced-motion`.\",\n    ],\n  },\n  related: [\"card-grid\", \"glow-card\", \"chip-link\"],\n  web: {\n    imports: [\"LinkCard\"],\n    examples: [\n      { name: \"docs-hub\", title: \"A documentation hub\", description: \"Three compact cards in a grid: a mark, a title, a sentence, `Open`.\" },\n      { name: \"stack\", title: \"Stacked, with facts\", description: \"`layout=\\\"stack\\\"`, a category above the title and facts under the text.\" },\n      { name: \"external\", title: \"An external link\", description: \"An absolute address: a new tab and the external mark.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
     },
     {
       "path": "meta.ts",
@@ -239,6 +247,13 @@
           "description": "Under the text, before the way in: facts (`Facts`), badges. Never another link — the card is one.",
           "required": false
         },
+        {
+          "name": "footerAlign",
+          "type": "\"bottom\" | \"top\"",
+          "default": "bottom",
+          "description": "Where the facts (`extra`) and the way in (`cta`) sit when the card is taller than its text — a row of cards at one\nheight: `bottom` pins them to the card's foot, so they share a line across the row; `top` leaves them under the text.",
+          "required": false
+        },
         {
           "name": "icon",
           "type": "ReactNode",

package/registry/map.json

@@ -930,7 +930,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.10.0",
+    "@krizaka/tokens@^3.11.0",
     "@protomaps/basemaps@5.7.2",
     "tailwind-variants@^3.3.1"
   ],

package/registry/nav-bar.json

@@ -470,7 +470,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.10.0",
+    "@krizaka/tokens@^3.11.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/site-footer.json

@@ -259,7 +259,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.10.0",
+    "@krizaka/tokens@^3.11.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],