@cjlapao/ui-kit 0.2.3 → 0.2.5

package/dist/index.js

@@ -5338,6 +5338,15 @@ var getSurfacePaddingClass = (padding) => surfacePaddingClasses[padding] ?? surf
 var getSurfacePaddingClasses = () => ({
   ...surfacePaddingClasses
 });
+var SURFACE_GUTTER_AXES = ["top", "right", "bottom", "left"];
+var surfaceGutterClasses = {
+  top: { none: "mt-0", xs: "mt-2", sm: "mt-4", md: "mt-6", lg: "mt-8", xl: "mt-10" },
+  right: { none: "mr-0", xs: "mr-2", sm: "mr-4", md: "mr-6", lg: "mr-8", xl: "mr-10" },
+  bottom: { none: "mb-0", xs: "mb-2", sm: "mb-4", md: "mb-6", lg: "mb-8", xl: "mb-10" },
+  left: { none: "ml-0", xs: "ml-2", sm: "ml-4", md: "ml-6", lg: "ml-8", xl: "ml-10" }
+};
+var DEFAULT_SURFACE_GUTTER = "none";
+var getSurfaceGutterClass = (axis, gutter) => surfaceGutterClasses[axis][gutter] ?? surfaceGutterClasses[axis][DEFAULT_SURFACE_GUTTER];
 var NEUTRAL_TONES = [
   "neutral",
   "slate",
@@ -21517,27 +21526,54 @@ var PageHeader = ({
   center,
   end,
   children,
+  variant = "default",
+  accentColor = "blue",
+  padding,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+  corner = DEFAULT_SURFACE_CORNER,
   className = "",
   ...rest
-}) => /* @__PURE__ */ jsxs97(
-  "header",
-  {
-    ...rest,
-    className: classNames51(
-      "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__ */ jsx201("div", { className: GROUP_CLASS2, children: start }),
-      /* @__PURE__ */ jsx201("div", { className: GROUP_CLASS2, children: center }),
-      /* @__PURE__ */ jsx201("div", { className: GROUP_CLASS2, children: end }),
-      children != null && /* @__PURE__ */ jsx201("div", { className: GROUP_CLASS2, children })
-    ]
-  }
-);
+}) => {
+  const surface = variant === "default" ? null : getSidebarSurfaceTokens(variant, accentColor);
+  const pair = surface ? "xs" : "none";
+  const gutter = {
+    top: paddingTop ?? padding ?? pair,
+    right: paddingRight ?? padding ?? pair,
+    bottom: paddingBottom ?? padding ?? "none",
+    left: paddingLeft ?? padding ?? "none"
+  };
+  return /* @__PURE__ */ jsxs97(
+    "header",
+    {
+      ...rest,
+      className: classNames51(
+        "flex w-full items-center justify-between gap-4 px-5",
+        SIDE_MENU_HEADER_HEIGHT,
+        getSurfaceGutterClass("top", gutter.top),
+        getSurfaceGutterClass("right", gutter.right),
+        getSurfaceGutterClass("bottom", gutter.bottom),
+        getSurfaceGutterClass("left", gutter.left),
+        getSurfaceCornerClass(corner),
+        surface ? classNames51(
+          "border",
+          surface.border,
+          surface.shadow,
+          surface.fill
+        ) : classNames51("border-b", SIDE_MENU_HEADER_FILL, SIDE_MENU_HEADER_SEAM),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx201("div", { className: GROUP_CLASS2, children: start }),
+        /* @__PURE__ */ jsx201("div", { className: GROUP_CLASS2, children: center }),
+        /* @__PURE__ */ jsx201("div", { className: GROUP_CLASS2, children: end }),
+        children != null && /* @__PURE__ */ jsx201("div", { className: GROUP_CLASS2, children })
+      ]
+    }
+  );
+};
 PageHeader.displayName = "PageHeader";
 var PageHeader_default = PageHeader;
 
