@viax.io/uxm 4.36.0

package/dist/ui/lifecycle-connector/lifecycle-connector.js.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-drop-slot/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_drop_slot_exports = {};
+module.exports = __toCommonJS(lifecycle_drop_slot_exports);
+__reExport(lifecycle_drop_slot_exports, require("./lifecycle-drop-slot.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./lifecycle-drop-slot.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/lifecycle-drop-slot/index.cjs.map

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

package/dist/ui/lifecycle-drop-slot/index.d.ts

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

package/dist/ui/lifecycle-drop-slot/index.d.ts.map

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

package/dist/ui/lifecycle-drop-slot/index.js

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

package/dist/ui/lifecycle-drop-slot/index.js.map

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

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.cjs

@@ -0,0 +1,51 @@
+"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_drop_slot_preview_exports = {};
+__export(lifecycle_drop_slot_preview_exports, {
+  LifecycleDropSlotPreview: () => LifecycleDropSlotPreview
+});
+module.exports = __toCommonJS(lifecycle_drop_slot_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+const CARD_WIDTH = 200;
+function LifecycleDropSlotPreview({ styles, variants }) {
+  const shape = variants.shape ?? "card";
+  const cssVars = {
+    "--uxm-lifecycle-drop-slot-border-color": styles.borderColor,
+    "--uxm-lifecycle-drop-slot-color": styles.color,
+    "--uxm-lifecycle-drop-slot-bg": styles.bg,
+    // Keyword, not a length — no `px` suffix.
+    "--uxm-lifecycle-drop-slot-border-style": styles.borderStyle,
+    "--uxm-lifecycle-drop-slot-border-width": `${styles.borderWidth}px`,
+    "--uxm-lifecycle-drop-slot-card-radius": `${styles.cardRadius}px`,
+    "--uxm-lifecycle-drop-slot-card-padding-x": `${styles.cardPaddingX}px`,
+    "--uxm-lifecycle-drop-slot-card-font-size": `${styles.cardFontSize}px`,
+    "--uxm-lifecycle-drop-slot-card-min-width": `${styles.cardMinWidth}px`,
+    "--uxm-lifecycle-drop-slot-pill-radius": `${styles.pillRadius}px`,
+    "--uxm-lifecycle-drop-slot-pill-padding-y": `${styles.pillPaddingY}px`,
+    "--uxm-lifecycle-drop-slot-pill-padding-x": `${styles.pillPaddingX}px`,
+    "--uxm-lifecycle-drop-slot-pill-font-size": `${styles.pillFontSize}px`
+  };
+  return shape === "pill" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.LifecycleDropSlot, { style: cssVars, shape: "pill", label: "New group" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.LifecycleDropSlot, { style: { ...cssVars, width: `${CARD_WIDTH}px` } });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleDropSlotPreview
+});
+//# sourceMappingURL=lifecycle-drop-slot-preview.cjs.map

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { LifecycleDropSlot, type LifecycleDropSlotShape } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n// A card slot takes its width from the canvas, like every other lifecycle atom;\n// the preview stands in for that canvas at the width a real member would have.\n// A pill sizes itself from its label, so only the card needs this.\nconst CARD_WIDTH = 200;\n\nexport function LifecycleDropSlotPreview({ styles, variants }: PreviewProps) {\n  const shape = (variants.shape as LifecycleDropSlotShape) ?? 'card';\n\n  // `interactive` is deliberately NOT projected and has no knob: it changes\n  // hit-testing only, never paint, and the canvas has no drag to demonstrate it\n  // with. The slot keeps the atom's inert default, which also stops it from\n  // intercepting the canvas's own event capture.\n  // Every registry knob maps to a CSS custom property — the same surface a\n  // production consumer re-themes through, so what the editor saves is what\n  // ships.\n  const cssVars = {\n    '--uxm-lifecycle-drop-slot-border-color': styles.borderColor as string,\n    '--uxm-lifecycle-drop-slot-color': styles.color as string,\n    '--uxm-lifecycle-drop-slot-bg': styles.bg as string,\n    // Keyword, not a length — no `px` suffix.\n    '--uxm-lifecycle-drop-slot-border-style': styles.borderStyle as string,\n    '--uxm-lifecycle-drop-slot-border-width': `${styles.borderWidth}px`,\n    '--uxm-lifecycle-drop-slot-card-radius': `${styles.cardRadius}px`,\n    '--uxm-lifecycle-drop-slot-card-padding-x': `${styles.cardPaddingX}px`,\n    '--uxm-lifecycle-drop-slot-card-font-size': `${styles.cardFontSize}px`,\n    '--uxm-lifecycle-drop-slot-card-min-width': `${styles.cardMinWidth}px`,\n    '--uxm-lifecycle-drop-slot-pill-radius': `${styles.pillRadius}px`,\n    '--uxm-lifecycle-drop-slot-pill-padding-y': `${styles.pillPaddingY}px`,\n    '--uxm-lifecycle-drop-slot-pill-padding-x': `${styles.pillPaddingX}px`,\n    '--uxm-lifecycle-drop-slot-pill-font-size': `${styles.pillFontSize}px`,\n  } as CSSProperties;\n\n  // The selected shape, on the dot grid the studio canvas paints behind every\n  // preview (`canvasBackground` defaults to on) — the fill is flat, so what the\n  // grid shows is how much of the canvas a slot covers rather than tints. A card\n  // carries the plus glyph (its empty state), a pill the label it always has in\n  // production.\n  return shape === 'pill' ? (\n    <LifecycleDropSlot style={cssVars} shape=\"pill\" label=\"New group\" />\n  ) : (\n    <LifecycleDropSlot style={{ ...cssVars, width: `${CARD_WIDTH}px` }} />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CI;AA1CJ,gBAA+D;AAO/D,MAAM,aAAa;AAEZ,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAAiB;AAC3E,QAAM,QAAS,SAAS,SAAoC;AAS5D,QAAM,UAAU;AAAA,IACd,0CAA0C,OAAO;AAAA,IACjD,mCAAmC,OAAO;AAAA,IAC1C,gCAAgC,OAAO;AAAA;AAAA,IAEvC,0CAA0C,OAAO;AAAA,IACjD,0CAA0C,GAAG,OAAO,WAAW;AAAA,IAC/D,yCAAyC,GAAG,OAAO,UAAU;AAAA,IAC7D,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,yCAAyC,GAAG,OAAO,UAAU;AAAA,IAC7D,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,EACpE;AAOA,SAAO,UAAU,SACf,4CAAC,+BAAkB,OAAO,SAAS,OAAM,QAAO,OAAM,aAAY,IAElE,4CAAC,+BAAkB,OAAO,EAAE,GAAG,SAAS,OAAO,GAAG,UAAU,KAAK,GAAG;AAExE;","names":[]}

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.d.ts

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

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.d.ts.map

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

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { LifecycleDropSlot } from "../../ui/index.js";
+const CARD_WIDTH = 200;
+function LifecycleDropSlotPreview({ styles, variants }) {
+  const shape = variants.shape ?? "card";
+  const cssVars = {
+    "--uxm-lifecycle-drop-slot-border-color": styles.borderColor,
+    "--uxm-lifecycle-drop-slot-color": styles.color,
+    "--uxm-lifecycle-drop-slot-bg": styles.bg,
+    // Keyword, not a length — no `px` suffix.
+    "--uxm-lifecycle-drop-slot-border-style": styles.borderStyle,
+    "--uxm-lifecycle-drop-slot-border-width": `${styles.borderWidth}px`,
+    "--uxm-lifecycle-drop-slot-card-radius": `${styles.cardRadius}px`,
+    "--uxm-lifecycle-drop-slot-card-padding-x": `${styles.cardPaddingX}px`,
+    "--uxm-lifecycle-drop-slot-card-font-size": `${styles.cardFontSize}px`,
+    "--uxm-lifecycle-drop-slot-card-min-width": `${styles.cardMinWidth}px`,
+    "--uxm-lifecycle-drop-slot-pill-radius": `${styles.pillRadius}px`,
+    "--uxm-lifecycle-drop-slot-pill-padding-y": `${styles.pillPaddingY}px`,
+    "--uxm-lifecycle-drop-slot-pill-padding-x": `${styles.pillPaddingX}px`,
+    "--uxm-lifecycle-drop-slot-pill-font-size": `${styles.pillFontSize}px`
+  };
+  return shape === "pill" ? /* @__PURE__ */ jsx(LifecycleDropSlot, { style: cssVars, shape: "pill", label: "New group" }) : /* @__PURE__ */ jsx(LifecycleDropSlot, { style: { ...cssVars, width: `${CARD_WIDTH}px` } });
+}
+export {
+  LifecycleDropSlotPreview
+};
+//# sourceMappingURL=lifecycle-drop-slot-preview.js.map

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-drop-slot/lifecycle-drop-slot-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { LifecycleDropSlot, type LifecycleDropSlotShape } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n// A card slot takes its width from the canvas, like every other lifecycle atom;\n// the preview stands in for that canvas at the width a real member would have.\n// A pill sizes itself from its label, so only the card needs this.\nconst CARD_WIDTH = 200;\n\nexport function LifecycleDropSlotPreview({ styles, variants }: PreviewProps) {\n  const shape = (variants.shape as LifecycleDropSlotShape) ?? 'card';\n\n  // `interactive` is deliberately NOT projected and has no knob: it changes\n  // hit-testing only, never paint, and the canvas has no drag to demonstrate it\n  // with. The slot keeps the atom's inert default, which also stops it from\n  // intercepting the canvas's own event capture.\n  // Every registry knob maps to a CSS custom property — the same surface a\n  // production consumer re-themes through, so what the editor saves is what\n  // ships.\n  const cssVars = {\n    '--uxm-lifecycle-drop-slot-border-color': styles.borderColor as string,\n    '--uxm-lifecycle-drop-slot-color': styles.color as string,\n    '--uxm-lifecycle-drop-slot-bg': styles.bg as string,\n    // Keyword, not a length — no `px` suffix.\n    '--uxm-lifecycle-drop-slot-border-style': styles.borderStyle as string,\n    '--uxm-lifecycle-drop-slot-border-width': `${styles.borderWidth}px`,\n    '--uxm-lifecycle-drop-slot-card-radius': `${styles.cardRadius}px`,\n    '--uxm-lifecycle-drop-slot-card-padding-x': `${styles.cardPaddingX}px`,\n    '--uxm-lifecycle-drop-slot-card-font-size': `${styles.cardFontSize}px`,\n    '--uxm-lifecycle-drop-slot-card-min-width': `${styles.cardMinWidth}px`,\n    '--uxm-lifecycle-drop-slot-pill-radius': `${styles.pillRadius}px`,\n    '--uxm-lifecycle-drop-slot-pill-padding-y': `${styles.pillPaddingY}px`,\n    '--uxm-lifecycle-drop-slot-pill-padding-x': `${styles.pillPaddingX}px`,\n    '--uxm-lifecycle-drop-slot-pill-font-size': `${styles.pillFontSize}px`,\n  } as CSSProperties;\n\n  // The selected shape, on the dot grid the studio canvas paints behind every\n  // preview (`canvasBackground` defaults to on) — the fill is flat, so what the\n  // grid shows is how much of the canvas a slot covers rather than tints. A card\n  // carries the plus glyph (its empty state), a pill the label it always has in\n  // production.\n  return shape === 'pill' ? (\n    <LifecycleDropSlot style={cssVars} shape=\"pill\" label=\"New group\" />\n  ) : (\n    <LifecycleDropSlot style={{ ...cssVars, width: `${CARD_WIDTH}px` }} />\n  );\n}\n"],"mappings":"AA2CI;AA1CJ,SAAS,yBAAsD;AAO/D,MAAM,aAAa;AAEZ,SAAS,yBAAyB,EAAE,QAAQ,SAAS,GAAiB;AAC3E,QAAM,QAAS,SAAS,SAAoC;AAS5D,QAAM,UAAU;AAAA,IACd,0CAA0C,OAAO;AAAA,IACjD,mCAAmC,OAAO;AAAA,IAC1C,gCAAgC,OAAO;AAAA;AAAA,IAEvC,0CAA0C,OAAO;AAAA,IACjD,0CAA0C,GAAG,OAAO,WAAW;AAAA,IAC/D,yCAAyC,GAAG,OAAO,UAAU;AAAA,IAC7D,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,yCAAyC,GAAG,OAAO,UAAU;AAAA,IAC7D,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,IAClE,4CAA4C,GAAG,OAAO,YAAY;AAAA,EACpE;AAOA,SAAO,UAAU,SACf,oBAAC,qBAAkB,OAAO,SAAS,OAAM,QAAO,OAAM,aAAY,IAElE,oBAAC,qBAAkB,OAAO,EAAE,GAAG,SAAS,OAAO,GAAG,UAAU,KAAK,GAAG;AAExE;","names":[]}

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot.cjs

@@ -0,0 +1,52 @@
+"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_drop_slot_exports = {};
+__export(lifecycle_drop_slot_exports, {
+  LifecycleDropSlot: () => LifecycleDropSlot
+});
+module.exports = __toCommonJS(lifecycle_drop_slot_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../../ui/icon/index.cjs");
+function LifecycleDropSlot({
+  shape = "card",
+  label,
+  interactive = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...rest,
+      className: (0, import_helpers.cn)(
+        "uxm-lifecycle-drop-slot",
+        `uxm-lifecycle-drop-slot--${shape}`,
+        interactive && "uxm-lifecycle-drop-slot--interactive",
+        className
+      ),
+      children: label ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "plus", size: 16, "aria-hidden": "true" })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleDropSlot
+});
+//# sourceMappingURL=lifecycle-drop-slot.cjs.map

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-drop-slot/lifecycle-drop-slot.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type LifecycleDropSlotShape = 'card' | 'pill';\n\nexport interface LifecycleDropSlotProps extends HTMLAttributes<HTMLDivElement> {\n  /** `card` = node-sized rectangle, `pill` = group-pill sized. */\n  shape?: LifecycleDropSlotShape;\n  /** Text; without it a card shows the plus glyph alone. */\n  label?: ReactNode;\n  /** Accepts drops. The card slot passes true; a preview placeholder stays false. */\n  interactive?: boolean;\n}\n\n/**\n * The dashed slot that shows where a dragged node can land. Two shapes:\n * card-sized, standing in for the node a drop would create, and pill-sized,\n * standing in for the group.\n *\n * **One appearance, no states.** The slot exists only while it *is* the target:\n * it is created for the hovered zone and removed when the cursor leaves. Its\n * appearance is the signal, so there is no quiet variant to fall back to — and\n * nothing on the canvas has to stay legible at a contrast a placeholder can't\n * carry.\n *\n * `interactive` is off by default: a card slot standing in a real drop zone\n * passes `true`, while a preview placeholder — the pill showing the group a drop\n * would mint, sitting under the cursor — stays `false` so the drag can't flicker\n * between it and the real slot.\n *\n * Position, size and the drag handlers are the consumer's, the same contract\n * `LifecycleEdgeLabel` documents: `HTMLAttributes<HTMLDivElement>` is extended\n * so `onDragOver` / `onDrop` and `data-*` go straight on the slot.\n */\nexport function LifecycleDropSlot({\n  shape = 'card',\n  label,\n  interactive = false,\n  className,\n  ...rest\n}: LifecycleDropSlotProps) {\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'uxm-lifecycle-drop-slot',\n        `uxm-lifecycle-drop-slot--${shape}`,\n        interactive && 'uxm-lifecycle-drop-slot--interactive',\n        className,\n      )}\n    >\n      {/* Nullish, not falsy: `label={0}` is a legitimate label, and an empty\n          string is a caller mistake worth seeing rather than papering over. */}\n      {label ?? <Icon glyph=\"plus\" size={16} aria-hidden=\"true\" />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuDgB;AAvDhB,qBAAmB;AACnB,kBAAqB;AAmCd,SAAS,kBAAkB;AAAA,EAChC,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,QACA,4BAA4B,KAAK;AAAA,QACjC,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MAIC,mBAAS,4CAAC,oBAAK,OAAM,QAAO,MAAM,IAAI,eAAY,QAAO;AAAA;AAAA,EAC5D;AAEJ;","names":[]}

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot.css

