@selvajs/ui 6.6.0-beta.7 → 6.6.0-beta.9

package/dist/components/compute/AppLayout.svelte

@@ -1,4 +1,5 @@
 <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 { ActionButton } from '../../types/actionButton';
@@ -34,6 +35,10 @@
 		meshes?: any[];
 		isSolving: boolean;
 		showSolvingIndicator?: boolean;
+		/** `SolvingIndicator`'s `placement`; `inline` puts it 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 +68,8 @@
 		meshes = [],
 		isSolving,
 		showSolvingIndicator = false,
+		solvingIndicatorPlacement = 'floating',
+		solveMessages,
 		hasPendingChanges = false,
 		hasNeverSolved = false,
 		isViewerFullscreen = $bindable(false),
@@ -248,6 +255,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}
 	{#if schema.instanceSolve === false}
 		<CalculateButton
 			{hasPendingChanges}
@@ -256,9 +266,14 @@
 			{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 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}
+			{#if hasMenu}
+				<div class="ml-auto">{@render actionsMenu()}</div>
+			{/if}
 		</div>
 	{/if}
 {/snippet}
@@ -272,7 +287,7 @@
 )}
 	<div class="panel-content-wrapper">
 		{#if schema.layout.type === 'tabbed'}
-			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} />
+			<TabLayout {schema} {values} {onValueChange} {panelFilter} {requestedTabId} bare={isMobile} />
 		{/if}
 		{#if hostsFooter && !isMobile}
 			<div class="panel-footer px-1">
@@ -344,7 +359,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}
@@ -509,7 +524,9 @@
 		</div>
 	{/if}
 
-	<SolvingIndicator show={showSolvingIndicator} />
+	{#if solvingIndicatorPlacement === 'floating'}
+		<SolvingIndicator show={showSolvingIndicator} />
+	{/if}
 </main>
 
 <!-- The save, load and validation dialogs; the footer's menu opens them. -->
@@ -555,7 +572,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 +656,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/dist/components/compute/AppLayout.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { UISchema, SupportedTypes, ParameterPreset } from '@selvajs/schemas';
 import type { SolveSettlement } from '@selvajs/solve/client';
 import type { ActionButton } from '../../types/actionButton';
@@ -14,6 +15,10 @@ interface Props {
     meshes?: any[];
     isSolving: boolean;
     showSolvingIndicator?: boolean;
+    /** `SolvingIndicator`'s `placement`; `inline` puts it 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;

package/dist/components/compute/ParameterPresetManager.svelte

@@ -10,6 +10,7 @@
 	} from '../../schema/param-exporter';
 	import { Button, Input, Label, Textarea, Dialog, Callout, IssueList, toast } from '../primitives';
 	import { DEFAULT_PRESET_LABELS, type PresetLabels } from '../../types/presetLabels';
+	import { pickFile } from '../../utils/host-files';
 
 	interface Props {
 		schema: UISchema;
@@ -37,7 +38,6 @@
 	let showLoadDialog = $state(false);
 	let loadResult = $state<PresetLoadResult | null>(null);
 	let loadingPresetName = $state('');
-	let fileInputRef = $state<HTMLInputElement | null>(null);
 
 	let listedStates = $state<ParameterPreset[]>([]);
 	let isLoadingList = $state(false);
@@ -69,7 +69,7 @@
 		});
 
 		if (onSaveState) await onSaveState(state);
-		else exportStateAsJson(state);
+		else await exportStateAsJson(state);
 		showExportDialog = false;
 	}
 
@@ -86,19 +86,16 @@
 		}
 	}
 
-	async function handleImport(event: Event) {
-		const input = event.target as HTMLInputElement;
-		if (!input.files || input.files.length === 0) return;
+	async function importFromFile() {
+		// .sps is the pre-rename extension; files with it exist on users' drives, so keep accepting it.
+		const file = await pickFile({ accept: '.slvp,.sps' });
+		if (!file) return;
 
 		try {
-			const imported = await importStateFromJson(input.files[0]);
-			tryLoad(imported);
+			tryLoad(await importStateFromJson(file));
 		} catch (error) {
 			toast.error(t.loadImportError + (error as Error).message);
 		}
-
-		// Reset so re-picking the same file fires `change` again.
-		input.value = '';
 	}
 
 	function confirmLoad() {
@@ -132,8 +129,8 @@
 	}
 
 	function handleLoadClick() {
-		fileInputRef?.click();
 		showLoadDialog = false;
+		void importFromFile();
 	}
 
 	function selectListedState(preset: ParameterPreset) {
@@ -142,15 +139,6 @@
 	}
 </script>
 
-<!-- .sps is the pre-rename extension; files with it exist on users' drives, so keep accepting it. -->
-<input
-	bind:this={fileInputRef}
-	type="file"
-	accept=".slvp,.sps"
-	onchange={handleImport}
-	class="hidden"
-/>
-
 <!-- Save Dialog -->
 <Dialog.Root bind:open={showExportDialog}>
 	<Dialog.Content>

package/dist/components/compute/SolveMessages.svelte

@@ -31,6 +31,13 @@
 		onabort: () => void;
 		onconfirm: () => void;
 		ondiscard: () => void;
+		/**
+		 * See `createSolvingIndicator`. The live panel would only paint once the solve is over, so
+		 * an Esc hint stands in for it; the result's messages still show.
+		 */
+		freezesDuringSolve?: boolean;
+		/** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
+		placement?: 'floating' | 'inline';
 	}
 
 	let {
@@ -39,7 +46,9 @@
 		diagnostics = [],
 		onabort,
 		onconfirm,
-		ondiscard
+		ondiscard,
+		freezesDuringSolve = false,
+		placement = 'floating'
 	}: Props = $props();
 
 	const locale = getLocaleContext();
@@ -145,6 +154,7 @@
 	$effect(() => {
 		if (phase === 'live') {
 			finishing = false;
+			if (freezesDuringSolve) return;
 			const timer = setTimeout(() => {
 				revealed = true;
 				revealedAt = performance.now();
@@ -247,9 +257,22 @@
 
 <div class="sr-only" role="status" aria-live="polite">{announcement}</div>
 
-{#if visible}
+{#if freezesDuringSolve && view === 'live'}
+	<!-- Painted before the solve takes the thread; Abort could not be clicked until it ends. Inline,
+	     the solving chip carries the hint instead: a line here would resize the footer mid-solve. -->
+	{#if placement === 'floating'}
+		<p
+			class="bottom-4 text-xs fixed left-1/2 z-50 -translate-x-1/2 text-muted-foreground"
+			data-testid="solve-esc-hint"
+		>
+			{t.solveMessagesEscHint}
+		</p>
+	{/if}
+{:else if visible}
 	<div
-		class="bottom-4 p-3 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg border bg-background {view ===
+		class="p-3 border {placement === 'inline'
+			? 'mt-3 rounded-md bg-muted/40'
+			: 'bottom-4 shadow-lg w-lg fixed left-1/2 z-50 max-w-screen-inset -translate-x-1/2 rounded-lg bg-background'} {view ===
 		'blocked'
 			? 'border-destructive/50'
 			: ''}"

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

@@ -10,6 +10,13 @@ interface Props {
     onabort: () => void;
     onconfirm: () => void;
     ondiscard: () => void;
+    /**
+     * See `createSolvingIndicator`. The live panel would only paint once the solve is over, so
+     * an Esc hint stands in for it; the result's messages still show.
+     */
+    freezesDuringSolve?: boolean;
+    /** `floating` overlays the bottom centre; `inline` sits in the flow below the host's content. */
+    placement?: 'floating' | 'inline';
 }
 declare const SolveMessages: import("svelte").Component<Props, {}, "">;
 type SolveMessages = ReturnType<typeof SolveMessages>;

