@viamrobotics/motion-tools 1.27.0 → 1.28.0

package/dist/components/overlay/widgets/FramePov.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { useTask, useThrelte } from '@threlte/core'
+	import { Slider, type SliderChangeEvent } from 'svelte-tweakpane-ui'
+	import { Matrix4, OrthographicCamera, PerspectiveCamera, WebGLRenderer } from 'three'
+
+	import { traits, useQuery } from '../../../ecs'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	import { useOrigin } from '../../xr/useOrigin.svelte'
+	import Button from '../dashboard/Button.svelte'
+	import FloatingPanel from '../FloatingPanel.svelte'
+
+	interface Props {
+		frameName: string
+	}
+
+	const { frameName }: Props = $props()
+
+	const { scene, renderer: mainRenderer, renderStage, invalidate } = useThrelte()
+	const settings = useSettings()
+	const partID = usePartID()
+	const origin = useOrigin()
+
+	// Three.js cameras look down -Z; Viam camera frames conventionally have the
+	// optical axis along +Z with image-down along +Y. A 180° rotation around X
+	// flips both axes so a Three.js render matches "what a sensor at this frame
+	// would see." If empirical testing shows the view is rolled, swap to
+	// makeRotationY for an X-flip instead.
+	const VIAM_TO_THREE_CAMERA = new Matrix4().makeRotationX(Math.PI)
+
+	const PERSPECTIVE_FOV_DEG = 60
+	// Ortho frustum vertical extent at zoom=1, sized to match what the
+	// perspective camera sees at 1 m. zoom > 1 narrows the frustum (zoom in);
+	// zoom < 1 widens it (zoom out).
+	const BASE_ORTHO_HEIGHT = 2 * Math.tan((PERSPECTIVE_FOV_DEG * Math.PI) / 360)
+
+	const namedEntities = useQuery(traits.Name)
+	const entity = $derived(namedEntities.current.find((e) => e.get(traits.Name) === frameName))
+
+	const perspectiveCamera = new PerspectiveCamera(PERSPECTIVE_FOV_DEG, 1, 0.01, 1000)
+	perspectiveCamera.up.set(0, 0, 1)
+
+	const orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0.01, 1000)
+	orthographicCamera.up.set(0, 0, 1)
+
+	let isOpen = $state(true)
+	let cameraMode = $state<'perspective' | 'orthographic'>('perspective')
+	let orthoZoom = $state(1)
+	let canvasEl = $state.raw<HTMLCanvasElement>()
+	let povRenderer = $state.raw<WebGLRenderer | undefined>()
+
+	const orthoHeight = $derived(BASE_ORTHO_HEIGHT / orthoZoom)
+
+	const composed = new Matrix4()
+	const originMat = new Matrix4()
+
+	$effect(() => {
+		if (!canvasEl) return
+		const r = new WebGLRenderer({ canvas: canvasEl, antialias: true, alpha: true })
+		// Match the main renderer so colors/tone/transparency are consistent
+		// with the main view.
+		r.outputColorSpace = mainRenderer.outputColorSpace
+		r.toneMapping = mainRenderer.toneMapping
+		r.toneMappingExposure = mainRenderer.toneMappingExposure
+		r.setPixelRatio(mainRenderer.getPixelRatio())
+		r.setSize(canvasEl.clientWidth, canvasEl.clientHeight, false)
+		povRenderer = r
+		invalidate()
+		return () => {
+			r.dispose()
+			povRenderer = undefined
+		}
+	})
+
+	$effect(() => {
+		if (!canvasEl) return
+		const ro = new ResizeObserver(() => {
+			const r = povRenderer
+			if (!r || !canvasEl) return
+			r.setSize(canvasEl.clientWidth, canvasEl.clientHeight, false)
+			invalidate()
+		})
+		ro.observe(canvasEl)
+		return () => ro.disconnect()
+	})
+
+	$effect(() => {
+		void cameraMode
+		void orthoZoom
+		invalidate()
+	})
+
+	$effect(() => {
+		if (entity === undefined) {
+			isOpen = false
+		}
+	})
+
+	$effect(() => {
+		if (isOpen) return
+		const list = settings.current.openFramePovWidgets[partID.current] ?? []
+		const next = list.filter((n) => n !== frameName)
+		if (next.length === list.length) return
+		settings.current.openFramePovWidgets = {
+			...settings.current.openFramePovWidgets,
+			[partID.current]: next,
+		}
+	})
+
+	useTask(
+		() => {
+			const r = povRenderer
+			if (!r || !canvasEl || !entity) return
+			const worldMat = entity.get(traits.WorldMatrix)
+			if (!worldMat) return
+
+			const width = canvasEl.clientWidth
+			const height = canvasEl.clientHeight
+			if (width <= 0 || height <= 0) return
+
+			const povCamera = cameraMode === 'perspective' ? perspectiveCamera : orthographicCamera
+
+			// Compose origin × worldMatrix × VIAM_TO_THREE_CAMERA. The frame
+			// entities' WorldMatrix lives in ECS world space; the rendered scene
+			// is wrapped in a T.Group that applies `origin` on top, so the POV
+			// camera needs the same origin transform to share coordinate space
+			// with the meshes it's rendering.
+			originMat
+				.makeRotationZ(origin.rotation)
+				.setPosition(origin.position[0], origin.position[1], origin.position[2])
+			composed.copy(originMat).multiply(worldMat).multiply(VIAM_TO_THREE_CAMERA)
+			composed.decompose(povCamera.position, povCamera.quaternion, povCamera.scale)
+
+			const aspect = width / height
+			if (povCamera === perspectiveCamera) {
+				perspectiveCamera.aspect = aspect
+			} else {
+				const halfH = orthoHeight / 2
+				const halfW = halfH * aspect
+				orthographicCamera.left = -halfW
+				orthographicCamera.right = halfW
+				orthographicCamera.top = halfH
+				orthographicCamera.bottom = -halfH
+			}
+			povCamera.updateProjectionMatrix()
+			povCamera.updateMatrixWorld(true)
+
+			r.render(scene, povCamera)
+		},
+		{ stage: renderStage, autoInvalidate: false }
+	)
+
+	const handleZoomChange = (event: SliderChangeEvent) => {
+		if (event.detail.origin !== 'internal') return
+		orthoZoom = event.detail.value as number
+	}
+</script>
+
+<FloatingPanel
+	title={`POV: ${frameName}`}
+	bind:isOpen
+	defaultSize={{ width: 320, height: 240 }}
+	resizable
+	onPositionChange={invalidate}
+	onSizeChange={invalidate}
+>
+	<canvas
+		bind:this={canvasEl}
+		class="absolute inset-0 block h-full w-full"
+	></canvas>
+
+	<fieldset class="absolute top-1 right-1 z-1 flex">
+		<Button
+			icon="grid-orthographic"
+			active={cameraMode === 'orthographic'}
+			description="Orthographic view"
+			onclick={() => (cameraMode = 'orthographic')}
+		/>
+		<Button
+			icon="grid-perspective"
+			active={cameraMode === 'perspective'}
+			description="Perspective view"
+			class="-ml-px"
+			onclick={() => (cameraMode = 'perspective')}
+		/>
+	</fieldset>
+
+	{#if cameraMode === 'orthographic'}
+		<div class="absolute right-1 bottom-1 left-1 z-1 rounded bg-white/85 p-1">
+			<Slider
+				label="zoom"
+				value={orthoZoom}
+				min={0.25}
+				max={5}
+				step={0.05}
+				format={(v) => `${v.toFixed(2)}×`}
+				on:change={handleZoomChange}
+			/>
+		</div>
+	{/if}
+</FloatingPanel>

package/dist/components/overlay/widgets/FramePov.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    frameName: string;
+}
+declare const FramePov: import("svelte").Component<Props, {}, "">;
+type FramePov = ReturnType<typeof FramePov>;
+export default FramePov;

