@tduniec/plugin-template-designer-foundation 0.1.1

package/dist/designerFlow/DesignerFlow.esm.js

@@ -0,0 +1,828 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useState, useCallback, useEffect, createElement } from 'react';
+import { useNodesState, applyNodeChanges, applyEdgeChanges, addEdge, ReactFlow } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { buildNodesFromModel, stableStringify, collectParameterReferences, collectStepOutputReferences, extractStepsFromNodes, extractParametersFromNodes, extractOutputFromNodes } from './model.esm.js';
+import { createSequentialEdges } from '../utils/createSequentialEdges.esm.js';
+import { buildNodeHashMap, buildEdgeHashMap, mergeNodesWithStability, mergeEdgesWithStability } from './utils/stableComparators.esm.js';
+import { createHandleReorderAndAlignNodes, createHandleUpdateField, createHandleUpdateInput, createHandleRemoveInputKey, createHandleUpdateOutput, createHandleUpdateSections, createHandleAddNode, createHandleRemoveNode } from './handlers.esm.js';
+import { resolveNodeHeightForTracking, alignNodes } from './nodeLayout.esm.js';
+import { nodeDefaults, FLOW_LAYOUT } from '../components/designerFlowConfig.esm.js';
+import { useScaffolderActions } from '../api/useScaffolderActions.esm.js';
+
+const EMPTY_EDGES = [];
+const EMIT_DEBOUNCE_MS = 1200;
+const VIEWPORT_TUNING = {
+  alignDebounceMs: 120,
+  // Debounce view/align updates so typing isn't interrupted by layout thrash.
+  centerDurationMs: 280,
+  fitFallbackDelayMs: 50
+};
+if (typeof window !== "undefined" && !window.__rfResizeObserverPatched) {
+  window.__rfResizeObserverPatched = true;
+  if (typeof window.ResizeObserver === "function") {
+    const OriginalResizeObserver = window.ResizeObserver;
+    window.ResizeObserver = class extends OriginalResizeObserver {
+      constructor(callback) {
+        super((entries, observer) => {
+          window.requestAnimationFrame(() => callback(entries, observer));
+        });
+      }
+    };
+  }
+  const shouldSwallow = (message) => typeof message === "string" && message.includes("ResizeObserver loop completed with undelivered");
+  const swallowResizeObserverError = (event) => {
+    const message = event?.message || event?.error?.message || String(event);
+    if (shouldSwallow(message)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return true;
+    }
+    return void 0;
+  };
+  const swallowResizeObserverRejection = (event) => {
+    const message = event.reason?.message ?? String(event.reason);
+    if (shouldSwallow(message)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return true;
+    }
+    return void 0;
+  };
+  const swallowLoopEvent = (event) => {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
+  const originalOnError = window.onerror;
+  window.onerror = function handleResizeObserverOnError(message, source, lineno, colno, error) {
+    if (shouldSwallow(
+      typeof message === "string" ? message : error?.message ?? String(message)
+    )) {
+      return true;
+    }
+    if (typeof originalOnError === "function") {
+      return originalOnError(message, source, lineno, colno, error);
+    }
+    return void 0;
+  };
+  const originalOnUnhandledRejection = window.onunhandledrejection;
+  window.onunhandledrejection = function handleResizeObserverOnUnhandled(event) {
+    const reason = event?.reason;
+    const message = reason?.message ?? (typeof reason === "string" ? reason : "");
+    if (shouldSwallow(message)) {
+      return true;
+    }
+    if (typeof originalOnUnhandledRejection === "function") {
+      return originalOnUnhandledRejection(event);
+    }
+    return void 0;
+  };
+  window.addEventListener("error", swallowResizeObserverError, true);
+  window.addEventListener(
+    "unhandledrejection",
+    swallowResizeObserverRejection,
+    true
+  );
+  window.addEventListener(
+    "resizeobserverlooperror",
+    swallowLoopEvent,
+    true
+  );
+}
+const shallowArrayEqual = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b || a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) {
+      return false;
+    }
+  }
+  return true;
+};
+const FIXED_X_POSITION = FLOW_LAYOUT.fixedXPosition;
+const VERTICAL_SPACING = FLOW_LAYOUT.verticalSpacing;
+function DesignerFlow({
+  steps = [],
+  parameters,
+  output,
+  onStepsChange,
+  onParametersChange,
+  onOutputChange,
+  actionNodeComponent,
+  parametersNodeComponent,
+  outputNodeComponent,
+  decorateNodes,
+  decorateEdges,
+  nodeDefaults: nodeDefaults$1 = nodeDefaults
+}) {
+  const nodeDataHashRef = useRef({});
+  const edgeDataHashRef = useRef({});
+  const scaffolderActionsCache = useScaffolderActions();
+  const {
+    ids: scaffolderActionIds,
+    inputsById: scaffolderActionInputsById,
+    outputsById: scaffolderActionOutputsById,
+    inputRequiredById: scaffolderActionInputRequiredById
+  } = scaffolderActionsCache;
+  const normalizedParametersProp = parameters ?? void 0;
+  const normalizedOutputProp = output ?? null;
+  const pendingFocusNodeIdRef = useRef(null);
+  const hasMountedRef = useRef(false);
+  const lastNodeCountRef = useRef(0);
+  const initialNodes = useMemo(() => {
+    const built = buildNodesFromModel(
+      steps,
+      normalizedParametersProp,
+      normalizedOutputProp,
+      {
+        scaffolderActionIds,
+        scaffolderActionInputsById,
+        scaffolderActionOutputsById,
+        scaffolderActionInputRequiredById
+      }
+    );
+    const nodes2 = decorateNodes ? decorateNodes(built) : built;
+    nodeDataHashRef.current = buildNodeHashMap(nodes2);
+    return nodes2;
+  }, [
+    steps,
+    normalizedParametersProp,
+    normalizedOutputProp,
+    scaffolderActionIds,
+    scaffolderActionInputsById,
+    scaffolderActionOutputsById,
+    scaffolderActionInputRequiredById,
+    decorateNodes
+  ]);
+  const [nodes, setNodes] = useNodesState(initialNodes);
+  const initialEdges = useMemo(() => {
+    const edges2 = decorateEdges ? decorateEdges(createSequentialEdges(initialNodes), initialNodes) : createSequentialEdges(initialNodes);
+    edgeDataHashRef.current = buildEdgeHashMap(edges2);
+    lastNodeCountRef.current = initialNodes.length;
+    return edges2;
+  }, [decorateEdges, initialNodes]);
+  const [edges, setEdges] = useState(initialEdges);
+  const modelHash = useMemo(
+    () => stableStringify({
+      steps,
+      parameters: normalizedParametersProp,
+      output: normalizedOutputProp
+    }),
+    [steps, normalizedParametersProp, normalizedOutputProp]
+  );
+  const cacheFingerprint = useMemo(
+    () => stableStringify({
+      ids: scaffolderActionIds,
+      inputs: scaffolderActionInputsById,
+      outputs: scaffolderActionOutputsById,
+      inputRequired: scaffolderActionInputRequiredById
+    }),
+    [
+      scaffolderActionIds,
+      scaffolderActionInputsById,
+      scaffolderActionOutputsById,
+      scaffolderActionInputRequiredById
+    ]
+  );
+  const lastAppliedModelHashRef = useRef(null);
+  const lastEmittedModelHashRef = useRef(null);
+  const lastCacheFingerprintRef = useRef(null);
+  const nodeHeightsRef = useRef({});
+  const lastViewportRef = useRef(null);
+  const emitDebounceRef = useRef(null);
+  const isDraggingRef = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const emitAfterDragRef = useRef(false);
+  const pendingInitialFitRef = useRef(true);
+  const userMovedViewportRef = useRef(false);
+  const layoutInitializedRef = useRef(false);
+  const [viewport, setViewport] = useState(() => {
+    const existing = lastViewportRef.current;
+    if (existing) {
+      return existing;
+    }
+    const fallback = { x: 0, y: 0, zoom: 1 };
+    lastViewportRef.current = fallback;
+    return fallback;
+  });
+  const fitViewRafRef = useRef(null);
+  const fitViewTimeoutRef = useRef(null);
+  const alignDebounceRef = useRef(null);
+  const setViewportIfChanged = useCallback((next) => {
+    if (!next) {
+      return;
+    }
+    const prev = lastViewportRef.current;
+    if (prev && prev.x === next.x && prev.y === next.y && prev.zoom === next.zoom) {
+      return;
+    }
+    lastViewportRef.current = next;
+    setViewport(next);
+  }, []);
+  useEffect(() => {
+    const isCacheChanged = cacheFingerprint !== lastCacheFingerprintRef.current;
+    if (modelHash === lastAppliedModelHashRef.current && !isCacheChanged) {
+      return;
+    }
+    const builtNodes = buildNodesFromModel(
+      steps,
+      normalizedParametersProp,
+      normalizedOutputProp,
+      {
+        scaffolderActionIds,
+        scaffolderActionInputsById,
+        scaffolderActionOutputsById,
+        scaffolderActionInputRequiredById
+      }
+    );
+    const nextNodes = decorateNodes ? decorateNodes(builtNodes) : builtNodes;
+    const isInitialMount = !hasMountedRef.current;
+    lastAppliedModelHashRef.current = modelHash;
+    lastCacheFingerprintRef.current = cacheFingerprint;
+    lastEmittedModelHashRef.current = modelHash;
+    setNodes((currentNodes) => {
+      const merged = mergeNodesWithStability(
+        currentNodes,
+        nextNodes,
+        nodeDataHashRef
+      );
+      return merged;
+    });
+    setEdges((currentEdges) => {
+      const newEdges = decorateEdges ? decorateEdges(createSequentialEdges(nextNodes), nextNodes) : createSequentialEdges(nextNodes);
+      const merged = mergeEdgesWithStability(
+        currentEdges,
+        newEdges,
+        edgeDataHashRef
+      );
+      return merged;
+    });
+    hasMountedRef.current = true;
+    lastNodeCountRef.current = nextNodes.length;
+    if (isInitialMount) {
+      pendingInitialFitRef.current = true;
+    }
+  }, [
+    steps,
+    normalizedParametersProp,
+    normalizedOutputProp,
+    modelHash,
+    cacheFingerprint,
+    scaffolderActionIds,
+    scaffolderActionInputsById,
+    scaffolderActionOutputsById,
+    scaffolderActionInputRequiredById,
+    decorateNodes,
+    decorateEdges,
+    setNodes,
+    setEdges
+  ]);
+  useEffect(() => {
+    if (!nodes.length) {
+      return;
+    }
+    if (nodes.some((node) => node.dragging)) {
+      return;
+    }
+    const activeNodeIds = /* @__PURE__ */ new Set();
+    let hasMeasuredChange = false;
+    nodes.forEach((node) => {
+      activeNodeIds.add(node.id);
+      const measuredHeight = resolveNodeHeightForTracking(node);
+      if (typeof measuredHeight !== "number") {
+        return;
+      }
+      const previousHeight = nodeHeightsRef.current[node.id];
+      const heightDelta = Math.abs(
+        (previousHeight ?? measuredHeight) - measuredHeight
+      );
+      if (heightDelta >= 1) {
+        nodeHeightsRef.current[node.id] = measuredHeight;
+        hasMeasuredChange = true;
+      }
+    });
+    Object.keys(nodeHeightsRef.current).forEach((id) => {
+      if (!activeNodeIds.has(id)) {
+        delete nodeHeightsRef.current[id];
+      }
+    });
+    if (!hasMeasuredChange) {
+      return;
+    }
+    if (!layoutInitializedRef.current) {
+      layoutInitializedRef.current = true;
+      return;
+    }
+    if (alignDebounceRef.current) {
+      clearTimeout(alignDebounceRef.current);
+    }
+    alignDebounceRef.current = setTimeout(() => {
+      alignDebounceRef.current = null;
+      setNodes((currentNodes) => {
+        const alignedNodes = alignNodes(
+          currentNodes,
+          FIXED_X_POSITION,
+          VERTICAL_SPACING
+        );
+        const positionsChanged = alignedNodes.some((node, index) => {
+          const previousNode = currentNodes[index];
+          if (!previousNode) {
+            return true;
+          }
+          return node.position.x !== previousNode.position.x || node.position.y !== previousNode.position.y;
+        });
+        return positionsChanged ? alignedNodes : currentNodes;
+      });
+    }, VIEWPORT_TUNING.alignDebounceMs);
+  }, [nodes, setNodes]);
+  const parameterReferences = useMemo(
+    () => collectParameterReferences(normalizedParametersProp),
+    [normalizedParametersProp]
+  );
+  const stepOutputReferencesByNode = useMemo(
+    () => collectStepOutputReferences(nodes, parameterReferences),
+    [nodes, parameterReferences]
+  );
+  const onNodesChange = useCallback(
+    (changes) => setNodes((ns) => {
+      if (changes.some(
+        (change) => change.type === "position" && change.dragging
+      )) {
+        isDraggingRef.current = true;
+        setIsDragging(true);
+      } else if (changes.some(
+        (change) => change.type === "position" && change.dragging === false
+      )) {
+        const stillDragging = ns.some((node) => node.dragging);
+        isDraggingRef.current = stillDragging;
+        setIsDragging(stillDragging);
+      }
+      return applyNodeChanges(changes, ns);
+    }),
+    [setNodes]
+  );
+  const onEdgesChange = useCallback(
+    (changes) => setEdges((es) => applyEdgeChanges(changes, es)),
+    [setEdges]
+  );
+  const resolvedNodeTypes = useMemo(
+    () => ({
+      parametersNode: ((props) => createElement(parametersNodeComponent, {
+        data: props.data
+      })),
+      actionNode: ((props) => createElement(actionNodeComponent, {
+        data: props.data
+      })),
+      outputNode: ((props) => createElement(outputNodeComponent, {
+        data: props.data
+      }))
+    }),
+    [actionNodeComponent, outputNodeComponent, parametersNodeComponent]
+  );
+  const onConnect = useCallback(
+    (params) => setEdges((es) => addEdge(params, es)),
+    [setEdges]
+  );
+  const reorderAndAlignNodes = useMemo(
+    () => createHandleReorderAndAlignNodes(setNodes, setEdges, {
+      fixedXPosition: FIXED_X_POSITION,
+      verticalSpacing: VERTICAL_SPACING
+    }),
+    [setNodes, setEdges]
+  );
+  const onNodeDragStop = useCallback(
+    (_, node) => {
+      isDraggingRef.current = false;
+      setIsDragging(false);
+      reorderAndAlignNodes(node);
+    },
+    [reorderAndAlignNodes]
+  );
+  const onUpdateField = useMemo(
+    () => createHandleUpdateField(setNodes),
+    [setNodes]
+  );
+  const onUpdateInput = useMemo(
+    () => createHandleUpdateInput(setNodes),
+    [setNodes]
+  );
+  const onRemoveInputKey = useMemo(
+    () => createHandleRemoveInputKey(setNodes),
+    [setNodes]
+  );
+  const onUpdateOutput = useMemo(
+    () => createHandleUpdateOutput(setNodes),
+    [setNodes]
+  );
+  const onUpdateSections = useMemo(
+    () => createHandleUpdateSections(setNodes),
+    [setNodes]
+  );
+  const handleAddNode = useMemo(
+    () => createHandleAddNode(setNodes, setEdges, {
+      fixedXPosition: FIXED_X_POSITION,
+      verticalSpacing: VERTICAL_SPACING,
+      nodeDefaults: nodeDefaults$1,
+      scaffolderActionIds,
+      scaffolderActionInputsById,
+      scaffolderActionInputRequiredById,
+      scaffolderActionOutputsById,
+      onNodeAdded: (rfId) => {
+        pendingFocusNodeIdRef.current = rfId;
+        pendingInitialFitRef.current = false;
+      }
+    }),
+    [
+      scaffolderActionIds,
+      scaffolderActionInputsById,
+      scaffolderActionOutputsById,
+      scaffolderActionInputRequiredById,
+      nodeDefaults$1,
+      setNodes,
+      setEdges
+    ]
+  );
+  const handleRemoveNode = useMemo(
+    () => createHandleRemoveNode(setNodes, setEdges, {
+      fixedXPosition: FIXED_X_POSITION,
+      verticalSpacing: VERTICAL_SPACING
+    }),
+    [setNodes, setEdges]
+  );
+  const emitChanges = useCallback(() => {
+    if (!onStepsChange && !onParametersChange && !onOutputChange) {
+      return;
+    }
+    const stepsFromNodes = extractStepsFromNodes(nodes);
+    const parametersFromNodes = extractParametersFromNodes(nodes);
+    const outputFromNodes = extractOutputFromNodes(nodes);
+    const nextHash = stableStringify({
+      steps: stepsFromNodes,
+      parameters: parametersFromNodes,
+      output: outputFromNodes
+    });
+    if (nextHash === lastEmittedModelHashRef.current) {
+      return;
+    }
+    lastEmittedModelHashRef.current = nextHash;
+    onStepsChange?.(stepsFromNodes);
+    onParametersChange?.(parametersFromNodes);
+    onOutputChange?.(outputFromNodes);
+  }, [
+    nodes,
+    onOutputChange,
+    onParametersChange,
+    onStepsChange,
+    lastEmittedModelHashRef
+  ]);
+  const emitChangesDeferred = useCallback(() => {
+    if (emitDebounceRef.current) {
+      clearTimeout(emitDebounceRef.current);
+    }
+    emitDebounceRef.current = setTimeout(() => {
+      emitChanges();
+      emitDebounceRef.current = null;
+    }, EMIT_DEBOUNCE_MS);
+  }, [emitChanges]);
+  const flushPendingEmit = useCallback(() => {
+    if (emitDebounceRef.current) {
+      clearTimeout(emitDebounceRef.current);
+      emitDebounceRef.current = null;
+    }
+    emitChanges();
+  }, [emitChanges]);
+  const ensureNodeDataStability = useCallback(
+    (node) => {
+      if (node.type === "actionNode") {
+        const data = node.data;
+        const nextRefs = stepOutputReferencesByNode[node.id] ?? data.stepOutputReferences;
+        const refsUnchanged = shallowArrayEqual(
+          data.stepOutputReferences,
+          nextRefs
+        );
+        const hasSameHandlers = data.onAddNode === handleAddNode && data.onRemoveNode === handleRemoveNode && data.onUpdateField === onUpdateField && data.onUpdateInput === onUpdateInput && data.onRemoveInputKey === onRemoveInputKey;
+        const hasSameCaches = data.scaffolderActionIds === scaffolderActionIds && data.scaffolderActionInputsById === scaffolderActionInputsById && data.scaffolderActionOutputsById === scaffolderActionOutputsById && data.scaffolderActionInputRequiredById === scaffolderActionInputRequiredById;
+        if (hasSameHandlers && hasSameCaches && refsUnchanged) {
+          return node;
+        }
+        return {
+          ...node,
+          data: {
+            ...data,
+            onAddNode: handleAddNode,
+            onRemoveNode: handleRemoveNode,
+            onUpdateField,
+            onUpdateInput,
+            onRemoveInputKey,
+            scaffolderActionIds,
+            scaffolderActionInputsById,
+            scaffolderActionOutputsById,
+            scaffolderActionInputRequiredById,
+            stepOutputReferences: refsUnchanged ? data.stepOutputReferences : nextRefs
+          }
+        };
+      }
+      if (node.type === "outputNode") {
+        const data = node.data;
+        const nextRefs = stepOutputReferencesByNode[node.id] ?? data.stepOutputReferences;
+        const refsUnchanged = shallowArrayEqual(
+          data.stepOutputReferences,
+          nextRefs
+        );
+        const hasSameHandlers = data.onUpdateOutput === onUpdateOutput && data.onRemoveNode === handleRemoveNode && data.onAddNode === handleAddNode;
+        const hasSameCaches = data.scaffolderActionIds === scaffolderActionIds && data.scaffolderActionInputsById === scaffolderActionInputsById && data.scaffolderActionOutputsById === scaffolderActionOutputsById && data.scaffolderActionInputRequiredById === scaffolderActionInputRequiredById;
+        if (hasSameHandlers && hasSameCaches && refsUnchanged) {
+          return node;
+        }
+        return {
+          ...node,
+          data: {
+            ...data,
+            onUpdateOutput,
+            onRemoveNode: handleRemoveNode,
+            onAddNode: handleAddNode,
+            scaffolderActionIds,
+            scaffolderActionInputsById,
+            scaffolderActionOutputsById,
+            scaffolderActionInputRequiredById,
+            stepOutputReferences: refsUnchanged ? data.stepOutputReferences : nextRefs
+          }
+        };
+      }
+      if (node.type === "parametersNode") {
+        const data = node.data;
+        const hasSameHandlers = data.onUpdateSections === onUpdateSections && data.onRemoveNode === handleRemoveNode && data.onAddNode === handleAddNode;
+        const hasSameCaches = data.scaffolderActionIds === scaffolderActionIds && data.scaffolderActionInputsById === scaffolderActionInputsById && data.scaffolderActionOutputsById === scaffolderActionOutputsById && data.scaffolderActionInputRequiredById === scaffolderActionInputRequiredById;
+        if (hasSameHandlers && hasSameCaches) {
+          return node;
+        }
+        return {
+          ...node,
+          data: {
+            ...data,
+            onUpdateSections,
+            onRemoveNode: handleRemoveNode,
+            onAddNode: handleAddNode,
+            scaffolderActionIds,
+            scaffolderActionInputsById,
+            scaffolderActionOutputsById,
+            scaffolderActionInputRequiredById
+          }
+        };
+      }
+      return node;
+    },
+    [
+      handleAddNode,
+      handleRemoveNode,
+      onUpdateField,
+      onUpdateInput,
+      onRemoveInputKey,
+      onUpdateOutput,
+      onUpdateSections,
+      scaffolderActionIds,
+      scaffolderActionInputsById,
+      scaffolderActionOutputsById,
+      scaffolderActionInputRequiredById,
+      stepOutputReferencesByNode
+    ]
+  );
+  useEffect(() => {
+    setNodes((currentNodes) => {
+      let changed = false;
+      const nextNodes = currentNodes.map((node) => {
+        const updated = ensureNodeDataStability(node);
+        if (updated !== node) {
+          changed = true;
+        }
+        return updated;
+      });
+      return changed ? nextNodes : currentNodes;
+    });
+  }, [ensureNodeDataStability, setNodes]);
+  useEffect(() => {
+    emitChangesDeferred();
+  }, [nodes, emitChangesDeferred]);
+  useEffect(() => {
+    lastEmittedModelHashRef.current = null;
+  }, [nodes]);
+  useEffect(() => {
+    if (!nodes.length) {
+      return;
+    }
+    emitChangesDeferred();
+  }, [emitChangesDeferred, modelHash, nodes]);
+  useEffect(() => {
+    return () => {
+      if (emitDebounceRef.current) {
+        clearTimeout(emitDebounceRef.current);
+      }
+      if (fitViewRafRef.current !== null) {
+        cancelAnimationFrame(fitViewRafRef.current);
+        fitViewRafRef.current = null;
+      }
+      if (fitViewTimeoutRef.current) {
+        clearTimeout(fitViewTimeoutRef.current);
+        fitViewTimeoutRef.current = null;
+      }
+      if (alignDebounceRef.current) {
+        clearTimeout(alignDebounceRef.current);
+      }
+      flushPendingEmit();
+    };
+  }, [flushPendingEmit]);
+  const [reactFlowInstance, setReactFlowInstance] = useState(null);
+  const fitFlowToView = useCallback(() => {
+    if (!reactFlowInstance || !nodes.length) {
+      return;
+    }
+    if (fitViewRafRef.current !== null) {
+      return;
+    }
+    if (userMovedViewportRef.current && !pendingInitialFitRef.current) {
+      return;
+    }
+    const nodeWithWidth = nodes.find((node) => node.width);
+    const nodeWidth = nodeWithWidth?.width ?? 760;
+    const padding = Math.max((window.innerWidth - nodeWidth) / 2 - 24, 60);
+    const viewOptions = {
+      padding,
+      minZoom: 0.2
+    };
+    fitViewRafRef.current = window.requestAnimationFrame(() => {
+      fitViewRafRef.current = null;
+      try {
+        reactFlowInstance.fitView(viewOptions);
+        setViewportIfChanged(reactFlowInstance.getViewport());
+      } catch {
+      }
+    });
+    if (fitViewTimeoutRef.current) {
+      clearTimeout(fitViewTimeoutRef.current);
+    }
+    fitViewTimeoutRef.current = setTimeout(() => {
+      fitViewTimeoutRef.current = null;
+      try {
+        reactFlowInstance.fitView(viewOptions);
+        setViewportIfChanged(reactFlowInstance.getViewport());
+      } catch {
+      }
+    }, VIEWPORT_TUNING.fitFallbackDelayMs);
+  }, [nodes, reactFlowInstance, setViewportIfChanged]);
+  useEffect(() => {
+    if (!reactFlowInstance) {
+      return;
+    }
+    if (viewport === null) {
+      setViewportIfChanged(viewport);
+    }
+    if (!pendingInitialFitRef.current) {
+      return;
+    }
+    pendingInitialFitRef.current = false;
+    fitFlowToView();
+  }, [
+    fitFlowToView,
+    nodes,
+    edges,
+    reactFlowInstance,
+    viewport,
+    setViewportIfChanged
+  ]);
+  useEffect(() => {
+    const swallowResizeObserverError = (event) => {
+      const message = event?.message || event?.error?.message || String(event);
+      if (typeof message === "string" && message.includes("ResizeObserver loop")) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    const swallowResizeObserverRejection = (event) => {
+      const message = event.reason?.message ?? String(event.reason);
+      if (typeof message === "string" && message.includes("ResizeObserver loop")) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+    window.addEventListener("error", swallowResizeObserverError, true);
+    window.addEventListener(
+      "unhandledrejection",
+      swallowResizeObserverRejection,
+      true
+    );
+    const swallowLoopErrorEvent = (event) => {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    };
+    window.addEventListener(
+      "resizeobserverlooperror",
+      swallowLoopErrorEvent,
+      true
+    );
+    return () => {
+      window.removeEventListener("error", swallowResizeObserverError, true);
+      window.removeEventListener(
+        "unhandledrejection",
+        swallowResizeObserverRejection,
+        true
+      );
+      window.removeEventListener(
+        "resizeobserverlooperror",
+        swallowLoopErrorEvent,
+        true
+      );
+    };
+  }, []);
+  useEffect(() => {
+    if (!reactFlowInstance) {
+      return void 0;
+    }
+    window.addEventListener("resize", fitFlowToView);
+    return () => {
+      window.removeEventListener("resize", fitFlowToView);
+    };
+  }, [fitFlowToView, reactFlowInstance]);
+  useEffect(() => {
+    if (!isDragging) {
+      if (emitAfterDragRef.current) {
+        emitAfterDragRef.current = false;
+        lastEmittedModelHashRef.current = null;
+      }
+      lastEmittedModelHashRef.current = null;
+    }
+  }, [isDragging]);
+  const handleMoveEnd = useCallback(
+    (_event, nextViewport) => {
+      setViewportIfChanged(nextViewport);
+    },
+    [setViewportIfChanged]
+  );
+  const handleMove = useCallback(
+    (_, nextViewport) => {
+      userMovedViewportRef.current = true;
+      setViewportIfChanged(nextViewport);
+    },
+    [setViewportIfChanged]
+  );
+  const shouldCullEdges = edges.length > 300 && (viewport?.zoom ?? 1) < 0.3 && !isDragging;
+  const renderedEdges = useMemo(
+    () => shouldCullEdges ? EMPTY_EDGES : edges,
+    [edges, shouldCullEdges]
+  );
+  useEffect(() => {
+    if (!reactFlowInstance) {
+      return;
+    }
+    const pendingId = pendingFocusNodeIdRef.current;
+    if (!pendingId) {
+      return;
+    }
+    const target = nodes.find((node) => node.id === pendingId);
+    if (!target) {
+      return;
+    }
+    pendingFocusNodeIdRef.current = null;
+    const nodeCenterX = target.position.x + (target.width ?? 0) / 2;
+    const nodeCenterY = target.position.y + (target.height ?? 0) / 2;
+    const zoom = viewport?.zoom ?? lastViewportRef.current?.zoom ?? void 0;
+    try {
+      reactFlowInstance.setCenter(nodeCenterX, nodeCenterY, {
+        zoom,
+        duration: VIEWPORT_TUNING.centerDurationMs
+      });
+      window.requestAnimationFrame(() => {
+        setViewportIfChanged(reactFlowInstance.getViewport());
+      });
+    } catch {
+    }
+  }, [nodes, reactFlowInstance, viewport, setViewportIfChanged]);
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", height: "100%", minHeight: "100%" }, children: /* @__PURE__ */ jsx(
+    ReactFlow,
+    {
+      nodes,
+      edges: renderedEdges,
+      nodeTypes: resolvedNodeTypes,
+      defaultViewport: viewport ?? {
+        x: 0,
+        y: 0,
+        zoom: 1
+      },
+      viewport: viewport ?? void 0,
+      onNodesChange,
+      onEdgesChange,
+      onNodeDragStop,
+      onConnect,
+      onMove: handleMove,
+      onlyRenderVisibleElements: true,
+      onInit: setReactFlowInstance,
+      onMoveEnd: handleMoveEnd
+    }
+  ) });
+}
+
+export { DesignerFlow as default };
+//# sourceMappingURL=DesignerFlow.esm.js.map