@rebasepro/studio 0.5.0 → 0.6.1

package/dist/SchemaVisualizer-BGpmzyXT.js

@@ -1,1069 +0,0 @@
-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, Button, IconButton, defaultBorderMixin, SearchBar } 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(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_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, { 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: 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-BGpmzyXT.js.map