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

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/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);

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/webp-to-png.ts

@@ -0,0 +1,48 @@
+// Grasshopper's PDF export can't read WebP: the plugin's PDF library has no WebP decoder, and
+// nothing on Windows or Rhino.Compute decodes it reliably. The browser can, so a WebP picked for
+// an input that also takes PNG is re-encoded here. PNG rather than JPEG keeps transparency.
+
+/** True when a WebP should go out as PNG: the input takes PNG, so a PNG is a valid value. */
+export function shouldConvertWebp(fileEnding: string, acceptedFormats: readonly string[]): boolean {
+	return fileEnding === '.webp' && acceptedFormats.includes('.png');
+}
+
+/** Whether the input takes a file with this ending, counting a WebP it would get as PNG. */
+export function acceptsFileEnding(fileEnding: string, acceptedFormats: readonly string[]): boolean {
+	const ending = fileEnding.toLowerCase();
+	if (acceptedFormats.length === 0 || acceptedFormats.includes(ending)) return true;
+	return shouldConvertWebp(ending, acceptedFormats);
+}
+
+const ascii = (bytes: Uint8Array, start: number, end: number) =>
+	String.fromCharCode(...bytes.subarray(start, end));
+
+/**
+ * By content, not name: image CDNs serve WebP from URLs with no extension or one naming another
+ * format. A WebP file starts `RIFF`, a 4-byte size, then `WEBP`.
+ */
+export async function isWebp(blob: Blob): Promise<boolean> {
+	if (blob.type === 'image/webp') return true;
+	const head = new Uint8Array(await blob.slice(0, 12).arrayBuffer());
+	return head.length === 12 && ascii(head, 0, 4) === 'RIFF' && ascii(head, 8, 12) === 'WEBP';
+}
+
+export async function webpToPng(blob: Blob): Promise<Blob> {
+	const bitmap = await createImageBitmap(blob);
+	try {
+		const canvas = document.createElement('canvas');
+		canvas.width = bitmap.width;
+		canvas.height = bitmap.height;
+		const context = canvas.getContext('2d');
+		if (!context) throw new Error('Canvas 2D context unavailable');
+		context.drawImage(bitmap, 0, 0);
+		return await new Promise<Blob>((resolve, reject) =>
+			canvas.toBlob(
+				(png) => (png ? resolve(png) : reject(new Error('PNG encoding failed'))),
+				'image/png'
+			)
+		);
+	} finally {
+		bitmap.close();
+	}
+}