@selvajs/ui 6.6.0-beta.8 → 7.0.0

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

@@ -0,0 +1,51 @@
+import { getContext, setContext } from 'svelte';
+import type { GeometryKind } from '@selvajs/schemas';
+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.
+
+export type GeometryPickResult =
+	| { outcome: 'picked'; summary: string }
+	| { outcome: 'cancelled' }
+	| { outcome: 'failed'; error: string };
+
+/** What a pick button can ask for: a Get Geometry filter's kinds, or Get Point/Line/Plane's own. */
+export type PickKind = GeometryKind | 'line' | 'plane';
+
+/** What a geometry input lets the user pick, as the host discovered it on the canvas. */
+export interface GeometryPickTarget {
+	/** The kinds its filter allows; absent when it takes anything. */
+	kinds?: readonly GeometryKind[];
+	/** 1 picks a single object. */
+	atMost?: number;
+}
+
+export interface HostActions {
+	host: UIHost;
+	/** Prompts in the Rhino viewport for a geometry input. The picked geometry stays in Grasshopper. */
+	pickGeometry?: (paramId: string) => Promise<GeometryPickResult>;
+	/** Empties a geometry input again, back to the definition's own value. */
+	clearGeometry?: (paramId: string) => void;
+	/**
+	 * Reports what the param holds after every pick or clear, including those another page asked
+	 * for; null when nothing is picked into it. Returns an unsubscribe.
+	 */
+	onGeometrySummary?: (paramId: string, listener: (summary: string | null) => void) => () => void;
+	describeGeometry?: (paramId: string) => GeometryPickTarget | undefined;
+	/** Presses a button input: one solve with `true`, then it goes back to `false`. */
+	trigger?: (paramId: string) => void;
+	/** Grasshopper refuses a press while it solves, so the button waits it out disabled. */
+	isSolving?: () => boolean;
+}
+
+const SELVA_HOST: HostActions = { host: 'selva' };
+const HOST_CONTEXT_KEY = Symbol('host-context');
+
+export function setHostContext(actions: HostActions): void {
+	setContext(HOST_CONTEXT_KEY, actions);
+}
+
+export function getHostContext(): HostActions {
+	return getContext<HostActions | undefined>(HOST_CONTEXT_KEY) ?? SELVA_HOST;
+}

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;
@@ -73,8 +75,14 @@ export interface ViewerMessages {
 	solveMessagesConfirm: string;
 	solveMessagesDiscard: string;
 	solveMessagesAbort: string;
+	/** Stands in for Abort where the page can't take a click mid-solve. */
+	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;
@@ -129,8 +137,52 @@ 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)
+	/** The pick button when the input takes several kinds of object. */
+	geometryPickAnyOne: string;
+	geometryPickAnyOther: string;
+	/** Shown while Rhino's viewport prompt for a pick is open. */
+	geometryPicking: string;
+	/** Where this page may not pick, such as a browser tab beside the Rhino panel. */
+	geometryPickInPanel: string;
+	geometryPickAgain: string;
+	geometryClear: string;
+	// The pick button when the input takes one kind: `One` picks a single object, `Other` several.
+	geometryPickPointOne: string;
+	geometryPickPointOther: string;
+	geometryPickPointCloudOne: string;
+	geometryPickPointCloudOther: string;
+	geometryPickCurveOne: string;
+	geometryPickCurveOther: string;
+	geometryPickLineOne: string;
+	geometryPickLineOther: string;
+	geometryPickPlaneOne: string;
+	geometryPickPlaneOther: string;
+	geometryPickSurfaceOne: string;
+	geometryPickSurfaceOther: string;
+	geometryPickPolysurfaceOne: string;
+	geometryPickPolysurfaceOther: string;
+	geometryPickExtrusionOne: string;
+	geometryPickExtrusionOther: string;
+	geometryPickMeshOne: string;
+	geometryPickMeshOther: string;
+	geometryPickSubdOne: string;
+	geometryPickSubdOther: string;
+	geometryPickBlockOne: string;
+	geometryPickBlockOther: string;
+
 	// File input
 	fileModeUpload: string;
 	fileModeUrl: string;
