@selvajs/ui 4.10.0 → 4.12.0

package/dist/components/compute/AppLayout.svelte

@@ -37,6 +37,8 @@
 		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
 		presetLabels?: Partial<PresetLabels>;
 		viewerConfig?: ViewerConfig;
+		/** Branding logo URL shown as a watermark in the viewer's bottom-right corner. */
+		logoUrl?: string;
 	}
 
 	let {
@@ -57,7 +59,8 @@
 		onSaveState,
 		onListStates,
 		presetLabels,
-		viewerConfig = {}
+		viewerConfig = {},
+		logoUrl
 	}: Props = $props();
 
 	const hasViewer = $derived(
@@ -185,6 +188,7 @@
 					{isSolving}
 					isBlurred={drawerOpen}
 					{drawerOpen}
+					{logoUrl}
 					viewerConfig={{
 						...viewerConfig,
 						backgroundColor: schema?.viewerOptions?.backgroundColor,
@@ -347,6 +351,7 @@
 							{meshes}
 							bind:isFullscreen={isViewerFullscreen}
 							{isSolving}
+							{logoUrl}
 							viewerConfig={{
 								backgroundColor: schema?.viewerOptions?.backgroundColor
 							}}

package/dist/components/compute/AppLayout.svelte.d.ts

@@ -21,6 +21,8 @@ interface Props {
     onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
     presetLabels?: Partial<PresetLabels>;
     viewerConfig?: ViewerConfig;
+    /** Branding logo URL shown as a watermark in the viewer's bottom-right corner. */
+    logoUrl?: string;
 }
 declare const AppLayout: import("svelte").Component<Props, {}, "isViewerFullscreen">;
 type AppLayout = ReturnType<typeof AppLayout>;

package/dist/components/compute/ComputeApp.svelte

@@ -26,6 +26,8 @@
 		onSolve: SolveFn;
 		definitionKey?: string;
 		title?: string;
+		/** Branding logo URL shown as a watermark in the viewer's bottom-right corner. Hidden when unset. */
+		logo?: string;
 		isEmbedded?: boolean;
 		primaryColor?: string;
 		showModeToggle?: boolean;
@@ -54,7 +56,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).
@@ -70,6 +72,7 @@
 		onSolve,
 		definitionKey = '',
 		title,
+		logo,
 		isEmbedded,
 		primaryColor,
 		showModeToggle = false,
@@ -150,7 +153,7 @@
 		});
 	});
 
-	function handleValueChange(id: string, val: unknown, forceSolve?: boolean) {
+	function handleValueChange(id: string, val: unknown, forceSolve = false) {
 		session.setValue(id, val, forceSolve);
 	}
 
@@ -212,6 +215,7 @@
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
 					values={session.values}
+					logoUrl={logo}
 					{panelActions}
 					{showSaveButton}
 					{showLoadButton}

package/dist/components/compute/ComputeApp.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     onSolve: SolveFn;
     definitionKey?: string;
     title?: string;
+    /** Branding logo URL shown as a watermark in the viewer's bottom-right corner. Hidden when unset. */
+    logo?: string;
     isEmbedded?: boolean;
     primaryColor?: string;
     showModeToggle?: boolean;

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,15 +142,32 @@
 	}
 </script>
 
