entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/primitives/viewport/Viewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.js","sources":["src/components/primitives/viewport/Viewport.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  useCallback,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\n\nimport { useControlledState, useResizeObserver } from '@/hooks';\nimport { cx } from '@/utils/cx';\nimport { clamp } from '@/utils/mathUtils';\n\nimport { useViewportGestures } from './useViewportGestures';\nimport {\n  viewportRootRecipe,\n  viewportHeightVar,\n  marqueeRectStyle,\n} from './Viewport.css';\nimport { ViewportStoreContext, useViewportStore } from './ViewportContext';\nimport { ViewportStore } from './ViewportStore';\n\nimport type { ViewportProps, ViewportTransform } from './Viewport.types';\n\nconst IDENTITY_TRANSFORM: ViewportTransform = { x: 0, y: 0, zoom: 1 };\n\n// Stable empty defaults so `useViewportGestures` does not re-compute config\n// objects on every render when the consumer passes nothing.\nconst EMPTY_PAN = {};\nconst EMPTY_ZOOM = {};\nconst EMPTY_SELECTION = {};\n\ninterface CategorizedChildren {\n  layers: React.ReactElement[];\n  worldChildren: React.ReactElement[];\n  overlayChildren: React.ReactElement[];\n}\n\nfunction getSlotKind(\n  child: React.ReactElement\n): 'layer' | 'world' | 'overlay' | null {\n  const displayName = (child.type as { displayName?: string } | undefined)\n    ?.displayName;\n  if (displayName === 'ViewportLayer') return 'layer';\n  if (displayName === 'ViewportWorld') return 'world';\n  if (displayName === 'ViewportOverlay') return 'overlay';\n  // Compound components rendered in the overlay slot (e.g. <ViewportMinimap />).\n  if (displayName === 'ViewportMinimap') return 'overlay';\n  return null;\n}\n\nfunction categorizeChildren(children: React.ReactNode): CategorizedChildren {\n  const layers: React.ReactElement[] = [];\n  const worldChildren: React.ReactElement[] = [];\n  const overlayChildren: React.ReactElement[] = [];\n\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) return;\n    const kind = getSlotKind(child);\n    if (kind === 'layer') layers.push(child);\n    else if (kind === 'world') worldChildren.push(child);\n    else if (kind === 'overlay') overlayChildren.push(child);\n  });\n\n  return { layers, worldChildren, overlayChildren };\n}\n\n/**\n * Viewport — pan/zoom canvas + HTML container for editor-style surfaces\n * such as node graphs, timelines, and 2D world editors.\n *\n * Composes:\n * - Multiple perf-isolated `<ViewportLayer>` canvases (one draw cycle each).\n * - `<ViewportWorld>` for HTML positioned in world coordinates.\n * - `<ViewportOverlay>` for HTML pinned to the viewport (toolbars, minimap).\n *\n * Owns pan/zoom gestures (drag-to-pan, wheel-zoom-toward-cursor, optional\n * pinch and space-to-pan) and optional marquee selection. Transform is\n * controlled or uncontrolled (`useControlledState`-style) and mirrored\n * into an internal `ViewportStore` that powers slice-level subscriptions\n * for layers, world, and overlay children.\n *\n * @example\n * ```tsx\n * <Viewport responsive selectionRect={{ enabled: true }}>\n *   <ViewportLayer name=\"grid\" draw={drawGrid} invalidateOn={[gridStep]} />\n *   <ViewportLayer name=\"content\" draw={drawNodes} invalidateOn={[nodes]} />\n *   <ViewportWorld>\n *     <NodeView style={{ position: 'absolute', left: 100, top: 200 }} />\n *   </ViewportWorld>\n *   <ViewportOverlay>\n *     <Toolbar />\n *   </ViewportOverlay>\n * </Viewport>\n * ```\n */\nexport const Viewport = ({\n  transform: transformProp,\n  defaultTransform,\n  onTransformChange,\n  minZoom = 0.1,\n  maxZoom = 8,\n  pan,\n  zoom,\n  selectionRect,\n  onSelectionChange,\n  onPanStart,\n  onPanEnd,\n  onZoomStart,\n  onZoomEnd,\n  responsive = false,\n  height = 300,\n  disabled = false,\n  role = 'application',\n  ariaLabel,\n  ariaRoledescription,\n  className,\n  style,\n  testId,\n  id,\n  children,\n  ref,\n  ...rest\n}: ViewportProps): React.ReactElement => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  // One store per <Viewport> instance, stable for the lifetime of the component.\n  const store = useMemo(() => new ViewportStore(), []);\n\n  // ── Controlled / uncontrolled transform (React state) ──\n  const clampTransform = useCallback(\n    (t: ViewportTransform): ViewportTransform => ({\n      x: t.x,\n      y: t.y,\n      zoom: clamp(t.zoom, minZoom, maxZoom),\n    }),\n    [minZoom, maxZoom]\n  );\n\n  const [transformRaw, setTransformRaw] = useControlledState<ViewportTransform>(\n    {\n      value: transformProp,\n      defaultValue: defaultTransform,\n      onChange: onTransformChange,\n      fallback: IDENTITY_TRANSFORM,\n    }\n  );\n\n  const transform = useMemo(\n    () => clampTransform(transformRaw),\n    [transformRaw, clampTransform]\n  );\n  const setTransform = useCallback(\n    (next: ViewportTransform) => {\n      setTransformRaw(clampTransform(next));\n    },\n    [setTransformRaw, clampTransform]\n  );\n\n  // Mirror React state → store before paint so layer/world subscribers see the\n  // latest transform in the same frame.\n  useLayoutEffect(() => {\n    store.setTransform(transform);\n  }, [store, transform]);\n\n  // Wire the store's imperative methods (fitToContent etc.) to React's\n  // setTransform and current zoom limits.\n  useLayoutEffect(() => {\n    store.configureImperative({ setTransform, minZoom, maxZoom });\n  }, [store, setTransform, minZoom, maxZoom]);\n\n  // ── Size tracking ──\n  useResizeObserver(rootRef, entry => {\n    store.setSize({\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    });\n  });\n\n  // Seed size on mount in case ResizeObserver fires asynchronously.\n  useLayoutEffect(() => {\n    const el = rootRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    store.setSize({ width: rect.width, height: rect.height });\n  }, [store]);\n\n  // ── Imperative ref ──\n  useImperativeHandle(ref, () => store.handle, [store]);\n\n  // ── Gestures ──\n  const { handlers } = useViewportGestures({\n    viewportRef: rootRef,\n    store,\n    setTransform,\n    disabled,\n    minZoom,\n    maxZoom,\n    pan: pan ?? EMPTY_PAN,\n    zoom: zoom ?? EMPTY_ZOOM,\n    selectionRect: selectionRect ?? EMPTY_SELECTION,\n    callbacks: {\n      onPanStart,\n      onPanEnd,\n      onZoomStart,\n      onZoomEnd,\n      onSelectionChange,\n    },\n  });\n\n  // Subscribe to isPanning only — drives the cursor class on the wrapper.\n  const isPanning = useSyncExternalStore(\n    store.subscribeIsPanning,\n    store.getIsPanning\n  );\n\n  // ── Children categorization ──\n  const { layers, worldChildren, overlayChildren } = useMemo(\n    () => categorizeChildren(children),\n    [children]\n  );\n\n  const rootStyle = useMemo(\n    () => ({\n      ...style,\n      ...(!responsive\n        ? assignInlineVars({ [viewportHeightVar]: `${height}px` })\n        : {}),\n    }),\n    [style, responsive, height]\n  );\n\n  return (\n    <div\n      ref={rootRef}\n      id={id}\n      data-testid={testId}\n      role={role}\n      aria-label={ariaLabel}\n      aria-roledescription={ariaRoledescription}\n      tabIndex={disabled ? -1 : 0}\n      className={cx(\n        viewportRootRecipe({\n          responsive,\n          disabled,\n          panning: isPanning,\n        }),\n        className\n      )}\n      style={rootStyle}\n      onPointerDown={handlers.onPointerDown}\n      onPointerMove={handlers.onPointerMove}\n      onPointerUp={handlers.onPointerUp}\n      onPointerCancel={handlers.onPointerCancel}\n      onPointerEnter={handlers.onPointerEnter}\n      onPointerLeave={handlers.onPointerLeave}\n      onContextMenu={handlers.onContextMenu}\n      {...rest}\n    >\n      <ViewportStoreContext.Provider value={store}>\n        {layers}\n        {worldChildren}\n        {overlayChildren}\n        <MarqueeRect />\n      </ViewportStoreContext.Provider>\n    </div>\n  );\n};\n\nViewport.displayName = 'Viewport';\n\n/**\n * Internal — renders the marquee selection rectangle. Subscribes only to\n * the marquee slice so it re-renders only when the rectangle changes,\n * never on transform/size/isPanning mutations.\n */\nconst MarqueeRect: React.FC = () => {\n  const store = useViewportStore();\n  const rect = useSyncExternalStore(\n    store.subscribeMarquee,\n    store.getMarqueeRect\n  );\n  if (!rect) return null;\n  return (\n    <div\n      className={marqueeRectStyle}\n      style={{\n        left: rect.x,\n        top: rect.y,\n        width: rect.width,\n        height: rect.height,\n      }}\n      data-viewport-marquee=\"\"\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA;AAEA;AACA;AACA;AACA;AACA;AAQA;AAGE;AACE;;AACmC;;AACA;;AACE;;;AAEA;AACvC;AACF;AAEA;;;;;AAMI;;AACA;;AACsB;;AACK;;AACE;AAC/B;AAEA;AACF;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;AACI;AA4BL;;AAGA;;;;;;AAQG;AAIH;AAEI;AACA;AACA;AACA;AACD;AAGH;AAIA;AAEI;AACF;;;;AAOA;AACF;;;;;;;AASA;;AAEI;AACA;AACD;AACH;;;AAIE;AACA;;AACA;AACA;AACF;;AAGA;;AAGA;AACE;;;;;;;;;AASA;;;;;;AAMC;AACF;;AAGD;;;AAWA;AAEI;;AAEE;;;AAMN;;;AAaQ;AACD;AAqBT;AAEA;AAEA;;;;AAIG;AACH;AACE;AACA;AAIA;AAAW;AACX;;;;;;AAYF;;"}

