sqlite-hub 0.9.1 → 0.9.3

package/frontend/js/store.js

@@ -29,7 +29,9 @@ const DEFAULT_SETTINGS = {
     maxPageSize: 200,
     csvDelimiter: ',',
 };
+const DEFAULT_DATA_PAGE_SIZE = 50;
 const DATA_PAGE_SIZES = [25, 50, 100];
+const DATA_ROW_SIZE_STORAGE_KEY = 'data_row_size';
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
 const CHART_HEIGHT_PRESETS = new Set(['small', 'medium', 'large']);
@@ -46,6 +48,22 @@ let chartsLoadVersion = 0;
 let chartsDetailLoadVersion = 0;
 let mediaTaggingPreviewVersion = 0;
 
+function readStoredDataPageSize(fallback = DEFAULT_DATA_PAGE_SIZE) {
+    try {
+        return normalizeDataPageSize(globalThis.localStorage?.getItem(DATA_ROW_SIZE_STORAGE_KEY), fallback);
+    } catch {
+        return fallback;
+    }
+}
+
+function storeDataPageSize(pageSize) {
+    try {
+        globalThis.localStorage?.setItem(DATA_ROW_SIZE_STORAGE_KEY, String(pageSize));
+    } catch {
+        // Ignore unavailable browser storage; the in-memory setting still applies.
+    }
+}
+
 const state = {
     ready: false,
     route: { name: 'landing', path: '/', params: {} },
@@ -79,7 +97,7 @@ const state = {
         saving: false,
         deleting: false,
         page: 1,
-        pageSize: 50,
+        pageSize: readStoredDataPageSize(),
         sortColumn: null,
         sortDirection: null,
         searchQuery: '',
@@ -124,9 +142,11 @@ const state = {
         saveError: null,
     },
     charts: {
+        loaded: false,
         queries: [],
         loading: false,
         error: null,
+        historyTab: 'recent',
         selectedHistoryId: null,
         chartHeightPreset: 'medium',
         sqlExpanded: false,
@@ -666,9 +686,11 @@ function resetQueryHistoryState({ preserveSearch = true } = {}) {
 function resetChartsState() {
     chartsLoadVersion += 1;
     chartsDetailLoadVersion += 1;
+    state.charts.loaded = false;
     state.charts.queries = [];
     state.charts.loading = false;
     state.charts.error = null;
+    state.charts.historyTab = 'recent';
     state.charts.selectedHistoryId = null;
     state.charts.chartHeightPreset = 'medium';
     state.charts.sqlExpanded = false;
@@ -689,6 +711,10 @@ function normalizeChartsHeightPreset(value) {
     return CHART_HEIGHT_PRESETS.has(normalizedValue) ? normalizedValue : 'medium';
 }
 
+function normalizeChartsHistoryTab(value) {
+    return ['recent', 'saved'].includes(value) ? value : 'recent';
+}
+
 function mergeQueryHistoryItemWithChartSummary(updatedItem, fallbackItem = null) {
     if (!updatedItem) {
         return updatedItem;
@@ -714,20 +740,24 @@ function syncQueryHistoryItem(updatedItem) {
         return;
     }
 
-    state.editor.history = state.editor.history.map(entry => (entry.id === updatedItem.id ? updatedItem : entry));
+    const updatedItemId = String(updatedItem.id);
 
-    if (state.editor.historyDetail?.id === updatedItem.id) {
+    state.editor.history = state.editor.history.map(entry => (String(entry.id) === updatedItemId ? updatedItem : entry));
+
+    if (String(state.editor.historyDetail?.id ?? '') === updatedItemId) {
         state.editor.historyDetail = updatedItem;
     }
 
     const existingChartsEntry =
-        state.charts.queries.find(entry => entry.id === updatedItem.id) ??
-        (state.charts.detail?.item?.id === updatedItem.id ? state.charts.detail.item : null);
+        state.charts.queries.find(entry => String(entry.id) === updatedItemId) ??
+        (String(state.charts.detail?.item?.id ?? '') === updatedItemId ? state.charts.detail.item : null);
     const mergedChartsItem = mergeQueryHistoryItemWithChartSummary(updatedItem, existingChartsEntry);
 
-    state.charts.queries = state.charts.queries.map(entry => (entry.id === updatedItem.id ? mergedChartsItem : entry));
+    state.charts.queries = state.charts.queries.map(entry =>
+        String(entry.id) === updatedItemId ? mergedChartsItem : entry,
+    );
 
-    if (state.charts.detail?.item?.id === updatedItem.id) {
+    if (String(state.charts.detail?.item?.id ?? '') === updatedItemId) {
         state.charts.detail = {
             ...state.charts.detail,
             item: mergeQueryHistoryItemWithChartSummary(updatedItem, state.charts.detail.item),
@@ -1169,7 +1199,56 @@ async function loadChartsDetail(historyId) {
     }
 }
 
-async function loadCharts(version, route) {
+function getRequestedChartsHistoryId(route) {
+    const requestedHistoryId = Number(route.params?.historyId ?? null);
+
+    return Number.isInteger(requestedHistoryId) && requestedHistoryId > 0 ? requestedHistoryId : null;
+}
+
+function resolveLoadableChartsHistoryId(route) {
+    const requestedHistoryId = getRequestedChartsHistoryId(route);
+
+    if (!requestedHistoryId) {
+        return null;
+    }
+
+    return state.charts.queries.some(item => item.id === requestedHistoryId) ? requestedHistoryId : null;
+}
+
+function hasSettledChartsDetail(historyId) {
+    if (state.charts.detailLoading || state.charts.resultLoading) {
+        return false;
+    }
+
+    if (historyId === null) {
+        return (
+            state.charts.selectedHistoryId === null &&
+            !state.charts.detail &&
+            !state.charts.result &&
+            !state.charts.detailError &&
+            !state.charts.resultError
+        );
+    }
+
+    return (
+        state.charts.selectedHistoryId === historyId &&
+        (state.charts.detail?.item?.id === historyId || Boolean(state.charts.detailError)) &&
+        (Boolean(state.charts.result) || Boolean(state.charts.resultError))
+    );
+}
+
+async function loadCharts(version, route, options = {}) {
+    if (!options.force && state.charts.loaded) {
+        const historyId = resolveLoadableChartsHistoryId(route);
+
+        if (hasSettledChartsDetail(historyId)) {
+            return;
+        }
+
+        await loadChartsDetail(historyId);
+        return;
+    }
+
     state.charts.loading = true;
     state.charts.error = null;
     emitChange();
@@ -1182,6 +1261,7 @@ async function loadCharts(version, route) {
         }
 
         state.charts.queries = response.data ?? [];
+        state.charts.loaded = true;
         state.charts.error = null;
     } catch (error) {
         if (version !== routeLoadVersion) {
@@ -1189,6 +1269,7 @@ async function loadCharts(version, route) {
         }
 
         state.charts.queries = [];
+        state.charts.loaded = false;
         state.charts.error = normalizeError(error);
     } finally {
         if (version === routeLoadVersion) {
@@ -1201,11 +1282,7 @@ async function loadCharts(version, route) {
         return;
     }
 
-    const requestedHistoryId = Number(route.params?.historyId ?? null);
-    const canLoadRequestedHistory =
-        Number.isInteger(requestedHistoryId) && state.charts.queries.some(item => item.id === requestedHistoryId);
-
-    await loadChartsDetail(canLoadRequestedHistory ? requestedHistoryId : null);
+    await loadChartsDetail(resolveLoadableChartsHistoryId(route));
 }
 
 async function loadOverview(version) {
@@ -1280,7 +1357,7 @@ async function resolvePendingDataBrowserRow(version) {
 
 async function loadDataTable(version) {
     const tableName = state.dataBrowser.selectedTable;
-    const pageSize = normalizeDataPageSize(state.dataBrowser.pageSize, 50);
+    const pageSize = normalizeDataPageSize(state.dataBrowser.pageSize, DEFAULT_DATA_PAGE_SIZE);
     const page = Math.max(1, Number(state.dataBrowser.page) || 1);
     const sortColumn = state.dataBrowser.sortColumn;
     const sortDirection = normalizeSortDirection(state.dataBrowser.sortDirection);
@@ -1799,7 +1876,7 @@ function invalidateDatabaseCaches() {
     state.mediaTagging.tagFormValues = {};
 }
 
-async function loadRouteData(route) {
+async function loadRouteData(route, options = {}) {
     clearRouteSlices();
 
     if (requiresActiveDatabase(route.name) && !state.connections.active) {
@@ -1808,7 +1885,7 @@ async function loadRouteData(route) {
         return;
     }
 
-    if (isMediaTaggingRouteName(route.name) && hasLoadedMediaTaggingForActiveConnection()) {
+    if (!options.force && isMediaTaggingRouteName(route.name) && hasLoadedMediaTaggingForActiveConnection()) {
         return;
     }
 
@@ -1827,7 +1904,7 @@ async function loadRouteData(route) {
             await loadData(version, route);
             return;
         case 'charts':
-            await loadCharts(version, route);
+            await loadCharts(version, route, options);
             return;
         case 'editor':
         case 'editorResults':
@@ -2201,6 +2278,21 @@ export function setChartsHeightPreset(preset) {
     emitChange();
 }
 
+export function setChartsHistoryTab(tab) {
+    const nextTab = normalizeChartsHistoryTab(
+        String(tab ?? '')
+            .trim()
+            .toLowerCase(),
+    );
+
+    if (state.charts.historyTab === nextTab) {
+        return;
+    }
+
+    state.charts.historyTab = nextTab;
+    emitChange();
+}
+
 export function updateCurrentQueryChartDraftField(field, value) {
     if (state.modal?.kind !== 'chart-editor' || !state.modal.draft) {
         return;
@@ -2625,16 +2717,25 @@ export async function runQueryHistoryItem(historyId) {
     return executeCurrentQuery();
 }
 
-export async function toggleQueryHistorySavedState(historyId, nextValue) {
+export async function toggleQueryHistorySavedState(historyId, nextValue, options = {}) {
     try {
         const response = await api.toggleQueryHistorySaved(historyId, nextValue);
         syncQueryHistoryItem(response.data);
-        pushToast(response.message || 'Query save state updated.', 'muted');
-        await refreshQueryHistoryState();
+        if (options.toast !== false) {
+            pushToast(response.message || 'Query save state updated.', 'muted');
+        }
+        if (options.notify !== false) {
+            emitChange();
+        }
+        if (options.refresh !== false) {
+            await refreshQueryHistoryState();
+        }
         return true;
     } catch (error) {
         state.editor.historyDetailError = normalizeError(error);
-        emitChange();
+        if (options.notify !== false) {
+            emitChange();
+        }
         return false;
     }
 }
@@ -3340,6 +3441,7 @@ export async function setDataPageSize(pageSize) {
     }
 
     state.dataBrowser.pageSize = normalizedPageSize;
+    storeDataPageSize(normalizedPageSize);
     state.dataBrowser.page = 1;
     clearDataBrowserRowSelectionState();
     state.dataBrowser.saveError = null;
@@ -3735,7 +3837,7 @@ export function sortEditorResultsByColumn(columnName) {
 }
 
 export async function refreshCurrentRoute() {
-    await loadRouteData(state.route);
+    await loadRouteData(state.route, { force: true });
 }
 
 export function showToast(message, tone = 'muted') {

package/frontend/js/views/charts.js

@@ -20,10 +20,12 @@ function renderMissingDatabase() {
 }
 
 function renderChartsList(state) {
-    const queries = state.charts.queries ?? [];
+    const activeTab = ['recent', 'saved'].includes(state.charts.historyTab) ? state.charts.historyTab : 'recent';
+    const allQueries = state.charts.queries ?? [];
+    const queries = activeTab === 'saved' ? allQueries.filter(item => item.isSaved) : allQueries;
     const selectedHistoryId = Number(state.charts.selectedHistoryId);
 
-    if (state.charts.loading && !queries.length) {
+    if (state.charts.loading && !allQueries.length) {
         return `
       <div class="flex h-full items-center justify-center px-6 text-center text-on-surface-variant/45">
         <div>
@@ -34,7 +36,7 @@ function renderChartsList(state) {
     `;
     }
 
-    if (state.charts.error && !queries.length) {
+    if (state.charts.error && !allQueries.length) {
         return `
       <div class="p-5">
         <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
@@ -45,15 +47,23 @@ function renderChartsList(state) {
     }
 
     if (!queries.length) {
+        const isSavedTab = activeTab === 'saved';
+
         return `
       <div class="flex h-full items-center justify-center px-6 text-center">
         <div>
-          <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">query_stats</span>
+          <span class="material-symbols-outlined mb-3 text-4xl text-on-surface-variant/25">${
+              isSavedTab ? 'bookmark' : 'query_stats'
+          }</span>
           <p class="font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-            No Chartable Queries
+            ${isSavedTab ? 'No Saved Charts Queries' : 'No Chartable Queries'}
           </p>
           <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/60">
-            Run SELECT queries in the SQL Editor first. They will appear here automatically.
+            ${
+                isSavedTab
+                    ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
+                    : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
+            }
           </p>
         </div>
       </div>
@@ -66,36 +76,67 @@ function renderChartsList(state) {
         ${queries
             .map(
                 item => `
-              <button
-                class="w-full border px-4 py-3 text-left transition-colors ${
-                    selectedHistoryId === item.id
+              <article
+                class="group w-full border transition-colors ${
+                    selectedHistoryId === Number(item.id)
                         ? 'border-primary-container/30 bg-surface-container-high'
                         : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
                 }"
-                data-action="navigate"
-                data-to="/charts/${encodeURIComponent(item.id)}"
-                type="button"
+                data-charts-history-item
               >
-                <div class="flex items-start justify-between gap-3">
-                  <div class="min-w-0 flex-1 truncate font-mono text-xs ${
-                      selectedHistoryId === item.id ? 'text-primary-container' : 'text-on-surface'
-                  }">
-                    ${escapeHtml(item.displayTitle)}
+                <button
+                  class="w-full px-4 py-3 text-left transition-colors group-hover:bg-surface-container-high"
+                  data-action="navigate"
+                  data-history-id="${escapeHtml(item.id)}"
+                  data-to="/charts/${encodeURIComponent(item.id)}"
+                  type="button"
+                >
+                  <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0 flex-1 truncate font-mono text-xs ${
+                        selectedHistoryId === Number(item.id) ? 'text-primary-container' : 'text-on-surface'
+                    }" data-charts-history-title>
+                      ${escapeHtml(item.displayTitle)}
+                    </div>
+                    <div class="flex shrink-0 flex-wrap justify-end gap-1">
+                      <span class="inline-flex" data-charts-saved-badge ${item.isSaved ? '' : 'hidden'}>
+                        ${renderStatusBadge('saved', 'primary')}
+                      </span>
+                      ${
+                          item.chartTypes?.length
+                              ? item.chartTypes
+                                    .map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary'))
+                                    .join('')
+                              : renderStatusBadge('None', 'muted')
+                      }
+                    </div>
                   </div>
-                  <div class="flex shrink-0 flex-wrap justify-end gap-1">
-                    ${
-                        item.chartTypes?.length
-                            ? item.chartTypes
-                                  .map(chartType => renderStatusBadge(getQueryChartTypeLabel(chartType), 'primary'))
-                                  .join('')
-                            : renderStatusBadge('None', 'muted')
-                    }
+                  <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                    ${escapeHtml(item.previewSql)}
                   </div>
+                </button>
+                <div class="flex items-center justify-end border-t border-outline-variant/10 px-3 py-2 transition-colors group-hover:bg-surface-container-high">
+                  <button
+                    aria-label="Open chart query"
+                    class="min-h-[var(--control-height)] flex-1 self-stretch"
+                    data-action="navigate"
+                    data-history-id="${escapeHtml(item.id)}"
+                    data-to="/charts/${encodeURIComponent(item.id)}"
+                    type="button"
+                  ></button>
+                  <button
+                    class="query-history-icon-button ${item.isSaved ? 'is-active' : ''}"
+                    data-action="toggle-charts-query-history-saved"
+                    data-history-id="${escapeHtml(item.id)}"
+                    data-next-value="${item.isSaved ? 'false' : 'true'}"
+                    title="${item.isSaved ? 'Remove from saved' : 'Save query'}"
+                    type="button"
+                  >
+                    <span class="material-symbols-outlined text-[18px]">
+                      ${item.isSaved ? 'bookmark' : 'bookmark_add'}
+                    </span>
+                  </button>
                 </div>
-                <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
-                  ${escapeHtml(item.previewSql)}
-                </div>
-              </button>
+              </article>
             `,
             )
             .join('')}
@@ -104,6 +145,37 @@ function renderChartsList(state) {
   `;
 }
 
+function renderChartsHistoryTabs(state) {
+    const activeTab = ['recent', 'saved'].includes(state.charts.historyTab) ? state.charts.historyTab : 'recent';
+    const savedCount = (state.charts.queries ?? []).filter(item => item.isSaved).length;
+    const tabs = [
+        { id: 'recent', label: 'Recent', count: state.charts.queries?.length ?? 0 },
+        { id: 'saved', label: 'Saved', count: savedCount },
+    ];
+
+    return `
+    <div class="mt-4 flex items-center gap-2">
+      ${tabs
+          .map(
+              tab => `
+                <button
+                  class="query-history-tab ${activeTab === tab.id ? 'is-active' : ''}"
+                  data-action="set-charts-history-tab"
+                  data-tab="${escapeHtml(tab.id)}"
+                  type="button"
+                >
+                  ${escapeHtml(tab.label)}
+                </button>
+              `,
+          )
+          .join('')}
+      <span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">
+        <span data-charts-history-count>${escapeHtml(String(tabs.find(tab => tab.id === activeTab)?.count ?? 0))}</span>
+      </span>
+    </div>
+  `;
+}
+
 function renderEmptyChartDetail() {
     return `
     <div class="flex flex-1 items-center justify-center px-8 py-10 text-center">
@@ -347,7 +419,7 @@ function renderChartCard(chart, state, analysis) {
   `;
 }
 
-function renderChartsDetail(state) {
+export function renderChartsDetail(state) {
     const detail = state.charts.detail;
     const selectedHistoryId = state.charts.selectedHistoryId;
     const historyVisible = state.editor.historyPanelVisible !== false;
@@ -485,6 +557,7 @@ export function renderChartsView(state) {
                       <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
                         Charts
                       </h2>
+                      ${renderChartsHistoryTabs(state)}
                     </div>
                     ${renderChartsList(state)}
                   </aside>

package/frontend/js/views/data.js

@@ -449,7 +449,36 @@ export function renderDataRowEditorPanel(state) {
             (foreignKey.mappings ?? []).map(mapping => String(mapping.from ?? '').trim()).filter(Boolean),
         ),
     );
-    const getColumnBadges = column => (foreignKeyColumnNames.has(column.name) ? ['FK'] : []);
+    const getColumnTypeBadge = column => String(column.declaredType || column.affinity || 'BLOB').trim().toUpperCase();
+    const getColumnNumberInputMeta = column => {
+        const affinity = String(column.affinity ?? '').toUpperCase();
+
+        if (affinity === 'INTEGER') {
+            return { inputType: 'number', numberStep: '1' };
+        }
+
+        if (affinity === 'NUMERIC') {
+            return { inputType: 'number', numberStep: 'any' };
+        }
+
+        return {};
+    };
+    const getColumnBadges = column => {
+        const badges = [{ label: getColumnTypeBadge(column), tone: 'type' }];
+
+        if (column.primaryKeyPosition > 0) {
+            badges.push({
+                label: column.primaryKeyPosition > 1 ? `PK ${column.primaryKeyPosition}` : 'PK',
+                tone: 'primary-key',
+            });
+        }
+
+        if (foreignKeyColumnNames.has(column.name)) {
+            badges.push({ label: 'FK', tone: 'foreign-key' });
+        }
+
+        return badges;
+    };
 
     const identityColumns = table.identityStrategy?.type === 'primaryKey' ? (table.identityStrategy.columns ?? []) : [];
     const editableColumns = (table.columnMeta ?? []).filter(column => {
@@ -502,6 +531,7 @@ export function renderDataRowEditorPanel(state) {
                 name: column.name,
                 label: column.name,
                 badges: getColumnBadges(column),
+                ...getColumnNumberInputMeta(column),
                 value: value === null || value === undefined ? '' : String(value),
             };
         }),

package/frontend/js/views/editor.js

@@ -265,6 +265,7 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
                       error: state.editor.historyError,
                       activeTab: state.editor.historyTab,
                       search: state.editor.historySearchInput,
+                      committedSearch: state.editor.historySearch,
                       total: state.editor.historyTotal,
                       hasMore: state.editor.historyHasMore,
                       activeHistoryId: state.editor.historyActiveId,

package/frontend/styles/base.css

@@ -28,6 +28,26 @@ button {
     cursor: pointer;
 }
 
+button:disabled,
+button[aria-disabled='true'],
+input:disabled,
+select:disabled,
+textarea:disabled {
+    cursor: not-allowed;
+}
+
+:where(a, button, input, select, textarea, [tabindex]:not([tabindex='-1'])):focus-visible {
+    outline: 2px solid var(--color-primary-container);
+    outline-offset: 2px;
+}
+
+.control-shell:focus-within,
+.standard-checkbox:focus-within,
+.sql-highlight-shell:focus-within {
+    border-color: var(--primary-alpha-35);
+    box-shadow: var(--focus-ring-inset);
+}
+
 .control-button {
     align-items: center;
     box-sizing: border-box;
@@ -52,22 +72,22 @@ button {
 
 input.control-input--ghost {
     appearance: none;
-    background: transparent !important;
-    background-color: transparent !important;
-    background-image: none !important;
-    border: 0 !important;
-    border-color: transparent !important;
-    box-shadow: none !important;
+    background: transparent;
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+    border-color: transparent;
+    box-shadow: none;
     -webkit-appearance: none;
     padding: 0;
 }
 
 input.control-input--ghost:focus,
 input.control-input--ghost:not(:focus) {
-    background: transparent !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    box-shadow: none !important;
+    background: transparent;
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
     outline: none;
 }
 
@@ -105,6 +125,7 @@ img {
 }
 
 [hidden] {
+    /* Hidden must beat utility display classes generated by Tailwind CDN. */
     display: none !important;
 }
 
@@ -118,9 +139,6 @@ img {
 
 .font-mono {
     font-family: var(--font-family-mono);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
 }
 
 .material-symbols-outlined {
@@ -218,12 +236,14 @@ img {
     width: 100%;
     word-break: normal;
     overflow-wrap: anywhere;
+    font-variant-ligatures: none;
 }
 
 .query-editor-highlight {
     color: var(--color-on-surface);
     overflow: visible;
     pointer-events: none;
+    user-select: none;
 }
 
 .query-editor-input {
@@ -236,6 +256,14 @@ img {
     overflow: auto;
 }
 
+.query-editor-input:focus-visible {
+    outline: none;
+}
+
+.query-editor-layer:focus-within {
+    box-shadow: inset 0 0 0 1px var(--primary-alpha-30);
+}
+
 .query-editor-gutter-track {
     min-height: 100%;
     will-change: transform;
@@ -260,3 +288,19 @@ img {
         border-color: var(--color-primary-container);
     }
 }
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.001ms;
+        animation-iteration-count: 1;
+        scroll-behavior: auto;
+        transition-duration: 0.001ms;
+    }
+
+    .cursor-blink {
+        animation: none;
+        border-right-color: var(--color-primary-container);
+    }
+}