@selvajs/ui 0.9.0

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

@@ -0,0 +1,326 @@
+<script lang="ts">
+	import { Download, Upload, AlertTriangle, CheckCircle } from '@lucide/svelte';
+	import type { UISchema, ParameterPreset } from '@selvajs/schemas';
+	import {
+		createSavedState,
+		validateSavedState,
+		extractLoadableValues,
+		exportStateAsJson,
+		importStateFromJson
+	} from '../../schema/param-exporter';
+	import { Button, Input, Label, Textarea, Dialog, Card } from '../primitives';
+
+	import type { ActionButton } from '../../types/actionButton';
+
+	interface Props {
+		schema: UISchema;
+		currentValues: Record<string, unknown>;
+		onLoadValues: (values: Record<string, unknown>) => void;
+		showSaveButton?: boolean;
+		showLoadButton?: boolean;
+		actions?: ActionButton[];
+	}
+
+	let {
+		schema,
+		currentValues,
+		onLoadValues,
+		showSaveButton = true,
+		showLoadButton = true,
+		actions = []
+	}: Props = $props();
+
+	// Save dialog state
+	let showExportDialog = $state(false);
+	let exportName = $state('');
+	let exportDescription = $state('');
+	let exportAuthor = $state('');
+	let exportTags = $state('');
+
+	// Import/validation state
+	let showValidationDialog = $state(false);
+	let showLoadDialog = $state(false);
+	let importedState = $state<ParameterPreset | null>(null);
+	let validationResult = $state<ReturnType<typeof validateSavedState> | null>(null);
+	let fileInputRef = $state<HTMLInputElement | null>(null);
+
+	function openExportDialog() {
+		exportName = `State ${new Date().toLocaleDateString()}`;
+		exportDescription = '';
+		exportAuthor = schema.author || '';
+		exportTags = '';
+		showExportDialog = true;
+	}
+
+	function handleExport() {
+		if (!exportName.trim()) {
+			alert('Please enter a name for this state');
+			return;
+		}
+
+		const state = createSavedState(schema, currentValues, {
+			name: exportName.trim(),
+			description: exportDescription.trim() || undefined,
+			author: exportAuthor.trim() || undefined,
+			tags: exportTags
+				.split(',')
+				.map((t) => t.trim())
+				.filter((t) => t.length > 0)
+		});
+
+		exportStateAsJson(state);
+		showExportDialog = false;
+	}
+
+	async function handleImport(event: Event) {
+		const input = event.target as HTMLInputElement;
+		if (!input.files || input.files.length === 0) return;
+
+		try {
+			const file = input.files[0];
+			const imported = await importStateFromJson(file);
+
+			// Validate before loading
+			const validation = validateSavedState(imported, schema);
+
+			if (!validation.canLoad) {
+				// Show validation errors
+				importedState = imported;
+				validationResult = validation;
+				showValidationDialog = true;
+				return;
+			}
+
+			// Warnings only - show validation but allow load
+			if (!validation.isValid) {
+				importedState = imported;
+				validationResult = validation;
+				showValidationDialog = true;
+				return;
+			}
+
+			// No issues - load immediately
+			const values = extractLoadableValues(imported, schema, validation);
+			onLoadValues(values);
+		} catch (error) {
+			alert('Failed to import state: ' + (error as Error).message);
+		}
+
+		// Reset input
+		input.value = '';
+	}
+
+	function confirmLoad() {
+		if (!importedState || !validationResult) return;
+
+		if (validationResult.canLoad) {
+			const values = extractLoadableValues(importedState, schema, validationResult);
+			onLoadValues(values);
+			showValidationDialog = false;
+			importedState = null;
+			validationResult = null;
+		}
+	}
+
+	function cancelImport() {
+		showValidationDialog = false;
+		importedState = null;
+		validationResult = null;
+	}
+
+	function openLoadDialog() {
+		showLoadDialog = true;
+	}
+
+	function handleLoadClick() {
+		fileInputRef?.click();
+		showLoadDialog = false;
+	}
+</script>
+
+{#if showSaveButton}
+	<Button variant="default" size="sm" onclick={openExportDialog}>
+		<Download class="mr-2 h-4 w-4" />
+		Save State
+	</Button>
+{/if}
+
+{#if showLoadButton}
+	<Button variant="outline" size="sm" onclick={openLoadDialog}>
+		<Upload class="mr-2 h-4 w-4" />
+		Load State
+	</Button>
+{/if}
+
+{#each actions as action (action.id)}
+	<Button variant={action.variant ?? 'outline'} size={action.size ?? 'sm'} onclick={action.onclick}>
+		{#if action.icon}
+			{@const IconComponent = action.icon}
+			<IconComponent class="mr-2 h-4 w-4" />
+		{/if}
+		{action.label}
+	</Button>
+{/each}
+
+<input bind:this={fileInputRef} type="file" accept=".sps" onchange={handleImport} class="hidden" />
+
+<!-- Save Dialog -->
+<Dialog.Root bind:open={showExportDialog}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Save Parameter State</Dialog.Title>
+			<Dialog.Description>Save the current parameter values as a .sps file</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="gap-4 py-4 grid">
+			<div class="gap-2 grid">
+				<Label for="export-name">State Name *</Label>
+				<Input id="export-name" bind:value={exportName} placeholder="e.g., Design Option A" />
+			</div>
+
+			<div class="gap-2 grid">
+				<Label for="export-description">Description</Label>
+				<Textarea
+					id="export-description"
+					bind:value={exportDescription}
+					placeholder="Optional description of this state"
+					rows={3}
+				/>
+			</div>
+
+			<div class="gap-2 grid">
+				<Label for="export-author">Author</Label>
+				<Input id="export-author" bind:value={exportAuthor} placeholder="Your name or email" />
+			</div>
+
+			<div class="gap-2 grid">
+				<Label for="export-tags">Tags</Label>
+				<Input
+					id="export-tags"
+					bind:value={exportTags}
+					placeholder="facade, option-a, client-approved (comma-separated)"
+				/>
+			</div>
+		</div>
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showExportDialog = false)}>Cancel</Button>
+			<Button onclick={handleExport}>Save State</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Load Dialog -->
+<Dialog.Root bind:open={showLoadDialog}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Load Parameter State</Dialog.Title>
+			<Dialog.Description>Select a .sps state file from your drive to load</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="py-8">
+			<Button onclick={handleLoadClick} class="w-full" size="lg">
+				<Upload class="mr-2 h-4 w-4" />
+				Select .sps File
+			</Button>
+		</div>
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (showLoadDialog = false)}>Cancel</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
+
+<!-- Validation Dialog -->
+<Dialog.Root bind:open={showValidationDialog}>
+	<Dialog.Content class="max-w-2xl max-h-[80vh] overflow-y-auto">
+		<Dialog.Header>
+			<Dialog.Title>State Validation Report</Dialog.Title>
+			<Dialog.Description>
+				{#if importedState}
+					Validating state: {importedState.name}
+				{/if}
+			</Dialog.Description>
+		</Dialog.Header>
+
+		{#if validationResult}
+			<div class="gap-4 py-4 grid">
+				<!-- Summary Alert -->
+				{#if validationResult.isValid}
+					<Card.Root class="p-4 border-success/30 bg-success/5">
+						<div class="gap-3 flex items-start">
+							<CheckCircle class="h-5 w-5 text-success" />
+							<div>
+								<h4 class="text-sm font-semibold text-success-foreground">No Issues Found</h4>
+								<p class="text-sm mt-1 text-success-foreground/80">
+									This state can be loaded safely.
+								</p>
+							</div>
+						</div>
+					</Card.Root>
+				{:else if validationResult.canLoad}
+					<Card.Root class="p-4 border-warning/30 bg-warning/5">
+						<div class="gap-3 flex items-start">
+							<AlertTriangle class="h-5 w-5 text-warning" />
+							<div>
+								<h4 class="text-sm font-semibold text-warning-foreground">Warnings Detected</h4>
+								<p class="text-sm mt-1 text-warning-foreground/80">
+									{validationResult.issues.length} warning(s) found, but state can still be loaded.
+								</p>
+							</div>
+						</div>
+					</Card.Root>
+				{:else}
+					<Card.Root class="p-4 border-destructive/30 bg-destructive/5">
+						<div class="gap-3 flex items-start">
+							<AlertTriangle class="h-5 w-5 text-destructive" />
+							<div>
+								<h4 class="text-sm font-semibold text-destructive">Critical Errors</h4>
+								<p class="text-sm mt-1 text-destructive/80">
+									Cannot load this state due to critical incompatibilities.
+								</p>
+							</div>
+						</div>
+					</Card.Root>
+				{/if}
+
+				<!-- Issues List -->
+				{#if !validationResult.isValid}
+					<div class="space-y-2">
+						<h4 class="text-sm font-medium">Issues:</h4>
+						{#each validationResult.issues as issue (issue.message)}
+							<div
+								class="p-3 rounded-lg border {issue.severity === 'error'
+									? 'border-destructive/30 bg-destructive/5'
+									: 'border-warning/30 bg-warning/5'}"
+							>
+								<div class="gap-2 flex items-start">
+									<AlertTriangle
+										class="h-4 w-4 mt-0.5 {issue.severity === 'error'
+											? 'text-destructive'
+											: 'text-warning'}"
+									/>
+									<div class="flex-1">
+										<p class="text-sm font-medium">{issue.message}</p>
+										{#if issue.details}
+											<p class="text-xs mt-1 text-muted-foreground">
+												Expected: {issue.details.expected} → Actual: {issue.details.actual}
+											</p>
+										{/if}
+									</div>
+								</div>
+							</div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={cancelImport}>Cancel</Button>
+			{#if validationResult?.canLoad}
+				<Button onclick={confirmLoad}>Load Anyway</Button>
+			{/if}
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,5 @@
+export { default as AppLayout } from './AppLayout.svelte';
+export { default as ComputeApp } from './ComputeApp.svelte';
+export { default as ComputeMessages } from './ComputeMessages.svelte';
+export { default as ParameterPresetManager } from './ParameterPresetManager.svelte';
+export { default as CollapsedPanelStrip } from './CollapsedPanelStrip.svelte';

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import PageHeader from './PageHeader.svelte';
+	import PageFooter from './PageFooter.svelte';
+
+	interface AppShellProps {
+		// Header
+		showHeader?: boolean;
+		homeUrl?: string;
+		title?: string | null;
+		logo?: string;
+		showModeToggle?: boolean;
+		navItems?: Snippet;
+		rightContent?: Snippet;
+		subnav?: Snippet;
+		headerClass?: string;
+
+		// Body layout
+		// 'fixed'  — full viewport, header + body + footer; body owns its own scroll. For app-like pages (builder, preview, library/[guid]).
+		// 'scroll' — sticky header, body fills `100vh - --header-h` and scrolls. For dashboard-style pages.
+		mode?: 'fixed' | 'scroll';
+
+		// Optional left rail. When present, body becomes flex row: sidenav | main.
+		sidenav?: Snippet;
+
+		// Footer (only rendered when `showFooter`)
+		showFooter?: boolean;
+		errors?: string[];
+		warnings?: string[];
+		footerChildren?: Snippet;
+
+		// Body content
+		class?: string;
+		bodyClass?: string;
+		children: Snippet;
+	}
+
+	let {
+		showHeader = true,
+		homeUrl = '/',
+		title = undefined,
+		logo = '/favicon/favicon.svg',
+		showModeToggle = true,
+		navItems,
+		rightContent,
+		subnav,
+		headerClass = '',
+		mode: _mode = 'scroll',
+		sidenav,
+		showFooter = false,
+		errors = [],
+		warnings = [],
+		footerChildren,
+		class: className = '',
+		bodyClass = '',
+		children
+	}: AppShellProps = $props();
+
+	// fixed: viewport-locked, no page scroll — body owns its own scroll internally.
+	// scroll: normal page flow, footer sticks to bottom via sticky positioning.
+	const rootClass = $derived(
+		_mode === 'fixed'
+			? `flex flex-col h-screen overflow-hidden bg-background ${className}`
+			: `flex flex-col min-h-screen 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()
+	);
+
+	const bodyShellStyle = '';
+</script>
+
+<div class={rootClass}>
+	{#if showHeader}
+		<PageHeader
+			{homeUrl}
+			{title}
+			{logo}
+			{showModeToggle}
+			{navItems}
+			{rightContent}
+			{subnav}
+			class={headerClass}
+		/>
+	{/if}
+
+	<div class={bodyShellClass} style={bodyShellStyle}>
+		{#if sidenav}
+			{@render sidenav()}
+			<main class="flex-1 overflow-y-auto">
+				{@render children()}
+			</main>
+		{:else}
+			{@render children()}
+		{/if}
+	</div>
+
+	{#if showFooter}
+		<div class="bottom-0 sticky z-10 shrink-0">
+			<PageFooter {errors} {warnings}>
+				{#if footerChildren}
+					{@render footerChildren()}
+				{/if}
+			</PageFooter>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	interface Props {
+		// Optional icon component (e.g. lucide). Renders at h-8 w-8 above the title.
+		icon?: Component<{ class?: string }>;
+		title: string;
+		description?: string;
+		// Vertical breathing room. Most pages want `lg`; tighter contexts (drawer, nested card) use `sm`.
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		// Free-form description (overrides plain `description`). Use when you need rich content like <code>.
+		body?: Snippet;
+		// Buttons / links rendered below.
+		actions?: Snippet;
+	}
+
+	let {
+		icon: Icon,
+		title,
+		description,
+		size = 'md',
+		class: className = '',
+		body,
+		actions
+	}: Props = $props();
+
+	const padClass = $derived(size === 'sm' ? 'py-8' : size === 'lg' ? 'py-20' : 'p-12');
+</script>
+
+<div
+	class={`flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border text-center ${padClass} ${className}`}
+>
+	{#if Icon}
+		<Icon class="mb-3 h-8 w-8 text-muted-foreground" />
+	{/if}
+	<p class="text-sm font-medium">{title}</p>
+	{#if body}
+		<div class="mt-1 text-sm text-muted-foreground">{@render body()}</div>
+	{:else if description}
+		<p class="mt-1 text-sm text-muted-foreground">{description}</p>
+	{/if}
+	{#if actions}
+		<div class="mt-3 gap-2 flex items-center justify-center">
+			{@render actions()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { FooterItem } from '$lib/contexts/footerContext.svelte';
+
+	let { item }: { item: FooterItem } = $props();
+
+	const itemProps = $derived(item.getProps());
+</script>
+
+{#if item.onClick}
+	<button
+		onclick={item.onClick}
+		class="gap-1.5 px-2 py-0.5 rounded flex cursor-pointer items-center transition-colors hover:bg-muted"
+	>
+		<item.component {...itemProps} />
+	</button>
+{:else}
+	<div class="flex items-center">
+		<item.component {...itemProps} />
+	</div>
+{/if}

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface PageContentProps {
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: PageContentProps = $props();
+</script>
+
+<main class={`px-(--page-px) py-(--page-py) ${className}`}>
+	{@render children?.()}
+</main>