@viax.io/uxm 4.36.0

package/dist/ui/lifecycle-minimap/lifecycle-minimap-preview.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { LifecycleMinimap } from "../../ui/index.js";
+const NODES = [
+  { x: 0.5, y: 0.12, w: 0.18, h: 0.12 },
+  { x: 0.5, y: 0.34, w: 0.3, h: 0.14 },
+  { x: 0.5, y: 0.58, w: 0.3, h: 0.14 },
+  { x: 0.2, y: 0.82, w: 0.3, h: 0.14 },
+  { x: 0.8, y: 0.82, w: 0.3, h: 0.14 }
+];
+const EDGES = [
+  [0, 1],
+  [1, 2],
+  [2, 3],
+  [2, 4]
+];
+function LifecycleMinimapPreview({ styles }) {
+  const cssVars = {
+    "--uxm-lifecycle-minimap-bg": styles.backgroundColor,
+    "--uxm-lifecycle-minimap-border-color": styles.borderColor,
+    "--uxm-lifecycle-minimap-node-color": styles.nodeColor,
+    "--uxm-lifecycle-minimap-edge-color": styles.edgeColor,
+    "--uxm-lifecycle-minimap-viewport-border": styles.viewportBorder,
+    "--uxm-lifecycle-minimap-viewport-fill": styles.viewportFill,
+    "--uxm-lifecycle-minimap-radius": `${styles.borderRadius}px`,
+    "--uxm-lifecycle-minimap-width": `${styles.width}px`,
+    "--uxm-lifecycle-minimap-height": `${styles.height}px`
+  };
+  return /* @__PURE__ */ jsx(
+    LifecycleMinimap,
+    {
+      width: styles.width,
+      height: styles.height,
+      nodes: NODES,
+      edges: EDGES,
+      viewport: { x: 0.22, y: 0.18, w: 0.55, h: 0.5 },
+      style: cssVars
+    }
+  );
+}
+export {
+  LifecycleMinimapPreview
+};
+//# sourceMappingURL=lifecycle-minimap-preview.js.map

package/dist/ui/lifecycle-minimap/lifecycle-minimap-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-minimap/lifecycle-minimap-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { LifecycleMinimap } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n// Illustrative layout (coords in 0–1 space). Same shape the minimap accepts\n// at runtime, just hardcoded for the preview canvas.\nconst NODES = [\n  { x: 0.5, y: 0.12, w: 0.18, h: 0.12 },\n  { x: 0.5, y: 0.34, w: 0.3, h: 0.14 },\n  { x: 0.5, y: 0.58, w: 0.3, h: 0.14 },\n  { x: 0.2, y: 0.82, w: 0.3, h: 0.14 },\n  { x: 0.8, y: 0.82, w: 0.3, h: 0.14 },\n];\nconst EDGES: [number, number][] = [\n  [0, 1],\n  [1, 2],\n  [2, 3],\n  [2, 4],\n];\n\nexport function LifecycleMinimapPreview({ styles }: PreviewProps) {\n  // Map every registry knob onto the component's CSS custom properties.\n  // Both the preview and any production consumer re-theme through the same\n  // surface — what the editor saves is what ships.\n  const cssVars = {\n    '--uxm-lifecycle-minimap-bg': styles.backgroundColor as string,\n    '--uxm-lifecycle-minimap-border-color': styles.borderColor as string,\n    '--uxm-lifecycle-minimap-node-color': styles.nodeColor as string,\n    '--uxm-lifecycle-minimap-edge-color': styles.edgeColor as string,\n    '--uxm-lifecycle-minimap-viewport-border': styles.viewportBorder as string,\n    '--uxm-lifecycle-minimap-viewport-fill': styles.viewportFill as string,\n    '--uxm-lifecycle-minimap-radius': `${styles.borderRadius}px`,\n    '--uxm-lifecycle-minimap-width': `${styles.width}px`,\n    '--uxm-lifecycle-minimap-height': `${styles.height}px`,\n  } as CSSProperties;\n\n  return (\n    <LifecycleMinimap\n      width={styles.width as number}\n      height={styles.height as number}\n      nodes={NODES}\n      edges={EDGES}\n      viewport={{ x: 0.22, y: 0.18, w: 0.55, h: 0.5 }}\n      style={cssVars}\n    />\n  );\n}\n"],"mappings":"AAsCI;AArCJ,SAAS,wBAAwB;AAMjC,MAAM,QAAQ;AAAA,EACZ,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK;AAAA,EACpC,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK;AAAA,EACnC,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK;AAAA,EACnC,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK;AAAA,EACnC,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK;AACrC;AACA,MAAM,QAA4B;AAAA,EAChC,CAAC,GAAG,CAAC;AAAA,EACL,CAAC,GAAG,CAAC;AAAA,EACL,CAAC,GAAG,CAAC;AAAA,EACL,CAAC,GAAG,CAAC;AACP;AAEO,SAAS,wBAAwB,EAAE,OAAO,GAAiB;AAIhE,QAAM,UAAU;AAAA,IACd,8BAA8B,OAAO;AAAA,IACrC,wCAAwC,OAAO;AAAA,IAC/C,sCAAsC,OAAO;AAAA,IAC7C,sCAAsC,OAAO;AAAA,IAC7C,2CAA2C,OAAO;AAAA,IAClD,yCAAyC,OAAO;AAAA,IAChD,kCAAkC,GAAG,OAAO,YAAY;AAAA,IACxD,iCAAiC,GAAG,OAAO,KAAK;AAAA,IAChD,kCAAkC,GAAG,OAAO,MAAM;AAAA,EACpD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,OAAO;AAAA,MACP,OAAO;AAAA,MACP,UAAU,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI;AAAA,MAC9C,OAAO;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/dist/ui/lifecycle-minimap/lifecycle-minimap.cjs

