From 0ff6b495642f2a6ea4fc5bbcb11df03f21c50d75 Mon Sep 17 00:00:00 2001
From: yyyyaaa <phatghaa@gmail.com>
Date: Sat, 26 Sep 2026 12:49:49 +0700
Subject: [PATCH] fix(ui): spring the org chart's folds and stop drags sticking
 to the cursor

Folding and unfolding re-rendered every card and animated left/top on a
CSS ease, so large teams stalled and new reports popped in. Cards now
memoise apart from their position, and cards and wires share one spring
(a CSS linear() curve), so new reports slide out from under their manager
and folded ones tuck back beneath it. Cards and wires keep a stable DOM
order so running transitions are never cancelled. The folded or dropped-on
person holds still on screen while the chart reflows around them, and each
card mounts its actions menu on first click.

A drag listened only on the card, so a release lost to a context menu,
another window, or the card moving in the DOM left the card following the
cursor. Drags now listen on the window, end on blur, Escape, or any move
with no button held, and canvas pans end the same way.

Adds a 391-person StressTest story for folding and dragging at scale.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 packages/ui/registry.json                     |  12 +
 .../components/org-chart/org-chart-node.tsx   | 295 +++++++++------
 .../components/org-chart/org-chart-scene.ts   | 160 ++++++++
 .../components/org-chart/org-chart-spring.ts  |  36 ++
 .../components/org-chart/org-chart-wires.tsx  | 106 ++++++
 .../ui/src/components/org-chart/org-chart.tsx | 343 ++++++++++--------
 .../src/components/workspace-kit/canvas.tsx   |  81 ++++-
 packages/ui/src/stories/OrgChart.stories.tsx  |  48 +++
 8 files changed, 808 insertions(+), 273 deletions(-)
 create mode 100644 packages/ui/src/components/org-chart/org-chart-scene.ts
 create mode 100644 packages/ui/src/components/org-chart/org-chart-spring.ts
 create mode 100644 packages/ui/src/components/org-chart/org-chart-wires.tsx

diff --git a/packages/ui/registry.json b/packages/ui/registry.json
index 10a6e147..c812ff0f 100644
--- a/packages/ui/registry.json
+++ b/packages/ui/registry.json
@@ -3110,10 +3110,22 @@
           "path": "registry/constructive/blocks/org-chart/org-chart-states.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "registry/constructive/blocks/org-chart/org-chart-wires.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "registry/constructive/blocks/org-chart/layout.ts",
           "type": "registry:lib"
         },
