@adoptai/genui-components 0.1.32 → 0.1.45

package/dist/composites/pipeline-preview/resolver.js

@@ -0,0 +1,924 @@
+"use client";
+import { createContext, useState, useMemo, useContext, useRef, useCallback, useEffect } from 'react';
+import { toPng } from 'html-to-image';
+import { jsx, jsxs } 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);
+}
+
+// src/composites/pipeline-preview/opMeta.ts
+var OP_META = {
+  REST: { label: "PULL DATA", color: "#3b82f6", bg: "#eff6ff", glyph: "\u21A7" },
+  REST_LOOP: { label: "PULL DATA", color: "#3b82f6", bg: "#eff6ff", glyph: "\u21A7" },
+  PAGINATION: { label: "PULL DATA", color: "#3b82f6", bg: "#eff6ff", glyph: "\u21A7" },
+  FILTER: { label: "FILTER", color: "#8b5cf6", bg: "#f5f3ff", glyph: "\u25BD" },
+  INTELLIGENT_FILTER: { label: "FILTER", color: "#8b5cf6", bg: "#f5f3ff", glyph: "\u25BD" },
+  JQ_FILTER: { label: "TRANSFORM", color: "#06b6d4", bg: "#ecfeff", glyph: "{}" },
+  PROMPT: { label: "AI ENRICH", color: "#ec4899", bg: "#fdf2f8", glyph: "\u2738" },
+  INTELLIGENT_OUTPUT: { label: "AI OUTPUT", color: "#ec4899", bg: "#fdf2f8", glyph: "\u2738" },
+  FLATTEN: { label: "DEDUPLICATE", color: "#f97316", bg: "#fff7ed", glyph: "\u21BA" },
+  STORE: { label: "STORE", color: "#10b981", bg: "#ecfdf5", glyph: "\u25A4" },
+  EXTRACT: { label: "EXTRACT", color: "#06b6d4", bg: "#ecfeff", glyph: "\u21A7" },
+  PROJECT: { label: "PROJECT", color: "#06b6d4", bg: "#ecfeff", glyph: "\u25A6" },
+  NOTIFY: { label: "NOTIFY", color: "#eab308", bg: "#fefce8", glyph: "\u25D4" },
+  BRANCH: { label: "BRANCH", color: "#6366f1", bg: "#eef2ff", glyph: "\u2442" },
+  CONDITION: { label: "BRANCH", color: "#6366f1", bg: "#eef2ff", glyph: "\u2442" },
+  MERGE: { label: "MERGE", color: "#14b8a6", bg: "#f0fdfa", glyph: "\u22C8" },
+  SORT: { label: "SORT", color: "#a855f7", bg: "#faf5ff", glyph: "\u21C5" },
+  OUTPUT_TABLE: { label: "OUTPUT", color: "#0ea5e9", bg: "#f0f9ff", glyph: "\u25A6" },
+  OUTPUT_TEXT: { label: "OUTPUT", color: "#0ea5e9", bg: "#f0f9ff", glyph: "\xB6" },
+  TEXT_TO_SQL: { label: "SQL QUERY", color: "#f43f5e", bg: "#fff1f2", glyph: "\u2317" },
+  TOOL_EXECUTION: { label: "TOOL", color: "#8b5cf6", bg: "#f5f3ff", glyph: "\u2699" },
+  PAYLOAD: { label: "PARSE", color: "#ca8a04", bg: "#fefce8", glyph: "\u2750" },
+  DATA_SOURCE_LOOKUP: { label: "LOOKUP", color: "#06b6d4", bg: "#ecfeff", glyph: "\u2315" },
+  FAN_OUT: { label: "LOOP", color: "#0d9488", bg: "#f0fdfa", glyph: "\u21BB" },
+  WRITE_TO_DB: { label: "WRITE", color: "#10b981", bg: "#ecfdf5", glyph: "\u25A4" },
+  READ_FROM_DB: { label: "READ DB", color: "#6366f1", bg: "#eef2ff", glyph: "\u2315" },
+  EMBEDDER: { label: "EMBEDDER", color: "#7c3aed", bg: "#f5f3ff", glyph: "\u2756" },
+  AGENTIC_SEARCH: { label: "AI SEARCH", color: "#0891b2", bg: "#ecfeff", glyph: "\u25CE" },
+  S3_READ: { label: "S3 READ", color: "#f59e0b", bg: "#fffbeb", glyph: "\u21A7" },
+  GOOGLE_DRIVE_READ: { label: "DRIVE READ", color: "#0f9d58", bg: "#e8f5e9", glyph: "\u25A4" },
+  GOOGLE_DRIVE_WRITE: { label: "DRIVE WRITE", color: "#0f9d58", bg: "#e8f5e9", glyph: "\u25A5" },
+  OUTLOOK: { label: "OUTLOOK", color: "#0078d4", bg: "#e8f2fc", glyph: "\u2709" },
+  GMAIL: { label: "GMAIL", color: "#ea4335", bg: "#fdecec", glyph: "\u2709" },
+  ESCALATE: { label: "ESCALATE", color: "#f59e0b", bg: "#fffbeb", glyph: "\u2691" },
+  PARSE_DOCUMENT: { label: "PARSE DOC", color: "#0d9488", bg: "#f0fdfa", glyph: "\u2750" },
+  RUN_ACTION: { label: "RUN ACTION", color: "#d97706", bg: "#fffbeb", glyph: "\u25B8" }
+};
+var FALLBACK_COLORS = [
+  { color: "#64748b", bg: "#f8fafc" },
+  { color: "#0ea5e9", bg: "#f0f9ff" },
+  { color: "#8b5cf6", bg: "#f5f3ff" },
+  { color: "#f97316", bg: "#fff7ed" },
+  { color: "#14b8a6", bg: "#f0fdfa" },
+  { color: "#ec4899", bg: "#fdf2f8" },
+  { color: "#6366f1", bg: "#eef2ff" },
+  { color: "#ca8a04", bg: "#fefce8" }
+];
+function formatOpLabel(op) {
+  return op.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(" ");
+}
+function getOpMeta(operation) {
+  if (!operation) return { label: "Step", color: "#64748b", bg: "#f8fafc", glyph: "\u25B8" };
+  const known = OP_META[operation];
+  if (known) return known;
+  const { color, bg } = FALLBACK_COLORS[operation.length % FALLBACK_COLORS.length];
+  return { label: formatOpLabel(operation), color, bg, glyph: "\u25B8" };
+}
+
+// src/composites/pipeline-preview/layout.ts
+var NODE_W = 220;
+var NODE_H = 56;
+var BRANCH_NODE_H = 44;
+var GAP_Y = 32;
+var GAP_X = 20;
+var BRANCH_PAD = 12;
+var BRANCH_HEADER = 36;
+var FAN_OUT_PAD = 16;
+var FAN_OUT_HEADER = 60;
+var BRANCH_COLORS = ["#6366f1", "#0891b2", "#f59e0b", "#ec4899", "#14b8a6", "#a855f7"];
+function layoutGraph(steps, startX = 0, startY = 0, keyPrefix = "") {
+  const nodes = [];
+  const edges = [];
+  let y = startY;
+  let prevId = null;
+  let totalW = NODE_W;
+  steps.forEach((step, idx) => {
+    var _a, _b, _c, _d;
+    const op = step.operation;
+    const isBranch = op === "BRANCH" || op === "CONDITION";
+    const isFanOut = op === "FAN_OUT";
+    const baseId = `${keyPrefix}${(_a = step.id) != null ? _a : `s${idx}`}`;
+    if (isFanOut && ((_b = step.subSteps) == null ? void 0 : _b.length)) {
+      const foNodeId = baseId;
+      const res = layoutGraph(step.subSteps, 0, 0, `${baseId}/`);
+      const containerW = Math.max(res.totalW, NODE_W) + FAN_OUT_PAD * 2;
+      const containerH = res.totalH + FAN_OUT_HEADER + FAN_OUT_PAD * 2 + 4;
+      nodes.push({
+        id: foNodeId,
+        type: "fan-out-group",
+        x: startX - containerW / 2,
+        y,
+        w: containerW,
+        h: containerH,
+        data: step
+      });
+      if (prevId) edges.push({ from: prevId, to: foNodeId });
+      const offX = res.nodes.length ? startX - res.nodes[0].x : startX;
+      const subNodes = [];
+      for (const n of res.nodes) {
+        const nn = __spreadProps(__spreadValues({}, n), { x: n.x + offX, y: n.y + y + FAN_OUT_HEADER });
+        subNodes.push(nn);
+        nodes.push(nn);
+      }
+      for (const e of res.edges) edges.push(e);
+      totalW = Math.max(totalW, containerW);
+      y += containerH + GAP_Y;
+      const lastSub = subNodes.filter((n) => n.type === "step").pop();
+      prevId = lastSub ? lastSub.id : foNodeId;
+    } else if (isBranch && ((_c = step.branches) == null ? void 0 : _c.length)) {
+      const bNodeId = baseId;
+      nodes.push({
+        id: bNodeId,
+        x: startX,
+        y,
+        w: NODE_W,
+        h: BRANCH_NODE_H,
+        data: step,
+        type: "branch-header"
+      });
+      if (prevId) edges.push({ from: prevId, to: bNodeId });
+      y += BRANCH_NODE_H + GAP_Y;
+      const branchResults = step.branches.map((br, bi) => {
+        var _a2;
+        return __spreadValues({
+          branch: __spreadProps(__spreadValues({}, br), { color: BRANCH_COLORS[bi % BRANCH_COLORS.length], _gid: `${bNodeId}-b${bi}` })
+        }, layoutGraph((_a2 = br.steps) != null ? _a2 : [], 0, 0, `${bNodeId}/b${bi}/`));
+      });
+      let bTotalW = branchResults.reduce((sum, r) => sum + r.totalW + GAP_X, 0) - GAP_X;
+      if (!Number.isFinite(bTotalW) || bTotalW <= 0) bTotalW = NODE_W;
+      totalW = Math.max(totalW, bTotalW);
+      let cx = startX - bTotalW / 2 + (((_d = branchResults[0]) == null ? void 0 : _d.totalW) || NODE_W) / 2;
+      for (const br of branchResults) {
+        const offX = br.nodes.length ? cx - br.nodes[0].x : cx;
+        const groupNodes = [];
+        for (const n of br.nodes) {
+          const nn = __spreadProps(__spreadValues({}, n), { x: n.x + offX, y: n.y + y + BRANCH_HEADER });
+          groupNodes.push(nn);
+          nodes.push(nn);
+        }
+        for (const e of br.edges) edges.push(e);
+        nodes.push({
+          id: `${br.branch._gid}-group`,
+          type: "branch-group",
+          x: cx - br.totalW / 2 - BRANCH_PAD,
+          y: y - 4,
+          w: br.totalW + BRANCH_PAD * 2,
+          h: br.totalH + BRANCH_HEADER + BRANCH_PAD * 2 + 4,
+          data: br.branch
+        });
+        if (groupNodes.length > 0) {
+          edges.push({ from: bNodeId, to: groupNodes[0].id, color: br.branch.color });
+        }
+        cx += br.totalW + GAP_X;
+      }
+      const maxBranchH = Math.max(
+        ...branchResults.map((b) => b.totalH + BRANCH_HEADER + BRANCH_PAD * 2 + 4)
+      );
+      y += maxBranchH + GAP_Y;
+      prevId = null;
+    } else {
+      const nodeId = baseId;
+      nodes.push({
+        id: nodeId,
+        x: startX,
+        y,
+        w: NODE_W,
+        h: NODE_H,
+        data: step,
+        type: "step"
+      });
+      if (prevId) edges.push({ from: prevId, to: nodeId });
+      prevId = nodeId;
+      y += NODE_H + GAP_Y;
+    }
+  });
+  return { nodes, edges, totalW, totalH: Math.max(y - startY - GAP_Y, 0) };
+}
+function layoutBounds(nodes) {
+  const real = nodes.filter((n) => n.type !== "branch-group" || true);
+  if (!real.length) return { minX: 0, minY: 0, maxX: NODE_W, maxY: NODE_H };
+  const left = (n) => n.type === "fan-out-group" || n.type === "branch-group" ? n.x : n.x - n.w / 2;
+  const right = (n) => n.type === "fan-out-group" || n.type === "branch-group" ? n.x + n.w : n.x + n.w / 2;
+  return {
+    minX: Math.min(...real.map(left)),
+    minY: Math.min(...real.map((n) => n.y)),
+    maxX: Math.max(...real.map(right)),
+    maxY: Math.max(...real.map((n) => n.y + n.h))
+  };
+}
+var STATE_CONFIG = {
+  draft: { label: "Draft", bg: "#f2f2f2", color: "#777777" },
+  running: { label: "Running", bg: "#dcfce7", color: "#15803d" },
+  paused: { label: "Paused", bg: "#fff7ed", color: "#f59e0b" }
+};
+var FANOUT_COLOR = getOpMeta("FAN_OUT").color;
+var titleStyle = {
+  fontFamily: "var(--font-serif)",
+  fontSize: "15px",
+  fontWeight: 400,
+  color: "var(--foreground)",
+  letterSpacing: "-0.01em",
+  margin: 0
+};
+function Chip({
+  children,
+  bg,
+  color
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        fontSize: "10px",
+        fontWeight: 600,
+        letterSpacing: "0.04em",
+        padding: "2px 8px",
+        borderRadius: "9999px",
+        background: bg,
+        color,
+        whiteSpace: "nowrap"
+      },
+      children
+    }
+  );
+}
+function edgePath(from, to) {
+  const isFromGroup = from.type === "fan-out-group" || from.type === "branch-group";
+  const isToGroup = to.type === "fan-out-group" || to.type === "branch-group";
+  const x1 = isFromGroup ? from.x + from.w / 2 : from.x;
+  const y1 = from.y + from.h;
+  const x2 = isToGroup ? to.x + to.w / 2 : to.x;
+  const y2 = to.y;
+  const midY = (y1 + y2) / 2;
+  return `M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`;
+}
+function IconBox({ color, bg, glyph }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: 30,
+        height: 30,
+        borderRadius: 7,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        background: bg,
+        border: `1px solid ${color}4D`,
+        color,
+        fontSize: 14,
+        lineHeight: 1
+      },
+      children: glyph
+    }
+  );
+}
+function OpBadge({ color, bg, label }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        fontSize: 9,
+        fontWeight: 700,
+        padding: "1px 5px",
+        borderRadius: 3,
+        letterSpacing: "0.3px",
+        color,
+        background: bg
+      },
+      children: label
+    }
+  );
+}
+var ellipsis = {
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  display: "block"
+};
+function PipelinePreviewResolver(p) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { MUTED: MUTED2, PAPER: PAPER2, BORDER: BORDER2, ACCENT: ACCENT2, ACCENT_SOFT: ACCENT_SOFT2 } = useTheme();
+  const [btnHovered, setBtnHovered] = 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 } = useMemo(() => {
+    const res = layoutGraph(steps);
+    const b = layoutBounds(res.nodes);
+    const pad = 24;
+    const w = b.maxX - b.minX + pad * 2;
+    const h = b.maxY - b.minY + pad * 2;
+    return {
+      nodes: res.nodes,
+      edges: res.edges,
+      viewBox: `${b.minX - pad} ${b.minY - pad} ${w} ${h}`,
+      vbW: w,
+      vbH: h
+    };
+  }, [steps]);
+  const nodeMap = useMemo(() => {
+    const m = {};
+    nodes.forEach((n) => m[n.id] = n);
+    return m;
+  }, [nodes]);
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: (_g = p.name) != null ? _g : "pipeline-preview", children: /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "12px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx("p", { style: titleStyle, children: p.name }),
+      /* @__PURE__ */ jsx(Chip, { bg: stateCfg.bg, color: stateCfg.color, children: stateCfg.label })
+    ] }),
+    p.description && /* @__PURE__ */ jsx("span", { style: { fontSize: "12.5px", color: MUTED2, lineHeight: 1.45, marginTop: "-4px" }, children: p.description }),
+    (p.source || destinations.length > 0) && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          flexWrap: "wrap",
+          padding: "10px 12px",
+          borderRadius: "0.6rem",
+          border: `1px solid ${BORDER2}`,
+          background: PAPER2
+        },
+        children: [
+          p.source && /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                fontWeight: 600,
+                color: "var(--foreground)",
+                padding: "3px 10px",
+                borderRadius: "9999px",
+                background: "white",
+                border: `1px solid ${BORDER2}`
+              },
+              children: p.source.name
+            }
+          ),
+          p.source && destinations.length > 0 && /* @__PURE__ */ jsx("span", { style: { color: MUTED2, fontSize: "14px" }, children: "\u2192" }),
+          destinations.map((d, i) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                fontWeight: 600,
+                color: "var(--foreground)",
+                padding: "3px 10px",
+                borderRadius: "9999px",
+                background: "white",
+                border: `1px solid ${BORDER2}`
+              },
+              children: d.name
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    (scheduleLabel || workstreams.length > 0) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }, children: [
+      scheduleLabel && /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: MUTED2 }, children: [
+        "\u23F1 ",
+        scheduleLabel
+      ] }),
+      workstreams.map((w, i) => /* @__PURE__ */ jsx(Chip, { bg: "#eef2ff", color: "#6366f1", children: w }, i))
+    ] }),
+    nodes.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "relative",
+          border: `1px solid ${BORDER2}`,
+          borderRadius: 12,
+          background: PAPER2,
+          overflow: "auto",
+          maxHeight: 520,
+          display: "flex",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: vbW,
+            height: vbH,
+            viewBox,
+            style: { maxWidth: "100%", display: "block" },
+            preserveAspectRatio: "xMidYMid meet",
+            children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", { id: "pp-shadow", x: "-10%", y: "-10%", width: "120%", height: "130%", children: /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "1", stdDeviation: "2", floodOpacity: "0.08" }) }) }),
+              edges.map((e, i) => {
+                const from = nodeMap[e.from];
+                const to = nodeMap[e.to];
+                if (!from || !to) return null;
+                return /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: edgePath(from, to),
+                    fill: "none",
+                    stroke: e.color || BORDER2,
+                    strokeWidth: 2,
+                    strokeLinecap: "round"
+                  },
+                  `edge-${i}`
+                );
+              }),
+              nodes.filter((n) => n.type === "branch-group").map((n) => {
+                const color = n.data.color || "#94a3b8";
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: n.x,
+                      y: n.y,
+                      width: n.w,
+                      height: n.h,
+                      rx: 10,
+                      ry: 10,
+                      fill: `${color}0D`,
+                      stroke: color,
+                      strokeWidth: 1.5,
+                      strokeDasharray: "4 3",
+                      opacity: 0.8
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "foreignObject",
+                    {
+                      x: n.x + 8,
+                      y: n.y + 6,
+                      width: n.w - 16,
+                      height: 22,
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              width: 8,
+                              height: 8,
+                              borderRadius: "50%",
+                              flexShrink: 0,
+                              background: color
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontWeight: 700, color: "var(--foreground)" }, children: n.data.label }),
+                        n.data.condition && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: __spreadValues({
+                              fontSize: 9,
+                              color: MUTED2,
+                              fontFamily: "monospace"
+                            }, ellipsis),
+                            children: n.data.condition
+                          }
+                        )
+                      ] })
+                    }
+                  )
+                ] }, n.id);
+              }),
+              nodes.filter((n) => n.type === "fan-out-group").map((n) => {
+                const m = getOpMeta("FAN_OUT");
+                const count = Array.isArray(n.data.subSteps) ? n.data.subSteps.length : 0;
+                const titleText = n.data.label || n.data.id || "Loop";
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: n.x,
+                      y: n.y,
+                      width: n.w,
+                      height: n.h,
+                      rx: 12,
+                      ry: 12,
+                      fill: `${FANOUT_COLOR}0D`,
+                      stroke: FANOUT_COLOR,
+                      strokeWidth: 1.5,
+                      strokeDasharray: "6 3",
+                      opacity: 0.9
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "foreignObject",
+                    {
+                      x: n.x,
+                      y: n.y,
+                      width: n.w,
+                      height: 60,
+                      style: { pointerEvents: "none" },
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "space-between",
+                              padding: "8px 12px 0 12px"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+                                /* @__PURE__ */ jsx(IconBox, { color: m.color, bg: m.bg, glyph: m.glyph }),
+                                /* @__PURE__ */ jsx(OpBadge, { color: m.color, bg: m.bg, label: m.label })
+                              ] }),
+                              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 500, color: FANOUT_COLOR, fontSize: 10, whiteSpace: "nowrap" }, children: [
+                                count,
+                                " steps"
+                              ] })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: __spreadValues({
+                              fontSize: 11,
+                              color: MUTED2,
+                              padding: "2px 12px 6px 12px"
+                            }, ellipsis),
+                            title: titleText,
+                            children: titleText
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }, n.id);
+              }),
+              nodes.filter((n) => n.type === "branch-header").map((n) => {
+                const m = getOpMeta(n.data.operation || "CONDITION");
+                const branchCount = Array.isArray(n.data.branches) ? n.data.branches.length : 0;
+                const titleText = n.data.label || n.data.id || m.label;
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: n.x - n.w / 2,
+                      y: n.y,
+                      width: n.w,
+                      height: n.h,
+                      rx: 10,
+                      ry: 10,
+                      fill: m.bg,
+                      stroke: m.color,
+                      strokeWidth: 1.5,
+                      filter: "url(#pp-shadow)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "foreignObject",
+                    {
+                      x: n.x - n.w / 2 + 8,
+                      y: n.y + 4,
+                      width: n.w - 16,
+                      height: n.h - 8,
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, height: "100%" }, children: [
+                        /* @__PURE__ */ jsx(IconBox, { color: m.color, bg: m.bg, glyph: m.glyph }),
+                        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ jsx("span", { style: { fontSize: 10, fontWeight: 700, letterSpacing: "0.5px", color: m.color, display: "block" }, children: m.label }),
+                          /* @__PURE__ */ jsx("span", { style: __spreadValues({ fontSize: 11, color: "var(--foreground)", fontWeight: 600 }, ellipsis), title: titleText, children: titleText })
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            style: {
+                              fontSize: 9,
+                              padding: "2px 6px",
+                              borderRadius: 8,
+                              fontWeight: 600,
+                              flexShrink: 0,
+                              color: m.color,
+                              background: `${m.color}26`
+                            },
+                            children: [
+                              branchCount,
+                              "\u2192"
+                            ]
+                          }
+                        )
+                      ] })
+                    }
+                  )
+                ] }, n.id);
+              }),
+              nodes.filter((n) => n.type === "step").map((n) => {
+                const m = getOpMeta(n.data.operation);
+                const line = n.data.label || n.data.description || n.data.id || "";
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: n.x - n.w / 2,
+                      y: n.y,
+                      width: n.w,
+                      height: n.h,
+                      rx: 10,
+                      ry: 10,
+                      fill: "white",
+                      stroke: BORDER2,
+                      strokeWidth: 1,
+                      filter: "url(#pp-shadow)"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "foreignObject",
+                    {
+                      x: n.x - n.w / 2 + 8,
+                      y: n.y + 4,
+                      width: n.w - 16,
+                      height: n.h - 8,
+                      style: { pointerEvents: "none" },
+                      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, height: "100%" }, children: [
+                        /* @__PURE__ */ jsx(IconBox, { color: m.color, bg: m.bg, glyph: m.glyph }),
+                        /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }, children: /* @__PURE__ */ jsx(OpBadge, { color: m.color, bg: m.bg, label: m.label }) }),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              style: __spreadValues({
+                                fontSize: 11,
+                                color: "var(--foreground)",
+                                fontWeight: 500,
+                                marginTop: 2
+                              }, ellipsis),
+                              title: n.data.description || line,
+                              children: line
+                            }
+                          )
+                        ] })
+                      ] })
+                    }
+                  )
+                ] }, n.id);
+              })
+            ]
+          }
+        )
+      }
+    ),
+    p.cta && /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: p.cta.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        onMouseEnter: () => setBtnHovered(true),
+        onMouseLeave: () => setBtnHovered(false),
+        style: {
+          alignSelf: "flex-start",
+          background: btnHovered ? ACCENT_SOFT2 : ACCENT2,
+          color: "white",
+          borderRadius: "8px",
+          padding: "8px 16px",
+          fontSize: "12px",
+          fontWeight: 600,
+          textDecoration: "none",
+          cursor: "pointer",
+          transition: "background 0.15s"
+        },
+        children: p.cta.label + "  \u2192"
+      }
+    )
+  ] }) });
+}
+
+export { PipelinePreviewResolver };
+//# sourceMappingURL=resolver.js.map
+//# sourceMappingURL=resolver.js.map