@cjlapao/ui-kit 0.2.4 → 0.2.6

package/dist/index.js

@@ -5338,6 +5338,15 @@ var getSurfacePaddingClass = (padding) => surfacePaddingClasses[padding] ?? surf
 var getSurfacePaddingClasses = () => ({
   ...surfacePaddingClasses
 });
+var SURFACE_GUTTER_AXES = ["top", "right", "bottom", "left"];
+var surfaceGutterClasses = {
+  top: { none: "mt-0", xs: "mt-2", sm: "mt-4", md: "mt-6", lg: "mt-8", xl: "mt-10" },
+  right: { none: "mr-0", xs: "mr-2", sm: "mr-4", md: "mr-6", lg: "mr-8", xl: "mr-10" },
+  bottom: { none: "mb-0", xs: "mb-2", sm: "mb-4", md: "mb-6", lg: "mb-8", xl: "mb-10" },
+  left: { none: "ml-0", xs: "ml-2", sm: "ml-4", md: "ml-6", lg: "ml-8", xl: "ml-10" }
+};
+var DEFAULT_SURFACE_GUTTER = "none";
+var getSurfaceGutterClass = (axis, gutter) => surfaceGutterClasses[axis][gutter] ?? surfaceGutterClasses[axis][DEFAULT_SURFACE_GUTTER];
 var NEUTRAL_TONES = [
   "neutral",
   "slate",
@@ -15755,12 +15764,23 @@ var ScrollArea = ({
   mask = false,
   tabIndex = 0,
   contentClassName,
+  viewportClassName,
+  viewportRef: viewportRefProp,
   children,
   className = "",
   ...rest
 }) => {
   const viewportId = useId7();
   const viewportRef = useRef9(null);
+  const setViewportRef = useCallback4(
+    (el) => {
+      viewportRef.current = el;
+      if (typeof viewportRefProp === "function") viewportRefProp(el);
+      else if (viewportRefProp)
+        viewportRefProp.current = el;
+    },
+    [viewportRefProp]
+  );
   const contentRef = useRef9(null);
   const yTrackRef = useRef9(null);
   const xTrackRef = useRef9(null);
@@ -15902,7 +15922,7 @@ var ScrollArea = ({
         /* @__PURE__ */ jsx182(
           "div",
           {
-            ref: viewportRef,
+            ref: setViewportRef,
             id: viewportId,
             "data-slot": "scrollarea-viewport",
             tabIndex: overflow.x || overflow.y ? tabIndex : -1,
@@ -15917,7 +15937,8 @@ var ScrollArea = ({
               // and the viewport would simply grow past the frame's cap, get
               // clipped by `overflow-hidden` and never learn it was scrollable.
               "[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-              "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400"
+              "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400",
+              viewportClassName
             ),
             children: /* @__PURE__ */ jsx182(
               "div",
@@ -21519,10 +21540,23 @@ var PageHeader = ({
   children,
   variant = "default",
   accentColor = "blue",
+  padding,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+  corner = DEFAULT_SURFACE_CORNER,
   className = "",
   ...rest
 }) => {
   const surface = variant === "default" ? null : getSidebarSurfaceTokens(variant, accentColor);
+  const pair = surface ? "xs" : "none";
+  const gutter = {
+    top: paddingTop ?? padding ?? pair,
+    right: paddingRight ?? padding ?? pair,
+    bottom: paddingBottom ?? padding ?? "none",
+    left: paddingLeft ?? padding ?? "none"
+  };
   return /* @__PURE__ */ jsxs97(
     "header",
     {
@@ -21530,9 +21564,12 @@ var PageHeader = ({
       className: classNames51(
         "flex w-full items-center justify-between gap-4 px-5",
         SIDE_MENU_HEADER_HEIGHT,
+        getSurfaceGutterClass("top", gutter.top),
+        getSurfaceGutterClass("right", gutter.right),
+        getSurfaceGutterClass("bottom", gutter.bottom),
+        getSurfaceGutterClass("left", gutter.left),
+        getSurfaceCornerClass(corner),
         surface ? classNames51(
-          surface.offset,
-          surface.radius,
           "border",
           surface.border,
           surface.shadow,
@@ -55697,6 +55734,7 @@ var CONNECTION_FLOW_EDGE_STYLES = [
   "curved",
   "straight"
 ];
+var CONNECTION_FLOW_CHILD_LAYOUTS = ["fan", "chain"];
 var CONNECTION_FLOW_LOADERS = [
   "skeleton",
   "spinner",
@@ -55835,6 +55873,8 @@ var DEFAULT_LAYOUT_OPTIONS = {
   laneGap: 16,
   childGap: 12,
   childIndent: 28,
+  rowGap: 12,
+  gridIndent: 28,
   edgeStyle: "orthogonal",
   cornerRadius: 8,
   bypassLift: 18,
@@ -55860,6 +55900,8 @@ var NODE_CORNER_RADIUS = Object.fromEntries(
 var nodeTone = (node) => node?.tone ?? (node?.status ? STATUS_TONE[node.status] : "neutral");
 var nodeIcon = (node) => node?.icon ?? (node?.status ? STATUS_ICON2[node.status] : void 0);
 var nodeIsActive = (node) => node?.active ?? node?.status === "running";
+var nodeHasFailed = (node) => node?.status === "failed";
+var toRows = (node) => node.rows ?? (node.children ?? []).map((child) => [child]);
 var nodeIsSkipped = (node) => node?.skipped ?? (node?.status === "skipped" ? true : void 0);
 
 // ../common/connectionFlow/measure.ts
@@ -55940,6 +55982,15 @@ var nodeScrolls = (node, options, expanded) => {
 };
 var measureBranch = (node, options, expanded) => {
   const own = measureNode(node, options, expanded);
+  if (node.childLayout === "chain") {
+    const rows = toRows(node);
+    if (rows.length === 0) return own;
+    const rowsHeight = rows.reduce(
+      (sum, row, index) => sum + Math.max(0, ...row.map((c) => measureBranch(c, options, expanded))) + (index > 0 ? options.rowGap : 0),
+      0
+    );
+    return own + options.childGap + rowsHeight;
+  }
   const children = node.children ?? [];
   if (children.length === 0) return own;
   const childHeight = children.reduce(
@@ -56335,6 +56386,7 @@ var layoutConnectionFlow = (input) => {
   const skipped = resolveSkipped(columns, input.autoState ?? false);
   const laidOut = [];
   const byId = /* @__PURE__ */ new Map();
+  const chains = /* @__PURE__ */ new Map();
   let x = options.padding;
   const columnBounds = [];
   columns.forEach((column, columnIndex) => {
@@ -56385,15 +56437,68 @@ var layoutConnectionFlow = (input) => {
           placeChildren(child, depth + 1, indentX + options.childIndent);
         });
       };
-      placeChildren(node, 1, x + options.childIndent);
+      if (node.childLayout === "chain") {
+        const rows = toRows(node);
+        if (rows.length > 0) {
+          const cardWidth = options.metrics.width;
+          const gridX = x + options.gridIndent;
+          let rowY = y + ownHeight + options.childGap;
+          const walk2 = [];
+          let maxCols = 1;
+          rows.forEach((row, rowIdx) => {
+            maxCols = Math.max(maxCols, row.length);
+            let rowBottom = rowY;
+            row.forEach((card, col) => {
+              const cardHeight = measureNode(card, options, input.expanded);
+              const cardEntry = {
+                id: card.id,
+                node: card,
+                outline: "",
+                x: gridX + col * (cardWidth + options.connectorWidth),
+                y: rowY,
+                width: cardWidth,
+                height: cardHeight,
+                anchorY: cardHeight / 2,
+                column: columnIndex,
+                depth: 1,
+                tone: toneOf(card),
+                scrollable: nodeScrolls(card, options, input.expanded)
+              };
+              laidOut.push(cardEntry);
+              byId.set(card.id, cardEntry);
+              walk2.push({ card: cardEntry, row: rowIdx });
+              rowBottom = Math.max(rowBottom, rowY + cardHeight);
+            });
+            rowY = rowBottom + options.rowGap;
+          });
+          const live = walk2.filter((w) => !nodeIsSkipped(w.card.node));
+          const exitCard = live.length > 0 ? live[live.length - 1].card : null;
+          chains.set(node.id, {
+            parentNode: node,
+            walk: walk2,
+            exitCard,
+            exitHasBranch: Boolean(exitCard?.node.success?.to),
+            gridWidth: options.gridIndent + maxCols * cardWidth + (maxCols - 1) * options.connectorWidth
+          });
+        } else {
+          placeChildren(node, 1, x + options.childIndent);
+        }
+      } else {
+        placeChildren(node, 1, x + options.childIndent);
+      }
       y += heights[laneIndex] + options.laneGap;
     });
+    const chainInfo = column.parallel ? void 0 : chains.get(column.nodes[0].id);
+    const columnWidth = Math.max(
+      options.metrics.width,
+      chainInfo?.gridWidth ?? 0
+    );
     columnBounds.push({
       start: x,
-      end: x + options.metrics.width,
+      end: x + columnWidth,
       centre: options.padding + stackHeight / 2
     });
-    x += options.metrics.width + options.connectorWidth;
+    x += columnWidth + options.connectorWidth;
   });
   const edges = [];
   const connectors = /* @__PURE__ */ new Map();
@@ -56451,7 +56556,10 @@ var layoutConnectionFlow = (input) => {
     if (columnIsTerminal(sourceIndex)) return;
     if (skipped.has(columnIndex)) return;
     const isBypass = sourceIndex !== columnIndex - 1;
-    const sourceNodes = columns[sourceIndex].nodes;
+    const chainSrc = columns[sourceIndex].parallel ? void 0 : chains.get(columns[sourceIndex].nodes[0].id);
+    if (chainSrc && (!chainSrc.exitCard || chainSrc.exitHasBranch)) return;
+    if (chainSrc?.exitCard?.node.terminal === true) return;
+    const sourceNodes = chainSrc?.exitCard ? [chainSrc.exitCard.node] : columns[sourceIndex].nodes;
     const targetNodes = column.nodes;
     const state = (sourceNode, targetNode) => targetNode.connector?.state ?? (input.autoState ? toneOf(sourceNode) !== "neutral" ? nodeIsActive(targetNode) ? "flowing" : "stopped" : "disabled" : input.flowState ?? "flowing");
     const animatedFor = (cfg, edgeState) => (cfg?.animated ?? input.animated ?? true) && (edgeState === "flowing" || edgeState === "stopped" && (cfg?.animateCompleted ?? false));
@@ -56461,7 +56569,7 @@ var layoutConnectionFlow = (input) => {
       labelUsed = true;
       return label;
     };
-    const sourceSpan = columnBox(sourceIndex);
+    const sourceSpan = chainSrc?.exitCard ? boxOf(chainSrc.exitCard) : columnBox(sourceIndex);
     const targetSpan = columnBox(columnIndex);
     if (!sourceSpan || !targetSpan) return;
     const sides = selectSides(sourceSpan, targetSpan);
@@ -56545,6 +56653,7 @@ var layoutConnectionFlow = (input) => {
     });
   });
   const childEdges = (parent) => {
+    if (parent.childLayout === "chain") return;
     const parentEntry = byId.get(parent.id);
     if (!parentEntry) return;
     (parent.children ?? []).forEach((child) => {
@@ -56606,6 +56715,146 @@ var layoutConnectionFlow = (input) => {
     });
   };
   input.nodes.forEach(childEdges);
+  const emitFlowEdge = (o) => {
+    const route = routePorts(o.fromPort, o.toPort, {
+      style: o.cfg?.edgeStyle ?? options.edgeStyle,
+      stub: Math.min(18, options.connectorWidth / 3),
+      radius: options.cornerRadius,
+      trim: trimFor(o.cfg),
+      via: o.via
+    });
+    const animated = (o.cfg?.animated ?? input.animated ?? true) && (o.state === "flowing" || o.state === "stopped" && (o.cfg?.animateCompleted ?? false));
+    addConnector(o.fromEntry.id, o.fromPort, o.sourceTone, o.state, animated, o.id, o.cfg);
+    addConnector(o.toEntry.id, o.toPort, o.targetTone, o.state, animated, o.id, o.cfg);
+    edges.push({
+      id: o.id,
+      fromId: o.fromEntry.id,
+      toId: o.toEntry.id,
+      state: o.state,
+      points: route.points,
+      d: route.d,
+      sourceTone: o.sourceTone,
+      targetTone: o.targetTone,
+      bypass: false,
+      emitIndex: 0,
+      emitCount: 1,
+      emitSpan: 0,
+      animated,
+      label: o.label,
+      kind: o.kind,
+      branchKind: o.branchKind
+    });
+  };
+  const sidePort = (entry, side) => port(boxOf(entry), side, entry.anchorY / entry.height);
+  const branchToneOf = (branch, kind) => branch.tone ?? (kind === "success" ? STATUS_TONE.succeeded : STATUS_TONE.failed);
+  const emitBranch = (fromEntry, branch, kind) => {
+    if (!branch.to) return;
+    const target = byId.get(branch.to);
+    if (!target || target.id === fromEntry.id) return;
+    const tone = branchToneOf(branch, kind);
+    const state = kind === "failure" ? nodeHasFailed(fromEntry.node) ? "flowing" : "stopped" : nodeHasFailed(fromEntry.node) ? "stopped" : "flowing";
+    const srcBox = boxOf(fromEntry);
+    const tgtBox = boxOf(target);
+    const upstream = tgtBox.y + tgtBox.height <= srcBox.y + 1 || tgtBox.x + tgtBox.width <= srcBox.x + 1;
+    if (upstream && kind === "failure") {
+      emitFlowEdge({
+        id: `${fromEntry.id}~fail>${target.id}`,
+        fromEntry,
+        toEntry: target,
+        fromPort: port(srcBox, "left", fromEntry.anchorY / fromEntry.height),
+        toPort: port(tgtBox, "top", 0.5),
+        via: { x: Math.min(srcBox.x, tgtBox.x) - options.bypassLift },
+        state,
+        sourceTone: tone,
+        targetTone: tone,
+        label: branch.label,
+        kind: "branch",
+        branchKind: kind
+      });
+      return;
+    }
+    const sides = selectSides(srcBox, tgtBox);
+    emitFlowEdge({
+      id: `${fromEntry.id}~${kind === "failure" ? "fail" : "ok"}>${target.id}`,
+      fromEntry,
+      toEntry: target,
+      fromPort: sidePort(fromEntry, sides.from),
+      toPort: sidePort(target, sides.to),
+      state,
+      sourceTone: tone,
+      targetTone: tone,
+      label: branch.label,
+      kind: "branch",
+      branchKind: kind
+    });
+  };
+  chains.forEach((chain) => {
+    const parentEntry = byId.get(chain.parentNode.id);
+    if (!parentEntry) return;
+    if (nodeIsSkipped(chain.parentNode) === true) return;
+    const live = chain.walk.filter((w) => !nodeIsSkipped(w.card.node));
+    if (live.length === 0) return;
+    const first = live[0].card;
+    const parentBox = boxOf(parentEntry);
+    const firstBox = boxOf(first);
+    emitFlowEdge({
+      id: `${parentEntry.id}~in>${first.id}`,
+      fromEntry: parentEntry,
+      toEntry: first,
+      fromPort: portAt(
+        parentBox,
+        "bottom",
+        firstBox.x + firstBox.width / 2 - parentBox.x
+      ),
+      toPort: port(firstBox, "top", 0.5),
+      state: first.node.connector?.state ?? (nodeHasFailed(parentEntry.node) ? "stopped" : nodeIsActive(first.node) ? "flowing" : "stopped"),
+      sourceTone: toneOf(parentEntry.node),
+      targetTone: toneOf(first.node),
+      cfg: first.node.connector,
+      kind: "chain"
+    });
+    live.forEach((w, i) => {
+      const src = w.card;
+      if (src.node.success?.to) {
+        emitBranch(src, src.node.success, "success");
+        return;
+      }
+      const next = live[i + 1];
+      if (!next) return;
+      const tgt = next.card;
+      const srcBox = boxOf(src);
+      const tgtBox = boxOf(tgt);
+      const sameRow = next.row === w.row;
+      const gapStart = srcBox.x + srcBox.width;
+      const gapEnd = tgtBox.x;
+      emitFlowEdge({
+        id: `${src.id}~walk>${tgt.id}`,
+        fromEntry: src,
+        toEntry: tgt,
+        fromPort: sameRow ? port(srcBox, "right", src.anchorY / src.height) : port(srcBox, "bottom", 0.5),
+        toPort: sameRow ? port(tgtBox, "left", tgt.anchorY / tgt.height) : port(tgtBox, "top", 0.5),
+        via: sameRow && gapEnd > gapStart ? { x: (gapStart + gapEnd) / 2 } : void 0,
+        state: tgt.node.connector?.state ?? (nodeHasFailed(src.node) ? "stopped" : nodeIsActive(tgt.node) ? "flowing" : "stopped"),
+        sourceTone: src.node.success ? branchToneOf(src.node.success, "success") : toneOf(src.node),
+        targetTone: toneOf(tgt.node),
+        cfg: tgt.node.connector,
+        label: src.node.success?.label ?? tgt.node.connector?.label,
+        kind: "chain"
+      });
+    });
+    chain.walk.forEach((w) => {
+      if (w.card.node.failure) emitBranch(w.card, w.card.node.failure, "failure");
+    });
+  });
+  const chainCardIds = /* @__PURE__ */ new Set();
+  chains.forEach(
+    (chain) => chain.walk.forEach((w) => chainCardIds.add(w.card.id))
+  );
+  laidOut.forEach((entry) => {
+    if (chainCardIds.has(entry.id)) return;
+    if (entry.node.success?.to) emitBranch(entry, entry.node.success, "success");
+    if (entry.node.failure?.to) emitBranch(entry, entry.node.failure, "failure");
+  });
   const emittedBySource = /* @__PURE__ */ new Map();
   edges.forEach((edge) => {
     if (!edge.animated) return;
@@ -57134,6 +57383,29 @@ var ConnectionFlowSvg = ({
   const isLit = (edge) => highlightEdges.size === 0 || highlightEdges.has(edge.id);
   const nodeOpacity = (node) => highlightNodes.size === 0 || highlightNodes.has(node.id) ? 1 : 0.22;
   const connectorOpacity = (connector) => highlightEdges.size === 0 || connector.edgeIds.some((id) => highlightEdges.has(id)) ? 1 : 0.22;
+  const cardContent = (laid) => {
+    const content = renderNode ? renderNode(laid) : /* @__PURE__ */ jsx289(
+      ConnectionFlowNodeBody_default,
+      {
+        node: laid,
+        metrics,
+        showProgress,
+        options,
+        scrollable: laid.scrollable,
+        expanded,
+        onToggleExpanded
+      }
+    );
+    return laid.scrollable ? /* @__PURE__ */ jsx289(
+      ScrollArea_default,
+      {
+        variant: "auto",
+        className: "h-full w-full",
+        contentClassName: "block w-full",
+        children: content
+      }
+    ) : content;
+  };
   return /* @__PURE__ */ jsxs172("div", { className: "relative h-full w-full overflow-hidden", children: [
     /* @__PURE__ */ jsxs172(
       "svg",
@@ -57297,10 +57569,6 @@ var ConnectionFlowSvg = ({
         children: /* @__PURE__ */ jsx289(
           "div",
           {
-            "data-scrolls": laid.scrollable ? "" : void 0,
-            className: classNames101(
-              laid.scrollable && `overflow-y-auto ${THIN_SCROLLBAR_FIELD}`
-            ),
             style: {
               width: laid.width,
               height: laid.height,
@@ -57308,19 +57576,7 @@ var ConnectionFlowSvg = ({
               transform: `scale(${scale})`,
               transformOrigin: "top left"
             },
-            onWheel: laid.scrollable ? (event) => event.stopPropagation() : void 0,
-            children: renderNode ? renderNode(laid) : /* @__PURE__ */ jsx289(
-              ConnectionFlowNodeBody_default,
-              {
-                node: laid,
-                metrics,
-                showProgress,
-                options,
-                scrollable: laid.scrollable,
-                expanded,
-                onToggleExpanded
-              }
-            )
+            children: cardContent(laid)
           }
         )
       },
@@ -57539,6 +57795,21 @@ var ConnectionFlow = React81.forwardRef(function ConnectionFlow2({
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
+  useEffect66(() => {
+    const element = viewportRef.current;
+    if (!element || !interactive) return;
+    const onWheel = (event) => {
+      if (!(event.ctrlKey || event.metaKey)) return;
+      event.preventDefault();
+      const rect = element.getBoundingClientRect();
+      setZoom(
+        scale * (event.deltaY < 0 ? 1.1 : 1 / 1.1),
+        { x: event.clientX - rect.left, y: event.clientY - rect.top }
+      );
+    };
+    element.addEventListener("wheel", onWheel, { passive: false });
+    return () => element.removeEventListener("wheel", onWheel);
+  }, [interactive, scale, setZoom]);
   useEffect66(() => {
     if (fitOnLoad && viewport.width) fit();
   }, [fitOnLoad, nodes, viewport.width, viewport.height]);
@@ -57652,22 +57923,17 @@ var ConnectionFlow = React81.forwardRef(function ConnectionFlow2({
         style: { height: typeof height === "number" ? `${height}px` : height },
         children: [
           /* @__PURE__ */ jsx290(
-            "div",
+            ScrollArea_default,
             {
-              ref: viewportRef,
-              className: `h-full w-full select-none overflow-auto overscroll-contain [&::-webkit-scrollbar]:h-2 ${THIN_SCROLLBAR_FIELD}`,
+              variant: "auto",
+              viewportRef,
+              viewportClassName: "overscroll-contain",
+              className: "h-full w-full select-none",
               style: { cursor: panning ? "grabbing" : void 0 },
-              onWheel: (event) => {
-                if (!interactive) return;
-                if (event.target.closest("[data-scrolls]")) return;
-                const rect = viewportRef.current?.getBoundingClientRect();
-                const anchor = rect ? { x: event.clientX - rect.left, y: event.clientY - rect.top } : void 0;
-                setZoom(scale * (event.deltaY < 0 ? 1.1 : 1 / 1.1), anchor);
-              },
               onPointerDown: (event) => {
                 if (!interactive || event.button !== 0) return;
                 if (event.target.closest(
-                  "button, a, input, select, textarea, [data-no-pan]"
+                  'button, a, input, select, textarea, [data-no-pan], [data-slot="scrollarea-scrollbar"]'
                 )) {
                   return;
                 }
@@ -57680,7 +57946,7 @@ var ConnectionFlow = React81.forwardRef(function ConnectionFlow2({
                   scrollLeft: element.scrollLeft,
                   scrollTop: element.scrollTop
                 };
-                element.setPointerCapture(event.pointerId);
+                event.currentTarget.setPointerCapture(event.pointerId);
               },
               onPointerMove: (event) => {
                 if (!panning) return;
@@ -59840,14 +60106,97 @@ var TreeView = ({
 var TreeView_default = TreeView;
 
 // src/components/WorkflowTracker/WorkflowTracker.tsx
-import { useMemo as useMemo55 } from "react";
-import classNames118 from "classnames";
+import { useMemo as useMemo56 } from "react";
+import classNames119 from "classnames";
 
-// src/components/WorkflowTracker/WorkflowSummaryCard.tsx
-import classNames109 from "classnames";
+// src/components/WorkflowTracker/WorkflowTrackerRail.tsx
+import { useMemo as useMemo52 } from "react";
+import classNames112 from "classnames";
 
-// src/components/WorkflowTracker/WorkflowStatusNode.tsx
+// src/components/WorkflowTracker/WorkflowTimeline.tsx
+import React87 from "react";
+import classNames111 from "classnames";
+
+// src/components/WorkflowTracker/WorkflowSkeleton.tsx
 import classNames107 from "classnames";
+import { jsx as jsx296, jsxs as jsxs179 } from "react/jsx-runtime";
+var Bar3 = ({
+  width,
+  className
+}) => /* @__PURE__ */ jsx296(
+  "span",
+  {
+    className: classNames107(
+      "block h-2.5 rounded-full bg-neutral-200 dark:bg-neutral-800",
+      className
+    ),
+    style: { width }
+  }
+);
+var Dot = () => /* @__PURE__ */ jsx296("span", { className: "h-5 w-5 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-800" });
+var WorkflowHeaderSkeleton = ({ hasIcon = false, iconCorner = DEFAULT_SURFACE_CORNER }) => /* @__PURE__ */ jsxs179("div", { className: "mb-5 flex animate-pulse flex-wrap items-start justify-between gap-3 motion-reduce:animate-none", children: [
+  /* @__PURE__ */ jsxs179("div", { className: "flex items-center gap-3", children: [
+    hasIcon && /* @__PURE__ */ jsx296(
+      Bar3,
+      {
+        width: "3rem",
+        className: classNames107("h-12", getSurfaceCornerClass(iconCorner))
+      }
+    ),
+    /* @__PURE__ */ jsxs179("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx296(Bar3, { width: "11rem", className: "h-2" }),
+      /* @__PURE__ */ jsx296(Bar3, { width: "16rem", className: "h-6" })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx296(Bar3, { width: "9rem", className: "h-6 rounded-full" })
+] });
+var WorkflowRailSkeleton = ({
+  rows = 6
+}) => /* @__PURE__ */ jsxs179("div", { className: "animate-pulse motion-reduce:animate-none", children: [
+  /* @__PURE__ */ jsxs179("div", { className: "border-b border-neutral-200 px-5 pb-4 pt-5 dark:border-neutral-800", children: [
+    /* @__PURE__ */ jsxs179("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx296(Bar3, { width: "4.5rem" }),
+      /* @__PURE__ */ jsx296(Bar3, { width: "2rem" })
+    ] }),
+    /* @__PURE__ */ jsx296("span", { className: "mt-3 block h-1 w-full rounded-full bg-neutral-200 dark:bg-neutral-800" }),
+    /* @__PURE__ */ jsx296(Bar3, { width: "80%", className: "mt-3" })
+  ] }),
+  /* @__PURE__ */ jsx296("div", { className: "space-y-5 px-5 py-5", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs179("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx296(Dot, {}),
+    /* @__PURE__ */ jsxs179("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsx296(Bar3, { width: index % 2 === 0 ? "62%" : "48%" }),
+      /* @__PURE__ */ jsx296(Bar3, { width: "34%", className: "h-2" })
+    ] })
+  ] }, index)) })
+] });
+var WorkflowDetailSkeleton = () => /* @__PURE__ */ jsxs179("div", { className: "animate-pulse motion-reduce:animate-none", children: [
+  /* @__PURE__ */ jsxs179("div", { className: "space-y-4 px-5 pb-6 pt-5 sm:px-6", children: [
+    /* @__PURE__ */ jsxs179("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx296(Bar3, { width: "6rem" }),
+      /* @__PURE__ */ jsx296(Bar3, { width: "4rem" })
+    ] }),
+    /* @__PURE__ */ jsx296(Bar3, { width: "45%", className: "h-5" }),
+    /* @__PURE__ */ jsxs179("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx296(Bar3, { width: "92%", className: "h-2" }),
+      /* @__PURE__ */ jsx296(Bar3, { width: "70%", className: "h-2" })
+    ] }),
+    /* @__PURE__ */ jsxs179("div", { className: "flex gap-10 pt-2", children: [
+      /* @__PURE__ */ jsx296(Bar3, { width: "5rem" }),
+      /* @__PURE__ */ jsx296(Bar3, { width: "6rem" }),
+      /* @__PURE__ */ jsx296(Bar3, { width: "4rem" })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx296("div", { className: "border-y border-neutral-200 bg-neutral-50 px-5 py-3 dark:border-neutral-800 dark:bg-white/5 sm:px-6", children: /* @__PURE__ */ jsx296(Bar3, { width: "5rem" }) }),
+  /* @__PURE__ */ jsx296("div", { className: "divide-y divide-neutral-200 dark:divide-neutral-800", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs179("div", { className: "flex items-center gap-3 px-5 py-4 sm:px-6", children: [
+    /* @__PURE__ */ jsx296(Dot, {}),
+    /* @__PURE__ */ jsx296(Bar3, { width: index === 1 ? "38%" : "30%" }),
+    /* @__PURE__ */ jsx296("span", { className: "flex-1" }),
+    /* @__PURE__ */ jsx296(Bar3, { width: "3rem" })
+  ] }, index)) })
+] });
+
+// src/components/WorkflowTracker/WorkflowStatusNode.tsx
+import classNames108 from "classnames";
 
 // src/components/WorkflowTracker/surfaces.ts
 var isTranslucentVariant = (variant) => getSurfaceTextTokens(variant).translucent;
@@ -59985,13 +60334,13 @@ var getStatusTokens = (status, palette) => {
 };
 
 // src/components/WorkflowTracker/WorkflowStatusNode.tsx
-import { jsx as jsx296, jsxs as jsxs179 } from "react/jsx-runtime";
+import { jsx as jsx297, jsxs as jsxs180 } from "react/jsx-runtime";
 var sizeTokens11 = {
   sm: { node: "h-4 w-4", glyph: "h-2.5 w-2.5" },
   md: { node: "h-5 w-5", glyph: "h-3 w-3" },
   lg: { node: "h-9 w-9", glyph: "h-5 w-5" }
 };
-var DashedRing = ({ className }) => /* @__PURE__ */ jsx296("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx296(
+var DashedRing = ({ className }) => /* @__PURE__ */ jsx297("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx297(
   "circle",
   {
     cx: "10",
@@ -60004,7 +60353,7 @@ var DashedRing = ({ className }) => /* @__PURE__ */ jsx296("svg", { viewBox: "0
     strokeLinecap: "round"
   }
 ) });
-var AlertGlyph = ({ className }) => /* @__PURE__ */ jsx296("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx296(
+var AlertGlyph = ({ className }) => /* @__PURE__ */ jsx297("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: /* @__PURE__ */ jsx297(
   "path",
   {
     d: "M12 6.5a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1Zm0 9.25a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z",
@@ -60019,33 +60368,33 @@ var WorkflowStatusNode = ({
 }) => {
   const tokens = getStatusTokens(status, palette);
   const { node, glyph } = sizeTokens11[size];
-  return /* @__PURE__ */ jsxs179(
+  return /* @__PURE__ */ jsxs180(
     "span",
     {
       "aria-hidden": "true",
-      className: classNames107("relative inline-flex shrink-0", node, className),
+      className: classNames108("relative inline-flex shrink-0", node, className),
       children: [
-        tokens.pulse && /* @__PURE__ */ jsx296(
+        tokens.pulse && /* @__PURE__ */ jsx297(
           "span",
           {
-            className: classNames107(
+            className: classNames108(
               "absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden",
               `bg-${tokens.tone}-300 dark:bg-${tokens.tone}-500`
             )
           }
         ),
-        /* @__PURE__ */ jsxs179(
+        /* @__PURE__ */ jsxs180(
           "span",
           {
-            className: classNames107(
+            className: classNames108(
               "relative inline-flex h-full w-full items-center justify-center rounded-full",
               tokens.node
             ),
             children: [
-              tokens.glyph === "check" && /* @__PURE__ */ jsx296(Check, { className: classNames107(glyph, tokens.glyphClass) }),
-              tokens.glyph === "pause" && /* @__PURE__ */ jsx296(Pause, { className: classNames107(glyph, tokens.glyphClass) }),
-              tokens.glyph === "alert" && /* @__PURE__ */ jsx296(AlertGlyph, { className: classNames107(glyph, tokens.glyphClass) }),
-              tokens.glyph === "dashed" && /* @__PURE__ */ jsx296(DashedRing, { className: classNames107("h-full w-full", tokens.glyphClass) })
+              tokens.glyph === "check" && /* @__PURE__ */ jsx297(Check, { className: classNames108(glyph, tokens.glyphClass) }),
+              tokens.glyph === "pause" && /* @__PURE__ */ jsx297(Pause, { className: classNames108(glyph, tokens.glyphClass) }),
+              tokens.glyph === "alert" && /* @__PURE__ */ jsx297(AlertGlyph, { className: classNames108(glyph, tokens.glyphClass) }),
+              tokens.glyph === "dashed" && /* @__PURE__ */ jsx297(DashedRing, { className: classNames108("h-full w-full", tokens.glyphClass) })
             ]
           }
         )
@@ -60055,34 +60404,73 @@ var WorkflowStatusNode = ({
 };
 var WorkflowStatusNode_default = WorkflowStatusNode;
 
+// src/components/WorkflowTracker/WorkflowQuickActions.tsx
+import classNames109 from "classnames";
+import { jsx as jsx298 } from "react/jsx-runtime";
+var WorkflowQuickActions = ({
+  stepId,
+  actions,
+  palette,
+  groupLabel,
+  onAction,
+  className,
+  style
+}) => {
+  if (!onAction || actions.length === 0) return null;
+  return /* @__PURE__ */ jsx298(
+    "div",
+    {
+      role: "group",
+      "aria-label": groupLabel,
+      className: classNames109("flex flex-wrap gap-1.5", className),
+      style,
+      children: actions.map((action) => /* @__PURE__ */ jsx298(
+        Button_default,
+        {
+          size: "xs",
+          weight: "medium",
+          variant: action.variant ?? "soft",
+          color: action.tone ?? palette.accent,
+          leadingIcon: action.leadingIcon,
+          disabled: action.disabled,
+          onClick: () => onAction(stepId, action.id),
+          children: action.label
+        },
+        action.id
+      ))
+    }
+  );
+};
+var WorkflowQuickActions_default = WorkflowQuickActions;
+
 // src/components/WorkflowTracker/parts.tsx
-import classNames108 from "classnames";
-import { jsx as jsx297, jsxs as jsxs180 } from "react/jsx-runtime";
+import classNames110 from "classnames";
+import { jsx as jsx299, jsxs as jsxs181 } from "react/jsx-runtime";
 var resolve = (surfaces) => surfaces ?? getSurfaceTokens(false);
-var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) => /* @__PURE__ */ jsxs180(
+var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) => /* @__PURE__ */ jsxs181(
   "div",
   {
-    className: classNames108(
+    className: classNames110(
       "flex flex-col items-center justify-center gap-3 px-6 py-10 text-center",
       className
     ),
     children: [
-      /* @__PURE__ */ jsx297(WorkflowStatusNode_default, { status: "not_started", palette, size: "lg" }),
-      /* @__PURE__ */ jsxs180("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx297(
+      /* @__PURE__ */ jsx299(WorkflowStatusNode_default, { status: "not_started", palette, size: "lg" }),
+      /* @__PURE__ */ jsxs181("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx299(
           "p",
           {
-            className: classNames108(
+            className: classNames110(
               "text-sm font-semibold",
               resolve(surfaces).mutedText
             ),
             children: title
           }
         ),
-        subtitle && /* @__PURE__ */ jsx297(
+        subtitle && /* @__PURE__ */ jsx299(
           "p",
           {
-            className: classNames108(
+            className: classNames110(
               "max-w-xs text-xs leading-5",
               resolve(surfaces).faintText
             ),
@@ -60093,10 +60481,10 @@ var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) =>
     ]
   }
 );
-var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ jsx297(
+var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ jsx299(
   "span",
   {
-    className: classNames108(
+    className: classNames110(
       "text-[10px] font-semibold uppercase tracking-widest",
       resolve(surfaces).faintText,
       className
@@ -60104,7 +60492,7 @@ var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ jsx297
     children
   }
 );
-var SectionMeta = ({ children, surfaces, className }) => /* @__PURE__ */ jsx297("span", { className: classNames108("text-xs", resolve(surfaces).mutedText, className), children });
+var SectionMeta = ({ children, surfaces, className }) => /* @__PURE__ */ jsx299("span", { className: classNames110("text-xs", resolve(surfaces).mutedText, className), children });
 var WorkflowBadge = ({
   children,
   status,
@@ -60112,14 +60500,14 @@ var WorkflowBadge = ({
   tone
 }) => {
   const tokens = getStatusTokens(status, palette);
-  return /* @__PURE__ */ jsx297(
+  return /* @__PURE__ */ jsx299(
     Pill_default,
     {
       size: "xs",
       uppercase: true,
       tone: tone ?? tokens.pillTone,
       variant: "outline",
-      className: classNames108(
+      className: classNames110(
         "shrink-0 font-medium",
         tone ? `bg-${tone}-100 dark:bg-${tone}-900` : tokens.pillFill
       ),
@@ -60127,177 +60515,17 @@ var WorkflowBadge = ({
     }
   );
 };
-var MetaField = ({ label, value, surfaces }) => /* @__PURE__ */ jsxs180("div", { className: "min-w-0", children: [
-  /* @__PURE__ */ jsx297(SectionTitle, { surfaces, children: label }),
-  /* @__PURE__ */ jsx297("p", { className: "mt-1 text-sm font-medium text-neutral-800 dark:text-neutral-100", children: value })
-] });
-var Tally = ({ count, label, surfaces }) => /* @__PURE__ */ jsxs180("span", { className: "inline-flex items-center gap-1", children: [
-  /* @__PURE__ */ jsx297("span", { className: "font-semibold text-neutral-900 dark:text-white", children: count }),
-  /* @__PURE__ */ jsx297("span", { className: resolve(surfaces).mutedText, children: label })
-] });
-
-// src/components/WorkflowTracker/WorkflowSummaryCard.tsx
-import { jsx as jsx298, jsxs as jsxs181 } from "react/jsx-runtime";
-var WorkflowSummaryCard = ({
-  title,
-  steps,
-  palette,
-  surfaces
-}) => /* @__PURE__ */ jsxs181("div", { className: "px-5 py-4", children: [
-  /* @__PURE__ */ jsx298(SectionTitle, { surfaces, children: title }),
-  /* @__PURE__ */ jsx298("ul", { className: "mt-3 space-y-3", children: steps.map((step) => /* @__PURE__ */ jsxs181("li", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx298(
-      WorkflowStatusNode_default,
-      {
-        status: normalizeStatus(step.status),
-        palette,
-        className: "mt-0.5"
-      }
-    ),
-    /* @__PURE__ */ jsxs181("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx298("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: step.label }),
-      step.meta && /* @__PURE__ */ jsx298(
-        "p",
-        {
-          className: classNames109(
-            "mt-0.5 text-xs leading-5",
-            surfaces.mutedText
-          ),
-          children: step.meta
-        }
-      )
-    ] })
-  ] }, step.id)) })
-] });
-var WorkflowSummaryCard_default = WorkflowSummaryCard;
-
-// src/components/WorkflowTracker/WorkflowTrackerRail.tsx
-import { useMemo as useMemo52 } from "react";
-import classNames113 from "classnames";
-
-// src/components/WorkflowTracker/WorkflowTimeline.tsx
-import React87 from "react";
-import classNames112 from "classnames";
-
-// src/components/WorkflowTracker/WorkflowSkeleton.tsx
-import classNames110 from "classnames";
-import { jsx as jsx299, jsxs as jsxs182 } from "react/jsx-runtime";
-var Bar3 = ({
-  width,
-  className
-}) => /* @__PURE__ */ jsx299(
-  "span",
-  {
-    className: classNames110(
-      "block h-2.5 rounded-full bg-neutral-200 dark:bg-neutral-800",
-      className
-    ),
-    style: { width }
-  }
-);
-var Dot = () => /* @__PURE__ */ jsx299("span", { className: "h-5 w-5 shrink-0 rounded-full bg-neutral-200 dark:bg-neutral-800" });
-var WorkflowHeaderSkeleton = ({ hasIcon = false, iconCorner = DEFAULT_SURFACE_CORNER }) => /* @__PURE__ */ jsxs182("div", { className: "mb-5 flex animate-pulse flex-wrap items-start justify-between gap-3 motion-reduce:animate-none", children: [
-  /* @__PURE__ */ jsxs182("div", { className: "flex items-center gap-3", children: [
-    hasIcon && /* @__PURE__ */ jsx299(
-      Bar3,
-      {
-        width: "3rem",
-        className: classNames110("h-12", getSurfaceCornerClass(iconCorner))
-      }
-    ),
-    /* @__PURE__ */ jsxs182("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx299(Bar3, { width: "11rem", className: "h-2" }),
-      /* @__PURE__ */ jsx299(Bar3, { width: "16rem", className: "h-6" })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsx299(Bar3, { width: "9rem", className: "h-6 rounded-full" })
+var MetaField = ({ label, value, surfaces }) => /* @__PURE__ */ jsxs181("div", { className: "min-w-0", children: [
+  /* @__PURE__ */ jsx299(SectionTitle, { surfaces, children: label }),
+  /* @__PURE__ */ jsx299("p", { className: "mt-1 text-sm font-medium text-neutral-800 dark:text-neutral-100", children: value })
 ] });
-var WorkflowRailSkeleton = ({
-  rows = 6
-}) => /* @__PURE__ */ jsxs182("div", { className: "animate-pulse motion-reduce:animate-none", children: [
-  /* @__PURE__ */ jsxs182("div", { className: "border-b border-neutral-200 px-5 pb-4 pt-5 dark:border-neutral-800", children: [
-    /* @__PURE__ */ jsxs182("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx299(Bar3, { width: "4.5rem" }),
-      /* @__PURE__ */ jsx299(Bar3, { width: "2rem" })
-    ] }),
-    /* @__PURE__ */ jsx299("span", { className: "mt-3 block h-1 w-full rounded-full bg-neutral-200 dark:bg-neutral-800" }),
-    /* @__PURE__ */ jsx299(Bar3, { width: "80%", className: "mt-3" })
-  ] }),
-  /* @__PURE__ */ jsx299("div", { className: "space-y-5 px-5 py-5", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs182("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx299(Dot, {}),
-    /* @__PURE__ */ jsxs182("div", { className: "flex-1 space-y-2", children: [
-      /* @__PURE__ */ jsx299(Bar3, { width: index % 2 === 0 ? "62%" : "48%" }),
-      /* @__PURE__ */ jsx299(Bar3, { width: "34%", className: "h-2" })
-    ] })
-  ] }, index)) })
+var Tally = ({ count, label, surfaces }) => /* @__PURE__ */ jsxs181("span", { className: "inline-flex items-center gap-1", children: [
+  /* @__PURE__ */ jsx299("span", { className: "font-semibold text-neutral-900 dark:text-white", children: count }),
+  /* @__PURE__ */ jsx299("span", { className: resolve(surfaces).mutedText, children: label })
 ] });
-var WorkflowDetailSkeleton = () => /* @__PURE__ */ jsxs182("div", { className: "animate-pulse motion-reduce:animate-none", children: [
-  /* @__PURE__ */ jsxs182("div", { className: "space-y-4 px-5 pb-6 pt-5 sm:px-6", children: [
-    /* @__PURE__ */ jsxs182("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx299(Bar3, { width: "6rem" }),
-      /* @__PURE__ */ jsx299(Bar3, { width: "4rem" })
-    ] }),
-    /* @__PURE__ */ jsx299(Bar3, { width: "45%", className: "h-5" }),
-    /* @__PURE__ */ jsxs182("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx299(Bar3, { width: "92%", className: "h-2" }),
-      /* @__PURE__ */ jsx299(Bar3, { width: "70%", className: "h-2" })
-    ] }),
-    /* @__PURE__ */ jsxs182("div", { className: "flex gap-10 pt-2", children: [
-      /* @__PURE__ */ jsx299(Bar3, { width: "5rem" }),
-      /* @__PURE__ */ jsx299(Bar3, { width: "6rem" }),
-      /* @__PURE__ */ jsx299(Bar3, { width: "4rem" })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsx299("div", { className: "border-y border-neutral-200 bg-neutral-50 px-5 py-3 dark:border-neutral-800 dark:bg-white/5 sm:px-6", children: /* @__PURE__ */ jsx299(Bar3, { width: "5rem" }) }),
-  /* @__PURE__ */ jsx299("div", { className: "divide-y divide-neutral-200 dark:divide-neutral-800", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxs182("div", { className: "flex items-center gap-3 px-5 py-4 sm:px-6", children: [
-    /* @__PURE__ */ jsx299(Dot, {}),
-    /* @__PURE__ */ jsx299(Bar3, { width: index === 1 ? "38%" : "30%" }),
-    /* @__PURE__ */ jsx299("span", { className: "flex-1" }),
-    /* @__PURE__ */ jsx299(Bar3, { width: "3rem" })
-  ] }, index)) })
-] });
-
-// src/components/WorkflowTracker/WorkflowQuickActions.tsx
-import classNames111 from "classnames";
-import { jsx as jsx300 } from "react/jsx-runtime";
-var WorkflowQuickActions = ({
-  stepId,
-  actions,
-  palette,
-  groupLabel,
-  onAction,
-  className,
-  style
-}) => {
-  if (!onAction || actions.length === 0) return null;
-  return /* @__PURE__ */ jsx300(
-    "div",
-    {
-      role: "group",
-      "aria-label": groupLabel,
-      className: classNames111("flex flex-wrap gap-1.5", className),
-      style,
-      children: actions.map((action) => /* @__PURE__ */ jsx300(
-        Button_default,
-        {
-          size: "xs",
-          weight: "medium",
-          variant: action.variant ?? "soft",
-          color: action.tone ?? palette.accent,
-          leadingIcon: action.leadingIcon,
-          disabled: action.disabled,
-          onClick: () => onAction(stepId, action.id),
-          children: action.label
-        },
-        action.id
-      ))
-    }
-  );
-};
-var WorkflowQuickActions_default = WorkflowQuickActions;
 
 // src/components/WorkflowTracker/WorkflowTimeline.tsx
-import { Fragment as Fragment46, jsx as jsx301, jsxs as jsxs183 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx300, jsxs as jsxs182 } from "react/jsx-runtime";
 var CONNECTOR_LEFT = 9;
 var CONNECTOR_TOP = 24;
 var NESTED_INDENT = 32;
@@ -60315,16 +60543,16 @@ var NestedSubSteps = ({
   palette,
   surfaces,
   onSubStepSelect
-}) => /* @__PURE__ */ jsx301(
+}) => /* @__PURE__ */ jsx300(
   "div",
   {
-    className: classNames112("mt-3 rounded-lg p-3", surfaces.nestedBox),
+    className: classNames111("mt-3 rounded-lg p-3", surfaces.nestedBox),
     style: { marginLeft: NESTED_INDENT },
-    children: /* @__PURE__ */ jsx301("ul", { className: "space-y-2.5", children: subSteps.map((subStep) => {
+    children: /* @__PURE__ */ jsx300("ul", { className: "space-y-2.5", children: subSteps.map((subStep) => {
       const status = normalizeStatus(subStep.status);
       const isActive = status === "running" || status === "in_progress";
-      const content = /* @__PURE__ */ jsxs183(Fragment46, { children: [
-        /* @__PURE__ */ jsx301(
+      const content = /* @__PURE__ */ jsxs182(Fragment46, { children: [
+        /* @__PURE__ */ jsx300(
           WorkflowStatusNode_default,
           {
             status,
@@ -60332,10 +60560,10 @@ var NestedSubSteps = ({
             size: "sm"
           }
         ),
-        /* @__PURE__ */ jsx301(
+        /* @__PURE__ */ jsx300(
           "span",
           {
-            className: classNames112(
+            className: classNames111(
               "text-sm",
               isActive ? "font-semibold text-neutral-900 dark:text-white" : "text-neutral-600 dark:text-neutral-300"
             ),
@@ -60343,7 +60571,7 @@ var NestedSubSteps = ({
           }
         )
       ] });
-      return /* @__PURE__ */ jsx301("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx301(
+      return /* @__PURE__ */ jsx300("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx300(
         "button",
         {
           type: "button",
@@ -60351,7 +60579,7 @@ var NestedSubSteps = ({
           className: "flex w-full items-center gap-2.5 rounded-sm text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-500",
           children: content
         }
-      ) : /* @__PURE__ */ jsx301("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
+      ) : /* @__PURE__ */ jsx300("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
     }) })
   }
 );
@@ -60372,7 +60600,7 @@ var WorkflowTimeline = ({
   onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ jsx301(WorkflowRailSkeleton, { rows: loadingRows });
+    return /* @__PURE__ */ jsx300(WorkflowRailSkeleton, { rows: loadingRows });
   }
   const isEmpty2 = steps.length === 0;
   const tallyEntries = [
@@ -60381,19 +60609,19 @@ var WorkflowTimeline = ({
     { count: tallies.flagged, label: labels.flagged },
     { count: tallies.remaining, label: labels.remaining }
   ].filter((entry) => entry.count > 0);
-  return /* @__PURE__ */ jsxs183("div", { className: "flex flex-col", children: [
-    !isEmpty2 && /* @__PURE__ */ jsxs183("div", { className: classNames112("border-b px-5 pb-4 pt-5", surfaces.border), children: [
-      /* @__PURE__ */ jsxs183("div", { className: "flex items-baseline justify-between gap-3", children: [
-        /* @__PURE__ */ jsx301(SectionTitle, { surfaces, children: labels.progress }),
-        /* @__PURE__ */ jsxs183("span", { className: "text-sm font-semibold text-neutral-900 dark:text-white", children: [
+  return /* @__PURE__ */ jsxs182("div", { className: "flex flex-col", children: [
+    !isEmpty2 && /* @__PURE__ */ jsxs182("div", { className: classNames111("border-b px-5 pb-4 pt-5", surfaces.border), children: [
+      /* @__PURE__ */ jsxs182("div", { className: "flex items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ jsx300(SectionTitle, { surfaces, children: labels.progress }),
+        /* @__PURE__ */ jsxs182("span", { className: "text-sm font-semibold text-neutral-900 dark:text-white", children: [
           progress,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx301(
+      /* @__PURE__ */ jsx300(
         Progress_default,
         {
-          className: classNames112(
+          className: classNames111(
             "mt-2",
             surfaces.translucent ? "bg-white/40 dark:bg-white/15" : "bg-neutral-200 dark:bg-neutral-700"
           ),
@@ -60403,8 +60631,8 @@ var WorkflowTimeline = ({
           motion: "none"
         }
       ),
-      tallyEntries.length > 0 && /* @__PURE__ */ jsx301("div", { className: "mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: tallyEntries.map((entry, index) => /* @__PURE__ */ jsxs183(React87.Fragment, { children: [
-        index > 0 && /* @__PURE__ */ jsx301(
+      tallyEntries.length > 0 && /* @__PURE__ */ jsx300("div", { className: "mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: tallyEntries.map((entry, index) => /* @__PURE__ */ jsxs182(React87.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsx300(
           "span",
           {
             "aria-hidden": "true",
@@ -60412,7 +60640,7 @@ var WorkflowTimeline = ({
             children: "\xB7"
           }
         ),
-        /* @__PURE__ */ jsx301(
+        /* @__PURE__ */ jsx300(
           Tally,
           {
             count: entry.count,
@@ -60422,7 +60650,7 @@ var WorkflowTimeline = ({
         )
       ] }, entry.label)) })
     ] }),
-    /* @__PURE__ */ jsx301("div", { className: classNames112(isEmpty2 ? "" : "px-5 py-5"), children: isEmpty2 ? emptyState ?? /* @__PURE__ */ jsx301(
+    /* @__PURE__ */ jsx300("div", { className: classNames111(isEmpty2 ? "" : "px-5 py-5"), children: isEmpty2 ? emptyState ?? /* @__PURE__ */ jsx300(
       WorkflowPlaceholder,
       {
         title: labels.empty,
@@ -60430,14 +60658,14 @@ var WorkflowTimeline = ({
         palette,
         surfaces
       }
-    ) : /* @__PURE__ */ jsx301("ol", { className: "m-0 list-none p-0", children: steps.map((step, index) => {
+    ) : /* @__PURE__ */ jsx300("ol", { className: "m-0 list-none p-0", children: steps.map((step, index) => {
       const status = normalizeStatus(step.status);
       const tokens = getStatusTokens(status, palette);
       const isActive = step.id === activeStepId;
       const isLast = index === steps.length - 1;
       const nested = isActive && step.subSteps && step.subSteps.length > 0 ? step.subSteps : void 0;
-      const rowContent = /* @__PURE__ */ jsxs183(Fragment46, { children: [
-        /* @__PURE__ */ jsx301(
+      const rowContent = /* @__PURE__ */ jsxs182(Fragment46, { children: [
+        /* @__PURE__ */ jsx300(
           WorkflowStatusNode_default,
           {
             status,
@@ -60445,19 +60673,19 @@ var WorkflowTimeline = ({
             className: "mt-0.5"
           }
         ),
-        /* @__PURE__ */ jsxs183("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs183("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx301(
+        /* @__PURE__ */ jsxs182("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs182("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx300(
               "span",
               {
-                className: classNames112(
+                className: classNames111(
                   "text-sm",
                   isActive ? "font-semibold text-neutral-900 dark:text-white" : "font-medium text-neutral-700 dark:text-neutral-200"
                 ),
                 children: step.label
               }
             ),
-            step.badge && /* @__PURE__ */ jsx301(
+            step.badge && /* @__PURE__ */ jsx300(
               WorkflowBadge,
               {
                 status,
@@ -60467,10 +60695,10 @@ var WorkflowTimeline = ({
               }
             )
           ] }),
-          step.meta && /* @__PURE__ */ jsx301(
+          step.meta && /* @__PURE__ */ jsx300(
             "p",
             {
-              className: classNames112(
+              className: classNames111(
                 "mt-1 text-xs leading-5",
                 surfaces.mutedText
               ),
@@ -60479,24 +60707,24 @@ var WorkflowTimeline = ({
           )
         ] })
       ] });
-      return /* @__PURE__ */ jsxs183(
+      return /* @__PURE__ */ jsxs182(
         "li",
         {
-          className: classNames112("relative", !isLast && "pb-5"),
+          className: classNames111("relative", !isLast && "pb-5"),
           "aria-current": isActive ? "step" : void 0,
           children: [
-            !isLast && /* @__PURE__ */ jsx301(
+            !isLast && /* @__PURE__ */ jsx300(
               "span",
               {
                 "aria-hidden": "true",
-                className: classNames112(
+                className: classNames111(
                   "absolute bottom-0",
                   tokens.connectorDashed ? `border-l-2 border-dashed ${tokens.connector}` : `w-0.5 rounded-full ${tokens.connector}`
                 ),
                 style: { left: CONNECTOR_LEFT, top: CONNECTOR_TOP }
               }
             ),
-            onStepSelect ? /* @__PURE__ */ jsx301(
+            onStepSelect ? /* @__PURE__ */ jsx300(
               "button",
               {
                 type: "button",
@@ -60504,8 +60732,8 @@ var WorkflowTimeline = ({
                 className: "flex w-full items-start gap-3 rounded-sm text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 dark:focus-visible:ring-neutral-500",
                 children: rowContent
               }
-            ) : /* @__PURE__ */ jsx301("div", { className: "flex items-start gap-3", children: rowContent }),
-            /* @__PURE__ */ jsx301(
+            ) : /* @__PURE__ */ jsx300("div", { className: "flex items-start gap-3", children: rowContent }),
+            /* @__PURE__ */ jsx300(
               WorkflowQuickActions_default,
               {
                 stepId: step.id,
@@ -60516,7 +60744,7 @@ var WorkflowTimeline = ({
                 className: "ml-8 mt-2"
               }
             ),
-            nested && /* @__PURE__ */ jsx301(
+            nested && /* @__PURE__ */ jsx300(
               NestedSubSteps,
               {
                 stepId: step.id,
@@ -60531,8 +60759,8 @@ var WorkflowTimeline = ({
         step.id
       );
     }) }) }),
-    showLegend && !isEmpty2 && /* @__PURE__ */ jsx301("div", { className: classNames112("mt-auto border-t px-5 py-4", surfaces.border), children: /* @__PURE__ */ jsx301("ul", { className: "flex flex-wrap gap-x-4 gap-y-2", children: LEGEND_ORDER.map((status) => /* @__PURE__ */ jsxs183("li", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx301(
+    showLegend && !isEmpty2 && /* @__PURE__ */ jsx300("div", { className: classNames111("mt-auto border-t px-5 py-4", surfaces.border), children: /* @__PURE__ */ jsx300("ul", { className: "flex flex-wrap gap-x-4 gap-y-2", children: LEGEND_ORDER.map((status) => /* @__PURE__ */ jsxs182("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx300(
         WorkflowStatusNode_default,
         {
           status,
@@ -60540,7 +60768,7 @@ var WorkflowTimeline = ({
           size: "sm"
         }
       ),
-      /* @__PURE__ */ jsx301("span", { className: classNames112("text-xs", surfaces.mutedText), children: labels.statuses[status] })
+      /* @__PURE__ */ jsx300("span", { className: classNames111("text-xs", surfaces.mutedText), children: labels.statuses[status] })
     ] }, status)) }) })
   ] });
 };
@@ -60701,7 +60929,7 @@ var resolveActiveStep = (steps, activeStepId) => {
 };
 
 // src/components/WorkflowTracker/sampleWorkflow.tsx
-import { jsx as jsx302, jsxs as jsxs184 } from "react/jsx-runtime";
+import { jsx as jsx301, jsxs as jsxs183 } from "react/jsx-runtime";
 var sampleWorkflow = {
   eyebrow: "VENDOR ONBOARDING \xB7 REQ-4128",
   title: "Northwind Logistics GmbH",
@@ -60746,9 +60974,9 @@ var sampleWorkflow = {
       status: "attention",
       badge: "Needs attention",
       meta: "1h 06m \xB7 Liability certificate expired 12 Aug",
-      details: /* @__PURE__ */ jsxs184("div", { className: "space-y-3 px-5 py-4 sm:px-6", children: [
-        /* @__PURE__ */ jsx302("p", { className: "text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: "The liability certificate expired on 12 Aug. A reminder went to the vendor\u2019s compliance contact; the underwriter quote is still pending." }),
-        /* @__PURE__ */ jsx302("ul", { className: "flex flex-wrap gap-2", children: ["reminder-12-aug.pdf", "underwriter-quote.pdf"].map((file) => /* @__PURE__ */ jsx302(
+      details: /* @__PURE__ */ jsxs183("div", { className: "space-y-3 px-5 py-4 sm:px-6", children: [
+        /* @__PURE__ */ jsx301("p", { className: "text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: "The liability certificate expired on 12 Aug. A reminder went to the vendor\u2019s compliance contact; the underwriter quote is still pending." }),
+        /* @__PURE__ */ jsx301("ul", { className: "flex flex-wrap gap-2", children: ["reminder-12-aug.pdf", "underwriter-quote.pdf"].map((file) => /* @__PURE__ */ jsx301(
           "li",
           {
             className: "rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-700 dark:text-neutral-400",
@@ -60779,18 +61007,18 @@ var sampleWorkflow = {
       owner: "D. Okafor",
       startedAt: "19 Aug \xB7 09:12",
       sla: "Due in 6h",
-      details: /* @__PURE__ */ jsxs184("div", { className: "space-y-5 px-5 py-4 sm:px-6", children: [
-        /* @__PURE__ */ jsxs184("div", { children: [
-          /* @__PURE__ */ jsx302("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Review activity" }),
-          /* @__PURE__ */ jsx302("p", { className: "mt-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: "Reviewer A. Lindqvist is cross-checking the subprocessor list against the master agreement. Uploads appear here as the vendor submits them." })
+      details: /* @__PURE__ */ jsxs183("div", { className: "space-y-5 px-5 py-4 sm:px-6", children: [
+        /* @__PURE__ */ jsxs183("div", { children: [
+          /* @__PURE__ */ jsx301("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Review activity" }),
+          /* @__PURE__ */ jsx301("p", { className: "mt-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: "Reviewer A. Lindqvist is cross-checking the subprocessor list against the master agreement. Uploads appear here as the vendor submits them." })
         ] }),
-        /* @__PURE__ */ jsxs184("div", { children: [
-          /* @__PURE__ */ jsx302("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Files received" }),
-          /* @__PURE__ */ jsx302("ul", { className: "mt-2 flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsxs183("div", { children: [
+          /* @__PURE__ */ jsx301("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Files received" }),
+          /* @__PURE__ */ jsx301("ul", { className: "mt-2 flex flex-wrap gap-2", children: [
             "data-handling-v3.pdf",
             "pentest-2026.pdf",
             "soc2-typeii.pdf"
-          ].map((file) => /* @__PURE__ */ jsx302(
+          ].map((file) => /* @__PURE__ */ jsx301(
             "li",
             {
               className: "rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-700 dark:text-neutral-400",
@@ -60799,11 +61027,11 @@ var sampleWorkflow = {
             file
           )) })
         ] }),
-        /* @__PURE__ */ jsxs184("div", { children: [
-          /* @__PURE__ */ jsx302("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Open findings" }),
-          /* @__PURE__ */ jsxs184("ul", { className: "mt-2 space-y-2", children: [
-            /* @__PURE__ */ jsxs184("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
-              /* @__PURE__ */ jsx302(
+        /* @__PURE__ */ jsxs183("div", { children: [
+          /* @__PURE__ */ jsx301("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Open findings" }),
+          /* @__PURE__ */ jsxs183("ul", { className: "mt-2 space-y-2", children: [
+            /* @__PURE__ */ jsxs183("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx301(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -60812,8 +61040,8 @@ var sampleWorkflow = {
               ),
               "Subprocessor \u201CCloudDot BV\u201D is not covered by the DPA yet"
             ] }),
-            /* @__PURE__ */ jsxs184("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
-              /* @__PURE__ */ jsx302(
+            /* @__PURE__ */ jsxs183("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx301(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -60891,7 +61119,7 @@ var sampleWorkflow = {
 };
 
 // src/components/WorkflowTracker/WorkflowTrackerRail.tsx
-import { jsx as jsx303 } from "react/jsx-runtime";
+import { jsx as jsx302 } from "react/jsx-runtime";
 var WorkflowTrackerRail = ({
   data = sampleWorkflow,
   loading = false,
@@ -60918,14 +61146,14 @@ var WorkflowTrackerRail = ({
   );
   const progress = useMemo52(() => computeProgress(steps), [steps]);
   const tallies = useMemo52(() => computeTallies(steps), [steps]);
-  return /* @__PURE__ */ jsx303(
+  return /* @__PURE__ */ jsx302(
     Panel_default,
     {
       ...cardProps,
       scrollable: cardScrollable ?? false,
-      className: classNames113(className, cardClassName),
+      className: classNames112(className, cardClassName),
       style,
-      children: /* @__PURE__ */ jsx303(
+      children: /* @__PURE__ */ jsx302(
         WorkflowTimeline_default,
         {
           steps,
@@ -60951,11 +61179,11 @@ var WorkflowTrackerRail_default = WorkflowTrackerRail;
 
 // src/components/WorkflowTracker/WorkflowTrackerStepDetails.tsx
 import { useMemo as useMemo53 } from "react";
-import classNames115 from "classnames";
+import classNames114 from "classnames";
 
 // src/components/WorkflowTracker/WorkflowDetailPanel.tsx
-import classNames114 from "classnames";
-import { Fragment as Fragment47, jsx as jsx304, jsxs as jsxs185 } from "react/jsx-runtime";
+import classNames113 from "classnames";
+import { Fragment as Fragment47, jsx as jsx303, jsxs as jsxs184 } from "react/jsx-runtime";
 var WorkflowDetailPanel = ({
   active,
   totalSteps,
@@ -60967,10 +61195,10 @@ var WorkflowDetailPanel = ({
   onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ jsx304(WorkflowDetailSkeleton, {});
+    return /* @__PURE__ */ jsx303(WorkflowDetailSkeleton, {});
   }
   if (!active) {
-    return /* @__PURE__ */ jsx304(
+    return /* @__PURE__ */ jsx303(
       WorkflowPlaceholder,
       {
         title: labels.noActiveStep,
@@ -60988,11 +61216,11 @@ var WorkflowDetailPanel = ({
     step.startedAt ? { label: labels.started, value: step.startedAt } : void 0,
     step.sla ? { label: labels.sla, value: step.sla } : void 0
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxs185("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs185("div", { className: "px-5 pb-6 pt-5 sm:px-6", children: [
-      /* @__PURE__ */ jsxs185("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
-        /* @__PURE__ */ jsxs185("div", { className: "flex flex-wrap items-center gap-3", children: [
-          /* @__PURE__ */ jsxs185(SectionTitle, { surfaces, children: [
+  return /* @__PURE__ */ jsxs184("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs184("div", { className: "px-5 pb-6 pt-5 sm:px-6", children: [
+      /* @__PURE__ */ jsxs184("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
+        /* @__PURE__ */ jsxs184("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs184(SectionTitle, { surfaces, children: [
             labels.step,
             " ",
             index,
@@ -61001,7 +61229,7 @@ var WorkflowDetailPanel = ({
             " ",
             totalSteps
           ] }),
-          step.badge && /* @__PURE__ */ jsx304(
+          step.badge && /* @__PURE__ */ jsx303(
             WorkflowBadge,
             {
               status,
@@ -61011,13 +61239,13 @@ var WorkflowDetailPanel = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs185("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2", children: [
-          step.elapsed && /* @__PURE__ */ jsxs185(SectionMeta, { surfaces, children: [
+        /* @__PURE__ */ jsxs184("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2", children: [
+          step.elapsed && /* @__PURE__ */ jsxs184(SectionMeta, { surfaces, children: [
             labels.elapsed,
             " ",
             step.elapsed
           ] }),
-          /* @__PURE__ */ jsx304(
+          /* @__PURE__ */ jsx303(
             WorkflowQuickActions_default,
             {
               stepId: step.id,
@@ -61029,18 +61257,18 @@ var WorkflowDetailPanel = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx304("h3", { className: "mt-3 text-xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-2xl", children: step.label }),
-      step.description && /* @__PURE__ */ jsx304(
+      /* @__PURE__ */ jsx303("h3", { className: "mt-3 text-xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-2xl", children: step.label }),
+      step.description && /* @__PURE__ */ jsx303(
         "p",
         {
-          className: classNames114(
+          className: classNames113(
             "mt-2 max-w-3xl text-sm leading-6",
             surfaces.mutedText
           ),
           children: step.description
         }
       ),
-      metaFields.length > 0 && /* @__PURE__ */ jsx304("div", { className: "mt-5 flex flex-wrap gap-x-10 gap-y-4", children: metaFields.map((field) => /* @__PURE__ */ jsx304(
+      metaFields.length > 0 && /* @__PURE__ */ jsx303("div", { className: "mt-5 flex flex-wrap gap-x-10 gap-y-4", children: metaFields.map((field) => /* @__PURE__ */ jsx303(
         MetaField,
         {
           label: field.label,
@@ -61050,18 +61278,18 @@ var WorkflowDetailPanel = ({
         field.label
       )) })
     ] }),
-    subSteps.length > 0 && /* @__PURE__ */ jsxs185(Fragment47, { children: [
-      /* @__PURE__ */ jsxs185(
+    subSteps.length > 0 && /* @__PURE__ */ jsxs184(Fragment47, { children: [
+      /* @__PURE__ */ jsxs184(
         "div",
         {
-          className: classNames114(
+          className: classNames113(
             "flex flex-wrap items-center justify-between gap-2 border-y px-5 py-2.5 sm:px-6",
             surfaces.border,
             surfaces.strip
           ),
           children: [
-            /* @__PURE__ */ jsx304(SectionTitle, { surfaces, children: labels.subSteps }),
-            /* @__PURE__ */ jsxs185(SectionMeta, { surfaces, children: [
+            /* @__PURE__ */ jsx303(SectionTitle, { surfaces, children: labels.subSteps }),
+            /* @__PURE__ */ jsxs184(SectionMeta, { surfaces, children: [
               summary.accepted,
               " ",
               labels.accepted,
@@ -61077,24 +61305,24 @@ var WorkflowDetailPanel = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx304(
+      /* @__PURE__ */ jsx303(
         "ul",
         {
-          className: classNames114(
+          className: classNames113(
             "m-0 list-none divide-y p-0",
             surfaces.divider
           ),
           children: subSteps.map((subStep) => {
             const subStatus = normalizeStatus(subStep.status);
             const isRunning = subStatus === "running";
-            const rowContent = /* @__PURE__ */ jsxs185(Fragment47, { children: [
-              /* @__PURE__ */ jsx304(WorkflowStatusNode_default, { status: subStatus, palette }),
-              /* @__PURE__ */ jsxs185("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx304("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: subStep.label }),
-                subStep.note && /* @__PURE__ */ jsx304(
+            const rowContent = /* @__PURE__ */ jsxs184(Fragment47, { children: [
+              /* @__PURE__ */ jsx303(WorkflowStatusNode_default, { status: subStatus, palette }),
+              /* @__PURE__ */ jsxs184("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx303("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: subStep.label }),
+                subStep.note && /* @__PURE__ */ jsx303(
                   "p",
                   {
-                    className: classNames114(
+                    className: classNames113(
                       "mt-0.5 text-xs leading-5",
                       surfaces.mutedText
                     ),
@@ -61102,7 +61330,7 @@ var WorkflowDetailPanel = ({
                   }
                 )
               ] }),
-              subStep.badge && /* @__PURE__ */ jsx304(
+              subStep.badge && /* @__PURE__ */ jsx303(
                 WorkflowBadge,
                 {
                   status: subStatus,
@@ -61111,10 +61339,10 @@ var WorkflowDetailPanel = ({
                   children: subStep.badge
                 }
               ),
-              /* @__PURE__ */ jsx304(
+              /* @__PURE__ */ jsx303(
                 "span",
                 {
-                  className: classNames114(
+                  className: classNames113(
                     "w-10 shrink-0 text-right text-xs tabular-nums",
                     surfaces.faintText
                   ),
@@ -61122,22 +61350,22 @@ var WorkflowDetailPanel = ({
                 }
               )
             ] });
-            const rowClasses = classNames114(
+            const rowClasses = classNames113(
               "flex w-full items-center gap-3 px-5 py-3 text-left sm:px-6",
               isRunning && getRowHighlight(palette.accent, surfaces.translucent)
             );
-            return /* @__PURE__ */ jsx304("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx304(
+            return /* @__PURE__ */ jsx303("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx303(
               "button",
               {
                 type: "button",
                 onClick: () => onSubStepSelect(step.id, subStep.id),
-                className: classNames114(
+                className: classNames113(
                   rowClasses,
                   "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-500"
                 ),
                 children: rowContent
               }
-            ) : /* @__PURE__ */ jsx304("div", { className: rowClasses, children: rowContent }) }, subStep.id);
+            ) : /* @__PURE__ */ jsx303("div", { className: rowClasses, children: rowContent }) }, subStep.id);
           })
         }
       )
@@ -61147,7 +61375,7 @@ var WorkflowDetailPanel = ({
 var WorkflowDetailPanel_default = WorkflowDetailPanel;
 
 // src/components/WorkflowTracker/WorkflowTrackerStepDetails.tsx
-import { jsx as jsx305 } from "react/jsx-runtime";
+import { jsx as jsx304 } from "react/jsx-runtime";
 var WorkflowTrackerStepDetails = ({
   data = sampleWorkflow,
   loading = false,
@@ -61170,13 +61398,13 @@ var WorkflowTrackerStepDetails = ({
     () => resolveActiveStep(steps, data?.activeStepId),
     [steps, data?.activeStepId]
   );
-  return /* @__PURE__ */ jsx305(
+  return /* @__PURE__ */ jsx304(
     Panel_default,
     {
       ...cardProps,
-      className: classNames115(className, cardClassName),
+      className: classNames114(className, cardClassName),
       style,
-      children: /* @__PURE__ */ jsx305(
+      children: /* @__PURE__ */ jsx304(
         WorkflowDetailPanel_default,
         {
           active,
@@ -61196,31 +61424,31 @@ var WorkflowTrackerStepDetails_default = WorkflowTrackerStepDetails;
 
 // src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
 import { useMemo as useMemo54 } from "react";
-import classNames117 from "classnames";
+import classNames116 from "classnames";
 
 // src/components/WorkflowTracker/WorkflowDetailsCard.tsx
-import classNames116 from "classnames";
-import { jsx as jsx306 } from "react/jsx-runtime";
+import classNames115 from "classnames";
+import { jsx as jsx305 } from "react/jsx-runtime";
 var WorkflowDetailsCard = ({
   details,
   ariaLabel,
   cardProps,
   className,
   style
-}) => /* @__PURE__ */ jsx306(
+}) => /* @__PURE__ */ jsx305(
   Panel_default,
   {
     ...cardProps,
     flexBody: true,
-    className: classNames116("flex-1", className),
+    className: classNames115("flex-1", className),
     style,
-    children: /* @__PURE__ */ jsx306(ScrollArea_default, { className: "h-full", mask: true, role: "region", "aria-label": ariaLabel, children: details })
+    children: /* @__PURE__ */ jsx305(ScrollArea_default, { className: "h-full", mask: true, role: "region", "aria-label": ariaLabel, children: details })
   }
 );
 var WorkflowDetailsCard_default = WorkflowDetailsCard;
 
 // src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
-import { jsx as jsx307 } from "react/jsx-runtime";
+import { jsx as jsx306 } from "react/jsx-runtime";
 var WorkflowTrackerDetails = ({
   data = sampleWorkflow,
   loading = false,
@@ -61239,21 +61467,110 @@ var WorkflowTrackerDetails = ({
   );
   const details = active?.step.details;
   if (loading || details == null || details === "") return null;
-  return /* @__PURE__ */ jsx307(
+  return /* @__PURE__ */ jsx306(
     WorkflowDetailsCard_default,
     {
       details,
       ariaLabel: labels.details,
       cardProps,
-      className: classNames117(className, cardClassName),
+      className: classNames116(className, cardClassName),
       style
     }
   );
 };
 var WorkflowTrackerDetails_default = WorkflowTrackerDetails;
 
-// src/components/WorkflowTracker/WorkflowTracker.tsx
+// src/components/WorkflowTracker/WorkflowTrackerRollups.tsx
+import { useMemo as useMemo55 } from "react";
+import classNames118 from "classnames";
+
+// src/components/WorkflowTracker/WorkflowSummaryCard.tsx
+import classNames117 from "classnames";
+import { jsx as jsx307, jsxs as jsxs185 } from "react/jsx-runtime";
+var WorkflowSummaryCard = ({
+  title,
+  steps,
+  palette,
+  surfaces
+}) => /* @__PURE__ */ jsxs185("div", { className: "px-5 py-4", children: [
+  /* @__PURE__ */ jsx307(SectionTitle, { surfaces, children: title }),
+  /* @__PURE__ */ jsx307("ul", { className: "mt-3 space-y-3", children: steps.map((step) => /* @__PURE__ */ jsxs185("li", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx307(
+      WorkflowStatusNode_default,
+      {
+        status: normalizeStatus(step.status),
+        palette,
+        className: "mt-0.5"
+      }
+    ),
+    /* @__PURE__ */ jsxs185("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx307("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: step.label }),
+      step.meta && /* @__PURE__ */ jsx307(
+        "p",
+        {
+          className: classNames117(
+            "mt-0.5 text-xs leading-5",
+            surfaces.mutedText
+          ),
+          children: step.meta
+        }
+      )
+    ] })
+  ] }, step.id)) })
+] });
+var WorkflowSummaryCard_default = WorkflowSummaryCard;
+
+// src/components/WorkflowTracker/WorkflowTrackerRollups.tsx
 import { jsx as jsx308, jsxs as jsxs186 } from "react/jsx-runtime";
+var WorkflowTrackerRollups = ({
+  data = sampleWorkflow,
+  loading = false,
+  labels: labelOverrides,
+  className,
+  style,
+  ...styleProps
+}) => {
+  const steps = data?.steps ?? [];
+  const { palette, surfaces } = useWorkflowChrome(styleProps);
+  const labels = useMemo55(() => resolveLabels(labelOverrides), [labelOverrides]);
+  const cardProps = buildCardProps(styleProps);
+  const attentionSteps = useMemo55(() => getAttentionSteps(steps), [steps]);
+  const skippedSteps = useMemo55(() => getSkippedSteps(steps), [steps]);
+  if (loading || attentionSteps.length === 0 && skippedSteps.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs186(
+    "div",
+    {
+      className: classNames118("grid grid-cols-1 gap-5 @xl:grid-cols-2", className),
+      style,
+      children: [
+        attentionSteps.length > 0 && /* @__PURE__ */ jsx308(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx308(
+          WorkflowSummaryCard_default,
+          {
+            title: labels.needsAttention,
+            steps: attentionSteps,
+            palette,
+            surfaces
+          }
+        ) }),
+        skippedSteps.length > 0 && /* @__PURE__ */ jsx308(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx308(
+          WorkflowSummaryCard_default,
+          {
+            title: labels.skippedSteps,
+            steps: skippedSteps,
+            palette,
+            surfaces
+          }
+        ) })
+      ]
+    }
+  );
+};
+var WorkflowTrackerRollups_default = WorkflowTrackerRollups;
+
+// src/components/WorkflowTracker/WorkflowTracker.tsx
+import { jsx as jsx309, jsxs as jsxs187 } from "react/jsx-runtime";
 var WorkflowTracker = ({
   data = sampleWorkflow,
   accentColor = "blue",
@@ -61287,7 +61604,6 @@ var WorkflowTracker = ({
   style,
   ...rest
 }) => {
-  const steps = data?.steps ?? [];
   const styleProps = {
     accentColor,
     attentionColor,
@@ -61302,38 +61618,35 @@ var WorkflowTracker = ({
     padding,
     translucentSurfaces
   };
-  const { palette, surfaces } = useWorkflowChrome(styleProps);
-  const labels = useMemo55(() => resolveLabels(labelOverrides), [labelOverrides]);
-  const cardProps = buildCardProps(styleProps);
-  const attentionSteps = useMemo55(() => getAttentionSteps(steps), [steps]);
-  const skippedSteps = useMemo55(() => getSkippedSteps(steps), [steps]);
+  const { surfaces } = useWorkflowChrome(styleProps);
+  const labels = useMemo56(() => resolveLabels(labelOverrides), [labelOverrides]);
   const railStyle = {
     "--wt-rail-width": typeof railWidth === "number" ? `${railWidth}px` : railWidth,
     "--wt-fill-offset": typeof fillHeightOffset === "number" ? `${fillHeightOffset}px` : fillHeightOffset
   };
-  return /* @__PURE__ */ jsxs186(
+  return /* @__PURE__ */ jsxs187(
     "div",
     {
-      className: classNames118("@container w-full", className),
+      className: classNames119("@container w-full", className),
       style: { maxWidth, ...railStyle, ...style },
       "aria-busy": loading || void 0,
       ...rest,
       children: [
-        showHeader && loading && /* @__PURE__ */ jsx308(
+        showHeader && loading && /* @__PURE__ */ jsx309(
           WorkflowHeaderSkeleton,
           {
             hasIcon: Boolean(data?.icon),
             iconCorner
           }
         ),
-        showHeader && !loading && /* @__PURE__ */ jsxs186("header", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs186("div", { className: "flex min-w-0 items-center gap-3", children: [
+        showHeader && !loading && /* @__PURE__ */ jsxs187("header", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs187("div", { className: "flex min-w-0 items-center gap-3", children: [
             data?.icon && // `overflow-hidden` plus the shared corner class clips whatever
             // the caller passes, so an <img> needs no rounding of its own.
-            /* @__PURE__ */ jsx308(
+            /* @__PURE__ */ jsx309(
               "span",
               {
-                className: classNames118(
+                className: classNames119(
                   "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
                   getSurfaceCornerClass(iconCorner),
                   surfaces.chip
@@ -61341,33 +61654,33 @@ var WorkflowTracker = ({
                 children: data.icon
               }
             ),
-            /* @__PURE__ */ jsxs186("div", { className: "min-w-0", children: [
-              data?.eyebrow && /* @__PURE__ */ jsx308(
+            /* @__PURE__ */ jsxs187("div", { className: "min-w-0", children: [
+              data?.eyebrow && /* @__PURE__ */ jsx309(
                 "p",
                 {
-                  className: classNames118(
+                  className: classNames119(
                     "text-[11px] font-semibold uppercase tracking-widest",
                     surfaces.faintText
                   ),
                   children: data.eyebrow
                 }
               ),
-              /* @__PURE__ */ jsx308("h2", { className: "mt-1 text-2xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-3xl", children: data?.title })
+              /* @__PURE__ */ jsx309("h2", { className: "mt-1 text-2xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-3xl", children: data?.title })
             ] })
           ] }),
-          data?.live && /* @__PURE__ */ jsxs186(
+          data?.live && /* @__PURE__ */ jsxs187(
             Pill_default,
             {
               size: "md",
               tone: mutedColor,
               variant: "outline",
-              className: classNames118("tracking-wide", surfaces.chip),
+              className: classNames119("tracking-wide", surfaces.chip),
               children: [
-                /* @__PURE__ */ jsx308(
+                /* @__PURE__ */ jsx309(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: classNames118(
+                    className: classNames119(
                       "mr-2 inline-block h-1.5 w-1.5 rounded-full",
                       `bg-${accentColor}-500 dark:bg-${accentColor}-400`
                     )
@@ -61378,15 +61691,15 @@ var WorkflowTracker = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs186(
+        /* @__PURE__ */ jsxs187(
           "div",
           {
-            className: classNames118(
+            className: classNames119(
               "grid grid-cols-1 items-start gap-5 @4xl:grid-cols-[var(--wt-rail-width)_minmax(0,1fr)]",
               fillHeight && "@4xl:h-[calc(100dvh-var(--wt-fill-offset))]"
             ),
             children: [
-              /* @__PURE__ */ jsx308(
+              /* @__PURE__ */ jsx309(
                 WorkflowTrackerRail_default,
                 {
                   ...styleProps,
@@ -61397,7 +61710,7 @@ var WorkflowTracker = ({
                   emptyState,
                   labels: labelOverrides,
                   cardScrollable: fillHeight,
-                  cardClassName: classNames118(
+                  cardClassName: classNames119(
                     stickyRail && !fillHeight && "@4xl:sticky @4xl:top-6",
                     fillHeight && "@4xl:min-h-0 @4xl:self-stretch"
                   ),
@@ -61406,15 +61719,15 @@ var WorkflowTracker = ({
                   onStepAction
                 }
               ),
-              /* @__PURE__ */ jsxs186(
+              /* @__PURE__ */ jsxs187(
                 "div",
                 {
-                  className: classNames118(
+                  className: classNames119(
                     "@container flex min-w-0 flex-col gap-5",
                     fillHeight && "@4xl:min-h-0 @4xl:self-stretch"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx308(
+                    /* @__PURE__ */ jsx309(
                       WorkflowTrackerStepDetails_default,
                       {
                         ...styleProps,
@@ -61425,7 +61738,7 @@ var WorkflowTracker = ({
                         onStepAction
                       }
                     ),
-                    /* @__PURE__ */ jsx308(
+                    /* @__PURE__ */ jsx309(
                       WorkflowTrackerDetails_default,
                       {
                         ...styleProps,
@@ -61434,26 +61747,15 @@ var WorkflowTracker = ({
                         labels: labelOverrides
                       }
                     ),
-                    !loading && (attentionSteps.length > 0 || skippedSteps.length > 0) && /* @__PURE__ */ jsxs186("div", { className: "grid grid-cols-1 gap-5 @xl:grid-cols-2", children: [
-                      attentionSteps.length > 0 && /* @__PURE__ */ jsx308(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx308(
-                        WorkflowSummaryCard_default,
-                        {
-                          title: labels.needsAttention,
-                          steps: attentionSteps,
-                          palette,
-                          surfaces
-                        }
-                      ) }),
-                      skippedSteps.length > 0 && /* @__PURE__ */ jsx308(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx308(
-                        WorkflowSummaryCard_default,
-                        {
-                          title: labels.skippedSteps,
-                          steps: skippedSteps,
-                          palette,
-                          surfaces
-                        }
-                      ) })
-                    ] })
+                    /* @__PURE__ */ jsx309(
+                      WorkflowTrackerRollups_default,
+                      {
+                        ...styleProps,
+                        data,
+                        loading,
+                        labels: labelOverrides
+                      }
+                    )
                   ]
                 }
               )
@@ -61467,9 +61769,9 @@ var WorkflowTracker = ({
 var WorkflowTracker_default = WorkflowTracker;
 
 // src/components/Gantt/Gantt.tsx
-import { useCallback as useCallback42, useEffect as useEffect71, useMemo as useMemo59, useRef as useRef68, useState as useState79 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect71, useMemo as useMemo60, useRef as useRef68, useState as useState79 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
-import classNames122 from "classnames";
+import classNames123 from "classnames";
 
 // ../common/gantt/types.ts
 var GANTT_ZOOM_PRESETS = [
@@ -62815,38 +63117,38 @@ var sampleGantt = {
 };
 
 // src/components/Gantt/GanttScale.tsx
-import classNames119 from "classnames";
-import { jsx as jsx309, jsxs as jsxs187 } from "react/jsx-runtime";
+import classNames120 from "classnames";
+import { jsx as jsx310, jsxs as jsxs188 } from "react/jsx-runtime";
 var GanttScale = ({ levels, height }) => {
   if (levels.length === 0) {
-    return /* @__PURE__ */ jsx309("div", { style: { height } });
+    return /* @__PURE__ */ jsx310("div", { style: { height } });
   }
   const coarseHeight = levels.length > 1 ? 24 : height;
-  return /* @__PURE__ */ jsx309("div", { className: "flex h-full w-full flex-col", children: levels.map((level, li) => /* @__PURE__ */ jsx309(
+  return /* @__PURE__ */ jsx310("div", { className: "flex h-full w-full flex-col", children: levels.map((level, li) => /* @__PURE__ */ jsx310(
     "div",
     {
-      className: classNames119("flex w-full", li === 0 ? "shrink-0" : "min-h-0 flex-1"),
+      className: classNames120("flex w-full", li === 0 ? "shrink-0" : "min-h-0 flex-1"),
       style: li === 0 ? { height: coarseHeight } : void 0,
-      children: level.columns.map((col) => /* @__PURE__ */ jsxs187(
+      children: level.columns.map((col) => /* @__PURE__ */ jsxs188(
         "div",
         {
-          className: classNames119(
+          className: classNames120(
             "flex shrink-0 flex-col items-center justify-center overflow-hidden border-r border-neutral-200/70 dark:border-neutral-800/70",
             li === 0 ? "bg-neutral-50/60 dark:bg-neutral-800/40" : "bg-white dark:bg-neutral-900"
           ),
           style: { width: col.width },
           children: [
-            /* @__PURE__ */ jsx309(
+            /* @__PURE__ */ jsx310(
               "span",
               {
-                className: classNames119(
+                className: classNames120(
                   "max-w-full truncate px-1 text-[10px] font-semibold uppercase leading-none tracking-wide",
                   li === 0 ? "text-neutral-700 dark:text-neutral-200" : "text-neutral-500 dark:text-neutral-400"
                 ),
                 children: col.label
               }
             ),
-            col.subLabel != null && /* @__PURE__ */ jsx309("span", { className: "max-w-full truncate px-1 text-[9px] font-medium leading-none text-neutral-400 dark:text-neutral-500", children: col.subLabel })
+            col.subLabel != null && /* @__PURE__ */ jsx310("span", { className: "max-w-full truncate px-1 text-[9px] font-medium leading-none text-neutral-400 dark:text-neutral-500", children: col.subLabel })
           ]
         },
         col.id
@@ -62859,7 +63161,7 @@ GanttScale.displayName = "GanttScale";
 
 // src/components/Gantt/GanttLinkLayer.tsx
 import { forwardRef as forwardRef160, useRef as useRef66 } from "react";
-import { jsx as jsx310, jsxs as jsxs188 } from "react/jsx-runtime";
+import { jsx as jsx311, jsxs as jsxs189 } from "react/jsx-runtime";
 var GanttLinkLayer = forwardRef160(
   function GanttLinkLayer2({
     width,
@@ -62895,24 +63197,24 @@ var GanttLinkLayer = forwardRef160(
       const pick = pickFromEvent(e) ?? clicked;
       if (interactive && onDeleteLink) onDeleteLink(pick.link);
     };
-    return /* @__PURE__ */ jsxs188(
+    return /* @__PURE__ */ jsxs189(
       "div",
       {
         ref,
         className: "pointer-events-none absolute top-0 z-10",
         style: { left: offsetLeft, width, height },
         children: [
-          /* @__PURE__ */ jsxs188("svg", { ref: svgRef, width, height, className: "block overflow-visible", children: [
+          /* @__PURE__ */ jsxs189("svg", { ref: svgRef, width, height, className: "block overflow-visible", children: [
             paths.map((p, i) => {
               const tokens = getGanttLinkTokens(p.color ?? color);
               const sel = selected != null && p.link === selected;
               const nodeR = sel ? 4.5 : 3.5;
-              return /* @__PURE__ */ jsxs188(
+              return /* @__PURE__ */ jsxs189(
                 "g",
                 {
                   style: sel ? { filter: `drop-shadow(0 0 3px var(--color-${p.color ?? color}-500))` } : void 0,
                   children: [
-                    /* @__PURE__ */ jsx310(
+                    /* @__PURE__ */ jsx311(
                       "path",
                       {
                         d: p.d,
@@ -62928,10 +63230,10 @@ var GanttLinkLayer = forwardRef160(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ jsx310("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ jsx311("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    /* @__PURE__ */ jsx310(
+                    /* @__PURE__ */ jsx311(
                       "path",
                       {
                         d: p.d,
@@ -62947,14 +63249,14 @@ var GanttLinkLayer = forwardRef160(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ jsx310("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ jsx311("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    p.arrow && /* @__PURE__ */ jsx310("polygon", { points: p.arrow, className: tokens.fill }),
-                    /* @__PURE__ */ jsx310("circle", { cx: p.from.x, cy: p.from.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ jsx310("circle", { cx: p.from.x, cy: p.from.y, r: nodeR, className: tokens.fill }),
-                    /* @__PURE__ */ jsx310("circle", { cx: p.to.x, cy: p.to.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ jsx310("circle", { cx: p.to.x, cy: p.to.y, r: nodeR, className: tokens.fill })
+                    p.arrow && /* @__PURE__ */ jsx311("polygon", { points: p.arrow, className: tokens.fill }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.from.x, cy: p.from.y, r: nodeR + 2.5, className: tokens.halo }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.from.x, cy: p.from.y, r: nodeR, className: tokens.fill }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.to.x, cy: p.to.y, r: nodeR + 2.5, className: tokens.halo }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.to.x, cy: p.to.y, r: nodeR, className: tokens.fill })
                   ]
                 },
                 `${p.link.source}->${p.link.target}-${p.type}-${i}`
@@ -62962,8 +63264,8 @@ var GanttLinkLayer = forwardRef160(
             }),
             rubber && (() => {
               const tokens = getGanttLinkTokens(rubber.color);
-              return /* @__PURE__ */ jsxs188("g", { children: [
-                /* @__PURE__ */ jsx310(
+              return /* @__PURE__ */ jsxs189("g", { children: [
+                /* @__PURE__ */ jsx311(
                   "path",
                   {
                     d: rubber.d,
@@ -62974,15 +63276,15 @@ var GanttLinkLayer = forwardRef160(
                     strokeDasharray: "5 3"
                   }
                 ),
-                rubber.arrow && /* @__PURE__ */ jsx310("polygon", { points: rubber.arrow, className: tokens.fill }),
-                /* @__PURE__ */ jsx310("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ jsx310("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 3.5, className: tokens.fill }),
-                /* @__PURE__ */ jsx310("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ jsx310("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 3.5, className: tokens.fill })
+                rubber.arrow && /* @__PURE__ */ jsx311("polygon", { points: rubber.arrow, className: tokens.fill }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 6, className: tokens.halo }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 3.5, className: tokens.fill }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 6, className: tokens.halo }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 3.5, className: tokens.fill })
               ] });
             })()
           ] }),
-          canDelete && selMid && /* @__PURE__ */ jsxs188(
+          canDelete && selMid && /* @__PURE__ */ jsxs189(
             "button",
             {
               type: "button",
@@ -63000,7 +63302,7 @@ var GanttLinkLayer = forwardRef160(
               onClick: () => onDeleteLink(selected),
               title: t("kit.gantt.removeDependency"),
               children: [
-                /* @__PURE__ */ jsx310("span", { "aria-hidden": true, children: "\u2715" }),
+                /* @__PURE__ */ jsx311("span", { "aria-hidden": true, children: "\u2715" }),
                 " ",
                 t("kit.gantt.delete")
               ]
@@ -63014,9 +63316,9 @@ var GanttLinkLayer = forwardRef160(
 GanttLinkLayer.displayName = "GanttLinkLayer";
 
 // src/components/Gantt/GanttBodyRow.tsx
-import { useMemo as useMemo56 } from "react";
-import classNames120 from "classnames";
-import { Fragment as Fragment48, jsx as jsx311, jsxs as jsxs189 } from "react/jsx-runtime";
+import { useMemo as useMemo57 } from "react";
+import classNames121 from "classnames";
+import { Fragment as Fragment48, jsx as jsx312, jsxs as jsxs190 } from "react/jsx-runtime";
 var BAR_HEIGHT = 24;
 var MILESTONE_SIZE = 14;
 var GanttBodyRow = ({
@@ -63055,11 +63357,11 @@ var GanttBodyRow = ({
   const t = useKitT();
   const isDraggingThis = row.task != null && drag?.taskId === row.task.id;
   const reorderDragging = isDraggingThis && drag?.kind === "reorder";
-  return /* @__PURE__ */ jsx311(
+  return /* @__PURE__ */ jsx312(
     "div",
     {
       "data-row-key": row.key,
-      className: classNames120(
+      className: classNames121(
         // No overflow here: an overflow-hidden row root would become the
         // sticky halves' (non-scrolling) scrollport and stop them pinning to
         // the left edge while the timeline scrolls. The halves pin the
@@ -63076,7 +63378,7 @@ var GanttBodyRow = ({
           boxShadow: `inset 2px 0 0 var(--color-${color}-500)`
         } : {}
       },
-      children: row.task == null ? /* @__PURE__ */ jsx311(
+      children: row.task == null ? /* @__PURE__ */ jsx312(
         LaneHeader,
         {
           row,
@@ -63087,20 +63389,20 @@ var GanttBodyRow = ({
           dividerClass,
           liveProgress: liveLane
         }
-      ) : /* @__PURE__ */ jsxs189(Fragment48, { children: [
-        /* @__PURE__ */ jsxs189(
+      ) : /* @__PURE__ */ jsxs190(Fragment48, { children: [
+        /* @__PURE__ */ jsxs190(
           "div",
           {
-            className: classNames120(
+            className: classNames121(
               "sticky left-0 z-20 flex items-stretch overflow-hidden border-r border-b bg-white dark:bg-neutral-900",
               dividerClass
             ),
             style: { width: leftWidth },
             children: [
-              /* @__PURE__ */ jsx311("div", { className: "flex w-9 shrink-0 items-center justify-center", children: interactive && !row.task.locked && /* @__PURE__ */ jsx311(
+              /* @__PURE__ */ jsx312("div", { className: "flex w-9 shrink-0 items-center justify-center", children: interactive && !row.task.locked && /* @__PURE__ */ jsx312(
                 "span",
                 {
-                  className: classNames120(
+                  className: classNames121(
                     "flex cursor-grab touch-none items-center text-neutral-300 transition-opacity active:cursor-grabbing dark:text-neutral-600",
                     reorderDragging ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"
                   ),
@@ -63108,10 +63410,10 @@ var GanttBodyRow = ({
                   onPointerDown: (e) => onGripPointerDown(row.key, row.task, e),
                   title: t("kit.gantt.dragReorder"),
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx311(Drag, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ jsx312(Drag, { className: "h-3.5 w-3.5" })
                 }
               ) }),
-              columns.map((col, i) => /* @__PURE__ */ jsx311(
+              columns.map((col, i) => /* @__PURE__ */ jsx312(
                 Cell,
                 {
                   col,
@@ -63132,12 +63434,12 @@ var GanttBodyRow = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx311(
+        /* @__PURE__ */ jsx312(
           "div",
           {
-            className: classNames120("relative shrink-0 border-b", dividerClass),
+            className: classNames121("relative shrink-0 border-b", dividerClass),
             style: { width: timelineWidth },
-            children: /* @__PURE__ */ jsx311(
+            children: /* @__PURE__ */ jsx312(
               TaskBar,
               {
                 task: row.task,
@@ -63178,57 +63480,57 @@ var LaneHeader = ({ row, columns, leftWidth, color, onCaretClick, dividerClass =
   const laneColor = lane.color ?? color;
   const tokens = getGanttLaneTokens(laneColor);
   const isOpen = lane.open !== false;
-  return /* @__PURE__ */ jsxs189(Fragment48, { children: [
-    /* @__PURE__ */ jsxs189(
+  return /* @__PURE__ */ jsxs190(Fragment48, { children: [
+    /* @__PURE__ */ jsxs190(
       "div",
       {
-        className: classNames120(
+        className: classNames121(
           "sticky left-0 z-20 flex items-stretch overflow-hidden border-r border-b bg-white dark:bg-neutral-900",
           dividerClass
         ),
         style: { width: leftWidth },
         children: [
-          /* @__PURE__ */ jsx311("div", { className: classNames120("pointer-events-none absolute inset-0", tokens.band) }),
-          /* @__PURE__ */ jsx311("div", { className: "relative flex w-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx311(
+          /* @__PURE__ */ jsx312("div", { className: classNames121("pointer-events-none absolute inset-0", tokens.band) }),
+          /* @__PURE__ */ jsx312("div", { className: "relative flex w-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx312(
             "button",
             {
               type: "button",
               className: "flex h-5 w-5 shrink-0 items-center justify-center rounded text-neutral-500 hover:bg-white/60 focus-visible:ring-2 focus-visible:ring-neutral-400 dark:text-neutral-400 dark:hover:bg-white/10",
               onClick: () => onCaretClick(lane.id, isOpen),
               "aria-label": t(isOpen ? "kit.gantt.collapse" : "kit.gantt.expand", { name: lane.label }),
-              children: /* @__PURE__ */ jsx311(ChevronRight, { className: classNames120("h-3 w-3 transition-transform", isOpen && "rotate-90") })
+              children: /* @__PURE__ */ jsx312(ChevronRight, { className: classNames121("h-3 w-3 transition-transform", isOpen && "rotate-90") })
             }
           ) }),
-          columns.map((col, i) => /* @__PURE__ */ jsx311(
+          columns.map((col, i) => /* @__PURE__ */ jsx312(
             "div",
             {
-              className: classNames120(
+              className: classNames121(
                 "relative flex shrink-0 items-center gap-2 overflow-hidden border-r px-2 last:border-r-0",
                 dividerClass
               ),
               style: { width: col.width ?? "160px" },
-              children: i === 0 ? /* @__PURE__ */ jsxs189(Fragment48, { children: [
-                /* @__PURE__ */ jsx311("span", { className: classNames120("truncate text-[13px] font-semibold", tokens.label), children: lane.label }),
-                lane.description && /* @__PURE__ */ jsx311("span", { className: "hidden truncate text-[11px] text-neutral-500 dark:text-neutral-400 lg:inline", children: lane.description }),
-                row.childCount > 0 && /* @__PURE__ */ jsx311("span", { className: "shrink-0 rounded-full bg-white/70 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-600 dark:bg-white/10 dark:text-neutral-300", children: row.childCount })
-              ] }) : col.key === "progress" ? /* @__PURE__ */ jsx311(ProgressCell, { value: liveProgress ?? row.progress ?? 0, barClass: tokens.chip }) : null
+              children: i === 0 ? /* @__PURE__ */ jsxs190(Fragment48, { children: [
+                /* @__PURE__ */ jsx312("span", { className: classNames121("truncate text-[13px] font-semibold", tokens.label), children: lane.label }),
+                lane.description && /* @__PURE__ */ jsx312("span", { className: "hidden truncate text-[11px] text-neutral-500 dark:text-neutral-400 lg:inline", children: lane.description }),
+                row.childCount > 0 && /* @__PURE__ */ jsx312("span", { className: "shrink-0 rounded-full bg-white/70 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-600 dark:bg-white/10 dark:text-neutral-300", children: row.childCount })
+              ] }) : col.key === "progress" ? /* @__PURE__ */ jsx312(ProgressCell, { value: liveProgress ?? row.progress ?? 0, barClass: tokens.chip }) : null
             },
             col.key
           ))
         ]
       }
     ),
-    /* @__PURE__ */ jsx311("div", { className: classNames120("relative min-w-0 flex-1 border-b", dividerClass), children: /* @__PURE__ */ jsx311("div", { className: classNames120("absolute inset-0", tokens.band) }) })
+    /* @__PURE__ */ jsx312("div", { className: classNames121("relative min-w-0 flex-1 border-b", dividerClass), children: /* @__PURE__ */ jsx312("div", { className: classNames121("absolute inset-0", tokens.band) }) })
   ] });
 };
 var Cell = ({ col, task, depth, isGroup, childCount, first, onCaretClick, renderCell, liveProgress, liveRollup, rowProgress, dividerClass = "border-neutral-100 dark:border-neutral-800" }) => {
   const t = useKitT();
   const value = col.key === "name" ? task.name : col.key === "owner" ? task.owner : col.key === "progress" ? isGroup ? liveRollup ?? rowProgress ?? 0 : liveProgress ?? task.progress ?? 0 : task.values?.[col.key] ?? null;
   const custom = col.key !== "name" && renderCell ? renderCell(value, task, col) : null;
-  return /* @__PURE__ */ jsx311(
+  return /* @__PURE__ */ jsx312(
     "div",
     {
-      className: classNames120(
+      className: classNames121(
         "flex shrink-0 items-center gap-1.5 overflow-hidden border-r px-2 text-[12.5px] last:border-r-0",
         dividerClass
       ),
@@ -63236,50 +63538,50 @@ var Cell = ({ col, task, depth, isGroup, childCount, first, onCaretClick, render
         width: col.width ?? "160px",
         justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
       },
-      children: first ? /* @__PURE__ */ jsxs189(Fragment48, { children: [
-        /* @__PURE__ */ jsx311("span", { className: "shrink-0", style: { width: depth * 14 + 18 }, children: isGroup && /* @__PURE__ */ jsx311(
+      children: first ? /* @__PURE__ */ jsxs190(Fragment48, { children: [
+        /* @__PURE__ */ jsx312("span", { className: "shrink-0", style: { width: depth * 14 + 18 }, children: isGroup && /* @__PURE__ */ jsx312(
           "button",
           {
             type: "button",
             className: "flex h-4 w-4 items-center justify-center rounded text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-white/10 dark:hover:text-neutral-300",
             onClick: () => onCaretClick(task.id, task.open !== false),
             "aria-label": t(task.open === false ? "kit.gantt.expand" : "kit.gantt.collapse", { name: task.name }),
-            children: /* @__PURE__ */ jsx311(ChevronRight, { className: classNames120("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
+            children: /* @__PURE__ */ jsx312(ChevronRight, { className: classNames121("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
           }
         ) }),
-        isGroup && childCount > 0 ? /* @__PURE__ */ jsxs189("span", { className: "flex min-w-0 items-center gap-1 font-semibold text-neutral-800 dark:text-neutral-100", children: [
-          /* @__PURE__ */ jsx311("span", { className: "truncate", children: task.name }),
-          /* @__PURE__ */ jsx311("span", { className: "shrink-0 rounded-full bg-neutral-100 px-1 text-[10px] font-semibold text-neutral-500 dark:bg-white/10 dark:text-neutral-400", children: childCount })
-        ] }) : /* @__PURE__ */ jsx311("span", { className: "truncate font-medium text-neutral-700 dark:text-neutral-300", children: task.name })
-      ] }) : col.kind === "owner" ? value != null ? /* @__PURE__ */ jsxs189("span", { className: "flex min-w-0 items-center gap-1.5 text-neutral-600 dark:text-neutral-400", children: [
-        /* @__PURE__ */ jsx311(
+        isGroup && childCount > 0 ? /* @__PURE__ */ jsxs190("span", { className: "flex min-w-0 items-center gap-1 font-semibold text-neutral-800 dark:text-neutral-100", children: [
+          /* @__PURE__ */ jsx312("span", { className: "truncate", children: task.name }),
+          /* @__PURE__ */ jsx312("span", { className: "shrink-0 rounded-full bg-neutral-100 px-1 text-[10px] font-semibold text-neutral-500 dark:bg-white/10 dark:text-neutral-400", children: childCount })
+        ] }) : /* @__PURE__ */ jsx312("span", { className: "truncate font-medium text-neutral-700 dark:text-neutral-300", children: task.name })
+      ] }) : col.kind === "owner" ? value != null ? /* @__PURE__ */ jsxs190("span", { className: "flex min-w-0 items-center gap-1.5 text-neutral-600 dark:text-neutral-400", children: [
+        /* @__PURE__ */ jsx312(
           "span",
           {
-            className: classNames120(
+            className: classNames121(
               "flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[8px] font-bold uppercase text-white",
               getGanttBarTokens(task.color ?? "blue").fill
             ),
             children: String(value).slice(0, 1)
           }
         ),
-        /* @__PURE__ */ jsx311("span", { className: "truncate", children: String(value) })
-      ] }) : /* @__PURE__ */ jsx311("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : col.kind === "progress" ? /* @__PURE__ */ jsx311(ProgressCell, { value: typeof value === "number" ? value : 0 }) : col.kind === "badge" ? task.badge != null ? /* @__PURE__ */ jsx311(
+        /* @__PURE__ */ jsx312("span", { className: "truncate", children: String(value) })
+      ] }) : /* @__PURE__ */ jsx312("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : col.kind === "progress" ? /* @__PURE__ */ jsx312(ProgressCell, { value: typeof value === "number" ? value : 0 }) : col.kind === "badge" ? task.badge != null ? /* @__PURE__ */ jsx312(
         "span",
         {
-          className: classNames120(
+          className: classNames121(
             "rounded-full px-1.5 py-0.5 text-[10px] font-semibold",
             getGanttBarTokens(task.badgeColor ?? "neutral").fill,
             "text-white"
           ),
           children: task.badge
         }
-      ) : /* @__PURE__ */ jsx311("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : custom != null ? custom : /* @__PURE__ */ jsx311("span", { className: "truncate text-neutral-600 dark:text-neutral-400", children: value == null || value === "" ? "\u2014" : String(value) })
+      ) : /* @__PURE__ */ jsx312("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : custom != null ? custom : /* @__PURE__ */ jsx312("span", { className: "truncate text-neutral-600 dark:text-neutral-400", children: value == null || value === "" ? "\u2014" : String(value) })
     }
   );
 };
-var ProgressCell = ({ value, barClass = "bg-emerald-500" }) => /* @__PURE__ */ jsxs189("span", { className: "flex w-full items-center gap-1.5", children: [
-  /* @__PURE__ */ jsx311("span", { className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-neutral-200/80 dark:bg-white/10", children: /* @__PURE__ */ jsx311("span", { className: classNames120("block h-full rounded-full", barClass), style: { width: `${Math.round(value * 100)}%` } }) }),
-  /* @__PURE__ */ jsxs189("span", { className: "w-7 shrink-0 text-right text-[10px] font-semibold tabular-nums text-neutral-500 dark:text-neutral-400", children: [
+var ProgressCell = ({ value, barClass = "bg-emerald-500" }) => /* @__PURE__ */ jsxs190("span", { className: "flex w-full items-center gap-1.5", children: [
+  /* @__PURE__ */ jsx312("span", { className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-neutral-200/80 dark:bg-white/10", children: /* @__PURE__ */ jsx312("span", { className: classNames121("block h-full rounded-full", barClass), style: { width: `${Math.round(value * 100)}%` } }) }),
+  /* @__PURE__ */ jsxs190("span", { className: "w-7 shrink-0 text-right text-[10px] font-semibold tabular-nums text-neutral-500 dark:text-neutral-400", children: [
     Math.round(value * 100),
     "%"
   ] })
@@ -63311,7 +63613,7 @@ var TaskBar = ({
   const t = useKitT();
   const milestone = task.type === "milestone";
   const barColor = task.color ?? color;
-  const tokens = useMemo56(() => getGanttBarTokens(barColor), [barColor]);
+  const tokens = useMemo57(() => getGanttBarTokens(barColor), [barColor]);
   const startMs = liveDates ? liveDates.start : toMs(task.start);
   const endMs = liveDates ? liveDates.end : toMs(task.end);
   const left = dateToX(startMs, rangeStart, zoom);
@@ -63336,7 +63638,7 @@ var TaskBar = ({
     pct: progressPct
   });
   if (milestone) {
-    return /* @__PURE__ */ jsxs189(
+    return /* @__PURE__ */ jsxs190(
       "div",
       {
         role: "button",
@@ -63344,7 +63646,7 @@ var TaskBar = ({
         "aria-label": ariaLabel,
         title: ariaLabel,
         "data-gantt-bar": task.id,
-        className: classNames120(
+        className: classNames121(
           "absolute z-10 flex cursor-pointer items-center gap-1.5 outline-none",
           selected && selectionTokens.ring,
           "rounded"
@@ -63354,13 +63656,13 @@ var TaskBar = ({
         onClick: () => onSelect(task.id),
         onKeyDown: (e) => onBarKeyDown(e, task),
         children: [
-          /* @__PURE__ */ jsx311("span", { className: classNames120("h-3.5 w-3.5 shrink-0 rotate-45 rounded-[2px] shadow-sm", tokens.milestone) }),
-          /* @__PURE__ */ jsx311("span", { className: "truncate text-[11px] font-semibold text-neutral-700 dark:text-neutral-300", children: task.name })
+          /* @__PURE__ */ jsx312("span", { className: classNames121("h-3.5 w-3.5 shrink-0 rotate-45 rounded-[2px] shadow-sm", tokens.milestone) }),
+          /* @__PURE__ */ jsx312("span", { className: "truncate text-[11px] font-semibold text-neutral-700 dark:text-neutral-300", children: task.name })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs189(
+  return /* @__PURE__ */ jsxs190(
     "div",
     {
       role: "button",
@@ -63368,7 +63670,7 @@ var TaskBar = ({
       "aria-label": ariaLabel,
       title: `${task.name} \xB7 ${formatDateTime(startMs, locale)} \u2192 ${formatDateTime(endMs, locale)} \xB7 ${progressPct}%`,
       "data-gantt-bar": task.id,
-      className: classNames120(
+      className: classNames121(
         "group/bar absolute z-10 cursor-grab touch-none rounded-md shadow-sm outline-none transition-shadow active:cursor-grabbing",
         tokens.base,
         tokens.rim,
@@ -63385,17 +63687,17 @@ var TaskBar = ({
       onClick: () => onSelect(task.id),
       onKeyDown: (e) => onBarKeyDown(e, task),
       children: [
-        progress > 0 && /* @__PURE__ */ jsx311(
+        progress > 0 && /* @__PURE__ */ jsx312(
           "div",
           {
-            className: classNames120("absolute inset-y-0 left-0 rounded-l-md", tokens.progress),
+            className: classNames121("absolute inset-y-0 left-0 rounded-l-md", tokens.progress),
             style: { width: `${progress * 100}%` }
           }
         ),
-        canEdit && !row.isGroup && progress > 0 && progress < 1 && /* @__PURE__ */ jsx311(
+        canEdit && !row.isGroup && progress > 0 && progress < 1 && /* @__PURE__ */ jsx312(
           "div",
           {
-            className: classNames120(
+            className: classNames121(
               "absolute inset-y-0 z-20 w-2 cursor-ew-resize touch-none opacity-0 transition-opacity group-hover/bar:opacity-100",
               liveProgress != null && "opacity-100"
             ),
@@ -63403,10 +63705,10 @@ var TaskBar = ({
             onPointerDown: (e) => onProgressPointerDown(task, e),
             title: labels.progress,
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx311("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
+            children: /* @__PURE__ */ jsx312("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
           }
         ),
-        liveProgress != null && /* @__PURE__ */ jsxs189(
+        liveProgress != null && /* @__PURE__ */ jsxs190(
           "div",
           {
             className: "pointer-events-none absolute -top-5 z-30 -translate-x-1/2 rounded-full bg-neutral-900/90 px-1.5 py-px text-[10px] font-semibold tabular-nums text-white shadow-md",
@@ -63417,31 +63719,31 @@ var TaskBar = ({
             ]
           }
         ),
-        showName && (renderBar != null ? /* @__PURE__ */ jsx311("div", { className: classNames120("pointer-events-none absolute inset-0 flex items-center px-1.5 text-[11px] font-medium", labelText), children: renderBar(task, { taskId: task.id, left, width, top, height: row.height, milestone: false }) }) : /* @__PURE__ */ jsx311("span", { className: classNames120("pointer-events-none absolute inset-0 flex items-center truncate px-1.5 text-[11px] font-medium", labelText), children: task.name })),
-        canEdit && /* @__PURE__ */ jsxs189(Fragment48, { children: [
-          /* @__PURE__ */ jsx311(
+        showName && (renderBar != null ? /* @__PURE__ */ jsx312("div", { className: classNames121("pointer-events-none absolute inset-0 flex items-center px-1.5 text-[11px] font-medium", labelText), children: renderBar(task, { taskId: task.id, left, width, top, height: row.height, milestone: false }) }) : /* @__PURE__ */ jsx312("span", { className: classNames121("pointer-events-none absolute inset-0 flex items-center truncate px-1.5 text-[11px] font-medium", labelText), children: task.name })),
+        canEdit && /* @__PURE__ */ jsxs190(Fragment48, { children: [
+          /* @__PURE__ */ jsx312(
             "div",
             {
               className: "absolute inset-y-0 -left-1 z-20 w-2 cursor-ew-resize touch-none",
               onPointerDown: (e) => onResizePointerDown(task, "start", e),
               title: t("kit.gantt.resizeStart"),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx311("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
+              children: /* @__PURE__ */ jsx312("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
             }
           ),
-          /* @__PURE__ */ jsx311(
+          /* @__PURE__ */ jsx312(
             "div",
             {
               className: "absolute inset-y-0 -right-1 z-20 w-2 cursor-ew-resize touch-none",
               onPointerDown: (e) => onResizePointerDown(task, "end", e),
               title: t("kit.gantt.resizeEnd"),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx311("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
+              children: /* @__PURE__ */ jsx312("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
             }
           )
         ] }),
-        canEdit && /* @__PURE__ */ jsxs189(Fragment48, { children: [
-          /* @__PURE__ */ jsx311(
+        canEdit && /* @__PURE__ */ jsxs190(Fragment48, { children: [
+          /* @__PURE__ */ jsx312(
             "button",
             {
               type: "button",
@@ -63452,7 +63754,7 @@ var TaskBar = ({
               "aria-label": t("kit.gantt.linkFromStart", { task: task.name })
             }
           ),
-          /* @__PURE__ */ jsx311(
+          /* @__PURE__ */ jsx312(
             "button",
             {
               type: "button",
@@ -63470,9 +63772,9 @@ var TaskBar = ({
 };
 
 // src/components/Gantt/GanttToolbar.tsx
-import { useMemo as useMemo57 } from "react";
-import classNames121 from "classnames";
-import { jsx as jsx312, jsxs as jsxs190 } from "react/jsx-runtime";
+import { useMemo as useMemo58 } from "react";
+import classNames122 from "classnames";
+import { jsx as jsx313, jsxs as jsxs191 } from "react/jsx-runtime";
 function nearestPreset(zoom, presets) {
   let best = null;
   let bestDist = Infinity;
@@ -63499,25 +63801,25 @@ var GanttToolbar = ({
     Month: t("kit.gantt.zoomMonth"),
     Quarter: t("kit.gantt.zoomQuarter")
   };
-  const active = useMemo57(() => nearestPreset(zoom, presets), [zoom, presets]);
-  const chrome = useMemo57(
+  const active = useMemo58(() => nearestPreset(zoom, presets), [zoom, presets]);
+  const chrome = useMemo58(
     () => getSurfaceVariantClasses(variant, "neutral"),
     [variant]
   );
-  return /* @__PURE__ */ jsxs190(
+  return /* @__PURE__ */ jsxs191(
     "div",
     {
-      className: classNames121(
+      className: classNames122(
         "pointer-events-auto flex items-center gap-1 rounded-lg p-1",
         chrome
       ),
       children: [
-        /* @__PURE__ */ jsx312("div", { className: "flex items-center rounded-md bg-neutral-100 p-0.5 dark:bg-neutral-800", children: presets.map((p) => /* @__PURE__ */ jsx312(
+        /* @__PURE__ */ jsx313("div", { className: "flex items-center rounded-md bg-neutral-100 p-0.5 dark:bg-neutral-800", children: presets.map((p) => /* @__PURE__ */ jsx313(
           "button",
           {
             type: "button",
             onClick: () => onZoomTo(p.value),
-            className: classNames121(
+            className: classNames122(
               "rounded px-1.5 py-0.5 text-[10.5px] font-semibold transition-colors",
               active === p.value ? "bg-white text-neutral-900 shadow-sm dark:bg-neutral-600 dark:text-white" : "text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
             ),
@@ -63525,9 +63827,9 @@ var GanttToolbar = ({
           },
           p.label
         )) }),
-        /* @__PURE__ */ jsx312("div", { className: "mx-0.5 h-4 w-px bg-neutral-200 dark:bg-neutral-700" }),
-        /* @__PURE__ */ jsx312(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1 / 1.25), "aria-label": t("kit.gantt.zoomOut"), children: /* @__PURE__ */ jsx312("span", { className: "text-xs font-semibold leading-none", children: "\u2212" }) }),
-        /* @__PURE__ */ jsx312(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1.25), "aria-label": t("kit.gantt.zoomIn"), children: /* @__PURE__ */ jsx312("span", { className: "text-xs font-semibold leading-none", children: "+" }) })
+        /* @__PURE__ */ jsx313("div", { className: "mx-0.5 h-4 w-px bg-neutral-200 dark:bg-neutral-700" }),
+        /* @__PURE__ */ jsx313(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1 / 1.25), "aria-label": t("kit.gantt.zoomOut"), children: /* @__PURE__ */ jsx313("span", { className: "text-xs font-semibold leading-none", children: "\u2212" }) }),
+        /* @__PURE__ */ jsx313(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1.25), "aria-label": t("kit.gantt.zoomIn"), children: /* @__PURE__ */ jsx313("span", { className: "text-xs font-semibold leading-none", children: "+" }) })
       ]
     }
   );
@@ -63535,7 +63837,7 @@ var GanttToolbar = ({
 GanttToolbar.displayName = "GanttToolbar";
 
 // src/components/Gantt/useGanttDrag.ts
-import { useCallback as useCallback41, useEffect as useEffect70, useMemo as useMemo58, useRef as useRef67, useState as useState78 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect70, useMemo as useMemo59, useRef as useRef67, useState as useState78 } from "react";
 function useGanttDrag(opts) {
   const [drag, setDrag] = useState78(null);
   const [linkSelected, setLinkSelected] = useState78(null);
@@ -63853,7 +64155,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const rubber = useMemo58(() => {
+  const rubber = useMemo59(() => {
     if (!drag || drag.kind !== "link") return null;
     const source = barGeom(drag.taskId);
     if (!source) return null;
@@ -63885,7 +64187,7 @@ function useGanttDrag(opts) {
 }
 
 // src/components/Gantt/Gantt.tsx
-import { jsx as jsx313, jsxs as jsxs191 } from "react/jsx-runtime";
+import { jsx as jsx314, jsxs as jsxs192 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 52;
 var GRIP_WIDTH = 36;
 var DEFAULT_COLUMNS = [
@@ -63944,7 +64246,7 @@ var Gantt = ({
   const t = useKitT();
   const kitEngine = useKitEngine();
   const dateLocale = locale ?? kitEngine.locale;
-  const allLabels = useMemo59(
+  const allLabels = useMemo60(
     () => ({
       loading: t("kit.gantt.loading"),
       empty: t("kit.gantt.empty"),
@@ -63967,7 +64269,7 @@ var Gantt = ({
     title: c.key === "name" ? allLabels.task : c.key === "owner" ? t("kit.gantt.colOwner") : t("kit.gantt.colProgress")
   }));
   const interactive = editable ?? Boolean(onTasksChange || onLinksChange || onReorder);
-  const surfaceText = useMemo59(() => getSurfaceTextTokens(variant), [variant]);
+  const surfaceText = useMemo60(() => getSurfaceTextTokens(variant), [variant]);
   const [internalZoom, setInternalZoom] = useState79(initialZoom);
   const zoom = zoomProp ?? internalZoom;
   const setZoom = useCallback42(
@@ -64030,30 +64332,30 @@ var Gantt = ({
       return next;
     });
   }, []);
-  const effectiveTasks = useMemo59(() => {
+  const effectiveTasks = useMemo60(() => {
     let out = tasks;
     if (collapsed.size > 0) {
       out = out.map((t2) => collapsed.has(t2.id) ? { ...t2, open: false } : t2);
     }
     return out;
   }, [tasks, collapsed]);
-  const effectiveLanes = useMemo59(() => {
+  const effectiveLanes = useMemo60(() => {
     if (closedLanes.size === 0) return lanes;
     return (lanes ?? []).map(
       (l) => closedLanes.has(l.id) ? { ...l, open: false } : l
     );
   }, [lanes, closedLanes]);
-  const committedModel = useMemo59(
+  const committedModel = useMemo60(
     () => buildRows(effectiveTasks, effectiveLanes, rowOrder, rowHeight2),
     [effectiveTasks, effectiveLanes, rowOrder, rowHeight2]
   );
-  const range = useMemo59(() => {
+  const range = useMemo60(() => {
     const starts = tasks.map((t2) => toMs(t2.start));
     const ends = tasks.map((t2) => toMs(t2.end));
     return computeViewRange(starts, ends);
   }, [tasks]);
   const timelineWidth = rangeWidth(range.start, range.end, zoom);
-  const scaleLevels = useMemo59(
+  const scaleLevels = useMemo60(
     () => buildTimeScale(range.start, range.end, zoom, dateLocale),
     [range, zoom, dateLocale]
   );
@@ -64070,7 +64372,7 @@ var Gantt = ({
     const m = /^(\d+(?:\.\d+)?)px$/.exec(col.width ?? "");
     return m ? Number(m[1]) : 160;
   };
-  const sizedColumns = useMemo59(
+  const sizedColumns = useMemo60(
     () => resolvedColumns.map((c) => ({ ...c, width: `${effectiveColWidth(c)}px` })),
     [resolvedColumns, colWidths]
   );
@@ -64078,7 +64380,7 @@ var Gantt = ({
   effectiveWidthsRef.current = Object.fromEntries(
     sizedColumns.map((c) => [c.key, effectiveColWidth(c)])
   );
-  const leftWidth = useMemo59(
+  const leftWidth = useMemo60(
     () => GRIP_WIDTH + resolvedColumns.reduce((sum, c) => sum + effectiveColWidth(c), 0),
     [resolvedColumns, colWidths]
   );
@@ -64187,12 +64489,12 @@ var Gantt = ({
     rowOrder,
     setSelected
   });
-  const liveReorder = useMemo59(() => {
+  const liveReorder = useMemo60(() => {
     const d = dragApi.drag;
     if (d?.kind !== "reorder" || d.beforeId === void 0) return null;
     return applyRowReorder(effectiveTasks, d.taskId, d.beforeId, rowOrder);
   }, [dragApi.drag, effectiveTasks, rowOrder]);
-  const liveModel = useMemo59(
+  const liveModel = useMemo60(
     () => liveReorder ? buildRows(
       liveReorder.tasks,
       effectiveLanes,
@@ -64202,7 +64504,7 @@ var Gantt = ({
     [liveReorder, effectiveLanes, rowHeight2, committedModel]
   );
   liveRowsRef.current = liveModel.rows;
-  const bars = useMemo59(() => {
+  const bars = useMemo60(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of liveModel.rows) {
       if (!row.task) continue;
@@ -64358,22 +64660,22 @@ var Gantt = ({
   const drag = dragApi.drag;
   const dragTask = drag?.taskId ? committedModel.tasksById.get(drag.taskId) : void 0;
   const reorderLineY = drag?.kind === "reorder" && drag.beforeId !== void 0 ? reorderPreviewTop(liveModel.rows, `task:${drag.taskId}`, drag.beforeId) : null;
-  const dragSubtree = useMemo59(() => {
+  const dragSubtree = useMemo60(() => {
     if (dragApi.drag?.kind !== "reorder") return null;
     return reorderDragSubtree(
       liveModel.rows,
       `task:${dragApi.drag.taskId}`
     );
   }, [dragApi.drag, liveModel.rows]);
-  const dragSubtreeKeys = useMemo59(
+  const dragSubtreeKeys = useMemo60(
     () => new Set((dragSubtree ?? []).map((r) => r.key)),
     [dragSubtree]
   );
-  const dragSubtreeHeight = useMemo59(
+  const dragSubtreeHeight = useMemo60(
     () => (dragSubtree ?? []).reduce((sum, r) => sum + r.height, 0),
     [dragSubtree]
   );
-  const liveDragDates = useMemo59(() => {
+  const liveDragDates = useMemo60(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind !== "move" && drag.kind !== "resize-start" && drag.kind !== "resize-end") return null;
     return applyDragDates(
@@ -64384,7 +64686,7 @@ var Gantt = ({
     );
   }, [drag, dragTask, zoom, snap2]);
   const liveDragProgress = drag?.kind === "progress" && drag.liveProgress != null ? drag.liveProgress : null;
-  const dragOverride = useMemo59(() => {
+  const dragOverride = useMemo60(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind === "progress" && drag.liveProgress != null) {
       return { ...dragTask, progress: drag.liveProgress };
@@ -64394,11 +64696,11 @@ var Gantt = ({
     }
     return null;
   }, [drag, dragTask, liveDragDates]);
-  const liveLaneProgress = useMemo59(
+  const liveLaneProgress = useMemo60(
     () => dragOverride && dragTask ? laneRollupProgress(effectiveTasks, dragTask.id, dragOverride) : null,
     [dragOverride, dragTask, effectiveTasks]
   );
-  const liveGroupProgress = useMemo59(() => {
+  const liveGroupProgress = useMemo60(() => {
     if (!dragOverride || !dragTask) return null;
     const byId = new Map(effectiveTasks.map((t2) => [t2.id, t2]));
     const m = /* @__PURE__ */ new Map();
@@ -64410,7 +64712,7 @@ var Gantt = ({
     }
     return m.size > 0 ? m : null;
   }, [dragOverride, dragTask, effectiveTasks]);
-  const liveLinkBars = useMemo59(() => {
+  const liveLinkBars = useMemo60(() => {
     if (!liveDragDates || !dragTask) return bars;
     const g = bars.get(dragTask.id);
     if (!g) return bars;
@@ -64419,12 +64721,12 @@ var Gantt = ({
     if (left === g.left && width === g.width) return bars;
     return new Map(bars).set(dragTask.id, { ...g, left, width });
   }, [bars, liveDragDates, dragTask, range, zoom]);
-  const linkPaths = useMemo59(
+  const linkPaths = useMemo60(
     () => computeLinkPaths(links, liveLinkBars, color),
     [links, liveLinkBars, color]
   );
-  const linkFan = useMemo59(() => computeLinkFanOffsets(links, bars), [links, bars]);
-  return /* @__PURE__ */ jsx313(
+  const linkFan = useMemo60(() => computeLinkFanOffsets(links, bars), [links, bars]);
+  return /* @__PURE__ */ jsx314(
     Panel_default,
     {
       ref: rootRef,
@@ -64442,31 +64744,31 @@ var Gantt = ({
       "aria-label": t("kit.gantt.root"),
       onKeyDown: onRootKeyDown,
       onPointerDown: handleRootPointerDown,
-      children: /* @__PURE__ */ jsxs191("div", { className: "flex h-full min-h-0 flex-col", children: [
-        /* @__PURE__ */ jsxs191(
+      children: /* @__PURE__ */ jsxs192("div", { className: "flex h-full min-h-0 flex-col", children: [
+        /* @__PURE__ */ jsxs192(
           "div",
           {
-            className: classNames122(
+            className: classNames123(
               "flex shrink-0 items-center gap-3 border-b px-4 py-3",
               surfaceText.divider
             ),
             children: [
-              hasNode(icon) && /* @__PURE__ */ jsx313(
+              hasNode(icon) && /* @__PURE__ */ jsx314(
                 "div",
                 {
-                  className: classNames122(
+                  className: classNames123(
                     "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
                     getSurfaceVariantClasses(variant, "neutral")
                   ),
                   children: icon
                 }
               ),
-              (title != null || subtitle != null) && /* @__PURE__ */ jsxs191("div", { className: "min-w-0 flex-1", children: [
-                subtitle != null && /* @__PURE__ */ jsx313("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400", children: subtitle }),
-                title != null && /* @__PURE__ */ jsx313("div", { className: "truncate text-lg font-semibold text-neutral-900 dark:text-white", children: title })
+              (title != null || subtitle != null) && /* @__PURE__ */ jsxs192("div", { className: "min-w-0 flex-1", children: [
+                subtitle != null && /* @__PURE__ */ jsx314("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400", children: subtitle }),
+                title != null && /* @__PURE__ */ jsx314("div", { className: "truncate text-lg font-semibold text-neutral-900 dark:text-white", children: title })
               ] }),
-              hasNode(actions) && /* @__PURE__ */ jsx313("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
-              /* @__PURE__ */ jsx313("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx313(
+              hasNode(actions) && /* @__PURE__ */ jsx314("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
+              /* @__PURE__ */ jsx314("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx314(
                 GanttToolbar,
                 {
                   variant,
@@ -64479,31 +64781,31 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs191(
+        /* @__PURE__ */ jsxs192(
           "div",
           {
-            className: classNames122(
+            className: classNames123(
               "relative flex shrink-0 items-stretch border-b",
               surfaceText.divider
             ),
             style: { height: HEADER_HEIGHT },
             children: [
-              /* @__PURE__ */ jsxs191(
+              /* @__PURE__ */ jsxs192(
                 "div",
                 {
-                  className: classNames122(
+                  className: classNames123(
                     "flex items-stretch border-r bg-white dark:bg-neutral-900",
                     surfaceText.divider
                   ),
                   style: { width: leftWidth },
                   children: [
-                    /* @__PURE__ */ jsx313("div", { className: "w-9 shrink-0" }),
+                    /* @__PURE__ */ jsx314("div", { className: "w-9 shrink-0" }),
                     sizedColumns.map((col) => {
                       const resizable = resizableColumns && col.resizable !== false;
-                      return /* @__PURE__ */ jsxs191(
+                      return /* @__PURE__ */ jsxs192(
                         "div",
                         {
-                          className: classNames122(
+                          className: classNames123(
                             "relative flex shrink-0 items-center border-r px-2 text-[11px] font-semibold uppercase tracking-wide text-neutral-600 last:border-r-0 dark:text-neutral-400",
                             surfaceText.divider
                           ),
@@ -64512,7 +64814,7 @@ var Gantt = ({
                             justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
                           },
                           children: [
-                            /* @__PURE__ */ jsx313("span", { className: "truncate", children: col.title }),
+                            /* @__PURE__ */ jsx314("span", { className: "truncate", children: col.title }),
                             resizable && /* Resize handle — Table's header-edge pattern: an 8px hit
                                 area whose 1px line sits exactly on the column border.
                                 Absolute insets stop at the padding edge (1px inside
@@ -64521,7 +64823,7 @@ var Gantt = ({
                                 the border's own pixel. The cell carries no
                                 overflow-hidden so the line can paint over the border
                                 (the title span truncates itself). */
-                            /* @__PURE__ */ jsx313(
+                            /* @__PURE__ */ jsx314(
                               "div",
                               {
                                 role: "separator",
@@ -64530,7 +64832,7 @@ var Gantt = ({
                                 className: "group/rh absolute inset-y-0 -right-px z-10 flex w-2 cursor-col-resize select-none items-stretch justify-end",
                                 onPointerDown: (e) => startColumnResize(e, col.key),
                                 title: t("kit.gantt.resizeColumn", { column: col.title }),
-                                children: /* @__PURE__ */ jsx313(
+                                children: /* @__PURE__ */ jsx314(
                                   "div",
                                   {
                                     className: "h-full w-px bg-neutral-300 transition-colors group-hover/rh:bg-neutral-400 dark:bg-neutral-600 dark:group-hover/rh:bg-neutral-500",
@@ -64547,30 +64849,30 @@ var Gantt = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx313("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs191(
+              /* @__PURE__ */ jsx314("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs192(
                 "div",
                 {
                   ref: headerScaleRef,
                   className: "relative h-full",
                   style: { width: timelineWidth },
                   children: [
-                    /* @__PURE__ */ jsx313(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
-                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx313(
+                    /* @__PURE__ */ jsx314(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx314(
                       "div",
                       {
-                        className: classNames122(
+                        className: classNames123(
                           "pointer-events-none absolute inset-y-0 z-[1] border-l-2",
                           todayTokens.line
                         ),
                         style: { left: todayX }
                       }
                     ),
-                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx313(
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx314(
                       "div",
                       {
                         className: "pointer-events-none absolute top-1 z-10 -translate-x-1/2",
                         style: { left: todayX },
-                        children: /* @__PURE__ */ jsx313("span", { className: classNames122("rounded-full px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm", todayTokens.chip), children: allLabels.today })
+                        children: /* @__PURE__ */ jsx314("span", { className: classNames123("rounded-full px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm", todayTokens.chip), children: allLabels.today })
                       }
                     )
                   ]
@@ -64579,20 +64881,20 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx313(
+        /* @__PURE__ */ jsx314(
           "div",
           {
             ref: scrollRef,
             className: `gantt-scroller min-h-0 flex-1 overflow-auto overscroll-contain [&::-webkit-scrollbar]:h-1.5 ${THIN_SCROLLBAR}`,
             onScroll: syncHeaderScale,
-            children: /* @__PURE__ */ jsx313("div", { style: { width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER, minWidth: "100%" }, children: loading ? /* @__PURE__ */ jsx313(GanttSkeleton, { rows: 12, rowHeight: rowHeight2, leftWidth }) : isEmpty2 ? /* @__PURE__ */ jsx313("div", { className: "flex items-center justify-center text-sm text-neutral-500", style: { height: bodyHeight || 160, width: leftWidth + timelineWidth }, children: emptyState ?? allLabels.empty }) : /* @__PURE__ */ jsxs191("div", { className: "relative", style: { height: bodyHeight }, children: [
-              /* @__PURE__ */ jsxs191(
+            children: /* @__PURE__ */ jsx314("div", { style: { width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER, minWidth: "100%" }, children: loading ? /* @__PURE__ */ jsx314(GanttSkeleton, { rows: 12, rowHeight: rowHeight2, leftWidth }) : isEmpty2 ? /* @__PURE__ */ jsx314("div", { className: "flex items-center justify-center text-sm text-neutral-500", style: { height: bodyHeight || 160, width: leftWidth + timelineWidth }, children: emptyState ?? allLabels.empty }) : /* @__PURE__ */ jsxs192("div", { className: "relative", style: { height: bodyHeight }, children: [
+              /* @__PURE__ */ jsxs192(
                 "div",
                 {
                   className: "pointer-events-none absolute inset-y-0 z-0",
                   style: { left: leftWidth, width: timelineWidth },
                   children: [
-                    scaleLevels.length > 0 && scaleLevels[scaleLevels.length - 1].columns.map((c) => /* @__PURE__ */ jsx313(
+                    scaleLevels.length > 0 && scaleLevels[scaleLevels.length - 1].columns.map((c) => /* @__PURE__ */ jsx314(
                       "div",
                       {
                         className: "absolute inset-y-0 border-r border-neutral-100 dark:border-neutral-800",
@@ -64600,10 +64902,10 @@ var Gantt = ({
                       },
                       c.id
                     )),
-                    todayVisible && /* @__PURE__ */ jsx313(
+                    todayVisible && /* @__PURE__ */ jsx314(
                       "div",
                       {
-                        className: classNames122("absolute inset-y-0 border-l-2", todayTokens.line),
+                        className: classNames123("absolute inset-y-0 border-l-2", todayTokens.line),
                         style: { left: todayX }
                       }
                     )
@@ -64613,7 +64915,7 @@ var Gantt = ({
               liveModel.rows.map((row) => {
                 const isDragSource = drag?.kind === "reorder" && row.task != null && row.task.id === drag.taskId;
                 if (isDragSource) {
-                  return /* @__PURE__ */ jsx313(
+                  return /* @__PURE__ */ jsx314(
                     "div",
                     {
                       "data-row-key": row.key,
@@ -64621,7 +64923,7 @@ var Gantt = ({
                       "aria-hidden": "true",
                       className: "pointer-events-none flex border-b",
                       style: { height: dragSubtreeHeight || row.height },
-                      children: /* @__PURE__ */ jsx313(
+                      children: /* @__PURE__ */ jsx314(
                         "div",
                         {
                           className: "m-1 flex-1 rounded-md border-2 border-dashed",
@@ -64638,7 +64940,7 @@ var Gantt = ({
                 if (drag?.kind === "reorder" && dragSubtreeKeys.has(row.key)) {
                   return null;
                 }
-                return /* @__PURE__ */ jsx313(
+                return /* @__PURE__ */ jsx314(
                   GanttBodyRow,
                   {
                     row,
@@ -64676,7 +64978,7 @@ var Gantt = ({
                   row.key
                 );
               }),
-              /* @__PURE__ */ jsx313(
+              /* @__PURE__ */ jsx314(
                 GanttLinkLayer,
                 {
                   ref: overlayRef,
@@ -64692,7 +64994,7 @@ var Gantt = ({
                   onDeleteLink: interactive && onLinksChange ? deleteSelectedLink : void 0
                 }
               ),
-              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ jsx313(
+              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ jsx314(
                 "div",
                 {
                   className: "pointer-events-none absolute z-30 h-0.5 rounded-full",
@@ -64712,7 +65014,7 @@ var Gantt = ({
               // there is no filtered/overflowing ancestor and the fixed
               // clone always tracks the viewport pointer.
               createPortal15(
-                /* @__PURE__ */ jsx313(
+                /* @__PURE__ */ jsx314(
                   "div",
                   {
                     "data-gantt-drag-clone": "true",
@@ -64723,14 +65025,14 @@ var Gantt = ({
                       top: drag.clientY - (drag.grabOffset?.y ?? 0),
                       width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER
                     },
-                    children: /* @__PURE__ */ jsx313(
+                    children: /* @__PURE__ */ jsx314(
                       "div",
                       {
                         className: "overflow-hidden rounded-lg bg-white/95 shadow-2xl backdrop-blur-sm dark:bg-neutral-900/95",
                         style: {
                           boxShadow: `0 8px 32px rgba(0, 0, 0, 0.28), inset 2px 0 0 var(--color-${color}-500)`
                         },
-                        children: dragSubtree.map((row) => /* @__PURE__ */ jsx313(
+                        children: dragSubtree.map((row) => /* @__PURE__ */ jsx314(
                           GanttBodyRow,
                           {
                             row,
@@ -64773,7 +65075,7 @@ var Gantt = ({
                 ),
                 document.body
               ),
-              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ jsx313(
+              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ jsx314(
                 "div",
                 {
                   className: "pointer-events-none absolute z-50 rounded-md bg-neutral-900/90 px-2 py-1 text-[11px] font-medium text-white shadow-lg dark:bg-neutral-700/95",
@@ -64804,13 +65106,13 @@ var GanttSkeleton = ({
   rows,
   rowHeight: rowHeight2,
   leftWidth
-}) => /* @__PURE__ */ jsx313("div", { className: "animate-pulse", "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs191("div", { className: "flex", style: { height: rowHeight2 }, children: [
-  /* @__PURE__ */ jsx313(
+}) => /* @__PURE__ */ jsx314("div", { className: "animate-pulse", "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs192("div", { className: "flex", style: { height: rowHeight2 }, children: [
+  /* @__PURE__ */ jsx314(
     "div",
     {
       className: "sticky left-0 flex items-center border-b border-neutral-100 bg-white px-3 dark:border-neutral-800 dark:bg-neutral-900",
       style: { width: leftWidth },
-      children: /* @__PURE__ */ jsx313(
+      children: /* @__PURE__ */ jsx314(
         "div",
         {
           className: "h-3 rounded-full bg-neutral-200 dark:bg-neutral-700",
@@ -64819,7 +65121,7 @@ var GanttSkeleton = ({
       )
     }
   ),
-  /* @__PURE__ */ jsx313("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx313(
+  /* @__PURE__ */ jsx314("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx314(
     "div",
     {
       className: "absolute top-1/2 h-4 -translate-y-1/2 rounded-md bg-neutral-200/80 dark:bg-neutral-700/60",
@@ -64837,13 +65139,13 @@ import {
   useCallback as useCallback43,
   useContext as useContext8,
   useEffect as useEffect72,
-  useMemo as useMemo60,
+  useMemo as useMemo61,
   useRef as useRef69,
   useState as useState80
 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
-import classNames123 from "classnames";
-import { jsx as jsx314, jsxs as jsxs192 } from "react/jsx-runtime";
+import classNames124 from "classnames";
+import { jsx as jsx315, jsxs as jsxs193 } from "react/jsx-runtime";
 var BottomSheetContext = createContext8(null);
 var TRANSITION_MS2 = 260;
 var renderSlot = (slot, controls) => {
@@ -64897,13 +65199,13 @@ var BottomSheetProvider = ({
     },
     []
   );
-  const controls = useMemo60(
+  const controls = useMemo61(
     () => ({
       dismiss: dismissSheet
     }),
     [dismissSheet]
   );
-  const contextValue = useMemo60(
+  const contextValue = useMemo61(
     () => ({
       presentSheet,
       dismissSheet,
@@ -64913,11 +65215,11 @@ var BottomSheetProvider = ({
     [presentSheet, dismissSheet, sheet, isVisible]
   );
   const overlayNode = typeof document !== "undefined" && sheet ? createPortal16(
-    /* @__PURE__ */ jsxs192("div", { className: "pointer-events-none fixed inset-0 z-[70] flex items-end justify-center", children: [
-      /* @__PURE__ */ jsx314(
+    /* @__PURE__ */ jsxs193("div", { className: "pointer-events-none fixed inset-0 z-[70] flex items-end justify-center", children: [
+      /* @__PURE__ */ jsx315(
         "div",
         {
-          className: classNames123(
+          className: classNames124(
             "absolute inset-0 bg-neutral-900/40 transition-opacity duration-300",
             isVisible ? "opacity-100 pointer-events-auto" : "opacity-0"
           ),
@@ -64927,24 +65229,24 @@ var BottomSheetProvider = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx314("div", { className: "relative w-full max-w-4xl px-4 pb-4 sm:px-8", children: /* @__PURE__ */ jsxs192(
+      /* @__PURE__ */ jsx315("div", { className: "relative w-full max-w-4xl px-4 pb-4 sm:px-8", children: /* @__PURE__ */ jsxs193(
         "section",
         {
           role: "dialog",
           "aria-modal": "true",
-          className: classNames123(
+          className: classNames124(
             "pointer-events-auto ml-auto flex w-full flex-col rounded-t-3xl border border-slate-200 bg-white shadow-2xl transition-transform duration-300 dark:border-slate-700 dark:bg-slate-900",
             sheet.className,
             isVisible ? "translate-y-0" : "translate-y-full"
           ),
           style: { minHeight: "25vh", maxHeight: "85vh" },
           children: [
-            /* @__PURE__ */ jsxs192("header", { className: "flex items-start justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
-              /* @__PURE__ */ jsxs192("div", { className: "space-y-1", children: [
-                sheet.title && /* @__PURE__ */ jsx314("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: sheet.title }),
-                sheet.description && /* @__PURE__ */ jsx314("p", { className: "text-sm text-slate-500 dark:text-slate-300", children: sheet.description })
+            /* @__PURE__ */ jsxs193("header", { className: "flex items-start justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
+              /* @__PURE__ */ jsxs193("div", { className: "space-y-1", children: [
+                sheet.title && /* @__PURE__ */ jsx315("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: sheet.title }),
+                sheet.description && /* @__PURE__ */ jsx315("p", { className: "text-sm text-slate-500 dark:text-slate-300", children: sheet.description })
               ] }),
-              (sheet.showCloseButton ?? true) && /* @__PURE__ */ jsx314(
+              (sheet.showCloseButton ?? true) && /* @__PURE__ */ jsx315(
                 IconButton_default,
                 {
                   icon: "Close",
@@ -64956,15 +65258,15 @@ var BottomSheetProvider = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx314("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: renderSlot(sheet.content, controls) ?? /* @__PURE__ */ jsx314("p", { className: "text-sm text-slate-500", children: "No content provided." }) }),
-            sheet.actions && /* @__PURE__ */ jsx314("div", { className: "flex flex-wrap items-center justify-end gap-3 border-t border-slate-200 px-6 py-4 dark:border-slate-800", children: renderSlot(sheet.actions, controls) })
+            /* @__PURE__ */ jsx315("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: renderSlot(sheet.content, controls) ?? /* @__PURE__ */ jsx315("p", { className: "text-sm text-slate-500", children: "No content provided." }) }),
+            sheet.actions && /* @__PURE__ */ jsx315("div", { className: "flex flex-wrap items-center justify-end gap-3 border-t border-slate-200 px-6 py-4 dark:border-slate-800", children: renderSlot(sheet.actions, controls) })
           ]
         }
       ) })
     ] }),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs192(BottomSheetContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs193(BottomSheetContext.Provider, { value: contextValue, children: [
     children,
     overlayNode
   ] });
@@ -65604,8 +65906,8 @@ var SYSTEM_VARIABLES = [
 ];
 
 // src/components/MetricBar.tsx
-import classNames124 from "classnames";
-import { jsx as jsx315 } from "react/jsx-runtime";
+import classNames125 from "classnames";
+import { jsx as jsx316 } from "react/jsx-runtime";
 var MetricBar = ({
   label,
   value,
@@ -65615,7 +65917,7 @@ var MetricBar = ({
   size = "sm",
   className,
   ...rest
-}) => /* @__PURE__ */ jsx315(
+}) => /* @__PURE__ */ jsx316(
   Progress_default,
   {
     ...rest,
@@ -65625,7 +65927,7 @@ var MetricBar = ({
     formatValue: value !== void 0 ? () => String(value) : void 0,
     size,
     color: tone ?? color ?? "blue",
-    className: classNames124("w-full", className)
+    className: classNames125("w-full", className)
   }
 );
 MetricBar.displayName = "MetricBar";
@@ -65666,6 +65968,7 @@ export {
   COLLAPSIBLE_HELP_VARIANTS,
   COMBOBOX_TONE_CLASSES,
   COMBOBOX_VALIDATION_STATUSES,
+  CONNECTION_FLOW_CHILD_LAYOUTS,
   CONNECTION_FLOW_EDGE_STYLES,
   CONNECTION_FLOW_ITEM_PROGRESS,
   CONNECTION_FLOW_LOADERS,
@@ -65704,6 +66007,7 @@ export {
   DEFAULT_LAYOUT_OPTIONS,
   DEFAULT_SERIES_PALETTE,
   DEFAULT_SURFACE_CORNER,
+  DEFAULT_SURFACE_GUTTER,
   DEFAULT_SURFACE_PADDING,
   DEFAULT_SURFACE_TONE,
   DEFAULT_TOAST_GAP_PX,
@@ -65854,6 +66158,7 @@ export {
   STAT_PAGER_PLACEMENTS,
   SURFACE_CORNERS,
   SURFACE_GLASS_RIM,
+  SURFACE_GUTTER_AXES,
   SURFACE_PADDINGS,
   SURFACE_TO_BUTTON_VARIANT,
   SURFACE_VARIANTS,
@@ -65948,6 +66253,7 @@ export {
   WorkflowTracker_default as WorkflowTracker,
   WorkflowTrackerDetails_default as WorkflowTrackerDetails,
   WorkflowTrackerRail_default as WorkflowTrackerRail,
+  WorkflowTrackerRollups_default as WorkflowTrackerRollups,
   WorkflowTrackerStepDetails_default as WorkflowTrackerStepDetails,
   areaPathFromPoints,
   bandAreaPath,
@@ -66086,6 +66392,7 @@ export {
   getStepperTonePalette,
   getSurfaceCornerClass,
   getSurfaceCornerRem,
+  getSurfaceGutterClass,
   getSurfacePaddingClass,
   getSurfacePaddingClasses,
   getSurfaceTextTokens,
@@ -66150,6 +66457,7 @@ export {
   mixHex,
   nicePolarMax,
   niceRadarMax,
+  nodeHasFailed,
   nodeIcon,
   nodeIsActive,
   nodeIsSkipped,
@@ -66205,6 +66513,7 @@ export {
   tintColor,
   toBoolean,
   toDate,
+  toRows,
   toSmartVariable,
   tracePathTo,
   usageTotals,