@walkthru-earth/objex 0.1.0 → 1.0.0

package/dist/components/layout/ConnectionDialog.svelte

@@ -18,6 +18,13 @@ import {
 } from '../ui/sheet/index.js';
 import { Switch } from '../ui/switch/index.js';
 import { t } from '../../i18n/index.svelte.js';
+import {
+	buildEndpointFromTemplate,
+	getProvider,
+	PROVIDER_IDS,
+	PROVIDERS,
+	type ProviderId
+} from '../../storage/providers.js';
 import { connections } from '../../stores/connections.svelte.js';
 import type { Connection, ConnectionConfig } from '../../types.js';
 import { describeParseResult, looksLikeUrl, parseStorageUrl } from '../../utils/storage-url.js';
@@ -26,24 +33,24 @@ interface Props {
 	open: boolean;
 	editConnection?: Connection | null;
 	onSaved?: () => void;
+	onClose?: () => void;
 }
 
-let { open = $bindable(false), editConnection = null, onSaved = () => {} }: Props = $props();
+let {
+	open = $bindable(false),
+	editConnection = null,
+	onSaved = () => {},
+	onClose = () => {}
+}: Props = $props();
 
-const providers: Array<{ value: Connection['provider']; label: string }> = [
-	{ value: 's3', label: 'S3' },
-	{ value: 'gcs', label: 'GCS' },
-	{ value: 'r2', label: 'R2' },
-	{ value: 'minio', label: 'MinIO' },
-	{ value: 'azure', label: 'Azure' },
-	{ value: 'storj', label: 'Storj' }
-];
+// ---------------------------------------------------------------------------
+// Form state
+// ---------------------------------------------------------------------------
 
-// Form state — initialized with defaults, then reset via $effect when editConnection changes
 let name = $state('');
-let provider = $state<Connection['provider']>('s3');
+let provider = $state<ProviderId>('s3');
 let bucket = $state('');
-let region = $state('us-west-2');
+let region = $state('us-east-1');
 let endpoint = $state('');
 let anonymous = $state(true);
 let accessKey = $state('');
@@ -53,11 +60,79 @@ let saving = $state(false);
 let testing = $state(false);
 let testResult = $state<'success' | 'error' | null>(null);
 let parsedHint = $state<string | null>(null);
+let endpointAutoFilled = $state(false);
+
+// ---------------------------------------------------------------------------
+// Derived state from provider registry
+// ---------------------------------------------------------------------------
 
+let providerDef = $derived(getProvider(provider));
 let isAzure = $derived(provider === 'azure');
