@selvajs/ui 6.6.0-beta.2 → 6.6.0-beta.20

package/dist/components/preview/InputControl.svelte

@@ -4,6 +4,7 @@
 		FileInputWidgetConfig,
 		DynamicValueListWidgetConfig,
 		DropdownWidgetConfig,
+		UISchema,
 		SupportedTypes
 	} from '@selvajs/schemas';
 	import {
@@ -15,7 +16,9 @@
 		isFileWidget,
 		isColorWidget
 	} from '@selvajs/schemas';
-	import * as Field from '../primitives/field';
+	import * as Field from '../primitives/field/index.js';
+	import { Button } from '../primitives/button/index.js';
+	import { toast } from '../primitives/sonner/index.js';
 	import HelpButton from './HelpButton.svelte';
 	import {
 		CheckboxInput,
@@ -23,10 +26,21 @@
 		ColorInput,
 		DropdownInput,
 		FileInput,
+		GeometryInput,
 		NumberInput,
-		TextInput
-	} from './inputs';
-	import { getClientSlot } from '../../contexts/clientSlotContext.svelte';
+		SegmentedInput,
+		TextInput,
+		TileInput
+	} from './inputs/index.js';
+	import { getClientSlot } from '../../contexts/clientSlotContext.svelte.js';
+	import {
+		getHostContext,
+		type GeometryPickTarget,
+		type PickKind
+	} from '../../contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { isGeometryParamType, isTriggerItem } from '../../schema/host-support.js';
+	import { resolveOptionDisplay } from '../../schema/option-display.js';
 
 	interface Props {
 		item: InputLayoutItem;
@@ -41,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 {
@@ -49,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);
 
@@ -99,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) &&
@@ -170,8 +206,54 @@
 	}
 </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} class="min-w-0 block break-words">
+	<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
@@ -201,7 +283,7 @@
 
 {#if isClientSlot}
 	{#if clientSlot}
-		<div role="group" class="group/field gap-1.5 min-w-0 flex flex-col">
+		<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 			{@render fieldHeader()}
 			{@render clientSlot({
 				inputId: item.paramId,
@@ -211,8 +293,36 @@
 			})}
 		</div>
 	{/if}
+{:else if isGeometry}
+	<div role="group" class="group/field gap-2 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">
+	<div role="group" class="group/field gap-2 min-w-0 flex flex-col">
 		{#if !isCheckboxWidget(item)}
 			{@render fieldHeader(inputId)}
 		{/if}
@@ -221,6 +331,7 @@
 			{@const config = item.config}
 			<NumberInput
 				{inputId}
+				labelId="{inputId}-label"
 				value={typeof value === 'number' ? value : undefined}
 				{config}
 				onChange={commit}
@@ -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,8 +375,10 @@
 			/>
 		{:else if isColorWidget(item)}
 			<ColorInput
+				{inputId}
 				value={typeof value === 'string' ? value : '#000000'}
 				onChange={(newValue) => commit(newValue)}
+				{disabled}
 			/>
 		{/if}
 	</div>

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

@@ -8,12 +8,14 @@
 		formatFileSize,
 		getBase64FileSize,
 		isFileData
-	} from '../../utils/file-download';
+	} from '../../utils/file-download.js';
 	import { Button } from '../primitives';
 	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 { Label } from '../primitives/label/index.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatCount, formatMessage } from '../../i18n/messages.js';
 
 	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-strong';
 
 	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,7 +157,11 @@
 
 {#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}
 			<HelpButton {label} description={item.description} />
 		{/if}
@@ -160,7 +169,7 @@
 {/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)}
@@ -185,7 +194,7 @@
 					<span class="font-medium">{node.name}</span>
 				</button>
 				{#if isOpen}
-					<div class="ml-4 pl-2 border-l border-border/50">
+					<div class="ml-4 pl-2 border-l border-border-strong">
 						{@render treeNodes(node.children, folderPath)}
 					</div>
 				{/if}
@@ -208,17 +217,19 @@
 
 {#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-strong 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-strong 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>
@@ -243,33 +254,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}
@@ -277,7 +288,10 @@
 
 <!-- Dynamic value list outputs are routing sinks (their options feed an input), not displayed. -->
 {#if item.widgetType !== 'dynamicValueList'}
-	<div role="group" class="group/field 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'}
@@ -290,21 +304,21 @@
 		{: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} max-h-96 overflow-auto bg-muted/10 wrap-anywhere text-foreground">{formattedValue}</pre>
+						class="{boxClass} max-h-96 font-mono overflow-auto bg-muted wrap-anywhere text-foreground">{formattedValue}</pre>
 				{:else}
 					<div
-						class="{boxClass} bg-muted/10 wrap-anywhere wrap-break-word whitespace-pre-wrap text-foreground"
+						class="{boxClass} bg-muted wrap-anywhere wrap-break-word whitespace-pre-wrap text-foreground"
 					>
 						{#if hasValue}{value}{:else}{@render placeholder()}{/if}
 					</div>
@@ -313,10 +327,10 @@
 					<div
 						class="right-2 top-2 absolute transition-opacity {copied
 							? 'opacity-100'
-							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100'}"
+							: 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100'}"
 					>
 						<Button onclick={copyToClipboard} size="sm">
-							{copied ? 'Copied!' : 'Copy'}
+							{copied ? t.copied : t.copy}
 						</Button>
 					</div>
 				{/if}

package/dist/components/preview/TabBar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
-	import * as Tabs from '../primitives/tabs';
+	import * as Tabs from '../primitives/tabs/index.js';
 	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import Icon from '@iconify/svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -12,9 +12,11 @@
 		tabs: TabConfig[];
 		activeTabId: string;
 		onTabChange: (tabId: string) => void;
+		/** Matches TabContent's tighter gutter in the stacked phone layout. */
+		bare?: boolean;
 	}
 
-	let { tabs, activeTabId, onTabChange }: Props = $props();
+	let { tabs, activeTabId, onTabChange, bare = false }: Props = $props();
 
 	const SCROLL_BUTTON_WIDTH = 32;
 
@@ -64,7 +66,7 @@
 	}
 </script>
 
-<div class="tab-bar relative shrink-0 border-b border-border">
+<div class="tab-bar relative shrink-0 border-b border-border {bare ? 'mx-1' : 'mx-3'}">
 	<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)} variant="line">
