admindb 2.2.1 → 2.3.1

package/dist/views/pages/table.hbs

@@ -1,327 +1 @@
-<div class="space-y-5">
-  <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">
-        {{{icon "table" class="h-6 w-6"}}}
-      </span>
-      <div>
-        <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}}
-        </p>
-      </div>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <a href="{{basePath}}/tables/{{table}}/schema" class="btn btn-ghost btn-sm gap-1.5">
-        {{{icon "schema" class="h-4 w-4"}}}
-        Edit schema
-      </a>
-      <a href="{{basePath}}/export" class="btn btn-ghost btn-sm gap-1.5">
-        {{{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">
-          {{{icon "export" class="h-4 w-4"}}}
-          Export
-          {{{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>
-          <li><a href="{{basePath}}/api/tables/{{table}}/export?format=json">JSON</a></li>
-        </ul>
-      </div>
-      {{#unless readonly}}
-        <button id="import-csv" type="button" class="btn btn-outline btn-sm gap-1.5">
-          {{{icon "import" class="h-4 w-4"}}}
-          Import CSV
-        </button>
-      {{/unless}}
-      <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">
-          {{{icon "plus" class="h-4 w-4"}}}
-          New row
-        </a>
-      {{/unless}}
-    </div>
-  </div>
-  <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">
-        {{{icon "filter" class="h-4 w-4"}}}
-        Filter rows
-        {{#if filterQS}}<span class="chip chip-pk">active</span>{{/if}}
-      </span>
-      <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">
-          {{{icon "search" class="h-4 w-4"}}}
-          Apply filter
-        </button>
-        <button type="button" id="clear-filter" class="btn btn-ghost btn-sm">Clear</button>
-        {{#if filterQS}}
-          <span class="text-xs text-base-content/50">Filtering <b class="tabular-nums">{{count}}</b> row(s).</span>
-        {{/if}}
-      </div>
-    </form>
-  </details>
-  <div id="import-panel" class="app-card hidden p-4">
-    <div class="mb-3 flex items-center justify-between">
-      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Import CSV into <span class="font-mono normal-case">{{table}}</span></h2>
-      <button id="import-csv-close" type="button" class="btn btn-ghost btn-xs" aria-label="Close">&times;</button>
-    </div>
-    <div class="space-y-3">
-      <textarea id="import-csv-text" rows="6" class="field-input w-full font-mono text-[13px]" placeholder="id,name,email&#10;1,Ada,ada@example.com&#10;2,Bob,bob@example.com" spellcheck="false"></textarea>
-      <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">
-          {{{icon "import" class="h-4 w-4"}}}
-          Import
-        </button>
-      </div>
-      <p class="text-xs text-base-content/45">The first row must be column names matching this table. Empty cells are treated as “not set” so database defaults apply. The import is transactional — a failed row rolls back everything.</p>
-    </div>
-  </div>
-  {{#if rows.length}}
-    <div class="app-card overflow-hidden">
-      <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>
-      <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">
-            {{{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">
-            {{{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}}>
-            {{{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>
-        </div>
-      </div>
-      <div class="overflow-x-auto">
-        <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">
-              <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}}">
-                    <span class="font-mono normal-case">{{this.name}}</span>
-                    {{#if this.pk}}<span class="chip chip-pk">PK</span>{{/if}}
-                    <span class="sort-arrow">{{#if (eq this.dir 'desc')}}↓{{else}}↑{{/if}}</span>
-                  </a>
-                </th>
-              {{/each}}
-              <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>
-                </th>
-              {{/each}}
-            </tr>
-          </thead>
-          <tbody>
-            {{#each rows}}
-              <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 @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}}
-                      <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 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}}
-                </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="{{@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>
-                        <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>
-                    {{/if}}
-                  </td>
-                {{/each}}
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      </div>
-      {{#if (gt pages 1)}}
-        <div class="flex flex-wrap items-center justify-between gap-2 border-t border-base-200 px-4 py-3">
-          <span class="text-sm text-base-content/50">Page {{page}} of {{pages}}</span>
-          <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}}">
-              {{{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
-              {{{icon "chevronRight" class="h-4 w-4"}}}
-            </a>
-          </div>
-        </div>
-      {{/if}}
-    </div>
-  {{else}}
-    <div class="empty-state">
-      <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>
-    </div>
-  {{/if}}
-</div>
-<script type="application/json" id="browse-config">{{{json browseConfig}}}</script>
-<script src="{{basePath}}/js/browse.js" defer></script>
+<div class="space-y-5">
  <div class="page-header">
    <div class="page-header-row flex-wrap lg:flex-nowrap">
      <div class="flex items-center gap-3.5">
        <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary border border-primary/20">
          {{{icon "table" class="h-5 w-5"}}}
        </span>
        <div>
          <div class="page-pretitle">Table Browser</div>
          <div class="flex items-center gap-2">
            <h1 class="page-title font-mono text-xl sm:text-2xl">{{table}}</h1>
            {{#if isPostgres}}
              <span class="rounded bg-info/15 px-2 py-0.5 text-[10px] font-bold font-sans text-info border border-info/20">PostgreSQL</span>
            {{else}}
              <span class="rounded bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold font-sans text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">SQLite</span>
            {{/if}}
          </div>
          <p class="text-xs text-base-content/55 mt-0.5">
            {{count}} row(s) · {{info.columns.length}} column(s)
            {{#if pkCols.length}}· PK <span class="font-mono font-semibold text-primary">{{join pkCols ", "}}</span>{{/if}}
          </p>
        </div>
      </div>
      <div class="page-actions flex-wrap">
        <a href="{{basePath}}/tables/{{table}}/schema" class="btn btn-ghost btn-sm gap-1.5">
          {{{icon "schema" class="h-4 w-4"}}}
          Edit schema
        </a>
        <a href="{{basePath}}/export" class="btn btn-ghost btn-sm gap-1.5">
          {{{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">
            {{{icon "export" class="h-4 w-4"}}}
            Export
            {{{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>
            <li><a href="{{basePath}}/api/tables/{{table}}/export?format=json">JSON</a></li>
          </ul>
        </div>
        {{#unless readonly}}
          <button id="import-csv" type="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "import" class="h-4 w-4"}}}
            Import CSV
          </button>
        {{/unless}}
        <a href="{{basePath}}/seed/{{table}}" 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">
            {{{icon "plus" class="h-4 w-4"}}}
            New row
          </a>
        {{/unless}}
      </div>
    </div>
  </div>
  <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">
        {{{icon "filter" class="h-4 w-4"}}}
        Filter rows
        {{#if filterQS}}<span class="chip chip-pk">active</span>{{/if}}
      </span>
      <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">
          {{{icon "search" class="h-4 w-4"}}}
          Apply filter
        </button>
        <button type="button" id="clear-filter" class="btn btn-ghost btn-sm">Clear</button>
        {{#if filterQS}}
          <span class="text-xs text-base-content/50">Filtering <b class="tabular-nums">{{count}}</b> row(s).</span>
        {{/if}}
      </div>
    </form>
  </details>
  <div id="import-panel" class="app-card hidden p-4">
    <div class="mb-3 flex items-center justify-between">
      <h2 class="text-sm font-semibold uppercase tracking-wide text-base-content/45">Import CSV into <span class="font-mono normal-case">{{table}}</span></h2>
      <button id="import-csv-close" type="button" class="btn btn-ghost btn-xs" aria-label="Close">&times;</button>
    </div>
    <div class="space-y-3">
      <textarea id="import-csv-text" rows="6" class="field-input w-full font-mono text-[13px]" placeholder="id,name,email&#10;1,Ada,ada@example.com&#10;2,Bob,bob@example.com" spellcheck="false"></textarea>
      <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">
          {{{icon "import" class="h-4 w-4"}}}
          Import
        </button>
      </div>
      <p class="text-xs text-base-content/45">The first row must be column names matching this table. Empty cells are treated as “not set” so database defaults apply. The import is transactional — a failed row rolls back everything.</p>
    </div>
  </div>
  {{#if rows.length}}
    <div class="app-card overflow-hidden">
      <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">
          <button id="btn-columns-manager" type="button" class="btn btn-outline btn-xs gap-1.5 font-medium text-xs" title="Manage column visibility, order, and pinned columns">
            {{{icon "columns" class="h-3.5 w-3.5"}}}
            Columns
            <span id="col-count-badge" class="badge badge-sm badge-primary text-[10px] tabular-nums font-semibold">{{add info.columns.length refColumns.length}}/{{add info.columns.length refColumns.length}}</span>
          </button>
          <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>
      <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">
            {{{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">
            {{{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}}>
            {{{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>
        </div>
      </div>
      <div class="overflow-x-auto">
        <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">
              <th class="w-10 text-center font-semibold th-select-all">
                <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" data-col="{{this.name}}">
                  <a href="{{this.href}}" class="sort-link {{#if this.active}}active{{/if}}" title="Sort by {{this.name}}">
                    <span class="font-mono normal-case">{{this.name}}</span>
                    {{#if this.pk}}<span class="chip chip-pk">PK</span>{{/if}}
                    <span class="sort-arrow">{{#if (eq this.dir 'desc')}}↓{{else}}↑{{/if}}</span>
                  </a>
                </th>
              {{/each}}
              {{#each refColumns}}
                <th class="whitespace-nowrap text-right font-semibold" data-col="ref:{{this.table}}" data-is-ref="true" data-ref-table="{{this.table}}" title="Rows in {{this.table}} where {{this.from}} references {{this.to}}">
                  <span class="font-mono normal-case">{{this.table}}</span>
                  <span class="chip chip-type text-[9px] ml-1 bg-secondary/15 text-secondary">REF</span>
                </th>
              {{/each}}
              <th class="text-right font-semibold sticky-col-actions">Actions</th>
            </tr>
          </thead>
          <tbody>
            {{#each rows}}
              <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 @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-image="{{this.isImage}}"
                      data-audio="{{this.isAudio}}" data-video="{{this.isVideo}}" data-pdf="{{this.isPdf}}"
                      data-mime="{{this.blobMime}}" 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 Image">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isAudio}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-warning/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-warning cursor-pointer js-inspect-btn">🎵 {{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="Listen & Inspect Audio">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isVideo}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-accent/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-accent cursor-pointer js-inspect-btn">🎬 {{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="Watch & Inspect Video">
                          {{{icon "inspect" class="h-3 w-3"}}}
                        </button>
                      </div>
                    {{else if this.isPdf}}
                      <div class="flex items-center gap-1.5 js-cell-value">
                        <span class="inline-flex items-center gap-1 rounded-md bg-error/10 px-1.5 py-0.5 text-[11px] font-mono font-medium text-error cursor-pointer js-inspect-btn">📄 PDF · {{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="View PDF">
                          {{{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 cursor-pointer js-inspect-btn">🗃️ 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 cursor-pointer js-inspect-btn">{ } 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}}
                      <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}}
                {{#each this.refs}}
                  <td class="whitespace-nowrap text-right align-middle" data-col="ref:{{this.table}}" data-is-ref="true" data-ref-table="{{this.table}}">
                    {{#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="{{@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>
                        <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>
                    {{/if}}
                  </td>
                {{/each}}
                <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}}
                </td>
              </tr>
            {{/each}}
          </tbody>
        </table>
      </div>
      {{#if (gt pages 1)}}
        <div class="flex flex-wrap items-center justify-between gap-2 border-t border-base-200 px-4 py-3">
          <span class="text-sm text-base-content/50">Page {{page}} of {{pages}}</span>
          <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}}">
              {{{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
              {{{icon "chevronRight" class="h-4 w-4"}}}
            </a>
          </div>
        </div>
      {{/if}}
    </div>
  {{else}}
    <div class="empty-state">
      <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}}/seed/{{table}}" 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>
    </div>
  {{/if}}
  <div class="modal-box max-w-lg p-0 overflow-hidden shadow-lift border border-base-300 bg-base-100">
    <div class="flex items-center justify-between border-b border-base-200 px-5 py-3.5 bg-base-200/50">
      <div class="flex items-center gap-2.5">
        <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary">
          {{{icon "columns" class="h-4 w-4"}}}
        </span>
        <div>
          <h3 class="font-bold text-sm text-base-content">Column Manager</h3>
          <p class="text-[11px] text-base-content/50">Visibility, custom ordering, and pinned columns</p>
        </div>
      </div>
      <form method="dialog">
        <button class="btn btn-ghost btn-xs btn-circle text-base-content/60" aria-label="Close">✕</button>
      </form>
    </div>
    <div class="p-4 space-y-3">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <div class="relative flex-1 min-w-[160px]">
          <input type="text" id="col-search" class="field-input !py-1.5 !pl-8 !pr-3 !text-xs w-full" placeholder="Filter columns..." />
          <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-base-content/40 pointer-events-none">
            {{{icon "search" class="h-3.5 w-3.5"}}}
          </span>
        </div>
        <div class="flex items-center gap-1">
          <button type="button" id="col-btn-show-all" class="btn btn-ghost btn-xs text-xs font-medium">Show all</button>
          <button type="button" id="col-btn-hide-non-pk" class="btn btn-ghost btn-xs text-xs font-medium">PKs only</button>
          <button type="button" id="col-btn-reset" class="btn btn-ghost btn-xs text-xs text-warning hover:bg-warning/10">Reset</button>
        </div>
      </div>
      <div class="flex items-center justify-between text-[11px] text-base-content/50 px-0.5">
        <span>Drag ⠿ to reorder. Toggle checkbox to show/hide. Click 📌 to pin.</span>
        <span id="col-manager-summary" class="font-mono text-primary font-semibold"></span>
      </div>
      <div id="col-manager-list" class="space-y-1 max-h-[360px] overflow-y-auto pr-1">
      </div>
    </div>
    <div class="flex items-center justify-between border-t border-base-200 px-5 py-3 bg-base-200/40 text-xs">
      <span class="text-base-content/50 text-[11px]">Saved in browser for this table</span>
      <form method="dialog">
        <button class="btn btn-primary btn-sm">Done</button>
      </form>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop bg-black/40 backdrop-blur-xs">
    <button>close</button>
  </form>