sqlite-hub 0.4.0 → 0.6.0

package/frontend/js/views/data.js

@@ -1,29 +1,23 @@
-import { renderDataGrid } from "../components/dataGrid.js";
-import { renderRowEditorPanel } from "../components/rowEditorPanel.js";
-import {
-  escapeHtml,
-  formatCellValue,
-  formatNumber,
-  isBlobPreview,
-  truncateMiddle,
-} from "../utils/format.js";
+import { renderDataGrid } from '../components/dataGrid.js';
+import { renderRowEditorPanel } from '../components/rowEditorPanel.js';
+import { escapeHtml, formatCellValue, formatNumber, isBlobPreview, truncateMiddle } from '../utils/format.js';
 
 function getSelectedRow(state) {
-  const rowIndex = state.dataBrowser.selectedRowIndex;
+    const rowIndex = state.dataBrowser.selectedRowIndex;
 
-  if (typeof rowIndex !== "number") {
-    return null;
-  }
+    if (typeof rowIndex !== 'number') {
+        return null;
+    }
 
-  return state.dataBrowser.table?.rows?.[rowIndex] ?? null;
+    return state.dataBrowser.table?.rows?.[rowIndex] ?? null;
 }
 
 function renderTableList(state) {
-  const tables = state.dataBrowser.tables ?? [];
-  const activeName = state.dataBrowser.selectedTable;
+    const tables = state.dataBrowser.tables ?? [];
+    const activeName = state.dataBrowser.selectedTable;
 
-  if (state.dataBrowser.loading && !tables.length) {
-    return `
+    if (state.dataBrowser.loading && !tables.length) {
+        return `
       <div class="flex flex-1 items-center justify-center px-6">
         <div class="text-center text-on-surface-variant/40">
           <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
@@ -31,82 +25,82 @@ function renderTableList(state) {
         </div>
       </div>
     `;
-  }
+    }
 
-  if (!tables.length) {
-    return `
+    if (!tables.length) {
+        return `
       <div class="px-6 py-6 text-sm text-on-surface-variant/55">
         No tables found in the active SQLite database.
       </div>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="custom-scrollbar flex-1 overflow-auto px-4 py-4">
       <div class="space-y-2">
         ${tables
-          .map(
-            (table) => `
+            .map(
+                table => `
               <button
                 class="w-full border px-4 py-3 text-left transition-colors ${
-                  table.name === activeName
-                    ? "border-primary-container/30 bg-surface-container-high"
-                    : "border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high"
+                    table.name === activeName
+                        ? 'border-primary-container/30 bg-surface-container-high'
+                        : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
                 }"
                 data-action="navigate"
                 data-to="/data/${encodeURIComponent(table.name)}"
                 type="button"
               >
                 <div class="truncate font-mono text-xs ${
-                  table.name === activeName ? "text-primary-container" : "text-on-surface"
+                    table.name === activeName ? 'text-primary-container' : 'text-on-surface'
                 }">
                   ${escapeHtml(table.name)}
                 </div>
               </button>
-            `
-          )
-          .join("")}
+            `,
+            )
+            .join('')}
       </div>
     </div>
   `;
 }
 
 function renderWorkspaceHeader(state) {
-  const table = state.dataBrowser.table;
+    const table = state.dataBrowser.table;
 
-  return `
+    return `
     <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
       <div class="flex flex-wrap items-end justify-between gap-4">
-        <div>
+        <div class="data-headline-container">
           <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
             Data Browser
           </div>
           <h1 class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
-            ${escapeHtml(table?.name ?? "Table Data")}
+            ${escapeHtml(table?.name ?? 'Table Data')}
           </h1>
           <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
             ${
-              table
-                ? `rows ${escapeHtml(formatNumber(table.rowCount ?? 0))} // columns ${escapeHtml(
-                    formatNumber(table.columns?.length ?? 0)
-                  )}`
-                : `tables ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}`
+                table
+                    ? `rows ${escapeHtml(formatNumber(table.rowCount ?? 0))} // columns ${escapeHtml(
+                          formatNumber(table.columns?.length ?? 0),
+                      )}`
+                    : `tables ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}`
             }
           </div>
         </div>
         <div class="flex items-center gap-3">
           ${
-            table
-              ? `
+              table
+                  ? `
                   <button
                     class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
                     data-action="export-data-csv"
                     type="button"
                   >
-                    ${state.dataBrowser.exportLoading ? "Exporting..." : "Export CSV"}
+                    ${state.dataBrowser.exportLoading ? 'Exporting...' : 'Export CSV'}
                   </button>
                 `
-              : ""
+                  : ''
           }
           <button
             class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
@@ -116,8 +110,8 @@ function renderWorkspaceHeader(state) {
             Reload Data
           </button>
           ${
-            table
-              ? `
+              table
+                  ? `
                   <button
                     class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
                     data-action="navigate"
@@ -127,7 +121,7 @@ function renderWorkspaceHeader(state) {
                     Open Structure
                   </button>
                 `
-              : ""
+                  : ''
           }
         </div>
       </div>
@@ -136,11 +130,11 @@ function renderWorkspaceHeader(state) {
 }
 
 function renderWorkspaceError(state) {
-  if (!state.dataBrowser.error) {
-    return "";
-  }
+    if (!state.dataBrowser.error) {
+        return '';
+    }
 
-  return `
+    return `
     <div class="border-b border-error/20 bg-error-container/10 px-6 py-4 text-sm text-on-surface">
       <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
         ${escapeHtml(state.dataBrowser.error.code)}
@@ -151,61 +145,93 @@ function renderWorkspaceError(state) {
 }
 
 function getCellWidthClass(columnName) {
-  const normalized = String(columnName ?? "").toLowerCase();
+    const normalized = String(columnName ?? '').toLowerCase();
 
-  if (/(path|url|hash|sql|query|content|description|message|title|name)/.test(normalized)) {
-    return "max-w-[18rem]";
-  }
+    if (/(path|url|hash|sql|query|content|description|message|title|name)/.test(normalized)) {
+        return 'max-w-[18rem]';
+    }
+
+    if (/(date|time|modified|created|updated|timestamp)/.test(normalized)) {
+        return 'max-w-[11rem]';
+    }
+
+    if (/(id|uuid|token|key)/.test(normalized)) {
+        return 'max-w-[10rem]';
+    }
+
+    return 'max-w-[12rem]';
+}
+
+function getSortIcon(columnName, sortColumn, sortDirection) {
+    if (columnName !== sortColumn) {
+        return 'unfold_more';
+    }
 
-  if (/(date|time|modified|created|updated|timestamp)/.test(normalized)) {
-    return "max-w-[11rem]";
-  }
+    return sortDirection === 'desc' ? 'south' : 'north';
+}
 
-  if (/(id|uuid|token|key)/.test(normalized)) {
-    return "max-w-[10rem]";
-  }
+function renderSortableHeader(columnName, sortColumn, sortDirection, action) {
+    const isActive = columnName === sortColumn;
 
-  return "max-w-[12rem]";
+    return `
+    <button
+      class="flex w-full items-center justify-between gap-2 text-left transition-colors ${
+          isActive ? 'text-primary-container' : 'text-on-surface-variant hover:text-primary-container'
+      }"
+      data-action="${action}"
+      data-column-name="${escapeHtml(columnName)}"
+      type="button"
+    >
+      <span class="truncate">${escapeHtml(columnName)}</span>
+      <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
+          columnName,
+          sortColumn,
+          sortDirection,
+      )}</span>
+    </button>
+  `;
 }
 
 function getFilteredTableRows(table, state) {
-  const allRows = table?.rows ?? [];
-  const availableColumns = table?.columns ?? [];
-  const searchQuery = String(state.dataBrowser.searchQuery ?? "").trim().toLowerCase();
-  const activeColumn = availableColumns.includes(state.dataBrowser.searchColumn)
-    ? state.dataBrowser.searchColumn
-    : (availableColumns[0] ?? "");
-
-  const indexedRows = allRows.map((row, index) => ({
-    row,
-    index,
-  }));
-
-  if (!searchQuery || !activeColumn) {
+    const allRows = table?.rows ?? [];
+    const availableColumns = table?.columns ?? [];
+    const searchQuery = String(state.dataBrowser.searchQuery ?? '')
+        .trim()
+        .toLowerCase();
+    const activeColumn = availableColumns.includes(state.dataBrowser.searchColumn)
+        ? state.dataBrowser.searchColumn
+        : (availableColumns[0] ?? '');
+
+    const indexedRows = allRows.map((row, index) => ({
+        row,
+        index,
+    }));
+
+    if (!searchQuery || !activeColumn) {
+        return {
+            activeColumn,
+            filteredRows: indexedRows,
+            searchQuery,
+        };
+    }
+
     return {
-      activeColumn,
-      filteredRows: indexedRows,
-      searchQuery,
+        activeColumn,
+        searchQuery,
+        filteredRows: indexedRows.filter(({ row }) =>
+            formatCellValue(row[activeColumn]).toLowerCase().includes(searchQuery),
+        ),
     };
-  }
-
-  return {
-    activeColumn,
-    searchQuery,
-    filteredRows: indexedRows.filter(({ row }) =>
-      formatCellValue(row[activeColumn]).toLowerCase().includes(searchQuery)
-    ),
-  };
 }
 
 function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
-  const columns = table?.columns ?? [];
+    const columns = table?.columns ?? [];
 
-  if (!table || !columns.length) {
-    return "";
-  }
+    if (!table || !columns.length) {
+        return '';
+    }
 
-  return `
+    return `
     <div class="flex flex-wrap items-center gap-3 border-b border-outline-variant/10 bg-surface-container-low px-6 py-4">
       <label class="flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-4 py-3">
         <span class="material-symbols-outlined text-base text-on-surface-variant/55">search</span>
@@ -214,7 +240,7 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
           data-bind="data-search-query"
           placeholder="Filter current page..."
           type="search"
-          value="${escapeHtml(state.dataBrowser.searchQuery ?? "")}"
+          value="${escapeHtml(state.dataBrowser.searchQuery ?? '')}"
         />
       </label>
       <select
@@ -222,31 +248,27 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
         data-bind="data-search-column"
       >
         ${columns
-          .map(
-            (columnName) => `
-              <option value="${escapeHtml(columnName)}" ${
-                columnName === activeColumn ? "selected" : ""
-              }>
+            .map(
+                columnName => `
+              <option value="${escapeHtml(columnName)}" ${columnName === activeColumn ? 'selected' : ''}>
                 ${escapeHtml(columnName)}
               </option>
-            `
-          )
-          .join("")}
+            `,
+            )
+            .join('')}
       </select>
       <div class="text-[10px] font-mono tracking-[0.14em] text-on-surface-variant/55">
-        ${escapeHtml(formatNumber(filteredRowCount))} match${
-          filteredRowCount === 1 ? "" : "es"
-        } on this page
+        ${escapeHtml(formatNumber(filteredRowCount))} match${filteredRowCount === 1 ? '' : 'es'} on this page
       </div>
     </div>
   `;
 }
 
 function renderTableSurface(state) {
-  const table = state.dataBrowser.table;
+    const table = state.dataBrowser.table;
 
-  if (state.dataBrowser.tableLoading && !table) {
-    return `
+    if (state.dataBrowser.tableLoading && !table) {
+        return `
       <div class="flex flex-1 items-center justify-center">
         <div class="text-center text-on-surface-variant/40">
           <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
@@ -254,10 +276,10 @@ function renderTableSurface(state) {
         </div>
       </div>
     `;
-  }
+    }
 
-  if (!table) {
-    return `
+    if (!table) {
+        return `
       <div class="flex flex-1 items-center justify-center px-8 text-center">
         <div>
           <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
@@ -269,86 +291,88 @@ function renderTableSurface(state) {
         </div>
       </div>
     `;
-  }
-
-  const { activeColumn, filteredRows, searchQuery } = getFilteredTableRows(table, state);
-  const columns = (table.columns ?? []).map((columnName) => ({
-    label: escapeHtml(columnName),
-    headerClassName:
-      "border-b border-primary-container/20 px-4 py-3 text-[10px] font-bold tracking-[0.08em] text-primary-container",
-    cellClassName: "px-4 py-2 align-top text-[11px] text-on-surface",
-    render: (row) => {
-      const value = formatCellValue(row[columnName]);
-      const isNull = value === "NULL";
-      const widthClass = getCellWidthClass(columnName);
-      const displayValue = isNull ? value : truncateMiddle(value, 48);
-
-      return `<span class="block ${widthClass} overflow-hidden text-ellipsis whitespace-nowrap ${
-        isNull ? "text-on-surface-variant/45" : "text-on-surface"
-      }" title="${escapeHtml(value)}">${escapeHtml(displayValue)}</span>`;
-    },
-  }));
-  const totalRows = table.rowCount ?? 0;
-  const page = table.page ?? state.dataBrowser.page ?? 1;
-  const pageCount = table.pageCount ?? Math.max(1, Math.ceil(totalRows / (table.limit ?? 50)));
-  const fromRow = totalRows === 0 ? 0 : (table.offset ?? 0) + 1;
-  const toRow = totalRows === 0 ? 0 : Math.min((table.offset ?? 0) + (table.rows?.length ?? 0), totalRows);
-  const pageSizes = [25, 50, 100];
-  const filteredRowCount = filteredRows.length;
-  const hasActiveSearch = Boolean(searchQuery);
-
-  return `
+    }
+
+    const { activeColumn, filteredRows, searchQuery } = getFilteredTableRows(table, state);
+    const sortColumn = state.dataBrowser.sortColumn;
+    const sortDirection = state.dataBrowser.sortDirection;
+    const columns = (table.columns ?? []).map(columnName => ({
+        headerClassName:
+            'border-b border-primary-container/20 px-4 py-3 text-[10px] font-bold tracking-[0.08em] text-primary-container',
+        renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection, 'sort-data-column'),
+        cellClassName: 'px-4 py-2 align-top text-[11px] text-on-surface',
+        render: row => {
+            const value = formatCellValue(row[columnName]);
+            const isNull = value === 'NULL';
+            const widthClass = getCellWidthClass(columnName);
+            const displayValue = isNull ? value : truncateMiddle(value, 48);
+
+            return `<span class="block ${widthClass} overflow-hidden text-ellipsis whitespace-nowrap ${
+                isNull ? 'text-on-surface-variant/45' : 'text-on-surface'
+            }" title="${escapeHtml(value)}">${escapeHtml(displayValue)}</span>`;
+        },
+    }));
+    const totalRows = table.rowCount ?? 0;
+    const page = table.page ?? state.dataBrowser.page ?? 1;
+    const pageCount = table.pageCount ?? Math.max(1, Math.ceil(totalRows / (table.limit ?? 50)));
+    const fromRow = totalRows === 0 ? 0 : (table.offset ?? 0) + 1;
+    const toRow = totalRows === 0 ? 0 : Math.min((table.offset ?? 0) + (table.rows?.length ?? 0), totalRows);
+    const pageSizes = [25, 50, 100];
+    const filteredRowCount = filteredRows.length;
+    const hasActiveSearch = Boolean(searchQuery);
+
+    return `
     <div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">
       ${renderTableSearchBar(table, state, activeColumn, filteredRowCount)}
       <div class="custom-scrollbar flex-1 overflow-auto">
         ${renderDataGrid({
-          columns,
-          rows: filteredRows.map(({ row }) => row),
-          tableClass: "min-w-full border-collapse text-left font-mono text-xs",
-          theadClass: "sticky top-0 z-10 bg-surface-container-highest",
-          tbodyClass: "divide-y divide-outline-variant/5",
-          getRowClass: (_, filteredIndex) => {
-            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
-
-            return `${
-              state.dataBrowser.selectedRowIndex === rowIndex
-                ? "bg-surface-bright"
-                : filteredIndex % 2 === 0
-                  ? "bg-surface-container-low"
-                  : "bg-surface-container-lowest"
-            } cursor-pointer transition-colors hover:bg-surface-container-high`;
-          },
-          getRowAttrs: (_, filteredIndex) => {
-            const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
-
-            return `data-action="select-data-row" data-row-index="${rowIndex}"`;
-          },
+            columns,
+            rows: filteredRows.map(({ row }) => row),
+            tableClass: 'min-w-full border-collapse text-left font-mono text-xs',
+            theadClass: 'sticky top-0 z-10 bg-surface-container-highest',
+            tbodyClass: 'divide-y divide-outline-variant/5',
+            getRowClass: (_, filteredIndex) => {
+                const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+
+                return `${
+                    state.dataBrowser.selectedRowIndex === rowIndex
+                        ? 'bg-surface-bright'
+                        : filteredIndex % 2 === 0
+                          ? 'bg-surface-container-low'
+                          : 'bg-surface-container-lowest'
+                } cursor-pointer transition-colors hover:bg-surface-container-high`;
+            },
+            getRowAttrs: (_, filteredIndex) => {
+                const rowIndex = filteredRows[filteredIndex]?.index ?? filteredIndex;
+
+                return `data-action="select-data-row" data-row-index="${rowIndex}"`;
+            },
         })}
         ${
-          !table.rows?.length
-            ? `
+            !table.rows?.length
+                ? `
                 <div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">
                   <p class="font-mono text-[10px] uppercase tracking-[0.22em] text-on-surface-variant/40">
                     TABLE_IS_EMPTY
                   </p>
                 </div>
               `
