@walkthru-earth/objex 1.3.1 → 1.5.0

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+import { formatFileSize, handleLoadError } from '@walkthru-earth/objex-utils';
 import type { PMTiles } from 'pmtiles';
 import { tileIdToZxy } from 'pmtiles';
 import {
@@ -8,9 +9,9 @@ import {
 	ResizablePaneGroup
 } from '../../ui/resizable/index.js';
 import { t } from '../../../i18n/index.svelte.js';
-import { formatFileSize } from '../../../utils/format.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>

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 import XIcon from '@lucide/svelte/icons/x';
+import { formatFileSize, handleLoadError } from '@walkthru-earth/objex-utils';
 import type { PMTiles } from 'pmtiles';
 import { onDestroy } from 'svelte';
 import { t } from '../../../i18n/index.svelte.js';
-import { formatFileSize } from '../../../utils/format.js';
 import type { PmtilesMetadata } from '../../../utils/pmtiles';
 import {
 	type DecodedTile,
@@ -121,7 +121,7 @@ async function fetchTile() {
 			}
 		}
 	} catch (e) {
-		error = e instanceof Error ? e.message : String(e);
+		error = handleLoadError(e);
 	} finally {
 		loading = false;
 	}
@@ -180,7 +180,7 @@ function formatValue(v: unknown): string {
 <div class="flex h-full flex-col overflow-hidden">
 	<!-- Navigation bar -->
 	<div
-		class="flex shrink-0 flex-wrap items-center gap-2 border-b border-zinc-200 px-3 py-2 dark:border-zinc-800"
+		class="flex shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2"
 	>
 		<!-- Z/X/Y inputs -->
 		<div class="flex items-center gap-1 text-xs">
@@ -190,7 +190,7 @@ function formatValue(v: unknown): string {
 				bind:value={inputZ}
 				min={0}
 				max={30}
-				class="w-12 rounded border border-zinc-300 bg-transparent px-1.5 py-0.5 text-center font-mono text-xs dark:border-zinc-700"
+				class="w-12 rounded border border-border bg-transparent px-1.5 py-0.5 text-center font-mono text-xs"
 				onkeydown={handleKeydown}
 			/>
 			<span class="text-muted-foreground">x</span>
@@ -198,7 +198,7 @@ function formatValue(v: unknown): string {
 				type="number"
 				bind:value={inputX}
 				min={0}
-				class="w-16 rounded border border-zinc-300 bg-transparent px-1.5 py-0.5 text-center font-mono text-xs dark:border-zinc-700"
+				class="w-16 rounded border border-border bg-transparent px-1.5 py-0.5 text-center font-mono text-xs"
 				onkeydown={handleKeydown}
 			/>
 			<span class="text-muted-foreground">y</span>
@@ -206,7 +206,7 @@ function formatValue(v: unknown): string {
 				type="number"
 				bind:value={inputY}
 				min={0}
-				class="w-16 rounded border border-zinc-300 bg-transparent px-1.5 py-0.5 text-center font-mono text-xs dark:border-zinc-700"
+				class="w-16 rounded border border-border bg-transparent px-1.5 py-0.5 text-center font-mono text-xs"
 				onkeydown={handleKeydown}
 			/>
 		</div>
@@ -253,13 +253,13 @@ function formatValue(v: unknown): string {
 	</div>
 
 	<!-- Main content -->
-	<div class="flex min-h-0 flex-1 overflow-hidden">
+	<div class="flex min-h-0 flex-1 flex-col overflow-hidden sm:flex-row">
 		{#if loading}
 			<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
 				Loading tile...
 			</div>
 		{:else if error}
-			<div class="flex flex-1 items-center justify-center text-xs text-red-400">
+			<div class="flex flex-1 items-center justify-center text-xs text-destructive">
 				{error}
 			</div>
 		{:else if tile}
@@ -312,16 +312,16 @@ function formatValue(v: unknown): string {
 
 			<!-- Feature properties panel -->
 			<div
-				class="flex w-56 shrink-0 flex-col border-s border-zinc-200 lg:w-64 dark:border-zinc-800"
+				class="flex w-full flex-col border-t border-border sm:w-56 sm:shrink-0 sm:border-s sm:border-t-0 lg:w-64"
 			>
 				<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.featureProperties')}
 				</div>
 				{#if selectedFeature && selectedLayerName !== null}
 					<div class="flex-1 overflow-auto">
-						<div class="border-b border-zinc-200 px-3 py-2 dark:border-zinc-800">
+						<div class="border-b border-border px-3 py-2">
 							<div class="flex items-center gap-1.5 text-xs">
 								<span
 									class="inline-block size-2 rounded-sm"
@@ -337,14 +337,14 @@ function formatValue(v: unknown): string {
 								· #{selectedFeatureIdx}
 							</div>
 						</div>
-						<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
+						<div class="divide-y divide-border">
 							{#each Object.entries(selectedFeature.properties) as [key, value]}
 								<div class="px-3 py-1.5">
-									<div class="text-[10px] font-medium text-zinc-500 dark:text-zinc-400">
+									<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)}
@@ -402,10 +402,10 @@ function formatValue(v: unknown): string {
 
 			<!-- Raster tile info panel -->
 			<div
-				class="flex w-56 shrink-0 flex-col border-s border-zinc-200 lg:w-64 dark:border-zinc-800"
+				class="flex w-full flex-col border-t border-border sm:w-56 sm:shrink-0 sm:border-s sm:border-t-0 lg:w-64"
 			>
 				<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.tileInfo')}
 				</div>

package/dist/components/viewers/stac/StacDatetimeBar.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+import type { DatetimeFacet, FacetState } from '@walkthru-earth/objex-utils';
+import { formatDate } from '@walkthru-earth/objex-utils';
+import { t } from '../../../i18n/index.svelte.js';
+import { RangeSlider } from '../../ui/slider/index.js';
+
+/**
+ * Datetime range picker that sits above the item strip. Replaces the older
+ * preset dropdown ("last 7 days / 30 days / ...") with a continuous slider
+ * over the loaded items' min/max datetime, plus two `<input type="date">`
+ * fields for exact start / end picking. The histogram of loaded items is
+ * drawn behind the slider so the user can see where data is dense.
+ *
+ * State flows one-way: this component reads `facet` (built from the loaded
+ * items) and `state.datetime`, and emits `onChange(next)` with the merged
+ * `FacetState`. The parent decides how to apply it (push-down vs client-side).
+ *
+ * **Bbox scoping**: The parent (`StacMosaicViewer`) builds `facet` from
+ * `committedViews`, which is bbox-scoped in `api` and `parquet` modes (those
+ * sources push the viewport bbox to the server / SQL). So in viewport modes
+ * the histogram always reflects "what's available in the current bbox" and
+ * a pan triggers a fresh build via `reloadViewport()`. In `static` mode the
+ * histogram is global to the catalog by design (see the parent's `facets`
+ * derivation comment for why we do not client-side clip there).
+ */
+let {
+	facet,
+	state,
+	onChange
+}: {
+	/** DatetimeFacet built from the loaded items, or null when no datetime variance. */
+	facet: DatetimeFacet | null;
+	state: FacetState;
+	onChange: (next: FacetState) => void;
+} = $props();
+
+const bounds = $derived(
+	facet ? ([Date.parse(facet.min), Date.parse(facet.max)] as [number, number]) : null
+);
+
+const sliderValue = $derived.by((): [number, number] | null => {
+	if (!bounds) return null;
+	const [lo, hi] = bounds;
+	const stateLo = state.datetime?.min ? Date.parse(state.datetime.min) : lo;
+	const stateHi = state.datetime?.max ? Date.parse(state.datetime.max) : hi;
+	return [Number.isFinite(stateLo) ? stateLo : lo, Number.isFinite(stateHi) ? stateHi : hi];
+});
+
+function emit(min: string | undefined, max: string | undefined): void {
+	onChange({
+		...state,
+		datetime: min || max ? { min, max } : undefined
+	});
+}
+
+function setSlider(next: [number, number]): void {
+	if (!bounds) return;
+	const lo = next[0] <= bounds[0] ? undefined : new Date(next[0]).toISOString();
+	const hi = next[1] >= bounds[1] ? undefined : new Date(next[1]).toISOString();
+	emit(lo, hi);
+}
+
+/** ISO 8601 → `YYYY-MM-DD` for `<input type="date">` value. */
+function isoToDateInput(iso: string | undefined): string {
+	if (!iso) return '';
+	const t = Date.parse(iso);
+	if (!Number.isFinite(t)) return '';
+	return new Date(t).toISOString().slice(0, 10);
+}
+
+/** `<input type="date">` value → ISO 8601 (start of UTC day for min, end for max). */
+function dateInputToIso(value: string, kind: 'min' | 'max'): string | undefined {
+	if (!value) return undefined;
+	const stamp = kind === 'min' ? `${value}T00:00:00.000Z` : `${value}T23:59:59.999Z`;
+	const t = Date.parse(stamp);
+	return Number.isFinite(t) ? new Date(t).toISOString() : undefined;
+}
+
+function onMinInput(e: Event): void {
+	const v = (e.target as HTMLInputElement).value;
+	emit(dateInputToIso(v, 'min'), state.datetime?.max);
+}
+
+function onMaxInput(e: Event): void {
+	const v = (e.target as HTMLInputElement).value;
+	emit(state.datetime?.min, dateInputToIso(v, 'max'));
+}
+
+function clearRange(): void {
+	emit(undefined, undefined);
+}
+
+/** `YYYY-MM-DD` for today (UTC) — used as the max-input default. */
+function todayDateInput(): string {
+	return new Date().toISOString().slice(0, 10);
+}
+
+// Display defaults when the user has not set a filter yet:
+//   - min input falls back to the earliest datetime in the loaded data
+//     (`facet.min`), so the input hints at the available range instead of
+//     showing `mm / dd / yyyy`.
+//   - max input falls back to "today" so the visible window always extends
+//     to "now" regardless of whether items in the current viewport are
+//     stale. Both fallbacks are display-only — the actual `state.datetime`
+//     stays undefined until the user picks a value, so an empty `state`
+//     means "no filter" not "filter by today".
+const minInputValue = $derived(
+	isoToDateInput(state.datetime?.min) || (facet ? isoToDateInput(facet.min) : '')
+);
+const maxInputValue = $derived(isoToDateInput(state.datetime?.max) || todayDateInput());
+const isActive = $derived(Boolean(state.datetime?.min || state.datetime?.max));
+
+function fmtDate(ms: number): string {
+	if (!Number.isFinite(ms)) return '-';
+	return formatDate(ms);
+}
+
+const granularityLabel = $derived.by((): string | null => {
+	if (!facet) return null;
+	const word = t(`stac.granularity.${facet.granularity}`);
+	return t('stac.granularityLabel', { granularity: word });
+});
+</script>
+
+<div
+	class="pointer-events-auto flex flex-col gap-1.5 rounded-md border border-border bg-card/90 px-3 py-2 text-xs text-card-foreground shadow backdrop-blur-sm"
+>
+	<div class="flex flex-wrap items-center justify-between gap-2">
+		<span class="font-medium">{t('stac.filterDatetime')}</span>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<input
+				type="date"
+				value={minInputValue}
+				onchange={onMinInput}
+				class="min-h-8 rounded border border-input bg-background px-2 py-1 text-xs tabular-nums sm:min-h-0 sm:px-1.5 sm:py-0.5 sm:text-[11px]"
+				aria-label={t('stac.filterDatetime')}
+			/>
+			<span class="text-muted-foreground">&rarr;</span>
+			<input
+				type="date"
+				value={maxInputValue}
+				onchange={onMaxInput}
+				class="min-h-8 rounded border border-input bg-background px-2 py-1 text-xs tabular-nums sm:min-h-0 sm:px-1.5 sm:py-0.5 sm:text-[11px]"
+				aria-label={t('stac.filterDatetime')}
+			/>
+			{#if isActive}
+				<button
+					type="button"
+					class="inline-flex min-h-8 items-center rounded border border-input px-2 py-1 text-xs hover:bg-accent sm:min-h-0 sm:px-1.5 sm:py-0.5 sm:text-[10px]"
+					style="touch-action: manipulation;"
+					onclick={clearRange}
+				>
+					{t('stac.resetFilters')}
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	{#if facet && bounds && sliderValue}
+		<RangeSlider
+			min={bounds[0]}
+			max={bounds[1]}
+			value={sliderValue}
+			step={86_400_000}
+			histogram={facet.bins}
+			formatLabel={fmtDate}
+			onValueCommit={setSlider}
+		/>
+		{#if granularityLabel}
+			<div class="text-[10px] text-muted-foreground">{granularityLabel}</div>
+		{/if}
+	{:else}
+		<div class="text-[10px] text-muted-foreground">{t('stac.facetNoneAvailable')}</div>
+	{/if}
+</div>

package/dist/components/viewers/stac/StacDatetimeBar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DatetimeFacet, FacetState } from '@walkthru-earth/objex-utils';
+type $$ComponentProps = {
+    /** DatetimeFacet built from the loaded items, or null when no datetime variance. */
+    facet: DatetimeFacet | null;
+    state: FacetState;
+    onChange: (next: FacetState) => void;
+};
+declare const StacDatetimeBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type StacDatetimeBar = ReturnType<typeof StacDatetimeBar>;
+export default StacDatetimeBar;