@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.12

package/dist/components/preview/InputControl.svelte

@@ -4,6 +4,7 @@
 		FileInputWidgetConfig,
 		DynamicValueListWidgetConfig,
 		DropdownWidgetConfig,
+		UISchema,
 		SupportedTypes
 	} from '@selvajs/schemas';
 	import {
@@ -16,18 +17,30 @@
 		isColorWidget
 	} from '@selvajs/schemas';
 	import * as Field from '../primitives/field';
-	import * as Dialog from '../primitives/dialog';
-	import { HelpCircle } from '@lucide/svelte';
+	import { Button } from '../primitives/button';
+	import { toast } from '../primitives/sonner';
+	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
 		ChecklistInput,
 		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,9 +67,26 @@
 		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);
 
@@ -65,15 +99,15 @@
 	});
 	const clientSlot = getClientSlot();
 
-	// Min/max hint rendered next to the label. `hideRange` lets the author suppress it.
+	// Sliders never show the hint: the track already conveys the bounds.
 	const numberRangeHint = $derived.by(() => {
 		if (!isNumberWidget(item)) return null;
 		const cfg = item.config;
-		if (cfg?.hideRange) return null;
+		if (cfg?.hideRange || cfg?.renderAsSlider) return null;
 		const hasMin = typeof cfg?.minimum === 'number';
 		const hasMax = typeof cfg?.maximum === 'number';
 		if (!hasMin && !hasMax) return null;
-		if (hasMin && hasMax) return `${cfg!.minimum} to ${cfg!.maximum}`;
+		if (hasMin && hasMax) return `${cfg!.minimum} – ${cfg!.maximum}`;
 		if (hasMin) return `≥ ${cfg!.minimum}`;
 		return `≤ ${cfg!.maximum}`;
 	});
@@ -100,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) &&
@@ -171,59 +206,132 @@
 	}
 </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}
