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

package/dist/components/layout/AppShell.svelte

@@ -101,7 +101,7 @@
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
 		_mode === 'fixed'
-			? 'min-h-0 flex-1 overflow-y-auto'
+			? 'min-h-0 min-w-0 flex-1 overflow-y-auto'
 			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>

package/dist/components/layout/PageContent.svelte

@@ -7,6 +7,7 @@
 	let { class: className = '', children }: PageContentProps = $props();
 </script>
 
-<main class={`px-(--page-px) py-(--page-py) ${className}`}>
+<!-- One content width for every page, so moving between pages doesn't change the frame. -->
+<div class={`max-w-6xl min-w-0 mx-auto w-full px-(--page-px) py-(--page-py) ${className}`}>
 	{@render children?.()}
-</main>
+</div>

package/dist/components/layout/PageHeader.svelte

@@ -34,7 +34,7 @@
 	<div class="gap-2 sm:gap-5 flex h-(--header-h) items-center px-(--page-px)">
 		<!-- Logo -->
 		<a href={homeUrl} class="gap-2 flex shrink-0 items-center" aria-label={brandName}>
-			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
+			<img src={logo} alt="" aria-hidden="true" class="h-7 w-7" />
 			<!-- On a phone the page title needs the room more than the brand does. -->
 			<span
 				class="font-semibold text-sm tracking-tight {title !== undefined ? 'sm:inline hidden' : ''}"

package/dist/components/preview/Group.svelte

@@ -107,7 +107,7 @@
 		{/if}
 		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<div class="px-4 pt-1 pb-4">
+				<div class="px-4 pt-2 pb-5">
 					{@render grid()}
 				</div>
 			</div>
@@ -152,7 +152,7 @@
 	.schema-grid {
 		display: grid;
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
-		gap: 1rem var(--column-gap);
+		gap: 1.25rem var(--column-gap);
 		align-items: start;
 	}
 

package/dist/components/preview/InputControl.svelte

@@ -283,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,
@@ -294,7 +294,7 @@
 		</div>
 	{/if}
 {:else if isGeometry}
-	<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(inputId)}
 		<GeometryInput
 			{inputId}
@@ -322,7 +322,7 @@
 		{@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}

package/dist/components/preview/TabContent.svelte

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

package/dist/components/preview/inputs/SegmentedInput.svelte

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

package/dist/components/preview/inputs/TileInput.svelte

@@ -52,11 +52,13 @@
 			onclick={() => onChange(option.value)}
 			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-primary bg-primary/10 ring-1 ring-primary'
 				: '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"
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted {selected
+					? 'text-foreground'
+					: 'text-muted-foreground'}"
 			>
 				{#if glyph?.kind === 'image'}
 					<OptionGlyph {glyph} class="size-full" />

package/dist/components/primitives/Callout.svelte

@@ -55,7 +55,7 @@
 	{#if Icon}
 		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
-	<div class="min-w-0 space-y-1">
+	<div class="min-w-0 space-y-1 wrap-anywhere">
 		{#if title}
 			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}

package/dist/components/primitives/FilterableDropdown.svelte

@@ -11,6 +11,7 @@
 		label: string;
 		icon?: Component;
 		iconClass?: string;
+		disabled?: boolean;
 	}
 
 	interface Props {
@@ -24,6 +25,10 @@
 		/** Above this many items the list gets a filter box. */
 		searchThreshold?: number;
 		disabled?: boolean;
+		/** Submits the picked id with a plain <form>, like a native select's name. */
+		name?: string;
+		size?: 'default' | 'sm';
+		'aria-label'?: string;
 		class?: string;
 	}
 
@@ -37,6 +42,9 @@
 		searchPlaceholder = 'Filter...',
 		searchThreshold = 4,
 		disabled = false,
+		name,
+		size = 'default',
+		'aria-label': ariaLabel,
 		class: className
 	}: Props = $props();
 
@@ -51,14 +59,17 @@
 	}
 </script>
 
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
 <Popover.Root bind:open>
 	<Popover.Trigger
 		{id}
 		{disabled}
 		role="combobox"
 		aria-expanded={open}
+		aria-label={ariaLabel}
 		class={cn(
-			buttonVariants({ variant: 'outline' }),
+			buttonVariants({ variant: 'outline', size }),
 			'font-normal w-full justify-start',
 			className
 		)}
@@ -85,6 +96,7 @@
 						value={item.id}
 						keywords={[item.label]}
 						data-checked={item.id === value}
+						disabled={item.disabled}
 						onSelect={() => pick(item)}
 					>
 						{#if ItemIcon}

package/dist/components/primitives/FilterableDropdown.svelte.d.ts

@@ -4,6 +4,7 @@ export interface FilterableDropdownItem {
     label: string;
     icon?: Component;
     iconClass?: string;
+    disabled?: boolean;
 }
 interface Props {
     items: FilterableDropdownItem[];
@@ -16,6 +17,10 @@ interface Props {
     /** Above this many items the list gets a filter box. */
     searchThreshold?: number;
     disabled?: boolean;
+    /** Submits the picked id with a plain <form>, like a native select's name. */
+    name?: string;
+    size?: 'default' | 'sm';
+    'aria-label'?: string;
     class?: string;
 }
 declare const FilterableDropdown: Component<Props, {}, "">;

package/dist/components/primitives/tabs/tabs-list.svelte

@@ -6,7 +6,7 @@
 		variants: {
 			variant: {
 				default: 'h-9 w-fit justify-center rounded-md bg-muted p-0.5',
-				line: 'gap-1 px-2 w-full justify-start'
+				line: 'gap-1 px-1 w-full justify-start'
 			}
 		},
 		defaultVariants: {

package/dist/components/primitives/tabs/tabs-list.svelte.d.ts

@@ -2,17 +2,17 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const tabsListVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
-        line: "gap-1 px-2 w-full justify-start";
+        line: "gap-1 px-1 w-full justify-start";
     };
 }, undefined, "inline-flex items-center text-muted-foreground", {
     variant: {
         default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
-        line: "gap-1 px-2 w-full justify-start";
+        line: "gap-1 px-1 w-full justify-start";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "h-9 w-fit justify-center rounded-md bg-muted p-0.5";
-        line: "gap-1 px-2 w-full justify-start";
+        line: "gap-1 px-1 w-full justify-start";
     };
 }, undefined>>;
 export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];

