@k-4u/resource-mapper-core 0.0.1

package/.svelte-kit/output/server/entries/pages/_page.svelte.js

@@ -0,0 +1,3991 @@
+import { a4 as hasContext, a3 as getContext, Z as setContext, a5 as attributes, a6 as clsx, a7 as stringify, $ as escape_html, a0 as attr, a8 as attr_class, a9 as attr_style, aa as derived, ab as bind_props, ac as ensure_array_like, ad as spread_props, ae as css_props, _ as store_get, a1 as unsubscribe_stores, a2 as head } from "../../chunks/index2.js";
+import { o as onDestroy, c as calculateEdgeOffset, r as routingStore, t as theme, I as Icon, g as goto, i as invalidateAll } from "../../chunks/LoadingOverlay.svelte_svelte_type_style_lang.js";
+import { E as ErrorDisplay } from "../../chunks/ErrorDisplay.js";
+import "@sveltejs/kit/internal";
+import "../../chunks/exports.js";
+import "../../chunks/utils.js";
+import "@sveltejs/kit/internal/server";
+import { Position, ConnectionMode, isEdgeBase, isNodeBase, getBezierPath, getSmoothStepPath, getStraightPath, getNodesInside, isEdgeVisible, getEdgePosition, getElevatedEdgeZIndex, initialConnection, fitViewport, getInternalNodesBounds, getViewportForBounds, adoptUserNodes, updateConnectionLookup, infiniteExtent, SelectionMode, mergeAriaLabelConfig, pointToRendererPoint, createMarkerIds, devWarn, panBy, snapPosition, calculateNodePosition, errorMessages, updateNodeInternals, updateAbsolutePositions, getHandlePosition, addEdge, nodeHasDimensions, getMarkerId, MarkerType, isNumeric, getNodesBounds, rendererPointToPoint, getElementsToRemove, isRectObject, getOverlappingArea, nodeToRect, evaluateAbsolutePosition, isMacOs, ConnectionLineType, getConnectionStatus, PanOnScrollMode, getNodeDimensions, getBoundsOfRects } from "@xyflow/system";
+import "clsx";
+import { p as page } from "../../chunks/index3.js";
+import { a as showLegend } from "../../chunks/diagram.js";
+import { i as is_array, g as get_prototype_of, o as object_prototype, r as run } from "../../chunks/equality.js";
+const empty = [];
+function snapshot(value, skip_warning = false, no_tojson = false) {
+  return clone(value, /* @__PURE__ */ new Map(), "", empty, null, no_tojson);
+}
+function clone(value, cloned, path, paths, original = null, no_tojson = false) {
+  if (typeof value === "object" && value !== null) {
+    var unwrapped = cloned.get(value);
+    if (unwrapped !== void 0) return unwrapped;
+    if (value instanceof Map) return (
+      /** @type {Snapshot<T>} */
+      new Map(value)
+    );
+    if (value instanceof Set) return (
+      /** @type {Snapshot<T>} */
+      new Set(value)
+    );
+    if (is_array(value)) {
+      var copy = (
+        /** @type {Snapshot<any>} */
+        Array(value.length)
+      );
+      cloned.set(value, copy);
+      if (original !== null) {
+        cloned.set(original, copy);
+      }
+      for (var i = 0; i < value.length; i += 1) {
+        var element = value[i];
+        if (i in value) {
+          copy[i] = clone(element, cloned, path, paths, null, no_tojson);
+        }
+      }
+      return copy;
+    }
+    if (get_prototype_of(value) === object_prototype) {
+      copy = {};
+      cloned.set(value, copy);
+      if (original !== null) {
+        cloned.set(original, copy);
+      }
+      for (var key2 in value) {
+        copy[key2] = clone(
+          // @ts-expect-error
+          value[key2],
+          cloned,
+          path,
+          paths,
+          null,
+          no_tojson
+        );
+      }
+      return copy;
+    }
+    if (value instanceof Date) {
+      return (
+        /** @type {Snapshot<T>} */
+        structuredClone(value)
+      );
+    }
+    if (typeof /** @type {T & { toJSON?: any } } */
+    value.toJSON === "function" && !no_tojson) {
+      return clone(
+        /** @type {T & { toJSON(): any } } */
+        value.toJSON(),
+        cloned,
+        path,
+        paths,
+        // Associate the instance with the toJSON clone
+        value
+      );
+    }
+  }
+  if (value instanceof EventTarget) {
+    return (
+      /** @type {Snapshot<T>} */
+      value
+    );
+  }
+  try {
+    return (
+      /** @type {Snapshot<T>} */
+      structuredClone(value)
+    );
+  } catch (e) {
+    return (
+      /** @type {Snapshot<T>} */
+      value
+    );
+  }
+}
+function createContext() {
+  const key2 = {};
+  return [
+    (errorMessage) => {
+      if (errorMessage && !hasContext(key2)) {
+        throw new Error(errorMessage);
+      }
+      return getContext(key2);
+    },
+    (context) => setContext(key2, context)
+  ];
+}
+const [getNodeIdContext, setNodeIdContext] = createContext();
+const [getNodeConnectableContext, setNodeConnectableContext] = createContext();
+const [getEdgeIdContext, setEdgeIdContext] = createContext();
+function Handle($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id: handleId = null,
+      type = "source",
+      position = Position.Top,
+      style,
+      class: className,
+      isConnectable: isConnectableProp,
+      isConnectableStart = true,
+      isConnectableEnd = true,
+      isValidConnection,
+      onconnect,
+      ondisconnect,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const nodeId = getNodeIdContext("Handle must be used within a Custom Node component");
+    const isConnectableContext = getNodeConnectableContext("Handle must be used within a Custom Node component");
+    let isTarget = type === "target";
+    let isConnectable = isConnectableProp !== void 0 ? isConnectableProp : isConnectableContext.value;
+    let store = useStore();
+    let ariaLabelConfig = store.ariaLabelConfig;
+    let [
+      connectionInProgress,
+      connectingFrom,
+      connectingTo,
+      isPossibleTargetHandle,
+      valid
+    ] = (() => {
+      if (!store.connection.inProgress) {
+        return [false, false, false, false, null];
+      }
+      const { fromHandle, toHandle, isValid } = store.connection;
+      const connectingFrom2 = fromHandle && fromHandle.nodeId === nodeId && fromHandle.type === type && fromHandle.id === handleId;
+      const connectingTo2 = toHandle && toHandle.nodeId === nodeId && toHandle.type === type && toHandle.id === handleId;
+      const isPossibleTargetHandle2 = store.connectionMode === ConnectionMode.Strict ? fromHandle?.type !== type : nodeId !== fromHandle?.nodeId || handleId !== fromHandle?.id;
+      const valid2 = connectingTo2 && isValid;
+      return [
+        true,
+        connectingFrom2,
+        connectingTo2,
+        isPossibleTargetHandle2,
+        valid2
+      ];
+    })();
+    $$renderer2.push(`<div${attributes(
+      {
+        "data-handleid": handleId,
+        "data-nodeid": nodeId,
+        "data-handlepos": position,
+        "data-id": `${stringify(store.flowId)}-${stringify(nodeId)}-${stringify(handleId ?? "null")}-${stringify(type)}`,
+        class: clsx([
+          "svelte-flow__handle",
+          `svelte-flow__handle-${position}`,
+          store.noDragClass,
+          store.noPanClass,
+          position,
+          className
+        ]),
+        style,
+        role: "button",
+        "aria-label": ariaLabelConfig[`handle.ariaLabel`],
+        tabindex: "-1",
+        ...rest
+      },
+      void 0,
+      {
+        valid,
+        connectingto: connectingTo,
+        connectingfrom: connectingFrom,
+        source: !isTarget,
+        target: isTarget,
+        connectablestart: isConnectableStart,
+        connectableend: isConnectableEnd,
+        connectable: isConnectable,
+        connectionindicator: isConnectable && (!connectionInProgress || isPossibleTargetHandle) && (connectionInProgress || store.clickConnectStartHandle ? isConnectableEnd : isConnectableStart)
+      }
+    )}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+  });
+}
+function DefaultNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      data,
+      targetPosition = Position.Top,
+      sourcePosition = Position.Bottom
+    } = $$props;
+    Handle($$renderer2, { type: "target", position: targetPosition });
+    $$renderer2.push(`<!----> ${escape_html(data?.label)} `);
+    Handle($$renderer2, { type: "source", position: sourcePosition });
+    $$renderer2.push(`<!---->`);
+  });
+}
+function InputNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data = { label: "Node" }, sourcePosition = Position.Bottom } = $$props;
+    $$renderer2.push(`<!---->${escape_html(data?.label)} `);
+    Handle($$renderer2, { type: "source", position: sourcePosition });
+    $$renderer2.push(`<!---->`);
+  });
+}
+function OutputNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data = { label: "Node" }, targetPosition = Position.Top } = $$props;
+    $$renderer2.push(`<!---->${escape_html(data?.label)} `);
+    Handle($$renderer2, { type: "target", position: targetPosition });
+    $$renderer2.push(`<!---->`);
+  });
+}
+function GroupNode($$renderer, $$props) {
+}
+function hideOnSSR() {
+  let hide = typeof window === "undefined";
+  return {
+    get value() {
+      return hide;
+    }
+  };
+}
+const isNode = (element) => isNodeBase(element);
+const isEdge = (element) => isEdgeBase(element);
+function toPxString(value) {
+  return value === void 0 ? void 0 : `${value}px`;
+}
+function EdgeLabel($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      x = 0,
+      y = 0,
+      width,
+      height,
+      selectEdgeOnClick = false,
+      transparent = false,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    const store = useStore();
+    const edgeId = getEdgeIdContext("EdgeLabel must be used within a Custom Edge component");
+    let z = (() => {
+      return store.visible.edges.get(edgeId)?.zIndex;
+    })();
+    $$renderer2.push(`<div${attributes(
+      {
+        class: clsx(["svelte-flow__edge-label", { transparent }, className]),
+        tabindex: "-1",
+        ...rest
+      },
+      "svelte-13xe97i",
+      void 0,
+      {
+        display: hideOnSSR().value ? "none" : void 0,
+        cursor: selectEdgeOnClick ? "pointer" : void 0,
+        transform: `translate(-50%, -50%) translate(${stringify(x)}px,${stringify(y)}px)`,
+        "pointer-events": "all",
+        width: toPxString(width),
+        height: toPxString(height),
+        "z-index": z
+      }
+    )}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+  });
+}
+function BaseEdge($$renderer, $$props) {
+  let {
+    id,
+    path,
+    label,
+    labelX,
+    labelY,
+    labelStyle,
+    markerStart,
+    markerEnd,
+    style,
+    interactionWidth = 20,
+    class: className,
+    $$slots,
+    $$events,
+    ...rest
+  } = $$props;
+  $$renderer.push(`<path${attr("id", id)}${attr("d", path)}${attr_class(clsx(["svelte-flow__edge-path", className]))}${attr("marker-start", markerStart)}${attr("marker-end", markerEnd)} fill="none"${attr_style(style)}></path>`);
+  if (interactionWidth > 0) {
+    $$renderer.push("<!--[-->");
+    $$renderer.push(`<path${attributes(
+      {
+        d: path,
+        "stroke-opacity": 0,
+        "stroke-width": interactionWidth,
+        fill: "none",
+        class: "svelte-flow__edge-interaction",
+        ...rest
+      },
+      void 0,
+      void 0,
+      void 0,
+      3
+    )}></path>`);
+  } else {
+    $$renderer.push("<!--[!-->");
+  }
+  $$renderer.push(`<!--]-->`);
+  if (label) {
+    $$renderer.push("<!--[-->");
+    EdgeLabel($$renderer, {
+      x: labelX,
+      y: labelY,
+      style: labelStyle,
+      selectEdgeOnClick: true,
+      children: ($$renderer2) => {
+        $$renderer2.push(`<!---->${escape_html(label)}`);
+      },
+      $$slots: { default: true }
+    });
+  } else {
+    $$renderer.push("<!--[!-->");
+  }
+  $$renderer.push(`<!--]-->`);
+}
+function BezierEdge($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      interactionWidth,
+      label,
+      labelStyle,
+      markerEnd,
+      markerStart,
+      pathOptions,
+      sourcePosition,
+      sourceX,
+      sourceY,
+      style,
+      targetPosition,
+      targetX,
+      targetY
+    } = $$props;
+    let [path, labelX, labelY] = getBezierPath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      curvature: pathOptions?.curvature
+    });
+    BaseEdge($$renderer2, {
+      id,
+      path,
+      labelX,
+      labelY,
+      label,
+      labelStyle,
+      markerStart,
+      markerEnd,
+      interactionWidth,
+      style
+    });
+  });
+}
+function SmoothStepEdgeInternal($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      interactionWidth,
+      label,
+      labelStyle,
+      style,
+      markerEnd,
+      markerStart,
+      sourcePosition,
+      sourceX,
+      sourceY,
+      targetPosition,
+      targetX,
+      targetY
+    } = $$props;
+    let [path, labelX, labelY] = getSmoothStepPath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition
+    });
+    BaseEdge($$renderer2, {
+      path,
+      labelX,
+      labelY,
+      label,
+      labelStyle,
+      markerStart,
+      markerEnd,
+      interactionWidth,
+      style
+    });
+  });
+}
+function StraightEdgeInternal($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      label,
+      labelStyle,
+      markerStart,
+      markerEnd,
+      interactionWidth,
+      style
+    } = $$props;
+    let [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
+    BaseEdge($$renderer2, {
+      path,
+      labelX,
+      labelY,
+      label,
+      labelStyle,
+      markerStart,
+      markerEnd,
+      interactionWidth,
+      style
+    });
+  });
+}
+function StepEdgeInternal($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      label,
+      labelStyle,
+      markerStart,
+      markerEnd,
+      interactionWidth,
+      style
+    } = $$props;
+    let [path, labelX, labelY] = getSmoothStepPath({
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      borderRadius: 0
+    });
+    BaseEdge($$renderer2, {
+      path,
+      labelX,
+      labelY,
+      label,
+      labelStyle,
+      markerStart,
+      markerEnd,
+      interactionWidth,
+      style
+    });
+  });
+}
+class MediaQuery {
+  current;
+  /**
+   * @param {string} query
+   * @param {boolean} [matches]
+   */
+  constructor(query, matches = false) {
+    this.current = matches;
+  }
+}
+function getVisibleNodes(nodeLookup, transform, width, height) {
+  const visibleNodes = /* @__PURE__ */ new Map();
+  getNodesInside(nodeLookup, { x: 0, y: 0, width, height }, transform, true).forEach((node) => {
+    visibleNodes.set(node.id, node);
+  });
+  return visibleNodes;
+}
+function getLayoutedEdges(options) {
+  const { edges, defaultEdgeOptions, nodeLookup, previousEdges, connectionMode, onerror, onlyRenderVisible, elevateEdgesOnSelect, zIndexMode } = options;
+  const layoutedEdges = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const sourceNode = nodeLookup.get(edge.source);
+    const targetNode = nodeLookup.get(edge.target);
+    if (!sourceNode || !targetNode) {
+      continue;
+    }
+    if (onlyRenderVisible) {
+      const { visibleNodes, transform, width, height } = options;
+      if (isEdgeVisible({
+        sourceNode,
+        targetNode,
+        width,
+        height,
+        transform
+      })) {
+        visibleNodes.set(sourceNode.id, sourceNode);
+        visibleNodes.set(targetNode.id, targetNode);
+      } else {
+        continue;
+      }
+    }
+    const previous = previousEdges.get(edge.id);
+    if (previous && edge === previous.edge && sourceNode == previous.sourceNode && targetNode == previous.targetNode) {
+      layoutedEdges.set(edge.id, previous);
+      continue;
+    }
+    const edgePosition = getEdgePosition({
+      id: edge.id,
+      sourceNode,
+      targetNode,
+      sourceHandle: edge.sourceHandle || null,
+      targetHandle: edge.targetHandle || null,
+      connectionMode,
+      onError: onerror
+    });
+    if (edgePosition) {
+      layoutedEdges.set(edge.id, {
+        ...defaultEdgeOptions,
+        ...edge,
+        ...edgePosition,
+        zIndex: getElevatedEdgeZIndex({
+          selected: edge.selected,
+          zIndex: edge.zIndex ?? defaultEdgeOptions.zIndex,
+          sourceNode,
+          targetNode,
+          elevateOnSelect: elevateEdgesOnSelect,
+          zIndexMode
+        }),
+        sourceNode,
+        targetNode,
+        edge
+      });
+    }
+  }
+  return layoutedEdges;
+}
+const initialNodeTypes = {
+  input: InputNode,
+  output: OutputNode,
+  default: DefaultNode,
+  group: GroupNode
+};
+const initialEdgeTypes = {
+  straight: StraightEdgeInternal,
+  smoothstep: SmoothStepEdgeInternal,
+  default: BezierEdge,
+  step: StepEdgeInternal
+};
+function getInitialViewport(_nodesInitialized, fitView, initialViewport, width, height, nodeLookup) {
+  if (fitView && !initialViewport && width && height) {
+    const bounds = getInternalNodesBounds(nodeLookup, {
+      filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
+    });
+    return getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+  } else {
+    return initialViewport ?? { x: 0, y: 0, zoom: 1 };
+  }
+}
+function getInitialStore(signals) {
+  class SvelteFlowStore {
+    #flowId = derived(() => signals.props.id ?? "1");
+    get flowId() {
+      return this.#flowId();
+    }
+    set flowId($$value) {
+      return this.#flowId($$value);
+    }
+    domNode = null;
+    panZoom = null;
+    width = signals.width ?? 0;
+    height = signals.height ?? 0;
+    zIndexMode = signals.props.zIndexMode ?? "basic";
+    #nodesInitialized = derived(() => {
+      const nodesInitialized = adoptUserNodes(signals.nodes, this.nodeLookup, this.parentLookup, {
+        nodeExtent: this.nodeExtent,
+        nodeOrigin: this.nodeOrigin,
+        elevateNodesOnSelect: signals.props.elevateNodesOnSelect ?? true,
+        checkEquality: true,
+        zIndexMode: this.zIndexMode
+      });
+      if (this.fitViewQueued && nodesInitialized) {
+        if (this.fitViewOptions?.duration) {
+          this.resolveFitView();
+        } else {
+          queueMicrotask(() => {
+            this.resolveFitView();
+          });
+        }
+      }
+      return nodesInitialized;
+    });
+    get nodesInitialized() {
+      return this.#nodesInitialized();
+    }
+    set nodesInitialized($$value) {
+      return this.#nodesInitialized($$value);
+    }
+    #viewportInitialized = derived(() => this.panZoom !== null);
+    get viewportInitialized() {
+      return this.#viewportInitialized();
+    }
+    set viewportInitialized($$value) {
+      return this.#viewportInitialized($$value);
+    }
+    #_edges = derived(() => {
+      updateConnectionLookup(this.connectionLookup, this.edgeLookup, signals.edges);
+      return signals.edges;
+    });
+    get _edges() {
+      return this.#_edges();
+    }
+    set _edges($$value) {
+      return this.#_edges($$value);
+    }
+    get nodes() {
+      this.nodesInitialized;
+      return signals.nodes;
+    }
+    set nodes(nodes) {
+      signals.nodes = nodes;
+    }
+    get edges() {
+      return this._edges;
+    }
+    set edges(edges) {
+      signals.edges = edges;
+    }
+    _prevSelectedNodes = [];
+    _prevSelectedNodeIds = /* @__PURE__ */ new Set();
+    #selectedNodes = derived(() => {
+      const selectedNodesCount = this._prevSelectedNodeIds.size;
+      const selectedNodeIds = /* @__PURE__ */ new Set();
+      const selectedNodes = this.nodes.filter((node) => {
+        if (node.selected) {
+          selectedNodeIds.add(node.id);
+          this._prevSelectedNodeIds.delete(node.id);
+        }
+        return node.selected;
+      });
+      if (selectedNodesCount !== selectedNodeIds.size || this._prevSelectedNodeIds.size > 0) {
+        this._prevSelectedNodes = selectedNodes;
+      }
+      this._prevSelectedNodeIds = selectedNodeIds;
+      return this._prevSelectedNodes;
+    });
+    get selectedNodes() {
+      return this.#selectedNodes();
+    }
+    set selectedNodes($$value) {
+      return this.#selectedNodes($$value);
+    }
+    _prevSelectedEdges = [];
+    _prevSelectedEdgeIds = /* @__PURE__ */ new Set();
+    #selectedEdges = derived(() => {
+      const selectedEdgesCount = this._prevSelectedEdgeIds.size;
+      const selectedEdgeIds = /* @__PURE__ */ new Set();
+      const selectedEdges = this.edges.filter((edge) => {
+        if (edge.selected) {
+          selectedEdgeIds.add(edge.id);
+          this._prevSelectedEdgeIds.delete(edge.id);
+        }
+        return edge.selected;
+      });
+      if (selectedEdgesCount !== selectedEdgeIds.size || this._prevSelectedEdgeIds.size > 0) {
+        this._prevSelectedEdges = selectedEdges;
+      }
+      this._prevSelectedEdgeIds = selectedEdgeIds;
+      return this._prevSelectedEdges;
+    });
+    get selectedEdges() {
+      return this.#selectedEdges();
+    }
+    set selectedEdges($$value) {
+      return this.#selectedEdges($$value);
+    }
+    selectionChangeHandlers = /* @__PURE__ */ new Map();
+    nodeLookup = /* @__PURE__ */ new Map();
+    parentLookup = /* @__PURE__ */ new Map();
+    connectionLookup = /* @__PURE__ */ new Map();
+    edgeLookup = /* @__PURE__ */ new Map();
+    _prevVisibleEdges = /* @__PURE__ */ new Map();
+    #visible = derived(() => {
+      const {
+        // We need to access this._nodes to trigger on changes
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        nodes,
+        _edges: edges,
+        _prevVisibleEdges: previousEdges,
+        nodeLookup,
+        connectionMode,
+        onerror,
+        onlyRenderVisibleElements,
+        defaultEdgeOptions,
+        zIndexMode
+      } = this;
+      let visibleNodes;
+      let visibleEdges;
+      const options = {
+        edges,
+        defaultEdgeOptions,
+        previousEdges,
+        nodeLookup,
+        connectionMode,
+        elevateEdgesOnSelect: signals.props.elevateEdgesOnSelect ?? true,
+        zIndexMode,
+        onerror
+      };
+      if (onlyRenderVisibleElements) {
+        const { viewport, width, height } = this;
+        const transform = [viewport.x, viewport.y, viewport.zoom];
+        visibleNodes = getVisibleNodes(nodeLookup, transform, width, height);
+        visibleEdges = getLayoutedEdges({
+          ...options,
+          onlyRenderVisible: true,
+          visibleNodes,
+          transform,
+          width,
+          height
+        });
+      } else {
+        visibleNodes = this.nodeLookup;
+        visibleEdges = getLayoutedEdges(options);
+      }
+      return { nodes: visibleNodes, edges: visibleEdges };
+    });
+    get visible() {
+      return this.#visible();
+    }
+    set visible($$value) {
+      return this.#visible($$value);
+    }
+    #nodesDraggable = derived(() => signals.props.nodesDraggable ?? true);
+    get nodesDraggable() {
+      return this.#nodesDraggable();
+    }
+    set nodesDraggable($$value) {
+      return this.#nodesDraggable($$value);
+    }
+    #nodesConnectable = derived(() => signals.props.nodesConnectable ?? true);
+    get nodesConnectable() {
+      return this.#nodesConnectable();
+    }
+    set nodesConnectable($$value) {
+      return this.#nodesConnectable($$value);
+    }
+    #elementsSelectable = derived(() => signals.props.elementsSelectable ?? true);
+    get elementsSelectable() {
+      return this.#elementsSelectable();
+    }
+    set elementsSelectable($$value) {
+      return this.#elementsSelectable($$value);
+    }
+    #nodesFocusable = derived(() => signals.props.nodesFocusable ?? true);
+    get nodesFocusable() {
+      return this.#nodesFocusable();
+    }
+    set nodesFocusable($$value) {
+      return this.#nodesFocusable($$value);
+    }
+    #edgesFocusable = derived(() => signals.props.edgesFocusable ?? true);
+    get edgesFocusable() {
+      return this.#edgesFocusable();
+    }
+    set edgesFocusable($$value) {
+      return this.#edgesFocusable($$value);
+    }
+    #disableKeyboardA11y = derived(() => signals.props.disableKeyboardA11y ?? false);
+    get disableKeyboardA11y() {
+      return this.#disableKeyboardA11y();
+    }
+    set disableKeyboardA11y($$value) {
+      return this.#disableKeyboardA11y($$value);
+    }
+    #minZoom = derived(() => signals.props.minZoom ?? 0.5);
+    get minZoom() {
+      return this.#minZoom();
+    }
+    set minZoom($$value) {
+      return this.#minZoom($$value);
+    }
+    #maxZoom = derived(() => signals.props.maxZoom ?? 2);
+    get maxZoom() {
+      return this.#maxZoom();
+    }
+    set maxZoom($$value) {
+      return this.#maxZoom($$value);
+    }
+    #nodeOrigin = derived(() => signals.props.nodeOrigin ?? [0, 0]);
+    get nodeOrigin() {
+      return this.#nodeOrigin();
+    }
+    set nodeOrigin($$value) {
+      return this.#nodeOrigin($$value);
+    }
+    #nodeExtent = derived(() => signals.props.nodeExtent ?? infiniteExtent);
+    get nodeExtent() {
+      return this.#nodeExtent();
+    }
+    set nodeExtent($$value) {
+      return this.#nodeExtent($$value);
+    }
+    #translateExtent = derived(() => signals.props.translateExtent ?? infiniteExtent);
+    get translateExtent() {
+      return this.#translateExtent();
+    }
+    set translateExtent($$value) {
+      return this.#translateExtent($$value);
+    }
+    #defaultEdgeOptions = derived(() => signals.props.defaultEdgeOptions ?? {});
+    get defaultEdgeOptions() {
+      return this.#defaultEdgeOptions();
+    }
+    set defaultEdgeOptions($$value) {
+      return this.#defaultEdgeOptions($$value);
+    }
+    #nodeDragThreshold = derived(() => signals.props.nodeDragThreshold ?? 1);
+    get nodeDragThreshold() {
+      return this.#nodeDragThreshold();
+    }
+    set nodeDragThreshold($$value) {
+      return this.#nodeDragThreshold($$value);
+    }
+    #autoPanOnNodeDrag = derived(() => signals.props.autoPanOnNodeDrag ?? true);
+    get autoPanOnNodeDrag() {
+      return this.#autoPanOnNodeDrag();
+    }
+    set autoPanOnNodeDrag($$value) {
+      return this.#autoPanOnNodeDrag($$value);
+    }
+    #autoPanOnConnect = derived(() => signals.props.autoPanOnConnect ?? true);
+    get autoPanOnConnect() {
+      return this.#autoPanOnConnect();
+    }
+    set autoPanOnConnect($$value) {
+      return this.#autoPanOnConnect($$value);
+    }
+    #autoPanOnNodeFocus = derived(() => signals.props.autoPanOnNodeFocus ?? true);
+    get autoPanOnNodeFocus() {
+      return this.#autoPanOnNodeFocus();
+    }
+    set autoPanOnNodeFocus($$value) {
+      return this.#autoPanOnNodeFocus($$value);
+    }
+    #autoPanSpeed = derived(() => signals.props.autoPanSpeed ?? 15);
+    get autoPanSpeed() {
+      return this.#autoPanSpeed();
+    }
+    set autoPanSpeed($$value) {
+      return this.#autoPanSpeed($$value);
+    }
+    #connectionDragThreshold = derived(() => signals.props.connectionDragThreshold ?? 1);
+    get connectionDragThreshold() {
+      return this.#connectionDragThreshold();
+    }
+    set connectionDragThreshold($$value) {
+      return this.#connectionDragThreshold($$value);
+    }
+    fitViewQueued = signals.props.fitView ?? false;
+    fitViewOptions = signals.props.fitViewOptions;
+    fitViewResolver = null;
+    #snapGrid = derived(() => signals.props.snapGrid ?? null);
+    get snapGrid() {
+      return this.#snapGrid();
+    }
+    set snapGrid($$value) {
+      return this.#snapGrid($$value);
+    }
+    dragging = false;
+    selectionRect = null;
+    selectionKeyPressed = false;
+    multiselectionKeyPressed = false;
+    deleteKeyPressed = false;
+    panActivationKeyPressed = false;
+    zoomActivationKeyPressed = false;
+    selectionRectMode = null;
+    ariaLiveMessage = "";
+    #selectionMode = derived(() => signals.props.selectionMode ?? SelectionMode.Partial);
+    get selectionMode() {
+      return this.#selectionMode();
+    }
+    set selectionMode($$value) {
+      return this.#selectionMode($$value);
+    }
+    #nodeTypes = derived(() => ({ ...initialNodeTypes, ...signals.props.nodeTypes }));
+    get nodeTypes() {
+      return this.#nodeTypes();
+    }
+    set nodeTypes($$value) {
+      return this.#nodeTypes($$value);
+    }
+    #edgeTypes = derived(() => ({ ...initialEdgeTypes, ...signals.props.edgeTypes }));
+    get edgeTypes() {
+      return this.#edgeTypes();
+    }
+    set edgeTypes($$value) {
+      return this.#edgeTypes($$value);
+    }
+    #noPanClass = derived(() => signals.props.noPanClass ?? "nopan");
+    get noPanClass() {
+      return this.#noPanClass();
+    }
+    set noPanClass($$value) {
+      return this.#noPanClass($$value);
+    }
+    #noDragClass = derived(() => signals.props.noDragClass ?? "nodrag");
+    get noDragClass() {
+      return this.#noDragClass();
+    }
+    set noDragClass($$value) {
+      return this.#noDragClass($$value);
+    }
+    #noWheelClass = derived(() => signals.props.noWheelClass ?? "nowheel");
+    get noWheelClass() {
+      return this.#noWheelClass();
+    }
+    set noWheelClass($$value) {
+      return this.#noWheelClass($$value);
+    }
+    #ariaLabelConfig = derived(() => mergeAriaLabelConfig(signals.props.ariaLabelConfig));
+    get ariaLabelConfig() {
+      return this.#ariaLabelConfig();
+    }
+    set ariaLabelConfig($$value) {
+      return this.#ariaLabelConfig($$value);
+    }
+    _viewport = getInitialViewport(this.nodesInitialized, signals.props.fitView, signals.props.initialViewport, this.width, this.height, this.nodeLookup);
+    get viewport() {
+      return signals.viewport ?? this._viewport;
+    }
+    set viewport(newViewport) {
+      if (signals.viewport) {
+        signals.viewport = newViewport;
+      }
+      this._viewport = newViewport;
+    }
+    // _connection is viewport independent and originating from XYHandle
+    _connection = initialConnection;
+    #connection = derived(
+      // We derive a viewport dependent connection here
+      () => {
+        if (!this._connection.inProgress) {
+          return this._connection;
+        }
+        return {
+          ...this._connection,
+          to: pointToRendererPoint(this._connection.to, [this.viewport.x, this.viewport.y, this.viewport.zoom])
+        };
+      }
+    );
+    get connection() {
+      return this.#connection();
+    }
+    set connection($$value) {
+      return this.#connection($$value);
+    }
+    #connectionMode = derived(() => signals.props.connectionMode ?? ConnectionMode.Strict);
+    get connectionMode() {
+      return this.#connectionMode();
+    }
+    set connectionMode($$value) {
+      return this.#connectionMode($$value);
+    }
+    #connectionRadius = derived(() => signals.props.connectionRadius ?? 20);
+    get connectionRadius() {
+      return this.#connectionRadius();
+    }
+    set connectionRadius($$value) {
+      return this.#connectionRadius($$value);
+    }
+    #isValidConnection = derived(() => signals.props.isValidConnection ?? (() => true));
+    get isValidConnection() {
+      return this.#isValidConnection();
+    }
+    set isValidConnection($$value) {
+      return this.#isValidConnection($$value);
+    }
+    #selectNodesOnDrag = derived(() => signals.props.selectNodesOnDrag ?? true);
+    get selectNodesOnDrag() {
+      return this.#selectNodesOnDrag();
+    }
+    set selectNodesOnDrag($$value) {
+      return this.#selectNodesOnDrag($$value);
+    }
+    #defaultMarkerColor = derived(() => signals.props.defaultMarkerColor === void 0 ? "#b1b1b7" : signals.props.defaultMarkerColor);
+    get defaultMarkerColor() {
+      return this.#defaultMarkerColor();
+    }
+    set defaultMarkerColor($$value) {
+      return this.#defaultMarkerColor($$value);
+    }
+    #markers = derived(() => {
+      return createMarkerIds(signals.edges, {
+        defaultColor: this.defaultMarkerColor,
+        id: this.flowId,
+        defaultMarkerStart: this.defaultEdgeOptions.markerStart,
+        defaultMarkerEnd: this.defaultEdgeOptions.markerEnd
+      });
+    });
+    get markers() {
+      return this.#markers();
+    }
+    set markers($$value) {
+      return this.#markers($$value);
+    }
+    #onlyRenderVisibleElements = derived(() => signals.props.onlyRenderVisibleElements ?? false);
+    get onlyRenderVisibleElements() {
+      return this.#onlyRenderVisibleElements();
+    }
+    set onlyRenderVisibleElements($$value) {
+      return this.#onlyRenderVisibleElements($$value);
+    }
+    #onerror = derived(() => signals.props.onflowerror ?? devWarn);
+    get onerror() {
+      return this.#onerror();
+    }
+    set onerror($$value) {
+      return this.#onerror($$value);
+    }
+    #ondelete = derived(() => signals.props.ondelete);
+    get ondelete() {
+      return this.#ondelete();
+    }
+    set ondelete($$value) {
+      return this.#ondelete($$value);
+    }
+    #onbeforedelete = derived(() => signals.props.onbeforedelete);
+    get onbeforedelete() {
+      return this.#onbeforedelete();
+    }
+    set onbeforedelete($$value) {
+      return this.#onbeforedelete($$value);
+    }
+    #onbeforeconnect = derived(() => signals.props.onbeforeconnect);
+    get onbeforeconnect() {
+      return this.#onbeforeconnect();
+    }
+    set onbeforeconnect($$value) {
+      return this.#onbeforeconnect($$value);
+    }
+    #onconnect = derived(() => signals.props.onconnect);
+    get onconnect() {
+      return this.#onconnect();
+    }
+    set onconnect($$value) {
+      return this.#onconnect($$value);
+    }
+    #onconnectstart = derived(() => signals.props.onconnectstart);
+    get onconnectstart() {
+      return this.#onconnectstart();
+    }
+    set onconnectstart($$value) {
+      return this.#onconnectstart($$value);
+    }
+    #onconnectend = derived(() => signals.props.onconnectend);
+    get onconnectend() {
+      return this.#onconnectend();
+    }
+    set onconnectend($$value) {
+      return this.#onconnectend($$value);
+    }
+    #onbeforereconnect = derived(() => signals.props.onbeforereconnect);
+    get onbeforereconnect() {
+      return this.#onbeforereconnect();
+    }
+    set onbeforereconnect($$value) {
+      return this.#onbeforereconnect($$value);
+    }
+    #onreconnect = derived(() => signals.props.onreconnect);
+    get onreconnect() {
+      return this.#onreconnect();
+    }
+    set onreconnect($$value) {
+      return this.#onreconnect($$value);
+    }
+    #onreconnectstart = derived(() => signals.props.onreconnectstart);
+    get onreconnectstart() {
+      return this.#onreconnectstart();
+    }
+    set onreconnectstart($$value) {
+      return this.#onreconnectstart($$value);
+    }
+    #onreconnectend = derived(() => signals.props.onreconnectend);
+    get onreconnectend() {
+      return this.#onreconnectend();
+    }
+    set onreconnectend($$value) {
+      return this.#onreconnectend($$value);
+    }
+    #clickConnect = derived(() => signals.props.clickConnect ?? true);
+    get clickConnect() {
+      return this.#clickConnect();
+    }
+    set clickConnect($$value) {
+      return this.#clickConnect($$value);
+    }
+    #onclickconnectstart = derived(() => signals.props.onclickconnectstart);
+    get onclickconnectstart() {
+      return this.#onclickconnectstart();
+    }
+    set onclickconnectstart($$value) {
+      return this.#onclickconnectstart($$value);
+    }
+    #onclickconnectend = derived(() => signals.props.onclickconnectend);
+    get onclickconnectend() {
+      return this.#onclickconnectend();
+    }
+    set onclickconnectend($$value) {
+      return this.#onclickconnectend($$value);
+    }
+    clickConnectStartHandle = null;
+    #onselectiondrag = derived(() => signals.props.onselectiondrag);
+    get onselectiondrag() {
+      return this.#onselectiondrag();
+    }
+    set onselectiondrag($$value) {
+      return this.#onselectiondrag($$value);
+    }
+    #onselectiondragstart = derived(() => signals.props.onselectiondragstart);
+    get onselectiondragstart() {
+      return this.#onselectiondragstart();
+    }
+    set onselectiondragstart($$value) {
+      return this.#onselectiondragstart($$value);
+    }
+    #onselectiondragstop = derived(() => signals.props.onselectiondragstop);
+    get onselectiondragstop() {
+      return this.#onselectiondragstop();
+    }
+    set onselectiondragstop($$value) {
+      return this.#onselectiondragstop($$value);
+    }
+    resolveFitView = async () => {
+      if (!this.panZoom) {
+        return;
+      }
+      await fitViewport(
+        {
+          nodes: this.nodeLookup,
+          width: this.width,
+          height: this.height,
+          panZoom: this.panZoom,
+          minZoom: this.minZoom,
+          maxZoom: this.maxZoom
+        },
+        this.fitViewOptions
+      );
+      this.fitViewResolver?.resolve(true);
+      this.fitViewQueued = false;
+      this.fitViewOptions = void 0;
+      this.fitViewResolver = null;
+    };
+    _prefersDark = new MediaQuery("(prefers-color-scheme: dark)", signals.props.colorModeSSR === "dark");
+    #colorMode = derived(() => signals.props.colorMode === "system" ? this._prefersDark.current ? "dark" : "light" : signals.props.colorMode ?? "light");
+    get colorMode() {
+      return this.#colorMode();
+    }
+    set colorMode($$value) {
+      return this.#colorMode($$value);
+    }
+    constructor() {
+      if (process.env.NODE_ENV === "development") {
+        warnIfDeeplyReactive(signals.nodes, "nodes");
+        warnIfDeeplyReactive(signals.edges, "edges");
+      }
+    }
+    resetStoreValues() {
+      this.dragging = false;
+      this.selectionRect = null;
+      this.selectionRectMode = null;
+      this.selectionKeyPressed = false;
+      this.multiselectionKeyPressed = false;
+      this.deleteKeyPressed = false;
+      this.panActivationKeyPressed = false;
+      this.zoomActivationKeyPressed = false;
+      this._connection = initialConnection;
+      this.clickConnectStartHandle = null;
+      this.viewport = signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 };
+      this.ariaLiveMessage = "";
+    }
+  }
+  return new SvelteFlowStore();
+}
+function warnIfDeeplyReactive(array, name) {
+  try {
+    if (array && array.length > 0) {
+      structuredClone(array[0]);
+    }
+  } catch {
+    console.warn(`Use $state.raw for ${name} to prevent performance issues.`);
+  }
+}
+function useStore() {
+  const storeContext = getContext(key);
+  if (!storeContext) {
+    throw new Error("To call useStore outside of <SvelteFlow /> you need to wrap your component in a <SvelteFlowProvider />");
+  }
+  return storeContext.getStore();
+}
+const key = /* @__PURE__ */ Symbol();
+function createStore(signals) {
+  const store = getInitialStore(signals);
+  function setNodeTypes(nodeTypes) {
+    store.nodeTypes = {
+      ...initialNodeTypes,
+      ...nodeTypes
+    };
+  }
+  function setEdgeTypes(edgeTypes) {
+    store.edgeTypes = {
+      ...initialEdgeTypes,
+      ...edgeTypes
+    };
+  }
+  function addEdge$1(edgeParams) {
+    store.edges = addEdge(edgeParams, store.edges);
+  }
+  const updateNodePositions = (nodeDragItems, dragging = false) => {
+    store.nodes = store.nodes.map((node) => {
+      if (store.connection.inProgress && store.connection.fromNode.id === node.id) {
+        const internalNode = store.nodeLookup.get(node.id);
+        if (internalNode) {
+          store.connection = {
+            ...store.connection,
+            from: getHandlePosition(internalNode, store.connection.fromHandle, Position.Left, true)
+          };
+        }
+      }
+      const dragItem = nodeDragItems.get(node.id);
+      return dragItem ? { ...node, position: dragItem.position, dragging } : node;
+    });
+  };
+  function updateNodeInternals$1(updates) {
+    const { changes, updatedInternals } = updateNodeInternals(updates, store.nodeLookup, store.parentLookup, store.domNode, store.nodeOrigin, store.nodeExtent, store.zIndexMode);
+    if (!updatedInternals) {
+      return;
+    }
+    updateAbsolutePositions(store.nodeLookup, store.parentLookup, {
+      nodeOrigin: store.nodeOrigin,
+      nodeExtent: store.nodeExtent,
+      zIndexMode: store.zIndexMode
+    });
+    if (store.fitViewQueued) {
+      store.resolveFitView();
+    }
+    const newNodes = /* @__PURE__ */ new Map();
+    for (const change of changes) {
+      const userNode = store.nodeLookup.get(change.id)?.internals.userNode;
+      if (!userNode) {
+        continue;
+      }
+      const node = { ...userNode };
+      switch (change.type) {
+        case "dimensions": {
+          const measured = { ...node.measured, ...change.dimensions };
+          if (change.setAttributes) {
+            node.width = change.dimensions?.width ?? node.width;
+            node.height = change.dimensions?.height ?? node.height;
+          }
+          node.measured = measured;
+          break;
+        }
+        case "position":
+          node.position = change.position ?? node.position;
+          break;
+      }
+      newNodes.set(change.id, node);
+    }
+    store.nodes = store.nodes.map((node) => newNodes.get(node.id) ?? node);
+  }
+  function fitView(options) {
+    const fitViewResolver = store.fitViewResolver ?? Promise.withResolvers();
+    store.fitViewQueued = true;
+    store.fitViewOptions = options;
+    store.fitViewResolver = fitViewResolver;
+    store.nodes = [...store.nodes];
+    return fitViewResolver.promise;
+  }
+  async function setCenter(x, y, options) {
+    const nextZoom = typeof options?.zoom !== "undefined" ? options.zoom : store.maxZoom;
+    const currentPanZoom = store.panZoom;
+    if (!currentPanZoom) {
+      return Promise.resolve(false);
+    }
+    await currentPanZoom.setViewport({
+      x: store.width / 2 - x * nextZoom,
+      y: store.height / 2 - y * nextZoom,
+      zoom: nextZoom
+    }, { duration: options?.duration, ease: options?.ease, interpolate: options?.interpolate });
+    return Promise.resolve(true);
+  }
+  function zoomBy(factor, options) {
+    const panZoom = store.panZoom;
+    if (!panZoom) {
+      return Promise.resolve(false);
+    }
+    return panZoom.scaleBy(factor, options);
+  }
+  function zoomIn(options) {
+    return zoomBy(1.2, options);
+  }
+  function zoomOut(options) {
+    return zoomBy(1 / 1.2, options);
+  }
+  function setMinZoom(minZoom) {
+    const panZoom = store.panZoom;
+    if (panZoom) {
+      panZoom.setScaleExtent([minZoom, store.maxZoom]);
+      store.minZoom = minZoom;
+    }
+  }
+  function setMaxZoom(maxZoom) {
+    const panZoom = store.panZoom;
+    if (panZoom) {
+      panZoom.setScaleExtent([store.minZoom, maxZoom]);
+      store.maxZoom = maxZoom;
+    }
+  }
+  function setTranslateExtent(extent) {
+    const panZoom = store.panZoom;
+    if (panZoom) {
+      panZoom.setTranslateExtent(extent);
+      store.translateExtent = extent;
+    }
+  }
+  function deselect(elements, elementsToDeselect = null) {
+    let deselected = false;
+    const newElements = elements.map((element) => {
+      const shouldDeselect = elementsToDeselect ? elementsToDeselect.has(element.id) : true;
+      if (shouldDeselect && element.selected) {
+        deselected = true;
+        return { ...element, selected: false };
+      }
+      return element;
+    });
+    return [deselected, newElements];
+  }
+  function unselectNodesAndEdges(params) {
+    const nodesToDeselect = params?.nodes ? new Set(params.nodes.map((node) => node.id)) : null;
+    const [nodesDeselected, newNodes] = deselect(store.nodes, nodesToDeselect);
+    if (nodesDeselected) {
+      store.nodes = newNodes;
+    }
+    const edgesToDeselect = params?.edges ? new Set(params.edges.map((node) => node.id)) : null;
+    const [edgesDeselected, newEdges] = deselect(store.edges, edgesToDeselect);
+    if (edgesDeselected) {
+      store.edges = newEdges;
+    }
+  }
+  function addSelectedNodes(ids) {
+    const isMultiSelection = store.multiselectionKeyPressed;
+    store.nodes = store.nodes.map((node) => {
+      const nodeWillBeSelected = ids.includes(node.id);
+      const selected = isMultiSelection ? node.selected || nodeWillBeSelected : nodeWillBeSelected;
+      if (!!node.selected !== selected) {
+        return { ...node, selected };
+      }
+      return node;
+    });
+    if (!isMultiSelection) {
+      unselectNodesAndEdges({ nodes: [] });
+    }
+  }
+  function addSelectedEdges(ids) {
+    const isMultiSelection = store.multiselectionKeyPressed;
+    store.edges = store.edges.map((edge) => {
+      const edgeWillBeSelected = ids.includes(edge.id);
+      const selected = isMultiSelection ? edge.selected || edgeWillBeSelected : edgeWillBeSelected;
+      if (!!edge.selected !== selected) {
+        return { ...edge, selected };
+      }
+      return edge;
+    });
+    if (!isMultiSelection) {
+      unselectNodesAndEdges({ edges: [] });
+    }
+  }
+  function handleNodeSelection(id, unselect, nodeRef) {
+    const node = store.nodeLookup.get(id);
+    if (!node) {
+      console.warn("012", errorMessages["error012"](id));
+      return;
+    }
+    store.selectionRect = null;
+    store.selectionRectMode = null;
+    if (!node.selected) {
+      addSelectedNodes([id]);
+    } else if (unselect || node.selected && store.multiselectionKeyPressed) {
+      unselectNodesAndEdges({ nodes: [node], edges: [] });
+      requestAnimationFrame(() => nodeRef?.blur());
+    }
+  }
+  function handleEdgeSelection(id) {
+    const edge = store.edgeLookup.get(id);
+    if (!edge) {
+      console.warn("012", errorMessages["error012"](id));
+      return;
+    }
+    const selectable = edge.selectable || store.elementsSelectable && typeof edge.selectable === "undefined";
+    if (selectable) {
+      store.selectionRect = null;
+      store.selectionRectMode = null;
+      if (!edge.selected) {
+        addSelectedEdges([id]);
+      } else if (edge.selected && store.multiselectionKeyPressed) {
+        unselectNodesAndEdges({ nodes: [], edges: [edge] });
+      }
+    }
+  }
+  function moveSelectedNodes(direction, factor) {
+    const { nodeExtent, snapGrid, nodeOrigin, nodeLookup, nodesDraggable, onerror } = store;
+    const nodeUpdates = /* @__PURE__ */ new Map();
+    const xVelo = snapGrid?.[0] ?? 5;
+    const yVelo = snapGrid?.[1] ?? 5;
+    const xDiff = direction.x * xVelo * factor;
+    const yDiff = direction.y * yVelo * factor;
+    for (const node of nodeLookup.values()) {
+      const isSelected = node.selected && (node.draggable || nodesDraggable && typeof node.draggable === "undefined");
+      if (!isSelected) {
+        continue;
+      }
+      let nextPosition = {
+        x: node.internals.positionAbsolute.x + xDiff,
+        y: node.internals.positionAbsolute.y + yDiff
+      };
+      if (snapGrid) {
+        nextPosition = snapPosition(nextPosition, snapGrid);
+      }
+      const { position, positionAbsolute } = calculateNodePosition({
+        nodeId: node.id,
+        nextPosition,
+        nodeLookup,
+        nodeExtent,
+        nodeOrigin,
+        onError: onerror
+      });
+      node.position = position;
+      node.internals.positionAbsolute = positionAbsolute;
+      nodeUpdates.set(node.id, node);
+    }
+    updateNodePositions(nodeUpdates);
+  }
+  function panBy$1(delta) {
+    return panBy({
+      delta,
+      panZoom: store.panZoom,
+      transform: [store.viewport.x, store.viewport.y, store.viewport.zoom],
+      translateExtent: store.translateExtent,
+      width: store.width,
+      height: store.height
+    });
+  }
+  const updateConnection = (newConnection) => {
+    store._connection = { ...newConnection };
+  };
+  function cancelConnection() {
+    store._connection = initialConnection;
+  }
+  function reset() {
+    store.resetStoreValues();
+    unselectNodesAndEdges();
+  }
+  const storeWithActions = Object.assign(store, {
+    setNodeTypes,
+    setEdgeTypes,
+    addEdge: addEdge$1,
+    updateNodePositions,
+    updateNodeInternals: updateNodeInternals$1,
+    zoomIn,
+    zoomOut,
+    fitView,
+    setCenter,
+    setMinZoom,
+    setMaxZoom,
+    setTranslateExtent,
+    unselectNodesAndEdges,
+    addSelectedNodes,
+    addSelectedEdges,
+    handleNodeSelection,
+    handleEdgeSelection,
+    moveSelectedNodes,
+    panBy: panBy$1,
+    updateConnection,
+    cancelConnection,
+    reset
+  });
+  return storeWithActions;
+}
+function Zoom($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      store = void 0,
+      panOnScrollMode,
+      preventScrolling,
+      zoomOnScroll,
+      zoomOnDoubleClick,
+      zoomOnPinch,
+      panOnDrag,
+      panOnScroll,
+      panOnScrollSpeed,
+      paneClickDistance,
+      selectionOnDrag,
+      onmovestart,
+      onmove,
+      onmoveend,
+      oninit,
+      children
+    } = $$props;
+    store.panActivationKeyPressed || panOnDrag;
+    store.panActivationKeyPressed || panOnScroll;
+    const { viewport: initialViewport } = store;
+    $$renderer2.push(`<div class="svelte-flow__zoom svelte-flow__container">`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+    bind_props($$props, { store });
+  });
+}
+function Pane($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      store = void 0,
+      panOnDrag = true,
+      paneClickDistance = 1,
+      selectionOnDrag,
+      onpaneclick,
+      onpanecontextmenu,
+      onselectionstart,
+      onselectionend,
+      children
+    } = $$props;
+    let panOnDragActive = store.panActivationKeyPressed || panOnDrag;
+    let isSelecting = store.selectionKeyPressed || !!store.selectionRect || selectionOnDrag && panOnDragActive !== true;
+    store.elementsSelectable && (isSelecting || store.selectionRectMode === "user");
+    $$renderer2.push(`<div${attr_class("svelte-flow__pane svelte-flow__container", void 0, {
+      "draggable": panOnDrag === true || Array.isArray(panOnDrag) && panOnDrag.includes(0),
+      "dragging": store.dragging,
+      "selection": isSelecting
+    })}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+    bind_props($$props, { store });
+  });
+}
+function Viewport($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { store = void 0, children } = $$props;
+    $$renderer2.push(`<div class="svelte-flow__viewport xyflow__viewport svelte-flow__container"${attr_style("", {
+      transform: `translate(${stringify(store.viewport.x)}px, ${stringify(store.viewport.y)}px) scale(${stringify(store.viewport.zoom)})`
+    })}>`);
+    children($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+    bind_props($$props, { store });
+  });
+}
+function A11yDescriptions($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { store } = $$props;
+    $$renderer2.push(`<div${attr("id", `${ARIA_NODE_DESC_KEY}-${store.flowId}`)} class="a11y-hidden svelte-y5ec76">${escape_html(store.disableKeyboardA11y ? store.ariaLabelConfig["node.a11yDescription.default"] : store.ariaLabelConfig["node.a11yDescription.keyboardDisabled"])}</div> <div${attr("id", `${ARIA_EDGE_DESC_KEY}-${store.flowId}`)} class="a11y-hidden svelte-y5ec76">${escape_html(store.ariaLabelConfig["edge.a11yDescription.default"])}</div> `);
+    if (!store.disableKeyboardA11y) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div${attr("id", `${ARIA_LIVE_MESSAGE}-${store.flowId}`)} aria-live="assertive" aria-atomic="true" class="a11y-live-msg svelte-y5ec76">${escape_html(store.ariaLiveMessage)}</div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+const ARIA_NODE_DESC_KEY = "svelte-flow__node-desc";
+const ARIA_EDGE_DESC_KEY = "svelte-flow__edge-desc";
+const ARIA_LIVE_MESSAGE = "svelte-flow__aria-live";
+function NodeWrapper($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      store = void 0,
+      node,
+      resizeObserver,
+      nodeClickDistance,
+      onnodeclick,
+      onnodedrag,
+      onnodedragstart,
+      onnodedragstop,
+      onnodepointerenter,
+      onnodepointerleave,
+      onnodepointermove,
+      onnodecontextmenu
+    } = $$props;
+    let {
+      data = {},
+      selected = false,
+      draggable: _draggable,
+      selectable: _selectable,
+      deletable = true,
+      connectable: _connectable,
+      focusable: _focusable,
+      hidden = false,
+      dragging = false,
+      style = "",
+      class: className,
+      type = "default",
+      parentId,
+      sourcePosition,
+      targetPosition,
+      measured: { width: measuredWidth, height: measuredHeight } = { width: 0, height: 0 },
+      initialWidth,
+      initialHeight,
+      width,
+      height,
+      dragHandle,
+      internals: {
+        z: zIndex = 0,
+        positionAbsolute: { x: positionX, y: positionY },
+        userNode
+      }
+    } = node;
+    let { id } = node;
+    let draggable = _draggable ?? store.nodesDraggable;
+    let selectable = _selectable ?? store.elementsSelectable;
+    let connectable = _connectable ?? store.nodesConnectable;
+    let hasDimensions = nodeHasDimensions(node);
+    !!node.internals.handleBounds;
+    let focusable = _focusable ?? store.nodesFocusable;
+    function isInParentLookup(id2) {
+      return store.parentLookup.has(id2);
+    }
+    let isParent = isInParentLookup(id);
+    let NodeComponent = store.nodeTypes[type] ?? DefaultNode;
+    store.ariaLabelConfig;
+    let connectableContext = {
+      get value() {
+        return connectable;
+      }
+    };
+    setNodeIdContext(id);
+    setNodeConnectableContext(connectableContext);
+    if (process.env.NODE_ENV === "development") ;
+    let nodeStyle = (() => {
+      const w = measuredWidth === void 0 ? width ?? initialWidth : width;
+      const h = measuredHeight === void 0 ? height ?? initialHeight : height;
+      if (w === void 0 && h === void 0 && style === void 0) {
+        return void 0;
+      }
+      return `${style};${w ? `width:${toPxString(w)};` : ""}${h ? `height:${toPxString(h)};` : ""}`;
+    })();
+    onDestroy(() => {
+    });
+    if (!hidden) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div${attributes(
+        {
+          "data-id": id,
+          class: clsx(["svelte-flow__node", `svelte-flow__node-${type}`, className]),
+          style: nodeStyle,
+          tabindex: focusable ? 0 : void 0,
+          role: node.ariaRole ?? (focusable ? "group" : void 0),
+          "aria-roledescription": "node",
+          "aria-describedby": store.disableKeyboardA11y ? void 0 : `${ARIA_NODE_DESC_KEY}-${store.flowId}`,
+          ...node.domAttributes
+        },
+        void 0,
+        {
+          dragging,
+          selected,
+          draggable,
+          connectable,
+          selectable,
+          nopan: draggable,
+          parent: isParent
+        },
+        {
+          "z-index": zIndex,
+          transform: `translate(${stringify(positionX)}px, ${stringify(positionY)}px)`,
+          visibility: hasDimensions ? "visible" : "hidden"
+        }
+      )}>`);
+      $$renderer2.push("<!---->");
+      NodeComponent?.($$renderer2, {
+        data,
+        id,
+        selected,
+        selectable,
+        deletable,
+        sourcePosition,
+        targetPosition,
+        zIndex,
+        dragging,
+        draggable,
+        dragHandle,
+        parentId,
+        type,
+        isConnectable: connectable,
+        positionAbsoluteX: positionX,
+        positionAbsoluteY: positionY,
+        width,
+        height
+      });
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { store });
+  });
+}
+function NodeRenderer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      store = void 0,
+      nodeClickDistance,
+      onnodeclick,
+      onnodecontextmenu,
+      onnodepointerenter,
+      onnodepointermove,
+      onnodepointerleave,
+      onnodedrag,
+      onnodedragstart,
+      onnodedragstop
+    } = $$props;
+    const resizeObserver = typeof ResizeObserver === "undefined" ? null : new ResizeObserver((entries) => {
+      const updates = /* @__PURE__ */ new Map();
+      entries.forEach((entry) => {
+        const id = entry.target.getAttribute("data-id");
+        updates.set(id, { id, nodeElement: entry.target, force: true });
+      });
+      store.updateNodeInternals(updates);
+    });
+    onDestroy(() => {
+      resizeObserver?.disconnect();
+    });
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div class="svelte-flow__nodes"><!--[-->`);
+      const each_array = ensure_array_like(store.visible.nodes.values());
+      for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+        let node = each_array[$$index];
+        NodeWrapper($$renderer3, {
+          node,
+          resizeObserver,
+          nodeClickDistance,
+          onnodeclick,
+          onnodepointerenter,
+          onnodepointermove,
+          onnodepointerleave,
+          onnodedrag,
+          onnodedragstart,
+          onnodedragstop,
+          onnodecontextmenu,
+          get store() {
+            return store;
+          },
+          set store($$value) {
+            store = $$value;
+            $$settled = false;
+          }
+        });
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { store });
+  });
+}
+function EdgeWrapper($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const {
+      edge,
+      store = void 0,
+      onedgeclick,
+      onedgecontextmenu,
+      onedgepointerenter,
+      onedgepointerleave
+    } = $$props;
+    let {
+      id,
+      source,
+      target,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      animated = false,
+      selected = false,
+      label,
+      labelStyle,
+      data = {},
+      style,
+      interactionWidth,
+      type = "default",
+      sourceHandle,
+      targetHandle,
+      markerStart,
+      markerEnd,
+      selectable: _selectable,
+      focusable: _focusable,
+      deletable = true,
+      hidden,
+      zIndex,
+      class: className,
+      ariaLabel
+    } = edge;
+    setEdgeIdContext(id);
+    let selectable = _selectable ?? store.elementsSelectable;
+    let focusable = _focusable ?? store.edgesFocusable;
+    let EdgeComponent = store.edgeTypes[type] ?? BezierEdge;
+    let markerStartUrl = markerStart ? `url('#${getMarkerId(markerStart, store.flowId)}')` : void 0;
+    let markerEndUrl = markerEnd ? `url('#${getMarkerId(markerEnd, store.flowId)}')` : void 0;
+    if (!hidden) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<svg class="svelte-flow__edge-wrapper"${attr_style("", { "z-index": zIndex })}><g${attributes(
+        {
+          class: clsx(["svelte-flow__edge", className]),
+          "data-id": id,
+          "aria-label": ariaLabel === null ? void 0 : ariaLabel ? ariaLabel : `Edge from ${source} to ${target}`,
+          "aria-describedby": focusable ? `${ARIA_EDGE_DESC_KEY}-${store.flowId}` : void 0,
+          role: edge.ariaRole ?? (focusable ? "group" : "img"),
+          "aria-roledescription": "edge",
+          tabindex: focusable ? 0 : void 0,
+          ...edge.domAttributes
+        },
+        void 0,
+        { animated, selected, selectable },
+        void 0,
+        3
+      )}>`);
+      $$renderer2.push("<!---->");
+      EdgeComponent?.($$renderer2, {
+        id,
+        source,
+        target,
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+        animated,
+        selected,
+        label,
+        labelStyle,
+        data,
+        style,
+        interactionWidth,
+        selectable,
+        deletable,
+        type,
+        sourceHandleId: sourceHandle,
+        targetHandleId: targetHandle,
+        markerStart: markerStartUrl,
+        markerEnd: markerEndUrl
+      });
+      $$renderer2.push(`<!----></g></svg>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { store });
+  });
+}
+function MarkerDefinition($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const store = useStore();
+    $$renderer2.push(`<defs><!--[-->`);
+    const each_array = ensure_array_like(store.markers);
+    for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+      let marker = each_array[$$index];
+      Marker($$renderer2, spread_props([marker]));
+    }
+    $$renderer2.push(`<!--]--></defs>`);
+  });
+}
+function Marker($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      type,
+      width = 12.5,
+      height = 12.5,
+      markerUnits = "strokeWidth",
+      orient = "auto-start-reverse",
+      color = "none",
+      strokeWidth
+    } = $$props;
+    $$renderer2.push(`<marker class="svelte-flow__arrowhead"${attr("id", id)}${attr("markerWidth", `${width}`)}${attr("markerHeight", `${height}`)} viewBox="-10 -10 20 20"${attr("markerUnits", markerUnits)}${attr("orient", orient)} refX="0" refY="0">`);
+    if (type === MarkerType.Arrow) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<polyline class="arrow" fill="none" stroke-linecap="round" stroke-linejoin="round"${attr("stroke-width", strokeWidth)} points="-5,-4 0,0 -5,4"${attr_style("", { stroke: color })}></polyline>`);
+    } else if (type === MarkerType.ArrowClosed) {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<polyline class="arrowclosed" stroke-linecap="round" stroke-linejoin="round"${attr("stroke-width", strokeWidth)} points="-5,-4 0,0 -5,4 -5,-4"${attr_style("", { stroke: color, fill: color })}></polyline>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--></marker>`);
+  });
+}
+function EdgeRenderer($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      store = void 0,
+      onedgeclick,
+      onedgecontextmenu,
+      onedgepointerenter,
+      onedgepointerleave
+    } = $$props;
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div class="svelte-flow__edges"><svg class="svelte-flow__marker">`);
+      MarkerDefinition($$renderer3);
+      $$renderer3.push(`<!----></svg> <!--[-->`);
+      const each_array = ensure_array_like(store.visible.edges.values());
+      for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+        let edge = each_array[$$index];
+        EdgeWrapper($$renderer3, {
+          edge,
+          onedgeclick,
+          onedgecontextmenu,
+          onedgepointerenter,
+          onedgepointerleave,
+          get store() {
+            return store;
+          },
+          set store($$value) {
+            store = $$value;
+            $$settled = false;
+          }
+        });
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { store });
+  });
+}
+function Selection($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { x = 0, y = 0, width = 0, height = 0, isVisible = true } = $$props;
+    if (isVisible) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div class="svelte-flow__selection svelte-9do1ra"${attr_style("", {
+        width: typeof width === "string" ? width : toPxString(width),
+        height: typeof height === "string" ? height : toPxString(height),
+        transform: `translate(${x}px, ${y}px)`
+      })}></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function NodeSelection($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      store = void 0,
+      onnodedrag,
+      onnodedragstart,
+      onnodedragstop,
+      onselectionclick,
+      onselectioncontextmenu
+    } = $$props;
+    let bounds = (() => {
+      if (store.selectionRectMode === "nodes") {
+        store.nodes;
+        const nodeBounds = getInternalNodesBounds(store.nodeLookup, { filter: (node) => !!node.selected });
+        if (nodeBounds.width > 0 && nodeBounds.height > 0) {
+          return nodeBounds;
+        }
+      }
+      return null;
+    })();
+    if (store.selectionRectMode === "nodes" && bounds && isNumeric(bounds.x) && isNumeric(bounds.y)) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<div${attr_class(clsx(["svelte-flow__selection-wrapper", store.noPanClass]), "svelte-xt75e")}${attr("role", store.disableKeyboardA11y ? void 0 : "button")}${attr("tabindex", store.disableKeyboardA11y ? void 0 : -1)}${attr_style("", {
+        width: toPxString(bounds.width),
+        height: toPxString(bounds.height),
+        transform: `translate(${stringify(bounds.x)}px, ${stringify(bounds.y)}px)`
+      })}>`);
+      Selection($$renderer2, { width: "100%", height: "100%", x: 0, y: 0 });
+      $$renderer2.push(`<!----></div>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { store });
+  });
+}
+function useSvelteFlow() {
+  const store = useStore();
+  const getNodeRect = (node) => {
+    const nodeToUse = isNode(node) ? node : store.nodeLookup.get(node.id);
+    const position = nodeToUse.parentId ? evaluateAbsolutePosition(nodeToUse.position, nodeToUse.measured, nodeToUse.parentId, store.nodeLookup, store.nodeOrigin) : nodeToUse.position;
+    const nodeWithPosition = {
+      ...nodeToUse,
+      position,
+      width: nodeToUse.measured?.width ?? nodeToUse.width,
+      height: nodeToUse.measured?.height ?? nodeToUse.height
+    };
+    return nodeToRect(nodeWithPosition);
+  };
+  function updateNode(id, nodeUpdate, options = { replace: false }) {
+    store.nodes = run(() => store.nodes).map((node) => {
+      if (node.id === id) {
+        const nextNode = typeof nodeUpdate === "function" ? nodeUpdate(node) : nodeUpdate;
+        return options?.replace && isNode(nextNode) ? nextNode : { ...node, ...nextNode };
+      }
+      return node;
+    });
+  }
+  function updateEdge(id, edgeUpdate, options = { replace: false }) {
+    store.edges = run(() => store.edges).map((edge) => {
+      if (edge.id === id) {
+        const nextEdge = typeof edgeUpdate === "function" ? edgeUpdate(edge) : edgeUpdate;
+        return options.replace && isEdge(nextEdge) ? nextEdge : { ...edge, ...nextEdge };
+      }
+      return edge;
+    });
+  }
+  const getInternalNode = (id) => store.nodeLookup.get(id);
+  return {
+    zoomIn: store.zoomIn,
+    zoomOut: store.zoomOut,
+    getInternalNode,
+    getNode: (id) => getInternalNode(id)?.internals.userNode,
+    getNodes: (ids) => ids === void 0 ? store.nodes : getElements(store.nodeLookup, ids),
+    getEdge: (id) => store.edgeLookup.get(id),
+    getEdges: (ids) => ids === void 0 ? store.edges : getElements(store.edgeLookup, ids),
+    setZoom: (zoomLevel, options) => {
+      const panZoom = store.panZoom;
+      return panZoom ? panZoom.scaleTo(zoomLevel, { duration: options?.duration }) : Promise.resolve(false);
+    },
+    getZoom: () => store.viewport.zoom,
+    setViewport: async (nextViewport, options) => {
+      const currentViewport = store.viewport;
+      if (!store.panZoom) {
+        return Promise.resolve(false);
+      }
+      await store.panZoom.setViewport(
+        {
+          x: nextViewport.x ?? currentViewport.x,
+          y: nextViewport.y ?? currentViewport.y,
+          zoom: nextViewport.zoom ?? currentViewport.zoom
+        },
+        options
+      );
+      return Promise.resolve(true);
+    },
+    getViewport: () => snapshot(store.viewport),
+    setCenter: async (x, y, options) => store.setCenter(x, y, options),
+    fitView: (options) => store.fitView(options),
+    fitBounds: async (bounds, options) => {
+      if (!store.panZoom) {
+        return Promise.resolve(false);
+      }
+      const viewport = getViewportForBounds(bounds, store.width, store.height, store.minZoom, store.maxZoom, options?.padding ?? 0.1);
+      await store.panZoom.setViewport(viewport, {
+        duration: options?.duration,
+        ease: options?.ease,
+        interpolate: options?.interpolate
+      });
+      return Promise.resolve(true);
+    },
+    /**
+     * Partial is defined as "the 2 nodes/areas are intersecting partially".
+     * If a is contained in b or b is contained in a, they are both
+     * considered fully intersecting.
+     */
+    getIntersectingNodes: (nodeOrRect, partially = true, nodesToIntersect) => {
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+      if (!nodeRect) {
+        return [];
+      }
+      return (nodesToIntersect || store.nodes).filter((n) => {
+        const internalNode = store.nodeLookup.get(n.id);
+        if (!internalNode || !isRect && n.id === nodeOrRect.id) {
+          return false;
+        }
+        const currNodeRect = nodeToRect(internalNode);
+        const overlappingArea = getOverlappingArea(currNodeRect, nodeRect);
+        const partiallyVisible = partially && overlappingArea > 0;
+        return partiallyVisible || overlappingArea >= currNodeRect.width * currNodeRect.height || overlappingArea >= nodeRect.width * nodeRect.height;
+      });
+    },
+    isNodeIntersecting: (nodeOrRect, area, partially = true) => {
+      const isRect = isRectObject(nodeOrRect);
+      const nodeRect = isRect ? nodeOrRect : getNodeRect(nodeOrRect);
+      if (!nodeRect) {
+        return false;
+      }
+      const overlappingArea = getOverlappingArea(nodeRect, area);
+      const partiallyVisible = partially && overlappingArea > 0;
+      return partiallyVisible || overlappingArea >= area.width * area.height || overlappingArea >= nodeRect.width * nodeRect.height;
+    },
+    deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
+      const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+        nodesToRemove,
+        edgesToRemove,
+        nodes: store.nodes,
+        edges: store.edges,
+        onBeforeDelete: store.onbeforedelete
+      });
+      if (matchingNodes) {
+        store.nodes = run(() => store.nodes).filter((node) => !matchingNodes.some(({ id }) => id === node.id));
+      }
+      if (matchingEdges) {
+        store.edges = run(() => store.edges).filter((edge) => !matchingEdges.some(({ id }) => id === edge.id));
+      }
+      if (matchingNodes.length > 0 || matchingEdges.length > 0) {
+        store.ondelete?.({ nodes: matchingNodes, edges: matchingEdges });
+      }
+      return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
+    },
+    screenToFlowPosition: (position, options = { snapToGrid: true }) => {
+      if (!store.domNode) {
+        return position;
+      }
+      const _snapGrid = options.snapToGrid ? store.snapGrid : false;
+      const { x, y, zoom } = store.viewport;
+      const { x: domX, y: domY } = store.domNode.getBoundingClientRect();
+      const correctedPosition = { x: position.x - domX, y: position.y - domY };
+      return pointToRendererPoint(correctedPosition, [x, y, zoom], _snapGrid !== null, _snapGrid || [1, 1]);
+    },
+    /**
+     *
+     * @param position
+     * @returns
+     */
+    flowToScreenPosition: (position) => {
+      if (!store.domNode) {
+        return position;
+      }
+      const { x, y, zoom } = store.viewport;
+      const { x: domX, y: domY } = store.domNode.getBoundingClientRect();
+      const rendererPosition = rendererPointToPoint(position, [x, y, zoom]);
+      return { x: rendererPosition.x + domX, y: rendererPosition.y + domY };
+    },
+    toObject: () => {
+      return structuredClone({
+        nodes: [...store.nodes],
+        edges: [...store.edges],
+        viewport: { ...store.viewport }
+      });
+    },
+    updateNode,
+    updateNodeData: (id, dataUpdate, options) => {
+      const node = store.nodeLookup.get(id)?.internals.userNode;
+      if (!node) {
+        return;
+      }
+      const nextData = typeof dataUpdate === "function" ? dataUpdate(node) : dataUpdate;
+      updateNode(id, (node2) => ({
+        ...node2,
+        data: options?.replace ? nextData : { ...node2.data, ...nextData }
+      }));
+    },
+    updateEdge,
+    getNodesBounds: (nodes) => {
+      return getNodesBounds(nodes, { nodeLookup: store.nodeLookup, nodeOrigin: store.nodeOrigin });
+    },
+    getHandleConnections: ({ type, id, nodeId }) => Array.from(store.connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)?.values() ?? [])
+  };
+}
+function getElements(lookup, ids) {
+  const result = [];
+  for (const id of ids) {
+    const item = lookup.get(id);
+    if (item) {
+      const element = "internals" in item ? item.internals?.userNode : item;
+      result.push(element);
+    }
+  }
+  return result;
+}
+function KeyHandler($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      store = void 0,
+      selectionKey = "Shift",
+      multiSelectionKey = isMacOs() ? "Meta" : "Control",
+      deleteKey = "Backspace",
+      panActivationKey = " ",
+      zoomActivationKey = isMacOs() ? "Meta" : "Control"
+    } = $$props;
+    useSvelteFlow();
+    bind_props($$props, { store });
+  });
+}
+function ConnectionLine($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { store = void 0, type, containerStyle, style, LineComponent } = $$props;
+    let path = (() => {
+      if (!store.connection.inProgress) {
+        return "";
+      }
+      const pathParams = {
+        sourceX: store.connection.from.x,
+        sourceY: store.connection.from.y,
+        sourcePosition: store.connection.fromPosition,
+        targetX: store.connection.to.x,
+        targetY: store.connection.to.y,
+        targetPosition: store.connection.toPosition
+      };
+      switch (type) {
+        case ConnectionLineType.Bezier: {
+          const [path2] = getBezierPath(pathParams);
+          return path2;
+        }
+        case ConnectionLineType.Straight: {
+          const [path2] = getStraightPath(pathParams);
+          return path2;
+        }
+        case ConnectionLineType.Step:
+        case ConnectionLineType.SmoothStep: {
+          const [path2] = getSmoothStepPath({
+            ...pathParams,
+            borderRadius: type === ConnectionLineType.Step ? 0 : void 0
+          });
+          return path2;
+        }
+      }
+    })();
+    if (store.connection.inProgress) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<svg${attr("width", store.width)}${attr("height", store.height)} class="svelte-flow__connectionline"${attr_style(containerStyle)}><g${attr_class(clsx([
+        "svelte-flow__connection",
+        getConnectionStatus(store.connection.isValid)
+      ]))}>`);
+      if (LineComponent) {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push("<!---->");
+        LineComponent?.($$renderer2, {});
+        $$renderer2.push(`<!---->`);
+      } else {
+        $$renderer2.push("<!--[!-->");
+        $$renderer2.push(`<path${attr("d", path)}${attr_style(style)} fill="none" class="svelte-flow__connection-path"></path>`);
+      }
+      $$renderer2.push(`<!--]--></g></svg>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    bind_props($$props, { store });
+  });
+}
+function Panel($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      position = "top-right",
+      style,
+      class: className,
+      children,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let positionClasses = `${position}`.split("-");
+    $$renderer2.push(`<div${attributes({
+      class: clsx(["svelte-flow__panel", className, ...positionClasses]),
+      style,
+      ...rest
+    })}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+  });
+}
+function Attribution($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { proOptions, position = "bottom-right" } = $$props;
+    if (!proOptions?.hideAttribution) {
+      $$renderer2.push("<!--[-->");
+      Panel($$renderer2, {
+        position,
+        class: "svelte-flow__attribution",
+        "data-message": "Feel free to remove the attribution or check out how you could support us: https://svelteflow.dev/support-us",
+        children: ($$renderer3) => {
+          $$renderer3.push(`<a href="https://svelteflow.dev" target="_blank" rel="noopener noreferrer" aria-label="Svelte Flow attribution">Svelte Flow</a>`);
+        },
+        $$slots: { default: true }
+      });
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+function Wrapper($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      width,
+      height,
+      colorMode,
+      domNode = void 0,
+      clientWidth = void 0,
+      clientHeight = void 0,
+      children,
+      rest
+    } = $$props;
+    let {
+      id,
+      class: className,
+      nodeTypes,
+      edgeTypes,
+      colorMode: _colorMode,
+      isValidConnection,
+      onmove,
+      onmovestart,
+      onmoveend,
+      onflowerror,
+      ondelete,
+      onbeforedelete,
+      onbeforeconnect,
+      onconnect,
+      onconnectstart,
+      onconnectend,
+      onbeforereconnect,
+      onreconnect,
+      onreconnectstart,
+      onreconnectend,
+      onclickconnectstart,
+      onclickconnectend,
+      oninit,
+      onselectionchange,
+      onselectiondragstart,
+      onselectiondrag,
+      onselectiondragstop,
+      onselectionstart,
+      onselectionend,
+      clickConnect,
+      fitView,
+      fitViewOptions,
+      nodeOrigin,
+      nodeDragThreshold,
+      connectionDragThreshold,
+      minZoom,
+      maxZoom,
+      initialViewport,
+      connectionRadius,
+      connectionMode,
+      selectionMode,
+      selectNodesOnDrag,
+      snapGrid,
+      defaultMarkerColor,
+      translateExtent,
+      nodeExtent,
+      onlyRenderVisibleElements,
+      autoPanOnConnect,
+      autoPanOnNodeDrag,
+      colorModeSSR,
+      defaultEdgeOptions,
+      elevateNodesOnSelect,
+      elevateEdgesOnSelect,
+      nodesDraggable,
+      autoPanOnNodeFocus,
+      nodesConnectable,
+      elementsSelectable,
+      nodesFocusable,
+      edgesFocusable,
+      disableKeyboardA11y,
+      noDragClass,
+      noPanClass,
+      noWheelClass,
+      ariaLabelConfig,
+      autoPanSpeed,
+      panOnScrollSpeed,
+      zIndexMode,
+      ...divAttributes
+    } = rest;
+    $$renderer2.push(`<div${attributes(
+      {
+        class: clsx([
+          "svelte-flow",
+          "svelte-flow__container",
+          className,
+          colorMode
+        ]),
+        "data-testid": "svelte-flow__wrapper",
+        role: "application",
+        ...divAttributes
+      },
+      "svelte-16cj6ux",
+      void 0,
+      { width: toPxString(width), height: toPxString(height) }
+    )}>`);
+    children?.($$renderer2);
+    $$renderer2.push(`<!----></div>`);
+    bind_props($$props, { domNode, clientWidth, clientHeight });
+  });
+}
+function SvelteFlow($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      width,
+      height,
+      proOptions,
+      selectionKey,
+      deleteKey,
+      panActivationKey,
+      multiSelectionKey,
+      zoomActivationKey,
+      paneClickDistance = 1,
+      nodeClickDistance = 1,
+      onmovestart,
+      onmoveend,
+      onmove,
+      oninit,
+      onnodeclick,
+      onnodecontextmenu,
+      onnodedrag,
+      onnodedragstart,
+      onnodedragstop,
+      onnodepointerenter,
+      onnodepointermove,
+      onnodepointerleave,
+      onselectionclick,
+      onselectioncontextmenu,
+      onselectionstart,
+      onselectionend,
+      onedgeclick,
+      onedgecontextmenu,
+      onedgepointerenter,
+      onedgepointerleave,
+      onpaneclick,
+      onpanecontextmenu,
+      panOnScrollMode = PanOnScrollMode.Free,
+      preventScrolling = true,
+      zoomOnScroll = true,
+      zoomOnDoubleClick = true,
+      zoomOnPinch = true,
+      panOnScroll = false,
+      panOnScrollSpeed = 0.5,
+      panOnDrag = true,
+      selectionOnDrag = false,
+      connectionLineComponent,
+      connectionLineStyle,
+      connectionLineContainerStyle,
+      connectionLineType = ConnectionLineType.Bezier,
+      attributionPosition,
+      children,
+      nodes = [],
+      edges = [],
+      viewport = void 0,
+      $$slots,
+      $$events,
+      ...props
+    } = $$props;
+    let store = createStore({
+      props,
+      width,
+      height,
+      get nodes() {
+        return nodes;
+      },
+      set nodes(newNodes) {
+        nodes = newNodes;
+      },
+      get edges() {
+        return edges;
+      },
+      set edges(newEdges) {
+        edges = newEdges;
+      },
+      get viewport() {
+        return viewport;
+      },
+      set viewport(newViewport) {
+        viewport = newViewport;
+      }
+    });
+    const providerContext = getContext(key);
+    if (providerContext && providerContext.setStore) {
+      providerContext.setStore(store);
+    }
+    setContext(key, {
+      provider: false,
+      getStore() {
+        return store;
+      }
+    });
+    onDestroy(() => {
+      store.reset();
+    });
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      Wrapper($$renderer3, {
+        colorMode: store.colorMode,
+        width,
+        height,
+        rest: props,
+        get domNode() {
+          return store.domNode;
+        },
+        set domNode($$value) {
+          store.domNode = $$value;
+          $$settled = false;
+        },
+        get clientWidth() {
+          return store.width;
+        },
+        set clientWidth($$value) {
+          store.width = $$value;
+          $$settled = false;
+        },
+        get clientHeight() {
+          return store.height;
+        },
+        set clientHeight($$value) {
+          store.height = $$value;
+          $$settled = false;
+        },
+        children: ($$renderer4) => {
+          KeyHandler($$renderer4, {
+            selectionKey,
+            deleteKey,
+            panActivationKey,
+            multiSelectionKey,
+            zoomActivationKey,
+            get store() {
+              return store;
+            },
+            set store($$value) {
+              store = $$value;
+              $$settled = false;
+            }
+          });
+          $$renderer4.push(`<!----> `);
+          Zoom($$renderer4, {
+            panOnScrollMode,
+            preventScrolling,
+            zoomOnScroll,
+            zoomOnDoubleClick,
+            zoomOnPinch,
+            panOnScroll,
+            panOnScrollSpeed,
+            panOnDrag,
+            paneClickDistance,
+            selectionOnDrag,
+            onmovestart,
+            onmove,
+            onmoveend,
+            oninit,
+            get store() {
+              return store;
+            },
+            set store($$value) {
+              store = $$value;
+              $$settled = false;
+            },
+            children: ($$renderer5) => {
+              Pane($$renderer5, {
+                onpaneclick,
+                onpanecontextmenu,
+                onselectionstart,
+                onselectionend,
+                panOnDrag,
+                paneClickDistance,
+                selectionOnDrag,
+                get store() {
+                  return store;
+                },
+                set store($$value) {
+                  store = $$value;
+                  $$settled = false;
+                },
+                children: ($$renderer6) => {
+                  Viewport($$renderer6, {
+                    get store() {
+                      return store;
+                    },
+                    set store($$value) {
+                      store = $$value;
+                      $$settled = false;
+                    },
+                    children: ($$renderer7) => {
+                      $$renderer7.push(`<div class="svelte-flow__viewport-back svelte-flow__container"></div> `);
+                      EdgeRenderer($$renderer7, {
+                        onedgeclick,
+                        onedgecontextmenu,
+                        onedgepointerenter,
+                        onedgepointerleave,
+                        get store() {
+                          return store;
+                        },
+                        set store($$value) {
+                          store = $$value;
+                          $$settled = false;
+                        }
+                      });
+                      $$renderer7.push(`<!----> <div class="svelte-flow__edge-labels svelte-flow__container"></div> `);
+                      ConnectionLine($$renderer7, {
+                        type: connectionLineType,
+                        LineComponent: connectionLineComponent,
+                        containerStyle: connectionLineContainerStyle,
+                        style: connectionLineStyle,
+                        get store() {
+                          return store;
+                        },
+                        set store($$value) {
+                          store = $$value;
+                          $$settled = false;
+                        }
+                      });
+                      $$renderer7.push(`<!----> `);
+                      NodeRenderer($$renderer7, {
+                        nodeClickDistance,
+                        onnodeclick,
+                        onnodecontextmenu,
+                        onnodepointerenter,
+                        onnodepointermove,
+                        onnodepointerleave,
+                        onnodedrag,
+                        onnodedragstart,
+                        onnodedragstop,
+                        get store() {
+                          return store;
+                        },
+                        set store($$value) {
+                          store = $$value;
+                          $$settled = false;
+                        }
+                      });
+                      $$renderer7.push(`<!----> `);
+                      NodeSelection($$renderer7, {
+                        onselectionclick,
+                        onselectioncontextmenu,
+                        onnodedrag,
+                        onnodedragstart,
+                        onnodedragstop,
+                        get store() {
+                          return store;
+                        },
+                        set store($$value) {
+                          store = $$value;
+                          $$settled = false;
+                        }
+                      });
+                      $$renderer7.push(`<!----> <div class="svelte-flow__viewport-front svelte-flow__container"></div>`);
+                    },
+                    $$slots: { default: true }
+                  });
+                  $$renderer6.push(`<!----> `);
+                  Selection($$renderer6, {
+                    isVisible: !!(store.selectionRect && store.selectionRectMode === "user"),
+                    width: store.selectionRect?.width,
+                    height: store.selectionRect?.height,
+                    x: store.selectionRect?.x,
+                    y: store.selectionRect?.y
+                  });
+                  $$renderer6.push(`<!---->`);
+                },
+                $$slots: { default: true }
+              });
+            },
+            $$slots: { default: true }
+          });
+          $$renderer4.push(`<!----> `);
+          Attribution($$renderer4, { proOptions, position: attributionPosition });
+          $$renderer4.push(`<!----> `);
+          A11yDescriptions($$renderer4, { store });
+          $$renderer4.push(`<!----> `);
+          children?.($$renderer4);
+          $$renderer4.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      });
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { nodes, edges, viewport });
+  });
+}
+function SvelteFlowProvider($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { children } = $$props;
+    let store = createStore({ props: {}, nodes: [], edges: [] });
+    setContext(key, {
+      provider: true,
+      getStore() {
+        return store;
+      },
+      setStore: (newStore) => {
+        store = newStore;
+      }
+    });
+    onDestroy(() => {
+      store.reset();
+    });
+    children?.($$renderer2);
+    $$renderer2.push(`<!---->`);
+  });
+}
+function ControlButton($$renderer, $$props) {
+  let {
+    class: className,
+    bgColor,
+    bgColorHover,
+    color,
+    colorHover,
+    borderColor,
+    onclick,
+    children,
+    $$slots,
+    $$events,
+    ...restProps
+  } = $$props;
+  $$renderer.push(`<button${attributes(
+    {
+      type: "button",
+      class: clsx(["svelte-flow__controls-button", className]),
+      ...restProps
+    },
+    void 0,
+    void 0,
+    {
+      "--xy-controls-button-background-color-props": bgColor,
+      "--xy-controls-button-background-color-hover-props": bgColorHover,
+      "--xy-controls-button-color-props": color,
+      "--xy-controls-button-color-hover-props": colorHover,
+      "--xy-controls-button-border-color-props": borderColor
+    }
+  )}>`);
+  children?.($$renderer);
+  $$renderer.push(`<!----></button>`);
+}
+function Plus($$renderer) {
+  $$renderer.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"></path></svg>`);
+}
+function Minus($$renderer) {
+  $$renderer.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5"><path d="M0 0h32v4.2H0z"></path></svg>`);
+}
+function Fit($$renderer) {
+  $$renderer.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30"><path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z"></path></svg>`);
+}
+function Lock($$renderer) {
+  $$renderer.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z"></path></svg>`);
+}
+function Unlock($$renderer) {
+  $$renderer.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32"><path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z"></path></svg>`);
+}
+function Controls($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      position = "bottom-left",
+      orientation = "vertical",
+      showZoom = true,
+      showFitView = true,
+      showLock = true,
+      style,
+      class: className,
+      buttonBgColor,
+      buttonBgColorHover,
+      buttonColor,
+      buttonColorHover,
+      buttonBorderColor,
+      fitViewOptions,
+      children,
+      before,
+      after,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let store = useStore();
+    const buttonProps = {
+      bgColor: buttonBgColor,
+      bgColorHover: buttonBgColorHover,
+      color: buttonColor,
+      colorHover: buttonColorHover,
+      borderColor: buttonBorderColor
+    };
+    let isInteractive = store.nodesDraggable || store.nodesConnectable || store.elementsSelectable;
+    let minZoomReached = store.viewport.zoom <= store.minZoom;
+    let maxZoomReached = store.viewport.zoom >= store.maxZoom;
+    let ariaLabelConfig = store.ariaLabelConfig;
+    let orientationClass = orientation === "horizontal" ? "horizontal" : "vertical";
+    const onZoomInHandler = () => {
+      store.zoomIn();
+    };
+    const onZoomOutHandler = () => {
+      store.zoomOut();
+    };
+    const onFitViewHandler = () => {
+      store.fitView(fitViewOptions);
+    };
+    const onToggleInteractivity = () => {
+      let interactive = !isInteractive;
+      store.nodesDraggable = interactive;
+      store.nodesConnectable = interactive;
+      store.elementsSelectable = interactive;
+    };
+    Panel($$renderer2, spread_props([
+      {
+        class: ["svelte-flow__controls", orientationClass, className],
+        position,
+        "data-testid": "svelte-flow__controls",
+        "aria-label": ariaLabelConfig["controls.ariaLabel"],
+        style
+      },
+      rest,
+      {
+        children: ($$renderer3) => {
+          if (before) {
+            $$renderer3.push("<!--[-->");
+            before($$renderer3);
+            $$renderer3.push(`<!---->`);
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--> `);
+          if (showZoom) {
+            $$renderer3.push("<!--[-->");
+            ControlButton($$renderer3, spread_props([
+              {
+                onclick: onZoomInHandler,
+                class: "svelte-flow__controls-zoomin",
+                title: ariaLabelConfig["controls.zoomIn.ariaLabel"],
+                "aria-label": ariaLabelConfig["controls.zoomIn.ariaLabel"],
+                disabled: maxZoomReached
+              },
+              buttonProps,
+              {
+                children: ($$renderer4) => {
+                  Plus($$renderer4);
+                },
+                $$slots: { default: true }
+              }
+            ]));
+            $$renderer3.push(`<!----> `);
+            ControlButton($$renderer3, spread_props([
+              {
+                onclick: onZoomOutHandler,
+                class: "svelte-flow__controls-zoomout",
+                title: ariaLabelConfig["controls.zoomOut.ariaLabel"],
+                "aria-label": ariaLabelConfig["controls.zoomOut.ariaLabel"],
+                disabled: minZoomReached
+              },
+              buttonProps,
+              {
+                children: ($$renderer4) => {
+                  Minus($$renderer4);
+                },
+                $$slots: { default: true }
+              }
+            ]));
+            $$renderer3.push(`<!---->`);
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--> `);
+          if (showFitView) {
+            $$renderer3.push("<!--[-->");
+            ControlButton($$renderer3, spread_props([
+              {
+                class: "svelte-flow__controls-fitview",
+                onclick: onFitViewHandler,
+                title: ariaLabelConfig["controls.fitView.ariaLabel"],
+                "aria-label": ariaLabelConfig["controls.fitView.ariaLabel"]
+              },
+              buttonProps,
+              {
+                children: ($$renderer4) => {
+                  Fit($$renderer4);
+                },
+                $$slots: { default: true }
+              }
+            ]));
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--> `);
+          if (showLock) {
+            $$renderer3.push("<!--[-->");
+            ControlButton($$renderer3, spread_props([
+              {
+                class: "svelte-flow__controls-interactive",
+                onclick: onToggleInteractivity,
+                title: ariaLabelConfig["controls.interactive.ariaLabel"],
+                "aria-label": ariaLabelConfig["controls.interactive.ariaLabel"]
+              },
+              buttonProps,
+              {
+                children: ($$renderer4) => {
+                  if (isInteractive) {
+                    $$renderer4.push("<!--[-->");
+                    Unlock($$renderer4);
+                  } else {
+                    $$renderer4.push("<!--[!-->");
+                    Lock($$renderer4);
+                  }
+                  $$renderer4.push(`<!--]-->`);
+                },
+                $$slots: { default: true }
+              }
+            ]));
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--> `);
+          if (children) {
+            $$renderer3.push("<!--[-->");
+            children($$renderer3);
+            $$renderer3.push(`<!---->`);
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]--> `);
+          if (after) {
+            $$renderer3.push("<!--[-->");
+            after($$renderer3);
+            $$renderer3.push(`<!---->`);
+          } else {
+            $$renderer3.push("<!--[!-->");
+          }
+          $$renderer3.push(`<!--]-->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+var BackgroundVariant;
+(function(BackgroundVariant2) {
+  BackgroundVariant2["Lines"] = "lines";
+  BackgroundVariant2["Dots"] = "dots";
+  BackgroundVariant2["Cross"] = "cross";
+})(BackgroundVariant || (BackgroundVariant = {}));
+function DotPattern($$renderer, $$props) {
+  let { radius, class: className } = $$props;
+  $$renderer.push(`<circle${attr("cx", radius)}${attr("cy", radius)}${attr("r", radius)}${attr_class(clsx(["svelte-flow__background-pattern", "dots", className]))}></circle>`);
+}
+function LinePattern($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { lineWidth, dimensions, variant, class: className } = $$props;
+    $$renderer2.push(`<path${attr("stroke-width", lineWidth)}${attr("d", `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`)}${attr_class(clsx(["svelte-flow__background-pattern", variant, className]))}></path>`);
+  });
+}
+const defaultSize = {
+  [BackgroundVariant.Dots]: 1,
+  [BackgroundVariant.Lines]: 1,
+  [BackgroundVariant.Cross]: 6
+};
+function Background($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      variant = BackgroundVariant.Dots,
+      gap = 20,
+      size,
+      lineWidth = 1,
+      bgColor,
+      patternColor,
+      patternClass,
+      class: className
+    } = $$props;
+    let store = useStore();
+    let isDots = variant === BackgroundVariant.Dots;
+    let isCross = variant === BackgroundVariant.Cross;
+    let gapXY = Array.isArray(gap) ? gap : [gap, gap];
+    let patternId = `background-pattern-${store.flowId}-${id ?? ""}`;
+    let scaledGap = [
+      gapXY[0] * store.viewport.zoom || 1,
+      gapXY[1] * store.viewport.zoom || 1
+    ];
+    let scaledSize = (size ?? defaultSize[variant]) * store.viewport.zoom;
+    let patternDimensions = isCross ? [scaledSize, scaledSize] : scaledGap;
+    let patternOffset = isDots ? [scaledSize / 2, scaledSize / 2] : [patternDimensions[0] / 2, patternDimensions[1] / 2];
+    $$renderer2.push(`<svg${attr_class(clsx([
+      "svelte-flow__background",
+      "svelte-flow__container",
+      className
+    ]))} data-testid="svelte-flow__background"${attr_style("", {
+      "--xy-background-color-props": bgColor,
+      "--xy-background-pattern-color-props": patternColor
+    })}><pattern${attr("id", patternId)}${attr("x", store.viewport.x % scaledGap[0])}${attr("y", store.viewport.y % scaledGap[1])}${attr("width", scaledGap[0])}${attr("height", scaledGap[1])} patternUnits="userSpaceOnUse"${attr("patternTransform", `translate(-${patternOffset[0]},-${patternOffset[1]})`)}>`);
+    if (isDots) {
+      $$renderer2.push("<!--[-->");
+      DotPattern($$renderer2, { radius: scaledSize / 2, class: patternClass });
+    } else {
+      $$renderer2.push("<!--[!-->");
+      LinePattern($$renderer2, {
+        dimensions: patternDimensions,
+        variant,
+        lineWidth,
+        class: patternClass
+      });
+    }
+    $$renderer2.push(`<!--]--></pattern><rect x="0" y="0" width="100%" height="100%"${attr("fill", `url(#${patternId})`)}></rect></svg>`);
+  });
+}
+function useInternalNode(id) {
+  const { nodeLookup, nodes } = useStore();
+  const node = (() => {
+    return nodeLookup.get(id);
+  })();
+  return {
+    get current() {
+      return node;
+    }
+  };
+}
+function MinimapNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      id,
+      x: xProp,
+      y: yProp,
+      width: widthProp,
+      height: heightProp,
+      borderRadius = 5,
+      color,
+      shapeRendering,
+      strokeColor,
+      strokeWidth = 2,
+      selected,
+      class: className,
+      nodeComponent
+    } = $$props;
+    let internalNode = useInternalNode(id);
+    let { width, height, x, y } = (() => {
+      if (!internalNode.current) {
+        return { width: 0, height: 0, x: 0, y: 0 };
+      }
+      const { width: width2, height: height2 } = getNodeDimensions(internalNode.current);
+      return {
+        width: widthProp ?? width2,
+        height: heightProp ?? height2,
+        x: xProp ?? internalNode.current.internals.positionAbsolute.x,
+        y: yProp ?? internalNode.current.internals.positionAbsolute.y
+      };
+    })();
+    if (nodeComponent) {
+      $$renderer2.push("<!--[-->");
+      const CustomComponent = nodeComponent;
+      $$renderer2.push("<!---->");
+      CustomComponent?.($$renderer2, {
+        id,
+        x,
+        y,
+        width,
+        height,
+        borderRadius,
+        class: className,
+        color,
+        shapeRendering,
+        strokeColor,
+        strokeWidth,
+        selected
+      });
+      $$renderer2.push(`<!---->`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<rect${attr_class(clsx(["svelte-flow__minimap-node", className]), void 0, { "selected": selected })}${attr("x", x)}${attr("y", y)}${attr("rx", borderRadius)}${attr("ry", borderRadius)}${attr("width", width)}${attr("height", height)}${attr("shape-rendering", shapeRendering)}${attr_style("", {
+        fill: color,
+        stroke: strokeColor,
+        "stroke-width": strokeWidth
+      })}></rect>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+const getAttrFunction = (func) => func instanceof Function ? func : () => func;
+function Minimap($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      position = "bottom-right",
+      ariaLabel,
+      nodeStrokeColor = "transparent",
+      nodeColor,
+      nodeClass = "",
+      nodeBorderRadius = 5,
+      nodeStrokeWidth = 2,
+      nodeComponent,
+      bgColor,
+      maskColor,
+      maskStrokeColor,
+      maskStrokeWidth,
+      width = 200,
+      height = 150,
+      pannable = true,
+      zoomable = true,
+      inversePan,
+      zoomStep,
+      class: className,
+      $$slots,
+      $$events,
+      ...rest
+    } = $$props;
+    let store = useStore();
+    let ariaLabelConfig = store.ariaLabelConfig;
+    const shapeRendering = (
+      // @ts-expect-error - TS doesn't know about chrome
+      typeof window === "undefined" || !!window.chrome ? "crispEdges" : "geometricPrecision"
+    );
+    let labelledBy = `svelte-flow__minimap-desc-${store.flowId}`;
+    let viewBB = {
+      x: -store.viewport.x / store.viewport.zoom,
+      y: -store.viewport.y / store.viewport.zoom,
+      width: store.width / store.viewport.zoom,
+      height: store.height / store.viewport.zoom
+    };
+    let boundingRect = getBoundsOfRects(getInternalNodesBounds(store.nodeLookup, { filter: (n) => !n.hidden }), viewBB);
+    let scaledWidth = boundingRect.width / width;
+    let scaledHeight = boundingRect.height / height;
+    let viewScale = Math.max(scaledWidth, scaledHeight);
+    let viewWidth = viewScale * width;
+    let viewHeight = viewScale * height;
+    let offset = 5 * viewScale;
+    let x = boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset;
+    let y = boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset;
+    let viewboxWidth = viewWidth + offset * 2;
+    let viewboxHeight = viewHeight + offset * 2;
+    css_props($$renderer2, true, { "--xy-minimap-background-color-props": bgColor }, () => {
+      Panel($$renderer2, spread_props([
+        {
+          position,
+          class: ["svelte-flow__minimap", className],
+          "data-testid": "svelte-flow__minimap"
+        },
+        rest,
+        {
+          children: ($$renderer3) => {
+            if (store.panZoom) {
+              $$renderer3.push("<!--[-->");
+              $$renderer3.push(`<svg${attr("width", width)}${attr("height", height)}${attr("viewBox", `${stringify(x)} ${stringify(y)} ${stringify(viewboxWidth)} ${stringify(viewboxHeight)}`)} class="svelte-flow__minimap-svg" role="img"${attr("aria-labelledby", labelledBy)}${attr_style("", {
+                "--xy-minimap-mask-background-color-props": maskColor,
+                "--xy-minimap-mask-stroke-color-props": maskStrokeColor,
+                "--xy-minimap-mask-stroke-width-props": maskStrokeWidth ? maskStrokeWidth * viewScale : void 0
+              })}>`);
+              if (ariaLabel ?? ariaLabelConfig["minimap.ariaLabel"]) {
+                $$renderer3.push("<!--[-->");
+                $$renderer3.push(`<title${attr("id", labelledBy)}>${escape_html(ariaLabel ?? ariaLabelConfig["minimap.ariaLabel"])}</title>`);
+              } else {
+                $$renderer3.push("<!--[!-->");
+              }
+              $$renderer3.push(`<!--]--><!--[-->`);
+              const each_array = ensure_array_like(store.nodes);
+              for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+                let userNode = each_array[$$index];
+                const node = store.nodeLookup.get(userNode.id);
+                if (node && nodeHasDimensions(node) && !node.hidden) {
+                  $$renderer3.push("<!--[-->");
+                  MinimapNode($$renderer3, {
+                    id: node.id,
+                    selected: node.selected,
+                    nodeComponent,
+                    color: nodeColor === void 0 ? void 0 : getAttrFunction(nodeColor)(userNode),
+                    borderRadius: nodeBorderRadius,
+                    strokeColor: getAttrFunction(nodeStrokeColor)(userNode),
+                    strokeWidth: nodeStrokeWidth,
+                    shapeRendering,
+                    class: getAttrFunction(nodeClass)(userNode)
+                  });
+                } else {
+                  $$renderer3.push("<!--[!-->");
+                }
+                $$renderer3.push(`<!--]-->`);
+              }
+              $$renderer3.push(`<!--]--><path class="svelte-flow__minimap-mask"${attr("d", `M${stringify(x - offset)},${stringify(y - offset)}h${stringify(viewboxWidth + offset * 2)}v${stringify(viewboxHeight + offset * 2)}h${stringify(-viewboxWidth - offset * 2)}z
+      M${stringify(viewBB.x)},${stringify(viewBB.y)}h${stringify(viewBB.width)}v${stringify(viewBB.height)}h${stringify(-viewBB.width)}z`)} fill-rule="evenodd" pointer-events="none"></path></svg>`);
+            } else {
+              $$renderer3.push("<!--[!-->");
+            }
+            $$renderer3.push(`<!--]-->`);
+          },
+          $$slots: { default: true }
+        }
+      ]));
+    });
+  });
+}
+function useNodes() {
+  const store = useStore();
+  return {
+    get current() {
+      return store.nodes;
+    },
+    set current(nodes) {
+      store.nodes = nodes;
+    },
+    update(updateFn) {
+      store.nodes = updateFn(store.nodes);
+    },
+    set(nodes) {
+      store.nodes = nodes;
+    }
+  };
+}
+function useEdges() {
+  const store = useStore();
+  return {
+    get current() {
+      return store.edges;
+    },
+    set current(edges) {
+      store.edges = edges;
+    },
+    update(updateFn) {
+      store.edges = updateFn(store.edges);
+    },
+    set(edges) {
+      store.edges = edges;
+    }
+  };
+}
+const ServiceType = {
+  // Compute
+  EC2: "EC2",
+  ECS: "ECS",
+  EKS: "EKS",
+  LAMBDA: "LAMBDA",
+  FARGATE: "FARGATE",
+  BATCH: "BATCH",
+  ELASTIC_BEANSTALK: "ELASTIC_BEANSTALK",
+  APP_RUNNER: "APP_RUNNER",
+  // Containers
+  ECR: "ECR",
+  ECS_ANYWHERE: "ECS_ANYWHERE",
+  EKS_ANYWHERE: "EKS_ANYWHERE",
+  // Storage
+  S3: "S3",
+  EFS: "EFS",
+  EBS: "EBS",
+  FSX: "FSX",
+  STORAGE_GATEWAY: "STORAGE_GATEWAY",
+  BACKUP: "BACKUP",
+  S3_GLACIER: "S3_GLACIER",
+  // Database
+  RDS: "RDS",
+  DYNAMODB: "DYNAMODB",
+  ELASTICACHE: "ELASTICACHE",
+  VALKEY: "VALKEY",
+  AURORA: "AURORA",
+  NEPTUNE: "NEPTUNE",
+  DOCUMENTDB: "DOCUMENTDB",
+  KEYSPACES: "KEYSPACES",
+  TIMESTREAM: "TIMESTREAM",
+  MEMORYDB: "MEMORYDB",
+  QLDB: "QLDB",
+  // Networking & Content Delivery
+  VPC: "VPC",
+  CLOUDFRONT: "CLOUDFRONT",
+  ROUTE53: "ROUTE53",
+  API_GATEWAY: "API_GATEWAY",
+  DIRECT_CONNECT: "DIRECT_CONNECT",
+  APP_MESH: "APP_MESH",
+  CLOUD_MAP: "CLOUD_MAP",
+  GLOBAL_ACCELERATOR: "GLOBAL_ACCELERATOR",
+  // Load Balancers
+  ALB: "ALB",
+  NLB: "NLB",
+  ELB: "ELB",
+  ELASTIC_LOAD_BALANCING: "ELASTIC_LOAD_BALANCING",
+  // Messaging & Integration
+  SQS: "SQS",
+  SNS: "SNS",
+  EVENTBRIDGE: "EVENTBRIDGE",
+  EVENTBRIDGE_RULE: "EVENTBRIDGE_RULE",
+  STEP_FUNCTIONS: "STEP_FUNCTIONS",
+  SWF: "SWF",
+  MQ: "MQ",
+  APPSYNC: "APPSYNC",
+  // Analytics
+  KINESIS: "KINESIS",
+  KINESIS_FIREHOSE: "KINESIS_FIREHOSE",
+  KINESIS_ANALYTICS: "KINESIS_ANALYTICS",
+  ATHENA: "ATHENA",
+  EMR: "EMR",
+  GLUE: "GLUE",
+  REDSHIFT: "REDSHIFT",
+  QUICKSIGHT: "QUICKSIGHT",
+  OPENSEARCH: "OPENSEARCH",
+  MSK: "MSK",
+  // Security & Identity
+  IAM: "IAM",
+  COGNITO: "COGNITO",
+  SECRETS_MANAGER: "SECRETS_MANAGER",
+  KMS: "KMS",
+  WAF: "WAF",
+  SHIELD: "SHIELD",
+  GUARDDUTY: "GUARDDUTY",
+  INSPECTOR: "INSPECTOR",
+  MACIE: "MACIE",
+  SECURITY_HUB: "SECURITY_HUB",
+  CERTIFICATE_MANAGER: "CERTIFICATE_MANAGER",
+  FIREWALL_MANAGER: "FIREWALL_MANAGER",
+  NETWORK_FIREWALL: "NETWORK_FIREWALL",
+  // Management & Governance
+  CLOUDWATCH: "CLOUDWATCH",
+  CLOUDTRAIL: "CLOUDTRAIL",
+  CONFIG: "CONFIG",
+  SYSTEMS_MANAGER: "SYSTEMS_MANAGER",
+  CLOUDFORMATION: "CLOUDFORMATION",
+  ORGANIZATIONS: "ORGANIZATIONS",
+  CONTROL_TOWER: "CONTROL_TOWER",
+  TRUSTED_ADVISOR: "TRUSTED_ADVISOR",
+  // Developer Tools
+  CODECOMMIT: "CODECOMMIT",
+  CODEBUILD: "CODEBUILD",
+  CODEDEPLOY: "CODEDEPLOY",
+  CODEPIPELINE: "CODEPIPELINE",
+  CODEARTIFACT: "CODEARTIFACT",
+  CLOUD9: "CLOUD9",
+  X_RAY: "X_RAY",
+  // Machine Learning
+  SAGEMAKER: "SAGEMAKER",
+  COMPREHEND: "COMPREHEND",
+  REKOGNITION: "REKOGNITION",
+  TEXTRACT: "TEXTRACT",
+  TRANSLATE: "TRANSLATE",
+  TRANSCRIBE: "TRANSCRIBE",
+  POLLY: "POLLY",
+  LEX: "LEX",
+  // Migration & Transfer
+  DMS: "DMS",
+  TRANSFER_FAMILY: "TRANSFER_FAMILY",
+  MIGRATION_HUB: "MIGRATION_HUB",
+  DATASYNC: "DATASYNC",
+  SNOWBALL: "SNOWBALL",
+  // Application Integration
+  AMPLIFY: "AMPLIFY"
+};
+const SERVICE_TYPE_TO_ICON = {
+  [ServiceType.EC2]: "Compute/EC2.svg",
+  [ServiceType.ECS]: "Containers/Elastic-Container-Service.svg",
+  [ServiceType.EKS]: "Containers/Elastic-Kubernetes-Service.svg",
+  [ServiceType.LAMBDA]: "Compute/Lambda.svg",
+  [ServiceType.FARGATE]: "Compute/Fargate.svg",
+  [ServiceType.BATCH]: "Compute/Batch.svg",
+  [ServiceType.ELASTIC_BEANSTALK]: "Compute/Elastic-Beanstalk.svg",
+  [ServiceType.APP_RUNNER]: "Containers/App-Runner.svg",
+  [ServiceType.ECR]: "Containers/Elastic-Container-Registry.svg",
+  [ServiceType.ECS_ANYWHERE]: "Containers/ECS-Anywhere.svg",
+  [ServiceType.EKS_ANYWHERE]: "Containers/EKS-Anywhere.svg",
+  [ServiceType.S3]: "Storage/Simple-Storage-Service.svg",
+  [ServiceType.EFS]: "Storage/EFS.svg",
+  [ServiceType.EBS]: "Storage/Elastic-Block-Store.svg",
+  [ServiceType.FSX]: "Storage/FSx.svg",
+  [ServiceType.STORAGE_GATEWAY]: "Storage/Storage-Gateway.svg",
+  [ServiceType.BACKUP]: "Storage/Backup.svg",
+  [ServiceType.S3_GLACIER]: "Storage/Simple-Storage-Service-Glacier.svg",
+  [ServiceType.RDS]: "Database/RDS.svg",
+  [ServiceType.DYNAMODB]: "Database/DynamoDB.svg",
+  [ServiceType.ELASTICACHE]: "Database/ElastiCache.svg",
+  [ServiceType.VALKEY]: "Database/ElastiCache.svg",
+  [ServiceType.AURORA]: "Database/Aurora.svg",
+  [ServiceType.NEPTUNE]: "Database/Neptune.svg",
+  [ServiceType.DOCUMENTDB]: "Database/DocumentDB.svg",
+  [ServiceType.KEYSPACES]: "Database/Keyspaces.svg",
+  [ServiceType.TIMESTREAM]: "Database/Timestream.svg",
+  [ServiceType.MEMORYDB]: "Database/MemoryDB-for-Redis.svg",
+  [ServiceType.QLDB]: "Database/Quantum-Ledger-Database.svg",
+  [ServiceType.VPC]: "Networking-Content-Delivery/Virtual-Private-Cloud.svg",
+  [ServiceType.CLOUDFRONT]: "Networking-Content-Delivery/CloudFront.svg",
+  [ServiceType.ROUTE53]: "Networking-Content-Delivery/Route-53.svg",
+  [ServiceType.API_GATEWAY]: "App-Integration/API-Gateway.svg",
+  [ServiceType.DIRECT_CONNECT]: "Networking-Content-Delivery/Direct-Connect.svg",
+  [ServiceType.APP_MESH]: "Networking-Content-Delivery/App-Mesh.svg",
+  [ServiceType.CLOUD_MAP]: "Networking-Content-Delivery/Cloud-Map.svg",
+  [ServiceType.GLOBAL_ACCELERATOR]: "Networking-Content-Delivery/Global-Accelerator.svg",
+  [ServiceType.ALB]: "Networking-Content-Delivery/Elastic-Load-Balancing.svg",
+  [ServiceType.NLB]: "Networking-Content-Delivery/Elastic-Load-Balancing.svg",
+  [ServiceType.ELB]: "Networking-Content-Delivery/Elastic-Load-Balancing.svg",
+  [ServiceType.ELASTIC_LOAD_BALANCING]: "Networking-Content-Delivery/Elastic-Load-Balancing.svg",
+  [ServiceType.SQS]: "App-Integration/Simple-Queue-Service.svg",
+  [ServiceType.SNS]: "App-Integration/Simple-Notification-Service.svg",
+  [ServiceType.EVENTBRIDGE]: "App-Integration/EventBridge.svg",
+  [ServiceType.EVENTBRIDGE_RULE]: "App-Integration/EventBridge.svg",
+  [ServiceType.STEP_FUNCTIONS]: "App-Integration/Step-Functions.svg",
+  [ServiceType.SWF]: "App-Integration/Step-Functions.svg",
+  [ServiceType.MQ]: "App-Integration/MQ.svg",
+  [ServiceType.APPSYNC]: "Front-End-Web-Mobile/AppSync.svg",
+  [ServiceType.KINESIS]: "Analytics/Kinesis.svg",
+  [ServiceType.KINESIS_FIREHOSE]: "Analytics/Kinesis-Firehose.svg",
+  [ServiceType.KINESIS_ANALYTICS]: "Analytics/Kinesis-Data-Analytics.svg",
+  [ServiceType.ATHENA]: "Analytics/Athena.svg",
+  [ServiceType.EMR]: "Analytics/EMR.svg",
+  [ServiceType.GLUE]: "Analytics/Glue.svg",
+  [ServiceType.REDSHIFT]: "Analytics/Redshift.svg",
+  [ServiceType.QUICKSIGHT]: "Analytics/QuickSight.svg",
+  [ServiceType.OPENSEARCH]: "Analytics/OpenSearch-Service.svg",
+  [ServiceType.MSK]: "Analytics/Managed-Streaming-for-Apache-Kafka.svg",
+  [ServiceType.IAM]: "Security-Identity-Compliance/Identity-and-Access-Management.svg",
+  [ServiceType.COGNITO]: "Security-Identity-Compliance/Cognito.svg",
+  [ServiceType.SECRETS_MANAGER]: "Security-Identity-Compliance/Secrets-Manager.svg",
+  [ServiceType.KMS]: "Security-Identity-Compliance/Key-Management-Service.svg",
+  [ServiceType.WAF]: "Security-Identity-Compliance/WAF.svg",
+  [ServiceType.SHIELD]: "Security-Identity-Compliance/Shield.svg",
+  [ServiceType.GUARDDUTY]: "Security-Identity-Compliance/GuardDuty.svg",
+  [ServiceType.INSPECTOR]: "Security-Identity-Compliance/Inspector.svg",
+  [ServiceType.MACIE]: "Security-Identity-Compliance/Macie.svg",
+  [ServiceType.SECURITY_HUB]: "Security-Identity-Compliance/Security-Hub.svg",
+  [ServiceType.CERTIFICATE_MANAGER]: "Security-Identity-Compliance/Certificate-Manager.svg",
+  [ServiceType.FIREWALL_MANAGER]: "Security-Identity-Compliance/Firewall-Manager.svg",
+  [ServiceType.NETWORK_FIREWALL]: "Security-Identity-Compliance/Network-Firewall.svg",
+  [ServiceType.CLOUDWATCH]: "Management-Governance/CloudWatch.svg",
+  [ServiceType.CLOUDTRAIL]: "Management-Governance/CloudTrail.svg",
+  [ServiceType.CONFIG]: "Management-Governance/Config.svg",
+  [ServiceType.SYSTEMS_MANAGER]: "Management-Governance/Systems-Manager.svg",
+  [ServiceType.CLOUDFORMATION]: "Management-Governance/CloudFormation.svg",
+  [ServiceType.ORGANIZATIONS]: "Management-Governance/Organizations.svg",
+  [ServiceType.CONTROL_TOWER]: "Management-Governance/Control-Tower.svg",
+  [ServiceType.TRUSTED_ADVISOR]: "Management-Governance/Trusted-Advisor.svg",
+  [ServiceType.CODECOMMIT]: "Developer-Tools/CodeCommit.svg",
+  [ServiceType.CODEBUILD]: "Developer-Tools/CodeBuild.svg",
+  [ServiceType.CODEDEPLOY]: "Developer-Tools/CodeDeploy.svg",
+  [ServiceType.CODEPIPELINE]: "Developer-Tools/CodePipeline.svg",
+  [ServiceType.CODEARTIFACT]: "Developer-Tools/CodeArtifact.svg",
+  [ServiceType.CLOUD9]: "Developer-Tools/Cloud9.svg",
+  [ServiceType.X_RAY]: "Developer-Tools/X-Ray.svg",
+  [ServiceType.SAGEMAKER]: "Machine-Learning/SageMaker.svg",
+  [ServiceType.COMPREHEND]: "Machine-Learning/Comprehend.svg",
+  [ServiceType.REKOGNITION]: "Machine-Learning/Rekognition.svg",
+  [ServiceType.TEXTRACT]: "Machine-Learning/Textract.svg",
+  [ServiceType.TRANSLATE]: "Machine-Learning/Translate.svg",
+  [ServiceType.TRANSCRIBE]: "Machine-Learning/Transcribe.svg",
+  [ServiceType.POLLY]: "Machine-Learning/Polly.svg",
+  [ServiceType.LEX]: "Machine-Learning/Lex.svg",
+  [ServiceType.DMS]: "Migration-Transfer/Database-Migration-Service.svg",
+  [ServiceType.TRANSFER_FAMILY]: "Migration-Transfer/Transfer-Family.svg",
+  [ServiceType.MIGRATION_HUB]: "Migration-Transfer/Migration-Hub.svg",
+  [ServiceType.DATASYNC]: "Migration-Transfer/DataSync.svg",
+  [ServiceType.SNOWBALL]: "Migration-Transfer/Snowball.svg",
+  [ServiceType.AMPLIFY]: "Front-End-Web-Mobile/Amplify.svg"
+};
+function getAwsIconPath(serviceType) {
+  if (!serviceType) {
+    return null;
+  }
+  const file = SERVICE_TYPE_TO_ICON[serviceType];
+  return file ? `/icons/aws/${file}` : null;
+}
+function ExternalNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data } = $$props;
+    let initials = data.label ? data.label.split(" ").map((part) => part[0]).join("").slice(0, 3).toUpperCase() : "Svc";
+    let iconPath = getAwsIconPath(data.serviceType);
+    Handle($$renderer2, { type: "target", position: Position.Left, id: "input" });
+    $$renderer2.push(`<!----> `);
+    Handle($$renderer2, { type: "source", position: Position.Right, id: "output" });
+    $$renderer2.push(`<!----> <div class="flex items-center gap-3" role="navigation">`);
+    if (iconPath) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<img${attr("src", iconPath)}${attr("alt", data.label)} class="h-10 w-10 rounded-lg bg-white/5 object-contain" loading="lazy"/>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-xs font-semibold">${escape_html(initials)}</div>`);
+    }
+    $$renderer2.push(`<!--]--> <div class="flex-1"><div class="text-sm font-semibold">${escape_html(data.label)}</div></div></div>`);
+  });
+}
+function MainGroupNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data, selected = false } = $$props;
+    Handle($$renderer2, { type: "target", position: Position.Left, id: "input" });
+    $$renderer2.push(`<!----> `);
+    Handle($$renderer2, { type: "source", position: Position.Right, id: "output" });
+    $$renderer2.push(`<!----> <div class="relative" aria-label="Group node" aria-roledescription="Group node">${escape_html(data.label)}</div>`);
+  });
+}
+function ServiceNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data } = $$props;
+    let initials = data.label ? data.label.split(" ").map((part) => part[0]).join("").slice(0, 3).toUpperCase() : "Svc";
+    let iconPath = getAwsIconPath(data.serviceType);
+    Handle($$renderer2, { type: "target", position: Position.Left, id: "input" });
+    $$renderer2.push(`<!----> `);
+    Handle($$renderer2, { type: "source", position: Position.Right, id: "output" });
+    $$renderer2.push(`<!----> <div class="flex items-center gap-3">`);
+    if (iconPath) {
+      $$renderer2.push("<!--[-->");
+      $$renderer2.push(`<img${attr("src", iconPath)}${attr("alt", data.label)} class="h-10 w-10 rounded-lg bg-white/5 object-contain" loading="lazy"/>`);
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-xs font-semibold">${escape_html(initials)}</div>`);
+    }
+    $$renderer2.push(`<!--]--> <div class="flex-1"><div class="text-sm font-semibold">${escape_html(data.label)}</div></div></div>`);
+  });
+}
+function ServiceGroupNode($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data, width, height, selected = false } = $$props;
+    $$renderer2.push(`<div class="custom-group-node"${attr_style("", {
+      width: `${stringify(width)}px`,
+      height: `${stringify(height)}px`
+    })}><div class="big-title">${escape_html(data.label)}</div></div>`);
+  });
+}
+function SnakeEdge($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    var $$store_subs;
+    let {
+      id,
+      data,
+      source,
+      target,
+      sourceHandleId,
+      targetHandleId,
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      label,
+      style,
+      selected
+    } = $$props;
+    const nodes = useNodes();
+    const edges = useEdges();
+    let isConnectedNodeSelected = (() => {
+      const sourceNode = nodes.current.find((n) => n.id === source);
+      const targetNode = nodes.current.find((n) => n.id === target);
+      return sourceNode?.selected || targetNode?.selected;
+    })();
+    let isEffectivelySelected = selected || isConnectedNodeSelected;
+    calculateEdgeOffset(id, nodes.current, edges.current, true);
+    calculateEdgeOffset(id, nodes.current, edges.current, false);
+    onDestroy(() => {
+      routingStore.unregisterEdge(id);
+    });
+    let pts = store_get($$store_subs ??= {}, "$routingStore", routingStore)[id] || [];
+    let edgePathData = (() => {
+      if (!pts || pts.length === 0) {
+        return {
+          path: `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`,
+          labelX: (sourceX + targetX) / 2,
+          labelY: (sourceY + targetY) / 2
+        };
+      }
+      let d = `M ${pts[0].x} ${pts[0].y}`;
+      const radius = 8;
+      for (let i = 0; i < pts.length - 1; i++) {
+        const p = pts[i];
+        const next = pts[i + 1];
+        const prev = i > 0 ? pts[i - 1] : null;
+        if (prev && next) {
+          const dPrev = { x: p.x - prev.x, y: p.y - prev.y };
+          const dNext = { x: next.x - p.x, y: next.y - p.y };
+          const lenPrev = Math.hypot(dPrev.x, dPrev.y);
+          const lenNext = Math.hypot(dNext.x, dNext.y);
+          const actualRadius = Math.min(radius, lenPrev / 2, lenNext / 2);
+          const startPoint = {
+            x: p.x - dPrev.x / lenPrev * actualRadius,
+            y: p.y - dPrev.y / lenPrev * actualRadius
+          };
+          const endPoint = {
+            x: p.x + dNext.x / lenNext * actualRadius,
+            y: p.y + dNext.y / lenNext * actualRadius
+          };
+          d += ` L ${startPoint.x} ${startPoint.y} Q ${p.x} ${p.y} ${endPoint.x} ${endPoint.y}`;
+        } else if (i > 0) {
+          d += ` L ${p.x} ${p.y}`;
+        }
+      }
+      d += ` L ${pts[pts.length - 1].x} ${pts[pts.length - 1].y}`;
+      let longestLen = -1;
+      let labelPos2 = { x: (sourceX + targetX) / 2, y: (sourceY + targetY) / 2 };
+      for (let i = 0; i < pts.length - 1; i++) {
+        const dx = pts[i + 1].x - pts[i].x;
+        const dy = pts[i + 1].y - pts[i].y;
+        const len = Math.hypot(dx, dy);
+        if (len > longestLen) {
+          longestLen = len;
+          labelPos2 = { x: pts[i].x + dx / 2, y: pts[i].y + dy / 2 };
+        }
+      }
+      return { path: d, labelX: labelPos2.x, labelY: labelPos2.y };
+    })();
+    let path = edgePathData.path;
+    let labelPos = { x: edgePathData.labelX, y: edgePathData.labelY };
+    let incomingOrOutgoingOrInternal = (() => {
+      const urlGroupId = page.params.groupId;
+      if (!urlGroupId) {
+        return null;
+      }
+      const sourceGroup = source.split("::")[1];
+      const targetGroup = target.split("::")[1];
+      if (sourceGroup === targetGroup) {
+        return "internal";
+      } else if (sourceHandleId === "output" && sourceGroup === urlGroupId) {
+        return "outgoing";
+      } else if (targetHandleId === "input" && targetGroup === urlGroupId) {
+        return "incoming";
+      } else {
+        return "internal";
+      }
+    })();
+    BaseEdge($$renderer2, {
+      class: `${isEffectivelySelected ? "snake-edge-path selected" : "snake-edge-path"} ${incomingOrOutgoingOrInternal ?? ""}`,
+      id,
+      path,
+      style
+    });
+    $$renderer2.push(`<!----> `);
+    if (label) {
+      $$renderer2.push("<!--[-->");
+      EdgeLabel($$renderer2, {
+        children: ($$renderer3) => {
+          $$renderer3.push(`<div${attr_class("edge-label", void 0, { "selected": isEffectivelySelected })}${attr_style("", {
+            transform: `translate(-50%, -50%) translate(${stringify(labelPos.x)}px, ${stringify(labelPos.y)}px)`
+          })}>${escape_html(label)}</div>`);
+        },
+        $$slots: { default: true }
+      });
+    } else {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+    if ($$store_subs) unsubscribe_stores($$store_subs);
+  });
+}
+function FlowCanvas($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    var $$store_subs;
+    let { graph = null } = $$props;
+    const nodeTypes = {
+      mainGroup: MainGroupNode,
+      service: ServiceNode,
+      external: ExternalNode,
+      serviceGroup: ServiceGroupNode
+    };
+    const edgeTypes = { snake: SnakeEdge };
+    let nodes = [];
+    let edges = [];
+    let emptyStateLabel = "No diagram available.";
+    let hasGraphData = !!graph && graph.serviceNodes.length > 0;
+    function goHome() {
+      goto();
+    }
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div data-testid="flow-canvas" class="flex h-full flex-auto flex-col overflow-hidden rounded-2xl border border-white/5 bg-black/20 shadow-xl">`);
+      if (hasGraphData) {
+        $$renderer3.push("<!--[-->");
+        SvelteFlow($$renderer3, {
+          nodeTypes,
+          edgeTypes,
+          nodesDraggable: true,
+          nodesConnectable: false,
+          panOnDrag: true,
+          zoomOnScroll: true,
+          selectionOnDrag: false,
+          colorMode: theme.isDark ? "dark" : "light",
+          fitView: true,
+          fitViewOptions: { padding: 0.2 },
+          get nodes() {
+            return nodes;
+          },
+          set nodes($$value) {
+            nodes = $$value;
+            $$settled = false;
+          },
+          get edges() {
+            return edges;
+          },
+          set edges($$value) {
+            edges = $$value;
+            $$settled = false;
+          },
+          children: ($$renderer4) => {
+            Background($$renderer4, {
+              bgColor: theme.isDark ? "#1f2937" : "#e5e7eb",
+              variant: BackgroundVariant.Dots,
+              gap: 24
+            });
+            $$renderer4.push(`<!----> `);
+            Minimap($$renderer4, {
+              nodeColor: (n) => {
+                if (n.type === "group") return "#2563eb";
+                if (n.type === "service") return "#16a34a";
+                if (n.type === "external") return "#d97706";
+                return "#9ca3af";
+              },
+              position: "bottom-left"
+            });
+            $$renderer4.push(`<!----> `);
+            Controls($$renderer4, {
+              position: "top-left",
+              children: ($$renderer5) => {
+                ControlButton($$renderer5, {
+                  onclick: goHome,
+                  title: "Go Home",
+                  "aria-label": "Go to home page",
+                  children: ($$renderer6) => {
+                    Icon($$renderer6, { icon: "mdi:home" });
+                  },
+                  $$slots: { default: true }
+                });
+              },
+              $$slots: { default: true }
+            });
+            $$renderer4.push(`<!----> `);
+            Panel($$renderer4, {
+              position: "bottom-right",
+              children: ($$renderer5) => {
+                if (store_get($$store_subs ??= {}, "$showLegend", showLegend) && false) ;
+                else {
+                  $$renderer5.push("<!--[!-->");
+                }
+                $$renderer5.push(`<!--]-->`);
+              },
+              $$slots: { default: true }
+            });
+            $$renderer4.push(`<!---->`);
+          },
+          $$slots: { default: true }
+        });
+      } else {
+        $$renderer3.push("<!--[!-->");
+        $$renderer3.push(`<div class="flex h-full flex-col items-center justify-center gap-2 text-sm text-gray-400 dark:text-gray-300"><span class="text-3xl" aria-hidden="true">🌀</span> <span>${escape_html(emptyStateLabel)}</span></div>`);
+      }
+      $$renderer3.push(`<!--]--> `);
+      {
+        $$renderer3.push("<!--[-->");
+        $$renderer3.push(`<div data-testid="flow-loading-overlay" class="pointer-events-none absolute inset-0 flex items-center justify-center bg-white/80 text-sm text-gray-700 dark:bg-black/70 dark:text-gray-200 backdrop-blur">Rendering diagram…</div>`);
+      }
+      $$renderer3.push(`<!--]--> `);
+      {
+        $$renderer3.push("<!--[!-->");
+      }
+      $$renderer3.push(`<!--]--></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    if ($$store_subs) unsubscribe_stores($$store_subs);
+  });
+}
+function GenericSidebarCard($$renderer, $$props) {
+  const {
+    title,
+    subtitle,
+    description,
+    children,
+    iconPath,
+    iconAlt,
+    classes
+  } = $$props;
+  $$renderer.push(`<div${attr_class(`sidebar-card ${stringify(classes)}`)}><div class="flex items-start justify-between"><div class="flex flex-col"><div class="sidebar-card-title">${escape_html(title)}</div> `);
+  if (subtitle) {
+    $$renderer.push("<!--[-->");
+    $$renderer.push(`<h3 class="sidebar-card-subtitle">${escape_html(subtitle)}</h3>`);
+  } else {
+    $$renderer.push("<!--[!-->");
+  }
+  $$renderer.push(`<!--]--></div> `);
+  if (iconPath) {
+    $$renderer.push("<!--[-->");
+    $$renderer.push(`<img${attr("src", iconPath)}${attr("alt", iconAlt)} class="h-10 w-10 rounded-lg bg-white/5 object-contain"/>`);
+  } else if (iconAlt) {
+    $$renderer.push("<!--[1-->");
+    $$renderer.push(`<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-xs font-semibold text-gray-200">${escape_html(iconAlt)}</div>`);
+  } else {
+    $$renderer.push("<!--[!-->");
+  }
+  $$renderer.push(`<!--]--></div> `);
+  if (description) {
+    $$renderer.push("<!--[-->");
+    $$renderer.push(`<p class="sidebar-card-contents">${escape_html(description)}</p>`);
+  } else {
+    $$renderer.push("<!--[!-->");
+  }
+  $$renderer.push(`<!--]--> `);
+  if (children) {
+    $$renderer.push("<!--[-->");
+    children($$renderer);
+    $$renderer.push(`<!---->`);
+  } else {
+    $$renderer.push("<!--[!-->");
+  }
+  $$renderer.push(`<!--]--></div>`);
+}
+function GroupDetailSidebar($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const { groupMap, groups } = $$props;
+    const nodes = useNodes();
+    let selectedNodeId = nodes.current.find((n) => n.selected)?.id ?? null;
+    let groupId = selectedNodeId ? groupMap[selectedNodeId] ?? null : null;
+    let groupInfo = groupId ? groups[groupId] ?? null : null;
+    $$renderer2.push(`<aside data-testid="group-sidebar" class="flex h-full flex-col basis-1/6 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-slate-800 text-gray-900 dark:text-gray-100 overflow-hidden rounded-2xl border shadow-xl p-3">`);
+    if (!groupInfo) {
+      $$renderer2.push("<!--[-->");
+      GenericSidebarCard($$renderer2, {
+        title: "No Group Selected",
+        description: "Select a group to view details."
+      });
+    } else {
+      $$renderer2.push("<!--[!-->");
+      GenericSidebarCard($$renderer2, {
+        title: "Group",
+        subtitle: groupInfo.name,
+        description: groupInfo.description
+      });
+      $$renderer2.push(`<!----> `);
+      if (groupInfo.teamId) {
+        $$renderer2.push("<!--[-->");
+        $$renderer2.push(`<div class="mt-4">`);
+        TeamContactCard($$renderer2, { teamId: groupInfo.teamId });
+        $$renderer2.push(`<!----></div>`);
+      } else {
+        $$renderer2.push("<!--[!-->");
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></aside>`);
+  });
+}
+function LoadingSpinner($$renderer, $$props) {
+  let { message = "Loading..." } = $$props;
+  $$renderer.push(`<div class="flex h-full w-full items-center justify-center p-8 text-center"><div><div class="mx-auto h-16 w-16 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500 dark:border-gray-700 dark:border-t-blue-400"></div> <p class="mt-4 text-base text-gray-500 dark:text-gray-400">${escape_html(message)}</p></div></div>`);
+}
+function TeamContactCard($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    {
+      $$renderer2.push("<!--[!-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+const sanitizeRegEx = /[^a-zA-Z0-9_]/g;
+const sanitizeNodeId = (value, prefix = "node") => {
+  const safe = (value || prefix).replace(sanitizeRegEx, "_");
+  return `${prefix}::${safe}`;
+};
+const formatConnectionLabel = (connectionCount) => connectionCount === 1 ? "1 connection" : `${connectionCount} connections`;
+const createGraphSignature = (namespace, payload) => `${namespace}:${JSON.stringify(payload)}`;
+function buildGroupOverviewGraph(groups, connections = []) {
+  if (!groups || Object.keys(groups).length === 0) {
+    return { graph: null, nodeToGroupMap: {} };
+  }
+  const nodes = Object.entries(groups).map(([groupId, groupInfo]) => ({
+    id: sanitizeNodeId(groupId, "mainGroup"),
+    type: "mainGroup",
+    data: {
+      label: groupInfo.name,
+      subLabel: groupInfo.description ?? groupId,
+      groupId,
+      kind: "mainGroup"
+    },
+    width: 120,
+    height: 80,
+    position: { x: 0, y: 0 }
+  }));
+  const edges = connections.map((connection, index) => {
+    const sourceId = sanitizeNodeId(connection.sourceGroup, "mainGroup");
+    const targetId = sanitizeNodeId(connection.targetGroup, "mainGroup");
+    return {
+      id: `edge_${sourceId}_${targetId}_${index}`,
+      source: sourceId,
+      sourceHandle: "output",
+      target: targetId,
+      targetHandle: "input",
+      type: "snake",
+      label: formatConnectionLabel(connection.connectionCount),
+      data: {
+        label: formatConnectionLabel(connection.connectionCount)
+      }
+    };
+  });
+  const signature = createGraphSignature("group-overview", {
+    groups: nodes.map((node) => node.data.groupId).sort(),
+    connections: connections.map((connection) => ({
+      sourceGroup: connection.sourceGroup,
+      targetGroup: connection.targetGroup,
+      connectionCount: connection.connectionCount
+    }))
+  });
+  const graph = { groupNodes: [], serviceNodes: nodes, edges, signature };
+  const nodeToGroupMap = nodes.reduce((lookup, node) => {
+    if (node.data.groupId) {
+      lookup[node.id] = node.data.groupId;
+    }
+    return lookup;
+  }, {});
+  console.debug(graph);
+  return { graph, nodeToGroupMap };
+}
+function _page($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { data } = $$props;
+    const groups = data.groups;
+    const groupConnections = data.groupConnections;
+    const errorMessage = data.errorMessage;
+    let { graphInput, nodeGroupMap } = (() => {
+      if (groups && groupConnections) {
+        const { graph, nodeToGroupMap } = buildGroupOverviewGraph(groups, groupConnections);
+        console.debug("[overview.svelte] built flow graph", {
+          groups: Object.keys(groups).length,
+          connections: groupConnections.length,
+          nodeCount: Object.keys(nodeToGroupMap).length,
+          hasGraph: !!graph
+        });
+        return { graphInput: graph, nodeGroupMap: nodeToGroupMap };
+      }
+      return { graphInput: null, nodeGroupMap: {} };
+    })();
+    let isLoading = !groups || !groupConnections;
+    async function refreshData() {
+      await invalidateAll();
+    }
+    head("1uha8ag", $$renderer2, ($$renderer3) => {
+      $$renderer3.title(($$renderer4) => {
+        $$renderer4.push(`<title>Resource Mapper – Overview</title>`);
+      });
+    });
+    if (errorMessage) {
+      $$renderer2.push("<!--[-->");
+      ErrorDisplay($$renderer2, {
+        title: "Error loading groups",
+        message: "Failed to load the group overview diagram.",
+        checkList: [
+          "Ensure YAML data exists under /data/services",
+          "Check the browser console for more details"
+        ],
+        technicalDetails: errorMessage,
+        onRetry: refreshData
+      });
+    } else if (isLoading) {
+      $$renderer2.push("<!--[1-->");
+      LoadingSpinner($$renderer2, { message: "Loading group overview..." });
+    } else {
+      $$renderer2.push("<!--[!-->");
+      $$renderer2.push(`<div class="flex h-full w-full gap-1 lg:flex-row">`);
+      SvelteFlowProvider($$renderer2, {
+        children: ($$renderer3) => {
+          FlowCanvas($$renderer3, { graph: graphInput });
+          $$renderer3.push(`<!---->  `);
+          GroupDetailSidebar($$renderer3, {
+            groupMap: nodeGroupMap,
+            groups: groups ?? {}
+          });
+          $$renderer3.push(`<!---->`);
+        }
+      });
+      $$renderer2.push(`<!----></div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+export {
+  _page as default
+};