@objectifthunes/whiteboard 0.1.1 → 0.2.1

package/dist/index.cjs

@@ -1,939 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  ConfirmDialog: () => ConfirmDialog,
-  FloatingPanel: () => FloatingPanel,
-  Minimap: () => Minimap,
-  PanelErrorBoundary: () => PanelErrorBoundary,
-  WHITEBOARD_GRID: () => WHITEBOARD_GRID,
-  WhiteboardShell: () => WhiteboardShell,
-  ZoomBar: () => ZoomBar,
-  belowPanel: () => belowPanel,
-  cn: () => cn,
-  computeWhiteboardFit: () => computeWhiteboardFit,
-  computeWhiteboardRectFocus: () => computeWhiteboardRectFocus,
-  snapToWhiteboardGrid: () => snapToWhiteboardGrid,
-  usePanelRect: () => usePanelRect,
-  useWhiteboardLayout: () => useWhiteboardLayout,
-  useWhiteboardStore: () => useWhiteboardStore
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/WhiteboardShell.tsx
-var import_react3 = require("react");
-
-// src/ZoomBar.tsx
-var import_react = require("react");
-
-// src/icons.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var defaults = (size = 14) => ({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-});
-function Minus({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }) });
-}
-function Plus({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" })
-  ] });
-}
-function ScanSearch({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m16 16-1.9-1.9" })
-  ] });
-}
-function RotateCcw({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 3v5h5" })
-  ] });
-}
-function Grid3x3({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 9h18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 15h18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 3v18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 3v18" })
-  ] });
-}
-function Maximize2({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 21 3 21 3 15" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
-  ] });
-}
-function Loader2({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
-}
-function AlertTriangle({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
-  ] });
-}
-function Check({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
-}
-function X({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
-  ] });
-}
-
-// src/store.ts
-var import_zustand = require("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;
-  return {
-    scale: Math.min(3, Math.max(0.2, fitScale)),
-    offset: {
-      x: vpW / 2 - centerX * fitScale,
-      y: vpH / 2 - centerY * fitScale
-    }
-  };
-}
-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));
-  return {
-    scale: nextScale,
-    offset: {
-      x: vpW / 2 - (rect.x + safeWidth / 2) * nextScale,
-      y: vpH / 2 - (rect.y + safeHeight / 2) * nextScale
-    }
-  };
-}
-var useWhiteboardStore = (0, import_zustand.create)((set, get) => ({
-  offset: { x: 0, y: 0 },
-  scale: 1,
-  viewportSize: { width: 0, height: 0 },
-  snapToGrid: false,
-  snapGridSize: WHITEBOARD_GRID,
-  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 }));
-  },
-  unregister: (id) => {
-    get().panels.delete(id);
-    set((s) => ({ registryVersion: s.registryVersion + 1 }));
-  },
-  registerReset: (id, fn) => {
-    get().resetFns.set(id, fn);
-  },
-  unregisterReset: (id) => {
-    get().resetFns.delete(id);
-  },
-  fitToContent: () => {
-    const { panels, viewportSize } = get();
-    const fit = computeWhiteboardFit(panels, viewportSize);
-    if (fit) set({ scale: fit.scale, offset: fit.offset });
-  },
-  focusPanel: (rect, options) => {
-    const { viewportSize } = get();
-    const fit = computeWhiteboardRectFocus(
-      rect,
-      viewportSize,
-      options?.padding ?? 40,
-      options?.maxScale ?? 1.5
-    );
-    set({ scale: fit.scale, offset: fit.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 });
-        return;
-      }
-      if (tries < 6) requestAnimationFrame(() => attempt(tries + 1));
-    };
-    requestAnimationFrame(() => requestAnimationFrame(() => attempt()));
-  },
-  resetSession: () => set({
-    offset: { x: 0, y: 0 },
-    scale: 1,
-    viewportSize: { width: 0, height: 0 },
-    snapToGrid: false,
-    registryVersion: 0,
-    panels: /* @__PURE__ */ new Map(),
-    resetFns: /* @__PURE__ */ new Map()
-  })
-}));
-
-// src/ZoomBar.tsx
-var import_jsx_runtime2 = require("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);
-  (0, import_react.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);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      className: "zoom-bar",
-      onPointerDown: (e) => e.stopPropagation(),
-      onWheel: (e) => e.stopPropagation(),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(Minus, { size: 14 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "zoom-bar__value", children: [
-          Math.round(scale * 100),
-          "%"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(Plus, { size: 14 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(ScanSearch, { size: 14 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(RotateCcw, { size: 14 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "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__ */ (0, import_jsx_runtime2.jsx)(Grid3x3, { size: 14 })
-          }
-        ),
-        extraActions
-      ]
-    }
-  );
-}
-
-// src/Minimap.tsx
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("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 = (0, import_react2.useRef)(null);
-  const dragging = (0, import_react2.useRef)(false);
-  const lastPanelTapRef = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "minimap minimap--loading", style: { width: MAP_W, height: MAP_H }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "minimap__loading", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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 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__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      ref: containerRef,
-      onPointerDown: onDown,
-      onPointerMove: onMove,
-      onPointerUp: onUp,
-      onPointerCancel: onUp,
-      onWheel,
-      className: "minimap",
-      style: {
-        width: MAP_W,
-        height: MAP_H
-      },
-      children: [
-        visibleRectEntries.map(([id, r]) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "div",
-          {
-            className: "minimap__panel",
-            onPointerDown: (event) => {
-              event.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;
-                return;
-              }
-              lastPanelTapRef.current = { id, time: now };
-            },
-            onDoubleClick: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              focusPanel(r, { padding: r.focusPadding, maxScale: r.focusMaxScale });
-            },
-            style: {
-              left: toMapX(r.x),
-              top: toMapY(r.y),
-              width: Math.max(1, r.width * mapScale),
-              height: Math.max(1, r.height * mapScale)
-            }
-          },
-          id
-        )),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "div",
-          {
-            className: "minimap__viewport",
-            style: {
-              left: toMapX(vpX),
-              top: toMapY(vpY),
-              width: vpW * mapScale,
-              height: vpH * mapScale
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/WhiteboardShell.tsx
-var import_jsx_runtime4 = require("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 = (0, import_react3.useRef)(null);
-  const panning = (0, import_react3.useRef)(false);
-  const last = (0, import_react3.useRef)({ x: 0, y: 0 });
-  const activePointerId = (0, import_react3.useRef)(null);
-  const scaleRef = (0, import_react3.useRef)(scale);
-  const hasFitted = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
-    return () => {
-      useWhiteboardStore.getState().resetSession();
-    };
-  }, []);
-  (0, import_react3.useEffect)(() => {
-    scaleRef.current = scale;
-  }, [scale]);
-  (0, import_react3.useEffect)(() => {
-    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)
-      });
-    };
-    updateViewport();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(updateViewport);
-    observer.observe(shell);
-    return () => observer.disconnect();
-  }, [setViewportSize]);
-  (0, import_react3.useEffect)(() => {
-    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 = (0, import_react3.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 = (0, import_react3.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 = (0, import_react3.useCallback)((e) => {
-    if (activePointerId.current !== null) {
-      try {
-        e.currentTarget.releasePointerCapture(activePointerId.current);
-      } catch {
-      }
-    }
-    panning.current = false;
-    activePointerId.current = null;
-  }, []);
-  const onWheel = (0, import_react3.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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "div",
-      {
-        ref: shellRef,
-        onPointerDown: onDown,
-        onPointerMove: onMove,
-        onPointerUp: stopPan,
-        onPointerCancel: stopPan,
-        onWheel,
-        onContextMenu: (e) => e.preventDefault(),
-        className: "whiteboard-shell",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          "div",
-          {
-            className: "whiteboard-canvas",
-            style: { transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})` },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "whiteboard-grid", "aria-hidden": true }),
-              children
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ZoomBar, { extraActions }),
-    showMinimap ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Minimap, { loading: minimapLoading }) : null
-  ] });
-}
-
-// src/FloatingPanel.tsx
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var FloatingPanel = (0, import_react4.memo)(function FloatingPanel2({
-  title,
-  defaultPosition,
-  width = 300,
-  className,
-  trackRect: trackRectRef,
-  focusable,
-  focusPadding = 40,
-  focusMaxScale = 1.5,
-  headerActions,
-  children
-}) {
-  const panelId = (0, import_react4.useId)();
-  const [pos, setPos] = (0, import_react4.useState)(defaultPosition);
-  const dragging = (0, import_react4.useRef)(false);
-  const posRef = (0, import_react4.useRef)(pos);
-  const elRef = (0, import_react4.useRef)(null);
-  const lastRegisteredRectRef = (0, import_react4.useRef)(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 = (0, import_react4.useRef)(scale);
-  const snapToGridRef = (0, import_react4.useRef)(false);
-  const snapGridSizeRef = (0, import_react4.useRef)(20);
-  const defaultPosRef = (0, import_react4.useRef)(defaultPosition);
-  const cleanupRef = (0, import_react4.useRef)(null);
-  const lastTapRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
-    scaleRef.current = scale;
-  }, [scale]);
-  (0, import_react4.useEffect)(() => {
-    snapToGridRef.current = snapToGrid;
-    snapGridSizeRef.current = snapGridSize;
-  }, [snapToGrid, snapGridSize]);
-  (0, import_react4.useEffect)(() => {
-    const onSnapNow = () => {
-      const snapSize = snapGridSizeRef.current;
-      setPos((current) => {
-        const next = {
-          x: Math.round(current.x / snapSize) * snapSize,
-          y: Math.round(current.y / snapSize) * snapSize
-        };
-        return next.x === current.x && next.y === current.y ? current : next;
-      });
-    };
-    window.addEventListener("whiteboard-snap-now", onSnapNow);
-    return () => window.removeEventListener("whiteboard-snap-now", onSnapNow);
-  }, []);
-  (0, import_react4.useEffect)(() => {
-    posRef.current = pos;
-  }, [pos]);
-  const registerRect = (0, import_react4.useCallback)(() => {
-    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 = (0, import_react4.useCallback)(() => {
-    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 = (0, import_react4.useCallback)(() => {
-    const rect = getCurrentRect();
-    if (!rect) return;
-    focusPanel(rect, { padding: focusPadding, maxScale: focusMaxScale });
-  }, [focusPanel, focusPadding, focusMaxScale, getCurrentRect]);
-  (0, import_react4.useEffect)(() => {
-    registerReset(panelId, () => setPos(defaultPosRef.current));
-    return () => {
-      cleanupRef.current?.();
-      unregister(panelId);
-      unregisterReset(panelId);
-      lastRegisteredRectRef.current = null;
-    };
-  }, [panelId, registerReset, unregister, unregisterReset]);
-  (0, import_react4.useLayoutEffect)(() => {
-    registerRect();
-  }, [pos.x, pos.y, width, registerRect]);
-  (0, import_react4.useEffect)(() => {
-    const el = elRef.current;
-    if (!el) return;
-    if (typeof ResizeObserver === "undefined") return;
-    const obs = new ResizeObserver(() => {
-      registerRect();
-    });
-    obs.observe(el);
-    return () => obs.disconnect();
-  }, [registerRect]);
-  const onDown = (0, import_react4.useCallback)((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
-      });
-    };
-    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__ */ (0, import_jsx_runtime5.jsxs)(
-    "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;
-            return;
-          }
-        }
-        lastTapRef.current = { time: now, x: e.clientX, y: e.clientY };
-      },
-      onWheel: (e) => e.stopPropagation(),
-      onDoubleClick: (e) => {
-        e.stopPropagation();
-        handleFocus();
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { onPointerDown: onDown, className: "floating-panel__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { className: "floating-panel__title", children: title }),
-          headerActions,
-          focusable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
-            {
-              type: "button",
-              className: "wb-btn wb-btn--secondary wb-btn--icon-only floating-panel__focus",
-              onClick: handleFocus,
-              onPointerDown: (e) => e.stopPropagation(),
-              title: "Focus on this panel",
-              "aria-label": "Focus on this panel",
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Maximize2, { size: 14 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "floating-panel__body", children })
-      ]
-    }
-  );
-});
-function usePanelRect(initial) {
-  const ref = (0, import_react4.useRef)({ ...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
-var import_react5 = require("react");
-var import_react_dom = require("react-dom");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function ConfirmDialog({
-  open,
-  title,
-  message,
-  onConfirm,
-  onCancel,
-  confirmLabel = "Confirm",
-  loading,
-  error
-}) {
-  (0, import_react5.useEffect)(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") onCancel();
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onCancel]);
-  if (!open || typeof document === "undefined") return null;
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "confirm-modal-overlay", onMouseDown: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-      "div",
-      {
-        className: "confirm-modal",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": title,
-        onMouseDown: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "confirm-modal__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "confirm-modal__title", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AlertTriangle, { size: 16 }),
-              title
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "wb-btn wb-btn--secondary wb-btn--icon-only", onClick: onCancel, "aria-label": "Close dialog", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(X, { size: 14 }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "confirm-modal__message", children: message }),
-          error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "wb-alert wb-alert--error", children: error }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "wb-btn-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "wb-btn wb-btn--secondary", onClick: onCancel, children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "wb-btn wb-btn--danger", onClick: onConfirm, disabled: loading, children: loading ? "Deleting..." : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Check, { size: 14 }),
-              confirmLabel
-            ] }) })
-          ] })
-        ]
-      }
-    ) }),
-    document.body
-  );
-}
-
-// src/PanelErrorBoundary.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var PanelErrorBoundary = class extends import_react6.Component {
-  constructor() {
-    super(...arguments);
-    this.state = { error: null };
-  }
-  static getDerivedStateFromError(error) {
-    return { error };
-  }
-  render() {
-    if (this.state.error) {
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "wb-stack wb-stack--sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "wb-alert wb-alert--error", children: this.props.fallbackMessage ?? "This panel crashed." }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "button",
-          {
-            type: "button",
-            className: "wb-btn wb-btn--secondary",
-            onClick: () => this.setState({ error: null }),
-            children: "Retry"
-          }
-        )
-      ] });
-    }
-    return this.props.children;
-  }
-};
-
-// src/useWhiteboardLayout.ts
-var import_react7 = require("react");
-function useWhiteboardLayout({
-  widths,
-  startX = 20,
-  y = 40,
-  gap = 20
-}) {
-  const panelWidth = (0, import_react7.useMemo)(() => {
-    const normalized = {};
-    for (const [key, value] of Object.entries(widths)) {
-      normalized[key] = snapToWhiteboardGrid(value);
-    }
-    return normalized;
-  }, [widths]);
-  const layout = (0, import_react7.useMemo)(
-    () => ({
-      startX: snapToWhiteboardGrid(startX),
-      y: snapToWhiteboardGrid(y),
-      gap: snapToWhiteboardGrid(gap)
-    }),
-    [startX, y, gap]
-  );
-  const positions = (0, import_react7.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;
-    }
-    return next;
-  }, [layout.gap, layout.startX, layout.y, panelWidth]);
-  return { layout, panelWidth, positions };
-}
-
-// src/cn.ts
-function cn(...args) {
-  return args.filter(Boolean).join(" ");
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ConfirmDialog,
-  FloatingPanel,
-  Minimap,
-  PanelErrorBoundary,
-  WHITEBOARD_GRID,
-  WhiteboardShell,
-  ZoomBar,
-  belowPanel,
-  cn,
-  computeWhiteboardFit,
-  computeWhiteboardRectFocus,
-  snapToWhiteboardGrid,
-  usePanelRect,
-  useWhiteboardLayout,
-  useWhiteboardStore
-});
-//# sourceMappingURL=index.cjs.map