package/dist/ecs/hierarchy.d.ts

@@ -38,5 +38,21 @@ export declare const destroyEntityTree: (world: World, entity: Entity) => void;
  * the world. Called by `provideHierarchy` when the orphan/named query sets
  * change or when a `Name` is renamed; also exposed for tests so they can
  * drive resolution without mounting a component.
+ *
+ * The first loop builds a `name → entity` map. The second loop reads each
+ * orphan's wanted parent name from that map and attaches `ChildOf` to the
+ * entity it found.
+ *
+ * Two checks prevent an entity from being parented to itself (a `ChildOf`
+ * cycle would loop `recomputeWorldMatrix` forever):
+ *
+ *   1. When two entities have the same `Name`, the map keeps whichever
+ *      one does NOT have `Orphan`. An entity that still has `Orphan` is
+ *      one we're still trying to resolve — it could be the same entity
+ *      the second loop looks up. Letting it fill the slot would make the
+ *      lookup return the orphan itself.
+ *   2. In the second loop, if the lookup returns the orphan itself, skip
+ *      it. This catches the case where the orphan is the only entity in
+ *      the world with that `Name`.
  */
 export declare const resolveOrphans: (named: QueryResult<[Trait<() => string>]>, orphans: QueryResult<[Trait<() => string>]>) => void;

