sqlite-hub 1.2.0 → 1.4.0

package/frontend/js/components/modal.js

@@ -126,7 +126,7 @@ function renderError(error) {
 
     return `
     <div class="border border-error/20 bg-error-container/20 px-4 py-3 text-sm text-error">
-      <div class="font-headline text-xs font-bold uppercase tracking-[0.18em]">${escapeHtml(
+      <div class="font-body text-xs font-bold uppercase tracking-[0.18em]">${escapeHtml(
           error.code || 'Request failed',
       )}</div>
       <div class="mt-1 text-on-surface">${escapeHtml(error.message)}</div>
@@ -449,15 +449,25 @@ function renderDeleteBackupForm(modal) {
     ].join('');
 }
 
-function renderEditBackupNotesForm(modal) {
+function renderEditBackupForm(modal) {
     return `
-    <form class="space-y-5" data-form="edit-backup-notes">
+    <form class="space-y-5" data-form="edit-backup">
       <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
-        <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Backup</div>
-        <div class="mt-2 font-headline text-sm font-black uppercase text-on-surface">
-          ${escapeHtml(modal.backupName ?? 'Backup')}
+        <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Primary Key</div>
+        <div class="mt-2 font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface/80">
+          ${escapeHtml(modal.backupId ?? 'n/a')}
         </div>
       </div>
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Name</span>
+        <input
+          class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest px-3 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+          name="name"
+          placeholder="Backup name"
+          required
+          value="${escapeHtml(modal.backupName ?? 'Backup')}"
+        />
+      </label>
       <label class="block space-y-2">
         <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Notes</span>
         <textarea
@@ -471,7 +481,7 @@ function renderEditBackupNotesForm(modal) {
         <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
         <button class="signature-button" type="submit" ${modal.submitting ? 'disabled' : ''}>
           <span class="material-symbols-outlined text-sm">save</span>
-          ${modal.submitting ? 'Saving...' : 'Save notes'}
+          ${modal.submitting ? 'Saving...' : 'Save backup'}
         </button>
       </div>
     </form>
@@ -490,7 +500,7 @@ function renderBackupSafetyForm(modal) {
       </p>
       <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
         <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Safety Backup</div>
-        <div class="mt-2 font-headline text-sm font-black uppercase text-on-surface">${escapeHtml(
+        <div class="mt-2 font-body text-sm font-black uppercase text-on-surface">${escapeHtml(
             modal.backupNameBeforeOperation ?? modal.backupName ?? 'Before operation',
         )}</div>
       </div>
@@ -512,6 +522,180 @@ function renderBackupSafetyForm(modal) {
   `;
 }
 
+function renderTypeGenerationSelect({ label, field, value, options = [] }) {
+    return renderSelectField({
+        label,
+        name: field,
+        value,
+        bind: 'type-generation-field',
+        options,
+    }).replace('<select ', `<select data-type-generation-field="${escapeHtml(field)}" `);
+}
+
+function renderTypeGenerationCheckbox({ label, field, checked }) {
+    return `
+      <label class="standard-checkbox">
+        <input
+          ${checked ? 'checked' : ''}
+          data-bind="type-generation-field"
+          data-type-generation-field="${escapeHtml(field)}"
+          type="checkbox"
+        />
+        <span>${escapeHtml(label)}</span>
+      </label>
+    `;
+}
+
+function renderTypeGenerationCodePreview(code) {
+    const text = String(code ?? '');
+    const normalized = text.includes('\n') || text.includes('\\n')
+        ? text.replace(/\\n/g, '\n')
+        : text
+              .replace(/\{\s*/g, '{\n  ')
+              .replace(/;\s*/g, ';\n  ')
+              .replace(/\s*\}\s*$/g, '\n}');
+
+    return normalized
+        .replace(/\r\n/g, '\n')
+        .split('\n')
+        .map(line => `<span class="block whitespace-pre">${line ? escapeHtml(line) : '&nbsp;'}</span>`)
+        .join('');
+}
+
+export function renderGenerateTypesForm(modal) {
+    const options = modal.options ?? {};
+    const result = modal.result ?? {};
+    const target = modal.target ?? 'typescript';
+    const isAllTables = modal.scope === 'all';
+    const fileCount = result.files?.length ?? modal.tableNames?.length ?? 0;
+    const subjectLabel = isAllTables
+        ? `all ${fileCount || ''} tables`.replace(/\s+/g, ' ').trim()
+        : `the schema of "${modal.tableName ?? ''}"`;
+    const downloadLabel = result.files?.length ? 'Download Files' : 'Download';
+
+    return `
+    <div class="space-y-5">
+      <p class="text-sm leading-6 text-on-surface-variant/70">
+        Generate application types from ${escapeHtml(subjectLabel)}.
+      </p>
+      <div class="grid gap-5 xl:grid-cols-[24rem_minmax(0,1fr)]">
+        <div class="min-w-0 space-y-4">
+          <div class="space-y-4">
+            ${renderTypeGenerationSelect({
+                label: 'Target',
+                field: 'target',
+                value: target,
+                options: [
+                    { value: 'typescript', label: 'TypeScript' },
+                    { value: 'rust', label: 'Rust' },
+                    { value: 'kotlin', label: 'Kotlin' },
+                    { value: 'swift', label: 'Swift' },
+                ],
+            })}
+            ${renderTypeGenerationSelect({
+                label: 'Property naming',
+                field: 'propertyNaming',
+                value: options.propertyNaming ?? 'camel',
+                options: [
+                    { value: 'preserve', label: 'Preserve' },
+                    { value: 'camel', label: 'camelCase' },
+                    { value: 'pascal', label: 'PascalCase' },
+                    { value: 'snake', label: 'snake_case' },
+                ],
+            })}
+            ${renderTypeGenerationSelect({
+                label: 'Nullable handling',
+                field: 'nullableMode',
+                value: options.nullableMode ?? 'native',
+                options: [
+                    { value: 'native', label: 'Native' },
+                    { value: 'optional', label: 'Optional (TypeScript)' },
+                ],
+            })}
+            ${
+                target === 'typescript'
+                    ? renderTypeGenerationSelect({
+                          label: 'JSON type',
+                          field: 'jsonType',
+                          value: options.jsonType ?? 'unknown',
+                          options: [
+                              { value: 'unknown', label: 'unknown' },
+                              { value: 'record', label: 'Record<string, unknown>' },
+                              { value: 'json-value', label: 'JsonValue' },
+                          ],
+                      })
+                    : ''
+            }
+          </div>
+          <div class="grid gap-2">
+            ${renderTypeGenerationCheckbox({
+                label: 'Export declaration',
+                field: 'exportDeclaration',
+                checked: options.exportDeclaration !== false,
+            })}
+            ${renderTypeGenerationCheckbox({
+                label: 'Include default values as comments',
+                field: 'includeDefaultsAsComments',
+                checked: Boolean(options.includeDefaultsAsComments),
+            })}
+            ${renderTypeGenerationCheckbox({
+                label: 'Include generated columns',
+                field: 'includeGeneratedColumns',
+                checked: options.includeGeneratedColumns !== false,
+            })}
+            ${renderTypeGenerationCheckbox({
+                label: 'Include hidden columns',
+                field: 'includeHiddenColumns',
+                checked: Boolean(options.includeHiddenColumns),
+            })}
+          </div>
+        </div>
+        <div class="min-w-0 space-y-3">
+          <div class="flex items-center justify-between gap-3">
+            <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container">Code Preview</div>
+            <div class="truncate font-mono text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+              ${escapeHtml(result.fileName ?? '')}
+            </div>
+          </div>
+          ${
+              result.files?.length
+                  ? `<div class="flex flex-wrap gap-2">${result.files
+                        .map(
+                            file =>
+                                `<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1 font-mono text-[10px] uppercase tracking-[0.14em] text-on-surface-variant/70">${escapeHtml(
+                                    file.fileName ?? file.tableName ?? 'types',
+                                )}</span>`,
+                        )
+                        .join('')}</div>`
+                  : ''
+          }
+          <pre class="type-generation-code-preview custom-scrollbar border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface"><code>${renderTypeGenerationCodePreview(
+              modal.loading ? 'Generating...' : result.code ?? '',
+          )}</code></pre>
+          ${renderError(modal.error)}
+        </div>
+      </div>
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <div class="flex items-center gap-2">
+          <button class="standard-button" data-action="copy-generated-types" type="button" ${
+              result.code ? '' : 'disabled'
+          }>
+            <span class="material-symbols-outlined text-sm">content_copy</span>
+            Copy Code
+          </button>
+          <button class="signature-button" data-action="download-generated-types" type="button" ${
+              result.code ? '' : 'disabled'
+          }>
+            <span class="material-symbols-outlined text-sm">download</span>
+            ${escapeHtml(downloadLabel)}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 function renderDeleteRowConfirmForm(modal) {
     const rowPreview = modal.rowPreview ?? [];
     const rowLabelMarkup = modal.rowLabel
@@ -1172,7 +1356,7 @@ function renderTextExportModal(modal, action) {
                       <span class="material-symbols-outlined text-xl">${escapeHtml(option.icon)}</span>
                     </span>
                     <span class="min-w-0">
-                      <span class="block truncate font-headline text-lg font-black uppercase tracking-normal text-primary-container">
+                      <span class="block truncate font-body text-lg font-black uppercase tracking-normal text-primary-container">
                         ${escapeHtml(option.label)}
                       </span>
                       <span class="mt-1 block font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">
@@ -1806,16 +1990,21 @@ export function renderModal(state) {
             title: 'Delete Backup',
             body: renderDeleteBackupForm(modal),
         },
-        'edit-backup-notes': {
-            eyebrow: 'Backups // Notes',
-            title: 'Edit Backup Notes',
-            body: renderEditBackupNotesForm(modal),
+        'edit-backup': {
+            eyebrow: 'Backups // Edit',
+            title: 'Edit Backup',
+            body: renderEditBackupForm(modal),
         },
         'backup-safety': {
             eyebrow: 'Backups // Safety check',
             title: 'Create a safety backup?',
             body: renderBackupSafetyForm(modal),
         },
+        'generate-types': {
+            eyebrow: 'Structure // Type generation',
+            title: 'Generate Types',
+            body: renderGenerateTypesForm(modal),
+        },
         'edit-connection': {
             eyebrow: 'Registry // Update saved SQLite target',
             title: 'Edit Connection',
@@ -1906,23 +2095,27 @@ export function renderModal(state) {
 
     return `
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
-      <div class="w-full ${
+      <div class="app-modal-shell w-full ${
           modal.kind === 'chart-editor' ||
           modal.kind === 'document-insert-table' ||
           modal.kind === 'document-insert-note' ||
           modal.kind === 'row-update-preview' ||
           modal.kind === 'table-designer-constraints'
               ? 'max-w-3xl'
-              : modal.kind === 'query-export' || modal.kind === 'data-export' || modal.kind === 'backup-safety'
+              : modal.kind === 'generate-types'
+                ? 'max-w-6xl'
+              : modal.kind === 'query-export' ||
+                  modal.kind === 'data-export' ||
+                  modal.kind === 'backup-safety'
                 ? 'max-w-4xl'
                 : 'max-w-xl'
       } border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
-        <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
+        <div class="shrink-0 flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">
               ${escapeHtml(config.eyebrow)}
             </div>
-            <h2 class="mt-2 font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-2 font-body text-3xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(config.title)}
             </h2>
           </div>
@@ -1934,7 +2127,7 @@ export function renderModal(state) {
             <span class="material-symbols-outlined">close</span>
           </button>
         </div>
-        <div class="space-y-5 px-6 py-6">${config.body}</div>
+        <div class="app-modal-body custom-scrollbar space-y-5 px-6 py-6">${config.body}</div>
       </div>
     </div>
   `;

package/frontend/js/components/pageHeader.js

@@ -16,7 +16,7 @@ export function renderPageHeader({ eyebrow = '', title, subtitle = '', actions =
             `
                 : ''
         }
-        <h1 class="text-5xl font-headline font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(title)}</h1>
+        <h1 class="text-5xl font-body font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(title)}</h1>
         ${
             subtitle
                 ? `<p class="text-xs font-mono text-on-surface/40 mt-1 uppercase tracking-widest">${escapeHtml(

package/frontend/js/components/queryHistoryDetail.js

@@ -100,7 +100,7 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Query Detail
             </span>
             <button
@@ -124,7 +124,7 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Query Detail
             </span>
             <button
@@ -178,7 +178,7 @@ export function renderQueryHistoryDetail({
     '<div class="border-b border-outline-variant/10 px-5 py-4">',
     '<div class="flex items-center justify-between gap-3"><div>',
     '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">Query Detail</div>',
-    '<h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">',
+    '<h2 class="mt-1 font-body text-lg font-black uppercase tracking-tight text-on-surface">',
     escapeHtml(item.displayTitle),
     "</h2></div>",
     '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',

package/frontend/js/components/queryHistoryHeader.js

@@ -11,7 +11,7 @@ export function renderQueryHistoryHeader({
       <div class="flex items-center justify-between gap-3">
         <div class="flex items-center gap-2">
           <span class="material-symbols-outlined text-[18px] text-primary-container">${escapeHtml(icon)}</span>
-          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+          <span class="font-body text-xs font-black uppercase tracking-[0.18em] text-primary-container">
             ${escapeHtml(title)}
           </span>
         </div>

package/frontend/js/components/queryHistoryPanel.js

@@ -114,7 +114,7 @@ export function renderQueryHistoryPanel({
                 ? `
               <div class="flex h-full min-h-[240px] flex-col items-center justify-center px-6 text-center">
                 <span class="material-symbols-outlined text-4xl text-on-surface-variant/25">manage_search</span>
-                <p class="mt-4 font-headline text-lg font-bold uppercase tracking-tight text-on-surface">
+                <p class="mt-4 font-body text-lg font-bold uppercase tracking-tight text-on-surface">
                   No Matching Queries
                 </p>
                 <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/65">

package/frontend/js/components/rowEditorPanel.js

@@ -176,6 +176,14 @@ function getFieldTimestampPreview(field = {}, tableMeta = {}) {
   });
 }
 
+function isNumberInputCompatibleValue(value) {
+  if (value === null || value === undefined || value === "") {
+    return true;
+  }
+
+  return /^[-+]?(?:\d+|\d*\.\d+)(?:e[-+]?\d+)?$/i.test(String(value).trim());
+}
+
 function renderTimestampPreview(field = {}, tableMeta = {}) {
   const preview = getFieldTimestampPreview(field, tableMeta);
 
@@ -361,7 +369,9 @@ function renderEditableField(field, tableMeta = {}) {
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
   const badges = withEmailBadge(withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview), email);
   const jsonPreview = formatJsonPreview(field.value);
-  const inputType = field.inputType === "number" ? "number" : "text";
+  const canUseNumberInput =
+    field.inputType === "number" && isNumberInputCompatibleValue(getFieldRawValue(field));
+  const inputType = canUseNumberInput ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
   const valueState = getRowEditorValueState(getFieldRawValue(field));
 
@@ -577,7 +587,7 @@ export function renderRowEditorPanel({
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
             </div>
-            <h2 class="mt-2 font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-2 font-body text-3xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(title)}
             </h2>
             ${
@@ -647,7 +657,7 @@ export function renderRowEditorPanel({
                     saveError
                       ? `
                           <div class="border border-error/20 bg-error-container/10 px-4 py-4 text-sm text-on-surface">
-                            <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+                            <div class="font-body text-xs font-bold uppercase tracking-[0.18em] text-error">
                               ${escapeHtml(saveError.code)}
                             </div>
                             <div class="mt-2">${escapeHtml(saveError.message)}</div>

package/frontend/js/router.js

@@ -1,8 +1,29 @@
+function decodeRouteValue(value) {
+    try {
+        return decodeURIComponent(value);
+    } catch {
+        return value;
+    }
+}
+
 export function parseHash(hash = window.location.hash) {
     const normalized = hash.startsWith('#') ? hash.slice(1) : hash;
-    const [pathname = '/'] = normalized.split('?');
+    const queryIndex = normalized.indexOf('?');
+    const pathWithFragment = queryIndex >= 0 ? normalized.slice(0, queryIndex) : normalized;
+    const queryWithFragment = queryIndex >= 0 ? normalized.slice(queryIndex + 1) : '';
+    const pathFragmentIndex = pathWithFragment.indexOf('#');
+    const queryFragmentIndex = queryWithFragment.indexOf('#');
+    const pathname =
+        pathFragmentIndex >= 0 ? pathWithFragment.slice(0, pathFragmentIndex) : pathWithFragment || '/';
+    const routeFragment =
+        pathFragmentIndex >= 0
+            ? pathWithFragment.slice(pathFragmentIndex + 1)
+            : queryFragmentIndex >= 0
+              ? queryWithFragment.slice(queryFragmentIndex + 1)
+              : null;
     const cleanPath = pathname || '/';
     const segments = cleanPath.split('/').filter(Boolean);
+    const decodedRouteFragment = routeFragment ? decodeRouteValue(routeFragment) : null;
 
     if (segments.length === 0) {
         return { name: 'landing', path: '/', params: {} };
@@ -20,7 +41,7 @@ export function parseHash(hash = window.location.hash) {
                 name: 'charts',
                 path: cleanPath,
                 params: {
-                    historyId: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    historyId: segments[1] ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'documents':
@@ -28,7 +49,7 @@ export function parseHash(hash = window.location.hash) {
                 name: 'documents',
                 path: cleanPath,
                 params: {
-                    documentId: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    documentId: segments[1] ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'editor':
@@ -42,7 +63,8 @@ export function parseHash(hash = window.location.hash) {
                 name: 'data',
                 path: cleanPath,
                 params: {
-                    tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    tableName: segments[1] ? decodeRouteValue(segments[1]) : null,
+                    rowPrimaryKey: decodedRouteFragment,
                 },
             };
         case 'structure':
@@ -50,7 +72,7 @@ export function parseHash(hash = window.location.hash) {
                 name: 'structure',
                 path: cleanPath,
                 params: {
-                    tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    tableName: segments[1] ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'table-designer':
@@ -59,7 +81,7 @@ export function parseHash(hash = window.location.hash) {
                 path: cleanPath,
                 params: {
                     isNew: segments[1] === 'new',
-                    tableName: segments[1] && segments[1] !== 'new' ? decodeURIComponent(segments[1]) : null,
+                    tableName: segments[1] && segments[1] !== 'new' ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'media-tagging':