@walkthru-earth/objex 0.1.0 → 1.1.0

package/dist/components/viewers/MediaViewer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 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';
 
 let { tab }: { tab: Tab } = $props();
@@ -10,19 +12,6 @@ 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);
@@ -51,14 +40,14 @@ async function loadMedia() {
 			// 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 });
+			const blob = new Blob([data as unknown as BlobPart], { type: getMimeType(tab.extension) });
 			blobUrl = URL.createObjectURL(blob);
 			mediaSrc = blobUrl;
 		}
 	} catch (err) {
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		const msg = handleLoadError(err);
+		if (msg === null) return;
+		error = msg;
 	} finally {
 		loading = false;
 	}

package/dist/components/viewers/ModelViewer.svelte

@@ -11,6 +11,7 @@ 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,
@@ -52,8 +53,9 @@ async function loadModelFile() {
 		meshCount = info.meshCount;
 		vertexCount = info.vertexCount;
 	} catch (err) {
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		const msg = handleLoadError(err);
+		if (msg === null) return;
+		error = msg;
 	} finally {
 		loading = false;
 	}

package/dist/components/viewers/NotebookViewer.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
-import { onDestroy } from 'svelte';
+import type { BundledLanguage } from 'shiki';
+import { onDestroy, tick } 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';
@@ -8,7 +9,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 { highlightCode } from '../../utils/shiki';
+import { copyToClipboard, wireCodeCopyButtons } from '../../utils/clipboard.js';
+import { handleLoadError } from '../../utils/error.js';
+import { renderNotebook } from '../../utils/notebook';
+import { highlightCodeReversed } from '../../utils/shiki';
 
 let { tab }: { tab: Tab } = $props();
 
@@ -58,60 +62,58 @@ async function loadNotebook() {
 		rawContent = new TextDecoder().decode(data);
 		const notebook = JSON.parse(rawContent);
 
-		if (typeof notebook.nbformat !== 'number' || !Array.isArray(notebook.cells)) {
+		// Accept nbformat 2–5: v4+ has top-level `cells`, v2/v3 uses `worksheets`
+		if (
+			typeof notebook.nbformat !== 'number' ||
+			(!Array.isArray(notebook.cells) && !Array.isArray(notebook.worksheets))
+		) {
 			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);
+		await renderNotebookContent(notebook);
 	} catch (err) {
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		const msg = handleLoadError(err);
+		if (msg === null) return;
+		error = msg;
 	} finally {
 		loading = false;
 	}
 }
 
