entangle-ui 0.9.0 → 0.10.0

package/dist/esm/components/editor/Minimap/Minimap.js

@@ -0,0 +1,257 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useRef, useMemo, useLayoutEffect, useImperativeHandle, useCallback, useEffect } from 'react';
+import { resolveVarValue } from '../../primitives/canvas/canvasTheme.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import { vars } from '../../../theme/contract.css.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 { minimapShellStyle, titleInsideStyle, titleOutsideStyle, footerInsideStyle, footerOutsideStyle, cornerTopLeftStyle, cornerTopRightStyle, cornerBottomLeftStyle, cornerBottomRightStyle, minimapBodyStyle, minimapCanvasStyle, minimapOverlayLayerStyle, ariaLiveRegionStyle } from './Minimap.css.js';
+import { MINIMAP_SLOT } from './Minimap.types.js';
+import { MinimapStoreContext, useMinimapDragState } from './MinimapContext.js';
+import { computeMinimapHeight } from './minimapCoords.js';
+import { drawMinimap } from './minimapDrawing.js';
+import { MinimapStore } from './MinimapStore.js';
+import { useMinimapGestures } from './useMinimapGestures.js';
+
+const DEFAULT_OUTSIDE_OVERLAY = 'rgba(0, 0, 0, 0.4)';
+const DEFAULT_INTERACTIONS = {
+    click: true,
+    dragViewportRect: true,
+    dragFromEmpty: true,
+};
+const DISABLED_INTERACTIONS = {
+    click: false,
+    dragViewportRect: false,
+    dragFromEmpty: false,
+};
+function getSlotKind(el) {
+    const marker = el.type[MINIMAP_SLOT];
+    return marker ?? null;
+}
+function categorizeChildren(children) {
+    const slots = {
+        titleAbove: null,
+        titleInside: null,
+        footerBelow: null,
+        footerInside: null,
+        corners: {},
+        other: [],
+    };
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child)) {
+            if (child !== null && child !== undefined && child !== false) {
+                slots.other.push(child);
+            }
+            return;
+        }
+        const kind = getSlotKind(child);
+        if (kind === null) {
+            // Dev warning: a child whose displayName looks like a Minimap slot
+            // (e.g. wrapped in React.memo) but lost the symbol marker.
+            if (process.env['NODE_ENV'] !== 'production') {
+                const displayName = child.type
+                    ?.displayName;
+                if (displayName?.startsWith('Minimap.')) {
+                    console.warn(`[Minimap] child "${displayName}" looks like a slot subcomponent ` +
+                        `but is missing the MINIMAP_SLOT symbol marker. It will render ` +
+                        `as a free-form overlay. If you wrapped a slot subcomponent ` +
+                        `(e.g. with React.memo), copy the symbol onto the wrapper.`);
+                }
+            }
+            slots.other.push(child);
+            return;
+        }
+        const props = child.props;
+        if (kind === 'title') {
+            const placement = props.placement === 'top-inside' ? 'top-inside' : 'top-outside';
+            const node = (jsx("div", { className: cx(placement === 'top-inside' ? titleInsideStyle : titleOutsideStyle, props.className), style: props.style, children: props.children }));
+            if (placement === 'top-inside')
+                slots.titleInside = node;
+            else
+                slots.titleAbove = node;
+        }
+        else if (kind === 'footer') {
+            const placement = props.placement === 'bottom-inside'
+                ? 'bottom-inside'
+                : 'bottom-outside';
+            const node = (jsx("div", { className: cx(placement === 'bottom-inside'
+                    ? footerInsideStyle
+                    : footerOutsideStyle, props.className), style: props.style, children: props.children }));
+            if (placement === 'bottom-inside')
+                slots.footerInside = node;
+            else
+                slots.footerBelow = node;
+        }
+        else {
+            // kind is narrowed to 'corner' here (only remaining slot kind).
+            const side = props.side ?? 'top-right';
+            const cornerStyle = side === 'top-left'
+                ? cornerTopLeftStyle
+                : side === 'top-right'
+                    ? cornerTopRightStyle
+                    : side === 'bottom-left'
+                        ? cornerBottomLeftStyle
+                        : cornerBottomRightStyle;
+            slots.corners[side] = (jsx("div", { className: cx(cornerStyle, props.className), style: props.style, children: props.children }));
+        }
+    });
+    return slots;
+}
+/**
+ * The interactive body that hosts canvas + overlay layer + pointer/keyboard
+ * handlers. Subscribes to the drag slice for its `data-dragging` attribute
+ * + aria-live announcement so neither lives in React state on the outer
+ * shell.
+ */
+function MinimapBody({ bodyRef, canvasRef, width, height, ariaLabel, disabled, handlers, overlayChildren, ariaLiveActive, }) {
+    const isDragging = useMinimapDragState();
+    return (
+    // The minimap body is a labelled landmark region that doubles as an
+    // interactive pan/zoom surface (focusable, with pointer + key handlers).
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    jsxs("div", { ref: bodyRef, className: minimapBodyStyle, "data-dragging": isDragging || undefined, "data-disabled": disabled || undefined, role: "region", "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, style: { width, height }, onPointerDown: handlers.onPointerDown, onPointerMove: handlers.onPointerMove, onPointerUp: handlers.onPointerUp, onPointerCancel: handlers.onPointerCancel, onPointerLeave: handlers.onPointerLeave, onKeyDown: handlers.onKeyDown, children: [jsx("canvas", { ref: canvasRef, className: minimapCanvasStyle, style: { width, height } }), jsx("div", { className: minimapOverlayLayerStyle, children: overlayChildren }), jsx("div", { className: ariaLiveRegionStyle, "aria-live": "polite", role: "status", children: ariaLiveActive && isDragging ? 'Panning viewport' : '' })] }));
+}
+/**
+ * Compact navigation widget for editor viewports. Renders a miniature of
+ * the world content alongside a draggable rectangle that mirrors the main
+ * viewport's visible region. Intended to be shared by NodeGraph, Timeline,
+ * and any custom 2D editor surface.
+ *
+ * Designed as a controlled primitive — pass the current `transform` /
+ * `viewportSize` from your `<Viewport>` and translate `onNavigate.worldPoint`
+ * into a `viewport.centerOn(...)` call.
+ *
+ * Children may include `<Minimap.Title>`, `<Minimap.Footer>`,
+ * `<Minimap.Corner>` slot subcomponents — any other nodes render as a
+ * free-form overlay layer above the canvas body. Children can read live
+ * state (hover position, hovered item id, transform) via
+ * `useMinimapContext()` / `useMinimapHover()` / `useMinimapGeometry()` /
+ * `useMinimapDragState()`.
+ */
+const Minimap = ({ items, worldBounds, transform, viewportSize, onNavigate, width = 200, minHeight = 60, maxHeight = 200, interactions = DEFAULT_INTERACTIONS, keyboardPanStep = 0.1, backgroundColor, defaultItemColor, viewportRectStroke, outsideOverlay = DEFAULT_OUTSIDE_OVERLAY, renderOverlay, disabled = false, ariaLabel = 'Minimap', className, style, testId, id, children, ref, ...rest }) => {
+    const bodyRef = useRef(null);
+    const canvasRef = useRef(null);
+    const height = useMemo(() => computeMinimapHeight(width, worldBounds, minHeight, maxHeight), [width, worldBounds, minHeight, maxHeight]);
+    const minimapSize = useMemo(() => ({ width, height }), [width, height]);
+    const interactionsConfig = useMemo(() => interactions === false
+        ? DISABLED_INTERACTIONS
+        : {
+            click: interactions.click ?? true,
+            dragViewportRect: interactions.dragViewportRect ?? true,
+            dragFromEmpty: interactions.dragFromEmpty ?? true,
+        }, [interactions]);
+    // ── Store ──
+    const store = useMemo(() => new MinimapStore(), []);
+    useLayoutEffect(() => {
+        store.setGeometry({ transform, viewportSize, worldBounds, minimapSize });
+    }, [store, transform, viewportSize, worldBounds, minimapSize]);
+    useLayoutEffect(() => {
+        store.configureHandle({
+            focus: () => bodyRef.current?.focus(),
+            getElement: () => bodyRef.current,
+        });
+    }, [store]);
+    useImperativeHandle(ref, () => store.handle, [store]);
+    // ── Gestures ──
+    const { handlers } = useMinimapGestures({
+        containerRef: bodyRef,
+        store,
+        worldBounds,
+        transform,
+        viewportSize,
+        minimapSize,
+        items,
+        interactions: interactionsConfig,
+        keyboardPanStep,
+        disabled,
+        onNavigate,
+    });
+    // ── Draw — useLayoutEffect + scheduleDraw, theme resolved per-frame ──
+    const renderOverlayRef = useLatest(renderOverlay);
+    const itemsRef = useLatest(items);
+    const rafRef = useRef(0);
+    const scheduleDraw = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => {
+            const canvas = canvasRef.current;
+            if (!canvas)
+                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(width * dpr));
+            const targetH = Math.max(1, Math.round(height * dpr));
+            if (canvas.width !== targetW || canvas.height !== targetH) {
+                canvas.width = targetW;
+                canvas.height = targetH;
+            }
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            const colors = {
+                background: backgroundColor ??
+                    resolveVarValue(canvas, vars.colors.background.secondary),
+                defaultItem: defaultItemColor ??
+                    resolveVarValue(canvas, vars.colors.accent.primary),
+                viewportRectStroke: viewportRectStroke ??
+                    resolveVarValue(canvas, vars.colors.accent.primary),
+                outsideOverlay,
+            };
+            drawMinimap({
+                ctx,
+                size: { width, height },
+                worldBounds,
+                transform,
+                viewportSize,
+                items: itemsRef.current,
+                colors,
+                renderOverlay: renderOverlayRef.current,
+            });
+        });
+    }, [
+        width,
+        height,
+        worldBounds,
+        transform,
+        viewportSize,
+        backgroundColor,
+        defaultItemColor,
+        viewportRectStroke,
+        outsideOverlay,
+        itemsRef,
+        renderOverlayRef,
+    ]);
+    useLayoutEffect(() => {
+        scheduleDraw();
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleDraw]);
+    // Redraw when DPR changes (e.g. dragging 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]);
+    // ── Slots ──
+    const slots = useMemo(() => categorizeChildren(children), [children]);
+    const overlayChildren = (jsxs(Fragment, { children: [slots.titleInside, slots.footerInside, slots.corners['top-left'], slots.corners['top-right'], slots.corners['bottom-left'], slots.corners['bottom-right'], slots.other] }));
+    return (jsx(MinimapStoreContext.Provider, { value: store, children: jsxs("div", { className: cx(minimapShellStyle, className), "data-testid": testId, id: id, style: style, ...rest, children: [slots.titleAbove, jsx(MinimapBody, { bodyRef: bodyRef, canvasRef: canvasRef, width: width, height: height, ariaLabel: ariaLabel, disabled: disabled, handlers: handlers, overlayChildren: overlayChildren, ariaLiveActive: !disabled }), slots.footerBelow] }) }));
+};
+Minimap.displayName = 'Minimap';
+
+export { Minimap };
+//# sourceMappingURL=Minimap.js.map

