@selvajs/ui 0.9.0

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

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Dialog from '$lib/components/primitives/dialog';
+	import * as Collapsible from '$lib/components/primitives/collapsible';
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { useFooter } 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;
+		}
+	})();
+
+	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 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,67 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ModeToggle } from '$lib/components/primitives/mode-toggle';
+
+	interface PageHeaderProps {
+		homeUrl?: string;
+		title?: string | null;
+		logo?: string;
+		navItems?: Snippet;
+		rightContent?: Snippet;
+		subnav?: Snippet;
+		showModeToggle?: boolean;
+		class?: string;
+	}
+
+	let {
+		homeUrl = '/app',
+		title = undefined,
+		logo = '/favicon/favicon.svg',
+		navItems,
+		rightContent,
+		subnav,
+		showModeToggle = true,
+		class: className = ''
+	}: PageHeaderProps = $props();
+</script>
+
+<!-- Sticky top bar -->
+<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)">
+		<!-- Logo -->
+		<a href={homeUrl} class="gap-2 flex shrink-0 items-center">
+			<img src={logo} alt="" aria-hidden="true" class="h-5 w-5" />
+			<span class="font-semibold text-sm tracking-tight">Selva</span>
+		</a>
+
+		{#if title !== undefined}
+			<span class="text-sm text-border">/</span>
+			<span class="text-sm font-medium text-muted-foreground">{title ?? ''}</span>
+		{/if}
+
+		<!-- Primary nav next to logo -->
+		{#if navItems}
+			<nav class="ml-5 gap-1 flex">
+				{@render navItems()}
+			</nav>
+		{/if}
+
+		<!-- Right cluster: identity + utilities, anchored flush-right -->
+		<div class="gap-2 ml-auto flex items-center">
+			{#if rightContent}
+				{@render rightContent()}
+			{/if}
+			{#if showModeToggle}
+				<ModeToggle />
+			{/if}
+		</div>
+	</div>
+
+	{#if subnav}
+		<div class="h-10 flex items-center border-t border-border/60 px-(--page-px)">
+			{@render subnav()}
+		</div>
+	{/if}
+</header>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface SectionHeaderProps {
+		eyebrow?: string;
+		title: string;
+		description?: string;
+		actions?: Snippet;
+		class?: string;
+	}
+
+	let {
+		eyebrow,
+		title,
+		description,
+		actions,
+		class: className = ''
+	}: SectionHeaderProps = $props();
+</script>
+
+<div class={`mb-6 gap-5 flex items-start justify-between ${className}`}>
+	<div class="min-w-0">
+		{#if eyebrow}
+			<div class="mb-1.5 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+				{eyebrow}
+			</div>
+		{/if}
+		<h1 class="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
+		{#if description}
+			<p class="mt-1 max-w-xl text-sm text-muted-foreground">{description}</p>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="gap-2 flex shrink-0 items-center">
+			{@render actions()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import type { Component } from 'svelte';
+
+	export interface SideNavItem {
+		href: string;
+		label: string;
+		icon?: Component;
+		match?: 'exact' | 'prefix';
+		badge?: string | number;
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+
+	interface SideNavProps {
+		items: SideNavItem[];
+		eyebrow?: string;
+		header?: Snippet;
+		footer?: Snippet;
+		class?: string;
+	}
+
+	let { items, eyebrow, header, footer, class: className = '' }: SideNavProps = $props();
+
+	function isActive(item: SideNavItem): boolean {
+		const path = page.url.pathname;
+		if (item.match === 'prefix') return path.startsWith(item.href);
+		return path === item.href;
+	}
+</script>
+
+<aside
+	class={`w-60 flex shrink-0 flex-col overflow-y-auto border-r border-border bg-background ${className}`}
+>
+	{#if eyebrow}
+		<div class="px-4 pt-5 pb-3">
+			<span class="text-xs font-medium tracking-wider text-muted-foreground uppercase">
+				{eyebrow}
+			</span>
+		</div>
+	{/if}
+
+	{#if header}
+		<div class="px-3 pb-3">
+			{@render header()}
+		</div>
+	{/if}
+
+	<nav class="pb-4 pr-2 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-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'
+						: '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 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 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>
+				{/if}
+			</a>
+		{/each}
+	</nav>
+
+	{#if footer}
+		<div class="px-3 py-3 border-t border-border/60">
+			{@render footer()}
+		</div>
+	{/if}
+</aside>

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

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Component } from 'svelte';
+	import { page } from '$app/state';
+
+	export interface SubNavItem {
+		href: string;
+		label: string;
+		icon?: Component;
+		match?: 'exact' | 'prefix';
+	}
+
+	interface SubNavProps {
+		items: SubNavItem[];
+		class?: string;
+	}
+
+	let { items, class: className = '' }: SubNavProps = $props();
+
+	function isActive(item: SubNavItem): boolean {
+		const path = page.url.pathname;
+		if (item.match === 'prefix') return path.startsWith(item.href);
+		return path === item.href;
+	}
+</script>
+
+<nav class={`gap-1 flex items-center ${className}`}>
+	{#each items as item (item.href)}
+		{@const active = isActive(item)}
+		<a
+			href={item.href}
+			class={[
+				'h-7 px-3 gap-1.5 text-sm font-medium flex items-center rounded-md transition-colors',
+				active
+					? 'bg-accent text-accent-foreground'
+					: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+			].join(' ')}
+		>
+			{#if item.icon}
+				{@const Icon = item.icon}
+				<Icon class="h-3.5 w-3.5" />
+			{/if}
+			{item.label}
+		</a>
+	{/each}
+</nav>

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

@@ -0,0 +1,11 @@
+// Layout Components - Page structure and organization
+export { default as AppShell } from './AppShell.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageContent } from './PageContent.svelte';
+export { default as PageFooter } from './PageFooter.svelte';
+export { default as SubNav } from './SubNav.svelte';
+export type { SubNavItem } from './SubNav.svelte';
+export { default as SideNav } from './SideNav.svelte';
+export type { SideNavItem } from './SideNav.svelte';
+export { default as SectionHeader } from './SectionHeader.svelte';
+export { default as EmptyState } from './EmptyState.svelte';

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

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import type { OutputChartLayoutItem } from '@selvajs/schemas';
+	import { onMount } from 'svelte';
+	import { Loader, Maximize, Minimize } from '@lucide/svelte';
+	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']);
+
+	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;
+		}
+	});
+
+	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;
+
+	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;
+	}
+
+	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;
+			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);
+	});
+
+	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 };
+	}
+
+	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));
+
+			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;
+		}
+	}
+
+	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);
+		});
+		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);
+		};
+	});
+
+	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="group relative overflow-hidden rounded 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>
+	{:else}
+		<div
+			bind:this={containerEl}
+			class="w-full"
+			style="height: {isFullscreen ? '100vh' : '380px'};"
+		></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
+				? 'opacity-100'
+				: ''}"
+		>
+			{#if loading}
+				<div class="rounded p-1.5 flex items-center text-muted-foreground border border-border bg-background/80 backdrop-blur-sm">
+					<Loader size={14} class="animate-spin" />
+				</div>
+			{/if}
+
+			<button
+				onclick={toggleFullscreen}
+				disabled={loading}
+				title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+				class="rounded p-1.5 flex items-center text-foreground border border-border bg-background/80 backdrop-blur-sm transition-colors hover:bg-background disabled:cursor-not-allowed disabled:opacity-50"
+			>
+				{#if isFullscreen}
+					<Minimize size={14} />
+				{:else}
+					<Maximize size={14} />
+				{/if}
+			</button>
+		</div>
+	{/if}
+</div>