@objectifthunes/whiteboard 0.3.0 → 0.5.0

package/dist/index.js

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