@selvajs/ui 6.6.0-beta.8 → 7.0.0

package/src/lib/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 '$lib/utils/loadScript';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
+	import { loadScript } from '#lib/utils/loadScript.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
+	import { upgradePlotlyFigure, type PlotlyFigure } from '#lib/features/chart/plotly-compat.js';
+	import { saveBlob } from '#lib/utils/host-files.js';
+	import { toast } from '#lib/components/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,14 +49,30 @@
 		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;
 	}
 
+	// 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) {
@@ -70,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() {
@@ -99,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 {
@@ -119,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;
@@ -151,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);
 		});
@@ -172,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(() => {
@@ -186,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'
 		: ''}"
 >
@@ -205,25 +299,27 @@
 		>
 			{#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>
 			{/if}
 
-			<button
-				onclick={toggleFullscreen}
-				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"
-			>
-				{#if isFullscreen}
-					<Minimize size={14} />
-				{:else}
-					<Maximize size={14} />
-				{/if}
-			</button>
+			{#if fullscreenSupported}
+				<button
+					onclick={toggleFullscreen}
+					disabled={loading}
+					title={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					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} />
+					{:else}
+						<Maximize size={14} />
+					{/if}
+				</button>
+			{/if}
 		</div>
 	{/if}
 </div>

package/src/lib/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 '$lib/schema/visibility-rules';
+	import { buildVisibilityMap, itemKey } from '#lib/schema/visibility-rules.js';
 
 	interface Props {
 		label: string;
@@ -69,7 +69,7 @@
 	</div>
 {/snippet}
 
-<section class="shadow-xs rounded-xl 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;
 	}
 
@@ -160,6 +160,11 @@
 		grid-column: span var(--span) / span var(--span);
 	}
 
+	/* A control with no label above it lines up with the controls beside it, not their labels. */
+	.grid-cell:has(:global([data-control-line])) {
+		align-self: end;
+	}
+
 	/* An empty full-width row: the two row gaps around it already read as a break. */
 	.grid-break {
 		grid-column: 1 / -1;

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

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

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

@@ -12,9 +12,9 @@
 		ZoomIn,
 		ZoomOut
 	} from '@lucide/svelte';
-	import { downloadFiles, isFileData, MIME_BY_EXT } from '$lib/utils/file-download';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
+	import { downloadFiles, isFileData, MIME_BY_EXT } from '#lib/utils/file-download.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		item: OutputImageLayoutItem;
@@ -62,8 +62,11 @@
 
 	const cfg = $derived(item.config ?? {});
 	const allowDownload = $derived(cfg.allowDownload ?? true);
-	const allowFullscreen = $derived(cfg.allowFullscreen ?? true);
-	const backgroundColor = $derived(cfg.backgroundColor);
+	// 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);
+	// 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);
@@ -294,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'
 			: ''}"
 	>
@@ -317,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"
@@ -336,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}` })}
@@ -370,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>
@@ -378,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'}"
 				>
@@ -399,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'}"