@selvajs/ui 6.6.0-beta.7 → 6.6.0-beta.9

package/dist/components/primitives/toggle/toggle.svelte.d.ts

@@ -8,6 +8,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
         sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
         lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
     };
 }, undefined, "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
@@ -18,6 +19,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
         sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
         lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
@@ -28,6 +30,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
         sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5";
         lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        stacked: "min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs";
     };
 }, undefined>>;
 export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];

package/dist/components/viewer/Viewer.svelte

@@ -40,6 +40,7 @@
 	import { Button } from '../primitives/button/index.js';
 	import type { Locale } from '../../i18n/messages';
 	import { layerLocaleContext } from '../../i18n/localeContext.svelte';
+	import { saveBlob } from '../../utils/host-files';
 
 	export interface ViewerConfig {
 		showScreenshotButton?: boolean;
@@ -433,15 +434,8 @@
 		const blob = await captureImage?.();
 		if (!blob) return;
 
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
 		const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
-		link.href = url;
-		link.download = `viewer-${timestamp}.png`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
+		await saveBlob(blob, `viewer-${timestamp}.png`);
 	}
 </script>
 
@@ -462,7 +456,7 @@
 				     the DOM, so this is the only observable proof a solve's geometry decoded and
 				     rendered; e2e asserts on it. -->
 				<canvas
-					class="block h-full w-full"
+					class="viewer-canvas block h-full w-full select-none"
 					data-testid="viewer-canvas"
 					data-mesh-count={meshes.length}
 					bind:this={canvas}
@@ -513,7 +507,7 @@
 								{#snippet child({ props })}
 									<Button
 										{...props}
-										variant="outline"
+										variant="overlay"
 										size="icon-lg"
 										title={t.toolsMenu}
 										aria-label={t.toolsMenu}
@@ -630,7 +624,7 @@
 						<!-- Touch has no F key, and fit-to-view is the way back from a framed part. -->
 						<div class="hidden pointer-coarse:block">
 							<Button
-								variant="outline"
+								variant="overlay"
 								size="icon-lg"
 								title={t.fitToView}
 								aria-label={t.fitToView}
@@ -666,6 +660,12 @@
 		border-radius: 0 !important;
 	}
 
