admindb 2.4.1 → 2.6.0

package/dist/views/pages/seed.hbs

@@ -1,307 +1 @@
-<div class="space-y-4 pb-20">
-  <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
-    <div class="flex items-center gap-3 min-w-0">
-      <a href="{{basePath}}/seed/{{encodeUri dbId}}" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Choose table & mode">
-        {{{icon "arrowLeft" class="h-4 w-4"}}}
-      </a>
-      <div class="h-4 w-px bg-base-300"></div>
-      <div class="flex items-center gap-2 flex-wrap">
-        <a href="{{basePath}}/seed/{{encodeUri dbId}}" class="text-xs font-semibold text-base-content/50 hover:text-primary transition-colors">Seed Data</a>
-        <span class="text-xs text-base-content/30">/</span>
-        {{#if allTables.length}}
-        <div class="dropdown dropdown-bottom">
-          <label tabindex="0" class="btn btn-xs btn-ghost gap-1 font-mono font-bold text-xs" title="Switch table">
-            <span>{{table}}</span>
-            {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
-          </label>
-          <ul tabindex="0" class="dropdown-content z-30 menu p-1 shadow-lg bg-base-100 border border-base-300 rounded-box w-52 max-h-60 overflow-y-auto">
-            {{#each allTables}}
-              <li>
-                <a href="{{../basePath}}/seed/{{encodeUri ../dbId}}/{{encodeUri this}}" class="{{#if (eq this ../table)}}active font-bold{{/if}} font-mono text-xs">
-                  {{{icon "table" class="h-3.5 w-3.5"}}}
-                  {{this}}
-                </a>
-              </li>
-            {{/each}}
-          </ul>
-        </div>
-        {{else}}
-        <span class="font-mono font-bold text-sm text-base-content">{{table}}</span>
-        {{/if}}
-        <span class="badge badge-sm badge-ghost font-mono text-[11px] text-base-content/60">{{colCount}} cols</span>
-        {{#if dialect}}
-          <span class="badge badge-sm badge-outline font-mono text-[10px] uppercase text-base-content/50">{{dialect}}</span>
-        {{/if}}
-      </div>
-    </div>
-    <div class="flex items-center gap-2.5 flex-wrap">
-      <div class="seed-mode-segment">
-        <button type="button" id="btn-select-single" class="seed-mode-btn {{#unless isChainMode}}active{{/unless}}">
-          {{{icon "table" class="h-3.5 w-3.5"}}}
-          <span>Single Table</span>
-        </button>
-        <button type="button" id="btn-select-chain" class="seed-mode-btn {{#if isChainMode}}active{{/if}}">
-          {{{icon "diagram" class="h-3.5 w-3.5"}}}
-          <span>ER Chain</span>
-        </button>
-      </div>
-      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
-      <div class="flex items-center gap-1.5" title="Numeric seed for deterministic generation">
-        <div class="relative">
-          <input id="plan-seed-input" type="number" placeholder="Seed (auto)"
-            class="field-input w-28 font-mono text-xs !py-1 pl-2.5 pr-6" />
-          <span class="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-mono text-base-content/40">#</span>
-        </div>
-        <button type="button" id="btn-random-seed" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Roll random seed">
-          {{{icon "refresh" class="h-3.5 w-3.5"}}}
-        </button>
-      </div>
-      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
-      <div class="flex items-center gap-1">
-        <button type="button" id="btn-profiles-modal" class="btn btn-sm btn-ghost gap-1.5 text-xs text-base-content/80 hover:text-base-content" title="Manage seed profiles">
-          {{{icon "book" class="h-3.5 w-3.5 text-primary"}}}
-          <span class="hidden md:inline">Profiles</span>
-        </button>
-        <button type="button" id="btn-export-plan-json" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Export generation plan JSON">
-          {{{icon "download" class="h-3.5 w-3.5"}}}
-        </button>
-        <label for="input-import-plan-json" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content cursor-pointer" title="Import generation plan JSON">
-          {{{icon "upload" class="h-3.5 w-3.5"}}}
-          <input type="file" id="input-import-plan-json" accept=".json" class="hidden" />
-        </label>
-      </div>
-      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
-      <button id="seed-insert" type="button" class="btn btn-primary btn-sm gap-2 font-bold px-4 shadow-sm">
-        {{{icon "play" class="h-3.5 w-3.5"}}}
-        <span>Execute Seed</span>
-      </button>
-    </div>
-  </div>
-  <div id="step-content-1" class="hidden">
-    <button id="btn-next-1" class="hidden"></button>
-  </div>
-  <div id="step-content-2" class="contents">
-    <button id="btn-prev-2" class="hidden"></button>
-    <button id="btn-next-2" class="hidden"></button>
-  </div>
-  <div id="step-content-3" class="contents">
-    <button id="btn-prev-3" class="hidden"></button>
-  </div>
-  <div id="step-nav-1" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
-  <div id="step-nav-2" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
-  <div id="step-nav-3" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
-  <div id="wizard-progress-bar" class="hidden"></div>
-  <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 items-start">
-    <div class="xl:col-span-7 space-y-4">
-      <div id="config-single" class="{{#if isChainMode}}hidden{{/if}} space-y-4">
-        <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
-          <div class="flex items-center gap-3">
-            <div class="flex items-center">
-              <button type="button" id="seed-count-dec" class="btn btn-xs btn-outline rounded-r-none border-r-0 px-2.5 font-mono text-sm hover:bg-primary hover:text-primary-content hover:border-primary">−</button>
-              <input id="seed-count" type="number" value="10" min="1" max="{{maxRows}}"
-                class="field-input !rounded-none border-x-0 !py-0.5 font-mono w-20 font-bold text-xs text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
-              <button type="button" id="seed-count-inc" class="btn btn-xs btn-outline rounded-l-none border-l-0 px-2.5 font-mono text-sm hover:bg-primary hover:text-primary-content hover:border-primary">+</button>
-            </div>
-            <span class="text-[11px] uppercase font-bold text-base-content/50">Rows</span>
-            <div class="h-4 w-px bg-base-200 hidden sm:block"></div>
-            <div class="flex gap-1 flex-wrap">
-              {{#each quickCounts}}
-                <button type="button" class="preset-pill btn btn-xs btn-ghost border border-base-300 font-mono text-[11px] px-2" data-count="{{this}}">{{this}}</button>
-              {{/each}}
-            </div>
-          </div>
-          <div class="flex items-center gap-2 w-full sm:w-auto">
-            <input type="text" id="seed-col-search" placeholder="Filter columns…" class="field-input text-xs !py-1 w-full sm:w-48" />
-            <span id="col-count-badge" class="badge badge-sm badge-ghost font-mono text-[11px] shrink-0">{{colCount}} cols</span>
-          </div>
-        </div>
-        <div class="app-card p-4 space-y-3">
-          <div class="flex items-center justify-between pb-2 border-b border-base-200">
-            <span class="text-xs font-bold uppercase tracking-wider text-base-content/70">Columns Specification</span>
-            <span class="text-[11px] text-base-content/40">Select generator strategy & customize parameters per column</span>
-          </div>
-          <div id="seed-columns" class="space-y-2.5">
-          </div>
-        </div>
-      </div>
-      <div id="config-chain" class="{{#unless isChainMode}}hidden{{/unless}} space-y-4">
-        <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
-          <div class="flex items-center gap-3">
-            <label class="text-xs font-bold text-base-content/70">Graph Scope:</label>
-            <select id="chain-scope" class="field-select !py-1 text-xs font-semibold w-52">
-              <option value="chain">Connected Relational Chain</option>
-              <option value="ancestors">Upstream Parents Only</option>
-              <option value="descendants">Downstream Children Only</option>
-              <option value="all">Entire Database (All Tables)</option>
-            </select>
-          </div>
-          <div class="flex items-center gap-2">
-            <span class="text-xs font-bold text-base-content/70">Scale:</span>
-            <div class="join">
-              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="0.5">0.5×</button>
-              <button type="button" class="chain-scale-btn btn btn-xs join-item btn-neutral font-mono" data-scale="1">1×</button>
-              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="2">2×</button>
-              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="5">5×</button>
-            </div>
-            <span id="chain-summary-badge" class="badge badge-sm badge-primary font-mono font-bold ml-2">0 Tables</span>
-          </div>
-        </div>
-        <div class="app-card p-4 space-y-3">
-          <div class="flex items-center justify-between pb-2 border-b border-base-200">
-            <span class="text-xs font-bold uppercase tracking-wider text-base-content/70">Topological Execution Pipeline</span>
-            <span class="text-[11px] text-base-content/40">Dependencies ordered upstream-first</span>
-          </div>
-          <div id="chain-pipeline-container" class="space-y-2.5">
-          </div>
-        </div>
-      </div>
-      <details class="app-card group">
-        <summary class="p-3.5 flex items-center justify-between cursor-pointer list-none select-none text-xs font-bold text-base-content/70 hover:text-base-content">
-          <div class="flex items-center gap-2">
-            {{{icon "settings" class="h-3.5 w-3.5"}}}
-            <span>Advanced Execution Options</span>
-          </div>
-          <span class="text-xs text-base-content/40 group-open:rotate-180 transition-transform">▼</span>
-        </summary>
-        <div class="p-3.5 pt-0 border-t border-base-200/80 mt-1 flex flex-wrap items-center gap-6 text-xs">
-          <label class="cursor-pointer flex items-center gap-2 select-none group">
-            <input id="plan-transaction-opt" type="checkbox" checked class="checkbox checkbox-primary checkbox-xs" />
-            <span class="font-medium text-base-content/80 group-hover:text-base-content">Wrap in Transaction (BEGIN ... COMMIT)</span>
-          </label>
-          <label class="cursor-pointer flex items-center gap-2 select-none group">
-            <input id="plan-rollback-opt" type="checkbox" checked class="checkbox checkbox-primary checkbox-xs" />
-            <span class="font-medium text-base-content/80 group-hover:text-base-content">Atomic Rollback on Error</span>
-          </label>
-          <label class="cursor-pointer flex items-center gap-2 select-none group">
-            <input id="seed-truncate" type="checkbox" class="checkbox checkbox-error checkbox-xs" />
-            <span class="font-medium text-error/90 group-hover:text-error">Clear tables before inserting (Truncate)</span>
-          </label>
-        </div>
-      </details>
-    </div>
-    <div class="xl:col-span-5 space-y-4 xl:sticky xl:top-4">
-      <div id="validation-report-card" class="app-card p-3.5 space-y-2">
-        <div class="flex items-center justify-between">
-          <div id="validation-summary-pill" class="flex items-center gap-2">
-            <span id="validation-status-dot" class="w-2 h-2 rounded-full bg-success"></span>
-            <span id="validation-status-text" class="text-xs font-mono font-bold text-base-content">Plan Ready</span>
-          </div>
-          <span id="validation-summary-chip" class="badge badge-sm badge-success font-mono text-[10px] font-bold">All Checks Passed</span>
-        </div>
-        <div id="validation-issues-list" class="space-y-1.5 text-xs">
-          <div class="flex items-center gap-2 text-success font-medium text-[11px]">
-            {{{icon "check" class="h-3.5 w-3.5 shrink-0"}}}
-            <span>Primary key & constraint strategies valid</span>
-          </div>
-        </div>
-      </div>
-      <div class="app-card overflow-hidden">
-        <div class="flex items-center justify-between p-3 border-b border-base-200 bg-base-100 gap-2 flex-wrap">
-          <div class="join">
-            <button type="button" id="preview-tab-grid" class="btn btn-xs join-item btn-active font-bold">Table Preview</button>
-            <button type="button" id="preview-tab-sql" class="btn btn-xs join-item font-bold">SQL Script</button>
-          </div>
-          <button id="seed-refresh-preview" type="button" class="btn btn-xs btn-ghost gap-1 text-xs text-base-content/70 hover:text-primary">
-            {{{icon "refresh" class="h-3 w-3"}}}
-            <span>Refresh</span>
-          </button>
-        </div>
-        <div id="seed-chain-table-tabs" class="tabs tabs-bordered flex-nowrap w-full overflow-x-auto hidden px-3 py-1 bg-base-200/40 border-b border-base-200 text-xs"></div>
-        <div id="preview-view-grid">
-          <div class="overflow-x-auto max-h-[440px]">
-            <table class="table table-zebra table-pin-rows table-xs w-full">
-              <thead id="seed-preview-thead" class="bg-base-200/90 text-[10px] uppercase font-mono tracking-wider text-base-content/70 backdrop-blur sticky top-0 z-10"></thead>
-              <tbody id="seed-preview-tbody" class="font-mono text-[11px]">
-                <tr>
-                  <td colspan="100" class="text-center py-12 opacity-50">
-                    <div class="flex flex-col items-center gap-2">
-                      <span class="loading loading-spinner loading-sm text-primary"></span>
-                      <span class="text-xs">Generating preview…</span>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-        <div id="preview-view-sql" class="hidden p-3 bg-base-200/20 space-y-2">
-          <div class="flex items-center justify-between">
-            <span class="text-[11px] font-mono text-base-content/50 uppercase font-bold">Generated SQL (Preview)</span>
-            <button type="button" id="btn-copy-sql" class="btn btn-xs btn-outline gap-1 text-[11px]">
-              {{{icon "copy" class="h-3 w-3"}}}
-              <span>Copy SQL</span>
-            </button>
-          </div>
-          <pre id="preview-sql-code" class="bg-neutral text-neutral-content p-3.5 rounded-lg font-mono text-xs overflow-x-auto max-h-[380px] border border-base-300 leading-relaxed"></pre>
-        </div>
-      </div>
-      <div id="seed-truncate-banner" class="hidden p-3 rounded-lg bg-error/10 border border-error/20 flex items-center gap-2.5">
-        <span class="text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
-        <p class="text-xs font-bold text-error">
-          Destructive Action: Existing table rows will be truncated before seeding.
-        </p>
-      </div>
-      <div id="seed-execute-bar" class="hidden"></div>
-      <div id="seed-feedback" class="hidden"></div>
-    </div>
-  </div>
-</div>
-<dialog id="seed-profiles-dialog" class="modal">
-  <div class="modal-box p-0 overflow-hidden max-w-lg rounded-2xl border border-base-200 shadow-xl">
-    <div class="px-5 py-4 bg-base-200/50 border-b border-base-200 flex items-center justify-between">
-      <div class="flex items-center gap-2.5">
-        {{{icon "book" class="h-4 w-4 text-primary"}}}
-        <h3 class="font-bold text-sm text-base-content">Seed Profiles & Presets</h3>
-      </div>
-      <button type="button" class="btn btn-xs btn-circle btn-ghost" id="btn-close-profiles">✕</button>
-    </div>
-    <div class="p-5 space-y-4 text-xs">
-      <div>
-        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/50 mb-2">Quick Blueprints</h4>
-        <div class="grid grid-cols-3 gap-2">
-          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="smoke">⚡ Smoke (10)</button>
-          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="realistic">🌱 Standard (100)</button>
-          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="stress">🚀 Stress (1000)</button>
-        </div>
-      </div>
-      <div class="p-3 rounded-lg bg-base-200/40 border border-base-300 space-y-2">
-        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/60">Save Current Configuration</h4>
-        <div class="flex gap-2">
-          <input id="profile-name-input" type="text" placeholder="Profile name (e.g. Test Dataset)"
-            class="field-input flex-1 text-xs !py-1 font-medium" />
-          <button type="button" id="btn-save-profile" class="btn btn-xs btn-primary px-3 font-bold">Save</button>
-        </div>
-      </div>
-      <div>
-        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/50 mb-1.5">Saved Profiles</h4>
-        <div id="profiles-list-container" class="space-y-1.5 max-h-48 overflow-y-auto pr-1">
-          <div class="py-4 text-center text-xs text-base-content/40">No saved profiles yet.</div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop bg-base-300/60 backdrop-blur-sm"><button>close</button></form>
-</dialog>
-<dialog id="seed-truncate-dialog" class="modal">
-  <div class="modal-box p-0 overflow-hidden max-w-md rounded-2xl border border-error/20 shadow-xl">
-    <div class="px-5 py-4 bg-error/5 border-b border-error/15 flex items-center gap-2.5">
-      <span class="text-error">{{{icon "warning" class="h-5 w-5"}}}</span>
-      <h3 class="font-bold text-sm text-error">Confirm Truncate Action</h3>
-    </div>
-    <div class="p-5 space-y-3 text-xs text-base-content/80 leading-relaxed">
-      <p>
-        You have enabled <strong class="text-error">Clear tables before inserting</strong>. All existing records in affected tables will be permanently deleted in reverse topological order before new rows are inserted.
-      </p>
-    </div>
-    <div class="px-5 pb-4 flex items-center justify-end gap-2">
-      <button type="button" class="btn btn-ghost btn-xs" id="seed-truncate-cancel">Cancel</button>
-      <button type="button" class="btn btn-error btn-xs font-bold gap-1.5" id="seed-truncate-confirm">
-        {{{icon "warning" class="h-3.5 w-3.5"}}}
-        <span>Yes, Truncate & Seed</span>
-      </button>
-    </div>
-  </div>
-  <form method="dialog" class="modal-backdrop bg-base-300/60 backdrop-blur-sm"><button>close</button></form>
-</dialog>
-<script id="seed-config" type="application/json">{{{json seedConfig}}}</script>
-<script src="{{basePath}}/js/seed.js" defer></script>
+<div class="space-y-4 pb-20">
  <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
    <div class="flex items-center gap-3 min-w-0">
      <a href="{{basePath}}/seed/{{encodeUri dbId}}" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Choose table & mode">
        {{{icon "arrowLeft" class="h-4 w-4"}}}
      </a>
      <div class="h-4 w-px bg-base-300"></div>
      <div class="flex items-center gap-2 flex-wrap">
        <a href="{{basePath}}/seed/{{encodeUri dbId}}" class="text-xs font-semibold text-base-content/50 hover:text-primary transition-colors">Seed Data</a>
        <span class="text-xs text-base-content/30">/</span>
        {{#if allTables.length}}
        <div class="dropdown dropdown-bottom">
          <label tabindex="0" class="btn btn-xs btn-ghost gap-1 font-mono font-bold text-xs" title="Switch table">
            <span>{{table}}</span>
            {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
          </label>
          <ul tabindex="0" class="dropdown-content z-30 menu p-1 shadow-lg bg-base-100 border border-base-300 rounded-box w-52 max-h-60 overflow-y-auto">
            {{#each allTables}}
              <li>
                <a href="{{../basePath}}/seed/{{encodeUri ../dbId}}/{{encodeUri this}}" class="{{#if (eq this ../table)}}active font-bold{{/if}} font-mono text-xs">
                  {{{icon "table" class="h-3.5 w-3.5"}}}
                  {{this}}
                </a>
              </li>
            {{/each}}
          </ul>
        </div>
        {{else}}
        <span class="font-mono font-bold text-sm text-base-content">{{table}}</span>
        {{/if}}
        <span class="badge badge-sm badge-ghost font-mono text-[11px] text-base-content/60">{{colCount}} cols</span>
        {{#if dialect}}
          <span class="badge badge-sm badge-outline font-mono text-[10px] uppercase text-base-content/50">{{dialect}}</span>
        {{/if}}
      </div>
    </div>
    <div class="flex items-center gap-2.5 flex-wrap">
      <div class="seed-mode-segment">
        <button type="button" id="btn-select-single" class="seed-mode-btn {{#unless isChainMode}}active{{/unless}}">
          {{{icon "table" class="h-3.5 w-3.5"}}}
          <span>Single Table</span>
        </button>
        <button type="button" id="btn-select-chain" class="seed-mode-btn {{#if isChainMode}}active{{/if}}">
          {{{icon "diagram" class="h-3.5 w-3.5"}}}
          <span>ER Chain</span>
        </button>
      </div>
      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
      <div class="flex items-center gap-1.5" title="Numeric seed for deterministic generation">
        <div class="relative">
          <input id="plan-seed-input" type="number" placeholder="Seed (auto)"
            class="field-input w-28 font-mono text-xs !py-1 pl-2.5 pr-6" />
          <span class="absolute right-2 top-1/2 -translate-y-1/2 text-[10px] font-mono text-base-content/40">#</span>
        </div>
        <button type="button" id="btn-random-seed" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Roll random seed">
          {{{icon "refresh" class="h-3.5 w-3.5"}}}
        </button>
      </div>
      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
      <div class="flex items-center gap-1">
        <button type="button" id="btn-profiles-modal" class="btn btn-sm btn-ghost gap-1.5 text-xs text-base-content/80 hover:text-base-content" title="Manage seed profiles">
          {{{icon "book" class="h-3.5 w-3.5 text-primary"}}}
          <span class="hidden md:inline">Profiles</span>
        </button>
        <button type="button" id="btn-export-plan-json" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content" title="Export generation plan JSON">
          {{{icon "download" class="h-3.5 w-3.5"}}}
        </button>
        <label for="input-import-plan-json" class="btn btn-sm btn-ghost btn-square text-base-content/70 hover:text-base-content cursor-pointer" title="Import generation plan JSON">
          {{{icon "upload" class="h-3.5 w-3.5"}}}
          <input type="file" id="input-import-plan-json" accept=".json" class="hidden" />
        </label>
      </div>
      <div class="h-4 w-px bg-base-300 hidden sm:block"></div>
      <button id="seed-insert" type="button" class="btn btn-primary btn-sm gap-2 font-bold px-4 shadow-sm">
        {{{icon "play" class="h-3.5 w-3.5"}}}
        <span>Execute Seed</span>
      </button>
    </div>
  </div>
  <div id="step-content-1" class="hidden">
    <button id="btn-next-1" class="hidden"></button>
  </div>
  <div id="step-content-2" class="contents">
    <button id="btn-prev-2" class="hidden"></button>
    <button id="btn-next-2" class="hidden"></button>
  </div>
  <div id="step-content-3" class="contents">
    <button id="btn-prev-3" class="hidden"></button>
  </div>
  <div id="step-nav-1" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
  <div id="step-nav-2" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
  <div id="step-nav-3" class="hidden"><div class="seed-step-circle"><span class="seed-step-num"></span><span class="seed-step-check"></span></div></div>
  <div id="wizard-progress-bar" class="hidden"></div>
  <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 items-start">
    <div class="xl:col-span-7 space-y-4">
      <div id="config-single" class="{{#if isChainMode}}hidden{{/if}} space-y-4">
        <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
          <div class="flex items-center gap-3">
            <div class="flex items-center">
              <button type="button" id="seed-count-dec" class="btn btn-xs btn-outline rounded-r-none border-r-0 px-2.5 font-mono text-sm hover:bg-primary hover:text-primary-content hover:border-primary">−</button>
              <input id="seed-count" type="number" value="10" min="1" max="{{maxRows}}"
                class="field-input !rounded-none border-x-0 !py-0.5 font-mono w-20 font-bold text-xs text-center [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" />
              <button type="button" id="seed-count-inc" class="btn btn-xs btn-outline rounded-l-none border-l-0 px-2.5 font-mono text-sm hover:bg-primary hover:text-primary-content hover:border-primary">+</button>
            </div>
            <span class="text-[11px] uppercase font-bold text-base-content/50">Rows</span>
            <div class="h-4 w-px bg-base-200 hidden sm:block"></div>
            <div class="flex gap-1 flex-wrap">
              {{#each quickCounts}}
                <button type="button" class="preset-pill btn btn-xs btn-ghost border border-base-300 font-mono text-[11px] px-2" data-count="{{this}}">{{this}}</button>
              {{/each}}
            </div>
          </div>
          <div class="flex items-center gap-2 w-full sm:w-auto">
            <input type="text" id="seed-col-search" placeholder="Filter columns…" class="field-input text-xs !py-1 w-full sm:w-48" />
            <span id="col-count-badge" class="badge badge-sm badge-ghost font-mono text-[11px] shrink-0">{{colCount}} cols</span>
          </div>
        </div>
        <div class="app-card p-4 space-y-3">
          <div class="flex items-center justify-between pb-2 border-b border-base-200">
            <span class="text-xs font-bold uppercase tracking-wider text-base-content/70">Columns Specification</span>
            <span class="text-[11px] text-base-content/40">Select generator strategy & customize parameters per column</span>
          </div>
          <div id="seed-columns" class="space-y-2.5">
          </div>
        </div>
      </div>
      <div id="config-chain" class="{{#unless isChainMode}}hidden{{/unless}} space-y-4">
        <div class="app-card p-3.5 flex flex-wrap items-center justify-between gap-4">
          <div class="flex items-center gap-3">
            <label class="text-xs font-bold text-base-content/70">Graph Scope:</label>
            <select id="chain-scope" class="field-select !py-1 text-xs font-semibold w-52">
              <option value="chain">Connected Relational Chain</option>
              <option value="ancestors">Upstream Parents Only</option>
              <option value="descendants">Downstream Children Only</option>
              <option value="all">Entire Database (All Tables)</option>
            </select>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-xs font-bold text-base-content/70">Scale:</span>
            <div class="join">
              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="0.5">0.5×</button>
              <button type="button" class="chain-scale-btn btn btn-xs join-item btn-neutral font-mono" data-scale="1">1×</button>
              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="2">2×</button>
              <button type="button" class="chain-scale-btn btn btn-xs join-item font-mono" data-scale="5">5×</button>
            </div>
            <span id="chain-summary-badge" class="badge badge-sm badge-primary font-mono font-bold ml-2">0 Tables</span>
          </div>
        </div>
        <div class="app-card p-4 space-y-3">
          <div class="flex items-center justify-between pb-2 border-b border-base-200">
            <span class="text-xs font-bold uppercase tracking-wider text-base-content/70">Topological Execution Pipeline</span>
            <span class="text-[11px] text-base-content/40">Dependencies ordered upstream-first</span>
          </div>
          <div id="chain-pipeline-container" class="space-y-2.5">
          </div>
        </div>
      </div>
      <details class="app-card group">
        <summary class="p-3.5 flex items-center justify-between cursor-pointer list-none select-none text-xs font-bold text-base-content/70 hover:text-base-content">
          <div class="flex items-center gap-2">
            {{{icon "settings" class="h-3.5 w-3.5"}}}
            <span>Advanced Execution Options</span>
          </div>
          <span class="text-xs text-base-content/40 group-open:rotate-180 transition-transform">▼</span>
        </summary>
        <div class="p-3.5 pt-0 border-t border-base-200/80 mt-1 flex flex-wrap items-center gap-6 text-xs">
          <label class="cursor-pointer flex items-center gap-2 select-none group">
            <input id="plan-transaction-opt" type="checkbox" checked class="checkbox checkbox-primary checkbox-xs" />
            <span class="font-medium text-base-content/80 group-hover:text-base-content">Wrap in Transaction (BEGIN ... COMMIT)</span>
          </label>
          <label class="cursor-pointer flex items-center gap-2 select-none group">
            <input id="plan-rollback-opt" type="checkbox" checked class="checkbox checkbox-primary checkbox-xs" />
            <span class="font-medium text-base-content/80 group-hover:text-base-content">Atomic Rollback on Error</span>
          </label>
          <label class="cursor-pointer flex items-center gap-2 select-none group">
            <input id="seed-truncate" type="checkbox" class="checkbox checkbox-error checkbox-xs" />
            <span class="font-medium text-error/90 group-hover:text-error">Clear tables before inserting (Truncate)</span>
          </label>
        </div>
      </details>
    </div>
    <div class="xl:col-span-5 space-y-4 xl:sticky xl:top-4">
      <div id="validation-report-card" class="app-card p-3.5 space-y-2">
        <div class="flex items-center justify-between">
          <div id="validation-summary-pill" class="flex items-center gap-2">
            <span id="validation-status-dot" class="w-2 h-2 rounded-full bg-success"></span>
            <span id="validation-status-text" class="text-xs font-mono font-bold text-base-content">Plan Ready</span>
          </div>
          <span id="validation-summary-chip" class="badge badge-sm badge-success font-mono text-[10px] font-bold">All Checks Passed</span>
        </div>
        <div id="validation-issues-list" class="space-y-1.5 text-xs">
          <div class="flex items-center gap-2 text-success font-medium text-[11px]">
            {{{icon "check" class="h-3.5 w-3.5 shrink-0"}}}
            <span>Primary key & constraint strategies valid</span>
          </div>
        </div>
      </div>
      <div class="app-card overflow-hidden">
        <div class="flex items-center justify-between p-3 border-b border-base-200 bg-base-100 gap-2 flex-wrap">
          <div class="join">
            <button type="button" id="preview-tab-grid" class="btn btn-xs join-item btn-active font-bold">Table Preview</button>
            <button type="button" id="preview-tab-sql" class="btn btn-xs join-item font-bold">SQL Script</button>
          </div>
          <button id="seed-refresh-preview" type="button" class="btn btn-xs btn-ghost gap-1 text-xs text-base-content/70 hover:text-primary">
            {{{icon "refresh" class="h-3 w-3"}}}
            <span>Refresh</span>
          </button>
        </div>
        <div id="seed-chain-table-tabs" class="tabs tabs-bordered flex-nowrap w-full overflow-x-auto hidden px-3 py-1 bg-base-200/40 border-b border-base-200 text-xs"></div>
        <div id="preview-view-grid">
          <div class="overflow-x-auto max-h-[440px]">
            <table class="table table-zebra table-pin-rows table-xs w-full">
              <thead id="seed-preview-thead" class="bg-base-200/90 text-[10px] uppercase font-mono tracking-wider text-base-content/70 backdrop-blur sticky top-0 z-10"></thead>
              <tbody id="seed-preview-tbody" class="font-mono text-[11px]">
                <tr>
                  <td colspan="100" class="text-center py-12 opacity-50">
                    <div class="flex flex-col items-center gap-2">
                      <span class="loading loading-spinner loading-sm text-primary"></span>
                      <span class="text-xs">Generating preview…</span>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div id="preview-view-sql" class="hidden p-3 bg-base-200/20 space-y-2">
          <div class="flex items-center justify-between">
            <span class="text-[11px] font-mono text-base-content/50 uppercase font-bold">Generated SQL (Preview)</span>
            <button type="button" id="btn-copy-sql" class="btn btn-xs btn-outline gap-1 text-[11px]">
              {{{icon "copy" class="h-3 w-3"}}}
              <span>Copy SQL</span>
            </button>
          </div>
          <pre id="preview-sql-code" class="bg-neutral text-neutral-content p-3.5 rounded-lg font-mono text-xs overflow-x-auto max-h-[380px] border border-base-300 leading-relaxed"></pre>
        </div>
      </div>
      <div id="seed-truncate-banner" class="hidden p-3 rounded-lg bg-error/10 border border-error/20 flex items-center gap-2.5">
        <span class="text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
        <p class="text-xs font-bold text-error">
          Destructive Action: Existing table rows will be truncated before seeding.
        </p>
      </div>
      <div id="seed-execute-bar" class="hidden"></div>
      <div id="seed-feedback" class="hidden"></div>
    </div>
  </div>
  <div class="modal-box p-0 overflow-hidden max-w-lg rounded-2xl border border-base-200 shadow-xl">
    <div class="px-5 py-4 bg-base-200/50 border-b border-base-200 flex items-center justify-between">
      <div class="flex items-center gap-2.5">
        {{{icon "book" class="h-4 w-4 text-primary"}}}
        <h3 class="font-bold text-sm text-base-content">Seed Profiles & Presets</h3>
      </div>
      <button type="button" class="btn btn-xs btn-circle btn-ghost" id="btn-close-profiles">✕</button>
    </div>
    <div class="p-5 space-y-4 text-xs">
      <div>
        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/50 mb-2">Quick Blueprints</h4>
        <div class="grid grid-cols-3 gap-2">
          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="smoke">⚡ Smoke (10)</button>
          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="realistic">🌱 Standard (100)</button>
          <button type="button" class="btn-preset-profile btn btn-xs btn-outline font-mono" data-preset="stress">🚀 Stress (1000)</button>
        </div>
      </div>
      <div class="p-3 rounded-lg bg-base-200/40 border border-base-300 space-y-2">
        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/60">Save Current Configuration</h4>
        <div class="flex gap-2">
          <input id="profile-name-input" type="text" placeholder="Profile name (e.g. Test Dataset)"
            class="field-input flex-1 text-xs !py-1 font-medium" />
          <button type="button" id="btn-save-profile" class="btn btn-xs btn-primary px-3 font-bold">Save</button>
        </div>
      </div>
      <div>
        <h4 class="font-bold text-[10px] uppercase tracking-wider text-base-content/50 mb-1.5">Saved Profiles</h4>
        <div id="profiles-list-container" class="space-y-1.5 max-h-48 overflow-y-auto pr-1">
          <div class="py-4 text-center text-xs text-base-content/40">No saved profiles yet.</div>
        </div>
      </div>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop bg-base-300/60 backdrop-blur-sm"><button>close</button></form>
  <div class="modal-box p-0 overflow-hidden max-w-md rounded-2xl border border-error/20 shadow-xl">
    <div class="px-5 py-4 bg-error/5 border-b border-error/15 flex items-center gap-2.5">
      <span class="text-error">{{{icon "warning" class="h-5 w-5"}}}</span>
      <h3 class="font-bold text-sm text-error">Confirm Truncate Action</h3>
    </div>
    <div class="p-5 space-y-3 text-xs text-base-content/80 leading-relaxed">
      <p>
        You have enabled <strong class="text-error">Clear tables before inserting</strong>. All existing records in affected tables will be permanently deleted in reverse topological order before new rows are inserted.
      </p>
    </div>
    <div class="px-5 pb-4 flex items-center justify-end gap-2">
      <button type="button" class="btn btn-ghost btn-xs" id="seed-truncate-cancel">Cancel</button>
      <button type="button" class="btn btn-error btn-xs font-bold gap-1.5" id="seed-truncate-confirm">
        {{{icon "warning" class="h-3.5 w-3.5"}}}
        <span>Yes, Truncate & Seed</span>
      </button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop bg-base-300/60 backdrop-blur-sm"><button>close</button></form>