@krizaka/ui 3.28.0 → 3.29.0

package/README.md

@@ -176,6 +176,7 @@ light or a product's — is a set of tokens.
 | `@krizaka/ui/achievement` | `Achievement` (`title`, `eyebrow`, `badge`, `replaced`, `locked`), `AchievementList`, `Emblem` (`sword` · `mirror` · `jewel`) | server |
 | `@krizaka/ui/landscape` | `Landscape` (`tone` own · brand, `flock`, `phoenix`, `animated`, `position`, `fade`): the Krizaka valley at dusk, decorative | client |
 | `@krizaka/ui/glow-card` | `GlowCard` (`glow` border·spotlight·both, `alive`, `asChild`) | client |
+| `@krizaka/ui/engine-flow` | `EngineFlow` (`label`, `hub`, `nodes` with `flow` in·out·both, `planned`, `status`, `description`, `href`; `layout` radial·top-to-bottom·left-to-right, `compactLayout` under 560 px, `particles`, `conduit` bezier·straight, `hint`, `speed`): an engine and the apps it serves, photons along SVG conduits (motion.css), no animation frame | client |
 | `@krizaka/ui/marquee` | `Marquee` (`label`, `pauseLabel`, `playLabel`, `speed` px/s, `direction`, `fade`, `defaultPaused`) | client |
 | `@krizaka/ui/section-backdrop` | `SectionBackdrop` (`as`, `direction` down·up, `dome`, `grid`, `media` blurred for depth of field, `animated`): a page section on the brand's section gradient — see `@krizaka/tokens` BRAND.md, "Visual language" | server |
 | `@krizaka/ui/mascots` | `Mascot` (`bird` falcon·owl·duck·flamingo·pigeon·lovebird·crane, `mood` welcome·thinking·success·empty·error, `tone` brand·own, `size`, `animated`, `title`), `MASCOT_BIRDS`, `MASCOT_MOODS`: the Krizaka flock, in the host brand's accent — one bird at a moment that matters (onboarding, a long wait, a success, an empty list, an error); native `Mascot` in `/native` | client |
@@ -495,6 +496,7 @@ import { MotionObserver, RotatingWord } from "@krizaka/ui";
 | `kz-spotlight` | A soft bloom following the pointer across a card |
 | `kz-lift` | A card rising under the pointer |
 | `kz-gradient-text`, `kz-marquee` | Drifting gradient text, endless bands |
+| `kz-flow` | EngineFlow's conduits and photons: paused off screen, held while settling, still under reduced motion |
 | `kz-overlay`, `kz-dialog`, `kz-pop`, `kz-fade` | Backdrops, dialogs (from the bottom on phones), menus, views swapped in place |
 | `kz-progress` | The indeterminate progress bar's travelling segment |
 | `kz-backdrop`, `kz-backdrop-drift`, `-dome`, `-grid`, `-media` | The layers of `SectionBackdrop`: the brand's section gradient, the slow light drift (40 s), the dome, the perspective grid, the blurred foreground |

package/dist/blocks.css

@@ -708,6 +708,8 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
   border-top: 1px solid var(--kz-border-subtle); }
 .kz-tpl-collection ul a { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
   text-decoration: none; color: var(--kz-text-primary); background: var(--kz-surface-2); border: 1px solid var(--kz-border-subtle); }
+.kz-tpl-collection[data-links="stack"] ul { display: grid; justify-items: start; }
+.kz-tpl-collection[data-links="stack"] ul a { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .kz-tpl-collection ul a:hover { border-color: var(--kz-accent); }
 .kz-tpl-collection ul a:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); outline-offset: 2px; }
 @media (hover: hover) and (prefers-reduced-motion: no-preference) {

package/dist/docs-hub-page.d.ts

@@ -65,8 +65,14 @@ type DocsHubPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     };
     /** The app's link component (Next's `Link`) for internal addresses. */
     linkAs?: LinkComponent;
+    /**
+     * How a collection's quick links sit: `wrap` (pills in a row that wraps) or `stack` (one pill per line, so the first
+     * link of every card starts at the same height).
+     * @default "wrap"
+     */
+    linksLayout?: "wrap" | "stack";
 };
 /** A documentation hub: search first, the collections in their brand, quick starts, popular and new pages. */
-declare function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, ...props }: DocsHubPageProps): React.JSX.Element;
+declare function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, linksLayout, ...props }: DocsHubPageProps): React.JSX.Element;
 
 export { type DocsCollection, type DocsHubLink, DocsHubPage, type DocsHubPageProps };

package/dist/docs-hub-page.js

@@ -10,14 +10,14 @@ function List({ items, linkAs: Link = "a" }) {
     item.meta && /* @__PURE__ */ jsx("small", { children: item.meta })
   ] }) }, `${i}:${item.href}`)) });
 }
