@selvajs/ui 6.5.1-beta.0 → 6.6.0-beta.11

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;
+}

package/src/lib/schema/param-exporter.ts

@@ -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';
 import type {
 	UISchema,
 	ParameterPreset,
@@ -24,6 +26,7 @@ export function createSavedState(
 			if (item.type !== 'input') 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,
@@ -110,15 +113,18 @@ export function validateSavedState(
  * 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: ParameterPreset,
 	currentSchema: UISchema
 ): Record<string, unknown> {
 	const values: Record<string, unknown> = {};
+	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;
 		}
 	}
@@ -147,18 +153,15 @@ export function loadPreset(savedState: ParameterPreset, currentSchema: UISchema)
 	};
 }
 
-export function exportStateAsJson(savedState: ParameterPreset): void {
+/** Resolves false when the user cancelled the save. */
+export function exportStateAsJson(savedState: ParameterPreset): Promise<boolean> {
 	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: File): Promise<ParameterPreset> {

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

@@ -1,10 +1,12 @@
 import type {
 	LayoutItem,
+	OutputLayoutItem,
 	VisibilityRule,
 	VisibilityCondition,
 	GroupVisibilityCondition,
 	TabConfig
 } from '@selvajs/schemas';
+import { isFileData } from '../utils/file-download';
 
 export interface VisibilityResult {
 	visible: boolean;
@@ -76,6 +78,9 @@ export function evaluateVisibility(
 	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;
@@ -85,6 +90,24 @@ export function evaluateVisibility(
 	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: OutputLayoutItem, value: unknown): boolean {
+	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: LayoutItem): string {
 	return item.type === 'linebreak' ? item.id : item.paramId;

package/src/lib/styles/base.css

@@ -3,15 +3,19 @@
 :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);
+	/* 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);
@@ -19,10 +23,14 @@
 	--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);
+	/* 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);
-	--input: oklch(0.91 0 0);
-	--ring: oklch(0.67 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);
 	--success-foreground: oklch(0.99 0 0);
 	--warning: oklch(0.78 0.12 75);
@@ -36,14 +44,16 @@
 	--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);
 	--sidebar-border: oklch(0.88 0 0);
-	--sidebar-ring: oklch(0.67 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 {
@@ -62,8 +72,9 @@
 	--accent: oklch(0.36 0 0);
 	--accent-foreground: oklch(0.92 0 0);
 	--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%);
+	--input: oklch(1 0 0 / 36%);
 	--ring: oklch(0.74 0 0);
 	--success: oklch(0.74 0.15 145);
 	--success-foreground: oklch(0.18 0.03 145);
@@ -108,6 +119,8 @@
 	--color-accent: var(--accent);
 	--color-accent-foreground: var(--accent-foreground);
 	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-overlay: var(--overlay);
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
@@ -134,9 +147,66 @@
 	--color-outputparam: var(--outputparam);
 }
 
+/* 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 {
+	/* Type tags, counters and other dense labels. */
+	--text-2xs: 0.625rem;
+	--text-2xs--line-height: calc(0.875 / 0.625);
+	/* Bottom sheets cast their shadow upward. */
+	--shadow-sheet: 0 -4px 24px oklch(0 0 0 / 12%);
+	/* Width of anything that must keep a 1rem gutter on each side of the viewport. */
+	--container-screen-inset: calc(100% - 2rem);
+}
+
+@utility max-h-dialog {
+	max-height: 85dvh;
+}
+
+@utility no-scrollbar {
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+/* Number fields whose value is set elsewhere (a slider, a stepper) drop the browser's spinner. */
+@utility no-spinner {
+	appearance: textfield;
+	&::-webkit-inner-spin-button,
+	&::-webkit-outer-spin-button {
+		appearance: none;
+		margin: 0;
+	}
+}
+
+@utility rounded-inherit {
+	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/src/lib/types/actionButton.ts

@@ -1,9 +1,22 @@
+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/src/lib/types/presetLabels.ts

@@ -3,9 +3,9 @@
  * unset keys fall back to `DEFAULT_PRESET_LABELS`.
  */
 export interface PresetLabels {
-	// Toolbar buttons
-	saveButton: string;
-	loadButton: string;
+	// Panel footer menu
+	saveMenuItem: string;
+	loadMenuItem: string;
 
 	// Save dialog
 	saveDialogTitle: string;
@@ -19,6 +19,7 @@ export interface PresetLabels {
 	saveTagsLabel: string;
 	saveTagsPlaceholder: string;
 	saveNameRequired: string;
+	saveConfirmButton: string;
 
 	// Load dialog
 	loadDialogTitle: string;
@@ -47,12 +48,12 @@ export interface PresetLabels {
 }
 
 export const DEFAULT_PRESET_LABELS: PresetLabels = {
-	saveButton: 'Save State',
-	loadButton: 'Load State',
+	saveMenuItem: 'Save inputs…',
+	loadMenuItem: 'Load inputs…',
 
-	saveDialogTitle: 'Save Parameter State',
-	saveDialogDescription: 'Save the current parameter values as a .slvp file',
-	saveNameLabel: 'State Name *',
+	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',
@@ -60,10 +61,11 @@ export const DEFAULT_PRESET_LABELS: PresetLabels = {
 	saveAuthorPlaceholder: 'Your name or email',
 	saveTagsLabel: 'Tags',
 	saveTagsPlaceholder: 'facade, option-a, client-approved (comma-separated)',
-	saveNameRequired: 'Please enter a name for this state',
+	saveNameRequired: 'Please enter a name for these inputs',
+	saveConfirmButton: 'Save',
 
-	loadDialogTitle: 'Load Parameter State',
-	loadDialogDescription: 'Select a .slvp state file from your drive to load',
+	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/src/lib/utils/file-download.ts

@@ -1,6 +1,7 @@
-import { downloadFileDataByRoot, type FileData } from '@selvajs/compute/core';
+import { decodeBase64ToBinary, downloadFileDataByRoot, type FileData } from '@selvajs/compute/core';
 import { SvelteMap } from 'svelte/reactivity';
 import { APP_DEFAULTS } from '../constants';
+import { saveBlob } from './host-files';
 
 export const MIME_BY_EXT: Record<string, string> = {
 	'.png': 'image/png',
@@ -19,26 +20,15 @@ export const MIME_BY_EXT: Record<string, string> = {
 	'.stl': 'model/stl'
 };
 
-function saveSingleFile(file: FileData): void {
+function saveSingleFile(file: FileData): Promise<boolean> {
 	const ext = (file.fileType ?? '').toLowerCase();
 	const mime = MIME_BY_EXT[ext] ?? 'application/octet-stream';
 
-	let blob: Blob;
-	if (file.isBase64Encoded) {
-		const binary = atob(file.data);
-		const bytes = new Uint8Array(binary.length);
-		for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
-		blob = new Blob([bytes], { type: mime });
-	} else {
-		blob = new Blob([file.data], { type: mime });
-	}
+	const content = file.isBase64Encoded ? decodeBase64ToBinary(file.data) : file.data;
+	// decodeBase64ToBinary returns an ArrayBuffer-backed copy, never a SharedArrayBuffer view.
+	const blob = new Blob([content as BlobPart], { type: mime });
 
-	const fullName = `${file.fileName}${file.fileType ?? ''}`;
-	const a = document.createElement('a');
-	a.href = URL.createObjectURL(blob);
-	a.download = fullName;
-	a.click();
-	URL.revokeObjectURL(a.href);
+	return saveBlob(blob, `${file.fileName}${file.fileType ?? ''}`);
 }
 
 export async function downloadFiles(
@@ -53,14 +43,14 @@ export async function downloadFiles(
 			return;
 		}
 
-		// A lone file is saved as itself rather than zipped — the one case that needs the DOM
-		// directly. Everything else, including the per-root archive split, belongs to compute.
+		// A lone file is saved as itself rather than zipped. Everything else, including the
+		// per-root archive split, belongs to compute.
 		if (filesArray.length === 1) {
-			saveSingleFile(filesArray[0]);
+			await saveSingleFile(filesArray[0]);
 			return;
 		}
 
-		await downloadFileDataByRoot(filesArray, fileName);
+		await downloadFileDataByRoot(filesArray, fileName, null, { saveBlob });
 	} catch (error) {
 		console.error('[FileDownload] Error downloading files:', error);
 		throw error;

package/src/lib/utils/host-files.ts

@@ -0,0 +1,61 @@
+// Where a file the page offers goes, and where a file the page asks for comes from. A browser
+// gets an <a download> click and a hidden <input type=file>. A host whose WebView can't do
+// either safely (the Rhino panel) installs its own once at start-up, before the first save or pick.
+
+/** Resolves false when the user cancelled. An anchor download always resolves true: it can't tell. */
+export type BlobSaver = (blob: Blob, fileName: string) => Promise<boolean>;
+
+/** `accept` is what `<input accept>` takes: `.slvp,.sps`, `image/*`. Resolves null on cancel. */
+export type FilePicker = (options: { accept: string }) => Promise<File | null>;
+
+let saver: BlobSaver = saveWithAnchor;
+let picker: FilePicker = pickWithInput;
+
+export function setBlobSaver(next: BlobSaver): void {
+	saver = next;
+}
+
+export function setFilePicker(next: FilePicker): void {
+	picker = next;
+}
+
+export function saveBlob(blob: Blob, fileName: string): Promise<boolean> {
+	return saver(blob, fileName);
+}
+
+export function pickFile(options: { accept: string }): Promise<File | null> {
+	return picker(options);
+}
+
+async function saveWithAnchor(blob: Blob, fileName: string): Promise<boolean> {
+	const url = URL.createObjectURL(blob);
+	const a = document.createElement('a');
+	a.href = url;
+	a.download = fileName;
+	// Firefox only downloads from an anchor that is in the document.
+	document.body.appendChild(a);
+	a.click();
+	a.remove();
+	// Revoking synchronously can abort the download: the browser pins the blob only once it starts.
+	setTimeout(() => URL.revokeObjectURL(url), 10_000);
+	return true;
+}
+
+function pickWithInput({ accept }: { accept: string }): Promise<File | null> {
+	return new Promise((resolve) => {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = accept;
+		input.style.display = 'none';
+
+		const settle = (file: File | null) => {
+			input.remove();
+			resolve(file);
+		};
+		input.addEventListener('change', () => settle(input.files?.[0] ?? null), { once: true });
+		input.addEventListener('cancel', () => settle(null), { once: true });
+
+		document.body.appendChild(input);
+		input.click();
+	});
+}

package/src/lib/utils/loadScript.ts

@@ -8,6 +8,8 @@ export function loadScript(
 	src: string,
 	options?: {
 		crossOrigin?: string;
+		/** Subresource Integrity hash. A cross-origin script also needs `crossOrigin`. */
+		integrity?: string;
 		async?: boolean;
 		defer?: boolean;
 	}
@@ -26,6 +28,7 @@ export function loadScript(
 		const script = document.createElement('script');
 		script.src = src;
 		if (options?.crossOrigin) script.crossOrigin = options.crossOrigin;
+		if (options?.integrity) script.integrity = options.integrity;
 		if (options?.async !== undefined) script.async = options.async;
 		if (options?.defer !== undefined) script.defer = options.defer;