@objectifthunes/whiteboard 0.2.5 → 0.2.7

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as n, jsxs as d, Fragment as re } from "react/jsx-runtime";
-import { useEffect as Y, useRef as S, useCallback as B, memo as Re, useId as We, useState as Se, useLayoutEffect as Xe, Component as Ye, useMemo as ye, forwardRef as me, createElement as T } from "react";
+import { useEffect as Y, useRef as k, useCallback as B, memo as Re, useId as We, useState as Me, useLayoutEffect as Xe, Component as Ye, useMemo as ye, forwardRef as me, createElement as T } from "react";
 import { create as De } from "zustand";
 import { createPortal as Ie } from "react-dom";
 const D = (e = 14) => ({
@@ -24,7 +24,6 @@ function Ge({ size: e, ...t }) {
 }
 function Le({ size: e, ...t }) {
   return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("path", { d: "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z", fill: "none", stroke: "none" }),
     /* @__PURE__ */ n("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
     /* @__PURE__ */ n("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
     /* @__PURE__ */ n("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
@@ -69,7 +68,7 @@ function Be({ size: e, ...t }) {
 function He({ size: e, ...t }) {
   return /* @__PURE__ */ n("svg", { ...D(e), ...t, children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) });
 }
-function ke({ size: e, ...t }) {
+function Pe({ size: e, ...t }) {
   return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
     /* @__PURE__ */ n("path", { d: "M18 6 6 18" }),
     /* @__PURE__ */ n("path", { d: "m6 6 12 12" })
@@ -95,17 +94,17 @@ const he = 20;
 function ue(e) {
   return Math.round(e / he) * he;
 }
-function Ne(e, t, r = 60) {
+function Se(e, t, r = 60) {
   if (e.size === 0) return null;
   let s = 1 / 0, a = 1 / 0, u = -1 / 0, m = -1 / 0;
   for (const v of e.values())
     s = Math.min(s, v.x), a = Math.min(a, v.y), u = Math.max(u, v.x + v.width), m = Math.max(m, v.y + v.height);
-  const f = u - s + r * 2, p = m - a + r * 2, b = t.width || window.innerWidth, h = t.height || window.innerHeight, k = Math.min(b / f, h / p, 1.5), M = (s + u) / 2, _ = (a + m) / 2;
+  const f = u - s + r * 2, p = m - a + r * 2, w = t.width || window.innerWidth, h = t.height || window.innerHeight, N = Math.min(w / f, h / p, 1.5), M = (s + u) / 2, P = (a + m) / 2;
   return {
-    scale: Math.min(3, Math.max(0.2, k)),
+    scale: Math.min(3, Math.max(0.2, N)),
     offset: {
-      x: b / 2 - M * k,
-      y: h / 2 - _ * k
+      x: w / 2 - M * N,
+      y: h / 2 - P * N
     }
   };
 }
@@ -114,16 +113,16 @@ function je(e, t, r = 40, s = 1.5) {
     (a - r * 2) / m,
     (u - r * 2) / f,
     s
-  ), b = Math.min(3, Math.max(0.2, p));
+  ), w = Math.min(3, Math.max(0.2, p));
   return {
-    scale: b,
+    scale: w,
     offset: {
-      x: a / 2 - (e.x + m / 2) * b,
-      y: u / 2 - (e.y + f / 2) * b
+      x: a / 2 - (e.x + m / 2) * w,
+      y: u / 2 - (e.y + f / 2) * w
     }
   };
 }
-const g = De((e, t) => ({
+const b = De((e, t) => ({
   offset: { x: 0, y: 0 },
   scale: 1,
   viewportSize: { width: 0, height: 0 },
@@ -149,7 +148,7 @@ const g = De((e, t) => ({
     t().resetFns.delete(r);
   },
   fitToContent: () => {
-    const { panels: r, viewportSize: s } = t(), a = Ne(r, s);
+    const { panels: r, viewportSize: s } = t(), a = Se(r, s);
     a && e({ scale: a.scale, offset: a.offset });
   },
   focusPanel: (r, s) => {
@@ -164,7 +163,7 @@ const g = De((e, t) => ({
   resetWidgets: () => {
     for (const s of t().resetFns.values()) s();
     const r = (s = 0) => {
-      const { panels: a, viewportSize: u } = t(), m = Ne(a, u);
+      const { panels: a, viewportSize: u } = t(), m = Se(a, u);
       if (m) {
         e({ scale: m.scale, offset: m.offset });
         return;
@@ -184,16 +183,16 @@ const g = De((e, t) => ({
   })
 }));
 function Ue({ extraActions: e }) {
-  const t = g((h) => h.scale), r = g((h) => h.viewportSize), s = g((h) => h.snapToGrid), a = g((h) => h.setScale), u = g((h) => h.setOffset), m = g((h) => h.setSnapToGrid), f = g((h) => h.fitToContent), p = g((h) => h.resetWidgets);
+  const t = b((h) => h.scale), r = b((h) => h.viewportSize), s = b((h) => h.snapToGrid), a = b((h) => h.setScale), u = b((h) => h.setOffset), m = b((h) => h.setSnapToGrid), f = b((h) => h.fitToContent), p = b((h) => h.resetWidgets);
   Y(() => {
     s && window.dispatchEvent(new Event("whiteboard-snap-now"));
   }, [s]);
-  const b = (h) => {
-    const k = Math.min(3, Math.max(0.2, h)), M = k / t, _ = (r.width || window.innerWidth) / 2, v = (r.height || window.innerHeight) / 2;
-    u((P) => ({
-      x: _ - (_ - P.x) * M,
-      y: v - (v - P.y) * M
-    })), a(k);
+  const w = (h) => {
+    const N = Math.min(3, Math.max(0.2, h)), M = N / t, P = (r.width || window.innerWidth) / 2, v = (r.height || window.innerHeight) / 2;
+    u((z) => ({
+      x: P - (P - z.x) * M,
+      y: v - (v - z.y) * M
+    })), a(N);
   };
   return /* @__PURE__ */ d(
     "div",
@@ -202,12 +201,12 @@ function Ue({ extraActions: e }) {
       onPointerDown: (h) => h.stopPropagation(),
       onWheel: (h) => h.stopPropagation(),
       children: [
-        /* @__PURE__ */ n("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__ */ n(Fe, { size: 14 }) }),
+        /* @__PURE__ */ n("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__ */ n(Fe, { size: 14 }) }),
         /* @__PURE__ */ d("span", { className: "zoom-bar__value", children: [
           Math.round(t * 100),
           "%"
         ] }),
-        /* @__PURE__ */ n("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__ */ n(Ge, { size: 14 }) }),
+        /* @__PURE__ */ n("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__ */ n(Ge, { size: 14 }) }),
         /* @__PURE__ */ n("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__ */ n(Le, { size: 14 }) }),
         /* @__PURE__ */ n("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__ */ n(Ee, { size: 14 }) }),
         /* @__PURE__ */ n(
@@ -226,51 +225,51 @@ function Ue({ extraActions: e }) {
     }
   );
 }
-const ee = 200, te = 150, de = 40, xe = 1;
+const ee = 200, te = 150, de = 40, ke = 1;
 function Ze({ loading: e = !1 }) {
-  g((i) => i.registryVersion);
-  const t = g((i) => i.offset), r = g((i) => i.scale), s = g((i) => i.viewportSize), a = g((i) => i.panels), u = g((i) => i.setOffset), m = g((i) => i.setScale), f = g((i) => i.focusPanel), p = S(null), b = S(!1), h = S(null), M = Array.from(a.entries()).filter(([, i]) => Number.isFinite(i.width) && Number.isFinite(i.height)), _ = M.map(([, i]) => i);
-  if (e || _.length === 0)
+  b((i) => i.registryVersion);
+  const t = b((i) => i.offset), r = b((i) => i.scale), s = b((i) => i.viewportSize), a = b((i) => i.panels), u = b((i) => i.setOffset), m = b((i) => i.setScale), f = b((i) => i.focusPanel), p = k(null), w = k(!1), h = k(null), M = Array.from(a.entries()).filter(([, i]) => Number.isFinite(i.width) && Number.isFinite(i.height)), P = M.map(([, i]) => i);
+  if (e || P.length === 0)
     return /* @__PURE__ */ n("div", { className: "minimap minimap--loading", style: { width: ee, height: te }, children: /* @__PURE__ */ n("div", { className: "minimap__loading", children: /* @__PURE__ */ n(pe, { size: 14, className: "icon-spin" }) }) });
-  const v = s.width || window.innerWidth, P = s.height || window.innerHeight, L = v / r, H = P / r, $ = -t.x / r, V = -t.y / r;
+  const v = s.width || window.innerWidth, z = s.height || window.innerHeight, L = v / r, H = z / r, $ = -t.x / r, V = -t.y / r;
   let I = 1 / 0, c = 1 / 0, R = -1 / 0, W = -1 / 0;
-  for (const i of _)
+  for (const i of P)
     I = Math.min(I, i.x), c = Math.min(c, i.y), R = Math.max(R, i.x + i.width), W = Math.max(W, i.y + i.height);
   I -= de, c -= de, R += de, W += de;
-  const z = Math.max(xe, R - I), O = Math.max(xe, W - c), C = Math.min(ee / z, te / O), E = z * C, U = O * C, Z = (ee - E) / 2, X = (te - U) / 2, q = (i) => Z + (i - I) * C, j = (i) => X + (i - c) * C, Q = (i, y) => {
+  const _ = Math.max(ke, R - I), O = Math.max(ke, W - c), C = Math.min(ee / _, te / O), E = _ * C, Z = O * C, q = (ee - E) / 2, X = (te - Z) / 2, K = (i) => q + (i - I) * C, j = (i) => X + (i - c) * C, Q = (i, y) => {
     if (!p.current) return;
-    const x = p.current.getBoundingClientRect(), F = Math.min(ee, Math.max(0, i - x.left)), A = Math.min(te, Math.max(0, y - x.top)), ae = Math.min(E + Z, Math.max(Z, F)), ie = Math.min(U + X, Math.max(X, A)), oe = (ae - Z) / C + I, ce = (ie - X) / C + c;
+    const S = p.current.getBoundingClientRect(), F = Math.min(ee, Math.max(0, i - S.left)), A = Math.min(te, Math.max(0, y - S.top)), ae = Math.min(E + q, Math.max(q, F)), ie = Math.min(Z + X, Math.max(X, A)), oe = (ae - q) / C + I, ce = (ie - X) / C + c;
     return { worldX: oe, worldY: ce };
-  }, K = (i, y, x) => {
-    const F = Math.min(3, Math.max(0.2, x));
+  }, J = (i, y, S) => {
+    const F = Math.min(3, Math.max(0.2, S));
     m(F), u({
       x: v / 2 - i * F,
-      y: P / 2 - y * F
+      y: z / 2 - y * F
     });
   }, se = (i, y) => {
-    const x = Q(i, y);
-    x && K(x.worldX, x.worldY, r);
-  }, we = (i) => {
-    i.stopPropagation(), i.preventDefault(), b.current = !0, i.currentTarget.setPointerCapture(i.pointerId), se(i.clientX, i.clientY);
+    const S = Q(i, y);
+    S && J(S.worldX, S.worldY, r);
+  }, ge = (i) => {
+    i.stopPropagation(), i.preventDefault(), w.current = !0, i.currentTarget.setPointerCapture(i.pointerId), se(i.clientX, i.clientY);
   }, o = (i) => {
-    b.current && se(i.clientX, i.clientY);
-  }, w = () => {
-    b.current = !1;
+    w.current && se(i.clientX, i.clientY);
+  }, g = () => {
+    w.current = !1;
   };
   return /* @__PURE__ */ d(
     "div",
     {
       ref: p,
-      onPointerDown: we,
+      onPointerDown: ge,
       onPointerMove: o,
-      onPointerUp: w,
-      onPointerCancel: w,
+      onPointerUp: g,
+      onPointerCancel: g,
       onWheel: (i) => {
         i.preventDefault(), i.stopPropagation();
         const y = Q(i.clientX, i.clientY);
         if (!y) return;
-        const x = i.deltaY > 0 ? 0.9 : 1.1;
-        K(y.worldX, y.worldY, r * x);
+        const S = i.deltaY > 0 ? 0.9 : 1.1;
+        J(y.worldX, y.worldY, r * S);
       },
       className: "minimap",
       style: {
@@ -282,23 +281,23 @@ function Ze({ loading: e = !1 }) {
           "div",
           {
             className: "minimap__panel",
-            onPointerDown: (x) => {
-              x.stopPropagation();
+            onPointerDown: (S) => {
+              S.stopPropagation();
             },
-            onPointerUp: (x) => {
-              x.stopPropagation();
+            onPointerUp: (S) => {
+              S.stopPropagation();
               const F = Date.now(), A = h.current;
               if (A && A.id === i && F - A.time < 300) {
-                x.preventDefault(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale }), h.current = null;
+                S.preventDefault(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale }), h.current = null;
                 return;
               }
               h.current = { id: i, time: F };
             },
-            onDoubleClick: (x) => {
-              x.preventDefault(), x.stopPropagation(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale });
+            onDoubleClick: (S) => {
+              S.preventDefault(), S.stopPropagation(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale });
             },
             style: {
-              left: q(y.x),
+              left: K(y.x),
               top: j(y.y),
               width: Math.max(1, y.width * C),
               height: Math.max(1, y.height * C)
@@ -311,7 +310,7 @@ function Ze({ loading: e = !1 }) {
           {
             className: "minimap__viewport",
             style: {
-              left: q($),
+              left: K($),
               top: j(V),
               width: L * C,
               height: H * C
@@ -323,19 +322,19 @@ function Ze({ loading: e = !1 }) {
   );
 }
 function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraActions: s }) {
-  const a = g((c) => c.offset), u = g((c) => c.scale), m = g((c) => c.registryVersion), f = g((c) => c.viewportSize), p = g((c) => c.setOffset), b = g((c) => c.setScale), h = g((c) => c.setViewportSize), k = S(null), M = S(!1), _ = S({ x: 0, y: 0 }), v = S(null), P = S(u), L = S(!1);
+  const a = b((c) => c.offset), u = b((c) => c.scale), m = b((c) => c.registryVersion), f = b((c) => c.viewportSize), p = b((c) => c.setOffset), w = b((c) => c.setScale), h = b((c) => c.setViewportSize), N = k(null), M = k(!1), P = k({ x: 0, y: 0 }), v = k(null), z = k(u), L = k(!1);
   Y(() => () => {
-    g.getState().resetSession();
+    b.getState().resetSession();
   }, []), Y(() => {
-    P.current = u;
+    z.current = u;
   }, [u]), Y(() => {
-    const c = k.current;
+    const c = N.current;
     if (!c) return;
     const R = () => {
-      const z = c.getBoundingClientRect();
+      const _ = c.getBoundingClientRect();
       h({
-        width: Math.max(0, z.width),
-        height: Math.max(0, z.height)
+        width: Math.max(0, _.width),
+        height: Math.max(0, _.height)
       });
     };
     if (R(), typeof ResizeObserver > "u") return;
@@ -343,17 +342,17 @@ function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraAct
     return W.observe(c), () => W.disconnect();
   }, [h]), Y(() => {
     if (L.current) return;
-    const { panels: c } = g.getState();
+    const { panels: c } = b.getState();
     c.size === 0 || f.width <= 0 || f.height <= 0 || (L.current = !0, requestAnimationFrame(() => {
-      g.getState().fitToContent();
+      b.getState().fitToContent();
     }));
   }, [m, f]);
   const H = B((c) => {
-    c.target === c.currentTarget && (c.button === 0 || c.button === 1) && (M.current = !0, v.current = c.pointerId, _.current = { x: c.clientX, y: c.clientY }, c.currentTarget.setPointerCapture(c.pointerId), c.preventDefault());
+    c.target === c.currentTarget && (c.button === 0 || c.button === 1) && (M.current = !0, v.current = c.pointerId, P.current = { x: c.clientX, y: c.clientY }, c.currentTarget.setPointerCapture(c.pointerId), c.preventDefault());
   }, []), $ = B((c) => {
     if (!M.current || v.current !== c.pointerId) return;
-    const R = c.movementX ?? c.clientX - _.current.x, W = c.movementY ?? c.clientY - _.current.y;
-    p((z) => ({ x: z.x + R, y: z.y + W })), _.current = { x: c.clientX, y: c.clientY };
+    const R = c.movementX ?? c.clientX - P.current.x, W = c.movementY ?? c.clientY - P.current.y;
+    p((_) => ({ x: _.x + R, y: _.y + W })), P.current = { x: c.clientX, y: c.clientY };
   }, [p]), V = B((c) => {
     if (v.current !== null)
       try {
@@ -362,17 +361,17 @@ function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraAct
       }
     M.current = !1, v.current = null;
   }, []), I = B((c) => {
-    const R = P.current, W = c.currentTarget.getBoundingClientRect(), z = { x: c.clientX - W.left, y: c.clientY - W.top }, O = Math.min(3, Math.max(0.2, R * (c.deltaY > 0 ? 0.9 : 1.1))), C = O / R;
+    const R = z.current, W = c.currentTarget.getBoundingClientRect(), _ = { x: c.clientX - W.left, y: c.clientY - W.top }, O = Math.min(3, Math.max(0.2, R * (c.deltaY > 0 ? 0.9 : 1.1))), C = O / R;
     p((E) => ({
-      x: z.x - (z.x - E.x) * C,
-      y: z.y - (z.y - E.y) * C
-    })), b(O);
-  }, [p, b]);
+      x: _.x - (_.x - E.x) * C,
+      y: _.y - (_.y - E.y) * C
+    })), w(O);
+  }, [p, w]);
   return /* @__PURE__ */ d(re, { children: [
     /* @__PURE__ */ n(
       "div",
       {
-        ref: k,
+        ref: N,
         onPointerDown: H,
         onPointerMove: $,
         onPointerUp: V,
@@ -406,78 +405,78 @@ const St = Re(function({
   focusable: m,
   focusPadding: f = 40,
   focusMaxScale: p = 1.5,
-  headerActions: b,
+  headerActions: w,
   children: h
 }) {
-  const k = We(), [M, _] = Se(r), v = S(!1), P = S(M), L = S(null), H = S(null), $ = g((o) => o.scale), V = g((o) => o.snapToGrid), I = g((o) => o.snapGridSize), c = g((o) => o.register), R = g((o) => o.unregister), W = g((o) => o.registerReset), z = g((o) => o.unregisterReset), O = g((o) => o.focusPanel), C = S($), E = S(!1), U = S(20), Z = S(r), X = S(null), q = S(null);
+  const N = We(), [M, P] = Me(r), v = k(!1), z = k(M), L = k(null), H = k(null), $ = b((o) => o.scale), V = b((o) => o.snapToGrid), I = b((o) => o.snapGridSize), c = b((o) => o.register), R = b((o) => o.unregister), W = b((o) => o.registerReset), _ = b((o) => o.unregisterReset), O = b((o) => o.focusPanel), C = k($), E = k(!1), Z = k(20), q = k(r), X = k(null), K = k(null);
   Y(() => {
     C.current = $;
   }, [$]), Y(() => {
-    E.current = V, U.current = I;
+    E.current = V, Z.current = I;
   }, [V, I]), Y(() => {
     const o = () => {
-      const w = U.current;
-      _((N) => {
+      const g = Z.current;
+      P((x) => {
         const i = {
-          x: Math.round(N.x / w) * w,
-          y: Math.round(N.y / w) * w
+          x: Math.round(x.x / g) * g,
+          y: Math.round(x.y / g) * g
         };
-        return i.x === N.x && i.y === N.y ? N : i;
+        return i.x === x.x && i.y === x.y ? x : i;
       });
     };
     return window.addEventListener("whiteboard-snap-now", o), () => window.removeEventListener("whiteboard-snap-now", o);
   }, []), Y(() => {
-    P.current = M;
+    z.current = M;
   }, [M]);
   const j = B(() => {
     const o = L.current;
     if (!o) return;
-    const w = {
-      x: P.current.x,
-      y: P.current.y,
+    const g = {
+      x: z.current.x,
+      y: z.current.y,
       width: o.offsetWidth,
       height: o.offsetHeight,
       focusPadding: f,
       focusMaxScale: p
-    }, N = H.current;
-    N && N.x === w.x && N.y === w.y && N.width === w.width && N.height === w.height && N.focusPadding === w.focusPadding && N.focusMaxScale === w.focusMaxScale || (H.current = w, c(k, w), u && (u.current = w));
-  }, [p, f, k, c, u]), Q = B(() => {
+    }, x = H.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 || (H.current = g, c(N, g), u && (u.current = g));
+  }, [p, f, N, c, u]), Q = B(() => {
     const o = L.current;
     return o ? {
-      x: P.current.x,
-      y: P.current.y,
+      x: z.current.x,
+      y: z.current.y,
       width: o.offsetWidth,
       height: o.offsetHeight,
       focusPadding: f,
       focusMaxScale: p
     } : null;
-  }, [p, f]), K = B(() => {
+  }, [p, f]), J = B(() => {
     const o = Q();
     o && O(o, { padding: f, maxScale: p });
   }, [O, f, p, Q]);
-  Y(() => (W(k, () => _(Z.current)), () => {
+  Y(() => (W(N, () => P(q.current)), () => {
     var o;
-    (o = X.current) == null || o.call(X), R(k), z(k), H.current = null;
-  }), [k, W, R, z]), Xe(() => {
+    (o = X.current) == null || o.call(X), R(N), _(N), H.current = null;
+  }), [N, W, R, _]), Xe(() => {
     j();
   }, [M.x, M.y, s, j]), Y(() => {
     const o = L.current;
     if (!o || typeof ResizeObserver > "u") return;
-    const w = new ResizeObserver(() => {
+    const g = new ResizeObserver(() => {
       j();
     });
-    return w.observe(o), () => w.disconnect();
+    return g.observe(o), () => g.disconnect();
   }, [j]);
   const se = B((o) => {
     var ae;
     if (o.button !== 0) return;
     v.current = !0;
-    const w = o.clientX, N = o.clientY, i = P.current.x, y = P.current.y, x = C.current;
+    const g = o.clientX, x = o.clientY, i = z.current.x, y = z.current.y, S = C.current;
     o.preventDefault(), o.stopPropagation(), o.target.setPointerCapture(o.pointerId);
     const F = (ie) => {
       if (!v.current) return;
-      const oe = i + (ie.clientX - w) / x, ce = y + (ie.clientY - N) / x, le = U.current, Ce = E.current ? Math.round(oe / le) * le : oe, Te = E.current ? Math.round(ce / le) * le : ce;
-      _({
+      const oe = i + (ie.clientX - g) / S, ce = y + (ie.clientY - x) / S, le = Z.current, Ce = E.current ? Math.round(oe / le) * le : oe, Te = E.current ? Math.round(ce / le) * le : ce;
+      P({
         x: Ce,
         y: Te
       });
@@ -485,40 +484,40 @@ const St = Re(function({
       v.current = !1, window.removeEventListener("pointermove", F), window.removeEventListener("pointerup", A), X.current = null;
     };
     (ae = X.current) == null || ae.call(X), window.addEventListener("pointermove", F), window.addEventListener("pointerup", A), X.current = A;
-  }, []), we = a ? `floating-panel ${a}` : "floating-panel";
+  }, []), ge = a ? `floating-panel ${a}` : "floating-panel";
   return /* @__PURE__ */ d(
     "div",
     {
       ref: L,
-      className: we,
+      className: ge,
       style: { left: M.x, top: M.y, width: s },
       onPointerDown: (o) => o.stopPropagation(),
       onPointerUp: (o) => {
         if (v.current) return;
-        const w = Date.now(), N = q.current;
-        if (N && w - N.time < 300) {
-          const i = o.clientX - N.x, y = o.clientY - N.y;
+        const g = Date.now(), x = K.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;
+            o.stopPropagation(), J(), K.current = null;
             return;
           }
         }
-        q.current = { time: w, x: o.clientX, y: o.clientY };
+        K.current = { time: g, x: o.clientX, y: o.clientY };
       },
       onWheel: (o) => o.stopPropagation(),
       onDoubleClick: (o) => {
-        o.stopPropagation(), K();
+        o.stopPropagation(), J();
       },
       children: [
         /* @__PURE__ */ d("div", { onPointerDown: se, className: "floating-panel__header", children: [
           /* @__PURE__ */ n("strong", { className: "floating-panel__title", children: t }),
-          b,
+          w,
           m && /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               className: "wb-btn wb-btn--secondary wb-btn--icon-only floating-panel__focus",
-              onClick: K,
+              onClick: J,
               onPointerDown: (o) => o.stopPropagation(),
               title: "Focus on this panel",
               "aria-label": "Focus on this panel",
@@ -532,27 +531,28 @@ const St = Re(function({
   );
 });
 function kt(e) {
-  return S({ ...e, width: 0, height: 0 });
+  return k({ ...e, width: 0, height: 0 });
 }
 function Mt(e, t = he) {
   return { x: e.x, y: e.y + e.height + t };
 }
-function _t({
+function Pt({
   open: e,
   title: t,
   message: r,
   onConfirm: s,
   onCancel: a,
   confirmLabel: u = "Confirm",
-  loading: m,
-  error: f
+  loadingLabel: m,
+  loading: f,
+  error: p
 }) {
   return Y(() => {
     if (!e) return;
-    const p = (b) => {
-      b.key === "Escape" && a();
+    const w = (h) => {
+      h.key === "Escape" && a();
     };
-    return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
+    return window.addEventListener("keydown", w), () => window.removeEventListener("keydown", w);
   }, [e, a]), !e || typeof document > "u" ? null : Ie(
     /* @__PURE__ */ n("div", { className: "confirm-modal-overlay", onMouseDown: a, children: /* @__PURE__ */ d(
       "div",
@@ -561,20 +561,20 @@ function _t({
         role: "dialog",
         "aria-modal": "true",
         "aria-label": t,
-        onMouseDown: (p) => p.stopPropagation(),
+        onMouseDown: (w) => w.stopPropagation(),
         children: [
           /* @__PURE__ */ d("div", { className: "confirm-modal__header", children: [
             /* @__PURE__ */ d("span", { className: "confirm-modal__title", children: [
               /* @__PURE__ */ n(Be, { size: 16 }),
               t
             ] }),
-            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: a, "aria-label": "Close dialog", children: /* @__PURE__ */ n(ke, { size: 14 }) })
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: a, "aria-label": "Close dialog", children: /* @__PURE__ */ n(Pe, { size: 14 }) })
           ] }),
           /* @__PURE__ */ n("p", { className: "confirm-modal__message", children: r }),
-          f && /* @__PURE__ */ n("div", { className: "wb-alert wb-alert--error", children: f }),
+          p && /* @__PURE__ */ n("div", { className: "wb-alert wb-alert--error", children: p }),
           /* @__PURE__ */ d("div", { className: "wb-btn-row", children: [
             /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: a, children: "Cancel" }),
-            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: s, disabled: m, children: m ? "Deleting..." : /* @__PURE__ */ d(re, { children: [
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: s, disabled: f, children: f ? m ?? `${u}…` : /* @__PURE__ */ d(re, { children: [
               /* @__PURE__ */ n(He, { size: 14 }),
               u
             ] }) })
@@ -585,7 +585,7 @@ function _t({
     document.body
   );
 }
-class Pt extends Ye {
+class zt extends Ye {
   constructor() {
     super(...arguments), this.state = { error: null };
   }
@@ -607,7 +607,7 @@ class Pt extends Ye {
     ] }) : this.props.children;
   }
 }
-function zt({
+function _t({
   widths: e,
   startX: t = 20,
   y: r = 40,
@@ -615,8 +615,8 @@ function zt({
 }) {
   const a = ye(() => {
     const f = {};
-    for (const [p, b] of Object.entries(e))
-      f[p] = ue(b);
+    for (const [p, w] of Object.entries(e))
+      f[p] = ue(w);
     return f;
   }, [e]), u = ye(
     () => ({
@@ -628,8 +628,8 @@ function zt({
   ), m = ye(() => {
     const f = {};
     let p = u.startX;
-    for (const [b, h] of Object.entries(a))
-      f[b] = { x: p, y: u.y }, p += h + u.gap;
+    for (const [w, h] of Object.entries(a))
+      f[w] = { x: p, y: u.y }, p += h + u.gap;
     return f;
   }, [u.gap, u.startX, u.y, a]);
   return { layout: u, panelWidth: a, positions: m };
@@ -638,10 +638,10 @@ function l(...e) {
   return e.filter(Boolean).join(" ");
 }
 const qe = {
-  error: "status-error",
-  muted: "text-sm text-muted",
-  info: "ui-alert ui-alert--info",
-  success: "ui-alert ui-alert--success"
+  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 Ct({ tone: e = "info", className: t, ...r }) {
   return /* @__PURE__ */ n("p", { className: l(qe[e], t), ...r });
@@ -651,30 +651,32 @@ function Tt({ className: e, ...t }) {
 }
 const Ke = {
   primary: "",
-  secondary: "secondary-btn",
-  danger: "danger-btn"
-}, Me = me(function({
+  secondary: "wb-btn--secondary",
+  danger: "wb-btn--danger"
+}, ze = me(function({
   variant: t = "primary",
   fullWidth: r = !1,
   iconOnly: s = !1,
   loading: a = !1,
-  disabled: u,
-  className: m,
-  children: f,
-  loadingText: p,
-  ...b
-}, h) {
+  type: u = "button",
+  disabled: m,
+  className: f,
+  children: p,
+  loadingText: w,
+  ...h
+}, N) {
   return /* @__PURE__ */ n(
     "button",
     {
-      ref: h,
-      className: l(Ke[t], r && "full-width-btn", s && "icon-only-btn", m),
-      disabled: u || a,
-      ...b,
+      ref: N,
+      type: u,
+      className: l("wb-btn", Ke[t], r && "wb-btn--full-width", s && "wb-btn--icon-only", f),
+      disabled: m || a,
+      ...h,
       children: a ? /* @__PURE__ */ d(re, { children: [
         /* @__PURE__ */ n(pe, { size: 14, className: "icon-spin" }),
-        p || f
-      ] }) : f
+        w || p
+      ] }) : p
     }
   );
 });
@@ -742,7 +744,7 @@ function Yt(e) {
   const { className: t, ...r } = e;
   return /* @__PURE__ */ n(G, { className: l("skeleton-textarea", t), ...r });
 }
-function _e(e) {
+function Ne(e) {
   const { className: t, ...r } = e;
   return /* @__PURE__ */ n(G, { className: l("skeleton-thumb", t), ...r });
 }
@@ -750,11 +752,11 @@ function ne(e) {
   const { className: t, ...r } = e;
   return /* @__PURE__ */ n(G, { radius: "pill", className: l("skeleton-chip", t), ...r });
 }
-function ge(e) {
+function be(e) {
   const { className: t, ...r } = e;
   return /* @__PURE__ */ n(G, { className: l("skeleton-title", t), ...r });
 }
-function be({ short: e = !1, className: t, ...r }) {
+function we({ short: e = !1, className: t, ...r }) {
   return /* @__PURE__ */ n(G, { className: l("skeleton-line", e && "skeleton-line--short", t), ...r });
 }
 function rt(e) {
@@ -787,8 +789,8 @@ function It({
 }
 function Ft({ count: e = 4, className: t, withDescription: r = !1 }) {
   return /* @__PURE__ */ n(fe, { className: l("choice-list", t), "aria-hidden": !0, children: Array.from({ length: e }).map((s, a) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ d("div", { className: "choice-card", children: [
-    /* @__PURE__ */ n(ge, { className: l("skeleton-title--sm", !r && "skeleton-choice-label") }),
-    r ? /* @__PURE__ */ n(be, { short: !0 }) : null
+    /* @__PURE__ */ n(be, { className: l("skeleton-title--sm", !r && "skeleton-choice-label") }),
+    r ? /* @__PURE__ */ n(we, { short: !0 }) : null
   ] }) }, `choice-skeleton-${a}`)) });
 }
 function Gt({ className: e, ...t }) {
@@ -801,7 +803,7 @@ function Lt({ axis: e, className: t, ...r }) {
     /* @__PURE__ */ n("input", { type: "number", step: "0.01", ...r })
   ] });
 }
-function J({
+function U({
   as: e,
   size: t = "md",
   className: r,
@@ -829,7 +831,7 @@ function Et({ as: e = "h3", className: t, ...r }) {
     ...r
   });
 }
-function Pe({ as: e = "p", size: t = "sm", className: r, ...s }) {
+function _e({ as: e = "p", size: t = "sm", className: r, ...s }) {
   return T(e, {
     className: l(st[t], "text-muted", r),
     ...s
@@ -854,9 +856,9 @@ function ot({ as: e = "p", className: t, ...r }) {
   });
 }
 function Ot({ title: e, description: t, action: r }) {
-  return /* @__PURE__ */ d(J, { size: "sm", children: [
+  return /* @__PURE__ */ d(U, { size: "sm", children: [
     /* @__PURE__ */ n(at, { children: e }),
-    t ? /* @__PURE__ */ n(Pe, { children: t }) : null,
+    t ? /* @__PURE__ */ n(_e, { children: t }) : null,
     r
   ] });
 }
@@ -883,7 +885,7 @@ function Bt({
     /* @__PURE__ */ d(re, { children: [
       t ? /* @__PURE__ */ n(ct, { htmlFor: r, children: t }) : null,
       f,
-      s ? /* @__PURE__ */ n(Pe, { size: "xs", children: s }) : null,
+      s ? /* @__PURE__ */ n(_e, { size: "xs", children: s }) : null,
       a ? /* @__PURE__ */ n("p", { className: "field-error", children: a }) : null
     ] })
   );
@@ -920,8 +922,8 @@ function Vt({
   className: m,
   ...f
 }) {
-  const [p, b] = Se(null), h = !!(e && p === e), k = l("image-thumb", `image-thumb--${s}`, `image-thumb--fit-${a}`, m);
-  return /* @__PURE__ */ n("div", { className: k, ...f, children: e && !h ? /* @__PURE__ */ n(
+  const [p, w] = Me(null), h = !!(e && p === e), N = l("image-thumb", `image-thumb--${s}`, `image-thumb--fit-${a}`, m);
+  return /* @__PURE__ */ n("div", { className: N, ...f, children: e && !h ? /* @__PURE__ */ n(
     "img",
     {
       src: e,
@@ -929,7 +931,7 @@ function Vt({
       className: "image-thumb__img",
       style: { objectFit: a, objectPosition: "center" },
       onError: () => {
-        b(e), u == null || u();
+        w(e), u == null || u();
       }
     }
   ) : /* @__PURE__ */ n("span", { className: "image-thumb__placeholder", children: r }) });
@@ -948,7 +950,7 @@ function lt({
 const jt = me(function({ className: t, ...r }, s) {
   return /* @__PURE__ */ n("input", { ref: s, className: l(t), ...r });
 });
-function ze({ as: e = "div", className: t, ...r }) {
+function xe({ as: e = "div", className: t, ...r }) {
   return T(e, {
     className: l("item-card", t),
     ...r
@@ -975,7 +977,7 @@ function Zt({
   ...u
 }) {
   return /* @__PURE__ */ n(
-    Me,
+    ze,
     {
       variant: "secondary",
       iconOnly: !0,
@@ -1000,8 +1002,8 @@ function Kt({ children: e, className: t, ...r }) {
   return /* @__PURE__ */ n("div", { className: l("page-card", t), ...r, children: e });
 }
 function Jt({ onClick: e, label: t = "Close" }) {
-  return /* @__PURE__ */ d(Me, { variant: "secondary", className: "panel-close-btn", onClick: e, children: [
-    /* @__PURE__ */ n(ke, { size: 14 }),
+  return /* @__PURE__ */ d(ze, { variant: "secondary", className: "panel-close-btn", onClick: e, children: [
+    /* @__PURE__ */ n(Pe, { size: 14 }),
     t
   ] });
 }
@@ -1054,14 +1056,24 @@ const rn = me(function({ className: t, ...r }, s) {
 function ft({ variant: e, className: t, ...r }) {
   return /* @__PURE__ */ n("div", { className: l("split-layout", pt[e], t), ...r });
 }
-function gt({ className: e, ...t }) {
+function bt({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", { className: l("tag-row", e), ...t });
 }
 const sn = me(function({ className: t, ...r }, s) {
   return /* @__PURE__ */ n("textarea", { ref: s, className: l(t), ...r });
 });
 function an({ className: e, theme: t = "light", onToggle: r, lightIcon: s, darkIcon: a }) {
-  return /* @__PURE__ */ n("button", { className: e, onClick: r, title: `Switch to ${t === "light" ? "dark" : "light"} mode`, "aria-label": "Toggle theme", children: t === "light" ? a ?? /* @__PURE__ */ n($e, {}) : s ?? /* @__PURE__ */ n(Ve, {}) });
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: l("wb-btn", "wb-btn--secondary", "wb-btn--icon-only", e),
+      onClick: r,
+      title: `Switch to ${t === "light" ? "dark" : "light"} mode`,
+      "aria-label": "Toggle theme",
+      children: t === "light" ? a ?? /* @__PURE__ */ n($e, { size: 14 }) : s ?? /* @__PURE__ */ n(Ve, { size: 14 })
+    }
+  );
 }
 function on({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", { className: l("title-row", e), ...t });
@@ -1091,46 +1103,44 @@ function cn({
   );
 }
 function ln({ inputs: e = 1, showButton: t = !0, className: r, ...s }) {
-  return /* @__PURE__ */ d(J, { className: r, ...s, children: [
+  return /* @__PURE__ */ d(U, { className: r, ...s, children: [
     Array.from({ length: e }).map((a, u) => /* @__PURE__ */ n(tt, {}, `panel-form-input-${u}`)),
     t && /* @__PURE__ */ n(ve, {})
   ] });
 }
 function un() {
-  return /* @__PURE__ */ d("article", { className: "story-card", children: [
-    /* @__PURE__ */ n("div", { className: "story-cover", children: /* @__PURE__ */ n("div", { className: "story-cover__placeholder story-cover__placeholder--skeleton" }) }),
-    /* @__PURE__ */ n("div", { className: "story-card__overlay story-card__overlay--skeleton", children: /* @__PURE__ */ d("div", { className: "story-card__overlay-text", children: [
-      /* @__PURE__ */ d(lt, { as: "header", children: [
-        /* @__PURE__ */ n(ne, {}),
-        /* @__PURE__ */ n(ne, {})
-      ] }),
-      /* @__PURE__ */ n(ge, {}),
-      /* @__PURE__ */ n(be, { short: !0 })
-    ] }) })
-  ] });
+  return /* @__PURE__ */ n(xe, { children: /* @__PURE__ */ d(U, { size: "sm", children: [
+    /* @__PURE__ */ n(Ne, {}),
+    /* @__PURE__ */ d(lt, { as: "header", children: [
+      /* @__PURE__ */ n(ne, {}),
+      /* @__PURE__ */ n(ne, {})
+    ] }),
+    /* @__PURE__ */ n(be, {}),
+    /* @__PURE__ */ n(we, { short: !0 })
+  ] }) });
 }
-function bt() {
-  return /* @__PURE__ */ n(ze, { as: "li", children: /* @__PURE__ */ d(ft, { variant: "user", children: [
+function wt() {
+  return /* @__PURE__ */ n(xe, { as: "li", children: /* @__PURE__ */ d(ft, { variant: "user", children: [
     /* @__PURE__ */ n(rt, {}),
-    /* @__PURE__ */ d(J, { size: "sm", children: [
-      /* @__PURE__ */ n(ge, {}),
-      /* @__PURE__ */ n(be, { short: !0 })
+    /* @__PURE__ */ d(U, { size: "sm", children: [
+      /* @__PURE__ */ n(be, {}),
+      /* @__PURE__ */ n(we, { short: !0 })
     ] }),
-    /* @__PURE__ */ d(J, { size: "sm", children: [
+    /* @__PURE__ */ d(U, { size: "sm", children: [
       /* @__PURE__ */ n(ne, {}),
       /* @__PURE__ */ n(nt, {})
     ] })
   ] }) });
 }
 function dn({ count: e = 3 }) {
-  return /* @__PURE__ */ n(ut, { as: "ul", children: Array.from({ length: e }).map((t, r) => /* @__PURE__ */ n(bt, {}, `user-skeleton-${r}`)) });
+  return /* @__PURE__ */ n(ut, { as: "ul", children: Array.from({ length: e }).map((t, r) => /* @__PURE__ */ n(wt, {}, `user-skeleton-${r}`)) });
 }
 function hn() {
-  return /* @__PURE__ */ d(ze, { as: "li", children: [
-    /* @__PURE__ */ d(J, { size: "sm", children: [
-      /* @__PURE__ */ n(_e, { className: "asset-thumb" }),
-      /* @__PURE__ */ n(ge, {}),
-      /* @__PURE__ */ d(gt, { children: [
+  return /* @__PURE__ */ d(xe, { as: "li", children: [
+    /* @__PURE__ */ d(U, { size: "sm", children: [
+      /* @__PURE__ */ n(Ne, {}),
+      /* @__PURE__ */ n(be, {}),
+      /* @__PURE__ */ d(bt, { children: [
         /* @__PURE__ */ n(ne, {}),
         /* @__PURE__ */ n(ne, {})
       ] })
@@ -1142,9 +1152,9 @@ function hn() {
   ] });
 }
 function mn({ count: e = 8, gridClass: t }) {
-  return /* @__PURE__ */ n(fe, { className: l("picker-grid", t), children: Array.from({ length: e }).map((r, s) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(dt, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ d(J, { size: "sm", children: [
-    /* @__PURE__ */ n(_e, { className: "asset-thumb" }),
-    /* @__PURE__ */ n(be, { short: !0 })
+  return /* @__PURE__ */ n(fe, { className: l("picker-grid", t), children: Array.from({ length: e }).map((r, s) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(dt, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ d(U, { size: "sm", children: [
+    /* @__PURE__ */ n(Ne, {}),
+    /* @__PURE__ */ n(we, { short: !0 })
   ] }) }) }, `picker-skeleton-${s}`)) });
 }
 export {
@@ -1153,7 +1163,7 @@ export {
   at as AssetTitle,
   Tt as AvatarBadge,
   rt as AvatarSkeleton,
-  Me as Button,
+  ze as Button,
   Je as ButtonRow,
   ve as ButtonSkeleton,
   Dt as CanvasSkeleton,
@@ -1163,7 +1173,7 @@ export {
   Qe as ChoiceCard,
   It as ChoiceGroup,
   Ft as ChoiceGroupSkeleton,
-  _t as ConfirmDialog,
+  Pt as ConfirmDialog,
   Gt as CoordGrid,
   Lt as CoordInput,
   Ot as EmptyState,
@@ -1176,20 +1186,20 @@ export {
   lt as Inline,
   jt as Input,
   tt as InputSkeleton,
-  ze as ItemCard,
+  xe as ItemCard,
   ut as ItemList,
   ct as Label,
-  be as LineSkeleton,
+  we as LineSkeleton,
   fe as List,
   Ut as LoadingState,
   Ze as Minimap,
-  Pe as MutedText,
+  _e as MutedText,
   Zt as OverlayIconButton,
   Kt as PageCard,
   qt as PageShell,
   At as PageTitle,
   Jt as PanelCloseButton,
-  Pt as PanelErrorBoundary,
+  zt as PanelErrorBoundary,
   ln as PanelFormSkeleton,
   Qt as PanelSection,
   en as PanelTitle,
@@ -1203,17 +1213,17 @@ export {
   nt as SelectSkeleton,
   G as Skeleton,
   ft as SplitLayout,
-  J as Stack,
+  U as Stack,
   un as StoryCardSkeleton,
   Et as StoryTitle,
-  gt as TagRow,
+  bt as TagRow,
   sn as Textarea,
   Yt as TextareaSkeleton,
   an as ThemeToggle,
-  _e as ThumbSkeleton,
+  Ne as ThumbSkeleton,
   on as TitleRow,
-  ge as TitleSkeleton,
-  bt as UserCardSkeleton,
+  be as TitleSkeleton,
+  wt as UserCardSkeleton,
   dn as UserListSkeleton,
   cn as VerticalToolbar,
   he as WHITEBOARD_GRID,
@@ -1221,10 +1231,10 @@ export {
   Ue as ZoomBar,
   Mt as belowPanel,
   l as cn,
-  Ne as computeWhiteboardFit,
+  Se as computeWhiteboardFit,
   je as computeWhiteboardRectFocus,
   ue as snapToWhiteboardGrid,
   kt as usePanelRect,
-  zt as useWhiteboardLayout,
-  g as useWhiteboardStore
+  _t as useWhiteboardLayout,
+  b as useWhiteboardStore
 };