entangle-ui 0.8.2 → 0.10.0

package/dist/esm/components/editor/NodeGraph/NodeGraphContext.js

@@ -0,0 +1,54 @@
+"use client";
+import { useContext, createContext, useSyncExternalStore } from 'react';
+
+const NodeGraphStoreContext = 
+/*#__PURE__*/ createContext(null);
+function useStoreInternal() {
+    const store = useContext(NodeGraphStoreContext);
+    if (!store) {
+        throw new Error('useNodeGraph* hooks must be called inside a <NodeGraph> component');
+    }
+    return store;
+}
+/**
+ * Access the underlying `NodeGraphStore` instance — escape hatch for
+ * subscribing to custom slice combinations or for imperative reads from
+ * non-React code paths (gesture handlers, canvas draw frames).
+ */
+function useNodeGraphStore() {
+    return useStoreInternal();
+}
+/**
+ * Subscribe to the data slice — re-renders when the graph contents
+ * (`nodes`, `edges`, `groups`, default size) change.
+ */
+function useNodeGraphData() {
+    const store = useStoreInternal();
+    return useSyncExternalStore(store.subscribeData, store.getData);
+}
+/**
+ * Subscribe to the selection slice — re-renders when the selection changes.
+ */
+function useNodeGraphSelection() {
+    const store = useStoreInternal();
+    return useSyncExternalStore(store.subscribeSelection, store.getSelection);
+}
+/**
+ * Subscribe to the interaction slice — re-renders on gesture lifecycle
+ * (drag, connect, marquee) and on per-frame deltas during a drag.
+ */
+function useNodeGraphInteraction() {
+    const store = useStoreInternal();
+    return useSyncExternalStore(store.subscribeInteraction, store.getInteraction);
+}
+/**
+ * Subscribe to the hover slice — re-renders when the hovered node / edge /
+ * port changes.
+ */
+function useNodeGraphHover() {
+    const store = useStoreInternal();
+    return useSyncExternalStore(store.subscribeHover, store.getHover);
+}
+
+export { NodeGraphStoreContext, useNodeGraphData, useNodeGraphHover, useNodeGraphInteraction, useNodeGraphSelection, useNodeGraphStore };
+//# sourceMappingURL=NodeGraphContext.js.map

package/dist/esm/components/editor/NodeGraph/NodeGraphContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphContext.js","sources":["../../../../../../src/components/editor/NodeGraph/NodeGraphContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAaE;AAEF;AACE;;AAEE;;AAIF;AACF;AAEA;;;;AAIG;;;AAGH;AAEA;;;AAGG;;AAED;;AAEF;AAEA;;AAEG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;;"}

