sqlite-hub 0.16.0 → 0.17.2

package/frontend/js/utils/jsonPreview.js

@@ -0,0 +1,31 @@
+export function formatJsonPreview(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  let parsed = value;
+
+  if (typeof value !== "object") {
+    const text = String(value).trim();
+
+    if (!text || !["{", "["].includes(text[0])) {
+      return null;
+    }
+
+    try {
+      parsed = JSON.parse(text);
+    } catch (error) {
+      return null;
+    }
+  }
+
+  if (!parsed || typeof parsed !== "object") {
+    return null;
+  }
+
+  try {
+    return JSON.stringify(parsed, null, 2);
+  } catch (error) {
+    return null;
+  }
+}

package/frontend/js/utils/markdownDocuments.js

@@ -0,0 +1,248 @@
+import { escapeHtml } from './format.js';
+
+const FENCED_CODE_PATTERN = /^\s*(```|~~~)/;
+const TASK_LINE_PATTERN = /^(\s*)([-*+])\s+\[([ xX])\]\s+(.*?)(\r?)$/;
+
+function decodeBasicHtmlEntities(value = '') {
+    return String(value)
+        .replace(/:/gi, ':')
+        .replace(/:/g, ':')
+        .replace(/:/gi, ':')
+        .replace(/&/gi, '&')
+        .replace(/"/gi, '"')
+        .replace(/'/gi, "'");
+}
+
+function sanitizeRenderedMarkdown(html = '') {
+    return String(html).replace(/\s(href|src)=("([^"]*)"|'([^']*)'|([^\s>]+))/gi, (match, attribute, raw, doubleQuoted, singleQuoted, bare) => {
+        const value = doubleQuoted ?? singleQuoted ?? bare ?? '';
+        const decodedValue = decodeBasicHtmlEntities(value).trim();
+
+        if (/^(javascript|data|vbscript):/i.test(decodedValue)) {
+            return ` ${attribute}="#"`;
+        }
+
+        return match;
+    });
+}
+
+function renderFallbackMarkdown(markdown = '') {
+    const lines = String(markdown).split(/\r?\n/);
+    const html = [];
+    let listItems = [];
+    let listTag = 'ul';
+
+    const flushList = () => {
+        if (!listItems.length) {
+            return;
+        }
+
+        html.push(`<${listTag}>${listItems.map(item => `<li>${item}</li>`).join('')}</${listTag}>`);
+        listItems = [];
+        listTag = 'ul';
+    };
+
+    for (const line of lines) {
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        const unorderedMatch = line.match(/^\s*[-*+]\s+(.+)$/);
+        const orderedMatch = line.match(/^\s*\d+[.)]\s+(.+)$/);
+
+        if (headingMatch) {
+            flushList();
+            const level = Math.min(6, headingMatch[1].length);
+            html.push(`<h${level}>${escapeHtml(headingMatch[2])}</h${level}>`);
+            continue;
+        }
+
+        if (unorderedMatch) {
+            if (listItems.length && listTag !== 'ul') {
+                flushList();
+            }
+            listTag = 'ul';
+            listItems.push(escapeHtml(unorderedMatch[1]));
+            continue;
+        }
+
+        if (orderedMatch) {
+            if (listItems.length && listTag !== 'ol') {
+                flushList();
+            }
+            listTag = 'ol';
+            listItems.push(escapeHtml(orderedMatch[1]));
+            continue;
+        }
+
+        flushList();
+
+        if (line.trim()) {
+            html.push(`<p>${escapeHtml(line)}</p>`);
+        }
+    }
+
+    flushList();
+    return html.join('\n');
+}
+
+function renderMarkdownBlock(markdown = '') {
+    const source = escapeHtml(markdown);
+    const markedRuntime = globalThis.marked;
+    const parser = typeof markedRuntime?.parse === 'function' ? markedRuntime.parse.bind(markedRuntime) : null;
+
+    if (!parser) {
+        return renderFallbackMarkdown(markdown);
+    }
+
+    return sanitizeRenderedMarkdown(
+        parser(source, {
+            async: false,
+            breaks: false,
+            gfm: true,
+        }),
+    );
+}
+
+function renderMarkdownInline(markdown = '') {
+    const source = escapeHtml(markdown);
+    const markedRuntime = globalThis.marked;
+    const parser =
+        typeof markedRuntime?.parseInline === 'function' ? markedRuntime.parseInline.bind(markedRuntime) : null;
+
+    if (!parser) {
+        return source;
+    }
+
+    return sanitizeRenderedMarkdown(
+        parser(source, {
+            async: false,
+            breaks: false,
+            gfm: true,
+        }),
+    );
+}
+
+function renderTaskList(items = []) {
+    if (!items.length) {
+        return '';
+    }
+
+    return `
+      <ul class="document-markdown-task-list">
+        ${items
+            .map(item => {
+                const checked = item.checked;
+
+                return `
+                  <li class="document-markdown-task-item ${checked ? 'is-checked' : ''}">
+                    <label class="document-markdown-task-label">
+                      <input
+                        ${checked ? 'checked' : ''}
+                        class="document-markdown-task-checkbox"
+                        data-action="toggle-document-todo"
+                        data-line-index="${escapeHtml(String(item.lineIndex))}"
+                        type="checkbox"
+                      />
+                      <span class="document-markdown-task-text">${renderMarkdownInline(item.text)}</span>
+                    </label>
+                  </li>
+                `;
+            })
+            .join('')}
+      </ul>
+    `;
+}
+
+export function renderMarkdownPreview(markdown = '') {
+    const lines = String(markdown ?? '').split('\n');
+    const blocks = [];
+    let markdownLines = [];
+    let taskItems = [];
+    let inFence = false;
+
+    const flushMarkdown = () => {
+        if (!markdownLines.length) {
+            return;
+        }
+
+        blocks.push(renderMarkdownBlock(markdownLines.join('\n')));
+        markdownLines = [];
+    };
+
+    const flushTasks = () => {
+        if (!taskItems.length) {
+            return;
+        }
+
+        blocks.push(renderTaskList(taskItems));
+        taskItems = [];
+    };
+
+    lines.forEach((line, lineIndex) => {
+        const fenceLine = FENCED_CODE_PATTERN.test(line);
+
+        if (fenceLine) {
+            flushTasks();
+            markdownLines.push(line);
+            inFence = !inFence;
+            return;
+        }
+
+        if (!inFence) {
+            const taskMatch = line.match(TASK_LINE_PATTERN);
+
+            if (taskMatch) {
+                flushMarkdown();
+                taskItems.push({
+                    checked: taskMatch[3].toLowerCase() === 'x',
+                    lineIndex,
+                    text: taskMatch[4],
+                });
+                return;
+            }
+        }
+
+        flushTasks();
+        markdownLines.push(line);
+    });
+
+    flushTasks();
+    flushMarkdown();
+
+    return blocks.join('\n').trim() || '<p class="document-markdown-empty">Empty document</p>';
+}
+
+function isLineInsideFencedCode(lines, lineIndex) {
+    let inFence = false;
+
+    for (let index = 0; index < lineIndex; index += 1) {
+        if (FENCED_CODE_PATTERN.test(lines[index] ?? '')) {
+            inFence = !inFence;
+        }
+    }
+
+    return inFence;
+}
+
+export function toggleMarkdownTodoLine(markdown = '', lineIndex) {
+    const lines = String(markdown ?? '').split('\n');
+    const numericLineIndex = Number(lineIndex);
+
+    if (!Number.isInteger(numericLineIndex) || numericLineIndex < 0 || numericLineIndex >= lines.length) {
+        return String(markdown ?? '');
+    }
+
+    if (isLineInsideFencedCode(lines, numericLineIndex)) {
+        return String(markdown ?? '');
+    }
+
+    const line = lines[numericLineIndex];
+    const match = line.match(TASK_LINE_PATTERN);
+
+    if (!match) {
+        return String(markdown ?? '');
+    }
+
+    const nextMarker = match[3].toLowerCase() === 'x' ? ' ' : 'x';
+    lines[numericLineIndex] = `${match[1]}${match[2]} [${nextMarker}] ${match[4]}${match[5]}`;
+
+    return lines.join('\n');
+}

package/frontend/js/utils/rowEditorValues.js

@@ -0,0 +1,41 @@
+export function getRowEditorValueState(value) {
+  if (value === null || value === undefined) {
+    return "null";
+  }
+
+  return String(value) === "" ? "empty" : "value";
+}
+
+export function getRowEditorValueStateLabel(state) {
+  if (state === "null") {
+    return "NULL";
+  }
+
+  if (state === "empty") {
+    return "EMPTY STRING";
+  }
+
+  return "VALUE";
+}
+
+export function buildRowEditorSubmittedValues(formData, fieldMetadata = {}) {
+  const fieldNames = new Set();
+
+  for (const [key] of formData.entries()) {
+    if (key.startsWith("field:")) {
+      fieldNames.add(key.slice("field:".length));
+    }
+  }
+
+  return Object.fromEntries(
+    [...fieldNames].map((fieldName) => {
+      const valueKey = `field:${fieldName}`;
+      const value = String(formData.get(valueKey) ?? "");
+      const metadata = fieldMetadata[fieldName] ?? {};
+      const keepInitialNull =
+        metadata.initialState === "null" && metadata.dirty !== true && value === "";
+
+      return [fieldName, keepInitialNull ? null : value];
+    })
+  );
+}

package/frontend/js/utils/tableScrollState.js

@@ -0,0 +1,39 @@
+export function captureTableHorizontalScrollState({ routeName = "", scrollNodes = [] } = {}) {
+  return {
+    routeName: String(routeName ?? ""),
+    positions: Array.from(scrollNodes)
+      .map((scrollNode) => ({
+        key: String(scrollNode?.dataset?.tableScrollKey ?? ""),
+        scrollLeft: Number(scrollNode?.scrollLeft) || 0,
+      }))
+      .filter((position) => position.key),
+  };
+}
+
+export function restoreTableHorizontalScrollState({
+  snapshot,
+  routeName = "",
+  scrollNodes = [],
+} = {}) {
+  if (!snapshot || snapshot.routeName !== String(routeName ?? "")) {
+    return false;
+  }
+
+  const candidates = Array.from(scrollNodes);
+  let restored = false;
+
+  for (const position of snapshot.positions ?? []) {
+    const scrollNode = candidates.find(
+      (candidate) => String(candidate?.dataset?.tableScrollKey ?? "") === position.key
+    );
+
+    if (!scrollNode) {
+      continue;
+    }
+
+    scrollNode.scrollLeft = position.scrollLeft;
+    restored = true;
+  }
+
+  return restored;
+}

package/frontend/js/views/charts.js

@@ -220,6 +220,14 @@ function renderQueryResultState(state, result) {
     `;
     }
 