package/dist/esm/components/primitives/viewport/ViewportContext.js

@@ -0,0 +1,47 @@
+"use client";
+import { useContext, createContext, useSyncExternalStore } from 'react';
+
+const ViewportStoreContext = 
+/*#__PURE__*/ createContext(null);
+/**
+ * Internal hook returning the store instance. Throws when called outside
+ * a `<Viewport>` subtree.
+ */
+function useViewportStore() {
+    const store = useContext(ViewportStoreContext);
+    if (!store) {
+        throw new Error('useViewportContext must be used inside a <Viewport> subtree.');
+    }
+    return store;
+}
+/**
+ * Read viewport state from inside `<Viewport>` children.
+ *
+ * Returns `transform`, `size`, `isPanning`, and the imperative `handle`.
+ * The hook subscribes to every store mutation — if you only need one slice
+ * (e.g. just the transform) reach for `useViewportStore()` directly and
+ * subscribe to a single slice with `useSyncExternalStore`.
+ *
+ * @throws If called outside a `<Viewport>` subtree.
+ *
+ * @example
+ * ```tsx
+ * function Minimap() {
+ *   const { transform, size, handle } = useViewportContext();
+ *   // ...
+ * }
+ * ```
+ */
+function useViewportContext() {
+    const store = useViewportStore();
+    const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);
+    return {
+        transform: snapshot.transform,
+        size: snapshot.size,
+        isPanning: snapshot.isPanning,
+        handle: store.handle,
+    };
+}
+
+export { ViewportStoreContext, useViewportContext, useViewportStore };
+//# sourceMappingURL=ViewportContext.js.map

