@selvajs/ui 6.6.0-beta.14 → 6.6.0-beta.16

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

@@ -297,14 +297,14 @@
 	}
 
 	const toolButton =
-		'flex h-7 min-w-7 items-center justify-center rounded px-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40';
+		'flex h-7 min-w-7 items-center justify-center rounded-sm px-1.5 text-muted-foreground transition-colors hover:bg-hover hover:text-foreground disabled:pointer-events-none disabled:opacity-40';
 </script>
 
 <!-- The layout hides this output until a solve returns a file, so there is no empty state here. -->
 {#if error || unsupported || current}
 	<div
 		bind:this={wrapperEl}
-		class="flex flex-col overflow-hidden rounded-lg border border-border bg-background {isFullscreen
+		class="flex flex-col overflow-hidden rounded-lg border border-border-strong bg-background {isFullscreen
 			? 'h-dvh'
 			: ''}"
 	>
@@ -375,7 +375,7 @@
 						onclick={() => step(-1)}
 						title="{t.previousImage} (←)"
 						aria-label={t.previousImage}
-						class="left-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/80 text-foreground hover:bg-background"
+						class="left-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border-strong bg-background/80 text-foreground hover:bg-background"
 					>
 						<ChevronLeft size={16} />
 					</button>
@@ -383,14 +383,14 @@
 						onclick={() => step(1)}
 						title="{t.nextImage} (→)"
 						aria-label={t.nextImage}
-						class="right-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border bg-background/80 text-foreground hover:bg-background"
+						class="right-2 p-1.5 backdrop-blur-sm absolute top-1/2 -translate-y-1/2 rounded-full border border-border-strong bg-background/80 text-foreground hover:bg-background"
 					>
 						<ChevronRight size={16} />
 					</button>
 				{/if}
 
 				<div
-					class="px-2.5 py-1 text-xs bottom-2 rounded pointer-events-none absolute left-1/2 -translate-x-1/2 bg-foreground/80 text-background transition-opacity {showWheelHint
+					class="px-2.5 py-1 text-xs bottom-2 pointer-events-none absolute left-1/2 -translate-x-1/2 rounded-sm bg-foreground text-background transition-opacity {showWheelHint
 						? 'opacity-100'
 						: 'opacity-0'}"
 				>
@@ -404,7 +404,7 @@
 						<button
 							onclick={() => select(i)}
 							title="{image.fileName}{image.fileType}"
-							class="h-12 w-16 rounded shrink-0 overflow-hidden border-2 bg-muted transition-colors {i ===
+							class="h-12 w-16 shrink-0 overflow-hidden rounded-sm border-2 bg-muted transition-colors {i ===
 							currentIndex
 								? 'border-primary'
 								: 'border-transparent opacity-70 hover:opacity-100'}"

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

@@ -378,6 +378,7 @@
 				{inputId}
 				value={typeof value === 'string' ? value : '#000000'}
 				onChange={(newValue) => commit(newValue)}
+				{disabled}
 			/>
 		{/if}
 	</div>

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

@@ -38,7 +38,7 @@
 	);
 	const hasValue = $derived(value != null);
 
