@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/diagrams/ArchitectureShapes.js

@@ -0,0 +1,130 @@
+import { NetworkDeviceKind } from "./architectureEnums.js";
+// src/charts/diagrams/ArchitectureShapes.ts
+var f = (value) => +value.toFixed(2);
+var circle = (cx, cy, r) => `M${f(cx - r)},${f(cy)}a${f(r)},${f(r)} 0 1,0 ${f(r * 2)},0a${f(r)},${f(r)} 0 1,0 ${f(-r * 2)},0Z`;
+/** Path data for the diagram's boxes, connectors and device icons. Every shape stays inside the rect it is given. */
+var ArchitectureShapes = class ArchitectureShapes {
+	static box({ x, y, width, height }, r = 6) {
+		const c = Math.min(r, width / 2, height / 2);
+		return `M${f(x + c)},${f(y)}h${f(width - 2 * c)}a${c},${c} 0 0,1 ${c},${c}v${f(height - 2 * c)}a${c},${c} 0 0,1 ${-c},${c}h${f(2 * c - width)}a${c},${c} 0 0,1 ${-c},${-c}v${f(2 * c - height)}a${c},${c} 0 0,1 ${c},${-c}Z`;
+	}
+	/** Head above a rounded body, split by a surface gap: the C4-PlantUML person. */
+	static person(rect, head) {
+		const r = head / 2 - 1;
+		return `${circle(rect.x + rect.width / 2, rect.y + r, r)}${ArchitectureShapes.box({
+			...rect,
+			y: rect.y + head,
+			height: rect.height - head
+		}, 14)}`;
+	}
+	static cylinder({ x, y, width, height }, lid) {
+		const rx = width / 2;
+		return {
+			body: `M${f(x)},${f(y + lid)}a${f(rx)},${lid} 0 0,1 ${f(width)},0v${f(height - 2 * lid)}a${f(rx)},${lid} 0 0,1 ${f(-width)},0Z`,
+			lid: `M${f(x)},${f(y + lid)}a${f(rx)},${lid} 0 0,0 ${f(width)},0`
+		};
+	}
+	/** Polyline with its corners rounded by up to `r`, so orthogonal routes keep to their corridor. */
+	static route(points, r) {
+		let d = `M${f(points[0].x)},${f(points[0].y)}`;
+		for (let i = 1; i < points.length - 1; i++) {
+			const before = points[i - 1], at = points[i], after = points[i + 1];
+			const inward = Math.hypot(at.x - before.x, at.y - before.y), outward = Math.hypot(after.x - at.x, after.y - at.y);
+			const c = Math.min(r, inward / 2, outward / 2);
+			d += `L${f(at.x + (before.x - at.x) * c / inward)},${f(at.y + (before.y - at.y) * c / inward)}Q${f(at.x)},${f(at.y)} ${f(at.x + (after.x - at.x) * c / outward)},${f(at.y + (after.y - at.y) * c / outward)}`;
+		}
+		const last = points[points.length - 1];
+		return `${d}L${f(last.x)},${f(last.y)}`;
+	}
+	/** Filled triangle whose tip is on `tip`, pointing along the line from `from`. */
+	static arrow(from, tip, size) {
+		const angle = Math.atan2(tip.y - from.y, tip.x - from.x), wing = size * .55;
+		const bx = tip.x - Math.cos(angle) * size, by = tip.y - Math.sin(angle) * size;
+		const nx = -Math.sin(angle) * wing, ny = Math.cos(angle) * wing;
+		return `M${f(tip.x)},${f(tip.y)}L${f(bx + nx)},${f(by + ny)}L${f(bx - nx)},${f(by - ny)}Z`;
+	}
+	/** Network icons on the common Cisco conventions: a round router, a flat switch, a rack server, a cloud and a cylinder. */
+	static device(kind, cx, cy, size) {
+		const half = size / 2;
+		switch (kind) {
+			case NetworkDeviceKind.Router: return {
+				body: circle(cx, cy, half),
+				glyph: ArchitectureShapes.#crossArrows(cx, cy, half * .62)
+			};
+			case NetworkDeviceKind.Switch: {
+				const rect = {
+					x: cx - half * 1.2,
+					y: cy - half * .62,
+					width: size * 1.2,
+					height: size * .62
+				};
+				return {
+					body: ArchitectureShapes.box(rect, 4),
+					glyph: ArchitectureShapes.#laneArrows(cx, cy, half * .8, half * .24)
+				};
+			}
+			case NetworkDeviceKind.Server: {
+				const rect = {
+					x: cx - half * .72,
+					y: cy - half,
+					width: size * .72,
+					height: size
+				};
+				const rows = [
+					-.55,
+					-.2,
+					.15
+				].map((row) => `M${f(cx - half * .46)},${f(cy + row * half)}h${f(half * .92)}`).join("");
+				return {
+					body: ArchitectureShapes.box(rect, 4),
+					glyph: `${rows}M${f(cx - half * .1)},${f(cy + half * .62)}h${f(half * .2)}`
+				};
+			}
+			case NetworkDeviceKind.Database: {
+				const lid = size * .16;
+				const drum = ArchitectureShapes.cylinder({
+					x: cx - half * .8,
+					y: cy - half,
+					width: size * .8,
+					height: size
+				}, lid);
+				return {
+					body: drum.body,
+					glyph: drum.lid
+				};
+			}
+			case NetworkDeviceKind.Cloud: {
+				const s = size / 32, x = (value) => f(cx + value * s), y = (value) => f(cy + value * s), r = (value) => f(value * s);
+				return {
+					body: `M${x(-14)},${y(9)}A${r(7)},${r(7)} 0 0,1 ${x(-15)},${y(-4.8)}A${r(9)},${r(9)} 0 0,1 ${x(-1)},${y(-8.6)}A${r(7)},${r(7)} 0 0,1 ${x(11)},${y(-4)}A${r(6.6)},${r(6.6)} 0 0,1 ${x(14)},${y(9)}Z`,
+					glyph: ""
+				};
+			}
+		}
+	}
+	static #crossArrows(cx, cy, r) {
+		const h = r * .4;
+		const point = (angle, inward) => {
+			const ax = Math.cos(angle), ay = Math.sin(angle);
+			const [from, to] = inward ? [r, r * .28] : [r * .28, r];
+			const tip = {
+				x: cx + ax * to,
+				y: cy + ay * to
+			}, sign = inward ? 1 : -1;
+			const wing = (side) => `M${f(tip.x + sign * ax * h + side * -ay * h)},${f(tip.y + sign * ay * h + side * ax * h)}L${f(tip.x)},${f(tip.y)}`;
+			return `M${f(cx + ax * from)},${f(cy + ay * from)}L${f(tip.x)},${f(tip.y)}${wing(1)}${wing(-1)}`;
+		};
+		return [
+			point(Math.PI / 4, false),
+			point(5 * Math.PI / 4, false),
+			point(3 * Math.PI / 4, true),
+			point(-Math.PI / 4, true)
+		].join("");
+	}
+	static #laneArrows(cx, cy, reach, gap) {
+		const head = gap * .9;
+		const lane = (y, sign) => `M${f(cx - sign * reach)},${f(y)}H${f(cx + sign * reach)}m${f(-sign * head)},${f(-head)}l${f(sign * head)},${f(head)}l${f(-sign * head)},${f(head)}`;
+		return lane(cy - gap, 1) + lane(cy + gap, -1);
+	}
+};
+export { ArchitectureShapes };

