@cjlapao/ui-kit 0.2.3 → 0.2.4

package/dist/index.cjs

@@ -348,6 +348,9 @@ __export(src_exports, {
   WorkflowRailSkeleton: () => WorkflowRailSkeleton,
   WorkflowStatusNode: () => WorkflowStatusNode_default,
   WorkflowTracker: () => WorkflowTracker_default,
+  WorkflowTrackerDetails: () => WorkflowTrackerDetails_default,
+  WorkflowTrackerRail: () => WorkflowTrackerRail_default,
+  WorkflowTrackerStepDetails: () => WorkflowTrackerStepDetails_default,
   areaPathFromPoints: () => areaPathFromPoints,
   bandAreaPath: () => bandAreaPath,
   buildColumns: () => buildColumns,
@@ -22032,27 +22035,38 @@ var PageHeader = ({
   center,
   end,
   children,
+  variant = "default",
+  accentColor = "blue",
   className = "",
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
-  "header",
-  {
-    ...rest,
-    className: (0, import_classnames51.default)(
-      "flex w-full items-center justify-between gap-4 border-b px-5",
-      SIDE_MENU_HEADER_HEIGHT,
-      SIDE_MENU_HEADER_FILL,
-      SIDE_MENU_HEADER_SEAM,
-      className
-    ),
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children: start }),
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children: center }),
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children: end }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children })
-    ]
-  }
-);
+}) => {
+  const surface = variant === "default" ? null : getSidebarSurfaceTokens(variant, accentColor);
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
+    "header",
+    {
+      ...rest,
+      className: (0, import_classnames51.default)(
+        "flex w-full items-center justify-between gap-4 px-5",
+        SIDE_MENU_HEADER_HEIGHT,
+        surface ? (0, import_classnames51.default)(
+          surface.offset,
+          surface.radius,
+          "border",
+          surface.border,
+          surface.shadow,
+          surface.fill
+        ) : (0, import_classnames51.default)("border-b", SIDE_MENU_HEADER_FILL, SIDE_MENU_HEADER_SEAM),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children: start }),
+        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children: center }),
+        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children: end }),
+        children != null && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { className: GROUP_CLASS2, children })
+      ]
+    }
+  );
+};
 PageHeader.displayName = "PageHeader";
 var PageHeader_default = PageHeader;
 
