entangle-ui 0.9.0 → 0.10.0

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 '../../../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 { 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":[null],"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":[null],"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":[null],"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 '../../../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 { 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":[null],"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":[null],"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":[null],"names":[],"mappings":";;;;;;;AA4CA;;;;;;;;;;;;;;;AAeG;AACG;;AA0BJ;;;;AASA;AAoBF;AAEA;;"}

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

@@ -0,0 +1,191 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useCallback, useMemo, useSyncExternalStore, useLayoutEffect } 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 '../../../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 { portSlotRecipe } from './NodeGraph.css.js';
+import { useNodeGraphStore } from './NodeGraphContext.js';
+import { useNodeGraphNodeContext } from './NodeGraphNodeContext.js';
+import { useNodeGraphNodeSection } from './NodeGraphNodeSectionContext.js';
+import { NodeGraphPortVisual } from './NodeGraphPortVisual.js';
+import { useStoreSlice } from './useStoreSlice.js';
+
+const EMPTY_VISUAL = {
+    isSource: false,
+    isCandidate: false,
+    isInvalid: false,
+    isHovered: false,
+};
+function visualEqual(a, b) {
+    return (a.isSource === b.isSource &&
+        a.isCandidate === b.isCandidate &&
+        a.isInvalid === b.isInvalid &&
+        a.isHovered === b.isHovered);
+}
+/**
+ * `<NodeGraph.Port>` — compound slot that declares a connection endpoint
+ * for the current node. Render it anywhere inside `renderNode`; the
+ * library measures its DOM position, registers it as the anchor for any
+ * edge that references this port id, and wires pointer events so the
+ * user can drag from it to start a connection.
+ *
+ * The slot renders a single `<span>` with `display: inline-flex` — drop
+ * it inline next to a label and it will sit beside the text. The wrapper
+ * carries the default UE-style circle / exec-triangle visual; pass
+ * `children` to replace the chrome entirely (state for theming is
+ * exposed via `data-port-*` attributes).
+ *
+ * @example
+ * ```tsx
+ * <NodeGraph.Port id="in" side="left" dataType="exec" />
+ * ```
+ *
+ * Wrapped in `React.memo` — ports re-mount on every consumer `renderNode`
+ * call by default, so memoization only helps consumers who memoize their
+ * own node body. When they do, ports skip re-renders on unrelated store
+ * updates entirely.
+ */
+function NodeGraphPortImpl({ id, side, dataType, shape = 'circle', color, filled, children, label, className, style, }) {
+    const { nodeId, onPortPointerDown } = useNodeGraphNodeContext();
+    const { collapsed } = useNodeGraphNodeSection();
+    const store = useNodeGraphStore();
+    const viewportStore = useViewportStore();
+    const elementRef = useRef(null);
+    // ── Connected state (slice subscription — only flips re-render) ──
+    // The store recomputes the connected-ports index when edges change, so
+    // each port re-renders only when its own connected-ness actually flips.
+    const connected = useStoreSlice(store.subscribeConnectedPorts, store.getConnectedPorts, () => store.isPortConnected(nodeId, id));
+    // ── Per-port visual state (slice subscription — no re-render storm) ──
+    const visual = useStoreSlice(store.subscribeInteraction, store.getInteraction, interaction => {
+        if (interaction.kind !== 'connect')
+            return EMPTY_VISUAL;
+        const isSource = interaction.source.node === nodeId && interaction.source.port === id;
+        const isCandidate = interaction.candidate !== null &&
+            interaction.candidate.node === nodeId &&
+            interaction.candidate.port === id;
+        if (!isSource && !isCandidate)
+            return EMPTY_VISUAL;
+        return {
+            isSource,
+            isCandidate,
+            isInvalid: isCandidate && interaction.invalid,
+            isHovered: false,
+        };
+    }, visualEqual);
+    const hoverState = useStoreSlice(store.subscribeHover, store.getHover, hover => ({
+        ...EMPTY_VISUAL,
+        isHovered: hover.hoveredPort !== null &&
+            hover.hoveredPort.node === nodeId &&
+            hover.hoveredPort.port === id,
+    }), visualEqual);
+    const isHovered = hoverState.isHovered;
+    const isSource = visual.isSource;
+    const isCandidate = visual.isCandidate;
+    const isInvalid = visual.isInvalid;
+    // ── DOM measurement → store ──
+    //
+    // Run synchronously before paint so first frame's edges anchor at the
+    // correct point. `useResizeObserver` picks up later size changes on the
+    // port itself, and the per-node layout-version subscription below picks
+    // up layout shifts inside the node body that move the port without
+    // resizing it (e.g. a sibling row expands).
+    //
+    // `closest('[data-node-id]:not([data-port-id])')` skips the slot itself
+    // — the slot wrapper carries `data-node-id` too (so connection-drop
+    // hit-tests can walk up from any descendant), so a plain `[data-node-id]`
+    // would match the port and report position (~6, ~6) for every port.
+    const measure = useCallback(() => {
+        // Inside a collapsed section the port is hidden; drop its registered
+        // position so its edges hide too (re-registers on expand). The component
+        // stays mounted, so no remount churn.
+        if (collapsed) {
+            store.removePortPosition(nodeId, id);
+            return;
+        }
+        const el = elementRef.current;
+        if (!el)
+            return;
+        const wrapper = el.closest('[data-node-id]:not([data-port-id])');
+        if (!wrapper)
+            return;
+        const portRect = el.getBoundingClientRect();
+        const nodeRect = wrapper.getBoundingClientRect();
+        // Convert from screen pixels to node-local world units. `ViewportWorld`
+        // applies `transform: scale(zoom)` to all node wrappers, so the rects
+        // we just read are scaled by `zoom`. Dividing brings us back to the
+        // un-scaled layout pixels, which are 1:1 with world units inside a node.
+        const zoom = viewportStore.getTransform().zoom || 1;
+        const x = (portRect.left + portRect.width / 2 - nodeRect.left) / zoom;
+        const y = (portRect.top + portRect.height / 2 - nodeRect.top) / zoom;
+        store.setPortPosition(nodeId, id, { x, y, side, dataType });
+    }, [store, viewportStore, nodeId, id, side, dataType, collapsed]);
+    // Re-measure triggers (the per-port `ResizeObserver` only fires when
+    // the port's own size changes, which misses layout shifts inside the
+    // node body that move the port without resizing it — e.g. a sibling
+    // row expanding). Subscribing to the per-node measured size makes this
+    // component re-render on every wrapper resize, and the layout effect
+    // below re-runs the measurement.
+    const getMeasuredForNode = useMemo(() => () => store.getMeasuredSize(nodeId), [store, nodeId]);
+    const measuredSize = useSyncExternalStore(store.subscribeMeasuredSizes, getMeasuredForNode);
+    useLayoutEffect(() => {
+        measure();
+    }, [measure, measuredSize]);
+    useResizeObserver(elementRef, () => {
+        measure();
+    });
+    // Unregister on unmount / id change.
+    useLayoutEffect(() => {
+        return () => {
+            store.removePortPosition(nodeId, id);
+        };
+    }, [store, nodeId, id]);
+    // ── Hover wiring ──
+    //
+    // Update the store's `hoveredPort` slice on enter/leave so node bodies,
+    // edges, and other ports can react. Library guards against duplicate
+    // notifications when the value doesn't actually change.
+    const onPointerEnter = useCallback(() => {
+        const current = store.getHover();
+        if (current.hoveredPort?.node === nodeId && current.hoveredPort.port === id)
+            return;
+        store.setHover({ ...current, hoveredPort: { node: nodeId, port: id } });
+    }, [store, nodeId, id]);
+    const onPointerLeave = useCallback(() => {
+        const current = store.getHover();
+        if (current.hoveredPort?.node !== nodeId || current.hoveredPort.port !== id)
+            return;
+        store.setHover({ ...current, hoveredPort: null });
+    }, [store, nodeId, id]);
+    const handlePointerDown = useCallback((event) => {
+        onPortPointerDown(event, id);
+    }, [onPortPointerDown, id]);
+    const hasCustomVisual = children !== undefined && children !== null;
+    const isFilled = filled ?? connected;
+    // Route the consumer's `color` into the slot via a CSS custom property so
+    // the built-in visual (which paints with `currentColor`) picks it up,
+    // while the source / candidate / invalid recipe variants can still
+    // override `color` to keep connection-drag feedback visible.
+    const portStyle = color !== undefined
+        ? { ['--etui-ng-port-color']: color, ...style }
+        : style;
+    return (jsx("span", { ref: elementRef, role: "button", tabIndex: -1, "aria-label": label ?? `${side} port ${id}`, "data-node-id": nodeId, "data-port-id": id, "data-port-side": side, "data-port-data-type": dataType, "data-port-source": isSource || undefined, "data-port-candidate": isCandidate || undefined, "data-port-invalid": isInvalid || undefined, "data-port-hovered": isHovered || undefined, "data-port-connected": connected || undefined, className: cx(portSlotRecipe({
+            side,
+            custom: hasCustomVisual,
+            source: isSource,
+            candidate: isCandidate,
+            invalid: isInvalid,
+        }), className), style: portStyle, onPointerDown: handlePointerDown, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: hasCustomVisual ? (children) : (jsx(NodeGraphPortVisual, { shape: shape, filled: isFilled })) }));
+}
+const NodeGraphPort = React.memo(NodeGraphPortImpl);
+NodeGraphPort.displayName = 'NodeGraphPort';
+
+export { NodeGraphPort };
+//# sourceMappingURL=NodeGraphPort.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphPort.js","sources":["../../../../../../src/components/editor/NodeGraph/NodeGraphPort.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA;AACE;AACA;AACA;AACA;;AAGF;AACE;AAEE;AACA;AACA;AAEJ;AAEA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH;;AAaE;AACA;AACA;AACA;;;;;;AAYA;AAII;AAAoC;AACpC;AAEA;AAEE;AACA;AACF;AAA+B;;;;AAI7B;AACA;;;AAMN;AAII;AACA;AAEE;AACA;;AAKN;AACA;AACA;AACA;;;;;;;;;;;;;AAcA;;;;;AAKI;;;AAGF;AACA;;;AAEA;;AACA;AACA;;;;;;AAMA;AACA;AACA;AACF;;;;;;;;;;AAkBE;AACF;AAEA;AACE;AACF;;;AAIE;AACE;AACF;;;;;;;AAQF;AACE;AACA;;;;AAKF;AACE;AACA;;AAEA;;AAGF;AAEI;AACF;;AAKF;;;;;AAMA;;;;;AAuBQ;AACA;AACA;AACA;;AAgBV;AAEO;AACP;;"}

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

