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

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,15 +44,19 @@
 		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 collapses to one switcher
+     naming the current section; the header and footer drop out. -->
 <aside
-	class={`w-60 flex h-full shrink-0 flex-col overflow-y-auto bg-background ${
-		border ? 'border-r border-border' : ''
+	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' : ''
 	} ${className}`}
 >
 	{#if eyebrow}
-		<div class="px-4 pt-5 pb-3">
+		<div class="px-4 pt-5 pb-3 sm:block hidden">
 			<span class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
 				{eyebrow}
 			</span>
@@ -57,17 +64,59 @@
 	{/if}
 
 	{#if header}
-		<div class="px-3 pb-3">
+		<div class="px-3 pb-3 sm:block hidden">
 			{@render header()}
 		</div>
 	{/if}
 
-	<nav class="pb-4 pr-2 flex-1 space-y-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}
+				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-4 rounded-r-md bg-accent text-accent-foreground'
@@ -82,14 +131,14 @@
 				{/if}
 				<span class="text-sm font-medium flex-1 truncate">{item.label}</span>
 				{#if item.badge !== undefined}
-					<span class="font-mono shrink-0 text-[11px] tabular-nums opacity-60">{item.badge}</span>
+					<span class="font-mono shrink-0 text-2xs tabular-nums opacity-60">{item.badge}</span>
 				{/if}
 			</a>
 		{/each}
 	</nav>
 
 	{#if footer}
-		<div class="px-3 py-3 border-t border-border/60">
+		<div class="px-3 py-3 sm:block hidden border-t border-border/60">
 			{@render footer()}
 		</div>
 	{/if}

package/dist/components/preview/ChartOutput.svelte

@@ -3,6 +3,8 @@
 	import { onMount } from 'svelte';
 	import { Loader, Maximize, Minimize } from '@lucide/svelte';
 	import { loadScript } from '../../utils/loadScript';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { formatMessage } from '../../i18n/messages';
 
 	interface Props {
 		item: OutputChartLayoutItem;
@@ -11,6 +13,9 @@
 
 	let { item: _item, value }: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
 
 	type PlotlyTrace = Record<string, unknown>;
@@ -40,20 +45,27 @@
 		// @ts-expect-error — Plotly is loaded dynamically onto window
 		if (window.Plotly) return window.Plotly;
 
-		await loadScript('https://cdn.plot.ly/plotly-3.4.0.min.js', { crossOrigin: 'anonymous' });
+		// Pinned by hash: the plugin's web UI runs this on the origin that holds its bridge secret.
+		await loadScript('https://cdn.plot.ly/plotly-3.4.0.min.js', {
+			crossOrigin: 'anonymous',
+			integrity: 'sha384-pFOQ7loGBChmUyS4Tszy+he8OWeYkwTFjc2xii4aJUWWiGwf2u2OEc04T5iDRpMp'
+		});
 		// @ts-expect-error — Plotly is loaded dynamically onto window
 		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) {
 			wrapperEl.requestFullscreen().catch((err) => {
-				error = `Fullscreen unavailable: ${err.message}`;
+				error = formatMessage(t.fullscreenUnavailable, { error: err.message });
 			});
 		} else {
 			document.exitFullscreen().catch((err) => {
-				error = `Exit fullscreen failed: ${err.message}`;
+				error = formatMessage(t.exitFullscreenFailed, { error: err.message });
 			});
 		}
 	}
@@ -129,7 +141,7 @@
 				...figData.config
 			});
 		} catch (e) {
-			error = e instanceof Error ? e.message : 'Failed to render chart';
+			error = e instanceof Error ? e.message : t.chartRenderFailed;
 		} finally {
 			loading = false;
 		}
@@ -183,19 +195,14 @@
 >
 	{#if error}
 		<div class="px-4 py-3 text-sm text-destructive">{error}</div>
-	{:else if !figData && value}
-		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Receiving chart data...</div>
 	{:else if !figData}
-		<div class="px-4 py-8 text-sm text-center text-muted-foreground">Waiting for chart data...</div>
+		<!-- The layout hides this output while it has no data, so this is data that doesn't parse yet. -->
+		<div class="px-4 py-8 text-sm text-center text-muted-foreground">{t.chartReceiving}</div>
 	{:else}
-		<div
-			bind:this={containerEl}
-			class="w-full"
-			style="height: {isFullscreen ? '100vh' : '380px'};"
-		></div>
+		<div bind:this={containerEl} class="w-full {isFullscreen ? 'h-dvh' : 'h-95'}"></div>
 
 		<div
-			class="gap-1 left-2 top-2 absolute z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 {isFullscreen
+			class="gap-1 left-2 top-2 absolute z-10 flex items-center opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100 {isFullscreen
 				? 'opacity-100'
 				: ''}"
 		>
@@ -207,18 +214,21 @@
 				</div>
 			{/if}
 
