@selvajs/ui 6.6.0-beta.9 → 7.0.0

package/src/lib/constants.ts

@@ -1,8 +1,7 @@
 export const APP_DEFAULTS = {
 	// File upload limits
 	// TEMP (dev): raised 150 MB → 300 MB so large dev file-widget inputs aren't
-	// blocked client-side. The server request cap (COMPUTE_REQUEST_MAX_BYTES)
-	// still defaults to 256 MB, and base64 inflates a raw file by ~4/3, so
+	// blocked client-side. The server request cap is 256 MB, and base64 inflates a raw file by ~4/3, so
 	// anything over ~192 MB is rejected with a 413 after the client accepts it.
 	// Revert to 150 before release.
 	FILE_UPLOAD: {
@@ -18,16 +17,14 @@ export const APP_DEFAULTS = {
 		DRAWER_ANIMATION_MS: 350
 	},
 
-	// Solving indicator adaptive thresholds
+	// See createSolvingIndicator.
 	SOLVING_INDICATOR: {
-		/** If solve is faster than this, don't show indicator (ms) */
-		FAST_THRESHOLD_MS: 200,
-		/** If solve is slower than this, show indicator immediately (ms) */
-		SLOW_THRESHOLD_MS: 600,
-		/** Animation delay for solve indicator (ms) */
-		ANIMATION_DELAY: 300,
-		/** Number of solve durations to keep in history for averaging */
-		HISTORY_SIZE: 3
+		/** A solve that ends sooner shows no indicator (ms) */
+		SHOW_AFTER_MS: 400,
+		/** Once shown, the indicator stays at least this long (ms) */
+		MIN_VISIBLE_MS: 500,
+		/** Past this a solve counts as slow and the viewer dims its stale result (ms) */
+		SLOW_AFTER_MS: 2000
 	},
 
 	// File size formatting

package/src/lib/contexts/hostContext.svelte.ts

@@ -1,6 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import type { GeometryKind } from '@selvajs/schemas';
-import type { UIHost } from '$lib/schema/host-support';
+import type { UIHost } from '#lib/schema/host-support.js';
 
 // Tells InputControl which host it renders in and how to reach the host's own actions, without
 // threading a prop through every layout layer. Without a provider the host is Selva.

package/src/lib/features/chart/plotly-compat.ts

@@ -0,0 +1,141 @@
+import { hsvToRgb } from '#lib/utils/color-space.js';
+
+// ============================================================================
+// Plotly 3 → 4 figure compatibility
+// ============================================================================
+//
+// Chart outputs come from whatever plugin version solved them, often one written against
+// Plotly 3. This rewrites the parts Plotly 4 draws differently or rejects, so those figures
+// keep their look. Figures that are already compatible pass through unchanged.
+
+type Json = Record<string, unknown>;
+
+export interface PlotlyFigure {
+	data: Json[];
+	layout?: Json;
+	config?: Json;
+	frames?: Json[];
+}
+
+const REMOVED_MAP_TRACES: Record<string, string> = {
+	scattermapbox: 'scattermap',
+	choroplethmapbox: 'choroplethmap',
+	densitymapbox: 'densitymap'
+};
+
+const MAPBOX_SUBPLOT = /^mapbox(\d*)$/;
+const BARE_HEX = /^(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const HSV_FUNCTION =
+	/^hsva?[\s(]+([-+\d.]+)%?[\s,]+([\d.]+)(%?)[\s,]+([\d.]+)(%?)(?:[\s,/]+([\d.]+)(%?))?[\s)]*$/i;
+
+const isObject = (v: unknown): v is Json =>
+	typeof v === 'object' && v !== null && !Array.isArray(v);
+
+/** Returns a rewritten copy; the input is not modified. */
+export function upgradePlotlyFigure(figure: PlotlyFigure): PlotlyFigure {
+	const out = structuredClone(figure);
+	const layout = out.layout ?? {};
+	normalizeColors(layout);
+
+	let migratedMaps = false;
+	for (const trace of out.data ?? []) {
+		if (!isObject(trace)) continue;
+		normalizeColors(trace);
+
+		const replacement = REMOVED_MAP_TRACES[trace.type as string];
+		if (replacement) {
+			trace.type = replacement;
+			if (typeof trace.subplot === 'string')
+				trace.subplot = trace.subplot.replace(MAPBOX_SUBPLOT, 'map$1');
+			migratedMaps = true;
+		} else if (trace.type === 'splom') {
+			keepSplomAxesUnlinked(trace);
+		}
+	}
+
+	if (migratedMaps) migrateMapLayout(layout);
+	// Frame data replaces trace data during playback, so it needs the same colour fixes.
+	for (const frame of out.frames ?? []) if (isObject(frame)) normalizeColors(frame);
+	return { ...out, layout };
+}
+
+// Plotly 4 links each dimension's x and y axes by default.
+function keepSplomAxesUnlinked(trace: Json) {
+	if (!Array.isArray(trace.dimensions)) return;
+	for (const dim of trace.dimensions) {
+		if (!isObject(dim)) continue;
+		const axis = isObject(dim.axis) ? dim.axis : (dim.axis = {});
+		if (!('matches' in axis)) axis.matches = false;
+	}
+}
+
+function migrateMapLayout(layout: Json) {
+	for (const key of Object.keys(layout)) {
+		const match = MAPBOX_SUBPLOT.exec(key);
+		if (!match) continue;
+
+		const map = layout[key];
+		delete layout[key];
+		const newKey = `map${match[1]}`;
+		if (newKey in layout || !isObject(map)) continue;
+
+		delete map.accesstoken;
+		// Stamen and mapbox:// styles have no map equivalent.
+		if (typeof map.style === 'string' && /^(stamen|mapbox:\/\/)/.test(map.style))
+			map.style = 'open-street-map';
+		layout[newKey] = map;
+	}
+}
+
+// Plotly attributes that hold colours: *color, colorway, colorscale and pie's marker.colors.
+const isColorKey = (key: string) =>
+	key.toLowerCase().endsWith('color') ||
+	key === 'colors' ||
+	key === 'colorway' ||
+	key === 'colorscale';
+
+function normalizeColors(props: Json) {
+	for (const [key, value] of Object.entries(props)) {
+		if (isColorKey(key)) props[key] = normalizeColorValue(value, false);
+		else if (isObject(value)) normalizeColors(value);
+		else if (Array.isArray(value))
+			for (const item of value) if (isObject(item)) normalizeColors(item);
+	}
+}
+
+// Covers a single colour, a per-point list and colorscale stops ([[0, "ff0000"], ...]).
+function normalizeColorValue(value: unknown, inList: boolean): unknown {
+	if (Array.isArray(value)) return value.map((v) => normalizeColorValue(v, true));
+	if (typeof value !== 'string') return value;
+	// Plotly reads numeric strings in a per-point list as numbers for the colorscale.
+	if (inList && /^\s*\d+\s*$/.test(value)) return value;
+	return normalizePlotlyColor(value);
+}
+
+/**
+ * Rewrites colour spellings Plotly 3 accepted but Plotly 4 rejects (hex without `#`, `hsv()`)
+ * into valid CSS. Anything else is returned unchanged.
+ */
+export function normalizePlotlyColor(color: string): string {
+	const value = color.trim();
+	if (BARE_HEX.test(value)) return `#${value}`;
+
+	const hsv = HSV_FUNCTION.exec(value);
+	if (!hsv) return color;
+
+	const { r, g, b } = hsvToRgb({
+		h: Number(hsv[1]),
+		s: unit(hsv[2], hsv[3] === '%'),
+		v: unit(hsv[4], hsv[5] === '%')
+	});
+	const rgb = `${Math.round(r)},${Math.round(g)},${Math.round(b)}`;
+	if (hsv[6] === undefined) return `rgb(${rgb})`;
+	return `rgba(${rgb},${+unit(hsv[6], hsv[7] === '%').toFixed(3)})`;
+}
+
+// Plotly 3 (TinyColor) read 0..1 as a fraction and anything above 1 as a percentage.
+function unit(s: string, percent: boolean): number {
+	let x = Number(s);
+	if (percent || x > 1) x /= 100;
+	return Math.min(1, Math.max(0, x));
+}

package/src/lib/i18n/messages.ts

@@ -40,6 +40,8 @@ export interface ViewerMessages {
 	lookTechnical: string;
 	lookStudio: string;
 	lookShowcase: string;
+	lookNight: string;
+	nightMode: string;
 	lookArctic: string;
 	lookXray: string;
 	lookLineart: string;
@@ -77,6 +79,10 @@ export interface ViewerMessages {
 	solveMessagesEscHint: string;
 	solveMessagesDismiss: string;
 	solveSolving: string;
+	/** A visible solve has landed; followed by how long it took. */
+	solveDone: string;
+	/** A visible solve was aborted; the previous result stays. */
+	solveStopped: string;
 	parametersTab: string;
 	moreTab: string;
 	scrollTabsBack: string;
@@ -131,6 +137,16 @@ export interface ViewerMessages {
 	/** `{max}` is replaced with the field's character limit. */
 	maxLength: string;
 	invalidFormat: string;
+	/** Trigger label; `{color}` is the current hex value. */
+	colorPick: string;
+	colorArea: string;
+	/** `{s}` and `{v}` are percentages. */
+	colorAreaValue: string;
+	colorHue: string;
+	colorHex: string;
+	colorHexInvalid: string;
+	colorPresets: string;
+	colorEyedropper: string;
 	invalidPattern: string;
 
 	// Geometry input (Rhino only)
@@ -219,6 +235,7 @@ export interface ViewerMessages {
 	copied: string;
 	chartReceiving: string;
 	chartRenderFailed: string;
+	downloadChartImage: string;
 	/** `{error}` is replaced with the browser's reason. */
 	fullscreenUnavailable: string;
 	/** `{error}` is replaced with the browser's reason. */
@@ -268,6 +285,8 @@ const en: ViewerMessages = {
 	lookTechnical: 'Technical',
 	lookStudio: 'Studio',
 	lookShowcase: 'Showcase',
+	lookNight: 'Night',
+	nightMode: 'Night mode',
 	lookArctic: 'Arctic',
 	lookXray: 'X-Ray',
 	lookLineart: 'Line Art',
@@ -300,6 +319,8 @@ const en: ViewerMessages = {
 	solveMessagesEscHint: 'Esc aborts the solve',
 	solveMessagesDismiss: 'Dismiss',
 	solveSolving: 'Solving…',
+	solveDone: 'Done',
+	solveStopped: 'Stopped',
 	parametersTab: 'Parameters',
 	moreTab: 'More',
 	scrollTabsBack: 'Previous tabs',
@@ -340,6 +361,14 @@ const en: ViewerMessages = {
 	fineDragHint: 'Hold Shift to drag finely',
 	maxLength: 'Maximum {max} characters allowed',
 	invalidFormat: 'Invalid format',
+	colorPick: 'Choose color, currently {color}',
+	colorArea: 'Saturation and brightness',
+	colorAreaValue: 'Saturation {s}%, brightness {v}%',
+	colorHue: 'Hue',
+	colorHex: 'Hex color',
+	colorHexInvalid: 'Enter a hex color such as #2f6fd6',
+	colorPresets: 'Presets',
+	colorEyedropper: 'Pick a color from the screen',
 	invalidPattern: 'Invalid validation pattern configured',
 
 	geometryPickAnyOne: 'Pick an object',
@@ -417,6 +446,7 @@ const en: ViewerMessages = {
 	copied: 'Copied!',
 	chartReceiving: 'Receiving chart data...',
 	chartRenderFailed: 'Failed to render chart',
+	downloadChartImage: 'Download plot as image',
 	fullscreenUnavailable: 'Fullscreen unavailable: {error}',
 	exitFullscreenFailed: 'Exit fullscreen failed: {error}',
 
@@ -461,6 +491,8 @@ const de: ViewerMessages = {
 	lookTechnical: 'Technisch',
 	lookStudio: 'Studio',
 	lookShowcase: 'Präsentation',
+	lookNight: 'Nacht',
+	nightMode: 'Nachtmodus',
 	lookArctic: 'Arktis',
 	lookXray: 'Röntgen',
 	lookLineart: 'Strichzeichnung',
@@ -494,6 +526,8 @@ const de: ViewerMessages = {
 	solveMessagesEscHint: 'Esc bricht die Berechnung ab',
 	solveMessagesDismiss: 'Schliessen',
 	solveSolving: 'Berechnung läuft…',
+	solveDone: 'Fertig',
+	solveStopped: 'Abgebrochen',
 	parametersTab: 'Parameter',
 	moreTab: 'Mehr',
 	scrollTabsBack: 'Vorherige Tabs',
@@ -534,6 +568,14 @@ const de: ViewerMessages = {
 	fineDragHint: 'Umschalttaste halten für feine Schritte',
 	maxLength: 'Höchstens {max} Zeichen erlaubt',
 	invalidFormat: 'Ungültiges Format',
+	colorPick: 'Farbe wählen, aktuell {color}',
+	colorArea: 'Sättigung und Helligkeit',
+	colorAreaValue: 'Sättigung {s} %, Helligkeit {v} %',
+	colorHue: 'Farbton',
+	colorHex: 'Hex-Farbe',
+	colorHexInvalid: 'Hex-Farbe eingeben, z. B. #2f6fd6',
+	colorPresets: 'Vorgaben',
+	colorEyedropper: 'Farbe vom Bildschirm aufnehmen',
 	invalidPattern: 'Ungültiges Prüfmuster hinterlegt',
 
 	geometryPickAnyOne: 'Objekt wählen',
@@ -612,6 +654,7 @@ const de: ViewerMessages = {
 	copied: 'Kopiert!',
 	chartReceiving: 'Diagrammdaten werden empfangen…',
 	chartRenderFailed: 'Diagramm konnte nicht dargestellt werden',
+	downloadChartImage: 'Diagramm als Bild herunterladen',
 	fullscreenUnavailable: 'Vollbild nicht verfügbar: {error}',
 	exitFullscreenFailed: 'Vollbild konnte nicht beendet werden: {error}',
 

package/src/lib/index.ts

@@ -13,12 +13,14 @@ export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // Design-system primitives (shadcn-svelte + custom)
 export * from './components/primitives';
 export { default as StateDisplay } from './components/primitives/StateDisplay.svelte';
+export { default as ColorInput } from './components/preview/inputs/ColorInput.svelte';
 
 export { default as Viewer } from './components/viewer/Viewer.svelte';
 
 export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
+export { visibleInputItems } from './schema/visibility-rules';
 export {
 	type UIHost,
 	type ElementKind,

package/src/lib/public.ts

@@ -80,6 +80,7 @@ export {
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
+export { visibleInputItems } from './schema/visibility-rules';
 
 // UI-facing runtime types (not from schema)
 export type { ActionButton } from './types/actionButton';

package/src/lib/schema/visibility-rules.ts

@@ -1,10 +1,12 @@
 import type {
+	InputLayoutItem,
 	LayoutItem,
 	OutputLayoutItem,
 	VisibilityRule,
 	VisibilityCondition,
 	GroupVisibilityCondition,
-	TabConfig
+	TabConfig,
+	UISchema
 } from '@selvajs/schemas';
 import { isFileData } from '../utils/file-download';
 
@@ -148,6 +150,30 @@ export function isTabVisible(tab: TabConfig, values: Record<string, unknown>): b
 	);
 }
 
+/**
+ * The input items the form shows for these values: each passes its own condition, inside a
+ * shown group and, when tabbed, a shown tab. For a host that repeats the form back, such as a
+ * summary before a commit, without re-deriving the renderer's rules.
+ */
+export function visibleInputItems(
+	schema: UISchema,
+	values: Record<string, unknown>
+): InputLayoutItem[] {
+	const layout = schema?.layout;
+	const groups =
+		layout?.type === 'tabbed'
+			? (layout.tabs ?? []).filter((t) => isTabVisible(t, values)).flatMap((t) => t.groups ?? [])
+			: layout?.type === 'flat'
+				? (layout.groups ?? [])
+				: [];
+	return groups
+		.filter((g) => evaluateGroupVisibility(g, values))
+		.flatMap((g) => g.items ?? [])
+		.filter(
+			(i): i is InputLayoutItem => i.type === 'input' && evaluateVisibility(i, values).visible
+		);
+}
+
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/src/lib/styles/base.css

@@ -1,80 +1,95 @@
+@import '@fontsource-variable/hanken-grotesk';
+
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Surfaces, edges and states share one set of names in both modes; each mode only changes the
+   values. Ratios are WCAG 2.x. The roles and when to use each: docs/contributing/design-system.md. */
 :root {
-	--radius: 0.625rem;
 	--header-h: 3.5rem;
+	--below-header-h: calc(100svh - var(--header-h));
 	--page-px: 1rem;
 	--page-py: 1.75rem;
-	--background: oklch(0.99 0 0);
-	--foreground: oklch(0.22 0 0);
-	/* White, so a card stands apart from background and muted; Group adds a border, since
-	   white on background alone is too close to see. */
+	/* Canvas, then surface (cards, panels), then raised (rows, menus, popovers). Light can't go
+	   lighter than white, so raised is white too and lifts with a border and a shadow instead.
+	   Values follow stock shadcn neutral. */
+	--background: oklch(0.985 0 0);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.22 0 0);
-	--popover: oklch(0.99 0 0);
-	--popover-foreground: oklch(0.22 0 0);
-	/* 4.5:1 as text on background, card and muted, and under white text. */
-	--primary: oklch(0.52 0.07 135);
-	--primary-foreground: oklch(0.985 0 0);
-	--secondary: oklch(0.94 0 0);
-	--secondary-foreground: oklch(0.28 0 0);
-	--muted: oklch(0.95 0 0);
+	--raised: oklch(1 0 0);
+	/* Recessed fill for trays, table heads, code and skeletons: darker than the surface around it. */
+	--muted: oklch(0.97 0 0);
+	/* Fill of anything you type into, on a card: recessed, the same step as muted, in both modes.
+	   The edge (`--input`) carries the boundary. */
+	--field: var(--muted);
+	--foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	/* 4.5:1 on every surface. */
 	--muted-foreground: oklch(0.5 0 0);
-	--accent: oklch(0.93 0 0);
-	--accent-foreground: oklch(0.3 0 0);
-	/* 4.5:1 as small text on background, card and muted, and under white text. */
-	--destructive: oklch(0.55 0.19 27);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.86 0 0);
-	/* Field borders and unchecked boxes: at least 3:1 against background, card and muted, the
-	   WCAG minimum for a control's boundary. Same for the focus ring, which is drawn opaque. */
-	--input: oklch(0.62 0 0);
-	--ring: oklch(0.55 0 0);
-	--success: oklch(0.66 0.14 145);
+	/* Icons, placeholders, disabled text: 3:1 on every surface. */
+	--faint-foreground: oklch(0.6 0 0);
+	/* State overlays, laid over whatever surface is underneath. */
+	--hover: oklch(0 0 0 / 4%);
+	--selected: oklch(0 0 0 / 8%);
+	/* Rest fill of a neutral filled control; its hover is `selected`. */
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	/* Outlines and separators. */
+	--border: oklch(0 0 0 / 8%);
+	/* Popovers, outline buttons, dashed drop zones. */
+	--border-strong: oklch(0 0 0 / 14%);
+	/* Edge of anything you type into or toggle, slider tracks included. Softer than the 3:1 WCAG
+	   boundary minimum in both modes: the recessed field fill carries the rest of the boundary. */
+	--input: oklch(0 0 0 / 10%);
+	--ring: oklch(0.708 0 0);
+	--elevation-raised: 0 1px 2px oklch(0 0 0 / 5%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 10%);
+	/* 4.5:1 as text on a card and under its foreground; 3:1 as a fill on every surface. */
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--destructive: #c9302d;
+	--destructive-foreground: #fbfbfb;
+	/* 3:1 on every surface, as icons and dots. */
+	--success: #51a556;
 	--success-foreground: oklch(0.99 0 0);
-	--warning: oklch(0.78 0.12 75);
+	--warning: #bd8630;
 	--warning-foreground: oklch(0.25 0.04 75);
-	--info: oklch(0.68 0.11 245);
+	--info: #5399d1;
 	--info-foreground: oklch(0.99 0 0);
 	--chart-1: oklch(0.65 0.14 135);
 	--chart-2: oklch(0.7 0.11 200);
 	--chart-3: oklch(0.6 0.13 260);
 	--chart-4: oklch(0.78 0.13 80);
 	--chart-5: oklch(0.68 0.15 30);
-	--sidebar: oklch(0.96 0 0);
-	--sidebar-foreground: oklch(0.25 0 0);
-	--sidebar-primary: oklch(0.52 0.07 135);
-	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.93 0 0);
-	--sidebar-accent-foreground: oklch(0.3 0 0);
-	--sidebar-border: oklch(0.88 0 0);
-	--sidebar-ring: oklch(0.55 0 0);
-	--inputparam: oklch(1 0 0);
-	--outputparam: oklch(1 0 0);
 	/* Scrim behind modal dialogs and drawers. */
 	--overlay: oklch(0 0 0 / 50%);
 }
 
 .dark {
-	--background: oklch(0.17 0 0);
-	--foreground: oklch(0.96 0 0);
-	--card: oklch(0.23 0 0);
-	--card-foreground: oklch(0.96 0 0);
-	--popover: oklch(0.23 0 0);
-	--popover-foreground: oklch(0.96 0 0);
-	--primary: oklch(0.74 0.07 135);
-	--primary-foreground: oklch(0.18 0 0);
-	--secondary: oklch(0.3 0 0);
-	--secondary-foreground: oklch(0.96 0 0);
-	--muted: oklch(0.27 0 0);
-	--muted-foreground: oklch(0.72 0 0);
-	--accent: oklch(0.36 0 0);
-	--accent-foreground: oklch(0.92 0 0);
+	--background: oklch(0.145 0 0);
+	--card: oklch(0.205 0 0);
+	--raised: oklch(0.24 0 0);
+	--muted: oklch(0.269 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--faint-foreground: oklch(0.556 0 0);
+	--hover: oklch(1 0 0 / 6%);
+	--selected: oklch(1 0 0 / 10%);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--border-strong: oklch(1 0 0 / 18%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	/* Shadows barely show on a dark canvas, so raised things lean on the border instead. */
+	--elevation-raised: none;
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	/* White text can't reach 4.5:1 on a red light enough to also be text on the dark card. */
 	--destructive: oklch(0.7 0.17 22);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(1 0 0 / 14%);
-	--input: oklch(1 0 0 / 36%);
-	--ring: oklch(0.74 0 0);
+	--destructive-foreground: oklch(0.18 0 0);
 	--success: oklch(0.74 0.15 145);
 	--success-foreground: oklch(0.18 0.03 145);
 	--warning: oklch(0.8 0.14 75);
@@ -86,41 +101,39 @@
 	--chart-3: oklch(0.68 0.14 260);
 	--chart-4: oklch(0.78 0.14 80);
 	--chart-5: oklch(0.7 0.16 30);
-	--sidebar: oklch(0.21 0 0);
-	--sidebar-foreground: oklch(0.96 0 0);
-	--sidebar-primary: oklch(0.74 0.07 135);
-	--sidebar-primary-foreground: oklch(0.18 0 0);
-	--sidebar-accent: oklch(0.32 0 0);
-	--sidebar-accent-foreground: oklch(0.92 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.74 0 0);
-	--inputparam: oklch(0.15 0 0);
-	--outputparam: oklch(0.25 0 0);
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
-	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
-	--radius-xl: calc(var(--radius) + 4px);
+	/* Concentric: an item inside a padded container takes the container's radius minus the
+	   padding. A 12px menu with 4px padding holds 8px items; a 10px control with 2px padding
+	   holds 8px segments. */
+	--radius-sm: 6px;
+	--radius-inner: 8px;
+	--radius-md: 10px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
 	--color-card: var(--card);
 	--color-card-foreground: var(--card-foreground);
-	--color-popover: var(--popover);
+	--color-raised: var(--raised);
+	--color-popover: var(--raised);
 	--color-popover-foreground: var(--popover-foreground);
-	--color-primary: var(--primary);
-	--color-primary-foreground: var(--primary-foreground);
-	--color-secondary: var(--secondary);
-	--color-secondary-foreground: var(--secondary-foreground);
+	--color-field: var(--field);
 	--color-muted: var(--muted);
 	--color-muted-foreground: var(--muted-foreground);
-	--color-accent: var(--accent);
-	--color-accent-foreground: var(--accent-foreground);
+	--color-faint-foreground: var(--faint-foreground);
+	--color-hover: var(--hover);
+	--color-selected: var(--selected);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 	--color-destructive: var(--destructive);
 	--color-destructive-foreground: var(--destructive-foreground);
 	--color-overlay: var(--overlay);
 	--color-border: var(--border);
+	--color-border-strong: var(--border-strong);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
 	--color-success: var(--success);
@@ -134,21 +147,15 @@
 	--color-chart-3: var(--chart-3);
 	--color-chart-4: var(--chart-4);
 	--color-chart-5: var(--chart-5);
-	--color-sidebar: var(--sidebar);
-	--color-sidebar-foreground: var(--sidebar-foreground);
-	--color-sidebar-primary: var(--sidebar-primary);
-	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-	--color-sidebar-accent: var(--sidebar-accent);
-	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-	--color-sidebar-border: var(--sidebar-border);
-	--color-sidebar-ring: var(--sidebar-ring);
-	--color-inputparam: var(--inputparam);
-	--color-outputparam: var(--outputparam);
+	--shadow-raised: var(--elevation-raised);
+	--shadow-popover: var(--elevation-popover);
 }
 
 /* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the
    design-system lint rejects `text-[10px]`, `max-h-[85dvh]` and the like. */
 @theme {
+	/* Hanken Grotesk (OFL), self-hosted via Fontsource: the plugin UI runs offline from the .gha. */
+	--font-sans: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
 	/* Type tags, counters and other dense labels. */
 	--text-2xs: 0.625rem;
 	--text-2xs--line-height: calc(0.875 / 0.625);