@selvajs/ui 6.6.0-beta.8 → 7.0.0

package/dist/utils/file-download.js

@@ -1,6 +1,7 @@
 import { decodeBase64ToBinary, downloadFileDataByRoot } from '@selvajs/compute/core';
 import { SvelteMap } from 'svelte/reactivity';
 import { APP_DEFAULTS } from '../constants';
+import { saveBlob } from './host-files';
 export const MIME_BY_EXT = {
     '.png': 'image/png',
     '.jpg': 'image/jpeg',
@@ -23,12 +24,7 @@ function saveSingleFile(file) {
     const content = file.isBase64Encoded ? decodeBase64ToBinary(file.data) : file.data;
     // decodeBase64ToBinary returns an ArrayBuffer-backed copy, never a SharedArrayBuffer view.
     const blob = new Blob([content], { type: mime });
-    const fullName = `${file.fileName}${file.fileType ?? ''}`;
-    const a = document.createElement('a');
-    a.href = URL.createObjectURL(blob);
-    a.download = fullName;
-    a.click();
-    URL.revokeObjectURL(a.href);
+    return saveBlob(blob, `${file.fileName}${file.fileType ?? ''}`);
 }
 export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
     try {
@@ -37,13 +33,13 @@ export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
             console.warn('[FileDownload] No files to download');
             return;
         }
-        // A lone file is saved as itself rather than zipped — the one case that needs the DOM
-        // directly. Everything else, including the per-root archive split, belongs to compute.
+        // A lone file is saved as itself rather than zipped. Everything else, including the
+        // per-root archive split, belongs to compute.
         if (filesArray.length === 1) {
-            saveSingleFile(filesArray[0]);
+            await saveSingleFile(filesArray[0]);
             return;
         }
-        await downloadFileDataByRoot(filesArray, fileName);
+        await downloadFileDataByRoot(filesArray, fileName, null, { saveBlob });
     }
     catch (error) {
         console.error('[FileDownload] Error downloading files:', error);

package/dist/utils/host-files.d.ts

@@ -0,0 +1,12 @@
+/** Resolves false when the user cancelled. An anchor download always resolves true: it can't tell. */
+export type BlobSaver = (blob: Blob, fileName: string) => Promise<boolean>;
+/** `accept` is what `<input accept>` takes: `.slvp,.sps`, `image/*`. Resolves null on cancel. */
+export type FilePicker = (options: {
+    accept: string;
+}) => Promise<File | null>;
+export declare function setBlobSaver(next: BlobSaver): void;
+export declare function setFilePicker(next: FilePicker): void;
+export declare function saveBlob(blob: Blob, fileName: string): Promise<boolean>;
+export declare function pickFile(options: {
+    accept: string;
+}): Promise<File | null>;

package/dist/utils/host-files.js

@@ -0,0 +1,46 @@
+// Where a file the page offers goes, and where a file the page asks for comes from. A browser
+// gets an <a download> click and a hidden <input type=file>. A host whose WebView can't do
+// either safely (the Rhino panel) installs its own once at start-up, before the first save or pick.
+let saver = saveWithAnchor;
+let picker = pickWithInput;
+export function setBlobSaver(next) {
+    saver = next;
+}
+export function setFilePicker(next) {
+    picker = next;
+}
+export function saveBlob(blob, fileName) {
+    return saver(blob, fileName);
+}
+export function pickFile(options) {
+    return picker(options);
+}
+async function saveWithAnchor(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    // Firefox only downloads from an anchor that is in the document.
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Revoking synchronously can abort the download: the browser pins the blob only once it starts.
+    setTimeout(() => URL.revokeObjectURL(url), 10_000);
+    return true;
+}
+function pickWithInput({ accept }) {
+    return new Promise((resolve) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = accept;
+        input.style.display = 'none';
+        const settle = (file) => {
+            input.remove();
+            resolve(file);
+        };
+        input.addEventListener('change', () => settle(input.files?.[0] ?? null), { once: true });
+        input.addEventListener('cancel', () => settle(null), { once: true });
+        document.body.appendChild(input);
+        input.click();
+    });
+}

package/dist/utils/webp-to-png.d.ts

@@ -0,0 +1,10 @@
+/** True when a WebP should go out as PNG: the input takes PNG, so a PNG is a valid value. */
+export declare function shouldConvertWebp(fileEnding: string, acceptedFormats: readonly string[]): boolean;
+/** Whether the input takes a file with this ending, counting a WebP it would get as PNG. */
+export declare function acceptsFileEnding(fileEnding: string, acceptedFormats: readonly string[]): boolean;
+/**
+ * By content, not name: image CDNs serve WebP from URLs with no extension or one naming another
+ * format. A WebP file starts `RIFF`, a 4-byte size, then `WEBP`.
+ */
+export declare function isWebp(blob: Blob): Promise<boolean>;
+export declare function webpToPng(blob: Blob): Promise<Blob>;

package/dist/utils/webp-to-png.js