@@ -0,0 +1,46 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+
+// All shapes are authored in a 16×16 user space and scaled to `size`, so a
+// single stroke width reads consistently across shapes.
+const VIEW = 16;
+const STROKE = 2;
+function shapeElement(shape, stroke, fill) {
+    const common = {
+        stroke,
+        fill,
+        strokeWidth: STROKE,
+        strokeLinejoin: 'round',
+    };
+    switch (shape) {
+        case 'square':
+            return jsx("rect", { x: 3, y: 3, width: 10, height: 10, rx: 1.5, ...common });
+        case 'diamond':
+            return jsx("polygon", { points: "8,2 14,8 8,14 2,8", ...common });
+        case 'triangle':
+            // Right-pointing exec/flow arrow (UE Blueprint convention).
+            return jsx("polygon", { points: "3,2.5 13.5,8 3,13.5", ...common });
+        case 'circle':
+        default:
+            return jsx("circle", { cx: 8, cy: 8, r: 5, ...common });
+    }
+}
+/**
+ * Presentational handle shape for a node-graph port. Rendered by
+ * `<NodeGraph.Port>` when no `children` are supplied, and exported so
+ * consumers can reuse the exact handle look inside fully custom port
+ * visuals (e.g. a coloured ring beside a typed label).
+ *
+ * The shape paints with `currentColor` unless `color` is set, which lets
+ * the port slot drive the colour from its `color` prop and override it on
+ * the connection-drag states without this component knowing about them.
+ */
+function NodeGraphPortVisual({ shape = 'circle', color, filled = false, size = 14, className, style, }) {
+    const stroke = color ?? 'currentColor';
+    const fill = filled ? (color ?? 'currentColor') : 'none';
+    return (jsx("svg", { width: size, height: size, viewBox: `0 0 ${VIEW} ${VIEW}`, className: className, style: { display: 'block', overflow: 'visible', ...style }, "aria-hidden": "true", focusable: "false", children: shapeElement(shape, stroke, fill) }));
+}
+NodeGraphPortVisual.displayName = 'NodeGraphPortVisual';
+
+export { NodeGraphPortVisual };
+//# sourceMappingURL=NodeGraphPortVisual.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraphPortVisual.js","sources":["../../../../../../src/components/editor/NodeGraph/NodeGraphPortVisual.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAiCA;AACA;AACA;AACA;AAEA;AAKE;;;AAGE;AACA;;;AAGA;;AAEA;AACE;AACF;;AAEE;AACF;AACA;AACE;;AAEN;AAEA;;;;;;;;;AASG;AACG;AAQJ;AACA;;AAcF;AAEA;;"}