@lupinum/vue-board 0.1.0

package/dist/index.js

@@ -0,0 +1,1180 @@
+import { ref as W, onMounted as be, onBeforeUnmount as me, computed as I, shallowRef as G, defineComponent as q, unref as w, renderSlot as L, openBlock as x, createElementBlock as z, normalizeStyle as Z, normalizeClass as te, createCommentVNode as O, useSlots as Ee, watch as ve, nextTick as Se, withKeys as Ce, withModifiers as U, normalizeProps as ze, guardReactiveProps as Ie, Fragment as F, withDirectives as De, createElementVNode as K, vModelText as Te, createTextVNode as he, toDisplayString as xe, renderList as ge, createVNode as Be, useId as Ne, createStaticVNode as ye, toRef as we, provide as je, shallowReadonly as Y, markRaw as Me, createBlock as re, withCtx as ue, mergeProps as ce, resolveDynamicComponent as Oe } from "vue";
+import { CommandBlockedError as Ae, asNodeId as ee, colorForPreset as Ke, BOARD_COLOR_PRESETS as Le, createBoardEngine as Xe } from "@lupinum/board-core";
+import { BOARD_COLOR_PRESETS as Lt, colorForPreset as Xt } from "@lupinum/board-core";
+import { u as Ve, a as Ye, b as ie, c as Fe, d as Ge, e as He } from "./useBoardEngine-GWeHBmOy.js";
+import { f as Yt, g as Ft, h as Gt, i as Ht, j as Ut } from "./useBoardEngine-GWeHBmOy.js";
+import { getBoardInteractionAdapter as Pe } from "@lupinum/board-core/internal";
+function Ue(o) {
+  const e = W({ x: 0, y: 0 });
+  let n = null;
+  function l() {
+    const p = o.rootElement.value?.getBoundingClientRect();
+    e.value = {
+      x: p?.width ?? 0,
+      y: p?.height ?? 0
+    }, o.engine.setViewportSize(e.value);
+  }
+  return be(() => {
+    l(), o.rootElement.value && typeof ResizeObserver < "u" ? (n = new ResizeObserver(l), n.observe(o.rootElement.value)) : window.addEventListener("resize", l);
+  }), me(() => {
+    n ? (n.disconnect(), n = null) : window.removeEventListener("resize", l);
+  }), { viewportSize: e, updateViewportSize: l };
+}
+const ae = {
+  visible: !0,
+  minorOpacity: 0.14,
+  majorOpacity: 0.18,
+  fadeEdges: !0
+};
+function We(o, e) {
+  if (o === !1)
+    return {
+      ...ae,
+      visible: !1,
+      size: e.size,
+      majorEvery: e.majorEvery,
+      snap: e.snap,
+      edgeSnap: e.edgeSnap,
+      edgeSnapThreshold: e.edgeSnapThreshold,
+      pattern: e.pattern
+    };
+  const n = o === !0 ? {} : o;
+  return {
+    visible: n.visible ?? ae.visible,
+    size: e.size,
+    majorEvery: e.majorEvery,
+    snap: e.snap,
+    edgeSnap: e.edgeSnap,
+    edgeSnapThreshold: e.edgeSnapThreshold,
+    pattern: e.pattern,
+    minorOpacity: n.minorOpacity ?? ae.minorOpacity,
+    majorOpacity: n.majorOpacity ?? ae.majorOpacity,
+    fadeEdges: n.fadeEdges ?? ae.fadeEdges
+  };
+}
+function Ze(o) {
+  return I(
+    () => We(o.gridProp.value, o.grid.value)
+  );
+}
+const qe = 6, Je = 96;
+function Qe(o, e, n) {
+  if (n) return "full";
+  const l = Math.max(o.width, o.height) * e;
+  return l < qe ? "hidden" : l < Je ? "simple" : "full";
+}
+function et(o) {
+  return I(() => {
+    const n = o.viewportSize.value.x > 0 && o.viewportSize.value.y > 0 ? o.engine.getVisibleBounds(
+      o.viewportSize.value.x,
+      o.viewportSize.value.y
+    ) : null, l = o.camera.value.z, p = o.selectionSet.value, a = o.cullMargin.value, i = [];
+    for (const u of o.nodes.value.values()) {
+      if (!u.visible || n && (u.x + u.width <= n.minX - a || u.x >= n.maxX + a || u.y + u.height <= n.minY - a || u.y >= n.maxY + a))
+        continue;
+      const y = Qe(u, l, p.has(u.id));
+      y !== "hidden" && i.push({ ...u, lod: y });
+    }
+    return i;
+  });
+}
+function $(o) {
+  try {
+    return o();
+  } catch (e) {
+    if (e instanceof Ae) return;
+    throw e;
+  }
+}
+function pe(o) {
+  let e = !1;
+  const n = $(() => {
+    o(), e = !0;
+  });
+  return e || n !== void 0;
+}
+const tt = '[data-board-root="true"]', ot = [
+  '[data-board-interactive="true"]',
+  '[data-editor="true"]',
+  "input",
+  "textarea",
+  "select",
+  "button",
+  "a[href]",
+  '[contenteditable]:not([contenteditable="false"])'
+].join(",");
+function _e(o) {
+  return o instanceof Element ? o : null;
+}
+function H(o, e) {
+  const n = _e(o);
+  return !!(n && e && n.closest(tt) === e);
+}
+function fe(o) {
+  const e = _e(o);
+  return e?.closest("[data-resize]") ? !1 : !!e?.closest(ot);
+}
+function rt(o) {
+  const { engine: e, grid: n, rootElement: l, spacePressed: p } = o, a = Pe(e);
+  function i() {
+    p.value = !1;
+  }
+  be(() => {
+    window.addEventListener("blur", i), document.addEventListener("visibilitychange", i);
+  }), me(() => {
+    window.removeEventListener("blur", i), document.removeEventListener("visibilitychange", i);
+  });
+  function u(r) {
+    $(() => y(r));
+  }
+  function y(r) {
+    if (!H(r.target, l.value) || fe(r.target)) return;
+    r.code === "Space" && (r.preventDefault(), p.value = !0);
+    const b = r.metaKey || r.ctrlKey, h = e.getSelection(), C = e.plugins.history;
+    if (r.key === "Escape") {
+      e.clearSelection(), a.cancelInteraction();
+      return;
+    }
+    if (r.key === "Delete" || r.key === "Backspace") {
+      h.length > 0 && (r.preventDefault(), e.deleteSelected());
+      return;
+    }
+    if (r.key === "Enter" && h.length === 1) {
+      const P = e.getNode(h[0]);
+      P.type === "text" && e.beginTextEdit(P.id);
+      return;
+    }
+    if (b && r.key.toLowerCase() === "a") {
+      r.preventDefault(), e.selectAll();
+      return;
+    }
+    if (b && r.key.toLowerCase() === "d" && h.length > 0) {
+      r.preventDefault(), e.duplicateNodes(h);
+      return;
+    }
+    if (b && r.key.toLowerCase() === "c" && h.length > 0) {
+      r.preventDefault(), e.copySelected();
+      return;
+    }
+    if (b && r.key.toLowerCase() === "v") {
+      r.preventDefault(), e.pasteClipboard();
+      return;
+    }
+    if (b && r.key === "0") {
+      r.preventDefault(), e.zoomTo(1, !0);
+      return;
+    }
+    if (b && r.key === "1") {
+      r.preventDefault(), e.zoomToFit(40, !0);
+      return;
+    }
+    if (b && r.key.toLowerCase() === "z") {
+      r.preventDefault(), r.shiftKey ? C?.redo() : C?.undo();
+      return;
+    }
+    if (b && r.key.toLowerCase() === "y") {
+      r.preventDefault(), C?.redo();
+      return;
+    }
+    if (h.length > 0 && r.key.startsWith("Arrow")) {
+      r.preventDefault();
+      const P = r.shiftKey ? n.value.size * n.value.majorEvery : n.value.size, D = r.key === "ArrowLeft" ? { x: -P, y: 0 } : r.key === "ArrowRight" ? { x: P, y: 0 } : r.key === "ArrowUp" ? { x: 0, y: -P } : { x: 0, y: P };
+      e.translateSelectedNodes(D.x, D.y);
+    }
+  }
+  function k(r) {
+    H(r.target, l.value) && r.code === "Space" && i();
+  }
+  return { onKeyDown: u, onKeyUp: k };
+}
+const nt = 6;
+function $e(o) {
+  return o instanceof HTMLElement ? o.closest("[data-node-id]")?.dataset.nodeId : void 0;
+}
+function ke(o) {
+  return o instanceof HTMLElement ? o.closest("[data-resize]")?.dataset.resize : void 0;
+}
+function at(o) {
+  const { engine: e, rootElement: n, spacePressed: l, toLocalPoint: p } = o, a = Pe(e), i = G(null), u = /* @__PURE__ */ new Map();
+  let y = !1, k = 0, r = null, b = !1, h = null;
+  function C(t) {
+    const c = e.screenToWorld(t);
+    return e.getNodeAt(c)?.id;
+  }
+  function P() {
+    const t = M(), c = t[0], v = t[1];
+    return !c || !v ? 0 : Math.hypot(v.x - c.x, v.y - c.y);
+  }
+  function D() {
+    const t = M(), c = t[0], v = t[1];
+    return !c || !v ? { x: 0, y: 0 } : { x: (c.x + v.x) / 2, y: (c.y + v.y) / 2 };
+  }
+  function M() {
+    return [...u.values()].filter((t) => t.type === "touch").map((t) => t.point);
+  }
+  function A(t, c, v, E, R) {
+    const j = pe(() => {
+      v === "pan" ? a.beginPan(t, c) : v === "drag" && E ? a.beginNodeDrag(ee(E), t, c) : v === "resize" && E && R ? a.beginResize(ee(E), R, t, c) : a.beginBoxSelect(t, c);
+    });
+    return j && n.value?.focus(), j;
+  }
+  function T(t) {
+    i.value && (t !== void 0 && i.value.pointerId !== t || (i.value = null));
+  }
+  function X(t, c) {
+    return Math.hypot(c.x - t.x, c.y - t.y) >= nt;
+  }
+  function N(t, c, v) {
+    const E = p(t.clientX, t.clientY);
+    if (n.value?.setPointerCapture(t.pointerId), n.value?.focus(), v && c) {
+      if (!pe(() => e.select(ee(c)))) return;
+      i.value = {
+        kind: "resize",
+        pointerId: t.pointerId,
+        startPoint: E,
+        nodeId: c,
+        handle: v
+      };
+      return;
+    }
+    if (c) {
+      if (!e.getSelection().includes(ee(c)) && !pe(() => e.select(ee(c))))
+        return;
+      i.value = {
+        kind: "drag",
+        pointerId: t.pointerId,
+        startPoint: E,
+        nodeId: c
+      };
+      return;
+    }
+    pe(() => e.clearSelection()) && (i.value = {
+      kind: "box-select",
+      pointerId: t.pointerId,
+      startPoint: E
+    });
+  }
+  function m(t, c) {
+    const v = i.value;
+    if (!v || v.pointerId !== t.pointerId || !X(v.startPoint, c))
+      return !1;
+    let E = !1;
+    if (v.kind === "drag")
+      if (t.altKey) {
+        const R = e.findNode(ee(v.nodeId)), j = $(
+          () => e.duplicateNodes(e.getSelection(), { x: 0, y: 0 })
+        ), Q = j?.nodes ?? [], oe = R ? j?.idMap.get(R.id) : void 0, de = (oe ? Q.find((g) => g.id === oe) : void 0) ?? Q[0];
+        de && (E = A(
+          t.pointerId,
+          v.startPoint,
+          "drag",
+          String(de.id)
+        ));
+      } else
+        E = A(
+          t.pointerId,
+          v.startPoint,
+          "drag",
+          v.nodeId
+        );
+    else v.kind === "resize" ? E = A(
+      t.pointerId,
+      v.startPoint,
+      "resize",
+      v.nodeId,
+      v.handle
+    ) : E = A(
+      t.pointerId,
+      v.startPoint,
+      "box-select"
+    );
+    return i.value = null, E;
+  }
+  function _() {
+    h !== null && (cancelAnimationFrame(h), h = null), r && ($(
+      () => a.updatePointer(r.id, r.point, {
+        shift: r.shift,
+        space: r.space
+      })
+    ), r = null, b = !1);
+  }
+  function s(t) {
+    if (!H(t.target, n.value) || fe(t.target)) return;
+    const c = p(t.clientX, t.clientY);
+    if (u.set(t.pointerId, {
+      point: c,
+      type: t.pointerType
+    }), M().length === 2 && t.pointerType === "touch") {
+      $(() => a.endInteraction()), n.value?.setPointerCapture(t.pointerId), T(), r = null, y = !0, k = P();
+      return;
+    }
+    if (t.button === 1 || l.value) {
+      t.preventDefault(), n.value?.setPointerCapture(t.pointerId), A(t.pointerId, c, "pan");
+      return;
+    }
+    if (t.button !== 0) return;
+    const v = $e(t.target), E = ke(t.target);
+    N(t, v, E);
+  }
+  function f(t) {
+    if (!H(t.target, n.value)) return;
+    const c = p(t.clientX, t.clientY), v = u.get(t.pointerId);
+    if (!v)
+      return;
+    if (u.set(t.pointerId, {
+      point: c,
+      type: v.type
+    }), y) {
+      const R = P();
+      if (k > 0 && R > 0) {
+        const j = R / k, Q = -100 * Math.log2(j);
+        $(() => e.zoomAt(D(), Q));
+      }
+      k = R;
+      return;
+    }
+    !m(t, c) && i.value?.pointerId === t.pointerId || (r = {
+      id: t.pointerId,
+      point: c,
+      shift: t.shiftKey,
+      space: l.value
+    }, b || (b = !0, h = requestAnimationFrame(() => {
+      r && $(
+        () => a.updatePointer(
+          r.id,
+          r.point,
+          {
+            shift: r.shift,
+            space: r.space
+          }
+        )
+      ), b = !1, h = null, r = null;
+    })));
+  }
+  function B(t) {
+    if (H(t.target, n.value)) {
+      if (u.delete(t.pointerId), n.value?.hasPointerCapture(t.pointerId) && n.value.releasePointerCapture(t.pointerId), y) {
+        M().length < 2 && (y = !1, k = 0, T(), $(() => a.endInteraction()));
+        return;
+      }
+      if (i.value?.pointerId === t.pointerId) {
+        T(t.pointerId);
+        return;
+      }
+      _(), $(() => a.endInteraction(t.pointerId));
+    }
+  }
+  function V(t) {
+    H(t.target, n.value) && (u.delete(t.pointerId), T(t.pointerId), r = null, h !== null && (cancelAnimationFrame(h), h = null), b = !1, $(() => a.cancelInteraction(t.pointerId)));
+  }
+  function le(t) {
+    if (!H(t.target, n.value) || fe(t.target)) return;
+    t.preventDefault();
+    const c = p(t.clientX, t.clientY);
+    t.ctrlKey || t.metaKey || l.value ? $(
+      () => e.zoomAt(c, Math.max(-10, Math.min(10, t.deltaY)))
+    ) : t.shiftKey ? $(() => e.panBy(t.deltaX || t.deltaY, 0)) : $(() => e.panBy(t.deltaX, t.deltaY));
+  }
+  function se(t) {
+    if (!H(t.target, n.value) || fe(t.target) || ke(t.target))
+      return;
+    const c = p(t.clientX, t.clientY), v = $e(t.target) ?? C(c);
+    if (v) {
+      const j = ee(v);
+      e.getNode(j).type === "text" && $(() => e.beginTextEdit(j));
+      return;
+    }
+    const E = e.screenToWorld(c), R = $(
+      () => e.createNode({
+        type: "text",
+        x: E.x,
+        y: E.y,
+        text: "New node"
+      })
+    );
+    R && $(() => e.beginTextEdit(R.id));
+  }
+  return me(() => {
+    h !== null && cancelAnimationFrame(h), h = null, b = !1, r = null, u.clear(), T(), $(() => a.cancelInteraction());
+  }), {
+    onPointerDown: s,
+    onPointerMove: f,
+    onPointerUp: B,
+    onPointerCancel: V,
+    onWheel: le,
+    onDoubleClick: se
+  };
+}
+const it = ["data-mode"], lt = /* @__PURE__ */ q({
+  __name: "BoardBoxSelect",
+  setup(o) {
+    const e = Ve(), n = Ye(), l = I(() => n.value.mode !== "box-select" ? "window" : n.value.selectionMode), p = I(() => e.value ? {
+      left: `${e.value.minX}px`,
+      top: `${e.value.minY}px`,
+      width: `${e.value.maxX - e.value.minX}px`,
+      height: `${e.value.maxY - e.value.minY}px`
+    } : {});
+    return (a, i) => w(e) ? L(a.$slots, "default", {
+      bounds: w(e),
+      mode: l.value
+    }, () => [
+      w(e) ? (x(), z("div", {
+        key: 0,
+        class: te(["board-box-select", `board-box-select--${l.value}`]),
+        "data-mode": l.value,
+        style: Z(p.value)
+      }, null, 14, it)) : O("", !0)
+    ], !0, 0) : O("", !0);
+  }
+}), J = (o, e) => {
+  const n = o.__vccOpts || o;
+  for (const [l, p] of e)
+    n[l] = p;
+  return n;
+}, st = /* @__PURE__ */ J(lt, [["__scopeId", "data-v-fb31d12b"]]), dt = /* @__PURE__ */ q({
+  __name: "BoardGrid",
+  setup(o) {
+    const { resolvedGrid: e } = ie(), n = Fe(), l = I(() => {
+      switch (e.value.pattern) {
+        case "dot":
+          return [
+            "radial-gradient(circle, var(--grid-major-color) 1px, transparent 1px)",
+            "radial-gradient(circle, var(--grid-minor-color) 1px, transparent 1px)"
+          ].join(", ");
+        case "cross":
+          return [
+            "linear-gradient(to right, var(--grid-major-color) 1px, transparent 1px)",
+            "linear-gradient(to bottom, var(--grid-major-color) 1px, transparent 1px)",
+            "linear-gradient(to right, var(--grid-minor-color) 1px, transparent 1px)",
+            "linear-gradient(to bottom, var(--grid-minor-color) 1px, transparent 1px)"
+          ].join(", ");
+        case "none":
+          return "none";
+        default:
+          return [
+            "linear-gradient(to right, var(--grid-minor-color) 1px, transparent 1px)",
+            "linear-gradient(to bottom, var(--grid-minor-color) 1px, transparent 1px)",
+            "linear-gradient(to right, var(--grid-major-color) 1px, transparent 1px)",
+            "linear-gradient(to bottom, var(--grid-major-color) 1px, transparent 1px)"
+          ].join(", ");
+      }
+    }), p = I(() => e.value.pattern === "dot" ? [
+      "var(--grid-major-size) var(--grid-major-size)",
+      "var(--grid-minor-size) var(--grid-minor-size)"
+    ].join(", ") : [
+      "var(--grid-minor-size) var(--grid-minor-size)",
+      "var(--grid-minor-size) var(--grid-minor-size)",
+      "var(--grid-major-size) var(--grid-major-size)",
+      "var(--grid-major-size) var(--grid-major-size)"
+    ].join(", ")), a = I(() => e.value.pattern === "dot" ? [
+      "var(--grid-major-x) var(--grid-major-y)",
+      "var(--grid-minor-x) var(--grid-minor-y)"
+    ].join(", ") : [
+      "var(--grid-minor-x) var(--grid-minor-y)",
+      "var(--grid-minor-x) var(--grid-minor-y)",
+      "var(--grid-major-x) var(--grid-major-y)",
+      "var(--grid-major-x) var(--grid-major-y)"
+    ].join(", "));
+    return (i, u) => w(e).visible && w(e).pattern !== "none" ? (x(), z("div", {
+      key: 0,
+      class: "board-grid",
+      style: Z({
+        ...w(n),
+        backgroundImage: l.value,
+        backgroundSize: p.value,
+        backgroundPosition: a.value
+      })
+    }, null, 4)) : O("", !0);
+  }
+}), ut = /* @__PURE__ */ J(dt, [["__scopeId", "data-v-f3663c53"]]);
+function Re(o) {
+  if (!o)
+    return {};
+  const e = o.startsWith("#") ? o : Ke(o);
+  if (!e) return {};
+  const n = `var(--board-preset-${o}, ${e})`;
+  return {
+    "--board-node-color": n,
+    "--board-node-tint": `color-mix(in srgb, ${n} 7%, var(--board-node-bg, #fff))`,
+    "--board-node-tint-strong": `color-mix(in srgb, ${n} 13%, var(--board-node-bg, #fff))`,
+    "--board-node-color-soft": `color-mix(in srgb, ${n} 24%, transparent)`,
+    "--board-node-color-ring": `color-mix(in srgb, ${n} 70%, transparent)`
+  };
+}
+const ct = ["data-resize", "aria-label"], pt = /* @__PURE__ */ q({
+  __name: "BoardNodeHandle",
+  props: {
+    handle: {},
+    nodeId: {}
+  },
+  setup(o) {
+    const e = o, { engine: n, $grid: l } = ie(), p = {
+      n: "Resize from top",
+      ne: "Resize from top right",
+      e: "Resize from right",
+      se: "Resize from bottom right",
+      s: "Resize from bottom",
+      sw: "Resize from bottom left",
+      w: "Resize from left",
+      nw: "Resize from top left"
+    };
+    function a(i) {
+      if (!e.nodeId || !i.key.startsWith("Arrow")) return;
+      const u = e.handle.includes("e") || e.handle.includes("w"), y = e.handle.includes("n") || e.handle.includes("s"), k = i.shiftKey ? l.value.size * l.value.majorEvery : l.value.size, r = u ? i.key === "ArrowLeft" ? -k : i.key === "ArrowRight" ? k : 0 : 0, b = y ? i.key === "ArrowUp" ? -k : i.key === "ArrowDown" ? k : 0 : 0;
+      r === 0 && b === 0 || (i.preventDefault(), i.stopPropagation(), $(() => n.resizeNode(e.nodeId, e.handle, r, b)));
+    }
+    return (i, u) => (x(), z("button", {
+      type: "button",
+      class: te(["board-node-handle", `is-${o.handle}`]),
+      "data-resize": o.handle,
+      "aria-label": p[o.handle],
+      onKeydown: a
+    }, null, 42, ct));
+  }
+}), ft = /* @__PURE__ */ J(pt, [["__scopeId", "data-v-004da51c"]]), vt = ["data-node-id", "aria-label", "onKeydown"], mt = ["aria-describedby"], gt = ["id"], yt = {
+  key: 1,
+  class: "board-node__content"
+}, bt = /* @__PURE__ */ q({
+  __name: "BoardNode",
+  props: {
+    node: {},
+    selected: { type: Boolean },
+    editing: { type: Boolean },
+    customRenderer: { type: Boolean }
+  },
+  setup(o) {
+    const e = o, n = Ee(), { engine: l } = ie(), p = ["n", "ne", "e", "se", "s", "sw", "w", "nw"], a = W(N(e.node)), i = W(null), u = I(() => ({
+      left: `${e.node.x}px`,
+      top: `${e.node.y}px`,
+      width: `${e.node.width}px`,
+      height: `${e.node.height}px`,
+      zIndex: String(e.node.zIndex),
+      ...Re(e.node.color)
+    }));
+    function y() {
+      e.node.type === "text" && $(() => l.beginTextEdit(e.node.id));
+    }
+    function k(m) {
+      e.node.type === "text" && $(() => l.commitTextEdit(e.node.id, m));
+    }
+    const r = I(() => ({
+      node: e.node,
+      selected: e.selected,
+      editing: e.editing,
+      beginEdit: y,
+      commitText: k
+    }));
+    function b() {
+      return e.customRenderer !== void 0 ? e.customRenderer : !!n.default;
+    }
+    const h = I(() => {
+      let m;
+      return e.node.type === "text" ? m = N(e.node) || "Empty text node" : m = `${e.node.type} node`, e.selected ? `${m}, selected` : m;
+    }), C = I(
+      () => `${e.node.id}-editor-help`.replace(/[^A-Za-z0-9_-]/g, "-").replace(/-+/g, "-")
+    );
+    ve(
+      () => e.node,
+      (m) => {
+        a.value = N(m);
+      },
+      { deep: !0 }
+    ), ve(
+      () => e.editing,
+      (m) => {
+        m ? Se(() => {
+          i.value?.focus(), i.value?.select();
+        }) : a.value = N(e.node);
+      }
+    );
+    function P() {
+      $(() => l.commitTextEdit(e.node.id, a.value));
+    }
+    function D() {
+      a.value = N(e.node), $(() => l.cancelTextEdit());
+    }
+    function M(m) {
+      if (m.stopPropagation(), m.key === "Escape") {
+        m.preventDefault(), D();
+        return;
+      }
+      m.key === "Enter" && (m.metaKey || m.ctrlKey) && (m.preventDefault(), P());
+    }
+    function A(m) {
+      X(m.target) || e.node.type === "text" && (m.preventDefault(), y());
+    }
+    function T() {
+      e.selected || $(() => l.select(e.node.id));
+    }
+    function X(m) {
+      return m instanceof HTMLElement && !!m.closest("[data-editor]");
+    }
+    function N(m) {
+      return m.type !== "text" ? "" : typeof m.text == "string" ? m.text : "";
+    }
+    return (m, _) => (x(), z("article", {
+      class: te(["board-node", {
+        "is-selected": o.selected,
+        "is-editing": o.editing,
+        "is-locked": o.node.locked,
+        "is-group": o.node.type === "group",
+        "is-colored": !!o.node.color
+      }]),
+      style: Z(u.value),
+      "data-node-id": o.node.id,
+      tabindex: "0",
+      role: "group",
+      "aria-roledescription": "board node",
+      "aria-label": h.value,
+      onFocus: T,
+      onKeydown: Ce(U(A, ["stop"]), ["enter"])
+    }, [
+      b() ? L(m.$slots, "default", ze(Ie(r.value)), void 0, !0, 0) : (x(), z(F, { key: 1 }, [
+        o.editing && o.node.type === "text" ? (x(), z(F, { key: 0 }, [
+          De(K("textarea", {
+            ref_key: "textareaRef",
+            ref: i,
+            "onUpdate:modelValue": _[0] || (_[0] = (s) => a.value = s),
+            class: "board-node__editor",
+            "data-editor": "true",
+            "aria-describedby": C.value,
+            spellcheck: "true",
+            onBlur: P,
+            onKeydown: M,
+            onPointerdown: _[1] || (_[1] = U(() => {
+            }, ["stop"])),
+            onDblclick: _[2] || (_[2] = U(() => {
+            }, ["stop"]))
+          }, null, 40, mt), [
+            [Te, a.value]
+          ]),
+          K("span", {
+            id: C.value,
+            class: "board-node__editor-help"
+          }, " Enter inserts a new line. Control Enter or Command Enter saves. ", 8, gt)
+        ], 64)) : (x(), z("div", yt, [
+          o.node.type === "text" ? (x(), z(F, { key: 0 }, [
+            he(xe(N(o.node) || "Double-click to edit"), 1)
+          ], 64)) : (x(), z(F, { key: 1 }, [
+            he(xe(o.node.type), 1)
+          ], 64))
+        ]))
+      ], 64)),
+      o.selected && !o.editing && !o.node.locked ? (x(), z(F, { key: 2 }, ge(p, (s) => L(m.$slots, "handle", {
+        key: s,
+        node: o.node,
+        handle: s
+      }, () => [
+        Be(ft, {
+          handle: s,
+          "node-id": o.node.id
+        }, null, 8, ["handle", "node-id"])
+      ], !0)), 64)) : O("", !0)
+    ], 46, vt));
+  }
+}), ht = /* @__PURE__ */ J(bt, [["__scopeId", "data-v-9aa9b6cd"]]), xt = {
+  key: 0,
+  class: "board-snap-guides"
+}, wt = /* @__PURE__ */ q({
+  __name: "BoardSnapGuides",
+  setup(o) {
+    const { $camera: e, $snapGuides: n } = ie(), l = I(() => {
+      const p = n.value;
+      if (!p || p.length === 0) return [];
+      const { x: a, y: i, z: u } = e.value;
+      return p.map((y) => y.axis === "x" ? {
+        axis: "x",
+        pos: (y.position + a) * u,
+        from: (y.from + i) * u,
+        to: (y.to + i) * u
+      } : {
+        axis: "y",
+        pos: (y.position + i) * u,
+        from: (y.from + a) * u,
+        to: (y.to + a) * u
+      });
+    });
+    return (p, a) => l.value.length > 0 ? (x(), z("div", xt, [
+      (x(!0), z(F, null, ge(l.value, (i, u) => (x(), z("div", {
+        key: u,
+        class: te([
+          "board-snap-guide",
+          i.axis === "x" ? "board-snap-guide--vertical" : "board-snap-guide--horizontal"
+        ]),
+        style: Z(
+          i.axis === "x" ? {
+            left: i.pos + "px",
+            top: i.from + "px",
+            height: i.to - i.from + "px"
+          } : {
+            top: i.pos + "px",
+            left: i.from + "px",
+            width: i.to - i.from + "px"
+          }
+        )
+      }, null, 6))), 128))
+    ])) : O("", !0);
+  }
+}), $t = /* @__PURE__ */ J(wt, [["__scopeId", "data-v-2c604885"]]), kt = /* @__PURE__ */ q({
+  __name: "BoardViewport",
+  setup(o) {
+    const e = Ge(), n = I(() => ({
+      transform: `scale(${e.value.z}) translate(${e.value.x}px, ${e.value.y}px)`,
+      "--board-zoom": e.value.z
+    }));
+    return (l, p) => (x(), z("div", {
+      class: "board-viewport",
+      style: Z(n.value)
+    }, [
+      L(l.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+}), Et = /* @__PURE__ */ J(kt, [["__scopeId", "data-v-9eeb9aab"]]), St = { class: "board-selection-toolbar__popover-anchor" }, zt = ["aria-expanded"], It = ["aria-checked"], Bt = ["aria-label", "title", "data-node-color-option", "aria-checked", "onClick"], Pt = ["disabled"], _t = /* @__PURE__ */ q({
+  __name: "BoardSelectionToolbar",
+  setup(o) {
+    const { engine: e, $camera: n, $nodes: l, $selection: p, $interaction: a } = ie(), i = W(!1), u = W(null), y = W(null), k = `board-colour-menu-${Ne()}`, r = I(
+      () => Array.from(p.value).map((s) => l.value.get(s)).filter((s) => !!s)
+    ), b = I(() => {
+      if (r.value.length === 0)
+        return null;
+      let s = 1 / 0, f = 1 / 0, B = -1 / 0;
+      for (const V of r.value)
+        s = Math.min(s, V.x), f = Math.min(f, V.y), B = Math.max(B, V.x + V.width);
+      return { minX: s, minY: f, maxX: B };
+    }), h = I(() => {
+      if (!b.value)
+        return null;
+      const s = n.value;
+      return {
+        left: `${((b.value.minX + b.value.maxX) / 2 + s.x) * s.z}px`,
+        top: `${(b.value.minY + s.y) * s.z}px`
+      };
+    }), C = I(
+      () => r.value.length > 0 && a.value.mode !== "dragging-nodes" && a.value.mode !== "resizing-node" && a.value.mode !== "editing-text"
+    ), P = I(
+      () => r.value.length === 1 && r.value[0]?.type === "text"
+    );
+    ve(
+      () => Array.from(p.value).join("\0"),
+      () => {
+        i.value = !1;
+      }
+    );
+    function D(s) {
+      s.preventDefault(), s.stopPropagation();
+    }
+    function M(s) {
+      e.batch(() => {
+        for (const f of r.value)
+          f.locked || $(() => e.updateNode(f.id, { color: s }));
+      }), i.value = !1;
+    }
+    function A(s) {
+      D(s), $(() => e.deleteSelected());
+    }
+    function T(s) {
+      D(s), i.value = !i.value, i.value && Se(() => {
+        const f = y.value?.querySelector(
+          '[aria-checked="true"]'
+        ), B = y.value?.querySelector(
+          '[role="menuitemradio"]'
+        );
+        (f ?? B)?.focus();
+      });
+    }
+    function X(s) {
+      s.key === "Escape" && (s.preventDefault(), s.stopPropagation(), i.value = !1, u.value?.focus());
+    }
+    function N(s) {
+      D(s), e.zoomToNodes(
+        r.value.map((f) => f.id),
+        80,
+        !0
+      );
+    }
+    function m(s) {
+      D(s);
+      const f = r.value[0];
+      f?.type === "text" && $(() => e.beginTextEdit(f.id));
+    }
+    const _ = I(() => {
+      const s = r.value.map((f) => f.color ?? null);
+      return s.every((f) => f === s[0]) ? s[0] : "mixed";
+    });
+    return (s, f) => C.value && h.value ? (x(), z("div", {
+      key: 0,
+      class: "board-selection-toolbar",
+      "data-board-interactive": "true",
+      "data-node-selection-toolbar": "true",
+      style: Z(h.value),
+      onPointerdown: f[1] || (f[1] = U(() => {
+      }, ["stop"])),
+      onMousedown: f[2] || (f[2] = U(() => {
+      }, ["stop"])),
+      onDblclick: f[3] || (f[3] = U(() => {
+      }, ["stop"]))
+    }, [
+      K("button", {
+        type: "button",
+        class: "board-selection-toolbar__button is-danger",
+        "aria-label": "Remove",
+        title: "Remove",
+        onClick: A
+      }, [...f[4] || (f[4] = [
+        ye('<svg viewBox="0 0 24 24" aria-hidden="true" data-v-c1436955><path d="M4 7h16" data-v-c1436955></path><path d="M10 11v6" data-v-c1436955></path><path d="M14 11v6" data-v-c1436955></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" data-v-c1436955></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" data-v-c1436955></path></svg>', 1)
+      ])]),
+      K("div", St, [
+        K("button", {
+          ref_key: "paletteButton",
+          ref: u,
+          type: "button",
+          class: "board-selection-toolbar__button",
+          "aria-label": "Set colour",
+          title: "Set colour",
+          "data-node-color-menu-button": "true",
+          "aria-haspopup": "menu",
+          "aria-expanded": i.value,
+          "aria-controls": k,
+          onClick: T
+        }, [...f[5] || (f[5] = [
+          ye('<svg viewBox="0 0 24 24" aria-hidden="true" data-v-c1436955><path d="M19 3h-4a2 2 0 0 0 -2 2v12a4 4 0 0 0 8 0v-12a2 2 0 0 0 -2 -2" data-v-c1436955></path><path d="M13 7.35l-2 -2a2 2 0 0 0 -2.828 0l-2.828 2.828a2 2 0 0 0 0 2.828l9 9" data-v-c1436955></path><path d="M7.3 13h-2.3a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h12" data-v-c1436955></path><path d="M17 17l0 .01" data-v-c1436955></path></svg>', 1)
+        ])], 8, zt),
+        i.value ? (x(), z("div", {
+          key: 0,
+          id: k,
+          ref_key: "palette",
+          ref: y,
+          class: "board-selection-toolbar__palette",
+          "data-node-color-menu": "true",
+          role: "menu",
+          "aria-label": "Node colour",
+          onKeydown: X
+        }, [
+          K("button", {
+            type: "button",
+            class: te(["board-selection-toolbar__swatch is-default", { "is-active": _.value === null }]),
+            "aria-label": "Default colour",
+            title: "Default colour",
+            "data-node-color-option": "default",
+            role: "menuitemradio",
+            "aria-checked": _.value === null,
+            onClick: f[0] || (f[0] = U((B) => M(void 0), ["stop", "prevent"]))
+          }, null, 10, It),
+          (x(!0), z(F, null, ge(w(Le), (B) => (x(), z("button", {
+            key: B.preset,
+            type: "button",
+            class: te(["board-selection-toolbar__swatch", { "is-active": _.value === B.preset }]),
+            style: Z({
+              "--swatch-color": `var(--board-preset-${B.preset}, ${B.hex})`
+            }),
+            "aria-label": B.label,
+            title: B.label,
+            "data-node-color-option": B.preset,
+            role: "menuitemradio",
+            "aria-checked": _.value === B.preset,
+            onClick: U((V) => M(B.preset), ["stop", "prevent"])
+          }, null, 14, Bt))), 128))
+        ], 544)) : O("", !0)
+      ]),
+      K("button", {
+        type: "button",
+        class: "board-selection-toolbar__button",
+        "aria-label": "Zoom to selection",
+        title: "Zoom to selection",
+        onClick: N
+      }, [...f[6] || (f[6] = [
+        ye('<svg viewBox="0 0 24 24" aria-hidden="true" data-v-c1436955><circle cx="12" cy="12" r="1" data-v-c1436955></circle><circle cx="12" cy="12" r="5" data-v-c1436955></circle><path d="M12 3v2" data-v-c1436955></path><path d="M3 12h2" data-v-c1436955></path><path d="M12 19v2" data-v-c1436955></path><path d="M19 12h2" data-v-c1436955></path></svg>', 1)
+      ])]),
+      K("button", {
+        type: "button",
+        class: "board-selection-toolbar__button",
+        disabled: !P.value,
+        "aria-label": "Edit",
+        title: "Edit",
+        onClick: m
+      }, [...f[7] || (f[7] = [
+        K("svg", {
+          viewBox: "0 0 24 24",
+          "aria-hidden": "true"
+        }, [
+          K("path", { d: "M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" }),
+          K("path", { d: "M13.5 6.5l4 4" })
+        ], -1)
+      ])], 8, Pt)
+    ], 36)) : O("", !0);
+  }
+}), Rt = /* @__PURE__ */ J(_t, [["__scopeId", "data-v-c1436955"]]), Ct = ["data-node-id"], Dt = /* @__PURE__ */ q({
+  __name: "BoardRoot",
+  props: {
+    engine: {
+      type: Object,
+      default: void 0
+    },
+    cullMargin: {
+      type: Number,
+      default: 200
+    },
+    grid: {
+      type: [Boolean, Object],
+      default: !0
+    },
+    selectionToolbar: {
+      type: Boolean,
+      default: !0
+    },
+    snapGuides: {
+      type: Boolean,
+      default: !0
+    },
+    boxSelect: {
+      type: Boolean,
+      default: !0
+    },
+    renderers: {
+      type: Object,
+      default: () => ({})
+    },
+    fallbackRenderer: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["ready"],
+  setup(o, { emit: e }) {
+    const n = o, l = e, p = W(null), a = n.engine ?? Xe(), i = n.engine === void 0, u = G({}), y = G(a.$camera.get()), k = G(a.$grid.get()), r = G(
+      a.$nodes.get()
+    ), b = G(a.$selection.get()), h = G(a.$interaction.get()), C = G(a.$snapGuides.get()), P = Ee(), D = W(!1), { viewportSize: M } = Ue({ rootElement: p, engine: a }), A = Ze({
+      grid: k,
+      gridProp: we(n, "grid")
+    });
+    je(He, {
+      engine: a,
+      rootElement: Y(p),
+      viewportSize: Y(M),
+      renderers: Y(u),
+      resolvedGrid: A,
+      toLocalPoint: le,
+      $camera: Y(y),
+      $grid: Y(k),
+      $nodes: Y(r),
+      $selection: Y(b),
+      $interaction: Y(h),
+      $snapGuides: Y(C)
+    });
+    let T = [], X = /* @__PURE__ */ new Set();
+    const N = I(() => {
+      const g = Array.from(b.value);
+      return g.length === T.length && g.every((S, d) => S === T[d]) || (T = g, X = new Set(g)), X;
+    }), m = et({
+      engine: a,
+      nodes: r,
+      camera: y,
+      selectionSet: N,
+      viewportSize: M,
+      cullMargin: we(n, "cullMargin")
+    }), _ = I(() => ({
+      camera: y.value,
+      grid: k.value,
+      nodes: r.value,
+      selection: b.value,
+      interaction: h.value,
+      snapGuides: C.value
+    })), s = I(() => ({
+      state: _.value,
+      camera: y.value,
+      grid: k.value,
+      selection: Array.from(b.value),
+      interaction: h.value,
+      visibleNodeCount: m.value.length,
+      trace: a.exportTrace().slice(-20)
+    }));
+    let f = [];
+    function B() {
+      y.value = a.$camera.get(), k.value = a.$grid.get(), r.value = a.$nodes.get(), b.value = a.$selection.get(), h.value = a.$interaction.get(), C.value = a.$snapGuides.get();
+    }
+    function V() {
+      f = [
+        a.$camera.subscribe((g) => {
+          y.value = g;
+        }),
+        a.$grid.subscribe((g) => {
+          k.value = g;
+        }),
+        a.$nodes.subscribe((g) => {
+          r.value = g;
+        }),
+        a.$selection.subscribe((g) => {
+          b.value = g;
+        }),
+        a.$interaction.subscribe((g) => {
+          h.value = g;
+        }),
+        a.$snapGuides.subscribe((g) => {
+          C.value = g;
+        })
+      ], B();
+    }
+    ve(
+      () => n.renderers,
+      (g) => {
+        u.value = Object.fromEntries(
+          Object.entries(g).map(([S, d]) => [
+            S,
+            Me(d)
+          ])
+        );
+      },
+      { immediate: !0 }
+    );
+    function le(g, S) {
+      const d = p.value?.getBoundingClientRect();
+      return {
+        x: g - (d?.left ?? 0),
+        y: S - (d?.top ?? 0)
+      };
+    }
+    const {
+      onPointerDown: se,
+      onPointerMove: t,
+      onPointerUp: c,
+      onPointerCancel: v,
+      onWheel: E,
+      onDoubleClick: R
+    } = at({
+      engine: a,
+      rootElement: p,
+      spacePressed: D,
+      toLocalPoint: le
+    }), { onKeyDown: j, onKeyUp: Q } = rt({
+      engine: a,
+      grid: k,
+      rootElement: p,
+      spacePressed: D
+    });
+    function oe(g) {
+      return u.value[g.type] ?? n.fallbackRenderer;
+    }
+    function de(g) {
+      return !!oe(g) || !!P[`node:${g.type}`] || !!P.node;
+    }
+    return be(() => {
+      V(), l("ready", a);
+    }), me(() => {
+      for (const g of f)
+        g();
+      i && a.destroy();
+    }), (g, S) => (x(), z("div", {
+      ref_key: "rootElement",
+      ref: p,
+      class: "board-root",
+      "data-board-root": "true",
+      tabindex: "0",
+      role: "application",
+      "aria-label": "Board canvas",
+      onPointerdown: S[0] || (S[0] = //@ts-ignore
+      (...d) => w(se) && w(se)(...d)),
+      onPointermove: S[1] || (S[1] = //@ts-ignore
+      (...d) => w(t) && w(t)(...d)),
+      onPointerup: S[2] || (S[2] = //@ts-ignore
+      (...d) => w(c) && w(c)(...d)),
+      onPointercancel: S[3] || (S[3] = //@ts-ignore
+      (...d) => w(v) && w(v)(...d)),
+      onWheel: S[4] || (S[4] = //@ts-ignore
+      (...d) => w(E) && w(E)(...d)),
+      onDblclick: S[5] || (S[5] = //@ts-ignore
+      (...d) => w(R) && w(R)(...d)),
+      onKeydown: S[6] || (S[6] = //@ts-ignore
+      (...d) => w(j) && w(j)(...d)),
+      onKeyup: S[7] || (S[7] = //@ts-ignore
+      (...d) => w(Q) && w(Q)(...d))
+    }, [
+      o.grid !== !1 ? (x(), re(ut, { key: 0 })) : O("", !0),
+      Be(Et, null, {
+        default: ue(() => [
+          L(g.$slots, "viewport", {
+            engine: w(a),
+            state: _.value
+          }, void 0, !0),
+          (x(!0), z(F, null, ge(w(m), (d) => (x(), z(F, {
+            key: d.id
+          }, [
+            d.lod === "full" ? (x(), re(ht, {
+              key: 0,
+              node: d,
+              selected: N.value.has(d.id),
+              editing: h.value.mode === "editing-text" && h.value.nodeId === d.id,
+              "custom-renderer": de(d)
+            }, {
+              default: ue((ne) => [
+                L(g.$slots, `node:${d.type}`, ce({ ref_for: !0 }, ne), () => [
+                  L(g.$slots, "node", ce({ ref_for: !0 }, ne), () => [
+                    oe(d) ? (x(), re(Oe(oe(d)), ce({
+                      key: 0,
+                      ref_for: !0
+                    }, ne), null, 16)) : O("", !0)
+                  ], !0)
+                ], !0)
+              ]),
+              handle: ue((ne) => [
+                L(g.$slots, "handle", ce({ ref_for: !0 }, ne), void 0, !0)
+              ]),
+              _: 2
+            }, 1032, ["node", "selected", "editing", "custom-renderer"])) : (x(), z("div", {
+              key: 1,
+              class: te(["board-node-simple", {
+                "is-colored": !!d.color,
+                "is-group": d.type === "group"
+              }]),
+              "data-node-id": d.id,
+              style: Z({
+                left: d.x + "px",
+                top: d.y + "px",
+                width: d.width + "px",
+                height: d.height + "px",
+                zIndex: d.zIndex,
+                ...w(Re)(d.color)
+              })
+            }, null, 14, Ct))
+          ], 64))), 128))
+        ]),
+        _: 3
+      }),
+      o.selectionToolbar ? (x(), re(Rt, { key: 1 })) : O("", !0),
+      o.snapGuides ? (x(), re($t, { key: 2 })) : O("", !0),
+      o.boxSelect ? (x(), re(st, { key: 3 }, {
+        default: ue((d) => [
+          L(g.$slots, "box-select", ze(Ie(d)), void 0, !0)
+        ]),
+        _: 3
+      })) : O("", !0),
+      L(g.$slots, "default", {
+        engine: w(a),
+        state: _.value,
+        debugState: s.value
+      }, void 0, !0)
+    ], 544));
+  }
+}), Ot = /* @__PURE__ */ J(Dt, [["__scopeId", "data-v-931e1ec3"]]);
+export {
+  Lt as BOARD_COLOR_PRESETS,
+  st as BoardBoxSelect,
+  ut as BoardGrid,
+  ht as BoardNode,
+  ft as BoardNodeHandle,
+  Ot as BoardRoot,
+  Rt as BoardSelectionToolbar,
+  $t as BoardSnapGuides,
+  Et as BoardViewport,
+  Xt as colorForPreset,
+  Re as resolveNodeColorStyle,
+  Ve as useBoardBoxSelectBounds,
+  Ge as useBoardCamera,
+  ie as useBoardEngine,
+  Fe as useBoardGridStyle,
+  Ye as useBoardInteraction,
+  Yt as useBoardNode,
+  Ft as useBoardNodes,
+  Gt as useBoardSelection,
+  Ht as useBoardVisibleBounds,
+  Ut as useBoardVisibleNodes
+};