@adoptai/genui-components 0.1.32 → 0.1.45

package/dist/resolver.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React33 = require('react');
+var React41 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var dagre = require('@dagrejs/dagre');
 var reactDom = require('react-dom');
@@ -37,7 +37,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React33__default = /*#__PURE__*/_interopDefault(React33);
+var React41__default = /*#__PURE__*/_interopDefault(React41);
 var dagre__default = /*#__PURE__*/_interopDefault(dagre);
 var XLSX__namespace = /*#__PURE__*/_interopNamespace(XLSX);
 var Papa__default = /*#__PURE__*/_interopDefault(Papa);
@@ -111,7 +111,7 @@ var init_theme = __esm({
   }
 });
 function useTheme() {
-  return React33.useContext(GenUIThemeContext);
+  return React41.useContext(GenUIThemeContext);
 }
 var DEFAULT_TOKENS, GenUIThemeContext;
 var init_ThemeContext = __esm({
@@ -127,7 +127,7 @@ var init_ThemeContext = __esm({
       SECONDARY,
       CHART_PALETTE: [...CHART_PALETTE]
     };
-    GenUIThemeContext = React33.createContext(DEFAULT_TOKENS);
+    GenUIThemeContext = React41.createContext(DEFAULT_TOKENS);
   }
 });
 function renderInline(text) {
@@ -228,6 +228,24 @@ function renderInline(text) {
   }
   return parts;
 }
+function parseTableRow(line) {
+  let s = line.trim();
+  if (s.startsWith("|")) s = s.slice(1);
+  if (s.endsWith("|") && !s.endsWith("\\|")) s = s.slice(0, -1);
+  return s.split(new RegExp("(?<!\\\\)\\|")).map((c) => c.trim().replace(/\\\|/g, "|"));
+}
+function isTableSeparator(line) {
+  if (!line.includes("-")) return false;
+  const cells = parseTableRow(line);
+  return cells.length > 0 && cells.every((c) => /^:?-{1,}:?$/.test(c));
+}
+function alignFromSeparator(cell) {
+  const left = cell.startsWith(":");
+  const right = cell.endsWith(":");
+  if (left && right) return "center";
+  if (right) return "right";
+  return "left";
+}
 function MarkdownBlock({ content }) {
   var _a;
   const lines = content.split("\n");
@@ -358,6 +376,74 @@ function MarkdownBlock({ content }) {
       );
       continue;
     }
+    if (trimmed.includes("|") && i + 1 < lines.length && isTableSeparator(lines[i + 1])) {
+      const headers = parseTableRow(trimmed);
+      const aligns = parseTableRow(lines[i + 1]).map(alignFromSeparator);
+      i += 2;
+      const rows = [];
+      while (i < lines.length) {
+        const li = lines[i].trim();
+        if (!li || !li.includes("|")) break;
+        rows.push(parseTableRow(li));
+        i++;
+      }
+      const colAlign = (idx) => {
+        var _a2;
+        return (_a2 = aligns[idx]) != null ? _a2 : "left";
+      };
+      elements.push(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { margin: "6px 0 10px 0", overflowX: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "table",
+          {
+            style: {
+              borderCollapse: "collapse",
+              width: "100%",
+              fontSize: "12px",
+              lineHeight: 1.4
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.map((h, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                "th",
+                {
+                  style: {
+                    textAlign: colAlign(idx),
+                    padding: "6px 10px",
+                    borderBottom: `1px solid ${BORDER}`,
+                    background: PAPER,
+                    fontWeight: 600,
+                    color: MUTED,
+                    fontSize: "10px",
+                    textTransform: "uppercase",
+                    letterSpacing: "0.04em",
+                    whiteSpace: "nowrap"
+                  },
+                  children: renderInline(h)
+                },
+                idx
+              )) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((cells, rIdx) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.map((_, cIdx) => {
+                var _a2;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    style: {
+                      textAlign: colAlign(cIdx),
+                      padding: "6px 10px",
+                      borderBottom: `1px solid ${BORDER}`,
+                      color: "var(--foreground)",
+                      verticalAlign: "top"
+                    },
+                    children: renderInline((_a2 = cells[cIdx]) != null ? _a2 : "")
+                  },
+                  cIdx
+                );
+              }) }, rIdx)) })
+            ]
+          }
+        ) }, key++)
+      );
+      continue;
+    }
     elements.push(
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "0 0 8px 0", lineHeight: 1.65 }, children: renderInline(trimmed) }, key++)
     );
