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

package/src/lib/components/preview/inputs/GeometryInput.svelte

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { GlyphSource } from '$lib/schema/option-display';
+	import { cn } from '$lib/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/src/lib/components/preview/inputs/SegmentedInput.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import * as ToggleGroup from '$lib/components/primitives/toggle-group';
+	import { optionGlyph } from '$lib/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/src/lib/components/preview/inputs/TileInput.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
+	import { optionGlyph } from '$lib/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/src/lib/components/preview/inputs/index.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/src/lib/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/src/lib/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/src/lib/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: {

package/src/lib/components/viewer/Viewer.svelte

@@ -40,6 +40,7 @@
 	import { Button } from '$lib/components/primitives/button/index.js';
 	import type { Locale } from '$lib/i18n/messages';
 	import { layerLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { saveBlob } from '$lib/utils/host-files';
 
 	export interface ViewerConfig {
 		showScreenshotButton?: boolean;
@@ -433,15 +434,8 @@
 		const blob = await captureImage?.();
 		if (!blob) return;
 
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
 		const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
-		link.href = url;
-		link.download = `viewer-${timestamp}.png`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
+		await saveBlob(blob, `viewer-${timestamp}.png`);
 	}
 </script>
 
@@ -462,7 +456,7 @@
 				     the DOM, so this is the only observable proof a solve's geometry decoded and
 				     rendered; e2e asserts on it. -->
 				<canvas
-					class="block h-full w-full"
+					class="viewer-canvas block h-full w-full select-none"
 					data-testid="viewer-canvas"
 					data-mesh-count={meshes.length}
 					bind:this={canvas}
@@ -513,7 +507,7 @@
 								{#snippet child({ props })}
 									<Button
 										{...props}
-										variant="outline"
+										variant="overlay"
 										size="icon-lg"
 										title={t.toolsMenu}
 										aria-label={t.toolsMenu}
@@ -630,7 +624,7 @@
 						<!-- Touch has no F key, and fit-to-view is the way back from a framed part. -->
 						<div class="hidden pointer-coarse:block">
 							<Button
-								variant="outline"
+								variant="overlay"
 								size="icon-lg"
 								title={t.fitToView}
 								aria-label={t.fitToView}
@@ -666,6 +660,12 @@
 		border-radius: 0 !important;
 	}
 
+	/* A long press on touch otherwise selects the canvas as an image and opens the save/copy callout. */
+	.viewer-canvas {
+		-webkit-touch-callout: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
 	.blur-overlay {
 		pointer-events: none;
 	}

package/src/lib/compute/solving.svelte.ts

@@ -9,8 +9,23 @@ import { APP_DEFAULTS } from '../constants';
  * - Average over SLOW_THRESHOLD_MS: shown immediately
  * - Between the two: shown after a proportional slice of ANIMATION_DELAY
  * - First solve: shown immediately, there is no history yet
+ *
+ * `freezesDuringSolve` is for a host that can't paint while it solves (an embedded WebView on
+ * the solver's thread). There the indicator has to be on screen before the solve starts, when its
+ * length is still unknown, so it follows `isSolving` exactly: no history, no delay.
  */
-export function createSolvingIndicator(isSolving: () => boolean): { readonly show: boolean } {
+export function createSolvingIndicator(
+	isSolving: () => boolean,
+	options: { freezesDuringSolve?: boolean } = {}
+): { readonly show: boolean } {
+	if (options.freezesDuringSolve) {
+		return {
+			get show() {
+				return isSolving();
+			}
+		};
+	}
+
 	const { FAST_THRESHOLD_MS, SLOW_THRESHOLD_MS, HISTORY_SIZE, ANIMATION_DELAY } =
 		APP_DEFAULTS.SOLVING_INDICATOR;
 

package/src/lib/contexts/hostContext.svelte.ts

@@ -0,0 +1,51 @@
+import { getContext, setContext } from 'svelte';
+import type { GeometryKind } from '@selvajs/schemas';
+import type { UIHost } from '$lib/schema/host-support';
+
+// Tells InputControl which host it renders in and how to reach the host's own actions, without
+// threading a prop through every layout layer. Without a provider the host is Selva.
+
+export type GeometryPickResult =
+	| { outcome: 'picked'; summary: string }
+	| { outcome: 'cancelled' }
+	| { outcome: 'failed'; error: string };
+
+/** What a pick button can ask for: a Get Geometry filter's kinds, or Get Point/Line/Plane's own. */
+export type PickKind = GeometryKind | 'line' | 'plane';
+
+/** What a geometry input lets the user pick, as the host discovered it on the canvas. */
+export interface GeometryPickTarget {
+	/** The kinds its filter allows; absent when it takes anything. */
+	kinds?: readonly GeometryKind[];
+	/** 1 picks a single object. */
+	atMost?: number;
+}
+
+export interface HostActions {
+	host: UIHost;
+	/** Prompts in the Rhino viewport for a geometry input. The picked geometry stays in Grasshopper. */
+	pickGeometry?: (paramId: string) => Promise<GeometryPickResult>;
+	/** Empties a geometry input again, back to the definition's own value. */
+	clearGeometry?: (paramId: string) => void;
+	/**
+	 * Reports what the param holds after every pick or clear, including those another page asked
+	 * for; null when nothing is picked into it. Returns an unsubscribe.
+	 */
+	onGeometrySummary?: (paramId: string, listener: (summary: string | null) => void) => () => void;
+	describeGeometry?: (paramId: string) => GeometryPickTarget | undefined;
+	/** Presses a button input: one solve with `true`, then it goes back to `false`. */
+	trigger?: (paramId: string) => void;
+	/** Grasshopper refuses a press while it solves, so the button waits it out disabled. */
+	isSolving?: () => boolean;
+}
+
+const SELVA_HOST: HostActions = { host: 'selva' };
+const HOST_CONTEXT_KEY = Symbol('host-context');
+
+export function setHostContext(actions: HostActions): void {
+	setContext(HOST_CONTEXT_KEY, actions);
+}
+
+export function getHostContext(): HostActions {
+	return getContext<HostActions | undefined>(HOST_CONTEXT_KEY) ?? SELVA_HOST;
+}

package/src/lib/i18n/messages.ts

@@ -73,6 +73,8 @@ export interface ViewerMessages {
 	solveMessagesConfirm: string;
 	solveMessagesDiscard: string;
 	solveMessagesAbort: string;
+	/** Stands in for Abort where the page can't take a click mid-solve. */
+	solveMessagesEscHint: string;
 	solveMessagesDismiss: string;
 	solveSolving: string;
 	parametersTab: string;
@@ -131,6 +133,40 @@ export interface ViewerMessages {
 	invalidFormat: string;
 	invalidPattern: string;
 
+	// Geometry input (Rhino only)
+	/** The pick button when the input takes several kinds of object. */
+	geometryPickAnyOne: string;
+	geometryPickAnyOther: string;
+	/** Shown while Rhino's viewport prompt for a pick is open. */
+	geometryPicking: string;
+	/** Where this page may not pick, such as a browser tab beside the Rhino panel. */
+	geometryPickInPanel: string;
+	geometryPickAgain: string;
+	geometryClear: string;
+	// The pick button when the input takes one kind: `One` picks a single object, `Other` several.
+	geometryPickPointOne: string;
+	geometryPickPointOther: string;
+	geometryPickPointCloudOne: string;
+	geometryPickPointCloudOther: string;
+	geometryPickCurveOne: string;
+	geometryPickCurveOther: string;
+	geometryPickLineOne: string;
+	geometryPickLineOther: string;
+	geometryPickPlaneOne: string;
+	geometryPickPlaneOther: string;
+	geometryPickSurfaceOne: string;
+	geometryPickSurfaceOther: string;
+	geometryPickPolysurfaceOne: string;
+	geometryPickPolysurfaceOther: string;
+	geometryPickExtrusionOne: string;
+	geometryPickExtrusionOther: string;
+	geometryPickMeshOne: string;
+	geometryPickMeshOther: string;
+	geometryPickSubdOne: string;
+	geometryPickSubdOther: string;
+	geometryPickBlockOne: string;
+	geometryPickBlockOther: string;
+
 	// File input
 	fileModeUpload: string;
 	fileModeUrl: string;
@@ -261,6 +297,7 @@ const en: ViewerMessages = {
 	solveMessagesConfirm: 'Continue',
 	solveMessagesDiscard: 'Discard',
 	solveMessagesAbort: 'Abort',
+	solveMessagesEscHint: 'Esc aborts the solve',
 	solveMessagesDismiss: 'Dismiss',
 	solveSolving: 'Solving…',
 	parametersTab: 'Parameters',
@@ -305,6 +342,35 @@ const en: ViewerMessages = {
 	invalidFormat: 'Invalid format',
 	invalidPattern: 'Invalid validation pattern configured',
 
+	geometryPickAnyOne: 'Pick an object',
+	geometryPickAnyOther: 'Pick objects',
+	geometryPicking: 'Pick in the viewport, Esc to cancel',
+	geometryPickInPanel: 'Pick in the Rhino panel',
+	geometryPickAgain: 'Pick again',
+	geometryClear: 'Clear',
+	geometryPickPointOne: 'Pick a point',
+	geometryPickPointOther: 'Pick points',
+	geometryPickPointCloudOne: 'Pick a point cloud',
+	geometryPickPointCloudOther: 'Pick point clouds',
+	geometryPickCurveOne: 'Pick a curve',
+	geometryPickCurveOther: 'Pick curves',
+	geometryPickLineOne: 'Pick a line',
+	geometryPickLineOther: 'Pick lines',
+	geometryPickPlaneOne: 'Pick a plane',
+	geometryPickPlaneOther: 'Pick planes',
+	geometryPickSurfaceOne: 'Pick a surface',
+	geometryPickSurfaceOther: 'Pick surfaces',
+	geometryPickPolysurfaceOne: 'Pick a polysurface',
+	geometryPickPolysurfaceOther: 'Pick polysurfaces',
+	geometryPickExtrusionOne: 'Pick an extrusion',
+	geometryPickExtrusionOther: 'Pick extrusions',
+	geometryPickMeshOne: 'Pick a mesh',
+	geometryPickMeshOther: 'Pick meshes',
+	geometryPickSubdOne: 'Pick a SubD',
+	geometryPickSubdOther: 'Pick SubDs',
+	geometryPickBlockOne: 'Pick a block',
+	geometryPickBlockOther: 'Pick blocks',
+
 	fileModeUpload: 'Upload',
 	fileModeUrl: 'URL',
 	fileUrlLabel: 'File URL',
@@ -425,6 +491,7 @@ const de: ViewerMessages = {
 	solveMessagesConfirm: 'Weiter',
 	solveMessagesDiscard: 'Verwerfen',
 	solveMessagesAbort: 'Abbrechen',
+	solveMessagesEscHint: 'Esc bricht die Berechnung ab',
 	solveMessagesDismiss: 'Schliessen',
 	solveSolving: 'Berechnung läuft…',
 	parametersTab: 'Parameter',
@@ -469,6 +536,35 @@ const de: ViewerMessages = {
 	invalidFormat: 'Ungültiges Format',
 	invalidPattern: 'Ungültiges Prüfmuster hinterlegt',
 
+	geometryPickAnyOne: 'Objekt wählen',
+	geometryPickAnyOther: 'Objekte wählen',
+	geometryPicking: 'Im Ansichtsfenster wählen, Esc bricht ab',
+	geometryPickInPanel: 'Im Rhino-Panel wählen',
+	geometryPickAgain: 'Neu wählen',
+	geometryClear: 'Leeren',
+	geometryPickPointOne: 'Punkt wählen',
+	geometryPickPointOther: 'Punkte wählen',
+	geometryPickPointCloudOne: 'Punktwolke wählen',
+	geometryPickPointCloudOther: 'Punktwolken wählen',
+	geometryPickCurveOne: 'Kurve wählen',
+	geometryPickCurveOther: 'Kurven wählen',
+	geometryPickLineOne: 'Linie wählen',
+	geometryPickLineOther: 'Linien wählen',
+	geometryPickPlaneOne: 'Ebene wählen',
+	geometryPickPlaneOther: 'Ebenen wählen',
+	geometryPickSurfaceOne: 'Fläche wählen',
+	geometryPickSurfaceOther: 'Flächen wählen',
+	geometryPickPolysurfaceOne: 'Flächenverband wählen',
+	geometryPickPolysurfaceOther: 'Flächenverbände wählen',
+	geometryPickExtrusionOne: 'Extrusion wählen',
+	geometryPickExtrusionOther: 'Extrusionen wählen',
+	geometryPickMeshOne: 'Netz wählen',
+	geometryPickMeshOther: 'Netze wählen',
+	geometryPickSubdOne: 'SubD wählen',
+	geometryPickSubdOther: 'SubDs wählen',
+	geometryPickBlockOne: 'Block wählen',
+	geometryPickBlockOther: 'Blöcke wählen',
+
 	fileModeUpload: 'Hochladen',
 	fileModeUrl: 'URL',
 	fileUrlLabel: 'Datei-URL',

package/src/lib/index.ts

@@ -19,6 +19,17 @@ export { default as Viewer } from './components/viewer/Viewer.svelte';
 export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
+export {
+	type UIHost,
+	type ElementKind,
+	HOST_LABELS,
+	isGeometryParamType,
+	layoutItemKind,
+	hostsFor,
+	isSupportedOn,
+	valuelessInputIds,
+	unsupportedItems
+} from './schema/host-support';
 export * from './compute/solving.svelte';
 
 // Solve Session seam. Re-exported so transports outside this package — e.g.
@@ -54,10 +65,19 @@ export {
 
 export * from './contexts/footerContext.svelte';
 export * from './contexts/clientSlotContext.svelte';
+export * from './contexts/hostContext.svelte';
 export * from './composables/useFooterItem.svelte';
 
 export * from './utils';
 export { randomId } from './utils/randomId';
+export {
+	saveBlob,
+	pickFile,
+	setBlobSaver,
+	setFilePicker,
+	type BlobSaver,
+	type FilePicker
+} from './utils/host-files';
 
 // UI-specific runtime types (not from schema)
 export type { ActionButton } from './types/actionButton';