@dforge-core/diagram 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -0,0 +1,112 @@
+# Changelog
+
+All notable changes to `@dforge-core/diagram` are documented here.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this package adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.0.4] — 2026-09-14
+
+### Fixed
+
+- **Nodes no longer scale wrongly in Safari/WebKit.** Entity nodes rendered inside an
+  SVG `<foreignObject>`, and WebKit does not apply a scaled SVG ancestor transform to
+  the HTML content of a `foreignObject` — so zooming moved the boxes without resizing
+  their contents. Nodes now render in an HTML overlay layer that carries the same
+  pan/zoom transform as the SVG `<g>` beneath it, which every browser applies the same
+  way.
+
+  The layer is `pointer-events: none` with each node opting back in, so empty space
+  still falls through to the SVG for panning, area-select and edge hit areas. Pointer
+  and double-click handlers moved from the `<svg>` up to the container, since events
+  now originate on both sides of that boundary; the delegated walk-up stops at the
+  container rather than the SVG element. Overlaid zoom controls are excluded from the
+  delegated handler so their clicks aren't read as a pan.
+
+### Added
+
+- **`buildGraph` takes `localized` and `moduleColorIndex` options.**
+
+  `localized` draws `resLabelLocalized` in place of `resLabel` wherever a translation
+  exists, so a tenant that has translated its metadata can read the diagram in its own
+  language. The base label stays the default: the model browser is a developer view,
+  and `metadata.getModel` deliberately loads install-time labels.
+
+  `moduleColorIndex` overrides the default palette assignment of "position in
+  `modules`". Needed when `modules` is an arbitrary subset — a module plus the ones it
+  connects to — which must keep the colors those modules carry on their own diagrams.
+  `intraModuleEdgesOnly` and `colorOffset` are unchanged.
+
+- **`findRelatedModules` and `expandBridgeSelection`**, for drawing a module alongside
+  its neighbours. A bridge module (`crm-fin`, `wms-fin`) owns no tables of its own — it
+  only adds extension columns to the entities of the modules it bridges — so its
+  diagram was empty, hiding the one thing the module does.
+
+  `findRelatedModules(response, moduleCd)` returns the modules on either end of a
+  dependency plus those reachable through a cross-module reference.
+  `expandBridgeSelection(response, moduleCds)` pulls in a selected bridge's non-system,
+  non-bridge dependencies, so picking the bridge alone still draws something.
+
+- **`entityLabel(ent, localized?)` and `columnLabel(col, localized?)`** — the label
+  fallback used internally by `buildGraph`, exported so a consumer rendering its own
+  chrome resolves labels the same way.
+
+- **`SimpleDiagram` accepts `fitKey`** (`string | number`, optional). Changing it
+  re-fits the content to the viewport. Added for the print view, where the diagram is
+  laid out into a fixed sheet box rather than the screen viewport, and the fit has to
+  be recomputed when that box appears.
+
+- **Three optional fields on the model contract**, mirroring what `metadata.getModel`
+  now returns: `ModelModule.dependencies` (manifest `dependencies` keys),
+  `ModelEntity.resLabelLocalized` and `ModelColumn.resLabelLocalized` (label for the
+  viewer's culture, absent when no translation exists).
+
+All of the above are additive. Component props are unchanged apart from the optional
+`fitKey`, so 0.0.3 code compiles and behaves the same against this release.
+
+### Changed
+
+- `@dforge-core/metadata` moves from `0.0.2` to `0.0.22`. It is a type-only import
+  (`model-types.ts` pulls `BaseDatatypeCd`, `ColumnTypeCd` and `FieldTypeCd` from it),
+  so the jump carries no runtime code.
+
+## [0.0.3] — 2026-06-13
+
+### Changed
+
+- **The model contract's code unions come from `@dforge-core/metadata`.**
+  `model-types.ts` had restated `BaseDatatypeCd`, `ColumnTypeCd` and `FieldTypeCd`
+  inline; it now type-imports them from the package that owns those registries, which
+  is the same source the SDK reads. Adds `@dforge-core/metadata` as this package's only
+  dependency.
+
+## [0.0.2] — 2026-06-12
+
+### Removed
+
+- **The `bootstrap-icons` dependency.** `IconButton` rendered icons as Bootstrap Icons
+  font classes, which silently drew nothing unless the host page happened to load that
+  stylesheet. The handful of icons the diagram controls need are now inline SVG paths
+  in `icons.ts`, so the package renders correctly on any page.
+
+## [0.0.1] — 2026-06-09
+
+### Added
+
+- Initial release, published so the diagram can be used outside this repo (the VS Code
+  extension is the first such consumer). `SimpleDiagram`, `ModelDiagram`, `EntityNode`,
+  `WorkspaceMap` and `ModuleCard`, with the layout, edge-routing, graph-building,
+  geometry, pan/zoom and i18n helpers behind them.
+- `model-types.ts` — a local mirror of the dForge API `metadata.getModel` shape, so the
+  package types the payload it draws without depending on the SDK.
+- MIT `LICENSE` and `README.md`.
+
+### Changed
+
+- Renamed from `@dforge/diagram` to `@dforge-core/diagram`.
+
+### Removed
+
+- **The `@dforge/sdk` and `@dforge/ui` dependencies**, both workspace-only packages
+  that made this one unpublishable. The single component used from `@dforge/ui`,
+  `IconButton`, is now local. `svelte` is the only peer dependency.

package/dist/SimpleDiagram/ModelDiagram.svelte

@@ -264,14 +264,18 @@
 	});
 </script>
 
-<div class="model-diagram" bind:this={containerEl}>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="model-diagram"
+	bind:this={containerEl}
+	onpointermove={handlePointerMove}
+	onpointerup={handlePointerUp}
+>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<svg
 		bind:this={svgEl}
 		role="application"
 		onpointerdown={handleBackgroundPointerDown}
-		onpointermove={handlePointerMove}
-		onpointerup={handlePointerUp}
 	>
 		<defs>
 			<pattern id={patternId} width="20" height="20" patternUnits="userSpaceOnUse"
@@ -395,26 +399,33 @@
 				{/if}
 			{/if}
 
