@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.11

package/dist/components/viewer/Viewer.svelte

@@ -26,21 +26,22 @@
 		Frame,
 		Ruler,
 		Grid3x3,
-		Check,
-		ChevronRight,
 		Palette,
 		Spline
 	} from '@lucide/svelte';
-	import { DropdownMenu } from 'bits-ui';
 	import { SvelteSet } from 'svelte/reactivity';
 	import type * as THREE from 'three';
 	import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 	import { createSceneOutliner, type SceneOutliner } from '@selvajs/visualization/scene';
+	import { clearGeometryCache } from '@selvajs/visualization/parse';
 	import SceneManager from './SceneManager.svelte';
-	import MeshMetadataDialog from './MeshMetadataDialog.svelte';
+	import MeshMetadataPanel from './MeshMetadataPanel.svelte';
 	import * as Resizable from '../primitives/resizable/index.js';
+	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
+	import { Button } from '../primitives/button/index.js';
 	import type { Locale } from '../../i18n/messages';
-	import { setLocaleContext, getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { layerLocaleContext } from '../../i18n/localeContext.svelte';
+	import { saveBlob } from '../../utils/host-files';
 
 	export interface ViewerConfig {
 		showScreenshotButton?: boolean;
@@ -58,7 +59,10 @@
 	interface Props {
 		meshes: any[];
 		isFullscreen?: boolean;
+		/** Shows a progress bar along the top edge. Pass a delayed flag (`createSolvingIndicator`). */
 		isSolving?: boolean;
+		/** Dims the stale result while a long solve runs. */
+		isSlow?: boolean;
 		isBlurred?: boolean;
 		drawerOpen?: boolean;
 		viewerConfig?: ViewerConfig;
@@ -94,6 +98,7 @@
 		meshes,
 		isFullscreen = $bindable(false),
 		isSolving = false,
+		isSlow = false,
 		isBlurred = false,
 		drawerOpen = false,
 		viewerConfig = {},
@@ -104,12 +109,8 @@
 
 	const config = $derived({ ...defaultViewerConfig, ...viewerConfig });
 
-	// Read the host's locale before overriding it for our subtree.
-	const hostLocale = getLocaleContext();
-
 	// A getter, not a value: it is re-read reactively, so changing `lang` updates the chrome live.
-	setLocaleContext(() => lang ?? hostLocale.locale);
-	const locale = getLocaleContext();
+	const locale = layerLocaleContext(() => lang);
 	const t = $derived(locale.messages);
 
 	let canvas: HTMLCanvasElement;
@@ -127,6 +128,7 @@
 	let updateGridScale: (() => void) | null = null;
 	let updateShadowBounds: (() => void) | null = null;
 	let fitToView: (() => void) | null = null;
+	let clearSelection: (() => void) | null = null;
 	let viewerInitialized = false;
 	let sceneVersion = $state(0);
 	let hideButton = $state(false);
@@ -147,16 +149,23 @@
 	let selectedMeshMetadata: Record<string, any> | null = $state(null);
 	let selectedMeshName: string | null = $state(null);
 
-	// Derived from LOOKS so adding a look in @selvajs/visualization shows up here with no edit; the
-	// map only overrides the names that don't survive capitalisation ('xray' → 'X-Ray').
-	const LOOK_LABELS: Partial<Record<Look, string>> = {
-		xray: 'X-Ray',
-		lineart: 'Line Art'
-	};
-	const STYLE_OPTIONS: { look: Look; label: string }[] = LOOKS.map((look) => ({
-		look,
-		label: LOOK_LABELS[look] ?? look.charAt(0).toUpperCase() + look.slice(1)
-	}));
+	// Derived from LOOKS so a look added in @selvajs/visualization shows up here with no edit,
+	// under its capitalised name until it gets a message.
+	const lookLabels = $derived<Partial<Record<Look, string>>>({
+		technical: t.lookTechnical,
+		studio: t.lookStudio,
+		showcase: t.lookShowcase,
+		arctic: t.lookArctic,
+		xray: t.lookXray,
+		lineart: t.lookLineart,
+		wireframe: t.lookWireframe
+	});
+	const styleOptions = $derived<{ look: Look; label: string }[]>(
+		LOOKS.map((look) => ({
+			look,
+			label: lookLabels[look] ?? look.charAt(0).toUpperCase() + look.slice(1)
+		}))
+	);
 
 	const VIEW_PRESETS: { preset: ViewPreset; label: () => string }[] = [
 		{ preset: 'top', label: () => t.viewTop },
@@ -192,6 +201,10 @@
 			grid: { enabled: config.showToolsMenu && config.showGridToggle },
 			measure: { enabled: config.showToolsMenu },
 			events: {
+				// Fires before onMeshMetadataClicked, so picking an object without metadata closes the
+				// previous object's panel instead of leaving it describing the wrong thing.
+				onObjectSelected: closeMetadata,
+				onBackgroundClicked: closeMetadata,
 				onMeshMetadataClicked: config.enableMeshClick
 					? (metadata: Record<string, unknown>) => {
 							if (hasUsefulMetadata(metadata)) {
@@ -222,21 +235,19 @@
 		updateGridScale = init.updateGridScale;
 		updateShadowBounds = init.updateShadowBounds;
 		fitToView = init.fitToView;
+		clearSelection = init.clearSelection;
 		projection = init.cameraController.getProjection();
 
-		const renderer = init.renderer;
-
 		// Untracked so the host reading `meshes` or config inside its setup can't re-run onMount's teardown.
 		const hostCleanup = untrack(() => onViewerReady?.(init));
 
 		return () => {
 			// Before dispose, so the host can still remove its own objects from a live scene.
 			hostCleanup?.();
+			// Also frees the GL context: a second forceContextLoss() here hits an already-lost one.
 			init.dispose();
-			// `{#key definitionKey}` recreates the canvas + WebGLRenderer + GL context
-			// on every definition switch; browsers cap live contexts (~16). Explicitly
-			// drop this one so the GPU-side context is released now rather than at GC.
-			renderer.forceContextLoss();
+			// Parsed geometry outlives the viewer otherwise: the cache is page-wide.
+			clearGeometryCache();
 		};
 	});
 
@@ -373,6 +384,29 @@
 		}
 	});
 
+	function closeMetadata() {
+		selectedMeshMetadata = null;
+		selectedMeshName = null;
+	}
+
+	function dismissMetadata() {
+		closeMetadata();
+		clearSelection?.();
+		invalidate?.();
+	}
+
+	// The panel describes an object from the previous solve once new meshes arrive.
+	$effect(() => {
+		void meshes;
+		untrack(closeMetadata);
+	});
+
+	// Dialogs portal to <body>, so one opened over the fullscreen viewer needs lifting above it.
+	$effect(() => {
+		document.body.toggleAttribute('data-viewer-fullscreen', isFullscreen);
+		return () => document.body.removeAttribute('data-viewer-fullscreen');
+	});
+
 	function toggleFullscreen() {
 		isFullscreen = !isFullscreen;
 	}
@@ -402,22 +436,15 @@
 		const blob = await captureImage?.();
 		if (!blob) return;
 
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
 		const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
-		link.href = url;
-		link.download = `viewer-${timestamp}.png`;
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-		URL.revokeObjectURL(url);
+		await saveBlob(blob, `viewer-${timestamp}.png`);
 	}
 </script>
 
 <div
 	class="min-h-64 sm:min-h-96 lg:min-h-125 relative h-full flex-1 border {isFullscreen
 		? 'fullscreen-viewer'
-		: 'overflow-hidden rounded-[0.625rem]'}"
+		: 'overflow-hidden rounded-lg'}"
 >
 	<Resizable.PaneGroup direction="horizontal" class="h-full w-full">
 		<!-- `defaultSize` must sum to 100 across the live panes. Panes register a frame before the