@@ -0,0 +1,63 @@
+@charset "UTF-8";
+/* ── lifecycle-drop-slot ── */
+.uxm-lifecycle-drop-slot {
+  align-items: center;
+  /* A flat fill, not a translucent one: the slot is short-lived and reads as its
+     own surface rather than a tint of the canvas, so the colour a theme picks is
+     the colour that paints. */
+  background: var(--uxm-lifecycle-drop-slot-bg, var(--color-accent-subtle));
+  /* Dashes and label take separate colours, defaulting to the same
+     `--color-accent-bold` so they read as one signal until a theme moves them
+     apart. `border-style` and `border-width` are the two levers on how the edge
+     reads — the same split `FileUpload`'s drop area uses. Neither is a dash
+     PATTERN: CSS derives a dashed border's dash length from its width and
+     exposes no property for the pattern itself.
+
+     Both anchored to `--color-accent-bold`, deliberately NOT routed through
+     `--color-drop-target` like LifecycleGroupBox's ring. The alias resolves to
+     `--color-accent`, which measures 1.92:1 as ink on this fill and 1.93:1 as a
+     line against the canvas — the slot carries TEXT on a filled surface, so it
+     needs the dark end of the accent ramp (5.54:1 / 5.56:1), whereas the group
+     box draws a bare ring where a vivid hue reads. Routing this through the
+     alias would also make the studio and production disagree: the alias is
+     declared, so its own accent-bold fallback can never paint, while the
+     editor's knob default writes accent-bold inline. */
+  border: var(--uxm-lifecycle-drop-slot-border-width, 1px) var(--uxm-lifecycle-drop-slot-border-style, dashed) var(--uxm-lifecycle-drop-slot-border-color, var(--color-accent-bold));
+  color: var(--uxm-lifecycle-drop-slot-color, var(--color-accent-bold));
+  display: inline-flex;
+  justify-content: center;
+  /* Off by default: a preview placeholder sits under the cursor and must not
+     compete with the real slot for the drag. */
+  pointer-events: none;
+  white-space: nowrap;
+}
+.uxm-lifecycle-drop-slot--interactive {
+  pointer-events: auto;
+}
+.uxm-lifecycle-drop-slot--card {
+  border-radius: var(--uxm-lifecycle-drop-slot-card-radius, 10px);
+  font-size: calc(var(--uxm-lifecycle-drop-slot-card-font-size, 12px) * var(--type-scale, 1));
+  /* The shared node height — see tokens/index.css. A slot standing among real
+     members has to agree with them, and custom properties inherit DOWNWARD,
+     so two siblings can only share this through a common ancestor.
+     `min-height` is a FLOOR, and a floor outranks a smaller `height` from the
+     consumer — so a canvas that owns node geometry (the reliable way to keep a
+     diagram from going crooked: it already computes node rects to route
+     connectors) zeroes the floor per instance through the first var and its own
+     `height` then applies in both directions. */
+  min-height: var(--uxm-lifecycle-drop-slot-card-min-height, var(--uxm-lifecycle-node-card-min-height, 64px));
+  /* Without a floor a labelless card slot collapses to its glyph plus padding
+     (50px), narrower than any real node. Width itself stays the consumer's. */
+  min-width: var(--uxm-lifecycle-drop-slot-card-min-width, 72px);
+  padding: 0 var(--uxm-lifecycle-drop-slot-card-padding-x, 16px);
+}
+.uxm-lifecycle-drop-slot--pill {
+  /* `999px` is the default rather than a fixed shape, matching
+     LifecycleEdgeLabel's own pill radius knob — anything at or above half the
+     height reads as a full pill, lower values square it off. */
+  border-radius: var(--uxm-lifecycle-drop-slot-pill-radius, 999px);
+  /* 13px matches `Chip` assist, which is what the real group is drawn with,
+     so the pill doesn't jump size on drop. */
+  font-size: calc(var(--uxm-lifecycle-drop-slot-pill-font-size, 13px) * var(--type-scale, 1));
+  padding: var(--uxm-lifecycle-drop-slot-pill-padding-y, 4px) var(--uxm-lifecycle-drop-slot-pill-padding-x, 12px);
+}

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type LifecycleDropSlotShape = 'card' | 'pill';
+export interface LifecycleDropSlotProps extends HTMLAttributes<HTMLDivElement> {
+    /** `card` = node-sized rectangle, `pill` = group-pill sized. */
+    shape?: LifecycleDropSlotShape;
+    /** Text; without it a card shows the plus glyph alone. */
+    label?: ReactNode;
+    /** Accepts drops. The card slot passes true; a preview placeholder stays false. */
+    interactive?: boolean;
+}
+/**
+ * The dashed slot that shows where a dragged node can land. Two shapes:
+ * card-sized, standing in for the node a drop would create, and pill-sized,
+ * standing in for the group.
+ *
+ * **One appearance, no states.** The slot exists only while it *is* the target:
+ * it is created for the hovered zone and removed when the cursor leaves. Its
+ * appearance is the signal, so there is no quiet variant to fall back to — and
+ * nothing on the canvas has to stay legible at a contrast a placeholder can't
+ * carry.
+ *
+ * `interactive` is off by default: a card slot standing in a real drop zone
+ * passes `true`, while a preview placeholder — the pill showing the group a drop
+ * would mint, sitting under the cursor — stays `false` so the drag can't flicker
+ * between it and the real slot.
+ *
+ * Position, size and the drag handlers are the consumer's, the same contract
+ * `LifecycleEdgeLabel` documents: `HTMLAttributes<HTMLDivElement>` is extended
+ * so `onDragOver` / `onDrop` and `data-*` go straight on the slot.
+ */
+export declare function LifecycleDropSlot({ shape, label, interactive, className, ...rest }: LifecycleDropSlotProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=lifecycle-drop-slot.d.ts.map

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecycle-drop-slot.d.ts","sourceRoot":"","sources":["../../../src/ui/lifecycle-drop-slot/lifecycle-drop-slot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC5E,gEAAgE;IAChE,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAC/B,0DAA0D;IAC1D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAc,EACd,KAAK,EACL,WAAmB,EACnB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,sBAAsB,2CAgBxB"}

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../../ui/icon/index.js";
+function LifecycleDropSlot({
+  shape = "card",
+  label,
+  interactive = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "uxm-lifecycle-drop-slot",
+        `uxm-lifecycle-drop-slot--${shape}`,
+        interactive && "uxm-lifecycle-drop-slot--interactive",
+        className
+      ),
+      children: label ?? /* @__PURE__ */ jsx(Icon, { glyph: "plus", size: 16, "aria-hidden": "true" })
+    }
+  );
+}
+export {
+  LifecycleDropSlot
+};
+//# sourceMappingURL=lifecycle-drop-slot.js.map

