sqlite-hub 1.2.0 → 1.5.0

package/frontend/js/components/modal.js

@@ -17,6 +17,7 @@ import {
     MEDIA_TAGGING_DEFAULT_TAG_TABLE,
     MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL,
 } from '../lib/mediaTaggingDefaults.js';
+import { SYNTHETIC_GENERATOR_TYPES, getSyntheticGeneratorLabel } from '../utils/syntheticData.js';
 
 function renderField({ label, name, type = 'text', placeholder = '', value = '' }) {
     return `
@@ -126,7 +127,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>
@@ -225,7 +226,7 @@ function renderEditConnectionForm(modal) {
                 label: 'Upload image',
                 name: 'logoFile',
                 accept: '.png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp',
-                helpText: 'Allowed formats: PNG, JPG, WEBP. The file is stored in db_logos.',
+                helpText: 'Allowed formats: PNG, JPG, WEBP.',
             })}
             ${
                 connection.logoUrl
@@ -449,15 +450,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 +482,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 +501,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 +523,512 @@ 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 renderSyntheticGeneratorOptions(value) {
+    return SYNTHETIC_GENERATOR_TYPES.map(
+        type =>
+            `<option value="${escapeHtml(type.value)}" ${String(type.value) === String(value) ? 'selected' : ''}>${escapeHtml(
+                type.label,
+            )}</option>`,
+    ).join('');
+}
+
+function renderSyntheticOptionInput({
+    columnName,
+    option,
+    type = 'text',
+    value = '',
+    min = null,
+    max = null,
+    step = null,
+    placeholder = '',
+}) {
+    const attributes = [
+        `class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"`,
+        placeholder ? `aria-label="${escapeHtml(placeholder)}"` : '',
+        `data-bind="generate-data-mapping"`,
+        `data-column-name="${escapeHtml(columnName)}"`,
+        `data-field="${escapeHtml(option)}"`,
+        placeholder ? `placeholder="${escapeHtml(placeholder)}"` : '',
+        `type="${escapeHtml(type)}"`,
+        `value="${escapeHtml(value)}"`,
+        min !== null ? `min="${escapeHtml(min)}"` : '',
+        max !== null ? `max="${escapeHtml(max)}"` : '',
+        step !== null ? `step="${escapeHtml(step)}"` : '',
+    ].filter(Boolean);
+
+    return `<input ${attributes.join(' ')} />`;
+}
+
+function renderSyntheticOptionSelect({ columnName, option, value = '', options = [] }) {
+    return `
+      <select
+        class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        data-bind="generate-data-mapping"
+        data-column-name="${escapeHtml(columnName)}"
+        data-field="${escapeHtml(option)}"
+      >
+        ${options
+            .map(
+                item =>
+                    `<option value="${escapeHtml(item.value)}" ${String(item.value) === String(value) ? 'selected' : ''}>${escapeHtml(
+                        item.label,
+                    )}</option>`,
+            )
+            .join('')}
+      </select>
+    `;
+}
+
+function renderSyntheticMappingOptions(mapping) {
+    const options = mapping.options ?? {};
+    const columnName = mapping.columnName;
+
+    switch (mapping.generator) {
+        case 'static':
+            return renderSyntheticOptionInput({
+                columnName,
+                option: 'value',
+                value: options.value ?? '',
+                placeholder: 'Value',
+            });
+        case 'randomInteger':
+            return `
+              <div class="synthetic-generator-options-grid synthetic-generator-options-grid--two">
+                ${renderSyntheticOptionInput({
+                    columnName,
+                    option: 'min',
+                    type: 'number',
+                    value: options.min ?? 1,
+                    step: 1,
+                    placeholder: 'Min',
+                })}
+                ${renderSyntheticOptionInput({
+                    columnName,
+                    option: 'max',
+                    type: 'number',
+                    value: options.max ?? 1000,
+                    step: 1,
+                    placeholder: 'Max',
+                })}
+              </div>
+            `;
+        case 'randomDecimal':
+            return `
+              <div class="synthetic-generator-options-grid synthetic-generator-options-grid--three">
+                ${renderSyntheticOptionInput({
+                    columnName,
+                    option: 'min',
+                    type: 'number',
+                    value: options.min ?? 0,
+                    step: '0.01',
+                    placeholder: 'Min',
+                })}
+                ${renderSyntheticOptionInput({
+                    columnName,
+                    option: 'max',
+                    type: 'number',
+                    value: options.max ?? 1000,
+                    step: '0.01',
+                    placeholder: 'Max',
+                })}
+                ${renderSyntheticOptionInput({
+                    columnName,
+                    option: 'decimals',
+                    type: 'number',
+                    value: options.decimals ?? 2,
+                    min: 0,
+                    max: 8,
+                    step: 1,
+                    placeholder: 'Decimals',
+                })}
+              </div>
+            `;
+        case 'boolean':
+            return renderSyntheticOptionInput({
+                columnName,
+                option: 'trueProbability',
+                type: 'number',
+                value: options.trueProbability ?? 50,
+                min: 0,
+                max: 100,
+                step: 1,
+                placeholder: 'True %',
+            });
+        case 'timestamp':
+            return `
+              <div class="synthetic-generator-options-grid synthetic-generator-options-grid--timestamp">
+                ${renderSyntheticOptionSelect({
+                    columnName,
+                    option: 'range',
+                    value: options.range ?? 'last30',
+                    options: [
+                        { value: 'last30', label: 'Last 30 days' },
+                        { value: 'last365', label: 'Last 365 days' },
+                        { value: 'custom', label: 'Custom' },
+                    ],
+                })}
+                ${
+                    options.range === 'custom'
+                        ? `${renderSyntheticOptionInput({
+                              columnName,
+                              option: 'from',
+                              type: 'datetime-local',
+                              value: options.from ?? '',
+                              placeholder: 'From',
+                          })}
+                          ${renderSyntheticOptionInput({
+                              columnName,
+                              option: 'to',
+                              type: 'datetime-local',
+                              value: options.to ?? '',
+                              placeholder: 'To',
+                          })}`
+                        : ''
+                }
+              </div>
+            `;
+        case 'oneOf':
+            return renderSyntheticOptionInput({
+                columnName,
+                option: 'values',
+                value: options.values ?? '',
+                placeholder: 'Comma values',
+            });
+        case 'skip':
+        default:
+            return `<span class="font-mono text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">No options</span>`;
+    }
+}
+
+function formatSyntheticPreviewValue(value) {
+    if (value === null || value === undefined) {
+        return 'NULL';
+    }
+
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+
+    return String(value);
+}
+
+function renderSyntheticPreview(modal) {
+    const rows = (modal.previewRows ?? []).slice(0, 3);
+    const columns = modal.previewColumns?.length
+        ? modal.previewColumns
+        : (modal.columns ?? []).map(column => column.name);
+
+    if (!rows.length) {
+        return `
+          <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 text-sm text-on-surface-variant/55">
+            Preview creates up to 3 rows without writing to the database.
+          </div>
+        `;
+    }
+
+    return `
+      <div class="synthetic-generator-preview">
+        <table>
+          <thead>
+            <tr>
+              ${columns.map(column => `<th>${escapeHtml(column)}</th>`).join('')}
+            </tr>
+          </thead>
+          <tbody>
+            ${rows
+                .map(
+                    row => `
+                  <tr>
+                    ${columns
+                        .map(
+                            column =>
+                                `<td title="${escapeHtml(formatSyntheticPreviewValue(row[column]))}">${escapeHtml(
+                                    truncateMiddle(formatSyntheticPreviewValue(row[column]), 56),
+                                )}</td>`,
+                        )
+                        .join('')}
+                  </tr>
+                `,
+                )
+                .join('')}
+          </tbody>
+        </table>
+      </div>
+    `;
+}
+
+export function renderGenerateDataForm(modal) {
+    const columns = modal.columns ?? [];
+    const mappings = modal.mappings ?? [];
+    const disabledAttribute = modal.submitting || modal.previewLoading ? 'disabled aria-disabled="true"' : '';
+
+    return `
+    <form class="generate-data-modal-form" data-form="generate-data">
+      <div class="synthetic-generator-count-row">
+        <label class="block space-y-2">
+          <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Rows</span>
+          <input
+            class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+            data-bind="generate-data-field"
+            data-field="rowCount"
+            max="10000"
+            min="1"
+            name="rowCount"
+            step="1"
+            type="number"
+            value="${escapeHtml(modal.rowCount ?? 100)}"
+          />
+        </label>
+        <div class="flex items-end text-sm leading-6 text-on-surface-variant/60">
+          Create test rows for "${escapeHtml(modal.tableName ?? '')}".
+        </div>
+      </div>
+      <div class="synthetic-generator-grid custom-scrollbar">
+        <div class="synthetic-generator-grid__header">
+          <div>Column</div>
+          <div>SQLite Type</div>
+          <div>Generator</div>
+          <div>Options</div>
+        </div>
+        ${
+            columns.length
+                ? mappings
+                      .map(mapping => {
+                          const column = columns.find(item => item.name === mapping.columnName) ?? {};
+                          const sqliteType = column.declaredType || column.affinity || 'ANY';
+
+                          return `
+                            <div class="synthetic-generator-grid__row">
+                              <div class="min-w-0">
+                                <div class="synthetic-generator-column-name">${escapeHtml(mapping.columnName)}</div>
+                                ${
+                                    mapping.note
+                                        ? `<div class="synthetic-generator-column-note">${escapeHtml(mapping.note)}</div>`
+                                        : ''
+                                }
+                              </div>
+                              <div class="synthetic-generator-sqlite-type">
+                                ${escapeHtml(sqliteType)}
+                                ${column.notNull ? '<span>NOT NULL</span>' : ''}
+                              </div>
+                              <div>
+                                <select
+                                  class="control-select w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                                  data-bind="generate-data-mapping"
+                                  data-column-name="${escapeHtml(mapping.columnName)}"
+                                  data-field="generator"
+                                  title="${escapeHtml(getSyntheticGeneratorLabel(mapping.generator))}"
+                                >
+                                  ${renderSyntheticGeneratorOptions(mapping.generator)}
+                                </select>
+                              </div>
+                              <div class="min-w-0">
+                                ${renderSyntheticMappingOptions(mapping)}
+                              </div>
+                            </div>
+                          `;
+                      })
+                      .join('')
+                : `<div class="px-4 py-6 text-sm text-on-surface-variant/55">No writable columns available.</div>`
+        }
+      </div>
+      <div class="space-y-3">
+        <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container">Preview</div>
+        ${renderSyntheticPreview(modal)}
+      </div>
+      ${renderError(modal.error)}
+      <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 flex-wrap items-center justify-end gap-2">
+          <button class="standard-button" data-action="preview-generate-data" type="button" ${disabledAttribute}>
+            <span class="material-symbols-outlined text-sm">visibility</span>
+            ${modal.previewLoading ? 'Previewing...' : 'Preview'}
+          </button>
+          <button class="signature-button" type="submit" ${modal.submitting ? 'disabled aria-disabled="true"' : ''}>
+            <span class="material-symbols-outlined text-sm">auto_awesome</span>
+            ${modal.submitting ? 'Inserting...' : 'Insert Rows'}
+          </button>
+        </div>
+      </div>
+    </form>
+  `;
+}
+
 function renderDeleteRowConfirmForm(modal) {
     const rowPreview = modal.rowPreview ?? [];
     const rowLabelMarkup = modal.rowLabel
@@ -1172,7 +1689,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 +2323,26 @@ 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),
+        },
+        'generate-data': {
+            eyebrow: 'Data Browser // Synthetic rows',
+            title: 'Generate Synthetic Data',
+            body: renderGenerateDataForm(modal),
+        },
         'edit-connection': {
             eyebrow: 'Registry // Update saved SQLite target',
             title: 'Edit Connection',
@@ -1904,25 +2431,32 @@ export function renderModal(state) {
         return '';
     }
 
+    const modalBodyClass =
+        modal.kind === 'generate-data'
+            ? 'app-modal-body app-modal-body--no-scroll px-6 py-6'
+            : 'app-modal-body custom-scrollbar space-y-5 px-6 py-6';
+
     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'
-                ? 'max-w-4xl'
-                : 'max-w-xl'
+              : modal.kind === 'generate-types' || modal.kind === 'generate-data'
+                ? '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 +2468,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="${modalBodyClass}">${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(