@viamrobotics/motion-tools 1.28.1 → 1.29.1

package/dist/components/App.svelte

@@ -8,6 +8,7 @@
 	import { PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
+	import { primeTheme } from '@viamrobotics/tweakpane-config'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
 	import Controls from './overlay/controls/Controls.svelte'
@@ -18,10 +19,6 @@
 	import XR from './xr/XR.svelte'
 	import { provideWorld } from '../ecs'
 	import { type CameraPose, provideCameraControls } from '../hooks/useControls.svelte'
-	import {
-		type DrawConnectionConfig,
-		provideDrawConnectionConfig,
-	} from '../hooks/useDrawConnectionConfig.svelte'
 	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
 	import { createPartIDContext } from '../hooks/usePartID.svelte'
@@ -51,7 +48,6 @@
 		partID?: string
 		inputBindingsEnabled?: boolean
 		localConfigProps?: LocalConfigProps
-		drawConnectionConfig?: DrawConnectionConfig
 
 		/**
 		 * Snippet for THREE objects
@@ -79,7 +75,6 @@
 		inputBindingsEnabled = true,
 		localConfigProps,
 		cameraPose,
-		drawConnectionConfig,
 		children: appChildren,
 		dashboard,
 		details,
@@ -95,7 +90,7 @@
 
 	provideCameraControls(() => cameraPose)
 	createPartIDContext(() => partID)
-	provideDrawConnectionConfig(() => drawConnectionConfig)
+
 	provideWeblabs()
 	provideToast()
 
@@ -112,11 +107,7 @@
 	})
 
 	$effect(() => {
-		ThemeUtils.setGlobalDefaultTheme({
-			...ThemeUtils.presets.light,
-			baseBackgroundColor: '#fbfbfc',
-			baseShadowColor: 'transparent',
-		})
+		ThemeUtils.setGlobalDefaultTheme(primeTheme)
 	})
 </script>
 

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

@@ -2,7 +2,6 @@ import type { Struct } from '@viamrobotics/sdk';
 import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
 import { type CameraPose } from '../hooks/useControls.svelte';
-import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
 interface LocalConfigProps {
     current: Struct;
     isDirty: boolean;
@@ -13,7 +12,6 @@ interface Props {
     partID?: string;
     inputBindingsEnabled?: boolean;
     localConfigProps?: LocalConfigProps;
-    drawConnectionConfig?: DrawConnectionConfig;
     /**
      * Snippet for THREE objects
      */

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

@@ -20,7 +20,7 @@
 
 	const { invalidate } = useThrelte()
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const events = useEntityEvents(() => entity)

package/dist/components/Entities/Frame.svelte

@@ -39,7 +39,7 @@ Renders a Viam Frame object
 	const entityColor = useTrait(() => entity, traits.Color)
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const center = useTrait(() => entity, traits.Center)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 
 	const events = useEntityEvents(() => entity)
 

package/dist/components/Entities/GLTF.svelte

@@ -35,7 +35,7 @@
 
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const gltfTrait = useTrait(() => entity, traits.GLTF)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 	const events = useEntityEvents(() => entity)
 

package/dist/components/Entities/Geometry.svelte

@@ -33,7 +33,7 @@ Renders a Viam Geometry object
 	const name = useTrait(() => entity, traits.Name)
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const center = useTrait(() => entity, traits.Center)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 
 	const model = $derived.by(() => {
 		if (!settings.current.renderArmModels.includes('model')) {

package/dist/components/Entities/Line.svelte

@@ -34,7 +34,7 @@
 	const renderOrder = useTrait(() => entity, traits.RenderOrder)
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const screenSpace = useTrait(() => entity, traits.ScreenSpace)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const events = useEntityEvents(() => entity)

package/dist/components/Entities/Points.svelte

@@ -28,7 +28,7 @@
 	const colors = useTrait(() => entity, traits.Colors)
 	const entityPointSize = useTrait(() => entity, traits.PointSize)
 	const opacity = useTrait(() => entity, traits.Opacity)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 	const renderOrder = useTrait(() => entity, traits.RenderOrder)
 	const materialProps = useTrait(() => entity, traits.Material)

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

@@ -18,7 +18,7 @@ export const useEntityEvents = (entity) => {
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();
     const cursor = useCursor();
-    const invisible = useTrait(entity, traits.Invisible);
+    const invisible = useTrait(entity, traits.InheritedInvisible);
     const onpointerenter = (event) => {
         if (invisible.current)
             return;

package/dist/components/SceneProviders.svelte

@@ -7,12 +7,11 @@
 	import { provideArmKinematics } from '../hooks/useArmKinematics.svelte'
 	import { provideConfigFrames } from '../hooks/useConfigFrames.svelte'
 	import { provideTransformControls } from '../hooks/useControls.svelte'
-	import { provideDrawAPI } from '../hooks/useDrawAPI.svelte'
-	import { provideDrawService } from '../hooks/useDrawService.svelte'
 	import { provideFrameEditSession } from '../hooks/useFrameEditSession.svelte'
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideFrames } from '../hooks/useFrames.svelte'
 	import { provideGeometries } from '../hooks/useGeometries.svelte'
+	import { provideInheritedInvisible } from '../hooks/useInheritedInvisible.svelte'
 	import { provideLinkedEntities } from '../hooks/useLinked.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { usePartID } from '../hooks/usePartID.svelte'
@@ -38,10 +37,10 @@
 
 	provideHierarchy()
 	provideWorldMatrix()
+	provideInheritedInvisible()
 	provideOrigin()
-	provideDrawAPI()
+
 	provideRelationships()
-	provideDrawService()
 
 	provideResourceByName(() => partID.current)
 	provideConfigFrames()

package/dist/components/SelectedTransformControls.svelte

@@ -4,7 +4,7 @@
 
 	import type { FrameEditSession } from '../editing/FrameEditSession'
 
-	import { traits, useTrait } from '../ecs'
+	import { relations, traits, useTrait } from '../ecs'
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
 	import { useFrameEditSession } from '../hooks/useFrameEditSession.svelte'
@@ -60,6 +60,7 @@
 	const refPose = createPose()
 	const tempRefMatrix = new Matrix4()
 	const tempEditedMatrix = new Matrix4()
+	const tempParentInverse = new Matrix4()
 	const tempPose = createPose()
 
 	let session: FrameEditSession | undefined
@@ -183,30 +184,40 @@
 	}
 
 	/**
-	 * Frame.svelte renders frame entities by blending M(live) × M(config)⁻¹ × M(edited)
-	 * so for the user's drag to render where they pulled the gizmo to,
-	 * EditedMatrix must satisfy M(edited) = M(config) × M(live)⁻¹ × M(ref)
-	 * where M(ref) is the gizmo-driven group's parent-relative matrix in mm.
+	 * Frame.svelte renders frame entities by writing the entity's WorldMatrix
+	 * into group.matrix and decomposing it into position/quaternion. The gizmo's
+	 * Three.js parent has identity world, so `ref.position` / `ref.quaternion`
+	 * are world-space values. Matrix and EditedMatrix store local-to-parent
+	 * transforms, so we left-multiply by the parent's inverted WorldMatrix
+	 * before staging — otherwise WorldMatrix recomposition (parent × edited)
+	 * re-applies the parent's rotation/translation and the frame ends up at
+	 * parent × where-the-user-pulled-it.
 	 *
-	 * When live ≈ config (no kinematic offset), this collapses to
-	 * M(edited) = M(ref) — the same as the naive writeback. When they diverge
-	 * (e.g. an arm whose joints have moved away from its config pose), this
-	 * composition is what keeps the rendering anchored to the user's pointer
-	 * instead of shearing through the live × baseline⁻¹ offset.
+	 * With a kinematic offset (LiveMatrix + Matrix both present), the local
+	 * target M(local) feeds solveEditedMatrix to back out the EditedMatrix
+	 * that satisfies live × baseline⁻¹ × edited = local.
 	 */
-
 	const stageFrameTransform = () => {
 		if (!ref || !entity) return
 
-		vector3ToPose(ref.position, refPose)
-		quaternionToPose(ref.quaternion, refPose)
+		tempRefMatrix.makeRotationFromQuaternion(ref.quaternion)
+		tempRefMatrix.setPosition(ref.position)
+
+		const parentEntity = entity.targetFor(relations.ChildOf)
+		const parentWorld = parentEntity?.get(traits.WorldMatrix)
+		if (parentWorld) {
+			tempParentInverse.copy(parentWorld).invert()
+			tempRefMatrix.premultiply(tempParentInverse)
+		}
+
+		matrixToPose(tempRefMatrix, refPose)
 
 		const live = liveMatrix.current
 		const config = configMatrix.current
 
 		if (!live || !config) {
 			// No live matrix available — Frame.svelte's blend short-circuits to
-			// editedMatrix, so naive writeback is correct.
+			// editedMatrix, so the parent-relative target is what we stage.
 			if (activeMode === 'translate') {
 				session?.stagePose(entity, {
 					x: refPose.x,
@@ -224,8 +235,6 @@
 			return
 		}
 
-		poseToMatrix(refPose, tempRefMatrix)
-
 		solveEditedMatrix(config, live, tempRefMatrix, tempEditedMatrix)
 		matrixToPose(tempEditedMatrix, tempPose)
 		session?.stagePose(entity, { ...tempPose })

package/dist/components/overlay/AddRelationship.svelte

@@ -4,14 +4,12 @@
 
 	import { relations, traits, useQuery, useTrait } from '../../ecs'
 	import { SubEntityLinkType } from '../../ecs/relations'
-	import { useDrawService } from '../../hooks/useDrawService.svelte'
 
 	interface Props {
 		entity: Entity | undefined
 	}
 
 	const { entity }: Props = $props()
-	const drawService = useDrawService()
 
 	const allEntities = useQuery(traits.Name)
 	const name = useTrait(() => entity, traits.Name)
@@ -55,24 +53,12 @@
 		)
 		if (!selectedEntity) return
 
-		if (isServiceManaged) {
-			const sourceUuid = entity.get(traits.UUID)
-			const targetUuid = selectedEntity.get(traits.UUID)
-			if (!sourceUuid || !targetUuid) return
-			void drawService.createRelationship(
-				sourceUuid,
-				targetUuid,
-				linkType ?? '',
-				relationshipFormula
-			)
-		} else {
-			entity.add(
-				relations.SubEntityLink(selectedEntity, {
-					indexMapping: relationshipFormula,
-					type: linkType,
-				})
-			)
-		}
+		entity.add(
+			relations.SubEntityLink(selectedEntity, {
+				indexMapping: relationshipFormula,
+				type: linkType,
+			})
+		)
 		showRelationshipOptions = false
 		resetForm()
 	}

package/dist/components/overlay/Details.svelte

@@ -41,7 +41,6 @@
 	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
 	import { useConfigFrames } from '../../hooks/useConfigFrames.svelte'
 	import { useCameraControls } from '../../hooks/useControls.svelte'
-	import { useDrawService } from '../../hooks/useDrawService.svelte'
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
 	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
@@ -64,7 +63,6 @@
 
 	const world = useWorld()
 	const { invalidate } = useThrelte()
-	const drawService = useDrawService()
 	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
 	const configFrames = useConfigFrames()
@@ -309,7 +307,7 @@
 {#if entity}
 	<div
 		id="details-panel"
-		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs dark:text-white"
+		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs"
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,
@@ -743,15 +741,7 @@
 							<Icon
 								name="trash-can-outline"
 								class="h-6 cursor-pointer px-2 py-1 text-xs text-red-500"
-								onclick={() => {
-									const sourceUuid = entity.get(traits.UUID)
-									const targetUuid = linkedEntity.get(traits.UUID)
-									if (sourceUuid && targetUuid) {
-										void drawService.deleteRelationship(sourceUuid, targetUuid)
-									} else {
-										entity.remove(relations.SubEntityLink(linkedEntity))
-									}
-								}}
+								onclick={() => entity.remove(relations.SubEntityLink(linkedEntity))}
 							/>
 						</div>
 					{/each}

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

@@ -20,6 +20,7 @@
 
 	const name = useTrait(() => node.entity, traits.Name)
 	const invisible = useTrait(() => node.entity, traits.Invisible)
+	const inheritedInvisible = useTrait(() => node.entity, traits.InheritedInvisible)
 	const chunkProgress = useTrait(() => node.entity, traits.ChunkProgress)
 	const loading = $derived(chunkProgress.current !== undefined)
 	const progress = $derived(
@@ -55,7 +56,7 @@
 		class={[
 			'w-full',
 			{
-				'text-disabled': invisible.current,
+				'text-disabled': inheritedInvisible.current,
 				'bg-medium': nodeState.selected,
 				sticky: true,
 			},
@@ -129,7 +130,7 @@
 	<div
 		class={{
 			'flex justify-between': true,
-			'text-disabled': invisible.current,
+			'text-disabled': inheritedInvisible.current,
 			'bg-medium': nodeState.selected,
 		}}
 		{...api.getItemProps(nodeProps)}

package/dist/ecs/traits.d.ts

@@ -65,6 +65,13 @@ export declare const InstancedMatrix: import("koota").Trait<() => {
 }>;
 export declare const Hovered: import("koota").Trait<() => boolean>;
 export declare const Invisible: import("koota").Trait<() => boolean>;
+/**
+ * True when the entity itself, or any of its parents up the `ChildOf`
+ * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;
+ * don't add or remove it by hand — toggle `Invisible` and the cascade
+ * follows.
+ */
+export declare const InheritedInvisible: 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

@@ -61,6 +61,13 @@ export const InstancedMatrix = trait(() => ({
 }));
 export const Hovered = trait(() => true);
 export const Invisible = trait(() => true);
+/**
+ * True when the entity itself, or any of its parents up the `ChildOf`
+ * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;
+ * don't add or remove it by hand — toggle `Invisible` and the cascade
+ * follows.
+ */
+export const InheritedInvisible = 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/useInheritedInvisible.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type World } from 'koota';
+export declare const addInheritedInvisibleListeners: (world: World) => () => void;
+export declare const provideInheritedInvisible: () => void;

package/dist/hooks/useInheritedInvisible.svelte.js

@@ -0,0 +1,89 @@
+import {} from 'koota';
+import { ChildOf } from '../ecs/relations';
+import { InheritedInvisible, Invisible } from '../ecs/traits';
+import { useWorld } from '../ecs/useWorld';
+/**
+ * Walks up `ChildOf` and returns true if the entity itself or any
+ * ancestor has `Invisible`. Memoizes via `cache` so siblings in the
+ * same flush reuse a parent's result.
+ */
+const hasInherited = (entity, cache) => {
+    const cached = cache.get(entity);
+    if (cached !== undefined)
+        return cached;
+    if (!entity.isAlive())
+        return false;
+    if (entity.has(Invisible)) {
+        cache.set(entity, true);
+        return true;
+    }
+    const parent = entity.targetFor(ChildOf);
+    const inherited = parent && parent.isAlive() ? hasInherited(parent, cache) : false;
+    cache.set(entity, inherited);
+    return inherited;
+};
+const flushDirty = (world, dirty) => {
+    if (dirty.size === 0)
+        return;
+    const cache = new Map();
+    const allEntities = new Set();
+    const collectChildren = (entity) => {
+        if (allEntities.has(entity))
+            return;
+        allEntities.add(entity);
+        for (const child of world.query(ChildOf(entity))) {
+            collectChildren(child);
+        }
+    };
+    for (const entity of dirty) {
+        collectChildren(entity);
+    }
+    dirty.clear();
+    for (const entity of allEntities) {
+        if (!entity.isAlive()) {
+            continue;
+        }
+        const hasInheritedTrait = hasInherited(entity, cache);
+        const hasTrait = entity.has(InheritedInvisible);
+        if (hasInheritedTrait && !hasTrait) {
+            entity.add(InheritedInvisible);
+        }
+        else if (!hasInheritedTrait && hasTrait) {
+            entity.remove(InheritedInvisible);
+        }
+    }
+};
+export const addInheritedInvisibleListeners = (world) => {
+    const dirty = new Set();
+    let scheduled = false;
+    const enqueue = (entity) => {
+        dirty.add(entity);
+        if (scheduled)
+            return;
+        scheduled = true;
+        // Microtask-deferred so a burst of changes is grouped into one subtree walk.
+        queueMicrotask(() => {
+            scheduled = false;
+            flushDirty(world, dirty);
+        });
+    };
+    for (const entity of world.query(Invisible)) {
+        enqueue(entity);
+    }
+    const unsubs = [
+        world.onAdd(Invisible, enqueue),
+        world.onRemove(Invisible, enqueue),
+        world.onAdd(ChildOf, enqueue),
+        world.onChange(ChildOf, enqueue),
+        world.onRemove(ChildOf, enqueue),
+    ];
+    return () => {
+        for (const unsub of unsubs) {
+            unsub();
+        }
+    };
+};
+export const provideInheritedInvisible = () => {
+    const world = useWorld();
+    $effect(() => addInheritedInvisibleListeners(world));
+};

package/dist/index.d.ts

@@ -1,12 +1,9 @@
 /** @deprecated MotionTools has been renamed to Visualizer. This export will be removed in v2. */
 export { default as MotionTools } from './components/App.svelte';
 export { default as Visualizer } from './components/App.svelte';
-export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';
 export * as relations from './ecs/relations';
 export * as traits from './ecs/traits';
-export * as selectionTraits from './components/Selection/traits';
-export { useSelectionPlugin as useSelection } from './components/Selection/useSelectionPlugin.svelte';
 export { default as FloatingPanel } from './components/overlay/FloatingPanel.svelte';
 export { provideWorld, useWorld } from './ecs/useWorld';
 export { useQuery } from './ecs/useQuery.svelte';

package/dist/index.js

@@ -2,13 +2,10 @@
 export { default as MotionTools } from './components/App.svelte';
 export { default as Visualizer } from './components/App.svelte';
 // Plugins
-export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';
 // ECS
 export * as relations from './ecs/relations';
 export * as traits from './ecs/traits';
-export * as selectionTraits from './components/Selection/traits';
-export { useSelectionPlugin as useSelection } from './components/Selection/useSelectionPlugin.svelte';
 export { default as FloatingPanel } from './components/overlay/FloatingPanel.svelte';
 export { provideWorld, useWorld } from './ecs/useWorld';
 export { useQuery } from './ecs/useQuery.svelte';

package/dist/plugins/DrawService/DrawService.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { provideDrawAPI } from './useDrawAPI.svelte'
+	import {
+		type DrawConnectionConfig,
+		provideDrawConnectionConfig,
+	} from './useDrawConnectionConfig.svelte'
+	import { provideDrawService } from './useDrawService.svelte'
+
+	interface Props {
+		config: DrawConnectionConfig
+	}
+
+	let { config }: Props = $props()
+
+	provideDrawConnectionConfig(() => config)
+	provideDrawAPI()
+	provideDrawService()
+</script>

package/dist/plugins/DrawService/DrawService.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type DrawConnectionConfig } from './useDrawConnectionConfig.svelte';
+interface Props {
+    config: DrawConnectionConfig;
+}
+declare const DrawService: import("svelte").Component<Props, {}, "">;
+type DrawService = ReturnType<typeof DrawService>;
+export default DrawService;

package/dist/plugins/DrawService/serverRelationships.d.ts

@@ -0,0 +1,14 @@
+import { type Entity } from 'koota';
+import type { Relationship } from '../../metadata';
+/**
+ * Diffs incoming server relationships against the last-known set per entity,
+ * so only links the draw service itself authored are added or removed.
+ * Client-added links (e.g. interactive HoverLinks from the Details overlay)
+ * are left alone.
+ */
+export declare const createServerRelationships: () => {
+    apply(sourceEntity: Entity, sourceUuid: string, relationships: Relationship[] | undefined): void;
+    forget(sourceUuid: string): void;
+    reset(): void;
+    dispose(): void;
+};

package/dist/plugins/DrawService/serverRelationships.js

@@ -0,0 +1,105 @@
+import { trait } from 'koota';
+import { uuidBytesToString } from '../../draw';
+import { relations, traits, useWorld } from '../../ecs';
+/**
+ * Forward-references waiting on their target entity to arrive. Lives on the
+ * source entity so it dies with it — no plugin-side bookkeeping to leak when
+ * a source is destroyed before its targets show up.
+ */
+const PendingLinks = trait(() => []);
+/**
+ * Diffs incoming server relationships against the last-known set per entity,
+ * so only links the draw service itself authored are added or removed.
+ * Client-added links (e.g. interactive HoverLinks from the Details overlay)
+ * are left alone.
+ */
+export const createServerRelationships = () => {
+    const world = useWorld();
+    const cache = new Map();
+    const lookupByUuid = (uuid) => world.query(traits.UUID).find((entity) => entity.get(traits.UUID) === uuid);
+    const enqueue = (sourceEntity, entry) => {
+        const existing = sourceEntity.get(PendingLinks) ?? [];
+        sourceEntity.set(PendingLinks, [...existing, entry]);
+    };
+    const unsubAdd = world.onAdd(traits.UUID, (target) => {
+        if (!target.isAlive())
+            return;
+        const targetUuid = target.get(traits.UUID);
+        if (!targetUuid)
+            return;
+        for (const source of world.query(PendingLinks)) {
+            if (!source.isAlive())
+                continue;
+            const queue = source.get(PendingLinks) ?? [];
+            const remaining = [];
+            let drained = false;
+            for (const entry of queue) {
+                if (entry.targetUuid === targetUuid) {
+                    source.add(relations.SubEntityLink(target, { type: entry.type, indexMapping: entry.indexMapping }));
+                    drained = true;
+                }
+                else {
+                    remaining.push(entry);
+                }
+            }
+            if (!drained)
+                continue;
+            if (remaining.length === 0)
+                source.remove(PendingLinks);
+            else
+                source.set(PendingLinks, remaining);
+        }
+    });
+    return {
+        apply(sourceEntity, sourceUuid, relationships) {
+            const desired = new Map();
+            for (const relationship of relationships ?? []) {
+                const targetUuid = uuidBytesToString(relationship.targetUuid);
+                if (!targetUuid)
+                    continue;
+                desired.set(targetUuid, {
+                    targetUuid,
+                    type: relationship.type,
+                    indexMapping: relationship.indexMapping ?? 'index',
+                });
+            }
+            const previous = cache.get(sourceUuid) ?? new Map();
+            for (const targetUuid of previous.keys()) {
+                if (desired.has(targetUuid))
+                    continue;
+                const target = lookupByUuid(targetUuid);
+                if (target?.isAlive()) {
+                    sourceEntity.remove(relations.SubEntityLink(target));
+                }
+            }
+            for (const [targetUuid, link] of desired) {
+                const before = previous.get(targetUuid);
+                if (before?.type === link.type && before?.indexMapping === link.indexMapping) {
+                    continue;
+                }
+                const target = lookupByUuid(targetUuid);
+                if (!target) {
+                    enqueue(sourceEntity, link);
+                    continue;
+                }
+                sourceEntity.add(relations.SubEntityLink(target, { type: link.type, indexMapping: link.indexMapping }));
+            }
+            if (desired.size === 0) {
+                cache.delete(sourceUuid);
+            }
+            else {
+                cache.set(sourceUuid, desired);
+            }
+        },
+        forget(sourceUuid) {
+            cache.delete(sourceUuid);
+        },
+        reset() {
+            cache.clear();
+        },
+        dispose() {
+            unsubAdd();
+            cache.clear();
+        },
+    };
+};

package/dist/{hooks → plugins/DrawService}/useDrawAPI.svelte.js

@@ -5,16 +5,16 @@ import { Color, Matrix4, Vector3, Vector4 } from 'three';
 import { NURBSCurve } from 'three/addons/curves/NURBSCurve.js';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { UuidTool } from 'uuid-tool';
-import { createBufferGeometry, updateBufferGeometry } from '../attribute';
-import { ColorFormat } from '../buf/draw/v1/metadata_pb';
-import { asRGB, STRIDE } from '../buffer';
-import { hierarchy, traits, useWorld } from '../ecs';
-import { createBox, createCapsule, createSphere } from '../geometry';
-import { parsePlyInput } from '../ply';
-import { createPose, createPoseFromFrame, poseToMatrix } from '../transform';
-import { useCameraControls } from './useControls.svelte';
+import { createBufferGeometry, updateBufferGeometry } from '../../attribute';
+import { ColorFormat } from '../../buf/draw/v1/metadata_pb';
+import { asRGB, STRIDE } from '../../buffer';
+import { hierarchy, traits, useWorld } from '../../ecs';
+import { createBox, createCapsule, createSphere } from '../../geometry';
+import { useCameraControls } from '../../hooks/useControls.svelte';
+import { useLogs } from '../../hooks/useLogs.svelte';
+import { parsePlyInput } from '../../ply';
+import { createPose, createPoseFromFrame, poseToMatrix } from '../../transform';
 import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
-import { useLogs } from './useLogs.svelte';
 const colorUtil = new Color();
 const rgb = { r: 0, g: 0, b: 0 };
 const bufferTypes = {

package/dist/{hooks → plugins/DrawService}/useDrawService.svelte.d.ts

@@ -6,8 +6,6 @@ declare const ConnectionStatus: {
 type ConnectionStatusType = (typeof ConnectionStatus)[keyof typeof ConnectionStatus];
 interface Context {
     connectionStatus: ConnectionStatusType;
-    createRelationship: (sourceUuid: string, targetUuid: string, type: string, indexMapping?: string) => Promise<void>;
-    deleteRelationship: (sourceUuid: string, targetUuid: string) => Promise<void>;
 }
 export declare function provideDrawService(): void;
 export declare function useDrawService(): Context;

package/dist/{hooks → plugins/DrawService}/useDrawService.svelte.js

@@ -5,15 +5,15 @@ import { useThrelte } from '@threlte/core';
 import {} from 'koota';
 import { getContext, setContext } from 'svelte';
 import { UuidTool } from 'uuid-tool';
-import { writeBufferGeometryRange } from '../attribute';
-import { DrawService } from '../buf/draw/v1/service_connect';
-import { CreateRelationshipRequest, DeleteRelationshipRequest, EntityChangeType, StreamEntityChangesResponse, } from '../buf/draw/v1/service_pb';
-import { asFloat32Array, inMeters, STRIDE } from '../buffer';
-import { drawDrawing, drawTransform, updateDrawing, updateModel, updateTransform, uuidStringToBytes, } from '../draw';
-import { hierarchy, traits, useWorld } from '../ecs';
-import { useCameraControls } from './useControls.svelte';
+import { writeBufferGeometryRange } from '../../attribute';
+import { DrawService } from '../../buf/draw/v1/service_connect';
+import { EntityChangeType, StreamEntityChangesResponse } from '../../buf/draw/v1/service_pb';
+import { asFloat32Array, inMeters, STRIDE } from '../../buffer';
+import { drawDrawing, drawTransform, updateDrawing, updateModel, updateTransform, } from '../../draw';
+import { hierarchy, traits, useWorld } from '../../ecs';
+import { useCameraControls } from '../../hooks/useControls.svelte';
+import { createServerRelationships } from './serverRelationships';
 import { useDrawConnectionConfig } from './useDrawConnectionConfig.svelte';
-import { useRelationships } from './useRelationships.svelte';
 const DRAW_SERVICE_KEY = Symbol('draw-service-context');
 const FLOAT32_SIZE = 4;
 const ConnectionStatus = {
@@ -26,7 +26,7 @@ export function provideDrawService() {
     const world = useWorld();
     const cameraControls = useCameraControls();
     const drawConnectionConfig = useDrawConnectionConfig();
-    const relationships = useRelationships();
+    const serverRelationships = createServerRelationships();
     let connectionStatus = $state(ConnectionStatus.DISCONNECTED);
     const url = $derived(drawConnectionConfig.current?.backendIP
         ? `http://${drawConnectionConfig.current.backendIP}:3030`
@@ -67,25 +67,24 @@ export function provideDrawService() {
         if (changeType === EntityChangeType.ADDED) {
             if (!transformEntities.has(uuid)) {
                 const spawned = drawTransform(world, transform, traits.DrawServiceAPI);
-                relationships.apply(spawned.entity, spawned.relationships);
+                serverRelationships.apply(spawned.entity, uuid, spawned.relationships);
                 transformEntities.set(uuid, spawned.entity);
-                relationships.flush(uuid);
             }
         }
         else if (changeType === EntityChangeType.REMOVED) {
+            serverRelationships.forget(uuid);
             destroyTransform(uuid);
         }
         else if (changeType === EntityChangeType.UPDATED) {
             const existing = transformEntities.get(uuid);
             if (existing) {
                 const updated = updateTransform(existing, transform);
-                relationships.apply(updated.entity, updated.relationships);
+                serverRelationships.apply(updated.entity, uuid, updated.relationships);
             }
             else {
                 const spawned = drawTransform(world, transform, traits.DrawServiceAPI);
-                relationships.apply(spawned.entity, spawned.relationships);
+                serverRelationships.apply(spawned.entity, uuid, spawned.relationships);
                 transformEntities.set(uuid, spawned.entity);
-                relationships.flush(uuid);
             }
         }
     };
@@ -155,9 +154,8 @@ export function provideDrawService() {
         if (changeType === EntityChangeType.ADDED) {
             if (!drawingEntities.has(uuid)) {
                 const spawned = drawDrawing(world, drawing, traits.DrawServiceAPI);
-                relationships.apply(spawned.entity, spawned.relationships);
+                serverRelationships.apply(spawned.entity, uuid, spawned.relationships);
                 drawingEntities.set(uuid, spawned.entity);
-                relationships.flush(uuid);
                 if (isChunkedDrawing(drawing) && activeClient && activeSignal) {
                     const chunk = getChunkInfo(drawing);
                     if (chunk) {
@@ -169,6 +167,7 @@ export function provideDrawService() {
             }
         }
         else if (changeType === EntityChangeType.REMOVED) {
+            serverRelationships.forget(uuid);
             destroyDrawing(uuid);
         }
         else if (changeType === EntityChangeType.UPDATED) {
@@ -178,14 +177,13 @@ export function provideDrawService() {
                 const result = isModel
                     ? updateModel(world, existing, drawing, traits.DrawServiceAPI)
                     : updateDrawing(world, existing, drawing);
-                relationships.apply(result.entity, result.relationships);
+                serverRelationships.apply(result.entity, uuid, result.relationships);
                 drawingEntities.set(uuid, result.entity);
             }
             else {
                 const spawned = drawDrawing(world, drawing, traits.DrawServiceAPI);
-                relationships.apply(spawned.entity, spawned.relationships);
+                serverRelationships.apply(spawned.entity, uuid, spawned.relationships);
                 drawingEntities.set(uuid, spawned.entity);
-                relationships.flush(uuid);
             }
         }
     };
@@ -289,29 +287,6 @@ export function provideDrawService() {
             }
         }
     };
-    const createRelationship = async (sourceUuid, targetUuid, type, indexMapping) => {
-        if (!activeClient)
-            return;
-        const rel = {
-            targetUuid: uuidStringToBytes(targetUuid),
-            type,
-        };
-        if (indexMapping !== undefined) {
-            rel.indexMapping = indexMapping;
-        }
-        await activeClient.createRelationship(new CreateRelationshipRequest({
-            sourceUuid: uuidStringToBytes(sourceUuid),
-            relationship: rel,
-        }));
-    };
-    const deleteRelationship = async (sourceUuid, targetUuid) => {
-        if (!activeClient)
-            return;
-        await activeClient.deleteRelationship(new DeleteRelationshipRequest({
-            sourceUuid: uuidStringToBytes(sourceUuid),
-            targetUuid: uuidStringToBytes(targetUuid),
-        }));
-    };
     $effect(() => {
         if (!url) {
             connectionStatus = ConnectionStatus.DISCONNECTED;
@@ -340,15 +315,14 @@ export function provideDrawService() {
                 hierarchy.destroyEntityTree(world, entity);
             }
             drawingEntities.clear();
-            relationships.clear();
+            serverRelationships.reset();
         };
     });
+    $effect(() => () => serverRelationships.dispose());
     setContext(DRAW_SERVICE_KEY, {
         get connectionStatus() {
             return connectionStatus;
         },
-        createRelationship,
-        deleteRelationship,
     });
 }
 export function useDrawService() {

package/dist/{components/Selection/Tool.svelte → plugins/Selection/SelectionTool.svelte}

@@ -6,12 +6,12 @@
 	import { Portal } from '@threlte/extras'
 	import { ElementRect } from 'runed'
 
-	import DashboardButton from '../overlay/dashboard/Button.svelte'
+	import DashboardButton from '../../components/overlay/dashboard/Button.svelte'
+	import Popover from '../../components/overlay/Popover.svelte'
+	import ToggleGroup from '../../components/overlay/ToggleGroup.svelte'
 	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 
-	import Popover from '../overlay/Popover.svelte'
-	import ToggleGroup from '../overlay/ToggleGroup.svelte'
 	import Ellipse from './Ellipse.svelte'
 	import Lasso from './Lasso.svelte'
 	import { provideSelectionPlugin } from './useSelectionPlugin.svelte'

package/dist/{components/Selection/Tool.svelte.d.ts → plugins/Selection/SelectionTool.svelte.d.ts}

@@ -5,6 +5,6 @@ interface Props {
     autoSelectNewEntities?: boolean;
     children?: Snippet;
 }
-declare const Tool: import("svelte").Component<Props, {}, "">;
-type Tool = ReturnType<typeof Tool>;
-export default Tool;
+declare const SelectionTool: import("svelte").Component<Props, {}, "">;
+type SelectionTool = ReturnType<typeof SelectionTool>;
+export default SelectionTool;

package/dist/plugins/index.d.ts

@@ -1 +1,5 @@
+export { default as SelectionTool } from './Selection/SelectionTool.svelte';
+export * as selectionTraits from './Selection/traits';
+export { useSelectionPlugin } from './Selection/useSelectionPlugin.svelte';
+export { default as DrawService } from './DrawService/DrawService.svelte';
 export { default as Skybox } from './Skybox/Skybox.svelte';

package/dist/plugins/index.js

@@ -1,2 +1,8 @@
+// Selection
+export { default as SelectionTool } from './Selection/SelectionTool.svelte';
+export * as selectionTraits from './Selection/traits';
+export { useSelectionPlugin } from './Selection/useSelectionPlugin.svelte';
+// DrawService
+export { default as DrawService } from './DrawService/DrawService.svelte';
 // Skybox
 export { default as Skybox } from './Skybox/Skybox.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.28.1",
+  "version": "1.29.1",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -39,6 +39,7 @@
     "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.69.0",
     "@viamrobotics/svelte-sdk": "1.2.2",
+    "@viamrobotics/tweakpane-config": "0.1.1",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@zag-js/collapsible": "1.22.1",