@viamrobotics/motion-tools 1.15.5 → 1.15.6

package/dist/components/Entities/Arrows/Arrows.svelte

@@ -7,7 +7,7 @@
 	import type { InstancedArrows } from '../../../three/InstancedArrows/InstancedArrows'
 
 	import { useEntityEvents } from '../hooks/useEntityEvents.svelte'
-	import { traits } from '../../../ecs'
+	import { traits, useTrait } from '../../../ecs'
 	import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { meshBoundsRaycast, raycast } from '../../../three/InstancedArrows/raycast'
 
@@ -18,6 +18,9 @@
 
 	let { entity, arrows }: Props = $props()
 
+	const parent = useTrait(() => entity, traits.Parent)
+	const invisible = useTrait(() => entity, traits.Invisible)
+
 	const events = useEntityEvents(() => entity)
 	const selectedEntity = useSelectedEntity()
 	const focusedEntity = useFocusedEntity()
@@ -32,7 +35,7 @@
 	})
 </script>
 
-<Portal id={entity.get(traits.Parent)}>
+<Portal id={parent.current}>
 	<T
 		is={arrows}
 		name={entity}
@@ -43,7 +46,7 @@
 			is={arrows.headMesh}
 			bvh={{ enabled: false }}
 			raycast={() => null}
-			visible={events.visible}
+			visible={invisible.current}
 		/>
 		<T
 			is={arrows.shaftMesh}

package/dist/components/Entities/Frame.svelte

@@ -42,6 +42,7 @@ Renders a Viam Frame object
 	const entityColor = useTrait(() => entity, traits.Color)
 	const entityPose = useTrait(() => entity, traits.Pose)
 	const center = useTrait(() => entity, traits.Center)
+	const invisible = useTrait(() => entity, traits.Invisible)
 
 	const events = useEntityEvents(() => entity)
 
@@ -72,7 +73,10 @@ Renders a Viam Frame object
 </script>
 
 <Portal id={parent.current}>
-	<T is={group}>
+	<T
+		is={group}
+		visible={invisible.current !== true}
+	>
 		<Mesh
 			{entity}
 			{color}

package/dist/components/Entities/GLTF.svelte

@@ -38,6 +38,7 @@
 	const pose = useTrait(() => entity, traits.Pose)
 	const gltfTrait = useTrait(() => entity, traits.GLTF)
 	const scale = useTrait(() => entity, traits.Scale)
+	const invisible = useTrait(() => entity, traits.Invisible)
 	const events = useEntityEvents(() => entity)
 
 	const animationName = $derived(gltfTrait.current?.animationName)
@@ -88,6 +89,7 @@
 				is={$gltf.scene as Object3D}
 				scale={[scale.current?.x ?? 1, scale.current?.y ?? 1, scale.current?.z ?? 1]}
 				name={entity}
+				visible={invisible.current !== true}
 				{...events}
 				{...rest}
 			>

package/dist/components/Entities/Geometry.svelte

@@ -33,6 +33,7 @@ Renders a Viam Geometry object
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
 	const center = useTrait(() => entity, traits.Center)
