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

package/dist/components/layout/AppShell.svelte

@@ -74,14 +74,16 @@
 
 	const rootClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-col h-screen overflow-hidden bg-background ${className}`
-			: `flex flex-col min-h-screen bg-background ${className}`
+			? // dvh, not vh: iOS sizes 100vh to the viewport without its toolbar, which hides the
+				// footer and the phone drawer's handle behind the toolbar.
+				`flex flex-col h-dvh overflow-hidden bg-background ${className}`
+			: `flex flex-col min-h-dvh bg-background ${className}`
 	);
 
 	const bodyShellClass = $derived(
 		_mode === 'fixed'
-			? `flex flex-1 min-h-0 ${sidenav ? 'flex-row' : 'flex-col'} ${bodyClass}`.trim()
-			: `flex-1 ${sidenav ? 'flex flex-row' : ''} ${bodyClass}`.trim()
+			? `flex flex-1 min-h-0 ${sidenav ? 'flex-col sm:flex-row' : 'flex-col'} ${bodyClass}`.trim()
+			: `flex-1 ${sidenav ? 'flex flex-col sm:flex-row' : ''} ${bodyClass}`.trim()
 	);
 
 	const bodyShellStyle = '';
@@ -92,13 +94,15 @@
 	const sidenavWrapClass = $derived(
 		_mode === 'fixed'
 			? 'flex shrink-0'
-			: 'flex shrink-0 self-start sticky top-(--header-h) max-h-[calc(100svh-var(--header-h))]'
+			: 'flex shrink-0 sm:self-start sm:sticky sm:top-(--header-h) sm:max-h-(--below-header-h)'
 	);
 
 	// The sticky wrapper is only as tall as its content, so in scroll mode the divider comes
 	// from the main column's left edge — that one spans the full body height.
 	const mainClass = $derived(
-		_mode === 'fixed' ? 'flex-1 overflow-y-auto' : 'flex-1 overflow-y-auto border-l border-border'
+		_mode === 'fixed'
+			? 'min-h-0 flex-1 overflow-y-auto'
+			: 'min-w-0 flex-1 overflow-y-auto border-border sm:border-l'
 	);
 </script>
 

package/dist/components/layout/PageFooter.svelte

@@ -5,6 +5,8 @@
 	import { useFooter } from '../../contexts/footerContext.svelte';
 	import ComputeMessagesDialog from '../compute/ComputeMessagesDialog.svelte';
 	import FooterItemRenderer from './FooterItemRenderer.svelte';
+	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { formatCount, formatMessage } from '../../i18n/messages';
 
 	interface Props {
 		errors?: string[];
@@ -26,6 +28,9 @@
 		children
 	}: Props = $props();
 
+	const locale = getLocaleContext();
+	const t = $derived(locale.messages);
+
 	let footerStore = (() => {
 		try {
 			return useFooter();
@@ -66,16 +71,15 @@
 	const hasMessages = $derived(totalCount > 0);
 
 	const copyrightLine = $derived(
-		footerText
-			? footerText.replace('{name}', copyrightName).replace('{year}', String(_currentYear))
-			: `by ${copyrightName} © ${_currentYear}`
+		formatMessage(footerText ?? t.copyright, { name: copyrightName, year: _currentYear })
 	);
 </script>
 
+<!-- One line at any width: the message counts keep their size and the copyright truncates. -->
 <footer
-	class="px-4 gap-4 text-xs h-7 flex shrink-0 items-center justify-between border-t border-border bg-background text-muted-foreground select-none"
+	class="px-4 gap-4 text-xs h-7 flex shrink-0 items-center justify-between border-t border-border bg-background whitespace-nowrap text-muted-foreground select-none"
 >
-	<div class="gap-4 flex items-center">
+	<div class="gap-4 flex shrink-0 items-center">
 		{#each leftItems as item (item.id)}
 			<FooterItemRenderer {item} />
 		{/each}
@@ -90,11 +94,13 @@
 							: warningCount > 0
 								? 'text-warning hover:bg-warning/10'
 								: 'hover:bg-muted'}"
-						title={`${totalCount} ${totalCount === 1 ? 'message' : 'messages'} from the last solve`}
+						title={formatCount(totalCount, t.lastSolveMessagesOne, t.lastSolveMessagesOther)}
 					>
 						{#if errorCount > 0}
 							<CircleAlert class="h-3.5 w-3.5" />
-							<span class="font-medium">{errorCount} Error{errorCount !== 1 ? 's' : ''}</span>
+							<span class="font-medium"
+								>{formatCount(errorCount, t.errorCountOne, t.errorCountOther)}</span
+							>
 						{/if}
 
 						{#if warningCount > 0}
@@ -102,12 +108,16 @@
 								<span class="text-border">•</span>
 							{/if}
 							<TriangleAlert class="h-3.5 w-3.5" />
-							<span class="font-medium">{warningCount} Warning{warningCount !== 1 ? 's' : ''}</span>
+							<span class="font-medium"
+								>{formatCount(warningCount, t.warningCountOne, t.warningCountOther)}</span
+							>
 						{/if}
 
 						{#if errorCount === 0 && warningCount === 0}
 							<Info class="h-3.5 w-3.5" />
-							<span class="font-medium">{remarkCount} Note{remarkCount !== 1 ? 's' : ''}</span>
+							<span class="font-medium"
+								>{formatCount(remarkCount, t.noteCountOne, t.noteCountOther)}</span
+							>
 						{/if}
 					</div>
 				{/snippet}
@@ -121,11 +131,13 @@
 		{/if}
 	</div>
 
-	<div class="gap-4 ml-auto flex items-center">
+	<div class="gap-4 min-w-0 ml-auto flex items-center">
 		{#each rightItems as item (item.id)}
 			<FooterItemRenderer {item} />
 		{/each}
 
-		<p>{copyrightLine}</p>
+		{#if copyrightLine}
+			<p class="truncate">{copyrightLine}</p>
+		{/if}
 	</div>
 </footer>

package/dist/components/layout/PageHeader.svelte

@@ -31,27 +31,31 @@
 <header
 	class={`top-0 backdrop-blur-sm sticky z-40 border-b border-border bg-background/90 ${className}`}
 >
-	<div class="gap-5 flex h-(--header-h) items-center px-(--page-px)">
+	<div class="gap-2 sm:gap-5 flex h-(--header-h) items-center px-(--page-px)">
 		<!-- Logo -->
-		<a href={homeUrl} class="gap-2 flex shrink-0 items-center">
+		<a href={homeUrl} class="gap-2 flex shrink-0 items-center" aria-label={brandName}>
 			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
-			<span class="font-semibold text-sm tracking-tight">{brandName}</span>
+			<!-- On a phone the page title needs the room more than the brand does. -->
+			<span
+				class="font-semibold text-sm tracking-tight {title !== undefined ? 'sm:inline hidden' : ''}"
+				>{brandName}</span
+			>
 		</a>
 
 		{#if title !== undefined}
-			<span class="text-sm text-border">/</span>
-			<span class="text-sm font-medium text-muted-foreground">{title ?? ''}</span>
+			<span class="text-sm shrink-0 text-border">/</span>
+			<span class="text-sm font-medium min-w-0 truncate text-muted-foreground">{title ?? ''}</span>
 		{/if}
 
 		<!-- Primary nav next to logo -->
 		{#if navItems}
-			<nav class="ml-5 gap-1 flex">
+			<nav class="sm:ml-5 gap-1 flex shrink-0">
 				{@render navItems()}
 			</nav>
 		{/if}
 
 		<!-- Right cluster: identity + utilities, anchored flush-right -->
-		<div class="gap-2 ml-auto flex items-center">
+		<div class="gap-2 ml-auto flex shrink-0 items-center">
 			{#if rightContent}
 				{@render rightContent()}
 			{/if}

package/dist/components/layout/Pagination.svelte

@@ -40,23 +40,21 @@
 		</p>
 		<div class="gap-1 flex items-center">
 			<Button
-				size="sm"
+				size="icon-sm"
 				variant="outline"
 				disabled={page <= 1}
 				onclick={() => (page -= 1)}
 				aria-label="Previous page"
-				class="h-8 w-8 p-0"
 			>
 				<ChevronLeft class="h-4 w-4" />
 			</Button>
 			<span class="px-2 font-mono text-xs text-muted-foreground">{page} / {pageCount}</span>
 			<Button
-				size="sm"
+				size="icon-sm"
 				variant="outline"
 				disabled={page >= pageCount}
 				onclick={() => (page += 1)}
 				aria-label="Next page"
-				class="h-8 w-8 p-0"
 			>
 				<ChevronRight class="h-4 w-4" />
 			</Button>

package/dist/components/layout/SectionHeader.svelte

@@ -18,7 +18,9 @@
 	}: SectionHeaderProps = $props();
 </script>
 
-<div class={`mb-6 gap-5 flex items-start justify-between ${className}`}>
+<div
+	class={`mb-6 gap-3 sm:gap-5 sm:flex-row sm:items-start sm:justify-between flex flex-col ${className}`}
+>
 	<div class="min-w-0">
 		{#if eyebrow}
 			<div class="mb-1.5 text-xs font-medium tracking-wider text-muted-foreground uppercase">
@@ -31,7 +33,7 @@
 		{/if}
 	</div>
 	{#if actions}
-		<div class="gap-2 flex shrink-0 items-center">
+		<div class="gap-2 flex shrink-0 flex-wrap items-center">
 			{@render actions()}
 		</div>
 	{/if}

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

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import type { OutputChartLayoutItem } from '@selvajs/schemas';
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
+	import { mode } from 'mode-watcher';
 	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 +14,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 +46,40 @@
 		// @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;
+
+	// `Plots.resize()`/`relayout({autosize: true})` ask Plotly to re-measure the container itself,
+	// which it silently fails to do across a Fullscreen transition — _fullLayout keeps the
+	// pre-toggle width/height even though clientWidth/clientHeight are already correct. Passing
+	// the measured size explicitly is the only call that actually takes.
+	function resizeChart() {
+		// @ts-expect-error — Plotly is loaded dynamically onto window
+		if (!containerEl || !window.Plotly) return;
+		const { width, height } = containerEl.getBoundingClientRect();
+		if (width === 0 || height === 0) return;
+		// @ts-expect-error — Plotly is loaded dynamically onto window
+		window.Plotly.relayout(containerEl, { width, height });
+	}
+
 	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 });
 			});
 		}
 	}
@@ -61,26 +87,41 @@
 	$effect(() => {
 		function onFullscreenChange() {
 			isFullscreen = !!document.fullscreenElement;
-			Promise.resolve().then(() => {
-				// @ts-expect-error — Plotly is loaded dynamically onto window
-				if (containerEl && window.Plotly) {
-					// @ts-expect-error — Plotly is loaded dynamically onto window
-					window.Plotly.Plots.resize(containerEl);
-				}
-			});
+			// `tick()` waits for the h-dvh/h-95 class swap this state drives to actually reach the
+			// DOM before resizeChart measures it.
+			tick().then(resizeChart);
 		}
 		document.addEventListener('fullscreenchange', onFullscreenChange);
 		return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
 	});
 
+	// Chromium's getComputedStyle returns color values in whatever function the CSS used to
+	// declare them — oklch() here, since base.css's theme tokens are oklch(). Plotly's own color
+	// parser doesn't recognize oklch() and silently falls back to its #444 default instead of
+	// erroring, so every chart read dark axis text even in dark mode. `fillStyle` alone just
+	// echoes the oklch() string back unconverted; actually rasterizing a pixel and reading its
+	// bytes is what forces a real rgb() value Plotly can parse.
+	function toRgb(cssColor: string): string {
+		const canvas = document.createElement('canvas');
+		canvas.width = 1;
+		canvas.height = 1;
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return cssColor;
+		ctx.fillStyle = cssColor;
+		ctx.fillRect(0, 0, 1, 1);
+		const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+		return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(3)})`;
+	}
+
 	function getThemeColors(): { textColor: string; gridColor: string } {
 		if (!containerEl) return { textColor: '#333', gridColor: '#eee' };
 		const style = getComputedStyle(containerEl);
-		const textColor = style.getPropertyValue('color').trim() || '#333';
-		const gridColor =
+		const textColor = toRgb(style.getPropertyValue('color').trim() || '#333');
+		const gridColor = toRgb(
 			style.getPropertyValue('--border')?.trim() ||
-			style.getPropertyValue('--color-border')?.trim() ||
-			'rgba(128,128,128,0.2)';
+				style.getPropertyValue('--color-border')?.trim() ||
+				'rgba(128,128,128,0.2)'
+		);
 		return { textColor, gridColor };
 	}
 
