@selvajs/ui 4.9.0 → 4.11.0

package/dist/components/compute/ComputeApp.svelte

@@ -54,7 +54,7 @@
 		header?: Snippet;
 		// Scopes sessionStorage for external-input values; falls back to definitionKey then schema.id.
 		externalScopeKey?: string;
-		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, slotLabel, value }.
+		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, value, onValueChange }.
 		clientSlot?: ClientSlot;
 		/**
 		 * UI language for the app's own chrome (viewer, panels, status text).

package/dist/components/preview/InputControl.svelte

@@ -59,12 +59,10 @@
 	// Client-sourced input set to render a host element in its place. The 'hidden'
 	// presentation never reaches here (visible:false filters it out upstream), so a
 	// client slot source means presentation === 'slot'.
-	const clientSlotConfig = $derived.by(() => {
-		const source = (
-			item as { source?: { kind?: string; client?: { presentation?: string; slotLabel?: string } } }
-		).source;
-		if (source?.kind !== 'client' || source.client?.presentation !== 'slot') return null;
-		return { slotLabel: source.client.slotLabel };
+	const isClientSlot = $derived.by(() => {
+		const source = (item as { source?: { kind?: string; client?: { presentation?: string } } })
+			.source;
+		return source?.kind === 'client' && source.client?.presentation === 'slot';
 	});
 	const clientSlot = getClientSlot();
 
@@ -144,14 +142,32 @@
 	}
 </script>
 
-{#if clientSlotConfig}
+{#if isClientSlot}
 	{#if clientSlot}
-		{@render clientSlot({
-			inputId: item.paramId,
-			displayName: label,
-			slotLabel: clientSlotConfig.slotLabel,
-			value
-		})}
+		<Field.Field>
+			<Field.Label class="gap-2 flex items-center">
+				{label}
+				{#if item.description}
+					<Dialog.Root>
+						<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
+							<HelpCircle size={16} />
+						</Dialog.Trigger>
+						<Dialog.Content class="sm:max-w-md">
+							<Dialog.Header>
+								<Dialog.Title>{label}</Dialog.Title>
+								<Dialog.Description>{item.description}</Dialog.Description>
+							</Dialog.Header>
+						</Dialog.Content>
+					</Dialog.Root>
+				{/if}
+			</Field.Label>
+			{@render clientSlot({
+				inputId: item.paramId,
+				displayName: label,
+				value,
+				onValueChange: commit
+			})}
+		</Field.Field>
 	{/if}
 {:else if !hideDynamicListWhenEmpty}
 	<Field.Field>

package/dist/contexts/clientSlotContext.svelte.d.ts

@@ -1,12 +1,18 @@
 import type { Snippet } from 'svelte';
+import type { SupportedTypes } from '@selvajs/schemas';
 export interface ClientSlotArgs {
     /** Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id). */
     inputId: string;
     displayName: string;
-    /** Author-set label from the schema, passed through untouched. May be undefined. */
-    slotLabel?: string;
     /** The current value held for this input (e.g. the prefilled JSON), if any. */
     value: unknown;
+    /**
+     * Commit a value for this input. Identical channel to a built-in widget's change
+     * — the value lands in the solve session and is sent to Compute on the next solve.
+     * `forceSolve` requests a solve even in manual-solve mode (system reconciliation).
+     * Lets a slot be an interactive control (a custom picker), not just a display cell.
+     */
+    onValueChange: (value: SupportedTypes, forceSolve?: boolean) => void;
 }
 export type ClientSlot = Snippet<[ClientSlotArgs]>;
 export declare function setClientSlot(slot: ClientSlot | undefined): void;

package/dist/public.js

@@ -7,7 +7,7 @@
 //
 // Scope: the compute-app SDK — everything an external host app needs to embed a
 // Grasshopper-driven app (ComputeApp), drive solves, and wire pre-step
-// producers. Verified against real consumers (parafa, parapet): they import
+// producers. Verified against real external host apps: they import
 // ComputeApp + its types, the solve seam, and external/storage. Nothing else.
 //
 // Deliberately NOT public: design-system primitives (Button, Card, Dialog, …),
@@ -33,7 +33,7 @@ export { default as ErrorScreen } from './components/ErrorScreen.svelte';
 // driver interface). Exported so transports outside this package can satisfy
 // SolveDriver and drive a session. See CONTEXT.md.
 export { createSolveSession, createRequestResponseDriver } from './compute/createSolveSession.svelte';
-// Pre-step producer transit storage (parafa wires producers via these).
+// Pre-step producer transit storage (host apps wire producers via these).
 export * from './external/storage';
 // Schema utilities a ComputeApp host reasonably needs to read/shape values.
 export * from './schema/defaults';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.9.0",
+  "version": "4.11.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -43,7 +43,7 @@
     "svelte": "^5",
     "tailwind-variants": "^3.2.2",
     "three": "^0.184.0",
-    "@selvajs/schemas": "^4.5.0"
+    "@selvajs/schemas": "^4.6.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -73,7 +73,7 @@
     "tailwind-variants": "^3.2.2",
     "vitest": "^3.2.6",
     "@selvajs/config": "0.0.1",