package/dist/ecs/hierarchy.js

@@ -1,6 +1,6 @@
 import {} from 'koota';
 import { ChildOf } from './relations';
-import { Name, Orphan } from './traits';
+import * as traits from './traits';
 /**
  * Trait list for `world.spawn(...)`. Always emits `Orphan(name)` for non-root
  * parents; the hierarchy resolver (`provideHierarchy`) swaps it to
@@ -10,7 +10,7 @@ import { Name, Orphan } from './traits';
 export const parentTraits = (name) => {
     if (!name || name === 'world')
         return [];
-    return [Orphan(name)];
+    return [traits.Orphan(name)];
 };
 /**
  * Set or clear an entity's parent. Strips any existing `ChildOf` or `Orphan`,
@@ -26,15 +26,15 @@ export const parentTraits = (name) => {
 export const setParent = (entity, name) => {
     const desired = !name || name === 'world' ? undefined : name;
     const target = entity.targetFor(ChildOf);
-    const current = (target?.isAlive() ? target.get(Name) : undefined) ?? entity.get(Orphan);
+    const current = (target?.isAlive() ? target.get(traits.Name) : undefined) ?? entity.get(traits.Orphan);
     if (current === desired)
         return;
     if (target)
         entity.remove(ChildOf(target));
-    entity.remove(Orphan);
+    entity.remove(traits.Orphan);
     if (desired === undefined)
         return;
-    entity.add(Orphan(desired));
+    entity.add(traits.Orphan(desired));
 };
 /** The parent entity, or `undefined` at the world root or while orphaned. */
 export const getParentEntity = (entity) => entity.targetFor(ChildOf);
@@ -45,9 +45,10 @@ export const getParentEntity = (entity) => entity.targetFor(ChildOf);
  */
 export const getParentName = (entity) => {
     const parent = entity.targetFor(ChildOf);
-    if (parent && parent.isAlive())
-        return parent.get(Name);
-    const orphanFor = entity.get(Orphan);
+    if (parent && parent.isAlive()) {
+        return parent.get(traits.Name);
+    }
+    const orphanFor = entity.get(traits.Orphan);
     return orphanFor || undefined;
 };
 /**
@@ -69,22 +70,43 @@ export const destroyEntityTree = (world, entity) => {
  * the world. Called by `provideHierarchy` when the orphan/named query sets
  * change or when a `Name` is renamed; also exposed for tests so they can
  * drive resolution without mounting a component.
+ *
+ * The first loop builds a `name → entity` map. The second loop reads each
+ * orphan's wanted parent name from that map and attaches `ChildOf` to the
+ * entity it found.
+ *
+ * Two checks prevent an entity from being parented to itself (a `ChildOf`
+ * cycle would loop `recomputeWorldMatrix` forever):
+ *
+ *   1. When two entities have the same `Name`, the map keeps whichever
+ *      one does NOT have `Orphan`. An entity that still has `Orphan` is
+ *      one we're still trying to resolve — it could be the same entity
+ *      the second loop looks up. Letting it fill the slot would make the
+ *      lookup return the orphan itself.
+ *   2. In the second loop, if the lookup returns the orphan itself, skip
+ *      it. This catches the case where the orphan is the only entity in
+ *      the world with that `Name`.
  */
 export const resolveOrphans = (named, orphans) => {
     const index = new Map();
     for (const entity of named) {
-        const name = entity.get(Name);
-        if (name)
-            index.set(name, entity);
+        const name = entity.get(traits.Name);
+        if (!name)
+            continue;
+        const existing = index.get(name);
+        if (existing && !existing.has(traits.Orphan)) {
+            continue;
+        }
+        index.set(name, entity);
     }
     for (const orphan of orphans) {
-        const wantedName = orphan.get(Orphan);
+        const wantedName = orphan.get(traits.Orphan);
         if (!wantedName)
             continue;
         const parent = index.get(wantedName);
-        if (!parent)
+        if (!parent || parent === orphan)
             continue;
-        orphan.remove(Orphan);
+        orphan.remove(traits.Orphan);
         orphan.add(ChildOf(parent));
     }
 };