+	/* A long press on touch otherwise selects the canvas as an image and opens the save/copy callout. */
+	.viewer-canvas {
+		-webkit-touch-callout: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
 	.blur-overlay {
 		pointer-events: none;
 	}

package/dist/compute/solving.svelte.d.ts

@@ -6,7 +6,13 @@
  * - Average over SLOW_THRESHOLD_MS: shown immediately
  * - Between the two: shown after a proportional slice of ANIMATION_DELAY
  * - First solve: shown immediately, there is no history yet
+ *
+ * `freezesDuringSolve` is for a host that can't paint while it solves (an embedded WebView on
+ * the solver's thread). There the indicator has to be on screen before the solve starts, when its
+ * length is still unknown, so it follows `isSolving` exactly: no history, no delay.
  */
-export declare function createSolvingIndicator(isSolving: () => boolean): {
+export declare function createSolvingIndicator(isSolving: () => boolean, options?: {
+    freezesDuringSolve?: boolean;
+}): {
     readonly show: boolean;
 };

package/dist/compute/solving.svelte.js

@@ -8,8 +8,19 @@ import { APP_DEFAULTS } from '../constants';
  * - Average over SLOW_THRESHOLD_MS: shown immediately
  * - Between the two: shown after a proportional slice of ANIMATION_DELAY
  * - First solve: shown immediately, there is no history yet
+ *
+ * `freezesDuringSolve` is for a host that can't paint while it solves (an embedded WebView on
+ * the solver's thread). There the indicator has to be on screen before the solve starts, when its
+ * length is still unknown, so it follows `isSolving` exactly: no history, no delay.
  */
-export function createSolvingIndicator(isSolving) {
+export function createSolvingIndicator(isSolving, options = {}) {
+    if (options.freezesDuringSolve) {
+        return {
+            get show() {
+                return isSolving();
+            }
+        };
+    }
     const { FAST_THRESHOLD_MS, SLOW_THRESHOLD_MS, HISTORY_SIZE, ANIMATION_DELAY } = APP_DEFAULTS.SOLVING_INDICATOR;
     let show = $state(false);
     let timeout = null;

package/dist/contexts/hostContext.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { GeometryKind } from '@selvajs/schemas';
+import type { UIHost } from '../schema/host-support';
+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;
+}
+export declare function setHostContext(actions: HostActions): void;
+export declare function getHostContext(): HostActions;

package/dist/contexts/hostContext.svelte.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const SELVA_HOST = { host: 'selva' };
+const HOST_CONTEXT_KEY = Symbol('host-context');
+export function setHostContext(actions) {
+    setContext(HOST_CONTEXT_KEY, actions);
+}
+export function getHostContext() {
+    return getContext(HOST_CONTEXT_KEY) ?? SELVA_HOST;
+}

package/dist/i18n/messages.d.ts

@@ -50,6 +50,8 @@ 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;
     parametersTab: string;
@@ -101,6 +103,37 @@ export interface ViewerMessages {
     maxLength: string;
     invalidFormat: string;
     invalidPattern: string;
+    /** 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;
+    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;
     fileModeUpload: string;
     fileModeUrl: string;
     fileUrlLabel: string;

package/dist/i18n/messages.js

@@ -58,6 +58,7 @@ const en = {
     solveMessagesConfirm: 'Continue',
     solveMessagesDiscard: 'Discard',
     solveMessagesAbort: 'Abort',
+    solveMessagesEscHint: 'Esc aborts the solve',
     solveMessagesDismiss: 'Dismiss',
     solveSolving: 'Solving…',
     parametersTab: 'Parameters',
@@ -98,6 +99,34 @@ const en = {
     maxLength: 'Maximum {max} characters allowed',
     invalidFormat: 'Invalid format',
     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',
@@ -203,6 +232,7 @@ const de = {
     solveMessagesConfirm: 'Weiter',
     solveMessagesDiscard: 'Verwerfen',
     solveMessagesAbort: 'Abbrechen',
+    solveMessagesEscHint: 'Esc bricht die Berechnung ab',
     solveMessagesDismiss: 'Schliessen',
     solveSolving: 'Berechnung läuft…',
     parametersTab: 'Parameter',
@@ -243,6 +273,34 @@ const de = {
     maxLength: 'Höchstens {max} Zeichen erlaubt',
     invalidFormat: 'Ungültiges Format',
     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',

package/dist/index.d.ts

@@ -9,15 +9,18 @@ export { default as Viewer } from './components/viewer/Viewer.svelte';
 export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
+export { type UIHost, type ElementKind, HOST_LABELS, isGeometryParamType, layoutItemKind, hostsFor, isSupportedOn, valuelessInputIds, unsupportedItems } from './schema/host-support';
 export * from './compute/solving.svelte';
 export { useSolveSession } from './compute/useSolveSession.svelte';
 export { createSolveSession, createRequestResponseDriver, type SolveSession, type SolveSessionArgs, type SolveSettlement, type SolveDriver, type SolveReporter, type LiveSolveState, type SolvePhase, EMPTY_LIVE_SOLVE, decodeOutcome, finalizeResult, type SolveOutcome } from '@selvajs/solve/client';
 export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs, type ExternalValueRef, type ExternalInput } from '@selvajs/solve/client';
 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';
 export type { ActionButton } from './types/actionButton';
 export type { SolveFn, SolveResult, SolveDiagnostic } from '@selvajs/solve/shared';
 export { DEFAULT_PRESET_LABELS, type PresetLabels } from './types/presetLabels';

package/dist/index.js

@@ -13,6 +13,7 @@ export { default as Viewer } from './components/viewer/Viewer.svelte';
 export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
+export { 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.
 // plugin-ui's WebSocket driver — can satisfy SolveDriver and drive a session.
@@ -25,7 +26,9 @@ EMPTY_LIVE_SOLVE, decodeOutcome, finalizeResult } from '@selvajs/solve/client';
 export { writeExternalValue, readExternalValue, clearExternalValue, getExternalInputs } from '@selvajs/solve/client';
 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 } from './utils/host-files';
 export { DEFAULT_PRESET_LABELS } from './types/presetLabels';

package/dist/schema/host-support.d.ts

@@ -0,0 +1,29 @@
+import type { InputLayoutItem, LayoutItem, SchemaInput, UISchema } 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';
+export declare const HOST_LABELS: Record<UIHost, string>;
+/** The control comes from this, whatever the saved widgetType says: saved ones hold `text`. */
+export declare function isGeometryParamType(paramType: string | undefined): boolean;
+export declare function isTriggerItem(item: LayoutItem): boolean;
+export declare function layoutItemKind(item: LayoutItem, inputs: readonly SchemaInput[]): ElementKind;
+export declare function hostsFor(kind: ElementKind): readonly UIHost[];
+export declare function isSupportedOn(host: UIHost, kind: ElementKind): boolean;
+/**
+ * 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 declare function isValuelessInput(item: InputLayoutItem, input: SchemaInput | undefined): boolean;
+export declare function valuelessInputIds(schema: UISchema): Set<string>;
+/** The placed items a host won't render, for the builder's summary of where the UI runs. */
+export declare function unsupportedItems(schema: UISchema, host: UIHost): LayoutItem[];

package/dist/schema/host-support.js

@@ -0,0 +1,97 @@
+// 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 { getGroups } from '@selvajs/schemas';
+const SUPPORT = {
+    value: ['rhino', 'selva'],
+    geometry: ['rhino'],
+    trigger: ['rhino'],
+    unknown: []
+};
+export const HOST_LABELS = { rhino: 'Rhino', selva: 'Selva' };
+const GEOMETRY_PARAM_TYPES = new Set(['geometry', 'point', 'line', 'plane']);
+// 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
+};
+const OUTPUT_WIDGETS = {
+    text: true,
+    number: true,
+    file: true,
+    chart: true,
+    image: true,
+    dynamicValueList: true
+};
+const KNOWN_WIDGETS = {
+    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) {
+    return paramType !== undefined && GEOMETRY_PARAM_TYPES.has(paramType);
+}
+export function isTriggerItem(item) {
+    return (item.type === 'input' &&
+        item.widgetType === 'checkbox' &&
+        item.config?.displayAs === 'button');
+}
+export function layoutItemKind(item, inputs) {
+    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) {
+    return SUPPORT[kind];
+}
+export function isSupportedOn(host, kind) {
+    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, input) {
+    return isGeometryParamType(input?.paramType) || isTriggerItem(item);
+}
+export function valuelessInputIds(schema) {
+    const ids = new Set();
+    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.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, host) {
+    const items = [];
+    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/dist/schema/option-display.d.ts

@@ -0,0 +1,12 @@
+import type { DropdownWidgetConfig, OptionMedia, UISchema } from '@selvajs/schemas';
+export type OptionDisplay = NonNullable<DropdownWidgetConfig['displayAs']>;
+export declare function resolveOptionDisplay(displayAs: string | undefined, optionCount: number): OptionDisplay;
+export type GlyphSource = {
+    kind: 'icon';
+    d: string;
+} | {
+    kind: 'image';
+    src: string;
+};
+/** What to draw beside an option: its thumbnail, else its icon. */
+export declare function optionGlyph(media: OptionMedia | undefined, assets: UISchema['assets'] | undefined): GlyphSource | undefined;

package/dist/schema/option-display.js

@@ -0,0 +1,29 @@
+// 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, optionCount) {
+    switch (displayAs) {
+        case 'checklist':
+        case 'tiles':
+            return displayAs;
+        case 'segmented':
+            return optionCount <= MAX_SEGMENTED_OPTIONS ? 'segmented' : 'dropdown';
+        default:
+            return 'dropdown';
+    }
+}
+// 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, assets) {
+    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;
+}

package/dist/schema/param-exporter.d.ts

@@ -14,6 +14,8 @@ export declare function validateSavedState(savedState: ParameterPreset, currentS
  * Params the current schema no longer has are dropped. That's the same condition
  * `validateSavedState` flags as an error, but the rule is re-derived from the schema here
  * rather than read back off the issue list — nothing couples to how sentinel ids are encoded.
+ * Valueless inputs are dropped too: a preset saved before an input became a button or a
+ * geometry input still holds a value for it.
  */
 export declare function extractLoadableValues(savedState: ParameterPreset, currentSchema: UISchema): Record<string, unknown>;
 export interface PresetLoadResult {
@@ -28,5 +30,6 @@ export interface PresetLoadResult {
 }
 /** Validates and computes the loadable values in one pass, so callers thread one object. */
 export declare function loadPreset(savedState: ParameterPreset, currentSchema: UISchema): PresetLoadResult;
-export declare function exportStateAsJson(savedState: ParameterPreset): void;
+/** Resolves false when the user cancelled the save. */
+export declare function exportStateAsJson(savedState: ParameterPreset): Promise<boolean>;
 export declare function importStateFromJson(file: File): Promise<ParameterPreset>;

package/dist/schema/param-exporter.js

@@ -1,5 +1,7 @@
 import { randomId } from '../utils/randomId';
+import { saveBlob } from '../utils/host-files';
 import { getGroups } from '@selvajs/schemas';
+import { isValuelessInput, valuelessInputIds } from './host-support';
 export function createSavedState(schema, currentValues, metadata) {
     const parameters = [];
     for (const group of getGroups(schema)) {
@@ -8,6 +10,8 @@ export function createSavedState(schema, currentValues, metadata) {
                 continue;
             const value = currentValues[item.paramId];
             const inputDef = schema.inputs.find((i) => i.id === item.paramId);
+            if (isValuelessInput(item, inputDef))
+                continue;
             if (value !== undefined && inputDef) {
                 parameters.push({
                     paramId: item.paramId,
@@ -78,12 +82,15 @@ export function validateSavedState(savedState, currentSchema) {
  * Params the current schema no longer has are dropped. That's the same condition
  * `validateSavedState` flags as an error, but the rule is re-derived from the schema here
  * rather than read back off the issue list — nothing couples to how sentinel ids are encoded.
+ * Valueless inputs are dropped too: a preset saved before an input became a button or a
+ * geometry input still holds a value for it.
  */
 export function extractLoadableValues(savedState, currentSchema) {
     const values = {};
+    const valueless = valuelessInputIds(currentSchema);
     for (const paramState of savedState.parameters) {
         const exists = currentSchema.inputs.some((i) => i.id === paramState.paramId);
-        if (exists) {
+        if (exists && !valueless.has(paramState.paramId)) {
             values[paramState.paramId] = paramState.value;
         }
     }
@@ -99,17 +106,14 @@ export function loadPreset(savedState, currentSchema) {
         canLoad: validation.canLoad
     };
 }
+/** Resolves false when the user cancelled the save. */
 export function exportStateAsJson(savedState) {
     const blob = new Blob([JSON.stringify(savedState, null, 2)], { type: 'application/json' });
     const safeName = savedState.name.replace(/[^a-z0-9]/gi, '_');
     const date = savedState.timestamp.split('T')[0].replace(/-/g, '_');
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
     // .slvp = Selva parameter preset. Import still accepts the pre-rename .sps — same JSON,
     // only the writer's extension changed.
-    link.download = `${safeName}_${date}.slvp`;
-    link.click();
-    URL.revokeObjectURL(link.href);
+    return saveBlob(blob, `${safeName}_${date}.slvp`);
 }
 export async function importStateFromJson(file) {
     const state = JSON.parse(await file.text());

package/dist/styles/base.css

@@ -7,11 +7,14 @@
 	--page-py: 1.75rem;
 	--background: oklch(0.99 0 0);
 	--foreground: oklch(0.22 0 0);
-	--card: oklch(0.985 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. */
+	--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);
-	--primary: oklch(0.57 0.07 135);
+	/* 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);
@@ -40,7 +43,7 @@
 	--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.57 0.07 135);
+	--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);