@objectifthunes/whiteboard 0.2.7 → 0.4.0

package/dist/index.js

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