-{#if clientSlotConfig}
+{#if isClientSlot}
 	{#if clientSlot}
-		{@render clientSlot({
-			inputId: item.paramId,
-			displayName: label,
-			slotLabel: clientSlotConfig.slotLabel,
-			value,
-			onValueChange: commit
-		})}
+		<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/components/viewer/Viewer.svelte

@@ -52,6 +52,11 @@
 		isBlurred?: boolean;
 		drawerOpen?: boolean;
 		viewerConfig?: ViewerConfig;
+		/**
+		 * Branding logo URL. When set, shown as a small watermark in the viewer's
+		 * bottom-right corner. Omitted/empty renders nothing.
+		 */
+		logoUrl?: string;
 		/**
 		 * UI language for the viewer's own chrome (tools menu, panels, dialogs).
 		 * When set, the viewer provides it to its subtree. When omitted, the viewer
@@ -78,6 +83,7 @@
 		isBlurred = false,
 		drawerOpen = false,
 		viewerConfig = {},
+		logoUrl,
 		lang
 	}: Props = $props();
 
@@ -272,6 +278,24 @@
 					></div>
 				{/if}
 
+				{#if logoUrl}
+					<!-- Branding watermark, bottom-right. Matches the tools menu's
+					     bottom offset so it clears the mobile drawer handle, and is
+					     non-interactive so it never intercepts canvas drags. -->
+					<div
+						class="right-4 {isFullscreen ? 'bottom-4' : 'bottom-16 sm:bottom-4'} absolute z-20"
+						style={hideButton
+							? 'opacity: 0; pointer-events: none;'
+							: 'opacity: 1; pointer-events: none;'}
+					>
+						<img
+							src={logoUrl}
+							alt=""
+							class="h-8 max-w-32 drop-shadow-sm sm:h-10 w-auto object-contain opacity-80"
+						/>
+					</div>
+				{/if}
+
 				{#if config.showToolsMenu}
 					{@const itemClass =
 						'gap-2 px-2 py-1.5 text-sm flex cursor-pointer select-none items-center rounded-sm outline-none transition-colors hover:bg-muted focus:bg-muted'}

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

@@ -16,6 +16,11 @@ interface Props {
     isBlurred?: boolean;
     drawerOpen?: boolean;
     viewerConfig?: ViewerConfig;
+    /**
+     * Branding logo URL. When set, shown as a small watermark in the viewer's
+     * bottom-right corner. Omitted/empty renders nothing.
+     */
+    logoUrl?: string;
     /**
      * UI language for the viewer's own chrome (tools menu, panels, dialogs).
      * When set, the viewer provides it to its subtree. When omitted, the viewer

package/dist/constants.js

@@ -1,8 +1,13 @@
 export const APP_DEFAULTS = {
     // File upload limits
+    // TEMP (dev): raised 150 MB → 300 MB so large dev file-widget inputs aren't
+    // blocked client-side. The server request cap (COMPUTE_REQUEST_MAX_BYTES) was
+    // bumped to 300 MB to match, but base64 inflates a raw file by ~4/3, so a
+    // full 300 MB upload still won't fit the 300 MB request body. Revert to 150
+    // before release.
     FILE_UPLOAD: {
-        MAX_SIZE_MB: 150,
-        MAX_SIZE_BYTES: 150 * 1024 * 1024
+        MAX_SIZE_MB: 300,
+        MAX_SIZE_BYTES: 300 * 1024 * 1024
     },
     // Timing & performance thresholds
     TIMEOUTS: {

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

@@ -4,8 +4,6 @@ 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;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "4.10.0",
+  "version": "4.12.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "publishConfig": {
@@ -37,13 +37,13 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@selvajs/compute": "^2.1.0",
+    "@selvajs/compute": "^3.0.0-beta.1",
     "@sveltejs/kit": "^2",
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.2.2",
     "three": "^0.184.0",
-    "@selvajs/schemas": "^4.5.0"
+    "@selvajs/schemas": "^4.6.1"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -72,8 +72,8 @@
     "svelte": "5.55.5",
     "tailwind-variants": "^3.2.2",
     "vitest": "^3.2.6",
-    "@selvajs/config": "0.0.1",
-    "@selvajs/schemas": "4.5.0"
+    "@selvajs/schemas": "4.6.1",
+    "@selvajs/config": "0.0.2"
   },
   "scripts": {
     "dev": "vite dev",

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

@@ -37,6 +37,8 @@
 		onListStates?: () => ParameterPreset[] | Promise<ParameterPreset[]>;
 		presetLabels?: Partial<PresetLabels>;
 		viewerConfig?: ViewerConfig;
+		/** Branding logo URL shown as a watermark in the viewer's bottom-right corner. */
+		logoUrl?: string;
 	}
 
 	let {
@@ -57,7 +59,8 @@
 		onSaveState,
 		onListStates,
 		presetLabels,
-		viewerConfig = {}
+		viewerConfig = {},
+		logoUrl
 	}: Props = $props();
 
 	const hasViewer = $derived(
@@ -185,6 +188,7 @@
 					{isSolving}
 					isBlurred={drawerOpen}
 					{drawerOpen}
+					{logoUrl}
 					viewerConfig={{
 						...viewerConfig,
 						backgroundColor: schema?.viewerOptions?.backgroundColor,
@@ -347,6 +351,7 @@
 							{meshes}
 							bind:isFullscreen={isViewerFullscreen}
 							{isSolving}
+							{logoUrl}
 							viewerConfig={{
 								backgroundColor: schema?.viewerOptions?.backgroundColor
 							}}

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

@@ -26,6 +26,8 @@
 		onSolve: SolveFn;
 		definitionKey?: string;
 		title?: string;
+		/** Branding logo URL shown as a watermark in the viewer's bottom-right corner. Hidden when unset. */
+		logo?: string;
 		isEmbedded?: boolean;
 		primaryColor?: string;
 		showModeToggle?: boolean;
@@ -54,7 +56,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).
@@ -70,6 +72,7 @@
 		onSolve,
 		definitionKey = '',
 		title,
+		logo,
 		isEmbedded,
 		primaryColor,
 		showModeToggle = false,
@@ -150,7 +153,7 @@
 		});
 	});
 
