dbml-erd-viewer 0.1.0 → 0.1.2

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 { createContext as e, forwardRef as t, memo as n, useCallback as r, useContext as i, useEffect as a, useImperativeHandle as o, useMemo as s, useRef as c, useState as l } from "react";
+import { Background as u, ControlButton as d, Controls as f, Handle as p, MiniMap as m, Position as h, ReactFlow as ee, getBezierPath as te, getNodesBounds as ne, getSmoothStepPath as re, useEdgesState as ie, useInternalNode as g, useNodesState as ae } from "@xyflow/react";
+import * as _ from "@dbml/core";
+import { Fragment as v, jsx as y, jsxs as b } 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 x = _, S = x.Parser ?? x.default?.Parser;
+if (!S) throw Error("Could not resolve `Parser` export from @dbml/core.");
+var oe = S, C = "public", w = class extends Error {
 	diagnostics;
 	constructor(e, t) {
 		super(e, t), this.name = "DbmlParseError", this.diagnostics = t?.diagnostics ?? [];
 	}
 };
-function C(e) {
+function T(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 E(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 D(e) {
 	if (e) return typeof e == "string" ? e : e.value ?? void 0;
 }
-function E(e, t) {
-	return e && e !== x ? `${e}.${t}` : t;
+function O(e, t) {
+	return e && e !== C ? `${e}.${t}` : t;
 }
-function D(e) {
+function k(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 A(e) {
 	let t;
 	try {
-		t = new b().parse(e, "dbmlv2");
+		t = new oe().parse(e, "dbmlv2");
 	} catch (e) {
-		let t = C(e);
-		throw new S(w(t, e instanceof Error ? e.message : String(e)), {
+		let t = T(e);
+		throw new w(E(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 = O(e.name, t.name), i = k(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: D(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: O(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 = O(t, n.name), r = k(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: D(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 === C ? void 0 : t,
+				note: D(n.note),
 				headerColor: n.headerColor ?? void 0,
 				columns: i
 			});
@@ -126,75 +126,112 @@ function O(e) {
 }
 //#endregion
 //#region src/layout/layout.ts
-var k = 240, A = 40, j = 28;
-function M(e) {
+var se = 160, j = 320, M = 320, N = 40, P = 28;
+function F(e) {
 	return 40 + Math.max(e.columns.length, 1) * 28;
 }
-function N(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));
-	for (let r = 0; r < e.tables.length; r++) {
+var I = 24, ce = 8, L = 24, R = 12, z = 24, B = 6.8, V = 7.4;
+function H(e, t = {}) {
+	let n = t.minWidth ?? 160, r = t.maxWidth ?? 320, i = z + U(e) * V;
+	for (let t of e.columns) {
+		let e = (t.pk || t.isForeignKey ? L : 0) + t.name.length * B, n = t.type.length * B + R;
+		i = Math.max(i, I + e + ce + n);
+	}
+	return Math.round(Math.min(r, Math.max(n, i)));
+}
+function U(e) {
+	return (e.schema ? e.schema.length + 1 : 0) + e.name.length;
+}
+function W(e, t) {
+	let n = /* @__PURE__ */ new Map();
+	for (let t of e) n.set(t.id, 0);
+	let r = t.map((e) => [e.from.tableId, e.to.tableId]).filter(([e, t]) => e !== t && n.has(e) && n.has(t));
+	for (let t = 0; t < e.length; t++) {
 		let e = !1;
-		for (let [r, i] of n) {
-			let n = t.get(r) + 1;
-			t.get(i) < n && (t.set(i, n), e = !0);
+		for (let [t, i] of r) {
+			let r = n.get(t) + 1;
+			n.get(i) < r && (n.set(i, r), e = !0);
 		}
 		if (!e) break;
 	}
-	return t;
+	return n;
 }
-function P(e, t = {}) {
-	let n = t.horizontalGap ?? 120, r = t.verticalGap ?? 40, i = N(e), a = /* @__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);
+function G(e, t = {}) {
+	let n = t.horizontalGap ?? 120, r = t.verticalGap ?? 40, i = {
+		minWidth: t.minNodeWidth,
+		maxWidth: t.maxNodeWidth
+	}, a = /* @__PURE__ */ new Set();
+	for (let t of e.relations) a.add(t.from.tableId), a.add(t.to.tableId);
+	let o = e.tables.filter((e) => a.has(e.id)), s = e.tables.filter((e) => !a.has(e.id)), c = /* @__PURE__ */ new Map(), l = W(o, e.relations), u = /* @__PURE__ */ new Map();
+	for (let e of o) {
+		let t = l.get(e.id) ?? 0, n = u.get(t);
+		n || (n = [], u.set(t, n)), n.push(e);
+	}
+	let d = 0, f = 0, p = 0;
+	for (let e of [...u.keys()].sort((e, t) => e - t)) {
+		let t = u.get(e).sort((e, t) => e.name.localeCompare(t.name)), a = 0, o = 0;
+		for (let e of t) {
+			let t = H(e, i), n = F(e);
+			c.set(e.id, {
+				x: p,
+				y: o,
+				width: t,
+				height: n
+			}), a = Math.max(a, t), o += n + r;
+		}
+		d = Math.max(d, p + a), f = Math.max(f, o - r), p += a + n;
 	}
-	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,
-				y: c,
-				width: 240,
-				height: t
-			}), c += t + r;
+	if (s.length > 0) {
+		let e = d > 0 ? d : Math.ceil(Math.sqrt(s.length)) * (320 + n), t = 0, a = f > 0 ? f + r * 2 : 0, o = 0;
+		for (let l of [...s].sort((e, t) => e.name.localeCompare(t.name))) {
+			let s = H(l, i), u = F(l);
+			t > 0 && t + s > e && (t = 0, a += o + r, o = 0), c.set(l.id, {
+				x: t,
+				y: a,
+				width: s,
+				height: u
+			}), t += s + n, o = Math.max(o, u);
 		}
-	}), o;
+	}
+	return c;
 }
 //#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 le(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: H(t, a),
+		height: F(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 K(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 +241,42 @@ async function I(e, t = {}) {
 		},
 		children: e.tables.map((e) => ({
 			id: e.id,
-			width: 240,
-			height: M(e)
+			width: H(e, a),
+			height: F(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 q = class extends Error {
 	constructor(e, t) {
 		super(e, t), this.name = "LayoutError";
 	}
 };
-async function R(e, t = {}) {
+async function J(e, t = {}) {
 	let n = t.algorithm ?? "simple";
-	if (n === "simple") return P(e, t);
+	if (n === "simple") return G(e, t);
 	try {
-		return n === "dagre" ? await F(e, t) : await I(e, t);
+		return n === "dagre" ? await le(e, t) : await K(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 q(`"${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 ue = [
 	"--dv-canvas",
 	"--dv-bg",
 	"--dv-border",
@@ -255,12 +292,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 de(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 +315,12 @@ function oe(e, t) {
 		height: a - r
 	};
 }
-async function B(e, t, n = {}) {
+async function fe(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 +334,23 @@ async function B(e, t, n = {}) {
 			height: `${l}px`,
 			transform: u
 		}
-	}, f = V(e, t, i);
+	}, f = pe(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 pe(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 ue) {
 			let i = t.getPropertyValue(n);
 			if (!i) continue;
 			let a = e.style.getPropertyValue(n);
@@ -331,218 +368,317 @@ function V(e, t, n) {
 	}
 	return () => r.forEach((e) => e());
 }
-function H(e, t) {
+function me(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) {
+//#region src/components/columnHoverContext.ts
+var he = e(void 0), ge = e("column");
+function Z(e) {
 	return 40 + e * 28 + 28 / 2;
 }
-function G({ column: e, top: t }) {
+var _e = 4;
+function ve({ column: e, top: t }) {
 	let n = {
-		top: t,
+		top: t - _e,
+		opacity: 0
+	}, r = {
+		top: t + _e,
 		opacity: 0
 	};
-	return /* @__PURE__ */ _(h, { children: [
-		/* @__PURE__ */ g(d, {
-			id: U(e, "left", "target"),
+	return /* @__PURE__ */ b(v, { children: [
+		/* @__PURE__ */ y(p, {
+			id: X(e, "left", "target"),
 			type: "target",
-			position: p.Left,
-			style: n,
+			position: h.Left,
+			style: r,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ g(d, {
-			id: U(e, "left", "source"),
+		/* @__PURE__ */ y(p, {
+			id: X(e, "left", "source"),
 			type: "source",
-			position: p.Left,
+			position: h.Left,
 			style: n,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ g(d, {
-			id: U(e, "right", "target"),
+		/* @__PURE__ */ y(p, {
+			id: X(e, "right", "target"),
 			type: "target",
-			position: p.Right,
-			style: n,
+			position: h.Right,
+			style: r,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ g(d, {
-			id: U(e, "right", "source"),
+		/* @__PURE__ */ y(p, {
+			id: X(e, "right", "source"),
 			type: "source",
-			position: p.Right,
+			position: h.Right,
 			style: n,
 			isConnectable: !1
 		})
 	] });
 }
-function K({ data: e }) {
-	let { table: t, highlightedColumns: n } = e;
-	return /* @__PURE__ */ _("div", {
+function ye({ data: e }) {
+	let { table: t, highlightedColumns: n, widthBounds: r, connectedColumns: a } = e, o = i(he), s = i(ge) === "floating";
+	return /* @__PURE__ */ b("div", {
 		className: "dv-table",
-		style: { width: 240 },
-		children: [/* @__PURE__ */ _("div", {
-			className: "dv-table__header",
-			style: t.headerColor ? {
-				background: t.headerColor,
-				height: 40
-			} : { height: 40 },
-			title: t.note,
-			children: [t.schema && /* @__PURE__ */ _("span", {
-				className: "dv-table__schema",
-				children: [t.schema, "."]
-			}), /* @__PURE__ */ g("span", {
-				className: "dv-table__name",
-				children: t.name
-			})]
-		}), /* @__PURE__ */ g("div", {
-			className: "dv-table__body",
-			children: t.columns.map((e, t) => {
-				let r = n?.has(e.name);
-				return /* @__PURE__ */ _("div", {
-					className: `dv-row${r ? " dv-row--highlighted" : ""}`,
-					style: { height: 28 },
-					title: e.note,
-					children: [
-						/* @__PURE__ */ _("span", {
-							className: `dv-row__name${e.pk ? " dv-row__name--pk" : ""}`,
-							children: [
-								e.pk && /* @__PURE__ */ g("span", {
-									className: "dv-badge dv-badge--pk",
-									title: "Primary key",
-									children: "PK"
-								}),
-								e.isForeignKey && !e.pk && /* @__PURE__ */ g("span", {
-									className: "dv-badge dv-badge--fk",
-									title: "Foreign key",
-									children: "FK"
-								}),
-								e.name
-							]
-						}),
-						/* @__PURE__ */ _("span", {
-							className: "dv-row__type",
-							children: [e.type, /* @__PURE__ */ g("span", {
-								className: `dv-row__null${e.notNull ? " dv-row__null--notnull" : ""}`,
-								title: e.notNull ? "Not null" : "Nullable"
-							})]
-						}),
-						/* @__PURE__ */ g(G, {
-							column: e.name,
-							top: W(t)
-						})
-					]
-				}, e.name);
+		style: { width: H(t, r) },
+		children: [
+			s && /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(p, {
+				type: "source",
+				position: h.Right,
+				style: { opacity: 0 },
+				isConnectable: !1
+			}), /* @__PURE__ */ y(p, {
+				type: "target",
+				position: h.Left,
+				style: { opacity: 0 },
+				isConnectable: !1
+			})] }),
+			/* @__PURE__ */ b("div", {
+				className: "dv-table__header",
+				style: t.headerColor ? {
+					background: t.headerColor,
+					height: 40
+				} : { height: 40 },
+				title: t.note,
+				children: [t.schema && /* @__PURE__ */ b("span", {
+					className: "dv-table__schema",
+					children: [t.schema, "."]
+				}), /* @__PURE__ */ y("span", {
+					className: "dv-table__name",
+					title: t.name,
+					children: t.name
+				})]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "dv-table__body",
+				children: t.columns.map((e, r) => {
+					let i = n?.has(e.name);
+					return /* @__PURE__ */ b("div", {
+						className: `dv-row${i ? " dv-row--highlighted" : ""}`,
+						style: { height: 28 },
+						title: e.note,
+						onMouseEnter: () => o?.(t.id, e.name),
+						onMouseLeave: () => o?.(t.id, null),
+						children: [
+							/* @__PURE__ */ b("span", {
+								className: `dv-row__name${e.pk ? " dv-row__name--pk" : ""}`,
+								children: [
+									e.pk && /* @__PURE__ */ y("span", {
+										className: "dv-badge dv-badge--pk",
+										title: "Primary key",
+										children: "PK"
+									}),
+									e.isForeignKey && !e.pk && /* @__PURE__ */ y("span", {
+										className: "dv-badge dv-badge--fk",
+										title: "Foreign key",
+										children: "FK"
+									}),
+									/* @__PURE__ */ y("span", {
+										className: "dv-row__label",
+										title: e.name,
+										children: e.name
+									})
+								]
+							}),
+							/* @__PURE__ */ b("span", {
+								className: "dv-row__type",
+								children: [/* @__PURE__ */ y("span", {
+									className: "dv-row__typename",
+									title: e.type,
+									children: e.type
+								}), /* @__PURE__ */ y("span", {
+									className: `dv-row__null${e.notNull ? " dv-row__null--notnull" : ""}`,
+									title: e.notNull ? "Not null" : "Nullable"
+								})]
+							}),
+							!s && a?.has(e.name) && /* @__PURE__ */ y(ve, {
+								column: e.name,
+								top: Z(r)
+							})
+						]
+					}, e.name);
+				})
 			})
-		})]
+		]
 	});
 }
-var q = t(K), J = 8, Y = 13, X = 7, se = 13, ce = 16;
-function Z(e, t, n, r, i, a) {
-	let o = -(n === p.Left ? 1 : -1), s = [], c = {
+var be = n(ye), xe = 8, Q = 13, Se = 7, Ce = 13, we = 16, Te = {
+	[h.Right]: 0,
+	[h.Left]: 180,
+	[h.Top]: -90,
+	[h.Bottom]: 90
+};
+function Ee(e, t, n, r, i, a) {
+	let o = [], s = {
 		stroke: i,
 		strokeWidth: a
-	}, l = (n, r) => s.push(/* @__PURE__ */ g("line", {
-		x1: e + o * n,
-		y1: t - J,
-		x2: e + o * n,
-		y2: t + J,
-		style: c
-	}, r)), u = (n, r) => s.push(/* @__PURE__ */ g("circle", {
-		cx: e + o * n,
-		cy: t,
+	}, c = (e, t) => o.push(/* @__PURE__ */ y("line", {
+		x1: e,
+		y1: -8,
+		x2: e,
+		y2: xe,
+		style: s
+	}, t)), l = (e, t) => o.push(/* @__PURE__ */ y("circle", {
+		cx: e,
+		cy: 0,
 		r: 4,
 		style: {
 			stroke: i,
 			strokeWidth: a,
 			fill: "var(--dv-bg)"
 		}
-	}, r));
-	if (r.cardinality === "*") {
-		let n = e + o * Y;
-		s.push(/* @__PURE__ */ g("line", {
-			x1: n,
-			y1: t,
-			x2: e,
-			y2: t - J,
-			style: c
-		}, "cf1"), /* @__PURE__ */ g("line", {
-			x1: n,
-			y1: t,
-			x2: e,
-			y2: t,
-			style: c
-		}, "cf2"), /* @__PURE__ */ g("line", {
-			x1: n,
-			y1: t,
-			x2: e,
-			y2: t + J,
-			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", {
+	}, t));
+	return r.cardinality === "*" ? (o.push(/* @__PURE__ */ y("line", {
+		x1: Q,
+		y1: 0,
+		x2: 0,
+		y2: -8,
+		style: s
+	}, "cf1"), /* @__PURE__ */ y("line", {
+		x1: Q,
+		y1: 0,
+		x2: 0,
+		y2: 0,
+		style: s
+	}, "cf2"), /* @__PURE__ */ y("line", {
+		x1: Q,
+		y1: 0,
+		x2: 0,
+		y2: xe,
+		style: s
+	}, "cf3")), r.optional === !0 ? l(17, "fr") : c(14, "fb")) : (c(Se, "b1"), r.optional === !0 ? l(we, "r") : r.optional === !1 && c(Ce, "b2")), /* @__PURE__ */ y("g", {
 		className: "dv-erd-marker",
-		children: s
+		transform: `translate(${e}, ${t}) rotate(${Te[n]})`,
+		children: o
 	});
 }
-function le({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourcePosition: i, targetPosition: a, data: o, selected: s }) {
-	let [c] = m({
-		sourceX: e,
-		sourceY: t,
-		sourcePosition: i,
-		targetX: n,
-		targetY: r,
-		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", {
-		className: `dv-erd-edge${d ? " dv-erd-edge--active" : ""}`,
+function De(e, t, n, r, i, a, o, s, c) {
+	let l = t?.kind === "non-identifying", u = n ? "var(--dv-edge-active)" : "var(--dv-edge)", d = n ? 2 : 1.5;
+	return /* @__PURE__ */ b("g", {
+		className: `dv-erd-edge${n ? " dv-erd-edge--active" : ""}`,
 		children: [
-			/* @__PURE__ */ g("path", {
+			/* @__PURE__ */ y("path", {
 				className: "dv-erd-edge__interaction",
-				d: c,
+				d: e,
 				fill: "none"
 			}),
-			/* @__PURE__ */ g("path", {
+			/* @__PURE__ */ y("path", {
 				className: "dv-erd-edge__path",
-				d: c,
+				d: e,
 				fill: "none",
 				style: {
-					stroke: f,
-					strokeWidth: p
+					stroke: u,
+					strokeWidth: d
 				},
-				strokeDasharray: u ? "6 4" : void 0
+				strokeDasharray: l ? "6 4" : void 0
 			}),
-			l && Z(e, t, i, l.sourceEnd, f, p),
-			l && Z(n, r, a, l.targetEnd, f, p)
+			t && Ee(r, i, a, t.sourceEnd, u, d),
+			t && Ee(o, s, c, t.targetEnd, u, d)
 		]
 	});
 }
-var Q = t(le);
+function Oe({ sourceX: e, sourceY: t, targetX: n, targetY: r, sourcePosition: i, targetPosition: a, data: o, selected: s }) {
+	let [c] = re({
+		sourceX: e,
+		sourceY: t,
+		sourcePosition: i,
+		targetX: n,
+		targetY: r,
+		targetPosition: a,
+		borderRadius: 8
+	}), l = o;
+	return De(c, l, !!(s || l?.hovered), e, t, i, n, r, a);
+}
+var ke = n(Oe);
+function $(e) {
+	let t = e.measured?.width ?? 0, n = e.measured?.height ?? 0, { x: r, y: i } = e.internals.positionAbsolute;
+	return {
+		x: r,
+		y: i,
+		w: t,
+		h: n,
+		cx: r + t / 2,
+		cy: i + n / 2
+	};
+}
+function Ae(e, t) {
+	let n = $(e), r = $(t), i = n.w / 2, a = n.h / 2, o = (r.cx - n.cx) / (2 * i) - (r.cy - n.cy) / (2 * a), s = (r.cx - n.cx) / (2 * i) + (r.cy - n.cy) / (2 * a), c = 1 / (Math.abs(o) + Math.abs(s) || 1);
+	return {
+		x: i * c * (o + s) + n.cx,
+		y: a * c * (-o + s) + n.cy
+	};
+}
+function je(e, t) {
+	let n = $(e), r = Math.round(t.x), i = Math.round(t.y);
+	return r <= Math.round(n.x) + 1 ? h.Left : r >= Math.round(n.x + n.w) - 1 ? h.Right : i <= Math.round(n.y) + 1 ? h.Top : h.Bottom;
+}
+var Me = 14;
+function Ne({ id: e, source: t, target: n, data: r, selected: i }) {
+	let a = g(t), o = g(n);
+	if (!a || !o) return null;
+	let s = r, c = !!(i || s?.hovered), l, u, d, f, p, m;
+	if (t === n) {
+		let e = $(a);
+		l = d = e.x + e.w, u = e.cy - Me, f = e.cy + Me, p = m = h.Right;
+	} else {
+		let e = Ae(a, o), t = Ae(o, a);
+		l = e.x, u = e.y, d = t.x, f = t.y, p = je(a, e), m = je(o, t);
+	}
+	let [ee] = te({
+		sourceX: l,
+		sourceY: u,
+		sourcePosition: p,
+		targetX: d,
+		targetY: f,
+		targetPosition: m
+	});
+	return De(ee, s, c, l, u, p, d, f, m);
+}
+var Pe = n(Ne);
 //#endregion
 //#region src/components/useRelationHighlight.ts
-function ue(e, t, r) {
-	let [i, o] = s(null), c = a(() => {
+function Fe(e, t, n) {
+	let [i, a] = l(null), [o, c] = l(null), u = s(() => {
 		let t = /* @__PURE__ */ new Map();
 		for (let n of e) t.set(n.id, n);
 		return t;
-	}, [e]), l = a(() => {
-		let e = /* @__PURE__ */ new Map(), t = i ? c.get(i) : void 0;
-		if (!t) return e;
-		for (let n of [t.from, t.to]) {
-			let t = e.get(n.tableId) ?? /* @__PURE__ */ new Set();
-			n.columns.forEach((e) => t.add(e)), e.set(n.tableId, t);
+	}, [e]), d = s(() => {
+		let t = /* @__PURE__ */ new Set();
+		if (i && t.add(i), o) for (let n of e) {
+			let e = (e) => e.tableId === o.tableId && e.columns.includes(o.column);
+			(e(n.from) || e(n.to)) && t.add(n.id);
+		}
+		return t;
+	}, [
+		i,
+		o,
+		e
+	]), f = s(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of d) {
+			let n = u.get(t);
+			if (n) for (let t of [n.from, n.to]) {
+				let n = e.get(t.tableId) ?? /* @__PURE__ */ new Set();
+				t.columns.forEach((e) => n.add(e)), e.set(t.tableId, n);
+			}
 		}
 		return e;
-	}, [i, c]);
+	}, [d, u]), p = r((e, t) => {
+		c(t ? {
+			tableId: e,
+			column: t
+		} : null);
+	}, []);
 	return {
-		displayNodes: a(() => i ? t.map((e) => {
-			let t = l.get(e.id);
+		displayNodes: s(() => d.size === 0 ? t : t.map((e) => {
+			let t = f.get(e.id);
 			return t ? {
 				...e,
 				data: {
@@ -550,26 +686,27 @@ function ue(e, t, r) {
 					highlightedColumns: t
 				}
 			} : e;
-		}) : t, [
+		}), [
 			t,
-			i,
-			l
+			d,
+			f
 		]),
-		displayEdges: a(() => i ? r.map((e) => e.id === i ? {
+		displayEdges: s(() => d.size === 0 ? n : n.map((e) => d.has(e.id) ? {
 			...e,
 			data: {
 				...e.data,
 				hovered: !0
 			},
 			zIndex: 1
-		} : e) : r, [r, i]),
-		onEdgeMouseEnter: n((e, t) => o(t.id), []),
-		onEdgeMouseLeave: n(() => o(null), [])
+		} : e), [n, d]),
+		onEdgeMouseEnter: r((e, t) => a(t.id), []),
+		onEdgeMouseLeave: r(() => a(null), []),
+		onColumnHover: p
 	};
 }
 //#endregion
 //#region src/theme.ts
-var de = {
+var Ie = {
 	canvas: "--dv-canvas",
 	background: "--dv-bg",
 	border: "--dv-border",
@@ -584,7 +721,7 @@ var de = {
 	edge: "--dv-edge",
 	edgeActive: "--dv-edge-active",
 	fontFamily: "--dv-font"
-}, fe = {
+}, Le = {
 	canvas: "#fafbfc",
 	background: "#ffffff",
 	border: "#d9dee5",
@@ -598,7 +735,7 @@ var de = {
 	foreignKey: "#2b6cb0",
 	edge: "#94a3b8",
 	edgeActive: "#2b6cb0"
-}, pe = {
+}, Re = {
 	canvas: "#0f172a",
 	background: "#1e293b",
 	border: "#334155",
@@ -613,48 +750,51 @@ var de = {
 	edge: "#64748b",
 	edgeActive: "#60a5fa"
 };
-function me(e) {
+function ze(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[Ie[n]] = r);
 	}
 	return t;
 }
 //#endregion
 //#region src/components/DbmlViewer.tsx
-var he = [], ge = { table: q }, _e = { erd: Q };
-function ve() {
-	return /* @__PURE__ */ _("svg", {
+var Be = [], Ve = { table: be }, He = {
+	erd: ke,
+	"erd-floating": Pe
+};
+function Ue() {
+	return /* @__PURE__ */ b("svg", {
 		viewBox: "0 0 24 24",
 		width: "100%",
 		height: "100%",
 		fill: "currentColor",
 		"aria-hidden": "true",
 		children: [
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "3",
 				y: "3",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "13",
 				y: "3",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "3",
 				y: "13",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ g("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "13",
 				y: "13",
 				width: "8",
@@ -664,7 +804,7 @@ function ve() {
 		]
 	});
 }
-function ye(e, t, n, r) {
+function We(e, t, n, r) {
 	let i = /* @__PURE__ */ new Map();
 	for (let a of e.tables) {
 		let e = t.get(a.id);
@@ -675,19 +815,54 @@ function ye(e, t, n, r) {
 	}
 	return i;
 }
-function be(e, t) {
+function Ge(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 Ke(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 qe(e, t, n, r, i) {
+	let a = (e, t) => ({
+		x: t.x,
+		y: t.y,
+		w: H(e, i),
+		h: F(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) => Ke(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 Je(e, t, n) {
 	try {
-		return await R(e, t);
+		return await J(e, t);
 	} catch (r) {
-		return n(r instanceof L ? r : new L(String(r), { cause: r })), P(e, t);
+		return n(r instanceof q ? r : new q(String(r), { cause: r })), G(e, t);
 	}
 }
-function xe(e, t) {
+function Ye(e) {
+	let t = /* @__PURE__ */ new Map(), n = (e, n) => {
+		if (!n) return;
+		let r = t.get(e);
+		r || (r = /* @__PURE__ */ new Set(), t.set(e, r)), r.add(n);
+	};
+	for (let t of e.relations) t.from.columns.forEach((e) => n(t.from.tableId, e)), t.to.columns.forEach((e) => n(t.to.tableId, e));
+	return t;
+}
+function Xe(e, t, n, r) {
 	return e.tables.map((e) => ({
 		id: e.id,
 		type: "table",
@@ -695,19 +870,33 @@ function xe(e, t) {
 			x: 0,
 			y: 0
 		},
-		data: { table: e }
+		data: {
+			table: e,
+			widthBounds: n,
+			connectedColumns: r.get(e.id)
+		}
 	}));
 }
-function Se(e, t) {
+function Ze(e, t) {
+	let n = e.from.tableId === e.to.tableId, r = n ? !1 : (t.get(e.from.tableId)?.x ?? 0) > (t.get(e.to.tableId)?.x ?? 0), i = r ? "left" : "right", a = n || r ? "right" : "left";
+	return {
+		sourceHandle: X(e.from.columns[0] ?? "", i, "source"),
+		targetHandle: X(e.to.columns[0] ?? "", a, "target")
+	};
+}
+function Qe(e, t, n) {
+	let r = n === "floating";
 	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] ?? "";
+		let n = r ? {
+			sourceHandle: void 0,
+			targetHandle: void 0
+		} : Ze(e, t);
 		return {
 			id: e.id,
 			source: e.from.tableId,
 			target: e.to.tableId,
-			sourceHandle: U(s, a, "source"),
-			targetHandle: U(c, o, "target"),
-			type: "erd",
+			...n,
+			type: r ? "erd-floating" : "erd",
 			data: {
 				kind: e.kind,
 				sourceEnd: {
@@ -722,26 +911,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 $e = t(function({ dbml: e, className: t, style: n, theme: i, fitView: l = !0, showControls: p = !0, showMiniMap: h = !1, showBackground: te = !0, layoutOptions: re, edgeConnection: g = "column", onParseError: _, onLayoutError: v, nodePositions: x, onNodePositionsChange: S }, oe) {
+	let C = s(() => {
 		try {
 			return {
 				ok: !0,
-				schema: O(e)
+				schema: A(e)
 			};
 		} catch (e) {
 			return {
 				ok: !1,
-				error: e instanceof S ? e : new S(String(e), { cause: e })
+				error: e instanceof w ? e : new w(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]), [T, E, D] = ae([]), [O, k, se] = ie([]), j = c(null), M = c(null), N = c(T);
+	N.current = T, o(oe, () => {
 		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 = j.current, n = M.current?.querySelector(".react-flow__viewport");
+			if (!t || !n) throw new Y("The diagram is not ready to export yet.");
+			let r = de(ne(t.getNodes()), n), i = e?.backgroundColor ?? (M.current ? getComputedStyle(M.current).backgroundColor : void 0);
+			return fe(n, r, {
 				...e,
 				backgroundColor: i
 			});
@@ -749,154 +938,190 @@ 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);
-			}
+				me(await e(n), t);
+			},
+			fitView: (e) => j.current?.fitView(e),
+			zoomIn: (e) => j.current?.zoomIn(e),
+			zoomOut: (e) => j.current?.zoomOut(e),
+			zoomTo: (e, t) => j.current?.zoomTo(e, t),
+			setCenter: (e, t, n) => j.current?.setCenter(e, t, n),
+			fitBounds: (e, t) => j.current?.fitBounds(e, t),
+			setViewport: (e, t) => j.current?.setViewport(e, t),
+			getViewport: () => j.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 P = c(v);
+	P.current = v;
+	let F = c(S);
+	F.current = S;
+	let I = c(x);
+	I.current = x;
+	let ce = r(() => {
+		let e = F.current;
 		if (!e) return;
 		let t = {};
-		for (let e of F.current) t[e.id] = {
+		for (let e of N.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: L = "simple", direction: R = "LR", horizontalGap: z, verticalGap: B, minNodeWidth: V, maxNodeWidth: H } = re ?? {}, U = c(null), W = `${L}|${R}|${z}|${B}|${V}|${H}`, G = r((e, t, n, r, i) => {
+		let a = {
+			minWidth: V,
+			maxWidth: H
+		}, o = We(e, r, i.saved, i.prior);
+		if (i.prior) {
+			let t = i.prior, n = i.saved;
+			qe(e, o, (e) => t.has(e) || n?.[e] !== void 0, B ?? 40, a);
+		}
+		if (E(Xe(e, o, a, Ye(e))), k(Qe(e, o, g)), U.current = {
 			ids: t,
 			optionsKey: n
 		}, i.emit) {
 			let e = {};
-			a.forEach((t, n) => {
+			o.forEach((t, n) => {
 				e[n] = t;
-			}), L.current?.(e);
+			}), F.current?.(e);
 		}
-		i.fit && requestAnimationFrame(() => void N.current?.fitView());
-	}, [D, j]);
-	r(() => {
-		if (!T.ok) {
-			D([]), j([]), K.current = null;
+		i.fit && requestAnimationFrame(() => void j.current?.fitView());
+	}, [
+		E,
+		k,
+		B,
+		V,
+		H,
+		g
+	]);
+	a(() => {
+		if (!C.ok) {
+			E([]), k([]), U.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 = C.schema, t = {
+			algorithm: L,
+			direction: R,
+			horizontalGap: z,
+			verticalGap: B,
+			minNodeWidth: V,
+			maxNodeWidth: H
+		}, n = e.tables.map((e) => e.id), r = new Map(N.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 = U.current, a = n.every((e) => r.has(e));
+		if (i && i.optionsKey === W && a && Ge(i.ids, n)) {
+			G(e, n, W, /* @__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 === W ? r : void 0, s = !1;
+		return Je(e, t, (e) => P.current?.(e)).then((t) => {
+			s || G(e, n, W, t, {
+				saved: I.current,
 				prior: o,
-				fit: p
+				fit: l
 			});
 		}), () => {
 			s = !0;
 		};
 	}, [
-		T,
+		C,
+		L,
+		R,
+		z,
+		B,
 		V,
-		U,
+		H,
 		W,
+		l,
 		G,
-		q,
-		p,
-		J,
-		D,
-		j
+		E,
+		k
 	]);
-	let Y = n(() => {
-		if (!T.ok) return;
-		let e = T.schema, t = {
-			algorithm: V,
-			direction: U,
-			horizontalGap: W,
-			verticalGap: G
+	let le = r(() => {
+		if (!C.ok) return;
+		let e = C.schema, t = {
+			algorithm: L,
+			direction: R,
+			horizontalGap: z,
+			verticalGap: B,
+			minNodeWidth: V,
+			maxNodeWidth: H
 		}, n = e.tables.map((e) => e.id);
-		$(e, t, (e) => I.current?.(e)).then((t) => {
-			J(e, n, q, t, {
+		Je(e, t, (e) => P.current?.(e)).then((t) => {
+			G(e, n, W, t, {
 				emit: !0,
 				fit: !0
 			});
 		});
 	}, [
-		T,
+		C,
+		L,
+		R,
+		z,
+		B,
 		V,
-		U,
+		H,
 		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 = {
+		G
+	]), K = r(() => {
+		C.ok || _?.(C.error);
+	}, [C, _]);
+	a(K, [K]);
+	let { displayNodes: q, displayEdges: J, onEdgeMouseEnter: ue, onEdgeMouseLeave: pe, onColumnHover: X } = Fe(C.ok ? C.schema.relations : Be, T, O), Z = {
 		width: "100%",
 		height: "100%",
-		...me(d),
-		...s
+		...ze(i),
+		...n
 	};
-	return T.ok ? /* @__PURE__ */ g("div", {
-		ref: P,
+	return C.ok ? /* @__PURE__ */ y("div", {
+		ref: M,
 		className: `dv-viewer${t ? ` ${t}` : ""}`,
-		style: Q,
-		children: /* @__PURE__ */ _(ee, {
-			nodes: se,
-			edges: ce,
-			nodeTypes: ge,
-			edgeTypes: _e,
-			onNodesChange: k,
-			onEdgesChange: M,
-			onEdgeMouseEnter: Z,
-			onEdgeMouseLeave: le,
-			onNodeDragStop: ae,
-			onInit: (e) => {
-				N.current = e;
-			},
-			fitView: p,
-			nodesConnectable: !1,
-			elementsSelectable: !0,
-			minZoom: .1,
-			proOptions: { hideAttribution: !0 },
-			children: [
-				h && /* @__PURE__ */ g(c, {}),
-				m && /* @__PURE__ */ g(u, { children: /* @__PURE__ */ g(l, {
-					onClick: Y,
-					title: "Auto layout",
-					"aria-label": "Auto layout",
-					children: /* @__PURE__ */ g(ve, {})
-				}) }),
-				ie && /* @__PURE__ */ g(f, {
-					pannable: !0,
-					zoomable: !0
+		style: Z,
+		children: /* @__PURE__ */ y(ge.Provider, {
+			value: g,
+			children: /* @__PURE__ */ y(he.Provider, {
+				value: X,
+				children: /* @__PURE__ */ b(ee, {
+					nodes: q,
+					edges: J,
+					nodeTypes: Ve,
+					edgeTypes: He,
+					onNodesChange: D,
+					onEdgesChange: se,
+					onEdgeMouseEnter: ue,
+					onEdgeMouseLeave: pe,
+					onNodeDragStop: ce,
+					onInit: (e) => {
+						j.current = e;
+					},
+					fitView: l,
+					nodesConnectable: !1,
+					elementsSelectable: !0,
+					minZoom: .1,
+					proOptions: { hideAttribution: !0 },
+					children: [
+						te && /* @__PURE__ */ y(u, {}),
+						p && /* @__PURE__ */ y(f, { children: /* @__PURE__ */ y(d, {
+							onClick: le,
+							title: "Auto layout",
+							"aria-label": "Auto layout",
+							children: /* @__PURE__ */ y(Ue, {})
+						}) }),
+						h && /* @__PURE__ */ y(m, {
+							pannable: !0,
+							zoomable: !0
+						})
+					]
 				})
-			]
+			})
 		})
-	}) : /* @__PURE__ */ g("div", {
+	}) : /* @__PURE__ */ y("div", {
 		className: `dv-error${t ? ` ${t}` : ""}`,
-		style: Q,
-		children: /* @__PURE__ */ g("pre", {
+		style: Z,
+		children: /* @__PURE__ */ y("pre", {
 			className: "dv-error__message",
-			children: T.error.message
+			children: C.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 { w as DbmlParseError, $e as DbmlViewer, ke as ErdEdge, Y as ExportError, N as HEADER_HEIGHT, q as LayoutError, j as MAX_NODE_WIDTH, se as MIN_NODE_WIDTH, M as NODE_WIDTH, P as ROW_HEIGHT, be as TableNode, J as computeLayout, Re as darkTheme, me as downloadDataUrl, G as layoutSchema, Le as lightTheme, A as parseDbml, fe as renderDiagram, F as tableHeight, H as tableWidth, ze as themeToCssVars };