@selvajs/ui 6.6.0-beta.9 → 7.0.1-beta.0

package/src/lib/components/preview/TabBar.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
-	import * as Tabs from '$lib/components/primitives/tabs';
+	import * as Tabs from '#lib/components/primitives/tabs/index.js';
 	import { ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import Icon from '@iconify/svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { getLocaleContext } from '#lib/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/src/lib/components/preview/TabContent.svelte

@@ -8,16 +8,16 @@
 		InputLayoutItem,
 		OutputLayoutItem
 	} from '@selvajs/schemas';
-	import * as Tabs from '$lib/components/primitives/tabs';
-	import { ScrollArea } from '$lib/components/primitives/scroll-area';
+	import * as Tabs from '#lib/components/primitives/tabs/index.js';
+	import { ScrollArea } from '#lib/components/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 '$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';
+	import { evaluateGroupVisibility } from '#lib/schema/visibility-rules.js';
+	import { isSupportedOn, layoutItemKind } from '#lib/schema/host-support.js';
+	import { getHostContext } from '#lib/contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -113,7 +113,7 @@
 		{#if visibleGroups.length === 0}
 			<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
 		{:else}
-			<div class="gap-3 py-3 flex flex-col">
+			<div class="gap-4 py-4 flex flex-col">
 				{#each visibleGroups as group (group.id)}
 					<Group
 						label={group.label}
@@ -137,7 +137,7 @@
 	{#if bare}
 		{@render body()}
 	{:else}
-		<div class="h-full bg-muted dark:bg-background">
+		<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">

package/src/lib/components/preview/TabLayout.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
 	import type { UISchema, SupportedTypes } from '@selvajs/schemas';
-	import * as Card from '$lib/components/primitives/card';
-	import * as Tabs from '$lib/components/primitives/tabs';
+	import * as Tabs from '#lib/components/primitives/tabs/index.js';
 	import TabBar from './TabBar.svelte';
 	import TabContent from './TabContent.svelte';
-	import { isTabVisible } from '$lib/schema/visibility-rules';
-	import { buildDynamicValueListOptions } from '$lib/schema/dynamic-value-list';
+	import { isTabVisible } from '#lib/schema/visibility-rules.js';
+	import { buildDynamicValueListOptions } from '#lib/schema/dynamic-value-list.js';
 
 	interface Props {
 		schema: UISchema;
@@ -81,7 +80,7 @@
 {#snippet tabs()}
 	<Tabs.Root value={activeTabId} variant="line" class="min-h-0 flex-1">
 		{#if showTabBar}
-			<TabBar tabs={visibleTabs} {activeTabId} onTabChange={handleTabChange} />
+			<TabBar tabs={visibleTabs} {activeTabId} onTabChange={handleTabChange} {bare} />
 		{/if}
 
 		{#each visibleTabs as tab (tab.id)}
@@ -104,7 +103,7 @@
 {#if bare}
 	{@render tabs()}
 {:else}
-	<Card.Root variant="flush" class="min-h-0 mx-1 flex-1">
+	<div class="min-h-0 flex flex-1 flex-col">
 		{@render tabs()}
-	</Card.Root>
+	</div>
 {/if}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { SupportedTypes } from '@selvajs/schemas';
-	import { Checkbox } from '$lib/components/primitives/checkbox';
+	import { Checkbox } from '#lib/components/primitives/checkbox/index.js';
 
 	interface Props {
 		inputId: string;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import { Checkbox } from '$lib/components/primitives/checkbox';
-	import { optionGlyph } from '$lib/schema/option-display';
+	import { Checkbox } from '#lib/components/primitives/checkbox/index.js';
+	import { optionGlyph } from '#lib/schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 
@@ -30,7 +30,7 @@
 	}
 </script>
 
-<div class="divide-y divide-border/60 overflow-hidden rounded-md border border-input">
+<div class="divide-y divide-border overflow-hidden rounded-md border border-input">
 	{#each Object.entries(options) as [name, expr] (name)}
 		{@const optionValue = expr ?? name}
 		{@const optionId = `${inputId}-${optionValue}`}
@@ -38,8 +38,8 @@
 		{@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
-				? 'bg-accent/30'
+			class="gap-3 px-3 py-2 text-sm flex items-center transition-colors select-none hover:bg-hover {isSelected
+				? 'bg-selected'
 				: ''} {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
 		>
 			<Checkbox

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

@@ -1,23 +1,365 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+	import { Check, Pipette } from '@lucide/svelte';
+	import * as Popover from '#lib/components/primitives/popover/index.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
+	import { debounce } from '#lib/utils/debounce.js';
+	import {
+		contrastRatio,
+		hexToHsv,
+		hsvToHex,
+		normalizeHex,
+		type Hsv
+	} from '#lib/utils/color-space.js';
+
 	interface Props {
 		inputId: string;
 		value?: string;
 		onChange: (value: string) => void;
+		disabled?: boolean;
+	}
+
+	let { inputId, value = '#000000', onChange, disabled = false }: Props = $props();
+
+	const PRESETS = [
+		'#000000',
+		'#ffffff',
+		'#9ca3af',
+		'#ef4444',
+		'#f97316',
+		'#eab308',
+		'#22c55e',
+		'#14b8a6',
+		'#3b82f6',
+		'#8b5cf6',
+		'#ec4899',
+		'#78350f'
+	];
+
+	interface EyeDropperApi {
+		open(): Promise<{ sRGBHex: string }>;
+	}
+	const eyeDropperCtor = (globalThis as { EyeDropper?: new () => EyeDropperApi }).EyeDropper;
+
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
+	const parse = (hex: string): Hsv => hexToHsv(normalizeHex(hex) ?? '#000000')!;
+
+	let hsv = $state<Hsv>(untrack(() => parse(value)));
+	let draft = $state('');
+	let hexError = $state(false);
+	let areaEl = $state<HTMLElement | null>(null);
+
+	const currentHex = $derived(hsvToHex(hsv));
+	const hueColor = $derived(hsvToHex({ h: hsv.h, s: 1, v: 1 }));
+
+	// An external value only replaces the picker's state when it names a different color.
+	// Rebuilding from the hex alone would reset the hue whenever s or v hits 0.
+	$effect(() => {
+		const next = normalizeHex(value) ?? '#000000';
+		if (next !== untrack(() => currentHex)) hsv = parse(next);
+	});
+
+	$effect(() => {
+		draft = currentHex;
+		hexError = false;
+	});
+
+	// Dragging only updates local state; the host sees one change per gesture, since each
+	// change can trigger a solve.
+	function commit() {
+		commitDebounced.cancel();
+		if (currentHex !== normalizeHex(value)) onChange(currentHex);
+	}
+	const commitDebounced = debounce(commit, 150);
+
+	const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+
+	function setFromPointer(e: PointerEvent) {
+		if (!areaEl) return;
+		const rect = areaEl.getBoundingClientRect();
+		hsv = {
+			h: hsv.h,
+			s: clamp01((e.clientX - rect.left) / rect.width),
+			v: clamp01(1 - (e.clientY - rect.top) / rect.height)
+		};
+	}
+
+	function onAreaPointerDown(e: PointerEvent) {
+		if (disabled || e.button !== 0) return;
+		e.preventDefault();
+		areaEl?.focus();
+		areaEl?.setPointerCapture(e.pointerId);
+		setFromPointer(e);
+	}
+
+	function onAreaPointerMove(e: PointerEvent) {
+		if (areaEl?.hasPointerCapture(e.pointerId)) setFromPointer(e);
+	}
+
+	function onAreaPointerUp(e: PointerEvent) {
+		if (!areaEl?.hasPointerCapture(e.pointerId)) return;
+		areaEl.releasePointerCapture(e.pointerId);
+		commit();
+	}
+
+	function onAreaKeydown(e: KeyboardEvent) {
+		const step = e.shiftKey ? 0.1 : 0.01;
+		let { s, v } = hsv;
+		switch (e.key) {
+			case 'ArrowLeft':
+				s -= step;
+				break;
+			case 'ArrowRight':
+				s += step;
+				break;
+			case 'ArrowUp':
+				v += step;
+				break;
+			case 'ArrowDown':
+				v -= step;
+				break;
+			case 'PageUp':
+				v += 0.1;
+				break;
+			case 'PageDown':
+				v -= 0.1;
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+		hsv = { h: hsv.h, s: clamp01(s), v: clamp01(v) };
+		commitDebounced();
 	}
 
-	let { inputId, value = '#000000', onChange }: Props = $props();
+	function onHueInput(e: Event) {
+		hsv = { ...hsv, h: Number((e.currentTarget as HTMLInputElement).value) };
+	}
+
+	function applyHex(hex: string) {
+		hsv = parse(hex);
+		commit();
+	}
+
+	function commitDraft() {
+		const hex = normalizeHex(draft);
+		if (!hex) {
+			hexError = true;
+			return;
+		}
+		hexError = false;
+		applyHex(hex);
+		draft = hex;
+	}
+
+	function onHexKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			commitDraft();
+		}
+	}
+
+	function onHexBlur() {
+		if (normalizeHex(draft)) commitDraft();
+		else {
+			draft = currentHex;
+			hexError = false;
+		}
+	}
+
+	async function pickFromScreen() {
+		if (!eyeDropperCtor) return;
+		try {
+			const { sRGBHex } = await new eyeDropperCtor().open();
+			applyHex(sRGBHex);
+		} catch {
+			// The user dismissed the eyedropper.
+		}
+	}
+
+	const checkOn = (hex: string) =>
+		(contrastRatio(hex, '#000000') ?? 0) > (contrastRatio(hex, '#ffffff') ?? 0)
+			? 'text-black'
+			: 'text-white';
 </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 dark:bg-input/30"
-		onchange={(e) => {
-			const newValue = (e.currentTarget as HTMLInputElement).value;
-			onChange(newValue);
-		}}
-	/>
-	<span class="font-mono text-sm text-muted-foreground">{value || '#000000'}</span>
-</div>
+<Popover.Root>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				type="button"
+				id={inputId}
+				{disabled}
+				aria-label={formatMessage(t.colorPick, { color: currentHex })}
+				class="h-9 gap-2.5 px-2.5 shadow-xs max-w-48 flex w-full cursor-pointer items-center rounded-md border border-input bg-background text-left outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				<span
+					class="size-5 shrink-0 rounded-md bg-(--swatch) ring-1 ring-border ring-inset"
+					style:--swatch={currentHex}
+				></span>
+				<span class="font-mono text-sm text-muted-foreground">{currentHex}</span>
+			</button>
+		{/snippet}
+	</Popover.Trigger>
+
+	<Popover.Content align="start">
+		<div
+			bind:this={areaEl}
+			role="slider"
+			tabindex={disabled ? -1 : 0}
+			aria-label={t.colorArea}
+			aria-valuemin={0}
+			aria-valuemax={100}
+			aria-valuenow={Math.round(hsv.v * 100)}
+			aria-valuetext={formatMessage(t.colorAreaValue, {
+				s: Math.round(hsv.s * 100),
+				v: Math.round(hsv.v * 100)
+			})}
+			aria-disabled={disabled}
+			class="color-area h-36 relative w-full cursor-crosshair touch-none rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring"
+			style:--hue={hueColor}
+			onpointerdown={onAreaPointerDown}
+			onpointermove={onAreaPointerMove}
+			onpointerup={onAreaPointerUp}
+			onpointercancel={onAreaPointerUp}
+			onkeydown={onAreaKeydown}
+		>
+			<span
+				class="color-thumb size-4 border-white pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 bg-(--swatch)"
+				style:--x="{hsv.s * 100}%"
+				style:--y="{(1 - hsv.v) * 100}%"
+				style:--swatch={currentHex}
+			></span>
+		</div>
+
+		<input
+			type="range"
+			class="color-hue"
+			min="0"
+			max="360"
+			step="1"
+			aria-label={t.colorHue}
+			value={Math.round(hsv.h)}
+			{disabled}
+			oninput={onHueInput}
+			onchange={commit}
+		/>
+
+		<div class="gap-2 flex items-start">
+			<div class="min-w-0 flex-1">
+				<Input
+					type="text"
+					aria-label={t.colorHex}
+					aria-invalid={hexError}
+					aria-describedby={hexError ? `${inputId}-hex-error` : undefined}
+					autocomplete="off"
+					spellcheck={false}
+					maxlength={7}
+					{disabled}
+					bind:value={draft}
+					onkeydown={onHexKeydown}
+					onblur={onHexBlur}
+				/>
+			</div>
+			{#if eyeDropperCtor}
+				<button
+					type="button"
+					{disabled}
+					aria-label={t.colorEyedropper}
+					title={t.colorEyedropper}
+					class="size-9 flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-input bg-background outline-none hover:bg-hover focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+					onclick={pickFromScreen}
+				>
+					<Pipette class="size-4" aria-hidden="true" />
+				</button>
+			{/if}
+		</div>
+		{#if hexError}
+			<p id="{inputId}-hex-error" role="alert" class="text-xs text-destructive">
+				{t.colorHexInvalid}
+			</p>
+		{/if}
+
+		<div role="group" aria-label={t.colorPresets} class="gap-1.5 grid grid-cols-6">
+			{#each PRESETS as preset (preset)}
+				{@const selected = preset === currentHex}
+				<button
+					type="button"
+					{disabled}
+					aria-label={preset}
+					aria-pressed={selected}
+					class="h-6 flex cursor-pointer items-center justify-center rounded-md bg-(--swatch) ring-1 ring-border outline-none ring-inset focus-visible:ring-3 focus-visible:ring-ring disabled:cursor-not-allowed"
+					style:--swatch={preset}
+					onclick={() => applyHex(preset)}
+				>
+					{#if selected}
+						<Check class="size-3.5 {checkOn(preset)}" aria-hidden="true" />
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</Popover.Content>
+</Popover.Root>
+
+<style>
+	.color-area {
+		background-color: var(--hue);
+		background-image:
+			linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
+	}
+	.color-thumb {
+		left: var(--x);
+		top: var(--y);
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue {
+		appearance: none;
+		-webkit-appearance: none;
+		height: 0.75rem;
+		width: 100%;
+		margin: 0;
+		border-radius: 9999px;
+		cursor: pointer;
+		outline: none;
+		background: linear-gradient(
+			to right,
+			#f00 0%,
+			#ff0 16.67%,
+			#0f0 33.33%,
+			#0ff 50%,
+			#00f 66.67%,
+			#f0f 83.33%,
+			#f00 100%
+		);
+	}
+	.color-hue::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		height: 1rem;
+		width: 1rem;
+		border-radius: 9999px;
+		border: 2px solid #fff;
+		background: transparent;
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue::-moz-range-thumb {
+		height: 1rem;
+		width: 1rem;
+		box-sizing: border-box;
+		border-radius: 9999px;
+		border: 2px solid #fff;
+		background: transparent;
+		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4);
+	}
+	.color-hue:focus-visible {
+		box-shadow: 0 0 0 3px var(--ring);
+	}
+	.color-hue:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+</style>

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import * as Select from '$lib/components/primitives/select';
-	import { optionGlyph } from '$lib/schema/option-display';
+	import * as Select from '#lib/components/primitives/select/index.js';
+	import { optionGlyph } from '#lib/schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	interface Props {
 		value?: string;

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

@@ -1,14 +1,19 @@
 <script lang="ts">
-	import { Input } from '$lib/components/primitives/input';
-	import { Button } from '$lib/components/primitives/button';
-	import { Label } from '$lib/components/primitives/label';
-	import { toast } from '$lib/components/primitives/sonner';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import { Label } from '#lib/components/primitives/label/index.js';
+	import { toast } from '#lib/components/primitives/sonner/index.js';
 	import { FileUp, Link, CircleAlert, CircleCheck } from '@lucide/svelte';
-	import { APP_DEFAULTS } from '$lib/constants';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
-	import { pickFile } from '$lib/utils/host-files';
-	import { acceptsFileEnding, isWebp, shouldConvertWebp, webpToPng } from '$lib/utils/webp-to-png';
+	import { APP_DEFAULTS } from '#lib/constants.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
+	import { pickFile } from '#lib/utils/host-files.js';
+	import {
+		acceptsFileEnding,
+		isWebp,
+		shouldConvertWebp,
+		webpToPng
+	} from '#lib/utils/webp-to-png.js';
 
 	interface Props {
 		value?: string;
@@ -282,10 +287,10 @@
 					type="button"
 					onclick={() => (activeMode = mode)}
 					aria-pressed={activeMode === mode}
-					class={`px-3 py-1 font-medium flex-1 rounded-sm transition-colors ${
+					class={`px-3 py-1 font-medium flex-1 rounded-sm border transition-colors ${
 						activeMode === mode
-							? 'shadow-xs bg-background text-foreground'
-							: 'text-muted-foreground hover:text-foreground'
+							? 'shadow-xs border-border-strong bg-raised text-foreground'
+							: 'border-transparent text-muted-foreground hover:text-foreground'
 					}`}
 				>
 					{mode === 'upload' ? t.fileModeUpload : t.fileModeUrl}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Button } from '$lib/components/primitives/button';
-	import type { GeometryPickResult, PickKind } from '$lib/contexts/hostContext.svelte';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import type { ViewerMessages } from '$lib/i18n/messages';
+	import { Button } from '#lib/components/primitives/button/index.js';
+	import type { GeometryPickResult, PickKind } from '#lib/contexts/hostContext.svelte.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import type { ViewerMessages } from '#lib/i18n/messages.js';
 
 	interface Props {
 		inputId: string;

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { NumberWidgetConfig, SupportedTypes } from '@selvajs/schemas';
-	import { debounce } from '$lib/utils/debounce';
-	import { Input } from '$lib/components/primitives/input';
-	import { Slider } from '$lib/components/primitives/slider';
-	import * as InputGroup from '$lib/components/primitives/input-group';
-	import { Separator } from '$lib/components/primitives/separator';
-	import * as Field from '$lib/components/primitives/field';
-	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { formatMessage } from '$lib/i18n/messages';
+	import { debounce } from '#lib/utils/debounce.js';
+	import { Input } from '#lib/components/primitives/input/index.js';
+	import { Slider } from '#lib/components/primitives/slider/index.js';
+	import * as InputGroup from '#lib/components/primitives/input-group/index.js';
+	import { Separator } from '#lib/components/primitives/separator/index.js';
+	import * as Field from '#lib/components/primitives/field/index.js';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { formatMessage } from '#lib/i18n/messages.js';
 
 	interface Props {
 		inputId: string;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { GlyphSource } from '$lib/schema/option-display';
-	import { cn } from '$lib/utils.js';
+	import type { GlyphSource } from '#lib/schema/option-display.js';
+	import { cn } from '#lib/utils.js';
 
 	interface Props {
 		glyph: GlyphSource;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { DropdownWidgetConfig, SupportedTypes, UISchema } from '@selvajs/schemas';
-	import * as ToggleGroup from '$lib/components/primitives/toggle-group';
-	import { optionGlyph } from '$lib/schema/option-display';
+	import * as ToggleGroup from '#lib/components/primitives/toggle-group/index.js';
+	import { optionGlyph } from '#lib/schema/option-display.js';
 	import OptionGlyph from './OptionGlyph.svelte';
 
 	interface Props {
@@ -24,6 +24,7 @@
 <ToggleGroup.Root
 	type="single"
 	variant="outline"
+	spacing={0}
 	size={hasIcons ? 'stacked' : 'default'}
 	class="w-full"
 	aria-labelledby={labelId}