@viamrobotics/motion-tools 1.31.0 → 1.33.0

package/dist/plugins/Focus/provideFocus.svelte.js

@@ -0,0 +1,61 @@
+import { trait } from 'koota';
+import { untrack } from 'svelte';
+import { relations, traits, useQuery, useWorld } from '../../ecs';
+const HiddenByFocus = trait();
+export const provideFocus = (focusing) => {
+    const world = useWorld();
+    const selected = useQuery(traits.Selected);
+    $effect(() => {
+        if (!focusing()) {
+            for (const entity of world.query(HiddenByFocus)) {
+                entity.remove(HiddenByFocus, traits.Invisible);
+            }
+            return;
+        }
+        /**
+         * Snapshot the selection at the moment focus is entered. Reading it
+         * untracked makes `focusing()` this effect's only dependency, so the
+         * focused view stays frozen: selecting or deselecting entities while
+         * focused must not change what's hidden. Everything is restored when
+         * focus exits.
+         */
+        const selectedEntities = untrack(() => selected.current);
+        /**
+         * Entities only render when their `InheritedInvisible` is unset, and that
+         * trait is computed by walking `ChildOf` ancestors (see
+         * `useInheritedInvisible`). So hiding a selected entity's parent — or its
+         * renderable sub-entities, which are `ChildOf` children that never carry
+         * `Selected` — makes the selection itself disappear. Keep the whole
+         * connected subtree of each selection visible: its ancestors (so the
+         * cascade can't reach it) and its descendants (so its geometry shows).
+         */
+        const keep = new Set();
+        const keepSubtree = (entity) => {
+            if (keep.has(entity))
+                return;
+            keep.add(entity);
+            for (const child of world.query(relations.ChildOf(entity))) {
+                keepSubtree(child);
+            }
+        };
+        for (const entity of selectedEntities) {
+            let ancestor = entity.targetFor(relations.ChildOf);
+            while (ancestor?.isAlive()) {
+                keep.add(ancestor);
+                ancestor = ancestor.targetFor(relations.ChildOf);
+            }
+            keepSubtree(entity);
+        }
+        /**
+         * Hide the rest. Skip already-invisible entities so we don't take
+         * ownership of — and later wrongly reveal — user-hidden entities.
+         */
+        for (const entity of world.query(traits.Name)) {
+            if (keep.has(entity))
+                continue;
+            if (!entity.has(traits.Invisible)) {
+                entity.add(HiddenByFocus, traits.Invisible);
+            }
+        }
+    });
+};

package/dist/{components → plugins}/MeasureTool/MeasureTool.svelte

@@ -4,16 +4,14 @@
 	import { untrack } from 'svelte'
 	import { type Intersection, Vector3 } from 'three'
 
-	import Button from '../overlay/dashboard/Button.svelte'
+	import Button from '../../components/overlay/dashboard/Button.svelte'
+	import Popover from '../../components/overlay/Popover.svelte'
+	import ToggleGroup from '../../components/overlay/ToggleGroup.svelte'
 	import { useMouseRaycaster } from '../../hooks/useMouseRaycaster.svelte'
-	import { useFocusedEntity } from '../../hooks/useSelection.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 
-	import Popover from '../overlay/Popover.svelte'
-	import ToggleGroup from '../overlay/ToggleGroup.svelte'
 	import MeasurePoint from './MeasurePoint.svelte'
 
-	const focusedEntity = useFocusedEntity()
 	const settings = useSettings()
 
 	const htmlPosition = new Vector3()
@@ -73,9 +71,9 @@
 	}
 
 	$effect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-		;(focusedEntity.current, enabled)
-		untrack(() => clear())
+		if (!enabled) {
+			untrack(() => clear())
+		}
 	})
 </script>
 

package/dist/plugins/Selection/SelectionTool.svelte

@@ -9,7 +9,7 @@
 	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 { traits, useWorld } from '../../ecs'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 
 	import Ellipse from './Ellipse.svelte'
@@ -29,11 +29,12 @@
 	let { enabled = false, autoSelectNewEntities = false, children }: Props = $props()
 
 	const { dom } = useThrelte()
+	const world = useWorld()
 	const settings = useSettings()
 	const isSelectionMode = $derived(settings.current.interactionMode === 'select')
 
 	const selectionPlugin = provideSelectionPlugin()
-	const selectedEntity = useSelectedEntity()
+
 	let selectionType = $state<SelectionType>('lasso')
 
 	$effect(() => {
@@ -58,7 +59,13 @@
 
 		const newest = newEntities.at(-1)
 		if (newest === undefined) return
-		selectedEntity.set(newest)
+
+		const selected = world.query(traits.Selected)
+		for (const entity of selected) {
+			entity.remove(traits.Selected)
+		}
+
+		newest.add(traits.Selected)
 	})
 
 	const rect = new ElementRect(() => dom)

