@walkthru-earth/objex 1.4.0 → 1.5.0

package/dist/components/viewers/MarkdownViewer.svelte

@@ -17,6 +17,8 @@ import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { detectRTL, processDirection, renderMarkdown } from '../../utils/markdown';
 import { getQueryEngine } from '../../query/index.js';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let mermaidInitialized = false;
 const CAIRO_FONT = '"Cairo", sans-serif';
@@ -204,24 +206,22 @@ async function saveMarkdown(markdown: string) {
 		editMode = false;
 		await loadMarkdown();
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	}
 }
 </script>
 
 <div class="flex h-full flex-col">
-	<div
-		class="flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 sm:gap-2 sm:px-4 dark:border-zinc-800"
-	>
-		<span class="truncate max-w-[120px] text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">{tab.name}</span>
-		<Badge variant="secondary">{t('markdown.badge')}</Badge>
-		{#if hasSqlBlocks}
-			<Badge variant="outline" class="border-blue-200 text-blue-600 dark:border-blue-800 dark:text-blue-300">
-				{t('markdown.evidence')}
-			</Badge>
-		{/if}
-
-		<div class="ms-auto">
+	<ViewerHeader {tab}>
+		{#snippet badge()}
+			<Badge variant="secondary">{t('markdown.badge')}</Badge>
+			{#if hasSqlBlocks}
+				<Badge variant="outline" class="border-blue-200 text-blue-600 dark:border-blue-800 dark:text-blue-300">
+					{t('markdown.evidence')}
+				</Badge>
+			{/if}
+		{/snippet}
+		{#snippet actions()}
 			<Button
 				variant="ghost"
 				size="sm"
@@ -230,18 +230,14 @@ async function saveMarkdown(markdown: string) {
 			>
 				{editMode ? t('markdown.view') : t('markdown.edit')}
 			</Button>
-		</div>
-	</div>
+		{/snippet}
+	</ViewerHeader>
 
 	<div class="flex-1 overflow-auto">
 		{#if loading}
-			<div class="flex h-full items-center justify-center">
-				<p class="text-sm text-zinc-400">Loading...</p>
-			</div>
+			<ViewerStatus kind="loading" />
 		{:else if error}
-			<div class="flex h-full items-center justify-center">
-				<p class="text-sm text-red-400">{error}</p>
-			</div>
+			<ViewerStatus kind="error" message={error} />
 		{:else if editMode}
 			{#await import('../editor/MilkdownEditor.svelte') then MilkdownEditor}
 				<MilkdownEditor.default

package/dist/components/viewers/MediaViewer.svelte

@@ -6,6 +6,8 @@ import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { buildHttpsUrl, canStreamDirectly } from '../../utils/signed-url.js';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -72,22 +74,19 @@ onDestroy(cleanup);
 </script>
 
 <div class="flex h-full flex-col">
-	<div class="flex items-center gap-2 border-b border-zinc-200 px-4 py-2 dark:border-zinc-800">
-		<span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">{tab.name}</span>
-		<span
-			class="rounded bg-zinc-100 px-1.5 py-0.5 text-xs text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
-		>
-			{mediaType}
-		</span>
-	</div>
+	<ViewerHeader {tab}>
+		{#snippet badge()}
+			<span class="rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground">
+				{mediaType}
+			</span>
+		{/snippet}
+	</ViewerHeader>
 
 	<div class="flex flex-1 items-center justify-center bg-zinc-950 p-4">
 		{#if loading}
-			<p class="text-sm text-zinc-400">Loading {mediaType}...</p>
+			<ViewerStatus kind="loading" />
 		{:else if error}
-			<div class="rounded-lg border border-red-300 bg-red-50 px-6 py-4 text-center dark:border-red-800 dark:bg-red-950">
-				<p class="text-sm text-red-600 dark:text-red-400">{error}</p>
-			</div>
+			<ViewerStatus kind="error" message={error} />
 		{:else if mediaSrc}
 			{#if mediaType === 'video'}
 				<video

package/dist/components/viewers/ModelViewer.svelte

@@ -7,7 +7,6 @@ import { onDestroy } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
 import { Button } from '../ui/button/index.js';
 import * as DropdownMenu from '../ui/dropdown-menu/index.js';
-import { Separator } from '../ui/separator/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
@@ -18,6 +17,8 @@ import {
 	loadModel,
 	type ModelScene
 } from '../../utils/model3d';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -101,19 +102,15 @@ onDestroy(cleanup);
 </script>
 
 <div class="flex h-full flex-col">
-	<div
-		class="flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 sm:gap-2 sm:px-4 dark:border-zinc-800"
-	>
-		<span class="truncate max-w-[120px] text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">{tab.name}</span>
-		<Badge variant="secondary">{t('model.badge')}</Badge>
-
-		{#if meshCount > 0}
-			<span class="hidden text-xs text-zinc-400 sm:inline">
-				{meshCount} {t('model.meshes')} &middot; {vertexCount.toLocaleString()} {t('model.vertices')}
-			</span>
-		{/if}
+	<ViewerHeader {tab}>
+		{#snippet badge()}<Badge variant="secondary">{t('model.badge')}</Badge>{/snippet}
+		{#snippet actions()}
+			{#if meshCount > 0}
+				<span class="hidden text-xs text-muted-foreground sm:inline">
+					{meshCount} {t('model.meshes')} &middot; {vertexCount.toLocaleString()} {t('model.vertices')}
+				</span>
+			{/if}
 
-		<div class="ms-auto flex items-center gap-1">
 			<!-- Desktop controls -->
 			<div class="hidden items-center gap-1 sm:flex">
 				<Button
@@ -135,7 +132,7 @@ onDestroy(cleanup);
 			<!-- Mobile overflow menu -->
 			<div class="flex sm:hidden">
 				<DropdownMenu.Root>
-					<DropdownMenu.Trigger class="rounded p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+					<DropdownMenu.Trigger class="rounded p-1 text-muted-foreground hover:bg-muted">
 						<EllipsisVerticalIcon class="size-4" />
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content align="end" class="w-40">
@@ -147,18 +144,18 @@ onDestroy(cleanup);
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
 			</div>
-		</div>
-	</div>
+		{/snippet}
+	</ViewerHeader>
 
 	<div class="relative flex-1 overflow-hidden">
 		{#if loading}
-			<div class="absolute inset-0 z-10 flex items-center justify-center bg-zinc-900/80">
-				<p class="text-sm text-zinc-400">{t('model.loading')}</p>
+			<div class="absolute inset-0 z-10 bg-zinc-900/80">
+				<ViewerStatus kind="loading" message={t('model.loading')} />
 			</div>
 		{/if}
 		{#if error}
-			<div class="absolute inset-0 z-10 flex items-center justify-center bg-zinc-900/80">
-				<p class="text-sm text-red-400">{error}</p>
+			<div class="absolute inset-0 z-10 bg-zinc-900/80">
+				<ViewerStatus kind="error" message={error} />
 			</div>
 		{/if}
 		<canvas bind:this={canvasEl} class="h-full w-full"></canvas>

package/dist/components/viewers/MultiCogViewer.svelte

@@ -10,8 +10,11 @@ import {
 	compositeFromUrl,
 	compositeToUrl,
 	extractCogAssets,
+	handleLoadError,
+	isAbortError,
 	isSingleAssetComposite,
 	isStacItem,
+	LruCache,
 	PRESETS,
 	pickNaturalColorComposite,
 	presetMatchesComposite,
@@ -91,7 +94,7 @@ let abortController = new AbortController();
 let mapRef: maplibregl.Map | null = null;
 let overlayRef: MapboxOverlay | null = null;
 let hasFittedOnce = false;
-let presignCache = new Map<string, Promise<string>>();
+const presignCache = new LruCache<string, Promise<string>>({ max: 64 });
 
 // Pixel inspection: same UX as CogViewer / StacMosaicViewer. Click → read one
 // pixel from each active composite channel's GeoTIFF and show channel/asset/value.
@@ -114,7 +117,7 @@ let detachInspector: (() => void) | null = null;
 // custom getTileData/renderTile pair that honors per-channel bandIndex picks.
 // Without this, the single-asset multi-band path (e.g. Sentinel-2 `visual`,
 // NAIP `image`) silently falls back to bands 0/1/2 regardless of the picker.
-let geotiffCache = new Map<string, Promise<GeoTIFF>>();
+const geotiffCache = new LruCache<string, Promise<GeoTIFF>>({ max: 64 });
 let loadGen = 0;
 let layerVersion = 0;
 let rebuildTimer: number | null = null;
@@ -160,8 +163,8 @@ function resetViewer(): void {
 	overlayRef = null;
 	assets = [];
 	composite = null;
-	presignCache = new Map();
-	geotiffCache = new Map();
+	presignCache.clear();
+	geotiffCache.clear();
 	loading = true;
 	error = null;
 	bounds = undefined;
@@ -395,9 +398,9 @@ async function loadItem(map: maplibregl.Map): Promise<void> {
 						if (gen !== loadGen || signal.aborted) return;
 						if (!result.ok) smokeWarning = result.reason;
 					} catch (err) {
-						if (err instanceof DOMException && err.name === 'AbortError') return;
+						if (isAbortError(err)) return;
 						if (gen !== loadGen) return;
-						smokeWarning = err instanceof Error ? err.message : String(err);
+						smokeWarning = handleLoadError(err);
 					}
 				})();
 			}
@@ -421,8 +424,8 @@ async function loadItem(map: maplibregl.Map): Promise<void> {
 	} catch (err) {
 		if (gen !== loadGen) return;
 		if (signal.aborted) return;
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		if (isAbortError(err)) return;
+		error = handleLoadError(err);
 		loading = false;
 	}
 }

package/dist/components/viewers/NotebookViewer.svelte

@@ -16,6 +16,8 @@ import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { highlightCodeReversed } from '../../utils/shiki';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -135,23 +137,21 @@ async function copyRaw() {
 </script>
 
 <div class="flex h-full flex-col">
-	<div
-		class="flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 sm:gap-2 sm:px-4 dark:border-zinc-800"
-	>
-		<span class="truncate max-w-[120px] text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">{tab.name}</span>
-		<Badge variant="secondary">{t('notebook.badge')}</Badge>
-		{#if kernelName}
-			<Badge variant="outline" class="hidden border-orange-200 text-orange-600 sm:inline-flex dark:border-orange-800 dark:text-orange-300">
-				{kernelName}
-			</Badge>
-		{/if}
-		{#if cellCount > 0}
-			<span class="hidden text-xs text-muted-foreground sm:inline">
-				{cellCount} {t('notebook.cells')}
-			</span>
-		{/if}
-
-		<div class="ms-auto flex items-center gap-1 sm:gap-2">
+	<ViewerHeader {tab}>
+		{#snippet badge()}
+			<Badge variant="secondary">{t('notebook.badge')}</Badge>
+			{#if kernelName}
+				<Badge variant="outline" class="hidden border-orange-200 text-orange-600 sm:inline-flex dark:border-orange-800 dark:text-orange-300">
+					{kernelName}
+				</Badge>
+			{/if}
+			{#if cellCount > 0}
+				<span class="hidden text-xs text-muted-foreground sm:inline">
+					{cellCount} {t('notebook.cells')}
+				</span>
+			{/if}
+		{/snippet}
+		{#snippet actions()}
 			<!-- Desktop controls -->
 			<div class="hidden items-center gap-1 sm:flex">
 				<Button variant="ghost" size="sm" class="h-7 px-2 text-xs" onclick={toggleCode}>
@@ -165,7 +165,7 @@ async function copyRaw() {
 			<!-- Mobile overflow menu -->
 			<div class="flex sm:hidden">
 				<DropdownMenu.Root>
-					<DropdownMenu.Trigger class="rounded p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800">
+					<DropdownMenu.Trigger class="rounded p-1 text-muted-foreground hover:bg-muted">
 						<EllipsisVerticalIcon class="size-4" />
 					</DropdownMenu.Trigger>
 					<DropdownMenu.Content align="end" class="w-44">
@@ -178,18 +178,14 @@ async function copyRaw() {
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
 			</div>
-		</div>
-	</div>
+		{/snippet}
+	</ViewerHeader>
 
 	<div class="notebook-viewer flex-1 overflow-auto" dir="ltr">
 		{#if loading}
-			<div class="flex h-full items-center justify-center">
-				<p class="text-sm text-zinc-400">{t('notebook.loading')}</p>
-			</div>
+			<ViewerStatus kind="loading" message={t('notebook.loading')} />
 		{:else if error}
-			<div class="flex h-full items-center justify-center">
-				<p class="text-sm text-red-400">{error}</p>
-			</div>
+			<ViewerStatus kind="error" message={error} />
 		{/if}
 		<div bind:this={container} class="notebook-content" class:hidden={loading || !!error}></div>
 	</div>

package/dist/components/viewers/PdfViewer.svelte

@@ -17,6 +17,8 @@ import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { loadPdfDocument, loadPdfFromUrl } from '../../utils/pdf';
 import { buildHttpsUrl, canStreamDirectly } from '../../utils/signed-url.js';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 const LOAD_TIMEOUT_MS = 20_000;
 
@@ -136,7 +138,7 @@ async function renderPage(
 		await page.render({ canvasContext: ctx, viewport, canvas } as any).promise;
 	} catch (err) {
 		if (gen === renderGeneration) {
-			error = err instanceof Error ? err.message : String(err);
+			error = handleLoadError(err);
 		}
 	}
 }
@@ -174,17 +176,10 @@ onDestroy(cleanup);
 </script>
 
 <div class="flex h-full flex-col">
-  <div
-    class="flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 sm:gap-2 sm:px-4 dark:border-zinc-800"
-  >
-    <span
-      class="truncate max-w-[120px] text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300"
-      >{tab.name}</span
-    >
-    <Badge variant="secondary">{t("pdf.badge")}</Badge>
-
-    {#if totalPages > 0}
-      <div class="ms-auto flex items-center gap-1 sm:gap-2">
+  <ViewerHeader {tab}>
+    {#snippet badge()}<Badge variant="secondary">{t('pdf.badge')}</Badge>{/snippet}
+    {#snippet actions()}
+      {#if totalPages > 0}
         <!-- Pagination (always visible) -->
         <Button
           variant="ghost"
@@ -194,9 +189,9 @@ onDestroy(cleanup);
           disabled={currentPage <= 1}
         >
           <ChevronLeftIcon class="size-3.5" />
-          <span class="hidden sm:inline">{t("pdf.prev")}</span>
+          <span class="hidden sm:inline">{t('pdf.prev')}</span>
         </Button>
-        <span class="text-xs text-zinc-500 dark:text-zinc-400">
+        <span class="text-xs text-muted-foreground">
           {currentPage} / {totalPages}
         </span>
         <Button
@@ -206,7 +201,7 @@ onDestroy(cleanup);
           onclick={nextPage}
           disabled={currentPage >= totalPages}
         >
-          <span class="hidden sm:inline">{t("pdf.next")}</span>
+          <span class="hidden sm:inline">{t('pdf.next')}</span>
           <ChevronRightIcon class="size-3.5" />
         </Button>
 
@@ -218,11 +213,11 @@ onDestroy(cleanup);
             size="sm"
             class="h-7 px-1.5"
             onclick={zoomOut}
-            title={t("pdf.zoomOut")}
+            title={t('pdf.zoomOut')}
           >
             <MinusIcon class="size-3.5" />
           </Button>
-          <span class="text-xs text-zinc-500 dark:text-zinc-400">
+          <span class="text-xs text-muted-foreground">
             {Math.round(scale * 100)}%
           </span>
           <Button
@@ -230,7 +225,7 @@ onDestroy(cleanup);
             size="sm"
             class="h-7 px-1.5"
             onclick={zoomIn}
-            title={t("pdf.zoomIn")}
+            title={t('pdf.zoomIn')}
           >
             <PlusIcon class="size-3.5" />
           </Button>
@@ -240,39 +235,35 @@ onDestroy(cleanup);
         <div class="flex sm:hidden">
           <DropdownMenu.Root>
             <DropdownMenu.Trigger
-              class="rounded p-1 text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+              class="rounded p-1 text-muted-foreground hover:bg-muted"
             >
               <EllipsisVerticalIcon class="size-4" />
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="end" class="w-44">
               <DropdownMenu.Item onclick={zoomIn}>
-                {t("pdf.zoomIn")}
+                {t('pdf.zoomIn')}
               </DropdownMenu.Item>
               <DropdownMenu.Item onclick={zoomOut}>
-                {t("pdf.zoomOut")}
+                {t('pdf.zoomOut')}
               </DropdownMenu.Item>
               <DropdownMenu.Separator />
               <DropdownMenu.Item disabled>
-                {t("pdf.zoom")}: {Math.round(scale * 100)}%
+                {t('pdf.zoom')}: {Math.round(scale * 100)}%
               </DropdownMenu.Item>
             </DropdownMenu.Content>
           </DropdownMenu.Root>
         </div>
-      </div>
-    {/if}
-  </div>
+      {/if}
+    {/snippet}
+  </ViewerHeader>
 
   <div
     class="flex flex-1 items-start justify-center overflow-auto bg-zinc-200 p-4 dark:bg-zinc-800"
   >
     {#if loading}
-      <div class="flex h-full items-center justify-center">
-        <p class="text-sm text-zinc-400">{t("pdf.loading")}</p>
-      </div>
+      <ViewerStatus kind="loading" message={t('pdf.loading')} />
     {:else if error}
-      <div class="flex h-full items-center justify-center">
-        <p class="text-sm text-red-400">{error}</p>
-      </div>
+      <ViewerStatus kind="error" message={error} />
     {:else}
       <canvas bind:this={canvasEl} class="shadow-lg"></canvas>
     {/if}

package/dist/components/viewers/PmtilesViewer.svelte

@@ -2,6 +2,7 @@
 import ArchiveIcon from '@lucide/svelte/icons/archive';
 import GridIcon from '@lucide/svelte/icons/grid-3x3';
 import MapIcon from '@lucide/svelte/icons/map';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 import type { PMTiles } from 'pmtiles';
 import { onDestroy, untrack } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
@@ -75,7 +76,7 @@ async function load() {
 		pmtilesInstance = result.pmtiles;
 		metadata = result.metadata;
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	} finally {
 		loading = false;
 	}
@@ -88,18 +89,18 @@ const fileName = $derived(tab.path.split('/').pop() ?? 'pmtiles');
 	<!-- Toolbar -->
 	{#if !loading && !error && metadata}
 		<div
-			class="flex items-center gap-1 border-b border-zinc-200 px-2 py-1.5 sm:gap-2 sm:px-4 dark:border-zinc-800"
+			class="flex items-center gap-1 border-b border-border px-2 py-1.5 sm:gap-2 sm:px-4"
 		>
 			<!-- File info -->
 			<span
-				class="max-w-[100px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300"
+				class="max-w-[100px] truncate text-sm font-medium text-foreground sm:max-w-none"
 			>
 				{fileName}
 			</span>
 			<Badge variant="outline" class="hidden text-[10px] sm:inline-flex">
 				{metadata.formatLabel}
 			</Badge>
-			<span class="hidden text-xs text-zinc-400 sm:inline dark:text-zinc-500">
+			<span class="hidden text-xs text-muted-foreground sm:inline">
 				z{metadata.minZoom}-{metadata.maxZoom} · {metadata.numAddressedTiles.toLocaleString()} tiles
 			</span>
 
@@ -109,7 +110,7 @@ const fileName = $derived(tab.path.split('/').pop() ?? 'pmtiles');
 					variant={viewMode === 'map' ? 'default' : 'outline'}
 					size="sm"
 					class="h-7 gap-1 px-2 text-xs {viewMode !== 'map'
-						? 'border-zinc-300 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-900'
+						? 'border-border text-muted-foreground hover:bg-muted'
 						: ''}"
 					onclick={() => setViewMode('map')}
 				>
@@ -121,7 +122,7 @@ const fileName = $derived(tab.path.split('/').pop() ?? 'pmtiles');
 					variant={viewMode === 'archive' ? 'default' : 'outline'}
 					size="sm"
 					class="h-7 gap-1 px-2 text-xs {viewMode !== 'archive'
-						? 'border-zinc-300 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-900'
+						? 'border-border text-muted-foreground hover:bg-muted'
 						: ''}"
 					onclick={() => setViewMode('archive')}
 				>
@@ -133,7 +134,7 @@ const fileName = $derived(tab.path.split('/').pop() ?? 'pmtiles');
 					variant={viewMode === 'inspector' ? 'default' : 'outline'}
 					size="sm"
 					class="h-7 gap-1 px-2 text-xs {viewMode !== 'inspector'
-						? 'border-zinc-300 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-900'
+						? 'border-border text-muted-foreground hover:bg-muted'
 						: ''}"
 					onclick={() => setViewMode('inspector')}
 				>
@@ -148,11 +149,11 @@ const fileName = $derived(tab.path.split('/').pop() ?? 'pmtiles');
 	<div class="min-h-0 flex-1 overflow-hidden">
 		{#if loading}
 			<div class="flex h-full items-center justify-center">
-				<p class="text-sm text-zinc-400">{t('map.loadingPmtiles')}</p>
+				<p class="text-sm text-muted-foreground">{t('map.loadingPmtiles')}</p>
 			</div>
 		{:else if error}
 			<div class="flex h-full items-center justify-center">
-				<p class="text-sm text-red-400">{error}</p>
+				<p class="text-sm text-destructive">{error}</p>
 			</div>
 		{:else if metadata && pmtilesInstance}
 			{#if viewMode === 'map'}

package/dist/components/viewers/QueryHistoryPanel.svelte

@@ -50,22 +50,22 @@ function truncateSql(sql: string, maxLen = 120): string {
 {#if visible}
 	<!-- Mobile: absolute overlay; Desktop: flex sidebar -->
 	<div
-		class="absolute inset-y-0 end-0 z-10 flex w-72 flex-col overflow-hidden border-s border-zinc-200 bg-zinc-50 sm:relative sm:z-auto sm:shrink-0 dark:border-zinc-800 dark:bg-zinc-900"
+		class="absolute inset-y-0 end-0 z-10 flex w-72 flex-col overflow-hidden border-s border-border bg-muted sm:relative sm:z-auto sm:shrink-0"
 	>
 		<!-- Header -->
 		<div
-			class="flex items-center justify-between border-b border-zinc-200 px-3 py-2 dark:border-zinc-800"
+			class="flex items-center justify-between border-b border-border px-3 py-2"
 		>
 			<div class="flex items-center gap-1.5">
-				<ClockIcon class="size-3.5 text-zinc-500" />
-				<h3 class="text-xs font-medium text-zinc-500 dark:text-zinc-400">
+				<ClockIcon class="size-3.5 text-muted-foreground" />
+				<h3 class="text-xs font-medium text-muted-foreground">
 					{t('queryHistory.title')}
 				</h3>
 			</div>
 			<div class="flex items-center gap-2">
 				{#if queryHistory.entries.length > 0}
 					<button
-						class="text-[10px] text-zinc-400 hover:text-red-500 dark:hover:text-red-400"
+						class="text-[10px] text-muted-foreground hover:text-destructive"
 						onclick={() => queryHistory.clear()}
 					>
 						{t('queryHistory.clearAll')}
@@ -73,7 +73,7 @@ function truncateSql(sql: string, maxLen = 120): string {
 				{/if}
 				{#if onClose}
 					<button
-						class="rounded p-0.5 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 sm:hidden dark:hover:bg-zinc-700 dark:hover:text-zinc-300"
+						class="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground sm:hidden"
 						onclick={onClose}
 					>
 						<XIcon class="size-3.5" />
@@ -83,20 +83,20 @@ function truncateSql(sql: string, maxLen = 120): string {
 		</div>
 
 		<!-- Search -->
-		<div class="border-b border-zinc-200 px-3 py-1.5 dark:border-zinc-800">
+		<div class="border-b border-border px-3 py-1.5">
 			<div
-				class="flex items-center gap-1.5 rounded border border-zinc-200 bg-white px-2 py-1 dark:border-zinc-700 dark:bg-zinc-800"
+				class="flex items-center gap-1.5 rounded border border-border bg-background px-2 py-1"
 			>
-				<SearchIcon class="size-3 shrink-0 text-zinc-400" />
+				<SearchIcon class="size-3 shrink-0 text-muted-foreground" />
 				<input
 					type="text"
-					class="w-full bg-transparent text-xs outline-none placeholder:text-zinc-400"
+					class="w-full bg-transparent text-xs outline-none placeholder:text-muted-foreground"
 					placeholder={t('queryHistory.searchPlaceholder')}
 					bind:value={searchQuery}
 				/>
 				{#if searchQuery}
 					<button
-						class="shrink-0 text-zinc-400 hover:text-zinc-600"
+						class="shrink-0 text-muted-foreground hover:text-foreground"
 						onclick={() => {
 							searchQuery = '';
 						}}
@@ -110,14 +110,14 @@ function truncateSql(sql: string, maxLen = 120): string {
 		<!-- Entries -->
 		<ScrollArea class="flex-1">
 			{#if filteredEntries.length === 0}
-				<div class="px-3 py-6 text-center text-xs text-zinc-400">
+				<div class="px-3 py-6 text-center text-xs text-muted-foreground">
 					{searchQuery ? 'No matching queries' : 'No query history yet'}
 				</div>
 			{:else}
-				<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
+				<div class="divide-y divide-border">
 					{#each filteredEntries as entry (entry.id)}
 						<div
-							class="group flex w-full cursor-pointer flex-col gap-0.5 px-3 py-2 text-start hover:bg-zinc-100 dark:hover:bg-zinc-800"
+							class="group flex w-full cursor-pointer flex-col gap-0.5 px-3 py-2 text-start hover:bg-accent"
 							role="button"
 							tabindex="0"
 							onclick={() => onSelect?.(entry.sql)}
@@ -126,18 +126,18 @@ function truncateSql(sql: string, maxLen = 120): string {
 							}}
 						>
 							<div
-								class="font-mono text-[11px] leading-snug text-zinc-600 dark:text-zinc-300"
+								class="font-mono text-[11px] leading-snug text-foreground"
 							>
 								{truncateSql(entry.sql)}
 							</div>
-							<div class="flex items-center gap-2 text-[10px] text-zinc-400">
+							<div class="flex items-center gap-2 text-[10px] text-muted-foreground">
 								<span>{formatTime(entry.timestamp)}</span>
 								<span>{entry.durationMs}ms</span>
 								{#if entry.rowCount > 0}
 									<span>{entry.rowCount.toLocaleString()} rows</span>
 								{/if}
 								{#if entry.error}
-									<span class="text-red-400">error</span>
+									<span class="text-destructive">error</span>
 								{/if}
 								<button
 									class="ms-auto opacity-0 group-hover:opacity-100"
@@ -147,7 +147,7 @@ function truncateSql(sql: string, maxLen = 120): string {
 									}}
 									title="Remove"
 								>
-									<TrashIcon class="size-3 text-zinc-400 hover:text-red-500" />
+									<TrashIcon class="size-3 text-muted-foreground hover:text-destructive" />
 								</button>
 							</div>
 						</div>