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

package/README.md

@@ -57,9 +57,6 @@ In your `app.css`:
 @import '@selvajs/ui/styles/base.css';
 ```
 
-Themes are available under `@selvajs/ui/styles/themes/*` — `selva`, `neutral`, `ocean`, and
-`cyberpunk`.
-
 ## Schema types
 
 Types generated from `packages/schemas/ui-schema.json` are published by `@selvajs/schemas`, not

package/dist/components/compute/AppLayout.svelte

@@ -284,7 +284,7 @@
 			trailing={hasMenu ? actionsMenu : undefined}
 		/>
 	{:else if hasMenu || solvingIndicatorPlacement === 'inline'}
-		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border/50">
+		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border">
 			{#if solvingIndicatorPlacement === 'inline'}
 				<SolvingIndicator show={showSolvingChip} placement="inline" />
 			{/if}
@@ -325,7 +325,7 @@
 	data-layout-root
 	class="min-h-0 flex flex-1 flex-col overflow-hidden {stacked
 		? ''
-		: `sm:flex-row sm:py-(--page-py) ${leftCollapsed ? 'sm:pl-0' : 'sm:pl-(--page-px)'} ${rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}`}"
+		: `sm:flex-row sm:py-2 ${leftCollapsed ? 'sm:pl-0' : 'sm:pl-2'} ${rightCollapsed ? 'sm:pr-0' : 'sm:pr-2'}`}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
 	class:mobile-root={stacked}
@@ -347,14 +347,15 @@
 					{onViewerReady}
 					viewerConfig={{
 						...viewerConfig,
-						backgroundColor: schema?.viewerOptions?.backgroundColor,
+						backgroundColor: schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+						look: schema?.viewerOptions?.look ?? viewerConfig.look,
 						showSceneManager: false
 					}}
 				/>
 			</div>
 
 			<div
-				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet drawer-{drawer}"
+				class="drawer-container z-40 rounded-t-xl border-t bg-background shadow-sheet drawer-{drawer}"
 			>
 				<!-- Named by its visible label; aria-expanded carries the open/closed state. -->
 				<button
@@ -472,6 +473,7 @@
 					<Resizable.Handle
 						withHandle
 						line={false}
+						class="translate-x-1.5 z-20"
 						data-collapsed={leftCollapsed}
 						onclick={() => {
 							if (leftCollapsed) leftPaneRef?.expand();
@@ -490,7 +492,9 @@
 							{onViewerReady}
 							viewerConfig={{
 								...viewerConfig,
-								backgroundColor: schema?.viewerOptions?.backgroundColor
+								backgroundColor:
+									schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+								look: schema?.viewerOptions?.look ?? viewerConfig.look
 							}}
 						/>
 					</Resizable.Pane>
@@ -501,6 +505,7 @@
 						<Resizable.Handle
 							withHandle
 							line={false}
+							class="-translate-x-1.5 z-20"
 							data-collapsed={rightCollapsed}
 							onclick={() => {
 								if (rightCollapsed) rightPaneRef?.expand();

package/dist/components/compute/CollapsedPanelStrip.svelte

@@ -27,7 +27,7 @@
 	);
 
 	const tabButtonClass =
-		'w-8 h-8 rounded-md cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
+		'w-8 h-8 rounded-md cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-hover hover:text-foreground';
 </script>
 
 <div

package/dist/components/compute/ParameterPresetManager.svelte

@@ -203,7 +203,7 @@
 							<button
 								type="button"
 								onclick={() => selectListedState(preset)}
-								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-muted"
+								class="p-3 w-full rounded-lg border text-left transition-colors hover:bg-hover"
 							>
 								<div class="text-sm font-medium">{preset.name}</div>
 								{#if preset.description}

package/dist/components/compute/SolveMessages.svelte

@@ -291,7 +291,7 @@
 	     framed box inside an edge-to-edge column reads as a dialog glued into the page. -->
 	<div
 		class={placement === 'inline'
-			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border/50'}`
+			? `px-2 py-2 border-t ${view === 'blocked' ? 'border-destructive/40' : 'border-border'}`
 			: `p-3 bottom-4 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg border bg-background ${view === 'blocked' ? 'border-destructive/50' : ''}`}
 		role={view === 'review' || view === 'blocked' ? 'alert' : undefined}
 		data-testid="solve-messages"
@@ -319,7 +319,7 @@
 							title={t.solveMessagesEscHint}
 						>
 							{t.solveMessagesAbort}
-							<kbd class="px-1 font-sans rounded border border-border/60 text-2xs opacity-70">
+							<kbd class="px-1 font-sans rounded-sm border border-border text-2xs opacity-70">
 								Esc
 							</kbd>
 						</Button>

package/dist/components/layout/FooterItemRenderer.svelte

@@ -9,7 +9,7 @@
 {#if item.onClick}
 	<button
 		onclick={item.onClick}
-		class="gap-1.5 px-2 py-0.5 rounded flex cursor-pointer items-center transition-colors hover:bg-muted"
+		class="gap-1.5 px-2 py-0.5 flex cursor-pointer items-center rounded-sm transition-colors hover:bg-hover"
 	>
 		<item.component {...itemProps} />
 	</button>

package/dist/components/layout/PageFooter.svelte

@@ -88,12 +88,12 @@
 			<ComputeMessagesDialog {errors} {warnings} {diagnostics}>
 				{#snippet trigger()}
 					<div
-						class="gap-1.5 px-2 py-1 rounded flex cursor-pointer items-center transition-colors hover:bg-muted {errorCount >
+						class="gap-1.5 px-2 py-1 flex cursor-pointer items-center rounded-sm transition-colors hover:bg-hover {errorCount >
 						0
 							? 'text-destructive hover:bg-destructive/10'
 							: warningCount > 0
 								? 'text-warning hover:bg-warning/10'
-								: 'hover:bg-muted'}"
+								: 'hover:bg-hover'}"
 						title={formatCount(totalCount, t.lastSolveMessagesOne, t.lastSolveMessagesOther)}
 					>
 						{#if errorCount > 0}

package/dist/components/layout/PageHeader.svelte

@@ -66,7 +66,7 @@
 	</div>
 
 	{#if subnav}
-		<div class="h-10 flex items-center border-t border-border/60 px-(--page-px)">
+		<div class="h-10 flex items-center border-t border-border px-(--page-px)">
 			{@render subnav()}
 		</div>
 	{/if}

package/dist/components/layout/SideNav.svelte

@@ -119,8 +119,8 @@
 				aria-current={active ? 'page' : undefined}
 				class={`group gap-2 py-1.5 pr-2.5 relative flex w-full items-center text-left transition-colors ${
 					active
-						? 'pl-4 rounded-r-md bg-accent text-accent-foreground'
-						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+						? 'pl-4 rounded-r-md bg-selected text-foreground'
+						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-hover hover:text-foreground'
 				}`}
 			>
 				{#if active}
@@ -138,7 +138,7 @@
 	</nav>
 
 	{#if footer}
-		<div class="px-3 py-3 sm:block hidden border-t border-border/60">
+		<div class="px-3 py-3 sm:block hidden border-t border-border">
 			{@render footer()}
 		</div>
 	{/if}

package/dist/components/layout/SubNav.svelte

@@ -31,8 +31,8 @@
 			class={[
 				'h-7 px-3 gap-1.5 text-sm font-medium flex items-center rounded-md transition-colors',
 				active
-					? 'bg-accent text-accent-foreground'
-					: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+					? 'bg-selected text-foreground'
+					: 'text-muted-foreground hover:bg-hover hover:text-foreground'
 			].join(' ')}
 		>
 			{#if item.icon}

package/dist/components/preview/ChartOutput.svelte

@@ -222,7 +222,7 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group relative overflow-hidden rounded-lg border border-border {isFullscreen
+	class="group relative overflow-hidden rounded-lg border border-border-strong {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
@@ -241,7 +241,7 @@
 		>
 			{#if loading}
 				<div
-					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-muted-foreground"
+					class="p-1.5 backdrop-blur-sm flex items-center rounded-sm border border-border-strong bg-background/80 text-muted-foreground"
 				>
 					<Loader size={14} class="animate-spin" />
 				</div>
@@ -253,7 +253,7 @@
 					disabled={loading}
 					title={isFullscreen ? t.exitFullscreen : t.fullscreen}
 					aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
-					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+					class="p-1.5 backdrop-blur-sm flex items-center rounded-sm border border-border-strong bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
 				>
 					{#if isFullscreen}
 						<Minimize size={14} />

package/dist/components/preview/Group.svelte

@@ -69,7 +69,7 @@
 	</div>
 {/snippet}
 
-<section class="shadow-xs rounded-xl border bg-card">
+<section class="rounded-xl border bg-card shadow-raised">
 	{#if flat}
 		<div class="p-4">
 			{@render grid()}
@@ -80,18 +80,18 @@
 		<h3>
 			<button
 				type="button"
-				class="gap-3 px-4 pt-3.5 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
+				class="gap-3 px-4 pt-4 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
 					? 'pb-0'
-					: 'pb-3.5'}"
+					: 'pb-3'}"
 				aria-expanded={!collapsed}
 				aria-describedby={description ? descriptionId : undefined}
 				onclick={onToggle}
 			>
-				<span class="min-w-0 text-base font-semibold leading-snug flex-1 text-foreground"
+				<span class="min-w-0 text-sm font-semibold leading-snug flex-1 text-foreground"
 					>{label}</span
 				>
 				<ChevronDown
-					class="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 {collapsed
+					class="mt-0.5 h-4 w-4 shrink-0 text-faint-foreground transition-transform duration-200 {collapsed
 						? '-rotate-90'
 						: ''}"
 				/>
@@ -100,14 +100,14 @@
 		{#if description}
 			<p
 				id={descriptionId}
-				class="pl-4 pr-11 pt-0.5 pb-3.5 text-xs leading-snug text-muted-foreground"
+				class="pl-4 pr-11 pt-0.5 pb-3 text-xs leading-snug text-muted-foreground"
 			>
 				{description}
 			</p>
 		{/if}
 		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<div class="px-4 pt-1 pb-5">
+				<div class="px-4 pt-1 pb-4">
 					{@render grid()}
 				</div>
 			</div>

package/dist/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/dist/components/preview/InputControl.svelte

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

package/dist/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/dist/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/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

@@ -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/dist/components/preview/TabLayout.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { UISchema, SupportedTypes } from '@selvajs/schemas';
-	import * as Card from '../primitives/card';
 	import * as Tabs from '../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/dist/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