@objectifthunes/whiteboard 0.1.0

package/dist/index.js

@@ -0,0 +1,898 @@
+// 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) => ({
+  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__ */ jsx("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ jsx("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 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 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 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 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 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 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 Check({ size, ...props }) {
+  return /* @__PURE__ */ jsx("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ jsx("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" })
+  ] });
+}
+
+// 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;
+  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 = 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
+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);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "zoom-bar",
+      onPointerDown: (e) => e.stopPropagation(),
+      onWheel: (e) => e.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__ */ 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(
+          "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 })
+          }
+        ),
+        extraActions
+      ]
+    }
+  );
+}
+
+// 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 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(
+    "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__ */ jsx3(
+          "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__ */ jsx3(
+          "div",
+          {
+            className: "minimap__viewport",
+            style: {
+              left: toMapX(vpX),
+              top: toMapY(vpY),
+              width: vpW * mapScale,
+              height: vpH * mapScale
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// 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)
+      });
+    };
+    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) {
+      try {
+        e.currentTarget.releasePointerCapture(activePointerId.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(
+      "div",
+      {
+        ref: shellRef,
+        onPointerDown: onDown,
+        onPointerMove: onMove,
+        onPointerUp: stopPan,
+        onPointerCancel: stopPan,
+        onWheel,
+        onContextMenu: (e) => e.preventDefault(),
+        className: "whiteboard-shell",
+        children: /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "whiteboard-canvas",
+            style: { transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})` },
+            children: [
+              /* @__PURE__ */ jsx4("div", { className: "whiteboard-grid", "aria-hidden": true }),
+              children
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx4(ZoomBar, { extraActions }),
+    showMinimap ? /* @__PURE__ */ jsx4(Minimap, { loading: minimapLoading }) : 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 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
+        };
+        return next.x === current.x && next.y === current.y ? current : next;
+      });
+    };
+    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();
+    });
+    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
+      });
+    };
+    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(
+    "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__ */ jsxs5("div", { onPointerDown: onDown, className: "floating-panel__header", children: [
+          /* @__PURE__ */ jsx5("strong", { className: "floating-panel__title", children: title }),
+          headerActions,
+          focusable && /* @__PURE__ */ jsx5(
+            "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__ */ jsx5(Maximize2, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "floating-panel__body", children })
+      ]
+    }
+  );
+});
+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
+}) {
+  useEffect4(() => {
+    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 createPortal(
+    /* @__PURE__ */ jsx6("div", { className: "confirm-modal-overlay", onMouseDown: onCancel, children: /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "confirm-modal",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        onMouseDown: (e) => e.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__ */ 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__ */ 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
+            ] }) })
+          ] })
+        ]
+      }
+    ) }),
+    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 {
+  constructor() {
+    super(...arguments);
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  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;
+  }
+};
+
+// src/useWhiteboardLayout.ts
+import { useMemo } from "react";
+function useWhiteboardLayout({
+  widths,
+  startX = 20,
+  y = 40,
+  gap = 20
+}) {
+  const panelWidth = useMemo(() => {
+    const normalized = {};
+    for (const [key, value] of Object.entries(widths)) {
+      normalized[key] = snapToWhiteboardGrid(value);
+    }
+    return normalized;
+  }, [widths]);
+  const layout = useMemo(
+    () => ({
+      startX: snapToWhiteboardGrid(startX),
+      y: snapToWhiteboardGrid(y),
+      gap: snapToWhiteboardGrid(gap)
+    }),
+    [startX, y, gap]
+  );
+  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;
+    }
+    return next;
+  }, [layout.gap, layout.startX, layout.y, panelWidth]);
+  return { layout, panelWidth, positions };
+}
+
+// src/cn.ts
+function cn(...args) {
+  return args.filter(Boolean).join(" ");
+}
+export {
+  ConfirmDialog,
+  FloatingPanel,
+  Minimap,
+  PanelErrorBoundary,
+  WHITEBOARD_GRID,
+  WhiteboardShell,
+  ZoomBar,
+  belowPanel,
+  cn,
+  computeWhiteboardFit,
+  computeWhiteboardRectFocus,
+  snapToWhiteboardGrid,
+  usePanelRect,
+  useWhiteboardLayout,
+  useWhiteboardStore
+};
+//# sourceMappingURL=index.js.map