@walkthru-earth/objex 0.1.0

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

@@ -0,0 +1,7 @@
+import type { Tab } from '../../types';
+type $$ComponentProps = {
+    tab: Tab;
+};
+declare const MarkdownViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkdownViewer = ReturnType<typeof MarkdownViewer>;
+export default MarkdownViewer;

package/dist/components/viewers/MediaViewer.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+import { onDestroy } from 'svelte';
+import { getAdapter } from '../../storage/index.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
+import type { Tab } from '../../types';
+import { buildHttpsUrl, canStreamDirectly } from '../../utils/url.js';
+
+let { tab }: { tab: Tab } = $props();
+
+const videoExtensions = new Set(['mp4', 'webm', 'mov', 'avi', 'mkv']);
+const mediaType = $derived(videoExtensions.has(tab.extension.toLowerCase()) ? 'video' : 'audio');
+
+const mimeMap: Record<string, string> = {
+	mp4: 'video/mp4',
+	webm: 'video/webm',
+	mov: 'video/quicktime',
+	avi: 'video/x-msvideo',
+	mkv: 'video/x-matroska',
+	mp3: 'audio/mpeg',
+	wav: 'audio/wav',
+	ogg: 'audio/ogg',
+	flac: 'audio/flac',
+	aac: 'audio/aac'
+};
+
+let abortController: AbortController | null = null;
+let mediaSrc = $state<string | null>(null);
+let blobUrl = $state<string | null>(null);
+let loading = $state(true);
+let error = $state<string | null>(null);
+
+$effect(() => {
+	if (!tab) return;
+	loadMedia();
+});
+
+async function loadMedia() {
+	loading = true;
+	error = null;
+	cleanup();
+	abortController = new AbortController();
+	const { signal } = abortController;
+
+	try {
+		if (canStreamDirectly(tab)) {
+			// Direct URL — browser handles HTTP range-request streaming natively.
+			// No CORS needed for <video>/<audio> src. Enables seeking without
+			// downloading the full file (S3/Azure/GCS all support range requests).
+			mediaSrc = buildHttpsUrl(tab);
+		} else {
+			// Authenticated S3 — download via storage adapter (blob fallback)
+			const adapter = getAdapter(tab.source, tab.connectionId);
+			const data = await adapter.read(tab.path, undefined, undefined, signal);
+			const mime = mimeMap[tab.extension.toLowerCase()] || 'application/octet-stream';
+			const blob = new Blob([data as unknown as BlobPart], { type: mime });
+			blobUrl = URL.createObjectURL(blob);
+			mediaSrc = blobUrl;
+		}
+	} catch (err) {
+		if (err instanceof DOMException && err.name === 'AbortError') return;
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		loading = false;
+	}
+}
+
+function cleanup() {
+	abortController?.abort();
+	abortController = null;
+	if (blobUrl) {
+		URL.revokeObjectURL(blobUrl);
+		blobUrl = null;
+	}
+	mediaSrc = null;
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+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>
+
+	<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>
+		{: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>
+		{:else if mediaSrc}
+			{#if mediaType === 'video'}
+				<video
+					src={mediaSrc}
+					controls
+					preload="metadata"
+					class="max-h-full max-w-full rounded"
+				>
+					<track kind="captions" />
+				</video>
+			{:else}
+				<div class="w-full max-w-md">
+					<audio src={mediaSrc} controls preload="metadata" class="w-full">
+						<track kind="captions" />
+					</audio>
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,7 @@
+import type { Tab } from '../../types';
+type $$ComponentProps = {
+    tab: Tab;
+};
+declare const MediaViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type MediaViewer = ReturnType<typeof MediaViewer>;
+export default MediaViewer;

package/dist/components/viewers/ModelViewer.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+import MaximizeIcon from '@lucide/svelte/icons/maximize';
+import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
+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 {
+	createModelScene,
+	disposeModelScene,
+	loadModel,
+	type ModelScene
+} from '../../utils/model3d';
+
+let { tab }: { tab: Tab } = $props();
+
+let abortController: AbortController | null = null;
+let canvasEl: HTMLCanvasElement | undefined = $state();
+let modelScene: ModelScene | null = null;
+let loading = $state(true);
+let error = $state<string | null>(null);
+let meshCount = $state(0);
+let vertexCount = $state(0);
+let wireframe = $state(false);
+
+$effect(() => {
+	if (canvasEl) loadModelFile();
+});
+
+async function loadModelFile() {
+	abortController?.abort();
+	abortController = new AbortController();
+	const { signal } = abortController;
+
+	loading = true;
+	error = null;
+
+	try {
+		if (!canvasEl) return;
+
+		modelScene = createModelScene(canvasEl);
+
+		const adapter = getAdapter(tab.source, tab.connectionId);
+		const data = await adapter.read(tab.path, undefined, undefined, signal);
+		const info = await loadModel(modelScene.scene, modelScene.camera, data, tab.extension);
+		meshCount = info.meshCount;
+		vertexCount = info.vertexCount;
+	} catch (err) {
+		if (err instanceof DOMException && err.name === 'AbortError') return;
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		loading = false;
+	}
+}
+
+function toggleWireframe() {
+	wireframe = !wireframe;
+	if (modelScene) {
+		for (const mesh of modelScene.scene.meshes) {
+			if (mesh.material) {
+				mesh.material.wireframe = wireframe;
+			}
+		}
+	}
+}
+
+function resetCamera() {
+	if (modelScene) {
+		modelScene.camera.alpha = Math.PI / 4;
+		modelScene.camera.beta = Math.PI / 3;
+	}
+}
+
+function fullscreen() {
+	canvasEl?.requestFullscreen?.();
+}
+
+function cleanup() {
+	abortController?.abort();
+	abortController = null;
+	if (modelScene) {
+		disposeModelScene(modelScene);
+		modelScene = null;
+	}
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+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}
+
+		<div class="ms-auto flex items-center gap-1">
+			<!-- Desktop controls -->
+			<div class="hidden items-center gap-1 sm:flex">
+				<Button
+					variant="ghost"
+					size="sm"
+					class="h-7 px-2 text-xs {wireframe ? 'text-blue-500' : ''}"
+					onclick={toggleWireframe}
+				>
+					{t('model.wireframe')}
+				</Button>
+				<Button variant="ghost" size="sm" class="h-7 px-1.5" onclick={resetCamera} title={t('model.reset')}>
+					<RotateCcwIcon class="size-3.5" />
+				</Button>
+				<Button variant="ghost" size="sm" class="h-7 px-1.5" onclick={fullscreen} title={t('model.fullscreen')}>
+					<MaximizeIcon class="size-3.5" />
+				</Button>
+			</div>
+
+			<!-- 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">
+						<EllipsisVerticalIcon class="size-4" />
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content align="end" class="w-40">
+						<DropdownMenu.Item onclick={toggleWireframe}>
+							{t('model.wireframe')} {wireframe ? '✓' : ''}
+						</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={resetCamera}>{t('model.reset')}</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={fullscreen}>{t('model.fullscreen')}</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</div>
+		</div>
+	</div>
+
+	<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>
+		{/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>
+		{/if}
+		<canvas bind:this={canvasEl} class="h-full w-full"></canvas>
+	</div>
+</div>

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

@@ -0,0 +1,7 @@
+import type { Tab } from '../../types';
+type $$ComponentProps = {
+    tab: Tab;
+};
+declare const ModelViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type ModelViewer = ReturnType<typeof ModelViewer>;
+export default ModelViewer;

package/dist/components/viewers/NotebookViewer.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+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 { 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 { highlightCode } from '../../utils/shiki';
+
+let { tab }: { tab: Tab } = $props();
+
+let abortController: AbortController | null = null;
+let container = $state<HTMLDivElement | null>(null);
+let loading = $state(true);
+let error = $state<string | null>(null);
+let cellCount = $state(0);
+let kernelName = $state('');
+let showCode = $state(true);
+let copied = $state(false);
+let rawContent = $state('');
+
+$effect(() => {
+	if (!tab) return;
+	loadNotebook();
+});
+
+function cleanup() {
+	abortController?.abort();
+	abortController = null;
+	rawContent = '';
+	if (container) {
+		container.innerHTML = '';
+	}
+}
+
+$effect(() => {
+	if (!tab) return;
+	const unregister = tabResources.register(tab.id, cleanup);
+	return unregister;
+});
+
+onDestroy(cleanup);
+
+async function loadNotebook() {
+	abortController?.abort();
+	abortController = new AbortController();
+	const { signal } = abortController;
+
+	loading = true;
+	error = null;
+
+	try {
+		const adapter = getAdapter(tab.source, tab.connectionId);
+		const data = await adapter.read(tab.path, undefined, undefined, signal);
+		rawContent = new TextDecoder().decode(data);
+		const notebook = JSON.parse(rawContent);
+
+		if (typeof notebook.nbformat !== 'number' || !Array.isArray(notebook.cells)) {
+			throw new Error('Not a valid Jupyter notebook');
+		}
+
+		cellCount = notebook.cells.length;
+		kernelName =
+			notebook.metadata?.kernelspec?.display_name ?? notebook.metadata?.language_info?.name ?? '';
+
+		await renderNotebook(notebook);
+	} catch (err) {
+		if (err instanceof DOMException && err.name === 'AbortError') return;
+		error = err instanceof Error ? err.message : String(err);
+	} finally {
+		loading = false;
+	}
+}
+
+async function renderNotebook(notebook: any) {
+	if (!container) return;
+
+	const [nb, { marked }, { AnsiUp }] = await Promise.all([
+		import('notebookjs').then((m) => m.default || m),
+		import('marked'),
+		import('ansi_up')
+	]);
+
+	// Configure notebookjs
+	nb.markdown = (md: string) => marked.parse(md, { async: false }) as string;
+	const ansiUp = new AnsiUp();
+	nb.ansi = (text: string) => ansiUp.ansi_to_html(text);
+	nb.highlighter = (code: string, lang: string) => {
+		// Return escaped code — Shiki highlighting is async so we apply it after render
+		return code.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	};
+
+	const parsed = nb.parse(notebook);
+	const rendered: HTMLElement = parsed.render();
+
+	container.innerHTML = '';
+	container.appendChild(rendered);
+
+	// Apply Shiki syntax highlighting to code cells asynchronously
+	const codeBlocks = container.querySelectorAll('.nb-input pre');
+	for (const block of codeBlocks) {
+		const code = block.textContent ?? '';
+		const lang =
+			notebook.metadata?.kernelspec?.language ?? notebook.metadata?.language_info?.name ?? 'python';
+		try {
+			const html = await highlightCode(code, lang);
+			block.outerHTML = html;
+		} catch {
+			// Shiki doesn't support this language — keep the escaped HTML
+		}
+	}
+}
+
+function toggleCode() {
+	showCode = !showCode;
+	if (container) {
+		const inputs = container.querySelectorAll('.nb-input');
+		for (const el of inputs) {
+			(el as HTMLElement).style.display = showCode ? '' : 'none';
+		}
+	}
+}
+
+async function copyRaw() {
+	try {
+		await navigator.clipboard.writeText(rawContent);
+		copied = true;
+		setTimeout(() => (copied = false), 2000);
+	} catch {
+		// clipboard not available
+	}
+}
+</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">
+			<!-- 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}>
+					{showCode ? t('notebook.hideCode') : t('notebook.showCode')}
+				</Button>
+				<Button variant="ghost" size="sm" class="h-7 px-2 text-xs" onclick={copyRaw}>
+					{copied ? t('code.copied') : t('code.copy')}
+				</Button>
+			</div>
+
+			<!-- 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">
+						<EllipsisVerticalIcon class="size-4" />
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content align="end" class="w-44">
+						<DropdownMenu.Item onclick={toggleCode}>
+							{showCode ? t('notebook.hideCode') : t('notebook.showCode')}
+						</DropdownMenu.Item>
+						<DropdownMenu.Item onclick={copyRaw}>
+							{copied ? t('code.copied') : t('code.copy')}
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</div>
+		</div>
+	</div>
+
+	<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>
+		{:else if error}
+			<div class="flex h-full items-center justify-center">
+				<p class="text-sm text-red-400">{error}</p>
+			</div>
+		{:else}
+			<div bind:this={container} class="notebook-content"></div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.notebook-content {
+		padding: 1rem;
+		max-width: 960px;
+		margin: 0 auto;
+	}
+
+	/* notebookjs cell styles — inherit app font (Cairo for Arabic, system sans for others) */
+	.notebook-content :global(.nb-notebook) {
+		font-family: inherit;
+	}
+
+	.notebook-content :global(.nb-cell) {
+		margin-bottom: 1rem;
+	}
+
+	/* Code input cells */
+	.notebook-content :global(.nb-input) {
+		border: 1px solid var(--border);
+		border-radius: 0.375rem;
+		overflow: hidden;
+		margin-bottom: 0.5rem;
+	}
+
+	.notebook-content :global(.nb-input pre) {
+		margin: 0;
+		padding: 0.75rem 1rem;
+		font-size: 0.8125rem;
+		line-height: 1.6;
+		overflow-x: auto;
+		background: var(--muted);
+	}
+
+	/* Shiki-rendered code blocks replace the notebookjs pre */
+	.notebook-content :global(.nb-input .shiki) {
+		margin: 0;
+		border-radius: 0;
+	}
+
+	.notebook-content :global(.nb-input .shiki pre) {
+		border: none;
+	}
+
+	/* Execution count */
+	.notebook-content :global(.nb-input::before) {
+		display: none;
+	}
+
+	/* Output cells */
+	.notebook-content :global(.nb-output) {
+		padding: 0.5rem 1rem;
+		border-left: 3px solid var(--border);
+		margin-bottom: 0.25rem;
+		overflow-x: auto;
+	}
+
+	.notebook-content :global(.nb-output pre) {
+		margin: 0;
+		font-size: 0.8125rem;
+		line-height: 1.5;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	/* Markdown cells */
+	.notebook-content :global(.nb-markdown-cell) {
+		padding: 0.5rem 0;
+		font-size: 0.9375rem;
+		line-height: 1.7;
+	}
+
+	.notebook-content :global(.nb-markdown-cell h1) {
+		font-size: 1.75rem;
+		font-weight: 700;
+		margin: 1rem 0 0.5rem;
+		border-bottom: 1px solid var(--border);
+		padding-bottom: 0.25rem;
+	}
+
+	.notebook-content :global(.nb-markdown-cell h2) {
+		font-size: 1.375rem;
+		font-weight: 600;
+		margin: 0.75rem 0 0.375rem;
+	}
+
+	.notebook-content :global(.nb-markdown-cell h3) {
+		font-size: 1.125rem;
+		font-weight: 600;
+		margin: 0.5rem 0 0.25rem;
+	}
+
+	.notebook-content :global(.nb-markdown-cell p) {
+		margin: 0.5rem 0;
+	}
+
+	.notebook-content :global(.nb-markdown-cell code) {
+		background: var(--muted);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+		font-size: 0.8125rem;
+	}
+
+	.notebook-content :global(.nb-markdown-cell pre code) {
+		background: none;
+		padding: 0;
+	}
+
+	.notebook-content :global(.nb-markdown-cell pre) {
+		background: var(--muted);
+		padding: 0.75rem 1rem;
+		border-radius: 0.375rem;
+		overflow-x: auto;
+		font-size: 0.8125rem;
+	}
+
+	.notebook-content :global(.nb-markdown-cell ul),
+	.notebook-content :global(.nb-markdown-cell ol) {
+		padding-left: 1.5rem;
+		margin: 0.5rem 0;
+	}
+
+	.notebook-content :global(.nb-markdown-cell li) {
+		margin: 0.25rem 0;
+	}
+
+	.notebook-content :global(.nb-markdown-cell a) {
+		color: var(--primary);
+		text-decoration: underline;
+	}
+
+	.notebook-content :global(.nb-markdown-cell blockquote) {
+		border-left: 3px solid var(--border);
+		padding-left: 1rem;
+		margin: 0.5rem 0;
+		color: var(--muted-foreground);
+	}
+
+	.notebook-content :global(.nb-markdown-cell table) {
+		border-collapse: collapse;
+		width: 100%;
+		margin: 0.5rem 0;
+	}
+
+	.notebook-content :global(.nb-markdown-cell th),
+	.notebook-content :global(.nb-markdown-cell td) {
+		border: 1px solid var(--border);
+		padding: 0.375rem 0.75rem;
+		text-align: left;
+		font-size: 0.875rem;
+	}
+
+	.notebook-content :global(.nb-markdown-cell th) {
+		background: var(--muted);
+		font-weight: 600;
+	}
+
+	/* Image outputs */
+	.notebook-content :global(.nb-output img) {
+		max-width: 100%;
+		height: auto;
+	}
+
+	/* HTML outputs */
+	.notebook-content :global(.nb-output .rendered_html) {
+		overflow-x: auto;
+	}
+
+	/* Error outputs */
+	.notebook-content :global(.nb-output .nb-stderr) {
+		color: #dc2626;
+		background: #fef2f2;
+		padding: 0.5rem;
+		border-radius: 0.25rem;
+		font-size: 0.8125rem;
+	}
+
+	:global(.dark) .notebook-content :global(.nb-output .nb-stderr) {
+		color: #fca5a5;
+		background: #450a0a;
+	}
+
+	/* Raw cell */
+	.notebook-content :global(.nb-raw-cell) {
+		padding: 0.5rem 1rem;
+		background: var(--muted);
+		border-radius: 0.375rem;
+		font-family: monospace;
+		font-size: 0.8125rem;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { Tab } from '../../types';
+type $$ComponentProps = {
+    tab: Tab;
+};
+declare const NotebookViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type NotebookViewer = ReturnType<typeof NotebookViewer>;
+export default NotebookViewer;