@cjlapao/ui-kit 0.2.4 → 0.2.6

package/dist/index.cjs

@@ -68,6 +68,7 @@ __export(src_exports, {
   COLLAPSIBLE_HELP_VARIANTS: () => COLLAPSIBLE_HELP_VARIANTS,
   COMBOBOX_TONE_CLASSES: () => COMBOBOX_TONE_CLASSES,
   COMBOBOX_VALIDATION_STATUSES: () => COMBOBOX_VALIDATION_STATUSES,
+  CONNECTION_FLOW_CHILD_LAYOUTS: () => CONNECTION_FLOW_CHILD_LAYOUTS,
   CONNECTION_FLOW_EDGE_STYLES: () => CONNECTION_FLOW_EDGE_STYLES,
   CONNECTION_FLOW_ITEM_PROGRESS: () => CONNECTION_FLOW_ITEM_PROGRESS,
   CONNECTION_FLOW_LOADERS: () => CONNECTION_FLOW_LOADERS,
@@ -106,6 +107,7 @@ __export(src_exports, {
   DEFAULT_LAYOUT_OPTIONS: () => DEFAULT_LAYOUT_OPTIONS,
   DEFAULT_SERIES_PALETTE: () => DEFAULT_SERIES_PALETTE,
   DEFAULT_SURFACE_CORNER: () => DEFAULT_SURFACE_CORNER,
+  DEFAULT_SURFACE_GUTTER: () => DEFAULT_SURFACE_GUTTER,
   DEFAULT_SURFACE_PADDING: () => DEFAULT_SURFACE_PADDING,
   DEFAULT_SURFACE_TONE: () => DEFAULT_SURFACE_TONE,
   DEFAULT_TOAST_GAP_PX: () => DEFAULT_TOAST_GAP_PX,
@@ -256,6 +258,7 @@ __export(src_exports, {
   STAT_PAGER_PLACEMENTS: () => STAT_PAGER_PLACEMENTS,
   SURFACE_CORNERS: () => SURFACE_CORNERS,
   SURFACE_GLASS_RIM: () => SURFACE_GLASS_RIM,
+  SURFACE_GUTTER_AXES: () => SURFACE_GUTTER_AXES,
   SURFACE_PADDINGS: () => SURFACE_PADDINGS,
   SURFACE_TO_BUTTON_VARIANT: () => SURFACE_TO_BUTTON_VARIANT,
   SURFACE_VARIANTS: () => SURFACE_VARIANTS,
@@ -350,6 +353,7 @@ __export(src_exports, {
   WorkflowTracker: () => WorkflowTracker_default,
   WorkflowTrackerDetails: () => WorkflowTrackerDetails_default,
   WorkflowTrackerRail: () => WorkflowTrackerRail_default,
+  WorkflowTrackerRollups: () => WorkflowTrackerRollups_default,
   WorkflowTrackerStepDetails: () => WorkflowTrackerStepDetails_default,
   areaPathFromPoints: () => areaPathFromPoints,
   bandAreaPath: () => bandAreaPath,
@@ -488,6 +492,7 @@ __export(src_exports, {
   getStepperTonePalette: () => getStepperTonePalette,
   getSurfaceCornerClass: () => getSurfaceCornerClass,
   getSurfaceCornerRem: () => getSurfaceCornerRem,
+  getSurfaceGutterClass: () => getSurfaceGutterClass,
   getSurfacePaddingClass: () => getSurfacePaddingClass,
   getSurfacePaddingClasses: () => getSurfacePaddingClasses,
   getSurfaceTextTokens: () => getSurfaceTextTokens,
@@ -552,6 +557,7 @@ __export(src_exports, {
   mixHex: () => mixHex,
   nicePolarMax: () => nicePolarMax,
   niceRadarMax: () => niceRadarMax,
+  nodeHasFailed: () => nodeHasFailed,
   nodeIcon: () => nodeIcon,
   nodeIsActive: () => nodeIsActive,
   nodeIsSkipped: () => nodeIsSkipped,
@@ -607,6 +613,7 @@ __export(src_exports, {
   tintColor: () => tintColor,
   toBoolean: () => toBoolean,
   toDate: () => toDate,
+  toRows: () => toRows,
   toSmartVariable: () => toSmartVariable,
   tracePathTo: () => tracePathTo,
   usageTotals: () => usageTotals,
@@ -5969,6 +5976,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",
@@ -16332,12 +16348,23 @@ var ScrollArea = ({
   mask = false,
   tabIndex = 0,
   contentClassName,
+  viewportClassName,
+  viewportRef: viewportRefProp,
   children,
   className = "",
   ...rest
 }) => {
   const viewportId = (0, import_react176.useId)();
   const viewportRef = (0, import_react176.useRef)(null);
+  const setViewportRef = (0, import_react176.useCallback)(
+    (el) => {
+      viewportRef.current = el;
+      if (typeof viewportRefProp === "function") viewportRefProp(el);
+      else if (viewportRefProp)
+        viewportRefProp.current = el;
+    },
+    [viewportRefProp]
+  );
   const contentRef = (0, import_react176.useRef)(null);
   const yTrackRef = (0, import_react176.useRef)(null);
   const xTrackRef = (0, import_react176.useRef)(null);
@@ -16479,7 +16506,7 @@ var ScrollArea = ({
         /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
           "div",
           {
-            ref: viewportRef,
+            ref: setViewportRef,
             id: viewportId,
             "data-slot": "scrollarea-viewport",
             tabIndex: overflow.x || overflow.y ? tabIndex : -1,
@@ -16494,7 +16521,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__ */ (0, import_jsx_runtime182.jsx)(
               "div",
@@ -22037,10 +22065,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__ */ (0, import_jsx_runtime201.jsxs)(
     "header",
     {
@@ -22048,9 +22089,12 @@ var PageHeader = ({
       className: (0, import_classnames51.default)(
         "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 ? (0, import_classnames51.default)(
-          surface.offset,
-          surface.radius,
           "border",
           surface.border,
           surface.shadow,
@@ -56057,6 +56101,7 @@ var CONNECTION_FLOW_EDGE_STYLES = [
   "curved",
   "straight"
 ];
+var CONNECTION_FLOW_CHILD_LAYOUTS = ["fan", "chain"];
 var CONNECTION_FLOW_LOADERS = [
   "skeleton",
   "spinner",
@@ -56195,6 +56240,8 @@ var DEFAULT_LAYOUT_OPTIONS = {
   laneGap: 16,
   childGap: 12,
   childIndent: 28,
+  rowGap: 12,
+  gridIndent: 28,
   edgeStyle: "orthogonal",
   cornerRadius: 8,
   bypassLift: 18,
@@ -56220,6 +56267,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
@@ -56300,6 +56349,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(
@@ -56695,6 +56753,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) => {
@@ -56745,15 +56804,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();
@@ -56811,7 +56923,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));
@@ -56821,7 +56936,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);
@@ -56905,6 +57020,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) => {
@@ -56966,6 +57082,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;
@@ -57496,6 +57752,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__ */ (0, import_jsx_runtime289.jsx)(
+      ConnectionFlowNodeBody_default,
+      {
+        node: laid,
+        metrics,
+        showProgress,
+        options,
+        scrollable: laid.scrollable,
+        expanded,
+        onToggleExpanded
+      }
+    );
+    return laid.scrollable ? /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
+      ScrollArea_default,
+      {
+        variant: "auto",
+        className: "h-full w-full",
+        contentClassName: "block w-full",
+        children: content
+      }
+    ) : content;
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime289.jsxs)("div", { className: "relative h-full w-full overflow-hidden", children: [
     /* @__PURE__ */ (0, import_jsx_runtime289.jsxs)(
       "svg",
@@ -57659,10 +57938,6 @@ var ConnectionFlowSvg = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
           "div",
           {
-            "data-scrolls": laid.scrollable ? "" : void 0,
-            className: (0, import_classnames101.default)(
-              laid.scrollable && `overflow-y-auto ${THIN_SCROLLBAR_FIELD}`
-            ),
             style: {
               width: laid.width,
               height: laid.height,
@@ -57670,19 +57945,7 @@ var ConnectionFlowSvg = ({
               transform: `scale(${scale})`,
               transformOrigin: "top left"
             },
-            onWheel: laid.scrollable ? (event) => event.stopPropagation() : void 0,
-            children: renderNode ? renderNode(laid) : /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
-              ConnectionFlowNodeBody_default,
-              {
-                node: laid,
-                metrics,
-                showProgress,
-                options,
-                scrollable: laid.scrollable,
-                expanded,
-                onToggleExpanded
-              }
-            )
+            children: cardContent(laid)
           }
         )
       },
@@ -57901,6 +58164,21 @@ var ConnectionFlow = import_react271.default.forwardRef(function ConnectionFlow2
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
+  (0, import_react271.useEffect)(() => {
+    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]);
   (0, import_react271.useEffect)(() => {
     if (fitOnLoad && viewport.width) fit();
   }, [fitOnLoad, nodes, viewport.width, viewport.height]);
@@ -58014,22 +58292,17 @@ var ConnectionFlow = import_react271.default.forwardRef(function ConnectionFlow2
         style: { height: typeof height === "number" ? `${height}px` : height },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime290.jsx)(
-            "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;
                 }
@@ -58042,7 +58315,7 @@ var ConnectionFlow = import_react271.default.forwardRef(function ConnectionFlow2
                   scrollLeft: element.scrollLeft,
                   scrollTop: element.scrollTop
                 };
-                element.setPointerCapture(event.pointerId);
+                event.currentTarget.setPointerCapture(event.pointerId);
               },
               onPointerMove: (event) => {
                 if (!panning) return;
@@ -60187,14 +60460,97 @@ var TreeView = ({
 var TreeView_default = TreeView;
 
 // src/components/WorkflowTracker/WorkflowTracker.tsx
-var import_react282 = require("react");
-var import_classnames118 = __toESM(require("classnames"), 1);
+var import_react283 = require("react");
+var import_classnames119 = __toESM(require("classnames"), 1);
 
-// src/components/WorkflowTracker/WorkflowSummaryCard.tsx
-var import_classnames109 = __toESM(require("classnames"), 1);
+// src/components/WorkflowTracker/WorkflowTrackerRail.tsx
+var import_react279 = require("react");
+var import_classnames112 = __toESM(require("classnames"), 1);
 
-// src/components/WorkflowTracker/WorkflowStatusNode.tsx
+// src/components/WorkflowTracker/WorkflowTimeline.tsx
+var import_react277 = __toESM(require("react"), 1);
+var import_classnames111 = __toESM(require("classnames"), 1);
+
+// src/components/WorkflowTracker/WorkflowSkeleton.tsx
 var import_classnames107 = __toESM(require("classnames"), 1);
+var import_jsx_runtime296 = require("react/jsx-runtime");
+var Bar3 = ({
+  width,
+  className
+}) => /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
+  "span",
+  {
+    className: (0, import_classnames107.default)(
+      "block h-2.5 rounded-full bg-neutral-200 dark:bg-neutral-800",
+      className
+    ),
+    style: { width }
+  }
+);
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("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__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "mb-5 flex animate-pulse flex-wrap items-start justify-between gap-3 motion-reduce:animate-none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "flex items-center gap-3", children: [
+    hasIcon && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
+      Bar3,
+      {
+        width: "3rem",
+        className: (0, import_classnames107.default)("h-12", getSurfaceCornerClass(iconCorner))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "11rem", className: "h-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "16rem", className: "h-6" })
+    ] })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "9rem", className: "h-6 rounded-full" })
+] });
+var WorkflowRailSkeleton = ({
+  rows = 6
+}) => /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "animate-pulse motion-reduce:animate-none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "border-b border-neutral-200 px-5 pb-4 pt-5 dark:border-neutral-800", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "4.5rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "2rem" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("span", { className: "mt-3 block h-1 w-full rounded-full bg-neutral-200 dark:bg-neutral-800" }),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "80%", className: "mt-3" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "space-y-5 px-5 py-5", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Dot, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: index % 2 === 0 ? "62%" : "48%" }),
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "34%", className: "h-2" })
+    ] })
+  ] }, index)) })
+] });
+var WorkflowDetailSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "animate-pulse motion-reduce:animate-none", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "space-y-4 px-5 pb-6 pt-5 sm:px-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "6rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "4rem" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "45%", className: "h-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "92%", className: "h-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "70%", className: "h-2" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "flex gap-10 pt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "5rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "6rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "4rem" })
+    ] })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("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__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "5rem" }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("div", { className: "divide-y divide-neutral-200 dark:divide-neutral-800", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)("div", { className: "flex items-center gap-3 px-5 py-4 sm:px-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Dot, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: index === 1 ? "38%" : "30%" }),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("span", { className: "flex-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Bar3, { width: "3rem" })
+  ] }, index)) })
+] });
+
+// src/components/WorkflowTracker/WorkflowStatusNode.tsx
+var import_classnames108 = __toESM(require("classnames"), 1);
 
 // src/components/WorkflowTracker/surfaces.ts
 var isTranslucentVariant = (variant) => getSurfaceTextTokens(variant).translucent;
@@ -60332,13 +60688,13 @@ var getStatusTokens = (status, palette) => {
 };
 
 // src/components/WorkflowTracker/WorkflowStatusNode.tsx
-var import_jsx_runtime296 = require("react/jsx-runtime");
+var import_jsx_runtime297 = require("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__ */ (0, import_jsx_runtime296.jsx)("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", className, children: /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
+var DashedRing = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", className, children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
   "circle",
   {
     cx: "10",
@@ -60351,7 +60707,7 @@ var DashedRing = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime296.js
     strokeLinecap: "round"
   }
 ) });
-var AlertGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime296.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
+var AlertGlyph = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", className, children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
   "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",
