@objectifthunes/whiteboard 0.3.0 → 0.4.0

package/dist/index.js

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