@selvajs/ui 6.6.0-beta.8 → 7.0.0

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 {
+	InputLayoutItem,
 	LayoutItem,
 	OutputLayoutItem,
 	VisibilityRule,
 	VisibilityCondition,
 	GroupVisibilityCondition,
-	TabConfig
+	TabConfig,
+	UISchema
 } from '@selvajs/schemas';
 import { isFileData } from '../utils/file-download';
 
@@ -148,6 +150,30 @@ export function isTabVisible(tab: TabConfig, values: Record<string, unknown>): b
 	);
 }
 
+/**
+ * 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: UISchema,
+	values: Record<string, unknown>
+): InputLayoutItem[] {
+	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 is InputLayoutItem => 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/src/lib/styles/base.css

@@ -1,77 +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;
+	--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);
-	/* 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);
-	/* 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);
+	/* 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.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 {
-	--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 / 36%);
-	--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);
@@ -83,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);
@@ -131,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);

package/src/lib/utils/color-space.ts

@@ -0,0 +1,107 @@
+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;
+}
+
+const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+
+/** Accepts `#rgb`, `#rrggbb` and the same without `#`. Returns lowercase `#rrggbb`, or null. */
+export function normalizeHex(input: string): string | null {
+	const raw = input.trim().replace(/^#/, '');
+	if (/^[0-9a-f]{3}$/i.test(raw)) {
+		return `#${raw
+			.split('')
+			.map((c) => c + c)
+			.join('')
+			.toLowerCase()}`;
+	}
+	if (/^[0-9a-f]{6}$/i.test(raw)) return `#${raw.toLowerCase()}`;
+	return null;
+}
+
+export function hexToRgb(hex: string): Rgb | null {
+	const normalized = normalizeHex(hex);
+	if (!normalized) return null;
+	return {
+		r: parseInt(normalized.slice(1, 3), 16),
+		g: parseInt(normalized.slice(3, 5), 16),
+		b: parseInt(normalized.slice(5, 7), 16)
+	};
+}
+
+export function rgbToHex({ r, g, b }: Rgb): string {
+	const channel = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, '0');
+	return `#${channel(r)}${channel(g)}${channel(b)}`;
+}
+
+export function rgbToHsv({ r, g, b }: Rgb): Hsv {
+	const rn = r / 255;
+	const gn = g / 255;
+	const bn = b / 255;
+	const max = Math.max(rn, gn, bn);
+	const delta = max - Math.min(rn, gn, bn);
+
+	let h = 0;
+	if (delta !== 0) {
+		if (max === rn) h = ((gn - bn) / delta) % 6;
+		else if (max === gn) h = (bn - rn) / delta + 2;
+		else h = (rn - gn) / delta + 4;
+		h *= 60;
+		if (h < 0) h += 360;
+	}
+	return { h, s: max === 0 ? 0 : delta / max, v: max };
+}
+
+export function hsvToRgb({ h, s, v }: Hsv): Rgb {
+	const c = v * s;
+	const hp = (((h % 360) + 360) % 360) / 60;
+	const x = c * (1 - Math.abs((hp % 2) - 1));
+	const [r1, g1, b1] =
+		hp < 1
+			? [c, x, 0]
+			: hp < 2
+				? [x, c, 0]
+				: hp < 3
+					? [0, c, x]
+					: hp < 4
+						? [0, x, c]
+						: hp < 5
+							? [x, 0, c]
+							: [c, 0, x];
+	const m = v - c;
+	return { r: (r1 + m) * 255, g: (g1 + m) * 255, b: (b1 + m) * 255 };
+}
+
+export const hexToHsv = (hex: string): Hsv | null => {
+	const rgb = hexToRgb(hex);
+	return rgb ? rgbToHsv(rgb) : null;
+};
+
+export const hsvToHex = (hsv: Hsv): string => rgbToHex(hsvToRgb(hsv));
+
+/** WCAG relative luminance of an sRGB color. */
+function luminance({ r, g, b }: Rgb): number {
+	const lin = (c: number) => {
+		const n = c / 255;
+		return n <= 0.04045 ? n / 12.92 : Math.pow((n + 0.055) / 1.055, 2.4);
+	};
+	return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** WCAG contrast ratio between two hex colors, 1 to 21. Null if either isn't a hex color. */
+export function contrastRatio(a: string, b: string): number | null {
+	const ra = hexToRgb(a);
+	const rb = hexToRgb(b);
+	if (!ra || !rb) return null;
+	const la = luminance(ra);
+	const lb = luminance(rb);
+	return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}

package/src/lib/utils/file-download.ts

@@ -1,6 +1,7 @@
 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,7 +20,7 @@ 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';
 
@@ -27,12 +28,7 @@ function saveSingleFile(file: FileData): void {
 	// 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(
@@ -47,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();
+	}
+}

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-	import { themeStore, type Theme } from '../../../theme/themeStore.svelte';
-	import * as Select from '../select';
-	import { Palette } from '@lucide/svelte';
-
-	const themes: { value: Theme; label: string; description: string }[] = [
-		{ value: 'neutral', label: 'Neutral', description: 'Classic grayscale' },
-		{ value: 'selva', label: 'Selva', description: 'Forest green' },
-		{ value: 'ocean', label: 'Ocean', description: 'Calm blue tones' },
-		{ value: 'cyberpunk', label: 'Cyberpunk', description: 'Vibrant neon colors' }
-	];
-
-	let value = $state(themeStore.current);
-
-	$effect(() => {
-		if (value) {
-			themeStore.set(value as Theme);
-		}
-	});
-
-	const triggerContent = $derived(themes.find((t) => t.value === value)?.label ?? 'Select theme');
-</script>
-
-<Select.Root type="single" bind:value>
-	<Select.Trigger class="gap-2 w-35">
-		<Palette size={14} />
-		<span>{triggerContent}</span>
-	</Select.Trigger>
-	<Select.Content>
-		{#each themes as theme (theme.value)}
-			<Select.Item value={theme.value} label={theme.label}>
-				<div class="flex flex-col items-start">
-					<span class="font-medium text-sm">{theme.label}</span>
-					<span class="text-xs text-muted-foreground">{theme.description}</span>
-				</div>
-			</Select.Item>
-		{/each}
-	</Select.Content>
-</Select.Root>

package/dist/components/primitives/theme-switcher/ThemeSwitcher.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const ThemeSwitcher: import("svelte").Component<Record<string, never>, {}, "">;
-type ThemeSwitcher = ReturnType<typeof ThemeSwitcher>;
-export default ThemeSwitcher;

package/dist/components/primitives/theme-switcher/index.d.ts

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';

package/dist/components/primitives/theme-switcher/index.js

@@ -1 +0,0 @@
-export { default as ThemeSwitcher } from './ThemeSwitcher.svelte';