admindb 1.2.0 → 2.0.0

package/dist/views/pages/seed.hbs

@@ -0,0 +1,232 @@
+{{!-- Page: Mock & Seed Data Generator · URL: /tables/:table/seed --}}
+<div class="space-y-6">
+
+  <!-- Header -->
+  <div class="flex flex-wrap items-center justify-between gap-4 border-b border-base-200 pb-5">
+    <div class="flex items-center gap-3">
+      <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
+        {{{icon "arrowLeft" class="h-5 w-5"}}}
+      </a>
+      <div>
+        <div class="flex flex-wrap items-center gap-2">
+          <h1 class="font-mono text-2xl font-bold tracking-tight">{{table}}</h1>
+          <span class="badge badge-sm badge-neutral font-mono">{{rowCount}} rows in DB</span>
+          <span class="badge badge-sm badge-ghost font-mono">{{colCount}} columns</span>
+        </div>
+        <p class="mt-0.5 text-xs text-base-content/55">Data generator — fill the table with realistic mock data, simulate sparse records, and preview in real time.</p>
+      </div>
+    </div>
+    <div class="flex flex-wrap items-center gap-2">
+      <!-- Presets dropdown -->
+      <div class="dropdown dropdown-end">
+        <button tabindex="0" type="button" class="btn btn-outline btn-sm gap-1.5">
+          {{{icon "seed" class="h-4 w-4"}}}
+          Presets
+          {{{icon "chevronDown" class="h-3.5 w-3.5 opacity-60"}}}
+        </button>
+        <ul tabindex="0" class="dropdown-content z-20 menu p-2 shadow-lg bg-base-100 rounded-xl w-56 border border-base-200 text-xs">
+          <li><button type="button" id="preset-realistic" class="py-2">✨ Realistic Mock Data</button></li>
+          <li><button type="button" id="preset-minimal" class="py-2">⚡ Minimal (Required Only)</button></li>
+          <li><button type="button" id="preset-sparse" class="py-2">🎲 Sparse (30% Nullables)</button></li>
+          <li><button type="button" id="preset-numbered" class="py-2">🔢 Sequential & Numbered</button></li>
+          <li class="border-t border-base-200 my-1"></li>
+          <li><button type="button" id="seed-export-config" class="py-2">💾 Export Plan as JSON</button></li>
+          <li><button type="button" id="seed-import-config" class="py-2">📥 Import Plan JSON…</button></li>
+        </ul>
+      </div>
+
+      <button id="seed-preview" type="button" class="btn btn-outline btn-sm gap-1.5">
+        {{{icon "inspect" class="h-4 w-4 text-primary"}}}
+        Preview Data
+      </button>
+
+      {{#unless readonly}}
+        <button id="seed-insert" type="button" class="btn btn-primary btn-sm gap-1.5 shadow-sm">
+          {{{icon "plus" class="h-4 w-4"}}}
+          Insert Rows
+        </button>
+      {{else}}
+        <span class="inline-flex items-center gap-1.5 text-xs font-medium text-warning bg-warning/10 px-2.5 py-1.5 rounded-lg">
+          {{{icon "lock" class="h-4 w-4"}}}
+          Read-only database
+        </span>
+      {{/unless}}
+    </div>
+  </div>
+
+  <!-- Configuration Bar -->
+  <div class="app-card p-5 bg-base-100">
+    <div class="grid grid-cols-1 gap-5 lg:grid-cols-12 lg:items-end">
+      <!-- Row count control -->
+      <div class="lg:col-span-4 space-y-1.5">
+        <label class="field-label !mb-0 font-medium" for="seed-count">
+          <span>Rows to generate</span>
+          <span class="text-xs text-base-content/45 font-normal">(max {{maxRows}})</span>
+        </label>
+        <div class="flex items-center gap-2">
+          <input id="seed-count" type="number" min="1" max="{{maxRows}}" value="10" class="field-input w-28 font-mono font-medium" />
+          <div class="flex flex-wrap items-center gap-1">
+            {{#each quickCounts}}
+              <button type="button" class="seed-quick btn btn-outline btn-xs px-2.5" data-n="{{this}}">{{this}}</button>
+            {{/each}}
+          </div>
+        </div>
+      </div>
+
+      <!-- Column Search Filter -->
+      <div class="lg:col-span-4 space-y-1.5">
+        <label class="field-label !mb-0 font-medium" for="seed-search">
+          <span>Filter columns</span>
+        </label>
+        <div class="relative">
+          <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-base-content/40">
+            {{{icon "search" class="h-4 w-4"}}}
+          </span>
+          <input id="seed-search" type="text" placeholder="Search column by name or type..." class="field-input pl-9 text-xs" />
+        </div>
+      </div>
+
+      <!-- Seeding options (truncate / clear) -->
+      <div class="lg:col-span-4 flex flex-col justify-end space-y-2">
+        {{#unless readonly}}
+          <label class="cursor-pointer flex items-center gap-2 text-xs font-medium text-base-content/80 hover:text-base-content transition-colors">
+            <input id="seed-truncate" type="checkbox" class="checkbox checkbox-xs checkbox-error rounded" />
+            <span class="flex items-center gap-1 text-error/90">
+              {{{icon "trash" class="h-3.5 w-3.5"}}}
+              Clear table before inserting (DELETE all rows)
+            </span>
+          </label>
+        {{/unless}}
+        <p class="text-[11px] text-base-content/45 leading-tight">Rows are inserted in a single atomic transaction. Any constraint failure safely rolls back.</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- Column strategies section -->
+  <div class="space-y-3">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <div class="flex items-center gap-2">
+        <h2 class="text-sm font-semibold uppercase tracking-wider text-base-content/50">Column Strategies</h2>
+        <span id="seed-col-count-badge" class="badge badge-sm badge-ghost font-mono"></span>
+      </div>
+      <div class="flex flex-wrap items-center gap-1.5">
+        <button id="seed-refresh-samples" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60" title="Refresh live sample previews">
+          {{{icon "refresh" class="h-3.5 w-3.5"}}}
+          Refresh Samples
+        </button>
+        <button id="seed-apply-all" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60">
+          {{{icon "duplicate" class="h-3.5 w-3.5"}}}
+          Apply strategy to all…
+        </button>
+        <button id="seed-reset" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60">
+          {{{icon "refresh" class="h-3.5 w-3.5"}}}
+          Reset Defaults
+        </button>
+      </div>
+    </div>
+
+    <!-- Cards Grid -->
+    <div id="seed-columns" class="grid grid-cols-1 gap-3.5 md:grid-cols-2 2xl:grid-cols-3"></div>
+    <div id="seed-empty-search" class="hidden p-8 text-center app-card">
+      <p class="text-sm text-base-content/50">No columns match the current search query.</p>
+    </div>
+  </div>
+
+  <!-- Feedback / Warnings Alert -->
+  <div id="seed-feedback" class="hidden"></div>
+
+  <!-- Interactive Dual-Mode Preview Section -->
+  <div id="seed-preview-card" class="hidden app-card overflow-hidden transition-all duration-200">
+    <div class="flex flex-wrap items-center justify-between border-b border-base-200 bg-base-200/40 px-5 py-3 gap-3">
+      <div class="flex items-center gap-3">
+        <div class="tabs tabs-boxed bg-base-300/40 p-0.5 rounded-lg">
+          <button id="tab-table-view" type="button" class="tab tab-sm tab-active font-medium gap-1.5">
+            {{{icon "table" class="h-3.5 w-3.5"}}}
+            Table Preview
+          </button>
+          <button id="tab-sql-view" type="button" class="tab tab-sm font-medium gap-1.5">
+            {{{icon "sql" class="h-3.5 w-3.5"}}}
+            SQL Statements
+          </button>
+        </div>
+        <span id="preview-summary-badge" class="badge badge-sm badge-ghost font-mono"></span>
+      </div>
+
+      <div class="flex flex-wrap items-center gap-1.5">
+        <button id="seed-export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "export" class="h-3.5 w-3.5"}}}
+          Export CSV
+        </button>
+        <button id="seed-export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "export" class="h-3.5 w-3.5"}}}
+          Export JSON
+        </button>
+        <button id="seed-copy-sql" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "copy" class="h-3.5 w-3.5"}}}
+          Copy SQL
+        </button>
+        <button id="seed-download-sql" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "export" class="h-3.5 w-3.5"}}}
+          Download .sql
+        </button>
+      </div>
+    </div>
+
+    <!-- View 1: Interactive Table View -->
+    <div id="seed-table-view-container" class="overflow-x-auto max-h-[32rem]">
+      <table class="table table-sm table-pin-rows table-zebra w-full text-xs">
+        <thead id="seed-preview-thead" class="bg-base-200 font-mono text-[11px] text-base-content/70"></thead>
+        <tbody id="seed-preview-tbody"></tbody>
+      </table>
+    </div>
+
+    <!-- View 2: SQL View -->
+    <div id="seed-sql-view-container" class="hidden p-4">
+      <pre class="code-panel max-h-[32rem] overflow-auto"><code id="seed-sql-code"></code></pre>
+    </div>
+  </div>
+</div>
+
+<!-- Config JSON Modal -->
+<dialog id="seed-config-dialog" class="modal">
+  <div class="modal-box app-card max-w-lg">
+    <h3 id="seed-config-dialog-title" class="text-base font-bold">Seed Plan Configuration</h3>
+    <p class="mt-1 text-xs text-base-content/60">Export or paste a JSON configuration for column generator settings.</p>
+    <textarea id="seed-config-textarea" rows="12" class="field-input mt-3 w-full font-mono text-xs" spellcheck="false"></textarea>
+    <div class="mt-4 flex justify-end gap-2">
+      <button id="seed-config-dialog-cancel" type="button" class="btn btn-ghost btn-sm">Close</button>
+      <button id="seed-config-dialog-apply" type="button" class="btn btn-primary btn-sm">Apply Configuration</button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
+
+<!-- Truncate Confirmation Modal -->
+<dialog id="seed-truncate-dialog" class="modal">
+  <div class="modal-box app-card max-w-md border border-error/30">
+    <div class="flex items-center gap-3 text-error">
+      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-error/10">
+        {{{icon "warning" class="h-6 w-6"}}}
+      </span>
+      <div>
+        <h3 class="text-base font-bold text-base-content">Clear table before inserting?</h3>
+        <p class="text-xs text-error font-medium">All existing rows in "{{table}}" will be permanently deleted.</p>
+      </div>
+    </div>
+    <p class="mt-3 text-xs text-base-content/60 leading-relaxed">
+      This will execute <code>DELETE FROM "{{table}}"</code> before inserting the newly generated seed rows. This action cannot be undone.
+    </p>
+    <div class="mt-5 flex justify-end gap-2">
+      <button id="seed-truncate-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
+      <button id="seed-truncate-confirm" type="button" class="btn btn-error btn-sm">Yes, Clear & Insert</button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
+
+<script id="seed-config" type="application/json">{{{json seedConfig}}}</script>
+<script src="{{basePath}}/js/seed.js" defer></script>

