@objectifthunes/whiteboard 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { jsx as r, jsxs as d, Fragment as te } from "react/jsx-runtime";
-import { useEffect as Y, useRef as M, useCallback as $, memo as ze, useId as Te, useState as ye, useLayoutEffect as Re, Component as We, useMemo as be, forwardRef as de, createElement as T } from "react";
-import { create as Xe } from "zustand";
-import { createPortal as Ye } from "react-dom";
-const D = (e = 14) => ({
+import { jsx as r, jsxs as d, Fragment as ne } from "react/jsx-runtime";
+import { useEffect as F, useRef as P, useCallback as j, memo as Re, useId as De, useState as we, useLayoutEffect as Ie, Component as Xe, useMemo as be, forwardRef as de, createElement as I } from "react";
+import { create as Ye } from "zustand";
+import { createPortal as Fe } from "react-dom";
+const E = (e = 14) => ({
   xmlns: "http://www.w3.org/2000/svg",
   width: e,
   height: e,
@@ -13,17 +13,17 @@ const D = (e = 14) => ({
   strokeLinecap: "round",
   strokeLinejoin: "round"
 });
-function De({ size: e, ...t }) {
-  return /* @__PURE__ */ r("svg", { ...D(e), ...t, children: /* @__PURE__ */ r("path", { d: "M5 12h14" }) });
+function We({ size: e, ...t }) {
+  return /* @__PURE__ */ r("svg", { ...E(e), ...t, children: /* @__PURE__ */ r("path", { d: "M5 12h14" }) });
 }
-function Fe({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function Ge({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("path", { d: "M5 12h14" }),
     /* @__PURE__ */ r("path", { d: "M12 5v14" })
   ] });
 }
-function Ie({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function Ee({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
     /* @__PURE__ */ r("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
     /* @__PURE__ */ r("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
@@ -32,14 +32,14 @@ function Ie({ size: e, ...t }) {
     /* @__PURE__ */ r("path", { d: "m16 16-1.9-1.9" })
   ] });
 }
-function Ge({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function Le({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
     /* @__PURE__ */ r("path", { d: "M3 3v5h5" })
   ] });
 }
-function Ee({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function Oe({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
     /* @__PURE__ */ r("path", { d: "M3 9h18" }),
     /* @__PURE__ */ r("path", { d: "M3 15h18" }),
@@ -47,8 +47,8 @@ function Ee({ size: e, ...t }) {
     /* @__PURE__ */ r("path", { d: "M15 3v18" })
   ] });
 }
-function Le({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function $e({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("polyline", { points: "15 3 21 3 21 9" }),
     /* @__PURE__ */ r("polyline", { points: "9 21 3 21 3 15" }),
     /* @__PURE__ */ r("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
@@ -56,29 +56,29 @@ function Le({ size: e, ...t }) {
   ] });
 }
 function he({ size: e, ...t }) {
-  return /* @__PURE__ */ r("svg", { ...D(e), ...t, children: /* @__PURE__ */ r("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+  return /* @__PURE__ */ r("svg", { ...E(e), ...t, children: /* @__PURE__ */ r("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 }
-function Oe({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function Ae({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
     /* @__PURE__ */ r("path", { d: "M12 9v4" }),
     /* @__PURE__ */ r("path", { d: "M12 17h.01" })
   ] });
 }
-function Ae({ size: e, ...t }) {
-  return /* @__PURE__ */ r("svg", { ...D(e), ...t, children: /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5" }) });
+function Be({ size: e, ...t }) {
+  return /* @__PURE__ */ r("svg", { ...E(e), ...t, children: /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5" }) });
 }
-function Ne({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function Se({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("path", { d: "M18 6 6 18" }),
     /* @__PURE__ */ r("path", { d: "m6 6 12 12" })
   ] });
 }
-function $e({ size: e, ...t }) {
-  return /* @__PURE__ */ r("svg", { ...D(e), ...t, children: /* @__PURE__ */ r("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
+function He({ size: e, ...t }) {
+  return /* @__PURE__ */ r("svg", { ...E(e), ...t, children: /* @__PURE__ */ r("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
 }
-function Be({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
+function Ve({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...E(e), ...t, children: [
     /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "4" }),
     /* @__PURE__ */ r("path", { d: "M12 2v2" }),
     /* @__PURE__ */ r("path", { d: "M12 20v2" }),
@@ -90,44 +90,44 @@ function Be({ size: e, ...t }) {
     /* @__PURE__ */ r("path", { d: "m19.07 4.93-1.41 1.41" })
   ] });
 }
-const ue = 20;
-function ce(e) {
-  return Math.round(e / ue) * ue;
+const G = 20;
+function le(e) {
+  return Math.round(e / G) * G;
 }
-function ge(e, t, n = 60) {
+function ve(e, t, n = 60) {
   if (e.size === 0) return null;
-  let a = 1 / 0, s = 1 / 0, l = -1 / 0, h = -1 / 0;
+  let a = 1 / 0, s = 1 / 0, c = -1 / 0, m = -1 / 0;
   for (const x of e.values())
-    a = Math.min(a, x.x), s = Math.min(s, x.y), l = Math.max(l, x.x + x.width), h = Math.max(h, x.y + x.height);
-  const p = l - a + n * 2, f = h - s + n * 2, w = t.width || window.innerWidth, m = t.height || window.innerHeight, v = Math.min(w / p, m / f, 1.5), g = (a + l) / 2, _ = (s + h) / 2;
+    a = Math.min(a, x.x), s = Math.min(s, x.y), c = Math.max(c, x.x + x.width), m = Math.max(m, x.y + x.height);
+  const p = c - a + n * 2, f = m - s + n * 2, b = t.width || window.innerWidth, h = t.height || window.innerHeight, w = Math.min(b / p, h / f, 1.5), y = (a + c) / 2, z = (s + m) / 2;
   return {
-    scale: Math.min(3, Math.max(0.2, v)),
+    scale: Math.min(3, Math.max(0.2, w)),
     offset: {
-      x: w / 2 - g * v,
-      y: m / 2 - _ * v
+      x: b / 2 - y * w,
+      y: h / 2 - z * w
     }
   };
 }
-function He(e, t, n = 40, a = 1.5) {
-  const s = t.width || window.innerWidth, l = t.height || window.innerHeight, h = Math.max(1, e.width), p = Math.max(1, e.height), f = Math.min(
-    (s - n * 2) / h,
-    (l - n * 2) / p,
+function je(e, t, n = 40, a = 1.5) {
+  const s = t.width || window.innerWidth, c = t.height || window.innerHeight, m = Math.max(1, e.width), p = Math.max(1, e.height), f = Math.min(
+    (s - n * 2) / m,
+    (c - n * 2) / p,
     a
-  ), w = Math.min(3, Math.max(0.2, f));
+  ), b = Math.min(3, Math.max(0.2, f));
   return {
-    scale: w,
+    scale: b,
     offset: {
-      x: s / 2 - (e.x + h / 2) * w,
-      y: l / 2 - (e.y + p / 2) * w
+      x: s / 2 - (e.x + m / 2) * b,
+      y: c / 2 - (e.y + p / 2) * b
     }
   };
 }
-const b = Xe((e, t) => ({
+const g = Ye((e, t) => ({
   offset: { x: 0, y: 0 },
   scale: 1,
   viewportSize: { width: 0, height: 0 },
   snapToGrid: !1,
-  snapGridSize: ue,
+  snapGridSize: G,
   panels: /* @__PURE__ */ new Map(),
   resetFns: /* @__PURE__ */ new Map(),
   registryVersion: 0,
@@ -148,24 +148,24 @@ const b = Xe((e, t) => ({
     t().resetFns.delete(n);
   },
   fitToContent: () => {
-    const { panels: n, viewportSize: a } = t(), s = ge(n, a);
+    const { panels: n, viewportSize: a } = t(), s = ve(n, a);
     s && e({ scale: s.scale, offset: s.offset });
   },
   focusPanel: (n, a) => {
-    const { viewportSize: s } = t(), l = He(
+    const { viewportSize: s } = t(), c = je(
       n,
       s,
       (a == null ? void 0 : a.padding) ?? 40,
       (a == null ? void 0 : a.maxScale) ?? 1.5
     );
-    e({ scale: l.scale, offset: l.offset });
+    e({ scale: c.scale, offset: c.offset });
   },
   resetWidgets: () => {
     for (const a of t().resetFns.values()) a();
     const n = (a = 0) => {
-      const { panels: s, viewportSize: l } = t(), h = ge(s, l);
-      if (h) {
-        e({ scale: h.scale, offset: h.offset });
+      const { panels: s, viewportSize: c } = t(), m = ve(s, c);
+      if (m) {
+        e({ scale: m.scale, offset: m.offset });
         return;
       }
       a < 6 && requestAnimationFrame(() => n(a + 1));
@@ -182,42 +182,42 @@ const b = Xe((e, t) => ({
     resetFns: /* @__PURE__ */ new Map()
   })
 }));
-function Ve({ extraActions: e }) {
-  const t = b((m) => m.scale), n = b((m) => m.viewportSize), a = b((m) => m.snapToGrid), s = b((m) => m.setScale), l = b((m) => m.setOffset), h = b((m) => m.setSnapToGrid), p = b((m) => m.fitToContent), f = b((m) => m.resetWidgets);
-  Y(() => {
+function Ze({ extraActions: e }) {
+  const t = g((h) => h.scale), n = g((h) => h.viewportSize), a = g((h) => h.snapToGrid), s = g((h) => h.setScale), c = g((h) => h.setOffset), m = g((h) => h.setSnapToGrid), p = g((h) => h.fitToContent), f = g((h) => h.resetWidgets);
+  F(() => {
     a && window.dispatchEvent(new Event("whiteboard-snap-now"));
   }, [a]);
-  const w = (m) => {
-    const v = Math.min(3, Math.max(0.2, m)), g = v / t, _ = (n.width || window.innerWidth) / 2, x = (n.height || window.innerHeight) / 2;
-    l((P) => ({
-      x: _ - (_ - P.x) * g,
-      y: x - (x - P.y) * g
-    })), s(v);
+  const b = (h) => {
+    const w = Math.min(3, Math.max(0.2, h)), y = w / t, z = (n.width || window.innerWidth) / 2, x = (n.height || window.innerHeight) / 2;
+    c((C) => ({
+      x: z - (z - C.x) * y,
+      y: x - (x - C.y) * y
+    })), s(w);
   };
   return /* @__PURE__ */ d(
     "div",
     {
       className: "zoom-bar",
-      onPointerDown: (m) => m.stopPropagation(),
-      onWheel: (m) => m.stopPropagation(),
+      onPointerDown: (h) => h.stopPropagation(),
+      onWheel: (h) => h.stopPropagation(),
       children: [
-        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => w(t * 0.8), title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ r(De, { size: 14 }) }),
+        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => b(t * 0.8), title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ r(We, { size: 14 }) }),
         /* @__PURE__ */ d("span", { className: "zoom-bar__value", children: [
           Math.round(t * 100),
           "%"
         ] }),
-        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => w(t * 1.2), title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ r(Fe, { size: 14 }) }),
-        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: p, title: "Fit camera to all panels", "aria-label": "Fit camera to all panels", children: /* @__PURE__ */ r(Ie, { size: 14 }) }),
-        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: f, title: "Reset panel positions", "aria-label": "Reset panel positions", children: /* @__PURE__ */ r(Ge, { size: 14 }) }),
+        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => b(t * 1.2), title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ r(Ge, { size: 14 }) }),
+        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: p, title: "Fit camera to all panels", "aria-label": "Fit camera to all panels", children: /* @__PURE__ */ r(Ee, { size: 14 }) }),
+        /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: f, title: "Reset panel positions", "aria-label": "Reset panel positions", children: /* @__PURE__ */ r(Le, { size: 14 }) }),
         /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             className: `wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action${a ? " is-active" : ""}`,
-            onClick: () => h((m) => !m),
+            onClick: () => m((h) => !h),
             title: a ? "Disable snap to grid" : "Enable snap to grid",
             "aria-label": a ? "Disable snap to grid" : "Enable snap to grid",
-            children: /* @__PURE__ */ r(Ee, { size: 14 })
+            children: /* @__PURE__ */ r(Oe, { size: 14 })
           }
         ),
         e
@@ -225,95 +225,95 @@ function Ve({ extraActions: e }) {
     }
   );
 }
-const Q = 200, ee = 150, le = 40, ve = 1;
-function je({ loading: e = !1 }) {
-  b((i) => i.registryVersion);
-  const t = b((i) => i.offset), n = b((i) => i.scale), a = b((i) => i.viewportSize), s = b((i) => i.panels), l = b((i) => i.setOffset), h = b((i) => i.setScale), p = b((i) => i.focusPanel), f = M(null), w = M(!1), m = M(null), g = Array.from(s.entries()).filter(([, i]) => Number.isFinite(i.width) && Number.isFinite(i.height)), _ = g.map(([, i]) => i);
-  if (e || _.length === 0)
-    return /* @__PURE__ */ r("div", { className: "minimap minimap--loading", style: { width: Q, height: ee }, children: /* @__PURE__ */ r("div", { className: "minimap__loading", children: /* @__PURE__ */ r(he, { size: 14, className: "icon-spin" }) }) });
-  const x = a.width || window.innerWidth, P = a.height || window.innerHeight, E = x / n, B = P / n, H = -t.x / n, V = -t.y / n;
-  let F = 1 / 0, u = 1 / 0, R = -1 / 0, W = -1 / 0;
-  for (const i of _)
-    F = Math.min(F, i.x), u = Math.min(u, i.y), R = Math.max(R, i.x + i.width), W = Math.max(W, i.y + i.height);
-  F -= le, u -= le, R += le, W += le;
-  const C = Math.max(ve, R - F), A = Math.max(ve, W - u), z = Math.min(Q / C, ee / A), L = C * z, Z = A * z, U = (Q - L) / 2, X = (ee - Z) / 2, q = (i) => U + (i - F) * z, j = (i) => X + (i - u) * z, J = (i, N) => {
+const ee = 200, te = 150, ue = 40, Ne = 1;
+function Ue({ loading: e = !1 }) {
+  g((o) => o.registryVersion);
+  const t = g((o) => o.offset), n = g((o) => o.scale), a = g((o) => o.viewportSize), s = g((o) => o.panels), c = g((o) => o.setOffset), m = g((o) => o.setScale), p = g((o) => o.focusPanel), f = P(null), b = P(!1), h = P(null), y = Array.from(s.entries()).filter(([, o]) => Number.isFinite(o.width) && Number.isFinite(o.height)), z = y.map(([, o]) => o);
+  if (e || z.length === 0)
+    return /* @__PURE__ */ r("div", { className: "minimap minimap--loading", style: { width: ee, height: te }, children: /* @__PURE__ */ r("div", { className: "minimap__loading", children: /* @__PURE__ */ r(he, { size: 14, className: "icon-spin" }) }) });
+  const x = a.width || window.innerWidth, C = a.height || window.innerHeight, L = x / n, N = C / n, v = -t.x / n, T = -t.y / n;
+  let O = 1 / 0, u = 1 / 0, X = -1 / 0, Y = -1 / 0;
+  for (const o of z)
+    O = Math.min(O, o.x), u = Math.min(u, o.y), X = Math.max(X, o.x + o.width), Y = Math.max(Y, o.y + o.height);
+  O -= ue, u -= ue, X += ue, Y += ue;
+  const R = Math.max(Ne, X - O), V = Math.max(Ne, Y - u), D = Math.min(ee / R, te / V), B = R * D, U = V * D, q = (ee - B) / 2, W = (te - U) / 2, J = (o) => q + (o - O) * D, Z = (o) => W + (o - u) * D, Q = (o, k) => {
     if (!f.current) return;
-    const S = f.current.getBoundingClientRect(), I = Math.min(Q, Math.max(0, i - S.left)), O = Math.min(ee, Math.max(0, N - S.top)), re = Math.min(L + U, Math.max(U, I)), ae = Math.min(Z + X, Math.max(X, O)), se = (re - U) / z + F, ie = (ae - X) / z + u;
-    return { worldX: se, worldY: ie };
-  }, K = (i, N, S) => {
-    const I = Math.min(3, Math.max(0.2, S));
-    h(I), l({
-      x: x / 2 - i * I,
-      y: P / 2 - N * I
+    const _ = f.current.getBoundingClientRect(), $ = Math.min(ee, Math.max(0, o - _.left)), H = Math.min(te, Math.max(0, k - _.top)), ae = Math.min(B + q, Math.max(q, $)), se = Math.min(U + W, Math.max(W, H)), oe = (ae - q) / D + O, ie = (se - W) / D + u;
+    return { worldX: oe, worldY: ie };
+  }, K = (o, k, _) => {
+    const $ = Math.min(3, Math.max(0.2, _));
+    m($), c({
+      x: x / 2 - o * $,
+      y: C / 2 - k * $
     });
-  }, ne = (i, N) => {
-    const S = J(i, N);
-    S && K(S.worldX, S.worldY, n);
-  }, fe = (i) => {
-    i.stopPropagation(), i.preventDefault(), w.current = !0, i.currentTarget.setPointerCapture(i.pointerId), ne(i.clientX, i.clientY);
-  }, c = (i) => {
-    w.current && ne(i.clientX, i.clientY);
-  }, y = () => {
-    w.current = !1;
+  }, re = (o, k) => {
+    const _ = Q(o, k);
+    _ && K(_.worldX, _.worldY, n);
+  }, pe = (o) => {
+    o.stopPropagation(), o.preventDefault(), b.current = !0, o.currentTarget.setPointerCapture(o.pointerId), re(o.clientX, o.clientY);
+  }, l = (o) => {
+    b.current && re(o.clientX, o.clientY);
+  }, S = () => {
+    b.current = !1;
   };
   return /* @__PURE__ */ d(
     "div",
     {
       ref: f,
-      onPointerDown: fe,
-      onPointerMove: c,
-      onPointerUp: y,
-      onPointerCancel: y,
-      onWheel: (i) => {
-        i.preventDefault(), i.stopPropagation();
-        const N = J(i.clientX, i.clientY);
-        if (!N) return;
-        const S = i.deltaY > 0 ? 0.9 : 1.1;
-        K(N.worldX, N.worldY, n * S);
+      onPointerDown: pe,
+      onPointerMove: l,
+      onPointerUp: S,
+      onPointerCancel: S,
+      onWheel: (o) => {
+        o.preventDefault(), o.stopPropagation();
+        const k = Q(o.clientX, o.clientY);
+        if (!k) return;
+        const _ = o.deltaY > 0 ? 0.9 : 1.1;
+        K(k.worldX, k.worldY, n * _);
       },
       className: "minimap",
       style: {
-        width: Q,
-        height: ee
+        width: ee,
+        height: te
       },
       children: [
-        g.map(([i, N]) => /* @__PURE__ */ r(
+        y.map(([o, k]) => /* @__PURE__ */ r(
           "div",
           {
             className: "minimap__panel",
-            onPointerDown: (S) => {
-              S.stopPropagation();
+            onPointerDown: (_) => {
+              _.stopPropagation();
             },
-            onPointerUp: (S) => {
-              S.stopPropagation();
-              const I = Date.now(), O = m.current;
-              if (O && O.id === i && I - O.time < 300) {
-                S.preventDefault(), p(N, { padding: N.focusPadding, maxScale: N.focusMaxScale }), m.current = null;
+            onPointerUp: (_) => {
+              _.stopPropagation();
+              const $ = Date.now(), H = h.current;
+              if (H && H.id === o && $ - H.time < 300) {
+                _.preventDefault(), p(k, { padding: k.focusPadding, maxScale: k.focusMaxScale }), h.current = null;
                 return;
               }
-              m.current = { id: i, time: I };
+              h.current = { id: o, time: $ };
             },
-            onDoubleClick: (S) => {
-              S.preventDefault(), S.stopPropagation(), p(N, { padding: N.focusPadding, maxScale: N.focusMaxScale });
+            onDoubleClick: (_) => {
+              _.preventDefault(), _.stopPropagation(), p(k, { padding: k.focusPadding, maxScale: k.focusMaxScale });
             },
             style: {
-              left: q(N.x),
-              top: j(N.y),
-              width: Math.max(1, N.width * z),
-              height: Math.max(1, N.height * z)
+              left: J(k.x),
+              top: Z(k.y),
+              width: Math.max(1, k.width * D),
+              height: Math.max(1, k.height * D)
             }
           },
-          i
+          o
         )),
         /* @__PURE__ */ r(
           "div",
           {
             className: "minimap__viewport",
             style: {
-              left: q(H),
-              top: j(V),
-              width: E * z,
-              height: B * z
+              left: J(v),
+              top: Z(T),
+              width: L * D,
+              height: N * D
             }
           }
         )
@@ -321,69 +321,69 @@ function je({ loading: e = !1 }) {
     }
   );
 }
-function wt({ children: e, showMinimap: t = !0, minimapLoading: n = !1, extraActions: a }) {
-  const s = b((u) => u.offset), l = b((u) => u.scale), h = b((u) => u.registryVersion), p = b((u) => u.viewportSize), f = b((u) => u.setOffset), w = b((u) => u.setScale), m = b((u) => u.setViewportSize), v = M(null), g = M(!1), _ = M({ x: 0, y: 0 }), x = M(null), P = M(l), E = M(!1);
-  Y(() => () => {
-    b.getState().resetSession();
-  }, []), Y(() => {
-    P.current = l;
-  }, [l]), Y(() => {
-    const u = v.current;
+function vt({ children: e, showMinimap: t = !0, minimapLoading: n = !1, extraActions: a }) {
+  const s = g((u) => u.offset), c = g((u) => u.scale), m = g((u) => u.registryVersion), p = g((u) => u.viewportSize), f = g((u) => u.setOffset), b = g((u) => u.setScale), h = g((u) => u.setViewportSize), w = P(null), y = P(!1), z = P({ x: 0, y: 0 }), x = P(null), C = P(c), L = P(!1);
+  F(() => () => {
+    g.getState().resetSession();
+  }, []), F(() => {
+    C.current = c;
+  }, [c]), F(() => {
+    const u = w.current;
     if (!u) return;
-    const R = () => {
-      const C = u.getBoundingClientRect();
-      m({
-        width: Math.max(0, C.width),
-        height: Math.max(0, C.height)
+    const X = () => {
+      const R = u.getBoundingClientRect();
+      h({
+        width: Math.max(0, R.width),
+        height: Math.max(0, R.height)
       });
     };
-    if (R(), typeof ResizeObserver > "u") return;
-    const W = new ResizeObserver(R);
-    return W.observe(u), () => W.disconnect();
-  }, [m]), Y(() => {
-    if (E.current) return;
-    const { panels: u } = b.getState();
-    u.size === 0 || p.width <= 0 || p.height <= 0 || (E.current = !0, requestAnimationFrame(() => {
-      b.getState().fitToContent();
+    if (X(), typeof ResizeObserver > "u") return;
+    const Y = new ResizeObserver(X);
+    return Y.observe(u), () => Y.disconnect();
+  }, [h]), F(() => {
+    if (L.current) return;
+    const { panels: u } = g.getState();
+    u.size === 0 || p.width <= 0 || p.height <= 0 || (L.current = !0, requestAnimationFrame(() => {
+      g.getState().fitToContent();
     }));
-  }, [h, p]);
-  const B = $((u) => {
-    u.target === u.currentTarget && (u.button === 0 || u.button === 1) && (g.current = !0, x.current = u.pointerId, _.current = { x: u.clientX, y: u.clientY }, u.currentTarget.setPointerCapture(u.pointerId), u.preventDefault());
-  }, []), H = $((u) => {
-    if (!g.current || x.current !== u.pointerId) return;
-    const R = u.movementX ?? u.clientX - _.current.x, W = u.movementY ?? u.clientY - _.current.y;
-    f((C) => ({ x: C.x + R, y: C.y + W })), _.current = { x: u.clientX, y: u.clientY };
-  }, [f]), V = $((u) => {
+  }, [m, p]);
+  const N = j((u) => {
+    u.target === u.currentTarget && (u.button === 0 || u.button === 1) && (y.current = !0, x.current = u.pointerId, z.current = { x: u.clientX, y: u.clientY }, u.currentTarget.setPointerCapture(u.pointerId), u.preventDefault());
+  }, []), v = j((u) => {
+    if (!y.current || x.current !== u.pointerId) return;
+    const X = u.movementX ?? u.clientX - z.current.x, Y = u.movementY ?? u.clientY - z.current.y;
+    f((R) => ({ x: R.x + X, y: R.y + Y })), z.current = { x: u.clientX, y: u.clientY };
+  }, [f]), T = j((u) => {
     if (x.current !== null)
       try {
         u.currentTarget.releasePointerCapture(x.current);
       } catch {
       }
-    g.current = !1, x.current = null;
-  }, []), F = $((u) => {
-    const R = P.current, W = u.currentTarget.getBoundingClientRect(), C = { x: u.clientX - W.left, y: u.clientY - W.top }, A = Math.min(3, Math.max(0.2, R * (u.deltaY > 0 ? 0.9 : 1.1))), z = A / R;
-    f((L) => ({
-      x: C.x - (C.x - L.x) * z,
-      y: C.y - (C.y - L.y) * z
-    })), w(A);
-  }, [f, w]);
-  return /* @__PURE__ */ d(te, { children: [
+    y.current = !1, x.current = null;
+  }, []), O = j((u) => {
+    const X = C.current, Y = u.currentTarget.getBoundingClientRect(), R = { x: u.clientX - Y.left, y: u.clientY - Y.top }, V = Math.min(3, Math.max(0.2, X * (u.deltaY > 0 ? 0.9 : 1.1))), D = V / X;
+    f((B) => ({
+      x: R.x - (R.x - B.x) * D,
+      y: R.y - (R.y - B.y) * D
+    })), b(V);
+  }, [f, b]);
+  return /* @__PURE__ */ d(ne, { children: [
     /* @__PURE__ */ r(
       "div",
       {
-        ref: v,
-        onPointerDown: B,
-        onPointerMove: H,
-        onPointerUp: V,
-        onPointerCancel: V,
-        onWheel: F,
+        ref: w,
+        onPointerDown: N,
+        onPointerMove: v,
+        onPointerUp: T,
+        onPointerCancel: T,
+        onWheel: O,
         onContextMenu: (u) => u.preventDefault(),
         className: "whiteboard-shell",
         children: /* @__PURE__ */ d(
           "div",
           {
             className: "whiteboard-canvas",
-            style: { transform: `translate(${s.x}px, ${s.y}px) scale(${l})` },
+            style: { transform: `translate(${s.x}px, ${s.y}px) scale(${c})` },
             children: [
               /* @__PURE__ */ r("div", { className: "whiteboard-grid", "aria-hidden": !0 }),
               e
@@ -392,168 +392,168 @@ function wt({ children: e, showMinimap: t = !0, minimapLoading: n = !1, extraAct
         )
       }
     ),
-    /* @__PURE__ */ r(Ve, { extraActions: a }),
-    t ? /* @__PURE__ */ r(je, { loading: n }) : null
+    /* @__PURE__ */ r(Ze, { extraActions: a }),
+    t ? /* @__PURE__ */ r(Ue, { loading: n }) : null
   ] });
 }
-const gt = ze(function({
+const Nt = Re(function({
   title: t,
   defaultPosition: n,
   width: a = 300,
   className: s,
-  trackRect: l,
-  focusable: h,
+  trackRect: c,
+  focusable: m,
   focusPadding: p = 40,
   focusMaxScale: f = 1.5,
-  headerActions: w,
-  children: m
+  headerActions: b,
+  children: h
 }) {
-  const v = Te(), [g, _] = ye(n), x = M(!1), P = M(g), E = M(null), B = M(null), H = b((c) => c.scale), V = b((c) => c.snapToGrid), F = b((c) => c.snapGridSize), u = b((c) => c.register), R = b((c) => c.unregister), W = b((c) => c.registerReset), C = b((c) => c.unregisterReset), A = b((c) => c.focusPanel), z = M(H), L = M(!1), Z = M(20), U = M(n), X = M(null), q = M(null);
-  Y(() => {
-    z.current = H;
-  }, [H]), Y(() => {
-    L.current = V, Z.current = F;
-  }, [V, F]), Y(() => {
-    const c = () => {
-      const y = Z.current;
-      _((k) => {
-        const i = {
-          x: Math.round(k.x / y) * y,
-          y: Math.round(k.y / y) * y
+  const w = De(), [y, z] = we(n), x = P(!1), C = P(y), L = P(null), N = P(null), v = g((l) => l.scale), T = g((l) => l.snapToGrid), O = g((l) => l.snapGridSize), u = g((l) => l.register), X = g((l) => l.unregister), Y = g((l) => l.registerReset), R = g((l) => l.unregisterReset), V = g((l) => l.focusPanel), D = P(v), B = P(!1), U = P(20), q = P(n), W = P(null), J = P(null);
+  F(() => {
+    D.current = v;
+  }, [v]), F(() => {
+    B.current = T, U.current = O;
+  }, [T, O]), F(() => {
+    const l = () => {
+      const S = U.current;
+      z((M) => {
+        const o = {
+          x: Math.round(M.x / S) * S,
+          y: Math.round(M.y / S) * S
         };
-        return i.x === k.x && i.y === k.y ? k : i;
+        return o.x === M.x && o.y === M.y ? M : o;
       });
     };
-    return window.addEventListener("whiteboard-snap-now", c), () => window.removeEventListener("whiteboard-snap-now", c);
-  }, []), Y(() => {
-    P.current = g;
-  }, [g]);
-  const j = $(() => {
-    const c = E.current;
-    if (!c) return;
-    const y = {
-      x: P.current.x,
-      y: P.current.y,
-      width: c.offsetWidth,
-      height: c.offsetHeight,
+    return window.addEventListener("whiteboard-snap-now", l), () => window.removeEventListener("whiteboard-snap-now", l);
+  }, []), F(() => {
+    C.current = y;
+  }, [y]);
+  const Z = j(() => {
+    const l = L.current;
+    if (!l) return;
+    const S = {
+      x: C.current.x,
+      y: C.current.y,
+      width: l.offsetWidth,
+      height: l.offsetHeight,
       focusPadding: p,
       focusMaxScale: f
-    }, k = B.current;
-    k && k.x === y.x && k.y === y.y && k.width === y.width && k.height === y.height && k.focusPadding === y.focusPadding && k.focusMaxScale === y.focusMaxScale || (B.current = y, u(v, y), l && (l.current = y));
-  }, [f, p, v, u, l]), J = $(() => {
-    const c = E.current;
-    return c ? {
-      x: P.current.x,
-      y: P.current.y,
-      width: c.offsetWidth,
-      height: c.offsetHeight,
+    }, M = N.current;
+    M && M.x === S.x && M.y === S.y && M.width === S.width && M.height === S.height && M.focusPadding === S.focusPadding && M.focusMaxScale === S.focusMaxScale || (N.current = S, u(w, S), c && (c.current = S));
+  }, [f, p, w, u, c]), Q = j(() => {
+    const l = L.current;
+    return l ? {
+      x: C.current.x,
+      y: C.current.y,
+      width: l.offsetWidth,
+      height: l.offsetHeight,
       focusPadding: p,
       focusMaxScale: f
     } : null;
-  }, [f, p]), K = $(() => {
-    const c = J();
-    c && A(c, { padding: p, maxScale: f });
-  }, [A, p, f, J]);
-  Y(() => (W(v, () => _(U.current)), () => {
-    var c;
-    (c = X.current) == null || c.call(X), R(v), C(v), B.current = null;
-  }), [v, W, R, C]), Re(() => {
-    j();
-  }, [g.x, g.y, a, j]), Y(() => {
-    const c = E.current;
-    if (!c || typeof ResizeObserver > "u") return;
-    const y = new ResizeObserver(() => {
-      j();
+  }, [f, p]), K = j(() => {
+    const l = Q();
+    l && V(l, { padding: p, maxScale: f });
+  }, [V, p, f, Q]);
+  F(() => (Y(w, () => z(q.current)), () => {
+    var l;
+    (l = W.current) == null || l.call(W), X(w), R(w), N.current = null;
+  }), [w, Y, X, R]), Ie(() => {
+    Z();
+  }, [y.x, y.y, a, Z]), F(() => {
+    const l = L.current;
+    if (!l || typeof ResizeObserver > "u") return;
+    const S = new ResizeObserver(() => {
+      Z();
     });
-    return y.observe(c), () => y.disconnect();
-  }, [j]);
-  const ne = $((c) => {
-    var re;
-    if (c.button !== 0) return;
+    return S.observe(l), () => S.disconnect();
+  }, [Z]);
+  const re = j((l) => {
+    var ae;
+    if (l.button !== 0) return;
     x.current = !0;
-    const y = c.clientX, k = c.clientY, i = P.current.x, N = P.current.y, S = z.current;
-    c.preventDefault(), c.stopPropagation(), c.target.setPointerCapture(c.pointerId);
-    const I = (ae) => {
+    const S = l.clientX, M = l.clientY, o = C.current.x, k = C.current.y, _ = D.current;
+    l.preventDefault(), l.stopPropagation(), l.target.setPointerCapture(l.pointerId);
+    const $ = (se) => {
       if (!x.current) return;
-      const se = i + (ae.clientX - y) / S, ie = N + (ae.clientY - k) / S, oe = Z.current, Pe = L.current ? Math.round(se / oe) * oe : se, Ce = L.current ? Math.round(ie / oe) * oe : ie;
-      _({
-        x: Pe,
-        y: Ce
+      const oe = o + (se.clientX - S) / _, ie = k + (se.clientY - M) / _, ce = U.current, ze = B.current ? Math.round(oe / ce) * ce : oe, Te = B.current ? Math.round(ie / ce) * ce : ie;
+      z({
+        x: ze,
+        y: Te
       });
-    }, O = () => {
-      x.current = !1, window.removeEventListener("pointermove", I), window.removeEventListener("pointerup", O), X.current = null;
+    }, H = () => {
+      x.current = !1, window.removeEventListener("pointermove", $), window.removeEventListener("pointerup", H), W.current = null;
     };
-    (re = X.current) == null || re.call(X), window.addEventListener("pointermove", I), window.addEventListener("pointerup", O), X.current = O;
-  }, []), fe = s ? `floating-panel ${s}` : "floating-panel";
+    (ae = W.current) == null || ae.call(W), window.addEventListener("pointermove", $), window.addEventListener("pointerup", H), W.current = H;
+  }, []), pe = s ? `floating-panel ${s}` : "floating-panel";
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: E,
-      className: fe,
-      style: { left: g.x, top: g.y, width: a },
-      onPointerDown: (c) => c.stopPropagation(),
-      onPointerUp: (c) => {
+      ref: L,
+      className: pe,
+      style: { left: y.x, top: y.y, width: a },
+      onPointerDown: (l) => l.stopPropagation(),
+      onPointerUp: (l) => {
         if (x.current) return;
-        const y = Date.now(), k = q.current;
-        if (k && y - k.time < 300) {
-          const i = c.clientX - k.x, N = c.clientY - k.y;
-          if (i * i + N * N < 100) {
-            c.stopPropagation(), K(), q.current = null;
+        const S = Date.now(), M = J.current;
+        if (M && S - M.time < 300) {
+          const o = l.clientX - M.x, k = l.clientY - M.y;
+          if (o * o + k * k < 100) {
+            l.stopPropagation(), K(), J.current = null;
             return;
           }
         }
-        q.current = { time: y, x: c.clientX, y: c.clientY };
+        J.current = { time: S, x: l.clientX, y: l.clientY };
       },
-      onWheel: (c) => c.stopPropagation(),
-      onDoubleClick: (c) => {
-        c.stopPropagation(), K();
+      onWheel: (l) => l.stopPropagation(),
+      onDoubleClick: (l) => {
+        l.stopPropagation(), K();
       },
       children: [
-        /* @__PURE__ */ d("div", { onPointerDown: ne, className: "floating-panel__header", children: [
+        /* @__PURE__ */ d("div", { onPointerDown: re, className: "floating-panel__header", children: [
           /* @__PURE__ */ r("strong", { className: "floating-panel__title", children: t }),
-          w,
-          h && /* @__PURE__ */ r(
+          b,
+          m && /* @__PURE__ */ r(
             "button",
             {
               type: "button",
               className: "wb-btn wb-btn--secondary wb-btn--icon-only floating-panel__focus",
               onClick: K,
-              onPointerDown: (c) => c.stopPropagation(),
+              onPointerDown: (l) => l.stopPropagation(),
               title: "Focus on this panel",
               "aria-label": "Focus on this panel",
-              children: /* @__PURE__ */ r(Le, { size: 14 })
+              children: /* @__PURE__ */ r($e, { size: 14 })
             }
           )
         ] }),
-        /* @__PURE__ */ r("div", { className: "floating-panel__body", children: m })
+        /* @__PURE__ */ r("div", { className: "floating-panel__body", children: h })
       ]
     }
   );
 });
-function vt(e) {
-  return M({ ...e, width: 0, height: 0 });
+function xt(e) {
+  return P({ ...e, width: 0, height: 0 });
 }
-function yt(e, t = ue) {
+function St(e, t = G) {
   return { x: e.x, y: e.y + e.height + t };
 }
-function Nt({
+function kt({
   open: e,
   title: t,
   message: n,
   onConfirm: a,
   onCancel: s,
-  confirmLabel: l = "Confirm",
-  loadingLabel: h,
+  confirmLabel: c = "Confirm",
+  loadingLabel: m,
   loading: p,
   error: f
 }) {
-  return Y(() => {
+  return F(() => {
     if (!e) return;
-    const w = (m) => {
-      m.key === "Escape" && s();
+    const b = (h) => {
+      h.key === "Escape" && s();
     };
-    return window.addEventListener("keydown", w), () => window.removeEventListener("keydown", w);
-  }, [e, s]), !e || typeof document > "u" ? null : Ye(
+    return window.addEventListener("keydown", b), () => window.removeEventListener("keydown", b);
+  }, [e, s]), !e || typeof document > "u" ? null : Fe(
     /* @__PURE__ */ r("div", { className: "confirm-modal-overlay", onMouseDown: s, children: /* @__PURE__ */ d(
       "div",
       {
@@ -561,22 +561,22 @@ function Nt({
         role: "dialog",
         "aria-modal": "true",
         "aria-label": t,
-        onMouseDown: (w) => w.stopPropagation(),
+        onMouseDown: (b) => b.stopPropagation(),
         children: [
           /* @__PURE__ */ d("div", { className: "confirm-modal__header", children: [
             /* @__PURE__ */ d("span", { className: "confirm-modal__title", children: [
-              /* @__PURE__ */ r(Oe, { size: 16 }),
+              /* @__PURE__ */ r(Ae, { size: 16 }),
               t
             ] }),
-            /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: s, "aria-label": "Close dialog", children: /* @__PURE__ */ r(Ne, { size: 14 }) })
+            /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: s, "aria-label": "Close dialog", children: /* @__PURE__ */ r(Se, { size: 14 }) })
           ] }),
           /* @__PURE__ */ r("p", { className: "confirm-modal__message", children: n }),
           f && /* @__PURE__ */ r("div", { className: "wb-alert wb-alert--error", children: f }),
           /* @__PURE__ */ d("div", { className: "wb-btn-row", children: [
             /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: s, children: "Cancel" }),
-            /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: a, disabled: p, children: p ? h ?? `${l}…` : /* @__PURE__ */ d(te, { children: [
-              /* @__PURE__ */ r(Ae, { size: 14 }),
-              l
+            /* @__PURE__ */ r("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: a, disabled: p, children: p ? m ?? `${c}…` : /* @__PURE__ */ d(ne, { children: [
+              /* @__PURE__ */ r(Be, { size: 14 }),
+              c
             ] }) })
           ] })
         ]
@@ -585,7 +585,7 @@ function Nt({
     document.body
   );
 }
-class xt extends We {
+class Mt extends Xe {
   constructor() {
     super(...arguments), this.state = { error: null };
   }
@@ -607,7 +607,7 @@ class xt extends We {
     ] }) : this.props.children;
   }
 }
-function kt({
+function _t({
   widths: e,
   startX: t = 20,
   y: n = 40,
@@ -615,85 +615,85 @@ function kt({
 }) {
   const s = be(() => {
     const p = {};
-    for (const [f, w] of Object.entries(e))
-      p[f] = ce(w);
+    for (const [f, b] of Object.entries(e))
+      p[f] = le(b);
     return p;
-  }, [e]), l = be(
+  }, [e]), c = be(
     () => ({
-      startX: ce(t),
-      y: ce(n),
-      gap: ce(a)
+      startX: le(t),
+      y: le(n),
+      gap: le(a)
     }),
     [t, n, a]
-  ), h = be(() => {
+  ), m = be(() => {
     const p = {};
-    let f = l.startX;
-    for (const [w, m] of Object.entries(s))
-      p[w] = { x: f, y: l.y }, f += m + l.gap;
+    let f = c.startX;
+    for (const [b, h] of Object.entries(s))
+      p[b] = { x: f, y: c.y }, f += h + c.gap;
     return p;
-  }, [l.gap, l.startX, l.y, s]);
-  return { layout: l, panelWidth: s, positions: h };
+  }, [c.gap, c.startX, c.y, s]);
+  return { layout: c, panelWidth: s, positions: m };
 }
-function o(...e) {
+function i(...e) {
   return e.filter(Boolean).join(" ");
 }
-const Ze = {
+const qe = {
   error: "wb-alert wb-alert--error",
   muted: "wb-alert wb-alert--muted",
   info: "wb-alert wb-alert--info",
   success: "wb-alert wb-alert--success"
 };
-function St({ tone: e = "info", className: t, ...n }) {
-  return /* @__PURE__ */ r("p", { className: o(Ze[e], t), ...n });
+function Pt({ tone: e = "info", className: t, ...n }) {
+  return /* @__PURE__ */ r("p", { className: i(qe[e], t), ...n });
 }
-function Mt({ className: e, ...t }) {
-  return /* @__PURE__ */ r("span", { className: o("avatar-badge", e), ...t });
+function Ct({ className: e, ...t }) {
+  return /* @__PURE__ */ r("span", { className: i("avatar-badge", e), ...t });
 }
-const Ue = {
+const Je = {
   primary: "",
   secondary: "wb-btn--secondary",
   danger: "wb-btn--danger"
-}, xe = de(function({
+}, ke = de(function({
   variant: t = "primary",
   fullWidth: n = !1,
   iconOnly: a = !1,
   loading: s = !1,
-  type: l = "button",
-  disabled: h,
+  type: c = "button",
+  disabled: m,
   className: p,
   children: f,
-  loadingText: w,
-  ...m
-}, v) {
+  loadingText: b,
+  ...h
+}, w) {
   return /* @__PURE__ */ r(
     "button",
     {
-      ref: v,
-      type: l,
-      className: o("wb-btn", Ue[t], n && "wb-btn--full-width", a && "wb-btn--icon-only", p),
-      disabled: h || s,
-      ...m,
-      children: s ? /* @__PURE__ */ d(te, { children: [
+      ref: w,
+      type: c,
+      className: i("wb-btn", Je[t], n && "wb-btn--full-width", a && "wb-btn--icon-only", p),
+      disabled: m || s,
+      ...h,
+      children: s ? /* @__PURE__ */ d(ne, { children: [
         /* @__PURE__ */ r(he, { size: 14, className: "icon-spin" }),
-        w || f
+        b || f
       ] }) : f
     }
   );
 });
-function qe({ as: e = "div", className: t, ...n }) {
-  return T(e, {
-    className: o("button-row", t),
+function Ke({ as: e = "div", className: t, ...n }) {
+  return I(e, {
+    className: i("button-row", t),
     ...n
   });
 }
-function _t({ children: e, hint: t, className: n, ...a }) {
-  return /* @__PURE__ */ r("div", { className: "canvas-wrap", children: /* @__PURE__ */ d("div", { className: o("canvas-stage", n), ...a, children: [
+function zt({ children: e, hint: t, className: n, ...a }) {
+  return /* @__PURE__ */ r("div", { className: "canvas-wrap", children: /* @__PURE__ */ d("div", { className: i("canvas-stage", n), ...a, children: [
     e,
     t && /* @__PURE__ */ r("p", { className: "canvas-hint", children: t })
   ] }) });
 }
-function Pt({ label: e, hint: t, className: n, ...a }) {
-  return /* @__PURE__ */ d("label", { className: o("checkbox", n), children: [
+function Tt({ label: e, hint: t, className: n, ...a }) {
+  return /* @__PURE__ */ d("label", { className: i("checkbox", n), children: [
     /* @__PURE__ */ r("input", { type: "checkbox", className: "checkbox__input", ...a }),
     e != null && /* @__PURE__ */ d("span", { className: "checkbox__text", children: [
       e,
@@ -704,8 +704,8 @@ function Pt({ label: e, hint: t, className: n, ...a }) {
     ] })
   ] });
 }
-function Ct({ label: e, hint: t, className: n, ...a }) {
-  return /* @__PURE__ */ d("label", { className: o("checkbox", "switch", n), children: [
+function Rt({ label: e, hint: t, className: n, ...a }) {
+  return /* @__PURE__ */ d("label", { className: i("checkbox", "switch", n), children: [
     /* @__PURE__ */ r("input", { type: "checkbox", role: "switch", className: "switch__input", ...a }),
     /* @__PURE__ */ r("span", { className: "switch__track", "aria-hidden": "true", children: /* @__PURE__ */ r("span", { className: "switch__thumb" }) }),
     e != null && /* @__PURE__ */ d("span", { className: "checkbox__text", children: [
@@ -717,89 +717,89 @@ function Ct({ label: e, hint: t, className: n, ...a }) {
     ] })
   ] });
 }
-function zt({ className: e, ...t }) {
-  return /* @__PURE__ */ r("span", { className: o("chip", e), ...t });
+function Dt({ className: e, ...t }) {
+  return /* @__PURE__ */ r("span", { className: i("chip", e), ...t });
 }
-function Ke({ active: e = !1, className: t, ...n }) {
+function Qe({ active: e = !1, className: t, ...n }) {
   return /* @__PURE__ */ r(
     "button",
     {
       type: "button",
-      className: o("choice-card", t),
+      className: i("choice-card", t),
       "data-active": e,
       ...n
     }
   );
 }
 function me({ as: e = "ul", reset: t = !0, className: n, ...a }) {
-  return T(e, {
-    className: o(t && "list-reset", n),
+  return I(e, {
+    className: i(t && "list-reset", n),
     ...a
   });
 }
-const Je = {
+const et = {
   sm: "",
   md: "skeleton--md",
   pill: "skeleton--pill"
 };
-function G({ as: e = "div", radius: t = "sm", className: n, ...a }) {
-  return T(e, {
-    className: o("skeleton", Je[t], n),
+function A({ as: e = "div", radius: t = "sm", className: n, ...a }) {
+  return I(e, {
+    className: i("skeleton", et[t], n),
     "aria-hidden": !0,
     ...a
   });
 }
-function Qe(e) {
+function tt(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-input", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-input", t), ...n });
 }
-function ke(e) {
+function Me(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-btn", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-btn", t), ...n });
 }
-function Tt(e) {
+function It(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-icon-btn", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-icon-btn", t), ...n });
 }
-function Rt(e) {
+function Xt(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-select", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-select", t), ...n });
 }
-function Wt(e) {
+function Yt(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-textarea", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-textarea", t), ...n });
 }
-function Se(e) {
+function _e(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-thumb", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-thumb", t), ...n });
 }
-function et(e) {
+function nt(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { radius: "pill", className: o("skeleton-chip", t), ...n });
+  return /* @__PURE__ */ r(A, { radius: "pill", className: i("skeleton-chip", t), ...n });
 }
-function Me(e) {
+function Pe(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-title", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-title", t), ...n });
 }
-function we({ short: e = !1, className: t, ...n }) {
-  return /* @__PURE__ */ r(G, { className: o("skeleton-line", e && "skeleton-line--short", t), ...n });
+function ye({ short: e = !1, className: t, ...n }) {
+  return /* @__PURE__ */ r(A, { className: i("skeleton-line", e && "skeleton-line--short", t), ...n });
 }
-function Xt(e) {
+function Ft(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { radius: "pill", className: o("skeleton-avatar", t), ...n });
+  return /* @__PURE__ */ r(A, { radius: "pill", className: i("skeleton-avatar", t), ...n });
 }
-function Yt(e) {
+function Wt(e) {
   const { className: t, ...n } = e;
-  return /* @__PURE__ */ r(G, { className: o("skeleton-canvas", t), ...n });
+  return /* @__PURE__ */ r(A, { className: i("skeleton-canvas", t), ...n });
 }
-function Dt({
+function Gt({
   options: e,
   value: t,
   onChange: n,
   className: a
 }) {
-  return /* @__PURE__ */ r(me, { className: o("choice-list", a), children: e.map((s) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
-    Ke,
+  return /* @__PURE__ */ r(me, { className: i("choice-list", a), children: e.map((s) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+    Qe,
     {
       active: t === s.value,
       onClick: () => n(s.value),
@@ -812,115 +812,215 @@ function Dt({
     }
   ) }, s.value)) });
 }
-function Ft({ count: e = 4, className: t, withDescription: n = !1 }) {
-  return /* @__PURE__ */ r(me, { className: o("choice-list", t), "aria-hidden": !0, children: Array.from({ length: e }).map((a, s) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ d("div", { className: "choice-card", children: [
-    /* @__PURE__ */ r(Me, { className: o("skeleton-title--sm", !n && "skeleton-choice-label") }),
-    n ? /* @__PURE__ */ r(we, { short: !0 }) : null
+function Et({ count: e = 4, className: t, withDescription: n = !1 }) {
+  return /* @__PURE__ */ r(me, { className: i("choice-list", t), "aria-hidden": !0, children: Array.from({ length: e }).map((a, s) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ d("div", { className: "choice-card", children: [
+    /* @__PURE__ */ r(Pe, { className: i("skeleton-title--sm", !n && "skeleton-choice-label") }),
+    n ? /* @__PURE__ */ r(ye, { short: !0 }) : null
   ] }) }, `choice-skeleton-${s}`)) });
 }
-function It({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", { className: o("coord-grid", e), ...t });
+function Lt({ className: e, ...t }) {
+  return /* @__PURE__ */ r("div", { className: i("coord-grid", e), ...t });
 }
-function Gt({ axis: e, className: t, ...n }) {
-  return /* @__PURE__ */ d("label", { className: o("coord-input", t), children: [
+function Ot({ axis: e, className: t, ...n }) {
+  return /* @__PURE__ */ d("label", { className: i("coord-input", t), children: [
     e,
     " ",
     /* @__PURE__ */ r("input", { type: "number", step: "0.01", ...n })
   ] });
 }
-function Et({ orientation: e = "horizontal", className: t, ...n }) {
+function $t({ orientation: e = "horizontal", className: t, ...n }) {
   return e === "vertical" ? /* @__PURE__ */ r(
     "span",
     {
       role: "separator",
       "aria-orientation": "vertical",
-      className: o("divider", "divider--vertical", t),
+      className: i("divider", "divider--vertical", t),
       ...n
     }
-  ) : /* @__PURE__ */ r("hr", { className: o("divider", t), ...n });
+  ) : /* @__PURE__ */ r("hr", { className: i("divider", t), ...n });
 }
-function pe({
+const xe = "button, input, select, textarea, canvas, a, label, audio, video, [contenteditable], [data-wb-nodrag]", ge = /* @__PURE__ */ new Map();
+function At() {
+  for (const e of ge.values()) e();
+}
+function rt({
+  id: e,
+  snap: t = !0,
+  persist: n = !0,
+  disabled: a = !1,
+  className: s,
+  style: c,
+  children: m,
+  ...p
+}) {
+  const [f, b] = we({ x: 0, y: 0 }), h = P(null), w = `wb-draggable:${e}`;
+  F(() => {
+    if (n)
+      try {
+        const N = localStorage.getItem(w);
+        if (N) {
+          const v = JSON.parse(N);
+          Number.isFinite(v == null ? void 0 : v.x) && Number.isFinite(v == null ? void 0 : v.y) && b(v);
+        }
+      } catch {
+      }
+  }, [w, n]);
+  const y = (N) => {
+    if (b(N), !!n)
+      try {
+        N.x === 0 && N.y === 0 ? localStorage.removeItem(w) : localStorage.setItem(w, JSON.stringify(N));
+      } catch {
+      }
+  };
+  F(() => {
+    const N = () => y({ x: 0, y: 0 });
+    ge.set(e, N);
+    const v = () => {
+      b((T) => ({
+        x: Math.round(T.x / G) * G,
+        y: Math.round(T.y / G) * G
+      }));
+    };
+    return window.addEventListener("whiteboard-snap-now", v), () => {
+      ge.delete(e), window.removeEventListener("whiteboard-snap-now", v);
+    };
+  }, [e, w]);
+  const z = (N) => {
+    var v, T;
+    a || N.button !== 0 || N.target.closest(xe) || (h.current = { sx: N.clientX, sy: N.clientY, bx: f.x, by: f.y }, (T = (v = N.currentTarget).setPointerCapture) == null || T.call(v, N.pointerId));
+  }, x = (N) => {
+    const v = h.current;
+    v && b({ x: v.bx + (N.clientX - v.sx), y: v.by + (N.clientY - v.sy) });
+  }, C = () => {
+    h.current && (h.current = null, b((v) => {
+      const T = t ? {
+        x: Math.round(v.x / G) * G,
+        y: Math.round(v.y / G) * G
+      } : v;
+      if (n)
+        try {
+          T.x === 0 && T.y === 0 ? localStorage.removeItem(w) : localStorage.setItem(w, JSON.stringify(T));
+        } catch {
+        }
+      return T;
+    }));
+  }, L = (N) => {
+    N.target.closest(xe) || y({ x: 0, y: 0 });
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: i("draggable", a && "draggable--disabled", s),
+      style: {
+        ...c,
+        transform: `translate(${f.x}px, ${f.y}px)`
+      },
+      onPointerDown: z,
+      onPointerMove: x,
+      onPointerUp: C,
+      onPointerCancel: C,
+      onDoubleClick: L,
+      ...p,
+      children: m
+    }
+  );
+}
+function Bt({ padding: e = "md", className: t, ...n }) {
+  return /* @__PURE__ */ r(
+    rt,
+    {
+      className: i(
+        "surface",
+        e === "sm" && "surface--pad-sm",
+        e === "none" && "surface--pad-none",
+        t
+      ),
+      ...n
+    }
+  );
+}
+function fe({
   as: e,
   size: t = "md",
   className: n,
   ...a
 }) {
-  return T(e ?? "div", {
-    className: o(t === "sm" ? "panel-stack-sm" : "panel-stack", n),
+  return I(e ?? "div", {
+    className: i(t === "sm" ? "panel-stack-sm" : "panel-stack", n),
     ...a
   });
 }
-const tt = {
+const at = {
   xs: "text-xs",
   sm: "text-sm",
   md: ""
 };
-function nt({ as: e = "p", clamp: t = !1, className: n, ...a }) {
-  return T(e, {
-    className: o("card-title", t && "card-title--clamp", n),
+function st({ as: e = "p", clamp: t = !1, className: n, ...a }) {
+  return I(e, {
+    className: i("card-title", t && "card-title--clamp", n),
     ...a
   });
 }
-function Lt({ as: e = "h1", className: t, ...n }) {
-  return T(e, {
-    className: o("page-title", t),
+function Ht({ as: e = "h1", className: t, ...n }) {
+  return I(e, {
+    className: i("page-title", t),
     ...n
   });
 }
-function rt({ as: e = "span", className: t, ...n }) {
-  return T(e, {
-    className: o("widget-section__title", t),
+function ot({ as: e = "span", className: t, ...n }) {
+  return I(e, {
+    className: i("widget-section__title", t),
     ...n
   });
 }
-function at({ as: e = "p", className: t, ...n }) {
-  return T(e, {
-    className: o("widget-section__description", t),
+function it({ as: e = "p", className: t, ...n }) {
+  return I(e, {
+    className: i("widget-section__description", t),
     ...n
   });
 }
-function _e({ as: e = "p", size: t = "sm", className: n, ...a }) {
-  return T(e, {
-    className: o(tt[t], "text-muted", n),
+function Ce({ as: e = "p", size: t = "sm", className: n, ...a }) {
+  return I(e, {
+    className: i(at[t], "text-muted", n),
     ...a
   });
 }
-function Ot({ title: e, description: t, action: n }) {
-  return /* @__PURE__ */ d(pe, { size: "sm", children: [
-    /* @__PURE__ */ r(nt, { children: e }),
-    t ? /* @__PURE__ */ r(_e, { children: t }) : null,
+function Vt({ title: e, description: t, action: n }) {
+  return /* @__PURE__ */ d(fe, { size: "sm", children: [
+    /* @__PURE__ */ r(st, { children: e }),
+    t ? /* @__PURE__ */ r(Ce, { children: t }) : null,
     n
   ] });
 }
-function st({ className: e, ...t }) {
-  return /* @__PURE__ */ r("label", { className: o("widget-label", e), ...t });
+function ct({ className: e, ...t }) {
+  return /* @__PURE__ */ r("label", { className: i("widget-label", e), ...t });
 }
-function it({
+function lt({
   as: e,
   label: t,
   htmlFor: n,
   hint: a,
   error: s,
-  layout: l = "stack",
-  className: h,
+  layout: c = "stack",
+  className: m,
   children: p,
   ...f
 }) {
-  return T(
+  return I(
     e ?? "div",
     {
-      className: o(l === "control" ? "widget-control" : "panel-stack-sm", h),
+      className: i(c === "control" ? "widget-control" : "panel-stack-sm", m),
       ...f
     },
-    /* @__PURE__ */ d(te, { children: [
-      t ? /* @__PURE__ */ r(st, { htmlFor: n, children: t }) : null,
+    /* @__PURE__ */ d(ne, { children: [
+      t ? /* @__PURE__ */ r(ct, { htmlFor: n, children: t }) : null,
       p,
-      a ? /* @__PURE__ */ r(_e, { size: "xs", children: a }) : null,
+      a ? /* @__PURE__ */ r(Ce, { size: "xs", children: a }) : null,
       s ? /* @__PURE__ */ r("p", { className: "field-error", children: s }) : null
     ] })
   );
 }
-function At({ isGenerating: e, children: t, message: n }) {
+function jt({ isGenerating: e, children: t, message: n }) {
   return /* @__PURE__ */ d("div", { className: "generating-overlay-wrap", children: [
     t,
     e && /* @__PURE__ */ d("div", { className: "generating-overlay", "aria-live": "polite", children: [
@@ -929,31 +1029,31 @@ function At({ isGenerating: e, children: t, message: n }) {
     ] })
   ] });
 }
-function $t({ as: e = "span", icon: t, className: n, children: a, ...s }) {
-  return T(
+function Zt({ as: e = "span", icon: t, className: n, children: a, ...s }) {
+  return I(
     e,
     {
-      className: o("inline-row", n),
+      className: i("inline-row", n),
       ...s
     },
-    /* @__PURE__ */ d(te, { children: [
+    /* @__PURE__ */ d(ne, { children: [
       t,
       a
     ] })
   );
 }
-function Bt({
+function Ut({
   src: e,
   alt: t,
   placeholder: n = "No image",
   size: a = "md",
   fit: s = "contain",
-  onImageError: l,
-  className: h,
+  onImageError: c,
+  className: m,
   ...p
 }) {
-  const [f, w] = ye(null), m = !!(e && f === e), v = o("image-thumb", `image-thumb--${a}`, `image-thumb--fit-${s}`, h);
-  return /* @__PURE__ */ r("div", { className: v, ...p, children: e && !m ? /* @__PURE__ */ r(
+  const [f, b] = we(null), h = !!(e && f === e), w = i("image-thumb", `image-thumb--${a}`, `image-thumb--fit-${s}`, m);
+  return /* @__PURE__ */ r("div", { className: w, ...p, children: e && !h ? /* @__PURE__ */ r(
     "img",
     {
       src: e,
@@ -961,162 +1061,162 @@ function Bt({
       className: "image-thumb__img",
       style: { objectFit: s, objectPosition: "center" },
       onError: () => {
-        w(e), l == null || l();
+        b(e), c == null || c();
       }
     }
   ) : /* @__PURE__ */ r("span", { className: "image-thumb__placeholder", children: n }) });
 }
-function Ht({
+function qt({
   as: e,
   justify: t = "start",
   className: n,
   ...a
 }) {
-  return T(e ?? "div", {
-    className: o(t === "between" ? "space-between" : t === "end" ? "space-end" : "inline-row", n),
+  return I(e ?? "div", {
+    className: i(t === "between" ? "space-between" : t === "end" ? "space-end" : "inline-row", n),
     ...a
   });
 }
-const ot = de(function({ className: t, ...n }, a) {
-  return /* @__PURE__ */ r("input", { ref: a, className: o(t), ...n });
+const ut = de(function({ className: t, ...n }, a) {
+  return /* @__PURE__ */ r("input", { ref: a, className: i(t), ...n });
 });
-function ct({ as: e = "div", className: t, ...n }) {
-  return T(e, {
-    className: o("item-card", t),
+function dt({ as: e = "div", className: t, ...n }) {
+  return I(e, {
+    className: i("item-card", t),
     ...n
   });
 }
-function Vt({ className: e, ...t }) {
-  return /* @__PURE__ */ r("kbd", { className: o("kbd", e), ...t });
+function Jt({ className: e, ...t }) {
+  return /* @__PURE__ */ r("kbd", { className: i("kbd", e), ...t });
 }
-function jt({ as: e = "div", className: t, ...n }) {
-  return T(e, {
-    className: o("item-list", t),
+function Kt({ as: e = "div", className: t, ...n }) {
+  return I(e, {
+    className: i("item-list", t),
     ...n
   });
 }
-function Zt({ label: e = "Loading...", className: t }) {
-  return /* @__PURE__ */ d("span", { className: o("status-inline", t), children: [
+function Qt({ label: e = "Loading...", className: t }) {
+  return /* @__PURE__ */ d("span", { className: i("status-inline", t), children: [
     /* @__PURE__ */ r(he, { size: 14, className: "icon-spin" }),
     e
   ] });
 }
-function Ut({
+function en({
   label: e,
   hint: t,
   value: n,
   onChange: a,
   min: s,
-  max: l,
-  step: h,
+  max: c,
+  step: m,
   id: p,
   className: f,
-  ...w
+  ...b
 }) {
-  const m = (v) => {
-    let g = v;
-    return s !== void 0 && (g = Math.max(Number(s), g)), l !== void 0 && (g = Math.min(Number(l), g)), g;
+  const h = (w) => {
+    let y = w;
+    return s !== void 0 && (y = Math.max(Number(s), y)), c !== void 0 && (y = Math.min(Number(c), y)), y;
   };
-  return /* @__PURE__ */ r(it, { label: e, hint: t, htmlFor: p, className: o(f), children: /* @__PURE__ */ r(
-    ot,
+  return /* @__PURE__ */ r(lt, { label: e, hint: t, htmlFor: p, className: i(f), children: /* @__PURE__ */ r(
+    ut,
     {
       id: p,
       type: "number",
       inputMode: "decimal",
       min: s,
-      max: l,
-      step: h,
+      max: c,
+      step: m,
       value: n,
-      onChange: (v) => {
-        const g = Number(v.target.value);
-        Number.isFinite(g) && a(m(g));
+      onChange: (w) => {
+        const y = Number(w.target.value);
+        Number.isFinite(y) && a(h(y));
       },
-      ...w
+      ...b
     }
   ) });
 }
-function qt({
+function tn({
   className: e,
   placement: t,
   onPointerDown: n,
   onWheel: a,
   onContextMenu: s,
-  ...l
+  ...c
 }) {
   return /* @__PURE__ */ r(
-    xe,
+    ke,
     {
       variant: "secondary",
       iconOnly: !0,
-      className: o("overlay-icon-btn", t && `overlay-icon-btn--${t}`, e),
-      onPointerDown: (h) => {
-        h.stopPropagation(), n == null || n(h);
+      className: i("overlay-icon-btn", t && `overlay-icon-btn--${t}`, e),
+      onPointerDown: (m) => {
+        m.stopPropagation(), n == null || n(m);
       },
-      onWheel: (h) => {
-        h.stopPropagation(), a == null || a(h);
+      onWheel: (m) => {
+        m.stopPropagation(), a == null || a(m);
       },
-      onContextMenu: (h) => {
-        h.stopPropagation(), s == null || s(h);
+      onContextMenu: (m) => {
+        m.stopPropagation(), s == null || s(m);
       },
-      ...l
+      ...c
     }
   );
 }
-function Kt({ children: e, className: t, ...n }) {
-  return /* @__PURE__ */ r("main", { className: o("page-shell", t), ...n, children: e });
+function nn({ children: e, className: t, ...n }) {
+  return /* @__PURE__ */ r("main", { className: i("page-shell", t), ...n, children: e });
 }
-function Jt({ children: e, className: t, ...n }) {
-  return /* @__PURE__ */ r("div", { className: o("page-card", t), ...n, children: e });
+function rn({ children: e, className: t, ...n }) {
+  return /* @__PURE__ */ r("div", { className: i("page-card", t), ...n, children: e });
 }
-function Qt({ onClick: e, label: t = "Close" }) {
-  return /* @__PURE__ */ d(xe, { variant: "secondary", className: "panel-close-btn", onClick: e, children: [
-    /* @__PURE__ */ r(Ne, { size: 14 }),
+function an({ onClick: e, label: t = "Close" }) {
+  return /* @__PURE__ */ d(ke, { variant: "secondary", className: "panel-close-btn", onClick: e, children: [
+    /* @__PURE__ */ r(Se, { size: 14 }),
     t
   ] });
 }
-function en({ heading: e, description: t, actions: n, className: a, children: s, ...l }) {
-  return /* @__PURE__ */ d("section", { className: o("widget-section", a), ...l, children: [
+function sn({ heading: e, description: t, actions: n, className: a, children: s, ...c }) {
+  return /* @__PURE__ */ d("section", { className: i("widget-section", a), ...c, children: [
     e || n ? /* @__PURE__ */ d("header", { className: n ? "title-row" : void 0, children: [
-      e ? /* @__PURE__ */ r(rt, { children: e }) : null,
+      e ? /* @__PURE__ */ r(ot, { children: e }) : null,
       n
     ] }) : null,
-    t ? /* @__PURE__ */ r(at, { children: t }) : null,
+    t ? /* @__PURE__ */ r(it, { children: t }) : null,
     s
   ] });
 }
-function tn({ icon: e, label: t }) {
+function on({ icon: e, label: t }) {
   return /* @__PURE__ */ d("span", { className: "panel-title-with-icon", children: [
     /* @__PURE__ */ r(e, { size: 13, className: "panel-title-icon" }),
     /* @__PURE__ */ r("span", { children: t })
   ] });
 }
-function lt({ as: e = "button", className: t, ...n }) {
-  return T(e, {
-    className: o("picker-card", t),
+function ht({ as: e = "button", className: t, ...n }) {
+  return I(e, {
+    className: i("picker-card", t),
     ...n
   });
 }
-function nn({ minItemWidth: e = 120, className: t, style: n, ...a }) {
+function cn({ minItemWidth: e = 120, className: t, style: n, ...a }) {
   const s = {
     gridTemplateColumns: `repeat(auto-fill, minmax(${e}px, 1fr))`,
     ...n
   };
-  return /* @__PURE__ */ r(me, { className: o("picker-grid", t), style: s, ...a });
+  return /* @__PURE__ */ r(me, { className: i("picker-grid", t), style: s, ...a });
 }
-const ut = {
+const mt = {
   default: "",
   success: "success",
   warning: "warning",
   danger: "danger"
 };
-function rn({ tone: e = "default", className: t, ...n }) {
-  return /* @__PURE__ */ r("span", { className: o("pill", ut[e], t), ...n });
+function ln({ tone: e = "default", className: t, ...n }) {
+  return /* @__PURE__ */ r("span", { className: i("pill", mt[e], t), ...n });
 }
-const an = de(function({ className: t, ...n }, a) {
-  return /* @__PURE__ */ r("select", { ref: a, className: o(t), ...n });
+const un = de(function({ className: t, ...n }, a) {
+  return /* @__PURE__ */ r("select", { ref: a, className: i(t), ...n });
 });
-function sn({ label: e, display: t, value: n, onChange: a, className: s, ...l }) {
-  return /* @__PURE__ */ d("div", { className: o("slider", s), children: [
+function dn({ label: e, display: t, value: n, onChange: a, className: s, ...c }) {
+  return /* @__PURE__ */ d("div", { className: i("slider", s), children: [
     (e != null || t != null) && /* @__PURE__ */ d("div", { className: "slider__head", children: [
       /* @__PURE__ */ r("span", { className: "widget-label", children: e }),
       /* @__PURE__ */ r("span", { className: "slider__value", children: t ?? n })
@@ -1127,23 +1227,23 @@ function sn({ label: e, display: t, value: n, onChange: a, className: s, ...l })
         type: "range",
         className: "slider__input",
         value: n,
-        onChange: (h) => a(Number(h.target.value)),
-        ...l
+        onChange: (m) => a(Number(m.target.value)),
+        ...c
       }
     )
   ] });
 }
-const dt = {
+const ft = {
   "media-content": "split-layout--media-content",
   single: "split-layout--single",
   "media-content-actions": "split-layout--media-content-actions"
 };
-function on({ variant: e, className: t, ...n }) {
-  return /* @__PURE__ */ r("div", { className: o("split-layout", dt[e], t), ...n });
+function hn({ variant: e, className: t, ...n }) {
+  return /* @__PURE__ */ r("div", { className: i("split-layout", ft[e], t), ...n });
 }
-function cn({ as: e, padding: t = "md", className: n, ...a }) {
-  return T(e ?? "div", {
-    className: o(
+function mn({ as: e, padding: t = "md", className: n, ...a }) {
+  return I(e ?? "div", {
+    className: i(
       "surface",
       t === "sm" && "surface--pad-sm",
       t === "none" && "surface--pad-none",
@@ -1152,30 +1252,30 @@ function cn({ as: e, padding: t = "md", className: n, ...a }) {
     ...a
   });
 }
-function ht({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", { className: o("tag-row", e), ...t });
+function pt({ className: e, ...t }) {
+  return /* @__PURE__ */ r("div", { className: i("tag-row", e), ...t });
 }
-const ln = de(function({ className: t, ...n }, a) {
-  return /* @__PURE__ */ r("textarea", { ref: a, className: o(t), ...n });
+const fn = de(function({ className: t, ...n }, a) {
+  return /* @__PURE__ */ r("textarea", { ref: a, className: i(t), ...n });
 });
-function un({ className: e, theme: t = "light", onToggle: n, lightIcon: a, darkIcon: s }) {
+function pn({ className: e, theme: t = "light", onToggle: n, lightIcon: a, darkIcon: s }) {
   return /* @__PURE__ */ r(
     "button",
     {
       type: "button",
-      className: o("wb-btn", "wb-btn--secondary", "wb-btn--icon-only", e),
+      className: i("wb-btn", "wb-btn--secondary", "wb-btn--icon-only", e),
       onClick: n,
       title: `Switch to ${t === "light" ? "dark" : "light"} mode`,
       "aria-label": "Toggle theme",
-      children: t === "light" ? s ?? /* @__PURE__ */ r($e, { size: 14 }) : a ?? /* @__PURE__ */ r(Be, { size: 14 })
+      children: t === "light" ? s ?? /* @__PURE__ */ r(He, { size: 14 }) : a ?? /* @__PURE__ */ r(Ve, { size: 14 })
     }
   );
 }
-function dn({ children: e, end: t, position: n = "top", className: a, ...s }) {
+function bn({ children: e, end: t, position: n = "top", className: a, ...s }) {
   return /* @__PURE__ */ d(
     "nav",
     {
-      className: o(
+      className: i(
         "toolbar",
         n === "bottom" && "toolbar--bottom",
         n === "static" && "toolbar--static",
@@ -1189,11 +1289,11 @@ function dn({ children: e, end: t, position: n = "top", className: a, ...s }) {
     }
   );
 }
-function hn({ label: e, placement: t = "top", className: n, children: a, ...s }) {
+function gn({ label: e, placement: t = "top", className: n, children: a, ...s }) {
   return /* @__PURE__ */ d(
     "span",
     {
-      className: o("tooltip", t === "bottom" && "tooltip--bottom", n),
+      className: i("tooltip", t === "bottom" && "tooltip--bottom", n),
       ...s,
       children: [
         a,
@@ -1202,10 +1302,10 @@ function hn({ label: e, placement: t = "top", className: n, children: a, ...s })
     }
   );
 }
-function mn({ className: e, ...t }) {
-  return /* @__PURE__ */ r("div", { className: o("title-row", e), ...t });
+function wn({ className: e, ...t }) {
+  return /* @__PURE__ */ r("div", { className: i("title-row", e), ...t });
 }
-function pn({
+function yn({
   children: e,
   bottom: t,
   position: n = "left",
@@ -1215,7 +1315,7 @@ function pn({
   return /* @__PURE__ */ d(
     "nav",
     {
-      className: o(
+      className: i(
         "vertical-toolbar",
         n === "right" && "vertical-toolbar--right",
         n === "static" && "vertical-toolbar--static",
@@ -1229,125 +1329,128 @@ function pn({
     }
   );
 }
-function fn({ inputs: e = 1, showButton: t = !0, className: n, ...a }) {
-  return /* @__PURE__ */ d(pe, { className: n, ...a, children: [
-    Array.from({ length: e }).map((s, l) => /* @__PURE__ */ r(Qe, {}, `panel-form-input-${l}`)),
-    t && /* @__PURE__ */ r(ke, {})
+function vn({ inputs: e = 1, showButton: t = !0, className: n, ...a }) {
+  return /* @__PURE__ */ d(fe, { className: n, ...a, children: [
+    Array.from({ length: e }).map((s, c) => /* @__PURE__ */ r(tt, {}, `panel-form-input-${c}`)),
+    t && /* @__PURE__ */ r(Me, {})
   ] });
 }
-function bn({
+function Nn({
   withThumb: e = !0,
   chipCount: t = 0,
   actionCount: n = 0,
   className: a,
   ...s
 }) {
-  return /* @__PURE__ */ d(ct, { as: "li", className: a, ...s, children: [
-    /* @__PURE__ */ d(pe, { size: "sm", children: [
-      e ? /* @__PURE__ */ r(Se, {}) : null,
-      t > 0 ? /* @__PURE__ */ r(ht, { children: Array.from({ length: t }).map((l, h) => /* @__PURE__ */ r(et, {}, `card-skeleton-chip-${h}`)) }) : null,
-      /* @__PURE__ */ r(Me, {}),
-      /* @__PURE__ */ r(we, { short: !0 })
+  return /* @__PURE__ */ d(dt, { as: "li", className: a, ...s, children: [
+    /* @__PURE__ */ d(fe, { size: "sm", children: [
+      e ? /* @__PURE__ */ r(_e, {}) : null,
+      t > 0 ? /* @__PURE__ */ r(pt, { children: Array.from({ length: t }).map((c, m) => /* @__PURE__ */ r(nt, {}, `card-skeleton-chip-${m}`)) }) : null,
+      /* @__PURE__ */ r(Pe, {}),
+      /* @__PURE__ */ r(ye, { short: !0 })
     ] }),
-    n > 0 ? /* @__PURE__ */ r(qe, { children: Array.from({ length: n }).map((l, h) => /* @__PURE__ */ r(ke, {}, `card-skeleton-btn-${h}`)) }) : null
+    n > 0 ? /* @__PURE__ */ r(Ke, { children: Array.from({ length: n }).map((c, m) => /* @__PURE__ */ r(Me, {}, `card-skeleton-btn-${m}`)) }) : null
   ] });
 }
-function wn({ count: e = 8, minItemWidth: t = 120 }) {
+function xn({ count: e = 8, minItemWidth: t = 120 }) {
   return /* @__PURE__ */ r(
     me,
     {
       className: "picker-grid",
       style: { gridTemplateColumns: `repeat(auto-fill, minmax(${t}px, 1fr))` },
-      children: Array.from({ length: e }).map((n, a) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(lt, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ d(pe, { size: "sm", children: [
-        /* @__PURE__ */ r(Se, {}),
-        /* @__PURE__ */ r(we, { short: !0 })
+      children: Array.from({ length: e }).map((n, a) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(ht, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ d(fe, { size: "sm", children: [
+        /* @__PURE__ */ r(_e, {}),
+        /* @__PURE__ */ r(ye, { short: !0 })
       ] }) }) }, `picker-skeleton-${a}`))
     }
   );
 }
 export {
-  St as Alert,
-  Mt as AvatarBadge,
-  Xt as AvatarSkeleton,
-  xe as Button,
-  qe as ButtonRow,
-  ke as ButtonSkeleton,
-  Yt as CanvasSkeleton,
-  _t as CanvasStage,
-  bn as CardSkeleton,
-  nt as CardTitle,
-  Pt as Checkbox,
-  zt as Chip,
-  et as ChipSkeleton,
-  Ke as ChoiceCard,
-  Dt as ChoiceGroup,
-  Ft as ChoiceGroupSkeleton,
-  Nt as ConfirmDialog,
-  It as CoordGrid,
-  Gt as CoordInput,
-  Et as Divider,
-  Ot as EmptyState,
-  it as Field,
-  gt as FloatingPanel,
-  At as GeneratingOverlay,
-  Tt as IconButtonSkeleton,
-  $t as IconText,
-  Bt as ImageThumb,
-  Ht as Inline,
-  ot as Input,
-  Qe as InputSkeleton,
-  ct as ItemCard,
-  jt as ItemList,
-  Vt as Kbd,
-  st as Label,
-  we as LineSkeleton,
+  Pt as Alert,
+  Ct as AvatarBadge,
+  Ft as AvatarSkeleton,
+  ke as Button,
+  Ke as ButtonRow,
+  Me as ButtonSkeleton,
+  Wt as CanvasSkeleton,
+  zt as CanvasStage,
+  Nn as CardSkeleton,
+  st as CardTitle,
+  Tt as Checkbox,
+  Dt as Chip,
+  nt as ChipSkeleton,
+  Qe as ChoiceCard,
+  Gt as ChoiceGroup,
+  Et as ChoiceGroupSkeleton,
+  kt as ConfirmDialog,
+  Lt as CoordGrid,
+  Ot as CoordInput,
+  $t as Divider,
+  rt as Draggable,
+  Bt as DraggableSurface,
+  Vt as EmptyState,
+  lt as Field,
+  Nt as FloatingPanel,
+  jt as GeneratingOverlay,
+  It as IconButtonSkeleton,
+  Zt as IconText,
+  Ut as ImageThumb,
+  qt as Inline,
+  ut as Input,
+  tt as InputSkeleton,
+  dt as ItemCard,
+  Kt as ItemList,
+  Jt as Kbd,
+  ct as Label,
+  ye as LineSkeleton,
   me as List,
-  Zt as LoadingState,
-  je as Minimap,
-  _e as MutedText,
-  Ut as NumberField,
-  qt as OverlayIconButton,
-  Jt as PageCard,
-  Kt as PageShell,
-  Lt as PageTitle,
-  Qt as PanelCloseButton,
-  xt as PanelErrorBoundary,
-  fn as PanelFormSkeleton,
-  en as PanelSection,
-  tn as PanelTitle,
-  lt as PickerCard,
-  nn as PickerGrid,
-  wn as PickerGridSkeleton,
-  rn as Pill,
-  at as SectionDescription,
-  rt as SectionTitle,
-  an as Select,
-  Rt as SelectSkeleton,
-  G as Skeleton,
-  sn as Slider,
-  on as SplitLayout,
-  pe as Stack,
-  cn as Surface,
-  Ct as Switch,
-  ht as TagRow,
-  ln as Textarea,
-  Wt as TextareaSkeleton,
-  un as ThemeToggle,
-  Se as ThumbSkeleton,
-  mn as TitleRow,
-  Me as TitleSkeleton,
-  dn as Toolbar,
-  hn as Tooltip,
-  pn as VerticalToolbar,
-  ue as WHITEBOARD_GRID,
-  wt as WhiteboardShell,
-  Ve as ZoomBar,
-  yt as belowPanel,
-  o as cn,
-  ge as computeWhiteboardFit,
-  He as computeWhiteboardRectFocus,
-  ce as snapToWhiteboardGrid,
-  vt as usePanelRect,
-  kt as useWhiteboardLayout,
-  b as useWhiteboardStore
+  Qt as LoadingState,
+  Ue as Minimap,
+  Ce as MutedText,
+  en as NumberField,
+  tn as OverlayIconButton,
+  rn as PageCard,
+  nn as PageShell,
+  Ht as PageTitle,
+  an as PanelCloseButton,
+  Mt as PanelErrorBoundary,
+  vn as PanelFormSkeleton,
+  sn as PanelSection,
+  on as PanelTitle,
+  ht as PickerCard,
+  cn as PickerGrid,
+  xn as PickerGridSkeleton,
+  ln as Pill,
+  it as SectionDescription,
+  ot as SectionTitle,
+  un as Select,
+  Xt as SelectSkeleton,
+  A as Skeleton,
+  dn as Slider,
+  hn as SplitLayout,
+  fe as Stack,
+  mn as Surface,
+  Rt as Switch,
+  pt as TagRow,
+  fn as Textarea,
+  Yt as TextareaSkeleton,
+  pn as ThemeToggle,
+  _e as ThumbSkeleton,
+  wn as TitleRow,
+  Pe as TitleSkeleton,
+  bn as Toolbar,
+  gn as Tooltip,
+  yn as VerticalToolbar,
+  G as WHITEBOARD_GRID,
+  vt as WhiteboardShell,
+  Ze as ZoomBar,
+  St as belowPanel,
+  i as cn,
+  ve as computeWhiteboardFit,
+  je as computeWhiteboardRectFocus,
+  At as resetDraggables,
+  le as snapToWhiteboardGrid,
+  xt as usePanelRect,
+  _t as useWhiteboardLayout,
+  g as useWhiteboardStore
 };