@@ -0,0 +1,96 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var lifecycle_minimap_exports = {};
+__export(lifecycle_minimap_exports, {
+  LifecycleMinimap: () => LifecycleMinimap
+});
+module.exports = __toCommonJS(lifecycle_minimap_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function LifecycleMinimap({
+  // Defaults match the `lifecycle-minimap` registry entry (240×104) so the
+  // editor preview and consumers that don't override start from the same
+  // baseline.
+  width = 240,
+  height = 104,
+  nodes,
+  edges,
+  viewport,
+  className,
+  style,
+  ...rest
+}) {
+  const center = (i) => ({ cx: nodes[i].x * width, cy: nodes[i].y * height });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...rest,
+      className: (0, import_helpers.cn)("uxm-lifecycle-minimap", className),
+      style: { width, height, ...style },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width, height, className: "uxm-lifecycle-minimap__svg", children: [
+          edges.map(([a, b], i) => {
+            const A = center(a);
+            const B = center(b);
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "line",
+              {
+                x1: A.cx,
+                y1: A.cy,
+                x2: B.cx,
+                y2: B.cy,
+                className: "uxm-lifecycle-minimap__edge"
+              },
+              i
+            );
+          }),
+          nodes.map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "rect",
+            {
+              x: (n.x - n.w / 2) * width,
+              y: (n.y - n.h / 2) * height,
+              width: n.w * width,
+              height: n.h * height,
+              rx: 2,
+              className: "uxm-lifecycle-minimap__node"
+            },
+            i
+          ))
+        ] }),
+        viewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "uxm-lifecycle-minimap__viewport",
+            style: {
+              left: viewport.x * width,
+              top: viewport.y * height,
+              width: viewport.w * width,
+              height: viewport.h * height
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleMinimap
+});
+//# sourceMappingURL=lifecycle-minimap.cjs.map