@@ -0,0 +1,41 @@
+// Grasshopper's PDF export can't read WebP: the plugin's PDF library has no WebP decoder, and
+// nothing on Windows or Rhino.Compute decodes it reliably. The browser can, so a WebP picked for
+// an input that also takes PNG is re-encoded here. PNG rather than JPEG keeps transparency.
+/** True when a WebP should go out as PNG: the input takes PNG, so a PNG is a valid value. */
+export function shouldConvertWebp(fileEnding, acceptedFormats) {
+    return fileEnding === '.webp' && acceptedFormats.includes('.png');
+}
+/** Whether the input takes a file with this ending, counting a WebP it would get as PNG. */
+export function acceptsFileEnding(fileEnding, acceptedFormats) {
+    const ending = fileEnding.toLowerCase();
+    if (acceptedFormats.length === 0 || acceptedFormats.includes(ending))
+        return true;
+    return shouldConvertWebp(ending, acceptedFormats);
+}
+const ascii = (bytes, start, end) => String.fromCharCode(...bytes.subarray(start, end));
+/**
+ * By content, not name: image CDNs serve WebP from URLs with no extension or one naming another
+ * format. A WebP file starts `RIFF`, a 4-byte size, then `WEBP`.
+ */
+export async function isWebp(blob) {
+    if (blob.type === 'image/webp')
+        return true;
+    const head = new Uint8Array(await blob.slice(0, 12).arrayBuffer());
+    return head.length === 12 && ascii(head, 0, 4) === 'RIFF' && ascii(head, 8, 12) === 'WEBP';
+}
+export async function webpToPng(blob) {
+    const bitmap = await createImageBitmap(blob);
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        const context = canvas.getContext('2d');
+        if (!context)
+            throw new Error('Canvas 2D context unavailable');
+        context.drawImage(bitmap, 0, 0);
+        return await new Promise((resolve, reject) => canvas.toBlob((png) => (png ? resolve(png) : reject(new Error('PNG encoding failed'))), 'image/png'));
+    }
+    finally {
+        bitmap.close();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.6.0-beta.8",
+  "version": "7.0.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -31,17 +31,20 @@
     ".": {
       "selva-source": {
         "types": "./dist/index.d.ts",
-        "svelte": "./dist/index.js"
+        "svelte": "./src/lib/index.ts"
       },
       "types": "./dist/public.d.ts",
       "svelte": "./dist/public.js"
     },
     "./external": {
+      "selva-source": {
+        "types": "./dist/external/storage.d.ts",
+        "svelte": "./src/lib/external/storage.ts"
+      },
       "types": "./dist/external/storage.d.ts",
       "svelte": "./dist/external/storage.js"
     },
-    "./styles/base.css": "./src/lib/styles/base.css",
-    "./styles/themes/*": "./src/lib/styles/themes/*"
+    "./styles/base.css": "./src/lib/styles/base.css"
   },
   "files": [
     "dist",
@@ -58,11 +61,11 @@
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
-    "three": "^0.186.1",
-    "@selvajs/schemas": "^5.3.0-beta.0",
-    "@selvajs/compute": "^5.0.0-beta.2",
-    "@selvajs/visualization": "^1.6.0-beta.0",
-    "@selvajs/solve": "^2.0.0-beta.4"
+    "three": "^0.187.0",
+    "@selvajs/solve": "^2.0.0",
+    "@selvajs/schemas": "^5.3.0",
+    "@selvajs/visualization": "^1.6.0",
+    "@selvajs/compute": "^5.0.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -71,35 +74,40 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.48.0",
+    "@fontsource-variable/hanken-grotesk": "^5.3.0",
+    "@iconify/svelte": "^5.2.4",
+    "@lucide/svelte": "^1.66.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
-    "svelte-sonner": "^1.2.1",
+    "svelte-sonner": "^1.2.2",
     "tailwind-merge": "^3.7.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.4",
-    "@sveltejs/kit": "2.70.3",
+    "@sveltejs/kit": "3.1.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@types/three": "^0.186.0",
-    "bits-ui": "^2.19.3",
+    "@types/three": "^0.187.0",
+    "bits-ui": "^2.20.2",
     "rimraf": "^6.1.3",
-    "svelte": "5.57.1",
+    "svelte": "5.57.3",
     "tailwind-variants": "^3.3.1",
-    "vitest": "^5.0.2",
+    "vitest": "^5.0.5",
+    "@selvajs/compute": "5.0.0",
+    "@selvajs/schemas": "5.3.0",
     "@selvajs/config": "0.0.4",
-    "@selvajs/solve": "2.0.0-beta.4",
-    "@selvajs/visualization": "1.6.0-beta.0",
-    "@selvajs/compute": "5.0.0-beta.2",
-    "@selvajs/schemas": "5.3.0-beta.0"
+    "@selvajs/solve": "2.0.0",
+    "@selvajs/visualization": "1.6.0"
+  },
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
   },
   "scripts": {
-    "predev": "node ../../scripts/sync-shared-assets.js",
+    "predev": "node ../../scripts/develop/sync-shared-assets.js",
     "dev": "vite dev",
-    "prebuild": "node ../../scripts/sync-shared-assets.js",
+    "prebuild": "node ../../scripts/develop/sync-shared-assets.js",
     "build": "rimraf dist && pnpm prepack",
     "build:fast": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",

package/src/lib/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 '$lib/i18n/localeContext.svelte';
+	import { getLocaleContext } from '#lib/i18n/localeContext.svelte.js';
 
 	interface Props {
 		status?: number;

package/src/lib/components/compute/AppLayout.svelte

@@ -1,6 +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';
@@ -10,9 +11,9 @@
 	import SolvingIndicator from '../primitives/SolvingIndicator.svelte';
 	import TabLayout from '../preview/TabLayout.svelte';
 	import CollapsedPanelStrip from './CollapsedPanelStrip.svelte';
-	import * as Resizable from '$lib/components/primitives/resizable';
-	import * as DropdownMenu from '$lib/components/primitives/dropdown-menu/index.js';
-	import { Button } from '$lib';
+	import * as Resizable from '#lib/components/primitives/resizable/index.js';
+	import * as DropdownMenu from '#lib/components/primitives/dropdown-menu/index.js';
+	import { Button } from '#lib';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
 	import { runPanelAction } from '../../compute/run-panel-action';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
@@ -33,7 +34,23 @@
 		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;
+		/** `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;
 		hasPendingChanges?: boolean;
 		hasNeverSolved?: boolean;
 		isViewerFullscreen?: boolean;
@@ -63,6 +80,11 @@
 		meshes = [],
 		isSolving,
 		showSolvingIndicator = false,
+		solveIsSlow = false,
+		live,
+		onabort,
+		freezesDuringSolve = false,
+		solveMessages,
 		hasPendingChanges = false,
 		hasNeverSolved = false,
 		isViewerFullscreen = $bindable(false),
@@ -143,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);
@@ -248,6 +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()}
+	<!-- 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}
@@ -256,9 +289,19 @@
 			{oncalculate}
 			trailing={hasMenu ? actionsMenu : undefined}
 		/>
-	{:else if hasMenu}
-		<div class="mt-3 pb-3 pt-2 px-2 flex justify-end border-t border-border/50">
-			{@render actionsMenu()}
+	{: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}
+				{@render actionsMenu()}
+			{/if}
 		</div>
 	{/if}
 {/snippet}
@@ -272,9 +315,9 @@
 )}
 	<div class="panel-content-wrapper">
 		{#if schema.layout.type === 'tabbed'}
-			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} />
+			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} bare={stacked} />
 		{/if}
-		{#if hostsFooter && !isMobile}
+		{#if hostsFooter && !stacked}
 			<div class="panel-footer px-1">
 				{@render footer()}
 			</div>
@@ -291,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. -->
@@ -307,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
@@ -344,7 +388,7 @@
 				<!-- Inert while closed: the fields are clipped out of view, and tabbing into them
 				     would scroll the drawer's insides around behind the handle. -->
 				<div class="drawer-content" inert={drawer === 'closed'}>
-					<div class="px-3 pb-6">
+					<div class="px-2 pb-4">
 						{#if hasLeftPanel}
 							{@render panelContent(hasRightPanel ? 'left' : undefined, requestedLeftTabId, false)}
 						{/if}
@@ -366,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}
@@ -386,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,
@@ -413,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
@@ -426,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
@@ -439,6 +482,7 @@
 					<Resizable.Handle
 						withHandle
 						line={false}
+						class="translate-x-1.5 z-20"
 						data-collapsed={leftCollapsed}
 						onclick={() => {
 							if (leftCollapsed) leftPaneRef?.expand();
@@ -447,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}
@@ -481,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
@@ -508,8 +555,6 @@
 			{/if}
 		</div>
 	{/if}
-
-	<SolvingIndicator show={showSolvingIndicator} />
 </main>
 
 <!-- The save, load and validation dialogs; the footer's menu opens them. -->
@@ -555,7 +600,13 @@
 
 	.mobile-root {
 		--drawer-closed-h: 60px;
-		--drawer-half-h: 50%;
+		--drawer-half-h: 60%;
+	}
+
+	/* On a phone the panels stack in one scroller. Held at the scroller's height, a long left
+	   panel would spill over the right panel below it. */
+	.mobile-root .panel-content-wrapper {
+		height: auto;
 	}
 
 	.viewer-region {
@@ -633,6 +684,13 @@
 		padding: 0rem 1rem;
 	}
 
+	/* The sheet's top edge already separates it from the model; the desktop footer's extra
+	   spacing only takes rows from the fields. */
+	.drawer-footer :global(> div) {
+		margin-top: 0;
+		padding-block: 0.5rem;
+	}
+
 	/* Touch gets 44px targets on the panel's controls; a fine pointer keeps the denser sizes. */
 	@media (pointer: coarse) {
 		.panel-content-wrapper

package/src/lib/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/src/lib/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/src/lib/components/compute/ComputeMessagesDialog.svelte

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