-    "@selvajs/schemas": "4.5.0"
+    "@selvajs/schemas": "4.6.0"
   },
   "scripts": {
     "dev": "vite dev",

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

@@ -54,7 +54,7 @@
 		header?: Snippet;
 		// Scopes sessionStorage for external-input values; falls back to definitionKey then schema.id.
 		externalScopeKey?: string;
-		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, slotLabel, value }.
+		// Renders client-sourced inputs with presentation === 'slot'; receives { inputId, displayName, value, onValueChange }.
 		clientSlot?: ClientSlot;
 		/**
 		 * UI language for the app's own chrome (viewer, panels, status text).

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

@@ -59,12 +59,10 @@
 	// Client-sourced input set to render a host element in its place. The 'hidden'
 	// presentation never reaches here (visible:false filters it out upstream), so a
 	// client slot source means presentation === 'slot'.
-	const clientSlotConfig = $derived.by(() => {
-		const source = (
-			item as { source?: { kind?: string; client?: { presentation?: string; slotLabel?: string } } }
-		).source;
-		if (source?.kind !== 'client' || source.client?.presentation !== 'slot') return null;
-		return { slotLabel: source.client.slotLabel };
+	const isClientSlot = $derived.by(() => {
+		const source = (item as { source?: { kind?: string; client?: { presentation?: string } } })
+			.source;
+		return source?.kind === 'client' && source.client?.presentation === 'slot';
 	});
 	const clientSlot = getClientSlot();
 
@@ -144,14 +142,32 @@
 	}
 </script>
 
-{#if clientSlotConfig}
+{#if isClientSlot}
 	{#if clientSlot}
-		{@render clientSlot({
-			inputId: item.paramId,
-			displayName: label,
-			slotLabel: clientSlotConfig.slotLabel,
-			value
-		})}
+		<Field.Field>
+			<Field.Label class="gap-2 flex items-center">
+				{label}
+				{#if item.description}
+					<Dialog.Root>
+						<Dialog.Trigger class="p-1 cursor-help opacity-60 transition-opacity hover:opacity-100">
+							<HelpCircle size={16} />
+						</Dialog.Trigger>
+						<Dialog.Content class="sm:max-w-md">
+							<Dialog.Header>
+								<Dialog.Title>{label}</Dialog.Title>
+								<Dialog.Description>{item.description}</Dialog.Description>
+							</Dialog.Header>
+						</Dialog.Content>
+					</Dialog.Root>
+				{/if}
+			</Field.Label>
+			{@render clientSlot({
+				inputId: item.paramId,
+				displayName: label,
+				value,
+				onValueChange: commit
+			})}
+		</Field.Field>
 	{/if}
 {:else if !hideDynamicListWhenEmpty}
 	<Field.Field>

package/src/lib/contexts/clientSlotContext.svelte.ts

@@ -1,5 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import type { Snippet } from 'svelte';
+import type { SupportedTypes } from '@selvajs/schemas';
 
 // Carries the host app's slot renderer down to InputControl without threading a
 // prop through every layout layer (ComputeApp → AppLayout → TabLayout →
@@ -7,17 +8,24 @@ import type { Snippet } from 'svelte';
 //
 // An input with source.kind === 'client' and source.client.presentation === 'slot'
 // reserves its cell but renders nothing itself. Instead Selva invokes this snippet
-// so the host can render its own element (e.g. an "Edit JSON" button). Selva never
-// interprets what the host renders; `slotLabel` is passed through untouched.
+// so the host can render its own element (e.g. an "Edit JSON" button, or a custom
+// picker). Selva never interprets what the host renders. The host may COMMIT a value
+// back via `onValueChange`, which flows into the solve exactly like any built-in
+// widget's change.
 
 export interface ClientSlotArgs {
 	/** Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id). */
 	inputId: string;
 	displayName: string;
-	/** Author-set label from the schema, passed through untouched. May be undefined. */
-	slotLabel?: string;
 	/** The current value held for this input (e.g. the prefilled JSON), if any. */
 	value: unknown;
+	/**
+	 * Commit a value for this input. Identical channel to a built-in widget's change
+	 * — the value lands in the solve session and is sent to Compute on the next solve.
+	 * `forceSolve` requests a solve even in manual-solve mode (system reconciliation).
+	 * Lets a slot be an interactive control (a custom picker), not just a display cell.
+	 */
+	onValueChange: (value: SupportedTypes, forceSolve?: boolean) => void;
 }
 
 export type ClientSlot = Snippet<[ClientSlotArgs]>;

package/src/lib/public.ts

@@ -7,7 +7,7 @@
 //
 // Scope: the compute-app SDK — everything an external host app needs to embed a
 // Grasshopper-driven app (ComputeApp), drive solves, and wire pre-step
-// producers. Verified against real consumers (parafa, parapet): they import
+// producers. Verified against real external host apps: they import
 // ComputeApp + its types, the solve seam, and external/storage. Nothing else.
 //
 // Deliberately NOT public: design-system primitives (Button, Card, Dialog, …),
@@ -56,10 +56,10 @@ export {
 } from './compute/createSolveSession.svelte';
 
 // Client-slot context type (host apps render their own cell for client-sourced
-// inputs; parafa uses ClientSlotArgs).
+// inputs, and may commit a value back via ClientSlotArgs.onValueChange).
 export type { ClientSlotArgs, ClientSlot } from './contexts/clientSlotContext.svelte';
 
-// Pre-step producer transit storage (parafa wires producers via these).
+// Pre-step producer transit storage (host apps wire producers via these).
 export * from './external/storage';
 
 // Schema utilities a ComputeApp host reasonably needs to read/shape values.