selva-shared 0.8.1

package/dist/components/ComputeMessages.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import * as Collapsible from './ui/collapsible';
+	import * as Dialog from './ui/dialog';
+
+	interface Props {
+		errors?: string[];
+		warnings?: string[];
+	}
+
+	let { errors = [], warnings = [] }: Props = $props();
+
+	let open = $state(false);
+
+	let showErrors = $state(true);
+	let showWarnings = $state(false);
+
+	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));
+	const hasMessages = $derived(errors.length > 0 || warnings.length > 0);
+	const totalCount = $derived(errors.length + warnings.length);
+</script>
+
+{#if hasMessages}
+	<!-- Floating Indicator Badge (hidden on mobile) -->
+	<Dialog.Root bind:open>
+		<Dialog.Trigger
+			class="bottom-12 right-2 sm:bottom-4 sm:right-4 sm:block fixed z-100 hidden focus:outline-none"
+		>
+			<div
+				class="shadow-lg text-xs font-medium hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 flex cursor-pointer items-stretch overflow-hidden rounded-full border transition-all duration-150
+					{errors.length > 0
+					? 'text-destructive-foreground border-destructive/30 bg-destructive'
+					: 'border-warning/30 bg-warning/5 text-warning-foreground'}"
+			>
+				{#if errors.length > 0}
+					<span class="gap-1.5 px-3 py-1.5 flex items-center">
+						<CircleAlert class="h-3.5 w-3.5 shrink-0" />
+						{errors.length}
+					</span>
+				{/if}
+				{#if warnings.length > 0}
+					{#if errors.length > 0}
+						<span class="bg-destructive-foreground/20 w-px self-stretch"></span>
+						<span class="gap-1.5 px-3 py-1.5 flex items-center bg-destructive/80">
+							<TriangleAlert class="h-3.5 w-3.5 shrink-0" />
+							{warnings.length}
+						</span>
+					{:else}
+						<span class="gap-1.5 px-3 py-1.5 flex items-center">
+							<TriangleAlert class="h-3.5 w-3.5 shrink-0" />
+							{warnings.length}
+						</span>
+					{/if}
+				{/if}
+			</div>
+		</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}

package/dist/components/ComputeMessages.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    errors?: string[];
+    warnings?: string[];
+}
+declare const ComputeMessages: import("svelte").Component<Props, {}, "">;
+type ComputeMessages = ReturnType<typeof ComputeMessages>;
+export default ComputeMessages;

package/dist/components/ErrorScreen.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { AlertCircle } from '@lucide/svelte';
+	import * as Card from './ui/card/index.js';
+	import { Button } from './ui/button/index.js';
+
+	interface Props {
+		status?: number;
+		message?: string;
+		details?: string;
+		homeLink?: string;
+	}
+
+	let { status = 500, message, details, homeLink = '/' }: Props = $props();
+</script>
+
+<div
+	class="p-4 flex min-h-screen items-center justify-center bg-background"
+>
+	<Card.Root class="max-w-md w-full">
+		<Card.Header class="text-center">
+			<div class="mb-4 flex justify-center">
+				<div class="p-3 rounded-full bg-destructive/10">
+					<AlertCircle class="h-8 w-8 text-destructive" />
+				</div>
+			</div>
+			<Card.Title class="text-3xl">{status}</Card.Title>
+		</Card.Header>
+		<Card.Content class="space-y-4">
+			<div class="p-4 rounded-lg border border-destructive/50 bg-destructive/10">
+				<div class="gap-3 flex">
+					<AlertCircle class="mt-0.5 h-4 w-4 shrink-0 text-destructive" />
+					<div class="flex-1">
+						<p class="text-sm font-semibold text-destructive">Error</p>
+						{#if message}
+							<p class="text-sm text-destructive/80">{message}</p>
+						{/if}
+					</div>
+				</div>
+			</div>
+
+			{#if details}
+				<div class="bg-muted p-4 rounded-lg">
+					<p class="font-mono text-sm text-muted-foreground break-all">
+						{details}
+					</p>
+				</div>
+			{/if}
+		</Card.Content>
+		<Card.Footer class="gap-2 flex">
+			<Button variant="outline" class="flex-1">
+				<a href={homeLink} class="w-full" rel="external">Go Home</a>
+			</Button>
+		</Card.Footer>
+	</Card.Root>
+</div>

package/dist/components/ErrorScreen.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    status?: number;
+    message?: string;
+    details?: string;
+    homeLink?: string;
+}
+declare const ErrorScreen: import("svelte").Component<Props, {}, "">;
+type ErrorScreen = ReturnType<typeof ErrorScreen>;
+export default ErrorScreen;

package/dist/components/StateManager.svelte

@@ -0,0 +1,318 @@
+<script lang="ts">
+	import { Download, Upload, AlertTriangle, CheckCircle } from '@lucide/svelte';
+	import type { UISchema, ParameterPreset } from '../types/generated';
+	import {
+		createSavedState,
+		validateSavedState,
+		extractLoadableValues,
+		exportStateAsJson,
+		importStateFromJson
+	} from '../utils/param-exporter';
+	import { Button, Input, Label, Textarea, Dialog, Card } from '../components/ui';
+
+	interface Props {
+		schema: UISchema;
+		currentValues: Record<string, unknown>;
+		onLoadValues: (values: Record<string, unknown>) => void;
+	}
+
+	let { schema, currentValues, onLoadValues }: 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>
+
+<div class="gap-2 mb-2 flex items-center justify-center">
+	<Button variant="default" size="sm" onclick={openExportDialog}>
+		<Download class="mr-2 h-4 w-4" />
+		Save State
+	</Button>
+
+	<Button variant="outline" size="sm" onclick={openLoadDialog}>
+		<Upload class="mr-2 h-4 w-4" />
+		Load State
+	</Button>
+
+	<input
+		bind:this={fileInputRef}
+		type="file"
+		accept=".sps"
+		onchange={handleImport}
+		class="hidden"
+	/>
+</div>
+
+<!-- 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="border-success/30 bg-success/5 p-4"
+					>
+						<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 text-success-foreground/80 mt-1">
+									This state can be loaded safely.
+								</p>
+							</div>
+						</div>
+					</Card.Root>
+				{:else if validationResult.canLoad}
+					<Card.Root
+						class="border-warning/30 bg-warning/5 p-4"
+					>
+						<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 text-warning-foreground/80 mt-1">
+									{validationResult.issues.length} warning(s) found, but state can still be loaded.
+								</p>
+							</div>
+						</div>
+					</Card.Root>
+				{:else}
+					<Card.Root class="border-destructive/30 bg-destructive/5 p-4">
+						<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 text-destructive/80 mt-1">
+									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/dist/components/StateManager.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { UISchema } from '../types/generated';
+interface Props {
+    schema: UISchema;
+    currentValues: Record<string, unknown>;
+    onLoadValues: (values: Record<string, unknown>) => void;
+}
+declare const StateManager: import("svelte").Component<Props, {}, "">;
+type StateManager = ReturnType<typeof StateManager>;
+export default StateManager;