selva-shared 0.8.1

package/dist/components/Viewer.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { initThree, updateScene } from 'selva-compute/visualization';
+	import type { UISchema } from '../types/generated';
+	import { Maximize, Minimize, Camera } from '@lucide/svelte';
+	import type * as THREE from 'three';
+	import type { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+	interface Props {
+		schema: UISchema;
+		meshes: any[];
+		isFullscreen?: boolean;
+		isSolving?: boolean;
+		isBlurred?: boolean;
+		drawerOpen?: boolean;
+	}
+
+	let {
+		schema,
+		meshes,
+		isFullscreen = $bindable(false),
+		isSolving = false,
+		isBlurred = false,
+		drawerOpen = false
+	}: Props = $props();
+
+	let canvas: HTMLCanvasElement;
+	let scene: THREE.Scene | null = null;
+	let camera: THREE.PerspectiveCamera | null = null;
+	let controls: OrbitControls | null = null;
+	let viewerInitialized = false;
+	let hideButton = $state(false);
+
+	// Hide button instantly when expanding, show after animation when collapsing
+	$effect(() => {
+		if (drawerOpen) {
+			hideButton = true;
+		} else {
+			const timer = setTimeout(() => {
+				hideButton = false;
+			}, 350);
+			return () => clearTimeout(timer);
+		}
+	});
+
+	// Initialize Three.js
+	onMount(() => {
+		if (!canvas) return;
+
+		const opts = {
+			environment: { backgroundColor: schema?.viewerOptions?.backgroundColor ?? '#E6E6E6' }
+		};
+
+		const init = initThree(canvas, opts);
+		scene = init.scene;
+		camera = init.camera;
+		controls = init.controls;
+	});
+
+	// React to meshes changes
+	// We need to manually handle cleanup of Lines and Points because selva-compute's updateScene
+	// might only clean up Meshes.
+	$effect(() => {
+		if (scene && camera && controls) {
+			// Manual cleanup of types that updateScene might miss (Lines, Points)
+
+			updateScene(scene, meshes, camera, controls, viewerInitialized);
+
+			if (!viewerInitialized && meshes.length > 0) {
+				viewerInitialized = true;
+			}
+		}
+	});
+
+	function toggleFullscreen() {
+		isFullscreen = !isFullscreen;
+	}
+
+	function downloadScreenshot() {
+		if (!canvas) return;
+
+		// Use requestAnimationFrame to ensure a render has completed
+		requestAnimationFrame(() => {
+			canvas.toBlob((blob) => {
+				if (!blob) return;
+				const url = URL.createObjectURL(blob);
+				const link = document.createElement('a');
+				const timestamp = new Date().toISOString().slice(0, 19).replace(/:/g, '-');
+				link.href = url;
+				link.download = `viewer-${timestamp}.png`;
+				document.body.appendChild(link);
+				link.click();
+				document.body.removeChild(link);
+				URL.revokeObjectURL(url);
+			});
+		});
+	}
+</script>
+
+<div
+	class="min-h-64 sm:min-h-96 lg:min-h-125 relative h-full flex-1 {isFullscreen
+		? 'fullscreen-viewer'
+		: ''}"
+>
+	<div class="inset-0 absolute">
+		<canvas
+			class="block h-full w-full"
+			style="touch-action: none;{isFullscreen ? '' : ' border-radius: 0.625rem;'}"
+			bind:this={canvas}
+		></canvas>
+	</div>
+
+	<!-- Drawer open blur overlay -->
+	<div
+		class="inset-0 blur-overlay sm:border absolute z-20 rounded-lg border-border {isBlurred
+			? 'blur-overlay-active'
+			: 'blur-overlay-inactive'}"
+	></div>
+
+	<!-- Solving overlay: blurs the canvas -->
+	{#if isSolving}
+		<div
+			class="inset-0 absolute z-10 animate-[selva-viewer-fade-in_0.2s_ease-out] rounded-lg backdrop-blur-[2px] transition-all duration-300"
+		></div>
+	{/if}
+
+	<!-- Viewer Control Buttons (hidden when drawer is open on mobile) -->
+	<div
+		class="right-4 {isFullscreen
+			? 'bottom-4'
+			: 'bottom-16 sm:bottom-4'} gap-2 absolute z-50 flex items-center"
+		style={hideButton ? 'opacity: 0; pointer-events: none;' : 'opacity: 1; pointer-events: auto;'}
+	>
+		<!-- Screenshot Button -->
+		<button
+			class="h-10 w-10 shadow-lg hover:shadow-xl flex items-center justify-center rounded-lg border border-border bg-card/90 transition-all hover:bg-card active:scale-95"
+			onclick={downloadScreenshot}
+			title="Download screenshot"
+			aria-label="Download screenshot"
+		>
+			<Camera class="h-5 w-5 text-card-foreground" />
+		</button>
+
+		<!-- Fullscreen Toggle Button -->
+		<button
+			class="h-10 w-10 shadow-lg hover:shadow-xl flex items-center justify-center rounded-lg border border-border bg-card/90 transition-all hover:bg-card active:scale-95"
+			onclick={toggleFullscreen}
+			title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+			aria-label={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
+		>
+			{#if isFullscreen}
+				<Minimize class="h-5 w-5 text-card-foreground" />
+			{:else}
+				<Maximize class="h-5 w-5 text-card-foreground" />
+			{/if}
+		</button>
+	</div>
+</div>
+
+<style>
+	.fullscreen-viewer {
+		position: fixed;
+		inset: 0;
+		z-index: 10000;
+		border-radius: 0 !important;
+	}
+
+	/* Blur overlay animation */
+	.blur-overlay {
+		pointer-events: none;
+	}
+
+	.blur-overlay-active {
+		animation: blur-in 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+	}
+
+	.blur-overlay-inactive {
+		animation: blur-out 0.35s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+	}
+
+	@keyframes blur-in {
+		from {
+			backdrop-filter: blur(0px);
+		}
+		to {
+			backdrop-filter: blur(5px);
+		}
+	}
+
+	@keyframes blur-out {
+		from {
+			backdrop-filter: blur(5px);
+		}
+		to {
+			backdrop-filter: blur(0px);
+		}
+	}
+
+	@keyframes selva-viewer-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { UISchema } from '../types/generated';
+interface Props {
+    schema: UISchema;
+    meshes: any[];
+    isFullscreen?: boolean;
+    isSolving?: boolean;
+    isBlurred?: boolean;
+    drawerOpen?: boolean;
+}
+declare const Viewer: import("svelte").Component<Props, {}, "isFullscreen">;
+type Viewer = ReturnType<typeof Viewer>;
+export default Viewer;

package/dist/components/layout/FooterItemRenderer.svelte

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

package/dist/components/layout/FooterItemRenderer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { FooterItem } from '../../contexts/footerContext.svelte';
+type $$ComponentProps = {
+    item: FooterItem;
+};
+declare const FooterItemRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+type FooterItemRenderer = ReturnType<typeof FooterItemRenderer>;
+export default FooterItemRenderer;

package/dist/components/layout/PageContainer.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import PageFooter from './PageFooter.svelte';
+
+	interface PageContainerProps {
+		background?: 'default' | 'white' | 'gray';
+		class?: string;
+		errors?: string[];
+		warnings?: string[];
+		children: Snippet;
+		footerChildren?: Snippet;
+	}
+
+	let { background = 'default', class: className = '', errors = [], warnings = [], children, footerChildren }: PageContainerProps = $props();
+
+	const backgroundClasses = {
+		default: 'bg-background',
+		white: 'bg-background',
+		gray: 'bg-muted'
+	};
+
+	const combinedClasses = $derived(
+		`flex flex-col h-screen overflow-hidden ${backgroundClasses[background]} ${className}`
+	);
+</script>
+
+<div class={combinedClasses}>
+	{@render children()}
+	<div class="shrink-0">
+		<PageFooter {errors} {warnings}>
+			{#if footerChildren}
+				{@render footerChildren()}
+			{/if}
+		</PageFooter>
+	</div>
+</div>

package/dist/components/layout/PageContainer.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface PageContainerProps {
+    background?: 'default' | 'white' | 'gray';
+    class?: string;
+    errors?: string[];
+    warnings?: string[];
+    children: Snippet;
+    footerChildren?: Snippet;
+}
+declare const PageContainer: import("svelte").Component<PageContainerProps, {}, "">;
+type PageContainer = ReturnType<typeof PageContainer>;
+export default PageContainer;

package/dist/components/layout/PageFooter.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Dialog from '../ui/dialog';
+	import * as Collapsible from '../ui/collapsible';
+	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import { useFooter, type FooterItem } from '../../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/dist/components/layout/PageFooter.svelte.d.ts

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

package/dist/components/layout/PageHeader.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { ModeToggle } from '../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/dist/components/layout/PageHeader.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface PageHeaderProps {
+    title: string;
+    showModeToggle?: boolean;
+    logo?: string;
+    children?: Snippet;
+    rightContent?: Snippet;
+    class?: string;
+}
+declare const PageHeader: import("svelte").Component<PageHeaderProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { default as PageContainer } from './PageContainer.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as PageFooter } from './PageFooter.svelte';

package/dist/components/layout/index.js

@@ -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';