admindb 2.1.1 → 2.3.0

package/dist/views/pages/erd.hbs

@@ -0,0 +1 @@
+<div class="flex flex-col" style="height: calc(100vh - 120px); min-height: 500px;">
  <div class="mb-3 flex flex-wrap items-center gap-2">
    <div class="flex items-center gap-2">
      <h1 class="text-xl font-bold">ER Diagram</h1>
      <span id="erd-table-badge" class="hidden rounded-full bg-primary/15 px-2 py-0.5 text-xs font-semibold text-primary"></span>
      <span id="erd-fk-badge" class="hidden rounded-full bg-amber-500/15 px-2 py-0.5 text-xs font-semibold text-amber-600"></span>
    </div>
    <div class="ml-auto flex flex-wrap items-center gap-1.5">
      <div class="relative">
        {{{icon "search" class="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-base-content/40"}}}
        <input id="erd-search" type="search" placeholder="Find table…" autocomplete="off"
          class="h-8 w-36 rounded-lg border border-base-300 bg-base-100 pl-7 pr-2 text-xs outline-none transition focus:border-primary/60 focus:ring-2 focus:ring-primary/20" />
      </div>
      <div class="h-5 w-px bg-base-300"></div>
      <button id="erd-btn-compact" title="Toggle compact mode (C)" class="btn btn-sm btn-ghost gap-1.5 font-normal">
        {{{icon "compact" class="h-4 w-4"}}}
        Compact
      </button>
      <button id="erd-btn-fit" title="Fit to screen (F)" class="btn btn-sm btn-ghost gap-1.5 font-normal">
        {{{icon "fit" class="h-4 w-4"}}}
        Fit
      </button>
      <div class="flex items-center rounded-lg border border-base-300 bg-base-100 p-0.5 gap-0.5" title="Layout mode (L to cycle)">
        <button id="erd-mode-force" class="erd-mode-btn rounded-md px-2.5 py-1 text-xs font-semibold transition-all gap-1.5 flex items-center" data-mode="force" title="Force-directed (physics)">
          {{{icon "layoutForce" class="h-3.5 w-3.5"}}}
          Force
        </button>
        <button id="erd-mode-hierarchy" class="erd-mode-btn rounded-md px-2.5 py-1 text-xs font-semibold transition-all gap-1.5 flex items-center" data-mode="hierarchy" title="Hierarchical (reference tables left)">
          {{{icon "layoutHierarchy" class="h-3.5 w-3.5"}}}
          Hierarchy
        </button>
        <button id="erd-mode-circle" class="erd-mode-btn rounded-md px-2.5 py-1 text-xs font-semibold transition-all gap-1.5 flex items-center" data-mode="circle" title="Circular layout">
          {{{icon "layoutCircle" class="h-3.5 w-3.5"}}}
          Circle
        </button>
      </div>
      <button id="erd-btn-export-svg" title="Download as SVG" class="btn btn-sm btn-ghost gap-1.5 font-normal">
        {{{icon "export" class="h-4 w-4"}}}
        Export
      </button>
      <div class="h-5 w-px bg-base-300"></div>
      <div class="flex items-center gap-0.5 rounded-lg border border-base-300 bg-base-100 px-1.5 py-1">
        <button id="erd-btn-zoom-out" class="rounded px-1 py-0.5 hover:bg-base-200 transition-colors text-base-content/60" title="Zoom out (−)">
          {{{icon "minus" class="h-3.5 w-3.5"}}}
        </button>
        <span id="erd-zoom-label" class="w-12 text-center text-xs font-mono font-semibold tabular-nums">100%</span>
        <button id="erd-btn-zoom-in" class="rounded px-1 py-0.5 hover:bg-base-200 transition-colors text-base-content/60" title="Zoom in (+)">
          {{{icon "plus" class="h-3.5 w-3.5"}}}
        </button>
      </div>
    </div>
  </div>
  <div class="flex flex-1 gap-3 min-h-0">
    <div id="erd-canvas-wrap" class="relative flex-1 overflow-hidden rounded-xl border border-base-300 shadow-inner" style="cursor: grab; min-width:0;">
      <div id="erd-loading" class="absolute inset-0 flex flex-col items-center justify-center gap-3 z-20 bg-base-100/80 backdrop-blur-sm">
        {{{icon "spinner" class="animate-spin h-8 w-8 text-primary"}}}
        <span class="text-sm text-base-content/60 font-medium">Loading schema…</span>
      </div>
      <div id="erd-error" class="absolute inset-0 hidden flex-col items-center justify-center gap-3 z-20">
        <div class="rounded-full bg-error/10 p-4">
          {{{icon "warning" class="h-8 w-8 text-error"}}}
        </div>
        <p id="erd-error-msg" class="text-sm text-error font-medium"></p>
      </div>
      <div id="erd-empty" class="absolute inset-0 hidden flex-col items-center justify-center gap-3 z-20">
        <div class="rounded-full bg-base-200 p-6">
          {{{icon "diagram" class="h-10 w-10 text-base-content/30"}}}
        </div>
        <p class="text-base-content/40 text-sm font-medium">No tables found in this database</p>
      </div>
      <svg id="erd-svg" width="100%" height="100%" style="display:none; user-select:none;" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <marker id="erd-arrow" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
            <path d="M0,0 L0,6 L8,3 z" fill="var(--erd-edge-color)"/>
          </marker>
          <marker id="erd-arrow-hl" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
            <path d="M0,0 L0,6 L8,3 z" fill="var(--erd-edge-hl)"/>
          </marker>
          <marker id="erd-arrow-dim" markerWidth="8" markerHeight="8" refX="7" refY="3" orient="auto">
            <path d="M0,0 L0,6 L8,3 z" fill="var(--erd-edge-dim)"/>
          </marker>
          <marker id="erd-cf-one" markerWidth="12" markerHeight="12" refX="2" refY="6" orient="auto">
            <line x1="2" y1="1" x2="2" y2="11" stroke="var(--erd-edge-color)" stroke-width="1.5"/>
            <line x1="5" y1="1" x2="5" y2="11" stroke="var(--erd-edge-color)" stroke-width="1.5"/>
          </marker>
          <filter id="erd-glow" x="-30%" y="-30%" width="160%" height="160%">
            <feGaussianBlur stdDeviation="4" result="blur"/>
            <feFlood flood-color="var(--erd-node-header)" flood-opacity="0.35" result="color"/>
            <feComposite in="color" in2="blur" operator="in" result="glow"/>
            <feMerge><feMergeNode in="glow"/><feMergeNode in="SourceGraphic"/></feMerge>
          </filter>
          <filter id="erd-shadow" x="-15%" y="-15%" width="130%" height="130%">
            <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.10"/>
          </filter>
          <filter id="erd-shadow-lg" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="0" dy="6" stdDeviation="12" flood-color="#000" flood-opacity="0.20"/>
          </filter>
        </defs>
        <g id="erd-viewport">
          <g id="erd-edges"></g>
          <g id="erd-nodes"></g>
        </g>
      </svg>
      <div id="erd-edge-tooltip" class="pointer-events-none absolute hidden z-30 rounded-lg border border-base-300 bg-base-100 px-2.5 py-1.5 shadow-xl text-xs font-mono"></div>
      <div id="erd-minimap" class="absolute bottom-3 right-3 hidden rounded-xl border border-base-300/80 bg-base-100/95 backdrop-blur-sm shadow-xl overflow-hidden" style="width:168px;height:108px;">
        <div class="absolute inset-x-0 top-0 flex items-center justify-between px-2 py-0.5 bg-base-200/80 text-[9px] font-semibold uppercase tracking-wider text-base-content/40">
          <span>Overview</span>
        </div>
        <svg id="erd-minimap-svg" width="168" height="108" xmlns="http://www.w3.org/2000/svg" style="margin-top:16px;height:92px;"></svg>
      </div>
      <div id="erd-ctx-menu" class="absolute hidden z-50 rounded-xl border border-base-300 bg-base-100 shadow-2xl py-1.5 w-48 text-sm">
        <div class="px-3 pb-1.5 pt-0.5 text-[10px] font-semibold uppercase tracking-wider text-base-content/40" id="erd-ctx-title"></div>
        <a id="erd-ctx-browse" href="#" class="flex items-center gap-2 px-3 py-1.5 hover:bg-base-200 transition-colors text-base-content/80">
          {{{icon "table" class="h-3.5 w-3.5 shrink-0"}}}
          Browse rows
        </a>
        <a id="erd-ctx-schema" href="#" class="flex items-center gap-2 px-3 py-1.5 hover:bg-base-200 transition-colors text-base-content/80">
          {{{icon "schema" class="h-3.5 w-3.5 shrink-0"}}}
          Edit schema
        </a>
        <a id="erd-ctx-seed" href="#" class="flex items-center gap-2 px-3 py-1.5 hover:bg-base-200 transition-colors text-emerald-600 font-medium">
          {{{icon "seed" class="h-3.5 w-3.5 shrink-0 text-emerald-500"}}}
          Seed ER Chain…
        </a>
        <div class="my-1 border-t border-base-200"></div>
        <button id="erd-ctx-focus" class="flex w-full items-center gap-2 px-3 py-1.5 hover:bg-base-200 transition-colors text-base-content/80">
          {{{icon "focus" class="h-3.5 w-3.5 shrink-0"}}}
          Focus & zoom
        </button>
        <button id="erd-ctx-collapse" class="flex w-full items-center gap-2 px-3 py-1.5 hover:bg-base-200 transition-colors text-base-content/80">
          {{{icon "chevronUp" class="h-3.5 w-3.5 shrink-0"}}}
          <span id="erd-ctx-collapse-label">Collapse table</span>
        </button>
      </div>
      <div class="absolute bottom-3 left-3 flex flex-col gap-0.5 pointer-events-none select-none">
        <span class="text-[10px] text-base-content/25 leading-relaxed">Scroll · zoom &nbsp;·&nbsp; Drag · pan &nbsp;·&nbsp; Click · select &nbsp;·&nbsp; Right-click · menu</span>
      </div>
    </div>
    <div id="erd-side-panel" class="hidden w-72 shrink-0 flex-col gap-3 overflow-y-auto" style="max-height: calc(100vh - 180px);">
      <div class="rounded-xl border border-base-300 bg-base-100 overflow-hidden">
        <div id="erd-panel-header" class="flex items-center justify-between gap-2 px-4 py-3" style="background: var(--erd-node-header); color:#fff;">
          <div class="flex items-center gap-2 min-w-0">
            {{{icon "table" class="h-4 w-4 shrink-0 opacity-80"}}}
            <span class="font-bold text-sm truncate" id="erd-panel-name"></span>
          </div>
          <button id="erd-panel-close" class="shrink-0 rounded-full p-1 hover:bg-white/20 transition-colors">
            {{{icon "x" class="h-4 w-4"}}}
          </button>
        </div>
        <div id="erd-panel-stats" class="flex divide-x divide-base-200 border-b border-base-200 text-center text-xs">
          <div class="flex-1 py-2"><div class="font-bold text-sm" id="erd-panel-col-count"></div><div class="text-base-content/40">columns</div></div>
          <div class="flex-1 py-2"><div class="font-bold text-sm text-amber-500" id="erd-panel-fk-count"></div><div class="text-base-content/40">FK refs</div></div>
          <div class="flex-1 py-2"><div class="font-bold text-sm text-emerald-500" id="erd-panel-ref-count"></div><div class="text-base-content/40">referenced</div></div>
        </div>
        <div id="erd-panel-cols" class="divide-y divide-base-100 text-xs"></div>
        <div class="flex gap-2 p-3 border-t border-base-200">
          <a id="erd-panel-browse" href="#" class="btn btn-xs btn-primary flex-1 gap-1">
            {{{icon "table" class="h-3 w-3"}}}
            Browse
          </a>
          <a id="erd-panel-schema" href="#" class="btn btn-xs btn-ghost flex-1 gap-1 border border-base-300">
            {{{icon "schema" class="h-3 w-3"}}}
            Schema
          </a>
          <a id="erd-panel-seed" href="#" class="btn btn-xs btn-outline btn-success flex-1 gap-1">
            {{{icon "seed" class="h-3 w-3"}}}
            Seed
          </a>
        </div>
      </div>
      <div id="erd-panel-rels" class="hidden rounded-xl border border-base-300 bg-base-100 overflow-hidden">
        <div class="px-4 py-2.5 border-b border-base-200 text-[11px] font-semibold uppercase tracking-wider text-base-content/40">Relationships</div>
        <div id="erd-panel-rels-list" class="divide-y divide-base-100 text-xs p-1"></div>
      </div>
    </div>
  </div>
  :root {
    --erd-node-bg: #ffffff;
    --erd-node-border: #e2e8f0;
    --erd-node-header: #6366f1;
    --erd-node-header-text: #ffffff;
    --erd-node-text: #1e293b;
    --erd-node-subtext: #94a3b8;
    --erd-node-row-odd: #f8fafc;
    --erd-node-row-even: #ffffff;
    --erd-node-row-pk: #eef2ff;
    --erd-node-row-fk: #fffbeb;
    --erd-edge-color: #818cf8;
    --erd-edge-hl: #f59e0b;
    --erd-edge-dim: #cbd5e1;
    --erd-canvas-bg: #f1f5f9;
    --erd-grid-color: rgba(148,163,184,0.18);
    --erd-grid-dot: rgba(148,163,184,0.45);
  }
  [data-theme="admindbDark"] {
    --erd-node-bg: #1e293b;
    --erd-node-border: #334155;
    --erd-node-header: #6366f1;
    --erd-node-header-text: #ffffff;
    --erd-node-text: #e2e8f0;
    --erd-node-subtext: #64748b;
    --erd-node-row-odd: #1a2744;
    --erd-node-row-even: #1e293b;
    --erd-node-row-pk: #1e1b4b;
    --erd-node-row-fk: #1c1a0e;
    --erd-edge-color: #818cf8;
    --erd-edge-hl: #fbbf24;
    --erd-edge-dim: #334155;
    --erd-canvas-bg: #0f172a;
    --erd-grid-color: rgba(51,65,85,0.5);
    --erd-grid-dot: rgba(71,85,105,0.6);
  }
  #erd-canvas-wrap {
    background-color: var(--erd-canvas-bg);
    background-image: radial-gradient(var(--erd-grid-dot) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  /* Node transitions */
  .erd-node { cursor: grab; }
  .erd-node:active { cursor: grabbing; }
  .erd-node-rect {
    transition: filter 0.18s ease, stroke 0.18s ease, stroke-width 0.18s ease;
  }
  .erd-node.dimmed .erd-node-rect { opacity: 0.28; }
  .erd-node.dimmed .erd-node-header-rect { opacity: 0.28; }
  .erd-node.dimmed text { opacity: 0.28; }
  .erd-node.selected .erd-node-rect {
    stroke: var(--erd-edge-hl) !important;
    stroke-width: 2.5px !important;
    filter: url(#erd-shadow-lg);
  }
  .erd-node.neighbor .erd-node-rect {
    stroke: var(--erd-edge-color) !important;
    stroke-width: 2px !important;
  }
  /* Edge transitions */
  .erd-edge {
    transition: stroke 0.18s ease, stroke-width 0.18s ease, opacity 0.18s ease;
    cursor: pointer;
  }
  .erd-edge.dimmed { opacity: 0.08; }
  .erd-edge.highlighted {
    stroke: var(--erd-edge-hl) !important;
    stroke-width: 2.5px !important;
    opacity: 1 !important;
  }
  .erd-edge.neighbor-edge {
    stroke: var(--erd-edge-color) !important;
    stroke-width: 2px !important;
    opacity: 0.9 !important;
  }
  /* Search highlight */
  .erd-node.search-match .erd-node-rect {
    stroke: #10b981 !important;
    stroke-width: 2px !important;
  }
  .erd-node.search-no-match { opacity: 0.2; }
  /* Side panel */
  #erd-side-panel { display: none; }
  #erd-side-panel.visible { display: flex; }
  .erd-col-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 11px;
    transition: background 0.1s;
  }
  .erd-col-row:hover { background: var(--erd-node-row-odd); }
  .erd-col-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', monospace; }
  .erd-col-row-type { color: var(--erd-node-subtext); font-family: 'JetBrains Mono', monospace; font-size: 10px; }
  .erd-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 700; line-height: 1.4; }
  .erd-badge-pk { background: rgba(99,102,241,0.15); color: #6366f1; }
  .erd-badge-fk { background: rgba(245,158,11,0.15); color: #d97706; }
  .erd-badge-nn { background: rgba(239,68,68,0.10); color: #dc2626; }
  .erd-rel-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.1s;
  }
  .erd-rel-row:hover { background: var(--erd-node-row-odd); }
  /* Layout mode buttons */
  .erd-mode-btn { color: oklch(var(--bc) / 0.55); }
  .erd-mode-btn:hover { color: oklch(var(--bc) / 0.9); background: oklch(var(--b2)); }
  .erd-mode-btn.bg-primary { color: oklch(var(--pc)); }
  'use strict';
  const BASE = window.APP?.basePath ?? '';
  // ── State ────────────────────────────────────────────────────────────────
  let schema       = null;
  let positions    = {};
  let collapsed    = new Set();   // tables showing only header
  let scale        = 1;
  let tx = 0, ty  = 0;
  let draggingNode = null;
  let isPanning    = false;
  let panStart     = { x: 0, y: 0, tx: 0, ty: 0 };
  let selectedTable = null;
  let compactAll   = false;
  let searchQuery  = '';
  let ctxTable     = null;
  let layoutMode   = 'hierarchy'; // 'force' | 'hierarchy' | 'circle'
  // ── Constants ────────────────────────────────────────────────────────────
  const NODE_W    = 240;
  const COL_H     = 26;
  const HEADER_H  = 40;
  const NODE_PAD  = 6;
  const COMPACT_H = HEADER_H;
  // ── Palette: rotate header colors per table ───────────────────────────
  const PALETTES = [
    { h: '#6366f1', l: '#eef2ff' }, // indigo
    { h: '#8b5cf6', l: '#f5f3ff' }, // violet
    { h: '#ec4899', l: '#fdf2f8' }, // pink
    { h: '#0ea5e9', l: '#f0f9ff' }, // sky
    { h: '#10b981', l: '#ecfdf5' }, // emerald
    { h: '#f59e0b', l: '#fffbeb' }, // amber
    { h: '#ef4444', l: '#fef2f2' }, // red
    { h: '#14b8a6', l: '#f0fdfa' }, // teal
  ];
  function palOf(name) {
    let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
    return PALETTES[h % PALETTES.length];
  }
  // ── DOM ──────────────────────────────────────────────────────────────────
  const wrap        = document.getElementById('erd-canvas-wrap');
  const svgEl_      = document.getElementById('erd-svg');
  const viewport    = document.getElementById('erd-viewport');
  const edgesG      = document.getElementById('erd-edges');
  const nodesG      = document.getElementById('erd-nodes');
  const loadingEl   = document.getElementById('erd-loading');
  const errorEl     = document.getElementById('erd-error');
  const errorMsg    = document.getElementById('erd-error-msg');
  const emptyEl     = document.getElementById('erd-empty');
  const minimap     = document.getElementById('erd-minimap');
  const minimapSvg  = document.getElementById('erd-minimap-svg');
  const zoomLabel   = document.getElementById('erd-zoom-label');
  const badge       = document.getElementById('erd-table-badge');
  const fkBadge     = document.getElementById('erd-fk-badge');
  const edgeTip     = document.getElementById('erd-edge-tooltip');
  const ctxMenu     = document.getElementById('erd-ctx-menu');
  const sidePanel   = document.getElementById('erd-side-panel');
  const searchInput = document.getElementById('erd-search');
  // ── Helper ───────────────────────────────────────────────────────────────
  function svgE(tag, attrs = {}) {
    const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
    return el;
  }
  function nodeHeight(t) {
    if (collapsed.has(t.name) || compactAll) return COMPACT_H;
    return HEADER_H + NODE_PAD * 2 + t.columns.length * COL_H;
  }
  // ── Fetch ────────────────────────────────────────────────────────────────
  async function loadSchema() {
    try {
      const res  = await fetch(BASE + '/api/erd');
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const json = await res.json();
      if (!json.success) throw new Error(json.error ?? 'API error');
      schema = json.data;
      if (!schema.tables || schema.tables.length === 0) {
        loadingEl.style.display = 'none'; emptyEl.style.display = 'flex'; return;
      }
      initLayout();
      renderAll();
      fitView();
      loadingEl.style.display = 'none';
      svgEl_.style.display = '';
      if (schema.tables.length > 3) minimap.classList.remove('hidden');
      // badges
      badge.textContent = schema.tables.length + ' table' + (schema.tables.length !== 1 ? 's' : '');
      badge.classList.remove('hidden');
      const totalFks = schema.tables.reduce((s, t) => s + t.foreignKeys.length, 0);
      if (totalFks > 0) {
        fkBadge.textContent = totalFks + ' relationship' + (totalFks !== 1 ? 's' : '');
        fkBadge.classList.remove('hidden');
      }
    } catch (e) {
      loadingEl.style.display = 'none';
      errorEl.style.display = 'flex';
      errorMsg.textContent = e.message;
    }
  }
  // ── Layout dispatcher ─────────────────────────────────────────────────────
  function initLayout() {
    if (!schema || schema.tables.length === 0) return;
    if      (layoutMode === 'force')     layoutForce();
    else if (layoutMode === 'circle')    layoutCircle();
    else                                 layoutHierarchy();
    updateModeButtons();
  }
  function updateModeButtons() {
    document.querySelectorAll('.erd-mode-btn').forEach(btn => {
      const active = btn.dataset.mode === layoutMode;
      btn.classList.toggle('bg-primary',         active);
      btn.classList.toggle('text-primary-content', active);
      btn.classList.toggle('shadow-sm',           active);
      btn.classList.toggle('text-base-content',   !active);
      btn.classList.toggle('text-opacity-60',     !active);
    });
  }
  // ── 1. Force-directed (physics / organic) ─────────────────────────────────
  function layoutForce() {
    const tables = schema.tables;
    const PAD    = 60;
    // seed in a grid so force has a stable start
    const cols   = Math.max(1, Math.ceil(Math.sqrt(tables.length)));
    tables.forEach((t, i) => {
      positions[t.name] = {
        x: PAD + (i % cols) * (NODE_W + 180),
        y: PAD + Math.floor(i / cols) * 280,
      };
    });
    const tableNames = new Set(tables.map(t => t.name));
    const REPEL  = 28000;
    const SPRING = 0.012;
    const REST   = NODE_W + 220;
    const DAMP   = 0.82;
    const vx = {}, vy = {};
    tables.forEach(t => { vx[t.name] = 0; vy[t.name] = 0; });
    for (let iter = 0; iter < 280; iter++) {
      const fx = {}, fy = {};
      tables.forEach(t => { fx[t.name] = 0; fy[t.name] = 0; });
      // Repulsion between all pairs
      for (let i = 0; i < tables.length; i++) {
        for (let j = i + 1; j < tables.length; j++) {
          const a = positions[tables[i].name], b = positions[tables[j].name];
          let dx = b.x - a.x, dy = b.y - a.y;
          const dist = Math.max(1, Math.sqrt(dx*dx + dy*dy));
          const f    = REPEL / (dist * dist);
          dx /= dist; dy /= dist;
          fx[tables[i].name] -= dx * f; fy[tables[i].name] -= dy * f;
          fx[tables[j].name] += dx * f; fy[tables[j].name] += dy * f;
        }
      }
      // Spring attraction along FK edges
      tables.forEach(t => {
        t.foreignKeys.forEach(fk => {
          if (!tableNames.has(fk.table) || fk.table === t.name) return;
          const a = positions[t.name], b = positions[fk.table];
          let dx = b.x - a.x, dy = b.y - a.y;
          const dist = Math.max(1, Math.sqrt(dx*dx + dy*dy));
          const f    = SPRING * (dist - REST);
          dx /= dist; dy /= dist;
          fx[t.name]   += dx * f; fy[t.name]   += dy * f;
          fx[fk.table] -= dx * f; fy[fk.table] -= dy * f;
        });
      });
      // Integrate with damping
      tables.forEach(t => {
        vx[t.name] = (vx[t.name] + fx[t.name]) * DAMP;
        vy[t.name] = (vy[t.name] + fy[t.name]) * DAMP;
        positions[t.name].x += vx[t.name];
        positions[t.name].y += vy[t.name];
      });
    }
    // Normalize to (PAD, PAD)
    const minX = Math.min(...tables.map(t => positions[t.name].x));
    const minY = Math.min(...tables.map(t => positions[t.name].y));
    tables.forEach(t => { positions[t.name].x -= minX - PAD; positions[t.name].y -= minY - PAD; });
  }
  // ── 2. Hierarchical / layered (reference tables left) ────────────────────
  function layoutHierarchy() {
    const tables     = schema.tables;
    const tableNames = new Set(tables.map(t => t.name));
    const deps = {};
    tables.forEach(t => {
      deps[t.name] = [...new Set(
        t.foreignKeys.map(fk => fk.table).filter(n => n !== t.name && tableNames.has(n))
      )];
    });
    const layerOf = {};
    function assignLayer(name, stack) {
      if (name in layerOf) return layerOf[name];
      if (!stack) stack = new Set();
      if (stack.has(name)) { layerOf[name] = 0; return 0; }
      stack.add(name);
      const d = deps[name] || [];
      layerOf[name] = d.length === 0 ? 0 : Math.max(...d.map(x => assignLayer(x, new Set(stack)))) + 1;
      return layerOf[name];
    }
    tables.forEach(t => assignLayer(t.name));
    const byLayer = {};
    tables.forEach(t => { const l = layerOf[t.name] ?? 0; (byLayer[l] = byLayer[l] || []).push(t); });
    const isReferenced = new Set();
    tables.forEach(t => t.foreignKeys.forEach(fk => { if (fk.table !== t.name) isReferenced.add(fk.table); }));
    const isolated = [];
    byLayer[0] = (byLayer[0] || []).filter(t => {
      if (!isReferenced.has(t.name) && deps[t.name].length === 0) { isolated.push(t); return false; }
      return true;
    });
    if (!byLayer[0].length) delete byLayer[0];
    const layerNums = Object.keys(byLayer).map(Number).sort((a, b) => a - b);
    layerNums.forEach(ln => {
      const grp = byLayer[ln]; if (!grp || ln === 0) return;
      const prev = byLayer[ln - 1] || [], pi = {};
      prev.forEach((t, i) => pi[t.name] = i);
      grp.sort((a, b) => {
        const s = t => { const d = (deps[t.name]||[]).filter(x=>x in pi); return d.length?d.reduce((s,x)=>s+pi[x],0)/d.length:999; };
        return s(a) - s(b);
      });
    });
    const COL_WIDTH   = NODE_W + 200;
    const ROW_PADDING = 44;
    const colHeights  = layerNums.map(ln => (byLayer[ln]||[]).reduce((s,t) => s + nodeHeight(t) + ROW_PADDING, 0));
    const maxColH     = Math.max(...colHeights, 300);
    layerNums.forEach((ln, ci) => {
      const grp = byLayer[ln] || [];
      let y = Math.max(60, (maxColH - colHeights[ci]) / 2 + 60);
      grp.forEach(t => { positions[t.name] = { x: 60 + ci * COL_WIDTH, y }; y += nodeHeight(t) + ROW_PADDING; });
    });
    if (isolated.length > 0) {
      const isoX = 60 + layerNums.length * COL_WIDTH;
      let isoY = 60;
      isolated.forEach(t => { positions[t.name] = { x: isoX, y: isoY }; isoY += nodeHeight(t) + ROW_PADDING; });
    }
  }
  // ── 3. Circular layout ────────────────────────────────────────────────────
  function layoutCircle() {
    const tables = schema.tables;
    if (tables.length === 0) return;
    // Separate isolated tables (no FKs and never referenced by anyone)
    const isReferenced = new Set();
    tables.forEach(t => t.foreignKeys.forEach(fk => { if (fk.table !== t.name) isReferenced.add(fk.table); }));
    const isolated  = tables.filter(t => !isReferenced.has(t.name) && t.foreignKeys.filter(fk => fk.table !== t.name).length === 0);
    const connected = tables.filter(t => !isolated.includes(t));
    // Sort connected: highly-connected first (12 o'clock position)
    const degree = {};
    tables.forEach(t => {
      degree[t.name] = t.foreignKeys.length;
      tables.forEach(o => { if (o.foreignKeys.some(fk => fk.table === t.name)) degree[t.name]++; });
    });
    const sorted = [...connected].sort((a, b) => (degree[b.name] || 0) - (degree[a.name] || 0));
    const n = sorted.length;
    if (n === 0) {
      // All tables are isolated — just grid them
      const cols = Math.max(1, Math.ceil(Math.sqrt(isolated.length)));
      isolated.forEach((t, i) => {
        positions[t.name] = { x: 60 + (i % cols) * (NODE_W + 40), y: 60 + Math.floor(i / cols) * 280 };
      });
      return;
    }
    if (n === 1) {
      positions[sorted[0].name] = { x: 60, y: 60 };
    } else {
      // Compute radius so circle nodes don't overlap
      const avgH      = sorted.reduce((s, t) => s + nodeHeight(t), 0) / n;
      const minGap    = 36;
      const arcPerNode = Math.max(NODE_W + minGap, avgH + minGap);
      const radius    = Math.max(240, (n * arcPerNode) / (2 * Math.PI));
      const cx        = radius + NODE_W / 2 + 60;
      const cy        = radius + avgH / 2  + 60;
      sorted.forEach((t, i) => {
        const angle = (2 * Math.PI * i / n) - Math.PI / 2; // start at 12 o'clock
        positions[t.name] = {
          x: cx + radius * Math.cos(angle) - NODE_W / 2,
          y: cy + radius * Math.sin(angle) - nodeHeight(t) / 2,
        };
      });
    }
    // Place isolated tables in a compact column to the right of the circle
    if (isolated.length > 0) {
      const circleRight = Math.max(...sorted.map(t => positions[t.name].x + NODE_W)) + 60;
      const ROW_PAD     = 32;
      let isoY          = 60;
      isolated.forEach(t => {
        positions[t.name] = { x: circleRight, y: isoY };
        isoY += nodeHeight(t) + ROW_PAD;
      });
    }
  }
  // ── Render all ────────────────────────────────────────────────────────────
  function renderAll() {
    edgesG.innerHTML = '';
    nodesG.innerHTML = '';
    schema.tables.forEach(t => renderNode(t));
    schema.tables.forEach(t => renderEdges(t));
    applySearch();
    renderMinimap();
  }
  // ── Render node ──────────────────────────────────────────────────────────
  function renderNode(t) {
    const pos  = positions[t.name];
    const h    = nodeHeight(t);
    const pal  = palOf(t.name);
    const isCollapsed = collapsed.has(t.name) || compactAll;
    const fkCols = new Set(t.foreignKeys.map(f => f.from));
    const pkCols = new Set((t.primaryKey && t.primaryKey.length ? t.primaryKey : t.columns.filter(c => c.pk > 0).map(c => c.name)));
    const g = svgE('g', { class: 'erd-node', 'data-table': t.name, transform: `translate(${pos.x},${pos.y})` });
    // Drop shadow background
    g.appendChild(svgE('rect', { class: 'erd-node-shadow', x: 0, y: 0, width: NODE_W, height: h, rx: 12, fill: 'transparent', filter: 'url(#erd-shadow)' }));
    // Main background
    g.appendChild(svgE('rect', { class: 'erd-node-rect', x: 0, y: 0, width: NODE_W, height: h, rx: 12, fill: 'var(--erd-node-bg)', stroke: 'var(--erd-node-border)', 'stroke-width': '1.5' }));
    // Header gradient strip
    const hdrClip = svgE('clipPath', { id: `erd-hclip-${t.name.replace(/\W/g,'_')}` });
    hdrClip.appendChild(svgE('rect', { x: 0, y: 0, width: NODE_W, height: HEADER_H, rx: 12 }));
    g.appendChild(hdrClip);
    const hdrRect = svgE('rect', { class: 'erd-node-header-rect', x: 0, y: 0, width: NODE_W, height: HEADER_H, fill: pal.h, 'clip-path': `url(#erd-hclip-${t.name.replace(/\W/g,'_')})` });
    g.appendChild(hdrRect);
    // bottom fill to square off the lower edge of header
    g.appendChild(svgE('rect', { x: 0, y: HEADER_H - 12, width: NODE_W, height: 12, fill: pal.h }));
    // Collapse arrow
    const arrX = NODE_W - 20, arrY = HEADER_H / 2;
    const arrPath = isCollapsed ? 'M-4,-2 L0,3 L4,-2' : 'M-4,2 L0,-3 L4,2';
    const arr = svgE('path', { d: arrPath, fill: 'none', stroke: 'rgba(255,255,255,0.7)', 'stroke-width': '2', 'stroke-linecap': 'round', transform: `translate(${arrX},${arrY})`, style: 'cursor:pointer;', class: 'erd-collapse-btn' });
    arr.addEventListener('click', e => { e.stopPropagation(); toggleCollapse(t.name); });
    g.appendChild(arr);
    // Table name
    const nameEl = svgE('text', { x: 14, y: 26, fill: '#fff', 'font-size': '13', 'font-weight': '700', 'font-family': 'Inter, ui-sans-serif, sans-serif', class: 'erd-node-title' });
    const maxLen = 20;
    nameEl.textContent = t.name.length > maxLen ? t.name.slice(0, maxLen - 1) + '…' : t.name;
    g.appendChild(nameEl);
    // Row/col count pill in header
    const pillW = 36, pillX = NODE_W - pillW - 8;
    g.appendChild(svgE('rect', { x: pillX, y: 10, width: pillW, height: 18, rx: 9, fill: 'rgba(0,0,0,0.18)' }));
    const pillTxt = svgE('text', { x: pillX + pillW / 2, y: 23, 'text-anchor': 'middle', fill: 'rgba(255,255,255,0.85)', 'font-size': '9.5', 'font-weight': '600', 'font-family': 'Inter, sans-serif' });
    pillTxt.textContent = t.columns.length + (t.columns.length === 1 ? ' col' : ' cols');
    g.appendChild(pillTxt);
    // Columns (when not collapsed)
    if (!isCollapsed) {
      t.columns.forEach((col, idx) => {
        const cy   = HEADER_H + NODE_PAD + idx * COL_H;
        const isPk = pkCols.has(col.name);
        const isFk = fkCols.has(col.name);
        const isLast = idx === t.columns.length - 1;
        // Row background
        let rowFill = idx % 2 === 0 ? 'var(--erd-node-row-even)' : 'var(--erd-node-row-odd)';
        if (isPk) rowFill = 'var(--erd-node-row-pk)';
        if (isFk && !isPk) rowFill = 'var(--erd-node-row-fk)';
        const rowBg = svgE('rect', { x: 1, y: cy, width: NODE_W - 2, height: COL_H, fill: rowFill });
        if (isLast) { rowBg.setAttribute('rx', '0'); } // no extra clip needed
        g.appendChild(rowBg);
        // Left accent bar for PK/FK
        if (isPk || isFk) {
          g.appendChild(svgE('rect', { x: 1, y: cy, width: 3, height: COL_H, fill: isPk ? pal.h : '#f59e0b' }));
        }
        // Column name
        const nameTxt = svgE('text', { x: isPk || isFk ? 14 : 10, y: cy + 17, fill: isPk ? pal.h : 'var(--erd-node-text)', 'font-size': '11.5', 'font-weight': isPk ? '600' : '400', 'font-family': '"JetBrains Mono", "Fira Code", monospace' });
        const trim = 15;
        nameTxt.textContent = col.name.length > trim ? col.name.slice(0, trim - 1) + '…' : col.name;
        g.appendChild(nameTxt);
        // Type
        const typeStr = (col.type || 'any').toUpperCase().replace('CHARACTER VARYING', 'VARCHAR');
        const typeTrimmed = typeStr.length > 10 ? typeStr.slice(0, 9) + '…' : typeStr;
        const typeX = NODE_W - (isPk || isFk ? 46 : 10);
        const typeTxt = svgE('text', { x: typeX, y: cy + 17, 'text-anchor': 'end', fill: 'var(--erd-node-subtext)', 'font-size': '9.5', 'font-family': '"JetBrains Mono", monospace' });
        typeTxt.textContent = typeTrimmed;
        g.appendChild(typeTxt);
        // Badges
        let badgeX = NODE_W - 8;
        if (isFk) {
          badgeX -= 22;
          g.appendChild(svgE('rect', { x: badgeX, y: cy + 6, width: 20, height: 13, rx: 3, fill: 'rgba(245,158,11,0.18)' }));
          const fkTxt = svgE('text', { x: badgeX + 10, y: cy + 15.5, 'text-anchor': 'middle', fill: '#d97706', 'font-size': '7.5', 'font-weight': '700', 'font-family': 'Inter, sans-serif' });
          fkTxt.textContent = 'FK';
          g.appendChild(fkTxt);
        }
        if (isPk) {
          badgeX -= 22;
          g.appendChild(svgE('rect', { x: badgeX, y: cy + 6, width: 20, height: 13, rx: 3, fill: 'rgba(99,102,241,0.15)' }));
          const pkTxt = svgE('text', { x: badgeX + 10, y: cy + 15.5, 'text-anchor': 'middle', fill: pal.h, 'font-size': '7.5', 'font-weight': '700', 'font-family': 'Inter, sans-serif' });
          pkTxt.textContent = 'PK';
          g.appendChild(pkTxt);
        }
        // Invisible wide hit target for row hover (used for FK jump)
        const rowHit = svgE('rect', { x: 0, y: cy, width: NODE_W, height: COL_H, fill: 'transparent' });
        g.appendChild(rowHit);
      });
      // Bottom rounded cap to complete the card
      const capClip = svgE('clipPath', { id: `erd-bclip-${t.name.replace(/\W/g,'_')}` });
      capClip.appendChild(svgE('rect', { x: 0, y: h - 12, width: NODE_W, height: 12, rx: 0 }));
      g.appendChild(capClip);
    }
    // Invisible interaction rect (full node)
    const hitRect = svgE('rect', { x: 0, y: 0, width: NODE_W, height: h, rx: 12, fill: 'transparent', class: 'erd-hit', style: 'cursor:grab;' });
    g.appendChild(hitRect);
    // Click → select
    hitRect.addEventListener('click', e => { e.stopPropagation(); selectTable(t.name); });
    // Right-click → context menu
    g.addEventListener('contextmenu', e => {
      e.preventDefault(); e.stopPropagation();
      openCtxMenu(t.name, e.clientX, e.clientY);
    });
    // Drag
    hitRect.addEventListener('mousedown', e => {
      if (e.button !== 0) return;
      e.stopPropagation();
      draggingNode = { name: t.name, origX: positions[t.name].x, origY: positions[t.name].y, startX: e.clientX, startY: e.clientY, moved: false };
      wrap.style.cursor = 'grabbing';
    });
    nodesG.appendChild(g);
  }
  // ── Edges ─────────────────────────────────────────────────────────────────
  function getPortY(tableName, colName) {
    if (collapsed.has(tableName) || compactAll) return COMPACT_H / 2;
    const t   = schema.tables.find(t => t.name === tableName);
    if (!t) return HEADER_H / 2;
    const idx = t.columns.findIndex(c => c.name === colName);
    if (idx === -1) return HEADER_H + NODE_PAD + COL_H / 2;
    return HEADER_H + NODE_PAD + idx * COL_H + COL_H / 2;
  }
  function edgePath(srcPos, srcColY, tgtPos, tgtColY) {
    let sx = srcPos.x + NODE_W, sy = srcPos.y + srcColY;
    let ex = tgtPos.x,          ey = tgtPos.y + tgtColY;
    if (tgtPos.x < srcPos.x) { sx = srcPos.x; ex = tgtPos.x + NODE_W; }
    const dx   = Math.abs(ex - sx);
    const cpDx = Math.max(60, dx * 0.45);
    return `M${sx},${sy} C${sx + (tgtPos.x < srcPos.x ? -cpDx : cpDx)},${sy} ${ex - (tgtPos.x < srcPos.x ? -cpDx : cpDx)},${ey} ${ex},${ey}`;
  }
  function renderEdges(t) {
    t.foreignKeys.forEach(fk => {
      const srcPos = positions[t.name], tgtPos = positions[fk.table];
      if (!srcPos || !tgtPos) return;
      const d = edgePath(srcPos, getPortY(t.name, fk.from), tgtPos, getPortY(fk.table, fk.to || ''));
      const path = svgE('path', {
        class: 'erd-edge',
        d,
        fill: 'none',
        stroke: 'var(--erd-edge-color)',
        'stroke-width': '1.8',
        'stroke-dasharray': 'none',
        'marker-end': 'url(#erd-arrow)',
        'data-from': t.name,
        'data-to': fk.table,
        'data-from-col': fk.from,
        'data-to-col': fk.to || '',
        opacity: '0.65',
      });
      // Edge hover: show tooltip + highlight
      path.addEventListener('mouseenter', e => {
        const rect   = wrap.getBoundingClientRect();
        edgeTip.style.left = (e.clientX - rect.left + 12) + 'px';
        edgeTip.style.top  = (e.clientY - rect.top - 8) + 'px';
        edgeTip.innerHTML  = `<span style="color:var(--erd-edge-color)">${fk.from}</span> <span style="opacity:.5">→</span> <span style="color:#10b981">${fk.table}</span><span style="opacity:.5">.${fk.to || '?'}</span>`;
        edgeTip.classList.remove('hidden');
        path.setAttribute('stroke-width', '2.8');
        path.style.opacity = '1';
      });
      path.addEventListener('mousemove', e => {
        const rect = wrap.getBoundingClientRect();
        edgeTip.style.left = (e.clientX - rect.left + 12) + 'px';
        edgeTip.style.top  = (e.clientY - rect.top - 8) + 'px';
      });
      path.addEventListener('mouseleave', () => {
        edgeTip.classList.add('hidden');
        if (!path.classList.contains('highlighted') && !path.classList.contains('neighbor-edge')) {
          path.setAttribute('stroke-width', '1.8');
          path.style.opacity = '0.65';
        }
      });
      edgesG.appendChild(path);
    });
  }
  function updateEdges() {
    edgesG.querySelectorAll('.erd-edge').forEach(path => {
      const fn = path.getAttribute('data-from'), tn = path.getAttribute('data-to');
      const fc = path.getAttribute('data-from-col'), tc = path.getAttribute('data-to-col');
      const sp = positions[fn], tp = positions[tn];
      if (!sp || !tp) return;
      path.setAttribute('d', edgePath(sp, getPortY(fn, fc), tp, getPortY(tn, tc)));
    });
  }
  // ── Selection & highlighting ──────────────────────────────────────────────
  function clearHighlights() {
    nodesG.querySelectorAll('.erd-node').forEach(el => {
      el.classList.remove('selected', 'neighbor', 'dimmed');
    });
    edgesG.querySelectorAll('.erd-edge').forEach(el => {
      el.classList.remove('highlighted', 'neighbor-edge', 'dimmed');
      el.setAttribute('stroke-width', '1.8');
      el.setAttribute('marker-end', 'url(#erd-arrow)');
      el.style.opacity = '0.65';
    });
  }
  function selectTable(name) {
    if (selectedTable === name) { deselectTable(); return; }
    selectedTable = name;
    clearHighlights();
    // Collect neighbors
    const neighbors = new Set();
    schema.tables.forEach(t => {
      t.foreignKeys.forEach(fk => {
        if (t.name === name) neighbors.add(fk.table);
        if (fk.table === name) neighbors.add(t.name);
      });
    });
    // Apply node classes
    nodesG.querySelectorAll('.erd-node').forEach(el => {
      const n = el.getAttribute('data-table');
      if (n === name) el.classList.add('selected');
      else if (neighbors.has(n)) el.classList.add('neighbor');
      else el.classList.add('dimmed');
    });
    // Apply edge classes
    edgesG.querySelectorAll('.erd-edge').forEach(el => {
      const f = el.getAttribute('data-from'), t = el.getAttribute('data-to');
      if (f === name || t === name) {
        el.classList.add('neighbor-edge');
        el.setAttribute('stroke-width', '2.2');
        el.style.opacity = '1';
        el.setAttribute('marker-end', 'url(#erd-arrow)');
      } else {
        el.classList.add('dimmed');
      }
    });
    showSidePanel(name, neighbors);
  }
  function deselectTable() {
    selectedTable = null;
    clearHighlights();
    hideSidePanel();
  }
  // ── Side panel ────────────────────────────────────────────────────────────
  function showSidePanel(name, neighbors) {
    const t   = schema.tables.find(t => t.name === name);
    if (!t) return;
    const pal = palOf(name);
    sidePanel.classList.add('visible');
    document.getElementById('erd-panel-header').style.background = pal.h;
    document.getElementById('erd-panel-name').textContent = name;
    document.getElementById('erd-panel-col-count').textContent = t.columns.length;
    document.getElementById('erd-panel-fk-count').textContent = t.foreignKeys.length;
    // how many other tables reference this one?
    const refCount = schema.tables.filter(x => x.foreignKeys.some(fk => fk.table === name)).length;
    document.getElementById('erd-panel-ref-count').textContent = refCount;
    const panelBrowse = document.getElementById('erd-panel-browse');
    const panelSchema = document.getElementById('erd-panel-schema');
    const panelSeed = document.getElementById('erd-panel-seed');
    panelBrowse.href = `${BASE}/tables/${encodeURIComponent(name)}`;
    panelSchema.href = `${BASE}/tables/${encodeURIComponent(name)}/schema`;
    if (panelSeed) panelSeed.href = `${BASE}/seed/${encodeURIComponent(name)}?mode=chain`;
    // Columns list
    const fkCols = new Set(t.foreignKeys.map(f => f.from));
    const pkCols = new Set(t.primaryKey && t.primaryKey.length ? t.primaryKey : t.columns.filter(c => c.pk > 0).map(c => c.name));
    const colsEl = document.getElementById('erd-panel-cols');
    colsEl.innerHTML = '';
    t.columns.forEach(col => {
      const isPk = pkCols.has(col.name), isFk = fkCols.has(col.name);
      const row  = document.createElement('div');
      row.className = 'erd-col-row';
      row.style.background = isPk ? 'rgba(99,102,241,0.06)' : isFk ? 'rgba(245,158,11,0.05)' : '';
      const lAcc = document.createElement('div');
      lAcc.style.cssText = `width:3px;height:16px;border-radius:2px;background:${isPk ? pal.h : isFk ? '#f59e0b' : 'transparent'};flex-shrink:0;`;
      row.appendChild(lAcc);
      const nameEl = document.createElement('span');
      nameEl.className = 'erd-col-row-name';
      nameEl.textContent = col.name;
      nameEl.style.color = isPk ? pal.h : '';
      row.appendChild(nameEl);
      const typeEl = document.createElement('span');
      typeEl.className = 'erd-col-row-type';
      typeEl.textContent = (col.type || 'any').toUpperCase().replace('CHARACTER VARYING', 'VARCHAR');
      row.appendChild(typeEl);
      if (isPk) { const b = document.createElement('span'); b.className = 'erd-badge erd-badge-pk'; b.textContent = 'PK'; row.appendChild(b); }
      if (isFk) { const b = document.createElement('span'); b.className = 'erd-badge erd-badge-fk'; b.textContent = 'FK'; row.appendChild(b); }
      if (col.notnull && !isPk) { const b = document.createElement('span'); b.className = 'erd-badge erd-badge-nn'; b.textContent = 'NN'; row.appendChild(b); }
      colsEl.appendChild(row);
    });
    // Relationships panel
    const relsPanel = document.getElementById('erd-panel-rels');
    const relsList  = document.getElementById('erd-panel-rels-list');
    relsList.innerHTML = '';
    const allRels = [];
    // outgoing FKs
    t.foreignKeys.forEach(fk => allRels.push({ dir: 'out', label: `${name}.${fk.from} → ${fk.table}.${fk.to || '?'}`, target: fk.table }));
    // incoming
    schema.tables.forEach(src => {
      if (src.name === name) return;
      src.foreignKeys.filter(fk => fk.table === name).forEach(fk => {
        allRels.push({ dir: 'in', label: `${src.name}.${fk.from} → ${name}.${fk.to || '?'}`, target: src.name });
      });
    });
    if (allRels.length > 0) {
      relsPanel.classList.remove('hidden');
      allRels.forEach(rel => {
        const row = document.createElement('div');
        row.className = 'erd-rel-row';
        row.innerHTML = `
          <span style="font-size:10px;opacity:.5">${rel.dir === 'out' ? '→' : '←'}</span>
          <span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace;font-size:10.5px;">${rel.label}</span>
          <span style="font-size:10px;color:var(--erd-edge-color);font-weight:600;">${rel.target}</span>
        `;
        row.addEventListener('click', () => selectTable(rel.target));
        relsList.appendChild(row);
      });
    } else {
      relsPanel.classList.add('hidden');
    }
  }
  function hideSidePanel() {
    sidePanel.classList.remove('visible');
  }
  document.getElementById('erd-panel-close').addEventListener('click', deselectTable);
  // ── Context menu ─────────────────────────────────────────────────────────
  function openCtxMenu(name, cx, cy) {
    ctxTable = name;
    document.getElementById('erd-ctx-title').textContent = name;
    document.getElementById('erd-ctx-browse').href = `${BASE}/tables/${encodeURIComponent(name)}`;
    document.getElementById('erd-ctx-schema').href = `${BASE}/tables/${encodeURIComponent(name)}/schema`;
    const ctxSeed = document.getElementById('erd-ctx-seed');
    if (ctxSeed) ctxSeed.href = `${BASE}/seed/${encodeURIComponent(name)}?mode=chain`;
    document.getElementById('erd-ctx-collapse-label').textContent = collapsed.has(name) ? 'Expand table' : 'Collapse table';
    const rect = wrap.getBoundingClientRect();
    let x = cx - rect.left, y = cy - rect.top;
    ctxMenu.style.left = Math.min(x, wrap.clientWidth  - 200) + 'px';
    ctxMenu.style.top  = Math.min(y, wrap.clientHeight - 160) + 'px';
    ctxMenu.classList.remove('hidden');
    selectTable(name);
  }
  document.getElementById('erd-ctx-focus').addEventListener('click', () => {
    ctxMenu.classList.add('hidden');
    if (!ctxTable) return;
    const p = positions[ctxTable], t = schema.tables.find(x => x.name === ctxTable);
    if (!p || !t) return;
    const nw = NODE_W, nh = nodeHeight(t);
    const cx = wrap.clientWidth / 2, cy = wrap.clientHeight / 2;
    scale = Math.min(1.8, Math.min(wrap.clientWidth / (nw + 80), wrap.clientHeight / (nh + 80)));
    tx    = cx - (p.x + nw / 2) * scale;
    ty    = cy - (p.y + nh / 2) * scale;
    applyTransform();
  });
  document.getElementById('erd-ctx-collapse').addEventListener('click', () => {
    ctxMenu.classList.add('hidden');
    if (ctxTable) toggleCollapse(ctxTable);
  });
  document.addEventListener('click', () => ctxMenu.classList.add('hidden'));
  document.addEventListener('keydown', e => { if (e.key === 'Escape') ctxMenu.classList.add('hidden'); });
  // ── Collapse toggle ───────────────────────────────────────────────────────
  function toggleCollapse(name) {
    if (collapsed.has(name)) collapsed.delete(name); else collapsed.add(name);
    edgesG.innerHTML = '';
    nodesG.innerHTML = '';
    schema.tables.forEach(t => renderNode(t));
    schema.tables.forEach(t => renderEdges(t));
    if (selectedTable) selectTable(selectedTable);
    applySearch();
    renderMinimap();
  }
  // ── Compact mode (all tables) ─────────────────────────────────────────────
  document.getElementById('erd-btn-compact').addEventListener('click', () => {
    compactAll = !compactAll;
    const btn = document.getElementById('erd-btn-compact');
    btn.classList.toggle('btn-active', compactAll);
    positions = {};
    initLayout();
    edgesG.innerHTML = '';
    nodesG.innerHTML = '';
    schema.tables.forEach(t => renderNode(t));
    schema.tables.forEach(t => renderEdges(t));
    fitView();
    if (selectedTable) selectTable(selectedTable);
    renderMinimap();
  });
  // ── Search/filter ─────────────────────────────────────────────────────────
  function applySearch() {
    if (!schema) return;
    const q = searchQuery.toLowerCase().trim();
    nodesG.querySelectorAll('.erd-node').forEach(el => {
      const name = el.getAttribute('data-table');
      el.classList.remove('search-match', 'search-no-match');
      if (!q) return;
      if (name.toLowerCase().includes(q)) el.classList.add('search-match');
      else el.classList.add('search-no-match');
    });
  }
  searchInput.addEventListener('input', () => {
    searchQuery = searchInput.value;
    applySearch();
    if (searchQuery && schema) {
      // pan to first match
      const match = schema.tables.find(t => t.name.toLowerCase().includes(searchQuery.toLowerCase()));
      if (match && positions[match.name]) {
        const p = positions[match.name], nh = nodeHeight(match);
        const cx = wrap.clientWidth / 2, cy = wrap.clientHeight / 2;
        tx = cx - (p.x + NODE_W / 2) * scale;
        ty = cy - (p.y + nh / 2) * scale;
        applyTransform();
      }
    }
  });
  // ── Viewport transform ────────────────────────────────────────────────────
  function applyTransform() {
    viewport.setAttribute('transform', `translate(${tx},${ty}) scale(${scale})`);
    zoomLabel.textContent = Math.round(scale * 100) + '%';
    renderMinimap();
  }
  function fitView() {
    if (!schema || schema.tables.length === 0) return;
    const wW = wrap.clientWidth, wH = wrap.clientHeight;
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    schema.tables.forEach(t => {
      const p = positions[t.name]; if (!p) return;
      minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);
      maxX = Math.max(maxX, p.x + NODE_W); maxY = Math.max(maxY, p.y + nodeHeight(t));
    });
    const cW = maxX - minX + 120, cH = maxY - minY + 120;
    scale = Math.min(1.1, Math.min(wW / cW, wH / cH));
    tx = (wW - cW * scale) / 2 - minX * scale + 60 * scale;
    ty = (wH - cH * scale) / 2 - minY * scale + 60 * scale;
    applyTransform();
  }
  // ── Minimap ───────────────────────────────────────────────────────────────
  function renderMinimap() {
    if (!schema || schema.tables.length === 0) return;
    minimapSvg.innerHTML = '';
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    schema.tables.forEach(t => {
      const p = positions[t.name]; if (!p) return;
      minX = Math.min(minX, p.x); minY = Math.min(minY, p.y);
      maxX = Math.max(maxX, p.x + NODE_W); maxY = Math.max(maxY, p.y + nodeHeight(t));
    });
    const cW = maxX - minX || 1, cH = maxY - minY || 1;
    const mW = 168, mH = 92;
    const mS = Math.min((mW - 8) / (cW + 40), (mH - 8) / (cH + 40));
    schema.tables.forEach(t => {
      const p = positions[t.name]; if (!p) return;
      const pal = palOf(t.name);
      const rx = (p.x - minX + 20) * mS + 4, ry = (p.y - minY + 20) * mS + 4;
      const rw = NODE_W * mS, rh = nodeHeight(t) * mS;
      const r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      r.setAttribute('x', rx); r.setAttribute('y', ry);
      r.setAttribute('width', Math.max(rw, 2)); r.setAttribute('height', Math.max(rh, 2));
      r.setAttribute('rx', 2);
      r.setAttribute('fill', t.name === selectedTable ? pal.h : pal.h + '55');
      r.setAttribute('stroke', pal.h); r.setAttribute('stroke-width', '0.5');
      minimapSvg.appendChild(r);
    });
    // Viewport rect
    const vpX = (-tx / scale - minX + 20) * mS + 4;
    const vpY = (-ty / scale - minY + 20) * mS + 4;
    const vpW = (wrap.clientWidth  / scale) * mS;
    const vpH = (wrap.clientHeight / scale) * mS;
    const vp  = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    vp.setAttribute('x', vpX); vp.setAttribute('y', vpY);
    vp.setAttribute('width', vpW); vp.setAttribute('height', vpH);
    vp.setAttribute('fill', 'rgba(99,102,241,0.06)');
    vp.setAttribute('stroke', '#6366f1'); vp.setAttribute('stroke-width', '1'); vp.setAttribute('rx', '2');
    minimapSvg.appendChild(vp);
  }
  // ── Mouse / touch events ──────────────────────────────────────────────────
  wrap.addEventListener('wheel', e => {
    e.preventDefault();
    const d = e.deltaY > 0 ? 0.88 : 1.12;
    const r = wrap.getBoundingClientRect();
    const mx = e.clientX - r.left, my = e.clientY - r.top;
    const ns = Math.min(3, Math.max(0.1, scale * d));
    tx = mx - (mx - tx) * (ns / scale);
    ty = my - (my - ty) * (ns / scale);
    scale = ns; applyTransform();
  }, { passive: false });
  // Canvas panning
  wrap.addEventListener('mousedown', e => {
    if (draggingNode || e.button !== 0) return;
    const tgt = e.target;
    if (tgt.closest('.erd-node') || tgt.closest('#erd-ctx-menu')) return;
    isPanning = true;
    panStart  = { x: e.clientX, y: e.clientY, tx, ty };
    wrap.style.cursor = 'grabbing';
  });
  window.addEventListener('mousemove', e => {
    if (draggingNode) {
      const dx = (e.clientX - draggingNode.startX) / scale;
      const dy = (e.clientY - draggingNode.startY) / scale;
      if (Math.abs(dx) > 2 || Math.abs(dy) > 2) draggingNode.moved = true;
      positions[draggingNode.name].x = draggingNode.origX + dx;
      positions[draggingNode.name].y = draggingNode.origY + dy;
      const el = nodesG.querySelector(`[data-table="${draggingNode.name}"]`);
      if (el) { const p = positions[draggingNode.name]; el.setAttribute('transform', `translate(${p.x},${p.y})`); }
      updateEdges();
      renderMinimap();
    } else if (isPanning) {
      tx = panStart.tx + (e.clientX - panStart.x);
      ty = panStart.ty + (e.clientY - panStart.y);
      applyTransform();
    }
  });
  window.addEventListener('mouseup', () => {
    draggingNode = null; isPanning = false;
    wrap.style.cursor = 'grab';
  });
  // Click on canvas background → deselect
  svgEl_.addEventListener('click', e => {
    if (e.target === svgEl_ || e.target.id === 'erd-viewport') deselectTable();
  });
  // Zoom buttons
  function zoomAt(factor) {
    const cx = wrap.clientWidth / 2, cy = wrap.clientHeight / 2;
    const ns = Math.min(3, Math.max(0.1, scale * factor));
    tx = cx - (cx - tx) * (ns / scale); ty = cy - (cy - ty) * (ns / scale);
    scale = ns; applyTransform();
  }
  document.getElementById('erd-btn-zoom-in').addEventListener('click',  () => zoomAt(1.2));
  document.getElementById('erd-btn-zoom-out').addEventListener('click', () => zoomAt(0.83));
  document.getElementById('erd-btn-fit').addEventListener('click',      fitView);
  // Layout mode buttons
  function applyLayoutMode(mode) {
    if (!schema) return;
    layoutMode = mode;
    positions  = {};
    initLayout();
    edgesG.innerHTML = ''; nodesG.innerHTML = '';
    schema.tables.forEach(t => renderNode(t));
    schema.tables.forEach(t => renderEdges(t));
    fitView();
    if (selectedTable) selectTable(selectedTable);
    applySearch();
    renderMinimap();
  }
  document.querySelectorAll('.erd-mode-btn').forEach(btn => {
    btn.addEventListener('click', () => applyLayoutMode(btn.dataset.mode));
  });
  updateModeButtons();
  // Export SVG
  document.getElementById('erd-btn-export-svg').addEventListener('click', () => {
    if (!schema) return;
    // 1. Compute content bounds in diagram-space
    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
    schema.tables.forEach(t => {
      const p = positions[t.name]; if (!p) return;
      minX = Math.min(minX, p.x);       minY = Math.min(minY, p.y);
      maxX = Math.max(maxX, p.x + NODE_W); maxY = Math.max(maxY, p.y + nodeHeight(t));
    });
    const PAD = 48;
    const vW  = maxX - minX + PAD * 2;
    const vH  = maxY - minY + PAD * 2;
    // 2. Resolve all current CSS variable values
    const cs  = getComputedStyle(document.documentElement);
    const get = v => cs.getPropertyValue(v).trim();
    const VARS = {
      'var(--erd-node-bg)'      : get('--erd-node-bg')       || '#ffffff',
      'var(--erd-node-border)'  : get('--erd-node-border')   || '#e2e8f0',
      'var(--erd-node-text)'    : get('--erd-node-text')      || '#1e293b',
      'var(--erd-node-subtext)' : get('--erd-node-subtext')  || '#94a3b8',
      'var(--erd-node-row-odd)' : get('--erd-node-row-odd')  || '#f8fafc',
      'var(--erd-node-row-even)': get('--erd-node-row-even') || '#ffffff',
      'var(--erd-node-row-pk)'  : get('--erd-node-row-pk')   || '#eef2ff',
      'var(--erd-node-row-fk)'  : get('--erd-node-row-fk')   || '#fffbeb',
      'var(--erd-edge-color)'   : get('--erd-edge-color')    || '#818cf8',
      'var(--erd-edge-hl)'      : get('--erd-edge-hl')       || '#f59e0b',
      'var(--erd-edge-dim)'     : get('--erd-edge-dim')      || '#cbd5e1',
      'var(--erd-canvas-bg)'    : get('--erd-canvas-bg')     || '#f1f5f9',
    };
    function resolveVars(str) {
      if (!str || !str.includes('var(')) return str;
      return Object.entries(VARS).reduce((s, [k, v]) => s.replaceAll(k, v), str);
    }
    // 3. Deep-clone SVG and walk every element to inline CSS vars
    const clone = svgEl_.cloneNode(true);
    function inlineEl(el) {
      // Inline attribute-level var() references
      for (const attr of [...el.attributes]) {
        const resolved = resolveVars(attr.value);
        if (resolved !== attr.value) el.setAttribute(attr.name, resolved);
      }
      // Inline style attribute
      const styleAttr = el.getAttribute('style');
      if (styleAttr) {
        const resolved = resolveVars(styleAttr);
        if (resolved !== styleAttr) el.setAttribute('style', resolved);
      }
      for (const child of el.children) inlineEl(child);
    }
    inlineEl(clone);
    // 4. Fix dimensions & viewBox
    clone.setAttribute('width',   String(Math.ceil(vW)));
    clone.setAttribute('height',  String(Math.ceil(vH)));
    clone.setAttribute('viewBox', `0 0 ${Math.ceil(vW)} ${Math.ceil(vH)}`);
    clone.removeAttribute('style'); // removes display:none
    // 5. Reset viewport transform — shift content so it starts at (PAD, PAD)
    const vpClone = clone.querySelector('#erd-viewport');
    if (vpClone) vpClone.setAttribute('transform', `translate(${PAD - minX},${PAD - minY})`);
    // 6. Add background rect behind everything
    const bgRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    bgRect.setAttribute('x', 0); bgRect.setAttribute('y', 0);
    bgRect.setAttribute('width', Math.ceil(vW)); bgRect.setAttribute('height', Math.ceil(vH));
    bgRect.setAttribute('fill', VARS['var(--erd-canvas-bg)']);
    clone.insertBefore(bgRect, clone.firstChild);
    // 7. Strip interactive-only elements (hit targets, collapse arrows, tooltip, minimap)
    clone.querySelectorAll(
      '.erd-hit, .erd-collapse-btn, #erd-minimap, #erd-edge-tooltip, #erd-ctx-menu'
    ).forEach(el => el.remove());
    // 8. Add Google Fonts import so text renders correctly in SVG viewers that support it
    const defs = clone.querySelector('defs') || clone.insertBefore(
      document.createElementNS('http://www.w3.org/2000/svg', 'defs'), clone.firstChild
    );
    const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
    style.textContent = `@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;600&display=swap');`;
    defs.insertBefore(style, defs.firstChild);
    // 9. Serialize and trigger download
    const xml  = new XMLSerializer().serializeToString(clone);
    const blob = new Blob(['<?xml version="1.0" encoding="UTF-8"?>\n' + xml], { type: 'image/svg+xml;charset=utf-8' });
    const a    = document.createElement('a');
    a.href     = URL.createObjectURL(blob);
    a.download = 'er-diagram.svg';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  });
  // Touch pinch-zoom
  let lastPinchDist = null;
  wrap.addEventListener('touchstart', e => {
    if (e.touches.length === 2) lastPinchDist = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
  }, { passive: true });
  wrap.addEventListener('touchmove', e => {
    if (e.touches.length !== 2 || !lastPinchDist) return;
    const d = Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
    const r = wrap.getBoundingClientRect();
    const mx = (e.touches[0].clientX + e.touches[1].clientX) / 2 - r.left;
    const my = (e.touches[0].clientY + e.touches[1].clientY) / 2 - r.top;
    const ns = Math.min(3, Math.max(0.1, scale * d / lastPinchDist));
    tx = mx - (mx - tx) * (ns / scale); ty = my - (my - ty) * (ns / scale);
    scale = ns; applyTransform(); lastPinchDist = d; e.preventDefault();
  }, { passive: false });
  // Keyboard shortcuts
  document.addEventListener('keydown', e => {
    if (e.target.tagName === 'INPUT') return;
    if (e.key === 'Escape') deselectTable();
    if (e.key === 'f' || e.key === 'F') { e.preventDefault(); fitView(); }
    if (e.key === 'l' || e.key === 'L') {
      e.preventDefault();
      const modes = ['force', 'hierarchy', 'circle'];
      applyLayoutMode(modes[(modes.indexOf(layoutMode) + 1) % modes.length]);
    }
    if (e.key === 'c' || e.key === 'C') { document.getElementById('erd-btn-compact').click(); }
    if (e.key === '+' || e.key === '=') zoomAt(1.2);
    if (e.key === '-') zoomAt(0.83);
    if ((e.key === '0') && (e.ctrlKey || e.metaKey)) { e.preventDefault(); fitView(); }
  });
  // ── Init ─────────────────────────────────────────────────────────────────
  loadSchema();