@walkthru-earth/objex 1.4.0 → 1.5.0

package/dist/components/viewers/ZarrMapViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { MapboxOverlay } from '@deck.gl/mapbox';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 import type maplibregl from 'maplibre-gl';
 import maplibreModule from 'maplibre-gl';
 import { onDestroy, untrack } from 'svelte';
@@ -491,7 +492,7 @@ async function addZarrLayer(map: maplibregl.Map) {
 		zarrLayer = new ZarrLayer(opts);
 		map.addLayer(zarrLayer);
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 		loading = false;
 	}
 }
@@ -599,7 +600,7 @@ async function updateSelector() {
 	try {
 		await zarrLayer.setSelector(buildSelector());
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	}
 }
 
@@ -641,12 +642,12 @@ onDestroy(cleanup);
 <div class="flex h-full w-full flex-col overflow-hidden">
 	<!-- Controls bar -->
 	<div
-		class="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-zinc-200 px-3 py-1.5 dark:border-zinc-800"
+		class="flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-border px-3 py-1.5"
 	>
-		<label class="flex items-center gap-1 text-xs text-zinc-400">
+		<label class="flex items-center gap-1 text-xs text-muted-foreground">
 			{t('map.variable')}
 			<select
-				class="rounded border border-zinc-300 bg-white px-1.5 py-0.5 text-xs text-zinc-700 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300"
+				class="rounded border border-border bg-background px-1.5 py-0.5 text-xs text-foreground"
 				bind:value={selectedVar}
 				onchange={changeVariable}
 			>
@@ -658,10 +659,10 @@ onDestroy(cleanup);
 
 		{#each selectorDims as dim}
 			<label
-				class="flex shrink-0 items-center gap-1.5 rounded border border-zinc-200 px-2 py-0.5 text-xs text-zinc-400 dark:border-zinc-700"
+				class="flex shrink-0 items-center gap-1.5 rounded border border-border px-2 py-0.5 text-xs text-muted-foreground"
 				title={dimLabel(dim)}
 			>
-				<span class="shrink-0 font-medium text-zinc-500 dark:text-zinc-400">{dim.name}</span>
+				<span class="shrink-0 font-medium text-muted-foreground">{dim.name}</span>
 				<Slider
 					type="single"
 					min={0}
@@ -676,7 +677,7 @@ onDestroy(cleanup);
 				/>
 				{#if dim.isDatetime && dim.minDate && dim.maxDate}
 					{@const dateVal = indexToDateStr(selectorValues[dim.name] ?? 0, dim)}
-					<span class="shrink-0 tabular-nums text-zinc-500">
+					<span class="shrink-0 tabular-nums text-muted-foreground">
 						{dateVal ? (dim.subDaily ? dateVal.replace('T', ' ') : dateVal) : (selectorValues[dim.name] ?? 0)}
 					</span>
 					<input
@@ -691,10 +692,10 @@ onDestroy(cleanup);
 								updateSelector();
 							}
 						}}
-						class="h-5 rounded border border-zinc-300 bg-white px-1 text-[10px] text-zinc-600 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400"
+						class="h-5 rounded border border-border bg-background px-1 text-[10px] text-muted-foreground"
 					/>
 				{:else}