+    if (result.truncated) {
+        return `
+      <div class="border-b border-primary-container/20 bg-primary-container/10 px-4 py-3 text-sm text-on-surface">
+        Charts use the first ${escapeHtml(String(result.rowLimit ?? result.rows?.length ?? 0))} rows. Refine the query for a complete visualization.
+      </div>
+    `;
+    }
+
     return '';
 }
 

package/frontend/js/views/data.js

@@ -461,7 +461,9 @@ function renderTableSurface(state) {
     return [
         '<div class="flex flex-1 min-h-0 flex-col bg-surface-container-lowest">',
         renderTableFilterBar(table, state, activeColumn),
-        '<div class="custom-scrollbar flex-1 overflow-auto">',
+        '<div class="custom-scrollbar flex-1 overflow-auto" data-table-horizontal-scroll data-table-scroll-key="data:',
+        escapeHtml(table.name),
+        '">',
         gridMarkup,
         emptyMarkup,
         '</div>',
@@ -603,6 +605,7 @@ export function renderDataRowEditorPanel(state) {
                 ...getColumnNumberInputMeta(column),
                 allowedValues: column.allowedValues ?? [],
                 notNull: Boolean(column.notNull),
+                rawValue: value,
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),

package/frontend/js/views/documents.js

@@ -0,0 +1,300 @@
+import { escapeHtml, formatCompactDateTime, formatNumber } from '../utils/format.js';
+import { renderMarkdownPreview } from '../utils/markdownDocuments.js';
+
+function renderMissingDatabase() {
+    return `
+      <section class="view-surface">
+        <div class="view-frame flex min-h-full items-center justify-center">
+          <div class="text-center">
+            <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
+            <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+              No Active SQLite Database
+            </p>
+            <p class="mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
+              Select a database before opening its document folder.
+            </p>
+          </div>
+        </div>
+      </section>
+    `;
+}
+
+function renderDocumentListItem(item, selectedId) {
+    const isSelected = String(item.id) === String(selectedId);
+
+    return `
+      <button
+        class="documents-list-item ${isSelected ? 'is-selected' : ''}"
+        data-action="select-document"
+        data-document-id="${escapeHtml(item.id)}"
+        type="button"
+      >
+        <span class="material-symbols-outlined documents-list-item__icon">description</span>
+        <span class="documents-list-item__body">
+          <span class="documents-list-item__title" title="${escapeHtml(item.filename)}">
+            ${escapeHtml(item.filename)}
+          </span>
+          <span class="documents-list-item__meta">
+            ${escapeHtml(formatCompactDateTime(item.updatedAt))} // ${formatNumber(item.contentLength ?? 0)} chars
+          </span>
+        </span>
+      </button>
+    `;
+}
+
+function renderDocumentsSidebar(documents) {
+    const items = documents.items ?? [];
+
+    return `
+      <aside class="documents-view__sidebar">
+        <div class="documents-view__sidebar-header">
+          <div>
+            <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/50">
+              Documents
+            </div>
+            <div class="mt-1 font-mono text-xs text-primary-container">${formatNumber(items.length)} files</div>
+          </div>
+          <button
+            class="icon-button"
+            data-action="create-document"
+            title="New document"
+            type="button"
+            ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">add</span>
+          </button>
+        </div>
+        <div class="documents-view__sidebar-body custom-scrollbar">
+          ${
+              items.length
+                  ? items.map(item => renderDocumentListItem(item, documents.selectedId)).join('')
+                  : `<div class="documents-list-empty">No documents yet</div>`
+          }
+        </div>
+      </aside>
+    `;
+}
+
+function renderDocumentToolbar(documents) {
+    const disabled = documents.saving || documents.detailLoading || !documents.selectedId;
+
+    return `       <label class="documents-filename-field">
+          <input
+            class="control-input"
+            data-bind="document-field"
+            data-field="filename"
+            name="filename"
+            spellcheck="false"
+            type="text"
+            value="${escapeHtml(documents.draftFilename)}"
+            ${!documents.selectedId ? 'disabled' : ''}
+          />
+        </label>
+      <div class="documents-toolbar">
+   
+ 
+       
+        <div class="documents-toolbar__actions">
+          <button
+            class="standard-button"
+            data-action="toggle-document-pane"
+            data-pane="editor"
+            type="button"
+          >
+            <span class="material-symbols-outlined">${documents.editorVisible ? 'visibility_off' : 'edit_note'}</span>
+            ${documents.editorVisible ? 'Hide Editor' : 'Show Editor'}
+          </button>
+          <button
+            class="standard-button"
+            data-action="toggle-document-pane"
+            data-pane="preview"
+            type="button"
+          >
+            <span class="material-symbols-outlined">${documents.previewVisible ? 'visibility_off' : 'visibility'}</span>
+            ${documents.previewVisible ? 'Hide Preview' : 'Show Preview'}
+          </button>
+          <input
+            accept=".md,.markdown,text/markdown,text/plain"
+            data-bind="document-import-file"
+            hidden
+            type="file"
+          />
+          </div>
+        <div class="documents-toolbar__actions">
+          <button
+            class="standard-button"
+            data-action="open-document-insert-table-modal"
+            type="button"
+            ${disabled ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">table_chart</span>
+            Insert Table
+          </button>
+          <button
+            class="standard-button"
+            data-action="open-document-insert-note-modal"
+            type="button"
+            ${disabled ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">note_add</span>
+            Insert Note
+          </button>
+          <button
+            class="standard-button"
+            data-action="export-document-markdown"
+            type="button"
+            ${disabled ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">download</span>
+            Export .md
+          </button>
+          <button
+            class="standard-button"
+            data-action="import-document-markdown"
+            type="button"
+            ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">upload_file</span>
+            Import .md
+          </button>
+        </div>
+          <div class="documents-toolbar__actions">
+          <button
+            class="standard-button"
+            data-action="delete-document"
+            type="button"
+            ${disabled || documents.deleting ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">delete</span>
+            Delete
+          </button>
+          <button
+            class="signature-button"
+            data-action="save-document"
+            type="button"
+            ${disabled || !documents.dirty ? 'disabled aria-disabled="true"' : ''}
+          >
+            <span class="material-symbols-outlined">save</span>
+            ${documents.saving ? 'Saving...' : 'Save'}
+          </button>
+        </div>
+      </div>
+    `;
+}
+
+function renderDocumentEditor(documents) {
+    if (!documents.editorVisible) {
+        return '';
+    }
+
+    return `
+      <section class="documents-pane documents-pane--editor">
+        <div class="documents-pane__header">
+          <span>Editor</span>
+          <span>${formatNumber(documents.draftContent.length)} chars</span>
+        </div>
+        <textarea
+          class="documents-editor-input custom-scrollbar"
+          data-bind="document-field"
+          data-field="content"
+          name="content"
+          spellcheck="true"
+          ${!documents.selectedId ? 'disabled' : ''}
+        >${escapeHtml(documents.draftContent)}</textarea>
+      </section>
+    `;
+}
+
+function renderDocumentPreview(documents) {
+    if (!documents.previewVisible) {
+        return '';
+    }
+
+    return `
+      <section class="documents-pane documents-pane--preview">
+        <div class="documents-pane__header">
+          <span>Preview</span>
+          <span>${escapeHtml(documents.dirty ? 'unsaved' : 'saved')}</span>
+        </div>
+        <div class="document-markdown-preview custom-scrollbar" data-document-preview>
+          ${renderMarkdownPreview(documents.draftContent)}
+        </div>
+      </section>
+    `;
+}
+
+function renderEmptyDocumentsState(documents) {
+    return `
+      <div class="documents-empty-state">
+        <span class="material-symbols-outlined">description</span>
+        <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+          No Documents
+        </p>
+        <button
+          class="signature-button mt-4"
+          data-action="create-document"
+          type="button"
+          ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+        >
+          <span class="material-symbols-outlined">add</span>
+          New Document
+        </button>
+      </div>
+    `;
+}
+
+function renderDocumentDetail(documents) {
+    if (documents.loading && !documents.items.length) {
+        return `
+          <main class="documents-view__detail">
+            <div class="documents-empty-state">
+              <span class="material-symbols-outlined">sync</span>
+              <p class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+                Loading Documents
+              </p>
+            </div>
+          </main>
+        `;
+    }
+
+    if (!documents.selectedId) {
+        return `
+          <main class="documents-view__detail">
+            ${renderEmptyDocumentsState(documents)}
+          </main>
+        `;
+    }
+
+    const paneCount = Number(documents.editorVisible) + Number(documents.previewVisible);
+
+    return `
+      <main class="documents-view__detail">
+        ${renderDocumentToolbar(documents)}
+        ${documents.saveError ? `<div class="documents-error">${escapeHtml(documents.saveError.message)}</div>` : ''}
+        <div class="documents-workspace ${paneCount > 1 ? 'documents-workspace--split' : ''}">
+          ${renderDocumentEditor(documents)}
+          ${renderDocumentPreview(documents)}
+        </div>
+      </main>
+    `;
+}
+
+export function renderDocumentsView(state) {
+    if (!state.connections.active) {
+        return {
+            main: renderMissingDatabase(),
+            panel: '',
+        };
+    }
+
+    const documents = state.documents;
+
+    return {
+        main: `<div class="documents-view">
+                ${renderDocumentsSidebar(documents)}
+                ${renderDocumentDetail(documents)}
+              </div>
+            </div>`,
+        panel: '',
+    };
+}