@selvajs/ui 6.0.0-beta.8 → 6.0.0

package/dist/utils/color.js

@@ -1,38 +1,35 @@
-// Helper to convert hex to OKLCH
+// Hex → OKLCH. A non-null input that isn't a 6-digit hex comes back unchanged, so
+// callers can pass through CSS colors this function doesn't understand; null gives ''.
 export const hexToOklch = (hex) => {
     if (!hex)
         return '';
-    // Normalize hex (remove # if present)
     const normalized = hex.replace(/^#/, '');
-    // If it's not a valid hex color, return as-is
     if (!/^[0-9A-Fa-f]{6}$/.test(normalized)) {
         return hex;
     }
-    // Parse hex to RGB
     const r = parseInt(normalized.slice(0, 2), 16) / 255;
     const g = parseInt(normalized.slice(2, 4), 16) / 255;
     const b = parseInt(normalized.slice(4, 6), 16) / 255;
-    // Convert RGB to linear RGB
+    // sRGB transfer function, inverted: gamma-encoded channel → linear light.
     const toLinear = (c) => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
     const lr = toLinear(r);
     const lg = toLinear(g);
     const lb = toLinear(b);
-    // Convert linear RGB to XYZ
+    // Linear sRGB → CIE XYZ (D65 white point).
     const x = lr * 0.4124564 + lg * 0.3575761 + lb * 0.1804375;
     const y = lr * 0.2126729 + lg * 0.7151522 + lb * 0.072175;
     const z = lr * 0.0193339 + lg * 0.119192 + lb * 0.9503041;
-    // Convert XYZ to OKLab
+    // XYZ → OKLab: the M1 cone-response matrix, cube root, then the M2 matrix.
     const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
     const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
     const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z);
     const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
     const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
     const b_lab = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
-    // Convert to LCH
+    // OKLab → OKLCH: chroma and hue as polar coordinates of (a, b).
     const C = Math.sqrt(a * a + b_lab * b_lab);
     let H = (Math.atan2(b_lab, a) * 180) / Math.PI;
     if (H < 0)
         H += 360;
-    // Format as OKLCH (round to reasonable precision)
     return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
 };

package/dist/utils/debounce.d.ts

@@ -1,14 +1,4 @@
-/**
- * Debounce utility - delays function execution until after a specified wait time
- * has elapsed since the last time it was invoked.
- *
- * Use for text inputs, search boxes, etc. where you want to wait for the user
- * to finish typing before executing.
- *
- * @param func The function to debounce
- * @param wait The delay in milliseconds
- * @returns A debounced version of the function with a cancel method
- */
+/** Runs `func` once `wait` ms have passed with no further calls. `cancel()` drops a pending call. */
 export declare function debounce<T extends (...args: any[]) => any>(func: T, wait: number): ((...args: Parameters<T>) => void) & {
     cancel: () => void;
 };

package/dist/utils/debounce.js

