@selvajs/ui 6.6.0-beta.9 → 7.0.0

package/dist/components/preview/ChartOutput.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import type { OutputChartLayoutItem } from '@selvajs/schemas';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
+	import { mode } from 'mode-watcher';
 	import { Loader, Maximize, Minimize } from '@lucide/svelte';
-	import { loadScript } from '../../utils/loadScript';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../i18n/messages';
+	import { loadScript } from '../../utils/loadScript.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../i18n/messages.js';
+	import { upgradePlotlyFigure, type PlotlyFigure } from '../../features/chart/plotly-compat.js';
+	import { saveBlob } from '../../utils/host-files.js';
+	import { toast } from '../primitives/sonner/index.js';
 
 	interface Props {
 		item: OutputChartLayoutItem;
@@ -16,19 +20,18 @@
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
 
-	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
-
-	type PlotlyTrace = Record<string, unknown>;
-	type PlotlyFigure = {
-		data: PlotlyTrace[];
-		layout: Record<string, unknown>;
-		config?: Record<string, unknown>;
-	};
+	const MAP_TYPE_SET = new Set([
+		'scattermap',
+		'choroplethmap',
+		'densitymap',
+		'choropleth',
+		'scattergeo'
+	]);
 
 	const figData = $derived.by(() => {
 		if (!value) return null;
 		try {
-			return JSON.parse(value) as PlotlyFigure;
+			return upgradePlotlyFigure(JSON.parse(value) as PlotlyFigure);
 		} catch {
 			return null;
 		}
@@ -46,9 +49,9 @@
 		if (window.Plotly) return window.Plotly;
 
 		// Pinned by hash: the plugin's web UI runs this on the origin that holds its bridge secret.
-		await loadScript('https://cdn.plot.ly/plotly-3.4.0.min.js', {
+		await loadScript('https://cdn.plot.ly/plotly-4.1.2.min.js', {
 			crossOrigin: 'anonymous',
-			integrity: 'sha384-pFOQ7loGBChmUyS4Tszy+he8OWeYkwTFjc2xii4aJUWWiGwf2u2OEc04T5iDRpMp'
+			integrity: 'sha384-hHv6D3tTUUBpp4tVv6t2Dc3oGuRhphmWOTKUR8jWyN0Pnon1g3iebKCNDNmKmxo8'
 		});
 		// @ts-expect-error — Plotly is loaded dynamically onto window
 		return window.Plotly;
@@ -57,6 +60,19 @@
 	// Some embedded WebViews (WKWebView in the Rhino panel) ship without the Fullscreen API at all.
 	const fullscreenSupported = typeof document !== 'undefined' && !!document.fullscreenEnabled;
 
+	// `Plots.resize()`/`relayout({autosize: true})` ask Plotly to re-measure the container itself,
+	// which it silently fails to do across a Fullscreen transition — _fullLayout keeps the
+	// pre-toggle width/height even though clientWidth/clientHeight are already correct. Passing
+	// the measured size explicitly is the only call that actually takes.
+	function resizeChart() {
+		// @ts-expect-error — Plotly is loaded dynamically onto window
+		if (!containerEl || !window.Plotly) return;
+		const { width, height } = containerEl.getBoundingClientRect();
+		if (width === 0 || height === 0) return;
+		// @ts-expect-error — Plotly is loaded dynamically onto window
+		window.Plotly.relayout(containerEl, { width, height });
+	}
+
 	function toggleFullscreen() {
 		if (!wrapperEl) return;
 		if (!document.fullscreenElement) {
@@ -73,27 +89,67 @@
 	$effect(() => {
 		function onFullscreenChange() {
 			isFullscreen = !!document.fullscreenElement;
-			Promise.resolve().then(() => {
-				// @ts-expect-error — Plotly is loaded dynamically onto window
-				if (containerEl && window.Plotly) {
-					// @ts-expect-error — Plotly is loaded dynamically onto window
-					window.Plotly.Plots.resize(containerEl);
-				}
-			});
+			// `tick()` waits for the h-dvh/h-95 class swap this state drives to actually reach the
+			// DOM before resizeChart measures it.
+			tick().then(resizeChart);
 		}
 		document.addEventListener('fullscreenchange', onFullscreenChange);
 		return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
 	});
 
-	function getThemeColors(): { textColor: string; gridColor: string } {
-		if (!containerEl) return { textColor: '#333', gridColor: '#eee' };
+	// Chromium's getComputedStyle returns color values in whatever function the CSS used to
+	// declare them — oklch() here, since base.css's theme tokens are oklch(). Plotly's own color
+	// parser doesn't recognize oklch() and silently falls back to its #444 default instead of
+	// erroring, so every chart read dark axis text even in dark mode. `fillStyle` alone just
+	// echoes the oklch() string back unconverted; actually rasterizing a pixel and reading its
+	// bytes is what forces a real rgb() value Plotly can parse.
+	function toRgb(cssColor: string): string {
+		const canvas = document.createElement('canvas');
+		canvas.width = 1;
+		canvas.height = 1;
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return cssColor;
+		ctx.fillStyle = cssColor;
+		ctx.fillRect(0, 0, 1, 1);
+		const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+		return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
+	}
+
+	function getThemeColors(): {
+		textColor: string;
+		gridColor: string;
+		fontFamily: string;
+		colorway: string[];
+	} {
+		if (!containerEl) return { textColor: '#333', gridColor: '#eee', fontFamily: '', colorway: [] };
 		const style = getComputedStyle(containerEl);
-		const textColor = style.getPropertyValue('color').trim() || '#333';
-		const gridColor =
+		const textColor = toRgb(style.getPropertyValue('color').trim() || '#333');
+		const gridColor = toRgb(
 			style.getPropertyValue('--border')?.trim() ||
-			style.getPropertyValue('--color-border')?.trim() ||
-			'rgba(128,128,128,0.2)';
-		return { textColor, gridColor };
+				style.getPropertyValue('--color-border')?.trim() ||
+				'rgba(128,128,128,0.2)'
+		);
+		// Figures that leave colours unset take Selva's chart palette rather than Plotly's.
+		const colorway = [1, 2, 3, 4, 5]
+			.map((i) => style.getPropertyValue(`--chart-${i}`).trim())
+			.filter(Boolean)
+			.map(toRgb);
+		return { textColor, gridColor, fontFamily: style.fontFamily, colorway };
+	}
+
+	async function saveChartImage(
+		Plotly: Awaited<ReturnType<typeof loadPlotly>>,
+		gd: HTMLElement,
+		options: { format?: string; filename?: string } = {}
+	) {
+		const format = options.format ?? 'png';
+		try {
+			const dataUrl: string = await Plotly.toImage(gd, { ...options, format });
+			const blob = await (await fetch(dataUrl)).blob();
+			await saveBlob(blob, `${options.filename ?? 'chart'}.${format}`);
+		} catch {
+			toast.error(t.downloadFailed);
+		}
 	}
 
 	async function renderChart() {
@@ -102,7 +158,7 @@
 		loading = true;
 		try {
 			const Plotly = await loadPlotly();
-			const { textColor, gridColor } = getThemeColors();
+			const { textColor, gridColor, fontFamily, colorway } = getThemeColors();
 			const isMapFigure = figData.data?.some((t) => MAP_TYPE_SET.has(t.type as string));
 
 			const {
@@ -122,23 +178,58 @@
 				...layoutRest,
 				autosize: true,
 				margin: { t: 24, r: 8, b: 40, l: 60, pad: 0 },
-				font: { color: textColor },
+				font: { color: textColor, ...(fontFamily ? { family: fontFamily } : {}) },
+				...(colorway.length && !layoutRest.colorway ? { colorway } : {}),
 				paper_bgcolor: layoutRest.paper_bgcolor ?? 'transparent',
 				plot_bgcolor: layoutRest.plot_bgcolor ?? 'transparent',
-				...(!isMapFigure && layoutRest.xaxis
-					? { xaxis: { ...(layoutRest.xaxis as object), gridcolor: gridColor, color: textColor } }
-					: {}),
-				...(!isMapFigure && layoutRest.yaxis
-					? { yaxis: { ...(layoutRest.yaxis as object), gridcolor: gridColor, color: textColor } }
+				// Plotly's axis tick/label color doesn't inherit the top-level `font.color`, so this
+				// has to be set even when the figure's own JSON never declared an xaxis/yaxis —
+				// which the mock's figures don't. Gating on `layoutRest.xaxis` existing left every
+				// axis on Plotly's built-in #444 default, light or dark mode.
+				...(!isMapFigure
+					? {
+							xaxis: { ...(layoutRest.xaxis as object), gridcolor: gridColor, color: textColor },
+							yaxis: { ...(layoutRest.yaxis as object), gridcolor: gridColor, color: textColor }
+						}
 					: {})
 			};
 
-			Plotly.react(containerEl, figData.data, layout, {
-				responsive: true,
-				displayModeBar: 'hover',
-				displaylogo: false,
-				modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'],
-				...figData.config
+			const figConfig = (figData.config ?? {}) as {
+				modeBarButtonsToRemove?: string[];
+				modeBarButtonsToAdd?: unknown[];
+				toImageButtonOptions?: { format?: string; filename?: string };
+			};
+			Plotly.react(containerEl, {
+				data: figData.data,
+				layout,
+				// Animated figures (e.g. Canopy's Animate) carry their frames here.
+				frames: figData.frames ?? [],
+				config: {
+					responsive: true,
+					displayModeBar: 'hover',
+					displaylogo: false,
+					// Plotly 4's "Share chart" button uploads the figure to Plotly's cloud.
+					showSendToCloud: false,
+					...figConfig,
+					// Plotly's own toImage button downloads through an <a download>, which the Rhino
+					// panel's WebView blocks; this one saves through saveBlob like every other file.
+					modeBarButtonsToRemove: [
+						'sendDataToCloud',
+						'lasso2d',
+						'select2d',
+						'toImage',
+						...(figConfig.modeBarButtonsToRemove ?? [])
+					],
+					modeBarButtonsToAdd: [
+						{
+							name: 'toImage',
+							title: t.downloadChartImage,
+							icon: Plotly.Icons.camera,
+							click: (gd: HTMLElement) => saveChartImage(Plotly, gd, figConfig.toImageButtonOptions)
+						},
+						...(figConfig.modeBarButtonsToAdd ?? [])
+					]
+				}
 			});
 		} catch (e) {
 			error = e instanceof Error ? e.message : t.chartRenderFailed;
@@ -154,11 +245,7 @@
 		const ro = new ResizeObserver(() => {
 			if (resizeTimer) clearTimeout(resizeTimer);
 			resizeTimer = setTimeout(() => {
-				// @ts-expect-error — Plotly is loaded dynamically onto window
-				if (containerEl && window.Plotly) {
-					// @ts-expect-error — Plotly is loaded dynamically onto window
-					window.Plotly.Plots.resize(containerEl);
-				}
+				resizeChart();
 				resizeTimer = null;
 			}, 150);
 		});
@@ -175,6 +262,10 @@
 	let renderTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	$effect(() => {
+		// Re-reads mode.current so a theme toggle re-renders with the new axis/font colors —
+		// getThemeColors() only reads the DOM once, at render time, and nothing else repaints an
+		// already-drawn chart when the page's color scheme changes under it.
+		void mode.current;
 		if (!value || !mounted || !containerEl) return;
 		if (renderTimeout) clearTimeout(renderTimeout);
 		renderTimeout = setTimeout(() => {
@@ -189,7 +280,7 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group rounded relative overflow-hidden border border-border {isFullscreen
+	class="group relative overflow-hidden rounded-lg border border-border-strong {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
@@ -208,7 +299,7 @@
 		>
 			{#if loading}
 				<div
-					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-muted-foreground"
+					class="p-1.5 backdrop-blur-sm flex items-center rounded-sm border border-border-strong bg-background/80 text-muted-foreground"
 				>
 					<Loader size={14} class="animate-spin" />
 				</div>
@@ -220,7 +311,7 @@
 					disabled={loading}
 					title={isFullscreen ? t.exitFullscreen : t.fullscreen}
 					aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
-					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+					class="p-1.5 backdrop-blur-sm flex items-center rounded-sm border border-border-strong bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 				>
 					{#if isFullscreen}
 						<Minimize size={14} />

package/dist/components/preview/Group.svelte

@@ -2,7 +2,7 @@
 	import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '@selvajs/schemas';
 	import type { Snippet } from 'svelte';
 	import { ChevronDown } from '@lucide/svelte';
-	import { buildVisibilityMap, itemKey } from '../../schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '../../schema/visibility-rules.js';
 
 	interface Props {
 		label: string;
@@ -69,7 +69,7 @@
 	</div>
 {/snippet}
 
-<section class="shadow-xs rounded-xl border bg-card">
+<section class="rounded-xl border bg-card shadow-raised">
 	{#if flat}
 		<div class="p-4">
 			{@render grid()}
@@ -80,18 +80,18 @@
 		<h3>
 			<button
 				type="button"
-				class="gap-3 px-4 pt-3.5 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
+				class="gap-3 px-4 pt-4 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
 					? 'pb-0'
-					: 'pb-3.5'}"
+					: 'pb-3'}"
 				aria-expanded={!collapsed}
 				aria-describedby={description ? descriptionId : undefined}
 				onclick={onToggle}
 			>
-				<span class="min-w-0 text-base font-semibold leading-snug flex-1 text-foreground"
+				<span class="min-w-0 text-sm font-semibold leading-snug flex-1 text-foreground"
 					>{label}</span
 				>
 				<ChevronDown
-					class="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 {collapsed
+					class="mt-0.5 h-4 w-4 shrink-0 text-faint-foreground transition-transform duration-200 {collapsed
 						? '-rotate-90'
 						: ''}"
 				/>
@@ -100,14 +100,14 @@
 		{#if description}
 			<p
 				id={descriptionId}
-				class="pl-4 pr-11 pt-0.5 pb-3.5 text-xs leading-snug text-muted-foreground"
+				class="pl-4 pr-11 pt-0.5 pb-3 text-xs leading-snug text-muted-foreground"
 			>
 				{description}
 			</p>
 		{/if}
 		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<div class="px-4 pt-1 pb-5">
+				<div class="px-4 pt-2 pb-5">
 					{@render grid()}
 				</div>
 			</div>
@@ -152,7 +152,7 @@
 	.schema-grid {
 		display: grid;
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
-		gap: 1rem var(--column-gap);
+		gap: 1.25rem var(--column-gap);
 		align-items: start;
 	}
 

package/dist/components/preview/HelpButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { HelpCircle } from '@lucide/svelte';
-	import * as Dialog from '../primitives/dialog';
+	import * as Dialog from '../primitives/dialog/index.js';
 
 	interface Props {
 		/** The field's label: the dialog title and the button's accessible name. */

package/dist/components/preview/ImageOutput.svelte

@@ -12,9 +12,9 @@
 		ZoomIn,
 		ZoomOut
 	} from '@lucide/svelte';
-	import { downloadFiles, isFileData, MIME_BY_EXT } from '../../utils/file-download';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../i18n/messages';
+	import { downloadFiles, isFileData, MIME_BY_EXT } from '../../utils/file-download.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../i18n/messages.js';
 
 	interface Props {
 		item: OutputImageLayoutItem;
@@ -65,7 +65,8 @@
 	// Some embedded WebViews (WKWebView in the Rhino panel) ship without the Fullscreen API at all.
 	const fullscreenSupported = typeof document !== 'undefined' && !!document.fullscreenEnabled;
 	const allowFullscreen = $derived((cfg.allowFullscreen ?? true) && fullscreenSupported);
-	const backgroundColor = $derived(cfg.backgroundColor);
+	// SVGs are line drawings (often black on transparent), so a checkerboard hurts legibility.
+	const backgroundColor = $derived(cfg.backgroundColor ?? (isSvg ? '#ffffff' : undefined));
 
 	let wrapperEl = $state<HTMLDivElement | null>(null);
 	let stageEl = $state<HTMLDivElement | null>(null);
@@ -296,14 +297,14 @@
 	}
 
 	const toolButton =
-		'flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40';
+		'flex h-7 min-w-7 items-center justify-center rounded-sm px-1.5 text-muted-foreground transition-colors hover:bg-hover hover:text-foreground disabled:pointer-events-none disabled:opacity-40';
 </script>
 
 <!-- The layout hides this output until a solve returns a file, so there is no empty state here. -->
 {#if error || unsupported || current}
 	<div
 		bind:this={wrapperEl}
-		class="rounded flex flex-col overflow-hidden border border-border bg-background {isFullscreen
+		class="flex flex-col overflow-hidden rounded-lg border border-border-strong bg-background {isFullscreen
 			? 'h-dvh'
 			: ''}"
 	>
@@ -319,6 +320,7 @@
 		{:else if current}
 			<!-- The stage is a pan/zoom surface with its own keyboard shortcuts; no native element fits. -->
 			<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+			<!-- eslint-disable shadcn/no-inline-styles -- backgroundColor is the author's per-output color, not a theme token -->
 			<div
 				bind:this={stageEl}
 				role="application"
@@ -338,6 +340,7 @@
 				ondblclick={onDoubleClick}
 				onkeydown={onKeyDown}
 			>
+				<!-- eslint-enable shadcn/no-inline-styles -->
 				{#if decodeFailed}
 					<div class="inset-0 text-sm absolute flex items-center justify-center text-destructive">
 						{formatMessage(t.imageDecodeFailed, { file: `${current.fileName}${current.fileType}` })}
@@ -372,7 +375,7 @@
 						onclick={() => step(-1)}
 						title="{t.previousImage} (←)"
 						aria-label={t.previousImage}
-						class="left-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/80 text-foreground hover:bg-background"
+						class="left-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border-strong bg-background/80 text-foreground hover:bg-background"
 					>
 						<ChevronLeft size={16} />
 					</button>
@@ -380,14 +383,14 @@
 						onclick={() => step(1)}
 						title="{t.nextImage} (→)"
 						aria-label={t.nextImage}
-						class="right-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/80 text-foreground hover:bg-background"
+						class="right-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border-strong bg-background/80 text-foreground hover:bg-background"
 					>
 						<ChevronRight size={16} />
 					</button>
 				{/if}
 
 				<div
-					class="px-2.5 py-1 text-xs bottom-2 rounded pointer-events-none absolute left-1/2 -translate-x-1/2 bg-foreground/80 text-background transition-opacity {showWheelHint
+					class="px-2.5 py-1 text-xs bottom-2 pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-sm bg-foreground text-background transition-opacity {showWheelHint
 						? 'opacity-100'
 						: 'opacity-0'}"
 				>
@@ -401,7 +404,7 @@
 						<button
 							onclick={() => select(i)}
 							title="{image.fileName}{image.fileType}"
-							class="h-12 w-16 rounded shrink-0 overflow-hidden border-2 bg-muted transition-colors {i ===
+							class="h-12 w-16 shrink-0 overflow-hidden rounded-sm border-2 bg-muted transition-colors {i ===
 							currentIndex
 								? 'border-primary'
 								: 'border-transparent opacity-70 hover:opacity-100'}"

package/dist/components/preview/InputControl.svelte

@@ -16,9 +16,9 @@
 		isFileWidget,
 		isColorWidget
 	} from '@selvajs/schemas';
-	import * as Field from '../primitives/field';
-	import { Button } from '../primitives/button';
-	import { toast } from '../primitives/sonner';
+	import * as Field from '../primitives/field/index.js';
+	import { Button } from '../primitives/button/index.js';
+	import { toast } from '../primitives/sonner/index.js';
 	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
@@ -31,16 +31,16 @@
 		SegmentedInput,
 		TextInput,
 		TileInput
-	} from './inputs';
-	import { getClientSlot } from '../../contexts/clientSlotContext.svelte';
+	} from './inputs/index.js';
+	import { getClientSlot } from '../../contexts/clientSlotContext.svelte.js';
 	import {
 		getHostContext,
 		type GeometryPickTarget,
 		type PickKind
-	} from '../../contexts/hostContext.svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { isGeometryParamType, isTriggerItem } from '../../schema/host-support';
-	import { resolveOptionDisplay } from '../../schema/option-display';
+	} from '../../contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { isGeometryParamType, isTriggerItem } from '../../schema/host-support.js';
+	import { resolveOptionDisplay } from '../../schema/option-display.js';
 
 	interface Props {
 		item: InputLayoutItem;
@@ -283,7 +283,7 @@
 
 {#if isClientSlot}
 	{#if clientSlot}
-		<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+		<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 			{@render fieldHeader()}
 			{@render clientSlot({
 				inputId: item.paramId,
@@ -294,7 +294,7 @@
 		</div>
 	{/if}
 {:else if isGeometry}
-	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+	<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 		{@render fieldHeader(inputId)}
 		<GeometryInput
 			{inputId}
@@ -322,7 +322,7 @@
 		{@render helpButton()}
 	</div>
 {:else if !hideDynamicListWhenEmpty}
-	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+	<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 		{#if !isCheckboxWidget(item)}
 			{@render fieldHeader(inputId)}
 		{/if}
@@ -378,6 +378,7 @@
 				{inputId}
 				value={typeof value === 'string' ? value : '#000000'}
 				onChange={(newValue) => commit(newValue)}
+				{disabled}
 			/>
 		{/if}
 	</div>

package/dist/components/preview/OutputDisplay.svelte

@@ -8,14 +8,14 @@
 		formatFileSize,
 		getBase64FileSize,
 		isFileData
-	} from '../../utils/file-download';
+	} from '../../utils/file-download.js';
 	import { Button } from '../primitives';
 	import { Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
 	import HelpButton from './HelpButton.svelte';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-	import { Label } from '../primitives/label';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatCount, formatMessage } from '../../i18n/messages';
+	import { Label } from '../primitives/label/index.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatCount, formatMessage } from '../../i18n/messages.js';
 
 	interface Props {
 		item: OutputLayoutItem;
@@ -38,7 +38,7 @@
 	);
 	const hasValue = $derived(value != null);
 
-	const boxClass = 'min-h-12.5 rounded px-3 py-3 font-mono text-sm border border-border';
+	const boxClass = 'min-h-12.5 rounded-md px-3 py-3 text-sm border border-border-strong';
 
 	async function copyToClipboard() {
 		try {
@@ -157,7 +157,11 @@
 
 {#snippet fieldHeader()}
 	<div class="gap-2 flex items-center">
-		<Label>{label}</Label>
+		<Label>
+			<span class={item.widgetType === 'number' ? 'text-xs font-normal text-muted-foreground' : ''}
+				>{label}</span
+			>
+		</Label>
 		{#if item.description}
 			<HelpButton {label} description={item.description} />
 		{/if}
@@ -190,7 +194,7 @@
 					<span class="font-medium">{node.name}</span>
 				</button>
 				{#if isOpen}
-					<div class="ml-4 pl-2 border-l border-border/50">
+					<div class="ml-4 pl-2 border-l border-border-strong">
 						{@render treeNodes(node.children, folderPath)}
 					</div>
 				{/if}
@@ -213,12 +217,14 @@
 
 {#snippet fileDisplay()}
 	{#if fileCount === 0}
-		<div class="rounded px-3 py-3 text-sm border border-border bg-muted text-muted-foreground">
+		<div
+			class="px-3 py-3 text-sm rounded-md border border-border-strong bg-muted text-muted-foreground"
+		>
 			{t.waitingForFiles}
 		</div>
 	{:else}
 		<div class="gap-2 flex flex-col">
-			<div class="rounded px-3 py-2 border border-border bg-muted">
+			<div class="px-3 py-2 rounded-md border border-border-strong bg-muted">
 				<div class="gap-2 flex items-center justify-between">
 					<span class="min-w-0 text-sm font-medium truncate text-foreground">
 						{fileCount === 1
@@ -248,7 +254,7 @@
 			</div>
 			{#if hasDuplicates}
 				<div
-					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
+					class="px-3 py-2 text-sm rounded-md border border-destructive bg-destructive/10 text-destructive"
 				>
 					<div class="font-medium">{t.duplicateFilesTitle}</div>
 					<div class="mt-1 text-xs">
@@ -264,7 +270,7 @@
 			{/if}
 			{#if downloadError}
 				<div
-					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
+					class="px-3 py-2 text-sm rounded-md border border-destructive bg-destructive/10 text-destructive"
 				>
 					{downloadError}
 				</div>
@@ -282,7 +288,10 @@
 
 <!-- Dynamic value list outputs are routing sinks (their options feed an input), not displayed. -->
 {#if item.widgetType !== 'dynamicValueList'}
-	<div role="group" class="group/field gap-2 flex flex-col">
+	<div
+		role="group"
+		class="group/field flex flex-col {item.widgetType === 'number' ? 'gap-0.5' : 'gap-2'}"
+	>
 		{@render fieldHeader()}
 
 		{#if item.widgetType === 'chart'}
@@ -295,21 +304,21 @@
 		{:else if item.widgetType === 'file'}
 			{@render fileDisplay()}
 		{:else if item.widgetType === 'number'}
-			<div class="{boxClass} flex items-center bg-muted/50 wrap-break-word">
+			<div class="min-h-8 text-2xl font-semibold wrap-break-word text-foreground tabular-nums">
 				{#if hasValue}
-					<span class="font-bold text-primary">{formattedValue}</span>
+					{formattedValue}
 				{:else}
-					{@render placeholder()}
+					<span class="text-base font-normal">{@render placeholder()}</span>
 				{/if}
 			</div>
 		{:else if item.widgetType === 'text'}
 			<div class="group relative">
 				{#if isObjectValue}
 					<pre
-						class="{boxClass} max-h-96 overflow-auto bg-muted/10 wrap-anywhere text-foreground">{formattedValue}</pre>
+						class="{boxClass} max-h-96 font-mono overflow-auto bg-muted wrap-anywhere text-foreground">{formattedValue}</pre>
 				{:else}
 					<div
-						class="{boxClass} bg-muted/10 wrap-anywhere wrap-break-word whitespace-pre-wrap text-foreground"
+						class="{boxClass} bg-muted wrap-anywhere wrap-break-word whitespace-pre-wrap text-foreground"
 					>
 						{#if hasValue}{value}{:else}{@render placeholder()}{/if}
 					</div>