-let isStorj = $derived(provider === 'storj');
-let needsRegion = $derived(provider !== 'azure' && provider !== 'r2' && provider !== 'storj');
-let bucketLabel = $derived(isAzure ? t('connection.container') : t('connection.bucket'));
+let hasRegions = $derived(providerDef.regions.length > 0);
+let needsRegion = $derived(providerDef.needsRegion);
+let bucketLabel = $derived(providerDef.bucketLabel ?? t('connection.bucket'));
+
+let isEditMode = $derived(editConnection !== null && editConnection !== undefined);
+let title = $derived(isEditMode ? t('connection.editTitle') : t('connection.newTitle'));
+let canSave = $derived(
+	name.trim() !== '' &&
+		bucket.trim() !== '' &&
+		(!needsRegion || region.trim() !== '') &&
+		(!providerDef.needsEndpoint || endpoint.trim() !== '')
+);
+
+// ---------------------------------------------------------------------------
+// Form helpers
+// ---------------------------------------------------------------------------
+
+function resetForm(conn: Connection | null | undefined) {
+	const def = conn ? getProvider(conn.provider) : PROVIDERS.s3;
+	name = conn?.name ?? '';
+	provider = (conn?.provider as ProviderId) ?? 's3';
+	bucket = conn?.bucket ?? '';
+	region = conn?.region ?? def.defaultRegion;
+	endpoint = conn?.endpoint ?? '';
+	anonymous = conn?.anonymous ?? true;
+	accessKey = '';
+	secretKey = '';
+	sasToken = '';
+	saving = false;
+	testing = false;
+	testResult = null;
+	parsedHint = null;
+	endpointAutoFilled = false;
+}
+
+function selectProvider(id: ProviderId) {
+	const prev = provider;
+	if (id === prev) return;
+
+	provider = id;
+	const def = getProvider(id);
+
+	// Clear auto-filled endpoint from previous provider
+	if (endpointAutoFilled) {
+		endpoint = '';
+		endpointAutoFilled = false;
+	}
+
+	// Set default region
+	region = def.defaultRegion;
+
+	// Auto-fill endpoint from template if available and not user-typed
+	if (!endpoint && def.endpointTemplate) {
+		endpoint = buildEndpointFromTemplate(id, def.defaultRegion);
+		endpointAutoFilled = true;
+	}
+}
+
+function selectRegion(regionCode: string) {
+	region = regionCode;
+	// Update endpoint if it was auto-filled from template
+	if (endpointAutoFilled && providerDef.endpointTemplate) {
+		endpoint = buildEndpointFromTemplate(provider, regionCode);
+	}
+}
 
 function handleBucketInput(value: string) {
 	bucket = value;
@@ -80,50 +155,13 @@ function applyParsedUrl() {
 	bucket = parsed.bucket;
 	if (parsed.endpoint) endpoint = parsed.endpoint;
 	if (parsed.region) region = parsed.region;
-	// Auto-detect provider from URL
-	const providerMap: Record<string, Connection['provider']> = {
-		s3: 's3',
-		gcs: 'gcs',
-		r2: 'r2',
-		minio: 'minio',
-		azure: 'azure',
-		storj: 'storj'
-	};
-	if (parsed.provider in providerMap) {
-		provider = providerMap[parsed.provider];
+	if (parsed.provider && parsed.provider !== 'unknown' && parsed.provider in PROVIDERS) {
+		provider = parsed.provider as ProviderId;
 	}
 	parsedHint = null;
 }
 
-let isEditMode = $derived(editConnection !== null && editConnection !== undefined);
-let title = $derived(isEditMode ? t('connection.editTitle') : t('connection.newTitle'));
-let canSave = $derived(
-	name.trim() !== '' && bucket.trim() !== '' && (!needsRegion || region.trim() !== '')
-);
-
-// Reset form fields when editConnection changes
-$effect(() => {
-	const conn = editConnection;
-	name = conn?.name ?? '';
-	provider = conn?.provider ?? 's3';
-	bucket = conn?.bucket ?? '';
-	region = conn?.region ?? 'us-west-2';
-	endpoint = conn?.endpoint ?? '';
-	anonymous = conn?.anonymous ?? true;
-	accessKey = '';
-	secretKey = '';
-	sasToken = '';
-	saving = false;
-	testing = false;
-	testResult = null;
-	parsedHint = null;
-});
-
-async function handleSave() {
-	if (!canSave) return;
-	saving = true;
-
-	// Auto-parse URL in bucket field before saving
+function buildConfig(fallbackName?: string): ConnectionConfig {
 	let finalBucket = bucket.trim();
 	let finalRegion = region.trim();
 	let finalEndpoint = endpoint.trim();
@@ -136,29 +174,56 @@ async function handleSave() {
 		if (parsed.endpoint) finalEndpoint = parsed.endpoint;
 		if (parsed.region) finalRegion = parsed.region;
 	}
+	const def = getProvider(provider);
+	return {
+		name: name.trim() || fallbackName || '',
+		provider,
+		bucket: finalBucket,
+		region: finalRegion,
+		endpoint: finalEndpoint,
+		anonymous,
+		authMethod:
+			def.authMethod === 'sas-token' && !anonymous ? 'sas-token' : !anonymous ? 'sigv4' : undefined,
+		...(anonymous
+			? {}
+			: def.authMethod === 'sas-token'
+				? { sas_token: sasToken }
+				: { access_key: accessKey, secret_key: secretKey })
+	};
+}
 
-	try {
-		const config: ConnectionConfig = {
-			name: name.trim(),
-			provider,
-			bucket: finalBucket,
-			region: finalRegion,
-			endpoint: finalEndpoint,
-			anonymous,
-			authMethod: isAzure && !anonymous ? 'sas-token' : !anonymous ? 'sigv4' : undefined,
-			...(anonymous
-				? {}
-				: isAzure
-					? { sas_token: sasToken }
-					: { access_key: accessKey, secret_key: secretKey })
-		};
+// ---------------------------------------------------------------------------
+// Effects
+// ---------------------------------------------------------------------------
 
+// Reset form when dialog opens
+$effect(() => {
+	if (open) {
+		resetForm(editConnection);
+	}
+});
+
+// Notify parent when dialog closes
+$effect(() => {
+	if (!open) {
+		onClose();
+	}
+});
+
+// ---------------------------------------------------------------------------
+// Actions
+// ---------------------------------------------------------------------------
+
+async function handleSave() {
+	if (!canSave) return;
+	saving = true;
+	try {
+		const config = buildConfig();
 		if (isEditMode && editConnection) {
 			await connections.update(editConnection.id, config);
 		} else {
 			await connections.save(config);
 		}
-
 		onSaved();
 		open = false;
 	} catch (err) {
@@ -171,37 +236,8 @@ async function handleSave() {
 async function handleTestConnection() {
 	testing = true;
 	testResult = null;
-
 	try {
-		// Auto-parse URL in bucket field before testing
-		let finalBucket = bucket.trim();
-		let finalRegion = region.trim();
-		let finalEndpoint = endpoint.trim();
-		if (looksLikeUrl(finalBucket)) {
-			const parsed = parseStorageUrl(finalBucket, {
-				region: finalRegion || undefined,
-				endpoint: finalEndpoint || undefined
-			});
-			finalBucket = parsed.bucket;
-			if (parsed.endpoint) finalEndpoint = parsed.endpoint;
-			if (parsed.region) finalRegion = parsed.region;
-		}
-
-		const config: ConnectionConfig = {
-			name: name.trim() || 'test',
-			provider,
-			bucket: finalBucket,
-			region: finalRegion,
-			endpoint: finalEndpoint,
-			anonymous,
-			authMethod: isAzure && !anonymous ? 'sas-token' : !anonymous ? 'sigv4' : undefined,
-			...(anonymous
-				? {}
-				: isAzure
-					? { sas_token: sasToken }
-					: { access_key: accessKey, secret_key: secretKey })
-		};
-
+		const config = buildConfig('test');
 		const ok = await connections.testWithConfig(config, editConnection?.id);
 		testResult = ok ? 'success' : 'error';
 	} catch {
@@ -210,10 +246,6 @@ async function handleTestConnection() {
 		testing = false;
 	}
 }
-
-function handleCancel() {
-	open = false;
-}
 </script>
 
 <Sheet bind:open>
@@ -248,25 +280,20 @@ function handleCancel() {
 			<!-- Provider -->
 			<fieldset class="flex flex-col gap-1.5">
 				<legend class="text-sm font-medium">{t('connection.provider')}</legend>
-				<div class="flex flex-wrap gap-2" role="radiogroup" aria-label="Cloud storage provider">
-					{#each providers as p (p.value)}
+				<div class="flex flex-wrap gap-1.5" role="radiogroup" aria-label="Cloud storage provider">
+					{#each PROVIDER_IDS as id (id)}
 						<Button
-							variant={provider === p.value ? 'default' : 'outline'}
+							variant={provider === id ? 'default' : 'outline'}
 							size="sm"
-							class="h-8 px-3 text-xs"
-							aria-pressed={provider === p.value}
-							onclick={() => {
-								provider = p.value;
-								if (p.value === 'storj' && !endpoint) {
-									endpoint = 'https://gateway.storjshare.io';
-									region = 'us1';
-								}
-							}}
+							class="h-7 px-2.5 text-xs"
+							aria-pressed={provider === id}
+							onclick={() => selectProvider(id)}
 						>
-							{p.label}
+							{PROVIDERS[id].label}
 						</Button>
 					{/each}
 				</div>
+				<p class="text-xs text-muted-foreground">{providerDef.description}</p>
 			</fieldset>
 
 			<!-- Bucket / Container -->
@@ -295,39 +322,60 @@ function handleCancel() {
 				</p>
 			</div>
 
-			<!-- Region (hidden for Azure and R2) -->
+			<!-- Region -->
 			{#if needsRegion}
 				<div class="flex flex-col gap-1.5">
 					<label for="conn-region" class="text-sm font-medium">
 						{t('connection.region')} <span class="text-destructive">*</span>
 					</label>
-					<Input
-						id="conn-region"
-						placeholder="us-west-2"
-						bind:value={region}
-					/>
+					{#if hasRegions}
+						<!-- Dropdown for providers with known regions -->
+						<select
+							id="conn-region"
+							class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+							value={region}
+							onchange={(e) => selectRegion((e.target as HTMLSelectElement).value)}
+						>
+							{#each providerDef.regions as r (r.code)}
+								<option value={r.code}>{r.label} ({r.code})</option>
+							{/each}
+						</select>
+					{:else}
+						<Input
+							id="conn-region"
+							placeholder={providerDef.defaultRegion}
+							bind:value={region}
+						/>
+					{/if}
 				</div>
 			{/if}
 
 			<!-- Endpoint -->
 			<div class="flex flex-col gap-1.5">
-				<label for="conn-endpoint" class="text-sm font-medium">{t('connection.endpoint')}{isAzure ? ' *' : ''}</label>
+				<label for="conn-endpoint" class="text-sm font-medium">
+					{t('connection.endpoint')}{providerDef.needsEndpoint ? ' *' : ''}
+				</label>
 				<Input
 					id="conn-endpoint"
-					placeholder={isAzure
-						? 'https://myaccount.blob.core.windows.net'
-						: isStorj
-							? 'https://gateway.storjshare.io'
-							: 'https://custom-endpoint.example.com'}
+					placeholder={providerDef.endpointPlaceholder}
 					bind:value={endpoint}
+					oninput={() => {
+						endpointAutoFilled = false;
+					}}
 				/>
-				<p class="text-xs text-muted-foreground">
-					{isAzure
-						? t('connection.azureEndpointHelper')
-						: isStorj
-							? t('connection.storjEndpointHelper')
-							: t('connection.endpointHelper')}
-				</p>
+				{#if providerDef.endpointTemplate && !providerDef.needsEndpoint}
+					<p class="text-xs text-muted-foreground">
+						{t('connection.endpointHelper')}
+					</p>
+				{:else if isAzure}
+					<p class="text-xs text-muted-foreground">
+						{t('connection.azureEndpointHelper')}
+					</p>
+				{:else}
+					<p class="text-xs text-muted-foreground">
+						{t('connection.endpointHelper')}
+					</p>
+				{/if}
 			</div>
 
 			<!-- Anonymous Access -->
@@ -417,7 +465,7 @@ function handleCancel() {
 			</Button>
 
 			<div class="flex min-w-0 flex-1 justify-end gap-2">
-				<Button variant="ghost" size="sm" onclick={handleCancel} disabled={saving}>
+				<Button variant="ghost" size="sm" onclick={() => (open = false)} disabled={saving}>
 					{t('connection.cancel')}
 				</Button>
 

package/dist/components/layout/ConnectionDialog.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     open: boolean;
     editConnection?: Connection | null;
     onSaved?: () => void;
+    onClose?: () => void;
 }
 declare const ConnectionDialog: import("svelte").Component<Props, {}, "open">;
 type ConnectionDialog = ReturnType<typeof ConnectionDialog>;

package/dist/components/layout/Sidebar.svelte

@@ -28,10 +28,12 @@ import type { Connection } from '../../types.js';
 import { type DetectedHost, detectHostBucket } from '../../utils/host-detection.js';
 import { parseStorageUrl } from '../../utils/storage-url.js';
 import { clearUrlState, syncUrlParam } from '../../utils/url-state.js';
+import AboutSheet from './AboutSheet.svelte';
 import ConnectionDialog from './ConnectionDialog.svelte';
 import LocaleToggle from './LocaleToggle.svelte';
 import ThemeToggle from './ThemeToggle.svelte';
 
+let aboutOpen = $state(false);
 let dialogOpen = $state(false);
 let editingConnection = $state<Connection | null>(null);
 let detectedHost = $state<DetectedHost | null>(null);
@@ -209,9 +211,17 @@ async function handleBrowseConnection(connection: Connection) {
 <TooltipProvider>
 	<div class="flex h-full w-12 flex-col items-center bg-sidebar py-2">
 		<!-- App icon -->
-		<div class="mb-2 flex size-8 items-center justify-center">
-			<DatabaseIcon class="size-5 text-sidebar-primary" />
-		</div>
+		<Tooltip>
+			<TooltipTrigger>
+				<button
+					class="mb-2 flex size-8 items-center justify-center rounded-lg transition-colors hover:bg-accent/50"
+					onclick={() => { aboutOpen = true; }}
+				>
+					<DatabaseIcon class="size-5 text-sidebar-primary" />
+				</button>
+			</TooltipTrigger>
+			<TooltipContent side="right">{t('about.title')}</TooltipContent>
+		</Tooltip>
 
 		<Separator class="mx-2 mb-2" />
 
@@ -296,6 +306,8 @@ async function handleBrowseConnection(connection: Connection) {
 	</div>
 </TooltipProvider>
 
+<AboutSheet bind:open={aboutOpen} />
+
 <ConnectionDialog
 	bind:open={dialogOpen}
 	editConnection={editingConnection}
@@ -309,6 +321,10 @@ async function handleBrowseConnection(connection: Connection) {
 				syncUrlParam(conn);
 			}
 		}
+		editingConnection = null;
 		handleAutoDetection();
 	}}
+	onClose={() => {
+		editingConnection = null;
+	}}
 />

package/dist/components/layout/TabBar.svelte

@@ -8,6 +8,7 @@ import * as ContextMenu from '../ui/context-menu/index.js';
 import { ScrollArea } from '../ui/scroll-area/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import { tabs } from '../../stores/tabs.svelte.js';
+import { copyToClipboard } from '../../utils/clipboard.js';
 import { buildHttpsUrl, buildStorageUrl } from '../../utils/url.js';
 
 let { leading }: { leading?: Snippet } = $props();
@@ -27,13 +28,9 @@ function handleClose(event: MouseEvent, id: string) {
 async function handleCopy(type: 'https' | 's3', tab: (typeof tabs.items)[0]) {
 	const url = type === 'https' ? buildHttpsUrl(tab) : buildStorageUrl(tab);
 	if (!url) return;
-	try {
-		await navigator.clipboard.writeText(url);
-		copiedType = `${type}-${tab.id}`;
-		setTimeout(() => (copiedType = null), 2000);
-	} catch {
-		// clipboard API may fail in some contexts
-	}
+	await copyToClipboard(url, (copied) => {
+		copiedType = copied ? `${type}-${tab.id}` : null;
+	});
 }
 </script>
 

package/dist/components/viewers/CodeViewer.svelte

@@ -8,6 +8,8 @@ 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 } from '../../utils/url.js';
 import { getUrlView, updateUrlView } from '../../utils/url-state.js';
@@ -153,12 +155,23 @@ const language = $derived(languageMap[ext] ?? 'Plain Text');
 /** File types that support native formatting */
 const canFormat = $derived(['.json', '.sql', '.css', '.html', '.xml'].includes(ext));
 
+// Auto-switch to STAC Browser when STAC JSON is detected (unless URL explicitly set #code)
+let stacAutoSwitched = false;
+$effect(() => {
+	if (isStacJson && !stacAutoSwitched && viewMode === 'code' && urlView !== 'code') {
+		stacAutoSwitched = true;
+		viewMode = 'stac-browser';
+		updateUrlView('stac-browser');
+	}
+});
+
 // Reset iframe view mode when tab changes (component reuse across code-type tabs)
 let prevTabId = '';
 $effect(() => {
 	const id = tab.id;
 	if (prevTabId && prevTabId !== id) {
 		viewMode = isHtml ? 'render' : 'code';
+		stacAutoSwitched = false;
 		updateUrlView('');
 	}
 	prevTabId = id;
@@ -195,8 +208,9 @@ async function loadCode() {
 		rawCode = new TextDecoder().decode(data);
 		html = await highlightCode(rawCode, lang);
 	} 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;
 	}
@@ -287,13 +301,7 @@ function setViewMode(mode: 'code' | 'render' | 'stac-browser' | 'kepler' | 'mapu
 }
 
 async function copyCode() {
-	try {
-		await navigator.clipboard.writeText(rawCode);
-		copied = true;
-		setTimeout(() => (copied = false), 2000);
-	} catch {
-		// clipboard not available
-	}
+	await copyToClipboard(rawCode, (v) => (copied = v));
 }
 </script>
 

package/dist/components/viewers/ImageViewer.svelte

@@ -9,24 +9,14 @@ 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 { getMimeType } from '../../file-icons/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 { buildHttpsUrl, canStreamDirectly } from '../../utils/url.js';
 
-const mimeMap: Record<string, string> = {
-	png: 'image/png',
-	jpg: 'image/jpeg',
-	jpeg: 'image/jpeg',
-	gif: 'image/gif',
-	webp: 'image/webp',
-	avif: 'image/avif',
-	svg: 'image/svg+xml',
-	bmp: 'image/bmp',
-	ico: 'image/x-icon'
-};
-
 let { tab }: { tab: Tab } = $props();
 
 let abortController: AbortController | null = null;
@@ -64,16 +54,16 @@ async function loadImage() {
 			// Authenticated S3 — download via storage adapter
 			const adapter = getAdapter(tab.source, tab.connectionId);
 			const data = await adapter.read(tab.path, undefined, undefined, signal);
-			const ext = tab.extension.toLowerCase();
 			const blob = new Blob([data as unknown as BlobPart], {
-				type: mimeMap[ext] || 'application/octet-stream'
+				type: getMimeType(tab.extension)
 			});
 			blobUrl = URL.createObjectURL(blob);
 			imgSrc = 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/MarkdownViewer.svelte

@@ -7,6 +7,8 @@ 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 {
@@ -114,8 +116,9 @@ async function loadMarkdown() {
 			html = processDirection(rendered, isRTL);
 		}
 	} 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;
 	}
@@ -124,24 +127,13 @@ async function loadMarkdown() {
 	if (!error) {
 		await tick();
 		await renderMermaidDiagrams();
-		wireCodeCopyButtons();
+		wireCopyButtons();
 	}
 }
 
-function wireCodeCopyButtons() {
+function wireCopyButtons() {
 	if (!contentEl) return;
-	for (const btn of contentEl.querySelectorAll('.code-copy-btn')) {
-		btn.addEventListener('click', async () => {
-			const code = decodeURIComponent((btn as HTMLElement).dataset.code ?? '');
-			try {
-				await navigator.clipboard.writeText(code);
-				btn.classList.add('copied');
-				setTimeout(() => btn.classList.remove('copied'), 2000);
-			} catch {
-				// clipboard not available
-			}
-		});
-	}
+	wireCodeCopyButtons(contentEl, '.code-copy-btn');
 }
 
 async function renderMermaidDiagrams() {