package/dist/charts/diagrams/ArchitectureText.js

@@ -0,0 +1,25 @@
+import { DiagramText } from "./DiagramText.js";
+// src/charts/diagrams/ArchitectureText.ts
+var CHAR = .58;
+/** Width estimates and wrapping for text fitted to boxes without measuring the DOM. */
+var ArchitectureText = class ArchitectureText {
+	static width(text, size) {
+		return DiagramText.width(text, size, CHAR);
+	}
+	static fit(text, room, size) {
+		return DiagramText.fit(text, room, size, CHAR);
+	}
+	/** Breaks at spaces into at most `lines` lines, cutting the last one if text remains. */
+	static wrap(text, room, size, lines) {
+		const out = [];
+		let rest = text.trim().split(/\s+/).filter(Boolean);
+		while (rest.length && out.length < lines) {
+			let line = rest[0], used = 1;
+			while (used < rest.length && ArchitectureText.width(`${line} ${rest[used]}`, size) <= room) line += ` ${rest[used++]}`;
+			rest = rest.slice(used);
+			out.push(ArchitectureText.fit(out.length === lines - 1 && rest.length ? `${line} ${rest.join(" ")}` : line, room, size));
+		}
+		return out.filter(Boolean);
+	}
+};
+export { ArchitectureText };

