@selvajs/ui 6.6.0-beta.17 → 6.6.0-beta.19

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/button/button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	import { cn, type WithElementRef } from '../../../utils';
+	import { cn, type WithElementRef } from '../../../utils.js';
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';
 

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

@@ -1,4 +1,4 @@
-import { type WithElementRef } from '../../../utils';
+import { type WithElementRef } from '../../../utils.js';
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 import { type VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{

package/dist/components/primitives/dialog/dialog-content.svelte

@@ -4,7 +4,7 @@
 	import type { Snippet } from 'svelte';
 	import * as Dialog from './index.js';
 	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
 
 	let {
 		ref = $bindable(null),

package/dist/components/primitives/input-group/input-group-input.svelte.d.ts

@@ -2,7 +2,7 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "hidden" | "color" | "date" | "time" | "datetime-local" | "image" | "month" | "password" | "range" | "week";
+    type?: "number" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "hidden" | "color" | "date" | "datetime-local" | "image" | "month" | "password" | "range" | "time" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;

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

@@ -2,8 +2,8 @@
 	import Sun from '@lucide/svelte/icons/sun';
 	import Moon from '@lucide/svelte/icons/moon';
 	import { toggleMode } from 'mode-watcher';
-	import { Button } from '../button';
-	import { getLocaleContext } from '../../../i18n/localeContext.svelte';
+	import { Button } from '../button/index.js';
+	import { getLocaleContext } from '../../../i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 </script>

package/dist/components/primitives/select/select-content.svelte

@@ -22,7 +22,7 @@
 		{sideOffset}
 		data-slot="select-content"
 		class={cn(
-			'data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 min-w-32 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-strong bg-popover text-popover-foreground shadow-popover',
+			'data-[side=bottom]:translate-y-1 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:-translate-x-1 data-[side=left]:slide-in-from-right-2 data-[side=right]:translate-x-1 data-[side=right]:slide-in-from-left-2 data-[side=top]:-translate-y-1 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 min-w-32 max-h-96 relative z-50 origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-strong bg-popover text-popover-foreground shadow-popover',
 			className
 		)}
 		{...restProps}

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/viewer/MeshMetadataPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { X } from '@lucide/svelte';
 	import { Button } from '../primitives/button/index.js';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);

package/dist/components/viewer/SceneManager.svelte

@@ -14,7 +14,7 @@
 		type SceneEntry,
 		type SceneOutliner
 	} from '@selvajs/visualization/scene';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);

package/dist/components/viewer/Viewer.svelte

@@ -24,9 +24,9 @@
 	import ViewerDock from './ViewerDock.svelte';
 	import MeshMetadataPanel from './MeshMetadataPanel.svelte';
 	import * as Resizable from '../primitives/resizable/index.js';
-	import type { Locale } from '../../i18n/messages';
-	import { layerLocaleContext } from '../../i18n/localeContext.svelte';
-	import { saveBlob } from '../../utils/host-files';
+	import type { Locale } from '../../i18n/messages.js';
+	import { layerLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { saveBlob } from '../../utils/host-files.js';
 
 	export interface ViewerConfig {
 		showScreenshotButton?: boolean;
@@ -85,7 +85,6 @@
 	let {
 		meshes,
 		isFullscreen = $bindable(false),
-		isSolving = false,
 		isSlow = false,
 		isBlurred = false,
 		drawerOpen = false,
@@ -525,16 +524,6 @@
 						: 'blur-overlay-inactive'}"
 				></div>
 
-				<!-- The last result stays sharp while the next one solves: blurring it on every
-				     solve hides the model the user is adjusting. -->
-				{#if isSolving}
-					<div
-						class="inset-x-0 top-0 animate-in fade-in pointer-events-none absolute z-20 h-px overflow-hidden duration-300"
-						aria-hidden="true"
-					>
-						<div class="solve-bar h-full w-1/3 bg-faint-foreground"></div>
-					</div>
-				{/if}
 				{#if isSlow}
 					<div
 						class="inset-0 animate-in fade-in pointer-events-none absolute z-10 bg-background/25 duration-500"
@@ -633,27 +622,6 @@
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	.solve-bar {
-		animation: solve-bar 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
-	}
-
-	@keyframes solve-bar {
-		from {
-			transform: translateX(-100%);
-		}
-		to {
-			transform: translateX(300%);
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.solve-bar {
-			animation: none;
-			width: 100%;
-			opacity: 0.6;
-		}
-	}
-
 	.blur-overlay {
 		pointer-events: none;
 	}

package/dist/components/viewer/Viewer.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Look, type ThreeViewer } from '@selvajs/visualization/render';
-import type { Locale } from '../../i18n/messages';
+import type { Locale } from '../../i18n/messages.js';
 export interface ViewerConfig {
     showScreenshotButton?: boolean;
     showFullscreenButton?: boolean;

package/dist/components/viewer/ViewerDock.svelte

@@ -17,7 +17,7 @@
 	} from '@lucide/svelte';
 	import type { CameraProjection, Look, ViewPreset } from '@selvajs/visualization/render';
 	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
-	import type { ViewerMessages } from '../../i18n/messages';
+	import type { ViewerMessages } from '../../i18n/messages.js';
 
 	interface Props {
 		t: ViewerMessages;
@@ -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/components/viewer/ViewerDock.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { CameraProjection, Look, ViewPreset } from '@selvajs/visualization/render';
-import type { ViewerMessages } from '../../i18n/messages';
+import type { ViewerMessages } from '../../i18n/messages.js';
 interface Props {
     t: ViewerMessages;
     /** Fades the dock out while a host drawer covers the viewer. */

package/dist/composables/useFooterItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Component } from 'svelte';
-import { type FooterItem } from '../contexts/footerContext.svelte';
+import { type FooterItem } from '../contexts/footerContext.svelte.js';
 export type FooterItemConfig<P extends Record<string, unknown> = Record<string, unknown>> = Omit<FooterItem<P>, 'position' | 'priority'> & Partial<Pick<FooterItem<P>, 'position' | 'priority'>>;
 /**
  * Register a footer item for the lifetime of the calling component.

package/dist/composables/useFooterItem.svelte.js

@@ -1,5 +1,5 @@
 import { getContext, onMount, onDestroy } from 'svelte';
-import { FOOTER_CONTEXT_KEY } from '../contexts/footerContext.svelte';
+import { FOOTER_CONTEXT_KEY } from '../contexts/footerContext.svelte.js';
 /**
  * Register a footer item for the lifetime of the calling component.
  *

package/dist/constants.js

@@ -1,8 +1,7 @@
 export const APP_DEFAULTS = {
     // File upload limits
     // TEMP (dev): raised 150 MB → 300 MB so large dev file-widget inputs aren't
-    // blocked client-side. The server request cap (COMPUTE_REQUEST_MAX_BYTES)
-    // still defaults to 256 MB, and base64 inflates a raw file by ~4/3, so
+    // blocked client-side. The server request cap is 256 MB, and base64 inflates a raw file by ~4/3, so
     // anything over ~192 MB is rejected with a 413 after the client accepts it.
     // Revert to 150 before release.
     FILE_UPLOAD: {

package/dist/contexts/hostContext.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { GeometryKind } from '@selvajs/schemas';
-import type { UIHost } from '../schema/host-support';
+import type { UIHost } from '../schema/host-support.js';
 export type GeometryPickResult = {
     outcome: 'picked';
     summary: string;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ 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';

package/dist/index.js

@@ -9,6 +9,7 @@ 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';

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);