@@ -113,11 +154,15 @@
 				font: { color: textColor },
 				paper_bgcolor: layoutRest.paper_bgcolor ?? 'transparent',
 				plot_bgcolor: layoutRest.plot_bgcolor ?? 'transparent',
-				...(!isMapFigure && layoutRest.xaxis
-					? { xaxis: { ...(layoutRest.xaxis as object), gridcolor: gridColor, color: textColor } }
-					: {}),
-				...(!isMapFigure && layoutRest.yaxis
-					? { yaxis: { ...(layoutRest.yaxis as object), gridcolor: gridColor, color: textColor } }
+				// Plotly's axis tick/label color doesn't inherit the top-level `font.color`, so this
+				// has to be set even when the figure's own JSON never declared an xaxis/yaxis —
+				// which the mock's figures don't. Gating on `layoutRest.xaxis` existing left every
+				// axis on Plotly's built-in #444 default, light or dark mode.
+				...(!isMapFigure
+					? {
+							xaxis: { ...(layoutRest.xaxis as object), gridcolor: gridColor, color: textColor },
+							yaxis: { ...(layoutRest.yaxis as object), gridcolor: gridColor, color: textColor }
+						}
 					: {})
 			};
 
@@ -129,7 +174,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;
 		}
@@ -142,11 +187,7 @@
 		const ro = new ResizeObserver(() => {
 			if (resizeTimer) clearTimeout(resizeTimer);
 			resizeTimer = setTimeout(() => {
-				// @ts-expect-error — Plotly is loaded dynamically onto window
-				if (containerEl && window.Plotly) {
-					// @ts-expect-error — Plotly is loaded dynamically onto window
-					window.Plotly.Plots.resize(containerEl);
-				}
+				resizeChart();
 				resizeTimer = null;
 			}, 150);
 		});
@@ -163,6 +204,10 @@
 	let renderTimeout: ReturnType<typeof setTimeout> | null = null;
 
 	$effect(() => {
+		// Re-reads mode.current so a theme toggle re-renders with the new axis/font colors —
+		// getThemeColors() only reads the DOM once, at render time, and nothing else repaints an
+		// already-drawn chart when the page's color scheme changes under it.
+		void mode.current;
 		if (!value || !mounted || !containerEl) return;
 		if (renderTimeout) clearTimeout(renderTimeout);
 		renderTimeout = setTimeout(() => {
@@ -177,25 +222,20 @@
 
 <div
 	bind:this={wrapperEl}
-	class="group rounded relative overflow-hidden border border-border {isFullscreen
+	class="group relative overflow-hidden rounded-lg border border-border {isFullscreen
 		? 'bg-background'
 		: ''}"
 >
 	{#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 +247,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>