package/dist/esm/components/editor/NodeGraph/NodeGraphEdgeLabels.js

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useSyncExternalStore, useCallback } from 'react';
+import { useNodeGraphStore } from './NodeGraphContext.js';
+import { resolvePortRef } from './nodeGraphMath.js';
+import { useStoreSlice } from './useStoreSlice.js';
+
+// Shared sentinel for "this edge isn't affected by the current gesture" —
+// one reference so the equality check below short-circuits cleanly.
+const NO_EDGE_DELTAS = { src: null, tgt: null };
+function pointEqualNullable(a, b) {
+    if (a === b)
+        return true;
+    if (a === null || b === null)
+        return false;
+    return a.x === b.x && a.y === b.y;
+}
+function edgeDeltasEqual(a, b) {
+    return pointEqualNullable(a.src, b.src) && pointEqualNullable(a.tgt, b.tgt);
+}
+/**
+ * Live drag delta for an edge's endpoints, or {@link NO_EDGE_DELTAS} when
+ * neither endpoint's node is part of the current drag. Mirrors the per-node
+ * selector in `NodeGraphNode` so a label only updates when an endpoint it
+ * actually owns is moving.
+ */
+function selectEdgeDeltas(interaction, sourceNode, targetNode) {
+    let ids = null;
+    let delta = null;
+    if (interaction.kind === 'drag-nodes') {
+        ids = interaction.nodeIds;
+        delta = interaction.delta;
+    }
+    else if (interaction.kind === 'drag-groups') {
+        ids = interaction.containedNodeIds;
+        delta = interaction.delta;
+    }
+    if (!ids || !delta)
+        return NO_EDGE_DELTAS;
+    const src = ids.has(sourceNode) ? delta : null;
+    const tgt = ids.has(targetNode) ? delta : null;
+    if (src === null && tgt === null)
+        return NO_EDGE_DELTAS;
+    return { src, tgt };
+}
+/**
+ * Mounts one `<EdgeLabel>` per edge as a world-space sibling inside
+ * `<ViewportWorld>`. Each label subscribes to the interaction slice on
+ * its own so a drag of an unrelated node doesn't re-render every label
+ * in the graph — only the labels whose endpoints actually move.
+ *
+ * One subscriber per edge: each `EdgeLabel` subscribes to the `interaction`
+ * slice through `useStoreSlice` with an endpoint-delta selector + equality,
+ * so it re-renders only when an endpoint it actually owns moves. Labels on
+ * edges untouched by the current gesture short-circuit on the equality check
+ * and skip the per-frame re-render entirely.
+ */
+function EdgeLabelsLayer({ renderEdgeLabelRef, hasRenderEdgeLabel, }) {
+    const store = useNodeGraphStore();
+    // Subscribe to data + port positions at this level so we know which
+    // edges exist. Each `EdgeLabel` below subscribes to interaction on its
+    // own for live drag tracking.
+    const data = useSyncExternalStore(store.subscribeData, store.getData);
+    useSyncExternalStore(store.subscribePortPositions, store.getPortPositionsVersion);
+    return (jsx(Fragment, { children: data.edges.map(edge => {
+            // Skip mounting an `EdgeLabel` subscriber when there's nothing it
+            // could ever render. When `renderEdgeLabel` is provided the
+            // consumer controls visibility per edge from inside their callback
+            // (and may return `null`), so we still have to mount — but if no
+            // callback exists, the only thing the label could show is
+            // `edge.label`, and a `null` value there means there's nothing to
+            // draw and no reason to pay for a per-edge store subscription.
+            if (!hasRenderEdgeLabel && edge.label == null)
+                return null;
+            return (jsx(EdgeLabel, { edge: edge, renderEdgeLabelRef: renderEdgeLabelRef }, edge.id));
+        }) }));
+}
+function EdgeLabel({ edge, renderEdgeLabelRef, }) {
+    const store = useNodeGraphStore();
+    const sourceNode = edge.source.node;
+    const targetNode = edge.target.node;
+    // Subscribe to interaction changes affecting either endpoint via the
+    // per-node channel — a drag of an unrelated node never wakes this
+    // subscriber, even before the selector runs. When source and target
+    // sit on the same node, a single subscription is enough (deduplicates
+    // the notification).
+    const subscribeEndpoints = useCallback((cb) => {
+        const unsubSource = store.subscribeNodeInteraction(sourceNode, cb);
+        if (sourceNode === targetNode)
+            return unsubSource;
+        const unsubTarget = store.subscribeNodeInteraction(targetNode, cb);
+        return () => {
+            unsubSource();
+            unsubTarget();
+        };
+    }, [store, sourceNode, targetNode]);
+    // Selector still reads the global snapshot to compute per-endpoint
+    // deltas — the subscription change above only narrows *when* this
+    // subscriber gets woken, not *what* it sees.
+    const { src: srcDelta, tgt: tgtDelta } = useStoreSlice(subscribeEndpoints, store.getInteraction, interaction => selectEdgeDeltas(interaction, sourceNode, targetNode), edgeDeltasEqual);
+    // Re-render when port positions update too (initial measure + body
+    // re-layout shift the anchor).
+    useSyncExternalStore(store.subscribePortPositions, store.getPortPositionsVersion);
+    const src = resolvePortRef(edge.source, store.getNodeById, store.getPortPosition);
+    const tgt = resolvePortRef(edge.target, store.getNodeById, store.getPortPosition);
+    if (!src || !tgt)
+        return null;
+    const sx = src.position.x + (srcDelta?.x ?? 0);
+    const sy = src.position.y + (srcDelta?.y ?? 0);
+    const tx = tgt.position.x + (tgtDelta?.x ?? 0);
+    const ty = tgt.position.y + (tgtDelta?.y ?? 0);
+    const midX = (sx + tx) / 2;
+    const midY = (sy + ty) / 2;
+    // The render callback lives in a `useLatest` ref so swapping it doesn't
+    // re-render every edge label; reading the current value here is deliberate.
+    // Labels refresh on the next data / interaction tick, which is the only
+    // moment their content is consumed anyway.
+    // eslint-disable-next-line react-hooks/refs -- intentional latest-callback read
+    const render = renderEdgeLabelRef.current;
+    const content = render ? render(edge) : (edge.label ?? null);
+    if (content == null || content === false)
+        return null;
+    return (jsx("div", { style: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            // World-space position via `transform` so each frame's update is
+            // a GPU-friendly transform mutation (no CSS layout). The
+            // -50%/-50% piece centres the label on its midpoint.
+            transform: `translate3d(${midX}px, ${midY}px, 0) translate(-50%, -50%)`,
+            pointerEvents: 'auto',
+            willChange: 'transform',
+        }, children: content }));
+}
+
+export { EdgeLabelsLayer };
+//# sourceMappingURL=NodeGraphEdgeLabels.js.map

