@selvajs/ui 6.3.0 → 6.3.2

package/dist/components/preview/TabContent.svelte

@@ -42,6 +42,10 @@
 		dynamicOptions = {}
 	}: Props = $props();
 
+	const visibleGroups = $derived(
+		tab.groups.filter((group) => evaluateGroupVisibility(group, values))
+	);
+
 	function getInputById(paramId: string): SchemaInput | undefined {
 		return inputs.find((i) => i.id === paramId);
 	}
@@ -82,25 +86,23 @@
 <Tabs.Content value={tab.id} class="min-h-0 p-0 flex-1">
 	<ScrollArea class="h-full" orientation="vertical">
 		<div class="p-4 tab-content-container">
-			{#if tab.groups.length === 0}
+			{#if visibleGroups.length === 0}
 				<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
 			{:else}
 				<div class="gap-8 flex flex-col">
-					{#each tab.groups as group (group.id)}
-						{#if evaluateGroupVisibility(group, values)}
-							<Group
-								label={group.label}
-								description={group.description}
-								items={group.items}
-								columns={group.columns ?? 1}
-								collapsed={collapsedGroups[group.id] ?? false}
-								{values}
-								onToggle={() => onToggleGroup(group.id)}
-								inputSnippet={renderInput}
-								outputSnippet={renderOutput}
-								flat={tab.groups.length === 1}
-							/>
-						{/if}
+					{#each visibleGroups as group (group.id)}
+						<Group
+							label={group.label}
+							description={group.description}
+							items={group.items}
+							columns={group.columns ?? 1}
+							collapsed={collapsedGroups[group.id] ?? false}
+							{values}
+							onToggle={() => onToggleGroup(group.id)}
+							inputSnippet={renderInput}
+							outputSnippet={renderOutput}
+							flat={visibleGroups.length === 1}
+						/>
 					{/each}
 				</div>
 			{/if}

package/dist/components/viewer/SceneManager.svelte

@@ -134,6 +134,8 @@
 		for (const [layerName, entries] of layerGroups) {
 			flat.push({
 				kind: 'layer',
+				// Prefixed, like the object rows below: a layer row must never share a key with
+				// an object row whose identity happens to read like a layer name.
 				key: `layer:${layerName}`,
 				top,
 				height: LAYER_ROW_HEIGHT,
@@ -145,7 +147,7 @@
 			for (const entry of entries) {
 				flat.push({
 					kind: 'object',
-					key: entry.key,
+					key: `obj:${entry.rowKey}`,
 					top,
 					height: OBJECT_ROW_HEIGHT,
 					entry

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

@@ -17,4 +17,10 @@ export declare function itemKey(item: LayoutItem): string;
 export declare function buildVisibilityMap(items: LayoutItem[], values: Record<string, unknown>): Record<string, VisibilityResult>;
 export declare function evaluateGroupVisibility(group: {
     visibilityCondition?: GroupVisibilityCondition;
+    items?: LayoutItem[];
 }, 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.
+ */
+export declare function hasVisibleItems(items: LayoutItem[], values: Record<string, unknown>): boolean;

package/dist/schema/visibility-rules.js

@@ -74,9 +74,18 @@ export function buildVisibilityMap(items, values) {
     return map;
 }
 export function evaluateGroupVisibility(group, values) {
+    if (group.items && !hasVisibleItems(group.items, values))
+        return false;
     if (!group.visibilityCondition?.rules)
         return true;
     const { action = 'show' } = group.visibilityCondition;
     const met = evaluateCondition(group.visibilityCondition, values);
     return action === 'hide' ? !met : met;
 }
+/**
+ * A linebreak is always "visible" but renders as a divider only, so a group left with
+ * nothing but separators counts as empty.
+ */
+export function hasVisibleItems(items, values) {
+    return items.some((item) => item.type !== 'linebreak' && evaluateVisibility(item, values).visible);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selvajs/ui",
-  "version": "6.3.0",
+  "version": "6.3.2",
   "description": "Shared UI components and utilities for Selva applications",
   "license": "MIT",
   "author": "VektorNode",
@@ -58,11 +58,11 @@
     "bits-ui": "^2.18.0",
     "svelte": "^5",
     "tailwind-variants": "^3.3.1",
-    "three": "^0.185.1",
-    "@selvajs/compute": "^4.1.1",
-    "@selvajs/visualization": "^1.2.0",
+    "three": "^0.186.0",
+    "@selvajs/compute": "^4.1.3",
     "@selvajs/schemas": "^5.0.2",
-    "@selvajs/solve": "^1.0.8"
+    "@selvajs/visualization": "^1.3.1",
+    "@selvajs/solve": "^1.1.1"
   },
   "peerDependenciesMeta": {
     "three": {
@@ -72,7 +72,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
     "@iconify/svelte": "^5.2.1",
-    "@lucide/svelte": "^1.35.0",
+    "@lucide/svelte": "^1.45.0",
     "clsx": "^2.1.1",
     "mode-watcher": "^1.1.0",
     "paneforge": "^1.0.2",
@@ -81,20 +81,20 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@internationalized/date": "^3.12.3",
+    "@internationalized/date": "^3.12.4",
     "@sveltejs/kit": "2.70.3",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@types/three": "^0.185.4",
-    "bits-ui": "^2.19.0",
+    "@types/three": "^0.186.0",
+    "bits-ui": "^2.19.2",
     "rimraf": "^6.1.3",
-    "svelte": "5.56.10",
+    "svelte": "5.57.0",
     "tailwind-variants": "^3.3.1",
     "vitest": "^4.1.11",
-    "@selvajs/compute": "4.1.1",
     "@selvajs/config": "0.0.4",
-    "@selvajs/visualization": "1.2.0",
+    "@selvajs/visualization": "1.3.1",
     "@selvajs/schemas": "5.0.2",
-    "@selvajs/solve": "1.0.8"
+    "@selvajs/compute": "4.1.3",
+    "@selvajs/solve": "1.1.1"
   },
   "scripts": {
     "predev": "node ../../scripts/sync-shared-assets.js",

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

@@ -42,6 +42,10 @@
 		dynamicOptions = {}
 	}: Props = $props();
 
+	const visibleGroups = $derived(
+		tab.groups.filter((group) => evaluateGroupVisibility(group, values))
+	);
+
 	function getInputById(paramId: string): SchemaInput | undefined {
 		return inputs.find((i) => i.id === paramId);
 	}
@@ -82,25 +86,23 @@
 <Tabs.Content value={tab.id} class="min-h-0 p-0 flex-1">
 	<ScrollArea class="h-full" orientation="vertical">
 		<div class="p-4 tab-content-container">
-			{#if tab.groups.length === 0}
+			{#if visibleGroups.length === 0}
 				<StateDisplay type="empty" size="medium" message={t.tabNoGroups} />
 			{:else}
 				<div class="gap-8 flex flex-col">
-					{#each tab.groups as group (group.id)}
-						{#if evaluateGroupVisibility(group, values)}
-							<Group
-								label={group.label}
-								description={group.description}
-								items={group.items}
-								columns={group.columns ?? 1}
-								collapsed={collapsedGroups[group.id] ?? false}
-								{values}
-								onToggle={() => onToggleGroup(group.id)}
-								inputSnippet={renderInput}
-								outputSnippet={renderOutput}
-								flat={tab.groups.length === 1}
-							/>
-						{/if}
+					{#each visibleGroups as group (group.id)}
+						<Group
+							label={group.label}
+							description={group.description}
+							items={group.items}
+							columns={group.columns ?? 1}
+							collapsed={collapsedGroups[group.id] ?? false}
+							{values}
+							onToggle={() => onToggleGroup(group.id)}
+							inputSnippet={renderInput}
+							outputSnippet={renderOutput}
+							flat={visibleGroups.length === 1}
+						/>
 					{/each}
 				</div>
 			{/if}

package/src/lib/components/viewer/SceneManager.svelte

@@ -134,6 +134,8 @@
 		for (const [layerName, entries] of layerGroups) {
 			flat.push({
 				kind: 'layer',
+				// Prefixed, like the object rows below: a layer row must never share a key with
+				// an object row whose identity happens to read like a layer name.
 				key: `layer:${layerName}`,
 				top,
 				height: LAYER_ROW_HEIGHT,
@@ -145,7 +147,7 @@
 			for (const entry of entries) {
 				flat.push({
 					kind: 'object',
-					key: entry.key,
+					key: `obj:${entry.rowKey}`,
 					top,
 					height: OBJECT_ROW_HEIGHT,
 					entry

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

@@ -106,9 +106,10 @@ export function buildVisibilityMap(
 }
 
 export function evaluateGroupVisibility(
-	group: { visibilityCondition?: GroupVisibilityCondition },
+	group: { visibilityCondition?: GroupVisibilityCondition; items?: LayoutItem[] },
 	values: Record<string, unknown>
 ): boolean {
+	if (group.items && !hasVisibleItems(group.items, values)) return false;
 	if (!group.visibilityCondition?.rules) return true;
 
 	const { action = 'show' } = group.visibilityCondition;
@@ -116,3 +117,13 @@ export function evaluateGroupVisibility(
 
 	return action === 'hide' ? !met : met;
 }
+
+/**
+ * A linebreak is always "visible" but renders as a divider only, so a group left with
+ * nothing but separators counts as empty.
+ */
+export function hasVisibleItems(items: LayoutItem[], values: Record<string, unknown>): boolean {
+	return items.some(
+		(item) => item.type !== 'linebreak' && evaluateVisibility(item, values).visible
+	);
+}