@viamrobotics/motion-tools 1.31.0 → 1.33.0

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

@@ -8,24 +8,29 @@
 	import { useSettings } from '../../hooks/useSettings.svelte'
 
 	import CameraFeed from './CameraFeed.svelte'
+	import DebugPanel from './DebugPanel.svelte'
 	import FrameConfigureControllers from './frame-configure/Controllers.svelte'
 	import JointLimitsWidget from './JointLimitsWidget.svelte'
 	import OriginMarker from './OriginMarker.svelte'
+	import PendingEditsPanel from './PendingEditsPanel.svelte'
 	import TeleopControllers from './teleop/Controllers.svelte'
 	import { provideAnchors } from './useAnchors.svelte'
-	import { useOrigin } from './useOrigin.svelte'
+	import { provideOrigin } from './useOrigin.svelte'
+	import XRPlugins from './XRPlugins.svelte'
 	import XRToast from './XRToast.svelte'
 
 	const { ...rest } = $props()
 
-	const { isPresenting } = useXR()
-	const settings = useSettings()
-	const origin = useOrigin()
+	const origin = provideOrigin()
 	provideAnchors()
-	const enableXR = $derived(settings.current.enableXR)
 
+	const { renderer } = useThrelte()
+	const { isPresenting } = useXR()
+	const settings = useSettings()
 	const partID = usePartID()
 
