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

package/dist/components/preview/InputControl.svelte

@@ -4,6 +4,7 @@
 		FileInputWidgetConfig,
 		DynamicValueListWidgetConfig,
 		DropdownWidgetConfig,
+		UISchema,
 		SupportedTypes
 	} from '@selvajs/schemas';
 	import {
@@ -16,6 +17,8 @@
 		isColorWidget
 	} from '@selvajs/schemas';
 	import * as Field from '../primitives/field';
+	import { Button } from '../primitives/button';
+	import { toast } from '../primitives/sonner';
 	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
@@ -23,11 +26,21 @@
 		ColorInput,
 		DropdownInput,
 		FileInput,
+		GeometryInput,
 		NumberInput,
-		TextInput
+		SegmentedInput,
+		TextInput,
+		TileInput
 	} from './inputs';
 	import { getClientSlot } from '../../contexts/clientSlotContext.svelte';
+	import {
+		getHostContext,
+		type GeometryPickTarget,
+		type PickKind
+	} from '../../contexts/hostContext.svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { isGeometryParamType, isTriggerItem } from '../../schema/host-support';
+	import { resolveOptionDisplay } from '../../schema/option-display';
 
 	interface Props {
 		item: InputLayoutItem;
@@ -42,6 +55,10 @@
 		disabled?: boolean;
 		/** Runtime-computed options for a dynamic value list input (name -> value). */
 		dynamicOptions?: Record<string, string>;
+		/** The input's paramType: a geometry input gets its control from this, not from the widget type. */
+		paramType?: string;
+		/** The schema's icons and thumbnails, which value-list options point into. */
+		assets?: UISchema['assets'];
 	}
 
 	let {
@@ -50,10 +67,25 @@
 		displayName,
 		onChange,
 		disabled = false,
-		dynamicOptions
+		dynamicOptions,
+		paramType,
+		assets
 	}: Props = $props();
 
 	const locale = getLocaleContext();
+	const hostActions = getHostContext();
+	const { pickGeometry, clearGeometry, onGeometrySummary } = hostActions;
+	const isGeometry = $derived(isGeometryParamType(paramType));
+	const isTrigger = $derived(isTriggerItem(item));
+	const pickTarget = $derived(
+		isGeometry ? hostActions.describeGeometry?.(item.paramId) : undefined
+	);
+
+	// Get Point/Line/Plane take their own kind; Get Geometry takes what its filter allows.
+	function pickKinds(target: GeometryPickTarget | undefined): readonly PickKind[] | undefined {
+		if (paramType === 'point' || paramType === 'line' || paramType === 'plane') return [paramType];
+		return target?.kinds;
+	}
 
 	const inputId = $derived(`input-${item.paramId}`);
 	const label = $derived(displayName || item.displayName || item.paramId);
@@ -102,7 +134,8 @@
 	// As a dropdown config so DropdownInput/ChecklistInput can consume it unchanged.
 	const dynamicListAsDropdownConfig = $derived<DropdownWidgetConfig>({
 		options: dynamicListOptions,
-		displayAs: dynamicListConfig?.displayAs ?? 'dropdown'
+		displayAs: dynamicListConfig?.displayAs ?? 'dropdown',
+		optionMedia: dynamicListConfig?.optionMedia
 	});
 	const hideDynamicListWhenEmpty = $derived(
 		isDynamicValueListWidget(item) &&
@@ -173,6 +206,48 @@
 	}
 </script>
 
+{#snippet valueList(config: DropdownWidgetConfig)}
+	{@const display = resolveOptionDisplay(
+		config.displayAs,
+		Object.keys(config.options ?? {}).length
+	)}
+	{@const single = typeof value === 'string' ? value : ''}
+	{#if display === 'checklist'}
+		<ChecklistInput
+			{inputId}
+			value={Array.isArray(value)
+				? (value as string[])
+				: typeof value === 'string' && value
+					? [value]
+					: []}
+			{config}
+			{assets}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if display === 'segmented'}
+		<SegmentedInput
+			labelId="{inputId}-label"
+			value={single}
+			{config}
+			{assets}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else if display === 'tiles'}
+		<TileInput
+			labelId="{inputId}-label"
+			value={single}
+			{config}
+			{assets}
+			onChange={commit}
+			{disabled}
+		/>
+	{:else}
+		<DropdownInput value={single} {config} {assets} onChange={commit} {disabled} />
+	{/if}
+{/snippet}
+
 {#snippet labelText(forId?: string, tone: 'quiet' | 'strong' = 'quiet')}
 	<Field.Label
 		for={forId}
@@ -218,6 +293,34 @@
 			})}
 		</div>
 	{/if}
