@adoptai/genui-components 0.1.33 → 0.1.45

package/dist/composites/workflow-stepper/resolver.js

@@ -0,0 +1,969 @@
+"use client";
+import React4, { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { toPng } from 'html-to-image';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/shared/theme.ts
+var BORDER = "#dedede";
+var MUTED = "#777777";
+var PAPER = "#f6f6f6";
+var ACCENT = "#ff5000";
+var ACCENT_SOFT = "#cc4000";
+var SECONDARY = "#0364ff";
+var CHART_PALETTE = [
+  "#ff5000",
+  "#0364ff",
+  "#16a34a",
+  "#dc2626",
+  "#7c3aed",
+  "#0891b2",
+  "#f59e0b",
+  "#6366f1",
+  "#ec4899",
+  "#84cc16",
+  "#e11d48",
+  "#0ea5e9"
+];
+function ColumnSettingsPanel({ columns, hidden, onToggle, onShowAll, onHideAll }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", minWidth: "180px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", paddingBottom: "4px", borderBottom: `1px solid ${BORDER}` }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onShowAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: ACCENT, fontWeight: 500, padding: 0 },
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onHideAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, fontWeight: 500, padding: 0 },
+          children: "Hide all"
+        }
+      )
+    ] }),
+    columns.map((col) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", fontSize: "12px", color: "var(--foreground)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: !hidden.has(col.key),
+              onChange: () => onToggle(col.key),
+              style: { accentColor: ACCENT, width: "14px", height: "14px", margin: 0, cursor: "pointer" }
+            }
+          ),
+          col.label
+        ]
+      },
+      col.key
+    ))
+  ] });
+}
+var DOT_COLOR = "#aaaaaa";
+var DOT_HOVER = "#555555";
+function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState("main");
+  const contentRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setView("main");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a, _b;
+      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      if ((_b = btnRef.current) == null ? void 0 : _b.contains(e.target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, close]);
+  const handleDownloadPNG = useCallback(async () => {
+    if (!contentRef.current) return;
+    try {
+      const url = await toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}.png`;
+      a.click();
+    } catch (e) {
+    }
+    close();
+  }, [filename, close]);
+  const handleCSV = useCallback(() => {
+    onDownloadCSV == null ? void 0 : onDownloadCSV();
+    close();
+  }, [onDownloadCSV, close]);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, style: { width: "100%" }, children }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "4px", position: "relative", zIndex: 10, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: btnRef,
+          onClick: () => {
+            setOpen((o) => !o);
+            setView("main");
+          },
+          "aria-label": "Component actions",
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 8px",
+            display: "flex",
+            gap: "3px",
+            alignItems: "center",
+            borderRadius: "6px",
+            transition: "background 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = "#f2f2f2";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_HOVER);
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "none";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_COLOR);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "6", viewBox: "0 0 20 6", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "17", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } })
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            right: 0,
+            marginBottom: "4px",
+            background: "white",
+            border: `1px solid ${BORDER}`,
+            borderRadius: "0.75rem",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.06)",
+            zIndex: 50,
+            padding: view === "columns" ? "10px" : "4px",
+            minWidth: view === "columns" ? "200px" : "160px"
+          },
+          children: view === "main" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            columnConfig && /* @__PURE__ */ jsx(MenuButton, { label: "Customize columns", onClick: () => setView("columns") }),
+            onDownloadCSV && /* @__PURE__ */ jsx(MenuButton, { label: "Download CSV", onClick: handleCSV }),
+            /* @__PURE__ */ jsx(MenuButton, { label: "Download PNG", onClick: handleDownloadPNG })
+          ] }) : /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setView("main"),
+                style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, marginBottom: "6px", padding: 0 },
+                children: "\u2190 Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColumnSettingsPanel,
+              {
+                columns: columnConfig.columns,
+                hidden: columnConfig.hidden,
+                onToggle: columnConfig.onToggle,
+                onShowAll: columnConfig.onShowAll,
+                onHideAll: columnConfig.onHideAll
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MenuButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "8px 12px",
+        fontSize: "12.5px",
+        color: "var(--foreground)",
+        textAlign: "left",
+        borderRadius: "8px",
+        transition: "background 0.15s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.background = "#f2f2f2",
+      onMouseLeave: (e) => e.currentTarget.style.background = "none",
+      children: label
+    }
+  );
+}
+var DEFAULT_TOKENS = {
+  BORDER,
+  MUTED,
+  PAPER,
+  ACCENT,
+  ACCENT_SOFT,
+  SECONDARY,
+  CHART_PALETTE: [...CHART_PALETTE]
+};
+var GenUIThemeContext = createContext(DEFAULT_TOKENS);
+function useTheme() {
+  return useContext(GenUIThemeContext);
+}
+var DEFAULT_INTERACTION = {
+  selectedStepId: null,
+  onStepSelect: void 0
+};
+var GenUIInteractionContext = createContext(DEFAULT_INTERACTION);
+function useGenUIInteraction() {
+  return useContext(GenUIInteractionContext);
+}
+var STATUS_COLORS = {
+  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__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(SparkMark, { size: 11, color: accent }) : /* @__PURE__ */ jsx("span", { style: { fontSize: 8, fontWeight: 700, color: "white", letterSpacing: "0.02em" }, children: initialsOf(a) })
+        },
+        `${a.name}-${i}`
+      );
+    }),
+    overflow > 0 && /* @__PURE__ */ 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__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#15803d", color: "white" }), children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10 }, children: "\u2713" }) });
+  }
+  if (step.status === "failed") {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "#dc2626", color: "white" }), children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10 }, children: "!" }) });
+  }
+  if (step.status === "active") {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: accent, color: "white" }), children: n });
+  }
+  if (step.status === "review") {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, base), { background: "white", border: "1.5px solid #f59e0b", color: "#b45309" }), children: n });
+  }
+  return /* @__PURE__ */ 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] = React4.useState(0);
+  React4.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__ */ jsxs(
+    "div",
+    {
+      "data-testid": "workflow-stepper-progress",
+      style: { display: "flex", alignItems: "center", gap: 8, padding: "0 2px 6px" },
+      children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          "span",
+          {
+            style: {
+              flex: 1,
+              height: 3,
+              borderRadius: 3,
+              background: "#eceff4",
+              overflow: "hidden",
+              minWidth: 40
+            },
+            children: /* @__PURE__ */ 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: BORDER2, 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 statusColor = (s) => s === "active" ? ACCENT2 : STATUS_COLORS[s];
+  const doneCount = steps.filter((s) => s.status === "done").length;
+  const rootRef = React4.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 = React4.useRef(null);
+  React4.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] = React4.useState({
+    left: false,
+    right: false
+  });
+  const updateEdges = React4.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 });
+  }, []);
+  React4.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__ */ jsxs("div", { "data-testid": "workflow-stepper-loading", style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle), children: [
+      /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+      showProgress && /* @__PURE__ */ jsx(ProgressMeter, { done: 0, total: 0, accent: ACCENT2, muted: MUTED2, loading: true }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "stretch", gap: CARD_GAP, padding: "2px 2px 6px", overflow: "hidden" }, children: ghosts.map((_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "wfs-shim",
+          "aria-hidden": "true",
+          style: {
+            flex: "0 1 168px",
+            minWidth: CARD_MIN,
+            height: 84,
+            borderRadius: 10,
+            border: `1px solid ${BORDER2}`,
+            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__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        "data-testid": "workflow-stepper-compact",
+        style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle),
+        children: [
+          /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+          showProgress && /* @__PURE__ */ jsx(ProgressMeter, { done: doneCount, total: steps.length, accent: ACCENT2, muted: MUTED2 }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, minWidth: 0 }, children: [
+            /* @__PURE__ */ 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__ */ jsxs(React4.Fragment, { children: [
+                i > 0 && /* @__PURE__ */ 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__ */ 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: statusColor(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__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 1, height: 16, background: "#e6eaf1", flexShrink: 0 } }),
+              /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 7, minWidth: 0 }, children: [
+                /* @__PURE__ */ 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__ */ 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__ */ jsxs("span", { style: { fontWeight: 400, color: MUTED2 }, children: [
+                        " \xB7 ",
+                        activeStep.sub
+                      ] }) : null
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-testid": "workflow-stepper", style: __spreadValues({ width: "100%", minWidth: 0 }, themeStyle), children: [
+    /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+    showProgress && /* @__PURE__ */ jsx(ProgressMeter, { done: doneCount, total: steps.length, accent: ACCENT2, muted: MUTED2 }),
+    /* @__PURE__ */ 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__ */ 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 = statusColor(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__ */ jsxs(React4.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: CARD_GAP,
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ 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__ */ 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 : BORDER2}`,
+                    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__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          position: "absolute",
+                          left: 0,
+                          top: 6,
+                          bottom: 6,
+                          width: 2,
+                          borderRadius: 2,
+                          background: ACCENT2
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                        /* @__PURE__ */ jsx(IndexDot, { step, index: i, accent: ACCENT2 }),
+                        /* @__PURE__ */ 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__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 9,
+                            fontWeight: 600,
+                            letterSpacing: "0.05em",
+                            textTransform: "uppercase",
+                            color
+                          },
+                          children: STATUS_LABELS[step.status]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                      /* @__PURE__ */ 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__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 10.5,
+                            color: MUTED2,
+                            marginTop: 2,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: step.sub
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginTop: "auto",
+                          minHeight: 20
+                        },
+                        children: [
+                          step.assignees && step.assignees.length > 0 ? /* @__PURE__ */ jsx(AvatarStack, { assignees: step.assignees, accent: ACCENT2 }) : /* @__PURE__ */ jsx("span", {}),
+                          roleCaption && /* @__PURE__ */ 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__ */ jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "workflow-stepper", children: /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            padding: "2px 8px",
+            borderRadius: 9999,
+            border: "1px solid #dedede",
+            color: "#777777"
+          },
+          children: p.badge
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      WorkflowStepperRenderer,
+      {
+        data: p,
+        selectedStep: selectedStepId,
+        onSelectStep: onStepSelect
+      }
+    )
+  ] }) });
+}
+
+export { WorkflowStepperRenderer, WorkflowStepperResolver };
+//# sourceMappingURL=resolver.js.map
+//# sourceMappingURL=resolver.js.map