package/dist/esm/components/primitives/viewport/ViewportContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportContext.js","sources":["src/components/primitives/viewport/ViewportContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nimport type { ViewportContextValue } from './Viewport.types';\nimport type { ViewportStore } from './ViewportStore';\n\nexport const ViewportStoreContext =\n  /*#__PURE__*/ createContext<ViewportStore | null>(null);\n\n/**\n * Internal hook returning the store instance. Throws when called outside\n * a `<Viewport>` subtree.\n */\nexport function useViewportStore(): ViewportStore {\n  const store = useContext(ViewportStoreContext);\n  if (!store) {\n    throw new Error(\n      'useViewportContext must be used inside a <Viewport> subtree.'\n    );\n  }\n  return store;\n}\n\n/**\n * Read viewport state from inside `<Viewport>` children.\n *\n * Returns `transform`, `size`, `isPanning`, and the imperative `handle`.\n * The hook subscribes to every store mutation — if you only need one slice\n * (e.g. just the transform) reach for `useViewportStore()` directly and\n * subscribe to a single slice with `useSyncExternalStore`.\n *\n * @throws If called outside a `<Viewport>` subtree.\n *\n * @example\n * ```tsx\n * function Minimap() {\n *   const { transform, size, handle } = useViewportContext();\n *   // ...\n * }\n * ```\n */\nexport function useViewportContext(): ViewportContextValue {\n  const store = useViewportStore();\n  const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot);\n\n  return {\n    transform: snapshot.transform,\n    size: snapshot.size,\n    isPanning: snapshot.isPanning,\n    handle: store.handle,\n  };\n}\n"],"names":[],"mappings":";;;;AAQE;AAEF;;;AAGG;;AAED;;AAEE;;AAIF;AACF;AAEA;;;;;;;;;;;;;;;;;AAiBG;;AAED;AACA;;;;;;;AAQF;;"}

package/dist/esm/components/primitives/viewport/ViewportLayer.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useSyncExternalStore, useRef, useCallback, useEffect } from 'react';
+import { resolveCanvasTheme } from '../canvas/canvasTheme.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { cx } from '../../../utils/cx.js';
+import { layerCanvasStyle } from './Viewport.css.js';
+import { useViewportStore } from './ViewportContext.js';
+import { screenToWorld, worldToScreen } from './viewportCoords.js';
+
+/**
+ * A perf-isolated canvas layer inside a `<Viewport>`.
+ *
+ * Each layer owns its own `<canvas>` element and runs an independent draw
+ * cycle. Draws are scheduled via `requestAnimationFrame` whenever the
+ * viewport transform, viewport size, or any `invalidateOn` dependency
+ * changes — or when the imperative `handle.invalidate(name)` is called.
+ *
+ * @example
+ * ```tsx
+ * <ViewportLayer
+ *   name="grid"
+ *   draw={(ctx, { size, transform, theme }) => {
+ *     ctx.fillStyle = theme.borderDefault;
+ *     // ... draw grid
+ *   }}
+ *   invalidateOn={[gridStep]}
+ * />
+ * ```
+ */
+const ViewportLayer = ({ name, draw, invalidateOn, paused = false, className, }) => {
+    const store = useViewportStore();
+    const transform = useSyncExternalStore(store.subscribeTransform, store.getTransform);
+    const size = useSyncExternalStore(store.subscribeSize, store.getSize);
+    const canvasRef = useRef(null);
+    const rafRef = useRef(0);
+    const drawRef = useLatest(draw);
+    const pausedRef = useLatest(paused);
+    const performDraw = useCallback(() => {
+        if (pausedRef.current)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const currentSize = store.getSize();
+        if (currentSize.width <= 0 || currentSize.height <= 0)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+        const targetW = Math.max(1, Math.round(currentSize.width * dpr));
+        const targetH = Math.max(1, Math.round(currentSize.height * dpr));
+        if (canvas.width !== targetW || canvas.height !== targetH) {
+            canvas.width = targetW;
+            canvas.height = targetH;
+        }
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, currentSize.width, currentSize.height);
+        const currentTransform = store.getTransform();
+        const theme = resolveCanvasTheme(canvas);
+        const info = {
+            size: currentSize,
+            transform: currentTransform,
+            theme,
+            worldToScreen: p => worldToScreen(p, currentTransform),
+            screenToWorld: p => screenToWorld(p, currentTransform),
+        };
+        drawRef.current(ctx, info);
+    }, [store, drawRef, pausedRef]);
+    const scheduleDraw = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(performDraw);
+    }, [performDraw]);
+    // Subscribe to per-layer invalidation events fired by `handle.invalidate(name)`.
+    useEffect(() => {
+        return store.subscribeLayer(name, scheduleDraw);
+    }, [store, name, scheduleDraw]);
+    // Schedule a redraw when transform, size, or `invalidateOn` deps change.
+    useEffect(() => {
+        scheduleDraw();
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+        };
+        // `invalidateOn` is intentionally spread into deps so each entry is tracked.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [transform, size, scheduleDraw, ...(invalidateOn ?? [])]);
+    // Re-render when DPR changes (e.g., dragging the window to a different display).
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        const handler = () => {
+            scheduleDraw();
+        };
+        mq.addEventListener('change', handler);
+        return () => {
+            mq.removeEventListener('change', handler);
+        };
+    }, [scheduleDraw]);
+    return (jsx("canvas", { ref: canvasRef, className: cx(layerCanvasStyle, className), "data-viewport-layer": name, "aria-hidden": "true" }));
+};
+ViewportLayer.displayName = 'ViewportLayer';
+
+export { ViewportLayer };
+//# sourceMappingURL=ViewportLayer.js.map