-			<!-- Nodes -->
-			{#each nodes as node (node.id)}
-				{@const pos = nodePositions[node.id] ?? { x: node.x, y: node.y }}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<foreignObject
-					x={pos.x}
-					y={pos.y}
-					width={node.width}
-					height={node.height}
-					onpointerdown={(e: PointerEvent) => handleNodePointerDown(e, node.id)}
-					class="diagram-node-fo"
-				>
-					<div xmlns="http://www.w3.org/1999/xhtml">
-						<EntityNode data={node.data} />
-					</div>
-				</foreignObject>
-			{/each}
 		</g>
 	</svg>
 
+	<!--
+		Nodes render in an HTML overlay layer (not SVG <foreignObject>) so they
+		scale correctly in Safari/WebKit, which does not apply a scaled SVG
+		ancestor transform to foreignObject HTML content. The layer shares the
+		same pan/zoom transform as the SVG <g> above via a CSS transform.
+	-->
+	<div
+		class="node-layer"
+		style:transform="translate({pz.transform.x}px, {pz.transform.y}px) scale({pz.transform.k})"
+		style:transform-origin="0 0"
+	>
+		{#each nodes as node (node.id)}
+			{@const pos = nodePositions[node.id] ?? { x: node.x, y: node.y }}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="diagram-node"
+				style="left: {pos.x}px; top: {pos.y}px; width: {node.width}px; height: {node.height}px;"
+				onpointerdown={(e: PointerEvent) => handleNodePointerDown(e, node.id)}
+			>
+				<EntityNode data={node.data} />
+			</div>
+		{/each}
+	</div>
+
 	<!-- Controls -->
 	<div class="diagram-controls">
 		<IconButton icon="bi-plus-lg" title={t.zoom_in} size="sm" onclick={() => pz.zoomBy(1.3)} />
@@ -442,12 +453,23 @@
 		cursor: grabbing;
 	}
 
-	.diagram-node-fo {
+	.node-layer {
+		position: absolute;
+		inset: 0;
+		/* Empty areas let pointer events fall through to the SVG (pan / edge hit
+		   areas); individual nodes re-enable events below. transform /
+		   transform-origin are applied via style: directives. */
+		pointer-events: none;
+	}
+
+	.diagram-node {
+		position: absolute;
+		box-sizing: border-box;
+		pointer-events: auto;
 		cursor: grab;
-		overflow: visible;
 	}
 
-	.diagram-node-fo:active {
+	.diagram-node:active {
 		cursor: grabbing;
 	}
 

package/dist/SimpleDiagram/ModelDiagram.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModelDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/ModelDiagram.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAe,MAAM,kBAAkB,CAAC;AACrF,OAAO,EAAiI,KAAK,QAAQ,EAAsB,MAAM,iBAAiB,CAAC;AAMlM,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;CAC7E;AAiWF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ModelDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/ModelDiagram.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAe,MAAM,kBAAkB,CAAC;AACrF,OAAO,EAAiI,KAAK,QAAQ,EAAsB,MAAM,iBAAiB,CAAC;AAMlM,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9D,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,WAAW,CAAC;QAAC,IAAI,EAAE,QAAQ,CAAA;KAAE,EAAE,KAAK,IAAI,CAAC;CAC7E;AAmWF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/SimpleDiagram/SimpleDiagram.svelte

@@ -16,12 +16,19 @@
 		nodes: DiagramNode[];
 		edges: ResolvedEdge[];
 		storageKey?: string;
+		/**
+		 * Refit the diagram to its container whenever this value changes. For a
+		 * host that resizes the viewport out from under the diagram (entering a
+		 * full-screen or print layout), where the saved transform would otherwise
+		 * leave the content parked off to one side of a much larger canvas.
+		 */
+		fitKey?: string | number;
 		minZoom?: number;
 		maxZoom?: number;
 		onNodeDblClick?: (nodeId: string) => void;
 	}
 
-	let { nodes, edges, storageKey, minZoom = 0.1, maxZoom = 2, onNodeDblClick }: Props = $props();
+	let { nodes, edges, storageKey, fitKey, minZoom = 0.1, maxZoom = 2, onNodeDblClick }: Props = $props();
 
 	let svgEl: SVGSVGElement;
 	let containerEl: HTMLDivElement;
@@ -34,6 +41,66 @@
 	let draggingSeg = $state<{ edgeId: string; segIndex: number; orientation: 'H' | 'V' } | null>(null);
 	let patternId = `grid-${Math.random().toString(36).slice(2, 8)}`;
 
+	// --- Undo / redo of layout edits (node moves, edge reshapes, resets) ---
+
+	interface LayoutSnapshot {
+		dragOffsets: Record<string, { dx: number; dy: number }>;
+		edgeOverrides: Record<string, Point[]>;
+	}
+
+	const HISTORY_LIMIT = 100;
+	let undoStack = $state.raw<LayoutSnapshot[]>([]);
+	let redoStack = $state.raw<LayoutSnapshot[]>([]);
+	let gestureStart: LayoutSnapshot | null = null;
+	let gestureMoved = false;
+
+	const takeSnapshot = (): LayoutSnapshot =>
+		$state.snapshot({ dragOffsets, edgeOverrides }) as LayoutSnapshot;
+
+	function pushHistory(snap: LayoutSnapshot) {
+		undoStack = [...undoStack.slice(-(HISTORY_LIMIT - 1)), snap];
+		redoStack = [];
+	}
+
+	/** Record the gesture's starting state, if the gesture changed anything. */
+	function commitGesture() {
+		gestureMoved = false;
+		if (!gestureStart) return;
+		if (JSON.stringify(gestureStart) !== JSON.stringify(takeSnapshot())) pushHistory(gestureStart);
+		gestureStart = null;
+	}
+
+	function applySnapshot(snap: LayoutSnapshot) {
+		dragOffsets = snap.dragOffsets;
+		edgeOverrides = snap.edgeOverrides;
+		autoEdges = routeWithOffsets(snap.dragOffsets);
+	}
+
+	function undo() {
+		const snap = undoStack.at(-1);
+		if (!snap) return;
+		redoStack = [...redoStack, takeSnapshot()];
+		undoStack = undoStack.slice(0, -1);
+		applySnapshot(snap);
+	}
+
+	function redo() {
+		const snap = redoStack.at(-1);
+		if (!snap) return;
+		undoStack = [...undoStack, takeSnapshot()];
+		redoStack = redoStack.slice(0, -1);
+		applySnapshot(snap);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (!(e.metaKey || e.ctrlKey) || e.altKey || dragging || draggingSeg) return;
+		const key = e.key.toLowerCase();
+		if (key === 'z' && !e.shiftKey) undo();
+		else if ((key === 'z' && e.shiftKey) || (key === 'y' && e.ctrlKey)) redo();
+		else return;
+		e.preventDefault();
+	}
+
 	const pz = createPanZoom({
 		get minZoom() { return minZoom; },
 		get maxZoom() { return maxZoom; },
@@ -80,18 +147,8 @@
 			edgeOverrides = saved.edgeOverrides;
 			pz.setTransform(saved.transform);
 			restoredTransform = true;
-			// Re-route edges for moved nodes (use local `offsets` to avoid reading $state)
-			const movedIds = new Set(Object.keys(offsets));
-			const posMap: Record<string, DiagramNode> = {};
-			for (const n of nodes) {
-				const off = offsets[n.id];
-				posMap[n.id] = off ? { ...n, x: n.x + off.dx, y: n.y + off.dy } : n;
-			}
-			const posLookup = (id: string) => posMap[id];
-			autoEdges = edges.map((e) => {
-				if (!movedIds.has(e.source) && !movedIds.has(e.target)) return e;
-				return routeEdge(e, posLookup);
-			});
+			// Use local `offsets` to avoid reading $state
+			autoEdges = routeWithOffsets(offsets);
 		} else if (saved) {
 			dragOffsets = {};
 			edgeOverrides = saved.edgeOverrides;
@@ -106,8 +163,25 @@
 		}
 		selectedNodeIds = new Set();
 		selectedEdgeId = null;
+		undoStack = [];
+		redoStack = [];
 	});
 
+	/** Auto-route edges for the given node offsets; edges between unmoved nodes keep their layout route. */
+	function routeWithOffsets(offsets: Record<string, { dx: number; dy: number }>): ResolvedEdge[] {
+		const movedIds = new Set(Object.keys(offsets));
+		const posMap: Record<string, DiagramNode> = {};
+		for (const n of nodes) {
+			const off = offsets[n.id];
+			posMap[n.id] = off ? { ...n, x: n.x + off.dx, y: n.y + off.dy } : n;
+		}
+		const posLookup = (id: string) => posMap[id];
+		return edges.map((e) => {
+			if (!movedIds.has(e.source) && !movedIds.has(e.target)) return e;
+			return routeEdge(e, posLookup);
+		});
+	}
+
 	// Derive node positions with drag offsets applied
 	const nodePositions = $derived.by(() => {
 		const pos: Record<string, DiagramNode> = {};
@@ -173,10 +247,14 @@
 
 	// --- Delegated event helpers ---
 
-	/** Walk up from event target to find a data attribute (works across HTML/SVG boundary in foreignObject). */
+	/**
+	 * Walk up from event target to find a data attribute. Delegation runs on the
+	 * container, so nodes (HTML overlay) and edges/handles (SVG) both resolve here;
+	 * we stop at the container element.
+	 */
 	function closest(target: Element, attr: string): Element | null {
 		let el: Element | null = target;
-		while (el && el !== svgEl) {
+		while (el && el !== containerEl) {
 			if (el.hasAttribute(attr)) return el;
 			// parentElement is null at HTML↔SVG boundary in some browsers; fall back to parentNode
 			el = el.parentElement ?? (el.parentNode as Element | null);
@@ -193,6 +271,14 @@
 	function handlePointerDown(e: PointerEvent) {
 		const target = e.target as Element;
 
+		// Ignore interactions that originate on the overlaid controls (buttons
+		// handle their own clicks). Handlers now live on the container, so control
+		// clicks would otherwise reach this delegated handler.
+		if (target.closest('.diagram-controls')) return;
+
+		// Take focus so Ctrl/Cmd+Z reaches handleKeyDown
+		containerEl.focus({ preventScroll: true });
+
 		// Segment drag handle
 		const handle = closest(target, 'data-handle');
 		if (handle) {
@@ -270,6 +356,7 @@
 		}
 		if (pz.onPointerMove(e)) return;
 		if (draggingSeg) {
+			gestureMoved = true;
 			const pos = pz.clientToSvg(e.clientX, e.clientY);
 			const pts = getEdgePoints(draggingSeg.edgeId);
 			if (pts.length === 0) return;
@@ -278,6 +365,7 @@
 			return;
 		}
 		if (dragging) {
+			gestureMoved = true;
 			const pos = pz.clientToSvg(e.clientX, e.clientY);
 			const newOffsets = { ...dragOffsets };
 			for (const [nid, off] of Object.entries(dragging.offsets)) {
@@ -318,12 +406,16 @@
 		if (draggingSeg) {
 			const edgeId = draggingSeg.edgeId;
 			const pts = edgeOverrides[edgeId];
-			if (pts) {
+			// A handle click without a move must not turn the auto route into an override
+			if (!gestureMoved && gestureStart) {
+				edgeOverrides = gestureStart.edgeOverrides;
+			} else if (pts) {
 				edgeOverrides = { ...edgeOverrides, [edgeId]: consolidatePoints(pts) };
 			}
 		}
 		dragging = null;
 		draggingSeg = null;
+		commitGesture();
 	}
 
 	// --- Node interaction ---
@@ -351,12 +443,15 @@
 				offsets[nid] = { offsetX: pos.x - np.x, offsetY: pos.y - np.y };
 			}
 		}
+		gestureStart = takeSnapshot();
 		dragging = { nodeId, offsets };
 	}
 
 	// --- Edge interaction ---
 
 	function resetEdgeRoute(edgeId: string) {
+		if (!edgeOverrides[edgeId]) return;
+		pushHistory(takeSnapshot());
 		const { [edgeId]: _, ...rest } = edgeOverrides;
 		edgeOverrides = rest;
 	}
@@ -364,6 +459,7 @@
 	function startSegDrag(_e: PointerEvent, edgeId: string, segIndex: number, orientation: 'H' | 'V') {
 		const pts = getEdgePoints(edgeId);
 		if (pts.length === 0) return;
+		gestureStart = takeSnapshot();
 
 		if (!edgeOverrides[edgeId]) {
 			edgeOverrides = { ...edgeOverrides, [edgeId]: pts.map((p) => ({ ...p })) };
@@ -377,6 +473,7 @@
 	function startSplitDrag(_e: PointerEvent, edgeId: string, segIndex: number, orientation: 'H' | 'V') {
 		const pts = getEdgePoints(edgeId);
 		if (pts.length === 0) return;
+		gestureStart = takeSnapshot();
 
 		const jog = insertJog(pts, segIndex, orientation);
 
@@ -405,6 +502,7 @@
 	}
 
 	function resetLayout() {
+		if (Object.keys(dragOffsets).length > 0 || Object.keys(edgeOverrides).length > 0) pushHistory(takeSnapshot());
 		dragOffsets = {};
 		edgeOverrides = {};
 		selectedNodeIds = new Set();
@@ -413,6 +511,25 @@
 		requestAnimationFrame(() => fitView());
 	}
 
+	// Refit on fitKey change. Skips the very first run so it doesn't fight the
+	// restored transform on mount.
+	//
+	// The first fit is synchronous, not deferred to a frame: a host entering a
+	// print layout flips fitKey inside `beforeprint` and flushes, and the print
+	// snapshot is taken as soon as that handler returns — anything left to rAF
+	// misses it entirely. Measuring here forces the pending layout, so the new
+	// container size is already available. The rAF pass after it is a cheap
+	// idempotent safety net for hosts whose box settles a frame late (CSS
+	// transitions on the shell); re-fitting to the same bounds is a no-op.
+	let fitKeySeen = false;
+	$effect(() => {
+		fitKey; // track
+		if (fitKey === undefined) return;
+		if (!fitKeySeen) { fitKeySeen = true; return; }
+		fitView();
+		requestAnimationFrame(() => fitView());
+	});
+
 	onMount(() => {
 		svgEl.addEventListener('wheel', pz.handleWheel, { passive: false });
 		if (!restoredTransform) {
@@ -425,15 +542,20 @@
 	});
 </script>
 
-<div class="model-diagram" bind:this={containerEl}>
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="model-diagram"
+	bind:this={containerEl}
+	tabindex="-1"
+	onkeydown={handleKeyDown}
+	onpointerdown={handlePointerDown}
+	onpointermove={handlePointerMove}
+	onpointerup={handlePointerUp}
+	ondblclick={handleDblClick}
+>
 	<svg
 		bind:this={svgEl}
 		role="application"
-		onpointerdown={handlePointerDown}
-		onpointermove={handlePointerMove}
-		onpointerup={handlePointerUp}
-		ondblclick={handleDblClick}
 	>
 		<defs>
 			<pattern id={patternId} width="20" height="20" patternUnits="userSpaceOnUse"
@@ -503,24 +625,6 @@
 				{/if}
 			{/each}
 
-			<!-- Nodes -->
-			{#each nodes as node (node.id)}
-				{@const pos = nodePositions[node.id] ?? node}
-				{@const isSelected = selectedNodeIds.has(node.id)}
-				<foreignObject
-					x={pos.x}
-					y={pos.y}
-					width={node.width}
-					height={node.height}
-					class="diagram-node-fo"
-					class:selected={isSelected}
-				>
-					<div xmlns="http://www.w3.org/1999/xhtml" data-node-id={node.id}>
-						<EntityNode data={node.data} />
-					</div>
-				</foreignObject>
-			{/each}
-
 			<!-- Selected edge on top of nodes -->
 			{#if selectedEdgeId}
 				{#each resolvedEdges as edge (edge.id)}
@@ -587,11 +691,39 @@
 		</g>
 	</svg>
 
+	<!--
+		Nodes render in an HTML overlay layer (not SVG <foreignObject>) so they
+		scale correctly in Safari/WebKit, which does not apply a scaled SVG
+		ancestor transform to foreignObject HTML content. The layer shares the
+		same pan/zoom transform as the SVG <g> above. Pointer events are handled
+		by delegation on the container (see handlePointerDown), so nodes only need
+		their data-node-id and to opt back into pointer events.
+	-->
+	<div
+		class="node-layer"
+		style:transform="translate({pz.transform.x}px, {pz.transform.y}px) scale({pz.transform.k})"
+		style:transform-origin="0 0"
+	>
+		{#each nodes as node (node.id)}
+			{@const pos = nodePositions[node.id] ?? node}
+			<div
+				class="diagram-node"
+				class:selected={selectedNodeIds.has(node.id)}
+				style="left: {pos.x}px; top: {pos.y}px; width: {node.width}px; height: {node.height}px;"
+				data-node-id={node.id}
+			>
+				<EntityNode data={node.data} />
+			</div>
+		{/each}
+	</div>
+
 	<!-- Controls -->
 	<div class="diagram-controls">
 		<IconButton icon="bi-plus-lg" title={t.zoom_in} size="sm" onclick={() => pz.zoomBy(1.3)} />
 		<IconButton icon="bi-dash-lg" title={t.zoom_out} size="sm" onclick={() => pz.zoomBy(1 / 1.3)} />
 		<IconButton icon="bi-fullscreen" title={t.fit_view} size="sm" onclick={fitView} />
+		<IconButton icon="bi-arrow-90deg-left" title={t.undo} size="sm" disabled={undoStack.length === 0} onclick={undo} />
+		<IconButton icon="bi-arrow-90deg-right" title={t.redo} size="sm" disabled={redoStack.length === 0} onclick={redo} />
 		<IconButton icon="bi-arrow-counterclockwise" title={t.reset_layout} size="sm" onclick={resetLayout} />
 	</div>
 </div>
@@ -602,6 +734,7 @@
 		height: 100%;
 		position: relative;
 		overflow: hidden;
+		outline: none;
 	}
 
 	.model-diagram svg {
@@ -615,16 +748,28 @@
 		cursor: grabbing;
 	}
 
-	.diagram-node-fo {
+	.node-layer {
+		position: absolute;
+		inset: 0;
+		/* Empty areas let pointer events fall through to the SVG (pan / area
+		   select / edge hit areas); individual nodes re-enable events below.
+		   transform / transform-origin are applied via style: directives so the
+		   layer tracks the SVG <g> transform exactly. */
+		pointer-events: none;
+	}
+
+	.diagram-node {
+		position: absolute;
+		box-sizing: border-box;
+		pointer-events: auto;
 		cursor: grab;
-		overflow: visible;
 	}
 
-	.diagram-node-fo.selected {
+	.diagram-node.selected {
 		filter: drop-shadow(0 0 4px var(--bs-primary, #0d6efd));
 	}
 
-	.diagram-node-fo:active {
+	.diagram-node:active {
 		cursor: grabbing;
 	}
 

package/dist/SimpleDiagram/SimpleDiagram.svelte.d.ts

@@ -3,6 +3,13 @@ interface Props {
     nodes: DiagramNode[];
     edges: ResolvedEdge[];
     storageKey?: string;
+    /**
+     * Refit the diagram to its container whenever this value changes. For a
+     * host that resizes the viewport out from under the diagram (entering a
+     * full-screen or print layout), where the saved transform would otherwise
+     * leave the content parked off to one side of a much larger canvas.
+     */
+    fitKey?: string | number;
     minZoom?: number;
     maxZoom?: number;
     onNodeDblClick?: (nodeId: string) => void;

package/dist/SimpleDiagram/SimpleDiagram.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/SimpleDiagram.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAS,MAAM,kBAAkB,CAAC;AAUxE,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAohBF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SimpleDiagram.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/SimpleDiagram.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAS,MAAM,kBAAkB,CAAC;AAUxE,UAAU,KAAK;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAooBF,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/SimpleDiagram/simple-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"simple-layout.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/simple-layout.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAS,MAAM,kBAAkB,CAAC;AActF,MAAM,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;AA0HjE;;GAEG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,WAAW,EAAE,GAClB;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,CAejD;AAqFD;;;;GAIG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,WAAW,EAAE,GAClB;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,CAmCjD;AA0GD;;GAEG;AACH,wBAAgB,SAAS,CACxB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,UAAU,GAChB,YAAY,CAcd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC5B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,WAAW,EAAE,GAClB,YAAY,EAAE,CAIhB"}
+{"version":3,"file":"simple-layout.d.ts","sourceRoot":"","sources":["../../src/lib/SimpleDiagram/simple-layout.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAS,MAAM,kBAAkB,CAAC;AAetF,MAAM,MAAM,UAAU,GAAG,CAAC,EAAE,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAC;AA0HjE;;GAEG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,WAAW,EAAE,GAClB;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,CAejD;AAqFD;;;;GAIG;AACH,wBAAgB,YAAY,CAC3B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,WAAW,EAAE,GAClB;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,CAmCjD;AA+GD;;GAEG;AACH,wBAAgB,SAAS,CACxB,IAAI,EAAE,WAAW,EACjB,MAAM,EAAE,UAAU,GAChB,YAAY,CAcd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC5B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,WAAW,EAAE,GAClB,YAAY,EAAE,CAIhB"}

package/dist/SimpleDiagram/simple-layout.js

@@ -7,6 +7,7 @@ const HEADER_HEIGHT = 30;
 const ROW_HEIGHT = 22;
 const MODULE_BLOCK_GAP = 80;
 const OVERLAP_MARGIN = 30;
+const MIN_ROUTE_GAP = 12;
 /** Group items by a key function into a Map of arrays. */
 function groupBy(items, key) {
     const map = new Map();
@@ -271,24 +272,31 @@ function routeSelfEdge(edge, node, srcY, tgtY) {
 }
 /** Route stubs that avoid crossing through the connected nodes. */
 function stubRoute(src, tgt, dir, srcNode, tgtNode) {
-    const stubSrc = src.x + dir * STUB_LENGTH;
-    const stubTgt = tgt.x - dir * STUB_LENGTH;
+    let stubSrc = src.x + dir * STUB_LENGTH;
+    let stubTgt = tgt.x - dir * STUB_LENGTH;
     // Find midY that doesn't cross through either node
     const srcBottom = srcNode.y + srcNode.height;
     const tgtTop = tgtNode.y;
     const srcTop = srcNode.y;
     const tgtBottom = tgtNode.y + tgtNode.height;
     let midY;
-    if (srcBottom + OVERLAP_MARGIN < tgtTop) {
+    if (srcBottom + MIN_ROUTE_GAP < tgtTop) {
         // Gap between nodes — route through it
         midY = (srcBottom + tgtTop) / 2;
     }
-    else if (tgtBottom + OVERLAP_MARGIN < srcTop) {
+    else if (tgtBottom + MIN_ROUTE_GAP < srcTop) {
         midY = (tgtBottom + srcTop) / 2;
     }
     else {
-        // Nodes overlap vertically — route above both
+        // Nodes overlap vertically — route above both; a stub that would land inside the other node moves outside both
         midY = Math.min(srcTop, tgtTop) - OVERLAP_MARGIN;
+        const left = Math.min(srcNode.x, tgtNode.x) - STUB_LENGTH;
+        const right = Math.max(srcNode.x + srcNode.width, tgtNode.x + tgtNode.width) + STUB_LENGTH;
+        const inside = (x, n) => x > n.x && x < n.x + n.width;
+        if (inside(stubSrc, tgtNode))
+            stubSrc = dir > 0 ? right : left;
+        if (inside(stubTgt, srcNode))
+            stubTgt = dir > 0 ? left : right;
     }
     return [
         src,

package/dist/WorkspaceMap/WorkspaceMap.svelte

@@ -207,14 +207,18 @@
 	});
 </script>
 
-<div class="ws-map" bind:this={containerEl}>
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="ws-map"
+	bind:this={containerEl}
+	onpointermove={handlePointerMove}
+	onpointerup={handlePointerUp}
+>
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<svg
 		bind:this={svgEl}
 		role="application"
 		onpointerdown={handleBackgroundPointerDown}
-		onpointermove={handlePointerMove}
-		onpointerup={handlePointerUp}
 	>
 		<defs>
 			<pattern id={patternId} width="20" height="20" patternUnits="userSpaceOnUse"
@@ -242,26 +246,33 @@
 				/>
 			{/each}
 
-			<!-- Module cards -->
-			{#each modules as mod (mod.id)}
-				{@const pos = modulePositions[mod.id]}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<foreignObject
-					x={pos.x}
-					y={pos.y}
-					width={mod.width}
-					height={mod.height}
-					onpointerdown={(e: PointerEvent) => handleModulePointerDown(e, mod.id)}
-					class="ws-module-fo"
-				>
-					<div xmlns="http://www.w3.org/1999/xhtml">
-						<ModuleCard module={mod} />
-					</div>
-				</foreignObject>
-			{/each}
 		</g>
 	</svg>
 
+	<!--
+		Module cards render in an HTML overlay layer (not SVG <foreignObject>) so
+		they scale correctly in Safari/WebKit, which does not apply a scaled SVG
+		ancestor transform to foreignObject HTML content. The layer shares the same
+		pan/zoom transform as the SVG <g> above.
+	-->
+	<div
+		class="ws-node-layer"
+		style:transform="translate({pz.transform.x}px, {pz.transform.y}px) scale({pz.transform.k})"
+		style:transform-origin="0 0"
+	>
+		{#each modules as mod (mod.id)}
+			{@const pos = modulePositions[mod.id]}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class="ws-module"
+				style="left: {pos.x}px; top: {pos.y}px; width: {mod.width}px; height: {mod.height}px;"
+				onpointerdown={(e: PointerEvent) => handleModulePointerDown(e, mod.id)}
+			>
+				<ModuleCard module={mod} />
+			</div>
+		{/each}
+	</div>
+
 	<!-- Controls -->
 	<div class="ws-controls">
 		<IconButton icon="bi-plus-lg" title={t.zoom_in} size="sm" onclick={() => pz.zoomBy(1.3)} />
@@ -290,12 +301,23 @@
 		cursor: grabbing;
 	}
 
-	.ws-module-fo {
+	.ws-node-layer {
+		position: absolute;
+		inset: 0;
+		/* Empty areas let pointer events fall through to the SVG for panning;
+		   individual cards re-enable events below. transform / transform-origin
+		   are applied via style: directives. */
+		pointer-events: none;
+	}
+
+	.ws-module {
+		position: absolute;
+		box-sizing: border-box;
+		pointer-events: auto;
 		cursor: grab;
-		overflow: visible;
 	}
 
-	.ws-module-fo:active {
+	.ws-module:active {
 		cursor: grabbing;
 	}
 

package/dist/WorkspaceMap/WorkspaceMap.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceMap.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/WorkspaceMap/WorkspaceMap.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQvE,UAAU,KAAK;IACd,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAyPF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"WorkspaceMap.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/WorkspaceMap/WorkspaceMap.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAQvE,UAAU,KAAK;IACd,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AA2PF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/i18n.d.ts

@@ -3,6 +3,8 @@ export interface DiagramTranslations {
     zoom_out: string;
     fit_view: string;
     reset_layout: string;
+    undo: string;
+    redo: string;
     col_type_formula: string;
     col_type_ref: string;
     col_type_set: string;

package/dist/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/lib/i18n.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,mBAQrC,CAAC;AAIF,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,mBAAmB,GAAG,IAAI,CAE9E;AAED,wBAAgB,sBAAsB,IAAI,mBAAmB,CAK5D"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/lib/i18n.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,mBAAmB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,mBAUrC,CAAC;AAIF,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,mBAAmB,GAAG,IAAI,CAE9E;AAED,wBAAgB,sBAAsB,IAAI,mBAAmB,CAK5D"}

package/dist/i18n.js

@@ -4,6 +4,8 @@ export const DIAGRAM_TRANSLATIONS_EN = {
     zoom_out: 'Zoom out',
     fit_view: 'Fit view',
     reset_layout: 'Reset layout',
+    undo: 'Undo',
+    redo: 'Redo',
     col_type_formula: 'formula',
     col_type_ref: 'ref',
     col_type_set: 'set',

package/dist/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/lib/icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CASxC,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/lib/icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAaxC,CAAC"}

package/dist/icons.js

@@ -13,5 +13,7 @@ export const ICONS = {
     'bi-plus-lg': '<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"/>',
     'bi-dash-lg': '<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8"/>',
     'bi-fullscreen': '<path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5M.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5"/>',
+    'bi-arrow-90deg-left': '<path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708z"/>',
+    'bi-arrow-90deg-right': '<path fill-rule="evenodd" d="M14.854 4.854a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 4H3.5A2.5 2.5 0 0 0 1 6.5v8a.5.5 0 0 0 1 0v-8A1.5 1.5 0 0 1 3.5 5h9.793l-3.147 3.146a.5.5 0 0 0 .708.708z"/>',
     'bi-arrow-counterclockwise': '<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/>',
 };

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { default as EntityNode } from './EntityNode.svelte';
 export { default as DiagramDebug } from './SimpleDiagram/DiagramDebug.svelte';
 export { simpleLayout, moduleLayout, routeEdge, routeAllEdges } from './SimpleDiagram/simple-layout';
 export type { NodeLookup } from './SimpleDiagram/simple-layout';
-export { buildGraph, buildEntityMap, getModuleColor, MODULE_COLORS } from './model-graph';
+export { buildGraph, buildEntityMap, columnLabel, entityLabel, expandBridgeSelection, findRelatedModules, getModuleColor, MODULE_COLORS } from './model-graph';
 export { buildSvgPath, edgeLabelPos, prepareDragPoints, consolidatePoints, insertJog, getSegmentHandles, applySegmentDrag } from './SimpleDiagram/diagram-geometry';
 export type { SegHandle } from './SimpleDiagram/diagram-geometry';
 export { createPanZoom } from './pan-zoom.svelte';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AACjG,YAAY,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGlD,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGjI,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9G,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAG9E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACrG,YAAY,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAG1F,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpK,YAAY,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACtG,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAGzE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC/J,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,MAAM,QAAQ,CAAC;AACjG,YAAY,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAGlD,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGjI,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9G,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAC;AAG9E,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACrG,YAAY,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAG/J,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpK,YAAY,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AACtG,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAGzE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC/J,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -8,7 +8,7 @@ export { default as DiagramDebug } from './SimpleDiagram/DiagramDebug.svelte';
 // Layout
 export { simpleLayout, moduleLayout, routeEdge, routeAllEdges } from './SimpleDiagram/simple-layout';
 // Graph building
-export { buildGraph, buildEntityMap, getModuleColor, MODULE_COLORS } from './model-graph';
+export { buildGraph, buildEntityMap, columnLabel, entityLabel, expandBridgeSelection, findRelatedModules, getModuleColor, MODULE_COLORS } from './model-graph';
 // Geometry
 export { buildSvgPath, edgeLabelPos, prepareDragPoints, consolidatePoints, insertJog, getSegmentHandles, applySegmentDrag } from './SimpleDiagram/diagram-geometry';
 // Pan/Zoom & persistence utilities

package/dist/model-graph.d.ts

@@ -1,7 +1,19 @@
 import type { DiagramNode, DiagramEdge } from './diagram-types';
-import type { ModelGetResponse, ModelModule } from './model-types';
+import type { ModelColumn, ModelEntity, ModelGetResponse, ModelModule } from './model-types';
+/**
+ * Display label for an entity / column.
+ *
+ * `resLabel` is the install-time label the module author wrote — the same string
+ * for every viewer, and the model browser's default because it matches what is in
+ * the module package. `resLabelLocalized` is the translation for the viewer's
+ * culture, present only where the tenant has one; `localized` opts into it and
+ * still falls back per-item, so a partly translated module reads as a mix rather
+ * than losing the untranslated half.
+ */
+export declare const entityLabel: (ent: ModelEntity, localized?: boolean) => string;
+export declare const columnLabel: (col: ModelColumn, localized?: boolean) => string;
 export declare const MODULE_COLORS: string[];
-export declare function getModuleColor(index: number): string;
+export declare const getModuleColor: (index: number) => string;
 /**
  * Build a diagram graph from the given modules.
  * Nodes start at position {0,0} — call simpleLayout() to compute positions.
@@ -9,6 +21,14 @@ export declare function getModuleColor(index: number): string;
 export declare function buildGraph(modules: ModelModule[], entityMap: Map<number, string>, options?: {
     intraModuleEdgesOnly?: boolean;
     colorOffset?: number;
+    /** Show translated entity/column labels where the tenant has them. */
+    localized?: boolean;
+    /**
+     * Palette index per module, overriding the default "position in `modules`".
+     * Needed when `modules` is an arbitrary subset (a module plus the ones it
+     * connects to) that must keep the colors those modules have elsewhere.
+     */
+    moduleColorIndex?: (moduleCd: string) => number | undefined;
 }): {
     nodes: DiagramNode[];
     edges: DiagramEdge[];
@@ -16,5 +36,40 @@ export declare function buildGraph(modules: ModelModule[], entityMap: Map<number
 /**
  * Build the full entityId → label map from a ModelGetResponse.
  */
-export declare function buildEntityMap(response: ModelGetResponse): Map<number, string>;
+export declare function buildEntityMap(response: ModelGetResponse, localized?: boolean): Map<number, string>;
+/**
+ * Module codes related to `moduleCd` — the candidate set for a "connected
+ * modules" view of that module's diagram.
+ *
+ * A bridge module (`crm-fin`, `wms-fin`) usually owns no entities at all: it
+ * only adds extension columns to the entities of the modules it bridges. Its
+ * own diagram is therefore empty, and nothing in the entity graph points back
+ * at it either — the columns it contributes are stored on the *target* entity.
+ * So the relation is collected from three independent places:
+ *
+ *   1. declared dependencies — what this module was built on top of. This is
+ *      the only signal that works for a bridge with no entities.
+ *   2. reverse dependencies — modules built on top of this one. A core module
+ *      has no way of knowing which bridges were installed against it.
+ *   3. cross-module references — FK edges leaving or entering this module's
+ *      entities, which still resolves links that skip a manifest declaration.
+ *
+ * The module itself and system modules are never included. Results come back in
+ * `response.modules` order so chip order and palette indices stay stable.
+ */
+export declare function findRelatedModules(response: ModelGetResponse, moduleCd: string): string[];
+/**
+ * Expand a chosen set of modules to one that actually draws something.
+ *
+ * Picking a bridge means "show me what this connects", but the bridge itself
+ * has no entities — its whole contribution is extension columns living on the
+ * entities of the modules it bridges. Selecting one alone would therefore change
+ * the URL and redraw nothing, so each bridge in the set brings its own drawable
+ * dependencies along.
+ *
+ * Expansion is one level deep: a bridge that depends on another bridge is not a
+ * shape any module in the wild has, and recursing would quietly pull in half the
+ * workspace. Returns the input order with the additions appended, deduped.
+ */
+export declare function expandBridgeSelection(response: ModelGetResponse, moduleCds: string[]): string[];
 //# sourceMappingURL=model-graph.d.ts.map

package/dist/model-graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-graph.d.ts","sourceRoot":"","sources":["../src/lib/model-graph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEnE,eAAO,MAAM,aAAa,UASzB,CAAC;AAEF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEpD;AAMD;;;GAGG;AACH,wBAAgB,UAAU,CACzB,OAAO,EAAE,WAAW,EAAE,EACtB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;IAAE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,GAChE;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,CA6EhD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQ9E"}
+{"version":3,"file":"model-graph.d.ts","sourceRoot":"","sources":["../src/lib/model-graph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE7F;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,WAAW,EAAE,mBAAiB,KAAG,MACc,CAAC;AAEjF,eAAO,MAAM,WAAW,GAAI,KAAK,WAAW,EAAE,mBAAiB,KAAG,MACc,CAAC;AAEjF,eAAO,MAAM,aAAa,UASzB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MACH,CAAC;AAM7C;;;GAGG;AACH,wBAAgB,UAAU,CACzB,OAAO,EAAE,WAAW,EAAE,EACtB,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,OAAO,CAAC,EAAE;IACT,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CAC5D,GACC;IAAE,KAAK,EAAE,WAAW,EAAE,CAAC;IAAC,KAAK,EAAE,WAAW,EAAE,CAAA;CAAE,CAoFhD;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,UAAQ,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQjG;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CA4CzF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAc/F"}

package/dist/model-graph.js

@@ -1,3 +1,15 @@
+/**
+ * Display label for an entity / column.
+ *
+ * `resLabel` is the install-time label the module author wrote — the same string
+ * for every viewer, and the model browser's default because it matches what is in
+ * the module package. `resLabelLocalized` is the translation for the viewer's
+ * culture, present only where the tenant has one; `localized` opts into it and
+ * still falls back per-item, so a partly translated module reads as a mix rather
+ * than losing the untranslated half.
+ */
+export const entityLabel = (ent, localized = false) => (localized ? ent.resLabelLocalized : undefined) || ent.resLabel || ent.entityCd;
+export const columnLabel = (col, localized = false) => (localized ? col.resLabelLocalized : undefined) || col.resLabel || col.columnCd;
 export const MODULE_COLORS = [
     '#0d6efd', // blue
     '#198754', // green
@@ -8,9 +20,7 @@ export const MODULE_COLORS = [
     '#d63384', // pink
     '#0dcaf0', // cyan
 ];
-export function getModuleColor(index) {
-    return MODULE_COLORS[index % MODULE_COLORS.length];
-}
+export const getModuleColor = (index) => MODULE_COLORS[index % MODULE_COLORS.length];
 const NODE_WIDTH = 260;
 const NODE_HEIGHT_BASE = 60;
 const ROW_HEIGHT = 22;
@@ -30,9 +40,11 @@ export function buildGraph(modules, entityMap, options) {
         }
     }
     const offset = options?.colorOffset ?? 0;
+    const localized = options?.localized ?? false;
+    const colorOf = (moduleCd, mi) => getModuleColor(options?.moduleColorIndex?.(moduleCd) ?? mi + offset);
     for (let mi = 0; mi < modules.length; mi++) {
         const mod = modules[mi];
-        const color = getModuleColor(mi + offset);
+        const color = colorOf(mod.moduleCd, mi);
         for (const ent of mod.entities) {
             const nodeId = `entity-${ent.entityId}`;
             entityNodeMap.set(ent.entityId, nodeId);
@@ -45,11 +57,15 @@ export function buildGraph(modules, entityMap, options) {
                 height: nodeHeight,
                 data: {
                     entityCd: ent.entityCd,
-                    resLabel: ent.resLabel,
+                    resLabel: entityLabel(ent, localized),
                     resIcon: ent.resIcon,
                     moduleCd: mod.moduleCd,
                     moduleColor: color,
-                    columns: ent.columns,
+                    // Only rewrite the label the node renders; everything else on the
+                    // column is passed through untouched.
+                    columns: localized
+                        ? ent.columns.map(col => ({ ...col, resLabel: columnLabel(col, true) }))
+                        : ent.columns,
                     entityMap,
                 },
             });
@@ -58,7 +74,7 @@ export function buildGraph(modules, entityMap, options) {
     // Build edges for FK columns (type 'R')
     for (let mi = 0; mi < modules.length; mi++) {
         const mod = modules[mi];
-        const color = getModuleColor(mi + offset);
+        const color = colorOf(mod.moduleCd, mi);
         for (const ent of mod.entities) {
             const sourceNodeId = entityNodeMap.get(ent.entityId);
             if (!sourceNodeId)
@@ -77,7 +93,7 @@ export function buildGraph(modules, entityMap, options) {
                         sourceHandle: col.columnCd,
                         target: targetNodeId,
                         color,
-                        label: col.resLabel || col.columnCd,
+                        label: columnLabel(col, localized),
                         isNullable: col.isNullable ?? false,
                     });
                 }
@@ -89,12 +105,110 @@ export function buildGraph(modules, entityMap, options) {
 /**
  * Build the full entityId → label map from a ModelGetResponse.
  */
-export function buildEntityMap(response) {
+export function buildEntityMap(response, localized = false) {
     const entityMap = new Map();
     for (const mod of response.modules) {
         for (const ent of mod.entities) {
-            entityMap.set(ent.entityId, ent.resLabel || ent.entityCd);
+            entityMap.set(ent.entityId, entityLabel(ent, localized));
         }
     }
     return entityMap;
 }
+/** A module with no entities of its own contributes no nodes to a diagram. */
+const isBridge = (mod) => mod.entities.length === 0;
+/**
+ * Module codes related to `moduleCd` — the candidate set for a "connected
+ * modules" view of that module's diagram.
+ *
+ * A bridge module (`crm-fin`, `wms-fin`) usually owns no entities at all: it
+ * only adds extension columns to the entities of the modules it bridges. Its
+ * own diagram is therefore empty, and nothing in the entity graph points back
+ * at it either — the columns it contributes are stored on the *target* entity.
+ * So the relation is collected from three independent places:
+ *
+ *   1. declared dependencies — what this module was built on top of. This is
+ *      the only signal that works for a bridge with no entities.
+ *   2. reverse dependencies — modules built on top of this one. A core module
+ *      has no way of knowing which bridges were installed against it.
+ *   3. cross-module references — FK edges leaving or entering this module's
+ *      entities, which still resolves links that skip a manifest declaration.
+ *
+ * The module itself and system modules are never included. Results come back in
+ * `response.modules` order so chip order and palette indices stay stable.
+ */
+export function findRelatedModules(response, moduleCd) {
+    const self = response.modules.find(mod => mod.moduleCd === moduleCd);
+    if (!self)
+        return [];
+    const related = new Set(self.dependencies ?? []);
+    for (const mod of response.modules) {
+        if (mod.moduleCd !== moduleCd && (mod.dependencies ?? []).includes(moduleCd)) {
+            related.add(mod.moduleCd);
+        }
+    }
+    const moduleOfEntity = new Map();
+    for (const mod of response.modules) {
+        for (const ent of mod.entities)
+            moduleOfEntity.set(ent.entityId, mod.moduleCd);
+    }
+    for (const mod of response.modules) {
+        for (const ent of mod.entities) {
+            for (const col of ent.columns) {
+                if (col.columnType !== 'R' || !col.refEntityId)
+                    continue;
+                const targetModuleCd = moduleOfEntity.get(col.refEntityId);
+                if (!targetModuleCd || targetModuleCd === mod.moduleCd)
+                    continue;
+                // Outgoing from this module, or incoming into it.
+                if (mod.moduleCd === moduleCd)
+                    related.add(targetModuleCd);
+                else if (targetModuleCd === moduleCd)
+                    related.add(mod.moduleCd);
+            }
+        }
+    }
+    // A bridge owns no entities, so on its own it draws nothing — a chip for one
+    // is only meaningful next to what it bridges. Pull each related bridge's own
+    // dependencies into the candidate set, which is how `fin` becomes reachable
+    // from crm's page at all: crm neither depends on fin nor references it, and
+    // the only thing tying them together is crm-fin.
+    for (const mod of response.modules) {
+        if (mod.moduleCd === moduleCd || !related.has(mod.moduleCd))
+            continue;
+        if (!isBridge(mod))
+            continue;
+        for (const dep of mod.dependencies ?? [])
+            related.add(dep);
+    }
+    return response.modules
+        .filter(mod => mod.moduleCd !== moduleCd && !mod.isSystem && related.has(mod.moduleCd))
+        .map(mod => mod.moduleCd);
+}
+/**
+ * Expand a chosen set of modules to one that actually draws something.
+ *
+ * Picking a bridge means "show me what this connects", but the bridge itself
+ * has no entities — its whole contribution is extension columns living on the
+ * entities of the modules it bridges. Selecting one alone would therefore change
+ * the URL and redraw nothing, so each bridge in the set brings its own drawable
+ * dependencies along.
+ *
+ * Expansion is one level deep: a bridge that depends on another bridge is not a
+ * shape any module in the wild has, and recursing would quietly pull in half the
+ * workspace. Returns the input order with the additions appended, deduped.
+ */
+export function expandBridgeSelection(response, moduleCds) {
+    const byCode = new Map(response.modules.map(mod => [mod.moduleCd, mod]));
+    const expanded = new Set(moduleCds);
+    for (const cd of moduleCds) {
+        const mod = byCode.get(cd);
+        if (!mod || !isBridge(mod))
+            continue;
+        for (const dep of mod.dependencies ?? []) {
+            const target = byCode.get(dep);
+            if (target && !target.isSystem && !isBridge(target))
+                expanded.add(dep);
+        }
+    }
+    return [...expanded];
+}

package/dist/model-types.d.ts

@@ -15,6 +15,8 @@ export interface ModelModule {
     license?: string;
     authorName?: string;
     tags?: string;
+    /** Module codes this module declares a dependency on (manifest `dependencies` keys). */
+    dependencies?: string[];
     entities: ModelEntity[];
 }
 export interface ModelEntity {
@@ -25,6 +27,8 @@ export interface ModelEntity {
     dbObject?: string;
     toString?: string;
     resLabel?: string;
+    /** Label for the viewer's culture, when a translation exists. Absent = fall back to `resLabel`. */
+    resLabelLocalized?: string;
     resIcon?: string;
     columns: ModelColumn[];
     constraints: ModelConstraint[];
@@ -52,5 +56,7 @@ export interface ModelColumn {
     thisKey?: string;
     otherKey?: string;
     resLabel?: string;
+    /** Label for the viewer's culture, when a translation exists. Absent = fall back to `resLabel`. */
+    resLabelLocalized?: string;
 }
 //# sourceMappingURL=model-types.d.ts.map

package/dist/model-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-types.d.ts","sourceRoot":"","sources":["../src/lib/model-types.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEvF,MAAM,WAAW,gBAAgB;IAChC,OAAO,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB"}
+{"version":3,"file":"model-types.d.ts","sourceRoot":"","sources":["../src/lib/model-types.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEvF,MAAM,WAAW,gBAAgB;IAChC,OAAO,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wFAAwF;IACxF,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,WAAW,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,EAAE,cAAc,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mGAAmG;IACnG,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/package.json

@@ -1,58 +1,60 @@
 {
-  "name": "@dforge-core/diagram",
-  "version": "0.0.3",
-  "description": "Entity-relationship and workspace diagram components for dForge models. Standalone Svelte 5 library with no dForge runtime dependencies.",
-  "license": "MIT",
-  "author": "dForge",
-  "homepage": "https://github.com/iash44/dForge-core/tree/main/clients/packages/diagram#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/iash44/dForge-core.git",
-    "directory": "clients/packages/diagram"
-  },
-  "bugs": {
-    "url": "https://github.com/iash44/dForge-core/issues"
-  },
-  "keywords": [
-    "svelte",
-    "diagram",
-    "erd",
-    "entity-relationship",
-    "dforge",
-    "visualization"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "type": "module",
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "source": "./src/lib/index.ts",
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "@dforge-core/metadata": "0.0.2"
-  },
-  "peerDependencies": {
-    "svelte": "^5.0.0"
-  },
-  "devDependencies": {
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "svelte": "^5.55.10",
-    "typescript": "^6.0.2"
-  },
-  "scripts": {
-    "build": "svelte-package",
-    "dev": "svelte-package --watch",
-    "package": "pnpm pack"
-  }
-}
+	"name": "@dforge-core/diagram",
+	"version": "0.0.5",
+	"description": "Entity-relationship and workspace diagram components for dForge models. Standalone Svelte 5 library with no dForge runtime dependencies.",
+	"license": "MIT",
+	"author": "dForge",
+	"homepage": "https://github.com/iash44/dForge-core/tree/main/clients/packages/diagram#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/iash44/dForge-core.git",
+		"directory": "clients/packages/diagram"
+	},
+	"bugs": {
+		"url": "https://github.com/iash44/dForge-core/issues"
+	},
+	"keywords": [
+		"svelte",
+		"diagram",
+		"erd",
+		"entity-relationship",
+		"dforge",
+		"visualization"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"type": "module",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"source": "./src/lib/index.ts",
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"CHANGELOG.md"
+	],
+	"scripts": {
+		"build": "svelte-package",
+		"dev": "svelte-package --watch",
+		"prepack": "pnpm build",
+		"package": "pnpm pack"
+	},
+	"dependencies": {
+		"@dforge-core/metadata": "workspace:*"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.3.0",
+		"svelte": "^5.56.8",
+		"typescript": "^6.0.3"
+	}
+}