sqlite-hub 1.2.0 → 1.4.0

package/frontend/js/views/charts.js

@@ -16,7 +16,7 @@ function renderMissingDatabase() {
     <section class="flex flex-1 items-center justify-center px-8 text-center">
       <div class="max-w-xl">
         <span class="material-symbols-outlined mb-4 text-5xl text-on-surface-variant/20">database_off</span>
-        <h1 class="font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+        <h1 class="font-body text-3xl font-black uppercase tracking-tight text-primary-container">
           No Active SQLite Database
         </h1>
         <p class="mt-3 text-sm leading-7 text-on-surface-variant/65">
@@ -154,7 +154,7 @@ function renderChartsList(state) {
           <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">${
               hasSearch ? 'manage_search' : isSavedTab ? 'bookmark' : isUnsavedTab ? 'bookmark_border' : 'query_stats'
           }</span>
-          <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+          <p class="font-body text-lg font-black uppercase tracking-tight text-on-surface">
             ${
                 hasSearch
                     ? 'No Matching Queries'
@@ -220,7 +220,7 @@ function renderEmptyChartDetail() {
     <div class="flex flex-1 items-center justify-center px-8 py-10 text-center">
       <div class="max-w-lg">
         <span class="material-symbols-outlined mb-4 text-5xl text-on-surface-variant/20">bar_chart</span>
-        <h2 class="font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+        <h2 class="font-body text-2xl font-black uppercase tracking-tight text-primary-container">
           Select A Query
         </h2>
         <p class="mt-3 text-sm leading-7 text-on-surface-variant/65">
@@ -339,7 +339,7 @@ export function renderChartsDetailDrawer(state) {
       <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">
               Chart Detail
             </span>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
@@ -359,7 +359,7 @@ export function renderChartsDetailDrawer(state) {
       <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">
               Chart Detail
             </span>
             <button class="query-history-icon-button" data-action="close-charts-query-detail" type="button">
@@ -415,7 +415,7 @@ export function renderChartsDetailDrawer(state) {
             <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
               Chart Detail
             </div>
-            <h2 class="mt-1 truncate font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+            <h2 class="mt-1 truncate font-body text-lg font-black uppercase tracking-tight text-on-surface">
               ${escapeHtml(detail.item.displayTitle)}
             </h2>
           </div>
@@ -547,7 +547,7 @@ function renderChartCard(chart, state, analysis) {
         sizeClass,
         '"><header class="query-chart-card__header"><div class="min-w-0">',
         '<div class="flex flex-wrap items-center gap-2">',
-        '<h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">',
+        '<h3 class="truncate font-body text-xl font-black uppercase tracking-tight text-on-surface">',
         escapeHtml(chart.name),
         '</h3>',
         renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary'),
@@ -609,7 +609,7 @@ export function renderChartsDetail(state) {
       <div class="charts-detail-shell">
         <header class="charts-detail-shell__header" data-charts-detail-header>
           <div class="charts-detail-shell__title">
-            <h1 class="mt-2 truncate font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+            <h1 class="mt-2 truncate font-body text-4xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(detail.item.displayTitle)}
             </h1>
           </div>
@@ -659,7 +659,7 @@ export function renderChartsDetail(state) {
                   <div class="flex min-h-[240px] items-center justify-center border border-dashed border-outline-variant/20 bg-surface-container-low px-8 text-center">
                     <div>
                       <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">add_chart</span>
-                      <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+                      <p class="font-body text-lg font-black uppercase tracking-tight text-on-surface">
                         No Charts Yet
                       </p>
                       <p class="mt-2 max-w-md text-sm leading-6 text-on-surface-variant/60">

package/frontend/js/views/connections.js

@@ -43,7 +43,7 @@ function renderConnectionsBody(state) {
     if (state.connections.error) {
         return `
       <div class="border border-error/20 bg-error-container/10 px-6 py-5 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(state.connections.error.code)}
         </div>
         <div class="mt-2">${escapeHtml(state.connections.error.message)}</div>
@@ -55,7 +55,7 @@ function renderConnectionsBody(state) {
         return `
       <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-10 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">
+        <p class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
           No Recorded SQLite Connections
         </p>
         <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">

package/frontend/js/views/data.js

@@ -193,7 +193,7 @@ function renderWorkspaceError(state) {
 
     return `
     <div class="border-b border-error/20 bg-error-container/10 px-6 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(state.dataBrowser.error.code)}
       </div>
       <div class="mt-2">${escapeHtml(state.dataBrowser.error.message)}</div>

package/frontend/js/views/documents.js

@@ -8,7 +8,7 @@ function renderMissingDatabase() {
         <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">
+            <p class="font-body 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">
@@ -294,7 +294,7 @@ 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">
+        <p class="font-body text-2xl font-black uppercase tracking-tight text-primary-container">
           No Documents
         </p>
         ${renderNewDocumentDropdown(documents, 'mt-4')}
@@ -309,7 +309,7 @@ function renderDocumentDetail(documents) {
             ${renderDocumentsTitlebar(documents, { showFilename: false })}
             <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">
+              <p class="font-body text-2xl font-black uppercase tracking-tight text-primary-container">
                 Loading Documents
               </p>
             </div>

package/frontend/js/views/editor.js

@@ -11,7 +11,7 @@ function renderMissingDatabase() {
     return `
     <div class="flex flex-1 flex-col items-center justify-center bg-surface-container-lowest px-8 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">
+      <p class="font-body 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">
@@ -60,35 +60,35 @@ function renderPerformancePane(state) {
     <div class="performance-metrics-grid grid flex-1 gap-4 bg-surface-container-lowest p-6">
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Exec_Time</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatExecutionTimeMs(metrics.timingMs ?? 0),
         )}</span>
         <span class="text-[10px] text-primary-container">Measured backend execution time</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Statements</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatNumber(metrics.statementCount),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Split and executed by SQLite</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Rows_Returned</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatNumber(metrics.rowCount),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Visible result set size</span>
       </div>
       <div class="metric-card">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Memory_Size</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatBytes(metrics.memoryBytes),
         )}</span>
         <span class="text-[10px] text-on-surface/40">Serialized result payload</span>
       </div>
       <div class="metric-card metric-card--accent">
         <span class="text-[10px] font-mono uppercase text-on-surface/40">Rows_Affected</span>
-        <span class="font-headline text-3xl font-bold text-on-surface">${escapeHtml(
+        <span class="font-body text-3xl font-bold text-on-surface">${escapeHtml(
             formatNumber(metrics.affectedRowCount),
         )}</span>
         <span class="text-[10px] text-primary-container">INSERT / UPDATE / DELETE impact</span>

package/frontend/js/views/mediaTagging.js

@@ -301,9 +301,11 @@ function renderCreatedTagList(tags = [], { canRemove = false, removingTagKey = n
                   escapeHtml(tag.key),
                   '" type="button" title="Remove tag" ',
                   canRemove && removingTagKey !== tag.key ? '' : 'disabled',
-                  '><span class="material-symbols-outlined text-[18px]">',
-                  removingTagKey === tag.key ? 'hourglass_top' : 'delete',
-                  '</span></button></article>',
+                  '><span class="material-symbols-outlined text-sm">',
+                  'delete',
+                  '</span>',
+                  removingTagKey === tag.key ? 'Removing...' : 'Delete',
+                  '</button></article>',
               ].join('');
           })
           .join('')}
@@ -319,7 +321,7 @@ function renderPreviewMedia(
         return `
       <div class="media-tagging-preview__empty">
         <span class="material-symbols-outlined text-4xl">photo_size_select_large</span>
-        <div class="mt-3 font-headline text-lg uppercase tracking-[0.06em] text-primary-container">
+        <div class="mt-3 font-body text-lg uppercase tracking-[0.06em] text-primary-container">
           Queue Empty
         </div>
         <div class="mt-2 text-sm text-on-surface-variant/55">
@@ -715,7 +717,7 @@ function renderMappingSection(state) {
       </div>
       <div class="media-tagging-card__body media-tagging-card__body--mapping">
         <article class="media-tagging-mapping-card ${mappingCandidate ? 'is-selected' : ''}">
-          <div class="font-headline text-sm uppercase tracking-[0.08em] text-primary-container">
+          <div class="font-body text-sm uppercase tracking-[0.08em] text-primary-container">
             ${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)}
           </div>
           ${

package/frontend/js/views/overview.js

@@ -7,7 +7,7 @@ function renderMissingDatabase() {
   return `
     <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-12 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">
+      <p class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
         No Active SQLite Database
       </p>
       <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
@@ -210,7 +210,7 @@ function renderSchemaMapPreview(overview) {
       <div class="space-y-5 p-4">
         <div class="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
           <div>
-            <div class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+            <div class="font-body text-xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(narrative.title)}
             </div>
             <p class="mt-2 max-w-3xl text-sm leading-6 text-on-surface-variant/70">
@@ -237,7 +237,7 @@ function renderSchemaMapPreview(overview) {
                   <div class="text-[9px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
                     ${escapeHtml(stat.label)}
                   </div>
-                  <div class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-on-surface">
+                  <div class="mt-2 font-body text-2xl font-black uppercase tracking-tight text-on-surface">
                     ${escapeHtml(stat.value)}
                   </div>
                 </div>

package/frontend/js/views/settings.js

@@ -105,7 +105,7 @@ function renderSettingsContent(state) {
     if (state.settings.error) {
         return `
       <div class="border border-error/20 bg-error-container/10 px-6 py-5 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(state.settings.error.code)}
         </div>
         <div class="mt-2">${escapeHtml(state.settings.error.message)}</div>
@@ -217,7 +217,7 @@ function renderSettingsContent(state) {
               <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
                 Current_Version
               </div>
-              <div class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+              <div class="mt-2 font-body text-4xl font-black uppercase tracking-tight text-primary-container">
                 v${appVersion}
               </div>
             </div>
@@ -225,7 +225,7 @@ function renderSettingsContent(state) {
               <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
                 SQLite_Runtime
               </div>
-              <div class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+              <div class="mt-2 font-body text-4xl font-black uppercase tracking-tight text-primary-container">
                 ${sqliteVersion}
               </div>
             </div>

package/frontend/js/views/structure.js

@@ -1,5 +1,6 @@
 import { clearInspector, renderDdlSection, renderInspector } from '../components/structureGraph.js';
 import { renderDropdownButton } from '../components/dropdownButton.js';
+import { renderGenerateTypesDropdown } from '../components/generateTypesDropdown.js';
 import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
 import { escapeHtml, formatNumber } from '../utils/format.js';
 
@@ -252,6 +253,10 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
                   },
               ],
           })}
+          ${renderGenerateTypesDropdown({
+              selectedTableName: selectedGraphTable?.name ?? '',
+              hasTables: Boolean(graph.tables?.length),
+          })}
           ${renderDropdownButton({
               icon: 'format_shapes',
               label: 'Format',
@@ -394,7 +399,7 @@ export function renderStructureView(state) {
                   : state.structure.error
                     ? `
                     <div class="min-h-0 flex-1 border-t border-error/20 bg-error-container/10 px-6 py-5 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(state.structure.error.code)}
                       </div>
                       <div class="mt-2">${escapeHtml(state.structure.error.message)}</div>

package/frontend/styles/base.css

@@ -129,11 +129,6 @@ img {
     display: none !important;
 }
 
-.font-headline {
-    font-family: var(--font-family-headline);
-    word-break: break-all;
-}
-
 .font-body {
     font-family: var(--font-family-body);
 }
@@ -159,17 +154,6 @@ img {
     vertical-align: middle;
 }
 
-.no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-}
-
-.no-scrollbar::-webkit-scrollbar {
-    display: none;
-    height: 0;
-    width: 0;
-}
-
 .custom-scrollbar {
     scrollbar-color: var(--color-surface-highest) var(--color-surface-lowest);
     scrollbar-width: thin;
@@ -193,10 +177,7 @@ img {
 }
 
 .clipped-btn,
-.clipped-corner,
-.custom-clip,
-.clip-button,
-.clip-corner {
+.clipped-corner {
     clip-path: var(--clip-path);
 }
 
@@ -274,28 +255,12 @@ img {
     color: transparent;
 }
 
-.cursor-blink {
-    animation: cursor-blink var(--duration-cursor-blink) step-end infinite;
-    border-right: 2px solid var(--color-primary-container);
-}
-
 .text-xs {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-@keyframes cursor-blink {
-    from,
-    to {
-        border-color: transparent;
-    }
-
-    50% {
-        border-color: var(--color-primary-container);
-    }
-}
-
 @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
@@ -306,8 +271,4 @@ img {
         transition-duration: 0.001ms;
     }
 
-    .cursor-blink {
-        animation: none;
-        border-right-color: var(--color-primary-container);
-    }
 }