@statelyai/flow-react 0.9.5 → 0.9.6

package/README.md

@@ -17,7 +17,7 @@ The React package owns React lifecycle, context, selector subscriptions, and a c
 
 <!-- transient entity rendering split between src/StatelyFlow.tsx and flow-dom src/entity-geometry.ts -->
 
-Optimization is part of the architecture, not a later cleanup pass. Components subscribe only to durable content and interaction state. During drag and animated layout sessions, `@statelyai/flow-dom` batches node rectangles, edge paths, endpoint handles, label positions, and multi-selection bounds into imperative animation-frame writes, so React commits only at transient-session boundaries. Default edge paths expose `data-flow-edge-segment`; custom edge renderers can use the same indexed attribute to join the imperative path updates. Router-provided `PathData.svgPath` geometry is honored by both initial React rendering and those imperative updates.
+Optimization is part of the architecture, not a later cleanup pass. Components subscribe only to durable content and interaction state. During drag and animated layout sessions, `@statelyai/flow-dom` batches node rectangles, default group child-area and header rectangles, edge paths, endpoint handles, label positions, and multi-selection bounds into imperative animation-frame writes, so React commits only at transient-session boundaries. Default group headers keep projected styles on a separate element from imperative geometry, preserving projected transforms during drag. Default edge paths expose `data-flow-edge-segment`; custom edge renderers can use the same indexed attribute to join the imperative path updates. Existing custom paths whose `d` exactly matches a routed segment are also bound automatically, including duplicate hit strokes; unrelated decoration paths are left alone. Router-provided `PathData.svgPath` geometry is honored by both initial React rendering and those imperative updates.
 
 The graph data structure is the source of truth for graph content, not for transient UI state. Core node and edge data should not grow flags like `selected: true` or `dragging: true`; selection, focus, dragging, hover, connection state, and similar interaction state live in the flow store and are derived into render props such as `selected` or `dragging`.
 

package/dist/esm/index.js