+	const invisible = useTrait(() => entity, traits.Invisible)
 
 	const model = $derived.by(() => {
 		if (!settings.current.renderArmModels.includes('model')) {
@@ -62,21 +63,23 @@ Renders a Viam Geometry object
 </script>
 
 <Portal id={parent.current}>
-	{#if model}
-		<T
-			is={model}
-			name={entity}
-			{...events}
-		/>
-	{/if}
-
-	{#if settings.current.renderArmModels.includes('colliders') || !model}
-		<Mesh
-			{entity}
-			center={center.current}
-			{...events}
-		>
-			{@render children?.()}
-		</Mesh>
-	{/if}
+	<T.Group visible={invisible.current !== true}>
+		{#if model}
+			<T
+				is={model}
+				name={entity}
+				{...events}
+			/>
+		{/if}
+
+		{#if settings.current.renderArmModels.includes('colliders') || !model}
+			<Mesh
+				{entity}
+				center={center.current}
+				{...events}
+			>
+				{@render children?.()}
+			</Mesh>
+		{/if}
+	</T.Group>
 </Portal>

package/dist/components/Entities/Line.svelte

@@ -38,6 +38,7 @@
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const materialProps = useTrait(() => entity, traits.Material)
 	const renderOrder = useTrait(() => entity, traits.RenderOrder)
+	const invisible = useTrait(() => entity, traits.Invisible)
 
 	const events = useEntityEvents(() => entity)
 
@@ -60,6 +61,7 @@
 		userData.name={name}
 		raycast={meshBounds}
 		renderOrder={renderOrder.current}
+		visible={invisible.current !== true}
 		{...events}
 	>
 		<LineGeometry positions={linePositions.current} />

package/dist/components/Entities/Points.svelte

@@ -28,6 +28,7 @@
 	const color = useTrait(() => entity, traits.Color)
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const entityPointSize = useTrait(() => entity, traits.PointSize)
+	const invisible = useTrait(() => entity, traits.Invisible)
 
 	const pointSize = $derived(
 		entityPointSize.current ? entityPointSize.current * 0.001 : settings.current.pointSize
@@ -126,6 +127,7 @@
 			is={points}
 			name={entity}
 			bvh={{ maxDepth: 40, maxLeafSize: 20 }}
+			visible={invisible.current !== true}
 			{...events}
 		>
 			<T is={geometry.current} />

package/dist/components/Entities/hooks/useEntityEvents.svelte.d.ts

@@ -1,7 +1,6 @@
 import type { Entity } from 'koota';
 import { type IntersectionEvent } from '@threlte/extras';
 export declare const useEntityEvents: (entity: () => Entity | undefined) => {
-    readonly visible: boolean;
     onpointerenter: (event: IntersectionEvent<MouseEvent>) => void;
     onpointermove: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerleave: (event: IntersectionEvent<MouseEvent>) => void;

package/dist/components/Entities/hooks/useEntityEvents.svelte.js

@@ -1,18 +1,15 @@
 import { useCursor } from '@threlte/extras';
 import { Vector2 } from 'three';
-import { traits } from '../../../ecs';
+import { traits, useTrait } from '../../../ecs';
 import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte';
-import { useVisibility } from '../../../hooks/useVisibility.svelte';
 import { updateHoverInfo } from '../../../HoverUpdater.svelte';
 import { createPose, matrixToPose, poseToMatrix } from '../../../transform';
 export const useEntityEvents = (entity) => {
     const down = new Vector2();
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();
-    const visibility = useVisibility();
     const cursor = useCursor();
     const currentEntity = $derived(entity());
-    const visible = $derived(currentEntity ? (visibility.get(currentEntity) ?? true) : true);
     const onpointerenter = (event) => {
         event.stopPropagation();
         cursor.onPointerEnter();
@@ -90,15 +87,13 @@ export const useEntityEvents = (entity) => {
             selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
         }
     };
+    const invisible = useTrait(entity, traits.Invisible);
     $effect(() => {
-        if (!visible) {
+        if (invisible.current) {
             cursor.onPointerLeave();
         }
     });
     return {
-        get visible() {
-            return visible;
-        },
         onpointerenter,
         onpointermove,
         onpointerleave,

package/dist/components/KeyboardControls.svelte

@@ -5,9 +5,9 @@
 	import { PressedKeys } from 'runed'
 	import { MathUtils, Vector3 } from 'three'
 
+	import { traits } from '../ecs'
 	import { useFocusedEntity, useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
-	import { useVisibility } from '../hooks/useVisibility.svelte'
 
 	interface Props {
 		cameraControls: CameraControlsRef
@@ -21,7 +21,6 @@
 	const entity = $derived(focusedEntity.current ?? selectedEntity.current)
 
 	const settings = useSettings()
-	const visibility = useVisibility()
 
 	const keys = new PressedKeys()
 	const meta = $derived(keys.has('meta'))
@@ -181,9 +180,12 @@
 
 			event.stopImmediatePropagation()
 
-			const visible = visibility.get(entity) ?? true
+			if (entity.has(traits.Invisible)) {
+				entity.remove(traits.Invisible)
+			} else {
+				entity.add(traits.Invisible)
+			}
 
-			visibility.set(entity, !visible)
 			return
 		}
 	}

package/dist/components/SceneProviders.svelte

@@ -22,7 +22,6 @@
 	import { providePointclouds } from '../hooks/usePointclouds.svelte'
 	import { provideResourceByName } from '../hooks/useResourceByName.svelte'
 	import { provideSelection } from '../hooks/useSelection.svelte'
-	import { provideVisibility } from '../hooks/useVisibility.svelte'
 	import { provideWorldStates } from '../hooks/useWorldState.svelte'
 
 	import { provideOrigin } from './xr/useOrigin.svelte'
@@ -38,7 +37,6 @@
 
 	provideCameraControls(() => cameraPose)
 	provideTransformControls()
-	provideVisibility()
 	provideMachineSettings()
 	provideLogs()
 

package/dist/components/overlay/FloatingPanel.svelte

@@ -64,7 +64,7 @@
 		>
 			<div
 				{...api.getHeaderProps()}
-				class="border-medium flex justify-between border-b p-2"
+				class="border-medium flex items-center justify-between border-b p-2"
 			>
 				<h3
 					{...api.getTitleProps()}

package/dist/components/overlay/Logs.svelte

@@ -10,6 +10,12 @@
 	const logs = useLogs()
 
 	const isOpen = new PersistedState('logs-is-open', false)
+
+	let levels = new PersistedState('logs-selected-levels', {
+		info: true,
+		warn: true,
+		error: true,
+	})
 </script>
 
 <Portal id="dashboard">
@@ -44,34 +50,95 @@
 	title="Logs"
 	bind:isOpen={isOpen.current}
 	defaultSize={{ width: 240, height: 315 }}
+	resizable
 >
-	<div class="flex h-70 flex-col gap-2 overflow-auto p-3 text-xs">
-		{#each logs.current as log (log.uuid)}
-			<div>
-				<div class="flex flex-wrap items-center gap-1.5">
-					<div
-						class={[
-							'h-2 w-2 rounded-full',
-							{
-								'bg-danger-dark': log.level === 'error',
-								'bg-amber-300': log.level === 'warn',
-								'bg-blue-400': log.level === 'info',
-							},
-						]}
-					></div>
-					<div class="text-subtle-2">{log.timestamp}</div>
-				</div>
-				<div>
-					{#if log.count > 1}
-						<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
-							{log.count}
-						</span>
-					{/if}
-					{log.message}
-				</div>
-			</div>
-		{:else}
-			No logs
-		{/each}
+	<div class="flex h-full flex-col">
+		<div class="flex gap-1 px-3 py-2">
+			<button
+				type="button"
+				class={[
+					'chip border px-2',
+					{
+						'border-danger-dark bg-danger-dark text-white hover:border-red-700 hover:bg-red-700':
+							levels.current.error,
+						'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
+							!levels.current.error,
+					},
+				]}
+				onclick={() => {
+					levels.current.error = !levels.current.error
+				}}
+			>
+				error
+			</button>
+
+			<button
+				type="button"
+				class={[
+					'chip border',
+					{
+						'border-amber-400 bg-amber-400 text-white hover:border-amber-500 hover:bg-amber-500':
+							levels.current.warn,
+						'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
+							!levels.current.warn,
+					},
+				]}
+				onclick={() => {
+					levels.current.warn = !levels.current.warn
+				}}
+			>
+				warn
+			</button>
+
+			<button
+				type="button"
+				class={[
+					'chip border',
+					{
+						'border-blue-400 bg-blue-400 text-white hover:border-blue-500 hover:bg-blue-500':
+							levels.current.info,
+						'bg-light hover:bg-ghost-light hover:border-light border-light text-subtle-1':
+							!levels.current.info,
+					},
+				]}
+				onclick={() => {
+					levels.current.info = !levels.current.info
+				}}
+			>
+				info
+			</button>
+		</div>
+
+		<div class="flex flex-col gap-2 overflow-auto px-3 pb-3 text-xs">
+			{#each logs.current as log (log.uuid)}
+				{#if levels.current[log.level]}
+					<div>
+						<div class="flex flex-wrap items-center gap-1.5">
+							<div
+								class={[
+									'h-2 w-2 rounded-full',
+									{
+										'bg-danger-dark': log.level === 'error',
+										'bg-amber-300': log.level === 'warn',
+										'bg-blue-400': log.level === 'info',
+									},
+								]}
+							></div>
+							<div class="text-subtle-2">{log.timestamp}</div>
+						</div>
+						<div>
+							{#if log.count > 1}
+								<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
+									{log.count}
+								</span>
+							{/if}
+							{log.message}
+						</div>
+					</div>
+				{/if}
+			{:else}
+				No logs
+			{/each}
+		</div>
 	</div>
 </FloatingPanel>

package/dist/components/overlay/left-pane/Tree.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
 	import { normalizeProps, useMachine } from '@zag-js/svelte'
 	import * as tree from '@zag-js/tree-view'
-	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
 	import { VirtualList } from 'svelte-virtuallists'
 	import { SvelteSet } from 'svelte/reactivity'
 
 	import { traits } from '../../../ecs'
 	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
-	import { useVisibility } from '../../../hooks/useVisibility.svelte'
 
-	import type { TreeNode } from './buildTree'
+	import type { TreeNode as TreeNodeType } from './buildTree'
+
+	import TreeNode from './TreeNode.svelte'
 
 	const selected = useSelectedEntity()
-	const visibility = useVisibility()
 
 	interface Props {
-		rootNode: TreeNode
-		nodeMap: Record<string, TreeNode | undefined>
+		rootNode: TreeNodeType
+		nodeMap: Record<string, TreeNodeType | undefined>
 		dragElement?: HTMLElement
 		onSelectionChange?: (event: tree.SelectionChangeDetails) => void
 	}
@@ -24,7 +23,7 @@
 	let { rootNode, nodeMap, onSelectionChange, dragElement = $bindable() }: Props = $props()
 
 	const collection = $derived(
-		tree.collection<TreeNode>({
+		tree.collection<TreeNodeType>({
 			nodeToValue: (node) => `${node.entity}`,
 			nodeToString: (node) => node.entity.get(traits.Name) ?? '',
 			rootNode,
@@ -74,108 +73,6 @@
 	})
 </script>
 
-{#snippet treeNode({
-	node,
-	indexPath,
-	api,
-}: {
-	node: TreeNode
-	indexPath: number[]
-	api: tree.Api
-})}
-	{@const nodeProps = { indexPath, node }}
-	{@const nodeState = api.getNodeState(nodeProps)}
-	{@const isVisible = visibility.get(node.entity) ?? true}
-	{@const { selected } = nodeState}
-
-	{#if nodeState.isBranch}
-		{@const { expanded } = nodeState}
-		{@const { children = [] } = node}
-		<div
-			{...api.getBranchProps(nodeProps)}
-			class={[
-				'w-full',
-				{
-					'text-disabled': !isVisible,
-					'bg-medium': selected,
-					sticky: true,
-				},
-			]}
-		>
-			<div {...api.getBranchControlProps(nodeProps)}>
-				<span
-					{...api.getBranchIndicatorProps(nodeProps)}
-					class={{ 'rotate-90': expanded }}
-				>
-					<ChevronRight size={14} />
-				</span>
-				<span
-					class="flex items-center overflow-hidden text-ellipsis"
-					{...api.getBranchTextProps(nodeProps)}
-				>
-					{node.entity.get(traits.Name)}
-				</span>
-
-				<button
-					class="text-gray-6"
-					onclick={(event) => {
-						event.stopPropagation()
-						visibility.set(node.entity, !isVisible)
-					}}
-				>
-					{#if isVisible}
-						<Eye size={14} />
-					{:else}
-						<EyeOff size={14} />
-					{/if}
-				</button>
-			</div>
-			<div {...api.getBranchContentProps(nodeProps)}>
-				<div {...api.getBranchIndentGuideProps(nodeProps)}></div>
-
-				{#if children.length > 200}
-					<VirtualList
-						class="w-full"
-						style="height:{Math.min(8, Math.max(children.length, 5)) * 32}px;"
-						items={children}
-					>
-						{#snippet vl_slot({ index, item })}
-							{@render treeNode({ node: item, indexPath: [...indexPath, Number(index)], api })}
-						{/snippet}
-					</VirtualList>
-				{:else}
-					{#each children as node, index (node.entity)}
-						{@render treeNode({ node, indexPath: [...indexPath, index], api })}
-					{/each}
-				{/if}
-			</div>
-		</div>
-	{:else}
-		<div
-			class={{ 'flex justify-between': true, 'text-disabled': !isVisible, 'bg-medium': selected }}
-			{...api.getItemProps(nodeProps)}
-		>
-			<span class="flex items-center gap-1.5 overflow-hidden text-nowrap text-ellipsis">
-				{node.entity.get(traits.Name)}
-			</span>
-
-			<button
-				class="text-gray-6"
-				onclick={(event) => {
-					event.stopPropagation()
-					visibility.set(node.entity, !isVisible)
-				}}
-			>
-				{#if isVisible}
-					<Eye size={14} />
-				{:else}
-					<EyeOff size={14} />
-				{/if}
-			</button>
-		</div>
-	{/if}
-{/snippet}
-
 <div
 	{...api.getRootProps()}
 	class="h-full overflow-auto text-xs"
@@ -188,49 +85,22 @@
 				class="w-full"
 				items={rootChildren}
 			>
-				{#snippet vl_slot({ index, item })}
-					{@render treeNode({ node: item, indexPath: [Number(index)], api })}
+				{#snippet vl_slot({ index, item: node })}
+					<TreeNode
+						{node}
+						indexPath={[Number(index)]}
+						{api}
+					/>
 				{/snippet}
 			</VirtualList>
 		{:else}
 			{#each rootChildren as node, index (node.entity)}
-				{@render treeNode({ node, indexPath: [Number(index)], api })}
+				<TreeNode
+					{node}
+					indexPath={[Number(index)]}
+					{api}
+				/>
 			{/each}
 		{/if}
 	</div>
 </div>
-
-<style>
-	:global(:root) {
-		[data-scope='tree-view'][data-part='item'],
-		[data-scope='tree-view'][data-part='branch-control'] {
-			user-select: none;
-			--padding-inline: 16px;
-			padding-inline-start: calc(var(--depth) * var(--padding-inline));
-			padding-inline-end: var(--padding-inline);
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			min-height: 32px;
-		}
-
-		[data-scope='tree-view'][data-part='item-text'],
-		[data-scope='tree-view'][data-part='branch-text'] {
-			flex: 1;
-		}
-
-		[data-scope='tree-view'][data-part='branch-content'] {
-			position: relative;
-			isolation: isolate;
-		}
-
-		[data-scope='tree-view'][data-part='branch-indent-guide'] {
-			position: absolute;
-			content: '';
-			border-left: 1px solid #eee;
-			height: 100%;
-			translate: calc(var(--depth) * 1.25rem);
-			z-index: 1;
-		}
-	}
-</style>

package/dist/components/overlay/left-pane/Tree.svelte.d.ts

@@ -1,8 +1,8 @@
 import * as tree from '@zag-js/tree-view';
-import type { TreeNode } from './buildTree';
+import type { TreeNode as TreeNodeType } from './buildTree';
 interface Props {
-    rootNode: TreeNode;
-    nodeMap: Record<string, TreeNode | undefined>;
+    rootNode: TreeNodeType;
+    nodeMap: Record<string, TreeNodeType | undefined>;
     dragElement?: HTMLElement;
     onSelectionChange?: (event: tree.SelectionChangeDetails) => void;
 }

package/dist/components/overlay/left-pane/TreeNode.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import type { Api } from '@zag-js/tree-view'
+
+	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
+	import { VirtualList } from 'svelte-virtuallists'
+
+	import { traits, useTrait } from '../../../ecs'
+
+	import type { TreeNode } from './buildTree'
+
+	import Self from './TreeNode.svelte'
+
+	interface Props {
+		node: TreeNode
+		indexPath: number[]
+		api: Api
+	}
+
+	let { node, indexPath, api }: Props = $props()
+
+	const name = useTrait(() => node.entity, traits.Name)
+	const invisible = useTrait(() => node.entity, traits.Invisible)
+
+	const nodeProps = $derived({ indexPath, node })
+	const nodeState = $derived(api.getNodeState(nodeProps))
+</script>
+
+{#if nodeState.isBranch}
+	{@const { expanded } = nodeState}
+	{@const { children = [] } = node}
+	<div
+		{...api.getBranchProps(nodeProps)}
+		class={[
+			'w-full',
+			{
+				'text-disabled': invisible.current,
+				'bg-medium': nodeState.selected,
+				sticky: true,
+			},
+		]}
+	>
+		<div {...api.getBranchControlProps(nodeProps)}>
+			<span
+				{...api.getBranchIndicatorProps(nodeProps)}
+				class={{ 'rotate-90': expanded }}
+			>
+				<ChevronRight size={14} />
+			</span>
+			<span
+				class="flex items-center overflow-hidden text-ellipsis"
+				{...api.getBranchTextProps(nodeProps)}
+			>
+				{name.current}
+			</span>
+
+			<button
+				class="text-gray-6"
+				onclick={(event) => {
+					event.stopPropagation()
+
+					if (node.entity.has(traits.Invisible)) {
+						node.entity.remove(traits.Invisible)
+					} else {
+						node.entity.add(traits.Invisible)
+					}
+				}}
+			>
+				{#if invisible.current}
+					<EyeOff size={14} />
+				{:else}
+					<Eye size={14} />
+				{/if}
+			</button>
+		</div>
+		<div {...api.getBranchContentProps(nodeProps)}>
+			<div {...api.getBranchIndentGuideProps(nodeProps)}></div>
+
+			{#if children.length > 200}
+				<VirtualList
+					class="w-full"
+					style="height:{Math.min(8, Math.max(children.length, 5)) * 32}px;"
+					items={children}
+				>
+					{#snippet vl_slot({ index, item: node })}
+						<Self
+							{node}
+							indexPath={[...indexPath, Number(index)]}
+							{api}
+						/>
+					{/snippet}
+				</VirtualList>
+			{:else}
+				{#each children as node, index (node.entity)}
+					<Self
+						{node}
+						indexPath={[...indexPath, Number(index)]}
+						{api}
+					/>
+				{/each}
+			{/if}
+		</div>
+	</div>
+{:else}
+	<div
+		class={{
+			'flex justify-between': true,
+			'text-disabled': invisible.current,
+			'bg-medium': nodeState.selected,
+		}}
+		{...api.getItemProps(nodeProps)}
+	>
+		<span class="flex items-center gap-1.5 overflow-hidden text-nowrap text-ellipsis">
+			{node.entity.get(traits.Name)}
+		</span>
+
+		<button
+			class="text-gray-6"
+			onclick={(event) => {
+				event.stopPropagation()
+				if (node.entity.has(traits.Invisible)) {
+					node.entity.remove(traits.Invisible)
+				} else {
+					node.entity.add(traits.Invisible)
+				}
+			}}
+		>
+			{#if invisible.current}
+				<EyeOff size={14} />
+			{:else}
+				<Eye size={14} />
+			{/if}
+		</button>
+	</div>
+{/if}
+
+<style>
+	:global(:root) {
+		[data-scope='tree-view'][data-part='item'],
+		[data-scope='tree-view'][data-part='branch-control'] {
+			user-select: none;
+			--padding-inline: 16px;
+			padding-inline-start: calc(var(--depth) * var(--padding-inline));
+			padding-inline-end: var(--padding-inline);
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			min-height: 32px;
+		}
+
+		[data-scope='tree-view'][data-part='item-text'],
+		[data-scope='tree-view'][data-part='branch-text'] {
+			flex: 1;
+		}
+
+		[data-scope='tree-view'][data-part='branch-content'] {
+			position: relative;
+			isolation: isolate;
+		}
+
+		[data-scope='tree-view'][data-part='branch-indent-guide'] {
+			position: absolute;
+			content: '';
+			border-left: 1px solid #eee;
+			height: 100%;
+			translate: calc(var(--depth) * 1.25rem);
+			z-index: 1;
+		}
+	}
+</style>

package/dist/components/overlay/left-pane/TreeNode.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Api } from '@zag-js/tree-view';
+import type { TreeNode } from './buildTree';
+interface Props {
+    node: TreeNode;
+    indexPath: number[];
+    api: Api;
+}
+declare const TreeNode: import("svelte").Component<Props, {}, "">;
+type TreeNode = ReturnType<typeof TreeNode>;
+export default TreeNode;

package/dist/ecs/traits.d.ts

@@ -51,6 +51,7 @@ export declare const WorldPose: import("koota").Trait<{
     theta: number;
 }>;
 export declare const Hovered: import("koota").Trait<() => boolean>;
+export declare const Invisible: import("koota").Trait<() => boolean>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances

package/dist/ecs/traits.js

@@ -28,6 +28,7 @@ export const WorldPose = trait({
     theta: 0,
 });
 export const Hovered = trait(() => true);
+export const Invisible = trait(() => true);
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances

package/dist/hooks/useFramelessComponents.svelte.js

@@ -10,14 +10,14 @@ export const provideFramelessComponents = () => {
         const partComponentsWIthNoFrame = components
             ?.filter((component) => component.frame === undefined)
             .map((component) => component.name) ?? [];
-        const fragmentComponentsWithNoFrame = [];
+        const fragmentComponentsWithNoFrame = new Set(partComponentsWIthNoFrame);
         for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentId)) {
             if (frames.current.some((frame) => frame.referenceFrame === fragmentComponentName)) {
                 continue;
             }
-            fragmentComponentsWithNoFrame.push(fragmentComponentName);
+            fragmentComponentsWithNoFrame.add(fragmentComponentName);
         }
-        return [...partComponentsWIthNoFrame, ...fragmentComponentsWithNoFrame];
+        return [...fragmentComponentsWithNoFrame];
     });
     setContext(key, {
         get current() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.15.5",
+  "version": "1.15.6",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -62,7 +62,7 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
     "runed": "0.31.1",
-    "svelte": "5.53.13",
+    "svelte": "5.55.0",
     "svelte-check": "4.4.5",
     "svelte-virtuallists": "1.4.2",
     "tailwindcss": "4.1.13",

package/dist/hooks/useVisibility.svelte.d.ts

@@ -1,6 +0,0 @@
-import type { Entity } from 'koota';
-import { SvelteMap } from 'svelte/reactivity';
-type Context = SvelteMap<Entity, boolean>;
-export declare const provideVisibility: () => void;
-export declare const useVisibility: () => Context;
-export {};

package/dist/hooks/useVisibility.svelte.js

@@ -1,10 +0,0 @@
-import { getContext, setContext } from 'svelte';
-import { SvelteMap } from 'svelte/reactivity';
-const key = Symbol('object-visibility-context');
-export const provideVisibility = () => {
-    const map = new SvelteMap();
-    setContext(key, map);
-};
-export const useVisibility = () => {
-    return getContext(key);
-};