admindb 1.2.1 → 2.1.0

package/dist/public/js/seed.js

@@ -1,13 +1,8 @@
-/* "Seed data" page.
+/* "Seed data" page — enhanced interactive data generator.
  *
- * Lets you generate N realistic rows for a table. Each column gets a strategy
- * (auto-detected from its name/type/foreign key, but overridable): skip,
- * set NULL, fixed value, random from list, or any of the built-in fake-data
- * generators (first/last name, email, phone, UUID, random int/date/…), plus
- * "random from referenced table" for foreign-key columns.
- *
- * "Preview SQL" generates the rows and shows the INSERT statements without
- * executing them; "Insert rows" writes them inside a single transaction.
+ * Lets you generate realistic fake rows for a table with 20+ strategies,
+ * live preview samples, sparse data simulation, sequential numbering,
+ * pattern templates, dual Table/SQL previews, CSV/JSON export, and presets.
  */
 (function () {
   'use strict';
@@ -19,180 +14,569 @@
   const t = encodeURIComponent(cfg.table);
   const columns = cfg.columns || [];
 
+  // DOM Elements
   const countInput = document.getElementById('seed-count');
+  const searchInput = document.getElementById('seed-search');
+  const truncateCheckbox = document.getElementById('seed-truncate');
   const columnsBox = document.getElementById('seed-columns');
+  const emptySearchBox = document.getElementById('seed-empty-search');
+  const colCountBadge = document.getElementById('seed-col-count-badge');
   const feedback = document.getElementById('seed-feedback');
-  const sqlBox = document.getElementById('seed-sql');
+  const previewCard = document.getElementById('seed-preview-card');
+  const previewSummaryBadge = document.getElementById('preview-summary-badge');
+  const previewThead = document.getElementById('seed-preview-thead');
+  const previewTbody = document.getElementById('seed-preview-tbody');
+  const tableViewContainer = document.getElementById('seed-table-view-container');
+  const sqlViewContainer = document.getElementById('seed-sql-view-container');
   const sqlCode = document.getElementById('seed-sql-code');
-  const copyBtn = document.getElementById('seed-copy');
+  const tabTableView = document.getElementById('tab-table-view');
+  const tabSqlView = document.getElementById('tab-sql-view');
+
+  // Action buttons
   const insertBtn = document.getElementById('seed-insert');
   const previewBtn = document.getElementById('seed-preview');
   const resetBtn = document.getElementById('seed-reset');
+  const refreshSamplesBtn = document.getElementById('seed-refresh-samples');
   const applyAllBtn = document.getElementById('seed-apply-all');
+  const copySqlBtn = document.getElementById('seed-copy-sql');
+  const downloadSqlBtn = document.getElementById('seed-download-sql');
+  const exportCsvBtn = document.getElementById('seed-export-csv');
+  const exportJsonBtn = document.getElementById('seed-export-json');
+  const exportConfigBtn = document.getElementById('seed-export-config');
+  const importConfigBtn = document.getElementById('seed-import-config');
+
+  // Modals
+  const configDialog = document.getElementById('seed-config-dialog');
+  const configDialogTitle = document.getElementById('seed-config-dialog-title');
+  const configTextarea = document.getElementById('seed-config-textarea');
+  const configDialogCancel = document.getElementById('seed-config-dialog-cancel');
+  const configDialogApply = document.getElementById('seed-config-dialog-apply');
+
+  const truncateDialog = document.getElementById('seed-truncate-dialog');
+  const truncateCancel = document.getElementById('seed-truncate-cancel');
+  const truncateConfirm = document.getElementById('seed-truncate-confirm');
+
+  // State
+  const state = {};
+  let lastGeneratedResult = null;
 
   function escapeHtml(s) {
     return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
   }
 
-  // Per-column live state: { strategy, ...optionValues }.
-  const state = {};
+  // ---- Client-side Sample Generator (Fast Live Previews) --------------------
+
+  const SAMPLE_FIRST = ["Sombat", "Minh", "Hiroshi", "William", "Ravi", "Zara", "Elena", "Liam", "Mei", "Noah"];
+  const SAMPLE_LAST = ["Chen", "Smith", "Thompson", "Shah", "Yamamoto", "Patel", "Garcia", "Kim", "Nguyen", "Davis"];
+  const SAMPLE_DOMAINS = ["example.com", "acme.io", "tech.asia", "gmail.com", "startup.io"];
+  const SAMPLE_CITIES = ["New York", "Tokyo", "London", "Singapore", "Paris", "Berlin", "Sydney", "Toronto"];
+  const SAMPLE_COUNTRIES = ["United States", "Japan", "United Kingdom", "Singapore", "Germany", "France", "Canada", "Australia"];
+  const SAMPLE_COMPANIES = ["Apex Solutions", "Vortex Digital", "Nexus Systems", "Horizon Labs", "Quantum Dynamics", "Zenith Global"];
+  const SAMPLE_JOBS = ["Software Engineer", "Product Manager", "UX Designer", "DevOps Specialist", "Data Scientist", "Marketing Director"];
+  const SAMPLE_STATUSES = ["active", "pending", "completed", "archived", "draft", "verified"];
+  const SAMPLE_CURRENCIES = ["USD", "EUR", "GBP", "JPY", "CAD", "AUD"];
+  const SAMPLE_STATES = ["California", "New York", "Texas", "Washington", "Florida", "Illinois"];
+  const SAMPLE_WORDS = ["alpha", "beta", "stream", "cloud", "service", "cluster", "record", "node", "signal"];
+
+  function samplePick(arr) {
+    return arr[Math.floor(Math.random() * arr.length)];
+  }
+
+  function sampleInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+
+  function samplePattern(pattern) {
+    if (!pattern) return 'INV-2026-' + sampleInt(1000, 9999);
+    const now = new Date();
+    let s = pattern
+      .replace(/\{YYYY\}/g, String(now.getFullYear()))
+      .replace(/\{YY\}/g, String(now.getFullYear()).slice(-2))
+      .replace(/\{MM\}/g, String(sampleInt(1, 12)).padStart(2, '0'))
+      .replace(/\{DD\}/g, String(sampleInt(1, 28)).padStart(2, '0'));
+    let res = '';
+    const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    const lower = 'abcdefghijklmnopqrstuvwxyz';
+    for (let i = 0; i < s.length; i++) {
+      const ch = s[i];
+      if (ch === '#') res += String(sampleInt(0, 9));
+      else if (ch === 'A' || ch === '?') res += upper[sampleInt(0, upper.length - 1)];
+      else if (ch === 'a') res += lower[sampleInt(0, lower.length - 1)];
+      else res += ch;
+    }
+    return res;
+  }
 
-  // ---- Option field definitions per strategy -----------------------------
+  function computeSampleValue(col, plan) {
+    const st = plan.strategy;
+    if (st === 'skip') return '(omitted / default)';
+    if (st === 'null') return 'NULL';
+    if (plan.nullPct && sampleInt(1, 100) <= plan.nullPct && !col.pk && !col.notnull) {
+      return 'NULL (simulated)';
+    }
+
+    let val = '';
+    switch (st) {
+      case 'fixed':
+        val = plan.value || '';
+        break;
+      case 'list': {
+        const vals = (plan.values || []).filter((v) => String(v).trim() !== '');
+        val = vals.length ? samplePick(vals) : '(empty list)';
+        break;
+      }
+      case 'pattern':
+        val = samplePattern(plan.pattern);
+        break;
+      case 'first':
+        val = samplePick(SAMPLE_FIRST);
+        break;
+      case 'last':
+        val = samplePick(SAMPLE_LAST);
+        break;
+      case 'fullname':
+        val = samplePick(SAMPLE_FIRST) + ' ' + samplePick(SAMPLE_LAST);
+        break;
+      case 'username':
+        val = samplePick(SAMPLE_FIRST).toLowerCase() + sampleInt(10, 999);
+        break;
+      case 'job':
+        val = samplePick(SAMPLE_JOBS);
+        break;
+      case 'company':
+        val = samplePick(SAMPLE_COMPANIES);
+        break;
+      case 'currency':
+        val = samplePick(SAMPLE_CURRENCIES);
+        break;
+      case 'status':
+        val = samplePick(SAMPLE_STATUSES);
+        break;
+      case 'creditCard':
+        val = '4532-****-****-' + sampleInt(1000, 9999);
+        break;
+      case 'avatar':
+        val = 'https://api.dicebear.com/7.x/avataaars/svg?seed=' + samplePick(SAMPLE_FIRST).toLowerCase();
+        break;
+      case 'color':
+        val = plan.format === 'name' ? 'Emerald' : '#3b82f6';
+        break;
+      case 'email':
+        val = samplePick(SAMPLE_FIRST).toLowerCase() + '.' + samplePick(SAMPLE_LAST).toLowerCase() + '@' + samplePick(SAMPLE_DOMAINS);
+        break;
+      case 'phone':
+        val = '+1 (' + sampleInt(200, 999) + ') ' + sampleInt(200, 999) + '-' + sampleInt(1000, 9999);
+        break;
+      case 'city':
+        val = samplePick(SAMPLE_CITIES);
+        break;
+      case 'state':
+        val = samplePick(SAMPLE_STATES);
+        break;
+      case 'country':
+        val = samplePick(SAMPLE_COUNTRIES);
+        break;
+      case 'countryCode':
+        val = samplePick(['US', 'GB', 'CA', 'DE', 'JP', 'FR', 'AU', 'SG']);
+        break;
+      case 'postal':
+        val = String(sampleInt(10000, 99999));
+        break;
+      case 'address':
+        val = sampleInt(100, 9999) + ' ' + samplePick(SAMPLE_WORDS) + ' Ave, ' + samplePick(SAMPLE_CITIES);
+        break;
+      case 'url':
+        val = 'https://www.' + samplePick(SAMPLE_DOMAINS) + '/' + samplePick(SAMPLE_WORDS);
+        break;
+      case 'domain':
+        val = samplePick(SAMPLE_DOMAINS);
+        break;
+      case 'ip':
+        val = sampleInt(1, 223) + '.' + sampleInt(0, 255) + '.' + sampleInt(0, 255) + '.' + sampleInt(1, 254);
+        break;
+      case 'mac':
+        val = '00:1A:2B:' + sampleInt(10, 99) + ':' + sampleInt(10, 99) + ':' + sampleInt(10, 99);
+        break;
+      case 'uuid':
+        val = '550e8400-e29b-41d4-a716-' + sampleInt(100000000000, 999999999999);
+        break;
+      case 'slug':
+        val = samplePick(SAMPLE_WORDS) + '-' + samplePick(SAMPLE_WORDS) + '-' + sampleInt(100, 999);
+        break;
+      case 'words':
+        val = samplePick(SAMPLE_WORDS) + ' ' + samplePick(SAMPLE_WORDS);
+        break;
+      case 'sentence':
+        val = 'Lorem ipsum dolor sit ' + samplePick(SAMPLE_WORDS) + ' amet.';
+        break;
+      case 'paragraph':
+        val = 'Lorem ipsum dolor sit amet. Consectetur adipiscing elit ' + samplePick(SAMPLE_WORDS) + ' dynamicus.';
+        break;
+      case 'latitude':
+        val = (Math.random() * 180 - 90).toFixed(6);
+        break;
+      case 'longitude':
+        val = (Math.random() * 360 - 180).toFixed(6);
+        break;
+      case 'sequence':
+        val = String((plan.start || 1));
+        break;
+      case 'int':
+        val = String(sampleInt(plan.min ?? 1, plan.max ?? 1000));
+        break;
+      case 'decimal': {
+        const min = plan.min ?? 1;
+        const max = plan.max ?? 1000;
+        const prec = plan.precision ?? 2;
+        val = (Math.random() * (max - min) + min).toFixed(prec);
+        break;
+      }
+      case 'date':
+        val = '2026-03-' + String(sampleInt(1, 28)).padStart(2, '0');
+        break;
+      case 'datetime':
+        val = '2026-03-' + String(sampleInt(1, 28)).padStart(2, '0') + 'T14:30:00.000Z';
+        break;
+      case 'time':
+        val = '14:' + String(sampleInt(10, 59)) + ':00';
+        break;
+      case 'timestampUnix':
+        val = plan.format === 'ms' ? String(Date.now()) : String(Math.floor(Date.now() / 1000));
+        break;
+      case 'bool':
+        val = samplePick(['1', '0']);
+        break;
+      case 'bytes':
+        val = '0x' + sampleInt(100000, 999999).toString(16);
+        break;
+      case 'json':
+        val = '{"scope":"read-only","enabled":true}';
+        break;
+      case 'hash':
+        val = 'e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855'.slice(0, plan.maxLen || 32);
+        break;
+      case 'token':
+        val = 'tk_' + sampleInt(100000, 999999);
+        break;
+      case 'fk':
+        val = col.fk ? '[Sample from ' + col.fk.table + ']' : 'NULL';
+        break;
+      default:
+        val = '(auto)';
+    }
+
+    if (plan.prefix || plan.suffix) {
+      val = (plan.prefix || '') + val + (plan.suffix || '');
+    }
+    return val;
+  }
+
+  // ---- Field Definitions per Strategy -------------------------------------
 
   function field(key, label, type, attrs) {
     return Object.assign({ key, label, type }, attrs || {});
   }
+
   const FIELD_DEFS = {
     fixed: [field('value', 'Value', 'text')],
     list: [field('values', 'One value per line', 'textarea')],
+    pattern: [field('pattern', 'Pattern (tokens: #=digit, ?=letter, {YYYY})', 'text', { placeholder: 'INV-{YYYY}-####' })],
     int: [field('min', 'Min', 'number'), field('max', 'Max', 'number')],
-    decimal: [field('min', 'Min', 'number'), field('max', 'Max', 'number'), field('precision', 'Decimals', 'number', { step: 1 })],
+    decimal: [field('min', 'Min', 'number'), field('max', 'Max', 'number'), field('precision', 'Decimals', 'number', { step: 1, min: 0, max: 10 })],
+    sequence: [field('start', 'Start from', 'number', { placeholder: '1' }), field('step', 'Step increment', 'number', { placeholder: '1' })],
     date: [field('from', 'From', 'date'), field('to', 'To', 'date')],
     datetime: [field('from', 'From', 'datetime-local'), field('to', 'To', 'datetime-local')],
     time: [],
+    timestampUnix: [field('format', 'Format (sec / ms)', 'select', { options: [{ value: 'sec', label: 'Seconds (10-digit)' }, { value: 'ms', label: 'Milliseconds (13-digit)' }] })],
+    color: [field('format', 'Color format', 'select', { options: [{ value: 'hex', label: 'Hex (#3b82f6)' }, { value: 'name', label: 'Color Name (Emerald)' }] })],
+    latitude: [field('min', 'Min Lat', 'number', { step: 0.0001, placeholder: '-90' }), field('max', 'Max Lat', 'number', { step: 0.0001, placeholder: '90' })],
+    longitude: [field('min', 'Min Lng', 'number', { step: 0.0001, placeholder: '-180' }), field('max', 'Max Lng', 'number', { step: 0.0001, placeholder: '180' })],
     words: [field('minLen', 'Min words', 'number'), field('maxLen', 'Max words', 'number')],
-    sentence: [field('minLen', 'Min', 'number'), field('maxLen', 'Max', 'number')],
+    sentence: [field('minLen', 'Min sentences', 'number'), field('maxLen', 'Max sentences', 'number')],
+    paragraph: [],
     bytes: [field('minLen', 'Min bytes', 'number'), field('maxLen', 'Max bytes', 'number')],
     json: [field('jsonKeys', 'JSON keys (comma-separated)', 'text')],
     hash: [field('minLen', 'Min length', 'number'), field('maxLen', 'Max length', 'number')],
     token: [field('minLen', 'Min length', 'number'), field('maxLen', 'Max length', 'number')],
   };
 
+  const CATEGORY_TITLES = {
+    identity: '👤 Identity & People',
+    contact_web: '🌐 Contact & Web',
+    commerce: '🏢 Commerce & Business',
+    location: '📍 Location',
+    numeric: '🔢 Numbers & Math',
+    datetime: '📅 Date & Time',
+    system_crypto: '🔒 System & Crypto',
+    custom_control: '⚙️ Custom & Control',
+    relational: '🔗 Relational (Foreign Key)',
+  };
+
   function strategyNote(col, strategy) {
-    if (strategy === 'fk' && col.fk) return 'Values are sampled from ' + escapeHtml(col.fk.table) + (col.fk.to ? '.' + escapeHtml(col.fk.to) : '') + '.';
-    if (strategy === 'skip') return 'Column is omitted — the DB default (or NULL) applies.';
-    if (strategy === 'null') return 'Column is explicitly set to NULL.';
-    if (strategy === 'json') return 'Generates a valid JSON object — needed when the column has a JSON index or JSON default.';
-    if (strategy === 'hash') return 'Generates a random hexadecimal hash.';
-    if (strategy === 'token') return 'Generates a random short token / code.';
+    if (strategy === 'fk' && col.fk) return 'Sampled from foreign table ' + escapeHtml(col.fk.table) + (col.fk.to ? '.' + escapeHtml(col.fk.to) : '') + '.';
+    if (strategy === 'skip') return 'Omitted from INSERT — DB default or NULL applies.';
+    if (strategy === 'null') return 'Explicitly set to NULL for all rows.';
+    if (strategy === 'pattern') return 'Replaces # with digits, ? with letters, and {YYYY} with year.';
+    if (strategy === 'sequence') return 'Generates sequentially incrementing integers across rows.';
+    if (strategy === 'json') return 'Generates valid JSON objects compliant with indexes and defaults.';
+    if (strategy === 'hash') return 'Generates random cryptographic hex hashes.';
+    if (strategy === 'token') return 'Generates short alphanumeric identifier tokens.';
     return '';
   }
 
-  // ---- Card building ------------------------------------------------------
+  // ---- Card Building ------------------------------------------------------
 
-  function buildOptionInputs(container, col, plan) {
+  function updateCardSample(col, card) {
+    const sampleEl = card.querySelector('.seed-sample-value');
+    if (sampleEl) {
+      const sample = computeSampleValue(col, state[col.name] || {});
+      sampleEl.textContent = sample;
+    }
+  }
+
+  function buildOptionInputs(container, col, plan, card) {
     container.innerHTML = '';
     const fields = FIELD_DEFS[plan.strategy] || [];
-    if (!fields.length) return;
-    const grid = document.createElement('div');
-    grid.className = 'grid grid-cols-2 gap-2';
-    fields.forEach((f) => {
-      const wrap = document.createElement('label');
-      wrap.className = 'block';
-      const label = document.createElement('span');
-      label.className = 'field-label !mb-1 !text-[11px]';
-      label.textContent = f.label;
-      wrap.appendChild(label);
-      let el;
-      if (f.type === 'textarea') {
-        el = document.createElement('textarea');
-        el.rows = 4;
-        el.className = 'field-input col-span-2 w-full font-mono !text-[12px]';
-        el.placeholder = 'one value per line';
-        el.spellcheck = false;
-        if (Array.isArray(plan.values)) el.value = plan.values.join('\n');
-      } else {
-        el = document.createElement('input');
-        el.type = f.type;
-        el.className = 'field-input !py-1.5 !text-[13px]';
-        if (f.step != null) el.step = String(f.step);
-        const v = plan[f.key];
-        if (f.key === 'jsonKeys' && Array.isArray(v)) {
-          el.value = v.join(', ');
-        } else if (v !== undefined && v !== null) {
-          el.value = String(v);
-        }
-      }
-      el.dataset.optionKey = f.key;
-      el.addEventListener('input', () => {
-        const key = el.dataset.optionKey;
+
+    const hasOptions = fields.length > 0;
+    const isNullable = !col.pk && !col.notnull;
+    const isTextish = !['int', 'decimal', 'bool', 'bytes', 'skip', 'null'].includes(plan.strategy);
+
+    if (!hasOptions && !isNullable) return;
+
+    const wrap = document.createElement('div');
+    wrap.className = 'space-y-2 pt-2 border-t border-base-200/60';
+
+    if (fields.length) {
+      const grid = document.createElement('div');
+      grid.className = 'grid grid-cols-2 gap-2';
+      fields.forEach((f) => {
+        const fieldWrap = document.createElement('label');
+        fieldWrap.className = 'block' + (f.type === 'textarea' || f.key === 'pattern' || f.key === 'jsonKeys' ? ' col-span-2' : '');
+        const label = document.createElement('span');
+        label.className = 'field-label !mb-1 !text-[11px] font-medium text-base-content/70';
+        label.textContent = f.label;
+        fieldWrap.appendChild(label);
+
+        let el;
         if (f.type === 'textarea') {
-          state[col.name][key] = el.value.split('\n').map((s) => s.trim()).filter(Boolean);
-        } else if (key === 'jsonKeys') {
-          state[col.name][key] = el.value.split(/[,;]/).map((s) => s.trim()).filter(Boolean);
-        } else if (key === 'value' || key === 'from' || key === 'to') {
-          state[col.name][key] = el.value;
+          el = document.createElement('textarea');
+          el.rows = 3;
+          el.className = 'field-input w-full font-mono !text-[11px] leading-tight';
+          el.placeholder = 'one value per line';
+          el.spellcheck = false;
+          if (Array.isArray(plan.values)) el.value = plan.values.join('\n');
+        } else if (f.type === 'select') {
+          el = document.createElement('select');
+          el.className = 'field-select !py-1 !text-[12px]';
+          (f.options || []).forEach((opt) => {
+            const o = document.createElement('option');
+            o.value = opt.value;
+            o.textContent = opt.label;
+            if (plan[f.key] === opt.value) o.selected = true;
+            el.appendChild(o);
+          });
         } else {
-          const n = Number(el.value);
-          state[col.name][key] = el.value === '' || !Number.isFinite(n) ? undefined : n;
+          el = document.createElement('input');
+          el.type = f.type;
+          el.className = 'field-input !py-1 !text-[12px]';
+          if (f.step != null) el.step = String(f.step);
+          if (f.min != null) el.min = String(f.min);
+          if (f.max != null) el.max = String(f.max);
+          if (f.placeholder) el.placeholder = f.placeholder;
+          const v = plan[f.key];
+          if (f.key === 'jsonKeys' && Array.isArray(v)) {
+            el.value = v.join(', ');
+          } else if (v !== undefined && v !== null) {
+            el.value = String(v);
+          }
         }
+
+        el.dataset.optionKey = f.key;
+        el.addEventListener('input', () => {
+          const key = el.dataset.optionKey;
+          if (f.type === 'textarea') {
+            state[col.name][key] = el.value.split('\n').map((s) => s.trim()).filter(Boolean);
+          } else if (key === 'jsonKeys') {
+            state[col.name][key] = el.value.split(/[,;]/).map((s) => s.trim()).filter(Boolean);
+          } else if (key === 'value' || key === 'from' || key === 'to' || key === 'pattern' || key === 'format') {
+            state[col.name][key] = el.value;
+          } else {
+            const n = Number(el.value);
+            state[col.name][key] = el.value === '' || !Number.isFinite(n) ? undefined : n;
+          }
+          updateCardSample(col, card);
+        });
+
+        fieldWrap.appendChild(el);
+        grid.appendChild(fieldWrap);
       });
-      wrap.appendChild(el);
-      grid.appendChild(wrap);
-    });
-    container.appendChild(grid);
+      wrap.appendChild(grid);
+    }
+
+    // Null percentage simulation for nullable columns
+    if (isNullable && plan.strategy !== 'skip' && plan.strategy !== 'null') {
+      const nullRow = document.createElement('div');
+      nullRow.className = 'flex items-center justify-between gap-2 pt-1.5 text-[11px]';
+      nullRow.innerHTML =
+        '<span class="text-base-content/60">Simulate Nulls:</span>' +
+        '<div class="flex items-center gap-1.5">' +
+        '<input type="range" min="0" max="100" step="5" value="' + (plan.nullPct || 0) + '" class="range range-xs range-primary w-24" />' +
+        '<span class="font-mono text-[11px] w-8 text-right text-base-content/75">' + (plan.nullPct || 0) + '%</span>' +
+        '</div>';
+      const rangeInput = nullRow.querySelector('input[type="range"]');
+      const valSpan = nullRow.querySelector('span:last-child');
+      rangeInput.addEventListener('input', () => {
+        const val = Number(rangeInput.value);
+        valSpan.textContent = val + '%';
+        state[col.name].nullPct = val > 0 ? val : undefined;
+        updateCardSample(col, card);
+      });
+      wrap.appendChild(nullRow);
+    }
+
+    container.appendChild(wrap);
   }
 
   function buildCard(col) {
     const card = document.createElement('div');
-    card.className = 'app-card p-4';
+    card.className = 'app-card p-4 flex flex-col justify-between transition-shadow hover:shadow-md';
     card.dataset.column = col.name;
+    card.dataset.type = (col.type || '').toLowerCase();
+
+    // Top Header
+    const top = document.createElement('div');
+    top.className = 'space-y-3';
 
     const head = document.createElement('div');
-    head.className = 'flex flex-wrap items-start justify-between gap-2';
+    head.className = 'flex items-start justify-between gap-2';
 
-    const title = document.createElement('div');
-    title.className = 'min-w-0';
-    const name = document.createElement('p');
-    name.className = 'flex flex-wrap items-center gap-1.5 font-mono text-sm font-semibold';
+    const titleBox = document.createElement('div');
+    titleBox.className = 'min-w-0';
+    const nameRow = document.createElement('div');
+    nameRow.className = 'flex flex-wrap items-center gap-1.5';
+    const name = document.createElement('span');
+    name.className = 'font-mono text-sm font-bold tracking-tight text-base-content';
     name.textContent = col.name;
+    nameRow.appendChild(name);
+
     if (col.pk) {
       const chip = document.createElement('span');
-      chip.className = 'chip chip-pk';
+      chip.className = 'badge badge-xs badge-warning font-mono font-bold';
       chip.textContent = 'PK';
-      name.appendChild(chip);
+      nameRow.appendChild(chip);
     }
     if (col.notnull) {
       const chip = document.createElement('span');
-      chip.className = 'chip chip-type';
+      chip.className = 'badge badge-xs badge-info font-mono';
       chip.textContent = 'NOT NULL';
-      name.appendChild(chip);
+      nameRow.appendChild(chip);
+    } else {
+      const chip = document.createElement('span');
+      chip.className = 'badge badge-xs badge-ghost text-base-content/40 font-mono';
+      chip.textContent = 'NULLABLE';
+      nameRow.appendChild(chip);
+    }
+    if (col.unique) {
+      const chip = document.createElement('span');
+      chip.className = 'badge badge-xs badge-secondary font-mono';
+      chip.textContent = 'UNIQUE';
+      nameRow.appendChild(chip);
     }
     if (col.hasDefault) {
       const chip = document.createElement('span');
-      chip.className = 'chip chip-type';
-      chip.textContent = 'default';
-      name.appendChild(chip);
+      chip.className = 'badge badge-xs badge-ghost font-mono';
+      chip.textContent = 'DEFAULT';
+      nameRow.appendChild(chip);
+    }
+    if (col.fk) {
+      const chip = document.createElement('span');
+      chip.className = 'badge badge-xs badge-accent font-mono';
+      chip.textContent = 'FK → ' + col.fk.table;
+      nameRow.appendChild(chip);
     }
-    const type = document.createElement('p');
-    type.className = 'mt-0.5 text-xs text-base-content/45';
-    type.textContent = col.type || 'untyped';
-    title.appendChild(name);
-    title.appendChild(type);
-    head.appendChild(title);
 
+    const typeDesc = document.createElement('p');
+    typeDesc.className = 'mt-0.5 text-[11px] font-mono text-base-content/45';
+    typeDesc.textContent = col.type || 'untyped';
+
+    titleBox.appendChild(nameRow);
+    titleBox.appendChild(typeDesc);
+    head.appendChild(titleBox);
+    top.appendChild(head);
+
+    // Strategy Dropdown with Categorized <optgroup>s
     const select = document.createElement('select');
-    select.className = 'field-select seed-strategy !w-auto !py-1 !text-[13px]';
+    select.className = 'field-select seed-strategy w-full !py-1.5 !text-xs font-medium';
     select.dataset.column = col.name;
+
+    const grouped = {};
     (col.strategies || []).forEach((s) => {
-      const opt = document.createElement('option');
-      opt.value = s.id;
-      opt.textContent = s.label;
-      select.appendChild(opt);
+      const cat = s.category || 'custom_control';
+      if (!grouped[cat]) grouped[cat] = [];
+      grouped[cat].push(s);
     });
-    head.appendChild(select);
-    card.appendChild(head);
 
+    Object.keys(grouped).forEach((cat) => {
+      const grp = document.createElement('optgroup');
+      grp.label = CATEGORY_TITLES[cat] || cat;
+      grouped[cat].forEach((s) => {
+        const opt = document.createElement('option');
+        opt.value = s.id;
+        opt.textContent = s.label;
+        grp.appendChild(opt);
+      });
+      select.appendChild(grp);
+    });
+
+    top.appendChild(select);
+
+    // Live Sample Chip
+    const sampleBox = document.createElement('div');
+    sampleBox.className = 'flex items-center justify-between gap-2 px-2.5 py-1.5 rounded-lg bg-base-200/50 text-[11px]';
+    sampleBox.innerHTML =
+      '<div class="flex items-center gap-1.5 min-w-0 overflow-hidden text-ellipsis">' +
+      '<span class="text-base-content/50 shrink-0 font-medium">Sample:</span>' +
+      '<span class="seed-sample-value font-mono text-primary font-medium truncate">...</span>' +
+      '</div>' +
+      '<button type="button" class="seed-sample-refresh btn btn-ghost btn-xs btn-square h-5 w-5 shrink-0" title="Reroll sample">' +
+      '🎲' +
+      '</button>';
+
+    const sampleRefreshBtn = sampleBox.querySelector('.seed-sample-refresh');
+    sampleRefreshBtn.addEventListener('click', () => updateCardSample(col, card));
+    top.appendChild(sampleBox);
+
+    // Strategy-specific options area
     const options = document.createElement('div');
-    options.className = 'seed-options mt-2.5';
-    card.appendChild(options);
+    options.className = 'seed-options';
+    top.appendChild(options);
+
+    card.appendChild(top);
+
+    // Bottom notes & warnings
+    const bottom = document.createElement('div');
+    bottom.className = 'mt-3 pt-2';
 
     const note = document.createElement('p');
-    note.className = 'seed-note mt-2 hidden text-[11px] leading-relaxed text-base-content/45';
-    card.appendChild(note);
+    note.className = 'seed-note hidden text-[11px] leading-relaxed text-base-content/45';
+    bottom.appendChild(note);
 
     const warn = document.createElement('p');
-    warn.className = 'seed-warn mt-2 hidden text-[11px] font-medium text-warning';
-    card.appendChild(warn);
+    warn.className = 'seed-warn hidden text-[11px] font-medium text-warning flex items-center gap-1';
+    bottom.appendChild(warn);
 
-    // Wire up strategy changes.
+    card.appendChild(bottom);
+
+    // Event listener for strategy selection change
     select.addEventListener('change', () => {
       const st = select.value;
       state[col.name] = Object.assign({}, state[col.name] || {}, { strategy: st });
-      buildOptionInputs(options, col, state[col.name]);
+      buildOptionInputs(options, col, state[col.name], card);
       note.textContent = strategyNote(col, st);
       note.classList.toggle('hidden', !note.textContent);
       updateWarn(col, warn);
+      updateCardSample(col, card);
     });
 
     columnsBox.appendChild(card);
@@ -203,7 +587,7 @@
     const st = state[col.name] ? state[col.name].strategy : null;
     const risky = (st === 'skip' || st === 'null') && !col.pk && col.notnull && !col.hasDefault;
     warnEl.textContent = risky
-      ? 'This column is NOT NULL with no default — "' + st + '" rows may fail to insert.'
+      ? '⚠️ Column is NOT NULL with no default — "' + st + '" rows may fail.'
       : '';
     warnEl.classList.toggle('hidden', !warnEl.textContent);
   }
@@ -211,19 +595,85 @@
   function resetCard(col) {
     const plan = Object.assign({}, col.defaultPlan || { strategy: 'skip' });
     state[col.name] = plan;
-    const select = columnsBox.querySelector('.seed-strategy[data-column="' + CSS.escape(col.name) + '"]');
-    if (select) {
-      select.value = plan.strategy;
-      const options = select.closest('.app-card').querySelector('.seed-options');
-      const note = select.closest('.app-card').querySelector('.seed-note');
-      const warn = select.closest('.app-card').querySelector('.seed-warn');
-      buildOptionInputs(options, col, plan);
+    const card = columnsBox.querySelector('.app-card[data-column="' + CSS.escape(col.name) + '"]');
+    if (card) {
+      const select = card.querySelector('.seed-strategy');
+      const options = card.querySelector('.seed-options');
+      const note = card.querySelector('.seed-note');
+      const warn = card.querySelector('.seed-warn');
+      if (select) select.value = plan.strategy;
+      buildOptionInputs(options, col, plan, card);
       note.textContent = strategyNote(col, plan.strategy);
       note.classList.toggle('hidden', !note.textContent);
       updateWarn(col, warn);
+      updateCardSample(col, card);
     }
   }
 
+  // ---- Filtering / Searching ----------------------------------------------
+
+  function filterColumns() {
+    const q = (searchInput ? searchInput.value : '').toLowerCase().trim();
+    let visible = 0;
+    columns.forEach((col) => {
+      const card = columnsBox.querySelector('.app-card[data-column="' + CSS.escape(col.name) + '"]');
+      if (!card) return;
+      const match = !q || col.name.toLowerCase().includes(q) || (col.type || '').toLowerCase().includes(q);
+      card.classList.toggle('hidden', !match);
+      if (match) visible += 1;
+    });
+
+    if (emptySearchBox) emptySearchBox.classList.toggle('hidden', visible > 0);
+    if (colCountBadge) colCountBadge.textContent = visible === columns.length ? `${columns.length} columns` : `${visible} of ${columns.length} columns`;
+  }
+
+  // ---- Presets ------------------------------------------------------------
+
+  function applyPreset(type) {
+    columns.forEach((col) => {
+      if (type === 'realistic') {
+        resetCard(col);
+      } else if (type === 'minimal') {
+        if (!col.pk && !col.notnull && !col.hasDefault) {
+          state[col.name] = { strategy: 'null' };
+        } else {
+          state[col.name] = Object.assign({}, col.defaultPlan || { strategy: 'skip' });
+        }
+      } else if (type === 'sparse') {
+        state[col.name] = Object.assign({}, col.defaultPlan || { strategy: 'skip' });
+        if (!col.pk && !col.notnull) {
+          state[col.name].nullPct = 30;
+        }
+      } else if (type === 'numbered') {
+        const t = (col.type || '').toUpperCase();
+        if (t.startsWith('INTEGER')) {
+          state[col.name] = { strategy: 'sequence', start: 1, step: 1 };
+        } else if (t === 'TEXT' || t === '') {
+          state[col.name] = { strategy: 'pattern', pattern: 'REC-####' };
+        } else {
+          state[col.name] = Object.assign({}, col.defaultPlan || { strategy: 'skip' });
+        }
+      }
+
+      // Sync DOM
+      const card = columnsBox.querySelector('.app-card[data-column="' + CSS.escape(col.name) + '"]');
+      if (card) {
+        const select = card.querySelector('.seed-strategy');
+        const options = card.querySelector('.seed-options');
+        const note = card.querySelector('.seed-note');
+        const warn = card.querySelector('.seed-warn');
+        if (select) select.value = state[col.name].strategy;
+        buildOptionInputs(options, col, state[col.name], card);
+        note.textContent = strategyNote(col, state[col.name].strategy);
+        note.classList.toggle('hidden', !note.textContent);
+        updateWarn(col, warn);
+        updateCardSample(col, card);
+      }
+    });
+
+    if (window.UI && UI.showToast) UI.showToast('Applied preset: ' + type, 'info');
+  }
+
   // ---- Apply strategy to all ---------------------------------------------
 
   function unionStrategies() {
@@ -237,15 +687,15 @@
     dialog.className = 'modal';
     dialog.id = 'seed-apply-all-dialog';
     const inner = document.createElement('div');
-    inner.className = 'modal-box app-card';
+    inner.className = 'modal-box app-card max-w-md';
     inner.innerHTML =
-      '<h3 class="text-lg font-bold">Apply strategy to all columns</h3>' +
-      '<p class="mt-1 text-sm text-base-content/55">Columns that do not support the chosen strategy are left unchanged. Existing option values are preserved where possible.</p>' +
-      '<label class="field-label mt-4">Strategy</label>' +
-      '<select id="seed-apply-all-select" class="field-select w-full"></select>' +
-      '<div class="mt-6 flex justify-end gap-2">' +
-      '<button id="seed-apply-all-cancel" type="button" class="btn btn-ghost">Cancel</button>' +
-      '<button id="seed-apply-all-go" type="button" class="btn btn-primary">Apply</button>' +
+      '<h3 class="text-base font-bold">Apply strategy to all columns</h3>' +
+      '<p class="mt-1 text-xs text-base-content/60">Columns that do not support the chosen strategy are left untouched.</p>' +
+      '<label class="field-label mt-4 text-xs font-medium">Strategy</label>' +
+      '<select id="seed-apply-all-select" class="field-select w-full text-xs"></select>' +
+      '<div class="mt-5 flex justify-end gap-2">' +
+      '<button id="seed-apply-all-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>' +
+      '<button id="seed-apply-all-go" type="button" class="btn btn-primary btn-sm">Apply to All</button>' +
       '</div>';
     dialog.appendChild(inner);
     document.body.appendChild(dialog);
@@ -266,27 +716,30 @@
         const supported = (col.strategies || []).some((s) => s.id === target);
         if (!supported) return;
         state[col.name] = Object.assign({}, state[col.name] || {}, { strategy: target });
-        const sel = columnsBox.querySelector('.seed-strategy[data-column="' + CSS.escape(col.name) + '"]');
-        if (sel) {
-          sel.value = target;
-          const options = sel.closest('.app-card').querySelector('.seed-options');
-          const note = sel.closest('.app-card').querySelector('.seed-note');
-          const warn = sel.closest('.app-card').querySelector('.seed-warn');
-          buildOptionInputs(options, col, state[col.name]);
+        const card = columnsBox.querySelector('.app-card[data-column="' + CSS.escape(col.name) + '"]');
+        if (card) {
+          const sel = card.querySelector('.seed-strategy');
+          const options = card.querySelector('.seed-options');
+          const note = card.querySelector('.seed-note');
+          const warn = card.querySelector('.seed-warn');
+          if (sel) sel.value = target;
+          buildOptionInputs(options, col, state[col.name], card);
           note.textContent = strategyNote(col, target);
           note.classList.toggle('hidden', !note.textContent);
           updateWarn(col, warn);
+          updateCardSample(col, card);
         }
       });
       close();
+      if (window.UI && UI.showToast) UI.showToast('Strategy applied across columns.', 'success');
     });
     return dialog;
   }
 
-  // ---- Feedback -----------------------------------------------------------
+  // ---- Dual-Mode Preview Rendering ---------------------------------------
 
   function showFeedback(warnings) {
-    feedback.classList.remove('hidden');
+    if (!feedback) return;
     if (!warnings || !warnings.length) {
       feedback.innerHTML = '';
       feedback.classList.add('hidden');
@@ -295,17 +748,136 @@
     feedback.innerHTML =
       '<div class="alert alert-warning shadow-soft">' +
       '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>' +
-      '<div class="text-sm">' + warnings.map((w) => '<p>' + escapeHtml(w) + '</p>').join('') + '</div>' +
+      '<div class="text-xs space-y-1">' + warnings.map((w) => '<p>' + escapeHtml(w) + '</p>').join('') + '</div>' +
       '</div>';
+    feedback.classList.remove('hidden');
+  }
+
+  function renderPreview(data) {
+    lastGeneratedResult = data;
+    if (!previewCard) return;
+
+    previewCard.classList.remove('hidden');
+    if (previewSummaryBadge) {
+      previewSummaryBadge.textContent = `${data.count} row(s) generated`;
+    }
+
+    // 1. SQL View
+    if (sqlCode) sqlCode.textContent = data.sql || '';
+
+    // 2. Table View
+    if (previewThead && previewTbody) {
+      previewThead.innerHTML = '';
+      previewTbody.innerHTML = '';
+
+      const trHead = document.createElement('tr');
+      const thIdx = document.createElement('th');
+      thIdx.className = 'w-12 text-center text-base-content/40';
+      thIdx.textContent = '#';
+      trHead.appendChild(thIdx);
+
+      columns.forEach((col) => {
+        const th = document.createElement('th');
+        th.className = 'whitespace-nowrap font-mono';
+        th.innerHTML = escapeHtml(col.name) + ' <span class="text-[10px] text-base-content/40 font-normal">(' + escapeHtml(col.type || 'text') + ')</span>';
+        trHead.appendChild(th);
+      });
+      previewThead.appendChild(trHead);
+
+      const rows = data.previewRows || [];
+      rows.forEach((row, i) => {
+        const tr = document.createElement('tr');
+        const tdIdx = document.createElement('td');
+        tdIdx.className = 'text-center font-mono text-[10px] text-base-content/40';
+        tdIdx.textContent = String(i + 1);
+        tr.appendChild(tdIdx);
+
+        columns.forEach((col) => {
+          const td = document.createElement('td');
+          td.className = 'font-mono whitespace-nowrap max-w-xs truncate';
+          const val = row[col.name];
+          if (val === null) {
+            td.innerHTML = '<span class="badge badge-xs badge-ghost text-base-content/40">NULL</span>';
+          } else if (val === '(default)') {
+            td.innerHTML = '<span class="badge badge-xs badge-outline text-base-content/40">DEFAULT</span>';
+          } else if (typeof val === 'boolean') {
+            td.innerHTML = val ? '<span class="badge badge-xs badge-success">TRUE</span>' : '<span class="badge badge-xs badge-ghost">FALSE</span>';
+          } else {
+            td.textContent = String(val);
+          }
+          tr.appendChild(td);
+        });
+        previewTbody.appendChild(tr);
+      });
+    }
+
+    previewCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
   }
 
-  function showSql(sql) {
-    sqlCode.textContent = sql;
-    sqlBox.classList.remove('hidden');
-    sqlBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  function setPreviewTab(tab) {
+    if (tab === 'table') {
+      tabTableView.classList.add('tab-active');
+      tabSqlView.classList.remove('tab-active');
+      tableViewContainer.classList.remove('hidden');
+      sqlViewContainer.classList.add('hidden');
+    } else {
+      tabSqlView.classList.add('tab-active');
+      tabTableView.classList.remove('tab-active');
+      sqlViewContainer.classList.remove('hidden');
+      tableViewContainer.classList.add('hidden');
+    }
   }
 
-  // ---- Collect plan + submit ---------------------------------------------
+  // ---- Export Handlers ----------------------------------------------------
+
+  function downloadFile(content, filename, mime) {
+    const blob = new Blob([content], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  function exportCsv() {
+    if (!lastGeneratedResult || !lastGeneratedResult.previewRows) {
+      if (window.UI && UI.showError) UI.showError('Generate preview data first.');
+      return;
+    }
+    const rows = lastGeneratedResult.previewRows;
+    const colNames = columns.map((c) => c.name);
+    let csv = colNames.map((c) => `"${c.replace(/"/g, '""')}"`).join(',') + '\n';
+    rows.forEach((r) => {
+      csv += colNames.map((c) => {
+        const v = r[c];
+        if (v == null) return '';
+        return `"${String(v).replace(/"/g, '""')}"`;
+      }).join(',') + '\n';
+    });
+    downloadFile(csv, `${cfg.table}_seed_data.csv`, 'text/csv;charset=utf-8;');
+  }
+
+  function exportJson() {
+    if (!lastGeneratedResult || !lastGeneratedResult.previewRows) {
+      if (window.UI && UI.showError) UI.showError('Generate preview data first.');
+      return;
+    }
+    const jsonStr = JSON.stringify(lastGeneratedResult.previewRows, null, 2);
+    downloadFile(jsonStr, `${cfg.table}_seed_data.json`, 'application/json;charset=utf-8;');
+  }
+
+  function downloadSql() {
+    if (!lastGeneratedResult || !lastGeneratedResult.sql) {
+      if (window.UI && UI.showError) UI.showError('Generate preview data first.');
+      return;
+    }
+    downloadFile(lastGeneratedResult.sql, `${cfg.table}_seed.sql`, 'text/sql;charset=utf-8;');
+  }
+
+  // ---- Collect Plan + Submit ----------------------------------------------
 
   function collectPlan() {
     const plan = {};
@@ -327,21 +899,43 @@
     return Math.max(1, Math.min(cfg.maxRows || 5000, Number.isFinite(n) ? n : 10));
   }
 
-  async function submit(insert) {
+  async function executeSeed(truncate = false) {
     const count = currentCount();
     const plan = collectPlan();
-    const path = insert ? '/api/tables/' + t + '/seed' : '/api/tables/' + t + '/seed/generate';
+    const path = '/api/tables/' + t + '/seed';
     try {
-      const data = await Api.post(path, { count, plan });
-      if (insert) {
-        UI.showToast(data.message, 'success');
-        showFeedback(data.warnings || []);
-      } else {
-        showSql(data.sql);
-        showFeedback(data.warnings || []);
+      if (insertBtn) {
+        insertBtn.disabled = true;
+        insertBtn.classList.add('loading');
       }
+      const data = await Api.post(path, { count, plan, truncate });
+      if (window.UI && UI.showToast) {
+        UI.showToast(data.message || `Inserted ${data.inserted} row(s) successfully.`, 'success');
+      }
+      showFeedback(data.warnings || []);
     } catch (e) {
-      UI.showError(e.message);
+      if (window.UI && UI.showError) UI.showError(e.message);
+    } finally {
+      if (insertBtn) {
+        insertBtn.disabled = false;
+        insertBtn.classList.remove('loading');
+      }
+    }
+  }
+
+  async function submitPreview() {
+    const count = currentCount();
+    const plan = collectPlan();
+    const path = '/api/tables/' + t + '/seed/generate';
+    try {
+      if (previewBtn) previewBtn.disabled = true;
+      const data = await Api.post(path, { count, plan });
+      renderPreview(data);
+      showFeedback(data.warnings || []);
+    } catch (e) {
+      if (window.UI && UI.showError) UI.showError(e.message);
+    } finally {
+      if (previewBtn) previewBtn.disabled = false;
     }
   }
 
@@ -352,20 +946,139 @@
       buildCard(col);
       resetCard(col);
     });
-    if (insertBtn) insertBtn.addEventListener('click', () => submit(true));
-    if (previewBtn) previewBtn.addEventListener('click', () => submit(false));
+
+    filterColumns();
+
+    // Event Listeners
+    if (searchInput) searchInput.addEventListener('input', filterColumns);
+    if (previewBtn) previewBtn.addEventListener('click', submitPreview);
+
+    if (insertBtn) {
+      insertBtn.addEventListener('click', () => {
+        if (truncateCheckbox && truncateCheckbox.checked) {
+          if (truncateDialog) truncateDialog.showModal();
+        } else {
+          executeSeed(false);
+        }
+      });
+    }
+
+    if (truncateConfirm) {
+      truncateConfirm.addEventListener('click', () => {
+        if (truncateDialog) truncateDialog.close();
+        executeSeed(true);
+      });
+    }
+
+    if (truncateCancel) {
+      truncateCancel.addEventListener('click', () => {
+        if (truncateDialog) truncateDialog.close();
+      });
+    }
+
     if (resetBtn) resetBtn.addEventListener('click', () => columns.forEach(resetCard));
-    if (applyAllBtn) applyAllBtn.addEventListener('click', () => {
-      const dialog = document.getElementById('seed-apply-all-dialog') || buildApplyAllDialog();
-      dialog.showModal();
+    if (refreshSamplesBtn) refreshSamplesBtn.addEventListener('click', () => {
+      columns.forEach((col) => {
+        const card = columnsBox.querySelector('.app-card[data-column="' + CSS.escape(col.name) + '"]');
+        if (card) updateCardSample(col, card);
+      });
     });
-    if (copyBtn) {
-      copyBtn.addEventListener('click', () => {
+
+    if (applyAllBtn) {
+      applyAllBtn.addEventListener('click', () => {
+        const dialog = document.getElementById('seed-apply-all-dialog') || buildApplyAllDialog();
+        dialog.showModal();
+      });
+    }
+
+    // Presets
+    const pReal = document.getElementById('preset-realistic');
+    const pMin = document.getElementById('preset-minimal');
+    const pSparse = document.getElementById('preset-sparse');
+    const pNum = document.getElementById('preset-numbered');
+    if (pReal) pReal.addEventListener('click', () => applyPreset('realistic'));
+    if (pMin) pMin.addEventListener('click', () => applyPreset('minimal'));
+    if (pSparse) pSparse.addEventListener('click', () => applyPreset('sparse'));
+    if (pNum) pNum.addEventListener('click', () => applyPreset('numbered'));
+
+    // Config export / import
+    if (exportConfigBtn) {
+      exportConfigBtn.addEventListener('click', () => {
+        if (!configDialog || !configTextarea) return;
+        configDialogTitle.textContent = 'Export Seed Plan';
+        configTextarea.value = JSON.stringify(collectPlan(), null, 2);
+        configDialogApply.classList.add('hidden');
+        configDialog.showModal();
+      });
+    }
+
+    if (importConfigBtn) {
+      importConfigBtn.addEventListener('click', () => {
+        if (!configDialog || !configTextarea) return;
+        configDialogTitle.textContent = 'Import Seed Plan';
+        configTextarea.value = '';
+        configTextarea.placeholder = 'Paste plan JSON here...';
+        configDialogApply.classList.remove('hidden');
+        configDialog.showModal();
+      });
+    }
+
+    if (configDialogCancel) {
+      configDialogCancel.addEventListener('click', () => {
+        if (configDialog) configDialog.close();
+      });
+    }
+
+    if (configDialogApply) {
+      configDialogApply.addEventListener('click', () => {
+        try {
+          const imported = JSON.parse(configTextarea.value);
+          if (typeof imported !== 'object' || !imported) throw new Error('Invalid JSON format');
+          columns.forEach((col) => {
+            if (imported[col.name]) {
+              state[col.name] = imported[col.name];
+              const card = columnsBox.querySelector('.app-card[data-column="' + CSS.escape(col.name) + '"]');
+              if (card) {
+                const select = card.querySelector('.seed-strategy');
+                const options = card.querySelector('.seed-options');
+                const note = card.querySelector('.seed-note');
+                const warn = card.querySelector('.seed-warn');
+                if (select) select.value = state[col.name].strategy;
+                buildOptionInputs(options, col, state[col.name], card);
+                note.textContent = strategyNote(col, state[col.name].strategy);
+                note.classList.toggle('hidden', !note.textContent);
+                updateWarn(col, warn);
+                updateCardSample(col, card);
+              }
+            }
+          });
+          if (configDialog) configDialog.close();
+          if (window.UI && UI.showToast) UI.showToast('Seed plan configuration applied!', 'success');
+        } catch (err) {
+          if (window.UI && UI.showError) UI.showError('Failed to parse JSON: ' + err.message);
+        }
+      });
+    }
+
+    // Dual-mode tabs
+    if (tabTableView) tabTableView.addEventListener('click', () => setPreviewTab('table'));
+    if (tabSqlView) tabSqlView.addEventListener('click', () => setPreviewTab('sql'));
+
+    // Export buttons
+    if (copySqlBtn) {
+      copySqlBtn.addEventListener('click', () => {
+        if (!sqlCode || !sqlCode.textContent) return;
         navigator.clipboard.writeText(sqlCode.textContent)
-          .then(() => UI.showToast('Copied to clipboard.', 'success'))
-          .catch(() => UI.showError('Could not copy.'));
+          .then(() => UI.showToast('Copied SQL to clipboard.', 'success'))
+          .catch(() => UI.showError('Could not copy SQL.'));
       });
     }
+
+    if (downloadSqlBtn) downloadSqlBtn.addEventListener('click', downloadSql);
+    if (exportCsvBtn) exportCsvBtn.addEventListener('click', exportCsv);
+    if (exportJsonBtn) exportJsonBtn.addEventListener('click', exportJson);
+
+    // Quick counts
     document.querySelectorAll('.seed-quick').forEach((btn) => {
       btn.addEventListener('click', () => {
         if (countInput) countInput.value = btn.dataset.n;