package/dist/charts/diagrams/DiagramText.js

@@ -0,0 +1,38 @@
+// src/charts/diagrams/DiagramText.ts
+var ASCII = /^[\x00-\x7f]*$/;
+var NO_ADVANCE = /[\p{Mn}\p{Me}​-‍︀-️]/u;
+var EMOJI = /\p{Extended_Pictographic}/u;
+var FULL = /[ᄀ-ᅟ⺀-〾ぁ-꓏가-힣豈-﫿︰-﹯＀-｠￠-￦\u{20000}-\u{3FFFD}]/u;
+var EMOJI_EM = 1.35;
+var FULL_EM = 1.05;
+/**
+* Width estimates for labels placed without measuring the DOM. A plain per-character estimate
+* under-reads CJK and emoji by half or more, and cutting by UTF-16 unit can split a surrogate
+* pair, so this works in code points. `narrow` is the em width of an ordinary character.
+*/
+var DiagramText = class DiagramText {
+	static #advance(char, narrow) {
+		if (NO_ADVANCE.test(char)) return 0;
+		return FULL.test(char) ? FULL_EM : EMOJI.test(char) && char.length > 1 ? EMOJI_EM : narrow;
+	}
+	static width(text, size, narrow = .56) {
+		if (ASCII.test(text)) return text.length * size * narrow;
+		let ems = 0;
+		for (const char of text) ems += DiagramText.#advance(char, narrow);
+		return ems * size;
+	}
+	/** Cuts `text` to `room` pixels, marking the cut with an ellipsis, or returns nothing when under two characters would show. */
+	static fit(text, room, size, narrow = .56) {
+		if (DiagramText.width(text, size, narrow) <= room) return text;
+		const limit = room / size - narrow;
+		let used = 0, kept = "", count = 0;
+		for (const char of text) {
+			used += DiagramText.#advance(char, narrow);
+			if (used > limit + 1e-9) break;
+			kept += char;
+			count++;
+		}
+		return count && room >= 2 * size * narrow ? `${kept.trimEnd()}…` : "";
+	}
+};
+export { DiagramText };

package/dist/charts/diagrams/EntityRelationshipDiagram.js

