@burdenoff/fluidgrids-fe-sdk 2026.1105.2 → 2026.1105.4

package/dist/workflow-preview.js

@@ -0,0 +1,721 @@
+import { canvasFromDefinition } from './chunk-6VIG44VF.js';
+import { LogicNodeCard, NodeCard, NodeCardHeader, NodeCardBody, InputHandles, OutputHandles, STICKY_NOTE_TYPE, outputHandlesSpacerHeight, isNodeTrigger, resolveOutputHandles, resolveInputHandles, resolveOperationName, WAIT_FOR_SIGNAL_NODE_TYPE, CODE_WORKFLOW_NODE_TYPE, readSignalName } from './chunk-TGWDFLEX.js';
+import './chunk-Y7FKJJMF.js';
+import { useTr } from './chunk-UULVIT25.js';
+import { memo, useMemo, useState, useCallback, useSyncExternalStore, useRef, useEffect } from 'react';
+import { getBezierPath, ReactFlowProvider, MarkerType, ReactFlow, Background, useReactFlow, useStore } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { cn } from '@burdenoff/fe-libs/utils';
+import { nodeCategoryColor } from '@burdenoff/fe-libs/shared/utils';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var PREVIEW_NODE_TYPE = "preview";
+var PREVIEW_EDGE_TYPE = "preview";
+var LOGIC_TYPE_PATTERN = /(^|[:/])(if|switch|merge|loop|filter|branch|router|condition|aggregate)/;
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function text(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : void 0;
+}
+function finite(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function humanizeNodeType(nodeType) {
+  const last = nodeType.split(/[:/]/).filter(Boolean).pop() ?? nodeType;
+  const words = last.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[\s_\-.]+/).filter(Boolean);
+  if (words.length === 0) return nodeType;
+  return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+var FALLBACK_ICONS = [
+  [/schedule|cron|timer/, "mdi:clock-outline"],
+  [/webhook/, "mdi:webhook"],
+  [/form/, "mdi:form-select"],
+  [/mcp/, "mdi:server-network"],
+  [/(^|[:/])api($|[:/_-])|manual/, "mdi:play-circle-outline"],
+  [/(^|[:/])if($|[:/_-])|condition|branch|router/, "mdi:call-split"],
+  [/switch/, "mdi:source-branch"],
+  [/merge/, "mdi:call-merge"],
+  [/loop|iterate|each/, "mdi:repeat"],
+  [/filter/, "mdi:filter-outline"],
+  [/aggregate/, "mdi:sigma"],
+  [/wait|delay|sleep|signal/, "mdi:timer-sand"],
+  [/code|script|function|javascript|python/, "mdi:code-braces"],
+  [/http|rest|graphql|request/, "mdi:web"],
+  [/gmail|email|mail|smtp/, "mdi:email-outline"],
+  [/slack/, "mdi:slack"],
+  [/github/, "mdi:github"],
+  [/sheet|excel|csv/, "mdi:table"],
+  [/db|sql|postgres|mysql|mongo|table/, "mdi:database-outline"],
+  [/ai|llm|gpt|openai|anthropic|claude|agent/, "mdi:robot-outline"],
+  [/notify|notification|message|chat|sms/, "mdi:message-outline"]
+];
+var FALLBACK_NODE_ICON = "mynaui:puzzle";
+function fallbackNodeIcon(nodeType) {
+  const key = nodeType.toLowerCase();
+  for (const [pattern, icon] of FALLBACK_ICONS) {
+    if (pattern.test(key)) return icon;
+  }
+  return FALLBACK_NODE_ICON;
+}
+function cardData(raw) {
+  const root = raw;
+  const data = isRecord(raw.data) ? raw.data : {};
+  const merged = {};
+  for (const key of ["operation_name", "operation_type", "args", "version"]) {
+    if (root[key] !== void 0) merged[key] = root[key];
+  }
+  return { ...merged, ...data };
+}
+function logicSubtitle(nodeType, data) {
+  const args = isRecord(data.args) ? data.args : void 0;
+  const state = isRecord(args?.state) ? args.state : void 0;
+  if (nodeType === WAIT_FOR_SIGNAL_NODE_TYPE) return readSignalName(state);
+  const rules = state?.rules;
+  if (Array.isArray(rules))
+    return `${rules.length} rule${rules.length === 1 ? "" : "s"}`;
+  return text(state?.mode);
+}
+function previewCardModel(raw, resolveMeta) {
+  const data = cardData(raw);
+  const nodeType = text(raw.type) ?? text(data.nodeType) ?? "";
+  const manifest = isRecord(data.nodeData) ? data.nodeData : {};
+  const resolved = nodeType ? resolveMeta?.(nodeType) : void 0;
+  const appName = text(resolved?.title) ?? text(manifest.name) ?? (nodeType ? humanizeNodeType(nodeType) : "");
+  const icon = text(resolved?.icon) ?? text(manifest.icon) ?? (nodeType ? fallbackNodeIcon(nodeType) : FALLBACK_NODE_ICON);
+  const description = text(manifest.description) ?? text(resolved?.description) ?? "";
+  const label = text(data.label);
+  const trigger = isNodeTrigger({ type: nodeType, data });
+  const lowerType = nodeType.toLowerCase();
+  const isLogicType = LOGIC_TYPE_PATTERN.test(lowerType);
+  const accent = nodeCategoryColor(
+    trigger ? "trigger" : isLogicType ? "logic" : "action"
+  );
+  const outputHandles = resolveOutputHandles(data, nodeType);
+  const inputHandles = resolveInputHandles(data);
+  const kind = manifest.kind;
+  const isWaitForSignal = nodeType === WAIT_FOR_SIGNAL_NODE_TYPE;
+  const isCodeWorkflow = nodeType === CODE_WORKFLOW_NODE_TYPE;
+  const isControlFlow = isWaitForSignal || !isCodeWorkflow && nodeType.startsWith("internal:") && (Array.isArray(kind) ? kind.includes("control") : isLogicType);
+  const operationName = resolveOperationName(data.operation_name, "");
+  const showsDescriptionOnly = isCodeWorkflow || operationName === "execute" && nodeType.startsWith("internal:") || trigger && !operationName;
+  return {
+    variant: isControlFlow ? "logic" : "app",
+    nodeType,
+    title: label ?? appName,
+    appName,
+    icon,
+    operation: showsDescriptionOnly ? null : operationName || null,
+    description,
+    subtitle: isControlFlow ? logicSubtitle(nodeType, data) : void 0,
+    trigger,
+    disabled: data.disabled === true,
+    accent,
+    accentKey: nodeType || appName,
+    inputHandles,
+    outputHandles,
+    handleSpacer: outputHandlesSpacerHeight(
+      Math.max(outputHandles.length, inputHandles.length)
+    )
+  };
+}
+function branchTone(id) {
+  const key = id.toLowerCase();
+  if (key === "true" || key === "success" || key === "approved")
+    return "success";
+  if (key === "false" || key === "done") return "neutral";
+  if (key === "error" || key === "failed" || key === "declined") return "error";
+  return void 0;
+}
+function withEdgeSourceHandles(card, edgeHandleIds) {
+  const known = new Set(card.outputHandles.map((handle) => handle.id));
+  const missing = [...new Set(edgeHandleIds)].filter((id) => !known.has(id));
+  if (missing.length === 0) return card;
+  const isDefault = card.outputHandles.length === 1 && card.outputHandles[0]?.label === "";
+  const named = missing.map((id) => ({
+    id,
+    label: id,
+    tone: branchTone(id)
+  }));
+  if (isDefault && named.length === 1)
+    return { ...card, outputHandles: [{ id: named[0].id, label: "" }] };
+  const outputHandles = isDefault ? named : [...card.outputHandles, ...named];
+  return {
+    ...card,
+    outputHandles,
+    handleSpacer: outputHandlesSpacerHeight(
+      Math.max(outputHandles.length, card.inputHandles.length)
+    )
+  };
+}
+function previewCanvasFromDefinition(definitionJson, resolveMeta) {
+  const canvas = canvasFromDefinition(definitionJson);
+  if (!canvas) return null;
+  const steps = canvas.nodes.filter((node) => node.type !== STICKY_NOTE_TYPE);
+  const ids = new Set(steps.map((node) => node.id));
+  const rawEdges = canvas.edges.filter(
+    (edge) => ids.has(edge.source) && ids.has(edge.target)
+  );
+  const sourceHandles = /* @__PURE__ */ new Map();
+  for (const edge of rawEdges) {
+    if (!edge.sourceHandle) continue;
+    const list = sourceHandles.get(edge.source) ?? [];
+    list.push(edge.sourceHandle);
+    sourceHandles.set(edge.source, list);
+  }
+  const cards = /* @__PURE__ */ new Map();
+  const nodes = steps.map((raw) => {
+    const card = withEdgeSourceHandles(
+      previewCardModel(raw, resolveMeta),
+      sourceHandles.get(raw.id) ?? []
+    );
+    cards.set(raw.id, card);
+    const position = isRecord(raw.position) ? raw.position : {};
+    return {
+      id: raw.id,
+      type: PREVIEW_NODE_TYPE,
+      position: {
+        x: finite(position.x),
+        y: finite(position.y)
+      },
+      data: { card },
+      draggable: false,
+      connectable: false,
+      selectable: false,
+      deletable: false
+    };
+  });
+  const edges = rawEdges.map((edge) => {
+    const sourceCard = cards.get(edge.source);
+    const targetCard = cards.get(edge.target);
+    const targetHandle = edge.targetHandle && targetCard?.inputHandles.some((h) => h.id === edge.targetHandle) ? edge.targetHandle : targetCard?.inputHandles[0]?.id ?? null;
+    const sourceHandle = edge.sourceHandle ?? sourceCard?.outputHandles[0]?.id ?? null;
+    return {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      sourceHandle,
+      targetHandle,
+      type: PREVIEW_EDGE_TYPE,
+      selectable: false,
+      deletable: false,
+      focusable: false
+    };
+  });
+  return { nodes, edges };
+}
+function previewRevealOrder(nodes, shown = /* @__PURE__ */ new Set()) {
+  return nodes.filter((node) => !shown.has(node.id)).slice().sort(
+    (left, right) => left.position.x - right.position.x || left.position.y - right.position.y
+  ).map((node) => node.id);
+}
+function edgesBetweenVisible(edges, visible) {
+  return edges.filter(
+    (edge) => visible.has(edge.source) && visible.has(edge.target)
+  );
+}
+function newestNodeId(previous, next, order, current) {
+  let added = null;
+  for (const id of order) {
+    if (next.has(id) && !previous.has(id)) added = id;
+  }
+  if (added) return added;
+  return current && next.has(current) ? current : null;
+}
+function applyMeasurements(current, changes) {
+  let next = null;
+  for (const change of changes) {
+    if (change.type !== "dimensions" || !change.dimensions) continue;
+    const before = (next ?? current).get(change.id);
+    const { width, height } = change.dimensions;
+    if (before?.width === width && before.height === height) continue;
+    next ??= new Map(current);
+    next.set(change.id, { width, height });
+  }
+  return next ?? current;
+}
+
+// src/builder/preview/preview-styles.ts
+var PREFIX = "fgp";
+var PREVIEW_CLASS = {
+  root: `${PREFIX}-root`,
+  node: `${PREFIX}-node`,
+  ring: `${PREFIX}-ring`,
+  edgeTrack: `${PREFIX}-edge-track`,
+  edgeArrow: `${PREFIX}-edge-arrow`,
+  edgeFlow: `${PREFIX}-edge-flow`,
+  edgeDot: `${PREFIX}-edge-dot`
+};
+var NODE_ENTER_MS = 260;
+var EDGE_DRAW_MS = 360;
+var EDGE_DRAW_DELAY_MS = 90;
+var CAMERA_MS = 350;
+var C = PREVIEW_CLASS;
+var PREVIEW_STYLES = `
+.${C.node} {
+  position: relative;
+  transform-origin: 50% 50%;
+  animation: ${PREFIX}-pop ${NODE_ENTER_MS}ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
+}
+@keyframes ${PREFIX}-pop {
+  from { opacity: 0; transform: scale(0.82) translateY(6px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+.${C.ring} {
+  position: absolute;
+  inset: -6px;
+  border-radius: 18px;
+  pointer-events: none;
+  opacity: 0;
+  box-shadow:
+    0 0 0 2px var(--fgp-accent),
+    0 0 18px 4px color-mix(in srgb, var(--fgp-accent) 35%, transparent);
+  transition: opacity 600ms ease-out;
+}
+.${C.node}[data-fresh="true"] > .${C.ring} {
+  opacity: 1;
+  transition: opacity 120ms ease-out;
+  animation: ${PREFIX}-ring-in 700ms ease-out both;
+}
+@keyframes ${PREFIX}-ring-in {
+  0% { box-shadow: 0 0 0 0 var(--fgp-accent), 0 0 0 0 color-mix(in srgb, var(--fgp-accent) 55%, transparent); }
+  45% { box-shadow: 0 0 0 3px var(--fgp-accent), 0 0 0 12px color-mix(in srgb, var(--fgp-accent) 0%, transparent); }
+  100% { box-shadow: 0 0 0 2px var(--fgp-accent), 0 0 18px 4px color-mix(in srgb, var(--fgp-accent) 35%, transparent); }
+}
+.${C.node}[data-pulse="true"] > .${C.ring} {
+  opacity: 1;
+  animation: ${PREFIX}-pulse 1400ms ease-in-out infinite;
+}
+@keyframes ${PREFIX}-pulse {
+  0%, 100% { box-shadow: 0 0 0 2px var(--fgp-accent), 0 0 10px 2px color-mix(in srgb, var(--fgp-accent) 25%, transparent); }
+  50% { box-shadow: 0 0 0 2px var(--fgp-accent), 0 0 24px 8px color-mix(in srgb, var(--fgp-accent) 45%, transparent); }
+}
+.${C.edgeTrack} {
+  fill: none;
+  stroke: var(--fgp-accent);
+  stroke-width: 2;
+  stroke-opacity: 0.6;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 0;
+  animation: ${PREFIX}-draw ${EDGE_DRAW_MS}ms cubic-bezier(0.4, 0, 0.2, 1) ${EDGE_DRAW_DELAY_MS}ms both;
+}
+@keyframes ${PREFIX}-draw {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+.${C.edgeArrow} {
+  animation: ${PREFIX}-fade 180ms ease-out ${EDGE_DRAW_DELAY_MS + EDGE_DRAW_MS - 80}ms both;
+}
+@keyframes ${PREFIX}-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+.${C.edgeFlow} {
+  fill: none;
+  stroke: var(--fgp-accent);
+  stroke-width: 2;
+  stroke-dasharray: 6 8;
+  pointer-events: none;
+  animation:
+    ${PREFIX}-fade 200ms ease-out both,
+    ${PREFIX}-march 550ms linear infinite;
+}
+@keyframes ${PREFIX}-march {
+  from { stroke-dashoffset: 0; }
+  to { stroke-dashoffset: -14; }
+}
+.${C.edgeDot} {
+  fill: var(--fgp-accent);
+  pointer-events: none;
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fgp-accent) 60%, transparent));
+}
+@media (prefers-reduced-motion: reduce) {
+  .${C.node},
+  .${C.node} > .${C.ring},
+  .${C.edgeTrack},
+  .${C.edgeArrow},
+  .${C.edgeFlow} {
+    animation: none !important;
+    transition: none !important;
+  }
+  .${C.edgeDot} { display: none; }
+}
+`;
+function noop() {
+}
+function CardBody({ id, card }) {
+  const tr = useTr();
+  const fallbackName = tr("fluidgrids.builder.nodeCard.defaultAppName", "Node");
+  const title = card.title || fallbackName;
+  if (card.variant === "logic") {
+    return /* @__PURE__ */ jsx(
+      LogicNodeCard,
+      {
+        nodeId: id,
+        title,
+        subtitle: card.subtitle,
+        icon: card.icon,
+        accent: card.accent,
+        selected: false,
+        executionStatus: "idle",
+        isTrigger: card.trigger,
+        isExecuting: false,
+        inputHandles: card.inputHandles,
+        outputHandles: card.outputHandles,
+        isConnectable: false,
+        onDoubleClick: noop,
+        disabled: card.disabled
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    NodeCard,
+    {
+      isTrigger: card.trigger,
+      accent: card.accent,
+      disabled: card.disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          NodeCardHeader,
+          {
+            icon: card.icon,
+            appName: card.appName || fallbackName,
+            accentKey: card.accentKey,
+            label: title
+          }
+        ),
+        card.operation ? /* @__PURE__ */ jsx(
+          NodeCardBody,
+          {
+            operationName: card.operation,
+            description: card.description
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "rounded-b-xl border-t border-border/60 px-3 pb-3 pt-2.5", children: /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-xs leading-snug text-muted-foreground", children: card.description }) }),
+        card.handleSpacer > 0 && /* @__PURE__ */ jsx("div", { style: { height: card.handleSpacer } }),
+        !card.trigger && /* @__PURE__ */ jsx(
+          InputHandles,
+          {
+            nodeId: id,
+            handles: card.inputHandles,
+            accent: card.accent,
+            isConnectable: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OutputHandles,
+          {
+            nodeId: id,
+            handles: card.outputHandles,
+            accent: card.accent,
+            isConnectable: false
+          }
+        )
+      ]
+    }
+  );
+}
+function PreviewNodeComponent({ id, data }) {
+  const { card, fresh, pulse } = data;
+  const style = { "--fgp-accent": card.accent };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: PREVIEW_CLASS.node,
+      "data-fresh": fresh ? "true" : "false",
+      "data-pulse": pulse ? "true" : "false",
+      "data-node-type": card.nodeType,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: PREVIEW_CLASS.ring }),
+        /* @__PURE__ */ jsx(CardBody, { id, card })
+      ]
+    }
+  );
+}
+var PreviewNode = memo(PreviewNodeComponent);
+var DOT_TRAVEL_S = 1.6;
+function PreviewEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  data
+}) {
+  const [path] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const accent = data?.accent ?? "var(--color-edge-default)";
+  const style = { "--fgp-accent": accent };
+  return /* @__PURE__ */ jsxs("g", { style, "data-testid": `workflow-preview-edge-${id}`, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        id,
+        d: path,
+        pathLength: 1,
+        className: PREVIEW_CLASS.edgeTrack
+      }
+    ),
+    /* @__PURE__ */ jsx("g", { className: PREVIEW_CLASS.edgeArrow, children: /* @__PURE__ */ jsx("path", { d: path, fill: "none", stroke: "transparent", markerEnd }) }),
+    data?.running && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: path, className: PREVIEW_CLASS.edgeFlow }),
+      !data.reducedMotion && /* @__PURE__ */ jsx("circle", { r: 3.5, className: PREVIEW_CLASS.edgeDot, children: /* @__PURE__ */ jsx(
+        "animateMotion",
+        {
+          dur: `${DOT_TRAVEL_S}s`,
+          repeatCount: "indefinite",
+          path
+        }
+      ) })
+    ] })
+  ] });
+}
+var PreviewEdge = memo(PreviewEdgeComponent);
+var QUERY = "(prefers-reduced-motion: reduce)";
+function mediaQuery() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
+}
+function subscribe(onChange) {
+  const query = mediaQuery();
+  if (!query) return () => {
+  };
+  query.addEventListener("change", onChange);
+  return () => query.removeEventListener("change", onChange);
+}
+function snapshot() {
+  return mediaQuery()?.matches ?? false;
+}
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(subscribe, snapshot, () => false);
+}
+var NODE_TYPES = { [PREVIEW_NODE_TYPE]: PreviewNode };
+var EDGE_TYPES = { [PREVIEW_EDGE_TYPE]: PreviewEdge };
+var MIN_ZOOM = 0.1;
+var DEFAULT_MAX_ZOOM = 1.5;
+var DEFAULT_PADDING = 0.25;
+var KEY_SEPARATOR = "\0";
+function idsKey(ids) {
+  return [...new Set(ids)].sort().join(KEY_SEPARATOR);
+}
+function idsFromKey(key) {
+  return new Set(key.split(KEY_SEPARATOR).filter(Boolean));
+}
+function CameraFollow({
+  visibleIds,
+  visibleKey,
+  padding,
+  maxZoom,
+  reducedMotion
+}) {
+  const { fitView } = useReactFlow();
+  const initialized = useStore(
+    (state) => visibleIds.every((id) => {
+      const node = state.nodeLookup.get(id);
+      return node?.measured.width !== void 0 && node.measured.height !== void 0 && node.internals.handleBounds !== void 0;
+    })
+  );
+  const fittedKey = useRef(null);
+  useEffect(() => {
+    if (!initialized || visibleIds.length === 0) return;
+    if (fittedKey.current === visibleKey) return;
+    const duration = reducedMotion || fittedKey.current === null ? 0 : CAMERA_MS;
+    const frame = requestAnimationFrame(() => {
+      fittedKey.current = visibleKey;
+      void fitView({
+        nodes: visibleIds.map((id) => ({ id })),
+        padding,
+        maxZoom,
+        minZoom: MIN_ZOOM,
+        duration
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    initialized,
+    visibleIds,
+    visibleKey,
+    padding,
+    maxZoom,
+    reducedMotion,
+    fitView
+  ]);
+  return null;
+}
+function PreviewFlow({
+  model,
+  visibleNodeIds,
+  freshNodeIds,
+  running,
+  maxZoom,
+  fitPadding,
+  ariaLabel
+}) {
+  const reducedMotion = usePrefersReducedMotion();
+  const order = useMemo(() => previewRevealOrder(model.nodes), [model]);
+  const visible = useMemo(() => {
+    const known = new Set(order);
+    if (!visibleNodeIds) return known;
+    return new Set([...visibleNodeIds].filter((id) => known.has(id)));
+  }, [order, visibleNodeIds]);
+  const visibleKey = idsKey(visible);
+  const visibleIds = useMemo(
+    () => order.filter((id) => visible.has(id)),
+    [order, visible]
+  );
+  const [track, setTrack] = useState(() => ({
+    key: visibleKey,
+    visible,
+    newest: newestNodeId(/* @__PURE__ */ new Set(), visible, order, null)
+  }));
+  if (track.key !== visibleKey) {
+    setTrack({
+      key: visibleKey,
+      visible,
+      newest: newestNodeId(track.visible, visible, order, track.newest)
+    });
+  }
+  const newest = track.key === visibleKey ? track.newest : null;
+  const [measured, setMeasured] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const onNodesChange = useCallback(
+    (changes) => {
+      setMeasured((current) => applyMeasurements(current, changes));
+    },
+    []
+  );
+  const nodes = useMemo(
+    () => model.nodes.filter((node) => visible.has(node.id)).map((node) => ({
+      ...node,
+      measured: measured.get(node.id),
+      data: {
+        card: node.data.card,
+        fresh: freshNodeIds.has(node.id),
+        pulse: running && node.id === newest
+      }
+    })),
+    [model, visible, measured, freshNodeIds, running, newest]
+  );
+  const accents = useMemo(
+    () => new Map(model.nodes.map((node) => [node.id, node.data.card.accent])),
+    [model]
+  );
+  const edges = useMemo(
+    () => edgesBetweenVisible(model.edges, visible).map((edge) => ({
+      ...edge,
+      type: "preview",
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        width: 18,
+        height: 18,
+        color: "var(--color-edge-default)"
+      },
+      data: {
+        accent: accents.get(edge.source) ?? "var(--color-edge-default)",
+        running,
+        reducedMotion
+      }
+    })),
+    [model, visible, accents, running, reducedMotion]
+  );
+  return /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      "aria-label": ariaLabel,
+      nodes,
+      onNodesChange,
+      edges,
+      nodeTypes: NODE_TYPES,
+      edgeTypes: EDGE_TYPES,
+      nodesDraggable: false,
+      nodesConnectable: false,
+      nodesFocusable: false,
+      edgesFocusable: false,
+      elementsSelectable: false,
+      zoomOnDoubleClick: false,
+      deleteKeyCode: null,
+      selectionKeyCode: null,
+      multiSelectionKeyCode: null,
+      minZoom: MIN_ZOOM,
+      maxZoom,
+      fitView: true,
+      fitViewOptions: { padding: fitPadding, maxZoom },
+      proOptions: { hideAttribution: true },
+      style: { background: "var(--color-canvas-bg)" },
+      children: [
+        /* @__PURE__ */ jsx(Background, { gap: 24, color: "var(--color-canvas-grid)" }),
+        /* @__PURE__ */ jsx(
+          CameraFollow,
+          {
+            visibleIds,
+            visibleKey,
+            padding: fitPadding,
+            maxZoom,
+            reducedMotion
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkflowPreviewCanvasComponent({
+  definition,
+  visibleNodeIds,
+  freshNodeIds,
+  running = false,
+  resolveNodeMeta,
+  maxZoom = DEFAULT_MAX_ZOOM,
+  fitPadding = DEFAULT_PADDING,
+  emptyState = null,
+  ariaLabel,
+  className,
+  style
+}) {
+  const model = useMemo(
+    () => previewCanvasFromDefinition(definition, resolveNodeMeta),
+    [definition, resolveNodeMeta]
+  );
+  const visibleKey = visibleNodeIds ? idsKey(visibleNodeIds) : null;
+  const freshKey = idsKey(freshNodeIds ?? []);
+  const stableVisible = useMemo(
+    () => visibleKey === null ? null : idsFromKey(visibleKey),
+    [visibleKey]
+  );
+  const stableFresh = useMemo(() => idsFromKey(freshKey), [freshKey]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(PREVIEW_CLASS.root, "relative h-full w-full", className),
+      style,
+      "data-testid": "workflow-preview-canvas",
+      "data-running": running ? "true" : "false",
+      children: [
+        /* @__PURE__ */ jsx("style", { children: PREVIEW_STYLES }),
+        model ? /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+          PreviewFlow,
+          {
+            model,
+            visibleNodeIds: stableVisible,
+            freshNodeIds: stableFresh,
+            running,
+            maxZoom,
+            fitPadding,
+            ariaLabel
+          }
+        ) }) : emptyState
+      ]
+    }
+  );
+}
+var WorkflowPreviewCanvas = memo(WorkflowPreviewCanvasComponent);
+
+export { CAMERA_MS as WORKFLOW_PREVIEW_CAMERA_MS, EDGE_DRAW_MS as WORKFLOW_PREVIEW_EDGE_DRAW_MS, NODE_ENTER_MS as WORKFLOW_PREVIEW_NODE_ENTER_MS, WorkflowPreviewCanvas, edgesBetweenVisible, fallbackNodeIcon, humanizeNodeType, newestNodeId, previewCanvasFromDefinition, previewCardModel, previewRevealOrder };