-            : !filteredRowCount
-              ? `
+                : !filteredRowCount
+                  ? `
                   <div class="flex min-h-[180px] items-center justify-center border-t border-outline-variant/10">
                     <p class="font-mono text-[10px] tracking-[0.18em] text-on-surface-variant/40">
-                      ${hasActiveSearch ? "No matching rows on this page." : "No rows available."}
+                      ${hasActiveSearch ? 'No matching rows on this page.' : 'No rows available.'}
                     </p>
                   </div>
                 `
-            : ""
+                  : ''
         }
       </div>
       <footer class="flex flex-wrap items-center justify-between gap-4 border-t border-outline-variant/10 bg-surface-container px-6 py-4">
         <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
           showing ${escapeHtml(formatNumber(fromRow))}-${escapeHtml(formatNumber(toRow))} of ${escapeHtml(
-            formatNumber(totalRows)
-          )} rows${hasActiveSearch ? ` // ${escapeHtml(formatNumber(filteredRowCount))} visible on this page` : ""}
+              formatNumber(totalRows),
+          )} rows${hasActiveSearch ? ` // ${escapeHtml(formatNumber(filteredRowCount))} visible on this page` : ''}
         </div>
         <div class="flex flex-wrap items-center gap-4">
           <div class="flex items-center gap-2">
