@selvajs/ui 6.6.0-beta.9 → 7.0.1-beta.0

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

@@ -1,19 +1,19 @@
 <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';
+	import { ChevronLeft, ChevronUp, Download, Ellipsis, Upload } from '@lucide/svelte';
 	import type { ThreeViewer } from '@selvajs/visualization/render';
 	import Viewer, { type ViewerConfig } from '../viewer/Viewer.svelte';
 	import CalculateButton from '../primitives/CalculateButton.svelte';
 	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';
@@ -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,
@@ -140,16 +155,37 @@
 	// With several tabs the first tab's name would mislabel whichever one is showing.
 	const drawerLabel = $derived(leftTabs.length === 1 ? leftTabs[0].label : t.parametersTab);
 
+	// A phone on its side is wide enough for the desktop columns but far too short for them, and a
+	// bottom drawer would leave the model a strip. It gets the phone layout with the drawer moved to
+	// the right edge instead.
+	let sideSheet = $state(false);
+
 	$effect(() => {
-		const mqMobile = window.matchMedia('(max-width: 639px)');
+		const mqNarrow = window.matchMedia('(max-width: 639px)');
+		const mqPhoneLandscape = window.matchMedia(
+			'(pointer: coarse) and (orientation: landscape) and (max-height: 500px)'
+		);
 		function update() {
-			isMobile = mqMobile.matches;
+			sideSheet = mqPhoneLandscape.matches;
+			isMobile = mqNarrow.matches || sideSheet;
 		}
 		update();
-		mqMobile.addEventListener('change', update);
-		return () => mqMobile.removeEventListener('change', update);
+		mqNarrow.addEventListener('change', update);
+		mqPhoneLandscape.addEventListener('change', update);
+		return () => {
+			mqNarrow.removeEventListener('change', update);
+			mqPhoneLandscape.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);
@@ -166,30 +202,39 @@
 		await onLoadValues?.(loadedValues);
 	}
 
-	let touchStartY = 0;
+	let touchStart = { x: 0, y: 0 };
 
+	// The side sheet beside the model has no half state: it is open or closed.
 	function stepDrawer(by: number) {
+		if (sideSheet) {
+			drawer = by > 0 ? 'full' : 'closed';
+			return;
+		}
 		const index = DRAWER_STATES.indexOf(drawer) + by;
 		drawer = DRAWER_STATES[Math.max(0, Math.min(DRAWER_STATES.length - 1, index))];
 	}
 
 	function onDrawerTouchStart(e: TouchEvent) {
-		touchStartY = e.touches[0].clientY;
+		touchStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
 	}
 
+	// Toward the open side opens: up for the bottom drawer, left for the side sheet.
 	function onDrawerTouchEnd(e: TouchEvent) {
-		const deltaY = e.changedTouches[0].clientY - touchStartY;
+		const delta = sideSheet
+			? e.changedTouches[0].clientX - touchStart.x
+			: e.changedTouches[0].clientY - touchStart.y;
 		const SWIPE_THRESHOLD = 40;
-		if (Math.abs(deltaY) > SWIPE_THRESHOLD) {
+		if (Math.abs(delta) > SWIPE_THRESHOLD) {
 			// Suppresses the click a short swipe can still end in, which would step the drawer twice.
 			e.preventDefault();
-			stepDrawer(deltaY < 0 ? 1 : -1);
+			stepDrawer(delta < 0 ? 1 : -1);
 		}
 	}
 
-	// A tap walks closed → half → full → closed.
+	// A tap walks closed → half → full → closed; the side sheet just toggles.
 	function onDrawerHandleClick() {
-		drawer = drawer === 'full' ? 'closed' : DRAWER_STATES[DRAWER_STATES.indexOf(drawer) + 1];
+		if (sideSheet) drawer = drawer === 'closed' ? 'full' : 'closed';
+		else drawer = drawer === 'full' ? 'closed' : DRAWER_STATES[DRAWER_STATES.indexOf(drawer) + 1];
 	}
 </script>
 
@@ -255,9 +300,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 +311,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 +337,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 +356,17 @@
 
 <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}
+	class:side-sheet={isMobile && sideSheet}
+	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 +374,22 @@
 				<Viewer
 					{meshes}
 					bind:isFullscreen={isViewerFullscreen}
-					{isSolving}
-					drawerOpen={drawer === 'full'}
+					drawerOpen={!sideSheet && 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 bg-background shadow-sheet drawer-{drawer} {sideSheet
+					? 'rounded-l-xl border-l'
+					: 'rounded-t-xl border-t'}"
 			>
 				<!-- Named by its visible label; aria-expanded carries the open/closed state. -->
 				<button
@@ -346,42 +400,57 @@
 					aria-expanded={drawer !== 'closed'}
 				>
 					<div class="drawer-pill"></div>
-					<span class="text-sm font-medium ml-2 text-foreground">{drawerLabel}</span>
-					<ChevronUp
-						size={16}
-						class="ml-auto text-muted-foreground transition-transform duration-300 {drawer ===
-						'full'
-							? 'rotate-180'
-							: ''}"
-					/>
+					<span class="drawer-label text-sm font-medium text-foreground">{drawerLabel}</span>
+					{#if sideSheet}
+						<ChevronLeft
+							size={16}
+							class="text-muted-foreground transition-transform duration-300 {drawer !== 'closed'
+								? 'rotate-180'
+								: ''}"
+						/>
+					{:else}
+						<ChevronUp
+							size={16}
+							class="ml-auto text-muted-foreground transition-transform duration-300 {drawer ===
+							'full'
+								? 'rotate-180'
+								: ''}"
+						/>
+					{/if}
 				</button>
 
