@objectifthunes/whiteboard 0.2.7 → 0.3.0

package/dist/index.js

@@ -1,11 +1,11 @@
-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";
-const D = (e = 14) => ({
+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) => ({
   xmlns: "http://www.w3.org/2000/svg",
-  width: e,
-  height: e,
+  width: t,
+  height: t,
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: "currentColor",
@@ -13,166 +13,166 @@ 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 Dt({ size: t, ...e }) {
+  return /* @__PURE__ */ r("svg", { ...D(t), ...e, children: /* @__PURE__ */ r("path", { d: "M5 12h14" }) });
 }
-function Ge({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ n("path", { d: "M12 5v14" })
+function It({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, children: [
+    /* @__PURE__ */ r("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ r("path", { d: "M12 5v14" })
   ] });
 }
-function Le({ 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" })
+function Ft({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, 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" }),
+    /* @__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 }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ n("path", { d: "M3 3v5h5" })
+function Gt({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, 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 Ae({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-    /* @__PURE__ */ n("path", { d: "M3 9h18" }),
-    /* @__PURE__ */ n("path", { d: "M3 15h18" }),
-    /* @__PURE__ */ n("path", { d: "M9 3v18" }),
-    /* @__PURE__ */ n("path", { d: "M15 3v18" })
+function Et({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, 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" }),
+    /* @__PURE__ */ r("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ r("path", { d: "M15 3v18" })
   ] });
 }
-function Oe({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("polyline", { points: "15 3 21 3 21 9" }),
-    /* @__PURE__ */ n("polyline", { points: "9 21 3 21 3 15" }),
-    /* @__PURE__ */ n("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
-    /* @__PURE__ */ n("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
+function Lt({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, 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 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 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 Be({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-    /* @__PURE__ */ n("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ n("path", { d: "M12 17h.01" })
+function Ot({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, 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 He({ size: e, ...t }) {
-  return /* @__PURE__ */ n("svg", { ...D(e), ...t, children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) });
+function At({ size: t, ...e }) {
+  return /* @__PURE__ */ r("svg", { ...D(t), ...e, children: /* @__PURE__ */ r("path", { d: "M20 6 9 17l-5-5" }) });
 }
-function Pe({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ n("path", { d: "m6 6 12 12" })
+function Nt({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, children: [
+    /* @__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" }) });
-}
-function Ve({ size: e, ...t }) {
-  return /* @__PURE__ */ d("svg", { ...D(e), ...t, children: [
-    /* @__PURE__ */ n("circle", { cx: "12", cy: "12", r: "4" }),
-    /* @__PURE__ */ n("path", { d: "M12 2v2" }),
-    /* @__PURE__ */ n("path", { d: "M12 20v2" }),
-    /* @__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" })
+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 Bt({ size: t, ...e }) {
+  return /* @__PURE__ */ m("svg", { ...D(t), ...e, children: [
+    /* @__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 ut = 20;
+function ct(t) {
+  return Math.round(t / ut) * ut;
 }
-function Se(e, t, r = 60) {
-  if (e.size === 0) return null;
-  let s = 1 / 0, a = 1 / 0, u = -1 / 0, m = -1 / 0;
-  for (const v of e.values())
-    s = Math.min(s, v.x), a = Math.min(a, v.y), u = Math.max(u, v.x + v.width), m = Math.max(m, v.y + v.height);
-  const f = u - s + r * 2, p = m - a + r * 2, 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;
+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;
   return {
     scale: Math.min(3, Math.max(0.2, N)),
     offset: {
-      x: w / 2 - M * N,
-      y: h / 2 - P * N
+      x: w / 2 - k * N,
+      y: d / 2 - P * N
     }
   };
 }
-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,
+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));
   return {
     scale: w,
     offset: {
-      x: a / 2 - (e.x + m / 2) * w,
-      y: u / 2 - (e.y + f / 2) * w
+      x: a / 2 - (t.x + h / 2) * w,
+      y: u / 2 - (t.y + f / 2) * w
     }
   };
 }
-const b = De((e, t) => ({
+const b = Xt((t, e) => ({
   offset: { x: 0, y: 0 },
   scale: 1,
   viewportSize: { width: 0, height: 0 },
   snapToGrid: !1,
-  snapGridSize: he,
+  snapGridSize: ut,
   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) => 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 }));
   },
-  unregister: (r) => {
-    t().panels.delete(r), e((s) => ({ registryVersion: s.registryVersion + 1 }));
+  unregister: (n) => {
+    e().panels.delete(n), t((s) => ({ registryVersion: s.registryVersion + 1 }));
   },
-  registerReset: (r, s) => {
-    t().resetFns.set(r, s);
+  registerReset: (n, s) => {
+    e().resetFns.set(n, s);
   },
-  unregisterReset: (r) => {
-    t().resetFns.delete(r);
+  unregisterReset: (n) => {
+    e().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: s } = e(), a = gt(n, s);
+    a && t({ scale: a.scale, offset: a.offset });
   },
-  focusPanel: (r, s) => {
-    const { viewportSize: a } = t(), u = je(
-      r,
+  focusPanel: (n, s) => {
+    const { viewportSize: a } = e(), u = Ht(
+      n,
       a,
       (s == null ? void 0 : s.padding) ?? 40,
       (s == null ? void 0 : s.maxScale) ?? 1.5
     );
-    e({ scale: u.scale, offset: u.offset });
+    t({ scale: u.scale, offset: u.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 s of e().resetFns.values()) s();
+    const n = (s = 0) => {
+      const { panels: a, viewportSize: u } = e(), h = gt(a, u);
+      if (h) {
+        t({ scale: h.scale, offset: h.offset });
         return;
       }
-      s < 6 && requestAnimationFrame(() => r(s + 1));
+      s < 6 && requestAnimationFrame(() => n(s + 1));
     };
-    requestAnimationFrame(() => requestAnimationFrame(() => r()));
+    requestAnimationFrame(() => requestAnimationFrame(() => n()));
   },
-  resetSession: () => e({
+  resetSession: () => t({
     offset: { x: 0, y: 0 },
     scale: 1,
     viewportSize: { width: 0, height: 0 },
@@ -182,102 +182,102 @@ 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 Vt({ extraActions: t }) {
+  const e = b((d) => d.scale), n = b((d) => d.viewportSize), s = b((d) => d.snapToGrid), a = b((d) => d.setScale), u = b((d) => d.setOffset), h = b((d) => d.setSnapToGrid), f = b((d) => d.fitToContent), p = b((d) => d.resetWidgets);
   Y(() => {
     s && window.dispatchEvent(new Event("whiteboard-snap-now"));
   }, [s]);
-  const w = (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
+  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);
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: "zoom-bar",
-      onPointerDown: (h) => h.stopPropagation(),
-      onWheel: (h) => h.stopPropagation(),
+      onPointerDown: (d) => d.stopPropagation(),
+      onWheel: (d) => d.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__ */ 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 * 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__ */ 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(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__action${s ? " is-active" : ""}`,
-            onClick: () => m((h) => !h),
+            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__ */ n(Ae, { size: 14 })
+            children: /* @__PURE__ */ r(Et, { size: 14 })
           }
         ),
-        e
+        t
       ]
     }
   );
 }
-const ee = 200, te = 150, de = 40, ke = 1;
-function Ze({ loading: e = !1 }) {
+const Q = 200, tt = 150, lt = 40, yt = 1;
+function jt({ loading: t = !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;
+  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), 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) => {
+    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(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 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));
-    m(F), u({
+    h(F), u({
       x: v / 2 - i * F,
-      y: z / 2 - y * F
+      y: _ / 2 - y * F
     });
-  }, 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);
+  }, nt = (i, y) => {
+    const S = J(i, y);
+    S && K(S.worldX, S.worldY, n);
+  }, ft = (i) => {
+    i.stopPropagation(), i.preventDefault(), w.current = !0, i.currentTarget.setPointerCapture(i.pointerId), nt(i.clientX, i.clientY);
   }, o = (i) => {
-    w.current && se(i.clientX, i.clientY);
+    w.current && nt(i.clientX, i.clientY);
   }, g = () => {
     w.current = !1;
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     "div",
     {
       ref: p,
-      onPointerDown: ge,
+      onPointerDown: ft,
       onPointerMove: o,
       onPointerUp: g,
       onPointerCancel: g,
       onWheel: (i) => {
         i.preventDefault(), i.stopPropagation();
-        const y = Q(i.clientX, i.clientY);
+        const y = J(i.clientX, i.clientY);
         if (!y) return;
         const S = i.deltaY > 0 ? 0.9 : 1.1;
-        J(y.worldX, y.worldY, r * S);
+        K(y.worldX, y.worldY, n * S);
       },
       className: "minimap",
       style: {
-        width: ee,
-        height: te
+        width: Q,
+        height: tt
       },
       children: [
-        M.map(([i, y]) => /* @__PURE__ */ n(
+        k.map(([i, y]) => /* @__PURE__ */ r(
           "div",
           {
             className: "minimap__panel",
@@ -286,18 +286,18 @@ 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 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;
                 return;
               }
-              h.current = { id: i, time: F };
+              d.current = { id: i, time: F };
             },
             onDoubleClick: (S) => {
               S.preventDefault(), S.stopPropagation(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale });
             },
             style: {
-              left: K(y.x),
+              left: q(y.x),
               top: j(y.y),
               width: Math.max(1, y.width * C),
               height: Math.max(1, y.height * C)
@@ -305,15 +305,15 @@ function Ze({ loading: e = !1 }) {
           },
           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 * C,
+              height: B * C
             }
           }
         )
@@ -321,98 +321,98 @@ 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 fe({ children: t, showMinimap: e = !0, minimapLoading: n = !1, extraActions: s }) {
+  const a = b((c) => c.offset), u = b((c) => c.scale), h = b((c) => c.registryVersion), f = b((c) => c.viewportSize), p = b((c) => c.setOffset), w = b((c) => c.setScale), d = b((c) => c.setViewportSize), N = M(null), k = M(!1), P = M({ x: 0, y: 0 }), v = M(null), _ = M(u), E = M(!1);
   Y(() => () => {
     b.getState().resetSession();
   }, []), Y(() => {
-    z.current = u;
+    _.current = u;
   }, [u]), Y(() => {
     const c = N.current;
     if (!c) return;
-    const R = () => {
-      const _ = c.getBoundingClientRect();
-      h({
-        width: Math.max(0, _.width),
-        height: Math.max(0, _.height)
+    const T = () => {
+      const z = c.getBoundingClientRect();
+      d({
+        width: Math.max(0, z.width),
+        height: Math.max(0, z.height)
       });
     };
-    if (R(), typeof ResizeObserver > "u") return;
-    const W = new ResizeObserver(R);
-    return W.observe(c), () => W.disconnect();
-  }, [h]), Y(() => {
-    if (L.current) return;
+    if (T(), typeof ResizeObserver > "u") return;
+    const R = new ResizeObserver(T);
+    return R.observe(c), () => R.disconnect();
+  }, [d]), Y(() => {
+    if (E.current) return;
     const { panels: c } = b.getState();
-    c.size === 0 || f.width <= 0 || f.height <= 0 || (L.current = !0, requestAnimationFrame(() => {
+    c.size === 0 || f.width <= 0 || f.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) => {
+  }, [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)
       try {
         c.currentTarget.releasePointerCapture(v.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);
+    k.current = !1, v.current = null;
+  }, []), I = $((c) => {
+    const T = _.current, R = c.currentTarget.getBoundingClientRect(), z = { x: c.clientX - R.left, y: c.clientY - R.top }, A = Math.min(3, Math.max(0.2, T * (c.deltaY > 0 ? 0.9 : 1.1))), C = A / T;
+    p((L) => ({
+      x: z.x - (z.x - L.x) * C,
+      y: z.y - (z.y - L.y) * C
+    })), w(A);
   }, [p, w]);
-  return /* @__PURE__ */ d(re, { children: [
-    /* @__PURE__ */ n(
+  return /* @__PURE__ */ m(et, { children: [
+    /* @__PURE__ */ r(
       "div",
       {
         ref: N,
-        onPointerDown: H,
-        onPointerMove: $,
+        onPointerDown: B,
+        onPointerMove: H,
         onPointerUp: V,
         onPointerCancel: V,
         onWheel: I,
         onContextMenu: (c) => c.preventDefault(),
         className: "whiteboard-shell",
-        children: /* @__PURE__ */ d(
+        children: /* @__PURE__ */ m(
           "div",
           {
             className: "whiteboard-canvas",
             style: { transform: `translate(${a.x}px, ${a.y}px) scale(${u})` },
             children: [
-              /* @__PURE__ */ n("div", { className: "whiteboard-grid", "aria-hidden": !0 }),
-              e
+              /* @__PURE__ */ r("div", { className: "whiteboard-grid", "aria-hidden": !0 }),
+              t
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ n(Ue, { extraActions: s }),
-    t ? /* @__PURE__ */ n(Ze, { loading: r }) : null
+    /* @__PURE__ */ r(Vt, { extraActions: s }),
+    e ? /* @__PURE__ */ r(jt, { loading: n }) : null
   ] });
 }
-const St = Re(function({
-  title: t,
-  defaultPosition: r,
+const be = Ct(function({
+  title: e,
+  defaultPosition: n,
   width: s = 300,
   className: a,
   trackRect: u,
-  focusable: m,
+  focusable: h,
   focusPadding: f = 40,
   focusMaxScale: p = 1.5,
   headerActions: w,
-  children: h
+  children: d
 }) {
-  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 N = Tt(), [k, P] = vt(n), v = M(!1), _ = M(k), E = M(null), B = M(null), H = b((o) => o.scale), V = b((o) => o.snapToGrid), I = b((o) => o.snapGridSize), c = b((o) => o.register), T = b((o) => o.unregister), R = b((o) => o.registerReset), z = b((o) => o.unregisterReset), A = b((o) => o.focusPanel), C = M(H), L = M(!1), Z = M(20), U = M(n), X = M(null), q = M(null);
   Y(() => {
-    C.current = $;
-  }, [$]), Y(() => {
-    E.current = V, Z.current = I;
+    C.current = H;
+  }, [H]), Y(() => {
+    L.current = V, Z.current = I;
   }, [V, I]), Y(() => {
     const o = () => {
       const g = Z.current;
@@ -426,156 +426,156 @@ const St = Re(function({
     };
     return window.addEventListener("whiteboard-snap-now", o), () => window.removeEventListener("whiteboard-snap-now", o);
   }, []), Y(() => {
-    z.current = M;
-  }, [M]);
-  const j = B(() => {
-    const o = L.current;
+    _.current = k;
+  }, [k]);
+  const j = $(() => {
+    const o = E.current;
     if (!o) return;
     const g = {
-      x: z.current.x,
-      y: z.current.y,
+      x: _.current.x,
+      y: _.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;
+    }, 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: z.current.x,
-      y: z.current.y,
+      x: _.current.x,
+      y: _.current.y,
       width: o.offsetWidth,
       height: o.offsetHeight,
       focusPadding: f,
       focusMaxScale: p
     } : 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)), () => {
+  }, [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), R(N), _(N), H.current = null;
-  }), [N, W, R, _]), Xe(() => {
+    (o = X.current) == null || o.call(X), T(N), z(N), B.current = null;
+  }), [N, R, T, z]), Rt(() => {
     j();
-  }, [M.x, M.y, s, j]), Y(() => {
-    const o = L.current;
+  }, [k.x, k.y, s, j]), Y(() => {
+    const o = E.current;
     if (!o || typeof ResizeObserver > "u") return;
     const g = new ResizeObserver(() => {
       j();
     });
     return g.observe(o), () => g.disconnect();
   }, [j]);
-  const se = B((o) => {
-    var ae;
+  const nt = $((o) => {
+    var rt;
     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;
+    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 = (ie) => {
+    const F = (st) => {
       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;
+      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: Ce,
-        y: Te
+        x: _t,
+        y: zt
       });
-    }, A = () => {
-      v.current = !1, window.removeEventListener("pointermove", F), window.removeEventListener("pointerup", A), X.current = null;
+    }, O = () => {
+      v.current = !1, window.removeEventListener("pointermove", F), 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";
-  return /* @__PURE__ */ d(
+    (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(
     "div",
     {
-      ref: L,
-      className: ge,
-      style: { left: M.x, top: M.y, width: s },
+      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 = K.current;
+        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(), J(), K.current = null;
+            o.stopPropagation(), K(), q.current = null;
             return;
           }
         }
-        K.current = { time: g, x: o.clientX, y: o.clientY };
+        q.current = { time: g, x: o.clientX, y: o.clientY };
       },
       onWheel: (o) => o.stopPropagation(),
       onDoubleClick: (o) => {
-        o.stopPropagation(), J();
+        o.stopPropagation(), K();
       },
       children: [
-        /* @__PURE__ */ d("div", { onPointerDown: se, className: "floating-panel__header", children: [
-          /* @__PURE__ */ n("strong", { className: "floating-panel__title", children: t }),
+        /* @__PURE__ */ m("div", { onPointerDown: nt, className: "floating-panel__header", children: [
+          /* @__PURE__ */ r("strong", { className: "floating-panel__title", children: e }),
           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,
+              onClick: K,
               onPointerDown: (o) => o.stopPropagation(),
               title: "Focus on this panel",
               "aria-label": "Focus on this panel",
-              children: /* @__PURE__ */ n(Oe, { size: 14 })
+              children: /* @__PURE__ */ r(Lt, { size: 14 })
             }
           )
         ] }),
-        /* @__PURE__ */ n("div", { className: "floating-panel__body", children: h })
+        /* @__PURE__ */ r("div", { className: "floating-panel__body", children: d })
       ]
     }
   );
 });
-function kt(e) {
-  return k({ ...e, width: 0, height: 0 });
+function we(t) {
+  return M({ ...t, width: 0, height: 0 });
 }
-function Mt(e, t = he) {
-  return { x: e.x, y: e.y + e.height + t };
+function ge(t, e = ut) {
+  return { x: t.x, y: t.y + t.height + e };
 }
-function Pt({
-  open: e,
-  title: t,
-  message: r,
+function ye({
+  open: t,
+  title: e,
+  message: n,
   onConfirm: s,
   onCancel: a,
   confirmLabel: u = "Confirm",
-  loadingLabel: m,
+  loadingLabel: h,
   loading: f,
   error: p
 }) {
   return Y(() => {
-    if (!e) return;
-    const w = (h) => {
-      h.key === "Escape" && a();
+    if (!t) return;
+    const w = (d) => {
+      d.key === "Escape" && a();
     };
     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(
+  }, [t, a]), !t || typeof document > "u" ? null : Yt(
+    /* @__PURE__ */ r("div", { className: "confirm-modal-overlay", onMouseDown: a, children: /* @__PURE__ */ m(
       "div",
       {
         className: "confirm-modal",
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": t,
+        "aria-label": e,
         onMouseDown: (w) => w.stopPropagation(),
         children: [
-          /* @__PURE__ */ d("div", { className: "confirm-modal__header", children: [
-            /* @__PURE__ */ d("span", { className: "confirm-modal__title", children: [
-              /* @__PURE__ */ n(Be, { size: 16 }),
-              t
+          /* @__PURE__ */ m("div", { className: "confirm-modal__header", children: [
+            /* @__PURE__ */ m("span", { className: "confirm-modal__title", children: [
+              /* @__PURE__ */ r(Ot, { size: 16 }),
+              e
             ] }),
-            /* @__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: a, "aria-label": "Close dialog", children: /* @__PURE__ */ r(Nt, { size: 14 }) })
           ] }),
-          /* @__PURE__ */ n("p", { className: "confirm-modal__message", children: r }),
-          p && /* @__PURE__ */ n("div", { className: "wb-alert wb-alert--error", children: p }),
-          /* @__PURE__ */ d("div", { className: "wb-btn-row", children: [
-            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: a, children: "Cancel" }),
-            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: s, disabled: f, children: f ? m ?? `${u}…` : /* @__PURE__ */ d(re, { children: [
-              /* @__PURE__ */ n(He, { 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
             ] }) })
           ] })
@@ -585,17 +585,17 @@ function Pt({
     document.body
   );
 }
-class zt extends Ye {
+class ve extends Wt {
   constructor() {
     super(...arguments), this.state = { error: null };
   }
-  static getDerivedStateFromError(t) {
-    return { error: t };
+  static getDerivedStateFromError(e) {
+    return { error: e };
   }
   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(
+    return this.state.error ? /* @__PURE__ */ m("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",
         {
           type: "button",
@@ -607,634 +607,604 @@ class zt extends Ye {
     ] }) : this.props.children;
   }
 }
-function _t({
-  widths: e,
-  startX: t = 20,
-  y: r = 40,
+function Ne({
+  widths: t,
+  startX: e = 20,
+  y: n = 40,
   gap: s = 20
 }) {
-  const a = ye(() => {
+  const a = bt(() => {
     const f = {};
-    for (const [p, w] of Object.entries(e))
-      f[p] = ue(w);
+    for (const [p, w] of Object.entries(t))
+      f[p] = ct(w);
     return f;
-  }, [e]), u = ye(
+  }, [t]), u = bt(
     () => ({
-      startX: ue(t),
-      y: ue(r),
-      gap: ue(s)
+      startX: ct(e),
+      y: ct(n),
+      gap: ct(s)
     }),
-    [t, r, s]
-  ), m = ye(() => {
+    [e, n, s]
+  ), h = bt(() => {
     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;
+    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: m };
+  return { layout: u, panelWidth: a, positions: h };
 }
-function l(...e) {
-  return e.filter(Boolean).join(" ");
+function l(...t) {
+  return t.filter(Boolean).join(" ");
 }
-const qe = {
+const Zt = {
   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 xe({ tone: t = "info", className: e, ...n }) {
+  return /* @__PURE__ */ r("p", { className: l(Zt[t], e), ...n });
 }
-function Tt({ className: e, ...t }) {
-  return /* @__PURE__ */ n("span", { className: l("avatar-badge", e), ...t });
+function Se({ className: t, ...e }) {
+  return /* @__PURE__ */ r("span", { className: l("avatar-badge", t), ...e });
 }
-const Ke = {
+const Ut = {
   primary: "",
   secondary: "wb-btn--secondary",
   danger: "wb-btn--danger"
-}, ze = me(function({
-  variant: t = "primary",
-  fullWidth: r = !1,
+}, xt = dt(function({
+  variant: e = "primary",
+  fullWidth: n = !1,
   iconOnly: s = !1,
   loading: a = !1,
   type: u = "button",
-  disabled: m,
+  disabled: h,
   className: f,
   children: p,
   loadingText: w,
-  ...h
+  ...d
 }, N) {
-  return /* @__PURE__ */ n(
+  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" }),
+      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
     }
   );
 });
-function Je({ as: e = "div", className: t, ...r }) {
-  return T(e, {
-    className: l("button-row", t),
-    ...r
+function qt({ as: t = "div", className: e, ...n }) {
+  return W(t, {
+    className: l("button-row", e),
+    ...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: [
-    e,
-    t && /* @__PURE__ */ n("p", { className: "canvas-hint", children: t })
+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 Wt({ className: e, ...t }) {
-  return /* @__PURE__ */ n("span", { className: l("chip", e), ...t });
+function ke({ className: t, ...e }) {
+  return /* @__PURE__ */ r("span", { className: l("chip", t), ...e });
 }
-function Qe({ active: e = !1, className: t, ...r }) {
-  return /* @__PURE__ */ n(
+function Kt({ active: t = !1, className: e, ...n }) {
+  return /* @__PURE__ */ r(
     "button",
     {
       type: "button",
-      className: l("choice-card", t),
-      "data-active": e,
-      ...r
+      className: l("choice-card", e),
+      "data-active": t,
+      ...n
     }
   );
 }
-function fe({ as: e = "ul", reset: t = !0, className: r, ...s }) {
-  return T(e, {
-    className: l(t && "list-reset", r),
+function mt({ as: t = "ul", reset: e = !0, className: n, ...s }) {
+  return W(t, {
+    className: l(e && "list-reset", n),
     ...s
   });
 }
-const et = {
+const Jt = {
   sm: "",
   md: "skeleton--md",
   pill: "skeleton--pill"
 };
-function G({ as: e = "div", radius: t = "sm", className: r, ...s }) {
-  return T(e, {
-    className: l("skeleton", et[t], r),
+function G({ as: t = "div", radius: e = "sm", className: n, ...s }) {
+  return W(t, {
+    className: l("skeleton", Jt[e], n),
     "aria-hidden": !0,
     ...s
   });
 }
-function tt(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-input", t), ...r });
+function Qt(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-input", e), ...n });
 }
-function ve(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-btn", t), ...r });
+function St(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-btn", e), ...n });
 }
-function Xt(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-icon-btn", t), ...r });
+function Pe(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-icon-btn", e), ...n });
 }
-function nt(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-select", t), ...r });
+function _e(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-select", e), ...n });
 }
-function Yt(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-textarea", t), ...r });
+function ze(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-textarea", e), ...n });
 }
-function Ne(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-thumb", t), ...r });
+function Mt(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-thumb", e), ...n });
 }
-function ne(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { radius: "pill", className: l("skeleton-chip", t), ...r });
+function te(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { radius: "pill", className: l("skeleton-chip", e), ...n });
 }
-function be(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-title", t), ...r });
+function kt(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-title", e), ...n });
 }
-function we({ short: e = !1, className: t, ...r }) {
-  return /* @__PURE__ */ n(G, { className: l("skeleton-line", e && "skeleton-line--short", t), ...r });
+function wt({ short: t = !1, className: e, ...n }) {
+  return /* @__PURE__ */ r(G, { className: l("skeleton-line", t && "skeleton-line--short", e), ...n });
 }
-function rt(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { radius: "pill", className: l("skeleton-avatar", t), ...r });
+function Ce(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { radius: "pill", className: l("skeleton-avatar", e), ...n });
 }
-function Dt(e) {
-  const { className: t, ...r } = e;
-  return /* @__PURE__ */ n(G, { className: l("skeleton-canvas", t), ...r });
+function Te(t) {
+  const { className: e, ...n } = t;
+  return /* @__PURE__ */ r(G, { className: l("skeleton-canvas", e), ...n });
 }
-function It({
-  options: e,
-  value: t,
-  onChange: r,
+function Re({
+  options: t,
+  value: e,
+  onChange: n,
   className: s
 }) {
-  return /* @__PURE__ */ n(fe, { className: l("choice-list", s), children: e.map((a) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-    Qe,
+  return /* @__PURE__ */ r(mt, { className: l("choice-list", s), children: t.map((a) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+    Kt,
     {
-      active: t === a.value,
-      onClick: () => r(a.value),
+      active: e === a.value,
+      onClick: () => n(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 })
+      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 })
     }
   ) }, a.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
+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 Gt({ className: e, ...t }) {
-  return /* @__PURE__ */ n("div", { className: l("coord-grid", e), ...t });
+function Xe({ className: t, ...e }) {
+  return /* @__PURE__ */ r("div", { className: l("coord-grid", t), ...e });
 }
-function Lt({ axis: e, className: t, ...r }) {
-  return /* @__PURE__ */ d("label", { className: l("coord-input", t), children: [
-    e,
+function Ye({ axis: t, className: e, ...n }) {
+  return /* @__PURE__ */ m("label", { className: l("coord-input", e), children: [
+    t,
     " ",
-    /* @__PURE__ */ n("input", { type: "number", step: "0.01", ...r })
+    /* @__PURE__ */ r("input", { type: "number", step: "0.01", ...n })
   ] });
 }
-function U({
-  as: e,
-  size: t = "md",
-  className: r,
+function pt({
+  as: t,
+  size: e = "md",
+  className: n,
   ...s
 }) {
-  return T(e ?? "div", {
-    className: l(t === "sm" ? "panel-stack-sm" : "panel-stack", r),
+  return W(t ?? "div", {
+    className: l(e === "sm" ? "panel-stack-sm" : "panel-stack", n),
     ...s
   });
 }
-const st = {
+const ee = {
   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),
+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 Et({ as: e = "h3", className: t, ...r }) {
-  return T(e, {
-    className: l("story-title", t),
-    ...r
+function De({ as: t = "h1", className: e, ...n }) {
+  return W(t, {
+    className: l("page-title", e),
+    ...n
   });
 }
-function _e({ as: e = "p", size: t = "sm", className: r, ...s }) {
-  return T(e, {
-    className: l(st[t], "text-muted", r),
-    ...s
-  });
-}
-function At({ as: e = "h1", className: t, ...r }) {
-  return T(e, {
-    className: l("page-title", t),
-    ...r
+function re({ as: t = "span", className: e, ...n }) {
+  return W(t, {
+    className: l("widget-section__title", e),
+    ...n
   });
 }
-function it({ as: e = "span", className: t, ...r }) {
-  return T(e, {
-    className: l("widget-section__title", t),
-    ...r
+function se({ as: t = "p", className: e, ...n }) {
+  return W(t, {
+    className: l("widget-section__description", e),
+    ...n
   });
 }
-function ot({ as: e = "p", className: t, ...r }) {
-  return T(e, {
-    className: l("widget-section__description", t),
-    ...r
+function Pt({ as: t = "p", size: e = "sm", className: n, ...s }) {
+  return W(t, {
+    className: l(ee[e], "text-muted", n),
+    ...s
   });
 }
-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 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,
+    n
   ] });
 }
-function ct({ className: e, ...t }) {
-  return /* @__PURE__ */ n("label", { className: l("widget-label", e), ...t });
+function ae({ className: t, ...e }) {
+  return /* @__PURE__ */ r("label", { className: l("widget-label", t), ...e });
 }
-function Bt({
-  as: e,
-  label: t,
-  htmlFor: r,
+function Fe({
+  as: t,
+  label: e,
+  htmlFor: n,
   hint: s,
   error: a,
   layout: u = "stack",
-  className: m,
+  className: h,
   children: f,
   ...p
 }) {
-  return T(
-    e ?? "div",
+  return W(
+    t ?? "div",
     {
-      className: l(u === "control" ? "widget-control" : "panel-stack-sm", m),
+      className: l(u === "control" ? "widget-control" : "panel-stack-sm", h),
       ...p
     },
-    /* @__PURE__ */ d(re, { children: [
-      t ? /* @__PURE__ */ n(ct, { htmlFor: r, children: t }) : null,
+    /* @__PURE__ */ m(et, { children: [
+      e ? /* @__PURE__ */ r(ae, { htmlFor: n, children: e }) : null,
       f,
-      s ? /* @__PURE__ */ n(_e, { size: "xs", children: s }) : null,
-      a ? /* @__PURE__ */ n("p", { className: "field-error", children: a }) : null
+      s ? /* @__PURE__ */ r(Pt, { size: "xs", children: s }) : null,
+      a ? /* @__PURE__ */ r("p", { className: "field-error", children: a }) : null
     ] })
   );
 }
-function Ht({ isGenerating: e, children: t, message: r }) {
-  return /* @__PURE__ */ d("div", { className: "generating-overlay-wrap", children: [
-    t,
-    e && /* @__PURE__ */ d("div", { className: "generating-overlay", "aria-live": "polite", children: [
-      /* @__PURE__ */ n(pe, { size: 20, className: "icon-spin" }),
-      /* @__PURE__ */ n("span", { children: r ?? "Generating, please wait…" })
+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" }),
+      /* @__PURE__ */ r("span", { children: n ?? "Generating, please wait…" })
     ] })
   ] });
 }
-function $t({ as: e = "span", icon: t, className: r, children: s, ...a }) {
-  return T(
-    e,
+function Ee({ as: t = "span", icon: e, className: n, children: s, ...a }) {
+  return W(
+    t,
     {
-      className: l("inline-row", r),
+      className: l("inline-row", n),
       ...a
     },
-    /* @__PURE__ */ d(re, { children: [
-      t,
+    /* @__PURE__ */ m(et, { children: [
+      e,
       s
     ] })
   );
 }
-function Vt({
-  src: e,
-  alt: t,
-  placeholder: r = "No image",
+function Le({
+  src: t,
+  alt: e,
+  placeholder: n = "No image",
   size: s = "md",
   fit: a = "contain",
   onImageError: u,
-  className: m,
+  className: h,
   ...f
 }) {
-  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 [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(
     "img",
     {
-      src: e,
-      alt: t,
+      src: t,
+      alt: e,
       className: "image-thumb__img",
       style: { objectFit: a, objectPosition: "center" },
       onError: () => {
-        w(e), u == null || u();
+        w(t), u == null || u();
       }
     }
-  ) : /* @__PURE__ */ n("span", { className: "image-thumb__placeholder", children: r }) });
+  ) : /* @__PURE__ */ r("span", { className: "image-thumb__placeholder", children: n }) });
 }
-function lt({
-  as: e,
-  justify: t = "start",
-  className: r,
+function Oe({
+  as: t,
+  justify: e = "start",
+  className: n,
   ...s
 }) {
-  return T(e ?? "div", {
-    className: l(t === "between" ? "space-between" : t === "end" ? "space-end" : "inline-row", r),
+  return W(t ?? "div", {
+    className: l(e === "between" ? "space-between" : e === "end" ? "space-end" : "inline-row", n),
     ...s
   });
 }
-const jt = me(function({ className: t, ...r }, s) {
-  return /* @__PURE__ */ n("input", { ref: s, className: l(t), ...r });
+const Ae = dt(function({ className: e, ...n }, s) {
+  return /* @__PURE__ */ r("input", { ref: s, className: l(e), ...n });
 });
-function xe({ as: e = "div", className: t, ...r }) {
-  return T(e, {
-    className: l("item-card", t),
-    ...r
+function ie({ as: t = "div", className: e, ...n }) {
+  return W(t, {
+    className: l("item-card", e),
+    ...n
   });
 }
-function ut({ as: e = "div", className: t, ...r }) {
-  return T(e, {
-    className: l("item-list", t),
-    ...r
+function $e({ as: t = "div", className: e, ...n }) {
+  return W(t, {
+    className: l("item-list", e),
+    ...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" }),
-    e
+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({
-  className: e,
-  placement: t,
-  onPointerDown: r,
+function He({
+  className: t,
+  placement: e,
+  onPointerDown: n,
   onWheel: s,
   onContextMenu: a,
   ...u
 }) {
-  return /* @__PURE__ */ n(
-    ze,
+  return /* @__PURE__ */ r(
+    xt,
     {
       variant: "secondary",
       iconOnly: !0,
-      className: l("overlay-icon-btn", t && `overlay-icon-btn--${t}`, e),
-      onPointerDown: (m) => {
-        m.stopPropagation(), r == null || r(m);
+      className: l("overlay-icon-btn", e && `overlay-icon-btn--${e}`, t),
+      onPointerDown: (h) => {
+        h.stopPropagation(), n == null || n(h);
       },
-      onWheel: (m) => {
-        m.stopPropagation(), s == null || s(m);
+      onWheel: (h) => {
+        h.stopPropagation(), s == null || s(h);
       },
-      onContextMenu: (m) => {
-        m.stopPropagation(), a == null || a(m);
+      onContextMenu: (h) => {
+        h.stopPropagation(), a == null || a(h);
       },
       ...u
     }
   );
 }
-function qt({ children: e, className: t, ...r }) {
-  return /* @__PURE__ */ n("main", { className: l("page-shell", t), ...r, children: e });
+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, ...r }) {
-  return /* @__PURE__ */ n("div", { className: l("page-card", t), ...r, children: e });
+function je({ children: t, className: e, ...n }) {
+  return /* @__PURE__ */ r("div", { className: l("page-card", e), ...n, children: t });
 }
-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 }),
-    t
+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({ 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 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,
+      n
     ] }) : null,
-    t ? /* @__PURE__ */ n(ot, { children: t }) : null,
+    e ? /* @__PURE__ */ r(se, { children: e }) : null,
     a
   ] });
 }
-function en({ icon: e, label: t }) {
-  return /* @__PURE__ */ d("span", { className: "panel-title-with-icon", children: [
-    /* @__PURE__ */ n(e, { size: 13, className: "panel-title-icon" }),
-    /* @__PURE__ */ n("span", { children: t })
+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 dt({ as: e = "button", className: t, ...r }) {
-  return T(e, {
-    className: l("picker-card", t),
-    ...r
+function oe({ as: t = "button", className: e, ...n }) {
+  return W(t, {
+    className: l("picker-card", e),
+    ...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 Ke({ minItemWidth: t = 120, className: e, style: n, ...s }) {
+  const a = {
+    gridTemplateColumns: `repeat(auto-fill, minmax(${t}px, 1fr))`,
+    ...n
+  };
+  return /* @__PURE__ */ r(mt, { className: l("picker-grid", e), style: a, ...s });
 }
-const mt = {
+const ce = {
   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 Je({ tone: t = "default", className: e, ...n }) {
+  return /* @__PURE__ */ r("span", { className: l("pill", ce[t], e), ...n });
+}
+const Qe = dt(function({ className: e, ...n }, s) {
+  return /* @__PURE__ */ r("select", { ref: s, className: l(e), ...n });
+}), le = {
+  "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 tn({ variant: t, className: e, ...n }) {
+  return /* @__PURE__ */ r("div", { className: l("split-layout", le[t], e), ...n });
 }
-function bt({ className: e, ...t }) {
-  return /* @__PURE__ */ n("div", { className: l("tag-row", e), ...t });
+function ue({ className: t, ...e }) {
+  return /* @__PURE__ */ r("div", { className: l("tag-row", t), ...e });
 }
-const sn = me(function({ className: t, ...r }, s) {
-  return /* @__PURE__ */ n("textarea", { ref: s, className: l(t), ...r });
+const en = dt(function({ className: e, ...n }, s) {
+  return /* @__PURE__ */ r("textarea", { ref: s, className: l(e), ...n });
 });
-function an({ className: e, theme: t = "light", onToggle: r, lightIcon: s, darkIcon: a }) {
-  return /* @__PURE__ */ n(
+function nn({ className: t, theme: e = "light", onToggle: n, lightIcon: s, darkIcon: a }) {
+  return /* @__PURE__ */ r(
     "button",
     {
       type: "button",
-      className: l("wb-btn", "wb-btn--secondary", "wb-btn--icon-only", e),
-      onClick: r,
-      title: `Switch to ${t === "light" ? "dark" : "light"} mode`,
+      className: l("wb-btn", "wb-btn--secondary", "wb-btn--icon-only", t),
+      onClick: n,
+      title: `Switch to ${e === "light" ? "dark" : "light"} mode`,
       "aria-label": "Toggle theme",
-      children: t === "light" ? a ?? /* @__PURE__ */ n($e, { size: 14 }) : s ?? /* @__PURE__ */ n(Ve, { size: 14 })
+      children: e === "light" ? a ?? /* @__PURE__ */ r($t, { size: 14 }) : s ?? /* @__PURE__ */ r(Bt, { size: 14 })
     }
   );
 }
-function on({ className: e, ...t }) {
-  return /* @__PURE__ */ n("div", { className: l("title-row", e), ...t });
+function rn({ className: t, ...e }) {
+  return /* @__PURE__ */ r("div", { className: l("title-row", t), ...e });
 }
-function cn({
-  children: e,
-  bottom: t,
-  position: r = "left",
+function sn({
+  children: t,
+  bottom: e,
+  position: n = "left",
   className: s,
   ...a
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     "nav",
     {
       className: l(
         "vertical-toolbar",
-        r === "right" && "vertical-toolbar--right",
-        r === "static" && "vertical-toolbar--static",
+        n === "right" && "vertical-toolbar--right",
+        n === "static" && "vertical-toolbar--static",
         s
       ),
       ...a,
       children: [
-        /* @__PURE__ */ n("div", { className: "vertical-toolbar__links", children: e }),
-        t
+        /* @__PURE__ */ r("div", { className: "vertical-toolbar__links", children: t }),
+        e
       ]
     }
   );
 }
-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 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 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 on({
+  withThumb: t = !0,
+  chipCount: e = 0,
+  actionCount: n = 0,
+  className: s,
+  ...a
+}) {
+  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 })
     ] }),
-    /* @__PURE__ */ d(Je, { children: [
-      /* @__PURE__ */ n(ve, {}),
-      /* @__PURE__ */ n(ve, {})
-    ] })
+    n > 0 ? /* @__PURE__ */ r(qt, { children: Array.from({ length: n }).map((u, h) => /* @__PURE__ */ r(St, {}, `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 cn({ count: t = 8, minItemWidth: e = 120 }) {
+  return /* @__PURE__ */ r(
+    mt,
+    {
+      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}`))
+    }
+  );
 }
 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,
-  Ft as ChoiceGroupSkeleton,
-  Pt as ConfirmDialog,
-  Gt as CoordGrid,
-  Lt as CoordInput,
-  Ot as EmptyState,
-  Bt as Field,
-  St as FloatingPanel,
-  Ht as GeneratingOverlay,
-  Xt 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,
-  we as LineSkeleton,
-  fe as List,
-  Ut as LoadingState,
-  Ze 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,
+  xe as Alert,
+  Se as AvatarBadge,
+  Ce as AvatarSkeleton,
+  xt as Button,
+  qt as ButtonRow,
+  St as ButtonSkeleton,
+  Te as CanvasSkeleton,
+  Me as CanvasStage,
+  on as CardSkeleton,
+  ne as CardTitle,
+  ke as Chip,
+  te as ChipSkeleton,
+  Kt as ChoiceCard,
+  Re as ChoiceGroup,
+  We as ChoiceGroupSkeleton,
+  ye as ConfirmDialog,
+  Xe as CoordGrid,
+  Ye as CoordInput,
+  Ie as EmptyState,
+  Fe as Field,
+  be as FloatingPanel,
+  Ge as GeneratingOverlay,
+  Pe as IconButtonSkeleton,
+  Ee as IconText,
+  Le as ImageThumb,
+  Oe as Inline,
+  Ae as Input,
+  Qt as InputSkeleton,
+  ie as ItemCard,
+  $e as ItemList,
+  ae as Label,
+  wt as LineSkeleton,
+  mt as List,
+  Be as LoadingState,
+  jt as Minimap,
+  Pt as MutedText,
+  He as OverlayIconButton,
+  je as PageCard,
+  Ve as PageShell,
+  De as PageTitle,
+  Ze as PanelCloseButton,
+  ve as PanelErrorBoundary,
+  an as PanelFormSkeleton,
+  Ue as PanelSection,
+  qe as PanelTitle,
+  oe as PickerCard,
+  Ke as PickerGrid,
+  cn as PickerGridSkeleton,
+  Je as Pill,
+  se as SectionDescription,
+  re as SectionTitle,
+  Qe as Select,
+  _e as SelectSkeleton,
   G as Skeleton,
-  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,
+  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,
-  Se as computeWhiteboardFit,
-  je as computeWhiteboardRectFocus,
-  ue as snapToWhiteboardGrid,
-  kt as usePanelRect,
-  _t as useWhiteboardLayout,
+  gt as computeWhiteboardFit,
+  Ht as computeWhiteboardRectFocus,
+  ct as snapToWhiteboardGrid,
+  we as usePanelRect,
+  Ne as useWhiteboardLayout,
   b as useWhiteboardStore
 };