package/dist/esm/components/editor/Minimap/Minimap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.js","sources":["../../../../../../src/components/editor/Minimap/Minimap.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiDA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAYF;;;AAGA;AAEA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;;;;AAKE;AACE;;;;AAIJ;AACA;;;;AAII;AACE;AACF;AACE;;;AAII;;;AAIR;;;AAIF;AAQA;AACE;AAEA;;AAWgC;;AAC3B;;AACA;AACL;AAEI;;;AAMI;AACA;;AAQ2B;;AAC9B;;;;AAGL;AACA;AAEI;;AAEE;;AAEE;;AAER;;AAMJ;AAEA;AACF;AAEA;;;;;AAKG;AACH;AAqBE;;;;;AAKE;AA2BJ;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AA0BL;AACA;AAEA;;;AASM;AACA;AACI;AACA;AACA;AACD;;AAMT;;AAGE;AACF;;;;AAKI;AACD;AACH;AAEA;;AAIA;AACE;;;;;;;AAOA;;;;AAID;;AAID;AACA;AACA;AAEA;AACE;AACA;AACE;AACA;;;AAEA;;AAEA;AAEA;AACA;AACA;AACE;AACA;;AAEF;AAEA;AACE;;AAGA;;AAGA;;;;AAMF;;AAEE;;;;;;;AAOD;AACH;AACF;;;;;;;;;;;;AAYC;;AAGC;AACA;AACE;AACF;AACF;;;;;AAKE;;AAIE;AACF;AACA;AACA;AACE;AACF;AACF;;AAIA;;AAcA;AAyBF;AAEA;;"}