package/dist/esm/components/editor/NodeGraph/NodeGraphEdgeLabels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphEdgeLabels.js","sources":["../../../../../../src/components/editor/NodeGraph/NodeGraphEdgeLabels.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAsBA;AACA;AACA;AAEA;;AACe;AACb;AAA8B;AAC9B;AACF;AAEA;;AAKA;AAEA;;;;;AAKG;AACH;;;AAOE;AACE;AACA;;AACK;AACL;AACA;;AAEF;AAAoB;AACpB;AACA;AACA;AAAkC;AAClC;AACF;AAEA;;;;;;;;;;;AAWG;;AAgBD;;;;AAIA;;;;;;;;;;AAgBM;AAA+C;AAC/C;;AAUR;AAEA;AAOE;AACA;AACA;;;;;;AAMA;;;AAGmC;;AAE/B;AACE;AACA;AACF;;;;;AAOJ;;;;AAgBA;AAKA;AAKA;AAAkB;AAElB;AACA;AACA;AACA;;;;;;;;AAQA;;AAEA;AAA0C;;AAKpC;AACA;AACA;;;;AAIA;AACA;AACA;;AAMR;;"}

package/dist/esm/components/editor/NodeGraph/NodeGraphGroup.js

@@ -0,0 +1,211 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { ColorPicker } from '../../controls/ColorPicker/ColorPicker.js';
+import { Popover } from '../../primitives/Popover/Popover.js';
+import { PopoverContent } from '../../primitives/Popover/PopoverContent.js';
+import { PopoverTrigger } from '../../primitives/Popover/PopoverTrigger.js';
+import { cx } from '../../../utils/cx.js';
+import { groupLabelBarStyle, groupLabelInputStyle, groupLabelStyle, groupColorSwatchStyle, groupResizeHandleStyle, groupOverlayRecipe } from './NodeGraph.css.js';
+import { useNodeGraphStore } from './NodeGraphContext.js';
+import { applyGroupResize } from './nodeGraphMath.js';
+import { useStoreSlice } from './useStoreSlice.js';
+
+const RESIZE_CURSORS = {
+    nw: 'nwse-resize',
+    n: 'ns-resize',
+    ne: 'nesw-resize',
+    e: 'ew-resize',
+    se: 'nwse-resize',
+    s: 'ns-resize',
+    sw: 'nesw-resize',
+    w: 'ew-resize',
+};
+const HANDLE_POSITIONS = {
+    nw: { left: '-5px', top: '-5px' },
+    n: { left: 'calc(50% - 5px)', top: '-5px' },
+    ne: { right: '-5px', top: '-5px' },
+    e: { right: '-5px', top: 'calc(50% - 5px)' },
+    se: { right: '-5px', bottom: '-5px' },
+    s: { left: 'calc(50% - 5px)', bottom: '-5px' },
+    sw: { left: '-5px', bottom: '-5px' },
+    w: { left: '-5px', top: 'calc(50% - 5px)' },
+};
+const ALL_HANDLES = [
+    'nw',
+    'n',
+    'ne',
+    'e',
+    'se',
+    's',
+    'sw',
+    'w',
+];
+const DEFAULT_PICKER_COLOR = '#5d8dff';
+function gestureStateEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a === null || b === null)
+        return false;
+    if (a.kind !== b.kind)
+        return false;
+    if (a.blocked !== b.blocked)
+        return false;
+    if (a.kind === 'drag' && b.kind === 'drag') {
+        return a.delta.x === b.delta.x && a.delta.y === b.delta.y;
+    }
+    if (a.kind === 'resize' && b.kind === 'resize') {
+        return (a.handle === b.handle &&
+            a.delta.x === b.delta.x &&
+            a.delta.y === b.delta.y &&
+            a.startBounds.x === b.startBounds.x &&
+            a.startBounds.y === b.startBounds.y &&
+            a.startBounds.width === b.startBounds.width &&
+            a.startBounds.height === b.startBounds.height);
+    }
+    return false;
+}
+function selectGroupGesture(interaction, groupId) {
+    if (interaction.kind === 'drag-groups' && interaction.groupIds.has(groupId)) {
+        return {
+            kind: 'drag',
+            delta: interaction.delta,
+            blocked: interaction.blocked,
+        };
+    }
+    if (interaction.kind === 'resize-group' && interaction.groupId === groupId) {
+        return {
+            kind: 'resize',
+            handle: interaction.handle,
+            startBounds: interaction.startBounds,
+            delta: interaction.delta,
+            blocked: interaction.blocked,
+        };
+    }
+    return null;
+}
+function computeLiveBounds(group, gesture) {
+    if (gesture === null)
+        return group.bounds;
+    if (gesture.kind === 'drag') {
+        return {
+            x: group.bounds.x + gesture.delta.x,
+            y: group.bounds.y + gesture.delta.y,
+            width: group.bounds.width,
+            height: group.bounds.height,
+        };
+    }
+    return applyGroupResize(gesture.startBounds, gesture.handle, gesture.delta);
+}
+/**
+ * Render a single interactive group overlay positioned in world space.
+ * The canvas layer draws the visual fill underneath — this HTML element
+ * handles selection, drag-to-move, corner/edge resize, label editing,
+ * and the colour swatch.
+ *
+ * Uses per-id selectors so a group only re-renders when *its* selection
+ * or gesture state changes — drag deltas of other groups never reach the
+ * subscriber.
+ *
+ * Wrapped in `React.memo` for the same reason as
+ * {@link NodeGraphNodeView}: a parent render caused by an unrelated
+ * controlled-state update would otherwise iterate every group. Handlers
+ * passed from `NodeGraphImpl` are all `useCallback`-stable.
+ */
+function NodeGraphGroupViewImpl({ group, onBodyPointerDown, onBodyPointerUp, onHandlePointerDown, onBodyContextMenu, onLabelChange, onColorChange, }) {
+    const store = useNodeGraphStore();
+    const groupId = group.id;
+    const selected = useStoreSlice(store.subscribeSelection, store.getSelection, sel => sel.groups.includes(groupId));
+    const gesture = useStoreSlice(store.subscribeInteraction, store.getInteraction, interaction => selectGroupGesture(interaction, groupId), gestureStateEqual);
+    const dragging = gesture?.kind === 'drag';
+    const blocked = gesture?.blocked ?? false;
+    const bounds = computeLiveBounds(group, gesture);
+    // ── Inline label edit ──
+    // `draft` is initialised from `group.label` on mount and re-synced by
+    // `cancelLabel` / `commitLabel` / `handleLabelDoubleClick` on every
+    // transition out of / into edit mode. Mirroring `group.label` into
+    // state via a side effect would be the classic anti-pattern.
+    const [editing, setEditing] = useState(false);
+    const [draft, setDraft] = useState(group.label ?? '');
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (editing) {
+            // Defer focus until the input has been mounted.
+            inputRef.current?.focus();
+            inputRef.current?.select();
+        }
+    }, [editing]);
+    const commitLabel = useCallback(() => {
+        const trimmed = draft.trim();
+        setEditing(false);
+        if (trimmed === (group.label ?? ''))
+            return;
+        onLabelChange(group, trimmed);
+    }, [draft, group, onLabelChange]);
+    const cancelLabel = useCallback(() => {
+        setEditing(false);
+        setDraft(group.label ?? '');
+    }, [group.label]);
+    const handleLabelDoubleClick = useCallback((event) => {
+        event.stopPropagation();
+        // Re-sync from the prop on open — covers the case where `group.label`
+        // changed externally while we weren't editing, so the input opens
+        // with the current value rather than a stale draft.
+        setDraft(group.label ?? '');
+        setEditing(true);
+    }, [group.label]);
+    const handleInputKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commitLabel();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            cancelLabel();
+        }
+        // Stop arrow keys from triggering the graph's nudge handler.
+        event.stopPropagation();
+    }, [commitLabel, cancelLabel]);
+    // ── Colour picker ──
+    //
+    // The swatch is a `<button>` that triggers the entangle-ui `<ColorPicker>`
+    // popover. The picker has `showAlpha` enabled so it returns proper
+    // `rgba(...)` strings when the user lowers opacity — the canvas
+    // `drawGroups` fill plumbs that straight through with no transform.
+    const handleColorChange = useCallback((next) => {
+        onColorChange(group, next);
+    }, [group, onColorChange]);
+    // Picker value falls back to a sensible default when the group hasn't
+    // been coloured yet (the library doesn't impose a default).
+    const pickerValue = group.color ?? DEFAULT_PICKER_COLOR;
+    return (jsxs("div", { className: cx(groupOverlayRecipe({ selected, dragging, blocked })), style: {
+            left: bounds.x,
+            top: bounds.y,
+            width: bounds.width,
+            height: bounds.height,
+        }, "data-group-id": group.id, "data-blocked": blocked || undefined, onPointerDown: e => {
+            onBodyPointerDown(e, group);
+        }, onPointerUp: e => {
+            onBodyPointerUp(e, group);
+        }, onContextMenu: onBodyContextMenu, children: [jsxs("div", { className: groupLabelBarStyle, 
+                // Don't let pointerdown on the label bar (label text, color swatch,
+                // input) fall through to the body drag handler — the label bar is
+                // an interactive control row, not a draggable handle.
+                onPointerDown: e => {
+                    e.stopPropagation();
+                }, children: [editing ? (jsx("input", { ref: inputRef, className: groupLabelInputStyle, value: draft, placeholder: "Group name", spellCheck: false, onChange: e => {
+                            setDraft(e.target.value);
+                        }, onBlur: commitLabel, onKeyDown: handleInputKeyDown })) : (jsx("span", { className: groupLabelStyle, onDoubleClick: handleLabelDoubleClick, title: "Double-click to rename", children: group.label?.trim() ? group.label : 'Group' })), jsxs(Popover, { placement: "bottom-end", children: [jsx(PopoverTrigger, { children: jsx("button", { type: "button", "aria-label": "Change group colour", title: "Change group colour", className: groupColorSwatchStyle, style: { background: group.color ?? DEFAULT_PICKER_COLOR } }) }), jsx(PopoverContent, { padding: "md", children: jsx(ColorPicker, { inline: true, showAlpha: true, defaultValue: pickerValue, format: "rgba", palette: "material", onChangeComplete: handleColorChange }) })] })] }), selected
+                ? ALL_HANDLES.map(handle => (jsx("div", { className: groupResizeHandleStyle, style: {
+                        ...HANDLE_POSITIONS[handle],
+                        cursor: RESIZE_CURSORS[handle],
+                    }, "data-group-id": group.id, "data-group-handle": handle, onPointerDown: e => {
+                        onHandlePointerDown(e, group, handle);
+                    } }, handle)))
+                : null] }));
+}
+const NodeGraphGroupView = React.memo(NodeGraphGroupViewImpl);
+NodeGraphGroupView.displayName = 'NodeGraphGroupView';
+
+export { NodeGraphGroupView };
+//# sourceMappingURL=NodeGraphGroup.js.map