-	function handleValueChange(id: string, val: unknown, forceSolve?: boolean) {
+	function handleValueChange(id: string, val: unknown, forceSolve = false) {
 		session.setValue(id, val, forceSolve);
 	}
 
@@ -212,6 +215,7 @@
 					hasNeverSolved={session.hasNeverSolved}
 					bind:isViewerFullscreen
 					values={session.values}
+					logoUrl={logo}
 					{panelActions}
 					{showSaveButton}
 					{showLoadButton}

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,15 +142,32 @@
 	}
 </script>
 
-{#if clientSlotConfig}
+{#if isClientSlot}
 	{#if clientSlot}
-		{@render clientSlot({
-			inputId: item.paramId,
-			displayName: label,
-			slotLabel: clientSlotConfig.slotLabel,
-			value,
-			onValueChange: commit
-		})}
+		<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/components/viewer/Viewer.svelte

@@ -52,6 +52,11 @@
 		isBlurred?: boolean;
 		drawerOpen?: boolean;
 		viewerConfig?: ViewerConfig;
+		/**
+		 * Branding logo URL. When set, shown as a small watermark in the viewer's
+		 * bottom-right corner. Omitted/empty renders nothing.
+		 */
+		logoUrl?: string;
 		/**
 		 * UI language for the viewer's own chrome (tools menu, panels, dialogs).
 		 * When set, the viewer provides it to its subtree. When omitted, the viewer
@@ -78,6 +83,7 @@
 		isBlurred = false,
 		drawerOpen = false,
 		viewerConfig = {},
+		logoUrl,
 		lang
 	}: Props = $props();
 
@@ -272,6 +278,24 @@
 					></div>
 				{/if}
 
+				{#if logoUrl}
+					<!-- Branding watermark, bottom-right. Matches the tools menu's
+					     bottom offset so it clears the mobile drawer handle, and is
+					     non-interactive so it never intercepts canvas drags. -->
+					<div
+						class="right-4 {isFullscreen ? 'bottom-4' : 'bottom-16 sm:bottom-4'} absolute z-20"
+						style={hideButton
+							? 'opacity: 0; pointer-events: none;'
+							: 'opacity: 1; pointer-events: none;'}
+					>
+						<img
+							src={logoUrl}
+							alt=""
+							class="h-8 max-w-32 drop-shadow-sm sm:h-10 w-auto object-contain opacity-80"
+						/>
+					</div>
+				{/if}
+
 				{#if config.showToolsMenu}
 					{@const itemClass =
 						'gap-2 px-2 py-1.5 text-sm flex cursor-pointer select-none items-center rounded-sm outline-none transition-colors hover:bg-muted focus:bg-muted'}

package/src/lib/constants.ts

@@ -1,8 +1,13 @@
 export const APP_DEFAULTS = {
 	// File upload limits
+	// TEMP (dev): raised 150 MB → 300 MB so large dev file-widget inputs aren't
+	// blocked client-side. The server request cap (COMPUTE_REQUEST_MAX_BYTES) was
+	// bumped to 300 MB to match, but base64 inflates a raw file by ~4/3, so a
+	// full 300 MB upload still won't fit the 300 MB request body. Revert to 150
+	// before release.
 	FILE_UPLOAD: {
-		MAX_SIZE_MB: 150,
-		MAX_SIZE_BYTES: 150 * 1024 * 1024
+		MAX_SIZE_MB: 300,
+		MAX_SIZE_BYTES: 300 * 1024 * 1024
 	},
 
 	// Timing & performance thresholds

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

@@ -9,16 +9,14 @@ import type { SupportedTypes } from '@selvajs/schemas';
 // 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, or a custom
-// picker). Selva never interprets what the host renders; `slotLabel` is passed
-// through untouched. The host may COMMIT a value back via `onValueChange`, which
-// flows into the solve exactly like any built-in widget's change.
+// 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;
 	/**