@selvajs/ui 0.10.0 → 2.0.0

package/dist/components/preview/ChartOutput.svelte

@@ -9,7 +9,7 @@
 		value: string;
 	}
 
-	let { item, value }: Props = $props();
+	let { item: _item, value }: Props = $props();
 
 	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
 

package/dist/components/preview/OutputDisplay.svelte

@@ -103,12 +103,12 @@
 	}
 
 	const duplicatePaths = $derived.by(() => {
-		const seen = new Map<string, number>();
+		const seen: Record<string, number> = {};
 		for (const f of filesArray) {
 			const key = fullPath(f);
-			seen.set(key, (seen.get(key) ?? 0) + 1);
+			seen[key] = (seen[key] ?? 0) + 1;
 		}
-		return Array.from(seen.entries())
+		return Object.entries(seen)
 			.filter(([, n]) => n > 1)
 			.map(([path]) => path);
 	});

package/dist/components/primitives/FilterableDropdown.svelte

@@ -108,8 +108,8 @@
 		{disabled}
 		onclick={() => (open = !open)}
 		class={cn(
-			'bg-background flex h-10 w-full items-center gap-2 rounded-md border px-3 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-			open ? 'border-ring ring-ring/30 ring-2' : 'border-input hover:bg-muted/40'
+			'h-10 gap-2 px-3 text-sm flex w-full items-center rounded-md border bg-background text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+			open ? 'border-ring ring-2 ring-ring/30' : 'border-input hover:bg-muted/40'
 		)}
 	>
 		{#if SelectedIcon}
@@ -118,14 +118,14 @@
 				style={selected?.iconStyle}
 			/>
 		{:else if TriggerIcon}
-			<TriggerIcon class="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+			<TriggerIcon class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
 		{/if}
 		<span class={cn('min-w-0 flex-1 truncate', selected ? '' : 'text-muted-foreground')}>
 			{selected ? selected.label : placeholder}
 		</span>
 		<ChevronDown
 			class={cn(
-				'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
+				'h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform',
 				open ? 'rotate-180' : ''
 			)}
 		/>
@@ -133,26 +133,26 @@
 
 	{#if open}
 		<div
-			class="border-border bg-popover absolute top-full right-0 left-0 z-50 mt-1 overflow-hidden rounded-md border shadow-md"
+			class="right-0 left-0 mt-1 shadow-md absolute top-full z-50 overflow-hidden rounded-md border border-border bg-popover"
 		>
 			{#if showSearch}
-				<div class="border-border relative border-b">
+				<div class="relative border-b border-border">
 					<Search
-						class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2"
+						class="left-3 h-3.5 w-3.5 pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground"
 					/>
 					<input
 						bind:this={inputRef}
 						bind:value={query}
 						onkeydown={handleKey}
 						placeholder={searchPlaceholder}
-						class="placeholder:text-muted-foreground h-8 w-full bg-transparent pr-3 pl-9 text-sm outline-none"
+						class="h-8 pr-3 pl-9 text-sm w-full bg-transparent outline-none placeholder:text-muted-foreground"
 					/>
 				</div>
 			{/if}
 
 			<div class="max-h-60 overflow-y-auto">
 				{#if matches.length === 0}
-					<p class="text-muted-foreground px-3 py-3 text-center text-xs">
+					<p class="px-3 py-3 text-xs text-center text-muted-foreground">
 						No matches for "{query}"
 					</p>
 				{:else}
@@ -163,7 +163,7 @@
 							onclick={() => pick(item)}
 							onmouseenter={() => (highlighted = i)}
 							class={cn(
-								'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors',
+								'gap-2 px-3 py-1.5 text-sm flex w-full items-center text-left transition-colors',
 								highlighted === i ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60'
 							)}
 						>
@@ -175,7 +175,7 @@
 							{/if}
 							<span class="flex-1 truncate">{item.label}</span>
 							{#if item.id === value}
-								<Check class="text-primary h-3.5 w-3.5 shrink-0" />
+								<Check class="h-3.5 w-3.5 shrink-0 text-primary" />
 							{/if}
 						</button>
 					{/each}

package/dist/compute/computeThrottle.svelte.js

@@ -1,7 +1,7 @@
 /**
  * Fallback per-solve abort timeout (ms) when the caller doesn't pass one.
- * Used only by callers without a deployment-specific limit (e.g. builder-app
- * over WebSocket); compute-app supplies `MAX_SOLVE_DURATION_MS` from its
+ * Used only by callers without a deployment-specific limit (e.g. plugin-ui
+ * over WebSocket); the selva app supplies `MAX_SOLVE_DURATION_MS` from its
  * server config via `ComputeApp`'s `solveTimeoutMs` prop.
  */
 const DEFAULT_TIMEOUT_MS = 60_000;

package/dist/external/storage.js

@@ -3,8 +3,8 @@
 // When an input has source.kind === 'external', a producer route writes the produced
 // value here, and the solver route reads it back. Scoped per (scopeKey, inputId) so
 // values for one solver/input don't bleed into another. The scope key is whatever
-// uniquely identifies the solver context — sessionId in builder-app/preview,
-// definition guid in compute-app/library, etc.
+// uniquely identifies the solver context — sessionId in plugin-ui/preview,
+// definition guid in selva/library, etc.
 //
 // inputId is the Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id).
 const STORAGE_PREFIX = 'external';

package/dist/index.d.ts

@@ -11,5 +11,6 @@ export * from './external/storage';
 export * from './contexts/footerContext.svelte';
 export * from './composables/useFooterItem.svelte';
 export * from './utils';
+export { randomId } from './utils/randomId';
 export type { ActionButton } from './types/actionButton';
 export type { SolveFn } from './types/solveFn';

package/dist/index.js

@@ -20,3 +20,4 @@ export * from './contexts/footerContext.svelte';
 export * from './composables/useFooterItem.svelte';
 // Utils (cn function)
 export * from './utils';
+export { randomId } from './utils/randomId';

package/dist/schema/param-exporter.js

@@ -1,4 +1,5 @@
 import { APP_DEFAULTS } from '../constants';
+import { randomId } from '../utils/randomId';
 function getGroups(schema) {
     if (!schema.layout)
         return [];
@@ -29,7 +30,7 @@ export function createSavedState(schema, currentValues, metadata) {
         }
     }
     return {
-        id: crypto.randomUUID(),
+        id: randomId(),
         name: metadata.name,
         description: metadata.description,
         timestamp: new Date().toISOString(),

package/dist/utils/randomId.d.ts

@@ -0,0 +1 @@
+export declare function randomId(): string;

package/dist/utils/randomId.js

@@ -0,0 +1,51 @@
+// 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.
+export function randomId() {
+    const c = typeof crypto !== 'undefined' ? crypto : undefined;
+    if (c?.randomUUID)
+        return c.randomUUID();
+    if (c?.getRandomValues)
+        return uuidFromBytes(c.getRandomValues(new Uint8Array(16)));
+    return uuidFromBytes(mathRandomBytes());
+}
+function mathRandomBytes() {
+    const out = new Uint8Array(16);
+    for (let i = 0; i < 16; i++)
+        out[i] = Math.floor(Math.random() * 256);
+    return out;
+}
+// Format 16 bytes as a UUIDv4 string with the version + variant bits set per
+// RFC 4122 §4.4. Same shape as crypto.randomUUID() returns.
+function uuidFromBytes(bytes) {
+    bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+    bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10xx
+    const hex = [];
+    for (let i = 0; i < 16; i++)
+        hex.push(bytes[i].toString(16).padStart(2, '0'));
+    return (hex.slice(0, 4).join('') +
+        '-' +
+        hex.slice(4, 6).join('') +
+        '-' +
+        hex.slice(6, 8).join('') +
+        '-' +
+        hex.slice(8, 10).join('') +
+        '-' +
+        hex.slice(10, 16).join(''));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "0.10.0",
+  "version": "2.0.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -58,7 +58,8 @@
     "bits-ui": "^2.15.4",
     "svelte": "^5",
     "tailwind-variants": "^3.2.2",
-    "three": "^0.184.0"
+    "three": "^0.184.0",
+    "@selvajs/schemas": "2.0.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -74,8 +75,7 @@
     "paneforge": "^1.0.2",
     "svelte-sonner": "^1.1.1",
     "tailwind-merge": "^3.5.0",
-    "tw-animate-css": "^1.4.0",
-    "@selvajs/schemas": "1.2.0"
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@internationalized/date": "^3.12.1",
@@ -84,11 +84,12 @@
     "bits-ui": "^2.18.0",
     "svelte": "5.55.5",
     "tailwind-variants": "^3.2.2",
+    "@selvajs/schemas": "2.0.0",
     "@selvajs/config": "0.0.0"
   },
   "scripts": {
     "dev": "vite dev",
-    "build": "rm -rf dist && vite build && pnpm prepack",
+    "build": "rm -rf dist && pnpm prepack",
     "build:fast": "svelte-kit sync && svelte-package",
     "build:watch": "svelte-kit sync && svelte-package --watch",
     "preview": "vite preview",

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

@@ -9,7 +9,7 @@
 		value: string;
 	}
 
-	let { item, value }: Props = $props();
+	let { item: _item, value }: Props = $props();
 
 	const MAP_TYPE_SET = new Set(['scattermap', 'scattermapbox', 'choropleth', 'scattergeo']);
 

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

@@ -103,12 +103,12 @@
 	}
 
 	const duplicatePaths = $derived.by(() => {
-		const seen = new Map<string, number>();
+		const seen: Record<string, number> = {};
 		for (const f of filesArray) {
 			const key = fullPath(f);
-			seen.set(key, (seen.get(key) ?? 0) + 1);
+			seen[key] = (seen[key] ?? 0) + 1;
 		}
-		return Array.from(seen.entries())
+		return Object.entries(seen)
 			.filter(([, n]) => n > 1)
 			.map(([path]) => path);
 	});

package/src/lib/components/primitives/FilterableDropdown.svelte

@@ -108,8 +108,8 @@
 		{disabled}
 		onclick={() => (open = !open)}
 		class={cn(
-			'bg-background flex h-10 w-full items-center gap-2 rounded-md border px-3 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-			open ? 'border-ring ring-ring/30 ring-2' : 'border-input hover:bg-muted/40'
+			'h-10 gap-2 px-3 text-sm flex w-full items-center rounded-md border bg-background text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+			open ? 'border-ring ring-2 ring-ring/30' : 'border-input hover:bg-muted/40'
 		)}
 	>
 		{#if SelectedIcon}
@@ -118,14 +118,14 @@
 				style={selected?.iconStyle}
 			/>
 		{:else if TriggerIcon}
-			<TriggerIcon class="text-muted-foreground h-3.5 w-3.5 shrink-0" />
+			<TriggerIcon class="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
 		{/if}
 		<span class={cn('min-w-0 flex-1 truncate', selected ? '' : 'text-muted-foreground')}>
 			{selected ? selected.label : placeholder}
 		</span>
 		<ChevronDown
 			class={cn(
-				'text-muted-foreground h-3.5 w-3.5 shrink-0 transition-transform',
+				'h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform',
 				open ? 'rotate-180' : ''
 			)}
 		/>
@@ -133,26 +133,26 @@
 
 	{#if open}
 		<div
-			class="border-border bg-popover absolute top-full right-0 left-0 z-50 mt-1 overflow-hidden rounded-md border shadow-md"
+			class="right-0 left-0 mt-1 shadow-md absolute top-full z-50 overflow-hidden rounded-md border border-border bg-popover"
 		>
 			{#if showSearch}
-				<div class="border-border relative border-b">
+				<div class="relative border-b border-border">
 					<Search
-						class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-3.5 w-3.5 -translate-y-1/2"
+						class="left-3 h-3.5 w-3.5 pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground"
 					/>
 					<input
 						bind:this={inputRef}
 						bind:value={query}
 						onkeydown={handleKey}
 						placeholder={searchPlaceholder}
-						class="placeholder:text-muted-foreground h-8 w-full bg-transparent pr-3 pl-9 text-sm outline-none"
+						class="h-8 pr-3 pl-9 text-sm w-full bg-transparent outline-none placeholder:text-muted-foreground"
 					/>
 				</div>
 			{/if}
 
 			<div class="max-h-60 overflow-y-auto">
 				{#if matches.length === 0}
-					<p class="text-muted-foreground px-3 py-3 text-center text-xs">
+					<p class="px-3 py-3 text-xs text-center text-muted-foreground">
 						No matches for "{query}"
 					</p>
 				{:else}
@@ -163,7 +163,7 @@
 							onclick={() => pick(item)}
 							onmouseenter={() => (highlighted = i)}
 							class={cn(
-								'flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors',
+								'gap-2 px-3 py-1.5 text-sm flex w-full items-center text-left transition-colors',
 								highlighted === i ? 'bg-accent text-accent-foreground' : 'hover:bg-muted/60'
 							)}
 						>
@@ -175,7 +175,7 @@
 							{/if}
 							<span class="flex-1 truncate">{item.label}</span>
 							{#if item.id === value}
-								<Check class="text-primary h-3.5 w-3.5 shrink-0" />
+								<Check class="h-3.5 w-3.5 shrink-0 text-primary" />
 							{/if}
 						</button>
 					{/each}

package/src/lib/compute/computeThrottle.svelte.ts

@@ -12,8 +12,8 @@ interface ComputeThrottleOptions {
 
 /**
  * Fallback per-solve abort timeout (ms) when the caller doesn't pass one.
- * Used only by callers without a deployment-specific limit (e.g. builder-app
- * over WebSocket); compute-app supplies `MAX_SOLVE_DURATION_MS` from its
+ * Used only by callers without a deployment-specific limit (e.g. plugin-ui
+ * over WebSocket); the selva app supplies `MAX_SOLVE_DURATION_MS` from its
  * server config via `ComputeApp`'s `solveTimeoutMs` prop.
  */
 const DEFAULT_TIMEOUT_MS = 60_000;

package/src/lib/external/storage.ts

@@ -3,8 +3,8 @@
 // When an input has source.kind === 'external', a producer route writes the produced
 // value here, and the solver route reads it back. Scoped per (scopeKey, inputId) so
 // values for one solver/input don't bleed into another. The scope key is whatever
-// uniquely identifies the solver context — sessionId in builder-app/preview,
-// definition guid in compute-app/library, etc.
+// uniquely identifies the solver context — sessionId in plugin-ui/preview,
+// definition guid in selva/library, etc.
 //
 // inputId is the Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id).
 

package/src/lib/index.ts

@@ -28,6 +28,7 @@ export * from './composables/useFooterItem.svelte';
 
 // Utils (cn function)
 export * from './utils';
+export { randomId } from './utils/randomId';
 
 // UI-specific runtime types (not from schema)
 export type { ActionButton } from './types/actionButton';

package/src/lib/schema/param-exporter.ts

@@ -1,4 +1,5 @@
 import { APP_DEFAULTS } from '../constants';
+import { randomId } from '../utils/randomId';
 import type {
 	UISchema,
 	ParameterPreset,
@@ -44,7 +45,7 @@ export function createSavedState(
 	}
 
 	return {
-		id: crypto.randomUUID(),
+		id: randomId(),
 		name: metadata.name,
 		description: metadata.description,
 		timestamp: new Date().toISOString(),

package/src/lib/utils/randomId.ts

@@ -0,0 +1,52 @@
+// 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.
+export function randomId(): string {
+	const c = typeof crypto !== 'undefined' ? crypto : undefined;
+	if (c?.randomUUID) return c.randomUUID();
+	if (c?.getRandomValues) return uuidFromBytes(c.getRandomValues(new Uint8Array(16)));
+	return uuidFromBytes(mathRandomBytes());
+}
+
+function mathRandomBytes(): Uint8Array {
+	const out = new Uint8Array(16);
+	for (let i = 0; i < 16; i++) out[i] = Math.floor(Math.random() * 256);
+	return out;
+}
+
+// Format 16 bytes as a UUIDv4 string with the version + variant bits set per
+// RFC 4122 §4.4. Same shape as crypto.randomUUID() returns.
+function uuidFromBytes(bytes: Uint8Array): string {
+	bytes[6] = (bytes[6] & 0x0f) | 0x40; // version 4
+	bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10xx
+
+	const hex: string[] = [];
+	for (let i = 0; i < 16; i++) hex.push(bytes[i].toString(16).padStart(2, '0'));
+	return (
+		hex.slice(0, 4).join('') +
+		'-' +
+		hex.slice(4, 6).join('') +
+		'-' +
+		hex.slice(6, 8).join('') +
+		'-' +
+		hex.slice(8, 10).join('') +
+		'-' +
+		hex.slice(10, 16).join('')
+	);
+}