@@ -183,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. */
@@ -232,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',
@@ -261,8 +316,11 @@ const en: ViewerMessages = {
 	solveMessagesConfirm: 'Continue',
 	solveMessagesDiscard: 'Discard',
 	solveMessagesAbort: 'Abort',
+	solveMessagesEscHint: 'Esc aborts the solve',
 	solveMessagesDismiss: 'Dismiss',
 	solveSolving: 'Solving…',
+	solveDone: 'Done',
+	solveStopped: 'Stopped',
 	parametersTab: 'Parameters',
 	moreTab: 'More',
 	scrollTabsBack: 'Previous tabs',
@@ -303,8 +361,45 @@ 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',
+	geometryPickAnyOther: 'Pick objects',
+	geometryPicking: 'Pick in the viewport, Esc to cancel',
+	geometryPickInPanel: 'Pick in the Rhino panel',
+	geometryPickAgain: 'Pick again',
+	geometryClear: 'Clear',
+	geometryPickPointOne: 'Pick a point',
+	geometryPickPointOther: 'Pick points',
+	geometryPickPointCloudOne: 'Pick a point cloud',
+	geometryPickPointCloudOther: 'Pick point clouds',
+	geometryPickCurveOne: 'Pick a curve',
+	geometryPickCurveOther: 'Pick curves',
+	geometryPickLineOne: 'Pick a line',
+	geometryPickLineOther: 'Pick lines',
+	geometryPickPlaneOne: 'Pick a plane',
+	geometryPickPlaneOther: 'Pick planes',
+	geometryPickSurfaceOne: 'Pick a surface',
+	geometryPickSurfaceOther: 'Pick surfaces',
+	geometryPickPolysurfaceOne: 'Pick a polysurface',
+	geometryPickPolysurfaceOther: 'Pick polysurfaces',
+	geometryPickExtrusionOne: 'Pick an extrusion',
+	geometryPickExtrusionOther: 'Pick extrusions',
+	geometryPickMeshOne: 'Pick a mesh',
+	geometryPickMeshOther: 'Pick meshes',
+	geometryPickSubdOne: 'Pick a SubD',
+	geometryPickSubdOther: 'Pick SubDs',
+	geometryPickBlockOne: 'Pick a block',
+	geometryPickBlockOther: 'Pick blocks',
+
 	fileModeUpload: 'Upload',
 	fileModeUrl: 'URL',
 	fileUrlLabel: 'File URL',
@@ -351,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}',
 
