@krizaka/ui 3.30.0 → 3.31.0

package/dist/engine-flow.d.ts

@@ -90,8 +90,31 @@ type EngineFlowProps = Omit<React.ComponentProps<"figure">, "children"> & {
     /** Photon speed, in units per second (the stage is 100 units wide).
      * @default 16 */
     speed?: number;
+    /** How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.
+     * @default "normal" */
+    density?: FlowDensity;
+    /** When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the
+     * conduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they
+     * are always paused, and still under reduced motion.
+     * @default "always" */
+    trigger?: FlowTrigger;
+    /** The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any
+     * CSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).
+     * @default "linear" */
+    easing?: FlowEasing;
+    /** Milliseconds between one conduit's photons and the next's: 0 sends them all together.
+     * @default 300 */
+    stagger?: number;
+    /** The engine's mark swells slowly (a loop, still under reduced motion).
+     * @default true */
+    breathe?: boolean;
 };
+type FlowDensity = "sparse" | "normal" | "dense";
+type FlowTrigger = "always" | "hover" | "active";
+type FlowEasing = "linear" | "ease-in-out" | (string & {});
+/** How many photons a conduit of this length carries (evenly spaced, so the gap is `length / count`). */
+declare function photonCount(length: number, density?: FlowDensity): 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;
+declare function EngineFlow({ label, hub, nodes, layout, compactLayout, particles, conduit, hint, defaultActive, speed, density, trigger, easing, stagger, breathe, 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 };
+export { EngineFlow, type EngineFlowHub, type EngineFlowNode, type EngineFlowProps, FLOW_HEIGHT, type FlowConduit, type FlowDensity, type FlowEasing, type FlowGeometry, type FlowLayout, type FlowPoint, type FlowTrigger, flowGeometry, flowPositions, photonCount };

package/dist/engine-flow.js

@@ -83,6 +83,12 @@ function flowGeometry(layout, count, conduit = "bezier") {
 
 // src/engine-flow/engine-flow.tsx
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function photonCount(length, density = "normal") {
+  const base = Math.round(length / 16);
+  if (density === "sparse") return Math.min(2, Math.max(1, Math.round(base / 2)));
+  if (density === "dense") return Math.min(8, Math.max(4, base * 2));
+  return Math.min(4, Math.max(2, base));
+}
 function Stage({
   layout,
   variant,
@@ -91,6 +97,10 @@ function Stage({
   conduit,
   particles,
   speed,
+  density,
+  easing,
+  stagger,
+  breathe,
   active,
   onActive,
   detailId
@@ -101,11 +111,14 @@ function Stage({
     /* @__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 gap = length / photonCount(length, density);
+      const period = gap / speed;
       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`
+        animationDuration: `${period.toFixed(2)}s`,
+        // Each conduit starts `stagger` ms after the previous (a negative delay: already under way); the way back is half a period behind.
+        animationDelay: `${(-((i * stagger / 1e3 + (dir === "out" ? period / 2 : 0)) % period)).toFixed(2)}s`,
+        ...easing !== "linear" ? { animationTimingFunction: easing } : {}
       });
       const lanes = node.planned || particles === "none" ? [] : flow === "both" ? ["in", "out"] : [flow];
       return /* @__PURE__ */ jsxs(
@@ -127,7 +140,7 @@ function Stage({
       );
     }) }),
     /* @__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,
+      hub.mark ? /* @__PURE__ */ jsx("span", { className: cn("kz-flow-hub-mark", breathe && "kz-loop"), 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
     ] }),
@@ -166,6 +179,11 @@ function EngineFlow({
   hint,
   defaultActive,
   speed = 16,
+  density = "normal",
+  trigger = "always",
+  easing = "linear",
+  stagger = 300,
+  breathe = true,
   className,
   ...props
 }) {
@@ -173,7 +191,7 @@ function EngineFlow({
   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 };
+  const stage = { nodes, hub, conduit, particles, speed: Math.max(1, speed), density, easing, stagger: Math.max(0, stagger), breathe, active, onActive: setActive, detailId };
   return /* @__PURE__ */ jsxs(
     "figure",
     {
@@ -181,6 +199,8 @@ function EngineFlow({
       className: cn("kz-flow", className),
       "data-motion-scope": "",
       "data-active": chosen ? "" : void 0,
+      "data-trigger": trigger === "always" ? void 0 : trigger,
+      "data-density": density === "normal" ? void 0 : density,
       "data-compact": compact ? "" : void 0,
       ...props,
       children: [
@@ -209,6 +229,7 @@ export {
   EngineFlow,
   FLOW_HEIGHT,
   flowGeometry,
-  flowPositions
+  flowPositions,
+  photonCount
 };
 //# sourceMappingURL=engine-flow.js.map

package/dist/engine-flow.js.map

@@ -1 +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"]}
+{"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  /** How many photons share a conduit: `sparse` one or two, `normal` two to four, `dense` four to eight.\n   * @default \"normal\" */\n  density?: FlowDensity;\n  /** When the photons travel: `always`; `hover` only while the pointer or focus is on the figure (they rest along the\n   * conduits otherwise); `active` only on the conduit of the chosen node (the others show nothing). Off screen they\n   * are always paused, and still under reduced motion.\n   * @default \"always\" */\n  trigger?: FlowTrigger;\n  /** The photons' timing function: `linear` (a steady stream), `ease-in-out` (a pulse that swells and settles), or any\n   * CSS `<easing-function>` (`cubic-bezier(.2,0,0,1)`, `steps(6)`).\n   * @default \"linear\" */\n  easing?: FlowEasing;\n  /** Milliseconds between one conduit's photons and the next's: 0 sends them all together.\n   * @default 300 */\n  stagger?: number;\n  /** The engine's mark swells slowly (a loop, still under reduced motion).\n   * @default true */\n  breathe?: boolean;\n};\n\nexport type FlowDensity = \"sparse\" | \"normal\" | \"dense\";\nexport type FlowTrigger = \"always\" | \"hover\" | \"active\";\nexport type FlowEasing = \"linear\" | \"ease-in-out\" | (string & {});\n\n/** How many photons a conduit of this length carries (evenly spaced, so the gap is `length / count`). */\nexport function photonCount(length: number, density: FlowDensity = \"normal\"): number {\n  const base = Math.round(length / 16);\n  if (density === \"sparse\") return Math.min(2, Math.max(1, Math.round(base / 2)));\n  if (density === \"dense\") return Math.min(8, Math.max(4, base * 2));\n  return Math.min(4, Math.max(2, base));\n}\n\nfunction Stage({\n  layout,\n  variant,\n  nodes,\n  hub,\n  conduit,\n  particles,\n  speed,\n  density,\n  easing,\n  stagger,\n  breathe,\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  density: FlowDensity;\n  easing: FlowEasing;\n  stagger: number;\n  breathe: boolean;\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          // Photons per conduit (`density`), evenly spaced; the same speed on every conduit.\n          const gap = length / photonCount(length, density);\n          const period = gap / speed;\n          const timing = (dir: \"in\" | \"out\") =>\n            ({\n              \"--kz-flow-gap\": gap.toFixed(3),\n              animationDuration: `${period.toFixed(2)}s`,\n              // Each conduit starts `stagger` ms after the previous (a negative delay: already under way); the way back is half a period behind.\n              animationDelay: `${(-(((i * stagger) / 1000 + (dir === \"out\" ? period / 2 : 0)) % period)).toFixed(2)}s`,\n              ...(easing !== \"linear\" ? { animationTimingFunction: easing } : {}),\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={cn(\"kz-flow-hub-mark\", breathe && \"kz-loop\")}>{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  density = \"normal\",\n  trigger = \"always\",\n  easing = \"linear\",\n  stagger = 300,\n  breathe = true,\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), density, easing, stagger: Math.max(0, stagger), breathe, 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-trigger={trigger === \"always\" ? undefined : trigger}\n      data-density={density === \"normal\" ? undefined : density}\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/force-update-screen.js

@@ -1,7 +1,7 @@
 import "./chunk-TDG7ED2W.js";
 import {
   Button
-} from "./chunk-6ZYRUOTA.js";
+} from "./chunk-UV4HBVH7.js";
 import "./chunk-43PTCDTL.js";
 import "./chunk-2VNYHG4E.js";
 import "./chunk-W675RFOA.js";
@@ -27,7 +27,7 @@ function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, on
     message && /* @__PURE__ */ jsx("p", { className: s.message(), children: message }),
     versionLabel && /* @__PURE__ */ jsx("p", { className: s.version(), children: versionLabel }),
     /* @__PURE__ */ jsxs("div", { className: s.actions(), children: [
-      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", shape: "cut", shimmer: true, autoFocus: true, onClick: onUpdate, children: updateLabel }),
+      /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", autoFocus: true, onClick: onUpdate, children: updateLabel }),
       retryLabel && onRetry && /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onRetry, children: retryLabel })
     ] })
   ] });

package/dist/force-update-screen.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/force-update-screen/force-update-screen.tsx"],"sourcesContent":["// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" shape=\"cut\" shimmer autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,UAAU;AAsCX,cAOF,YAPE;AApCD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AACjK,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,IAC1D,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,OAAM,OAAM,SAAO,MAAC,WAAS,MAAC,SAAS,UACxE,uBACH;AAAA,MACC,cAAc,WACb,oBAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,sBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/force-update-screen/force-update-screen.tsx"],"sourcesContent":["// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,UAAU;AAsCX,cAOF,YAPE;AApCD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AACjK,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,IAC1D,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAS,MAAC,SAAS,UACpD,uBACH;AAAA,MACC,cAAc,WACb,oBAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,sBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/genui.js

@@ -4,13 +4,13 @@ import {
   CardRoot,
   CardTitle,
   Skeleton
-} from "./chunk-MQPC3P4T.js";
+} from "./chunk-2DGLWTPS.js";
 import {
   DataTable
-} from "./chunk-LYOPPBMC.js";
+} from "./chunk-KIBICUZK.js";
 import "./chunk-7Z4KHPFC.js";
 import "./chunk-JXLDUDTD.js";
-import "./chunk-DZU6RMYD.js";
+import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
 import "./chunk-2PNLHZLT.js";
 import "./chunk-7UCPGXKN.js";

package/dist/glow-card.d.ts

@@ -2,19 +2,20 @@ import * as React from 'react';
 
 type GlowCardProps = React.ComponentProps<"div"> & {
     /**
-     * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.
+     * `border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is
+     * deprecated since 3.31 (krizaka-ui#393) and draws nothing.
      * @default "both"
      */
     glow?: "border" | "spotlight" | "both";
     /** Renders your element (a link, an article) with the card's look and behaviour. */
     asChild?: boolean;
     /**
-     * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.
+     * A featured card: the ring is fuller at rest. It never turns.
      * @default false
      */
     alive?: boolean;
 };
-/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */
-declare function GlowCard({ glow, asChild, alive, className, onPointerMove, ...props }: GlowCardProps): React.JSX.Element;
+/** A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours. */
+declare function GlowCard({ glow, asChild, alive, className, ...props }: GlowCardProps): React.JSX.Element;
 
 export { GlowCard, type GlowCardProps };

package/dist/glow-card.js

@@ -6,20 +6,14 @@ import {
 // src/glow-card/glow-card.tsx
 import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-function GlowCard({ glow = "both", asChild, alive, className, onPointerMove, ...props }) {
+function GlowCard({ glow = "both", asChild, alive, className, ...props }) {
   const Comp = asChild ? Slot.Root : "div";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-glow": glow,
       "data-alive": alive ? "" : void 0,
-      className: cn("kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6", className),
-      onPointerMove: (e) => {
-        const box = e.currentTarget.getBoundingClientRect();
-        e.currentTarget.style.setProperty("--kz-glow-x", `${e.clientX - box.left}px`);
-        e.currentTarget.style.setProperty("--kz-glow-y", `${e.clientY - box.top}px`);
-        onPointerMove?.(e);
-      },
+      className: cn("kz-glow relative isolate rounded-2xl border border-border-default bg-surface-1 p-6", className),
       ...props
     }
   );

package/dist/glow-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/glow-card/glow-card.tsx"],"sourcesContent":["// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * What answers: `border` (the turning gradient ring), `spotlight` (the bloom under the pointer), or `both`.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * The ring turns slowly even at rest (a featured card). Otherwise it rests until hovered or focused.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card lit by the brand: a bloom that follows the pointer, a gradient ring that turns. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, onPointerMove, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow kz-loop relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      onPointerMove={(e: React.PointerEvent<HTMLDivElement>) => {\n        const box = e.currentTarget.getBoundingClientRect();\n        e.currentTarget.style.setProperty(\"--kz-glow-x\", `${e.clientX - box.left}px`);\n        e.currentTarget.style.setProperty(\"--kz-glow-y\", `${e.clientY - box.top}px`);\n        onPointerMove?.(e);\n      }}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAS,YAAY;AAwBjB;AAHG,SAAS,SAAS,EAAE,OAAO,QAAQ,SAAS,OAAO,WAAW,eAAe,GAAG,MAAM,GAAkB;AAC7G,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY,QAAQ,KAAK;AAAA,MACzB,WAAW,GAAG,8FAA8F,SAAS;AAAA,MACrH,eAAe,CAAC,MAA0C;AACxD,cAAM,MAAM,EAAE,cAAc,sBAAsB;AAClD,UAAE,cAAc,MAAM,YAAY,eAAe,GAAG,EAAE,UAAU,IAAI,IAAI,IAAI;AAC5E,UAAE,cAAc,MAAM,YAAY,eAAe,GAAG,EAAE,UAAU,IAAI,GAAG,IAAI;AAC3E,wBAAgB,CAAC;AAAA,MACnB;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../src/glow-card/glow-card.tsx"],"sourcesContent":["// Client (the pointer). A card that answers light: a soft bloom of the brand accent follows the pointer across it, and\n// its border is a ring of the brand gradient that turns slowly and brightens under the pointer or the focus. Composited\n// properties only (CSS variables, opacity); no animation frame — the pointer writes two variables. Under reduced motion\n// the ring rests at a fixed angle and the light stays where it is: a designed still frame, not a switched-off one.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport type GlowCardProps = React.ComponentProps<\"div\"> & {\n  /**\n   * `border` (a still hairline ring of the brand gradient) or `both`. `spotlight` (the bloom under the pointer) is\n   * deprecated since 3.31 (krizaka-ui#393) and draws nothing.\n   * @default \"both\"\n   */\n  glow?: \"border\" | \"spotlight\" | \"both\";\n  /** Renders your element (a link, an article) with the card's look and behaviour. */\n  asChild?: boolean;\n  /**\n   * A featured card: the ring is fuller at rest. It never turns.\n   * @default false\n   */\n  alive?: boolean;\n};\n\n/** A card ringed by the brand: a still hairline of its gradient, a step brighter under the pointer. Content is yours. */\nexport function GlowCard({ glow = \"both\", asChild, alive, className, ...props }: GlowCardProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  return (\n    <Comp\n      data-glow={glow}\n      data-alive={alive ? \"\" : undefined}\n      className={cn(\"kz-glow relative isolate rounded-2xl border border-border-default bg-surface-1 p-6\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AAIA,SAAS,YAAY;AAyBjB;AAHG,SAAS,SAAS,EAAE,OAAO,QAAQ,SAAS,OAAO,WAAW,GAAG,MAAM,GAAkB;AAC9F,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW;AAAA,MACX,cAAY,QAAQ,KAAK;AAAA,MACzB,WAAW,GAAG,sFAAsF,SAAS;AAAA,MAC5G,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/image-cropper.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Slider
-} from "./chunk-KM6VAKIE.js";
+} from "./chunk-RE5WJ4QP.js";
 import "./chunk-HJFRHYCI.js";
 import "./chunk-NSLXEDIS.js";
 import {

package/dist/index.js

@@ -5,7 +5,7 @@ import {
 import {
   MotionObserver,
   RotatingWord
-} from "./chunk-HAQWKORZ.js";
+} from "./chunk-4JO5GSSD.js";
 import {
   AkinazaLogo,
   KachizakaLogo,
@@ -20,7 +20,7 @@ import {
   a11y,
   neutral,
   useIds
-} from "./chunk-TFJDIOFK.js";
+} from "./chunk-4E5IUZHR.js";
 
 // src/marks/wu-sama-geometry.ts
 import { marks } from "@krizaka/tokens/native";
@@ -38,8 +38,8 @@ var WU_SAMA = {
   /** The W: five straight legs in Krizaka blue. */
   w: "M132,142 L154,216 L180,166 L206,216 L228,142",
   wStroke: 18,
-  highlight: "#dbeafe",
-  glow: { color: "#196df5", opacity: 0.16 },
+  highlight: "#ddeaf4",
+  glow: { color: marks.krizaka[0][1], opacity: 0.16 },
   orbit: { r: 160, dash: "8 8", width: 1.5 },
   ring: { r: 134, width: 1 }
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/marks/wu-sama-geometry.ts","../src/marks/WuSamaMark.tsx"],"sourcesContent":["import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Wu-sama mark's geometry — the founder's byline mark.\n * It shares the Krizaka shield contour (pointy-top hexagonal shield with open vertex and lit node)\n * and brand colors, holding a W of five straight legs in Krizaka blue at its center.\n */\nexport const WU_SAMA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  /** The shield: the Krizaka pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */\n  shield: \"M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5\",\n  stroke: 22,\n  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },\n  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: marks.krizaka },\n  /** The vertex where the shield opens: a lit node in Krizaka blue. */\n  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },\n  /** The W: five straight legs in Krizaka blue. */\n  w: \"M132,142 L154,216 L180,166 L206,216 L228,142\",\n  wStroke: 18,\n  highlight: \"#dbeafe\",\n  glow: { color: \"#196df5\", opacity: 0.16 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n","import { a11y, type MarkProps, neutral, useIds } from \"./shared\";\nimport { WU_SAMA as G } from \"./wu-sama-geometry\";\n\n/**\n * The Wu-sama mark — the founder's byline mark, for the person and not the company (the company keeps `KrizakaLogo`).\n * Oussama's nickname is Wu-sama: it shares Krizaka's hexagonal shield contour and color palette (ink shield, open\n * vertex with lit blue node), with the W rendered in Krizaka blue at the center. Below 48 px it crops to the emblem.\n */\nexport function WuSamaMark({ size = 32, title, className }: Omit<MarkProps, \"animated\"> & { animated?: boolean }) {\n  const id = useIds(\"wsm\", [\"ink\", \"blue\", \"glow\"] as const);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <defs>\n        <linearGradient id={id.ink} gradientUnits=\"userSpaceOnUse\" x1={G.ink.x1} y1={G.ink.y1} x2={G.ink.x2} y2={G.ink.y2}>\n          <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 60)} />\n          <stop offset=\"100%\" stopColor={neutral(\"--kz-text-primary\", 92)} />\n        </linearGradient>\n        <linearGradient id={id.blue} gradientUnits=\"userSpaceOnUse\" x1={G.blue.x1} y1={G.blue.y1} x2={G.blue.x2} y2={G.blue.y2}>\n          {G.blue.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx=\"200\" cy=\"200\" r=\"190\" fill={`url(#${id.glow})`} /> : null}\n      {size >= 48 ? (\n        <>\n          <circle cx=\"200\" cy=\"200\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n          <circle cx=\"200\" cy=\"200\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n        </>\n      ) : null}\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <path d={G.shield} stroke={`url(#${id.ink})`} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <circle cx={G.node.cx} cy={G.node.cy} r={G.node.r} fill={`url(#${id.blue})`} />\n        <circle cx={G.node.cx} cy={G.node.cy} r={G.node.inner} fill={G.highlight} />\n        <path d={G.w} stroke={`url(#${id.blue})`} strokeWidth={G.wStroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </g>\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/marks/wu-sama-geometry.ts","../src/marks/WuSamaMark.tsx"],"sourcesContent":["import { marks } from \"@krizaka/tokens/native\";\n\n/**\n * The Wu-sama mark's geometry — the founder's byline mark.\n * It shares the Krizaka shield contour (pointy-top hexagonal shield with open vertex and lit node)\n * and brand colors, holding a W of five straight legs in Krizaka blue at its center.\n */\nexport const WU_SAMA = {\n  viewBox: \"0 0 400 400\",\n  croppedViewBox: \"86 82 228 228\",\n  offset: 20,\n  /** The shield: the Krizaka pointy-top hexagon (r 92 around 180,180), open at its upper-right edge. */\n  shield: \"M259.7,134 L259.7,226 L180,272 L100.3,226 L100.3,134 L180,88 L212,106.5\",\n  stroke: 22,\n  ink: { x1: 70, y1: 290, x2: 290, y2: 70 },\n  blue: { x1: 180, y1: 180, x2: 300, y2: 60, stops: marks.krizaka },\n  /** The vertex where the shield opens: a lit node in Krizaka blue. */\n  node: { cx: 259.7, cy: 134, r: 19, inner: 6 },\n  /** The W: five straight legs in Krizaka blue. */\n  w: \"M132,142 L154,216 L180,166 L206,216 L228,142\",\n  wStroke: 18,\n  highlight: \"#ddeaf4\",\n  glow: { color: marks.krizaka[0]![1], opacity: 0.16 },\n  orbit: { r: 160, dash: \"8 8\", width: 1.5 },\n  ring: { r: 134, width: 1 },\n} as const;\n","import { a11y, type MarkProps, neutral, useIds } from \"./shared\";\nimport { WU_SAMA as G } from \"./wu-sama-geometry\";\n\n/**\n * The Wu-sama mark — the founder's byline mark, for the person and not the company (the company keeps `KrizakaLogo`).\n * Oussama's nickname is Wu-sama: it shares Krizaka's hexagonal shield contour and color palette (ink shield, open\n * vertex with lit blue node), with the W rendered in Krizaka blue at the center. Below 48 px it crops to the emblem.\n */\nexport function WuSamaMark({ size = 32, title, className }: Omit<MarkProps, \"animated\"> & { animated?: boolean }) {\n  const id = useIds(\"wsm\", [\"ink\", \"blue\", \"glow\"] as const);\n  return (\n    <svg width={size} height={size} viewBox={size < 48 ? G.croppedViewBox : G.viewBox} fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" className={className} {...a11y(title)}>\n      <defs>\n        <linearGradient id={id.ink} gradientUnits=\"userSpaceOnUse\" x1={G.ink.x1} y1={G.ink.y1} x2={G.ink.x2} y2={G.ink.y2}>\n          <stop offset=\"0%\" stopColor={neutral(\"--kz-text-secondary\", 60)} />\n          <stop offset=\"100%\" stopColor={neutral(\"--kz-text-primary\", 92)} />\n        </linearGradient>\n        <linearGradient id={id.blue} gradientUnits=\"userSpaceOnUse\" x1={G.blue.x1} y1={G.blue.y1} x2={G.blue.x2} y2={G.blue.y2}>\n          {G.blue.stops.map(([offset, color]) => (\n            <stop key={offset} offset={offset} stopColor={color} />\n          ))}\n        </linearGradient>\n        <radialGradient id={id.glow} cx=\"50%\" cy=\"50%\" r=\"50%\">\n          <stop offset=\"0%\" stopColor={G.glow.color} stopOpacity={G.glow.opacity} />\n          <stop offset=\"100%\" stopColor={G.glow.color} stopOpacity=\"0\" />\n        </radialGradient>\n      </defs>\n      {size >= 48 ? <circle cx=\"200\" cy=\"200\" r=\"190\" fill={`url(#${id.glow})`} /> : null}\n      {size >= 48 ? (\n        <>\n          <circle cx=\"200\" cy=\"200\" r={G.orbit.r} stroke={neutral(\"--kz-border-strong\", 40)} strokeWidth={G.orbit.width} strokeDasharray={G.orbit.dash} opacity=\".6\" />\n          <circle cx=\"200\" cy=\"200\" r={G.ring.r} stroke={neutral(\"--kz-border-default\", 30)} strokeWidth={G.ring.width} opacity=\".35\" />\n        </>\n      ) : null}\n      <g transform={`translate(${G.offset} ${G.offset})`}>\n        <path d={G.shield} stroke={`url(#${id.ink})`} strokeWidth={G.stroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        <circle cx={G.node.cx} cy={G.node.cy} r={G.node.r} fill={`url(#${id.blue})`} />\n        <circle cx={G.node.cx} cy={G.node.cy} r={G.node.inner} fill={G.highlight} />\n        <path d={G.w} stroke={`url(#${id.blue})`} strokeWidth={G.wStroke} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </g>\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/iso.d.ts

@@ -65,7 +65,7 @@ interface IsoSceneProps extends Omit<React.ComponentProps<"svg">, "children"> {
  */
 declare function IsoScene({ label, description, extent, top, grid, step, animated, viewBox, className, children, ...props }: IsoSceneProps): React.JSX.Element;
 interface ItemProps {
-    /** The name shown when the pointer (or the focus) lifts the object — passed translated. It also makes it focusable. */
+    /** The name shown when the pointer (or the focus) is on the object — passed translated. It also makes it focusable. */
     label?: string;
     /**
      * Its rank in the entrance: objects rise into place one after the other.