package/dist/ui/lifecycle-drop-slot/lifecycle-drop-slot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-drop-slot/lifecycle-drop-slot.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport { Icon } from '@/ui/icon';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type LifecycleDropSlotShape = 'card' | 'pill';\n\nexport interface LifecycleDropSlotProps extends HTMLAttributes<HTMLDivElement> {\n  /** `card` = node-sized rectangle, `pill` = group-pill sized. */\n  shape?: LifecycleDropSlotShape;\n  /** Text; without it a card shows the plus glyph alone. */\n  label?: ReactNode;\n  /** Accepts drops. The card slot passes true; a preview placeholder stays false. */\n  interactive?: boolean;\n}\n\n/**\n * The dashed slot that shows where a dragged node can land. Two shapes:\n * card-sized, standing in for the node a drop would create, and pill-sized,\n * standing in for the group.\n *\n * **One appearance, no states.** The slot exists only while it *is* the target:\n * it is created for the hovered zone and removed when the cursor leaves. Its\n * appearance is the signal, so there is no quiet variant to fall back to — and\n * nothing on the canvas has to stay legible at a contrast a placeholder can't\n * carry.\n *\n * `interactive` is off by default: a card slot standing in a real drop zone\n * passes `true`, while a preview placeholder — the pill showing the group a drop\n * would mint, sitting under the cursor — stays `false` so the drag can't flicker\n * between it and the real slot.\n *\n * Position, size and the drag handlers are the consumer's, the same contract\n * `LifecycleEdgeLabel` documents: `HTMLAttributes<HTMLDivElement>` is extended\n * so `onDragOver` / `onDrop` and `data-*` go straight on the slot.\n */\nexport function LifecycleDropSlot({\n  shape = 'card',\n  label,\n  interactive = false,\n  className,\n  ...rest\n}: LifecycleDropSlotProps) {\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'uxm-lifecycle-drop-slot',\n        `uxm-lifecycle-drop-slot--${shape}`,\n        interactive && 'uxm-lifecycle-drop-slot--interactive',\n        className,\n      )}\n    >\n      {/* Nullish, not falsy: `label={0}` is a legitimate label, and an empty\n          string is a caller mistake worth seeing rather than papering over. */}\n      {label ?? <Icon glyph=\"plus\" size={16} aria-hidden=\"true\" />}\n    </div>\n  );\n}\n"],"mappings":"AAuDgB;AAvDhB,SAAS,UAAU;AACnB,SAAS,YAAY;AAmCd,SAAS,kBAAkB;AAAA,EAChC,QAAQ;AAAA,EACR;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,4BAA4B,KAAK;AAAA,QACjC,eAAe;AAAA,QACf;AAAA,MACF;AAAA,MAIC,mBAAS,oBAAC,QAAK,OAAM,QAAO,MAAM,IAAI,eAAY,QAAO;AAAA;AAAA,EAC5D;AAEJ;","names":[]}

