@viamrobotics/motion-tools 1.3.3 → 1.3.5

package/dist/components/{Arrows.svelte → Arrows/ArrowGroups.svelte}

@@ -1,14 +1,11 @@
 <script lang="ts">
-	import { T } from '@threlte/core'
-	import { Portal } from '@threlte/extras'
-	import { InstancedArrows } from '../three/InstancedArrows/InstancedArrows'
-	import { traits, useWorld } from '../ecs'
+	import { InstancedArrows } from '../../three/InstancedArrows/InstancedArrows'
+	import { traits, useWorld } from '../../ecs'
 	import type { Entity } from 'koota'
-	import { STRIDE } from '../buffer'
-	import { useObjectEvents } from '../hooks/useObjectEvents.svelte'
+	import { STRIDE } from '../../buffer'
 	import { SvelteMap } from 'svelte/reactivity'
 	import { Color } from 'three'
-	import { meshBoundsRaycast } from '../three/InstancedArrows/raycast'
+	import Arrows from './Arrows.svelte'
 
 	const world = useWorld()
 
@@ -59,23 +56,8 @@
 </script>
 
 {#each map as [entity, arrows] (entity)}
-	{@const events = useObjectEvents(() => entity)}
-	<Portal id={entity.get(traits.Parent)}>
-		<T
-			is={arrows}
-			name={entity}
-		>
-			<T
-				is={arrows.headMesh}
-				bvh={{ enabled: false }}
-				raycast={() => null}
-			/>
-			<T
-				is={arrows.shaftMesh}
-				bvh={{ enabled: false }}
-				raycast={meshBoundsRaycast}
-				{...events}
-			/>
-		</T>
-	</Portal>
+	<Arrows
+		{entity}
+		{arrows}
+	/>
 {/each}

package/dist/components/Arrows/ArrowGroups.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ArrowGroups: import("svelte").Component<Record<string, never>, {}, "">;
+type ArrowGroups = ReturnType<typeof ArrowGroups>;
+export default ArrowGroups;

package/dist/components/Arrows/Arrows.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Portal } from '@threlte/extras'
+	import type { Entity } from 'koota'
+	import { traits } from '../../ecs'
+	import { useObjectEvents } from '../../hooks/useObjectEvents.svelte'
+	import type { InstancedArrows } from '../../three/InstancedArrows/InstancedArrows'
+	import { meshBoundsRaycast } from '../../three/InstancedArrows/raycast'
+
+	interface Props {
+		entity: Entity
+		arrows: InstancedArrows
+	}
+
+	let { entity, arrows }: Props = $props()
+
+	const events = useObjectEvents(() => entity)
+</script>
+
+<Portal id={entity.get(traits.Parent)}>
+	<T
+		is={arrows}
+		name={entity}
+	>
+		<T
+			is={arrows.headMesh}
+			bvh={{ enabled: false }}
+			raycast={() => null}
+			visible={events.visible}
+		/>
+		<T
+			is={arrows.shaftMesh}
+			bvh={{ enabled: false }}
+			raycast={meshBoundsRaycast}
+			{...events}
+		/>
+	</T>
+</Portal>

package/dist/components/Arrows/Arrows.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Entity } from 'koota';
+import type { InstancedArrows } from '../../three/InstancedArrows/InstancedArrows';
+interface Props {
+    entity: Entity;
+    arrows: InstancedArrows;
+}
+declare const Arrows: import("svelte").Component<Props, {}, "">;
+type Arrows = ReturnType<typeof Arrows>;
+export default Arrows;

package/dist/components/Details.svelte

@@ -3,7 +3,7 @@
 	lang="ts"
 >
 	import { OrientationVector } from '../three/OrientationVector'
-	import { Quaternion, Vector3, MathUtils, type Vector2Like } from 'three'
+	import { Quaternion, Vector3, MathUtils } from 'three'
 
 	const vec3 = new Vector3()
 	const quaternion = new Quaternion()
@@ -14,7 +14,7 @@
 	import { draggable } from '@neodrag/svelte'
 	import { Check, Copy } from 'lucide-svelte'
 	import { useTask } from '@threlte/core'
-	import { Button, Icon, Select, Input } from '@viamrobotics/prime-core'
+	import { Button, Icon, Select, Input, Tooltip } from '@viamrobotics/prime-core'
 	import {
 		useSelectedEntity,
 		useFocusedEntity,
@@ -25,14 +25,14 @@
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
-	import { traits, useTrait } from '../ecs'
+	import { traits, useTrait, useWorld } from '../ecs'
 	import { useResourceByName } from '../hooks/useResourceByName.svelte'
-	import { PersistedState } from 'runed'
+	import { useCameraControls } from '../hooks/useControls.svelte'
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like>('details-drag-position', { x: 0, y: 0 })
-
+	const world = useWorld()
+	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
 	const frames = useFrames()
 	const partConfig = usePartConfig()
@@ -52,6 +52,7 @@
 	const box = useTrait(() => entity, traits.Box)
 	const sphere = useTrait(() => entity, traits.Sphere)
 	const capsule = useTrait(() => entity, traits.Capsule)
+	const removable = useTrait(() => entity, traits.Removable)
 
 	const framesAPI = useTrait(() => entity, traits.FramesAPI)
 	const isFrameNode = $derived(!!framesAPI.current)
@@ -230,27 +231,77 @@
 	{@const ScalarAttribute = showEditFrameOptions ? MutableField : ImmutableField}
 
 	<div
+		id="details-panel"
 		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 {showEditFrameOptions
 			? 'w-80'
 			: 'w-60'} border p-2 text-xs"
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,
-			defaultPosition: dragPosition.current,
-			onDragEnd(data) {
-				dragPosition.current = { x: data.offsetX, y: data.offsetY }
-			},
 		}}
 		{...rest}
 	>
 		<div class="flex items-center justify-between gap-2 pb-2">