package/dist/ui/lifecycle-minimap/lifecycle-minimap.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-minimap/lifecycle-minimap.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes } from 'react';\n\nexport interface LifecycleMinimapNode {\n  /** Position in 0–1 space (relative to the minimap frame). */\n  x: number;\n  y: number;\n  /** Size in 0–1 space. */\n  w: number;\n  h: number;\n}\n\nexport interface LifecycleMinimapViewport {\n  /** Top-left in 0–1 space. */\n  x: number;\n  y: number;\n  /** Width / height in 0–1 space. */\n  w: number;\n  h: number;\n}\n\nexport interface LifecycleMinimapProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total width in pixels. */\n  width?: number;\n  /** Total height in pixels. */\n  height?: number;\n  /** Nodes to render as small filled rectangles. */\n  nodes: LifecycleMinimapNode[];\n  /** Pairs of node indices `[a, b]` to draw a line between. */\n  edges: [number, number][];\n  /** Optional viewport-frame overlay showing where the user is currently scrolled. */\n  viewport?: LifecycleMinimapViewport;\n}\n\n/**\n * Birds-eye overview of a lifecycle canvas. Coordinates are normalised (0–1)\n * so the same data works at any minimap size — the consumer picks dimensions\n * and the component scales. Visuals (node fill, edge stroke, viewport frame)\n * are themed via CSS custom properties on `.uxm-lifecycle-minimap`.\n */\nexport function LifecycleMinimap({\n  // Defaults match the `lifecycle-minimap` registry entry (240×104) so the\n  // editor preview and consumers that don't override start from the same\n  // baseline.\n  width = 240,\n  height = 104,\n  nodes,\n  edges,\n  viewport,\n  className,\n  style,\n  ...rest\n}: LifecycleMinimapProps) {\n  const center = (i: number) => ({ cx: nodes[i].x * width, cy: nodes[i].y * height });\n\n  return (\n    <div\n      {...rest}\n      className={cn('uxm-lifecycle-minimap', className)}\n      style={{ width, height, ...style }}\n    >\n      <svg width={width} height={height} className=\"uxm-lifecycle-minimap__svg\">\n        {edges.map(([a, b], i) => {\n          const A = center(a);\n          const B = center(b);\n          return (\n            <line\n              key={i}\n              x1={A.cx}\n              y1={A.cy}\n              x2={B.cx}\n              y2={B.cy}\n              className=\"uxm-lifecycle-minimap__edge\"\n            />\n          );\n        })}\n        {nodes.map((n, i) => (\n          <rect\n            key={i}\n            x={(n.x - n.w / 2) * width}\n            y={(n.y - n.h / 2) * height}\n            width={n.w * width}\n            height={n.h * height}\n            rx={2}\n            className=\"uxm-lifecycle-minimap__node\"\n          />\n        ))}\n      </svg>\n      {viewport && (\n        <div\n          className=\"uxm-lifecycle-minimap__viewport\"\n          style={{\n            left: viewport.x * width,\n            top: viewport.y * height,\n            width: viewport.w * width,\n            height: viewport.h * height,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8DM;AA9DN,qBAAmB;AAyCZ,SAAS,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI/B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,SAAS,CAAC,OAAe,EAAE,IAAI,MAAM,CAAC,EAAE,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE,IAAI,OAAO;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,mBAAG,yBAAyB,SAAS;AAAA,MAChD,OAAO,EAAE,OAAO,QAAQ,GAAG,MAAM;AAAA,MAEjC;AAAA,qDAAC,SAAI,OAAc,QAAgB,WAAU,8BAC1C;AAAA,gBAAM,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM;AACxB,kBAAM,IAAI,OAAO,CAAC;AAClB,kBAAM,IAAI,OAAO,CAAC;AAClB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAI,EAAE;AAAA,gBACN,IAAI,EAAE;AAAA,gBACN,IAAI,EAAE;AAAA,gBACN,IAAI,EAAE;AAAA,gBACN,WAAU;AAAA;AAAA,cALL;AAAA,YAMP;AAAA,UAEJ,CAAC;AAAA,UACA,MAAM,IAAI,CAAC,GAAG,MACb;AAAA,YAAC;AAAA;AAAA,cAEC,IAAI,EAAE,IAAI,EAAE,IAAI,KAAK;AAAA,cACrB,IAAI,EAAE,IAAI,EAAE,IAAI,KAAK;AAAA,cACrB,OAAO,EAAE,IAAI;AAAA,cACb,QAAQ,EAAE,IAAI;AAAA,cACd,IAAI;AAAA,cACJ,WAAU;AAAA;AAAA,YANL;AAAA,UAOP,CACD;AAAA,WACH;AAAA,QACC,YACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,MAAM,SAAS,IAAI;AAAA,cACnB,KAAK,SAAS,IAAI;AAAA,cAClB,OAAO,SAAS,IAAI;AAAA,cACpB,QAAQ,SAAS,IAAI;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/lifecycle-minimap/lifecycle-minimap.css

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+/* ── lifecycle-minimap ── */
+.uxm-lifecycle-minimap {
+  background-color: var(--uxm-lifecycle-minimap-bg, var(--color-surface-alt));
+  border: 1px solid var(--uxm-lifecycle-minimap-border-color, var(--color-border));
+  border-radius: var(--uxm-lifecycle-minimap-radius, 6px);
+  height: var(--uxm-lifecycle-minimap-height, 104px);
+  overflow: hidden;
+  position: relative;
+  width: var(--uxm-lifecycle-minimap-width, 240px);
+}
+.uxm-lifecycle-minimap__svg {
+  inset: 0;
+  position: absolute;
+}
+.uxm-lifecycle-minimap__edge {
+  stroke: var(--uxm-lifecycle-minimap-edge-color, var(--color-border));
+  stroke-width: 1;
+}
+.uxm-lifecycle-minimap__node {
+  fill: var(--uxm-lifecycle-minimap-node-color, var(--color-text-muted));
+}
+.uxm-lifecycle-minimap__viewport {
+  background-color: var(--uxm-lifecycle-minimap-viewport-fill, color-mix(in srgb, var(--color-accent) 10%, transparent));
+  border: 1.5px solid var(--uxm-lifecycle-minimap-viewport-border, var(--color-accent-bold));
+  border-radius: 2px;
+  pointer-events: none;
+  position: absolute;
+}

package/dist/ui/lifecycle-minimap/lifecycle-minimap.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+export interface LifecycleMinimapNode {
+    /** Position in 0–1 space (relative to the minimap frame). */
+    x: number;
+    y: number;
+    /** Size in 0–1 space. */
+    w: number;
+    h: number;
+}
+export interface LifecycleMinimapViewport {
+    /** Top-left in 0–1 space. */
+    x: number;
+    y: number;
+    /** Width / height in 0–1 space. */
+    w: number;
+    h: number;
+}
+export interface LifecycleMinimapProps extends HTMLAttributes<HTMLDivElement> {
+    /** Total width in pixels. */
+    width?: number;
+    /** Total height in pixels. */
+    height?: number;
+    /** Nodes to render as small filled rectangles. */
+    nodes: LifecycleMinimapNode[];
+    /** Pairs of node indices `[a, b]` to draw a line between. */
+    edges: [number, number][];
+    /** Optional viewport-frame overlay showing where the user is currently scrolled. */
+    viewport?: LifecycleMinimapViewport;
+}
+/**
+ * Birds-eye overview of a lifecycle canvas. Coordinates are normalised (0–1)
+ * so the same data works at any minimap size — the consumer picks dimensions
+ * and the component scales. Visuals (node fill, edge stroke, viewport frame)
+ * are themed via CSS custom properties on `.uxm-lifecycle-minimap`.
+ */
+export declare function LifecycleMinimap({ width, height, nodes, edges, viewport, className, style, ...rest }: LifecycleMinimapProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=lifecycle-minimap.d.ts.map

package/dist/ui/lifecycle-minimap/lifecycle-minimap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle-minimap.d.ts","sourceRoot":"","sources":["../../../src/ui/lifecycle-minimap/lifecycle-minimap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,oBAAoB;IACnC,6DAA6D;IAC7D,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,yBAAyB;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,wBAAwB;IACvC,6BAA6B;IAC7B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,mCAAmC;IACnC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B,6DAA6D;IAC7D,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAC1B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,wBAAwB,CAAC;CACrC;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAI/B,KAAW,EACX,MAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAiDvB"}

package/dist/ui/lifecycle-minimap/lifecycle-minimap.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+function LifecycleMinimap({
+  // Defaults match the `lifecycle-minimap` registry entry (240×104) so the
+  // editor preview and consumers that don't override start from the same
+  // baseline.
+  width = 240,
+  height = 104,
+  nodes,
+  edges,
+  viewport,
+  className,
+  style,
+  ...rest
+}) {
+  const center = (i) => ({ cx: nodes[i].x * width, cy: nodes[i].y * height });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn("uxm-lifecycle-minimap", className),
+      style: { width, height, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("svg", { width, height, className: "uxm-lifecycle-minimap__svg", children: [
+          edges.map(([a, b], i) => {
+            const A = center(a);
+            const B = center(b);
+            return /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: A.cx,
+                y1: A.cy,
+                x2: B.cx,
+                y2: B.cy,
+                className: "uxm-lifecycle-minimap__edge"
+              },
+              i
+            );
+          }),
+          nodes.map((n, i) => /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: (n.x - n.w / 2) * width,
+              y: (n.y - n.h / 2) * height,
+              width: n.w * width,
+              height: n.h * height,
+              rx: 2,
+              className: "uxm-lifecycle-minimap__node"
+            },
+            i
+          ))
+        ] }),
+        viewport && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "uxm-lifecycle-minimap__viewport",
+            style: {
+              left: viewport.x * width,
+              top: viewport.y * height,
+              width: viewport.w * width,
+              height: viewport.h * height
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LifecycleMinimap
+};
+//# sourceMappingURL=lifecycle-minimap.js.map

package/dist/ui/lifecycle-minimap/lifecycle-minimap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-minimap/lifecycle-minimap.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes } from 'react';\n\nexport interface LifecycleMinimapNode {\n  /** Position in 0–1 space (relative to the minimap frame). */\n  x: number;\n  y: number;\n  /** Size in 0–1 space. */\n  w: number;\n  h: number;\n}\n\nexport interface LifecycleMinimapViewport {\n  /** Top-left in 0–1 space. */\n  x: number;\n  y: number;\n  /** Width / height in 0–1 space. */\n  w: number;\n  h: number;\n}\n\nexport interface LifecycleMinimapProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total width in pixels. */\n  width?: number;\n  /** Total height in pixels. */\n  height?: number;\n  /** Nodes to render as small filled rectangles. */\n  nodes: LifecycleMinimapNode[];\n  /** Pairs of node indices `[a, b]` to draw a line between. */\n  edges: [number, number][];\n  /** Optional viewport-frame overlay showing where the user is currently scrolled. */\n  viewport?: LifecycleMinimapViewport;\n}\n\n/**\n * Birds-eye overview of a lifecycle canvas. Coordinates are normalised (0–1)\n * so the same data works at any minimap size — the consumer picks dimensions\n * and the component scales. Visuals (node fill, edge stroke, viewport frame)\n * are themed via CSS custom properties on `.uxm-lifecycle-minimap`.\n */\nexport function LifecycleMinimap({\n  // Defaults match the `lifecycle-minimap` registry entry (240×104) so the\n  // editor preview and consumers that don't override start from the same\n  // baseline.\n  width = 240,\n  height = 104,\n  nodes,\n  edges,\n  viewport,\n  className,\n  style,\n  ...rest\n}: LifecycleMinimapProps) {\n  const center = (i: number) => ({ cx: nodes[i].x * width, cy: nodes[i].y * height });\n\n  return (\n    <div\n      {...rest}\n      className={cn('uxm-lifecycle-minimap', className)}\n      style={{ width, height, ...style }}\n    >\n      <svg width={width} height={height} className=\"uxm-lifecycle-minimap__svg\">\n        {edges.map(([a, b], i) => {\n          const A = center(a);\n          const B = center(b);\n          return (\n            <line\n              key={i}\n              x1={A.cx}\n              y1={A.cy}\n              x2={B.cx}\n              y2={B.cy}\n              className=\"uxm-lifecycle-minimap__edge\"\n            />\n          );\n        })}\n        {nodes.map((n, i) => (\n          <rect\n            key={i}\n            x={(n.x - n.w / 2) * width}\n            y={(n.y - n.h / 2) * height}\n            width={n.w * width}\n            height={n.h * height}\n            rx={2}\n            className=\"uxm-lifecycle-minimap__node\"\n          />\n        ))}\n      </svg>\n      {viewport && (\n        <div\n          className=\"uxm-lifecycle-minimap__viewport\"\n          style={{\n            left: viewport.x * width,\n            top: viewport.y * height,\n            width: viewport.w * width,\n            height: viewport.h * height,\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA8DM,SAKM,KALN;AA9DN,SAAS,UAAU;AAyCZ,SAAS,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI/B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,SAAS,CAAC,OAAe,EAAE,IAAI,MAAM,CAAC,EAAE,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE,IAAI,OAAO;AAEjF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAChD,OAAO,EAAE,OAAO,QAAQ,GAAG,MAAM;AAAA,MAEjC;AAAA,6BAAC,SAAI,OAAc,QAAgB,WAAU,8BAC1C;AAAA,gBAAM,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,MAAM;AACxB,kBAAM,IAAI,OAAO,CAAC;AAClB,kBAAM,IAAI,OAAO,CAAC;AAClB,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,IAAI,EAAE;AAAA,gBACN,IAAI,EAAE;AAAA,gBACN,IAAI,EAAE;AAAA,gBACN,IAAI,EAAE;AAAA,gBACN,WAAU;AAAA;AAAA,cALL;AAAA,YAMP;AAAA,UAEJ,CAAC;AAAA,UACA,MAAM,IAAI,CAAC,GAAG,MACb;AAAA,YAAC;AAAA;AAAA,cAEC,IAAI,EAAE,IAAI,EAAE,IAAI,KAAK;AAAA,cACrB,IAAI,EAAE,IAAI,EAAE,IAAI,KAAK;AAAA,cACrB,OAAO,EAAE,IAAI;AAAA,cACb,QAAQ,EAAE,IAAI;AAAA,cACd,IAAI;AAAA,cACJ,WAAU;AAAA;AAAA,YANL;AAAA,UAOP,CACD;AAAA,WACH;AAAA,QACC,YACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,MAAM,SAAS,IAAI;AAAA,cACnB,KAAK,SAAS,IAAI;AAAA,cAClB,OAAO,SAAS,IAAI;AAAA,cACpB,QAAQ,SAAS,IAAI;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/lifecycle-node-card/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var lifecycle_node_card_exports = {};
+module.exports = __toCommonJS(lifecycle_node_card_exports);
+__reExport(lifecycle_node_card_exports, require("./lifecycle-node-card.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./lifecycle-node-card.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/lifecycle-node-card/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-node-card/index.ts"],"sourcesContent":["export * from './lifecycle-node-card';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wCAAc,kCAAd;","names":[]}

package/dist/ui/lifecycle-node-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lifecycle-node-card.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/lifecycle-node-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/lifecycle-node-card/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/ui/lifecycle-node-card/index.js

@@ -0,0 +1,2 @@
+export * from "./lifecycle-node-card.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/lifecycle-node-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-node-card/index.ts"],"sourcesContent":["export * from './lifecycle-node-card';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/lifecycle-node-card/lifecycle-node-card-preview.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var lifecycle_node_card_preview_exports = {};
+__export(lifecycle_node_card_preview_exports, {
+  LifecycleNodeCardPreview: () => LifecycleNodeCardPreview
+});
+module.exports = __toCommonJS(lifecycle_node_card_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+const SAMPLE = {
+  state: { title: "In Cart", badge: "2" },
+  condition: { title: "Validate Price", badge: "$data.price > 100" },
+  task: { title: "Send Notification" },
+  // A BI is an object, so the sample is an entity name rather than a step —
+  // and a generic one: this preview ships and renders in every consumer's
+  // studio, so a tenant or vendor name has no business in it.
+  interaction: { title: "SalesOrder" }
+};
+function LifecycleNodeCardPreview({ styles, variants }) {
+  const kind = variants.type ?? "state";
+  const sample = SAMPLE[kind];
+  const cssVars = {
+    "--uxm-lifecycle-node-card-width": `${styles.width}px`,
+    "--uxm-lifecycle-node-card-min-height": `${styles.minHeight}px`,
+    "--uxm-lifecycle-node-card-padding-x": `${styles.paddingX}px`,
+    "--uxm-lifecycle-node-card-padding-y": `${styles.paddingY}px`,
+    "--uxm-lifecycle-node-card-radius": `${styles.borderRadius}px`,
+    "--uxm-lifecycle-node-card-icon-size": `${styles.iconSize}px`,
+    "--uxm-lifecycle-node-card-kind-size": `${styles.kindSize}px`,
+    "--uxm-lifecycle-node-card-title-size": `${styles.titleSize}px`,
+    "--uxm-lifecycle-node-card-bg": styles.backgroundColor,
+    "--uxm-lifecycle-node-card-border-color": styles.borderColor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.LifecycleNodeCard,
+    {
+      kind,
+      title: sample.title,
+      badge: sample.badge,
+      style: cssVars
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleNodeCardPreview
+});
+//# sourceMappingURL=lifecycle-node-card-preview.cjs.map

package/dist/ui/lifecycle-node-card/lifecycle-node-card-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-node-card/lifecycle-node-card-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport {\n  LifecycleNodeCard,\n  type LifecycleNodeKind,\n} from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst SAMPLE: Record<LifecycleNodeKind, { title: string; badge?: string }> = {\n  state: { title: 'In Cart', badge: '2' },\n  condition: { title: 'Validate Price', badge: '$data.price > 100' },\n  task: { title: 'Send Notification' },\n  // A BI is an object, so the sample is an entity name rather than a step —\n  // and a generic one: this preview ships and renders in every consumer's\n  // studio, so a tenant or vendor name has no business in it.\n  interaction: { title: 'SalesOrder' },\n};\n\nexport function LifecycleNodeCardPreview({ styles, variants }: PreviewProps) {\n  const kind = (variants.type as LifecycleNodeKind) ?? 'state';\n  const sample = SAMPLE[kind];\n\n  // Every registry knob maps to a CSS custom property — same surface a\n  // production consumer would re-theme through, so what the editor saves\n  // is what ships.\n  const cssVars = {\n    '--uxm-lifecycle-node-card-width': `${styles.width}px`,\n    '--uxm-lifecycle-node-card-min-height': `${styles.minHeight}px`,\n    '--uxm-lifecycle-node-card-padding-x': `${styles.paddingX}px`,\n    '--uxm-lifecycle-node-card-padding-y': `${styles.paddingY}px`,\n    '--uxm-lifecycle-node-card-radius': `${styles.borderRadius}px`,\n    '--uxm-lifecycle-node-card-icon-size': `${styles.iconSize}px`,\n    '--uxm-lifecycle-node-card-kind-size': `${styles.kindSize}px`,\n    '--uxm-lifecycle-node-card-title-size': `${styles.titleSize}px`,\n    '--uxm-lifecycle-node-card-bg': styles.backgroundColor as string,\n    '--uxm-lifecycle-node-card-border-color': styles.borderColor as string,\n  } as CSSProperties;\n\n  return (\n    <LifecycleNodeCard\n      kind={kind}\n      title={sample.title}\n      badge={sample.badge}\n      style={cssVars}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCI;AAtCJ,gBAGO;AAIP,MAAM,SAAuE;AAAA,EAC3E,OAAO,EAAE,OAAO,WAAW,OAAO,IAAI;AAAA,EACtC,WAAW,EAAE,OAAO,kBAAkB,OAAO,oBAAoB;AAAA,EACjE,MAAM,EAAE,OAAO,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAInC,aAAa,EAAE,OAAO,aAAa;AACrC;AAEO,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAAiB;AAC3E,QAAM,OAAQ,SAAS,QAA8B;AACrD,QAAM,SAAS,OAAO,IAAI;AAK1B,QAAM,UAAU;AAAA,IACd,mCAAmC,GAAG,OAAO,KAAK;AAAA,IAClD,wCAAwC,GAAG,OAAO,SAAS;AAAA,IAC3D,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,wCAAwC,GAAG,OAAO,SAAS;AAAA,IAC3D,gCAAgC,OAAO;AAAA,IACvC,0CAA0C,OAAO;AAAA,EACnD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,OAAO;AAAA,MACd,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/dist/ui/lifecycle-node-card/lifecycle-node-card-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function LifecycleNodeCardPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=lifecycle-node-card-preview.d.ts.map

package/dist/ui/lifecycle-node-card/lifecycle-node-card-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle-node-card-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/lifecycle-node-card/lifecycle-node-card-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAkBrD,wBAAgB,wBAAwB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CA4B1E"}

package/dist/ui/lifecycle-node-card/lifecycle-node-card-preview.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  LifecycleNodeCard
+} from "../../ui/index.js";
+const SAMPLE = {
+  state: { title: "In Cart", badge: "2" },
+  condition: { title: "Validate Price", badge: "$data.price > 100" },
+  task: { title: "Send Notification" },
+  // A BI is an object, so the sample is an entity name rather than a step —
+  // and a generic one: this preview ships and renders in every consumer's
+  // studio, so a tenant or vendor name has no business in it.
+  interaction: { title: "SalesOrder" }
+};
+function LifecycleNodeCardPreview({ styles, variants }) {
+  const kind = variants.type ?? "state";
+  const sample = SAMPLE[kind];
+  const cssVars = {
+    "--uxm-lifecycle-node-card-width": `${styles.width}px`,
+    "--uxm-lifecycle-node-card-min-height": `${styles.minHeight}px`,
+    "--uxm-lifecycle-node-card-padding-x": `${styles.paddingX}px`,
+    "--uxm-lifecycle-node-card-padding-y": `${styles.paddingY}px`,
+    "--uxm-lifecycle-node-card-radius": `${styles.borderRadius}px`,
+    "--uxm-lifecycle-node-card-icon-size": `${styles.iconSize}px`,
+    "--uxm-lifecycle-node-card-kind-size": `${styles.kindSize}px`,
+    "--uxm-lifecycle-node-card-title-size": `${styles.titleSize}px`,
+    "--uxm-lifecycle-node-card-bg": styles.backgroundColor,
+    "--uxm-lifecycle-node-card-border-color": styles.borderColor
+  };
+  return /* @__PURE__ */ jsx(
+    LifecycleNodeCard,
+    {
+      kind,
+      title: sample.title,
+      badge: sample.badge,
+      style: cssVars
+    }
+  );
+}
+export {
+  LifecycleNodeCardPreview
+};
+//# sourceMappingURL=lifecycle-node-card-preview.js.map

package/dist/ui/lifecycle-node-card/lifecycle-node-card-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-node-card/lifecycle-node-card-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport {\n  LifecycleNodeCard,\n  type LifecycleNodeKind,\n} from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst SAMPLE: Record<LifecycleNodeKind, { title: string; badge?: string }> = {\n  state: { title: 'In Cart', badge: '2' },\n  condition: { title: 'Validate Price', badge: '$data.price > 100' },\n  task: { title: 'Send Notification' },\n  // A BI is an object, so the sample is an entity name rather than a step —\n  // and a generic one: this preview ships and renders in every consumer's\n  // studio, so a tenant or vendor name has no business in it.\n  interaction: { title: 'SalesOrder' },\n};\n\nexport function LifecycleNodeCardPreview({ styles, variants }: PreviewProps) {\n  const kind = (variants.type as LifecycleNodeKind) ?? 'state';\n  const sample = SAMPLE[kind];\n\n  // Every registry knob maps to a CSS custom property — same surface a\n  // production consumer would re-theme through, so what the editor saves\n  // is what ships.\n  const cssVars = {\n    '--uxm-lifecycle-node-card-width': `${styles.width}px`,\n    '--uxm-lifecycle-node-card-min-height': `${styles.minHeight}px`,\n    '--uxm-lifecycle-node-card-padding-x': `${styles.paddingX}px`,\n    '--uxm-lifecycle-node-card-padding-y': `${styles.paddingY}px`,\n    '--uxm-lifecycle-node-card-radius': `${styles.borderRadius}px`,\n    '--uxm-lifecycle-node-card-icon-size': `${styles.iconSize}px`,\n    '--uxm-lifecycle-node-card-kind-size': `${styles.kindSize}px`,\n    '--uxm-lifecycle-node-card-title-size': `${styles.titleSize}px`,\n    '--uxm-lifecycle-node-card-bg': styles.backgroundColor as string,\n    '--uxm-lifecycle-node-card-border-color': styles.borderColor as string,\n  } as CSSProperties;\n\n  return (\n    <LifecycleNodeCard\n      kind={kind}\n      title={sample.title}\n      badge={sample.badge}\n      style={cssVars}\n    />\n  );\n}\n"],"mappings":"AAuCI;AAtCJ;AAAA,EACE;AAAA,OAEK;AAIP,MAAM,SAAuE;AAAA,EAC3E,OAAO,EAAE,OAAO,WAAW,OAAO,IAAI;AAAA,EACtC,WAAW,EAAE,OAAO,kBAAkB,OAAO,oBAAoB;AAAA,EACjE,MAAM,EAAE,OAAO,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAInC,aAAa,EAAE,OAAO,aAAa;AACrC;AAEO,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAAiB;AAC3E,QAAM,OAAQ,SAAS,QAA8B;AACrD,QAAM,SAAS,OAAO,IAAI;AAK1B,QAAM,UAAU;AAAA,IACd,mCAAmC,GAAG,OAAO,KAAK;AAAA,IAClD,wCAAwC,GAAG,OAAO,SAAS;AAAA,IAC3D,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,oCAAoC,GAAG,OAAO,YAAY;AAAA,IAC1D,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,uCAAuC,GAAG,OAAO,QAAQ;AAAA,IACzD,wCAAwC,GAAG,OAAO,SAAS;AAAA,IAC3D,gCAAgC,OAAO;AAAA,IACvC,0CAA0C,OAAO;AAAA,EACnD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,OAAO;AAAA,MACd,OAAO,OAAO;AAAA,MACd,OAAO;AAAA;AAAA,EACT;AAEJ;","names":[]}

package/dist/ui/lifecycle-node-card/lifecycle-node-card.cjs

@@ -0,0 +1,85 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var lifecycle_node_card_exports = {};
+__export(lifecycle_node_card_exports, {
+  LifecycleNodeCard: () => LifecycleNodeCard
+});
+module.exports = __toCommonJS(lifecycle_node_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+var import_icon_tile = require("../../ui/icon-tile/index.cjs");
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-bg"]: "var(--kind-icon-bg)",
+  ["--uxm-icon-tile-color"]: "var(--kind-icon-color)",
+  ["--uxm-icon-tile-size"]: "var(--uxm-lifecycle-node-card-icon-size, 32px)",
+  ["--uxm-icon-tile-radius"]: "6px"
+};
+const KIND_LABEL = {
+  state: "State",
+  condition: "Condition",
+  task: "Task",
+  interaction: "Business Interaction"
+};
+const KIND_GLYPH = {
+  state: "check-circle",
+  condition: "question-mark-circle",
+  task: "cog-6-tooth",
+  interaction: "business-interaction"
+};
+function NodeIcon({ kind }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: KIND_GLYPH[kind], size: 14, strokeWidth: 1.5 });
+}
+function LifecycleNodeCard({
+  kind,
+  title,
+  badge,
+  kindLabel,
+  active,
+  className,
+  ...rest
+}) {
+  const containerStyle = rest.style;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ...rest,
+      className: (0, import_helpers.cn)(
+        "uxm-lifecycle-node-card",
+        `uxm-lifecycle-node-card--${kind}`,
+        active && "uxm-lifecycle-node-card--active",
+        className
+      ),
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_tile.IconTile, { style: ICON_TILE_STYLE, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeIcon, { kind }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-lifecycle-node-card__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-lifecycle-node-card__kind", children: kindLabel ?? KIND_LABEL[kind] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-lifecycle-node-card__title", children: title })
+        ] }),
+        badge != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-lifecycle-node-card__badge", children: badge })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleNodeCard
+});
+//# sourceMappingURL=lifecycle-node-card.cjs.map