package/dist/ui/lifecycle-edge-label/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_edge_label_exports = {};
+module.exports = __toCommonJS(lifecycle_edge_label_exports);
+__reExport(lifecycle_edge_label_exports, require("./lifecycle-edge-label.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./lifecycle-edge-label.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/lifecycle-edge-label/index.cjs.map

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

package/dist/ui/lifecycle-edge-label/index.d.ts

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

package/dist/ui/lifecycle-edge-label/index.d.ts.map

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

package/dist/ui/lifecycle-edge-label/index.js

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

package/dist/ui/lifecycle-edge-label/index.js.map

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

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label-preview.cjs

@@ -0,0 +1,47 @@
+"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_edge_label_preview_exports = {};
+__export(lifecycle_edge_label_preview_exports, {
+  LifecycleEdgeLabelPreview: () => LifecycleEdgeLabelPreview
+});
+module.exports = __toCommonJS(lifecycle_edge_label_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+const VARIANT_LABEL = {
+  true: "true",
+  false: "false",
+  neutral: "on approve"
+};
+function LifecycleEdgeLabelPreview({ styles, variants }) {
+  const variant = variants.variant ?? "true";
+  const cssVars = {
+    "--uxm-lifecycle-edge-label-padding-x": `${styles.paddingX}px`,
+    "--uxm-lifecycle-edge-label-padding-y": `${styles.paddingY}px`,
+    "--uxm-lifecycle-edge-label-radius": `${styles.borderRadius}px`,
+    "--uxm-lifecycle-edge-label-font-size": `${styles.fontSize}px`,
+    "--uxm-lifecycle-edge-label-border-width": `${styles.borderWidth}px`,
+    "--uxm-lifecycle-edge-label-font-weight": styles.fontWeight
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.LifecycleEdgeLabel, { variant, style: cssVars, children: VARIANT_LABEL[variant] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleEdgeLabelPreview
+});
+//# sourceMappingURL=lifecycle-edge-label-preview.cjs.map

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-edge-label/lifecycle-edge-label-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport {\n  LifecycleEdgeLabel,\n  type LifecycleEdgeLabelVariant,\n} from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst VARIANT_LABEL: Record<LifecycleEdgeLabelVariant, string> = {\n  true: 'true',\n  false: 'false',\n  neutral: 'on approve',\n};\n\nexport function LifecycleEdgeLabelPreview({ styles, variants }: PreviewProps) {\n  const variant = (variants.variant as LifecycleEdgeLabelVariant) ?? 'true';\n\n  const cssVars = {\n    '--uxm-lifecycle-edge-label-padding-x': `${styles.paddingX}px`,\n    '--uxm-lifecycle-edge-label-padding-y': `${styles.paddingY}px`,\n    '--uxm-lifecycle-edge-label-radius': `${styles.borderRadius}px`,\n    '--uxm-lifecycle-edge-label-font-size': `${styles.fontSize}px`,\n    '--uxm-lifecycle-edge-label-border-width': `${styles.borderWidth}px`,\n    '--uxm-lifecycle-edge-label-font-weight': styles.fontWeight as string,\n  } as CSSProperties;\n\n  return (\n    <LifecycleEdgeLabel variant={variant} style={cssVars}>\n      {VARIANT_LABEL[variant]}\n    </LifecycleEdgeLabel>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BI;AA1BJ,gBAGO;AAIP,MAAM,gBAA2D;AAAA,EAC/D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AACX;AAEO,SAAS,0BAA0B,EAAE,QAAQ,SAAS,GAAiB;AAC5E,QAAM,UAAW,SAAS,WAAyC;AAEnE,QAAM,UAAU;AAAA,IACd,wCAAwC,GAAG,OAAO,QAAQ;AAAA,IAC1D,wCAAwC,GAAG,OAAO,QAAQ;AAAA,IAC1D,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,wCAAwC,GAAG,OAAO,QAAQ;AAAA,IAC1D,2CAA2C,GAAG,OAAO,WAAW;AAAA,IAChE,0CAA0C,OAAO;AAAA,EACnD;AAEA,SACE,4CAAC,gCAAmB,SAAkB,OAAO,SAC1C,wBAAc,OAAO,GACxB;AAEJ;","names":[]}

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label-preview.d.ts

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

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label-preview.d.ts.map

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

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label-preview.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  LifecycleEdgeLabel
+} from "../../ui/index.js";
+const VARIANT_LABEL = {
+  true: "true",
+  false: "false",
+  neutral: "on approve"
+};
+function LifecycleEdgeLabelPreview({ styles, variants }) {
+  const variant = variants.variant ?? "true";
+  const cssVars = {
+    "--uxm-lifecycle-edge-label-padding-x": `${styles.paddingX}px`,
+    "--uxm-lifecycle-edge-label-padding-y": `${styles.paddingY}px`,
+    "--uxm-lifecycle-edge-label-radius": `${styles.borderRadius}px`,
+    "--uxm-lifecycle-edge-label-font-size": `${styles.fontSize}px`,
+    "--uxm-lifecycle-edge-label-border-width": `${styles.borderWidth}px`,
+    "--uxm-lifecycle-edge-label-font-weight": styles.fontWeight
+  };
+  return /* @__PURE__ */ jsx(LifecycleEdgeLabel, { variant, style: cssVars, children: VARIANT_LABEL[variant] });
+}
+export {
+  LifecycleEdgeLabelPreview
+};
+//# sourceMappingURL=lifecycle-edge-label-preview.js.map

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-edge-label/lifecycle-edge-label-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport {\n  LifecycleEdgeLabel,\n  type LifecycleEdgeLabelVariant,\n} from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nconst VARIANT_LABEL: Record<LifecycleEdgeLabelVariant, string> = {\n  true: 'true',\n  false: 'false',\n  neutral: 'on approve',\n};\n\nexport function LifecycleEdgeLabelPreview({ styles, variants }: PreviewProps) {\n  const variant = (variants.variant as LifecycleEdgeLabelVariant) ?? 'true';\n\n  const cssVars = {\n    '--uxm-lifecycle-edge-label-padding-x': `${styles.paddingX}px`,\n    '--uxm-lifecycle-edge-label-padding-y': `${styles.paddingY}px`,\n    '--uxm-lifecycle-edge-label-radius': `${styles.borderRadius}px`,\n    '--uxm-lifecycle-edge-label-font-size': `${styles.fontSize}px`,\n    '--uxm-lifecycle-edge-label-border-width': `${styles.borderWidth}px`,\n    '--uxm-lifecycle-edge-label-font-weight': styles.fontWeight as string,\n  } as CSSProperties;\n\n  return (\n    <LifecycleEdgeLabel variant={variant} style={cssVars}>\n      {VARIANT_LABEL[variant]}\n    </LifecycleEdgeLabel>\n  );\n}\n"],"mappings":"AA2BI;AA1BJ;AAAA,EACE;AAAA,OAEK;AAIP,MAAM,gBAA2D;AAAA,EAC/D,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AACX;AAEO,SAAS,0BAA0B,EAAE,QAAQ,SAAS,GAAiB;AAC5E,QAAM,UAAW,SAAS,WAAyC;AAEnE,QAAM,UAAU;AAAA,IACd,wCAAwC,GAAG,OAAO,QAAQ;AAAA,IAC1D,wCAAwC,GAAG,OAAO,QAAQ;AAAA,IAC1D,qCAAqC,GAAG,OAAO,YAAY;AAAA,IAC3D,wCAAwC,GAAG,OAAO,QAAQ;AAAA,IAC1D,2CAA2C,GAAG,OAAO,WAAW;AAAA,IAChE,0CAA0C,OAAO;AAAA,EACnD;AAEA,SACE,oBAAC,sBAAmB,SAAkB,OAAO,SAC1C,wBAAc,OAAO,GACxB;AAEJ;","names":[]}

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label.cjs

@@ -0,0 +1,49 @@
+"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_edge_label_exports = {};
+__export(lifecycle_edge_label_exports, {
+  LifecycleEdgeLabel: () => LifecycleEdgeLabel
+});
+module.exports = __toCommonJS(lifecycle_edge_label_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+function LifecycleEdgeLabel({
+  variant = "neutral",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      ...rest,
+      className: (0, import_helpers.cn)(
+        "uxm-lifecycle-edge-label",
+        `uxm-lifecycle-edge-label--${variant}`,
+        className
+      ),
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LifecycleEdgeLabel
+});
+//# sourceMappingURL=lifecycle-edge-label.cjs.map

package/dist/ui/lifecycle-edge-label/lifecycle-edge-label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/lifecycle-edge-label/lifecycle-edge-label.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nexport type LifecycleEdgeLabelVariant = 'true' | 'false' | 'neutral';\n\nexport interface LifecycleEdgeLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Color variant — `true` (green) / `false` (warm) / `neutral` (border-only). */\n  variant?: LifecycleEdgeLabelVariant;\n  /** Label content. */\n  children: ReactNode;\n}\n\n/**\n * Floating pill rendered on the midpoint of a lifecycle connector. Color\n * variant communicates the semantic, not the literal text — a connector\n * labelled \"approved\" can still be `variant=\"true\"` to render in green.\n *\n * Positioning is the consumer's responsibility (typical pattern: wrap in an\n * absolutely-positioned div pinned to the edge midpoint).\n */\nexport function LifecycleEdgeLabel({\n  variant = 'neutral',\n  className,\n  children,\n  ...rest\n}: LifecycleEdgeLabelProps) {\n  return (\n    <span\n      {...rest}\n      className={cn(\n        'uxm-lifecycle-edge-label',\n        `uxm-lifecycle-edge-label--${variant}`,\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AA5BJ,qBAAmB;AAqBZ,SAAS,mBAAmB;AAAA,EACjC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,QACA,6BAA6B,OAAO;AAAA,QACpC;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}