@@ -357,13 +381,13 @@ function renderTableSurface(state) {
             </span>
             <div class="flex items-center gap-2">
               ${pageSizes
-                .map(
-                  (pageSize) => `
+                  .map(
+                      pageSize => `
                     <button
                       class="border px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] transition-colors ${
-                        pageSize === (table.limit ?? state.dataBrowser.pageSize)
-                          ? "border-primary-container/30 bg-surface-container-high text-primary-container"
-                          : "border-outline-variant/20 text-on-surface hover:bg-surface-container-highest"
+                          pageSize === (table.limit ?? state.dataBrowser.pageSize)
+                              ? 'border-primary-container/30 bg-surface-container-high text-primary-container'
+                              : 'border-outline-variant/20 text-on-surface hover:bg-surface-container-highest'
                       }"
                       data-action="set-data-page-size"
                       data-page-size="${pageSize}"
@@ -371,9 +395,9 @@ function renderTableSurface(state) {
                     >
                       ${pageSize}
                     </button>
-                  `
-                )
-                .join("")}
+                  `,
+                  )
+                  .join('')}
             </div>
           </div>
           <div class="flex items-center gap-2">
@@ -382,7 +406,7 @@ function renderTableSurface(state) {
               data-action="set-data-page"
               data-page="${page - 1}"
               type="button"
-              ${page <= 1 ? "disabled" : ""}
+              ${page <= 1 ? 'disabled' : ''}
             >
               Prev
             </button>
@@ -394,7 +418,7 @@ function renderTableSurface(state) {
               data-action="set-data-page"
               data-page="${page + 1}"
               type="button"
-              ${page >= pageCount ? "disabled" : ""}
+              ${page >= pageCount ? 'disabled' : ''}
             >
               Next
             </button>
@@ -406,84 +430,83 @@ function renderTableSurface(state) {
 }
 
 function renderDataRowEditorPanel(state) {
-  const table = state.dataBrowser.table;
-  const rowIndex = state.dataBrowser.selectedRowIndex;
-  const row = getSelectedRow(state);
-
-  if (!table || !row || typeof rowIndex !== "number") {
-    return "";
-  }
-
-  const identityColumns =
-    table.identityStrategy?.type === "primaryKey" ? table.identityStrategy.columns ?? [] : [];
-  const editableColumns = (table.columnMeta ?? []).filter((column) => {
-    if (!column.visible || column.generated) {
-      return false;
-    }
+    const table = state.dataBrowser.table;
+    const rowIndex = state.dataBrowser.selectedRowIndex;
+    const row = getSelectedRow(state);
 
-    if (identityColumns.includes(column.name)) {
-      return false;
+    if (!table || !row || typeof rowIndex !== 'number') {
+        return '';
     }
 
-    const value = row[column.name];
-    if (isBlobPreview(value) || (value && typeof value === "object")) {
-      return false;
-    }
+    const identityColumns = table.identityStrategy?.type === 'primaryKey' ? (table.identityStrategy.columns ?? []) : [];
+    const editableColumns = (table.columnMeta ?? []).filter(column => {
+        if (!column.visible || column.generated) {
+            return false;
+        }
 
-    return true;
-  });
-  const readonlyColumns = (table.columnMeta ?? []).filter((column) => {
-    if (!column.visible) {
-      return false;
-    }
+        if (identityColumns.includes(column.name)) {
+            return false;
+        }
 
-    if (identityColumns.includes(column.name) || column.generated) {
-      return true;
-    }
+        const value = row[column.name];
+        if (isBlobPreview(value) || (value && typeof value === 'object')) {
+            return false;
+        }
 
-    const value = row[column.name];
-    return isBlobPreview(value) || (value && typeof value === "object");
-  });
-
-  return renderRowEditorPanel({
-    title: table.name,
-    sectionLabel: "Row Editor",
-    subtitle: `row ${rowIndex + 1}`,
-    closeAction: "clear-data-row-selection",
-    formName: "save-data-row",
-    hiddenFields: [{ name: "rowIndex", value: String(rowIndex) }],
-    disabledMessage: state.connections.active?.readOnly
-      ? "The active database is opened read-only, so row editing is disabled."
-      : table.notSafelyUpdatable
-        ? "This table has no stable identity column, so SQLite Hub cannot safely update rows."
-        : "",
-    editableFields: editableColumns.map((column) => {
-      const value = row[column.name];
-
-      return {
-        name: column.name,
-        label: column.name,
-        value: value === null || value === undefined ? "" : String(value),
-      };
-    }),
-    readonlyFields: readonlyColumns.map((column) => ({
-      name: column.name,
-      label: column.name,
-      value: formatCellValue(row[column.name]),
-    })),
-    saveError: state.dataBrowser.saveError,
-    saving: state.dataBrowser.saving,
-    deleting: state.dataBrowser.deleting,
-    deleteAction: "delete-data-row",
-    deleteRowIndex: rowIndex,
-    deleteEnabled: Boolean(row.__identity),
-    reloadAction: "reload-data-route",
-  });
+        return true;
+    });
+    const readonlyColumns = (table.columnMeta ?? []).filter(column => {
+        if (!column.visible) {
+            return false;
+        }
+
+        if (identityColumns.includes(column.name) || column.generated) {
+            return true;
+        }
+
+        const value = row[column.name];
+        return isBlobPreview(value) || (value && typeof value === 'object');
+    });
+
+    return renderRowEditorPanel({
+        title: table.name,
+        sectionLabel: 'Row Editor',
+        subtitle: `row ${rowIndex + 1}`,
+        closeAction: 'clear-data-row-selection',
+        formName: 'save-data-row',
+        hiddenFields: [{ name: 'rowIndex', value: String(rowIndex) }],
+        disabledMessage: state.connections.active?.readOnly
+            ? 'The active database is opened read-only, so row editing is disabled.'
+            : table.notSafelyUpdatable
+              ? 'This table has no stable identity column, so SQLite Hub cannot safely update rows.'
+              : '',
+        editableFields: editableColumns.map(column => {
+            const value = row[column.name];
+
+            return {
+                name: column.name,
+                label: column.name,
+                value: value === null || value === undefined ? '' : String(value),
+            };
+        }),
+        readonlyFields: readonlyColumns.map(column => ({
+            name: column.name,
+            label: column.name,
+            value: formatCellValue(row[column.name]),
+        })),
+        saveError: state.dataBrowser.saveError,
+        saving: state.dataBrowser.saving,
+        deleting: state.dataBrowser.deleting,
+        deleteAction: 'delete-data-row',
+        deleteRowIndex: rowIndex,
+        deleteEnabled: Boolean(row.__identity),
+        reloadAction: 'reload-data-route',
+    });
 }
 
 export function renderDataView(state) {
-  return {
-    main: `
+    return {
+        main: `
       <section class="view-surface min-h-full bg-surface-container flex h-full min-h-0 flex-col overflow-hidden">
         <div class="grid h-full min-h-0 grid-cols-1 md:grid-cols-[18rem_minmax(0,1fr)]">
           <aside class="flex min-h-0 flex-col border-r border-outline-variant/10 bg-surface-low">
@@ -505,6 +528,6 @@ export function renderDataView(state) {
         </div>
       </section>
     `,
-    panel: renderDataRowEditorPanel(state),
-  };
+        panel: renderDataRowEditorPanel(state),
+    };
 }