-			<button
-				onclick={toggleFullscreen}
-				disabled={loading}
-				title={isFullscreen ? 'Exit fullscreen' : '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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '@selvajs/schemas';
 	import type { Snippet } from 'svelte';
-	import * as Card from '../primitives/card';
 	import { ChevronDown } from '@lucide/svelte';
 	import { buildVisibilityMap, itemKey } from '../../schema/visibility-rules';
 
@@ -20,7 +19,7 @@
 			]
 		>;
 		outputSnippet: Snippet<[layoutItem: OutputLayoutItem]>;
-		/** When true, renders items flat without the Card wrapper, header, or collapse toggle. */
+		/** When true, renders items without the header or collapse toggle. */
 		flat?: boolean;
 	}
 
@@ -37,110 +36,99 @@
 		flat = false
 	}: Props = $props();
 
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			onToggle();
-		}
-	}
-
-	// One visibility evaluation per item per render; columnStarts and gridItem both read it.
 	const visibilityMap = $derived(buildVisibilityMap(items, values));
 
-	// Hidden items must not consume a slot here, because gridItem skips them entirely —
-	// counting them would offset every following item's column.
-	const columnStarts = $derived.by(() => {
-		const positions: number[] = [];
-		let col = 0;
-		for (const item of items) {
-			if (item.type === 'linebreak') {
-				positions.push(0);
-				col = 0;
-				continue;
-			}
-			const visibility = visibilityMap[itemKey(item)];
-			if (!visibility.visible) {
-				positions.push(0);
-				continue;
-			}
-			const span = Math.min(Math.max(1, item.span ?? 1), columns);
-			if (col + span > columns) col = 0;
-			positions.push(col);
-			col = (col + span) % columns;
-		}
-		return positions;
-	});
+	const uid = $props.id();
+	const descriptionId = `${uid}-description`;
+
+	// Below this a label and its control stop fitting side by side, so a wide group
+	// sheds columns as its panel narrows instead of squeezing every input.
+	const MIN_COLUMN_WIDTH = 160;
+	const COLUMN_GAP = 16;
+
+	let gridWidth = $state(0);
+	const effectiveColumns = $derived(
+		gridWidth === 0
+			? columns
+			: Math.max(
+					1,
+					Math.min(columns, Math.floor((gridWidth + COLUMN_GAP) / (MIN_COLUMN_WIDTH + COLUMN_GAP)))
+				)
+	);
 </script>
 