@@ -771,11 +857,11 @@ async function getMermaid(t) {
 }
 function MermaidFallback({ diagram, title }) {
   const tokens = useTheme();
-  const [svg, setSvg] = React33.useState("");
-  const [err, setErr] = React33.useState(false);
-  const [full, setFull] = React33.useState(false);
-  const idRef = React33.useRef(0);
-  React33.useEffect(() => {
+  const [svg, setSvg] = React41.useState("");
+  const [err, setErr] = React41.useState(false);
+  const [full, setFull] = React41.useState(false);
+  const idRef = React41.useRef(0);
+  React41.useEffect(() => {
     const id = ++renderSeq;
     idRef.current = id;
     setErr(false);
@@ -844,7 +930,7 @@ function FullscreenModalInner({ nodes, edges, title, onClose }) {
   ] }) });
 }
 function FullscreenModal({ nodes, edges, title, onClose }) {
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -857,8 +943,8 @@ function FullscreenModal({ nodes, edges, title, onClose }) {
   );
 }
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React33.useState(false);
-  React33.useEffect(() => {
+  const [reduced, setReduced] = React41.useState(false);
+  React41.useEffect(() => {
     var _a;
     if (typeof matchMedia === "undefined") return;
     const mq = matchMedia("(prefers-reduced-motion: reduce)");
@@ -902,9 +988,9 @@ function topoOrder(nodeIds, edges) {
 }
 function useAutoplay(order, enabled) {
   const reduced = usePrefersReducedMotion();
-  const [step, setStep] = React33.useState(0);
+  const [step, setStep] = React41.useState(0);
   const key = order.join("|");
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     if (!enabled || reduced || order.length === 0) {
       setStep(0);
       return;
@@ -926,7 +1012,7 @@ function useAutoplay(order, enabled) {
     timer = setTimeout(tick, 850);
     return () => clearTimeout(timer);
   }, [enabled, reduced, key]);
-  return React33.useMemo(() => {
+  return React41.useMemo(() => {
     const m = {};
     order.forEach((id, i) => {
       m[id] = i < step ? "done" : i === step ? "active" : "pending";
@@ -948,13 +1034,13 @@ function resolveStates(nodes, nodeStates) {
 }
 function Inner({ diagram, title, autoplay, nodeStates }) {
   const tokens = useTheme();
-  const [full, setFull] = React33.useState(false);
-  const [focused, setFocused] = React33.useState(false);
-  const [boxW, setBoxW] = React33.useState(640);
-  const containerRef = React33.useRef(null);
-  const parsed = React33.useMemo(() => parseMermaidFlow(diagram), [diagram]);
-  const layout = React33.useMemo(() => parsed ? computeLayout(parsed) : null, [parsed]);
-  const themedEdges = React33.useMemo(
+  const [full, setFull] = React41.useState(false);
+  const [focused, setFocused] = React41.useState(false);
+  const [boxW, setBoxW] = React41.useState(640);
+  const containerRef = React41.useRef(null);
+  const parsed = React41.useMemo(() => parseMermaidFlow(diagram), [diagram]);
+  const layout = React41.useMemo(() => parsed ? computeLayout(parsed) : null, [parsed]);
+  const themedEdges = React41.useMemo(
     () => {
       var _a;
       return ((_a = layout == null ? void 0 : layout.edges) != null ? _a : []).map((e) => __spreadProps(__spreadValues({}, e), {
@@ -966,7 +1052,7 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
     },
     [layout, tokens.ACCENT, tokens.MUTED]
   );
-  const order = React33.useMemo(
+  const order = React41.useMemo(
     () => {
       var _a, _b;
       return topoOrder(((_a = layout == null ? void 0 : layout.nodes) != null ? _a : []).map((n) => n.id), (_b = layout == null ? void 0 : layout.edges) != null ? _b : []);
@@ -974,19 +1060,19 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
     [layout]
   );
   const autoStatus = useAutoplay(order, !!autoplay);
-  const staticStatus = React33.useMemo(() => {
+  const staticStatus = React41.useMemo(() => {
     var _a;
     return resolveStates((_a = layout == null ? void 0 : layout.nodes) != null ? _a : [], nodeStates);
   }, [layout, nodeStates]);
   const statusMap = autoplay ? autoStatus : staticStatus;
-  const displayNodes = React33.useMemo(
+  const displayNodes = React41.useMemo(
     () => {
       var _a;
       return ((_a = layout == null ? void 0 : layout.nodes) != null ? _a : []).map((n) => __spreadProps(__spreadValues({}, n), { data: __spreadProps(__spreadValues({}, n.data), { status: statusMap[n.id] }) }));
     },
     [layout, statusMap]
   );
-  const displayEdges = React33.useMemo(
+  const displayEdges = React41.useMemo(
     () => themedEdges.map((e) => {
       const ss = statusMap[e.source];
       const ts = statusMap[e.target];
@@ -1006,13 +1092,13 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
   const [nodes, setNodes, onNC] = react.useNodesState(displayNodes);
   const [edges, setEdges, onEC] = react.useEdgesState(displayEdges);
   const rf = react.useReactFlow();
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     setNodes(displayNodes);
   }, [displayNodes, setNodes]);
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     setEdges(displayEdges);
   }, [displayEdges, setEdges]);
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     const id = requestAnimationFrame(() => {
       try {
         rf.fitView({ padding: 0.1 });
@@ -1021,14 +1107,14 @@ function Inner({ diagram, title, autoplay, nodeStates }) {
     });
     return () => cancelAnimationFrame(id);
   }, [layout, rf]);
-  const handleClickOutside = React33.useCallback((e) => {
+  const handleClickOutside = React41.useCallback((e) => {
     if (containerRef.current && !containerRef.current.contains(e.target)) setFocused(false);
   }, []);
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [handleClickOutside]);
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     let raf = 0;
@@ -1187,15 +1273,15 @@ __export(PdfViewer_exports, {
   PdfViewer: () => PdfViewer
 });
 function PdfViewer({ url, base64, onLoadSuccess }) {
-  const [numPages, setNumPages] = React33.useState(0);
-  const [currentPage, setCurrentPage] = React33.useState(1);
-  const [loading, setLoading] = React33.useState(true);
-  const handleLoad = React33.useCallback(({ numPages: n }) => {
+  const [numPages, setNumPages] = React41.useState(0);
+  const [currentPage, setCurrentPage] = React41.useState(1);
+  const [loading, setLoading] = React41.useState(true);
+  const handleLoad = React41.useCallback(({ numPages: n }) => {
     setNumPages(n);
     setLoading(false);
     onLoadSuccess == null ? void 0 : onLoadSuccess(n);
   }, [onLoadSuccess]);
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     if (numPages <= 1) return;
     const handler = (e) => {
       var _a;
@@ -1291,13 +1377,13 @@ __export(ExcelViewer_exports, {
   ExcelViewer: () => ExcelViewer
 });
 function ExcelViewer({ url, base64, onLoadSuccess }) {
-  const [sheetNames, setSheetNames] = React33.useState([]);
-  const [activeSheet, setActiveSheet] = React33.useState(0);
-  const [data, setData] = React33.useState([]);
-  const [loading, setLoading] = React33.useState(true);
-  const [error, setError] = React33.useState(null);
-  const wbRef = React33.useRef(null);
-  React33.useEffect(() => {
+  const [sheetNames, setSheetNames] = React41.useState([]);
+  const [activeSheet, setActiveSheet] = React41.useState(0);
+  const [data, setData] = React41.useState([]);
+  const [loading, setLoading] = React41.useState(true);
+  const [error, setError] = React41.useState(null);
+  const wbRef = React41.useRef(null);
+  React41.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -1355,7 +1441,7 @@ function ExcelViewer({ url, base64, onLoadSuccess }) {
     const rows = XLSX__namespace.utils.sheet_to_json(wbRef.current.Sheets[wbRef.current.SheetNames[idx]], { header: 1 });
     setData(rows);
   };
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     if (sheetNames.length <= 1) return;
     const handler = (e) => {
       var _a;
@@ -1480,10 +1566,10 @@ __export(CsvViewer_exports, {
 });
 function CsvViewer({ url, base64, delimiter, maxRows }) {
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
-  const [rows, setRows] = React33.useState([]);
-  const [loading, setLoading] = React33.useState(true);
-  const [error, setError] = React33.useState(null);
-  React33.useEffect(() => {
+  const [rows, setRows] = React41.useState([]);
+  const [loading, setLoading] = React41.useState(true);
+  const [error, setError] = React41.useState(null);
+  React41.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -1602,10 +1688,10 @@ __export(TextViewer_exports, {
 });
 function TextViewer({ url, base64, markdown = false, maxLines }) {
   const { MUTED: MUTED2 } = useTheme();
-  const [text, setText] = React33.useState("");
-  const [loading, setLoading] = React33.useState(true);
-  const [error, setError] = React33.useState(null);
-  React33.useEffect(() => {
+  const [text, setText] = React41.useState("");
+  const [loading, setLoading] = React41.useState(true);
+  const [error, setError] = React41.useState(null);
+  React41.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -1703,10 +1789,10 @@ function sanitize(html) {
 }
 function DocxViewer({ url, base64 }) {
   const { MUTED: MUTED2, BORDER: BORDER4 } = useTheme();
-  const [html, setHtml] = React33.useState("");
-  const [loading, setLoading] = React33.useState(true);
-  const [error, setError] = React33.useState(null);
-  React33.useEffect(() => {
+  const [html, setHtml] = React41.useState("");
+  const [loading, setLoading] = React41.useState(true);
+  const [error, setError] = React41.useState(null);
+  React41.useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
@@ -5146,6 +5232,79 @@ var pipelinePreviewTool = {
     required: ["type", "name", "steps"]
   }
 };
+var workflowStepperSchema = zod.z.object({
+  type: zod.z.literal("workflow-stepper"),
+  id: zod.z.string().optional(),
+  title: zod.z.string(),
+  period: zod.z.string().optional(),
+  badge: zod.z.string().optional(),
+  active_step: zod.z.string().optional(),
+  steps: zod.z.array(
+    zod.z.object({
+      id: zod.z.string(),
+      n: zod.z.number().int().positive().optional(),
+      title: zod.z.string(),
+      sub: zod.z.string().optional(),
+      status: zod.z.enum(["done", "active", "review", "pending", "failed"]),
+      assignees: zod.z.array(
+        zod.z.object({
+          name: zod.z.string(),
+          kind: zod.z.enum(["agent", "human"]),
+          initials: zod.z.string().max(3).optional(),
+          color: zod.z.string().optional(),
+          role: zod.z.string().optional()
+        })
+      ).max(6).optional()
+    })
+  ).min(2).max(12)
+});
+var workflowStepperTool = {
+  name: "render_workflow_stepper",
+  description: "Render a recurring-process workflow stepper \u2014 a horizontal strip of sequential step cards (e.g. a monthly close pipeline) with per-step status (done/active/review/pending/failed) and human + agent assignee avatars. Use for org processes with named steps and owners, NOT for generic progress bars or project phase summaries.",
+  input_schema: {
+    type: "object",
+    properties: {
+      type: { type: "string", enum: ["workflow-stepper"] },
+      id: { type: "string", description: "Stable id for update-in-place rendering" },
+      title: { type: "string", description: "Process name, e.g. 'Monthly Close'" },
+      period: { type: "string", description: "Period label, e.g. 'Period 04 \xB7 FY2026'" },
+      badge: { type: "string", description: "Framework/compliance badge, e.g. 'SOX controlled'" },
+      active_step: { type: "string", description: "Id of the currently active step" },
+      steps: {
+        type: "array",
+        minItems: 2,
+        maxItems: 12,
+        items: {
+          type: "object",
+          properties: {
+            id: { type: "string" },
+            n: { type: "number", description: "Step number; defaults to index + 1" },
+            title: { type: "string" },
+            sub: { type: "string", description: "Short status caption, e.g. '7 accounts \xB7 2 exceptions'" },
+            status: { type: "string", enum: ["done", "active", "review", "pending", "failed"] },
+            assignees: {
+              type: "array",
+              maxItems: 6,
+              items: {
+                type: "object",
+                properties: {
+                  name: { type: "string" },
+                  kind: { type: "string", enum: ["agent", "human"] },
+                  initials: { type: "string" },
+                  color: { type: "string" },
+                  role: { type: "string" }
+                },
+                required: ["name", "kind"]
+              }
+            }
+          },
+          required: ["id", "title", "status"]
+        }
+      }
+    },
+    required: ["type", "title", "steps"]
+  }
+};
 
 // src/schemas/index.ts
 var schemaRegistry = {
@@ -5204,7 +5363,8 @@ var schemaRegistry = {
   "scatter-chart": { schema: scatterChartSchema, tool: scatterChartTool },
   "connect-integration": { schema: connectIntegrationSchema, tool: connectIntegrationTool },
   "integrations-list": { schema: integrationsListSchema, tool: integrationsListTool },
-  "pipeline-preview": { schema: pipelinePreviewSchema, tool: pipelinePreviewTool }
+  "pipeline-preview": { schema: pipelinePreviewSchema, tool: pipelinePreviewTool },
+  "workflow-stepper": { schema: workflowStepperSchema, tool: workflowStepperTool }
 };
 
 // src/schemas/coercePayload.ts
@@ -5286,16 +5446,16 @@ init_theme();
 var DOT_COLOR = "#aaaaaa";
 var DOT_HOVER = "#555555";
 function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
-  const [open, setOpen] = React33.useState(false);
-  const [view, setView] = React33.useState("main");
-  const contentRef = React33.useRef(null);
-  const menuRef = React33.useRef(null);
-  const btnRef = React33.useRef(null);
-  const close = React33.useCallback(() => {
+  const [open, setOpen] = React41.useState(false);
+  const [view, setView] = React41.useState("main");
+  const contentRef = React41.useRef(null);
+  const menuRef = React41.useRef(null);
+  const btnRef = React41.useRef(null);
+  const close = React41.useCallback(() => {
     setOpen(false);
     setView("main");
   }, []);
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
       var _a, _b;
@@ -5306,7 +5466,7 @@ function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "c
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open, close]);
-  const handleDownloadPNG = React33.useCallback(async () => {
+  const handleDownloadPNG = React41.useCallback(async () => {
     if (!contentRef.current) return;
     try {
       const url = await htmlToImage.toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
@@ -5318,7 +5478,7 @@ function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "c
     }
     close();
   }, [filename, close]);
-  const handleCSV = React33.useCallback(() => {
+  const handleCSV = React41.useCallback(() => {
     onDownloadCSV == null ? void 0 : onDownloadCSV();
     close();
   }, [onDownloadCSV, close]);
@@ -5430,12 +5590,12 @@ function MenuButton({ label, onClick }) {
   );
 }
 function useColumnVisibility(columns) {
-  const [hidden, setHidden] = React33.useState(/* @__PURE__ */ new Set());
-  const visibleColumns = React33.useMemo(
+  const [hidden, setHidden] = React41.useState(/* @__PURE__ */ new Set());
+  const visibleColumns = React41.useMemo(
     () => columns.filter((c) => !hidden.has(c.key)),
     [columns, hidden]
   );
-  const toggle = React33.useCallback((key) => {
+  const toggle = React41.useCallback((key) => {
     setHidden((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -5443,8 +5603,8 @@ function useColumnVisibility(columns) {
       return next;
     });
   }, []);
-  const showAll = React33.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
-  const hideAll = React33.useCallback(
+  const showAll = React41.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
+  const hideAll = React41.useCallback(
     () => setHidden(new Set(columns.map((c) => c.key))),
     [columns]
   );
@@ -5694,6 +5854,56 @@ function AlertResolver(p) {
 
 // src/composites/stat-grid/resolver.tsx
 init_Markdown();
+function FitText({ children, max = 22, min = 13, title, className, style }) {
+  const ref = React41.useRef(null);
+  const [size, setSize] = React41.useState(max);
+  React41.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return void 0;
+    const fit = () => {
+      let s = max;
+      el.style.fontSize = `${s}px`;
+      while (s > min && el.scrollWidth > el.clientWidth + 1) {
+        s -= 1;
+        el.style.fontSize = `${s}px`;
+      }
+      setSize(s);
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [children, max, min]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      title,
+      className,
+      style: __spreadValues({
+        display: "block",
+        minWidth: 0,
+        maxWidth: "100%",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        fontSize: `${size}px`
+      }, style),
+      children
+    }
+  );
+}
+
+// src/shared/styles.ts
+var TRUNCATE = {
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+
+// src/composites/stat-grid/resolver.tsx
 init_ThemeContext();
 var changeColor = (type) => {
   if (type === "positive") return "#15803d";
@@ -5704,15 +5914,28 @@ var cardStyle = {
   border: "1px solid #dedede",
   borderRadius: "0.75rem",
   background: "white",
-  padding: "14px"
+  padding: "14px",
+  // Let the card shrink inside the grid track so big values can't push it
+  // wider than its column.
+  minWidth: 0,
+  overflow: "hidden"
 };
 function StatGridResolver(p) {
   var _a;
   const { MUTED: MUTED2 } = useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: "stat-grid", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", display: "grid", gap: "10px", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))" }, children: ((_a = p.stats) != null ? _a : []).map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", padding: "4px 0" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "11.5px", color: MUTED2, letterSpacing: "0.02em", textTransform: "uppercase", margin: 0 }, children: stat.label }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-serif)", fontSize: "22px", fontWeight: 600, color: "var(--foreground)", letterSpacing: "-0.01em", lineHeight: 1.1, fontVariantNumeric: "tabular-nums", margin: 0 }, children: stat.value }),
-    stat.change && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", fontWeight: 500, color: changeColor(stat.changeType), fontVariantNumeric: "tabular-nums", margin: 0 }, children: stat.change }),
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: "stat-grid", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", display: "grid", gap: "10px", gridTemplateColumns: "repeat(auto-fill, minmax(min(140px, 100%), 1fr))" }, children: ((_a = p.stats) != null ? _a : []).map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px", padding: "4px 0", minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: __spreadValues({ fontSize: "11.5px", color: MUTED2, letterSpacing: "0.02em", textTransform: "uppercase", margin: 0 }, TRUNCATE), children: stat.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FitText,
+      {
+        max: 22,
+        min: 13,
+        title: typeof stat.value === "string" ? stat.value : void 0,
+        style: { fontFamily: "var(--font-serif)", fontWeight: 600, color: "var(--foreground)", letterSpacing: "-0.01em", lineHeight: 1.1, fontVariantNumeric: "tabular-nums" },
+        children: stat.value
+      }
+    ),
+    stat.change && /* @__PURE__ */ jsxRuntime.jsx("p", { style: __spreadValues({ fontSize: "12px", fontWeight: 500, color: changeColor(stat.changeType), fontVariantNumeric: "tabular-nums", margin: 0 }, TRUNCATE), children: stat.change }),
     stat.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "11.5px", color: "#888888", lineHeight: 1.4, margin: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { inline: true, content: stat.description }) })
   ] }) }, i)) }) });
 }
@@ -5721,7 +5944,7 @@ init_ThemeContext();
 function TabsPanelResolver(p) {
   var _a;
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2 } = useTheme();
-  const [activeIdx, setActiveIdx] = React33.useState(0);
+  const [activeIdx, setActiveIdx] = React41.useState(0);
   const activeTab = p.tabs[activeIdx];
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: "tabs-panel", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "0" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5879,17 +6102,17 @@ function SparklineTableResolver(p) {
 // src/composites/heatmap-table/resolver.tsx
 init_theme();
 init_ThemeContext();
-function heatColor(z57) {
-  const clamped = Math.max(-3, Math.min(3, z57));
+function heatColor(z58) {
+  const clamped = Math.max(-3, Math.min(3, z58));
   const abs = Math.abs(clamped);
   const lightness = 95 - abs * 8;
   const hue = clamped >= 0 ? 142 : 0;
   return `hsl(${hue} 60% ${lightness}%)`;
 }
-function heatTextColor(z57) {
-  const abs = Math.abs(z57);
-  if (abs > 2) return z57 >= 0 ? "#14532d" : "#7f1d1d";
-  if (abs > 1) return z57 >= 0 ? "#166534" : "#991b1b";
+function heatTextColor(z58) {
+  const abs = Math.abs(z58);
+  if (abs > 2) return z58 >= 0 ? "#14532d" : "#7f1d1d";
+  if (abs > 1) return z58 >= 0 ? "#166534" : "#991b1b";
   return "var(--foreground)";
 }
 var th2 = {
@@ -5987,7 +6210,7 @@ var thStyle2 = {
 function ScreenerTableResolver(p) {
   var _a, _b, _c, _d, _e, _f;
   const { ACCENT: ACCENT2, BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
-  const [activeFilters, setActiveFilters] = React33.useState(new Set((_a = p.activeFilters) != null ? _a : []));
+  const [activeFilters, setActiveFilters] = React41.useState(new Set((_a = p.activeFilters) != null ? _a : []));
   const { visibleColumns, hidden, toggle, showAll, hideAll, allColumns } = useColumnVisibility((_b = p.columns) != null ? _b : []);
   const toggleFilter = (f) => setActiveFilters((prev) => {
     const next = new Set(prev);
@@ -6057,7 +6280,7 @@ var th3 = {
 };
 function GroupRows({ group, columns, depth }) {
   var _a, _b;
-  const [open, setOpen] = React33.useState(true);
+  const [open, setOpen] = React41.useState(true);
   const indent = depth * 14;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6162,7 +6385,7 @@ var dotColor = {
 function NewsFeedResolver(p) {
   var _a, _b;
   const { ACCENT: ACCENT2, MUTED: MUTED2 } = useTheme();
-  const [filter, setFilter] = React33.useState(null);
+  const [filter, setFilter] = React41.useState(null);
   const sentiments = ["positive", "neutral", "negative"].filter(
     (s) => {
       var _a2;
@@ -6204,9 +6427,9 @@ function NewsFeedResolver(p) {
   ] }) });
 }
 function useSeriesToggle(seriesKeys) {
-  const [hidden, setHidden] = React33.useState(/* @__PURE__ */ new Set());
-  const isVisible = React33.useCallback((key) => !hidden.has(key), [hidden]);
-  const toggle = React33.useCallback((key) => {
+  const [hidden, setHidden] = React41.useState(/* @__PURE__ */ new Set());
+  const isVisible = React41.useCallback((key) => !hidden.has(key), [hidden]);
+  const toggle = React41.useCallback((key) => {
     setHidden((prev) => {
       const next = new Set(prev);
       if (next.has(key)) next.delete(key);
@@ -6214,7 +6437,7 @@ function useSeriesToggle(seriesKeys) {
       return next;
     });
   }, []);
-  const showAll = React33.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
+  const showAll = React41.useCallback(() => setHidden(/* @__PURE__ */ new Set()), []);
   return { hidden, isVisible, toggle, showAll, allKeys: seriesKeys };
 }
 
@@ -6509,7 +6732,7 @@ function WaterfallChartResolver(p) {
   ] }) });
 }
 init_ThemeContext();
-var FlowGraph2 = React33__default.default.lazy(
+var FlowGraph2 = React41__default.default.lazy(
   () => Promise.resolve().then(() => (init_FlowGraph(), FlowGraph_exports)).then((m) => ({ default: m.FlowGraph }))
 );
 function FlowCanvasRenderer({
@@ -6550,7 +6773,7 @@ function FlowCanvasRenderer({
       overflow: "hidden",
       background: "#ffffff",
       position: "relative"
-    }, diagram ? {} : { height: "320px" }), children: diagram ? /* @__PURE__ */ jsxRuntime.jsx(React33.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(FlowGraph2, { diagram, title, autoplay, nodeStates }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+    }, diagram ? {} : { height: "320px" }), children: diagram ? /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(FlowGraph2, { diagram, title, autoplay, nodeStates }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
       position: "absolute",
       inset: 0,
       display: "flex",
@@ -6762,7 +6985,7 @@ function TrialBalanceResolver(p) {
         color: balanced ? "#15803d" : "#dc2626"
       }, children: balanced ? "\u2713 Balanced" : "\u2717 Unbalanced" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: ["Code", "Account", "Debit", "Credit"].map((h, i) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: {
         fontSize: "11px",
         fontWeight: 500,
@@ -6783,7 +7006,7 @@ function TrialBalanceResolver(p) {
             gDebit += a.debit;
             gCredit += a.credit;
           });
-          return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -6940,7 +7163,7 @@ function AgingReportResolver(p) {
         p.asOfDate
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { style: { fontSize: "11px", fontWeight: 500, color: MUTED2, padding: "8px 12px", textAlign: "left", borderBottom: `1px solid ${BORDER4}`, background: PAPER2, textTransform: "uppercase", letterSpacing: "0.02em" }, children: "Entity" }),
         buckets.map((b, i) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: { fontSize: "11px", fontWeight: 500, color: MUTED2, padding: "8px 12px", textAlign: "right", borderBottom: `1px solid ${BORDER4}`, background: PAPER2, textTransform: "uppercase", letterSpacing: "0.02em", whiteSpace: "nowrap" }, children: b }, i)),
@@ -6997,7 +7220,7 @@ function VarianceAnalysisResolver(p) {
       p.title && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-serif)", fontSize: "15px", fontWeight: 600, color: "var(--foreground)", letterSpacing: "-0.005em" }, children: p.title }),
       p.period && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: MUTED2 }, children: p.period })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "480px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "480px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: ["Line Item", "Budget", "Actual", "Variance $", "Variance %", ""].map((h, i) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: {
         fontSize: "11px",
         fontWeight: 500,
@@ -7115,6 +7338,8 @@ function StackedBreakdownResolver(p) {
                 alignItems: "center",
                 gap: "6px",
                 fontSize: "12px",
+                maxWidth: "100%",
+                minWidth: 0,
                 color: isVisible(cat.name) ? MUTED2 : "#b3b3b3",
                 cursor: "pointer",
                 userSelect: "none",
@@ -7126,12 +7351,13 @@ function StackedBreakdownResolver(p) {
                   width: "10px",
                   height: "10px",
                   borderRadius: "2px",
+                  flexShrink: 0,
                   background: (_a2 = cat.color) != null ? _a2 : PALETTE2[ci % PALETTE2.length],
                   display: "inline-block",
                   opacity: isVisible(cat.name) ? 1 : 0.3,
                   transition: "opacity 0.15s"
                 } }),
-                cat.name
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: TRUNCATE, title: cat.name, children: cat.name })
               ]
             },
             cat.name
@@ -7153,7 +7379,7 @@ function StackedBreakdownResolver(p) {
                 ((_b2 = p.periods) != null ? _b2 : []).map((_, pi) => {
                   var _a3, _b3;
                   const v = pi < ((_a3 = cat.values) != null ? _a3 : []).length ? ((_b3 = cat.values) != null ? _b3 : [])[pi] : 0;
-                  return /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "6px 12px", fontSize: "13px", textAlign: "right", fontVariantNumeric: "tabular-nums", borderBottom: `1px solid #f2f2f2`, color: v < 0 ? "#dc2626" : void 0 }, children: v < 0 ? `(${fmt5(Math.abs(v), p.currency)})` : fmt5(v, p.currency) }, pi);
+                  return /* @__PURE__ */ jsxRuntime.jsx("td", { style: { padding: "6px 12px", fontSize: "13px", textAlign: "right", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap", borderBottom: `1px solid #f2f2f2`, color: v < 0 ? "#dc2626" : void 0 }, children: v < 0 ? `(${fmt5(Math.abs(v), p.currency)})` : fmt5(v, p.currency) }, pi);
                 })
               ] }, cat.name);
             }),
@@ -7317,7 +7543,7 @@ function ItemRow({ item }) {
   ] });
 }
 function Section({ section }) {
-  const [open, setOpen] = React33.useState(true);
+  const [open, setOpen] = React41.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -7439,7 +7665,7 @@ function ReconciliationViewResolver(p) {
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2 } = useTheme();
   const sourceA = (_a = p.sourceA) != null ? _a : { label: "Source A" };
   const sourceB = (_b = p.sourceB) != null ? _b : { label: "Source B" };
-  const [activeTab, setActiveTab] = React33.useState("matched");
+  const [activeTab, setActiveTab] = React41.useState("matched");
   const balanceA = (_d = (_c = p.summary) == null ? void 0 : _c.balanceA) != null ? _d : 0;
   const balanceB = (_f = (_e = p.summary) == null ? void 0 : _e.balanceB) != null ? _f : 0;
   const difference = (_h = (_g = p.summary) == null ? void 0 : _g.difference) != null ? _h : balanceA - balanceB;
@@ -7526,7 +7752,7 @@ function ReconciliationViewResolver(p) {
           {
             style: {
               display: "grid",
-              gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))",
+              gridTemplateColumns: "repeat(auto-fit, minmax(min(120px, 100%), 1fr))",
               gap: "0",
               marginBottom: "14px",
               borderRadius: "10px",
@@ -7534,31 +7760,28 @@ function ReconciliationViewResolver(p) {
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "10px 12px", background: PAPER2 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "10px 12px", background: PAPER2, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    style: {
+                    style: __spreadValues({
                       fontSize: "10px",
                       fontWeight: 500,
                       color: MUTED2,
                       textTransform: "uppercase",
                       letterSpacing: "0.04em",
                       marginBottom: "4px"
-                    },
+                    }, TRUNCATE),
                     children: sourceA.label
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                  FitText,
                   {
-                    style: {
-                      fontSize: "15px",
-                      fontWeight: 600,
-                      color: "var(--foreground)",
-                      fontVariantNumeric: "tabular-nums",
-                      letterSpacing: "-0.01em"
-                    },
+                    max: 15,
+                    min: 11,
+                    title: fmt6(balanceA, p.currency),
+                    style: { fontWeight: 600, color: "var(--foreground)", fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em" },
                     children: fmt6(balanceA, p.currency)
                   }
                 )
@@ -7570,33 +7793,31 @@ function ReconciliationViewResolver(p) {
                     padding: "10px 12px",
                     background: PAPER2,
                     borderLeft: `1px solid ${BORDER4}`,
-                    borderRight: `1px solid ${BORDER4}`
+                    borderRight: `1px solid ${BORDER4}`,
+                    minWidth: 0
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
-                        style: {
+                        style: __spreadValues({
                           fontSize: "10px",
                           fontWeight: 500,
                           color: MUTED2,
                           textTransform: "uppercase",
                           letterSpacing: "0.04em",
                           marginBottom: "4px"
-                        },
+                        }, TRUNCATE),
                         children: sourceB.label
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
+                      FitText,
                       {
-                        style: {
-                          fontSize: "15px",
-                          fontWeight: 600,
-                          color: "var(--foreground)",
-                          fontVariantNumeric: "tabular-nums",
-                          letterSpacing: "-0.01em"
-                        },
+                        max: 15,
+                        min: 11,
+                        title: fmt6(balanceB, p.currency),
+                        style: { fontWeight: 600, color: "var(--foreground)", fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em" },
                         children: fmt6(balanceB, p.currency)
                       }
                     )
@@ -7608,7 +7829,8 @@ function ReconciliationViewResolver(p) {
                 {
                   style: {
                     padding: "10px 12px",
-                    background: difference === 0 ? "#f0fdf4" : "#fef2f2"
+                    background: difference === 0 ? "#f0fdf4" : "#fef2f2",
+                    minWidth: 0
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7648,15 +7870,12 @@ function ReconciliationViewResolver(p) {
                       }
                     ),
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
+                      FitText,
                       {
-                        style: {
-                          fontSize: "15px",
-                          fontWeight: 700,
-                          color: difference === 0 ? MATCH_GREEN : DIFF_RED,
-                          fontVariantNumeric: "tabular-nums",
-                          letterSpacing: "-0.01em"
-                        },
+                        max: 15,
+                        min: 11,
+                        title: fmt6(difference, p.currency),
+                        style: { fontWeight: 700, color: difference === 0 ? MATCH_GREEN : DIFF_RED, fontVariantNumeric: "tabular-nums", letterSpacing: "-0.01em" },
                         children: fmt6(difference, p.currency)
                       }
                     )
@@ -8089,7 +8308,7 @@ function ChangesView({ changes }) {
 }
 function EventCard({ event }) {
   var _a;
-  const [showChanges, setShowChanges] = React33.useState(false);
+  const [showChanges, setShowChanges] = React41.useState(false);
   const ac = (_a = actionConfig[event.action]) != null ? _a : actionConfig.commented;
   const hasChanges = event.changes && event.changes.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "12px", position: "relative" }, children: [
@@ -8147,23 +8366,23 @@ function AuditTrailResolver(p) {
 }
 init_Markdown();
 function useFullscreen(ref) {
-  const [isFullscreen, setIsFullscreen] = React33.useState(false);
-  React33.useEffect(() => {
+  const [isFullscreen, setIsFullscreen] = React41.useState(false);
+  React41.useEffect(() => {
     const handler = () => {
       setIsFullscreen(!!document.fullscreenElement);
     };
     document.addEventListener("fullscreenchange", handler);
     return () => document.removeEventListener("fullscreenchange", handler);
   }, []);
-  const enter = React33.useCallback(() => {
+  const enter = React41.useCallback(() => {
     var _a, _b;
     (_b = (_a = ref.current) == null ? void 0 : _a.requestFullscreen) == null ? void 0 : _b.call(_a);
   }, [ref]);
-  const exit = React33.useCallback(() => {
+  const exit = React41.useCallback(() => {
     var _a;
     if (document.fullscreenElement) (_a = document.exitFullscreen) == null ? void 0 : _a.call(document);
   }, []);
-  const toggle = React33.useCallback(() => {
+  const toggle = React41.useCallback(() => {
     if (isFullscreen) exit();
     else enter();
   }, [isFullscreen, enter, exit]);
@@ -8173,10 +8392,10 @@ function useFullscreen(ref) {
 // src/composites/document-preview/resolver.tsx
 init_theme();
 init_ThemeContext();
-var PdfViewer2 = React33__default.default.lazy(
+var PdfViewer2 = React41__default.default.lazy(
   () => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer }))
 );
-var ExcelViewer2 = React33__default.default.lazy(
+var ExcelViewer2 = React41__default.default.lazy(
   () => Promise.resolve().then(() => (init_ExcelViewer(), ExcelViewer_exports)).then((m) => ({ default: m.ExcelViewer }))
 );
 var highlightColors = {
@@ -8226,8 +8445,8 @@ function DownloadIcon() {
 function DocumentPreviewResolver(p) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2 } = useTheme();
-  const [currentPage, setCurrentPage] = React33.useState(0);
-  const containerRef = React33.useRef(null);
+  const [currentPage, setCurrentPage] = React41.useState(0);
+  const containerRef = React41.useRef(null);
   const { isFullscreen, toggle } = useFullscreen(containerRef);
   const hasRealFile = !!(((_a = p.source) == null ? void 0 : _a.url) || ((_b = p.source) == null ? void 0 : _b.base64));
   const isPdf = p.documentType === "pdf";
@@ -8235,9 +8454,9 @@ function DocumentPreviewResolver(p) {
   const totalPages = ((_c = p.pages) != null ? _c : []).length;
   const page = p.pages[currentPage];
   const pageHighlights = ((_d = p.highlights) != null ? _d : []).filter((h) => h.pageIndex === currentPage);
-  const handlePdfLoad = React33.useCallback(() => {
+  const handlePdfLoad = React41.useCallback(() => {
   }, []);
-  const handleExcelLoad = React33.useCallback(() => {
+  const handleExcelLoad = React41.useCallback(() => {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_e = p.title) != null ? _e : "document-preview", children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -8350,7 +8569,7 @@ function DocumentPreviewResolver(p) {
           display: "flex",
           flexDirection: "column"
         }, children: [
-          hasRealFile && isPdf ? /* @__PURE__ */ jsxRuntime.jsx(React33.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(PdfViewer2, { url: (_q = p.source) == null ? void 0 : _q.url, base64: (_r = p.source) == null ? void 0 : _r.base64, onLoadSuccess: handlePdfLoad }) }) : hasRealFile && isExcel ? /* @__PURE__ */ jsxRuntime.jsx(React33.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(ExcelViewer2, { url: (_s = p.source) == null ? void 0 : _s.url, base64: (_t = p.source) == null ? void 0 : _t.base64, onLoadSuccess: handleExcelLoad }) }) : (page == null ? void 0 : page.imageUrl) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: page.imageUrl, alt: page.label, style: { maxWidth: "100%", borderRadius: "4px" } }) }) : (page == null ? void 0 : page.content) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontSize: "13px", color: "var(--foreground)", lineHeight: 1.6, margin: 0, padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { content: page.content }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "120px", color: MUTED2, fontSize: "13px" }, children: [
+          hasRealFile && isPdf ? /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(PdfViewer2, { url: (_q = p.source) == null ? void 0 : _q.url, base64: (_r = p.source) == null ? void 0 : _r.base64, onLoadSuccess: handlePdfLoad }) }) : hasRealFile && isExcel ? /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(ExcelViewer2, { url: (_s = p.source) == null ? void 0 : _s.url, base64: (_t = p.source) == null ? void 0 : _t.base64, onLoadSuccess: handleExcelLoad }) }) : (page == null ? void 0 : page.imageUrl) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: page.imageUrl, alt: page.label, style: { maxWidth: "100%", borderRadius: "4px" } }) }) : (page == null ? void 0 : page.content) ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontFamily: "var(--font-sans, system-ui)", fontSize: "13px", color: "var(--foreground)", lineHeight: 1.6, margin: 0, padding: "20px" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { content: page.content }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "120px", color: MUTED2, fontSize: "13px" }, children: [
             "No content available for ",
             (_u = page == null ? void 0 : page.label) != null ? _u : "this page"
           ] }),
@@ -8413,7 +8632,7 @@ function ConfidenceBar({ confidence, height = 6 }) {
 }
 function StepCard({ step, isLast }) {
   var _a;
-  const [expanded, setExpanded] = React33.useState(false);
+  const [expanded, setExpanded] = React41.useState(false);
   const cfg = stepTypeConfig[step.stepType];
   const detail = (_a = step.detail) != null ? _a : "";
   const isLong = detail.length > 100;
@@ -8918,7 +9137,7 @@ function ExampleRow({ example }) {
   );
 }
 function PartSection({ part, defaultOpen }) {
-  const [open, setOpen] = React33.useState(defaultOpen);
+  const [open, setOpen] = React41.useState(defaultOpen);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -9048,7 +9267,7 @@ function EngagementPipelineResolver(p) {
   const defaultActive = phases.findIndex(
     (ph) => ph.status === "in-progress" || ph.status === "blocked"
   );
-  const [activeIdx, setActiveIdx] = React33.useState(defaultActive >= 0 ? defaultActive : 0);
+  const [activeIdx, setActiveIdx] = React41.useState(defaultActive >= 0 ? defaultActive : 0);
   const activePhase = phases[activeIdx];
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_b = p.title) != null ? _b : "engagement-pipeline", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "12px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: [
@@ -9132,7 +9351,7 @@ function EngagementPipelineResolver(p) {
             const color = (_a2 = statusColor2[phase.status]) != null ? _a2 : "#d6d3d1";
             const isCurrent = i === activeIdx;
             const size = isCurrent ? 28 : 20;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
@@ -9439,7 +9658,7 @@ function Avatar({ name, avatar, hovered }) {
 function EntityCardGridResolver(p) {
   var _a, _b;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
-  const [hoveredId, setHoveredId] = React33.useState(null);
+  const [hoveredId, setHoveredId] = React41.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "entity-card-grid", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "10px" }, children: [
     p.title && /* @__PURE__ */ jsxRuntime.jsx(
       "p",
@@ -9460,7 +9679,7 @@ function EntityCardGridResolver(p) {
       {
         style: {
           display: "grid",
-          gridTemplateColumns: `repeat(auto-fit, minmax(220px, 1fr))`,
+          gridTemplateColumns: `repeat(auto-fit, minmax(min(220px, 100%), 1fr))`,
           gap: "12px",
           width: "100%"
         },
@@ -9551,7 +9770,7 @@ function EntityCardGridResolver(p) {
                   {
                     style: {
                       display: "grid",
-                      gridTemplateColumns: item.fields.length > 2 ? "repeat(auto-fit, minmax(90px, 1fr))" : "1fr",
+                      gridTemplateColumns: item.fields.length > 2 ? "repeat(auto-fit, minmax(min(90px, 100%), 1fr))" : "1fr",
                       gap: "6px 12px",
                       borderTop: `1px solid ${BORDER4}`,
                       paddingTop: "8px"
@@ -9695,7 +9914,7 @@ function StepRow({ step }) {
 function JobTrackerResolver(p) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, PAPER: PAPER2 } = useTheme();
-  const [stepsOpen, setStepsOpen] = React33.useState(true);
+  const [stepsOpen, setStepsOpen] = React41.useState(true);
   const barColor = (_a = statusColors2[p.status]) != null ? _a : MUTED2;
   const badge = (_b = statusBadgeConfig[p.status]) != null ? _b : statusBadgeConfig.queued;
   const progress = (_c = p.progress) != null ? _c : p.status === "completed" ? 100 : 0;
@@ -10135,7 +10354,7 @@ function CitationCard({
   );
 }
 function FollowUpItem({ text }) {
-  const [hovered, setHovered] = React33.useState(false);
+  const [hovered, setHovered] = React41.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -10160,7 +10379,7 @@ function CitationMarker({
   index,
   onClick
 }) {
-  const [hovered, setHovered] = React33.useState(false);
+  const [hovered, setHovered] = React41.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "sup",
     {
@@ -10189,7 +10408,7 @@ function CitationMarker({
 function CitedAnswerResolver(p) {
   var _a, _b, _c, _d, _e;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, SECONDARY: SECONDARY2 } = useTheme();
-  const [expandedIds, setExpandedIds] = React33.useState(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = React41.useState(/* @__PURE__ */ new Set());
   const toggleCitation = (id) => {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -10493,7 +10712,7 @@ function TransactionFeedResolver(p) {
   var _a, _b, _c, _d, _e;
   const { BORDER: BORDER4, MUTED: MUTED2 } = useTheme();
   const currency = (_a = p.currency) != null ? _a : "USD";
-  const [hoveredIndex, setHoveredIndex] = React33.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React41.useState(null);
   const hasBalance = ((_b = p.transactions) != null ? _b : []).some((tx) => tx.balance != null);
   const totalInflows = p.transactions.filter((tx) => tx.amount > 0 && tx.status !== "reversed").reduce((sum, tx) => sum + tx.amount, 0);
   const totalOutflows = p.transactions.filter((tx) => tx.amount < 0 && tx.status !== "reversed").reduce((sum, tx) => sum + tx.amount, 0);
@@ -10650,7 +10869,7 @@ function formatDate2(dateStr) {
 }
 function FileRow({ item }) {
   var _a;
-  const [hovered, setHovered] = React33.useState(false);
+  const [hovered, setHovered] = React41.useState(false);
   const cfg = getDocConfig(item.docType);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -10726,8 +10945,8 @@ function FileRow({ item }) {
   );
 }
 function GroupSection({ groupName, items }) {
-  const [open, setOpen] = React33.useState(true);
-  const [headerHovered, setHeaderHovered] = React33.useState(false);
+  const [open, setOpen] = React41.useState(true);
+  const [headerHovered, setHeaderHovered] = React41.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -10913,15 +11132,15 @@ function isExpirySoon(expiresAt) {
 
 // src/shared/viewers/PreviewHost.tsx
 init_ThemeContext();
-var PdfViewer3 = React33.lazy(
+var PdfViewer3 = React41.lazy(
   () => Promise.resolve().then(() => (init_PdfViewer(), PdfViewer_exports)).then((m) => ({ default: m.PdfViewer }))
 );
-var ExcelViewer3 = React33.lazy(
+var ExcelViewer3 = React41.lazy(
   () => Promise.resolve().then(() => (init_ExcelViewer(), ExcelViewer_exports)).then((m) => ({ default: m.ExcelViewer }))
 );
-var CsvViewer2 = React33.lazy(() => Promise.resolve().then(() => (init_CsvViewer(), CsvViewer_exports)).then((m) => ({ default: m.CsvViewer })));
-var TextViewer2 = React33.lazy(() => Promise.resolve().then(() => (init_TextViewer(), TextViewer_exports)).then((m) => ({ default: m.TextViewer })));
-var DocxViewer2 = React33.lazy(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
+var CsvViewer2 = React41.lazy(() => Promise.resolve().then(() => (init_CsvViewer(), CsvViewer_exports)).then((m) => ({ default: m.CsvViewer })));
+var TextViewer2 = React41.lazy(() => Promise.resolve().then(() => (init_TextViewer(), TextViewer_exports)).then((m) => ({ default: m.TextViewer })));
+var DocxViewer2 = React41.lazy(() => Promise.resolve().then(() => (init_DocxViewer(), DocxViewer_exports)).then((m) => ({ default: m.DocxViewer })));
 var PEEK_ROWS = 20;
 var PEEK_LINES = 40;
 function PreviewHost({ kind, source, mode = "full" }) {
@@ -10951,7 +11170,7 @@ function PreviewHost({ kind, source, mode = "full" }) {
     default:
       return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(React33.Suspense, { fallback, children: viewer });
+  return /* @__PURE__ */ jsxRuntime.jsx(React41.Suspense, { fallback, children: viewer });
 }
 
 // src/shared/PreviewModal.tsx
@@ -10967,7 +11186,7 @@ function PreviewModal({
   onDownload
 }) {
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
-  React33.useEffect(() => {
+  React41.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -11140,17 +11359,17 @@ function FileCard({
   previewDisabled = false
 }) {
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
-  const [cardHover, setCardHover] = React33.useState(false);
-  const [btnHover, setBtnHover] = React33.useState(false);
-  const [pvHover, setPvHover] = React33.useState(false);
+  const [cardHover, setCardHover] = React41.useState(false);
+  const [btnHover, setBtnHover] = React41.useState(false);
+  const [pvHover, setPvHover] = React41.useState(false);
   const previewKind = previewKindFor(fileType, filename);
   const canPreview = !previewDisabled && previewKind !== null && (!!previewUrl || !!fetchPreviewBlob);
-  const [peekOpen, setPeekOpen] = React33.useState(false);
-  const [modalOpen, setModalOpen] = React33.useState(false);
-  const [source, setSource] = React33.useState(previewUrl ? { url: previewUrl } : null);
-  const [pvLoading, setPvLoading] = React33.useState(false);
-  const [pvError, setPvError] = React33.useState(null);
-  const ensureSource = React33.useCallback(async () => {
+  const [peekOpen, setPeekOpen] = React41.useState(false);
+  const [modalOpen, setModalOpen] = React41.useState(false);
+  const [source, setSource] = React41.useState(previewUrl ? { url: previewUrl } : null);
+  const [pvLoading, setPvLoading] = React41.useState(false);
+  const [pvError, setPvError] = React41.useState(null);
+  const ensureSource = React41.useCallback(async () => {
     if (source) return source;
     if (previewUrl) {
       const s = { url: previewUrl };
@@ -11172,7 +11391,7 @@ function FileCard({
       setPvLoading(false);
     }
   }, [source, previewUrl, fetchPreviewBlob]);
-  const togglePeek = React33.useCallback(async () => {
+  const togglePeek = React41.useCallback(async () => {
     if (peekOpen) {
       setPeekOpen(false);
       return;
@@ -11180,7 +11399,7 @@ function FileCard({
     setPeekOpen(true);
     await ensureSource();
   }, [peekOpen, ensureSource]);
-  const openModal = React33.useCallback(async () => {
+  const openModal = React41.useCallback(async () => {
     const s = await ensureSource();
     if (s) setModalOpen(true);
   }, [ensureSource]);
@@ -11295,7 +11514,7 @@ function FileCard({
                       whiteSpace: "nowrap"
                     },
                     children: [
-                      metaTokens.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+                      metaTokens.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
                         i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#c4c4c4" }, children: "\xB7" }),
                         /* @__PURE__ */ jsxRuntime.jsx("span", { children: t })
                       ] }, i)),
@@ -11639,7 +11858,7 @@ function ServiceCard({ item, isHovered, onHover, onLeave: onLeave2 }) {
 function OpsDashboardResolver(p) {
   var _a, _b, _c;
   const { BORDER: BORDER4, MUTED: MUTED2 } = useTheme();
-  const [hoveredId, setHoveredId] = React33.useState(null);
+  const [hoveredId, setHoveredId] = React41.useState(null);
   const hasRunning = ((_a = p.items) != null ? _a : []).some((item) => item.state === "running");
   return /* @__PURE__ */ jsxRuntime.jsxs(ComponentActions, { filename: (_b = p.title) != null ? _b : "ops-dashboard", children: [
     hasRunning && /* @__PURE__ */ jsxRuntime.jsx("style", { children: PULSE_KEYFRAMES }),
@@ -11692,8 +11911,8 @@ function formatDate3(value) {
   }
 }
 function CopyButton({ value, rowHovered }) {
-  const [copied, setCopied] = React33.useState(false);
-  const [btnHovered, setBtnHovered] = React33.useState(false);
+  const [copied, setCopied] = React41.useState(false);
+  const [btnHovered, setBtnHovered] = React41.useState(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(value).then(() => {
       setCopied(true);
@@ -11779,13 +11998,13 @@ function ValueCell({ item }) {
         )
       ] });
     case "currency":
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", fontWeight: 600, fontVariantNumeric: "tabular-nums", marginLeft: "auto" }, children: item.value });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { title: item.value, style: __spreadValues({ fontSize: "13px", fontWeight: 600, fontVariantNumeric: "tabular-nums", marginLeft: "auto" }, TRUNCATE), children: item.value });
     default:
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", color: "var(--foreground)" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { inline: true, content: item.value }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", color: "var(--foreground)", minWidth: 0, overflowWrap: "anywhere" }, children: /* @__PURE__ */ jsxRuntime.jsx(Markdown, { inline: true, content: item.value }) });
   }
 }
 function KVRow({ item, isLast, index }) {
-  const [hovered, setHovered] = React33.useState(false);
+  const [hovered, setHovered] = React41.useState(false);
   const altBg = index % 2 === 1 ? "#fcfcfc" : "white";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -11814,7 +12033,7 @@ function KVRow({ item, isLast, index }) {
             children: item.key
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, display: "flex", alignItems: "center", gap: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ValueCell, { item }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: "6px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ValueCell, { item }) }),
         item.copyable && /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: item.value, rowHovered: hovered })
       ]
     }
@@ -11870,7 +12089,7 @@ function KeyValueListResolver(p) {
               var _a3;
               return sum + ((_a3 = g.items) != null ? _a3 : []).length;
             }, 0);
-            return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
@@ -12006,7 +12225,7 @@ function BalanceSheetResolver(p) {
         color: balanced ? "#15803d" : "#dc2626"
       }, children: balanced ? "\u2713 A = L + E" : "\u2717 Out of Balance" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { style: {
           fontSize: "11px",
@@ -12048,7 +12267,7 @@ function BalanceSheetResolver(p) {
       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
         ((_p = p.sections) != null ? _p : []).map((section) => {
           var _a2;
-          return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12061,7 +12280,7 @@ function BalanceSheetResolver(p) {
             }, children: (_a2 = categoryLabels2[section.category]) != null ? _a2 : section.category }) }),
             section.subsections.map((sub, si) => {
               var _a3;
-              return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+              return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, style: {
                   padding: "6px 10px 6px 24px",
                   fontSize: "12px",
@@ -12223,7 +12442,7 @@ function IncomeStatementResolver(p) {
       ].filter(Boolean).join(" \xB7 ") })
     ] }),
     p.title && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontFamily: "var(--font-serif)", fontSize: "15px", fontWeight: 400, color: "var(--foreground)", letterSpacing: "-0.01em", margin: 0 }, children: p.title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowX: "auto", minWidth: 0, borderRadius: "0.75rem", border: `1px solid ${BORDER4}`, boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse", minWidth: "380px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { style: {
           fontSize: "11px",
@@ -12237,7 +12456,7 @@ function IncomeStatementResolver(p) {
           textAlign: "left",
           whiteSpace: "nowrap"
         }, children: "\xA0" }),
-        periods.map((period) => /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+        periods.map((period) => /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("th", { style: {
             fontSize: "11px",
             fontWeight: 500,
@@ -12268,7 +12487,7 @@ function IncomeStatementResolver(p) {
         sections.map((section, si) => {
           var _a2;
           const isSubtotal = section.sectionType === "subtotal";
-          return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: colCount, style: {
               padding: "8px 12px",
               fontSize: "12px",
@@ -12299,7 +12518,7 @@ function IncomeStatementResolver(p) {
                   var _a4;
                   const val = (_a4 = amounts[pi]) != null ? _a4 : 0;
                   const isNeg = val < 0;
-                  return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+                  return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
                     /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                       padding: "6px 10px",
                       fontSize: "13px",
@@ -12334,7 +12553,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = grossProfit[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12369,7 +12588,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = operatingIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                 padding: "8px 10px",
                 fontSize: "12px",
@@ -12403,7 +12622,7 @@ function IncomeStatementResolver(p) {
             var _a2;
             const val = (_a2 = netIncome[pi]) != null ? _a2 : 0;
             const isNeg = val < 0;
-            return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx("td", { style: {
                 padding: "10px 10px",
                 fontSize: "13px",
@@ -12623,7 +12842,7 @@ function CashFlowStatementResolver(p) {
                       /* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
                         activities.map((activity, ai) => {
                           var _a2, _b2, _c2;
-                          return /* @__PURE__ */ jsxRuntime.jsxs(React33__default.default.Fragment, { children: [
+                          return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
                             ai > 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
                               "td",
                               {
@@ -13006,6 +13225,7 @@ function GeneralLedgerResolver(p) {
           {
             style: {
               overflowX: "auto",
+              minWidth: 0,
               borderRadius: "0.75rem",
               border: `1px solid ${BORDER4}`,
               boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)"
@@ -15035,8 +15255,8 @@ var PRIORITY_STYLES = {
 function EscalationCardResolver(p) {
   var _a, _b, _c, _d;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const [cardHovered, setCardHovered] = React33.useState(false);
-  const [btnHovered, setBtnHovered] = React33.useState(false);
+  const [cardHovered, setCardHovered] = React41.useState(false);
+  const [btnHovered, setBtnHovered] = React41.useState(false);
   const priorityStyle = p.priority ? PRIORITY_STYLES[p.priority] : null;
   const railColor = (_a = priorityStyle == null ? void 0 : priorityStyle.color) != null ? _a : ACCENT2;
   const iconBg = (_b = priorityStyle == null ? void 0 : priorityStyle.bg) != null ? _b : "#fff2ec";
@@ -15883,9 +16103,9 @@ var CONNECTED_GREEN = "#15803d";
 function ConnectIntegrationResolver(p) {
   var _a;
   const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const [cardHovered, setCardHovered] = React33.useState(false);
-  const [btnHovered, setBtnHovered] = React33.useState(false);
-  const [imgFailed, setImgFailed] = React33.useState(false);
+  const [cardHovered, setCardHovered] = React41.useState(false);
+  const [btnHovered, setBtnHovered] = React41.useState(false);
+  const [imgFailed, setImgFailed] = React41.useState(false);
   const name = (p.integrationName || "Integration").trim();
   const initial = name.charAt(0).toUpperCase();
   const iconSrc = p.iconUrl || brandIconUrl(name);
@@ -16047,9 +16267,9 @@ function IntegrationsListResolver(p) {
   var _a, _b;
   const { BORDER: BORDER4, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
   const integrations = Array.isArray(p.integrations) ? p.integrations : [];
-  const [rowHover, setRowHover] = React33.useState(null);
-  const [btnHover, setBtnHover] = React33.useState(null);
-  const [failed, setFailed] = React33.useState({});
+  const [rowHover, setRowHover] = React41.useState(null);
+  const [btnHover, setBtnHover] = React41.useState(null);
+  const [failed, setFailed] = React41.useState({});
   const connectedCount = integrations.filter((i) => i.status === "connected").length;
   return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "integrations", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "11px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
@@ -16532,13 +16752,13 @@ var ellipsis = {
 function PipelinePreviewResolver(p) {
   var _a, _b, _c, _d, _e, _f, _g;
   const { MUTED: MUTED2, PAPER: PAPER2, BORDER: BORDER4, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
-  const [btnHovered, setBtnHovered] = React33.useState(false);
+  const [btnHovered, setBtnHovered] = React41.useState(false);
   const stateCfg = STATE_CONFIG[(_a = p.state) != null ? _a : "draft"];
   const destinations = (_b = p.destinations) != null ? _b : [];
   const steps = (_c = p.steps) != null ? _c : [];
   const workstreams = (_d = p.workstreams) != null ? _d : [];
   const scheduleLabel = p.schedule ? p.schedule.type === "manual" ? "Manual" : (_f = (_e = p.schedule.label) != null ? _e : p.schedule.cron) != null ? _f : "Scheduled" : null;
-  const { nodes, edges, viewBox, vbW, vbH } = React33.useMemo(() => {
+  const { nodes, edges, viewBox, vbW, vbH } = React41.useMemo(() => {
     const res = layoutGraph(steps);
     const b = layoutBounds(res.nodes);
     const pad = 24;
@@ -16552,7 +16772,7 @@ function PipelinePreviewResolver(p) {
       vbH: h
     };
   }, [steps]);
-  const nodeMap = React33.useMemo(() => {
+  const nodeMap = React41.useMemo(() => {
     const m = {};
     nodes.forEach((n) => m[n.id] = n);
     return m;
@@ -16920,6 +17140,726 @@ function PipelinePreviewResolver(p) {
     )
   ] }) });
 }
+init_ThemeContext();
+var DEFAULT_INTERACTION = {
+  selectedStepId: null,
+  onStepSelect: void 0
+};
+var GenUIInteractionContext = React41.createContext(DEFAULT_INTERACTION);
+function useGenUIInteraction() {
+  return React41.useContext(GenUIInteractionContext);
+}
+var STATUS_COLORS3 = {
+  done: "#15803d",
+  active: "",
+  // filled from theme ACCENT at render time
+  review: "#f59e0b",
+  pending: "#9ca3af",
+  failed: "#dc2626"
+};
+var STATUS_LABELS = {
+  done: "Complete",
+  active: "In progress",
+  review: "In review",
+  pending: "Pending",
+  failed: "Failed"
+};
+var HUMAN_PALETTE = ["#2563eb", "#0f766e", "#7c3aed", "#b45309", "#be185d", "#4d7c0f"];
+function hashColor(name) {
+  let h = 0;
+  for (let i = 0; i < name.length; i++) h = h * 31 + name.charCodeAt(i) | 0;
+  return HUMAN_PALETTE[Math.abs(h) % HUMAN_PALETTE.length];
+}
+function initialsOf(a) {
+  var _a, _b, _c, _d;
+  if (a.initials) return a.initials.slice(0, 2).toUpperCase();
+  const parts = a.name.trim().split(/\s+/);
+  return (((_b = (_a = parts[0]) == null ? void 0 : _a[0]) != null ? _b : "") + ((_d = (_c = parts[1]) == null ? void 0 : _c[0]) != null ? _d : "")).toUpperCase() || "?";
+}
+function SparkMark({ size, color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M12 2C12 2 12.8 6.5 14.5 9.5C16.2 12.5 20 13 20 13C20 13 16.2 13.5 14.5 16.5C12.8 19.5 12 24 12 24C12 24 11.2 19.5 9.5 16.5C7.8 13.5 4 13 4 13C4 13 7.8 12.5 9.5 9.5C11.2 6.5 12 2 12 2Z",
+      fill: color
+    }
+  ) });
+}
+function AvatarStack({ assignees, accent }) {
+  const shown = assignees.slice(0, 4);
+  const overflow = assignees.length - shown.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+    shown.map((a, i) => {
+      const isAgent = a.kind === "agent";
+      const bg = isAgent ? `${accent}1f` : a.color || hashColor(a.name);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          title: `${a.name}${a.role ? ` \xB7 ${a.role}` : isAgent ? " \xB7 agent" : ""}`,
+          style: {
+            width: 20,
+            height: 20,
+            borderRadius: "50%",
+            flexShrink: 0,
+            marginLeft: i === 0 ? 0 : -7,
+            zIndex: shown.length - i,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: bg,
+            border: "1.5px solid white",
+            boxShadow: isAgent ? `inset 0 0 0 1px ${accent}59` : "none"
+          },
+          children: isAgent ? /* @__PURE__ */ jsxRuntime.jsx(SparkMark, { size: 11, color: accent }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 8, fontWeight: 700, color: "white", letterSpacing: "0.02em" }, children: initialsOf(a) })
+        },
+        `${a.name}-${i}`
+      );
+    }),
+    overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        style: {
+          marginLeft: -7,
+          zIndex: 0,
+          width: 20,
+          height: 20,
+          borderRadius: "50%",
+          background: "#f2f2f2",
+          border: "1.5px solid white",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 8,
+          fontWeight: 700,
+          color: "#777777"
+        },
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    )
+  ] });
+}
+function IndexDot({ step, index, accent }) {
+  var _a;
+  const n = (_a = step.n) != null ? _a : index + 1;
+  const base = {
+    width: 18,
+    height: 18,
+    borderRadius: "50%",
+    flexShrink: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 10,
+    fontWeight: 700,
+    lineHeight: 1
+  };
+  if (step.status === "done") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#15803d", color: "white" }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: "\u2713" }) });
+  }
+  if (step.status === "failed") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#dc2626", color: "white" }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 10 }, children: "!" }) });
+  }
+  if (step.status === "active") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: accent, color: "white" }), children: n });
+  }
+  if (step.status === "review") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "white", border: "1.5px solid #f59e0b", color: "#b45309" }), children: n });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#f2f2f2", color: "#9ca3af" }), children: n });
+}
+var CARD_MIN = 132;
+var CARD_GAP = 16;
+var AUTO_COMPACT_BELOW = 360;
+function useContainerWidth(ref) {
+  const [w, setW] = React41__default.default.useState(0);
+  React41__default.default.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      var _a;
+      const cr = (_a = entries[0]) == null ? void 0 : _a.contentRect;
+      if (cr) setW(cr.width);
+    });
+    ro.observe(el);
+    setW(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, [ref]);
+  return w;
+}
+var KEYFRAMES = `
+@keyframes wfsPulse{0%,100%{opacity:1}50%{opacity:.35}}
+@keyframes wfsLampPulse{0%,100%{box-shadow:0 0 0 0 var(--wfs-accent,#6366f1)73}50%{box-shadow:0 0 0 4px transparent}}
+@keyframes wfsRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+@keyframes wfsShimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
+.wfs-rise{animation:wfsRise 0.32s cubic-bezier(0.22,1,0.36,1) both}
+@media (prefers-reduced-motion: reduce){
+  .wfs-anim,.wfs-rise,.wfs-shim{animation:none !important}
+  .wfs-rise{opacity:1 !important;transform:none !important}
+}`;
+function ProgressMeter({
+  done,
+  total,
+  accent,
+  muted,
+  loading
+}) {
+  const pct = total > 0 ? Math.round(done / total * 100) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "workflow-stepper-progress",
+      style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px 6px" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              fontSize: 10.5,
+              fontWeight: 600,
+              color: muted,
+              fontVariantNumeric: "tabular-nums",
+              letterSpacing: "0.01em",
+              whiteSpace: "nowrap"
+            },
+            children: loading ? "\u2014" : `${done} / ${total} \xB7 ${pct}%`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              flex: 1,
+              height: 3,
+              borderRadius: 3,
+              background: "#eceff4",
+              overflow: "hidden",
+              minWidth: 40
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: loading ? "wfs-shim" : void 0,
+                style: {
+                  display: "block",
+                  height: "100%",
+                  width: loading ? "100%" : `${pct}%`,
+                  borderRadius: 3,
+                  background: loading ? `linear-gradient(90deg, #eceff4, ${accent}55, #eceff4)` : accent,
+                  backgroundSize: loading ? "200px 100%" : void 0,
+                  animation: loading ? "wfsShimmer 1.1s linear infinite" : void 0,
+                  transition: "width 0.45s cubic-bezier(0.22,1,0.36,1)"
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkflowStepperRenderer({
+  data,
+  selectedStep = null,
+  onSelectStep,
+  density = "auto",
+  loading = false,
+  loadingSteps = 6,
+  showProgress = true
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const { BORDER: BORDER4, MUTED: MUTED2, ACCENT: ACCENT2 } = useTheme();
+  const steps = (_a = data.steps) != null ? _a : [];
+  const activeStepId = (_d = (_c = data.active_step) != null ? _c : (_b = steps.find((s) => s.status === "active")) == null ? void 0 : _b.id) != null ? _d : null;
+  const interactive = typeof onSelectStep === "function";
+  const statusColor3 = (s) => s === "active" ? ACCENT2 : STATUS_COLORS3[s];
+  const doneCount = steps.filter((s) => s.status === "done").length;
+  const rootRef = React41__default.default.useRef(null);
+  const containerW = useContainerWidth(rootRef);
+  let resolved = density === "auto" ? "full" : density;
+  if (density === "auto" && containerW > 0) {
+    const needed = steps.length * CARD_MIN + Math.max(0, steps.length - 1) * CARD_GAP;
+    resolved = containerW < AUTO_COMPACT_BELOW || needed > containerW * 1.6 ? "compact" : "full";
+  }
+  const scrollerRef = React41__default.default.useRef(null);
+  React41__default.default.useEffect(() => {
+    if (resolved !== "full" || loading) return;
+    const sc = scrollerRef.current;
+    if (!sc) return;
+    const el = sc.querySelector(
+      `[data-testid="workflow-stepper-step-${selectedStep != null ? selectedStep : activeStepId}"]`
+    );
+    if (el && sc.scrollWidth > sc.clientWidth) {
+      el.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
+    }
+  }, [resolved, loading, selectedStep, activeStepId]);
+  const [edges, setEdges] = React41__default.default.useState({
+    left: false,
+    right: false
+  });
+  const updateEdges = React41__default.default.useCallback(() => {
+    const sc = scrollerRef.current;
+    if (!sc) return;
+    const max = sc.scrollWidth - sc.clientWidth;
+    const sl = sc.scrollLeft;
+    const left = sl > 1;
+    const right = sl < max - 1;
+    setEdges((prev) => prev.left === left && prev.right === right ? prev : { left, right });
+  }, []);
+  React41__default.default.useLayoutEffect(() => {
+    if (resolved !== "full" || loading) return;
+    updateEdges();
+    const sc = scrollerRef.current;
+    if (!sc || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(updateEdges);
+    ro.observe(sc);
+    return () => ro.disconnect();
+  }, [resolved, loading, steps.length, updateEdges]);
+  const edgeMask = edges.left || edges.right ? `linear-gradient(90deg, ${edges.left ? "transparent 0, #000 14px" : "#000 0"}, ${edges.right ? "#000 calc(100% - 14px), transparent 100%" : "#000 100%"})` : void 0;
+  const themeStyle = { ["--wfs-accent"]: ACCENT2 };
+  if (loading) {
+    const ghosts = Array.from({ length: Math.max(2, loadingSteps) });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "workflow-stepper-loading", style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: KEYFRAMES }),
+      showProgress && /* @__PURE__ */ jsxRuntime.jsx(ProgressMeter, { done: 0, total: 0, accent: ACCENT2, muted: MUTED2, loading: true }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "stretch", gap: CARD_GAP, padding: "2px 2px 6px", overflow: "hidden" }, children: ghosts.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "wfs-shim",
+          "aria-hidden": "true",
+          style: {
+            flex: "0 1 168px",
+            minWidth: CARD_MIN,
+            height: 84,
+            borderRadius: 10,
+            border: `1px solid ${BORDER4}`,
+            background: `linear-gradient(90deg, #f4f6f9, #eceff4 40%, #f4f6f9 80%)`,
+            backgroundSize: "200px 100%",
+            animation: "wfsShimmer 1.1s linear infinite",
+            animationDelay: `${i * 0.08}s`
+          }
+        },
+        i
+      )) })
+    ] });
+  }
+  if (resolved === "compact") {
+    const activeStep = (_e = steps.find((s) => s.id === activeStepId)) != null ? _e : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rootRef,
+        "data-testid": "workflow-stepper-compact",
+        style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: KEYFRAMES }),
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(ProgressMeter, { done: doneCount, total: steps.length, accent: ACCENT2, muted: MUTED2 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: steps.map((s, i) => {
+              const sel = selectedStep === s.id;
+              const act = s.status === "active";
+              const done = s.status === "done";
+              const reached = s.status !== "pending";
+              const clickable = interactive && reached;
+              const size = act ? 11 : done ? 9 : 8;
+              return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+                i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: 14,
+                      height: 1.5,
+                      borderRadius: 1,
+                      background: steps[i - 1].status === "done" ? "#15803d" : "#e5e7eb",
+                      transition: "background 0.36s ease-out"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: interactive && !reached,
+                    "aria-disabled": interactive && !reached ? true : void 0,
+                    title: `${s.title} \xB7 ${STATUS_LABELS[s.status]}`,
+                    onClick: clickable ? () => onSelectStep == null ? void 0 : onSelectStep(sel ? null : s.id) : void 0,
+                    "data-testid": `workflow-stepper-step-${s.id}`,
+                    "data-status": s.status,
+                    "data-reached": reached || void 0,
+                    className: act ? "wfs-anim" : void 0,
+                    style: {
+                      position: "relative",
+                      width: size,
+                      height: size,
+                      padding: 0,
+                      borderRadius: "50%",
+                      background: statusColor3(s.status),
+                      flexShrink: 0,
+                      // border-box so the selected 2px border can't grow the dot
+                      // and reflow the rail.
+                      boxSizing: "border-box",
+                      opacity: reached ? 1 : 0.55,
+                      border: sel ? `2px solid ${ACCENT2}` : done ? "none" : "1px solid rgba(255,255,255,0.6)",
+                      boxShadow: sel ? "0 0 0 2px #fff" : "none",
+                      cursor: clickable ? "pointer" : "default",
+                      transition: "width 0.15s, height 0.15s",
+                      animation: act ? "wfsLampPulse 1.8s ease-in-out infinite" : "none"
+                    }
+                  }
+                )
+              ] }, s.id);
+            }) }),
+            activeStep && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { width: 1, height: 16, background: "#e6eaf1", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 7, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    style: {
+                      width: 17,
+                      height: 17,
+                      borderRadius: "50%",
+                      flexShrink: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: 9.5,
+                      fontWeight: 700,
+                      lineHeight: 1,
+                      background: activeStep.status === "done" ? "#15803d" : activeStep.status === "review" ? "#fff" : activeStep.status === "failed" ? "#dc2626" : ACCENT2,
+                      color: activeStep.status === "review" ? "#b45309" : "#fff",
+                      border: activeStep.status === "review" ? "1.5px solid #f59e0b" : "none"
+                    },
+                    children: activeStep.status === "done" ? "\u2713" : activeStep.status === "failed" ? "!" : (_f = activeStep.n) != null ? _f : steps.findIndex((x) => x.id === activeStep.id) + 1
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12.5,
+                      fontWeight: 650,
+                      color: "var(--foreground)",
+                      letterSpacing: "-0.01em",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      minWidth: 0
+                    },
+                    children: [
+                      activeStep.title,
+                      activeStep.sub ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: MUTED2 }, children: [
+                        " \xB7 ",
+                        activeStep.sub
+                      ] }) : null
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, "data-testid": "workflow-stepper", style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: KEYFRAMES }),
+    showProgress && /* @__PURE__ */ jsxRuntime.jsx(ProgressMeter, { done: doneCount, total: steps.length, accent: ACCENT2, muted: MUTED2 }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: scrollerRef,
+        className: "wfs-scroller",
+        onScroll: updateEdges,
+        style: {
+          display: "flex",
+          alignItems: "stretch",
+          overflowX: "auto",
+          scrollSnapType: "x proximity",
+          padding: "2px 2px 4px",
+          // Thin, always-styled scrollbar (Firefox + Windows/desktop WebKit
+          // where overlay scrollbars aren't available). macOS/mobile show
+          // overlay scrollbars on scroll; harmless either way.
+          scrollbarWidth: "thin",
+          scrollbarColor: "#c2c9d6 transparent",
+          // Edge fade ONLY on the side(s) with hidden content — never when the
+          // row isn't scrollable, so the last card's right edge stays crisp.
+          maskImage: edgeMask,
+          WebkitMaskImage: edgeMask
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          .wfs-scroller::-webkit-scrollbar{height:8px}
+          .wfs-scroller::-webkit-scrollbar-track{background:transparent}
+          .wfs-scroller::-webkit-scrollbar-thumb{background:#c2c9d6;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
+          .wfs-scroller:hover::-webkit-scrollbar-thumb{background:#aab2c2;background-clip:padding-box}
+        ` }),
+          steps.map((step, i) => {
+            var _a2;
+            const isSelected = selectedStep === step.id;
+            const isActive = step.status === "active";
+            const reached = step.status !== "pending";
+            const clickable = interactive && reached;
+            const color = statusColor3(step.status);
+            const humans = ((_a2 = step.assignees) != null ? _a2 : []).filter((a) => a.kind === "human");
+            const roleCaption = humans.map((h) => h.role).filter(Boolean).slice(0, 2).join(" \xB7 ");
+            return /* @__PURE__ */ jsxRuntime.jsxs(React41__default.default.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: CARD_GAP,
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        width: "100%",
+                        height: 1.5,
+                        borderRadius: 1,
+                        // Fill sweep: completed rails wash green left→right.
+                        background: steps[i - 1].status === "done" ? "linear-gradient(90deg, #15803d, #15803d)" : "#e5e7eb",
+                        backgroundSize: "100% 100%",
+                        transition: "background 0.36s ease-out"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: clickable ? "button" : void 0,
+                  tabIndex: clickable ? 0 : void 0,
+                  "aria-disabled": interactive && !reached ? true : void 0,
+                  className: "wfs-rise",
+                  "data-testid": `workflow-stepper-step-${step.id}`,
+                  "data-status": step.status,
+                  "data-selected": isSelected || void 0,
+                  "data-reached": reached || void 0,
+                  onClick: clickable ? () => onSelectStep == null ? void 0 : onSelectStep(isSelected ? null : step.id) : void 0,
+                  onKeyDown: clickable ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      onSelectStep == null ? void 0 : onSelectStep(isSelected ? null : step.id);
+                    }
+                  } : void 0,
+                  onMouseEnter: clickable ? (e) => {
+                    e.currentTarget.style.transform = "translateY(-1px)";
+                    e.currentTarget.style.boxShadow = "0 3px 10px rgba(15,23,42,0.08)";
+                  } : void 0,
+                  onMouseLeave: clickable ? (e) => {
+                    e.currentTarget.style.transform = "none";
+                    e.currentTarget.style.boxShadow = "0 1px 2px rgba(0,0,0,0.04)";
+                  } : void 0,
+                  style: {
+                    position: "relative",
+                    flex: "0 1 168px",
+                    minWidth: CARD_MIN,
+                    maxWidth: 208,
+                    scrollSnapAlign: "center",
+                    borderRadius: 10,
+                    boxSizing: "border-box",
+                    // Selection changes border COLOR only (constant 1px width) so
+                    // the card never reflows the row on click.
+                    border: `1px solid ${isSelected ? ACCENT2 : BORDER4}`,
+                    background: isSelected ? `${ACCENT2}0d` : "white",
+                    boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+                    padding: "10px 11px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 7,
+                    cursor: clickable ? "pointer" : "default",
+                    opacity: reached ? 1 : 0.62,
+                    transition: "border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.12s",
+                    animationDelay: `${Math.min(i, 10) * 0.04}s`,
+                    overflow: "hidden"
+                  },
+                  children: [
+                    isActive && !isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          position: "absolute",
+                          left: 0,
+                          top: 6,
+                          bottom: 6,
+                          width: 2,
+                          borderRadius: 2,
+                          background: ACCENT2
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(IndexDot, { step, index: i, accent: ACCENT2 }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: isActive ? "wfs-anim" : void 0,
+                            style: {
+                              width: 6,
+                              height: 6,
+                              borderRadius: "50%",
+                              background: color,
+                              animation: isActive ? "wfsLampPulse 1.8s ease-in-out infinite" : "none"
+                            }
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 9,
+                            fontWeight: 600,
+                            letterSpacing: "0.05em",
+                            textTransform: "uppercase",
+                            color
+                          },
+                          children: STATUS_LABELS[step.status]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 12.5,
+                            fontWeight: 600,
+                            color: "var(--foreground)",
+                            lineHeight: 1.25,
+                            letterSpacing: "-0.01em",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: step.title
+                        }
+                      ),
+                      step.sub && /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 10.5,
+                            color: MUTED2,
+                            marginTop: 2,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: step.sub
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginTop: "auto",
+                          minHeight: 20
+                        },
+                        children: [
+                          step.assignees && step.assignees.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(AvatarStack, { assignees: step.assignees, accent: ACCENT2 }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+                          roleCaption && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 9,
+                                color: "#9ca3af",
+                                fontWeight: 500,
+                                textAlign: "right",
+                                maxWidth: 76,
+                                lineHeight: 1.2,
+                                overflow: "hidden"
+                              },
+                              children: roleCaption
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, step.id);
+          })
+        ]
+      }
+    )
+  ] });
+}
+function WorkflowStepperResolver(p) {
+  var _a;
+  const { selectedStepId, onStepSelect } = useGenUIInteraction();
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "workflow-stepper", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          style: {
+            fontFamily: "var(--font-serif)",
+            fontSize: "15px",
+            fontWeight: 400,
+            color: "var(--foreground)",
+            letterSpacing: "-0.01em",
+            margin: 0
+          },
+          children: p.title
+        }
+      ),
+      p.period && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            padding: "2px 8px",
+            borderRadius: 9999,
+            background: "#f2f2f2",
+            color: "#777777",
+            fontVariantNumeric: "tabular-nums"
+          },
+          children: p.period
+        }
+      ),
+      p.badge && /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            padding: "2px 8px",
+            borderRadius: 9999,
+            border: "1px solid #dedede",
+            color: "#777777"
+          },
+          children: p.badge
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      WorkflowStepperRenderer,
+      {
+        data: p,
+        selectedStep: selectedStepId,
+        onSelectStep: onStepSelect
+      }
+    )
+  ] }) });
+}
 function resolveUI(rawPayload) {
   const payload = coercePayload(rawPayload);
   switch (payload.type) {
@@ -17035,6 +17975,8 @@ function resolveUI(rawPayload) {
       return /* @__PURE__ */ jsxRuntime.jsx(IntegrationsListResolver, __spreadValues({}, payload));
     case "pipeline-preview":
       return /* @__PURE__ */ jsxRuntime.jsx(PipelinePreviewResolver, __spreadValues({}, payload));
+    case "workflow-stepper":
+      return /* @__PURE__ */ jsxRuntime.jsx(WorkflowStepperResolver, __spreadValues({}, payload));
     default: {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",