package/dist/esm/components/editor/Minimap/Minimap.types.js

@@ -0,0 +1,11 @@
+// ─── Slot markers ───
+/**
+ * Symbol attached to `Minimap.Title` / `.Footer` / `.Corner` so the parent
+ * `<Minimap>` can identify slot children without relying on `displayName`
+ * (which gets clobbered by wrappers like `React.memo`, `React.forwardRef`,
+ * or Vanilla Extract recipes).
+ */
+const MINIMAP_SLOT = Symbol.for('etui.minimap.slot');
+
+export { MINIMAP_SLOT };
+//# sourceMappingURL=Minimap.types.js.map

package/dist/esm/components/editor/Minimap/Minimap.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.types.js","sources":["../../../../../../src/components/editor/Minimap/Minimap.types.ts"],"sourcesContent":[null],"names":[],"mappings":"AAyHA;AAEA;;;;;AAKG;AACI,MAAM,YAAY,GAAkB,MAAM,CAAC,GAAG,CAAC,mBAAmB;;;;"}

package/dist/esm/components/editor/Minimap/MinimapContext.js

@@ -0,0 +1,48 @@
+"use client";
+import { createContext, useSyncExternalStore, useContext } from 'react';
+
+const MinimapStoreContext = createContext(null);
+function useMinimapStoreInternal() {
+    const store = useContext(MinimapStoreContext);
+    if (!store) {
+        throw new Error('useMinimap* hooks must be called inside a <Minimap> component');
+    }
+    return store;
+}
+/**
+ * Subscribe to **all** Minimap state. Convenient catch-all but re-renders
+ * on every store mutation. For perf-sensitive consumers, prefer the
+ * slice-specific hooks (`useMinimapHover`, `useMinimapGeometry`,
+ * `useMinimapDragState`).
+ */
+function useMinimapContext() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+/**
+ * Subscribe to the hover slice. Re-renders only when the pointer position
+ * or hovered item id changes.
+ */
+function useMinimapHover() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribeHover, store.getHover);
+}
+/**
+ * Subscribe to the geometry slice (transform / sizes / bounds). Re-renders
+ * only on geometry mutations.
+ */
+function useMinimapGeometry() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribeGeometry, store.getGeometry);
+}
+/**
+ * Subscribe to the drag slice — `true` while a pan/rect-drag gesture is
+ * in flight. Re-renders only on drag-state transitions.
+ */
+function useMinimapDragState() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribeDrag, store.getIsDragging);
+}
+
+export { MinimapStoreContext, useMinimapContext, useMinimapDragState, useMinimapGeometry, useMinimapHover };
+//# sourceMappingURL=MinimapContext.js.map