+		id={forId ? `${forId}-label` : undefined}
+		class="min-w-0 block break-words"
+	>
+		<span
+			class={tone === 'quiet' ? 'font-normal text-muted-foreground' : 'font-normal text-foreground'}
+			>{label}</span
+		>
+	</Field.Label>
+{/snippet}
+
+{#snippet helpButton()}
+	{#if item.description}
+		<HelpButton {label} description={item.description} />
+	{/if}
+{/snippet}
+
+{#snippet fieldHeader(forId?: string)}
+	<div class="gap-1.5 min-h-5 min-w-0 flex items-center">
+		{@render labelText(forId)}
+		{@render helpButton()}
+		{#if showRangeInLabel}
+			<span
+				class="text-xs pl-2 ml-auto hidden shrink-0 whitespace-nowrap text-muted-foreground tabular-nums group-focus-within/field:inline"
+			>
+				{numberRangeHint}
+			</span>
+		{/if}
+	</div>
+{/snippet}
+
 {#if isClientSlot}
 	{#if clientSlot}
-		<Field.Field>
-			<Field.Label class="gap-2 flex items-center">
-				{label}
-				{#if item.description}
-					<Dialog.Root>
-						<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
-							<HelpCircle size={16} />
-						</Dialog.Trigger>
-						<Dialog.Content class="sm:max-w-md">
-							<Dialog.Header>
-								<Dialog.Title>{label}</Dialog.Title>
-								<Dialog.Description>{item.description}</Dialog.Description>
-							</Dialog.Header>
-						</Dialog.Content>
-					</Dialog.Root>
-				{/if}
-			</Field.Label>
+		<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+			{@render fieldHeader()}
 			{@render clientSlot({
 				inputId: item.paramId,
 				displayName: label,
 				value,
 				onValueChange: commit
 			})}
-		</Field.Field>
+		</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}
-	<Field.Field>
-		<Field.Label for={inputId} class="gap-2 flex items-center">
-			{label}
-			{#if item.description}
-				<Dialog.Root>
-					<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
-						<HelpCircle size={16} />
-					</Dialog.Trigger>
-					<Dialog.Content class="sm:max-w-md">
-						<Dialog.Header>
-							<Dialog.Title>{label}</Dialog.Title>
-							<Dialog.Description>{item.description}</Dialog.Description>
-						</Dialog.Header>
-					</Dialog.Content>
-				</Dialog.Root>
-			{/if}
-			{#if showRangeInLabel}
-				<span class="text-xs font-normal text-muted-foreground">{numberRangeHint}</span>
-			{/if}
-		</Field.Label>
+	<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+		{#if !isCheckboxWidget(item)}
+			{@render fieldHeader(inputId)}
+		{/if}
 
 		{#if isNumberWidget(item)}
 			{@const config = item.config}
 			<NumberInput
 				{inputId}
+				labelId="{inputId}-label"
 				value={typeof value === 'number' ? value : undefined}
 				{config}
 				onChange={commit}
@@ -235,7 +343,10 @@
 				value={typeof value === 'boolean' ? value : undefined}
 				onChange={commit}
 				{disabled}
-			/>
+			>
+				{@render labelText(inputId, 'strong')}
+				{@render helpButton()}
+			</CheckboxInput>
 		{:else if isTextWidget(item)}
 			{@const config = item.config}
 			<TextInput
@@ -246,51 +357,12 @@
 				{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">No options available yet.</p>
+				<p class="text-sm text-muted-foreground">{locale.messages.noOptionsYet}</p>
 			{/if}
 		{:else if isFileWidget(item)}
 			{@const config = item.config as FileInputWidgetConfig}
@@ -303,9 +375,10 @@
 			/>
 		{:else if isColorWidget(item)}
 			<ColorInput
+				{inputId}
 				value={typeof value === 'string' ? value : '#000000'}
 				onChange={(newValue) => commit(newValue)}
 			/>
 		{/if}
-	</Field.Field>
+	</div>
 {/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/OutputDisplay.svelte

@@ -10,10 +10,12 @@
 		isFileData
 	} from '../../utils/file-download';
 	import { Button } from '../primitives';
-	import * as Dialog from '../primitives/dialog';
-	import { Info, Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
+	import { Folder, FolderOpen, FileIcon, ChevronRight } from '@lucide/svelte';
+	import HelpButton from './HelpButton.svelte';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import { Label } from '../primitives/label';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { formatCount, formatMessage } from '../../i18n/messages';
 
 	interface Props {
 		item: OutputLayoutItem;
@@ -23,6 +25,9 @@
 
 	let { item, value, displayName }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let copied = $state(false);
 	let copyTimeout: ReturnType<typeof setTimeout>;
 
@@ -33,7 +38,7 @@
 	);
 	const hasValue = $derived(value != null);
 
-	const boxClass = 'min-h-12.5 rounded px-3 py-3 font-mono text-sm border border-border';
+	const boxClass = 'min-h-12.5 rounded-md px-3 py-3 text-sm border border-border/60';
 
 	async function copyToClipboard() {
 		try {
@@ -142,7 +147,7 @@
 				await downloadFiles(filesArray, fileName);
 			}
 		} catch (err) {
-			downloadError = err instanceof Error ? err.message : 'Failed to download files';
+			downloadError = err instanceof Error ? err.message : t.downloadFailed;
 			console.error('[OutputDisplayWidget] Download error:', err);
 		} finally {
 			downloading = false;
@@ -152,25 +157,19 @@
 
 {#snippet fieldHeader()}
 	<div class="gap-2 flex items-center">
-		<Label>{label}</Label>
+		<Label>
+			<span class={item.widgetType === 'number' ? 'text-xs font-normal text-muted-foreground' : ''}
+				>{label}</span
+			>
+		</Label>
 		{#if item.description}
-			<Dialog.Root>
-				<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
-					<Info size={16} />
-				</Dialog.Trigger>
-				<Dialog.Content class="sm:max-w-md">
-					<Dialog.Header>
-						<Dialog.Title>{label}</Dialog.Title>
-						<Dialog.Description>{item.description}</Dialog.Description>
-					</Dialog.Header>
-				</Dialog.Content>
-			</Dialog.Root>
+			<HelpButton {label} description={item.description} />
 		{/if}
 	</div>
 {/snippet}
 
 {#snippet placeholder()}
-	<span class="text-muted-foreground not-italic">Waiting for data...</span>
+	<span class="text-muted-foreground not-italic">{t.waitingForData}</span>
 {/snippet}
 
 {#snippet treeNodes(nodes: Map<string, TreeNode>, path: string)}
@@ -218,17 +217,17 @@
 
 {#snippet fileDisplay()}
 	{#if fileCount === 0}
-		<div class="rounded px-3 py-3 text-sm border border-border bg-muted text-muted-foreground">
-			Waiting for file data...
+		<div class="px-3 py-3 text-sm rounded-md border border-border bg-muted text-muted-foreground">
+			{t.waitingForFiles}
 		</div>
 	{:else}
 		<div class="gap-2 flex flex-col">
-			<div class="rounded px-3 py-2 border border-border bg-muted">
+			<div class="px-3 py-2 rounded-md border border-border bg-muted">
 				<div class="gap-2 flex items-center justify-between">
 					<span class="min-w-0 text-sm font-medium truncate text-foreground">
 						{fileCount === 1
 							? `${filesArray[0].fileName}${filesArray[0].fileType}`
-							: `${fileCount} files`}
+							: formatMessage(t.fileCount, { count: fileCount })}
 					</span>
 					<span class="text-xs shrink-0 text-muted-foreground">{formatFileSize(totalSize)}</span>
 				</div>
@@ -253,33 +252,33 @@
 			</div>
 			{#if hasDuplicates}
 				<div
-					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
+					class="px-3 py-2 text-sm rounded-md border border-destructive bg-destructive/10 text-destructive"
 				>
-					<div class="font-medium">Duplicate file names detected</div>
+					<div class="font-medium">{t.duplicateFilesTitle}</div>
 					<div class="mt-1 text-xs">
-						The following {duplicatePaths.length === 1 ? 'path appears' : 'paths appear'} more than once:
+						{formatCount(duplicatePaths.length, t.duplicatePathsOne, t.duplicatePathsOther)}
 					</div>
 					<ul class="mt-1 ml-4 text-xs list-disc">
 						{#each duplicatePaths as path (path)}
 							<li class="truncate"><span class="font-mono">{path}</span></li>
 						{/each}
 					</ul>
-					<div class="mt-1 text-xs">
-						Rename outputs in your Grasshopper definition so each file has a unique name.
-					</div>
+					<div class="mt-1 text-xs">{t.duplicateFilesHint}</div>
 				</div>
 			{/if}
 			{#if downloadError}
 				<div
-					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
+					class="px-3 py-2 text-sm rounded-md border border-destructive bg-destructive/10 text-destructive"
 				>
 					{downloadError}
 				</div>
 			{/if}
 			<Button onclick={handleDownload} disabled={downloading || hasDuplicates} class="w-full">
 				{downloading
-					? 'Downloading...'
-					: `Download ${fileCount === 1 ? 'File' : `${fileCount} Files`}`}
+					? t.downloading
+					: fileCount === 1
+						? t.downloadFile
+						: formatMessage(t.downloadFiles, { count: fileCount })}
 			</Button>
 		</div>
 	{/if}
@@ -287,7 +286,10 @@
 
 <!-- Dynamic value list outputs are routing sinks (their options feed an input), not displayed. -->
 {#if item.widgetType !== 'dynamicValueList'}
-	<div class="gap-2 flex flex-col">
+	<div
+		role="group"
+		class="group/field flex flex-col {item.widgetType === 'number' ? 'gap-0.5' : 'gap-2'}"
+	>
 		{@render fieldHeader()}
 
 		{#if item.widgetType === 'chart'}
@@ -300,35 +302,35 @@
 		{:else if item.widgetType === 'file'}
 			{@render fileDisplay()}
 		{:else if item.widgetType === 'number'}
-			<div class="{boxClass} flex items-center bg-muted/50 wrap-break-word">
+			<div class="min-h-8 text-2xl font-semibold wrap-break-word text-foreground tabular-nums">
 				{#if hasValue}
-					<span class="font-bold text-primary">{formattedValue}</span>
+					{formattedValue}
 				{:else}
-					{@render placeholder()}
+					<span class="text-base font-normal">{@render placeholder()}</span>
 				{/if}
 			</div>
 		{:else if item.widgetType === 'text'}
 			<div class="group relative">
 				{#if isObjectValue}
 					<pre
-						class="{boxClass} overflow-wrap-anywhere max-h-96 overflow-auto bg-muted/10 text-foreground">{formattedValue}</pre>
+						class="{boxClass} max-h-96 font-mono overflow-auto bg-muted/10 wrap-anywhere text-foreground">{formattedValue}</pre>
 				{:else}
 					<div
-						class="{boxClass} overflow-wrap-anywhere bg-muted/10 wrap-break-word whitespace-pre-wrap text-foreground"
+						class="{boxClass} bg-muted/10 wrap-anywhere wrap-break-word whitespace-pre-wrap text-foreground"
 					>
 						{#if hasValue}{value}{:else}{@render placeholder()}{/if}
 					</div>
 				{/if}
 				{#if hasValue}
-					<Button
-						onclick={copyToClipboard}
+					<div
 						class="right-2 top-2 absolute transition-opacity {copied
 							? 'opacity-100'
-							: 'opacity-0 group-hover:opacity-100'}"
-						size="sm"
+							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100'}"
 					>
-						{copied ? 'Copied!' : 'Copy'}
-					</Button>
+						<Button onclick={copyToClipboard} size="sm">
+							{copied ? t.copied : t.copy}
+						</Button>
+					</div>
 				{/if}
 			</div>
 		{/if}