@selvajs/ui 6.6.0-beta.8 → 7.0.0

package/dist/components/preview/inputs/FileInput.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-	import { Input } from '../../primitives/input';
-	import { Button } from '../../primitives/button';
-	import { Label } from '../../primitives/label';
-	import { toast } from '../../primitives/sonner';
+	import { Input } from '../../primitives/input/index.js';
+	import { Button } from '../../primitives/button/index.js';
+	import { Label } from '../../primitives/label/index.js';
+	import { toast } from '../../primitives/sonner/index.js';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
-	import { APP_DEFAULTS } from '../../../constants';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../../i18n/messages';
+	import { APP_DEFAULTS } from '../../../constants.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
+	import { pickFile } from '../../../utils/host-files.js';
+	import {
+		acceptsFileEnding,
+		isWebp,
+		shouldConvertWebp,
+		webpToPng
+	} from '../../../utils/webp-to-png.js';
 
 	interface Props {
 		value?: string;
@@ -40,7 +47,6 @@
 		activeMode = effectiveModes.includes(preferred) ? preferred : effectiveModes[0];
 	});
 
-	let fileInput: HTMLInputElement | null = $state(null);
 	let uploadedFileName = $state('');
 	let urlInput = $state('');
 	let isDragging = $state(false);
@@ -94,9 +100,27 @@
 		return ext.toLowerCase();
 	}
 
