@selvajs/ui 0.9.1 → 0.9.3

package/dist/components/compute/AppLayout.svelte

@@ -156,7 +156,9 @@
 
 <div
 	data-layout-root
-	class="min-h-0 sm:flex-row sm:px-(--page-px) sm:py-(--page-py) flex flex-1 flex-col overflow-hidden"
+	class="min-h-0 sm:flex-row sm:py-(--page-py) flex flex-1 flex-col overflow-hidden {leftCollapsed
+		? 'sm:pl-0'
+		: 'sm:pl-(--page-px)'} {rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
 >
@@ -304,6 +306,7 @@
 						collapsedSize={0}
 						onCollapse={() => (leftCollapsed = true)}
 						onExpand={() => (leftCollapsed = false)}
+						class="ml-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || leftCollapsed
@@ -314,7 +317,12 @@
 						</div>
 					</Resizable.Pane>
 					<Resizable.Handle
-						class={leftCollapsed ? 'pointer-events-none hidden' : 'bg-transparent'}
+						withHandle
+						class="bg-transparent"
+						data-collapsed={leftCollapsed}
+						onclick={() => {
+							if (leftCollapsed) leftPaneRef?.expand();
+						}}
 					/>
 				{/if}
 
@@ -335,7 +343,12 @@
 				<!-- Right pane -->
 				{#if hasRightPanel}
 					<Resizable.Handle
-						class={rightCollapsed ? ' pointer-events-none hidden' : 'bg-transparent'}
+						withHandle
+						class="bg-transparent"
+						data-collapsed={rightCollapsed}
+						onclick={() => {
+							if (rightCollapsed) rightPaneRef?.expand();
+						}}
 					/>
 					<Resizable.Pane
 						bind:this={rightPaneRef}
@@ -347,6 +360,7 @@
 						collapsedSize={0}
 						onCollapse={() => (rightCollapsed = true)}
 						onExpand={() => (rightCollapsed = false)}
+						class="mr-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || rightCollapsed
@@ -386,6 +400,12 @@
 		padding: 0 !important;
 	}
 
+	/* When the adjacent pane is collapsed, override paneforge's inline
+	   ew-resize cursor — there's nothing to drag from in this state. */
+	:global([data-pane-resizer][data-collapsed='true']) {
+		cursor: pointer !important;
+	}
+
 	.panel-content-wrapper {
 		display: flex;
 		flex-direction: column;

package/dist/components/compute/CollapsedPanelStrip.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
-	import { ChevronRight, ChevronLeft, ChevronDown } from '@lucide/svelte';
 	import Icon from '@iconify/svelte';
 
 	interface Props {
@@ -12,29 +11,34 @@
 	}
 
 	let { side, tabs, collapsedWidth, onExpand, onTabClick }: Props = $props();
+
+	const railClass = $derived(
+		[
+			'gap-1 py-2 lg:py-3 lg:flex-col lg:w-auto px-2 lg:px-0',
+			'flex w-full shrink-0 flex-row items-center',
+			'backdrop-blur-sm bg-background/90 cursor-pointer'
+		].join(' ')
+	);
+
+	const tabButtonClass =
+		'w-8 h-8 rounded cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
 </script>
 
 <div
-	class="gap-2 py-3 lg:py-4 lg:flex-col lg:w-auto px-3 lg:px-0 lg:rounded-md flex w-full shrink-0 cursor-pointer flex-row items-center border-2 border-border bg-muted transition-colors hover:bg-muted/70"
-	style="lg:width: {collapsedWidth}px"
+	class={railClass}
+	style="--collapsed-w: {collapsedWidth}px;"
 	role="button"
 	tabindex="0"
+	aria-label="Expand {side} panel"
 	onclick={onExpand}
-	onkeydown={(e) => e.key === 'Enter' && onExpand()}
-	title="Expand {side} panel"
+	onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && onExpand()}
 >
-	<!-- Mobile chevron (top of row) -->
-	{#if side === 'left'}
-		<div class="lg:hidden text-muted-foreground">
-			<ChevronDown size={14} />
-		</div>
-	{/if}
-
 	{#each tabs as tab (tab.id)}
 		<button
 			type="button"
-			class="w-8 h-8 m-1 rounded text-xs font-semibold shadow-sm flex shrink-0 items-center justify-center bg-background text-foreground transition-colors select-none hover:bg-accent/80"
+			class={tabButtonClass}
 			title={tab.label}
+			aria-label={tab.label}
 			onclick={(e) => {
 				e.stopPropagation();
 				onTabClick(tab.id);
@@ -44,21 +48,22 @@
 				{#if tab.icon.includes(':')}
 					<Icon icon={tab.icon} class="h-4 w-4" />
 				{:else}
-					<span>{tab.icon}</span>
+					<span class="text-xs font-semibold">{tab.icon}</span>
 				{/if}
 			{:else}
-				<span>{tab.label[0]?.toUpperCase() ?? '?'}</span>
+				<span class="text-xs font-semibold">{tab.label[0]?.toUpperCase() ?? '?'}</span>
 			{/if}
 		</button>
 	{/each}
-
-	{#if side === 'left'}
-		<div class="lg:block mt-auto hidden text-muted-foreground">
-			<ChevronRight size={14} />
-		</div>
-	{:else if side === 'right'}
-		<div class="lg:block mt-auto hidden text-muted-foreground">
-			<ChevronLeft size={14} />
-		</div>
-	{/if}
 </div>
+
+<style>
+	div {
+		min-width: 0;
+	}
+	@media (min-width: 1024px) {
+		div {
+			width: var(--collapsed-w);
+		}
+	}
+</style>

package/dist/components/compute/ComputeApp.svelte

@@ -12,6 +12,7 @@
 	import AppShell from '../layout/AppShell.svelte';
 	import AppLayout from './AppLayout.svelte';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
+	import { getExternalInputs, readExternalValue } from '../../external/storage';
 
 	import type { Snippet } from 'svelte';
 
@@ -34,6 +35,11 @@
 		footerItemPriority?: number;
 		onReady?: (api: { loadValues: (values: Record<string, unknown>) => void }) => void;
 		headerRight?: Snippet;
+		/**
+		 * Stable identifier used to scope sessionStorage entries for external-input
+		 * values. If absent, falls back to definitionKey, then to schema.id.
+		 */
+		externalScopeKey?: string;
 	}
 
 	let {
@@ -53,12 +59,22 @@
 		footerItemId = 'footer-item',
 		footerItemPriority = 0,
 		headerRight,
-		onReady
+		onReady,
+		externalScopeKey
 	}: Props = $props();
 
-	function createInitialValues(s: UISchema) {
+	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
+
+	function createInitialValues(s: UISchema, scopeKey: string) {
+		const externalSet = new Set(getExternalInputs(s).map((e) => e.paramId));
 		const v: Record<string, unknown> = {};
 		for (const input of s.inputs) {
+			if (externalSet.has(input.id)) {
+				const stored = readExternalValue({ scopeKey, inputId: input.id });
+				if (stored !== undefined) v[input.id] = stored;
+				// else: leave undefined so the missing-inputs panel can detect it
+				continue;
+			}
 			v[input.id] = input.default ?? getDefaultValue(input.paramType);
 		}
 		for (const output of s.outputs) {
@@ -68,7 +84,9 @@
 	}
 
 	// svelte-ignore state_referenced_locally
-	let values = $state<Record<string, unknown>>(createInitialValues(schema));
+	let values = $state<Record<string, unknown>>(
+		createInitialValues(schema, externalScopeKey || definitionKey || schema?.id || '')
+	);
 	let error = $state('');
 	let computeErrors = $state<string[]>([]);
 	let computeWarnings = $state<string[]>([]);
@@ -144,7 +162,7 @@
 				}
 			} else if (previousDefinitionKey !== definitionKey) {
 				meshes = [];
-				values = createInitialValues(schema);
+				values = createInitialValues(schema, resolvedScopeKey);
 				error = '';
 				computeErrors = [];
 				computeWarnings = [];

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

@@ -23,6 +23,11 @@ interface Props {
         loadValues: (values: Record<string, unknown>) => void;
     }) => void;
     headerRight?: Snippet;
+    /**
+     * Stable identifier used to scope sessionStorage entries for external-input
+     * values. If absent, falls back to definitionKey, then to schema.id.
+     */
+    externalScopeKey?: string;
 }
 declare const ComputeApp: import("svelte").Component<Props, {}, "">;
 type ComputeApp = ReturnType<typeof ComputeApp>;

package/dist/components/preview/Group.svelte

@@ -43,13 +43,40 @@
 			onToggle();
 		}
 	}
+
+	/**
+	 * Compute the column position (0-indexed) where each item starts, accounting
+	 * for spans and linebreak resets. Items hidden by visibility don't consume
+	 * a slot (matching what the renderer does — they're skipped entirely).
+	 */
+	const columnStarts = $derived.by(() => {
+		const positions: number[] = [];
+		let col = 0;
+		for (const item of items) {
+			if (item.type === 'linebreak') {
+				positions.push(0);
+				col = 0;
+				continue;
+			}
+			const visibility = evaluateVisibility(item, values);
+			if (!visibility.visible) {
+				positions.push(0);
+				continue;
+			}
+			const span = Math.min(Math.max(1, item.span ?? 1), columns);
+			if (col + span > columns) col = 0;
+			positions.push(col);
+			col = (col + span) % columns;
+		}
+		return positions;
+	});
 </script>
 
 {#if flat}
 	<div class="p-6">
 		<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-			{#each items as layoutItem (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-				{@render gridItem(layoutItem, columns)}
+			{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+				{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
 			{/each}
 		</div>
 	</div>
@@ -79,8 +106,8 @@
 			<div class="content-inner">
 				<Card.Content class="p-6">
 					<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-						{#each items as layoutItem (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-							{@render gridItem(layoutItem, columns)}
+						{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+							{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
 						{/each}
 					</div>
 				</Card.Content>
@@ -89,7 +116,7 @@
 	</Card.Root>
 {/if}
 
-{#snippet gridItem(layoutItem: LayoutItem, cols: number)}
+{#snippet gridItem(layoutItem: LayoutItem, cols: number, isFirstInRow: boolean)}
 	{#if layoutItem.type === 'linebreak'}
 		<div style="grid-column: 1 / -1" class="h-px bg-border" aria-hidden="true"></div>
 	{:else}
@@ -98,14 +125,19 @@
 		{#if visibility.visible}
 			{#if layoutItem.type === 'input'}
 				<div
-					class="min-w-0 flex items-center"
+					class="grid-cell min-w-0 flex items-center"
 					class:opacity-50={visibility.disabled}
+					class:col-divider={!isFirstInRow && cols > 1}
 					style="grid-column: span {span} / span {span}"
 				>
 					{@render inputSnippet(layoutItem, visibility)}
 				</div>
 			{:else if layoutItem.type === 'output'}
-				<div style="grid-column: span {span} / span {span}">
+				<div
+					class="grid-cell"
+					class:col-divider={!isFirstInRow && cols > 1}
+					style="grid-column: span {span} / span {span}"
+				>
 					{@render outputSnippet(layoutItem)}
 				</div>
 			{/if}
@@ -131,4 +163,22 @@
 	.schema-grid {
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
 	}
+
+	/* Vertical divider painted in the column gap. `gap-6` is 24px, so a 12px
+	   negative margin + 12px padding centres the 1px line in the gutter. */
+	.col-divider {
+		border-left: 1px solid var(--border);
+		padding-left: 12px;
+		margin-left: -12px;
+	}
+
+	/* When the container collapses the grid to 1 visual column, the items are
+	   stacked and the divider would float on the left of every row. Hide it. */
+	@container (max-width: 320px) {
+		.col-divider {
+			border-left: 0;
+			padding-left: 0;
+			margin-left: 0;
+		}
+	}
 </style>

package/dist/components/preview/InputControl.svelte

@@ -41,6 +41,21 @@
 	const inputId = $derived(`input-${item.paramId}`);
 	const label = $derived(displayName || item.displayName || item.paramId);
 
+	// Number range hint — shown next to label for sliders, under the input for plain number fields.
+	const numberRangeHint = $derived.by(() => {
+		if (!isNumberWidget(item)) return null;
+		const cfg = item.config;
+		if (cfg?.hideRange) return null;
+		const hasMin = typeof cfg?.minimum === 'number';
+		const hasMax = typeof cfg?.maximum === 'number';
+		if (!hasMin && !hasMax) return null;
+		if (hasMin && hasMax) return `${cfg!.minimum} to ${cfg!.maximum}`;
+		if (hasMin) return `≥ ${cfg!.minimum}`;
+		return `≤ ${cfg!.maximum}`;
+	});
+
+	const showRangeInLabel = $derived(isNumberWidget(item) && numberRangeHint !== null);
+
 	function commit(newValue: SupportedTypes) {
 		value = newValue;
 		onChange(item.paramId, newValue);
@@ -63,6 +78,9 @@
 				</Dialog.Content>
 			</Dialog.Root>
 		{/if}
+		{#if showRangeInLabel}
+			<span class="text-xs font-normal text-muted-foreground">{numberRangeHint}</span>
+		{/if}
 	</Field.Label>
 
 	{#if isNumberWidget(item)}

package/dist/components/preview/OutputDisplay.svelte

@@ -63,7 +63,8 @@
 
 	function buildTree(files: FileData[]): SvelteMap<string, TreeNode> {
 		const root = new SvelteMap<string, TreeNode>();
-		for (const file of files) {
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i];
 			const parts = (file.subFolder || '').split('/').filter(Boolean);
 			let current = root;
 			for (const part of parts) {
@@ -73,7 +74,9 @@
 				const node = current.get(part)!;
 				if (node.type === 'folder') current = node.children;
 			}
-			current.set(file.fileName + file.fileType, { type: 'file', file });
+			const baseKey = `${file.fileName}${file.fileType ?? ''}`;
+			const key = current.has(baseKey) ? `${baseKey}#${i}` : baseKey;
+			current.set(key, { type: 'file', file });
 		}
 		return root;
 	}
@@ -93,6 +96,24 @@
 	const hasSubFolders = $derived(filesArray.some((f) => f.subFolder && f.subFolder.length > 0));
 	const fileTree = $derived(hasSubFolders ? buildTree(filesArray) : null);
 
+	function fullPath(f: FileData): string {
+		const folder = (f.subFolder || '').replace(/^\/+|\/+$/g, '');
+		const name = `${f.fileName}${f.fileType ?? ''}`;
+		return folder ? `${folder}/${name}` : name;
+	}
+
+	const duplicatePaths = $derived.by(() => {
+		const seen = new Map<string, number>();
+		for (const f of filesArray) {
+			const key = fullPath(f);
+			seen.set(key, (seen.get(key) ?? 0) + 1);
+		}
+		return Array.from(seen.entries())
+			.filter(([, n]) => n > 1)
+			.map(([path]) => path);
+	});
+	const hasDuplicates = $derived(duplicatePaths.length > 0);
+
 	// All folders expanded by default
 	let expandedFolders = new SvelteSet<string>();
 
@@ -220,7 +241,7 @@
 							{@render treeNodes(fileTree, '')}
 						{:else}
 							<div class="gap-1 flex flex-col">
-								{#each filesArray as file (file.fileName + file.fileType)}
+								{#each filesArray as file, i (fullPath(file) + '#' + i)}
 									<div
 										class="gap-2 text-xs flex items-center justify-between text-muted-foreground"
 									>
@@ -233,6 +254,24 @@
 					</div>
 				{/if}
 			</div>
+			{#if hasDuplicates}
+				<div
+					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
+				>
+					<div class="font-medium">Duplicate file names detected</div>
+					<div class="mt-1 text-xs">
+						The following {duplicatePaths.length === 1 ? 'path appears' : 'paths appear'} more than once:
+					</div>
+					<ul class="mt-1 ml-4 text-xs list-disc">
+						{#each duplicatePaths as path (path)}
+							<li class="truncate"><span class="font-mono">{path}</span></li>
+						{/each}
+					</ul>
+					<div class="mt-1 text-xs">
+						Rename outputs in your Grasshopper definition so each file has a unique name.
+					</div>
+				</div>
+			{/if}
 			{#if downloadError}
 				<div
 					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
@@ -240,7 +279,11 @@
 					{downloadError}
 				</div>
 			{/if}
-			<Button onclick={handleDownload} disabled={downloading} class="w-full">
+			<Button
+				onclick={handleDownload}
+				disabled={downloading || hasDuplicates}
+				class="w-full"
+			>
 				{downloading
 					? 'Downloading...'
 					: `Download ${fileCount === 1 ? 'File' : `${fileCount} Files`}`}

package/dist/components/preview/TabBar.svelte

@@ -10,9 +10,26 @@
 	}
 
 	let { tabs, onTabChange }: Props = $props();
+
+	let viewportRef = $state<HTMLElement | null>(null);
+
+	function handleWheel(e: WheelEvent) {
+		if (!viewportRef) return;
+		// Trackpad horizontal swipes already produce deltaX — let those pass through.
+		if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+		const canScroll = viewportRef.scrollWidth > viewportRef.clientWidth;
+		if (!canScroll) return;
+		e.preventDefault();
+		viewportRef.scrollLeft += e.deltaY;
+	}
 </script>
 
-<ScrollArea class="w-full shrink-0 border-b border-border" orientation="horizontal">
+<ScrollArea
+	bind:viewportRef
+	class="w-full shrink-0 border-b border-border"
+	orientation="horizontal"
+	onwheel={handleWheel}
+>
 	<Tabs.List
 		class="px-2 py-2 gap-0 inline-flex h-auto w-max justify-start rounded-none bg-transparent"
 	>

package/dist/components/primitives/resizable/resizable-handle.svelte

@@ -16,12 +16,14 @@
 	bind:ref
 	data-slot="resizable-handle"
 	class={cn(
-		'cn-resizable-handle after:inset-y-0 after:w-1 data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center bg-border after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
+		'cn-resizable-handle group/handle after:inset-y-0 after:w-1 data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center bg-border after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="h-6 w-1 z-10 flex shrink-0 rounded-lg bg-border"></div>
+		<div
+			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition-[background-color,transform] duration-150 group-hover/handle:bg-foreground/40 group-hover/handle:scale-y-110 group-active/handle:bg-foreground/60"
+		></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/dist/external/storage.d.ts

@@ -0,0 +1,15 @@
+import type { UISchema } from '@selvajs/schemas';
+export interface ExternalValueRef {
+    scopeKey: string;
+    inputId: string;
+}
+export declare function writeExternalValue(args: ExternalValueRef & {
+    value: unknown;
+}): void;
+export declare function readExternalValue(ref: ExternalValueRef): unknown | undefined;
+export declare function clearExternalValue(ref: ExternalValueRef): void;
+export interface ExternalInput {
+    paramId: string;
+    displayName: string;
+}
+export declare function getExternalInputs(schema: UISchema): ExternalInput[];

package/dist/external/storage.js

@@ -0,0 +1,70 @@
+// External-input transit storage.
+//
+// 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.
+//
+// inputId is the Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id).
+const STORAGE_PREFIX = 'external';
+function makeKey(scopeKey, inputId) {
+    return `${STORAGE_PREFIX}:${scopeKey}:${inputId}`;
+}
+export function writeExternalValue(args) {
+    const { scopeKey, inputId, value } = args;
+    if (!scopeKey || !inputId)
+        return;
+    if (typeof sessionStorage === 'undefined')
+        return;
+    sessionStorage.setItem(makeKey(scopeKey, inputId), JSON.stringify(value));
+}
+export function readExternalValue(ref) {
+    const { scopeKey, inputId } = ref;
+    if (!scopeKey || !inputId)
+        return undefined;
+    if (typeof sessionStorage === 'undefined')
+        return undefined;
+    const raw = sessionStorage.getItem(makeKey(scopeKey, inputId));
+    if (raw === null)
+        return undefined;
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return undefined;
+    }
+}
+export function clearExternalValue(ref) {
+    const { scopeKey, inputId } = ref;
+    if (!scopeKey || !inputId)
+        return;
+    if (typeof sessionStorage === 'undefined')
+        return;
+    sessionStorage.removeItem(makeKey(scopeKey, inputId));
+}
+function* walkLayoutItems(schema) {
+    const groups = schema.layout.type === 'tabbed'
+        ? schema.layout.tabs.flatMap((t) => t.groups)
+        : schema.layout.groups;
+    for (const group of groups) {
+        for (const item of group.items) {
+            yield item;
+        }
+    }
+}
+export function getExternalInputs(schema) {
+    const result = [];
+    for (const item of walkLayoutItems(schema)) {
+        if (item.type !== 'input')
+            continue;
+        const source = item.source;
+        if (source?.kind !== 'external')
+            continue;
+        result.push({
+            paramId: item.paramId,
+            displayName: item.displayName ?? item.paramId
+        });
+    }
+    return result;
+}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as StateDisplay } from './components/primitives/StateDisplay.sv
 export { default as Viewer } from './components/viewer/Viewer.svelte';
 export * from './schema/defaults';
 export * from './compute/solving.svelte';
+export * from './external/storage';
 export * from './contexts/footerContext.svelte';
 export * from './composables/useFooterItem.svelte';
 export * from './utils';

package/dist/index.js

@@ -13,6 +13,8 @@ export { default as Viewer } from './components/viewer/Viewer.svelte';
 // Utilities
 export * from './schema/defaults';
 export * from './compute/solving.svelte';
+// External-input transit storage (used by routes that wire pre-step producers)
+export * from './external/storage';
 // Contexts & Composables
 export * from './contexts/footerContext.svelte';
 export * from './composables/useFooterItem.svelte';

package/dist/schema/visibility-rules.js

@@ -47,6 +47,9 @@ const ACTIONS = {
 export function evaluateVisibility(item, values) {
     if (item.type === 'linebreak')
         return { visible: true, disabled: false };
+    if ('visible' in item && item.visible === false) {
+        return { visible: false, disabled: false };
+    }
     if (!item.visibilityCondition?.rules)
         return { visible: true, disabled: false };
     const { action = 'show', defaultValue } = item.visibilityCondition;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@selvajs/ui",
-	"version": "0.9.1",
+	"version": "0.9.3",
 	"description": "Shared UI components and utilities for Selva applications",
 	"license": "MIT",
 	"publishConfig": {

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

@@ -156,7 +156,9 @@
 
 <div
 	data-layout-root
-	class="min-h-0 sm:flex-row sm:px-(--page-px) sm:py-(--page-py) flex flex-1 flex-col overflow-hidden"
+	class="min-h-0 sm:flex-row sm:py-(--page-py) flex flex-1 flex-col overflow-hidden {leftCollapsed
+		? 'sm:pl-0'
+		: 'sm:pl-(--page-px)'} {rightCollapsed ? 'sm:pr-0' : 'sm:pr-(--page-px)'}"
 	class:fullscreen-layout={isViewerFullscreen}
 	class:relative={isMobile}
 >
@@ -304,6 +306,7 @@
 						collapsedSize={0}
 						onCollapse={() => (leftCollapsed = true)}
 						onExpand={() => (leftCollapsed = false)}
+						class="ml-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || leftCollapsed
@@ -314,7 +317,12 @@
 						</div>
 					</Resizable.Pane>
 					<Resizable.Handle
-						class={leftCollapsed ? 'pointer-events-none hidden' : 'bg-transparent'}
+						withHandle
+						class="bg-transparent"
+						data-collapsed={leftCollapsed}
+						onclick={() => {
+							if (leftCollapsed) leftPaneRef?.expand();
+						}}
 					/>
 				{/if}
 
@@ -335,7 +343,12 @@
 				<!-- Right pane -->
 				{#if hasRightPanel}
 					<Resizable.Handle
-						class={rightCollapsed ? ' pointer-events-none hidden' : 'bg-transparent'}
+						withHandle
+						class="bg-transparent"
+						data-collapsed={rightCollapsed}
+						onclick={() => {
+							if (rightCollapsed) rightPaneRef?.expand();
+						}}
 					/>
 					<Resizable.Pane
 						bind:this={rightPaneRef}
@@ -347,6 +360,7 @@
 						collapsedSize={0}
 						onCollapse={() => (rightCollapsed = true)}
 						onExpand={() => (rightCollapsed = false)}
+						class="mr-1"
 					>
 						<div
 							class="min-h-0 flex h-full flex-col {isViewerFullscreen || rightCollapsed
@@ -386,6 +400,12 @@
 		padding: 0 !important;
 	}
 
+	/* When the adjacent pane is collapsed, override paneforge's inline
+	   ew-resize cursor — there's nothing to drag from in this state. */
+	:global([data-pane-resizer][data-collapsed='true']) {
+		cursor: pointer !important;
+	}
+
 	.panel-content-wrapper {
 		display: flex;
 		flex-direction: column;

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { TabConfig } from '@selvajs/schemas';
-	import { ChevronRight, ChevronLeft, ChevronDown } from '@lucide/svelte';
 	import Icon from '@iconify/svelte';
 
 	interface Props {
@@ -12,29 +11,34 @@
 	}
 
 	let { side, tabs, collapsedWidth, onExpand, onTabClick }: Props = $props();
+
+	const railClass = $derived(
+		[
+			'gap-1 py-2 lg:py-3 lg:flex-col lg:w-auto px-2 lg:px-0',
+			'flex w-full shrink-0 flex-row items-center',
+			'backdrop-blur-sm bg-background/90 cursor-pointer'
+		].join(' ')
+	);
+
+	const tabButtonClass =
+		'w-8 h-8 rounded cursor-pointer flex shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground';
 </script>
 
 <div
-	class="gap-2 py-3 lg:py-4 lg:flex-col lg:w-auto px-3 lg:px-0 lg:rounded-md flex w-full shrink-0 cursor-pointer flex-row items-center border-2 border-border bg-muted transition-colors hover:bg-muted/70"
-	style="lg:width: {collapsedWidth}px"
+	class={railClass}
+	style="--collapsed-w: {collapsedWidth}px;"
 	role="button"
 	tabindex="0"
+	aria-label="Expand {side} panel"
 	onclick={onExpand}
-	onkeydown={(e) => e.key === 'Enter' && onExpand()}
-	title="Expand {side} panel"
+	onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && onExpand()}
 >
-	<!-- Mobile chevron (top of row) -->
-	{#if side === 'left'}
-		<div class="lg:hidden text-muted-foreground">
-			<ChevronDown size={14} />
-		</div>
-	{/if}
-
 	{#each tabs as tab (tab.id)}
 		<button
 			type="button"
-			class="w-8 h-8 m-1 rounded text-xs font-semibold shadow-sm flex shrink-0 items-center justify-center bg-background text-foreground transition-colors select-none hover:bg-accent/80"
+			class={tabButtonClass}
 			title={tab.label}
+			aria-label={tab.label}
 			onclick={(e) => {
 				e.stopPropagation();
 				onTabClick(tab.id);
@@ -44,21 +48,22 @@
 				{#if tab.icon.includes(':')}
 					<Icon icon={tab.icon} class="h-4 w-4" />
 				{:else}
-					<span>{tab.icon}</span>
+					<span class="text-xs font-semibold">{tab.icon}</span>
 				{/if}
 			{:else}
-				<span>{tab.label[0]?.toUpperCase() ?? '?'}</span>
+				<span class="text-xs font-semibold">{tab.label[0]?.toUpperCase() ?? '?'}</span>
 			{/if}
 		</button>
 	{/each}
-
-	{#if side === 'left'}
-		<div class="lg:block mt-auto hidden text-muted-foreground">
-			<ChevronRight size={14} />
-		</div>
-	{:else if side === 'right'}
-		<div class="lg:block mt-auto hidden text-muted-foreground">
-			<ChevronLeft size={14} />
-		</div>
-	{/if}
 </div>
+
+<style>
+	div {
+		min-width: 0;
+	}
+	@media (min-width: 1024px) {
+		div {
+			width: var(--collapsed-w);
+		}
+	}
+</style>

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

@@ -12,6 +12,7 @@
 	import AppShell from '../layout/AppShell.svelte';
 	import AppLayout from './AppLayout.svelte';
 	import StateDisplay from '../primitives/StateDisplay.svelte';
+	import { getExternalInputs, readExternalValue } from '../../external/storage';
 
 	import type { Snippet } from 'svelte';
 
@@ -34,6 +35,11 @@
 		footerItemPriority?: number;
 		onReady?: (api: { loadValues: (values: Record<string, unknown>) => void }) => void;
 		headerRight?: Snippet;
+		/**
+		 * Stable identifier used to scope sessionStorage entries for external-input
+		 * values. If absent, falls back to definitionKey, then to schema.id.
+		 */
+		externalScopeKey?: string;
 	}
 
 	let {
@@ -53,12 +59,22 @@
 		footerItemId = 'footer-item',
 		footerItemPriority = 0,
 		headerRight,
-		onReady
+		onReady,
+		externalScopeKey
 	}: Props = $props();
 
-	function createInitialValues(s: UISchema) {
+	const resolvedScopeKey = $derived(externalScopeKey || definitionKey || schema?.id || '');
+
+	function createInitialValues(s: UISchema, scopeKey: string) {
+		const externalSet = new Set(getExternalInputs(s).map((e) => e.paramId));
 		const v: Record<string, unknown> = {};
 		for (const input of s.inputs) {
+			if (externalSet.has(input.id)) {
+				const stored = readExternalValue({ scopeKey, inputId: input.id });
+				if (stored !== undefined) v[input.id] = stored;
+				// else: leave undefined so the missing-inputs panel can detect it
+				continue;
+			}
 			v[input.id] = input.default ?? getDefaultValue(input.paramType);
 		}
 		for (const output of s.outputs) {
@@ -68,7 +84,9 @@
 	}
 
 	// svelte-ignore state_referenced_locally
-	let values = $state<Record<string, unknown>>(createInitialValues(schema));
+	let values = $state<Record<string, unknown>>(
+		createInitialValues(schema, externalScopeKey || definitionKey || schema?.id || '')
+	);
 	let error = $state('');
 	let computeErrors = $state<string[]>([]);
 	let computeWarnings = $state<string[]>([]);
@@ -144,7 +162,7 @@
 				}
 			} else if (previousDefinitionKey !== definitionKey) {
 				meshes = [];
-				values = createInitialValues(schema);
+				values = createInitialValues(schema, resolvedScopeKey);
 				error = '';
 				computeErrors = [];
 				computeWarnings = [];

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

@@ -43,13 +43,40 @@
 			onToggle();
 		}
 	}
+
+	/**
+	 * Compute the column position (0-indexed) where each item starts, accounting
+	 * for spans and linebreak resets. Items hidden by visibility don't consume
+	 * a slot (matching what the renderer does — they're skipped entirely).
+	 */
+	const columnStarts = $derived.by(() => {
+		const positions: number[] = [];
+		let col = 0;
+		for (const item of items) {
+			if (item.type === 'linebreak') {
+				positions.push(0);
+				col = 0;
+				continue;
+			}
+			const visibility = evaluateVisibility(item, values);
+			if (!visibility.visible) {
+				positions.push(0);
+				continue;
+			}
+			const span = Math.min(Math.max(1, item.span ?? 1), columns);
+			if (col + span > columns) col = 0;
+			positions.push(col);
+			col = (col + span) % columns;
+		}
+		return positions;
+	});
 </script>
 
 {#if flat}
 	<div class="p-6">
 		<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-			{#each items as layoutItem (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-				{@render gridItem(layoutItem, columns)}
+			{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+				{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
 			{/each}
 		</div>
 	</div>
@@ -79,8 +106,8 @@
 			<div class="content-inner">
 				<Card.Content class="p-6">
 					<div class="schema-grid gap-6 grid" style="--schema-cols: {columns};">
-						{#each items as layoutItem (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
-							{@render gridItem(layoutItem, columns)}
+						{#each items as layoutItem, i (layoutItem.type === 'linebreak' ? layoutItem.id : layoutItem.paramId)}
+							{@render gridItem(layoutItem, columns, columnStarts[i] === 0)}
 						{/each}
 					</div>
 				</Card.Content>
@@ -89,7 +116,7 @@
 	</Card.Root>
 {/if}
 
-{#snippet gridItem(layoutItem: LayoutItem, cols: number)}
+{#snippet gridItem(layoutItem: LayoutItem, cols: number, isFirstInRow: boolean)}
 	{#if layoutItem.type === 'linebreak'}
 		<div style="grid-column: 1 / -1" class="h-px bg-border" aria-hidden="true"></div>
 	{:else}
@@ -98,14 +125,19 @@
 		{#if visibility.visible}
 			{#if layoutItem.type === 'input'}
 				<div
-					class="min-w-0 flex items-center"
+					class="grid-cell min-w-0 flex items-center"
 					class:opacity-50={visibility.disabled}
+					class:col-divider={!isFirstInRow && cols > 1}
 					style="grid-column: span {span} / span {span}"
 				>
 					{@render inputSnippet(layoutItem, visibility)}
 				</div>
 			{:else if layoutItem.type === 'output'}
-				<div style="grid-column: span {span} / span {span}">
+				<div
+					class="grid-cell"
+					class:col-divider={!isFirstInRow && cols > 1}
+					style="grid-column: span {span} / span {span}"
+				>
 					{@render outputSnippet(layoutItem)}
 				</div>
 			{/if}
@@ -131,4 +163,22 @@
 	.schema-grid {
 		grid-template-columns: repeat(var(--schema-cols), minmax(0, 1fr));
 	}
+
+	/* Vertical divider painted in the column gap. `gap-6` is 24px, so a 12px
+	   negative margin + 12px padding centres the 1px line in the gutter. */
+	.col-divider {
+		border-left: 1px solid var(--border);
+		padding-left: 12px;
+		margin-left: -12px;
+	}
+
+	/* When the container collapses the grid to 1 visual column, the items are
+	   stacked and the divider would float on the left of every row. Hide it. */
+	@container (max-width: 320px) {
+		.col-divider {
+			border-left: 0;
+			padding-left: 0;
+			margin-left: 0;
+		}
+	}
 </style>

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

@@ -41,6 +41,21 @@
 	const inputId = $derived(`input-${item.paramId}`);
 	const label = $derived(displayName || item.displayName || item.paramId);
 
+	// Number range hint — shown next to label for sliders, under the input for plain number fields.
+	const numberRangeHint = $derived.by(() => {
+		if (!isNumberWidget(item)) return null;
+		const cfg = item.config;
+		if (cfg?.hideRange) return null;
+		const hasMin = typeof cfg?.minimum === 'number';
+		const hasMax = typeof cfg?.maximum === 'number';
+		if (!hasMin && !hasMax) return null;
+		if (hasMin && hasMax) return `${cfg!.minimum} to ${cfg!.maximum}`;
+		if (hasMin) return `≥ ${cfg!.minimum}`;
+		return `≤ ${cfg!.maximum}`;
+	});
+
+	const showRangeInLabel = $derived(isNumberWidget(item) && numberRangeHint !== null);
+
 	function commit(newValue: SupportedTypes) {
 		value = newValue;
 		onChange(item.paramId, newValue);
@@ -63,6 +78,9 @@
 				</Dialog.Content>
 			</Dialog.Root>
 		{/if}
+		{#if showRangeInLabel}
+			<span class="text-xs font-normal text-muted-foreground">{numberRangeHint}</span>
+		{/if}
 	</Field.Label>
 
 	{#if isNumberWidget(item)}

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

@@ -63,7 +63,8 @@
 
 	function buildTree(files: FileData[]): SvelteMap<string, TreeNode> {
 		const root = new SvelteMap<string, TreeNode>();
-		for (const file of files) {
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i];
 			const parts = (file.subFolder || '').split('/').filter(Boolean);
 			let current = root;
 			for (const part of parts) {
@@ -73,7 +74,9 @@
 				const node = current.get(part)!;
 				if (node.type === 'folder') current = node.children;
 			}
-			current.set(file.fileName + file.fileType, { type: 'file', file });
+			const baseKey = `${file.fileName}${file.fileType ?? ''}`;
+			const key = current.has(baseKey) ? `${baseKey}#${i}` : baseKey;
+			current.set(key, { type: 'file', file });
 		}
 		return root;
 	}
@@ -238,7 +241,7 @@
 							{@render treeNodes(fileTree, '')}
 						{:else}
 							<div class="gap-1 flex flex-col">
-								{#each filesArray as file (file.fileName + file.fileType)}
+								{#each filesArray as file, i (fullPath(file) + '#' + i)}
 									<div
 										class="gap-2 text-xs flex items-center justify-between text-muted-foreground"
 									>
@@ -251,6 +254,24 @@
 					</div>
 				{/if}
 			</div>
+			{#if hasDuplicates}
+				<div
+					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
+				>
+					<div class="font-medium">Duplicate file names detected</div>
+					<div class="mt-1 text-xs">
+						The following {duplicatePaths.length === 1 ? 'path appears' : 'paths appear'} more than once:
+					</div>
+					<ul class="mt-1 ml-4 text-xs list-disc">
+						{#each duplicatePaths as path (path)}
+							<li class="truncate"><span class="font-mono">{path}</span></li>
+						{/each}
+					</ul>
+					<div class="mt-1 text-xs">
+						Rename outputs in your Grasshopper definition so each file has a unique name.
+					</div>
+				</div>
+			{/if}
 			{#if downloadError}
 				<div
 					class="rounded px-3 py-2 text-sm border border-destructive bg-destructive/10 text-destructive"
@@ -258,7 +279,11 @@
 					{downloadError}
 				</div>
 			{/if}
-			<Button onclick={handleDownload} disabled={downloading} class="w-full">
+			<Button
+				onclick={handleDownload}
+				disabled={downloading || hasDuplicates}
+				class="w-full"
+			>
 				{downloading
 					? 'Downloading...'
 					: `Download ${fileCount === 1 ? 'File' : `${fileCount} Files`}`}

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

@@ -10,9 +10,26 @@
 	}
 
 	let { tabs, onTabChange }: Props = $props();
+
+	let viewportRef = $state<HTMLElement | null>(null);
+
+	function handleWheel(e: WheelEvent) {
+		if (!viewportRef) return;
+		// Trackpad horizontal swipes already produce deltaX — let those pass through.
+		if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
+		const canScroll = viewportRef.scrollWidth > viewportRef.clientWidth;
+		if (!canScroll) return;
+		e.preventDefault();
+		viewportRef.scrollLeft += e.deltaY;
+	}
 </script>
 
-<ScrollArea class="w-full shrink-0 border-b border-border" orientation="horizontal">
+<ScrollArea
+	bind:viewportRef
+	class="w-full shrink-0 border-b border-border"
+	orientation="horizontal"
+	onwheel={handleWheel}
+>
 	<Tabs.List
 		class="px-2 py-2 gap-0 inline-flex h-auto w-max justify-start rounded-none bg-transparent"
 	>

package/src/lib/components/primitives/resizable/resizable-handle.svelte

@@ -16,12 +16,14 @@
 	bind:ref
 	data-slot="resizable-handle"
 	class={cn(
-		'cn-resizable-handle after:inset-y-0 after:w-1 data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center bg-border after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
+		'cn-resizable-handle group/handle after:inset-y-0 after:w-1 data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:translate-x-0 relative flex w-px items-center justify-center bg-border after:absolute after:left-1/2 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90',
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="h-6 w-1 z-10 flex shrink-0 rounded-lg bg-border"></div>
+		<div
+			class="h-10 w-1 z-10 flex shrink-0 rounded-lg bg-border transition-[background-color,transform] duration-150 group-hover/handle:bg-foreground/40 group-hover/handle:scale-y-110 group-active/handle:bg-foreground/60"
+		></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/src/lib/external/storage.ts

@@ -0,0 +1,80 @@
+// External-input transit storage.
+//
+// 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.
+//
+// inputId is the Grasshopper parameter instance GUID (LayoutItem.paramId / SchemaInput.id).
+
+import type { UISchema, LayoutItem, GroupConfig, InputSource } from '@selvajs/schemas';
+
+const STORAGE_PREFIX = 'external';
+
+function makeKey(scopeKey: string, inputId: string): string {
+	return `${STORAGE_PREFIX}:${scopeKey}:${inputId}`;
+}
+
+export interface ExternalValueRef {
+	scopeKey: string;
+	inputId: string;
+}
+
+export function writeExternalValue(args: ExternalValueRef & { value: unknown }): void {
+	const { scopeKey, inputId, value } = args;
+	if (!scopeKey || !inputId) return;
+	if (typeof sessionStorage === 'undefined') return;
+	sessionStorage.setItem(makeKey(scopeKey, inputId), JSON.stringify(value));
+}
+
+export function readExternalValue(ref: ExternalValueRef): unknown | undefined {
+	const { scopeKey, inputId } = ref;
+	if (!scopeKey || !inputId) return undefined;
+	if (typeof sessionStorage === 'undefined') return undefined;
+	const raw = sessionStorage.getItem(makeKey(scopeKey, inputId));
+	if (raw === null) return undefined;
+	try {
+		return JSON.parse(raw);
+	} catch {
+		return undefined;
+	}
+}
+
+export function clearExternalValue(ref: ExternalValueRef): void {
+	const { scopeKey, inputId } = ref;
+	if (!scopeKey || !inputId) return;
+	if (typeof sessionStorage === 'undefined') return;
+	sessionStorage.removeItem(makeKey(scopeKey, inputId));
+}
+
+export interface ExternalInput {
+	paramId: string;
+	displayName: string;
+}
+
+function* walkLayoutItems(schema: UISchema): Generator<LayoutItem> {
+	const groups: GroupConfig[] =
+		schema.layout.type === 'tabbed'
+			? schema.layout.tabs.flatMap((t) => t.groups)
+			: schema.layout.groups;
+	for (const group of groups) {
+		for (const item of group.items) {
+			yield item;
+		}
+	}
+}
+
+export function getExternalInputs(schema: UISchema): ExternalInput[] {
+	const result: ExternalInput[] = [];
+	for (const item of walkLayoutItems(schema)) {
+		if (item.type !== 'input') continue;
+		const source = (item as { source?: InputSource }).source;
+		if (source?.kind !== 'external') continue;
+		result.push({
+			paramId: item.paramId,
+			displayName: item.displayName ?? item.paramId
+		});
+	}
+	return result;
+}

package/src/lib/index.ts

@@ -19,6 +19,9 @@ export { default as Viewer } from './components/viewer/Viewer.svelte';
 export * from './schema/defaults';
 export * from './compute/solving.svelte';
 
+// External-input transit storage (used by routes that wire pre-step producers)
+export * from './external/storage';
+
 // Contexts & Composables
 export * from './contexts/footerContext.svelte';
 export * from './composables/useFooterItem.svelte';

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

@@ -72,6 +72,9 @@ export function evaluateVisibility(
 	values: Record<string, unknown>
 ): VisibilityResult {
 	if (item.type === 'linebreak') return { visible: true, disabled: false };
+	if ('visible' in item && item.visible === false) {
+		return { visible: false, disabled: false };
+	}
 	if (!item.visibilityCondition?.rules) return { visible: true, disabled: false };
 
 	const { action = 'show', defaultValue } = item.visibilityCondition;