package/dist/esm/components/editor/NodeGraph/NodeGraphGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphGroup.js","sources":["../../../../../../src/components/editor/NodeGraph/NodeGraphGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAyDA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGF;;;;;;;;;;AAcA;;;;;;;;;;AAWA;AAuBA;;AAIe;AACb;AAA8B;AAC9B;AAAuB;AACvB;AAA6B;AAC7B;;;AAGA;AACE;;;;;;;;AAUF;AACF;AAEA;AAIE;;AAEI;;;;;AAKJ;;AAEI;;;;;;;AAOJ;AACF;AAEA;;;AAKE;;;;AAII;AACA;;;AAGJ;AACF;AAEA;;;;;;;;;;;;;;AAcG;AACH;AASE;AACA;;;AAeA;AACA;;;;;;;;AASA;AACA;;;;AAKI;AACA;;AAEJ;AAEA;AACE;;;;AAGA;;AAGF;;AAEE;AACF;AAEA;;;;;AAMI;;AAEF;AAIF;AAEI;;AAEE;;AACK;;AAEL;;;;AAIJ;;;;;;;AAUF;AAEI;AACF;;;AAMF;AAEA;;;;;AAQK;AAIC;AACF;AAEE;;;;;;;AAWA;AAUM;;AAgDN;;AAMQ;;AAKA;AACF;AAGN;AAGR;AAEO;AACP;;"}

package/dist/esm/components/editor/NodeGraph/NodeGraphMinimap.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useSyncExternalStore, useMemo } from 'react';
+import { Minimap } from '../Minimap/index.js';
+import { ViewportMinimap } from '../Minimap/ViewportMinimap.js';
+import { cx } from '../../../utils/cx.js';
+import { minimapSlotStyle } from './NodeGraph.css.js';
+import { useNodeGraphData, useNodeGraphSelection, useNodeGraphStore } from './NodeGraphContext.js';
+import { getNodeBox, computeNodesBounds } from './nodeGraphMath.js';
+export { NodeGraphBackground, NodeGraphMinimap } from './NodeGraphSlots.js';
+
+/**
+ * Live renderer for `<NodeGraph.Minimap>`. Mounted inside the `<Viewport>`
+ * subtree by the main `NodeGraph` component when the user supplies a
+ * minimap slot child.
+ */
+/**
+ * Draw a two-tone "header strip + body" mini-node into the minimap canvas,
+ * converting the node's world rect to minimap pixels via the draw helpers.
+ */
+function drawMiniNode(ctx, info, rect, bodyColor, headerColor) {
+    const tl = info.worldToMinimap({ x: rect.x, y: rect.y });
+    const br = info.worldToMinimap({
+        x: rect.x + rect.width,
+        y: rect.y + rect.height,
+    });
+    const x = Math.min(tl.x, br.x);
+    const y = Math.min(tl.y, br.y);
+    const w = Math.abs(br.x - tl.x);
+    const h = Math.abs(br.y - tl.y);
+    ctx.fillStyle = bodyColor ?? 'rgba(180, 190, 210, 0.5)';
+    ctx.fillRect(x, y, w, h);
+    const headerH = Math.min(h, Math.max(2, h * 0.32));
+    ctx.fillStyle = headerColor;
+    ctx.fillRect(x, y, w, headerH);
+}
+function NodeGraphMinimapInner({ placement = 'bottom-right', margin = 12, width = 200, title, className, selectedColor, nodeStyle, }) {
+    const data = useNodeGraphData();
+    const selection = useNodeGraphSelection();
+    const store = useNodeGraphStore();
+    // Subscribe to measured-size updates so the minimap rect for each node
+    // grows/shrinks as its DOM body changes height (auto-sized nodes). The
+    // version snapshot doubles as a `useMemo` dep below, so the item /
+    // bounds caches invalidate on every real size change.
+    const measuredSizesVersion = useSyncExternalStore(store.subscribeMeasuredSizes, store.getMeasuredSizesVersion);
+    const items = useMemo(() => {
+        return data.nodes.map(node => {
+            const box = getNodeBox(node, store.getMeasuredSize(node.id), data.defaultNodeSize);
+            const isSelected = selection.nodes.includes(node.id);
+            const style = nodeStyle?.(node);
+            // Selection tint wins over the per-node body colour so the highlight
+            // stays visible.
+            const bodyColor = isSelected && selectedColor ? selectedColor : style?.color;
+            const headerColor = style?.headerColor;
+            if (headerColor) {
+                const rect = {
+                    x: box.x,
+                    y: box.y,
+                    width: box.width,
+                    height: box.height,
+                };
+                const item = {
+                    id: node.id,
+                    type: 'custom',
+                    bounds: rect,
+                    draw: (ctx, info) => {
+                        drawMiniNode(ctx, info, rect, bodyColor, headerColor);
+                    },
+                };
+                return item;
+            }
+            const item = {
+                id: node.id,
+                type: 'rect',
+                x: box.x,
+                y: box.y,
+                width: box.width,
+                height: box.height,
+            };
+            if (bodyColor)
+                item.color = bodyColor;
+            return item;
+        });
+        // `measuredSizesVersion` is an intentional invalidation key: the body reads
+        // `store.getMeasuredSize(...)` — mutable state React can't track — so the
+        // memo must recompute whenever a node's measured size changes. The linter
+        // flags it as unused because it isn't referenced directly.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        data.nodes,
+        data.defaultNodeSize,
+        selection.nodes,
+        selectedColor,
+        nodeStyle,
+        store,
+        measuredSizesVersion,
+    ]);
+    const worldBounds = useMemo(() => {
+        const bounds = computeNodesBounds(data.nodes, store.getMeasuredSize, data.defaultNodeSize);
+        if (bounds.width === 0 && bounds.height === 0) {
+            // Provide a sensible default world rect so the minimap renders even
+            // when the graph is empty.
+            return { x: -200, y: -150, width: 400, height: 300 };
+        }
+        // Add 10% padding around content for nicer framing.
+        const padX = bounds.width * 0.1;
+        const padY = bounds.height * 0.1;
+        return {
+            x: bounds.x - padX,
+            y: bounds.y - padY,
+            width: bounds.width + padX * 2,
+            height: bounds.height + padY * 2,
+        };
+        // See note above: `measuredSizesVersion` keys the cache off mutable measured
+        // sizes that `computeNodesBounds` reads via `store.getMeasuredSize`.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data.nodes, data.defaultNodeSize, store, measuredSizesVersion]);
+    return (jsx(ViewportMinimap, { placement: placement, margin: margin, width: width, items: items, worldBounds: worldBounds, className: cx(minimapSlotStyle, className), children: title ? jsx(Minimap.Title, { children: title }) : null }));
+}
+
+export { NodeGraphMinimapInner };
+//# sourceMappingURL=NodeGraphMinimap.js.map

package/dist/esm/components/editor/NodeGraph/NodeGraphMinimap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphMinimap.js","sources":["../../../../../../src/components/editor/NodeGraph/NodeGraphMinimap.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;;AAIG;AACH;;;AAGG;AACH;;AAQE;AACE;AACA;AACD;AACD;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEF;AAEM;AASJ;AACA;AACA;;;;;AAKA;AAKA;;AAEI;AAKA;AACA;;;AAGA;AAEA;;AAGE;;;;;;AAMA;;AAEE;AACA;AACA;;;;AAIF;;AAGF;;AAEE;;;;;;AAMF;AAAe;AACf;AACF;;;;;;AAMF;AACE;AACA;AACA;;;;;AAKD;AAED;AACE;AAKA;;;AAGE;;;AAGF;AACA;;AAEE;AACA;AACA;AACA;;;;;AAKJ;;AAcF;;"}