package/dist/components/primitives/tabs/tabs-trigger.svelte

@@ -7,7 +7,7 @@
 			variant: {
 				default:
 					'px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground',
-				line: 'px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
+				line: 'px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
 			}
 		},
 		defaultVariants: {

package/dist/components/primitives/tabs/tabs-trigger.svelte.d.ts

@@ -2,17 +2,17 @@ import { type VariantProps } from 'tailwind-variants';
 export declare const tabsTriggerVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
-        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+        line: "px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined, "gap-1.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap focus-visible:ring-3 focus-visible:ring-ring focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
-        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+        line: "px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground";
-        line: "px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
+        line: "px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary";
     };
 }, undefined>>;
 export type TabsTriggerVariant = VariantProps<typeof tabsTriggerVariants>['variant'];

package/dist/components/primitives/toggle/toggle.svelte

@@ -9,7 +9,7 @@
 				// Item inside a segmented track: the chosen value sits raised above the track.
 				segmented:
 					'rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong',
-				outline: 'border-input hover:bg-hover border bg-transparent',
+				outline: 'border-input hover:bg-hover border bg-field',
 				// Filled accent for the active item; a bare bg-muted is too faint on a form.
 				accent:
 					'border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset'

package/dist/components/primitives/toggle/toggle.svelte.d.ts

@@ -3,7 +3,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
         segmented: "rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong";
-        outline: "border-input hover:bg-hover border bg-transparent";
+        outline: "border-input hover:bg-hover border bg-field";
         accent: "border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
@@ -16,7 +16,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
         segmented: "rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong";
-        outline: "border-input hover:bg-hover border bg-transparent";
+        outline: "border-input hover:bg-hover border bg-field";
         accent: "border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {
@@ -29,7 +29,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-transparent";
         segmented: "rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong";
