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

package/dist/utils/file-download.js

@@ -1,6 +1,7 @@
-import { downloadFileDataByRoot } from '@selvajs/compute/core';
+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',
@@ -20,23 +21,10 @@ export const MIME_BY_EXT = {
 function saveSingleFile(file) {
     const ext = (file.fileType ?? '').toLowerCase();
     const mime = MIME_BY_EXT[ext] ?? 'application/octet-stream';
-    let blob;
-    if (file.isBase64Encoded) {
-        const binary = atob(file.data);
-        const bytes = new Uint8Array(binary.length);
-        for (let i = 0; i < binary.length; i++)
-            bytes[i] = binary.charCodeAt(i);
-        blob = new Blob([bytes], { type: mime });
-    }
-    else {
-        blob = new Blob([file.data], { 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);
+    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 });
+    return saveBlob(blob, `${file.fileName}${file.fileType ?? ''}`);
 }
 export async function downloadFiles(fileData, fileName = 'grasshopper-output') {
     try {
@@ -45,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.7",
+  "version": "6.6.0-beta.9",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -59,10 +59,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.186.1",
-    "@selvajs/compute": "^4.3.0-beta.1",
-    "@selvajs/schemas": "^5.3.0-beta.0",
-    "@selvajs/visualization": "^1.6.0-beta.0",
-    "@selvajs/solve": "^1.3.0-beta.3"
+    "@selvajs/compute": "^5.0.0-beta.4",
+    "@selvajs/solve": "^2.0.0-beta.6",
+    "@selvajs/schemas": "^5.3.0-beta.1",
+    "@selvajs/visualization": "^1.6.0-beta.2"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -90,11 +90,11 @@
     "svelte": "5.57.1",
     "tailwind-variants": "^3.3.1",
     "vitest": "^5.0.2",
-    "@selvajs/compute": "4.3.0-beta.1",
+    "@selvajs/compute": "5.0.0-beta.4",
     "@selvajs/config": "0.0.4",
-    "@selvajs/visualization": "1.6.0-beta.0",
-    "@selvajs/solve": "1.3.0-beta.3",
-    "@selvajs/schemas": "5.3.0-beta.0"
+    "@selvajs/schemas": "5.3.0-beta.1",
+    "@selvajs/visualization": "1.6.0-beta.2",
+    "@selvajs/solve": "2.0.0-beta.6"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

package/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/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 '$lib/components/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/src/lib/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/src/lib/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/src/lib/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);