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

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

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

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

@@ -23,10 +23,10 @@
 	import SceneManager from './SceneManager.svelte';
 	import ViewerDock from './ViewerDock.svelte';
 	import MeshMetadataPanel from './MeshMetadataPanel.svelte';
-	import * as Resizable from '$lib/components/primitives/resizable/index.js';
-	import type { Locale } from '$lib/i18n/messages';
-	import { layerLocaleContext } from '$lib/i18n/localeContext.svelte';
-	import { saveBlob } from '$lib/utils/host-files';
+	import * as Resizable from '#lib/components/primitives/resizable/index.js';
+	import type { Locale } from '#lib/i18n/messages.js';
+	import { layerLocaleContext } from '#lib/i18n/localeContext.svelte.js';
+	import { saveBlob } from '#lib/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/src/lib/components/viewer/ViewerDock.svelte

@@ -16,8 +16,8 @@
 		Cuboid
 	} from '@lucide/svelte';
 	import type { CameraProjection, Look, ViewPreset } from '@selvajs/visualization/render';
-	import * as DropdownMenu from '$lib/components/primitives/dropdown-menu/index.js';
-	import type { ViewerMessages } from '$lib/i18n/messages';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
+	import type { ViewerMessages } from '#lib/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/src/lib/composables/useFooterItem.svelte.ts

@@ -3,7 +3,7 @@ import {
 	type FooterStore,
 	type FooterItem,
 	FOOTER_CONTEXT_KEY
-} from '$lib/contexts/footerContext.svelte';
+} from '#lib/contexts/footerContext.svelte.js';
 
 export type FooterItemConfig<P extends Record<string, unknown> = Record<string, unknown>> = Omit<
 	FooterItem<P>,

package/src/lib/constants.ts

@@ -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/src/lib/contexts/hostContext.svelte.ts

@@ -1,6 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import type { GeometryKind } from '@selvajs/schemas';
-import type { UIHost } from '$lib/schema/host-support';
+import type { UIHost } from '#lib/schema/host-support.js';
 
 // Tells InputControl which host it renders in and how to reach the host's own actions, without
 // threading a prop through every layout layer. Without a provider the host is Selva.

package/src/lib/index.ts

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

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