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

package/dist/components/preview/TabBar.svelte

@@ -1,44 +1,73 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
 	import * as Tabs from '../primitives/tabs';
-	import { ScrollArea } from '../primitives/scroll-area';
+	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import Icon from '@iconify/svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
 
 	interface Props {
 		tabs: TabConfig[];
+		activeTabId: string;
 		onTabChange: (tabId: string) => void;
 	}
 
-	let { tabs, onTabChange }: Props = $props();
+	let { tabs, activeTabId, onTabChange }: Props = $props();
+
+	const SCROLL_BUTTON_WIDTH = 32;
+
+	let listRef = $state<HTMLElement | null>(null);
+	let canScrollBack = $state(false);
+	let canScrollForward = $state(false);
+
+	function updateOverflow() {
+		if (!listRef) return;
+		const { scrollLeft, scrollWidth, clientWidth } = listRef;
+		canScrollBack = scrollLeft > 1;
+		canScrollForward = scrollLeft + clientWidth < scrollWidth - 1;
+	}
 
-	let viewportRef = $state<HTMLElement | null>(null);
+	$effect(() => {
+		if (!listRef) return;
+		const observer = new ResizeObserver(updateOverflow);
+		observer.observe(listRef);
+		updateOverflow();
+		return () => observer.disconnect();
+	});
+
+	// A tab picked from the collapsed strip may sit outside the visible strip. Not
+	// scrollIntoView: that also scrolls every scrollable ancestor, e.g. the mobile drawer.
+	$effect(() => {
+		if (!listRef) return;
+		const active = listRef.querySelector<HTMLElement>(`[data-value="${CSS.escape(activeTabId)}"]`);
+		if (!active) return;
+		// Keep the tab clear of the scroll buttons, which overlay the strip's edges.
+		const start = active.offsetLeft - SCROLL_BUTTON_WIDTH;
+		const end = active.offsetLeft + active.offsetWidth + SCROLL_BUTTON_WIDTH;
+		if (start < listRef.scrollLeft) listRef.scrollLeft = start;
+		else if (end > listRef.scrollLeft + listRef.clientWidth)
+			listRef.scrollLeft = end - listRef.clientWidth;
+	});
+
+	function scrollByPage(direction: -1 | 1) {
+		listRef?.scrollBy({ left: direction * listRef.clientWidth * 0.7, behavior: 'smooth' });
+	}
 
 	function handleWheel(e: WheelEvent) {
-		if (!viewportRef) return;
+		if (!listRef || (!canScrollBack && !canScrollForward)) return;
 		// Trackpad horizontal swipes already produce deltaX — let those pass through.
 		if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
-		const canScroll = viewportRef.scrollWidth > viewportRef.clientWidth;
-		if (!canScroll) return;
 		e.preventDefault();
-		viewportRef.scrollLeft += e.deltaY;
+		listRef.scrollLeft += e.deltaY;
 	}
 </script>
 
-<ScrollArea
-	bind:viewportRef
-	class="w-full shrink-0 border-b border-border"
-	orientation="horizontal"
-	onwheel={handleWheel}
->
-	<Tabs.List
-		class="px-2 py-2 gap-0 inline-flex h-auto w-max justify-start rounded-none bg-transparent"
-	>
+<div class="tab-bar relative shrink-0 border-b border-border">
+	<Tabs.List bind:ref={listRef} variant="line" onscroll={updateOverflow} onwheel={handleWheel}>
 		{#each tabs as tab (tab.id)}
-			<Tabs.Trigger
-				value={tab.id}
-				onclick={() => onTabChange(tab.id)}
-				class="group/tab gap-1.5 px-3 py-1 text-sm font-medium relative h-auto flex-none shrink-0 rounded-none border-0 transition-colors not-last:border-r not-last:border-border hover:bg-accent data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none data-[state=inactive]:text-muted-foreground dark:data-[state=active]:border-transparent dark:data-[state=active]:bg-transparent"
-			>
+			<Tabs.Trigger value={tab.id} onclick={() => onTabChange(tab.id)} variant="line">
 				{#if tab.icon}
 					{#if tab.icon.includes(':')}
 						<Icon icon={tab.icon} class="h-4 w-4" />
@@ -50,4 +79,59 @@
 			</Tabs.Trigger>
 		{/each}
 	</Tabs.List>
-</ScrollArea>
+
+	{#if canScrollBack}
+		<button
+			type="button"
+			class="scroll-button back"
+			aria-label={t.scrollTabsBack}
+			onclick={() => scrollByPage(-1)}
+		>
+			<ChevronLeft class="h-4 w-4" />
+		</button>
+	{/if}
+	{#if canScrollForward}
+		<button
+			type="button"
+			class="scroll-button forward"
+			aria-label={t.scrollTabsForward}
+			onclick={() => scrollByPage(1)}
+		>
+			<ChevronRight class="h-4 w-4" />
+		</button>
+	{/if}
+</div>
+
+<style>
+	.tab-bar :global([data-slot='tabs-list']) {
+		position: relative;
+		overflow-x: auto;
+		scrollbar-width: none;
+	}
+	.tab-bar :global([data-slot='tabs-list']::-webkit-scrollbar) {
+		display: none;
+	}
+
+	.scroll-button {
+		position: absolute;
+		top: 0;
+		bottom: 1px;
+		display: flex;
+		align-items: center;
+		color: var(--muted-foreground);
+		cursor: pointer;
+	}
+	.scroll-button:hover {
+		color: var(--foreground);
+	}
+	.scroll-button.back {
+		left: 0;
+		padding: 0 1.25rem 0 0.375rem;
+		background: linear-gradient(to right, var(--card) 55%, transparent);
+	}
+	.scroll-button.forward {
+		right: 0;
+		padding: 0 0.375rem 0 1.25rem;
+		background: linear-gradient(to left, var(--card) 55%, transparent);
+	}
+</style>

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

@@ -1,6 +1,7 @@
 import type { TabConfig } from '@selvajs/schemas';
 interface Props {
     tabs: TabConfig[];
+    activeTabId: string;
     onTabChange: (tabId: string) => void;
 }
 declare const TabBar: import("svelte").Component<Props, {}, "">;

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,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/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,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 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/CheckboxInput.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { SupportedTypes } from '@selvajs/schemas';
 	import { Checkbox } from '../../primitives/checkbox';
-	import * as Field from '../../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/dist/components/preview/inputs/CheckboxInput.svelte.d.ts

@@ -1,9 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { SupportedTypes } from '@selvajs/schemas';
 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;
 }
 declare const CheckboxInput: import("svelte").Component<Props, {}, "value">;
 type CheckboxInput = ReturnType<typeof CheckboxInput>;

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/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/dist/components/preview/inputs/ColorInput.svelte.d.ts

@@ -1,4 +1,5 @@
 interface Props {
+    inputId: string;
     value?: string;
     onChange: (value: string) => void;
 }

package/dist/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 '../../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();
 
 	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>

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;
 }