@@ -42738,7 +42752,8 @@ var SideMenu = ({
   const hasVisibleLink = visibleItems2.some(
     (item) => item.type !== "group" && item.type !== "divider"
   );
-  const heightClass = fullHeight ? "h-full" : "sticky top-16 h-[calc(100vh-64px)]";
+  const detached = Boolean(surface.offset);
+  const heightClass = fullHeight ? detached ? "h-[calc(100%-1rem)]" : "h-full" : detached ? "sticky top-16 h-[calc(100vh-64px-1rem)]" : "sticky top-16 h-[calc(100vh-64px)]";
   const isLeft = side === "left";
   const isHoverMode = openOnHover && !isMobile;
   const borderClasses = surface.border ? `${surface.border} ${surface.borderSides === "all" ? "border" : isLeft ? "border-r" : "border-l"}` : "";
@@ -42911,48 +42926,56 @@ var SideMenu = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("div", { className: `flex-1 px-3 py-1 overflow-y-auto w-full ${THIN_SCROLLBAR}`, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("nav", { "aria-label": title || "Side menu", className: "space-y-1 w-full", children: [
-      visibleItems2.map((item, index) => {
-        if (item.type === "divider") {
-          return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-            "div",
-            {
-              className: `my-2 border-t ${surface.divider} ${contentCollapsed2 && !isMobileView ? "mx-1" : "mx-0"}`
-            },
-            `divider-${index}-${item.slug}`
-          );
-        }
-        if (item.type === "group") {
-          if (contentCollapsed2 && !isMobileView) return null;
-          return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(import_react245.default.Fragment, { children: [
-            item.hasDivider && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-              "div",
-              {
-                className: `my-2 border-t ${surface.divider} ${contentCollapsed2 && !isMobileView ? "mx-1" : "mx-0"}`
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
-              "div",
-              {
-                className: `px-3 py-1 mb-1 text-xs font-semibold uppercase tracking-wider ${surface.muted} ${index === 0 ? "mt-1" : "mt-4"}`,
-                children: item.label
-              }
-            )
-          ] }, `group-${index}-${item.slug}`);
-        }
-        return renderLinkRow(
-          item,
-          0,
-          `link-${index}-${item.slug}`,
-          contentCollapsed2
-        );
-      }),
-      searchActive && !hasVisibleLink && /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("p", { className: `px-3 py-6 text-center text-xs ${surface.muted}`, children: [
-        'No results for "',
-        searchQuery.trim(),
-        '"'
-      ] })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+      ScrollArea_default,
+      {
+        variant: "hover",
+        className: "flex-1 w-full",
+        contentClassName: "px-3 py-1",
+        children: /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("nav", { "aria-label": title || "Side menu", className: "space-y-1 w-full", children: [
+          visibleItems2.map((item, index) => {
+            if (item.type === "divider") {
+              return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                "div",
+                {
+                  className: `my-2 border-t ${surface.divider} ${contentCollapsed2 && !isMobileView ? "mx-1" : "mx-0"}`
+                },
+                `divider-${index}-${item.slug}`
+              );
+            }
+            if (item.type === "group") {
+              if (contentCollapsed2 && !isMobileView) return null;
+              return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(import_react245.default.Fragment, { children: [
+                item.hasDivider && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                  "div",
+                  {
+                    className: `my-2 border-t ${surface.divider} ${contentCollapsed2 && !isMobileView ? "mx-1" : "mx-0"}`
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+                  "div",
+                  {
+                    className: `px-3 py-1 mb-1 text-xs font-semibold uppercase tracking-wider ${surface.muted} ${index === 0 ? "mt-1" : "mt-4"}`,
+                    children: item.label
+                  }
+                )
+              ] }, `group-${index}-${item.slug}`);
+            }
+            return renderLinkRow(
+              item,
+              0,
+              `link-${index}-${item.slug}`,
+              contentCollapsed2
+            );
+          }),
+          searchActive && !hasVisibleLink && /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("p", { className: `px-3 py-6 text-center text-xs ${surface.muted}`, children: [
+            'No results for "',
+            searchQuery.trim(),
+            '"'
+          ] })
+        ] })
+      }
+    ),
     footerItem && /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("div", { className: "shrink-0 px-3 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
       SideMenuDropdownRow,
       {
@@ -60164,93 +60187,14 @@ var TreeView = ({
 var TreeView_default = TreeView;
 
 // src/components/WorkflowTracker/WorkflowTracker.tsx
-var import_react278 = require("react");
-var import_classnames113 = __toESM(require("classnames"), 1);
-
-// src/components/WorkflowTracker/WorkflowTimeline.tsx
-var import_react277 = __toESM(require("react"), 1);
-var import_classnames110 = __toESM(require("classnames"), 1);
+var import_react282 = require("react");
+var import_classnames118 = __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/WorkflowSummaryCard.tsx
+var import_classnames109 = __toESM(require("classnames"), 1);
 
 // src/components/WorkflowTracker/WorkflowStatusNode.tsx
-var import_classnames108 = __toESM(require("classnames"), 1);
+var import_classnames107 = __toESM(require("classnames"), 1);
 
 // src/components/WorkflowTracker/surfaces.ts
 var isTranslucentVariant = (variant) => getSurfaceTextTokens(variant).translucent;
@@ -60388,13 +60332,13 @@ var getStatusTokens = (status, palette) => {
 };
 
 // src/components/WorkflowTracker/WorkflowStatusNode.tsx
-var import_jsx_runtime297 = require("react/jsx-runtime");
+var import_jsx_runtime296 = 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_runtime297.jsx)("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", className, children: /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+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)(
   "circle",
   {
     cx: "10",
@@ -60407,7 +60351,7 @@ var DashedRing = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime297.js
     strokeLinecap: "round"
   }
 ) });
-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)(
+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)(
   "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",
@@ -60422,33 +60366,33 @@ var WorkflowStatusNode = ({
 }) => {
   const tokens = getStatusTokens(status, palette);
   const { node, glyph } = sizeTokens11[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
     "span",
     {
       "aria-hidden": "true",
-      className: (0, import_classnames108.default)("relative inline-flex shrink-0", node, className),
+      className: (0, import_classnames107.default)("relative inline-flex shrink-0", node, className),
       children: [
-        tokens.pulse && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
+        tokens.pulse && /* @__PURE__ */ (0, import_jsx_runtime296.jsx)(
           "span",
           {
-            className: (0, import_classnames108.default)(
+            className: (0, import_classnames107.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_runtime297.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime296.jsxs)(
           "span",
           {
-            className: (0, import_classnames108.default)(
+            className: (0, import_classnames107.default)(
               "relative inline-flex h-full w-full items-center justify-center rounded-full",
               tokens.node
             ),
             children: [
-              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) })
+              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) })
             ]
           }
         )
@@ -60459,33 +60403,33 @@ var WorkflowStatusNode = ({
 var WorkflowStatusNode_default = WorkflowStatusNode;
 
 // src/components/WorkflowTracker/parts.tsx
-var import_classnames109 = __toESM(require("classnames"), 1);
-var import_jsx_runtime298 = require("react/jsx-runtime");
+var import_classnames108 = __toESM(require("classnames"), 1);
+var import_jsx_runtime297 = require("react/jsx-runtime");
 var resolve = (surfaces) => surfaces ?? getSurfaceTokens(false);
-var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)(
+var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
   "div",
   {
-    className: (0, import_classnames109.default)(
+    className: (0, import_classnames108.default)(
       "flex flex-col items-center justify-center gap-3 px-6 py-10 text-center",
       className
     ),
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(WorkflowStatusNode_default, { status: "not_started", palette, size: "lg" }),
-      /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+      /* @__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)(
           "p",
           {
-            className: (0, import_classnames109.default)(
+            className: (0, import_classnames108.default)(
               "text-sm font-semibold",
               resolve(surfaces).mutedText
             ),
             children: title
           }
         ),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
           "p",
           {
-            className: (0, import_classnames109.default)(
+            className: (0, import_classnames108.default)(
               "max-w-xs text-xs leading-5",
               resolve(surfaces).faintText
             ),
@@ -60496,10 +60440,10 @@ var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) =>
     ]
   }
 );
-var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
   "span",
   {
-    className: (0, import_classnames109.default)(
+    className: (0, import_classnames108.default)(
       "text-[10px] font-semibold uppercase tracking-widest",
       resolve(surfaces).faintText,
       className
@@ -60507,7 +60451,7 @@ var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ (0, im
     children
   }
 );
-var SectionMeta = ({ children, surfaces, className }) => /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("span", { className: (0, import_classnames109.default)("text-xs", resolve(surfaces).mutedText, className), 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 WorkflowBadge = ({
   children,
   status,
@@ -60515,14 +60459,14 @@ var WorkflowBadge = ({
   tone
 }) => {
   const tokens = getStatusTokens(status, palette);
-  return /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(
     Pill_default,
     {
       size: "xs",
       uppercase: true,
       tone: tone ?? tokens.pillTone,
       variant: "outline",
-      className: (0, import_classnames109.default)(
+      className: (0, import_classnames108.default)(
         "shrink-0 font-medium",
         tone ? `bg-${tone}-100 dark:bg-${tone}-900` : tokens.pillFill
       ),
@@ -60530,17 +60474,177 @@ var WorkflowBadge = ({
     }
   );
 };
-var MetaField = ({ label, value, surfaces }) => /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("div", { className: "min-w-0", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime298.jsx)(SectionTitle, { surfaces, children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime298.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_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 Tally = ({ count, label, surfaces }) => /* @__PURE__ */ (0, import_jsx_runtime298.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("span", { className: "font-semibold text-neutral-900 dark:text-white", children: count }),
-  /* @__PURE__ */ (0, import_jsx_runtime298.jsx)("span", { className: resolve(surfaces).mutedText, children: label })
+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 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;
@@ -60558,16 +60662,16 @@ var NestedSubSteps = ({
   palette,
   surfaces,
   onSubStepSelect
-}) => /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
   "div",
   {
-    className: (0, import_classnames110.default)("mt-3 rounded-lg p-3", surfaces.nestedBox),
+    className: (0, import_classnames112.default)("mt-3 rounded-lg p-3", surfaces.nestedBox),
     style: { marginLeft: NESTED_INDENT },
-    children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("ul", { className: "space-y-2.5", children: subSteps.map((subStep) => {
+    children: /* @__PURE__ */ (0, import_jsx_runtime301.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_runtime299.jsxs)(import_jsx_runtime299.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+      const content = /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(import_jsx_runtime301.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
           WorkflowStatusNode_default,
           {
             status,
@@ -60575,10 +60679,10 @@ var NestedSubSteps = ({
             size: "sm"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
           "span",
           {
-            className: (0, import_classnames110.default)(
+            className: (0, import_classnames112.default)(
               "text-sm",
               isActive ? "font-semibold text-neutral-900 dark:text-white" : "text-neutral-600 dark:text-neutral-300"
             ),
@@ -60586,7 +60690,7 @@ var NestedSubSteps = ({
           }
         )
       ] });
-      return /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
         "button",
         {
           type: "button",
@@ -60594,7 +60698,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_runtime299.jsx)("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
+      ) : /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
     }) })
   }
 );
@@ -60611,10 +60715,11 @@ var WorkflowTimeline = ({
   loadingRows,
   emptyState,
   onStepSelect,
-  onSubStepSelect
+  onSubStepSelect,
+  onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(WorkflowRailSkeleton, { rows: loadingRows });
+    return /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(WorkflowRailSkeleton, { rows: loadingRows });
   }
   const isEmpty2 = steps.length === 0;
   const tallyEntries = [
@@ -60623,19 +60728,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_runtime299.jsxs)("div", { className: "flex flex-col", children: [
-    !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: (0, import_classnames110.default)("border-b px-5 pb-4 pt-5", surfaces.border), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex items-baseline justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(SectionTitle, { surfaces, children: labels.progress }),
-        /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("span", { className: "text-sm font-semibold text-neutral-900 dark:text-white", children: [
+  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: [
           progress,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
         Progress_default,
         {
-          className: (0, import_classnames110.default)(
+          className: (0, import_classnames112.default)(
             "mt-2",
             surfaces.translucent ? "bg-white/40 dark:bg-white/15" : "bg-neutral-200 dark:bg-neutral-700"
           ),
@@ -60645,8 +60750,8 @@ var WorkflowTimeline = ({
           motion: "none"
         }
       ),
-      tallyEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime299.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_runtime299.jsxs)(import_react277.default.Fragment, { children: [
-        index > 0 && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+      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)(
           "span",
           {
             "aria-hidden": "true",
@@ -60654,7 +60759,7 @@ var WorkflowTimeline = ({
             children: "\xB7"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
           Tally,
           {
             count: entry.count,
@@ -60664,7 +60769,7 @@ var WorkflowTimeline = ({
         )
       ] }, entry.label)) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: (0, import_classnames110.default)(isEmpty2 ? "" : "px-5 py-5"), children: isEmpty2 ? emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+    /* @__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)(
       WorkflowPlaceholder,
       {
         title: labels.empty,
@@ -60672,14 +60777,14 @@ var WorkflowTimeline = ({
         palette,
         surfaces
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("ol", { className: "m-0 list-none p-0", children: steps.map((step, index) => {
+    ) : /* @__PURE__ */ (0, import_jsx_runtime301.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_runtime299.jsxs)(import_jsx_runtime299.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+      const rowContent = /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(import_jsx_runtime301.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
           WorkflowStatusNode_default,
           {
             status,
@@ -60687,19 +60792,19 @@ var WorkflowTimeline = ({
             className: "mt-0.5"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+        /* @__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)(
               "span",
               {
-                className: (0, import_classnames110.default)(
+                className: (0, import_classnames112.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_runtime299.jsx)(
+            step.badge && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
               WorkflowBadge,
               {
                 status,
@@ -60709,10 +60814,10 @@ var WorkflowTimeline = ({
               }
             )
           ] }),
-          step.meta && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+          step.meta && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
             "p",
             {
-              className: (0, import_classnames110.default)(
+              className: (0, import_classnames112.default)(
                 "mt-1 text-xs leading-5",
                 surfaces.mutedText
               ),
@@ -60721,24 +60826,24 @@ var WorkflowTimeline = ({
           )
         ] })
       ] });
-      return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
         "li",
         {
-          className: (0, import_classnames110.default)("relative", !isLast && "pb-5"),
+          className: (0, import_classnames112.default)("relative", !isLast && "pb-5"),
           "aria-current": isActive ? "step" : void 0,
           children: [
-            !isLast && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+            !isLast && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
               "span",
               {
                 "aria-hidden": "true",
-                className: (0, import_classnames110.default)(
+                className: (0, import_classnames112.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_runtime299.jsx)(
+            onStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
               "button",
               {
                 type: "button",
@@ -60746,8 +60851,19 @@ 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_runtime299.jsx)("div", { className: "flex items-start gap-3", children: rowContent }),
-            nested && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("div", { className: "flex items-start gap-3", children: rowContent }),
+            /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
+              WorkflowQuickActions_default,
+              {
+                stepId: step.id,
+                actions: step.actions ?? [],
+                palette,
+                groupLabel: labels.quickActions,
+                onAction: onStepAction,
+                className: "ml-8 mt-2"
+              }
+            ),
+            nested && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
               NestedSubSteps,
               {
                 stepId: step.id,
@@ -60762,8 +60878,8 @@ var WorkflowTimeline = ({
         step.id
       );
     }) }) }),
-    showLegend && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("div", { className: (0, import_classnames110.default)("mt-auto border-t px-5 py-4", surfaces.border), children: /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("ul", { className: "flex flex-wrap gap-x-4 gap-y-2", children: LEGEND_ORDER.map((status) => /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)("li", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
+    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)(
         WorkflowStatusNode_default,
         {
           status,
@@ -60771,14 +60887,92 @@ var WorkflowTimeline = ({
           size: "sm"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime299.jsx)("span", { className: (0, import_classnames110.default)("text-xs", surfaces.mutedText), children: labels.statuses[status] })
+      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("span", { className: (0, import_classnames112.default)("text-xs", surfaces.mutedText), children: labels.statuses[status] })
     ] }, status)) }) })
   ] });
 };
 var WorkflowTimeline_default = WorkflowTimeline;
 
-// src/components/WorkflowTracker/WorkflowDetailPanel.tsx
-var import_classnames111 = __toESM(require("classnames"), 1);
+// src/components/WorkflowTracker/chrome.ts
+var import_react278 = require("react");
+var DEFAULT_LABELS = {
+  progress: "Progress",
+  done: "done",
+  skipped: "skipped",
+  flagged: "flagged",
+  remaining: "remaining",
+  step: "Step",
+  of: "of",
+  elapsed: "Elapsed",
+  owner: "Owner",
+  started: "Started",
+  sla: "SLA",
+  subSteps: "Sub-steps",
+  accepted: "accepted",
+  open: "open",
+  needsAttention: "Needs attention",
+  skippedSteps: "Skipped steps",
+  live: "LIVE \xB7 read-only view",
+  empty: "No steps yet",
+  emptySubtitle: "Steps appear here as soon as the workflow starts.",
+  noActiveStep: "No step selected",
+  details: "Step details",
+  quickActions: "Quick actions",
+  statuses: {
+    done: "Done",
+    in_progress: "In progress",
+    running: "Running",
+    skipped: "Skipped",
+    blocked: "Blocked",
+    attention: "Attention",
+    not_started: "Not started"
+  }
+};
+var useWorkflowChrome = ({
+  accentColor = "blue",
+  attentionColor = "rose",
+  blockedColor = "amber",
+  mutedColor = "neutral",
+  variant = "outlined",
+  translucentSurfaces
+}) => {
+  const translucent = translucentSurfaces ?? isTranslucentVariant(variant);
+  const palette = (0, import_react278.useMemo)(
+    () => ({
+      accent: accentColor,
+      attention: attentionColor,
+      blocked: blockedColor,
+      muted: mutedColor,
+      translucent
+    }),
+    [accentColor, attentionColor, blockedColor, mutedColor, translucent]
+  );
+  const surfaces = (0, import_react278.useMemo)(() => getSurfaceTokens(translucent), [translucent]);
+  return { translucent, palette, surfaces };
+};
+var resolveLabels = (labelOverrides) => labelOverrides ? {
+  ...DEFAULT_LABELS,
+  ...labelOverrides,
+  statuses: { ...DEFAULT_LABELS.statuses, ...labelOverrides.statuses }
+} : DEFAULT_LABELS;
+var buildCardProps = ({
+  variant = "outlined",
+  cardTone = "neutral",
+  corner = DEFAULT_SURFACE_CORNER,
+  glassOpacity = "light",
+  vibrancy,
+  specularMode,
+  padding = "none"
+}) => ({
+  variant,
+  tone: cardTone,
+  corner,
+  glassOpacity,
+  vibrancy,
+  specularMode,
+  padding,
+  scrollable: false
+});
 
 // src/components/WorkflowTracker/derive.ts
 var computeProgress = (steps) => {
@@ -60853,8 +61047,262 @@ var resolveActiveStep = (steps, activeStepId) => {
   return { step: steps[0], index: 1 };
 };
 
+// src/components/WorkflowTracker/sampleWorkflow.tsx
+var import_jsx_runtime302 = require("react/jsx-runtime");
+var sampleWorkflow = {
+  eyebrow: "VENDOR ONBOARDING \xB7 REQ-4128",
+  title: "Northwind Logistics GmbH",
+  live: true,
+  activeStepId: "security_questionnaire",
+  steps: [
+    {
+      id: "request_submitted",
+      label: "Request submitted",
+      status: "done",
+      meta: "2m"
+    },
+    {
+      id: "duplicate_check",
+      label: "Duplicate check",
+      status: "skipped",
+      badge: "Not needed",
+      meta: "No match in registry"
+    },
+    {
+      id: "business_verification",
+      label: "Business verification",
+      status: "done",
+      meta: "12m \xB7 3 of 3 sub-steps"
+    },
+    {
+      id: "sanctions_screening",
+      label: "Sanctions screening",
+      status: "done",
+      meta: "4m"
+    },
+    {
+      id: "tax_documents",
+      label: "Tax documents",
+      status: "skipped",
+      badge: "Skipped",
+      meta: "Skipped by M. Reyes \xB7 resume anytime"
+    },
+    {
+      id: "insurance_certificates",
+      label: "Insurance certificates",
+      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)(
+          "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",
+            children: file
+          },
+          file
+        )) })
+      ] }),
+      actions: [
+        { id: "review", label: "Review" },
+        { id: "remind", label: "Remind vendor", tone: "amber" }
+      ]
+    },
+    {
+      id: "contract_drafting",
+      label: "Contract drafting",
+      status: "done",
+      meta: "1h 10m"
+    },
+    {
+      id: "security_questionnaire",
+      label: "Security questionnaire",
+      status: "in_progress",
+      badge: "In progress",
+      meta: "24m \xB7 3 of 6 sub-steps",
+      elapsed: "24m",
+      description: "Vendor is completing the long-form questionnaire. Each sub-step unlocks once its evidence file is accepted by the reviewer.",
+      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." })
+        ] }),
+        /* @__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: [
+            "data-handling-v3.pdf",
+            "pentest-2026.pdf",
+            "soc2-typeii.pdf"
+          ].map((file) => /* @__PURE__ */ (0, import_jsx_runtime302.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",
+              children: file
+            },
+            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)(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "mt-[9px] size-1.5 shrink-0 rounded-full bg-amber-400"
+                }
+              ),
+              "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)(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "mt-[9px] size-1.5 shrink-0 rounded-full bg-neutral-300 dark:bg-neutral-600"
+                }
+              ),
+              "Waiting on the incident-contact annex"
+            ] })
+          ] })
+        ] })
+      ] }),
+      subSteps: [
+        {
+          id: "data_handling",
+          label: "Data handling policy",
+          status: "done",
+          badge: "Accepted",
+          duration: "5m"
+        },
+        {
+          id: "pentest",
+          label: "Penetration test report",
+          status: "done",
+          badge: "Accepted",
+          duration: "8m"
+        },
+        {
+          id: "soc2",
+          label: "SOC 2 Type II evidence",
+          status: "done",
+          badge: "Accepted",
+          duration: "11m"
+        },
+        {
+          id: "subprocessor_list",
+          label: "Subprocessor list",
+          status: "running",
+          badge: "Running",
+          note: "Vendor uploading \u2014 2 of 3 files received"
+        },
+        {
+          id: "incident_response",
+          label: "Incident response plan",
+          status: "skipped",
+          badge: "Skipped",
+          note: "Covered by master agreement \xA77"
+        },
+        {
+          id: "business_continuity",
+          label: "Business continuity plan",
+          status: "not_started"
+        }
+      ]
+    },
+    {
+      id: "legal_review",
+      label: "Legal review",
+      status: "blocked",
+      badge: "Blocked",
+      meta: "Waiting on Legal \xB7 queued 2d",
+      actions: [{ id: "nudge", label: "Nudge Legal", tone: "violet" }]
+    },
+    {
+      id: "banking_details",
+      label: "Banking details",
+      status: "not_started"
+    },
+    {
+      id: "system_provisioning",
+      label: "System provisioning",
+      status: "not_started"
+    },
+    { id: "go_live", label: "Go-live", status: "not_started" }
+  ]
+};
+
+// src/components/WorkflowTracker/WorkflowTrackerRail.tsx
+var import_jsx_runtime303 = require("react/jsx-runtime");
+var WorkflowTrackerRail = ({
+  data = sampleWorkflow,
+  loading = false,
+  loadingRows = 6,
+  showLegend = true,
+  emptyState,
+  labels: labelOverrides,
+  cardClassName,
+  cardScrollable,
+  onStepSelect,
+  onSubStepSelect,
+  onStepAction,
+  className,
+  style,
+  ...styleProps
+}) => {
+  const steps = data?.steps ?? [];
+  const { palette, surfaces } = useWorkflowChrome(styleProps);
+  const labels = (0, import_react279.useMemo)(() => resolveLabels(labelOverrides), [labelOverrides]);
+  const cardProps = buildCardProps(styleProps);
+  const active = (0, import_react279.useMemo)(
+    () => resolveActiveStep(steps, data?.activeStepId),
+    [steps, data?.activeStepId]
+  );
+  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)(
+    Panel_default,
+    {
+      ...cardProps,
+      scrollable: cardScrollable ?? false,
+      className: (0, import_classnames113.default)(className, cardClassName),
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+        WorkflowTimeline_default,
+        {
+          steps,
+          activeStepId: active?.step.id,
+          palette,
+          surfaces,
+          labels,
+          progress,
+          tallies,
+          showLegend: showLegend && !loading,
+          loading,
+          loadingRows,
+          emptyState,
+          onStepSelect,
+          onSubStepSelect,
+          onStepAction
+        }
+      )
+    }
+  );
+};
+var WorkflowTrackerRail_default = WorkflowTrackerRail;
+
+// src/components/WorkflowTracker/WorkflowTrackerStepDetails.tsx
+var import_react280 = require("react");
+var import_classnames115 = __toESM(require("classnames"), 1);
+
 // src/components/WorkflowTracker/WorkflowDetailPanel.tsx
-var import_jsx_runtime300 = require("react/jsx-runtime");
+var import_classnames114 = __toESM(require("classnames"), 1);
+var import_jsx_runtime304 = require("react/jsx-runtime");
 var WorkflowDetailPanel = ({
   active,
   totalSteps,
@@ -60862,13 +61310,14 @@ var WorkflowDetailPanel = ({
   surfaces,
   labels,
   loading,
-  onSubStepSelect
+  onSubStepSelect,
+  onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(WorkflowDetailSkeleton, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(WorkflowDetailSkeleton, {});
   }
   if (!active) {
-    return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
       WorkflowPlaceholder,
       {
         title: labels.noActiveStep,
@@ -60886,11 +61335,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_runtime300.jsxs)("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "px-5 pb-6 pt-5 sm:px-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(SectionTitle, { surfaces, children: [
+  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: [
             labels.step,
             " ",
             index,
@@ -60899,7 +61348,7 @@ var WorkflowDetailPanel = ({
             " ",
             totalSteps
           ] }),
-          step.badge && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+          step.badge && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
             WorkflowBadge,
             {
               status,
@@ -60909,24 +61358,36 @@ var WorkflowDetailPanel = ({
             }
           )
         ] }),
-        step.elapsed && /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(SectionMeta, { surfaces, children: [
-          labels.elapsed,
-          " ",
-          step.elapsed
+        /* @__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: [
+            labels.elapsed,
+            " ",
+            step.elapsed
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+            WorkflowQuickActions_default,
+            {
+              stepId: step.id,
+              actions: step.actions ?? [],
+              palette,
+              groupLabel: labels.quickActions,
+              onAction: onStepAction
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime300.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_runtime300.jsx)(
+      /* @__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)(
         "p",
         {
-          className: (0, import_classnames111.default)(
+          className: (0, import_classnames114.default)(
             "mt-2 max-w-3xl text-sm leading-6",
             surfaces.mutedText
           ),
           children: step.description
         }
       ),
-      metaFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("div", { className: "mt-5 flex flex-wrap gap-x-10 gap-y-4", children: metaFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+      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)(
         MetaField,
         {
           label: field.label,
@@ -60936,18 +61397,18 @@ var WorkflowDetailPanel = ({
         field.label
       )) })
     ] }),
-    subSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(import_jsx_runtime300.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(
+    subSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(import_jsx_runtime304.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(
         "div",
         {
-          className: (0, import_classnames111.default)(
+          className: (0, import_classnames114.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_runtime300.jsx)(SectionTitle, { surfaces, children: labels.subSteps }),
-            /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(SectionMeta, { surfaces, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(SectionTitle, { surfaces, children: labels.subSteps }),
+            /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(SectionMeta, { surfaces, children: [
               summary.accepted,
               " ",
               labels.accepted,
@@ -60963,24 +61424,24 @@ var WorkflowDetailPanel = ({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
         "ul",
         {
-          className: (0, import_classnames111.default)(
+          className: (0, import_classnames114.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_runtime300.jsxs)(import_jsx_runtime300.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(WorkflowStatusNode_default, { status: subStatus, palette }),
-              /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime300.jsx)("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: subStep.label }),
-                subStep.note && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+            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)(
                   "p",
                   {
-                    className: (0, import_classnames111.default)(
+                    className: (0, import_classnames114.default)(
                       "mt-0.5 text-xs leading-5",
                       surfaces.mutedText
                     ),
@@ -60988,7 +61449,7 @@ var WorkflowDetailPanel = ({
                   }
                 )
               ] }),
-              subStep.badge && /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+              subStep.badge && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
                 WorkflowBadge,
                 {
                   status: subStatus,
@@ -60997,10 +61458,10 @@ var WorkflowDetailPanel = ({
                   children: subStep.badge
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
                 "span",
                 {
-                  className: (0, import_classnames111.default)(
+                  className: (0, import_classnames114.default)(
                     "w-10 shrink-0 text-right text-xs tabular-nums",
                     surfaces.faintText
                   ),
@@ -61008,22 +61469,22 @@ var WorkflowDetailPanel = ({
                 }
               )
             ] });
-            const rowClasses = (0, import_classnames111.default)(
+            const rowClasses = (0, import_classnames114.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_runtime300.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("li", { children: onSubStepSelect ? /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => onSubStepSelect(step.id, subStep.id),
-                className: (0, import_classnames111.default)(
+                className: (0, import_classnames114.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_runtime300.jsx)("div", { className: rowClasses, children: rowContent }) }, subStep.id);
+            ) : /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("div", { className: rowClasses, children: rowContent }) }, subStep.id);
           })
         }
       )
@@ -61032,202 +61493,114 @@ var WorkflowDetailPanel = ({
 };
 var WorkflowDetailPanel_default = WorkflowDetailPanel;
 
-// src/components/WorkflowTracker/WorkflowSummaryCard.tsx
-var import_classnames112 = __toESM(require("classnames"), 1);
-var import_jsx_runtime301 = require("react/jsx-runtime");
-var WorkflowSummaryCard = ({
-  title,
-  steps,
-  palette,
-  surfaces
-}) => /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "px-5 py-4", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(SectionTitle, { surfaces, children: title }),
-  /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("ul", { className: "mt-3 space-y-3", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("li", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
-      WorkflowStatusNode_default,
-      {
-        status: normalizeStatus(step.status),
-        palette,
-        className: "mt-0.5"
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime301.jsx)("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: step.label }),
-      step.meta && /* @__PURE__ */ (0, import_jsx_runtime301.jsx)(
-        "p",
+// src/components/WorkflowTracker/WorkflowTrackerStepDetails.tsx
+var import_jsx_runtime305 = require("react/jsx-runtime");
+var WorkflowTrackerStepDetails = ({
+  data = sampleWorkflow,
+  loading = false,
+  labels: labelOverrides,
+  cardClassName,
+  onSubStepSelect,
+  onStepAction,
+  className,
+  style,
+  ...styleProps
+}) => {
+  const steps = data?.steps ?? [];
+  const { palette, surfaces } = useWorkflowChrome(styleProps);
+  const labels = (0, import_react280.useMemo)(
+    () => resolveLabels(labelOverrides),
+    [labelOverrides]
+  );
+  const cardProps = buildCardProps(styleProps);
+  const active = (0, import_react280.useMemo)(
+    () => resolveActiveStep(steps, data?.activeStepId),
+    [steps, data?.activeStepId]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+    Panel_default,
+    {
+      ...cardProps,
+      className: (0, import_classnames115.default)(className, cardClassName),
+      style,
+      children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        WorkflowDetailPanel_default,
         {
-          className: (0, import_classnames112.default)(
-            "mt-0.5 text-xs leading-5",
-            surfaces.mutedText
-          ),
-          children: step.meta
+          active,
+          totalSteps: steps.length,
+          palette,
+          surfaces,
+          labels,
+          loading,
+          onSubStepSelect,
+          onStepAction
         }
       )
-    ] })
-  ] }, step.id)) })
-] });
-var WorkflowSummaryCard_default = WorkflowSummaryCard;
+    }
+  );
+};
+var WorkflowTrackerStepDetails_default = WorkflowTrackerStepDetails;
 
-// src/components/WorkflowTracker/sampleWorkflow.ts
-var sampleWorkflow = {
-  eyebrow: "VENDOR ONBOARDING \xB7 REQ-4128",
-  title: "Northwind Logistics GmbH",
-  live: true,
-  activeStepId: "security_questionnaire",
-  steps: [
-    {
-      id: "request_submitted",
-      label: "Request submitted",
-      status: "done",
-      meta: "2m"
-    },
-    {
-      id: "duplicate_check",
-      label: "Duplicate check",
-      status: "skipped",
-      badge: "Not needed",
-      meta: "No match in registry"
-    },
-    {
-      id: "business_verification",
-      label: "Business verification",
-      status: "done",
-      meta: "12m \xB7 3 of 3 sub-steps"
-    },
-    {
-      id: "sanctions_screening",
-      label: "Sanctions screening",
-      status: "done",
-      meta: "4m"
-    },
-    {
-      id: "tax_documents",
-      label: "Tax documents",
-      status: "skipped",
-      badge: "Skipped",
-      meta: "Skipped by M. Reyes \xB7 resume anytime"
-    },
-    {
-      id: "insurance_certificates",
-      label: "Insurance certificates",
-      status: "attention",
-      badge: "Needs attention",
-      meta: "1h 06m \xB7 Liability certificate expired 12 Aug"
-    },
-    {
-      id: "contract_drafting",
-      label: "Contract drafting",
-      status: "done",
-      meta: "1h 10m"
-    },
-    {
-      id: "security_questionnaire",
-      label: "Security questionnaire",
-      status: "in_progress",
-      badge: "In progress",
-      meta: "24m \xB7 3 of 6 sub-steps",
-      elapsed: "24m",
-      description: "Vendor is completing the long-form questionnaire. Each sub-step unlocks once its evidence file is accepted by the reviewer.",
-      owner: "D. Okafor",
-      startedAt: "19 Aug \xB7 09:12",
-      sla: "Due in 6h",
-      subSteps: [
-        {
-          id: "data_handling",
-          label: "Data handling policy",
-          status: "done",
-          badge: "Accepted",
-          duration: "5m"
-        },
-        {
-          id: "pentest",
-          label: "Penetration test report",
-          status: "done",
-          badge: "Accepted",
-          duration: "8m"
-        },
-        {
-          id: "soc2",
-          label: "SOC 2 Type II evidence",
-          status: "done",
-          badge: "Accepted",
-          duration: "11m"
-        },
-        {
-          id: "subprocessor_list",
-          label: "Subprocessor list",
-          status: "running",
-          badge: "Running",
-          note: "Vendor uploading \u2014 2 of 3 files received"
-        },
-        {
-          id: "incident_response",
-          label: "Incident response plan",
-          status: "skipped",
-          badge: "Skipped",
-          note: "Covered by master agreement \xA77"
-        },
-        {
-          id: "business_continuity",
-          label: "Business continuity plan",
-          status: "not_started"
-        }
-      ]
-    },
-    {
-      id: "legal_review",
-      label: "Legal review",
-      status: "blocked",
-      badge: "Blocked",
-      meta: "Waiting on Legal \xB7 queued 2d"
-    },
-    {
-      id: "banking_details",
-      label: "Banking details",
-      status: "not_started"
-    },
+// src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
+var import_react281 = require("react");
+var import_classnames117 = __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 WorkflowDetailsCard = ({
+  details,
+  ariaLabel,
+  cardProps,
+  className,
+  style
+}) => /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(
+  Panel_default,
+  {
+    ...cardProps,
+    flexBody: true,
+    className: (0, import_classnames116.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 })
+  }
+);
+var WorkflowDetailsCard_default = WorkflowDetailsCard;
+
+// src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
+var import_jsx_runtime307 = require("react/jsx-runtime");
+var WorkflowTrackerDetails = ({
+  data = sampleWorkflow,
+  loading = false,
+  labels: labelOverrides,
+  cardClassName,
+  className,
+  style,
+  ...styleProps
+}) => {
+  const steps = data?.steps ?? [];
+  const labels = (0, import_react281.useMemo)(() => resolveLabels(labelOverrides), [labelOverrides]);
+  const cardProps = buildCardProps(styleProps);
+  const active = (0, import_react281.useMemo)(
+    () => resolveActiveStep(steps, data?.activeStepId),
+    [steps, data?.activeStepId]
+  );
+  const details = active?.step.details;
+  if (loading || details == null || details === "") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+    WorkflowDetailsCard_default,
     {
-      id: "system_provisioning",
-      label: "System provisioning",
-      status: "not_started"
-    },
-    { id: "go_live", label: "Go-live", status: "not_started" }
-  ]
+      details,
+      ariaLabel: labels.details,
+      cardProps,
+      className: (0, import_classnames117.default)(className, cardClassName),
+      style
+    }
+  );
 };
+var WorkflowTrackerDetails_default = WorkflowTrackerDetails;
 
 // src/components/WorkflowTracker/WorkflowTracker.tsx
-var import_jsx_runtime302 = require("react/jsx-runtime");
-var DEFAULT_LABELS = {
-  progress: "Progress",
-  done: "done",
-  skipped: "skipped",
-  flagged: "flagged",
-  remaining: "remaining",
-  step: "Step",
-  of: "of",
-  elapsed: "Elapsed",
-  owner: "Owner",
-  started: "Started",
-  sla: "SLA",
-  subSteps: "Sub-steps",
-  accepted: "accepted",
-  open: "open",
-  needsAttention: "Needs attention",
-  skippedSteps: "Skipped steps",
-  live: "LIVE \xB7 read-only view",
-  empty: "No steps yet",
-  emptySubtitle: "Steps appear here as soon as the workflow starts.",
-  noActiveStep: "No step selected",
-  statuses: {
-    done: "Done",
-    in_progress: "In progress",
-    running: "Running",
-    skipped: "Skipped",
-    blocked: "Blocked",
-    attention: "Attention",
-    not_started: "Not started"
-  }
-};
+var import_jsx_runtime308 = require("react/jsx-runtime");
 var WorkflowTracker = ({
   data = sampleWorkflow,
   accentColor = "blue",
@@ -61246,6 +61619,8 @@ var WorkflowTracker = ({
   maxWidth = 1180,
   railWidth = 360,
   stickyRail = false,
+  fillHeight = false,
+  fillHeightOffset = 0,
   loading = false,
   loadingRows = 6,
   emptyState,
@@ -61254,81 +61629,58 @@ var WorkflowTracker = ({
   labels: labelOverrides,
   onStepSelect,
   onSubStepSelect,
+  onStepAction,
   className,
   style,
   ...rest
 }) => {
   const steps = data?.steps ?? [];
-  const translucent = translucentSurfaces ?? isTranslucentVariant(variant);
-  const surfaces = (0, import_react278.useMemo)(
-    () => getSurfaceTokens(translucent),
-    [translucent]
-  );
-  const palette = (0, import_react278.useMemo)(
-    () => ({
-      accent: accentColor,
-      attention: attentionColor,
-      blocked: blockedColor,
-      muted: mutedColor,
-      translucent
-    }),
-    [accentColor, attentionColor, blockedColor, mutedColor, translucent]
-  );
-  const labels = (0, import_react278.useMemo)(
-    () => ({
-      ...DEFAULT_LABELS,
-      ...labelOverrides,
-      statuses: {
-        ...DEFAULT_LABELS.statuses,
-        ...labelOverrides?.statuses
-      }
-    }),
-    [labelOverrides]
-  );
-  const progress = (0, import_react278.useMemo)(() => computeProgress(steps), [steps]);
-  const tallies = (0, import_react278.useMemo)(() => computeTallies(steps), [steps]);
-  const active = (0, import_react278.useMemo)(
-    () => resolveActiveStep(steps, data?.activeStepId),
-    [steps, data?.activeStepId]
-  );
-  const attentionSteps = (0, import_react278.useMemo)(() => getAttentionSteps(steps), [steps]);
-  const skippedSteps = (0, import_react278.useMemo)(() => getSkippedSteps(steps), [steps]);
-  const cardProps = {
+  const styleProps = {
+    accentColor,
+    attentionColor,
+    blockedColor,
+    mutedColor,
     variant,
-    tone: cardTone,
+    cardTone,
     corner,
     glassOpacity,
     vibrancy,
     specularMode,
     padding,
-    scrollable: false
+    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 railStyle = {
-    "--wt-rail-width": typeof railWidth === "number" ? `${railWidth}px` : railWidth
+    "--wt-rail-width": typeof railWidth === "number" ? `${railWidth}px` : railWidth,
+    "--wt-fill-offset": typeof fillHeightOffset === "number" ? `${fillHeightOffset}px` : fillHeightOffset
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
     "div",
     {
-      className: (0, import_classnames113.default)("@container w-full", className),
+      className: (0, import_classnames118.default)("@container w-full", className),
       style: { maxWidth, ...railStyle, ...style },
       "aria-busy": loading || void 0,
       ...rest,
       children: [
-        showHeader && loading && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+        showHeader && loading && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
           WorkflowHeaderSkeleton,
           {
             hasIcon: Boolean(data?.icon),
             iconCorner
           }
         ),
-        showHeader && !loading && /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("header", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+        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: [
             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_runtime302.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
               "span",
               {
-                className: (0, import_classnames113.default)(
+                className: (0, import_classnames118.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
@@ -61336,33 +61688,33 @@ var WorkflowTracker = ({
                 children: data.icon
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "min-w-0", children: [
-              data?.eyebrow && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "min-w-0", children: [
+              data?.eyebrow && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
                 "p",
                 {
-                  className: (0, import_classnames113.default)(
+                  className: (0, import_classnames118.default)(
                     "text-[11px] font-semibold uppercase tracking-widest",
                     surfaces.faintText
                   ),
                   children: data.eyebrow
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime302.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_runtime308.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_runtime302.jsxs)(
+          data?.live && /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
             Pill_default,
             {
               size: "md",
               tone: mutedColor,
               variant: "outline",
-              className: (0, import_classnames113.default)("tracking-wide", surfaces.chip),
+              className: (0, import_classnames118.default)("tracking-wide", surfaces.chip),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: (0, import_classnames113.default)(
+                    className: (0, import_classnames118.default)(
                       "mr-2 inline-block h-1.5 w-1.5 rounded-full",
                       `bg-${accentColor}-500 dark:bg-${accentColor}-400`
                     )
@@ -61373,67 +61725,88 @@ var WorkflowTracker = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "grid grid-cols-1 items-start gap-5 @4xl:grid-cols-[var(--wt-rail-width)_minmax(0,1fr)]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
-            Panel_default,
-            {
-              ...cardProps,
-              className: (0, import_classnames113.default)(stickyRail && "@4xl:sticky @4xl:top-6"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
-                WorkflowTimeline_default,
+        /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+          "div",
+          {
+            className: (0, import_classnames118.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)(
+                WorkflowTrackerRail_default,
                 {
-                  steps,
-                  activeStepId: active?.step.id,
-                  palette,
-                  surfaces,
-                  labels,
-                  progress,
-                  tallies,
-                  showLegend: showLegend && !loading,
+                  ...styleProps,
+                  data,
                   loading,
                   loadingRows,
+                  showLegend,
                   emptyState,
+                  labels: labelOverrides,
+                  cardScrollable: fillHeight,
+                  cardClassName: (0, import_classnames118.default)(
+                    stickyRail && !fillHeight && "@4xl:sticky @4xl:top-6",
+                    fillHeight && "@4xl:min-h-0 @4xl:self-stretch"
+                  ),
                   onStepSelect,
-                  onSubStepSelect
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "@container flex min-w-0 flex-col gap-5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Panel_default, { ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
-              WorkflowDetailPanel_default,
-              {
-                active,
-                totalSteps: steps.length,
-                palette,
-                surfaces,
-                labels,
-                loading,
-                onSubStepSelect
-              }
-            ) }),
-            !loading && (attentionSteps.length > 0 || skippedSteps.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)("div", { className: "grid grid-cols-1 gap-5 @xl:grid-cols-2", children: [
-              attentionSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Panel_default, { ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
-                WorkflowSummaryCard_default,
-                {
-                  title: labels.needsAttention,
-                  steps: attentionSteps,
-                  palette,
-                  surfaces
+                  onSubStepSelect,
+                  onStepAction
                 }
-              ) }),
-              skippedSteps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Panel_default, { ...cardProps, children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
-                WorkflowSummaryCard_default,
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+                "div",
                 {
-                  title: labels.skippedSteps,
-                  steps: skippedSteps,
-                  palette,
-                  surfaces
+                  className: (0, import_classnames118.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)(
+                      WorkflowTrackerStepDetails_default,
+                      {
+                        ...styleProps,
+                        data,
+                        loading,
+                        labels: labelOverrides,
+                        onSubStepSelect,
+                        onStepAction
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+                      WorkflowTrackerDetails_default,
+                      {
+                        ...styleProps,
+                        data,
+                        loading,
+                        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
+                        }
+                      ) })
+                    ] })
+                  ]
                 }
-              ) })
-            ] })
-          ] })
-        ] })
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -61441,9 +61814,9 @@ var WorkflowTracker = ({
 var WorkflowTracker_default = WorkflowTracker;
 
 // src/components/Gantt/Gantt.tsx
-var import_react283 = require("react");
+var import_react287 = require("react");
 var import_react_dom15 = require("react-dom");
-var import_classnames117 = __toESM(require("classnames"), 1);
+var import_classnames122 = __toESM(require("classnames"), 1);
 
 // ../common/gantt/types.ts
 var GANTT_ZOOM_PRESETS = [
@@ -62789,38 +63162,38 @@ var sampleGantt = {
 };
 
 // src/components/Gantt/GanttScale.tsx
-var import_classnames114 = __toESM(require("classnames"), 1);
-var import_jsx_runtime303 = require("react/jsx-runtime");
+var import_classnames119 = __toESM(require("classnames"), 1);
+var import_jsx_runtime309 = require("react/jsx-runtime");
 var GanttScale = ({ levels, height }) => {
   if (levels.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { style: { height } });
+    return /* @__PURE__ */ (0, import_jsx_runtime309.jsx)("div", { style: { height } });
   }
   const coarseHeight = levels.length > 1 ? 24 : height;
-  return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)("div", { className: "flex h-full w-full flex-col", children: levels.map((level, li) => /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(
+  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)(
     "div",
     {
-      className: (0, import_classnames114.default)("flex w-full", li === 0 ? "shrink-0" : "min-h-0 flex-1"),
+      className: (0, import_classnames119.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_runtime303.jsxs)(
+      children: level.columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime309.jsxs)(
         "div",
         {
-          className: (0, import_classnames114.default)(
+          className: (0, import_classnames119.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_runtime303.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
               "span",
               {
-                className: (0, import_classnames114.default)(
+                className: (0, import_classnames119.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_runtime303.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_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.id
@@ -62832,9 +63205,9 @@ var GanttScale = ({ levels, height }) => {
 GanttScale.displayName = "GanttScale";
 
 // src/components/Gantt/GanttLinkLayer.tsx
-var import_react279 = require("react");
-var import_jsx_runtime304 = require("react/jsx-runtime");
-var GanttLinkLayer = (0, import_react279.forwardRef)(
+var import_react283 = require("react");
+var import_jsx_runtime310 = require("react/jsx-runtime");
+var GanttLinkLayer = (0, import_react283.forwardRef)(
   function GanttLinkLayer2({
     width,
     height,
@@ -62848,7 +63221,7 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
     onDeleteLink
   }, ref) {
     const t = useKitT();
-    const svgRef = (0, import_react279.useRef)(null);
+    const svgRef = (0, import_react283.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;
@@ -62869,24 +63242,24 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
       const pick = pickFromEvent(e) ?? clicked;
       if (interactive && onDeleteLink) onDeleteLink(pick.link);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
       "div",
       {
         ref,
         className: "pointer-events-none absolute top-0 z-10",
         style: { left: offsetLeft, width, height },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("svg", { ref: svgRef, width, height, className: "block overflow-visible", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime310.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_runtime304.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
                 "g",
                 {
                   style: sel ? { filter: `drop-shadow(0 0 3px var(--color-${p.color ?? color}-500))` } : void 0,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
                       "path",
                       {
                         d: p.d,
@@ -62902,10 +63275,10 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
                       "path",
                       {
                         d: p.d,
@@ -62921,14 +63294,14 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    p.arrow && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("polygon", { points: p.arrow, className: tokens.fill }),
-                    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: p.from.x, cy: p.from.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: p.from.x, cy: p.from.y, r: nodeR, className: tokens.fill }),
-                    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: p.to.x, cy: p.to.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: p.to.x, cy: p.to.y, r: nodeR, className: tokens.fill })
+                    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.link.source}->${p.link.target}-${p.type}-${i}`
@@ -62936,8 +63309,8 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
             }),
             rubber && (() => {
               const tokens = getGanttLinkTokens(rubber.color);
-              return /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)("g", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)("g", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)(
                   "path",
                   {
                     d: rubber.d,
@@ -62948,15 +63321,15 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
                     strokeDasharray: "5 3"
                   }
                 ),
-                rubber.arrow && /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("polygon", { points: rubber.arrow, className: tokens.fill }),
-                /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 3.5, className: tokens.fill }),
-                /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 3.5, className: tokens.fill })
+                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 })
               ] });
             })()
           ] }),
-          canDelete && selMid && /* @__PURE__ */ (0, import_jsx_runtime304.jsxs)(
+          canDelete && selMid && /* @__PURE__ */ (0, import_jsx_runtime310.jsxs)(
             "button",
             {
               type: "button",
@@ -62974,7 +63347,7 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
               onClick: () => onDeleteLink(selected),
               title: t("kit.gantt.removeDependency"),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime304.jsx)("span", { "aria-hidden": true, children: "\u2715" }),
+                /* @__PURE__ */ (0, import_jsx_runtime310.jsx)("span", { "aria-hidden": true, children: "\u2715" }),
                 " ",
                 t("kit.gantt.delete")
               ]
@@ -62988,9 +63361,9 @@ var GanttLinkLayer = (0, import_react279.forwardRef)(
 GanttLinkLayer.displayName = "GanttLinkLayer";
 
 // src/components/Gantt/GanttBodyRow.tsx
-var import_react280 = require("react");
-var import_classnames115 = __toESM(require("classnames"), 1);
-var import_jsx_runtime305 = require("react/jsx-runtime");
+var import_react284 = require("react");
+var import_classnames120 = __toESM(require("classnames"), 1);
+var import_jsx_runtime311 = require("react/jsx-runtime");
 var BAR_HEIGHT = 24;
 var MILESTONE_SIZE = 14;
 var GanttBodyRow = ({
@@ -63029,11 +63402,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_runtime305.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
     "div",
     {
       "data-row-key": row.key,
-      className: (0, import_classnames115.default)(
+      className: (0, import_classnames120.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
@@ -63050,7 +63423,7 @@ var GanttBodyRow = ({
           boxShadow: `inset 2px 0 0 var(--color-${color}-500)`
         } : {}
       },
-      children: row.task == null ? /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+      children: row.task == null ? /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
         LaneHeader,
         {
           row,
@@ -63061,20 +63434,20 @@ var GanttBodyRow = ({
           dividerClass,
           liveProgress: liveLane
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(import_jsx_runtime305.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
           "div",
           {
-            className: (0, import_classnames115.default)(
+            className: (0, import_classnames120.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_runtime305.jsx)("div", { className: "flex w-9 shrink-0 items-center justify-center", children: interactive && !row.task.locked && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+              /* @__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)(
                 "span",
                 {
-                  className: (0, import_classnames115.default)(
+                  className: (0, import_classnames120.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"
                   ),
@@ -63082,10 +63455,10 @@ var GanttBodyRow = ({
                   onPointerDown: (e) => onGripPointerDown(row.key, row.task, e),
                   title: t("kit.gantt.dragReorder"),
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(Drag, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(Drag, { className: "h-3.5 w-3.5" })
                 }
               ) }),
-              columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+              columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
                 Cell,
                 {
                   col,
@@ -63106,12 +63479,12 @@ var GanttBodyRow = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
           "div",
           {
-            className: (0, import_classnames115.default)("relative shrink-0 border-b", dividerClass),
+            className: (0, import_classnames120.default)("relative shrink-0 border-b", dividerClass),
             style: { width: timelineWidth },
-            children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
               TaskBar,
               {
                 task: row.task,
@@ -63152,57 +63525,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_runtime305.jsxs)(import_jsx_runtime305.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
-        className: (0, import_classnames115.default)(
+        className: (0, import_classnames120.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_runtime305.jsx)("div", { className: (0, import_classnames115.default)("pointer-events-none absolute inset-0", tokens.band) }),
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "relative flex w-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          /* @__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)(
             "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_runtime305.jsx)(ChevronRight, { className: (0, import_classnames115.default)("h-3 w-3 transition-transform", isOpen && "rotate-90") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(ChevronRight, { className: (0, import_classnames120.default)("h-3 w-3 transition-transform", isOpen && "rotate-90") })
             }
           ) }),
-          columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
             "div",
             {
-              className: (0, import_classnames115.default)(
+              className: (0, import_classnames120.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_runtime305.jsxs)(import_jsx_runtime305.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: (0, import_classnames115.default)("truncate text-[13px] font-semibold", tokens.label), children: lane.label }),
-                lane.description && /* @__PURE__ */ (0, import_jsx_runtime305.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_runtime305.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_runtime305.jsx)(ProgressCell, { value: liveProgress ?? row.progress ?? 0, barClass: tokens.chip }) : null
+              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
             },
             col.key
           ))
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: (0, import_classnames115.default)("relative min-w-0 flex-1 border-b", dividerClass), children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: (0, import_classnames115.default)("absolute inset-0", tokens.band) }) })
+    /* @__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) }) })
   ] });
 };
 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_runtime305.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
     "div",
     {
-      className: (0, import_classnames115.default)(
+      className: (0, import_classnames120.default)(
         "flex shrink-0 items-center gap-1.5 overflow-hidden border-r px-2 text-[12.5px] last:border-r-0",
         dividerClass
       ),
@@ -63210,50 +63583,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_runtime305.jsxs)(import_jsx_runtime305.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "shrink-0", style: { width: depth * 14 + 18 }, children: isGroup && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+      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)(
           "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_runtime305.jsx)(ChevronRight, { className: (0, import_classnames115.default)("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(ChevronRight, { className: (0, import_classnames120.default)("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
           }
         ) }),
-        isGroup && childCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime305.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_runtime305.jsx)("span", { className: "truncate", children: task.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime305.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_runtime305.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_runtime305.jsxs)("span", { className: "flex min-w-0 items-center gap-1.5 text-neutral-600 dark:text-neutral-400", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        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)(
           "span",
           {
-            className: (0, import_classnames115.default)(
+            className: (0, import_classnames120.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_runtime305.jsx)("span", { className: "truncate", children: String(value) })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : col.kind === "progress" ? /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(ProgressCell, { value: typeof value === "number" ? value : 0 }) : col.kind === "badge" ? task.badge != null ? /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        /* @__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)(
         "span",
         {
-          className: (0, import_classnames115.default)(
+          className: (0, import_classnames120.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_runtime305.jsx)("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : custom != null ? custom : /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "truncate text-neutral-600 dark:text-neutral-400", children: value == null || value === "" ? "\u2014" : String(value) })
+      ) : /* @__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) })
     }
   );
 };
-var ProgressCell = ({ value, barClass = "bg-emerald-500" }) => /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("span", { className: "flex w-full items-center gap-1.5", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime305.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_runtime305.jsx)("span", { className: (0, import_classnames115.default)("block h-full rounded-full", barClass), style: { width: `${Math.round(value * 100)}%` } }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime305.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_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: [
     Math.round(value * 100),
     "%"
   ] })
@@ -63285,7 +63658,7 @@ var TaskBar = ({
   const t = useKitT();
   const milestone = task.type === "milestone";
   const barColor = task.color ?? color;
-  const tokens = (0, import_react280.useMemo)(() => getGanttBarTokens(barColor), [barColor]);
+  const tokens = (0, import_react284.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);
@@ -63310,7 +63683,7 @@ var TaskBar = ({
     pct: progressPct
   });
   if (milestone) {
-    return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
       "div",
       {
         role: "button",
@@ -63318,7 +63691,7 @@ var TaskBar = ({
         "aria-label": ariaLabel,
         title: ariaLabel,
         "data-gantt-bar": task.id,
-        className: (0, import_classnames115.default)(
+        className: (0, import_classnames120.default)(
           "absolute z-10 flex cursor-pointer items-center gap-1.5 outline-none",
           selected && selectionTokens.ring,
           "rounded"
@@ -63328,13 +63701,13 @@ var TaskBar = ({
         onClick: () => onSelect(task.id),
         onKeyDown: (e) => onBarKeyDown(e, task),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: (0, import_classnames115.default)("h-3.5 w-3.5 shrink-0 rotate-45 rounded-[2px] shadow-sm", tokens.milestone) }),
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("span", { className: "truncate text-[11px] font-semibold text-neutral-700 dark:text-neutral-300", children: task.name })
+          /* @__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 })
         ]
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(
     "div",
     {
       role: "button",
@@ -63342,7 +63715,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_classnames115.default)(
+      className: (0, import_classnames120.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,
@@ -63359,17 +63732,17 @@ var TaskBar = ({
       onClick: () => onSelect(task.id),
       onKeyDown: (e) => onBarKeyDown(e, task),
       children: [
-        progress > 0 && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        progress > 0 && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
           "div",
           {
-            className: (0, import_classnames115.default)("absolute inset-y-0 left-0 rounded-l-md", tokens.progress),
+            className: (0, import_classnames120.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_runtime305.jsx)(
+        canEdit && !row.isGroup && progress > 0 && progress < 1 && /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
           "div",
           {
-            className: (0, import_classnames115.default)(
+            className: (0, import_classnames120.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"
             ),
@@ -63377,10 +63750,10 @@ var TaskBar = ({
             onPointerDown: (e) => onProgressPointerDown(task, e),
             title: labels.progress,
             "aria-hidden": "true",
-            children: /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
           }
         ),
-        liveProgress != null && /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)(
+        liveProgress != null && /* @__PURE__ */ (0, import_jsx_runtime311.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",
@@ -63391,31 +63764,31 @@ var TaskBar = ({
             ]
           }
         ),
-        showName && (renderBar != null ? /* @__PURE__ */ (0, import_jsx_runtime305.jsx)("div", { className: (0, import_classnames115.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_runtime305.jsx)("span", { className: (0, import_classnames115.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_runtime305.jsxs)(import_jsx_runtime305.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        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)(
             "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_runtime305.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_runtime311.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_runtime305.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime311.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_runtime305.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_runtime311.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_runtime305.jsxs)(import_jsx_runtime305.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+        canEdit && /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)(import_jsx_runtime311.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
             "button",
             {
               type: "button",
@@ -63426,7 +63799,7 @@ var TaskBar = ({
               "aria-label": t("kit.gantt.linkFromStart", { task: task.name })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(
             "button",
             {
               type: "button",
@@ -63444,9 +63817,9 @@ var TaskBar = ({
 };
 
 // src/components/Gantt/GanttToolbar.tsx
-var import_react281 = require("react");
-var import_classnames116 = __toESM(require("classnames"), 1);
-var import_jsx_runtime306 = require("react/jsx-runtime");
+var import_react285 = require("react");
+var import_classnames121 = __toESM(require("classnames"), 1);
+var import_jsx_runtime312 = require("react/jsx-runtime");
 function nearestPreset(zoom, presets) {
   let best = null;
   let bestDist = Infinity;
@@ -63473,25 +63846,25 @@ var GanttToolbar = ({
     Month: t("kit.gantt.zoomMonth"),
     Quarter: t("kit.gantt.zoomQuarter")
   };
-  const active = (0, import_react281.useMemo)(() => nearestPreset(zoom, presets), [zoom, presets]);
-  const chrome = (0, import_react281.useMemo)(
+  const active = (0, import_react285.useMemo)(() => nearestPreset(zoom, presets), [zoom, presets]);
+  const chrome = (0, import_react285.useMemo)(
     () => getSurfaceVariantClasses(variant, "neutral"),
     [variant]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime306.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime312.jsxs)(
     "div",
     {
-      className: (0, import_classnames116.default)(
+      className: (0, import_classnames121.default)(
         "pointer-events-auto flex items-center gap-1 rounded-lg p-1",
         chrome
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime306.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_runtime306.jsx)(
+        /* @__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)(
           "button",
           {
             type: "button",
             onClick: () => onZoomTo(p.value),
-            className: (0, import_classnames116.default)(
+            className: (0, import_classnames121.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"
             ),
@@ -63499,9 +63872,9 @@ var GanttToolbar = ({
           },
           p.label
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("div", { className: "mx-0.5 h-4 w-px bg-neutral-200 dark:bg-neutral-700" }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1 / 1.25), "aria-label": t("kit.gantt.zoomOut"), children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "text-xs font-semibold leading-none", children: "\u2212" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime306.jsx)(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1.25), "aria-label": t("kit.gantt.zoomIn"), children: /* @__PURE__ */ (0, import_jsx_runtime306.jsx)("span", { className: "text-xs font-semibold leading-none", children: "+" }) })
+        /* @__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: "+" }) })
       ]
     }
   );
@@ -63509,16 +63882,16 @@ var GanttToolbar = ({
 GanttToolbar.displayName = "GanttToolbar";
 
 // src/components/Gantt/useGanttDrag.ts
-var import_react282 = require("react");
+var import_react286 = require("react");
 function useGanttDrag(opts) {
-  const [drag, setDrag] = (0, import_react282.useState)(null);
-  const [linkSelected, setLinkSelected] = (0, import_react282.useState)(null);
-  const optsRef = (0, import_react282.useRef)(opts);
+  const [drag, setDrag] = (0, import_react286.useState)(null);
+  const [linkSelected, setLinkSelected] = (0, import_react286.useState)(null);
+  const optsRef = (0, import_react286.useRef)(opts);
   optsRef.current = opts;
-  const dragRef = (0, import_react282.useRef)(null);
+  const dragRef = (0, import_react286.useRef)(null);
   dragRef.current = drag;
   const { rows, zoom, rangeStart, accentColor } = opts;
-  const barGeom = (0, import_react282.useCallback)(
+  const barGeom = (0, import_react286.useCallback)(
     (taskId) => {
       const row = rows.find((r) => r.key === `task:${taskId}`);
       if (!row?.task) return null;
@@ -63538,7 +63911,7 @@ function useGanttDrag(opts) {
     },
     [rows, zoom, rangeStart]
   );
-  const findTargetBar = (0, import_react282.useCallback)(
+  const findTargetBar = (0, import_react286.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;
@@ -63549,7 +63922,7 @@ function useGanttDrag(opts) {
     },
     [rows, barGeom]
   );
-  const allBarGeoms = (0, import_react282.useCallback)(() => {
+  const allBarGeoms = (0, import_react286.useCallback)(() => {
     const out = [];
     for (const row of rows) {
       if (!row.task) continue;
@@ -63558,17 +63931,17 @@ function useGanttDrag(opts) {
     }
     return out;
   }, [rows, barGeom]);
-  const timelineX = (0, import_react282.useCallback)((clientX) => {
+  const timelineX = (0, import_react286.useCallback)((clientX) => {
     const overlay = optsRef.current.overlayRef.current;
     if (!overlay) return 0;
     return clientX - overlay.getBoundingClientRect().left;
   }, []);
-  const rowY = (0, import_react282.useCallback)((clientY) => {
+  const rowY = (0, import_react286.useCallback)((clientY) => {
     const overlay = optsRef.current.overlayRef.current;
     if (!overlay) return 0;
     return clientY - overlay.getBoundingClientRect().top;
   }, []);
-  (0, import_react282.useEffect)(() => {
+  (0, import_react286.useEffect)(() => {
     if (!drag) return;
     const onMove = (e) => {
       e.preventDefault();
@@ -63693,7 +64066,7 @@ function useGanttDrag(opts) {
       window.removeEventListener("pointerup", onUp);
     };
   }, [drag != null, timelineX, rowY]);
-  const beginDrag = (0, import_react282.useCallback)(
+  const beginDrag = (0, import_react286.useCallback)(
     (partial, e, focusEl) => {
       const o = optsRef.current;
       if (!o.interactive) return;
@@ -63727,7 +64100,7 @@ function useGanttDrag(opts) {
     },
     [timelineX, rowY]
   );
-  const onBarPointerDown = (0, import_react282.useCallback)(
+  const onBarPointerDown = (0, import_react286.useCallback)(
     (task, e) => {
       if (e.button !== 0) return;
       beginDrag(
@@ -63745,7 +64118,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onResizePointerDown = (0, import_react282.useCallback)(
+  const onResizePointerDown = (0, import_react286.useCallback)(
     (task, edge, e) => {
       if (e.button !== 0) return;
       e.stopPropagation();
@@ -63764,7 +64137,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onGripPointerDown = (0, import_react282.useCallback)(
+  const onGripPointerDown = (0, import_react286.useCallback)(
     (_rowKey, task, e) => {
       if (e.button !== 0) return;
       const rowEl = e.currentTarget.closest(
@@ -63789,7 +64162,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onLinkHandlePointerDown = (0, import_react282.useCallback)(
+  const onLinkHandlePointerDown = (0, import_react286.useCallback)(
     (task, side, e, fromOffset = 0) => {
       if (e.button !== 0) return;
       e.stopPropagation();
@@ -63809,7 +64182,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const onProgressPointerDown = (0, import_react282.useCallback)(
+  const onProgressPointerDown = (0, import_react286.useCallback)(
     (task, e) => {
       if (e.button !== 0) return;
       e.stopPropagation();
@@ -63827,7 +64200,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const rubber = (0, import_react282.useMemo)(() => {
+  const rubber = (0, import_react286.useMemo)(() => {
     if (!drag || drag.kind !== "link") return null;
     const source = barGeom(drag.taskId);
     if (!source) return null;
@@ -63859,7 +64232,7 @@ function useGanttDrag(opts) {
 }
 
 // src/components/Gantt/Gantt.tsx
-var import_jsx_runtime307 = require("react/jsx-runtime");
+var import_jsx_runtime313 = require("react/jsx-runtime");
 var HEADER_HEIGHT = 52;
 var GRIP_WIDTH = 36;
 var DEFAULT_COLUMNS = [
@@ -63918,7 +64291,7 @@ var Gantt = ({
   const t = useKitT();
   const kitEngine = useKitEngine();
   const dateLocale = locale ?? kitEngine.locale;
-  const allLabels = (0, import_react283.useMemo)(
+  const allLabels = (0, import_react287.useMemo)(
     () => ({
       loading: t("kit.gantt.loading"),
       empty: t("kit.gantt.empty"),
@@ -63941,10 +64314,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_react283.useMemo)(() => getSurfaceTextTokens(variant), [variant]);
-  const [internalZoom, setInternalZoom] = (0, import_react283.useState)(initialZoom);
+  const surfaceText = (0, import_react287.useMemo)(() => getSurfaceTextTokens(variant), [variant]);
+  const [internalZoom, setInternalZoom] = (0, import_react287.useState)(initialZoom);
   const zoom = zoomProp ?? internalZoom;
-  const setZoom = (0, import_react283.useCallback)(
+  const setZoom = (0, import_react287.useCallback)(
     (z) => {
       const clamped = Math.min(maxZoom, Math.max(minZoom, z));
       if (onZoomChange) onZoomChange(clamped);
@@ -63952,33 +64325,33 @@ var Gantt = ({
     },
     [minZoom, maxZoom, onZoomChange]
   );
-  const [internalSelection, setInternalSelection] = (0, import_react283.useState)(null);
+  const [internalSelection, setInternalSelection] = (0, import_react287.useState)(null);
   const selectedId = selectedIdProp !== void 0 ? selectedIdProp : internalSelection;
-  const setSelected = (0, import_react283.useCallback)(
+  const setSelected = (0, import_react287.useCallback)(
     (id) => {
       onSelect?.(id);
       if (selectedIdProp === void 0) setInternalSelection(id);
     },
     [onSelect, selectedIdProp]
   );
-  const [internalOrder, setInternalOrder] = (0, import_react283.useState)(void 0);
+  const [internalOrder, setInternalOrder] = (0, import_react287.useState)(void 0);
   const rowOrder = rowOrderProp ?? internalOrder;
-  const handleReorder = (0, import_react283.useCallback)(
+  const handleReorder = (0, import_react287.useCallback)(
     (order) => {
       onReorder?.(order);
       if (rowOrderProp === void 0) setInternalOrder(order);
     },
     [onReorder, rowOrderProp]
   );
-  const [collapsed, setCollapsed] = (0, import_react283.useState)(
+  const [collapsed, setCollapsed] = (0, import_react287.useState)(
     () => new Set(tasks.filter((t2) => t2.open === false).map((t2) => t2.id))
   );
-  const [closedLanes, setClosedLanes] = (0, import_react283.useState)(
+  const [closedLanes, setClosedLanes] = (0, import_react287.useState)(
     () => new Set((lanes ?? []).filter((l) => l.open === false).map((l) => l.id))
   );
-  const tasksRef = (0, import_react283.useRef)(tasks);
-  const lanesRef = (0, import_react283.useRef)(lanes);
-  (0, import_react283.useEffect)(() => {
+  const tasksRef = (0, import_react287.useRef)(tasks);
+  const lanesRef = (0, import_react287.useRef)(lanes);
+  (0, import_react287.useEffect)(() => {
     if (tasksRef.current !== tasks) {
       tasksRef.current = tasks;
       setCollapsed(new Set(tasks.filter((t2) => t2.open === false).map((t2) => t2.id)));
@@ -63988,7 +64361,7 @@ var Gantt = ({
       setClosedLanes(new Set((lanes ?? []).filter((l) => l.open === false).map((l) => l.id)));
     }
   }, [tasks, lanes]);
-  const toggleCollapse = (0, import_react283.useCallback)((taskId, isOpen) => {
+  const toggleCollapse = (0, import_react287.useCallback)((taskId, isOpen) => {
     setCollapsed((prev) => {
       const next = new Set(prev);
       if (isOpen) next.add(taskId);
@@ -63996,7 +64369,7 @@ var Gantt = ({
       return next;
     });
   }, []);
-  const toggleLane = (0, import_react283.useCallback)((laneId, isOpen) => {
+  const toggleLane = (0, import_react287.useCallback)((laneId, isOpen) => {
     setClosedLanes((prev) => {
       const next = new Set(prev);
       if (isOpen) next.add(laneId);
@@ -64004,37 +64377,37 @@ var Gantt = ({
       return next;
     });
   }, []);
-  const effectiveTasks = (0, import_react283.useMemo)(() => {
+  const effectiveTasks = (0, import_react287.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_react283.useMemo)(() => {
+  const effectiveLanes = (0, import_react287.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_react283.useMemo)(
+  const committedModel = (0, import_react287.useMemo)(
     () => buildRows(effectiveTasks, effectiveLanes, rowOrder, rowHeight2),
     [effectiveTasks, effectiveLanes, rowOrder, rowHeight2]
   );
-  const range = (0, import_react283.useMemo)(() => {
+  const range = (0, import_react287.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_react283.useMemo)(
+  const scaleLevels = (0, import_react287.useMemo)(
     () => buildTimeScale(range.start, range.end, zoom, dateLocale),
     [range, zoom, dateLocale]
   );
-  const [colWidths, setColWidths] = (0, import_react283.useState)(
+  const [colWidths, setColWidths] = (0, import_react287.useState)(
     () => columnWidths ? { ...columnWidths } : {}
   );
-  (0, import_react283.useEffect)(() => {
+  (0, import_react287.useEffect)(() => {
     if (!columnWidths) return;
     setColWidths((prev) => ({ ...prev, ...columnWidths }));
   }, [columnWidths]);
@@ -64044,21 +64417,21 @@ var Gantt = ({
     const m = /^(\d+(?:\.\d+)?)px$/.exec(col.width ?? "");
     return m ? Number(m[1]) : 160;
   };
-  const sizedColumns = (0, import_react283.useMemo)(
+  const sizedColumns = (0, import_react287.useMemo)(
     () => resolvedColumns.map((c) => ({ ...c, width: `${effectiveColWidth(c)}px` })),
     [resolvedColumns, colWidths]
   );
-  const effectiveWidthsRef = (0, import_react283.useRef)({});
+  const effectiveWidthsRef = (0, import_react287.useRef)({});
   effectiveWidthsRef.current = Object.fromEntries(
     sizedColumns.map((c) => [c.key, effectiveColWidth(c)])
   );
-  const leftWidth = (0, import_react283.useMemo)(
+  const leftWidth = (0, import_react287.useMemo)(
     () => GRIP_WIDTH + resolvedColumns.reduce((sum, c) => sum + effectiveColWidth(c), 0),
     [resolvedColumns, colWidths]
   );
-  const resizingRef = (0, import_react283.useRef)(null);
-  const [resizingKey, setResizingKey] = (0, import_react283.useState)(null);
-  const startColumnResize = (0, import_react283.useCallback)(
+  const resizingRef = (0, import_react287.useRef)(null);
+  const [resizingKey, setResizingKey] = (0, import_react287.useState)(null);
+  const startColumnResize = (0, import_react287.useCallback)(
     (e, key) => {
       if (e.button !== 0) return;
       e.preventDefault();
@@ -64089,23 +64462,23 @@ var Gantt = ({
     },
     [onColumnWidthChange]
   );
-  (0, import_react283.useEffect)(
+  (0, import_react287.useEffect)(
     () => () => {
       document.body.style.cursor = "";
       document.body.style.userSelect = "";
     },
     []
   );
-  const scrollRef = (0, import_react283.useRef)(null);
-  const overlayRef = (0, import_react283.useRef)(null);
-  const rootRef = (0, import_react283.useRef)(null);
-  const headerScaleRef = (0, import_react283.useRef)(null);
-  const syncHeaderScale = (0, import_react283.useCallback)(() => {
+  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 s = scrollRef.current;
     const h = headerScaleRef.current;
     if (s && h) h.style.transform = `translateX(${-s.scrollLeft}px)`;
   }, []);
-  const zoomBy = (0, import_react283.useCallback)(
+  const zoomBy = (0, import_react287.useCallback)(
     (factor, pointerClientX) => {
       const el = scrollRef.current;
       const next = Math.min(maxZoom, Math.max(minZoom, zoom * factor));
@@ -64124,7 +64497,7 @@ var Gantt = ({
     },
     [zoom, minZoom, maxZoom, leftWidth, setZoom]
   );
-  (0, import_react283.useEffect)(() => {
+  (0, import_react287.useEffect)(() => {
     const el = scrollRef.current;
     if (!el) return;
     const onWheel = (e) => {
@@ -64136,10 +64509,10 @@ var Gantt = ({
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
   }, [zoomBy]);
-  (0, import_react283.useEffect)(() => {
+  (0, import_react287.useEffect)(() => {
     syncHeaderScale();
   }, [syncHeaderScale, timelineWidth, zoom, range.start, leftWidth]);
-  const liveRowsRef = (0, import_react283.useRef)(null);
+  const liveRowsRef = (0, import_react287.useRef)(null);
   const dragApi = useGanttDrag({
     scrollRef,
     overlayRef,
@@ -64161,12 +64534,12 @@ var Gantt = ({
     rowOrder,
     setSelected
   });
-  const liveReorder = (0, import_react283.useMemo)(() => {
+  const liveReorder = (0, import_react287.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_react283.useMemo)(
+  const liveModel = (0, import_react287.useMemo)(
     () => liveReorder ? buildRows(
       liveReorder.tasks,
       effectiveLanes,
@@ -64176,7 +64549,7 @@ var Gantt = ({
     [liveReorder, effectiveLanes, rowHeight2, committedModel]
   );
   liveRowsRef.current = liveModel.rows;
-  const bars = (0, import_react283.useMemo)(() => {
+  const bars = (0, import_react287.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of liveModel.rows) {
       if (!row.task) continue;
@@ -64198,7 +64571,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_react283.useCallback)(
+  const onBarKeyDown = (0, import_react287.useCallback)(
     (e, task) => {
       if (!interactive || task.locked || !onTasksChange) return;
       const stepMs = snap2 === "hour" ? 36e5 : snap2 === "week" ? 7 * MS_PER_DAY : MS_PER_DAY;
@@ -64243,7 +64616,7 @@ var Gantt = ({
     },
     [interactive, snap2, tasks, onTasksChange, setSelected]
   );
-  const deleteSelectedLink = (0, import_react283.useCallback)(() => {
+  const deleteSelectedLink = (0, import_react287.useCallback)(() => {
     const sel = dragApi.linkSelected;
     if (!sel || !interactive || !onLinksChange) return;
     const key = (l) => l.id ?? `${l.source}~${l.target}~${l.type ?? "fs"}`;
@@ -64251,7 +64624,7 @@ var Gantt = ({
     onLinksChange(links.filter((l) => key(l) !== selKey));
     dragApi.setLinkSelected(null);
   }, [dragApi, links, interactive, onLinksChange]);
-  const moveSelection = (0, import_react283.useCallback)(
+  const moveSelection = (0, import_react287.useCallback)(
     (where) => {
       const rows = liveModel.rows;
       if (!rows.length) return;
@@ -64264,7 +64637,7 @@ var Gantt = ({
     },
     [liveModel.rows, selectedId, setSelected]
   );
-  const onRootKeyDown = (0, import_react283.useCallback)(
+  const onRootKeyDown = (0, import_react287.useCallback)(
     (e) => {
       if (dragApi.linkSelected) {
         if (e.key === "Escape") {
@@ -64310,14 +64683,14 @@ var Gantt = ({
     },
     [dragApi, deleteSelectedLink, moveSelection, setZoom, zoom]
   );
-  const handleSelectLink = (0, import_react283.useCallback)(
+  const handleSelectLink = (0, import_react287.useCallback)(
     (link) => {
       dragApi.setLinkSelected(link);
       if (link) rootRef.current?.focus();
     },
     [dragApi]
   );
-  const handleRootPointerDown = (0, import_react283.useCallback)(
+  const handleRootPointerDown = (0, import_react287.useCallback)(
     (e) => {
       if (e.target.closest?.("[data-gantt-keep-link-selection]")) return;
       if (dragApi.linkSelected) dragApi.setLinkSelected(null);
@@ -64332,22 +64705,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_react283.useMemo)(() => {
+  const dragSubtree = (0, import_react287.useMemo)(() => {
     if (dragApi.drag?.kind !== "reorder") return null;
     return reorderDragSubtree(
       liveModel.rows,
       `task:${dragApi.drag.taskId}`
     );
   }, [dragApi.drag, liveModel.rows]);
-  const dragSubtreeKeys = (0, import_react283.useMemo)(
+  const dragSubtreeKeys = (0, import_react287.useMemo)(
     () => new Set((dragSubtree ?? []).map((r) => r.key)),
     [dragSubtree]
   );
-  const dragSubtreeHeight = (0, import_react283.useMemo)(
+  const dragSubtreeHeight = (0, import_react287.useMemo)(
     () => (dragSubtree ?? []).reduce((sum, r) => sum + r.height, 0),
     [dragSubtree]
   );
-  const liveDragDates = (0, import_react283.useMemo)(() => {
+  const liveDragDates = (0, import_react287.useMemo)(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind !== "move" && drag.kind !== "resize-start" && drag.kind !== "resize-end") return null;
     return applyDragDates(
@@ -64358,7 +64731,7 @@ var Gantt = ({
     );
   }, [drag, dragTask, zoom, snap2]);
   const liveDragProgress = drag?.kind === "progress" && drag.liveProgress != null ? drag.liveProgress : null;
-  const dragOverride = (0, import_react283.useMemo)(() => {
+  const dragOverride = (0, import_react287.useMemo)(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind === "progress" && drag.liveProgress != null) {
       return { ...dragTask, progress: drag.liveProgress };
@@ -64368,11 +64741,11 @@ var Gantt = ({
     }
     return null;
   }, [drag, dragTask, liveDragDates]);
-  const liveLaneProgress = (0, import_react283.useMemo)(
+  const liveLaneProgress = (0, import_react287.useMemo)(
     () => dragOverride && dragTask ? laneRollupProgress(effectiveTasks, dragTask.id, dragOverride) : null,
     [dragOverride, dragTask, effectiveTasks]
   );
-  const liveGroupProgress = (0, import_react283.useMemo)(() => {
+  const liveGroupProgress = (0, import_react287.useMemo)(() => {
     if (!dragOverride || !dragTask) return null;
     const byId = new Map(effectiveTasks.map((t2) => [t2.id, t2]));
     const m = /* @__PURE__ */ new Map();
@@ -64384,7 +64757,7 @@ var Gantt = ({
     }
     return m.size > 0 ? m : null;
   }, [dragOverride, dragTask, effectiveTasks]);
-  const liveLinkBars = (0, import_react283.useMemo)(() => {
+  const liveLinkBars = (0, import_react287.useMemo)(() => {
     if (!liveDragDates || !dragTask) return bars;
     const g = bars.get(dragTask.id);
     if (!g) return bars;
@@ -64393,12 +64766,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_react283.useMemo)(
+  const linkPaths = (0, import_react287.useMemo)(
     () => computeLinkPaths(links, liveLinkBars, color),
     [links, liveLinkBars, color]
   );
-  const linkFan = (0, import_react283.useMemo)(() => computeLinkFanOffsets(links, bars), [links, bars]);
-  return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+  const linkFan = (0, import_react287.useMemo)(() => computeLinkFanOffsets(links, bars), [links, bars]);
+  return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
     Panel_default,
     {
       ref: rootRef,
@@ -64416,31 +64789,31 @@ var Gantt = ({
       "aria-label": t("kit.gantt.root"),
       onKeyDown: onRootKeyDown,
       onPointerDown: handleRootPointerDown,
-      children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
           "div",
           {
-            className: (0, import_classnames117.default)(
+            className: (0, import_classnames122.default)(
               "flex shrink-0 items-center gap-3 border-b px-4 py-3",
               surfaceText.divider
             ),
             children: [
-              hasNode(icon) && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+              hasNode(icon) && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                 "div",
                 {
-                  className: (0, import_classnames117.default)(
+                  className: (0, import_classnames122.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_runtime307.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime307.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_runtime307.jsx)("div", { className: "truncate text-lg font-semibold text-neutral-900 dark:text-white", children: title })
+              (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 })
               ] }),
-              hasNode(actions) && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
-              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+              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)(
                 GanttToolbar,
                 {
                   variant,
@@ -64453,31 +64826,31 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
           "div",
           {
-            className: (0, import_classnames117.default)(
+            className: (0, import_classnames122.default)(
               "relative flex shrink-0 items-stretch border-b",
               surfaceText.divider
             ),
             style: { height: HEADER_HEIGHT },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
                 "div",
                 {
-                  className: (0, import_classnames117.default)(
+                  className: (0, import_classnames122.default)(
                     "flex items-stretch border-r bg-white dark:bg-neutral-900",
                     surfaceText.divider
                   ),
                   style: { width: leftWidth },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "w-9 shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "w-9 shrink-0" }),
                     sizedColumns.map((col) => {
                       const resizable = resizableColumns && col.resizable !== false;
-                      return /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
                         "div",
                         {
-                          className: (0, import_classnames117.default)(
+                          className: (0, import_classnames122.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
                           ),
@@ -64486,7 +64859,7 @@ var Gantt = ({
                             justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: "truncate", children: col.title }),
+                            /* @__PURE__ */ (0, import_jsx_runtime313.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
@@ -64495,7 +64868,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_runtime307.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                               "div",
                               {
                                 role: "separator",
@@ -64504,7 +64877,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_runtime307.jsx)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime313.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",
@@ -64521,30 +64894,30 @@ var Gantt = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsxs)(
                 "div",
                 {
                   ref: headerScaleRef,
                   className: "relative h-full",
                   style: { width: timelineWidth },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
-                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                       "div",
                       {
-                        className: (0, import_classnames117.default)(
+                        className: (0, import_classnames122.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_runtime307.jsx)(
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                       "div",
                       {
                         className: "pointer-events-none absolute top-1 z-10 -translate-x-1/2",
                         style: { left: todayX },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("span", { className: (0, import_classnames117.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_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 })
                       }
                     )
                   ]
@@ -64553,20 +64926,20 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime313.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_runtime307.jsx)("div", { style: { width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER, minWidth: "100%" }, children: loading ? /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(GanttSkeleton, { rows: 12, rowHeight: rowHeight2, leftWidth }) : isEmpty2 ? /* @__PURE__ */ (0, import_jsx_runtime307.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_runtime307.jsxs)("div", { className: "relative", style: { height: bodyHeight }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)(
+            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)(
                 "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_runtime307.jsx)(
+                    scaleLevels.length > 0 && scaleLevels[scaleLevels.length - 1].columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                       "div",
                       {
                         className: "absolute inset-y-0 border-r border-neutral-100 dark:border-neutral-800",
@@ -64574,10 +64947,10 @@ var Gantt = ({
                       },
                       c.id
                     )),
-                    todayVisible && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+                    todayVisible && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                       "div",
                       {
-                        className: (0, import_classnames117.default)("absolute inset-y-0 border-l-2", todayTokens.line),
+                        className: (0, import_classnames122.default)("absolute inset-y-0 border-l-2", todayTokens.line),
                         style: { left: todayX }
                       }
                     )
@@ -64587,7 +64960,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_runtime307.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                     "div",
                     {
                       "data-row-key": row.key,
@@ -64595,7 +64968,7 @@ var Gantt = ({
                       "aria-hidden": "true",
                       className: "pointer-events-none flex border-b",
                       style: { height: dragSubtreeHeight || row.height },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                         "div",
                         {
                           className: "m-1 flex-1 rounded-md border-2 border-dashed",
@@ -64612,7 +64985,7 @@ var Gantt = ({
                 if (drag?.kind === "reorder" && dragSubtreeKeys.has(row.key)) {
                   return null;
                 }
-                return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                   GanttBodyRow,
                   {
                     row,
@@ -64650,7 +65023,7 @@ var Gantt = ({
                   row.key
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                 GanttLinkLayer,
                 {
                   ref: overlayRef,
@@ -64666,7 +65039,7 @@ var Gantt = ({
                   onDeleteLink: interactive && onLinksChange ? deleteSelectedLink : void 0
                 }
               ),
-              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                 "div",
                 {
                   className: "pointer-events-none absolute z-30 h-0.5 rounded-full",
@@ -64686,7 +65059,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_runtime307.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                   "div",
                   {
                     "data-gantt-drag-clone": "true",
@@ -64697,14 +65070,14 @@ var Gantt = ({
                       top: drag.clientY - (drag.grabOffset?.y ?? 0),
                       width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime313.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_runtime307.jsx)(
+                        children: dragSubtree.map((row) => /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
                           GanttBodyRow,
                           {
                             row,
@@ -64747,7 +65120,7 @@ var Gantt = ({
                 ),
                 document.body
               ),
-              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ (0, import_jsx_runtime313.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",
@@ -64778,13 +65151,13 @@ var GanttSkeleton = ({
   rows,
   rowHeight: rowHeight2,
   leftWidth
-}) => /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "animate-pulse", "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime307.jsxs)("div", { className: "flex", style: { height: rowHeight2 }, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+}) => /* @__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)(
     "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_runtime307.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
         "div",
         {
           className: "h-3 rounded-full bg-neutral-200 dark:bg-neutral-700",
@@ -64793,7 +65166,7 @@ var GanttSkeleton = ({
       )
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime307.jsx)("div", { className: "relative flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
+  /* @__PURE__ */ (0, import_jsx_runtime313.jsx)("div", { className: "relative flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime313.jsx)(
     "div",
     {
       className: "absolute top-1/2 h-4 -translate-y-1/2 rounded-md bg-neutral-200/80 dark:bg-neutral-700/60",
@@ -64806,11 +65179,11 @@ var GanttSkeleton = ({
 ] }, i)) });
 
 // src/contexts/BottomSheetContext.tsx
-var import_react284 = require("react");
+var import_react288 = require("react");
 var import_react_dom16 = require("react-dom");
-var import_classnames118 = __toESM(require("classnames"), 1);
-var import_jsx_runtime308 = require("react/jsx-runtime");
-var BottomSheetContext = (0, import_react284.createContext)(null);
+var import_classnames123 = __toESM(require("classnames"), 1);
+var import_jsx_runtime314 = require("react/jsx-runtime");
+var BottomSheetContext = (0, import_react288.createContext)(null);
 var TRANSITION_MS2 = 260;
 var renderSlot = (slot, controls) => {
   if (!slot) {
@@ -64821,13 +65194,13 @@ var renderSlot = (slot, controls) => {
 var BottomSheetProvider = ({
   children
 }) => {
-  const [sheet, setSheet] = (0, import_react284.useState)(null);
-  const [isVisible, setIsVisible] = (0, import_react284.useState)(false);
-  const pendingCloseRef = (0, import_react284.useRef)(null);
-  const dismissSheet = (0, import_react284.useCallback)(() => {
+  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)(() => {
     setIsVisible(false);
   }, []);
-  const presentSheet = (0, import_react284.useCallback)((options) => {
+  const presentSheet = (0, import_react288.useCallback)((options) => {
     if (pendingCloseRef.current) {
       clearTimeout(pendingCloseRef.current);
       pendingCloseRef.current = null;
@@ -64840,7 +65213,7 @@ var BottomSheetProvider = ({
       setTimeout(animateIn, 0);
     }
   }, []);
-  (0, import_react284.useEffect)(() => {
+  (0, import_react288.useEffect)(() => {
     if (!isVisible && sheet) {
       pendingCloseRef.current = setTimeout(() => {
         sheet.onClose?.();
@@ -64855,7 +65228,7 @@ var BottomSheetProvider = ({
     }
     return void 0;
   }, [isVisible, sheet]);
-  (0, import_react284.useEffect)(
+  (0, import_react288.useEffect)(
     () => () => {
       if (pendingCloseRef.current) {
         clearTimeout(pendingCloseRef.current);
@@ -64863,13 +65236,13 @@ var BottomSheetProvider = ({
     },
     []
   );
-  const controls = (0, import_react284.useMemo)(
+  const controls = (0, import_react288.useMemo)(
     () => ({
       dismiss: dismissSheet
     }),
     [dismissSheet]
   );
-  const contextValue = (0, import_react284.useMemo)(
+  const contextValue = (0, import_react288.useMemo)(
     () => ({
       presentSheet,
       dismissSheet,
@@ -64879,11 +65252,11 @@ var BottomSheetProvider = ({
     [presentSheet, dismissSheet, sheet, isVisible]
   );
   const overlayNode = typeof document !== "undefined" && sheet ? (0, import_react_dom16.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)("div", { className: "pointer-events-none fixed inset-0 z-[70] flex items-end justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+    /* @__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)(
         "div",
         {
-          className: (0, import_classnames118.default)(
+          className: (0, import_classnames123.default)(
             "absolute inset-0 bg-neutral-900/40 transition-opacity duration-300",
             isVisible ? "opacity-100 pointer-events-auto" : "opacity-0"
           ),
@@ -64893,24 +65266,24 @@ var BottomSheetProvider = ({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "relative w-full max-w-4xl px-4 pb-4 sm:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(
+      /* @__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)(
         "section",
         {
           role: "dialog",
           "aria-modal": "true",
-          className: (0, import_classnames118.default)(
+          className: (0, import_classnames123.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_runtime308.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_runtime308.jsxs)("div", { className: "space-y-1", children: [
-                sheet.title && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: sheet.title }),
-                sheet.description && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("p", { className: "text-sm text-slate-500 dark:text-slate-300", children: sheet.description })
+            /* @__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 })
               ] }),
-              (sheet.showCloseButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
+              (sheet.showCloseButton ?? true) && /* @__PURE__ */ (0, import_jsx_runtime314.jsx)(
                 IconButton_default,
                 {
                   icon: "Close",
@@ -64922,21 +65295,21 @@ var BottomSheetProvider = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: renderSlot(sheet.content, controls) ?? /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("p", { className: "text-sm text-slate-500", children: "No content provided." }) }),
-            sheet.actions && /* @__PURE__ */ (0, import_jsx_runtime308.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_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) })
           ]
         }
       ) })
     ] }),
     document.body
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime308.jsxs)(BottomSheetContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime314.jsxs)(BottomSheetContext.Provider, { value: contextValue, children: [
     children,
     overlayNode
   ] });
 };
 var useBottomSheet = () => {
-  const context = (0, import_react284.useContext)(BottomSheetContext);
+  const context = (0, import_react288.useContext)(BottomSheetContext);
   if (!context) {
     throw new Error("useBottomSheet must be used within a BottomSheetProvider");
   }
@@ -65570,8 +65943,8 @@ var SYSTEM_VARIABLES = [
 ];
 
 // src/components/MetricBar.tsx
-var import_classnames119 = __toESM(require("classnames"), 1);
-var import_jsx_runtime309 = require("react/jsx-runtime");
+var import_classnames124 = __toESM(require("classnames"), 1);
+var import_jsx_runtime315 = require("react/jsx-runtime");
 var MetricBar = ({
   label,
   value,
@@ -65581,7 +65954,7 @@ var MetricBar = ({
   size = "sm",
   className,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime309.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime315.jsx)(
   Progress_default,
   {
     ...rest,
@@ -65591,7 +65964,7 @@ var MetricBar = ({
     formatValue: value !== void 0 ? () => String(value) : void 0,
     size,
     color: tone ?? color ?? "blue",
-    className: (0, import_classnames119.default)("w-full", className)
+    className: (0, import_classnames124.default)("w-full", className)
   }
 );
 MetricBar.displayName = "MetricBar";
@@ -65913,6 +66286,9 @@ MetricBar.displayName = "MetricBar";
   WorkflowRailSkeleton,
   WorkflowStatusNode,
   WorkflowTracker,
+  WorkflowTrackerDetails,
+  WorkflowTrackerRail,
+  WorkflowTrackerStepDetails,
   areaPathFromPoints,
   bandAreaPath,
   buildColumns,