-        outline: "border-input hover:bg-hover border bg-transparent";
+        outline: "border-input hover:bg-hover border bg-field";
         accent: "border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset";
     };
     size: {

package/dist/components/primitives/toggle-group/toggle-group.svelte

@@ -68,7 +68,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-spacing={spacing}
 	style="--gap: calc(var(--spacing) * {spacing})"
 	class={cn(
-		'group/toggle-group data-[variant=segmented]:p-0.5 flex w-fit flex-row items-center gap-(--gap) rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[variant=segmented]:border data-[variant=segmented]:border-input data-[variant=segmented]:bg-muted',
+		'group/toggle-group data-[variant=segmented]:p-0.5 flex w-fit flex-row items-center gap-(--gap) rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[variant=segmented]:rounded-lg data-[variant=segmented]:border data-[variant=segmented]:border-input data-[variant=segmented]:bg-muted',
 		className
 	)}
 	{...restProps}

package/dist/components/viewer/ViewerDock.svelte

@@ -87,8 +87,8 @@
 	const touch = new MediaQuery('(pointer: coarse)');
 	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
 
-	const COLLAPSED = $derived(touch.current ? { w: 44, h: 44 } : { w: 72, h: 8 });
-	const EXPANDED_H = $derived(touch.current ? 54 : 46);
+	const COLLAPSED = $derived(touch.current ? { w: 44, h: 44 } : { w: 56, h: 5 });
+	const EXPANDED_H = $derived(touch.current ? 54 : 42);
 	const PAD = 4;
 
 	let dockEl: HTMLDivElement | undefined = $state();
@@ -108,7 +108,7 @@
 	const containerStyle = $derived.by(() => {
 		const bottom = touch.current ? 'max(1rem,env(safe-area-inset-bottom))' : '0.75rem';
 		const geometry = wantOpen
-			? `width:${rowWidth + PAD * 2 + 2}px;height:${EXPANDED_H}px;border-radius:14px;padding:${PAD}px`
+			? `width:${rowWidth + PAD * 2 + 2}px;height:${EXPANDED_H}px;border-radius:12px;padding:${PAD}px`
 			: `width:${COLLAPSED.w}px;height:${COLLAPSED.h}px;border-radius:${touch.current ? 22 : 99}px;padding:0px`;
 		const size = `bottom:${bottom};${geometry}`;
 		if (reducedMotion.current) return size;
@@ -195,7 +195,7 @@
 	const idx = (id: string) => buttons.indexOf(id);
 
 	const BTN =
-		'relative grid size-9.5 shrink-0 place-items-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:text-foreground data-[state=open]:bg-selected data-[state=open]:text-foreground pointer-coarse:size-11';
+		'relative grid size-8.5 shrink-0 place-items-center rounded-lg text-foreground outline-none transition-colors hover:bg-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:text-foreground data-[state=open]:bg-selected data-[state=open]:text-foreground pointer-coarse:size-11';
 	const DOT =
 		'aria-pressed:after:absolute aria-pressed:after:bottom-0.5 aria-pressed:after:size-1 aria-pressed:after:rounded-full aria-pressed:after:bg-primary';
 </script>
@@ -210,15 +210,15 @@
 	role="toolbar"
 	aria-label={t.toolsMenu}
 	tabindex="-1"
-	class="shadow-lg backdrop-blur-md absolute left-1/2 z-50 -translate-x-1/2 overflow-hidden border {hidden
+	class="backdrop-blur-md absolute left-1/2 z-50 -translate-x-1/2 overflow-hidden transition-colors {hidden
 		? 'pointer-events-none opacity-0'
 		: ''} {wantOpen
-		? 'bg-background/70'
+		? 'shadow-md border border-border-strong bg-card/75'
 		: touch.current
-			? 'cursor-pointer border-border bg-background/90'
+			? 'shadow-lg cursor-pointer border border-border bg-background/90'
 			: nightOn
-				? 'border-white/50 bg-white/40 hover:bg-white/65 cursor-pointer'
-				: 'cursor-pointer border-border-strong bg-faint-foreground hover:bg-muted-foreground'}"
+				? 'border-white/25 bg-white/35 hover:bg-white/70 cursor-pointer border'
+				: 'shadow-sm cursor-pointer border border-border-strong bg-card/90 hover:bg-card'}"
 	style={containerStyle}
 	onclick={openFromCollapsed}
 	onkeydown={(e) => (e.key === 'Escape' ? (engaged = false) : undefined)}

package/dist/index.d.ts

@@ -5,10 +5,12 @@ export { default as SolveMessages } from './components/compute/SolveMessages.sve
 export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 export * from './components/primitives';
 export { default as StateDisplay } from './components/primitives/StateDisplay.svelte';
+export { default as ColorInput } from './components/preview/inputs/ColorInput.svelte';
 export { default as Viewer } from './components/viewer/Viewer.svelte';
 export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
+export { visibleInputItems } from './schema/visibility-rules';
 export { type UIHost, type ElementKind, HOST_LABELS, isGeometryParamType, layoutItemKind, hostsFor, isSupportedOn, valuelessInputIds, unsupportedItems } from './schema/host-support';
 export * from './compute/solving.svelte';
 export { useSolveSession } from './compute/useSolveSession.svelte';

package/dist/index.js

@@ -9,10 +9,12 @@ export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // Design-system primitives (shadcn-svelte + custom)
 export * from './components/primitives';
 export { default as StateDisplay } from './components/primitives/StateDisplay.svelte';
+export { default as ColorInput } from './components/preview/inputs/ColorInput.svelte';
 export { default as Viewer } from './components/viewer/Viewer.svelte';
 export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
+export { visibleInputItems } from './schema/visibility-rules';
 export { HOST_LABELS, isGeometryParamType, layoutItemKind, hostsFor, isSupportedOn, valuelessInputIds, unsupportedItems } from './schema/host-support';
 export * from './compute/solving.svelte';
 // Solve Session seam. Re-exported so transports outside this package — e.g.

package/dist/public.d.ts

@@ -14,6 +14,7 @@ export { writeExternalValue, readExternalValue, clearExternalValue, getExternalI
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
+export { visibleInputItems } from './schema/visibility-rules';
 export type { ActionButton } from './types/actionButton';
 export type { SolveFn, SolveResult, SolveDiagnostic } from '@selvajs/solve/shared';
 export { DEFAULT_PRESET_LABELS, type PresetLabels } from './types/presetLabels';

package/dist/public.js

@@ -28,4 +28,5 @@ export { writeExternalValue, readExternalValue, clearExternalValue, getExternalI
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
+export { visibleInputItems } from './schema/visibility-rules';
 export { DEFAULT_PRESET_LABELS } from './types/presetLabels';

package/dist/schema/visibility-rules.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition, TabConfig } from '@selvajs/schemas';
+import type { InputLayoutItem, LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition, TabConfig, UISchema } from '@selvajs/schemas';
 export interface VisibilityResult {
     visible: boolean;
     disabled: boolean;
@@ -20,6 +20,12 @@ export declare function evaluateGroupVisibility(group: {
     items?: LayoutItem[];
 }, values: Record<string, unknown>): boolean;
 export declare function isTabVisible(tab: TabConfig, values: Record<string, unknown>): boolean;
+/**
+ * The input items the form shows for these values: each passes its own condition, inside a
+ * shown group and, when tabbed, a shown tab. For a host that repeats the form back, such as a
+ * summary before a commit, without re-deriving the renderer's rules.
+ */
+export declare function visibleInputItems(schema: UISchema, values: Record<string, unknown>): InputLayoutItem[];
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/dist/schema/visibility-rules.js

@@ -106,6 +106,23 @@ export function evaluateGroupVisibility(group, values) {
 export function isTabVisible(tab, values) {
     return (tab.visible !== false && tab.groups.some((group) => evaluateGroupVisibility(group, values)));
 }
+/**
+ * The input items the form shows for these values: each passes its own condition, inside a
+ * shown group and, when tabbed, a shown tab. For a host that repeats the form back, such as a
+ * summary before a commit, without re-deriving the renderer's rules.
+ */
+export function visibleInputItems(schema, values) {
+    const layout = schema?.layout;
+    const groups = layout?.type === 'tabbed'
+        ? (layout.tabs ?? []).filter((t) => isTabVisible(t, values)).flatMap((t) => t.groups ?? [])
+        : layout?.type === 'flat'
+            ? (layout.groups ?? [])
+            : [];
+    return groups
+        .filter((g) => evaluateGroupVisibility(g, values))
+        .flatMap((g) => g.items ?? [])
+        .filter((i) => i.type === 'input' && evaluateVisibility(i, values).visible);
+}
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/dist/styles/base.css

@@ -1,3 +1,5 @@
+@import '@fontsource-variable/hanken-grotesk';
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 /* Surfaces, edges and states share one set of names in both modes; each mode only changes the
@@ -8,40 +10,41 @@
 	--page-px: 1rem;
 	--page-py: 1.75rem;
 	/* Canvas, then surface (cards, panels), then raised (rows, menus, popovers). Light can't go
-	   lighter than white, so raised is white too and lifts with a border and a shadow instead. */
-	--background: oklch(0.91 0 0);
+	   lighter than white, so raised is white too and lifts with a border and a shadow instead.
+	   Values follow stock shadcn neutral. */
+	--background: oklch(0.985 0 0);
 	--card: oklch(1 0 0);
 	--raised: oklch(1 0 0);
 	/* Recessed fill for trays, table heads, code and skeletons: darker than the surface around it. */
-	--muted: oklch(0.94 0 0);
-	/* Fill of anything you type into, on a card: the same step as raised, in both modes. The edge
-	   (`--input`) carries the boundary. A recessed fill reads as a disabled control. */
-	--field: var(--raised);
-	--foreground: oklch(0.22 0 0);
-	--card-foreground: oklch(0.22 0 0);
-	--popover-foreground: oklch(0.22 0 0);
+	--muted: oklch(0.97 0 0);
+	/* Fill of anything you type into, on a card: recessed, the same step as muted, in both modes.
+	   The edge (`--input`) carries the boundary. */
+	--field: var(--muted);
+	--foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.145 0 0);
 	/* 4.5:1 on every surface. */
-	--muted-foreground: oklch(0.48 0 0);
+	--muted-foreground: oklch(0.5 0 0);
 	/* Icons, placeholders, disabled text: 3:1 on every surface. */
 	--faint-foreground: oklch(0.6 0 0);
 	/* State overlays, laid over whatever surface is underneath. */
-	--hover: oklch(0 0 0 / 6%);
-	--selected: oklch(0 0 0 / 12%);
+	--hover: oklch(0 0 0 / 4%);
+	--selected: oklch(0 0 0 / 8%);
 	/* Rest fill of a neutral filled control; its hover is `selected`. */
-	--secondary: oklch(0 0 0 / 7%);
-	--secondary-foreground: oklch(0.22 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
 	/* Outlines and separators. */
-	--border: oklch(0 0 0 / 11%);
+	--border: oklch(0 0 0 / 8%);
 	/* Popovers, outline buttons, dashed drop zones. */
-	--border-strong: oklch(0 0 0 / 24%);
-	/* Edge of anything you type into or toggle, slider tracks included: at least 3:1 against the
-	   surfaces around it, the WCAG minimum for a control's boundary. */
-	--input: oklch(0 0 0 / 44%);
-	--ring: oklch(0.55 0 0);
-	--elevation-raised: 0 1px 2px oklch(0 0 0 / 6%);
-	--elevation-popover: 0 8px 24px oklch(0 0 0 / 12%);
+	--border-strong: oklch(0 0 0 / 14%);
+	/* Edge of anything you type into or toggle, slider tracks included. Softer than the 3:1 WCAG
+	   boundary minimum in both modes: the recessed field fill carries the rest of the boundary. */
+	--input: oklch(0 0 0 / 10%);
+	--ring: oklch(0.708 0 0);
+	--elevation-raised: 0 1px 2px oklch(0 0 0 / 5%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 10%);
 	/* 4.5:1 as text on a card and under its foreground; 3:1 as a fill on every surface. */
-	--primary: #4a7c52;
+	--primary: oklch(0.205 0 0);
 	--primary-foreground: oklch(0.985 0 0);
 	--destructive: #c9302d;
 	--destructive-foreground: #fbfbfb;
@@ -62,28 +65,28 @@
 }
 
 .dark {
-	--background: oklch(0.155 0 0);
-	--card: oklch(0.235 0 0);
-	--raised: oklch(0.275 0 0);
-	--muted: oklch(0.18 0 0);
-	--foreground: oklch(0.96 0 0);
-	--card-foreground: oklch(0.96 0 0);
-	--popover-foreground: oklch(0.96 0 0);
-	--muted-foreground: oklch(0.72 0 0);
-	--faint-foreground: oklch(0.56 0 0);
+	--background: oklch(0.145 0 0);
+	--card: oklch(0.205 0 0);
+	--raised: oklch(0.24 0 0);
+	--muted: oklch(0.269 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--faint-foreground: oklch(0.556 0 0);
 	--hover: oklch(1 0 0 / 6%);
-	--selected: oklch(1 0 0 / 12%);
-	--secondary: oklch(1 0 0 / 8%);
-	--secondary-foreground: oklch(0.96 0 0);
-	--border: oklch(1 0 0 / 11%);
-	--border-strong: oklch(1 0 0 / 24%);
-	--input: oklch(1 0 0 / 41%);
-	--ring: oklch(0.74 0 0);
-	/* Shadows barely show on a dark canvas, so raised things catch a top highlight instead. */
-	--elevation-raised: inset 0 1px 0 oklch(1 0 0 / 5%);
-	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%), inset 0 1px 0 oklch(1 0 0 / 6%);
-	--primary: #86ab78;
-	--primary-foreground: oklch(0.18 0 0);
+	--selected: oklch(1 0 0 / 10%);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--border-strong: oklch(1 0 0 / 18%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	/* Shadows barely show on a dark canvas, so raised things lean on the border instead. */
+	--elevation-raised: none;
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
 	/* White text can't reach 4.5:1 on a red light enough to also be text on the dark card. */
 	--destructive: oklch(0.7 0.17 22);
 	--destructive-foreground: oklch(0.18 0 0);
@@ -151,6 +154,8 @@
 /* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the
    design-system lint rejects `text-[10px]`, `max-h-[85dvh]` and the like. */
 @theme {
+	/* Hanken Grotesk (OFL), self-hosted via Fontsource: the plugin UI runs offline from the .gha. */
+	--font-sans: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
 	/* Type tags, counters and other dense labels. */
 	--text-2xs: 0.625rem;
 	--text-2xs--line-height: calc(0.875 / 0.625);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.16",
+  "version": "6.6.0-beta.18",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -63,9 +63,9 @@
     "tailwind-variants": "^3.3.1",
     "three": "^0.187.0",
     "@selvajs/compute": "^5.0.0-beta.9",
-    "@selvajs/solve": "^2.0.0-beta.12",
-    "@selvajs/schemas": "^5.3.0-beta.2",
-    "@selvajs/visualization": "^1.6.0-beta.9"
+    "@selvajs/schemas": "^5.3.0-beta.3",
+    "@selvajs/visualization": "^1.6.0-beta.9",
+    "@selvajs/solve": "^2.0.0-beta.12"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -74,6 +74,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
+    "@fontsource-variable/hanken-grotesk": "^5.3.0",
     "@iconify/svelte": "^5.2.3",
     "@lucide/svelte": "^1.61.0",
     "clsx": "^2.1.1",
@@ -95,8 +96,8 @@
     "vitest": "^5.0.5",
     "@selvajs/compute": "5.0.0-beta.9",
     "@selvajs/config": "0.0.4",
+    "@selvajs/schemas": "5.3.0-beta.3",
     "@selvajs/visualization": "1.6.0-beta.9",
-    "@selvajs/schemas": "5.3.0-beta.2",
     "@selvajs/solve": "2.0.0-beta.12"
   },
   "scripts": {

package/src/lib/components/layout/AppShell.svelte

@@ -101,7 +101,7 @@
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
 		_mode === 'fixed'
-			? 'min-h-0 flex-1 overflow-y-auto'
+			? 'min-h-0 min-w-0 flex-1 overflow-y-auto'
 			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>

package/src/lib/components/layout/PageContent.svelte

@@ -7,6 +7,7 @@
 	let { class: className = '', children }: PageContentProps = $props();
 </script>
 
-<main class={`px-(--page-px) py-(--page-py) ${className}`}>
+<!-- One content width for every page, so moving between pages doesn't change the frame. -->
+<div class={`max-w-6xl min-w-0 mx-auto w-full px-(--page-px) py-(--page-py) ${className}`}>
 	{@render children?.()}
-</main>
+</div>

package/src/lib/components/layout/PageHeader.svelte

@@ -34,7 +34,7 @@
 	<div class="gap-2 sm:gap-5 flex h-(--header-h) items-center px-(--page-px)">
 		<!-- Logo -->
 		<a href={homeUrl} class="gap-2 flex shrink-0 items-center" aria-label={brandName}>
-			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
+			<img src={logo} alt="" aria-hidden="true" class="h-7 w-7" />
 			<!-- On a phone the page title needs the room more than the brand does. -->
 			<span
 				class="font-semibold text-sm tracking-tight {title !== undefined ? 'sm:inline hidden' : ''}"

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

@@ -107,7 +107,7 @@
 		{/if}
 		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<div class="px-4 pt-1 pb-4">
+				<div class="px-4 pt-2 pb-5">
 					{@render grid()}
 				</div>
 			</div>
@@ -152,7 +152,7 @@
 	.schema-grid {
 		display: grid;
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
-		gap: 1rem var(--column-gap);
+		gap: 1.25rem var(--column-gap);
 		align-items: start;
 	}
 

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

@@ -283,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,
@@ -294,7 +294,7 @@
 		</div>
 	{/if}
 {:else if isGeometry}
-	<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(inputId)}
 		<GeometryInput
 			{inputId}
@@ -322,7 +322,7 @@
 		{@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}

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

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

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

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

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

@@ -52,11 +52,13 @@
 			onclick={() => onChange(option.value)}
 			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-primary bg-primary/10 ring-1 ring-primary'
 				: '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"
+				class="flex aspect-square w-full items-center justify-center overflow-hidden rounded-md bg-muted {selected
+					? 'text-foreground'
+					: 'text-muted-foreground'}"
 			>
 				{#if glyph?.kind === 'image'}
 					<OptionGlyph {glyph} class="size-full" />

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

@@ -55,7 +55,7 @@
 	{#if Icon}
 		<Icon class={cn('mt-0.5 h-4 w-4 shrink-0', accent)} />
 	{/if}
-	<div class="min-w-0 space-y-1">
+	<div class="min-w-0 space-y-1 wrap-anywhere">
 		{#if title}
 			<p class={cn('leading-tight font-medium', accent)}>{title}</p>
 		{/if}

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

@@ -11,6 +11,7 @@
 		label: string;
 		icon?: Component;
 		iconClass?: string;
+		disabled?: boolean;
 	}
 
 	interface Props {
@@ -24,6 +25,10 @@
 		/** Above this many items the list gets a filter box. */
 		searchThreshold?: number;
 		disabled?: boolean;
+		/** Submits the picked id with a plain <form>, like a native select's name. */
+		name?: string;
+		size?: 'default' | 'sm';
+		'aria-label'?: string;
 		class?: string;
 	}
 
@@ -37,6 +42,9 @@
 		searchPlaceholder = 'Filter...',
 		searchThreshold = 4,
 		disabled = false,
+		name,
+		size = 'default',
+		'aria-label': ariaLabel,
 		class: className
 	}: Props = $props();
 
@@ -51,14 +59,17 @@
 	}
 </script>
 
+{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
 <Popover.Root bind:open>
 	<Popover.Trigger
 		{id}
 		{disabled}
 		role="combobox"
 		aria-expanded={open}
+		aria-label={ariaLabel}
 		class={cn(
-			buttonVariants({ variant: 'outline' }),
+			buttonVariants({ variant: 'outline', size }),
 			'font-normal w-full justify-start',
 			className
 		)}
@@ -85,6 +96,7 @@
 						value={item.id}
 						keywords={[item.label]}
 						data-checked={item.id === value}
+						disabled={item.disabled}
 						onSelect={() => pick(item)}
 					>
 						{#if ItemIcon}

package/src/lib/components/primitives/tabs/tabs-list.svelte

@@ -6,7 +6,7 @@
 		variants: {
 			variant: {
 				default: 'h-9 w-fit justify-center rounded-md bg-muted p-0.5',
-				line: 'gap-1 px-2 w-full justify-start'
+				line: 'gap-1 px-1 w-full justify-start'
 			}
 		},
 		defaultVariants: {

package/src/lib/components/primitives/tabs/tabs-trigger.svelte

@@ -7,7 +7,7 @@
 			variant: {
 				default:
 					'px-2 py-1 data-[state=active]:shadow-sm h-full flex-1 rounded-inner border border-transparent text-foreground transition focus-visible:border-ring data-[state=active]:bg-raised dark:text-muted-foreground data-[state=active]:border-border-strong dark:data-[state=active]:text-foreground',
-				line: 'px-2.5 py-3 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
+				line: 'px-2.5 py-2.5 relative flex-none text-muted-foreground transition-colors after:absolute after:inset-x-2 after:bottom-0 after:h-0.5 after:rounded-full hover:text-foreground data-[state=active]:text-foreground data-[state=active]:after:bg-primary'
 			}
 		},
 		defaultVariants: {

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

@@ -9,7 +9,7 @@
 				// Item inside a segmented track: the chosen value sits raised above the track.
 				segmented:
 					'rounded-inner bg-transparent text-muted-foreground data-[state=on]:bg-raised data-[state=on]:text-foreground data-[state=on]:shadow-raised data-[state=on]:ring-1 data-[state=on]:ring-border-strong',
-				outline: 'border-input hover:bg-hover border bg-transparent',
+				outline: 'border-input hover:bg-hover border bg-field',
 				// Filled accent for the active item; a bare bg-muted is too faint on a form.
 				accent:
 					'border-input hover:bg-hover border bg-transparent data-[state=on]:bg-primary/15 data-[state=on]:ring-1 data-[state=on]:ring-primary data-[state=on]:ring-inset'

package/src/lib/components/primitives/toggle-group/toggle-group.svelte

@@ -68,7 +68,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-spacing={spacing}
 	style="--gap: calc(var(--spacing) * {spacing})"
 	class={cn(
-		'group/toggle-group data-[variant=segmented]:p-0.5 flex w-fit flex-row items-center gap-(--gap) rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[variant=segmented]:border data-[variant=segmented]:border-input data-[variant=segmented]:bg-muted',
+		'group/toggle-group data-[variant=segmented]:p-0.5 flex w-fit flex-row items-center gap-(--gap) rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[variant=segmented]:rounded-lg data-[variant=segmented]:border data-[variant=segmented]:border-input data-[variant=segmented]:bg-muted',
 		className
 	)}
 	{...restProps}

package/src/lib/components/viewer/ViewerDock.svelte

@@ -87,8 +87,8 @@
 	const touch = new MediaQuery('(pointer: coarse)');
 	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)');
 
-	const COLLAPSED = $derived(touch.current ? { w: 44, h: 44 } : { w: 72, h: 8 });
-	const EXPANDED_H = $derived(touch.current ? 54 : 46);
+	const COLLAPSED = $derived(touch.current ? { w: 44, h: 44 } : { w: 56, h: 5 });
+	const EXPANDED_H = $derived(touch.current ? 54 : 42);
 	const PAD = 4;
 
 	let dockEl: HTMLDivElement | undefined = $state();
@@ -108,7 +108,7 @@
 	const containerStyle = $derived.by(() => {
 		const bottom = touch.current ? 'max(1rem,env(safe-area-inset-bottom))' : '0.75rem';
 		const geometry = wantOpen
-			? `width:${rowWidth + PAD * 2 + 2}px;height:${EXPANDED_H}px;border-radius:14px;padding:${PAD}px`
+			? `width:${rowWidth + PAD * 2 + 2}px;height:${EXPANDED_H}px;border-radius:12px;padding:${PAD}px`
 			: `width:${COLLAPSED.w}px;height:${COLLAPSED.h}px;border-radius:${touch.current ? 22 : 99}px;padding:0px`;
 		const size = `bottom:${bottom};${geometry}`;
 		if (reducedMotion.current) return size;
@@ -195,7 +195,7 @@
 	const idx = (id: string) => buttons.indexOf(id);
 
 	const BTN =
-		'relative grid size-9.5 shrink-0 place-items-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:text-foreground data-[state=open]:bg-selected data-[state=open]:text-foreground pointer-coarse:size-11';
+		'relative grid size-8.5 shrink-0 place-items-center rounded-lg text-foreground outline-none transition-colors hover:bg-hover hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:text-foreground data-[state=open]:bg-selected data-[state=open]:text-foreground pointer-coarse:size-11';
 	const DOT =
 		'aria-pressed:after:absolute aria-pressed:after:bottom-0.5 aria-pressed:after:size-1 aria-pressed:after:rounded-full aria-pressed:after:bg-primary';
 </script>
@@ -210,15 +210,15 @@
 	role="toolbar"
 	aria-label={t.toolsMenu}
 	tabindex="-1"
-	class="shadow-lg backdrop-blur-md absolute left-1/2 z-50 -translate-x-1/2 overflow-hidden border {hidden
+	class="backdrop-blur-md absolute left-1/2 z-50 -translate-x-1/2 overflow-hidden transition-colors {hidden
 		? 'pointer-events-none opacity-0'
 		: ''} {wantOpen
-		? 'bg-background/70'
+		? 'shadow-md border border-border-strong bg-card/75'
 		: touch.current
-			? 'cursor-pointer border-border bg-background/90'
+			? 'shadow-lg cursor-pointer border border-border bg-background/90'
 			: nightOn
-				? 'border-white/50 bg-white/40 hover:bg-white/65 cursor-pointer'
-				: 'cursor-pointer border-border-strong bg-faint-foreground hover:bg-muted-foreground'}"
+				? 'border-white/25 bg-white/35 hover:bg-white/70 cursor-pointer border'
+				: 'shadow-sm cursor-pointer border border-border-strong bg-card/90 hover:bg-card'}"
 	style={containerStyle}
 	onclick={openFromCollapsed}
 	onkeydown={(e) => (e.key === 'Escape' ? (engaged = false) : undefined)}

package/src/lib/index.ts

@@ -13,12 +13,14 @@ export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // Design-system primitives (shadcn-svelte + custom)
 export * from './components/primitives';
 export { default as StateDisplay } from './components/primitives/StateDisplay.svelte';
+export { default as ColorInput } from './components/preview/inputs/ColorInput.svelte';
 
 export { default as Viewer } from './components/viewer/Viewer.svelte';
 
 export * from './schema/defaults';
 export * from './schema/dynamic-value-list';
 export * from './schema/traversal';
+export { visibleInputItems } from './schema/visibility-rules';
 export {
 	type UIHost,
 	type ElementKind,

package/src/lib/public.ts

@@ -80,6 +80,7 @@ export {
 export * from './schema/defaults';
 export * from './schema/traversal';
 export * from './schema/dynamic-value-list';
+export { visibleInputItems } from './schema/visibility-rules';
 
 // UI-facing runtime types (not from schema)
 export type { ActionButton } from './types/actionButton';

package/src/lib/schema/visibility-rules.ts

@@ -1,10 +1,12 @@
 import type {
+	InputLayoutItem,
 	LayoutItem,
 	OutputLayoutItem,
 	VisibilityRule,
 	VisibilityCondition,
 	GroupVisibilityCondition,
-	TabConfig
+	TabConfig,
+	UISchema
 } from '@selvajs/schemas';
 import { isFileData } from '../utils/file-download';
 
@@ -148,6 +150,30 @@ export function isTabVisible(tab: TabConfig, values: Record<string, unknown>): b
 	);
 }
 
+/**
+ * The input items the form shows for these values: each passes its own condition, inside a
+ * shown group and, when tabbed, a shown tab. For a host that repeats the form back, such as a
+ * summary before a commit, without re-deriving the renderer's rules.
+ */
+export function visibleInputItems(
+	schema: UISchema,
+	values: Record<string, unknown>
+): InputLayoutItem[] {
+	const layout = schema?.layout;
+	const groups =
+		layout?.type === 'tabbed'
+			? (layout.tabs ?? []).filter((t) => isTabVisible(t, values)).flatMap((t) => t.groups ?? [])
+			: layout?.type === 'flat'
+				? (layout.groups ?? [])
+				: [];
+	return groups
+		.filter((g) => evaluateGroupVisibility(g, values))
+		.flatMap((g) => g.items ?? [])
+		.filter(
+			(i): i is InputLayoutItem => i.type === 'input' && evaluateVisibility(i, values).visible
+		);
+}
+
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/src/lib/styles/base.css

@@ -1,3 +1,5 @@
+@import '@fontsource-variable/hanken-grotesk';
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 /* Surfaces, edges and states share one set of names in both modes; each mode only changes the
@@ -8,40 +10,41 @@
 	--page-px: 1rem;
 	--page-py: 1.75rem;
 	/* Canvas, then surface (cards, panels), then raised (rows, menus, popovers). Light can't go
-	   lighter than white, so raised is white too and lifts with a border and a shadow instead. */
-	--background: oklch(0.91 0 0);
+	   lighter than white, so raised is white too and lifts with a border and a shadow instead.
+	   Values follow stock shadcn neutral. */
+	--background: oklch(0.985 0 0);
 	--card: oklch(1 0 0);
 	--raised: oklch(1 0 0);
 	/* Recessed fill for trays, table heads, code and skeletons: darker than the surface around it. */
-	--muted: oklch(0.94 0 0);
-	/* Fill of anything you type into, on a card: the same step as raised, in both modes. The edge
-	   (`--input`) carries the boundary. A recessed fill reads as a disabled control. */
-	--field: var(--raised);
-	--foreground: oklch(0.22 0 0);
-	--card-foreground: oklch(0.22 0 0);
-	--popover-foreground: oklch(0.22 0 0);
+	--muted: oklch(0.97 0 0);
+	/* Fill of anything you type into, on a card: recessed, the same step as muted, in both modes.
+	   The edge (`--input`) carries the boundary. */
+	--field: var(--muted);
+	--foreground: oklch(0.145 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.145 0 0);
 	/* 4.5:1 on every surface. */
-	--muted-foreground: oklch(0.48 0 0);
+	--muted-foreground: oklch(0.5 0 0);
 	/* Icons, placeholders, disabled text: 3:1 on every surface. */
 	--faint-foreground: oklch(0.6 0 0);
 	/* State overlays, laid over whatever surface is underneath. */
-	--hover: oklch(0 0 0 / 6%);
-	--selected: oklch(0 0 0 / 12%);
+	--hover: oklch(0 0 0 / 4%);
+	--selected: oklch(0 0 0 / 8%);
 	/* Rest fill of a neutral filled control; its hover is `selected`. */
-	--secondary: oklch(0 0 0 / 7%);
-	--secondary-foreground: oklch(0.22 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
 	/* Outlines and separators. */
-	--border: oklch(0 0 0 / 11%);
+	--border: oklch(0 0 0 / 8%);
 	/* Popovers, outline buttons, dashed drop zones. */
-	--border-strong: oklch(0 0 0 / 24%);
-	/* Edge of anything you type into or toggle, slider tracks included: at least 3:1 against the
-	   surfaces around it, the WCAG minimum for a control's boundary. */
-	--input: oklch(0 0 0 / 44%);
-	--ring: oklch(0.55 0 0);
-	--elevation-raised: 0 1px 2px oklch(0 0 0 / 6%);
-	--elevation-popover: 0 8px 24px oklch(0 0 0 / 12%);
+	--border-strong: oklch(0 0 0 / 14%);
+	/* Edge of anything you type into or toggle, slider tracks included. Softer than the 3:1 WCAG
+	   boundary minimum in both modes: the recessed field fill carries the rest of the boundary. */
+	--input: oklch(0 0 0 / 10%);
+	--ring: oklch(0.708 0 0);
+	--elevation-raised: 0 1px 2px oklch(0 0 0 / 5%);
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 10%);
 	/* 4.5:1 as text on a card and under its foreground; 3:1 as a fill on every surface. */
-	--primary: #4a7c52;
+	--primary: oklch(0.205 0 0);
 	--primary-foreground: oklch(0.985 0 0);
 	--destructive: #c9302d;
 	--destructive-foreground: #fbfbfb;
@@ -62,28 +65,28 @@
 }
 
 .dark {
-	--background: oklch(0.155 0 0);
-	--card: oklch(0.235 0 0);
-	--raised: oklch(0.275 0 0);
-	--muted: oklch(0.18 0 0);
-	--foreground: oklch(0.96 0 0);
-	--card-foreground: oklch(0.96 0 0);
-	--popover-foreground: oklch(0.96 0 0);
-	--muted-foreground: oklch(0.72 0 0);
-	--faint-foreground: oklch(0.56 0 0);
+	--background: oklch(0.145 0 0);
+	--card: oklch(0.205 0 0);
+	--raised: oklch(0.24 0 0);
+	--muted: oklch(0.269 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--faint-foreground: oklch(0.556 0 0);
 	--hover: oklch(1 0 0 / 6%);
-	--selected: oklch(1 0 0 / 12%);
-	--secondary: oklch(1 0 0 / 8%);
-	--secondary-foreground: oklch(0.96 0 0);
-	--border: oklch(1 0 0 / 11%);
-	--border-strong: oklch(1 0 0 / 24%);
-	--input: oklch(1 0 0 / 41%);
-	--ring: oklch(0.74 0 0);
-	/* Shadows barely show on a dark canvas, so raised things catch a top highlight instead. */
-	--elevation-raised: inset 0 1px 0 oklch(1 0 0 / 5%);
-	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%), inset 0 1px 0 oklch(1 0 0 / 6%);
-	--primary: #86ab78;
-	--primary-foreground: oklch(0.18 0 0);
+	--selected: oklch(1 0 0 / 10%);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--border: oklch(1 0 0 / 10%);
+	--border-strong: oklch(1 0 0 / 18%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	/* Shadows barely show on a dark canvas, so raised things lean on the border instead. */
+	--elevation-raised: none;
+	--elevation-popover: 0 8px 24px oklch(0 0 0 / 50%);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
 	/* White text can't reach 4.5:1 on a red light enough to also be text on the dark card. */
 	--destructive: oklch(0.7 0.17 22);
 	--destructive-foreground: oklch(0.18 0 0);
@@ -151,6 +154,8 @@
 /* Design tokens beyond Tailwind's defaults. Reach for these before an arbitrary value: the
    design-system lint rejects `text-[10px]`, `max-h-[85dvh]` and the like. */
 @theme {
+	/* Hanken Grotesk (OFL), self-hosted via Fontsource: the plugin UI runs offline from the .gha. */
+	--font-sans: 'Hanken Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
 	/* Type tags, counters and other dense labels. */
 	--text-2xs: 0.625rem;
 	--text-2xs--line-height: calc(0.875 / 0.625);