-					<span class="shrink-0 tabular-nums text-zinc-500">{selectorValues[dim.name] ?? 0}<span class="text-zinc-500/60">/{dim.size - 1}</span></span>
+					<span class="shrink-0 tabular-nums text-muted-foreground">{selectorValues[dim.name] ?? 0}<span class="text-muted-foreground/60">/{dim.size - 1}</span></span>
 					{#if dim.dtype}
 						<span class="shrink-0 text-[10px] text-zinc-400/70">{dim.dtype}</span>
 					{/if}
@@ -703,7 +704,7 @@ onDestroy(cleanup);
 		{/each}
 
 		{#if selectedMeta?.shape}
-			<span class="ms-auto text-xs text-zinc-400">
+			<span class="ms-auto text-xs text-muted-foreground">
 				{selectedMeta.dtype} [{selectedMeta.shape.join(', ')}]
 			</span>
 		{/if}
@@ -713,7 +714,7 @@ onDestroy(cleanup);
 	<div class="relative min-h-0 flex-1">
 		{#if error && !loading}
 			<div class="flex h-full items-center justify-center">
-				<p class="max-w-md text-center text-sm text-red-400">{error}</p>
+				<p class="max-w-md text-center text-sm text-destructive">{error}</p>
 			</div>
 		{:else}
 			<MapContainer {onMapReady} bounds={[-130, 20, -60, 55]} />

package/dist/components/viewers/ZarrViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-import { untrack } from 'svelte';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
+import { onDestroy, untrack } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
 import { Button } from '../ui/button/index.js';
 import {
@@ -8,6 +9,7 @@ import {
 	ResizablePaneGroup
 } from '../ui/resizable/index.js';
 import { t } from '../../i18n/index.svelte.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
 import type { Tab } from '../../types';
 import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
 import { pickViewMode, updateUrlView } from '../../utils/url-state.js';
@@ -25,9 +27,12 @@ import {
 	type ZarrHierarchy,
 	type ZarrNode
 } from '../../utils/zarr.js';
+import { useIsWide } from '../../utils/media-query.svelte.js';
 
 let { tab }: { tab: Tab } = $props();
 
+const isWide = useIsWide();
+
 let loading = $state(true);
 let error = $state<string | null>(null);
 type ZarrViewMode = 'inspect' | 'map';
@@ -110,6 +115,19 @@ $effect(() => {
 	});
 });
 
+function cleanup() {
+	hierarchy = null;
+	selectedNode = null;
+	expanded = new Set();
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+onDestroy(cleanup);
+
 function setViewMode(mode: 'inspect' | 'map') {
 	viewMode = mode;
 	updateUrlView(viewMode);
@@ -133,7 +151,7 @@ async function loadHierarchy() {
 			expanded = new Set(['/']);
 		}
 	} catch (err) {
-		error = err instanceof Error ? err.message : String(err);
+		error = handleLoadError(err);
 	} finally {
 		loading = false;
 		updateUrlView(viewMode);
@@ -182,7 +200,7 @@ function selectStoreAttrs() {
 			{#if hasChildren}
 				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 				<span
-					class="flex size-4 shrink-0 items-center justify-center rounded hover:bg-zinc-200 dark:hover:bg-zinc-700"
+					class="flex size-4 shrink-0 items-center justify-center rounded hover:bg-accent"
 					role="button"
 					tabindex="-1"
 					aria-label={isExpanded ? 'Collapse' : 'Expand'}
@@ -192,7 +210,7 @@ function selectStoreAttrs() {
 					}}
 				>
 					<svg
-						class="size-3 text-zinc-400 transition-transform"
+						class="size-3 text-muted-foreground transition-transform"
 						class:rotate-90={isExpanded}
 						viewBox="0 0 16 16"
 						fill="currentColor"
@@ -229,10 +247,8 @@ function selectStoreAttrs() {
 			<span
 				class="truncate"
 				class:font-medium={node.kind === 'array'}
-				class:text-zinc-700={node.kind === 'array'}
-				class:dark:text-zinc-300={node.kind === 'array'}
-				class:text-zinc-600={node.kind === 'group'}
-				class:dark:text-zinc-400={node.kind === 'group'}
+				class:text-foreground={node.kind === 'array'}
+				class:text-muted-foreground={node.kind === 'group'}
 			>
 				{node.path === '/' ? '/ (root)' : node.name}
 			</span>
@@ -259,18 +275,18 @@ function selectStoreAttrs() {
 {#snippet nodeDetails()}
 	{#if showingStoreAttrs && hierarchy}
 		<div
-			class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+			class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 		>
 			{t('zarr.storeAttributes')}
 		</div>
 		<div class="flex-1 overflow-auto p-3">
 			<div
-				class="rounded border border-zinc-200 bg-zinc-100 p-2 text-xs dark:border-zinc-700 dark:bg-zinc-800"
+				class="rounded border border-border bg-muted p-2 text-xs"
 			>
 				{#each Object.entries(hierarchy.storeAttrs) as [key, value]}
 					<div class="flex gap-2 py-0.5">
 						<span class="shrink-0 font-medium text-muted-foreground">{key}:</span>
-						<span class="break-all text-zinc-700 dark:text-zinc-300">
+						<span class="break-all text-foreground">
 							{typeof value === 'string' ? value : JSON.stringify(value)}
 						</span>
 					</div>
@@ -279,7 +295,7 @@ function selectStoreAttrs() {
 		</div>
 	{:else if selectedNode}
 		<div
-			class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+			class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 		>
 			{selectedNode.path}
 		</div>
@@ -389,12 +405,12 @@ function selectStoreAttrs() {
 						<dt class="text-muted-foreground">{t('zarr.attributes')}</dt>
 						<dd>
 							<div
-								class="mt-1 rounded border border-zinc-200 bg-zinc-100 p-2 dark:border-zinc-700 dark:bg-zinc-800"
+								class="mt-1 rounded border border-border bg-muted p-2"
 							>
 								{#each Object.entries(selectedNode.attributes) as [key, value]}
 									<div class="flex gap-2 py-0.5">
 										<span class="shrink-0 font-medium text-muted-foreground">{key}:</span>
-										<span class="break-all text-zinc-700 dark:text-zinc-300">
+										<span class="break-all text-foreground">
 											{typeof value === 'string' ? value : JSON.stringify(value)}
 										</span>
 									</div>
@@ -414,10 +430,10 @@ function selectStoreAttrs() {
 
 <div class="flex h-full flex-col">
 	<!-- Header bar -->
-	<div class="shrink-0 border-b border-zinc-200 px-3 py-2 sm:px-4 dark:border-zinc-800">
+	<div class="shrink-0 border-b border-border px-3 py-2 sm:px-4">
 		<div class="flex items-center gap-1.5 sm:gap-2">
 			<span
-				class="max-w-[140px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300"
+				class="max-w-[140px] truncate text-sm font-medium text-foreground sm:max-w-none"
 				>{tab.name}</span
 			>
 			<Badge
@@ -459,11 +475,11 @@ function selectStoreAttrs() {
 	<!-- Content -->
 	{#if loading}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="text-sm text-zinc-400">{t('zarr.loading')}</p>
+			<p class="text-sm text-muted-foreground">{t('zarr.loading')}</p>
 		</div>
 	{:else if error}
 		<div class="flex flex-1 items-center justify-center">
-			<p class="max-w-md text-center text-sm text-red-400">{error}</p>
+			<p class="max-w-md text-center text-sm text-destructive">{error}</p>
 		</div>
 	{:else if viewMode === 'map' && hasMapVars}
 		{#key viewMode}
@@ -480,56 +496,73 @@ function selectStoreAttrs() {
 		{/key}
 	{:else if hierarchy}
 		<!-- Inspect mode (tree + detail panel) -->
-		<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
-			<!-- Left: Tree view -->
-			<ResizablePane defaultSize={40} minSize={20}>
-				<div class="flex h-full flex-col">
-					<div
-						class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+		{#snippet zarrTree()}
+			<div class="flex h-full flex-col">
+				<div
+					class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
+				>
+					{t('zarr.contents')}
+					<span class="ms-1 normal-case tracking-normal"
+						>({hierarchy!.totalNodes})</span
 					>
-						{t('zarr.contents')}
-						<span class="ms-1 normal-case tracking-normal"
-							>({hierarchy.totalNodes})</span
+				</div>
+				<div class="flex-1 overflow-auto">
+					{#if hasStoreAttrs}
+						<button
+							class="flex w-full items-center gap-2 border-b border-zinc-100 px-3 py-1 text-xs hover:bg-zinc-100 dark:border-zinc-800/50 dark:hover:bg-zinc-800/50"
+							class:bg-blue-50={showingStoreAttrs}
+							class:dark:bg-blue-950={showingStoreAttrs}
+							onclick={selectStoreAttrs}
 						>
-					</div>
-					<div class="flex-1 overflow-auto">
-						{#if hasStoreAttrs}
-							<button
-								class="flex w-full items-center gap-2 border-b border-zinc-100 px-3 py-1 text-xs hover:bg-zinc-100 dark:border-zinc-800/50 dark:hover:bg-zinc-800/50"
-								class:bg-blue-50={showingStoreAttrs}
-								class:dark:bg-blue-950={showingStoreAttrs}
-								onclick={selectStoreAttrs}
+							<span class="size-4 shrink-0"></span>
+							<svg
+								class="size-3.5 shrink-0 text-muted-foreground"
+								viewBox="0 0 16 16"
+								fill="currentColor"
 							>
-								<span class="size-4 shrink-0"></span>
-								<svg
-									class="size-3.5 shrink-0 text-zinc-400"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-1.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-								<span class="truncate font-medium text-muted-foreground">
-									{t('zarr.storeAttributes')}
-								</span>
-							</button>
-						{/if}
-						{@render treeNode(hierarchy.root, 0)}
-					</div>
+								<path
+									fill-rule="evenodd"
+									d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7H3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-1.5V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+							<span class="truncate font-medium text-muted-foreground">
+								{t('zarr.storeAttributes')}
+							</span>
+						</button>
+					{/if}
+					{@render treeNode(hierarchy!.root, 0)}
 				</div>
-			</ResizablePane>
+			</div>
+		{/snippet}
+
+		{#if isWide.value}
+			<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
+				<!-- Left: Tree view -->
+				<ResizablePane defaultSize={40} minSize={20}>
+					{@render zarrTree()}
+				</ResizablePane>
 
-			<ResizableHandle />
+				<ResizableHandle />
 
-			<!-- Right: Detail panel -->
-			<ResizablePane defaultSize={60} minSize={30}>
-				<div class="flex h-full flex-col">
+				<!-- Right: Detail panel -->
+				<ResizablePane defaultSize={60} minSize={30}>
+					<div class="flex h-full flex-col">
+						{@render nodeDetails()}
+					</div>
+				</ResizablePane>
+			</ResizablePaneGroup>
+		{:else}
+			<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+				<!-- Tree pane: fixed height so it doesn't crowd the detail section -->
+				<div class="max-h-64 shrink-0 border-b border-border">
+					{@render zarrTree()}
+				</div>
+				<!-- Detail panel: grows to fill remaining space -->
+				<div class="flex flex-1 flex-col">
 					{@render nodeDetails()}
 				</div>
-			</ResizablePane>
-		</ResizablePaneGroup>
+			</div>
+		{/if}
 	{/if}
 </div>

package/dist/components/viewers/map/AttributeTable.svelte

@@ -18,24 +18,24 @@ let {
 		class="absolute bottom-2 end-2 top-10 z-10 flex w-64 flex-col overflow-hidden rounded bg-card/95 text-card-foreground shadow-lg backdrop-blur-sm sm:w-72"
 	>
 		<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"
 		>
-			<h3 class="text-xs font-medium text-zinc-500 dark:text-zinc-400">Feature Attributes</h3>
+			<h3 class="text-xs font-medium text-muted-foreground">Feature Attributes</h3>
 			{#if onClose}
 				<button
-					class="rounded p-0.5 text-zinc-400 hover:bg-zinc-200 hover:text-zinc-600 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"
 					onclick={onClose}
 				>
 					<XIcon class="size-3.5" />
 				</button>
 			{/if}
 		</div>
-		<div class="flex-1 divide-y divide-zinc-100 overflow-auto dark:divide-zinc-800">
+		<div class="flex-1 divide-y divide-border overflow-auto">
 			{#each Object.entries(feature) as [key, value]}
 				<div class="px-3 py-1.5">
-					<div class="text-[10px] font-medium text-zinc-500 dark:text-zinc-400">{key}</div>
+					<div class="text-[10px] font-medium text-muted-foreground">{key}</div>
 					<div
-						class="break-all text-xs text-zinc-700 dark:text-zinc-300"
+						class="break-all text-xs text-foreground"
 						title={formatValue(value)}
 					>
 						{formatValue(value)}

package/dist/components/viewers/map/MapContainer.svelte

@@ -162,9 +162,9 @@ onDestroy(() => {
 	<div bind:this={containerEl} class="h-full w-full" style="touch-action: none;"></div>
 	<!-- Zoom level indicator — positioned above nav controls -->
 	<div
-		class="pointer-events-none absolute bottom-[7rem] right-[10px] z-10 flex size-[29px] items-center justify-center rounded-full border border-zinc-300 bg-white shadow-sm dark:border-zinc-600 dark:bg-zinc-800 sm:bottom-[10rem]"
+		class="pointer-events-none absolute bottom-[7rem] right-[10px] z-10 flex size-[29px] items-center justify-center rounded-full border border-border bg-background shadow-sm sm:bottom-[10rem]"
 	>
-		<span class="text-[10px] font-semibold tabular-nums text-zinc-600 dark:text-zinc-300">
+		<span class="text-[10px] font-semibold tabular-nums text-foreground">
 			{currentZoom.toFixed(1)}
 		</span>
 	</div>

package/dist/components/viewers/pmtiles/PmtilesArchiveView.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-import { formatFileSize } from '@walkthru-earth/objex-utils';
+import { formatFileSize, handleLoadError } from '@walkthru-earth/objex-utils';
 import type { PMTiles } from 'pmtiles';
 import { tileIdToZxy } from 'pmtiles';
 import {
@@ -11,6 +11,7 @@ import {
 import { t } from '../../../i18n/index.svelte.js';
 import type { PmtilesMetadata } from '../../../utils/pmtiles';
 import { highlightCode } from '../../../utils/shiki';
+import { useIsWide } from '../../../utils/media-query.svelte.js';
 
 let {
 	metadata,
@@ -22,6 +23,8 @@ let {
 	onOpenInspector?: (z: number, x: number, y: number) => void;
 } = $props();
 
+const isWide = useIsWide();
+
 interface ZoomSummary {
 	zoom: number;
 	count: number;
@@ -126,7 +129,7 @@ async function selectZoom(zoom: number) {
 						if (result.length > 5000) break;
 					}
 				} catch (err) {
-					errorMsg = err instanceof Error ? err.message : String(err);
+					errorMsg = handleLoadError(err) ?? '';
 				}
 			}
 		} else {
@@ -165,7 +168,7 @@ const dedupRatio = $derived(
 {#snippet entryDetails()}
 	{#if selectedEntry}
 		<div
-			class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+			class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 		>
 			{t('pmtiles.entryDetails')}
 		</div>
@@ -212,7 +215,7 @@ const dedupRatio = $derived(
 <div class="flex h-full flex-col overflow-hidden">
 	<!-- Stats grid -->
 	<div
-		class="shrink-0 border-b border-zinc-200 px-3 py-3 sm:px-4 dark:border-zinc-800"
+		class="shrink-0 border-b border-border px-3 py-3 sm:px-4"
 	>
 		<div class="grid grid-cols-2 gap-x-4 gap-y-2 text-xs sm:grid-cols-3 lg:grid-cols-6">
 			<div>
@@ -278,96 +281,119 @@ const dedupRatio = $derived(
 		{/if}
 	</div>
 
-	<!-- Column browser (resizable) -->
-	<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
-		<!-- Column 1: Zoom levels -->
-		<ResizablePane defaultSize={28} minSize={15}>
-			<div class="flex h-full flex-col">
+	<!-- Column browser (resizable or stacked) -->
+	{#snippet zoomLevels()}
+		<div class="flex h-full flex-col">
+			<div
+				class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
+			>
+				{t('pmtiles.zoomLevels')}
+			</div>
+			<div class="flex-1 overflow-auto">
+				{#each zoomSummaries as s}
+					<button
+						class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
+						class:bg-muted={selectedZoom === s.zoom}
+						onclick={() => selectZoom(s.zoom)}
+					>
+						<span class="w-7 shrink-0 font-mono text-muted-foreground">z{s.zoom}</span>
+						<div class="min-w-0 flex-1">
+							<div
+								class="h-1.5 rounded-full bg-blue-500/60"
+								style="width: {Math.max(2, (s.count / maxCount) * 100)}%"
+							></div>
+						</div>
+						<span class="shrink-0 text-[10px] tabular-nums text-muted-foreground">
+							{s.count.toLocaleString()}
+						</span>
+						<ChevronRightIcon class="size-3 shrink-0 text-muted-foreground" />
+					</button>
+				{/each}
+			</div>
+		</div>
+	{/snippet}
+
+	{#snippet zoomEntryList()}
+		<div class="flex h-full flex-col">
+			{#if selectedZoom !== null}
 				<div
-					class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
+					class="shrink-0 border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground"
 				>
-					{t('pmtiles.zoomLevels')}
+					{t('pmtiles.tilesAtZoom').replace('{zoom}', String(selectedZoom))}
+					<span class="ms-1 normal-case tracking-normal">({zoomEntries.length.toLocaleString()})</span>
 				</div>
 				<div class="flex-1 overflow-auto">
-					{#each zoomSummaries as s}
-						<button
-							class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
-							class:bg-zinc-100={selectedZoom === s.zoom}
-							class:dark:bg-zinc-800={selectedZoom === s.zoom}
-							onclick={() => selectZoom(s.zoom)}
-						>
-							<span class="w-7 shrink-0 font-mono text-muted-foreground">z{s.zoom}</span>
-							<div class="min-w-0 flex-1">
-								<div
-									class="h-1.5 rounded-full bg-blue-500/60"
-									style="width: {Math.max(2, (s.count / maxCount) * 100)}%"
-								></div>
-							</div>
-							<span class="shrink-0 text-[10px] tabular-nums text-muted-foreground">
-								{s.count.toLocaleString()}
-							</span>
-							<ChevronRightIcon class="size-3 shrink-0 text-muted-foreground" />
-						</button>
-					{/each}
+					{#if loadingEntries}
+						<div class="p-4 text-center text-xs text-muted-foreground">Loading...</div>
+					{:else if errorMsg}
+						<div class="p-4 text-center text-xs text-destructive">{errorMsg}</div>
+					{:else if zoomEntries.length === 0}
+						<div class="p-4 text-center text-xs text-muted-foreground">{t('pmtiles.noEntries')}</div>
+					{:else}
+						{#each zoomEntries as entry}
+							<button
+								class="flex w-full items-center gap-2 px-3 py-1 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
+								class:bg-muted={selectedEntry?.tileId === entry.tileId}
+								onclick={() => (selectedEntry = entry)}
+							>
+								<span class="shrink-0 truncate font-mono text-[11px]">
+									{entry.z}/{entry.x}/{entry.y}
+								</span>
+								<span class="ms-auto shrink-0 text-[10px] tabular-nums text-muted-foreground">
+									{formatBytes(entry.length)}
+								</span>
+								<ChevronRightIcon class="size-3 shrink-0 text-muted-foreground" />
+							</button>
+						{/each}
+					{/if}
 				</div>
-			</div>
-		</ResizablePane>
+			{:else}
+				<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
+					Select a zoom level
+				</div>
+			{/if}
+		</div>
+	{/snippet}
 
-		<ResizableHandle />
+	{#if isWide.value}
+		<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
+			<!-- Column 1: Zoom levels -->
+			<ResizablePane defaultSize={28} minSize={15}>
+				{@render zoomLevels()}
+			</ResizablePane>
 
-		<!-- Column 2: Entries at zoom -->
-		<ResizablePane defaultSize={42} minSize={20}>
-			<div class="flex h-full flex-col">
-				{#if selectedZoom !== null}
-					<div
-						class="shrink-0 border-b border-zinc-200 px-3 py-1.5 text-[11px] font-medium uppercase tracking-wider text-muted-foreground dark:border-zinc-800"
-					>
-						{t('pmtiles.tilesAtZoom').replace('{zoom}', String(selectedZoom))}
-						<span class="ms-1 normal-case tracking-normal">({zoomEntries.length.toLocaleString()})</span>
-					</div>
-					<div class="flex-1 overflow-auto">
-						{#if loadingEntries}
-							<div class="p-4 text-center text-xs text-muted-foreground">Loading...</div>
-						{:else if errorMsg}
-							<div class="p-4 text-center text-xs text-red-400">{errorMsg}</div>
-						{:else if zoomEntries.length === 0}
-							<div class="p-4 text-center text-xs text-muted-foreground">{t('pmtiles.noEntries')}</div>
-						{:else}
-							{#each zoomEntries as entry}
-								<button
-									class="flex w-full items-center gap-2 px-3 py-1 text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800/50"
-									class:bg-zinc-100={selectedEntry?.tileId === entry.tileId}
-									class:dark:bg-zinc-800={selectedEntry?.tileId === entry.tileId}
-									onclick={() => (selectedEntry = entry)}
-								>
-									<span class="shrink-0 truncate font-mono text-[11px]">
-										{entry.z}/{entry.x}/{entry.y}
-									</span>
-									<span class="ms-auto shrink-0 text-[10px] tabular-nums text-muted-foreground">
-										{formatBytes(entry.length)}
-									</span>
-									<ChevronRightIcon class="size-3 shrink-0 text-muted-foreground" />
-								</button>
-							{/each}
-						{/if}
-					</div>
-				{:else}
-					<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
-						Select a zoom level
-					</div>
-				{/if}
-			</div>
-		</ResizablePane>
+			<ResizableHandle />
 
-		<ResizableHandle />
+			<!-- Column 2: Entries at zoom -->
+			<ResizablePane defaultSize={42} minSize={20}>
+				{@render zoomEntryList()}
+			</ResizablePane>
 
-		<!-- Column 3: Entry details -->
-		<ResizablePane defaultSize={30} minSize={15}>
-			<div class="flex h-full flex-col">
+			<ResizableHandle />
+
+			<!-- Column 3: Entry details -->
+			<ResizablePane defaultSize={30} minSize={15}>
+				<div class="flex h-full flex-col">
+					{@render entryDetails()}
+				</div>
+			</ResizablePane>
+		</ResizablePaneGroup>
+	{:else}
+		<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+			<!-- Zoom level list: compact fixed height -->
+			<div class="max-h-48 shrink-0 border-b border-border">
+				{@render zoomLevels()}
+			</div>
+			<!-- Entries at selected zoom: fixed height -->
+			<div class="max-h-56 shrink-0 border-b border-border">
+				{@render zoomEntryList()}
+			</div>
+			<!-- Entry details: grows to fill remaining space -->
+			<div class="flex flex-1 flex-col">
 				{@render entryDetails()}
 			</div>
-		</ResizablePane>
-	</ResizablePaneGroup>
+		</div>
+	{/if}
 </div>
 
 <style>