package/dist/{components/xr → plugins/XR}/ArmTeleop.svelte

@@ -6,14 +6,12 @@
 	import { createResourceClient } from '@viamrobotics/svelte-sdk'
 	import { Quaternion, Vector3 } from 'three'
 
-	import {
-		calculatePositionTarget,
-		getFrameTransformationQuaternion,
-	} from './math'
-	import { xrToast } from './toasts.svelte'
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { OrientationVector } from '../../three/OrientationVector'
 
+	import { calculatePositionTarget, getFrameTransformationQuaternion } from './math'
+	import { xrToast } from './toasts.svelte'
+
 	interface Props {
 		armName: string
 		gripperName?: string

package/dist/plugins/XR/DebugPanel.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Text } from 'threlte-uikit'
+	import { Panel } from 'threlte-uikit/horizon'
+
+	import { xrDebug } from './debug.svelte'
+	import WristDisplay from './WristDisplay.svelte'
+
+	const messages = $derived(xrDebug.messages)
+</script>
+
+<WristDisplay position={[0, 0.005, 0.2]}>
+	<Panel
+		flexDirection="column"
+		padding={12}
+		gap={4}
+		backgroundColor="#0a0a0a"
+		borderRadius={8}
+		minWidth={400}
+		minHeight={40}
+	>
+		{#each messages as message, i (i)}
+			<Text
+				text={message}
+				fontSize={14}
+				color="#ffffff"
+			/>
+		{/each}
+	</Panel>
+</WristDisplay>

package/dist/plugins/XR/DebugPanel.svelte.d.ts

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

package/dist/plugins/XR/OriginMarker.svelte

@@ -0,0 +1,341 @@
+<script lang="ts">
+	import { useTask, useThrelte } from '@threlte/core'
+	import { useGamepad } from '@threlte/extras'
+	import { Hand, useController, useHand, useHeadset, useXR } from '@threlte/xr'
+	import { useDebounce } from 'runed'
+	import { Euler, Quaternion, Vector3 } from 'three'
+
+	import { usePartID } from '../../hooks/usePartID.svelte'
+
+	import { useAnchors } from './useAnchors.svelte'
+	import { useOrigin } from './useOrigin.svelte'
+
+	const origin = useOrigin()
+	const anchors = useAnchors()
+	const partID = usePartID()
+	const headset = useHeadset()
+
+	const storageKey = $derived(`xr-origin-anchor:${partID.current}`)
+
+	const DEFAULT_ORIGIN: [number, number, number] = [-1, -1, 0]
+	const COMMIT_DEBOUNCE_MS = 500
+
+	const leftPad = useGamepad({ xr: true, hand: 'left' })
+	const rightPad = useGamepad({ xr: true, hand: 'right' })
+	const leftController = useController('left')
+	const rightController = useController('right')
+
+	const THUMBSTICK_SPEED = 0.05
+
+	// Head-relative translation basis. Recomputed per thumbstick tick so
+	// stick-forward always moves content away from the viewer, regardless of
+	// how the scene was rotated or which way the user is physically facing.
+	const headForward = new Vector3()
+	const headRight = new Vector3()
+
+	// The anchor that currently represents the persisted origin. Kept so we can
+	// delete it when a new calibration is committed.
+	let persistedAnchor: XRAnchor | undefined
+
+	// The restored anchor we're waiting to localize on session start. Once the
+	// device reports it as tracked we snap origin to its pose and clear this.
+	let pendingRestore = $state.raw<XRAnchor | undefined>(undefined)
+
+	const restoreQuat = new Quaternion()
+	const restoreEuler = new Euler(0, 0, 0, 'ZYX')
+
+	const commitVec = new Vector3()
+	const commitQuat = new Quaternion()
+
+	const commit = useDebounce(async () => {
+		// origin.position/rotation define the composed XR reference space's
+		// offset from zUp, so an anchor at identity in the current (composed)
+		// space IS the anchor at origin's pose in zUp. commitVec/commitQuat
+		// are left at their default-constructed zero/identity values.
+		const anchor = await anchors.createAnchor(commitVec, commitQuat)
+		if (!anchor) return
+
+		const uuid = await anchors.persist(anchor)
+		if (!uuid) {
+			anchor.delete()
+			return
+		}
+
+		const prev = localStorage.getItem(storageKey)
+		if (prev && prev !== uuid) {
+			anchors.remove(prev).catch(() => {})
+		}
+
+		if (persistedAnchor && persistedAnchor !== anchor) {
+			persistedAnchor.delete()
+		}
+
+		persistedAnchor = anchor
+		localStorage.setItem(storageKey, uuid)
+	}, COMMIT_DEBOUNCE_MS)
+
+	origin.registerCommit(() => commit())
+
+	leftPad.thumbstick.on('change', ({ value }) => {
+		// While the grip is held, the left controller drives fine rotation;
+		// ignore the thumbstick so the two inputs don't fight each other.
+		if (leftPad.squeeze.pressed || typeof value === 'number') return
+
+		const { x: vx, y: vy } = value
+		const [x, y, z] = origin.position
+
+		origin.set([x, y, z + vy * THUMBSTICK_SPEED], origin.rotation + vx * THUMBSTICK_SPEED)
+		commit()
+	})
+
+	rightPad.thumbstick.on('change', ({ value }) => {
+		if (rightPad.squeeze.pressed || typeof value === 'number') return
+
+		const { x: vx, y: vy } = value
+		const [x, y, z] = origin.position
+
+		headset.getWorldDirection(headForward)
+
+		// Flatten onto the XY (ground) plane so pitch doesn't bleed into horizontal motion.
+		headForward.z = 0
+		if (headForward.lengthSq() < 1e-6) {
+			// Viewer gaze was purely vertical (or pose not yet reported) — fall back to scene +Y.
+			headForward.set(0, 1, 0)
+		} else {
+			headForward.normalize()
+		}
+		// headForward is in the composed XR reference space; rotate into zUp
+		// so the stick direction maps to the user's physical gaze regardless
+		// of the current origin rotation.
+		origin.toZUpDir(headForward)
+		headRight.set(headForward.y, -headForward.x, 0)
+
+		const deltaX = headRight.x * vx * THUMBSTICK_SPEED + headForward.x * vy * THUMBSTICK_SPEED
+		const deltaY = headRight.y * vx * THUMBSTICK_SPEED + headForward.y * vy * THUMBSTICK_SPEED
+
+		origin.set([x + deltaX, y + deltaY, z], origin.rotation)
+		commit()
+	})
+
+	// Fine calibration: hold the grip, then move/rotate the controller to nudge
+	// the origin 1:1 with the controller delta. Extract world-Z yaw from the
+	// controller quaternion for rotation so pitch/roll don't leak in.
+	const quatYaw = (q: Quaternion) =>
+		Math.atan2(2 * (q.w * q.z + q.x * q.y), 1 - 2 * (q.y * q.y + q.z * q.z))
+
+	const fineTranslateStart = new Vector3()
+	const fineTranslateOriginStart = new Vector3()
+	const fineTranslateCurrent = new Vector3()
+	let fineTranslating = $state(false)
+
+	rightPad.squeeze.on('change', () => {
+		const ray = rightController.current?.targetRay
+		if (rightPad.squeeze.pressed && ray) {
+			// Save start position in zUp so the delta stays stable as the
+			// composed reference space recomposes each tick on origin changes.
+			origin.toZUpPos(fineTranslateStart, ray.position)
+			const [ox, oy, oz] = origin.position
+			fineTranslateOriginStart.set(ox, oy, oz)
+			fineTranslating = true
+		} else {
+			fineTranslating = false
+		}
+	})
+
+	useTask(
+		() => {
+			const ray = rightController.current?.targetRay
+			if (!ray) return
+			origin.toZUpPos(fineTranslateCurrent, ray.position)
+			origin.set(
+				[
+					fineTranslateOriginStart.x + fineTranslateCurrent.x - fineTranslateStart.x,
+					fineTranslateOriginStart.y + fineTranslateCurrent.y - fineTranslateStart.y,
+					fineTranslateOriginStart.z + fineTranslateCurrent.z - fineTranslateStart.z,
+				],
+				origin.rotation
+			)
+			commit()
+		},
+		{ running: () => fineTranslating }
+	)
+
+	let fineRotateStartYaw = 0
+	let fineRotateOriginStart = 0
+	let fineRotating = $state(false)
+
+	leftPad.squeeze.on('change', () => {
+		const ray = leftController.current?.targetRay
+		if (leftPad.squeeze.pressed && ray) {
+			// Controller yaw in composed = yaw_zUp − origin.rotation; convert
+			// to zUp so the delta stays stable while origin.rotation updates.
+			fineRotateStartYaw = quatYaw(ray.quaternion) + origin.rotation
+			fineRotateOriginStart = origin.rotation
+			fineRotating = true
+		} else {
+			fineRotating = false
+		}
+	})
+
+	useTask(
+		() => {
+			const ray = leftController.current?.targetRay
+			if (!ray) return
+			const yawZup = quatYaw(ray.quaternion) + origin.rotation
+			origin.set(origin.position, fineRotateOriginStart + yawZup - fineRotateStartYaw)
+			commit()
+		},
+		{ running: () => fineRotating }
+	)
+
+	let startLeftPinchTranslation = new Vector3()
+	let leftPinchTranslation = new Vector3()
+	let startRightPinchTranslation = new Vector3()
+	let rightPinchCurrent = new Vector3()
+	let startRightPinchRotation = 0
+
+	const leftHand = useHand('left')
+	const rightHand = useHand('right')
+
+	let translating = $state(false)
+	let rotating = $state(false)
+
+	const { renderer } = useThrelte()
+	const { isPresenting } = useXR()
+
+	// Session start: try to restore a persisted anchor for this part. If none
+	// exists or restore fails, fall back to a default offset so the origin is
+	// visible in front of the user.
+	$effect(() => {
+		if (!$isPresenting) {
+			pendingRestore = undefined
+			persistedAnchor = undefined
+			return
+		}
+
+		const uuid = localStorage.getItem(storageKey)
+		if (!uuid) {
+			origin.set(DEFAULT_ORIGIN, 0)
+			return
+		}
+
+		let cancelled = false
+		anchors
+			.restore(uuid)
+			.then((anchor) => {
+				if (cancelled) return
+				if (anchor) {
+					persistedAnchor = anchor
+					pendingRestore = anchor
+				} else {
+					localStorage.removeItem(storageKey)
+					origin.set(DEFAULT_ORIGIN, 0)
+				}
+			})
+			.catch(() => {
+				if (cancelled) return
+				localStorage.removeItem(storageKey)
+				origin.set(DEFAULT_ORIGIN, 0)
+			})
+
+		return () => {
+			cancelled = true
+		}
+	})
+
+	// Once the restored anchor has localized, snap origin to its pose. This
+	// runs only while a restore is pending so it won't fight user input.
+	useTask(
+		() => {
+			const anchor = pendingRestore
+			if (!anchor) return
+
+			const pose = anchors.getAnchorPose(anchor)
+			if (!pose) return
+
+			const { position: p, orientation: o } = pose.transform
+			restoreQuat.set(o.x, o.y, o.z, o.w)
+			restoreEuler.setFromQuaternion(restoreQuat, 'ZYX')
+			origin.set([p.x, p.y, p.z], restoreEuler.z)
+			pendingRestore = undefined
+		},
+		{
+			running: () => pendingRestore !== undefined,
+		}
+	)
+
+	$effect(() => {
+		if (!$isPresenting) {
+			return
+		}
+		renderer.xr.getHand(0).addEventListener('pinchstart', () => {
+			const p = leftHand.current?.targetRay.position
+			if (p) {
+				translating = true
+				// Pinch start position in zUp; delta is cumulative from here.
+				origin.toZUpPos(startLeftPinchTranslation, p)
+			}
+		})
+	})
+
+	useTask(
+		() => {
+			const p = leftHand.current?.targetRay.position
+			if (p && translating) {
+				origin.toZUpPos(leftPinchTranslation, p)
+				origin.set(
+					[
+						leftPinchTranslation.x - startLeftPinchTranslation.x,
+						leftPinchTranslation.y - startLeftPinchTranslation.y,
+						leftPinchTranslation.z - startLeftPinchTranslation.z,
+					],
+					origin.rotation
+				)
+				commit()
+			}
+		},
+		{
+			running: () => translating,
+		}
+	)
+
+	useTask(
+		() => {
+			const p = rightHand.current?.targetRay.position
+			if (p && rotating) {
+				origin.toZUpPos(rightPinchCurrent, p)
+				const deltaX = rightPinchCurrent.x - startRightPinchTranslation.x
+				origin.set(origin.position, startRightPinchRotation + deltaX)
+				commit()
+			}
+		},
+		{
+			running: () => rotating,
+		}
+	)
+</script>
+
+<Hand
+	left
+	onpinchstart={() => {
+		const p = leftHand.current?.targetRay.position
+		if (p) {
+			translating = true
+			origin.toZUpPos(startLeftPinchTranslation, p)
+		}
+	}}
+	onpinchend={() => (translating = false)}
+/>
+
+<Hand
+	right
+	onpinchstart={() => {
+		const p = rightHand.current?.targetRay.position
+		if (p) {
+			rotating = true
+			origin.toZUpPos(startRightPinchTranslation, p)
+			startRightPinchRotation = origin.rotation
+		}
+	}}
+	onpinchend={() => (rotating = false)}
+/>

package/dist/plugins/XR/PendingEditsPanel.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { Text } from 'threlte-uikit'
+	import { Button, ButtonLabel, Panel } from 'threlte-uikit/horizon'
+
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+
+	import WristDisplay from './WristDisplay.svelte'
+
+	const partConfig = usePartConfig()
+</script>
+
+{#if partConfig.isDirty}
+	<WristDisplay position={[0, 0.005, 0.1]}>
+		<Panel
+			flexDirection="column"
+			padding={16}
+			gap={12}
+			backgroundColor="#111"
+			borderRadius={16}
+			minWidth={420}
+		>
+			<Text
+				text="Pending frame edits"
+				fontSize={18}
+				color="#ffffff"
+			/>
+			<Panel
+				flexDirection="row"
+				gap={8}
+			>
+				<Button
+					variant="tertiary"
+					size="sm"
+					onclick={() => partConfig.discardChanges()}
+				>
+					<ButtonLabel>
+						<Text
+							text="Discard"
+							fontSize={14}
+							color="#ffffff"
+						/>
+					</ButtonLabel>
+				</Button>
+				<Button
+					variant="primary"
+					size="sm"
+					onclick={() => partConfig.save()}
+				>
+					<ButtonLabel>
+						<Text
+							text="Save"
+							fontSize={14}
+							color="#ffffff"
+						/>
+					</ButtonLabel>
+				</Button>
+			</Panel>
+		</Panel>
+	</WristDisplay>
+{/if}

package/dist/plugins/XR/PendingEditsPanel.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PendingEditsPanel: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PendingEditsPanel = InstanceType<typeof PendingEditsPanel>;
+export default PendingEditsPanel;

package/dist/plugins/XR/WristDisplay.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { T } from '@threlte/core'
+	import { useController, useHandJoint } from '@threlte/xr'
+	import { fromStore } from 'svelte/store'
+	import { Group, type Vector3Tuple } from 'three'
+	import { provideDefaultProperties } from 'threlte-uikit'
+
+	interface Props {
+		/** Offset from the wrist in the wrist-local frame, meters. */
+		position?: Vector3Tuple
+		/**
+		 * Rotation in the wrist-local frame. The default orients uikit content
+		 * (panels face their own +Z) onto the dorsal side of the wrist, so the
+		 * user sees it when turning their palm down, like a smartwatch.
+		 */
+		rotation?: Vector3Tuple
+		/** Uniform scale for the wrist group. Smaller than the HUD default
+		 *  because panels live at arm's length instead of ~1 m away. */
+		scale?: number
+		children?: Snippet
+	}
+
+	const {
+		position = [0, 0.005, 0.08],
+		rotation = [-Math.PI / 2, 0, 0],
+		scale = 0.03,
+		children,
+	}: Props = $props()
+
+	// Draw uikit content on top of the scene (real-world depth, selection OBB,
+	// etc.), matching the old HUD behavior.
+	provideDefaultProperties(() => ({
+		depthTest: false,
+		renderOrder: 999,
+	}))
+
+	const leftController = fromStore(useController('left'))
+	const leftWrist = fromStore(useHandJoint('left', 'wrist'))
+
+	// Prefer the hand wrist joint when hand tracking is active; fall back to
+	// the controller grip. Both are three.js Groups updated per frame by
+	// WebXR, so attaching as a child follows the wrist automatically.
+	const parent = $derived(leftWrist.current ?? leftController.current?.grip)
+
+	const group = new Group()
+</script>
+
+{#if parent}
+	<T
+		is={group}
+		attach={parent}
+		{position}
+		{rotation}
+		{scale}
+	>
+		{@render children?.()}
+	</T>
+{/if}

package/dist/plugins/XR/WristDisplay.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import { type Vector3Tuple } from 'three';
+interface Props {
+    /** Offset from the wrist in the wrist-local frame, meters. */
+    position?: Vector3Tuple;
+    /**
+     * Rotation in the wrist-local frame. The default orients uikit content
+     * (panels face their own +Z) onto the dorsal side of the wrist, so the
+     * user sees it when turning their palm down, like a smartwatch.
+     */
+    rotation?: Vector3Tuple;
+    /** Uniform scale for the wrist group. Smaller than the HUD default
+     *  because panels live at arm's length instead of ~1 m away. */
+    scale?: number;
+    children?: Snippet;
+}
+declare const WristDisplay: import("svelte").Component<Props, {}, "">;
+type WristDisplay = ReturnType<typeof WristDisplay>;
+export default WristDisplay;