-async function renderNotebook(notebook: any) {
+async function renderNotebookContent(notebook: any) {
+	await tick();
 	if (!container) return;
 
-	const [nb, { marked }, { AnsiUp }] = await Promise.all([
-		import('notebookjs').then((m) => m.default || m),
-		import('marked'),
-		import('ansi_up')
-	]);
+	const [{ marked }, { AnsiUp }] = await Promise.all([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 { element, meta } = renderNotebook(notebook, {
+		markdown: (md: string) => marked.parse(md, { async: false }) as string,
+		ansi: (text: string) => ansiUp.ansi_to_html(text),
+		highlighter: (code: string) => code
+	});
 
-	const parsed = nb.parse(notebook);
-	const rendered: HTMLElement = parsed.render();
+	cellCount = meta.cellCount;
+	kernelName = meta.kernelName;
 
 	container.innerHTML = '';
-	container.appendChild(rendered);
+	container.appendChild(element);
 
-	// Apply Shiki syntax highlighting to code cells asynchronously
+	// Apply Shiki syntax highlighting + copy buttons to code cells
 	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;
+			const highlighted = await highlightCodeReversed(code, meta.language as BundledLanguage);
+			const copyBtn = `<button class="nb-copy-btn" data-code="${encodeURIComponent(code)}" title="Copy"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>`;
+			block.outerHTML = copyBtn + highlighted;
 		} catch {
 			// Shiki doesn't support this language — keep the escaped HTML
 		}
 	}
+
+	// Wire copy button click handlers
+	wireCodeCopyButtons(container, '.nb-copy-btn');
 }
 
 function toggleCode() {
@@ -125,13 +127,7 @@ function toggleCode() {
 }
 
 async function copyRaw() {
-	try {
-		await navigator.clipboard.writeText(rawContent);
-		copied = true;
-		setTimeout(() => (copied = false), 2000);
-	} catch {
-		// clipboard not available
-	}
+	await copyToClipboard(rawContent, (v) => (copied = v));
 }
 </script>
 
@@ -191,9 +187,8 @@ async function copyRaw() {
 			<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 bind:this={container} class="notebook-content" class:hidden={loading || !!error}></div>
 	</div>
 </div>
 
@@ -215,6 +210,7 @@ async function copyRaw() {
 
 	/* Code input cells */
 	.notebook-content :global(.nb-input) {
+		position: relative;
 		border: 1px solid var(--border);
 		border-radius: 0.375rem;
 		overflow: hidden;
@@ -386,4 +382,58 @@ async function copyRaw() {
 		font-family: monospace;
 		font-size: 0.8125rem;
 	}
+
+	/* Copy button on code cells */
+	.notebook-content :global(.nb-copy-btn) {
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 4px 6px;
+		border: none;
+		border-radius: 4px;
+		background: rgba(255, 255, 255, 0.1);
+		color: rgba(255, 255, 255, 0.6);
+		cursor: pointer;
+		font-size: 0.6875rem;
+		opacity: 0;
+		transition: opacity 0.15s;
+	}
+
+	.notebook-content :global(.nb-input:hover .nb-copy-btn) {
+		opacity: 1;
+	}
+
+	.notebook-content :global(.nb-copy-btn:hover) {
+		background: rgba(255, 255, 255, 0.2);
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	.notebook-content :global(.nb-copy-btn.copied) {
+		opacity: 1;
+		color: #4ade80;
+	}
+
+	.notebook-content :global(.nb-copy-btn.copied)::after {
+		content: '\2713';
+		margin-left: 2px;
+	}
+
+	/* Dark mode: reversed theme means light code bg */
+	:global(.dark) .notebook-content :global(.nb-copy-btn) {
+		background: rgba(0, 0, 0, 0.1);
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	:global(.dark) .notebook-content :global(.nb-copy-btn:hover) {
+		background: rgba(0, 0, 0, 0.2);
+		color: rgba(0, 0, 0, 0.8);
+	}
+
+	:global(.dark) .notebook-content :global(.nb-copy-btn.copied) {
+		color: #16a34a;
+	}
 </style>

package/dist/components/viewers/PdfViewer.svelte

@@ -14,6 +14,7 @@ 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';
 
@@ -73,10 +74,11 @@ async function loadPdf() {
 		totalPages = doc.numPages;
 		currentPage = 1;
 	} catch (err: any) {
-		// Ignore cancellation errors (destroyed loading task) and aborts
-		if (err instanceof DOMException && err.name === 'AbortError') return;
+		// Ignore PDF-specific cancellation errors (destroyed loading task)
 		if (err?.name === 'PasswordException' || err?.message?.includes('destroy')) return;
-		error = err instanceof Error ? err.message : String(err);
+		const msg = handleLoadError(err);
+		if (msg === null) return;
+		error = msg;
 	} finally {
 		loading = false;
 	}

package/dist/components/viewers/RawViewer.svelte

@@ -5,6 +5,7 @@ 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';
 
@@ -55,8 +56,9 @@ async function loadHexDump() {
 		truncated = fileSize > MAX_BYTES;
 		rows = generateHexDump(data);
 	} catch (err) {
-		if (err instanceof DOMException && err.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		const msg = handleLoadError(err);
+		if (msg === null) return;
+		error = msg;
 	} finally {
 		loading = false;
 	}

package/dist/components/viewers/TableGrid.svelte

@@ -15,6 +15,7 @@ import {
 	typeBadgeClass,
 	typeLabel
 } from '../../utils/column-types.js';
+import { jsonReplacerBigInt } from '../../utils/format.js';
 
 const INITIAL_ROWS = 100;
 const BATCH_SIZE = 100;
@@ -167,7 +168,7 @@ function copyRow() {
 	for (const [k, v] of Object.entries(ctxMenu.rowData)) {
 		if (!k.startsWith('__')) clean[k] = v;
 	}
-	copyToClipboard(JSON.stringify(clean, (_k, v) => (typeof v === 'bigint' ? v.toString() : v), 2));
+	copyToClipboard(JSON.stringify(clean, jsonReplacerBigInt, 2));
 }
 
 function copyColumn() {
@@ -195,7 +196,7 @@ function formatCell(value: any, category: TypeCategory): string {
 	}
 	if (typeof value === 'bigint') return value.toString();
 	if (typeof value === 'object') {
-		return JSON.stringify(value, (_k, v) => (typeof v === 'bigint' ? v.toString() : v));
+		return JSON.stringify(value, jsonReplacerBigInt);
 	}
 	return String(value);
 }