dbml-erd-viewer 0.1.0

package/dist/dbml-erd-viewer.js

@@ -0,0 +1,902 @@
+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";
+//#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 {
+	diagnostics;
+	constructor(e, t) {
+		super(e, t), this.name = "DbmlParseError", this.diagnostics = t?.diagnostics ?? [];
+	}
+};
+function C(e) {
+	let t = e?.diags;
+	return Array.isArray(t) ? t.map((e) => ({
+		message: e.message ?? "Unknown error",
+		line: e.location?.start?.line,
+		column: e.location?.start?.column,
+		code: e.code
+	})) : [];
+}
+function w(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) {
+	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) {
+	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) {
+	let t;
+	try {
+		t = new b().parse(e, "dbmlv2");
+	} catch (e) {
+		let t = C(e);
+		throw new S(w(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();
+		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)
+			});
+		}
+		n.set(r, a);
+	}
+	let r = (e) => {
+		let t = n.get(e.tableId);
+		return !t || e.columns.length === 0 ? !1 : e.columns.every((e) => t.get(e)?.pk === !0);
+	}, i = (e) => e.columns.some((t) => {
+		let r = n.get(e.tableId)?.get(t);
+		return r ? !r.notNull && !r.pk : !0;
+	}), a = (e) => e.columns.some((t) => n.get(e.tableId)?.get(t)?.note?.toLowerCase().includes("optional") ?? !1), o = [], s = /* @__PURE__ */ new Set();
+	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),
+			columns: t.fieldNames,
+			relation: t.relation
+		})), l, u, d = n.relation === "*";
+		if (d !== (c.relation === "*")) l = d ? n : c, u = d ? c : n;
+		else {
+			let e = r(n), t = r(c);
+			e && !t ? (l = c, u = n) : (l = n, u = c);
+		}
+		let f = r(l), p = i(l);
+		l.columns.forEach((e) => s.add(`${l.tableId}::${e}`)), o.push({
+			id: `${l.tableId}.${l.columns.join("-")}__${u.tableId}.${u.columns.join("-")}`,
+			kind: f ? "identifying" : "non-identifying",
+			from: {
+				...l,
+				optional: a(l) ? !0 : void 0
+			},
+			to: {
+				...u,
+				optional: p
+			}
+		});
+	}
+	let c = [];
+	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) => ({
+				name: t.name,
+				type: t.type?.type_name ?? "unknown",
+				pk: r.has(t.name),
+				notNull: r.has(t.name) || !!t.not_null,
+				unique: !!t.unique,
+				increment: !!t.increment,
+				defaultValue: t.dbdefault?.value,
+				note: T(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),
+				headerColor: n.headerColor ?? void 0,
+				columns: i
+			});
+		}
+	}
+	return {
+		tables: c,
+		relations: o
+	};
+}
+//#endregion
+//#region src/layout/layout.ts
+var k = 240, A = 40, j = 28;
+function M(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++) {
+		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);
+		}
+		if (!e) break;
+	}
+	return t;
+}
+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);
+	}
+	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;
+		}
+	}), o;
+}
+//#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,
+		ranksep: r,
+		nodesep: i
+	}), o.setDefaultEdgeLabel(() => ({}));
+	for (let t of e.tables) o.setNode(t.id, {
+		width: 240,
+		height: M(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, {
+			x: t.x - t.width / 2,
+			y: t.y - t.height / 2,
+			width: t.width,
+			height: t.height
+		});
+	}
+	return s;
+}
+//#endregion
+//#region src/layout/elk.ts
+async function I(e, t = {}) {
+	let n = new (await (import("elkjs/lib/elk.bundled.js"))).default(), r = t.horizontalGap ?? 120, i = t.verticalGap ?? 40, a = {
+		id: "root",
+		layoutOptions: {
+			"elk.algorithm": "layered",
+			"elk.direction": t.direction === "TB" ? "DOWN" : "RIGHT",
+			"elk.layered.spacing.nodeNodeBetweenLayers": String(r),
+			"elk.spacing.nodeNode": String(i)
+		},
+		children: e.tables.map((e) => ({
+			id: e.id,
+			width: 240,
+			height: M(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, {
+		x: e.x ?? 0,
+		y: e.y ?? 0,
+		width: e.width ?? 240,
+		height: e.height ?? 0
+	});
+	return s;
+}
+//#endregion
+//#region src/layout/computeLayout.ts
+var L = class extends Error {
+	constructor(e, t) {
+		super(e, t), this.name = "LayoutError";
+	}
+};
+async function R(e, t = {}) {
+	let n = t.algorithm ?? "simple";
+	if (n === "simple") return P(e, t);
+	try {
+		return n === "dagre" ? await F(e, t) : await I(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 });
+	}
+}
+//#endregion
+//#region src/export.ts
+var ae = [
+	"--dv-canvas",
+	"--dv-bg",
+	"--dv-border",
+	"--dv-header-bg",
+	"--dv-header-fg",
+	"--dv-row-fg",
+	"--dv-type-fg",
+	"--dv-row-hover",
+	"--dv-row-highlight",
+	"--dv-pk",
+	"--dv-fk",
+	"--dv-null",
+	"--dv-edge",
+	"--dv-edge-active",
+	"--dv-font"
+], z = class extends Error {
+	constructor(e, t) {
+		super(e, t), this.name = "ExportError";
+	}
+};
+function oe(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;
+		try {
+			t = e.getBBox();
+		} catch {
+			continue;
+		}
+		t.width === 0 && t.height === 0 || (n = Math.min(n, t.x), r = Math.min(r, t.y), i = Math.max(i, t.x + t.width), a = Math.max(a, t.y + t.height));
+	}
+	return {
+		x: n,
+		y: r,
+		width: i - n,
+		height: a - r
+	};
+}
+async function B(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 });
+	}
+	if (typeof document < "u" && document.fonts?.ready) try {
+		await document.fonts.ready;
+	} catch {}
+	let c = Math.ceil(t.width + i * 2), l = Math.ceil(t.height + i * 2), u = `translate(${-t.x + i}px, ${-t.y + i}px) scale(1)`, d = {
+		width: c,
+		height: l,
+		backgroundColor: a,
+		style: {
+			width: `${c}px`,
+			height: `${l}px`,
+			transform: u
+		}
+	}, f = V(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 });
+	} finally {
+		f();
+	}
+}
+function V(e, t, n) {
+	let r = [], i = e.closest(".dv-viewer");
+	if (i) {
+		let t = getComputedStyle(i);
+		for (let n of ae) {
+			let i = t.getPropertyValue(n);
+			if (!i) continue;
+			let a = e.style.getPropertyValue(n);
+			e.style.setProperty(n, i), r.push(() => {
+				a ? e.style.setProperty(n, a) : e.style.removeProperty(n);
+			});
+		}
+	}
+	let a = `${Math.ceil(t.x + t.width + n)}px`, o = `${Math.ceil(t.y + t.height + n)}px`;
+	for (let t of e.querySelectorAll(".react-flow__edges svg")) {
+		let { width: e, height: n } = t.style;
+		t.style.width = a, t.style.height = o, r.push(() => {
+			t.style.width = e, t.style.height = n;
+		});
+	}
+	return () => r.forEach((e) => e());
+}
+function H(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) {
+	return `${e}__${t}__${n}`;
+}
+//#endregion
+//#region src/components/TableNode.tsx
+function W(e) {
+	return 40 + e * 28 + 28 / 2;
+}
+function G({ column: e, top: t }) {
+	let n = {
+		top: t,
+		opacity: 0
+	};
+	return /* @__PURE__ */ _(h, { children: [
+		/* @__PURE__ */ g(d, {
+			id: U(e, "left", "target"),
+			type: "target",
+			position: p.Left,
+			style: n,
+			isConnectable: !1
+		}),
+		/* @__PURE__ */ g(d, {
+			id: U(e, "left", "source"),
+			type: "source",
+			position: p.Left,
+			style: n,
+			isConnectable: !1
+		}),
+		/* @__PURE__ */ g(d, {
+			id: U(e, "right", "target"),
+			type: "target",
+			position: p.Right,
+			style: n,
+			isConnectable: !1
+		}),
+		/* @__PURE__ */ g(d, {
+			id: U(e, "right", "source"),
+			type: "source",
+			position: p.Right,
+			style: n,
+			isConnectable: !1
+		})
+	] });
+}
+function K({ data: e }) {
+	let { table: t, highlightedColumns: n } = e;
+	return /* @__PURE__ */ _("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);
+			})
+		})]
+	});
+}
+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 = {
+		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,
+		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", {
+		className: "dv-erd-marker",
+		children: s
+	});
+}
+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" : ""}`,
+		children: [
+			/* @__PURE__ */ g("path", {
+				className: "dv-erd-edge__interaction",
+				d: c,
+				fill: "none"
+			}),
+			/* @__PURE__ */ g("path", {
+				className: "dv-erd-edge__path",
+				d: c,
+				fill: "none",
+				style: {
+					stroke: f,
+					strokeWidth: p
+				},
+				strokeDasharray: u ? "6 4" : void 0
+			}),
+			l && Z(e, t, i, l.sourceEnd, f, p),
+			l && Z(n, r, a, l.targetEnd, f, p)
+		]
+	});
+}
+var Q = t(le);
+//#endregion
+//#region src/components/useRelationHighlight.ts
+function ue(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);
+		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);
+		}
+		return e;
+	}, [i, c]);
+	return {
+		displayNodes: a(() => i ? t.map((e) => {
+			let t = l.get(e.id);
+			return t ? {
+				...e,
+				data: {
+					...e.data,
+					highlightedColumns: t
+				}
+			} : e;
+		}) : t, [
+			t,
+			i,
+			l
+		]),
+		displayEdges: a(() => i ? r.map((e) => e.id === i ? {
+			...e,
+			data: {
+				...e.data,
+				hovered: !0
+			},
+			zIndex: 1
+		} : e) : r, [r, i]),
+		onEdgeMouseEnter: n((e, t) => o(t.id), []),
+		onEdgeMouseLeave: n(() => o(null), [])
+	};
+}
+//#endregion
+//#region src/theme.ts
+var de = {
+	canvas: "--dv-canvas",
+	background: "--dv-bg",
+	border: "--dv-border",
+	headerBackground: "--dv-header-bg",
+	headerForeground: "--dv-header-fg",
+	rowForeground: "--dv-row-fg",
+	typeForeground: "--dv-type-fg",
+	rowHover: "--dv-row-hover",
+	rowHighlight: "--dv-row-highlight",
+	primaryKey: "--dv-pk",
+	foreignKey: "--dv-fk",
+	edge: "--dv-edge",
+	edgeActive: "--dv-edge-active",
+	fontFamily: "--dv-font"
+}, fe = {
+	canvas: "#fafbfc",
+	background: "#ffffff",
+	border: "#d9dee5",
+	headerBackground: "#2d3748",
+	headerForeground: "#ffffff",
+	rowForeground: "#1a202c",
+	typeForeground: "#718096",
+	rowHover: "#f1f5f9",
+	rowHighlight: "#dbeafe",
+	primaryKey: "#b7791f",
+	foreignKey: "#2b6cb0",
+	edge: "#94a3b8",
+	edgeActive: "#2b6cb0"
+}, pe = {
+	canvas: "#0f172a",
+	background: "#1e293b",
+	border: "#334155",
+	headerBackground: "#334155",
+	headerForeground: "#f1f5f9",
+	rowForeground: "#e2e8f0",
+	typeForeground: "#94a3b8",
+	rowHover: "#334155",
+	rowHighlight: "#1e3a5f",
+	primaryKey: "#d69e2e",
+	foreignKey: "#4299e1",
+	edge: "#64748b",
+	edgeActive: "#60a5fa"
+};
+function me(e) {
+	if (!e) return {};
+	let t = {};
+	for (let n of Object.keys(e)) {
+		let r = e[n];
+		r != null && (t[de[n]] = r);
+	}
+	return t;
+}
+//#endregion
+//#region src/components/DbmlViewer.tsx
+var he = [], ge = { table: q }, _e = { erd: Q };
+function ve() {
+	return /* @__PURE__ */ _("svg", {
+		viewBox: "0 0 24 24",
+		width: "100%",
+		height: "100%",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ g("rect", {
+				x: "3",
+				y: "3",
+				width: "8",
+				height: "8",
+				rx: "1.5"
+			}),
+			/* @__PURE__ */ g("rect", {
+				x: "13",
+				y: "3",
+				width: "8",
+				height: "8",
+				rx: "1.5"
+			}),
+			/* @__PURE__ */ g("rect", {
+				x: "3",
+				y: "13",
+				width: "8",
+				height: "8",
+				rx: "1.5"
+			}),
+			/* @__PURE__ */ g("rect", {
+				x: "13",
+				y: "13",
+				width: "8",
+				height: "8",
+				rx: "1.5"
+			})
+		]
+	});
+}
+function ye(e, t, n, r) {
+	let i = /* @__PURE__ */ new Map();
+	for (let a of e.tables) {
+		let e = t.get(a.id);
+		i.set(a.id, n?.[a.id] ?? r?.get(a.id) ?? {
+			x: e?.x ?? 0,
+			y: e?.y ?? 0
+		});
+	}
+	return i;
+}
+function be(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) {
+	try {
+		return await R(e, t);
+	} catch (r) {
+		return n(r instanceof L ? r : new L(String(r), { cause: r })), P(e, t);
+	}
+}
+function xe(e, t) {
+	return e.tables.map((e) => ({
+		id: e.id,
+		type: "table",
+		position: t.get(e.id) ?? {
+			x: 0,
+			y: 0
+		},
+		data: { table: e }
+	}));
+}
+function Se(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"),
+			type: "erd",
+			data: {
+				kind: e.kind,
+				sourceEnd: {
+					cardinality: e.from.relation,
+					optional: e.from.optional
+				},
+				targetEnd: {
+					cardinality: e.to.relation,
+					optional: e.to.optional
+				}
+			}
+		};
+	});
+}
+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(() => {
+		try {
+			return {
+				ok: !0,
+				schema: O(e)
+			};
+		} catch (e) {
+			return {
+				ok: !1,
+				error: e instanceof S ? e : new S(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, () => {
+		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, {
+				...e,
+				backgroundColor: i
+			});
+		};
+		return {
+			toDataUrl: e,
+			download: async (t, n) => {
+				H(await e(n), t);
+			}
+		};
+	}, []);
+	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;
+		if (!e) return;
+		let t = {};
+		for (let e of F.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 = {
+			ids: t,
+			optionsKey: n
+		}, i.emit) {
+			let e = {};
+			a.forEach((t, n) => {
+				e[n] = t;
+			}), L.current?.(e);
+		}
+		i.fit && requestAnimationFrame(() => void N.current?.fitView());
+	}, [D, j]);
+	r(() => {
+		if (!T.ok) {
+			D([]), j([]), K.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, {
+			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 });
+			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,
+				prior: o,
+				fit: p
+			});
+		}), () => {
+			s = !0;
+		};
+	}, [
+		T,
+		V,
+		U,
+		W,
+		G,
+		q,
+		p,
+		J,
+		D,
+		j
+	]);
+	let Y = n(() => {
+		if (!T.ok) return;
+		let e = T.schema, t = {
+			algorithm: V,
+			direction: U,
+			horizontalGap: W,
+			verticalGap: G
+		}, n = e.tables.map((e) => e.id);
+		$(e, t, (e) => I.current?.(e)).then((t) => {
+			J(e, n, q, t, {
+				emit: !0,
+				fit: !0
+			});
+		});
+	}, [
+		T,
+		V,
+		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 = {
+		width: "100%",
+		height: "100%",
+		...me(d),
+		...s
+	};
+	return T.ok ? /* @__PURE__ */ g("div", {
+		ref: P,
+		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
+				})
+			]
+		})
+	}) : /* @__PURE__ */ g("div", {
+		className: `dv-error${t ? ` ${t}` : ""}`,
+		style: Q,
+		children: /* @__PURE__ */ g("pre", {
+			className: "dv-error__message",
+			children: T.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 };