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

package/src/lib/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 '$lib/schema/visibility-rules';
+	import { isSupportedOn, layoutItemKind } from '$lib/schema/host-support';
+	import { getHostContext } from '$lib/contexts/hostContext.svelte';
 	import { getLocaleContext } from '$lib/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,60 +105,44 @@
 	{/if}
 {/snippet}
 
-<Tabs.Content value={tab.id} class="min-h-0 p-0 flex-1">
-	<ScrollArea class="h-full" orientation="vertical">
-		<div class="p-4 tab-content-container">
-			{#if visibleGroups.length === 0}
-				<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
-			{:else}
-				<div class="gap-8 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}
+{#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}
+	</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>
-	</ScrollArea>
+	{/if}
 </Tabs.Content>
-
-<style>
-	.tab-content-container {
-		container-type: inline-size;
-	}
-
-	@container (max-width: 320px) {
-		:global(.schema-grid) {
-			grid-template-columns: 1fr;
-		}
-	}
-	@container (min-width: 321px) and (max-width: 560px) {
-		:global(.schema-grid) {
-			grid-template-columns: repeat(min(2, var(--schema-cols)), minmax(0, 1fr));
-		}
-	}
-
-	/* Fallback for browsers without container query support */
-	@supports not (container-type: inline-size) {
-		@media (max-width: 639px) {
-			:global(.schema-grid) {
-				grid-template-columns: 1fr;
-			}
-		}
-		@media (min-width: 640px) and (max-width: 1023px) {
-			:global(.schema-grid) {
-				grid-template-columns: repeat(min(2, var(--schema-cols)), minmax(0, 1fr));
-			}
-		}
-	}
-</style>

package/src/lib/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,10 +78,10 @@
 	}
 </script>
 
-<Card.Root class="pt-1 min-h-0 mx-1 flex flex-1 flex-col overflow-hidden">
-	<Tabs.Root value={activeTabId} class="gap-0 min-h-0 flex flex-1 flex-col">
+{#snippet tabs()}
+	<Tabs.Root value={activeTabId} variant="line" class="min-h-0 flex-1">
 		{#if showTabBar}
-			<TabBar tabs={visibleTabs} onTabChange={handleTabChange} />
+			<TabBar tabs={visibleTabs} {activeTabId} onTabChange={handleTabChange} />
 		{/if}
 
 		{#each visibleTabs as tab (tab.id)}
@@ -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/src/lib/components/preview/inputs/CheckboxInput.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { SupportedTypes } from '@selvajs/schemas';
 	import { Checkbox } from '$lib/components/primitives/checkbox';
-	import * as Field from '$lib/components/primitives/field';
 
 	interface Props {
 		inputId: string;
 		value?: boolean;
 		onChange: (value: SupportedTypes) => void;
 		disabled?: boolean;
+		/** Rendered beside the box; must contain a label pointing at `inputId`. */
+		children?: Snippet;
 	}
 
-	let { inputId, value = $bindable(), onChange, disabled = false }: Props = $props();
+	let { inputId, value = $bindable(), onChange, disabled = false, children }: Props = $props();
 </script>
 
-<Field.Field orientation="horizontal">
+<div class="gap-2.5 min-h-6 min-w-0 flex items-center">
 	<Checkbox
 		id={inputId}
 		checked={typeof value === 'boolean' ? value : false}
@@ -23,7 +25,5 @@
 		}}
 		{disabled}
 	/>
-	<Field.Label for={inputId} class="font-normal cursor-pointer text-muted-foreground">
-		Enabled
-	</Field.Label>
-</Field.Field>
+	{@render children?.()}
+</div>

package/src/lib/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 '$lib/components/primitives/checkbox';
+	import { optionGlyph } from '$lib/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/src/lib/components/preview/inputs/ColorInput.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
 	interface Props {
+		inputId: string;
 		value?: string;
 		onChange: (value: string) => void;
 	}
 
-	let { value = '#000000', onChange }: Props = $props();
+	let { inputId, value = '#000000', onChange }: Props = $props();
 </script>
 
 <div class="gap-2 flex items-center">
 	<input
+		id={inputId}
 		type="color"
 		value={value || '#000000'}
-		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background"
+		class="h-9 w-12 rounded p-1 cursor-pointer border border-input bg-background dark:bg-input/30"
 		onchange={(e) => {
 			const newValue = (e.currentTarget as HTMLInputElement).value;
 			onChange(newValue);

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

@@ -1,21 +1,29 @@
 <script lang="ts">
-	import type { DropdownWidgetConfig, SupportedTypes } from '@selvajs/schemas';
+	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
 	import * as Select from '$lib/components/primitives/select';
+	import { optionGlyph } from '$lib/schema/option-display';
+	import OptionGlyph from './OptionGlyph.svelte';
+	import { getLocaleContext } from '$lib/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();
 
 	const options = $derived(config?.options || {});
 	const currentValue = $derived(value || '');
 	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
@@ -30,11 +38,18 @@
 	{disabled}
 >
 	<Select.Trigger class="w-full" {disabled}>
-		{currentLabel || 'Select an option...'}
+		<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>