-	function isValidFileExtension(fileEnding: string): boolean {
-		if (acceptedFormats.length === 0) return true;
-		return acceptedFormats.includes(fileEnding.toLowerCase());
+	// Runs before the size cap: the PNG is larger than the WebP it came from. A WebP already over
+	// the cap is passed through unconverted, so the cap rejects it without a full decode.
+	async function prepare(
+		blob: Blob,
+		fileEnding: string
+	): Promise<{ blob: Blob; fileEnding: string }> {
+		if (blob.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) return { blob, fileEnding };
+		if (!shouldConvertWebp(fileEnding, acceptedFormats)) return { blob, fileEnding };
+		return { blob: await webpToPng(blob), fileEnding: '.png' };
+	}
+
+	function readBase64(blob: Blob): Promise<string> {
+		return new Promise<string>((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onload = (e) => {
+				const result = e.target?.result as string;
+				resolve(result.includes(',') ? result.split(',')[1] : result);
+			};
+			reader.onerror = () => reject(new Error(t.fileReadFailed));
+			reader.readAsDataURL(blob);
+		});
 	}
 
 	function isCorsError(error: unknown): boolean {
@@ -138,14 +162,16 @@
 				return;
 			}
 
-			const blob = await response.blob();
-			const fileEnding = getFileExtension(urlInput);
+			const fetched = await response.blob();
+			const requestedEnding = (await isWebp(fetched)) ? '.webp' : getFileExtension(urlInput);
 
-			if (!isValidFileExtension(fileEnding)) {
-				urlError = { message: formatNotAccepted(fileEnding), isCors: false };
+			if (!acceptsFileEnding(requestedEnding, acceptedFormats)) {
+				urlError = { message: formatNotAccepted(requestedEnding), isCors: false };
 				return;
 			}
 
+			const { blob, fileEnding } = await prepare(fetched, requestedEnding);
+
 			const maxSize = APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES;
 			if (blob.size > maxSize) {
 				urlError = {
@@ -155,15 +181,7 @@
 				return;
 			}
 
-			const base64Data = await new Promise<string>((resolve, reject) => {
-				const reader = new FileReader();
-				reader.onload = (e) => {
-					const result = e.target?.result as string;
-					resolve(result.includes(',') ? result.split(',')[1] : result);
-				};
-				reader.onerror = () => reject(new Error(t.fileReadFailed));
-				reader.readAsDataURL(blob);
-			});
+			const base64Data = await readBase64(blob);
 			const data = JSON.stringify({ file: base64Data, type: 'base64', fileEnding });
 			value = data;
 			urlSuccess = formatMessage(t.fileLoaded, {
@@ -206,48 +224,39 @@
 		}
 	}
 
-	function handleFileUpload(event: Event) {
-		const target = event.target as HTMLInputElement;
-		const file = target.files?.[0];
-		if (!file) return;
-
-		const fileEnding = getFileExtension(file.name);
-
-		if (!isValidFileExtension(fileEnding)) {
-			toast.error(formatNotAccepted(fileEnding));
-			return;
-		}
+	async function handleFile(file: File) {
+		const requestedEnding = getFileExtension(file.name);
 
-		// The file is base64-embedded into the compute request body, so without a
-		// client-side cap an oversize file comes back as an opaque 413. This cap is
-		// currently LOOSER than the server's COMPUTE_REQUEST_MAX_BYTES (see the TEMP
-		// note in constants.ts) — some files pass here and still 413. The URL import
-		// path applies the same cap.
-		if (file.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) {
-			toast.error(formatTooLarge(file.size));
+		if (!acceptsFileEnding(requestedEnding, acceptedFormats)) {
+			toast.error(formatNotAccepted(requestedEnding));
 			return;
 		}
 
-		uploadedFileName = file.name;
-
-		const reader = new FileReader();
-		reader.onload = (e) => {
-			const base64 = e.target?.result as string;
-			const base64Data = base64.includes(',') ? base64.split(',')[1] : base64;
+		try {
+			const { blob, fileEnding } = await prepare(file, requestedEnding);
+
+			// The file is base64-embedded into the compute request body, so without a
+			// client-side cap an oversize file comes back as an opaque 413. This cap is
+			// currently LOOSER than the server's COMPUTE_REQUEST_MAX_BYTES (see the TEMP
+			// note in constants.ts) — some files pass here and still 413. The URL import
+			// path applies the same cap.
+			if (blob.size > APP_DEFAULTS.FILE_UPLOAD.MAX_SIZE_BYTES) {
+				toast.error(formatTooLarge(blob.size));
+				return;
+			}
 
-			const data = JSON.stringify({
-				file: base64Data,
-				type: 'base64',
-				fileEnding
-			});
+			uploadedFileName = file.name;
+			const data = JSON.stringify({ file: await readBase64(blob), type: 'base64', fileEnding });
 			value = data;
 			onChange(data);
-		};
-		reader.readAsDataURL(file);
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : t.fileReadFailed);
+		}
 	}
 
-	function openFilePicker() {
-		fileInput?.click();
+	async function openFilePicker() {
+		const file = await pickFile({ accept: acceptAttribute });
+		if (file) handleFile(file);
 	}
 
 	function handleDragOver(e: DragEvent) {
@@ -263,27 +272,14 @@
 		e.preventDefault();
 		isDragging = false;
 
-		const files = e.dataTransfer?.files;
-		if (files?.[0]) {
-			const fakeEvent = new Event('change');
-			const fakeTarget = { files: files } as HTMLInputElement;
-			Object.defineProperty(fakeEvent, 'target', { value: fakeTarget });
-			handleFileUpload(fakeEvent);
-		}
+		const file = e.dataTransfer?.files?.[0];
+		if (file) handleFile(file);
 	}
 
 	const acceptAttribute = $derived(acceptedFormats.length > 0 ? acceptedFormats.join(',') : '*');
 </script>
 
 <div class="gap-2.5 flex w-full flex-col">
-	<input
-		bind:this={fileInput}
-		type="file"
-		accept={acceptAttribute}
-		onchange={handleFileUpload}
-		class="hidden"
-	/>
-
 	{#if showToggle}
 		<div class="p-0.5 text-xs flex rounded-md bg-muted">
 			{#each effectiveModes as mode (mode)}
@@ -291,10 +287,10 @@
 					type="button"
 					onclick={() => (activeMode = mode)}
 					aria-pressed={activeMode === mode}
-					class={`px-3 py-1 font-medium flex-1 rounded-sm transition-colors ${
+					class={`px-3 py-1 font-medium flex-1 rounded-sm border transition-colors ${
 						activeMode === mode
-							? 'shadow-xs bg-background text-foreground'
-							: 'text-muted-foreground hover:text-foreground'
+							? 'shadow-xs border-border-strong bg-raised text-foreground'
+							: 'border-transparent text-muted-foreground hover:text-foreground'
 					}`}
 				>
 					{mode === 'upload' ? t.fileModeUpload : t.fileModeUrl}

package/dist/components/preview/inputs/GeometryInput.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { Button } from '../../primitives/button/index.js';
+	import type { GeometryPickResult, PickKind } from '../../../contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import type { ViewerMessages } from '../../../i18n/messages.js';
+
+	interface Props {
+		inputId: string;
+		/** The kinds of object the input takes; one kind names the button after it. */
+		kinds?: readonly PickKind[];
+		/** 1 picks a single object. */
+		atMost?: number;
+		/** What the host reports the param holds, such as "2 curves"; absent until something is picked. */
+		summary?: string;
+		/** Absent where this page may not pick, such as a browser tab beside the Rhino panel. */
+		onPick?: () => Promise<GeometryPickResult>;
+		onClear?: () => void;
+		/** Subscribes to what the host holds after any page picks or clears; returns an unsubscribe. */
+		watchSummary?: (listener: (summary: string | null) => void) => () => void;
+		/** Shown when the pick fails; the host's own message. */
+		onError?: (message: string) => void;
+		disabled?: boolean;
+	}
+
+	let {
+		inputId,
+		kinds,
+		atMost,
+		summary,
+		onPick,
+		onClear,
+		watchSummary,
+		onError,
+		disabled = false
+	}: Props = $props();
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	type PickLabels = readonly [one: keyof ViewerMessages, other: keyof ViewerMessages];
+
+	const ANY_LABELS: PickLabels = ['geometryPickAnyOne', 'geometryPickAnyOther'];
+	const KIND_LABELS: Record<PickKind, PickLabels> = {
+		point: ['geometryPickPointOne', 'geometryPickPointOther'],
+		pointCloud: ['geometryPickPointCloudOne', 'geometryPickPointCloudOther'],
+		curve: ['geometryPickCurveOne', 'geometryPickCurveOther'],
+		line: ['geometryPickLineOne', 'geometryPickLineOther'],
+		plane: ['geometryPickPlaneOne', 'geometryPickPlaneOther'],
+		surface: ['geometryPickSurfaceOne', 'geometryPickSurfaceOther'],
+		polysurface: ['geometryPickPolysurfaceOne', 'geometryPickPolysurfaceOther'],
+		extrusion: ['geometryPickExtrusionOne', 'geometryPickExtrusionOther'],
+		mesh: ['geometryPickMeshOne', 'geometryPickMeshOther'],
+		subd: ['geometryPickSubdOne', 'geometryPickSubdOther'],
+		block: ['geometryPickBlockOne', 'geometryPickBlockOther']
+	};
+
+	const pickLabel = $derived.by(() => {
+		const [one, other] = kinds?.length === 1 ? KIND_LABELS[kinds[0]] : ANY_LABELS;
+		return t[atMost === 1 ? one : other];
+	});
+
+	// Rhino's command line prompts during the pick; the page keeps the button from being pressed
+	// twice and says where to look.
+	let picking = $state(false);
+	// The last pick or clear wins over what the host reported when the page loaded.
+	let local = $state<string | null | undefined>(undefined);
+	const shown = $derived(local !== undefined ? local : (summary ?? null));
+
+	$effect(() =>
+		watchSummary?.((held) => {
+			local = held;
+		})
+	);
+
+	async function pick(onPick: () => Promise<GeometryPickResult>) {
+		picking = true;
+		try {
+			const result = await onPick();
+			if (result.outcome === 'picked') local = result.summary;
+			else if (result.outcome === 'failed') onError?.(result.error);
+		} finally {
+			picking = false;
+		}
+	}
+
+	// The field label points at inputId: the button where there is one, else an <output>, which
+	// unlike a <span> can be labelled.
+	const readout = $derived(onPick ? 'span' : 'output');
+
+	function clear(onClear: () => void) {
+		local = null;
+		onClear();
+	}
+</script>
+
+<div class="gap-2 min-w-0 flex flex-wrap items-center">
+	{#if onPick}
+		<Button
+			id={inputId}
+			variant="outline"
+			size="sm"
+			onclick={() => pick(onPick)}
+			disabled={disabled || picking}
+		>
+			{shown ? t.geometryPickAgain : pickLabel}
+		</Button>
+	{/if}
+	{#if picking}
+		<span class="text-sm min-w-0 text-muted-foreground" role="status">{t.geometryPicking}</span>
+	{:else if shown}
+		<svelte:element
+			this={readout}
+			id={onPick ? undefined : inputId}
+			class="text-sm min-w-0 truncate text-foreground"
+		>
+			{shown}
+		</svelte:element>
+		{#if onClear}
+			<Button variant="ghost" size="sm" onclick={() => clear(onClear)} {disabled}>
+				{t.geometryClear}
+			</Button>
+		{/if}
+	{:else if !onPick}
+		<output id={inputId} class="text-sm min-w-0 text-muted-foreground"
+			>{t.geometryPickInPanel}</output
+		>
+	{/if}
+</div>

package/dist/components/preview/inputs/GeometryInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { GeometryPickResult, PickKind } from '../../../contexts/hostContext.svelte.js';
+interface Props {
+    inputId: string;
+    /** The kinds of object the input takes; one kind names the button after it. */
+    kinds?: readonly PickKind[];
+    /** 1 picks a single object. */
+    atMost?: number;
+    /** What the host reports the param holds, such as "2 curves"; absent until something is picked. */
+    summary?: string;
+    /** Absent where this page may not pick, such as a browser tab beside the Rhino panel. */
+    onPick?: () => Promise<GeometryPickResult>;
+    onClear?: () => void;
+    /** Subscribes to what the host holds after any page picks or clears; returns an unsubscribe. */
+    watchSummary?: (listener: (summary: string | null) => void) => () => void;
+    /** Shown when the pick fails; the host's own message. */
+    onError?: (message: string) => void;
+    disabled?: boolean;
+}
+declare const GeometryInput: import("svelte").Component<Props, {}, "">;
+type GeometryInput = ReturnType<typeof GeometryInput>;
+export default GeometryInput;

package/dist/components/preview/inputs/NumberInput.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '../../../utils/debounce';
-	import { Input } from '../../primitives/input';
-	import { Slider } from '../../primitives/slider';
-	import * as InputGroup from '../../primitives/input-group';
-	import { Separator } from '../../primitives/separator';
-	import * as Field from '../../primitives/field';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../../i18n/messages';
+	import { debounce } from '../../../utils/debounce.js';
+	import { Input } from '../../primitives/input/index.js';
+	import { Slider } from '../../primitives/slider/index.js';
+	import * as InputGroup from '../../primitives/input-group/index.js';
+	import { Separator } from '../../primitives/separator/index.js';
+	import * as Field from '../../primitives/field/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
 
 	interface Props {
 		inputId: string;

package/dist/components/preview/inputs/OptionGlyph.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { GlyphSource } from '../../../schema/option-display.js';
+	import { cn } from '../../../utils.js';
+
+	interface Props {
+		glyph: GlyphSource;
+		class?: string;
+	}
+
+	let { glyph, class: className }: Props = $props();
+</script>
+
+{#if glyph.kind === 'icon'}
+	<!-- Lucide's stroke defaults; the path is bound as an attribute, never parsed as markup. -->
+	<svg
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		aria-hidden="true"
+		class={cn('size-4 shrink-0', className)}
+	>
+		<path d={glyph.d} />
+	</svg>
+{:else}
+	<img src={glyph.src} alt="" class={cn('size-4 shrink-0 rounded-sm object-cover', className)} />
+{/if}

package/dist/components/preview/inputs/OptionGlyph.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { GlyphSource } from '../../../schema/option-display.js';
+interface Props {
+    glyph: GlyphSource;
+    class?: string;
+}
+declare const OptionGlyph: import("svelte").Component<Props, {}, "">;
+type OptionGlyph = ReturnType<typeof OptionGlyph>;
+export default OptionGlyph;

package/dist/components/preview/inputs/SegmentedInput.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import * as ToggleGroup from '../../primitives/toggle-group/index.js';
+	import { optionGlyph } from '../../../schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
+
+	interface Props {
+		labelId: string;
+		value?: string;
+		config: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { labelId, value, config, assets, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(Object.entries(config.options ?? {}));
+	const hasIcons = $derived(
+		options.some(([name]) => optionGlyph(config.optionMedia?.[name], assets))
+	);
+</script>
+
+<ToggleGroup.Root
+	type="single"
+	variant="outline"
+	spacing={0}
+	size={hasIcons ? 'stacked' : 'default'}
+	class="w-full"
+	aria-labelledby={labelId}
+	value={value ?? ''}
+	onValueChange={(next) => {
+		// A single-select group emits '' when the active item is clicked again; keep the selection.
+		if (next) onChange(next);
+	}}
+	{disabled}
+>
+	{#each options as [name, expr] (name)}
+		{@const glyph = optionGlyph(config.optionMedia?.[name], assets)}
+		<ToggleGroup.Item value={expr ?? name} class="min-w-0 flex-1" title={name}>
+			{#if glyph}<OptionGlyph {glyph} />{/if}
+			<span class="max-w-full truncate">{name}</span>
+		</ToggleGroup.Item>
+	{/each}
+</ToggleGroup.Root>

package/dist/components/preview/inputs/SegmentedInput.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+interface Props {
+    labelId: string;
+    value?: string;
+    config: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
+    onChange: (value: SupportedTypes) => void;
+    disabled?: boolean;
+}
+declare const SegmentedInput: import("svelte").Component<Props, {}, "">;
+type SegmentedInput = ReturnType<typeof SegmentedInput>;
+export default SegmentedInput;

package/dist/components/preview/inputs/TextInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { TextWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '../../../utils/debounce';
-	import { Input } from '../../primitives/input';
-	import * as Field from '../../primitives/field';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
-	import { formatMessage } from '../../../i18n/messages';
+	import { debounce } from '../../../utils/debounce.js';
+	import { Input } from '../../primitives/input/index.js';
+	import * as Field from '../../primitives/field/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
+	import { formatMessage } from '../../../i18n/messages.js';
 
 	interface Props {
 		inputId: string;

package/dist/components/preview/inputs/TileInput.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import { optionGlyph } from '../../../schema/option-display.js';
+	import OptionGlyph from './OptionGlyph.svelte';
+
+	interface Props {
+		labelId: string;
+		value?: string;
+		config: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
+		onChange: (value: SupportedTypes) => void;
+		disabled?: boolean;
+	}
+
+	let { labelId, value, config, assets, onChange, disabled = false }: Props = $props();
+
+	const options = $derived(
+		Object.entries(config.options ?? {}).map(([name, expr]) => ({ name, value: expr ?? name }))
+	);
+	// With nothing selected the first tile takes focus, so the group is still reachable by Tab.
+	const focusIndex = $derived(
+		Math.max(
+			0,
+			options.findIndex((o) => o.value === value)
+		)
+	);
+
+	let tiles: HTMLButtonElement[] = $state([]);
+
+	function onKeydown(event: KeyboardEvent, index: number) {
+		const step = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }[event.key];
+		if (!step) return;
+		event.preventDefault();
+		const next = (index + step + options.length) % options.length;
+		onChange(options[next].value);
+		tiles[next]?.focus();
+	}
+</script>
+
+<div role="radiogroup" aria-labelledby={labelId} class="gap-2 tile-grid grid">
+	{#each options as option, index (option.name)}
+		{@const glyph = optionGlyph(config.optionMedia?.[option.name], assets)}
+		{@const selected = option.value === value}
+		<button
+			bind:this={tiles[index]}
+			type="button"
+			role="radio"
+			title={option.name}
+			aria-checked={selected}
+			tabindex={index === focusIndex ? 0 : -1}
+			{disabled}
+			onclick={() => onChange(option.value)}
+			onkeydown={(e) => onKeydown(e, index)}
+			class="gap-1.5 p-1.5 min-w-0 flex flex-col rounded-lg border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 {selected
+				? 'border-primary bg-primary/10 ring-1 ring-primary'
+				: 'border-input hover:bg-hover'}"
+		>
+			<span
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted {selected
+					? 'text-foreground'
+					: 'text-muted-foreground'}"
+			>
+				{#if glyph?.kind === 'image'}
+					<OptionGlyph {glyph} class="size-full" />
+				{:else if glyph}
+					<OptionGlyph {glyph} class="size-7" />
+				{:else}
+					<span class="text-lg font-medium" aria-hidden="true">{option.name.charAt(0)}</span>
+				{/if}
+			</span>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
+				{option.name}
+			</span>
+		</button>
+	{/each}
+</div>
+
+<style>
+	/* Two or three tiles a row as the panel narrows; a fixed count shrinks them to unreadable. */
+	.tile-grid {
+		grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
+	}
+</style>

package/dist/components/preview/inputs/TileInput.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+interface Props {
+    labelId: string;
+    value?: string;
+    config: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
+    onChange: (value: SupportedTypes) => void;
+    disabled?: boolean;
+}
+declare const TileInput: import("svelte").Component<Props, {}, "">;
+type TileInput = ReturnType<typeof TileInput>;
+export default TileInput;

package/dist/components/preview/inputs/index.d.ts

@@ -3,5 +3,8 @@ export { default as ChecklistInput } from './ChecklistInput.svelte';
 export { default as ColorInput } from './ColorInput.svelte';
 export { default as DropdownInput } from './DropdownInput.svelte';
 export { default as FileInput } from './FileInput.svelte';
+export { default as GeometryInput } from './GeometryInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';
+export { default as SegmentedInput } from './SegmentedInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
+export { default as TileInput } from './TileInput.svelte';

package/dist/components/preview/inputs/index.js

@@ -3,5 +3,8 @@ export { default as ChecklistInput } from './ChecklistInput.svelte';
 export { default as ColorInput } from './ColorInput.svelte';
 export { default as DropdownInput } from './DropdownInput.svelte';
 export { default as FileInput } from './FileInput.svelte';
+export { default as GeometryInput } from './GeometryInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';
+export { default as SegmentedInput } from './SegmentedInput.svelte';
 export { default as TextInput } from './TextInput.svelte';
+export { default as TileInput } from './TileInput.svelte';

package/dist/components/primitives/CalculateButton.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { untrack, type Snippet } from 'svelte';
 	import { Button } from './button';
-	import { Zap, Check, Loader, Play } from '@lucide/svelte';
+	import { Zap, LoaderCircle, Play } from '@lucide/svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	const locale = getLocaleContext();
@@ -38,7 +38,7 @@
 	});
 </script>
 
-<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border">
 	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
 	<div class="gap-2 flex">
 		<Button
@@ -52,8 +52,14 @@
 			{!hasPendingChanges && !isSolving ? 'text-muted-foreground' : ''}"
 		>
 			{#if isSolving}
-				<Loader class="h-4 w-4 animate-spin" />
+				<LoaderCircle class="h-4 w-4 animate-spin" />
 				{t.solvingEllipsis}
+				<kbd
+					class="px-1 rounded-sm border border-current/30 font-sans text-2xs opacity-70"
+					title={t.solveMessagesEscHint}
+				>
+					Esc
+				</kbd>
 			{:else if hasNeverSolved}
 				<Play class="h-4 w-4" />
 				{t.pressToCalculate}
@@ -61,7 +67,7 @@
 				<Zap class="h-4 w-4" />
 				{t.calculate}
 			{:else}
-				<Check class="h-4 w-4" />
+				<span class="size-1.5 shrink-0 rounded-full bg-success" aria-hidden="true"></span>
 				{t.upToDate}
 			{/if}
 		</Button>