-{#if flat}
-	<div class="p-6">
-		<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-			{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-				{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
-			{/each}
-		</div>
+{#snippet grid()}
+	<div
+		class="schema-grid"
+		style="--schema-cols: {effectiveColumns}; --column-gap: {COLUMN_GAP}px;"
+		bind:clientWidth={gridWidth}
+	>
+		{#each items as layoutItem (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+			{@render gridItem(layoutItem)}
+		{/each}
 	</div>
-{:else}
-	<Card.Root class="gap-0 py-0 pt-0 overflow-hidden">
-		<Card.Header
-			class="pt-4 pb-4! cursor-pointer border-b border-border bg-muted transition-colors select-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
-			role="button"
-			tabindex={0}
-			aria-expanded={!collapsed}
-			onclick={onToggle}
-			onkeydown={handleKeydown}
-		>
-			<Card.Title>{label}</Card.Title>
-			{#if description}
-				<Card.Description>{description}</Card.Description>
-			{/if}
-			<Card.Action>
+{/snippet}
+
+<section class="shadow-xs rounded-xl border bg-card">
+	{#if flat}
+		<div class="p-4">
+			{@render grid()}
+		</div>
+	{:else}
+		<!-- The host's page owns the h1 and the panel holds the h2. The description sits outside the
+		     heading's button, so the heading and the button are named by the label alone. -->
+		<h3>
+			<button
+				type="button"
+				class="gap-3 px-4 pt-3.5 flex w-full items-start text-left outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset {description
+					? 'pb-0'
+					: 'pb-3.5'}"
+				aria-expanded={!collapsed}
+				aria-describedby={description ? descriptionId : undefined}
+				onclick={onToggle}
+			>
+				<span class="min-w-0 text-base font-semibold leading-snug flex-1 text-foreground"
+					>{label}</span
+				>
 				<ChevronDown
-					class="h-4 w-4 text-muted-foreground transition-transform duration-200 {collapsed
-						? ''
-						: 'rotate-180'}"
+					class="mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 {collapsed
+						? '-rotate-90'
+						: ''}"
 				/>
-			</Card.Action>
-		</Card.Header>
-		<div class="content-wrapper" class:collapsed>
+			</button>
+		</h3>
+		{#if description}
+			<p
+				id={descriptionId}
+				class="pl-4 pr-11 pt-0.5 pb-3.5 text-xs leading-snug text-muted-foreground"
+			>
+				{description}
+			</p>
+		{/if}
+		<div class="content-wrapper" class:collapsed inert={collapsed}>
 			<div class="content-inner">
-				<Card.Content class="p-6">
-					<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-						{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-							{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
-						{/each}
-					</div>
-				</Card.Content>
+				<div class="px-4 pt-1 pb-5">
+					{@render grid()}
+				</div>
 			</div>
 		</div>
-	</Card.Root>
-{/if}
+	{/if}
+</section>
 
-{#snippet gridItem(layoutItem: LayoutItem, cols: number, isFirstInRow: boolean)}
+{#snippet gridItem(layoutItem: LayoutItem)}
 	{#if layoutItem.type === 'linebreak'}
-		<div style="grid-column: 1 / -1" class="h-px bg-border" aria-hidden="true"></div>
+		<div class="grid-break" aria-hidden="true"></div>
 	{:else}
 		{@const visibility = visibilityMap[itemKey(layoutItem)]}
-		{@const span = Math.min(Math.max(1, layoutItem.span ?? 1), cols)}
+		{@const span = Math.min(Math.max(1, layoutItem.span ?? 1), effectiveColumns)}
 		{#if visibility.visible}
-			{#if layoutItem.type === 'input'}
-				<div
-					class="grid-cell min-w-0 flex items-center"
-					class:opacity-50={visibility.disabled}
-					class:col-divider={!isFirstInRow && cols > 1}
-					style="grid-column: span {span} / span {span}"
-				>
+			<div class="grid-cell min-w-0" class:opacity-50={visibility.disabled} style="--span: {span}">
+				{#if layoutItem.type === 'input'}
 					{@render inputSnippet(layoutItem, visibility)}
-				</div>
-			{:else if layoutItem.type === 'output'}
-				<div
-					class="grid-cell"
-					class:col-divider={!isFirstInRow && cols > 1}
-					style="grid-column: span {span} / span {span}"
-				>
+				{:else if layoutItem.type === 'output'}
 					{@render outputSnippet(layoutItem)}
-				</div>
-			{/if}
+				{/if}
+			</div>
 		{/if}
 	{/if}
 {/snippet}
@@ -158,27 +146,28 @@
 
 	.content-inner {
 		min-height: 0;
+		overflow: hidden;
 	}
 
 	.schema-grid {
+		display: grid;
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
+		gap: 1rem var(--column-gap);
+		align-items: start;
+	}
+
+	.grid-cell {
+		grid-column: span var(--span) / span var(--span);
 	}
 
-	/* Vertical divider painted in the column gap. `gap-6` is 24px, so a 12px
-	   negative margin + 12px padding centres the 1px line in the gutter. */
-	.col-divider {
-		border-left: 1px solid var(--border);
-		padding-left: 12px;
-		margin-left: -12px;
+	/* 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;
 	}
 
-	/* When the container collapses the grid to 1 visual column, the items are
-	   stacked and the divider would float on the left of every row. Hide it. */
-	@container (max-width: 320px) {
-		.col-divider {
-			border-left: 0;
-			padding-left: 0;
-			margin-left: 0;
-		}
+	/* An empty full-width row: the two row gaps around it already read as a break. */
+	.grid-break {
+		grid-column: 1 / -1;
+		margin-block: -0.25rem;
 	}
 </style>

package/dist/components/preview/Group.svelte.d.ts

@@ -17,7 +17,7 @@ interface Props {
         }
     ]>;
     outputSnippet: Snippet<[layoutItem: OutputLayoutItem]>;
-    /** When true, renders items flat without the Card wrapper, header, or collapse toggle. */
+    /** When true, renders items without the header or collapse toggle. */
     flat?: boolean;
 }
 declare const Group: import("svelte").Component<Props, {}, "">;

package/dist/components/preview/HelpButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { HelpCircle } from '@lucide/svelte';
+	import * as Dialog from '../primitives/dialog';
+
+	interface Props {
+		/** The field's label: the dialog title and the button's accessible name. */
+		label: string;
+		description: string;
+	}
+
+	let { label, description }: Props = $props();
+</script>
+
+<!-- Every field has one, so a column of them is noise. Where a fine pointer can hover, it shows
+     only while the pointer or focus is inside the enclosing `group/field`; touch keeps it visible.
+     The box is 24px, touch gets a 44px hit area, and the negative margin keeps the label row from
+     growing. -->
+<Dialog.Root>
+	<Dialog.Trigger>
+		{#snippet child({ props })}
+			<button
+				{...props}
+				class="-m-1 size-6 pointer-coarse:after:-inset-2.5 relative flex shrink-0 cursor-help items-center justify-center rounded-sm text-muted-foreground transition hover:text-foreground pointer-coarse:after:absolute pointer-fine:opacity-0 pointer-fine:group-focus-within/field:opacity-100 pointer-fine:group-hover/field:opacity-100 pointer-fine:focus-visible:opacity-100"
+				aria-label={label}
+			>
+				<HelpCircle class="size-3.5" />
+			</button>
+		{/snippet}
+	</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>{label}</Dialog.Title>
+			<Dialog.Description>{description}</Dialog.Description>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/components/preview/HelpButton.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    /** The field's label: the dialog title and the button's accessible name. */
+    label: string;
+    description: string;
+}
+declare const HelpButton: import("svelte").Component<Props, {}, "">;
+type HelpButton = ReturnType<typeof HelpButton>;
+export default HelpButton;