+        {
+          "path": "registry/constructive/blocks/org-chart/org-chart-scene.ts",
+          "type": "registry:lib"
+        },
+        {
+          "path": "registry/constructive/blocks/org-chart/org-chart-spring.ts",
+          "type": "registry:lib"
+        },
         {
           "path": "registry/constructive/blocks/org-chart/org-chart-utils.ts",
           "type": "registry:lib"
diff --git a/packages/ui/src/components/org-chart/org-chart-node.tsx b/packages/ui/src/components/org-chart/org-chart-node.tsx
index 3acc1094..e6ed4b35 100644
--- a/packages/ui/src/components/org-chart/org-chart-node.tsx
+++ b/packages/ui/src/components/org-chart/org-chart-node.tsx
@@ -9,13 +9,12 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSepara
 import { CANVAS_NODE_ATTRIBUTE, NodeShell } from '../workspace-kit/canvas';
 import { focusRingClass, pressClass } from '../workspace-kit/primitives';
 import type { PlacedPerson } from './layout';
+import { springTransition } from './org-chart-spring';
 import { getInitials, personName, reportsLabel } from './org-chart-utils';
 
 export type NodeHandlers = {
+	/** Starts a press; the chart follows the pointer from there until it is released anywhere. */
 	pointerDown: (id: string, event: React.PointerEvent<HTMLDivElement>) => void;
-	pointerMove: (id: string, event: React.PointerEvent<HTMLDivElement>) => void;
-	pointerUp: (id: string, event: React.PointerEvent<HTMLDivElement>) => void;
-	pointerCancel: () => void;
 	keyDown: (id: string, event: React.KeyboardEvent<HTMLDivElement>) => void;
 	focus: (id: string, event: React.FocusEvent<HTMLDivElement>) => void;
 	toggle: (id: string) => void;
@@ -35,80 +34,80 @@ export function PersonAvatar({ person, className }: { person: { displayName: str
 	);
 }
 
-type OrgChartNodeProps = {
+/**
+ * The card's actions menu. Until its first click it is a plain button that
+ * looks the same, because a menu per card is a third of the cost of
+ * unfolding a large team; the first click mounts the real menu, already open.
+ */
+function CardMenu({ id, name, selected, handlers }: { id: string; name: string; selected: boolean; handlers: NodeHandlers }) {
+	const [mounted, setMounted] = React.useState(false);
+	const trigger = {
+		tabIndex: -1,
+		'aria-label': `Actions for ${name}`,
+		className: cn(
+			'grid size-6 shrink-0 cursor-pointer place-items-center rounded-md text-muted-foreground opacity-0 hover:bg-overlay-hover hover:text-foreground',
+			'group-hover/node:opacity-100 group-focus-within/node:opacity-100 data-[popup-open]:opacity-100 pointer-coarse:opacity-100',
+			selected && 'opacity-100',
+			'transition-opacity duration-(--duration-fast) motion-reduce:transition-none',
+			pressClass,
+			focusRingClass,
+		),
+		children: <Ellipsis aria-hidden="true" className="size-3.5" />,
+	};
+	if (!mounted) return <button type="button" aria-haspopup="menu" {...trigger} onClick={() => setMounted(true)} />;
+	return (
+		<DropdownMenu defaultOpen>
+			<DropdownMenuTrigger {...trigger} />
+			<DropdownMenuContent align="start" side="right" className="w-48">
+				<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.openMove(id)}>
+					<GitBranch aria-hidden="true" />
+					Change manager…
+				</DropdownMenuItem>
+				{handlers.edit ? (
+					<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.edit?.(id)}>
+						<Pencil aria-hidden="true" />
+						Edit position
+					</DropdownMenuItem>
+				) : null}
+				{handlers.remove ? (
+					<>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							className={cn(MENU_ITEM, 'text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive [&_svg]:text-destructive')}
+							onClick={() => handlers.remove?.(id)}
+						>
+							<Trash2 aria-hidden="true" />
+							Remove from chart
+						</DropdownMenuItem>
+					</>
+				) : null}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
+type CardProps = {
 	person: PlacedPerson;
 	selected: boolean;
-	/** The one node in the tab order (roving tabindex). */
-	tabStop: boolean;
 	editable: boolean;
-	/** Offset in canvas units while this node is being dragged, and whether it is over a valid manager. */
-	dragOffset: { dx: number; dy: number; targetId: string | null } | null;
-	/** A valid manager under the dragged node. */
+	dragging: boolean;
 	dropTarget: boolean;
-	/** Can't take the dragged node: it is the node itself or one of its reports. */
-	blocked: boolean;
-	/** Shown under the dragged card while it is over a valid manager, e.g. "Reports to Maya Chen". */
-	dropHint?: string;
 	handlers: NodeHandlers;
 };
 
 /**
- * One person: a double-framed card with their avatar, name, and title, a
- * menu for edits, and a footer that folds their reports away. The whole card
- * is the drag handle; menu and footer buttons keep their own presses.
+ * What a card draws: a double-framed card with the avatar, name, and title,
+ * a menu for edits, and a footer that folds the person's reports away.
+ * Memoised apart from the card's position, so a card that only moves never re-renders.
  */
-function OrgChartNodeView({ person, selected, tabStop, editable, dragOffset, dropTarget, blocked, dropHint, handlers }: OrgChartNodeProps) {
+const OrgCard = React.memo(function OrgCard({ person, selected, editable, dragging, dropTarget, handlers }: CardProps) {
 	const { data, collapsed, hiddenCount } = person;
 	const id = data.id;
 	const name = personName(data);
 	const compact = data.isCompact;
 	const hasReports = data.childCount > 0;
-	const dragging = dragOffset !== null;
-
 	return (
-		<div
-			role="treeitem"
-			aria-level={person.depth + 1}
-			aria-posinset={person.position}
-			aria-setsize={person.siblings}
-			aria-selected={selected}
-			aria-expanded={hasReports ? !collapsed : undefined}
-			aria-label={[name, data.positionTitle, hasReports ? reportsLabel(data.childCount) : null].filter(Boolean).join(', ')}
-			tabIndex={tabStop ? 0 : -1}
-			data-node-id={id}
-			{...{ [CANVAS_NODE_ATTRIBUTE]: '' }}
-			onPointerDown={(event) => handlers.pointerDown(id, event)}
-			onPointerMove={(event) => handlers.pointerMove(id, event)}
-			onPointerUp={(event) => handlers.pointerUp(id, event)}
-			onPointerCancel={handlers.pointerCancel}
-			onKeyDown={(event) => handlers.keyDown(id, event)}
-			onFocus={(event) => handlers.focus(id, event)}
-			style={{
-				left: person.x,
-				top: person.y,
-				width: person.width,
-				height: person.height,
-				// Over a manager, the card shrinks and fades a touch so the target's highlight shows through.
-				transform: dragging ? `translate(${dragOffset.dx}px, ${dragOffset.dy}px) scale(${dragOffset.targetId ? 0.9 : 1})` : undefined,
-			}}
-			className={cn(
-				'group/node absolute isolate rounded-[14px]',
-				focusRingClass,
-				editable ? 'cursor-grab' : 'cursor-pointer',
-				dragging
-					? cn('z-20 cursor-grabbing', dragOffset.targetId && 'opacity-85')
-					: 'transition-[left,top,transform,opacity] duration-(--duration-slow) ease-(--ease-out) motion-reduce:transition-none',
-				blocked && !dragging && 'opacity-40',
-			)}
-		>
-			{dropHint ? (
-				<span
-					aria-hidden="true"
-					className="absolute top-full left-1/2 mt-2 -translate-x-1/2 animate-[ai-fade-up_var(--duration-moderate)_var(--ease-out)_both] rounded-md bg-foreground px-2 py-1 text-xs whitespace-nowrap text-background shadow-card-lg motion-reduce:animate-none"
-				>
-					{dropHint}
-				</span>
-			) : null}
+		<>
 			{collapsed ? (
 				<>
 					<span aria-hidden="true" className="absolute inset-x-2.5 -bottom-1.5 -z-10 h-4 rounded-b-[12px] border border-t-0 border-foreground/10 bg-muted" />
@@ -134,48 +133,7 @@ function OrgChartNodeView({ person, selected, tabStop, editable, dragOffset, dro
 							</p>
 						) : null}
 					</div>
-					{editable ? (
-						<DropdownMenu>
-							<DropdownMenuTrigger
-								tabIndex={-1}
-								aria-label={`Actions for ${name}`}
-								className={cn(
-									'grid size-6 shrink-0 cursor-pointer place-items-center rounded-md text-muted-foreground opacity-0 hover:bg-overlay-hover hover:text-foreground',
-									'group-hover/node:opacity-100 group-focus-within/node:opacity-100 data-[popup-open]:opacity-100 pointer-coarse:opacity-100',
-									selected && 'opacity-100',
-									'transition-opacity duration-(--duration-fast) motion-reduce:transition-none',
-									pressClass,
-									focusRingClass,
-								)}
-							>
-								<Ellipsis aria-hidden="true" className="size-3.5" />
-							</DropdownMenuTrigger>
-							<DropdownMenuContent align="start" side="right" className="w-48">
-								<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.openMove(id)}>
-									<GitBranch aria-hidden="true" />
-									Change manager…
-								</DropdownMenuItem>
-								{handlers.edit ? (
-									<DropdownMenuItem className={MENU_ITEM} onClick={() => handlers.edit?.(id)}>
-										<Pencil aria-hidden="true" />
-										Edit position
-									</DropdownMenuItem>
-								) : null}
-								{handlers.remove ? (
-									<>
-										<DropdownMenuSeparator />
-										<DropdownMenuItem
-											className={cn(MENU_ITEM, 'text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive [&_svg]:text-destructive')}
-											onClick={() => handlers.remove?.(id)}
-										>
-											<Trash2 aria-hidden="true" />
-											Remove from chart
-										</DropdownMenuItem>
-									</>
-								) : null}
-							</DropdownMenuContent>
-						</DropdownMenu>
-					) : null}
+					{editable ? <CardMenu id={id} name={name} selected={selected} handlers={handlers} /> : null}
 				</div>
 				{hasReports ? (
 					<button
@@ -196,16 +154,135 @@ function OrgChartNodeView({ person, selected, tabStop, editable, dragOffset, dro
 						) : null}
 						<ChevronDown
 							aria-hidden="true"
-							className={cn(
-								'ml-auto size-3 shrink-0 transition-transform duration-(--duration-moderate) ease-out motion-reduce:transition-none',
-								collapsed && '-rotate-90',
-							)}
+							className={cn('ml-auto size-3 shrink-0 transition-transform duration-(--duration-moderate) ease-out motion-reduce:transition-none', collapsed && '-rotate-90')}
 						/>
 					</button>
 				) : null}
 			</NodeShell>
+		</>
+	);
+}, sameBy<CardProps>({ person: sameCard }));
+
+type OrgChartNodeProps = {
+	person: PlacedPerson;
+	/** Where the card is heading: its slot, or under a remaining manager while it is folded away. */
+	x: number;
+	y: number;
+	/** Where a newly shown card starts: its manager's spot, so it slides out from under them. */
+	enterFrom?: { x: number; y: number };
+	/** Folded away or removed: sliding under a manager and about to unmount, no longer part of the tree. */
+	leaving: boolean;
+	selected: boolean;
+	/** The one node in the tab order (roving tabindex). */
+	tabStop: boolean;
+	editable: boolean;
+	/** Offset in canvas units while this card follows the pointer, and whether it is over a valid manager. */
+	drag: { dx: number; dy: number; overTarget: boolean } | null;
+	/** A valid manager under the dragged node. */
+	dropTarget: boolean;
+	/** Can't take the dragged node: it is the node itself or one of its reports. */
+	blocked: boolean;
+	/** Shown under the dragged card while it is over a valid manager, e.g. "Reports to Maya Chen". */
+	dropHint?: string;
+	handlers: NodeHandlers;
+};
+
+/**
+ * One person on the canvas. Position changes spring through CSS transitions
+ * on `left`/`top`; the whole card is the drag handle, while menu and footer
+ * buttons keep their own presses.
+ */
+function OrgChartNodeView({ person, x, y, enterFrom, leaving, selected, tabStop, editable, drag, dropTarget, blocked, dropHint, handlers }: OrgChartNodeProps) {
+	const { data, collapsed } = person;
+	const id = data.id;
+	const name = personName(data);
+	const hasReports = data.childCount > 0;
+	const dragging = drag !== null;
+	const style: React.CSSProperties & Record<`--${string}`, string> = {
+		left: x,
+		top: y,
+		width: person.width,
+		height: person.height,
+		// Managers sit above their reports, so teams slide out from under them and fold back beneath.
+		zIndex: dragging ? 1000 : Math.max(1, 500 - person.depth),
+		// Over a manager, the card shrinks a touch so the target's highlight shows through.
+		transform: drag ? `translate(${drag.dx}px, ${drag.dy}px) scale(${drag.overTarget ? 0.9 : 1})` : undefined,
+	};
+	if (enterFrom) {
+		style['--enter-left'] = `${enterFrom.x}px`;
+		style['--enter-top'] = `${enterFrom.y}px`;
+	}
+
+	return (
+		<div
+			role="treeitem"
+			aria-level={person.depth + 1}
+			aria-posinset={person.position}
+			aria-setsize={person.siblings}
+			aria-selected={selected}
+			aria-expanded={hasReports ? !collapsed : undefined}
+			aria-label={[name, data.positionTitle, hasReports ? reportsLabel(data.childCount) : null].filter(Boolean).join(', ')}
+			aria-hidden={leaving || undefined}
+			tabIndex={tabStop && !leaving ? 0 : -1}
+			data-node-id={leaving ? undefined : id}
+			{...{ [CANVAS_NODE_ATTRIBUTE]: '' }}
+			onPointerDown={leaving ? undefined : (event) => handlers.pointerDown(id, event)}
+			onKeyDown={(event) => handlers.keyDown(id, event)}
+			onFocus={(event) => handlers.focus(id, event)}
+			style={style}
+			className={cn(
+				'group/node absolute isolate rounded-[14px]',
+				focusRingClass,
+				editable ? 'cursor-grab' : 'cursor-pointer',
+				// Opacity stays out of the transition: fading many cards at once would give each its own layer.
+				dragging ? cn('cursor-grabbing', drag.overTarget && 'opacity-85') : cn('transition-[left,top,transform]', springTransition),
+				enterFrom && 'starting:left-(--enter-left) starting:top-(--enter-top)',
+				blocked && !dragging && 'opacity-40',
+				leaving && 'pointer-events-none',
+			)}
+		>
+			{dropHint ? (
+				<span
+					aria-hidden="true"
+					className="absolute top-full left-1/2 mt-2 -translate-x-1/2 animate-[ai-fade-up_var(--duration-moderate)_var(--ease-out)_both] rounded-md bg-foreground px-2 py-1 text-xs whitespace-nowrap text-background shadow-card-lg motion-reduce:animate-none"
+				>
+					{dropHint}
+				</span>
+			) : null}
+			<OrgCard person={person} selected={selected} editable={editable} dragging={dragging} dropTarget={dropTarget} handlers={handlers} />
 		</div>
 	);
 }
 
-export const OrgChartNode = React.memo(OrgChartNodeView);
+/** Everything a card draws. Its coordinates are left out: moving is the wrapper's job. */
+function sameCard(a: PlacedPerson, b: PlacedPerson) {
+	return (
+		a.data.id === b.data.id &&
+		a.data.displayName === b.data.displayName &&
+		a.data.positionTitle === b.data.positionTitle &&
+		a.data.avatarUrl === b.data.avatarUrl &&
+		a.data.childCount === b.data.childCount &&
+		a.data.isCompact === b.data.isCompact &&
+		a.width === b.width &&
+		a.height === b.height &&
+		a.depth === b.depth &&
+		a.collapsed === b.collapsed &&
+		a.hiddenCount === b.hiddenCount &&
+		a.position === b.position &&
+		a.siblings === b.siblings
+	);
+}
+
+/** Shallow props comparison, with a custom check for the listed props. */
+function sameBy<P extends object>(checks: { [K in keyof P]?: (a: P[K], b: P[K]) => boolean }) {
+	return (previous: P, next: P) => (Object.keys(next) as (keyof P)[]).every((key) => (checks[key] ?? Object.is)(previous[key], next[key]));
+}
+
+type Drag = OrgChartNodeProps['drag'];
+const sameDrag = (a: Drag, b: Drag) => a === b || (a !== null && b !== null && a.dx === b.dx && a.dy === b.dy && a.overTarget === b.overTarget);
+
+export const OrgChartNode = React.memo(
+	OrgChartNodeView,
+	// `enterFrom` only matters on the first render, when the card starts from it.
+	sameBy<OrgChartNodeProps>({ person: sameCard, drag: sameDrag, enterFrom: (a, b) => Boolean(a) === Boolean(b) }),
+);
diff --git a/packages/ui/src/components/org-chart/org-chart-scene.ts b/packages/ui/src/components/org-chart/org-chart-scene.ts
new file mode 100644
index 00000000..c8782e8f
--- /dev/null
+++ b/packages/ui/src/components/org-chart/org-chart-scene.ts
@@ -0,0 +1,160 @@
+'use client';
+
+import * as React from 'react';
+
+import type { WirePoint } from '../workspace-kit/canvas';
+import type { OrgLayout, PlacedPerson } from './layout';
+import { CHART_SPRING } from './org-chart-spring';
+import type { AnchorSpec, WireSpec } from './org-chart-wires';
+
+/** A card being dragged: its offset in canvas units and the manager it would report to if dropped now. */
+export type DragState = { id: string; dx: number; dy: number; targetId: string | null; blocked: ReadonlySet<string> };
+
+/** A card on the canvas: where it is heading, where a new one grows from, and whether it is folding away. */
+export type SceneCard = { person: PlacedPerson; x: number; y: number; enterFrom?: { x: number; y: number }; leaving: boolean };
+
+type Point = { x: number; y: number };
+type Spot = Point & { width: number; height: number };
+type Leaving = { person: PlacedPerson; anchorId: string };
+/**
+ * `shift` moves the whole layout on the canvas so the anchor person stays
+ * put across layout changes; `beforeShift` is the shift `before` was drawn with.
+ */
+type Scene = { layout: OrgLayout; before: OrgLayout | null; leaving: ReadonlyMap<string, Leaving>; shift: Point; beforeShift: Point };
+
+const EMPTY: ReadonlyMap<string, Leaving> = new Map();
+const ORIGIN: Point = { x: 0, y: 0 };
+const top = (spot: Spot): WirePoint => [spot.x + spot.width / 2, spot.y];
+const bottom = (spot: Spot): WirePoint => [spot.x + spot.width / 2, spot.y + spot.height];
+
+/** The closest manager above `id` (in `before`) who is still on the chart `after`. */
+function nearestShown(before: OrgLayout, after: OrgLayout, id: string) {
+	let current = before.byId.get(id)?.parentId ?? null;
+	while (current && !after.byId.has(current)) current = before.byId.get(current)?.parentId ?? null;
+	return current ? after.byId.get(current) : undefined;
+}
+
+/**
+ * People who just left the chart keep sliding under the nearest manager still
+ * on it; everyone else is laid out afresh, shifted so the anchor stays put.
+ */
+function nextScene(scene: Scene, layout: OrgLayout, anchorId: string | null, animate: boolean): Scene {
+	const was = anchorId ? scene.layout.byId.get(anchorId) : undefined;
+	const now = anchorId ? layout.byId.get(anchorId) : undefined;
+	const shift = was && now ? { x: scene.shift.x + was.x - now.x, y: scene.shift.y + was.y - now.y } : scene.shift;
+	const base = { layout, before: scene.layout, shift, beforeShift: scene.shift };
+	if (!animate) return { ...base, leaving: EMPTY };
+	const leaving = new Map<string, Leaving>();
+	for (const [id, item] of scene.leaving) if (!layout.byId.has(id) && layout.byId.has(item.anchorId)) leaving.set(id, item);
+	for (const person of scene.layout.people) {
+		const id = person.data.id;
+		if (layout.byId.has(id)) continue;
+		const anchor = nearestShown(scene.layout, layout, id);
+		if (anchor) leaving.set(id, { person, anchorId: anchor.data.id });
+	}
+	return { ...base, leaving };
+}
+
+/**
+ * Turns each new layout into what the canvas draws, so every change springs:
+ * new reports slide out from under their manager, folded-away reports slide
+ * back beneath the nearest manager still shown and unmount once hidden, and
+ * everyone else springs to their new slot. The anchor (the person whose team
+ * was just folded, say) keeps its spot on screen, so the pointer stays on it.
+ * Cards and wires keep a stable DOM order, because moving an element in the
+ * DOM cancels its running transition (and would lose a pointer capture mid-drag).
+ */
+export function useScene(layout: OrgLayout, anchorId: string | null, drag: DragState | null, highlighted: ReadonlySet<string>, animate: boolean) {
+	const [scene, setScene] = React.useState<Scene>({ layout, before: null, leaving: EMPTY, shift: ORIGIN, beforeShift: ORIGIN });
+	let current = scene;
+	if (scene.layout !== layout) {
+		current = nextScene(scene, layout, anchorId, animate);
+		setScene(current);
+	}
+	const { before, leaving, shift, beforeShift } = current;
+
+	// Once the last slide has settled, the cards that folded away can go.
+	React.useEffect(() => {
+		if (leaving.size === 0) return;
+		const timer = window.setTimeout(() => setScene((latest) => (latest.leaving.size ? { ...latest, leaving: EMPTY } : latest)), CHART_SPRING.duration + 60);
+		return () => window.clearTimeout(timer);
+	}, [leaving]);
+
+	const order = React.useRef<string[]>([]);
+
+	return React.useMemo(() => {
+		// Append-only order: survivors keep their place, newcomers join the end.
+		const shown = new Set([...layout.byId.keys(), ...leaving.keys()]);
+		const ids = order.current.filter((id) => shown.has(id));
+		const placed = new Set(ids);
+		for (const person of layout.people) if (!placed.has(person.data.id)) ids.push(person.data.id);
+		order.current = ids;
+
+		/** Where a card is heading: its slot, or its anchor's slot while it folds away. */
+		const slotOf = (id: string): Spot | undefined => {
+			const person = layout.byId.get(id);
+			if (person) return { x: person.x + shift.x, y: person.y + shift.y, width: person.width, height: person.height };
+			const item = leaving.get(id);
+			const anchor = item ? layout.byId.get(item.anchorId) : undefined;
+			return item && anchor ? { x: anchor.x + shift.x, y: anchor.y + shift.y, width: item.person.width, height: item.person.height } : undefined;
+		};
+		/** Where someone was drawn before this change. */
+		const beforeOf = (id: string): Spot | undefined => {
+			const person = before?.byId.get(id);
+			return person && { x: person.x + beforeShift.x, y: person.y + beforeShift.y, width: person.width, height: person.height };
+		};
+		/** The slot plus the drag offset, while the card follows the pointer. */
+		const spotOf = (id: string): Spot | undefined => {
+			const slot = slotOf(id);
+			return slot && drag?.id === id ? { ...slot, x: slot.x + drag.dx, y: slot.y + drag.dy } : slot;
+		};
+		/** Where a newly shown card grows from: the closest manager who was already on the chart, as they were. */
+		const enterSpot = (person: PlacedPerson): Spot | undefined => {
+			if (!before || before.byId.has(person.data.id)) return undefined;
+			let source = person.parentId;
+			while (source && !before.byId.has(source)) source = layout.byId.get(source)?.parentId ?? null;
+			const from = source ? beforeOf(source) : undefined;
+			return from ? { ...from, width: person.width, height: person.height } : undefined;
+		};
+
+		const cards: SceneCard[] = [];
+		const wires: WireSpec[] = [];
+		const anchors = new Map<string, AnchorSpec>();
+		const addAnchor = (anchor: AnchorSpec) => {
+			const existing = anchors.get(anchor.id);
+			anchors.set(anchor.id, { ...anchor, live: anchor.live || Boolean(existing?.live), instant: anchor.instant || Boolean(existing?.instant) });
+		};
+		for (const id of ids) {
+			const shown = layout.byId.get(id);
+			const person = shown ?? leaving.get(id)!.person;
+			const slot = slotOf(id)!;
+			const enter = shown ? enterSpot(shown) : undefined;
+			cards.push({ person, x: slot.x, y: slot.y, enterFrom: enter && { x: enter.x, y: enter.y }, leaving: !shown });
+
+			const parentId = person.parentId;
+			const parent = parentId ? spotOf(parentId) : undefined;
+			// Over a new manager, the dragged card's own line gives way to the preview line.
+			if (!parentId || !parent || (drag?.id === id && drag.targetId)) continue;
+			const live = Boolean(shown) && highlighted.has(id);
+			const instant = drag?.id === id || drag?.id === parentId;
+			// A newly shown line grows from its manager's old spot, collapsed behind that card.
+			const from = beforeOf(parentId) ?? (enter && shown?.parentId ? enterSpot(layout.byId.get(parentId)!) : undefined);
+			const growFrom = from && bottom({ ...from, height: parent.height });
+			wires.push({ id, start: bottom(parent), end: top(spotOf(id)!), tone: live ? 'live' : 'rest', marching: false, instant, enter: enter && growFrom ? { start: growFrom, end: top(enter) } : undefined });
+			addAnchor({ id: parentId, at: bottom(parent), live, instant, enter: growFrom });
+		}
+		const target = drag?.targetId ? spotOf(drag.targetId) : undefined;
+		const dragged = drag ? spotOf(drag.id) : undefined;
+		if (drag?.targetId && target && dragged) {
+			wires.push({ id: `preview-${drag.id}`, start: bottom(target), end: top(dragged), tone: 'live', marching: animate, instant: true });
+			addAnchor({ id: drag.targetId, at: bottom(target), live: true, instant: false });
+		}
+		// Anchors follow the card order too, so none of them moves in the DOM either.
+		const orderedAnchors: AnchorSpec[] = [];
+		for (const id of ids) {
+			const anchor = anchors.get(id);
+			if (anchor) orderedAnchors.push(anchor);
+		}
+		return { cards, wires, anchors: orderedAnchors, shift };
+	}, [animate, before, beforeShift, drag, highlighted, layout, leaving, shift]);
+}
diff --git a/packages/ui/src/components/org-chart/org-chart-spring.ts b/packages/ui/src/components/org-chart/org-chart-spring.ts
new file mode 100644
index 00000000..0d7b9c80
--- /dev/null
+++ b/packages/ui/src/components/org-chart/org-chart-spring.ts
@@ -0,0 +1,36 @@
+import type * as React from 'react';
+
+/**
+ * A damped spring (mass 1) from 0 to 1, sampled into a CSS `linear()` easing.
+ * CSS transitions keep hundreds of moving cards and wires inside the style
+ * engine, which is far cheaper per frame than writing them from script, and
+ * one shared curve keeps every wire attached to its cards.
+ */
+function springEasing(stiffness: number, damping: number, samples = 48) {
+	const omega = Math.sqrt(stiffness);
+	const zeta = damping / (2 * omega);
+	const decay = zeta * omega;
+	const damped = omega * Math.sqrt(Math.max(0, 1 - zeta * zeta));
+	const at = (t: number) =>
+		zeta < 1 ? 1 - Math.exp(-decay * t) * (Math.cos(damped * t) + (decay / damped) * Math.sin(damped * t)) : 1 - Math.exp(-omega * t) * (1 + omega * t);
+	// Settled once the swing stays within 0.2% of the distance travelled.
+	const envelope = zeta < 1 ? Math.sqrt(1 + (decay / damped) ** 2) : 1;
+	const seconds = Math.log(envelope / 0.002) / decay;
+	const points = Array.from({ length: samples + 1 }, (_, index) => (index === samples ? 1 : Math.round(at((index / samples) * seconds) * 1000) / 1000));
+	return { easing: `linear(${points.join(', ')})`, duration: Math.round(seconds * 1000) };
+}
+
+/**
+ * The chart's one spring: quick, with a whisper of overshoot (about 1.5%),
+ * so a whole division unfolding feels physical without wobbling.
+ */
+export const CHART_SPRING = springEasing(420, 33);
+
+/** Exposes the spring to every card, wire, and dot in the chart as CSS custom properties. */
+export const CHART_SPRING_STYLE = {
+	'--org-spring': CHART_SPRING.easing,
+	'--org-spring-duration': `${CHART_SPRING.duration}ms`,
+} as React.CSSProperties;
+
+/** Tailwind classes for a spring transition on the given properties. */
+export const springTransition = 'duration-(--org-spring-duration) ease-(--org-spring) motion-reduce:transition-none';
diff --git a/packages/ui/src/components/org-chart/org-chart-wires.tsx b/packages/ui/src/components/org-chart/org-chart-wires.tsx
new file mode 100644
index 00000000..b451fc04
--- /dev/null
+++ b/packages/ui/src/components/org-chart/org-chart-wires.tsx
@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+import { WIRE_STROKE, wirePath, type WirePoint, type WireTone } from '../workspace-kit/canvas';
+import { springTransition } from './org-chart-spring';
+
+/** A reporting line from the bottom centre of a manager's card to the top centre of a report's. */
+export type WireSpec = {
+	id: string;
+	start: WirePoint;
+	end: WirePoint;
+	tone: WireTone;
+	/** Marching dashes, for the drag preview. */
+	marching: boolean;
+	/** Follows a dragged card 1:1 instead of springing. */
+	instant: boolean;
+	/** Where a newly shown wire grows from: collapsed under its manager. */
+	enter?: { start: WirePoint; end: WirePoint };
+};
+
+/** The dot under a manager where their reporting lines leave. */
+export type AnchorSpec = { id: string; at: WirePoint; live: boolean; instant: boolean; enter?: WirePoint };
+
+const samePoint = (a: WirePoint | undefined, b: WirePoint | undefined) => a === b || (a !== undefined && b !== undefined && a[0] === b[0] && a[1] === b[1]);
+
+/** Points arrive as fresh arrays on every change, so compare them by value; `enter` only matters on the first render. */
+function sameShape<T extends object>(a: T, b: T) {
+	for (const key of Object.keys(b) as (keyof T)[]) {
+		const [x, y] = [a[key], b[key]];
+		if (key === 'enter' ? Boolean(x) !== Boolean(y) : Array.isArray(x) ? !samePoint(x as WirePoint, y as WirePoint) : x !== y) return false;
+	}
+	return true;
+}
+
+const OrgWire = React.memo(function OrgWire({ start, end, tone, marching, instant, enter, marker }: Omit<WireSpec, 'id'> & { marker: string }) {
+	const d = wirePath(start, end, 'vertical');
+	const style = { d: `path("${d}")`, ...(enter ? { '--enter-d': `path("${wirePath(enter.start, enter.end, 'vertical')}")` } : null) } as React.CSSProperties;
+	return (
+		<path
+			d={d}
+			style={style}
+			fill="none"
+			stroke={WIRE_STROKE[tone]}
+			strokeWidth={1}
+			strokeDasharray={tone === 'rest' ? undefined : '4 4'}
+			strokeLinecap="round"
+			markerEnd={`url(#${marker}-${tone === 'rest' ? 'rest' : 'live'})`}
+			className={cn(instant ? 'transition-[stroke]' : cn('transition-[d,stroke]', springTransition), enter && 'starting:[d:var(--enter-d)]')}
+		>
+			{marching ? <animate attributeName="stroke-dashoffset" from="8" to="0" dur="0.5s" repeatCount="indefinite" /> : null}
+		</path>
+	);
+}, sameShape);
+
+const OrgAnchor = React.memo(function OrgAnchor({ at, live, instant, enter }: Omit<AnchorSpec, 'id'>) {
+	const style = { cx: at[0], cy: at[1], ...(enter ? { '--enter-cx': `${enter[0]}px`, '--enter-cy': `${enter[1]}px` } : null) } as React.CSSProperties;
+	return (
+		<circle
+			cx={at[0]}
+			cy={at[1]}
+			r={3}
+			style={style}
+			fill="var(--card)"
+			stroke={WIRE_STROKE[live ? 'live' : 'rest']}
+			strokeWidth={1}
+			className={cn(
+				instant ? 'transition-[stroke]' : cn('transition-[cx,cy,stroke]', springTransition),
+				enter && 'starting:[cx:var(--enter-cx)] starting:[cy:var(--enter-cy)]',
+			)}
+		/>
+	);
+}, sameShape);
+
+type OrgChartWiresProps = {
+	wires: readonly WireSpec[];
+	anchors: readonly AnchorSpec[];
+	width: number;
+	height: number;
+};
+
+/**
+ * Every reporting line, then every anchor on top. Both lists keep a stable
+ * order: moving an element in the DOM would cancel its running transition.
+ */
+export function OrgChartWires({ wires, anchors, width, height }: OrgChartWiresProps) {
+	const marker = `org-wire-${React.useId().replace(/:/g, '')}`;
+	return (
+		<svg aria-hidden="true" className="pointer-events-none absolute top-0 left-0 overflow-visible" width={Math.max(1, width)} height={Math.max(1, height)}>
+			<defs>
+				{(['rest', 'live'] as const).map((tone) => (
+					<marker key={tone} id={`${marker}-${tone}`} markerUnits="userSpaceOnUse" markerWidth={8} markerHeight={8} refX={4} refY={4} overflow="visible">
+						<circle cx={4} cy={4} r={3} fill="var(--card)" stroke={WIRE_STROKE[tone]} strokeWidth={1} />
+					</marker>
+				))}
+			</defs>
+			{wires.map(({ id, ...wire }) => (
+				<OrgWire key={id} {...wire} marker={marker} />
+			))}
+			{anchors.map(({ id, ...anchor }) => (
+				<OrgAnchor key={id} {...anchor} />
+			))}
+		</svg>
+	);
+}
diff --git a/packages/ui/src/components/org-chart/org-chart.tsx b/packages/ui/src/components/org-chart/org-chart.tsx
index ff9d3406..92a52e37 100644
--- a/packages/ui/src/components/org-chart/org-chart.tsx
+++ b/packages/ui/src/components/org-chart/org-chart.tsx
@@ -4,16 +4,19 @@ import * as React from 'react';
 
 import { cn } from '../../lib/utils';
 import { TooltipProvider } from '../tooltip';
-import { CanvasSurface, CanvasWire, CanvasZoomControls, useCanvasViewport, WIRE_STROKE, WireDot, type WirePoint, type WireTone } from '../workspace-kit/canvas';
+import { CanvasSurface, CanvasZoomControls, useCanvasViewport } from '../workspace-kit/canvas';
 import { useReducedMotion } from '../workspace-kit/reduced-motion';
 import { useLatest } from '../workspace-kit/use-latest';
 import { computeLayout, descendantsOf, effectiveParent, indexEdges, managersOf, nodeDataFor, type OrgLayout, type PlacedPerson } from './layout';
 import { OrgChartDetails } from './org-chart-details';
 import { OrgChartMoveDialog } from './org-chart-move-dialog';
 import { OrgChartNode, type NodeHandlers } from './org-chart-node';
+import { useScene, type DragState } from './org-chart-scene';
+import { CHART_SPRING_STYLE } from './org-chart-spring';
 import { OrgChartEmpty, OrgChartLoading } from './org-chart-states';
 import type { OrgChartEdge, OrgChartNodeData } from './org-chart.types';
 import { personName } from './org-chart-utils';
+import { OrgChartWires } from './org-chart-wires';
 
 /** Container width at or below which cards switch to their compact size. */
 const COMPACT_MAX_WIDTH = 639;
@@ -62,8 +65,17 @@ interface OrgChartUncontrolledProps extends OrgChartPropsBase {
 
 export type OrgChartProps = OrgChartControlledProps | OrgChartUncontrolledProps;
 
-type DragState = { id: string; dx: number; dy: number; targetId: string | null; blocked: ReadonlySet<string> };
-type Press = { id: string; pointerId: number; x: number; y: number; moved: boolean; blocked: ReadonlySet<string> };
+/** A press on a card, from pointer down until it ends; `stopListening` removes its window listeners. */
+type Press = {
+	id: string;
+	pointerId: number;
+	x: number;
+	y: number;
+	moved: boolean;
+	blocked: ReadonlySet<string>;
+	targetId: string | null;
+	stopListening: () => void;
+};
 
 function edgesKey(edges: readonly OrgChartEdge[] | undefined) {
 	return edges?.map((edge) => `${edge.id}:${edge.parentId}:${edge.positionTitle ?? ''}:${edge.displayName ?? ''}:${edge.avatarUrl ?? ''}`).join('|') ?? '';
@@ -81,44 +93,6 @@ function sideNeighbour(layout: OrgLayout, person: PlacedPerson, direction: -1 |
 	return row[row.indexOf(person) + direction];
 }
 
-type Wire = { id: string; start: WirePoint; end: WirePoint; tone: WireTone; animated: boolean };
-
-function useWires(layout: OrgLayout, highlighted: ReadonlySet<string>, drag: DragState | null, animate: boolean) {
-	return React.useMemo(() => {
-		const offset = (id: string) => (drag?.id === id ? drag : { dx: 0, dy: 0 });
-		const top = (person: PlacedPerson): WirePoint => {
-			const { dx, dy } = offset(person.data.id);
-			return [person.x + person.width / 2 + dx, person.y + dy];
-		};
-		const bottom = (person: PlacedPerson): WirePoint => {
-			const { dx, dy } = offset(person.data.id);
-			return [person.x + person.width / 2 + dx, person.y + person.height + dy];
-		};
-		const wires: Wire[] = [];
-		const anchors = new Map<string, { point: WirePoint; live: boolean }>();
-		for (const person of layout.people) {
-			if (!person.parentId) continue;
-			const parent = layout.byId.get(person.parentId);
-			if (!parent) continue;
-			const id = person.data.id;
-			if (drag?.id === id && drag.targetId) continue;
-			const live = highlighted.has(id);
-			wires.push({ id, start: bottom(parent), end: top(person), tone: live ? 'live' : 'rest', animated: false });
-			const anchor = anchors.get(parent.data.id);
-			anchors.set(parent.data.id, { point: bottom(parent), live: live || Boolean(anchor?.live) });
-		}
-		const target = drag?.targetId ? layout.byId.get(drag.targetId) : undefined;
-		const dragged = drag ? layout.byId.get(drag.id) : undefined;
-		if (target && dragged) {
-			wires.push({ id: `preview-${dragged.data.id}`, start: bottom(target), end: top(dragged), tone: 'live', animated: animate });
-			anchors.set(target.data.id, { point: bottom(target), live: true });
-		}
-		// Live wires paint last so they sit above the rest.
-		wires.sort((a, b) => Number(a.tone === 'live') - Number(b.tone === 'live'));
-		return { wires, anchors: [...anchors.entries()] };
-	}, [animate, drag, highlighted, layout]);
-}
-
 function OrgChartInner(props: OrgChartProps) {
 	const {
 		className,
@@ -151,6 +125,8 @@ function OrgChartInner(props: OrgChartProps) {
 	const [moveId, setMoveId] = React.useState<string | null>(null);
 	const [drag, setDrag] = React.useState<DragState | null>(null);
 	const [revealRequest, setRevealRequest] = React.useState<{ id: string } | null>(null);
+	/** The person the chart was last changed through (a fold, a drop); their card holds still as the layout reflows. */
+	const [anchorId, setAnchorId] = React.useState<string | null>(null);
 	const [announcement, setAnnouncement] = React.useState('');
 	const press = React.useRef<Press | null>(null);
 	const animate = !useReducedMotion();
@@ -160,9 +136,18 @@ function OrgChartInner(props: OrgChartProps) {
 	const selected = selectedId ? layout.byId.get(selectedId) : undefined;
 	const tabStopId = activeId && layout.byId.has(activeId) ? activeId : (layout.people[0]?.data.id ?? null);
 
+	const highlighted = React.useMemo<ReadonlySet<string>>(() => {
+		if (!selected) return EMPTY_SET;
+		const id = selected.data.id;
+		return new Set([id, ...managersOf(index, id).slice(0, -1), ...selected.childIds]);
+	}, [index, selected]);
+	const scene = useScene(layout, anchorId, drag, highlighted, animate);
+	const { shift } = scene;
+
 	const viewport = useCanvasViewport(layout.width, {
 		fit: 'contain',
 		contentHeight: layout.height,
+		contentOrigin: shift,
 		minZoom: 0.3,
 		maxZoom: 1.5,
 		// Past this the names are unreadable; frame the top of the tree instead of all of it.
@@ -170,13 +155,6 @@ function OrgChartInner(props: OrgChartProps) {
 		inset: CANVAS_INSET,
 	});
 
-	const highlighted = React.useMemo<ReadonlySet<string>>(() => {
-		if (!selected) return EMPTY_SET;
-		const id = selected.data.id;
-		return new Set([id, ...managersOf(index, id).slice(0, -1), ...selected.childIds]);
-	}, [index, selected]);
-	const { wires, anchors } = useWires(layout, highlighted, drag, animate);
-
 	React.useEffect(() => {
 		const container = containerRef.current;
 		if (!container || typeof ResizeObserver === 'undefined') return;
@@ -187,15 +165,18 @@ function OrgChartInner(props: OrgChartProps) {
 		return () => observer.disconnect();
 	}, []);
 
-	// Ease a person into view once they are laid out (after unfolding their managers).
-	const { reveal, viewportRef } = viewport;
+	// Ease a person into view once they are laid out (after unfolding their managers), framing
+	// where their card will settle rather than where it is mid-spring.
+	const { reveal, viewportRef, hold } = viewport;
 	React.useEffect(() => {
-		if (!revealRequest) return;
-		const node = findNode(layerRef.current, revealRequest.id);
-		if (node) reveal(node);
-	}, [layout, reveal, revealRequest]);
+		const person = revealRequest ? layout.byId.get(revealRequest.id) : undefined;
+		if (person) reveal({ ...person, x: person.x + shift.x, y: person.y + shift.y });
+	}, [layout, reveal, revealRequest, shift]);
+
+	const latest = useLatest({ props, index, layout, shift, compact, view: viewport.view, isControlled });
 
-	const latest = useLatest({ props, index, layout, compact, view: viewport.view, drag, isControlled });
+	// A press still running when the chart unmounts must not leave window listeners behind.
+	React.useEffect(() => () => press.current?.stopListening(), []);
 
 	const select = React.useCallback(
 		(id: string | null, andReveal = false) => {
@@ -212,14 +193,21 @@ function OrgChartInner(props: OrgChartProps) {
 		[latest],
 	);
 
-	const toggle = React.useCallback((id: string) => {
-		setCollapsed((current) => {
-			const next = new Set(current);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
-	}, []);
+	// Folding a team keeps the person's card (and the pointer on its footer) where it is, and the view
+	// stops auto-fitting: the chart reflows around the card instead of the camera jumping.
+	const toggle = React.useCallback(
+		(id: string) => {
+			hold();
+			setAnchorId(id);
+			setCollapsed((current) => {
+				const next = new Set(current);
+				if (next.has(id)) next.delete(id);
+				else next.add(id);
+				return next;
+			});
+		},
+		[hold],
+	);
 
 	const reparent = React.useCallback(
 		async (childId: string, parentId: string) => {
@@ -234,6 +222,9 @@ function OrgChartInner(props: OrgChartProps) {
 			}
 			const preserve = { positionTitle: child.positionTitle };
 			const previousParentId = child.parentId;
+			// The new manager holds still while their team makes room.
+			hold();
+			setAnchorId(parentId);
 			setCollapsed((current) => (current.has(parentId) ? new Set([...current].filter((id) => id !== parentId)) : current));
 			if (!isControlled) setInternalEdges((current) => current.map((edge) => (edge.id === childId ? { ...edge, parentId } : edge)));
 			try {
@@ -249,7 +240,17 @@ function OrgChartInner(props: OrgChartProps) {
 				setAnnouncement(`${personName(child)}'s reporting line could not be changed.`);
 			}
 		},
-		[latest],
+		[hold, latest],
+	);
+
+	/** Brings a person's settled slot into view, even while their card is still springing there. */
+	const revealPerson = React.useCallback(
+		(id: string) => {
+			const { layout, shift } = latest.current;
+			const person = layout.byId.get(id);
+			if (person) reveal({ ...person, x: person.x + shift.x, y: person.y + shift.y });
+		},
+		[latest, reveal],
 	);
 
 	const focusPerson = React.useCallback(
@@ -258,9 +259,61 @@ function OrgChartInner(props: OrgChartProps) {
 			const node = findNode(layerRef.current, id);
 			if (!node) return;
 			node.focus({ preventScroll: true });
-			reveal(node);
+			revealPerson(id);
+		},
+		[revealPerson],
+	);
+
+	/** Ends a press: a click selects, a drop on a manager reparents, and a dragged card springs back to its slot. */
+	const endPress = React.useCallback(
+		(drop: boolean) => {
+			const current = press.current;
+			if (!current) return;
+			press.current = null;
+			current.stopListening();
+			if (!current.moved) {
+				if (drop) select(current.id);
+				return;
+			}
+			setDrag(null);
+			if (drop && current.targetId) void reparent(current.id, current.targetId);
+		},
+		[reparent, select],
+	);
+
+	/** Past the drag threshold the pressed card follows the pointer, and the manager under it becomes the target. */
+	const dragTo = React.useCallback(
+		(event: PointerEvent) => {
+			const current = press.current;
+			if (!current) return;
+			// No button held: the release happened somewhere we never heard about (a context menu, another
+			// window). End the drag instead of letting the card follow the cursor.
+			if ((event.buttons & 1) === 0) return endPress(false);
+			const { props, layout, shift, view, index } = latest.current;
+			if (props.editable === false) return;
+			if (!current.moved) {
+				if (Math.hypot(event.clientX - current.x, event.clientY - current.y) < DRAG_THRESHOLD) return;
+				current.moved = true;
+				current.blocked = new Set([current.id, ...descendantsOf(index, current.id)]);
+			}
+			const frame = viewportRef.current?.getBoundingClientRect();
+			if (!frame) return;
+			// Pointer in layout coordinates: canvas units, minus the shift that keeps the anchor still.
+			const x = (event.clientX - frame.left - view.x) / view.zoom - shift.x;
+			const y = (event.clientY - frame.top - view.y) / view.zoom - shift.y;
+			const hit = layout.people.find(
+				(person) => !current.blocked.has(person.data.id) && x >= person.x && x <= person.x + person.width && y >= person.y && y <= person.y + person.height,
+			);
+			current.targetId = hit && hit.data.id !== layout.byId.get(current.id)?.parentId ? hit.data.id : null;
+			setDrag({
+				id: current.id,
+				dx: (event.clientX - current.x) / view.zoom,
+				dy: (event.clientY - current.y) / view.zoom,
+				targetId: current.targetId,
+				blocked: current.blocked,
+			});
 		},
-		[reveal],
+		[endPress, latest, viewportRef],
 	);
 
 	const canEdit = Boolean(onEditNode);
@@ -289,44 +342,44 @@ function OrgChartInner(props: OrgChartProps) {
 	const handlers = React.useMemo<NodeHandlers>(
 		() => ({
 			pointerDown(id, event) {
-				if (event.button !== 0 || (event.target as Element).closest('button, a, [role="menuitem"], [role="menu"]')) return;
-				event.currentTarget.setPointerCapture(event.pointerId);
-				press.current = { id, pointerId: event.pointerId, x: event.clientX, y: event.clientY, moved: false, blocked: EMPTY_SET };
-			},
-			pointerMove(id, event) {
-				const current = press.current;
-				if (!current || current.pointerId !== event.pointerId) return;
-				const { props, layout, view, index } = latest.current;
-				if (props.editable === false) return;
-				const dx = event.clientX - current.x;
-				const dy = event.clientY - current.y;
-				if (!current.moved) {
-					if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-					current.moved = true;
-					current.blocked = new Set([id, ...descendantsOf(index, id)]);
+				// One press at a time: a second finger or button never steals the card from the first.
+				if (press.current || event.button !== 0 || (event.target as Element).closest('button, a, [role="menuitem"], [role="menu"]')) return;
+				const { pointerId } = event;
+				try {
+					event.currentTarget.setPointerCapture(pointerId);
+				} catch {
+					// Capture is only a nicety here; the window listeners below see the whole press.
 				}
-				const frame = viewportRef.current?.getBoundingClientRect();
-				if (!frame) return;
-				const x = (event.clientX - frame.left - view.x) / view.zoom;
-				const y = (event.clientY - frame.top - view.y) / view.zoom;
-				const hit = layout.people.find(
-					(person) => !current.blocked.has(person.data.id) && x >= person.x && x <= person.x + person.width && y >= person.y && y <= person.y + person.height,
+				// Listen on the window, not the card: capture is lost if the card is re-inserted into
+				// the DOM mid-drag (a host saving an earlier move), and the release must still end the press.
+				const listeners = new AbortController();
+				const options = { signal: listeners.signal };
+				const own = (handler: (event: PointerEvent) => void) => (event: PointerEvent) => {
+					if (event.pointerId === pointerId) handler(event);
+				};
+				window.addEventListener('pointermove', own(dragTo), options);
+				window.addEventListener('pointerup', own(() => endPress(true)), options);
+				window.addEventListener('pointercancel', own(() => endPress(false)), options);
+				window.addEventListener('blur', () => endPress(false), options);
+				window.addEventListener(
+					'keydown',
+					(keyEvent) => {
+						if (keyEvent.key !== 'Escape') return;
+						keyEvent.preventDefault();
+						endPress(false);
+					},
+					options,
 				);
-				const targetId = hit && hit.data.id !== layout.byId.get(id)?.parentId ? hit.data.id : null;
-				setDrag({ id, dx: dx / view.zoom, dy: dy / view.zoom, targetId, blocked: current.blocked });
-			},
-			pointerUp(id, event) {
-				const current = press.current;
-				if (!current || current.pointerId !== event.pointerId) return;
-				press.current = null;
-				const targetId = latest.current.drag?.targetId;
-				setDrag(null);
-				if (!current.moved) select(id);
-				else if (targetId) void reparent(id, targetId);
-			},
-			pointerCancel() {
-				press.current = null;
-				setDrag(null);
+				press.current = {
+					id,
+					pointerId,
+					x: event.clientX,
+					y: event.clientY,
+					moved: false,
+					blocked: EMPTY_SET,
+					targetId: null,
+					stopListening: () => listeners.abort(),
+				};
 			},
 			keyDown(id, event) {
 				if (event.target !== event.currentTarget) return;
@@ -357,10 +410,8 @@ function OrgChartInner(props: OrgChartProps) {
 						event.preventDefault();
 						return select(id);
 					case 'Escape':
-						if (latest.current.drag) {
-							press.current = null;
-							setDrag(null);
-						} else select(null);
+						// During a press, Escape cancels the drag (the window listener); otherwise it clears the selection.
+						if (!press.current) select(null);
 						return;
 				}
 			},
@@ -368,14 +419,14 @@ function OrgChartInner(props: OrgChartProps) {
 				if (event.target !== event.currentTarget) return;
 				setActiveId(id);
 				// Keyboard focus (Tab into the tree) brings the card into view; a press on it does not.
-				if (!press.current) reveal(event.currentTarget);
+				if (!press.current) revealPerson(id);
 			},
 			toggle,
 			openMove: setMoveId,
 			edit,
 			remove,
 		}),
-		[edit, focusPerson, latest, remove, reparent, reveal, select, toggle, viewportRef],
+		[dragTo, edit, endPress, focusPerson, latest, remove, revealPerson, select, toggle],
 	);
 
 	const manager = selected?.parentId ? index.edges.get(selected.parentId) : undefined;
@@ -386,9 +437,45 @@ function OrgChartInner(props: OrgChartProps) {
 			})
 		: [];
 
+	// Built once per change to the chart itself, so a pan (which re-renders this component every
+	// frame) never walks hundreds of cards.
+	const content = React.useMemo(
+		() => (
+			<>
+				<OrgChartWires wires={scene.wires} anchors={scene.anchors} width={layout.width} height={layout.height} />
+				<div role="tree" aria-label="Reporting lines">
+					{scene.cards.map(({ person, x, y, enterFrom, leaving }) => {
+						const id = person.data.id;
+						const dragged = drag?.id === id ? drag : undefined;
+						const target = dragged?.targetId ? layout.byId.get(dragged.targetId) : undefined;
+						return (
+							<OrgChartNode
+								key={id}
+								person={person}
+								x={x}
+								y={y}
+								enterFrom={enterFrom}
+								leaving={leaving}
+								selected={id === selectedId}
+								tabStop={id === tabStopId}
+								editable={editable}
+								drag={dragged ? { dx: dragged.dx, dy: dragged.dy, overTarget: Boolean(target) } : null}
+								dropTarget={drag?.targetId === id}
+								blocked={Boolean(drag?.blocked.has(id))}
+								dropHint={target ? `Reports to ${personName(target.data)}` : undefined}
+								handlers={handlers}
+							/>
+						);
+					})}
+				</div>
+			</>
+		),
+		[drag, editable, handlers, layout, scene, selectedId, tabStopId],
+	);
+
 	// One container for every state, so the width observer keeps watching it when data arrives.
 	return (
-		<div ref={containerRef} className={cn('@container/chart relative h-[600px]', className)}>
+		<div ref={containerRef} style={CHART_SPRING_STYLE} className={cn('@container/chart relative h-[600px]', className)}>
 			{isLoading ? (
 				<OrgChartLoading />
 			) : edges.length === 0 ? (
@@ -425,43 +512,7 @@ function OrgChartInner(props: OrgChartProps) {
 							</>
 						}
 					>
-						<svg aria-hidden="true" className="pointer-events-none absolute top-0 left-0 overflow-visible" width={Math.max(1, layout.width)} height={Math.max(1, layout.height)}>
-							{wires.map((wire) => (
-								<CanvasWire
-									key={wire.id}
-									start={wire.start}
-									end={wire.end}
-									tone={wire.tone}
-									axis="vertical"
-									animated={wire.animated}
-									startDot={false}
-									glide={animate && !drag}
-								/>
-							))}
-							{anchors.map(([id, anchor]) => (
-								<WireDot key={id} at={anchor.point} glide={animate && !drag} stroke={WIRE_STROKE[anchor.live ? 'live' : 'rest']} />
-							))}
-						</svg>
-						<div role="tree" aria-label="Reporting lines">
-							{layout.people.map((person) => {
-								const id = person.data.id;
-								const target = drag?.id === id && drag.targetId ? layout.byId.get(drag.targetId) : undefined;
-								return (
-									<OrgChartNode
-										key={id}
-										person={person}
-										selected={id === selectedId}
-										tabStop={id === tabStopId}
-										editable={editable}
-										dragOffset={drag?.id === id ? drag : null}
-										dropTarget={drag?.targetId === id}
-										blocked={Boolean(drag?.blocked.has(id))}
-										dropHint={target ? `Reports to ${personName(target.data)}` : undefined}
-										handlers={handlers}
-									/>
-								);
-							})}
-						</div>
+						{content}
 					</CanvasSurface>
 					<p role="status" aria-live="polite" className="sr-only">
 						{announcement}
diff --git a/packages/ui/src/components/workspace-kit/canvas.tsx b/packages/ui/src/components/workspace-kit/canvas.tsx
index 4a25eba8..fed004c3 100644
--- a/packages/ui/src/components/workspace-kit/canvas.tsx
+++ b/packages/ui/src/components/workspace-kit/canvas.tsx
@@ -8,6 +8,8 @@ import { focusRingClass, pressClass, SurfaceBody, surfaceInsetClass, TooltipIcon
 import { prefersReducedMotion } from './reduced-motion';
 
 export type Viewport = { x: number; y: number; zoom: number };
+/** A rectangle in canvas units, e.g. where a node will settle. */
+export type CanvasBox = { x: number; y: number; width: number; height: number };
 
 type CanvasInset = { side: number; top: number; bottom: number };
 
@@ -19,6 +21,8 @@ export type CanvasViewportOptions = {
 	fit?: 'width' | 'contain';
 	/** Content height in canvas units; `contain` needs it. */
 	contentHeight?: number;
+	/** Top-left corner of the content in canvas units, when it doesn't start at the origin. */
+	contentOrigin?: { x: number; y: number };
 	minZoom?: number;
 	maxZoom?: number;
 	/**
@@ -59,6 +63,8 @@ function zoomAround(view: Viewport, zoom: number, cx: number, cy: number): Viewp
 export function useCanvasViewport(contentWidth: number, options: CanvasViewportOptions = {}) {
 	const { fit: fitMode = 'width', contentHeight = 0, minZoom = 0.5, maxZoom = 2 } = options;
 	const minFitZoom = options.minFitZoom ?? minZoom;
+	const originX = options.contentOrigin?.x ?? 0;
+	const originY = options.contentOrigin?.y ?? 0;
 	const inset = options.inset ?? DEFAULT_INSET;
 	const { side, top, bottom } = inset;
 	const viewportRef = React.useRef<HTMLDivElement | null>(null);
@@ -106,32 +112,53 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		const availableWidth = width - side * 2;
 		if (fitMode === 'width') {
 			const zoom = Math.max(minZoom, Math.min(1, Math.floor((availableWidth / contentWidth) * 20) / 20));
-			return { x: Math.max(side, Math.round((width - contentWidth * zoom) / 2)), y: top, zoom };
+			return { x: Math.max(side, Math.round((width - contentWidth * zoom) / 2)) - originX * zoom, y: top - originY * zoom, zoom };
 		}
 		const availableHeight = viewport.clientHeight - top - bottom;
 		const fitZoom = Math.min(1, availableWidth / contentWidth, contentHeight ? availableHeight / contentHeight : 1);
 		const zoom = Math.max(minFitZoom, Math.floor(fitZoom * 20) / 20);
 		return {
-			x: Math.round((width - contentWidth * zoom) / 2),
-			y: Math.round(top + Math.max(0, (availableHeight - contentHeight * zoom) / 2)),
+			x: Math.round((width - contentWidth * zoom) / 2 - originX * zoom),
+			y: Math.round(top + Math.max(0, (availableHeight - contentHeight * zoom) / 2) - originY * zoom),
 			zoom,
 		};
-	}, [bottom, contentHeight, contentWidth, fitMode, minFitZoom, minZoom, side, top]);
+	}, [bottom, contentHeight, contentWidth, fitMode, minFitZoom, minZoom, originX, originY, side, top]);
 
-	// Keep fitting as the canvas resizes (a panel opening, a mobile tab
-	// revealing it) until the person takes over.
-	React.useLayoutEffect(() => {
-		if (!element) return;
-		const refit = () => {
+	// Keep fitting until the person takes over: at once as the canvas resizes (a panel opening, a
+	// mobile tab revealing it), and eased when the content changes (data arriving, say).
+	const refit = React.useCallback(
+		(ease: keyof typeof EASE | null) => {
 			if (touched.current) return;
 			const next = fitted();
-			if (next) place(() => next, null);
-		};
-		refit();
-		const observer = new ResizeObserver(refit);
+			if (next) place(() => next, ease);
+		},
+		[fitted, place],
+	);
+	const latestRefit = React.useRef(refit);
+	const fittedElement = React.useRef<HTMLDivElement | null>(null);
+	React.useLayoutEffect(() => {
+		latestRefit.current = refit;
+		// A new canvas fits at once; new content eases into its new frame.
+		if (element) refit(fittedElement.current === element ? 'reveal' : null);
+		fittedElement.current = element;
+	}, [element, refit]);
+	React.useLayoutEffect(() => {
+		if (!element) return;
+		let size = [element.clientWidth, element.clientHeight];
+		const observer = new ResizeObserver(() => {
+			// The first callback reports the size we already have; skipping it keeps an eased refit running.
+			if (size[0] === element.clientWidth && size[1] === element.clientHeight) return;
+			size = [element.clientWidth, element.clientHeight];
+			latestRefit.current(null);
+		});
 		observer.observe(element);
 		return () => observer.disconnect();
-	}, [element, fitted, place]);
+	}, [element]);
+
+	/** Keeps the current view and stops fitting, as a pan would; for edits the person makes to the content. */
+	const hold = React.useCallback(() => {
+		touched.current = true;
+	}, []);
 
 	/** Frames the content again and resumes fitting on resize. */
 	const fit = React.useCallback(() => {
@@ -150,13 +177,25 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		[clampZoom, move],
 	);
 
-	/** Eases the view just enough to bring `node` inside the canvas margins. */
+	/**
+	 * Eases the view just enough to bring a node inside the canvas margins.
+	 * Pass a `CanvasBox` for a node that is still moving to where it will settle.
+	 */
 	const reveal = React.useCallback(
-		(node: Element) => {
+		(target: Element | CanvasBox) => {
 			const viewport = viewportRef.current;
 			if (!viewport) return;
 			const frame = viewport.getBoundingClientRect();
-			const rect = node.getBoundingClientRect();
+			const { x, y, zoom } = viewRef.current;
+			const rect =
+				target instanceof Element
+					? target.getBoundingClientRect()
+					: {
+							left: frame.left + x + target.x * zoom,
+							top: frame.top + y + target.y * zoom,
+							right: frame.left + x + (target.x + target.width) * zoom,
+							bottom: frame.top + y + (target.y + target.height) * zoom,
+						};
 			let dx = 0;
 			let dy = 0;
 			if (rect.right > frame.right - side) dx = frame.right - side - rect.right;
@@ -209,6 +248,11 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
 			const start = gesture.current;
 			if (!start || !pointers.current.has(event.pointerId)) return;
+			// No button held: the release happened somewhere we never heard about (a context menu, another window).
+			if ((event.buttons & 1) === 0) {
+				handlers.onPointerUp(event);
+				return;
+			}
 			pointers.current.set(event.pointerId, { x: event.clientX, y: event.clientY });
 			const points = [...pointers.current.values()];
 			const x = points.reduce((sum, point) => sum + point.x, 0) / points.length;
@@ -260,7 +304,7 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		view,
 		transition,
 		dragging,
-		handlers: { ...handlers, onPointerCancel: handlers.onPointerUp },
+		handlers: { ...handlers, onPointerCancel: handlers.onPointerUp, onLostPointerCapture: handlers.onPointerUp },
 		zoomTo,
 		zoomIn: () => zoomTo(view.zoom + ZOOM_STEP),
 		zoomOut: () => zoomTo(view.zoom - ZOOM_STEP),
@@ -268,6 +312,7 @@ export function useCanvasViewport(contentWidth: number, options: CanvasViewportO
 		canZoomOut: view.zoom > minZoom,
 		fit,
 		reveal,
+		hold,
 		/** True when the last press panned; use it to ignore the click that ends a drag. */
 		wasPanned: () => panned.current,
 	};
diff --git a/packages/ui/src/stories/OrgChart.stories.tsx b/packages/ui/src/stories/OrgChart.stories.tsx
index 78ae35dc..f12e02a0 100644
--- a/packages/ui/src/stories/OrgChart.stories.tsx
+++ b/packages/ui/src/stories/OrgChart.stories.tsx
@@ -67,6 +67,29 @@ function largeOrg(): OrgChartEdge[] {
 const LARGE = largeOrg();
 const LARGE_FOLDED = LARGE.filter((edge) => edge.id.split('-').length === 3).map((edge) => edge.id);
 
+/** 391 people with uneven team sizes, all unfolded: the worst case for folding, unfolding, and dragging. */
+function stressOrg(): OrgChartEdge[] {
+	const edges = [person('s', null, 'Rowan Ellis', 'Chief Executive Officer')];
+	const levels = [
+		{ count: 6, title: 'Vice President' },
+		{ count: 4, title: 'Director' },
+		{ count: 3, title: 'Manager' },
+		{ count: 4, title: 'Engineer' },
+	];
+	const grow = (parentId: string, depth: number) => {
+		const level = levels[depth];
+		if (!level) return;
+		for (let index = 0; index < level.count; index += 1) {
+			const id = `${parentId}.${index + 1}`;
+			edges.push(person(id, parentId, `Person ${id.slice(2)}`, level.title));
+			grow(id, depth + 1);
+		}
+	};
+	grow('s', 0);
+	return edges;
+}
+const STRESS = stressOrg();
+
 function Frame({ children, width = 960, height = 620 }: { children: React.ReactNode; width?: number; height?: number }) {
 	return <div style={{ width, height, maxWidth: '100%' }}>{children}</div>;
 }
@@ -187,6 +210,31 @@ export const LargeOrganization: Story = {
 	),
 };
 
+/**
+ * 391 people, all unfolded, with a host that saves each move after 300ms.
+ * Fold and unfold whole divisions, and drag again while a save is in flight.
+ */
+export const StressTest: Story = {
+	render: () => {
+		const [edges, setEdges] = React.useState(STRESS);
+		const { entries, log } = useHostLog();
+		return (
+			<Frame width={1180} height={720}>
+				<OrgChart
+					className="h-full"
+					edges={edges}
+					onReparent={async (child, parent) => {
+						await new Promise((resolve) => setTimeout(resolve, 300));
+						setEdges((current) => current.map((edge) => (edge.id === child ? { ...edge, parentId: parent } : edge)));
+						log(`onReparent(${child} → ${parent})`);
+					}}
+				/>
+				<HostLog entries={entries} />
+			</Frame>
+		);
+	},
+};
+
 /** Below 640px the cards switch to their compact size and the details panel docks to the bottom. */
 export const Compact: Story = {
 	render: () => (