sqlite-hub 0.2.0 → 0.3.2

package/js/lib/cytoscapeRuntime.js

@@ -0,0 +1,16 @@
+import cytoscape from "/vendor/cytoscape/dist/cytoscape.esm.min.mjs";
+
+let elkRegistered = false;
+
+export function getCytoscape() {
+  if (!elkRegistered) {
+    if (typeof window.cytoscapeElk !== "function") {
+      throw new Error("cytoscape-elk is not available on window.");
+    }
+
+    cytoscape.use(window.cytoscapeElk);
+    elkRegistered = true;
+  }
+
+  return cytoscape;
+}

package/js/store.js

@@ -1,5 +1,5 @@
 import * as api from "./api.js";
-import { inferStatusTone } from "./utils/format.js";
+import { formatCellValue, inferStatusTone, truncateMiddle } from "./utils/format.js";
 
 const listeners = new Set();
 const DEFAULT_SETTINGS = {
@@ -24,6 +24,7 @@ const state = {
     recent: [],
     active: null,
     loading: false,
+    backupLoading: false,
     error: null,
   },
   settings: {
@@ -44,9 +45,11 @@ const state = {
     loading: false,
     tableLoading: false,
     saving: false,
+    deleting: false,
     page: 1,
     pageSize: 50,
     selectedRowIndex: null,
+    exportLoading: false,
     error: null,
     saveError: null,
   },
@@ -62,6 +65,7 @@ const state = {
     exportLoading: false,
     selectedRowIndex: null,
     saving: false,
+    deleting: false,
     saveError: null,
   },
   structure: {
@@ -138,6 +142,32 @@ function getCurrentStructureEntry(snapshot = state) {
   return entries.find((entry) => entry.name === snapshot.structure.selectedName) ?? null;
 }
 
+function buildDeleteRowPreview(fields = []) {
+  return fields
+    .filter((field) => field && field.label)
+    .slice(0, 8)
+    .map((field) => {
+      const fullValue = formatCellValue(field.value);
+
+      return {
+        label: String(field.label),
+        value: truncateMiddle(fullValue, 96),
+        fullValue,
+      };
+    });
+}
+
+function buildFallbackDeleteRowPreview(row) {
+  return buildDeleteRowPreview(
+    Object.entries(row ?? {})
+      .filter(([key]) => key !== "__identity")
+      .map(([key, value]) => ({
+        label: key,
+        value,
+      }))
+  );
+}
+
 function clearRouteSlices() {
   state.overview.error = null;
   state.dataBrowser.error = null;
@@ -159,6 +189,7 @@ function setMissingDatabaseState() {
   state.dataBrowser.table = null;
   state.dataBrowser.page = 1;
   state.dataBrowser.selectedRowIndex = null;
+  state.dataBrowser.exportLoading = false;
   state.dataBrowser.error = error;
   state.dataBrowser.saveError = null;
 
@@ -480,6 +511,7 @@ function invalidateDatabaseCaches() {
   state.dataBrowser.table = null;
   state.dataBrowser.page = 1;
   state.dataBrowser.selectedRowIndex = null;
+  state.dataBrowser.exportLoading = false;
   state.dataBrowser.error = null;
   state.dataBrowser.saveError = null;
   state.structure.data = null;
@@ -617,6 +649,69 @@ export function openEditConnectionModal(id) {
   emitChange();
 }
 
+export function openDeleteDataRowModal(rowIndex) {
+  const numericIndex = Number(rowIndex);
+  const tableName = state.dataBrowser.selectedTable;
+  const row = state.dataBrowser.table?.rows?.[numericIndex];
+  const rowPreview = buildDeleteRowPreview(
+    (state.dataBrowser.table?.columnMeta ?? [])
+      .filter((column) => column.visible)
+      .map((column) => ({
+        label: column.name,
+        value: row[column.name],
+      }))
+  );
+
+  if (!tableName || !row?.__identity) {
+    pushToast("The selected row could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "delete-row",
+    target: "data",
+    rowIndex: numericIndex,
+    tableName,
+    rowLabel: `row ${numericIndex + 1}`,
+    rowPreview: rowPreview.length ? rowPreview : buildFallbackDeleteRowPreview(row),
+    error: null,
+    submitting: false,
+  };
+  emitChange();
+}
+
+export function openDeleteEditorRowModal(rowIndex) {
+  const numericIndex = Number(rowIndex);
+  const tableName = state.editor.result?.editing?.tableName ?? null;
+  const row = state.editor.result?.rows?.[numericIndex];
+  const columns = state.editor.result?.editing?.columns ?? [];
+  const rowPreview = buildDeleteRowPreview(
+    columns
+      .filter((column) => column.visible !== false)
+      .map((column) => ({
+        label: column.sourceColumn || column.resultName,
+        value: row[column.resultName],
+      }))
+  );
+
+  if (!tableName || !row?.__identity || !canEditQueryResult()) {
+    pushToast("The selected query result row could not be loaded.", "alert");
+    return;
+  }
+
+  state.modal = {
+    kind: "delete-row",
+    target: "editor",
+    rowIndex: numericIndex,
+    tableName,
+    rowLabel: `query row ${numericIndex + 1}`,
+    rowPreview: rowPreview.length ? rowPreview : buildFallbackDeleteRowPreview(row),
+    error: null,
+    submitting: false,
+  };
+  emitChange();
+}
+
 export function closeModal() {
   closeModalInternal();
 }
@@ -743,6 +838,32 @@ export async function removeConnection(id) {
   }
 }
 
+export async function createActiveConnectionBackup() {
+  if (!state.connections.active) {
+    pushToast("No active SQLite database selected for backup.", "alert");
+    return null;
+  }
+
+  state.connections.backupLoading = true;
+  emitChange();
+
+  try {
+    const response = await api.createActiveConnectionBackup();
+    await refreshConnectionsState();
+    pushToast(response.message || "Backup created.", "success");
+    return response.data;
+  } catch (error) {
+    pushToast(
+      normalizeError(error)?.message || "Backup could not be created.",
+      "alert"
+    );
+    return null;
+  } finally {
+    state.connections.backupLoading = false;
+    emitChange();
+  }
+}
+
 export function setCurrentQuery(query) {
   const nextQuery = String(query ?? "");
   const previousLineCount = Math.max(1, String(state.editor.sqlText || "").split("\n").length);
@@ -962,6 +1083,51 @@ export async function submitDataRowUpdate(rowIndex, values) {
   }
 }
 
+export async function submitDataRowDelete(rowIndex, options = {}) {
+  const numericIndex = Number(rowIndex);
+  const tableName = state.dataBrowser.selectedTable;
+  const row = state.dataBrowser.table?.rows?.[numericIndex];
+  const reportErrorToModal = Boolean(options.reportErrorToModal);
+
+  if (!tableName || !row?.__identity) {
+    pushToast("The selected row could not be loaded.", "alert");
+    return null;
+  }
+
+  const shouldStepBackPage =
+    (state.dataBrowser.table?.rows?.length ?? 0) <= 1 && state.dataBrowser.page > 1;
+
+  state.dataBrowser.deleting = true;
+  state.dataBrowser.saveError = null;
+  emitChange();
+
+  try {
+    const response = await api.deleteDataTableRow(tableName, {
+      identity: row.__identity,
+    });
+
+    if (shouldStepBackPage) {
+      state.dataBrowser.page -= 1;
+    }
+
+    pushToast(response.message || "Table row deleted.", "success");
+    await loadDataTable(++routeLoadVersion);
+    state.dataBrowser.selectedRowIndex = null;
+    return response.data;
+  } catch (error) {
+    if (reportErrorToModal) {
+      withModalError(error);
+    } else {
+      state.dataBrowser.saveError = normalizeError(error);
+      emitChange();
+    }
+    return null;
+  } finally {
+    state.dataBrowser.deleting = false;
+    emitChange();
+  }
+}
+
 export async function submitEditorRowUpdate(rowIndex, values) {
   const numericIndex = Number(rowIndex);
   const result = state.editor.result;
@@ -1009,6 +1175,73 @@ export async function submitEditorRowUpdate(rowIndex, values) {
   }
 }
 
+export async function submitEditorRowDelete(rowIndex, options = {}) {
+  const numericIndex = Number(rowIndex);
+  const result = state.editor.result;
+  const row = result?.rows?.[numericIndex];
+  const tableName = result?.editing?.tableName ?? null;
+  const reportErrorToModal = Boolean(options.reportErrorToModal);
+
+  if (!tableName || !row?.__identity || !canEditQueryResult()) {
+    pushToast("The selected query result row could not be loaded.", "alert");
+    return null;
+  }
+
+  state.editor.deleting = true;
+  state.editor.saveError = null;
+  emitChange();
+
+  try {
+    const response = await api.deleteDataTableRow(tableName, {
+      identity: row.__identity,
+    });
+    const nextRows = [...(result.rows ?? [])];
+
+    nextRows.splice(numericIndex, 1);
+    state.editor.result = {
+      ...result,
+      rows: nextRows,
+    };
+    state.editor.selectedRowIndex = null;
+    invalidateDatabaseCaches();
+    pushToast(response.message || "Query result row deleted.", "success");
+    emitChange();
+    return response.data;
+  } catch (error) {
+    if (reportErrorToModal) {
+      withModalError(error);
+    } else {
+      state.editor.saveError = normalizeError(error);
+      emitChange();
+    }
+    return null;
+  } finally {
+    state.editor.deleting = false;
+    emitChange();
+  }
+}
+
+export async function submitDeleteRowConfirmation() {
+  const modal = state.modal;
+
+  if (modal?.kind !== "delete-row") {
+    return null;
+  }
+
+  startModalSubmission();
+
+  const result =
+    modal.target === "editor"
+      ? await submitEditorRowDelete(modal.rowIndex, { reportErrorToModal: true })
+      : await submitDataRowDelete(modal.rowIndex, { reportErrorToModal: true });
+
+  if (result) {
+    closeModalInternal();
+  }
+
+  return result;
+}
+
 export async function exportCurrentQueryCsv() {
   state.editor.exportLoading = true;
   emitChange();
@@ -1027,6 +1260,31 @@ export async function exportCurrentQueryCsv() {
   }
 }
 
+export async function exportCurrentDataTableCsv() {
+  const tableName = state.dataBrowser.selectedTable;
+
+  if (!tableName) {
+    pushToast("No table selected for export.", "alert");
+    return false;
+  }
+
+  state.dataBrowser.exportLoading = true;
+  emitChange();
+
+  try {
+    await api.downloadTableCsv(tableName);
+    pushToast(`CSV export started for ${tableName}.`, "success");
+    return true;
+  } catch (error) {
+    state.dataBrowser.error = normalizeError(error);
+    emitChange();
+    return false;
+  } finally {
+    state.dataBrowser.exportLoading = false;
+    emitChange();
+  }
+}
+
 export async function refreshCurrentRoute() {
   await loadRouteData(state.route);
 }

package/js/views/connections.js

@@ -5,9 +5,11 @@ import { escapeHtml } from "../utils/format.js";
 function renderConnectionsActionButton({
   label,
   icon,
+  action = "open-modal",
   modal,
   tone = "secondary",
   className = "",
+  disabled = false,
 }) {
   const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
   const toneClassName =
@@ -19,14 +21,16 @@ function renderConnectionsActionButton({
       ? "text-base text-on-primary"
       : "text-base text-primary-container/90";
   const clipStyle = `style="--clip-path: ${clipPath};"`;
+  const modalAttribute = modal ? `data-modal="${modal}"` : "";
 
   return `
     <button
-      class="flex h-11 items-center justify-between gap-6 px-5 font-headline text-xs font-bold uppercase tracking-[0.18em] transition-colors ${toneClassName} ${className}"
-      data-action="open-modal"
-      data-modal="${modal}"
+      class="flex h-11 items-center justify-between gap-6 px-5 font-headline text-xs font-bold uppercase tracking-[0.18em] transition-colors disabled:cursor-default disabled:opacity-40 ${toneClassName} ${className}"
+      data-action="${escapeHtml(action)}"
+      ${modalAttribute}
       ${clipStyle}
       type="button"
+      ${disabled ? "disabled" : ""}
     >
       <span>${label}</span>
       <span class="material-symbols-outlined ${iconClassName}">${icon}</span>
@@ -112,6 +116,17 @@ export function renderConnectionsView(state) {
       modal: "create-connection",
       className: "min-w-[13rem]",
     })}
+    ${
+      state.connections.active
+        ? renderConnectionsActionButton({
+            label: state.connections.backupLoading ? "Creating Backup..." : "Create Backup",
+            icon: "inventory_2",
+            action: "create-backup",
+            className: "min-w-[13rem]",
+            disabled: state.connections.backupLoading,
+          })
+        : ""
+    }
   `;
 
   return {

package/js/views/data.js

@@ -95,6 +95,19 @@ function renderWorkspaceHeader(state) {
           </div>
         </div>
         <div class="flex items-center gap-3">
+          ${
+            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"}
+                  </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"
             data-action="refresh-view"
@@ -367,6 +380,10 @@ function renderDataRowEditorPanel(state) {
     })),
     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",
   });
 }

package/js/views/editor.js

@@ -192,6 +192,10 @@ function renderEditorRowPanel(state) {
     })),
     saveError: state.editor.saveError,
     saving: state.editor.saving,
+    deleting: state.editor.deleting,
+    deleteAction: "delete-editor-row",
+    deleteRowIndex: rowIndex,
+    deleteEnabled: editingState.enabled && Boolean(row.__identity),
   });
 }
 
@@ -243,6 +247,7 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
             ${renderQueryEditor({
               query: state.editor.sqlText,
               executing: state.editor.executing,
+              exporting: state.editor.exportLoading,
               history: state.editor.history,
               historyLoading: state.editor.historyLoading,
               title: connection?.label ?? "SQLite Query Workspace",