-	const boxClass = 'min-h-12.5 rounded-md px-3 py-3 text-sm border border-border/60';
+	const boxClass = 'min-h-12.5 rounded-md px-3 py-3 text-sm border border-border-strong';
 
 	async function copyToClipboard() {
 		try {
@@ -194,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}
@@ -217,12 +217,14 @@
 
 {#snippet fileDisplay()}
 	{#if fileCount === 0}
-		<div class="px-3 py-3 text-sm rounded-md border border-border bg-muted text-muted-foreground">
+		<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="px-3 py-2 rounded-md 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
@@ -313,10 +315,10 @@
 			<div class="group relative">
 				{#if isObjectValue}
 					<pre
-						class="{boxClass} max-h-96 font-mono 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>

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

@@ -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

@@ -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,6 +1,5 @@
 <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 TabBar from './TabBar.svelte';
 	import TabContent from './TabContent.svelte';
@@ -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 flex-1">
+	<div class="min-h-0 flex flex-1 flex-col">
 		{@render tabs()}
-	</Card.Root>
+	</div>
 {/if}

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

@@ -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';
+	import { Input } from '$lib/components/primitives/input';
+	import { getLocaleContext } from '$lib/i18n/localeContext.svelte';
+	import { formatMessage } from '$lib/i18n/messages';
+	import { debounce } from '$lib/utils/debounce';
+	import {
+		contrastRatio,
+		hexToHsv,
+		hsvToHex,
+		normalizeHex,
+		type Hsv
+	} from '$lib/utils/color-space';
+
 	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/FileInput.svelte

@@ -282,10 +282,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/SegmentedInput.svelte

@@ -23,7 +23,8 @@
 
 <ToggleGroup.Root
 	type="single"
-	variant="outline"
+	variant="segmented"
+	spacing={1}
 	size={hasIcons ? 'stacked' : 'default'}
 	class="w-full"
 	aria-labelledby={labelId}

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

@@ -45,6 +45,7 @@
 			bind:this={tiles[index]}
 			type="button"
 			role="radio"
+			title={option.name}
 			aria-checked={selected}
 			tabindex={index === focusIndex ? 0 : -1}
 			{disabled}
@@ -52,7 +53,7 @@
 			onkeydown={(e) => onKeydown(e, index)}
 			class="gap-1.5 p-1.5 min-w-0 flex flex-col rounded-lg border text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 {selected
 				? 'border-primary bg-primary/5 ring-1 ring-primary'
-				: 'border-input hover:bg-accent/40'}"
+				: 'border-input hover:bg-hover'}"
 		>
 			<span
 				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted text-muted-foreground"
@@ -65,7 +66,7 @@
 					<span class="text-lg font-medium" aria-hidden="true">{option.name.charAt(0)}</span>
 				{/if}
 			</span>
-			<span class="px-0.5 text-xs leading-tight truncate" class:font-medium={selected}>
+			<span class="px-0.5 text-xs leading-tight line-clamp-2" class:font-medium={selected}>
 				{option.name}
 			</span>
 		</button>

package/src/lib/components/primitives/CalculateButton.svelte

@@ -38,7 +38,7 @@
 	});
 </script>
 
-<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border/50">
+<div class="bottom-0 mt-3 pb-3 pt-2 backdrop-blur-sm px-2 sticky border-t border-border">
 	<span class="sr-only" role="status" aria-live="polite">{announcement}</span>
 	<div class="gap-2 flex">
 		<Button
@@ -55,7 +55,7 @@
 				<Loader class="h-4 w-4 animate-spin" />
 				{t.solvingEllipsis}
 				<kbd
-					class="px-1 font-sans rounded border border-current/30 text-2xs opacity-70"
+					class="px-1 font-sans rounded-sm border border-current/30 text-2xs opacity-70"
 					title={t.solveMessagesEscHint}
 				>
 					Esc

package/src/lib/components/primitives/Callout.svelte

@@ -8,7 +8,7 @@
 		variants: {
 			tone: {
 				info: 'border-info/40 bg-info/10',
-				tip: 'border-border bg-muted/40',
+				tip: 'border-border bg-muted',
 				success: 'border-success/40 bg-success/10',
 				warning: 'border-warning/40 bg-warning/10',
 				danger: 'border-destructive/40 bg-destructive/10'
@@ -38,7 +38,7 @@
 		title?: string;
 		/** Replaces the tone's default icon. `null` drops the icon entirely. */
 		icon?: Component | null;
-		children: Snippet;
+		children?: Snippet;
 	}
 
 	let { tone = 'info', title, icon, class: className, children, ...restProps }: Props = $props();
@@ -59,8 +59,10 @@
 		{#if title}
 			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}
-		<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
-			{@render children()}
-		</div>
+		{#if children}
+			<div class="leading-relaxed text-muted-foreground [&_a]:underline [&_strong]:text-foreground">
+				{@render children()}
+			</div>
+		{/if}
 	</div>
 </div>