@@ -127,11 +129,11 @@
 	.scroll-button.back {
 		left: 0;
 		padding: 0 1.25rem 0 0.375rem;
-		background: linear-gradient(to right, var(--card) 55%, transparent);
+		background: linear-gradient(to right, var(--tab-bar-bg, var(--background)) 55%, transparent);
 	}
 	.scroll-button.forward {
 		right: 0;
 		padding: 0 0.375rem 0 1.25rem;
-		background: linear-gradient(to left, var(--card) 55%, transparent);
+		background: linear-gradient(to left, var(--tab-bar-bg, var(--background)) 55%, transparent);
 	}
 </style>

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

@@ -3,6 +3,8 @@ interface Props {
     tabs: TabConfig[];
     activeTabId: string;
     onTabChange: (tabId: string) => void;
+    /** Matches TabContent's tighter gutter in the stacked phone layout. */
+    bare?: boolean;
 }
 declare const TabBar: import("svelte").Component<Props, {}, "">;
 type TabBar = ReturnType<typeof TabBar>;

package/dist/components/preview/TabContent.svelte

@@ -3,18 +3,21 @@
 		TabConfig,
 		SchemaInput,
 		DiscoveredOutput,
+		UISchema,
 		SupportedTypes,
 		InputLayoutItem,
 		OutputLayoutItem
 	} from '@selvajs/schemas';
-	import * as Tabs from '../primitives/tabs';
-	import { ScrollArea } from '../primitives/scroll-area';
+	import * as Tabs from '../primitives/tabs/index.js';
+	import { ScrollArea } from '../primitives/scroll-area/index.js';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
 	import Group from './Group.svelte';
 	import InputControl from './InputControl.svelte';
 	import OutputDisplay from './OutputDisplay.svelte';
-	import { evaluateGroupVisibility } from '../../schema/visibility-rules';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { evaluateGroupVisibility } from '../../schema/visibility-rules.js';
+	import { isSupportedOn, layoutItemKind } from '../../schema/host-support.js';
+	import { getHostContext } from '../../contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -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,31 +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">
-				{#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}
+{#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-4 py-4 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">
+			<!-- `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>