@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/viewers/ArchiveViewer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { Archive, ChevronRight, Download, File, Folder, Loader } from '@lucide/svelte';
+import { formatFileSize, handleLoadError, isAbortError } from '@walkthru-earth/objex-utils';
 import type { Entry } from '@zip.js/zip.js';
 import { onDestroy, untrack } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
@@ -28,11 +29,13 @@ import {
 	streamTarGzEntriesFromUrl,
 	streamZipEntriesFromUrl
 } from '../../utils/archive';
-import { formatFileSize } from '../../utils/format';
-import { buildHttpsUrlAsync } from '../../utils/url.js';
+import { buildHttpsUrlAsync } from '../../utils/signed-url.js';
+import { useIsWide } from '../../utils/media-query.svelte.js';
 
 let { tab }: { tab: Tab } = $props();
 
+const isWide = useIsWide();
+
 const MAX_ITEMS = 500;
 
 // ── State ──────────────────────────────────────────────────────────────
@@ -165,8 +168,8 @@ async function loadArchive() {
 			error = t('archive.unsupported');
 		}
 	} catch (err) {
-		if ((err as DOMException)?.name === 'AbortError') return;
-		error = err instanceof Error ? err.message : String(err);
+		if (isAbortError(err)) return;
+		error = handleLoadError(err);
 	} finally {
 		scanning = false;
 		if (initializing) initializing = false;
@@ -187,7 +190,7 @@ async function loadZip() {
 			loadMethod = 'range';
 			return;
 		} catch (err) {
-			if ((err as DOMException)?.name === 'AbortError') throw err;
+			if (isAbortError(err)) throw err;
 			entryList = [];
 			scanCount = 0;
 			zipEntryMap.clear();
@@ -218,7 +221,7 @@ async function loadTar() {
 			loadMethod = 'range';
 			return;
 		} catch (err) {
-			if ((err as DOMException)?.name === 'AbortError') throw err;
+			if (isAbortError(err)) throw err;
 			entryList = [];
 			scanCount = 0;
 			remoteUrl = '';
@@ -260,7 +263,7 @@ async function loadTarGz() {
 			loadMethod = 'full';
 			return;
 		} catch (err) {
-			if ((err as DOMException)?.name === 'AbortError') throw err;
+			if (isAbortError(err)) throw err;
 			// Fall through to full-buffer approach
 			entryList = [];
 			scanCount = 0;
@@ -312,7 +315,7 @@ const totalFiles = $derived(contents.files.length);
 	{#if selectedFile}
 		{@const fileName = selectedFile.filename.split('/').pop()}
 		<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('archive.fileDetails')}
 		</div>
@@ -367,10 +370,10 @@ const totalFiles = $derived(contents.files.length);
 
 <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">
 			<Archive class="h-4 w-4 shrink-0 text-amber-500" />
-			<span class="max-w-[140px] truncate text-sm font-medium text-zinc-700 sm:max-w-none dark:text-zinc-300">
+			<span class="max-w-[140px] truncate text-sm font-medium text-foreground sm:max-w-none">
 				{tab.name}
 			</span>
 			<Badge variant="outline" class="text-[10px]">{formatLabel}</Badge>
@@ -434,60 +437,118 @@ const totalFiles = $derived(contents.files.length);
 	<!-- Content area -->
 	{#if initializing}
 		<div class="flex flex-1 items-center justify-center gap-2">
-			<Loader class="h-5 w-5 animate-spin text-zinc-400" />
-			<span class="text-sm text-zinc-400">{t('archive.loading')}</span>
+			<Loader class="h-5 w-5 animate-spin text-muted-foreground" />
+			<span class="text-sm text-muted-foreground">{t('archive.loading')}</span>
 		</div>
 	{:else if error}
 		<div class="flex flex-1 items-center justify-center px-4">
-			<p class="text-sm text-red-400">{error}</p>
+			<p class="text-sm text-destructive">{error}</p>
 		</div>
 	{:else}
 		<!-- Column browser (resizable) -->
-		<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
-			<!-- Column 1: Current path entries -->
-			<ResizablePane defaultSize={35} minSize={20}>
-				<div class="flex h-full flex-col">
+		{#snippet archiveContents()}
+			<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('archive.contents')}
+					<span class="ms-1 normal-case tracking-normal">({(totalDirs + totalFiles).toLocaleString()})</span>
+				</div>
+				<div class="flex-1 overflow-auto">
+					{#if contents.directories.length === 0 && contents.files.length === 0 && !scanning}
+						<div class="p-4 text-center text-xs text-muted-foreground">
+							{t('archive.empty')}
+						</div>
+					{/if}
+
+					{#each contents.directories as dir, i}
+						{#if i < MAX_ITEMS}
+							{@const dirName = dir.split('/').pop()}
+							<button
+								class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+								class:bg-muted={selectedDir === dir}
+								onclick={() => selectDirectory(dir)}
+								ondblclick={() => navigateIntoDir(dir)}
+							>
+								<Folder class="size-3.5 shrink-0 text-amber-500/70" />
+								<span class="truncate font-medium">{dirName}</span>
+								<ChevronRight class="ms-auto size-3 shrink-0 text-muted-foreground" />
+							</button>
+						{:else if i === MAX_ITEMS}
+							<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
+								+{contents.directories.length - MAX_ITEMS} more
+							</div>
+						{/if}
+					{/each}
+
+					{#each contents.files as file, i}
+						{#if i < MAX_ITEMS}
+							{@const fileName = file.filename.split('/').pop()}
+							<button
+								class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+								class:bg-muted={selectedFile?.filename === file.filename}
+								onclick={() => selectFile(file)}
+							>
+								<File class="size-3.5 shrink-0 text-muted-foreground/70" />
+								<span class="truncate">{fileName}</span>
+								<span class="ms-auto shrink-0 text-[10px] tabular-nums text-muted-foreground">
+									{formatFileSize(file.uncompressedSize)}
+								</span>
+							</button>
+						{:else if i === MAX_ITEMS}
+							<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
+								+{contents.files.length - MAX_ITEMS} more
+							</div>
+						{/if}
+					{/each}
+
+					{#if scanning}
+						<div class="flex items-center gap-2 px-3 py-2 text-[10px] text-muted-foreground">
+							<Loader class="h-3 w-3 animate-spin" />
+							<span>{t('archive.scanningProgress', { count: scanCount.toLocaleString() })}</span>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/snippet}
+
+		{#snippet archiveSelectedDir()}
+			<div class="flex h-full flex-col">
+				{#if selectedDir}
+					{@const dirName = selectedDir.split('/').pop()}
 					<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('archive.contents')}
-						<span class="ms-1 normal-case tracking-normal">({(totalDirs + totalFiles).toLocaleString()})</span>
+						{dirName}
+						<span class="ms-1 normal-case tracking-normal">({(selectedDirContents.directories.length + selectedDirContents.files.length).toLocaleString()})</span>
 					</div>
 					<div class="flex-1 overflow-auto">
-						{#if contents.directories.length === 0 && contents.files.length === 0 && !scanning}
+						{#if selectedDirContents.directories.length === 0 && selectedDirContents.files.length === 0}
 							<div class="p-4 text-center text-xs text-muted-foreground">
 								{t('archive.empty')}
 							</div>
 						{/if}
 
-						{#each contents.directories as dir, i}
+						{#each selectedDirContents.directories as subDir, i}
 							{#if i < MAX_ITEMS}
-								{@const dirName = dir.split('/').pop()}
+								{@const subDirName = subDir.split('/').pop()}
 								<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={selectedDir === dir}
-									class:dark:bg-zinc-800={selectedDir === dir}
-									onclick={() => selectDirectory(dir)}
-									ondblclick={() => navigateIntoDir(dir)}
+									class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+									onclick={() => navigateIntoDir(subDir)}
 								>
 									<Folder class="size-3.5 shrink-0 text-amber-500/70" />
-									<span class="truncate font-medium">{dirName}</span>
+									<span class="truncate font-medium">{subDirName}</span>
 									<ChevronRight class="ms-auto size-3 shrink-0 text-muted-foreground" />
 								</button>
-							{:else if i === MAX_ITEMS}
-								<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
-									+{contents.directories.length - MAX_ITEMS} more
-								</div>
 							{/if}
 						{/each}
 
-						{#each contents.files as file, i}
+						{#each selectedDirContents.files as file, i}
 							{#if i < MAX_ITEMS}
 								{@const fileName = file.filename.split('/').pop()}
 								<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={selectedFile?.filename === file.filename}
-									class:dark:bg-zinc-800={selectedFile?.filename === file.filename}
+									class="flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted"
+									class:bg-muted={selectedFile?.filename === file.filename}
 									onclick={() => selectFile(file)}
 								>
 									<File class="size-3.5 shrink-0 text-muted-foreground/70" />
@@ -496,91 +557,57 @@ const totalFiles = $derived(contents.files.length);
 										{formatFileSize(file.uncompressedSize)}
 									</span>
 								</button>
-							{:else if i === MAX_ITEMS}
-								<div class="px-3 py-1.5 text-[10px] text-muted-foreground">
-									+{contents.files.length - MAX_ITEMS} more
-								</div>
 							{/if}
 						{/each}
-
-						{#if scanning}
-							<div class="flex items-center gap-2 px-3 py-2 text-[10px] text-muted-foreground">
-								<Loader class="h-3 w-3 animate-spin" />
-								<span>{t('archive.scanningProgress', { count: scanCount.toLocaleString() })}</span>
-							</div>
-						{/if}
 					</div>
-				</div>
-			</ResizablePane>
+				{:else}
+					<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
+						{t('archive.selectFolder')}
+					</div>
+				{/if}
+			</div>
+		{/snippet}
 
-			<ResizableHandle />
+		{#if isWide.value}
+			<ResizablePaneGroup direction="horizontal" class="min-h-0 flex-1">
+				<!-- Column 1: Current path entries -->
+				<ResizablePane defaultSize={35} minSize={20}>
+					{@render archiveContents()}
+				</ResizablePane>
 
-			<!-- Column 2: Selected directory contents -->
-			<ResizablePane defaultSize={35} minSize={20}>
-				<div class="flex h-full flex-col">
-					{#if selectedDir}
-						{@const dirName = selectedDir.split('/').pop()}
-						<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"
-						>
-							{dirName}
-							<span class="ms-1 normal-case tracking-normal">({(selectedDirContents.directories.length + selectedDirContents.files.length).toLocaleString()})</span>
-						</div>
-						<div class="flex-1 overflow-auto">
-							{#if selectedDirContents.directories.length === 0 && selectedDirContents.files.length === 0}
-								<div class="p-4 text-center text-xs text-muted-foreground">
-									{t('archive.empty')}
-								</div>
-							{/if}
+				<ResizableHandle />
 
-							{#each selectedDirContents.directories as subDir, i}
-								{#if i < MAX_ITEMS}
-									{@const subDirName = subDir.split('/').pop()}
-									<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"
-										onclick={() => navigateIntoDir(subDir)}
-									>
-										<Folder class="size-3.5 shrink-0 text-amber-500/70" />
-										<span class="truncate font-medium">{subDirName}</span>
-										<ChevronRight class="ms-auto size-3 shrink-0 text-muted-foreground" />
-									</button>
-								{/if}
-							{/each}
-
-							{#each selectedDirContents.files as file, i}
-								{#if i < MAX_ITEMS}
-									{@const fileName = file.filename.split('/').pop()}
-									<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={selectedFile?.filename === file.filename}
-										class:dark:bg-zinc-800={selectedFile?.filename === file.filename}
-										onclick={() => selectFile(file)}
-									>
-										<File class="size-3.5 shrink-0 text-muted-foreground/70" />
-										<span class="truncate">{fileName}</span>
-										<span class="ms-auto shrink-0 text-[10px] tabular-nums text-muted-foreground">
-											{formatFileSize(file.uncompressedSize)}
-										</span>
-									</button>
-								{/if}
-							{/each}
-						</div>
-					{:else}
-						<div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">
-							{t('archive.selectFolder')}
-						</div>
-					{/if}
-				</div>
-			</ResizablePane>
+				<!-- Column 2: Selected directory contents -->
+				<ResizablePane defaultSize={35} minSize={20}>
+					{@render archiveSelectedDir()}
+				</ResizablePane>
 
-			<ResizableHandle />
+				<ResizableHandle />
 
-			<!-- Column 3: File details -->
-			<ResizablePane defaultSize={30} minSize={15}>
-				<div class="flex h-full flex-col">
+				<!-- Column 3: File details -->
+				<ResizablePane defaultSize={30} minSize={15}>
+					<div class="flex h-full flex-col">
+						{@render fileDetails()}
+					</div>
+				</ResizablePane>
+			</ResizablePaneGroup>
+		{:else}
+			<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
+				<!-- Contents: fixed height list -->
+				<div class="max-h-52 shrink-0 border-b border-border">
+					{@render archiveContents()}
+				</div>
+				<!-- Selected dir: fixed height list (hidden when empty) -->
+				{#if selectedDir}
+					<div class="max-h-52 shrink-0 border-b border-border">
+						{@render archiveSelectedDir()}
+					</div>
+				{/if}
+				<!-- File details: grows to fill remaining space -->
+				<div class="flex flex-1 flex-col">
 					{@render fileDetails()}
 				</div>
-			</ResizablePane>
-		</ResizablePaneGroup>
+			</div>
+		{/if}
 	{/if}
 </div>

package/dist/components/viewers/CodeViewer.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
 import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
+import {
+	copyToClipboard,
+	handleLoadError,
+	isStacCatalog,
+	isStacCollection,
+	isStacItem
+} from '@walkthru-earth/objex-utils';
 import { onDestroy } from 'svelte';
 import { Badge } from '../ui/badge/index.js';
 import { Button } from '../ui/button/index.js';
@@ -8,13 +15,13 @@ 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 { copyToClipboard } from '../../utils/clipboard.js';
-import { handleLoadError } from '../../utils/error.js';
 import { extensionToShikiLang, highlightCode } from '../../utils/shiki';
-import { buildHttpsUrl, buildHttpsUrlAsync, canStreamDirectly } from '../../utils/url.js';
-import { getUrlView, updateUrlView } from '../../utils/url-state.js';
+import { buildHttpsUrl, canStreamDirectly } from '../../utils/signed-url.js';
+import { resolveSignedTabUrl } from '../../utils/signed-url-effect.js';
+import { getUrlView, pickViewMode, updateUrlView } from '../../utils/url-state.js';
 import { openZarrTab } from '../../utils/zarr-tab.js';
-import { isStacCatalog, isStacCollection, isStacItem } from '../../utils/stac.js';
+import ViewerHeader from './ViewerHeader.svelte';
+import ViewerStatus from './ViewerStatus.svelte';
 
 interface CodeActions {
 	toggleFormat: () => Promise<void>;
@@ -44,20 +51,20 @@ let error = $state<string | null>(null);
 let copied = $state(false);
 let formatted = $state(false);
 const urlView = getUrlView();
-function getInitialViewMode():
-	| 'code'
-	| 'render'
-	| 'stac-browser'
-	| 'kepler'
-	| 'maputnik'
-	| 'marimo' {
-	if (urlView === 'stac-browser') return 'stac-browser';
-	if (urlView === 'kepler') return 'kepler';
-	if (urlView === 'maputnik') return 'maputnik';
-	if (urlView === 'marimo') return 'marimo';
-	if (urlView === 'code') return 'code';
-	if (tab.extension.toLowerCase() === 'html') return 'render';
-	return 'code';
+type CodeViewMode = 'code' | 'render' | 'stac-browser' | 'kepler' | 'maputnik' | 'marimo';
+const CODE_VIEW_MODES = [
+	'code',
+	'render',
+	'stac-browser',
+	'kepler',
+	'maputnik',
+	'marimo'
+] as const satisfies readonly CodeViewMode[];
+function getInitialViewMode(): CodeViewMode {
+	const explicit = pickViewMode<CodeViewMode>(CODE_VIEW_MODES, 'code');
+	if (explicit !== 'code' || urlView === 'code') return explicit;
+	// No (or unknown) hash: default to render for HTML, code otherwise.
+	return tab.extension.toLowerCase() === 'html' ? 'render' : 'code';
 }
 let viewMode = $state(getInitialViewMode());
 
@@ -119,17 +126,10 @@ const stacBadgeKey = $derived<Record<string, string>>({
 // must wait for the presign so the iframe never loads a bare `s3://` href.
 let styleUrl = $state('');
 $effect(() => {
-	const id = tab.id;
 	styleUrl = canStreamDirectly(tab) ? buildHttpsUrl(tab) : '';
-	let cancelled = false;
-	(async () => {
-		const url = await buildHttpsUrlAsync(tab);
-		if (cancelled || id !== tab.id) return;
-		styleUrl = url;
-	})();
-	return () => {
-		cancelled = true;
-	};
+	return resolveSignedTabUrl(tab, (u) => {
+		styleUrl = u;
+	});
 });
 const stacBrowserSrc = $derived(
 	`https://radiantearth.github.io/stac-browser/#/external/${styleUrl}`
@@ -207,12 +207,17 @@ $effect(() => {
 	};
 });
 
-// Auto-switch to STAC Browser when STAC JSON is detected (unless URL explicitly set #code).
+// Auto-switch to STAC Browser when STAC JSON is detected and the user did NOT
+// request a specific view via the URL hash. Any explicit hash (#map, #stac-map,
+// #stac-browser, #code, …) MUST be honored, because while ViewerRouter's async
+// detectStac is pending it falls back to plain CodeViewer for .json tabs;
+// rewriting the hash here would race the eventual StacTabViewer mount and
+// clobber the shared link the user opened.
 // Skipped when nested in StacTabViewer since the outer wrapper owns the view toggle.
 let stacAutoSwitched = false;
 $effect(() => {
 	if (nested) return;
-	if (isStacJson && !stacAutoSwitched && viewMode === 'code' && urlView !== 'code') {
+	if (isStacJson && !stacAutoSwitched && viewMode === 'code' && !urlView) {
 		stacAutoSwitched = true;
 		viewMode = 'stac-browser';
 		updateUrlView('stac-browser');
@@ -349,7 +354,7 @@ async function toggleFormat() {
 	formatted = true;
 }
 
-function setViewMode(mode: 'code' | 'render' | 'stac-browser' | 'kepler' | 'maputnik' | 'marimo') {
+function setViewMode(mode: CodeViewMode) {
 	viewMode = viewMode === mode ? (isHtml ? 'render' : 'code') : mode;
 	updateUrlView(viewMode === 'render' ? '' : viewMode);
 }
@@ -361,13 +366,9 @@ async function copyCode() {
 
 <div class="flex h-full flex-col">
 	{#if !nested}
-	<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">{language}</Badge>
-
-		<div class="ms-auto flex items-center gap-1 sm:gap-2">
+	<ViewerHeader {tab}>
+		{#snippet badge()}<Badge variant="secondary">{language}</Badge>{/snippet}
+		{#snippet actions()}
 			{#if jsonKind === 'maplibre-style'}
 				<Badge variant="outline" class="hidden border-blue-200 text-blue-600 sm:inline-flex dark:border-blue-800 dark:text-blue-300">
 					{t('code.maplibreStyle')}
@@ -473,7 +474,7 @@ async function copyCode() {
 			<!-- 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-44">
@@ -530,8 +531,8 @@ async function copyCode() {
 					</DropdownMenu.Content>
 				</DropdownMenu.Root>
 			</div>
-		</div>
-	</div>
+		{/snippet}
+	</ViewerHeader>
 	{/if}
 
 	{#if viewMode === 'stac-browser' && styleUrl}
@@ -587,13 +588,9 @@ async function copyCode() {
 			class:word-wrap={wordWrap}
 		>
 			{#if loading}
-				<div class="flex h-full items-center justify-center">
-					<p class="text-sm text-zinc-400">{t('code.loading')}</p>
-				</div>
+				<ViewerStatus kind="loading" message={t('code.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}
 				{@html html}
 			{/if}

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

@@ -12,6 +12,6 @@ type $$ComponentProps = {
     wordWrap?: boolean;
     actions?: CodeActions | null;
 };
-declare const CodeViewer: import("svelte").Component<$$ComponentProps, {}, "wordWrap" | "actions">;
+declare const CodeViewer: import("svelte").Component<$$ComponentProps, {}, "actions" | "wordWrap">;
 type CodeViewer = ReturnType<typeof CodeViewer>;
 export default CodeViewer;