@principal-ai/subsystems-react 0.43.2 → 0.44.0

package/src/stories/Subsystem/ComponentGraph/AnimatedProgression.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useEffect, useMemo, useState } from 'react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
+import {
+  SubsystemModelTransition,
+  type SubsystemTransitionStep,
+} from '../../../subsystem/SubsystemModelTransition';
+import type { SubsystemComponent, SubsystemWalkthrough } from '../../../subsystem/model';
+
+/**
+ * Harness for `SubsystemModelTransition` — the same progression cases
+ * (constructs → static → dynamic → walkthrough) animated between, with a nav.
+ */
+
+const meta = {
+  title: 'Subsystem/ComponentGraph/Animated progression',
+  component: SubsystemComponentGraph,
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof SubsystemComponentGraph>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PURL = 'pkg:github/you/scheduling-app';
+
+const components: SubsystemComponent[] = [
+  { alias: 'booking-page', name: 'BookingPage', construct: 'function', symbol: 'BookingPage', role: 'entry', framework: 'react', stereotype: 'component', purl: PURL, file: 'app/book/page.tsx', module: 'app/book/page.tsx', process: 'booking-web/client' },
+  { alias: 'list-open-slots', name: 'listOpenSlots', construct: 'function', symbol: 'listOpenSlots', role: 'entry', framework: 'next', stereotype: 'server-action', purl: PURL, file: 'app/book/actions.ts', module: 'app/book/actions.ts', process: 'booking-web/server' },
+  { alias: 'book-slot', name: 'bookSlot', construct: 'function', symbol: 'bookSlot', role: 'entry', framework: 'next', stereotype: 'server-action', purl: PURL, file: 'app/book/actions.ts', module: 'app/book/actions.ts', process: 'booking-web/server' },
+  { alias: 'list-slots', name: 'listSlots', construct: 'function', symbol: 'listSlots', purl: PURL, file: 'lib/listSlots.ts', module: 'lib/listSlots.ts', process: 'booking-web/server' },
+  { alias: 'create-booking', name: 'createBooking', construct: 'function', symbol: 'createBooking', purl: PURL, file: 'lib/createBooking.ts', module: 'lib/createBooking.ts', process: 'booking-web/server' },
+  { alias: 'capture-event', name: 'captureEvent', construct: 'function', symbol: 'captureEvent', purl: PURL, file: 'lib/captureEvent.ts', module: 'lib/captureEvent.ts', process: 'booking-web/client' },
+  { alias: 'Database', name: 'Database', construct: 'external', role: 'service', purl: 'external', file: '' },
+];
+
+const walkthroughs: SubsystemWalkthrough[] = [
+  {
+    id: 'wt-book',
+    title: 'Guest books',
+    steps: [
+      { from: 'booking-page', to: 'book-slot', mechanism: 'calls', file: 'app/book/page.tsx', line: 24, purl: PURL, symbol: 'bookSlot' },
+      { from: 'book-slot', to: 'create-booking', mechanism: 'calls', file: 'app/book/actions.ts', line: 22, purl: PURL, symbol: 'createBooking' },
+      { from: 'create-booking', to: 'Database', mechanism: 'writes', file: 'lib/createBooking.ts', line: 13, purl: PURL, symbol: 'insert' },
+      { from: 'booking-page', to: 'capture-event', mechanism: 'calls', file: 'app/book/page.tsx', line: 26, purl: PURL, symbol: 'captureEvent' },
+    ],
+  },
+  {
+    id: 'wt-pick',
+    title: 'Guest picks a slot',
+    steps: [
+      { from: 'booking-page', to: 'list-open-slots', mechanism: 'calls', file: 'app/book/page.tsx', line: 17, purl: PURL, symbol: 'listOpenSlots' },
+      { from: 'list-open-slots', to: 'list-slots', mechanism: 'calls', file: 'app/book/actions.ts', line: 14, purl: PURL, symbol: 'listSlots' },
+      { from: 'list-slots', to: 'Database', mechanism: 'reads', file: 'lib/listSlots.ts', line: 9, purl: PURL, symbol: 'findOpen' },
+    ],
+  },
+];
+
+const LABELS = ['Constructs', 'Static topology', 'Dynamic topology', 'Walkthrough'];
+
+const STEPS: SubsystemTransitionStep[] = [
+  {
+    model: { title: 'Booking', components: components.map(({ module: _m, process: _p, ...rest }) => rest) },
+  },
+  {
+    model: { title: 'Booking', components: components.map(({ process: _p, ...rest }) => rest) },
+    moduleNesting: 'path',
+  },
+  {
+    model: { title: 'Booking', components, walkthroughs },
+    moduleNesting: 'path',
+  },
+  {
+    model: { title: 'Booking', components, walkthroughs },
+    moduleNesting: 'path',
+  },
+];
+
+function Harness() {
+  const [active, setActive] = useState(0);
+  const steps = useMemo(() => STEPS, []);
+
+  useEffect(() => {
+    const t = window.setInterval(() => setActive((i) => (i + 1) % STEPS.length), 3600);
+    return () => window.clearInterval(t);
+  }, []);
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100vh', background: defaultEditorTheme.colors.background }}>
+      <SubsystemModelTransition steps={steps} activeIndex={active} />
+      <div style={{ position: 'absolute', top: 12, left: 12, display: 'flex', gap: 8, zIndex: 10 }}>
+        {LABELS.map((label, i) => (
+          <button
+            key={label}
+            onClick={() => setActive(i)}
+            style={{
+              padding: '6px 12px',
+              borderRadius: 6,
+              border: `1px solid ${i === active ? defaultEditorTheme.colors.primary : '#555'}`,
+              background: i === active ? defaultEditorTheme.colors.primary : 'transparent',
+              color: i === active ? '#fff' : defaultEditorTheme.colors.text,
+              cursor: 'pointer',
+              font: '600 12px system-ui',
+            }}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const Cases: Story = {
+  render: () => (
+    <ThemeProvider theme={defaultEditorTheme}>
+      <Harness />
+    </ThemeProvider>
+  ),
+};

package/src/subsystem/SubsystemModelTransition.tsx

@@ -0,0 +1,389 @@
+/**
+ * SubsystemModelTransition — a sibling of `SubsystemComponentGraph` that
+ * presents ONE subsystem as a sequence of steps (e.g. constructs → static
+ * topology → dynamic topology → walkthrough) and animates between them.
+ *
+ * Same look as the component graph: it reuses the same node / frame / edge
+ * components and the edge-label chrome, so only the motion is new. Each step is
+ * laid out with `buildSubsystemGraph`; nodes and frames are flattened to
+ * absolute rects and position + size + opacity are interpolated on a rAF tween.
+ * The viewport refits to the incoming layout at the start of a transition, and
+ * the graph's real (ELK-routed, mechanism-colored) edges appear once it settles.
+ */
+
+import { useEffect, useMemo, useRef, useState, type ComponentType, type CSSProperties } from 'react';
+import {
+  Background,
+  EdgeLabelRenderer,
+  ReactFlow,
+  ReactFlowProvider,
+  useReactFlow,
+  type Edge,
+  type EdgeProps,
+  type EdgeTypes,
+  type Node,
+  type NodeTypes,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useTheme } from '@principal-ade/industry-theme';
+import {
+  buildSubsystemGraph,
+  edgeColor,
+  MECHANISM_DESCRIPTIONS,
+  type SubsystemEdgeProvenance,
+  type SubsystemGraphNode,
+  type SubsystemModelDocument,
+} from './model';
+import {
+  hexWithAlpha,
+  SubsystemCallbacksProvider,
+  SubsystemComponentNode,
+  SubsystemEdge,
+  SubsystemGroupNode,
+} from './nodes';
+import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome } from './graphChrome';
+import {
+  EDGE_LABEL_CLOUD_EXTRA_TOP,
+  EDGE_LABEL_CLOUD_PATH,
+  EDGE_LABEL_FONT_SIZE,
+  EDGE_LABEL_HEIGHT,
+  EDGE_LABEL_WIDTH,
+} from '../utils/edgeLabel';
+
+/** One step of the transition — a full model plus its view options. */
+export interface SubsystemTransitionStep {
+  model: SubsystemModelDocument;
+  /** `path` derives directory frames and nests modules under them. */
+  moduleNesting?: 'exact' | 'path';
+  /** Show mechanism labels on edges. @default true */
+  showEdgeLabels?: boolean;
+  /** Explicit boundary frame colors (region key → hex); host override. */
+  boundaryColors?: Record<string, string>;
+}
+
+export interface SubsystemModelTransitionProps {
+  steps: SubsystemTransitionStep[];
+  /** Which step is shown. Controlled by the host (its nav / timer). */
+  activeIndex: number;
+  /** Tween duration, ms. @default 750 */
+  durationMs?: number;
+  /** fitView padding for the viewport refit. @default 0.18 */
+  fitPadding?: number;
+  /** Called when a node is clicked. */
+  onSelect?: (componentAlias: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** Graph edge look (ELK orth path) + the mechanism label the graph overlays. */
+function TransitionEdge(props: EdgeProps) {
+  const { theme } = useTheme();
+  const data = props.data as
+    | { mechanism?: string; provenance?: SubsystemEdgeProvenance; labelX?: number; labelY?: number }
+    | undefined;
+  const mechanism = data?.mechanism ?? 'uses';
+  const color = edgeColor({ mechanism, provenance: data?.provenance });
+  const verifiable =
+    data?.provenance === 'graphify' ||
+    MECHANISM_DESCRIPTIONS.find(([m]) => m === mechanism)?.[2] !== false;
+  const labelBg = theme.colors.backgroundSecondary ?? theme.colors.background;
+  const showLabel = data?.labelX != null && data?.labelY != null;
+  return (
+    <>
+      <EdgeRenderer {...props} />
+      {showLabel && (
+        <EdgeLabelRenderer>
+          <div
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${data!.labelX}px, ${data!.labelY}px)`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: EDGE_LABEL_WIDTH,
+              height: EDGE_LABEL_HEIGHT,
+              boxSizing: 'border-box',
+              padding: '7px 8px',
+              pointerEvents: 'none',
+            }}
+          >
+            {verifiable ? (
+              <span
+                aria-hidden
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  borderRadius: 4,
+                  border: `0.5px solid ${color}`,
+                  background: labelBg,
+                }}
+              />
+            ) : (
+              <svg
+                aria-hidden
+                width={EDGE_LABEL_WIDTH}
+                height={EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP}
+                viewBox={`0 0 ${EDGE_LABEL_WIDTH} ${EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP}`}
+                style={{ position: 'absolute', left: 0, top: -EDGE_LABEL_CLOUD_EXTRA_TOP }}
+              >
+                <path
+                  d={EDGE_LABEL_CLOUD_PATH}
+                  fill={labelBg}
+                  stroke={hexWithAlpha(color, 0.75)}
+                  strokeWidth={1.2}
+                  strokeLinejoin="round"
+                />
+              </svg>
+            )}
+            <span
+              style={{
+                position: 'relative',
+                display: 'block',
+                maxWidth: '100%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                fontSize: EDGE_LABEL_FONT_SIZE,
+                lineHeight: 1,
+                fontFamily: theme.fonts.monospace,
+                fontWeight: 500,
+                color,
+              }}
+            >
+              {mechanism}
+            </span>
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}
+
+const nodeTypes: NodeTypes = {
+  'subsystem-component': SubsystemComponentNode,
+  'subsystem-group': SubsystemGroupNode,
+};
+const edgeTypes: EdgeTypes = { 'subsystem-edge': TransitionEdge };
+
+/** `SubsystemEdge` narrows its props; render it through a permissive alias. */
+const EdgeRenderer = SubsystemEdge as unknown as ComponentType<EdgeProps>;
+
+type Rect = { x: number; y: number; w: number; h: number };
+type Live = Rect & { o: number };
+type StepMeta = { type: 'subsystem-component' | 'subsystem-group'; data: Record<string, unknown> };
+type StepLayout = {
+  rects: Map<string, Rect>;
+  meta: Map<string, StepMeta>;
+  order: string[];
+  edges: Edge[];
+};
+
+const ease = (t: number) => t * t * (3 - 2 * t);
+const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+function flatten(
+  result: Awaited<ReturnType<typeof buildSubsystemGraph>>,
+  boundaryColors?: Record<string, string>,
+): StepLayout {
+  const rects = new Map<string, Rect>();
+  const meta = new Map<string, StepMeta>();
+  const order: string[] = [];
+  const nodes: SubsystemGraphNode[] = [
+    ...result.nodes.filter((n) => n.type === 'subsystem-group'),
+    ...result.nodes.filter((n) => n.type !== 'subsystem-group'),
+  ];
+  for (const n of nodes) {
+    const r = result.absoluteRects.get(n.id);
+    if (!r) continue;
+    rects.set(n.id, { x: r.x, y: r.y, w: r.width, h: r.height });
+    const data = { ...((n.data ?? {}) as Record<string, unknown>) };
+    if (n.type === 'subsystem-group' && boundaryColors) {
+      const key = (data as { region?: { key?: string } }).region?.key;
+      if (key && boundaryColors[key] != null) data.color = boundaryColors[key];
+    }
+    meta.set(n.id, { type: n.type as StepMeta['type'], data });
+    order.push(n.id);
+  }
+  return { rects, meta, order, edges: result.edges as unknown as Edge[] };
+}
+
+function TransitionInner({
+  steps,
+  activeIndex,
+  durationMs = 750,
+  fitPadding = 0.18,
+  onSelect,
+  className,
+  style,
+}: SubsystemModelTransitionProps) {
+  const { theme } = useTheme();
+  const { fitBounds } = useReactFlow();
+  const [layouts, setLayouts] = useState<StepLayout[] | null>(null);
+  const [display, setDisplay] = useState<Map<string, Live>>(new Map());
+  const [settled, setSettled] = useState(false);
+  const displayRef = useRef(display);
+  displayRef.current = display;
+  const rafRef = useRef<number | null>(null);
+
+  // Lay out every step whenever the steps prop changes (identity-keyed).
+  useEffect(() => {
+    let alive = true;
+    void (async () => {
+      const next: StepLayout[] = [];
+      for (const s of steps) {
+        const result = await buildSubsystemGraph(s.model, {
+          showSingletonFrames: true,
+          moduleNesting: s.moduleNesting,
+          showEdgeLabels: s.showEdgeLabels ?? true,
+        });
+        next.push(flatten(result, s.boundaryColors));
+      }
+      if (alive) setLayouts(next);
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [steps]);
+
+  // Tween to the active step; refit; hide edges until settled.
+  useEffect(() => {
+    if (!layouts) return;
+    const step = layouts[activeIndex];
+    if (!step) return;
+    setSettled(false);
+
+    const rects = [...step.rects.values()];
+    if (rects.length > 0) {
+      const minX = Math.min(...rects.map((r) => r.x));
+      const minY = Math.min(...rects.map((r) => r.y));
+      const maxX = Math.max(...rects.map((r) => r.x + r.w));
+      const maxY = Math.max(...rects.map((r) => r.y + r.h));
+      fitBounds(
+        { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
+        { padding: fitPadding, duration: durationMs },
+      );
+    }
+
+    const start = new Map(displayRef.current);
+    const ids = new Set<string>([...start.keys(), ...step.rects.keys()]);
+    const t0 = performance.now();
+    const tick = (now: number) => {
+      const t = Math.min(1, (now - t0) / durationMs);
+      const e = ease(t);
+      const next = new Map<string, Live>();
+      for (const id of ids) {
+        const cur = start.get(id);
+        const tgt = step.rects.get(id);
+        if (tgt) {
+          const from = cur ?? { ...tgt, o: 0 };
+          next.set(id, {
+            x: lerp(from.x, tgt.x, e),
+            y: lerp(from.y, tgt.y, e),
+            w: lerp(from.w, tgt.w, e),
+            h: lerp(from.h, tgt.h, e),
+            o: lerp(from.o ?? 0, 1, e),
+          });
+        } else if (cur) {
+          next.set(id, { ...cur, o: lerp(cur.o, 0, e) });
+        }
+      }
+      setDisplay(next);
+      if (t < 1) {
+        rafRef.current = requestAnimationFrame(tick);
+      } else {
+        setSettled(true);
+      }
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [layouts, activeIndex, durationMs, fitPadding, fitBounds]);
+
+  const unionMeta = useMemo(() => {
+    const m = new Map<string, StepMeta>();
+    for (const s of layouts ?? []) for (const [id, meta] of s.meta) if (!m.has(id)) m.set(id, meta);
+    return m;
+  }, [layouts]);
+
+  const activeLayout = layouts?.[activeIndex];
+
+  const nodes: Node[] = useMemo(() => {
+    const activeOrder = new Set(activeLayout?.order ?? []);
+    const ids = [...display.entries()]
+      .filter(([id, r]) => r.o > 0.01 || activeOrder.has(id))
+      .map(([id]) => id);
+    ids.sort((a, b) => {
+      const ga = unionMeta.get(a)?.type === 'subsystem-group' ? 0 : 1;
+      const gb = unionMeta.get(b)?.type === 'subsystem-group' ? 0 : 1;
+      return ga - gb;
+    });
+    const out: Node[] = [];
+    for (const id of ids) {
+      const meta = unionMeta.get(id);
+      const rect = display.get(id);
+      if (!meta || !rect) continue;
+      out.push({
+        id,
+        type: meta.type,
+        position: { x: rect.x, y: rect.y },
+        width: rect.w,
+        height: rect.h,
+        data: meta.data,
+        draggable: false,
+        selectable: false,
+        style: { opacity: rect.o },
+      } as Node);
+    }
+    return out;
+  }, [display, activeLayout, unionMeta]);
+
+  const edges: Edge[] = useMemo(
+    () => (settled ? activeLayout?.edges ?? [] : []),
+    [settled, activeLayout],
+  );
+
+  const callbacks = useMemo(() => (onSelect ? { onSelect } : {}), [onSelect]);
+
+  return (
+    <div
+      className={className}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        minHeight: 0,
+        background: theme.colors.background,
+        ...style,
+      }}
+    >
+      {!layouts ? null : (
+        <SubsystemCallbacksProvider value={callbacks}>
+          <ReactFlow
+            nodes={nodes}
+            edges={edges}
+            nodeTypes={nodeTypes}
+            edgeTypes={edgeTypes}
+            className={GRAPH_CANVAS_CLASS}
+            {...GRAPH_NAV_PROPS}
+            proOptions={{ hideAttribution: true }}
+            nodesDraggable={false}
+            nodesConnectable={false}
+            style={{ width: '100%', height: '100%', background: theme.colors.background }}
+          >
+            <Background />
+            <GraphChrome />
+          </ReactFlow>
+        </SubsystemCallbacksProvider>
+      )}
+    </div>
+  );
+}
+
+export function SubsystemModelTransition(props: SubsystemModelTransitionProps) {
+  return (
+    <ReactFlowProvider>
+      <TransitionInner {...props} />
+    </ReactFlowProvider>
+  );
+}

package/src/subsystem/model.ts

@@ -2159,6 +2159,9 @@ export async function buildSubsystemGraph(
         // layered pass place those sibling frames along the horizontal axis
         // while each frame's members stack vertically.
         direction: edges.length > 0 ? 'RIGHT' : 'DOWN',
+        // Edge-less containment: fold the root frames into a column-major grid
+        // so the shape reads closer to square than one long strip.
+        reflowGrid: edges.length === 0,
         nodeSpacing: 60,
         edgeSpacing: 30,
         edgeNodeSpacing: 60,

package/src/utils/elkLayout.ts

@@ -94,6 +94,15 @@ export interface ElkLayoutOptions {
    */
   orderByLine?: boolean;
 
+  /**
+   * Reflow root-level compound frames into a column-major grid after ELK runs:
+   * fill each column top-to-bottom, then start the next column to the right.
+   * Gives an approximately square shape for edge-less containment graphs, which
+   * ELK otherwise packs into one long strip. No effect when edges exist (their
+   * routes would need re-routing).
+   */
+  reflowGrid?: boolean;
+
   /**
    * Compound groups — each becomes an ELK parent whose `memberIds` are laid
    * out inside it. `memberIds` may be leaf node ids or other group ids
@@ -529,6 +538,7 @@ export async function computeElkLayout(
   const edgeLabels = options.edgeLabels;
   const endpointInset = options.endpointInset ?? 0;
   const direction = options.direction ?? 'RIGHT';
+  const reflowGrid = options.reflowGrid === true;
   const orderByLine = options.orderByLine ?? false;
 
   // Build a map of original node positions BEFORE passing to ELK
@@ -1023,6 +1033,102 @@ export async function computeElkLayout(
         return node;
       });
 
+  // Optional column-major grid reflow for edge-less containment graphs. ELK
+  // packs disconnected root frames into one long strip; fold them into a grid
+  // (fill a column top-to-bottom, then start the next column) so the shape
+  // approaches a square. Root frames are moved; their descendants (relative
+  // group bounds / leaf positions) ride along, and absoluteRects is rebased so
+  // hit-testing stays correct.
+  if (reflowGrid && edges.length === 0) {
+    const rootGroupIds: string[] = [];
+    for (const g of groupDefs) {
+      if (!builtGroups.has(g.id)) continue;
+      if (g.parentId && builtGroups.has(g.parentId)) continue;
+      rootGroupIds.push(g.id);
+    }
+    type GridItem = {
+      id: string;
+      kind: 'group' | 'leaf';
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    };
+    const items: GridItem[] = [];
+    for (const id of rootGroupIds) {
+      const b = groupBounds.get(id);
+      if (b) items.push({ id, kind: 'group', x: b.x, y: b.y, w: b.width, h: b.height });
+    }
+    for (const id of ungroupedElkNodes.map((nd) => nd.id)) {
+      const rel = elkRelativePositions.get(id) ?? { x: 0, y: 0 };
+      const r = absoluteRects.get(id);
+      items.push({ id, kind: 'leaf', x: rel.x, y: rel.y, w: r?.width ?? 160, h: r?.height ?? 60 });
+    }
+    if (items.length > 1) {
+      const count = items.length;
+      const rows = Math.max(1, Math.ceil(Math.sqrt(count)));
+      const cols = Math.ceil(count / rows);
+      const GAP = 80;
+      const PAD = 40;
+      const colW: number[] = new Array(cols).fill(0);
+      const rowH: number[] = new Array(rows).fill(0);
+      items.forEach((it, i) => {
+        const c = Math.floor(i / rows);
+        const r = i % rows;
+        colW[c] = Math.max(colW[c] ?? 0, it.w);
+        rowH[r] = Math.max(rowH[r] ?? 0, it.h);
+      });
+      const colX: number[] = [];
+      let acc = PAD;
+      for (let c = 0; c < cols; c++) {
+        colX[c] = acc;
+        acc += (colW[c] ?? 0) + GAP;
+      }
+      const rowY: number[] = [];
+      acc = PAD;
+      for (let r = 0; r < rows; r++) {
+        rowY[r] = acc;
+        acc += (rowH[r] ?? 0) + GAP;
+      }
+      const shiftAbsSubtree = (id: string, dx: number, dy: number) => {
+        const ar = absoluteRects.get(id);
+        if (ar) absoluteRects.set(id, { ...ar, x: ar.x + dx, y: ar.y + dy });
+        const g = groupById.get(id);
+        if (!g) return;
+        for (const mid of g.memberIds) {
+          if (builtGroups.has(mid)) shiftAbsSubtree(mid, dx, dy);
+          else {
+            const mar = absoluteRects.get(mid);
+            if (mar) absoluteRects.set(mid, { ...mar, x: mar.x + dx, y: mar.y + dy });
+          }
+        }
+      };
+      const movedLeaves = new Map<string, { x: number; y: number }>();
+      items.forEach((it, i) => {
+        const c = Math.floor(i / rows);
+        const r = i % rows;
+        const dx = (colX[c] ?? 0) - it.x;
+        const dy = (rowY[r] ?? 0) - it.y;
+        if (dx === 0 && dy === 0) return;
+        if (it.kind === 'group') {
+          const b = groupBounds.get(it.id);
+          if (b) groupBounds.set(it.id, { ...b, x: b.x + dx, y: b.y + dy });
+          shiftAbsSubtree(it.id, dx, dy);
+        } else {
+          shiftAbsSubtree(it.id, dx, dy);
+          const rel = elkRelativePositions.get(it.id);
+          if (rel) movedLeaves.set(it.id, { x: rel.x + dx, y: rel.y + dy });
+        }
+      });
+      if (movedLeaves.size > 0) {
+        for (const node of resultNodes) {
+          const m = movedLeaves.get(node.id);
+          if (m) (node as { position: { x: number; y: number } }).position = m;
+        }
+      }
+    }
+  }
+
   return {
     nodes: resultNodes,
     edgePaths,