+{:else if isGeometry}
+	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+		{@render fieldHeader(inputId)}
+		<GeometryInput
+			{inputId}
+			kinds={pickKinds(pickTarget)}
+			atMost={pickTarget?.atMost}
+			summary={typeof value === 'string' ? value : undefined}
+			onPick={pickGeometry && (() => pickGeometry(item.paramId))}
+			onClear={clearGeometry && (() => clearGeometry(item.paramId))}
+			watchSummary={onGeometrySummary && ((listener) => onGeometrySummary(item.paramId, listener))}
+			onError={(message) => toast.error(message)}
+			{disabled}
+		/>
+	</div>
+{:else if isTrigger}
+	<div role="group" class="group/field gap-1.5 min-w-0 flex items-center" data-control-line>
+		<Button
+			id={inputId}
+			variant="outline"
+			class="min-w-0 flex-1"
+			onclick={() => hostActions.trigger?.(item.paramId)}
+			disabled={disabled || !hostActions.trigger || hostActions.isSolving?.()}
+		>
+			<span class="truncate">{label}</span>
+		</Button>
+		{@render helpButton()}
+	</div>
 {:else if !hideDynamicListWhenEmpty}
 	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
 		{#if !isCheckboxWidget(item)}
@@ -254,49 +357,10 @@
 				{disabled}
 			/>
 		{:else if isDropdownWidget(item)}
-			{@const config = item.config}
-			{#if config.displayAs === 'checklist'}
-				<ChecklistInput
-					{inputId}
-					value={Array.isArray(value)
-						? (value as string[])
-						: typeof value === 'string' && value
-							? [value]
-							: []}
-					{config}
-					onChange={commit}
-					{disabled}
-				/>
-			{:else}
-				<DropdownInput
-					value={typeof value === 'string' ? value : ''}
-					{config}
-					onChange={commit}
-					{disabled}
-				/>
-			{/if}
+			{@render valueList(item.config)}
 		{:else if isDynamicValueListWidget(item)}
 			{#if dynamicListHasOptions}
-				{#if dynamicListAsDropdownConfig.displayAs === 'checklist'}
-					<ChecklistInput
-						{inputId}
-						value={Array.isArray(value)
-							? (value as string[])
-							: typeof value === 'string' && value
-								? [value]
-								: []}
-						config={dynamicListAsDropdownConfig}
-						onChange={commit}
-						{disabled}
-					/>
-				{:else}
-					<DropdownInput
-						value={typeof value === 'string' ? value : ''}
-						config={dynamicListAsDropdownConfig}
-						onChange={commit}
-						{disabled}
-					/>
-				{/if}
+				{@render valueList(dynamicListAsDropdownConfig)}
 			{:else}
 				<p class="text-sm text-muted-foreground">{locale.messages.noOptionsYet}</p>
 			{/if}

package/dist/components/preview/InputControl.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { InputLayoutItem, SupportedTypes } from '@selvajs/schemas';
+import type { InputLayoutItem, UISchema, SupportedTypes } from '@selvajs/schemas';
 interface Props {
     item: InputLayoutItem;
     value?: SupportedTypes;
@@ -12,6 +12,10 @@ interface Props {
     disabled?: boolean;
     /** Runtime-computed options for a dynamic value list input (name -> value). */
     dynamicOptions?: Record<string, string>;
+    /** The input's paramType: a geometry input gets its control from this, not from the widget type. */
+    paramType?: string;
+    /** The schema's icons and thumbnails, which value-list options point into. */
+    assets?: UISchema['assets'];
 }
 declare const InputControl: import("svelte").Component<Props, {}, "value">;
 type InputControl = ReturnType<typeof InputControl>;

package/dist/components/preview/TabContent.svelte

@@ -3,6 +3,7 @@
 		TabConfig,
 		SchemaInput,
 		DiscoveredOutput,
+		UISchema,
 		SupportedTypes,
 		InputLayoutItem,
 		OutputLayoutItem
@@ -14,6 +15,8 @@
 	import InputControl from './InputControl.svelte';
 	import OutputDisplay from './OutputDisplay.svelte';
 	import { evaluateGroupVisibility } from '../../schema/visibility-rules';
+	import { isSupportedOn, layoutItemKind } from '../../schema/host-support';
+	import { getHostContext } from '../../contexts/hostContext.svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
 
 	const locale = getLocaleContext();
@@ -29,6 +32,10 @@
 		outputs: DiscoveredOutput[];
 		/** Computed value list options keyed by the target dynamic-value-list input id. */
 		dynamicOptions?: Record<string, Record<string, string>>;
+		/** The schema's icons and thumbnails, which value-list options point into. */
+		assets?: UISchema['assets'];
+		/** No tinted backdrop and no scroll area of its own: the container scrolls. */
+		bare?: boolean;
 	}
 
 	let {
@@ -39,11 +46,24 @@
 		onValueChange,
 		inputs,
 		outputs,
-		dynamicOptions = {}
+		dynamicOptions = {},
+		assets,
+		bare = false
 	}: Props = $props();
 
+	const { host } = getHostContext();
+
+	// An element this host can't render is left out, not shown broken: its input still solves with
+	// the definition's own default. A group left with nothing to show goes too.
 	const visibleGroups = $derived(
-		tab.groups.filter((group) => evaluateGroupVisibility(group, values))
+		tab.groups
+			.filter((group) => evaluateGroupVisibility(group, values))
+			.flatMap((group) => {
+				const items = group.items.filter((item) =>
+					isSupportedOn(host, layoutItemKind(item, inputs))
+				);
+				return items.length > 0 || group.items.length === 0 ? [{ ...group, items }] : [];
+			})
 	);
 
 	function getInputById(paramId: string): SchemaInput | undefined {
@@ -68,6 +88,8 @@
 			onChange={onValueChange}
 			disabled={visibility.disabled}
 			dynamicOptions={dynamicOptions[input.id]}
+			paramType={input.paramType}
+			{assets}
 		/>
 	{/if}
 {/snippet}
@@ -83,34 +105,44 @@
 	{/if}
 {/snippet}
 
-<Tabs.Content value={tab.id} class="min-h-0">
-	<div class="h-full bg-muted dark:bg-background">
-		<ScrollArea class="h-full" orientation="vertical">
-			<div class="px-3">
-				<!-- A heading per panel lets a screen reader jump between them; the tab, when shown,
+{#snippet body()}
+	<div class={bare ? 'px-1' : 'px-3'}>
+		<!-- A heading per panel lets a screen reader jump between them; the tab, when shown,
 				     already names it on screen. -->
-				<h2 class="sr-only">{tab.label}</h2>
-				{#if visibleGroups.length === 0}
-					<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
-				{:else}
-					<div class="gap-3 py-3 flex flex-col">
-						{#each visibleGroups as group (group.id)}
-							<Group
-								label={group.label}
-								description={group.description}
-								items={group.items}
-								columns={group.columns ?? 1}
-								collapsed={collapsedGroups[group.id] ?? false}
-								{values}
-								onToggle={() => onToggleGroup(group.id)}
-								inputSnippet={renderInput}
-								outputSnippet={renderOutput}
-								flat={visibleGroups.length === 1}
-							/>
-						{/each}
-					</div>
-				{/if}
+		<h2 class="sr-only">{tab.label}</h2>
+		{#if visibleGroups.length === 0}
+			<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
+		{:else}
+			<div class="gap-3 py-3 flex flex-col">
+				{#each visibleGroups as group (group.id)}
+					<Group
+						label={group.label}
+						description={group.description}
+						items={group.items}
+						columns={group.columns ?? 1}
+						collapsed={collapsedGroups[group.id] ?? false}
+						{values}
+						onToggle={() => onToggleGroup(group.id)}
+						inputSnippet={renderInput}
+						outputSnippet={renderOutput}
+						flat={visibleGroups.length === 1}
+					/>
+				{/each}
 			</div>
-		</ScrollArea>
+		{/if}
 	</div>
+{/snippet}
+
+<Tabs.Content value={tab.id} class="min-h-0">
+	{#if bare}
+		{@render body()}
+	{:else}
+		<div class="h-full bg-muted dark:bg-background">
+			<!-- `auto`, not the default `hover`: a hover-only bar comes and goes with the pointer,
+			     and a host that freezes mid-solve drops the pointer state with it. -->
+			<ScrollArea class="h-full" orientation="vertical" type="auto">
+				{@render body()}
+			</ScrollArea>
+		</div>
+	{/if}
 </Tabs.Content>

package/dist/components/preview/TabContent.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TabConfig, SchemaInput, DiscoveredOutput, SupportedTypes } from '@selvajs/schemas';
+import type { TabConfig, SchemaInput, DiscoveredOutput, UISchema, SupportedTypes } from '@selvajs/schemas';
 interface Props {
     tab: TabConfig;
     values: Record<string, unknown>;
@@ -9,6 +9,10 @@ interface Props {
     outputs: DiscoveredOutput[];
     /** Computed value list options keyed by the target dynamic-value-list input id. */
     dynamicOptions?: Record<string, Record<string, string>>;
+    /** The schema's icons and thumbnails, which value-list options point into. */
+    assets?: UISchema['assets'];
+    /** No tinted backdrop and no scroll area of its own: the container scrolls. */
+    bare?: boolean;
 }
 declare const TabContent: import("svelte").Component<Props, {}, "">;
 type TabContent = ReturnType<typeof TabContent>;

package/dist/components/preview/TabLayout.svelte

@@ -15,9 +15,21 @@
 		panelFilter?: 'left' | 'right';
 		/** Externally request a specific tab to be active (e.g. from collapsed strip click) */
 		requestedTabId?: string | null;
+		/**
+		 * Drops the card frame and the tab's own scroll area, for a container that already frames
+		 * and scrolls it (the phone drawer). Nested, the inner scroll gets only a sliver of height.
+		 */
+		bare?: boolean;
 	}
 
-	let { schema, values, onValueChange, panelFilter, requestedTabId = null }: Props = $props();
+	let {
+		schema,
+		values,
+		onValueChange,
+		panelFilter,
+		requestedTabId = null,
+		bare = false
+	}: Props = $props();
 
 	let activeTabId = $state('');
 	let collapsedGroups = $state<Record<string, boolean>>({});
@@ -66,7 +78,7 @@
 	}
 </script>
 
-<Card.Root variant="flush" class="min-h-0 mx-1 flex-1">
+{#snippet tabs()}
 	<Tabs.Root value={activeTabId} variant="line" class="min-h-0 flex-1">
 		{#if showTabBar}
 			<TabBar tabs={visibleTabs} {activeTabId} onTabChange={handleTabChange} />
@@ -82,7 +94,17 @@
 				inputs={schema.inputs}
 				outputs={schema.outputs}
 				{dynamicOptions}
+				assets={schema.assets}
+				{bare}
 			/>
 		{/each}
 	</Tabs.Root>
-</Card.Root>
+{/snippet}
+
+{#if bare}
+	{@render tabs()}
+{:else}
+	<Card.Root variant="flush" class="min-h-0 mx-1 flex-1">
+		{@render tabs()}
+	</Card.Root>
+{/if}

package/dist/components/preview/TabLayout.svelte.d.ts

@@ -7,6 +7,11 @@ interface Props {
     panelFilter?: 'left' | 'right';
     /** Externally request a specific tab to be active (e.g. from collapsed strip click) */
     requestedTabId?: string | null;
+    /**
+     * Drops the card frame and the tab's own scroll area, for a container that already frames
+     * and scrolls it (the phone drawer). Nested, the inner scroll gets only a sliver of height.
+     */
+    bare?: boolean;
 }
 declare const TabLayout: import("svelte").Component<Props, {}, "">;
 type TabLayout = ReturnType<typeof TabLayout>;

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

@@ -1,17 +1,20 @@
 <script lang="ts">
-	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 	import { Checkbox } from '../../primitives/checkbox';
+	import { optionGlyph } from '../../../schema/option-display';
+	import OptionGlyph from './OptionGlyph.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	interface Props {
 		inputId: string;
 		value?: string[];
 		config?: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { inputId, value, config, onChange, disabled = false }: Props = $props();
+	let { inputId, value, config, assets, onChange, disabled = false }: Props = $props();
 
 	const options = $derived(config?.options ?? {});
 	const selected = $derived(new Set(value ?? []));
@@ -32,6 +35,7 @@
 		{@const optionValue = expr ?? name}
 		{@const optionId = `${inputId}-${optionValue}`}
 		{@const isSelected = selected.has(optionValue)}
+		{@const glyph = optionGlyph(config?.optionMedia?.[name], assets)}
 		<label
 			for={optionId}
 			class="gap-3 px-3 py-2 text-sm flex items-center transition-colors select-none hover:bg-accent/50 {isSelected
@@ -44,6 +48,7 @@
 				onCheckedChange={(state) => toggle(optionValue, state === true)}
 				{disabled}
 			/>
+			{#if glyph}<OptionGlyph {glyph} class="text-muted-foreground" />{/if}
 			<span class="flex-1" class:font-medium={isSelected}>{name}</span>
 		</label>
 	{/each}

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

@@ -1,8 +1,9 @@
-import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 interface Props {
     inputId: string;
     value?: string[];
     config?: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
     onChange: (value: SupportedTypes) => void;
     disabled?: boolean;
 }

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

@@ -1,16 +1,19 @@
 <script lang="ts">
-	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 	import * as Select from '../../primitives/select';
+	import { optionGlyph } from '../../../schema/option-display';
+	import OptionGlyph from './OptionGlyph.svelte';
 	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
 
 	interface Props {
 		value?: string;
 		config?: DropdownWidgetConfig;
+		assets?: UISchema['assets'];
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
 	}
 
-	let { value, config, onChange, disabled = false }: Props = $props();
+	let { value, config, assets, onChange, disabled = false }: Props = $props();
 
 	const locale = getLocaleContext();
 
@@ -19,6 +22,8 @@
 	const currentLabel = $derived(
 		Object.entries(options).find(([_, expr]) => expr === currentValue)?.[0] ?? currentValue
 	);
+	const glyphOf = (name: string) => optionGlyph(config?.optionMedia?.[name], assets);
+	const currentGlyph = $derived(glyphOf(currentLabel));
 </script>
 
 <Select.Root
@@ -33,11 +38,18 @@
 	{disabled}
 >
 	<Select.Trigger class="w-full" {disabled}>
-		{currentLabel || locale.messages.selectOption}
+		<span class="gap-2 min-w-0 flex items-center">
+			{#if currentGlyph}<OptionGlyph glyph={currentGlyph} />{/if}
+			<span class="truncate">{currentLabel || locale.messages.selectOption}</span>
+		</span>
 	</Select.Trigger>
 	<Select.Content>
 		{#each Object.entries(options) as [name, expr] (name)}
-			<Select.Item value={expr ?? name} label={name} />
+			{@const glyph = glyphOf(name)}
+			<Select.Item value={expr ?? name} label={name}>
+				{#if glyph}<OptionGlyph {glyph} />{/if}
+				{name}
+			</Select.Item>
 		{/each}
 	</Select.Content>
 </Select.Root>

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

@@ -1,7 +1,8 @@
-import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 interface Props {
     value?: string;
     config?: DropdownWidgetConfig;
+    assets?: UISchema['assets'];
     onChange: (value: SupportedTypes) => void;
     disabled?: boolean;
 }