@lupinum/board-connections 0.1.0

package/dist/vue.js

@@ -0,0 +1,1479 @@
+import { h as g, defineComponent as xe, nextTick as We, computed as z, shallowRef as H, useId as He, watch as F, Teleport as Oe } from "vue";
+import { CommandBlockedError as Be, boundsIntersect as Ge } from "@lupinum/board-core";
+import { useBoardEngine as Fe } from "@lupinum/vue-board";
+import { E as Xe, j as Ze, e as je, h as Ye, f as Y, i as te, a as ne, r as U } from "./colors-CI4AZ9tI.js";
+const Ue = 6, qe = 0.95, Ke = 0.45, ve = 18, Ve = 16, Je = 10, Qe = 22, et = 0.1, pe = 220, tt = 20, nt = 18, ot = 24, rt = 14, he = 13;
+function K(e) {
+  return Math.max(0, Math.min(1, e));
+}
+function at(e, n, r) {
+  return e >= n ? 1 : e <= r ? 0 : K((e - r) / (n - r));
+}
+function dt(e) {
+  return Math.max(
+    Je,
+    Math.min(
+      Qe,
+      Ve * Math.sqrt(e)
+    )
+  );
+}
+function q(e, n, r, v) {
+  return n.screenToWorld(e.toLocalPoint(r, v));
+}
+function it(e, n) {
+  return {
+    id: `floating-${n}`,
+    x: e.x,
+    y: e.y,
+    width: 0,
+    height: 0
+  };
+}
+function lt(e, n, r) {
+  const v = K(n === "top" || n === "bottom" ? (r.x - e.x) / Math.max(e.width, 1) : (r.y - e.y) / Math.max(e.height, 1));
+  return { side: n, offset: v };
+}
+function me(e, n) {
+  return !!(e && n && e.side === n.side && Math.abs(e.offset - n.offset) < 1e-3);
+}
+function Ie(e) {
+  return e instanceof Element ? e.closest("[data-connection-edge-id]")?.dataset.connectionEdgeId ?? null : null;
+}
+function ct(e) {
+  if (!(e instanceof Element)) return null;
+  const n = e.closest(
+    "[data-connection-node-id][data-connection-side]"
+  );
+  return !n?.dataset.connectionNodeId || !n.dataset.connectionSide ? null : {
+    nodeId: n.dataset.connectionNodeId,
+    side: n.dataset.connectionSide,
+    offset: K(Number(n.dataset.connectionOffset ?? 0.5))
+  };
+}
+function ut(e, n) {
+  return Ie(e) === n;
+}
+function be(e, n, r, v) {
+  let A = null, N = -1 / 0;
+  for (const x of e) {
+    if (!x.visible || x.zIndex <= N) continue;
+    const C = x.x, w = x.x + x.width, S = x.y, y = x.y + x.height;
+    if (n.x < C - r || n.x > w + r || n.y < S - r || n.y > y + r)
+      continue;
+    const s = Math.min(
+      v,
+      Math.min(x.width, x.height) / 3
+    );
+    let I = null, c = 1 / 0;
+    const a = (u, f) => {
+      f < c && (I = u, c = f);
+    };
+    n.x >= C + s && n.x <= w - s && (a("top", Math.abs(n.y - S)), a("bottom", Math.abs(n.y - y))), n.y >= S + s && n.y <= y - s && (a("left", Math.abs(n.x - C)), a("right", Math.abs(n.x - w))), I && c <= r && (A = {
+      nodeId: x.id,
+      ...lt(x, I, n)
+    }, N = x.zIndex);
+  }
+  return A;
+}
+function st(e) {
+  const n = e.active?.pointerId ?? e.pending?.pointerId;
+  if (n === void 0 || n !== e.pointerId)
+    return { pending: e.pending, active: e.active };
+  if (e.pending) {
+    if (Math.hypot(
+      e.pointerWorld.x - e.pending.startWorld.x,
+      e.pointerWorld.y - e.pending.startWorld.y
+    ) * e.zoom < e.threshold)
+      return { pending: e.pending, active: null };
+    const v = {
+      pointerId: e.pending.pointerId,
+      pointerWorld: e.pointerWorld,
+      candidateNodeId: e.candidateNodeId,
+      candidateAnchor: e.candidateAnchor
+    };
+    return {
+      pending: null,
+      active: e.pending.mode === "reconnect" ? {
+        ...v,
+        mode: "reconnect",
+        edgeId: e.pending.edgeId,
+        end: e.pending.end
+      } : {
+        ...v,
+        mode: "create",
+        sourceNodeId: e.pending.sourceNodeId,
+        sourceSide: e.pending.sourceSide
+      }
+    };
+  }
+  return e.active ? {
+    pending: null,
+    active: {
+      ...e.active,
+      pointerWorld: e.pointerWorld,
+      candidateNodeId: e.candidateNodeId,
+      candidateAnchor: e.candidateAnchor
+    }
+  } : { pending: null, active: null };
+}
+function gt(e) {
+  const { entry: n } = e;
+  return g("path", {
+    d: n.route.path,
+    stroke: e.stroke,
+    color: n.edge.color ?? "var(--board-edge-color)",
+    fill: "none",
+    opacity: e.opacity,
+    "stroke-width": e.strokeWidth,
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "vector-effect": "non-scaling-stroke",
+    "marker-start": n.edge.fromEnd === "arrow" ? `url(#${e.markerId})` : void 0,
+    "marker-end": n.edge.toEnd === "arrow" ? `url(#${e.markerId})` : void 0,
+    style: { pointerEvents: "none" }
+  });
+}
+function ft(e) {
+  const { preview: n, drag: r } = e, v = n.edge?.color ?? "var(--board-edge-active-color)", A = r.mode === "reconnect" && r.end === "from" ? n.target : n.source, N = r.mode === "reconnect" && r.end === "from" ? n.source : n.target;
+  return [
+    n.candidateNode ? g("rect", {
+      x: n.candidateNode.x,
+      y: n.candidateNode.y,
+      width: n.candidateNode.width,
+      height: n.candidateNode.height,
+      rx: 10,
+      ry: 10,
+      fill: "none",
+      stroke: "var(--board-edge-active-color)",
+      "stroke-width": 2 / e.zoom,
+      "vector-effect": "non-scaling-stroke",
+      opacity: 0.9,
+      style: { pointerEvents: "none" }
+    }) : null,
+    g("path", {
+      d: n.route.path,
+      stroke: v,
+      fill: "none",
+      opacity: 0.55,
+      "stroke-width": e.strokeWidth,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "vector-effect": "non-scaling-stroke",
+      "marker-end": `url(#${e.markerId})`,
+      color: v,
+      style: { pointerEvents: "none" }
+    }),
+    g("circle", {
+      cx: A.point.x,
+      cy: A.point.y,
+      r: e.handleRadius,
+      fill: "#ffffff",
+      stroke: v,
+      "stroke-width": 1.5 / e.zoom,
+      "vector-effect": "non-scaling-stroke",
+      style: { pointerEvents: "none" }
+    }),
+    g("circle", {
+      cx: N.point.x,
+      cy: N.point.y,
+      r: e.handleRadius,
+      fill: "#ffffff",
+      stroke: "var(--board-edge-active-color)",
+      "stroke-width": 1.5 / e.zoom,
+      "vector-effect": "non-scaling-stroke",
+      style: { pointerEvents: "none" }
+    })
+  ];
+}
+const vt = xe({
+  name: "ConnectionLabel",
+  props: {
+    edgeId: { type: String, required: !0 },
+    point: { type: Object, required: !0 },
+    label: { type: String, default: "" },
+    color: { type: String, default: "var(--board-edge-color)" },
+    zoom: { type: Number, required: !0 },
+    selected: { type: Boolean, default: !1 },
+    hovered: { type: Boolean, default: !1 },
+    editing: { type: Boolean, default: !1 },
+    draft: { type: String, default: "" }
+  },
+  emits: {
+    edgePointerDown: (e, n) => !0,
+    beginEdit: (e) => !0,
+    updateDraft: (e) => !0,
+    commitEdit: () => !0,
+    cancelEdit: () => !0
+  },
+  setup(e, { emit: n }) {
+    return () => {
+      if (!e.editing && !e.label) return null;
+      const r = e.editing || e.selected || e.hovered, A = 1 / Math.max(e.zoom, et), N = e.editing ? e.draft : e.label, x = Math.max(
+        r ? 40 : 24,
+        Math.min(
+          pe,
+          (N.length || 1) * 8 + tt
+        )
+      ), C = r ? ot : nt, w = x * A, S = C * A, y = e.editing ? g("input", {
+        "data-connection-label-input": e.edgeId,
+        "data-board-interactive": "true",
+        "data-connection-edge-id": e.edgeId,
+        type: "text",
+        value: e.draft,
+        onInput: (s) => n("updateDraft", s.target.value),
+        onKeydown: (s) => {
+          s.key === "Enter" ? (s.preventDefault(), n("commitEdit")) : s.key === "Escape" && (s.preventDefault(), n("cancelEdit")), s.stopPropagation();
+        },
+        onBlur: () => n("commitEdit"),
+        onPointerdown: (s) => s.stopPropagation(),
+        style: {
+          width: "100%",
+          height: "100%",
+          boxSizing: "border-box",
+          padding: "2px 8px",
+          borderRadius: "999px",
+          border: "1px solid currentColor",
+          background: "var(--board-node-bg, #fff)",
+          color: "inherit",
+          font: "inherit",
+          fontSize: `${he}px`,
+          lineHeight: "1",
+          outline: "none",
+          boxShadow: "0 1px 2px rgba(0,0,0,0.06)"
+        }
+      }) : g(
+        "div",
+        {
+          "data-connection-label": e.edgeId,
+          "data-board-interactive": "true",
+          "data-connection-edge-id": e.edgeId,
+          title: e.label,
+          onPointerdown: (s) => n("edgePointerDown", e.edgeId, s),
+          onDblclick: (s) => {
+            s.preventDefault(), s.stopPropagation(), n("beginEdit", e.edgeId);
+          },
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: r ? "2px 8px" : "0 3px",
+            maxWidth: `${pe}px`,
+            borderRadius: "999px",
+            border: r ? "1px solid currentColor" : "1px solid transparent",
+            background: r ? "var(--board-node-bg, #fff)" : "transparent",
+            fontSize: `${r ? he : rt}px`,
+            lineHeight: r ? "1" : "1.2",
+            fontWeight: r ? "500" : "600",
+            color: "inherit",
+            cursor: "text",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            textShadow: r ? "none" : "0 1px 0 var(--board-node-bg, #fff), 0 -1px 0 var(--board-node-bg, #fff), 1px 0 0 var(--board-node-bg, #fff), -1px 0 0 var(--board-node-bg, #fff)",
+            boxShadow: r ? "0 1px 2px rgba(0,0,0,0.06)" : "none"
+          }
+        },
+        e.label || " "
+      );
+      return g(
+        "foreignObject",
+        {
+          x: e.point.x - w / 2,
+          y: e.point.y - S / 2,
+          width: w,
+          height: S,
+          color: e.color,
+          style: { overflow: "visible", pointerEvents: "auto" }
+        },
+        [
+          g(
+            "div",
+            {
+              xmlns: "http://www.w3.org/1999/xhtml",
+              style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              }
+            },
+            [
+              g(
+                "div",
+                {
+                  style: {
+                    width: `${x}px`,
+                    height: `${C}px`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }
+                },
+                [y]
+              )
+            ]
+          )
+        ]
+      );
+    };
+  }
+}), Ee = 24;
+function pt(e) {
+  const n = String(e.edge.id), r = e.screen, v = e, A = e.edge.color, N = !!e.edge.fromAnchor, x = !!e.edge.toAnchor, C = N || x, w = e.edge.fromEnd ?? "none", S = e.edge.toEnd ?? "arrow", y = w === "arrow" && S === "arrow" ? "both" : w === "none" && S === "none" ? "none" : "to", s = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    padding: "0",
+    border: "none",
+    background: "transparent",
+    borderRadius: "6px",
+    cursor: "pointer",
+    fontSize: "14px",
+    lineHeight: "1",
+    color: "var(--board-muted-fg, #6b7280)"
+  }, I = (i, L) => ({
+    width: "20px",
+    height: "20px",
+    borderRadius: "50%",
+    background: i,
+    border: L ? "2px solid var(--board-fg, #0f172a)" : "1px solid rgba(15, 23, 42, 0.15)",
+    cursor: "pointer",
+    padding: "0",
+    boxSizing: "border-box"
+  }), c = (i, L) => g(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: Ee,
+      height: Ee,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    i.map((P) => g("path", { d: P }))
+  ), a = (i, L, P, R) => g(
+    "button",
+    {
+      "data-board-interactive": "true",
+      ...R?.testId ? { [R.testId]: n } : {},
+      type: "button",
+      title: i,
+      "aria-label": i,
+      disabled: R?.disabled,
+      style: {
+        ...s,
+        opacity: R?.disabled ? "0.38" : "1",
+        color: R?.danger ? "#b45353" : "var(--board-muted-fg, #6b7280)",
+        cursor: R?.disabled ? "default" : "pointer"
+      },
+      onClick: P
+    },
+    [L]
+  ), u = () => g("span", {
+    style: {
+      display: "inline-block",
+      width: "1px",
+      height: "22px",
+      background: "rgba(15,23,42,0.12)",
+      margin: "0 2px"
+    }
+  }), f = (i, L, P) => g(
+    "button",
+    {
+      "data-board-interactive": "true",
+      "data-connection-direction-option": P,
+      type: "button",
+      title: i,
+      "aria-label": i,
+      style: {
+        display: "grid",
+        gridTemplateColumns: "32px 1fr 24px",
+        alignItems: "center",
+        gap: "8px",
+        width: "100%",
+        minWidth: "250px",
+        height: "42px",
+        padding: "0 12px",
+        border: "none",
+        borderRadius: "7px",
+        background: y === P ? "rgba(107, 114, 128, 0.16)" : "transparent",
+        color: "var(--board-fg, #111827)",
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "18px",
+        lineHeight: "1",
+        textAlign: "left"
+      },
+      onClick: (R) => {
+        R.preventDefault(), R.stopPropagation(), v.onSetDirectionality(P);
+      }
+    },
+    [
+      g("span", { style: { color: "var(--board-muted-fg, #6b7280)" } }, [
+        L
+      ]),
+      g("span", i),
+      y === P ? c(["m20 6-11 11-5-5"]) : g("span")
+    ]
+  );
+  return g(
+    "div",
+    {
+      "data-board-interactive": "true",
+      "data-connection-toolbar": n,
+      onPointerdown: (i) => i.stopPropagation(),
+      style: {
+        position: "absolute",
+        left: `${r.x}px`,
+        top: `${r.y}px`,
+        transform: "translate(-50%, calc(-100% - 14px))",
+        zIndex: "7",
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        padding: "5px",
+        background: "var(--board-node-bg, #ffffff)",
+        border: "1px solid var(--board-node-border, rgba(15,23,42,0.1))",
+        borderRadius: "6px",
+        boxShadow: "0 4px 14px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.08)",
+        fontSize: "12px",
+        color: "var(--board-fg, #0f172a)",
+        whiteSpace: "nowrap",
+        pointerEvents: "auto",
+        userSelect: "none"
+      }
+    },
+    [
+      a(
+        "Remove",
+        c([
+          "M10 11v6",
+          "M14 11v6",
+          "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+          "M3 6h18",
+          "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+        ]),
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), v.onDelete();
+        },
+        { danger: !0 }
+      ),
+      g(
+        "div",
+        {
+          style: {
+            position: "relative",
+            display: "inline-flex"
+          }
+        },
+        [
+          a(
+            "Set colour",
+            c([
+              "M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z",
+              "M13.5 6.5h.01",
+              "M17.5 10.5h.01",
+              "M6.5 12.5h.01",
+              "M8.5 7.5h.01"
+            ]),
+            (i) => {
+              i.preventDefault(), i.stopPropagation(), v.onToggleColorMenu();
+            }
+          ),
+          e.colorMenuOpen ? g(
+            "div",
+            {
+              "data-board-interactive": "true",
+              "data-connection-color-menu": n,
+              style: {
+                position: "absolute",
+                left: "50%",
+                top: "calc(100% + 8px)",
+                transform: "translateX(-50%)",
+                zIndex: "1",
+                display: "grid",
+                gridTemplateColumns: "repeat(4, 20px)",
+                gap: "8px",
+                padding: "8px",
+                background: "var(--board-node-bg, #ffffff)",
+                border: "1px solid var(--board-node-border, rgba(15,23,42,0.1))",
+                borderRadius: "6px",
+                boxShadow: "0 6px 18px rgba(15, 23, 42, 0.14), 0 1px 2px rgba(15, 23, 42, 0.08)"
+              }
+            },
+            [
+              g("button", {
+                "data-board-interactive": "true",
+                type: "button",
+                title: "Default color",
+                style: {
+                  ...I("transparent", !A),
+                  backgroundImage: "repeating-linear-gradient(45deg, rgba(148,163,184,0.35) 0 3px, transparent 3px 6px)"
+                },
+                onClick: (i) => {
+                  i.preventDefault(), i.stopPropagation(), v.onSetColor(void 0);
+                }
+              }),
+              ...Xe.map(
+                (i) => g("button", {
+                  "data-board-interactive": "true",
+                  type: "button",
+                  title: i.label,
+                  style: I(
+                    i.hex,
+                    Ze(A) === i.hex
+                  ),
+                  onClick: (L) => {
+                    L.preventDefault(), L.stopPropagation(), v.onSetColor(i.hex);
+                  }
+                })
+              )
+            ]
+          ) : null
+        ]
+      ),
+      u(),
+      g(
+        "div",
+        {
+          style: {
+            position: "relative",
+            display: "inline-flex"
+          }
+        },
+        [
+          a(
+            "Line direction",
+            c(["M5 12h14", "m12 5 7 7-7 7"]),
+            (i) => {
+              i.preventDefault(), i.stopPropagation(), v.onToggleDirectionMenu();
+            },
+            { testId: "data-connection-direction-menu-button" }
+          ),
+          e.directionMenuOpen ? g(
+            "div",
+            {
+              "data-board-interactive": "true",
+              "data-connection-direction-menu": n,
+              style: {
+                position: "absolute",
+                left: "50%",
+                top: "calc(100% + 8px)",
+                transform: "translateX(-50%)",
+                zIndex: "1",
+                display: "grid",
+                gap: "2px",
+                padding: "8px",
+                background: "var(--board-node-bg, #ffffff)",
+                border: "1px solid var(--board-node-border, rgba(15,23,42,0.1))",
+                borderRadius: "8px",
+                boxShadow: "0 8px 22px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.08)"
+              }
+            },
+            [
+              f(
+                "Nondirectional",
+                c(["M5 12h14"]),
+                "none"
+              ),
+              f(
+                "Unidirectional",
+                c(["M5 12h14", "m12 5 7 7-7 7"]),
+                "to"
+              ),
+              f(
+                "Bidirectional",
+                c(["M7 7 3 12l4 5", "M17 7l4 5-4 5", "M4 12h16"]),
+                "both"
+              )
+            ]
+          ) : null
+        ]
+      ),
+      C ? u() : null,
+      N ? a(
+        "Reset source anchor to auto",
+        c([
+          "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8",
+          "M21 3v5h-5",
+          "M12 7v5l3 3"
+        ]),
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), v.onResetAnchor("from");
+        },
+        { testId: "data-connection-reset-source-anchor" }
+      ) : null,
+      x ? a(
+        "Reset target anchor to auto",
+        c([
+          "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16",
+          "M3 21v-5h5",
+          "M12 7v5l3 3"
+        ]),
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), v.onResetAnchor("to");
+        },
+        { testId: "data-connection-reset-target-anchor" }
+      ) : null,
+      N && x ? a(
+        "Reset connection to auto",
+        c([
+          "M4 4v6h6",
+          "M20 20v-6h-6",
+          "M20 9A8 8 0 0 0 6.3 4.7L4 7",
+          "M4 15a8 8 0 0 0 13.7 4.3L20 17"
+        ]),
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), v.onResetAnchor("both");
+        },
+        { testId: "data-connection-reset-all-anchors" }
+      ) : null,
+      a(
+        "Remove label",
+        c(["M3 3h18v18H3z", "m15 9-6 6", "m9 9 6 6"]),
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), v.onClearLabel();
+        },
+        {
+          disabled: !e.edge.label,
+          testId: "data-connection-remove-label"
+        }
+      ),
+      a(
+        "Edit label",
+        c([
+          "M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7",
+          "M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"
+        ]),
+        (i) => {
+          i.preventDefault(), i.stopPropagation(), v.onBeginLabelEdit();
+        }
+      )
+    ]
+  );
+}
+function O(e) {
+  try {
+    return e();
+  } catch (n) {
+    if (n instanceof Be) return;
+    throw n;
+  }
+}
+function ht(e) {
+  const n = e.state;
+  function r(a, u) {
+    u.preventDefault(), u.stopPropagation(), n.editingEdgeId.value && n.editingEdgeId.value !== a && A(), n.selectedEdgeId.value = a, n.hoveredEdgeId.value = a, n.hoveredNodeHandle.value = null;
+  }
+  function v(a) {
+    const u = e.getEntry(a);
+    u && (n.selectedEdgeId.value = a, n.hoveredEdgeId.value = a, n.editingEdgeId.value = a, n.labelDraft.value = u.edge.label ?? "", We(() => {
+      const f = e.getRootElement()?.querySelector(
+        `[data-connection-label-input="${a}"]`
+      ) ?? null;
+      f?.focus(), f?.select();
+    }));
+  }
+  function A() {
+    const a = n.editingEdgeId.value;
+    if (!a) return;
+    const u = e.getEntry(a);
+    if (n.editingEdgeId.value = null, !u) return;
+    const f = n.labelDraft.value.trim();
+    f !== (u.edge.label ?? "") && O(
+      () => e.getEngine().plugins.connections.updateEdge(u.edge.id, {
+        label: f || void 0
+      })
+    );
+  }
+  function N(a) {
+    const u = e.getEntry(a);
+    u?.edge.label && (n.editingEdgeId.value === a && (n.editingEdgeId.value = null), O(
+      () => e.getEngine().plugins.connections.updateEdge(u.edge.id, {
+        label: void 0
+      })
+    ));
+  }
+  function x() {
+    n.editingEdgeId.value = null, n.labelDraft.value = "";
+  }
+  function C(a, u) {
+    const f = e.getEntry(a);
+    if (!f) return;
+    const i = je(
+      u === "to" ? "end" : u
+    );
+    O(
+      () => e.getEngine().plugins.connections.updateEdge(f.edge.id, {
+        fromEnd: i.fromEnd,
+        toEnd: i.toEnd
+      })
+    ), n.directionMenuEdgeId.value = null;
+  }
+  function w(a, u) {
+    const f = e.getEntry(a);
+    f && (O(
+      () => e.getEngine().plugins.connections.updateEdge(f.edge.id, { color: u })
+    ), n.colorMenuEdgeId.value = null);
+  }
+  function S(a, u) {
+    const f = e.getEntry(a);
+    f && O(
+      () => e.getEngine().plugins.connections.updateEdge(f.edge.id, {
+        ...u === "from" || u === "both" ? { fromAnchor: void 0 } : {},
+        ...u === "to" || u === "both" ? { toAnchor: void 0 } : {}
+      })
+    );
+  }
+  function y(a) {
+    const u = e.getEntry(a);
+    if (u) {
+      for (const f of [
+        n.editingEdgeId,
+        n.selectedEdgeId,
+        n.hoveredEdgeId,
+        n.colorMenuEdgeId,
+        n.directionMenuEdgeId
+      ])
+        f.value === a && (f.value = null);
+      O(
+        () => e.getEngine().plugins.connections.deleteEdge(u.edge.id)
+      );
+    }
+  }
+  function s(a) {
+    const u = e.getEntry(a.edgeId);
+    if (!u || !a.candidateNodeId) return;
+    const f = a.candidateNodeId, i = e.getEngine().plugins.connections;
+    if (a.end === "from") {
+      if (u.edge.from === f && me(u.edge.fromAnchor, a.candidateAnchor))
+        return;
+      O(
+        () => i.updateEdge(u.edge.id, {
+          from: f,
+          fromAnchor: a.candidateAnchor ?? void 0
+        })
+      );
+      return;
+    }
+    u.edge.to === f && me(u.edge.toAnchor, a.candidateAnchor) || O(
+      () => i.updateEdge(u.edge.id, {
+        to: f,
+        toAnchor: a.candidateAnchor ?? void 0
+      })
+    );
+  }
+  function I(a) {
+    const u = e.getEngine(), f = u.findNode(a.sourceNodeId);
+    if (!f) return;
+    const i = a.candidateNodeId ? u.findNode(a.candidateNodeId) : e.createNodeForConnection()?.({
+      sourceNodeId: a.sourceNodeId,
+      sourceSide: a.sourceSide,
+      pointerWorld: { ...a.pointerWorld },
+      candidateAnchor: a.candidateAnchor ? { ...a.candidateAnchor } : null
+    });
+    if (!i) return;
+    const L = O(
+      () => u.plugins.connections.createEdge({
+        from: f.id,
+        to: i.id,
+        fromAnchor: e.getEndpointMode() === "manual" ? { side: a.sourceSide, offset: 0.5 } : void 0,
+        toAnchor: e.getEndpointMode() === "manual" && a.candidateAnchor ? a.candidateAnchor : void 0,
+        data: {}
+      })
+    );
+    L && (n.selectedEdgeId.value = String(L.id), n.hoveredEdgeId.value = String(L.id));
+  }
+  function c(a) {
+    a.mode === "reconnect" ? s(a) : I(a);
+  }
+  return {
+    onEdgePointerDown: r,
+    beginLabelEdit: v,
+    commitLabelEdit: A,
+    clearLabel: N,
+    cancelLabelEdit: x,
+    setDirectionality: C,
+    applyEdgeColor: w,
+    resetEndpointAnchor: S,
+    deleteEdge: y,
+    commitDrag: c
+  };
+}
+const It = xe({
+  name: "BoardConnectionLayer",
+  props: {
+    routing: {
+      type: String,
+      default: void 0
+    },
+    endpointMode: {
+      type: String,
+      default: void 0
+    },
+    createNodeForConnection: {
+      type: Function,
+      default: null
+    }
+  },
+  setup(e, { slots: n }) {
+    const r = Fe(), v = z(
+      () => r.engine
+    ), A = H(0), N = `board-connection-arrow-${He().replace(/[^A-Za-z0-9_-]/g, "-")}`, x = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Map(), w = H(null), S = H(null), y = H(null), s = H(null), I = H(null), c = H(null), a = H(null), u = H(""), f = H(null), i = H(null), L = typeof window < "u" && window.matchMedia?.("(pointer: coarse)").matches;
+    let P = !1;
+    function R() {
+      P || (P = !0, queueMicrotask(() => {
+        A.value += 1, P = !1;
+      }));
+    }
+    F(
+      v,
+      (t, d, o) => {
+        const l = [
+          t.on("edge:created", R),
+          t.on("edge:updated", R),
+          t.on("edge:deleted", R),
+          t.$nodes.subscribe(() => R())
+        ];
+        o(() => {
+          for (const p of l)
+            p();
+        });
+      },
+      { immediate: !0 }
+    ), F(
+      () => r.rootElement.value,
+      (t, d, o) => {
+        if (!t)
+          return;
+        const l = (E) => {
+          if (c.value || I.value)
+            return;
+          const h = E.target;
+          h instanceof Element && h.closest('[data-board-interactive="true"]') || (s.value = null, w.value = null, y.value = null, f.value = null, i.value = null, re());
+        }, p = (E) => {
+          if (c.value || I.value)
+            return;
+          const h = Ie(E.target), D = v.value, _ = q(
+            r,
+            D,
+            E.clientX,
+            E.clientY
+          ), $ = D.getNodeAt(_), k = ct(E.target) ?? be(
+            r.$nodes.value.values(),
+            _,
+            ce.value,
+            ue.value
+          );
+          w.value = h ?? (s.value ? s.value : null), y.value = h ? null : k, S.value = $?.id ?? null;
+        }, b = () => {
+          !c.value && !I.value && !s.value && (w.value = null, y.value = null), S.value = null;
+        };
+        t.addEventListener("pointerdown", l), t.addEventListener("pointermove", p), t.addEventListener("pointerleave", b), o(() => {
+          t.removeEventListener("pointerdown", l), t.removeEventListener("pointermove", p), t.removeEventListener("pointerleave", b);
+        });
+      },
+      { immediate: !0 }
+    );
+    const V = z(() => {
+      A.value;
+      const t = r.$nodes.value, d = v.value, o = e.routing ?? d.plugins.connections.getConfig().routing, l = r.viewportSize.value, p = r.$camera.value, b = l.x > 0 && l.y > 0 ? d.getVisibleBounds(l.x, l.y) : null, E = 400 / Math.max(p.z, 0.1), h = b ? {
+        minX: b.minX - E,
+        minY: b.minY - E,
+        maxX: b.maxX + E,
+        maxY: b.maxY + E
+      } : null, D = /* @__PURE__ */ new Map(), _ = d.plugins.connections.getEdges(), $ = _.map((m) => {
+        const M = t.get(m.from), T = t.get(m.to);
+        if (!M || !T)
+          return null;
+        const W = String(m.id), ge = JSON.stringify([
+          m.from,
+          m.to,
+          m.fromAnchor,
+          m.toAnchor,
+          m.fromEnd,
+          m.toEnd
+        ]), G = C.get(W), fe = x.get(W), B = G?.key === ge && G.routing === o && G.sourceNode === M && G.targetNode === T ? G.geometry : Ye(m, M, T, {
+          routing: o,
+          previousSourceSide: fe?.source,
+          previousTargetSide: fe?.target
+        });
+        return C.set(W, {
+          key: ge,
+          routing: o,
+          sourceNode: M,
+          targetNode: T,
+          geometry: B
+        }), D.set(W, {
+          source: B.source.side,
+          target: B.target.side
+        }), h && s.value !== W && !Ge(h, B.route.bounds) ? null : {
+          edge: m,
+          source: B.source,
+          target: B.target,
+          route: B.route
+        };
+      }).filter((m) => !!m);
+      x.clear();
+      for (const [m, M] of D)
+        x.set(m, M);
+      const k = new Set(_.map((m) => String(m.id)));
+      for (const m of C.keys())
+        k.has(m) || C.delete(m);
+      return $;
+    }), X = z(
+      () => new Map(
+        V.value.map((t) => [String(t.edge.id), t])
+      )
+    ), J = z(
+      () => e.endpointMode ?? v.value.plugins.connections.getConfig().endpointMode
+    ), {
+      onEdgePointerDown: oe,
+      beginLabelEdit: Q,
+      commitLabelEdit: re,
+      clearLabel: ye,
+      cancelLabelEdit: we,
+      setDirectionality: Me,
+      applyEdgeColor: ke,
+      resetEndpointAnchor: Se,
+      deleteEdge: ae,
+      commitDrag: Ae
+    } = ht({
+      getEngine: () => v.value,
+      getEntry: (t) => X.value.get(t),
+      getRootElement: () => r.rootElement.value,
+      getEndpointMode: () => J.value,
+      createNodeForConnection: () => e.createNodeForConnection,
+      state: {
+        hoveredEdgeId: w,
+        hoveredNodeHandle: y,
+        selectedEdgeId: s,
+        editingEdgeId: a,
+        labelDraft: u,
+        colorMenuEdgeId: f,
+        directionMenuEdgeId: i
+      }
+    });
+    F(V, (t) => {
+      const d = new Set(t.map((o) => String(o.edge.id)));
+      s.value && !d.has(s.value) && (s.value = null), w.value && !d.has(w.value) && (w.value = null), I.value?.mode === "reconnect" && !d.has(I.value.edgeId) && (I.value = null), c.value?.mode === "reconnect" && !d.has(c.value.edgeId) && (c.value = null);
+    });
+    const de = z(() => {
+      const t = c.value;
+      if (!t)
+        return null;
+      const d = r.$nodes.value, o = t.candidateNodeId ? d.get(t.candidateNodeId) : void 0, l = e.routing ?? v.value.plugins.connections.getConfig().routing;
+      if (t.mode === "reconnect") {
+        const k = X.value.get(t.edgeId);
+        if (!k)
+          return null;
+        if (t.end === "from") {
+          const T = k.target, W = o ? Y(
+            {
+              ...k.edge,
+              from: o.id,
+              fromAnchor: t.candidateAnchor ?? void 0
+            },
+            o,
+            T.node,
+            "source",
+            t.candidateAnchor?.side ?? k.source.side
+          ) : te(
+            t.pointerWorld,
+            T.point,
+            "source",
+            k.source.side
+          );
+          return {
+            edge: k.edge,
+            source: W,
+            target: T,
+            route: ne({ source: W, target: T, routing: l }),
+            candidateNode: o
+          };
+        }
+        const m = k.source, M = o ? Y(
+          {
+            ...k.edge,
+            to: o.id,
+            toAnchor: t.candidateAnchor ?? void 0
+          },
+          o,
+          m.node,
+          "target",
+          t.candidateAnchor?.side ?? k.target.side
+        ) : te(
+          t.pointerWorld,
+          m.point,
+          "target",
+          k.target.side
+        );
+        return {
+          edge: k.edge,
+          source: m,
+          target: M,
+          route: ne({ source: m, target: M, routing: l }),
+          candidateNode: o
+        };
+      }
+      const p = d.get(t.sourceNodeId);
+      if (!p)
+        return null;
+      const b = J.value === "manual" ? { side: t.sourceSide, offset: 0.5 } : void 0, E = J.value === "manual" && t.candidateAnchor ? t.candidateAnchor : void 0, h = {
+        from: p.id,
+        to: o?.id ?? "floating-target",
+        fromAnchor: b,
+        toAnchor: E
+      }, D = o ?? it(t.pointerWorld, "target"), _ = Y(
+        h,
+        p,
+        D,
+        "source",
+        t.sourceSide
+      ), $ = o ? Y(
+        h,
+        o,
+        p,
+        "target"
+      ) : te(t.pointerWorld, _.point, "target");
+      return {
+        edge: null,
+        source: _,
+        target: $,
+        route: ne({ source: _, target: $, routing: l }),
+        candidateNode: o
+      };
+    }), Z = z(
+      () => 5 / Math.max(r.$camera.value.z, 0.25)
+    ), ie = z(
+      () => Math.max(
+        10,
+        (L ? 22 : 12) / Math.max(r.$camera.value.z, 0.25)
+      )
+    ), le = z(() => 1.85), Ne = z(
+      () => Math.max(16, 20 / Math.max(r.$camera.value.z, 0.25))
+    ), De = z(
+      () => 2.5 / Math.max(r.$camera.value.z, 0.25)
+    ), ce = z(
+      () => Math.max(18, 22 / Math.max(r.$camera.value.z, 0.25))
+    ), ue = z(
+      () => 18 / Math.max(r.$camera.value.z, 0.25)
+    );
+    function Ce(t, d, o) {
+      o.preventDefault(), o.stopPropagation(), o.currentTarget?.setPointerCapture?.(
+        o.pointerId
+      );
+      const l = v.value, p = q(
+        r,
+        l,
+        o.clientX,
+        o.clientY
+      );
+      s.value = String(t.edge.id), w.value = String(t.edge.id), y.value = null, I.value = {
+        mode: "reconnect",
+        edgeId: String(t.edge.id),
+        end: d,
+        pointerId: o.pointerId,
+        startWorld: p
+      };
+    }
+    function Le(t, d, o) {
+      o.preventDefault(), o.stopPropagation(), o.currentTarget?.setPointerCapture?.(
+        o.pointerId
+      );
+      const l = v.value, p = q(
+        r,
+        l,
+        o.clientX,
+        o.clientY
+      );
+      w.value = null, s.value = null, y.value = { nodeId: t, side: d, offset: 0.5 }, I.value = {
+        mode: "create",
+        sourceNodeId: t,
+        sourceSide: d,
+        pointerId: o.pointerId,
+        startWorld: p
+      };
+    }
+    F(s, (t, d, o) => {
+      if (!s.value)
+        return;
+      const l = (p) => {
+        const b = s.value;
+        if (!b || a.value)
+          return;
+        const E = p.target;
+        if (E instanceof HTMLElement) {
+          const h = E.tagName;
+          if (h === "INPUT" || h === "TEXTAREA" || E.isContentEditable)
+            return;
+        }
+        p.key === "Delete" || p.key === "Backspace" ? (p.preventDefault(), ae(b)) : p.key === "Escape" && (f.value = null, i.value = null);
+      };
+      window.addEventListener("keydown", l), o(() => {
+        window.removeEventListener("keydown", l);
+      });
+    }), F([I, c], ([t, d], o, l) => {
+      if (!t && !d)
+        return;
+      const p = (h) => {
+        const D = I.value, _ = c.value, $ = _?.pointerId ?? D?.pointerId;
+        if ($ === void 0 || h.pointerId !== $)
+          return;
+        const k = v.value, m = q(
+          r,
+          k,
+          h.clientX,
+          h.clientY
+        ), M = be(
+          r.$nodes.value.values(),
+          m,
+          ce.value,
+          ue.value
+        ), T = M ? k.findNode(M.nodeId) : k.getNodeAt(m), W = st({
+          pending: D,
+          active: _,
+          pointerId: h.pointerId,
+          pointerWorld: m,
+          candidateNodeId: T?.id ?? null,
+          candidateAnchor: M ? { side: M.side, offset: M.offset } : null,
+          zoom: r.$camera.value.z,
+          threshold: Ue
+        });
+        I.value = W.pending, c.value = W.active;
+      }, b = (h) => {
+        if (I.value && h.pointerId === I.value.pointerId) {
+          I.value = null;
+          return;
+        }
+        !c.value || h.pointerId !== c.value.pointerId || (Ae(c.value), c.value = null);
+      }, E = (h) => {
+        I.value && h.pointerId === I.value.pointerId && (I.value = null), c.value && h.pointerId === c.value.pointerId && (c.value = null);
+      };
+      window.addEventListener("pointermove", p), window.addEventListener("pointerup", b), window.addEventListener("pointercancel", E), l(() => {
+        window.removeEventListener("pointermove", p), window.removeEventListener("pointerup", b), window.removeEventListener("pointercancel", E);
+      });
+    });
+    function se(t, d, o) {
+      return g(
+        "g",
+        {
+          "data-board-interactive": "true",
+          "data-connection-interactive": "true",
+          "data-connection-edge-id": String(t.edge.id),
+          "data-connection-handle": d,
+          style: {
+            pointerEvents: "all",
+            cursor: "grab"
+          },
+          onPointerdown: (l) => Ce(t, d, l)
+        },
+        [
+          g("circle", {
+            cx: o.point.x,
+            cy: o.point.y,
+            r: ie.value,
+            fill: "rgba(15, 23, 42, 0.001)",
+            stroke: "none"
+          }),
+          g("circle", {
+            cx: o.point.x,
+            cy: o.point.y,
+            r: Z.value,
+            fill: "#ffffff",
+            stroke: t.edge.color ?? "var(--board-edge-active-color)",
+            "stroke-width": 1.5 / Math.max(r.$camera.value.z, 0.25),
+            "vector-effect": "non-scaling-stroke"
+          })
+        ]
+      );
+    }
+    function ee(t, d) {
+      const o = r.$nodes.value.get(t);
+      if (!o)
+        return null;
+      const l = U(o, { side: d, offset: 0.5 });
+      return g(
+        "g",
+        {
+          "data-board-interactive": "true",
+          "data-connection-interactive": "true",
+          "data-connection-create-handle": "true",
+          "data-connection-node-id": String(t),
+          "data-connection-side": d,
+          "data-connection-offset": "0.5",
+          style: {
+            pointerEvents: "all",
+            cursor: "crosshair"
+          },
+          onPointerdown: (p) => Le(t, d, p)
+        },
+        [
+          g("circle", {
+            cx: l.x,
+            cy: l.y,
+            r: ie.value,
+            fill: "rgba(15, 23, 42, 0.001)",
+            stroke: "none"
+          }),
+          g("circle", {
+            cx: l.x,
+            cy: l.y,
+            r: Z.value * 0.9,
+            fill: "var(--board-edge-active-color)",
+            stroke: "#ffffff",
+            "stroke-width": 1.25 / Math.max(r.$camera.value.z, 0.25),
+            "vector-effect": "non-scaling-stroke"
+          })
+        ]
+      );
+    }
+    function j(t, d, o = {}) {
+      const l = r.$nodes.value.get(t);
+      if (!l)
+        return null;
+      const p = U(l, { side: d.side, offset: 0 }), b = U(l, { side: d.side, offset: 1 }), E = U(l, d), h = (o.active ? 2.4 : 1.6) / Math.max(r.$camera.value.z, 0.25);
+      return g(
+        "g",
+        {
+          "data-connection-anchor-rail": String(t),
+          "data-connection-side": d.side,
+          style: {
+            pointerEvents: "none"
+          }
+        },
+        [
+          g("line", {
+            x1: p.x,
+            y1: p.y,
+            x2: b.x,
+            y2: b.y,
+            stroke: "var(--board-edge-active-color)",
+            "stroke-width": h,
+            "stroke-linecap": "round",
+            "vector-effect": "non-scaling-stroke",
+            opacity: o.active ? 0.72 : 0.36
+          }),
+          g("circle", {
+            cx: E.x,
+            cy: E.y,
+            r: Z.value * (o.active ? 1.12 : 0.92),
+            fill: o.createHandle ? "var(--board-edge-active-color)" : "#ffffff",
+            stroke: "var(--board-edge-active-color)",
+            "stroke-width": 1.4 / Math.max(r.$camera.value.z, 0.25),
+            "vector-effect": "non-scaling-stroke",
+            opacity: o.active ? 1 : 0.9
+          })
+        ]
+      );
+    }
+    function Re() {
+      const t = c.value?.mode === "create" ? c.value : null, d = c.value?.mode === "reconnect" ? c.value : null, o = t ? ee(t.sourceNodeId, t.sourceSide) : null, l = y.value && (!t || y.value.nodeId !== t.sourceNodeId || y.value.side !== t.sourceSide) ? ee(
+        y.value.nodeId,
+        y.value.side
+      ) : null, p = S.value && (!t || S.value !== t.sourceNodeId) ? ["top", "right", "bottom", "left"].filter(
+        (D) => !y.value || y.value.nodeId !== S.value || y.value.side !== D
+      ).map(
+        (D) => ee(S.value, D)
+      ) : [], b = s.value && !d ? X.value.get(s.value) : void 0, E = b ? [
+        b.edge.fromAnchor ? j(
+          b.edge.from,
+          b.edge.fromAnchor
+        ) : null,
+        b.edge.toAnchor ? j(
+          b.edge.to,
+          b.edge.toAnchor
+        ) : null
+      ] : [], h = d?.candidateNodeId && d.candidateAnchor ? j(
+        d.candidateNodeId,
+        d.candidateAnchor,
+        { active: !0 }
+      ) : t?.candidateNodeId && t.candidateAnchor ? j(
+        t.candidateNodeId,
+        t.candidateAnchor,
+        { active: !0, createHandle: !0 }
+      ) : null;
+      return [
+        ...E,
+        ...h ? [h] : [],
+        ...o ? [o] : [],
+        ...l ? [l] : [],
+        ...p
+      ];
+    }
+    function _e(t, d) {
+      const o = String(t.edge.id);
+      return g(vt, {
+        edgeId: o,
+        point: t.route.labelPoint,
+        label: t.edge.label ?? "",
+        color: t.edge.color ?? "var(--board-edge-color)",
+        zoom: r.$camera.value.z,
+        selected: d.isSelected,
+        hovered: d.isHovered,
+        editing: a.value === o,
+        draft: u.value,
+        onEdgePointerDown: oe,
+        onBeginEdit: Q,
+        onUpdateDraft: (l) => {
+          u.value = l;
+        },
+        onCommitEdit: re,
+        onCancelEdit: we
+      });
+    }
+    function Pe(t) {
+      const d = String(t.edge.id), o = s.value === d, l = w.value === d, p = c.value?.mode === "reconnect" && c.value.edgeId === d, b = o || l || p, E = Math.max(r.$camera.value.z, 0.25), h = at(
+        E,
+        qe,
+        Ke
+      ), D = t.edge.color ?? "var(--board-edge-color)", _ = p ? 0.22 : o ? 0.98 : l ? 0.92 : 0.24 + h * 0.46, $ = o ? le.value + 0.4 : l ? le.value + 0.2 : 1.15 + h * 0.7, k = n.edge ? n.edge(t) : gt({
+        entry: t,
+        markerId: N,
+        stroke: D,
+        opacity: _,
+        strokeWidth: $
+      }), m = _e(t, { isSelected: o, isHovered: l });
+      return g(
+        "g",
+        {
+          "data-connection-edge-id": d
+        },
+        [
+          k,
+          g("path", {
+            d: t.route.path,
+            stroke: "rgba(15, 23, 42, 0.001)",
+            fill: "none",
+            "stroke-width": Ne.value,
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "vector-effect": "non-scaling-stroke",
+            "data-board-interactive": "true",
+            "data-connection-interactive": "true",
+            "data-connection-edge-id": d,
+            "data-connection-hit": "true",
+            style: {
+              pointerEvents: "stroke",
+              cursor: "pointer"
+            },
+            onPointerdown: (M) => oe(d, M),
+            onDblclick: (M) => {
+              M.preventDefault(), M.stopPropagation(), Q(d);
+            },
+            onPointerleave: (M) => {
+              !ut(M.relatedTarget, d) && s.value !== d && !(c.value?.mode === "reconnect" && c.value.edgeId === d) && (w.value = null);
+            }
+          }),
+          ...b ? [
+            se(t, "from", t.source),
+            se(t, "to", t.target)
+          ] : [],
+          ...m ? [m] : []
+        ]
+      );
+    }
+    function ze() {
+      return !de.value || !c.value ? [] : ft({
+        preview: de.value,
+        drag: c.value,
+        markerId: N,
+        zoom: Math.max(r.$camera.value.z, 0.25),
+        handleRadius: Z.value,
+        strokeWidth: De.value
+      });
+    }
+    function $e() {
+      const t = s.value;
+      if (!t) return null;
+      const d = X.value.get(t);
+      if (!d || c.value?.mode === "reconnect" && c.value.edgeId === t || a.value === t)
+        return null;
+      const o = r.$camera.value;
+      return pt({
+        edge: d.edge,
+        screen: {
+          x: (d.route.labelPoint.x + o.x) * o.z,
+          y: (d.route.labelPoint.y + o.y) * o.z
+        },
+        colorMenuOpen: f.value === t,
+        directionMenuOpen: i.value === t,
+        onDelete: () => ae(t),
+        onToggleColorMenu: () => {
+          f.value = f.value === t ? null : t, i.value = null;
+        },
+        onToggleDirectionMenu: () => {
+          i.value = i.value === t ? null : t, f.value = null;
+        },
+        onSetColor: (l) => ke(t, l),
+        onSetDirectionality: (l) => Me(t, l),
+        onResetAnchor: (l) => Se(t, l),
+        onClearLabel: () => ye(t),
+        onBeginLabelEdit: () => Q(t)
+      });
+    }
+    function Te() {
+      const t = Math.max(r.$camera.value.z, 0.25), d = dt(t) / t;
+      return g(
+        "svg",
+        {
+          class: "board-connection-layer",
+          style: {
+            position: "absolute",
+            inset: "0",
+            width: "100%",
+            height: "100%",
+            overflow: "visible",
+            pointerEvents: "none",
+            transform: `scale(${r.$camera.value.z}) translate(${r.$camera.value.x}px, ${r.$camera.value.y}px)`,
+            transformOrigin: "0 0",
+            zIndex: "6",
+            "--board-zoom": String(r.$camera.value.z)
+          }
+        },
+        [
+          g("defs", [
+            g(
+              "marker",
+              {
+                id: N,
+                markerWidth: d,
+                markerHeight: d,
+                refX: 13.8,
+                refY: 9,
+                orient: "auto-start-reverse",
+                markerUnits: "userSpaceOnUse",
+                viewBox: `0 0 ${ve} ${ve}`
+              },
+              [
+                g("path", {
+                  d: "M1.8,1.8 L15.6,9 L1.8,16.2 L6.3,9 Z",
+                  fill: "currentColor"
+                })
+              ]
+            )
+          ]),
+          ...V.value.map((o) => Pe(o)),
+          ...Re().filter(Boolean),
+          ...ze().filter(Boolean)
+        ]
+      );
+    }
+    return () => {
+      const t = Te(), d = $e(), o = r.rootElement.value;
+      return o ? g(Oe, { to: o }, [t, ...d ? [d] : []]) : [t, ...d ? [d] : []];
+    };
+  }
+});
+export {
+  It as BoardConnectionLayer
+};