@objectifthunes/whiteboard 0.2.0 → 0.2.2

package/dist/index.cjs

@@ -1,1648 +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, {
-  Alert: () => Alert,
-  AssetCardSkeleton: () => AssetCardSkeleton,
-  AssetTitle: () => AssetTitle,
-  AvatarSkeleton: () => AvatarSkeleton,
-  Button: () => Button,
-  ButtonRow: () => ButtonRow,
-  ButtonSkeleton: () => ButtonSkeleton,
-  CanvasSkeleton: () => CanvasSkeleton,
-  Chip: () => Chip,
-  ChipSkeleton: () => ChipSkeleton,
-  ChoiceCard: () => ChoiceCard,
-  ChoiceGroup: () => ChoiceGroup,
-  ChoiceGroupSkeleton: () => ChoiceGroupSkeleton,
-  ConfirmDialog: () => ConfirmDialog,
-  CoordGrid: () => CoordGrid,
-  CoordInput: () => CoordInput,
-  EmptyState: () => EmptyState,
-  Field: () => Field,
-  FloatingPanel: () => FloatingPanel,
-  GeneratingOverlay: () => GeneratingOverlay,
-  IconButtonSkeleton: () => IconButtonSkeleton,
-  IconText: () => IconText,
-  ImageThumb: () => ImageThumb,
-  Inline: () => Inline,
-  Input: () => Input,
-  InputSkeleton: () => InputSkeleton,
-  ItemCard: () => ItemCard,
-  ItemList: () => ItemList,
-  Label: () => Label,
-  LineSkeleton: () => LineSkeleton,
-  List: () => List,
-  LoadingState: () => LoadingState,
-  Minimap: () => Minimap,
-  MutedText: () => MutedText,
-  PageCard: () => PageCard,
-  PageShell: () => PageShell,
-  PageTitle: () => PageTitle,
-  PanelCloseButton: () => PanelCloseButton,
-  PanelErrorBoundary: () => PanelErrorBoundary,
-  PanelFormSkeleton: () => PanelFormSkeleton,
-  PanelSection: () => PanelSection,
-  PanelTitle: () => PanelTitle,
-  PickerCard: () => PickerCard,
-  PickerGrid: () => PickerGrid,
-  PickerGridSkeleton: () => PickerGridSkeleton,
-  Pill: () => Pill,
-  SectionDescription: () => SectionDescription,
-  SectionTitle: () => SectionTitle,
-  Select: () => Select,
-  SelectSkeleton: () => SelectSkeleton,
-  Skeleton: () => Skeleton,
-  SplitLayout: () => SplitLayout,
-  Stack: () => Stack,
-  StoryCardSkeleton: () => StoryCardSkeleton,
-  StoryTitle: () => StoryTitle,
-  TagRow: () => TagRow,
-  Textarea: () => Textarea,
-  TextareaSkeleton: () => TextareaSkeleton,
-  ThemeToggle: () => ThemeToggle,
-  ThumbSkeleton: () => ThumbSkeleton,
-  TitleRow: () => TitleRow,
-  TitleSkeleton: () => TitleSkeleton,
-  UserCardSkeleton: () => UserCardSkeleton,
-  UserListSkeleton: () => UserListSkeleton,
-  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" })
-  ] });
-}
-function Moon({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...defaults(size), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" }) });
-}
-function Sun({ size, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...defaults(size), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12h2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 12h2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
-  ] });
-}
-
-// 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(" ");
-}
-
-// src/Alert.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var toneClasses = {
-  error: "status-error",
-  muted: "text-sm text-muted",
-  info: "ui-alert ui-alert--info",
-  success: "ui-alert ui-alert--success"
-};
-function Alert({ tone = "info", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: cn(toneClasses[tone], className), ...props });
-}
-
-// src/Button.tsx
-var import_react8 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var variantClasses = {
-  primary: "",
-  secondary: "secondary-btn",
-  danger: "danger-btn"
-};
-var Button = (0, import_react8.forwardRef)(function Button2({
-  variant = "primary",
-  fullWidth = false,
-  iconOnly = false,
-  loading = false,
-  disabled,
-  className,
-  children,
-  loadingText,
-  ...props
-}, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "button",
-    {
-      ref,
-      className: cn(variantClasses[variant], fullWidth && "full-width-btn", iconOnly && "icon-only-btn", className),
-      disabled: disabled || loading,
-      ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Loader2, { size: 14, className: "icon-spin" }),
-        loadingText || children
-      ] }) : children
-    }
-  );
-});
-
-// src/ButtonRow.tsx
-var import_react9 = require("react");
-function ButtonRow({ as = "div", className, ...props }) {
-  return (0, import_react9.createElement)(as, {
-    className: cn("button-row", className),
-    ...props
-  });
-}
-
-// src/Chip.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Chip({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("chip", className), ...props });
-}
-
-// src/ChoiceCard.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function ChoiceCard({ active = false, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    "button",
-    {
-      type: "button",
-      className: cn("choice-card", className),
-      "data-active": active,
-      ...props
-    }
-  );
-}
-
-// src/List.tsx
-var import_react10 = require("react");
-function List({ as = "ul", reset = true, className, ...props }) {
-  return (0, import_react10.createElement)(as, {
-    className: cn(reset && "list-reset", className),
-    ...props
-  });
-}
-
-// src/Skeleton.tsx
-var import_react11 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var radiusClasses = {
-  sm: "",
-  md: "skeleton--md",
-  pill: "skeleton--pill"
-};
-function Skeleton({ as = "div", radius = "sm", className, ...props }) {
-  return (0, import_react11.createElement)(as, {
-    className: cn("skeleton", radiusClasses[radius], className),
-    "aria-hidden": true,
-    ...props
-  });
-}
-function InputSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-input", className), ...rest });
-}
-function ButtonSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-btn", className), ...rest });
-}
-function IconButtonSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-icon-btn", className), ...rest });
-}
-function SelectSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-select", className), ...rest });
-}
-function TextareaSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-textarea", className), ...rest });
-}
-function ThumbSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-thumb", className), ...rest });
-}
-function ChipSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { radius: "pill", className: cn("skeleton-chip", className), ...rest });
-}
-function TitleSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-title", className), ...rest });
-}
-function LineSkeleton({ short = false, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-line", short && "skeleton-line--short", className), ...props });
-}
-function AvatarSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { radius: "pill", className: cn("skeleton-avatar", className), ...rest });
-}
-function CanvasSkeleton(props) {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Skeleton, { className: cn("skeleton-canvas", className), ...rest });
-}
-
-// src/ChoiceGroup.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function ChoiceGroup({
-  options,
-  value,
-  onChange,
-  className
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(List, { className: cn("choice-list", className), children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    ChoiceCard,
-    {
-      active: value === option.value,
-      onClick: () => onChange(option.value),
-      disabled: option.disabled,
-      "data-has-description": option.description ? "true" : "false",
-      children: option.description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "choice-card__row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "choice-card__label", children: option.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "choice-card__description", children: option.description })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "choice-card__label", children: option.label })
-    }
-  ) }, option.value)) });
-}
-function ChoiceGroupSkeleton({ count = 4, className, withDescription = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(List, { className: cn("choice-list", className), "aria-hidden": true, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "choice-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TitleSkeleton, { className: cn("skeleton-title--sm", !withDescription && "skeleton-choice-label") }),
-    withDescription ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LineSkeleton, { short: true }) : null
-  ] }) }, `choice-skeleton-${i}`)) });
-}
-
-// src/CoordGrid.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-function CoordGrid({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("coord-grid", className), ...props });
-}
-function CoordInput({ axis, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: cn("coord-input", className), children: [
-    axis,
-    " ",
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "number", step: "0.01", ...props })
-  ] });
-}
-
-// src/Stack.tsx
-var import_react12 = require("react");
-function Stack({
-  as,
-  size = "md",
-  className,
-  ...props
-}) {
-  return (0, import_react12.createElement)(as ?? "div", {
-    className: cn(size === "sm" ? "panel-stack-sm" : "panel-stack", className),
-    ...props
-  });
-}
-
-// src/Typography.tsx
-var import_react13 = require("react");
-var mutedSizeClasses = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: ""
-};
-function AssetTitle({ as = "p", clamp = false, className, ...props }) {
-  return (0, import_react13.createElement)(as, {
-    className: cn("asset-title", clamp && "asset-title--clamp", className),
-    ...props
-  });
-}
-function StoryTitle({ as = "h3", className, ...props }) {
-  return (0, import_react13.createElement)(as, {
-    className: cn("story-title", className),
-    ...props
-  });
-}
-function MutedText({ as = "p", size = "sm", className, ...props }) {
-  return (0, import_react13.createElement)(as, {
-    className: cn(mutedSizeClasses[size], "text-muted", className),
-    ...props
-  });
-}
-function PageTitle({ as = "h1", className, ...props }) {
-  return (0, import_react13.createElement)(as, {
-    className: cn("page-title", className),
-    ...props
-  });
-}
-function SectionTitle({ as = "span", className, ...props }) {
-  return (0, import_react13.createElement)(as, {
-    className: cn("widget-section__title", className),
-    ...props
-  });
-}
-function SectionDescription({ as = "p", className, ...props }) {
-  return (0, import_react13.createElement)(as, {
-    className: cn("widget-section__description", className),
-    ...props
-  });
-}
-
-// src/EmptyState.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-function EmptyState({ title, description, action }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Stack, { size: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AssetTitle, { children: title }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MutedText, { children: description }) : null,
-    action
-  ] });
-}
-
-// src/Field.tsx
-var import_react14 = require("react");
-
-// src/Label.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("label", { className: cn("widget-label", className), ...props });
-}
-
-// src/Field.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-function Field({
-  as,
-  label,
-  htmlFor,
-  hint,
-  error,
-  layout = "stack",
-  className,
-  children,
-  ...props
-}) {
-  return (0, import_react14.createElement)(
-    as ?? "div",
-    {
-      className: cn(layout === "control" ? "widget-control" : "panel-stack-sm", className),
-      ...props
-    },
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor, children: label }) : null,
-      children,
-      hint ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MutedText, { size: "xs", children: hint }) : null,
-      error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "field-error", children: error }) : null
-    ] })
-  );
-}
-
-// src/GeneratingOverlay.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-function GeneratingOverlay({ isGenerating, children, message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "generating-overlay-wrap", children: [
-    children,
-    isGenerating && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "generating-overlay", "aria-live": "polite", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Loader2, { size: 20, className: "icon-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: message ?? "Generating, please wait\u2026" })
-    ] })
-  ] });
-}
-
-// src/IconText.tsx
-var import_react15 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-function IconText({ as = "span", icon, className, children, ...props }) {
-  return (0, import_react15.createElement)(
-    as,
-    {
-      className: cn("inline-row", className),
-      ...props
-    },
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
-      icon,
-      children
-    ] })
-  );
-}
-
-// src/ImageThumb.tsx
-var import_react16 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-function ImageThumb({
-  src,
-  alt,
-  placeholder = "No image",
-  size = "md",
-  fit = "contain",
-  onImageError,
-  className,
-  ...props
-}) {
-  const [failedSrc, setFailedSrc] = (0, import_react16.useState)(null);
-  const failed = Boolean(src && failedSrc === src);
-  const classes = cn("image-thumb", `image-thumb--${size}`, `image-thumb--fit-${fit}`, className);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: classes, ...props, children: src && !failed ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    "img",
-    {
-      src,
-      alt,
-      className: "image-thumb__img",
-      style: { objectFit: fit, objectPosition: "center" },
-      onError: () => {
-        setFailedSrc(src);
-        onImageError?.();
-      }
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "image-thumb__placeholder", children: placeholder }) });
-}
-
-// src/Inline.tsx
-var import_react17 = require("react");
-function Inline({
-  as,
-  justify = "start",
-  className,
-  ...props
-}) {
-  return (0, import_react17.createElement)(as ?? "div", {
-    className: cn(justify === "between" ? "space-between" : "inline-row", className),
-    ...props
-  });
-}
-
-// src/Input.tsx
-var import_react18 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var Input = (0, import_react18.forwardRef)(function Input2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { ref, className: cn(className), ...props });
-});
-
-// src/ItemCard.tsx
-var import_react19 = require("react");
-function ItemCard({ as = "div", className, ...props }) {
-  return (0, import_react19.createElement)(as, {
-    className: cn("item-card", className),
-    ...props
-  });
-}
-
-// src/ItemList.tsx
-var import_react20 = require("react");
-function ItemList({ as = "div", className, ...props }) {
-  return (0, import_react20.createElement)(as, {
-    className: cn("item-list", className),
-    ...props
-  });
-}
-
-// src/LoadingState.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
-function LoadingState({ label = "Loading...", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: cn("status-inline", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader2, { size: 14, className: "icon-spin" }),
-    label
-  ] });
-}
-
-// src/PageLayout.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-function PageShell({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("main", { className: "page-shell", children });
-}
-function PageCard({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "page-card", children });
-}
-
-// src/PanelCloseButton.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-function PanelCloseButton({ onClick, label = "Close" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Button, { variant: "secondary", className: "panel-close-btn", onClick, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(X, { size: 14 }),
-    label
-  ] });
-}
-
-// src/PanelSection.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
-function PanelSection({ heading, description, actions, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: cn("widget-section", className), ...props, children: [
-    heading || actions ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: actions ? "title-row" : void 0, children: [
-      heading ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionTitle, { children: heading }) : null,
-      actions
-    ] }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SectionDescription, { children: description }) : null,
-    children
-  ] });
-}
-
-// src/PanelTitle.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function PanelTitle({ icon: Icon, label }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "panel-title-with-icon", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { size: 13, className: "panel-title-icon" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: label })
-  ] });
-}
-
-// src/PickerCard.tsx
-var import_react21 = require("react");
-function PickerCard({ as = "button", className, ...props }) {
-  return (0, import_react21.createElement)(as, {
-    className: cn("picker-card", className),
-    ...props
-  });
-}
-
-// src/PickerGrid.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var variantClasses2 = {
-  elements: "picker-grid--elements",
-  characters: "picker-grid--characters",
-  library: "picker-grid--library"
-};
-function PickerGrid({ variant, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(List, { className: cn("picker-grid", variantClasses2[variant], className), ...props });
-}
-
-// src/Pill.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var toneClasses2 = {
-  default: "",
-  success: "success",
-  warning: "warning",
-  danger: "danger"
-};
-function Pill({ tone = "default", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: cn("pill", toneClasses2[tone], className), ...props });
-}
-
-// src/Select.tsx
-var import_react22 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Select = (0, import_react22.forwardRef)(function Select2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("select", { ref, className: cn(className), ...props });
-});
-
-// src/SplitLayout.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var variantClasses3 = {
-  element: "split-layout--element",
-  character: "split-layout--character",
-  user: "split-layout--user"
-};
-function SplitLayout({ variant, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("split-layout", variantClasses3[variant], className), ...props });
-}
-
-// src/TagRow.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-function TagRow({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cn("tag-row", className), ...props });
-}
-
-// src/Textarea.tsx
-var import_react23 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Textarea = (0, import_react23.forwardRef)(function Textarea2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("textarea", { ref, className: cn(className), ...props });
-});
-
-// src/ThemeToggle.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
-function ThemeToggle({ className, theme = "light", onToggle, lightIcon, darkIcon }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { className, onClick: onToggle, title: `Switch to ${theme === "light" ? "dark" : "light"} mode`, "aria-label": "Toggle theme", children: theme === "light" ? darkIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Moon, {}) : lightIcon ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Sun, {}) });
-}
-
-// src/TitleRow.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
-function TitleRow({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("title-row", className), ...props });
-}
-
-// src/WidgetSkeletons.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
-function PanelFormSkeleton({ inputs = 1, showButton = true, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { className, ...props, children: [
-    Array.from({ length: inputs }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(InputSkeleton, {}, `panel-form-input-${i}`)),
-    showButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ButtonSkeleton, {})
-  ] });
-}
-function StoryCardSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("article", { className: "story-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "story-cover", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "story-cover__placeholder story-cover__placeholder--skeleton" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "story-card__overlay story-card__overlay--skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "story-card__overlay-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Inline, { as: "header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {})
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TitleSkeleton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LineSkeleton, { short: true })
-    ] }) })
-  ] });
-}
-function UserCardSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemCard, { as: "li", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(SplitLayout, { variant: "user", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(AvatarSkeleton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TitleSkeleton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LineSkeleton, { short: true })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectSkeleton, {})
-    ] })
-  ] }) });
-}
-function UserListSkeleton({ count = 3 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ItemList, { as: "ul", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(UserCardSkeleton, {}, `user-skeleton-${i}`)) });
-}
-function AssetCardSkeleton() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ItemCard, { as: "li", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ThumbSkeleton, { className: "asset-thumb" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TitleSkeleton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(TagRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChipSkeleton, {})
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ButtonRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ButtonSkeleton, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ButtonSkeleton, {})
-    ] })
-  ] });
-}
-function PickerGridSkeleton({ count = 8, gridClass }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(List, { className: cn("picker-grid", gridClass), children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(PickerCard, { as: "div", className: "picker-card--skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { size: "sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ThumbSkeleton, { className: "asset-thumb" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(LineSkeleton, { short: true })
-  ] }) }) }, `picker-skeleton-${i}`)) });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Alert,
-  AssetCardSkeleton,
-  AssetTitle,
-  AvatarSkeleton,
-  Button,
-  ButtonRow,
-  ButtonSkeleton,
-  CanvasSkeleton,
-  Chip,
-  ChipSkeleton,
-  ChoiceCard,
-  ChoiceGroup,
-  ChoiceGroupSkeleton,
-  ConfirmDialog,
-  CoordGrid,
-  CoordInput,
-  EmptyState,
-  Field,
-  FloatingPanel,
-  GeneratingOverlay,
-  IconButtonSkeleton,
-  IconText,
-  ImageThumb,
-  Inline,
-  Input,
-  InputSkeleton,
-  ItemCard,
-  ItemList,
-  Label,
-  LineSkeleton,
-  List,
-  LoadingState,
-  Minimap,
-  MutedText,
-  PageCard,
-  PageShell,
-  PageTitle,
-  PanelCloseButton,
-  PanelErrorBoundary,
-  PanelFormSkeleton,
-  PanelSection,
-  PanelTitle,
-  PickerCard,
-  PickerGrid,
-  PickerGridSkeleton,
-  Pill,
-  SectionDescription,
-  SectionTitle,
-  Select,
-  SelectSkeleton,
-  Skeleton,
-  SplitLayout,
-  Stack,
-  StoryCardSkeleton,
-  StoryTitle,
-  TagRow,
-  Textarea,
-  TextareaSkeleton,
-  ThemeToggle,
-  ThumbSkeleton,
-  TitleRow,
-  TitleSkeleton,
-  UserCardSkeleton,
-  UserListSkeleton,
-  WHITEBOARD_GRID,
-  WhiteboardShell,
-  ZoomBar,
-  belowPanel,
-  cn,
-  computeWhiteboardFit,
-  computeWhiteboardRectFocus,
-  snapToWhiteboardGrid,
-  usePanelRect,
-  useWhiteboardLayout,
-  useWhiteboardStore
-});
-//# sourceMappingURL=index.cjs.map