-				<!-- Inert while closed: the fields are clipped out of view, and tabbing into them
+				<div class="drawer-body">
+					<!-- 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-2 pb-4">
-						{#if hasLeftPanel}
-							{@render panelContent(hasRightPanel ? 'left' : undefined, requestedLeftTabId, false)}
-						{/if}
-						{#if hasRightPanel}
-							<!-- Decorative: the section below names itself with a heading. -->
-							<div class="my-4 gap-2 flex items-center" aria-hidden="true">
-								<div class="h-px flex-1 bg-border"></div>
-								<span class="text-xs font-medium px-1 text-muted-foreground">
-									{rightTabs[0]?.label ?? t.moreTab}
-								</span>
-								<div class="h-px flex-1 bg-border"></div>
-							</div>
-							{@render panelContent('right', requestedRightTabId, false)}
-						{/if}
+					<div class="drawer-content" inert={drawer === 'closed'}>
+						<div class="px-2 pb-4">
+							{#if hasLeftPanel}
+								{@render panelContent(
+									hasRightPanel ? 'left' : undefined,
+									requestedLeftTabId,
+									false
+								)}
+							{/if}
+							{#if hasRightPanel}
+								<!-- Decorative: the section below names itself with a heading. -->
+								<div class="my-4 gap-2 flex items-center" aria-hidden="true">
+									<div class="h-px flex-1 bg-border"></div>
+									<span class="text-xs font-medium px-1 text-muted-foreground">
+										{rightTabs[0]?.label ?? t.moreTab}
+									</span>
+									<div class="h-px flex-1 bg-border"></div>
+								</div>
+								{@render panelContent('right', requestedRightTabId, false)}
+							{/if}
+						</div>
 					</div>
-				</div>
 
-				{@render drawerFooter(drawer === 'closed')}
+					{@render drawerFooter(drawer === 'closed')}
+				</div>
 			</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 +470,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 +497,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 +510,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 +522,7 @@
 					<Resizable.Handle
 						withHandle
 						line={false}
+						class="translate-x-1.5 z-20"
 						data-collapsed={leftCollapsed}
 						onclick={() => {
 							if (leftCollapsed) leftPaneRef?.expand();
@@ -462,30 +531,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 +569,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 +595,6 @@
 			{/if}
 		</div>
 	{/if}
-
-	{#if solvingIndicatorPlacement === 'floating'}
-		<SolvingIndicator show={showSolvingIndicator} />
-	{/if}
 </main>
 
 <!-- The save, load and validation dialogs; the footer's menu opens them. -->
@@ -592,6 +660,12 @@
 		bottom: var(--drawer-half-h);
 	}
 
+	/* The viewer's own minimum height is for a page that scrolls; here the region sets it, and
+	   anything taller would run under the drawer and take the viewer's dock with it. */
+	.viewer-region > :global(*) {
+		min-height: 0;
+	}
+
 	.drawer-container {
 		position: absolute;
 		bottom: 0;
@@ -645,6 +719,77 @@
 		opacity: 0.4;
 	}
 
+	.drawer-body {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.drawer-label {
+		margin-left: 0.5rem;
+	}
+
+	/* Phone on its side: the drawer becomes a sheet on the right, its handle a strip down its edge. */
+	.side-sheet {
+		--sheet-closed-w: 3.25rem;
+		/* vw, not %: the drawer body resolves this against the sheet, not the layout. */
+		--sheet-open-w: min(22rem, 55vw);
+	}
+
+	.side-sheet .viewer-region {
+		inset: 0 var(--sheet-closed-w) 0 0;
+	}
+
+	.side-sheet .viewer-region-raised {
+		right: var(--sheet-open-w);
+	}
+
+	.side-sheet .drawer-container {
+		top: 0;
+		left: auto;
+		height: auto;
+		flex-direction: row;
+		transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	.side-sheet .drawer-closed {
+		width: var(--sheet-closed-w);
+	}
+
+	.side-sheet .drawer-half,
+	.side-sheet .drawer-full {
+		width: var(--sheet-open-w);
+	}
+
+	.side-sheet .drawer-handle-bar {
+		width: var(--sheet-closed-w);
+		height: auto;
+		padding: 0 0 0 0.75rem;
+		flex-direction: column;
+		justify-content: center;
+		gap: 0.75rem;
+	}
+
+	.side-sheet .drawer-pill {
+		top: 50%;
+		left: 8px;
+		transform: translateY(-50%);
+		width: 4px;
+		height: 2.5rem;
+	}
+
+	.side-sheet .drawer-label {
+		margin-left: 0;
+		writing-mode: vertical-rl;
+		transform: rotate(180deg);
+	}
+
+	/* Holds its open width while the sheet slides, so the fields don't reflow on every frame. */
+	.side-sheet .drawer-body {
+		min-width: calc(var(--sheet-open-w) - var(--sheet-closed-w));
+	}
+
 	.drawer-content {
 		flex: 1;
 		overflow-y: auto;

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. */

package/src/lib/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}