@@ -1588,6 +1588,7 @@ const NodeView = memo(function NodeView(props) {
 					highlights
 				})
 			}) : node.group ? /* @__PURE__ */ jsx(DefaultGroupNode, {
+				geometryObserver: props.geometryObserver,
 				flow: props.flow,
 				node,
 				bounds,
@@ -1615,51 +1616,92 @@ const NodeView = memo(function NodeView(props) {
 * `engine.getGroupGeometry`; custom renderers can do the same.
 */
 function DefaultGroupNode(props) {
+	const childAreaRef = useRef(null);
+	const contentRef = useRef(null);
+	useLayoutEffect(() => {
+		const observePart = (element, part) => {
+			if (!element) return () => {};
+			return props.geometryObserver.observeRect(element, {
+				id: props.node.id,
+				getRect: () => {
+					const geometry = props.flow.internals.engine.getGroupGeometry(props.node.id);
+					const bounds = props.flow.internals.engine.visualBounds(props.node.id);
+					if (!geometry || !bounds) return null;
+					return {
+						...geometry[part],
+						x: geometry[part].x - bounds.x,
+						y: geometry[part].y - bounds.y
+					};
+				}
+			});
+		};
+		const stopChildArea = observePart(childAreaRef.current, "childArea");
+		const stopContent = observePart(contentRef.current, "contentBounds");
+		return () => {
+			stopChildArea();
+			stopContent();
+		};
+	}, [
+		props.flow,
+		props.geometryObserver,
+		props.node.id
+	]);
 	const geometry = props.flow.internals.engine.getGroupGeometry(props.node.id);
 	const label = props.node.data?.label;
 	const badges = decorationsToArray(props.attrs.badge);
 	const title = decorationTitle(props.attrs.tooltip);
 	if (!geometry) return /* @__PURE__ */ jsx(DefaultNode, { ...props });
 	const relative = (rect) => ({
-		left: rect.x - props.bounds.x,
-		top: rect.y - props.bounds.y,
+		left: 0,
+		top: 0,
+		transform: `translate(${rect.x - props.bounds.x}px, ${rect.y - props.bounds.y}px)`,
 		width: rect.width,
 		height: rect.height
 	});
 	const dropTarget = props.highlights.some((entry) => entry.kind === "drop-target");
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { style: {
-		position: "absolute",
-		...relative(geometry.childArea),
-		boxSizing: "border-box",
-		border: `2px dashed ${dropTarget ? "#16a34a" : props.selected ? "#93c5fd" : props.attrs.color ?? "#cbd5e1"}`,
-		...dropTarget ? { background: "rgba(22, 163, 74, 0.08)" } : null,
-		borderRadius: 10,
-		background: "rgba(148, 163, 184, 0.07)",
-		pointerEvents: "none"
-	} }), /* @__PURE__ */ jsxs("div", {
-		"data-flow-drag-handle": true,
-		title,
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: childAreaRef,
 		style: {
 			position: "absolute",
-			...relative(geometry.contentBounds),
+			...relative(geometry.childArea),
 			boxSizing: "border-box",
-			display: "flex",
-			alignItems: "center",
-			padding: "0 12px",
-			border: `2px solid ${props.selected ? "#2563eb" : props.attrs.color ?? "#94a3b8"}`,
-			borderRadius: 8,
-			background: props.selected ? "#eff6ff" : "#f8fafc",
-			color: "#0f172a",
-			font: "600 13px/1.2 system-ui, sans-serif",
-			cursor: props.dragging ? "grabbing" : "grab",
-			pointerEvents: "auto",
-			userSelect: "none",
-			...props.attrs.style
+			border: `2px dashed ${dropTarget ? "#16a34a" : props.selected ? "#93c5fd" : props.attrs.color ?? "#cbd5e1"}`,
+			...dropTarget ? { background: "rgba(22, 163, 74, 0.08)" } : null,
+			borderRadius: 10,
+			background: "rgba(148, 163, 184, 0.07)",
+			pointerEvents: "none"
+		}
+	}), /* @__PURE__ */ jsx("div", {
+		ref: contentRef,
+		style: {
+			position: "absolute",
+			...relative(geometry.contentBounds)
 		},
-		children: [/* @__PURE__ */ jsx("span", { children: String(label ?? props.node.id) }), badges.length ? /* @__PURE__ */ jsx("span", {
-			style: defaultBadgeListStyle,
-			children: badges
-		}) : null]
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-flow-drag-handle": true,
+			title,
+			style: {
+				width: "100%",
+				height: "100%",
+				boxSizing: "border-box",
+				display: "flex",
+				alignItems: "center",
+				padding: "0 12px",
+				border: `2px solid ${props.selected ? "#2563eb" : props.attrs.color ?? "#94a3b8"}`,
+				borderRadius: 8,
+				background: props.selected ? "#eff6ff" : "#f8fafc",
+				color: "#0f172a",
+				font: "600 13px/1.2 system-ui, sans-serif",
+				cursor: props.dragging ? "grabbing" : "grab",
+				pointerEvents: "auto",
+				userSelect: "none",
+				...props.attrs.style
+			},
+			children: [/* @__PURE__ */ jsx("span", { children: String(label ?? props.node.id) }), badges.length ? /* @__PURE__ */ jsx("span", {
+				style: defaultBadgeListStyle,
+				children: badges
+			}) : null]
+		})
 	})] });
 }
 function DefaultNode(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/flow-react",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "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.10.0",
-    "@statelyai/flow-dom": "3.4.5"
+    "@statelyai/flow": "0.11.0",
+    "@statelyai/flow-dom": "3.4.6"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -45,6 +45,7 @@
     "@dagrejs/dagre": "^3.0.0",
     "@playwright/test": "^1.60.0",
     "@statelyai/graph": "^2.1.0",
+    "@statelyai/layout": "^0.0.5",
     "@storybook/addon-docs": "^10.1.2",
     "@storybook/react-vite": "^10.1.2",
     "@testing-library/react": "^16.1.0",