dbml-erd-viewer 0.1.1 → 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 h from "@dbml/core";
-import { Fragment as g, jsx as _, jsxs as v } 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 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 {
+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 w(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 w(e) {
 		code: e.code
 	})) : [];
 }
-function T(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 E(e) {
+function D(e) {
 	if (e) return typeof e == "string" ? e : e.value ?? void 0;
 }
-function D(e, t) {
-	return e && e !== S ? `${e}.${t}` : t;
+function O(e, t) {
+	return e && e !== C ? `${e}.${t}` : t;
 }
-function O(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 ie(e) {
+function A(e) {
 	let t;
 	try {
-		t = new x().parse(e, "dbmlv2");
+		t = new oe().parse(e, "dbmlv2");
 	} catch (e) {
-		let t = w(e);
-		throw new C(T(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 = D(e.name, t.name), i = O(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: E(e.note)
+				note: D(e.note)
 			});
 		}
 		n.set(r, a);
@@ -71,7 +71,7 @@ function ie(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: D(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 ie(e) {
 	for (let e of t.schemas) {
 		let t = e.name;
 		for (let n of e.tables) {
-			let e = D(t, n.name), r = O(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 ie(e) {
 				unique: !!t.unique,
 				increment: !!t.increment,
 				defaultValue: t.dbdefault?.value,
-				note: E(t.note),
+				note: D(t.note),
 				isForeignKey: s.has(`${e}::${t.name}`)
 			}));
 			c.push({
 				id: e,
 				name: n.name,
-				schema: t === S ? void 0 : t,
-				note: E(n.note),
+				schema: t === C ? void 0 : t,
+				note: D(n.note),
 				headerColor: n.headerColor ?? void 0,
 				columns: i
 			});
@@ -126,64 +126,78 @@ function ie(e) {
 }
 //#endregion
 //#region src/layout/layout.ts
-var k = 160, ae = 320, A = 320, j = 40, M = 28;
-function N(e) {
+var se = 160, j = 320, M = 320, N = 40, P = 28;
+function F(e) {
 	return 40 + Math.max(e.columns.length, 1) * 28;
 }
-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;
+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 ? I : 0) + t.name.length * R, n = t.type.length * R + L;
-		i = Math.max(i, P + e + F + n);
+		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 V(e) {
+function U(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));
-	for (let r = 0; r < e.tables.length; r++) {
+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 U(e, t = {}) {
+function G(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 = a.get(t.id) ?? 0, n = o.get(e);
-		n || (n = [], o.set(e, n)), n.push(t);
+	}, 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 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;
+	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 = B(e, i), n = N(e);
-			s.set(e.id, {
-				x: l,
-				y: c,
+			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), c += n + r;
+			}), a = Math.max(a, t), o += n + r;
 		}
-		l += a + n;
+		d = Math.max(d, p + a), f = Math.max(f, o - r), p += a + n;
 	}
-	return s;
+	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);
+		}
+	}
+	return c;
 }
 //#endregion
 //#region src/layout/dagre.ts
-async function W(e, t = {}) {
+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
@@ -194,8 +208,8 @@ async function W(e, t = {}) {
 		nodesep: i
 	}), s.setDefaultEdgeLabel(() => ({}));
 	for (let t of e.tables) s.setNode(t.id, {
-		width: B(t, a),
-		height: N(t)
+		width: H(t, a),
+		height: F(t)
 	});
 	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);
@@ -213,7 +227,7 @@ async function W(e, t = {}) {
 }
 //#endregion
 //#region src/layout/elk.ts
-async function G(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
@@ -227,8 +241,8 @@ async function G(e, t = {}) {
 		},
 		children: e.tables.map((e) => ({
 			id: e.id,
-			width: B(e, a),
-			height: N(e)
+			width: H(e, a),
+			height: F(e)
 		})),
 		edges: e.relations.map((e, t) => ({
 			id: `e${t}`,
@@ -246,23 +260,23 @@ async function G(e, t = {}) {
 }
 //#endregion
 //#region src/layout/computeLayout.ts
-var K = class extends Error {
+var q = class extends Error {
 	constructor(e, t) {
 		super(e, t), this.name = "LayoutError";
 	}
 };
-async function q(e, t = {}) {
+async function J(e, t = {}) {
 	let n = t.algorithm ?? "simple";
-	if (n === "simple") return U(e, t);
+	if (n === "simple") return G(e, t);
 	try {
-		return n === "dagre" ? await W(e, t) : await G(e, t);
+		return n === "dagre" ? await le(e, t) : await K(e, t);
 	} catch (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 });
+		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 J = [
+var ue = [
 	"--dv-canvas",
 	"--dv-bg",
 	"--dv-border",
@@ -283,7 +297,7 @@ var J = [
 		super(e, t), this.name = "ExportError";
 	}
 };
-function se(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;
@@ -301,7 +315,7 @@ function se(e, t) {
 		height: a - r
 	};
 }
-async function ce(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");
@@ -320,7 +334,7 @@ async function ce(e, t, n = {}) {
 			height: `${l}px`,
 			transform: u
 		}
-	}, f = le(e, t, i);
+	}, f = pe(e, t, i);
 	try {
 		return r === "svg" ? await s.toSvg(e, d) : await s.toPng(e, {
 			...d,
@@ -332,11 +346,11 @@ async function ce(e, t, n = {}) {
 		f();
 	}
 }
-function le(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 J) {
+		for (let n of ue) {
 			let i = t.getPropertyValue(n);
 			if (!i) continue;
 			let a = e.style.getPropertyValue(n);
@@ -354,7 +368,7 @@ function le(e, t, n) {
 	}
 	return () => r.forEach((e) => e());
 }
-function ue(e, t) {
+function me(e, t) {
 	let n = document.createElement("a");
 	n.href = e, n.download = t, n.click();
 }
@@ -364,217 +378,307 @@ function X(e, t, n) {
 	return `${e}__${t}__${n}`;
 }
 //#endregion
-//#region src/components/TableNode.tsx
-function de(e) {
+//#region src/components/columnHoverContext.ts
+var he = e(void 0), ge = e("column");
+function Z(e) {
 	return 40 + e * 28 + 28 / 2;
 }
-function fe({ 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__ */ v(g, { children: [
-		/* @__PURE__ */ _(d, {
+	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__ */ _(d, {
+		/* @__PURE__ */ y(p, {
 			id: X(e, "left", "source"),
 			type: "source",
-			position: p.Left,
+			position: h.Left,
 			style: n,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ _(d, {
+		/* @__PURE__ */ y(p, {
 			id: X(e, "right", "target"),
 			type: "target",
-			position: p.Right,
-			style: n,
+			position: h.Right,
+			style: r,
 			isConnectable: !1
 		}),
-		/* @__PURE__ */ _(d, {
+		/* @__PURE__ */ y(p, {
 			id: X(e, "right", "source"),
 			type: "source",
-			position: p.Right,
+			position: h.Right,
 			style: n,
 			isConnectable: !1
 		})
 	] });
 }
-function Z({ data: e }) {
-	let { table: t, highlightedColumns: n, widthBounds: r } = e;
-	return /* @__PURE__ */ v("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: 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__ */ v("span", {
-				className: "dv-table__schema",
-				children: [t.schema, "."]
-			}), /* @__PURE__ */ _("span", {
-				className: "dv-table__name",
-				title: t.name,
-				children: t.name
-			})]
-		}), /* @__PURE__ */ _("div", {
-			className: "dv-table__body",
-			children: t.columns.map((e, t) => {
-				let r = n?.has(e.name);
-				return /* @__PURE__ */ v("div", {
-					className: `dv-row${r ? " dv-row--highlighted" : ""}`,
-					style: { height: 28 },
-					title: e.note,
-					children: [
-						/* @__PURE__ */ v("span", {
-							className: `dv-row__name${e.pk ? " dv-row__name--pk" : ""}`,
-							children: [
-								e.pk && /* @__PURE__ */ _("span", {
-									className: "dv-badge dv-badge--pk",
-									title: "Primary key",
-									children: "PK"
-								}),
-								e.isForeignKey && !e.pk && /* @__PURE__ */ _("span", {
-									className: "dv-badge dv-badge--fk",
-									title: "Foreign key",
-									children: "FK"
-								}),
-								/* @__PURE__ */ _("span", {
-									className: "dv-row__label",
-									title: e.name,
-									children: e.name
-								})
-							]
-						}),
-						/* @__PURE__ */ v("span", {
-							className: "dv-row__type",
-							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__ */ _(fe, {
-							column: e.name,
-							top: de(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(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 = {
+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__ */ _("line", {
-		x1: e + o * n,
-		y1: t - $,
-		x2: e + o * n,
-		y2: t + $,
-		style: c
-	}, r)), u = (n, r) => s.push(/* @__PURE__ */ _("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 * pe;
-		s.push(/* @__PURE__ */ _("line", {
-			x1: n,
-			y1: t,
-			x2: e,
-			y2: t - $,
-			style: c
-		}, "cf1"), /* @__PURE__ */ _("line", {
-			x1: n,
-			y1: t,
-			x2: e,
-			y2: t,
-			style: c
-		}, "cf2"), /* @__PURE__ */ _("line", {
-			x1: n,
-			y1: t,
-			x2: e,
-			y2: t + $,
-			style: c
-		}, "cf3")), r.optional === !0 ? u(17, "fr") : l(14, "fb");
-	} else l(me, "b1"), r.optional === !0 ? u(ge, "r") : r.optional === !1 && l(he, "b2");
-	return /* @__PURE__ */ _("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 ve({ 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__ */ v("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__ */ _("path", {
+			/* @__PURE__ */ y("path", {
 				className: "dv-erd-edge__interaction",
-				d: c,
+				d: e,
 				fill: "none"
 			}),
-			/* @__PURE__ */ _("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 && _e(e, t, i, l.sourceEnd, f, p),
-			l && _e(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 ye = t(ve);
+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 be(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: {
@@ -582,26 +686,27 @@ function be(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 xe = {
+var Ie = {
 	canvas: "--dv-canvas",
 	background: "--dv-bg",
 	border: "--dv-border",
@@ -616,7 +721,7 @@ var xe = {
 	edge: "--dv-edge",
 	edgeActive: "--dv-edge-active",
 	fontFamily: "--dv-font"
-}, Se = {
+}, Le = {
 	canvas: "#fafbfc",
 	background: "#ffffff",
 	border: "#d9dee5",
@@ -630,7 +735,7 @@ var xe = {
 	foreignKey: "#2b6cb0",
 	edge: "#94a3b8",
 	edgeActive: "#2b6cb0"
-}, Ce = {
+}, Re = {
 	canvas: "#0f172a",
 	background: "#1e293b",
 	border: "#334155",
@@ -645,48 +750,51 @@ var xe = {
 	edge: "#64748b",
 	edgeActive: "#60a5fa"
 };
-function we(e) {
+function ze(e) {
 	if (!e) return {};
 	let t = {};
 	for (let n of Object.keys(e)) {
 		let r = e[n];
-		r != null && (t[xe[n]] = r);
+		r != null && (t[Ie[n]] = r);
 	}
 	return t;
 }
 //#endregion
 //#region src/components/DbmlViewer.tsx
-var Te = [], Ee = { table: Q }, De = { erd: ye };
-function Oe() {
-	return /* @__PURE__ */ v("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__ */ _("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "3",
 				y: "3",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ _("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "13",
 				y: "3",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ _("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "3",
 				y: "13",
 				width: "8",
 				height: "8",
 				rx: "1.5"
 			}),
-			/* @__PURE__ */ _("rect", {
+			/* @__PURE__ */ y("rect", {
 				x: "13",
 				y: "13",
 				width: "8",
@@ -696,7 +804,7 @@ function Oe() {
 		]
 	});
 }
-function ke(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);
@@ -707,27 +815,27 @@ function ke(e, t, n, r) {
 	}
 	return i;
 }
-function Ae(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));
 }
-function je(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 Me(e, t, n, r, i) {
+function qe(e, t, n, r, i) {
 	let a = (e, t) => ({
 		x: t.x,
 		y: t.y,
-		w: B(e, i),
-		h: N(e)
+		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) => je(s, e, r));
+			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 = {
@@ -738,14 +846,23 @@ function Me(e, t, n, r, i) {
 		t.set(i.id, e), o.push(s);
 	}
 }
-async function Ne(e, t, n) {
+async function Je(e, t, n) {
 	try {
-		return await q(e, t);
+		return await J(e, t);
 	} catch (r) {
-		return n(r instanceof K ? r : new K(String(r), { cause: r })), U(e, t);
+		return n(r instanceof q ? r : new q(String(r), { cause: r })), G(e, t);
 	}
 }
-function Pe(e, t, n) {
+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",
@@ -755,20 +872,31 @@ function Pe(e, t, n) {
 		},
 		data: {
 			table: e,
-			widthBounds: n
+			widthBounds: n,
+			connectedColumns: r.get(e.id)
 		}
 	}));
 }
-function Fe(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: X(s, a, "source"),
-			targetHandle: X(c, o, "target"),
-			type: "erd",
+			...n,
+			type: r ? "erd-floating" : "erd",
 			data: {
 				kind: e.kind,
 				sourceEnd: {
@@ -783,26 +911,26 @@ function Fe(e, t) {
 		};
 	});
 }
-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(() => {
+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: ie(e)
+				schema: A(e)
 			};
 		} catch (e) {
 			return {
 				ok: !1,
-				error: e instanceof C ? e : new C(String(e), { cause: e })
+				error: e instanceof w ? e : new w(String(e), { cause: e })
 			};
 		}
-	}, [e]), [D, O, k] = re([]), [ae, A, j] = ne([]), M = o(null), N = o(null), P = o(D);
-	P.current = D, i(T, () => {
+	}, [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 = M.current, n = N.current?.querySelector(".react-flow__viewport");
+			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 = se(te(t.getNodes()), n), i = e?.backgroundColor ?? (N.current ? getComputedStyle(N.current).backgroundColor : void 0);
-			return ce(n, r, {
+			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
 			});
@@ -810,183 +938,190 @@ var Ie = e(function({ dbml: e, className: t, style: s, theme: d, fitView: p = !0
 		return {
 			toDataUrl: e,
 			download: async (t, n) => {
-				ue(await e(n), t);
+				me(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()
+			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 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;
+	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 P.current) t[e.id] = {
+		for (let e of N.current) t[e.id] = {
 			x: e.position.x,
 			y: e.position.y
 		};
 		e(t);
-	}, []), { 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) => {
+	}, []), { 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: H,
-			maxWidth: U
-		}, o = ke(e, r, i.saved, i.prior);
+			minWidth: V,
+			maxWidth: H
+		}, o = We(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);
+			qe(e, o, (e) => t.has(e) || n?.[e] !== void 0, B ?? 40, a);
 		}
-		if (O(Pe(e, o, a)), A(Fe(e, o)), W.current = {
+		if (E(Xe(e, o, a, Ye(e))), k(Qe(e, o, g)), U.current = {
 			ids: t,
 			optionsKey: n
 		}, i.emit) {
 			let e = {};
 			o.forEach((t, n) => {
 				e[n] = t;
-			}), I.current?.(e);
+			}), F.current?.(e);
 		}
-		i.fit && requestAnimationFrame(() => void M.current?.fitView());
+		i.fit && requestAnimationFrame(() => void j.current?.fitView());
 	}, [
-		O,
-		A,
+		E,
+		k,
+		B,
 		V,
 		H,
-		U
+		g
 	]);
-	r(() => {
-		if (!E.ok) {
-			O([]), A([]), W.current = null;
+	a(() => {
+		if (!C.ok) {
+			E([]), k([]), U.current = null;
 			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), r = new Map(P.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 = 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 });
+		}])), 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 === 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,
+		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;
 		};
 	}, [
-		E,
+		C,
+		L,
 		R,
 		z,
 		B,
 		V,
 		H,
-		U,
+		W,
+		l,
 		G,
-		p,
-		K,
-		O,
-		A
+		E,
+		k
 	]);
-	let q = n(() => {
-		if (!E.ok) return;
-		let e = E.schema, t = {
-			algorithm: R,
-			direction: z,
-			horizontalGap: B,
-			verticalGap: V,
-			minNodeWidth: H,
-			maxNodeWidth: U
+	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);
-		Ne(e, t, (e) => F.current?.(e)).then((t) => {
-			K(e, n, G, t, {
+		Je(e, t, (e) => P.current?.(e)).then((t) => {
+			G(e, n, W, t, {
 				emit: !0,
 				fit: !0
 			});
 		});
 	}, [
-		E,
+		C,
+		L,
 		R,
 		z,
 		B,
 		V,
 		H,
-		U,
-		G,
-		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 = {
+		W,
+		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%",
-		...we(d),
-		...s
+		...ze(i),
+		...n
 	};
-	return E.ok ? /* @__PURE__ */ _("div", {
-		ref: N,
+	return C.ok ? /* @__PURE__ */ y("div", {
+		ref: M,
 		className: `dv-viewer${t ? ` ${t}` : ""}`,
 		style: Z,
-		children: /* @__PURE__ */ v(ee, {
-			nodes: le,
-			edges: X,
-			nodeTypes: Ee,
-			edgeTypes: De,
-			onNodesChange: k,
-			onEdgesChange: j,
-			onEdgeMouseEnter: de,
-			onEdgeMouseLeave: fe,
-			onNodeDragStop: oe,
-			onInit: (e) => {
-				M.current = e;
-			},
-			fitView: p,
-			nodesConnectable: !1,
-			elementsSelectable: !0,
-			minZoom: .1,
-			proOptions: { hideAttribution: !0 },
-			children: [
-				g && /* @__PURE__ */ _(c, {}),
-				m && /* @__PURE__ */ _(u, { children: /* @__PURE__ */ _(l, {
-					onClick: q,
-					title: "Auto layout",
-					"aria-label": "Auto layout",
-					children: /* @__PURE__ */ _(Oe, {})
-				}) }),
-				h && /* @__PURE__ */ _(f, {
-					pannable: !0,
-					zoomable: !0
+		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__ */ _("div", {
+	}) : /* @__PURE__ */ y("div", {
 		className: `dv-error${t ? ` ${t}` : ""}`,
 		style: Z,
-		children: /* @__PURE__ */ _("pre", {
+		children: /* @__PURE__ */ y("pre", {
 			className: "dv-error__message",
-			children: E.error.message
+			children: C.error.message
 		})
 	});
 });
 //#endregion
-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 };
+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 };