@@ -60366,33 +60722,33 @@ var WorkflowStatusNode = ({
 }) => {
   const tokens = getStatusTokens(status, palette);
   const { node, glyph } = sizeTokens11[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
     "span",
     {
       "aria-hidden": "true",
-      className: (0, import_classnames107.default)("relative inline-flex shrink-0", node, className),
+      className: (0, import_classnames108.default)("relative inline-flex shrink-0", node, className),
       children: [
-        tokens.pulse && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
+        tokens.pulse && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
           "span",
           {
-            className: (0, import_classnames107.default)(
+            className: (0, import_classnames108.default)(
               "absolute inset-0 animate-ping rounded-full opacity-60 motion-reduce:hidden",
               `bg-${tokens.tone}-300 dark:bg-${tokens.tone}-500`
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
           "span",
           {
-            className: (0, import_classnames107.default)(
+            className: (0, import_classnames108.default)(
               "relative inline-flex h-full w-full items-center justify-center rounded-full",
               tokens.node
             ),
             children: [
-              tokens.glyph === "check" && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Check, { className: (0, import_classnames107.default)(glyph, tokens.glyphClass) }),
-              tokens.glyph === "pause" && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(Pause, { className: (0, import_classnames107.default)(glyph, tokens.glyphClass) }),
-              tokens.glyph === "alert" && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(AlertGlyph, { className: (0, import_classnames107.default)(glyph, tokens.glyphClass) }),
-              tokens.glyph === "dashed" && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(DashedRing, { className: (0, import_classnames107.default)("h-full w-full", tokens.glyphClass) })
+              tokens.glyph === "check" && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(Check, { className: (0, import_classnames108.default)(glyph, tokens.glyphClass) }),
+              tokens.glyph === "pause" && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(Pause, { className: (0, import_classnames108.default)(glyph, tokens.glyphClass) }),
+              tokens.glyph === "alert" && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(AlertGlyph, { className: (0, import_classnames108.default)(glyph, tokens.glyphClass) }),
+              tokens.glyph === "dashed" && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(DashedRing, { className: (0, import_classnames108.default)("h-full w-full", tokens.glyphClass) })
             ]
           }
         )
@@ -60402,34 +60758,73 @@ var WorkflowStatusNode = ({
 };
 var WorkflowStatusNode_default = WorkflowStatusNode;
 
+// src/components/WorkflowTracker/WorkflowQuickActions.tsx
+var import_classnames109 = __toESM(require("classnames"), 1);
+var import_jsx_runtime298 = require("react/jsx-runtime");
+var WorkflowQuickActions = ({
+  stepId,
+  actions,
+  palette,
+  groupLabel,
+  onAction,
+  className,
+  style
+}) => {
+  if (!onAction || actions.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+    "div",
+    {
+      role: "group",
+      "aria-label": groupLabel,
+      className: (0, import_classnames109.default)("flex flex-wrap gap-1.5", className),
+      style,
+      children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+        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
-var import_classnames108 = __toESM(require("classnames"), 1);
-var import_jsx_runtime297 = require("react/jsx-runtime");
+var import_classnames110 = __toESM(require("classnames"), 1);
+var import_jsx_runtime299 = require("react/jsx-runtime");
 var resolve = (surfaces) => surfaces ?? getSurfaceTokens(false);
-var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
+var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(
   "div",
   {
-    className: (0, import_classnames108.default)(
+    className: (0, import_classnames110.default)(
       "flex flex-col items-center justify-center gap-3 px-6 py-10 text-center",
       className
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(WorkflowStatusNode_default, { status: "not_started", palette, size: "lg" }),
-      /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(WorkflowStatusNode_default, { status: "not_started", palette, size: "lg" }),
+      /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
           "p",
           {
-            className: (0, import_classnames108.default)(
+            className: (0, import_classnames110.default)(
               "text-sm font-semibold",
               resolve(surfaces).mutedText
             ),
             children: title
           }
         ),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
           "p",
           {
-            className: (0, import_classnames108.default)(
+            className: (0, import_classnames110.default)(
               "max-w-xs text-xs leading-5",
               resolve(surfaces).faintText
             ),
@@ -60440,10 +60835,10 @@ var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) =>
     ]
   }
 );
-var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
   "span",
   {
-    className: (0, import_classnames108.default)(
+    className: (0, import_classnames110.default)(
       "text-[10px] font-semibold uppercase tracking-widest",
       resolve(surfaces).faintText,
       className
@@ -60451,7 +60846,7 @@ var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ (0, im
     children
   }
 );
-var SectionMeta = ({ children, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("span", { className: (0, import_classnames108.default)("text-xs", resolve(surfaces).mutedText, className), children });
+var SectionMeta = ({ children, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("span", { className: (0, import_classnames110.default)("text-xs", resolve(surfaces).mutedText, className), children });
 var WorkflowBadge = ({
   children,
   status,
@@ -60459,14 +60854,14 @@ var WorkflowBadge = ({
   tone
 }) => {
   const tokens = getStatusTokens(status, palette);
-  return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
     Pill_default,
     {
       size: "xs",
       uppercase: true,
       tone: tone ?? tokens.pillTone,
       variant: "outline",
-      className: (0, import_classnames108.default)(
+      className: (0, import_classnames110.default)(
         "shrink-0 font-medium",
         tone ? `bg-${tone}-100 dark:bg-${tone}-900` : tokens.pillFill
       ),
@@ -60474,177 +60869,17 @@ var WorkflowBadge = ({
     }
   );
 };
-var MetaField = ({ label, value, surfaces }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("div", { className: "min-w-0", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(SectionTitle, { surfaces, children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("p", { className: "mt-1 text-sm font-medium text-neutral-800 dark:text-neutral-100", children: value })
+var MetaField = ({ label, value, surfaces }) => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "min-w-0", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(SectionTitle, { surfaces, children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("p", { className: "mt-1 text-sm font-medium text-neutral-800 dark:text-neutral-100", children: value })
 ] });
-var Tally = ({ count, label, surfaces }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("span", { className: "font-semibold text-neutral-900 dark:text-white", children: count }),
-  /* @__PURE__ */ (0, import_jsx_runtime297.jsx)("span", { className: resolve(surfaces).mutedText, children: label })
-] });
-
-// src/components/WorkflowTracker/WorkflowSummaryCard.tsx
-var import_jsx_runtime298 = require("react/jsx-runtime");
-var WorkflowSummaryCard = ({
-  title,
-  steps,
-  palette,
-  surfaces
-}) => /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: "px-5 py-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(SectionTitle, { surfaces, children: title }),
-  /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("ul", { className: "mt-3 space-y-3", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("li", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
-      WorkflowStatusNode_default,
-      {
-        status: normalizeStatus(step.status),
-        palette,
-        className: "mt-0.5"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: step.label }),
-      step.meta && /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
-        "p",
-        {
-          className: (0, import_classnames109.default)(
-            "mt-0.5 text-xs leading-5",
-            surfaces.mutedText
-          ),
-          children: step.meta
-        }
-      )
-    ] })
-  ] }, step.id)) })
+var Tally = ({ count, label, surfaces }) => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("span", { className: "font-semibold text-neutral-900 dark:text-white", children: count }),
+  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("span", { className: resolve(surfaces).mutedText, children: label })
 ] });
-var WorkflowSummaryCard_default = WorkflowSummaryCard;
-
-// src/components/WorkflowTracker/WorkflowTrackerRail.tsx
-var import_react279 = require("react");
-var import_classnames113 = __toESM(require("classnames"), 1);
 
 // src/components/WorkflowTracker/WorkflowTimeline.tsx
-var import_react277 = __toESM(require("react"), 1);
-var import_classnames112 = __toESM(require("classnames"), 1);
-
-// src/components/WorkflowTracker/WorkflowSkeleton.tsx
-var import_classnames110 = __toESM(require("classnames"), 1);
-var import_jsx_runtime299 = require("react/jsx-runtime");
-var Bar3 = ({
-  width,
-  className
-}) => /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
-  "span",
-  {
-    className: (0, import_classnames110.default)(
-      "block h-2.5 rounded-full bg-neutral-200 dark:bg-neutral-800",
-      className
-    ),
-    style: { width }
-  }
-);
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("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__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "mb-5 flex animate-pulse flex-wrap items-start justify-between gap-3 motion-reduce:animate-none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex items-center gap-3", children: [
-    hasIcon && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
-      Bar3,
-      {
-        width: "3rem",
-        className: (0, import_classnames110.default)("h-12", getSurfaceCornerClass(iconCorner))
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "11rem", className: "h-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "16rem", className: "h-6" })
-    ] })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "9rem", className: "h-6 rounded-full" })
-] });
-var WorkflowRailSkeleton = ({
-  rows = 6
-}) => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "animate-pulse motion-reduce:animate-none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "border-b border-neutral-200 px-5 pb-4 pt-5 dark:border-neutral-800", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "4.5rem" }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "2rem" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("span", { className: "mt-3 block h-1 w-full rounded-full bg-neutral-200 dark:bg-neutral-800" }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "80%", className: "mt-3" })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: "space-y-5 px-5 py-5", children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Dot, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex-1 space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: index % 2 === 0 ? "62%" : "48%" }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "34%", className: "h-2" })
-    ] })
-  ] }, index)) })
-] });
-var WorkflowDetailSkeleton = () => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "animate-pulse motion-reduce:animate-none", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "space-y-4 px-5 pb-6 pt-5 sm:px-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "6rem" }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "4rem" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "45%", className: "h-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "92%", className: "h-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "70%", className: "h-2" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex gap-10 pt-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "5rem" }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "6rem" }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "4rem" })
-    ] })
-  ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("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__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "5rem" }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: "divide-y divide-neutral-200 dark:divide-neutral-800", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex items-center gap-3 px-5 py-4 sm:px-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Dot, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: index === 1 ? "38%" : "30%" }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("span", { className: "flex-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(Bar3, { width: "3rem" })
-  ] }, index)) })
-] });
-
-// src/components/WorkflowTracker/WorkflowQuickActions.tsx
-var import_classnames111 = __toESM(require("classnames"), 1);
 var import_jsx_runtime300 = require("react/jsx-runtime");
