@oscherbakov/react-flow-automated-layout 1.3.0

package/dist/react-flow-automated-layout.es.js

@@ -0,0 +1,1573 @@
+import { jsx as d, jsxs as T, Fragment as P } from "react/jsx-runtime";
+import { createContext as Ut, useContext as Ft, useState as B, useEffect as V, useRef as ut, useCallback as U } from "react";
+import { Position as A, useReactFlow as Vt, useNodes as Yt, useEdges as It, useOnSelectionChange as Pt, ControlButton as D, Controls as jt } from "@xyflow/react";
+import dt from "@dagrejs/dagre";
+const Lt = Ut(void 0);
+function Y() {
+  const t = Ft(Lt);
+  if (t === void 0)
+    throw new Error("useLayoutContext must be used within a LayoutProvider");
+  return t;
+}
+const ft = (t) => {
+  switch (t) {
+    case "DOWN":
+      return "TB";
+    case "RIGHT":
+      return "LR";
+    case "UP":
+      return "BT";
+    case "LEFT":
+      return "RL";
+    default:
+      return "TB";
+  }
+}, pt = (t) => {
+  switch (t) {
+    case "TB":
+      return "DOWN";
+    case "LR":
+      return "RIGHT";
+    case "BT":
+      return "UP";
+    case "RL":
+      return "LEFT";
+    default:
+      return "DOWN";
+  }
+}, Xt = {
+  enabled: !0,
+  padding: {
+    horizontal: 80,
+    vertical: 48
+  },
+  respectHeaderHeight: !0,
+  minWidth: 200,
+  minHeight: 100
+}, Jt = (t) => {
+  switch (t) {
+    case "DOWN":
+      return A.Bottom;
+    case "RIGHT":
+      return A.Right;
+    case "UP":
+      return A.Top;
+    case "LEFT":
+      return A.Left;
+    default:
+      return A.Bottom;
+  }
+}, Zt = (t) => {
+  switch (t) {
+    case "DOWN":
+      return A.Top;
+    case "RIGHT":
+      return A.Left;
+    case "UP":
+      return A.Bottom;
+    case "LEFT":
+      return A.Right;
+    default:
+      return A.Top;
+  }
+};
+function qt(t, r, e) {
+  if (e)
+    return { nodes: t, edges: r };
+  const o = t.filter((l) => !l.hidden), n = new Set(o.map((l) => l.id)), i = r.filter(
+    (l) => n.has(l.source) && n.has(l.target)
+  );
+  return { nodes: o, edges: i };
+}
+const Qt = 172, Wt = 36, X = async (t, r, e, o = 0, n = 50, i = 50, l = Qt, c = Wt, h = !1) => {
+  const a = new dt.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
+  a.setGraph({
+    rankdir: e,
+    marginx: o,
+    marginy: o,
+    nodesep: n,
+    ranksep: i,
+    edgesep: Math.max(20, n / 4),
+    //When we have siblings, we want their top edges to be aligned
+    ranker: "tight-tree"
+  });
+  const s = h ? t : t.filter((p) => !p.hidden);
+  if (s.length === 0)
+    return { nodes: [], edges: [], width: 0, height: 0 };
+  s.forEach((p) => {
+    var y, x;
+    const f = Number((y = p.style) == null ? void 0 : y.width) || l, m = Number((x = p.style) == null ? void 0 : x.height) || c;
+    a.setNode(p.id, { width: f, height: m });
+  }), r.forEach((p) => {
+    var E, L;
+    const f = p.sourceHandle, m = p.targetHandle, y = !!((E = p.data) != null && E.isReciprocal), x = !!((L = p.data) != null && L.isSyntheticBridge);
+    let w = {};
+    y ? w = { constraint: !1, minlen: 1, weight: 5 } : x ? w = { constraint: !0, minlen: 1, weight: 4 } : f === "right" && m === "left" ? w = { constraint: !1, minlen: 1 } : f === "bottom" && m === "top" ? w = { constraint: !0, minlen: 1 } : w = { constraint: !0, minlen: 2 }, a.setEdge(p.source, p.target, w);
+  }), dt.layout(a);
+  const u = a.graph().width || 0, g = a.graph().height || 0, N = Jt(pt(e)), b = Zt(pt(e));
+  return {
+    nodes: s.map((p) => {
+      var L;
+      const f = a.node(p.id), { width: m, height: y } = f, x = {
+        ...p,
+        sourcePosition: N,
+        targetPosition: b,
+        selected: !1
+      }, w = f.x, E = f.y;
+      switch ((L = p.data) == null ? void 0 : L.positionType) {
+        case "center":
+          x.position = { x: w, y: E };
+          break;
+        case "topRight":
+          x.position = { x: w + m / 2, y: E - y / 2 };
+          break;
+        case "bottomLeft":
+          x.position = { x: w - m / 2, y: E + y / 2 };
+          break;
+        case "bottomRight":
+          x.position = { x: w + m / 2, y: E + y / 2 };
+          break;
+        case "topLeft":
+        default:
+          x.position = { x: w - m / 2, y: E - y / 2 };
+      }
+      return x;
+    }),
+    edges: r,
+    width: u,
+    height: g
+  };
+}, Kt = {
+  calculate: async (t, r, e) => {
+    const o = e.nodes || t, n = e.edges || r, l = e.dagreDirection || typeof e.direction == "string" && (e.direction === "RIGHT" || e.direction === "LEFT" ? "LR" : "TB") || "TB", c = e.margin ?? (typeof e.padding == "number" ? e.padding : 0), h = e.nodeSpacing ?? 50, a = e.layerSpacing ?? 50, s = e.nodeWidth ?? 172, u = e.nodeHeight ?? 36, g = e.layoutHidden ?? !1;
+    return X(
+      o,
+      n,
+      l,
+      c,
+      h,
+      a,
+      s,
+      u,
+      g
+    );
+  }
+}, te = {
+  dagre: Kt
+};
+function ee({
+  initialDirection: t = "DOWN",
+  initialAlgorithm: r = "layered",
+  initialAutoLayout: e = !0,
+  initialPadding: o = 50,
+  initialSpacing: n = { node: 50, layer: 50 },
+  initialNodeDimensions: i = { width: 172, height: 36 },
+  initialParentResizingOptions: l,
+  includeHidden: c = !1,
+  layoutEngines: h
+}) {
+  const [a, s] = B(t), [u, g] = B(r), [N, b] = B(e), [C, p] = B(!1), [f, m] = B(c), [y, x] = B({
+    ...te,
+    ...h
+  }), [w, E] = B({}), [L, M] = B(o), [G, O] = B(n.node || 150), [k, v] = B(n.layer || 180), [S, R] = B(i.width || 100), [_, J] = B(i.height || 100), [Z, q] = B({
+    ...Xt,
+    ...l,
+    enabled: e
+  }), [I, Q] = B([]);
+  return {
+    // State
+    direction: a,
+    algorithm: u,
+    autoLayout: N,
+    layoutInProgress: C,
+    layoutHidden: f,
+    layoutEngines: y,
+    layoutEngineOptions: w,
+    padding: L,
+    nodeSpacing: G,
+    layerSpacing: k,
+    nodeWidth: S,
+    nodeHeight: _,
+    parentResizingOptions: Z,
+    selectedNodes: I,
+    // Setters
+    setDirection: s,
+    setAlgorithm: g,
+    setAutoLayout: b,
+    setLayoutInProgress: p,
+    setLayoutHidden: m,
+    setLayoutEngines: x,
+    setLayoutEngineOptions: E,
+    setPadding: M,
+    setNodeSpacing: O,
+    setLayerSpacing: v,
+    setNodeWidth: R,
+    setNodeHeight: J,
+    setParentResizingOptionsState: q,
+    setSelectedNodes: Q
+  };
+}
+function re({
+  nodes: t,
+  externalNodeIdWithNode: r,
+  externalNodeParentIdMapWithChildIdSet: e,
+  noParentKey: o = "no-parent"
+}) {
+  const [n, i] = B(/* @__PURE__ */ new Map()), [l, c] = B(/* @__PURE__ */ new Map()), [h, a] = B({}), [s, u] = B(t.length), [g, N] = B(!1), b = r || n, C = e || l, p = b.size;
+  return V(() => {
+    if (!r || !e) {
+      const f = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map();
+      t.forEach((y) => {
+        var w;
+        f.set(y.id, y);
+        const x = y.parentId || o;
+        m.has(x) || m.set(x, /* @__PURE__ */ new Set()), (w = m.get(x)) == null || w.add(y.id);
+      }), r || i(f), e || c(m);
+    }
+  }, [t, r, e, o]), V(() => {
+    t.length !== s && u(t.length);
+  }, [t]), V(() => {
+    b.size > 0 && C.size > 0 && !g && N(!0);
+  }, [b, C, g]), V(() => {
+    const f = {};
+    C.forEach((y, x) => {
+      f[x] = y.size;
+    });
+    let m = !1;
+    for (const y in f)
+      if (!h.hasOwnProperty(y) || f[y] !== h[y]) {
+        m = !0;
+        break;
+      }
+    m && a(f);
+  }, [C]), {
+    nodeIdWithNode: b,
+    nodeParentIdMapWithChildIdSet: C,
+    numberOfNodes: p,
+    nodesLength: s,
+    childrenInitialized: g,
+    parentChildStructure: h
+  };
+}
+function ne({
+  nodes: t,
+  edges: r,
+  selectedNodes: e,
+  layoutHidden: o,
+  calculateLayout: n,
+  calculateContainerLayout: i,
+  updateNodes: l,
+  updateEdges: c,
+  setLayoutInProgress: h,
+  setNodeSpacing: a,
+  setLayerSpacing: s
+}) {
+  const u = Vt(), g = ut(null), N = ut(null), b = U(async (p = [], f = []) => {
+    g.current && g.current.abort();
+    const m = new AbortController();
+    g.current = m;
+    const y = p.length > 0 ? p : t, x = f.length > 0 ? f : r;
+    if (y.length === 0)
+      return { nodes: y, edges: x };
+    try {
+      if (h(!0), m.signal.aborted)
+        return { nodes: y, edges: x };
+      const { nodes: w, edges: E } = qt(y, x, o), L = await n(w, E, e, m.signal);
+      return m.signal.aborted ? { nodes: y, edges: x } : (g.current === m && (l ? l(L.nodes) : u != null && u.setNodes && u.setNodes(L.nodes), c ? c(L.edges) : u != null && u.setEdges && u.setEdges(L.edges), N.current && (N.current.node !== void 0 && a(N.current.node), N.current.layer !== void 0 && s(N.current.layer), N.current = null)), L);
+    } catch (w) {
+      return m.signal.aborted || console.error("Error applying layout:", w), { nodes: y, edges: x };
+    } finally {
+      g.current === m && (h(!1), g.current = null);
+    }
+  }, [
+    t,
+    r,
+    e,
+    n,
+    l,
+    c,
+    u,
+    o,
+    h,
+    a,
+    s
+  ]), C = U(async (p) => {
+    g.current && g.current.abort();
+    const f = new AbortController();
+    if (g.current = f, t.length === 0) return { nodes: t, edges: r };
+    try {
+      if (h(!0), f.signal.aborted) return { nodes: t, edges: r };
+      const m = await i(p, t, r, f.signal);
+      return f.signal.aborted ? { nodes: t, edges: r } : (g.current === f && (l ? l(m.nodes) : u != null && u.setNodes && u.setNodes(m.nodes), c ? c(m.edges) : u != null && u.setEdges && u.setEdges(m.edges)), m);
+    } catch (m) {
+      return f.signal.aborted || console.error("Error applying container layout:", m), { nodes: t, edges: r };
+    } finally {
+      g.current === f && (h(!1), g.current = null);
+    }
+  }, [t, r, i, l, c, u, h]);
+  return {
+    applyLayout: b,
+    applyContainerLayout: C,
+    pendingSpacingUpdateRef: N
+  };
+}
+const oe = (t, r, e = "no-parent") => {
+  const o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map();
+  t.forEach((c, h) => {
+    const a = r.get(h);
+    a && n.set(h, {
+      id: h,
+      node: a,
+      children: [],
+      depth: 0
+    });
+  });
+  const i = (c, h) => {
+    if (o.has(c) || !t.has(c) || !r.get(c)) return null;
+    o.add(c);
+    const s = n.get(c);
+    s.depth = h;
+    const u = t.get(c) || /* @__PURE__ */ new Set();
+    for (const g of u)
+      if (t.has(g) && r.get(g)) {
+        const b = i(g, h + 1);
+        b && s.children.push(b);
+      }
+    return s;
+  }, l = [];
+  return t.forEach((c, h) => {
+    const a = r.get(h);
+    if (a) {
+      const s = a.parentId;
+      if (!s || s === e) {
+        const u = i(h, 0);
+        u && l.push(u);
+      }
+    }
+  }), l;
+};
+function tt(t, r, e = "no-parent") {
+  const o = [];
+  let n = t;
+  const i = /* @__PURE__ */ new Set();
+  for (; n && n !== e; ) {
+    if (i.has(n)) {
+      console.warn(`Cycle detected in ancestor path for node ${t}`);
+      break;
+    }
+    i.add(n), o.push(n);
+    const l = r.get(n);
+    if (!l || !l.parentId) {
+      n = e;
+      break;
+    }
+    n = l.parentId;
+  }
+  return n === e && o.push(e), o;
+}
+function z(t, r, e, o = "no-parent") {
+  if (t === r)
+    return t;
+  const n = tt(t, e, o), i = n.indexOf(r);
+  return i === -1 ? null : i === 0 ? t : n[i - 1] || null;
+}
+function F(t, r, e, o = "no-parent") {
+  const n = tt(t, e, o), i = tt(r, e, o), l = new Set(i);
+  let c = null, h = -1;
+  for (let g = 0; g < n.length; g++)
+    if (l.has(n[g])) {
+      c = n[g], h = g;
+      break;
+    }
+  if (!c)
+    return { lca: null, sourceChild: null, targetChild: null };
+  const a = i.indexOf(c), s = h > 0 ? n[h - 1] : t, u = a > 0 ? i[a - 1] : r;
+  return { lca: c, sourceChild: s, targetChild: u };
+}
+const ie = (t) => JSON.parse(JSON.stringify(t)), Et = (t, r, e, o, n) => {
+  const i = ie(t);
+  return i.source = r, i.target = e, i.id = o, i.data = {
+    ...i.data,
+    ...n
+  }, i;
+}, se = (t) => {
+  for (const r of t.values()) {
+    const e = /* @__PURE__ */ new Map();
+    r.forEach((n) => {
+      const i = `${n.source}->${n.target}`, l = e.get(i) || [];
+      l.push(n), e.set(i, l);
+    });
+    const o = /* @__PURE__ */ new Set();
+    r.forEach((n) => {
+      const i = `${n.source}->${n.target}`, l = `${n.target}->${n.source}`;
+      if (o.has(i) || o.has(l))
+        return;
+      const c = e.get(l);
+      if (!c || c.length === 0)
+        return;
+      [...e.get(i) || [], ...c].forEach((a) => {
+        a.data = {
+          ...a.data,
+          isReciprocal: !0
+        };
+      }), o.add(i), o.add(l);
+    });
+  }
+}, ce = (t, r, e, o) => {
+  const n = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
+  t.forEach((c) => {
+    const h = n.get(c.target) || [];
+    h.push(c), n.set(c.target, h);
+    const a = i.get(c.source) || [];
+    a.push(c), i.set(c.source, a);
+  });
+  const l = /* @__PURE__ */ new Set();
+  i.forEach((c, h) => {
+    const a = n.get(h) || [];
+    a.length !== 0 && a.forEach((s) => {
+      c.forEach((u) => {
+        if (s.source === u.target)
+          return;
+        const { lca: g, sourceChild: N, targetChild: b } = F(
+          s.source,
+          u.target,
+          r,
+          o
+        ), C = F(
+          s.source,
+          h,
+          r,
+          o
+        ).lca, p = F(
+          h,
+          u.target,
+          r,
+          o
+        ).lca;
+        if (!C || C !== p)
+          return;
+        const f = z(
+          s.source,
+          C,
+          r,
+          o
+        ), m = z(
+          u.target,
+          C,
+          r,
+          o
+        ), y = z(
+          h,
+          C,
+          r,
+          o
+        );
+        if (!f || !m || !y || f !== m || f === y)
+          return;
+        const x = f, w = z(
+          s.source,
+          x,
+          r,
+          o
+        ), E = z(
+          u.target,
+          x,
+          r,
+          o
+        );
+        if (!g || !N || !b || !w || !E || w === E)
+          return;
+        const L = `synthetic_bridge_${s.id}_${h}_${u.id}_${x}`;
+        if (l.has(L))
+          return;
+        const M = Et(
+          s,
+          w,
+          E,
+          L,
+          {
+            isTemporary: !0,
+            isSyntheticBridge: !0,
+            bridgeNode: h,
+            bridgeBranch: y,
+            anchorBranch: f,
+            originalSource: s.source,
+            originalTarget: u.target
+          }
+        );
+        e.has(x) || e.set(x, []), e.get(x).push(M), l.add(L);
+      });
+    });
+  });
+};
+function et(t, r, e = "no-parent") {
+  const o = /* @__PURE__ */ new Map();
+  for (const n of t) {
+    const { lca: i, sourceChild: l, targetChild: c } = F(
+      n.source,
+      n.target,
+      r,
+      e
+    );
+    if (i && l && c && l !== c) {
+      const h = Et(
+        n,
+        l,
+        c,
+        `temp_${n.id}_${i}`,
+        {
+          isTemporary: !0,
+          originalSource: n.source,
+          originalTarget: n.target
+        }
+      );
+      o.has(i) || o.set(i, []), o.get(i).push(h);
+    }
+  }
+  return ce(t, r, o, e), se(o), o;
+}
+const rt = 10, gt = (t, r) => t.find((e) => e.id === r), yt = (t, r, e) => {
+  var c, h;
+  const o = e.get(t);
+  if (!o)
+    return null;
+  let n = o.position.x + (o.width || Number((c = o.style) == null ? void 0 : c.width) || 172) / 2, i = o.position.y + (o.height || Number((h = o.style) == null ? void 0 : h.height) || 36) / 2, l = o.parentId;
+  for (; l && l !== r; ) {
+    const a = e.get(l);
+    if (!a)
+      break;
+    n += a.position.x, i += a.position.y, l = a.parentId;
+  }
+  return { x: n, y: i };
+}, $ = (t) => {
+  var r, e;
+  return {
+    width: t.width || Number((r = t.style) == null ? void 0 : r.width) || 172,
+    height: t.height || Number((e = t.style) == null ? void 0 : e.height) || 36
+  };
+}, xt = (t) => {
+  const { width: r, height: e } = $(t);
+  return {
+    x: t.position.x + r / 2,
+    y: t.position.y + e / 2
+  };
+}, ae = (t, r) => {
+  if (t.length === 0)
+    return { nodes: t, width: 0, height: 0 };
+  let e = Number.POSITIVE_INFINITY, o = Number.POSITIVE_INFINITY, n = Number.NEGATIVE_INFINITY, i = Number.NEGATIVE_INFINITY;
+  t.forEach((s) => {
+    const { width: u, height: g } = $(s);
+    e = Math.min(e, s.position.x), o = Math.min(o, s.position.y), n = Math.max(n, s.position.x + u), i = Math.max(i, s.position.y + g);
+  });
+  const l = r - e, c = r - o;
+  t.forEach((s) => {
+    s.position = {
+      x: s.position.x + l,
+      y: s.position.y + c
+    };
+  });
+  const h = n - e + r * 2, a = i - o + r * 2;
+  return { nodes: t, width: h, height: a };
+}, le = (t, r, e, o) => {
+  if (!(t.length < 2 || o.size === 0))
+    if (r === "TB" || r === "BT") {
+      const n = [...t].sort((i, l) => i.position.x - l.position.x);
+      n.forEach((i, l) => {
+        if (!o.has(i.id))
+          return;
+        let c = i.position.x + $(i).width;
+        for (let h = l + 1; h < n.length; h++) {
+          const a = n[h], { width: s } = $(a), u = c + e;
+          a.position.x < u && (a.position.x = u), c = a.position.x + s;
+        }
+      });
+    } else {
+      const n = [...t].sort((i, l) => i.position.y - l.position.y);
+      n.forEach((i, l) => {
+        if (!o.has(i.id))
+          return;
+        let c = i.position.y + $(i).height;
+        for (let h = l + 1; h < n.length; h++) {
+          const a = n[h], { height: s } = $(a), u = c + e;
+          a.position.y < u && (a.position.y = u), c = a.position.y + s;
+        }
+      });
+    }
+}, he = (t, r, e, o) => {
+  const n = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
+  r.forEach((c) => {
+    const h = n.get(c.target) || [];
+    h.push(c), n.set(c.target, h);
+    const a = i.get(c.source) || [];
+    a.push(c), i.set(c.source, a);
+  });
+  const l = /* @__PURE__ */ new Map();
+  return i.forEach((c, h) => {
+    const a = n.get(h) || [];
+    a.length !== 0 && a.forEach((s) => {
+      c.forEach((u) => {
+        if (s.source === u.target)
+          return;
+        const g = F(
+          s.source,
+          h,
+          e,
+          o
+        ).lca, N = F(
+          h,
+          u.target,
+          e,
+          o
+        ).lca;
+        if (g !== t || N !== t)
+          return;
+        const b = z(
+          s.source,
+          t,
+          e,
+          o
+        ), C = z(
+          u.target,
+          t,
+          e,
+          o
+        ), p = z(
+          h,
+          t,
+          e,
+          o
+        );
+        if (!b || !C || !p || b !== C || b === p)
+          return;
+        const f = z(
+          s.source,
+          b,
+          e,
+          o
+        ), m = z(
+          u.target,
+          b,
+          e,
+          o
+        );
+        if (!f || !m || f === m)
+          return;
+        const y = `${b}:${p}:${f}:${m}`;
+        l.set(y, {
+          anchorContainerId: b,
+          bridgeContainerId: p,
+          sourceNodeId: f,
+          targetNodeId: m
+        });
+      });
+    });
+  }), [...l.values()];
+}, ue = (t, r, e, o, n, i, l) => {
+  const c = he(r, n, i, l), h = /* @__PURE__ */ new Set();
+  return c.forEach((a) => {
+    const s = gt(t, a.anchorContainerId), u = gt(t, a.bridgeContainerId);
+    if (!s || !u)
+      return;
+    const g = yt(a.sourceNodeId, r, i), N = yt(a.targetNodeId, r, i);
+    if (!g || !N)
+      return;
+    const { width: b, height: C } = $(u), { width: p, height: f } = $(s), m = xt(s), y = xt(u);
+    if (e === "TB" || e === "BT") {
+      const x = (g.y + N.y) / 2;
+      u.position.y = x - C / 2;
+      const w = y.x >= m.x, E = w ? u.position.x - (s.position.x + p) : s.position.x - (u.position.x + b), L = Math.max(o, E);
+      u.position.x = w ? s.position.x + p + L : s.position.x - b - L;
+    } else {
+      const x = (g.x + N.x) / 2;
+      u.position.x = x - b / 2;
+      const w = y.y >= m.y, E = w ? u.position.y - (s.position.y + f) : s.position.y - (u.position.y + C), L = Math.max(o, E);
+      u.position.y = w ? s.position.y + f + L : s.position.y - C - L;
+    }
+    h.add(u.id);
+  }), h;
+}, Nt = async (t, r, e, o, n, i = rt, l = 50, c = 50, h = 172, a = 36, s = X, u = !1, g = "no-parent") => {
+  const N = et(n, o, g), { updatedNodes: b } = await j(
+    t,
+    r,
+    e,
+    o,
+    n,
+    i,
+    l,
+    c,
+    h,
+    a,
+    s,
+    u,
+    N,
+    g
+  ), C = o.get(t);
+  if (!C)
+    return { updatedNodes: b, updatedEdges: n };
+  const { updatedNodes: p } = await Nt(
+    C.parentId || g,
+    r,
+    e,
+    o,
+    n,
+    i,
+    l,
+    c,
+    h,
+    a,
+    s,
+    u,
+    g
+  );
+  return {
+    updatedNodes: [...p, ...b],
+    updatedEdges: n
+    // Always return original edges unchanged
+  };
+}, j = async (t, r, e, o, n, i = rt, l = 50, c = 50, h = 172, a = 36, s = X, u = !1, g = /* @__PURE__ */ new Map(), N = "no-parent") => {
+  const b = e.get(t);
+  if (!b || b.size === 0)
+    return { updatedNodes: [] };
+  const C = [];
+  if (b.forEach((L) => {
+    const M = o.get(L);
+    M && C.push(M);
+  }), C.length === 0)
+    return { updatedNodes: [] };
+  let p = r;
+  const f = o.get(t);
+  f && f.data.layoutDirection && (p = f.data.layoutDirection);
+  const m = g.get(t) || [], { nodes: y, edges: x } = await s(
+    C,
+    m,
+    // Only use temporary edges for layout
+    p,
+    i,
+    l,
+    c,
+    h,
+    a,
+    u
+  );
+  y.forEach((L) => {
+    o.set(L.id, L);
+  });
+  const w = ue(
+    y,
+    t,
+    p,
+    l,
+    n,
+    o,
+    N
+  );
+  le(
+    y,
+    p,
+    l,
+    w
+  ), y.forEach((L) => {
+    o.set(L.id, L);
+  });
+  const E = ae(y, i);
+  return E.nodes.forEach((L) => {
+    o.set(L.id, L);
+  }), f && E.width && E.height && de(f, E.width, E.height), {
+    updatedNodes: [...E.nodes],
+    udpatedParentNode: f || void 0
+  };
+}, de = (t, r, e) => (t.style || (t.style = {}), t.width = r, t.height = e, t.measured = {
+  width: r,
+  height: e
+}, t.style.width = r, t.style.height = e, t), fe = async (t, r, e, o, n, i = rt, l = 50, c = 50, h = 172, a = 36, s = X, u = !1, g = "no-parent") => {
+  let N = [];
+  const b = et(n, o, g), C = /* @__PURE__ */ new Map();
+  let p = 0;
+  const f = (y, x) => {
+    x > p && (p = x);
+    for (const w of y)
+      C.has(x) || C.set(x, []), C.get(x).push(w.id), w.children.length > 0 && f(w.children, x + 1);
+  };
+  f(t, 0);
+  for (let y = p; y >= 0; y--) {
+    const x = C.get(y) || [], w = await Promise.all(x.map(
+      (E) => j(
+        E,
+        r,
+        e,
+        o,
+        n,
+        // Pass original edges (only used for returning)
+        i,
+        l,
+        c,
+        h,
+        a,
+        s,
+        u,
+        b,
+        // Pass the global temporary edges map
+        g
+      )
+    ));
+    for (const { updatedNodes: E } of w)
+      N = [...E, ...N];
+  }
+  const { updatedNodes: m } = await j(
+    g,
+    r,
+    e,
+    o,
+    n,
+    // Pass original edges (only used for returning)
+    i,
+    l,
+    c,
+    h,
+    a,
+    s,
+    u,
+    b,
+    // Process root-level temporary edges
+    g
+  );
+  return N = [...m, ...N], {
+    updatedNodes: N,
+    updatedEdges: n
+    // Always return original edges unchanged
+  };
+}, pe = (t, r, e, o = "no-parent") => {
+  const n = t.map((a) => a.id), i = t.map((a) => {
+    var s;
+    return ((s = e.get(a.id)) == null ? void 0 : s.parentId) || a.parentId;
+  }).filter((a) => !!a), c = Array.from(
+    /* @__PURE__ */ new Set([...n, ...i])
+  ).filter((a) => r.has(a)), h = c.filter((a) => {
+    const s = e.get(a);
+    return s ? !s.parentId || !c.includes(s.parentId) : !0;
+  });
+  return h.length === 0 ? [o] : h;
+}, ge = async (t, r, e) => {
+  const {
+    dagreDirection: o,
+    nodeParentIdMapWithChildIdSet: n,
+    nodeIdWithNode: i,
+    nodes: l,
+    edges: c,
+    margin: h,
+    nodeSpacing: a,
+    layerSpacing: s,
+    nodeWidth: u,
+    nodeHeight: g,
+    layoutHidden: N = !1,
+    noParentKey: b = "no-parent"
+  } = r, C = pe(
+    t,
+    n,
+    i,
+    b
+  );
+  if (C.length === 0)
+    return { nodes: l, edges: c };
+  const p = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
+  if (e != null && e.aborted)
+    return { nodes: l, edges: c };
+  (await Promise.all(
+    C.map(async (w) => e != null && e.aborted ? { updatedNodes: [], updatedEdges: [] } : Nt(
+      w,
+      o,
+      n,
+      i,
+      c,
+      h,
+      a,
+      s,
+      u,
+      g,
+      void 0,
+      N
+    ))
+  )).forEach(({ updatedNodes: w, updatedEdges: E }) => {
+    w.forEach((L) => {
+      p.set(L.id, L);
+    }), E.forEach((L) => {
+      f.set(L.id, L);
+    });
+  });
+  const y = l.map(
+    (w) => p.has(w.id) ? p.get(w.id) : w
+  ), x = c.map(
+    (w) => f.has(w.id) ? f.get(w.id) : w
+  );
+  return { nodes: y, edges: x };
+}, ye = (t, r, e, o, n, i, l, c, h = 172, a = 36, s = !1, u = "no-parent") => {
+  const g = U(async (b, C, p, f) => {
+    if (!(t[e] || t.dagre))
+      return console.error(`Layout engine "${e}" not found`), { nodes: b, edges: C };
+    const y = s ? b : b.filter((k) => !k.hidden), x = new Set(y.map((k) => k.id)), w = s ? C : C.filter(
+      (k) => x.has(k.source) && x.has(k.target)
+    ), E = ft(r), L = o.padding.horizontal;
+    let M = [], G = [];
+    if (p && p.length > 0) {
+      const k = s ? p : p.filter((S) => !S.hidden), v = await ge(
+        k,
+        {
+          dagreDirection: E,
+          nodeParentIdMapWithChildIdSet: n,
+          nodeIdWithNode: i,
+          nodes: y,
+          edges: w,
+          margin: L,
+          nodeSpacing: l,
+          layerSpacing: c,
+          nodeWidth: h,
+          nodeHeight: a,
+          layoutHidden: s,
+          noParentKey: u
+        },
+        f
+      );
+      M = v.nodes, G = v.edges;
+    } else {
+      if (f != null && f.aborted)
+        return { nodes: b, edges: C };
+      const k = oe(n, i, u), v = await fe(
+        k,
+        E,
+        n,
+        i,
+        w,
+        L,
+        l,
+        c,
+        h,
+        a,
+        void 0,
+        s,
+        u
+      );
+      M = v.updatedNodes, G = v.updatedEdges;
+    }
+    return {
+      nodes: b.map((k) => !s && k.hidden ? k : M.find((S) => S.id === k.id) || k),
+      edges: G
+    };
+  }, [
+    e,
+    r,
+    t,
+    o.padding.horizontal,
+    n,
+    i,
+    l,
+    c,
+    h,
+    a,
+    s,
+    u
+  ]), N = U(async (b, C, p, f) => {
+    if (f != null && f.aborted) return { nodes: C, edges: p };
+    const m = ft(r), y = o.padding.horizontal, x = s ? C : C.filter((v) => !v.hidden), w = new Set(x.map((v) => v.id)), E = s ? p : p.filter((v) => w.has(v.source) && w.has(v.target)), L = et(E, i, u), M = (v) => {
+      const S = [], R = n.get(v);
+      if (R)
+        for (const _ of R)
+          n.has(_) && S.push(...M(_));
+      return S.push(v), S;
+    }, G = M(b), O = /* @__PURE__ */ new Map();
+    for (const v of G) {
+      if (f != null && f.aborted) return { nodes: C, edges: p };
+      const { updatedNodes: S, udpatedParentNode: R } = await j(
+        v,
+        m,
+        n,
+        i,
+        E,
+        y,
+        l,
+        c,
+        h,
+        a,
+        void 0,
+        s,
+        L,
+        u
+      );
+      S.forEach((_) => O.set(_.id, _)), R && O.set(R.id, R);
+    }
+    return { nodes: C.map((v) => O.get(v.id) ?? v), edges: p };
+  }, [
+    r,
+    o.padding.horizontal,
+    n,
+    i,
+    l,
+    c,
+    h,
+    a,
+    s,
+    u
+  ]);
+  return { calculateLayout: g, calculateContainerLayout: N };
+};
+function Ce({
+  children: t,
+  initialDirection: r = "DOWN",
+  initialAlgorithm: e = "layered",
+  initialAutoLayout: o = !0,
+  initialPadding: n = 50,
+  initialSpacing: i = { node: 50, layer: 50 },
+  initialNodeDimensions: l = { width: 172, height: 36 },
+  initialParentResizingOptions: c,
+  includeHidden: h = !1,
+  layoutEngines: a,
+  updateNodes: s,
+  updateEdges: u,
+  nodeParentIdMapWithChildIdSet: g,
+  nodeIdWithNode: N,
+  noParentKey: b = "no-parent",
+  disableAutoLayoutEffect: C = !1
+}) {
+  const p = Yt(), f = It(), {
+    direction: m,
+    algorithm: y,
+    autoLayout: x,
+    layoutInProgress: w,
+    layoutHidden: E,
+    layoutEngines: L,
+    layoutEngineOptions: M,
+    padding: G,
+    nodeSpacing: O,
+    layerSpacing: k,
+    nodeWidth: v,
+    nodeHeight: S,
+    parentResizingOptions: R,
+    selectedNodes: _,
+    setDirection: J,
+    setAlgorithm: Z,
+    setAutoLayout: q,
+    setLayoutInProgress: I,
+    setLayoutHidden: Q,
+    setLayoutEngines: nt,
+    setLayoutEngineOptions: vt,
+    setPadding: Tt,
+    setNodeSpacing: ot,
+    setLayerSpacing: it,
+    setNodeWidth: kt,
+    setNodeHeight: Bt,
+    setParentResizingOptionsState: st,
+    setSelectedNodes: ct
+  } = ee({
+    initialDirection: r,
+    initialAlgorithm: e,
+    initialAutoLayout: o,
+    initialPadding: n,
+    initialSpacing: i,
+    initialNodeDimensions: l,
+    initialParentResizingOptions: c,
+    includeHidden: h,
+    layoutEngines: a
+  }), {
+    nodeIdWithNode: W,
+    nodeParentIdMapWithChildIdSet: at,
+    numberOfNodes: Mt,
+    nodesLength: St,
+    childrenInitialized: lt,
+    parentChildStructure: Dt
+  } = re({
+    nodes: p,
+    externalNodeIdWithNode: N,
+    externalNodeParentIdMapWithChildIdSet: g,
+    noParentKey: b
+  }), Rt = U(({ nodes: H }) => {
+    ct(H);
+  }, [ct]);
+  Pt({
+    onChange: Rt
+  });
+  const { calculateLayout: Ot, calculateContainerLayout: At } = ye(
+    L,
+    m,
+    y,
+    R,
+    at,
+    W,
+    O,
+    k,
+    v,
+    S,
+    E,
+    b
+  ), { applyLayout: ht, applyContainerLayout: zt } = ne({
+    nodes: p,
+    edges: f,
+    selectedNodes: _,
+    layoutHidden: E,
+    calculateLayout: Ot,
+    calculateContainerLayout: At,
+    updateNodes: s,
+    updateEdges: u,
+    setLayoutInProgress: I,
+    setNodeSpacing: ot,
+    setLayerSpacing: it
+  }), Gt = U((H, K) => {
+    nt(($t) => ({ ...$t, [H]: K }));
+  }, [nt]), _t = U((H) => {
+    st((K) => ({
+      ...K,
+      ...H,
+      enabled: x
+    }));
+  }, [x, st]);
+  V(() => {
+    var H;
+    C || W.has((H = p[p.length - 1]) == null ? void 0 : H.id) && lt && x && ht();
+  }, [lt, x, m, Mt, O, k, Dt, St]);
+  const Ht = {
+    direction: m,
+    algorithm: y,
+    autoLayout: x,
+    layoutInProgress: w,
+    padding: G,
+    nodeSpacing: O,
+    layerSpacing: k,
+    nodeWidth: v,
+    nodeHeight: S,
+    layoutHidden: E,
+    parentResizingOptions: R,
+    layoutEngines: L,
+    layoutEngineOptions: M,
+    nodeParentIdMapWithChildIdSet: at,
+    nodeIdWithNode: W,
+    noParentKey: b,
+    updateNodes: s,
+    updateEdges: u,
+    setDirection: J,
+    setAlgorithm: Z,
+    setAutoLayout: q,
+    setLayoutInProgress: I,
+    setPadding: Tt,
+    setNodeSpacing: ot,
+    setLayerSpacing: it,
+    setNodeWidth: kt,
+    setNodeHeight: Bt,
+    setLayoutHidden: Q,
+    setParentResizingOptions: _t,
+    setLayoutEngineOptions: vt,
+    applyLayout: ht,
+    applyContainerLayout: zt,
+    clearLayoutCache: () => {
+    },
+    registerLayoutEngine: Gt
+  };
+  return /* @__PURE__ */ d(Lt.Provider, { value: Ht, children: t });
+}
+const wt = ({
+  compact: t = !1
+}) => {
+  const {
+    direction: r,
+    setDirection: e,
+    clearLayoutCache: o
+  } = Y(), n = (i) => {
+    e(i), o && o();
+  };
+  return t ? /* @__PURE__ */ d(
+    D,
+    {
+      onClick: () => n(r === "DOWN" ? "RIGHT" : "DOWN"),
+      title: `Switch to ${r === "DOWN" ? "horizontal" : "vertical"} layout`,
+      children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: r === "DOWN" ? (
+        // Horizontal layout icon
+        /* @__PURE__ */ d("path", { d: "M4 12h16M16 6l6 6-6 6" })
+      ) : (
+        // Vertical layout icon
+        /* @__PURE__ */ d("path", { d: "M12 4v16M6 16l6 6 6-6" })
+      ) })
+    }
+  ) : /* @__PURE__ */ T(P, { children: [
+    /* @__PURE__ */ d(
+      D,
+      {
+        onClick: () => n("DOWN"),
+        className: r === "DOWN" ? "selected" : "",
+        title: "Top to Bottom",
+        children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: /* @__PURE__ */ d("path", { d: "M12 4v16M6 16l6 6 6-6" }) })
+      }
+    ),
+    /* @__PURE__ */ d(
+      D,
+      {
+        onClick: () => n("RIGHT"),
+        className: r === "RIGHT" ? "selected" : "",
+        title: "Left to Right",
+        children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: /* @__PURE__ */ d("path", { d: "M4 12h16M16 6l6 6-6 6" }) })
+      }
+    ),
+    /* @__PURE__ */ d(
+      D,
+      {
+        onClick: () => n("LEFT"),
+        className: r === "LEFT" ? "selected" : "",
+        title: "Right to Left",
+        children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: /* @__PURE__ */ d("path", { d: "M20 12H4M8 6L2 12l6 6" }) })
+      }
+    ),
+    /* @__PURE__ */ d(
+      D,
+      {
+        onClick: () => n("UP"),
+        className: r === "UP" ? "selected" : "",
+        title: "Bottom to Top",
+        children: /* @__PURE__ */ d("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: /* @__PURE__ */ d("path", { d: "M12 20V4M6 8l6-6 6 6" }) })
+      }
+    )
+  ] });
+}, mt = ({
+  compact: t = !1
+}) => {
+  const {
+    nodeSpacing: r,
+    layerSpacing: e,
+    setNodeSpacing: o,
+    setLayerSpacing: n,
+    clearLayoutCache: i
+  } = Y(), [l, c] = B(!1), h = (s) => {
+    o(s), i && i();
+  }, a = (s) => {
+    n(s), i && i();
+  };
+  return t ? /* @__PURE__ */ T("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ d(
+      D,
+      {
+        onClick: () => c(!l),
+        title: "Adjust node and layer spacing",
+        children: /* @__PURE__ */ T("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: [
+          /* @__PURE__ */ d("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+          /* @__PURE__ */ d("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+          /* @__PURE__ */ d("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+          /* @__PURE__ */ d("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" }),
+          /* @__PURE__ */ d("path", { d: "M7 10v4M17 10v4M10 7h4M10 17h4" })
+        ] })
+      }
+    ),
+    l && /* @__PURE__ */ T(
+      "div",
+      {
+        className: "react-flow-spacing-dropdown",
+        style: {
+          position: "absolute",
+          right: "0",
+          top: "100%",
+          marginTop: "8px",
+          background: "white",
+          border: "1px solid #ddd",
+          borderRadius: "4px",
+          padding: "8px",
+          boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+          zIndex: 10,
+          minWidth: "200px"
+        },
+        children: [
+          /* @__PURE__ */ T("div", { style: { marginBottom: "12px" }, children: [
+            /* @__PURE__ */ T("div", { style: { fontWeight: "bold", marginBottom: "4px" }, children: [
+              "Node Spacing: ",
+              r,
+              "px"
+            ] }),
+            /* @__PURE__ */ d("div", { style: { display: "flex", gap: "4px" }, children: [50, 100, 150, 200].map((s) => /* @__PURE__ */ d(
+              "button",
+              {
+                onClick: () => h(s),
+                style: {
+                  background: r === s ? "#0041d0" : "#f5f5f5",
+                  color: r === s ? "white" : "inherit",
+                  border: "1px solid #ddd",
+                  borderRadius: "4px",
+                  padding: "4px 8px",
+                  cursor: "pointer"
+                },
+                children: s
+              },
+              s
+            )) })
+          ] }),
+          /* @__PURE__ */ T("div", { children: [
+            /* @__PURE__ */ T("div", { style: { fontWeight: "bold", marginBottom: "4px" }, children: [
+              "Layer Spacing: ",
+              e,
+              "px"
+            ] }),
+            /* @__PURE__ */ d("div", { style: { display: "flex", gap: "4px" }, children: [50, 100, 150, 200].map((s) => /* @__PURE__ */ d(
+              "button",
+              {
+                onClick: () => a(s),
+                style: {
+                  background: e === s ? "#0041d0" : "#f5f5f5",
+                  color: e === s ? "white" : "inherit",
+                  border: "1px solid #ddd",
+                  borderRadius: "4px",
+                  padding: "4px 8px",
+                  cursor: "pointer"
+                },
+                children: s
+              },
+              s
+            )) })
+          ] }),
+          /* @__PURE__ */ d("div", { style: { marginTop: "12px", textAlign: "right" }, children: /* @__PURE__ */ d(
+            "button",
+            {
+              onClick: () => c(!1),
+              style: {
+                background: "#f5f5f5",
+                border: "1px solid #ddd",
+                borderRadius: "4px",
+                padding: "4px 8px",
+                cursor: "pointer"
+              },
+              children: "Close"
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ T("div", { className: "spacing-controls", children: [
+    /* @__PURE__ */ T(
+      D,
+      {
+        onClick: () => h(Math.max(50, r - 25)),
+        title: "Decrease node spacing",
+        children: [
+          /* @__PURE__ */ T("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: [
+            /* @__PURE__ */ d("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("line", { x1: "7", y1: "10", x2: "7", y2: "14" }),
+            /* @__PURE__ */ d("line", { x1: "17", y1: "10", x2: "17", y2: "14" }),
+            /* @__PURE__ */ d("line", { x1: "10", y1: "7", x2: "14", y2: "7" }),
+            /* @__PURE__ */ d("line", { x1: "10", y1: "17", x2: "14", y2: "17" })
+          ] }),
+          /* @__PURE__ */ d("span", { style: { marginLeft: "4px" }, children: "-" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ T("div", { style: {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "5px 10px",
+      fontSize: "12px",
+      background: "#f8f8f8",
+      borderRadius: "4px",
+      margin: "0 4px",
+      border: "1px solid #ddd"
+    }, children: [
+      r,
+      "px"
+    ] }),
+    /* @__PURE__ */ T(
+      D,
+      {
+        onClick: () => h(Math.min(300, r + 25)),
+        title: "Increase node spacing",
+        children: [
+          /* @__PURE__ */ T("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: [
+            /* @__PURE__ */ d("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" }),
+            /* @__PURE__ */ d("line", { x1: "7", y1: "10", x2: "7", y2: "14" }),
+            /* @__PURE__ */ d("line", { x1: "17", y1: "10", x2: "17", y2: "14" }),
+            /* @__PURE__ */ d("line", { x1: "10", y1: "7", x2: "14", y2: "7" }),
+            /* @__PURE__ */ d("line", { x1: "10", y1: "17", x2: "14", y2: "17" })
+          ] }),
+          /* @__PURE__ */ d("span", { style: { marginLeft: "4px" }, children: "+" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ d("div", { style: { display: "inline-block", width: "1px", height: "24px", background: "#ddd", margin: "0 10px" } }),
+    /* @__PURE__ */ T(
+      D,
+      {
+        onClick: () => a(Math.max(50, e - 25)),
+        title: "Decrease layer spacing",
+        children: [
+          /* @__PURE__ */ T("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: [
+            /* @__PURE__ */ d("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+            /* @__PURE__ */ d("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+            /* @__PURE__ */ d("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+          ] }),
+          /* @__PURE__ */ d("span", { style: { marginLeft: "4px" }, children: "-" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ T("div", { style: {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "5px 10px",
+      fontSize: "12px",
+      background: "#f8f8f8",
+      borderRadius: "4px",
+      margin: "0 4px",
+      border: "1px solid #ddd"
+    }, children: [
+      e,
+      "px"
+    ] }),
+    /* @__PURE__ */ T(
+      D,
+      {
+        onClick: () => a(Math.min(300, e + 25)),
+        title: "Increase layer spacing",
+        children: [
+          /* @__PURE__ */ T("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "2", fill: "none", children: [
+            /* @__PURE__ */ d("line", { x1: "4", y1: "6", x2: "20", y2: "6" }),
+            /* @__PURE__ */ d("line", { x1: "4", y1: "12", x2: "20", y2: "12" }),
+            /* @__PURE__ */ d("line", { x1: "4", y1: "18", x2: "20", y2: "18" })
+          ] }),
+          /* @__PURE__ */ d("span", { style: { marginLeft: "4px" }, children: "+" })
+        ]
+      }
+    )
+  ] });
+}, bt = ({
+  compact: t = !1
+}) => {
+  const {
+    autoLayout: r,
+    setAutoLayout: e
+  } = Y();
+  return /* @__PURE__ */ d(
+    D,
+    {
+      onClick: () => {
+        e(!r);
+      },
+      className: r ? "selected" : "",
+      title: r ? "Disable automatic layout" : "Enable automatic layout",
+      style: { color: r ? "green" : "inherit" },
+      children: t ? /* @__PURE__ */ T("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "1.5", fill: "none", children: [
+        /* @__PURE__ */ d("rect", { x: "4", y: "4", width: "4", height: "4", rx: "1" }),
+        /* @__PURE__ */ d("rect", { x: "4", y: "16", width: "4", height: "4", rx: "1" }),
+        /* @__PURE__ */ d("rect", { x: "16", y: "10", width: "4", height: "4", rx: "1" }),
+        /* @__PURE__ */ T(P, { children: [
+          /* @__PURE__ */ d("path", { d: "M8 6c6 0 3 8 8 6" }),
+          /* @__PURE__ */ d("path", { d: "M8 18c3-3 2-8 6-6" })
+        ] })
+      ] }) : /* @__PURE__ */ T(P, { children: [
+        "Auto-Layout ",
+        r ? "ON" : "OFF"
+      ] })
+    }
+  );
+}, Ct = ({
+  compact: t = !1
+}) => {
+  const {
+    layoutInProgress: r,
+    setLayoutInProgress: e,
+    applyLayout: o
+  } = Y();
+  return /* @__PURE__ */ T(
+    D,
+    {
+      onClick: async () => {
+        if (!r)
+          try {
+            e(!0), await o();
+          } catch (i) {
+            console.error("Error applying layout:", i);
+          }
+      },
+      title: "Apply layout",
+      disabled: r,
+      style: { color: r ? "#999" : "#000" },
+      children: [
+        /* @__PURE__ */ T("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", strokeWidth: "1.5", fill: "none", children: [
+          /* @__PURE__ */ d("rect", { x: "3", y: "3", width: "5", height: "5", rx: "1" }),
+          /* @__PURE__ */ d("rect", { x: "16", y: "3", width: "5", height: "5", rx: "1" }),
+          /* @__PURE__ */ d("rect", { x: "3", y: "16", width: "5", height: "5", rx: "1" }),
+          /* @__PURE__ */ d("rect", { x: "16", y: "16", width: "5", height: "5", rx: "1" }),
+          /* @__PURE__ */ d("path", { d: "M8 5.5h8M5.5 8v8M18.5 8v8M8 18.5h8" }),
+          /* @__PURE__ */ d("circle", { cx: "12", cy: "12", r: "3" }),
+          /* @__PURE__ */ d("path", { d: "M11 10.5v3l2-1.5z", fill: "currentColor" })
+        ] }),
+        !t && /* @__PURE__ */ d("span", { style: { marginLeft: "4px" }, children: "Apply Layout" })
+      ]
+    }
+  );
+}, Le = ({
+  showDirectionControls: t = !0,
+  showSpacingControls: r = !0,
+  showAutoLayoutToggle: e = !0,
+  showApplyLayoutButton: o = !0,
+  // Enable by default
+  standalone: n = !1,
+  position: i = "top-right"
+}) => {
+  const l = Y(), {
+    autoLayout: c
+  } = l;
+  return n ? /* @__PURE__ */ T(jt, { position: i, showZoom: !1, showFitView: !1, showInteractive: !1, children: [
+    o && !c && /* @__PURE__ */ d(
+      Ct,
+      {
+        compact: !0
+      }
+    ),
+    t && /* @__PURE__ */ d(
+      wt,
+      {
+        compact: !0
+      }
+    ),
+    r && /* @__PURE__ */ d(
+      mt,
+      {
+        compact: !0
+      }
+    ),
+    e && /* @__PURE__ */ d(
+      bt,
+      {
+        compact: !0
+      }
+    )
+  ] }) : /* @__PURE__ */ T(P, { children: [
+    o && !c && /* @__PURE__ */ d(
+      Ct,
+      {
+        compact: !0
+      }
+    ),
+    t && /* @__PURE__ */ d(
+      wt,
+      {
+        compact: !0
+      }
+    ),
+    r && /* @__PURE__ */ d(
+      mt,
+      {
+        compact: !0
+      }
+    ),
+    e && /* @__PURE__ */ d(
+      bt,
+      {
+        compact: !0
+      }
+    )
+  ] });
+};
+export {
+  bt as AutoLayoutToggle,
+  Kt as DagreEngine,
+  wt as DirectionControls,
+  Le as LayoutControls,
+  Ce as LayoutProvider,
+  mt as SpacingControls,
+  te as engines,
+  Y as useLayoutContext
+};