@rebasepro/studio 0.4.0 → 0.6.0

package/dist/SchemaVisualizer-BJK2u3C0.js

@@ -0,0 +1,1068 @@
+import { IconForView, useStudioCollectionRegistry } from "@rebasepro/core";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Chip, CircularProgress, IconButton, ResizablePanels, SearchBar, Tooltip, Typography, cls, defaultBorderMixin } from "@rebasepro/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isPostgresCollection } from "@rebasepro/types";
+import { Background, BackgroundVariant, BaseEdge, Controls, EdgeLabelRenderer, Handle, MarkerType, MiniMap, Position, ReactFlow, ReactFlowProvider, applyEdgeChanges, applyNodeChanges, getSmoothStepPath, useReactFlow } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { resolveCollectionRelations } from "@rebasepro/common";
+import dagre from "dagre";
+/** Header with a single line of text (junction tables or tableName === collectionName). */
+var HEADER_HEIGHT_SINGLE = 33;
+/** Header with two lines (name + subtitle when collectionName !== tableName). */
+var HEADER_HEIGHT_DOUBLE = 47;
+var ROW_HEIGHT = 28;
+/**
+* Compute the correct header height for a table node.
+*/
+var getHeaderHeight = (opts) => {
+	if (opts.isJunction) return HEADER_HEIGHT_SINGLE;
+	return opts.collectionName !== opts.tableName ? HEADER_HEIGHT_DOUBLE : HEADER_HEIGHT_SINGLE;
+};
+/**
+* Estimate the pixel height of a table node based on column count.
+*/
+var estimateNodeHeight = (columnCount, headerHeight = HEADER_HEIGHT_DOUBLE) => headerHeight + Math.max(columnCount, 1) * ROW_HEIGHT + 4;
+/**
+* Get the vertical center Y of a specific column row (0-indexed)
+* relative to the top of the node.
+*/
+var getColumnRowY = (rowIndex, headerHeight = HEADER_HEIGHT_DOUBLE) => headerHeight + rowIndex * ROW_HEIGHT + ROW_HEIGHT / 2;
+/**
+* Compute node positions using the dagre graph layout engine.
+* Returns a new array of nodes with updated `position`.
+*/
+var getLayoutedElements = (nodes, edges, direction = "LR") => {
+	const g = new dagre.graphlib.Graph();
+	g.setGraph({
+		rankdir: direction,
+		nodesep: 100,
+		ranksep: 180,
+		edgesep: 60,
+		marginx: 60,
+		marginy: 60
+	});
+	g.setDefaultEdgeLabel(() => ({}));
+	const nodeHeights = /* @__PURE__ */ new Map();
+	nodes.forEach((node) => {
+		const data = node.data;
+		const h = estimateNodeHeight(data.columns?.length ?? 3, getHeaderHeight({
+			isJunction: Boolean(data.isJunction),
+			collectionName: data.collectionName ?? "",
+			tableName: data.tableName ?? ""
+		}));
+		nodeHeights.set(node.id, h);
+		g.setNode(node.id, {
+			width: 280,
+			height: h
+		});
+	});
+	edges.forEach((edge) => {
+		g.setEdge(edge.source, edge.target);
+	});
+	dagre.layout(g);
+	return {
+		nodes: nodes.map((node) => {
+			const nodeWithPosition = g.node(node.id);
+			const h = nodeHeights.get(node.id) ?? estimateNodeHeight(3);
+			return {
+				...node,
+				data: {
+					...node.data,
+					layoutDirection: direction
+				},
+				position: {
+					x: nodeWithPosition.x - 280 / 2,
+					y: nodeWithPosition.y - h / 2
+				}
+			};
+		}),
+		edges
+	};
+};
+var TYPE_LABELS = {
+	string: "varchar",
+	number: "integer",
+	boolean: "boolean",
+	date: "timestamp",
+	map: "jsonb",
+	array: "jsonb",
+	relation: "FK"
+};
+var getTypeLabel = (type) => TYPE_LABELS[type] ?? type;
+var getCardinalityLabel = (cardinality, direction) => {
+	if (cardinality === "many") return "M:N";
+	if (direction === "inverse") return "1:1 ←";
+	return "N:1";
+};
+//#endregion
+//#region src/components/SchemaVisualizer/useSchemaGraph.ts
+var extractColumns = (collection) => {
+	const columns = [];
+	const properties = collection.properties ?? {};
+	for (const [propName, prop] of Object.entries(properties)) {
+		if (prop.type === "relation") continue;
+		const isPk = "isId" in prop && Boolean(prop.isId) || !Object.values(properties).some((p) => "isId" in p && Boolean(p.isId)) && propName === "id";
+		const isEnum = prop.type === "string" && "enum" in prop && Boolean(prop.enum);
+		let enumValues;
+		if (isEnum && "enum" in prop && prop.enum) {
+			const enumProp = prop.enum;
+			if (Array.isArray(enumProp)) enumValues = enumProp.map((v) => typeof v === "string" ? v : String(v?.id ?? v));
+			else if (typeof enumProp === "object" && enumProp !== null) enumValues = Object.keys(enumProp);
+		}
+		columns.push({
+			name: propName,
+			type: prop.type,
+			typeLabel: getTypeLabel(prop.type),
+			isPrimaryKey: isPk,
+			isForeignKey: false,
+			isRequired: Boolean(prop.validation?.required),
+			isEnum,
+			enumValues
+		});
+	}
+	if (isPostgresCollection(collection)) try {
+		const resolvedRelations = resolveCollectionRelations(collection);
+		for (const rel of Object.values(resolvedRelations)) if (rel.direction === "owning" && rel.cardinality === "one" && rel.localKey) if (!columns.some((c) => c.name === rel.localKey)) columns.push({
+			name: rel.localKey,
+			type: "number",
+			typeLabel: "FK",
+			isPrimaryKey: false,
+			isForeignKey: true,
+			isRequired: false,
+			isEnum: false,
+			relationName: rel.relationName
+		});
+		else {
+			const existing = columns.find((c) => c.name === rel.localKey);
+			if (existing) {
+				existing.isForeignKey = true;
+				existing.relationName = rel.relationName;
+			}
+		}
+	} catch {}
+	return columns;
+};
+var buildGraph = (collections, direction) => {
+	const nodes = [];
+	const edges = [];
+	const tableToNodeId = /* @__PURE__ */ new Map();
+	const nodeColumns = /* @__PURE__ */ new Map();
+	const getPkHandle = (nodeId) => {
+		const pk = nodeColumns.get(nodeId)?.find((c) => c.isPrimaryKey);
+		return pk ? `target-${pk.name}` : "target-default";
+	};
+	const getFkHandle = (nodeId, localKey) => {
+		if (!localKey) return "source-default";
+		const fk = nodeColumns.get(nodeId)?.find((c) => c.name === localKey);
+		return fk ? `source-${fk.name}` : "source-default";
+	};
+	for (const collection of collections) {
+		if (!isPostgresCollection(collection)) continue;
+		const tableName = collection.table ?? collection.slug;
+		const nodeId = `table-${tableName}`;
+		tableToNodeId.set(tableName, nodeId);
+		const columns = extractColumns(collection);
+		nodeColumns.set(nodeId, columns);
+		const nodeData = {
+			tableName,
+			collectionName: collection.name,
+			slug: collection.slug,
+			columns,
+			isJunction: false,
+			isUnmanaged: false,
+			rlsEnabled: Boolean(collection.securityRules && collection.securityRules.length > 0),
+			historyEnabled: Boolean(collection.history),
+			icon: typeof collection.icon === "string" ? collection.icon : void 0
+		};
+		nodes.push({
+			id: nodeId,
+			type: "tableNode",
+			position: {
+				x: 0,
+				y: 0
+			},
+			data: nodeData
+		});
+	}
+	const processedJunctions = /* @__PURE__ */ new Set();
+	for (const collection of collections) {
+		if (!isPostgresCollection(collection)) continue;
+		const tableName = collection.table ?? collection.slug;
+		const sourceNodeId = tableToNodeId.get(tableName);
+		if (!sourceNodeId) continue;
+		let resolvedRelations;
+		try {
+			resolvedRelations = resolveCollectionRelations(collection);
+		} catch {
+			continue;
+		}
+		for (const [relationKey, rel] of Object.entries(resolvedRelations)) {
+			let targetCollection;
+			try {
+				targetCollection = rel.target();
+			} catch {
+				continue;
+			}
+			if (!isPostgresCollection(targetCollection)) continue;
+			const targetTable = targetCollection.table ?? targetCollection.slug;
+			const targetNodeId = tableToNodeId.get(targetTable);
+			if (!targetNodeId) continue;
+			if (rel.direction === "inverse") continue;
+			const edgeData = {
+				cardinality: rel.cardinality,
+				direction: rel.direction ?? "owning",
+				relationName: rel.relationName ?? relationKey,
+				hasJunction: Boolean(rel.through),
+				hasJoinPath: Boolean(rel.joinPath),
+				label: getCardinalityLabel(rel.cardinality, rel.direction ?? "owning")
+			};
+			if (rel.through && !processedJunctions.has(rel.through.table)) {
+				processedJunctions.add(rel.through.table);
+				const junctionNodeId = `junction-${rel.through.table}`;
+				const junctionColumns = [{
+					name: rel.through.sourceColumn,
+					type: "number",
+					typeLabel: "FK",
+					isPrimaryKey: true,
+					isForeignKey: true,
+					isRequired: true,
+					isEnum: false
+				}, {
+					name: rel.through.targetColumn,
+					type: "number",
+					typeLabel: "FK",
+					isPrimaryKey: true,
+					isForeignKey: true,
+					isRequired: true,
+					isEnum: false
+				}];
+				nodeColumns.set(junctionNodeId, junctionColumns);
+				nodes.push({
+					id: junctionNodeId,
+					type: "tableNode",
+					position: {
+						x: 0,
+						y: 0
+					},
+					data: {
+						tableName: rel.through.table,
+						collectionName: rel.through.table,
+						slug: rel.through.table,
+						columns: junctionColumns,
+						isJunction: true,
+						isUnmanaged: false,
+						rlsEnabled: false,
+						historyEnabled: false
+					}
+				});
+				const sourcePk = nodeColumns.get(sourceNodeId)?.find((c) => c.isPrimaryKey);
+				edges.push({
+					id: `edge-${sourceNodeId}-${junctionNodeId}`,
+					source: sourceNodeId,
+					target: junctionNodeId,
+					sourceHandle: sourcePk ? `source-${sourcePk.name}` : "source-default",
+					targetHandle: `target-${rel.through.sourceColumn}`,
+					type: "relationEdge",
+					data: {
+						...edgeData,
+						label: "1:N"
+					},
+					markerEnd: {
+						type: MarkerType.ArrowClosed,
+						width: 16,
+						height: 16
+					}
+				});
+				edges.push({
+					id: `edge-${junctionNodeId}-${targetNodeId}`,
+					source: junctionNodeId,
+					target: targetNodeId,
+					sourceHandle: `source-${rel.through.targetColumn}`,
+					targetHandle: getPkHandle(targetNodeId),
+					type: "relationEdge",
+					data: {
+						...edgeData,
+						label: "N:1"
+					},
+					markerEnd: {
+						type: MarkerType.ArrowClosed,
+						width: 16,
+						height: 16
+					}
+				});
+			} else if (!rel.through) edges.push({
+				id: `edge-${sourceNodeId}-${targetNodeId}-${relationKey}`,
+				source: sourceNodeId,
+				target: targetNodeId,
+				sourceHandle: getFkHandle(sourceNodeId, rel.localKey),
+				targetHandle: getPkHandle(targetNodeId),
+				type: "relationEdge",
+				data: { ...edgeData },
+				markerEnd: {
+					type: MarkerType.ArrowClosed,
+					width: 16,
+					height: 16
+				}
+			});
+		}
+	}
+	const layoutResult = getLayoutedElements(nodes, edges, direction);
+	const nodePositions = /* @__PURE__ */ new Map();
+	for (const node of layoutResult.nodes) nodePositions.set(node.id, { x: node.position.x });
+	for (const edge of layoutResult.edges) {
+		const srcPos = nodePositions.get(edge.source);
+		const tgtPos = nodePositions.get(edge.target);
+		const srcBaseHandle = edge.sourceHandle ?? "source-default";
+		const tgtBaseHandle = edge.targetHandle ?? "target-default";
+		if (srcPos && tgtPos) {
+			const sourceIsLeft = srcPos.x + 280 / 2 <= tgtPos.x + 280 / 2;
+			edge.sourceHandle = `${srcBaseHandle}-${sourceIsLeft ? "right" : "left"}`;
+			edge.targetHandle = `${tgtBaseHandle}-${sourceIsLeft ? "left" : "right"}`;
+		} else {
+			edge.sourceHandle = `${srcBaseHandle}-right`;
+			edge.targetHandle = `${tgtBaseHandle}-left`;
+		}
+	}
+	return layoutResult;
+};
+var useSchemaGraph = (collections) => {
+	const [direction, setDirection] = useState("LR");
+	const [version, setVersion] = useState(0);
+	const relayout = useCallback(() => setVersion((v) => v + 1), []);
+	useEffect(() => {
+		setVersion((v) => v + 1);
+	}, [direction]);
+	const { nodes, edges, tableCount, relationCount } = useMemo(() => {
+		if (!collections || collections.length === 0) return {
+			nodes: [],
+			edges: [],
+			tableCount: 0,
+			relationCount: 0
+		};
+		const result = buildGraph(collections, direction);
+		return {
+			...result,
+			tableCount: result.nodes.length,
+			relationCount: result.edges.length
+		};
+	}, [
+		collections,
+		direction,
+		version
+	]);
+	return {
+		nodes,
+		edges,
+		direction,
+		setDirection,
+		relayout,
+		isLoading: !collections,
+		tableCount,
+		relationCount
+	};
+};
+//#endregion
+//#region src/components/SchemaVisualizer/TableNode.tsx
+/**
+* Custom React Flow node that renders a database table as a card.
+*
+* Every PK and FK column renders handles on BOTH Left and Right sides.
+* The edge builder picks which side to use based on relative node position.
+*/
+var TableNodeInner = ({ data, selected }) => {
+	const { tableName, collectionName, columns, isJunction, rlsEnabled, historyEnabled, icon } = data;
+	const handles = useMemo(() => {
+		const result = [];
+		const cols = columns;
+		const headerH = getHeaderHeight({
+			isJunction: Boolean(isJunction),
+			collectionName,
+			tableName
+		});
+		const midY = cols.length > 0 ? getColumnRowY(Math.floor(cols.length / 2), headerH) : 30;
+		cols.forEach((col, idx) => {
+			const y = getColumnRowY(idx, headerH);
+			if (col.isForeignKey && !col.isPrimaryKey) {
+				result.push({
+					id: `source-${col.name}-right`,
+					type: "source",
+					position: Position.Right,
+					top: y
+				});
+				result.push({
+					id: `source-${col.name}-left`,
+					type: "source",
+					position: Position.Left,
+					top: y
+				});
+			}
+			if (col.isPrimaryKey) {
+				result.push({
+					id: `target-${col.name}-right`,
+					type: "target",
+					position: Position.Right,
+					top: y
+				});
+				result.push({
+					id: `target-${col.name}-left`,
+					type: "target",
+					position: Position.Left,
+					top: y
+				});
+				result.push({
+					id: `source-${col.name}-right`,
+					type: "source",
+					position: Position.Right,
+					top: y
+				});
+				result.push({
+					id: `source-${col.name}-left`,
+					type: "source",
+					position: Position.Left,
+					top: y
+				});
+			}
+		});
+		result.push({
+			id: "target-default-right",
+			type: "target",
+			position: Position.Right,
+			top: midY
+		});
+		result.push({
+			id: "target-default-left",
+			type: "target",
+			position: Position.Left,
+			top: midY
+		});
+		result.push({
+			id: "source-default-right",
+			type: "source",
+			position: Position.Right,
+			top: midY
+		});
+		result.push({
+			id: "source-default-left",
+			type: "source",
+			position: Position.Left,
+			top: midY
+		});
+		return result;
+	}, [
+		columns,
+		isJunction,
+		collectionName,
+		tableName
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("relative rounded-lg border bg-white dark:bg-surface-900 shadow-sm transition-all duration-200 min-w-[240px] max-w-[320px]", selected ? "border-primary ring-2 ring-primary/20 shadow-md" : "border-surface-200/40 dark:border-surface-700/40 hover:shadow-md hover:border-surface-300 dark:hover:border-surface-600", isJunction && "border-dashed"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("flex items-center gap-2 px-3 py-2 border-b rounded-t-lg", isJunction ? "bg-surface-50 dark:bg-surface-950/50 border-surface-200/30 dark:border-surface-700/30" : "bg-surface-50 dark:bg-surface-950 border-surface-200/40 dark:border-surface-700/40"),
+				children: [
+					icon && !isJunction && /* @__PURE__ */ jsx("div", {
+						className: "text-primary shrink-0",
+						children: /* @__PURE__ */ jsx(IconForView, {
+							collectionOrView: {
+								slug: tableName,
+								name: collectionName,
+								icon
+							},
+							size: "smallest"
+						})
+					}),
+					isJunction && /* @__PURE__ */ jsx("svg", {
+						className: "w-3.5 h-3.5 text-text-disabled dark:text-text-disabled-dark shrink-0",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ jsx("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col min-w-0",
+						children: [/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: cls("font-semibold truncate text-[12px]", isJunction ? "text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark"),
+							children: tableName
+						}), collectionName !== tableName && !isJunction && /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "text-[10px] text-text-disabled dark:text-text-disabled-dark truncate",
+							children: collectionName
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ml-auto flex items-center gap-1 shrink-0",
+						children: [rlsEnabled && /* @__PURE__ */ jsx(Tooltip, {
+							title: "RLS enabled",
+							children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" })
+						}), historyEnabled && /* @__PURE__ */ jsx(Tooltip, {
+							title: "History enabled",
+							children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-400" })
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "divide-y divide-surface-100 dark:divide-surface-950/60",
+				children: columns.map((col) => /* @__PURE__ */ jsxs("div", {
+					className: cls("flex items-center gap-2 px-3 py-1.5 text-xs transition-colors", col.isPrimaryKey && "bg-amber-50/50 dark:bg-amber-950/10", col.isForeignKey && !col.isPrimaryKey && "bg-blue-50/40 dark:bg-blue-950/10"),
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: "w-3 shrink-0 text-center",
+							children: [col.isPrimaryKey && /* @__PURE__ */ jsx(Tooltip, {
+								title: "Primary Key",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "text-amber-500 text-[10px] font-bold",
+									children: "🔑"
+								})
+							}), col.isForeignKey && !col.isPrimaryKey && /* @__PURE__ */ jsx(Tooltip, {
+								title: `FK → ${col.relationName ?? "?"}`,
+								children: /* @__PURE__ */ jsx("span", {
+									className: "text-blue-400 text-[10px] font-bold",
+									children: "🔗"
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: cls("font-mono text-[11px] truncate flex-1 min-w-0", col.isPrimaryKey ? "font-semibold text-amber-700 dark:text-amber-400" : col.isForeignKey ? "text-blue-600 dark:text-blue-400" : "text-text-primary dark:text-text-primary-dark"),
+							children: col.name
+						}),
+						col.isEnum ? /* @__PURE__ */ jsx(Chip, {
+							size: "smallest",
+							className: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400 border-violet-200 dark:border-violet-800 text-[9px] py-0",
+							children: "enum"
+						}) : /* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "text-[10px] text-text-disabled dark:text-text-disabled-dark font-mono shrink-0",
+							children: col.typeLabel
+						}),
+						col.isRequired && !col.isPrimaryKey && /* @__PURE__ */ jsx(Tooltip, {
+							title: "Required",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "text-red-400 text-[9px]",
+								children: "•"
+							})
+						})
+					]
+				}, col.name))
+			}),
+			handles.map((h) => /* @__PURE__ */ jsx(Handle, {
+				id: h.id,
+				type: h.type,
+				position: h.position,
+				style: { top: h.top },
+				className: cls("!w-2 !h-2 !border-2 !border-white dark:!border-surface-900", h.type === "source" ? "!bg-blue-400" : "!bg-amber-400")
+			}, h.id))
+		]
+	});
+};
+var TableNode = memo(TableNodeInner);
+//#endregion
+//#region src/components/SchemaVisualizer/RelationEdge.tsx
+/**
+* Custom React Flow edge that renders relations with style variations
+* based on cardinality and direction.
+*
+* - Owning one-to-one: solid, primary color
+* - Many-to-many (junction): solid, violet
+* - Inverse: dashed, muted
+* - Join path: dotted, muted
+*/
+var RelationEdgeInner = ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected }) => {
+	const edgeData = data;
+	const [edgePath, labelX, labelY] = getSmoothStepPath({
+		sourceX,
+		sourceY,
+		sourcePosition,
+		targetX,
+		targetY,
+		targetPosition,
+		borderRadius: 8
+	});
+	const isInverse = edgeData?.direction === "inverse";
+	const isJoinPath = edgeData?.hasJoinPath;
+	const isJunction = edgeData?.hasJunction;
+	let strokeColor = "var(--rf-edge-stroke, #94a3b8)";
+	let strokeDasharray;
+	let strokeWidth = 1.5;
+	if (selected) {
+		strokeColor = "var(--rf-edge-stroke-selected, #6366f1)";
+		strokeWidth = 2.5;
+	} else if (isJunction) strokeColor = "#8b5cf6";
+	else if (isInverse) {
+		strokeDasharray = "6 3";
+		strokeColor = "#94a3b8";
+	} else if (isJoinPath) {
+		strokeDasharray = "3 3";
+		strokeColor = "#94a3b8";
+	} else strokeColor = "#6366f1";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(BaseEdge, {
+		id,
+		path: edgePath,
+		style: {
+			stroke: strokeColor,
+			strokeWidth,
+			strokeDasharray
+		}
+	}), edgeData?.label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx("div", {
+		style: {
+			position: "absolute",
+			transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+			pointerEvents: "all"
+		},
+		className: cls("px-1.5 py-0.5 rounded text-[9px] font-mono font-semibold leading-none", "bg-white dark:bg-surface-900 border", selected ? "border-primary text-primary" : isJunction ? "border-violet-200 dark:border-violet-800 text-violet-600 dark:text-violet-400" : isInverse || isJoinPath ? "border-surface-200 dark:border-surface-700 text-text-disabled dark:text-text-disabled-dark" : "border-primary/30 dark:border-primary/30 text-primary"),
+		children: edgeData.label
+	}) })] });
+};
+var RelationEdge = memo(RelationEdgeInner);
+//#endregion
+//#region src/components/SchemaVisualizer/SchemaVisualizer.tsx
+var nodeTypes = { tableNode: TableNode };
+var edgeTypes = { relationEdge: RelationEdge };
+function SchemaVisualizerCanvas({ collections }) {
+	const reactFlowInstance = useReactFlow();
+	const { nodes: layoutedNodes, edges: layoutedEdges, direction, setDirection, relayout, tableCount, relationCount } = useSchemaGraph(collections);
+	const [nodes, setNodes] = useState([]);
+	const [edges, setEdges] = useState([]);
+	const [selectedTable, setSelectedTable] = useState(null);
+	const [searchQuery, setSearchQuery] = useState("");
+	const initialFitDone = useRef(false);
+	useEffect(() => {
+		setNodes(layoutedNodes);
+		setEdges(layoutedEdges);
+	}, [layoutedNodes, layoutedEdges]);
+	const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
+	const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+	useEffect(() => {
+		if (nodes.length > 0 && !initialFitDone.current) {
+			const timer = setTimeout(() => {
+				reactFlowInstance.fitView({
+					padding: .15,
+					duration: 400
+				});
+				initialFitDone.current = true;
+			}, 200);
+			return () => clearTimeout(timer);
+		}
+	}, [nodes.length, reactFlowInstance]);
+	const handleFitView = useCallback(() => {
+		reactFlowInstance.fitView({
+			padding: .15,
+			duration: 400
+		});
+	}, [reactFlowInstance]);
+	const handleNodeClick = useCallback((_, node) => {
+		setSelectedTable(node.id);
+	}, []);
+	const handlePaneClick = useCallback(() => {
+		setSelectedTable(null);
+	}, []);
+	const handleTableSelect = useCallback((nodeId) => {
+		setSelectedTable(nodeId);
+		const node = nodes.find((n) => n.id === nodeId);
+		if (node) reactFlowInstance.setCenter(node.position.x + 140, node.position.y + 60, {
+			zoom: 1.2,
+			duration: 400
+		});
+	}, [nodes, reactFlowInstance]);
+	const [sidebarSize, setSidebarSize] = useState(() => {
+		try {
+			const saved = localStorage.getItem("rebase_schema_viz_sidebar_size");
+			return saved !== null ? parseFloat(saved) : 20;
+		} catch {
+			return 20;
+		}
+	});
+	useEffect(() => {
+		try {
+			localStorage.setItem("rebase_schema_viz_sidebar_size", sidebarSize.toString());
+		} catch {}
+	}, [sidebarSize]);
+	const postgresCollections = useMemo(() => collections.filter(isPostgresCollection), [collections]);
+	const filteredCollections = useMemo(() => {
+		if (!searchQuery.trim()) return postgresCollections;
+		const q = searchQuery.toLowerCase();
+		return postgresCollections.filter((c) => c.name.toLowerCase().includes(q) || c.table?.toLowerCase().includes(q) || c.slug?.toLowerCase().includes(q));
+	}, [postgresCollections, searchQuery]);
+	const junctionNodes = useMemo(() => nodes.filter((n) => n.data.isJunction), [nodes]);
+	const stats = useMemo(() => ({
+		tables: tableCount,
+		relations: relationCount,
+		junctions: junctionNodes.length,
+		withRls: postgresCollections.filter((c) => isPostgresCollection(c) && c.securityRules && c.securityRules.length > 0).length
+	}), [
+		tableCount,
+		relationCount,
+		junctionNodes.length,
+		postgresCollections
+	]);
+	return /* @__PURE__ */ jsx(ResizablePanels, {
+		orientation: "horizontal",
+		panelSizePercent: sidebarSize,
+		onPanelSizeChange: setSidebarSize,
+		minPanelSizePx: 220,
+		firstPanel: /* @__PURE__ */ jsxs("div", {
+			className: cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", defaultBorderMixin),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin),
+					children: [/* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark",
+						children: "Tables"
+					}), /* @__PURE__ */ jsx(Typography, {
+						variant: "caption",
+						className: "text-[10px] text-text-disabled dark:text-text-disabled-dark font-mono",
+						children: stats.tables
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "px-2 py-1.5 border-b border-surface-200/40 dark:border-surface-700/40",
+					children: /* @__PURE__ */ jsx(SearchBar, {
+						size: "smallest",
+						placeholder: "Filter tables…",
+						onTextSearch: (val) => setSearchQuery(val ?? ""),
+						innerClassName: "text-xs"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex-grow overflow-y-auto no-scrollbar p-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "space-y-0.5",
+						children: filteredCollections.map((collection) => {
+							const table = collection.table ?? collection.slug;
+							const nodeId = `table-${table}`;
+							return /* @__PURE__ */ jsxs("div", {
+								onClick: () => handleTableSelect(nodeId),
+								className: cls("flex items-center p-1.5 cursor-pointer rounded transition-colors group", selectedTable === nodeId ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light" : "hover:bg-surface-100 dark:hover:bg-surface-950 text-text-secondary dark:text-text-secondary-dark"),
+								children: [
+									/* @__PURE__ */ jsx("div", {
+										className: "shrink-0 mr-1.5 text-text-disabled dark:text-text-disabled-dark",
+										children: /* @__PURE__ */ jsx(IconForView, {
+											collectionOrView: {
+												slug: collection.slug,
+												name: collection.name,
+												icon: typeof collection.icon === "string" ? collection.icon : void 0
+											},
+											size: "smallest"
+										})
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex flex-col min-w-0 flex-1",
+										children: [/* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											className: "text-xs truncate font-medium",
+											children: collection.name
+										}), table !== collection.name && /* @__PURE__ */ jsx(Typography, {
+											variant: "caption",
+											className: "text-[10px] text-text-disabled dark:text-text-disabled-dark font-mono truncate",
+											children: table
+										})]
+									}),
+									/* @__PURE__ */ jsxs("div", {
+										className: "flex items-center gap-1 shrink-0 ml-1",
+										children: [isPostgresCollection(collection) && collection.securityRules && collection.securityRules.length > 0 && /* @__PURE__ */ jsx(Tooltip, {
+											title: "RLS enabled",
+											children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" })
+										}), collection.history && /* @__PURE__ */ jsx(Tooltip, {
+											title: "History enabled",
+											children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-400" })
+										})]
+									})
+								]
+							}, nodeId);
+						})
+					}), junctionNodes.length > 0 && /* @__PURE__ */ jsxs("div", {
+						className: "mt-3",
+						children: [/* @__PURE__ */ jsx(Typography, {
+							variant: "caption",
+							className: "px-1.5 text-[10px] uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark font-medium",
+							children: "Junction Tables"
+						}), /* @__PURE__ */ jsx("div", {
+							className: "mt-1 space-y-0.5",
+							children: junctionNodes.map((node) => {
+								const d = node.data;
+								return /* @__PURE__ */ jsxs("div", {
+									onClick: () => handleTableSelect(node.id),
+									className: cls("flex items-center p-1.5 cursor-pointer rounded transition-colors", selectedTable === node.id ? "bg-primary/10 text-primary dark:bg-primary/20" : "hover:bg-surface-100 dark:hover:bg-surface-950 text-text-disabled dark:text-text-disabled-dark"),
+									children: [/* @__PURE__ */ jsx("svg", {
+										className: "w-3.5 h-3.5 mr-1.5 shrink-0",
+										fill: "none",
+										stroke: "currentColor",
+										viewBox: "0 0 24 24",
+										children: /* @__PURE__ */ jsx("path", {
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											strokeWidth: 2,
+											d: "M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
+										})
+									}), /* @__PURE__ */ jsx(Typography, {
+										variant: "caption",
+										className: "text-xs font-mono truncate",
+										children: d.tableName
+									})]
+								}, node.id);
+							})
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: cls("px-3 py-2 border-t bg-surface-50 dark:bg-surface-900 space-y-1", defaultBorderMixin),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "Tables"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] font-mono font-medium",
+								children: stats.tables
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "Relations"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] font-mono font-medium",
+								children: stats.relations
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "RLS protected"
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-1",
+								children: [/* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }), /* @__PURE__ */ jsx(Typography, {
+									variant: "caption",
+									className: "text-[10px] font-mono font-medium",
+									children: stats.withRls
+								})]
+							})]
+						})
+					]
+				})
+			]
+		}),
+		secondPanel: /* @__PURE__ */ jsxs("div", {
+			className: "flex-grow flex flex-col min-w-0 h-full w-full bg-white dark:bg-surface-950",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-950 min-h-[46px]", defaultBorderMixin),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-2 px-4",
+					children: /* @__PURE__ */ jsx(Typography, {
+						variant: "subtitle2",
+						className: "font-mono text-text-secondary dark:text-text-secondary-dark",
+						children: "Schema Visualizer"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center bg-surface-100 dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40",
+							children: [/* @__PURE__ */ jsx(Tooltip, {
+								title: "Left to right layout",
+								children: /* @__PURE__ */ jsx(Button, {
+									size: "small",
+									variant: direction === "LR" ? "filled" : "text",
+									color: direction === "LR" ? "primary" : "neutral",
+									onClick: () => setDirection("LR"),
+									className: "!rounded-r-none !px-2 !py-1 !text-[10px] !font-mono",
+									children: "LR"
+								})
+							}), /* @__PURE__ */ jsx(Tooltip, {
+								title: "Top to bottom layout",
+								children: /* @__PURE__ */ jsx(Button, {
+									size: "small",
+									variant: direction === "TB" ? "filled" : "text",
+									color: direction === "TB" ? "primary" : "neutral",
+									onClick: () => setDirection("TB"),
+									className: "!rounded-l-none !px-2 !py-1 !text-[10px] !font-mono",
+									children: "TB"
+								})
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-surface-200 dark:bg-surface-950 mx-0.5" }),
+						/* @__PURE__ */ jsx(Tooltip, {
+							title: "Fit to view",
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "small",
+								onClick: handleFitView,
+								children: /* @__PURE__ */ jsx("svg", {
+									className: "w-4 h-4",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ jsx("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
+									})
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx(Tooltip, {
+							title: "Re-layout",
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: "small",
+								onClick: relayout,
+								children: /* @__PURE__ */ jsx("svg", {
+									className: "w-4 h-4",
+									fill: "none",
+									stroke: "currentColor",
+									viewBox: "0 0 24 24",
+									children: /* @__PURE__ */ jsx("path", {
+										strokeLinecap: "round",
+										strokeLinejoin: "round",
+										strokeWidth: 2,
+										d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+									})
+								})
+							})
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-grow relative",
+				children: [/* @__PURE__ */ jsxs(ReactFlow, {
+					nodes,
+					edges,
+					onNodesChange,
+					onEdgesChange,
+					onNodeClick: handleNodeClick,
+					onPaneClick: handlePaneClick,
+					nodeTypes,
+					edgeTypes,
+					fitView: true,
+					fitViewOptions: { padding: .15 },
+					minZoom: .1,
+					maxZoom: 2,
+					proOptions: { hideAttribution: true },
+					className: "bg-surface-50 dark:bg-surface-950",
+					children: [
+						/* @__PURE__ */ jsx(Background, {
+							variant: BackgroundVariant.Dots,
+							gap: 20,
+							size: 1,
+							className: "!bg-surface-50 dark:!bg-surface-950",
+							color: "var(--rf-bg-dot, #d4d4d8)"
+						}),
+						/* @__PURE__ */ jsx(Controls, {
+							showInteractive: false,
+							className: "!bg-white dark:!bg-surface-900 !border !border-surface-200/40 dark:!border-surface-700/40 !shadow-sm !rounded-lg"
+						}),
+						/* @__PURE__ */ jsx(MiniMap, {
+							nodeStrokeColor: (n) => {
+								const d = n.data;
+								if (d.isJunction) return "#a78bfa";
+								if (d.rlsEnabled) return "#22c55e";
+								return "#6366f1";
+							},
+							nodeColor: (n) => {
+								if (n.data.isJunction) return "#ede9fe";
+								return "#eef2ff";
+							},
+							maskColor: "rgba(0,0,0,0.08)",
+							className: "!bg-white dark:!bg-surface-900 !border !border-surface-200/40 dark:!border-surface-700/40 !shadow-sm !rounded-lg"
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "absolute bottom-4 left-4 flex items-center gap-3 px-3 py-2 bg-white/90 dark:bg-surface-900/90 backdrop-blur-sm rounded-lg border border-surface-200/40 dark:border-surface-700/40 shadow-sm",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ jsx("div", { className: "w-6 h-0.5 bg-indigo-500 rounded" }), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "Owning"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ jsx("div", { className: "w-6 h-0.5 bg-violet-500 rounded" }), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "M:N"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ jsx("div", {
+								className: "w-6 h-0.5 rounded",
+								style: { backgroundImage: "repeating-linear-gradient(90deg, #94a3b8, #94a3b8 4px, transparent 4px, transparent 7px)" }
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "Inverse"
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "h-3 w-px bg-surface-200 dark:bg-surface-700" }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-[9px]",
+								children: "🔑"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "PK"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-[9px]",
+								children: "🔗"
+							}), /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-[10px] text-text-disabled dark:text-text-disabled-dark",
+								children: "FK"
+							})]
+						})
+					]
+				})]
+			})]
+		})
+	});
+}
+var SchemaVisualizer = () => {
+	const { collections: registryCollections } = useStudioCollectionRegistry();
+	const collections = useMemo(() => {
+		return registryCollections ?? [];
+	}, [registryCollections]);
+	if (!collections || collections.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center h-full w-full",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center space-y-3",
+			children: [/* @__PURE__ */ jsx(CircularProgress, { size: "small" }), /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				color: "secondary",
+				children: "Loading schema…"
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full w-full bg-white dark:bg-surface-950 overflow-hidden text-text-primary dark:text-text-primary-dark",
+		children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(SchemaVisualizerCanvas, { collections }) })
+	});
+};
+//#endregion
+export { SchemaVisualizer };
+
+//# sourceMappingURL=SchemaVisualizer-BJK2u3C0.js.map