@rebasepro/studio 0.0.1-canary.09e5ec5

package/dist/SchemaVisualizer-BgD5Zb77.js

@@ -0,0 +1,1069 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+import { useState, useCallback, useEffect, useMemo, memo, useRef } from "react";
+import { MarkerType, Position, Handle, getSmoothStepPath, EdgeLabelRenderer, BaseEdge, ReactFlowProvider, useReactFlow, applyNodeChanges, applyEdgeChanges, ReactFlow, Background, BackgroundVariant, Controls, MiniMap } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { cls, Tooltip, Typography, Chip, CircularProgress, ResizablePanels, IconButton, defaultBorderMixin, TextField } from "@rebasepro/ui";
+import { IconForView, useStudioCollectionRegistry } from "@rebasepro/core";
+import { isPostgresCollection } from "@rebasepro/types";
+import { resolveCollectionRelations } from "@rebasepro/common";
+import dagre from "dagre";
+const NODE_WIDTH = 280;
+const HEADER_HEIGHT_SINGLE = 33;
+const HEADER_HEIGHT_DOUBLE = 47;
+const ROW_HEIGHT = 28;
+const getHeaderHeight = (opts) => {
+  if (opts.isJunction) return HEADER_HEIGHT_SINGLE;
+  return opts.collectionName !== opts.tableName ? HEADER_HEIGHT_DOUBLE : HEADER_HEIGHT_SINGLE;
+};
+const estimateNodeHeight = (columnCount, headerHeight = HEADER_HEIGHT_DOUBLE) => headerHeight + Math.max(columnCount, 1) * ROW_HEIGHT + 4;
+const getColumnRowY = (rowIndex, headerHeight = HEADER_HEIGHT_DOUBLE) => headerHeight + rowIndex * ROW_HEIGHT + ROW_HEIGHT / 2;
+const 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 columnCount = data.columns?.length ?? 3;
+    const headerH = getHeaderHeight({
+      isJunction: Boolean(data.isJunction),
+      collectionName: data.collectionName ?? "",
+      tableName: data.tableName ?? ""
+    });
+    const h = estimateNodeHeight(columnCount, headerH);
+    nodeHeights.set(node.id, h);
+    g.setNode(node.id, {
+      width: NODE_WIDTH,
+      height: h
+    });
+  });
+  edges.forEach((edge) => {
+    g.setEdge(edge.source, edge.target);
+  });
+  dagre.layout(g);
+  const layoutedNodes = 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 - NODE_WIDTH / 2,
+        y: nodeWithPosition.y - h / 2
+      }
+    };
+  });
+  return {
+    nodes: layoutedNodes,
+    edges
+  };
+};
+const TYPE_LABELS = {
+  string: "varchar",
+  number: "integer",
+  boolean: "boolean",
+  date: "timestamp",
+  map: "jsonb",
+  array: "jsonb",
+  relation: "FK"
+};
+const getTypeLabel = (type) => TYPE_LABELS[type] ?? type;
+const getCardinalityLabel = (cardinality, direction) => {
+  if (cardinality === "many") return "M:N";
+  if (direction === "inverse") return "1:1 ←";
+  return "N:1";
+};
+const 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((c2) => c2.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((c2) => c2.name === rel.localKey);
+            if (existing) {
+              existing.isForeignKey = true;
+              existing.relationName = rel.relationName;
+            }
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  return columns;
+};
+const buildGraph = (collections, direction) => {
+  const nodes = [];
+  const edges = [];
+  const tableToNodeId = /* @__PURE__ */ new Map();
+  const nodeColumns = /* @__PURE__ */ new Map();
+  const getPkHandle = (nodeId) => {
+    const cols = nodeColumns.get(nodeId);
+    const pk = cols?.find((c2) => c2.isPrimaryKey);
+    return pk ? `target-${pk.name}` : "target-default";
+  };
+  const getFkHandle = (nodeId, localKey) => {
+    if (!localKey) return "source-default";
+    const cols = nodeColumns.get(nodeId);
+    const fk = cols?.find((c2) => c2.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((c2) => c2.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 srcCenterX = srcPos.x + NODE_WIDTH / 2;
+      const tgtCenterX = tgtPos.x + NODE_WIDTH / 2;
+      const sourceIsLeft = srcCenterX <= tgtCenterX;
+      edge.sourceHandle = `${srcBaseHandle}-${sourceIsLeft ? "right" : "left"}`;
+      edge.targetHandle = `${tgtBaseHandle}-${sourceIsLeft ? "left" : "right"}`;
+    } else {
+      edge.sourceHandle = `${srcBaseHandle}-right`;
+      edge.targetHandle = `${tgtBaseHandle}-left`;
+    }
+  }
+  return layoutResult;
+};
+const 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
+  };
+};
+const TableNodeInner = (t0) => {
+  const $ = c(61);
+  const {
+    data,
+    selected
+  } = t0;
+  const {
+    tableName,
+    collectionName,
+    columns,
+    isJunction,
+    rlsEnabled,
+    historyEnabled,
+    icon
+  } = data;
+  let t1;
+  let result;
+  if ($[0] !== collectionName || $[1] !== columns || $[2] !== isJunction || $[3] !== tableName) {
+    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
+        });
+      }
+    });
+    let t23;
+    if ($[5] !== midY) {
+      t23 = {
+        id: "target-default-right",
+        type: "target",
+        position: Position.Right,
+        top: midY
+      };
+      $[5] = midY;
+      $[6] = t23;
+    } else {
+      t23 = $[6];
+    }
+    result.push(t23);
+    let t32;
+    if ($[7] !== midY) {
+      t32 = {
+        id: "target-default-left",
+        type: "target",
+        position: Position.Left,
+        top: midY
+      };
+      $[7] = midY;
+      $[8] = t32;
+    } else {
+      t32 = $[8];
+    }
+    result.push(t32);
+    let t42;
+    if ($[9] !== midY) {
+      t42 = {
+        id: "source-default-right",
+        type: "source",
+        position: Position.Right,
+        top: midY
+      };
+      $[9] = midY;
+      $[10] = t42;
+    } else {
+      t42 = $[10];
+    }
+    result.push(t42);
+    let t52;
+    if ($[11] !== midY) {
+      t52 = {
+        id: "source-default-left",
+        type: "source",
+        position: Position.Left,
+        top: midY
+      };
+      $[11] = midY;
+      $[12] = t52;
+    } else {
+      t52 = $[12];
+    }
+    result.push(t52);
+    $[0] = collectionName;
+    $[1] = columns;
+    $[2] = isJunction;
+    $[3] = tableName;
+    $[4] = result;
+  } else {
+    result = $[4];
+  }
+  t1 = result;
+  const handles = t1;
+  const t2 = 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";
+  const t3 = isJunction && "border-dashed";
+  let t4;
+  if ($[13] !== t2 || $[14] !== t3) {
+    t4 = cls("relative rounded-lg border bg-white dark:bg-surface-900 shadow-sm transition-all duration-200 min-w-[240px] max-w-[320px]", t2, t3);
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  const t5 = 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";
+  let t6;
+  if ($[16] !== t5) {
+    t6 = cls("flex items-center gap-2 px-3 py-2 border-b rounded-t-lg", t5);
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== collectionName || $[19] !== icon || $[20] !== isJunction || $[21] !== tableName) {
+    t7 = icon && !isJunction && /* @__PURE__ */ jsx("div", { className: "text-primary shrink-0", children: /* @__PURE__ */ jsx(IconForView, { collectionOrView: {
+      slug: tableName,
+      name: collectionName,
+      icon
+    }, size: "smallest" }) });
+    $[18] = collectionName;
+    $[19] = icon;
+    $[20] = isJunction;
+    $[21] = tableName;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
+  }
+  let t8;
+  if ($[23] !== isJunction) {
+    t8 = 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" }) });
+    $[23] = isJunction;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  const t9 = isJunction ? "text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark";
+  let t10;
+  if ($[25] !== t9) {
+    t10 = cls("font-semibold truncate text-[12px]", t9);
+    $[25] = t9;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== t10 || $[28] !== tableName) {
+    t11 = /* @__PURE__ */ jsx(Typography, { variant: "caption", className: t10, children: tableName });
+    $[27] = t10;
+    $[28] = tableName;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  let t12;
+  if ($[30] !== collectionName || $[31] !== isJunction || $[32] !== tableName) {
+    t12 = collectionName !== tableName && !isJunction && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[10px] text-text-disabled dark:text-text-disabled-dark truncate", children: collectionName });
+    $[30] = collectionName;
+    $[31] = isJunction;
+    $[32] = tableName;
+    $[33] = t12;
+  } else {
+    t12 = $[33];
+  }
+  let t13;
+  if ($[34] !== t11 || $[35] !== t12) {
+    t13 = /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+      t11,
+      t12
+    ] });
+    $[34] = t11;
+    $[35] = t12;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  let t14;
+  if ($[37] !== rlsEnabled) {
+    t14 = rlsEnabled && /* @__PURE__ */ jsx(Tooltip, { title: "RLS enabled", children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-green-500" }) });
+    $[37] = rlsEnabled;
+    $[38] = t14;
+  } else {
+    t14 = $[38];
+  }
+  let t15;
+  if ($[39] !== historyEnabled) {
+    t15 = historyEnabled && /* @__PURE__ */ jsx(Tooltip, { title: "History enabled", children: /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-400" }) });
+    $[39] = historyEnabled;
+    $[40] = t15;
+  } else {
+    t15 = $[40];
+  }
+  let t16;
+  if ($[41] !== t14 || $[42] !== t15) {
+    t16 = /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-1 shrink-0", children: [
+      t14,
+      t15
+    ] });
+    $[41] = t14;
+    $[42] = t15;
+    $[43] = t16;
+  } else {
+    t16 = $[43];
+  }
+  let t17;
+  if ($[44] !== t13 || $[45] !== t16 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
+    t17 = /* @__PURE__ */ jsxs("div", { className: t6, children: [
+      t7,
+      t8,
+      t13,
+      t16
+    ] });
+    $[44] = t13;
+    $[45] = t16;
+    $[46] = t6;
+    $[47] = t7;
+    $[48] = t8;
+    $[49] = t17;
+  } else {
+    t17 = $[49];
+  }
+  const t18 = columns;
+  let t19;
+  if ($[50] !== t18) {
+    t19 = t18.map(_temp);
+    $[50] = t18;
+    $[51] = t19;
+  } else {
+    t19 = $[51];
+  }
+  let t20;
+  if ($[52] !== t19) {
+    t20 = /* @__PURE__ */ jsx("div", { className: "divide-y divide-surface-100 dark:divide-surface-950/60", children: t19 });
+    $[52] = t19;
+    $[53] = t20;
+  } else {
+    t20 = $[53];
+  }
+  let t21;
+  if ($[54] !== handles) {
+    t21 = handles.map(_temp2);
+    $[54] = handles;
+    $[55] = t21;
+  } else {
+    t21 = $[55];
+  }
+  let t22;
+  if ($[56] !== t17 || $[57] !== t20 || $[58] !== t21 || $[59] !== t4) {
+    t22 = /* @__PURE__ */ jsxs("div", { className: t4, children: [
+      t17,
+      t20,
+      t21
+    ] });
+    $[56] = t17;
+    $[57] = t20;
+    $[58] = t21;
+    $[59] = t4;
+    $[60] = t22;
+  } else {
+    t22 = $[60];
+  }
+  return t22;
+};
+const TableNode = memo(TableNodeInner);
+function _temp(col_0) {
+  return /* @__PURE__ */ jsxs("div", { className: cls("flex items-center gap-2 px-3 py-1.5 text-xs transition-colors", col_0.isPrimaryKey && "bg-amber-50/50 dark:bg-amber-950/10", col_0.isForeignKey && !col_0.isPrimaryKey && "bg-blue-50/40 dark:bg-blue-950/10"), children: [
+    /* @__PURE__ */ jsxs("span", { className: "w-3 shrink-0 text-center", children: [
+      col_0.isPrimaryKey && /* @__PURE__ */ jsx(Tooltip, { title: "Primary Key", children: /* @__PURE__ */ jsx("span", { className: "text-amber-500 text-[10px] font-bold", children: "🔑" }) }),
+      col_0.isForeignKey && !col_0.isPrimaryKey && /* @__PURE__ */ jsx(Tooltip, { title: `FK → ${col_0.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_0.isPrimaryKey ? "font-semibold text-amber-700 dark:text-amber-400" : col_0.isForeignKey ? "text-blue-600 dark:text-blue-400" : "text-text-primary dark:text-text-primary-dark"), children: col_0.name }),
+    col_0.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_0.typeLabel }),
+    col_0.isRequired && !col_0.isPrimaryKey && /* @__PURE__ */ jsx(Tooltip, { title: "Required", children: /* @__PURE__ */ jsx("span", { className: "text-red-400 text-[9px]", children: "•" }) })
+  ] }, col_0.name);
+}
+function _temp2(h) {
+  return /* @__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);
+}
+const RelationEdgeInner = (t0) => {
+  const $ = c(26);
+  const {
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    data,
+    selected
+  } = t0;
+  const edgeData = data;
+  let t1;
+  if ($[0] !== sourcePosition || $[1] !== sourceX || $[2] !== sourceY || $[3] !== targetPosition || $[4] !== targetX || $[5] !== targetY) {
+    t1 = getSmoothStepPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      borderRadius: 8
+    });
+    $[0] = sourcePosition;
+    $[1] = sourceX;
+    $[2] = sourceY;
+    $[3] = targetPosition;
+    $[4] = targetX;
+    $[5] = targetY;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const [edgePath, labelX, labelY] = t1;
+  const isInverse = edgeData?.direction === "inverse";
+  const isJoinPath = edgeData?.hasJoinPath;
+  const isJunction = edgeData?.hasJunction;
+  let strokeColor;
+  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";
+        }
+      }
+    }
+  }
+  let t2;
+  if ($[7] !== strokeColor || $[8] !== strokeDasharray || $[9] !== strokeWidth) {
+    t2 = {
+      stroke: strokeColor,
+      strokeWidth,
+      strokeDasharray
+    };
+    $[7] = strokeColor;
+    $[8] = strokeDasharray;
+    $[9] = strokeWidth;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== edgePath || $[12] !== id || $[13] !== t2) {
+    t3 = /* @__PURE__ */ jsx(BaseEdge, { id, path: edgePath, style: t2 });
+    $[11] = edgePath;
+    $[12] = id;
+    $[13] = t2;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== edgeData || $[16] !== isInverse || $[17] !== isJoinPath || $[18] !== isJunction || $[19] !== labelX || $[20] !== labelY || $[21] !== selected) {
+    t4 = 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 }) });
+    $[15] = edgeData;
+    $[16] = isInverse;
+    $[17] = isJoinPath;
+    $[18] = isJunction;
+    $[19] = labelX;
+    $[20] = labelY;
+    $[21] = selected;
+    $[22] = t4;
+  } else {
+    t4 = $[22];
+  }
+  let t5;
+  if ($[23] !== t3 || $[24] !== t4) {
+    t5 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t3,
+      t4
+    ] });
+    $[23] = t3;
+    $[24] = t4;
+    $[25] = t5;
+  } else {
+    t5 = $[25];
+  }
+  return t5;
+};
+const RelationEdge = memo(RelationEdgeInner);
+const nodeTypes = {
+  tableNode: TableNode
+};
+const 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_0) => setEdges((eds) => applyEdgeChanges(changes_0, eds)), []);
+  useEffect(() => {
+    if (nodes.length > 0 && !initialFitDone.current) {
+      const timer = setTimeout(() => {
+        reactFlowInstance.fitView({
+          padding: 0.15,
+          duration: 400
+        });
+        initialFitDone.current = true;
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+    return void 0;
+  }, [nodes.length, reactFlowInstance]);
+  const handleFitView = useCallback(() => {
+    reactFlowInstance.fitView({
+      padding: 0.15,
+      duration: 400
+    });
+  }, [reactFlowInstance]);
+  const handleNodeClick = useCallback((_, node) => {
+    setSelectedTable(node.id);
+  }, []);
+  const handlePaneClick = useCallback(() => {
+    setSelectedTable(null);
+  }, []);
+  const handleTableSelect = useCallback((nodeId) => {
+    setSelectedTable(nodeId);
+    const node_0 = nodes.find((n) => n.id === nodeId);
+    if (node_0) {
+      reactFlowInstance.setCenter(node_0.position.x + 140, node_0.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((c2) => c2.name.toLowerCase().includes(q) || c2.table?.toLowerCase().includes(q) || c2.slug?.toLowerCase().includes(q));
+  }, [postgresCollections, searchQuery]);
+  const junctionNodes = useMemo(() => nodes.filter((n_0) => n_0.data.isJunction), [nodes]);
+  const stats = useMemo(() => ({
+    tables: tableCount,
+    relations: relationCount,
+    junctions: junctionNodes.length,
+    withRls: postgresCollections.filter((c_0) => isPostgresCollection(c_0) && c_0.securityRules && c_0.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(TextField, { size: "smallest", placeholder: "Filter tables…", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), inputClassName: "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_0 = `table-${table}`;
+        const isSelected = selectedTable === nodeId_0;
+        return /* @__PURE__ */ jsxs("div", { onClick: () => handleTableSelect(nodeId_0), className: cls("flex items-center p-1.5 cursor-pointer rounded transition-colors group", isSelected ? "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_0);
+      }) }),
+      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_1) => {
+          const d = node_1.data;
+          const isSelected_0 = selectedTable === node_1.id;
+          return /* @__PURE__ */ jsxs("div", { onClick: () => handleTableSelect(node_1.id), className: cls("flex items-center p-1.5 cursor-pointer rounded transition-colors", isSelected_0 ? "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_1.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", { onClick: () => setDirection("LR"), className: cls("px-2 py-1 text-[10px] font-mono rounded-l-md transition-colors", direction === "LR" ? "bg-primary text-white" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-700"), children: "LR" }) }),
+          /* @__PURE__ */ jsx(Tooltip, { title: "Top to bottom layout", children: /* @__PURE__ */ jsx("button", { onClick: () => setDirection("TB"), className: cls("px-2 py-1 text-[10px] font-mono rounded-r-md transition-colors", direction === "TB" ? "bg-primary text-white" : "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-200 dark:hover:bg-surface-700"), 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: 0.15
+      }, minZoom: 0.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_1) => {
+          const d_0 = n_1.data;
+          if (d_0.isJunction) return "#a78bfa";
+          if (d_0.rlsEnabled) return "#22c55e";
+          return "#6366f1";
+        }, nodeColor: (n_2) => {
+          const d_1 = n_2.data;
+          if (d_1.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" })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+const SchemaVisualizer = () => {
+  const $ = c(5);
+  const {
+    collections: registryCollections
+  } = useStudioCollectionRegistry();
+  let t0;
+  let t1;
+  if ($[0] !== registryCollections) {
+    t1 = registryCollections ?? [];
+    $[0] = registryCollections;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  t0 = t1;
+  const collections = t0;
+  if (!collections || collections.length === 0) {
+    let t22;
+    if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+      t22 = /* @__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…" })
+      ] }) });
+      $[2] = t22;
+    } else {
+      t22 = $[2];
+    }
+    return t22;
+  }
+  let t2;
+  if ($[3] !== collections) {
+    t2 = /* @__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 }) }) });
+    $[3] = collections;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+};
+export {
+  SchemaVisualizer
+};
+//# sourceMappingURL=SchemaVisualizer-BgD5Zb77.js.map