@objectifthunes/whiteboard 0.1.1 → 0.2.1

package/dist/index.js

@@ -1,15 +1,11 @@
-// src/WhiteboardShell.tsx
-import { useRef as useRef2, useCallback, useEffect as useEffect2 } from "react";
-
-// src/ZoomBar.tsx
-import { useEffect } from "react";
-
-// src/icons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var defaults = (size = 14) => ({
+import { jsx as n, jsxs as d, Fragment as re } from "react/jsx-runtime";
+import { useEffect as X, useRef as S, useCallback as H, memo as Te, useId as Re, useState as Se, useLayoutEffect as We, Component as De, useMemo as ye, forwardRef as me, createElement as T } from "react";
+import { create as Xe } from "zustand";
+import { createPortal as Ye } from "react-dom";
+const Y = (e = 14) => ({
   xmlns: "http://www.w3.org/2000/svg",
-  width: size,
-  height: size,
+  width: e,
+  height: e,
   viewBox: "0 0 24 24",
   fill: "none",
   stroke: "currentColor",
@@ -17,403 +13,308 @@ var defaults = (size = 14) => ({
   strokeLinecap: "round",
   strokeLinejoin: "round"
 });
-function Minus({ size, ...props }) {
-  return /* @__PURE__ */ jsx("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+function Fe({ size: e, ...t }) {
+  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M5 12h14" }) });
 }
-function Plus({ size, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
+function Ge({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+    /* @__PURE__ */ n("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ n("path", { d: "M12 5v14" })
   ] });
 }
-function ScanSearch({ size, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z", fill: "none", stroke: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
-    /* @__PURE__ */ jsx("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
-    /* @__PURE__ */ jsx("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ jsx("path", { d: "m16 16-1.9-1.9" })
+function Ie({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+    /* @__PURE__ */ n("path", { d: "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z", fill: "none", stroke: "none" }),
+    /* @__PURE__ */ n("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+    /* @__PURE__ */ n("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+    /* @__PURE__ */ n("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+    /* @__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 RotateCcw({ size, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
+function Le({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(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 Grid3x3({ size, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
-    /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
-    /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
-    /* @__PURE__ */ jsx("path", { d: "M15 3v18" })
+function Ee({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(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 Maximize2({ size, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
-    /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
-    /* @__PURE__ */ jsx("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
-    /* @__PURE__ */ jsx("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
+function Ae({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(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 Loader2({ size, ...props }) {
-  return /* @__PURE__ */ jsx("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+function fe({ size: e, ...t }) {
+  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 }
-function AlertTriangle({ size, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ jsx("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__ */ jsx("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+function Oe({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(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 Check({ size, ...props }) {
-  return /* @__PURE__ */ jsx("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+function He({ size: e, ...t }) {
+  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M20 6 9 17l-5-5" }) });
 }
-function X({ size, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+function Me({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+    /* @__PURE__ */ n("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ n("path", { d: "m6 6 12 12" })
   ] });
 }
-
-// src/store.ts
-import { create } from "zustand";
-
-// src/grid.ts
-var WHITEBOARD_GRID = 20;
-function snapToWhiteboardGrid(value) {
-  return Math.round(value / WHITEBOARD_GRID) * WHITEBOARD_GRID;
-}
-
-// src/store.ts
-function computeWhiteboardFit(panels, viewportSize, padding = 60) {
-  if (panels.size === 0) return null;
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const r of panels.values()) {
-    minX = Math.min(minX, r.x);
-    minY = Math.min(minY, r.y);
-    maxX = Math.max(maxX, r.x + r.width);
-    maxY = Math.max(maxY, r.y + r.height);
-  }
-  const contentW = maxX - minX + padding * 2;
-  const contentH = maxY - minY + padding * 2;
-  const vpW = viewportSize.width || window.innerWidth;
-  const vpH = viewportSize.height || window.innerHeight;
-  const fitScale = Math.min(vpW / contentW, vpH / contentH, 1.5);
-  const centerX = (minX + maxX) / 2;
-  const centerY = (minY + maxY) / 2;
+function Be({ size: e, ...t }) {
+  return /* @__PURE__ */ n("svg", { ...Y(e), ...t, children: /* @__PURE__ */ n("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
+}
+function $e({ size: e, ...t }) {
+  return /* @__PURE__ */ d("svg", { ...Y(e), ...t, children: [
+    /* @__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" })
+  ] });
+}
+const he = 20;
+function ue(e) {
+  return Math.round(e / he) * he;
+}
+function Ne(e, t, r = 60) {
+  if (e.size === 0) return null;
+  let s = 1 / 0, i = 1 / 0, u = -1 / 0, w = -1 / 0;
+  for (const v of e.values())
+    s = Math.min(s, v.x), i = Math.min(i, v.y), u = Math.max(u, v.x + v.width), w = Math.max(w, v.y + v.height);
+  const f = u - s + r * 2, m = w - i + r * 2, g = t.width || window.innerWidth, h = t.height || window.innerHeight, M = Math.min(g / f, h / m, 1.5), k = (s + u) / 2, _ = (i + w) / 2;
   return {
-    scale: Math.min(3, Math.max(0.2, fitScale)),
+    scale: Math.min(3, Math.max(0.2, M)),
     offset: {
-      x: vpW / 2 - centerX * fitScale,
-      y: vpH / 2 - centerY * fitScale
+      x: g / 2 - k * M,
+      y: h / 2 - _ * M
     }
   };
 }
-function computeWhiteboardRectFocus(rect, viewportSize, padding = 40, maxScale = 1.5) {
-  const vpW = viewportSize.width || window.innerWidth;
-  const vpH = viewportSize.height || window.innerHeight;
-  const safeWidth = Math.max(1, rect.width);
-  const safeHeight = Math.max(1, rect.height);
-  const fitScale = Math.min(
-    (vpW - padding * 2) / safeWidth,
-    (vpH - padding * 2) / safeHeight,
-    maxScale
-  );
-  const nextScale = Math.min(3, Math.max(0.2, fitScale));
+function Ve(e, t, r = 40, s = 1.5) {
+  const i = t.width || window.innerWidth, u = t.height || window.innerHeight, w = Math.max(1, e.width), f = Math.max(1, e.height), m = Math.min(
+    (i - r * 2) / w,
+    (u - r * 2) / f,
+    s
+  ), g = Math.min(3, Math.max(0.2, m));
   return {
-    scale: nextScale,
+    scale: g,
     offset: {
-      x: vpW / 2 - (rect.x + safeWidth / 2) * nextScale,
-      y: vpH / 2 - (rect.y + safeHeight / 2) * nextScale
+      x: i / 2 - (e.x + w / 2) * g,
+      y: u / 2 - (e.y + f / 2) * g
     }
   };
 }
-var useWhiteboardStore = create((set, get) => ({
+const p = Xe((e, t) => ({
   offset: { x: 0, y: 0 },
   scale: 1,
   viewportSize: { width: 0, height: 0 },
-  snapToGrid: false,
-  snapGridSize: WHITEBOARD_GRID,
+  snapToGrid: !1,
+  snapGridSize: he,
   panels: /* @__PURE__ */ new Map(),
   resetFns: /* @__PURE__ */ new Map(),
   registryVersion: 0,
-  setOffset: (v) => set((s) => ({ offset: typeof v === "function" ? v(s.offset) : v })),
-  setScale: (v) => set((s) => ({ scale: typeof v === "function" ? v(s.scale) : v })),
-  setViewportSize: (v) => set({ viewportSize: v }),
-  setSnapToGrid: (v) => set((s) => ({ snapToGrid: typeof v === "function" ? v(s.snapToGrid) : v })),
-  register: (id, rect) => {
-    get().panels.set(id, rect);
-    set((s) => ({ registryVersion: s.registryVersion + 1 }));
+  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((i) => ({ registryVersion: i.registryVersion + 1 }));
   },
-  unregister: (id) => {
-    get().panels.delete(id);
-    set((s) => ({ registryVersion: s.registryVersion + 1 }));
+  unregister: (r) => {
+    t().panels.delete(r), e((s) => ({ registryVersion: s.registryVersion + 1 }));
   },
-  registerReset: (id, fn) => {
-    get().resetFns.set(id, fn);
+  registerReset: (r, s) => {
+    t().resetFns.set(r, s);
   },
-  unregisterReset: (id) => {
-    get().resetFns.delete(id);
+  unregisterReset: (r) => {
+    t().resetFns.delete(r);
   },
   fitToContent: () => {
-    const { panels, viewportSize } = get();
-    const fit = computeWhiteboardFit(panels, viewportSize);
-    if (fit) set({ scale: fit.scale, offset: fit.offset });
+    const { panels: r, viewportSize: s } = t(), i = Ne(r, s);
+    i && e({ scale: i.scale, offset: i.offset });
   },
-  focusPanel: (rect, options) => {
-    const { viewportSize } = get();
-    const fit = computeWhiteboardRectFocus(
-      rect,
-      viewportSize,
-      options?.padding ?? 40,
-      options?.maxScale ?? 1.5
+  focusPanel: (r, s) => {
+    const { viewportSize: i } = t(), u = Ve(
+      r,
+      i,
+      (s == null ? void 0 : s.padding) ?? 40,
+      (s == null ? void 0 : s.maxScale) ?? 1.5
     );
-    set({ scale: fit.scale, offset: fit.offset });
+    e({ scale: u.scale, offset: u.offset });
   },
   resetWidgets: () => {
-    for (const fn of get().resetFns.values()) fn();
-    const attempt = (tries = 0) => {
-      const { panels, viewportSize } = get();
-      const fit = computeWhiteboardFit(panels, viewportSize);
-      if (fit) {
-        set({ scale: fit.scale, offset: fit.offset });
+    for (const s of t().resetFns.values()) s();
+    const r = (s = 0) => {
+      const { panels: i, viewportSize: u } = t(), w = Ne(i, u);
+      if (w) {
+        e({ scale: w.scale, offset: w.offset });
         return;
       }
-      if (tries < 6) requestAnimationFrame(() => attempt(tries + 1));
+      s < 6 && requestAnimationFrame(() => r(s + 1));
     };
-    requestAnimationFrame(() => requestAnimationFrame(() => attempt()));
+    requestAnimationFrame(() => requestAnimationFrame(() => r()));
   },
-  resetSession: () => set({
+  resetSession: () => e({
     offset: { x: 0, y: 0 },
     scale: 1,
     viewportSize: { width: 0, height: 0 },
-    snapToGrid: false,
+    snapToGrid: !1,
     registryVersion: 0,
     panels: /* @__PURE__ */ new Map(),
     resetFns: /* @__PURE__ */ new Map()
   })
 }));
-
-// src/ZoomBar.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function ZoomBar({ extraActions }) {
-  const scale = useWhiteboardStore((s) => s.scale);
-  const viewportSize = useWhiteboardStore((s) => s.viewportSize);
-  const snapToGrid = useWhiteboardStore((s) => s.snapToGrid);
-  const setScale = useWhiteboardStore((s) => s.setScale);
-  const setOffset = useWhiteboardStore((s) => s.setOffset);
-  const setSnapToGrid = useWhiteboardStore((s) => s.setSnapToGrid);
-  const fitToContent = useWhiteboardStore((s) => s.fitToContent);
-  const resetWidgets = useWhiteboardStore((s) => s.resetWidgets);
-  useEffect(() => {
-    if (!snapToGrid) return;
-    window.dispatchEvent(new Event("whiteboard-snap-now"));
-  }, [snapToGrid]);
-  const zoomTo = (nextScale) => {
-    const clamped = Math.min(3, Math.max(0.2, nextScale));
-    const ratio = clamped / scale;
-    const cx = (viewportSize.width || window.innerWidth) / 2;
-    const cy = (viewportSize.height || window.innerHeight) / 2;
-    setOffset((prev) => ({
-      x: cx - (cx - prev.x) * ratio,
-      y: cy - (cy - prev.y) * ratio
-    }));
-    setScale(clamped);
+function je({ extraActions: e }) {
+  const t = p((h) => h.scale), r = p((h) => h.viewportSize), s = p((h) => h.snapToGrid), i = p((h) => h.setScale), u = p((h) => h.setOffset), w = p((h) => h.setSnapToGrid), f = p((h) => h.fitToContent), m = p((h) => h.resetWidgets);
+  X(() => {
+    s && window.dispatchEvent(new Event("whiteboard-snap-now"));
+  }, [s]);
+  const g = (h) => {
+    const M = Math.min(3, Math.max(0.2, h)), k = M / t, _ = (r.width || window.innerWidth) / 2, v = (r.height || window.innerHeight) / 2;
+    u((P) => ({
+      x: _ - (_ - P.x) * k,
+      y: v - (v - P.y) * k
+    })), i(M);
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ d(
     "div",
     {
       className: "zoom-bar",
-      onPointerDown: (e) => e.stopPropagation(),
-      onWheel: (e) => e.stopPropagation(),
+      onPointerDown: (h) => h.stopPropagation(),
+      onWheel: (h) => h.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsx2("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => zoomTo(scale * 0.8), title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ jsx2(Minus, { size: 14 }) }),
-        /* @__PURE__ */ jsxs2("span", { className: "zoom-bar__value", children: [
-          Math.round(scale * 100),
+        /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => g(t * 0.8), title: "Zoom out", "aria-label": "Zoom out", children: /* @__PURE__ */ n(Fe, { size: 14 }) }),
+        /* @__PURE__ */ d("span", { className: "zoom-bar__value", children: [
+          Math.round(t * 100),
           "%"
         ] }),
-        /* @__PURE__ */ jsx2("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => zoomTo(scale * 1.2), title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ jsx2(Plus, { size: 14 }) }),
-        /* @__PURE__ */ jsx2("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: fitToContent, title: "Fit camera to all panels", "aria-label": "Fit camera to all panels", children: /* @__PURE__ */ jsx2(ScanSearch, { size: 14 }) }),
-        /* @__PURE__ */ jsx2("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: resetWidgets, title: "Reset panel positions", "aria-label": "Reset panel positions", children: /* @__PURE__ */ jsx2(RotateCcw, { size: 14 }) }),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__icon", onClick: () => g(t * 1.2), title: "Zoom in", "aria-label": "Zoom in", children: /* @__PURE__ */ n(Ge, { size: 14 }) }),
+        /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: f, title: "Fit camera to all panels", "aria-label": "Fit camera to all panels", children: /* @__PURE__ */ n(Ie, { size: 14 }) }),
+        /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action", onClick: m, title: "Reset panel positions", "aria-label": "Reset panel positions", children: /* @__PURE__ */ n(Le, { size: 14 }) }),
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            className: `wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action${snapToGrid ? " is-active" : ""}`,
-            onClick: () => setSnapToGrid((prev) => !prev),
-            title: snapToGrid ? "Disable snap to grid" : "Enable snap to grid",
-            "aria-label": snapToGrid ? "Disable snap to grid" : "Enable snap to grid",
-            children: /* @__PURE__ */ jsx2(Grid3x3, { size: 14 })
+            className: `wb-btn wb-btn--secondary wb-btn--icon-only zoom-bar__action${s ? " is-active" : ""}`,
+            onClick: () => w((h) => !h),
+            title: s ? "Disable snap to grid" : "Enable snap to grid",
+            "aria-label": s ? "Disable snap to grid" : "Enable snap to grid",
+            children: /* @__PURE__ */ n(Ee, { size: 14 })
           }
         ),
-        extraActions
+        e
       ]
     }
   );
 }
-
-// src/Minimap.tsx
-import { useRef } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var MAP_W = 200;
-var MAP_H = 150;
-var PADDING = 40;
-var MIN_WORLD_SIZE = 1;
-function Minimap({ loading = false }) {
-  useWhiteboardStore((s) => s.registryVersion);
-  const offset = useWhiteboardStore((s) => s.offset);
-  const scale = useWhiteboardStore((s) => s.scale);
-  const viewportSize = useWhiteboardStore((s) => s.viewportSize);
-  const panels = useWhiteboardStore((s) => s.panels);
-  const setOffset = useWhiteboardStore((s) => s.setOffset);
-  const setScale = useWhiteboardStore((s) => s.setScale);
-  const focusPanel = useWhiteboardStore((s) => s.focusPanel);
-  const containerRef = useRef(null);
-  const dragging = useRef(false);
-  const lastPanelTapRef = useRef(null);
-  const rectEntries = Array.from(panels.entries());
-  const visibleRectEntries = rectEntries.filter(([, rect]) => Number.isFinite(rect.width) && Number.isFinite(rect.height));
-  const rects = visibleRectEntries.map(([, rect]) => rect);
-  if (loading || rects.length === 0) {
-    return /* @__PURE__ */ jsx3("div", { className: "minimap minimap--loading", style: { width: MAP_W, height: MAP_H }, children: /* @__PURE__ */ jsx3("div", { className: "minimap__loading", children: /* @__PURE__ */ jsx3(Loader2, { size: 14, className: "icon-spin" }) }) });
-  }
-  const viewportWidth = viewportSize.width || window.innerWidth;
-  const viewportHeight = viewportSize.height || window.innerHeight;
-  const vpW = viewportWidth / scale;
-  const vpH = viewportHeight / scale;
-  const vpX = -offset.x / scale;
-  const vpY = -offset.y / scale;
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const r of rects) {
-    minX = Math.min(minX, r.x);
-    minY = Math.min(minY, r.y);
-    maxX = Math.max(maxX, r.x + r.width);
-    maxY = Math.max(maxY, r.y + r.height);
-  }
-  minX -= PADDING;
-  minY -= PADDING;
-  maxX += PADDING;
-  maxY += PADDING;
-  const worldW = Math.max(MIN_WORLD_SIZE, maxX - minX);
-  const worldH = Math.max(MIN_WORLD_SIZE, maxY - minY);
-  const mapScale = Math.min(MAP_W / worldW, MAP_H / worldH);
-  const contentW = worldW * mapScale;
-  const contentH = worldH * mapScale;
-  const mapOffsetX = (MAP_W - contentW) / 2;
-  const mapOffsetY = (MAP_H - contentH) / 2;
-  const toMapX = (wx) => mapOffsetX + (wx - minX) * mapScale;
-  const toMapY = (wy) => mapOffsetY + (wy - minY) * mapScale;
-  const clientToWorld = (clientX, clientY) => {
-    if (!containerRef.current) return;
-    const mapRect = containerRef.current.getBoundingClientRect();
-    const localX = Math.min(MAP_W, Math.max(0, clientX - mapRect.left));
-    const localY = Math.min(MAP_H, Math.max(0, clientY - mapRect.top));
-    const boundedX = Math.min(contentW + mapOffsetX, Math.max(mapOffsetX, localX));
-    const boundedY = Math.min(contentH + mapOffsetY, Math.max(mapOffsetY, localY));
-    const worldX = (boundedX - mapOffsetX) / mapScale + minX;
-    const worldY = (boundedY - mapOffsetY) / mapScale + minY;
-    return { worldX, worldY };
-  };
-  const centerToWorld = (worldX, worldY, targetScale) => {
-    const clampedScale = Math.min(3, Math.max(0.2, targetScale));
-    setScale(clampedScale);
-    setOffset({
-      x: viewportWidth / 2 - worldX * clampedScale,
-      y: viewportHeight / 2 - worldY * clampedScale
+const ee = 200, te = 150, de = 40, xe = 1;
+function Ue({ loading: e = !1 }) {
+  p((a) => a.registryVersion);
+  const t = p((a) => a.offset), r = p((a) => a.scale), s = p((a) => a.viewportSize), i = p((a) => a.panels), u = p((a) => a.setOffset), w = p((a) => a.setScale), f = p((a) => a.focusPanel), m = S(null), g = S(!1), h = S(null), k = Array.from(i.entries()).filter(([, a]) => Number.isFinite(a.width) && Number.isFinite(a.height)), _ = k.map(([, a]) => a);
+  if (e || _.length === 0)
+    return /* @__PURE__ */ n("div", { className: "minimap minimap--loading", style: { width: ee, height: te }, children: /* @__PURE__ */ n("div", { className: "minimap__loading", children: /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }) }) });
+  const v = s.width || window.innerWidth, P = s.height || window.innerHeight, L = v / r, B = P / r, $ = -t.x / r, V = -t.y / r;
+  let F = 1 / 0, c = 1 / 0, R = -1 / 0, W = -1 / 0;
+  for (const a of _)
+    F = Math.min(F, a.x), c = Math.min(c, a.y), R = Math.max(R, a.x + a.width), W = Math.max(W, a.y + a.height);
+  F -= de, c -= de, R += de, W += de;
+  const C = Math.max(xe, R - F), O = Math.max(xe, W - c), z = Math.min(ee / C, te / O), E = C * z, U = O * z, Z = (ee - E) / 2, D = (te - U) / 2, q = (a) => Z + (a - F) * z, j = (a) => D + (a - c) * z, Q = (a, y) => {
+    if (!m.current) return;
+    const x = m.current.getBoundingClientRect(), G = Math.min(ee, Math.max(0, a - x.left)), A = Math.min(te, Math.max(0, y - x.top)), ae = Math.min(E + Z, Math.max(Z, G)), ie = Math.min(U + D, Math.max(D, A)), oe = (ae - Z) / z + F, ce = (ie - D) / z + c;
+    return { worldX: oe, worldY: ce };
+  }, K = (a, y, x) => {
+    const G = Math.min(3, Math.max(0.2, x));
+    w(G), u({
+      x: v / 2 - a * G,
+      y: P / 2 - y * G
     });
+  }, se = (a, y) => {
+    const x = Q(a, y);
+    x && K(x.worldX, x.worldY, r);
+  }, be = (a) => {
+    a.stopPropagation(), a.preventDefault(), g.current = !0, a.currentTarget.setPointerCapture(a.pointerId), se(a.clientX, a.clientY);
+  }, o = (a) => {
+    g.current && se(a.clientX, a.clientY);
+  }, b = () => {
+    g.current = !1;
   };
-  const panTo = (clientX, clientY) => {
-    const world = clientToWorld(clientX, clientY);
-    if (!world) return;
-    centerToWorld(world.worldX, world.worldY, scale);
-  };
-  const onDown = (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    dragging.current = true;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    panTo(e.clientX, e.clientY);
-  };
-  const onMove = (e) => {
-    if (!dragging.current) return;
-    panTo(e.clientX, e.clientY);
-  };
-  const onUp = () => {
-    dragging.current = false;
-  };
-  const onWheel = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const world = clientToWorld(e.clientX, e.clientY);
-    if (!world) return;
-    const factor = e.deltaY > 0 ? 0.9 : 1.1;
-    centerToWorld(world.worldX, world.worldY, scale * factor);
-  };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: containerRef,
-      onPointerDown: onDown,
-      onPointerMove: onMove,
-      onPointerUp: onUp,
-      onPointerCancel: onUp,
-      onWheel,
+      ref: m,
+      onPointerDown: be,
+      onPointerMove: o,
+      onPointerUp: b,
+      onPointerCancel: b,
+      onWheel: (a) => {
+        a.preventDefault(), a.stopPropagation();
+        const y = Q(a.clientX, a.clientY);
+        if (!y) return;
+        const x = a.deltaY > 0 ? 0.9 : 1.1;
+        K(y.worldX, y.worldY, r * x);
+      },
       className: "minimap",
       style: {
-        width: MAP_W,
-        height: MAP_H
+        width: ee,
+        height: te
       },
       children: [
-        visibleRectEntries.map(([id, r]) => /* @__PURE__ */ jsx3(
+        k.map(([a, y]) => /* @__PURE__ */ n(
           "div",
           {
             className: "minimap__panel",
-            onPointerDown: (event) => {
-              event.stopPropagation();
+            onPointerDown: (x) => {
+              x.stopPropagation();
             },
-            onPointerUp: (event) => {
-              event.stopPropagation();
-              const now = Date.now();
-              const last = lastPanelTapRef.current;
-              if (last && last.id === id && now - last.time < 300) {
-                event.preventDefault();
-                focusPanel(r, { padding: r.focusPadding, maxScale: r.focusMaxScale });
-                lastPanelTapRef.current = null;
+            onPointerUp: (x) => {
+              x.stopPropagation();
+              const G = Date.now(), A = h.current;
+              if (A && A.id === a && G - A.time < 300) {
+                x.preventDefault(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale }), h.current = null;
                 return;
               }
-              lastPanelTapRef.current = { id, time: now };
+              h.current = { id: a, time: G };
             },
-            onDoubleClick: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              focusPanel(r, { padding: r.focusPadding, maxScale: r.focusMaxScale });
+            onDoubleClick: (x) => {
+              x.preventDefault(), x.stopPropagation(), f(y, { padding: y.focusPadding, maxScale: y.focusMaxScale });
             },
             style: {
-              left: toMapX(r.x),
-              top: toMapY(r.y),
-              width: Math.max(1, r.width * mapScale),
-              height: Math.max(1, r.height * mapScale)
+              left: q(y.x),
+              top: j(y.y),
+              width: Math.max(1, y.width * z),
+              height: Math.max(1, y.height * z)
             }
           },
-          id
+          a
         )),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ n(
           "div",
           {
             className: "minimap__viewport",
             style: {
-              left: toMapX(vpX),
-              top: toMapY(vpY),
-              width: vpW * mapScale,
-              height: vpH * mapScale
+              left: q($),
+              top: j(V),
+              width: L * z,
+              height: B * z
             }
           }
         )
@@ -421,384 +322,261 @@ function Minimap({ loading = false }) {
     }
   );
 }
-
-// src/WhiteboardShell.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function WhiteboardShell({ children, showMinimap = true, minimapLoading = false, extraActions }) {
-  const offset = useWhiteboardStore((s) => s.offset);
-  const scale = useWhiteboardStore((s) => s.scale);
-  const registryVersion = useWhiteboardStore((s) => s.registryVersion);
-  const viewportSize = useWhiteboardStore((s) => s.viewportSize);
-  const setOffset = useWhiteboardStore((s) => s.setOffset);
-  const setScale = useWhiteboardStore((s) => s.setScale);
-  const setViewportSize = useWhiteboardStore((s) => s.setViewportSize);
-  const shellRef = useRef2(null);
-  const panning = useRef2(false);
-  const last = useRef2({ x: 0, y: 0 });
-  const activePointerId = useRef2(null);
-  const scaleRef = useRef2(scale);
-  const hasFitted = useRef2(false);
-  useEffect2(() => {
-    return () => {
-      useWhiteboardStore.getState().resetSession();
-    };
-  }, []);
-  useEffect2(() => {
-    scaleRef.current = scale;
-  }, [scale]);
-  useEffect2(() => {
-    const shell = shellRef.current;
-    if (!shell) return;
-    const updateViewport = () => {
-      const rect = shell.getBoundingClientRect();
-      setViewportSize({
-        width: Math.max(0, rect.width),
-        height: Math.max(0, rect.height)
+function xt({ children: e, showMinimap: t = !0, minimapLoading: r = !1, extraActions: s }) {
+  const i = p((c) => c.offset), u = p((c) => c.scale), w = p((c) => c.registryVersion), f = p((c) => c.viewportSize), m = p((c) => c.setOffset), g = p((c) => c.setScale), h = p((c) => c.setViewportSize), M = S(null), k = S(!1), _ = S({ x: 0, y: 0 }), v = S(null), P = S(u), L = S(!1);
+  X(() => () => {
+    p.getState().resetSession();
+  }, []), X(() => {
+    P.current = u;
+  }, [u]), X(() => {
+    const c = M.current;
+    if (!c) return;
+    const R = () => {
+      const C = c.getBoundingClientRect();
+      h({
+        width: Math.max(0, C.width),
+        height: Math.max(0, C.height)
       });
     };
-    updateViewport();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(updateViewport);
-    observer.observe(shell);
-    return () => observer.disconnect();
-  }, [setViewportSize]);
-  useEffect2(() => {
-    if (hasFitted.current) return;
-    const { panels } = useWhiteboardStore.getState();
-    if (panels.size === 0 || viewportSize.width <= 0 || viewportSize.height <= 0) return;
-    hasFitted.current = true;
-    requestAnimationFrame(() => {
-      useWhiteboardStore.getState().fitToContent();
-    });
-  }, [registryVersion, viewportSize]);
-  const onDown = useCallback((e) => {
-    if (e.target !== e.currentTarget) return;
-    if (e.button === 0 || e.button === 1) {
-      panning.current = true;
-      activePointerId.current = e.pointerId;
-      last.current = { x: e.clientX, y: e.clientY };
-      e.currentTarget.setPointerCapture(e.pointerId);
-      e.preventDefault();
-    }
-  }, []);
-  const onMove = useCallback((e) => {
-    if (!panning.current || activePointerId.current !== e.pointerId) return;
-    const dx = e.movementX ?? e.clientX - last.current.x;
-    const dy = e.movementY ?? e.clientY - last.current.y;
-    setOffset((p) => ({ x: p.x + dx, y: p.y + dy }));
-    last.current = { x: e.clientX, y: e.clientY };
-  }, [setOffset]);
-  const stopPan = useCallback((e) => {
-    if (activePointerId.current !== null) {
+    if (R(), typeof ResizeObserver > "u") return;
+    const W = new ResizeObserver(R);
+    return W.observe(c), () => W.disconnect();
+  }, [h]), X(() => {
+    if (L.current) return;
+    const { panels: c } = p.getState();
+    c.size === 0 || f.width <= 0 || f.height <= 0 || (L.current = !0, requestAnimationFrame(() => {
+      p.getState().fitToContent();
+    }));
+  }, [w, f]);
+  const B = H((c) => {
+    c.target === c.currentTarget && (c.button === 0 || c.button === 1) && (k.current = !0, v.current = c.pointerId, _.current = { x: c.clientX, y: c.clientY }, c.currentTarget.setPointerCapture(c.pointerId), c.preventDefault());
+  }, []), $ = H((c) => {
+    if (!k.current || v.current !== c.pointerId) return;
+    const R = c.movementX ?? c.clientX - _.current.x, W = c.movementY ?? c.clientY - _.current.y;
+    m((C) => ({ x: C.x + R, y: C.y + W })), _.current = { x: c.clientX, y: c.clientY };
+  }, [m]), V = H((c) => {
+    if (v.current !== null)
       try {
-        e.currentTarget.releasePointerCapture(activePointerId.current);
+        c.currentTarget.releasePointerCapture(v.current);
       } catch {
       }
-    }
-    panning.current = false;
-    activePointerId.current = null;
-  }, []);
-  const onWheel = useCallback((e) => {
-    const s = scaleRef.current;
-    const rect = e.currentTarget.getBoundingClientRect();
-    const anchor = { x: e.clientX - rect.left, y: e.clientY - rect.top };
-    const nextScale = Math.min(3, Math.max(0.2, s * (e.deltaY > 0 ? 0.9 : 1.1)));
-    const ratio = nextScale / s;
-    setOffset((prev) => ({
-      x: anchor.x - (anchor.x - prev.x) * ratio,
-      y: anchor.y - (anchor.y - prev.y) * ratio
-    }));
-    setScale(nextScale);
-  }, [setOffset, setScale]);
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
+    k.current = !1, v.current = null;
+  }, []), F = H((c) => {
+    const R = P.current, W = c.currentTarget.getBoundingClientRect(), C = { x: c.clientX - W.left, y: c.clientY - W.top }, O = Math.min(3, Math.max(0.2, R * (c.deltaY > 0 ? 0.9 : 1.1))), z = O / R;
+    m((E) => ({
+      x: C.x - (C.x - E.x) * z,
+      y: C.y - (C.y - E.y) * z
+    })), g(O);
+  }, [m, g]);
+  return /* @__PURE__ */ d(re, { children: [
+    /* @__PURE__ */ n(
       "div",
       {
-        ref: shellRef,
-        onPointerDown: onDown,
-        onPointerMove: onMove,
-        onPointerUp: stopPan,
-        onPointerCancel: stopPan,
-        onWheel,
-        onContextMenu: (e) => e.preventDefault(),
+        ref: M,
+        onPointerDown: B,
+        onPointerMove: $,
+        onPointerUp: V,
+        onPointerCancel: V,
+        onWheel: F,
+        onContextMenu: (c) => c.preventDefault(),
         className: "whiteboard-shell",
-        children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ d(
           "div",
           {
             className: "whiteboard-canvas",
-            style: { transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})` },
+            style: { transform: `translate(${i.x}px, ${i.y}px) scale(${u})` },
             children: [
-              /* @__PURE__ */ jsx4("div", { className: "whiteboard-grid", "aria-hidden": true }),
-              children
+              /* @__PURE__ */ n("div", { className: "whiteboard-grid", "aria-hidden": !0 }),
+              e
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx4(ZoomBar, { extraActions }),
-    showMinimap ? /* @__PURE__ */ jsx4(Minimap, { loading: minimapLoading }) : null
+    /* @__PURE__ */ n(je, { extraActions: s }),
+    t ? /* @__PURE__ */ n(Ue, { loading: r }) : null
   ] });
 }
-
-// src/FloatingPanel.tsx
-import { useRef as useRef3, useId, useState, useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect, memo } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var FloatingPanel = memo(function FloatingPanel2({
-  title,
-  defaultPosition,
-  width = 300,
-  className,
-  trackRect: trackRectRef,
-  focusable,
-  focusPadding = 40,
-  focusMaxScale = 1.5,
-  headerActions,
-  children
+const St = Te(function({
+  title: t,
+  defaultPosition: r,
+  width: s = 300,
+  className: i,
+  trackRect: u,
+  focusable: w,
+  focusPadding: f = 40,
+  focusMaxScale: m = 1.5,
+  headerActions: g,
+  children: h
 }) {
-  const panelId = useId();
-  const [pos, setPos] = useState(defaultPosition);
-  const dragging = useRef3(false);
-  const posRef = useRef3(pos);
-  const elRef = useRef3(null);
-  const lastRegisteredRectRef = useRef3(null);
-  const scale = useWhiteboardStore((s) => s.scale);
-  const snapToGrid = useWhiteboardStore((s) => s.snapToGrid);
-  const snapGridSize = useWhiteboardStore((s) => s.snapGridSize);
-  const register = useWhiteboardStore((s) => s.register);
-  const unregister = useWhiteboardStore((s) => s.unregister);
-  const registerReset = useWhiteboardStore((s) => s.registerReset);
-  const unregisterReset = useWhiteboardStore((s) => s.unregisterReset);
-  const focusPanel = useWhiteboardStore((s) => s.focusPanel);
-  const scaleRef = useRef3(scale);
-  const snapToGridRef = useRef3(false);
-  const snapGridSizeRef = useRef3(20);
-  const defaultPosRef = useRef3(defaultPosition);
-  const cleanupRef = useRef3(null);
-  const lastTapRef = useRef3(null);
-  useEffect3(() => {
-    scaleRef.current = scale;
-  }, [scale]);
-  useEffect3(() => {
-    snapToGridRef.current = snapToGrid;
-    snapGridSizeRef.current = snapGridSize;
-  }, [snapToGrid, snapGridSize]);
-  useEffect3(() => {
-    const onSnapNow = () => {
-      const snapSize = snapGridSizeRef.current;
-      setPos((current) => {
-        const next = {
-          x: Math.round(current.x / snapSize) * snapSize,
-          y: Math.round(current.y / snapSize) * snapSize
+  const M = Re(), [k, _] = Se(r), v = S(!1), P = S(k), L = S(null), B = S(null), $ = p((o) => o.scale), V = p((o) => o.snapToGrid), F = p((o) => o.snapGridSize), c = p((o) => o.register), R = p((o) => o.unregister), W = p((o) => o.registerReset), C = p((o) => o.unregisterReset), O = p((o) => o.focusPanel), z = S($), E = S(!1), U = S(20), Z = S(r), D = S(null), q = S(null);
+  X(() => {
+    z.current = $;
+  }, [$]), X(() => {
+    E.current = V, U.current = F;
+  }, [V, F]), X(() => {
+    const o = () => {
+      const b = U.current;
+      _((N) => {
+        const a = {
+          x: Math.round(N.x / b) * b,
+          y: Math.round(N.y / b) * b
         };
-        return next.x === current.x && next.y === current.y ? current : next;
+        return a.x === N.x && a.y === N.y ? N : a;
       });
     };
-    window.addEventListener("whiteboard-snap-now", onSnapNow);
-    return () => window.removeEventListener("whiteboard-snap-now", onSnapNow);
-  }, []);
-  useEffect3(() => {
-    posRef.current = pos;
-  }, [pos]);
-  const registerRect = useCallback2(() => {
-    const el = elRef.current;
-    if (!el) return;
-    const nextRect = {
-      x: posRef.current.x,
-      y: posRef.current.y,
-      width: el.offsetWidth,
-      height: el.offsetHeight,
-      focusPadding,
-      focusMaxScale
-    };
-    const prev = lastRegisteredRectRef.current;
-    if (prev && prev.x === nextRect.x && prev.y === nextRect.y && prev.width === nextRect.width && prev.height === nextRect.height && prev.focusPadding === nextRect.focusPadding && prev.focusMaxScale === nextRect.focusMaxScale) {
-      return;
-    }
-    lastRegisteredRectRef.current = nextRect;
-    register(panelId, nextRect);
-    if (trackRectRef) {
-      trackRectRef.current = nextRect;
-    }
-  }, [focusMaxScale, focusPadding, panelId, register, trackRectRef]);
-  const getCurrentRect = useCallback2(() => {
-    const el = elRef.current;
-    if (!el) return null;
-    return {
-      x: posRef.current.x,
-      y: posRef.current.y,
-      width: el.offsetWidth,
-      height: el.offsetHeight,
-      focusPadding,
-      focusMaxScale
-    };
-  }, [focusMaxScale, focusPadding]);
-  const handleFocus = useCallback2(() => {
-    const rect = getCurrentRect();
-    if (!rect) return;
-    focusPanel(rect, { padding: focusPadding, maxScale: focusMaxScale });
-  }, [focusPanel, focusPadding, focusMaxScale, getCurrentRect]);
-  useEffect3(() => {
-    registerReset(panelId, () => setPos(defaultPosRef.current));
-    return () => {
-      cleanupRef.current?.();
-      unregister(panelId);
-      unregisterReset(panelId);
-      lastRegisteredRectRef.current = null;
-    };
-  }, [panelId, registerReset, unregister, unregisterReset]);
-  useLayoutEffect(() => {
-    registerRect();
-  }, [pos.x, pos.y, width, registerRect]);
-  useEffect3(() => {
-    const el = elRef.current;
-    if (!el) return;
-    if (typeof ResizeObserver === "undefined") return;
-    const obs = new ResizeObserver(() => {
-      registerRect();
+    return window.addEventListener("whiteboard-snap-now", o), () => window.removeEventListener("whiteboard-snap-now", o);
+  }, []), X(() => {
+    P.current = k;
+  }, [k]);
+  const j = H(() => {
+    const o = L.current;
+    if (!o) return;
+    const b = {
+      x: P.current.x,
+      y: P.current.y,
+      width: o.offsetWidth,
+      height: o.offsetHeight,
+      focusPadding: f,
+      focusMaxScale: m
+    }, N = B.current;
+    N && N.x === b.x && N.y === b.y && N.width === b.width && N.height === b.height && N.focusPadding === b.focusPadding && N.focusMaxScale === b.focusMaxScale || (B.current = b, c(M, b), u && (u.current = b));
+  }, [m, f, M, c, u]), Q = H(() => {
+    const o = L.current;
+    return o ? {
+      x: P.current.x,
+      y: P.current.y,
+      width: o.offsetWidth,
+      height: o.offsetHeight,
+      focusPadding: f,
+      focusMaxScale: m
+    } : null;
+  }, [m, f]), K = H(() => {
+    const o = Q();
+    o && O(o, { padding: f, maxScale: m });
+  }, [O, f, m, Q]);
+  X(() => (W(M, () => _(Z.current)), () => {
+    var o;
+    (o = D.current) == null || o.call(D), R(M), C(M), B.current = null;
+  }), [M, W, R, C]), We(() => {
+    j();
+  }, [k.x, k.y, s, j]), X(() => {
+    const o = L.current;
+    if (!o || typeof ResizeObserver > "u") return;
+    const b = new ResizeObserver(() => {
+      j();
     });
-    obs.observe(el);
-    return () => obs.disconnect();
-  }, [registerRect]);
-  const onDown = useCallback2((e) => {
-    if (e.button !== 0) return;
-    dragging.current = true;
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const startPosX = posRef.current.x;
-    const startPosY = posRef.current.y;
-    const startScale = scaleRef.current;
-    e.preventDefault();
-    e.stopPropagation();
-    e.target.setPointerCapture(e.pointerId);
-    const move = (ev) => {
-      if (!dragging.current) return;
-      const rawX = startPosX + (ev.clientX - startX) / startScale;
-      const rawY = startPosY + (ev.clientY - startY) / startScale;
-      const snapSize = snapGridSizeRef.current;
-      const nextX = snapToGridRef.current ? Math.round(rawX / snapSize) * snapSize : rawX;
-      const nextY = snapToGridRef.current ? Math.round(rawY / snapSize) * snapSize : rawY;
-      setPos({
-        x: nextX,
-        y: nextY
+    return b.observe(o), () => b.disconnect();
+  }, [j]);
+  const se = H((o) => {
+    var ae;
+    if (o.button !== 0) return;
+    v.current = !0;
+    const b = o.clientX, N = o.clientY, a = P.current.x, y = P.current.y, x = z.current;
+    o.preventDefault(), o.stopPropagation(), o.target.setPointerCapture(o.pointerId);
+    const G = (ie) => {
+      if (!v.current) return;
+      const oe = a + (ie.clientX - b) / x, ce = y + (ie.clientY - N) / x, le = U.current, Ce = E.current ? Math.round(oe / le) * le : oe, ze = E.current ? Math.round(ce / le) * le : ce;
+      _({
+        x: Ce,
+        y: ze
       });
+    }, A = () => {
+      v.current = !1, window.removeEventListener("pointermove", G), window.removeEventListener("pointerup", A), D.current = null;
     };
-    const up = () => {
-      dragging.current = false;
-      window.removeEventListener("pointermove", move);
-      window.removeEventListener("pointerup", up);
-      cleanupRef.current = null;
-    };
-    cleanupRef.current?.();
-    window.addEventListener("pointermove", move);
-    window.addEventListener("pointerup", up);
-    cleanupRef.current = up;
-  }, []);
-  const panelClassName = className ? `floating-panel ${className}` : "floating-panel";
-  return /* @__PURE__ */ jsxs5(
+    (ae = D.current) == null || ae.call(D), window.addEventListener("pointermove", G), window.addEventListener("pointerup", A), D.current = A;
+  }, []), be = i ? `floating-panel ${i}` : "floating-panel";
+  return /* @__PURE__ */ d(
     "div",
     {
-      ref: elRef,
-      className: panelClassName,
-      style: { left: pos.x, top: pos.y, width },
-      onPointerDown: (e) => e.stopPropagation(),
-      onPointerUp: (e) => {
-        if (dragging.current) return;
-        const now = Date.now();
-        const last = lastTapRef.current;
-        if (last && now - last.time < 300) {
-          const dx = e.clientX - last.x;
-          const dy = e.clientY - last.y;
-          if (dx * dx + dy * dy < 100) {
-            e.stopPropagation();
-            handleFocus();
-            lastTapRef.current = null;
+      ref: L,
+      className: be,
+      style: { left: k.x, top: k.y, width: s },
+      onPointerDown: (o) => o.stopPropagation(),
+      onPointerUp: (o) => {
+        if (v.current) return;
+        const b = Date.now(), N = q.current;
+        if (N && b - N.time < 300) {
+          const a = o.clientX - N.x, y = o.clientY - N.y;
+          if (a * a + y * y < 100) {
+            o.stopPropagation(), K(), q.current = null;
             return;
           }
         }
-        lastTapRef.current = { time: now, x: e.clientX, y: e.clientY };
+        q.current = { time: b, x: o.clientX, y: o.clientY };
       },
-      onWheel: (e) => e.stopPropagation(),
-      onDoubleClick: (e) => {
-        e.stopPropagation();
-        handleFocus();
+      onWheel: (o) => o.stopPropagation(),
+      onDoubleClick: (o) => {
+        o.stopPropagation(), K();
       },
       children: [
-        /* @__PURE__ */ jsxs5("div", { onPointerDown: onDown, className: "floating-panel__header", children: [
-          /* @__PURE__ */ jsx5("strong", { className: "floating-panel__title", children: title }),
-          headerActions,
-          focusable && /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ d("div", { onPointerDown: se, className: "floating-panel__header", children: [
+          /* @__PURE__ */ n("strong", { className: "floating-panel__title", children: t }),
+          g,
+          w && /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               className: "wb-btn wb-btn--secondary wb-btn--icon-only floating-panel__focus",
-              onClick: handleFocus,
-              onPointerDown: (e) => e.stopPropagation(),
+              onClick: K,
+              onPointerDown: (o) => o.stopPropagation(),
               title: "Focus on this panel",
               "aria-label": "Focus on this panel",
-              children: /* @__PURE__ */ jsx5(Maximize2, { size: 14 })
+              children: /* @__PURE__ */ n(Ae, { size: 14 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5("div", { className: "floating-panel__body", children })
+        /* @__PURE__ */ n("div", { className: "floating-panel__body", children: h })
       ]
     }
   );
 });
-function usePanelRect(initial) {
-  const ref = useRef3({ ...initial, width: 0, height: 0 });
-  return ref;
-}
-function belowPanel(rect, gap = WHITEBOARD_GRID) {
-  return { x: rect.x, y: rect.y + rect.height + gap };
-}
-
-// src/ConfirmDialog.tsx
-import { useEffect as useEffect4 } from "react";
-import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-  confirmLabel = "Confirm",
-  loading,
-  error
+function Mt(e) {
+  return S({ ...e, width: 0, height: 0 });
+}
+function kt(e, t = he) {
+  return { x: e.x, y: e.y + e.height + t };
+}
+function _t({
+  open: e,
+  title: t,
+  message: r,
+  onConfirm: s,
+  onCancel: i,
+  confirmLabel: u = "Confirm",
+  loading: w,
+  error: f
 }) {
-  useEffect4(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") onCancel();
+  return X(() => {
+    if (!e) return;
+    const m = (g) => {
+      g.key === "Escape" && i();
     };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onCancel]);
-  if (!open || typeof document === "undefined") return null;
-  return createPortal(
-    /* @__PURE__ */ jsx6("div", { className: "confirm-modal-overlay", onMouseDown: onCancel, children: /* @__PURE__ */ jsxs6(
+    return window.addEventListener("keydown", m), () => window.removeEventListener("keydown", m);
+  }, [e, i]), !e || typeof document > "u" ? null : Ye(
+    /* @__PURE__ */ n("div", { className: "confirm-modal-overlay", onMouseDown: i, children: /* @__PURE__ */ d(
       "div",
       {
         className: "confirm-modal",
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": title,
-        onMouseDown: (e) => e.stopPropagation(),
+        "aria-label": t,
+        onMouseDown: (m) => m.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs6("div", { className: "confirm-modal__header", children: [
-            /* @__PURE__ */ jsxs6("span", { className: "confirm-modal__title", children: [
-              /* @__PURE__ */ jsx6(AlertTriangle, { size: 16 }),
-              title
+          /* @__PURE__ */ d("div", { className: "confirm-modal__header", children: [
+            /* @__PURE__ */ d("span", { className: "confirm-modal__title", children: [
+              /* @__PURE__ */ n(Oe, { size: 16 }),
+              t
             ] }),
-            /* @__PURE__ */ jsx6("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: onCancel, "aria-label": "Close dialog", children: /* @__PURE__ */ jsx6(X, { size: 14 }) })
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: i, "aria-label": "Close dialog", children: /* @__PURE__ */ n(Me, { size: 14 }) })
           ] }),
-          /* @__PURE__ */ jsx6("p", { className: "confirm-modal__message", children: message }),
-          error && /* @__PURE__ */ jsx6("div", { className: "wb-alert wb-alert--error", children: error }),
-          /* @__PURE__ */ jsxs6("div", { className: "wb-btn-row", children: [
-            /* @__PURE__ */ jsx6("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: onCancel, children: "Cancel" }),
-            /* @__PURE__ */ jsx6("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: onConfirm, disabled: loading, children: loading ? "Deleting..." : /* @__PURE__ */ jsxs6(Fragment2, { children: [
-              /* @__PURE__ */ jsx6(Check, { size: 14 }),
-              confirmLabel
+          /* @__PURE__ */ n("p", { className: "confirm-modal__message", children: r }),
+          f && /* @__PURE__ */ n("div", { className: "wb-alert wb-alert--error", children: f }),
+          /* @__PURE__ */ d("div", { className: "wb-btn-row", children: [
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: i, children: "Cancel" }),
+            /* @__PURE__ */ n("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: s, disabled: w, children: w ? "Deleting..." : /* @__PURE__ */ d(re, { children: [
+              /* @__PURE__ */ n(He, { size: 14 }),
+              u
             ] }) })
           ] })
         ]
@@ -807,92 +585,582 @@ function ConfirmDialog({
     document.body
   );
 }
-
-// src/PanelErrorBoundary.tsx
-import { Component } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var PanelErrorBoundary = class extends Component {
+class Pt extends De {
   constructor() {
-    super(...arguments);
-    this.state = { error: null };
+    super(...arguments), this.state = { error: null };
   }
-  static getDerivedStateFromError(error) {
-    return { error };
+  static getDerivedStateFromError(t) {
+    return { error: t };
   }
   render() {
-    if (this.state.error) {
-      return /* @__PURE__ */ jsxs7("div", { className: "wb-stack wb-stack--sm", children: [
-        /* @__PURE__ */ jsx7("div", { className: "wb-alert wb-alert--error", children: this.props.fallbackMessage ?? "This panel crashed." }),
-        /* @__PURE__ */ jsx7(
-          "button",
-          {
-            type: "button",
-            className: "wb-btn wb-btn--secondary",
-            onClick: () => this.setState({ error: null }),
-            children: "Retry"
-          }
-        )
-      ] });
-    }
-    return this.props.children;
+    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(
+        "button",
+        {
+          type: "button",
+          className: "wb-btn wb-btn--secondary",
+          onClick: () => this.setState({ error: null }),
+          children: "Retry"
+        }
+      )
+    ] }) : this.props.children;
   }
-};
-
-// src/useWhiteboardLayout.ts
-import { useMemo } from "react";
-function useWhiteboardLayout({
-  widths,
-  startX = 20,
-  y = 40,
-  gap = 20
+}
+function Ct({
+  widths: e,
+  startX: t = 20,
+  y: r = 40,
+  gap: s = 20
 }) {
-  const panelWidth = useMemo(() => {
-    const normalized = {};
-    for (const [key, value] of Object.entries(widths)) {
-      normalized[key] = snapToWhiteboardGrid(value);
-    }
-    return normalized;
-  }, [widths]);
-  const layout = useMemo(
+  const i = ye(() => {
+    const f = {};
+    for (const [m, g] of Object.entries(e))
+      f[m] = ue(g);
+    return f;
+  }, [e]), u = ye(
     () => ({
-      startX: snapToWhiteboardGrid(startX),
-      y: snapToWhiteboardGrid(y),
-      gap: snapToWhiteboardGrid(gap)
+      startX: ue(t),
+      y: ue(r),
+      gap: ue(s)
     }),
-    [startX, y, gap]
+    [t, r, s]
+  ), w = ye(() => {
+    const f = {};
+    let m = u.startX;
+    for (const [g, h] of Object.entries(i))
+      f[g] = { x: m, y: u.y }, m += h + u.gap;
+    return f;
+  }, [u.gap, u.startX, u.y, i]);
+  return { layout: u, panelWidth: i, positions: w };
+}
+function l(...e) {
+  return e.filter(Boolean).join(" ");
+}
+const Ze = {
+  error: "status-error",
+  muted: "text-sm text-muted",
+  info: "ui-alert ui-alert--info",
+  success: "ui-alert ui-alert--success"
+};
+function zt({ tone: e = "info", className: t, ...r }) {
+  return /* @__PURE__ */ n("p", { className: l(Ze[e], t), ...r });
+}
+const qe = {
+  primary: "",
+  secondary: "secondary-btn",
+  danger: "danger-btn"
+}, Ke = me(function({
+  variant: t = "primary",
+  fullWidth: r = !1,
+  iconOnly: s = !1,
+  loading: i = !1,
+  disabled: u,
+  className: w,
+  children: f,
+  loadingText: m,
+  ...g
+}, h) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      ref: h,
+      className: l(qe[t], r && "full-width-btn", s && "icon-only-btn", w),
+      disabled: u || i,
+      ...g,
+      children: i ? /* @__PURE__ */ d(re, { children: [
+        /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }),
+        m || f
+      ] }) : f
+    }
   );
-  const positions = useMemo(() => {
-    const next = {};
-    let x = layout.startX;
-    for (const [key, width] of Object.entries(panelWidth)) {
-      ;
-      next[key] = { x, y: layout.y };
-      x += width + layout.gap;
+});
+function Je({ as: e = "div", className: t, ...r }) {
+  return T(e, {
+    className: l("button-row", t),
+    ...r
+  });
+}
+function Tt({ className: e, ...t }) {
+  return /* @__PURE__ */ n("span", { className: l("chip", e), ...t });
+}
+function Qe({ active: e = !1, className: t, ...r }) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: l("choice-card", t),
+      "data-active": e,
+      ...r
     }
-    return next;
-  }, [layout.gap, layout.startX, layout.y, panelWidth]);
-  return { layout, panelWidth, positions };
+  );
+}
+function pe({ as: e = "ul", reset: t = !0, className: r, ...s }) {
+  return T(e, {
+    className: l(t && "list-reset", r),
+    ...s
+  });
+}
+const et = {
+  sm: "",
+  md: "skeleton--md",
+  pill: "skeleton--pill"
+};
+function I({ as: e = "div", radius: t = "sm", className: r, ...s }) {
+  return T(e, {
+    className: l("skeleton", et[t], r),
+    "aria-hidden": !0,
+    ...s
+  });
+}
+function tt(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-input", t), ...r });
+}
+function ve(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-btn", t), ...r });
+}
+function Rt(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-icon-btn", t), ...r });
+}
+function nt(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-select", t), ...r });
+}
+function Wt(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-textarea", t), ...r });
+}
+function ke(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-thumb", t), ...r });
+}
+function ne(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { radius: "pill", className: l("skeleton-chip", t), ...r });
+}
+function we(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-title", t), ...r });
+}
+function ge({ short: e = !1, className: t, ...r }) {
+  return /* @__PURE__ */ n(I, { className: l("skeleton-line", e && "skeleton-line--short", t), ...r });
+}
+function rt(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { radius: "pill", className: l("skeleton-avatar", t), ...r });
+}
+function Dt(e) {
+  const { className: t, ...r } = e;
+  return /* @__PURE__ */ n(I, { className: l("skeleton-canvas", t), ...r });
+}
+function Xt({
+  options: e,
+  value: t,
+  onChange: r,
+  className: s
+}) {
+  return /* @__PURE__ */ n(pe, { className: l("choice-list", s), children: e.map((i) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+    Qe,
+    {
+      active: t === i.value,
+      onClick: () => r(i.value),
+      disabled: i.disabled,
+      "data-has-description": i.description ? "true" : "false",
+      children: i.description ? /* @__PURE__ */ d("span", { className: "choice-card__row", children: [
+        /* @__PURE__ */ n("span", { className: "choice-card__label", children: i.label }),
+        /* @__PURE__ */ n("span", { className: "choice-card__description", children: i.description })
+      ] }) : /* @__PURE__ */ n("span", { className: "choice-card__label", children: i.label })
+    }
+  ) }, i.value)) });
+}
+function Yt({ count: e = 4, className: t, withDescription: r = !1 }) {
+  return /* @__PURE__ */ n(pe, { className: l("choice-list", t), "aria-hidden": !0, children: Array.from({ length: e }).map((s, i) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ d("div", { className: "choice-card", children: [
+    /* @__PURE__ */ n(we, { className: l("skeleton-title--sm", !r && "skeleton-choice-label") }),
+    r ? /* @__PURE__ */ n(ge, { short: !0 }) : null
+  ] }) }, `choice-skeleton-${i}`)) });
+}
+function Ft({ className: e, ...t }) {
+  return /* @__PURE__ */ n("div", { className: l("coord-grid", e), ...t });
+}
+function Gt({ axis: e, className: t, ...r }) {
+  return /* @__PURE__ */ d("label", { className: l("coord-input", t), children: [
+    e,
+    " ",
+    /* @__PURE__ */ n("input", { type: "number", step: "0.01", ...r })
+  ] });
+}
+function J({
+  as: e,
+  size: t = "md",
+  className: r,
+  ...s
+}) {
+  return T(e ?? "div", {
+    className: l(t === "sm" ? "panel-stack-sm" : "panel-stack", r),
+    ...s
+  });
+}
+const st = {
+  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 It({ as: e = "h3", className: t, ...r }) {
+  return T(e, {
+    className: l("story-title", t),
+    ...r
+  });
+}
+function _e({ as: e = "p", size: t = "sm", className: r, ...s }) {
+  return T(e, {
+    className: l(st[t], "text-muted", r),
+    ...s
+  });
+}
+function Lt({ as: e = "h1", className: t, ...r }) {
+  return T(e, {
+    className: l("page-title", t),
+    ...r
+  });
+}
+function it({ as: e = "span", className: t, ...r }) {
+  return T(e, {
+    className: l("widget-section__title", t),
+    ...r
+  });
+}
+function ot({ as: e = "p", className: t, ...r }) {
+  return T(e, {
+    className: l("widget-section__description", t),
+    ...r
+  });
+}
+function Et({ title: e, description: t, action: r }) {
+  return /* @__PURE__ */ d(J, { size: "sm", children: [
+    /* @__PURE__ */ n(at, { children: e }),
+    t ? /* @__PURE__ */ n(_e, { children: t }) : null,
+    r
+  ] });
+}
+function ct({ className: e, ...t }) {
+  return /* @__PURE__ */ n("label", { className: l("widget-label", e), ...t });
+}
+function At({
+  as: e,
+  label: t,
+  htmlFor: r,
+  hint: s,
+  error: i,
+  layout: u = "stack",
+  className: w,
+  children: f,
+  ...m
+}) {
+  return T(
+    e ?? "div",
+    {
+      className: l(u === "control" ? "widget-control" : "panel-stack-sm", w),
+      ...m
+    },
+    /* @__PURE__ */ d(re, { children: [
+      t ? /* @__PURE__ */ n(ct, { htmlFor: r, children: t }) : null,
+      f,
+      s ? /* @__PURE__ */ n(_e, { size: "xs", children: s }) : null,
+      i ? /* @__PURE__ */ n("p", { className: "field-error", children: i }) : null
+    ] })
+  );
+}
+function Ot({ isGenerating: e, children: t, message: r }) {
+  return /* @__PURE__ */ d("div", { className: "generating-overlay-wrap", children: [
+    t,
+    e && /* @__PURE__ */ d("div", { className: "generating-overlay", "aria-live": "polite", children: [
+      /* @__PURE__ */ n(fe, { size: 20, className: "icon-spin" }),
+      /* @__PURE__ */ n("span", { children: r ?? "Generating, please wait…" })
+    ] })
+  ] });
+}
+function Ht({ as: e = "span", icon: t, className: r, children: s, ...i }) {
+  return T(
+    e,
+    {
+      className: l("inline-row", r),
+      ...i
+    },
+    /* @__PURE__ */ d(re, { children: [
+      t,
+      s
+    ] })
+  );
+}
+function Bt({
+  src: e,
+  alt: t,
+  placeholder: r = "No image",
+  size: s = "md",
+  fit: i = "contain",
+  onImageError: u,
+  className: w,
+  ...f
+}) {
+  const [m, g] = Se(null), h = !!(e && m === e), M = l("image-thumb", `image-thumb--${s}`, `image-thumb--fit-${i}`, w);
+  return /* @__PURE__ */ n("div", { className: M, ...f, children: e && !h ? /* @__PURE__ */ n(
+    "img",
+    {
+      src: e,
+      alt: t,
+      className: "image-thumb__img",
+      style: { objectFit: i, objectPosition: "center" },
+      onError: () => {
+        g(e), u == null || u();
+      }
+    }
+  ) : /* @__PURE__ */ n("span", { className: "image-thumb__placeholder", children: r }) });
+}
+function lt({
+  as: e,
+  justify: t = "start",
+  className: r,
+  ...s
+}) {
+  return T(e ?? "div", {
+    className: l(t === "between" ? "space-between" : "inline-row", r),
+    ...s
+  });
+}
+const $t = me(function({ className: t, ...r }, s) {
+  return /* @__PURE__ */ n("input", { ref: s, className: l(t), ...r });
+});
+function Pe({ as: e = "div", className: t, ...r }) {
+  return T(e, {
+    className: l("item-card", t),
+    ...r
+  });
+}
+function ut({ as: e = "div", className: t, ...r }) {
+  return T(e, {
+    className: l("item-list", t),
+    ...r
+  });
+}
+function Vt({ label: e = "Loading...", className: t }) {
+  return /* @__PURE__ */ d("span", { className: l("status-inline", t), children: [
+    /* @__PURE__ */ n(fe, { size: 14, className: "icon-spin" }),
+    e
+  ] });
+}
+function jt({ children: e }) {
+  return /* @__PURE__ */ n("main", { className: "page-shell", children: e });
+}
+function Ut({ children: e }) {
+  return /* @__PURE__ */ n("div", { className: "page-card", children: e });
+}
+function Zt({ onClick: e, label: t = "Close" }) {
+  return /* @__PURE__ */ d(Ke, { variant: "secondary", className: "panel-close-btn", onClick: e, children: [
+    /* @__PURE__ */ n(Me, { size: 14 }),
+    t
+  ] });
+}
+function qt({ heading: e, description: t, actions: r, className: s, children: i, ...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
+    ] }) : null,
+    t ? /* @__PURE__ */ n(ot, { children: t }) : null,
+    i
+  ] });
+}
+function Kt({ 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 dt({ as: e = "button", className: t, ...r }) {
+  return T(e, {
+    className: l("picker-card", t),
+    ...r
+  });
+}
+const ht = {
+  elements: "picker-grid--elements",
+  characters: "picker-grid--characters",
+  library: "picker-grid--library"
+};
+function Jt({ variant: e, className: t, ...r }) {
+  return /* @__PURE__ */ n(pe, { className: l("picker-grid", ht[e], t), ...r });
+}
+const mt = {
+  default: "",
+  success: "success",
+  warning: "warning",
+  danger: "danger"
+};
+function Qt({ tone: e = "default", className: t, ...r }) {
+  return /* @__PURE__ */ n("span", { className: l("pill", mt[e], t), ...r });
+}
+const en = me(function({ className: t, ...r }, s) {
+  return /* @__PURE__ */ n("select", { ref: s, className: l(t), ...r });
+}), ft = {
+  element: "split-layout--element",
+  character: "split-layout--character",
+  user: "split-layout--user"
+};
+function pt({ variant: e, className: t, ...r }) {
+  return /* @__PURE__ */ n("div", { className: l("split-layout", ft[e], t), ...r });
+}
+function wt({ className: e, ...t }) {
+  return /* @__PURE__ */ n("div", { className: l("tag-row", e), ...t });
+}
+const tn = me(function({ className: t, ...r }, s) {
+  return /* @__PURE__ */ n("textarea", { ref: s, className: l(t), ...r });
+});
+function nn({ className: e, theme: t = "light", onToggle: r, lightIcon: s, darkIcon: i }) {
+  return /* @__PURE__ */ n("button", { className: e, onClick: r, title: `Switch to ${t === "light" ? "dark" : "light"} mode`, "aria-label": "Toggle theme", children: t === "light" ? i ?? /* @__PURE__ */ n(Be, {}) : s ?? /* @__PURE__ */ n($e, {}) });
+}
+function rn({ className: e, ...t }) {
+  return /* @__PURE__ */ n("div", { className: l("title-row", e), ...t });
+}
+function sn({ inputs: e = 1, showButton: t = !0, className: r, ...s }) {
+  return /* @__PURE__ */ d(J, { className: r, ...s, children: [
+    Array.from({ length: e }).map((i, u) => /* @__PURE__ */ n(tt, {}, `panel-form-input-${u}`)),
+    t && /* @__PURE__ */ n(ve, {})
+  ] });
+}
+function an() {
+  return /* @__PURE__ */ d("article", { className: "story-card", children: [
+    /* @__PURE__ */ n("div", { className: "story-cover", children: /* @__PURE__ */ n("div", { className: "story-cover__placeholder story-cover__placeholder--skeleton" }) }),
+    /* @__PURE__ */ n("div", { className: "story-card__overlay story-card__overlay--skeleton", children: /* @__PURE__ */ d("div", { className: "story-card__overlay-text", children: [
+      /* @__PURE__ */ d(lt, { as: "header", children: [
+        /* @__PURE__ */ n(ne, {}),
+        /* @__PURE__ */ n(ne, {})
+      ] }),
+      /* @__PURE__ */ n(we, {}),
+      /* @__PURE__ */ n(ge, { short: !0 })
+    ] }) })
+  ] });
+}
+function gt() {
+  return /* @__PURE__ */ n(Pe, { as: "li", children: /* @__PURE__ */ d(pt, { variant: "user", children: [
+    /* @__PURE__ */ n(rt, {}),
+    /* @__PURE__ */ d(J, { size: "sm", children: [
+      /* @__PURE__ */ n(we, {}),
+      /* @__PURE__ */ n(ge, { short: !0 })
+    ] }),
+    /* @__PURE__ */ d(J, { size: "sm", children: [
+      /* @__PURE__ */ n(ne, {}),
+      /* @__PURE__ */ n(nt, {})
+    ] })
+  ] }) });
+}
+function on({ count: e = 3 }) {
+  return /* @__PURE__ */ n(ut, { as: "ul", children: Array.from({ length: e }).map((t, r) => /* @__PURE__ */ n(gt, {}, `user-skeleton-${r}`)) });
+}
+function cn() {
+  return /* @__PURE__ */ d(Pe, { as: "li", children: [
+    /* @__PURE__ */ d(J, { size: "sm", children: [
+      /* @__PURE__ */ n(ke, { className: "asset-thumb" }),
+      /* @__PURE__ */ n(we, {}),
+      /* @__PURE__ */ d(wt, { children: [
+        /* @__PURE__ */ n(ne, {}),
+        /* @__PURE__ */ n(ne, {})
+      ] })
+    ] }),
+    /* @__PURE__ */ d(Je, { children: [
+      /* @__PURE__ */ n(ve, {}),
+      /* @__PURE__ */ n(ve, {})
+    ] })
+  ] });
 }
-
-// src/cn.ts
-function cn(...args) {
-  return args.filter(Boolean).join(" ");
+function ln({ count: e = 8, gridClass: t }) {
+  return /* @__PURE__ */ n(pe, { className: l("picker-grid", t), children: Array.from({ length: e }).map((r, s) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(dt, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ d(J, { size: "sm", children: [
+    /* @__PURE__ */ n(ke, { className: "asset-thumb" }),
+    /* @__PURE__ */ n(ge, { short: !0 })
+  ] }) }) }, `picker-skeleton-${s}`)) });
 }
 export {
-  ConfirmDialog,
-  FloatingPanel,
-  Minimap,
-  PanelErrorBoundary,
-  WHITEBOARD_GRID,
-  WhiteboardShell,
-  ZoomBar,
-  belowPanel,
-  cn,
-  computeWhiteboardFit,
-  computeWhiteboardRectFocus,
-  snapToWhiteboardGrid,
-  usePanelRect,
-  useWhiteboardLayout,
-  useWhiteboardStore
+  zt as Alert,
+  cn as AssetCardSkeleton,
+  at as AssetTitle,
+  rt as AvatarSkeleton,
+  Ke as Button,
+  Je as ButtonRow,
+  ve as ButtonSkeleton,
+  Dt as CanvasSkeleton,
+  Tt as Chip,
+  ne as ChipSkeleton,
+  Qe as ChoiceCard,
+  Xt as ChoiceGroup,
+  Yt as ChoiceGroupSkeleton,
+  _t as ConfirmDialog,
+  Ft as CoordGrid,
+  Gt as CoordInput,
+  Et as EmptyState,
+  At as Field,
+  St as FloatingPanel,
+  Ot as GeneratingOverlay,
+  Rt as IconButtonSkeleton,
+  Ht as IconText,
+  Bt as ImageThumb,
+  lt as Inline,
+  $t as Input,
+  tt as InputSkeleton,
+  Pe as ItemCard,
+  ut as ItemList,
+  ct as Label,
+  ge as LineSkeleton,
+  pe as List,
+  Vt as LoadingState,
+  Ue as Minimap,
+  _e as MutedText,
+  Ut as PageCard,
+  jt as PageShell,
+  Lt as PageTitle,
+  Zt as PanelCloseButton,
+  Pt as PanelErrorBoundary,
+  sn as PanelFormSkeleton,
+  qt as PanelSection,
+  Kt as PanelTitle,
+  dt as PickerCard,
+  Jt as PickerGrid,
+  ln as PickerGridSkeleton,
+  Qt as Pill,
+  ot as SectionDescription,
+  it as SectionTitle,
+  en as Select,
+  nt as SelectSkeleton,
+  I as Skeleton,
+  pt as SplitLayout,
+  J as Stack,
+  an as StoryCardSkeleton,
+  It as StoryTitle,
+  wt as TagRow,
+  tn as Textarea,
+  Wt as TextareaSkeleton,
+  nn as ThemeToggle,
+  ke as ThumbSkeleton,
+  rn as TitleRow,
+  we as TitleSkeleton,
+  gt as UserCardSkeleton,
+  on as UserListSkeleton,
+  he as WHITEBOARD_GRID,
+  xt as WhiteboardShell,
+  je as ZoomBar,
+  kt as belowPanel,
+  l as cn,
+  Ne as computeWhiteboardFit,
+  Ve as computeWhiteboardRectFocus,
+  ue as snapToWhiteboardGrid,
+  Mt as usePanelRect,
+  Ct as useWhiteboardLayout,
+  p as useWhiteboardStore
 };
-//# sourceMappingURL=index.js.map