-			<div class="flex items-center gap-1">
+			<div class="flex w-[80%] items-center gap-1">
 				<button bind:this={dragElement}>
 					<Icon name="drag" />
 				</button>
-				<strong>{name.current}</strong>
+				<strong class="overflow-hidden text-nowrap text-ellipsis">{name.current}</strong>
 				<span class="text-subtle-2">{resourceName?.subtype}</span>
 			</div>
+
+			{#if object3d}
+				<Tooltip
+					let:tooltipID
+					location="bottom"
+				>
+					<button
+						class="text-subtle-2"
+						aria-describedby={tooltipID}
+						onclick={() => {
+							const padding = 0.4
+
+							if (!controls.current) return
+
+							const { azimuthAngle, polarAngle } = controls.current
+
+							controls.current.fitToBox(object3d, true, {
+								paddingTop: padding,
+								paddingBottom: padding,
+								paddingLeft: padding,
+								paddingRight: padding,
+							})
+
+							// Preserve previous rotation
+							controls.current?.rotateAzimuthTo(azimuthAngle, true)
+							controls.current?.rotatePolarTo(polarAngle, true)
+						}}
+					>
+						<Icon name="image-filter-center-focus" />
+					</button>
+					<p slot="description">Zoom to object</p>
+				</Tooltip>
+			{/if}
+
+			{#if removable.current}
+				<Tooltip
+					let:tooltipID
+					location="bottom"
+				>
+					<button
+						class="text-subtle-2"
+						aria-describedby={tooltipID}
+						onclick={() => {
+							if (world.has(entity)) {
+								entity.destroy()
+							}
+						}}
+					>
+						<Icon name="trash-can-outline" />
+					</button>
+					<p slot="description">Remove from scene</p>
+				</Tooltip>
+			{/if}
 		</div>
 
 		<div class="border-medium -mx-2 w-[100%+0.5rem] border-b"></div>

package/dist/components/FileDrop/FileDrop.svelte

@@ -42,7 +42,8 @@
 						traits.Name(result.name),
 						traits.BufferGeometry(geometry),
 						traits.Points,
-						traits.DroppedFile
+						traits.DroppedFile,
+						traits.Removable
 					)
 					break
 				}
@@ -50,7 +51,8 @@
 					world.spawn(
 						traits.Name(result.name),
 						traits.BufferGeometry(result.ply),
-						traits.DroppedFile
+						traits.DroppedFile,
+						traits.Removable
 					)
 					break
 				}

package/dist/components/Geometry2.svelte

@@ -132,6 +132,7 @@
 		<T
 			is={mesh}
 			name={entity}