package/dist/components/layout/PageFooter.svelte

@@ -136,6 +136,8 @@
 			<FooterItemRenderer {item} />
 		{/each}
 
-		<p class="truncate">{copyrightLine}</p>
+		{#if copyrightLine}
+			<p class="truncate">{copyrightLine}</p>
+		{/if}
 	</div>
 </footer>

package/dist/components/layout/SideNav.svelte

@@ -13,6 +13,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { page } from '$app/state';
+	import ChevronsUpDown from '@lucide/svelte/icons/chevrons-up-down';
+	import Check from '@lucide/svelte/icons/check';
+	import * as DropdownMenu from '../primitives/dropdown-menu/index.js';
 
 	interface SideNavProps {
 		items: SideNavItem[];
@@ -41,10 +44,12 @@
 		if (item.match === 'prefix') return path.startsWith(item.href);
 		return path === item.href;
 	}
+
+	const activeItem = $derived(items.find(isActive));
 </script>
 
-<!-- On a phone a 240px column would leave the page ~150px, so the nav becomes a scrolling strip
-     above the content and the eyebrow, header and footer drop out. -->
+<!-- On a phone a 240px column would leave the page ~150px, so the nav collapses to one switcher
+     naming the current section; the header and footer drop out. -->
 <aside
 	class={`sm:h-full sm:w-60 sm:overflow-y-auto sm:border-b-0 flex w-full shrink-0 flex-col border-b border-border bg-background ${
 		border ? 'sm:border-r' : ''
@@ -64,31 +69,67 @@
 		</div>
 	{/if}
 
-	<nav
-		class="gap-1 py-2 sm:gap-0 sm:pt-0 sm:pb-4 sm:pr-2 sm:flex-1 sm:space-y-px sm:block sm:px-0 flex overflow-x-auto px-(--page-px)"
-	>
+	<div class="py-2 sm:hidden px-(--page-px)">
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<button
+						{...props}
+						class="min-h-11 gap-3 px-3 text-sm font-medium flex w-full items-center rounded-md border border-border bg-card text-left"
+					>
+						{#if activeItem?.icon}
+							{@const Icon = activeItem.icon}
+							<Icon class="size-4 shrink-0 opacity-70" />
+						{/if}
+						<span class="min-w-0 flex-1 truncate">
+							{#if eyebrow}<span class="text-muted-foreground">{eyebrow} /</span>{/if}
+							{activeItem?.label ?? ''}
+						</span>
+						<ChevronsUpDown class="size-4 shrink-0 opacity-60" />
+					</button>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content sideOffset={4}>
+				{#each items as item (item.href)}
+					{@const active = isActive(item)}
+					{@const Icon = item.icon}
+					<DropdownMenu.Item class="min-h-11">
+						{#snippet child({ props })}
+							<a href={item.href} aria-current={active ? 'page' : undefined} {...props}>
+								{#if Icon}<Icon class="size-4 opacity-70" />{/if}
+								<span class="flex-1">{item.label}</span>
+								{#if item.badge !== undefined}
+									<span class="font-mono text-2xs tabular-nums opacity-60">{item.badge}</span>
+								{/if}
+								{#if active}<Check class="size-4" aria-hidden="true" />{/if}
+							</a>
+						{/snippet}
+					</DropdownMenu.Item>
+				{/each}
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</div>
+
+	<nav class="pb-4 pr-2 sm:block hidden flex-1 space-y-px">
 		{#each items as item (item.href)}
 			{@const active = isActive(item)}
 			{@const Icon = item.icon}
 			<a
 				href={item.href}
-				class={`group gap-2 py-2 pr-2.5 sm:py-1.5 sm:w-full relative flex shrink-0 items-center text-left transition-colors ${
+				aria-current={active ? 'page' : undefined}
+				class={`group gap-2 py-1.5 pr-2.5 relative flex w-full items-center text-left transition-colors ${
 					active
-						? 'pl-2.5 sm:pl-4 sm:rounded-l-none sm:rounded-r-md rounded-md bg-accent text-accent-foreground'
-						: 'sm:mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+						? 'pl-4 rounded-r-md bg-accent text-accent-foreground'
+						: 'mx-2 pl-2.5 rounded-md text-muted-foreground hover:bg-muted/60 hover:text-foreground'
 				}`}
 			>
 				{#if active}
-					<span
-						class="left-0 top-0 bottom-0 w-0.75 sm:block absolute hidden bg-primary"
-						aria-hidden="true"
-					></span>
+					<span class="left-0 top-0 bottom-0 w-0.75 absolute bg-primary" aria-hidden="true"></span>
 				{/if}
 				{#if Icon}
 					<Icon class="h-3.5 w-3.5 shrink-0 opacity-70" />
 				{/if}
-				<span class="text-sm font-medium sm:flex-1 sm:truncate whitespace-nowrap">{item.label}</span
-				>
+				<span class="text-sm font-medium flex-1 truncate">{item.label}</span>
 				{#if item.badge !== undefined}
 					<span class="font-mono shrink-0 text-2xs tabular-nums opacity-60">{item.badge}</span>
 				{/if}

package/dist/components/preview/ChartOutput.svelte

@@ -54,6 +54,9 @@
 		return window.Plotly;
 	}
 
+	// Some embedded WebViews (WKWebView in the Rhino panel) ship without the Fullscreen API at all.
+	const fullscreenSupported = typeof document !== 'undefined' && !!document.fullscreenEnabled;
+
 	function toggleFullscreen() {
 		if (!wrapperEl) return;
 		if (!document.fullscreenElement) {
@@ -211,19 +214,21 @@
 				</div>
 			{/if}
 
-			<button
-				onclick={toggleFullscreen}
-				disabled={loading}
-				title={isFullscreen ? t.exitFullscreen : t.fullscreen}
-				aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
-				class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
-			>
-				{#if isFullscreen}
-					<Minimize size={14} />
-				{:else}
-					<Maximize size={14} />
-				{/if}
-			</button>
+			{#if fullscreenSupported}
+				<button
+					onclick={toggleFullscreen}
+					disabled={loading}
+					title={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					aria-label={isFullscreen ? t.exitFullscreen : t.fullscreen}
+					class="rounded p-1.5 backdrop-blur-sm flex items-center border border-border bg-background/80 text-foreground transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+				>
+					{#if isFullscreen}
+						<Minimize size={14} />
+					{:else}
+						<Maximize size={14} />
+					{/if}
+				</button>
+			{/if}
 		</div>
 	{/if}
 </div>

package/dist/components/preview/Group.svelte

@@ -69,7 +69,7 @@
 	</div>
 {/snippet}
 
-<section class="shadow-xs rounded-xl bg-card">
+<section class="shadow-xs rounded-xl border bg-card">
 	{#if flat}
 		<div class="p-4">
 			{@render grid()}
@@ -160,6 +160,11 @@
 		grid-column: span var(--span) / span var(--span);
 	}
 
+	/* A control with no label above it lines up with the controls beside it, not their labels. */
+	.grid-cell:has(:global([data-control-line])) {
+		align-self: end;
+	}
+
 	/* An empty full-width row: the two row gaps around it already read as a break. */
 	.grid-break {
 		grid-column: 1 / -1;

package/dist/components/preview/ImageOutput.svelte

@@ -62,7 +62,9 @@
 
 	const cfg = $derived(item.config ?? {});
 	const allowDownload = $derived(cfg.allowDownload ?? true);
-	const allowFullscreen = $derived(cfg.allowFullscreen ?? true);
+	// Some embedded WebViews (WKWebView in the Rhino panel) ship without the Fullscreen API at all.
+	const fullscreenSupported = typeof document !== 'undefined' && !!document.fullscreenEnabled;
+	const allowFullscreen = $derived((cfg.allowFullscreen ?? true) && fullscreenSupported);
 	const backgroundColor = $derived(cfg.backgroundColor);
 
 	let wrapperEl = $state<HTMLDivElement | null>(null);