sqlite-hub 0.12.0 → 0.17.0

package/frontend/js/app.js

@@ -24,6 +24,8 @@ import { renderTopNav } from './components/topNav.js';
 import { createRouter } from './router.js';
 import {
     createActiveConnectionBackup,
+    createDocument,
+    createDocumentFromMarkdownExport,
     clearCurrentQuery,
     clearDataRowSelection,
     clearEditorRowSelection,
@@ -48,11 +50,16 @@ import {
     openDeleteQueryHistoryModal,
     openDeleteQueryChartModal,
     openDataExportModal,
+    openDeleteDocumentModal,
     openQueryExportModal,
     openDataRowByIdentity,
     openEditConnectionModal,
     openCreateQueryChartModal,
+    openCopyColumnModal,
     openEditQueryChartModal,
+    openDocumentInsertNoteModal,
+    openDocumentInsertTableModal,
+    preserveCurrentDataRowSelectionForReload,
     openDataRowUpdatePreview,
     openEditorRowUpdatePreview,
     refreshCurrentRoute,
@@ -64,6 +71,7 @@ import {
     runQueryHistoryItem,
     skipCurrentMediaTaggingItem,
     saveCurrentQueryChartDraft,
+    saveCurrentDocument,
     saveCurrentMediaTaggingConfig,
     selectDataRow,
     selectEditorRow,
@@ -88,6 +96,9 @@ import {
     setEditorPanelVisibility,
     setEditorTab,
     submitDeleteChartConfirmation,
+    submitDeleteDocumentConfirmation,
+    submitDocumentInsertNote,
+    submitDocumentInsertTable,
     submitCreateMediaTaggingTagTable,
     submitCreateMediaTaggingMappingTable,
     submitDeleteQueryHistoryConfirmation,
@@ -97,16 +108,22 @@ import {
     sortEditorResultsByColumn,
     setQueryHistorySearchInput,
     setQueryHistoryTab,
+    setCopyColumnModalError,
+    setCopyColumnModalEditedText,
+    setCopyColumnModalSubmitting,
     setRoute,
     saveQueryHistoryNotes,
     saveQueryHistoryTitle,
     saveCurrentTableDesignerDraft,
     toggleChartsResultsPanel,
     toggleChartsSqlPanel,
+    toggleCurrentDocumentTodo,
+    toggleDocumentsPane,
     setMediaTaggingWorkflowMediaDetailsVisible,
     setMediaTaggingWorkflowMediaRotationDegrees,
     queueTableDesignerCsvImport,
     showToast,
+    storeCopyColumnPreferences,
     submitCreateConnection,
     createCurrentMediaTag,
     submitDeleteRowConfirmation,
@@ -118,9 +135,13 @@ import {
     toggleQueryHistorySavedState,
     updateCurrentMediaTaggingField,
     updateCurrentMediaTaggingTagFormField,
+    updateCopyColumnModalFormatField,
+    updateCurrentDocumentDraftField,
+    updateDocumentInsertQuerySelection,
     updateCurrentQueryChartDraftConfigField,
     updateCurrentQueryChartDraftField,
     updateCurrentTableDesignerColumnField,
+    updateCurrentTableDesignerConstraintField,
     updateCurrentTableDesignerField,
     addCurrentTableDesignerColumn,
     applyCurrentMediaTaggingSelection,
@@ -129,6 +150,7 @@ import {
 import { renderChartsDetail, renderChartsView } from './views/charts.js';
 import { renderConnectionsView } from './views/connections.js';
 import { renderDataRowEditorPanel, renderDataView } from './views/data.js';
+import { renderDocumentsView } from './views/documents.js';
 import { renderEditorView } from './views/editor.js';
 import { renderLandingView } from './views/landing.js';
 import { renderMediaTaggingView } from './views/mediaTagging.js';
@@ -137,7 +159,29 @@ import { renderSettingsView } from './views/settings.js';
 import { renderStructureView } from './views/structure.js';
 import { renderTableDesignerView } from './views/tableDesigner.js';
 import { replaceChildrenFromRenderedMarkup, replaceElementFromRenderedMarkup } from './utils/dom.js';
-import { highlightSql } from './utils/format.js';
+import {
+    buildCopyColumnText,
+    getCopyColumnExportMetadata,
+    isMarkdownTodoCopyColumnMode,
+    normalizeCopyColumnMode,
+} from './utils/copyColumnExport.js';
+import { formatNumber, highlightSql } from './utils/format.js';
+import {
+    compactPathForDisplay,
+    detectFilePathValue,
+    getPathTypeLabel,
+} from './utils/filePathPreview.js';
+import { formatSqlQuery } from './utils/sqlFormatter.js';
+import {
+    buildDataRowEditorJsonObject,
+    buildEditorRowEditorJsonObject,
+    stringifyRowEditorJson,
+} from './utils/rowEditorJson.js';
+import { getTimestampPreviewForField } from './utils/timestampPreview.js';
+import {
+    formatTextCellCharacterCount,
+    getTextCellCharacterCount,
+} from './utils/textCellStats.js';
 
 const appRoot = document.querySelector('#app');
 
@@ -168,6 +212,10 @@ let lastRenderedLockedRoute = false;
 let pendingNewTableDesignerAutofocus = false;
 let pendingQueryEditorFocus = false;
 let pendingMediaTaggingTagSearchFocus = false;
+let documentAutosaveTimer = null;
+let pendingDocumentAutosaveId = null;
+
+const DOCUMENT_AUTOSAVE_DELAY_MS = 5000;
 
 const APP_TITLE = 'SQLite Hub';
 const ROUTE_TITLE_SEGMENTS = {
@@ -178,6 +226,7 @@ const ROUTE_TITLE_SEGMENTS = {
     editor: 'SQL Editor',
     editorResults: 'SQL Editor',
     charts: 'Charts',
+    documents: 'Documents',
     tableDesigner: 'Table Designer',
     mediaTaggingSetup: 'Media Tagging',
     mediaTaggingQueue: 'Tagging Queue',
@@ -768,13 +817,58 @@ function readFileAsText(file) {
             resolve(String(reader.result ?? ''));
         };
         reader.onerror = () => {
-            reject(reader.error ?? new Error('The selected CSV file could not be read.'));
+            reject(reader.error ?? new Error('The selected file could not be read.'));
         };
 
         reader.readAsText(file);
     });
 }
 
+function clearDocumentAutosaveTimer() {
+    if (documentAutosaveTimer !== null) {
+        window.clearTimeout(documentAutosaveTimer);
+    }
+
+    documentAutosaveTimer = null;
+    pendingDocumentAutosaveId = null;
+}
+
+function scheduleDocumentAutosave(documentId) {
+    clearDocumentAutosaveTimer();
+
+    if (!documentId) {
+        return;
+    }
+
+    pendingDocumentAutosaveId = String(documentId);
+    documentAutosaveTimer = window.setTimeout(async () => {
+        const state = getState();
+        const scheduledDocumentId = pendingDocumentAutosaveId;
+
+        documentAutosaveTimer = null;
+        pendingDocumentAutosaveId = null;
+
+        if (
+            state.route.name !== 'documents' ||
+            String(state.documents.selectedId ?? '') !== scheduledDocumentId ||
+            !state.documents.dirty
+        ) {
+            return;
+        }
+
+        if (state.documents.saving) {
+            scheduleDocumentAutosave(scheduledDocumentId);
+            return;
+        }
+
+        if (state.documents.deleting) {
+            return;
+        }
+
+        await saveCurrentDocument({ toast: false });
+    }, DOCUMENT_AUTOSAVE_DELAY_MS);
+}
+
 async function buildConnectionLogoUpload(file) {
     if (!(file instanceof File) || !file.size) {
         return null;
@@ -823,6 +917,8 @@ function resolveView(state) {
             return renderOverviewView(state);
         case 'charts':
             return renderChartsView(state);
+        case 'documents':
+            return renderDocumentsView(state);
         case 'data':
             return renderDataView(state);
         case 'editor':
@@ -1072,6 +1168,39 @@ async function handleTableDesignerCsvImport(fileInput) {
     }
 }
 
+async function handleDocumentMarkdownImport(fileInput) {
+    if (!(fileInput instanceof HTMLInputElement)) {
+        return;
+    }
+
+    const file = fileInput.files?.[0];
+
+    if (!(file instanceof File)) {
+        return;
+    }
+
+    try {
+        const content = await readFileAsText(file);
+        const document = await createDocumentFromMarkdownExport({
+            filename: file.name,
+            content,
+        });
+
+        if (!document?.id) {
+            showToast('Markdown document could not be imported.', 'alert');
+            return;
+        }
+
+        clearDocumentAutosaveTimer();
+        showToast(`Document "${document.filename}" imported.`, 'success');
+        router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+    } catch (error) {
+        showToast(error?.message || 'Markdown import failed.', 'alert');
+    } finally {
+        fileInput.value = '';
+    }
+}
+
 function renderApp(state) {
     syncDocumentTitle(state);
 
@@ -1089,6 +1218,7 @@ function renderApp(state) {
         'editorResults',
         'data',
         'charts',
+        'documents',
         'structure',
         'tableDesigner',
         'mediaTaggingSetup',
@@ -1254,6 +1384,39 @@ async function executeEditorQueryAndNavigate() {
     router.navigate(success && activeTab === 'results' ? '/editor/results' : '/editor');
 }
 
+function formatCurrentQuery() {
+    const currentQuery = getState().editor.sqlText ?? '';
+    const formattedQuery = formatSqlQuery(currentQuery);
+
+    if (!formattedQuery) {
+        showToast('No SQL query to format.', 'alert');
+        return;
+    }
+
+    if (formattedQuery === currentQuery) {
+        focusQueryEditorInput();
+        showToast('SQL query is already formatted.', 'muted');
+        return;
+    }
+
+    invalidateMainRenderCache();
+    setCurrentQuery(formattedQuery);
+
+    const input = document.querySelector('[data-bind="current-query"]');
+
+    if (input instanceof HTMLTextAreaElement) {
+        input.value = formattedQuery;
+        syncQueryEditorHighlight(input);
+        syncQueryEditorScroll(input);
+        input.focus({ preventScroll: true });
+        input.setSelectionRange(input.value.length, input.value.length);
+    } else {
+        pendingQueryEditorFocus = true;
+    }
+
+    showToast('SQL query formatted.', 'success');
+}
+
 const OPENABLE_URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
 
 function getOpenableUrl(value) {
@@ -1291,6 +1454,561 @@ function openRowEditorUrl(actionNode) {
     link.remove();
 }
 
+function getExportFilenameFromAction(actionNode) {
+    const input = actionNode.closest('[data-export-modal]')?.querySelector('input[name="filename"]');
+    return input instanceof HTMLInputElement ? input.value : '';
+}
+
+function syncRowEditorTimestampPreview(inputNode) {
+    const fieldNode = inputNode.closest('[data-row-editor-field]');
+    const previewNode = fieldNode?.querySelector('[data-row-editor-timestamp-preview]');
+
+    if (!fieldNode || !previewNode) {
+        return;
+    }
+
+    const columnName = fieldNode.dataset.rowEditorColumnName ?? '';
+    const protectedKeyColumn = fieldNode.dataset.rowEditorProtectedKey === 'true';
+    const tableMeta = {
+        columns: [
+            {
+                name: columnName,
+                primaryKeyPosition: protectedKeyColumn ? 1 : 0,
+                foreignKey: protectedKeyColumn,
+            },
+        ],
+        foreignKeys: [],
+    };
+    const preview = getTimestampPreviewForField({
+        columnName,
+        value: inputNode.value,
+        tableMeta,
+    });
+
+    if (preview.kind !== 'timestamp') {
+        previewNode.hidden = true;
+        previewNode.textContent = '';
+        return;
+    }
+
+    previewNode.hidden = false;
+    previewNode.textContent = `Interpretiert als Datum: ${preview.formatted}`;
+}
+
+function syncRowEditorCharacterCount(inputNode) {
+    const fieldNode = inputNode.closest('[data-row-editor-field]');
+    const countNode = fieldNode?.querySelector('[data-row-editor-char-count]');
+
+    if (!fieldNode || !countNode) {
+        return;
+    }
+
+    const count = getTextCellCharacterCount(inputNode.value);
+
+    if (count === null) {
+        countNode.hidden = true;
+        countNode.textContent = '';
+        return;
+    }
+
+    countNode.hidden = false;
+    countNode.textContent = formatTextCellCharacterCount(count);
+}
+
+function syncRowEditorFilePathPreview(inputNode) {
+    const fieldNode = inputNode.closest('[data-row-editor-field]');
+    const previewNode = fieldNode?.querySelector('[data-row-editor-filepath-preview]');
+
+    if (!fieldNode || !previewNode) {
+        return;
+    }
+
+    const columnName = fieldNode.dataset.rowEditorColumnName ?? '';
+    const protectedKeyColumn = fieldNode.dataset.rowEditorProtectedKey === 'true';
+    const tableMeta = {
+        columns: [
+            {
+                name: columnName,
+                primaryKeyPosition: protectedKeyColumn ? 1 : 0,
+                foreignKey: protectedKeyColumn,
+            },
+        ],
+        foreignKeys: [],
+    };
+    const preview = detectFilePathValue(inputNode.value, columnName, tableMeta);
+
+    if (!preview) {
+        previewNode.hidden = true;
+        return;
+    }
+
+    const filenameNode = previewNode.querySelector('[data-row-editor-filepath-filename]');
+    const directoryRowNode = previewNode.querySelector('[data-row-editor-filepath-directory-row]');
+    const directoryNode = previewNode.querySelector('[data-row-editor-filepath-directory]');
+    const extensionNode = previewNode.querySelector('[data-row-editor-filepath-extension]');
+    const typeNode = previewNode.querySelector('[data-row-editor-filepath-type]');
+
+    if (filenameNode) {
+        filenameNode.textContent = preview.fileName ?? 'N/A';
+    }
+
+    if (directoryRowNode) {
+        directoryRowNode.hidden = !preview.directory;
+    }
+
+    if (directoryNode) {
+        directoryNode.textContent = preview.directory ? compactPathForDisplay(preview.directory, 72) : '';
+        directoryNode.setAttribute('title', preview.directory ?? '');
+    }
+
+    if (extensionNode) {
+        extensionNode.textContent = preview.extension ?? 'N/A';
+    }
+
+    if (typeNode) {
+        typeNode.textContent = getPathTypeLabel(preview.pathType);
+    }
+
+    previewNode.hidden = false;
+}
+
+function closeCopyColumnMenus(exceptMenu = null) {
+    document.querySelectorAll('[data-copy-column-menu][open]').forEach(menu => {
+        if (menu !== exceptMenu && menu instanceof HTMLDetailsElement) {
+            menu.open = false;
+        }
+    });
+}
+
+function closeSidebarDatabasePickers(exceptPicker = null) {
+    document.querySelectorAll('.sidebar-db-picker[open]').forEach(picker => {
+        if (picker !== exceptPicker && picker instanceof HTMLDetailsElement) {
+            picker.open = false;
+        }
+    });
+}
+
+function openCopyColumnMenu(headerNode) {
+    const menu = headerNode?.querySelector('[data-copy-column-menu]');
+
+    if (!(menu instanceof HTMLDetailsElement)) {
+        return;
+    }
+
+    closeCopyColumnMenus(menu);
+    menu.open = true;
+    menu.querySelector('summary')?.focus({ preventScroll: true });
+}
+
+function getCopyColumnResult(state, scope) {
+    return scope === 'charts' ? state.charts.result : state.editor.result;
+}
+
+function slugifyExportFilenamePart(value, fallback = 'column') {
+    const slug = String(value ?? '')
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+
+    return slug || fallback;
+}
+
+function buildCopyColumnExportFilename(columnName, copyMode) {
+    const metadata = getCopyColumnExportMetadata(copyMode);
+    const columnSlug = slugifyExportFilenamePart(columnName);
+
+    return `${columnSlug}-${metadata.suffix}.${metadata.extension}`;
+}
+
+function normalizeMarkdownDownloadFilename(value) {
+    let filename = String(value ?? '')
+        .trim()
+        .replace(/[\u0000-\u001f\u007f]/g, ' ')
+        .replace(/[\\/]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .replace(/^\.+/, '')
+        .trim();
+
+    if (!filename) {
+        filename = 'document.md';
+    }
+
+    if (!/\.md$/i.test(filename)) {
+        filename = `${filename}.md`;
+    }
+
+    return filename;
+}
+
+function countEditedMarkdownTodoItems(text) {
+    const lines = String(text ?? '')
+        .split(/\r\n|\r|\n/g)
+        .filter(line => line.trim());
+
+    return lines.length;
+}
+
+function buildDocumentTimestampSlug(date = new Date()) {
+    const pad = value => String(value).padStart(2, '0');
+
+    return [
+        date.getFullYear(),
+        pad(date.getMonth() + 1),
+        pad(date.getDate()),
+        pad(date.getHours()),
+        pad(date.getMinutes()),
+    ].join('-');
+}
+
+function buildCopyColumnDocumentFilename(columnName) {
+    const columnSlug = slugifyExportFilenamePart(columnName);
+
+    return `${columnSlug}-todos-${buildDocumentTimestampSlug()}.md`;
+}
+
+function buildCopyColumnDocumentContent({ state, columnName, text, valueCount }) {
+    const activeConnection = state.connections.active;
+    const lines = [
+        `# ${columnName || 'Column'} todos`,
+        '',
+        `- Database: ${activeConnection?.label || 'Active database'}`,
+        `- Column: ${columnName || 'N/A'}`,
+        `- Items: ${valueCount}`,
+        `- Generated: ${new Date().toLocaleString()}`,
+        '',
+    ];
+
+    lines.push('## Todos', '', String(text ?? '').trim(), '');
+
+    return lines.join('\n');
+}
+
+function downloadTextFile({ text, filename, mimeType }) {
+    const blob = new Blob([text], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+}
+
+function getSelectedDataBrowserRowForJson(state) {
+    if (state.dataBrowser.selectedRow) {
+        return state.dataBrowser.selectedRow;
+    }
+
+    const rowIndex = state.dataBrowser.selectedRowIndex;
+
+    if (typeof rowIndex !== 'number') {
+        return null;
+    }
+
+    return state.dataBrowser.table?.rows?.[rowIndex] ?? null;
+}
+
+function getSelectedEditorResultRowForJson(state) {
+    const rowIndex = state.editor.selectedRowIndex;
+
+    if (typeof rowIndex !== 'number') {
+        return null;
+    }
+
+    return state.editor.result?.rows?.[rowIndex] ?? null;
+}
+
+function applyChangedRowEditorFormValues(rowObject) {
+    const form = shellRefs.panel.querySelector(
+        'form[data-form="save-data-row"], form[data-form="save-editor-row"]',
+    );
+
+    if (!form) {
+        return rowObject;
+    }
+
+    const nextRowObject = { ...rowObject };
+    const formData = new FormData(form);
+
+    for (const [key, value] of formData.entries()) {
+        if (!key.startsWith('field:')) {
+            continue;
+        }
+
+        const control = Array.from(form.elements).find(element => element.name === key);
+        const initialValue = control?.dataset?.rowEditorInitialValue;
+        const currentValue = String(value ?? '');
+
+        if (initialValue !== undefined && currentValue === initialValue) {
+            continue;
+        }
+
+        nextRowObject[key.slice('field:'.length)] = currentValue;
+    }
+
+    return nextRowObject;
+}
+
+function buildRowEditorJsonPayload(state) {
+    if (state.route.name === 'data') {
+        const row = getSelectedDataBrowserRowForJson(state);
+        const table = state.dataBrowser.table;
+        const tableName = table?.name ?? state.dataBrowser.selectedTable ?? 'row';
+
+        if (!row || !table) {
+            return null;
+        }
+
+        const rowObject = applyChangedRowEditorFormValues(
+            buildDataRowEditorJsonObject({
+                row,
+                columns: table.columns ?? table.columnMeta ?? [],
+            }),
+        );
+
+        return {
+            filename: `${slugifyExportFilenamePart(tableName, 'row')}-row.json`,
+            label: tableName,
+            text: stringifyRowEditorJson(rowObject),
+        };
+    }
+
+    if (state.route.name === 'editorResults') {
+        const row = getSelectedEditorResultRowForJson(state);
+        const result = state.editor.result;
+        const rowIndex = state.editor.selectedRowIndex;
+        const tableName = result?.editing?.tableName ?? 'query-result';
+
+        if (!row || !result) {
+            return null;
+        }
+
+        const rowObject = applyChangedRowEditorFormValues(
+            buildEditorRowEditorJsonObject({
+                row,
+                editingColumns: result.editing?.columns ?? [],
+                resultColumns: result.columns ?? [],
+            }),
+        );
+
+        return {
+            filename: `${slugifyExportFilenamePart(tableName, 'query-result')}-row-${Number(rowIndex) + 1}.json`,
+            label: tableName,
+            text: stringifyRowEditorJson(rowObject),
+        };
+    }
+
+    return null;
+}
+
+async function copyRowEditorJson() {
+    const payload = buildRowEditorJsonPayload(getState());
+
+    if (!payload) {
+        showToast('No row is selected.', 'alert');
+        return;
+    }
+
+    if (!navigator.clipboard?.writeText) {
+        showToast('Clipboard API is not available.', 'alert');
+        return;
+    }
+
+    try {
+        await navigator.clipboard.writeText(payload.text);
+        showToast(`Row from "${payload.label}" copied as JSON.`, 'success');
+    } catch (error) {
+        showToast('Row JSON could not be copied.', 'alert');
+    }
+}
+
+function exportRowEditorJson() {
+    const payload = buildRowEditorJsonPayload(getState());
+
+    if (!payload) {
+        showToast('No row is selected.', 'alert');
+        return;
+    }
+
+    downloadTextFile({
+        text: payload.text,
+        filename: payload.filename,
+        mimeType: 'application/json;charset=utf-8',
+    });
+    showToast(`Row from "${payload.label}" exported as JSON.`, 'success');
+}
+
+function exportCurrentDocumentMarkdown() {
+    const documents = getState().documents;
+
+    if (!documents.selectedId) {
+        showToast('No document is selected.', 'alert');
+        return;
+    }
+
+    const filename = normalizeMarkdownDownloadFilename(documents.draftFilename || documents.selected?.filename);
+
+    downloadTextFile({
+        text: documents.draftContent ?? '',
+        filename,
+        mimeType: 'text/markdown;charset=utf-8',
+    });
+    showToast(`Document "${filename}" exported.`, 'success');
+}
+
+function getCurrentDocumentEditorInsertionRange() {
+    const textarea = document.querySelector('.documents-editor-input');
+
+    if (!(textarea instanceof HTMLTextAreaElement)) {
+        return null;
+    }
+
+    return {
+        start: textarea.selectionStart,
+        end: textarea.selectionEnd,
+    };
+}
+
+function preserveDataRowEditorSelectionForReload() {
+    preserveCurrentDataRowSelectionForReload();
+}
+
+async function submitCopyColumnModal(formData) {
+    const state = getState();
+    const modal = state.modal;
+
+    if (modal?.kind !== 'copy-column') {
+        return;
+    }
+
+    const scope = String(formData.get('scope') ?? modal.scope ?? 'editor');
+    const columnName = String(formData.get('columnName') ?? modal.columnName ?? '');
+    const copyMode = normalizeCopyColumnMode(String(formData.get('copyMode') ?? modal.copyMode ?? 'column'));
+    const separator = String(formData.get('separator') ?? ',');
+    const wrapper = String(formData.get('wrapper') ?? '');
+    const lineBreaks = formData.get('lineBreaks') === 'on';
+    const outputSeparator = lineBreaks ? '\n' : separator;
+    const intent = String(formData.get('intent') ?? 'copy');
+    const isExportIntent = intent === 'export';
+    const isDocumentIntent = intent === 'document';
+    const isMarkdownTodo = isMarkdownTodoCopyColumnMode(copyMode);
+    const editedText = formData.has('editedText') ? String(formData.get('editedText') ?? '') : null;
+    const result = getCopyColumnResult(state, scope);
+    const hasColumn = (result?.columns ?? []).some(column => String(column) === columnName);
+
+    if (!hasColumn) {
+        setCopyColumnModalError({
+            code: 'COPY_COLUMN_UNAVAILABLE',
+            message: 'Column is no longer available in the current result set.',
+        });
+        showToast('Column could not be copied.', 'alert');
+        return;
+    }
+
+    if (!isMarkdownTodo) {
+        storeCopyColumnPreferences({ separator, wrapper, lineBreaks });
+    } else if (editedText !== null) {
+        setCopyColumnModalEditedText(editedText);
+    }
+    setCopyColumnModalSubmitting(true);
+
+    const generatedOutput = buildCopyColumnText({
+        result,
+        columnName,
+        copyMode,
+        separator: outputSeparator,
+        wrapper,
+    });
+    const text = isMarkdownTodo && editedText !== null ? editedText : generatedOutput.text;
+    const valueCount = isMarkdownTodo && editedText !== null
+        ? countEditedMarkdownTodoItems(editedText)
+        : generatedOutput.valueCount;
+
+    try {
+        if (isDocumentIntent) {
+            if (!isMarkdownTodo) {
+                throw new Error('Document export is only available for Markdown Todo columns.');
+            }
+
+            const document = await createDocumentFromMarkdownExport({
+                filename: buildCopyColumnDocumentFilename(columnName),
+                title: `${columnName || 'Column'} todos`,
+                content: buildCopyColumnDocumentContent({
+                    state,
+                    columnName,
+                    text,
+                    valueCount,
+                }),
+            });
+
+            if (!document) {
+                throw new Error('Document could not be created.');
+            }
+
+            closeModal();
+            showToast(
+                `Document "${document.filename}" created · ${formatNumber(valueCount)} ${
+                    valueCount === 1 ? 'item' : 'items'
+                }`,
+                'success',
+            );
+            router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+            return;
+        }
+
+        if (isExportIntent) {
+            const metadata = getCopyColumnExportMetadata(copyMode);
+
+            downloadTextFile({
+                text,
+                filename: buildCopyColumnExportFilename(columnName, copyMode),
+                mimeType: metadata.mimeType,
+            });
+            closeModal();
+            showToast(
+                `Column "${columnName}" exported as ${metadata.label} · ${formatNumber(valueCount)} ${
+                    valueCount === 1 ? 'value' : 'values'
+                }`,
+                'success',
+            );
+            return;
+        }
+
+        if (!navigator.clipboard?.writeText) {
+            throw new Error('Clipboard API is not available.');
+        }
+
+        await navigator.clipboard.writeText(text);
+        closeModal();
+        showToast(
+            `Column "${columnName}" copied · ${formatNumber(valueCount)} ${valueCount === 1 ? 'value' : 'values'}`,
+            'success',
+        );
+    } catch (error) {
+        setCopyColumnModalError({
+            code: isDocumentIntent
+                ? 'COPY_COLUMN_DOCUMENT_EXPORT_FAILED'
+                : isExportIntent
+                  ? 'COPY_COLUMN_EXPORT_FAILED'
+                  : 'CLIPBOARD_ACCESS_FAILED',
+            message:
+                error?.message ||
+                (isDocumentIntent
+                    ? 'Document export failed.'
+                    : isExportIntent
+                      ? 'Column export failed.'
+                      : 'Clipboard access failed.'),
+        });
+        showToast(
+            isDocumentIntent ? 'Document export failed.' : isExportIntent ? 'Column export failed.' : 'Clipboard access failed.',
+            'alert',
+        );
+    }
+}
+
 async function handleAction(actionNode) {
     const { action } = actionNode.dataset;
 
@@ -1304,8 +2022,77 @@ async function handleAction(actionNode) {
         case 'open-row-editor-url':
             openRowEditorUrl(actionNode);
             return;
+        case 'copy-row-editor-json':
+            await copyRowEditorJson();
+            return;
+        case 'export-row-editor-json':
+            exportRowEditorJson();
+            return;
         case 'open-modal':
-            openModal(actionNode.dataset.modal);
+            openModal(actionNode.dataset.modal, {
+                columnId: actionNode.dataset.columnId,
+                columnName: actionNode.dataset.columnName,
+            });
+            return;
+        case 'open-copy-column-modal':
+            closeCopyColumnMenus();
+            openCopyColumnModal({
+                scope: actionNode.dataset.resultScope,
+                columnName: actionNode.dataset.columnName ?? '',
+                mode: actionNode.dataset.copyMode,
+            });
+            return;
+        case 'create-document': {
+            const document = await createDocument();
+
+            if (document?.id) {
+                router.navigate(`/documents/${encodeURIComponent(document.id)}`);
+            }
+            return;
+        }
+        case 'select-document': {
+            const documentId = String(actionNode.dataset.documentId ?? '').trim();
+
+            if (documentId) {
+                clearDocumentAutosaveTimer();
+                router.navigate(`/documents/${encodeURIComponent(documentId)}`);
+            }
+            return;
+        }
+        case 'save-document':
+            clearDocumentAutosaveTimer();
+            await saveCurrentDocument();
+            return;
+        case 'export-document-markdown':
+            exportCurrentDocumentMarkdown();
+            return;
+        case 'open-document-insert-table-modal':
+            await openDocumentInsertTableModal(getCurrentDocumentEditorInsertionRange());
+            return;
+        case 'open-document-insert-note-modal':
+            await openDocumentInsertNoteModal(getCurrentDocumentEditorInsertionRange());
+            return;
+        case 'import-document-markdown': {
+            const fileInput = document.querySelector('[data-bind="document-import-file"]');
+
+            if (!(fileInput instanceof HTMLInputElement)) {
+                return;
+            }
+
+            fileInput.value = '';
+            fileInput.click();
+            return;
+        }
+        case 'delete-document':
+            clearDocumentAutosaveTimer();
+            openDeleteDocumentModal();
+            return;
+        case 'toggle-document-pane':
+            toggleDocumentsPane(actionNode.dataset.pane);
+            return;
+        case 'toggle-document-todo':
+            clearDocumentAutosaveTimer();
+            await toggleCurrentDocumentTodo(actionNode.dataset.lineIndex);
             return;
         case 'open-create-query-chart-modal':
             openCreateQueryChartModal();
@@ -1329,6 +2116,7 @@ async function handleAction(actionNode) {
             dismissToast(actionNode.dataset.toastId);
             return;
         case 'select-connection': {
+            closeSidebarDatabasePickers();
             resetStructureGraphForDatabaseChange();
             const next = await selectConnection(actionNode.dataset.connectionId);
             if (next) {
@@ -1384,6 +2172,9 @@ async function handleAction(actionNode) {
             await executeEditorQueryAndNavigate();
             return;
         }
+        case 'format-current-query':
+            formatCurrentQuery();
+            return;
         case 'delete-data-row':
             openDeleteDataRowModal(actionNode.dataset.rowIndex);
             return;
@@ -1507,9 +2298,10 @@ async function handleAction(actionNode) {
             return;
         case 'export-query-format': {
             const format = actionNode.dataset.exportFormat;
+            const filename = getExportFilenameFromAction(actionNode);
 
             if (format === 'table') {
-                const imported = await duplicateCurrentQueryAsTable();
+                const imported = await duplicateCurrentQueryAsTable(filename);
 
                 if (imported) {
                     router.navigate('/table-designer/new');
@@ -1518,7 +2310,7 @@ async function handleAction(actionNode) {
                 return;
             }
 
-            await exportCurrentQueryFormat(format);
+            await exportCurrentQueryFormat(format, filename);
             return;
         }
         case 'open-data-export-modal':
@@ -1526,9 +2318,10 @@ async function handleAction(actionNode) {
             return;
         case 'export-data-format': {
             const format = actionNode.dataset.exportFormat;
+            const filename = getExportFilenameFromAction(actionNode);
 
             if (format === 'table') {
-                const imported = await duplicateCurrentDataTableAsTable();
+                const imported = await duplicateCurrentDataTableAsTable(filename);
 
                 if (imported) {
                     router.navigate('/table-designer/new');
@@ -1537,7 +2330,7 @@ async function handleAction(actionNode) {
                 return;
             }
 
-            await exportCurrentDataTableFormat(format);
+            await exportCurrentDataTableFormat(format, filename);
             return;
         }
         case 'toggle-data-tables':
@@ -1715,6 +2508,7 @@ async function handleAction(actionNode) {
             }
             return;
         case 'reload-data-route':
+            preserveDataRowEditorSelectionForReload();
             await refreshCurrentRoute();
             return;
         default:
@@ -1735,7 +2529,37 @@ function canApplyMediaTaggingShortcut(state) {
 }
 
 document.addEventListener('click', event => {
-    const actionNode = event.target.closest('[data-action]');
+    const target = event.target instanceof Element ? event.target : null;
+
+    if (!target) {
+        return;
+    }
+
+    const copyColumnMenu = target.closest('[data-copy-column-menu]');
+
+    if (!copyColumnMenu) {
+        closeCopyColumnMenus();
+    } else if (target.closest('.query-result-column-menu__toggle')) {
+        window.requestAnimationFrame(() => {
+            if (copyColumnMenu instanceof HTMLDetailsElement && copyColumnMenu.open) {
+                closeCopyColumnMenus(copyColumnMenu);
+            }
+        });
+    }
+
+    const sidebarDatabasePicker = target.closest('.sidebar-db-picker');
+
+    if (!sidebarDatabasePicker) {
+        closeSidebarDatabasePickers();
+    } else if (target.closest('.sidebar-footer-card')) {
+        window.requestAnimationFrame(() => {
+            if (sidebarDatabasePicker instanceof HTMLDetailsElement && sidebarDatabasePicker.open) {
+                closeSidebarDatabasePickers(sidebarDatabasePicker);
+            }
+        });
+    }
+
+    const actionNode = target.closest('[data-action]');
 
     if (!actionNode) {
         return;
@@ -1744,10 +2568,36 @@ document.addEventListener('click', event => {
     handleAction(actionNode);
 });
 
+document.addEventListener('contextmenu', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    const headerNode = target?.closest('[data-result-column-header]');
+
+    if (!headerNode) {
+        return;
+    }
+
+    event.preventDefault();
+    openCopyColumnMenu(headerNode);
+});
+
 document.addEventListener('keydown', event => {
     const target = event.target;
     const state = getState();
 
+    if (
+        (event.key === 's' || event.key === 'S') &&
+        (event.ctrlKey || event.metaKey) &&
+        !event.altKey &&
+        !event.shiftKey &&
+        !event.defaultPrevented &&
+        state.route.name === 'documents'
+    ) {
+        event.preventDefault();
+        clearDocumentAutosaveTimer();
+        void saveCurrentDocument();
+        return;
+    }
+
     // Handle Enter key in tag form fields to trigger create tag
     if (
         event.key === 'Enter' &&
@@ -1810,6 +2660,18 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (document.querySelector('[data-copy-column-menu][open]')) {
+        event.preventDefault();
+        closeCopyColumnMenus();
+        return;
+    }
+
+    if (document.querySelector('.sidebar-db-picker[open]')) {
+        event.preventDefault();
+        closeSidebarDatabasePickers();
+        return;
+    }
+
     if (
         state.route.name === 'data' &&
         (typeof state.dataBrowser.selectedRowIndex === 'number' || Boolean(state.dataBrowser.selectedRow))
@@ -1826,12 +2688,33 @@ document.addEventListener('keydown', event => {
 });
 
 document.addEventListener('input', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
+    const textCellInput = target?.closest('[data-row-editor-text-source]');
+
+    if (timestampInput) {
+        syncRowEditorTimestampPreview(timestampInput);
+        syncRowEditorFilePathPreview(timestampInput);
+    }
+
+    if (textCellInput) {
+        syncRowEditorCharacterCount(textCellInput);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
         return;
     }
 
+    if (bindNode.dataset.bind === 'copy-column-format-field') {
+        updateCopyColumnModalFormatField(
+            bindNode.dataset.field,
+            bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox' ? bindNode.checked : bindNode.value,
+        );
+        return;
+    }
+
     if (bindNode.dataset.bind === 'current-query') {
         invalidateMainRenderCache();
         syncQueryEditorHighlight(bindNode);
@@ -1840,6 +2723,12 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'document-field') {
+        updateCurrentDocumentDraftField(bindNode.dataset.field, bindNode.value);
+        scheduleDocumentAutosave(getState().documents.selectedId);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-query') {
         void setDataSearchQuery(bindNode.value);
         return;
@@ -1873,7 +2762,12 @@ document.addEventListener('input', event => {
             return;
         }
 
-        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value, { notify: false });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -1882,7 +2776,14 @@ document.addEventListener('input', event => {
             return;
         }
 
-        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value, {
+            notify: false,
+        });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -1943,6 +2844,19 @@ document.addEventListener(
 );
 
 document.addEventListener('change', event => {
+    const target = event.target instanceof Element ? event.target : null;
+    const timestampInput = target?.closest('[data-row-editor-timestamp-source]');
+    const textCellInput = target?.closest('[data-row-editor-text-source]');
+
+    if (timestampInput) {
+        syncRowEditorTimestampPreview(timestampInput);
+        syncRowEditorFilePathPreview(timestampInput);
+    }
+
+    if (textCellInput) {
+        syncRowEditorCharacterCount(textCellInput);
+    }
+
     const bindNode = event.target.closest('[data-bind]');
 
     if (!bindNode) {
@@ -1985,6 +2899,16 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'document-import-file') {
+        void handleDocumentMarkdownImport(bindNode);
+        return;
+    }
+
+    if (bindNode.dataset.bind === 'document-insert-query-select') {
+        updateDocumentInsertQuerySelection(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'table-designer-field') {
         if (bindNode instanceof HTMLInputElement && bindNode.type === 'checkbox') {
             updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.checked);
@@ -2001,7 +2925,12 @@ document.addEventListener('change', event => {
             return;
         }
 
-        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value, { notify: false });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -2018,7 +2947,14 @@ document.addEventListener('change', event => {
             return;
         }
 
-        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value);
+        updateCurrentTableDesignerColumnField(bindNode.dataset.columnId, bindNode.dataset.field, bindNode.value, {
+            notify: false,
+        });
+
+        if (!syncTableDesignerDraftUi(bindNode)) {
+            renderApp(getState());
+        }
+
         return;
     }
 
@@ -2027,6 +2963,16 @@ document.addEventListener('change', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'table-designer-constraint-field') {
+        updateCurrentTableDesignerConstraintField(
+            bindNode.dataset.constraintKind,
+            bindNode.dataset.constraintId,
+            bindNode.dataset.field,
+            bindNode.value,
+        );
+        return;
+    }
+
     if (bindNode.dataset.bind === 'query-chart-draft:chartType') {
         updateCurrentQueryChartDraftField('chartType', bindNode.value);
         return;
@@ -2057,7 +3003,8 @@ document.addEventListener('submit', async event => {
     }
 
     event.preventDefault();
-    const formData = new FormData(form);
+    const submitter = event.submitter instanceof HTMLElement ? event.submitter : null;
+    const formData = submitter ? new FormData(form, submitter) : new FormData(form);
 
     switch (form.dataset.form) {
         case 'open-connection': {
@@ -2140,6 +3087,32 @@ document.addEventListener('submit', async event => {
         case 'delete-query-history-confirm':
             await submitDeleteQueryHistoryConfirmation();
             return;
+        case 'delete-document-confirm': {
+            const result = await submitDeleteDocumentConfirmation();
+
+            if (result.deleted) {
+                router.navigate(
+                    result.nextDocumentId ? `/documents/${encodeURIComponent(result.nextDocumentId)}` : '/documents',
+                );
+            }
+            return;
+        }
+        case 'document-insert-table': {
+            const inserted = await submitDocumentInsertTable();
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
+        case 'document-insert-note': {
+            const inserted = submitDocumentInsertNote();
+
+            if (inserted) {
+                scheduleDocumentAutosave(getState().documents.selectedId);
+            }
+            return;
+        }
         case 'apply-row-update-preview':
             await submitRowUpdatePreviewConfirmation();
             return;
@@ -2149,6 +3122,9 @@ document.addEventListener('submit', async event => {
         case 'create-media-tagging-mapping-table':
             await submitCreateMediaTaggingMappingTable();
             return;
+        case 'copy-column':
+            await submitCopyColumnModal(formData);
+            return;
         case 'save-data-row': {
             const values = {};