@krizaka/ui 3.27.0 → 3.29.0

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; }

package/dist/native.d.ts

@@ -385,8 +385,10 @@ type MessageBubbleLabels = {
     retry?: string;
 };
 type MessageBubbleProps = {
-    /** The text. */
-    text: string;
+    /** The text. Optional when `children` is given (then it is only the bubble's spoken name). */
+    text?: string;
+    /** Rich content in the bubble's shape instead of `text` — a model's answer in `Markdown`. */
+    children?: React$1.ReactNode;
     /** Yours (right, in the accent) or theirs (left). */
     mine?: boolean;
     /** The time, written by the app (“14:02”). */
@@ -407,7 +409,7 @@ type MessageBubbleProps = {
     style?: StyleProp<ViewStyle>;
 };
 /** A message: yours in the accent on the right, theirs on the left, the time inside, the receipt under the last of yours. */
-declare function MessageBubble({ text, mine, time, status, showStatus, context, onRetry, grouped, labels, style }: MessageBubbleProps): React$1.JSX.Element;
+declare function MessageBubble({ text, children, mine, time, status, showStatus, context, onRetry, grouped, labels, style }: MessageBubbleProps): React$1.JSX.Element;
 type TypingIndicatorProps = {
     /** What is said to screen readers and shown beside the dots (“Elena is typing”) — passed translated. */
     label: string;
@@ -433,13 +435,27 @@ type MessageComposerProps = {
     leading?: React$1.ReactNode;
     /** Cannot write (blocked, read-only): the reason in its place. */
     disabledReason?: string;
+    /** A line above the input: a `ComposerMeta` (the model chip, a status), shown only when the app computes it true. */
+    meta?: React$1.ReactNode;
     /** The longest message. Default 4000. */
     maxLength?: number;
     /** Styles merged last. */
     style?: StyleProp<ViewStyle>;
 };
 /** Where a message is written: a growing input, an attach slot, a send button that wakes when there is something to send. */
-declare function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, maxLength, style }: MessageComposerProps): React$1.JSX.Element;
+declare function MessageComposer({ value, onValueChange, onSend, placeholder, sendLabel, leading, disabledReason, meta, maxLength, style }: MessageComposerProps): React$1.JSX.Element;
+type ComposerMetaProps = {
+    /** The model in use: a chip that opens a choice. */
+    model?: {
+        label: string;
+        onPress: () => void;
+        accessibilityLabel?: string;
+    };
+    /** A status line with a shield ("0 bytes left your network"): pass it only when the app computes it true. */
+    status?: string;
+};
+/** The line above a `MessageComposer`: the model chip and, only when true, a status line with a shield. */
+declare function ComposerMeta({ model, status }: ComposerMetaProps): React$1.JSX.Element | null;
 type ConversationItemProps = {
     /** The other person's name. */
     name: string;
@@ -1760,6 +1776,37 @@ type SegmentedProps<T extends string> = {
  */
 declare function Segmented<T extends string>({ options, value, onValueChange, size, "aria-label": label, style }: SegmentedProps<T>): React$1.JSX.Element;
 
+type SettingsRowProps = {
+    /** What the setting is ("Username"), passed translated. */
+    label: string;
+    /** One line of help under the label. */
+    description?: string;
+    /** An icon (24 pt) drawn in a tile before the label. */
+    icon?: React$1.ReactNode;
+    /** The current value on the right ("English", "Dark"). */
+    value?: string;
+    /** A control on the right (a `Switch`): the row is then not pressable by itself. */
+    trailing?: React$1.ReactNode;
+    /** Makes the row a button that opens something; a chevron is shown. */
+    onPress?: () => void;
+    /** Tints the label as dangerous ("Delete account"). */
+    destructive?: boolean;
+    /** The row's accessible name when the visible words do not say it all; by default the visible words (label, help, value) are read. */
+    accessibilityLabel?: string;
+    /** Not available: dimmed and not pressable. */
+    disabled?: boolean;
+};
+/** One setting: its label and help on the left, its value or control on the right; a button when `onPress` is given. */
+declare function SettingsRow({ label, description, icon, value, trailing, onPress, destructive, accessibilityLabel, disabled }: SettingsRowProps): React$1.JSX.Element;
+type SettingsGroupProps = ViewProps & {
+    /** The group's title ("Account"), passed translated; a heading for screen readers. */
+    title?: string;
+    /** The rows (`SettingsRow`). */
+    children: React$1.ReactNode;
+};
+/** A titled card of `SettingsRow`s, divided by hairlines. */
+declare function SettingsGroup({ title, children, style, ...props }: SettingsGroupProps): React$1.JSX.Element;
+
 type ShowcaseLabels = {
     /** The previous button's name. */
     previous: string;
@@ -2498,4 +2545,4 @@ declare function YomizakaMark({ size, animated, title, neutral }: NativeMarkProp
  */
 declare function YororisMark({ size, animated, title, neutral }: NativeMarkProps): React__default.JSX.Element;
 
-export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, ForceUpdateScreen, type ForceUpdateScreenProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, MaintenanceScreen, type MaintenanceScreenProps, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, MetaRow, type MetaRowProps, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, UpdatePrompt, type UpdatePromptProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, Waveform, type WaveformProps, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };
+export { ActionSheet, type ActionSheetAction, type ActionSheetProps, type ActivityEvent, ActivityFeed, type ActivityFeedLabels, type ActivityFeedProps, type ActivityTone, AkinazaMark, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, AvatarRoot, type AvatarSize, Badge, type BadgeProps, type BadgeTone, type BrandId, BrandedRefresh, type BrandedRefreshProps, type BrandedRefreshScrollProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarLabels, type CalendarProps, Card, CardBody, type CardBodyProps, CardDescription, CardFooter, CardImage, type CardImageProps, CardMedia, type CardMediaProps, CardOverlay, type CardOverlayProps, CardRoot, type CardRootProps, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipGroupProps, type ChipProps, type ChipSize, Combobox, type ComboboxLabels, type ComboboxProps, ComposerMeta, type ComposerMetaProps, ConversationItem, type ConversationItemProps, Countdown, type CountdownProps, type CountdownUnits, DateField, type DateFieldLabels, type DateFieldProps, type DatePart, DateWheel, type DateWheelProps, DayStrip, type DayStripProps, type DefaultAvatar, type DefaultAvatarBrand, type DescriptionItem, DescriptionList, type DescriptionListProps, EmptyState, type EmptyStateProps, ErrorState, Fab, type FabProps, ForceUpdateScreen, type ForceUpdateScreenProps, GoalGauge, type GoalGaugeProps, type GridPhoto, type HapticKind, Header, type HeaderProps, IconButton, type IconButtonProps, ImageViewer, type ImageViewerProps, type Insets, KachizakaMark, KrizakaMark, Loader, LoaderGlyph, type LoaderGlyphProps, type LoaderProps, LoadingState, MaintenanceScreen, type MaintenanceScreenProps, Mascot, type MascotProps, MascotState, type MascotStateProps, MatchDialog, type MatchDialogProps, MessageBubble, type MessageBubbleLabels, type MessageBubbleProps, MessageComposer, type MessageComposerProps, type MessageStatus, MetaRow, type MetaRowProps, Meter, type MeterPart, type MeterProps, type Mode, MonthPicker, type MonthPickerProps, type Motion, type NativeMarkProps, NumberTicker, type NumberTickerProps, Onboarding, type OnboardingProps, type OnboardingSlide, OrazakaMark, OrochiaMark, OtpInput, type OtpInputProps, Pagination, type PaginationLabels, type PaginationProps, PermissionPrompt, type PermissionPromptProps, type PermissionStatus, PersonCard, type PersonCardProps, Phoenix, type PhoenixProps, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, ProductMark, ProfileCard, type ProfileCardProps, type ProfileStat, Progress, type ProgressProps, PullToRefresh, type PullToRefreshProps, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, Screen, type ScreenProps, SearchField, type SearchFieldProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, SettingsGroup, type SettingsGroupProps, SettingsRow, type SettingsRowProps, Sheet, type SheetProps, Showcase, type ShowcaseLabels, type ShowcaseProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderValue, Spinner, type SpinnerProps, SplashHandoff, type SplashHandoffProps, type Step, StepProgress, type StepProgressProps, type StepStatus, Stepper, type StepperProps, SuccessState, type SwipeAction, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, SwipeableRow, type SwipeableRowProps, Switch, type SwitchProps, TabBar, type TabBarItem, type TabBarProps, type TabItem, Tabs, type TabsProps, type TagOption, TagSelector, type TagSelectorProps, TextField, type TextFieldProps, type Theme, type ThemeContextValue, type ThemeFonts, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerLabels, type TimePickerProps, type TimeValue, type ToastItem, type ToastOptions, type ToastTone, Toaster, type ToasterProps, Txt, type TxtProps, type TxtTone, type TxtVariant, TypingIndicator, type TypingIndicatorProps, UpdatePrompt, type UpdatePromptProps, VerifiedBadge, type VerifiedBadgeProps, type ViewerImage, Waveform, type WaveformProps, WelcomeState, Wheel, WheelDivider, type WheelOption, WheelPicker, type WheelPickerProps, type WheelProps, YasakiaMark, YazakiaMark, YomizakaMark, YororisMark, addDays, addMonths, ageOn, alpha, calendarLabels, comboboxLabels, composeDate, dateFieldLabels, datePartsOrder, daysInMonth, defaultAvatarUrl, formatTime, isRealDate, latestBirthDate, monthNames, prefetchNeighbours, showcaseLabels, splitDuration, textStyles, timeSlots, timeToMinutes, toast, todayIso, useCollapsingHeader, useCountdown, useDelayedWait, useReducedMotion, useTheme, uses12Hours };