@@ -0,0 +1,465 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { UmlDirection } from "../structure/structureEnums.js";
+import { UmlLayout } from "../structure/UmlLayout.js";
+import { DiagramText } from "./DiagramText.js";
+import { ER_RING, ErCrowsFoot } from "./ErCrowsFoot.js";
+import { ErSamples } from "./ErSamples.js";
+import { ErCardinality, ErSchema } from "./ErSchema.js";
+// src/charts/diagrams/EntityRelationshipDiagram.ts
+var ErDetail = /* @__PURE__ */ function(ErDetail) {
+	ErDetail["Full"] = "full";
+	ErDetail["Keys"] = "keys";
+	ErDetail["Names"] = "names";
+	return ErDetail;
+}({});
+var HEAD = 24;
+var LINE = 14;
+var TEXT = 10.5;
+var BADGE = 9;
+var PAD = 7;
+var GAP = 10;
+var MIN_WIDTH = 84;
+var MAX_WIDTH = 236;
+var MIN_TYPE = 44;
+var LABEL = 10;
+var LABEL_ROOM = 110;
+/** Room for both end marks of a self-reference on one face, for UmlLayout's loop at 35% and 65%. */
+var LOOP_HEIGHT = 50;
+/** Face length each port takes when several self-references share a face. */
+var LOOP_PORT = 16;
+var CLEARANCE = 30;
+var END_WORDS = {
+	[ErCardinality.ExactlyOne]: "Exactly one",
+	[ErCardinality.ZeroOrOne]: "Zero or one",
+	[ErCardinality.OneOrMany]: "One or many",
+	[ErCardinality.ZeroOrMany]: "Zero or many"
+};
+var overlaps = (a, b) => a.left < b.right && b.left < a.right && a.top < b.bottom && b.top < a.bottom;
+/**
+* Entity-relationship diagram of a relational schema in Information Engineering crow's foot notation
+* (Martin, 1981; Everest, 1976). Takes one row per table column, as `information_schema` gives them. The parent
+* end follows FK nullability and the child end whether the FK is unique. Identifying relationships are solid and
+* non-identifying ones dashed. Use it to document a database; for object models use the UML class diagram.
+*/
+var EntityRelationshipDiagram = class extends Chart2D {
+	static meta = {
+		id: "entity-relationship-diagram",
+		name: "Entity-relationship diagram",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Lays out database tables with their columns and keys, joined by orthogonal foreign key lines with crow's foot cardinality marks.",
+		tags: [
+			"erd",
+			"database",
+			"schema",
+			"crows-foot",
+			"foreign-key"
+		],
+		sample: (seed) => ErSamples.shop(seed),
+		variants: {
+			direction: [UmlDirection.LeftRight, UmlDirection.TopDown],
+			detail: [
+				"full",
+				"keys",
+				"names"
+			],
+			labels: [true, false]
+		}
+	};
+	defaults() {
+		return {
+			direction: UmlDirection.LeftRight,
+			detail: "full",
+			labels: true,
+			table: "table",
+			column: "column",
+			dataType: "type",
+			key: "key",
+			references: "references",
+			nullable: "nullable",
+			constraint: "constraint",
+			relation: "relation",
+			parentEnd: "parentEnd",
+			childEnd: "childEnd"
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	legendItems() {
+		return [];
+	}
+	boxView(table, loops) {
+		const { detail } = this.options;
+		const shown = detail === "names" ? [] : table.columns.filter((column) => detail === "full" || column.primary || column.foreign || column.unique);
+		const ordered = [...shown.filter((column) => column.primary), ...shown.filter((column) => !column.primary)];
+		const keyed = shown.filter((column) => column.primary).length;
+		const badge = (column) => [
+			column.primary && "PK",
+			column.foreign && "FK",
+			column.unique && "UK"
+		].filter(Boolean).join(" ");
+		const badgeWidth = Math.ceil(Math.max(0, ...ordered.map((column) => DiagramText.width(badge(column), BADGE) + (badge(column) ? 6 : 0))));
+		const nameWidth = Math.max(0, ...ordered.map((column) => DiagramText.width(column.name, TEXT)));
+		const typeWidth = Math.max(0, ...ordered.map((column) => DiagramText.width(column.type, TEXT)));
+		const inner = badgeWidth + nameWidth + (typeWidth ? typeWidth + GAP : 0);
+		const face = loops > 1 ? (2 * loops + 1) * LOOP_PORT : 0;
+		const width = Math.ceil(Math.max(face, Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, DiagramText.width(table.id, 12) * 1.04 + 16, inner + 14))));
+		const room = width - 14 - badgeWidth - (typeWidth ? GAP : 0);
+		const typeRoom = Math.min(typeWidth, Math.max(Math.min(typeWidth, MIN_TYPE), room - nameWidth));
+		const rules = keyed && keyed < ordered.length ? [27 + keyed * LINE + 2.5] : [];
+		const rows = ordered.map((column, i) => ({
+			column,
+			badge: badge(column),
+			y: 27 + i * LINE + (keyed && i >= keyed ? 5 : 0)
+		}));
+		const body = rows.length ? rows.at(-1).y + LINE + 3 : HEAD;
+		return {
+			table,
+			id: table.id,
+			width,
+			height: Math.max(body, loops ? Math.max(LOOP_HEIGHT, face) : 0),
+			rows,
+			rules,
+			badgeWidth,
+			nameRoom: room - typeRoom,
+			typeRoom
+		};
+	}
+	draw(ctx) {
+		const { direction, labels } = this.options;
+		const fields = this.options;
+		const { tables, relationships } = ErSchema.read(Array.isArray(this.options.data) ? this.options.data : [], fields);
+		const loops = /* @__PURE__ */ new Map();
+		for (const link of relationships) if (link.parent === link.child) loops.set(link.child, (loops.get(link.child) ?? 0) + 1);
+		const views = tables.map((table) => this.boxView(table, loops.get(table.id) ?? 0));
+		const edges = relationships.map((link) => ({
+			upper: link.parent,
+			lower: link.child,
+			priority: link.identifying ? 0 : 1,
+			trunk: null
+		}));
+		const plan = UmlLayout.place(views, edges, {
+			horizontal: direction === UmlDirection.LeftRight,
+			orthogonal: true,
+			clearance: CLEARANCE
+		});
+		const scale = plan.width ? Math.min(1, (ctx.plot.width - 2) / plan.width, (ctx.plot.height - 2) / plan.height) : 1;
+		const left = (ctx.plot.width - plan.width * scale) / 2, top = (ctx.plot.height - plan.height * scale) / 2;
+		const stage = ctx.nest(`translate(${left},${top}) scale(${scale})`, "erd");
+		const byId = new Map(views.map((view) => [view.id, view]));
+		const placed = plan.boxes.map((box) => ({
+			view: byId.get(box.id),
+			box
+		}));
+		const turns = /* @__PURE__ */ new Map();
+		const routes = relationships.map((relationship, i) => {
+			const points = this.square(plan.routes[i]), { child, parent, key } = relationship;
+			if (child !== parent || loops.get(child) < 2) return {
+				key,
+				relationship,
+				points
+			};
+			const turn = turns.get(child) ?? 0;
+			turns.set(child, turn + 1);
+			return {
+				key,
+				relationship,
+				points: this.stackLoop(points, placed.find(({ box }) => box.id === child).box, turn, loops.get(child))
+			};
+		});
+		const lines = stage.marks("edges", "path", routes, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2).attr("stroke-linejoin", "round").attr("stroke-dasharray", (d) => d.relationship.identifying ? null : "6 4");
+		ctx.set(lines, { d: (d) => `M${d.points.map((point) => `${point.x},${point.y}`).join("L")}` });
+		ctx.hover(lines, (d) => this.linkTip(d.relationship));
+		const marks = routes.flatMap(({ key, relationship, points }) => [{
+			key: `${key}:p`,
+			...ErCrowsFoot.mark(points[0], points[1], relationship.parentEnd)
+		}, {
+			key: `${key}:c`,
+			...ErCrowsFoot.mark(points.at(-1), points.at(-2), relationship.childEnd)
+		}]);
+		const feet = stage.marks("feet", "path", marks, (d) => d.key).attr("fill", "none").attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2).attr("pointer-events", "none");
+		ctx.set(feet, { d: (d) => d.d });
+		const rings = stage.marks("rings", "circle", marks.filter((d) => d.ring), (d) => d.key).attr("fill", ctx.theme.surface).attr("stroke", ctx.theme.inkSecondary).attr("stroke-width", 2).attr("pointer-events", "none");
+		ctx.set(rings, {
+			cx: (d) => d.ring.x,
+			cy: (d) => d.ring.y,
+			r: ER_RING
+		});
+		const boxes = stage.marks("boxes", "rect", placed, (d) => d.box.id).attr("fill", ctx.theme.surface).attr("stroke", ctx.theme.axis).attr("stroke-width", 1.5).attr("rx", 3);
+		ctx.set(boxes, {
+			x: (d) => d.box.x,
+			y: (d) => d.box.y,
+			width: (d) => d.box.width,
+			height: (d) => d.box.height
+		});
+		ctx.hover(boxes, (d) => this.tableTip(d, relationships));
+		const titles = stage.marks("titles", "rect", placed, (d) => d.box.id).attr("fill", ctx.theme.grid).attr("rx", 3).attr("pointer-events", "none");
+		ctx.set(titles, {
+			x: (d) => d.box.x + 1,
+			y: (d) => d.box.y + 1,
+			width: (d) => d.box.width - 2,
+			height: (d) => (d.view.rows.length ? HEAD : d.box.height) - 2
+		});
+		const rules = placed.flatMap(({ box, view }) => [...view.rows.length ? [HEAD] : [], ...view.rules].map((at, i) => ({
+			key: `${box.id}:${i}`,
+			x1: box.x,
+			x2: box.x + box.width,
+			y: box.y + at
+		})));
+		const dividers = stage.marks("dividers", "line", rules, (d) => d.key).attr("stroke", ctx.theme.axis).attr("stroke-width", 1).attr("pointer-events", "none");
+		ctx.set(dividers, {
+			x1: (d) => d.x1,
+			x2: (d) => d.x2,
+			y1: (d) => d.y,
+			y2: (d) => d.y
+		});
+		const rows = placed.flatMap(({ box, view }) => view.rows.map((row) => ({
+			row,
+			box,
+			table: view.id
+		})));
+		const strips = stage.marks("rows", "rect", rows, (d) => `${d.table}:${d.row.column.name}`).attr("fill", "transparent");
+		ctx.set(strips, {
+			x: (d) => d.box.x + 1,
+			y: (d) => d.box.y + d.row.y,
+			width: (d) => d.box.width - 2,
+			height: LINE
+		});
+		ctx.hover(strips, (d) => this.columnTip(d.table, d.row.column));
+		const texts = stage.marks("text", "text", placed.flatMap((item) => this.lines(item)), (d) => d.key).attr("pointer-events", "none").attr("font-family", ctx.theme.fontFamily).attr("font-size", (d) => d.size).attr("font-weight", (d) => d.bold ? 600 : 400).attr("text-anchor", (d) => d.anchor).attr("fill", (d) => d.tone === "ink" ? ctx.theme.ink : ctx.theme.inkSecondary).text((d) => d.text);
+		ctx.set(texts, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const names = labels ? this.relationLabels(routes, plan.boxes, plan.width, plan.height) : [];
+		const captions = ctx.text(stage.marks("captions", "text", names, (d) => d.key), LABEL).attr("text-anchor", (d) => d.anchor).attr("pointer-events", "none").attr("font-style", "italic").attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").text((d) => d.text);
+		ctx.set(captions, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+	}
+	/** UmlLayout draws every self-reference of a table on the same two ports, so each after the first would hide under it. */
+	stackLoop(points, box, turn, count) {
+		const upright = points[0].x === points.at(-1).x;
+		const [start, length] = upright ? [box.y, box.height] : [box.x, box.width];
+		const port = (slot) => start + length * (slot + 1) / (2 * count + 1);
+		return points.map((point, i) => {
+			const at = port(2 * turn + (i < 2 ? 0 : 1));
+			return upright ? {
+				...point,
+				y: at
+			} : {
+				...point,
+				x: at
+			};
+		});
+	}
+	/** UmlLayout leaves bends under half a pixel unrouted, which would slant a line. */
+	square(points) {
+		const out = [points[0]];
+		for (const { x, y } of points.slice(1)) {
+			const last = out.at(-1), flat = {
+				x: Math.abs(x - last.x) < 1 ? last.x : x,
+				y: Math.abs(y - last.y) < 1 ? last.y : y
+			};
+			if (flat.x !== last.x || flat.y !== last.y) out.push(flat);
+		}
+		return out.length > 1 ? out : points;
+	}
+	lines({ box, view }) {
+		const drop = view.rows.length ? 0 : (box.height - HEAD) / 2;
+		const out = [{
+			key: `${box.id}:n`,
+			text: DiagramText.fit(box.id, box.width - 10, 12),
+			x: box.x + box.width / 2,
+			y: box.y + drop + 16,
+			size: 12,
+			bold: true,
+			anchor: "middle",
+			tone: "ink"
+		}];
+		for (const { column, y, badge } of view.rows) {
+			const base = box.y + y + 10.5, name = column.name, key = `${box.id}:${name}`;
+			if (badge) out.push({
+				key: `${key}:k`,
+				text: badge,
+				x: box.x + PAD,
+				y: base,
+				size: BADGE,
+				bold: true,
+				anchor: "start",
+				tone: "secondary"
+			});
+			out.push({
+				key: `${key}:c`,
+				text: DiagramText.fit(name, view.nameRoom, TEXT),
+				x: box.x + PAD + view.badgeWidth,
+				y: base,
+				size: TEXT,
+				bold: column.primary,
+				anchor: "start",
+				tone: "ink"
+			});
+			if (column.type) out.push({
+				key: `${key}:t`,
+				text: DiagramText.fit(column.type, view.typeRoom, TEXT),
+				x: box.x + box.width - PAD,
+				y: base,
+				size: TEXT,
+				bold: false,
+				anchor: "end",
+				tone: "secondary"
+			});
+		}
+		return out;
+	}
+	/** Puts each name beside its own line, keeping clear of boxes, end marks and other names. A name with no free spot stays in the tooltip. */
+	relationLabels(routes, boxes, width, height) {
+		const taken = boxes.map((box) => ({
+			left: box.x,
+			top: box.y,
+			right: box.x + box.width,
+			bottom: box.y + box.height
+		}));
+		const reach = 21;
+		for (const { points } of routes) for (const [tip, next] of [[points[0], points[1]], [points.at(-1), points.at(-2)]]) {
+			const size = Math.hypot(next.x - tip.x, next.y - tip.y) || 1;
+			const end = {
+				x: tip.x + (next.x - tip.x) / size * reach,
+				y: tip.y + (next.y - tip.y) / size * reach
+			};
+			taken.push({
+				left: Math.min(tip.x, end.x) - 7,
+				top: Math.min(tip.y, end.y) - 7,
+				right: Math.max(tip.x, end.x) + 7,
+				bottom: Math.max(tip.y, end.y) + 7
+			});
+		}
+		const wires = routes.flatMap(({ points }) => points.slice(1).map((point, i) => {
+			const from = points[i];
+			return {
+				left: Math.min(from.x, point.x) - 1,
+				top: Math.min(from.y, point.y) - 1,
+				right: Math.max(from.x, point.x) + 1,
+				bottom: Math.max(from.y, point.y) + 1
+			};
+		}));
+		const out = [];
+		for (const { key, relationship, points } of routes) {
+			if (!relationship.label) continue;
+			const text = DiagramText.fit(relationship.label, LABEL_ROOM, LABEL);
+			const spot = this.spots(points, DiagramText.width(text, LABEL)).find(({ area }) => area.left >= 0 && area.top >= 0 && area.right <= width && area.bottom <= height && !taken.some((other) => overlaps(area, other)) && !wires.some((other) => overlaps(area, other)));
+			if (!spot || !text) continue;
+			taken.push(spot.area);
+			out.push({
+				key,
+				text,
+				x: spot.x,
+				y: spot.y,
+				anchor: spot.anchor
+			});
+		}
+		return out;
+	}
+	/** Candidate name positions along a route, longest segment and middle first. */
+	spots(points, size) {
+		return points.slice(1).map((point, i) => ({
+			a: points[i],
+			b: point,
+			length: Math.hypot(point.x - points[i].x, point.y - points[i].y)
+		})).sort((p, q) => q.length - p.length).flatMap(({ a, b }) => [
+			.5,
+			.3,
+			.7
+		].flatMap((t) => {
+			const x = a.x + (b.x - a.x) * t, y = a.y + (b.y - a.y) * t;
+			if (Math.abs(b.y - a.y) >= Math.abs(b.x - a.x)) return [{
+				x: x + 6,
+				y: y + 3.5,
+				anchor: "start",
+				area: {
+					left: x + 5,
+					top: y - 7,
+					right: x + 7 + size,
+					bottom: y + 6
+				}
+			}, {
+				x: x - 6,
+				y: y + 3.5,
+				anchor: "end",
+				area: {
+					left: x - 7 - size,
+					top: y - 7,
+					right: x - 5,
+					bottom: y + 6
+				}
+			}];
+			const half = size / 2 + 1;
+			return [{
+				x,
+				y: y - 5,
+				anchor: "middle",
+				area: {
+					left: x - half,
+					top: y - 15,
+					right: x + half,
+					bottom: y - 2
+				}
+			}, {
+				x,
+				y: y + 12,
+				anchor: "middle",
+				area: {
+					left: x - half,
+					top: y + 2,
+					right: x + half,
+					bottom: y + 15
+				}
+			}];
+		}));
+	}
+	linkTip(link) {
+		const rows = [
+			[`${link.parent} (parent) end`, END_WORDS[link.parentEnd]],
+			[`${link.child} (child) end`, END_WORDS[link.childEnd]],
+			["Kind", link.identifying ? "Identifying" : "Non-identifying"]
+		];
+		if (link.label) rows.push(["Name", link.label]);
+		if (link.constraint) rows.push(["Constraint", link.constraint]);
+		return {
+			title: `${link.child}.${link.columns.join(", ")} → ${link.references.join(", ")}`,
+			rows
+		};
+	}
+	tableTip({ view }, links) {
+		const { columns } = view.table;
+		return {
+			title: view.id,
+			rows: [
+				["Columns", columns.length],
+				["Primary key", columns.filter((column) => column.primary).map((column) => column.name).join(", ") || "None"],
+				["References", links.filter((link) => link.child === view.id).length],
+				["Referenced by", links.filter((link) => link.parent === view.id).length]
+			]
+		};
+	}
+	columnTip(table, column) {
+		const rows = [["Type", column.type || "Unknown"], ["Nullable", column.nullable ? "Yes" : "No"]];
+		if (column.primary) rows.push(["Key", "Primary"]);
+		else if (column.unique) rows.push(["Key", "Unique"]);
+		if (column.foreign) rows.push(["References", column.references]);
+		return {
+			title: `${table}.${column.name}`,
+			rows
+		};
+	}
+};
+export { EntityRelationshipDiagram, ErDetail };

package/dist/charts/diagrams/ErCrowsFoot.js

@@ -0,0 +1,33 @@
+import { ErCardinality } from "./ErSchema.js";
+// src/charts/diagrams/ErCrowsFoot.ts
+var SPREAD = 6;
+var APEX = 11;
+var NEAR = 5;
+var FAR = 10;
+var ER_RING = 3.5;
+/**
+* Information Engineering end marks. Reading out from the entity, the first symbol is the maximum
+* (a bar for one, three prongs for many) and the second the minimum (a ring for zero, a bar for one).
+*/
+var ErCrowsFoot = class {
+	/** `tip` lies on the entity's face and `next` is the following route point. */
+	static mark(tip, next, cardinality) {
+		const length = Math.hypot(next.x - tip.x, next.y - tip.y) || 1;
+		const ux = (next.x - tip.x) / length, uy = (next.y - tip.y) / length;
+		const at = (along, across) => `${tip.x + ux * along - uy * across},${tip.y + uy * along + ux * across}`;
+		const bar = (along) => `M${at(along, SPREAD)}L${at(along, -6)}`;
+		const many = cardinality === ErCardinality.OneOrMany || cardinality === ErCardinality.ZeroOrMany;
+		const optional = cardinality === ErCardinality.ZeroOrOne || cardinality === ErCardinality.ZeroOrMany;
+		const start = many ? APEX : NEAR;
+		const maximum = many ? `M${at(0, SPREAD)}L${at(APEX, 0)}L${at(0, -6)}` : bar(NEAR);
+		const center = start + ER_RING + 1;
+		return {
+			d: maximum + (optional ? "" : bar(start + FAR - NEAR)),
+			ring: optional ? {
+				x: tip.x + ux * center,
+				y: tip.y + uy * center
+			} : null
+		};
+	}
+};
+export { ER_RING, ErCrowsFoot };