dbml-erd-viewer 0.1.0 → 0.1.1

package/dist/dbml-erd-viewer.js

@@ -1,17 +1,17 @@
 import { forwardRef as e, memo as t, useCallback as n, useEffect as r, useImperativeHandle as i, useMemo as a, useRef as o, useState as s } from "react";
 import { Background as c, ControlButton as l, Controls as u, Handle as d, MiniMap as f, Position as p, ReactFlow as ee, getNodesBounds as te, getSmoothStepPath as m, useEdgesState as ne, useNodesState as re } from "@xyflow/react";
-import * as ie from "@dbml/core";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import * as h from "@dbml/core";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/parser/parseDbml.ts
-var v = ie, y = v.Parser ?? v.default?.Parser;
-if (!y) throw Error("Could not resolve `Parser` export from @dbml/core.");
-var b = y, x = "public", S = class extends Error {
+var y = h, b = y.Parser ?? y.default?.Parser;
+if (!b) throw Error("Could not resolve `Parser` export from @dbml/core.");
+var x = b, S = "public", C = class extends Error {
 	diagnostics;
 	constructor(e, t) {
 		super(e, t), this.name = "DbmlParseError", this.diagnostics = t?.diagnostics ?? [];
 	}
 };
-function C(e) {
+function w(e) {
 	let t = e?.diags;
 	return Array.isArray(t) ? t.map((e) => ({
 		message: e.message ?? "Unknown error",
@@ -20,43 +20,43 @@ function C(e) {
 		code: e.code
 	})) : [];
 }
-function w(e, t) {
+function T(e, t) {
 	if (e.length === 0) return `Failed to parse DBML: ${t}`;
 	let n = e.map((e) => `  • ${e.line == null ? "" : `Line ${e.line}${e.column == null ? "" : `:${e.column}`} — `}${e.message}`);
 	return `${e.length === 1 ? "Failed to parse DBML:" : `Failed to parse DBML (${e.length} errors):`}\n${n.join("\n")}`;
 }
-function T(e) {
+function E(e) {
 	if (e) return typeof e == "string" ? e : e.value ?? void 0;
 }
-function E(e, t) {
-	return e && e !== x ? `${e}.${t}` : t;
+function D(e, t) {
+	return e && e !== S ? `${e}.${t}` : t;
 }
-function D(e) {
+function O(e) {
 	let t = /* @__PURE__ */ new Set();
 	for (let n of e.fields) n.pk && t.add(n.name);
 	for (let n of e.indexes ?? []) if (n.pk) for (let e of n.columns ?? []) e.type === "column" && e.value && t.add(e.value);
 	return t;
 }
-function O(e) {
+function ie(e) {
 	let t;
 	try {
-		t = new b().parse(e, "dbmlv2");
+		t = new x().parse(e, "dbmlv2");
 	} catch (e) {
-		let t = C(e);
-		throw new S(w(t, e instanceof Error ? e.message : String(e)), {
+		let t = w(e);
+		throw new C(T(t, e instanceof Error ? e.message : String(e)), {
 			cause: e,
 			diagnostics: t
 		});
 	}
 	let n = /* @__PURE__ */ new Map();
 	for (let e of t.schemas) for (let t of e.tables) {
-		let r = E(e.name, t.name), i = D(t), a = /* @__PURE__ */ new Map();
+		let r = D(e.name, t.name), i = O(t), a = /* @__PURE__ */ new Map();
 		for (let e of t.fields) {
 			let t = i.has(e.name);
 			a.set(e.name, {
 				pk: t,
 				notNull: t || !!e.not_null,
-				note: T(e.note)
+				note: E(e.note)
 			});
 		}
 		n.set(r, a);
@@ -71,7 +71,7 @@ function O(e) {
 	for (let e of t.schemas) for (let t of e.refs) {
 		if (t.endpoints.length !== 2) continue;
 		let [n, c] = t.endpoints.map((t) => ({
-			tableId: E(t.schemaName ?? e.name, t.tableName),
+			tableId: D(t.schemaName ?? e.name, t.tableName),
 			columns: t.fieldNames,
 			relation: t.relation
 		})), l, u, d = n.relation === "*";
@@ -98,7 +98,7 @@ function O(e) {
 	for (let e of t.schemas) {
 		let t = e.name;
 		for (let n of e.tables) {
-			let e = E(t, n.name), r = D(n), i = n.fields.map((t) => ({
+			let e = D(t, n.name), r = O(n), i = n.fields.map((t) => ({
 				name: t.name,
 				type: t.type?.type_name ?? "unknown",
 				pk: r.has(t.name),
@@ -106,14 +106,14 @@ function O(e) {
 				unique: !!t.unique,
 				increment: !!t.increment,
 				defaultValue: t.dbdefault?.value,
-				note: T(t.note),
+				note: E(t.note),
 				isForeignKey: s.has(`${e}::${t.name}`)
 			}));
 			c.push({
 				id: e,
 				name: n.name,
-				schema: t === x ? void 0 : t,
-				note: T(n.note),
+				schema: t === S ? void 0 : t,
+				note: E(n.note),
 				headerColor: n.headerColor ?? void 0,
 				columns: i
 			});
@@ -126,11 +126,23 @@ function O(e) {
 }
 //#endregion
 //#region src/layout/layout.ts
-var k = 240, A = 40, j = 28;
-function M(e) {
+var k = 160, ae = 320, A = 320, j = 40, M = 28;
+function N(e) {
 	return 40 + Math.max(e.columns.length, 1) * 28;
 }
-function N(e) {
+var P = 24, F = 8, I = 24, L = 12, oe = 24, R = 6.8, z = 7.4;
+function B(e, t = {}) {
+	let n = t.minWidth ?? 160, r = t.maxWidth ?? 320, i = oe + V(e) * z;
+	for (let t of e.columns) {
+		let e = (t.pk || t.isForeignKey ? I : 0) + t.name.length * R, n = t.type.length * R + L;
+		i = Math.max(i, P + e + F + n);
+	}
+	return Math.round(Math.min(r, Math.max(n, i)));
+}
+function V(e) {
+	return (e.schema ? e.schema.length + 1 : 0) + e.name.length;
+}
+function H(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e.tables) t.set(n.id, 0);
 	let n = e.relations.map((e) => [e.from.tableId, e.to.tableId]).filter(([e, n]) => e !== n && t.has(e) && t.has(n));
@@ -144,57 +156,68 @@ function N(e) {
 	}
 	return t;
 }
-function P(e, t = {}) {
-	let n = t.horizontalGap ?? 120, r = t.verticalGap ?? 40, i = N(e), a = /* @__PURE__ */ new Map();
+function U(e, t = {}) {
+	let n = t.horizontalGap ?? 120, r = t.verticalGap ?? 40, i = {
+		minWidth: t.minNodeWidth,
+		maxWidth: t.maxNodeWidth
+	}, a = H(e), o = /* @__PURE__ */ new Map();
 	for (let t of e.tables) {
-		let e = i.get(t.id) ?? 0, n = a.get(e);
-		n || (n = [], a.set(e, n)), n.push(t);
+		let e = a.get(t.id) ?? 0, n = o.get(e);
+		n || (n = [], o.set(e, n)), n.push(t);
 	}
-	let o = /* @__PURE__ */ new Map();
-	return [...a.keys()].sort((e, t) => e - t).forEach((e, t) => {
-		let i = a.get(e).sort((e, t) => e.name.localeCompare(t.name)), s = t * (240 + n), c = 0;
-		for (let e of i) {
-			let t = M(e);
-			o.set(e.id, {
-				x: s,
+	let s = /* @__PURE__ */ new Map(), c = [...o.keys()].sort((e, t) => e - t), l = 0;
+	for (let e of c) {
+		let t = o.get(e).sort((e, t) => e.name.localeCompare(t.name)), a = 0, c = 0;
+		for (let e of t) {
+			let t = B(e, i), n = N(e);
+			s.set(e.id, {
+				x: l,
 				y: c,
-				width: 240,
-				height: t
-			}), c += t + r;
+				width: t,
+				height: n
+			}), a = Math.max(a, t), c += n + r;
 		}
-	}), o;
+		l += a + n;
+	}
+	return s;
 }
 //#endregion
 //#region src/layout/dagre.ts
-async function F(e, t = {}) {
-	let n = await import("@dagrejs/dagre"), r = t.horizontalGap ?? 120, i = t.verticalGap ?? 40, a = t.direction === "TB" ? "TB" : "LR", o = new n.graphlib.Graph();
-	o.setGraph({
-		rankdir: a,
+async function W(e, t = {}) {
+	let n = await import("@dagrejs/dagre"), r = t.horizontalGap ?? 120, i = t.verticalGap ?? 40, a = {
+		minWidth: t.minNodeWidth,
+		maxWidth: t.maxNodeWidth
+	}, o = t.direction === "TB" ? "TB" : "LR", s = new n.graphlib.Graph();
+	s.setGraph({
+		rankdir: o,
 		ranksep: r,
 		nodesep: i
-	}), o.setDefaultEdgeLabel(() => ({}));
-	for (let t of e.tables) o.setNode(t.id, {
-		width: 240,
-		height: M(t)
+	}), s.setDefaultEdgeLabel(() => ({}));
+	for (let t of e.tables) s.setNode(t.id, {
+		width: B(t, a),
+		height: N(t)
 	});
-	for (let t of e.relations) o.hasNode(t.from.tableId) && o.hasNode(t.to.tableId) && o.setEdge(t.from.tableId, t.to.tableId);
-	n.layout(o);
-	let s = /* @__PURE__ */ new Map();
-	for (let e of o.nodes()) {
-		let t = o.node(e);
-		t && s.set(e, {
+	for (let t of e.relations) s.hasNode(t.from.tableId) && s.hasNode(t.to.tableId) && s.setEdge(t.from.tableId, t.to.tableId);
+	n.layout(s);
+	let c = /* @__PURE__ */ new Map();
+	for (let e of s.nodes()) {
+		let t = s.node(e);
+		t && c.set(e, {
 			x: t.x - t.width / 2,
 			y: t.y - t.height / 2,
 			width: t.width,
 			height: t.height
 		});
 	}
-	return s;
+	return c;
 }
 //#endregion
 //#region src/layout/elk.ts
-async function I(e, t = {}) {
+async function G(e, t = {}) {
 	let n = new (await (import("elkjs/lib/elk.bundled.js"))).default(), r = t.horizontalGap ?? 120, i = t.verticalGap ?? 40, a = {
+		minWidth: t.minNodeWidth,
+		maxWidth: t.maxNodeWidth
+	}, o = {
 		id: "root",
 		layoutOptions: {
 			"elk.algorithm": "layered",
@@ -204,42 +227,42 @@ async function I(e, t = {}) {
 		},
 		children: e.tables.map((e) => ({
 			id: e.id,
-			width: 240,
-			height: M(e)
+			width: B(e, a),
+			height: N(e)
 		})),
 		edges: e.relations.map((e, t) => ({
 			id: `e${t}`,
 			sources: [e.from.tableId],
 			targets: [e.to.tableId]
 		}))
-	}, o = await n.layout(a), s = /* @__PURE__ */ new Map();
-	for (let e of o.children ?? []) s.set(e.id, {
+	}, s = await n.layout(o), c = /* @__PURE__ */ new Map();
+	for (let e of s.children ?? []) c.set(e.id, {
 		x: e.x ?? 0,
 		y: e.y ?? 0,
-		width: e.width ?? 240,
+		width: e.width ?? 160,
 		height: e.height ?? 0
 	});
-	return s;
+	return c;
 }
 //#endregion
 //#region src/layout/computeLayout.ts
-var L = class extends Error {
+var K = class extends Error {
 	constructor(e, t) {
 		super(e, t), this.name = "LayoutError";
 	}
 };
-async function R(e, t = {}) {
+async function q(e, t = {}) {
 	let n = t.algorithm ?? "simple";
-	if (n === "simple") return P(e, t);
+	if (n === "simple") return U(e, t);
 	try {
-		return n === "dagre" ? await F(e, t) : await I(e, t);
+		return n === "dagre" ? await W(e, t) : await G(e, t);
 	} catch (e) {
-		throw new L(`"${n}" layout failed. Is the optional dependency "${n === "dagre" ? "@dagrejs/dagre" : "elkjs"}" installed? (${e instanceof Error ? e.message : String(e)})`, { cause: e });
+		throw new K(`"${n}" layout failed. Is the optional dependency "${n === "dagre" ? "@dagrejs/dagre" : "elkjs"}" installed? (${e instanceof Error ? e.message : String(e)})`, { cause: e });
 	}
 }
 //#endregion
 //#region src/export.ts
-var ae = [
+var J = [
 	"--dv-canvas",
 	"--dv-bg",
 	"--dv-border",
@@ -255,12 +278,12 @@ var ae = [
 	"--dv-edge",
 	"--dv-edge-active",
 	"--dv-font"
-], z = class extends Error {
+], Y = class extends Error {
 	constructor(e, t) {
 		super(e, t), this.name = "ExportError";
 	}
 };
-function oe(e, t) {
+function se(e, t) {
 	let n = e.x, r = e.y, i = e.x + e.width, a = e.y + e.height;
 	for (let e of t.querySelectorAll(".dv-erd-edge")) {
 		let t;
@@ -278,12 +301,12 @@ function oe(e, t) {
 		height: a - r
 	};
 }
-async function B(e, t, n = {}) {
+async function ce(e, t, n = {}) {
 	let { type: r = "png", padding: i = 24, backgroundColor: a, pixelRatio: o = 2 } = n, s;
 	try {
 		s = await import("html-to-image");
 	} catch (e) {
-		throw new z("Export requires the optional dependency \"html-to-image\". Install it to enable PNG/SVG export.", { cause: e });
+		throw new Y("Export requires the optional dependency \"html-to-image\". Install it to enable PNG/SVG export.", { cause: e });
 	}
 	if (typeof document < "u" && document.fonts?.ready) try {
 		await document.fonts.ready;
@@ -297,23 +320,23 @@ async function B(e, t, n = {}) {
 			height: `${l}px`,
 			transform: u
 		}
-	}, f = V(e, t, i);
+	}, f = le(e, t, i);
 	try {
 		return r === "svg" ? await s.toSvg(e, d) : await s.toPng(e, {
 			...d,
 			pixelRatio: o
 		});
 	} catch (e) {
-		throw new z(`Failed to render diagram image: ${e instanceof Error ? e.message : String(e)}`, { cause: e });
+		throw new Y(`Failed to render diagram image: ${e instanceof Error ? e.message : String(e)}`, { cause: e });
 	} finally {
 		f();
 	}
 }
-function V(e, t, n) {
+function le(e, t, n) {
 	let r = [], i = e.closest(".dv-viewer");
 	if (i) {
 		let t = getComputedStyle(i);
-		for (let n of ae) {
+		for (let n of J) {
 			let i = t.getPropertyValue(n);
 			if (!i) continue;
 			let a = e.style.getPropertyValue(n);
@@ -331,49 +354,49 @@ function V(e, t, n) {
 	}
 	return () => r.forEach((e) => e());
 }
-function H(e, t) {
+function ue(e, t) {
 	let n = document.createElement("a");
 	n.href = e, n.download = t, n.click();
 }
 //#endregion
 //#region src/components/handles.ts
-function U(e, t, n) {
+function X(e, t, n) {
 	return `${e}__${t}__${n}`;
 }
 //#endregion
 //#region src/components/TableNode.tsx
-function W(e) {
+function de(e) {
 	return 40 + e * 28 + 28 / 2;
 }
-function G({ column: e, top: t }) {
+function fe({ column: e, top: t }) {
 	let n = {
 		top: t,
 		opacity: 0
 	};
-	return /* @__PURE__ */ _(h, { children: [
-		/* @__PURE__ */ g(d, {
-			id: U(e, "left", "target"),
+	return /* @__PURE__ */ v(g, { children: [
+		/* @__PURE__ */ _(d, {
+			id: X(e, "left", "target"),
 			type: "target",
 			position: p.Left,
 			style: n,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ g(d, {
-			id: U(e, "left", "source"),
+		/* @__PURE__ */ _(d, {
+			id: X(e, "left", "source"),
 			type: "source",
 			position: p.Left,
 			style: n,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ g(d, {
-			id: U(e, "right", "target"),
+		/* @__PURE__ */ _(d, {
+			id: X(e, "right", "target"),
 			type: "target",
 			position: p.Right,
 			style: n,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ g(d, {
-			id: U(e, "right", "source"),
+		/* @__PURE__ */ _(d, {
+			id: X(e, "right", "source"),
 			type: "source",
 			position: p.Right,
 			style: n,
@@ -381,60 +404,69 @@ function G({ column: e, top: t }) {
 		})
 	] });
 }
-function K({ data: e }) {
-	let { table: t, highlightedColumns: n } = e;
-	return /* @__PURE__ */ _("div", {
+function Z({ data: e }) {
+	let { table: t, highlightedColumns: n, widthBounds: r } = e;
+	return /* @__PURE__ */ v("div", {
 		className: "dv-table",
-		style: { width: 240 },
-		children: [/* @__PURE__ */ _("div", {
+		style: { width: B(t, r) },
+		children: [/* @__PURE__ */ v("div", {
 			className: "dv-table__header",
 			style: t.headerColor ? {
 				background: t.headerColor,
 				height: 40
 			} : { height: 40 },
 			title: t.note,
-			children: [t.schema && /* @__PURE__ */ _("span", {
+			children: [t.schema && /* @__PURE__ */ v("span", {
 				className: "dv-table__schema",
 				children: [t.schema, "."]
-			}), /* @__PURE__ */ g("span", {
+			}), /* @__PURE__ */ _("span", {
 				className: "dv-table__name",
+				title: t.name,
 				children: t.name
 			})]
-		}), /* @__PURE__ */ g("div", {
+		}), /* @__PURE__ */ _("div", {
 			className: "dv-table__body",
 			children: t.columns.map((e, t) => {
 				let r = n?.has(e.name);
-				return /* @__PURE__ */ _("div", {
+				return /* @__PURE__ */ v("div", {
 					className: `dv-row${r ? " dv-row--highlighted" : ""}`,
 					style: { height: 28 },
 					title: e.note,
 					children: [
-						/* @__PURE__ */ _("span", {
+						/* @__PURE__ */ v("span", {
 							className: `dv-row__name${e.pk ? " dv-row__name--pk" : ""}`,
 							children: [
-								e.pk && /* @__PURE__ */ g("span", {
+								e.pk && /* @__PURE__ */ _("span", {
 									className: "dv-badge dv-badge--pk",
 									title: "Primary key",
 									children: "PK"
 								}),
-								e.isForeignKey && !e.pk && /* @__PURE__ */ g("span", {
+								e.isForeignKey && !e.pk && /* @__PURE__ */ _("span", {
 									className: "dv-badge dv-badge--fk",
 									title: "Foreign key",
 									children: "FK"
 								}),
-								e.name
+								/* @__PURE__ */ _("span", {
+									className: "dv-row__label",
+									title: e.name,
+									children: e.name
+								})
 							]
 						}),
-						/* @__PURE__ */ _("span", {
+						/* @__PURE__ */ v("span", {
 							className: "dv-row__type",
-							children: [e.type, /* @__PURE__ */ g("span", {
+							children: [/* @__PURE__ */ _("span", {
+								className: "dv-row__typename",
+								title: e.type,
+								children: e.type
+							}), /* @__PURE__ */ _("span", {
 								className: `dv-row__null${e.notNull ? " dv-row__null--notnull" : ""}`,
 								title: e.notNull ? "Not null" : "Nullable"
 							})]
 						}),
-						/* @__PURE__ */ g(G, {
+						/* @__PURE__ */ _(fe, {
 							column: e.name,
-							top: W(t)
+							top: de(t)
 						})
 					]
 				}, e.name);
@@ -442,18 +474,18 @@ function K({ data: e }) {
 		})]
 	});
 }
-var q = t(K), J = 8, Y = 13, X = 7, se = 13, ce = 16;
-function Z(e, t, n, r, i, a) {
+var Q = t(Z), $ = 8, pe = 13, me = 7, he = 13, ge = 16;
+function _e(e, t, n, r, i, a) {
 	let o = -(n === p.Left ? 1 : -1), s = [], c = {
 		stroke: i,
 		strokeWidth: a
-	}, l = (n, r) => s.push(/* @__PURE__ */ g("line", {
+	}, l = (n, r) => s.push(/* @__PURE__ */ _("line", {
 		x1: e + o * n,
-		y1: t - J,
+		y1: t - $,
 		x2: e + o * n,
-		y2: t + J,
+		y2: t + $,
 		style: c
-	}, r)), u = (n, r) => s.push(/* @__PURE__ */ g("circle", {
+	}, r)), u = (n, r) => s.push(/* @__PURE__ */ _("circle", {
 		cx: e + o * n,
 		cy: t,
 		r: 4,
@@ -464,33 +496,33 @@ function Z(e, t, n, r, i, a) {
 		}
 	}, r));
 	if (r.cardinality === "*") {
-		let n = e + o * Y;
-		s.push(/* @__PURE__ */ g("line", {
+		let n = e + o * pe;
+		s.push(/* @__PURE__ */ _("line", {
 			x1: n,
 			y1: t,
 			x2: e,
-			y2: t - J,
+			y2: t - $,
 			style: c
-		}, "cf1"), /* @__PURE__ */ g("line", {
+		}, "cf1"), /* @__PURE__ */ _("line", {
 			x1: n,
 			y1: t,
 			x2: e,
 			y2: t,
 			style: c
-		}, "cf2"), /* @__PURE__ */ g("line", {
+		}, "cf2"), /* @__PURE__ */ _("line", {
 			x1: n,
 			y1: t,
 			x2: e,
-			y2: t + J,
+			y2: t + $,
 			style: c
 		}, "cf3")), r.optional === !0 ? u(17, "fr") : l(14, "fb");
-	} else l(X, "b1"), r.optional === !0 ? u(ce, "r") : r.optional === !1 && l(se, "b2");
-	return /* @__PURE__ */ g("g", {
+	} else l(me, "b1"), r.optional === !0 ? u(ge, "r") : r.optional === !1 && l(he, "b2");
+	return /* @__PURE__ */ _("g", {
 		className: "dv-erd-marker",
 		children: s
 	});
 }
-function le({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourcePosition: i, targetPosition: a, data: o, selected: s }) {
+function ve({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourcePosition: i, targetPosition: a, data: o, selected: s }) {
 	let [c] = m({
 		sourceX: e,
 		sourceY: t,
@@ -500,15 +532,15 @@ function le({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourcePosition: i,
 		targetPosition: a,
 		borderRadius: 8
 	}), l = o, u = l?.kind === "non-identifying", d = s || l?.hovered, f = d ? "var(--dv-edge-active)" : "var(--dv-edge)", p = d ? 2 : 1.5;
-	return /* @__PURE__ */ _("g", {
+	return /* @__PURE__ */ v("g", {
 		className: `dv-erd-edge${d ? " dv-erd-edge--active" : ""}`,
 		children: [
-			/* @__PURE__ */ g("path", {
+			/* @__PURE__ */ _("path", {
 				className: "dv-erd-edge__interaction",
 				d: c,
 				fill: "none"
 			}),
-			/* @__PURE__ */ g("path", {
+			/* @__PURE__ */ _("path", {
 				className: "dv-erd-edge__path",
 				d: c,
 				fill: "none",
@@ -518,15 +550,15 @@ function le({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourcePosition: i,
 				},
 				strokeDasharray: u ? "6 4" : void 0
 			}),
-			l && Z(e, t, i, l.sourceEnd, f, p),
-			l && Z(n, r, a, l.targetEnd, f, p)
+			l && _e(e, t, i, l.sourceEnd, f, p),
+			l && _e(n, r, a, l.targetEnd, f, p)
 		]
 	});
 }
-var Q = t(le);
+var ye = t(ve);
 //#endregion
 //#region src/components/useRelationHighlight.ts
-function ue(e, t, r) {
+function be(e, t, r) {
 	let [i, o] = s(null), c = a(() => {
 		let t = /* @__PURE__ */ new Map();
 		for (let n of e) t.set(n.id, n);
@@ -569,7 +601,7 @@ function ue(e, t, r) {
 }
 //#endregion
 //#region src/theme.ts
-var de = {
+var xe = {
 	canvas: "--dv-canvas",
 	background: "--dv-bg",
 	border: "--dv-border",
@@ -584,7 +616,7 @@ var de = {
 	edge: "--dv-edge",
 	edgeActive: "--dv-edge-active",
 	fontFamily: "--dv-font"
-}, fe = {
+}, Se = {
 	canvas: "#fafbfc",
 	background: "#ffffff",
 	border: "#d9dee5",
@@ -598,7 +630,7 @@ var de = {
 	foreignKey: "#2b6cb0",
 	edge: "#94a3b8",
 	edgeActive: "#2b6cb0"
-}, pe = {
+}, Ce = {
 	canvas: "#0f172a",
 	background: "#1e293b",
 	border: "#334155",
@@ -613,48 +645,48 @@ var de = {
 	edge: "#64748b",
 	edgeActive: "#60a5fa"
 };
-function me(e) {
+function we(e) {
 	if (!e) return {};
 	let t = {};
 	for (let n of Object.keys(e)) {
 		let r = e[n];
-		r != null && (t[de[n]] = r);
+		r != null && (t[xe[n]] = r);
 	}
 	return t;
 }
 //#endregion
 //#region src/components/DbmlViewer.tsx
-var he = [], ge = { table: q }, _e = { erd: Q };
-function ve() {
-	return /* @__PURE__ */ _("svg", {
+var Te = [], Ee = { table: Q }, De = { erd: ye };
+function Oe() {
+	return /* @__PURE__ */ v("svg", {
 		viewBox: "0 0 24 24",
 		width: "100%",
 		height: "100%",
 		fill: "currentColor",
 		"aria-hidden": "true",
 		children: [
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ _("rect", {
 				x: "3",
 				y: "3",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ _("rect", {
 				x: "13",
 				y: "3",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ _("rect", {
 				x: "3",
 				y: "13",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ _("rect", {
 				x: "13",
 				y: "13",
 				width: "8",
@@ -664,7 +696,7 @@ function ve() {
 		]
 	});
 }
-function ye(e, t, n, r) {
+function ke(e, t, n, r) {
 	let i = /* @__PURE__ */ new Map();
 	for (let a of e.tables) {
 		let e = t.get(a.id);
@@ -675,19 +707,45 @@ function ye(e, t, n, r) {
 	}
 	return i;
 }
-function be(e, t) {
+function Ae(e, t) {
 	if (e.length !== t.length) return !1;
 	let n = new Set(e);
 	return t.every((e) => n.has(e));
 }
-async function $(e, t, n) {
+function je(e, t, n) {
+	return e.x < t.x + t.w + n && e.x + e.w + n > t.x && e.y < t.y + t.h + n && e.y + e.h + n > t.y;
+}
+function Me(e, t, n, r, i) {
+	let a = (e, t) => ({
+		x: t.x,
+		y: t.y,
+		w: B(e, i),
+		h: N(e)
+	}), o = [];
+	for (let r of e.tables) n(r.id) && o.push(a(r, t.get(r.id)));
+	for (let i of e.tables) {
+		if (n(i.id)) continue;
+		let e = t.get(i.id), s = a(i, e), c = 0;
+		for (; c++ < 1e3;) {
+			let t = o.filter((e) => je(s, e, r));
+			if (t.length === 0) break;
+			let n = Math.max(...t.map((e) => e.y + e.h));
+			e = {
+				x: e.x,
+				y: n + r
+			}, s = a(i, e);
+		}
+		t.set(i.id, e), o.push(s);
+	}
+}
+async function Ne(e, t, n) {
 	try {
-		return await R(e, t);
+		return await q(e, t);
 	} catch (r) {
-		return n(r instanceof L ? r : new L(String(r), { cause: r })), P(e, t);
+		return n(r instanceof K ? r : new K(String(r), { cause: r })), U(e, t);
 	}
 }
-function xe(e, t) {
+function Pe(e, t, n) {
 	return e.tables.map((e) => ({
 		id: e.id,
 		type: "table",
@@ -695,18 +753,21 @@ function xe(e, t) {
 			x: 0,
 			y: 0
 		},
-		data: { table: e }
+		data: {
+			table: e,
+			widthBounds: n
+		}
 	}));
 }
-function Se(e, t) {
+function Fe(e, t) {
 	return e.relations.map((e) => {
 		let n = t.get(e.from.tableId), r = t.get(e.to.tableId), i = (n?.x ?? 0) > (r?.x ?? 0), a = i ? "left" : "right", o = i ? "right" : "left", s = e.from.columns[0] ?? "", c = e.to.columns[0] ?? "";
 		return {
 			id: e.id,
 			source: e.from.tableId,
 			target: e.to.tableId,
-			sourceHandle: U(s, a, "source"),
-			targetHandle: U(c, o, "target"),
+			sourceHandle: X(s, a, "source"),
+			targetHandle: X(c, o, "target"),
 			type: "erd",
 			data: {
 				kind: e.kind,
@@ -722,26 +783,26 @@ function Se(e, t) {
 		};
 	});
 }
-var Ce = e(function({ dbml: e, className: t, style: s, theme: d, fitView: p = !0, showControls: m = !0, showMiniMap: ie = !1, showBackground: h = !0, layoutOptions: v, onParseError: y, onLayoutError: b, nodePositions: x, onNodePositionsChange: C }, w) {
-	let T = a(() => {
+var Ie = e(function({ dbml: e, className: t, style: s, theme: d, fitView: p = !0, showControls: m = !0, showMiniMap: h = !1, showBackground: g = !0, layoutOptions: y, onParseError: b, onLayoutError: x, nodePositions: S, onNodePositionsChange: w }, T) {
+	let E = a(() => {
 		try {
 			return {
 				ok: !0,
-				schema: O(e)
+				schema: ie(e)
 			};
 		} catch (e) {
 			return {
 				ok: !1,
-				error: e instanceof S ? e : new S(String(e), { cause: e })
+				error: e instanceof C ? e : new C(String(e), { cause: e })
 			};
 		}
-	}, [e]), [E, D, k] = re([]), [A, j, M] = ne([]), N = o(null), P = o(null), F = o(E);
-	F.current = E, i(w, () => {
+	}, [e]), [D, O, k] = re([]), [ae, A, j] = ne([]), M = o(null), N = o(null), P = o(D);
+	P.current = D, i(T, () => {
 		let e = async (e) => {
-			let t = N.current, n = P.current?.querySelector(".react-flow__viewport");
-			if (!t || !n) throw new z("The diagram is not ready to export yet.");
-			let r = oe(te(t.getNodes()), n), i = e?.backgroundColor ?? (P.current ? getComputedStyle(P.current).backgroundColor : void 0);
-			return B(n, r, {
+			let t = M.current, n = N.current?.querySelector(".react-flow__viewport");
+			if (!t || !n) throw new Y("The diagram is not ready to export yet.");
+			let r = se(te(t.getNodes()), n), i = e?.backgroundColor ?? (N.current ? getComputedStyle(N.current).backgroundColor : void 0);
+			return ce(n, r, {
 				...e,
 				backgroundColor: i
 			});
@@ -749,60 +810,83 @@ var Ce = e(function({ dbml: e, className: t, style: s, theme: d, fitView: p = !0
 		return {
 			toDataUrl: e,
 			download: async (t, n) => {
-				H(await e(n), t);
-			}
+				ue(await e(n), t);
+			},
+			fitView: (e) => M.current?.fitView(e),
+			zoomIn: (e) => M.current?.zoomIn(e),
+			zoomOut: (e) => M.current?.zoomOut(e),
+			zoomTo: (e, t) => M.current?.zoomTo(e, t),
+			setCenter: (e, t, n) => M.current?.setCenter(e, t, n),
+			fitBounds: (e, t) => M.current?.fitBounds(e, t),
+			setViewport: (e, t) => M.current?.setViewport(e, t),
+			getViewport: () => M.current?.getViewport()
 		};
 	}, []);
-	let I = o(b);
-	I.current = b;
-	let L = o(C);
-	L.current = C;
-	let R = o(x);
-	R.current = x;
-	let ae = n(() => {
-		let e = L.current;
+	let F = o(x);
+	F.current = x;
+	let I = o(w);
+	I.current = w;
+	let L = o(S);
+	L.current = S;
+	let oe = n(() => {
+		let e = I.current;
 		if (!e) return;
 		let t = {};
-		for (let e of F.current) t[e.id] = {
+		for (let e of P.current) t[e.id] = {
 			x: e.position.x,
 			y: e.position.y
 		};
 		e(t);
-	}, []), { algorithm: V = "simple", direction: U = "LR", horizontalGap: W, verticalGap: G } = v ?? {}, K = o(null), q = `${V}|${U}|${W}|${G}`, J = n((e, t, n, r, i) => {
-		let a = ye(e, r, i.saved, i.prior);
-		if (D(xe(e, a)), j(Se(e, a)), K.current = {
+	}, []), { algorithm: R = "simple", direction: z = "LR", horizontalGap: B, verticalGap: V, minNodeWidth: H, maxNodeWidth: U } = y ?? {}, W = o(null), G = `${R}|${z}|${B}|${V}|${H}|${U}`, K = n((e, t, n, r, i) => {
+		let a = {
+			minWidth: H,
+			maxWidth: U
+		}, o = ke(e, r, i.saved, i.prior);
+		if (i.prior) {
+			let t = i.prior, n = i.saved;
+			Me(e, o, (e) => t.has(e) || n?.[e] !== void 0, V ?? 40, a);
+		}
+		if (O(Pe(e, o, a)), A(Fe(e, o)), W.current = {
 			ids: t,
 			optionsKey: n
 		}, i.emit) {
 			let e = {};
-			a.forEach((t, n) => {
+			o.forEach((t, n) => {
 				e[n] = t;
-			}), L.current?.(e);
+			}), I.current?.(e);
 		}
-		i.fit && requestAnimationFrame(() => void N.current?.fitView());
-	}, [D, j]);
+		i.fit && requestAnimationFrame(() => void M.current?.fitView());
+	}, [
+		O,
+		A,
+		V,
+		H,
+		U
+	]);
 	r(() => {
-		if (!T.ok) {
-			D([]), j([]), K.current = null;
+		if (!E.ok) {
+			O([]), A([]), W.current = null;
 			return;
 		}
-		let e = T.schema, t = {
-			algorithm: V,
-			direction: U,
-			horizontalGap: W,
-			verticalGap: G
-		}, n = e.tables.map((e) => e.id), r = new Map(F.current.map((e) => [e.id, {
+		let e = E.schema, t = {
+			algorithm: R,
+			direction: z,
+			horizontalGap: B,
+			verticalGap: V,
+			minNodeWidth: H,
+			maxNodeWidth: U
+		}, n = e.tables.map((e) => e.id), r = new Map(P.current.map((e) => [e.id, {
 			x: e.position.x,
 			y: e.position.y
-		}])), i = K.current, a = n.every((e) => r.has(e));
-		if (i && i.optionsKey === q && a && be(i.ids, n)) {
-			J(e, n, q, /* @__PURE__ */ new Map(), { prior: r });
+		}])), i = W.current, a = n.every((e) => r.has(e));
+		if (i && i.optionsKey === G && a && Ae(i.ids, n)) {
+			K(e, n, G, /* @__PURE__ */ new Map(), { prior: r });
 			return;
 		}
-		let o = i && i.optionsKey === q ? r : void 0, s = !1;
-		return $(e, t, (e) => I.current?.(e)).then((t) => {
-			s || J(e, n, q, t, {
-				saved: R.current,
+		let o = i && i.optionsKey === G ? r : void 0, s = !1;
+		return Ne(e, t, (e) => F.current?.(e)).then((t) => {
+			s || K(e, n, G, t, {
+				saved: L.current,
 				prior: o,
 				fit: p
 			});
@@ -810,65 +894,71 @@ var Ce = e(function({ dbml: e, className: t, style: s, theme: d, fitView: p = !0
 			s = !0;
 		};
 	}, [
-		T,
+		E,
+		R,
+		z,
+		B,
 		V,
+		H,
 		U,
-		W,
 		G,
-		q,
 		p,
-		J,
-		D,
-		j
+		K,
+		O,
+		A
 	]);
-	let Y = n(() => {
-		if (!T.ok) return;
-		let e = T.schema, t = {
-			algorithm: V,
-			direction: U,
-			horizontalGap: W,
-			verticalGap: G
+	let q = n(() => {
+		if (!E.ok) return;
+		let e = E.schema, t = {
+			algorithm: R,
+			direction: z,
+			horizontalGap: B,
+			verticalGap: V,
+			minNodeWidth: H,
+			maxNodeWidth: U
 		}, n = e.tables.map((e) => e.id);
-		$(e, t, (e) => I.current?.(e)).then((t) => {
-			J(e, n, q, t, {
+		Ne(e, t, (e) => F.current?.(e)).then((t) => {
+			K(e, n, G, t, {
 				emit: !0,
 				fit: !0
 			});
 		});
 	}, [
-		T,
+		E,
+		R,
+		z,
+		B,
 		V,
+		H,
 		U,
-		W,
 		G,
-		q,
-		J
-	]), X = n(() => {
-		T.ok || y?.(T.error);
-	}, [T, y]);
-	r(X, [X]);
-	let { displayNodes: se, displayEdges: ce, onEdgeMouseEnter: Z, onEdgeMouseLeave: le } = ue(T.ok ? T.schema.relations : he, E, A), Q = {
+		K
+	]), J = n(() => {
+		E.ok || b?.(E.error);
+	}, [E, b]);
+	r(J, [J]);
+	let { displayNodes: le, displayEdges: X, onEdgeMouseEnter: de, onEdgeMouseLeave: fe } = be(E.ok ? E.schema.relations : Te, D, ae), Z = {
 		width: "100%",
 		height: "100%",
-		...me(d),
+		...we(d),
 		...s
 	};
-	return T.ok ? /* @__PURE__ */ g("div", {
-		ref: P,
+	return E.ok ? /* @__PURE__ */ _("div", {
+		ref: N,
 		className: `dv-viewer${t ? ` ${t}` : ""}`,
-		style: Q,
-		children: /* @__PURE__ */ _(ee, {
-			nodes: se,
-			edges: ce,
-			nodeTypes: ge,
-			edgeTypes: _e,
+		style: Z,
+		children: /* @__PURE__ */ v(ee, {
+			nodes: le,
+			edges: X,
+			nodeTypes: Ee,
+			edgeTypes: De,
 			onNodesChange: k,
-			onEdgesChange: M,
-			onEdgeMouseEnter: Z,
-			onEdgeMouseLeave: le,
-			onNodeDragStop: ae,
+			onEdgesChange: j,
+			onEdgeMouseEnter: de,
+			onEdgeMouseLeave: fe,
+			onNodeDragStop: oe,
 			onInit: (e) => {
-				N.current = e;
+				M.current = e;
 			},
 			fitView: p,
 			nodesConnectable: !1,
@@ -876,27 +966,27 @@ var Ce = e(function({ dbml: e, className: t, style: s, theme: d, fitView: p = !0
 			minZoom: .1,
 			proOptions: { hideAttribution: !0 },
 			children: [
-				h && /* @__PURE__ */ g(c, {}),
-				m && /* @__PURE__ */ g(u, { children: /* @__PURE__ */ g(l, {
-					onClick: Y,
+				g && /* @__PURE__ */ _(c, {}),
+				m && /* @__PURE__ */ _(u, { children: /* @__PURE__ */ _(l, {
+					onClick: q,
 					title: "Auto layout",
 					"aria-label": "Auto layout",
-					children: /* @__PURE__ */ g(ve, {})
+					children: /* @__PURE__ */ _(Oe, {})
 				}) }),
-				ie && /* @__PURE__ */ g(f, {
+				h && /* @__PURE__ */ _(f, {
 					pannable: !0,
 					zoomable: !0
 				})
 			]
 		})
-	}) : /* @__PURE__ */ g("div", {
+	}) : /* @__PURE__ */ _("div", {
 		className: `dv-error${t ? ` ${t}` : ""}`,
-		style: Q,
-		children: /* @__PURE__ */ g("pre", {
+		style: Z,
+		children: /* @__PURE__ */ _("pre", {
 			className: "dv-error__message",
-			children: T.error.message
+			children: E.error.message
 		})
 	});
 });
 //#endregion
-export { S as DbmlParseError, Ce as DbmlViewer, Q as ErdEdge, z as ExportError, A as HEADER_HEIGHT, L as LayoutError, k as NODE_WIDTH, j as ROW_HEIGHT, q as TableNode, R as computeLayout, pe as darkTheme, H as downloadDataUrl, P as layoutSchema, fe as lightTheme, O as parseDbml, B as renderDiagram, M as tableHeight, me as themeToCssVars };
+export { C as DbmlParseError, Ie as DbmlViewer, ye as ErdEdge, Y as ExportError, j as HEADER_HEIGHT, K as LayoutError, ae as MAX_NODE_WIDTH, k as MIN_NODE_WIDTH, A as NODE_WIDTH, M as ROW_HEIGHT, Q as TableNode, q as computeLayout, Ce as darkTheme, ue as downloadDataUrl, U as layoutSchema, Se as lightTheme, ie as parseDbml, ce as renderDiagram, N as tableHeight, B as tableWidth, we as themeToCssVars };