@viax.io/uxm 4.36.0

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

@@ -0,0 +1,205 @@
+"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_connector_exports = {};
+__export(lifecycle_connector_exports, {
+  LifecycleConnector: () => LifecycleConnector
+});
+module.exports = __toCommonJS(lifecycle_connector_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+const themeChangeSubscribers = /* @__PURE__ */ new Set();
+let themeChangeObserver = null;
+function subscribeToThemeChange(onChange) {
+  themeChangeSubscribers.add(onChange);
+  themeChangeObserver ?? (themeChangeObserver = (() => {
+    const observer = new MutationObserver(() => {
+      for (const notify of themeChangeSubscribers) notify();
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    return observer;
+  })());
+  return () => {
+    themeChangeSubscribers.delete(onChange);
+    if (themeChangeSubscribers.size === 0) {
+      themeChangeObserver?.disconnect();
+      themeChangeObserver = null;
+    }
+  };
+}
+const ARROW_SIZE_PATTERN = /^(?:\d+(?:\.\d+)?|\.\d+)(?:px)?$/;
+function useThemedArrowSize(ref, enabled) {
+  const [size, setSize] = (0, import_react.useState)();
+  (0, import_react.useLayoutEffect)(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+    const read = () => {
+      const raw = getComputedStyle(el).getPropertyValue("--uxm-lifecycle-connector-arrow-size").trim();
+      const parsed = ARROW_SIZE_PATTERN.test(raw) ? Number.parseFloat(raw) : NaN;
+      setSize(Number.isFinite(parsed) ? parsed : void 0);
+    };
+    read();
+    return subscribeToThemeChange(read);
+  }, [ref, enabled]);
+  return size;
+}
+function dedupe(points) {
+  return points.filter((p, i) => i === 0 || p.x !== points[i - 1].x || p.y !== points[i - 1].y);
+}
+function polylineD(points, radius) {
+  if (points.length < 3 || radius <= 0) {
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+  }
+  const round = (n) => Math.round(n * 100) / 100;
+  let d = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const corner = points[i];
+    const next = points[i + 1];
+    const inLen = Math.hypot(corner.x - prev.x, corner.y - prev.y) || 1;
+    const outLen = Math.hypot(next.x - corner.x, next.y - corner.y) || 1;
+    const r = Math.min(radius, inLen / 2, outLen / 2);
+    const entry = {
+      x: round(corner.x - (corner.x - prev.x) / inLen * r),
+      y: round(corner.y - (corner.y - prev.y) / inLen * r)
+    };
+    const exit = {
+      x: round(corner.x + (next.x - corner.x) / outLen * r),
+      y: round(corner.y + (next.y - corner.y) / outLen * r)
+    };
+    d += ` L ${entry.x} ${entry.y} Q ${corner.x} ${corner.y} ${exit.x} ${exit.y}`;
+  }
+  const last = points[points.length - 1];
+  return `${d} L ${last.x} ${last.y}`;
+}
+function LifecycleConnector({
+  from,
+  to,
+  state = "idle",
+  routing = "auto",
+  crossAt = 0.5,
+  cornerRadius = 4,
+  startDot = true,
+  arrowSize: arrowSizeProp,
+  arrowhead = "triangle",
+  dashPattern,
+  className,
+  style,
+  ...rest
+}) {
+  const rootRef = (0, import_react.useRef)(null);
+  const themedArrowSize = useThemedArrowSize(rootRef, arrowSizeProp === void 0);
+  const arrowSize = arrowSizeProp ?? themedArrowSize ?? 7;
+  const isStraight = from.x === to.x;
+  const mode = routing === "auto" ? isStraight ? "straight" : "bezier" : routing;
+  const pullback = arrowhead === "line" ? 0 : arrowSize;
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const len = Math.hypot(dx, dy) || 1;
+  const tipX = to.x;
+  const tipY = to.y;
+  const lineEndX = to.x - dx / len * pullback;
+  const lineEndY = to.y - dy / len * pullback;
+  let pathD;
+  let ux;
+  let uy;
+  if (mode === "orthogonal") {
+    const crossY = from.y + (to.y - from.y) * crossAt;
+    const corners = dedupe([
+      { x: from.x, y: from.y },
+      { x: from.x, y: crossY },
+      { x: to.x, y: crossY },
+      { x: to.x, y: to.y }
+    ]);
+    const last = corners[corners.length - 1];
+    const prev = corners[corners.length - 2] ?? { x: from.x - dx, y: from.y - dy };
+    const segDx = last.x - prev.x;
+    const segDy = last.y - prev.y;
+    const segLen = Math.hypot(segDx, segDy) || 1;
+    ux = segDx / segLen;
+    uy = segDy / segLen;
+    const segPullback = Math.min(pullback, segLen);
+    const end = { x: last.x - ux * segPullback, y: last.y - uy * segPullback };
+    const routed = dedupe([...corners.slice(0, -1), end]);
+    pathD = polylineD(routed, cornerRadius);
+  } else {
+    ux = dx / len;
+    uy = dy / len;
+    if (mode === "straight") {
+      pathD = `M ${from.x} ${from.y} L ${lineEndX} ${lineEndY}`;
+    } else {
+      const midY = (from.y + to.y) / 2;
+      pathD = `M ${from.x} ${from.y} C ${from.x} ${midY}, ${to.x} ${midY}, ${lineEndX} ${lineEndY}`;
+    }
+  }
+  const ax = tipX;
+  const ay = tipY;
+  const px = -uy;
+  const py = ux;
+  const tip = `${ax},${ay}`;
+  const baseL = `${ax - ux * arrowSize + px * arrowSize * 0.55},${ay - uy * arrowSize + py * arrowSize * 0.55}`;
+  const baseR = `${ax - ux * arrowSize - px * arrowSize * 0.55},${ay - uy * arrowSize - py * arrowSize * 0.55}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "g",
+    {
+      ...rest,
+      ref: rootRef,
+      className: (0, import_helpers.cn)(
+        "uxm-lifecycle-connector",
+        `uxm-lifecycle-connector--${state}`,
+        className
+      ),
+      style: dashPattern === void 0 ? style : { ...style, "--uxm-lifecycle-connector-dash-pattern": dashPattern },
+      children: [
+        startDot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "uxm-lifecycle-connector__start", cx: from.x, cy: from.y, r: 3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            className: "uxm-lifecycle-connector__path",
+            d: pathD,
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: mode === "orthogonal" ? "round" : void 0
+          }
+        ),
+        arrowhead === "line" ? (
+          // Open chevron: base → tip → base, stroked (not filled) at the
+          // connector's own width. Points along the final run, same span as the
+          // triangle.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "polyline",
+            {
+              className: "uxm-lifecycle-connector__arrow uxm-lifecycle-connector__arrow--line",
+              points: `${baseL} ${tip} ${baseR}`
+            }
+          )
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { className: "uxm-lifecycle-connector__arrow", points: `${tip} ${baseL} ${baseR}` })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleConnector
+});
+//# sourceMappingURL=lifecycle-connector.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-connector/lifecycle-connector.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport type { CSSProperties, RefObject, SVGAttributes } from 'react';\n\nexport type LifecycleConnectorState = 'idle' | 'active' | 'dashed' | 'dashed-active';\n\nexport type LifecycleConnectorRouting = 'auto' | 'straight' | 'bezier' | 'orthogonal';\n\nexport type LifecycleConnectorArrowhead = 'triangle' | 'line';\n\ninterface ConnectorPoint {\n  x: number;\n  y: number;\n}\n\n// `from` and `to` on SVG elements are string-typed SMIL animation attrs we\n// don't use. Dropping them lets us reuse the names for the actual node-anchor\n// coordinates.\nexport interface LifecycleConnectorProps extends Omit<SVGAttributes<SVGGElement>, 'from' | 'to'> {\n  /** Source point (in the parent SVG's coordinate system). */\n  from: ConnectorPoint;\n  /** Destination point. The arrowhead is placed here. */\n  to: ConnectorPoint;\n  /**\n   * Visual state — this modifier drives the stroke colour + width of all three\n   * sub-elements (start dot, path, arrowhead) in lockstep; it does not add or\n   * move the start dot, which is the separate `startDot` prop. `idle` = thin\n   * grey, `active` = bolder accent + heavier stroke,\n   * `dashed` = dashed (often used for \"after deploy\" / future branches), and\n   * `dashed-active` = a dashed edge shown in its active/selected emphasis\n   * (accent colour + heavier stroke, still dashed) — for when a future/\n   * conditional branch is the selected or hovered one.\n   */\n  state?: LifecycleConnectorState;\n  /**\n   * Route shape.\n   *\n   * - `auto` (default) — straight when the anchors are vertically aligned,\n   *   cubic Bezier otherwise. This is the historical behaviour and stays\n   *   byte-identical, so existing lifecycle canvases are untouched.\n   * - `straight` — a single line, whatever the anchors are.\n   * - `bezier` — always the swooping cubic, even on aligned anchors.\n   * - `orthogonal` — an elbow: three axis-aligned runs (stem → cross → drop).\n   *   Lets a caller draw a bus-style tree without splitting one edge into\n   *   several connectors.\n   */\n  routing?: LifecycleConnectorRouting;\n  /**\n   * Where the elbow's cross segment sits along the vertical span, `0` (level\n   * with `from`) → `1` (level with `to`). Only read when the resolved routing\n   * is `orthogonal`.\n   *\n   * A caller placing labels or group pills on the cross bus generally has its\n   * own level in mind, so this is a knob rather than a hardcoded midpoint.\n   *\n   * Deliberately not clamped: a value outside 0–1 puts the bus beyond the\n   * anchors, which is the escape hatch for routing an edge around something\n   * rather than between the two nodes. The studio's slider stays within 0–1.\n   */\n  crossAt?: number;\n  /**\n   * Corner rounding in px for the elbow's two turns; pass `0` for square\n   * corners. Clamped per corner to half the shorter of the two runs meeting\n   * there, so a tight elbow rounds as far as it can instead of overshooting.\n   *\n   * Defaults to a slight `4` rather than `0`: a bare right angle reads as a\n   * drawing artifact next to the rounded node cards, and every elbow in a\n   * diagram wants the same treatment anyway.\n   *\n   * `stroke-linejoin` alone can't do this — it only rounds by half the stroke\n   * width, which is invisible at the 1.5px default.\n   */\n  cornerRadius?: number;\n  /** Render the dot at the source anchor. Set `false` on the non-first edge of a shared fan-out so one bus shows one dot. */\n  startDot?: boolean;\n  /**\n   * Arrowhead size in px. Defaults to the `connectorArrowSize` registry\n   * default (7) so the editor knob has the same starting point as the\n   * production component.\n   */\n  arrowSize?: number;\n  /**\n   * Arrowhead shape. `triangle` (default) = a filled triangle; `line` = an\n   * open two-stroke chevron (same span, `fill: none`, drawn at the connector's\n   * stroke width). Both point along the final run and scale with `arrowSize`.\n   */\n  arrowhead?: LifecycleConnectorArrowhead;\n  /**\n   * SVG `stroke-dasharray` pattern used when `state` is `\"dashed\"` or\n   * `\"dashed-active\"` — both dashed states read the same pattern.\n   *\n   * Applied as an inline `--uxm-lifecycle-connector-dash-pattern`, not as a\n   * `stroke-dasharray` attribute: a presentation attribute loses to any author\n   * rule, and the stylesheet's dashed rule always resolves (it carries a\n   * literal fallback), so an attribute here would never paint.\n   *\n   * Left undefined the value comes from the cascade — resolution is\n   * **prop → CSS var → `6 4`**, matching `arrowSize`. Passing it is therefore\n   * an override of a published theme, which is why there is no default: a\n   * defaulted prop would write an inline var on every connector and no theme\n   * could ever win.\n   */\n  dashPattern?: string;\n}\n\n/**\n * One `MutationObserver` for the whole document, shared by every mounted\n * connector, refcounted so it disconnects when the last one unmounts.\n *\n * A lifecycle canvas mounts many connectors at once, and each needs to know\n * when the theme flips. Giving each its own observer would put N of them on the\n * same node to watch one attribute. The *reads* stay per-element on purpose\n * (see `useThemedArrowSize`) — those are cheap once the style recalc has\n * happened, and they are what keeps a narrower selector working.\n *\n * Module-level mutable state is deliberate and safe here: it is only ever\n * touched from a layout effect, so it never runs during SSR.\n */\nconst themeChangeSubscribers = new Set<() => void>();\nlet themeChangeObserver: MutationObserver | null = null;\n\nfunction subscribeToThemeChange(onChange: () => void): () => void {\n  themeChangeSubscribers.add(onChange);\n\n  themeChangeObserver ??= (() => {\n    const observer = new MutationObserver(() => {\n      for (const notify of themeChangeSubscribers) notify();\n    });\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme'],\n    });\n    return observer;\n  })();\n\n  return () => {\n    themeChangeSubscribers.delete(onChange);\n    if (themeChangeSubscribers.size === 0) {\n      themeChangeObserver?.disconnect();\n      themeChangeObserver = null;\n    }\n  };\n}\n\n/**\n * Values `useThemedArrowSize` will accept off the cascade: a non-negative\n * number, optionally suffixed `px`. No other unit is convertible without a\n * font-size / viewport context the read doesn't have, and a negative size would\n * turn the arrowhead inside out.\n */\nconst ARROW_SIZE_PATTERN = /^(?:\\d+(?:\\.\\d+)?|\\.\\d+)(?:px)?$/;\n\n/**\n * Read the themed arrow size back out of the cascade.\n *\n * Normally a themed value is *applied* by CSS and the component never looks —\n * that is how every other `--uxm-lifecycle-connector-*` var here works. Arrow\n * size can't be: it ends up as coordinates inside a `<polygon>`, which no CSS\n * property sets. Yet it is genuinely a theme decision (every arrowhead in an\n * app should agree) and the studio publishes it, so without reading it back the\n * published value is written to the stylesheet and silently ignored — which is\n * exactly what happened before this.\n *\n * Treat this as the narrow exception it is: if a value can be expressed as a\n * real CSS property, style it in the stylesheet and let the cascade do its job.\n * `crossAt` and `cornerRadius` deliberately have no var at all — where a bus\n * sits is per-edge layout, not theme.\n *\n * Re-reads when the document's `data-theme` flips so a themed size tracks a\n * theme switch the way a themed colour does, instead of freezing at its\n * mount-time value.\n *\n * The read is per-element, not shared: the var is published on the\n * `.uxm-lifecycle-connector` class, but a consumer can scope a narrower rule to\n * one branch of a diagram, and a cached document-wide value would silently\n * flatten that. The observer behind it *is* shared — see\n * `subscribeToThemeChange`.\n *\n * `useLayoutEffect`, not `useEffect`: the value feeds path geometry and the\n * arrowhead's pullback, so reading it after paint would show one frame at the\n * default before settling. This package is client-only, so there is no SSR\n * mismatch to weigh against that.\n */\nfunction useThemedArrowSize(\n  ref: RefObject<Element | null>,\n  enabled: boolean,\n): number | undefined {\n  const [size, setSize] = useState<number>();\n\n  useLayoutEffect(() => {\n    if (!enabled) return;\n    const el = ref.current;\n    if (!el) return;\n\n    const read = () => {\n      const raw = getComputedStyle(el)\n        .getPropertyValue('--uxm-lifecycle-connector-arrow-size')\n        .trim();\n      // Reject anything that isn't a bare number or a `px` length before\n      // parsing. `parseFloat` strips a unit it doesn't understand rather than\n      // failing, so an unguarded read turns `0.75rem` into a 0.75px arrowhead —\n      // a silently invisible one — instead of falling back to the default. The\n      // studio publishes `7px` (its formatter appends the unit) and a\n      // hand-written override is usually bare, so both spellings are accepted\n      // and everything else is refused.\n      const parsed = ARROW_SIZE_PATTERN.test(raw) ? Number.parseFloat(raw) : NaN;\n      // `undefined` (not NaN) so the caller can fall through with `??`.\n      setSize(Number.isFinite(parsed) ? parsed : undefined);\n    };\n\n    read();\n\n    return subscribeToThemeChange(read);\n  }, [ref, enabled]);\n\n  return size;\n}\n\n/**\n * Drop points that repeat the previous one, so a degenerate run (a zero-length\n * stem when `crossAt` is 0, a zero-length drop when it is 1, a zero-length\n * cross when the anchors share an x) never becomes the segment the arrowhead\n * takes its angle from. Without this the elbow's head flips to an arbitrary\n * direction at the ends of the `crossAt` range.\n */\nfunction dedupe(points: ConnectorPoint[]): ConnectorPoint[] {\n  return points.filter((p, i) => i === 0 || p.x !== points[i - 1].x || p.y !== points[i - 1].y);\n}\n\n/**\n * Emit a polyline through `points`, rounding each interior corner with a\n * quadratic whose control point is the corner itself — for the right angles an\n * elbow makes, that reads as a clean fillet. `radius` is clamped per corner to\n * half of each adjoining run so two corners on a short middle segment can't\n * eat into one another.\n */\nfunction polylineD(points: ConnectorPoint[], radius: number): string {\n  if (points.length < 3 || radius <= 0) {\n    return points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');\n  }\n\n  const round = (n: number) => Math.round(n * 100) / 100;\n  let d = `M ${points[0].x} ${points[0].y}`;\n\n  for (let i = 1; i < points.length - 1; i++) {\n    const prev = points[i - 1];\n    const corner = points[i];\n    const next = points[i + 1];\n    const inLen = Math.hypot(corner.x - prev.x, corner.y - prev.y) || 1;\n    const outLen = Math.hypot(next.x - corner.x, next.y - corner.y) || 1;\n    const r = Math.min(radius, inLen / 2, outLen / 2);\n    const entry = {\n      x: round(corner.x - ((corner.x - prev.x) / inLen) * r),\n      y: round(corner.y - ((corner.y - prev.y) / inLen) * r),\n    };\n    const exit = {\n      x: round(corner.x + ((next.x - corner.x) / outLen) * r),\n      y: round(corner.y + ((next.y - corner.y) / outLen) * r),\n    };\n    d += ` L ${entry.x} ${entry.y} Q ${corner.x} ${corner.y} ${exit.x} ${exit.y}`;\n  }\n\n  const last = points[points.length - 1];\n  return `${d} L ${last.x} ${last.y}`;\n}\n\n/**\n * One edge between two lifecycle nodes. Returns an SVG `<g>` fragment so\n * callers can place many connectors inside one parent `<svg>` (typical for a\n * full lifecycle canvas). Routing is picked by the `routing` prop — see its\n * docs; the default `auto` keeps the original straight/Bezier split.\n *\n * Stroke colors / widths come from CSS custom properties on the\n * `.uxm-lifecycle-connector` class — consumers can re-theme by setting them\n * on a parent.\n */\nexport function LifecycleConnector({\n  from,\n  to,\n  state = 'idle',\n  routing = 'auto',\n  crossAt = 0.5,\n  cornerRadius = 4,\n  startDot = true,\n  arrowSize: arrowSizeProp,\n  arrowhead = 'triangle',\n  dashPattern,\n  className,\n  style,\n  ...rest\n}: LifecycleConnectorProps) {\n  const rootRef = useRef<SVGGElement>(null);\n  // Skip the DOM read when the caller pinned the value — a canvas that passes\n  // `arrowSize` (the studio preview does) never touches `getComputedStyle`.\n  const themedArrowSize = useThemedArrowSize(rootRef, arrowSizeProp === undefined);\n\n  // An explicit prop always wins over a published theme; the literal is the\n  // last resort, and matches the registry default.\n  const arrowSize = arrowSizeProp ?? themedArrowSize ?? 7;\n\n  const isStraight = from.x === to.x;\n  const mode = routing === 'auto' ? (isStraight ? 'straight' : 'bezier') : routing;\n\n  // Stop the path/line a bit short of the destination so the arrowhead sits\n  // cleanly on the node edge instead of disappearing behind the polygon. The\n  // filled triangle covers that pulled-back seam; the open `line` chevron has\n  // no fill, so it must run all the way to the tip (its point) — a pullback\n  // there leaves the line ending at the chevron's open mouth and reads as a\n  // gap between the line and the head.\n  const pullback = arrowhead === 'line' ? 0 : arrowSize;\n  const dx = to.x - from.x;\n  const dy = to.y - from.y;\n  const len = Math.hypot(dx, dy) || 1;\n  const tipX = to.x;\n  const tipY = to.y;\n  const lineEndX = to.x - (dx / len) * pullback;\n  const lineEndY = to.y - (dy / len) * pullback;\n\n  let pathD: string;\n  // Arrow direction — the unit vector of the path's LAST run. On straight and\n  // Bezier routes that is the whole-edge vector (the historical approximation,\n  // close enough for these gentle curves); on an elbow it must come from the\n  // final axis-aligned run, or a vertical drop would get a diagonal head.\n  let ux: number;\n  let uy: number;\n\n  if (mode === 'orthogonal') {\n    const crossY = from.y + (to.y - from.y) * crossAt;\n    const corners = dedupe([\n      { x: from.x, y: from.y },\n      { x: from.x, y: crossY },\n      { x: to.x, y: crossY },\n      { x: to.x, y: to.y },\n    ]);\n\n    // A fully degenerate route (from === to) leaves a single point; fall back\n    // to the whole-edge vector so the arrowhead still has a direction.\n    const last = corners[corners.length - 1];\n    const prev = corners[corners.length - 2] ?? { x: from.x - dx, y: from.y - dy };\n    const segDx = last.x - prev.x;\n    const segDy = last.y - prev.y;\n    const segLen = Math.hypot(segDx, segDy) || 1;\n    ux = segDx / segLen;\n    uy = segDy / segLen;\n\n    // Clamp the pullback to the final run: a cross level close to `to` leaves a\n    // drop shorter than the arrowhead, and an unclamped pullback would reverse\n    // that segment and kink the elbow.\n    const segPullback = Math.min(pullback, segLen);\n    const end = { x: last.x - ux * segPullback, y: last.y - uy * segPullback };\n    // Dedupe AGAIN after the pullback: a cross level within `arrowSize` of the\n    // destination collapses the final run onto the corner, which would leave a\n    // zero-length command (and, with rounding on, a corner with nothing to\n    // turn into).\n    const routed = dedupe([...corners.slice(0, -1), end]);\n    pathD = polylineD(routed, cornerRadius);\n  } else {\n    ux = dx / len;\n    uy = dy / len;\n    if (mode === 'straight') {\n      pathD = `M ${from.x} ${from.y} L ${lineEndX} ${lineEndY}`;\n    } else {\n      // Cubic with control points pulled vertically — produces a smooth S/curve\n      // that reads as \"branch from parent down to sibling column\".\n      const midY = (from.y + to.y) / 2;\n      pathD = `M ${from.x} ${from.y} C ${from.x} ${midY}, ${to.x} ${midY}, ${lineEndX} ${lineEndY}`;\n    }\n  }\n\n  // Arrowhead points: a triangle whose tip is at (tipX, tipY) pointing along\n  // the last run's direction.\n  const ax = tipX;\n  const ay = tipY;\n  const px = -uy;\n  const py = ux;\n  const tip = `${ax},${ay}`;\n  const baseL = `${ax - ux * arrowSize + px * arrowSize * 0.55},${ay - uy * arrowSize + py * arrowSize * 0.55}`;\n  const baseR = `${ax - ux * arrowSize - px * arrowSize * 0.55},${ay - uy * arrowSize - py * arrowSize * 0.55}`;\n\n  return (\n    <g\n      {...rest}\n      // After the spread on purpose: the geometry read needs this ref, and the\n      // props interface doesn't expose one for a caller to supply.\n      ref={rootRef}\n      className={cn(\n        'uxm-lifecycle-connector',\n        `uxm-lifecycle-connector--${state}`,\n        className,\n      )}\n      // Only when the caller passed one — otherwise a connector with no `style`\n      // of its own keeps emitting no `style` attribute at all, and the dash\n      // pattern stays a pure cascade decision.\n      style={\n        dashPattern === undefined\n          ? style\n          : ({ ...style, '--uxm-lifecycle-connector-dash-pattern': dashPattern } as CSSProperties)\n      }\n    >\n      {startDot && (\n        <circle className=\"uxm-lifecycle-connector__start\" cx={from.x} cy={from.y} r={3} />\n      )}\n      {/* Only an elbow has joins to round. Gated rather than always-on so the\n          single-segment routes emit the exact attribute set they always did —\n          `undefined` makes React omit it — and `auto` stays byte-identical\n          down to the rendered DOM, not just the path data. */}\n      <path\n        className=\"uxm-lifecycle-connector__path\"\n        d={pathD}\n        fill=\"none\"\n        strokeLinecap=\"round\"\n        strokeLinejoin={mode === 'orthogonal' ? 'round' : undefined}\n      />\n      {arrowhead === 'line' ? (\n        // Open chevron: base → tip → base, stroked (not filled) at the\n        // connector's own width. Points along the final run, same span as the\n        // triangle.\n        <polyline\n          className=\"uxm-lifecycle-connector__arrow uxm-lifecycle-connector__arrow--line\"\n          points={`${baseL} ${tip} ${baseR}`}\n        />\n      ) : (\n        <polygon className=\"uxm-lifecycle-connector__arrow\" points={`${tip} ${baseL} ${baseR}`} />\n      )}\n    </g>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,65 @@
+@charset "UTF-8";
+/* ── lifecycle-connector ── */
+/* Override vars are read under their canonical `--uxm-lifecycle-connector-*`
+   name, with the doubled `--uxm-lifecycle-connector-connector-*` spelling kept
+   as a fallback alias. The doubled form was never authored — it fell out of the
+   studio generator prefixing an already-`connector`-prefixed knob key — but it
+   is what published themes wrote, so it keeps working for one minor. */
+.uxm-lifecycle-connector {
+  --uxm-lifecycle-connector-color: var(
+    --uxm-lifecycle-connector-idle-color,
+    var(--uxm-lifecycle-connector-connector-idle-color, var(--color-text-subtle))
+  );
+  --uxm-lifecycle-connector-width: var(
+    --uxm-lifecycle-connector-idle-stroke-width,
+    var(--uxm-lifecycle-connector-connector-idle-stroke-width, 1.5)
+  );
+  /* `dashed-active` shares the active emphasis (colour + width) so "active"
+     stays defined once here; it adds the dashed dasharray via the path rule
+     below. */
+}
+.uxm-lifecycle-connector--active, .uxm-lifecycle-connector--dashed-active {
+  --uxm-lifecycle-connector-color: var(
+    --uxm-lifecycle-connector-active-color,
+    var(--uxm-lifecycle-connector-connector-active-color, var(--color-accent))
+  );
+  --uxm-lifecycle-connector-width: var(
+    --uxm-lifecycle-connector-active-stroke-width,
+    var(--uxm-lifecycle-connector-connector-active-stroke-width, 2)
+  );
+}
+.uxm-lifecycle-connector {
+  /* No legacy alias here: the dashed state never had an override var to
+     publish under the doubled name — its colour and width were hardcoded, so
+     these two are new surface rather than a rename. */
+}
+.uxm-lifecycle-connector--dashed {
+  --uxm-lifecycle-connector-color: var(--uxm-lifecycle-connector-dashed-color, var(--color-text-muted));
+  --uxm-lifecycle-connector-width: var(--uxm-lifecycle-connector-dashed-stroke-width, 1.5);
+}
+.uxm-lifecycle-connector__path {
+  stroke: var(--uxm-lifecycle-connector-color);
+  stroke-width: var(--uxm-lifecycle-connector-width);
+}
+.uxm-lifecycle-connector--dashed .uxm-lifecycle-connector__path, .uxm-lifecycle-connector--dashed-active .uxm-lifecycle-connector__path {
+  stroke-dasharray: var(--uxm-lifecycle-connector-dash-pattern, var(--uxm-lifecycle-connector-connector-dash-pattern, 6 4));
+}
+.uxm-lifecycle-connector__start {
+  fill: var(--uxm-lifecycle-connector-color);
+}
+.uxm-lifecycle-connector__arrow {
+  fill: var(--uxm-lifecycle-connector-color);
+}
+.uxm-lifecycle-connector {
+  /* Line (open-chevron) arrowhead — a stroked polyline instead of a filled
+     triangle, so it must clear the base `fill` and paint on `stroke` at the
+     connector's own width. Placed after `&__arrow` so it wins by source order
+     (equal specificity). */
+}
+.uxm-lifecycle-connector__arrow--line {
+  fill: none;
+  stroke: var(--uxm-lifecycle-connector-color);
+  stroke-width: var(--uxm-lifecycle-connector-width);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}

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

@@ -0,0 +1,107 @@
+import type { SVGAttributes } from 'react';
+export type LifecycleConnectorState = 'idle' | 'active' | 'dashed' | 'dashed-active';
+export type LifecycleConnectorRouting = 'auto' | 'straight' | 'bezier' | 'orthogonal';
+export type LifecycleConnectorArrowhead = 'triangle' | 'line';
+interface ConnectorPoint {
+    x: number;
+    y: number;
+}
+export interface LifecycleConnectorProps extends Omit<SVGAttributes<SVGGElement>, 'from' | 'to'> {
+    /** Source point (in the parent SVG's coordinate system). */
+    from: ConnectorPoint;
+    /** Destination point. The arrowhead is placed here. */
+    to: ConnectorPoint;
+    /**
+     * Visual state — this modifier drives the stroke colour + width of all three
+     * sub-elements (start dot, path, arrowhead) in lockstep; it does not add or
+     * move the start dot, which is the separate `startDot` prop. `idle` = thin
+     * grey, `active` = bolder accent + heavier stroke,
+     * `dashed` = dashed (often used for "after deploy" / future branches), and
+     * `dashed-active` = a dashed edge shown in its active/selected emphasis
+     * (accent colour + heavier stroke, still dashed) — for when a future/
+     * conditional branch is the selected or hovered one.
+     */
+    state?: LifecycleConnectorState;
+    /**
+     * Route shape.
+     *
+     * - `auto` (default) — straight when the anchors are vertically aligned,
+     *   cubic Bezier otherwise. This is the historical behaviour and stays
+     *   byte-identical, so existing lifecycle canvases are untouched.
+     * - `straight` — a single line, whatever the anchors are.
+     * - `bezier` — always the swooping cubic, even on aligned anchors.
+     * - `orthogonal` — an elbow: three axis-aligned runs (stem → cross → drop).
+     *   Lets a caller draw a bus-style tree without splitting one edge into
+     *   several connectors.
+     */
+    routing?: LifecycleConnectorRouting;
+    /**
+     * Where the elbow's cross segment sits along the vertical span, `0` (level
+     * with `from`) → `1` (level with `to`). Only read when the resolved routing
+     * is `orthogonal`.
+     *
+     * A caller placing labels or group pills on the cross bus generally has its
+     * own level in mind, so this is a knob rather than a hardcoded midpoint.
+     *
+     * Deliberately not clamped: a value outside 0–1 puts the bus beyond the
+     * anchors, which is the escape hatch for routing an edge around something
+     * rather than between the two nodes. The studio's slider stays within 0–1.
+     */
+    crossAt?: number;
+    /**
+     * Corner rounding in px for the elbow's two turns; pass `0` for square
+     * corners. Clamped per corner to half the shorter of the two runs meeting
+     * there, so a tight elbow rounds as far as it can instead of overshooting.
+     *
+     * Defaults to a slight `4` rather than `0`: a bare right angle reads as a
+     * drawing artifact next to the rounded node cards, and every elbow in a
+     * diagram wants the same treatment anyway.
+     *
+     * `stroke-linejoin` alone can't do this — it only rounds by half the stroke
+     * width, which is invisible at the 1.5px default.
+     */
+    cornerRadius?: number;
+    /** Render the dot at the source anchor. Set `false` on the non-first edge of a shared fan-out so one bus shows one dot. */
+    startDot?: boolean;
+    /**
+     * Arrowhead size in px. Defaults to the `connectorArrowSize` registry
+     * default (7) so the editor knob has the same starting point as the
+     * production component.
+     */
+    arrowSize?: number;
+    /**
+     * Arrowhead shape. `triangle` (default) = a filled triangle; `line` = an
+     * open two-stroke chevron (same span, `fill: none`, drawn at the connector's
+     * stroke width). Both point along the final run and scale with `arrowSize`.
+     */
+    arrowhead?: LifecycleConnectorArrowhead;
+    /**
+     * SVG `stroke-dasharray` pattern used when `state` is `"dashed"` or
+     * `"dashed-active"` — both dashed states read the same pattern.
+     *
+     * Applied as an inline `--uxm-lifecycle-connector-dash-pattern`, not as a
+     * `stroke-dasharray` attribute: a presentation attribute loses to any author
+     * rule, and the stylesheet's dashed rule always resolves (it carries a
+     * literal fallback), so an attribute here would never paint.
+     *
+     * Left undefined the value comes from the cascade — resolution is
+     * **prop → CSS var → `6 4`**, matching `arrowSize`. Passing it is therefore
+     * an override of a published theme, which is why there is no default: a
+     * defaulted prop would write an inline var on every connector and no theme
+     * could ever win.
+     */
+    dashPattern?: string;
+}
+/**
+ * One edge between two lifecycle nodes. Returns an SVG `<g>` fragment so
+ * callers can place many connectors inside one parent `<svg>` (typical for a
+ * full lifecycle canvas). Routing is picked by the `routing` prop — see its
+ * docs; the default `auto` keeps the original straight/Bezier split.
+ *
+ * Stroke colors / widths come from CSS custom properties on the
+ * `.uxm-lifecycle-connector` class — consumers can re-theme by setting them
+ * on a parent.
+ */
+export declare function LifecycleConnector({ from, to, state, routing, crossAt, cornerRadius, startDot, arrowSize: arrowSizeProp, arrowhead, dashPattern, className, style, ...rest }: LifecycleConnectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=lifecycle-connector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle-connector.d.ts","sourceRoot":"","sources":["../../../src/ui/lifecycle-connector/lifecycle-connector.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAA4B,aAAa,EAAE,MAAM,OAAO,CAAC;AAErE,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,eAAe,CAAC;AAErF,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEtF,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAAG,MAAM,CAAC;AAE9D,UAAU,cAAc;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAKD,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9F,4DAA4D;IAC5D,IAAI,EAAE,cAAc,CAAC;IACrB,uDAAuD;IACvD,EAAE,EAAE,cAAc,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,uBAAuB,CAAC;IAChC;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2HAA2H;IAC3H,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,2BAA2B,CAAC;IACxC;;;;;;;;;;;;;;OAcG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmKD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,EAAE,EACF,KAAc,EACd,OAAgB,EAChB,OAAa,EACb,YAAgB,EAChB,QAAe,EACf,SAAS,EAAE,aAAa,EACxB,SAAsB,EACtB,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,uBAAuB,2CAwIzB"}

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

@@ -0,0 +1,181 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "../../helpers/index.js";
+const themeChangeSubscribers = /* @__PURE__ */ new Set();
+let themeChangeObserver = null;
+function subscribeToThemeChange(onChange) {
+  themeChangeSubscribers.add(onChange);
+  themeChangeObserver ?? (themeChangeObserver = (() => {
+    const observer = new MutationObserver(() => {
+      for (const notify of themeChangeSubscribers) notify();
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"]
+    });
+    return observer;
+  })());
+  return () => {
+    themeChangeSubscribers.delete(onChange);
+    if (themeChangeSubscribers.size === 0) {
+      themeChangeObserver?.disconnect();
+      themeChangeObserver = null;
+    }
+  };
+}
+const ARROW_SIZE_PATTERN = /^(?:\d+(?:\.\d+)?|\.\d+)(?:px)?$/;
+function useThemedArrowSize(ref, enabled) {
+  const [size, setSize] = useState();
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+    const read = () => {
+      const raw = getComputedStyle(el).getPropertyValue("--uxm-lifecycle-connector-arrow-size").trim();
+      const parsed = ARROW_SIZE_PATTERN.test(raw) ? Number.parseFloat(raw) : NaN;
+      setSize(Number.isFinite(parsed) ? parsed : void 0);
+    };
+    read();
+    return subscribeToThemeChange(read);
+  }, [ref, enabled]);
+  return size;
+}
+function dedupe(points) {
+  return points.filter((p, i) => i === 0 || p.x !== points[i - 1].x || p.y !== points[i - 1].y);
+}
+function polylineD(points, radius) {
+  if (points.length < 3 || radius <= 0) {
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+  }
+  const round = (n) => Math.round(n * 100) / 100;
+  let d = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const corner = points[i];
+    const next = points[i + 1];
+    const inLen = Math.hypot(corner.x - prev.x, corner.y - prev.y) || 1;
+    const outLen = Math.hypot(next.x - corner.x, next.y - corner.y) || 1;
+    const r = Math.min(radius, inLen / 2, outLen / 2);
+    const entry = {
+      x: round(corner.x - (corner.x - prev.x) / inLen * r),
+      y: round(corner.y - (corner.y - prev.y) / inLen * r)
+    };
+    const exit = {
+      x: round(corner.x + (next.x - corner.x) / outLen * r),
+      y: round(corner.y + (next.y - corner.y) / outLen * r)
+    };
+    d += ` L ${entry.x} ${entry.y} Q ${corner.x} ${corner.y} ${exit.x} ${exit.y}`;
+  }
+  const last = points[points.length - 1];
+  return `${d} L ${last.x} ${last.y}`;
+}
+function LifecycleConnector({
+  from,
+  to,
+  state = "idle",
+  routing = "auto",
+  crossAt = 0.5,
+  cornerRadius = 4,
+  startDot = true,
+  arrowSize: arrowSizeProp,
+  arrowhead = "triangle",
+  dashPattern,
+  className,
+  style,
+  ...rest
+}) {
+  const rootRef = useRef(null);
+  const themedArrowSize = useThemedArrowSize(rootRef, arrowSizeProp === void 0);
+  const arrowSize = arrowSizeProp ?? themedArrowSize ?? 7;
+  const isStraight = from.x === to.x;
+  const mode = routing === "auto" ? isStraight ? "straight" : "bezier" : routing;
+  const pullback = arrowhead === "line" ? 0 : arrowSize;
+  const dx = to.x - from.x;
+  const dy = to.y - from.y;
+  const len = Math.hypot(dx, dy) || 1;
+  const tipX = to.x;
+  const tipY = to.y;
+  const lineEndX = to.x - dx / len * pullback;
+  const lineEndY = to.y - dy / len * pullback;
+  let pathD;
+  let ux;
+  let uy;
+  if (mode === "orthogonal") {
+    const crossY = from.y + (to.y - from.y) * crossAt;
+    const corners = dedupe([
+      { x: from.x, y: from.y },
+      { x: from.x, y: crossY },
+      { x: to.x, y: crossY },
+      { x: to.x, y: to.y }
+    ]);
+    const last = corners[corners.length - 1];
+    const prev = corners[corners.length - 2] ?? { x: from.x - dx, y: from.y - dy };
+    const segDx = last.x - prev.x;
+    const segDy = last.y - prev.y;
+    const segLen = Math.hypot(segDx, segDy) || 1;
+    ux = segDx / segLen;
+    uy = segDy / segLen;
+    const segPullback = Math.min(pullback, segLen);
+    const end = { x: last.x - ux * segPullback, y: last.y - uy * segPullback };
+    const routed = dedupe([...corners.slice(0, -1), end]);
+    pathD = polylineD(routed, cornerRadius);
+  } else {
+    ux = dx / len;
+    uy = dy / len;
+    if (mode === "straight") {
+      pathD = `M ${from.x} ${from.y} L ${lineEndX} ${lineEndY}`;
+    } else {
+      const midY = (from.y + to.y) / 2;
+      pathD = `M ${from.x} ${from.y} C ${from.x} ${midY}, ${to.x} ${midY}, ${lineEndX} ${lineEndY}`;
+    }
+  }
+  const ax = tipX;
+  const ay = tipY;
+  const px = -uy;
+  const py = ux;
+  const tip = `${ax},${ay}`;
+  const baseL = `${ax - ux * arrowSize + px * arrowSize * 0.55},${ay - uy * arrowSize + py * arrowSize * 0.55}`;
+  const baseR = `${ax - ux * arrowSize - px * arrowSize * 0.55},${ay - uy * arrowSize - py * arrowSize * 0.55}`;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      ...rest,
+      ref: rootRef,
+      className: cn(
+        "uxm-lifecycle-connector",
+        `uxm-lifecycle-connector--${state}`,
+        className
+      ),
+      style: dashPattern === void 0 ? style : { ...style, "--uxm-lifecycle-connector-dash-pattern": dashPattern },
+      children: [
+        startDot && /* @__PURE__ */ jsx("circle", { className: "uxm-lifecycle-connector__start", cx: from.x, cy: from.y, r: 3 }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            className: "uxm-lifecycle-connector__path",
+            d: pathD,
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: mode === "orthogonal" ? "round" : void 0
+          }
+        ),
+        arrowhead === "line" ? (
+          // Open chevron: base → tip → base, stroked (not filled) at the
+          // connector's own width. Points along the final run, same span as the
+          // triangle.
+          /* @__PURE__ */ jsx(
+            "polyline",
+            {
+              className: "uxm-lifecycle-connector__arrow uxm-lifecycle-connector__arrow--line",
+              points: `${baseL} ${tip} ${baseR}`
+            }
+          )
+        ) : /* @__PURE__ */ jsx("polygon", { className: "uxm-lifecycle-connector__arrow", points: `${tip} ${baseL} ${baseR}` })
+      ]
+    }
+  );
+}
+export {
+  LifecycleConnector
+};
+//# sourceMappingURL=lifecycle-connector.js.map