@statelyai/flow-react 0.9.6 → 0.10.0

package/README.md

@@ -151,8 +151,72 @@ function Flow() {
   );
 }
 ```
+## Named appearance renderers
+
+<!-- appearanceRenderers and renderer props from src/StatelyFlow.tsx; border observation from src/useAppearanceMeasurement.ts -->
+
+Pass reusable renderers through `appearanceRenderers`; core resolves the renderer
+key from the entity reference or host default. Existing `renderNode` and
+`renderEdgeLabel` callbacks remain the fallback when a key has no renderer.
+
+```tsx
+<StatelyFlow
+  flow={flow}
+  appearanceRenderers={{
+    asset: {
+      renderNode: ({ node, appearance }) => (
+        <AssetView data={node.data} options={appearance?.reference?.options} />
+      ),
+      renderEdgeLabel: ({ edge, appearance }) => (
+        <AssetView data={edge.label!.data} options={appearance?.reference?.options} />
+      ),
+    },
+  }}
+/>
+```
+
+Put `data-flow-connection-bounds` on the image-border element inside a custom
+renderer. Flow measures it relative to the entity wrapper, independently of the
+full caption/image box, and refreshes on renderer commits, resizing, and image
+loading. The wrapper owns selection and primary drag. Use `draggable={false}`
+and `pointerEvents: 'none'` on primary imagery; use `Port` for authored ports,
+which automatically filters ports forbidden by registered policies. Avoid
+independent hover dimming or gesture handlers on primary imagery.
+
+Core policies live in `useFlow({ settings: { engine: { appearances } } })` or
+`createFlowInstance`. Renderer functions remain React-only and never enter saved
+references. See **Features/Appearances → Asset Presentations** in Storybook for
+above/below captions, image-border connections, switching, and edge labels.
+
 ## Storybook
 
 ```bash
 pnpm --filter @statelyai/flow-react storybook
 ```
+
+<!-- connection selector measurement from ../flow-dom/src/appearance-bounds.ts and src/useAppearanceMeasurement.ts -->
+
+Appearance definitions can choose the measured border without requiring a reserved
+attribute in custom content:
+
+```ts
+engine: {
+  appearances: {
+    definitions: {
+      asset: {
+        sizing: 'content',
+        connection: {
+          bounds: { selector: '[data-asset-body]' },
+          sides: ['left', 'right', 'bottom'],
+        },
+      },
+    },
+    defaults: { node: { name: 'asset' } },
+  },
+}
+```
+
+Render one descendant with `data-asset-body`. Full visual bounds still include
+captions. Connection bounds track subtree changes and resizing; selectors that
+match zero or multiple descendants use visual bounds. Existing
+`data-flow-connection-bounds` renderers continue to work without configuration.

package/dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 import { Background, BackgroundProps, BackgroundVariant, CrossBackground, DotsBackground, LinesBackground } from "./backgrounds.js";
 import { FlowView, ResolvedFlowColorMode } from "@statelyai/flow-dom";
-import { ActiveGraphProjection, AnchorSpec, ConnectionEndedEvent, ConnectionState, CreateEdgeInput, CreateFlowOptions, EdgePathData, FitViewExclusionSide, FlowColorMode, FlowCommitEvent, FlowConnection, FlowController, FlowEdge, FlowGraph, FlowInputMode, FlowKeymap, FlowNode, FlowProfile, FlowStoreContext, GraphEdgeAttrs, GraphNodeAttrs, LayoutRequestedEvent, Point, Rect, Viewport, VisualPort } from "@statelyai/flow";
+import { ActiveGraphProjection, AnchorSpec, ConnectionEndedEvent, ConnectionState, CreateEdgeInput, CreateFlowOptions, EdgePathData, FitViewExclusionSide, FlowColorMode, FlowCommitEvent, FlowConnection, FlowController, FlowEdge, FlowGraph, FlowInputMode, FlowKeymap, FlowNode, FlowProfile, FlowStoreContext, GraphEdgeAttrs, GraphNodeAttrs, LayoutRequestedEvent, Point, Rect, ResolvedFlowAppearance, Viewport, VisualPort } from "@statelyai/flow";
 import { CSSProperties, ComponentPropsWithoutRef, HTMLAttributes, ReactNode, Ref, RefCallback, RefObject } from "react";
 export * from "@statelyai/flow-dom";
 //#region src/createFlowInstance.d.ts
@@ -167,6 +167,7 @@ type ReactGraphNodeAttrs = GraphNodeAttrs<CSSProperties, ReactNode>;
 type ReactGraphEdgeAttrs = GraphEdgeAttrs<CSSProperties, ReactNode>;
 type ReactActiveGraphProjection = ActiveGraphProjection<any, any, CSSProperties, ReactNode>;
 type RenderNodeProps<TNodeData = unknown> = {
+  appearance?: ResolvedFlowAppearance;
   flow: FlowInstance<TNodeData>;
   node: FlowNode<TNodeData>;
   bounds: Rect;
@@ -194,6 +195,7 @@ type RenderEdgeProps<TEdgeData = unknown> = {
 type RenderEdgeLabelProps<TEdgeData = unknown> = RenderEdgeProps<TEdgeData> & {
   bounds: Rect;
   dragging: boolean;
+  appearance?: ResolvedFlowAppearance;
 };
 type RenderConnectionLineProps = {
   connection: ConnectionState;
@@ -207,7 +209,13 @@ type StatelyFlowRootProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "
   style?: StatelyFlowStyle;
   [dataAttribute: `data-${string}`]: string | number | boolean | null | undefined;
 };
+type ReactAppearanceRenderers<TNodeData = unknown, TEdgeData = unknown> = Record<string, {
+  renderNode?: (props: RenderNodeProps<TNodeData>) => ReactNode;
+  renderEdgeLabel?: (props: RenderEdgeLabelProps<TEdgeData>) => ReactNode;
+}>;
 type StatelyFlowBaseProps<TNodeData = unknown, TEdgeData = unknown> = {
+  /** Reusable renderers keyed by the core-resolved renderer name. */
+  appearanceRenderers?: ReactAppearanceRenderers<TNodeData, TEdgeData>;
   settings?: FlowInstanceSettings<TNodeData, TEdgeData>;
   listeners?: FlowStoreListener[];
   events?: FlowEventListeners;
@@ -433,7 +441,7 @@ type PortProps = {
  * observe results via `flow.on("connectionEnded", …)` or the store's
  * `connection` state.
  */
-declare function Port(props: PortProps): import("react").JSX.Element;
+declare function Port(props: PortProps): import("react").JSX.Element | null;
 //#endregion
 //#region src/DragHandle.d.ts
 type DragHandleProps = HTMLAttributes<HTMLDivElement> & {
@@ -497,4 +505,4 @@ declare function useFlowColorMode(): {
 };
 declare function useApplyFlowColorMode(element: HTMLElement | null): void;
 //#endregion
-export { Background, type BackgroundProps, type BackgroundVariant, Controls, type ControlsProps, type CreateFlowInstanceOptions, CrossBackground, DotsBackground, DragHandle, type DragHandleProps, EntityAnchor, type EntityAnchorAlign, type EntityAnchorPoint, type EntityAnchorProps, type EntityAnchorSide, FLOW_BASE_CSS, FLOW_BASE_STYLES_ID, FlowColorModeScope, type FlowColorModeScopeProps, type FlowEdgeBinding, type FlowEventListeners, type FlowInstance, FlowInstanceProvider, type FlowInstanceSettings, type FlowNodeBinding, type FlowPortBinding, type FlowSelector, type FlowSelectorEquality, type FlowStoreListener, FlowToolbar, type FlowToolbarProps, type FlowToolbarState, LinesBackground, MiniMap, type MiniMapProps, PanePortal, Panel, type PanelPosition, type PanelProps, Port, type PortProps, type ReactActiveGraphProjection, type ReactGraphEdgeAttrs, type ReactGraphNodeAttrs, type RenderConnectionLineProps, type RenderEdgeLabelProps, type RenderEdgeProps, type RenderNodeProps, StatelyFlow, type StatelyFlowProps, type StatelyFlowRootProps, type StatelyFlowStyle, type UseCreateFlowInstanceOptions, type UseFitViewExclusionOptions, type UseFlowInputOptions, type UseFlowOptions, type UseFlowToolbarOptions, ViewportPortal, createFlowInstance, useApplyFlowColorMode, useConnection, useCreateFlowInstance, useFitViewExclusion, useFlow, useFlowBaseStyles, useFlowColorMode, useFlowConnections, useFlowContext, useFlowEdge, useFlowEntity, useFlowInput, useFlowInstance, useFlowMeasurement, useFlowNode, useFlowPort, useFlowSelector, useFlowToolbar, useFlowValue, useFlowView, useFlowViewport, useKeyPress, useMeasuredSize, useNodesInitialized, useOptionalFlowInstance };
+export { Background, type BackgroundProps, type BackgroundVariant, Controls, type ControlsProps, type CreateFlowInstanceOptions, CrossBackground, DotsBackground, DragHandle, type DragHandleProps, EntityAnchor, type EntityAnchorAlign, type EntityAnchorPoint, type EntityAnchorProps, type EntityAnchorSide, FLOW_BASE_CSS, FLOW_BASE_STYLES_ID, FlowColorModeScope, type FlowColorModeScopeProps, type FlowEdgeBinding, type FlowEventListeners, type FlowInstance, FlowInstanceProvider, type FlowInstanceSettings, type FlowNodeBinding, type FlowPortBinding, type FlowSelector, type FlowSelectorEquality, type FlowStoreListener, FlowToolbar, type FlowToolbarProps, type FlowToolbarState, LinesBackground, MiniMap, type MiniMapProps, PanePortal, Panel, type PanelPosition, type PanelProps, Port, type PortProps, type ReactActiveGraphProjection, type ReactAppearanceRenderers, type ReactGraphEdgeAttrs, type ReactGraphNodeAttrs, type RenderConnectionLineProps, type RenderEdgeLabelProps, type RenderEdgeProps, type RenderNodeProps, StatelyFlow, type StatelyFlowProps, type StatelyFlowRootProps, type StatelyFlowStyle, type UseCreateFlowInstanceOptions, type UseFitViewExclusionOptions, type UseFlowInputOptions, type UseFlowOptions, type UseFlowToolbarOptions, ViewportPortal, createFlowInstance, useApplyFlowColorMode, useConnection, useCreateFlowInstance, useFitViewExclusion, useFlow, useFlowBaseStyles, useFlowColorMode, useFlowConnections, useFlowContext, useFlowEdge, useFlowEntity, useFlowInput, useFlowInstance, useFlowMeasurement, useFlowNode, useFlowPort, useFlowSelector, useFlowToolbar, useFlowValue, useFlowView, useFlowViewport, useKeyPress, useMeasuredSize, useNodesInitialized, useOptionalFlowInstance };

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { a as FlowInstanceProvider, i as LinesBackground, n as CrossBackground, o as useFlowInstance, r as DotsBackground, s as useOptionalFlowInstance, t as Background } from "./backgrounds2.js";
-import { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, clientToCanvas, computeRenderableIds, createEntityGeometryObserver, createFlowView, createMeasurementObserver, nodePositionStyle, renderableIdsEqual, resolveFlowColorMode, viewportStyle } from "@statelyai/flow-dom";
-import { CONNECTION_PREVIEW_EDGE_ID, areNodesMeasured, createConnectionPreviewGraph, createEntityChangeNotifier, createFlow, createFlowInputRuntime, getAnchorTransform, getAutoPanDelta, getMinimapProjection, getMinimapViewportCenter, getProjectedEdgeAttrs, getProjectedNodeAttrs, getToolbarPlacement, getVisibleBounds, markerToSVG, pathToSVG, profileModesForContext, profilePoliciesForContext, viewportCenteredOn } from "@statelyai/flow";
+import { applyFlowColorMode, attachContainer, attachInput, attachViewportTransform, clientToCanvas, computeRenderableIds, createEntityGeometryObserver, createFlowView, createMeasurementObserver, nodePositionStyle, observeAppearanceBounds, renderableIdsEqual, resolveFlowColorMode, viewportStyle } from "@statelyai/flow-dom";
+import { CONNECTION_PREVIEW_EDGE_ID, appearanceMeasurementId, areNodesMeasured, createConnectionPreviewGraph, createEntityChangeNotifier, createFlow, createFlowInputRuntime, getAnchorTransform, getAutoPanDelta, getMinimapProjection, getMinimapViewportCenter, getProjectedEdgeAttrs, getProjectedNodeAttrs, getToolbarPlacement, getVisibleBounds, markerToSVG, pathToSVG, profileModesForContext, profilePoliciesForContext, viewportCenteredOn } from "@statelyai/flow";
 import { Fragment, createContext, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
@@ -372,6 +372,27 @@ function useFlowView() {
 	return view;
 }
 //#endregion
+//#region src/useAppearanceMeasurement.ts
+function useAppearanceMeasurement(ref, id, appearance, observer) {
+	const flow = useFlowInstance();
+	const key = appearance ? appearanceMeasurementId(id, appearance) : void 0;
+	useLayoutEffect(() => () => {
+		if (key && flow.getSnapshot().measurements.has(key)) flow.internals.store.trigger.removeMeasurements({ ids: [key] });
+	}, [flow, key]);
+	useLayoutEffect(() => {
+		const wrapper = ref.current;
+		if (!wrapper || !key || !appearance?.registered) return;
+		return observeAppearanceBounds(flow.internals.store, wrapper, key, observer, { selector: appearance.connectionSelector });
+	}, [
+		flow,
+		ref,
+		key,
+		observer,
+		appearance?.registered,
+		appearance?.connectionSelector
+	]);
+}
+//#endregion
 //#region src/baseStyles.ts
 /**
 * Minimal base stylesheet for the flow canvas. Intentionally tiny and
@@ -718,6 +739,7 @@ function StatelyFlowView(props) {
 									}),
 									/* @__PURE__ */ jsx(NodeLayer, {
 										geometryObserver,
+										appearanceRenderers: props.appearanceRenderers,
 										renderNode: props.renderNode,
 										projections,
 										onlyRenderVisible: props.onlyRenderVisible
@@ -725,6 +747,7 @@ function StatelyFlowView(props) {
 									/* @__PURE__ */ jsx(SnapLinesLayer, {}),
 									/* @__PURE__ */ jsx(EdgeLabelLayer, {
 										geometryObserver,
+										appearanceRenderers: props.appearanceRenderers,
 										renderEdgeLabel: props.renderEdgeLabel,
 										projections,
 										onlyRenderVisible: props.onlyRenderVisible
@@ -994,6 +1017,7 @@ const EdgeView = memo(function EdgeView(props) {
 	const ref = useRef(null);
 	const { graph, edge, pathData, selected, focused, hovered, highlights } = useFlowEntity(props.id, (context) => ({
 		graph: context.graph,
+		configRevision: context.configRevision,
 		edge: props.flow.getEdge(props.id) ?? null,
 		pathData: props.flow.getAllEdgePaths().get(props.id) ?? null,
 		geometryActive: context.canvasState === "dragging" || context.canvasState === "resizing" || context.layoutAnimation.status === "running",
@@ -1002,7 +1026,7 @@ const EdgeView = memo(function EdgeView(props) {
 		hovered: context.hoveredEntityIds.has(props.id),
 		highlights: props.flow.internals.engine.getHighlights(props.id)
 	}), { isEqual: (a, b) => {
-		if (!(a.selected === b.selected && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
+		if (!(a.configRevision === b.configRevision && a.selected === b.selected && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
 		if (a.geometryActive !== b.geometryActive) return b.geometryActive ? edgeRenderContentEqual(a.edge, b.edge) : false;
 		if (a.geometryActive) return edgeRenderContentEqual(a.edge, b.edge);
 		return a.graph === b.graph && a.edge === b.edge && a.pathData === b.pathData;
@@ -1266,6 +1290,7 @@ function EdgeLabelLayer(props) {
 				geometryObserver: props.geometryObserver,
 				id,
 				projections: props.projections,
+				appearanceRenderers: props.appearanceRenderers,
 				renderEdgeLabel
 			}, id);
 		})
@@ -1274,6 +1299,7 @@ function EdgeLabelLayer(props) {
 const EdgeLabelItem = memo(function EdgeLabelItem(props) {
 	const { graph, edge, pathData, selected, dragging, hovered, highlights } = useFlowEntity(props.id, (context) => ({
 		graph: context.graph,
+		configRevision: context.configRevision,
 		edge: props.flow.getEdge(props.id) ?? null,
 		pathData: props.flow.getAllEdgePaths().get(props.id) ?? null,
 		geometryActive: context.canvasState === "dragging" || context.canvasState === "resizing" || context.layoutAnimation.status === "running",
@@ -1282,7 +1308,7 @@ const EdgeLabelItem = memo(function EdgeLabelItem(props) {
 		hovered: context.hoveredEntityIds.has(props.id),
 		highlights: props.flow.internals.engine.getHighlights(props.id)
 	}), { isEqual: (a, b) => {
-		if (!(a.selected === b.selected && a.dragging === b.dragging && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
+		if (!(a.configRevision === b.configRevision && a.selected === b.selected && a.dragging === b.dragging && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
 		if (a.geometryActive !== b.geometryActive) return b.geometryActive ? edgeRenderContentEqual(a.edge, b.edge) : false;
 		if (a.geometryActive) return edgeRenderContentEqual(a.edge, b.edge);
 		return a.graph === b.graph && a.edge === b.edge && a.pathData === b.pathData;
@@ -1307,12 +1333,16 @@ const EdgeLabelItem = memo(function EdgeLabelItem(props) {
 		hovered,
 		highlights,
 		projections: props.projections,
+		appearanceRenderers: props.appearanceRenderers,
 		renderEdgeLabel: props.renderEdgeLabel
 	});
 });
 function EdgeLabelView(props) {
 	const ref = useRef(null);
 	const observer = useMeasurementObserver();
+	const appearance = props.edge.label ? props.flow.internals.engine.resolveAppearance(props.edge.label) : void 0;
+	const renderEdgeLabel = appearance?.renderer && props.appearanceRenderers?.[appearance.renderer]?.renderEdgeLabel || props.renderEdgeLabel;
+	useAppearanceMeasurement(ref, props.edge.id, appearance, observer);
 	useLayoutEffect(() => {
 		const element = ref.current;
 		if (!element) return;
@@ -1324,7 +1354,7 @@ function EdgeLabelView(props) {
 		if (!element) return;
 		return props.geometryObserver.observeRect(element, {
 			id: props.edge.id,
-			autoSize: props.edge.label?.autoSize,
+			autoSize: appearance?.autoSize,
 			getRect: () => {
 				const pathData = props.flow.getAllEdgePaths().get(props.edge.id);
 				if (!pathData) return null;
@@ -1340,14 +1370,15 @@ function EdgeLabelView(props) {
 		});
 	}, [
 		props.edge.id,
-		props.edge.label?.autoSize,
+		appearance?.autoSize,
 		props.flow,
 		props.geometryObserver,
 		props.projections
 	]);
 	const text = (props.edge.label?.data)?.text;
 	const label = props.attrs.label ?? String(text ?? props.edge.id);
-	const customLabel = props.renderEdgeLabel?.({
+	const customLabel = renderEdgeLabel?.({
+		appearance,
 		flow: props.flow,
 		edge: props.edge,
 		pathData: props.pathData,
@@ -1358,7 +1389,7 @@ function EdgeLabelView(props) {
 		hovered: props.hovered,
 		highlights: props.highlights
 	});
-	const defaultStyle = props.renderEdgeLabel ? void 0 : {
+	const defaultStyle = renderEdgeLabel ? void 0 : {
 		padding: "4px 8px",
 		border: `1px solid ${props.selected ? "#2563eb" : props.attrs.color ?? "#cbd5e1"}`,
 		borderRadius: 999,
@@ -1373,6 +1404,7 @@ function EdgeLabelView(props) {
 		ref,
 		"data-entity-id": props.edge.id,
 		"data-flow-edge-label": "",
+		"data-flow-appearance": appearance?.registered ? appearance.reference?.name : void 0,
 		"data-flow-selected": props.selected ? "true" : void 0,
 		"data-flow-dragging": props.dragging ? "true" : void 0,
 		className: classNames$1("stately-flow__edge-label", props.attrs.className),
@@ -1381,8 +1413,8 @@ function EdgeLabelView(props) {
 			left: 0,
 			top: 0,
 			transform: `translate(${props.bounds.x}px, ${props.bounds.y}px)`,
-			width: props.edge.label?.autoSize ? void 0 : props.bounds.width,
-			height: props.edge.label?.autoSize ? void 0 : props.bounds.height,
+			width: appearance?.autoSize ? void 0 : props.bounds.width,
+			height: appearance?.autoSize ? void 0 : props.bounds.height,
 			boxSizing: "border-box",
 			...defaultStyle,
 			pointerEvents: "auto",
@@ -1390,7 +1422,7 @@ function EdgeLabelView(props) {
 			opacity: props.attrs.opacity,
 			...props.attrs.style
 		},
-		children: props.renderEdgeLabel ? customLabel : label
+		children: renderEdgeLabel ? customLabel : label
 	});
 }
 function projectedEdgeLabelBounds(pathData, label) {
@@ -1439,6 +1471,7 @@ function NodeLayer(props) {
 				zIndex,
 				observer,
 				projections: props.projections,
+				appearanceRenderers: props.appearanceRenderers,
 				renderNode: props.renderNode
 			}, id);
 		})
@@ -1483,6 +1516,7 @@ const NodeView = memo(function NodeView(props) {
 		const current = props.flow.getNode(props.id) ?? null;
 		return {
 			graph: context.graph,
+			configRevision: context.configRevision,
 			node: current,
 			geometryActive: context.canvasState === "dragging" || context.canvasState === "resizing" || context.layoutAnimation.status === "running",
 			hidden: !current || props.flow.internals.engine.resolveEntityConfig(current).hidden,
@@ -1494,12 +1528,15 @@ const NodeView = memo(function NodeView(props) {
 			bounds: context.resizingEntityId === props.id && context.resizeCorners ? props.flow.internals.engine.getResizeBounds() ?? props.flow.internals.engine.visualBounds(props.id) : props.flow.internals.engine.visualBounds(props.id)
 		};
 	}, { isEqual: (a, b) => {
-		if (!(a.hidden === b.hidden && a.selected === b.selected && a.dragging === b.dragging && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
+		if (!(a.configRevision === b.configRevision && a.hidden === b.hidden && a.selected === b.selected && a.dragging === b.dragging && a.focused === b.focused && a.hovered === b.hovered && a.highlights === b.highlights)) return false;
 		if (a.geometryActive !== b.geometryActive) return b.geometryActive ? nodeRenderContentEqual(a.node, b.node) : false;
 		if (a.geometryActive) return nodeRenderContentEqual(a.node, b.node);
 		return a.graph === b.graph && a.node === b.node && rectsShallowEqual(a.bounds, b.bounds);
 	} });
-	const contentOwnsSize = Boolean(node?.autoSize && node.style?.customWidth === void 0 && node.style?.customHeight === void 0);
+	const appearance = node ? props.flow.internals.engine.resolveAppearance(node) : void 0;
+	useAppearanceMeasurement(ref, props.id, appearance, props.observer);
+	const renderNode = appearance?.renderer && props.appearanceRenderers?.[appearance.renderer]?.renderNode || props.renderNode;
+	const contentOwnsSize = Boolean(node && props.flow.internals.engine.resolveAppearance(node).autoSize && node.style?.customWidth === void 0 && node.style?.customHeight === void 0);
 	useLayoutEffect(() => {
 		const element = ref.current;
 		if (!element) return;
@@ -1546,6 +1583,7 @@ const NodeView = memo(function NodeView(props) {
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
+			"data-flow-appearance": appearance?.registered ? appearance.reference?.name : void 0,
 			"data-entity-id": props.id,
 			"data-flow-selected": selected ? "true" : void 0,
 			"data-flow-focused": focused ? "true" : void 0,
@@ -1571,13 +1609,14 @@ const NodeView = memo(function NodeView(props) {
 				zIndex: props.zIndex,
 				opacity: attrs.opacity
 			},
-			children: props.renderNode ? /* @__PURE__ */ jsx("div", {
+			children: renderNode ? /* @__PURE__ */ jsx("div", {
 				"data-flow-custom-node": true,
 				style: {
 					display: "contents",
 					pointerEvents: "none"
 				},
-				children: props.renderNode({
+				children: renderNode({
+					appearance,
 					flow: props.flow,
 					node,
 					bounds,
@@ -2298,6 +2337,7 @@ function Port(props) {
 	const observer = useMeasurementObserver();
 	const measured = props.measured ?? true;
 	const interaction = props.interaction ?? "connect";
+	const permitted = interaction !== "connect" || !flow.internals.engine.resolveAppearance(node).registered || flow.internals.engine.isPortAllowed(node, props.name);
 	const port = node.ports?.find((candidate) => candidate.name === props.name);
 	const portId = `${node.id}:${props.name}`;
 	const focusable = flow.internals.engine.resolveEntityConfig(node).focusable;
@@ -2318,7 +2358,8 @@ function Port(props) {
 		observer,
 		node.id,
 		props.name,
-		measured
+		measured,
+		permitted
 	]);
 	useLayoutEffect(() => {
 		const element = ref.current;
@@ -2332,6 +2373,7 @@ function Port(props) {
 		if (connection.targetId !== node.id || connection.targetPort !== props.name) return null;
 		return connection.isValid === false ? "invalid" : "valid";
 	}, { flow });
+	if (!permitted) return null;
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: props.className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-react",
-  "version": "0.9.6",
+  "version": "0.10.0",
   "description": "Thin React adapter for @statelyai/flow with core and DOM re-exports.",
   "type": "module",
   "sideEffects": false,
@@ -34,8 +34,8 @@
   "license": "MIT",
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@statelyai/flow": "0.11.0",
-    "@statelyai/flow-dom": "3.4.6"
+    "@statelyai/flow": "0.12.0",
+    "@statelyai/flow-dom": "3.5.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",