@selvajs/ui 4.3.0 → 4.5.0

package/src/lib/schema/visibility-rules.ts

@@ -84,6 +84,31 @@ export function evaluateVisibility(
 	return actionFn(met, defaultValue);
 }
 
+/**
+ * Stable key for a layout item: `paramId` for inputs/outputs, `id` for linebreaks.
+ * Mirrors the key the renderers use in their `{#each}` blocks.
+ */
+export function itemKey(item: LayoutItem): string {
+	return item.type === 'linebreak' ? item.id : item.paramId;
+}
+
+/**
+ * Evaluates every item's visibility once against the current values, keyed by itemKey.
+ * Callers that touch the same items more than once per render (column layout + cell
+ * render, plus the default-value sweep) read from this single map instead of
+ * re-evaluating per access — one source of truth for "what's visible right now".
+ */
+export function buildVisibilityMap(
+	items: LayoutItem[],
+	values: Record<string, unknown>
+): Record<string, VisibilityResult> {
+	const map: Record<string, VisibilityResult> = {};
+	for (const item of items) {
+		map[itemKey(item)] = evaluateVisibility(item, values);
+	}
+	return map;
+}
+
 export function evaluateGroupVisibility(
 	group: { visibilityCondition?: GroupVisibilityCondition },
 	values: Record<string, unknown>

package/src/lib/types/solveFn.ts

@@ -6,7 +6,7 @@
  * @property errors - Optional array of error messages that occurred
  * @property warnings - Optional array of warning messages from the computation
  */
-interface SolveResult {
+export interface SolveResult {
 	outputs: Record<string, unknown>;
 	meshes?: any[];
 	errors?: string[];

package/src/lib/utils/file-download.ts

@@ -1,12 +1,8 @@
-/**
- * Wrapper utilities for file downloads from Grasshopper outputs
- * Uses the core package implementation for file handling
- */
-
 import { downloadFileData, type FileData } from '@selvajs/compute';
+import { SvelteMap } from 'svelte/reactivity';
 import { APP_DEFAULTS } from '../constants';
 
-const MIME_BY_EXT: Record<string, string> = {
+export const MIME_BY_EXT: Record<string, string> = {
 	'.png': 'image/png',
 	'.jpg': 'image/jpeg',
 	'.jpeg': 'image/jpeg',
@@ -45,10 +41,6 @@ function saveSingleFile(file: FileData): void {
 	URL.revokeObjectURL(a.href);
 }
 
-/**
- * Download file(s) from Grasshopper outputs
- * Single files are downloaded directly, multiple files are packaged as ZIP
- */
 export async function downloadFiles(
 	fileData: FileData | FileData[],
 	fileName: string = 'grasshopper-output'
@@ -73,9 +65,6 @@ export async function downloadFiles(
 	}
 }
 
-/**
- * Check if data is FileData
- */
 export function isFileData(data: unknown): data is FileData {
 	return (
 		typeof data === 'object' &&
@@ -86,9 +75,17 @@ export function isFileData(data: unknown): data is FileData {
 	);
 }
 
-/**
- * Format file size for display
- */
+export function groupMessages(messages: string[]): Array<{ message: string; count: number }> {
+	const grouped = new SvelteMap<string, number>();
+	for (const msg of messages) {
+		const baseMsg = msg.replace(/\([a-f0-9-]{36}\)$/i, '(...)').trim();
+		grouped.set(baseMsg, (grouped.get(baseMsg) ?? 0) + 1);
+	}
+	return Array.from(grouped.entries())
+		.map(([message, count]) => ({ message, count }))
+		.sort((a, b) => b.count - a.count);
+}
+
 export function formatFileSize(bytes: number): string {
 	if (bytes === 0) return '0 Bytes';
 
@@ -99,10 +96,6 @@ export function formatFileSize(bytes: number): string {
 	return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
 }
 
-/**
- * Get approximate file size from base64 string
- */
 export function getBase64FileSize(base64: string): number {
-	// Base64 encoded string is approximately 33% larger than original
 	return Math.ceil((base64.length * 3) / 4);
 }

package/src/lib/utils/randomId.ts

@@ -1,22 +1,6 @@
-// Generate a UUIDv4-shaped string in any browser context.
-//
-// `crypto.randomUUID()` requires a secure context (HTTPS or localhost).
-// Plain-HTTP deployments — common for first-time self-hosters trying things
-// out — get `crypto.randomUUID is not a function`, which is a confusing
-// browser-level error nobody can diagnose without devtools open.
-//
-// We try in order:
-//   1. crypto.randomUUID()         — fastest path, available in secure contexts
-//   2. crypto.getRandomValues()    — Web Crypto's lower-level entropy, works
-//                                    in any context that ships Web Crypto
-//   3. Math.random() fallback      — last resort; non-cryptographic, but the
-//                                    IDs we generate here are only used as
-//                                    collision-resistant keys for client-side
-//                                    form rows, not as security tokens.
-//
-// Callers that need cryptographic randomness (tokens, secrets) must NOT use
-// this — they should fail loudly in insecure contexts instead of silently
-// downgrading.
+// Falls back through crypto.randomUUID → crypto.getRandomValues → Math.random so
+// plain-HTTP deployments don't crash. Math.random IDs are non-cryptographic —
+// fine for collision-resistant UI keys, not for tokens or secrets.
 export function randomId(): string {
 	const c = typeof crypto !== 'undefined' ? crypto : undefined;
 	if (c?.randomUUID) return c.randomUUID();

package/dist/components/compute/ComputeMessages.svelte

@@ -1,169 +0,0 @@
-<script lang="ts">
-	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
-	import { SvelteMap } from 'svelte/reactivity';
-	import * as Collapsible from '../primitives/collapsible';
-	import * as Dialog from '../primitives/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}
-	<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);">
-				{#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}
-
-				{#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/compute/ComputeMessages.svelte.d.ts

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

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

@@ -1,5 +0,0 @@
-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/dist/components/compute/index.js

@@ -1,5 +0,0 @@
-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/dist/components/preview/index.d.ts

@@ -1,3 +0,0 @@
-export { default as InputControl } from './InputControl.svelte';
-export { default as OutputDisplay } from './OutputDisplay.svelte';
-export { default as TabLayout } from './TabLayout.svelte';

package/dist/components/preview/index.js

@@ -1,4 +0,0 @@
-// Preview/Runtime Components - Interactive UI rendering
-export { default as InputControl } from './InputControl.svelte';
-export { default as OutputDisplay } from './OutputDisplay.svelte';
-export { default as TabLayout } from './TabLayout.svelte';

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

@@ -1,3 +0,0 @@
-export { default as Viewer, type ViewerConfig } from './Viewer.svelte';
-export { default as MeshMetadataDialog } from './MeshMetadataDialog.svelte';
-export { default as SceneManager } from './SceneManager.svelte';

package/dist/components/viewer/index.js

@@ -1,3 +0,0 @@
-export { default as Viewer } from './Viewer.svelte';
-export { default as MeshMetadataDialog } from './MeshMetadataDialog.svelte';
-export { default as SceneManager } from './SceneManager.svelte';

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

@@ -1,169 +0,0 @@
-<script lang="ts">
-	import { CircleAlert, TriangleAlert, ChevronDown, ChevronRight } from '@lucide/svelte';
-	import { SvelteMap } from 'svelte/reactivity';
-	import * as Collapsible from '$lib/components/primitives/collapsible';
-	import * as Dialog from '$lib/components/primitives/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}
-	<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);">
-				{#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}
-
-				{#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/src/lib/components/compute/index.ts

@@ -1,5 +0,0 @@
-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/preview/index.ts

@@ -1,4 +0,0 @@
-// Preview/Runtime Components - Interactive UI rendering
-export { default as InputControl } from './InputControl.svelte';
-export { default as OutputDisplay } from './OutputDisplay.svelte';
-export { default as TabLayout } from './TabLayout.svelte';

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

@@ -1,3 +0,0 @@
-export { default as Viewer, type ViewerConfig } from './Viewer.svelte';
-export { default as MeshMetadataDialog } from './MeshMetadataDialog.svelte';
-export { default as SceneManager } from './SceneManager.svelte';