@objectifthunes/whiteboard 0.2.4 → 0.2.6

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsx as n, jsxs as d, Fragment as re } from "react/jsx-runtime";
-import { useEffect as X, useRef as S, useCallback as H, memo as Te, useId as Re, useState as Se, useLayoutEffect as We, Component as De, useMemo as ye, forwardRef as me, createElement as T } from "react";
-import { create as Xe } from "zustand";
-import { createPortal as Ye } from "react-dom";
-const Y = (e = 14) => ({
+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 { create as De } from "zustand";
+import { createPortal as Ie } from "react-dom";
+const D = (e = 14) => ({
   xmlns: "http://www.w3.org/2000/svg",
   width: e,
   height: e,
@@ -14,16 +14,16 @@ const Y = (e = 14) => ({
   strokeLinejoin: "round"
 });
 function Fe({ size: e, ...t }) {
-  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M5 12h14" }) });
+  return /* @__PURE__ */ n("svg", { ...D(e), ...t, children: /* @__PURE__ */ n("path", { d: "M5 12h14" }) });
 }
 function Ge({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
     /* @__PURE__ */ n("path", { d: "M5 12h14" }),
     /* @__PURE__ */ n("path", { d: "M12 5v14" })
   ] });
 }
-function Ie({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+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" }),
@@ -33,14 +33,14 @@ function Ie({ size: e, ...t }) {
     /* @__PURE__ */ n("path", { d: "m16 16-1.9-1.9" })
   ] });
 }
-function Le({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+function Ee({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
     /* @__PURE__ */ n("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
     /* @__PURE__ */ n("path", { d: "M3 3v5h5" })
   ] });
 }
-function Ee({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+function Ae({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
     /* @__PURE__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
     /* @__PURE__ */ n("path", { d: "M3 9h18" }),
     /* @__PURE__ */ n("path", { d: "M3 15h18" }),
@@ -48,38 +48,38 @@ function Ee({ size: e, ...t }) {
     /* @__PURE__ */ n("path", { d: "M15 3v18" })
   ] });
 }
-function Ae({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+function Oe({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
     /* @__PURE__ */ n("polyline", { points: "15 3 21 3 21 9" }),
     /* @__PURE__ */ n("polyline", { points: "9 21 3 21 3 15" }),
     /* @__PURE__ */ n("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
     /* @__PURE__ */ n("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
   ] });
 }
-function fe({ size: e, ...t }) {
-  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+function pe({ size: e, ...t }) {
+  return /* @__PURE__ */ n("svg", { ...D(e), ...t, children: /* @__PURE__ */ n("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 }
-function Oe({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+function Be({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
     /* @__PURE__ */ n("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__ */ n("path", { d: "M12 9v4" }),
     /* @__PURE__ */ n("path", { d: "M12 17h.01" })
   ] });
 }
 function He({ size: e, ...t }) {
-  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) });
+  return /* @__PURE__ */ n("svg", { ...D(e), ...t, children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) });
 }
-function Me({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+function ke({ 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" })
   ] });
 }
-function Be({ size: e, ...t }) {
-  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
-}
 function $e({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+  return /* @__PURE__ */ n("svg", { ...D(e), ...t, children: /* @__PURE__ */ n("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
+}
+function Ve({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
     /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "4" }),
     /* @__PURE__ */ n("path", { d: "M12 2v2" }),
     /* @__PURE__ */ n("path", { d: "M12 20v2" }),
@@ -97,33 +97,33 @@ function ue(e) {
 }
 function Ne(e, t, r = 60) {
   if (e.size === 0) return null;
-  let s = 1 / 0, a = 1 / 0, u = -1 / 0, w = -1 / 0;
+  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), w = Math.max(w, v.y + v.height);
-  const f = u - s + r * 2, m = w - a + r * 2, g = t.width || window.innerWidth, h = t.height || window.innerHeight, M = Math.min(g / f, h / m, 1.5), k = (s + u) / 2, _ = (a + w) / 2;
+    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;
   return {
-    scale: Math.min(3, Math.max(0.2, M)),
+    scale: Math.min(3, Math.max(0.2, k)),
     offset: {
-      x: g / 2 - k * M,
-      y: h / 2 - _ * M
+      x: b / 2 - M * k,
+      y: h / 2 - _ * k
     }
   };
 }
-function Ve(e, t, r = 40, s = 1.5) {
-  const a = t.width || window.innerWidth, u = t.height || window.innerHeight, w = Math.max(1, e.width), f = Math.max(1, e.height), m = Math.min(
-    (a - r * 2) / w,
+function je(e, t, r = 40, s = 1.5) {
+  const a = t.width || window.innerWidth, u = t.height || window.innerHeight, m = Math.max(1, e.width), f = Math.max(1, e.height), p = Math.min(
+    (a - r * 2) / m,
     (u - r * 2) / f,
     s
-  ), g = Math.min(3, Math.max(0.2, m));
+  ), b = Math.min(3, Math.max(0.2, p));
   return {
-    scale: g,
+    scale: b,
     offset: {
-      x: a / 2 - (e.x + w / 2) * g,
-      y: u / 2 - (e.y + f / 2) * g
+      x: a / 2 - (e.x + m / 2) * b,
+      y: u / 2 - (e.y + f / 2) * b
     }
   };
 }
-const p = Xe((e, t) => ({
+const g = De((e, t) => ({
   offset: { x: 0, y: 0 },
   scale: 1,
   viewportSize: { width: 0, height: 0 },
@@ -153,7 +153,7 @@ const p = Xe((e, t) => ({
     a && e({ scale: a.scale, offset: a.offset });
   },
   focusPanel: (r, s) => {
-    const { viewportSize: a } = t(), u = Ve(
+    const { viewportSize: a } = t(), u = je(
       r,
       a,
       (s == null ? void 0 : s.padding) ?? 40,
@@ -164,9 +164,9 @@ const p = Xe((e, t) => ({
   resetWidgets: () => {
     for (const s of t().resetFns.values()) s();
     const r = (s = 0) => {
-      const { panels: a, viewportSize: u } = t(), w = Ne(a, u);
-      if (w) {
-        e({ scale: w.scale, offset: w.offset });
+      const { panels: a, viewportSize: u } = t(), m = Ne(a, u);
+      if (m) {
+        e({ scale: m.scale, offset: m.offset });
         return;
       }
       s < 6 && requestAnimationFrame(() => r(s + 1));
@@ -183,17 +183,17 @@ const p = Xe((e, t) => ({
     resetFns: /* @__PURE__ */ new Map()
   })
 }));
-function je({ extraActions: e }) {
-  const t = p((h) => h.scale), r = p((h) => h.viewportSize), s = p((h) => h.snapToGrid), a = p((h) => h.setScale), u = p((h) => h.setOffset), w = p((h) => h.setSnapToGrid), f = p((h) => h.fitToContent), m = p((h) => h.resetWidgets);
-  X(() => {
+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);
+  Y(() => {
     s && window.dispatchEvent(new Event("whiteboard-snap-now"));
   }, [s]);
-  const g = (h) => {
-    const M = Math.min(3, Math.max(0.2, h)), k = M / t, _ = (r.width || window.innerWidth) / 2, v = (r.height || window.innerHeight) / 2;
+  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) * k,
-      y: v - (v - P.y) * k
-    })), a(M);
+      x: _ - (_ - P.x) * M,
+      y: v - (v - P.y) * M
+    })), a(k);
   };
   return /* @__PURE__ */ d(
     "div",
@@ -202,23 +202,23 @@ function je({ 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: () => g(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: () => b(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: () => g(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(Ie, { size: 14 }) }),
-        /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: m, title: "Reset panel positions", "aria-label": "Reset panel positions", children: /* @__PURE__ */ n(Le, { size: 14 }) }),
+        /* @__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__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(
           "button",
           {
             type: "button",
             className: `wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action${s ? " is-active" : ""}`,
-            onClick: () => w((h) => !h),
+            onClick: () => m((h) => !h),
             title: s ? "Disable snap to grid" : "Enable snap to grid",
             "aria-label": s ? "Disable snap to grid" : "Enable snap to grid",
-            children: /* @__PURE__ */ n(Ee, { size: 14 })
+            children: /* @__PURE__ */ n(Ae, { size: 14 })
           }
         ),
         e
@@ -227,49 +227,49 @@ function je({ extraActions: e }) {
   );
 }
 const ee = 200, te = 150, de = 40, xe = 1;
-function Ue({ loading: e = !1 }) {
-  p((o) => o.registryVersion);
-  const t = p((o) => o.offset), r = p((o) => o.scale), s = p((o) => o.viewportSize), a = p((o) => o.panels), u = p((o) => o.setOffset), w = p((o) => o.setScale), f = p((o) => o.focusPanel), m = S(null), g = S(!1), h = S(null), k = Array.from(a.entries()).filter(([, o]) => Number.isFinite(o.width) && Number.isFinite(o.height)), _ = k.map(([, o]) => o);
+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)
-    return /* @__PURE__ */ n("div", { className: "minimap minimap--loading", style: { width: ee, height: te }, children: /* @__PURE__ */ n("div", { className: "minimap__loading", children: /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }) }) });
-  const v = s.width || window.innerWidth, P = s.height || window.innerHeight, L = v / r, B = P / r, $ = -t.x / r, V = -t.y / r;
-  let F = 1 / 0, c = 1 / 0, R = -1 / 0, W = -1 / 0;
-  for (const o of _)
-    F = Math.min(F, o.x), c = Math.min(c, o.y), R = Math.max(R, o.x + o.width), W = Math.max(W, o.y + o.height);
-  F -= de, c -= de, R += de, W += de;
-  const C = Math.max(xe, R - F), O = Math.max(xe, W - c), z = Math.min(ee / C, te / O), E = C * z, U = O * z, Z = (ee - E) / 2, D = (te - U) / 2, q = (o) => Z + (o - F) * z, j = (o) => D + (o - c) * z, Q = (o, y) => {
-    if (!m.current) return;
-    const x = m.current.getBoundingClientRect(), G = Math.min(ee, Math.max(0, o - x.left)), A = Math.min(te, Math.max(0, y - x.top)), ae = Math.min(E + Z, Math.max(Z, G)), oe = Math.min(U + D, Math.max(D, A)), ie = (ae - Z) / z + F, ce = (oe - D) / z + c;
-    return { worldX: ie, worldY: ce };
-  }, K = (o, y, x) => {
-    const G = Math.min(3, Math.max(0.2, x));
-    w(G), u({
-      x: v / 2 - o * G,
-      y: P / 2 - y * G
+    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;
+  let I = 1 / 0, c = 1 / 0, R = -1 / 0, W = -1 / 0;
+  for (const i of _)
+    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) => {
+    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;
+    return { worldX: oe, worldY: ce };
+  }, K = (i, y, x) => {
+    const F = Math.min(3, Math.max(0.2, x));
+    m(F), u({
+      x: v / 2 - i * F,
+      y: P / 2 - y * F
     });
-  }, se = (o, y) => {
-    const x = Q(o, y);
+  }, se = (i, y) => {
+    const x = Q(i, y);
     x && K(x.worldX, x.worldY, r);
-  }, be = (o) => {
-    o.stopPropagation(), o.preventDefault(), g.current = !0, o.currentTarget.setPointerCapture(o.pointerId), se(o.clientX, o.clientY);
-  }, i = (o) => {
-    g.current && se(o.clientX, o.clientY);
-  }, b = () => {
-    g.current = !1;
+  }, we = (i) => {
+    i.stopPropagation(), i.preventDefault(), b.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;
   };
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: m,
-      onPointerDown: be,
-      onPointerMove: i,
-      onPointerUp: b,
-      onPointerCancel: b,
-      onWheel: (o) => {
-        o.preventDefault(), o.stopPropagation();
-        const y = Q(o.clientX, o.clientY);
+      ref: p,
+      onPointerDown: we,
+      onPointerMove: o,
+      onPointerUp: w,
+      onPointerCancel: w,
+      onWheel: (i) => {
+        i.preventDefault(), i.stopPropagation();
+        const y = Q(i.clientX, i.clientY);
         if (!y) return;
-        const x = o.deltaY > 0 ? 0.9 : 1.1;
+        const x = i.deltaY > 0 ? 0.9 : 1.1;
         K(y.worldX, y.worldY, r * x);
       },
       className: "minimap",
@@ -278,7 +278,7 @@ function Ue({ loading: e = !1 }) {
         height: te
       },
       children: [
-        k.map(([o, y]) => /* @__PURE__ */ n(
+        M.map(([i, y]) => /* @__PURE__ */ n(
           "div",
           {
             className: "minimap__panel",
@@ -287,12 +287,12 @@ function Ue({ loading: e = !1 }) {
             },
             onPointerUp: (x) => {
               x.stopPropagation();
-              const G = Date.now(), A = h.current;
-              if (A && A.id === o && G - A.time < 300) {
+              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;
                 return;
               }
-              h.current = { id: o, time: G };
+              h.current = { id: i, time: F };
             },
             onDoubleClick: (x) => {
               x.preventDefault(), x.stopPropagation(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale });
@@ -300,11 +300,11 @@ function Ue({ loading: e = !1 }) {
             style: {
               left: q(y.x),
               top: j(y.y),
-              width: Math.max(1, y.width * z),
-              height: Math.max(1, y.height * z)
+              width: Math.max(1, y.width * C),
+              height: Math.max(1, y.height * C)
             }
           },
-          o
+          i
         )),
         /* @__PURE__ */ n(
           "div",
@@ -313,8 +313,8 @@ function Ue({ loading: e = !1 }) {
             style: {
               left: q($),
               top: j(V),
-              width: L * z,
-              height: B * z
+              width: L * C,
+              height: H * C
             }
           }
         )
@@ -323,61 +323,61 @@ function Ue({ loading: e = !1 }) {
   );
 }
 function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraActions: s }) {
-  const a = p((c) => c.offset), u = p((c) => c.scale), w = p((c) => c.registryVersion), f = p((c) => c.viewportSize), m = p((c) => c.setOffset), g = p((c) => c.setScale), h = p((c) => c.setViewportSize), M = S(null), k = S(!1), _ = S({ x: 0, y: 0 }), v = S(null), P = S(u), L = S(!1);
-  X(() => () => {
-    p.getState().resetSession();
-  }, []), X(() => {
+  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);
+  Y(() => () => {
+    g.getState().resetSession();
+  }, []), Y(() => {
     P.current = u;
-  }, [u]), X(() => {
-    const c = M.current;
+  }, [u]), Y(() => {
+    const c = k.current;
     if (!c) return;
     const R = () => {
-      const C = c.getBoundingClientRect();
+      const z = c.getBoundingClientRect();
       h({
-        width: Math.max(0, C.width),
-        height: Math.max(0, C.height)
+        width: Math.max(0, z.width),
+        height: Math.max(0, z.height)
       });
     };
     if (R(), typeof ResizeObserver > "u") return;
     const W = new ResizeObserver(R);
     return W.observe(c), () => W.disconnect();
-  }, [h]), X(() => {
+  }, [h]), Y(() => {
     if (L.current) return;
-    const { panels: c } = p.getState();
+    const { panels: c } = g.getState();
     c.size === 0 || f.width <= 0 || f.height <= 0 || (L.current = !0, requestAnimationFrame(() => {
-      p.getState().fitToContent();
+      g.getState().fitToContent();
     }));
-  }, [w, f]);
-  const B = H((c) => {
-    c.target === c.currentTarget && (c.button === 0 || c.button === 1) && (k.current = !0, v.current = c.pointerId, _.current = { x: c.clientX, y: c.clientY }, c.currentTarget.setPointerCapture(c.pointerId), c.preventDefault());
-  }, []), $ = H((c) => {
-    if (!k.current || v.current !== c.pointerId) return;
+  }, [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());
+  }, []), $ = 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;
-    m((C) => ({ x: C.x + R, y: C.y + W })), _.current = { x: c.clientX, y: c.clientY };
-  }, [m]), V = H((c) => {
+    p((z) => ({ x: z.x + R, y: z.y + W })), _.current = { x: c.clientX, y: c.clientY };
+  }, [p]), V = B((c) => {
     if (v.current !== null)
       try {
         c.currentTarget.releasePointerCapture(v.current);
       } catch {
       }
-    k.current = !1, v.current = null;
-  }, []), F = H((c) => {
-    const R = P.current, W = c.currentTarget.getBoundingClientRect(), C = { 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))), z = O / R;
-    m((E) => ({
-      x: C.x - (C.x - E.x) * z,
-      y: C.y - (C.y - E.y) * z
-    })), g(O);
-  }, [m, g]);
+    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;
+    p((E) => ({
+      x: z.x - (z.x - E.x) * C,
+      y: z.y - (z.y - E.y) * C
+    })), b(O);
+  }, [p, b]);
   return /* @__PURE__ */ d(re, { children: [
     /* @__PURE__ */ n(
       "div",
       {
-        ref: M,
-        onPointerDown: B,
+        ref: k,
+        onPointerDown: H,
         onPointerMove: $,
         onPointerUp: V,
         onPointerCancel: V,
-        onWheel: F,
+        onWheel: I,
         onContextMenu: (c) => c.preventDefault(),
         className: "whiteboard-shell",
         children: /* @__PURE__ */ d(
@@ -393,136 +393,136 @@ function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraAct
         )
       }
     ),
-    /* @__PURE__ */ n(je, { extraActions: s }),
-    t ? /* @__PURE__ */ n(Ue, { loading: r }) : null
+    /* @__PURE__ */ n(Ue, { extraActions: s }),
+    t ? /* @__PURE__ */ n(Ze, { loading: r }) : null
   ] });
 }
-const St = Te(function({
+const St = Re(function({
   title: t,
   defaultPosition: r,
   width: s = 300,
   className: a,
   trackRect: u,
-  focusable: w,
+  focusable: m,
   focusPadding: f = 40,
-  focusMaxScale: m = 1.5,
-  headerActions: g,
+  focusMaxScale: p = 1.5,
+  headerActions: b,
   children: h
 }) {
-  const M = Re(), [k, _] = Se(r), v = S(!1), P = S(k), L = S(null), B = S(null), $ = p((i) => i.scale), V = p((i) => i.snapToGrid), F = p((i) => i.snapGridSize), c = p((i) => i.register), R = p((i) => i.unregister), W = p((i) => i.registerReset), C = p((i) => i.unregisterReset), O = p((i) => i.focusPanel), z = S($), E = S(!1), U = S(20), Z = S(r), D = S(null), q = S(null);
-  X(() => {
-    z.current = $;
-  }, [$]), X(() => {
-    E.current = V, U.current = F;
-  }, [V, F]), X(() => {
-    const i = () => {
-      const b = U.current;
+  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);
+  Y(() => {
+    C.current = $;
+  }, [$]), Y(() => {
+    E.current = V, U.current = I;
+  }, [V, I]), Y(() => {
+    const o = () => {
+      const w = U.current;
       _((N) => {
-        const o = {
-          x: Math.round(N.x / b) * b,
-          y: Math.round(N.y / b) * b
+        const i = {
+          x: Math.round(N.x / w) * w,
+          y: Math.round(N.y / w) * w
         };
-        return o.x === N.x && o.y === N.y ? N : o;
+        return i.x === N.x && i.y === N.y ? N : i;
       });
     };
-    return window.addEventListener("whiteboard-snap-now", i), () => window.removeEventListener("whiteboard-snap-now", i);
-  }, []), X(() => {
-    P.current = k;
-  }, [k]);
-  const j = H(() => {
-    const i = L.current;
-    if (!i) return;
-    const b = {
+    return window.addEventListener("whiteboard-snap-now", o), () => window.removeEventListener("whiteboard-snap-now", o);
+  }, []), Y(() => {
+    P.current = M;
+  }, [M]);
+  const j = B(() => {
+    const o = L.current;
+    if (!o) return;
+    const w = {
       x: P.current.x,
       y: P.current.y,
-      width: i.offsetWidth,
-      height: i.offsetHeight,
+      width: o.offsetWidth,
+      height: o.offsetHeight,
       focusPadding: f,
-      focusMaxScale: m
-    }, N = B.current;
-    N && N.x === b.x && N.y === b.y && N.width === b.width && N.height === b.height && N.focusPadding === b.focusPadding && N.focusMaxScale === b.focusMaxScale || (B.current = b, c(M, b), u && (u.current = b));
-  }, [m, f, M, c, u]), Q = H(() => {
-    const i = L.current;
-    return i ? {
+      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(() => {
+    const o = L.current;
+    return o ? {
       x: P.current.x,
       y: P.current.y,
-      width: i.offsetWidth,
-      height: i.offsetHeight,
+      width: o.offsetWidth,
+      height: o.offsetHeight,
       focusPadding: f,
-      focusMaxScale: m
+      focusMaxScale: p
     } : null;
-  }, [m, f]), K = H(() => {
-    const i = Q();
-    i && O(i, { padding: f, maxScale: m });
-  }, [O, f, m, Q]);
-  X(() => (W(M, () => _(Z.current)), () => {
-    var i;
-    (i = D.current) == null || i.call(D), R(M), C(M), B.current = null;
-  }), [M, W, R, C]), We(() => {
+  }, [p, f]), K = B(() => {
+    const o = Q();
+    o && O(o, { padding: f, maxScale: p });
+  }, [O, f, p, Q]);
+  Y(() => (W(k, () => _(Z.current)), () => {
+    var o;
+    (o = X.current) == null || o.call(X), R(k), z(k), H.current = null;
+  }), [k, W, R, z]), Xe(() => {
     j();
-  }, [k.x, k.y, s, j]), X(() => {
-    const i = L.current;
-    if (!i || typeof ResizeObserver > "u") return;
-    const b = new ResizeObserver(() => {
+  }, [M.x, M.y, s, j]), Y(() => {
+    const o = L.current;
+    if (!o || typeof ResizeObserver > "u") return;
+    const w = new ResizeObserver(() => {
       j();
     });
-    return b.observe(i), () => b.disconnect();
+    return w.observe(o), () => w.disconnect();
   }, [j]);
-  const se = H((i) => {
+  const se = B((o) => {
     var ae;
-    if (i.button !== 0) return;
+    if (o.button !== 0) return;
     v.current = !0;
-    const b = i.clientX, N = i.clientY, o = P.current.x, y = P.current.y, x = z.current;
-    i.preventDefault(), i.stopPropagation(), i.target.setPointerCapture(i.pointerId);
-    const G = (oe) => {
+    const w = o.clientX, N = o.clientY, i = P.current.x, y = P.current.y, x = C.current;
+    o.preventDefault(), o.stopPropagation(), o.target.setPointerCapture(o.pointerId);
+    const F = (ie) => {
       if (!v.current) return;
-      const ie = o + (oe.clientX - b) / x, ce = y + (oe.clientY - N) / x, le = U.current, Ce = E.current ? Math.round(ie / le) * le : ie, ze = E.current ? Math.round(ce / le) * le : ce;
+      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;
       _({
         x: Ce,
-        y: ze
+        y: Te
       });
     }, A = () => {
-      v.current = !1, window.removeEventListener("pointermove", G), window.removeEventListener("pointerup", A), D.current = null;
+      v.current = !1, window.removeEventListener("pointermove", F), window.removeEventListener("pointerup", A), X.current = null;
     };
-    (ae = D.current) == null || ae.call(D), window.addEventListener("pointermove", G), window.addEventListener("pointerup", A), D.current = A;
-  }, []), be = a ? `floating-panel ${a}` : "floating-panel";
+    (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";
   return /* @__PURE__ */ d(
     "div",
     {
       ref: L,
-      className: be,
-      style: { left: k.x, top: k.y, width: s },
-      onPointerDown: (i) => i.stopPropagation(),
-      onPointerUp: (i) => {
+      className: we,
+      style: { left: M.x, top: M.y, width: s },
+      onPointerDown: (o) => o.stopPropagation(),
+      onPointerUp: (o) => {
         if (v.current) return;
-        const b = Date.now(), N = q.current;
-        if (N && b - N.time < 300) {
-          const o = i.clientX - N.x, y = i.clientY - N.y;
-          if (o * o + y * y < 100) {
-            i.stopPropagation(), K(), q.current = null;
+        const w = Date.now(), N = q.current;
+        if (N && w - N.time < 300) {
+          const i = o.clientX - N.x, y = o.clientY - N.y;
+          if (i * i + y * y < 100) {
+            o.stopPropagation(), K(), q.current = null;
             return;
           }
         }
-        q.current = { time: b, x: i.clientX, y: i.clientY };
+        q.current = { time: w, x: o.clientX, y: o.clientY };
       },
-      onWheel: (i) => i.stopPropagation(),
-      onDoubleClick: (i) => {
-        i.stopPropagation(), K();
+      onWheel: (o) => o.stopPropagation(),
+      onDoubleClick: (o) => {
+        o.stopPropagation(), K();
       },
       children: [
         /* @__PURE__ */ d("div", { onPointerDown: se, className: "floating-panel__header", children: [
           /* @__PURE__ */ n("strong", { className: "floating-panel__title", children: t }),
-          g,
-          w && /* @__PURE__ */ n(
+          b,
+          m && /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               className: "wb-btn wb-btn--secondary wb-btn--icon-only floating-panel__focus",
               onClick: K,
-              onPointerDown: (i) => i.stopPropagation(),
+              onPointerDown: (o) => o.stopPropagation(),
               title: "Focus on this panel",
               "aria-label": "Focus on this panel",
-              children: /* @__PURE__ */ n(Ae, { size: 14 })
+              children: /* @__PURE__ */ n(Oe, { size: 14 })
             }
           )
         ] }),
@@ -531,10 +531,10 @@ const St = Te(function({
     }
   );
 });
-function Mt(e) {
+function kt(e) {
   return S({ ...e, width: 0, height: 0 });
 }
-function kt(e, t = he) {
+function Mt(e, t = he) {
   return { x: e.x, y: e.y + e.height + t };
 }
 function _t({
@@ -544,16 +544,16 @@ function _t({
   onConfirm: s,
   onCancel: a,
   confirmLabel: u = "Confirm",
-  loading: w,
+  loading: m,
   error: f
 }) {
-  return X(() => {
+  return Y(() => {
     if (!e) return;
-    const m = (g) => {
-      g.key === "Escape" && a();
+    const p = (b) => {
+      b.key === "Escape" && a();
     };
-    return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
-  }, [e, a]), !e || typeof document > "u" ? null : Ye(
+    return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
+  }, [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: (m) => m.stopPropagation(),
+        onMouseDown: (p) => p.stopPropagation(),
         children: [
           /* @__PURE__ */ d("div", { className: "confirm-modal__header", children: [
             /* @__PURE__ */ d("span", { className: "confirm-modal__title", children: [
-              /* @__PURE__ */ n(Oe, { size: 16 }),
+              /* @__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(Me, { 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(ke, { size: 14 }) })
           ] }),
           /* @__PURE__ */ n("p", { className: "confirm-modal__message", children: r }),
           f && /* @__PURE__ */ n("div", { className: "wb-alert wb-alert--error", children: f }),
           /* @__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: w, children: w ? "Deleting..." : /* @__PURE__ */ d(re, { children: [
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: s, disabled: m, children: m ? "Deleting..." : /* @__PURE__ */ d(re, { children: [
               /* @__PURE__ */ n(He, { size: 14 }),
               u
             ] }) })
@@ -585,7 +585,7 @@ function _t({
     document.body
   );
 }
-class Pt extends De {
+class Pt extends Ye {
   constructor() {
     super(...arguments), this.state = { error: null };
   }
@@ -607,7 +607,7 @@ class Pt extends De {
     ] }) : this.props.children;
   }
 }
-function Ct({
+function zt({
   widths: e,
   startX: t = 20,
   y: r = 40,
@@ -615,8 +615,8 @@ function Ct({
 }) {
   const a = ye(() => {
     const f = {};
-    for (const [m, g] of Object.entries(e))
-      f[m] = ue(g);
+    for (const [p, b] of Object.entries(e))
+      f[p] = ue(b);
     return f;
   }, [e]), u = ye(
     () => ({
@@ -625,52 +625,55 @@ function Ct({
       gap: ue(s)
     }),
     [t, r, s]
-  ), w = ye(() => {
+  ), m = ye(() => {
     const f = {};
-    let m = u.startX;
-    for (const [g, h] of Object.entries(a))
-      f[g] = { x: m, y: u.y }, m += h + u.gap;
+    let p = u.startX;
+    for (const [b, h] of Object.entries(a))
+      f[b] = { x: p, y: u.y }, p += h + u.gap;
     return f;
   }, [u.gap, u.startX, u.y, a]);
-  return { layout: u, panelWidth: a, positions: w };
+  return { layout: u, panelWidth: a, positions: m };
 }
 function l(...e) {
   return e.filter(Boolean).join(" ");
 }
-const Ze = {
+const qe = {
   error: "status-error",
   muted: "text-sm text-muted",
   info: "ui-alert ui-alert--info",
   success: "ui-alert ui-alert--success"
 };
-function zt({ tone: e = "info", className: t, ...r }) {
-  return /* @__PURE__ */ n("p", { className: l(Ze[e], t), ...r });
+function Ct({ tone: e = "info", className: t, ...r }) {
+  return /* @__PURE__ */ n("p", { className: l(qe[e], t), ...r });
 }
-const qe = {
+function Tt({ className: e, ...t }) {
+  return /* @__PURE__ */ n("span", { className: l("avatar-badge", e), ...t });
+}
+const Ke = {
   primary: "",
   secondary: "secondary-btn",
   danger: "danger-btn"
-}, Ke = me(function({
+}, Me = me(function({
   variant: t = "primary",
   fullWidth: r = !1,
   iconOnly: s = !1,
   loading: a = !1,
   disabled: u,
-  className: w,
+  className: m,
   children: f,
-  loadingText: m,
-  ...g
+  loadingText: p,
+  ...b
 }, h) {
   return /* @__PURE__ */ n(
     "button",
     {
       ref: h,
-      className: l(qe[t], r && "full-width-btn", s && "icon-only-btn", w),
+      className: l(Ke[t], r && "full-width-btn", s && "icon-only-btn", m),
       disabled: u || a,
-      ...g,
+      ...b,
       children: a ? /* @__PURE__ */ d(re, { children: [
-        /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }),
-        m || f
+        /* @__PURE__ */ n(pe, { size: 14, className: "icon-spin" }),
+        p || f
       ] }) : f
     }
   );
@@ -681,7 +684,13 @@ function Je({ as: e = "div", className: t, ...r }) {
     ...r
   });
 }
-function Tt({ className: e, ...t }) {
+function Rt({ children: e, hint: t, className: r, ...s }) {
+  return /* @__PURE__ */ n("div", { className: "canvas-wrap", children: /* @__PURE__ */ d("div", { className: l("canvas-stage", r), ...s, children: [
+    e,
+    t && /* @__PURE__ */ n("p", { className: "canvas-hint", children: t })
+  ] }) });
+}
+function Wt({ className: e, ...t }) {
   return /* @__PURE__ */ n("span", { className: l("chip", e), ...t });
 }
 function Qe({ active: e = !1, className: t, ...r }) {
@@ -695,7 +704,7 @@ function Qe({ active: e = !1, className: t, ...r }) {
     }
   );
 }
-function pe({ as: e = "ul", reset: t = !0, className: r, ...s }) {
+function fe({ as: e = "ul", reset: t = !0, className: r, ...s }) {
   return T(e, {
     className: l(t && "list-reset", r),
     ...s
@@ -706,7 +715,7 @@ const et = {
   md: "skeleton--md",
   pill: "skeleton--pill"
 };
-function I({ as: e = "div", radius: t = "sm", className: r, ...s }) {
+function G({ as: e = "div", radius: t = "sm", className: r, ...s }) {
   return T(e, {
     className: l("skeleton", et[t], r),
     "aria-hidden": !0,
@@ -715,54 +724,54 @@ function I({ as: e = "div", radius: t = "sm", className: r, ...s }) {
 }
 function tt(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-input", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-input", t), ...r });
 }
 function ve(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-btn", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-btn", t), ...r });
 }
-function Rt(e) {
+function Xt(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-icon-btn", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-icon-btn", t), ...r });
 }
 function nt(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-select", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-select", t), ...r });
 }
-function Wt(e) {
+function Yt(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-textarea", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-textarea", t), ...r });
 }
-function ke(e) {
+function _e(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-thumb", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-thumb", t), ...r });
 }
 function ne(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { radius: "pill", className: l("skeleton-chip", t), ...r });
+  return /* @__PURE__ */ n(G, { radius: "pill", className: l("skeleton-chip", t), ...r });
 }
-function we(e) {
+function ge(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-title", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-title", t), ...r });
 }
-function ge({ short: e = !1, className: t, ...r }) {
-  return /* @__PURE__ */ n(I, { className: l("skeleton-line", e && "skeleton-line--short", t), ...r });
+function be({ short: e = !1, className: t, ...r }) {
+  return /* @__PURE__ */ n(G, { className: l("skeleton-line", e && "skeleton-line--short", t), ...r });
 }
 function rt(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { radius: "pill", className: l("skeleton-avatar", t), ...r });
+  return /* @__PURE__ */ n(G, { radius: "pill", className: l("skeleton-avatar", t), ...r });
 }
 function Dt(e) {
   const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(I, { className: l("skeleton-canvas", t), ...r });
+  return /* @__PURE__ */ n(G, { className: l("skeleton-canvas", t), ...r });
 }
-function Xt({
+function It({
   options: e,
   value: t,
   onChange: r,
   className: s
 }) {
-  return /* @__PURE__ */ n(pe, { className: l("choice-list", s), children: e.map((a) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(fe, { className: l("choice-list", s), children: e.map((a) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
     Qe,
     {
       active: t === a.value,
@@ -776,16 +785,16 @@ function Xt({
     }
   ) }, a.value)) });
 }
-function Yt({ count: e = 4, className: t, withDescription: r = !1 }) {
-  return /* @__PURE__ */ n(pe, { 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(we, { className: l("skeleton-title--sm", !r && "skeleton-choice-label") }),
-    r ? /* @__PURE__ */ n(ge, { short: !0 }) : null
+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
   ] }) }, `choice-skeleton-${a}`)) });
 }
-function Ft({ className: e, ...t }) {
+function Gt({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", { className: l("coord-grid", e), ...t });
 }
-function Gt({ axis: e, className: t, ...r }) {
+function Lt({ axis: e, className: t, ...r }) {
   return /* @__PURE__ */ d("label", { className: l("coord-input", t), children: [
     e,
     " ",
@@ -814,81 +823,81 @@ function at({ as: e = "p", clamp: t = !1, className: r, ...s }) {
     ...s
   });
 }
-function It({ as: e = "h3", className: t, ...r }) {
+function Et({ as: e = "h3", className: t, ...r }) {
   return T(e, {
     className: l("story-title", t),
     ...r
   });
 }
-function _e({ as: e = "p", size: t = "sm", className: r, ...s }) {
+function Pe({ as: e = "p", size: t = "sm", className: r, ...s }) {
   return T(e, {
     className: l(st[t], "text-muted", r),
     ...s
   });
 }
-function Lt({ as: e = "h1", className: t, ...r }) {
+function At({ as: e = "h1", className: t, ...r }) {
   return T(e, {
     className: l("page-title", t),
     ...r
   });
 }
-function ot({ as: e = "span", className: t, ...r }) {
+function it({ as: e = "span", className: t, ...r }) {
   return T(e, {
     className: l("widget-section__title", t),
     ...r
   });
 }
-function it({ as: e = "p", className: t, ...r }) {
+function ot({ as: e = "p", className: t, ...r }) {
   return T(e, {
     className: l("widget-section__description", t),
     ...r
   });
 }
-function Et({ title: e, description: t, action: r }) {
+function Ot({ title: e, description: t, action: r }) {
   return /* @__PURE__ */ d(J, { size: "sm", children: [
     /* @__PURE__ */ n(at, { children: e }),
-    t ? /* @__PURE__ */ n(_e, { children: t }) : null,
+    t ? /* @__PURE__ */ n(Pe, { children: t }) : null,
     r
   ] });
 }
 function ct({ className: e, ...t }) {
   return /* @__PURE__ */ n("label", { className: l("widget-label", e), ...t });
 }
-function At({
+function Bt({
   as: e,
   label: t,
   htmlFor: r,
   hint: s,
   error: a,
   layout: u = "stack",
-  className: w,
+  className: m,
   children: f,
-  ...m
+  ...p
 }) {
   return T(
     e ?? "div",
     {
-      className: l(u === "control" ? "widget-control" : "panel-stack-sm", w),
-      ...m
+      className: l(u === "control" ? "widget-control" : "panel-stack-sm", m),
+      ...p
     },
     /* @__PURE__ */ d(re, { children: [
       t ? /* @__PURE__ */ n(ct, { htmlFor: r, children: t }) : null,
       f,
-      s ? /* @__PURE__ */ n(_e, { size: "xs", children: s }) : null,
+      s ? /* @__PURE__ */ n(Pe, { size: "xs", children: s }) : null,
       a ? /* @__PURE__ */ n("p", { className: "field-error", children: a }) : null
     ] })
   );
 }
-function Ot({ isGenerating: e, children: t, message: r }) {
+function Ht({ isGenerating: e, children: t, message: r }) {
   return /* @__PURE__ */ d("div", { className: "generating-overlay-wrap", children: [
     t,
     e && /* @__PURE__ */ d("div", { className: "generating-overlay", "aria-live": "polite", children: [
-      /* @__PURE__ */ n(fe, { size: 20, className: "icon-spin" }),
+      /* @__PURE__ */ n(pe, { size: 20, className: "icon-spin" }),
       /* @__PURE__ */ n("span", { children: r ?? "Generating, please wait…" })
     ] })
   ] });
 }
-function Ht({ as: e = "span", icon: t, className: r, children: s, ...a }) {
+function $t({ as: e = "span", icon: t, className: r, children: s, ...a }) {
   return T(
     e,
     {
@@ -901,18 +910,18 @@ function Ht({ as: e = "span", icon: t, className: r, children: s, ...a }) {
     ] })
   );
 }
-function Bt({
+function Vt({
   src: e,
   alt: t,
   placeholder: r = "No image",
   size: s = "md",
   fit: a = "contain",
   onImageError: u,
-  className: w,
+  className: m,
   ...f
 }) {
-  const [m, g] = Se(null), h = !!(e && m === e), M = l("image-thumb", `image-thumb--${s}`, `image-thumb--fit-${a}`, w);
-  return /* @__PURE__ */ n("div", { className: M, ...f, children: e && !h ? /* @__PURE__ */ n(
+  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(
     "img",
     {
       src: e,
@@ -920,7 +929,7 @@ function Bt({
       className: "image-thumb__img",
       style: { objectFit: a, objectPosition: "center" },
       onError: () => {
-        g(e), u == null || u();
+        b(e), u == null || u();
       }
     }
   ) : /* @__PURE__ */ n("span", { className: "image-thumb__placeholder", children: r }) });
@@ -936,10 +945,10 @@ function lt({
     ...s
   });
 }
-const $t = me(function({ className: t, ...r }, s) {
+const jt = me(function({ className: t, ...r }, s) {
   return /* @__PURE__ */ n("input", { ref: s, className: l(t), ...r });
 });
-function Pe({ as: e = "div", className: t, ...r }) {
+function ze({ as: e = "div", className: t, ...r }) {
   return T(e, {
     className: l("item-card", t),
     ...r
@@ -951,35 +960,62 @@ function ut({ as: e = "div", className: t, ...r }) {
     ...r
   });
 }
-function Vt({ label: e = "Loading...", className: t }) {
+function Ut({ label: e = "Loading...", className: t }) {
   return /* @__PURE__ */ d("span", { className: l("status-inline", t), children: [
-    /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }),
+    /* @__PURE__ */ n(pe, { size: 14, className: "icon-spin" }),
     e
   ] });
 }
-function jt({ children: e, className: t, ...r }) {
+function Zt({
+  className: e,
+  placement: t,
+  onPointerDown: r,
+  onWheel: s,
+  onContextMenu: a,
+  ...u
+}) {
+  return /* @__PURE__ */ n(
+    Me,
+    {
+      variant: "secondary",
+      iconOnly: !0,
+      className: l("overlay-icon-btn", t && `overlay-icon-btn--${t}`, e),
+      onPointerDown: (m) => {
+        m.stopPropagation(), r == null || r(m);
+      },
+      onWheel: (m) => {
+        m.stopPropagation(), s == null || s(m);
+      },
+      onContextMenu: (m) => {
+        m.stopPropagation(), a == null || a(m);
+      },
+      ...u
+    }
+  );
+}
+function qt({ children: e, className: t, ...r }) {
   return /* @__PURE__ */ n("main", { className: l("page-shell", t), ...r, children: e });
 }
-function Ut({ children: e, className: t, ...r }) {
+function Kt({ children: e, className: t, ...r }) {
   return /* @__PURE__ */ n("div", { className: l("page-card", t), ...r, children: e });
 }
-function Zt({ onClick: e, label: t = "Close" }) {
-  return /* @__PURE__ */ d(Ke, { variant: "secondary", className: "panel-close-btn", onClick: e, children: [
-    /* @__PURE__ */ n(Me, { size: 14 }),
+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 }),
     t
   ] });
 }
-function qt({ heading: e, description: t, actions: r, className: s, children: a, ...u }) {
+function Qt({ heading: e, description: t, actions: r, className: s, children: a, ...u }) {
   return /* @__PURE__ */ d("section", { className: l("widget-section", s), ...u, children: [
     e || r ? /* @__PURE__ */ d("header", { className: r ? "title-row" : void 0, children: [
-      e ? /* @__PURE__ */ n(ot, { children: e }) : null,
+      e ? /* @__PURE__ */ n(it, { children: e }) : null,
       r
     ] }) : null,
-    t ? /* @__PURE__ */ n(it, { children: t }) : null,
+    t ? /* @__PURE__ */ n(ot, { children: t }) : null,
     a
   ] });
 }
-function Kt({ icon: e, label: t }) {
+function en({ icon: e, label: t }) {
   return /* @__PURE__ */ d("span", { className: "panel-title-with-icon", children: [
     /* @__PURE__ */ n(e, { size: 13, className: "panel-title-icon" }),
     /* @__PURE__ */ n("span", { children: t })
@@ -996,8 +1032,8 @@ const ht = {
   characters: "picker-grid--characters",
   library: "picker-grid--library"
 };
-function Jt({ variant: e, className: t, ...r }) {
-  return /* @__PURE__ */ n(pe, { className: l("picker-grid", ht[e], t), ...r });
+function tn({ variant: e, className: t, ...r }) {
+  return /* @__PURE__ */ n(fe, { className: l("picker-grid", ht[e], t), ...r });
 }
 const mt = {
   default: "",
@@ -1005,38 +1041,62 @@ const mt = {
   warning: "warning",
   danger: "danger"
 };
-function Qt({ tone: e = "default", className: t, ...r }) {
+function nn({ tone: e = "default", className: t, ...r }) {
   return /* @__PURE__ */ n("span", { className: l("pill", mt[e], t), ...r });
 }
-const en = me(function({ className: t, ...r }, s) {
+const rn = me(function({ className: t, ...r }, s) {
   return /* @__PURE__ */ n("select", { ref: s, className: l(t), ...r });
-}), ft = {
+}), pt = {
   element: "split-layout--element",
   character: "split-layout--character",
   user: "split-layout--user"
 };
-function pt({ variant: e, className: t, ...r }) {
-  return /* @__PURE__ */ n("div", { className: l("split-layout", ft[e], t), ...r });
+function ft({ variant: e, className: t, ...r }) {
+  return /* @__PURE__ */ n("div", { className: l("split-layout", pt[e], t), ...r });
 }
-function wt({ className: e, ...t }) {
+function gt({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", { className: l("tag-row", e), ...t });
 }
-const tn = me(function({ className: t, ...r }, s) {
+const sn = me(function({ className: t, ...r }, s) {
   return /* @__PURE__ */ n("textarea", { ref: s, className: l(t), ...r });
 });
-function nn({ 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(Be, {}) : s ?? /* @__PURE__ */ n($e, {}) });
+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, {}) });
 }
-function rn({ className: e, ...t }) {
+function on({ className: e, ...t }) {
   return /* @__PURE__ */ n("div", { className: l("title-row", e), ...t });
 }
-function sn({ inputs: e = 1, showButton: t = !0, className: r, ...s }) {
+function cn({
+  children: e,
+  bottom: t,
+  position: r = "left",
+  className: s,
+  ...a
+}) {
+  return /* @__PURE__ */ d(
+    "nav",
+    {
+      className: l(
+        "vertical-toolbar",
+        r === "right" && "vertical-toolbar--right",
+        r === "static" && "vertical-toolbar--static",
+        s
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ n("div", { className: "vertical-toolbar__links", children: e }),
+        t
+      ]
+    }
+  );
+}
+function ln({ inputs: e = 1, showButton: t = !0, className: r, ...s }) {
   return /* @__PURE__ */ d(J, { className: r, ...s, children: [
     Array.from({ length: e }).map((a, u) => /* @__PURE__ */ n(tt, {}, `panel-form-input-${u}`)),
     t && /* @__PURE__ */ n(ve, {})
   ] });
 }
-function an() {
+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: [
@@ -1044,17 +1104,17 @@ function an() {
         /* @__PURE__ */ n(ne, {}),
         /* @__PURE__ */ n(ne, {})
       ] }),
-      /* @__PURE__ */ n(we, {}),
-      /* @__PURE__ */ n(ge, { short: !0 })
+      /* @__PURE__ */ n(ge, {}),
+      /* @__PURE__ */ n(be, { short: !0 })
     ] }) })
   ] });
 }
-function gt() {
-  return /* @__PURE__ */ n(Pe, { as: "li", children: /* @__PURE__ */ d(pt, { variant: "user", children: [
+function bt() {
+  return /* @__PURE__ */ n(ze, { as: "li", children: /* @__PURE__ */ d(ft, { variant: "user", children: [
     /* @__PURE__ */ n(rt, {}),
     /* @__PURE__ */ d(J, { size: "sm", children: [
-      /* @__PURE__ */ n(we, {}),
-      /* @__PURE__ */ n(ge, { short: !0 })
+      /* @__PURE__ */ n(ge, {}),
+      /* @__PURE__ */ n(be, { short: !0 })
     ] }),
     /* @__PURE__ */ d(J, { size: "sm", children: [
       /* @__PURE__ */ n(ne, {}),
@@ -1062,15 +1122,15 @@ function gt() {
     ] })
   ] }) });
 }
-function on({ count: e = 3 }) {
-  return /* @__PURE__ */ n(ut, { as: "ul", children: Array.from({ length: e }).map((t, r) => /* @__PURE__ */ n(gt, {}, `user-skeleton-${r}`)) });
+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}`)) });
 }
-function cn() {
-  return /* @__PURE__ */ d(Pe, { as: "li", children: [
+function hn() {
+  return /* @__PURE__ */ d(ze, { as: "li", children: [
     /* @__PURE__ */ d(J, { size: "sm", children: [
-      /* @__PURE__ */ n(ke, { className: "asset-thumb" }),
-      /* @__PURE__ */ n(we, {}),
-      /* @__PURE__ */ d(wt, { children: [
+      /* @__PURE__ */ n(_e, { className: "asset-thumb" }),
+      /* @__PURE__ */ n(ge, {}),
+      /* @__PURE__ */ d(gt, { children: [
         /* @__PURE__ */ n(ne, {}),
         /* @__PURE__ */ n(ne, {})
       ] })
@@ -1081,86 +1141,90 @@ function cn() {
     ] })
   ] });
 }
-function ln({ count: e = 8, gridClass: t }) {
-  return /* @__PURE__ */ n(pe, { 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(ke, { className: "asset-thumb" }),
-    /* @__PURE__ */ n(ge, { short: !0 })
+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 })
   ] }) }) }, `picker-skeleton-${s}`)) });
 }
 export {
-  zt as Alert,
-  cn as AssetCardSkeleton,
+  Ct as Alert,
+  hn as AssetCardSkeleton,
   at as AssetTitle,
+  Tt as AvatarBadge,
   rt as AvatarSkeleton,
-  Ke as Button,
+  Me as Button,
   Je as ButtonRow,
   ve as ButtonSkeleton,
   Dt as CanvasSkeleton,
-  Tt as Chip,
+  Rt as CanvasStage,
+  Wt as Chip,
   ne as ChipSkeleton,
   Qe as ChoiceCard,
-  Xt as ChoiceGroup,
-  Yt as ChoiceGroupSkeleton,
+  It as ChoiceGroup,
+  Ft as ChoiceGroupSkeleton,
   _t as ConfirmDialog,
-  Ft as CoordGrid,
-  Gt as CoordInput,
-  Et as EmptyState,
-  At as Field,
+  Gt as CoordGrid,
+  Lt as CoordInput,
+  Ot as EmptyState,
+  Bt as Field,
   St as FloatingPanel,
-  Ot as GeneratingOverlay,
-  Rt as IconButtonSkeleton,
-  Ht as IconText,
-  Bt as ImageThumb,
+  Ht as GeneratingOverlay,
+  Xt as IconButtonSkeleton,
+  $t as IconText,
+  Vt as ImageThumb,
   lt as Inline,
-  $t as Input,
+  jt as Input,
   tt as InputSkeleton,
-  Pe as ItemCard,
+  ze as ItemCard,
   ut as ItemList,
   ct as Label,
-  ge as LineSkeleton,
-  pe as List,
-  Vt as LoadingState,
-  Ue as Minimap,
-  _e as MutedText,
-  Ut as PageCard,
-  jt as PageShell,
-  Lt as PageTitle,
-  Zt as PanelCloseButton,
+  be as LineSkeleton,
+  fe as List,
+  Ut as LoadingState,
+  Ze as Minimap,
+  Pe as MutedText,
+  Zt as OverlayIconButton,
+  Kt as PageCard,
+  qt as PageShell,
+  At as PageTitle,
+  Jt as PanelCloseButton,
   Pt as PanelErrorBoundary,
-  sn as PanelFormSkeleton,
-  qt as PanelSection,
-  Kt as PanelTitle,
+  ln as PanelFormSkeleton,
+  Qt as PanelSection,
+  en as PanelTitle,
   dt as PickerCard,
-  Jt as PickerGrid,
-  ln as PickerGridSkeleton,
-  Qt as Pill,
-  it as SectionDescription,
-  ot as SectionTitle,
-  en as Select,
+  tn as PickerGrid,
+  mn as PickerGridSkeleton,
+  nn as Pill,
+  ot as SectionDescription,
+  it as SectionTitle,
+  rn as Select,
   nt as SelectSkeleton,
-  I as Skeleton,
-  pt as SplitLayout,
+  G as Skeleton,
+  ft as SplitLayout,
   J as Stack,
-  an as StoryCardSkeleton,
-  It as StoryTitle,
-  wt as TagRow,
-  tn as Textarea,
-  Wt as TextareaSkeleton,
-  nn as ThemeToggle,
-  ke as ThumbSkeleton,
-  rn as TitleRow,
-  we as TitleSkeleton,
-  gt as UserCardSkeleton,
-  on as UserListSkeleton,
+  un as StoryCardSkeleton,
+  Et as StoryTitle,
+  gt as TagRow,
+  sn as Textarea,
+  Yt as TextareaSkeleton,
+  an as ThemeToggle,
+  _e as ThumbSkeleton,
+  on as TitleRow,
+  ge as TitleSkeleton,
+  bt as UserCardSkeleton,
+  dn as UserListSkeleton,
+  cn as VerticalToolbar,
   he as WHITEBOARD_GRID,
   xt as WhiteboardShell,
-  je as ZoomBar,
-  kt as belowPanel,
+  Ue as ZoomBar,
+  Mt as belowPanel,
   l as cn,
   Ne as computeWhiteboardFit,
-  Ve as computeWhiteboardRectFocus,
+  je as computeWhiteboardRectFocus,
   ue as snapToWhiteboardGrid,
-  Mt as usePanelRect,
-  Ct as useWhiteboardLayout,
-  p as useWhiteboardStore
+  kt as usePanelRect,
+  zt as useWhiteboardLayout,
+  g as useWhiteboardStore
 };