@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/viewers/MarkdownViewer.svelte

@@ -1,4 +1,12 @@
 <script lang="ts">
+import {
+	handleLoadError,
+	interpolateTemplates,
+	MarkdownSqlContext,
+	markSqlBlocks,
+	parseMarkdownDocument,
+	wireCodeCopyButtons
+} from '@walkthru-earth/objex-utils';
 import { onDestroy, tick } from 'svelte';
 import SqlResultBlock from '../editor/SqlResultBlock.svelte';
 import { Badge } from '../ui/badge/index.js';
@@ -7,15 +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 { wireCodeCopyButtons } from '../../utils/clipboard.js';
-import { handleLoadError } from '../../utils/error.js';
-import { EvidenceContext } from '../../utils/evidence-context';
 import { detectRTL, processDirection, renderMarkdown } from '../../utils/markdown';
-import {
-	interpolateTemplates,
-	markSqlBlocks,
-	parseMarkdownDocument
-} from '../../utils/markdown-sql';
+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';
@@ -78,7 +81,9 @@ async function loadMarkdown() {
 
 		if (parsed.sqlBlocks.length > 0) {
 			// Execute SQL blocks in parallel
-			const ctx = new EvidenceContext(
+			const engine = await getQueryEngine();
+			const ctx = new MarkdownSqlContext(
+				engine,
 				tab.connectionId ?? '',
 				tab.path.split('/').slice(0, -1).join('/')
 			);
@@ -201,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"
@@ -227,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

@@ -1,11 +1,13 @@
 <script lang="ts">
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 import { onDestroy } from 'svelte';
 import { getMimeType } from '../../file-icons/index.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 { buildHttpsUrl, canStreamDirectly } from '../../utils/url.js';
+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

@@ -2,22 +2,23 @@
 import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
 import MaximizeIcon from '@lucide/svelte/icons/maximize';
 import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
+import { handleLoadError } from '@walkthru-earth/objex-utils';
 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';
 import type { Tab } from '../../types';
-import { handleLoadError } from '../../utils/error.js';
 import {
 	createModelScene,
 	disposeModelScene,
 	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>