@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

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/schema/visibility-rules.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition, TabConfig } from '@selvajs/schemas';
+import type { InputLayoutItem, LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition, TabConfig, UISchema } from '@selvajs/schemas';
 export interface VisibilityResult {
     visible: boolean;
     disabled: boolean;
@@ -20,6 +20,12 @@ export declare function evaluateGroupVisibility(group: {
     items?: LayoutItem[];
 }, values: Record<string, unknown>): boolean;
 export declare function isTabVisible(tab: TabConfig, values: Record<string, unknown>): boolean;
+/**
+ * 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 declare function visibleInputItems(schema: UISchema, values: Record<string, unknown>): InputLayoutItem[];
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/dist/schema/visibility-rules.js

@@ -1,3 +1,4 @@
+import { isFileData } from '../utils/file-download';
 const toStringArray = (value) => {
     if (Array.isArray(value))
         return value.map(String);
@@ -50,6 +51,9 @@ export function evaluateVisibility(item, values) {
     if ('visible' in item && item.visible === false) {
         return { visible: false, disabled: false };
     }
+    if (item.type === 'output' && drawsNothing(item, values[item.paramId])) {
+        return { visible: false, disabled: false };
+    }
     if (!item.visibilityCondition?.rules)
         return { visible: true, disabled: false };
     const { action = 'show', defaultValue } = item.visibilityCondition;
@@ -57,6 +61,23 @@ export function evaluateVisibility(item, values) {
     const actionFn = ACTIONS[action] ?? ACTIONS.show;
     return actionFn(met, defaultValue);
 }
+/**
+ * An image or chart output has nothing to draw until a solve returns its data, and an empty
+ * preview box would hold its group, tab and pane open; it counts as hidden until then. A dynamic
+ * value list output never draws: it only feeds the options of an input.
+ */
+function drawsNothing(item, value) {
+    switch (item.widgetType) {
+        case 'image':
+            return !(Array.isArray(value) ? value.some(isFileData) : isFileData(value));
+        case 'chart':
+            return value === undefined || value === null || value === '';
+        case 'dynamicValueList':
+            return true;
+        default:
+            return false;
+    }
+}
 /** Must stay identical to the key the renderers use in their `{#each}` blocks. */
 export function itemKey(item) {
     return item.type === 'linebreak' ? item.id : item.paramId;
@@ -85,6 +106,23 @@ export function evaluateGroupVisibility(group, values) {
 export function isTabVisible(tab, values) {
     return (tab.visible !== false && tab.groups.some((group) => evaluateGroupVisibility(group, values)));
 }
+/**
+ * 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, values) {
+    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.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/dist/styles/base.css

@@ -1,74 +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;
-	--page-px: 1.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);
-	--card: oklch(0.985 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);
-	--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);
+	/* 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);
+	--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);
-	--destructive: oklch(0.6 0.18 27);
-	--destructive-foreground: oklch(0.985 0 0);
-	--border: oklch(0.86 0 0);
-	--input: oklch(0.91 0 0);
-	--ring: oklch(0.67 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.57 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.67 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 / 12%);
-	--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);
@@ -80,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);
@@ -128,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);
@@ -177,9 +190,29 @@
 	border-radius: inherit;
 }
 
+/* Phones keep a narrower gutter: at 390px every 8px of side padding is 2% of the width. */
+@media (min-width: 40rem) {
+	:root {
+		--page-px: 1.5rem;
+	}
+}
+
+/* A native select draws its arrow inside the right padding, so with the `px-2`/`px-3` every
+   caller uses it sits on the border. A drawn chevron with its own gutter fixes them all. Unlayered
+   on purpose: the gutter has to beat the callers' `px-*` utilities. Mid-grey reads on both themes,
+   since a data URI can't take `currentColor`. */
+select:not([multiple]):not([size]) {
+	appearance: none;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: right 0.625rem center;
+	background-size: 1.1em;
+	padding-inline-end: calc(1.1em + 1rem);
+}
+
 @layer base {
 	* {
-		@apply border-border outline-ring/50;
+		@apply border-border outline-ring;
 	}
 	html,
 	body {

package/dist/types/actionButton.d.ts

@@ -1,9 +1,23 @@
+import type { SolveSettlement } from '@selvajs/solve/client';
+/** A host action, listed in the panel footer's ⋯ menu after saving and loading inputs. */
 export interface ActionButton {
     id: string;
     label: string;
     /** A Svelte component, rendered before the label. */
     icon?: any;
-    variant?: 'default' | 'outline' | 'destructive' | 'secondary' | 'ghost';
-    size?: 'default' | 'sm' | 'lg';
-    onclick: () => void | Promise<void>;
+    variant?: 'default' | 'destructive';
+    /** Shows the action as unavailable instead of hiding it. Pair it with a `hint` saying why. */
+    disabled?: boolean;
+    /** A short line under the label: why it is disabled, or what it does. */
+    hint?: string;
+    /**
+     * The action needs the result for the current inputs: picking it solves first when inputs
+     * changed, waits for a solve that is running or under review, and runs `onclick` only if
+     * that solve is applied. `onclick` then receives it. A refused or failed solve already shows
+     * its messages, so the action just doesn't run.
+     */
+    solvesFirst?: boolean;
+    onclick: (settled?: Extract<SolveSettlement, {
+        status: 'applied';
+    }>) => void | Promise<void>;
 }

package/dist/types/presetLabels.d.ts

@@ -3,8 +3,8 @@
  * unset keys fall back to `DEFAULT_PRESET_LABELS`.
  */
 export interface PresetLabels {
-    saveButton: string;
-    loadButton: string;
+    saveMenuItem: string;
+    loadMenuItem: string;
     saveDialogTitle: string;
     saveDialogDescription: string;
     saveNameLabel: string;
@@ -16,6 +16,7 @@ export interface PresetLabels {
     saveTagsLabel: string;
     saveTagsPlaceholder: string;
     saveNameRequired: string;
+    saveConfirmButton: string;
     loadDialogTitle: string;
     loadDialogDescription: string;
     loadFromFileButton: string;

package/dist/types/presetLabels.js

@@ -1,9 +1,9 @@
 export const DEFAULT_PRESET_LABELS = {
-    saveButton: 'Save State',
-    loadButton: 'Load State',
-    saveDialogTitle: 'Save Parameter State',
-    saveDialogDescription: 'Save the current parameter values as a .slvp file',
-    saveNameLabel: 'State Name *',
+    saveMenuItem: 'Save inputs…',
+    loadMenuItem: 'Load inputs…',
+    saveDialogTitle: 'Save inputs',
+    saveDialogDescription: 'Save the current input values as a .slvp file',
+    saveNameLabel: 'Name *',
     saveNamePlaceholder: 'e.g., Design Option A',
     saveDescriptionLabel: 'Description',
     saveDescriptionPlaceholder: 'Optional description of this state',
@@ -11,9 +11,10 @@ export const DEFAULT_PRESET_LABELS = {
     saveAuthorPlaceholder: 'Your name or email',
     saveTagsLabel: 'Tags',
     saveTagsPlaceholder: 'facade, option-a, client-approved (comma-separated)',
-    saveNameRequired: 'Please enter a name for this state',
-    loadDialogTitle: 'Load Parameter State',
-    loadDialogDescription: 'Select a .slvp state file from your drive to load',
+    saveNameRequired: 'Please enter a name for these inputs',
+    saveConfirmButton: 'Save',
+    loadDialogTitle: 'Load inputs',
+    loadDialogDescription: 'Select a .slvp file from your drive to load',
     loadFromFileButton: 'Select .slvp File',
     loadEmptyList: 'No saved states found',
     loadImportError: 'Failed to import state: ',

package/dist/utils/color-space.d.ts

@@ -0,0 +1,21 @@
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** h in [0, 360), s and v in [0, 1]. */
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export declare function normalizeHex(input: string): string | null;
+export declare function hexToRgb(hex: string): Rgb | null;
+export declare function rgbToHex({ r, g, b }: Rgb): string;
+export declare function rgbToHsv({ r, g, b }: Rgb): Hsv;
+export declare function hsvToRgb({ h, s, v }: Hsv): Rgb;
+export declare const hexToHsv: (hex: string) => Hsv | null;
+export declare const hsvToHex: (hsv: Hsv) => string;
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export declare function contrastRatio(a: string, b: string): number | null;