@@ -395,6 +491,8 @@ const de: ViewerMessages = {
 	lookTechnical: 'Technisch',
 	lookStudio: 'Studio',
 	lookShowcase: 'Präsentation',
+	lookNight: 'Nacht',
+	nightMode: 'Nachtmodus',
 	lookArctic: 'Arktis',
 	lookXray: 'Röntgen',
 	lookLineart: 'Strichzeichnung',
@@ -425,8 +523,11 @@ const de: ViewerMessages = {
 	solveMessagesConfirm: 'Weiter',
 	solveMessagesDiscard: 'Verwerfen',
 	solveMessagesAbort: 'Abbrechen',
+	solveMessagesEscHint: 'Esc bricht die Berechnung ab',
 	solveMessagesDismiss: 'Schliessen',
 	solveSolving: 'Berechnung läuft…',
+	solveDone: 'Fertig',
+	solveStopped: 'Abgebrochen',
 	parametersTab: 'Parameter',
 	moreTab: 'Mehr',
 	scrollTabsBack: 'Vorherige Tabs',
@@ -467,8 +568,45 @@ 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',
+	geometryPickAnyOther: 'Objekte wählen',
+	geometryPicking: 'Im Ansichtsfenster wählen, Esc bricht ab',
+	geometryPickInPanel: 'Im Rhino-Panel wählen',
+	geometryPickAgain: 'Neu wählen',
+	geometryClear: 'Leeren',
+	geometryPickPointOne: 'Punkt wählen',
+	geometryPickPointOther: 'Punkte wählen',
+	geometryPickPointCloudOne: 'Punktwolke wählen',
+	geometryPickPointCloudOther: 'Punktwolken wählen',
+	geometryPickCurveOne: 'Kurve wählen',
+	geometryPickCurveOther: 'Kurven wählen',
+	geometryPickLineOne: 'Linie wählen',
+	geometryPickLineOther: 'Linien wählen',
+	geometryPickPlaneOne: 'Ebene wählen',
+	geometryPickPlaneOther: 'Ebenen wählen',
+	geometryPickSurfaceOne: 'Fläche wählen',
+	geometryPickSurfaceOther: 'Flächen wählen',
+	geometryPickPolysurfaceOne: 'Flächenverband wählen',
+	geometryPickPolysurfaceOther: 'Flächenverbände wählen',
+	geometryPickExtrusionOne: 'Extrusion wählen',
+	geometryPickExtrusionOther: 'Extrusionen wählen',
+	geometryPickMeshOne: 'Netz wählen',
+	geometryPickMeshOther: 'Netze wählen',
+	geometryPickSubdOne: 'SubD wählen',
+	geometryPickSubdOther: 'SubDs wählen',
+	geometryPickBlockOne: 'Block wählen',
+	geometryPickBlockOther: 'Blöcke wählen',
+
 	fileModeUpload: 'Hochladen',
 	fileModeUrl: 'URL',
 	fileUrlLabel: 'Datei-URL',
@@ -516,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,25 @@ 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,
+	HOST_LABELS,
+	isGeometryParamType,
+	layoutItemKind,
+	hostsFor,
+	isSupportedOn,
+	valuelessInputIds,
+	unsupportedItems
+} from './schema/host-support';
 export * from './compute/solving.svelte';
 
 // Solve Session seam. Re-exported so transports outside this package — e.g.
@@ -54,10 +67,19 @@ export {
 
 export * from './contexts/footerContext.svelte';
 export * from './contexts/clientSlotContext.svelte';
+export * from './contexts/hostContext.svelte';
 export * from './composables/useFooterItem.svelte';
 
 export * from './utils';
 export { randomId } from './utils/randomId';
+export {
+	saveBlob,
+	pickFile,
+	setBlobSaver,
+	setFilePicker,
+	type BlobSaver,
+	type FilePicker
+} from './utils/host-files';
 
 // UI-specific runtime types (not from schema)
 export type { ActionButton } from './types/actionButton';

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/host-support.ts

@@ -0,0 +1,129 @@
+// Which elements of a schema each host renders. Worked out from the schema on every read and
+// never stored in it: a stored copy goes stale the way a saved paramType does. Making an element
+// work on Selva later is a change to SUPPORT, with no schema change and no migration.
+
+import type {
+	InputLayoutItem,
+	LayoutItem,
+	SchemaInput,
+	UISchema,
+	CheckboxWidgetConfig
+} from '@selvajs/schemas';
+import { getGroups } from '@selvajs/schemas';
+
+/**
+ * Where a UI runs: `rhino` is the plugin's page inside Rhino, solving in the user's own
+ * Grasshopper; `selva` is the Selva app, solving headless on Rhino.Compute.
+ */
+export type UIHost = 'rhino' | 'selva';
+
+/**
+ * - `value`: an input or output every host renders.
+ * - `geometry`: a Rhino Get Geometry/Point/Line/Plane input, filled by picking in the viewport.
+ * - `trigger`: a boolean input shown as a button; a press solves once with `true`.
+ * - `unknown`: a layout item from a newer schema than this build knows.
+ */
+export type ElementKind = 'value' | 'geometry' | 'trigger' | 'unknown';
+
+const SUPPORT: Record<ElementKind, readonly UIHost[]> = {
+	value: ['rhino', 'selva'],
+	geometry: ['rhino'],
+	trigger: ['rhino'],
+	unknown: []
+};
+
+export const HOST_LABELS: Record<UIHost, string> = { rhino: 'Rhino', selva: 'Selva' };
+
+const GEOMETRY_PARAM_TYPES: ReadonlySet<string> = new Set(['geometry', 'point', 'line', 'plane']);
+
+type WidgetTypeOf<T extends 'input' | 'output'> = Extract<LayoutItem, { type: T }>['widgetType'];
+
+// Keyed by the schema's own widget unions, so a widget added to the schema fails to compile here
+// until someone decides which hosts render it.
+const INPUT_WIDGETS = {
+	number: true,
+	text: true,
+	dropdown: true,
+	dynamicValueList: true,
+	checkbox: true,
+	file: true,
+	color: true
+} as const satisfies Record<WidgetTypeOf<'input'>, true>;
+const OUTPUT_WIDGETS = {
+	text: true,
+	number: true,
+	file: true,
+	chart: true,
+	image: true,
+	dynamicValueList: true
+} as const satisfies Record<WidgetTypeOf<'output'>, true>;
+
+const KNOWN_WIDGETS: Record<'input' | 'output', ReadonlySet<string>> = {
+	input: new Set(Object.keys(INPUT_WIDGETS)),
+	output: new Set(Object.keys(OUTPUT_WIDGETS))
+};
+
+/** The control comes from this, whatever the saved widgetType says: saved ones hold `text`. */
+export function isGeometryParamType(paramType: string | undefined): boolean {
+	return paramType !== undefined && GEOMETRY_PARAM_TYPES.has(paramType);
+}
+
+export function isTriggerItem(item: LayoutItem): boolean {
+	return (
+		item.type === 'input' &&
+		item.widgetType === 'checkbox' &&
+		(item.config as CheckboxWidgetConfig | undefined)?.displayAs === 'button'
+	);
+}
+
+export function layoutItemKind(item: LayoutItem, inputs: readonly SchemaInput[]): ElementKind {
+	if (item.type === 'linebreak') return 'value';
+	if (item.type !== 'input' && item.type !== 'output') return 'unknown';
+	if (item.type === 'input') {
+		const paramType = inputs.find((i) => i.id === item.paramId)?.paramType;
+		if (isGeometryParamType(paramType)) return 'geometry';
+	}
+	if (!KNOWN_WIDGETS[item.type].has(item.widgetType)) return 'unknown';
+	return isTriggerItem(item) ? 'trigger' : 'value';
+}
+
+export function hostsFor(kind: ElementKind): readonly UIHost[] {
+	return SUPPORT[kind];
+}
+
+export function isSupportedOn(host: UIHost, kind: ElementKind): boolean {
+	return SUPPORT[kind].includes(host);
+}
+
+/**
+ * Inputs the form keeps no value for: geometry lives on the Grasshopper param after a pick, and a
+ * button only sends a press. Value updates and presets skip them; holding a button's `true` would
+ * fire its action again on every solve.
+ */
+export function isValuelessInput(item: InputLayoutItem, input: SchemaInput | undefined): boolean {
+	return isGeometryParamType(input?.paramType) || isTriggerItem(item);
+}
+
+export function valuelessInputIds(schema: UISchema): Set<string> {
+	const ids = new Set<string>();
+	for (const input of schema.inputs) {
+		if (isGeometryParamType(input.paramType)) ids.add(input.id);
+	}
+	for (const group of getGroups(schema)) {
+		for (const item of group.items ?? []) {
+			if (isTriggerItem(item)) ids.add((item as InputLayoutItem).paramId);
+		}
+	}
+	return ids;
+}
+
+/** The placed items a host won't render, for the builder's summary of where the UI runs. */
+export function unsupportedItems(schema: UISchema, host: UIHost): LayoutItem[] {
+	const items: LayoutItem[] = [];
+	for (const group of getGroups(schema)) {
+		for (const item of group.items ?? []) {
+			if (!isSupportedOn(host, layoutItemKind(item, schema.inputs))) items.push(item);
+		}
+	}
+	return items;
+}

package/src/lib/schema/option-display.ts

@@ -0,0 +1,44 @@
+import type { DropdownWidgetConfig, OptionMedia, UISchema } from '@selvajs/schemas';
+
+export type OptionDisplay = NonNullable<DropdownWidgetConfig['displayAs']>;
+
+// Past this a button row no longer fits a panel column. A computed list can grow past it at
+// runtime, so the row turns back into a dropdown instead of wrapping.
+const MAX_SEGMENTED_OPTIONS = 6;
+
+export function resolveOptionDisplay(
+	displayAs: string | undefined,
+	optionCount: number
+): OptionDisplay {
+	switch (displayAs) {
+		case 'checklist':
+		case 'tiles':
+			return displayAs;
+		case 'segmented':
+			return optionCount <= MAX_SEGMENTED_OPTIONS ? 'segmented' : 'dropdown';
+		default:
+			return 'dropdown';
+	}
+}
+
+export type GlyphSource = { kind: 'icon'; d: string } | { kind: 'image'; src: string };
+
+// The schema can come from any .gh, so an image reaches <img> only as an inline raster data URI.
+// Anything else could be a URL that makes every viewer's browser call wherever the file points.
+const RASTER_DATA_URI = /^data:image\/(webp|jpeg|png);base64,[A-Za-z0-9+/=]+$/;
+
+/** What to draw beside an option: its thumbnail, else its icon. */
+export function optionGlyph(
+	media: OptionMedia | undefined,
+	assets: UISchema['assets'] | undefined
+): GlyphSource | undefined {
+	if (!media || !assets) return undefined;
+
+	if (media.image) {
+		const src = assets[media.image]?.img;
+		if (src && RASTER_DATA_URI.test(src)) return { kind: 'image', src };
+	}
+
+	const d = media.icon ? assets[media.icon]?.d : undefined;
+	return d ? { kind: 'icon', d } : undefined;
+}