-function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, ...props }) {
+function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, linksLayout = "wrap", ...props }) {
   const L = linkAs ?? "a";
   return /* @__PURE__ */ jsxs("div", { ...props, children: [
     /* @__PURE__ */ jsx(PageHero, { eyebrow, title, lead, align: "center", backdrop: "grid", children: (search || searchHints) && /* @__PURE__ */ jsxs("div", { className: "kz-tpl-hub-search", children: [
       search,
       searchHints && /* @__PURE__ */ jsx("div", { className: "kz-tpl-hub-hints", children: searchHints })
     ] }) }),
-    /* @__PURE__ */ jsx(Section, { id: "collections", title: collectionsTitle, headingSize: "sm", spacing: "sm", children: /* @__PURE__ */ jsx("ul", { className: "kz-tpl-collections", children: collections.map((c) => /* @__PURE__ */ jsx("li", { className: c.brand ? "brand-" + c.brand : void 0, children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-collection", children: [
+    /* @__PURE__ */ jsx(Section, { id: "collections", title: collectionsTitle, headingSize: "sm", spacing: "sm", children: /* @__PURE__ */ jsx("ul", { className: "kz-tpl-collections", children: collections.map((c) => /* @__PURE__ */ jsx("li", { className: c.brand ? "brand-" + c.brand : void 0, children: /* @__PURE__ */ jsxs("div", { className: "kz-tpl-collection", "data-links": linksLayout, children: [
       /* @__PURE__ */ jsxs("div", { className: "kz-tpl-collection-head", children: [
         c.mark && /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: c.mark }),
         /* @__PURE__ */ jsx(L, { href: c.href, children: c.title })

package/dist/docs-hub-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/docs-hub-page/docs-hub-page.tsx"],"sourcesContent":["// Server-safe. The entry of a documentation (blocks.css `.kz-tpl-hub-*`, `.kz-tpl-collections`): the search in the\n// middle of the hero, the collections each in its product's brand with its quick links, the quick starts beside the\n// most read pages, what is new from the registries, and the owl's promise. One column on a phone, the search first.\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport * as React from \"react\";\n\nexport interface DocsCollection {\n  /** A stable key. */\n  id: string;\n  /** The product's brand (`orazaka`…): the panel wears `.brand-<id>`. */\n  brand?: string;\n  /** The product's mark. */\n  mark?: React.ReactNode;\n  /** The collection's name: a link to its home. */\n  title: string;\n  /** Where it starts. */\n  href: string;\n  /** What it covers, in one sentence. */\n  description?: React.ReactNode;\n  /** Its most useful pages (three or four). */\n  links?: readonly { href: string; label: string }[];\n}\n\nexport interface DocsHubLink {\n  /** Where it leads. */\n  href: string;\n  /** The page's title. */\n  title: React.ReactNode;\n  /** On the right, in mono: a collection, a version, a date. */\n  meta?: React.ReactNode;\n}\n\nexport type DocsHubPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** The search, front and centre (a SearchField, a button that opens the command palette). */\n  search?: React.ReactNode;\n  /** Under the search: what people look for (a few links or keys). */\n  searchHints?: React.ReactNode;\n  /** The collections' heading. */\n  collectionsTitle: React.ReactNode;\n  /** The collections, each in its brand. */\n  collections: readonly DocsCollection[];\n  /** The quick starts: a title and their samples (CodeBlocks, CodeTabs). */\n  quickstarts?: { title: React.ReactNode; children: React.ReactNode };\n  /** The most read pages. */\n  popular?: { title: React.ReactNode; items: readonly DocsHubLink[] };\n  /** What is new (releases from the registries, published pages). */\n  whatsNew?: { title: React.ReactNode; items: readonly DocsHubLink[] };\n  /** The owl's promise at the foot: what this documentation guarantees. */\n  promise?: { label: React.ReactNode; text: React.ReactNode };\n  /** The app's link component (Next's `Link`) for internal addresses. */\n  linkAs?: LinkComponent;\n};\n\nfunction List({ items, linkAs: Link = \"a\" }: { items: readonly DocsHubLink[]; linkAs?: LinkComponent }) {\n  const L = Link as React.ElementType;\n  return (\n    <ul className=\"kz-tpl-links\">\n      {items.map((item, i) => (\n        <li key={`${i}:${item.href}`}>\n          <L href={item.href}>\n            <strong>{item.title}</strong>\n            {item.meta && <small>{item.meta}</small>}\n          </L>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** A documentation hub: search first, the collections in their brand, quick starts, popular and new pages. */\nexport function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, ...props }: DocsHubPageProps) {\n  const L = (linkAs ?? \"a\") as React.ElementType;\n  return (\n    <div {...props}>\n      <PageHero eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"grid\">\n        {(search || searchHints) && (\n          <div className=\"kz-tpl-hub-search\">\n            {search}\n            {searchHints && <div className=\"kz-tpl-hub-hints\">{searchHints}</div>}\n          </div>\n        )}\n      </PageHero>\n      <Section id=\"collections\" title={collectionsTitle} headingSize=\"sm\" spacing=\"sm\">\n        <ul className=\"kz-tpl-collections\">\n          {collections.map((c) => (\n            <li key={c.id} className={c.brand ? \"brand-\" + c.brand : undefined}>\n              <div className=\"kz-tpl-collection\">\n                <div className=\"kz-tpl-collection-head\">\n                  {c.mark && <span aria-hidden>{c.mark}</span>}\n                  <L href={c.href}>{c.title}</L>\n                </div>\n                {c.description && <p>{c.description}</p>}\n                {c.links && c.links.length > 0 && (\n                  <ul aria-label={c.title}>\n                    {c.links.map((l) => (\n                      <li key={l.href}>\n                        <L href={l.href}>{l.label}</L>\n                      </li>\n                    ))}\n                  </ul>\n                )}\n              </div>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {(quickstarts || popular) && (\n        <Section spacing=\"sm\" divider aria-label={typeof quickstarts?.title === \"string\" ? quickstarts.title : undefined}>\n          <div className=\"kz-tpl-two\">\n            {quickstarts && (\n              <div className=\"kz-tpl-stack\">\n                <h2 className=\"kz-heading-title kz-tpl-h2\">{quickstarts.title}</h2>\n                {quickstarts.children}\n              </div>\n            )}\n            {popular && (\n              <div className=\"kz-tpl-stack\">\n                <h2 className=\"kz-heading-title kz-tpl-h2\">{popular.title}</h2>\n                <List items={popular.items} linkAs={linkAs} />\n              </div>\n            )}\n          </div>\n        </Section>\n      )}\n      {whatsNew && (\n        <Section id=\"whats-new\" title={whatsNew.title} headingSize=\"sm\" spacing=\"sm\" divider>\n          <List items={whatsNew.items} linkAs={linkAs} />\n        </Section>\n      )}\n      {promise && (\n        <Section spacing=\"sm\" aria-label={typeof promise.label === \"string\" ? promise.label : undefined}>\n          <MascotQuote variant=\"callout\" bird=\"owl\" mood=\"welcome\" label={promise.label}>\n            {promise.text}\n          </MascotQuote>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA8Df,SACE,KADF;AANV,SAAS,KAAK,EAAE,OAAO,QAAQ,OAAO,IAAI,GAA8D;AACtG,QAAM,IAAI;AACV,SACE,oBAAC,QAAG,WAAU,gBACX,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,QACC,+BAAC,KAAE,MAAM,KAAK,MACZ;AAAA,wBAAC,YAAQ,eAAK,OAAM;AAAA,IACnB,KAAK,QAAQ,oBAAC,WAAO,eAAK,MAAK;AAAA,KAClC,KAJO,GAAG,CAAC,IAAI,KAAK,IAAI,EAK1B,CACD,GACH;AAEJ;AAGO,SAAS,YAAY,EAAE,SAAS,OAAO,MAAM,QAAQ,aAAa,kBAAkB,aAAa,aAAa,SAAS,UAAU,SAAS,QAAQ,GAAG,MAAM,GAAqB;AACrL,QAAM,IAAK,UAAU;AACrB,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,QAC1E,qBAAU,gBACV,qBAAC,SAAI,WAAU,qBACZ;AAAA;AAAA,MACA,eAAe,oBAAC,SAAI,WAAU,oBAAoB,uBAAY;AAAA,OACjE,GAEJ;AAAA,IACA,oBAAC,WAAQ,IAAG,eAAc,OAAO,kBAAkB,aAAY,MAAK,SAAQ,MAC1E,8BAAC,QAAG,WAAU,sBACX,sBAAY,IAAI,CAAC,MAChB,oBAAC,QAAc,WAAW,EAAE,QAAQ,WAAW,EAAE,QAAQ,QACvD,+BAAC,SAAI,WAAU,qBACb;AAAA,2BAAC,SAAI,WAAU,0BACZ;AAAA,UAAE,QAAQ,oBAAC,UAAK,eAAW,MAAE,YAAE,MAAK;AAAA,QACrC,oBAAC,KAAE,MAAM,EAAE,MAAO,YAAE,OAAM;AAAA,SAC5B;AAAA,MACC,EAAE,eAAe,oBAAC,OAAG,YAAE,aAAY;AAAA,MACnC,EAAE,SAAS,EAAE,MAAM,SAAS,KAC3B,oBAAC,QAAG,cAAY,EAAE,OACf,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC,8BAAC,KAAE,MAAM,EAAE,MAAO,YAAE,OAAM,KADnB,EAAE,IAEX,CACD,GACH;AAAA,OAEJ,KAhBO,EAAE,EAiBX,CACD,GACH,GACF;AAAA,KACE,eAAe,YACf,oBAAC,WAAQ,SAAQ,MAAK,SAAO,MAAC,cAAY,OAAO,aAAa,UAAU,WAAW,YAAY,QAAQ,QACrG,+BAAC,SAAI,WAAU,cACZ;AAAA,qBACC,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,QAAG,WAAU,8BAA8B,sBAAY,OAAM;AAAA,QAC7D,YAAY;AAAA,SACf;AAAA,MAED,WACC,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,QAAG,WAAU,8BAA8B,kBAAQ,OAAM;AAAA,QAC1D,oBAAC,QAAK,OAAO,QAAQ,OAAO,QAAgB;AAAA,SAC9C;AAAA,OAEJ,GACF;AAAA,IAED,YACC,oBAAC,WAAQ,IAAG,aAAY,OAAO,SAAS,OAAO,aAAY,MAAK,SAAQ,MAAK,SAAO,MAClF,8BAAC,QAAK,OAAO,SAAS,OAAO,QAAgB,GAC/C;AAAA,IAED,WACC,oBAAC,WAAQ,SAAQ,MAAK,cAAY,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ,QACpF,8BAAC,eAAY,SAAQ,WAAU,MAAK,OAAM,MAAK,WAAU,OAAO,QAAQ,OACrE,kBAAQ,MACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/docs-hub-page/docs-hub-page.tsx"],"sourcesContent":["// Server-safe. The entry of a documentation (blocks.css `.kz-tpl-hub-*`, `.kz-tpl-collections`): the search in the\n// middle of the hero, the collections each in its product's brand with its quick links, the quick starts beside the\n// most read pages, what is new from the registries, and the owl's promise. One column on a phone, the search first.\nimport { MascotQuote } from \"@krizaka/ui/mascot-quote\";\nimport { Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport * as React from \"react\";\n\nexport interface DocsCollection {\n  /** A stable key. */\n  id: string;\n  /** The product's brand (`orazaka`…): the panel wears `.brand-<id>`. */\n  brand?: string;\n  /** The product's mark. */\n  mark?: React.ReactNode;\n  /** The collection's name: a link to its home. */\n  title: string;\n  /** Where it starts. */\n  href: string;\n  /** What it covers, in one sentence. */\n  description?: React.ReactNode;\n  /** Its most useful pages (three or four). */\n  links?: readonly { href: string; label: string }[];\n}\n\nexport interface DocsHubLink {\n  /** Where it leads. */\n  href: string;\n  /** The page's title. */\n  title: React.ReactNode;\n  /** On the right, in mono: a collection, a version, a date. */\n  meta?: React.ReactNode;\n}\n\nexport type DocsHubPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One sentence under it. */\n  lead?: React.ReactNode;\n  /** The search, front and centre (a SearchField, a button that opens the command palette). */\n  search?: React.ReactNode;\n  /** Under the search: what people look for (a few links or keys). */\n  searchHints?: React.ReactNode;\n  /** The collections' heading. */\n  collectionsTitle: React.ReactNode;\n  /** The collections, each in its brand. */\n  collections: readonly DocsCollection[];\n  /** The quick starts: a title and their samples (CodeBlocks, CodeTabs). */\n  quickstarts?: { title: React.ReactNode; children: React.ReactNode };\n  /** The most read pages. */\n  popular?: { title: React.ReactNode; items: readonly DocsHubLink[] };\n  /** What is new (releases from the registries, published pages). */\n  whatsNew?: { title: React.ReactNode; items: readonly DocsHubLink[] };\n  /** The owl's promise at the foot: what this documentation guarantees. */\n  promise?: { label: React.ReactNode; text: React.ReactNode };\n  /** The app's link component (Next's `Link`) for internal addresses. */\n  linkAs?: LinkComponent;\n  /**\n   * How a collection's quick links sit: `wrap` (pills in a row that wraps) or `stack` (one pill per line, so the first\n   * link of every card starts at the same height).\n   * @default \"wrap\"\n   */\n  linksLayout?: \"wrap\" | \"stack\";\n};\n\nfunction List({ items, linkAs: Link = \"a\" }: { items: readonly DocsHubLink[]; linkAs?: LinkComponent }) {\n  const L = Link as React.ElementType;\n  return (\n    <ul className=\"kz-tpl-links\">\n      {items.map((item, i) => (\n        <li key={`${i}:${item.href}`}>\n          <L href={item.href}>\n            <strong>{item.title}</strong>\n            {item.meta && <small>{item.meta}</small>}\n          </L>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** A documentation hub: search first, the collections in their brand, quick starts, popular and new pages. */\nexport function DocsHubPage({ eyebrow, title, lead, search, searchHints, collectionsTitle, collections, quickstarts, popular, whatsNew, promise, linkAs, linksLayout = \"wrap\", ...props }: DocsHubPageProps) {\n  const L = (linkAs ?? \"a\") as React.ElementType;\n  return (\n    <div {...props}>\n      <PageHero eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"grid\">\n        {(search || searchHints) && (\n          <div className=\"kz-tpl-hub-search\">\n            {search}\n            {searchHints && <div className=\"kz-tpl-hub-hints\">{searchHints}</div>}\n          </div>\n        )}\n      </PageHero>\n      <Section id=\"collections\" title={collectionsTitle} headingSize=\"sm\" spacing=\"sm\">\n        <ul className=\"kz-tpl-collections\">\n          {collections.map((c) => (\n            <li key={c.id} className={c.brand ? \"brand-\" + c.brand : undefined}>\n              <div className=\"kz-tpl-collection\" data-links={linksLayout}>\n                <div className=\"kz-tpl-collection-head\">\n                  {c.mark && <span aria-hidden>{c.mark}</span>}\n                  <L href={c.href}>{c.title}</L>\n                </div>\n                {c.description && <p>{c.description}</p>}\n                {c.links && c.links.length > 0 && (\n                  <ul aria-label={c.title}>\n                    {c.links.map((l) => (\n                      <li key={l.href}>\n                        <L href={l.href}>{l.label}</L>\n                      </li>\n                    ))}\n                  </ul>\n                )}\n              </div>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {(quickstarts || popular) && (\n        <Section spacing=\"sm\" divider aria-label={typeof quickstarts?.title === \"string\" ? quickstarts.title : undefined}>\n          <div className=\"kz-tpl-two\">\n            {quickstarts && (\n              <div className=\"kz-tpl-stack\">\n                <h2 className=\"kz-heading-title kz-tpl-h2\">{quickstarts.title}</h2>\n                {quickstarts.children}\n              </div>\n            )}\n            {popular && (\n              <div className=\"kz-tpl-stack\">\n                <h2 className=\"kz-heading-title kz-tpl-h2\">{popular.title}</h2>\n                <List items={popular.items} linkAs={linkAs} />\n              </div>\n            )}\n          </div>\n        </Section>\n      )}\n      {whatsNew && (\n        <Section id=\"whats-new\" title={whatsNew.title} headingSize=\"sm\" spacing=\"sm\" divider>\n          <List items={whatsNew.items} linkAs={linkAs} />\n        </Section>\n      )}\n      {promise && (\n        <Section spacing=\"sm\" aria-label={typeof promise.label === \"string\" ? promise.label : undefined}>\n          <MascotQuote variant=\"callout\" bird=\"owl\" mood=\"welcome\" label={promise.label}>\n            {promise.text}\n          </MascotQuote>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAGA,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAoEf,SACE,KADF;AANV,SAAS,KAAK,EAAE,OAAO,QAAQ,OAAO,IAAI,GAA8D;AACtG,QAAM,IAAI;AACV,SACE,oBAAC,QAAG,WAAU,gBACX,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,QACC,+BAAC,KAAE,MAAM,KAAK,MACZ;AAAA,wBAAC,YAAQ,eAAK,OAAM;AAAA,IACnB,KAAK,QAAQ,oBAAC,WAAO,eAAK,MAAK;AAAA,KAClC,KAJO,GAAG,CAAC,IAAI,KAAK,IAAI,EAK1B,CACD,GACH;AAEJ;AAGO,SAAS,YAAY,EAAE,SAAS,OAAO,MAAM,QAAQ,aAAa,kBAAkB,aAAa,aAAa,SAAS,UAAU,SAAS,QAAQ,cAAc,QAAQ,GAAG,MAAM,GAAqB;AAC3M,QAAM,IAAK,UAAU;AACrB,SACE,qBAAC,SAAK,GAAG,OACP;AAAA,wBAAC,YAAS,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,QAC1E,qBAAU,gBACV,qBAAC,SAAI,WAAU,qBACZ;AAAA;AAAA,MACA,eAAe,oBAAC,SAAI,WAAU,oBAAoB,uBAAY;AAAA,OACjE,GAEJ;AAAA,IACA,oBAAC,WAAQ,IAAG,eAAc,OAAO,kBAAkB,aAAY,MAAK,SAAQ,MAC1E,8BAAC,QAAG,WAAU,sBACX,sBAAY,IAAI,CAAC,MAChB,oBAAC,QAAc,WAAW,EAAE,QAAQ,WAAW,EAAE,QAAQ,QACvD,+BAAC,SAAI,WAAU,qBAAoB,cAAY,aAC7C;AAAA,2BAAC,SAAI,WAAU,0BACZ;AAAA,UAAE,QAAQ,oBAAC,UAAK,eAAW,MAAE,YAAE,MAAK;AAAA,QACrC,oBAAC,KAAE,MAAM,EAAE,MAAO,YAAE,OAAM;AAAA,SAC5B;AAAA,MACC,EAAE,eAAe,oBAAC,OAAG,YAAE,aAAY;AAAA,MACnC,EAAE,SAAS,EAAE,MAAM,SAAS,KAC3B,oBAAC,QAAG,cAAY,EAAE,OACf,YAAE,MAAM,IAAI,CAAC,MACZ,oBAAC,QACC,8BAAC,KAAE,MAAM,EAAE,MAAO,YAAE,OAAM,KADnB,EAAE,IAEX,CACD,GACH;AAAA,OAEJ,KAhBO,EAAE,EAiBX,CACD,GACH,GACF;AAAA,KACE,eAAe,YACf,oBAAC,WAAQ,SAAQ,MAAK,SAAO,MAAC,cAAY,OAAO,aAAa,UAAU,WAAW,YAAY,QAAQ,QACrG,+BAAC,SAAI,WAAU,cACZ;AAAA,qBACC,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,QAAG,WAAU,8BAA8B,sBAAY,OAAM;AAAA,QAC7D,YAAY;AAAA,SACf;AAAA,MAED,WACC,qBAAC,SAAI,WAAU,gBACb;AAAA,4BAAC,QAAG,WAAU,8BAA8B,kBAAQ,OAAM;AAAA,QAC1D,oBAAC,QAAK,OAAO,QAAQ,OAAO,QAAgB;AAAA,SAC9C;AAAA,OAEJ,GACF;AAAA,IAED,YACC,oBAAC,WAAQ,IAAG,aAAY,OAAO,SAAS,OAAO,aAAY,MAAK,SAAQ,MAAK,SAAO,MAClF,8BAAC,QAAK,OAAO,SAAS,OAAO,QAAgB,GAC/C;AAAA,IAED,WACC,oBAAC,WAAQ,SAAQ,MAAK,cAAY,OAAO,QAAQ,UAAU,WAAW,QAAQ,QAAQ,QACpF,8BAAC,eAAY,SAAQ,WAAU,MAAK,OAAM,MAAK,WAAU,OAAO,QAAQ,OACrE,kBAAQ,MACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/engine-flow.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+/** How the nodes are placed around the hub. */
+type FlowLayout = "radial" | "top-to-bottom" | "left-to-right";
+/** The shape of a conduit: an S-shaped cubic Bézier, or a straight line. */
+type FlowConduit = "bezier" | "straight";
+interface FlowPoint {
+    x: number;
+    y: number;
+}
+interface FlowGeometry {
+    /** The box: 100 units wide, `height` units high (the stage keeps this aspect ratio, so nothing is distorted). */
+    width: number;
+    height: number;
+    hub: FlowPoint;
+    nodes: FlowPoint[];
+    /** One path per node, from the node to the hub. */
+    paths: string[];
+    /** The length of each path, in units. */
+    lengths: number[];
+}
+/** The box height per layout (the width is always 100). */
+declare const FLOW_HEIGHT: Record<FlowLayout, number>;
+/** The positions of `count` nodes around the hub. */
+declare function flowPositions(layout: FlowLayout, count: number): {
+    hub: FlowPoint;
+    nodes: FlowPoint[];
+};
+/** The whole geometry of a flow: positions, conduits (node → hub) and their lengths. */
+declare function flowGeometry(layout: FlowLayout, count: number, conduit?: FlowConduit): FlowGeometry;
+
+interface EngineFlowNode {
+    /** A stable id (`orochia`). */
+    id: string;
+    /** Its name, the button's accessible name ("Orochia"). */
+    label: string;
+    /** Its mark (a `ProductLogo`), decorative. */
+    mark?: React.ReactNode;
+    /** One line: what it uses the engine for — shown when the node is pointed at or focused. */
+    description?: React.ReactNode;
+    /** Where it lives (its site). */
+    href?: string;
+    /** The link's words ("Visit dev.orochia.com"); defaults to the label. */
+    linkLabel?: React.ReactNode;
+    /** Opens the link in a new tab. */
+    external?: boolean;
+    /** What travels: `in` towards the hub, `out` back from it, `both`.
+     * @default "in" */
+    flow?: "in" | "out" | "both";
+    /** Not wired yet: drawn dim, its conduit dashed and still, no photon. */
+    planned?: boolean;
+    /** A word beside the name in the detail line ("planned"), passed translated. */
+    status?: React.ReactNode;
+    /** Its brand scope (`brand-orochia`): its conduit, photons and ring take its `--kz-accent`. */
+    className?: string;
+}
+interface EngineFlowHub {
+    /** The engine's name ("Orazaka"). */
+    label: string;
+    /** Its mark, decorative. */
+    mark?: React.ReactNode;
+    /** A line under the name ("the engine"). */
+    caption?: React.ReactNode;
+    /** Its brand scope; the photons coming back take its accent. */
+    className?: string;
+}
+type EngineFlowProps = Omit<React.ComponentProps<"figure">, "children"> & {
+    /** What the figure shows ("Orazaka and the products it powers"), passed translated. */
+    label: string;
+    /** The engine, at the hub. */
+    hub: EngineFlowHub;
+    /** The apps around it. */
+    nodes: readonly EngineFlowNode[];
+    /** How the nodes sit around the hub.
+     * @default "radial" */
+    layout?: FlowLayout;
+    /** The layout under a 560 px wide container (a phone); `false` keeps `layout` everywhere.
+     * @default "top-to-bottom" */
+    compactLayout?: FlowLayout | false;
+    /** `photons` travel the conduits; `none` draws them still.
+     * @default "photons" */
+    particles?: "photons" | "none";
+    /** The conduits' shape.
+     * @default "bezier" */
+    conduit?: FlowConduit;
+    /** The detail line before a node is chosen ("Point at a product"). */
+    hint?: React.ReactNode;
+    /** The node shown in the detail line at first. */
+    defaultActive?: string;
+    /** Photon speed, in units per second (the stage is 100 units wide).
+     * @default 16 */
+    speed?: number;
+};
+/** An engine at the hub and the apps it serves, with what travels between them. */
+declare function EngineFlow({ label, hub, nodes, layout, compactLayout, particles, conduit, hint, defaultActive, speed, className, ...props }: EngineFlowProps): React.JSX.Element;
+
+export { EngineFlow, type EngineFlowHub, type EngineFlowNode, type EngineFlowProps, FLOW_HEIGHT, type FlowConduit, type FlowGeometry, type FlowLayout, type FlowPoint, flowGeometry, flowPositions };

package/dist/engine-flow.js

@@ -0,0 +1,214 @@
+"use client";
+import {
+  cn
+} from "./chunk-NSLXEDIS.js";
+
+// src/engine-flow/engine-flow.tsx
+import * as React from "react";
+
+// src/engine-flow/geometry.ts
+var FLOW_HEIGHT = { radial: 60, "top-to-bottom": 92, "left-to-right": 56 };
+var r2 = (n) => Math.round(n * 100) / 100;
+var pt = (p) => `${r2(p.x)} ${r2(p.y)}`;
+function cubicLength(a, b, c, d) {
+  let length = 0;
+  let prev = a;
+  for (let i = 1; i <= 32; i++) {
+    const t = i / 32;
+    const u = 1 - t;
+    const p = {
+      x: u * u * u * a.x + 3 * u * u * t * b.x + 3 * u * t * t * c.x + t * t * t * d.x,
+      y: u * u * u * a.y + 3 * u * u * t * b.y + 3 * u * t * t * c.y + t * t * t * d.y
+    };
+    length += Math.hypot(p.x - prev.x, p.y - prev.y);
+    prev = p;
+  }
+  return length;
+}
+function flowPositions(layout, count) {
+  const height = FLOW_HEIGHT[layout];
+  const n = Math.max(0, count);
+  if (layout === "top-to-bottom") {
+    return { hub: { x: 50, y: 72 }, nodes: Array.from({ length: n }, (_, i) => ({ x: (i + 0.5) * 100 / n, y: 13 })) };
+  }
+  if (layout === "left-to-right") {
+    return { hub: { x: 80, y: height / 2 }, nodes: Array.from({ length: n }, (_, i) => ({ x: 12, y: (i + 0.5) * height / n })) };
+  }
+  const hub = { x: 50, y: height / 2 };
+  const start = n % 2 === 0 ? -90 + 180 / Math.max(n, 1) : -90;
+  return {
+    hub,
+    nodes: Array.from({ length: n }, (_, i) => {
+      const a = (start + 360 / n * i) * Math.PI / 180;
+      return { x: hub.x + 37 * Math.cos(a), y: hub.y + 20 * Math.sin(a) };
+    })
+  };
+}
+function flowGeometry(layout, count, conduit = "bezier") {
+  const { hub, nodes } = flowPositions(layout, count);
+  const paths = [];
+  const lengths = [];
+  for (const p of nodes) {
+    const end = layout === "top-to-bottom" ? { x: hub.x + (p.x - hub.x) * 0.18, y: hub.y } : layout === "left-to-right" ? { x: hub.x, y: hub.y + (p.y - hub.y) * 0.18 } : hub;
+    if (conduit === "straight") {
+      paths.push(`M${pt(p)} L${pt(end)}`);
+      lengths.push(Math.hypot(end.x - p.x, end.y - p.y));
+      continue;
+    }
+    let c1;
+    let c2;
+    if (layout === "top-to-bottom") {
+      const mid = (p.y + end.y) / 2;
+      c1 = { x: p.x, y: mid };
+      c2 = { x: end.x, y: mid };
+    } else if (layout === "left-to-right") {
+      const mid = (p.x + end.x) / 2;
+      c1 = { x: mid, y: p.y };
+      c2 = { x: mid, y: end.y };
+    } else {
+      const dx = end.x - p.x;
+      const dy = end.y - p.y;
+      const len = Math.hypot(dx, dy) || 1;
+      const k = 0.14 * len;
+      const nx = -dy / len;
+      const ny = dx / len;
+      c1 = { x: p.x + dx * 0.35 + nx * k, y: p.y + dy * 0.35 + ny * k };
+      c2 = { x: p.x + dx * 0.65 - nx * k, y: p.y + dy * 0.65 - ny * k };
+    }
+    paths.push(`M${pt(p)} C${pt(c1)} ${pt(c2)} ${pt(end)}`);
+    lengths.push(cubicLength(p, c1, c2, end));
+  }
+  return { width: 100, height: FLOW_HEIGHT[layout], hub, nodes, paths, lengths };
+}
+
+// src/engine-flow/engine-flow.tsx
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function Stage({
+  layout,
+  variant,
+  nodes,
+  hub,
+  conduit,
+  particles,
+  speed,
+  active,
+  onActive,
+  detailId
+}) {
+  const g = flowGeometry(layout, nodes.length, conduit);
+  const pct = (v, of) => `${(v / of * 100).toFixed(3)}%`;
+  return /* @__PURE__ */ jsxs("div", { className: "kz-flow-stage", "data-variant": variant, "data-layout": layout, style: { aspectRatio: `${g.width} / ${g.height}` }, children: [
+    /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${g.width} ${g.height}`, "aria-hidden": "true", focusable: "false", children: nodes.map((node, i) => {
+      const flow = node.flow ?? "in";
+      const length = g.lengths[i] ?? 0;
+      const gap = length / Math.min(4, Math.max(2, Math.round(length / 16)));
+      const timing = (dir) => ({
+        "--kz-flow-gap": gap.toFixed(3),
+        animationDuration: `${(gap / speed).toFixed(2)}s`,
+        animationDelay: `${(-((i * 0.37 + (dir === "out" ? 0.5 : 0)) % 1) * (gap / speed)).toFixed(2)}s`
+      });
+      const lanes = node.planned || particles === "none" ? [] : flow === "both" ? ["in", "out"] : [flow];
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          className: cn("kz-flow-link", node.className),
+          "data-flow": flow,
+          "data-planned": node.planned ? "" : void 0,
+          "data-active": active === node.id ? "" : void 0,
+          children: [
+            /* @__PURE__ */ jsx("path", { className: "kz-flow-wire", d: g.paths[i] }),
+            lanes.map((dir) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsx("path", { className: "kz-flow-photon kz-loop", "data-dir": dir, "data-halo": "", d: g.paths[i], style: timing(dir) }),
+              /* @__PURE__ */ jsx("path", { className: "kz-flow-photon kz-loop", "data-dir": dir, d: g.paths[i], style: timing(dir) })
+            ] }, dir))
+          ]
+        },
+        node.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: cn("kz-flow-hub", hub.className), style: { left: pct(g.hub.x, g.width), top: pct(g.hub.y, g.height) }, children: [
+      hub.mark ? /* @__PURE__ */ jsx("span", { className: "kz-flow-hub-mark", children: hub.mark }) : null,
+      /* @__PURE__ */ jsx("span", { className: "kz-flow-hub-label", children: hub.label }),
+      hub.caption ? /* @__PURE__ */ jsx("span", { className: "kz-flow-hub-caption", children: hub.caption }) : null
+    ] }),
+    /* @__PURE__ */ jsx("ul", { className: "kz-flow-nodes", children: nodes.map((node, i) => {
+      const p = g.nodes[i];
+      const on = active === node.id;
+      return /* @__PURE__ */ jsx("li", { style: { left: pct(p.x, g.width), top: pct(p.y, g.height) }, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn("kz-flow-node", node.className),
+          "data-active": on ? "" : void 0,
+          "data-planned": node.planned ? "" : void 0,
+          "aria-pressed": on,
+          "aria-controls": detailId,
+          onPointerEnter: () => onActive(node.id),
+          onFocus: () => onActive(node.id),
+          onClick: () => onActive(node.id),
+          children: [
+            node.mark ? /* @__PURE__ */ jsx("span", { className: "kz-flow-node-mark", "aria-hidden": "true", children: node.mark }) : null,
+            /* @__PURE__ */ jsx("span", { className: "kz-flow-node-label", children: node.label })
+          ]
+        }
+      ) }, node.id);
+    }) })
+  ] });
+}
+function EngineFlow({
+  label,
+  hub,
+  nodes,
+  layout = "radial",
+  compactLayout = "top-to-bottom",
+  particles = "photons",
+  conduit = "bezier",
+  hint,
+  defaultActive,
+  speed = 16,
+  className,
+  ...props
+}) {
+  const [active, setActive] = React.useState(defaultActive);
+  const detailId = `${React.useId()}-detail`;
+  const chosen = nodes.find((n) => n.id === active);
+  const compact = compactLayout && compactLayout !== layout ? compactLayout : void 0;
+  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), active, onActive: setActive, detailId };
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      "aria-label": label,
+      className: cn("kz-flow", className),
+      "data-motion-scope": "",
+      "data-active": chosen ? "" : void 0,
+      "data-compact": compact ? "" : void 0,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Stage, { layout, variant: "wide", ...stage }),
+        compact ? /* @__PURE__ */ jsx(Stage, { layout: compact, variant: "compact", ...stage }) : null,
+        /* @__PURE__ */ jsx("figcaption", { id: detailId, className: cn("kz-flow-detail", chosen?.className), "aria-live": "polite", children: chosen ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx("strong", { children: chosen.label }),
+          chosen.status ? /* @__PURE__ */ jsx("span", { className: "kz-flow-status", children: chosen.status }) : null,
+          chosen.description ? /* @__PURE__ */ jsxs("span", { children: [
+            " ",
+            chosen.description
+          ] }) : null,
+          chosen.href ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+            " ",
+            /* @__PURE__ */ jsxs("a", { href: chosen.href, ...chosen.external ? { target: "_blank", rel: "noopener" } : {}, children: [
+              chosen.linkLabel ?? chosen.label,
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \u2192" })
+            ] })
+          ] }) : null
+        ] }) : hint })
+      ]
+    }
+  );
+}
+export {
+  EngineFlow,
+  FLOW_HEIGHT,
+  flowGeometry,
+  flowPositions
+};
+//# sourceMappingURL=engine-flow.js.map

package/dist/engine-flow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/engine-flow/engine-flow.tsx","../src/engine-flow/geometry.ts"],"sourcesContent":["// Client (the node a visitor points at or focuses). An engine at the hub and the apps it serves around it: one conduit\n// per app, and photons that travel it — towards the hub (`in`: requests), back (`out`: results) or both — in the app's\n// brand colour going in and the hub's coming back. A planned app is drawn dim, its conduit dashed and still.\n//\n// Motion is the Krizaka signature's (motion.css): CSS animations of `stroke-dashoffset`, no animation frame, no canvas;\n// paused off screen (`data-motion-scope` → MotionObserver's `data-offscreen`), held while the page settles (`kz-loop`),\n// a still frame under reduced motion (the photons rest along their conduit). The stage keeps its aspect ratio and the\n// detail line its height: no layout shift.\n//\n// Accessible: the drawing is hidden from assistive technology; every node is a real button named by its label, and the\n// detail line (polite live region) says the chosen node's description with its link. Pair it with a text version (a\n// list) in the page: the figure is a picture of it.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { type FlowConduit, flowGeometry, type FlowLayout } from \"./geometry\";\n\nexport interface EngineFlowNode {\n  /** A stable id (`orochia`). */\n  id: string;\n  /** Its name, the button's accessible name (\"Orochia\"). */\n  label: string;\n  /** Its mark (a `ProductLogo`), decorative. */\n  mark?: React.ReactNode;\n  /** One line: what it uses the engine for — shown when the node is pointed at or focused. */\n  description?: React.ReactNode;\n  /** Where it lives (its site). */\n  href?: string;\n  /** The link's words (\"Visit dev.orochia.com\"); defaults to the label. */\n  linkLabel?: React.ReactNode;\n  /** Opens the link in a new tab. */\n  external?: boolean;\n  /** What travels: `in` towards the hub, `out` back from it, `both`.\n   * @default \"in\" */\n  flow?: \"in\" | \"out\" | \"both\";\n  /** Not wired yet: drawn dim, its conduit dashed and still, no photon. */\n  planned?: boolean;\n  /** A word beside the name in the detail line (\"planned\"), passed translated. */\n  status?: React.ReactNode;\n  /** Its brand scope (`brand-orochia`): its conduit, photons and ring take its `--kz-accent`. */\n  className?: string;\n}\n\nexport interface EngineFlowHub {\n  /** The engine's name (\"Orazaka\"). */\n  label: string;\n  /** Its mark, decorative. */\n  mark?: React.ReactNode;\n  /** A line under the name (\"the engine\"). */\n  caption?: React.ReactNode;\n  /** Its brand scope; the photons coming back take its accent. */\n  className?: string;\n}\n\nexport type EngineFlowProps = Omit<React.ComponentProps<\"figure\">, \"children\"> & {\n  /** What the figure shows (\"Orazaka and the products it powers\"), passed translated. */\n  label: string;\n  /** The engine, at the hub. */\n  hub: EngineFlowHub;\n  /** The apps around it. */\n  nodes: readonly EngineFlowNode[];\n  /** How the nodes sit around the hub.\n   * @default \"radial\" */\n  layout?: FlowLayout;\n  /** The layout under a 560 px wide container (a phone); `false` keeps `layout` everywhere.\n   * @default \"top-to-bottom\" */\n  compactLayout?: FlowLayout | false;\n  /** `photons` travel the conduits; `none` draws them still.\n   * @default \"photons\" */\n  particles?: \"photons\" | \"none\";\n  /** The conduits' shape.\n   * @default \"bezier\" */\n  conduit?: FlowConduit;\n  /** The detail line before a node is chosen (\"Point at a product\"). */\n  hint?: React.ReactNode;\n  /** The node shown in the detail line at first. */\n  defaultActive?: string;\n  /** Photon speed, in units per second (the stage is 100 units wide).\n   * @default 16 */\n  speed?: number;\n};\n\nfunction Stage({\n  layout,\n  variant,\n  nodes,\n  hub,\n  conduit,\n  particles,\n  speed,\n  active,\n  onActive,\n  detailId,\n}: {\n  layout: FlowLayout;\n  variant: \"wide\" | \"compact\";\n  nodes: readonly EngineFlowNode[];\n  hub: EngineFlowHub;\n  conduit: FlowConduit;\n  particles: \"photons\" | \"none\";\n  speed: number;\n  active: string | undefined;\n  onActive: (id: string) => void;\n  detailId: string;\n}) {\n  const g = flowGeometry(layout, nodes.length, conduit);\n  const pct = (v: number, of: number) => `${((v / of) * 100).toFixed(3)}%`;\n  return (\n    <div className=\"kz-flow-stage\" data-variant={variant} data-layout={layout} style={{ aspectRatio: `${g.width} / ${g.height}` }}>\n      <svg viewBox={`0 0 ${g.width} ${g.height}`} aria-hidden=\"true\" focusable=\"false\">\n        {nodes.map((node, i) => {\n          const flow = node.flow ?? \"in\";\n          const length = g.lengths[i] ?? 0;\n          // Two to four photons per conduit, evenly spaced; the same speed on every conduit.\n          const gap = length / Math.min(4, Math.max(2, Math.round(length / 16)));\n          const timing = (dir: \"in\" | \"out\") =>\n            ({\n              \"--kz-flow-gap\": gap.toFixed(3),\n              animationDuration: `${(gap / speed).toFixed(2)}s`,\n              animationDelay: `${(-((i * 0.37 + (dir === \"out\" ? 0.5 : 0)) % 1) * (gap / speed)).toFixed(2)}s`,\n            }) as React.CSSProperties;\n          const lanes = node.planned || particles === \"none\" ? [] : flow === \"both\" ? ([\"in\", \"out\"] as const) : [flow];\n          return (\n            <g\n              key={node.id}\n              className={cn(\"kz-flow-link\", node.className)}\n              data-flow={flow}\n              data-planned={node.planned ? \"\" : undefined}\n              data-active={active === node.id ? \"\" : undefined}\n            >\n              <path className=\"kz-flow-wire\" d={g.paths[i]} />\n              {lanes.map((dir) => (\n                <React.Fragment key={dir}>\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} data-halo=\"\" d={g.paths[i]} style={timing(dir)} />\n                  <path className=\"kz-flow-photon kz-loop\" data-dir={dir} d={g.paths[i]} style={timing(dir)} />\n                </React.Fragment>\n              ))}\n            </g>\n          );\n        })}\n      </svg>\n      <div className={cn(\"kz-flow-hub\", hub.className)} style={{ left: pct(g.hub.x, g.width), top: pct(g.hub.y, g.height) }}>\n        {hub.mark ? <span className=\"kz-flow-hub-mark\">{hub.mark}</span> : null}\n        <span className=\"kz-flow-hub-label\">{hub.label}</span>\n        {hub.caption ? <span className=\"kz-flow-hub-caption\">{hub.caption}</span> : null}\n      </div>\n      <ul className=\"kz-flow-nodes\">\n        {nodes.map((node, i) => {\n          const p = g.nodes[i]!;\n          const on = active === node.id;\n          return (\n            <li key={node.id} style={{ left: pct(p.x, g.width), top: pct(p.y, g.height) }}>\n              <button\n                type=\"button\"\n                className={cn(\"kz-flow-node\", node.className)}\n                data-active={on ? \"\" : undefined}\n                data-planned={node.planned ? \"\" : undefined}\n                aria-pressed={on}\n                aria-controls={detailId}\n                onPointerEnter={() => onActive(node.id)}\n                onFocus={() => onActive(node.id)}\n                onClick={() => onActive(node.id)}\n              >\n                {node.mark ? (\n                  <span className=\"kz-flow-node-mark\" aria-hidden=\"true\">\n                    {node.mark}\n                  </span>\n                ) : null}\n                <span className=\"kz-flow-node-label\">{node.label}</span>\n              </button>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n\n/** An engine at the hub and the apps it serves, with what travels between them. */\nexport function EngineFlow({\n  label,\n  hub,\n  nodes,\n  layout = \"radial\",\n  compactLayout = \"top-to-bottom\",\n  particles = \"photons\",\n  conduit = \"bezier\",\n  hint,\n  defaultActive,\n  speed = 16,\n  className,\n  ...props\n}: EngineFlowProps) {\n  const [active, setActive] = React.useState<string | undefined>(defaultActive);\n  const detailId = `${React.useId()}-detail`;\n  const chosen = nodes.find((n) => n.id === active);\n  const compact = compactLayout && compactLayout !== layout ? compactLayout : undefined;\n  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), active, onActive: setActive, detailId };\n  return (\n    <figure\n      aria-label={label}\n      className={cn(\"kz-flow\", className)}\n      data-motion-scope=\"\"\n      data-active={chosen ? \"\" : undefined}\n      data-compact={compact ? \"\" : undefined}\n      {...props}\n    >\n      <Stage layout={layout} variant=\"wide\" {...stage} />\n      {compact ? <Stage layout={compact} variant=\"compact\" {...stage} /> : null}\n      <figcaption id={detailId} className={cn(\"kz-flow-detail\", chosen?.className)} aria-live=\"polite\">\n        {chosen ? (\n          <>\n            <strong>{chosen.label}</strong>\n            {chosen.status ? <span className=\"kz-flow-status\">{chosen.status}</span> : null}\n            {chosen.description ? <span> {chosen.description}</span> : null}\n            {chosen.href ? (\n              <>\n                {\" \"}\n                <a href={chosen.href} {...(chosen.external ? { target: \"_blank\", rel: \"noopener\" } : {})}>\n                  {chosen.linkLabel ?? chosen.label}\n                  <span aria-hidden=\"true\"> →</span>\n                </a>\n              </>\n            ) : null}\n          </>\n        ) : (\n          hint\n        )}\n      </figcaption>\n    </figure>\n  );\n}\n","// Server-safe, pure. The geometry of EngineFlow: where the hub and the nodes sit in a box 100 units wide, and the\n// conduit from each node to the hub (an SVG path drawn node → hub, and its length, so photons travel at one speed on\n// every conduit). No DOM: the same numbers on the server and in the browser.\n\n/** How the nodes are placed around the hub. */\nexport type FlowLayout = \"radial\" | \"top-to-bottom\" | \"left-to-right\";\n/** The shape of a conduit: an S-shaped cubic Bézier, or a straight line. */\nexport type FlowConduit = \"bezier\" | \"straight\";\n\nexport interface FlowPoint {\n  x: number;\n  y: number;\n}\n\nexport interface FlowGeometry {\n  /** The box: 100 units wide, `height` units high (the stage keeps this aspect ratio, so nothing is distorted). */\n  width: number;\n  height: number;\n  hub: FlowPoint;\n  nodes: FlowPoint[];\n  /** One path per node, from the node to the hub. */\n  paths: string[];\n  /** The length of each path, in units. */\n  lengths: number[];\n}\n\n/** The box height per layout (the width is always 100). */\nexport const FLOW_HEIGHT: Record<FlowLayout, number> = { radial: 60, \"top-to-bottom\": 92, \"left-to-right\": 56 };\n\nconst r2 = (n: number) => Math.round(n * 100) / 100;\nconst pt = (p: FlowPoint) => `${r2(p.x)} ${r2(p.y)}`;\n\nfunction cubicLength(a: FlowPoint, b: FlowPoint, c: FlowPoint, d: FlowPoint): number {\n  let length = 0;\n  let prev = a;\n  for (let i = 1; i <= 32; i++) {\n    const t = i / 32;\n    const u = 1 - t;\n    const p = {\n      x: u * u * u * a.x + 3 * u * u * t * b.x + 3 * u * t * t * c.x + t * t * t * d.x,\n      y: u * u * u * a.y + 3 * u * u * t * b.y + 3 * u * t * t * c.y + t * t * t * d.y,\n    };\n    length += Math.hypot(p.x - prev.x, p.y - prev.y);\n    prev = p;\n  }\n  return length;\n}\n\n/** The positions of `count` nodes around the hub. */\nexport function flowPositions(layout: FlowLayout, count: number): { hub: FlowPoint; nodes: FlowPoint[] } {\n  const height = FLOW_HEIGHT[layout];\n  const n = Math.max(0, count);\n  if (layout === \"top-to-bottom\") {\n    return { hub: { x: 50, y: 72 }, nodes: Array.from({ length: n }, (_, i) => ({ x: ((i + 0.5) * 100) / n, y: 13 })) };\n  }\n  if (layout === \"left-to-right\") {\n    return { hub: { x: 80, y: height / 2 }, nodes: Array.from({ length: n }, (_, i) => ({ x: 12, y: ((i + 0.5) * height) / n })) };\n  }\n  // Radial: on an ellipse around the centre; an even count puts two nodes level with the hub (more room for labels).\n  const hub = { x: 50, y: height / 2 };\n  const start = n % 2 === 0 ? -90 + 180 / Math.max(n, 1) : -90;\n  return {\n    hub,\n    nodes: Array.from({ length: n }, (_, i) => {\n      const a = ((start + (360 / n) * i) * Math.PI) / 180;\n      return { x: hub.x + 37 * Math.cos(a), y: hub.y + 20 * Math.sin(a) };\n    }),\n  };\n}\n\n/** The whole geometry of a flow: positions, conduits (node → hub) and their lengths. */\nexport function flowGeometry(layout: FlowLayout, count: number, conduit: FlowConduit = \"bezier\"): FlowGeometry {\n  const { hub, nodes } = flowPositions(layout, count);\n  const paths: string[] = [];\n  const lengths: number[] = [];\n  for (const p of nodes) {\n    // Each conduit lands on its own point of the hub (a fan), so the lines stay apart where they meet.\n    const end =\n      layout === \"top-to-bottom\"\n        ? { x: hub.x + (p.x - hub.x) * 0.18, y: hub.y }\n        : layout === \"left-to-right\"\n          ? { x: hub.x, y: hub.y + (p.y - hub.y) * 0.18 }\n          : hub;\n    if (conduit === \"straight\") {\n      paths.push(`M${pt(p)} L${pt(end)}`);\n      lengths.push(Math.hypot(end.x - p.x, end.y - p.y));\n      continue;\n    }\n    let c1: FlowPoint;\n    let c2: FlowPoint;\n    if (layout === \"top-to-bottom\") {\n      const mid = (p.y + end.y) / 2;\n      c1 = { x: p.x, y: mid };\n      c2 = { x: end.x, y: mid };\n    } else if (layout === \"left-to-right\") {\n      const mid = (p.x + end.x) / 2;\n      c1 = { x: mid, y: p.y };\n      c2 = { x: mid, y: end.y };\n    } else {\n      // An S: leave the node bending one way, reach the hub bending the other.\n      const dx = end.x - p.x;\n      const dy = end.y - p.y;\n      const len = Math.hypot(dx, dy) || 1;\n      const k = 0.14 * len;\n      const nx = -dy / len;\n      const ny = dx / len;\n      c1 = { x: p.x + dx * 0.35 + nx * k, y: p.y + dy * 0.35 + ny * k };\n      c2 = { x: p.x + dx * 0.65 - nx * k, y: p.y + dy * 0.65 - ny * k };\n    }\n    paths.push(`M${pt(p)} C${pt(c1)} ${pt(c2)} ${pt(end)}`);\n    lengths.push(cubicLength(p, c1, c2, end));\n  }\n  return { width: 100, height: FLOW_HEIGHT[layout], hub, nodes, paths, lengths };\n}\n"],"mappings":"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","names":["Fragment"]}

package/dist/motion.css

@@ -636,11 +636,131 @@ svg[data-kz-icon="ExternalIcon"] {
 @keyframes kz-replay-blink { 50% { opacity: 0; } }
 @keyframes kz-replay-reveal { from { visibility: hidden; } }
 
+/* ─── EngineFlow: an engine at the hub, the apps around it, photons along the conduits ───
+   The stage keeps the geometry's aspect ratio (no layout shift); the conduits are SVG paths in a box 100 units wide,
+   their photons zero-length dashes whose offset slides one gap per period — so every conduit moves at one speed.
+   `--kz-flow-back` is read on the figure: the photons coming back wear the hub's accent, those going in the node's. */
+.kz-flow {
+  --kz-flow-back: var(--kz-accent);
+  --kz-flow-w: 0.22;
+  --kz-flow-mark: 3.25rem;
+  --kz-flow-hub: 5.75rem;
+  position: relative;
+  margin: 0;
+  container-type: inline-size;
+}
+.kz-flow-stage { position: relative; width: 100%; }
+.kz-flow-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.kz-flow[data-compact] > .kz-flow-stage[data-variant="compact"] { display: none; }
+@container (max-width: 559.98px) {
+  .kz-flow[data-compact] > .kz-flow-stage[data-variant="wide"] { display: none; }
+  .kz-flow[data-compact] > .kz-flow-stage[data-variant="compact"] { display: block; }
+}
+.kz-flow-stage[data-variant="compact"] { --kz-flow-w: 0.5; --kz-flow-mark: 2.5rem; --kz-flow-hub: 4.5rem; }
+.kz-flow-link { transition: opacity 0.3s var(--kz-ease); }
+.kz-flow-wire {
+  fill: none;
+  stroke: color-mix(in oklab, var(--kz-accent) 55%, var(--kz-border-default, currentColor));
+  stroke-width: var(--kz-flow-w);
+  stroke-linecap: round;
+  opacity: 0.55;
+}
+.kz-flow-link[data-planned] .kz-flow-wire { stroke-dasharray: calc(var(--kz-flow-w) * 3) calc(var(--kz-flow-w) * 5); opacity: 0.4; }
+.kz-flow-photon {
+  fill: none;
+  stroke: var(--kz-accent);
+  stroke-width: calc(var(--kz-flow-w) * 3.6);
+  stroke-linecap: round;
+  stroke-dasharray: 0.001 var(--kz-flow-gap, 12);
+  animation: kz-flow-in 2.4s linear infinite;
+}
+.kz-flow-photon[data-halo] { stroke-width: calc(var(--kz-flow-w) * 9); opacity: 0.22; }
+.kz-flow-photon[data-dir="out"] { stroke: var(--kz-flow-back); animation-name: kz-flow-out; }
+.kz-flow[data-active] .kz-flow-link:not([data-active]) { opacity: 0.25; }
+.kz-flow-link[data-active] .kz-flow-wire { opacity: 0.9; }
+@keyframes kz-flow-in { to { stroke-dashoffset: calc(var(--kz-flow-gap, 12) * -1); } }
+@keyframes kz-flow-out { from { stroke-dashoffset: calc(var(--kz-flow-gap, 12) * -1); } to { stroke-dashoffset: 0; } }
+
+.kz-flow-nodes { margin: 0; padding: 0; list-style: none; }
+.kz-flow-nodes > li, .kz-flow-hub { position: absolute; translate: -50% -50%; }
+.kz-flow-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  padding: 0.25rem;
+  border: 0;
+  border-radius: 0.875rem;
+  background: none;
+  color: var(--kz-text-primary);
+  font: inherit;
+  cursor: pointer;
+  transition: opacity 0.3s var(--kz-ease);
+}
+.kz-flow-node:focus-visible { outline: 2px solid var(--kz-ring); outline-offset: 2px; }
+.kz-flow-node-mark, .kz-flow-hub-mark {
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--kz-surface-1);
+  border: 1px solid color-mix(in oklab, var(--kz-accent) 45%, var(--kz-border-default, transparent));
+  transition: border-color 0.3s var(--kz-ease), box-shadow 0.3s var(--kz-ease), scale 0.3s var(--kz-ease);
+}
+.kz-flow-node-mark { width: var(--kz-flow-mark); height: var(--kz-flow-mark); }
+.kz-flow-node-mark > svg { width: 62%; height: 62%; }
+.kz-flow-node-label { font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
+.kz-flow-node:is(:hover, :focus-visible, [data-active]) .kz-flow-node-mark {
+  border-color: var(--kz-accent);
+  box-shadow: 0 0 0 4px var(--kz-accent-soft), 0 0 24px -6px var(--kz-accent);
+  scale: 1.06;
+}
+.kz-flow[data-active] .kz-flow-node:not([data-active]) { opacity: 0.6; }
+.kz-flow-node[data-planned] .kz-flow-node-mark { border-style: dashed; }
+.kz-flow-node[data-planned] .kz-flow-node-mark > * { opacity: 0.5; }
+.kz-flow-node[data-planned] .kz-flow-node-label { color: var(--kz-text-secondary); }
+/* On a phone the row of marks carries no names: the detail line says the chosen one. */
+.kz-flow-stage[data-layout="top-to-bottom"] .kz-flow-node-label {
+  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+}
+.kz-flow-hub { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; pointer-events: none; }
+.kz-flow-hub-mark {
+  width: var(--kz-flow-hub);
+  height: var(--kz-flow-hub);
+  /* Opaque: the conduits end under the hub. */
+  background: radial-gradient(circle, var(--kz-accent-soft), transparent 72%), var(--kz-surface-1);
+  border-color: var(--kz-accent);
+  box-shadow: 0 0 40px -8px var(--kz-accent);
+}
+.kz-flow-hub-mark > svg { width: 64%; height: 64%; }
+.kz-flow-hub-label { font-weight: 700; font-size: 0.9375rem; color: var(--kz-text-primary); }
+.kz-flow-hub-caption { font-size: 0.75rem; color: var(--kz-text-secondary); }
+.kz-flow-detail {
+  min-height: 3lh;
+  max-width: 40rem;
+  margin: 1rem auto 0;
+  text-align: center;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: var(--kz-text-secondary);
+}
+.kz-flow-detail strong { color: var(--kz-text-primary); }
+.kz-flow-status {
+  margin-left: 0.5rem;
+  padding: 0.0625rem 0.5rem;
+  border-radius: 999px;
+  border: 1px solid var(--kz-border-default, currentColor);
+  font-size: 0.75rem;
+}
+.kz-flow-detail a { color: var(--kz-accent-text, var(--kz-accent)); font-weight: 600; text-underline-offset: 3px; }
+
 @media (prefers-reduced-motion: reduce) {
   .kz-page, .kz-word, .kz-gradient-text, .kz-marquee, .kz-backdrop-drift, .kz-overlay, .kz-dialog, .kz-pop, .kz-fade, .kz-progress,
   .kz-skeleton, .kz-skeleton-shape *, .kz-toast::after, .kz-glow::before,
   .kz-rotating > *, .kz-loop, .kz-iso-rise, .kz-count-roll, .kz-loader-trace, .kz-loader-node, .kz-loader-mark,
-  [data-kz-status], .kz-replay-caret, .kz-month, .kz-map-user::after { animation: none !important; }
+  [data-kz-status], .kz-replay-caret, .kz-month, .kz-map-user::after, .kz-flow-photon { animation: none !important; }
+  .kz-flow-node-mark, .kz-flow-node, .kz-flow-link { transition: none; }
   /* At rest, the trace stands still where a reader expects it: a third of the hexagon from the top. */
   .kz-loader-trace:not([stroke-dasharray]) { stroke-dashoffset: -8; }
   [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }