entangle-ui 0.9.0 → 0.11.0

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

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

@@ -0,0 +1,170 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React, { useRef, useCallback, useDeferredValue, useMemo } from 'react';
+import { useViewportStore } from '../../primitives/viewport/ViewportContext.js';
+import '../../../utils/devWarn.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.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 { nodeWrapperRecipe, defaultNodeBodyRecipe, nodeWidthVar, nodeHeightVar } from './NodeGraph.css.js';
+import { useNodeGraphStore } from './NodeGraphContext.js';
+import { NodeGraphNodeContext } from './NodeGraphNodeContext.js';
+import { useStoreSlice } from './useStoreSlice.js';
+
+function DefaultNodeBody({ node, selected, }) {
+    let label = node.id;
+    if (node.data !== null &&
+        typeof node.data === 'object' &&
+        'label' in node.data) {
+        const candidate = node.data.label;
+        if (typeof candidate === 'string')
+            label = candidate;
+    }
+    return (jsx("div", { className: defaultNodeBodyRecipe({ selected }), children: jsx("span", { children: label }) }));
+}
+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;
+}
+/**
+ * Internal — render a single node as an HTML element positioned in world
+ * space. Connection endpoints live inside the consumer's `renderNode`
+ * tree as `<NodeGraph.Port>` slots; this view just provides the wrapper,
+ * the `NodeGraphNodeContext`, and the ResizeObserver that feeds the
+ * node's measured size back to the store.
+ *
+ * Subscribes to per-id slices via `useStoreSlice` so each node re-renders
+ * only when its own selection / drag delta / hover state changes — not on
+ * every pointermove tick of an unrelated drag.
+ *
+ * Wrapped in `React.memo` so a parent re-render (e.g. caused by an
+ * unrelated controlled-state update) doesn't cascade through every
+ * mounted node. Stable identity for the parent-provided handlers
+ * (`onBodyPointerDown`, etc.) is ensured by `useCallback` in
+ * `NodeGraphImpl`; `node` identity is preserved by consumer immutability.
+ */
+function NodeGraphNodeViewImpl(props) {
+    const { node, renderNode, onBodyPointerDown, onBodyPointerUp, onPortPointerDown, onBodyContextMenu, } = props;
+    const store = useNodeGraphStore();
+    const viewportStore = useViewportStore();
+    const wrapperRef = useRef(null);
+    const selected = useStoreSlice(store.subscribeSelection, store.getSelection, sel => sel.nodes.includes(node.id));
+    // Subscribe to the per-node interaction channel rather than the global
+    // one. The store fans notifications out only to ids in the prev ∪ next
+    // drag set, so an unrelated drag of another node never wakes this
+    // subscriber. The selector itself is unchanged — `useStoreSlice` still
+    // reads from the global getInteraction snapshot to decide whether *this*
+    // id has a delta to apply.
+    const subscribeNodeInteraction = useCallback((cb) => store.subscribeNodeInteraction(node.id, cb), [store, node.id]);
+    const dragDelta = useStoreSlice(subscribeNodeInteraction, store.getInteraction, interaction => {
+        if (interaction.kind === 'drag-nodes' &&
+            interaction.nodeIds.has(node.id)) {
+            return interaction.delta;
+        }
+        // Nodes fully contained inside a dragged group move with the group.
+        if (interaction.kind === 'drag-groups' &&
+            interaction.containedNodeIds.has(node.id)) {
+            return interaction.delta;
+        }
+        return null;
+    }, pointEqualNullable);
+    const dragging = dragDelta !== null;
+    const hovered = useStoreSlice(store.subscribeHover, store.getHover, hover => hover.hoveredNodeId === node.id);
+    const liveZoom = useStoreSlice(viewportStore.subscribeTransform, viewportStore.getTransform, transform => transform.zoom);
+    // Defer the zoom value passed into consumer renderNode so heavy node
+    // bodies don't block the pointer gesture loop during a zoom-while-drag.
+    const zoom = useDeferredValue(liveZoom);
+    // ── Auto-size: feed measured wrapper size back to the store ──
+    //
+    // When the consumer omits `node.width`/`height`, the library reads the
+    // measured DOM size for hit-testing, marquee, and fitToContent. Explicit
+    // overrides on the node still win — this just records the rendered size.
+    useResizeObserver(wrapperRef, entry => {
+        store.setMeasuredSize(node.id, {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+        });
+    });
+    const explicitWidth = node.width;
+    const explicitHeight = node.height;
+    const autoSize = explicitWidth === undefined && explicitHeight === undefined;
+    const draggable = node.draggable !== false;
+    const selectable = node.selectable !== false;
+    const wrapperStyle = useMemo(() => {
+        const x = node.position.x + (dragDelta?.x ?? 0);
+        const y = node.position.y + (dragDelta?.y ?? 0);
+        // assignInlineVars only emits the keys it's given — when explicit
+        // dimensions are absent the auto-sized recipe variant kicks in.
+        const dimensionVars = {};
+        if (explicitWidth !== undefined) {
+            dimensionVars[nodeWidthVar] = `${explicitWidth}px`;
+        }
+        if (explicitHeight !== undefined) {
+            dimensionVars[nodeHeightVar] = `${explicitHeight}px`;
+        }
+        return {
+            transform: `translate(${x}px, ${y}px)`,
+            ...assignInlineVars(dimensionVars),
+        };
+    }, [
+        node.position.x,
+        node.position.y,
+        dragDelta?.x,
+        dragDelta?.y,
+        explicitWidth,
+        explicitHeight,
+    ]);
+    const renderCtx = {
+        selected,
+        dragging,
+        hovered,
+        zoom,
+    };
+    const body = renderNode ? (renderNode(node, renderCtx)) : (jsx(DefaultNodeBody, { node: node, selected: selected }));
+    // ── Hover wiring ──
+    const onPointerEnter = useCallback(() => {
+        const current = store.getHover();
+        if (current.hoveredNodeId === node.id)
+            return;
+        store.setHover({ ...current, hoveredNodeId: node.id });
+    }, [store, node.id]);
+    const onPointerLeave = useCallback(() => {
+        const current = store.getHover();
+        if (current.hoveredNodeId !== node.id)
+            return;
+        store.setHover({ ...current, hoveredNodeId: null });
+    }, [store, node.id]);
+    // ── Per-node context for `<NodeGraph.Port>` slots ──
+    const nodeContext = useMemo(() => ({
+        nodeId: node.id,
+        onPortPointerDown: (event, portId) => {
+            onPortPointerDown(event, node.id, portId);
+        },
+    }), [node.id, onPortPointerDown]);
+    return (jsx("div", { ref: wrapperRef, className: cx(nodeWrapperRecipe({
+            draggable,
+            selectable,
+            dragging,
+            autoSize,
+        })), style: wrapperStyle, "data-node-id": node.id, "data-hovered": hovered ? 'true' : undefined, "data-selected": selected ? 'true' : undefined, "data-dragging": dragging ? 'true' : undefined, onPointerDown: e => {
+            onBodyPointerDown(e, node);
+        }, onPointerUp: e => {
+            onBodyPointerUp(e, node);
+        }, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onContextMenu: e => {
+            onBodyContextMenu(e, node);
+        }, children: jsx(NodeGraphNodeContext.Provider, { value: nodeContext, children: body }) }));
+}
+const NodeGraphNodeView = React.memo(NodeGraphNodeViewImpl);
+NodeGraphNodeView.displayName = 'NodeGraphNodeView';
+
+export { NodeGraphNodeView };
+//# sourceMappingURL=NodeGraphNode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphNode.js","sources":["src/components/editor/NodeGraph/NodeGraphNode.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useCallback, useDeferredValue, useMemo, useRef } from 'react';\n\nimport { useViewportStore } from '@/components/primitives/viewport/ViewportContext';\nimport { useResizeObserver } from '@/hooks';\nimport { cx } from '@/utils/cx';\n\nimport {\n  defaultNodeBodyRecipe,\n  nodeHeightVar,\n  nodeWidthVar,\n  nodeWrapperRecipe,\n} from './NodeGraph.css';\nimport { useNodeGraphStore } from './NodeGraphContext';\nimport { NodeGraphNodeContext } from './NodeGraphNodeContext';\nimport { useStoreSlice } from './useStoreSlice';\n\nimport type { NodeGraphNode, NodeGraphRenderCtx } from './NodeGraph.types';\nimport type { NodeGraphNodeContextValue } from './NodeGraphNodeContext';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\n\ninterface NodeGraphNodeViewProps {\n  node: NodeGraphNode;\n  renderNode?: (\n    node: NodeGraphNode,\n    ctx: NodeGraphRenderCtx\n  ) => React.ReactNode;\n  /** Pointer-down on the node body (drag / select). */\n  onBodyPointerDown: (\n    event: React.PointerEvent<HTMLDivElement>,\n    node: NodeGraphNode\n  ) => void;\n  /** Pointer-up on the node body (used to detect plain clicks for selection). */\n  onBodyPointerUp: (\n    event: React.PointerEvent<HTMLDivElement>,\n    node: NodeGraphNode\n  ) => void;\n  /** Pointer-down on a port (starts a connection drag). */\n  onPortPointerDown: (\n    event: React.PointerEvent<HTMLElement>,\n    nodeId: string,\n    portId: string\n  ) => void;\n  /** Native context menu (right-click) — dispatched up to the main component. */\n  onBodyContextMenu: (\n    event: React.MouseEvent<HTMLDivElement>,\n    node: NodeGraphNode\n  ) => void;\n}\n\nfunction DefaultNodeBody({\n  node,\n  selected,\n}: {\n  node: NodeGraphNode;\n  selected: boolean;\n}): React.ReactElement {\n  let label = node.id;\n  if (\n    node.data !== null &&\n    typeof node.data === 'object' &&\n    'label' in node.data\n  ) {\n    const candidate = (node.data as { label?: unknown }).label;\n    if (typeof candidate === 'string') label = candidate;\n  }\n  return (\n    <div className={defaultNodeBodyRecipe({ selected })}>\n      <span>{label}</span>\n    </div>\n  );\n}\n\nfunction pointEqualNullable(a: Point2D | null, b: Point2D | null): boolean {\n  if (a === b) return true;\n  if (a === null || b === null) return false;\n  return a.x === b.x && a.y === b.y;\n}\n\n/**\n * Internal — render a single node as an HTML element positioned in world\n * space. Connection endpoints live inside the consumer's `renderNode`\n * tree as `<NodeGraph.Port>` slots; this view just provides the wrapper,\n * the `NodeGraphNodeContext`, and the ResizeObserver that feeds the\n * node's measured size back to the store.\n *\n * Subscribes to per-id slices via `useStoreSlice` so each node re-renders\n * only when its own selection / drag delta / hover state changes — not on\n * every pointermove tick of an unrelated drag.\n *\n * Wrapped in `React.memo` so a parent re-render (e.g. caused by an\n * unrelated controlled-state update) doesn't cascade through every\n * mounted node. Stable identity for the parent-provided handlers\n * (`onBodyPointerDown`, etc.) is ensured by `useCallback` in\n * `NodeGraphImpl`; `node` identity is preserved by consumer immutability.\n */\nfunction NodeGraphNodeViewImpl(\n  props: NodeGraphNodeViewProps\n): React.ReactElement {\n  const {\n    node,\n    renderNode,\n    onBodyPointerDown,\n    onBodyPointerUp,\n    onPortPointerDown,\n    onBodyContextMenu,\n  } = props;\n  const store = useNodeGraphStore();\n  const viewportStore = useViewportStore();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  const selected = useStoreSlice(\n    store.subscribeSelection,\n    store.getSelection,\n    sel => sel.nodes.includes(node.id)\n  );\n\n  // Subscribe to the per-node interaction channel rather than the global\n  // one. The store fans notifications out only to ids in the prev ∪ next\n  // drag set, so an unrelated drag of another node never wakes this\n  // subscriber. The selector itself is unchanged — `useStoreSlice` still\n  // reads from the global getInteraction snapshot to decide whether *this*\n  // id has a delta to apply.\n  const subscribeNodeInteraction = useCallback(\n    (cb: () => void) => store.subscribeNodeInteraction(node.id, cb),\n    [store, node.id]\n  );\n  const dragDelta = useStoreSlice<\n    ReturnType<typeof store.getInteraction>,\n    Point2D | null\n  >(\n    subscribeNodeInteraction,\n    store.getInteraction,\n    interaction => {\n      if (\n        interaction.kind === 'drag-nodes' &&\n        interaction.nodeIds.has(node.id)\n      ) {\n        return interaction.delta;\n      }\n      // Nodes fully contained inside a dragged group move with the group.\n      if (\n        interaction.kind === 'drag-groups' &&\n        interaction.containedNodeIds.has(node.id)\n      ) {\n        return interaction.delta;\n      }\n      return null;\n    },\n    pointEqualNullable\n  );\n  const dragging = dragDelta !== null;\n\n  const hovered = useStoreSlice(\n    store.subscribeHover,\n    store.getHover,\n    hover => hover.hoveredNodeId === node.id\n  );\n\n  const liveZoom = useStoreSlice(\n    viewportStore.subscribeTransform,\n    viewportStore.getTransform,\n    transform => transform.zoom\n  );\n  // Defer the zoom value passed into consumer renderNode so heavy node\n  // bodies don't block the pointer gesture loop during a zoom-while-drag.\n  const zoom = useDeferredValue(liveZoom);\n\n  // ── Auto-size: feed measured wrapper size back to the store ──\n  //\n  // When the consumer omits `node.width`/`height`, the library reads the\n  // measured DOM size for hit-testing, marquee, and fitToContent. Explicit\n  // overrides on the node still win — this just records the rendered size.\n  useResizeObserver(wrapperRef, entry => {\n    store.setMeasuredSize(node.id, {\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    });\n  });\n\n  const explicitWidth = node.width;\n  const explicitHeight = node.height;\n  const autoSize = explicitWidth === undefined && explicitHeight === undefined;\n  const draggable = node.draggable !== false;\n  const selectable = node.selectable !== false;\n\n  const wrapperStyle = useMemo<React.CSSProperties>(() => {\n    const x = node.position.x + (dragDelta?.x ?? 0);\n    const y = node.position.y + (dragDelta?.y ?? 0);\n    // assignInlineVars only emits the keys it's given — when explicit\n    // dimensions are absent the auto-sized recipe variant kicks in.\n    const dimensionVars: Record<string, string> = {};\n    if (explicitWidth !== undefined) {\n      dimensionVars[nodeWidthVar] = `${explicitWidth}px`;\n    }\n    if (explicitHeight !== undefined) {\n      dimensionVars[nodeHeightVar] = `${explicitHeight}px`;\n    }\n    return {\n      transform: `translate(${x}px, ${y}px)`,\n      ...assignInlineVars(dimensionVars),\n    };\n  }, [\n    node.position.x,\n    node.position.y,\n    dragDelta?.x,\n    dragDelta?.y,\n    explicitWidth,\n    explicitHeight,\n  ]);\n\n  const renderCtx: NodeGraphRenderCtx = {\n    selected,\n    dragging,\n    hovered,\n    zoom,\n  };\n\n  const body = renderNode ? (\n    renderNode(node, renderCtx)\n  ) : (\n    <DefaultNodeBody node={node} selected={selected} />\n  );\n\n  // ── Hover wiring ──\n  const onPointerEnter = useCallback((): void => {\n    const current = store.getHover();\n    if (current.hoveredNodeId === node.id) return;\n    store.setHover({ ...current, hoveredNodeId: node.id });\n  }, [store, node.id]);\n\n  const onPointerLeave = useCallback((): void => {\n    const current = store.getHover();\n    if (current.hoveredNodeId !== node.id) return;\n    store.setHover({ ...current, hoveredNodeId: null });\n  }, [store, node.id]);\n\n  // ── Per-node context for `<NodeGraph.Port>` slots ──\n  const nodeContext = useMemo<NodeGraphNodeContextValue>(\n    () => ({\n      nodeId: node.id,\n      onPortPointerDown: (event, portId) => {\n        onPortPointerDown(event, node.id, portId);\n      },\n    }),\n    [node.id, onPortPointerDown]\n  );\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cx(\n        nodeWrapperRecipe({\n          draggable,\n          selectable,\n          dragging,\n          autoSize,\n        })\n      )}\n      style={wrapperStyle}\n      data-node-id={node.id}\n      data-hovered={hovered ? 'true' : undefined}\n      data-selected={selected ? 'true' : undefined}\n      data-dragging={dragging ? 'true' : undefined}\n      onPointerDown={e => {\n        onBodyPointerDown(e, node);\n      }}\n      onPointerUp={e => {\n        onBodyPointerUp(e, node);\n      }}\n      onPointerEnter={onPointerEnter}\n      onPointerLeave={onPointerLeave}\n      onContextMenu={e => {\n        onBodyContextMenu(e, node);\n      }}\n    >\n      <NodeGraphNodeContext.Provider value={nodeContext}>\n        {body}\n      </NodeGraphNodeContext.Provider>\n    </div>\n  );\n}\n\nexport const NodeGraphNodeView = React.memo(NodeGraphNodeViewImpl);\nNodeGraphNodeView.displayName = 'NodeGraphNodeView';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAoDA;AAOE;AACA;AAEE;AACA;AAEA;;;;AAGF;AAKF;AAEA;;AACe;AACb;AAA8B;AAC9B;AACF;AAEA;;;;;;;;;;;;;;;;AAgBG;AACH;AAGE;AAQA;AACA;AACA;;;;;;;;AAcA;AAIA;AAOI;;;;;AAOA;;;;AAMA;;AAIJ;;;;;AAeA;;;;;;AAOA;AACE;AACE;AACA;AACD;AACH;AAEA;AACA;;AAEA;AACA;AAEA;AACE;AACA;;;;AAIA;AACE;;AAEF;AACE;;;AAGA;;;AAGJ;;;AAGE;AACA;;;AAGD;AAED;;;;;;AAOA;;AAOA;AACE;AACA;;AACA;;AAGF;AACE;AACA;;AACA;;;AAIF;;AAGI;;;;;;;;;;AAwBE;AACF;AAEE;AACF;AAIE;AACF;AAON;AAEO;AACP;;"}

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

@@ -0,0 +1,21 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const NodeGraphNodeContext = 
+/*#__PURE__*/ createContext(null);
+/**
+ * Read the active per-node context. Throws when used outside a node body
+ * (i.e. outside `renderNode`) — the throw is intentional, since the
+ * library guarantees the context is provided when the consumer's
+ * `renderNode` is invoked.
+ */
+function useNodeGraphNodeContext() {
+    const ctx = useContext(NodeGraphNodeContext);
+    if (!ctx) {
+        throw new Error('<NodeGraph.Port> must be rendered inside the renderNode body of a <NodeGraph>');
+    }
+    return ctx;
+}
+
+export { NodeGraphNodeContext, useNodeGraphNodeContext };
+//# sourceMappingURL=NodeGraphNodeContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphNodeContext.js","sources":["src/components/editor/NodeGraph/NodeGraphNodeContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\nimport type React from 'react';\n\n/**\n * Per-node context wired by `NodeGraphNodeView` so `<NodeGraph.Port>` slots\n * rendered inside `renderNode` can identify their owning node and start a\n * connection drag without the consumer threading any IDs through manually.\n */\nexport interface NodeGraphNodeContextValue {\n  /** Owning node id. */\n  nodeId: string;\n  /**\n   * Start a connection drag from the given port. Wired by the parent to\n   * the shared `useNodeGraphConnection` controller.\n   */\n  onPortPointerDown: (\n    event: React.PointerEvent<HTMLElement>,\n    portId: string\n  ) => void;\n}\n\nexport const NodeGraphNodeContext =\n  /*#__PURE__*/ createContext<NodeGraphNodeContextValue | null>(null);\n\n/**\n * Read the active per-node context. Throws when used outside a node body\n * (i.e. outside `renderNode`) — the throw is intentional, since the\n * library guarantees the context is provided when the consumer's\n * `renderNode` is invoked.\n */\nexport function useNodeGraphNodeContext(): NodeGraphNodeContextValue {\n  const ctx = useContext(NodeGraphNodeContext);\n  if (!ctx) {\n    throw new Error(\n      '<NodeGraph.Port> must be rendered inside the renderNode body of a <NodeGraph>'\n    );\n  }\n  return ctx;\n}\n"],"names":[],"mappings":";;;;AAyBE;AAEF;;;;;AAKG;;AAED;;AAEE;;AAIF;AACF;;"}

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

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import { cx } from '../../../utils/cx.js';
+import { pinRowRecipe, nodeBodyRecipe, nodeHeaderIconStyle, nodeHeaderTextStyle, nodeHeaderTitleStyle, nodeHeaderSubtitleStyle, nodeHeaderStyle, pinListColumnStyle, pinListStyle } from './NodeGraph.css.js';
+import { useNodeGraphStore } from './NodeGraphContext.js';
+import { useNodeGraphNodeContext } from './NodeGraphNodeContext.js';
+import { useStoreSlice } from './useStoreSlice.js';
+
+function NodeGraphNodeBody({ accent, selected: selectedProp, hovered: hoveredProp, variant = 'panel', className, style, children, }) {
+    const { nodeId } = useNodeGraphNodeContext();
+    const store = useNodeGraphStore();
+    const autoSelected = useStoreSlice(store.subscribeSelection, store.getSelection, sel => sel.nodes.includes(nodeId));
+    const autoHovered = useStoreSlice(store.subscribeHover, store.getHover, hover => hover.hoveredNodeId === nodeId);
+    const selected = selectedProp ?? autoSelected;
+    const hovered = hoveredProp ?? autoHovered;
+    // Accent drives both the selected border and a soft glow. CSS vars
+    // let recipe variants pick up the consumer's value without us
+    // pre-baking a token contract for every possible colour.
+    const accentStyle = accent
+        ? { ['--etui-ng-accent']: accent }
+        : undefined;
+    return (jsx("div", { className: cx(nodeBodyRecipe({ selected, hovered, variant }), className), style: { ...accentStyle, ...style }, children: children }));
+}
+function NodeGraphNodeHeader({ title, subtitle, icon, background, className, style, children, }) {
+    const styleOverride = {
+        ...(background ? { background } : null),
+        ...style,
+    };
+    return (jsx("div", { className: cx(nodeHeaderStyle, className), style: styleOverride, children: children ?? (jsxs(Fragment, { children: [icon != null ? (jsx("span", { className: nodeHeaderIconStyle, children: icon })) : null, jsxs("div", { className: nodeHeaderTextStyle, children: [title != null ? (jsx("div", { className: nodeHeaderTitleStyle, children: title })) : null, subtitle != null ? (jsx("div", { className: nodeHeaderSubtitleStyle, children: subtitle })) : null] })] })) }));
+}
+function NodeGraphPinList({ className, style, columnGap = 16, children, }) {
+    const left = [];
+    const right = [];
+    const loose = [];
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child)) {
+            loose.push(child);
+            return;
+        }
+        const side = child.props?.side ?? null;
+        if (side === 'left')
+            left.push(child);
+        else if (side === 'right')
+            right.push(child);
+        else
+            loose.push(child);
+    });
+    return (jsxs("div", { className: cx(pinListStyle, className), style: { columnGap, ...style }, children: [jsx("div", { className: pinListColumnStyle, children: left }), jsx("div", { className: pinListColumnStyle, children: right }), loose.length > 0 ? (jsx("div", { style: { gridColumn: '1 / -1' }, children: loose })) : null] }));
+}
+function NodeGraphPinRow({ side, height = 22, className, style, children, }) {
+    return (jsx("div", { className: cx(pinRowRecipe({ side }), className), style: { height, ...style }, "data-pin-side": side, children: children }));
+}
+
+export { NodeGraphNodeBody, NodeGraphNodeHeader, NodeGraphPinList, NodeGraphPinRow };
+//# sourceMappingURL=NodeGraphNodeParts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphNodeParts.js","sources":["src/components/editor/NodeGraph/NodeGraphNodeParts.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  nodeBodyRecipe,\n  nodeHeaderStyle,\n  nodeHeaderIconStyle,\n  nodeHeaderTextStyle,\n  nodeHeaderTitleStyle,\n  nodeHeaderSubtitleStyle,\n  pinListStyle,\n  pinListColumnStyle,\n  pinRowRecipe,\n} from './NodeGraph.css';\nimport { useNodeGraphStore } from './NodeGraphContext';\nimport { useNodeGraphNodeContext } from './NodeGraphNodeContext';\nimport { useStoreSlice } from './useStoreSlice';\n\nimport type { NodeGraphPortSide } from './NodeGraph.types';\n\n/**\n * Default node body wrapper — a themed panel with the standard\n * selected/hovered visual states the library provides out of the box.\n * Drop it inside your `renderNode` and you get a node that looks at\n * home next to the rest of the library; override `className` / `style`\n * to take over.\n *\n * Selection / hover / drag state is read from the store via the\n * per-node context so the body re-themes itself without the consumer\n * threading state in from `renderNode`'s `ctx`. Pass `selected` /\n * `hovered` explicitly to drive the visual from outside (e.g. running\n * a node-state machine in your own React tree).\n */\nexport interface NodeGraphNodeBodyProps {\n  /** Override the accent colour (default border / shadow when selected). */\n  accent?: string;\n  /** Override the auto-derived `selected` state. */\n  selected?: boolean;\n  /** Override the auto-derived `hovered` state. */\n  hovered?: boolean;\n  /** Visual variant — affects default chrome density. */\n  variant?: 'panel' | 'flat' | 'minimal';\n  /** Extra classes applied to the body wrapper. */\n  className?: string;\n  /** Inline style override (lower priority than CSS classes). */\n  style?: React.CSSProperties;\n  /** Body content — typically `<NodeGraph.NodeHeader>` + `<NodeGraph.PinList>`. */\n  children?: React.ReactNode;\n}\n\nexport function NodeGraphNodeBody({\n  accent,\n  selected: selectedProp,\n  hovered: hoveredProp,\n  variant = 'panel',\n  className,\n  style,\n  children,\n}: NodeGraphNodeBodyProps): React.ReactElement {\n  const { nodeId } = useNodeGraphNodeContext();\n  const store = useNodeGraphStore();\n\n  const autoSelected = useStoreSlice(\n    store.subscribeSelection,\n    store.getSelection,\n    sel => sel.nodes.includes(nodeId)\n  );\n  const autoHovered = useStoreSlice(\n    store.subscribeHover,\n    store.getHover,\n    hover => hover.hoveredNodeId === nodeId\n  );\n\n  const selected = selectedProp ?? autoSelected;\n  const hovered = hoveredProp ?? autoHovered;\n\n  // Accent drives both the selected border and a soft glow. CSS vars\n  // let recipe variants pick up the consumer's value without us\n  // pre-baking a token contract for every possible colour.\n  const accentStyle = accent\n    ? ({ ['--etui-ng-accent' as string]: accent } as React.CSSProperties)\n    : undefined;\n\n  return (\n    <div\n      className={cx(nodeBodyRecipe({ selected, hovered, variant }), className)}\n      style={{ ...accentStyle, ...style }}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * Header bar for a node — gradient strip + optional icon, title and\n * subtitle. Pass `children` to take full control of the header layout.\n */\nexport interface NodeGraphNodeHeaderProps {\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  /** Small leading icon (typically 14-18 px). */\n  icon?: React.ReactNode;\n  /** Override the header background — defaults to theme accent gradient. */\n  background?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport function NodeGraphNodeHeader({\n  title,\n  subtitle,\n  icon,\n  background,\n  className,\n  style,\n  children,\n}: NodeGraphNodeHeaderProps): React.ReactElement {\n  const styleOverride: React.CSSProperties = {\n    ...(background ? { background } : null),\n    ...style,\n  };\n  return (\n    <div className={cx(nodeHeaderStyle, className)} style={styleOverride}>\n      {children ?? (\n        <>\n          {icon != null ? (\n            <span className={nodeHeaderIconStyle}>{icon}</span>\n          ) : null}\n          <div className={nodeHeaderTextStyle}>\n            {title != null ? (\n              <div className={nodeHeaderTitleStyle}>{title}</div>\n            ) : null}\n            {subtitle != null ? (\n              <div className={nodeHeaderSubtitleStyle}>{subtitle}</div>\n            ) : null}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n/**\n * Two-column pin container — children are routed into the left or right\n * column based on each `<NodeGraph.PinRow side>`. Anything that isn't a\n * `<NodeGraph.PinRow>` falls through into a center \"loose\" slot below\n * the columns (so you can drop inline editors / body content next to\n * your pin rows without breaking layout).\n */\nexport interface NodeGraphPinListProps {\n  className?: string;\n  style?: React.CSSProperties;\n  /** Gap between left and right columns, in CSS px. Default 16. */\n  columnGap?: number;\n  children?: React.ReactNode;\n}\n\nexport function NodeGraphPinList({\n  className,\n  style,\n  columnGap = 16,\n  children,\n}: NodeGraphPinListProps): React.ReactElement {\n  const left: React.ReactNode[] = [];\n  const right: React.ReactNode[] = [];\n  const loose: React.ReactNode[] = [];\n\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) {\n      loose.push(child);\n      return;\n    }\n    const side =\n      (child.props as { side?: NodeGraphPortSide } | undefined)?.side ?? null;\n    if (side === 'left') left.push(child);\n    else if (side === 'right') right.push(child);\n    else loose.push(child);\n  });\n\n  return (\n    <div\n      className={cx(pinListStyle, className)}\n      style={{ columnGap, ...style }}\n    >\n      <div className={pinListColumnStyle}>{left}</div>\n      <div className={pinListColumnStyle}>{right}</div>\n      {loose.length > 0 ? (\n        <div style={{ gridColumn: '1 / -1' }}>{loose}</div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Single pin row — typically holds a `<NodeGraph.Port>` plus a label.\n * Side determines which end of the row the port sits at: `left` puts\n * the port first (left edge), `right` puts it last (right edge).\n *\n * The row is layout-only — pin position math comes from the slot's DOM\n * measurement, not from where in the row it lives. You can rearrange\n * the order inside the row without breaking edges.\n */\nexport interface NodeGraphPinRowProps {\n  /** Which side this pin anchors to. Drives the layout / justification. */\n  side: NodeGraphPortSide;\n  /** Optional row height (CSS px). Default 22. */\n  height?: number;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nexport function NodeGraphPinRow({\n  side,\n  height = 22,\n  className,\n  style,\n  children,\n}: NodeGraphPinRowProps): React.ReactElement {\n  return (\n    <div\n      className={cx(pinRowRecipe({ side }), className)}\n      style={{ height, ...style }}\n      data-pin-side={side}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAqDM;AASJ;AACA;;;AAaA;AACA;;;;;AAME;;AAGF;AAQF;;AA2BE;AACE;AACA;;AAEF;AAmBF;AAiBM;;;;;;AAYA;;;;;AAKmB;;AACM;;AACtB;AACP;AAEA;AAYF;AAqBM;AAOJ;AASF;;"}

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

@@ -0,0 +1,59 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.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 { nodeSectionHeaderStyle, nodeSectionChevronRecipe, nodeSectionTitleStyle, nodeSectionContentStyle, nodeSectionStyle } from './NodeGraph.css.js';
+import { NodeGraphNodeSectionContext } from './NodeGraphNodeSectionContext.js';
+
+/**
+ * A collapsible section inside a node body — the place to tuck "advanced" /
+ * overflow pins so the node stays compact. The collapse is **purely visual**:
+ * the children never unmount, so their state is preserved and there's no
+ * remount cost. `<NodeGraph.Port>` slots inside a collapsed section
+ * unregister their position while hidden, so the pins' edges hide with them
+ * and reappear on expand — no dangling wires, no manual re-anchoring.
+ *
+ * @example
+ * ```tsx
+ * <NodeGraph.NodeBody>
+ *   <NodeGraph.NodeHeader title="Make Transform" />
+ *   <NodeGraph.PinList>{mainPins}</NodeGraph.PinList>
+ *   <NodeGraph.NodeSection title="Advanced" defaultCollapsed>
+ *     <NodeGraph.PinList>{advancedPins}</NodeGraph.PinList>
+ *   </NodeGraph.NodeSection>
+ * </NodeGraph.NodeBody>
+ * ```
+ */
+function NodeGraphNodeSection({ title, collapsible = true, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, className, style, children, }) {
+    const [collapsedState, setCollapsed] = useControlledState({
+        value: collapsedProp,
+        defaultValue: defaultCollapsed,
+        onChange: onCollapsedChange,
+        fallback: false,
+    });
+    // A non-collapsible section is always expanded regardless of state.
+    const collapsed = collapsible ? collapsedState : false;
+    const toggle = useCallback(() => {
+        if (!collapsible)
+            return;
+        setCollapsed(prev => !prev);
+    }, [collapsible, setCollapsed]);
+    // Toggling the section must not start a node drag / selection.
+    const stopPointer = useCallback((event) => {
+        event.stopPropagation();
+    }, []);
+    const ctxValue = useMemo(() => ({ collapsed }), [collapsed]);
+    return (jsxs("div", { className: cx(nodeSectionStyle, className), style: style, children: [jsxs("button", { type: "button", className: nodeSectionHeaderStyle, onClick: toggle, onPointerDown: stopPointer, disabled: !collapsible, "aria-expanded": collapsible ? !collapsed : undefined, children: [collapsible ? (jsx("span", { className: nodeSectionChevronRecipe({ collapsed }), "aria-hidden": "true" })) : null, title != null ? (jsx("span", { className: nodeSectionTitleStyle, children: title })) : null] }), jsx("div", { className: nodeSectionContentStyle, style: collapsed ? { display: 'none' } : undefined, children: jsx(NodeGraphNodeSectionContext.Provider, { value: ctxValue, children: children }) })] }));
+}
+NodeGraphNodeSection.displayName = 'NodeGraphNodeSection';
+
+export { NodeGraphNodeSection };
+//# sourceMappingURL=NodeGraphNodeSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphNodeSection.js","sources":["src/components/editor/NodeGraph/NodeGraphNodeSection.tsx"],"sourcesContent":["'use client';\n\nimport React, { useCallback, useMemo } from 'react';\n\nimport { useControlledState } from '@/hooks';\nimport { cx } from '@/utils/cx';\n\nimport {\n  nodeSectionStyle,\n  nodeSectionHeaderStyle,\n  nodeSectionChevronRecipe,\n  nodeSectionTitleStyle,\n  nodeSectionContentStyle,\n} from './NodeGraph.css';\nimport { NodeGraphNodeSectionContext } from './NodeGraphNodeSectionContext';\n\nimport type { NodeGraphNodeSectionContextValue } from './NodeGraphNodeSectionContext';\n\nexport interface NodeGraphNodeSectionProps {\n  /** Header label shown next to the collapse toggle. */\n  title?: React.ReactNode;\n  /**\n   * Whether the header toggles the section. When false the section is a\n   * static labelled group (no chevron, always shown). @default true\n   */\n  collapsible?: boolean;\n  /** Controlled collapsed state. Pair with `onCollapsedChange`. */\n  collapsed?: boolean;\n  /** Initial collapsed state when uncontrolled. @default false */\n  defaultCollapsed?: boolean;\n  /** Fires when the user toggles the section. */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  /** Section body — typically a `<NodeGraph.PinList>` of the extra pins. */\n  children?: React.ReactNode;\n}\n\n/**\n * A collapsible section inside a node body — the place to tuck \"advanced\" /\n * overflow pins so the node stays compact. The collapse is **purely visual**:\n * the children never unmount, so their state is preserved and there's no\n * remount cost. `<NodeGraph.Port>` slots inside a collapsed section\n * unregister their position while hidden, so the pins' edges hide with them\n * and reappear on expand — no dangling wires, no manual re-anchoring.\n *\n * @example\n * ```tsx\n * <NodeGraph.NodeBody>\n *   <NodeGraph.NodeHeader title=\"Make Transform\" />\n *   <NodeGraph.PinList>{mainPins}</NodeGraph.PinList>\n *   <NodeGraph.NodeSection title=\"Advanced\" defaultCollapsed>\n *     <NodeGraph.PinList>{advancedPins}</NodeGraph.PinList>\n *   </NodeGraph.NodeSection>\n * </NodeGraph.NodeBody>\n * ```\n */\nexport function NodeGraphNodeSection({\n  title,\n  collapsible = true,\n  collapsed: collapsedProp,\n  defaultCollapsed,\n  onCollapsedChange,\n  className,\n  style,\n  children,\n}: NodeGraphNodeSectionProps): React.ReactElement {\n  const [collapsedState, setCollapsed] = useControlledState<boolean>({\n    value: collapsedProp,\n    defaultValue: defaultCollapsed,\n    onChange: onCollapsedChange,\n    fallback: false,\n  });\n  // A non-collapsible section is always expanded regardless of state.\n  const collapsed = collapsible ? collapsedState : false;\n\n  const toggle = useCallback(() => {\n    if (!collapsible) return;\n    setCollapsed(prev => !prev);\n  }, [collapsible, setCollapsed]);\n\n  // Toggling the section must not start a node drag / selection.\n  const stopPointer = useCallback(\n    (event: React.PointerEvent<HTMLButtonElement>) => {\n      event.stopPropagation();\n    },\n    []\n  );\n\n  const ctxValue = useMemo<NodeGraphNodeSectionContextValue>(\n    () => ({ collapsed }),\n    [collapsed]\n  );\n\n  return (\n    <div className={cx(nodeSectionStyle, className)} style={style}>\n      <button\n        type=\"button\"\n        className={nodeSectionHeaderStyle}\n        onClick={toggle}\n        onPointerDown={stopPointer}\n        disabled={!collapsible}\n        aria-expanded={collapsible ? !collapsed : undefined}\n      >\n        {collapsible ? (\n          <span\n            className={nodeSectionChevronRecipe({ collapsed })}\n            aria-hidden=\"true\"\n          />\n        ) : null}\n        {title != null ? (\n          <span className={nodeSectionTitleStyle}>{title}</span>\n        ) : null}\n      </button>\n      <div\n        className={nodeSectionContentStyle}\n        style={collapsed ? { display: 'none' } : undefined}\n      >\n        <NodeGraphNodeSectionContext.Provider value={ctxValue}>\n          {children}\n        </NodeGraphNodeSectionContext.Provider>\n      </div>\n    </div>\n  );\n}\n\nNodeGraphNodeSection.displayName = 'NodeGraphNodeSection';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsCA;;;;;;;;;;;;;;;;;;AAkBG;AACG;AAUJ;AACE;AACA;AACA;AACA;AACD;;;AAID;AACE;;;AAEF;;AAGA;;;AAOA;AAKA;AA8BF;AAEA;;"}

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

@@ -0,0 +1,17 @@
+"use client";
+import { useContext, createContext } from 'react';
+
+const DEFAULT = { collapsed: false };
+const NodeGraphNodeSectionContext = 
+/*#__PURE__*/ createContext(DEFAULT);
+/**
+ * Read the enclosing section's collapsed state. Returns `{ collapsed: false }`
+ * when the port isn't inside a `<NodeGraph.NodeSection>`, so ports outside a
+ * section behave exactly as before.
+ */
+function useNodeGraphNodeSection() {
+    return useContext(NodeGraphNodeSectionContext);
+}
+
+export { NodeGraphNodeSectionContext, useNodeGraphNodeSection };
+//# sourceMappingURL=NodeGraphNodeSectionContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphNodeSectionContext.js","sources":["src/components/editor/NodeGraph/NodeGraphNodeSectionContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\n\n/**\n * Context published by `<NodeGraph.NodeSection>` so the `<NodeGraph.Port>`\n * slots rendered inside it know whether they're currently collapsed. The\n * section never unmounts its children (a collapse is purely visual), so a\n * collapsed port stays in the React tree but unregisters its measured\n * position — which hides its edges until the section is expanded again,\n * without any remount cost or re-anchor bookkeeping.\n */\nexport interface NodeGraphNodeSectionContextValue {\n  collapsed: boolean;\n}\n\nconst DEFAULT: NodeGraphNodeSectionContextValue = { collapsed: false };\n\nexport const NodeGraphNodeSectionContext =\n  /*#__PURE__*/ createContext<NodeGraphNodeSectionContextValue>(DEFAULT);\n\n/**\n * Read the enclosing section's collapsed state. Returns `{ collapsed: false }`\n * when the port isn't inside a `<NodeGraph.NodeSection>`, so ports outside a\n * section behave exactly as before.\n */\nexport function useNodeGraphNodeSection(): NodeGraphNodeSectionContextValue {\n  return useContext(NodeGraphNodeSectionContext);\n}\n"],"names":[],"mappings":";;;AAgBA;;AAGE;AAEF;;;;AAIG;;AAED;AACF;;"}

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

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cx } from '../../../utils/cx.js';
+import { pinLabelStyle } from './NodeGraph.css.js';
+import { NodeGraphPinRow } from './NodeGraphNodeParts.js';
+import { NodeGraphPort } from './NodeGraphPort.js';
+
+/**
+ * `<NodeGraph.Pin>` — the one-liner for the common "handle + label" row.
+ * Renders a `<NodeGraph.PinRow>` containing a `<NodeGraph.Port>` and a
+ * label, ordered so the handle always sits flush against the node edge
+ * (port → label on the left/top, label → port on the right). Reach for
+ * `<NodeGraph.PinRow>` + `<NodeGraph.Port>` directly only when you need a
+ * layout this doesn't cover (multiple controls in a row, inline editors).
+ *
+ * @example
+ * ```tsx
+ * <NodeGraph.PinList>
+ *   <NodeGraph.Pin id="exec" side="left" shape="triangle" color="#fff" />
+ *   <NodeGraph.Pin id="value" side="right" dataType="float" color="#9ee65a" label="Value" />
+ * </NodeGraph.PinList>
+ * ```
+ */
+function NodeGraphPin({ id, side, dataType, label, color, shape, filled, height, portLabel, className, style, labelClassName, labelStyle, }) {
+    const port = (jsx(NodeGraphPort, { id: id, side: side, ...(dataType !== undefined ? { dataType } : {}), ...(color !== undefined ? { color } : {}), ...(shape !== undefined ? { shape } : {}), ...(filled !== undefined ? { filled } : {}), ...(portLabel !== undefined ? { label: portLabel } : {}) }));
+    const labelEl = label != null && label !== '' ? (jsx("span", { className: cx(pinLabelStyle, labelClassName), style: labelStyle, children: label })) : null;
+    // Port leads the row on the left / top so the handle hugs the node edge;
+    // on the right the label leads and the handle trails.
+    const portFirst = side === 'left' || side === 'top';
+    return (jsx(NodeGraphPinRow, { side: side, ...(height !== undefined ? { height } : {}), ...(className !== undefined ? { className } : {}), ...(style !== undefined ? { style } : {}), children: portFirst ? (jsxs(Fragment, { children: [port, labelEl] })) : (jsxs(Fragment, { children: [labelEl, port] })) }));
+}
+NodeGraphPin.displayName = 'NodeGraphPin';
+
+export { NodeGraphPin };
+//# sourceMappingURL=NodeGraphPin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphPin.js","sources":["src/components/editor/NodeGraph/NodeGraphPin.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { pinLabelStyle } from './NodeGraph.css';\nimport { NodeGraphPinRow } from './NodeGraphNodeParts';\nimport { NodeGraphPort } from './NodeGraphPort';\n\nimport type { NodeGraphPortShape, NodeGraphPortSide } from './NodeGraph.types';\n\nexport interface NodeGraphPinProps {\n  /** Port id — referenced by `NodeGraphEdge.source` / `.target`. */\n  id: string;\n  /** Which side the pin anchors to. Drives row layout and edge tangent. */\n  side: NodeGraphPortSide;\n  /** Opaque type token forwarded to `isValidConnection` and edge styling. */\n  dataType?: string;\n  /** Row label shown next to the handle. */\n  label?: React.ReactNode;\n  /** Handle colour (any CSS colour). Defaults to the theme focus colour. */\n  color?: string;\n  /** Built-in handle shape. @default 'circle' */\n  shape?: NodeGraphPortShape;\n  /**\n   * Force the handle filled / hollow. When omitted, the handle fills\n   * automatically while the pin is connected to an edge.\n   */\n  filled?: boolean;\n  /** Row height in CSS px. @default 22 */\n  height?: number;\n  /** Accessible label for the port handle. Falls back to the port default. */\n  portLabel?: string;\n  /** Class applied to the row wrapper. */\n  className?: string;\n  /** Inline style applied to the row wrapper. */\n  style?: React.CSSProperties;\n  /** Class applied to the label span. */\n  labelClassName?: string;\n  /** Inline style applied to the label span. */\n  labelStyle?: React.CSSProperties;\n}\n\n/**\n * `<NodeGraph.Pin>` — the one-liner for the common \"handle + label\" row.\n * Renders a `<NodeGraph.PinRow>` containing a `<NodeGraph.Port>` and a\n * label, ordered so the handle always sits flush against the node edge\n * (port → label on the left/top, label → port on the right). Reach for\n * `<NodeGraph.PinRow>` + `<NodeGraph.Port>` directly only when you need a\n * layout this doesn't cover (multiple controls in a row, inline editors).\n *\n * @example\n * ```tsx\n * <NodeGraph.PinList>\n *   <NodeGraph.Pin id=\"exec\" side=\"left\" shape=\"triangle\" color=\"#fff\" />\n *   <NodeGraph.Pin id=\"value\" side=\"right\" dataType=\"float\" color=\"#9ee65a\" label=\"Value\" />\n * </NodeGraph.PinList>\n * ```\n */\nexport function NodeGraphPin({\n  id,\n  side,\n  dataType,\n  label,\n  color,\n  shape,\n  filled,\n  height,\n  portLabel,\n  className,\n  style,\n  labelClassName,\n  labelStyle,\n}: NodeGraphPinProps): React.ReactElement {\n  const port = (\n    <NodeGraphPort\n      id={id}\n      side={side}\n      {...(dataType !== undefined ? { dataType } : {})}\n      {...(color !== undefined ? { color } : {})}\n      {...(shape !== undefined ? { shape } : {})}\n      {...(filled !== undefined ? { filled } : {})}\n      {...(portLabel !== undefined ? { label: portLabel } : {})}\n    />\n  );\n  const labelEl =\n    label != null && label !== '' ? (\n      <span className={cx(pinLabelStyle, labelClassName)} style={labelStyle}>\n        {label}\n      </span>\n    ) : null;\n  // Port leads the row on the left / top so the handle hugs the node edge;\n  // on the right the label leads and the handle trails.\n  const portFirst = side === 'left' || side === 'top';\n  return (\n    <NodeGraphPinRow\n      side={side}\n      {...(height !== undefined ? { height } : {})}\n      {...(className !== undefined ? { className } : {})}\n      {...(style !== undefined ? { style } : {})}\n    >\n      {portFirst ? (\n        <>\n          {port}\n          {labelEl}\n        </>\n      ) : (\n        <>\n          {labelEl}\n          {port}\n        </>\n      )}\n    </NodeGraphPinRow>\n  );\n}\n\nNodeGraphPin.displayName = 'NodeGraphPin';\n"],"names":[],"mappings":";;;;;;;AA4CA;;;;;;;;;;;;;;;AAeG;AACG;;AA0BJ;;;;AASA;AAoBF;AAEA;;"}