@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/viewers/MultiCogViewer.svelte.d.ts

@@ -1,5 +1,5 @@
+import { type StacRoutableKind } from '@walkthru-earth/objex-utils';
 import type { Tab } from '../../types.js';
-import { type StacRoutableKind } from '../../utils/stac.js';
 type $$ComponentProps = {
     tab: Tab;
     classified?: StacRoutableKind;

package/dist/components/viewers/NotebookViewer.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
 import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+import {
+	copyToClipboard,
+	handleLoadError,
+	renderNotebook,
+	wireCodeCopyButtons
+} from '@walkthru-earth/objex-utils';
 import type { BundledLanguage } from 'shiki';
 import { onDestroy, tick } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
@@ -9,10 +15,9 @@ import { t } from '../../i18n/index.svelte.js';
 import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
-import { copyToClipboard, wireCodeCopyButtons } from '../../utils/clipboard.js';
-import { handleLoadError } from '../../utils/error.js';
-import { renderNotebook } from '../../utils/notebook';
 import { highlightCodeReversed } from '../../utils/shiki';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -132,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}>
@@ -162,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">
@@ -175,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

@@ -4,6 +4,7 @@ import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
 import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 import type { PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdfjs-dist';
 import { onDestroy, untrack } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
@@ -14,9 +15,10 @@ import { t } from '../../i18n/index.svelte.js';
 import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
-import { handleLoadError } from '../../utils/error.js';
 import { loadPdfDocument, loadPdfFromUrl } from '../../utils/pdf';
-import { buildHttpsUrl, canStreamDirectly } from '../../utils/url.js';
+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';
@@ -11,8 +12,8 @@ import { t } from '../../i18n/index.svelte.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { loadPmtiles, type PmtilesMetadata } from '../../utils/pmtiles';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
-import { getUrlView, updateUrlView } from '../../utils/url-state.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
+import { pickViewMode, updateUrlView } from '../../utils/url-state.js';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -25,10 +26,7 @@ let pmtilesInstance = $state<PMTiles | null>(null);
 let pmtilesUrl = $state('');
 
 // Read initial view from URL hash
-const urlView = getUrlView();
-let viewMode = $state<ViewMode>(
-	urlView === 'archive' ? 'archive' : urlView === 'inspector' ? 'inspector' : 'map'
-);
+let viewMode = $state<ViewMode>(pickViewMode<ViewMode>(['map', 'archive', 'inspector'], 'map'));
 
 // Tile inspector initial coordinates (set when navigating from archive)
 let inspectorZ = $state<number | undefined>();
@@ -78,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;
 	}
@@ -91,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>
 
@@ -112,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')}
 				>
@@ -124,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')}
 				>
@@ -136,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')}
 				>
@@ -151,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>

package/dist/components/viewers/RawViewer.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
+import {
+	formatFileSize,
+	generateHexDump,
+	type HexRow,
+	handleLoadError
+} from '@walkthru-earth/objex-utils';
 import { onDestroy } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import { getAdapter } from '../../storage/index.js';
 import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
-import { handleLoadError } from '../../utils/error.js';
-import { formatFileSize } from '../../utils/format';
-import { generateHexDump, type HexRow } from '../../utils/hex';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -66,30 +71,31 @@ async function loadHexDump() {
 </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>
-		{#if tab.extension}
-			<Badge variant="secondary">{tab.extension}</Badge>
-		{/if}
-		{#if !loading && fileSize > 0}
-			<span class="hidden text-xs text-zinc-400 sm:inline dark:text-zinc-500">
-				{formatFileSize(fileSize)}
-			</span>
-			{#if truncated}
-				<span class="hidden text-xs text-amber-500 sm:inline">
-					({t('raw.showingFirst').replace('{size}', formatFileSize(MAX_BYTES))})
+	<ViewerHeader {tab}>
+		{#snippet badge()}
+			{#if tab.extension}
+				<Badge variant="secondary">{tab.extension}</Badge>
+			{/if}
+		{/snippet}
+		{#snippet actions()}
+			{#if !loading && fileSize > 0}
+				<span class="hidden text-xs text-muted-foreground sm:inline">
+					{formatFileSize(fileSize)}
 				</span>
+				{#if truncated}
+					<span class="hidden text-xs text-amber-500 sm:inline">
+						({t('raw.showingFirst').replace('{size}', formatFileSize(MAX_BYTES))})
+					</span>
+				{/if}
 			{/if}
-		{/if}
-	</div>
+		{/snippet}
+	</ViewerHeader>
 
 	<div class="flex-1 overflow-auto bg-zinc-950 p-4 font-mono text-xs">
 		{#if loading}
-			<p class="text-zinc-400">{t('raw.loading')}</p>
+			<ViewerStatus kind="loading" message={t('raw.loading')} />
 		{:else if error}
-			<p class="text-red-400">{error}</p>
+			<ViewerStatus kind="error" message={error} />
 		{:else}
 			<table class="w-full border-collapse">
 				<thead>

package/dist/components/viewers/StacMapViewer.svelte

@@ -1,23 +1,16 @@
 <script lang="ts">
 import type { Tab } from '../../types';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { resolveSignedTabUrl } from '../../utils/signed-url-effect.js';
 
 let { tab, variant = 'stac-map' }: { tab: Tab; variant?: 'stac-map' | 'stac-browser' } = $props();
 
 let fileUrl = $state('');
 
-$effect(() => {
-	const id = tab.id;
-	let cancelled = false;
-	(async () => {
-		const url = await buildHttpsUrlAsync(tab);
-		if (cancelled || id !== tab.id) return;
-		fileUrl = url;
-	})();
-	return () => {
-		cancelled = true;
-	};
-});
+$effect(() =>
+	resolveSignedTabUrl(tab, (u) => {
+		fileUrl = u;
+	})
+);
 
 const iframeSrc = $derived.by(() => {
 	if (!fileUrl) return '';