@dforge-core/diagram 0.0.1

package/dist/WorkspaceMap/ModuleCard.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+	import type { WorkspaceModule } from './workspace-types';
+	import { INDENT_WIDTH, CARD_PADDING_LEFT } from './workspace-graph';
+
+	interface Props {
+		module: WorkspaceModule;
+	}
+
+	let { module: mod }: Props = $props();
+
+	// Tree connector lines. Both SVG and pills use entity.ry (card-relative),
+	// so they share the exact same coordinate system — no drift.
+	const connectors = $derived.by(() => {
+
+		type Line = { x1: number; y1: number; x2: number; y2: number };
+		const lines: Line[] = [];
+		const entities = mod.entities;
+
+		for (let i = 0; i < entities.length; i++) {
+			const ent = entities[i];
+			if (ent.depth === 0) continue;
+
+			const cy = ent.ry + ent.height / 2;
+			const pillLeft = ent.rx;
+			// Branch line sits at parent's indent level + half indent
+			const bx = CARD_PADDING_LEFT + (ent.depth - 1) * INDENT_WIDTH + INDENT_WIDTH / 2;
+
+			// Horizontal: branch → pill left edge
+			lines.push({ x1: bx, y1: cy, x2: pillLeft, y2: cy });
+
+			// Vertical: from previous sibling or parent down to this entity
+			for (let j = i - 1; j >= 0; j--) {
+				if (entities[j].depth <= ent.depth) {
+					const fromY = entities[j].ry + entities[j].height / 2;
+					lines.push({ x1: bx, y1: fromY, x2: bx, y2: cy });
+					break;
+				}
+			}
+		}
+
+		return lines;
+	});
+</script>
+
+<div class="ws-module-card" style:--mod-color={mod.color} style:height="{mod.height}px">
+	<!-- Tree connector SVG — covers entire card, same coords as pills -->
+	<svg class="ws-tree-lines" xmlns="http://www.w3.org/2000/svg">
+		{#each connectors as c}
+			<line
+				x1={c.x1} y1={c.y1}
+				x2={c.x2} y2={c.y2}
+				stroke={mod.color}
+				stroke-width="1.5"
+				stroke-opacity="0.35"
+			/>
+		{/each}
+	</svg>
+
+	<div class="ws-module-header">
+		<span class="ws-module-dot"></span>
+		<span class="ws-module-label">{mod.label}</span>
+		<span class="ws-module-count">{mod.entities.length}</span>
+	</div>
+
+	{#each mod.entities as entity}
+		<div
+			class="ws-entity-pill"
+			style:top="{entity.ry}px"
+			style:left="{entity.rx}px"
+			style:width="{entity.width}px"
+			style:height="{entity.height}px"
+		>
+			<span class="ws-pill-label">{entity.label}</span>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.ws-module-card {
+		width: 100%;
+		border-radius: 10px;
+		border: 1.5px solid color-mix(in srgb, var(--mod-color) 40%, var(--bs-border-color, #dee2e6));
+		/* background: var(--bs-body-bg, #fff); */
+		overflow: hidden;
+		font-family: var(--bs-body-font-family, system-ui, sans-serif);
+		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+		position: relative;
+	}
+
+	.ws-tree-lines {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	.ws-module-header {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 8px 12px;
+		background: color-mix(in srgb, var(--mod-color) 10%, var(--bs-body-bg, #fff));
+		border-bottom: 1px solid color-mix(in srgb, var(--mod-color) 20%, var(--bs-border-color, #dee2e6));
+		position: relative;
+		z-index: 1;
+	}
+
+	.ws-module-dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		background-color: var(--mod-color);
+		flex-shrink: 0;
+	}
+
+	.ws-module-label {
+		font-size: 12px;
+		font-weight: 600;
+		color: var(--bs-body-color, #212529);
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.ws-module-count {
+		font-size: 10px;
+		color: var(--bs-secondary-color, #6c757d);
+		background: var(--bs-tertiary-bg, #f8f9fa);
+		padding: 1px 6px;
+		border-radius: 999px;
+		flex-shrink: 0;
+	}
+
+	.ws-entity-pill {
+		position: absolute;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		padding: 0 10px;
+		border-radius: 6px;
+		background: color-mix(in srgb, var(--mod-color) 8%, var(--bs-body-bg, #fff));
+		border: 1px solid color-mix(in srgb, var(--mod-color) 25%, var(--bs-border-color, #dee2e6));
+		font-size: 11px;
+		color: var(--bs-body-color, #212529);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		transition: background 0.15s;
+		z-index: 1;
+	}
+
+	.ws-entity-pill:hover {
+		background: color-mix(in srgb, var(--mod-color) 18%, var(--bs-body-bg, #fff));
+	}
+
+	.ws-pill-label {
+		pointer-events: none;
+		user-select: none;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { WorkspaceModule } from './workspace-types';
+interface Props {
+    module: WorkspaceModule;
+}
+declare const ModuleCard: import("svelte").Component<Props, {}, "">;
+type ModuleCard = ReturnType<typeof ModuleCard>;
+export default ModuleCard;
+//# sourceMappingURL=ModuleCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleCard.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/WorkspaceMap/ModuleCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIxD,UAAU,KAAK;IACd,MAAM,EAAE,eAAe,CAAC;CACxB;AAmEF,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/WorkspaceMap/WorkspaceMap.svelte

@@ -0,0 +1,319 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import IconButton from '../IconButton.svelte';
+	import type { WorkspaceModule, WorkspaceEdge } from './workspace-types';
+	import type { ViewTransform } from '../diagram-types';
+	import { getDiagramTranslations } from '../i18n';
+	import { createPanZoom } from '../pan-zoom.svelte';
+	import { createLocalStorageSync } from '../local-storage-sync';
+	import ModuleCard from './ModuleCard.svelte';
+
+	const t = getDiagramTranslations();
+
+	interface Props {
+		modules: WorkspaceModule[];
+		edges: WorkspaceEdge[];
+		storageKey?: string;
+		minZoom?: number;
+		maxZoom?: number;
+	}
+
+	let { modules, edges, storageKey, minZoom = 0.1, maxZoom = 2 }: Props = $props();
+
+	let svgEl: SVGSVGElement;
+	let containerEl: HTMLDivElement;
+	let dragOffsets = $state<Record<string, { dx: number; dy: number }>>({});
+	let dragging = $state<{ moduleId: string; offsetX: number; offsetY: number } | null>(null);
+	let patternId = `ws-grid-${Math.random().toString(36).slice(2, 8)}`;
+
+	const pz = createPanZoom({
+		get minZoom() { return minZoom; },
+		get maxZoom() { return maxZoom; },
+		bgClass: 'ws-bg',
+		getSvgEl: () => svgEl,
+		getContainerEl: () => containerEl,
+	});
+
+	// --- localStorage persistence ---
+
+	interface WsState {
+		dragOffsets: Record<string, { dx: number; dy: number }>;
+		transform: ViewTransform;
+	}
+
+	const storage = createLocalStorageSync<WsState>(() => storageKey);
+	let restoredTransform = false;
+
+	$effect(() => {
+		// Track both values for auto-save
+		const state: WsState = { dragOffsets, transform: pz.transform };
+		storage.save(state);
+	});
+
+	// Reset when module set changes
+	const moduleIds = $derived(modules.map((m) => m.id).join(','));
+	$effect(() => {
+		moduleIds; // track
+		const saved = storage.load();
+		if (saved && Object.keys(saved.dragOffsets).length > 0) {
+			dragOffsets = saved.dragOffsets;
+			pz.setTransform(saved.transform);
+			restoredTransform = true;
+		} else if (saved) {
+			dragOffsets = {};
+			pz.setTransform(saved.transform);
+			restoredTransform = true;
+		} else {
+			dragOffsets = {};
+			restoredTransform = false;
+		}
+	});
+
+	// Derive module positions with drag offsets
+	const modulePositions = $derived.by(() => {
+		const pos: Record<string, { x: number; y: number }> = {};
+		for (const mod of modules) {
+			const off = dragOffsets[mod.id];
+			pos[mod.id] = off
+				? { x: mod.x + off.dx, y: mod.y + off.dy }
+				: { x: mod.x, y: mod.y };
+		}
+		return pos;
+	});
+
+	// Entity position lookup: absolute position of each entity pill
+	const entityPositions = $derived.by(() => {
+		const pos = new Map<number, { x: number; y: number; width: number; height: number; moduleId: string }>();
+		for (const mod of modules) {
+			const modPos = modulePositions[mod.id];
+			if (!modPos) continue;
+			for (const ent of mod.entities) {
+				pos.set(ent.entityId, {
+					x: modPos.x + ent.rx,
+					y: modPos.y + ent.ry,
+					width: ent.width,
+					height: ent.height,
+					moduleId: mod.id,
+				});
+			}
+		}
+		return pos;
+	});
+
+	// Cross-module edges only (intra-module hierarchy shown via tree indentation)
+	const crossEdges = $derived(
+		edges.filter((e) => e.sourceModuleId !== e.targetModuleId)
+	);
+
+	// Compute cross-module edge paths
+	const crossEdgePaths = $derived.by(() => {
+		const paths: { id: string; d: string; color: string }[] = [];
+
+		for (const edge of crossEdges) {
+			const src = entityPositions.get(edge.sourceEntityId);
+			const tgt = entityPositions.get(edge.targetEntityId);
+			if (!src || !tgt) continue;
+
+			// Source: right side of pill, Target: left side of pill
+			const srcX = src.x + src.width;
+			const srcY = src.y + src.height / 2;
+			const tgtX = tgt.x;
+			const tgtY = tgt.y + tgt.height / 2;
+
+			// Simple orthogonal H→V→H routing
+			const midX = (srcX + tgtX) / 2;
+			const d = `M ${srcX} ${srcY} H ${midX} V ${tgtY} H ${tgtX}`;
+
+			paths.push({ id: edge.id, d, color: edge.color });
+		}
+
+		return paths;
+	});
+
+	// --- Event handlers ---
+
+	function handleBackgroundPointerDown(e: PointerEvent) {
+		pz.startPan(e);
+	}
+
+	function handlePointerMove(e: PointerEvent) {
+		if (pz.onPointerMove(e)) return;
+		if (dragging) {
+			const pos = pz.clientToSvg(e.clientX, e.clientY);
+			const mod = modules.find((m) => m.id === dragging!.moduleId);
+			if (mod) {
+				dragOffsets = {
+					...dragOffsets,
+					[mod.id]: {
+						dx: pos.x - dragging.offsetX - mod.x,
+						dy: pos.y - dragging.offsetY - mod.y,
+					},
+				};
+			}
+		}
+	}
+
+	function handlePointerUp(e: PointerEvent) {
+		pz.endPan(e);
+		dragging = null;
+	}
+
+	function handleModulePointerDown(e: PointerEvent, moduleId: string) {
+		e.stopPropagation();
+		const pos = pz.clientToSvg(e.clientX, e.clientY);
+		const modPos = modulePositions[moduleId];
+		if (!modPos) return;
+		dragging = {
+			moduleId,
+			offsetX: pos.x - modPos.x,
+			offsetY: pos.y - modPos.y,
+		};
+	}
+
+	// --- Fit / reset ---
+
+	function computeBounds() {
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const mod of modules) {
+			const pos = modulePositions[mod.id];
+			if (!pos) continue;
+			minX = Math.min(minX, pos.x);
+			minY = Math.min(minY, pos.y);
+			maxX = Math.max(maxX, pos.x + mod.width);
+			maxY = Math.max(maxY, pos.y + mod.height);
+		}
+		return { minX, minY, maxX, maxY };
+	}
+
+	function fitView() {
+		if (modules.length === 0) return;
+		pz.fitView(computeBounds());
+	}
+
+	function resetLayout() {
+		dragOffsets = {};
+		requestAnimationFrame(() => fitView());
+	}
+
+	onMount(() => {
+		svgEl.addEventListener('wheel', pz.handleWheel, { passive: false });
+		if (!restoredTransform) {
+			requestAnimationFrame(() => fitView());
+		}
+		return () => {
+			svgEl.removeEventListener('wheel', pz.handleWheel);
+			storage.clear();
+		};
+	});
+</script>
+
+<div class="ws-map" bind:this={containerEl}>
+	<!-- 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"
+				patternTransform="translate({pz.transform.x},{pz.transform.y}) scale({pz.transform.k})"
+			>
+				<circle cx="1" cy="1" r="1" fill="var(--bs-border-color, #dee2e6)" />
+			</pattern>
+		</defs>
+
+		<!-- Background grid -->
+		<rect class="ws-bg" width="100%" height="100%" fill="url(#{patternId})" />
+
+		<!-- Transformed content -->
+		<g transform="translate({pz.transform.x},{pz.transform.y}) scale({pz.transform.k})">
+			<!-- Cross-module edges (behind cards) -->
+			{#each crossEdgePaths as path (path.id)}
+				<path
+					d={path.d}
+					fill="none"
+					stroke={path.color}
+					stroke-width="1.5"
+					stroke-opacity="0.4"
+					stroke-dasharray="6 3"
+					class="ws-cross-edge"
+				/>
+			{/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>
+
+	<!-- Controls -->
+	<div class="ws-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-counterclockwise" title={t.reset_layout} size="sm" onclick={resetLayout} />
+	</div>
+</div>
+
+<style>
+	.ws-map {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.ws-map svg {
+		width: 100%;
+		height: 100%;
+		cursor: grab;
+		display: block;
+	}
+
+	.ws-map svg:active {
+		cursor: grabbing;
+	}
+
+	.ws-module-fo {
+		cursor: grab;
+		overflow: visible;
+	}
+
+	.ws-module-fo:active {
+		cursor: grabbing;
+	}
+
+	.ws-cross-edge {
+		pointer-events: none;
+	}
+
+	.ws-controls {
+		position: absolute;
+		bottom: 12px;
+		left: 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		background: var(--bs-body-bg, #fff);
+		border: 1px solid var(--bs-border-color, #dee2e6);
+		border-radius: 6px;
+		padding: 4px;
+		box-shadow: 0 2px 6px var(--df-shadow-color);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { WorkspaceModule, WorkspaceEdge } from './workspace-types';
+interface Props {
+    modules: WorkspaceModule[];
+    edges: WorkspaceEdge[];
+    storageKey?: string;
+    minZoom?: number;
+    maxZoom?: number;
+}
+declare const WorkspaceMap: import("svelte").Component<Props, {}, "">;
+type WorkspaceMap = ReturnType<typeof WorkspaceMap>;
+export default WorkspaceMap;
+//# sourceMappingURL=WorkspaceMap.svelte.d.ts.map

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

@@ -0,0 +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"}

package/dist/WorkspaceMap/workspace-graph.d.ts

@@ -0,0 +1,18 @@
+import type { ModelModule } from '../model-types';
+import type { WorkspaceModule, WorkspaceEdge } from './workspace-types';
+export declare const PILL_HEIGHT = 28;
+export declare const PILL_GAP = 5;
+export declare const INDENT_WIDTH = 18;
+export declare const CARD_PADDING_TOP = 40;
+export declare const CARD_PADDING_BOTTOM = 12;
+export declare const CARD_PADDING_LEFT = 14;
+export declare const CARD_PADDING_RIGHT = 14;
+export declare const BASE_PILL_WIDTH = 150;
+/**
+ * Build the workspace graph from model modules.
+ */
+export declare function buildWorkspaceGraph(modules: ModelModule[]): {
+    modules: WorkspaceModule[];
+    edges: WorkspaceEdge[];
+};
+//# sourceMappingURL=workspace-graph.d.ts.map

package/dist/WorkspaceMap/workspace-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workspace-graph.d.ts","sourceRoot":"","sources":["../../src/lib/WorkspaceMap/workspace-graph.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAmB,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGzF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,eAAO,MAAM,QAAQ,IAAI,CAAC;AAC1B,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,gBAAgB,KAAK,CAAC;AACnC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,eAAe,MAAM,CAAC;AAyFnC;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,GAAG;IAC5D,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,EAAE,aAAa,EAAE,CAAC;CACvB,CAgFA"}

package/dist/WorkspaceMap/workspace-graph.js

@@ -0,0 +1,168 @@
+import { getModuleColor } from '../model-graph';
+export const PILL_HEIGHT = 28;
+export const PILL_GAP = 5;
+export const INDENT_WIDTH = 18;
+export const CARD_PADDING_TOP = 40; // header height
+export const CARD_PADDING_BOTTOM = 12;
+export const CARD_PADDING_LEFT = 14;
+export const CARD_PADDING_RIGHT = 14;
+export const BASE_PILL_WIDTH = 150;
+const GRID_GAP_X = 80;
+const GRID_GAP_Y = 60;
+const MODULES_PER_ROW = 3;
+/**
+ * Build a tree from intra-module FK relationships.
+ * Each entity picks its first intra-module FK target as its parent.
+ * Entities with no intra-module parent are roots.
+ */
+function buildEntityTree(entities, entityIdsInModule) {
+    // For each entity, find its "primary parent" (first intra-module FK)
+    const parentMap = new Map(); // childId → parentId
+    const childrenMap = new Map(); // parentId → childIds
+    for (const ent of entities) {
+        childrenMap.set(ent.entityId, []);
+    }
+    for (const ent of entities) {
+        for (const col of ent.columns) {
+            if (col.columnType === 'R' &&
+                col.refEntityId &&
+                entityIdsInModule.has(col.refEntityId) &&
+                col.refEntityId !== ent.entityId &&
+                !parentMap.has(ent.entityId) // only first FK becomes primary parent
+            ) {
+                parentMap.set(ent.entityId, col.refEntityId);
+                childrenMap.get(col.refEntityId).push(ent.entityId);
+            }
+        }
+    }
+    const entityById = new Map(entities.map((e) => [e.entityId, e]));
+    function buildNode(entityId, visited) {
+        visited.add(entityId);
+        const children = (childrenMap.get(entityId) ?? [])
+            .filter((id) => !visited.has(id))
+            .map((id) => buildNode(id, visited));
+        return { entity: entityById.get(entityId), children };
+    }
+    // Roots: entities with no intra-module parent
+    const roots = [];
+    const visited = new Set();
+    for (const ent of entities) {
+        if (!parentMap.has(ent.entityId) && !visited.has(ent.entityId)) {
+            roots.push(buildNode(ent.entityId, visited));
+        }
+    }
+    // Append orphans (from cycles)
+    for (const ent of entities) {
+        if (!visited.has(ent.entityId)) {
+            roots.push(buildNode(ent.entityId, visited));
+        }
+    }
+    return roots;
+}
+/**
+ * Flatten tree to ordered list with depth info.
+ */
+function flattenTree(roots) {
+    const result = [];
+    function walk(node, depth) {
+        result.push({ entity: node.entity, depth });
+        for (const child of node.children) {
+            walk(child, depth + 1);
+        }
+    }
+    for (const root of roots) {
+        walk(root, 0);
+    }
+    return result;
+}
+/**
+ * Build the workspace graph from model modules.
+ */
+export function buildWorkspaceGraph(modules) {
+    // Map entityId → moduleCd for cross-module edge resolution
+    const entityToModule = new Map();
+    for (const mod of modules) {
+        for (const ent of mod.entities) {
+            entityToModule.set(ent.entityId, mod.moduleCd);
+        }
+    }
+    const wsModules = [];
+    const wsEdges = [];
+    for (let mi = 0; mi < modules.length; mi++) {
+        const mod = modules[mi];
+        const color = getModuleColor(mi);
+        const moduleId = `mod-${mod.moduleCd}`;
+        const entityIdsInModule = new Set(mod.entities.map((e) => e.entityId));
+        const tree = buildEntityTree(mod.entities, entityIdsInModule);
+        const flat = flattenTree(tree);
+        // Compute max depth to determine card width
+        const maxDepth = flat.reduce((max, f) => Math.max(max, f.depth), 0);
+        const cardWidth = CARD_PADDING_LEFT + INDENT_WIDTH * maxDepth + BASE_PILL_WIDTH + CARD_PADDING_RIGHT;
+        const entities = flat.map((f, idx) => ({
+            entityId: f.entity.entityId,
+            entityCd: f.entity.entityCd,
+            label: f.entity.resLabel || f.entity.entityCd,
+            depth: f.depth,
+            rx: CARD_PADDING_LEFT + f.depth * INDENT_WIDTH,
+            ry: CARD_PADDING_TOP + idx * (PILL_HEIGHT + PILL_GAP),
+            width: BASE_PILL_WIDTH,
+            height: PILL_HEIGHT,
+        }));
+        const cardHeight = CARD_PADDING_TOP +
+            entities.length * PILL_HEIGHT +
+            Math.max(0, entities.length - 1) * PILL_GAP +
+            CARD_PADDING_BOTTOM;
+        wsModules.push({
+            id: moduleId,
+            moduleCd: mod.moduleCd,
+            label: mod.description || mod.moduleCd,
+            color,
+            x: 0,
+            y: 0,
+            width: cardWidth,
+            height: cardHeight,
+            entities,
+        });
+        // Build edges from FK columns (cross-module only, intra handled by tree)
+        for (const ent of mod.entities) {
+            for (const col of ent.columns) {
+                if (col.columnType === 'R' && col.refEntityId) {
+                    const targetModuleCd = entityToModule.get(col.refEntityId);
+                    if (!targetModuleCd)
+                        continue;
+                    const targetModuleId = `mod-${targetModuleCd}`;
+                    wsEdges.push({
+                        id: `ws-edge-${ent.entityId}-${col.columnCd}`,
+                        sourceModuleId: moduleId,
+                        sourceEntityId: ent.entityId,
+                        targetModuleId,
+                        targetEntityId: col.refEntityId,
+                        color,
+                    });
+                }
+            }
+        }
+    }
+    // Layout modules in a grid
+    layoutModuleGrid(wsModules);
+    return { modules: wsModules, edges: wsEdges };
+}
+/**
+ * Arrange modules in a grid layout.
+ */
+function layoutModuleGrid(modules) {
+    let curX = 0;
+    let curY = 0;
+    let rowMaxHeight = 0;
+    for (let i = 0; i < modules.length; i++) {
+        if (i > 0 && i % MODULES_PER_ROW === 0) {
+            curX = 0;
+            curY += rowMaxHeight + GRID_GAP_Y;
+            rowMaxHeight = 0;
+        }
+        modules[i].x = curX;
+        modules[i].y = curY;
+        curX += modules[i].width + GRID_GAP_X;
+        rowMaxHeight = Math.max(rowMaxHeight, modules[i].height);
+    }
+}