@@ -1,14 +1,4 @@
-/**
- * Debounce utility - delays function execution until after a specified wait time
- * has elapsed since the last time it was invoked.
- *
- * Use for text inputs, search boxes, etc. where you want to wait for the user
- * to finish typing before executing.
- *
- * @param func The function to debounce
- * @param wait The delay in milliseconds
- * @returns A debounced version of the function with a cancel method
- */
+/** Runs `func` once `wait` ms have passed with no further calls. `cancel()` drops a pending call. */
 export function debounce(func, wait) {
     let timeout = null;
     function debounced(...args) {

package/dist/utils/loadScript.d.ts

@@ -1,11 +1,6 @@
 /**
- * Load an external script from a CDN with automatic deduplication.
- * All calls to load the same script will share a single promise,
- * preventing duplicate script tags and race conditions.
- *
- * @param src The script URL
- * @param options Script attributes (crossOrigin, async, etc.)
- * @returns Promise that resolves when script is loaded
+ * Appends a `<script>` for `src` and resolves on load. Concurrent calls for the same URL share
+ * one promise, so a script never gets a second tag. A failed load is evicted so a retry can run.
  */
 export declare function loadScript(src: string, options?: {
     crossOrigin?: string;

package/dist/utils/loadScript.js

@@ -1,12 +1,7 @@
 const scriptLoaders = new Map();
 /**
- * Load an external script from a CDN with automatic deduplication.
- * All calls to load the same script will share a single promise,
- * preventing duplicate script tags and race conditions.
- *
- * @param src The script URL
- * @param options Script attributes (crossOrigin, async, etc.)
- * @returns Promise that resolves when script is loaded
+ * Appends a `<script>` for `src` and resolves on load. Concurrent calls for the same URL share
+ * one promise, so a script never gets a second tag. A failed load is evicted so a retry can run.
  */
 export function loadScript(src, options) {
     if (scriptLoaders.has(src)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.0.0-beta.8",
+  "version": "6.0.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -57,12 +57,12 @@
     "@sveltejs/kit": "^2",
     "bits-ui": "^2.18.0",
     "svelte": "^5",
-    "tailwind-variants": "^3.3.0",
+    "tailwind-variants": "^3.3.1",
     "three": "^0.185.1",
-    "@selvajs/compute": "^4.0.0-beta.8",
-    "@selvajs/schemas": "^5.0.0-beta.3",
-    "@selvajs/solve": "^1.0.0-beta.10",
-    "@selvajs/visualization": "^1.0.0-beta.4"
+    "@selvajs/schemas": "^5.0.0",
+    "@selvajs/compute": "^4.0.0",
+    "@selvajs/solve": "^1.0.0",
+    "@selvajs/visualization": "^1.0.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -72,7 +72,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.27.0",
+    "@lucide/svelte": "^1.30.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
@@ -81,20 +81,20 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@internationalized/date": "^3.12.1",
-    "@sveltejs/kit": "2.70.1",
+    "@internationalized/date": "^3.12.3",
+    "@sveltejs/kit": "2.70.2",
     "@sveltejs/vite-plugin-svelte": "^7.2.0",
-    "@types/three": "^0.185.1",
+    "@types/three": "^0.185.4",
     "bits-ui": "^2.18.0",
     "rimraf": "^6.0.1",
     "svelte": "5.56.8",
-    "tailwind-variants": "^3.3.0",
+    "tailwind-variants": "^3.3.1",
     "vitest": "^4.1.10",
-    "@selvajs/compute": "4.0.0-beta.8",
-    "@selvajs/schemas": "5.0.0-beta.3",
-    "@selvajs/config": "0.0.3",
-    "@selvajs/solve": "1.0.0-beta.10",
-    "@selvajs/visualization": "1.0.0-beta.4"
+    "@selvajs/compute": "4.0.0",
+    "@selvajs/config": "0.0.4",
+    "@selvajs/schemas": "5.0.0",
+    "@selvajs/visualization": "1.0.0",
+    "@selvajs/solve": "1.0.0"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/components/compute/AppLayout.svelte

@@ -38,9 +38,7 @@
 		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
 		presetLabels?: Partial<PresetLabels>;
 		viewerConfig?: ViewerConfig;
-		/** Branding logo URL shown as a watermark in the viewer's bottom-right corner. */
 		logoUrl?: string;
-		/** Hands the live three.js viewer to the host. See `Viewer.svelte`. */
 		onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
 	}
 
@@ -79,7 +77,7 @@
 	const hasLeftPanel = $derived(leftTabs.length > 0);
 	const hasRightPanel = $derived(rightTabs.length > 0);
 	const hasSidebar = $derived(hasViewer || hasRightPanel);
-	// Two-panel mode: left + right, no viewer — both panels grow to fill full width
+	// Left + right, no viewer — both panes grow to fill the full width.
 	const isTwoPanelMode = $derived(!hasViewer && hasLeftPanel && hasRightPanel);
 
 	let isMobile = $state(false);
@@ -298,7 +296,7 @@
 		</div>
 	{:else}
 		<div class="min-h-0 flex h-full flex-1">
-			<!-- Left collapsed strip (outside PaneGroup so it has fixed width) -->
+			<!-- Outside PaneGroup so the strip keeps a fixed width. -->
 			{#if leftCollapsed && hasSidebar && hasLeftPanel}
 				<CollapsedPanelStrip
 					side="left"
@@ -317,7 +315,6 @@
 				autoSaveId="selva-layout-{layoutKey}"
 				class="min-h-0 flex-1"
 			>
-				<!-- Left pane -->
 				{#if hasLeftPanel}
 					<Resizable.Pane
 						bind:this={leftPaneRef}
@@ -349,7 +346,6 @@
 					/>
 				{/if}
 
-				<!-- Viewer pane -->
 				{#if hasViewer}
 					<Resizable.Pane order={2} minSize={20} class="min-h-0 mx-1 flex flex-col">
 						<Viewer
@@ -365,7 +361,6 @@
 					</Resizable.Pane>
 				{/if}
 
-				<!-- Right pane -->
 				{#if hasRightPanel}
 					<Resizable.Handle
 						withHandle
@@ -398,7 +393,6 @@
 				{/if}
 			</Resizable.PaneGroup>
 
-			<!-- Right collapsed strip -->
 			{#if rightCollapsed && hasRightPanel}
 				<CollapsedPanelStrip
 					side="right"

package/src/lib/components/compute/ComputeApp.svelte

@@ -27,7 +27,7 @@
 		onSolve: SolveFn;
 		definitionKey?: string;
 		title?: string;
-		/** Branding logo URL shown as a watermark in the viewer's bottom-right corner. Hidden when unset. */
+		/** Watermark shown in the viewer's bottom-right corner. */
 		logo?: string;
 		isEmbedded?: boolean;
 		primaryColor?: string;
@@ -41,55 +41,42 @@
 		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
 		/** Partial overrides for the preset-manager UI strings (e.g. for localization). */
 		presetLabels?: Partial<PresetLabels>;
-		/** Name shown in the footer copyright line. Defaults to the brand name ("Selva"). */
+		/** Name in the footer copyright line. Defaults to the brand name ("Selva"). */
 		copyrightName?: string;
 		/** Fully overrides the footer copyright line. `{name}` and `{year}` are substituted. */
 		footerText?: string;
 		/**
-		 * How long one solve may take before the client aborts it (ms). Required: pass
-		 * the same value the server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), so the client
-		 * doesn't abort a solve that would have finished.
+		 * How long one solve may take before the client aborts it (ms). Pass the same value the
+		 * server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), or the client aborts solves that would
+		 * have finished.
 		 */
 		solveDeadlineMs: number;
 		footerComponent?: any;
 		footerComponentProps?: () => Record<string, unknown>;
 		footerItemId?: string;
 		footerItemPriority?: number;
+		// `onReady` fires once, so the result and session are getters rather than snapshots.
 		onReady?: (api: {
 			loadValues: (values: Record<string, unknown>) => void;
-			/**
-			 * The last result reported to the session — the one the viewer is showing, carrying
-			 * `source`/`values` even when a memo hit served it. Null before the first solve.
-			 * A getter, not a snapshot: `onReady` fires once.
-			 */
+			/** What the viewer is showing — carries `source`/`values` even on a memo hit. Null before the first solve. */
 			getLastResult: () => RetainedSolveResult | null;
 			/**
-			 * The live solve session, for hosts driving solves from their own state —
-			 * `setValue`/`solve` to push inputs, `subscribe` to react to results.
-			 *
-			 * A getter for the same reason as `getLastResult`. Values written here go through the
+			 * For hosts driving solves from their own state. Values written here go through the
 			 * same throttle and memo as the UI's, so it's safe to call at interaction rate.
 			 */
 			getSession: () => SolveSession;
 		}) => void;
-		/**
-		 * Hands the live three.js viewer to the host once it mounts, for apps drawing their own
-		 * content alongside solve results. See `Viewer.svelte` for the contract.
-		 */
+		/** Hands the live three.js viewer to the host once it mounts. See `Viewer.svelte` for the contract. */
 		onViewerReady?: (viewer: ThreeViewer) => void | (() => void);
 		headerRight?: Snippet;
 		// Replaces the built-in header; takes precedence over `headerRight`.
 		header?: Snippet;
 		// Scopes sessionStorage for external-input values; falls back to definitionKey then schema.id.
 		externalScopeKey?: string;
-		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, value, onValueChange }.
+		// Renders client-sourced inputs with presentation === 'slot'.
 		clientSlot?: ClientSlot;
-		/**
-		 * UI language for the app's own chrome (viewer, panels, status text).
-		 * Provided once here and read by every descendant via locale context.
-		 * Defaults to English when unset. Does not translate schema-authored labels
-		 * or Grasshopper-sourced names/metadata.
-		 */
+		// Language for the app's own chrome, English when unset. Does not translate
+		// schema-authored labels or Grasshopper-sourced names/metadata.
 		lang?: Locale;
 	}
 
@@ -124,33 +111,30 @@
 		lang
 	}: Props = $props();
 
-	// Make the host's client-input slot available to InputControl deep in the tree.
+	// Reaches InputControl deep in the tree.
 	// svelte-ignore state_referenced_locally
 	setClientSlot(clientSlot);
 
-	// Provide the UI locale once for the whole app subtree (viewer, panels, status
-	// text). Resolution: explicit `lang` → any host-provided locale → English. The
-	// getter is re-read reactively, so switching `lang` updates the chrome live.
+	// Resolution: explicit `lang` → host-provided locale → English. Passed as a getter so
+	// switching `lang` updates the chrome live.
 	const hostLocale = getLocaleContext();
 	setLocaleContext(() => lang ?? hostLocale.locale);
 	const t = $derived(getLocaleContext().messages);
 
 	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
 
-	// Solve Session owns the value/lifecycle state machine; the request/response driver
-	// gives it its transport (Rhino.Compute over HTTP via onSolve, throttled). The driver
-	// reads the reporter lazily so it can capture the session it's wired into.
+	// The session owns the value/lifecycle state machine; the driver is its transport. The
+	// session is passed as a getter because the two reference each other.
 	// svelte-ignore state_referenced_locally
 	const driver = createRequestResponseDriver(onSolve, () => session, {
 		solveDeadlineMs,
-		// The driver's result memo caches whole solve results, meshes included — and the viewer
-		// disposes what it renders on the next scene update. `@selvajs/solve` keeps meshes opaque,
-		// so the three.js clone/dispose rules are injected from the renderer that owns them
-		// (audit C1). Without this a memo hit serves an already-disposed mesh.
+		// The driver's memo caches whole solve results, meshes included, and the viewer disposes
+		// what it renders on the next scene update. `@selvajs/solve` keeps meshes opaque, so the
+		// three.js clone/dispose rules come from the renderer that owns them. Without this, a memo
+		// hit serves an already-disposed mesh.
 		meshPolicy,
-		// `session.isSolving` forwards to the driver, which the session can't observe on its
-		// own — republish so the spinner and disabled states track it. Deferred into a
-		// callback, so it reads `session` after initialization rather than during it.
+		// `isSolving` lives on the driver, which the session can't observe — republish so the
+		// spinner and disabled states track it.
 		onChange: () => session.notify()
 	});
 	// svelte-ignore state_referenced_locally
@@ -201,10 +185,8 @@
 		session.solve();
 	}
 
-	// Read static props without creating reactive dependencies (registration is fixed at
-	// mount). footerComponentProps is intentionally read live — it's a getter the renderer
-	// calls every render to keep the footer in sync. The composable no-ops when component
-	// is absent, so the hook itself stays unconditional.
+	// Registration is fixed at mount, so the static props are untracked. `footerComponentProps`
+	// stays live — the renderer calls it every render to keep the footer in sync.
 	useFooterItem({
 		id: untrack(() => footerItemId),
 		component: untrack(() => footerComponent),

package/src/lib/components/compute/ParameterPresetManager.svelte

@@ -24,7 +24,7 @@
 		onSaveState?: (state: ParameterPreset) => void | Promise<void>;
 		/** When set, the Load dialog lists these states instead of showing a file input. */
 		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
-		/** Partial overrides for UI strings (e.g. for localization). */
+		/** Overrides merged over `DEFAULT_PRESET_LABELS`. */
 		labels?: Partial<PresetLabels>;
 	}
 
@@ -42,21 +42,18 @@
 
 	const t = $derived({ ...DEFAULT_PRESET_LABELS, ...labels });
 
-	// Save dialog state
 	let showExportDialog = $state(false);
 	let exportName = $state('');
 	let exportDescription = $state('');
 	let exportAuthor = $state('');
 	let exportTags = $state('');
 
-	// Import/validation state
 	let showValidationDialog = $state(false);
 	let showLoadDialog = $state(false);
 	let loadResult = $state<PresetLoadResult | null>(null);
 	let loadingPresetName = $state('');
 	let fileInputRef = $state<HTMLInputElement | null>(null);
 
-	// Listed states (when onListStates is provided)
 	let listedStates = $state<ParameterPreset[]>([]);
 	let isLoadingList = $state(false);
 	let listError = $state('');
@@ -90,8 +87,8 @@
 		showExportDialog = false;
 	}
 
-	// Load a preset in one pass, then either apply it directly (no issues) or open the
-	// validation dialog (any errors or warnings). Shared by every load path.
+	// Shared by every load path: applies clean presets directly, routes any errors or
+	// warnings through the validation dialog.
 	function tryLoad(preset: ParameterPreset) {
 		const result = loadPreset(preset, schema);
 		if (result.isValid) {
@@ -114,7 +111,7 @@
 			alert(t.loadImportError + (error as Error).message);
 		}
 
-		// Reset input
+		// Reset so re-picking the same file fires `change` again.
 		input.value = '';
 	}
 
@@ -298,7 +295,6 @@
 
 		{#if loadResult}
 			<div class="gap-4 py-4 grid">
-				<!-- Summary Alert -->
 				{#if loadResult.isValid}
 					<Card.Root class="p-4 border-success/30 bg-success/5">
 						<div class="gap-3 flex items-start">
@@ -341,7 +337,6 @@
 					</Card.Root>
 				{/if}
 
-				<!-- Issues List -->
 				{#if !loadResult.isValid}
 					<div class="space-y-2">
 						<h4 class="text-sm font-medium">{t.validationIssuesHeading}</h4>

package/src/lib/components/layout/AppShell.svelte

@@ -4,7 +4,6 @@
 	import PageFooter from './PageFooter.svelte';
 
 	interface AppShellProps {
-		// Header
 		showHeader?: boolean;
 		homeUrl?: string;
 		title?: string | null;
@@ -17,21 +16,19 @@
 		subnav?: Snippet;
 		headerClass?: string;
 		/**
-		 * Bring-your-own header. When provided, this renders inside the sticky
-		 * header bar instead of the built-in PageHeader. The bar keeps the
+		 * Replaces the built-in PageHeader inside the sticky header bar. The bar keeps the
 		 * standard `--header-h` height so the fixed-mode layout math is unaffected.
 		 */
 		header?: Snippet;
 
-		// Body layout
-		// 'fixed'  — full viewport, header + body + footer; body owns its own scroll. For app-like pages (builder, preview, library/[guid]).
-		// 'scroll' — sticky header, body fills `100vh - --header-h` and scrolls. For dashboard-style pages.
+		// 'fixed'  — viewport-locked, no page scroll; body owns its own scroll. For app-like
+		//            pages (builder, preview, library/[guid]).
+		// 'scroll' — normal page flow, footer sticks to the bottom. For dashboard-style pages.
 		mode?: 'fixed' | 'scroll';
 
-		// Optional left rail. When present, body becomes flex row: sidenav | main.
+		// When present, body becomes a flex row: sidenav | main.
 		sidenav?: Snippet;
 
-		// Footer (only rendered when `showFooter`)
 		showFooter?: boolean;
 		errors?: string[];
 		warnings?: string[];
@@ -39,7 +36,6 @@
 		footerText?: string;
 		footerChildren?: Snippet;
 
-		// Body content
 		class?: string;
 		bodyClass?: string;
 		children: Snippet;
@@ -70,12 +66,8 @@
 		children
 	}: AppShellProps = $props();
 
-	// Default the footer's copyright owner to the header's brand name when the
-	// caller didn't specify one.
 	const _copyright = $derived(copyrightName ?? brandName);
 
-	// fixed: viewport-locked, no page scroll — body owns its own scroll internally.
-	// scroll: normal page flow, footer sticks to bottom via sticky positioning.
 	const rootClass = $derived(
 		_mode === 'fixed'
 			? `flex flex-col h-screen overflow-hidden bg-background ${className}`

package/src/lib/components/layout/EmptyState.svelte

@@ -2,16 +2,15 @@
 	import type { Component, Snippet } from 'svelte';
 
 	interface Props {
-		// Optional icon component (e.g. lucide). Renders at h-8 w-8 above the title.
+		// Renders at h-8 w-8 above the title.
 		icon?: Component<{ class?: string }>;
 		title: string;
 		description?: string;
 		// Vertical breathing room. Most pages want `lg`; tighter contexts (drawer, nested card) use `sm`.
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
-		// Free-form description (overrides plain `description`). Use when you need rich content like <code>.
+		// Overrides `description`. Use when the text needs rich content like <code>.
 		body?: Snippet;
-		// Buttons / links rendered below.
 		actions?: Snippet;
 	}
 

package/src/lib/components/layout/PageFooter.svelte

@@ -60,9 +60,7 @@
 <footer
 	class="px-4 gap-4 text-xs h-7 flex shrink-0 items-center justify-between border-t border-border bg-background text-muted-foreground select-none"
 >
-	<!-- Left section: Status items + custom context items -->
 	<div class="gap-4 flex items-center">
-		<!-- Custom left items from context -->
 		{#each leftItems as item (item.id)}
 			<FooterItemRenderer {item} />
 		{/each}
@@ -103,9 +101,7 @@
 		{/if}
 	</div>
 
-	<!-- Right section: Custom items + Copyright -->
 	<div class="gap-4 ml-auto flex items-center">
-		<!-- Custom right items from context -->
 		{#each rightItems as item (item.id)}
 			<FooterItemRenderer {item} />
 		{/each}

package/src/lib/components/layout/index.ts

@@ -1,4 +1,3 @@
-// Layout Components - Page structure and organization
 export { default as AppShell } from './AppShell.svelte';
 export { default as PageHeader } from './PageHeader.svelte';
 export { default as PageContent } from './PageContent.svelte';

package/src/lib/components/preview/Group.svelte

@@ -47,11 +47,8 @@
 	// One visibility evaluation per item per render; columnStarts and gridItem both read it.
 	const visibilityMap = $derived(buildVisibilityMap(items, values));
 
-	/**
-	 * Compute the column position (0-indexed) where each item starts, accounting
-	 * for spans and linebreak resets. Items hidden by visibility don't consume
-	 * a slot (matching what the renderer does — they're skipped entirely).
-	 */
+	// Hidden items must not consume a slot here, because gridItem skips them entirely —
+	// counting them would offset every following item's column.
 	const columnStarts = $derived.by(() => {
 		const positions: number[] = [];
 		let col = 0;

package/src/lib/components/preview/ImageOutput.svelte

@@ -21,10 +21,11 @@
 	const ext = $derived(file ? (file.fileType ?? '').toLowerCase() : '');
 	const isSupported = $derived(SUPPORTED_EXTS.has(ext));
 
-	// Build a data URL. Binary formats (PNG/JPG/WEBP/GIF) come through as base64;
-	// SVG arrives as plain UTF-8 XML and must be percent-encoded into the data URL.
-	// Using <img src="..."> isolates SVG scripts (browsers disable scripting in
-	// image-context SVGs), so untrusted SVG content cannot execute against the host.
+	// Binary formats (PNG/JPG/WEBP/GIF) arrive base64; SVG arrives as plain UTF-8 XML
+	// and must be percent-encoded into the data URL.
+	// Rendering through <img src> rather than inlining the SVG is a security choice:
+	// browsers disable scripting in image-context SVGs, so untrusted SVG cannot
+	// execute against the host. Don't switch to {@html} or an inline <svg>.
 	const dataUrl = $derived.by(() => {
 		if (!file || !isSupported) return null;
 		const mime = MIME_BY_EXT[ext] ?? 'application/octet-stream';