+			userData.name={name}
 			bvh={{ enabled: geometryType === 'buffer' }}
 		>
 			{#if model && renderMode.includes('model')}
@@ -184,7 +185,7 @@
 					opacity={opacity.current ?? 0.7}
 				/>
 
-				{#if geo}
+				{#if geo && renderMode.includes('colliders')}
 					<T.LineSegments
 						raycast={() => null}
 						bvh={{ enabled: false }}

package/dist/components/KeyboardControls.svelte

@@ -3,8 +3,9 @@
 	import { useTask } from '@threlte/core'
 	import type { CameraControlsRef } from '@threlte/extras'
 	import { PressedKeys } from 'runed'
-	import { useFocusedEntity } from '../hooks/useSelection.svelte'
+	import { useFocusedEntity, useSelectedEntity } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
+	import { useVisibility } from '../hooks/useVisibility.svelte'
 
 	interface Props {
 		cameraControls: CameraControlsRef
@@ -13,7 +14,12 @@
 	let { cameraControls }: Props = $props()
 
 	const focusedEntity = useFocusedEntity()
+	const selectedEntity = useSelectedEntity()
+
+	const entity = $derived(focusedEntity.current ?? selectedEntity.current)
+
 	const settings = useSettings()
+	const visibility = useVisibility()
 
 	const keys = new PressedKeys()
 	const meta = $derived(keys.has('meta'))
@@ -28,6 +34,7 @@
 	const down = $derived(keys.has('arrowdown'))
 	const right = $derived(keys.has('arrowright'))
 	const any = $derived(w || s || a || d || r || f || up || left || down || right)
+
 	const { start, stop } = useTask(
 		(delta) => {
 			const dt = delta * 1000
@@ -117,4 +124,24 @@
 	keys.onKeys('x', () => {
 		settings.current.enableXR = !settings.current.enableXR
 	})
+
+	/**
+	 * Handler for any keybindings that need to access the event object
+	 */
+	const onkeydown = (event: KeyboardEvent) => {
+		const key = event.key.toLowerCase()
+
+		if (key === 'h') {
+			if (!entity) return
+
+			event.stopImmediatePropagation()
+
+			const visible = visibility.get(entity) ?? true
+
+			visibility.set(entity, !visible)
+			return
+		}
+	}
 </script>
+
+<svelte:window {onkeydown} />

package/dist/components/Scene.svelte

@@ -17,7 +17,7 @@
 	import MeasureTool from './MeasureTool.svelte'
 	import PointerMissBox from './PointerMissBox.svelte'
 	import BatchedArrows from './BatchedArrows.svelte'
-	import Arrows from './Arrows.svelte'
+	import Arrows from './Arrows/ArrowGroups.svelte'
 
 	interface Props {
 		children?: Snippet
@@ -30,17 +30,19 @@
 	const origin = useOrigin()
 
 	const { raycaster, enabled } = interactivity({
-		filter: (items) => {
-			const item = items.find((item) => {
-				return item.object.visible === undefined || item.object.visible === true
+		filter: (intersections) => {
+			const match = intersections.find((intersection) => {
+				return intersection.object.visible === undefined || intersection.object.visible === true
 			})
 
-			return item ? [item] : []
+			return match ? [match] : []
 		},
 	})
+
 	$effect(() => {
 		enabled.set(!settings.current.enableMeasure)
 	})
+
 	raycaster.firstHitOnly = true
 	raycaster.params.Points.threshold = 0.005
 

package/dist/components/StaticGeometries.svelte

@@ -39,7 +39,8 @@
 		const entity = world.spawn(
 			traits.Name(`custom geometry ${++index}`),
 			traits.Pose,
-			traits.Box({ x: 0.1, y: 0.1, z: 0.1 })
+			traits.Box({ x: 0.1, y: 0.1, z: 0.1 }),
+			traits.Removable
 		)
 
 		entities.add(entity)

package/dist/components/Tree/Settings.svelte

@@ -18,7 +18,7 @@
 	const cameras = useResourceNames(() => partID.current, 'camera')
 	const visionServices = useResourceNames(() => partID.current, 'vision')
 	const settings = useSettings()
-	const { disabledCameras, disabledVisionServicesObjectPointclouds } = useMachineSettings()
+	const { disabledCameras, disabledVisionServices } = useMachineSettings()
 	const geometries = useGeometries()
 	const pointclouds = usePointClouds()
 	const { refetchPoses } = useRefetchPoses()
@@ -81,9 +81,9 @@
 				<div class="flex items-center justify-between gap-4 py-2">
 					{visionService.name}
 					<Switch
-						on={disabledVisionServicesObjectPointclouds.get(visionService.name) !== true}
+						on={disabledVisionServices.get(visionService.name) !== true}
 						on:change={(event) => {
-							disabledVisionServicesObjectPointclouds.set(visionService.name, !event.detail)
+							disabledVisionServices.set(visionService.name, !event.detail)
 						}}
 					/>
 				</div>

package/dist/components/Tree/Tree.svelte

@@ -92,11 +92,14 @@
 		{@const { children = [] } = node}
 		<div
 			{...api.getBranchProps(nodeProps)}
-			class={{
-				'text-disabled': !isVisible,
-				'bg-medium': selected,
-				sticky: true,
-			}}
+			class={[
+				'w-full',
+				{
+					'text-disabled': !isVisible,
+					'bg-medium': selected,
+					sticky: true,
+				},
+			]}
 		>
 			<div {...api.getBranchControlProps(nodeProps)}>
 				<span
@@ -106,7 +109,7 @@
 					<ChevronRight size={14} />
 				</span>
 				<span
-					class="flex items-center"
+					class="flex items-center overflow-hidden text-ellipsis"
 					{...api.getBranchTextProps(nodeProps)}
 				>
 					{node.entity.get(traits.Name)}
@@ -151,7 +154,7 @@
 			class={{ 'flex justify-between': true, 'text-disabled': !isVisible, 'bg-medium': selected }}
 			{...api.getItemProps(nodeProps)}
 		>
-			<span class="flex items-center gap-1.5">
+			<span class="flex items-center gap-1.5 overflow-hidden text-nowrap text-ellipsis">
 				{node.entity.get(traits.Name)}
 			</span>
 

package/dist/components/Tree/TreeContainer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { Vector2Like } from 'three'
 	import { draggable } from '@neodrag/svelte'
 	import Tree from './Tree.svelte'
 	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
@@ -11,16 +10,13 @@
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
-	import { traits, useWorld } from '../../ecs'
+	import { traits, useQuery, useWorld } from '../../ecs'
 	import { IsExcluded, type Entity } from 'koota'
 	import { buildTreeNodes, type TreeNode } from './buildTree'
 	import { MIN_DIMENSIONS, useResizable } from '../../hooks/useResizable.svelte'
-	import { PersistedState } from 'runed'
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like | undefined>('tree-drag-position', undefined)
-
 	provideTreeExpandedContext()
 
 	let container = $state.raw<HTMLDivElement>()
@@ -38,32 +34,13 @@
 
 	const worldEntity = world.spawn(IsExcluded, traits.Name('World'))
 
-	let children = $state.raw<TreeNode[]>([])
-	let nodeMap = $state.raw<Record<string, TreeNode | undefined>>({})
-
-	let pending = false
-	const flush = () => {
-		if (pending) return
-		pending = true
-
-		window.setTimeout(() => {
-			const results = buildTreeNodes(world.query(traits.Name))
-			children = results.rootNodes
-			nodeMap = results.nodeMap
-			pending = false
-		})
-	}
+	const allEntities = useQuery(traits.Name)
 
-	world.onAdd(traits.Name, flush)
-	world.onAdd(traits.Parent, flush)
-	world.onRemove(traits.Name, flush)
-	world.onRemove(traits.Parent, flush)
-	world.onChange(traits.Name, flush)
-	world.onChange(traits.Parent, flush)
+	const { rootNodes, nodeMap } = $derived(buildTreeNodes(allEntities.current))
 
 	const rootNode = $derived<TreeNode>({
 		entity: worldEntity,
-		children,
+		children: rootNodes,
 	})
 
 	$effect(() => {
@@ -83,10 +60,6 @@
 	use:draggable={{
 		bounds: 'body',
 		handle: dragElement,
-		defaultPosition: dragPosition.current,
-		onDragEnd(data) {
-			dragPosition.current = { x: Math.max(data.offsetX, 0), y: Math.max(data.offsetY, 0) }
-		},
 	}}
 	{...rest}
 >

package/dist/components/widgets/ArmPositions.svelte

@@ -1,19 +1,12 @@
 <script lang="ts">
-	import type { Vector2Like } from 'three'
 	import { draggable } from '@neodrag/svelte'
 	import { formatNumeric } from '../../format'
 	import Table from '../shared/Table.svelte'
 	import { useArmClient } from '../../hooks/useArmClient.svelte'
 	import { Icon, Label, Select } from '@viamrobotics/prime-core'
-	import { PersistedState } from 'runed'
 
 	const { ...rest } = $props()
 
-	const dragPosition = new PersistedState<Vector2Like | undefined>(
-		'details-drag-position',
-		undefined
-	)
-
 	let dragElement = $state.raw<HTMLElement>()
 
 	const armClient = useArmClient()
@@ -28,10 +21,6 @@
 	use:draggable={{
 		bounds: 'body',
 		handle: dragElement,
-		defaultPosition: dragPosition.current,
-		onDragEnd(data) {
-			dragPosition.current = { x: data.offsetX, y: data.offsetY }
-		},
 	}}
 	{...rest}
 >

package/dist/ecs/traits.d.ts

@@ -126,6 +126,10 @@ export declare const PointSize: import("koota").Trait<() => number>;
  */
 export declare const LineWidth: import("koota").Trait<() => number>;
 export declare const ReferenceFrame: import("koota").TagTrait;
+/**
+ * This entity can be safetly removed from the scene by the user
+ */
+export declare const Removable: import("koota").TagTrait;
 export declare const Geometry: (geometry: ViamGeometry) => import("koota").TagTrait | [import("koota").Trait<{
     x: number;
     y: number;

package/dist/ecs/traits.js

@@ -78,6 +78,10 @@ export const PointSize = trait(() => 10);
  */
 export const LineWidth = trait(() => 5);
 export const ReferenceFrame = trait();
+/**
+ * This entity can be safetly removed from the scene by the user
+ */
+export const Removable = trait();
 export const Geometry = (geometry) => {
     if (geometry.geometryType.case === 'box') {
         return Box(createBox(geometry.geometryType.value));

package/dist/hooks/useDrawAPI.svelte.js

@@ -144,7 +144,7 @@ export const provideDrawAPI = () => {
             if (frame.geometry) {
                 entityTraits.push(geometryTrait());
             }
-            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame);
+            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame, traits.Removable);
             const entity = world.spawn(...entityTraits);
             entities.set(name, entity);
         }
@@ -178,7 +178,7 @@ export const provideDrawAPI = () => {
         if (parent && parent !== 'world') {
             entityTraits.push(traits.Parent(parent));
         }
-        entityTraits.push(traits.Name(data.label ?? ++geometryIndex), traits.Pose(pose), traits.Color(colorUtil.set(color)), geometryTrait(), traits.DrawAPI);
+        entityTraits.push(traits.Name(data.label ?? ++geometryIndex), traits.Pose(pose), traits.Color(colorUtil.set(color)), geometryTrait(), traits.DrawAPI, traits.Removable);
         const entity = world.spawn(...entityTraits);
         entities.set(name, entity);
     };
@@ -201,7 +201,7 @@ export const provideDrawAPI = () => {
             existing.set(traits.LinePositions, points);
             return;
         }
-        const entity = world.spawn(traits.Name(name), traits.Color(colorUtil.set(color)), traits.LinePositions(points), traits.DrawAPI);
+        const entity = world.spawn(traits.Name(name), traits.Color(colorUtil.set(color)), traits.LinePositions(points), traits.DrawAPI, traits.Removable);
         entities.set(name, entity);
     };
     const vec3 = new Vector3();
@@ -211,7 +211,7 @@ export const provideDrawAPI = () => {
         const nColors = reader.read();
         const arrowHeadAtPose = reader.read();
         const entities = [];
-        const entity = world.spawn(traits.Name(`Arrow group ${++poseIndex}`), traits.Positions(reader.readF32Array(nPoints * STRIDE.ARROWS)), traits.Colors(reader.readU8Array(nColors * STRIDE.COLORS_RGB)), traits.Arrows({ headAtPose: arrowHeadAtPose === 1 }), traits.DrawAPI);
+        const entity = world.spawn(traits.Name(`Arrow group ${++poseIndex}`), traits.Positions(reader.readF32Array(nPoints * STRIDE.ARROWS)), traits.Colors(reader.readU8Array(nColors * STRIDE.COLORS_RGB)), traits.Arrows({ headAtPose: arrowHeadAtPose === 1 }), traits.DrawAPI, traits.Removable);
         entities.push(entity);
     };
     const drawPoints = async (reader) => {
@@ -251,7 +251,7 @@ export const provideDrawAPI = () => {
             }
         }
         const geometry = createBufferGeometry(positions, colors);
-        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.BufferGeometry(geometry), traits.Points, traits.DrawAPI);
+        world.spawn(traits.Name(label), traits.Color(colorUtil.set(r, g, b)), traits.BufferGeometry(geometry), traits.Points, traits.DrawAPI, traits.Removable);
     };
     const drawLine = async (reader) => {
         // Read label length
@@ -279,7 +279,7 @@ export const provideDrawAPI = () => {
             points[i + 1] = reader.read();
             points[i + 2] = reader.read();
         }
-        world.spawn(traits.Name(label), traits.Color({ r, g, b }), traits.LinePositions(points), traits.PointColor({ r: dotR, g: dotG, b: dotB }), traits.DrawAPI);
+        world.spawn(traits.Name(label), traits.Color({ r, g, b }), traits.LinePositions(points), traits.PointColor({ r: dotR, g: dotG, b: dotB }), traits.DrawAPI, traits.Removable);
     };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const drawGeometries = (geometries, colors, parent) => {
@@ -293,14 +293,16 @@ export const provideDrawAPI = () => {
         const blob = new Blob([buffer], { type: 'model/gltf-binary' });
         const url = URL.createObjectURL(blob);
         const gltf = await loader.loadAsync(url);
-        world.spawn(traits.Name(gltf.scene.name), traits.GLTF({ source: { gltf }, animationName: '' }), traits.DrawAPI);
+        world.spawn(traits.Name(gltf.scene.name), traits.GLTF({ source: { gltf }, animationName: '' }), traits.DrawAPI, traits.Removable);
         URL.revokeObjectURL(url);
     };
     const remove = (names) => {
         for (const name of names) {
             for (const entity of world.query(traits.DrawAPI)) {
                 if (entity.get(traits.Name) === name) {
-                    entity.destroy();
+                    if (world.has(entity)) {
+                        entity.destroy();
+                    }
                     entities.delete(name);
                 }
             }
@@ -308,7 +310,9 @@ export const provideDrawAPI = () => {
     };
     const removeAll = () => {
         for (const entity of world.query(traits.DrawAPI)) {
-            entity.destroy();
+            if (world.has(entity)) {
+                entity.destroy();
+            }
         }
         entities.clear();
         geometryIndex = 0;

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

@@ -1,6 +1,6 @@
 export declare const ENVIRONMENT_CONTEXT_KEY: unique symbol;
 interface Environemnt {
-    viewerMode: 'edit' | 'monitor';
+    viewerMode: 'edit' | 'monitor' | 'focus';
     isStandalone: boolean;
 }
 interface Context {

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

@@ -6,7 +6,7 @@ export declare const RefreshRates: {
 type Context = {
     refreshRates: SvelteMap<string, number>;
     disabledCameras: SvelteMap<string, boolean>;
-    disabledVisionServicesObjectPointclouds: SvelteMap<string, boolean>;
+    disabledVisionServices: SvelteMap<string, boolean>;
 };
 export declare const provideMachineSettings: () => void;
 export declare const useMachineSettings: () => Context;

package/dist/hooks/useMachineSettings.svelte.js

@@ -4,7 +4,7 @@ import { SvelteMap } from 'svelte/reactivity';
 const key = Symbol('polling-rate-context');
 const refreshRatesKey = 'polling-rate';
 const disabledCamerasKey = 'disabled-cameras';
-const disabledVisionServicesObjectPointcloudsKey = 'disabled-vision-services-object-pointcloud';
+const disabledVisionServicesKey = 'disabled-vision-services-object-pointcloud';
 export const RefreshRates = {
     poses: 'poses',
     pointclouds: 'pointclouds',
@@ -22,15 +22,15 @@ export const provideMachineSettings = () => {
         [RefreshRates.pointclouds, -1],
     ]);
     const disabledCameras = new SvelteMap();
-    const disabledVisionServicesObjectPointclouds = new SvelteMap();
+    const disabledVisionServices = new SvelteMap();
     get(refreshRatesKey).then((entries) => {
         setFromEntries(refreshRates, entries);
     });
     get(disabledCamerasKey).then((entries) => {
         setFromEntries(disabledCameras, entries);
     });
-    get(disabledVisionServicesObjectPointcloudsKey).then((entries) => {
-        setFromEntries(disabledVisionServicesObjectPointclouds, entries);
+    get(disabledVisionServicesKey).then((entries) => {
+        setFromEntries(disabledVisionServices, entries);
     });
     $effect(() => {
         set(refreshRatesKey, [...refreshRates.entries()]);
@@ -38,6 +38,9 @@ export const provideMachineSettings = () => {
     $effect(() => {
         set(disabledCamerasKey, [...disabledCameras.entries()]);
     });
+    $effect(() => {
+        set(disabledVisionServicesKey, [...disabledVisionServices.entries()]);
+    });
     setContext(key, {
         get refreshRates() {
             return refreshRates;
@@ -45,8 +48,8 @@ export const provideMachineSettings = () => {
         get disabledCameras() {
             return disabledCameras;
         },
-        get disabledVisionServicesObjectPointclouds() {
-            return disabledVisionServicesObjectPointclouds;
+        get disabledVisionServices() {
+            return disabledVisionServices;
         },
     });
 };

package/dist/hooks/useObjectEvents.svelte.js

@@ -3,39 +3,47 @@ import { useFocusedEntity, useSelectedEntity } from './useSelection.svelte';
 import { useVisibility } from './useVisibility.svelte';
 import { Vector2 } from 'three';
 export const useObjectEvents = (entity) => {
+    const down = new Vector2();
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();
     const visibility = useVisibility();
-    const down = new Vector2();
-    const currentEntity = $derived(entity());
     const cursor = useCursor();
+    const currentEntity = $derived(entity());
+    const visible = $derived(currentEntity ? (visibility.get(currentEntity) ?? true) : true);
+    const onpointerenter = (event) => {
+        event.stopPropagation();
+        cursor.onPointerEnter();
+    };
+    const onpointerleave = (event) => {
+        event.stopPropagation();
+        cursor.onPointerLeave();
+    };
+    const ondblclick = (event) => {
+        event.stopPropagation();
+        focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
+    };
+    const onpointerdown = (event) => {
+        down.copy(event.pointer);
+    };
+    const onclick = (event) => {
+        event.stopPropagation();
+        if (down.distanceToSquared(event.pointer) < 0.1) {
+            selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
+        }
+    };
+    $effect(() => {
+        if (!visible) {
+            cursor.onPointerLeave();
+        }
+    });
     return {
         get visible() {
-            if (!currentEntity) {
-                return true;
-            }
-            return visibility.get(currentEntity) ?? true;
-        },
-        onpointerenter: (event) => {
-            event.stopPropagation();
-            cursor.onPointerEnter();
-        },
-        onpointerleave: (event) => {
-            event.stopPropagation();
-            cursor.onPointerLeave();
-        },
-        ondblclick: (event) => {
-            event.stopPropagation();
-            focusedEntity.set(currentEntity, event.instanceId ?? event.batchId);
-        },
-        onpointerdown: (event) => {
-            down.copy(event.pointer);
-        },
-        onclick: (event) => {
-            event.stopPropagation();
-            if (down.distanceToSquared(event.pointer) < 0.1) {
-                selectedEntity.set(currentEntity, event.instanceId ?? event.batchId);
-            }
+            return visible;
         },
+        onpointerenter,
+        onpointerleave,
+        ondblclick,
+        onpointerdown,
+        onclick,
     };
 };

package/dist/hooks/usePointcloudObjects.svelte.js

@@ -13,7 +13,7 @@ const key = Symbol('pointcloud-object-context');
 export const providePointcloudObjects = (partID) => {
     const world = useWorld();
     const environment = useEnvironment();
-    const { refreshRates, disabledVisionServicesObjectPointclouds } = useMachineSettings();
+    const { refreshRates, disabledVisionServices } = useMachineSettings();
     const services = useResourceNames(partID, 'vision');
     const clients = $derived(services.current.map((service) => createResourceClient(VisionClient, partID, () => service.name)));
     const propQueries = $derived(clients.map((client) => [
@@ -31,7 +31,8 @@ export const providePointcloudObjects = (partID) => {
             if (environment.current.viewerMode === 'monitor' &&
                 fetchedPropQueries &&
                 client.current?.name &&
-                interval !== RefetchRates.OFF) {
+                interval !== RefetchRates.OFF &&
+                disabledVisionServices.get(client.current?.name) !== true) {
                 results.push(client);
             }
         }
@@ -47,8 +48,8 @@ export const providePointcloudObjects = (partID) => {
     $effect(() => {
         for (const [name, query] of propQueries) {
             if (name && query.data?.objectPointCloudsSupported === false) {
-                if (disabledVisionServicesObjectPointclouds.get(name) === undefined) {
-                    disabledVisionServicesObjectPointclouds.set(name, true);
+                if (disabledVisionServices.get(name) === undefined) {
+                    disabledVisionServices.set(name, true);
                 }
             }
         }
@@ -83,7 +84,11 @@ export const providePointcloudObjects = (partID) => {
             }
         }
         Promise.allSettled(responses.map(async ([name, pointcloudObjects]) => {
-            const pointclouds = await Promise.all(pointcloudObjects.map((value) => parsePcdInWorker(new Uint8Array(value.pointCloud))));
+            const pointclouds = await Promise.all(pointcloudObjects
+                .filter((value) => value !== undefined)
+                .map((value) => {
+                return parsePcdInWorker(new Uint8Array(value.pointCloud));
+            }));
             return {
                 name,
                 pointclouds,
@@ -156,7 +161,9 @@ export const providePointcloudObjects = (partID) => {
         // Clean up old entities
         for (const [label, entity] of entities) {
             if (!active[label]) {
-                entity.destroy();
+                if (world.has(entity)) {
+                    entity.destroy();
+                }
                 entities.delete(label);
             }
         }

package/dist/hooks/usePointclouds.svelte.js

@@ -117,7 +117,9 @@ export const providePointclouds = (partID) => {
         // Clean up old entities
         for (const [name, entity] of entities) {
             if (!queryMap[name]?.data) {
-                entity.destroy();
+                if (world.has(entity)) {
+                    entity.destroy();
+                }
                 entities.delete(name);
             }
         }

package/dist/hooks/useSelection.svelte.js

@@ -1,13 +1,15 @@
-import { isInstanceOf, useThrelte } from '@threlte/core';
-import { getContext, setContext } from 'svelte';
+import { useThrelte } from '@threlte/core';
+import { getContext, setContext, untrack } from 'svelte';
 import { Object3D } from 'three';
 import { traits, useWorld } from '../ecs';
+import { useEnvironment } from './useEnvironment.svelte';
 const selectedKey = Symbol('selected-frame-context');
 const focusedKey = Symbol('focused-frame-context');
 const focusedObject3dKey = Symbol('focused-object-3d-context');
 export const provideSelection = () => {
     const world = useWorld();
     const { scene } = useThrelte();
+    const environment = useEnvironment();
     let selected = $state.raw();
     let selectedInstance = $state();
     let focused = $state.raw();
@@ -46,18 +48,15 @@ export const provideSelection = () => {
         },
     };
     setContext(focusedKey, focusedEntityContext);
-    const focusedObject3d = $derived.by(() => {
-        const name = focused?.get(traits.Name);
-        if (!name) {
-            return;
+    const focusedObject3d = $derived(focused ? scene.getObjectByName(focused)?.clone() : undefined);
+    $effect(() => {
+        const previousMode = untrack(() => environment.current.viewerMode);
+        if (focusedObject3d) {
+            environment.current.viewerMode = 'focus';
+            return () => {
+                environment.current.viewerMode = previousMode;
+            };
         }
-        const object = scene.getObjectByName(name)?.clone();
-        object?.traverse((child) => {
-            if (isInstanceOf(child, 'LineSegments')) {
-                child.raycast = () => null;
-            }
-        });
-        return object;
     });
     setContext(focusedObject3dKey, {
         get current() {

package/dist/hooks/useWorldState.svelte.js

@@ -71,7 +71,9 @@ const createWorldState = (client) => {
         const entity = entities.get(uuid);
         if (!entity)
             return;
-        entity.destroy();
+        if (world.has(entity)) {
+            entity.destroy();
+        }
         entities.delete(uuid);
     };
     const updateEntity = (transform, changes) => {
@@ -202,7 +204,9 @@ const createWorldState = (client) => {
     });
     return () => {
         for (const [, entity] of entities) {
-            entity.destroy();
+            if (world.has(entity)) {
+                entity.destroy();
+            }
         }
     };
 };

package/dist/loaders/pcd/worker.js

@@ -9,7 +9,12 @@ self.onmessage = async (event) => {
     try {
         const pcd = loader.parse(data.buffer);
         if (pcd.geometry) {
-            const positions = pcd.geometry.attributes.position.array;
+            /**
+             * Positions is _usually_ defined. However, we have experienced parsing PCDs from Viam APIs that
+             * result in the Three.js parser not attaching this attribute, throwing errors downstream.
+             */
+            const positions = pcd.geometry.attributes.position?.array ??
+                new Float32Array(0);
             const colors = pcd.geometry.attributes.color?.array ?? null;
             postMessage({ positions, colors, id }, colors ? [positions.buffer, colors.buffer] : [positions.buffer]);
         }

package/dist/snapshot.js

@@ -83,6 +83,7 @@ const spawnTransformEntity = (world, transform) => {
         traits.Geometry(transform.physicalObject ?? Geometry.fromJson({})),
         traits.Center(transform.physicalObject?.center),
         traits.SnapshotAPI,
+        traits.Removable,
     ];
     const poseInFrame = transform.poseInObserverFrame;
     entityTraits.push(traits.Pose(poseInFrame?.pose));
@@ -117,7 +118,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
         if (colors) {
             entityTraits.push(traits.Colors(colors));
         }
-        const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Arrows({ headAtPose: true }), traits.Instances({ count: poses.length / STRIDE.ARROWS }));
+        const entity = world.spawn(...entityTraits, traits.Arrows({ headAtPose: true }), traits.Instances({ count: poses.length / STRIDE.ARROWS }), traits.SnapshotAPI, traits.Removable);
         entities.push(entity);
     }
     else if (geometryType?.case === 'model') {
@@ -129,7 +130,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
         if (parent) {
             rootEntityTraits.push(traits.Parent(parent));
         }
-        const rootEntity = world.spawn(...rootEntityTraits, traits.SnapshotAPI);
+        const rootEntity = world.spawn(...rootEntityTraits, traits.SnapshotAPI, traits.Removable);
         entities.push(rootEntity);
         let i = 1;
         for (const asset of geometryType.value.assets) {
@@ -152,7 +153,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
                     animationName: geometryType.value.animationName ?? '',
                 }));
             }
-            const entity = world.spawn(...entityTraits, traits.SnapshotAPI);
+            const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Removable);
             entities.push(entity);
         }
     }
@@ -227,7 +228,7 @@ const spawnEntitiesFromDrawing = (world, drawing) => {
             }
             entityTraits.push(traits.LinePositions(points));
         }
-        const entity = world.spawn(...entityTraits, traits.SnapshotAPI);
+        const entity = world.spawn(...entityTraits, traits.SnapshotAPI, traits.Removable);
         entities.push(entity);
     }
     return entities;

package/dist/three/InstancedArrows/InstancedArrows.js

@@ -1,6 +1,6 @@
 import { RawShaderMaterial, FrontSide, Group, InstancedBufferAttribute, DynamicDrawUsage, Mesh, BufferGeometry, InstancedInterleavedBuffer, InterleavedBufferAttribute, Material, Color, Vector3, Box3, } from 'three';
-import vertexShader from './vertex.glsl?raw';
-import fragmentShader from './fragment.glsl?raw';
+import vertexShader from './vertex.glsl';
+import fragmentShader from './fragment.glsl';
 import { createHeadGeometry, createShaftGeometry, toInstanced } from './geometry';
 import { computeBoundingBox } from './box';
 const defaults = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -17,7 +17,7 @@
     "@skeletonlabs/skeleton": "3.2.0",
     "@skeletonlabs/skeleton-svelte": "1.5.1",
     "@sveltejs/adapter-static": "3.0.9",
-    "@sveltejs/kit": "2.37.0",
+    "@sveltejs/kit": "2.49.5",
     "@sveltejs/package": "2.5.0",
     "@sveltejs/vite-plugin-svelte": "6.1.4",
     "@tailwindcss/forms": "0.5.10",
@@ -68,10 +68,14 @@
     "typescript-eslint": "8.42.0",
     "vite": "7.1.11",
     "vite-plugin-devtools-json": "1.0.0",
+    "vite-plugin-glsl": "^1.5.5",
     "vite-plugin-mkcert": "1.17.8",
     "vitest": "3.2.4"
   },
   "peerDependencies": {
+    "@ag-grid-community/client-side-row-model": ">=32.3.0",
+    "@ag-grid-community/core": ">=32.3.0",
+    "@ag-grid-community/styles": ">=32.3.0",
     "@dimforge/rapier3d-compat": ">=0.17",
     "@threlte/core": ">=8",
     "@threlte/extras": ">=9",
@@ -81,6 +85,7 @@
     "@viamrobotics/sdk": ">=0.38",
     "@viamrobotics/svelte-sdk": ">=0.1",
     "@zag-js/collapsible": ">=1",
+    "@zag-js/dialog": ">=1.31",
     "@zag-js/floating-panel": ">=1",
     "@zag-js/svelte": ">=1",
     "@zag-js/tree-view": ">=1",
@@ -89,11 +94,7 @@
     "lucide-svelte": ">=0.511",
     "runed": ">=0.28",
     "svelte": ">=5",
-    "svelte-virtuallists": ">=1",
-    "@ag-grid-community/client-side-row-model": ">=32.3.0",
-    "@ag-grid-community/core": ">=32.3.0",
-    "@ag-grid-community/styles": ">=32.3.0",
-    "@zag-js/dialog": ">=1.31"
+    "svelte-virtuallists": ">=1"
   },
   "engines": {
     "node": ">=22.12.0"

package/dist/components/Arrows.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const Arrows: import("svelte").Component<Record<string, never>, {}, "">;
-type Arrows = ReturnType<typeof Arrows>;
-export default Arrows;