@@ -426,12 +453,12 @@
 		     scene pane keeps a sliver of its intended width. Hence 85 + 15, and the explicit id/order
 		     so a conditionally-rendered pane keeps its slot. -->
 		<Resizable.Pane id="viewport" order={1} defaultSize={sceneManagerOpen ? 85 : 100} minSize={40}>
-			<div class="relative h-full w-full" style="touch-action: none;">
+			<div class="relative h-full w-full touch-none">
 				<!-- Mesh count of the geometry currently in the scene. The canvas itself is opaque to
 				     the DOM, so this is the only observable proof a solve's geometry decoded and
 				     rendered; e2e asserts on it. -->
 				<canvas
-					class="block h-full w-full"
+					class="viewer-canvas block h-full w-full select-none"
 					data-testid="viewer-canvas"
 					data-mesh-count={meshes.length}
 					bind:this={canvas}
@@ -443,20 +470,28 @@
 						: '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-0 absolute z-10 animate-[selva-viewer-fade-in_0.2s_ease-out] backdrop-blur-[2px] transition-all duration-300"
+						class="inset-x-0 top-0 h-0.5 animate-in fade-in pointer-events-none absolute z-20 overflow-hidden bg-primary/20 duration-200"
+						aria-hidden="true"
+					>
+						<div class="solve-bar h-full w-1/3 bg-primary"></div>
+					</div>
+				{/if}
+				{#if isSlow}
+					<div
+						class="inset-0 animate-in fade-in pointer-events-none absolute z-10 bg-background/25 duration-500"
 					></div>
 				{/if}
 
 				{#if logoUrl}
-					<!-- Bottom offset matches the tools menu so it clears the mobile drawer handle.
-					     Always pointer-events:none so it never intercepts canvas drags. -->
+					<!-- pointer-events:none so it never intercepts canvas drags. -->
 					<div
-						class="right-4 {isFullscreen ? 'bottom-4' : 'bottom-16 sm:bottom-4'} absolute z-20"
-						style={hideButton
-							? 'opacity: 0; pointer-events: none;'
-							: 'opacity: 1; pointer-events: none;'}
+						class="right-4 bottom-4 pointer-events-none absolute z-20 {hideButton
+							? 'opacity-0'
+							: ''}"
 					>
 						<img
 							src={logoUrl}
@@ -466,173 +501,152 @@
 					</div>
 				{/if}
 
+				{#if selectedMeshMetadata}
+					<MeshMetadataPanel
+						metadata={selectedMeshMetadata}
+						meshName={selectedMeshName}
+						onClose={dismissMetadata}
+						class="top-3 right-3 left-3 sm:right-auto sm:max-h-2/3 sm:w-72 absolute z-30 max-h-1/2"
+					/>
+				{/if}
+
 				{#if config.showToolsMenu}
-					{@const itemClass =
-						'gap-2 px-2 py-1.5 text-sm flex cursor-pointer select-none items-center rounded-sm outline-none transition-colors hover:bg-muted focus:bg-muted'}
 					<div
-						class="left-4 {isFullscreen
-							? 'bottom-4'
-							: 'bottom-16 sm:bottom-4'} absolute z-50 flex items-center"
-						style={hideButton
-							? 'opacity: 0; pointer-events: none;'
-							: 'opacity: 1; pointer-events: auto;'}
+						class="left-4 bottom-4 gap-2 *:shadow-lg absolute z-50 flex items-center *:rounded-md {hideButton
+							? 'pointer-events-none opacity-0'
+							: ''}"
 					>
 						<DropdownMenu.Root>
-							<DropdownMenu.Trigger
-								class="h-10 w-10 shadow-lg hover:shadow-xl flex items-center justify-center rounded-lg border border-border bg-card/90 transition-all hover:bg-card active:scale-95 data-[state=open]:bg-secondary/60"
-								title={t.toolsMenu}
-								aria-label={t.toolsMenu}
-							>
-								<Settings2 class="h-5 w-5 text-card-foreground" />
+							<DropdownMenu.Trigger>
+								{#snippet child({ props })}
+									<Button
+										{...props}
+										variant="overlay"
+										size="icon-lg"
+										title={t.toolsMenu}
+										aria-label={t.toolsMenu}
+									>
+										<Settings2 />
+									</Button>
+								{/snippet}
 							</DropdownMenu.Trigger>
-							<DropdownMenu.Portal>
-								<DropdownMenu.Content
-									sideOffset={6}
-									align="start"
-									class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 min-w-44 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
-								>
-									<DropdownMenu.Item class={itemClass} onSelect={toggleProjection}>
-										{#if projection === 'perspective'}
-											<Square class="h-4 w-4" />
-											{t.switchToOrthographic}
-										{:else}
-											<Box class="h-4 w-4" />
-											{t.switchToPerspective}
-										{/if}
-									</DropdownMenu.Item>
-
-									<DropdownMenu.Item class={itemClass} onSelect={() => fitToView?.()}>
-										<Frame class="h-4 w-4" />
-										{t.fitToView}
-									</DropdownMenu.Item>
+							<!-- Above the fullscreen viewer, which sits at z-index 10000. -->
+							<DropdownMenu.Content sideOffset={6} class="min-w-44 z-10001 w-auto">
+								<DropdownMenu.Item onSelect={toggleProjection}>
+									{#if projection === 'perspective'}
+										<Square />
+										{t.switchToOrthographic}
+									{:else}
+										<Box />
+										{t.switchToPerspective}
+									{/if}
+								</DropdownMenu.Item>
+								<DropdownMenu.Item onSelect={() => fitToView?.()}>
+									<Frame />
+									{t.fitToView}
+								</DropdownMenu.Item>
+
+								<DropdownMenu.Sub>
+									<DropdownMenu.SubTrigger>
+										<Box />
+										{t.views}
+									</DropdownMenu.SubTrigger>
+									<DropdownMenu.SubContent class="z-10001">
+										{#each VIEW_PRESETS as { preset, label } (preset)}
+											<DropdownMenu.Item onSelect={() => setView(preset)}
+												>{label()}</DropdownMenu.Item
+											>
+										{/each}
+									</DropdownMenu.SubContent>
+								</DropdownMenu.Sub>
 
+								{#if config.showDisplayMenu}
 									<DropdownMenu.Sub>
-										<DropdownMenu.SubTrigger class="{itemClass} data-[state=open]:bg-muted">
-											<Box class="h-4 w-4" />
-											<span class="flex-1">{t.views}</span>
-											<ChevronRight class="h-4 w-4 text-muted-foreground" />
+										<DropdownMenu.SubTrigger>
+											<Palette />
+											{t.display}
 										</DropdownMenu.SubTrigger>
-										<DropdownMenu.SubContent
-											sideOffset={4}
-											class="min-w-32 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
-										>
-											{#each VIEW_PRESETS as { preset, label } (preset)}
-												<DropdownMenu.Item
-													class="px-2 py-1.5 text-sm flex cursor-pointer items-center rounded-sm transition-colors outline-none select-none hover:bg-muted focus:bg-muted"
-													onSelect={() => setView(preset)}
-												>
-													{label()}
-												</DropdownMenu.Item>
-											{/each}
-										</DropdownMenu.SubContent>
-									</DropdownMenu.Sub>
-
-									{#if config.showDisplayMenu}
-										<DropdownMenu.Sub>
-											<DropdownMenu.SubTrigger class="{itemClass} data-[state=open]:bg-muted">
-												<Palette class="h-4 w-4" />
-												<span class="flex-1">{t.display}</span>
-												<ChevronRight class="h-4 w-4 text-muted-foreground" />
-											</DropdownMenu.SubTrigger>
-											<DropdownMenu.SubContent
-												sideOffset={4}
-												class="min-w-40 p-1 shadow-md z-10001 rounded-md border bg-popover text-popover-foreground"
+										<DropdownMenu.SubContent class="min-w-40 z-10001">
+											<DropdownMenu.RadioGroup
+												value={renderStyle}
+												onValueChange={(look) => setRenderStyle(look as typeof renderStyle)}
 											>
-												{#each STYLE_OPTIONS as { look, label } (look)}
-													<DropdownMenu.Item
-														closeOnSelect={false}
-														class="{itemClass} {renderStyle === look ? 'text-primary' : ''}"
-														onSelect={() => setRenderStyle(look)}
-													>
-														<span class="flex-1">{label}</span>
-														{#if renderStyle === look}
-															<Check class="h-4 w-4" />
-														{/if}
-													</DropdownMenu.Item>
+												{#each styleOptions as { look, label } (look)}
+													<DropdownMenu.RadioItem value={look} closeOnSelect={false}>
+														{label}
+													</DropdownMenu.RadioItem>
 												{/each}
-
-												<DropdownMenu.Separator class="my-1 h-px bg-border" />
-
-												<DropdownMenu.Item
-													closeOnSelect={false}
-													class="{itemClass} {edgesVisible ? 'text-primary' : ''}"
-													onSelect={toggleEdges}
-												>
-													<Spline class="h-4 w-4" />
-													<span class="flex-1">{t.edges}</span>
-													{#if edgesVisible}
-														<Check class="h-4 w-4" />
-													{/if}
-												</DropdownMenu.Item>
-											</DropdownMenu.SubContent>
-										</DropdownMenu.Sub>
-									{/if}
-
-									<DropdownMenu.Item
-										closeOnSelect={false}
-										class="{itemClass} {measureActive ? 'text-primary' : ''}"
-										onSelect={toggleMeasure}
+											</DropdownMenu.RadioGroup>
+											<DropdownMenu.Separator />
+											<DropdownMenu.CheckboxItem
+												checked={edgesVisible}
+												onCheckedChange={toggleEdges}
+											>
+												<Spline />
+												{t.edges}
+											</DropdownMenu.CheckboxItem>
+										</DropdownMenu.SubContent>
+									</DropdownMenu.Sub>
+								{/if}
+
+								<DropdownMenu.CheckboxItem checked={measureActive} onCheckedChange={toggleMeasure}>
+									<Ruler />
+									{t.measure}
+								</DropdownMenu.CheckboxItem>
+
+								{#if config.showGridToggle}
+									<DropdownMenu.CheckboxItem checked={gridVisible} onCheckedChange={toggleGrid}>
+										<Grid3x3 />
+										{t.grid}
+									</DropdownMenu.CheckboxItem>
+								{/if}
+
+								{#if config.showSceneManager || config.showScreenshotButton || config.showFullscreenButton}
+									<DropdownMenu.Separator />
+								{/if}
+
+								{#if config.showSceneManager}
+									<DropdownMenu.CheckboxItem
+										checked={sceneManagerOpen}
+										onCheckedChange={() => (sceneManagerOpen = !sceneManagerOpen)}
 									>
-										<Ruler class="h-4 w-4" />
-										<span class="flex-1">{t.measure}</span>
-										{#if measureActive}
-											<Check class="h-4 w-4" />
-										{/if}
+										<Layers />
+										{t.sceneManager}
+									</DropdownMenu.CheckboxItem>
+								{/if}
+
+								{#if config.showScreenshotButton}
+									<DropdownMenu.Item onSelect={downloadScreenshot}>
+										<Camera />
+										{t.screenshot}
 									</DropdownMenu.Item>
+								{/if}
 
-									{#if config.showGridToggle}
-										<DropdownMenu.Item
-											closeOnSelect={false}
-											class="{itemClass} {gridVisible ? 'text-primary' : ''}"
-											onSelect={toggleGrid}
-										>
-											<Grid3x3 class="h-4 w-4" />
-											<span class="flex-1">{t.grid}</span>
-											{#if gridVisible}
-												<Check class="h-4 w-4" />
-											{/if}
-										</DropdownMenu.Item>
-									{/if}
-
-									{#if config.showSceneManager || config.showScreenshotButton || config.showFullscreenButton}
-										<DropdownMenu.Separator class="my-1 h-px bg-border" />
-									{/if}
-
-									{#if config.showSceneManager}
-										<DropdownMenu.Item
-											closeOnSelect={false}
-											class="{itemClass} {sceneManagerOpen ? 'text-primary' : ''}"
-											onSelect={() => (sceneManagerOpen = !sceneManagerOpen)}
-										>
-											<Layers class="h-4 w-4" />
-											<span class="flex-1">{t.sceneManager}</span>
-											{#if sceneManagerOpen}
-												<Check class="h-4 w-4" />
-											{/if}
-										</DropdownMenu.Item>
-									{/if}
-
-									{#if config.showScreenshotButton}
-										<DropdownMenu.Item class={itemClass} onSelect={downloadScreenshot}>
-											<Camera class="h-4 w-4" />
-											{t.screenshot}
-										</DropdownMenu.Item>
-									{/if}
-
-									{#if config.showFullscreenButton}
-										<DropdownMenu.Item class={itemClass} onSelect={toggleFullscreen}>
-											{#if isFullscreen}
-												<Minimize class="h-4 w-4" />
-												{t.exitFullscreen}
-											{:else}
-												<Maximize class="h-4 w-4" />
-												{t.fullscreen}
-											{/if}
-										</DropdownMenu.Item>
-									{/if}
-								</DropdownMenu.Content>
-							</DropdownMenu.Portal>
+								{#if config.showFullscreenButton}
+									<DropdownMenu.Item onSelect={toggleFullscreen}>
+										{#if isFullscreen}
+											<Minimize />
+											{t.exitFullscreen}
+										{:else}
+											<Maximize />
+											{t.fullscreen}
+										{/if}
+									</DropdownMenu.Item>
+								{/if}
+							</DropdownMenu.Content>
 						</DropdownMenu.Root>
+						<!-- Touch has no F key, and fit-to-view is the way back from a framed part. -->
+						<div class="hidden pointer-coarse:block">
+							<Button
+								variant="overlay"
+								size="icon-lg"
+								title={t.fitToView}
+								aria-label={t.fitToView}
+								onclick={() => fitToView?.()}
+							>
+								<Frame />
+							</Button>
+						</div>
 					</div>
 				{/if}
 			</div>
@@ -647,22 +661,12 @@
 	</Resizable.PaneGroup>
 </div>
 
-<MeshMetadataDialog
-	open={selectedMeshMetadata !== null}
-	metadata={selectedMeshMetadata}
-	meshName={selectedMeshName}
-	{isFullscreen}
-	onOpenChange={(open: boolean) => {
-		if (!open) {
-			setTimeout(() => {
-				selectedMeshMetadata = null;
-				selectedMeshName = null;
-			}, 200);
-		}
-	}}
-/>
-
 <style>
+	:global([data-viewer-fullscreen] [data-slot='dialog-content']),
+	:global([data-viewer-fullscreen] [data-slot='dialog-overlay']) {
+		z-index: 10001;
+	}
+
 	.fullscreen-viewer {
 		position: fixed;
 		inset: 0;
@@ -670,6 +674,33 @@
 		border-radius: 0 !important;
 	}
 
+	/* A long press on touch otherwise selects the canvas as an image and opens the save/copy callout. */
+	.viewer-canvas {
+		-webkit-touch-callout: none;
+		-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;
 	}
@@ -699,13 +730,4 @@
 			backdrop-filter: blur(0px);
 		}
 	}
-
-	@keyframes selva-viewer-fade-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
 </style>

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

@@ -15,7 +15,10 @@ export interface ViewerConfig {
 interface Props {
     meshes: any[];
     isFullscreen?: boolean;
+    /** Shows a progress bar along the top edge. Pass a delayed flag (`createSolvingIndicator`). */
     isSolving?: boolean;
+    /** Dims the stale result while a long solve runs. */
+    isSlow?: boolean;
     isBlurred?: boolean;
     drawerOpen?: boolean;
     viewerConfig?: ViewerConfig;

package/dist/compute/run-panel-action.d.ts

@@ -0,0 +1,8 @@
+import type { SolveSettlement } from '@selvajs/solve/client';
+import type { ActionButton } from '../types/actionButton';
+/**
+ * Runs a footer-menu action. A `solvesFirst` action waits for the result for the current
+ * inputs and runs only on an applied one; a refused or failed solve has already shown the user
+ * why. A host that can't solve (`ensureSolved` undefined) runs it straight away.
+ */
+export declare function runPanelAction(action: ActionButton, ensureSolved: (() => Promise<SolveSettlement>) | undefined): Promise<void>;

package/dist/compute/run-panel-action.js

@@ -0,0 +1,12 @@
+/**
+ * Runs a footer-menu action. A `solvesFirst` action waits for the result for the current
+ * inputs and runs only on an applied one; a refused or failed solve has already shown the user
+ * why. A host that can't solve (`ensureSolved` undefined) runs it straight away.
+ */
+export async function runPanelAction(action, ensureSolved) {
+    if (!action.solvesFirst || !ensureSolved)
+        return action.onclick();
+    const settled = await ensureSolved();
+    if (settled.status === 'applied')
+        await action.onclick(settled);
+}