+	const enableXR = $derived(settings.current.enableXR)
+
 	// Get all enabled camera widgets for the current part
 	const enabledCameras = $derived.by(() => {
 		const openWidgets = settings.current.openCameraWidgets
@@ -48,34 +53,57 @@
 	const leftArmName = $derived(controllerConfig.left.armName)
 	const rightArmName = $derived(controllerConfig.right.armName)
 
-	const { renderer } = useThrelte()
+	// Compose the XR reference space from:
+	//   1) a -π/2 rotation around X to switch from WebXR's Y-up to Viam's Z-up
+	//   2) the scene origin (position + yaw) so the origin's pose lives at the
+	//      composed space's identity. With this, controllers, camera, and scene
+	//      content all share one frame — no separate origin group needed.
+	let baseRefSpace: XRReferenceSpace | undefined
 
-	// Move into Viam's coordinate system. This basically accomplishes
-	// the same thing as setting z up in the Camera component.
 	$effect(() => {
-		if ($isPresenting) {
-			const q = new Quaternion().setFromAxisAngle({ x: 1, y: 0, z: 0 }, -Math.PI / 2)
-
-			// after the XR session has started and a reference space exists:
-			const baseRefSpace = renderer.xr.getReferenceSpace()
-			if (baseRefSpace) {
-				const rotatedRefSpace = baseRefSpace.getOffsetReferenceSpace(
-					new XRRigidTransform({ x: 0, y: 0, z: 0, w: 1 }, { x: q.x, y: q.y, z: q.z, w: q.w })
-				)
+		if (!$isPresenting) {
+			baseRefSpace = undefined
+			return
+		}
 
-				renderer.xr.setReferenceSpace(rotatedRefSpace)
-			}
+		if (!baseRefSpace) {
+			const current = renderer.xr.getReferenceSpace()
+			if (!current) return
+			baseRefSpace = current
 		}
+
+		const [ox, oy, oz] = origin.position
+		const oRot = origin.rotation
+
+		const zUpQ = new Quaternion().setFromAxisAngle({ x: 1, y: 0, z: 0 }, -Math.PI / 2)
+		const originQ = new Quaternion().setFromAxisAngle({ x: 0, y: 0, z: 1 }, oRot)
+
+		const composed = baseRefSpace
+			.getOffsetReferenceSpace(
+				new XRRigidTransform(
+					{ x: 0, y: 0, z: 0, w: 1 },
+					{ x: zUpQ.x, y: zUpQ.y, z: zUpQ.z, w: zUpQ.w }
+				)
+			)
+			.getOffsetReferenceSpace(
+				new XRRigidTransform(
+					{ x: ox, y: oy, z: oz },
+					{ x: originQ.x, y: originQ.y, z: originQ.z, w: originQ.w }
+				)
+			)
+
+		renderer.xr.setReferenceSpace(composed)
 	})
 </script>
 
+{#if $isPresenting}
+	<XRPlugins />
+{/if}
+
 {#if enableXR}
 	<XR
-		onsessionstart={() => {
-			origin.set([-1, -1, 0])
-		}}
 		onsessionend={() => {
-			origin.set([0, 0, 0])
+			origin.set([0, 0, 0], 0)
 		}}
 	>
 		<!-- Render camera feeds only when presenting to avoid conflicting with overlay Camera widgets -->
@@ -115,6 +143,8 @@
 		<!-- <XRConfigPanel offset={{ x: 0, y: 2.5, z: -2.5 }} scale={0.7} /> -->
 
 		<XRToast />
+		<DebugPanel />
+		<PendingEditsPanel />
 
 		{#if settings.current.xrMode === 'arm-teleop'}
 			<TeleopControllers />
@@ -127,6 +157,22 @@
 
 	<XRButton
 		mode="immersive-ar"
+		sessionInit={{
+			optionalFeatures: [
+				'local-floor',
+				'bounded-floor',
+				'anchors',
+				// Required for cross-session persistence — enables
+				// `anchor.requestPersistentHandle()` and
+				// `session.restorePersistentAnchor()` on Quest Browser.
+				'persistent-anchors',
+				'plane-detection',
+				'hand-tracking',
+				'layers',
+				'hit-test',
+			],
+		}}
+		style="color: #555; border-color: #ccc; backdrop-filter: blur(4px); background: rgba(255,255,255,0.5)"
 		{...rest}
 	/>
 {/if}

package/dist/plugins/XR/XRPlugins.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { pointerControls, touchControls } from '@threlte/xr'
+
+	pointerControls('left')
+	pointerControls('right')
+
+	touchControls('left')
+	touchControls('right')
+</script>

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

@@ -0,0 +1,26 @@
+export default XRPlugins;
+type XRPlugins = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const XRPlugins: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/plugins/XR/XRSettings.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { Select, Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { useArmClient } from '../../hooks/useArmClient.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useSettings } from '../../hooks/useSettings.svelte'
+
+	const settings = useSettings()
+	const armClient = useArmClient()
+	const partID = usePartID()
+	const resources = useResourceNames(() => partID.current, 'gripper')
+
+	const armNames = $derived(armClient.names || [])
+	const gripperNames = $derived(
+		resources.current
+			.filter((r) => r.subtype === 'gripper' && r.type === 'component')
+			.map((r) => r.name)
+	)
+
+	const config = $derived(settings.current.xrController)
+
+	// Filter available arms/grippers - exclude what the other controller has selected
+	const leftAvailableArms = $derived(
+		armNames.filter((name) => name === config.left.armName || name !== config.right.armName)
+	)
+	const rightAvailableArms = $derived(
+		armNames.filter((name) => name === config.right.armName || name !== config.left.armName)
+	)
+
+	const leftAvailableGrippers = $derived(
+		gripperNames.filter(
+			(name) => name === config.left.gripperName || name !== config.right.gripperName
+		)
+	)
+	const rightAvailableGrippers = $derived(
+		gripperNames.filter(
+			(name) => name === config.right.gripperName || name !== config.left.gripperName
+		)
+	)
+
+	function updateConfig(
+		hand: 'left' | 'right',
+		key: string,
+		value: string | number | boolean | undefined
+	) {
+		settings.current.xrController[hand] = {
+			...settings.current.xrController[hand],
+			[key]: value,
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-2.5 text-xs">
+	<div class="flex flex-col gap-2.5">
+		<label class="flex items-center justify-between gap-2">
+			Enable VR / AR mode <Switch bind:on={settings.current.enableXR} />
+		</label>
+
+		<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Left Controller</strong></h3>
+
+		<label class="flex items-center justify-between gap-2">
+			Arm
+			<Select
+				value={config.left.armName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('left', 'armName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each leftAvailableArms as armName (armName)}
+					<option value={armName}>{armName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Gripper
+			<Select
+				value={config.left.gripperName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('left', 'gripperName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each leftAvailableGrippers as gripperName (gripperName)}
+					<option value={gripperName}>{gripperName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Scale: {config.left.scaleFactor.toFixed(1)}
+			<input
+				class="w-20"
+				type="range"
+				min="0.1"
+				max="3.0"
+				step="0.1"
+				value={config.left.scaleFactor}
+				style="--value: {((config.left.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
+				oninput={(e) =>
+					updateConfig('left', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
+			/>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Rotation
+			<Switch
+				on={config.left.rotationEnabled}
+				on:change={(event) => {
+					updateConfig('left', 'rotationEnabled', event.detail)
+				}}
+			/>
+		</label>
+
+		<!-- Right Controller -->
+		<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Right Controller</strong></h3>
+
+		<label class="flex items-center justify-between gap-2">
+			Arm
+			<Select
+				value={config.right.armName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('right', 'armName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each rightAvailableArms as armName (armName)}
+					<option value={armName}>{armName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Gripper
+			<Select
+				value={config.right.gripperName || ''}
+				onchange={(event: Event) => {
+					if (event.target instanceof HTMLSelectElement) {
+						updateConfig('right', 'gripperName', event.target.value || undefined)
+					}
+				}}
+			>
+				<option value="">None</option>
+				{#each rightAvailableGrippers as gripperName (gripperName)}
+					<option value={gripperName}>{gripperName}</option>
+				{/each}
+			</Select>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Scale: {config.right.scaleFactor.toFixed(1)}
+			<input
+				class="w-20"
+				type="range"
+				min="0.1"
+				max="3.0"
+				step="0.1"
+				value={config.right.scaleFactor}
+				style="--value: {((config.right.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
+				oninput={(e) =>
+					updateConfig('right', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
+			/>
+		</label>
+
+		<label class="flex items-center justify-between gap-2">
+			Rotation
+			<Switch
+				on={config.right.rotationEnabled}
+				on:change={(event) => {
+					updateConfig('right', 'rotationEnabled', event.detail)
+				}}
+			/>
+		</label>
+	</div>
+</div>
+
+<style>
+	input[type='range'] {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		background: linear-gradient(
+			to right,
+			#3d7d3f 0%,
+			#3d7d3f var(--value),
+			#d1d5db var(--value),
+			#d1d5db 100%
+		);
+		border-radius: 0.25rem;
+		height: 0.5rem;
+		cursor: pointer;
+		outline: none;
+	}
+
+	/* Webkit browsers (Chrome, Safari, Edge) */
+	input[type='range']::-webkit-slider-track {
+		background: transparent;
+		height: 0.5rem;
+		border-radius: 0.25rem;
+	}
+
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		background: #3d7d3f;
+		height: 1.25rem;
+		width: 1.25rem;
+		border-radius: 50%;
+		border: 2px solid white;
+	}
+
+	/* Firefox */
+	input[type='range']::-moz-range-track {
+		background: transparent;
+		height: 0.5rem;
+		border-radius: 0.25rem;
+	}
+
+	input[type='range']::-moz-range-thumb {
+		background: #3d7d3f;
+		height: 1.25rem;
+		width: 1.25rem;
+		border-radius: 50%;
+		border: 2px solid white;
+	}
+
+	input[type='range']::-moz-range-progress {
+		background: #3d7d3f;
+		height: 0.5rem;
+		border-radius: 0.25rem;
+	}
+</style>

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

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

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { Headset } from '@threlte/xr'
 	import { untrack } from 'svelte'
 	import { CanvasTexture, PlaneGeometry } from 'three'
 
 	import { type ToastVariant, xrToast, type XRToastItem } from './toasts.svelte'
+	import WristDisplay from './WristDisplay.svelte'
 
 	const CANVAS_WIDTH = 700
 	const TOAST_HEIGHT = 80
@@ -204,12 +204,9 @@
 	})
 </script>
 
-<Headset>
-	{#if hasToasts && geometry}
-		<T.Mesh
-			position={[0, -0.3, -1.5]}
-			renderOrder={999}
-		>
+{#if hasToasts && geometry}
+	<WristDisplay position={[0, 0.005, 0.02]}>
+		<T.Mesh renderOrder={999}>
 			<T is={geometry} />
 			<T.MeshBasicMaterial
 				map={texture}
@@ -217,5 +214,5 @@
 				depthTest={false}
 			/>
 		</T.Mesh>
-	{/if}
-</Headset>
+	</WristDisplay>
+{/if}

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

@@ -0,0 +1,7 @@
+declare class DebugStore {
+    messages: string[];
+    add(message: string): void;
+    clear(): void;
+}
+export declare const xrDebug: DebugStore;
+export {};

package/dist/plugins/XR/debug.svelte.js

@@ -0,0 +1,13 @@
+class DebugStore {
+    messages = $state(['debug panel ready']);
+    add(message) {
+        this.messages.push(message);
+        if (this.messages.length > 8) {
+            this.messages = this.messages.slice(-8);
+        }
+    }
+    clear() {
+        this.messages = [];
+    }
+}
+export const xrDebug = new DebugStore();