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

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>;
 
@@ -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;
@@ -154,23 +159,13 @@
 	<div class="gap-2 flex items-center">
 		<Label>{label}</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)}
@@ -219,7 +214,7 @@
 {#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...
+			{t.waitingForFiles}
 		</div>
 	{:else}
 		<div class="gap-2 flex flex-col">
@@ -228,7 +223,7 @@
 					<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>
@@ -255,18 +250,16 @@
 				<div
 					class="rounded px-3 py-2 text-sm 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}
@@ -278,8 +271,10 @@
 			{/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 +282,7 @@
 
 <!-- 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 gap-2 flex flex-col">
 		{@render fieldHeader()}
 
 		{#if item.widgetType === 'chart'}
@@ -311,24 +306,24 @@
 			<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 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}

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, {}, "">;