@selvajs/ui 6.6.0-beta.9 → 7.0.0

package/README.md

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

package/dist/components/ErrorScreen.svelte

@@ -3,7 +3,7 @@
 	import * as Card from './primitives/card/index.js';
 	import { Button } from './primitives/button/index.js';
 	import Callout from './primitives/Callout.svelte';
-	import { getLocaleContext } from '../i18n/localeContext.svelte';
+	import { getLocaleContext } from '../i18n/localeContext.svelte.js';
 
 	interface Props {
 		status?: number;

package/dist/components/compute/AppLayout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
-	import type { SolveSettlement } from '@selvajs/solve/client';
+	import type { LiveSolveState, SolveSettlement } from '@selvajs/solve/client';
 	import type { ActionButton } from '../../types/actionButton';
 	import type { PresetLabels } from '../../types/presetLabels';
 	import { ChevronUp, Download, Ellipsis, Upload } from '@lucide/svelte';
@@ -11,9 +11,9 @@
 	import SolvingIndicator from '../primitives/SolvingIndicator.svelte';
 	import TabLayout from '../preview/TabLayout.svelte';
 	import CollapsedPanelStrip from './CollapsedPanelStrip.svelte';
-	import * as Resizable from '../primitives/resizable';
+	import * as Resizable from '../primitives/resizable/index.js';
 	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
-	import { Button } from '../..';
+	import { Button } from '../../index.js';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
 	import { runPanelAction } from '../../compute/run-panel-action';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -34,8 +34,20 @@
 		showViewer: boolean;
 		meshes?: any[];
 		isSolving: boolean;
+		/**
+		 * `createSolvingIndicator(...).show`, not `isSolving`: grows the action row's solve status,
+		 * which would otherwise flash on every sub-second solve.
+		 */
 		showSolvingIndicator?: boolean;
-		/** `SolvingIndicator`'s `placement`; `inline` puts it in the action row. */
+		/** `createSolvingIndicator(...).slow`: the solve status grows into a card with progress. */
+		solveIsSlow?: boolean;
+		/** The session's live channel: step, count and bar for that card. */
+		live?: LiveSolveState;
+		/** Abort in that card. The host's `SolveMessages` should then take `progressShownByHost`. */
+		onabort?: () => void;
+		/** As passed to `createSolvingIndicator`. */
+		freezesDuringSolve?: boolean;
+		/** @deprecated Ignored: the solving status always sits in the action row. */
 		solvingIndicatorPlacement?: 'floating' | 'inline';
 		/** Rendered above the action row, for a host that keeps the solve's messages in the flow. */
 		solveMessages?: Snippet;
@@ -68,7 +80,10 @@
 		meshes = [],
 		isSolving,
 		showSolvingIndicator = false,
-		solvingIndicatorPlacement = 'floating',
+		solveIsSlow = false,
+		live,
+		onabort,
+		freezesDuringSolve = false,
 		solveMessages,
 		hasPendingChanges = false,
 		hasNeverSolved = false,
@@ -150,6 +165,14 @@
 		return () => mqMobile.removeEventListener('change', update);
 	});
 
+	// Without a viewer there's nothing to sit beside, so a narrow host (a docked Rhino panel) gets
+	// the phone's single edge-to-edge column instead of a card floating in its own margins.
+	const STACK_BELOW_WIDTH = 900;
+	let rootWidth = $state(0);
+	const stacked = $derived(
+		isMobile || (!hasViewer && rootWidth > 0 && rootWidth < STACK_BELOW_WIDTH)
+	);
+
 	let leftCollapsed = $state(false);
 	let rightCollapsed = $state(false);
 	let leftPaneRef = $state<{ expand: () => void } | null>(null);
