@selvajs/ui 6.4.0 → 6.5.0

package/dist/components/compute/AppLayout.svelte

@@ -13,6 +13,7 @@
 	import { Button } from '../..';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { buildVisibilityMap, isTabVisible, itemKey } from '../../schema/visibility-rules';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -68,12 +69,36 @@
 	const hasViewer = $derived(
 		!!(schema?.viewerOptions?.enableLocal || schema?.viewerOptions?.enableRemote)
 	);
-	const leftTabs = $derived(
-		schema.layout.type === 'tabbed' ? schema.layout.tabs.filter((t) => t.position !== 'right') : []
-	);
-	const rightTabs = $derived(
-		schema.layout.type === 'tabbed' ? schema.layout.tabs.filter((t) => t.position === 'right') : []
+	const shownTabs = $derived(
+		schema.layout.type === 'tabbed'
+			? schema.layout.tabs.filter((tab) => isTabVisible(tab, values))
+			: []
 	);
+	// A hidden or disabled input still solves, so reset it to its default — otherwise the
+	// value the user last set while it was visible keeps feeding the definition. Lives here,
+	// not in TabLayout: a panel whose tabs all hide unmounts and would miss the reset.
+	$effect(() => {
+		if (schema.layout.type !== 'tabbed') return;
+		const updates: Record<string, unknown> = {};
+		schema.layout.tabs.forEach((tab) =>
+			tab.groups.forEach((group) => {
+				const visibilityMap = buildVisibilityMap(group.items, values);
+				group.items.forEach((layoutItem) => {
+					if (layoutItem.type === 'linebreak') return;
+					const { visible, disabled, defaultValue } = visibilityMap[itemKey(layoutItem)];
+					const input = schema.inputs.find((i) => i.id === layoutItem.paramId);
+					if (!input || defaultValue === undefined) return;
+					if ((!visible || disabled) && values[input.id] !== defaultValue) {
+						updates[input.id] = defaultValue;
+					}
+				});
+			})
+		);
+		if (Object.keys(updates).length > 0) Object.assign(values, updates);
+	});
+
+	const leftTabs = $derived(shownTabs.filter((t) => t.position !== 'right'));
+	const rightTabs = $derived(shownTabs.filter((t) => t.position === 'right'));
 	const hasLeftPanel = $derived(leftTabs.length > 0);
 	const hasRightPanel = $derived(rightTabs.length > 0);
 	const hasSidebar = $derived(hasViewer || hasRightPanel);

package/dist/components/preview/TabLayout.svelte

@@ -4,7 +4,7 @@
 	import * as Tabs from '../primitives/tabs';
 	import TabBar from './TabBar.svelte';
 	import TabContent from './TabContent.svelte';
-	import { buildVisibilityMap, itemKey } from '../../schema/visibility-rules';
+	import { isTabVisible } from '../../schema/visibility-rules';
 	import { buildDynamicValueListOptions } from '../../schema/dynamic-value-list';
 
 	interface Props {
@@ -25,6 +25,7 @@
 	const visibleTabs = $derived(
 		schema.layout.type === 'tabbed'
 			? schema.layout.tabs.filter((tab) => {
+					if (!isTabVisible(tab, values)) return false;
 					if (!panelFilter) return true;
 					return panelFilter === 'right' ? tab.position === 'right' : tab.position !== 'right';
 				})
@@ -39,7 +40,7 @@
 	$effect(() => {
 		if (requestedTabId && visibleTabs.some((t) => t.id === requestedTabId)) {
 			activeTabId = requestedTabId;
-		} else if (visibleTabs.length > 0 && !activeTabId) {
+		} else if (visibleTabs.length > 0 && !visibleTabs.some((t) => t.id === activeTabId)) {
 			activeTabId = visibleTabs[0].id;
 		}
 	});
@@ -56,28 +57,6 @@
 		if (Object.keys(initial).length > 0) Object.assign(collapsedGroups, initial);
 	});
 
-	// A hidden or disabled input still solves, so reset it to its default — otherwise the
-	// value the user last set while it was visible keeps feeding the definition.
-	$effect(() => {
-		if (schema.layout.type !== 'tabbed') return;
-		const updates: Record<string, unknown> = {};
-		visibleTabs.forEach((tab) =>
-			tab.groups.forEach((group) => {
-				const visibilityMap = buildVisibilityMap(group.items, values);
-				group.items.forEach((layoutItem) => {
-					if (layoutItem.type === 'linebreak') return;
-					const { visible, disabled, defaultValue } = visibilityMap[itemKey(layoutItem)];
-					const input = schema.inputs.find((i) => i.id === layoutItem.paramId);
-					if (!input || defaultValue === undefined) return;
-					if ((!visible || disabled) && values[input.id] !== defaultValue) {
-						updates[input.id] = defaultValue;
-					}
-				});
-			})
-		);
-		if (Object.keys(updates).length > 0) Object.assign(values, updates);
-	});
-
 	function toggleGroup(groupId: string) {
 		collapsedGroups[groupId] = !collapsedGroups[groupId];
 	}

package/dist/schema/visibility-rules.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition } from '@selvajs/schemas';
+import type { LayoutItem, VisibilityRule, VisibilityCondition, GroupVisibilityCondition, TabConfig } from '@selvajs/schemas';
 export interface VisibilityResult {
     visible: boolean;
     disabled: boolean;
@@ -19,6 +19,7 @@ export declare function evaluateGroupVisibility(group: {
     visibilityCondition?: GroupVisibilityCondition;
     items?: LayoutItem[];
 }, values: Record<string, unknown>): boolean;
+export declare function isTabVisible(tab: TabConfig, values: Record<string, unknown>): boolean;
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/dist/schema/visibility-rules.js

@@ -82,6 +82,9 @@ export function evaluateGroupVisibility(group, values) {
     const met = evaluateCondition(group.visibilityCondition, values);
     return action === 'hide' ? !met : met;
 }
+export function isTabVisible(tab, values) {
+    return (tab.visible !== false && tab.groups.some((group) => evaluateGroupVisibility(group, values)));
+}
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -59,10 +59,10 @@
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
     "three": "^0.186.1",
-    "@selvajs/compute": "^4.2.0",
-    "@selvajs/schemas": "^5.1.0",
-    "@selvajs/solve": "^1.2.0",
-    "@selvajs/visualization": "^1.4.0"
+    "@selvajs/compute": "^4.2.1",
+    "@selvajs/schemas": "^5.2.0",
+    "@selvajs/solve": "^1.2.2",
+    "@selvajs/visualization": "^1.5.0"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -90,11 +90,11 @@
     "svelte": "5.57.1",
     "tailwind-variants": "^3.3.1",
     "vitest": "^5.0.2",
-    "@selvajs/compute": "4.2.0",
+    "@selvajs/compute": "4.2.1",
     "@selvajs/config": "0.0.4",
-    "@selvajs/visualization": "1.4.0",
-    "@selvajs/solve": "1.2.0",
-    "@selvajs/schemas": "5.1.0"
+    "@selvajs/schemas": "5.2.0",
+    "@selvajs/visualization": "1.5.0",
+    "@selvajs/solve": "1.2.2"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

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

@@ -13,6 +13,7 @@
 	import { Button } from '$lib';
 	import ParameterPresetManager from './ParameterPresetManager.svelte';
 	import { getLocaleContext } from '../../i18n/localeContext.svelte';
+	import { buildVisibilityMap, isTabVisible, itemKey } from '../../schema/visibility-rules';
 
 	const locale = getLocaleContext();
 	const t = $derived(locale.messages);
@@ -68,12 +69,36 @@
 	const hasViewer = $derived(
 		!!(schema?.viewerOptions?.enableLocal || schema?.viewerOptions?.enableRemote)
 	);
-	const leftTabs = $derived(
-		schema.layout.type === 'tabbed' ? schema.layout.tabs.filter((t) => t.position !== 'right') : []
-	);
-	const rightTabs = $derived(
-		schema.layout.type === 'tabbed' ? schema.layout.tabs.filter((t) => t.position === 'right') : []
+	const shownTabs = $derived(
+		schema.layout.type === 'tabbed'
+			? schema.layout.tabs.filter((tab) => isTabVisible(tab, values))
+			: []
 	);
+	// A hidden or disabled input still solves, so reset it to its default — otherwise the
+	// value the user last set while it was visible keeps feeding the definition. Lives here,
+	// not in TabLayout: a panel whose tabs all hide unmounts and would miss the reset.
+	$effect(() => {
+		if (schema.layout.type !== 'tabbed') return;
+		const updates: Record<string, unknown> = {};
+		schema.layout.tabs.forEach((tab) =>
+			tab.groups.forEach((group) => {
+				const visibilityMap = buildVisibilityMap(group.items, values);
+				group.items.forEach((layoutItem) => {
+					if (layoutItem.type === 'linebreak') return;
+					const { visible, disabled, defaultValue } = visibilityMap[itemKey(layoutItem)];
+					const input = schema.inputs.find((i) => i.id === layoutItem.paramId);
+					if (!input || defaultValue === undefined) return;
+					if ((!visible || disabled) && values[input.id] !== defaultValue) {
+						updates[input.id] = defaultValue;
+					}
+				});
+			})
+		);
+		if (Object.keys(updates).length > 0) Object.assign(values, updates);
+	});
+
+	const leftTabs = $derived(shownTabs.filter((t) => t.position !== 'right'));
+	const rightTabs = $derived(shownTabs.filter((t) => t.position === 'right'));
 	const hasLeftPanel = $derived(leftTabs.length > 0);
 	const hasRightPanel = $derived(rightTabs.length > 0);
 	const hasSidebar = $derived(hasViewer || hasRightPanel);

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

@@ -4,7 +4,7 @@
 	import * as Tabs from '$lib/components/primitives/tabs';
 	import TabBar from './TabBar.svelte';
 	import TabContent from './TabContent.svelte';
-	import { buildVisibilityMap, itemKey } from '$lib/schema/visibility-rules';
+	import { isTabVisible } from '$lib/schema/visibility-rules';
 	import { buildDynamicValueListOptions } from '$lib/schema/dynamic-value-list';
 
 	interface Props {
@@ -25,6 +25,7 @@
 	const visibleTabs = $derived(
 		schema.layout.type === 'tabbed'
 			? schema.layout.tabs.filter((tab) => {
+					if (!isTabVisible(tab, values)) return false;
 					if (!panelFilter) return true;
 					return panelFilter === 'right' ? tab.position === 'right' : tab.position !== 'right';
 				})
@@ -39,7 +40,7 @@
 	$effect(() => {
 		if (requestedTabId && visibleTabs.some((t) => t.id === requestedTabId)) {
 			activeTabId = requestedTabId;
-		} else if (visibleTabs.length > 0 && !activeTabId) {
+		} else if (visibleTabs.length > 0 && !visibleTabs.some((t) => t.id === activeTabId)) {
 			activeTabId = visibleTabs[0].id;
 		}
 	});
@@ -56,28 +57,6 @@
 		if (Object.keys(initial).length > 0) Object.assign(collapsedGroups, initial);
 	});
 
-	// A hidden or disabled input still solves, so reset it to its default — otherwise the
-	// value the user last set while it was visible keeps feeding the definition.
-	$effect(() => {
-		if (schema.layout.type !== 'tabbed') return;
-		const updates: Record<string, unknown> = {};
-		visibleTabs.forEach((tab) =>
-			tab.groups.forEach((group) => {
-				const visibilityMap = buildVisibilityMap(group.items, values);
-				group.items.forEach((layoutItem) => {
-					if (layoutItem.type === 'linebreak') return;
-					const { visible, disabled, defaultValue } = visibilityMap[itemKey(layoutItem)];
-					const input = schema.inputs.find((i) => i.id === layoutItem.paramId);
-					if (!input || defaultValue === undefined) return;
-					if ((!visible || disabled) && values[input.id] !== defaultValue) {
-						updates[input.id] = defaultValue;
-					}
-				});
-			})
-		);
-		if (Object.keys(updates).length > 0) Object.assign(values, updates);
-	});
-
 	function toggleGroup(groupId: string) {
 		collapsedGroups[groupId] = !collapsedGroups[groupId];
 	}

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

@@ -2,7 +2,8 @@ import type {
 	LayoutItem,
 	VisibilityRule,
 	VisibilityCondition,
-	GroupVisibilityCondition
+	GroupVisibilityCondition,
+	TabConfig
 } from '@selvajs/schemas';
 
 export interface VisibilityResult {
@@ -118,6 +119,12 @@ export function evaluateGroupVisibility(
 	return action === 'hide' ? !met : met;
 }
 
+export function isTabVisible(tab: TabConfig, values: Record<string, unknown>): boolean {
+	return (
+		tab.visible !== false && tab.groups.some((group) => evaluateGroupVisibility(group, values))
+	);
+}
+
 /**
  * A linebreak is always "visible" but renders as a divider only, so a group left with
  * nothing but separators counts as empty.