package/dist/esm/components/editor/Minimap/MinimapContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapContext.js","sources":["../../../../../../src/components/editor/Minimap/MinimapContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAaA;AACE;;AAEE;;AAIF;AACF;AAEA;;;;;AAKG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;;"}

package/dist/esm/components/editor/Minimap/MinimapCorner.js

@@ -0,0 +1,16 @@
+import { MINIMAP_SLOT } from './Minimap.types.js';
+
+/**
+ * Small chrome block anchored in one of the four corners of the Minimap
+ * canvas body. Typical use cases: coordinate readouts, zoom-level chips,
+ * status badges. Picked out of `<Minimap>` children by the `MINIMAP_SLOT`
+ * symbol — does not render itself in place.
+ */
+const MinimapCornerImpl = () => null;
+const MinimapCorner = Object.assign(MinimapCornerImpl, {
+    displayName: 'Minimap.Corner',
+    [MINIMAP_SLOT]: 'corner',
+});
+
+export { MinimapCorner };
+//# sourceMappingURL=MinimapCorner.js.map

package/dist/esm/components/editor/Minimap/MinimapCorner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapCorner.js","sources":["../../../../../../src/components/editor/Minimap/MinimapCorner.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;AAKG;AACH,MAAM,iBAAiB,GAAwC,MAAM,IAAI;MAE5D,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;AAC5D,IAAA,WAAW,EAAE,gBAAgB;IAC7B,CAAC,YAAY,GAAG,QAAiB;AAClC,CAAA;;;;"}