@@ -255,9 +278,9 @@
 <!-- One primary action and one menu. A definition that solves on every change has no Calculate,
      so the menu sits alone at the end of the row. -->
 {#snippet footer()}
-	{#if solveMessages}
-		<div class="px-2">{@render solveMessages()}</div>
-	{/if}
+	<!-- No wrapper: it would always render (the messages' live region is never empty) and pick up
+	     the drawer footer's row padding, leaving a gap above Calculate with nothing in it. -->
+	{@render solveMessages?.()}
 	{#if schema.instanceSolve === false}
 		<CalculateButton
 			{hasPendingChanges}
@@ -266,13 +289,18 @@
 			{oncalculate}
 			trailing={hasMenu ? actionsMenu : undefined}
 		/>
-	{:else if hasMenu || solvingIndicatorPlacement === 'inline'}
-		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border/50">
-			{#if solvingIndicatorPlacement === 'inline'}
-				<SolvingIndicator show={showSolvingIndicator} placement="inline" />
-			{/if}
+	{:else}
+		<div class="mt-3 pb-3 pt-2 px-2 gap-2 flex items-center border-t border-border">
+			<SolvingIndicator
+				{isSolving}
+				show={showSolvingIndicator}
+				slow={solveIsSlow}
+				{live}
+				{onabort}
+				{freezesDuringSolve}
+			/>
 			{#if hasMenu}
-				<div class="ml-auto">{@render actionsMenu()}</div>
+				{@render actionsMenu()}
 			{/if}
 		</div>
 	{/if}
@@ -287,9 +315,9 @@
 )}
 	<div class="panel-content-wrapper">
 		{#if schema.layout.type === 'tabbed'}
-			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} bare={isMobile} />
+			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} bare={stacked} />
 		{/if}
-		{#if hostsFooter && !isMobile}
+		{#if hostsFooter && !stacked}
 			<div class="panel-footer px-1">
 				{@render footer()}
 			</div>
@@ -306,15 +334,16 @@
 
 <main
 	data-layout-root
-	class="min-h-0 sm:flex-row sm:py-(--page-py) flex flex-1 flex-col overflow-hidden {leftCollapsed
-		? 'sm:pl-0'
-		: 'sm:pl-(--page-px)'} {rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}"
+	class="min-h-0 flex flex-1 flex-col overflow-hidden {stacked
+		? ''
+		: `sm:flex-row sm:py-2 ${leftCollapsed ? 'sm:pl-0' : 'sm:pl-2'} ${rightCollapsed ? 'sm:pr-0' : 'sm:pr-2'}`}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
-	class:mobile-root={isMobile}
+	class:mobile-root={stacked}
+	bind:clientWidth={rootWidth}
 >
-	{#if isMobile}
-		{#if hasViewer}
+	{#if stacked}
+		{#if isMobile && hasViewer}
 			<!-- Ends above the drawer rather than behind it, so the model stays centred in what is
 			     visible. It jumps straight to its new size: animating it would resize the canvas,
 			     and its render targets, on every frame of the drawer's slide. -->
@@ -322,20 +351,20 @@
 				<Viewer
 					{meshes}
 					bind:isFullscreen={isViewerFullscreen}
-					{isSolving}
 					drawerOpen={drawer === 'full'}
 					{logoUrl}
 					{onViewerReady}
 					viewerConfig={{
 						...viewerConfig,
-						backgroundColor: schema?.viewerOptions?.backgroundColor,
+						backgroundColor: schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+						look: schema?.viewerOptions?.look ?? viewerConfig.look,
 						showSceneManager: false
 					}}
 				/>
 			</div>
 
 			<div
-				class="drawer-container rounded-t-2xl z-40 border-t bg-background shadow-sheet drawer-{drawer}"
+				class="drawer-container z-40 rounded-t-xl border-t bg-background shadow-sheet drawer-{drawer}"
 			>
 				<!-- Named by its visible label; aria-expanded carries the open/closed state. -->
 				<button
@@ -381,7 +410,7 @@
 			</div>
 		{:else}
 			<div class="flex flex-1 flex-col overflow-hidden">
-				<div class="px-3 pt-3 flex-1 overflow-y-auto">
+				<div class="px-3 pt-3 sm:px-5 flex-1 overflow-y-auto">
 					{#if hasLeftPanel}
 						{@render panelContent(hasRightPanel ? 'left' : undefined, requestedLeftTabId, false)}
 					{/if}
@@ -401,7 +430,7 @@
 		{/if}
 	{:else if !hasViewer && !isTwoPanelMode && hasLeftPanel !== hasRightPanel}
 		<!-- Single centered panel (left-only or right-only), no viewer -->
-		<div class="min-h-0 flex h-full flex-1 justify-center">
+		<div class="min-h-0 p-1 flex h-full flex-1 justify-center">
 			<div class="min-h-0 flex h-full w-4/5 flex-col">
 				{@render panelContent(
 					hasRightPanel ? 'right' : undefined,
@@ -428,7 +457,7 @@
 			<Resizable.PaneGroup
 				direction="horizontal"
 				autoSaveId="selva-layout-{layoutKey}"
-				class="min-h-0 flex-1"
+				class="min-h-0 m-1 flex-1"
 			>
 				{#if hasLeftPanel}
 					<Resizable.Pane
@@ -441,7 +470,6 @@
 						collapsedSize={0}
 						onCollapse={() => (leftCollapsed = true)}
 						onExpand={() => (leftCollapsed = false)}
-						class="ml-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || leftCollapsed
@@ -454,6 +482,7 @@
 					<Resizable.Handle
 						withHandle
 						line={false}
+						class="translate-x-1.5 z-20"
 						data-collapsed={leftCollapsed}
 						onclick={() => {
 							if (leftCollapsed) leftPaneRef?.expand();
@@ -462,30 +491,34 @@
 				{/if}
 
 				{#if hasViewer}
-					<Resizable.Pane order={2} minSize={20} class="min-h-0 mx-1 flex flex-col">
+					<Resizable.Pane order={2} minSize={20} class="min-h-0 flex flex-col">
 						<Viewer
 							{meshes}
 							bind:isFullscreen={isViewerFullscreen}
-							{isSolving}
 							{logoUrl}
 							{onViewerReady}
 							viewerConfig={{
 								...viewerConfig,
-								backgroundColor: schema?.viewerOptions?.backgroundColor
+								backgroundColor:
+									schema?.viewerOptions?.backgroundColor ?? viewerConfig.backgroundColor,
+								look: schema?.viewerOptions?.look ?? viewerConfig.look
 							}}
 						/>
 					</Resizable.Pane>
 				{/if}
 
 				{#if hasRightPanel}
-					<Resizable.Handle
-						withHandle
-						line={false}
-						data-collapsed={rightCollapsed}
-						onclick={() => {
-							if (rightCollapsed) rightPaneRef?.expand();
-						}}
-					/>
+					{#if hasViewer || !hasLeftPanel}
+						<Resizable.Handle
+							withHandle
+							line={false}
+							class="-translate-x-1.5 z-20"
+							data-collapsed={rightCollapsed}
+							onclick={() => {
+								if (rightCollapsed) rightPaneRef?.expand();
+							}}
+						/>
+					{/if}
 					<Resizable.Pane
 						bind:this={rightPaneRef}
 						order={3}
@@ -496,7 +529,6 @@
 						collapsedSize={0}
 						onCollapse={() => (rightCollapsed = true)}
 						onExpand={() => (rightCollapsed = false)}
-						class="mr-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || rightCollapsed
@@ -523,10 +555,6 @@
 			{/if}
 		</div>
 	{/if}
-
-	{#if solvingIndicatorPlacement === 'floating'}
-		<SolvingIndicator show={showSolvingIndicator} />
-	{/if}
 </main>
 
 <!-- The save, load and validation dialogs; the footer's menu opens them. -->

package/dist/components/compute/AppLayout.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
-import type { SolveSettlement } from '@selvajs/solve/client';
+import type { LiveSolveState, SolveSettlement } from '@selvajs/solve/client';
 import type { ActionButton } from '../../types/actionButton';
 import type { PresetLabels } from '../../types/presetLabels';
 import type { ThreeViewer } from '@selvajs/visualization/render';
@@ -14,8 +14,20 @@ interface Props {
     showViewer: boolean;
     meshes?: any[];
     isSolving: boolean;
+    /**
+     * `createSolvingIndicator(...).show`, not `isSolving`: grows the action row's solve status,
+     * which would otherwise flash on every sub-second solve.
+     */
     showSolvingIndicator?: boolean;
-    /** `SolvingIndicator`'s `placement`; `inline` puts it in the action row. */
+    /** `createSolvingIndicator(...).slow`: the solve status grows into a card with progress. */
+    solveIsSlow?: boolean;
+    /** The session's live channel: step, count and bar for that card. */
+    live?: LiveSolveState;
+    /** Abort in that card. The host's `SolveMessages` should then take `progressShownByHost`. */
+    onabort?: () => void;
+    /** As passed to `createSolvingIndicator`. */
+    freezesDuringSolve?: boolean;
+    /** @deprecated Ignored: the solving status always sits in the action row. */
     solvingIndicatorPlacement?: 'floating' | 'inline';
     /** Rendered above the action row, for a host that keeps the solve's messages in the flow. */
     solveMessages?: Snippet;

package/dist/components/compute/CollapsedPanelStrip.svelte

@@ -20,12 +20,14 @@
 		[
 			'gap-1 py-2 lg:py-3 lg:flex-col lg:w-auto px-2 lg:px-0',
 			'flex w-full shrink-0 flex-row items-center',
-			'backdrop-blur-sm bg-background/90 cursor-pointer'
+			'backdrop-blur-sm bg-background/90 cursor-pointer',
+			side === 'left' ? 'lg:border-r' : 'lg:border-l',
+			'border-border'
 		].join(' ')
 	);
 
 	const tabButtonClass =
-		'w-8 h-8 rounded cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
+		'w-8 h-8 rounded-md cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-hover hover:text-foreground';
 </script>
 
 <div

package/dist/components/compute/ComputeApp.svelte

@@ -57,7 +57,7 @@
 		footerText?: string;
 		/**
 		 * How long one solve may take before the client aborts it (ms). Pass the same value the
-		 * server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), or the client aborts solves that would
+		 * server enforces for this definition's compute server, or the client aborts solves that would
 		 * have finished.
 		 */
 		solveDeadlineMs: number;
@@ -286,7 +286,10 @@
 					showViewer={!!schema.viewerOptions?.enableRemote}
 					meshes={session.meshes}
 					isSolving={session.isSolving}
-					showSolvingIndicator={schema.instanceSolve !== false && solvingIndicator.show}
+					showSolvingIndicator={solvingIndicator.show}
+					solveIsSlow={solvingIndicator.slow}
+					live={session.live}
+					onabort={() => session.abort()}
 					hasPendingChanges={session.hasPendingChanges}
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
@@ -317,4 +320,5 @@
 	onabort={() => session.abort()}
 	onconfirm={() => session.acknowledge()}
 	ondiscard={() => session.discard()}
+	progressShownByHost={schema?.instanceSolve !== false}
 />

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -36,7 +36,7 @@ interface Props {
     footerText?: string;
     /**
      * How long one solve may take before the client aborts it (ms). Pass the same value the
-     * server enforces (`COMPUTE_SOLVE_DEADLINE_MS`), or the client aborts solves that would
+     * server enforces for this definition's compute server, or the client aborts solves that would
      * have finished.
      */
     solveDeadlineMs: number;

package/dist/components/compute/ComputeMessagesDialog.svelte

@@ -8,10 +8,10 @@
 
 	import type { Snippet } from 'svelte';
 	import type { SolveDiagnostic } from '@selvajs/solve/shared';
-	import * as Dialog from '../primitives/dialog';
+	import * as Dialog from '../primitives/dialog/index.js';
 	import IssueList, { type Issue } from '../primitives/IssueList.svelte';
-	import { getLocaleContext } from '../../i18n/localeContext.svelte';
-	import { formatCount } from '../../i18n/messages';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte.js';
+	import { formatCount } from '../../i18n/messages.js';
 
 	interface Props {
 		/** The last solve's messages. Preferred over `errors`/`warnings` when both are given. */

package/dist/components/compute/ParameterPresetManager.svelte

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