package/dist/ui/lifecycle-node-card/lifecycle-node-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-node-card/lifecycle-node-card.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\nimport { IconTile } from '@/ui/icon-tile';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n// The kind modifier classes (`.uxm-lifecycle-node-card--state` etc.) set\n// `--kind-icon-bg` and `--kind-icon-color` on the card. Those bridge to\n// IconTile's own `--uxm-icon-tile-{bg,color}` so the kind-aware coloring\n// continues to drive the icon tile after composition.\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-bg' as string]: 'var(--kind-icon-bg)',\n  ['--uxm-icon-tile-color' as string]: 'var(--kind-icon-color)',\n  ['--uxm-icon-tile-size' as string]: 'var(--uxm-lifecycle-node-card-icon-size, 32px)',\n  ['--uxm-icon-tile-radius' as string]: '6px',\n};\n\nexport type LifecycleNodeKind = 'state' | 'condition' | 'task' | 'interaction';\n\n// Drop the native HTML `title` attribute (a string, used for tooltips) — our\n// `title` prop is the primary content (ReactNode). Tooltips can still be set\n// via `aria-label` if needed.\nexport interface LifecycleNodeCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** What kind of step this node represents — drives the icon, label, and accent color. */\n  kind: LifecycleNodeKind;\n  /** Primary text — typically the node name (e.g. \"In Cart\", \"Validate Price\"). */\n  title: ReactNode;\n  /**\n   * Trailing badge content — e.g. an action count for state nodes (\"2\"), or a\n   * truncated condition expression for condition nodes (\"$data.price > 100\").\n   * Hidden if not provided.\n   */\n  badge?: ReactNode;\n  /** Override the kind label sub-text shown above the title. Defaults to humanised `kind`. */\n  kindLabel?: ReactNode;\n  /** Render the active/selected state. */\n  active?: boolean;\n}\n\nconst KIND_LABEL: Record<LifecycleNodeKind, string> = {\n  state: 'State',\n  condition: 'Condition',\n  task: 'Task',\n  interaction: 'Business Interaction',\n};\n\n// Map each node kind to its glyph in the Icon registry. Centralised so\n// other lifecycle components share the exact same kind→glyph contract.\n//\n// `interaction` takes `business-interaction` (exchange arrows) rather than a\n// clipboard: a clipboard reads as a checklist, which is what `task` already\n// means, and the exchange mark is what the product uses for a BI in its sidebar\n// and dashboard — so the canvas agrees with the rest of the app.\nconst KIND_GLYPH: Record<LifecycleNodeKind, string> = {\n  state: 'check-circle',\n  condition: 'question-mark-circle',\n  task: 'cog-6-tooth',\n  interaction: 'business-interaction',\n};\n\nfunction NodeIcon({ kind }: { kind: LifecycleNodeKind }) {\n  return <Icon glyph={KIND_GLYPH[kind]} size={14} strokeWidth={1.5} />;\n}\n\n/**\n * The pill card used for each node on a BI lifecycle canvas. Four kinds — the\n * first three describe STEPS in a lifecycle, the fourth an OBJECT the lifecycle\n * runs on, which is why it gets its own kind instead of borrowing `state`'s\n * green checkmark with a substituted `kindLabel`:\n *\n *   `state`        — green accent · checkmark icon · optional action-count badge\n *   `condition`    — warm accent  · question icon  · optional expression badge\n *   `task`         — cool accent  · gear icon\n *   `interaction`  — green accent · exchange icon  · a Business Interaction\n *\n * `interaction` shares `state`'s green on purpose: a BI is marked green\n * everywhere else in the product, so the canvas keeps that. What separates the\n * two is the glyph and the label, not the tint.\n *\n * Visuals (icon tile color, accent stripe, default size) are driven by CSS\n * custom properties scoped to the kind modifier — see `.uxm-lifecycle-node-card--{kind}`\n * in styles.css. Override per-instance via `style` / className when needed.\n */\nexport function LifecycleNodeCard({\n  kind,\n  title,\n  badge,\n  kindLabel,\n  active,\n  className,\n  ...rest\n}: LifecycleNodeCardProps) {\n  const containerStyle = rest.style as CSSProperties | undefined;\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'uxm-lifecycle-node-card',\n        `uxm-lifecycle-node-card--${kind}`,\n        active && 'uxm-lifecycle-node-card--active',\n        className,\n      )}\n      style={containerStyle}\n    >\n      <IconTile style={ICON_TILE_STYLE} aria-hidden=\"true\">\n        <NodeIcon kind={kind} />\n      </IconTile>\n      <div className=\"uxm-lifecycle-node-card__body\">\n        <p className=\"uxm-lifecycle-node-card__kind\">{kindLabel ?? KIND_LABEL[kind]}</p>\n        <p className=\"uxm-lifecycle-node-card__title\">{title}</p>\n      </div>\n      {badge != null && <span className=\"uxm-lifecycle-node-card__badge\">{badge}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DS;AA7DT,qBAAmB;AACnB,kBAAqB;AACrB,uBAAyB;AAQzB,MAAM,kBAAiC;AAAA,EACrC,CAAC,oBAA8B,GAAG;AAAA,EAClC,CAAC,uBAAiC,GAAG;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AAwBA,MAAM,aAAgD;AAAA,EACpD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,aAAa;AACf;AASA,MAAM,aAAgD;AAAA,EACpD,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,aAAa;AACf;AAEA,SAAS,SAAS,EAAE,KAAK,GAAgC;AACvD,SAAO,4CAAC,oBAAK,OAAO,WAAW,IAAI,GAAG,MAAM,IAAI,aAAa,KAAK;AACpE;AAqBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,iBAAiB,KAAK;AAC5B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,QACA,4BAA4B,IAAI;AAAA,QAChC,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MAEP;AAAA,oDAAC,6BAAS,OAAO,iBAAiB,eAAY,QAC5C,sDAAC,YAAS,MAAY,GACxB;AAAA,QACA,6CAAC,SAAI,WAAU,iCACb;AAAA,sDAAC,OAAE,WAAU,iCAAiC,uBAAa,WAAW,IAAI,GAAE;AAAA,UAC5E,4CAAC,OAAE,WAAU,kCAAkC,iBAAM;AAAA,WACvD;AAAA,QACC,SAAS,QAAQ,4CAAC,UAAK,WAAU,kCAAkC,iBAAM;AAAA;AAAA;AAAA,EAC5E;AAEJ;","names":[]}