package/dist/esm/components/editor/Minimap/MinimapFooter.js

@@ -0,0 +1,16 @@
+import { MINIMAP_SLOT } from './Minimap.types.js';
+
+/**
+ * Footer strip rendered below (or inside the bottom of) the Minimap
+ * canvas body. Picked out of `<Minimap>` children by the `MINIMAP_SLOT`
+ * symbol — does not render itself in place, so its tree position has no
+ * effect on its placement.
+ */
+const MinimapFooterImpl = () => null;
+const MinimapFooter = Object.assign(MinimapFooterImpl, {
+    displayName: 'Minimap.Footer',
+    [MINIMAP_SLOT]: 'footer',
+});
+
+export { MinimapFooter };
+//# sourceMappingURL=MinimapFooter.js.map

package/dist/esm/components/editor/Minimap/MinimapFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapFooter.js","sources":["../../../../../../src/components/editor/Minimap/MinimapFooter.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;AAKG;AACH,MAAM,iBAAiB,GAAwC,MAAM,IAAI;MAE5D,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;AAC5D,IAAA,WAAW,EAAE,gBAAgB;IAC7B,CAAC,YAAY,GAAG,QAAiB;AAClC,CAAA;;;;"}

package/dist/esm/components/editor/Minimap/MinimapStore.js

