@tangle-network/sandbox-ui 0.73.0 → 0.75.0

package/dist/WorkflowGraph-RA7ZHN4I.js

@@ -0,0 +1,636 @@
+import {
+  ProviderIcon
+} from "./chunk-GTJ5PSK5.js";
+import {
+  COMPACT_NODE_SIZE,
+  buildWorkflowGraph,
+  providerLabel
+} from "./chunk-FNE5QLU3.js";
+import "./chunk-U67V476Y.js";
+
+// src/workflows/WorkflowGraph.tsx
+import {
+  Background,
+  Controls,
+  Handle,
+  MarkerType,
+  Panel,
+  Position as Position2,
+  ReactFlow,
+  useEdgesState,
+  useNodesState
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Maximize2, Minimize2 } from "lucide-react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/workflows/flow-graph.ts
+import { Position } from "@xyflow/react";
+function normalizeFlowGraphOptions(arg) {
+  if (!arg) return {};
+  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "measure" in arg) {
+    return arg;
+  }
+  return { nodeState: arg };
+}
+function buildFlowGraph(yaml, optionsOrNodeState) {
+  const options = normalizeFlowGraphOptions(optionsOrNodeState);
+  const nodeState = options.nodeState;
+  const direction = options.direction ?? "LR";
+  const compact = options.compact ?? false;
+  const graph = buildWorkflowGraph(yaml, {
+    reserveRunState: nodeState !== void 0,
+    direction,
+    // Compact nodes are a fixed size; otherwise honor the caller's `measure` (or
+    // fall back to the default content sizing).
+    measure: compact ? () => COMPACT_NODE_SIZE : options?.measure
+  });
+  const isLR = direction === "LR";
+  const sourcePosition = isLR ? Position.Right : Position.Bottom;
+  const targetPosition = isLR ? Position.Left : Position.Top;
+  return {
+    error: graph.error,
+    nodes: graph.nodes.map(
+      (n) => ({
+        id: n.id,
+        type: "wfNode",
+        position: n.position,
+        width: n.width,
+        height: n.height,
+        // Fix the DOM box to the laid-out size so the card can't grow past its
+        // reserved space and overlap a neighbour (see model.ts nodeHeight).
+        style: { width: n.width, height: n.height },
+        sourcePosition,
+        targetPosition,
+        data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
+      })
+    ),
+    edges: graph.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      type: "smoothstep"
+    }))
+  };
+}
+function sameRunState(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  return aKeys.every((k) => a[k] === b[k]);
+}
+function mergeRunState(prev, baseDataById, nodeState) {
+  return prev.map((n) => {
+    const base = baseDataById.get(n.id) ?? n.data;
+    const s = nodeState?.[n.id];
+    const nextData = s ? { ...base, state: s } : base;
+    return sameRunState(n.data.state, nextData.state) ? n : { ...n, data: nextData };
+  });
+}
+
+// src/workflows/format.ts
+function fmtDuration(ms) {
+  if (ms === void 0 || !Number.isFinite(ms) || ms < 0) return void 0;
+  if (ms < 1e3) return `${Math.round(ms)}ms`;
+  const s = ms / 1e3;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const totalSeconds = Math.round(s);
+  return `${Math.floor(totalSeconds / 60)}m${totalSeconds % 60}s`;
+}
+function fmtCost(usd) {
+  if (usd === void 0 || !Number.isFinite(usd) || usd < 0) return void 0;
+  if (usd === 0) return "$0";
+  return usd < 0.01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`;
+}
+function clampPreview(text, max = 200) {
+  if (text.length <= max) return text;
+  const lastCode = text.charCodeAt(max - 1);
+  const end = lastCode >= 55296 && lastCode <= 56319 ? max - 1 : max;
+  return `${text.slice(0, end)}\u2026`;
+}
+function fmtTokens(input, output) {
+  const valid = (n) => n !== void 0 && Number.isFinite(n) && n >= 0 ? n : void 0;
+  const i = valid(input);
+  const o = valid(output);
+  if (i === void 0 && o === void 0) return void 0;
+  return `${i ?? 0}/${o ?? 0} tok`;
+}
+
+// src/workflows/node-output.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var MAX_JSON_ENTRIES = 6;
+function scalar(value) {
+  if (value === null) return "null";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return `[${value.length} item${value.length === 1 ? "" : "s"}]`;
+  }
+  if (typeof value === "object") return "{\u2026}";
+  return "";
+}
+function classifyOutput(preview) {
+  let trimmed = preview?.trim() ?? "";
+  trimmed = trimmed.replace(/[\uD800-\uDBFF](?![\uDC00-\uDFFF])/g, "").replace(/(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/g, "").trimEnd();
+  if (trimmed === "") return { kind: "empty" };
+  const structured = trimmed.startsWith("{") || trimmed.startsWith("[");
+  if (structured) {
+    try {
+      const parsed = JSON.parse(trimmed);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        const all = Object.entries(parsed);
+        const entries = all.slice(0, MAX_JSON_ENTRIES).map(([k, v]) => [k, scalar(v)]);
+        if (entries.length > 0) {
+          return { kind: "json", entries, truncated: all.length > entries.length };
+        }
+      }
+      return { kind: "code", text: trimmed };
+    } catch {
+      return { kind: "code", text: trimmed };
+    }
+  }
+  return { kind: "text", text: trimmed };
+}
+var CLAMP_BY_ROWS = {
+  1: "truncate",
+  2: "line-clamp-2",
+  3: "line-clamp-3"
+};
+function NodeOutputBody({
+  shape,
+  rows = 2,
+  tone = "default"
+}) {
+  const clampClass = CLAMP_BY_ROWS[rows] ?? "line-clamp-2";
+  const codeWrap = rows === 1 ? "" : "whitespace-pre-wrap break-all";
+  if (shape.kind === "empty") return null;
+  if (shape.kind === "json") {
+    const overflow = shape.truncated || shape.entries.length > rows;
+    const visible = shape.entries.slice(0, overflow ? Math.max(0, rows - 1) : rows);
+    const isError = tone === "error";
+    const keyClass = isError ? "text-red-400/80" : "text-muted-foreground";
+    const valueClass = isError ? "text-red-400" : "text-foreground";
+    return /* @__PURE__ */ jsxs("dl", { className: "space-y-0.5 font-mono text-[10px] leading-tight", children: [
+      visible.map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsx("dt", { className: `max-w-[45%] shrink-0 truncate ${keyClass}`, title: key, children: key }),
+        /* @__PURE__ */ jsx("dd", { className: `min-w-0 flex-1 truncate ${valueClass}`, title: value, children: value })
+      ] }, key)),
+      overflow && /* @__PURE__ */ jsx("div", { className: `text-[9px] ${keyClass}`, children: "\u2026" })
+    ] });
+  }
+  if (shape.kind === "code") {
+    return /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: `${clampClass} ${codeWrap} font-mono text-[10px] leading-tight ${tone === "error" ? "text-red-400" : "text-foreground/80"}`,
+        title: shape.text,
+        children: shape.text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: `${clampClass} text-[10px] leading-snug ${tone === "error" ? "text-red-400" : "text-muted-foreground"}`,
+      title: shape.text,
+      children: shape.text
+    }
+  );
+}
+
+// src/workflows/node-ui.tsx
+import {
+  Bell,
+  Box,
+  Cable,
+  Circle,
+  Clock,
+  Repeat,
+  Sparkles,
+  Split,
+  Webhook
+} from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TONE_ACCENT = {
+  trigger: "hsl(var(--primary))",
+  structural: "var(--surface-warning-text)",
+  action: "hsl(var(--muted-foreground))"
+};
+var EDGE_MUTED = "hsl(var(--muted-foreground))";
+var EDGE_DONE = "#22c55e";
+var EDGE_FAIL = "#ef4444";
+var EDGE_RUNNING = "hsl(var(--primary))";
+var STATUS_COLOR = {
+  queued: EDGE_MUTED,
+  running: EDGE_RUNNING,
+  succeeded: EDGE_DONE,
+  failed: EDGE_FAIL
+};
+function edgeColor(status) {
+  switch (status) {
+    case "running":
+      return EDGE_RUNNING;
+    case "succeeded":
+      return EDGE_DONE;
+    case "failed":
+      return EDGE_FAIL;
+    default:
+      return EDGE_MUTED;
+  }
+}
+var STATUS_LABEL = {
+  queued: "Queued",
+  running: "Running",
+  succeeded: "Done",
+  failed: "Failed"
+};
+var STATUS_BADGE = {
+  queued: "bg-surface-container-high text-muted-foreground",
+  running: "bg-primary/15 text-primary",
+  succeeded: "bg-green-600/10 text-green-600",
+  failed: "bg-red-500/10 text-red-400"
+};
+function statusBorder(status) {
+  switch (status) {
+    case "running":
+      return "border-primary ring-1 ring-primary/40";
+    case "succeeded":
+      return "border-green-500";
+    case "failed":
+      return "border-red-500";
+    default:
+      return "opacity-70";
+  }
+}
+function progressFill(status) {
+  return status === "succeeded" || status === "failed" ? "100%" : status === "running" ? "58%" : "6%";
+}
+var KIND_ICON = {
+  schedule: Clock,
+  provider_event: Webhook,
+  trigger: Webhook,
+  "agent.run": Sparkles,
+  "integration.invoke": Cable,
+  notify: Bell,
+  parallel: Split,
+  foreach: Repeat,
+  "sandbox.spawn": Box
+};
+function NodeIcon({
+  kind,
+  accent,
+  box,
+  glyph
+}) {
+  const Icon = kind && KIND_ICON[kind] || Circle;
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex shrink-0 items-center justify-center rounded-md",
+      style: {
+        width: box,
+        height: box,
+        background: `color-mix(in srgb, ${accent} 16%, transparent)`,
+        color: accent
+      },
+      children: /* @__PURE__ */ jsx2(Icon, { size: glyph, strokeWidth: 2 })
+    }
+  );
+}
+function MetaChip({
+  children,
+  title
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      title,
+      className: "inline-block max-w-[150px] truncate rounded bg-surface-container-high px-1.5 py-0.5 align-middle text-[10px] text-muted-foreground",
+      children
+    }
+  );
+}
+
+// src/workflows/WorkflowGraph.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
+function useColorMode() {
+  const [mode, setMode] = useState(
+    () => typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light"
+  );
+  useEffect(() => {
+    const el = document.documentElement;
+    const update = () => setMode(el.classList.contains("dark") ? "dark" : "light");
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  return mode;
+}
+var DirectionContext = createContext("LR");
+var DensityContext = createContext(false);
+function StatusFooter({
+  status,
+  rounds,
+  elapsed
+}) {
+  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: "mt-auto border-border/60 border-t", children: [
+    /* @__PURE__ */ jsx3("div", { className: "h-1 w-full overflow-hidden", style: { background: MUTED_TRACK }, children: /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
+        style: { width: progressFill(status), background: STATUS_COLOR[status] }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3 py-1 text-[9px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsx3("span", { className: "truncate", children: roundsLabel ?? "" }),
+      elapsed && /* @__PURE__ */ jsx3("span", { className: "shrink-0", children: elapsed })
+    ] })
+  ] });
+}
+var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
+function WorkflowNode({ data }) {
+  const d = data;
+  const state = d.state;
+  const direction = useContext(DirectionContext);
+  const compact = useContext(DensityContext);
+  const isLR = direction === "LR";
+  const targetPos = isLR ? Position2.Left : Position2.Top;
+  const sourcePos = isLR ? Position2.Right : Position2.Bottom;
+  const accent = TONE_ACCENT[d.tone];
+  const isAgent = d.kind === "agent.run";
+  const model = state?.model ?? d.model;
+  const duration = fmtDuration(state?.durationMs);
+  const cost = fmtCost(state?.costUsd);
+  const tokens = isAgent ? fmtTokens(state?.inputTokens, state?.outputTokens) : void 0;
+  const runOutput = (() => {
+    const source = state?.status === "failed" && state.error ? { text: state.error, tone: "error", label: "Error" } : state && state.status !== "failed" && state.outputPreview ? { text: state.outputPreview, tone: "default", label: "Output" } : null;
+    if (!source) return null;
+    const trimmed = source.text.trim();
+    if (!trimmed) return null;
+    const shape = classifyOutput(clampPreview(trimmed));
+    return shape.kind === "empty" ? null : { shape, tone: source.tone, label: source.label };
+  })();
+  const wrapperClass = `relative flex h-full w-full flex-col overflow-hidden rounded-lg border bg-card shadow-sm transition-colors ${state ? statusBorder(state.status) : ""}`;
+  const wrapperStyle = state ? state.status === "running" ? { boxShadow: "0 0 22px -6px hsl(var(--primary))" } : void 0 : {
+    borderColor: `color-mix(in srgb, ${accent} 42%, transparent)`,
+    backgroundColor: `color-mix(in srgb, ${accent} 6%, hsl(var(--card)))`
+  };
+  const handles = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    !d.isRoot && /* @__PURE__ */ jsx3(Handle, { type: "target", position: targetPos, className: HANDLE_CLASS }),
+    /* @__PURE__ */ jsx3(Handle, { type: "source", position: sourcePos, className: HANDLE_CLASS })
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ jsxs2("div", { className: `${wrapperClass} justify-center px-2.5`, style: wrapperStyle, children: [
+      handles,
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2.5", children: [
+        /* @__PURE__ */ jsx3(NodeIcon, { kind: d.kind, accent, box: 32, glyph: 16 }),
+        /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx3("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
+            state ? /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: "ml-auto h-1.5 w-1.5 shrink-0 rounded-full",
+                style: { backgroundColor: STATUS_COLOR[state.status] }
+              }
+            ) : d.badge && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0 rounded bg-surface-container-high px-1 py-0.5 text-[9px] text-muted-foreground", children: d.badge })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx3("span", { className: "truncate", children: model ?? d.subtitle ?? d.kind }),
+            cost && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0", children: cost }),
+            duration && /* @__PURE__ */ jsxs2("span", { className: "shrink-0", children: [
+              "\xB7 ",
+              duration
+            ] })
+          ] })
+        ] })
+      ] }),
+      state?.status === "running" && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "mt-1.5 h-0.5 w-full overflow-hidden rounded-full",
+          style: { background: MUTED_TRACK },
+          children: /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: "h-full w-1/2 animate-pulse rounded-full",
+              style: { background: EDGE_RUNNING }
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: wrapperClass, style: wrapperStyle, children: [
+    handles,
+    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col px-3 pt-2 pb-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx3(NodeIcon, { kind: d.kind, accent, box: 24, glyph: 14 }),
+        /* @__PURE__ */ jsx3("span", { className: "truncate font-medium text-[12px] text-foreground", children: d.title }),
+        state ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            className: `ml-auto shrink-0 rounded px-1.5 py-0.5 text-[10px] ${STATUS_BADGE[state.status]}`,
+            children: STATUS_LABEL[state.status]
+          }
+        ) : d.badge && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: d.badge })
+      ] }),
+      d.subtitle && /* @__PURE__ */ jsx3(
+        "p",
+        {
+          className: "mt-1 truncate text-[11px] text-muted-foreground",
+          title: d.subtitle,
+          children: d.subtitle
+        }
+      ),
+      d.provider && /* @__PURE__ */ jsxs2("span", { className: "mt-1.5 inline-flex w-fit items-center gap-1 rounded bg-surface-container-high px-1.5 py-0.5 text-[10px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx3(
+          ProviderIcon,
+          {
+            id: d.provider,
+            displayName: providerLabel(d.provider),
+            size: 12,
+            className: "rounded-[2px]"
+          }
+        ),
+        providerLabel(d.provider)
+      ] }),
+      (model || cost || tokens) && /* @__PURE__ */ jsxs2("div", { className: "mt-1.5 flex flex-wrap items-center gap-1", children: [
+        model && /* @__PURE__ */ jsx3(MetaChip, { title: model, children: model }),
+        cost && /* @__PURE__ */ jsx3(MetaChip, { children: cost }),
+        tokens && /* @__PURE__ */ jsx3(MetaChip, { children: tokens })
+      ] }),
+      runOutput && /* @__PURE__ */ jsxs2("div", { className: "mt-1.5 min-h-0", children: [
+        /* @__PURE__ */ jsx3("div", { className: "mb-0.5 font-medium text-[8px] text-muted-foreground/70 uppercase tracking-[0.08em]", children: runOutput.label }),
+        /* @__PURE__ */ jsx3(NodeOutputBody, { shape: runOutput.shape, tone: runOutput.tone, rows: 2 })
+      ] })
+    ] }),
+    state && d.tone !== "trigger" && /* @__PURE__ */ jsx3(
+      StatusFooter,
+      {
+        status: state.status,
+        rounds: isAgent ? state.rounds : void 0,
+        elapsed: duration
+      }
+    )
+  ] });
+}
+var NODE_TYPES = { wfNode: WorkflowNode };
+function buildStyledEdges(base, nodeState) {
+  return base.map((e) => {
+    const status = nodeState?.[e.target]?.status;
+    const color = edgeColor(nodeState ? status : void 0);
+    return {
+      ...e,
+      // The active hop flows; everything else is static.
+      animated: status === "running",
+      style: { strokeWidth: 1.75, stroke: color },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 15,
+        height: 15,
+        color
+      }
+    };
+  });
+}
+function WorkflowGraph({
+  yaml,
+  variant = "full",
+  direction = "LR",
+  defaultCompact = false,
+  className,
+  nodeState,
+  onNodeClick
+}) {
+  const colorMode = useColorMode();
+  const isPreview = variant === "preview";
+  const [userCompact, setUserCompact] = useState(defaultCompact);
+  const compact = isPreview || userCompact;
+  const rfRef = useRef(null);
+  const hasRunOverlay = nodeState !== void 0;
+  const structural = useMemo(
+    () => buildFlowGraph(yaml, {
+      nodeState: hasRunOverlay ? {} : void 0,
+      direction,
+      compact
+    }),
+    [yaml, hasRunOverlay, direction, compact]
+  );
+  const styledEdges = useMemo(
+    () => buildStyledEdges(structural.edges, nodeState),
+    [structural.edges, nodeState]
+  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
+  useEffect(() => {
+    setNodes(structural.nodes);
+  }, [structural, setNodes]);
+  useEffect(() => {
+    setEdges(styledEdges);
+  }, [styledEdges, setEdges]);
+  useEffect(() => {
+    const baseById = new Map(structural.nodes.map((n) => [n.id, n.data]));
+    setNodes((prev) => mergeRunState(prev, baseById, nodeState));
+  }, [nodeState, structural, setNodes]);
+  const didInitialFitRef = useRef(false);
+  useEffect(() => {
+    if (!didInitialFitRef.current) {
+      didInitialFitRef.current = true;
+      return;
+    }
+    const inst = rfRef.current;
+    if (!inst || typeof requestAnimationFrame === "undefined") return;
+    const raf = requestAnimationFrame(() => inst.fitView({ padding: 0.18 }));
+    return () => cancelAnimationFrame(raf);
+  }, [structural]);
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      onNodeClick?.(node.id, node.data);
+    },
+    [onNodeClick]
+  );
+  if (structural.error || structural.nodes.length === 0) {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `flex items-center justify-center rounded-lg border border-border border-dashed p-4 text-center text-muted-foreground text-xs ${className ?? ""}`,
+        children: structural.error ?? "Nothing to show"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: compact, children: /* @__PURE__ */ jsx3("div", { className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs2(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      nodeTypes: NODE_TYPES,
+      colorMode,
+      onInit: (inst) => {
+        rfRef.current = inst;
+      },
+      onNodeClick: onNodeClick ? handleNodeClick : void 0,
+      fitView: true,
+      fitViewOptions: { padding: 0.18 },
+      proOptions: { hideAttribution: true },
+      nodesDraggable: !isPreview,
+      nodesConnectable: false,
+      deleteKeyCode: null,
+      edgesReconnectable: false,
+      elementsSelectable: !isPreview,
+      edgesFocusable: false,
+      zoomOnScroll: false,
+      zoomOnPinch: true,
+      zoomOnDoubleClick: !isPreview,
+      panOnDrag: true,
+      preventScrolling: false,
+      minZoom: 0.2,
+      maxZoom: 1.5,
+      children: [
+        /* @__PURE__ */ jsx3(Background, { gap: 18 }),
+        !isPreview && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx3(Controls, { showInteractive: false, position: "bottom-right" }),
+          /* @__PURE__ */ jsx3(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: () => setUserCompact((c) => !c),
+              "aria-pressed": userCompact,
+              title: userCompact ? "Expand nodes" : "Collapse nodes",
+              className: "flex items-center gap-1 rounded-md border border-border bg-card/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur transition hover:text-foreground",
+              children: [
+                userCompact ? /* @__PURE__ */ jsx3(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx3(Minimize2, { size: 12 }),
+                userCompact ? "Expand" : "Compact"
+              ]
+            }
+          ) })
+        ] })
+      ]
+    }
+  ) }) }) });
+}
+export {
+  DensityContext,
+  DirectionContext,
+  WorkflowGraph,
+  WorkflowNode,
+  buildStyledEdges
+};