package/dist/esm/components/primitives/viewport/ViewportLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportLayer.js","sources":["src/components/primitives/viewport/ViewportLayer.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\n\nimport { resolveCanvasTheme } from '@/components/primitives/canvas/canvasTheme';\nimport { useLatest } from '@/hooks';\nimport { cx } from '@/utils/cx';\n\nimport { layerCanvasStyle } from './Viewport.css';\nimport { useViewportStore } from './ViewportContext';\nimport { worldToScreen, screenToWorld } from './viewportCoords';\n\nimport type {\n  ViewportLayerDrawInfo,\n  ViewportLayerProps,\n} from './Viewport.types';\n\n/**\n * A perf-isolated canvas layer inside a `<Viewport>`.\n *\n * Each layer owns its own `<canvas>` element and runs an independent draw\n * cycle. Draws are scheduled via `requestAnimationFrame` whenever the\n * viewport transform, viewport size, or any `invalidateOn` dependency\n * changes — or when the imperative `handle.invalidate(name)` is called.\n *\n * @example\n * ```tsx\n * <ViewportLayer\n *   name=\"grid\"\n *   draw={(ctx, { size, transform, theme }) => {\n *     ctx.fillStyle = theme.borderDefault;\n *     // ... draw grid\n *   }}\n *   invalidateOn={[gridStep]}\n * />\n * ```\n */\nexport const ViewportLayer: React.FC<ViewportLayerProps> = ({\n  name,\n  draw,\n  invalidateOn,\n  paused = false,\n  className,\n}) => {\n  const store = useViewportStore();\n  const transform = useSyncExternalStore(\n    store.subscribeTransform,\n    store.getTransform\n  );\n  const size = useSyncExternalStore(store.subscribeSize, store.getSize);\n\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n  const rafRef = useRef<number>(0);\n  const drawRef = useLatest(draw);\n  const pausedRef = useLatest(paused);\n\n  const performDraw = useCallback((): void => {\n    if (pausedRef.current) return;\n    const canvas = canvasRef.current;\n    if (!canvas) return;\n    const currentSize = store.getSize();\n    if (currentSize.width <= 0 || currentSize.height <= 0) return;\n\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n\n    const dpr =\n      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n    const targetW = Math.max(1, Math.round(currentSize.width * dpr));\n    const targetH = Math.max(1, Math.round(currentSize.height * dpr));\n    if (canvas.width !== targetW || canvas.height !== targetH) {\n      canvas.width = targetW;\n      canvas.height = targetH;\n    }\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.clearRect(0, 0, currentSize.width, currentSize.height);\n\n    const currentTransform = store.getTransform();\n    const theme = resolveCanvasTheme(canvas);\n    const info: ViewportLayerDrawInfo = {\n      size: currentSize,\n      transform: currentTransform,\n      theme,\n      worldToScreen: p => worldToScreen(p, currentTransform),\n      screenToWorld: p => screenToWorld(p, currentTransform),\n    };\n    drawRef.current(ctx, info);\n  }, [store, drawRef, pausedRef]);\n\n  const scheduleDraw = useCallback((): void => {\n    cancelAnimationFrame(rafRef.current);\n    rafRef.current = requestAnimationFrame(performDraw);\n  }, [performDraw]);\n\n  // Subscribe to per-layer invalidation events fired by `handle.invalidate(name)`.\n  useEffect(() => {\n    return store.subscribeLayer(name, scheduleDraw);\n  }, [store, name, scheduleDraw]);\n\n  // Schedule a redraw when transform, size, or `invalidateOn` deps change.\n  useEffect(() => {\n    scheduleDraw();\n    return () => {\n      cancelAnimationFrame(rafRef.current);\n    };\n    // `invalidateOn` is intentionally spread into deps so each entry is tracked.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [transform, size, scheduleDraw, ...(invalidateOn ?? [])]);\n\n  // Re-render when DPR changes (e.g., dragging the window to a different display).\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const mq = window.matchMedia(\n      `(resolution: ${window.devicePixelRatio}dppx)`\n    );\n    const handler = (): void => {\n      scheduleDraw();\n    };\n    mq.addEventListener('change', handler);\n    return () => {\n      mq.removeEventListener('change', handler);\n    };\n  }, [scheduleDraw]);\n\n  return (\n    <canvas\n      ref={canvasRef}\n      className={cx(layerCanvasStyle, className)}\n      data-viewport-layer={name}\n      aria-hidden=\"true\"\n    />\n  );\n};\n\nViewportLayer.displayName = 'ViewportLayer';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;AAmBG;AACI;AAOL;AACA;AAIA;AAEA;AACA;AACA;AACA;AAEA;;;AAEE;AACA;;AACA;;;;AAIA;;AAEA;AAEA;AACA;AACA;AACE;AACA;;AAEF;AACA;AAEA;AACA;AACA;AACE;AACA;;;;;AAKF;;AAGF;AACE;AACA;AACF;;;;;;;AASE;AACA;AACE;AACF;;;AAGF;;;;;AAKE;;AAIE;AACF;AACA;AACA;AACE;AACF;AACF;;AAUF;AAEA;;"}

package/dist/esm/components/primitives/viewport/ViewportOverlay.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { overlayLayerStyle } from './Viewport.css.js';
+
+/**
+ * Container for HTML children positioned in **screen coordinates**, rendered
+ * above all canvas layers and world children.
+ *
+ * Typical use: toolbars, status text, minimap, or any UI that should stay
+ * pinned to the viewport regardless of pan/zoom.
+ *
+ * Pointer events from interactive overlay children (buttons, sliders, …)
+ * are stopped at the overlay boundary so a click on the toolbar does not
+ * also start a Viewport pan or marquee gesture. The wrapper itself stays
+ * `pointer-events: none`; children opt in with `pointerEvents: 'auto'`.
+ *
+ * @example
+ * ```tsx
+ * <ViewportOverlay>
+ *   <div style={{ position: 'absolute', bottom: 8, right: 8 }}>
+ *     <Minimap />
+ *   </div>
+ * </ViewportOverlay>
+ * ```
+ */
+const ViewportOverlay = ({ children, className, style, }) => {
+    // Stop pointer events from interactive overlay children from reaching the
+    // Viewport wrapper. Without this, clicking a toolbar button starts a
+    // marquee/pan gesture (and the gesture's `setPointerCapture` steals the
+    // pointer-up event, so the button's `onClick` never fires).
+    const stopPointer = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    // Same problem for the native wheel listener: stopImmediatePropagation
+    // prevents the Viewport's non-passive wheel zoom from firing when the user
+    // scrolls inside an overlay (e.g., a scrollable list in a toolbar).
+    const stopWheel = useCallback((e) => {
+        e.nativeEvent.stopImmediatePropagation();
+    }, []);
+    return (jsx("div", { className: cx(overlayLayerStyle, className), style: style, onPointerDown: stopPointer, onPointerMove: stopPointer, onPointerUp: stopPointer, onPointerCancel: stopPointer, onWheel: stopWheel, children: children }));
+};
+ViewportOverlay.displayName = 'ViewportOverlay';
+
+export { ViewportOverlay };
+//# sourceMappingURL=ViewportOverlay.js.map

package/dist/esm/components/primitives/viewport/ViewportOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportOverlay.js","sources":["src/components/primitives/viewport/ViewportOverlay.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { overlayLayerStyle } from './Viewport.css';\n\nimport type { ViewportOverlayProps } from './Viewport.types';\n\n/**\n * Container for HTML children positioned in **screen coordinates**, rendered\n * above all canvas layers and world children.\n *\n * Typical use: toolbars, status text, minimap, or any UI that should stay\n * pinned to the viewport regardless of pan/zoom.\n *\n * Pointer events from interactive overlay children (buttons, sliders, …)\n * are stopped at the overlay boundary so a click on the toolbar does not\n * also start a Viewport pan or marquee gesture. The wrapper itself stays\n * `pointer-events: none`; children opt in with `pointerEvents: 'auto'`.\n *\n * @example\n * ```tsx\n * <ViewportOverlay>\n *   <div style={{ position: 'absolute', bottom: 8, right: 8 }}>\n *     <Minimap />\n *   </div>\n * </ViewportOverlay>\n * ```\n */\nexport const ViewportOverlay: React.FC<ViewportOverlayProps> = ({\n  children,\n  className,\n  style,\n}) => {\n  // Stop pointer events from interactive overlay children from reaching the\n  // Viewport wrapper. Without this, clicking a toolbar button starts a\n  // marquee/pan gesture (and the gesture's `setPointerCapture` steals the\n  // pointer-up event, so the button's `onClick` never fires).\n  const stopPointer = useCallback((e: React.PointerEvent<HTMLDivElement>) => {\n    e.stopPropagation();\n  }, []);\n  // Same problem for the native wheel listener: stopImmediatePropagation\n  // prevents the Viewport's non-passive wheel zoom from firing when the user\n  // scrolls inside an overlay (e.g., a scrollable list in a toolbar).\n  const stopWheel = useCallback((e: React.WheelEvent<HTMLDivElement>) => {\n    e.nativeEvent.stopImmediatePropagation();\n  }, []);\n\n  return (\n    <div\n      className={cx(overlayLayerStyle, className)}\n      style={style}\n      onPointerDown={stopPointer}\n      onPointerMove={stopPointer}\n      onPointerUp={stopPointer}\n      onPointerCancel={stopPointer}\n      onWheel={stopWheel}\n    >\n      {children}\n    </div>\n  );\n};\n\nViewportOverlay.displayName = 'ViewportOverlay';\n"],"names":[],"mappings":";;;;;;AAUA;;;;;;;;;;;;;;;;;;;;AAoBG;AACI;;;;;AASL;;;;;;AAMA;AACE;;AAGF;AAaF;AAEA;;"}

package/dist/esm/components/primitives/viewport/ViewportStore.js

@@ -0,0 +1,210 @@
+import { computeCenterTransform, computeFitTransform } from './viewportMath.js';
+
+const IDENTITY_TRANSFORM = { x: 0, y: 0, zoom: 1 };
+/**
+ * Single source of truth for viewport runtime state — `transform`, `size`,
+ * `isPanning`, `marqueeRect`, and per-layer invalidation events.
+ *
+ * Designed for React's `useSyncExternalStore`: each slice has its own
+ * subscribe/get pair so subscribers re-render only when their slice
+ * changes (not on every store mutation).
+ *
+ * `Viewport.tsx` configures the imperative methods (`fitToContent`,
+ * `centerOn`, …) at mount via `configureImperative()` so the store knows
+ * how to push transform updates back to React state. Until configured,
+ * those methods are no-ops.
+ */
+class ViewportStore {
+    constructor() {
+        this.transform = IDENTITY_TRANSFORM;
+        this.size = { width: 0, height: 0 };
+        this.isPanning = false;
+        this.marqueeRect = null;
+        this.snapshot = this.computeSnapshot();
+        this.allListeners = new Set();
+        this.transformListeners = new Set();
+        this.sizeListeners = new Set();
+        this.isPanningListeners = new Set();
+        this.marqueeListeners = new Set();
+        this.layerListeners = new Map();
+        this.imperative = null;
+        // ── Public read API (arrow functions so they can be passed as callbacks) ──
+        this.getSnapshot = () => this.snapshot;
+        this.getTransform = () => this.transform;
+        this.getSize = () => this.size;
+        this.getIsPanning = () => this.isPanning;
+        this.getMarqueeRect = () => this.marqueeRect;
+        // ── Subscriptions ──
+        this.subscribe = (cb) => {
+            this.allListeners.add(cb);
+            return () => {
+                this.allListeners.delete(cb);
+            };
+        };
+        this.subscribeTransform = (cb) => {
+            this.transformListeners.add(cb);
+            return () => {
+                this.transformListeners.delete(cb);
+            };
+        };
+        this.subscribeSize = (cb) => {
+            this.sizeListeners.add(cb);
+            return () => {
+                this.sizeListeners.delete(cb);
+            };
+        };
+        this.subscribeIsPanning = (cb) => {
+            this.isPanningListeners.add(cb);
+            return () => {
+                this.isPanningListeners.delete(cb);
+            };
+        };
+        this.subscribeMarquee = (cb) => {
+            this.marqueeListeners.add(cb);
+            return () => {
+                this.marqueeListeners.delete(cb);
+            };
+        };
+        /**
+         * Returns a stable handle object whose methods proxy to the store.
+         * The store keeps its lifecycle, so this handle reference is stable
+         * for the lifetime of the store.
+         */
+        this.handle = {
+            fitToContent: (bounds, padding = 0) => {
+                if (!this.imperative)
+                    return;
+                this.imperative.setTransform(computeFitTransform(bounds, this.size, padding, {
+                    minZoom: this.imperative.minZoom,
+                    maxZoom: this.imperative.maxZoom,
+                }));
+            },
+            zoomToRect: (rect, padding = 0) => {
+                if (!this.imperative)
+                    return;
+                this.imperative.setTransform(computeFitTransform(rect, this.size, padding, {
+                    minZoom: this.imperative.minZoom,
+                    maxZoom: this.imperative.maxZoom,
+                }));
+            },
+            centerOn: (point, zoom) => {
+                if (!this.imperative)
+                    return;
+                this.imperative.setTransform(computeCenterTransform(point, this.size, this.transform, {
+                    minZoom: this.imperative.minZoom,
+                    maxZoom: this.imperative.maxZoom,
+                }, zoom));
+            },
+            getTransform: () => this.transform,
+            getSize: () => this.size,
+            invalidate: (layerName) => {
+                this.invalidate(layerName);
+            },
+        };
+    }
+    subscribeLayer(name, cb) {
+        let set = this.layerListeners.get(name);
+        if (!set) {
+            set = new Set();
+            this.layerListeners.set(name, set);
+        }
+        set.add(cb);
+        return () => {
+            const current = this.layerListeners.get(name);
+            if (!current)
+                return;
+            current.delete(cb);
+            if (current.size === 0)
+                this.layerListeners.delete(name);
+        };
+    }
+    // ── Mutators (called by Viewport / gestures) ──
+    setTransform(next) {
+        if (next === this.transform)
+            return;
+        this.transform = next;
+        this.snapshot = this.computeSnapshot();
+        this.transformListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setSize(next) {
+        if (next.width === this.size.width && next.height === this.size.height) {
+            return;
+        }
+        this.size = next;
+        this.snapshot = this.computeSnapshot();
+        this.sizeListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setIsPanning(next) {
+        if (next === this.isPanning)
+            return;
+        this.isPanning = next;
+        this.snapshot = this.computeSnapshot();
+        this.isPanningListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setMarqueeRect(next) {
+        if (next === this.marqueeRect)
+            return;
+        this.marqueeRect = next;
+        this.snapshot = this.computeSnapshot();
+        this.marqueeListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    /**
+     * Trigger a redraw of one layer (when `layerName` is provided) or all
+     * layers (when omitted). Does not mutate snapshot state — fires only
+     * the layer listeners.
+     */
+    invalidate(layerName) {
+        if (layerName === undefined) {
+            this.layerListeners.forEach(set => {
+                set.forEach(cb => {
+                    cb();
+                });
+            });
+        }
+        else {
+            this.layerListeners.get(layerName)?.forEach(cb => {
+                cb();
+            });
+        }
+    }
+    // ── Imperative handle wiring ──
+    /**
+     * Wire up the React-side bits the imperative methods need
+     * (a `setTransform` that goes through React state + zoom limits).
+     * Viewport calls this on mount and on dependency changes.
+     */
+    configureImperative(config) {
+        this.imperative = config;
+    }
+    computeSnapshot() {
+        return {
+            transform: this.transform,
+            size: this.size,
+            isPanning: this.isPanning,
+            marqueeRect: this.marqueeRect,
+        };
+    }
+}
+
+export { ViewportStore };
+//# sourceMappingURL=ViewportStore.js.map

package/dist/esm/components/primitives/viewport/ViewportStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportStore.js","sources":["src/components/primitives/viewport/ViewportStore.ts"],"sourcesContent":["import { computeCenterTransform, computeFitTransform } from './viewportMath';\n\nimport type {\n  ScreenRect,\n  ViewportHandle,\n  ViewportSize,\n  ViewportTransform,\n  WorldRect,\n} from './Viewport.types';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\n\n/** Read-only snapshot of the viewport store state. */\nexport interface ViewportStoreSnapshot {\n  transform: ViewportTransform;\n  size: ViewportSize;\n  isPanning: boolean;\n  marqueeRect: ScreenRect | null;\n}\n\ninterface ImperativeConfig {\n  /** Pushes the new transform to React state (typically `useControlledState`'s setter). */\n  setTransform: (next: ViewportTransform) => void;\n  minZoom: number;\n  maxZoom: number;\n}\n\nconst IDENTITY_TRANSFORM: ViewportTransform = { x: 0, y: 0, zoom: 1 };\n\n/**\n * Single source of truth for viewport runtime state — `transform`, `size`,\n * `isPanning`, `marqueeRect`, and per-layer invalidation events.\n *\n * Designed for React's `useSyncExternalStore`: each slice has its own\n * subscribe/get pair so subscribers re-render only when their slice\n * changes (not on every store mutation).\n *\n * `Viewport.tsx` configures the imperative methods (`fitToContent`,\n * `centerOn`, …) at mount via `configureImperative()` so the store knows\n * how to push transform updates back to React state. Until configured,\n * those methods are no-ops.\n */\nexport class ViewportStore {\n  private transform: ViewportTransform = IDENTITY_TRANSFORM;\n  private size: ViewportSize = { width: 0, height: 0 };\n  private isPanning = false;\n  private marqueeRect: ScreenRect | null = null;\n  private snapshot: ViewportStoreSnapshot = this.computeSnapshot();\n\n  private allListeners = new Set<() => void>();\n  private transformListeners = new Set<() => void>();\n  private sizeListeners = new Set<() => void>();\n  private isPanningListeners = new Set<() => void>();\n  private marqueeListeners = new Set<() => void>();\n  private layerListeners = new Map<string, Set<() => void>>();\n\n  private imperative: ImperativeConfig | null = null;\n\n  // ── Public read API (arrow functions so they can be passed as callbacks) ──\n\n  getSnapshot = (): ViewportStoreSnapshot => this.snapshot;\n  getTransform = (): ViewportTransform => this.transform;\n  getSize = (): ViewportSize => this.size;\n  getIsPanning = (): boolean => this.isPanning;\n  getMarqueeRect = (): ScreenRect | null => this.marqueeRect;\n\n  // ── Subscriptions ──\n\n  subscribe = (cb: () => void): (() => void) => {\n    this.allListeners.add(cb);\n    return () => {\n      this.allListeners.delete(cb);\n    };\n  };\n\n  subscribeTransform = (cb: () => void): (() => void) => {\n    this.transformListeners.add(cb);\n    return () => {\n      this.transformListeners.delete(cb);\n    };\n  };\n\n  subscribeSize = (cb: () => void): (() => void) => {\n    this.sizeListeners.add(cb);\n    return () => {\n      this.sizeListeners.delete(cb);\n    };\n  };\n\n  subscribeIsPanning = (cb: () => void): (() => void) => {\n    this.isPanningListeners.add(cb);\n    return () => {\n      this.isPanningListeners.delete(cb);\n    };\n  };\n\n  subscribeMarquee = (cb: () => void): (() => void) => {\n    this.marqueeListeners.add(cb);\n    return () => {\n      this.marqueeListeners.delete(cb);\n    };\n  };\n\n  subscribeLayer(name: string, cb: () => void): () => void {\n    let set = this.layerListeners.get(name);\n    if (!set) {\n      set = new Set();\n      this.layerListeners.set(name, set);\n    }\n    set.add(cb);\n    return () => {\n      const current = this.layerListeners.get(name);\n      if (!current) return;\n      current.delete(cb);\n      if (current.size === 0) this.layerListeners.delete(name);\n    };\n  }\n\n  // ── Mutators (called by Viewport / gestures) ──\n\n  setTransform(next: ViewportTransform): void {\n    if (next === this.transform) return;\n    this.transform = next;\n    this.snapshot = this.computeSnapshot();\n    this.transformListeners.forEach(cb => {\n      cb();\n    });\n    this.allListeners.forEach(cb => {\n      cb();\n    });\n  }\n\n  setSize(next: ViewportSize): void {\n    if (next.width === this.size.width && next.height === this.size.height) {\n      return;\n    }\n    this.size = next;\n    this.snapshot = this.computeSnapshot();\n    this.sizeListeners.forEach(cb => {\n      cb();\n    });\n    this.allListeners.forEach(cb => {\n      cb();\n    });\n  }\n\n  setIsPanning(next: boolean): void {\n    if (next === this.isPanning) return;\n    this.isPanning = next;\n    this.snapshot = this.computeSnapshot();\n    this.isPanningListeners.forEach(cb => {\n      cb();\n    });\n    this.allListeners.forEach(cb => {\n      cb();\n    });\n  }\n\n  setMarqueeRect(next: ScreenRect | null): void {\n    if (next === this.marqueeRect) return;\n    this.marqueeRect = next;\n    this.snapshot = this.computeSnapshot();\n    this.marqueeListeners.forEach(cb => {\n      cb();\n    });\n    this.allListeners.forEach(cb => {\n      cb();\n    });\n  }\n\n  /**\n   * Trigger a redraw of one layer (when `layerName` is provided) or all\n   * layers (when omitted). Does not mutate snapshot state — fires only\n   * the layer listeners.\n   */\n  invalidate(layerName?: string): void {\n    if (layerName === undefined) {\n      this.layerListeners.forEach(set => {\n        set.forEach(cb => {\n          cb();\n        });\n      });\n    } else {\n      this.layerListeners.get(layerName)?.forEach(cb => {\n        cb();\n      });\n    }\n  }\n\n  // ── Imperative handle wiring ──\n\n  /**\n   * Wire up the React-side bits the imperative methods need\n   * (a `setTransform` that goes through React state + zoom limits).\n   * Viewport calls this on mount and on dependency changes.\n   */\n  configureImperative(config: ImperativeConfig): void {\n    this.imperative = config;\n  }\n\n  /**\n   * Returns a stable handle object whose methods proxy to the store.\n   * The store keeps its lifecycle, so this handle reference is stable\n   * for the lifetime of the store.\n   */\n  readonly handle: ViewportHandle = {\n    fitToContent: (bounds: WorldRect, padding = 0): void => {\n      if (!this.imperative) return;\n      this.imperative.setTransform(\n        computeFitTransform(bounds, this.size, padding, {\n          minZoom: this.imperative.minZoom,\n          maxZoom: this.imperative.maxZoom,\n        })\n      );\n    },\n    zoomToRect: (rect: WorldRect, padding = 0): void => {\n      if (!this.imperative) return;\n      this.imperative.setTransform(\n        computeFitTransform(rect, this.size, padding, {\n          minZoom: this.imperative.minZoom,\n          maxZoom: this.imperative.maxZoom,\n        })\n      );\n    },\n    centerOn: (point: Point2D, zoom?: number): void => {\n      if (!this.imperative) return;\n      this.imperative.setTransform(\n        computeCenterTransform(\n          point,\n          this.size,\n          this.transform,\n          {\n            minZoom: this.imperative.minZoom,\n            maxZoom: this.imperative.maxZoom,\n          },\n          zoom\n        )\n      );\n    },\n    getTransform: (): ViewportTransform => this.transform,\n    getSize: (): ViewportSize => this.size,\n    invalidate: (layerName?: string): void => {\n      this.invalidate(layerName);\n    },\n  };\n\n  private computeSnapshot(): ViewportStoreSnapshot {\n    return {\n      transform: this.transform,\n      size: this.size,\n      isPanning: this.isPanning,\n      marqueeRect: this.marqueeRect,\n    };\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/primitives/viewport/ViewportWorld.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useSyncExternalStore } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { worldLayerStyle } from './Viewport.css.js';
+import { useViewportStore } from './ViewportContext.js';
+
+/**
+ * Container for HTML children positioned in **world coordinates**.
+ *
+ * The wrapper applies the viewport's `translate(x, y) scale(zoom)` so that
+ * children whose `left`/`top` are expressed in world units render at the
+ * correct screen position and follow pan/zoom automatically.
+ *
+ * Subscribes only to the `transform` slice of the store — re-renders when
+ * the transform changes, not when `isPanning` or `marqueeRect` flip.
+ *
+ * @example
+ * ```tsx
+ * <ViewportWorld>
+ *   <div style={{ position: 'absolute', left: 100, top: 200 }}>
+ *     Node at world (100, 200)
+ *   </div>
+ * </ViewportWorld>
+ * ```
+ */
+const ViewportWorld = ({ children, className, style, }) => {
+    const store = useViewportStore();
+    const transform = useSyncExternalStore(store.subscribeTransform, store.getTransform);
+    return (jsx("div", { className: cx(worldLayerStyle, className), style: {
+            ...style,
+            transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.zoom})`,
+        }, children: children }));
+};
+ViewportWorld.displayName = 'ViewportWorld';
+
+export { ViewportWorld };
+//# sourceMappingURL=ViewportWorld.js.map

package/dist/esm/components/primitives/viewport/ViewportWorld.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportWorld.js","sources":["src/components/primitives/viewport/ViewportWorld.tsx"],"sourcesContent":["'use client';\n\nimport React, { useSyncExternalStore } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { worldLayerStyle } from './Viewport.css';\nimport { useViewportStore } from './ViewportContext';\n\nimport type { ViewportWorldProps } from './Viewport.types';\n\n/**\n * Container for HTML children positioned in **world coordinates**.\n *\n * The wrapper applies the viewport's `translate(x, y) scale(zoom)` so that\n * children whose `left`/`top` are expressed in world units render at the\n * correct screen position and follow pan/zoom automatically.\n *\n * Subscribes only to the `transform` slice of the store — re-renders when\n * the transform changes, not when `isPanning` or `marqueeRect` flip.\n *\n * @example\n * ```tsx\n * <ViewportWorld>\n *   <div style={{ position: 'absolute', left: 100, top: 200 }}>\n *     Node at world (100, 200)\n *   </div>\n * </ViewportWorld>\n * ```\n */\nexport const ViewportWorld: React.FC<ViewportWorldProps> = ({\n  children,\n  className,\n  style,\n}) => {\n  const store = useViewportStore();\n  const transform = useSyncExternalStore(\n    store.subscribeTransform,\n    store.getTransform\n  );\n\n  return (\n    <div\n      className={cx(worldLayerStyle, className)}\n      style={{\n        ...style,\n        transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.zoom})`,\n      }}\n    >\n      {children}\n    </div>\n  );\n};\n\nViewportWorld.displayName = 'ViewportWorld';\n"],"names":[],"mappings":";;;;;;;AAWA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAKL;AACA;AAKA;AAIM;AACA;;AAMR;AAEA;;"}