@@ -42312,7 +42348,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"}` : "";
@@ -42485,48 +42522,56 @@ var SideMenu = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsx257("div", { className: `flex-1 px-3 py-1 overflow-y-auto w-full ${THIN_SCROLLBAR}`, children: /* @__PURE__ */ jsxs145("nav", { "aria-label": title || "Side menu", className: "space-y-1 w-full", children: [
-      visibleItems2.map((item, index) => {
-        if (item.type === "divider") {
-          return /* @__PURE__ */ jsx257(
-            "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__ */ jsxs145(React59.Fragment, { children: [
-            item.hasDivider && /* @__PURE__ */ jsx257(
-              "div",
-              {
-                className: `my-2 border-t ${surface.divider} ${contentCollapsed2 && !isMobileView ? "mx-1" : "mx-0"}`
-              }
-            ),
-            /* @__PURE__ */ jsx257(
-              "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__ */ jsxs145("p", { className: `px-3 py-6 text-center text-xs ${surface.muted}`, children: [
-        'No results for "',
-        searchQuery.trim(),
-        '"'
-      ] })
-    ] }) }),
+    /* @__PURE__ */ jsx257(
+      ScrollArea_default,
+      {
+        variant: "hover",
+        className: "flex-1 w-full",
+        contentClassName: "px-3 py-1",
+        children: /* @__PURE__ */ jsxs145("nav", { "aria-label": title || "Side menu", className: "space-y-1 w-full", children: [
+          visibleItems2.map((item, index) => {
+            if (item.type === "divider") {
+              return /* @__PURE__ */ jsx257(
+                "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__ */ jsxs145(React59.Fragment, { children: [
+                item.hasDivider && /* @__PURE__ */ jsx257(
+                  "div",
+                  {
+                    className: `my-2 border-t ${surface.divider} ${contentCollapsed2 && !isMobileView ? "mx-1" : "mx-0"}`
+                  }
+                ),
+                /* @__PURE__ */ jsx257(
+                  "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__ */ jsxs145("p", { className: `px-3 py-6 text-center text-xs ${surface.muted}`, children: [
+            'No results for "',
+            searchQuery.trim(),
+            '"'
+          ] })
+        ] })
+      }
+    ),
     footerItem && /* @__PURE__ */ jsx257("div", { className: "shrink-0 px-3 pb-1", children: /* @__PURE__ */ jsx257(
       SideMenuDropdownRow,
       {
@@ -59820,12 +59865,16 @@ var TreeView = ({
 var TreeView_default = TreeView;
 
 // src/components/WorkflowTracker/WorkflowTracker.tsx
-import { useMemo as useMemo51 } from "react";
-import classNames113 from "classnames";
+import { useMemo as useMemo56 } from "react";
+import classNames119 from "classnames";
+
+// src/components/WorkflowTracker/WorkflowTrackerRail.tsx
+import { useMemo as useMemo52 } from "react";
+import classNames112 from "classnames";
 
 // src/components/WorkflowTracker/WorkflowTimeline.tsx
 import React87 from "react";
-import classNames110 from "classnames";
+import classNames111 from "classnames";
 
 // src/components/WorkflowTracker/WorkflowSkeleton.tsx
 import classNames107 from "classnames";
@@ -60114,34 +60163,73 @@ var WorkflowStatusNode = ({
 };
 var WorkflowStatusNode_default = WorkflowStatusNode;
 
-// src/components/WorkflowTracker/parts.tsx
+// src/components/WorkflowTracker/WorkflowQuickActions.tsx
 import classNames109 from "classnames";
-import { jsx as jsx298, jsxs as jsxs181 } from "react/jsx-runtime";
+import { jsx as jsx298 } from "react/jsx-runtime";
+var WorkflowQuickActions = ({
+  stepId,
+  actions,
+  palette,
+  groupLabel,
+  onAction,
+  className,
+  style
+}) => {
+  if (!onAction || actions.length === 0) return null;
+  return /* @__PURE__ */ jsx298(
+    "div",
+    {
+      role: "group",
+      "aria-label": groupLabel,
+      className: classNames109("flex flex-wrap gap-1.5", className),
+      style,
+      children: actions.map((action) => /* @__PURE__ */ jsx298(
+        Button_default,
+        {
+          size: "xs",
+          weight: "medium",
+          variant: action.variant ?? "soft",
+          color: action.tone ?? palette.accent,
+          leadingIcon: action.leadingIcon,
+          disabled: action.disabled,
+          onClick: () => onAction(stepId, action.id),
+          children: action.label
+        },
+        action.id
+      ))
+    }
+  );
+};
+var WorkflowQuickActions_default = WorkflowQuickActions;
+
+// src/components/WorkflowTracker/parts.tsx
+import classNames110 from "classnames";
+import { jsx as jsx299, jsxs as jsxs181 } from "react/jsx-runtime";
 var resolve = (surfaces) => surfaces ?? getSurfaceTokens(false);
 var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) => /* @__PURE__ */ jsxs181(
   "div",
   {
-    className: classNames109(
+    className: classNames110(
       "flex flex-col items-center justify-center gap-3 px-6 py-10 text-center",
       className
     ),
     children: [
-      /* @__PURE__ */ jsx298(WorkflowStatusNode_default, { status: "not_started", palette, size: "lg" }),
+      /* @__PURE__ */ jsx299(WorkflowStatusNode_default, { status: "not_started", palette, size: "lg" }),
       /* @__PURE__ */ jsxs181("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx298(
+        /* @__PURE__ */ jsx299(
           "p",
           {
-            className: classNames109(
+            className: classNames110(
               "text-sm font-semibold",
               resolve(surfaces).mutedText
             ),
             children: title
           }
         ),
-        subtitle && /* @__PURE__ */ jsx298(
+        subtitle && /* @__PURE__ */ jsx299(
           "p",
           {
-            className: classNames109(
+            className: classNames110(
               "max-w-xs text-xs leading-5",
               resolve(surfaces).faintText
             ),
@@ -60152,10 +60240,10 @@ var WorkflowPlaceholder = ({ title, subtitle, palette, surfaces, className }) =>
     ]
   }
 );
-var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ jsx298(
+var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ jsx299(
   "span",
   {
-    className: classNames109(
+    className: classNames110(
       "text-[10px] font-semibold uppercase tracking-widest",
       resolve(surfaces).faintText,
       className
@@ -60163,7 +60251,7 @@ var SectionTitle = ({ children, surfaces, className }) => /* @__PURE__ */ jsx298
     children
   }
 );
-var SectionMeta = ({ children, surfaces, className }) => /* @__PURE__ */ jsx298("span", { className: classNames109("text-xs", resolve(surfaces).mutedText, className), children });
+var SectionMeta = ({ children, surfaces, className }) => /* @__PURE__ */ jsx299("span", { className: classNames110("text-xs", resolve(surfaces).mutedText, className), children });
 var WorkflowBadge = ({
   children,
   status,
@@ -60171,14 +60259,14 @@ var WorkflowBadge = ({
   tone
 }) => {
   const tokens = getStatusTokens(status, palette);
-  return /* @__PURE__ */ jsx298(
+  return /* @__PURE__ */ jsx299(
     Pill_default,
     {
       size: "xs",
       uppercase: true,
       tone: tone ?? tokens.pillTone,
       variant: "outline",
-      className: classNames109(
+      className: classNames110(
         "shrink-0 font-medium",
         tone ? `bg-${tone}-100 dark:bg-${tone}-900` : tokens.pillFill
       ),
@@ -60187,16 +60275,16 @@ var WorkflowBadge = ({
   );
 };
 var MetaField = ({ label, value, surfaces }) => /* @__PURE__ */ jsxs181("div", { className: "min-w-0", children: [
-  /* @__PURE__ */ jsx298(SectionTitle, { surfaces, children: label }),
-  /* @__PURE__ */ jsx298("p", { className: "mt-1 text-sm font-medium text-neutral-800 dark:text-neutral-100", children: value })
+  /* @__PURE__ */ jsx299(SectionTitle, { surfaces, children: label }),
+  /* @__PURE__ */ jsx299("p", { className: "mt-1 text-sm font-medium text-neutral-800 dark:text-neutral-100", children: value })
 ] });
 var Tally = ({ count, label, surfaces }) => /* @__PURE__ */ jsxs181("span", { className: "inline-flex items-center gap-1", children: [
-  /* @__PURE__ */ jsx298("span", { className: "font-semibold text-neutral-900 dark:text-white", children: count }),
-  /* @__PURE__ */ jsx298("span", { className: resolve(surfaces).mutedText, children: label })
+  /* @__PURE__ */ jsx299("span", { className: "font-semibold text-neutral-900 dark:text-white", children: count }),
+  /* @__PURE__ */ jsx299("span", { className: resolve(surfaces).mutedText, children: label })
 ] });
 
 // src/components/WorkflowTracker/WorkflowTimeline.tsx
-import { Fragment as Fragment46, jsx as jsx299, jsxs as jsxs182 } from "react/jsx-runtime";
+import { Fragment as Fragment46, jsx as jsx300, jsxs as jsxs182 } from "react/jsx-runtime";
 var CONNECTOR_LEFT = 9;
 var CONNECTOR_TOP = 24;
 var NESTED_INDENT = 32;
@@ -60214,16 +60302,16 @@ var NestedSubSteps = ({
   palette,
   surfaces,
   onSubStepSelect
-}) => /* @__PURE__ */ jsx299(
+}) => /* @__PURE__ */ jsx300(
   "div",
   {
-    className: classNames110("mt-3 rounded-lg p-3", surfaces.nestedBox),
+    className: classNames111("mt-3 rounded-lg p-3", surfaces.nestedBox),
     style: { marginLeft: NESTED_INDENT },
-    children: /* @__PURE__ */ jsx299("ul", { className: "space-y-2.5", children: subSteps.map((subStep) => {
+    children: /* @__PURE__ */ jsx300("ul", { className: "space-y-2.5", children: subSteps.map((subStep) => {
       const status = normalizeStatus(subStep.status);
       const isActive = status === "running" || status === "in_progress";
       const content = /* @__PURE__ */ jsxs182(Fragment46, { children: [
-        /* @__PURE__ */ jsx299(
+        /* @__PURE__ */ jsx300(
           WorkflowStatusNode_default,
           {
             status,
@@ -60231,10 +60319,10 @@ var NestedSubSteps = ({
             size: "sm"
           }
         ),
-        /* @__PURE__ */ jsx299(
+        /* @__PURE__ */ jsx300(
           "span",
           {
-            className: classNames110(
+            className: classNames111(
               "text-sm",
               isActive ? "font-semibold text-neutral-900 dark:text-white" : "text-neutral-600 dark:text-neutral-300"
             ),
@@ -60242,7 +60330,7 @@ var NestedSubSteps = ({
           }
         )
       ] });
-      return /* @__PURE__ */ jsx299("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx299(
+      return /* @__PURE__ */ jsx300("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx300(
         "button",
         {
           type: "button",
@@ -60250,7 +60338,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__ */ jsx299("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
+      ) : /* @__PURE__ */ jsx300("div", { className: "flex items-center gap-2.5", children: content }) }, subStep.id);
     }) })
   }
 );
@@ -60267,10 +60355,11 @@ var WorkflowTimeline = ({
   loadingRows,
   emptyState,
   onStepSelect,
-  onSubStepSelect
+  onSubStepSelect,
+  onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ jsx299(WorkflowRailSkeleton, { rows: loadingRows });
+    return /* @__PURE__ */ jsx300(WorkflowRailSkeleton, { rows: loadingRows });
   }
   const isEmpty2 = steps.length === 0;
   const tallyEntries = [
@@ -60280,18 +60369,18 @@ var WorkflowTimeline = ({
     { count: tallies.remaining, label: labels.remaining }
   ].filter((entry) => entry.count > 0);
   return /* @__PURE__ */ jsxs182("div", { className: "flex flex-col", children: [
-    !isEmpty2 && /* @__PURE__ */ jsxs182("div", { className: classNames110("border-b px-5 pb-4 pt-5", surfaces.border), children: [
+    !isEmpty2 && /* @__PURE__ */ jsxs182("div", { className: classNames111("border-b px-5 pb-4 pt-5", surfaces.border), children: [
       /* @__PURE__ */ jsxs182("div", { className: "flex items-baseline justify-between gap-3", children: [
-        /* @__PURE__ */ jsx299(SectionTitle, { surfaces, children: labels.progress }),
+        /* @__PURE__ */ jsx300(SectionTitle, { surfaces, children: labels.progress }),
         /* @__PURE__ */ jsxs182("span", { className: "text-sm font-semibold text-neutral-900 dark:text-white", children: [
           progress,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx299(
+      /* @__PURE__ */ jsx300(
         Progress_default,
         {
-          className: classNames110(
+          className: classNames111(
             "mt-2",
             surfaces.translucent ? "bg-white/40 dark:bg-white/15" : "bg-neutral-200 dark:bg-neutral-700"
           ),
@@ -60301,8 +60390,8 @@ var WorkflowTimeline = ({
           motion: "none"
         }
       ),
-      tallyEntries.length > 0 && /* @__PURE__ */ jsx299("div", { className: "mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: tallyEntries.map((entry, index) => /* @__PURE__ */ jsxs182(React87.Fragment, { children: [
-        index > 0 && /* @__PURE__ */ jsx299(
+      tallyEntries.length > 0 && /* @__PURE__ */ jsx300("div", { className: "mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs", children: tallyEntries.map((entry, index) => /* @__PURE__ */ jsxs182(React87.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsx300(
           "span",
           {
             "aria-hidden": "true",
@@ -60310,7 +60399,7 @@ var WorkflowTimeline = ({
             children: "\xB7"
           }
         ),
-        /* @__PURE__ */ jsx299(
+        /* @__PURE__ */ jsx300(
           Tally,
           {
             count: entry.count,
@@ -60320,7 +60409,7 @@ var WorkflowTimeline = ({
         )
       ] }, entry.label)) })
     ] }),
-    /* @__PURE__ */ jsx299("div", { className: classNames110(isEmpty2 ? "" : "px-5 py-5"), children: isEmpty2 ? emptyState ?? /* @__PURE__ */ jsx299(
+    /* @__PURE__ */ jsx300("div", { className: classNames111(isEmpty2 ? "" : "px-5 py-5"), children: isEmpty2 ? emptyState ?? /* @__PURE__ */ jsx300(
       WorkflowPlaceholder,
       {
         title: labels.empty,
@@ -60328,14 +60417,14 @@ var WorkflowTimeline = ({
         palette,
         surfaces
       }
-    ) : /* @__PURE__ */ jsx299("ol", { className: "m-0 list-none p-0", children: steps.map((step, index) => {
+    ) : /* @__PURE__ */ jsx300("ol", { className: "m-0 list-none p-0", children: steps.map((step, index) => {
       const status = normalizeStatus(step.status);
       const tokens = getStatusTokens(status, palette);
       const isActive = step.id === activeStepId;
       const isLast = index === steps.length - 1;
       const nested = isActive && step.subSteps && step.subSteps.length > 0 ? step.subSteps : void 0;
       const rowContent = /* @__PURE__ */ jsxs182(Fragment46, { children: [
-        /* @__PURE__ */ jsx299(
+        /* @__PURE__ */ jsx300(
           WorkflowStatusNode_default,
           {
             status,
@@ -60345,17 +60434,17 @@ var WorkflowTimeline = ({
         ),
         /* @__PURE__ */ jsxs182("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs182("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx299(
+            /* @__PURE__ */ jsx300(
               "span",
               {
-                className: classNames110(
+                className: classNames111(
                   "text-sm",
                   isActive ? "font-semibold text-neutral-900 dark:text-white" : "font-medium text-neutral-700 dark:text-neutral-200"
                 ),
                 children: step.label
               }
             ),
-            step.badge && /* @__PURE__ */ jsx299(
+            step.badge && /* @__PURE__ */ jsx300(
               WorkflowBadge,
               {
                 status,
@@ -60365,10 +60454,10 @@ var WorkflowTimeline = ({
               }
             )
           ] }),
-          step.meta && /* @__PURE__ */ jsx299(
+          step.meta && /* @__PURE__ */ jsx300(
             "p",
             {
-              className: classNames110(
+              className: classNames111(
                 "mt-1 text-xs leading-5",
                 surfaces.mutedText
               ),
@@ -60380,21 +60469,21 @@ var WorkflowTimeline = ({
       return /* @__PURE__ */ jsxs182(
         "li",
         {
-          className: classNames110("relative", !isLast && "pb-5"),
+          className: classNames111("relative", !isLast && "pb-5"),
           "aria-current": isActive ? "step" : void 0,
           children: [
-            !isLast && /* @__PURE__ */ jsx299(
+            !isLast && /* @__PURE__ */ jsx300(
               "span",
               {
                 "aria-hidden": "true",
-                className: classNames110(
+                className: classNames111(
                   "absolute bottom-0",
                   tokens.connectorDashed ? `border-l-2 border-dashed ${tokens.connector}` : `w-0.5 rounded-full ${tokens.connector}`
                 ),
                 style: { left: CONNECTOR_LEFT, top: CONNECTOR_TOP }
               }
             ),
-            onStepSelect ? /* @__PURE__ */ jsx299(
+            onStepSelect ? /* @__PURE__ */ jsx300(
               "button",
               {
                 type: "button",
@@ -60402,8 +60491,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__ */ jsx299("div", { className: "flex items-start gap-3", children: rowContent }),
-            nested && /* @__PURE__ */ jsx299(
+            ) : /* @__PURE__ */ jsx300("div", { className: "flex items-start gap-3", children: rowContent }),
+            /* @__PURE__ */ jsx300(
+              WorkflowQuickActions_default,
+              {
+                stepId: step.id,
+                actions: step.actions ?? [],
+                palette,
+                groupLabel: labels.quickActions,
+                onAction: onStepAction,
+                className: "ml-8 mt-2"
+              }
+            ),
+            nested && /* @__PURE__ */ jsx300(
               NestedSubSteps,
               {
                 stepId: step.id,
@@ -60418,8 +60518,8 @@ var WorkflowTimeline = ({
         step.id
       );
     }) }) }),
-    showLegend && !isEmpty2 && /* @__PURE__ */ jsx299("div", { className: classNames110("mt-auto border-t px-5 py-4", surfaces.border), children: /* @__PURE__ */ jsx299("ul", { className: "flex flex-wrap gap-x-4 gap-y-2", children: LEGEND_ORDER.map((status) => /* @__PURE__ */ jsxs182("li", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx299(
+    showLegend && !isEmpty2 && /* @__PURE__ */ jsx300("div", { className: classNames111("mt-auto border-t px-5 py-4", surfaces.border), children: /* @__PURE__ */ jsx300("ul", { className: "flex flex-wrap gap-x-4 gap-y-2", children: LEGEND_ORDER.map((status) => /* @__PURE__ */ jsxs182("li", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx300(
         WorkflowStatusNode_default,
         {
           status,
@@ -60427,14 +60527,92 @@ var WorkflowTimeline = ({
           size: "sm"
         }
       ),
-      /* @__PURE__ */ jsx299("span", { className: classNames110("text-xs", surfaces.mutedText), children: labels.statuses[status] })
+      /* @__PURE__ */ jsx300("span", { className: classNames111("text-xs", surfaces.mutedText), children: labels.statuses[status] })
     ] }, status)) }) })
   ] });
 };
 var WorkflowTimeline_default = WorkflowTimeline;
 
-// src/components/WorkflowTracker/WorkflowDetailPanel.tsx
-import classNames111 from "classnames";
+// src/components/WorkflowTracker/chrome.ts
+import { useMemo as useMemo51 } from "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 = useMemo51(
+    () => ({
+      accent: accentColor,
+      attention: attentionColor,
+      blocked: blockedColor,
+      muted: mutedColor,
+      translucent
+    }),
+    [accentColor, attentionColor, blockedColor, mutedColor, translucent]
+  );
+  const surfaces = useMemo51(() => 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) => {
@@ -60509,8 +60687,262 @@ var resolveActiveStep = (steps, activeStepId) => {
   return { step: steps[0], index: 1 };
 };
 
+// src/components/WorkflowTracker/sampleWorkflow.tsx
+import { jsx as jsx301, jsxs as jsxs183 } from "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__ */ jsxs183("div", { className: "space-y-3 px-5 py-4 sm:px-6", children: [
+        /* @__PURE__ */ jsx301("p", { className: "text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: "The liability certificate expired on 12 Aug. A reminder went to the vendor\u2019s compliance contact; the underwriter quote is still pending." }),
+        /* @__PURE__ */ jsx301("ul", { className: "flex flex-wrap gap-2", children: ["reminder-12-aug.pdf", "underwriter-quote.pdf"].map((file) => /* @__PURE__ */ jsx301(
+          "li",
+          {
+            className: "rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-700 dark:text-neutral-400",
+            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__ */ jsxs183("div", { className: "space-y-5 px-5 py-4 sm:px-6", children: [
+        /* @__PURE__ */ jsxs183("div", { children: [
+          /* @__PURE__ */ jsx301("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Review activity" }),
+          /* @__PURE__ */ jsx301("p", { className: "mt-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: "Reviewer A. Lindqvist is cross-checking the subprocessor list against the master agreement. Uploads appear here as the vendor submits them." })
+        ] }),
+        /* @__PURE__ */ jsxs183("div", { children: [
+          /* @__PURE__ */ jsx301("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Files received" }),
+          /* @__PURE__ */ jsx301("ul", { className: "mt-2 flex flex-wrap gap-2", children: [
+            "data-handling-v3.pdf",
+            "pentest-2026.pdf",
+            "soc2-typeii.pdf"
+          ].map((file) => /* @__PURE__ */ jsx301(
+            "li",
+            {
+              className: "rounded-full border border-neutral-200 px-2.5 py-0.5 text-xs text-neutral-500 dark:border-neutral-700 dark:text-neutral-400",
+              children: file
+            },
+            file
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs183("div", { children: [
+          /* @__PURE__ */ jsx301("p", { className: "text-[11px] font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500", children: "Open findings" }),
+          /* @__PURE__ */ jsxs183("ul", { className: "mt-2 space-y-2", children: [
+            /* @__PURE__ */ jsxs183("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx301(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  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__ */ jsxs183("li", { className: "flex items-start gap-2 text-sm leading-6 text-neutral-600 dark:text-neutral-300", children: [
+              /* @__PURE__ */ jsx301(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  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
+import { jsx as jsx302 } from "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 = useMemo52(() => resolveLabels(labelOverrides), [labelOverrides]);
+  const cardProps = buildCardProps(styleProps);
+  const active = useMemo52(
+    () => resolveActiveStep(steps, data?.activeStepId),
+    [steps, data?.activeStepId]
+  );
+  const progress = useMemo52(() => computeProgress(steps), [steps]);
+  const tallies = useMemo52(() => computeTallies(steps), [steps]);
+  return /* @__PURE__ */ jsx302(
+    Panel_default,
+    {
+      ...cardProps,
+      scrollable: cardScrollable ?? false,
+      className: classNames112(className, cardClassName),
+      style,
+      children: /* @__PURE__ */ jsx302(
+        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
+import { useMemo as useMemo53 } from "react";
+import classNames114 from "classnames";
+
 // src/components/WorkflowTracker/WorkflowDetailPanel.tsx
-import { Fragment as Fragment47, jsx as jsx300, jsxs as jsxs183 } from "react/jsx-runtime";
+import classNames113 from "classnames";
+import { Fragment as Fragment47, jsx as jsx303, jsxs as jsxs184 } from "react/jsx-runtime";
 var WorkflowDetailPanel = ({
   active,
   totalSteps,
@@ -60518,13 +60950,14 @@ var WorkflowDetailPanel = ({
   surfaces,
   labels,
   loading,
-  onSubStepSelect
+  onSubStepSelect,
+  onStepAction
 }) => {
   if (loading) {
-    return /* @__PURE__ */ jsx300(WorkflowDetailSkeleton, {});
+    return /* @__PURE__ */ jsx303(WorkflowDetailSkeleton, {});
   }
   if (!active) {
-    return /* @__PURE__ */ jsx300(
+    return /* @__PURE__ */ jsx303(
       WorkflowPlaceholder,
       {
         title: labels.noActiveStep,
@@ -60542,11 +60975,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__ */ jsxs183("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs183("div", { className: "px-5 pb-6 pt-5 sm:px-6", children: [
-      /* @__PURE__ */ jsxs183("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
-        /* @__PURE__ */ jsxs183("div", { className: "flex flex-wrap items-center gap-3", children: [
-          /* @__PURE__ */ jsxs183(SectionTitle, { surfaces, children: [
+  return /* @__PURE__ */ jsxs184("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs184("div", { className: "px-5 pb-6 pt-5 sm:px-6", children: [
+      /* @__PURE__ */ jsxs184("div", { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-2", children: [
+        /* @__PURE__ */ jsxs184("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs184(SectionTitle, { surfaces, children: [
             labels.step,
             " ",
             index,
@@ -60555,7 +60988,7 @@ var WorkflowDetailPanel = ({
             " ",
             totalSteps
           ] }),
-          step.badge && /* @__PURE__ */ jsx300(
+          step.badge && /* @__PURE__ */ jsx303(
             WorkflowBadge,
             {
               status,
@@ -60565,24 +60998,36 @@ var WorkflowDetailPanel = ({
             }
           )
         ] }),
-        step.elapsed && /* @__PURE__ */ jsxs183(SectionMeta, { surfaces, children: [
-          labels.elapsed,
-          " ",
-          step.elapsed
+        /* @__PURE__ */ jsxs184("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2", children: [
+          step.elapsed && /* @__PURE__ */ jsxs184(SectionMeta, { surfaces, children: [
+            labels.elapsed,
+            " ",
+            step.elapsed
+          ] }),
+          /* @__PURE__ */ jsx303(
+            WorkflowQuickActions_default,
+            {
+              stepId: step.id,
+              actions: step.actions ?? [],
+              palette,
+              groupLabel: labels.quickActions,
+              onAction: onStepAction
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ jsx300("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__ */ jsx300(
+      /* @__PURE__ */ jsx303("h3", { className: "mt-3 text-xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-2xl", children: step.label }),
+      step.description && /* @__PURE__ */ jsx303(
         "p",
         {
-          className: classNames111(
+          className: classNames113(
             "mt-2 max-w-3xl text-sm leading-6",
             surfaces.mutedText
           ),
           children: step.description
         }
       ),
-      metaFields.length > 0 && /* @__PURE__ */ jsx300("div", { className: "mt-5 flex flex-wrap gap-x-10 gap-y-4", children: metaFields.map((field) => /* @__PURE__ */ jsx300(
+      metaFields.length > 0 && /* @__PURE__ */ jsx303("div", { className: "mt-5 flex flex-wrap gap-x-10 gap-y-4", children: metaFields.map((field) => /* @__PURE__ */ jsx303(
         MetaField,
         {
           label: field.label,
@@ -60592,18 +61037,18 @@ var WorkflowDetailPanel = ({
         field.label
       )) })
     ] }),
-    subSteps.length > 0 && /* @__PURE__ */ jsxs183(Fragment47, { children: [
-      /* @__PURE__ */ jsxs183(
+    subSteps.length > 0 && /* @__PURE__ */ jsxs184(Fragment47, { children: [
+      /* @__PURE__ */ jsxs184(
         "div",
         {
-          className: classNames111(
+          className: classNames113(
             "flex flex-wrap items-center justify-between gap-2 border-y px-5 py-2.5 sm:px-6",
             surfaces.border,
             surfaces.strip
           ),
           children: [
-            /* @__PURE__ */ jsx300(SectionTitle, { surfaces, children: labels.subSteps }),
-            /* @__PURE__ */ jsxs183(SectionMeta, { surfaces, children: [
+            /* @__PURE__ */ jsx303(SectionTitle, { surfaces, children: labels.subSteps }),
+            /* @__PURE__ */ jsxs184(SectionMeta, { surfaces, children: [
               summary.accepted,
               " ",
               labels.accepted,
@@ -60619,24 +61064,24 @@ var WorkflowDetailPanel = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx300(
+      /* @__PURE__ */ jsx303(
         "ul",
         {
-          className: classNames111(
+          className: classNames113(
             "m-0 list-none divide-y p-0",
             surfaces.divider
           ),
           children: subSteps.map((subStep) => {
             const subStatus = normalizeStatus(subStep.status);
             const isRunning = subStatus === "running";
-            const rowContent = /* @__PURE__ */ jsxs183(Fragment47, { children: [
-              /* @__PURE__ */ jsx300(WorkflowStatusNode_default, { status: subStatus, palette }),
-              /* @__PURE__ */ jsxs183("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsx300("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: subStep.label }),
-                subStep.note && /* @__PURE__ */ jsx300(
+            const rowContent = /* @__PURE__ */ jsxs184(Fragment47, { children: [
+              /* @__PURE__ */ jsx303(WorkflowStatusNode_default, { status: subStatus, palette }),
+              /* @__PURE__ */ jsxs184("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx303("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: subStep.label }),
+                subStep.note && /* @__PURE__ */ jsx303(
                   "p",
                   {
-                    className: classNames111(
+                    className: classNames113(
                       "mt-0.5 text-xs leading-5",
                       surfaces.mutedText
                     ),
@@ -60644,7 +61089,7 @@ var WorkflowDetailPanel = ({
                   }
                 )
               ] }),
-              subStep.badge && /* @__PURE__ */ jsx300(
+              subStep.badge && /* @__PURE__ */ jsx303(
                 WorkflowBadge,
                 {
                   status: subStatus,
@@ -60653,10 +61098,10 @@ var WorkflowDetailPanel = ({
                   children: subStep.badge
                 }
               ),
-              /* @__PURE__ */ jsx300(
+              /* @__PURE__ */ jsx303(
                 "span",
                 {
-                  className: classNames111(
+                  className: classNames113(
                     "w-10 shrink-0 text-right text-xs tabular-nums",
                     surfaces.faintText
                   ),
@@ -60664,22 +61109,22 @@ var WorkflowDetailPanel = ({
                 }
               )
             ] });
-            const rowClasses = classNames111(
+            const rowClasses = classNames113(
               "flex w-full items-center gap-3 px-5 py-3 text-left sm:px-6",
               isRunning && getRowHighlight(palette.accent, surfaces.translucent)
             );
-            return /* @__PURE__ */ jsx300("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx300(
+            return /* @__PURE__ */ jsx303("li", { children: onSubStepSelect ? /* @__PURE__ */ jsx303(
               "button",
               {
                 type: "button",
                 onClick: () => onSubStepSelect(step.id, subStep.id),
-                className: classNames111(
+                className: classNames113(
                   rowClasses,
                   "focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-500"
                 ),
                 children: rowContent
               }
-            ) : /* @__PURE__ */ jsx300("div", { className: rowClasses, children: rowContent }) }, subStep.id);
+            ) : /* @__PURE__ */ jsx303("div", { className: rowClasses, children: rowContent }) }, subStep.id);
           })
         }
       )
@@ -60688,18 +61133,128 @@ var WorkflowDetailPanel = ({
 };
 var WorkflowDetailPanel_default = WorkflowDetailPanel;
 
+// src/components/WorkflowTracker/WorkflowTrackerStepDetails.tsx
+import { jsx as jsx304 } from "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 = useMemo53(
+    () => resolveLabels(labelOverrides),
+    [labelOverrides]
+  );
+  const cardProps = buildCardProps(styleProps);
+  const active = useMemo53(
+    () => resolveActiveStep(steps, data?.activeStepId),
+    [steps, data?.activeStepId]
+  );
+  return /* @__PURE__ */ jsx304(
+    Panel_default,
+    {
+      ...cardProps,
+      className: classNames114(className, cardClassName),
+      style,
+      children: /* @__PURE__ */ jsx304(
+        WorkflowDetailPanel_default,
+        {
+          active,
+          totalSteps: steps.length,
+          palette,
+          surfaces,
+          labels,
+          loading,
+          onSubStepSelect,
+          onStepAction
+        }
+      )
+    }
+  );
+};
+var WorkflowTrackerStepDetails_default = WorkflowTrackerStepDetails;
+
+// src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
+import { useMemo as useMemo54 } from "react";
+import classNames116 from "classnames";
+
+// src/components/WorkflowTracker/WorkflowDetailsCard.tsx
+import classNames115 from "classnames";
+import { jsx as jsx305 } from "react/jsx-runtime";
+var WorkflowDetailsCard = ({
+  details,
+  ariaLabel,
+  cardProps,
+  className,
+  style
+}) => /* @__PURE__ */ jsx305(
+  Panel_default,
+  {
+    ...cardProps,
+    flexBody: true,
+    className: classNames115("flex-1", className),
+    style,
+    children: /* @__PURE__ */ jsx305(ScrollArea_default, { className: "h-full", mask: true, role: "region", "aria-label": ariaLabel, children: details })
+  }
+);
+var WorkflowDetailsCard_default = WorkflowDetailsCard;
+
+// src/components/WorkflowTracker/WorkflowTrackerDetails.tsx
+import { jsx as jsx306 } from "react/jsx-runtime";
+var WorkflowTrackerDetails = ({
+  data = sampleWorkflow,
+  loading = false,
+  labels: labelOverrides,
+  cardClassName,
+  className,
+  style,
+  ...styleProps
+}) => {
+  const steps = data?.steps ?? [];
+  const labels = useMemo54(() => resolveLabels(labelOverrides), [labelOverrides]);
+  const cardProps = buildCardProps(styleProps);
+  const active = useMemo54(
+    () => resolveActiveStep(steps, data?.activeStepId),
+    [steps, data?.activeStepId]
+  );
+  const details = active?.step.details;
+  if (loading || details == null || details === "") return null;
+  return /* @__PURE__ */ jsx306(
+    WorkflowDetailsCard_default,
+    {
+      details,
+      ariaLabel: labels.details,
+      cardProps,
+      className: classNames116(className, cardClassName),
+      style
+    }
+  );
+};
+var WorkflowTrackerDetails_default = WorkflowTrackerDetails;
+
+// src/components/WorkflowTracker/WorkflowTrackerRollups.tsx
+import { useMemo as useMemo55 } from "react";
+import classNames118 from "classnames";
+
 // src/components/WorkflowTracker/WorkflowSummaryCard.tsx
-import classNames112 from "classnames";
-import { jsx as jsx301, jsxs as jsxs184 } from "react/jsx-runtime";
+import classNames117 from "classnames";
+import { jsx as jsx307, jsxs as jsxs185 } from "react/jsx-runtime";
 var WorkflowSummaryCard = ({
   title,
   steps,
   palette,
   surfaces
-}) => /* @__PURE__ */ jsxs184("div", { className: "px-5 py-4", children: [
-  /* @__PURE__ */ jsx301(SectionTitle, { surfaces, children: title }),
-  /* @__PURE__ */ jsx301("ul", { className: "mt-3 space-y-3", children: steps.map((step) => /* @__PURE__ */ jsxs184("li", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx301(
+}) => /* @__PURE__ */ jsxs185("div", { className: "px-5 py-4", children: [
+  /* @__PURE__ */ jsx307(SectionTitle, { surfaces, children: title }),
+  /* @__PURE__ */ jsx307("ul", { className: "mt-3 space-y-3", children: steps.map((step) => /* @__PURE__ */ jsxs185("li", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx307(
       WorkflowStatusNode_default,
       {
         status: normalizeStatus(step.status),
@@ -60707,12 +61262,12 @@ var WorkflowSummaryCard = ({
         className: "mt-0.5"
       }
     ),
-    /* @__PURE__ */ jsxs184("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx301("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: step.label }),
-      step.meta && /* @__PURE__ */ jsx301(
+    /* @__PURE__ */ jsxs185("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx307("p", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-100", children: step.label }),
+      step.meta && /* @__PURE__ */ jsx307(
         "p",
         {
-          className: classNames112(
+          className: classNames117(
             "mt-0.5 text-xs leading-5",
             surfaces.mutedText
           ),
@@ -60724,166 +61279,57 @@ var WorkflowSummaryCard = ({
 ] });
 var WorkflowSummaryCard_default = WorkflowSummaryCard;
 
-// 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"
-    },
+// src/components/WorkflowTracker/WorkflowTrackerRollups.tsx
+import { jsx as jsx308, jsxs as jsxs186 } from "react/jsx-runtime";
+var WorkflowTrackerRollups = ({
+  data = sampleWorkflow,
+  loading = false,
+  labels: labelOverrides,
+  className,
+  style,
+  ...styleProps
+}) => {
+  const steps = data?.steps ?? [];
+  const { palette, surfaces } = useWorkflowChrome(styleProps);
+  const labels = useMemo55(() => resolveLabels(labelOverrides), [labelOverrides]);
+  const cardProps = buildCardProps(styleProps);
+  const attentionSteps = useMemo55(() => getAttentionSteps(steps), [steps]);
+  const skippedSteps = useMemo55(() => getSkippedSteps(steps), [steps]);
+  if (loading || attentionSteps.length === 0 && skippedSteps.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs186(
+    "div",
     {
-      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"
-        }
+      className: classNames118("grid grid-cols-1 gap-5 @xl:grid-cols-2", className),
+      style,
+      children: [
+        attentionSteps.length > 0 && /* @__PURE__ */ jsx308(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx308(
+          WorkflowSummaryCard_default,
+          {
+            title: labels.needsAttention,
+            steps: attentionSteps,
+            palette,
+            surfaces
+          }
+        ) }),
+        skippedSteps.length > 0 && /* @__PURE__ */ jsx308(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx308(
+          WorkflowSummaryCard_default,
+          {
+            title: labels.skippedSteps,
+            steps: skippedSteps,
+            palette,
+            surfaces
+          }
+        ) })
       ]
-    },
-    {
-      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"
-    },
-    {
-      id: "system_provisioning",
-      label: "System provisioning",
-      status: "not_started"
-    },
-    { id: "go_live", label: "Go-live", status: "not_started" }
-  ]
+    }
+  );
 };
+var WorkflowTrackerRollups_default = WorkflowTrackerRollups;
 
 // src/components/WorkflowTracker/WorkflowTracker.tsx
-import { jsx as jsx302, jsxs as jsxs185 } from "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"
-  }
-};
+import { jsx as jsx309, jsxs as jsxs187 } from "react/jsx-runtime";
 var WorkflowTracker = ({
   data = sampleWorkflow,
   accentColor = "blue",
@@ -60902,6 +61348,8 @@ var WorkflowTracker = ({
   maxWidth = 1180,
   railWidth = 360,
   stickyRail = false,
+  fillHeight = false,
+  fillHeightOffset = 0,
   loading = false,
   loadingRows = 6,
   emptyState,
@@ -60910,81 +61358,54 @@ var WorkflowTracker = ({
   labels: labelOverrides,
   onStepSelect,
   onSubStepSelect,
+  onStepAction,
   className,
   style,
   ...rest
 }) => {
-  const steps = data?.steps ?? [];
-  const translucent = translucentSurfaces ?? isTranslucentVariant(variant);
-  const surfaces = useMemo51(
-    () => getSurfaceTokens(translucent),
-    [translucent]
-  );
-  const palette = useMemo51(
-    () => ({
-      accent: accentColor,
-      attention: attentionColor,
-      blocked: blockedColor,
-      muted: mutedColor,
-      translucent
-    }),
-    [accentColor, attentionColor, blockedColor, mutedColor, translucent]
-  );
-  const labels = useMemo51(
-    () => ({
-      ...DEFAULT_LABELS,
-      ...labelOverrides,
-      statuses: {
-        ...DEFAULT_LABELS.statuses,
-        ...labelOverrides?.statuses
-      }
-    }),
-    [labelOverrides]
-  );
-  const progress = useMemo51(() => computeProgress(steps), [steps]);
-  const tallies = useMemo51(() => computeTallies(steps), [steps]);
-  const active = useMemo51(
-    () => resolveActiveStep(steps, data?.activeStepId),
-    [steps, data?.activeStepId]
-  );
-  const attentionSteps = useMemo51(() => getAttentionSteps(steps), [steps]);
-  const skippedSteps = useMemo51(() => getSkippedSteps(steps), [steps]);
-  const cardProps = {
+  const styleProps = {
+    accentColor,
+    attentionColor,
+    blockedColor,
+    mutedColor,
     variant,
-    tone: cardTone,
+    cardTone,
     corner,
     glassOpacity,
     vibrancy,
     specularMode,
     padding,
-    scrollable: false
+    translucentSurfaces
   };
+  const { surfaces } = useWorkflowChrome(styleProps);
+  const labels = useMemo56(() => resolveLabels(labelOverrides), [labelOverrides]);
   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__ */ jsxs185(
+  return /* @__PURE__ */ jsxs187(
     "div",
     {
-      className: classNames113("@container w-full", className),
+      className: classNames119("@container w-full", className),
       style: { maxWidth, ...railStyle, ...style },
       "aria-busy": loading || void 0,
       ...rest,
       children: [
-        showHeader && loading && /* @__PURE__ */ jsx302(
+        showHeader && loading && /* @__PURE__ */ jsx309(
           WorkflowHeaderSkeleton,
           {
             hasIcon: Boolean(data?.icon),
             iconCorner
           }
         ),
-        showHeader && !loading && /* @__PURE__ */ jsxs185("header", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs185("div", { className: "flex min-w-0 items-center gap-3", children: [
+        showHeader && !loading && /* @__PURE__ */ jsxs187("header", { className: "mb-5 flex flex-wrap items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs187("div", { className: "flex min-w-0 items-center gap-3", children: [
             data?.icon && // `overflow-hidden` plus the shared corner class clips whatever
             // the caller passes, so an <img> needs no rounding of its own.
-            /* @__PURE__ */ jsx302(
+            /* @__PURE__ */ jsx309(
               "span",
               {
-                className: classNames113(
+                className: classNames119(
                   "flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden [&>img]:h-full [&>img]:w-full [&>img]:object-cover",
                   getSurfaceCornerClass(iconCorner),
                   surfaces.chip
@@ -60992,33 +61413,33 @@ var WorkflowTracker = ({
                 children: data.icon
               }
             ),
-            /* @__PURE__ */ jsxs185("div", { className: "min-w-0", children: [
-              data?.eyebrow && /* @__PURE__ */ jsx302(
+            /* @__PURE__ */ jsxs187("div", { className: "min-w-0", children: [
+              data?.eyebrow && /* @__PURE__ */ jsx309(
                 "p",
                 {
-                  className: classNames113(
+                  className: classNames119(
                     "text-[11px] font-semibold uppercase tracking-widest",
                     surfaces.faintText
                   ),
                   children: data.eyebrow
                 }
               ),
-              /* @__PURE__ */ jsx302("h2", { className: "mt-1 text-2xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-3xl", children: data?.title })
+              /* @__PURE__ */ jsx309("h2", { className: "mt-1 text-2xl font-semibold tracking-tight text-neutral-900 dark:text-white sm:text-3xl", children: data?.title })
             ] })
           ] }),
-          data?.live && /* @__PURE__ */ jsxs185(
+          data?.live && /* @__PURE__ */ jsxs187(
             Pill_default,
             {
               size: "md",
               tone: mutedColor,
               variant: "outline",
-              className: classNames113("tracking-wide", surfaces.chip),
+              className: classNames119("tracking-wide", surfaces.chip),
               children: [
-                /* @__PURE__ */ jsx302(
+                /* @__PURE__ */ jsx309(
                   "span",
                   {
                     "aria-hidden": "true",
-                    className: classNames113(
+                    className: classNames119(
                       "mr-2 inline-block h-1.5 w-1.5 rounded-full",
                       `bg-${accentColor}-500 dark:bg-${accentColor}-400`
                     )
@@ -61029,67 +61450,77 @@ var WorkflowTracker = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs185("div", { className: "grid grid-cols-1 items-start gap-5 @4xl:grid-cols-[var(--wt-rail-width)_minmax(0,1fr)]", children: [
-          /* @__PURE__ */ jsx302(
-            Panel_default,
-            {
-              ...cardProps,
-              className: classNames113(stickyRail && "@4xl:sticky @4xl:top-6"),
-              children: /* @__PURE__ */ jsx302(
-                WorkflowTimeline_default,
+        /* @__PURE__ */ jsxs187(
+          "div",
+          {
+            className: classNames119(
+              "grid grid-cols-1 items-start gap-5 @4xl:grid-cols-[var(--wt-rail-width)_minmax(0,1fr)]",
+              fillHeight && "@4xl:h-[calc(100dvh-var(--wt-fill-offset))]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx309(
+                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: classNames119(
+                    stickyRail && !fillHeight && "@4xl:sticky @4xl:top-6",
+                    fillHeight && "@4xl:min-h-0 @4xl:self-stretch"
+                  ),
                   onStepSelect,
-                  onSubStepSelect
+                  onSubStepSelect,
+                  onStepAction
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs185("div", { className: "@container flex min-w-0 flex-col gap-5", children: [
-            /* @__PURE__ */ jsx302(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx302(
-              WorkflowDetailPanel_default,
-              {
-                active,
-                totalSteps: steps.length,
-                palette,
-                surfaces,
-                labels,
-                loading,
-                onSubStepSelect
-              }
-            ) }),
-            !loading && (attentionSteps.length > 0 || skippedSteps.length > 0) && /* @__PURE__ */ jsxs185("div", { className: "grid grid-cols-1 gap-5 @xl:grid-cols-2", children: [
-              attentionSteps.length > 0 && /* @__PURE__ */ jsx302(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx302(
-                WorkflowSummaryCard_default,
-                {
-                  title: labels.needsAttention,
-                  steps: attentionSteps,
-                  palette,
-                  surfaces
-                }
-              ) }),
-              skippedSteps.length > 0 && /* @__PURE__ */ jsx302(Panel_default, { ...cardProps, children: /* @__PURE__ */ jsx302(
-                WorkflowSummaryCard_default,
+              ),
+              /* @__PURE__ */ jsxs187(
+                "div",
                 {
-                  title: labels.skippedSteps,
-                  steps: skippedSteps,
-                  palette,
-                  surfaces
+                  className: classNames119(
+                    "@container flex min-w-0 flex-col gap-5",
+                    fillHeight && "@4xl:min-h-0 @4xl:self-stretch"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx309(
+                      WorkflowTrackerStepDetails_default,
+                      {
+                        ...styleProps,
+                        data,
+                        loading,
+                        labels: labelOverrides,
+                        onSubStepSelect,
+                        onStepAction
+                      }
+                    ),
+                    /* @__PURE__ */ jsx309(
+                      WorkflowTrackerDetails_default,
+                      {
+                        ...styleProps,
+                        data,
+                        loading,
+                        labels: labelOverrides
+                      }
+                    ),
+                    /* @__PURE__ */ jsx309(
+                      WorkflowTrackerRollups_default,
+                      {
+                        ...styleProps,
+                        data,
+                        loading,
+                        labels: labelOverrides
+                      }
+                    )
+                  ]
                 }
-              ) })
-            ] })
-          ] })
-        ] })
+              )
+            ]
+          }
+        )
       ]
     }
   );
@@ -61097,9 +61528,9 @@ var WorkflowTracker = ({
 var WorkflowTracker_default = WorkflowTracker;
 
 // src/components/Gantt/Gantt.tsx
-import { useCallback as useCallback42, useEffect as useEffect71, useMemo as useMemo55, useRef as useRef68, useState as useState79 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect71, useMemo as useMemo60, useRef as useRef68, useState as useState79 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
-import classNames117 from "classnames";
+import classNames123 from "classnames";
 
 // ../common/gantt/types.ts
 var GANTT_ZOOM_PRESETS = [
@@ -62445,38 +62876,38 @@ var sampleGantt = {
 };
 
 // src/components/Gantt/GanttScale.tsx
-import classNames114 from "classnames";
-import { jsx as jsx303, jsxs as jsxs186 } from "react/jsx-runtime";
+import classNames120 from "classnames";
+import { jsx as jsx310, jsxs as jsxs188 } from "react/jsx-runtime";
 var GanttScale = ({ levels, height }) => {
   if (levels.length === 0) {
-    return /* @__PURE__ */ jsx303("div", { style: { height } });
+    return /* @__PURE__ */ jsx310("div", { style: { height } });
   }
   const coarseHeight = levels.length > 1 ? 24 : height;
-  return /* @__PURE__ */ jsx303("div", { className: "flex h-full w-full flex-col", children: levels.map((level, li) => /* @__PURE__ */ jsx303(
+  return /* @__PURE__ */ jsx310("div", { className: "flex h-full w-full flex-col", children: levels.map((level, li) => /* @__PURE__ */ jsx310(
     "div",
     {
-      className: classNames114("flex w-full", li === 0 ? "shrink-0" : "min-h-0 flex-1"),
+      className: classNames120("flex w-full", li === 0 ? "shrink-0" : "min-h-0 flex-1"),
       style: li === 0 ? { height: coarseHeight } : void 0,
-      children: level.columns.map((col) => /* @__PURE__ */ jsxs186(
+      children: level.columns.map((col) => /* @__PURE__ */ jsxs188(
         "div",
         {
-          className: classNames114(
+          className: classNames120(
             "flex shrink-0 flex-col items-center justify-center overflow-hidden border-r border-neutral-200/70 dark:border-neutral-800/70",
             li === 0 ? "bg-neutral-50/60 dark:bg-neutral-800/40" : "bg-white dark:bg-neutral-900"
           ),
           style: { width: col.width },
           children: [
-            /* @__PURE__ */ jsx303(
+            /* @__PURE__ */ jsx310(
               "span",
               {
-                className: classNames114(
+                className: classNames120(
                   "max-w-full truncate px-1 text-[10px] font-semibold uppercase leading-none tracking-wide",
                   li === 0 ? "text-neutral-700 dark:text-neutral-200" : "text-neutral-500 dark:text-neutral-400"
                 ),
                 children: col.label
               }
             ),
-            col.subLabel != null && /* @__PURE__ */ jsx303("span", { className: "max-w-full truncate px-1 text-[9px] font-medium leading-none text-neutral-400 dark:text-neutral-500", children: col.subLabel })
+            col.subLabel != null && /* @__PURE__ */ jsx310("span", { className: "max-w-full truncate px-1 text-[9px] font-medium leading-none text-neutral-400 dark:text-neutral-500", children: col.subLabel })
           ]
         },
         col.id
@@ -62489,7 +62920,7 @@ GanttScale.displayName = "GanttScale";
 
 // src/components/Gantt/GanttLinkLayer.tsx
 import { forwardRef as forwardRef160, useRef as useRef66 } from "react";
-import { jsx as jsx304, jsxs as jsxs187 } from "react/jsx-runtime";
+import { jsx as jsx311, jsxs as jsxs189 } from "react/jsx-runtime";
 var GanttLinkLayer = forwardRef160(
   function GanttLinkLayer2({
     width,
@@ -62525,24 +62956,24 @@ var GanttLinkLayer = forwardRef160(
       const pick = pickFromEvent(e) ?? clicked;
       if (interactive && onDeleteLink) onDeleteLink(pick.link);
     };
-    return /* @__PURE__ */ jsxs187(
+    return /* @__PURE__ */ jsxs189(
       "div",
       {
         ref,
         className: "pointer-events-none absolute top-0 z-10",
         style: { left: offsetLeft, width, height },
         children: [
-          /* @__PURE__ */ jsxs187("svg", { ref: svgRef, width, height, className: "block overflow-visible", children: [
+          /* @__PURE__ */ jsxs189("svg", { ref: svgRef, width, height, className: "block overflow-visible", children: [
             paths.map((p, i) => {
               const tokens = getGanttLinkTokens(p.color ?? color);
               const sel = selected != null && p.link === selected;
               const nodeR = sel ? 4.5 : 3.5;
-              return /* @__PURE__ */ jsxs187(
+              return /* @__PURE__ */ jsxs189(
                 "g",
                 {
                   style: sel ? { filter: `drop-shadow(0 0 3px var(--color-${p.color ?? color}-500))` } : void 0,
                   children: [
-                    /* @__PURE__ */ jsx304(
+                    /* @__PURE__ */ jsx311(
                       "path",
                       {
                         d: p.d,
@@ -62558,10 +62989,10 @@ var GanttLinkLayer = forwardRef160(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ jsx304("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ jsx311("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    /* @__PURE__ */ jsx304(
+                    /* @__PURE__ */ jsx311(
                       "path",
                       {
                         d: p.d,
@@ -62577,14 +63008,14 @@ var GanttLinkLayer = forwardRef160(
                         },
                         onClick: (e) => handlePick(e, p),
                         onDoubleClick: (e) => handleDelete(e, p),
-                        children: /* @__PURE__ */ jsx304("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
+                        children: /* @__PURE__ */ jsx311("title", { children: `${p.link.source} \u2192 ${p.link.target} (${p.type.toUpperCase()})` })
                       }
                     ),
-                    p.arrow && /* @__PURE__ */ jsx304("polygon", { points: p.arrow, className: tokens.fill }),
-                    /* @__PURE__ */ jsx304("circle", { cx: p.from.x, cy: p.from.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ jsx304("circle", { cx: p.from.x, cy: p.from.y, r: nodeR, className: tokens.fill }),
-                    /* @__PURE__ */ jsx304("circle", { cx: p.to.x, cy: p.to.y, r: nodeR + 2.5, className: tokens.halo }),
-                    /* @__PURE__ */ jsx304("circle", { cx: p.to.x, cy: p.to.y, r: nodeR, className: tokens.fill })
+                    p.arrow && /* @__PURE__ */ jsx311("polygon", { points: p.arrow, className: tokens.fill }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.from.x, cy: p.from.y, r: nodeR + 2.5, className: tokens.halo }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.from.x, cy: p.from.y, r: nodeR, className: tokens.fill }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.to.x, cy: p.to.y, r: nodeR + 2.5, className: tokens.halo }),
+                    /* @__PURE__ */ jsx311("circle", { cx: p.to.x, cy: p.to.y, r: nodeR, className: tokens.fill })
                   ]
                 },
                 `${p.link.source}->${p.link.target}-${p.type}-${i}`
@@ -62592,8 +63023,8 @@ var GanttLinkLayer = forwardRef160(
             }),
             rubber && (() => {
               const tokens = getGanttLinkTokens(rubber.color);
-              return /* @__PURE__ */ jsxs187("g", { children: [
-                /* @__PURE__ */ jsx304(
+              return /* @__PURE__ */ jsxs189("g", { children: [
+                /* @__PURE__ */ jsx311(
                   "path",
                   {
                     d: rubber.d,
@@ -62604,15 +63035,15 @@ var GanttLinkLayer = forwardRef160(
                     strokeDasharray: "5 3"
                   }
                 ),
-                rubber.arrow && /* @__PURE__ */ jsx304("polygon", { points: rubber.arrow, className: tokens.fill }),
-                /* @__PURE__ */ jsx304("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ jsx304("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 3.5, className: tokens.fill }),
-                /* @__PURE__ */ jsx304("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 6, className: tokens.halo }),
-                /* @__PURE__ */ jsx304("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 3.5, className: tokens.fill })
+                rubber.arrow && /* @__PURE__ */ jsx311("polygon", { points: rubber.arrow, className: tokens.fill }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 6, className: tokens.halo }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.from.x, cy: rubber.from.y, r: 3.5, className: tokens.fill }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 6, className: tokens.halo }),
+                /* @__PURE__ */ jsx311("circle", { cx: rubber.to.x, cy: rubber.to.y, r: 3.5, className: tokens.fill })
               ] });
             })()
           ] }),
-          canDelete && selMid && /* @__PURE__ */ jsxs187(
+          canDelete && selMid && /* @__PURE__ */ jsxs189(
             "button",
             {
               type: "button",
@@ -62630,7 +63061,7 @@ var GanttLinkLayer = forwardRef160(
               onClick: () => onDeleteLink(selected),
               title: t("kit.gantt.removeDependency"),
               children: [
-                /* @__PURE__ */ jsx304("span", { "aria-hidden": true, children: "\u2715" }),
+                /* @__PURE__ */ jsx311("span", { "aria-hidden": true, children: "\u2715" }),
                 " ",
                 t("kit.gantt.delete")
               ]
@@ -62644,9 +63075,9 @@ var GanttLinkLayer = forwardRef160(
 GanttLinkLayer.displayName = "GanttLinkLayer";
 
 // src/components/Gantt/GanttBodyRow.tsx
-import { useMemo as useMemo52 } from "react";
-import classNames115 from "classnames";
-import { Fragment as Fragment48, jsx as jsx305, jsxs as jsxs188 } from "react/jsx-runtime";
+import { useMemo as useMemo57 } from "react";
+import classNames121 from "classnames";
+import { Fragment as Fragment48, jsx as jsx312, jsxs as jsxs190 } from "react/jsx-runtime";
 var BAR_HEIGHT = 24;
 var MILESTONE_SIZE = 14;
 var GanttBodyRow = ({
@@ -62685,11 +63116,11 @@ var GanttBodyRow = ({
   const t = useKitT();
   const isDraggingThis = row.task != null && drag?.taskId === row.task.id;
   const reorderDragging = isDraggingThis && drag?.kind === "reorder";
-  return /* @__PURE__ */ jsx305(
+  return /* @__PURE__ */ jsx312(
     "div",
     {
       "data-row-key": row.key,
-      className: classNames115(
+      className: classNames121(
         // No overflow here: an overflow-hidden row root would become the
         // sticky halves' (non-scrolling) scrollport and stop them pinning to
         // the left edge while the timeline scrolls. The halves pin the
@@ -62706,7 +63137,7 @@ var GanttBodyRow = ({
           boxShadow: `inset 2px 0 0 var(--color-${color}-500)`
         } : {}
       },
-      children: row.task == null ? /* @__PURE__ */ jsx305(
+      children: row.task == null ? /* @__PURE__ */ jsx312(
         LaneHeader,
         {
           row,
@@ -62717,20 +63148,20 @@ var GanttBodyRow = ({
           dividerClass,
           liveProgress: liveLane
         }
-      ) : /* @__PURE__ */ jsxs188(Fragment48, { children: [
-        /* @__PURE__ */ jsxs188(
+      ) : /* @__PURE__ */ jsxs190(Fragment48, { children: [
+        /* @__PURE__ */ jsxs190(
           "div",
           {
-            className: classNames115(
+            className: classNames121(
               "sticky left-0 z-20 flex items-stretch overflow-hidden border-r border-b bg-white dark:bg-neutral-900",
               dividerClass
             ),
             style: { width: leftWidth },
             children: [
-              /* @__PURE__ */ jsx305("div", { className: "flex w-9 shrink-0 items-center justify-center", children: interactive && !row.task.locked && /* @__PURE__ */ jsx305(
+              /* @__PURE__ */ jsx312("div", { className: "flex w-9 shrink-0 items-center justify-center", children: interactive && !row.task.locked && /* @__PURE__ */ jsx312(
                 "span",
                 {
-                  className: classNames115(
+                  className: classNames121(
                     "flex cursor-grab touch-none items-center text-neutral-300 transition-opacity active:cursor-grabbing dark:text-neutral-600",
                     reorderDragging ? "opacity-100" : "opacity-0 group-hover/row:opacity-100"
                   ),
@@ -62738,10 +63169,10 @@ var GanttBodyRow = ({
                   onPointerDown: (e) => onGripPointerDown(row.key, row.task, e),
                   title: t("kit.gantt.dragReorder"),
                   "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx305(Drag, { className: "h-3.5 w-3.5" })
+                  children: /* @__PURE__ */ jsx312(Drag, { className: "h-3.5 w-3.5" })
                 }
               ) }),
-              columns.map((col, i) => /* @__PURE__ */ jsx305(
+              columns.map((col, i) => /* @__PURE__ */ jsx312(
                 Cell,
                 {
                   col,
@@ -62762,12 +63193,12 @@ var GanttBodyRow = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx312(
           "div",
           {
-            className: classNames115("relative shrink-0 border-b", dividerClass),
+            className: classNames121("relative shrink-0 border-b", dividerClass),
             style: { width: timelineWidth },
-            children: /* @__PURE__ */ jsx305(
+            children: /* @__PURE__ */ jsx312(
               TaskBar,
               {
                 task: row.task,
@@ -62808,57 +63239,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__ */ jsxs188(Fragment48, { children: [
-    /* @__PURE__ */ jsxs188(
+  return /* @__PURE__ */ jsxs190(Fragment48, { children: [
+    /* @__PURE__ */ jsxs190(
       "div",
       {
-        className: classNames115(
+        className: classNames121(
           "sticky left-0 z-20 flex items-stretch overflow-hidden border-r border-b bg-white dark:bg-neutral-900",
           dividerClass
         ),
         style: { width: leftWidth },
         children: [
-          /* @__PURE__ */ jsx305("div", { className: classNames115("pointer-events-none absolute inset-0", tokens.band) }),
-          /* @__PURE__ */ jsx305("div", { className: "relative flex w-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx305(
+          /* @__PURE__ */ jsx312("div", { className: classNames121("pointer-events-none absolute inset-0", tokens.band) }),
+          /* @__PURE__ */ jsx312("div", { className: "relative flex w-9 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx312(
             "button",
             {
               type: "button",
               className: "flex h-5 w-5 shrink-0 items-center justify-center rounded text-neutral-500 hover:bg-white/60 focus-visible:ring-2 focus-visible:ring-neutral-400 dark:text-neutral-400 dark:hover:bg-white/10",
               onClick: () => onCaretClick(lane.id, isOpen),
               "aria-label": t(isOpen ? "kit.gantt.collapse" : "kit.gantt.expand", { name: lane.label }),
-              children: /* @__PURE__ */ jsx305(ChevronRight, { className: classNames115("h-3 w-3 transition-transform", isOpen && "rotate-90") })
+              children: /* @__PURE__ */ jsx312(ChevronRight, { className: classNames121("h-3 w-3 transition-transform", isOpen && "rotate-90") })
             }
           ) }),
-          columns.map((col, i) => /* @__PURE__ */ jsx305(
+          columns.map((col, i) => /* @__PURE__ */ jsx312(
             "div",
             {
-              className: classNames115(
+              className: classNames121(
                 "relative flex shrink-0 items-center gap-2 overflow-hidden border-r px-2 last:border-r-0",
                 dividerClass
               ),
               style: { width: col.width ?? "160px" },
-              children: i === 0 ? /* @__PURE__ */ jsxs188(Fragment48, { children: [
-                /* @__PURE__ */ jsx305("span", { className: classNames115("truncate text-[13px] font-semibold", tokens.label), children: lane.label }),
-                lane.description && /* @__PURE__ */ jsx305("span", { className: "hidden truncate text-[11px] text-neutral-500 dark:text-neutral-400 lg:inline", children: lane.description }),
-                row.childCount > 0 && /* @__PURE__ */ jsx305("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__ */ jsx305(ProgressCell, { value: liveProgress ?? row.progress ?? 0, barClass: tokens.chip }) : null
+              children: i === 0 ? /* @__PURE__ */ jsxs190(Fragment48, { children: [
+                /* @__PURE__ */ jsx312("span", { className: classNames121("truncate text-[13px] font-semibold", tokens.label), children: lane.label }),
+                lane.description && /* @__PURE__ */ jsx312("span", { className: "hidden truncate text-[11px] text-neutral-500 dark:text-neutral-400 lg:inline", children: lane.description }),
+                row.childCount > 0 && /* @__PURE__ */ jsx312("span", { className: "shrink-0 rounded-full bg-white/70 px-1.5 py-0.5 text-[10px] font-semibold text-neutral-600 dark:bg-white/10 dark:text-neutral-300", children: row.childCount })
+              ] }) : col.key === "progress" ? /* @__PURE__ */ jsx312(ProgressCell, { value: liveProgress ?? row.progress ?? 0, barClass: tokens.chip }) : null
             },
             col.key
           ))
         ]
       }
     ),
-    /* @__PURE__ */ jsx305("div", { className: classNames115("relative min-w-0 flex-1 border-b", dividerClass), children: /* @__PURE__ */ jsx305("div", { className: classNames115("absolute inset-0", tokens.band) }) })
+    /* @__PURE__ */ jsx312("div", { className: classNames121("relative min-w-0 flex-1 border-b", dividerClass), children: /* @__PURE__ */ jsx312("div", { className: classNames121("absolute inset-0", tokens.band) }) })
   ] });
 };
 var Cell = ({ col, task, depth, isGroup, childCount, first, onCaretClick, renderCell, liveProgress, liveRollup, rowProgress, dividerClass = "border-neutral-100 dark:border-neutral-800" }) => {
   const t = useKitT();
   const value = col.key === "name" ? task.name : col.key === "owner" ? task.owner : col.key === "progress" ? isGroup ? liveRollup ?? rowProgress ?? 0 : liveProgress ?? task.progress ?? 0 : task.values?.[col.key] ?? null;
   const custom = col.key !== "name" && renderCell ? renderCell(value, task, col) : null;
-  return /* @__PURE__ */ jsx305(
+  return /* @__PURE__ */ jsx312(
     "div",
     {
-      className: classNames115(
+      className: classNames121(
         "flex shrink-0 items-center gap-1.5 overflow-hidden border-r px-2 text-[12.5px] last:border-r-0",
         dividerClass
       ),
@@ -62866,50 +63297,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__ */ jsxs188(Fragment48, { children: [
-        /* @__PURE__ */ jsx305("span", { className: "shrink-0", style: { width: depth * 14 + 18 }, children: isGroup && /* @__PURE__ */ jsx305(
+      children: first ? /* @__PURE__ */ jsxs190(Fragment48, { children: [
+        /* @__PURE__ */ jsx312("span", { className: "shrink-0", style: { width: depth * 14 + 18 }, children: isGroup && /* @__PURE__ */ jsx312(
           "button",
           {
             type: "button",
             className: "flex h-4 w-4 items-center justify-center rounded text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600 focus-visible:ring-2 focus-visible:ring-neutral-400 dark:hover:bg-white/10 dark:hover:text-neutral-300",
             onClick: () => onCaretClick(task.id, task.open !== false),
             "aria-label": t(task.open === false ? "kit.gantt.expand" : "kit.gantt.collapse", { name: task.name }),
-            children: /* @__PURE__ */ jsx305(ChevronRight, { className: classNames115("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
+            children: /* @__PURE__ */ jsx312(ChevronRight, { className: classNames121("h-3 w-3 transition-transform", task.open !== false && "rotate-90") })
           }
         ) }),
-        isGroup && childCount > 0 ? /* @__PURE__ */ jsxs188("span", { className: "flex min-w-0 items-center gap-1 font-semibold text-neutral-800 dark:text-neutral-100", children: [
-          /* @__PURE__ */ jsx305("span", { className: "truncate", children: task.name }),
-          /* @__PURE__ */ jsx305("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__ */ jsx305("span", { className: "truncate font-medium text-neutral-700 dark:text-neutral-300", children: task.name })
-      ] }) : col.kind === "owner" ? value != null ? /* @__PURE__ */ jsxs188("span", { className: "flex min-w-0 items-center gap-1.5 text-neutral-600 dark:text-neutral-400", children: [
-        /* @__PURE__ */ jsx305(
+        isGroup && childCount > 0 ? /* @__PURE__ */ jsxs190("span", { className: "flex min-w-0 items-center gap-1 font-semibold text-neutral-800 dark:text-neutral-100", children: [
+          /* @__PURE__ */ jsx312("span", { className: "truncate", children: task.name }),
+          /* @__PURE__ */ jsx312("span", { className: "shrink-0 rounded-full bg-neutral-100 px-1 text-[10px] font-semibold text-neutral-500 dark:bg-white/10 dark:text-neutral-400", children: childCount })
+        ] }) : /* @__PURE__ */ jsx312("span", { className: "truncate font-medium text-neutral-700 dark:text-neutral-300", children: task.name })
+      ] }) : col.kind === "owner" ? value != null ? /* @__PURE__ */ jsxs190("span", { className: "flex min-w-0 items-center gap-1.5 text-neutral-600 dark:text-neutral-400", children: [
+        /* @__PURE__ */ jsx312(
           "span",
           {
-            className: classNames115(
+            className: classNames121(
               "flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[8px] font-bold uppercase text-white",
               getGanttBarTokens(task.color ?? "blue").fill
             ),
             children: String(value).slice(0, 1)
           }
         ),
-        /* @__PURE__ */ jsx305("span", { className: "truncate", children: String(value) })
-      ] }) : /* @__PURE__ */ jsx305("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : col.kind === "progress" ? /* @__PURE__ */ jsx305(ProgressCell, { value: typeof value === "number" ? value : 0 }) : col.kind === "badge" ? task.badge != null ? /* @__PURE__ */ jsx305(
+        /* @__PURE__ */ jsx312("span", { className: "truncate", children: String(value) })
+      ] }) : /* @__PURE__ */ jsx312("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : col.kind === "progress" ? /* @__PURE__ */ jsx312(ProgressCell, { value: typeof value === "number" ? value : 0 }) : col.kind === "badge" ? task.badge != null ? /* @__PURE__ */ jsx312(
         "span",
         {
-          className: classNames115(
+          className: classNames121(
             "rounded-full px-1.5 py-0.5 text-[10px] font-semibold",
             getGanttBarTokens(task.badgeColor ?? "neutral").fill,
             "text-white"
           ),
           children: task.badge
         }
-      ) : /* @__PURE__ */ jsx305("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : custom != null ? custom : /* @__PURE__ */ jsx305("span", { className: "truncate text-neutral-600 dark:text-neutral-400", children: value == null || value === "" ? "\u2014" : String(value) })
+      ) : /* @__PURE__ */ jsx312("span", { className: "text-neutral-400 dark:text-neutral-600", children: "\u2014" }) : custom != null ? custom : /* @__PURE__ */ jsx312("span", { className: "truncate text-neutral-600 dark:text-neutral-400", children: value == null || value === "" ? "\u2014" : String(value) })
     }
   );
 };
-var ProgressCell = ({ value, barClass = "bg-emerald-500" }) => /* @__PURE__ */ jsxs188("span", { className: "flex w-full items-center gap-1.5", children: [
-  /* @__PURE__ */ jsx305("span", { className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-neutral-200/80 dark:bg-white/10", children: /* @__PURE__ */ jsx305("span", { className: classNames115("block h-full rounded-full", barClass), style: { width: `${Math.round(value * 100)}%` } }) }),
-  /* @__PURE__ */ jsxs188("span", { className: "w-7 shrink-0 text-right text-[10px] font-semibold tabular-nums text-neutral-500 dark:text-neutral-400", children: [
+var ProgressCell = ({ value, barClass = "bg-emerald-500" }) => /* @__PURE__ */ jsxs190("span", { className: "flex w-full items-center gap-1.5", children: [
+  /* @__PURE__ */ jsx312("span", { className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-neutral-200/80 dark:bg-white/10", children: /* @__PURE__ */ jsx312("span", { className: classNames121("block h-full rounded-full", barClass), style: { width: `${Math.round(value * 100)}%` } }) }),
+  /* @__PURE__ */ jsxs190("span", { className: "w-7 shrink-0 text-right text-[10px] font-semibold tabular-nums text-neutral-500 dark:text-neutral-400", children: [
     Math.round(value * 100),
     "%"
   ] })
@@ -62941,7 +63372,7 @@ var TaskBar = ({
   const t = useKitT();
   const milestone = task.type === "milestone";
   const barColor = task.color ?? color;
-  const tokens = useMemo52(() => getGanttBarTokens(barColor), [barColor]);
+  const tokens = useMemo57(() => getGanttBarTokens(barColor), [barColor]);
   const startMs = liveDates ? liveDates.start : toMs(task.start);
   const endMs = liveDates ? liveDates.end : toMs(task.end);
   const left = dateToX(startMs, rangeStart, zoom);
@@ -62966,7 +63397,7 @@ var TaskBar = ({
     pct: progressPct
   });
   if (milestone) {
-    return /* @__PURE__ */ jsxs188(
+    return /* @__PURE__ */ jsxs190(
       "div",
       {
         role: "button",
@@ -62974,7 +63405,7 @@ var TaskBar = ({
         "aria-label": ariaLabel,
         title: ariaLabel,
         "data-gantt-bar": task.id,
-        className: classNames115(
+        className: classNames121(
           "absolute z-10 flex cursor-pointer items-center gap-1.5 outline-none",
           selected && selectionTokens.ring,
           "rounded"
@@ -62984,13 +63415,13 @@ var TaskBar = ({
         onClick: () => onSelect(task.id),
         onKeyDown: (e) => onBarKeyDown(e, task),
         children: [
-          /* @__PURE__ */ jsx305("span", { className: classNames115("h-3.5 w-3.5 shrink-0 rotate-45 rounded-[2px] shadow-sm", tokens.milestone) }),
-          /* @__PURE__ */ jsx305("span", { className: "truncate text-[11px] font-semibold text-neutral-700 dark:text-neutral-300", children: task.name })
+          /* @__PURE__ */ jsx312("span", { className: classNames121("h-3.5 w-3.5 shrink-0 rotate-45 rounded-[2px] shadow-sm", tokens.milestone) }),
+          /* @__PURE__ */ jsx312("span", { className: "truncate text-[11px] font-semibold text-neutral-700 dark:text-neutral-300", children: task.name })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs188(
+  return /* @__PURE__ */ jsxs190(
     "div",
     {
       role: "button",
@@ -62998,7 +63429,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: classNames115(
+      className: classNames121(
         "group/bar absolute z-10 cursor-grab touch-none rounded-md shadow-sm outline-none transition-shadow active:cursor-grabbing",
         tokens.base,
         tokens.rim,
@@ -63015,17 +63446,17 @@ var TaskBar = ({
       onClick: () => onSelect(task.id),
       onKeyDown: (e) => onBarKeyDown(e, task),
       children: [
-        progress > 0 && /* @__PURE__ */ jsx305(
+        progress > 0 && /* @__PURE__ */ jsx312(
           "div",
           {
-            className: classNames115("absolute inset-y-0 left-0 rounded-l-md", tokens.progress),
+            className: classNames121("absolute inset-y-0 left-0 rounded-l-md", tokens.progress),
             style: { width: `${progress * 100}%` }
           }
         ),
-        canEdit && !row.isGroup && progress > 0 && progress < 1 && /* @__PURE__ */ jsx305(
+        canEdit && !row.isGroup && progress > 0 && progress < 1 && /* @__PURE__ */ jsx312(
           "div",
           {
-            className: classNames115(
+            className: classNames121(
               "absolute inset-y-0 z-20 w-2 cursor-ew-resize touch-none opacity-0 transition-opacity group-hover/bar:opacity-100",
               liveProgress != null && "opacity-100"
             ),
@@ -63033,10 +63464,10 @@ var TaskBar = ({
             onPointerDown: (e) => onProgressPointerDown(task, e),
             title: labels.progress,
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx305("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
+            children: /* @__PURE__ */ jsx312("div", { className: "mx-auto h-full w-0.5 rounded-full bg-white/90" })
           }
         ),
-        liveProgress != null && /* @__PURE__ */ jsxs188(
+        liveProgress != null && /* @__PURE__ */ jsxs190(
           "div",
           {
             className: "pointer-events-none absolute -top-5 z-30 -translate-x-1/2 rounded-full bg-neutral-900/90 px-1.5 py-px text-[10px] font-semibold tabular-nums text-white shadow-md",
@@ -63047,31 +63478,31 @@ var TaskBar = ({
             ]
           }
         ),
-        showName && (renderBar != null ? /* @__PURE__ */ jsx305("div", { className: classNames115("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__ */ jsx305("span", { className: classNames115("pointer-events-none absolute inset-0 flex items-center truncate px-1.5 text-[11px] font-medium", labelText), children: task.name })),
-        canEdit && /* @__PURE__ */ jsxs188(Fragment48, { children: [
-          /* @__PURE__ */ jsx305(
+        showName && (renderBar != null ? /* @__PURE__ */ jsx312("div", { className: classNames121("pointer-events-none absolute inset-0 flex items-center px-1.5 text-[11px] font-medium", labelText), children: renderBar(task, { taskId: task.id, left, width, top, height: row.height, milestone: false }) }) : /* @__PURE__ */ jsx312("span", { className: classNames121("pointer-events-none absolute inset-0 flex items-center truncate px-1.5 text-[11px] font-medium", labelText), children: task.name })),
+        canEdit && /* @__PURE__ */ jsxs190(Fragment48, { children: [
+          /* @__PURE__ */ jsx312(
             "div",
             {
               className: "absolute inset-y-0 -left-1 z-20 w-2 cursor-ew-resize touch-none",
               onPointerDown: (e) => onResizePointerDown(task, "start", e),
               title: t("kit.gantt.resizeStart"),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx305("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
+              children: /* @__PURE__ */ jsx312("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
             }
           ),
-          /* @__PURE__ */ jsx305(
+          /* @__PURE__ */ jsx312(
             "div",
             {
               className: "absolute inset-y-0 -right-1 z-20 w-2 cursor-ew-resize touch-none",
               onPointerDown: (e) => onResizePointerDown(task, "end", e),
               title: t("kit.gantt.resizeEnd"),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx305("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
+              children: /* @__PURE__ */ jsx312("div", { className: "mx-auto h-full w-1 rounded-full bg-white/0 opacity-0 transition-opacity group-hover/bar:opacity-100" })
             }
           )
         ] }),
-        canEdit && /* @__PURE__ */ jsxs188(Fragment48, { children: [
-          /* @__PURE__ */ jsx305(
+        canEdit && /* @__PURE__ */ jsxs190(Fragment48, { children: [
+          /* @__PURE__ */ jsx312(
             "button",
             {
               type: "button",
@@ -63082,7 +63513,7 @@ var TaskBar = ({
               "aria-label": t("kit.gantt.linkFromStart", { task: task.name })
             }
           ),
-          /* @__PURE__ */ jsx305(
+          /* @__PURE__ */ jsx312(
             "button",
             {
               type: "button",
@@ -63100,9 +63531,9 @@ var TaskBar = ({
 };
 
 // src/components/Gantt/GanttToolbar.tsx
-import { useMemo as useMemo53 } from "react";
-import classNames116 from "classnames";
-import { jsx as jsx306, jsxs as jsxs189 } from "react/jsx-runtime";
+import { useMemo as useMemo58 } from "react";
+import classNames122 from "classnames";
+import { jsx as jsx313, jsxs as jsxs191 } from "react/jsx-runtime";
 function nearestPreset(zoom, presets) {
   let best = null;
   let bestDist = Infinity;
@@ -63129,25 +63560,25 @@ var GanttToolbar = ({
     Month: t("kit.gantt.zoomMonth"),
     Quarter: t("kit.gantt.zoomQuarter")
   };
-  const active = useMemo53(() => nearestPreset(zoom, presets), [zoom, presets]);
-  const chrome = useMemo53(
+  const active = useMemo58(() => nearestPreset(zoom, presets), [zoom, presets]);
+  const chrome = useMemo58(
     () => getSurfaceVariantClasses(variant, "neutral"),
     [variant]
   );
-  return /* @__PURE__ */ jsxs189(
+  return /* @__PURE__ */ jsxs191(
     "div",
     {
-      className: classNames116(
+      className: classNames122(
         "pointer-events-auto flex items-center gap-1 rounded-lg p-1",
         chrome
       ),
       children: [
-        /* @__PURE__ */ jsx306("div", { className: "flex items-center rounded-md bg-neutral-100 p-0.5 dark:bg-neutral-800", children: presets.map((p) => /* @__PURE__ */ jsx306(
+        /* @__PURE__ */ jsx313("div", { className: "flex items-center rounded-md bg-neutral-100 p-0.5 dark:bg-neutral-800", children: presets.map((p) => /* @__PURE__ */ jsx313(
           "button",
           {
             type: "button",
             onClick: () => onZoomTo(p.value),
-            className: classNames116(
+            className: classNames122(
               "rounded px-1.5 py-0.5 text-[10.5px] font-semibold transition-colors",
               active === p.value ? "bg-white text-neutral-900 shadow-sm dark:bg-neutral-600 dark:text-white" : "text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200"
             ),
@@ -63155,9 +63586,9 @@ var GanttToolbar = ({
           },
           p.label
         )) }),
-        /* @__PURE__ */ jsx306("div", { className: "mx-0.5 h-4 w-px bg-neutral-200 dark:bg-neutral-700" }),
-        /* @__PURE__ */ jsx306(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1 / 1.25), "aria-label": t("kit.gantt.zoomOut"), children: /* @__PURE__ */ jsx306("span", { className: "text-xs font-semibold leading-none", children: "\u2212" }) }),
-        /* @__PURE__ */ jsx306(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1.25), "aria-label": t("kit.gantt.zoomIn"), children: /* @__PURE__ */ jsx306("span", { className: "text-xs font-semibold leading-none", children: "+" }) })
+        /* @__PURE__ */ jsx313("div", { className: "mx-0.5 h-4 w-px bg-neutral-200 dark:bg-neutral-700" }),
+        /* @__PURE__ */ jsx313(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1 / 1.25), "aria-label": t("kit.gantt.zoomOut"), children: /* @__PURE__ */ jsx313("span", { className: "text-xs font-semibold leading-none", children: "\u2212" }) }),
+        /* @__PURE__ */ jsx313(Button_default, { variant: "ghost", size: "xs", onClick: () => onZoomBy(1.25), "aria-label": t("kit.gantt.zoomIn"), children: /* @__PURE__ */ jsx313("span", { className: "text-xs font-semibold leading-none", children: "+" }) })
       ]
     }
   );
@@ -63165,7 +63596,7 @@ var GanttToolbar = ({
 GanttToolbar.displayName = "GanttToolbar";
 
 // src/components/Gantt/useGanttDrag.ts
-import { useCallback as useCallback41, useEffect as useEffect70, useMemo as useMemo54, useRef as useRef67, useState as useState78 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect70, useMemo as useMemo59, useRef as useRef67, useState as useState78 } from "react";
 function useGanttDrag(opts) {
   const [drag, setDrag] = useState78(null);
   const [linkSelected, setLinkSelected] = useState78(null);
@@ -63483,7 +63914,7 @@ function useGanttDrag(opts) {
     },
     [beginDrag, timelineX, rowY]
   );
-  const rubber = useMemo54(() => {
+  const rubber = useMemo59(() => {
     if (!drag || drag.kind !== "link") return null;
     const source = barGeom(drag.taskId);
     if (!source) return null;
@@ -63515,7 +63946,7 @@ function useGanttDrag(opts) {
 }
 
 // src/components/Gantt/Gantt.tsx
-import { jsx as jsx307, jsxs as jsxs190 } from "react/jsx-runtime";
+import { jsx as jsx314, jsxs as jsxs192 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 52;
 var GRIP_WIDTH = 36;
 var DEFAULT_COLUMNS = [
@@ -63574,7 +64005,7 @@ var Gantt = ({
   const t = useKitT();
   const kitEngine = useKitEngine();
   const dateLocale = locale ?? kitEngine.locale;
-  const allLabels = useMemo55(
+  const allLabels = useMemo60(
     () => ({
       loading: t("kit.gantt.loading"),
       empty: t("kit.gantt.empty"),
@@ -63597,7 +64028,7 @@ var Gantt = ({
     title: c.key === "name" ? allLabels.task : c.key === "owner" ? t("kit.gantt.colOwner") : t("kit.gantt.colProgress")
   }));
   const interactive = editable ?? Boolean(onTasksChange || onLinksChange || onReorder);
-  const surfaceText = useMemo55(() => getSurfaceTextTokens(variant), [variant]);
+  const surfaceText = useMemo60(() => getSurfaceTextTokens(variant), [variant]);
   const [internalZoom, setInternalZoom] = useState79(initialZoom);
   const zoom = zoomProp ?? internalZoom;
   const setZoom = useCallback42(
@@ -63660,30 +64091,30 @@ var Gantt = ({
       return next;
     });
   }, []);
-  const effectiveTasks = useMemo55(() => {
+  const effectiveTasks = useMemo60(() => {
     let out = tasks;
     if (collapsed.size > 0) {
       out = out.map((t2) => collapsed.has(t2.id) ? { ...t2, open: false } : t2);
     }
     return out;
   }, [tasks, collapsed]);
-  const effectiveLanes = useMemo55(() => {
+  const effectiveLanes = useMemo60(() => {
     if (closedLanes.size === 0) return lanes;
     return (lanes ?? []).map(
       (l) => closedLanes.has(l.id) ? { ...l, open: false } : l
     );
   }, [lanes, closedLanes]);
-  const committedModel = useMemo55(
+  const committedModel = useMemo60(
     () => buildRows(effectiveTasks, effectiveLanes, rowOrder, rowHeight2),
     [effectiveTasks, effectiveLanes, rowOrder, rowHeight2]
   );
-  const range = useMemo55(() => {
+  const range = useMemo60(() => {
     const starts = tasks.map((t2) => toMs(t2.start));
     const ends = tasks.map((t2) => toMs(t2.end));
     return computeViewRange(starts, ends);
   }, [tasks]);
   const timelineWidth = rangeWidth(range.start, range.end, zoom);
-  const scaleLevels = useMemo55(
+  const scaleLevels = useMemo60(
     () => buildTimeScale(range.start, range.end, zoom, dateLocale),
     [range, zoom, dateLocale]
   );
@@ -63700,7 +64131,7 @@ var Gantt = ({
     const m = /^(\d+(?:\.\d+)?)px$/.exec(col.width ?? "");
     return m ? Number(m[1]) : 160;
   };
-  const sizedColumns = useMemo55(
+  const sizedColumns = useMemo60(
     () => resolvedColumns.map((c) => ({ ...c, width: `${effectiveColWidth(c)}px` })),
     [resolvedColumns, colWidths]
   );
@@ -63708,7 +64139,7 @@ var Gantt = ({
   effectiveWidthsRef.current = Object.fromEntries(
     sizedColumns.map((c) => [c.key, effectiveColWidth(c)])
   );
-  const leftWidth = useMemo55(
+  const leftWidth = useMemo60(
     () => GRIP_WIDTH + resolvedColumns.reduce((sum, c) => sum + effectiveColWidth(c), 0),
     [resolvedColumns, colWidths]
   );
@@ -63817,12 +64248,12 @@ var Gantt = ({
     rowOrder,
     setSelected
   });
-  const liveReorder = useMemo55(() => {
+  const liveReorder = useMemo60(() => {
     const d = dragApi.drag;
     if (d?.kind !== "reorder" || d.beforeId === void 0) return null;
     return applyRowReorder(effectiveTasks, d.taskId, d.beforeId, rowOrder);
   }, [dragApi.drag, effectiveTasks, rowOrder]);
-  const liveModel = useMemo55(
+  const liveModel = useMemo60(
     () => liveReorder ? buildRows(
       liveReorder.tasks,
       effectiveLanes,
@@ -63832,7 +64263,7 @@ var Gantt = ({
     [liveReorder, effectiveLanes, rowHeight2, committedModel]
   );
   liveRowsRef.current = liveModel.rows;
-  const bars = useMemo55(() => {
+  const bars = useMemo60(() => {
     const map = /* @__PURE__ */ new Map();
     for (const row of liveModel.rows) {
       if (!row.task) continue;
@@ -63988,22 +64419,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 = useMemo55(() => {
+  const dragSubtree = useMemo60(() => {
     if (dragApi.drag?.kind !== "reorder") return null;
     return reorderDragSubtree(
       liveModel.rows,
       `task:${dragApi.drag.taskId}`
     );
   }, [dragApi.drag, liveModel.rows]);
-  const dragSubtreeKeys = useMemo55(
+  const dragSubtreeKeys = useMemo60(
     () => new Set((dragSubtree ?? []).map((r) => r.key)),
     [dragSubtree]
   );
-  const dragSubtreeHeight = useMemo55(
+  const dragSubtreeHeight = useMemo60(
     () => (dragSubtree ?? []).reduce((sum, r) => sum + r.height, 0),
     [dragSubtree]
   );
-  const liveDragDates = useMemo55(() => {
+  const liveDragDates = useMemo60(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind !== "move" && drag.kind !== "resize-start" && drag.kind !== "resize-end") return null;
     return applyDragDates(
@@ -64014,7 +64445,7 @@ var Gantt = ({
     );
   }, [drag, dragTask, zoom, snap2]);
   const liveDragProgress = drag?.kind === "progress" && drag.liveProgress != null ? drag.liveProgress : null;
-  const dragOverride = useMemo55(() => {
+  const dragOverride = useMemo60(() => {
     if (!drag || !dragTask) return null;
     if (drag.kind === "progress" && drag.liveProgress != null) {
       return { ...dragTask, progress: drag.liveProgress };
@@ -64024,11 +64455,11 @@ var Gantt = ({
     }
     return null;
   }, [drag, dragTask, liveDragDates]);
-  const liveLaneProgress = useMemo55(
+  const liveLaneProgress = useMemo60(
     () => dragOverride && dragTask ? laneRollupProgress(effectiveTasks, dragTask.id, dragOverride) : null,
     [dragOverride, dragTask, effectiveTasks]
   );
-  const liveGroupProgress = useMemo55(() => {
+  const liveGroupProgress = useMemo60(() => {
     if (!dragOverride || !dragTask) return null;
     const byId = new Map(effectiveTasks.map((t2) => [t2.id, t2]));
     const m = /* @__PURE__ */ new Map();
@@ -64040,7 +64471,7 @@ var Gantt = ({
     }
     return m.size > 0 ? m : null;
   }, [dragOverride, dragTask, effectiveTasks]);
-  const liveLinkBars = useMemo55(() => {
+  const liveLinkBars = useMemo60(() => {
     if (!liveDragDates || !dragTask) return bars;
     const g = bars.get(dragTask.id);
     if (!g) return bars;
@@ -64049,12 +64480,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 = useMemo55(
+  const linkPaths = useMemo60(
     () => computeLinkPaths(links, liveLinkBars, color),
     [links, liveLinkBars, color]
   );
-  const linkFan = useMemo55(() => computeLinkFanOffsets(links, bars), [links, bars]);
-  return /* @__PURE__ */ jsx307(
+  const linkFan = useMemo60(() => computeLinkFanOffsets(links, bars), [links, bars]);
+  return /* @__PURE__ */ jsx314(
     Panel_default,
     {
       ref: rootRef,
@@ -64072,31 +64503,31 @@ var Gantt = ({
       "aria-label": t("kit.gantt.root"),
       onKeyDown: onRootKeyDown,
       onPointerDown: handleRootPointerDown,
-      children: /* @__PURE__ */ jsxs190("div", { className: "flex h-full min-h-0 flex-col", children: [
-        /* @__PURE__ */ jsxs190(
+      children: /* @__PURE__ */ jsxs192("div", { className: "flex h-full min-h-0 flex-col", children: [
+        /* @__PURE__ */ jsxs192(
           "div",
           {
-            className: classNames117(
+            className: classNames123(
               "flex shrink-0 items-center gap-3 border-b px-4 py-3",
               surfaceText.divider
             ),
             children: [
-              hasNode(icon) && /* @__PURE__ */ jsx307(
+              hasNode(icon) && /* @__PURE__ */ jsx314(
                 "div",
                 {
-                  className: classNames117(
+                  className: classNames123(
                     "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl",
                     getSurfaceVariantClasses(variant, "neutral")
                   ),
                   children: icon
                 }
               ),
-              (title != null || subtitle != null) && /* @__PURE__ */ jsxs190("div", { className: "min-w-0 flex-1", children: [
-                subtitle != null && /* @__PURE__ */ jsx307("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400", children: subtitle }),
-                title != null && /* @__PURE__ */ jsx307("div", { className: "truncate text-lg font-semibold text-neutral-900 dark:text-white", children: title })
+              (title != null || subtitle != null) && /* @__PURE__ */ jsxs192("div", { className: "min-w-0 flex-1", children: [
+                subtitle != null && /* @__PURE__ */ jsx314("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400", children: subtitle }),
+                title != null && /* @__PURE__ */ jsx314("div", { className: "truncate text-lg font-semibold text-neutral-900 dark:text-white", children: title })
               ] }),
-              hasNode(actions) && /* @__PURE__ */ jsx307("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
-              /* @__PURE__ */ jsx307("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx307(
+              hasNode(actions) && /* @__PURE__ */ jsx314("div", { className: "flex shrink-0 items-center gap-2", children: actions }),
+              /* @__PURE__ */ jsx314("div", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx314(
                 GanttToolbar,
                 {
                   variant,
@@ -64109,31 +64540,31 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs190(
+        /* @__PURE__ */ jsxs192(
           "div",
           {
-            className: classNames117(
+            className: classNames123(
               "relative flex shrink-0 items-stretch border-b",
               surfaceText.divider
             ),
             style: { height: HEADER_HEIGHT },
             children: [
-              /* @__PURE__ */ jsxs190(
+              /* @__PURE__ */ jsxs192(
                 "div",
                 {
-                  className: classNames117(
+                  className: classNames123(
                     "flex items-stretch border-r bg-white dark:bg-neutral-900",
                     surfaceText.divider
                   ),
                   style: { width: leftWidth },
                   children: [
-                    /* @__PURE__ */ jsx307("div", { className: "w-9 shrink-0" }),
+                    /* @__PURE__ */ jsx314("div", { className: "w-9 shrink-0" }),
                     sizedColumns.map((col) => {
                       const resizable = resizableColumns && col.resizable !== false;
-                      return /* @__PURE__ */ jsxs190(
+                      return /* @__PURE__ */ jsxs192(
                         "div",
                         {
-                          className: classNames117(
+                          className: classNames123(
                             "relative flex shrink-0 items-center border-r px-2 text-[11px] font-semibold uppercase tracking-wide text-neutral-600 last:border-r-0 dark:text-neutral-400",
                             surfaceText.divider
                           ),
@@ -64142,7 +64573,7 @@ var Gantt = ({
                             justifyContent: col.align === "center" ? "center" : col.align === "right" ? "flex-end" : "flex-start"
                           },
                           children: [
-                            /* @__PURE__ */ jsx307("span", { className: "truncate", children: col.title }),
+                            /* @__PURE__ */ jsx314("span", { className: "truncate", children: col.title }),
                             resizable && /* Resize handle — Table's header-edge pattern: an 8px hit
                                 area whose 1px line sits exactly on the column border.
                                 Absolute insets stop at the padding edge (1px inside
@@ -64151,7 +64582,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__ */ jsx307(
+                            /* @__PURE__ */ jsx314(
                               "div",
                               {
                                 role: "separator",
@@ -64160,7 +64591,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__ */ jsx307(
+                                children: /* @__PURE__ */ jsx314(
                                   "div",
                                   {
                                     className: "h-full w-px bg-neutral-300 transition-colors group-hover/rh:bg-neutral-400 dark:bg-neutral-600 dark:group-hover/rh:bg-neutral-500",
@@ -64177,30 +64608,30 @@ var Gantt = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx307("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs190(
+              /* @__PURE__ */ jsx314("div", { className: "relative min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs192(
                 "div",
                 {
                   ref: headerScaleRef,
                   className: "relative h-full",
                   style: { width: timelineWidth },
                   children: [
-                    /* @__PURE__ */ jsx307(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
-                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx307(
+                    /* @__PURE__ */ jsx314(GanttScale, { levels: scaleLevels, height: HEADER_HEIGHT }),
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx314(
                       "div",
                       {
-                        className: classNames117(
+                        className: classNames123(
                           "pointer-events-none absolute inset-y-0 z-[1] border-l-2",
                           todayTokens.line
                         ),
                         style: { left: todayX }
                       }
                     ),
-                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx307(
+                    todayVisible && !loading && !isEmpty2 && /* @__PURE__ */ jsx314(
                       "div",
                       {
                         className: "pointer-events-none absolute top-1 z-10 -translate-x-1/2",
                         style: { left: todayX },
-                        children: /* @__PURE__ */ jsx307("span", { className: classNames117("rounded-full px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm", todayTokens.chip), children: allLabels.today })
+                        children: /* @__PURE__ */ jsx314("span", { className: classNames123("rounded-full px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm", todayTokens.chip), children: allLabels.today })
                       }
                     )
                   ]
@@ -64209,20 +64640,20 @@ var Gantt = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx307(
+        /* @__PURE__ */ jsx314(
           "div",
           {
             ref: scrollRef,
             className: `gantt-scroller min-h-0 flex-1 overflow-auto overscroll-contain [&::-webkit-scrollbar]:h-1.5 ${THIN_SCROLLBAR}`,
             onScroll: syncHeaderScale,
-            children: /* @__PURE__ */ jsx307("div", { style: { width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER, minWidth: "100%" }, children: loading ? /* @__PURE__ */ jsx307(GanttSkeleton, { rows: 12, rowHeight: rowHeight2, leftWidth }) : isEmpty2 ? /* @__PURE__ */ jsx307("div", { className: "flex items-center justify-center text-sm text-neutral-500", style: { height: bodyHeight || 160, width: leftWidth + timelineWidth }, children: emptyState ?? allLabels.empty }) : /* @__PURE__ */ jsxs190("div", { className: "relative", style: { height: bodyHeight }, children: [
-              /* @__PURE__ */ jsxs190(
+            children: /* @__PURE__ */ jsx314("div", { style: { width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER, minWidth: "100%" }, children: loading ? /* @__PURE__ */ jsx314(GanttSkeleton, { rows: 12, rowHeight: rowHeight2, leftWidth }) : isEmpty2 ? /* @__PURE__ */ jsx314("div", { className: "flex items-center justify-center text-sm text-neutral-500", style: { height: bodyHeight || 160, width: leftWidth + timelineWidth }, children: emptyState ?? allLabels.empty }) : /* @__PURE__ */ jsxs192("div", { className: "relative", style: { height: bodyHeight }, children: [
+              /* @__PURE__ */ jsxs192(
                 "div",
                 {
                   className: "pointer-events-none absolute inset-y-0 z-0",
                   style: { left: leftWidth, width: timelineWidth },
                   children: [
-                    scaleLevels.length > 0 && scaleLevels[scaleLevels.length - 1].columns.map((c) => /* @__PURE__ */ jsx307(
+                    scaleLevels.length > 0 && scaleLevels[scaleLevels.length - 1].columns.map((c) => /* @__PURE__ */ jsx314(
                       "div",
                       {
                         className: "absolute inset-y-0 border-r border-neutral-100 dark:border-neutral-800",
@@ -64230,10 +64661,10 @@ var Gantt = ({
                       },
                       c.id
                     )),
-                    todayVisible && /* @__PURE__ */ jsx307(
+                    todayVisible && /* @__PURE__ */ jsx314(
                       "div",
                       {
-                        className: classNames117("absolute inset-y-0 border-l-2", todayTokens.line),
+                        className: classNames123("absolute inset-y-0 border-l-2", todayTokens.line),
                         style: { left: todayX }
                       }
                     )
@@ -64243,7 +64674,7 @@ var Gantt = ({
               liveModel.rows.map((row) => {
                 const isDragSource = drag?.kind === "reorder" && row.task != null && row.task.id === drag.taskId;
                 if (isDragSource) {
-                  return /* @__PURE__ */ jsx307(
+                  return /* @__PURE__ */ jsx314(
                     "div",
                     {
                       "data-row-key": row.key,
@@ -64251,7 +64682,7 @@ var Gantt = ({
                       "aria-hidden": "true",
                       className: "pointer-events-none flex border-b",
                       style: { height: dragSubtreeHeight || row.height },
-                      children: /* @__PURE__ */ jsx307(
+                      children: /* @__PURE__ */ jsx314(
                         "div",
                         {
                           className: "m-1 flex-1 rounded-md border-2 border-dashed",
@@ -64268,7 +64699,7 @@ var Gantt = ({
                 if (drag?.kind === "reorder" && dragSubtreeKeys.has(row.key)) {
                   return null;
                 }
-                return /* @__PURE__ */ jsx307(
+                return /* @__PURE__ */ jsx314(
                   GanttBodyRow,
                   {
                     row,
@@ -64306,7 +64737,7 @@ var Gantt = ({
                   row.key
                 );
               }),
-              /* @__PURE__ */ jsx307(
+              /* @__PURE__ */ jsx314(
                 GanttLinkLayer,
                 {
                   ref: overlayRef,
@@ -64322,7 +64753,7 @@ var Gantt = ({
                   onDeleteLink: interactive && onLinksChange ? deleteSelectedLink : void 0
                 }
               ),
-              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ jsx307(
+              drag?.kind === "reorder" && reorderLineY != null && /* @__PURE__ */ jsx314(
                 "div",
                 {
                   className: "pointer-events-none absolute z-30 h-0.5 rounded-full",
@@ -64342,7 +64773,7 @@ var Gantt = ({
               // there is no filtered/overflowing ancestor and the fixed
               // clone always tracks the viewport pointer.
               createPortal15(
-                /* @__PURE__ */ jsx307(
+                /* @__PURE__ */ jsx314(
                   "div",
                   {
                     "data-gantt-drag-clone": "true",
@@ -64353,14 +64784,14 @@ var Gantt = ({
                       top: drag.clientY - (drag.grabOffset?.y ?? 0),
                       width: leftWidth + timelineWidth + LINK_RIGHT_GUTTER
                     },
-                    children: /* @__PURE__ */ jsx307(
+                    children: /* @__PURE__ */ jsx314(
                       "div",
                       {
                         className: "overflow-hidden rounded-lg bg-white/95 shadow-2xl backdrop-blur-sm dark:bg-neutral-900/95",
                         style: {
                           boxShadow: `0 8px 32px rgba(0, 0, 0, 0.28), inset 2px 0 0 var(--color-${color}-500)`
                         },
-                        children: dragSubtree.map((row) => /* @__PURE__ */ jsx307(
+                        children: dragSubtree.map((row) => /* @__PURE__ */ jsx314(
                           GanttBodyRow,
                           {
                             row,
@@ -64403,7 +64834,7 @@ var Gantt = ({
                 ),
                 document.body
               ),
-              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ jsx307(
+              drag && drag.kind !== "reorder" && dragTask && liveDragDates && /* @__PURE__ */ jsx314(
                 "div",
                 {
                   className: "pointer-events-none absolute z-50 rounded-md bg-neutral-900/90 px-2 py-1 text-[11px] font-medium text-white shadow-lg dark:bg-neutral-700/95",
@@ -64434,13 +64865,13 @@ var GanttSkeleton = ({
   rows,
   rowHeight: rowHeight2,
   leftWidth
-}) => /* @__PURE__ */ jsx307("div", { className: "animate-pulse", "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs190("div", { className: "flex", style: { height: rowHeight2 }, children: [
-  /* @__PURE__ */ jsx307(
+}) => /* @__PURE__ */ jsx314("div", { className: "animate-pulse", "aria-busy": "true", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs192("div", { className: "flex", style: { height: rowHeight2 }, children: [
+  /* @__PURE__ */ jsx314(
     "div",
     {
       className: "sticky left-0 flex items-center border-b border-neutral-100 bg-white px-3 dark:border-neutral-800 dark:bg-neutral-900",
       style: { width: leftWidth },
-      children: /* @__PURE__ */ jsx307(
+      children: /* @__PURE__ */ jsx314(
         "div",
         {
           className: "h-3 rounded-full bg-neutral-200 dark:bg-neutral-700",
@@ -64449,7 +64880,7 @@ var GanttSkeleton = ({
       )
     }
   ),
-  /* @__PURE__ */ jsx307("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx307(
+  /* @__PURE__ */ jsx314("div", { className: "relative flex-1", children: /* @__PURE__ */ jsx314(
     "div",
     {
       className: "absolute top-1/2 h-4 -translate-y-1/2 rounded-md bg-neutral-200/80 dark:bg-neutral-700/60",
@@ -64467,13 +64898,13 @@ import {
   useCallback as useCallback43,
   useContext as useContext8,
   useEffect as useEffect72,
-  useMemo as useMemo56,
+  useMemo as useMemo61,
   useRef as useRef69,
   useState as useState80
 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
-import classNames118 from "classnames";
-import { jsx as jsx308, jsxs as jsxs191 } from "react/jsx-runtime";
+import classNames124 from "classnames";
+import { jsx as jsx315, jsxs as jsxs193 } from "react/jsx-runtime";
 var BottomSheetContext = createContext8(null);
 var TRANSITION_MS2 = 260;
 var renderSlot = (slot, controls) => {
@@ -64527,13 +64958,13 @@ var BottomSheetProvider = ({
     },
     []
   );
-  const controls = useMemo56(
+  const controls = useMemo61(
     () => ({
       dismiss: dismissSheet
     }),
     [dismissSheet]
   );
-  const contextValue = useMemo56(
+  const contextValue = useMemo61(
     () => ({
       presentSheet,
       dismissSheet,
@@ -64543,11 +64974,11 @@ var BottomSheetProvider = ({
     [presentSheet, dismissSheet, sheet, isVisible]
   );
   const overlayNode = typeof document !== "undefined" && sheet ? createPortal16(
-    /* @__PURE__ */ jsxs191("div", { className: "pointer-events-none fixed inset-0 z-[70] flex items-end justify-center", children: [
-      /* @__PURE__ */ jsx308(
+    /* @__PURE__ */ jsxs193("div", { className: "pointer-events-none fixed inset-0 z-[70] flex items-end justify-center", children: [
+      /* @__PURE__ */ jsx315(
         "div",
         {
-          className: classNames118(
+          className: classNames124(
             "absolute inset-0 bg-neutral-900/40 transition-opacity duration-300",
             isVisible ? "opacity-100 pointer-events-auto" : "opacity-0"
           ),
@@ -64557,24 +64988,24 @@ var BottomSheetProvider = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx308("div", { className: "relative w-full max-w-4xl px-4 pb-4 sm:px-8", children: /* @__PURE__ */ jsxs191(
+      /* @__PURE__ */ jsx315("div", { className: "relative w-full max-w-4xl px-4 pb-4 sm:px-8", children: /* @__PURE__ */ jsxs193(
         "section",
         {
           role: "dialog",
           "aria-modal": "true",
-          className: classNames118(
+          className: classNames124(
             "pointer-events-auto ml-auto flex w-full flex-col rounded-t-3xl border border-slate-200 bg-white shadow-2xl transition-transform duration-300 dark:border-slate-700 dark:bg-slate-900",
             sheet.className,
             isVisible ? "translate-y-0" : "translate-y-full"
           ),
           style: { minHeight: "25vh", maxHeight: "85vh" },
           children: [
-            /* @__PURE__ */ jsxs191("header", { className: "flex items-start justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
-              /* @__PURE__ */ jsxs191("div", { className: "space-y-1", children: [
-                sheet.title && /* @__PURE__ */ jsx308("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: sheet.title }),
-                sheet.description && /* @__PURE__ */ jsx308("p", { className: "text-sm text-slate-500 dark:text-slate-300", children: sheet.description })
+            /* @__PURE__ */ jsxs193("header", { className: "flex items-start justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-800", children: [
+              /* @__PURE__ */ jsxs193("div", { className: "space-y-1", children: [
+                sheet.title && /* @__PURE__ */ jsx315("div", { className: "text-base font-semibold text-slate-900 dark:text-slate-100", children: sheet.title }),
+                sheet.description && /* @__PURE__ */ jsx315("p", { className: "text-sm text-slate-500 dark:text-slate-300", children: sheet.description })
               ] }),
-              (sheet.showCloseButton ?? true) && /* @__PURE__ */ jsx308(
+              (sheet.showCloseButton ?? true) && /* @__PURE__ */ jsx315(
                 IconButton_default,
                 {
                   icon: "Close",
@@ -64586,15 +65017,15 @@ var BottomSheetProvider = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx308("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: renderSlot(sheet.content, controls) ?? /* @__PURE__ */ jsx308("p", { className: "text-sm text-slate-500", children: "No content provided." }) }),
-            sheet.actions && /* @__PURE__ */ jsx308("div", { className: "flex flex-wrap items-center justify-end gap-3 border-t border-slate-200 px-6 py-4 dark:border-slate-800", children: renderSlot(sheet.actions, controls) })
+            /* @__PURE__ */ jsx315("div", { className: "flex-1 overflow-y-auto px-6 py-4", children: renderSlot(sheet.content, controls) ?? /* @__PURE__ */ jsx315("p", { className: "text-sm text-slate-500", children: "No content provided." }) }),
+            sheet.actions && /* @__PURE__ */ jsx315("div", { className: "flex flex-wrap items-center justify-end gap-3 border-t border-slate-200 px-6 py-4 dark:border-slate-800", children: renderSlot(sheet.actions, controls) })
           ]
         }
       ) })
     ] }),
     document.body
   ) : null;
-  return /* @__PURE__ */ jsxs191(BottomSheetContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs193(BottomSheetContext.Provider, { value: contextValue, children: [
     children,
     overlayNode
   ] });
@@ -65234,8 +65665,8 @@ var SYSTEM_VARIABLES = [
 ];
 
 // src/components/MetricBar.tsx
-import classNames119 from "classnames";
-import { jsx as jsx309 } from "react/jsx-runtime";
+import classNames125 from "classnames";
+import { jsx as jsx316 } from "react/jsx-runtime";
 var MetricBar = ({
   label,
   value,
@@ -65245,7 +65676,7 @@ var MetricBar = ({
   size = "sm",
   className,
   ...rest
-}) => /* @__PURE__ */ jsx309(
+}) => /* @__PURE__ */ jsx316(
   Progress_default,
   {
     ...rest,
@@ -65255,7 +65686,7 @@ var MetricBar = ({
     formatValue: value !== void 0 ? () => String(value) : void 0,
     size,
     color: tone ?? color ?? "blue",
-    className: classNames119("w-full", className)
+    className: classNames125("w-full", className)
   }
 );
 MetricBar.displayName = "MetricBar";
@@ -65334,6 +65765,7 @@ export {
   DEFAULT_LAYOUT_OPTIONS,
   DEFAULT_SERIES_PALETTE,
   DEFAULT_SURFACE_CORNER,
+  DEFAULT_SURFACE_GUTTER,
   DEFAULT_SURFACE_PADDING,
   DEFAULT_SURFACE_TONE,
   DEFAULT_TOAST_GAP_PX,
@@ -65484,6 +65916,7 @@ export {
   STAT_PAGER_PLACEMENTS,
   SURFACE_CORNERS,
   SURFACE_GLASS_RIM,
+  SURFACE_GUTTER_AXES,
   SURFACE_PADDINGS,
   SURFACE_TO_BUTTON_VARIANT,
   SURFACE_VARIANTS,
@@ -65576,6 +66009,10 @@ export {
   WorkflowRailSkeleton,
   WorkflowStatusNode_default as WorkflowStatusNode,
   WorkflowTracker_default as WorkflowTracker,
+  WorkflowTrackerDetails_default as WorkflowTrackerDetails,
+  WorkflowTrackerRail_default as WorkflowTrackerRail,
+  WorkflowTrackerRollups_default as WorkflowTrackerRollups,
+  WorkflowTrackerStepDetails_default as WorkflowTrackerStepDetails,
   areaPathFromPoints,
   bandAreaPath,
   buildColumns,
@@ -65713,6 +66150,7 @@ export {
   getStepperTonePalette,
   getSurfaceCornerClass,
   getSurfaceCornerRem,
+  getSurfaceGutterClass,
   getSurfacePaddingClass,
   getSurfacePaddingClasses,
   getSurfaceTextTokens,