package/dist/views/pages/table.hbs

@@ -1,12 +1,21 @@
+{{!-- Page: Table Records Browser & Pagination · URL: /tables/:table (or /{basePath}/tables/:table) --}}
 <div class="space-y-5">
+
   <!-- Header -->
   <div class="flex flex-wrap items-center justify-between gap-3">
     <div class="flex items-center gap-3.5">
       <span class="grid h-12 w-12 place-items-center rounded-xl bg-primary/10 text-primary">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
+        {{{icon "table" class="h-6 w-6"}}}
       </span>
       <div>
-        <h1 class="font-mono text-2xl font-bold tracking-tight">{{table}}</h1>
+        <div class="flex items-center gap-2">
+          <h1 class="font-mono text-2xl font-bold tracking-tight">{{table}}</h1>
+          {{#if isPostgres}}
+            <span class="rounded bg-info/15 px-2 py-0.5 text-[11px] font-bold font-sans text-info">PostgreSQL</span>
+          {{else}}
+            <span class="rounded bg-emerald-500/15 px-2 py-0.5 text-[11px] font-bold font-sans text-emerald-600 dark:text-emerald-400">SQLite</span>
+          {{/if}}
+        </div>
         <p class="text-sm text-base-content/55">
           {{count}} row(s) · {{info.columns.length}} column(s)
           {{#if pkCols.length}}· PK <span class="font-mono">{{join pkCols ", "}}</span>{{/if}}
@@ -15,18 +24,18 @@
     </div>
     <div class="flex flex-wrap gap-2">
       <a href="{{basePath}}/tables/{{table}}/schema" class="btn btn-ghost btn-sm gap-1.5">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
+        {{{icon "schema" class="h-4 w-4"}}}
         Edit schema
       </a>
       <a href="{{basePath}}/export" class="btn btn-ghost btn-sm gap-1.5">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+        {{{icon "export" class="h-4 w-4"}}}
         SQL dump
       </a>
       <div class="dropdown dropdown-end">
         <div tabindex="0" role="button" class="btn btn-outline btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+          {{{icon "export" class="h-4 w-4"}}}
           Export
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+          {{{icon "chevronDown" class="h-3.5 w-3.5"}}}
         </div>
         <ul tabindex="0" class="dropdown-content menu z-50 w-40 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift">
           <li><a href="{{basePath}}/api/tables/{{table}}/export?format=csv">CSV</a></li>
@@ -35,39 +44,41 @@
       </div>
       {{#unless readonly}}
         <button id="import-csv" type="button" class="btn btn-outline btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
+          {{{icon "import" class="h-4 w-4"}}}
           Import CSV
         </button>
       {{/unless}}
-      <a href="{{basePath}}/query" class="btn btn-outline btn-sm gap-1.5">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
-        Query
+      <a href="{{basePath}}/tables/{{table}}/seed" class="btn btn-outline btn-sm gap-1.5">
+        {{{icon "seed" class="h-4 w-4"}}}
+        Seed data
       </a>
       {{#unless readonly}}
         <a href="{{basePath}}/tables/{{table}}/rows/new" class="btn btn-primary btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
+          {{{icon "plus" class="h-4 w-4"}}}
           New row
         </a>
       {{/unless}}
     </div>
   </div>
 
-  <!-- Row filters (collapsed by default; auto-expands when filters are active) -->
+  <!-- Row filters -->
   <details class="app-card overflow-hidden" {{#if filterQS}}open{{/if}}>
     <summary class="group flex cursor-pointer list-none items-center justify-between gap-2 px-4 py-3 transition hover:bg-base-200/40 [&::-webkit-details-marker]:hidden">
       <span class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414A1 1 0 0014 15.414V20a1 1 0 01-1 1h-2a1 1 0 01-1-1v-4.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" /></svg>
+        {{{icon "filter" class="h-4 w-4"}}}
         Filter rows
         {{#if filterQS}}<span class="chip chip-pk">active</span>{{/if}}
       </span>
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-base-content/40 transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+      <span class="transition-transform group-open:rotate-180 text-base-content/40">
+        {{{icon "chevronDown" class="h-4 w-4"}}}
+      </span>
     </summary>
     <form id="filter-form" class="border-t border-base-200 p-4">
       <p class="mb-3 text-xs text-base-content/40">Filters adapt to each column's type: foreign keys, booleans, dates and numbers get dedicated controls. Text columns keep the operator syntax — <code>=exact</code> · <code>&gt;5</code> · <code>pre*</code> starts with · plain text = contains.</p>
       <div id="filter-fields" class="grid grid-cols-2 gap-2 md:grid-cols-3 xl:grid-cols-4"></div>
       <div class="mt-3 flex flex-wrap items-center gap-2">
         <button type="submit" class="btn btn-primary btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+          {{{icon "search" class="h-4 w-4"}}}
           Apply filter
         </button>
         <button type="button" id="clear-filter" class="btn btn-ghost btn-sm">Clear</button>
@@ -89,7 +100,7 @@
       <div class="flex flex-wrap items-center gap-3">
         <input type="file" id="import-csv-file" class="file-input file-input-sm w-full max-w-xs" accept=".csv,text/csv" />
         <button id="import-csv-submit" type="button" class="btn btn-primary btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
+          {{{icon "import" class="h-4 w-4"}}}
           Import
         </button>
       </div>
@@ -100,32 +111,39 @@
   {{#if rows.length}}
     <div class="app-card overflow-hidden">
       <!-- Toolbar -->
-      <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-4 py-3">
-        <span class="text-sm text-base-content/55">Showing <b class="tabular-nums">{{firstRow}}</b>–<b class="tabular-nums">{{lastRow}}</b> of <b class="tabular-nums">{{count}}</b> rows</span>
-        <label class="flex items-center gap-2 text-sm text-base-content/55">
-          Rows per page
-          <select id="page-size" class="field-select !w-auto !py-1.5 !text-[13px]" data-table="{{table}}" data-orderby="{{orderBy}}" data-orderdir="{{orderDir}}" data-filters="{{filterQS}}">
-            {{#each sizes}}<option value="{{this}}" {{#if (eq this ../pageSize)}}selected{{/if}}>{{this}}</option>{{/each}}
-          </select>
-        </label>
+      <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 px-4 py-2.5">
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="text-sm text-base-content/65">Showing <b class="tabular-nums font-bold text-base-content">{{firstRow}}</b>–<b class="tabular-nums font-bold text-base-content">{{lastRow}}</b> of <b class="tabular-nums font-bold text-base-content">{{count}}</b> rows</span>
+          <span class="hidden xl:inline-flex items-center gap-1.5 text-xs text-base-content/40 font-medium">
+            <kbd class="kbd kbd-xs font-mono">Dbl-click</kbd> edit · <kbd class="kbd kbd-xs font-mono">↑↓←→</kbd> move · <kbd class="kbd kbd-xs font-mono">Space</kbd> toggle · <kbd class="kbd kbd-xs font-mono">Esc</kbd> cancel
+          </span>
+        </div>
+        <div class="flex flex-wrap items-center gap-2.5">
+          <label class="flex items-center gap-2 text-xs text-base-content/55">
+            Per page
+            <select id="page-size" class="field-select !w-auto !py-1 !text-xs" data-table="{{table}}" data-orderby="{{orderBy}}" data-orderdir="{{orderDir}}" data-filters="{{filterQS}}">
+              {{#each sizes}}<option value="{{this}}" {{#if (eq this ../pageSize)}}selected{{/if}}>{{this}}</option>{{/each}}
+            </select>
+          </label>
+        </div>
       </div>
 
       <!-- Bulk selection bar -->
-      <div id="bulk-bar" class="hidden items-center justify-between gap-2 border-b border-base-200 bg-primary/[0.04] px-4 py-2.5">
+      <div id="bulk-bar" class="hidden items-center justify-between gap-2 border-b border-base-200 bg-primary/[0.04] px-4 py-2">
         <span class="text-sm font-medium text-base-content/80">
           <b id="bulk-count" class="tabular-nums text-primary">0</b> row(s) selected
         </span>
         <div class="flex flex-wrap items-center gap-1.5">
           <button id="bulk-export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+            {{{icon "export" class="h-3.5 w-3.5"}}}
             Export CSV
           </button>
           <button id="bulk-export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
+            {{{icon "export" class="h-3.5 w-3.5"}}}
             Export JSON
           </button>
           <button id="bulk-delete" type="button" class="btn btn-error btn-xs gap-1" {{#if readonly}}disabled{{/if}}>
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+            {{{icon "trash" class="h-3.5 w-3.5"}}}
             Delete
           </button>
           <button id="bulk-clear" type="button" class="btn btn-ghost btn-xs text-base-content/60">Clear</button>
@@ -133,14 +151,12 @@
       </div>
 
       <div class="overflow-x-auto">
-        <table class="table table-sm table-pin-rows">
+        <table id="main-table" class="table table-compact table-pin-rows">
           <thead>
             <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
-              {{#if hasPk}}
-                <th class="w-10 text-center font-semibold">
-                  <input type="checkbox" id="select-all-rows" class="checkbox checkbox-primary checkbox-xs" title="Select all rows on this page" />
-                </th>
-              {{/if}}
+              <th class="w-10 text-center font-semibold">
+                <input type="checkbox" id="select-all-rows" class="checkbox checkbox-primary checkbox-xs" title="Select all rows on this page" />
+              </th>
               {{#each colHeaders}}
                 <th class="whitespace-nowrap font-semibold">
                   <a href="{{this.href}}" class="sort-link {{#if this.active}}active{{/if}}" title="Sort by {{this.name}}">
@@ -150,7 +166,7 @@
                   </a>
                 </th>
               {{/each}}
-              <th class="text-right font-semibold">Actions</th>
+              <th class="text-right font-semibold sticky-col-actions">Actions</th>
               {{#each refColumns}}
                 <th class="whitespace-nowrap text-right font-semibold" title="Rows in {{this.table}} where {{this.from}} references {{this.to}}">
                   <span class="font-mono normal-case">{{this.table}}</span>
@@ -160,52 +176,122 @@
           </thead>
           <tbody>
             {{#each rows}}
-              <tr class="group hover:bg-primary/[0.04]" data-table="{{../table}}" data-pk="{{this.pkEncoded}}">
-                {{#if ../hasPk}}
-                  <td class="w-10 text-center align-middle">
-                    {{#if this.pkEncoded}}
-                      <input type="checkbox" class="row-checkbox checkbox checkbox-primary checkbox-xs" value="{{this.pkEncoded}}" aria-label="Select this row" />
-                    {{/if}}
-                  </td>
-                {{/if}}
+              <tr class="group hover:bg-primary/[0.04]" data-table="{{@root.table}}" data-pk="{{this.pkEncoded}}">
+                <td class="w-10 text-center align-middle">
+                  {{#if this.pkEncoded}}
+                    <input type="checkbox" class="row-checkbox checkbox checkbox-primary checkbox-xs" value="{{this.pkEncoded}}" aria-label="Select this row" />
+                  {{/if}}
+                </td>
                 {{#each this.cells}}
-                  <td class="max-w-xs align-middle cell-editable {{#unless ../../readonly}}js-inline-cell{{/unless}}"
-                      data-col="{{this.name}}" data-null="{{this.isNull}}" data-value="{{this.display}}">
+                  <td class="max-w-xs align-middle cell-editable {{#unless @root.readonly}}js-inline-cell{{/unless}}"
+                      data-col="{{this.name}}" data-null="{{this.isNull}}" data-value="{{this.display}}"
+                      data-blob="{{this.isBlob}}" data-json="{{this.isJson}}" data-type="{{this.type}}">
                     {{#if this.isNull}}
                       <span class="chip chip-null js-cell-value">NULL</span>
+                    {{else if this.isImage}}
+                      <div class="flex items-center gap-2 js-cell-value">
+                        <img src="{{this.blobUrl}}" alt="{{this.name}}" class="h-7 max-w-12 rounded object-cover border border-base-300 bg-base-200 shadow-xs cursor-pointer js-inspect-btn" title="Inspect Image" />
+                        <span class="chip chip-type text-[9px] font-mono">{{this.blobExt}} · {{this.blobSize}}</span>
+                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect BLOB">
+                          {{{icon "inspect" class="h-3 w-3"}}}
+                        </button>
+                      </div>
+                    {{else if this.isBlob}}
+                      <div class="flex items-center gap-1.5 js-cell-value">
+                        <span class="inline-flex items-center gap-1 rounded-md bg-secondary/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-secondary">🗃️ BLOB · {{this.blobSize}}</span>
+                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect BLOB">
+                          {{{icon "inspect" class="h-3 w-3"}}}
+                        </button>
+                      </div>
+                    {{else if this.isJson}}
+                      <div class="flex items-center gap-1.5 js-cell-value">
+                        <span class="inline-flex items-center gap-1 rounded-md bg-info/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-info">{ } JSON</span>
+                        <span class="block max-w-[140px] truncate font-mono text-[12px] text-base-content/70" title="{{this.display}}">{{this.display}}</span>
+                        <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover:opacity-100 transition-opacity js-inspect-btn" title="Inspect JSON">
+                          {{{icon "inspect" class="h-3 w-3"}}}
+                        </button>
+                      </div>
+                    {{else if this.isColor}}
+                      <div class="flex items-center gap-1.5 js-cell-value">
+                        <span class="inline-block h-3.5 w-3.5 rounded-full border border-base-300 shadow-xs shrink-0" style="background-color: {{this.display}}"></span>
+                        <span class="font-mono text-[13px]">{{this.display}}</span>
+                      </div>
+                    {{else if this.isUrl}}
+                      <div class="flex items-center gap-1.5 js-cell-value">
+                        <span class="block max-w-xs truncate font-mono text-[13px] text-primary underline" title="{{this.display}}">{{this.display}}</span>
+                        <a href="{{this.display}}" target="_blank" rel="noopener" class="text-base-content/40 hover:text-primary" title="Open link">↗</a>
+                      </div>
                     {{else}}
-                      <span class="js-cell-value block max-w-xs truncate font-mono text-[13px]" title="{{this.display}}">{{truncate this.display 120}}</span>
+                      <div class="flex items-center justify-between gap-1 group/cell">
+                        <span class="js-cell-value block max-w-xs truncate font-mono text-[13px]" title="{{this.display}}">{{truncate this.display 120}}</span>
+                        {{#if (gt this.display.length 30)}}
+                          <button type="button" class="btn btn-ghost btn-xs btn-circle opacity-0 group-hover/cell:opacity-100 transition-opacity js-inspect-btn shrink-0" title="Inspect text">
+                            {{{icon "inspect" class="h-3 w-3"}}}
+                          </button>
+                        {{/if}}
+                      </div>
                     {{/if}}
                   </td>
                 {{/each}}
-                <td class="whitespace-nowrap text-right align-middle">
-                  {{#unless ../readonly}}
-                    {{#if this.pkEncoded}}
-                      <div class="row-actions">
-                      <a href="{{../basePath}}/tables/{{../table}}/rows/{{this.pkEncoded}}/edit" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
-                        Edit
-                      </a>
-                      <button type="button" class="btn btn-ghost btn-xs gap-1 text-error js-delete-row"
-                        data-table="{{../table}}" data-pk="{{this.pkEncoded}}">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
-                        Delete
-                      </button>
+                <td class="whitespace-nowrap text-right align-middle sticky-col-actions">
+                  {{#if this.pkEncoded}}
+                    <div class="row-actions">
+                      {{#unless @root.readonly}}
+                        <a href="{{@root.basePath}}/tables/{{@root.table}}/rows/{{this.pkEncoded}}/edit" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" title="Edit row">
+                          {{{icon "edit" class="h-3.5 w-3.5"}}}
+                          Edit
+                        </a>
+                      {{/unless}}
+                      <div class="dropdown dropdown-end">
+                        <label tabindex="0" role="button" class="btn btn-ghost btn-xs btn-square text-base-content/60 hover:text-base-content" title="Row actions">
+                          {{{icon "dotsVertical" class="h-3.5 w-3.5"}}}
+                        </label>
+                        <ul tabindex="0" class="dropdown-content menu z-50 w-44 rounded-xl border border-base-300 bg-base-100 p-1.5 shadow-lift text-xs">
+                          <li>
+                            <button type="button" class="js-row-copy-json flex items-center gap-2" data-pk="{{this.pkEncoded}}">
+                              {{{icon "copy" class="h-3.5 w-3.5 text-base-content/60"}}}
+                              Copy as JSON
+                            </button>
+                          </li>
+                          <li>
+                            <button type="button" class="js-row-copy-sql flex items-center gap-2" data-pk="{{this.pkEncoded}}">
+                              {{{icon "sql" class="h-3.5 w-3.5 text-base-content/60"}}}
+                              Copy SQL INSERT
+                            </button>
+                          </li>
+                          {{#unless @root.readonly}}
+                            <li>
+                              <button type="button" class="js-row-duplicate flex items-center gap-2" data-pk="{{this.pkEncoded}}">
+                                {{{icon "duplicate" class="h-3.5 w-3.5 text-base-content/60"}}}
+                                Duplicate Row
+                              </button>
+                            </li>
+                            <div class="divider my-1"></div>
+                            <li>
+                              <button type="button" class="js-delete-row flex items-center gap-2 text-error hover:bg-error/10" data-table="{{@root.table}}" data-pk="{{this.pkEncoded}}">
+                                {{{icon "trash" class="h-3.5 w-3.5"}}}
+                                Delete Row
+                              </button>
+                            </li>
+                          {{/unless}}
+                        </ul>
+                      </div>
                     </div>
-                    {{else}}
-                      <span class="text-xs text-base-content/35">No PK</span>
-                    {{/if}}
-                  {{/unless}}
+                  {{else}}
+                    <span class="text-xs text-base-content/35">No PK</span>
+                  {{/if}}
                 </td>
                 {{#each this.refs}}
                   <td class="whitespace-nowrap text-right align-middle">
                     {{#if this.value}}
                       <button type="button" class="js-ref-toggle inline-flex items-center gap-1.5 rounded-lg border border-base-300 bg-base-100 px-2 py-1 text-xs font-medium text-base-content/70 shadow-soft transition hover:border-primary/50 hover:text-primary {{#unless this.count}}opacity-50{{/unless}}"
-                        data-table="{{../../table}}" data-pk="{{../pkEncoded}}" data-ref-table="{{this.table}}"
+                        data-table="{{@root.table}}" data-pk="{{../pkEncoded}}" data-ref-table="{{this.table}}"
                         aria-expanded="false" title="View {{this.table}} rows where {{this.from}} = {{this.value}}">
                         <span class="font-mono normal-case">{{this.table}}</span>
                         <span class="rounded-md bg-primary/10 px-1.5 py-0.5 font-semibold tabular-nums text-primary">{{this.count}}</span>
-                        <svg xmlns="http://www.w3.org/2000/svg" class="js-ref-chevron h-3 w-3 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
+                        <span class="js-ref-chevron transition-transform inline-block">
+                          {{{icon "chevronDown" class="h-3 w-3"}}}
+                        </span>
                       </button>
                     {{else}}
                       <span class="text-xs text-base-content/35">&mdash;</span>
@@ -225,13 +311,13 @@
           <div class="flex gap-1.5">
             <a href="{{basePath}}/tables/{{table}}?page={{sub page 1}}&size={{pageSize}}&orderBy={{orderBy}}&orderDir={{orderDir}}{{#if filterQS}}&{{filterQS}}{{/if}}"
               class="btn btn-outline btn-sm {{#unless (gt page 1)}}btn-disabled{{/unless}}" aria-disabled="{{#if (gt page 1)}}false{{else}}true{{/if}}">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg>
+              {{{icon "chevronLeft" class="h-4 w-4"}}}
               Prev
             </a>
             <a href="{{basePath}}/tables/{{table}}?page={{add page 1}}&size={{pageSize}}&orderBy={{orderBy}}&orderDir={{orderDir}}{{#if filterQS}}&{{filterQS}}{{/if}}"
               class="btn btn-outline btn-sm {{#unless (lt page pages)}}btn-disabled{{/unless}}" aria-disabled="{{#if (lt page pages)}}false{{else}}true{{/if}}">
               Next
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
+              {{{icon "chevronRight" class="h-4 w-4"}}}
             </a>
           </div>
         </div>
@@ -239,13 +325,12 @@
     </div>
   {{else}}
     <div class="empty-state">
-      <span class="empty-icon">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
-      </span>
+      <span class="empty-icon">{{{icon "book" class="h-7 w-7"}}}</span>
       <p class="text-sm font-medium text-base-content/70">No rows in <span class="font-mono">{{table}}</span></p>
       <div class="mt-2 flex gap-2">
         {{#unless readonly}}
           <a href="{{basePath}}/tables/{{table}}/rows/new" class="btn btn-primary btn-sm">Insert a row</a>
+          <a href="{{basePath}}/tables/{{table}}/seed" class="btn btn-outline btn-sm">Generate sample data</a>
         {{/unless}}
         <a href="{{basePath}}/query" class="btn btn-outline btn-sm">Run a query</a>
       </div>

package/dist/views/partials/icon.hbs

@@ -0,0 +1,2 @@
+{{!-- Partial: Dynamic SVG Icon Renderer · Helper: {{{icon "name" class="..."}}} --}}
+{{{icon name class=class}}}