-var WorkflowQuickActions = ({
-  stepId,
-  actions,
-  palette,
-  groupLabel,
-  onAction,
-  className,
-  style
-}) => {
-  if (!onAction || actions.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
-    "div",
-    {
-      role: "group",
-      "aria-label": groupLabel,
-      className: (0, import_classnames111.default)("flex flex-wrap gap-1.5", className),
-      style,
-      children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
-        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
-var import_jsx_runtime301 = require("react/jsx-runtime");
 var CONNECTOR_LEFT = 9;
 var CONNECTOR_TOP = 24;
 var NESTED_INDENT = 32;
@@ -60662,16 +60897,16 @@ var NestedSubSteps = ({
   palette,
   surfaces,
   onSubStepSelect
-}) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
   "div",
   {
-    className: (0, import_classnames112.default)("mt-3 rounded-lg p-3", surfaces.nestedBox),
+    className: (0, import_classnames111.default)("mt-3 rounded-lg p-3", surfaces.nestedBox),
     style: { marginLeft: NESTED_INDENT },
-    children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("ul", { className: "space-y-2.5", children: subSteps.map((subStep) => {
+    children: /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("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__ */ (0, import_jsx_runtime301.jsxs)(import_jsx_runtime301.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+      const content = /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(import_jsx_runtime300.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
           WorkflowStatusNode_default,
           {
             status,
@@ -60679,10 +60914,10 @@ var NestedSubSteps = ({
             size: "sm"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
           "span",
           {
-            className: (0, import_classnames112.default)(
+            className: (0, import_classnames111.default)(
               "text-sm",
               isActive ? "font-semibold text-neutral-900 dark:text-white" : "text-neutral-600 dark:text-neutral-300"
             ),
@@ -60690,7 +60925,7 @@ var NestedSubSteps = ({
           }
         )
       ] });
-      return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
         "button",
         {
           type: "button",
@@ -60698,7 +60933,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__ */ (0, import_jsx_runtime301.jsx)("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
+      ) : /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
     }) })
   }
 );
@@ -60719,7 +60954,7 @@ var WorkflowTimeline = ({
   onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(WorkflowRailSkeleton, { rows: loadingRows });
+    return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(WorkflowRailSkeleton, { rows: loadingRows });
   }
   const isEmpty2 = steps.length === 0;
   const tallyEntries = [
@@ -60728,19 +60963,19 @@ var WorkflowTimeline = ({
     { count: tallies.flagged, label: labels.flagged },
     { count: tallies.remaining, label: labels.remaining }
   ].filter((entry) => entry.count > 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "flex flex-col", children: [
-    !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: (0, import_classnames112.default)("border-b px-5 pb-4 pt-5", surfaces.border), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "flex items-baseline justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(SectionTitle, { surfaces, children: labels.progress }),
-        /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("span", { className: "text-sm font-semibold text-neutral-900 dark:text-white", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "flex flex-col", children: [
+    !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: (0, import_classnames111.default)("border-b px-5 pb-4 pt-5", surfaces.border), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "flex items-baseline justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(SectionTitle, { surfaces, children: labels.progress }),
+        /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("span", { className: "text-sm font-semibold text-neutral-900 dark:text-white", children: [
           progress,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
         Progress_default,
         {
-          className: (0, import_classnames112.default)(
+          className: (0, import_classnames111.default)(
             "mt-2",
             surfaces.translucent ? "bg-white/40 dark:bg-white/15" : "bg-neutral-200 dark:bg-neutral-700"
           ),
@@ -60750,8 +60985,8 @@ var WorkflowTimeline = ({
           motion: "none"
         }
       ),
-      tallyEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: tallyEntries.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(import_react277.default.Fragment, { children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+      tallyEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: "mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: tallyEntries.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(import_react277.default.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -60759,7 +60994,7 @@ var WorkflowTimeline = ({
             children: "\xB7"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
           Tally,
           {
             count: entry.count,
@@ -60769,7 +61004,7 @@ var WorkflowTimeline = ({
         )
       ] }, entry.label)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: (0, import_classnames112.default)(isEmpty2 ? "" : "px-5 py-5"), children: isEmpty2 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: (0, import_classnames111.default)(isEmpty2 ? "" : "px-5 py-5"), children: isEmpty2 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
       WorkflowPlaceholder,
       {
         title: labels.empty,
@@ -60777,14 +61012,14 @@ var WorkflowTimeline = ({
         palette,
         surfaces
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("ol", { className: "m-0 list-none p-0", children: steps.map((step, index) => {
+    ) : /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("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__ */ (0, import_jsx_runtime301.jsxs)(import_jsx_runtime301.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+      const rowContent = /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(import_jsx_runtime300.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
           WorkflowStatusNode_default,
           {
             status,
@@ -60792,19 +61027,19 @@ var WorkflowTimeline = ({
             className: "mt-0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
               "span",
               {
-                className: (0, import_classnames112.default)(
+                className: (0, import_classnames111.default)(
                   "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__ */ (0, import_jsx_runtime301.jsx)(
+            step.badge && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
               WorkflowBadge,
               {
                 status,
@@ -60814,10 +61049,10 @@ var WorkflowTimeline = ({
               }
             )
           ] }),
-          step.meta && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+          step.meta && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
             "p",
             {
-              className: (0, import_classnames112.default)(
+              className: (0, import_classnames111.default)(
                 "mt-1 text-xs leading-5",
                 surfaces.mutedText
               ),
@@ -60826,24 +61061,24 @@ var WorkflowTimeline = ({
           )
         ] })
       ] });
-      return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(
         "li",
         {
-          className: (0, import_classnames112.default)("relative", !isLast && "pb-5"),
+          className: (0, import_classnames111.default)("relative", !isLast && "pb-5"),
           "aria-current": isActive ? "step" : void 0,
           children: [
-            !isLast && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+            !isLast && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
               "span",
               {
                 "aria-hidden": "true",
-                className: (0, import_classnames112.default)(
+                className: (0, import_classnames111.default)(
                   "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__ */ (0, import_jsx_runtime301.jsx)(
+            onStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
               "button",
               {
                 type: "button",
@@ -60851,8 +61086,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__ */ (0, import_jsx_runtime301.jsx)("div", { className: "flex items-start gap-3", children: rowContent }),
-            /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: "flex items-start gap-3", children: rowContent }),
+            /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
               WorkflowQuickActions_default,
               {
                 stepId: step.id,
@@ -60863,7 +61098,7 @@ var WorkflowTimeline = ({
                 className: "ml-8 mt-2"
               }
             ),
-            nested && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+            nested && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
               NestedSubSteps,
               {
                 stepId: step.id,
@@ -60878,8 +61113,8 @@ var WorkflowTimeline = ({
         step.id
       );
     }) }) }),
-    showLegend && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: (0, import_classnames112.default)("mt-auto border-t px-5 py-4", surfaces.border), children: /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("ul", { className: "flex flex-wrap gap-x-4 gap-y-2", children: LEGEND_ORDER.map((status) => /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("li", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+    showLegend && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: (0, import_classnames111.default)("mt-auto border-t px-5 py-4", surfaces.border), children: /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("ul", { className: "flex flex-wrap gap-x-4 gap-y-2", children: LEGEND_ORDER.map((status) => /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
         WorkflowStatusNode_default,
         {
           status,
@@ -60887,7 +61122,7 @@ var WorkflowTimeline = ({
           size: "sm"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: (0, import_classnames112.default)("text-xs", surfaces.mutedText), children: labels.statuses[status] })
+      /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("span", { className: (0, import_classnames111.default)("text-xs", surfaces.mutedText), children: labels.statuses[status] })
     ] }, status)) }) })
   ] });
 };
@@ -61048,7 +61283,7 @@ var resolveActiveStep = (steps, activeStepId) => {
 };
 
 // src/components/WorkflowTracker/sampleWorkflow.tsx
-var import_jsx_runtime302 = require("react/jsx-runtime");
+var import_jsx_runtime301 = require("react/jsx-runtime");
 var sampleWorkflow = {
   eyebrow: "VENDOR ONBOARDING \xB7 REQ-4128",
   title: "Northwind Logistics GmbH",
@@ -61093,9 +61328,9 @@ var sampleWorkflow = {
       status: "attention",
       badge: "Needs attention",
       meta: "1h 06m \xB7 Liability certificate expired 12 Aug",
-      details: /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "space-y-3 px-5 py-4 sm:px-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("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__ */ (0, import_jsx_runtime302.jsx)("ul", { className: "flex flex-wrap gap-2", children: ["reminder-12-aug.pdf", "underwriter-quote.pdf"].map((file) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+      details: /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "space-y-3 px-5 py-4 sm:px-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("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__ */ (0, import_jsx_runtime301.jsx)("ul", { className: "flex flex-wrap gap-2", children: ["reminder-12-aug.pdf", "underwriter-quote.pdf"].map((file) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
           "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",
@@ -61126,18 +61361,18 @@ var sampleWorkflow = {
       owner: "D. Okafor",
       startedAt: "19 Aug \xB7 09:12",
       sla: "Due in 6h",
-      details: /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "space-y-5 px-5 py-4 sm:px-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Review activity" }),
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("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__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "space-y-5 px-5 py-4 sm:px-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Review activity" }),
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("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__ */ (0, import_jsx_runtime302.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Files received" }),
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("ul", { className: "mt-2 flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Files received" }),
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("ul", { className: "mt-2 flex flex-wrap gap-2", children: [
             "data-handling-v3.pdf",
             "pentest-2026.pdf",
             "soc2-typeii.pdf"
-          ].map((file) => /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+          ].map((file) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
             "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",
@@ -61146,11 +61381,11 @@ var sampleWorkflow = {
             file
           )) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Open findings" }),
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("ul", { className: "mt-2 space-y-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Open findings" }),
+          /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("ul", { className: "mt-2 space-y-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -61159,8 +61394,8 @@ var sampleWorkflow = {
               ),
               "Subprocessor \u201CCloudDot BV\u201D is not covered by the DPA yet"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -61238,7 +61473,7 @@ var sampleWorkflow = {
 };
 
 // src/components/WorkflowTracker/WorkflowTrackerRail.tsx
-var import_jsx_runtime303 = require("react/jsx-runtime");
+var import_jsx_runtime302 = require("react/jsx-runtime");
 var WorkflowTrackerRail = ({
   data = sampleWorkflow,
   loading = false,
@@ -61265,14 +61500,14 @@ var WorkflowTrackerRail = ({
   );
   const progress = (0, import_react279.useMemo)(() => computeProgress(steps), [steps]);
   const tallies = (0, import_react279.useMemo)(() => computeTallies(steps), [steps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
     Panel_default,
     {
       ...cardProps,
       scrollable: cardScrollable ?? false,
-      className: (0, import_classnames113.default)(className, cardClassName),
+      className: (0, import_classnames112.default)(className, cardClassName),
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
         WorkflowTimeline_default,
         {
           steps,
@@ -61298,11 +61533,11 @@ var WorkflowTrackerRail_default = WorkflowTrackerRail;
 
 // src/components/WorkflowTracker/WorkflowTrackerStepDetails.tsx
 var import_react280 = require("react");
-var import_classnames115 = __toESM(require("classnames"), 1);
+var import_classnames114 = __toESM(require("classnames"), 1);
 
 // src/components/WorkflowTracker/WorkflowDetailPanel.tsx
-var import_classnames114 = __toESM(require("classnames"), 1);
-var import_jsx_runtime304 = require("react/jsx-runtime");
+var import_classnames113 = __toESM(require("classnames"), 1);
+var import_jsx_runtime303 = require("react/jsx-runtime");
 var WorkflowDetailPanel = ({
   active,
   totalSteps,
@@ -61314,10 +61549,10 @@ var WorkflowDetailPanel = ({
   onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(WorkflowDetailSkeleton, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(WorkflowDetailSkeleton, {});
   }
   if (!active) {
-    return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
       WorkflowPlaceholder,
       {
         title: labels.noActiveStep,
@@ -61335,11 +61570,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__ */ (0, import_jsx_runtime304.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: "px-5 pb-6 pt-5 sm:px-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(SectionTitle, { surfaces, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "px-5 pb-6 pt-5 sm:px-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(SectionTitle, { surfaces, children: [
             labels.step,
             " ",
             index,
@@ -61348,7 +61583,7 @@ var WorkflowDetailPanel = ({
             " ",
             totalSteps
           ] }),
-          step.badge && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+          step.badge && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
             WorkflowBadge,
             {
               status,
@@ -61358,13 +61593,13 @@ var WorkflowDetailPanel = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2", children: [
-          step.elapsed && /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(SectionMeta, { surfaces, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2", children: [
+          step.elapsed && /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(SectionMeta, { surfaces, children: [
             labels.elapsed,
             " ",
             step.elapsed
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
             WorkflowQuickActions_default,
             {
               stepId: step.id,
@@ -61376,18 +61611,18 @@ var WorkflowDetailPanel = ({
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("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__ */ (0, import_jsx_runtime304.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("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__ */ (0, import_jsx_runtime303.jsx)(
         "p",
         {
-          className: (0, import_classnames114.default)(
+          className: (0, import_classnames113.default)(
             "mt-2 max-w-3xl text-sm leading-6",
             surfaces.mutedText
           ),
           children: step.description
         }
       ),
-      metaFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: "mt-5 flex flex-wrap gap-x-10 gap-y-4", children: metaFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+      metaFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "mt-5 flex flex-wrap gap-x-10 gap-y-4", children: metaFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
         MetaField,
         {
           label: field.label,
@@ -61397,18 +61632,18 @@ var WorkflowDetailPanel = ({
         field.label
       )) })
     ] }),
-    subSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(import_jsx_runtime304.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(
+    subSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(import_jsx_runtime303.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(
         "div",
         {
-          className: (0, import_classnames114.default)(
+          className: (0, import_classnames113.default)(
             "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__ */ (0, import_jsx_runtime304.jsx)(SectionTitle, { surfaces, children: labels.subSteps }),
-            /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(SectionMeta, { surfaces, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(SectionTitle, { surfaces, children: labels.subSteps }),
+            /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(SectionMeta, { surfaces, children: [
               summary.accepted,
               " ",
               labels.accepted,
@@ -61424,24 +61659,24 @@ var WorkflowDetailPanel = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
         "ul",
         {
-          className: (0, import_classnames114.default)(
+          className: (0, import_classnames113.default)(
             "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__ */ (0, import_jsx_runtime304.jsxs)(import_jsx_runtime304.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(WorkflowStatusNode_default, { status: subStatus, palette }),
-              /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: subStep.label }),
-                subStep.note && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+            const rowContent = /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)(import_jsx_runtime303.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(WorkflowStatusNode_default, { status: subStatus, palette }),
+              /* @__PURE__ */ (0, import_jsx_runtime303.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: subStep.label }),
+                subStep.note && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
                   "p",
                   {
-                    className: (0, import_classnames114.default)(
+                    className: (0, import_classnames113.default)(
                       "mt-0.5 text-xs leading-5",
                       surfaces.mutedText
                     ),
@@ -61449,7 +61684,7 @@ var WorkflowDetailPanel = ({
                   }
                 )
               ] }),
-              subStep.badge && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+              subStep.badge && /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
                 WorkflowBadge,
                 {
                   status: subStatus,
@@ -61458,10 +61693,10 @@ var WorkflowDetailPanel = ({
                   children: subStep.badge
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
                 "span",
                 {
-                  className: (0, import_classnames114.default)(
+                  className: (0, import_classnames113.default)(
                     "w-10 shrink-0 text-right text-xs tabular-nums",
                     surfaces.faintText
                   ),
@@ -61469,22 +61704,22 @@ var WorkflowDetailPanel = ({
                 }
               )
             ] });
-            const rowClasses = (0, import_classnames114.default)(
+            const rowClasses = (0, import_classnames113.default)(
               "flex w-full items-center gap-3 px-5 py-3 text-left sm:px-6",
               isRunning && getRowHighlight(palette.accent, surfaces.translucent)
             );
-            return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => onSubStepSelect(step.id, subStep.id),
-                className: (0, import_classnames114.default)(
+                className: (0, import_classnames113.default)(
                   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__ */ (0, import_jsx_runtime304.jsx)("div", { className: rowClasses, children: rowContent }) }, subStep.id);
+            ) : /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: rowClasses, children: rowContent }) }, subStep.id);
           })
         }
       )
@@ -61494,7 +61729,7 @@ var WorkflowDetailPanel = ({
 var WorkflowDetailPanel_default = WorkflowDetailPanel;
 
 // src/components/WorkflowTracker/WorkflowTrackerStepDetails.tsx
-var import_jsx_runtime305 = require("react/jsx-runtime");
+var import_jsx_runtime304 = require("react/jsx-runtime");
 var WorkflowTrackerStepDetails = ({
   data = sampleWorkflow,
   loading = false,
@@ -61517,13 +61752,13 @@ var WorkflowTrackerStepDetails = ({
     () => resolveActiveStep(steps, data?.activeStepId),
     [steps, data?.activeStepId]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
     Panel_default,
     {
       ...cardProps,
-      className: (0, import_classnames115.default)(className, cardClassName),
+      className: (0, import_classnames114.default)(className, cardClassName),
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
         WorkflowDetailPanel_default,
         {
           active,
@@ -61543,31 +61778,31 @@ var WorkflowTrackerStepDetails_default = WorkflowTrackerStepDetails;
 
 // src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
 var import_react281 = require("react");
-var import_classnames117 = __toESM(require("classnames"), 1);
+var import_classnames116 = __toESM(require("classnames"), 1);
 
 // src/components/WorkflowTracker/WorkflowDetailsCard.tsx
-var import_classnames116 = __toESM(require("classnames"), 1);
-var import_jsx_runtime306 = require("react/jsx-runtime");
+var import_classnames115 = __toESM(require("classnames"), 1);
+var import_jsx_runtime305 = require("react/jsx-runtime");
 var WorkflowDetailsCard = ({
   details,
   ariaLabel,
   cardProps,
   className,
   style
-}) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
   Panel_default,
   {
     ...cardProps,
     flexBody: true,
-    className: (0, import_classnames116.default)("flex-1", className),
+    className: (0, import_classnames115.default)("flex-1", className),
     style,
-    children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(ScrollArea_default, { className: "h-full", mask: true, role: "region", "aria-label": ariaLabel, children: details })
+    children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(ScrollArea_default, { className: "h-full", mask: true, role: "region", "aria-label": ariaLabel, children: details })
   }
 );
 var WorkflowDetailsCard_default = WorkflowDetailsCard;
 
 // src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_jsx_runtime306 = require("react/jsx-runtime");
 var WorkflowTrackerDetails = ({
   data = sampleWorkflow,
   loading = false,
@@ -61586,21 +61821,110 @@ var WorkflowTrackerDetails = ({
   );
   const details = active?.step.details;
   if (loading || details == null || details === "") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
     WorkflowDetailsCard_default,
     {
       details,
       ariaLabel: labels.details,
       cardProps,
-      className: (0, import_classnames117.default)(className, cardClassName),
+      className: (0, import_classnames116.default)(className, cardClassName),
       style
     }
   );
 };
 var WorkflowTrackerDetails_default = WorkflowTrackerDetails;
 
-// src/components/WorkflowTracker/WorkflowTracker.tsx
+// src/components/WorkflowTracker/WorkflowTrackerRollups.tsx
+var import_react282 = require("react");
+var import_classnames118 = __toESM(require("classnames"), 1);
+
+// src/components/WorkflowTracker/WorkflowSummaryCard.tsx
+var import_classnames117 = __toESM(require("classnames"), 1);
+var import_jsx_runtime307 = require("react/jsx-runtime");
+var WorkflowSummaryCard = ({
+  title,
+  steps,
+  palette,
+  surfaces
+}) => /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "px-5 py-4", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(SectionTitle, { surfaces, children: title }),
+  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("ul", { className: "mt-3 space-y-3", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("li", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+      WorkflowStatusNode_default,
+      {
+        status: normalizeStatus(step.status),
+        palette,
+        className: "mt-0.5"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: step.label }),
+      step.meta && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+        "p",
+        {
+          className: (0, import_classnames117.default)(
+            "mt-0.5 text-xs leading-5",
+            surfaces.mutedText
+          ),
+          children: step.meta
+        }
+      )
+    ] })
+  ] }, step.id)) })
+] });
+var WorkflowSummaryCard_default = WorkflowSummaryCard;
+
+// src/components/WorkflowTracker/WorkflowTrackerRollups.tsx
 var import_jsx_runtime308 = require("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 = (0, import_react282.useMemo)(() => resolveLabels(labelOverrides), [labelOverrides]);
+  const cardProps = buildCardProps(styleProps);
+  const attentionSteps = (0, import_react282.useMemo)(() => getAttentionSteps(steps), [steps]);
+  const skippedSteps = (0, import_react282.useMemo)(() => getSkippedSteps(steps), [steps]);
+  if (loading || attentionSteps.length === 0 && skippedSteps.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames118.default)("grid grid-cols-1 gap-5 @xl:grid-cols-2", className),
+      style,
+      children: [
+        attentionSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Panel_default, { ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+          WorkflowSummaryCard_default,
+          {
+            title: labels.needsAttention,
+            steps: attentionSteps,
+            palette,
+            surfaces
+          }
+        ) }),
+        skippedSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Panel_default, { ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+          WorkflowSummaryCard_default,
+          {
+            title: labels.skippedSteps,
+            steps: skippedSteps,
+            palette,
+            surfaces
+          }
+        ) })
+      ]
+    }
+  );
+};
+var WorkflowTrackerRollups_default = WorkflowTrackerRollups;
+
+// src/components/WorkflowTracker/WorkflowTracker.tsx
+var import_jsx_runtime309 = require("react/jsx-runtime");
 var WorkflowTracker = ({
   data = sampleWorkflow,
   accentColor = "blue",
@@ -61634,7 +61958,6 @@ var WorkflowTracker = ({
   style,
   ...rest
 }) => {
-  const steps = data?.steps ?? [];
   const styleProps = {
     accentColor,
     attentionColor,
@@ -61649,38 +61972,35 @@ var WorkflowTracker = ({
     padding,
     translucentSurfaces
   };
-  const { palette, surfaces } = useWorkflowChrome(styleProps);
-  const labels = (0, import_react282.useMemo)(() => resolveLabels(labelOverrides), [labelOverrides]);
-  const cardProps = buildCardProps(styleProps);
-  const attentionSteps = (0, import_react282.useMemo)(() => getAttentionSteps(steps), [steps]);
-  const skippedSteps = (0, import_react282.useMemo)(() => getSkippedSteps(steps), [steps]);
+  const { surfaces } = useWorkflowChrome(styleProps);
+  const labels = (0, import_react283.useMemo)(() => 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__ */ (0, import_jsx_runtime308.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
     "div",
     {
-      className: (0, import_classnames118.default)("@container w-full", className),
+      className: (0, import_classnames119.default)("@container w-full", className),
       style: { maxWidth, ...railStyle, ...style },
       "aria-busy": loading || void 0,
       ...rest,
       children: [
-        showHeader && loading && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+        showHeader && loading && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
           WorkflowHeaderSkeleton,
           {
             hasIcon: Boolean(data?.icon),
             iconCorner
           }
         ),
-        showHeader && !loading && /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("header", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+        showHeader && !loading && /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("header", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("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__ */ (0, import_jsx_runtime308.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
               "span",
               {
-                className: (0, import_classnames118.default)(
+                className: (0, import_classnames119.default)(
                   "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
@@ -61688,33 +62008,33 @@ var WorkflowTracker = ({
                 children: data.icon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "min-w-0", children: [
-              data?.eyebrow && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)("div", { className: "min-w-0", children: [
+              data?.eyebrow && /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 "p",
                 {
-                  className: (0, import_classnames118.default)(
+                  className: (0, import_classnames119.default)(
                     "text-[11px] font-semibold uppercase tracking-widest",
                     surfaces.faintText
                   ),
                   children: data.eyebrow
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("h2", { className: "mt-1 text-2xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-3xl", children: data?.title })
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("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__ */ (0, import_jsx_runtime308.jsxs)(
+          data?.live && /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
             Pill_default,
             {
               size: "md",
               tone: mutedColor,
               variant: "outline",
-              className: (0, import_classnames118.default)("tracking-wide", surfaces.chip),
+              className: (0, import_classnames119.default)("tracking-wide", surfaces.chip),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: (0, import_classnames118.default)(
+                    className: (0, import_classnames119.default)(
                       "mr-2 inline-block h-1.5 w-1.5 rounded-full",
                       `bg-${accentColor}-500 dark:bg-${accentColor}-400`
                     )
@@ -61725,15 +62045,15 @@ var WorkflowTracker = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
           "div",
           {
-            className: (0, import_classnames118.default)(
+            className: (0, import_classnames119.default)(
               "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__ */ (0, import_jsx_runtime308.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                 WorkflowTrackerRail_default,
                 {
                   ...styleProps,
@@ -61744,7 +62064,7 @@ var WorkflowTracker = ({
                   emptyState,
                   labels: labelOverrides,
                   cardScrollable: fillHeight,
-                  cardClassName: (0, import_classnames118.default)(
+                  cardClassName: (0, import_classnames119.default)(
                     stickyRail && !fillHeight && "@4xl:sticky @4xl:top-6",
                     fillHeight && "@4xl:min-h-0 @4xl:self-stretch"
                   ),
@@ -61753,15 +62073,15 @@ var WorkflowTracker = ({
                   onStepAction
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
                 "div",
                 {
-                  className: (0, import_classnames118.default)(
+                  className: (0, import_classnames119.default)(
                     "@container flex min-w-0 flex-col gap-5",
                     fillHeight && "@4xl:min-h-0 @4xl:self-stretch"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                       WorkflowTrackerStepDetails_default,
                       {
                         ...styleProps,
@@ -61772,7 +62092,7 @@ var WorkflowTracker = ({
                         onStepAction
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
                       WorkflowTrackerDetails_default,
                       {
                         ...styleProps,
@@ -61781,26 +62101,15 @@ var WorkflowTracker = ({
                         labels: labelOverrides
                       }
                     ),
-                    !loading && (attentionSteps.length > 0 || skippedSteps.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "grid grid-cols-1 gap-5 @xl:grid-cols-2", children: [
-                      attentionSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Panel_default, { ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
-                        WorkflowSummaryCard_default,
-                        {
-                          title: labels.needsAttention,
-                          steps: attentionSteps,
-                          palette,
-                          surfaces
-                        }
-                      ) }),
-                      skippedSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(Panel_default, { ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
-                        WorkflowSummaryCard_default,
-                        {
-                          title: labels.skippedSteps,
-                          steps: skippedSteps,
-                          palette,
-                          surfaces
-                        }
-                      ) })
-                    ] })
+                    /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+                      WorkflowTrackerRollups_default,
+                      {
+                        ...styleProps,
+                        data,
+                        loading,
+                        labels: labelOverrides
+                      }
+                    )
                   ]
                 }
               )
@@ -61814,9 +62123,9 @@ var WorkflowTracker = ({
 var WorkflowTracker_default = WorkflowTracker;
 
 // src/components/Gantt/Gantt.tsx
-var import_react287 = require("react");
+var import_react288 = require("react");
 var import_react_dom15 = require("react-dom");
-var import_classnames122 = __toESM(require("classnames"), 1);
+var import_classnames123 = __toESM(require("classnames"), 1);
 
 // ../common/gantt/types.ts
 var GANTT_ZOOM_PRESETS = [
@@ -63162,38 +63471,38 @@ var sampleGantt = {
 };
 
 // src/components/Gantt/GanttScale.tsx
-var import_classnames119 = __toESM(require("classnames"), 1);
-var import_jsx_runtime309 = require("react/jsx-runtime");
+var import_classnames120 = __toESM(require("classnames"), 1);
+var import_jsx_runtime310 = require("react/jsx-runtime");
 var GanttScale = ({ levels, height }) => {
   if (levels.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { style: { height } });
+    return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { style: { height } });
   }
   const coarseHeight = levels.length > 1 ? 24 : height;
-  return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { className: "flex h-full w-full flex-col", children: levels.map((level, li) => /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("div", { className: "flex h-full w-full flex-col", children: levels.map((level, li) => /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
     "div",
     {
-      className: (0, import_classnames119.default)("flex w-full", li === 0 ? "shrink-0" : "min-h-0 flex-1"),
+      className: (0, import_classnames120.default)("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__ */ (0, import_jsx_runtime309.jsxs)(
+      children: level.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
         "div",
         {
-          className: (0, import_classnames119.default)(
+          className: (0, import_classnames120.default)(
             "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__ */ (0, import_jsx_runtime309.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
               "span",
               {
-                className: (0, import_classnames119.default)(
+                className: (0, import_classnames120.default)(
                   "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__ */ (0, import_jsx_runtime309.jsx)("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__ */ (0, import_jsx_runtime310.jsx)("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
@@ -63205,9 +63514,9 @@ var GanttScale = ({ levels, height }) => {
 GanttScale.displayName = "GanttScale";
 
 // src/components/Gantt/GanttLinkLayer.tsx
-var import_react283 = require("react");
-var import_jsx_runtime310 = require("react/jsx-runtime");
-var GanttLinkLayer = (0, import_react283.forwardRef)(
+var import_react284 = require("react");
+var import_jsx_runtime311 = require("react/jsx-runtime");
+var GanttLinkLayer = (0, import_react284.forwardRef)(
   function GanttLinkLayer2({
     width,
     height,
@@ -63221,7 +63530,7 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
     onDeleteLink
   }, ref) {
     const t = useKitT();
-    const svgRef = (0, import_react283.useRef)(null);
+    const svgRef = (0, import_react284.useRef)(null);
     const selPath = selected ? paths.find((p) => p.link === selected) : void 0;
     const selColor = selPath ? selPath.color ?? color : color;
     const selMid = selPath ? { x: (selPath.from.x + selPath.to.x) / 2, y: (selPath.from.y + selPath.to.y) / 2 } : null;
@@ -63242,24 +63551,24 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
       const pick = pickFromEvent(e) ?? clicked;
       if (interactive && onDeleteLink) onDeleteLink(pick.link);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
         ref,
         className: "pointer-events-none absolute top-0 z-10",
         style: { left: offsetLeft, width, height },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("svg", { ref: svgRef, width, height, className: "block overflow-visible", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("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__ */ (0, import_jsx_runtime310.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
                 "g",
                 {
                   style: sel ? { filter: `drop-shadow(0 0 3px var(--color-${p.color ?? color}-500))` } : void 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
                       "path",
                       {
                         d: p.d,
@@ -63275,10 +63584,10 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
                       "path",
                       {
                         d: p.d,
@@ -63294,14 +63603,14 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    p.arrow && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("polygon", { points: p.arrow, className: tokens.fill }),
-                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: p.from.x, cy: p.from.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: p.from.x, cy: p.from.y, r: nodeR, className: tokens.fill }),
-                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: p.to.x, cy: p.to.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: p.to.x, cy: p.to.y, r: nodeR, className: tokens.fill })
+                    p.arrow && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("polygon", { points: p.arrow, className: tokens.fill }),
+                    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: p.from.x, cy: p.from.y, r: nodeR + 2.5, className: tokens.halo }),
+                    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: p.from.x, cy: p.from.y, r: nodeR, className: tokens.fill }),
+                    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: p.to.x, cy: p.to.y, r: nodeR + 2.5, className: tokens.halo }),
+                    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: p.to.x, cy: p.to.y, r: nodeR, className: tokens.fill })
                   ]
                 },
                 `${p.link.source}->${p.link.target}-${p.type}-${i}`
@@ -63309,8 +63618,8 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
             }),
             rubber && (() => {
               const tokens = getGanttLinkTokens(rubber.color);
-              return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("g", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("g", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
                   "path",
                   {
                     d: rubber.d,
@@ -63321,15 +63630,15 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
                     strokeDasharray: "5 3"
                   }
                 ),
-                rubber.arrow && /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("polygon", { points: rubber.arrow, className: tokens.fill }),
-                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 3.5, className: tokens.fill }),
-                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 3.5, className: tokens.fill })
+                rubber.arrow && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("polygon", { points: rubber.arrow, className: tokens.fill }),
+                /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 6, className: tokens.halo }),
+                /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 3.5, className: tokens.fill }),
+                /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 6, className: tokens.halo }),
+                /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 3.5, className: tokens.fill })
               ] });
             })()
           ] }),
-          canDelete && selMid && /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
+          canDelete && selMid && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
             "button",
             {
               type: "button",
@@ -63347,7 +63656,7 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
               onClick: () => onDeleteLink(selected),
               title: t("kit.gantt.removeDependency"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("span", { "aria-hidden": true, children: "\u2715" }),
+                /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { "aria-hidden": true, children: "\u2715" }),
                 " ",
                 t("kit.gantt.delete")
               ]
@@ -63361,9 +63670,9 @@ var GanttLinkLayer = (0, import_react283.forwardRef)(
 GanttLinkLayer.displayName = "GanttLinkLayer";
 
 // src/components/Gantt/GanttBodyRow.tsx
-var import_react284 = require("react");
-var import_classnames120 = __toESM(require("classnames"), 1);
-var import_jsx_runtime311 = require("react/jsx-runtime");
+var import_react285 = require("react");
+var import_classnames121 = __toESM(require("classnames"), 1);
+var import_jsx_runtime312 = require("react/jsx-runtime");
 var BAR_HEIGHT = 24;
 var MILESTONE_SIZE = 14;
 var GanttBodyRow = ({
@@ -63402,11 +63711,11 @@ var GanttBodyRow = ({
   const t = useKitT();
   const isDraggingThis = row.task != null && drag?.taskId === row.task.id;
   const reorderDragging = isDraggingThis && drag?.kind === "reorder";
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
     "div",
     {
       "data-row-key": row.key,
-      className: (0, import_classnames120.default)(
+      className: (0, import_classnames121.default)(
         // 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
@@ -63423,7 +63732,7 @@ var GanttBodyRow = ({
           boxShadow: `inset 2px 0 0 var(--color-${color}-500)`
         } : {}
       },
-      children: row.task == null ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+      children: row.task == null ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
         LaneHeader,
         {
           row,
@@ -63434,20 +63743,20 @@ var GanttBodyRow = ({
           dividerClass,
           liveProgress: liveLane
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
           "div",
           {
-            className: (0, import_classnames120.default)(
+            className: (0, import_classnames121.default)(
               "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__ */ (0, import_jsx_runtime311.jsx)("div", { className: "flex w-9 shrink-0 items-center justify-center", children: interactive && !row.task.locked && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "flex w-9 shrink-0 items-center justify-center", children: interactive && !row.task.locked && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
                 "span",
                 {
-                  className: (0, import_classnames120.default)(
+                  className: (0, import_classnames121.default)(
                     "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"
                   ),
@@ -63455,10 +63764,10 @@ var GanttBodyRow = ({
                   onPointerDown: (e) => onGripPointerDown(row.key, row.task, e),
                   title: t("kit.gantt.dragReorder"),
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(Drag, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(Drag, { className: "h-3.5 w-3.5" })
                 }
               ) }),
-              columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+              columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
                 Cell,
                 {
                   col,
@@ -63479,12 +63788,12 @@ var GanttBodyRow = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
           "div",
           {
-            className: (0, import_classnames120.default)("relative shrink-0 border-b", dividerClass),
+            className: (0, import_classnames121.default)("relative shrink-0 border-b", dividerClass),
             style: { width: timelineWidth },
-            children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
               TaskBar,
               {
                 task: row.task,
@@ -63525,57 +63834,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__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
       "div",
       {
-        className: (0, import_classnames120.default)(
+        className: (0, import_classnames121.default)(
           "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__ */ (0, import_jsx_runtime311.jsx)("div", { className: (0, import_classnames120.default)("pointer-events-none absolute inset-0", tokens.band) }),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "relative flex w-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: (0, import_classnames121.default)("pointer-events-none absolute inset-0", tokens.band) }),
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "relative flex w-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
             "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__ */ (0, import_jsx_runtime311.jsx)(ChevronRight, { className: (0, import_classnames120.default)("h-3 w-3 transition-transform", isOpen && "rotate-90") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(ChevronRight, { className: (0, import_classnames121.default)("h-3 w-3 transition-transform", isOpen && "rotate-90") })
             }
           ) }),
-          columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+          columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
             "div",
             {
-              className: (0, import_classnames120.default)(
+              className: (0, import_classnames121.default)(
                 "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__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: (0, import_classnames120.default)("truncate text-[13px] font-semibold", tokens.label), children: lane.label }),
-                lane.description && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "hidden truncate text-[11px] text-neutral-500 dark:text-neutral-400 lg:inline", children: lane.description }),
-                row.childCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("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__ */ (0, import_jsx_runtime311.jsx)(ProgressCell, { value: liveProgress ?? row.progress ?? 0, barClass: tokens.chip }) : null
+              children: i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: (0, import_classnames121.default)("truncate text-[13px] font-semibold", tokens.label), children: lane.label }),
+                lane.description && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "hidden truncate text-[11px] text-neutral-500 dark:text-neutral-400 lg:inline", children: lane.description }),
+                row.childCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("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__ */ (0, import_jsx_runtime312.jsx)(ProgressCell, { value: liveProgress ?? row.progress ?? 0, barClass: tokens.chip }) : null
             },
             col.key
           ))
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: (0, import_classnames120.default)("relative min-w-0 flex-1 border-b", dividerClass), children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: (0, import_classnames120.default)("absolute inset-0", tokens.band) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: (0, import_classnames121.default)("relative min-w-0 flex-1 border-b", dividerClass), children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: (0, import_classnames121.default)("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__ */ (0, import_jsx_runtime311.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
     "div",
     {
-      className: (0, import_classnames120.default)(
+      className: (0, import_classnames121.default)(
         "flex shrink-0 items-center gap-1.5 overflow-hidden border-r px-2 text-[12.5px] last:border-r-0",
         dividerClass
       ),
@@ -63583,50 +63892,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__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "shrink-0", style: { width: depth * 14 + 18 }, children: isGroup && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+      children: first ? /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "shrink-0", style: { width: depth * 14 + 18 }, children: isGroup && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
           "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__ */ (0, import_jsx_runtime311.jsx)(ChevronRight, { className: (0, import_classnames120.default)("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(ChevronRight, { className: (0, import_classnames121.default)("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
           }
         ) }),
-        isGroup && childCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("span", { className: "flex min-w-0 items-center gap-1 font-semibold text-neutral-800 dark:text-neutral-100", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "truncate", children: task.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("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__ */ (0, import_jsx_runtime311.jsx)("span", { className: "truncate font-medium text-neutral-700 dark:text-neutral-300", children: task.name })
-      ] }) : col.kind === "owner" ? value != null ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5 text-neutral-600 dark:text-neutral-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        isGroup && childCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("span", { className: "flex min-w-0 items-center gap-1 font-semibold text-neutral-800 dark:text-neutral-100", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "truncate", children: task.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("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__ */ (0, import_jsx_runtime312.jsx)("span", { className: "truncate font-medium text-neutral-700 dark:text-neutral-300", children: task.name })
+      ] }) : col.kind === "owner" ? value != null ? /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5 text-neutral-600 dark:text-neutral-400", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
           "span",
           {
-            className: (0, import_classnames120.default)(
+            className: (0, import_classnames121.default)(
               "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__ */ (0, import_jsx_runtime311.jsx)("span", { className: "truncate", children: String(value) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : col.kind === "progress" ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(ProgressCell, { value: typeof value === "number" ? value : 0 }) : col.kind === "badge" ? task.badge != null ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "truncate", children: String(value) })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : col.kind === "progress" ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(ProgressCell, { value: typeof value === "number" ? value : 0 }) : col.kind === "badge" ? task.badge != null ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
         "span",
         {
-          className: (0, import_classnames120.default)(
+          className: (0, import_classnames121.default)(
             "rounded-full px-1.5 py-0.5 text-[10px] font-semibold",
             getGanttBarTokens(task.badgeColor ?? "neutral").fill,
             "text-white"
           ),
           children: task.badge
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : custom != null ? custom : /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "truncate text-neutral-600 dark:text-neutral-400", children: value == null || value === "" ? "\u2014" : String(value) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : custom != null ? custom : /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("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__ */ (0, import_jsx_runtime311.jsxs)("span", { className: "flex w-full items-center gap-1.5", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-neutral-200/80 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: (0, import_classnames120.default)("block h-full rounded-full", barClass), style: { width: `${Math.round(value * 100)}%` } }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("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__ */ (0, import_jsx_runtime312.jsxs)("span", { className: "flex w-full items-center gap-1.5", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-neutral-200/80 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: (0, import_classnames121.default)("block h-full rounded-full", barClass), style: { width: `${Math.round(value * 100)}%` } }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)("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),
     "%"
   ] })
@@ -63658,7 +63967,7 @@ var TaskBar = ({
   const t = useKitT();
   const milestone = task.type === "milestone";
   const barColor = task.color ?? color;
-  const tokens = (0, import_react284.useMemo)(() => getGanttBarTokens(barColor), [barColor]);
+  const tokens = (0, import_react285.useMemo)(() => 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);
@@ -63683,7 +63992,7 @@ var TaskBar = ({
     pct: progressPct
   });
   if (milestone) {
-    return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
       "div",
       {
         role: "button",
@@ -63691,7 +64000,7 @@ var TaskBar = ({
         "aria-label": ariaLabel,
         title: ariaLabel,
         "data-gantt-bar": task.id,
-        className: (0, import_classnames120.default)(
+        className: (0, import_classnames121.default)(
           "absolute z-10 flex cursor-pointer items-center gap-1.5 outline-none",
           selected && selectionTokens.ring,
           "rounded"
@@ -63701,13 +64010,13 @@ var TaskBar = ({
         onClick: () => onSelect(task.id),
         onKeyDown: (e) => onBarKeyDown(e, task),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: (0, import_classnames120.default)("h-3.5 w-3.5 shrink-0 rotate-45 rounded-[2px] shadow-sm", tokens.milestone) }),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("span", { className: "truncate text-[11px] font-semibold text-neutral-700 dark:text-neutral-300", children: task.name })
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: (0, import_classnames121.default)("h-3.5 w-3.5 shrink-0 rotate-45 rounded-[2px] shadow-sm", tokens.milestone) }),
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "truncate text-[11px] font-semibold text-neutral-700 dark:text-neutral-300", children: task.name })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
     "div",
     {
       role: "button",
@@ -63715,7 +64024,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: (0, import_classnames120.default)(
+      className: (0, import_classnames121.default)(
         "group/bar absolute z-10 cursor-grab touch-none rounded-md shadow-sm outline-none transition-shadow active:cursor-grabbing",
         tokens.base,
         tokens.rim,
@@ -63732,17 +64041,17 @@ var TaskBar = ({
       onClick: () => onSelect(task.id),
       onKeyDown: (e) => onBarKeyDown(e, task),
       children: [
-        progress > 0 && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        progress > 0 && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
           "div",
           {
-            className: (0, import_classnames120.default)("absolute inset-y-0 left-0 rounded-l-md", tokens.progress),
+            className: (0, import_classnames121.default)("absolute inset-y-0 left-0 rounded-l-md", tokens.progress),
             style: { width: `${progress * 100}%` }
           }
         ),
-        canEdit && !row.isGroup && progress > 0 && progress < 1 && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        canEdit && !row.isGroup && progress > 0 && progress < 1 && /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
           "div",
           {
-            className: (0, import_classnames120.default)(
+            className: (0, import_classnames121.default)(
               "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"
             ),
@@ -63750,10 +64059,10 @@ var TaskBar = ({
             onPointerDown: (e) => onProgressPointerDown(task, e),
             title: labels.progress,
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
           }
         ),
-        liveProgress != null && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
+        liveProgress != null && /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
           "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",
@@ -63764,31 +64073,31 @@ var TaskBar = ({
             ]
           }
         ),
-        showName && (renderBar != null ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: (0, import_classnames120.default)("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__ */ (0, import_jsx_runtime311.jsx)("span", { className: (0, import_classnames120.default)("pointer-events-none absolute inset-0 flex items-center truncate px-1.5 text-[11px] font-medium", labelText), children: task.name })),
-        canEdit && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        showName && (renderBar != null ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: (0, import_classnames121.default)("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__ */ (0, import_jsx_runtime312.jsx)("span", { className: (0, import_classnames121.default)("pointer-events-none absolute inset-0 flex items-center truncate px-1.5 text-[11px] font-medium", labelText), children: task.name })),
+        canEdit && /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
             "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__ */ (0, import_jsx_runtime311.jsx)("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
             "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__ */ (0, import_jsx_runtime311.jsx)("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
             }
           )
         ] }),
-        canEdit && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+        canEdit && /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(import_jsx_runtime312.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
             "button",
             {
               type: "button",
@@ -63799,7 +64108,7 @@ var TaskBar = ({
               "aria-label": t("kit.gantt.linkFromStart", { task: task.name })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
             "button",
             {
               type: "button",
@@ -63817,9 +64126,9 @@ var TaskBar = ({
 };
 
 // src/components/Gantt/GanttToolbar.tsx
-var import_react285 = require("react");
-var import_classnames121 = __toESM(require("classnames"), 1);
-var import_jsx_runtime312 = require("react/jsx-runtime");
+var import_react286 = require("react");
+var import_classnames122 = __toESM(require("classnames"), 1);
+var import_jsx_runtime313 = require("react/jsx-runtime");
 function nearestPreset(zoom, presets) {
   let best = null;
   let bestDist = Infinity;
@@ -63846,25 +64155,25 @@ var GanttToolbar = ({
     Month: t("kit.gantt.zoomMonth"),
     Quarter: t("kit.gantt.zoomQuarter")
   };
-  const active = (0, import_react285.useMemo)(() => nearestPreset(zoom, presets), [zoom, presets]);
-  const chrome = (0, import_react285.useMemo)(
+  const active = (0, import_react286.useMemo)(() => nearestPreset(zoom, presets), [zoom, presets]);
+  const chrome = (0, import_react286.useMemo)(
     () => getSurfaceVariantClasses(variant, "neutral"),
     [variant]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
     "div",
     {
-      className: (0, import_classnames121.default)(
+      className: (0, import_classnames122.default)(
         "pointer-events-auto flex items-center gap-1 rounded-lg p-1",
         chrome
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "flex items-center rounded-md bg-neutral-100 p-0.5 dark:bg-neutral-800", children: presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "flex items-center rounded-md bg-neutral-100 p-0.5 dark:bg-neutral-800", children: presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
           "button",
           {
             type: "button",
             onClick: () => onZoomTo(p.value),
-            className: (0, import_classnames121.default)(
+            className: (0, import_classnames122.default)(
               "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"
             ),
@@ -63872,9 +64181,9 @@ var GanttToolbar = ({
           },
           p.label
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("div", { className: "mx-0.5 h-4 w-px bg-neutral-200 dark:bg-neutral-700" }),
-        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1 / 1.25), "aria-label": t("kit.gantt.zoomOut"), children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "text-xs font-semibold leading-none", children: "\u2212" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime312.jsx)(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1.25), "aria-label": t("kit.gantt.zoomIn"), children: /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("span", { className: "text-xs font-semibold leading-none", children: "+" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "mx-0.5 h-4 w-px bg-neutral-200 dark:bg-neutral-700" }),
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1 / 1.25), "aria-label": t("kit.gantt.zoomOut"), children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("span", { className: "text-xs font-semibold leading-none", children: "\u2212" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1.25), "aria-label": t("kit.gantt.zoomIn"), children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("span", { className: "text-xs font-semibold leading-none", children: "+" }) })
       ]
     }
   );
@@ -63882,16 +64191,16 @@ var GanttToolbar = ({
 GanttToolbar.displayName = "GanttToolbar";
 
 // src/components/Gantt/useGanttDrag.ts
-var import_react286 = require("react");
+var import_react287 = require("react");
 function useGanttDrag(opts) {
-  const [drag, setDrag] = (0, import_react286.useState)(null);
-  const [linkSelected, setLinkSelected] = (0, import_react286.useState)(null);
-  const optsRef = (0, import_react286.useRef)(opts);
+  const [drag, setDrag] = (0, import_react287.useState)(null);
+  const [linkSelected, setLinkSelected] = (0, import_react287.useState)(null);
+  const optsRef = (0, import_react287.useRef)(opts);
   optsRef.current = opts;
-  const dragRef = (0, import_react286.useRef)(null);
+  const dragRef = (0, import_react287.useRef)(null);
   dragRef.current = drag;
   const { rows, zoom, rangeStart, accentColor } = opts;
-  const barGeom = (0, import_react286.useCallback)(
+  const barGeom = (0, import_react287.useCallback)(
     (taskId) => {
       const row = rows.find((r) => r.key === `task:${taskId}`);
       if (!row?.task) return null;
@@ -63911,7 +64220,7 @@ function useGanttDrag(opts) {
     },
     [rows, zoom, rangeStart]
   );
-  const findTargetBar = (0, import_react286.useCallback)(
+  const findTargetBar = (0, import_react287.useCallback)(
     (x, y, excludeId) => {
       const row = rows.find((r) => r.task && y >= r.top && y < r.top + r.height);
       if (!row?.task || row.task.id === excludeId) return null;
@@ -63922,7 +64231,7 @@ function useGanttDrag(opts) {
     },
     [rows, barGeom]
   );
-  const allBarGeoms = (0, import_react286.useCallback)(() => {
+  const allBarGeoms = (0, import_react287.useCallback)(() => {
     const out = [];
     for (const row of rows) {
       if (!row.task) continue;
@@ -63931,17 +64240,17 @@ function useGanttDrag(opts) {
     }
     return out;
   }, [rows, barGeom]);
-  const timelineX = (0, import_react286.useCallback)((clientX) => {
+  const timelineX = (0, import_react287.useCallback)((clientX) => {
     const overlay = optsRef.current.overlayRef.current;
     if (!overlay) return 0;
     return clientX - overlay.getBoundingClientRect().left;
   }, []);
-  const rowY = (0, import_react286.useCallback)((clientY) => {
+  const rowY = (0, import_react287.useCallback)((clientY) => {
     const overlay = optsRef.current.overlayRef.current;
     if (!overlay) return 0;
     return clientY - overlay.getBoundingClientRect().top;
   }, []);
-  (0, import_react286.useEffect)(() => {
+  (0, import_react287.useEffect)(() => {
     if (!drag) return;
     const onMove = (e) => {
       e.preventDefault();
@@ -64066,7 +64375,7 @@ function useGanttDrag(opts) {
       window.removeEventListener("pointerup", onUp);
     };
   }, [drag != null, timelineX, rowY]);
-  const beginDrag = (0, import_react286.useCallback)(
+  const beginDrag = (0, import_react287.useCallback)(
     (partial, e, focusEl) => {
       const o = optsRef.current;
       if (!o.interactive) return;
@@ -64100,7 +64409,7 @@ function useGanttDrag(opts) {
     },
     [timelineX, rowY]
   );
-  const onBarPointerDown = (0, import_react286.useCallback)(
+  const onBarPointerDown = (0, import_react287.useCallback)(
     (task, e) => {
       if (e.button !== 0) return;
       beginDrag(
@@ -64118,7 +64427,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onResizePointerDown = (0, import_react286.useCallback)(
+  const onResizePointerDown = (0, import_react287.useCallback)(
     (task, edge, e) => {
       if (e.button !== 0) return;
       e.stopPropagation();
@@ -64137,7 +64446,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onGripPointerDown = (0, import_react286.useCallback)(
+  const onGripPointerDown = (0, import_react287.useCallback)(
     (_rowKey, task, e) => {
       if (e.button !== 0) return;
       const rowEl = e.currentTarget.closest(
@@ -64162,7 +64471,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onLinkHandlePointerDown = (0, import_react286.useCallback)(
+  const onLinkHandlePointerDown = (0, import_react287.useCallback)(
     (task, side, e, fromOffset = 0) => {
       if (e.button !== 0) return;
       e.stopPropagation();
@@ -64182,7 +64491,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onProgressPointerDown = (0, import_react286.useCallback)(
+  const onProgressPointerDown = (0, import_react287.useCallback)(
     (task, e) => {
       if (e.button !== 0) return;
       e.stopPropagation();
@@ -64200,7 +64509,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const rubber = (0, import_react286.useMemo)(() => {
+  const rubber = (0, import_react287.useMemo)(() => {
     if (!drag || drag.kind !== "link") return null;
     const source = barGeom(drag.taskId);
     if (!source) return null;
@@ -64232,7 +64541,7 @@ function useGanttDrag(opts) {
 }
 
 // src/components/Gantt/Gantt.tsx
-var import_jsx_runtime313 = require("react/jsx-runtime");
+var import_jsx_runtime314 = require("react/jsx-runtime");
 var HEADER_HEIGHT = 52;
 var GRIP_WIDTH = 36;
 var DEFAULT_COLUMNS = [
@@ -64291,7 +64600,7 @@ var Gantt = ({
   const t = useKitT();
   const kitEngine = useKitEngine();
   const dateLocale = locale ?? kitEngine.locale;
-  const allLabels = (0, import_react287.useMemo)(
+  const allLabels = (0, import_react288.useMemo)(
     () => ({
       loading: t("kit.gantt.loading"),
       empty: t("kit.gantt.empty"),
@@ -64314,10 +64623,10 @@ 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 = (0, import_react287.useMemo)(() => getSurfaceTextTokens(variant), [variant]);
-  const [internalZoom, setInternalZoom] = (0, import_react287.useState)(initialZoom);
+  const surfaceText = (0, import_react288.useMemo)(() => getSurfaceTextTokens(variant), [variant]);
+  const [internalZoom, setInternalZoom] = (0, import_react288.useState)(initialZoom);
   const zoom = zoomProp ?? internalZoom;
-  const setZoom = (0, import_react287.useCallback)(
+  const setZoom = (0, import_react288.useCallback)(
     (z) => {
       const clamped = Math.min(maxZoom, Math.max(minZoom, z));
       if (onZoomChange) onZoomChange(clamped);
@@ -64325,33 +64634,33 @@ var Gantt = ({
     },
     [minZoom, maxZoom, onZoomChange]
   );
-  const [internalSelection, setInternalSelection] = (0, import_react287.useState)(null);
+  const [internalSelection, setInternalSelection] = (0, import_react288.useState)(null);
   const selectedId = selectedIdProp !== void 0 ? selectedIdProp : internalSelection;
-  const setSelected = (0, import_react287.useCallback)(
+  const setSelected = (0, import_react288.useCallback)(
     (id) => {
       onSelect?.(id);
       if (selectedIdProp === void 0) setInternalSelection(id);
     },
     [onSelect, selectedIdProp]
   );
-  const [internalOrder, setInternalOrder] = (0, import_react287.useState)(void 0);
+  const [internalOrder, setInternalOrder] = (0, import_react288.useState)(void 0);
   const rowOrder = rowOrderProp ?? internalOrder;
-  const handleReorder = (0, import_react287.useCallback)(
+  const handleReorder = (0, import_react288.useCallback)(
     (order) => {
       onReorder?.(order);
       if (rowOrderProp === void 0) setInternalOrder(order);
     },
     [onReorder, rowOrderProp]
   );
-  const [collapsed, setCollapsed] = (0, import_react287.useState)(
+  const [collapsed, setCollapsed] = (0, import_react288.useState)(
     () => new Set(tasks.filter((t2) => t2.open === false).map((t2) => t2.id))
   );
-  const [closedLanes, setClosedLanes] = (0, import_react287.useState)(
+  const [closedLanes, setClosedLanes] = (0, import_react288.useState)(
     () => new Set((lanes ?? []).filter((l) => l.open === false).map((l) => l.id))
   );
-  const tasksRef = (0, import_react287.useRef)(tasks);
-  const lanesRef = (0, import_react287.useRef)(lanes);
-  (0, import_react287.useEffect)(() => {
+  const tasksRef = (0, import_react288.useRef)(tasks);
+  const lanesRef = (0, import_react288.useRef)(lanes);
+  (0, import_react288.useEffect)(() => {
     if (tasksRef.current !== tasks) {
       tasksRef.current = tasks;
       setCollapsed(new Set(tasks.filter((t2) => t2.open === false).map((t2) => t2.id)));
@@ -64361,7 +64670,7 @@ var Gantt = ({
       setClosedLanes(new Set((lanes ?? []).filter((l) => l.open === false).map((l) => l.id)));
     }
   }, [tasks, lanes]);
-  const toggleCollapse = (0, import_react287.useCallback)((taskId, isOpen) => {
+  const toggleCollapse = (0, import_react288.useCallback)((taskId, isOpen) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
       if (isOpen) next.add(taskId);
@@ -64369,7 +64678,7 @@ var Gantt = ({
       return next;
     });
   }, []);
-  const toggleLane = (0, import_react287.useCallback)((laneId, isOpen) => {
+  const toggleLane = (0, import_react288.useCallback)((laneId, isOpen) => {
     setClosedLanes((prev) => {
       const next = new Set(prev);
       if (isOpen) next.add(laneId);
@@ -64377,37 +64686,37 @@ var Gantt = ({
       return next;
     });
   }, []);
-  const effectiveTasks = (0, import_react287.useMemo)(() => {
+  const effectiveTasks = (0, import_react288.useMemo)(() => {
     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 = (0, import_react287.useMemo)(() => {
+  const effectiveLanes = (0, import_react288.useMemo)(() => {
     if (closedLanes.size === 0) return lanes;
     return (lanes ?? []).map(
       (l) => closedLanes.has(l.id) ? { ...l, open: false } : l
     );
   }, [lanes, closedLanes]);
-  const committedModel = (0, import_react287.useMemo)(
+  const committedModel = (0, import_react288.useMemo)(
     () => buildRows(effectiveTasks, effectiveLanes, rowOrder, rowHeight2),
     [effectiveTasks, effectiveLanes, rowOrder, rowHeight2]
   );
-  const range = (0, import_react287.useMemo)(() => {
+  const range = (0, import_react288.useMemo)(() => {
     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 = (0, import_react287.useMemo)(
+  const scaleLevels = (0, import_react288.useMemo)(
     () => buildTimeScale(range.start, range.end, zoom, dateLocale),
     [range, zoom, dateLocale]
   );
-  const [colWidths, setColWidths] = (0, import_react287.useState)(
+  const [colWidths, setColWidths] = (0, import_react288.useState)(
     () => columnWidths ? { ...columnWidths } : {}
   );
-  (0, import_react287.useEffect)(() => {
+  (0, import_react288.useEffect)(() => {
     if (!columnWidths) return;
     setColWidths((prev) => ({ ...prev, ...columnWidths }));
   }, [columnWidths]);
@@ -64417,21 +64726,21 @@ var Gantt = ({
     const m = /^(\d+(?:\.\d+)?)px$/.exec(col.width ?? "");
     return m ? Number(m[1]) : 160;
   };
-  const sizedColumns = (0, import_react287.useMemo)(
+  const sizedColumns = (0, import_react288.useMemo)(
     () => resolvedColumns.map((c) => ({ ...c, width: `${effectiveColWidth(c)}px` })),
     [resolvedColumns, colWidths]
   );
-  const effectiveWidthsRef = (0, import_react287.useRef)({});
+  const effectiveWidthsRef = (0, import_react288.useRef)({});
   effectiveWidthsRef.current = Object.fromEntries(
     sizedColumns.map((c) => [c.key, effectiveColWidth(c)])
   );
-  const leftWidth = (0, import_react287.useMemo)(
+  const leftWidth = (0, import_react288.useMemo)(
     () => GRIP_WIDTH + resolvedColumns.reduce((sum, c) => sum + effectiveColWidth(c), 0),
     [resolvedColumns, colWidths]
   );
-  const resizingRef = (0, import_react287.useRef)(null);
-  const [resizingKey, setResizingKey] = (0, import_react287.useState)(null);
-  const startColumnResize = (0, import_react287.useCallback)(
+  const resizingRef = (0, import_react288.useRef)(null);
+  const [resizingKey, setResizingKey] = (0, import_react288.useState)(null);
+  const startColumnResize = (0, import_react288.useCallback)(
     (e, key) => {
       if (e.button !== 0) return;
       e.preventDefault();
@@ -64462,23 +64771,23 @@ var Gantt = ({
     },
     [onColumnWidthChange]
   );
-  (0, import_react287.useEffect)(
+  (0, import_react288.useEffect)(
     () => () => {
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
     },
     []
   );
-  const scrollRef = (0, import_react287.useRef)(null);
-  const overlayRef = (0, import_react287.useRef)(null);
-  const rootRef = (0, import_react287.useRef)(null);
-  const headerScaleRef = (0, import_react287.useRef)(null);
-  const syncHeaderScale = (0, import_react287.useCallback)(() => {
+  const scrollRef = (0, import_react288.useRef)(null);
+  const overlayRef = (0, import_react288.useRef)(null);
+  const rootRef = (0, import_react288.useRef)(null);
+  const headerScaleRef = (0, import_react288.useRef)(null);
+  const syncHeaderScale = (0, import_react288.useCallback)(() => {
     const s = scrollRef.current;
     const h = headerScaleRef.current;
     if (s && h) h.style.transform = `translateX(${-s.scrollLeft}px)`;
   }, []);
-  const zoomBy = (0, import_react287.useCallback)(
+  const zoomBy = (0, import_react288.useCallback)(
     (factor, pointerClientX) => {
       const el = scrollRef.current;
       const next = Math.min(maxZoom, Math.max(minZoom, zoom * factor));
@@ -64497,7 +64806,7 @@ var Gantt = ({
     },
     [zoom, minZoom, maxZoom, leftWidth, setZoom]
   );
-  (0, import_react287.useEffect)(() => {
+  (0, import_react288.useEffect)(() => {
     const el = scrollRef.current;
     if (!el) return;
     const onWheel = (e) => {
@@ -64509,10 +64818,10 @@ var Gantt = ({
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
   }, [zoomBy]);
-  (0, import_react287.useEffect)(() => {
+  (0, import_react288.useEffect)(() => {
     syncHeaderScale();
   }, [syncHeaderScale, timelineWidth, zoom, range.start, leftWidth]);
-  const liveRowsRef = (0, import_react287.useRef)(null);
+  const liveRowsRef = (0, import_react288.useRef)(null);
   const dragApi = useGanttDrag({
     scrollRef,
     overlayRef,
@@ -64534,12 +64843,12 @@ var Gantt = ({
     rowOrder,
     setSelected
   });
-  const liveReorder = (0, import_react287.useMemo)(() => {
+  const liveReorder = (0, import_react288.useMemo)(() => {
     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 = (0, import_react287.useMemo)(
+  const liveModel = (0, import_react288.useMemo)(
     () => liveReorder ? buildRows(
       liveReorder.tasks,
       effectiveLanes,
@@ -64549,7 +64858,7 @@ var Gantt = ({
     [liveReorder, effectiveLanes, rowHeight2, committedModel]
   );
   liveRowsRef.current = liveModel.rows;
-  const bars = (0, import_react287.useMemo)(() => {
+  const bars = (0, import_react288.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of liveModel.rows) {
       if (!row.task) continue;
@@ -64571,7 +64880,7 @@ var Gantt = ({
     return map;
   }, [liveModel.rows, range, zoom]);
   const bodyHeight = liveModel.rows.length > 0 ? liveModel.rows[liveModel.rows.length - 1].top + liveModel.rows[liveModel.rows.length - 1].height : 0;
-  const onBarKeyDown = (0, import_react287.useCallback)(
+  const onBarKeyDown = (0, import_react288.useCallback)(
     (e, task) => {
       if (!interactive || task.locked || !onTasksChange) return;
       const stepMs = snap2 === "hour" ? 36e5 : snap2 === "week" ? 7 * MS_PER_DAY : MS_PER_DAY;
@@ -64616,7 +64925,7 @@ var Gantt = ({
     },
     [interactive, snap2, tasks, onTasksChange, setSelected]
   );
-  const deleteSelectedLink = (0, import_react287.useCallback)(() => {
+  const deleteSelectedLink = (0, import_react288.useCallback)(() => {
     const sel = dragApi.linkSelected;
     if (!sel || !interactive || !onLinksChange) return;
     const key = (l) => l.id ?? `${l.source}~${l.target}~${l.type ?? "fs"}`;
@@ -64624,7 +64933,7 @@ var Gantt = ({
     onLinksChange(links.filter((l) => key(l) !== selKey));
     dragApi.setLinkSelected(null);
   }, [dragApi, links, interactive, onLinksChange]);
-  const moveSelection = (0, import_react287.useCallback)(
+  const moveSelection = (0, import_react288.useCallback)(
     (where) => {
       const rows = liveModel.rows;
       if (!rows.length) return;
@@ -64637,7 +64946,7 @@ var Gantt = ({
     },
     [liveModel.rows, selectedId, setSelected]
   );
-  const onRootKeyDown = (0, import_react287.useCallback)(
+  const onRootKeyDown = (0, import_react288.useCallback)(
     (e) => {
       if (dragApi.linkSelected) {
         if (e.key === "Escape") {
@@ -64683,14 +64992,14 @@ var Gantt = ({
     },
     [dragApi, deleteSelectedLink, moveSelection, setZoom, zoom]
   );
-  const handleSelectLink = (0, import_react287.useCallback)(
+  const handleSelectLink = (0, import_react288.useCallback)(
     (link) => {
       dragApi.setLinkSelected(link);
       if (link) rootRef.current?.focus();
     },
     [dragApi]
   );
-  const handleRootPointerDown = (0, import_react287.useCallback)(
+  const handleRootPointerDown = (0, import_react288.useCallback)(
     (e) => {
       if (e.target.closest?.("[data-gantt-keep-link-selection]")) return;
       if (dragApi.linkSelected) dragApi.setLinkSelected(null);
@@ -64705,22 +65014,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 = (0, import_react287.useMemo)(() => {
+  const dragSubtree = (0, import_react288.useMemo)(() => {
     if (dragApi.drag?.kind !== "reorder") return null;
     return reorderDragSubtree(
       liveModel.rows,
       `task:${dragApi.drag.taskId}`
     );
   }, [dragApi.drag, liveModel.rows]);
-  const dragSubtreeKeys = (0, import_react287.useMemo)(
+  const dragSubtreeKeys = (0, import_react288.useMemo)(
     () => new Set((dragSubtree ?? []).map((r) => r.key)),
     [dragSubtree]
   );
-  const dragSubtreeHeight = (0, import_react287.useMemo)(
+  const dragSubtreeHeight = (0, import_react288.useMemo)(
     () => (dragSubtree ?? []).reduce((sum, r) => sum + r.height, 0),
     [dragSubtree]
   );
-  const liveDragDates = (0, import_react287.useMemo)(() => {
+  const liveDragDates = (0, import_react288.useMemo)(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind !== "move" && drag.kind !== "resize-start" && drag.kind !== "resize-end") return null;
     return applyDragDates(
@@ -64731,7 +65040,7 @@ var Gantt = ({
     );
   }, [drag, dragTask, zoom, snap2]);
   const liveDragProgress = drag?.kind === "progress" && drag.liveProgress != null ? drag.liveProgress : null;
-  const dragOverride = (0, import_react287.useMemo)(() => {
+  const dragOverride = (0, import_react288.useMemo)(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind === "progress" && drag.liveProgress != null) {
       return { ...dragTask, progress: drag.liveProgress };
@@ -64741,11 +65050,11 @@ var Gantt = ({
     }
     return null;
   }, [drag, dragTask, liveDragDates]);
-  const liveLaneProgress = (0, import_react287.useMemo)(
+  const liveLaneProgress = (0, import_react288.useMemo)(
     () => dragOverride && dragTask ? laneRollupProgress(effectiveTasks, dragTask.id, dragOverride) : null,
     [dragOverride, dragTask, effectiveTasks]
   );
-  const liveGroupProgress = (0, import_react287.useMemo)(() => {
+  const liveGroupProgress = (0, import_react288.useMemo)(() => {
     if (!dragOverride || !dragTask) return null;
     const byId = new Map(effectiveTasks.map((t2) => [t2.id, t2]));
     const m = /* @__PURE__ */ new Map();
@@ -64757,7 +65066,7 @@ var Gantt = ({
     }
     return m.size > 0 ? m : null;
   }, [dragOverride, dragTask, effectiveTasks]);
-  const liveLinkBars = (0, import_react287.useMemo)(() => {
+  const liveLinkBars = (0, import_react288.useMemo)(() => {
     if (!liveDragDates || !dragTask) return bars;
     const g = bars.get(dragTask.id);
     if (!g) return bars;
@@ -64766,12 +65075,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 = (0, import_react287.useMemo)(
+  const linkPaths = (0, import_react288.useMemo)(
     () => computeLinkPaths(links, liveLinkBars, color),
     [links, liveLinkBars, color]
   );
-  const linkFan = (0, import_react287.useMemo)(() => computeLinkFanOffsets(links, bars), [links, bars]);
-  return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+  const linkFan = (0, import_react288.useMemo)(() => computeLinkFanOffsets(links, bars), [links, bars]);
+  return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
     Panel_default,
     {
       ref: rootRef,
@@ -64789,31 +65098,31 @@ var Gantt = ({
       "aria-label": t("kit.gantt.root"),
       onKeyDown: onRootKeyDown,
       onPointerDown: handleRootPointerDown,
-      children: /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
           "div",
           {
-            className: (0, import_classnames122.default)(
+            className: (0, import_classnames123.default)(
               "flex shrink-0 items-center gap-3 border-b px-4 py-3",
               surfaceText.divider
             ),
             children: [
-              hasNode(icon) && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+              hasNode(icon) && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                 "div",
                 {
-                  className: (0, import_classnames122.default)(
+                  className: (0, import_classnames123.default)(
                     "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
                     getSurfaceVariantClasses(variant, "neutral")
                   ),
                   children: icon
                 }
               ),
-              (title != null || subtitle != null) && /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400", children: subtitle }),
-                title != null && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "truncate text-lg font-semibold text-neutral-900 dark:text-white", children: title })
+              (title != null || subtitle != null) && /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400", children: subtitle }),
+                title != null && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "truncate text-lg font-semibold text-neutral-900 dark:text-white", children: title })
               ] }),
-              hasNode(actions) && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
-              /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+              hasNode(actions) && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
+              /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                 GanttToolbar,
                 {
                   variant,
@@ -64826,31 +65135,31 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
           "div",
           {
-            className: (0, import_classnames122.default)(
+            className: (0, import_classnames123.default)(
               "relative flex shrink-0 items-stretch border-b",
               surfaceText.divider
             ),
             style: { height: HEADER_HEIGHT },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
                 "div",
                 {
-                  className: (0, import_classnames122.default)(
+                  className: (0, import_classnames123.default)(
                     "flex items-stretch border-r bg-white dark:bg-neutral-900",
                     surfaceText.divider
                   ),
                   style: { width: leftWidth },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "w-9 shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "w-9 shrink-0" }),
                     sizedColumns.map((col) => {
                       const resizable = resizableColumns && col.resizable !== false;
-                      return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
                         "div",
                         {
-                          className: (0, import_classnames122.default)(
+                          className: (0, import_classnames123.default)(
                             "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
                           ),
@@ -64859,7 +65168,7 @@ var Gantt = ({
                             justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("span", { className: "truncate", children: col.title }),
+                            /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("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
@@ -64868,7 +65177,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__ */ (0, import_jsx_runtime313.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                               "div",
                               {
                                 role: "separator",
@@ -64877,7 +65186,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__ */ (0, import_jsx_runtime313.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                                   "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",
@@ -64894,30 +65203,30 @@ var Gantt = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
                 "div",
                 {
                   ref: headerScaleRef,
                   className: "relative h-full",
                   style: { width: timelineWidth },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
-                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                       "div",
                       {
-                        className: (0, import_classnames122.default)(
+                        className: (0, import_classnames123.default)(
                           "pointer-events-none absolute inset-y-0 z-[1] border-l-2",
                           todayTokens.line
                         ),
                         style: { left: todayX }
                       }
                     ),
-                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                       "div",
                       {
                         className: "pointer-events-none absolute top-1 z-10 -translate-x-1/2",
                         style: { left: todayX },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("span", { className: (0, import_classnames122.default)("rounded-full px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm", todayTokens.chip), children: allLabels.today })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("span", { className: (0, import_classnames123.default)("rounded-full px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm", todayTokens.chip), children: allLabels.today })
                       }
                     )
                   ]
@@ -64926,20 +65235,20 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
           "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__ */ (0, import_jsx_runtime313.jsx)("div", { style: { width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER, minWidth: "100%" }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(GanttSkeleton, { rows: 12, rowHeight: rowHeight2, leftWidth }) : isEmpty2 ? /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "flex items-center justify-center text-sm text-neutral-500", style: { height: bodyHeight || 160, width: leftWidth + timelineWidth }, children: emptyState ?? allLabels.empty }) : /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "relative", style: { height: bodyHeight }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { style: { width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER, minWidth: "100%" }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(GanttSkeleton, { rows: 12, rowHeight: rowHeight2, leftWidth }) : isEmpty2 ? /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "flex items-center justify-center text-sm text-neutral-500", style: { height: bodyHeight || 160, width: leftWidth + timelineWidth }, children: emptyState ?? allLabels.empty }) : /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "relative", style: { height: bodyHeight }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
                 "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__ */ (0, import_jsx_runtime313.jsx)(
+                    scaleLevels.length > 0 && scaleLevels[scaleLevels.length - 1].columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                       "div",
                       {
                         className: "absolute inset-y-0 border-r border-neutral-100 dark:border-neutral-800",
@@ -64947,10 +65256,10 @@ var Gantt = ({
                       },
                       c.id
                     )),
-                    todayVisible && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                    todayVisible && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                       "div",
                       {
-                        className: (0, import_classnames122.default)("absolute inset-y-0 border-l-2", todayTokens.line),
+                        className: (0, import_classnames123.default)("absolute inset-y-0 border-l-2", todayTokens.line),
                         style: { left: todayX }
                       }
                     )
@@ -64960,7 +65269,7 @@ var Gantt = ({
               liveModel.rows.map((row) => {
                 const isDragSource = drag?.kind === "reorder" && row.task != null && row.task.id === drag.taskId;
                 if (isDragSource) {
-                  return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                     "div",
                     {
                       "data-row-key": row.key,
@@ -64968,7 +65277,7 @@ var Gantt = ({
                       "aria-hidden": "true",
                       className: "pointer-events-none flex border-b",
                       style: { height: dragSubtreeHeight || row.height },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                         "div",
                         {
                           className: "m-1 flex-1 rounded-md border-2 border-dashed",
@@ -64985,7 +65294,7 @@ var Gantt = ({
                 if (drag?.kind === "reorder" && dragSubtreeKeys.has(row.key)) {
                   return null;
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                   GanttBodyRow,
                   {
                     row,
@@ -65023,7 +65332,7 @@ var Gantt = ({
                   row.key
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                 GanttLinkLayer,
                 {
                   ref: overlayRef,
@@ -65039,7 +65348,7 @@ var Gantt = ({
                   onDeleteLink: interactive && onLinksChange ? deleteSelectedLink : void 0
                 }
               ),
-              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                 "div",
                 {
                   className: "pointer-events-none absolute z-30 h-0.5 rounded-full",
@@ -65059,7 +65368,7 @@ var Gantt = ({
               // there is no filtered/overflowing ancestor and the fixed
               // clone always tracks the viewport pointer.
               (0, import_react_dom15.createPortal)(
-                /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                   "div",
                   {
                     "data-gantt-drag-clone": "true",
@@ -65070,14 +65379,14 @@ var Gantt = ({
                       top: drag.clientY - (drag.grabOffset?.y ?? 0),
                       width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                       "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__ */ (0, import_jsx_runtime313.jsx)(
+                        children: dragSubtree.map((row) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                           GanttBodyRow,
                           {
                             row,
@@ -65120,7 +65429,7 @@ var Gantt = ({
                 ),
                 document.body
               ),
-              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                 "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",
@@ -65151,13 +65460,13 @@ var GanttSkeleton = ({
   rows,
   rowHeight: rowHeight2,
   leftWidth
-}) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "animate-pulse", "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "flex", style: { height: rowHeight2 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "animate-pulse", "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "flex", style: { height: rowHeight2 }, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
     "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__ */ (0, import_jsx_runtime313.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
         "div",
         {
           className: "h-3 rounded-full bg-neutral-200 dark:bg-neutral-700",
@@ -65166,7 +65475,7 @@ var GanttSkeleton = ({
       )
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "relative flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "relative flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
     "div",
     {
       className: "absolute top-1/2 h-4 -translate-y-1/2 rounded-md bg-neutral-200/80 dark:bg-neutral-700/60",
@@ -65179,11 +65488,11 @@ var GanttSkeleton = ({
 ] }, i)) });
 
 // src/contexts/BottomSheetContext.tsx
-var import_react288 = require("react");
+var import_react289 = require("react");
 var import_react_dom16 = require("react-dom");
-var import_classnames123 = __toESM(require("classnames"), 1);
-var import_jsx_runtime314 = require("react/jsx-runtime");
-var BottomSheetContext = (0, import_react288.createContext)(null);
+var import_classnames124 = __toESM(require("classnames"), 1);
+var import_jsx_runtime315 = require("react/jsx-runtime");
+var BottomSheetContext = (0, import_react289.createContext)(null);
 var TRANSITION_MS2 = 260;
 var renderSlot = (slot, controls) => {
   if (!slot) {
@@ -65194,13 +65503,13 @@ var renderSlot = (slot, controls) => {
 var BottomSheetProvider = ({
   children
 }) => {
-  const [sheet, setSheet] = (0, import_react288.useState)(null);
-  const [isVisible, setIsVisible] = (0, import_react288.useState)(false);
-  const pendingCloseRef = (0, import_react288.useRef)(null);
-  const dismissSheet = (0, import_react288.useCallback)(() => {
+  const [sheet, setSheet] = (0, import_react289.useState)(null);
+  const [isVisible, setIsVisible] = (0, import_react289.useState)(false);
+  const pendingCloseRef = (0, import_react289.useRef)(null);
+  const dismissSheet = (0, import_react289.useCallback)(() => {
     setIsVisible(false);
   }, []);
-  const presentSheet = (0, import_react288.useCallback)((options) => {
+  const presentSheet = (0, import_react289.useCallback)((options) => {
     if (pendingCloseRef.current) {
       clearTimeout(pendingCloseRef.current);
       pendingCloseRef.current = null;
@@ -65213,7 +65522,7 @@ var BottomSheetProvider = ({
       setTimeout(animateIn, 0);
     }
   }, []);
-  (0, import_react288.useEffect)(() => {
+  (0, import_react289.useEffect)(() => {
     if (!isVisible && sheet) {
       pendingCloseRef.current = setTimeout(() => {
         sheet.onClose?.();
@@ -65228,7 +65537,7 @@ var BottomSheetProvider = ({
     }
     return void 0;
   }, [isVisible, sheet]);
-  (0, import_react288.useEffect)(
+  (0, import_react289.useEffect)(
     () => () => {
       if (pendingCloseRef.current) {
         clearTimeout(pendingCloseRef.current);
@@ -65236,13 +65545,13 @@ var BottomSheetProvider = ({
     },
     []
   );
-  const controls = (0, import_react288.useMemo)(
+  const controls = (0, import_react289.useMemo)(
     () => ({
       dismiss: dismissSheet
     }),
     [dismissSheet]
   );
-  const contextValue = (0, import_react288.useMemo)(
+  const contextValue = (0, import_react289.useMemo)(
     () => ({
       presentSheet,
       dismissSheet,
@@ -65252,11 +65561,11 @@ var BottomSheetProvider = ({
     [presentSheet, dismissSheet, sheet, isVisible]
   );
   const overlayNode = typeof document !== "undefined" && sheet ? (0, import_react_dom16.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "pointer-events-none fixed inset-0 z-[70] flex items-end justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "pointer-events-none fixed inset-0 z-[70] flex items-end justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
         "div",
         {
-          className: (0, import_classnames123.default)(
+          className: (0, import_classnames124.default)(
             "absolute inset-0 bg-neutral-900/40 transition-opacity duration-300",
             isVisible ? "opacity-100 pointer-events-auto" : "opacity-0"
           ),
@@ -65266,24 +65575,24 @@ var BottomSheetProvider = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "relative w-full max-w-4xl px-4 pb-4 sm:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "relative w-full max-w-4xl px-4 pb-4 sm:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(
         "section",
         {
           role: "dialog",
           "aria-modal": "true",
-          className: (0, import_classnames123.default)(
+          className: (0, import_classnames124.default)(
             "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__ */ (0, import_jsx_runtime314.jsxs)("header", { className: "flex items-start justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)("div", { className: "space-y-1", children: [
-                sheet.title && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: sheet.title }),
-                sheet.description && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("p", { className: "text-sm text-slate-500 dark:text-slate-300", children: sheet.description })
+            /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("header", { className: "flex items-start justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)("div", { className: "space-y-1", children: [
+                sheet.title && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: sheet.title }),
+                sheet.description && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("p", { className: "text-sm text-slate-500 dark:text-slate-300", children: sheet.description })
               ] }),
-              (sheet.showCloseButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
+              (sheet.showCloseButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
                 IconButton_default,
                 {
                   icon: "Close",
@@ -65295,21 +65604,21 @@ var BottomSheetProvider = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: renderSlot(sheet.content, controls) ?? /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("p", { className: "text-sm text-slate-500", children: "No content provided." }) }),
-            sheet.actions && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)("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__ */ (0, import_jsx_runtime315.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: renderSlot(sheet.content, controls) ?? /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("p", { className: "text-sm text-slate-500", children: "No content provided." }) }),
+            sheet.actions && /* @__PURE__ */ (0, import_jsx_runtime315.jsx)("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__ */ (0, import_jsx_runtime314.jsxs)(BottomSheetContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime315.jsxs)(BottomSheetContext.Provider, { value: contextValue, children: [
     children,
     overlayNode
   ] });
 };
 var useBottomSheet = () => {
-  const context = (0, import_react288.useContext)(BottomSheetContext);
+  const context = (0, import_react289.useContext)(BottomSheetContext);
   if (!context) {
     throw new Error("useBottomSheet must be used within a BottomSheetProvider");
   }
@@ -65943,8 +66252,8 @@ var SYSTEM_VARIABLES = [
 ];
 
 // src/components/MetricBar.tsx
-var import_classnames124 = __toESM(require("classnames"), 1);
-var import_jsx_runtime315 = require("react/jsx-runtime");
+var import_classnames125 = __toESM(require("classnames"), 1);
+var import_jsx_runtime316 = require("react/jsx-runtime");
 var MetricBar = ({
   label,
   value,
@@ -65954,7 +66263,7 @@ var MetricBar = ({
   size = "sm",
   className,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
   Progress_default,
   {
     ...rest,
@@ -65964,7 +66273,7 @@ var MetricBar = ({
     formatValue: value !== void 0 ? () => String(value) : void 0,
     size,
     color: tone ?? color ?? "blue",
-    className: (0, import_classnames124.default)("w-full", className)
+    className: (0, import_classnames125.default)("w-full", className)
   }
 );
 MetricBar.displayName = "MetricBar";
@@ -66006,6 +66315,7 @@ MetricBar.displayName = "MetricBar";
   COLLAPSIBLE_HELP_VARIANTS,
   COMBOBOX_TONE_CLASSES,
   COMBOBOX_VALIDATION_STATUSES,
+  CONNECTION_FLOW_CHILD_LAYOUTS,
   CONNECTION_FLOW_EDGE_STYLES,
   CONNECTION_FLOW_ITEM_PROGRESS,
   CONNECTION_FLOW_LOADERS,
@@ -66044,6 +66354,7 @@ MetricBar.displayName = "MetricBar";
   DEFAULT_LAYOUT_OPTIONS,
   DEFAULT_SERIES_PALETTE,
   DEFAULT_SURFACE_CORNER,
+  DEFAULT_SURFACE_GUTTER,
   DEFAULT_SURFACE_PADDING,
   DEFAULT_SURFACE_TONE,
   DEFAULT_TOAST_GAP_PX,
@@ -66194,6 +66505,7 @@ MetricBar.displayName = "MetricBar";
   STAT_PAGER_PLACEMENTS,
   SURFACE_CORNERS,
   SURFACE_GLASS_RIM,
+  SURFACE_GUTTER_AXES,
   SURFACE_PADDINGS,
   SURFACE_TO_BUTTON_VARIANT,
   SURFACE_VARIANTS,
@@ -66288,6 +66600,7 @@ MetricBar.displayName = "MetricBar";
   WorkflowTracker,
   WorkflowTrackerDetails,
   WorkflowTrackerRail,
+  WorkflowTrackerRollups,
   WorkflowTrackerStepDetails,
   areaPathFromPoints,
   bandAreaPath,
@@ -66426,6 +66739,7 @@ MetricBar.displayName = "MetricBar";
   getStepperTonePalette,
   getSurfaceCornerClass,
   getSurfaceCornerRem,
+  getSurfaceGutterClass,
   getSurfacePaddingClass,
   getSurfacePaddingClasses,
   getSurfaceTextTokens,
@@ -66490,6 +66804,7 @@ MetricBar.displayName = "MetricBar";
   mixHex,
   nicePolarMax,
   niceRadarMax,
+  nodeHasFailed,
   nodeIcon,
   nodeIsActive,
   nodeIsSkipped,
@@ -66545,6 +66860,7 @@ MetricBar.displayName = "MetricBar";
   tintColor,
   toBoolean,
   toDate,
+  toRows,
   toSmartVariable,
   tracePathTo,
   usageTotals,