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

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

@@ -7,6 +7,8 @@
 	import { APP_DEFAULTS } from '../../../constants';
 	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
 	import { formatMessage } from '../../../i18n/messages';
+	import { pickFile } from '../../../utils/host-files';
+	import { acceptsFileEnding, isWebp, shouldConvertWebp, webpToPng } from '../../../utils/webp-to-png';
 
 	interface Props {
 		value?: string;
@@ -40,7 +42,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 +95,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 +157,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 +176,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 +219,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 +267,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)}

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { Button } from '../../primitives/button';
+	import type { GeometryPickResult, PickKind } from '../../../contexts/hostContext.svelte';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
+	import type { ViewerMessages } from '../../../i18n/messages';
+
+	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';
+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/OptionGlyph.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { GlyphSource } from '../../../schema/option-display';
+	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';
+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,44 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import * as ToggleGroup from '../../primitives/toggle-group';
+	import { optionGlyph } from '../../../schema/option-display';
+	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"
+	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/TileInput.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import { optionGlyph } from '../../../schema/option-display';
+	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"
+			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/5 ring-1 ring-primary'
+				: 'border-input hover:bg-accent/40'}"
+		>
+			<span
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted 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 truncate" 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/SolvingIndicator.svelte

@@ -3,9 +3,16 @@
 
 	interface Props {
 		show: boolean;
+		/**
+		 * `floating` overlays the bottom-left corner. `inline` is a compact chip the size of an
+		 * icon button, for a narrow host whose corner holds its content and whose action row
+		 * already reserves the chip's place. That host freezes while it solves, so the chip says
+		 * Esc aborts: a frozen page can't offer a button.
+		 */
+		placement?: 'floating' | 'inline';
 	}
 
-	let { show }: Props = $props();
+	let { show, placement = 'floating' }: Props = $props();
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -13,8 +20,26 @@
 
 <!-- The live region stays mounted: a screen reader only announces text that changes inside a
      region it already knows about, so one created together with its text says nothing. -->
-<div role="status" aria-live="polite" aria-atomic="true">
-	{#if show}
+<div
+	role="status"
+	aria-live="polite"
+	aria-atomic="true"
+	class={placement === 'inline' ? 'h-10 gap-3 min-w-0 flex items-center' : undefined}
+>
+	{#if show && placement === 'inline'}
+		<div
+			class="gap-2 px-3 h-10 text-sm font-semibold flex shrink-0 items-center rounded-md bg-primary text-primary-foreground"
+		>
+			<div
+				class="h-3 w-3 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"
+				aria-hidden="true"
+			></div>
+			{t.solvingEllipsis}
+		</div>
+		<span class="text-xs min-w-0 truncate text-muted-foreground" data-testid="solve-esc-hint">
+			{t.solveMessagesEscHint}
+		</span>
+	{:else if show}
 		<div
 			class="bottom-6 left-6 gap-3 px-5 py-3 shadow-xl animate-in fade-in slide-in-from-left fixed z-50 flex items-center rounded-lg border border-primary/20 bg-primary text-primary-foreground duration-200"
 		>

package/dist/components/primitives/SolvingIndicator.svelte.d.ts

@@ -1,5 +1,12 @@
 interface Props {
     show: boolean;
+    /**
+     * `floating` overlays the bottom-left corner. `inline` is a compact chip the size of an
+     * icon button, for a narrow host whose corner holds its content and whose action row
+     * already reserves the chip's place. That host freezes while it solves, so the chip says
+     * Esc aborts: a frozen page can't offer a button.
+     */
+    placement?: 'floating' | 'inline';
 }
 declare const SolvingIndicator: import("svelte").Component<Props, {}, "">;
 type SolvingIndicator = ReturnType<typeof SolvingIndicator>;

package/dist/components/primitives/button/button.svelte

@@ -12,6 +12,9 @@
 					'bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground',
 				outline:
 					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				// Outline with an opaque dark fill: the translucent one washes out over the light 3D canvas.
+				overlay:
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border',
 				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
 				dashed:

package/dist/components/primitives/button/button.svelte.d.ts

@@ -6,6 +6,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
         destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
         outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
         dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
@@ -25,6 +26,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
         destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
         outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
         dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";
@@ -44,6 +46,7 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90";
         destructive: "bg-destructive shadow-xs hover:bg-destructive/90 dark:bg-destructive/60 text-destructive-foreground";
         outline: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border";
+        overlay: "bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input border";
         secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80";
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50";
         dashed: "border border-dashed border-input bg-background text-muted-foreground hover:bg-muted hover:text-foreground";

package/dist/components/primitives/toggle/toggle.svelte

@@ -12,7 +12,9 @@
 				default:
 					'h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
 				sm: "h-7 min-w-7 rounded-md px-2.5 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-				lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2'
+				lg: 'h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				// Icon over a short label, so a row of options still fits a phone-width column.
+				stacked: 'min-h-12 min-w-0 flex-col gap-1 px-1 py-1.5 text-xs'
 			}
 		},
 		defaultVariants: {