selva-shared 0.8.1

package/src/lib/components/layout/PageFooter.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Collapsible from '$lib/components/ui/collapsible';
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { useFooter, type FooterItem } from '$lib/contexts/footerContext.svelte';
+	import FooterItemRenderer from './FooterItemRenderer.svelte';
+
+	interface Props {
+		errors?: string[];
+		warnings?: string[];
+		children?: Snippet;
+	}
+
+	let { errors = [], warnings = [], children }: Props = $props();
+
+	let footerStore = (() => {
+		try {
+			return useFooter();
+		} catch {
+			return null;
+		}
+	})();
+
+	// Access items directly so SvelteMap reactivity is tracked
+	const leftItems = $derived(
+		footerStore
+			? Array.from(footerStore.items.values())
+					.filter((item) => item.position === 'left')
+					.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
+			: []
+	);
+	const rightItems = $derived(
+		footerStore
+			? Array.from(footerStore.items.values())
+					.filter((item) => item.position === 'right')
+					.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0))
+			: []
+	);
+
+	let _currentYear = new Date().getFullYear();
+	let dialogOpen = $state(false);
+	let showErrors = $state(true);
+	let showWarnings = $state(false);
+
+	const hasMessages = $derived(errors.length > 0 || warnings.length > 0);
+	const totalCount = $derived(errors.length + warnings.length);
+
+	function groupMessages(messages: string[]): Array<{ message: string; count: number }> {
+		const grouped = new SvelteMap<string, number>();
+
+		for (const msg of messages) {
+			// Extract the base message without the component GUID
+			const baseMsg = msg.replace(/\([a-f0-9-]{36}\)$/i, '(...)').trim();
+			const currentCount = grouped.get(baseMsg) || 0;
+			grouped.set(baseMsg, currentCount + 1);
+		}
+
+		return Array.from(grouped.entries())
+			.map(([message, count]) => ({ message, count }))
+			.sort((a, b) => b.count - a.count);
+	}
+
+	const groupedErrors = $derived(groupMessages(errors));
+	const groupedWarnings = $derived(groupMessages(warnings));
+</script>
+
+<footer
+	class="px-4 gap-4 text-xs h-7 mt-2 flex shrink-0 items-center justify-between border-t border-border bg-background text-muted-foreground select-none"
+>
+	<!-- Left section: Status items + custom context items -->
+	<div class="gap-4 flex items-center">
+		<!-- Custom left items from context -->
+		{#each leftItems as item (item.id)}
+			<FooterItemRenderer {item} />
+		{/each}
+
+		{#if hasMessages}
+			<Dialog.Root bind:open={dialogOpen}>
+				<Dialog.Trigger
+					class="gap-1.5 px-2 py-1 rounded flex cursor-pointer items-center transition-colors hover:bg-muted {errors.length >
+					0
+						? 'text-destructive hover:bg-destructive/10'
+						: 'text-warning hover:bg-warning/10'}"
+					title={`${totalCount} ${totalCount === 1 ? 'issue' : 'issues'}`}
+				>
+					{#if errors.length > 0}
+						<CircleAlert class="h-3.5 w-3.5" />
+						<span class="font-medium">{errors.length} Error{errors.length !== 1 ? 's' : ''}</span>
+					{/if}
+
+					{#if warnings.length > 0}
+						{#if errors.length > 0}
+							<span class="text-border">•</span>
+						{/if}
+						<TriangleAlert class="h-3.5 w-3.5" />
+						<span class="font-medium"
+							>{warnings.length} Warning{warnings.length !== 1 ? 's' : ''}</span
+						>
+					{/if}
+				</Dialog.Trigger>
+
+				<Dialog.Content class="max-w-2xl max-h-[80vh]">
+					<Dialog.Header>
+						<Dialog.Title class="gap-2 flex items-center">
+							<CircleAlert class="h-5 w-5" />
+							Compute Messages
+						</Dialog.Title>
+						<Dialog.Description>
+							{totalCount}
+							{totalCount === 1 ? 'issue' : 'issues'} detected during solve
+						</Dialog.Description>
+					</Dialog.Header>
+
+					<div class="space-y-3 pr-2 overflow-y-auto" style="max-height: calc(80vh - 180px);">
+						<!-- Errors Section -->
+						{#if errors.length > 0}
+							<Collapsible.Root bind:open={showErrors}>
+								<div class="overflow-hidden rounded-lg border border-destructive bg-card">
+									<div class="px-4 py-3 flex items-center">
+										<Collapsible.Trigger
+											class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-destructive/5"
+										>
+											{#if showErrors}
+												<ChevronDown class="h-4 w-4 shrink-0 text-destructive" />
+											{:else}
+												<ChevronRight class="h-4 w-4 shrink-0 text-destructive" />
+											{/if}
+											<CircleAlert class="h-4 w-4 shrink-0 text-destructive" />
+											<span class="text-sm font-medium text-destructive">
+												{errors.length === 1 ? '1 Error' : `${errors.length} Errors`}
+											</span>
+										</Collapsible.Trigger>
+									</div>
+
+									<Collapsible.Content class="space-y-0">
+										<div
+											class="max-h-60 px-4 py-3 overflow-y-auto border-t border-destructive bg-card"
+										>
+											<ul class="space-y-2">
+												{#each groupedErrors as { message, count } (message)}
+													<li class="gap-2 text-sm flex text-destructive/90">
+														<span class="shrink-0">•</span>
+														<span class="flex-1">
+															{message}
+															{#if count > 1}
+																<span class="ml-1 font-medium text-destructive/70">×{count} </span>
+															{/if}
+														</span>
+													</li>
+												{/each}
+											</ul>
+										</div>
+									</Collapsible.Content>
+								</div>
+							</Collapsible.Root>
+						{/if}
+
+						<!-- Warnings Section -->
+						{#if warnings.length > 0}
+							<Collapsible.Root bind:open={showWarnings}>
+								<div class="overflow-hidden rounded-lg border border-warning/50 bg-card">
+									<div class="px-4 py-3 flex items-center">
+										<Collapsible.Trigger
+											class="-mx-4 -my-3 gap-3 px-4 py-3 flex flex-1 items-center text-left transition-colors hover:bg-warning/5"
+										>
+											{#if showWarnings}
+												<ChevronDown class="h-4 w-4 shrink-0 text-warning" />
+											{:else}
+												<ChevronRight class="h-4 w-4 shrink-0 text-warning" />
+											{/if}
+											<TriangleAlert class="h-4 w-4 shrink-0 text-warning" />
+											<span class="text-sm font-medium text-warning">
+												{warnings.length === 1 ? '1 Warning' : `${warnings.length} Warnings`}
+											</span>
+										</Collapsible.Trigger>
+									</div>
+
+									<Collapsible.Content class="space-y-0">
+										<div
+											class="max-h-60 px-4 py-3 overflow-y-auto border-t border-warning/50 bg-card"
+										>
+											<ul class="space-y-2">
+												{#each groupedWarnings as { message, count } (message)}
+													<li class="gap-2 text-sm flex text-muted-foreground">
+														<span class="shrink-0">•</span>
+														<span class="flex-1">
+															{message}
+															{#if count > 1}
+																<span class="ml-1 font-medium text-warning/70">×{count}</span>
+															{/if}
+														</span>
+													</li>
+												{/each}
+											</ul>
+										</div>
+									</Collapsible.Content>
+								</div>
+							</Collapsible.Root>
+						{/if}
+					</div>
+				</Dialog.Content>
+			</Dialog.Root>
+		{/if}
+
+		{#if children}
+			<div class="gap-4 flex items-center">
+				{@render children()}
+			</div>
+		{/if}
+	</div>
+
+	<!-- Right section: Custom items + Copyright -->
+	<div class="gap-4 ml-auto flex items-center">
+		<!-- Custom right items from context -->
+		{#each rightItems as item (item.id)}
+			<FooterItemRenderer {item} />
+		{/each}
+
+		<p>by Selva &copy; {_currentYear}</p>
+	</div>
+</footer>

package/src/lib/components/layout/PageHeader.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ModeToggle } from '$lib/components/ui/mode-toggle';
+	import { page } from '$app/state';
+	import { SvelteURLSearchParams } from 'svelte/reactivity';
+
+	interface PageHeaderProps {
+		title: string;
+		showModeToggle?: boolean;
+		logo?: string;
+		children?: Snippet;
+		rightContent?: Snippet;
+		class?: string;
+	}
+
+	let {
+		title,
+		logo = '/favicon/favicon.svg',
+		children,
+		rightContent,
+		class: className = '',
+		showModeToggle = false
+	}: PageHeaderProps = $props();
+
+	// Build home URL preserving current session/wsPort query params
+	const homeUrl = $derived.by(() => {
+		const session = page.url.searchParams.get('session');
+		const wsPort = page.url.searchParams.get('wsPort');
+		if (!session && !wsPort) return '/';
+		const params = new SvelteURLSearchParams();
+		if (session) params.set('session', session);
+		if (wsPort) params.set('wsPort', wsPort);
+		return `/?${params.toString()}`;
+	});
+</script>
+
+<header
+	class={`px-4 py-3 backdrop-blur-sm sm:px-6 mb-0 sm:mb-4 border-b border-border bg-linear-to-b from-background to-card transition-all duration-200 ${className}`}
+>
+	<div class="gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4 flex flex-col">
+		<!-- Left section -->
+		<div class="gap-2 min-w-0 sm:gap-3 flex flex-1 items-center">
+			{#if logo}
+				<a
+					href={homeUrl}
+					class="shrink-0 cursor-pointer transition-opacity hover:opacity-75"
+					title="Go to home"
+				>
+					<img src={logo} alt="Logo" class="h-8 w-8" />
+				</a>
+			{/if}
+			<h1 class="text-lg font-bold sm:text-2xl truncate text-foreground">
+				{title}
+			</h1>
+
+			{#if showModeToggle && !rightContent}
+				<div class="sm:hidden ml-auto">
+					<ModeToggle />
+				</div>
+			{/if}
+
+			{#if children}
+				<div class="gap-2 text-xs sm:flex hidden flex-wrap items-center text-muted-foreground">
+					{@render children()}
+				</div>
+			{/if}
+		</div>
+
+		<!-- Right section (rightContent + ModeToggle) -->
+		{#if rightContent || showModeToggle}
+			<div class="sm:flex gap-2 hidden items-center">
+				{#if rightContent}
+					{@render rightContent()}
+				{/if}
+				{#if showModeToggle}
+					<ModeToggle />
+				{/if}
+			</div>
+		{/if}
+	</div>
+</header>
+
+<style>
+	:global(header) {
+		box-shadow:
+			0 1px 3px rgba(0, 0, 0, 0.08),
+			0 0 0 1px rgba(0, 0, 0, 0.02);
+	}
+</style>

package/src/lib/components/layout/index.ts

@@ -0,0 +1,4 @@
+// Layout Components - Page structure and organization
+export { default as PageContainer } from './PageContainer.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageFooter } from './PageFooter.svelte';

package/src/lib/components/preview/ChartOutput.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+	import type { OutputChartLayoutItem } from '$lib/types/generated';
+	import { onMount } from 'svelte';
+	import { Loader, Maximize, Minimize } from '@lucide/svelte';
+	import { Label } from '$lib/components/ui/label';
+	import { loadScript } from '$lib/utils/loadScript';
+
+	interface Props {
+		item: OutputChartLayoutItem;
+		value: string;
+	}
+
+	let { item, value }: Props = $props();
+
+	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
+
+	// ── Figure parsing ──────────────────────────────────────────────────
+
+	type PlotlyTrace = Record<string, unknown>;
+	type PlotlyFigure = {
+		data: PlotlyTrace[];
+		layout: Record<string, unknown>;
+		config?: Record<string, unknown>;
+	};
+
+	const figData = $derived.by(() => {
+		if (!value) return null;
+		try {
+			return JSON.parse(value) as PlotlyFigure;
+		} catch {
+			return null;
+		}
+	});
+
+	const figTitle = $derived.by(() => {
+		if (!figData) return null;
+		const t = figData.layout?.title;
+		if (!t) return null;
+		if (typeof t === 'string') return t;
+		if (typeof t === 'object' && 'text' in t) return (t as Record<string, unknown>).text as string;
+		return null;
+	});
+
+	// ── DOM refs & state ────────────────────────────────────────────────
+
+	let containerEl = $state<HTMLDivElement | null>(null);
+	let wrapperEl = $state<HTMLDivElement | null>(null);
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let isFullscreen = $state(false);
+	let mounted = false;
+
+	// ── Plotly loader ──────────────────────────────────────────────────
+
+	async function loadPlotly(): Promise<any> {
+		// @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' });
+		// @ts-expect-error — Plotly is loaded dynamically onto window
+		return window.Plotly;
+	}
+
+	// ── Fullscreen ──────────────────────────────────────────────────────
+
+	function toggleFullscreen() {
+		if (!wrapperEl) return;
+		if (!document.fullscreenElement) {
+			wrapperEl.requestFullscreen().catch((err) => {
+				error = `Fullscreen unavailable: ${err.message}`;
+			});
+		} else {
+			document.exitFullscreen().catch((err) => {
+				error = `Exit fullscreen failed: ${err.message}`;
+			});
+		}
+	}
+
+	$effect(() => {
+		function onFullscreenChange() {
+			isFullscreen = !!document.fullscreenElement;
+			// Resize immediately after state updates, then once more to catch layout
+			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);
+				}
+			});
+		}
+		document.addEventListener('fullscreenchange', onFullscreenChange);
+		return () => document.removeEventListener('fullscreenchange', onFullscreenChange);
+	});
+
+	// ── Theme-aware colors ──────────────────────────────────────────────
+
+	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 =
+			style.getPropertyValue('--border')?.trim() ||
+			style.getPropertyValue('--color-border')?.trim() ||
+			'rgba(128,128,128,0.2)';
+		return { textColor, gridColor };
+	}
+
+	// ── Render ──────────────────────────────────────────────────────────
+
+	async function renderChart() {
+		if (!containerEl || !figData) return;
+		error = null;
+		loading = true;
+		try {
+			const Plotly = await loadPlotly();
+			const { textColor, gridColor } = getThemeColors();
+			const isMapFigure = figData.data?.some((t) => MAP_TYPE_SET.has(t.type as string));
+
+			// Strip title, template, and explicit sizing
+			const {
+				title: _title,
+				template: _template,
+				height: _height,
+				width: _width,
+				...layoutRest
+			} = figData.layout as Record<string, unknown> & {
+				title?: unknown;
+				template?: unknown;
+				height?: unknown;
+				width?: unknown;
+			};
+
+			const layout: Record<string, unknown> = {
+				...layoutRest,
+				autosize: true,
+				margin: { t: 24, r: 8, b: 40, l: 60, pad: 0 },
+				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.react(containerEl, figData.data, layout, {
+				responsive: true,
+				displayModeBar: 'hover',
+				displaylogo: false,
+				modeBarButtonsToRemove: ['sendDataToCloud', 'lasso2d', 'select2d'],
+				...figData.config
+			});
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to render chart';
+		} finally {
+			loading = false;
+		}
+	}
+
+	// ── Lifecycle ───────────────────────────────────────────────────────
+
+	onMount(() => {
+		mounted = true;
+
+		let resizeTimer: ReturnType<typeof setTimeout> | null = null;
+		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);
+				}
+				resizeTimer = null;
+			}, 150);
+		});
+		// Observe the wrapper (parent) so we catch sidebar resizes affecting the container's available space
+		if (wrapperEl) ro.observe(wrapperEl);
+
+		return () => {
+			ro.disconnect();
+			if (resizeTimer) clearTimeout(resizeTimer);
+			// @ts-expect-error — Plotly is loaded dynamically onto window
+			if (containerEl && window.Plotly) window.Plotly.purge(containerEl);
+		};
+	});
+
+	// ── Debounced re-render on value change ─────────────────────────────
+
+	let renderTimeout: ReturnType<typeof setTimeout> | null = null;
+
+	$effect(() => {
+		if (!value || !mounted || !containerEl) return;
+		if (renderTimeout) clearTimeout(renderTimeout);
+		renderTimeout = setTimeout(() => {
+			renderChart();
+			renderTimeout = null;
+		}, 150);
+		return () => {
+			if (renderTimeout) clearTimeout(renderTimeout);
+		};
+	});
+</script>
+
+<div
+	bind:this={wrapperEl}
+	class="gap-0 flex flex-col overflow-hidden rounded-lg border border-border {isFullscreen
+		? 'bg-background'
+		: ''}"
+>
+	<!-- Header: title + controls -->
+	<div class="gap-2 px-3 py-1.5 relative z-10 flex items-center border-b border-border bg-muted/40">
+		<Label
+			class="text-xs font-medium truncate text-foreground"
+			title={figTitle ?? item.displayName ?? item.paramId}
+		>
+			{figTitle ?? item.displayName ?? item.paramId}
+		</Label>
+
+		<div class="gap-1 ml-auto flex items-center">
+			{#if loading}
+				<div class="text-muted-foreground">
+					<Loader size={12} class="animate-spin" />
+				</div>
+			{/if}
+
+			<button
+				onclick={toggleFullscreen}
+				disabled={loading}
+				title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+				class="rounded p-1 flex items-center text-muted-foreground transition-colors hover:bg-background/60 hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+			>
+				{#if isFullscreen}
+					<Minimize size={14} />
+				{:else}
+					<Maximize size={14} />
+				{/if}
+			</button>
+		</div>
+	</div>
+
+	{#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>
+	{:else}
+		<div
+			bind:this={containerEl}
+			class="w-full"
+			style="height: {isFullscreen ? 'calc(100vh - 36px)' : '380px'};"
+		></div>
+	{/if}
+</div>

package/src/lib/components/preview/Group.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import type { LayoutItem, InputLayoutItem, OutputLayoutItem } from '$lib/types/generated';
+	import type { Snippet } from 'svelte';
+	import * as Card from '$lib/components/ui/card';
+	import { ChevronDown } from '@lucide/svelte';
+	import { evaluateVisibility } from '$lib/utils/visibility-rules';
+
+	interface Props {
+		label: string;
+		description?: string;
+		items: LayoutItem[];
+		columns: number;
+		collapsed: boolean;
+		values: Record<string, unknown>;
+		onToggle: () => void;
+		inputSnippet: Snippet<
+			[
+				layoutItem: InputLayoutItem,
+				visibility: { visible: boolean; disabled: boolean; defaultValue?: unknown }
+			]
+		>;
+		outputSnippet: Snippet<[layoutItem: OutputLayoutItem]>;
+	}
+
+	let {
+		label,
+		description,
+		items,
+		columns,
+		collapsed,
+		values,
+		onToggle,
+		inputSnippet,
+		outputSnippet
+	}: Props = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onToggle();
+		}
+	}
+</script>
+
+<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>
+			<ChevronDown
+				class="h-4 w-4 text-muted-foreground transition-transform duration-200 {collapsed
+					? ''
+					: 'rotate-180'}"
+			/>
+		</Card.Action>
+	</Card.Header>
+	<div class="content-wrapper" class: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 (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+						{@render gridItem(layoutItem, columns)}
+					{/each}
+				</div>
+			</Card.Content>
+		</div>
+	</div>
+</Card.Root>
+
+{#snippet gridItem(layoutItem: LayoutItem, cols: number)}
+	{#if layoutItem.type === 'linebreak'}
+		<div style="grid-column: 1 / -1" class="h-px bg-border" aria-hidden="true"></div>
+	{:else}
+		{@const visibility = evaluateVisibility(layoutItem, values)}
+		{@const span = Math.min(Math.max(1, layoutItem.span ?? 1), cols)}
+		{#if visibility.visible}
+			{#if layoutItem.type === 'input'}
+				<div
+					class="min-w-0 flex items-center"
+					class:opacity-50={visibility.disabled}
+					style="grid-column: span {span} / span {span}"
+				>
+					{@render inputSnippet(layoutItem, visibility)}
+				</div>
+			{:else if layoutItem.type === 'output'}
+				<div style="grid-column: span {span} / span {span}">
+					{@render outputSnippet(layoutItem)}
+				</div>
+			{/if}
+		{/if}
+	{/if}
+{/snippet}
+
+<style>
+	.content-wrapper {
+		display: grid;
+		grid-template-rows: 1fr;
+		transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	.content-wrapper.collapsed {
+		grid-template-rows: 0fr;
+	}
+
+	.content-inner {
+		min-height: 0;
+	}
+
+	.schema-grid {
+		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
+	}
+</style>