package/dist/ecs/traits.js

@@ -230,7 +230,9 @@ export const updateGeometryTrait = (entity, geometry) => {
     }
     else if (geometry.geometryType.case === 'mesh') {
         if (entity.has(BufferGeometry)) {
+            const old = entity.get(BufferGeometry);
             entity.set(BufferGeometry, parsePlyInput(geometry.geometryType.value.mesh));
+            old?.dispose();
         }
         else {
             entity.remove(Box, Sphere, Capsule);

package/dist/ecs/worldMatrix.js

@@ -2,7 +2,7 @@ import {} from 'koota';
 import { Matrix4 } from 'three';
 import { composeLocalMatrix } from '../transform';
 import { ChildOf } from './relations';
-import { EditedMatrix, LiveMatrix, Matrix, WorldMatrix } from './traits';
+import { EditedMatrix, LiveMatrix, Matrix, Name, WorldMatrix } from './traits';
 /**
  * Compute the entity's local-to-parent transform into `out`. Mirrors the
  * blend used by `Frame.svelte` so `WorldMatrix` agrees with the displayed
@@ -36,14 +36,25 @@ const toLocalMatrix = (entity, out) => {
  * Synchronously compute and write `WorldMatrix` for every entity in `dirty`
  * and every descendant via `ChildOf`. Memoizes per-entity world matrices in
  * `cache` so siblings reuse a parent's result. Caller passes a fresh `cache`
- * map per flush.
+ * map and `inProgress` set per flush.
+ *
+ * `inProgress` is the cycle guard: if the parent walk revisits an entity
+ * whose computation hasn't finished, we treat that branch as if it had no
+ * parent rather than recursing forever. `resolveOrphans` already prevents
+ * the only known way to introduce a `ChildOf` cycle; this is here so a
+ * future bug downgrades to a soft visual glitch instead of a hard crash.
  */
-const recomputeWorldMatrix = (world, entity, cache) => {
+const recomputeWorldMatrix = (world, entity, cache, inProgress) => {
     if (!entity.isAlive())
         return undefined;
     const cached = cache.get(entity);
     if (cached)
         return cached;
+    if (inProgress.has(entity)) {
+        console.warn('[worldMatrix] ChildOf cycle detected at entity', entity.get(Name) ?? entity);
+        return undefined;
+    }
+    inProgress.add(entity);
     // Reuse the entity's existing `WorldMatrix` storage when present so a
     // flush doesn't allocate a throwaway matrix per entity. First-time
     // entities get a fresh `Matrix4` that's added as the trait below.
@@ -53,10 +64,11 @@ const recomputeWorldMatrix = (world, entity, cache) => {
         out.identity();
     const parent = entity.targetFor(ChildOf);
     if (parent && parent.isAlive()) {
-        const parentWorld = recomputeWorldMatrix(world, parent, cache);
+        const parentWorld = recomputeWorldMatrix(world, parent, cache, inProgress);
         if (parentWorld)
             out.premultiply(parentWorld);
     }
+    inProgress.delete(entity);
     cache.set(entity, out);
     return out;
 };
@@ -64,6 +76,7 @@ const flushDirty = (world, dirty) => {
     if (dirty.size === 0)
         return;
     const cache = new Map();
+    const inProgress = new Set();
     const expanded = new Set();
     const collect = (entity) => {
         if (expanded.has(entity))
@@ -79,7 +92,7 @@ const flushDirty = (world, dirty) => {
     for (const entity of expanded) {
         if (!entity.isAlive())
             continue;
-        const worldMat = recomputeWorldMatrix(world, entity, cache);
+        const worldMat = recomputeWorldMatrix(world, entity, cache, inProgress);
         if (!worldMat)
             continue;
         if (entity.has(WorldMatrix)) {

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

@@ -1,12 +1,13 @@
 import type { CameraControlsRef } from '@threlte/extras';
 import type { Vector3Tuple } from 'three';
+import type { TrackballControls } from 'three/examples/jsm/Addons.js';
 export interface CameraPose {
     position: Vector3Tuple;
     lookAt: Vector3Tuple;
 }
 interface CameraControlsContext {
-    current: CameraControlsRef | undefined;
-    set(current: CameraControlsRef): void;
+    current: CameraControlsRef | TrackballControls | undefined;
+    set(current: CameraControlsRef | TrackballControls): void;
     setPose(pose: CameraPose, animate?: boolean): void;
     setInitialPose(): void;
     setZoom(zoom: number): void;

package/dist/hooks/useControls.svelte.js

@@ -6,15 +6,23 @@ export const provideCameraControls = (initialCameraPose) => {
     const setPose = (pose, animate = false) => {
         const [x, y, z] = pose.position;
         const [lookAtX, lookAtY, lookAtZ] = pose.lookAt;
-        controls?.setPosition(x, y, z, animate);
-        controls?.setLookAt(x, y, z, lookAtX, lookAtY, lookAtZ, animate);
+        if (controls && 'setPosition' in controls) {
+            controls.setPosition(x, y, z, animate);
+            controls.setLookAt(x, y, z, lookAtX, lookAtY, lookAtZ, animate);
+        }
     };
     const setZoom = (zoom) => {
-        controls?.zoomTo(zoom);
+        if (controls && 'zoomTo' in controls)
+            controls?.zoomTo(zoom);
     };
     const setInitialPose = () => {
-        const pose = initialCameraPose();
-        setPose(pose ?? { position: [3, 3, 3], lookAt: [0, 0, 0] }, true);
+        if (controls && 'setPosition' in controls) {
+            const pose = initialCameraPose();
+            setPose(pose ?? { position: [3, 3, 3], lookAt: [0, 0, 0] }, true);
+        }
+        else if (controls) {
+            controls.reset();
+        }
     };
     $effect(() => {
         const pose = initialCameraPose();

package/dist/hooks/useGeometries.svelte.js

@@ -2,18 +2,19 @@ import { ArmClient, BaseClient, CameraClient, GantryClient, GenericComponentClie
 import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import {} from 'koota';
 import { getContext, setContext, untrack } from 'svelte';
-import { Color } from 'three';
+import { Color, Matrix4 } from 'three';
 import { resourceColors } from '../color';
 import { RefetchRates } from '../components/overlay/RefreshRate.svelte';
 import { hierarchy, traits, useWorld } from '../ecs';
 import { updateGeometryTrait } from '../ecs/traits';
-import { createPose, isPoseEqual } from '../transform';
+import { createPose, poseToMatrix } from '../transform';
 import { useEnvironment } from './useEnvironment.svelte';
 import { useLogs } from './useLogs.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
 import { RefreshRates, useSettings } from './useSettings.svelte';
 const key = Symbol('geometries-context');
 const colorUtil = new Color();
+const tempMatrix = new Matrix4();
 export const provideGeometries = (partID) => {
     const environment = useEnvironment();
     const resources = useResourceByName();
@@ -97,8 +98,11 @@ export const provideGeometries = (partID) => {
                         const existing = entities.get(entityKey);
                         if (existing) {
                             hierarchy.setParent(existing, name);
-                            if (!isPoseEqual(existing.get(traits.Center), center)) {
-                                existing.set(traits.Center, center);
+                            poseToMatrix(center, tempMatrix);
+                            const matrix = existing.get(traits.Matrix);
+                            if (matrix && !matrix.equals(tempMatrix)) {
+                                matrix.copy(tempMatrix);
+                                existing.changed(traits.Matrix);
                             }
                             updateGeometryTrait(existing, geometry);
                             continue;
@@ -106,7 +110,7 @@ export const provideGeometries = (partID) => {
                         const entityTraits = [
                             ...hierarchy.parentTraits(name),
                             traits.Name(label),
-                            traits.Center(center),
+                            traits.Matrix(poseToMatrix(center, new Matrix4())),
                             traits.GeometriesAPI,
                             traits.Geometry(geometry),
                         ];

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

@@ -26,6 +26,7 @@ export interface Settings {
     enableQueryDevtools: boolean;
     enableArmPositionsWidget: boolean;
     openCameraWidgets: Record<string, string[]>;
+    openFramePovWidgets: Record<string, string[]>;
     renderStats: boolean;
     renderArmModels: 'colliders' | 'colliders+model' | 'model';
     renderSubEntityHoverDetail: boolean;

package/dist/hooks/useSettings.svelte.js

@@ -33,6 +33,7 @@ const defaults = () => ({
     enableQueryDevtools: false,
     enableArmPositionsWidget: false,
     openCameraWidgets: {},
+    openFramePovWidgets: {},
     renderStats: false,
     renderArmModels: 'colliders+model',
     renderSubEntityHoverDetail: false,

package/dist/plugins/Skybox/Skybox.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { useThrelte } from '@threlte/core'
+	import { EquirectangularReflectionMapping, type Texture, TextureLoader } from 'three'
+
+	interface Props {
+		url: string
+		/**
+		 * Euler rotation `[x, y, z]` in radians applied to `scene.backgroundRotation`.
+		 * Default `[Math.PI / 2, 0, 0]` aligns a Y-up equirectangular image to this scene's
+		 * Z-up convention; the Z component then acts as yaw around world +Z.
+		 */
+		rotation?: [x: number, y: number, z: number]
+	}
+
+	const { url, rotation = [Math.PI / 2, 0, 0] }: Props = $props()
+	const { scene, invalidate } = useThrelte()
+
+	$effect.pre(() => {
+		const previous = scene.background
+		let texture: Texture | undefined
+		let cancelled = false
+
+		new TextureLoader().load(url, (loaded) => {
+			if (cancelled) {
+				loaded.dispose()
+				return
+			}
+			loaded.mapping = EquirectangularReflectionMapping
+			texture = loaded
+			scene.background = loaded
+			invalidate()
+		})
+
+		return () => {
+			cancelled = true
+			if (texture && scene.background === texture) {
+				scene.background = previous
+				invalidate()
+			}
+			texture?.dispose()
+		}
+	})
+
+	$effect.pre(() => {
+		const previous = scene.backgroundRotation.clone()
+		scene.backgroundRotation.set(...rotation)
+		invalidate()
+
+		return () => {
+			scene.backgroundRotation.copy(previous)
+			invalidate()
+		}
+	})
+</script>

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

@@ -0,0 +1,12 @@
+interface Props {
+    url: string;
+    /**
+     * Euler rotation `[x, y, z]` in radians applied to `scene.backgroundRotation`.
+     * Default `[Math.PI / 2, 0, 0]` aligns a Y-up equirectangular image to this scene's
+     * Z-up convention; the Z component then acts as yaw around world +Z.
+     */
+    rotation?: [x: number, y: number, z: number];
+}
+declare const Skybox: import("svelte").Component<Props, {}, "">;
+type Skybox = ReturnType<typeof Skybox>;
+export default Skybox;

package/dist/plugins/index.d.ts

@@ -0,0 +1 @@
+export { default as Skybox } from './Skybox/Skybox.svelte';

package/dist/plugins/index.js

@@ -0,0 +1,2 @@
+// Skybox
+export { default as Skybox } from './Skybox/Skybox.svelte';

package/dist/three/OBBHelper.js

@@ -39,9 +39,12 @@ const expandBoxByTransformedBox = (box, childBox, matrix) => {
 };
 export class OBBHelper extends LineSegments2 {
     constructor(color = 0x000000, linewidth = 2) {
-        const edges = new EdgesGeometry(new BoxGeometry());
+        const boxGeometry = new BoxGeometry();
+        const edges = new EdgesGeometry(boxGeometry);
         const geometry = new LineSegmentsGeometry();
         geometry.setPositions(edges.getAttribute('position').array);
+        edges.dispose();
+        boxGeometry.dispose();
         const material = new LineMaterial({
             color,
             linewidth,

package/dist/three/arrow.js

@@ -20,6 +20,8 @@ export const createArrowGeometry = () => {
     // Place its center at y = shaftLength + headLength/2 so tip lands at y = shaftLength + headLength
     headGeo.translate(0, tailLength + headLength * 0.5, 0);
     const merged = mergeGeometries([tailGeometry, headGeo], true);
+    tailGeometry.dispose();
+    headGeo.dispose();
     merged.computeVertexNormals();
     merged.computeBoundingBox();
     merged.computeBoundingSphere();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -64,7 +64,7 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "publint": "0.3.12",
     "runed": "0.31.1",
-    "svelte": "5.55.0",
+    "svelte": "5.55.7",
     "svelte-check": "4.4.5",
     "svelte-tweakpane-ui": "^1.5.16",
     "svelte-virtuallists": "1.4.2",
@@ -122,6 +122,10 @@
     "./lib": {
       "types": "./dist/lib.d.ts",
       "svelte": "./dist/lib.js"
+    },
+    "./plugins": {
+      "types": "./dist/plugins/index.d.ts",
+      "svelte": "./dist/plugins/index.js"
     }
   },
   "repository": {