entangle-ui 0.9.0 → 0.10.0

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":[null],"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 '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+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":[null],"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":[null],"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":[null],"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":[null],"names":[],"mappings":";;;;;;;AAWA;;;;;;;;;;;;;;;;;;AAkBG;AACI;AAKL;AACA;AAKA;AAIM;AACA;;AAMR;AAEA;;"}