@@ -0,0 +1,166 @@
+import { minimapToWorld, worldToMinimap, computeMinimapScale, computeMinimapOffset } from './minimapCoords.js';
+
+const IDENTITY_TRANSFORM = { x: 0, y: 0, zoom: 1 };
+const ZERO_SIZE = { width: 0, height: 0 };
+const ZERO_RECT = { x: 0, y: 0, width: 0, height: 0 };
+/**
+ * Single source of truth for Minimap runtime state — geometry, hover,
+ * drag. 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).
+ *
+ * Wzorowane 1:1 na `primitives/viewport/ViewportStore.ts`.
+ */
+class MinimapStore {
+    constructor() {
+        this.geometry = {
+            transform: IDENTITY_TRANSFORM,
+            viewportSize: ZERO_SIZE,
+            worldBounds: ZERO_RECT,
+            minimapSize: ZERO_SIZE,
+        };
+        this.hover = {
+            hoverWorldPoint: null,
+            hoveredItemId: null,
+        };
+        this.isDragging = false;
+        this.snapshot = this.computeSnapshot();
+        this.allListeners = new Set();
+        this.geometryListeners = new Set();
+        this.hoverListeners = new Set();
+        this.dragListeners = new Set();
+        // ── Public read API (arrow functions so they can be passed as callbacks) ──
+        this.getSnapshot = () => this.snapshot;
+        this.getGeometry = () => this.geometry;
+        this.getHover = () => this.hover;
+        this.getIsDragging = () => this.isDragging;
+        // ── Subscriptions ──
+        this.subscribe = (cb) => {
+            this.allListeners.add(cb);
+            return () => {
+                this.allListeners.delete(cb);
+            };
+        };
+        this.subscribeGeometry = (cb) => {
+            this.geometryListeners.add(cb);
+            return () => {
+                this.geometryListeners.delete(cb);
+            };
+        };
+        this.subscribeHover = (cb) => {
+            this.hoverListeners.add(cb);
+            return () => {
+                this.hoverListeners.delete(cb);
+            };
+        };
+        this.subscribeDrag = (cb) => {
+            this.dragListeners.add(cb);
+            return () => {
+                this.dragListeners.delete(cb);
+            };
+        };
+        // ── Imperative handle ──
+        /**
+         * Stable handle whose methods proxy to the current store state. The
+         * handle reference is stable for the lifetime of the store.
+         */
+        this.handle = {
+            focus: () => {
+                this.focusElement?.();
+            },
+            getElement: () => this.elementGetter?.() ?? null,
+            worldToMinimap: (p) => worldToMinimap(p, this.geometry.worldBounds, this.geometry.minimapSize),
+            minimapToWorld: (p) => minimapToWorld(p, this.geometry.worldBounds, this.geometry.minimapSize),
+        };
+        this.focusElement = null;
+        this.elementGetter = null;
+    }
+    // ── Mutators ──
+    setGeometry(partial) {
+        const next = {
+            transform: partial.transform ?? this.geometry.transform,
+            viewportSize: partial.viewportSize ?? this.geometry.viewportSize,
+            worldBounds: partial.worldBounds ?? this.geometry.worldBounds,
+            minimapSize: partial.minimapSize ?? this.geometry.minimapSize,
+        };
+        if (next.transform === this.geometry.transform &&
+            sizeEqual(next.viewportSize, this.geometry.viewportSize) &&
+            rectEqual(next.worldBounds, this.geometry.worldBounds) &&
+            sizeEqual(next.minimapSize, this.geometry.minimapSize)) {
+            return;
+        }
+        this.geometry = next;
+        this.snapshot = this.computeSnapshot();
+        this.geometryListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setHover(next) {
+        if (hoverPointEqual(next.hoverWorldPoint, this.hover.hoverWorldPoint) &&
+            next.hoveredItemId === this.hover.hoveredItemId) {
+            return;
+        }
+        this.hover = next;
+        this.snapshot = this.computeSnapshot();
+        this.hoverListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setIsDragging(next) {
+        if (next === this.isDragging)
+            return;
+        this.isDragging = next;
+        this.snapshot = this.computeSnapshot();
+        this.dragListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    /** Wired up by `Minimap.tsx` so the handle knows which element to act on. */
+    configureHandle(config) {
+        this.focusElement = config.focus;
+        this.elementGetter = config.getElement;
+    }
+    computeSnapshot() {
+        const { worldBounds, minimapSize, transform, viewportSize } = this.geometry;
+        const scale = computeMinimapScale(worldBounds, minimapSize);
+        const offset = computeMinimapOffset(worldBounds, minimapSize, scale);
+        return {
+            worldBounds,
+            minimapSize,
+            transform,
+            viewportSize,
+            hoverWorldPoint: this.hover.hoverWorldPoint,
+            hoveredItemId: this.hover.hoveredItemId,
+            isDragging: this.isDragging,
+            scale,
+            offset,
+            worldToMinimap: (p) => worldToMinimap(p, worldBounds, minimapSize),
+            minimapToWorld: (p) => minimapToWorld(p, worldBounds, minimapSize),
+        };
+    }
+}
+function sizeEqual(a, b) {
+    return a.width === b.width && a.height === b.height;
+}
+function rectEqual(a, b) {
+    return (a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height);
+}
+function hoverPointEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.x === b.x && a.y === b.y;
+}
+
+export { MinimapStore };
+//# sourceMappingURL=MinimapStore.js.map

package/dist/esm/components/editor/Minimap/MinimapStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapStore.js","sources":["../../../../../../src/components/editor/Minimap/MinimapStore.ts"],"sourcesContent":[null],"names":["worldToMinimapFn","minimapToWorldFn"],"mappings":"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"}

package/dist/esm/components/editor/Minimap/MinimapTitle.js

@@ -0,0 +1,16 @@
+import { MINIMAP_SLOT } from './Minimap.types.js';
+
+/**
+ * Title strip rendered above (or inside the top of) the Minimap canvas
+ * body. Picked out of `<Minimap>` children by the `MINIMAP_SLOT` symbol —
+ * does not render itself in place, so its tree position has no effect on
+ * its placement.
+ */
+const MinimapTitleImpl = () => null;
+const MinimapTitle = Object.assign(MinimapTitleImpl, {
+    displayName: 'Minimap.Title',
+    [MINIMAP_SLOT]: 'title',
+});
+
+export { MinimapTitle };
+//# sourceMappingURL=MinimapTitle.js.map

package/dist/esm/components/editor/Minimap/MinimapTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapTitle.js","sources":["../../../../../../src/components/editor/Minimap/MinimapTitle.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;AAKG;AACH,MAAM,gBAAgB,GAAuC,MAAM,IAAI;MAE1D,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,gBAAgB,EAAE;AAC1D,IAAA,WAAW,EAAE,eAAe;IAC5B,CAAC,YAAY,GAAG,OAAgB;AACjC,CAAA;;;;"}

package/dist/esm/components/editor/Minimap/ViewportMinimap.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useMemo, useCallback } from 'react';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
+import { useViewportContext } from '../../primitives/viewport/ViewportContext.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.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 { Minimap } from './Minimap.js';
+
+function placementToStyle(placement, margin) {
+    if (typeof placement === 'object') {
+        return { position: 'absolute', pointerEvents: 'auto', ...placement };
+    }
+    const style = {
+        position: 'absolute',
+        pointerEvents: 'auto',
+    };
+    if (placement.startsWith('top'))
+        style.top = margin;
+    else
+        style.bottom = margin;
+    if (placement.endsWith('left'))
+        style.left = margin;
+    else
+        style.right = margin;
+    return style;
+}
+/**
+ * Auto-bound minimap for use inside a `<Viewport>`. Reads live `transform`
+ * and `size` from `useViewportContext()`, positions itself in a corner
+ * (or custom anchor), and wires `onNavigate` to the viewport handle's
+ * `centerOn`. Falls back to the manual `<Minimap>` if you need the
+ * minimap outside the Viewport tree.
+ *
+ * Recognized by `<Viewport>` as an overlay child — drop it among layers
+ * and world/overlay siblings without an explicit `<ViewportOverlay>` wrapper.
+ */
+const ViewportMinimap = ({ placement = 'bottom-right', margin = 12, responsive = false, width: widthProp, onNavigate: userOnNavigate, ref, ...minimapProps }) => {
+    const { transform, size, handle } = useViewportContext();
+    const wrapperRef = useRef(null);
+    const [measuredWidth, setMeasuredWidth] = useState(null);
+    useResizeObserver(wrapperRef, entry => {
+        setMeasuredWidth(entry.contentRect.width);
+    }, { enabled: responsive });
+    const wrapperStyle = useMemo(() => placementToStyle(placement, margin), [placement, margin]);
+    const effectiveWidth = responsive
+        ? (measuredWidth ?? widthProp ?? 200)
+        : widthProp;
+    const userOnNavigateRef = useLatest(userOnNavigate);
+    const handleNavigate = useCallback((info) => {
+        handle.centerOn(info.worldPoint);
+        userOnNavigateRef.current?.(info);
+    }, [handle, userOnNavigateRef]);
+    return (jsx("div", { ref: wrapperRef, style: wrapperStyle, children: jsx(Minimap, { ...minimapProps, ref: ref, transform: transform, viewportSize: size, width: effectiveWidth, onNavigate: handleNavigate }) }));
+};
+ViewportMinimap.displayName = 'ViewportMinimap';
+
+export { ViewportMinimap };
+//# sourceMappingURL=ViewportMinimap.js.map

package/dist/esm/components/editor/Minimap/ViewportMinimap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportMinimap.js","sources":["../../../../../../src/components/editor/Minimap/ViewportMinimap.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAyDA;AAIE;AACE;;AAEF;AACE;AACA;;AAEF;AAAiC;;AAC5B;AACL;AAAgC;;AAC3B;AACL;AACF;AAEA;;;;;;;;;AASG;AACI;;AAUL;;AAGA;AAGI;AACF;;;AAUA;;AAGF;AACA;AAEI;AACA;AACF;AAIF;AAYF;AAEA;;"}