@viamrobotics/motion-tools 1.10.0 → 1.11.0

package/dist/components/xr/XRControllerSettings.svelte

@@ -0,0 +1,240 @@
+<script lang="ts">
+	import { Select, Switch } from '@viamrobotics/prime-core'
+	import { useArmClient } from '../../hooks/useArmClient.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+	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>
+
+{#snippet SectionTitle(title: string)}
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>{title}</strong></h3>
+{/snippet}
+
+<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>
+
+	<!-- Left Controller -->
+	{@render SectionTitle('Left Controller')}
+
+	<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 - 0.1)) * 100}%"
+			oninput={(e) => updateConfig('left', 'scaleFactor', 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 -->
+	{@render SectionTitle('Right Controller')}
+
+	<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 - 0.1)) * 100}%"
+			oninput={(e) => updateConfig('right', 'scaleFactor', 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>
+
+<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/components/xr/XRControllerSettings.svelte.d.ts

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

package/dist/components/xr/XRToast.svelte

@@ -0,0 +1,215 @@
+<script lang="ts">
+	import { untrack } from 'svelte'
+	import { T } from '@threlte/core'
+	import { CanvasTexture, PlaneGeometry } from 'three'
+	import { xrToast, type XRToastItem, type ToastVariant } from './toasts.svelte'
+	import { Headset } from '@threlte/xr'
+
+	const CANVAS_WIDTH = 700
+	const TOAST_HEIGHT = 80
+	const TOAST_GAP = 10
+	const MAX_VISIBLE = 5
+	const PLANE_WIDTH = 0.7
+
+	// Offscreen canvas (created once)
+	const canvas = document.createElement('canvas')
+	canvas.width = CANVAS_WIDTH
+	canvas.height = 1
+	const texture = new CanvasTexture(canvas)
+
+	let geometry: PlaneGeometry | undefined = $state()
+
+	const visibleToasts = $derived(xrToast.toasts.slice(-MAX_VISIBLE))
+	const hasToasts = $derived(visibleToasts.length > 0)
+
+	// Variant styling matching Prime design tokens
+	const VARIANT_STYLES: Record<ToastVariant, { accent: string; bg: string }> = {
+		success: { accent: '#22C55E', bg: 'rgba(13, 40, 24, 0.94)' },
+		danger: { accent: '#EF4444', bg: 'rgba(45, 15, 15, 0.94)' },
+		warning: { accent: '#F59E0B', bg: 'rgba(45, 34, 16, 0.94)' },
+		info: { accent: '#3B82F6', bg: 'rgba(15, 26, 45, 0.94)' },
+	}
+
+	function drawRoundRect(
+		ctx: CanvasRenderingContext2D,
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		r: number
+	) {
+		ctx.beginPath()
+		ctx.moveTo(x + r, y)
+		ctx.lineTo(x + w - r, y)
+		ctx.quadraticCurveTo(x + w, y, x + w, y + r)
+		ctx.lineTo(x + w, y + h - r)
+		ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
+		ctx.lineTo(x + r, y + h)
+		ctx.quadraticCurveTo(x, y + h, x, y + h - r)
+		ctx.lineTo(x, y + r)
+		ctx.quadraticCurveTo(x, y, x + r, y)
+		ctx.closePath()
+	}
+
+	function drawIcon(
+		ctx: CanvasRenderingContext2D,
+		variant: ToastVariant,
+		cx: number,
+		cy: number,
+		size: number
+	) {
+		const color = VARIANT_STYLES[variant].accent
+		ctx.strokeStyle = color
+		ctx.fillStyle = color
+		ctx.lineWidth = 3.5
+		ctx.lineCap = 'round'
+		ctx.lineJoin = 'round'
+
+		if (variant === 'success') {
+			// Checkmark
+			ctx.beginPath()
+			ctx.moveTo(cx - size * 0.35, cy + size * 0.05)
+			ctx.lineTo(cx - size * 0.08, cy + size * 0.3)
+			ctx.lineTo(cx + size * 0.4, cy - size * 0.25)
+			ctx.stroke()
+		} else if (variant === 'danger') {
+			// X mark
+			const s = size * 0.28
+			ctx.beginPath()
+			ctx.moveTo(cx - s, cy - s)
+			ctx.lineTo(cx + s, cy + s)
+			ctx.moveTo(cx + s, cy - s)
+			ctx.lineTo(cx - s, cy + s)
+			ctx.stroke()
+		} else if (variant === 'warning') {
+			// Triangle outline with !
+			ctx.lineWidth = 3
+			ctx.beginPath()
+			ctx.moveTo(cx, cy - size * 0.32)
+			ctx.lineTo(cx + size * 0.34, cy + size * 0.26)
+			ctx.lineTo(cx - size * 0.34, cy + size * 0.26)
+			ctx.closePath()
+			ctx.stroke()
+			// Exclamation mark
+			ctx.lineWidth = 3
+			ctx.beginPath()
+			ctx.moveTo(cx, cy - size * 0.12)
+			ctx.lineTo(cx, cy + size * 0.06)
+			ctx.stroke()
+			ctx.beginPath()
+			ctx.arc(cx, cy + size * 0.16, 2, 0, Math.PI * 2)
+			ctx.fill()
+		} else {
+			// Info: circle with i
+			ctx.lineWidth = 3
+			ctx.beginPath()
+			ctx.arc(cx, cy, size * 0.32, 0, Math.PI * 2)
+			ctx.stroke()
+			// i dot
+			ctx.beginPath()
+			ctx.arc(cx, cy - size * 0.15, 2.5, 0, Math.PI * 2)
+			ctx.fill()
+			// i stem
+			ctx.lineWidth = 3
+			ctx.beginPath()
+			ctx.moveTo(cx, cy - size * 0.04)
+			ctx.lineTo(cx, cy + size * 0.2)
+			ctx.stroke()
+		}
+	}
+
+	function renderToasts(toasts: XRToastItem[]) {
+		const ctx = canvas.getContext('2d')!
+		ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+		if (toasts.length === 0) {
+			texture.needsUpdate = true
+			return
+		}
+
+		const radius = 12
+		const accentBarWidth = 8
+		const iconCenterX = accentBarWidth + 30
+		const textStartX = accentBarWidth + 56
+
+		toasts.forEach((toast, index) => {
+			const y = index * (TOAST_HEIGHT + TOAST_GAP)
+			const style = VARIANT_STYLES[toast.variant]
+
+			// Draw background with clip (so accent bar respects rounded corners)
+			ctx.save()
+			drawRoundRect(ctx, 0, y, CANVAS_WIDTH, TOAST_HEIGHT, radius)
+			ctx.clip()
+
+			// Fill background
+			ctx.fillStyle = style.bg
+			ctx.fillRect(0, y, CANVAS_WIDTH, TOAST_HEIGHT)
+
+			// Accent bar on left
+			ctx.fillStyle = style.accent
+			ctx.fillRect(0, y, accentBarWidth, TOAST_HEIGHT)
+
+			ctx.restore()
+
+			// Subtle border
+			ctx.strokeStyle = style.accent + '50' // 31% opacity
+			ctx.lineWidth = 2
+			drawRoundRect(ctx, 1, y + 1, CANVAS_WIDTH - 2, TOAST_HEIGHT - 2, radius)
+			ctx.stroke()
+
+			// Icon
+			drawIcon(ctx, toast.variant, iconCenterX, y + TOAST_HEIGHT / 2, 28)
+
+			// Message text
+			ctx.fillStyle = '#ffffff'
+			ctx.font = '28px sans-serif'
+			ctx.textBaseline = 'middle'
+			ctx.fillText(toast.message, textStartX, y + TOAST_HEIGHT / 2)
+		})
+
+		texture.needsUpdate = true
+	}
+
+	// Combined effect: resize canvas, update geometry, render
+	$effect(() => {
+		const toasts = visibleToasts
+
+		if (toasts.length === 0) {
+			renderToasts([])
+			return
+		}
+
+		const h = toasts.length * (TOAST_HEIGHT + TOAST_GAP) - TOAST_GAP
+		canvas.height = h
+
+		untrack(() => geometry?.dispose())
+		const aspect = CANVAS_WIDTH / h
+		geometry = new PlaneGeometry(PLANE_WIDTH, PLANE_WIDTH / aspect)
+
+		renderToasts(toasts)
+	})
+
+	// Cleanup
+	$effect(() => {
+		return () => {
+			texture.dispose()
+			untrack(() => geometry?.dispose())
+		}
+	})
+</script>
+
+<Headset>
+	{#if hasToasts && geometry}
+		<T.Mesh
+			position={[0, -0.3, -1.5]}
+			renderOrder={999}
+		>
+			<T is={geometry} />
+			<T.MeshBasicMaterial
+				map={texture}
+				transparent
+				depthTest={false}
+			/>
+		</T.Mesh>
+	{/if}
+</Headset>

package/dist/components/xr/XRToast.svelte.d.ts

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

package/dist/components/xr/math.d.ts

@@ -0,0 +1,14 @@
+import { Quaternion, Vector3 } from 'three';
+export declare function getFrameTransformationQuaternion(): Quaternion;
+/**
+ * Calculates the delta position in Robot Frame
+ */
+export declare function calculatePositionTarget(currentControllerPos: Vector3, referenceControllerPos: Vector3, robotReferencePos: {
+    x: number;
+    y: number;
+    z: number;
+}, qTransform: Quaternion, scaleFactor: number): {
+    x: number;
+    y: number;
+    z: number;
+};

package/dist/components/xr/math.js

@@ -0,0 +1,26 @@
+import { Quaternion, Vector3 } from 'three';
+export function getFrameTransformationQuaternion() {
+    // MATCHING DART IMPLEMENTATION EXACTLY:
+    // 1: Rotate -90° around Z-axis
+    const rotZ = new Quaternion().setFromAxisAngle(new Vector3(0, 0, 1), -Math.PI / 2);
+    // 2: Rotate 90° around X-axis
+    const rotX = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), Math.PI / 2);
+    // Combine: Apply rotX first, then rotZ
+    return rotZ.multiply(rotX);
+}
+/**
+ * Calculates the delta position in Robot Frame
+ */
+export function calculatePositionTarget(currentControllerPos, referenceControllerPos, robotReferencePos, qTransform, scaleFactor) {
+    // 1. Get delta in XR space (Meters)
+    const deltaXR = currentControllerPos.clone().sub(referenceControllerPos);
+    // 2. Convert to Robot Frame
+    const deltaRobot = deltaXR.clone().applyQuaternion(qTransform);
+    // 3. Scale (Meters -> Millimeters) and Apply
+    const scaleMM = scaleFactor * 1000;
+    return {
+        x: robotReferencePos.x + deltaRobot.x * scaleMM,
+        y: robotReferencePos.y + deltaRobot.y * scaleMM,
+        z: robotReferencePos.z + deltaRobot.z * scaleMM,
+    };
+}

package/dist/components/xr/toasts.svelte.d.ts

@@ -0,0 +1,20 @@
+export type ToastVariant = 'success' | 'danger' | 'warning' | 'info';
+export interface XRToastItem {
+    id: number;
+    message: string;
+    variant: ToastVariant;
+    createdAt: number;
+    duration: number;
+}
+declare class VRToastStore {
+    toasts: XRToastItem[];
+    private nextId;
+    add(message: string, variant?: ToastVariant, duration?: number): number;
+    remove(id: number): void;
+    success(message: string, duration?: number): number;
+    danger(message: string, duration?: number): number;
+    warning(message: string, duration?: number): number;
+    info(message: string, duration?: number): number;
+}
+export declare const xrToast: VRToastStore;
+export {};

package/dist/components/xr/toasts.svelte.js

@@ -0,0 +1,32 @@
+class VRToastStore {
+    toasts = $state([]);
+    nextId = 0;
+    add(message, variant = 'info', duration = 3000) {
+        const id = this.nextId++;
+        this.toasts.push({
+            id,
+            message,
+            variant,
+            createdAt: Date.now(),
+            duration,
+        });
+        setTimeout(() => this.remove(id), duration);
+        return id;
+    }
+    remove(id) {
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    success(message, duration) {
+        return this.add(message, 'success', duration);
+    }
+    danger(message, duration) {
+        return this.add(message, 'danger', duration);
+    }
+    warning(message, duration) {
+        return this.add(message, 'warning', duration);
+    }
+    info(message, duration) {
+        return this.add(message, 'info', duration);
+    }
+}
+export const xrToast = new VRToastStore();

package/dist/components/xr/useOrigin.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { Vector3, Vector3Tuple } from 'three';
+import type { Vector3Tuple } from 'three';
 interface Context {
     position: Vector3Tuple;
     rotation: number;
-    set: (pos?: Vector3, rot?: number) => void;
+    set: (pos?: Vector3Tuple, rot?: number) => void;
 }
 export declare const provideOrigin: () => void;
 export declare const useOrigin: () => Context;

package/dist/components/xr/useOrigin.svelte.js

@@ -12,11 +12,11 @@ export const provideOrigin = () => {
         },
         set(pos, rot) {
             if (pos) {
-                position[0] = pos.x;
-                position[1] = pos.y;
-                position[2] = pos.z;
+                position[0] = pos[0];
+                position[1] = pos[1];
+                position[2] = pos[2];
             }
-            if (rot) {
+            if (rot !== undefined) {
                 rotation = rot;
             }
         },

package/dist/ecs/traits.d.ts

@@ -40,6 +40,15 @@ export declare const InstancedPose: import("koota").Trait<{
     theta: number;
     index: number;
 }>;
+export declare const WorldPose: import("koota").Trait<{
+    x: number;
+    y: number;
+    z: number;
+    oX: number;
+    oY: number;
+    oZ: number;
+    theta: number;
+}>;
 export declare const Hovered: import("koota").Trait<() => boolean>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and

package/dist/ecs/traits.js

@@ -18,6 +18,15 @@ export const InstancedPose = trait({
     theta: 0,
     index: -1,
 });
+export const WorldPose = trait({
+    x: 0,
+    y: 0,
+    z: 0,
+    oX: 0,
+    oY: 0,
+    oZ: 1,
+    theta: 0,
+});
 export const Hovered = trait(() => true);
 /**
  * Represents that an entity is composed of many instances, so that the treeview and

package/dist/ecs/useTrait.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Entity, type Trait, type World } from 'koota';
-export type AoSFactory = () => unknown;
-export type Schema = {
+type AoSFactory = () => unknown;
+type Schema = {
     [key: string]: number | bigint | string | boolean | null | undefined | (() => unknown);
 } | AoSFactory | Record<string, never>;
 type TraitRecordFromSchema<T extends Schema> = T extends AoSFactory ? ReturnType<T> : {
@@ -11,7 +11,7 @@ type TraitRecordFromSchema<T extends Schema> = T extends AoSFactory ? ReturnType
  * For SoA it is a snapshot of the state for a single entity.
  * For AoS it is the state instance for a single entity.
  */
-export type TraitRecord<T extends Trait | Schema> = T extends Trait ? TraitRecordFromSchema<T['schema']> : TraitRecordFromSchema<T>;
+type TraitRecord<T extends Trait | Schema> = T extends Trait ? TraitRecordFromSchema<T['schema']> : TraitRecordFromSchema<T>;
 export declare function isWorld(target: Entity | World | null | undefined): target is World;
 export declare function useTrait<T extends Trait>(target: () => Entity | World | undefined | null, trait: T): {
     current: TraitRecord<T> | undefined;

package/dist/frame.d.ts

@@ -1,5 +1,4 @@
 import type { Transform } from '@viamrobotics/sdk';
-import type { ValueOf } from 'type-fest';
 type FrameGeometryMap = {
     none: {
         type: 'none';
@@ -21,7 +20,6 @@ type FrameGeometryMap = {
     };
 };
 export type FrameGeometry = keyof FrameGeometryMap;
-export type FrameGeometries = ValueOf<FrameGeometryMap>;
 type FrameOrientationMap = {
     quaternion: {
         type: 'quaternion';
@@ -60,7 +58,6 @@ type FrameOrientationMap = {
     };
 };
 export type FrameOrientation = keyof FrameOrientationMap;
-export type FrameOrientations = ValueOf<FrameOrientationMap>;
 export interface Frame<T extends FrameGeometry = FrameGeometry, K extends FrameOrientation = FrameOrientation> {
     id?: string;
     name?: string;

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

@@ -0,0 +1,12 @@
+export interface JointLimit {
+    id: string;
+    min: number;
+    max: number;
+}
+interface Context {
+    names: string[];
+    kinematics: Record<string, JointLimit[] | undefined>;
+}
+export declare const provideArmKinematics: (partID: () => string) => void;
+export declare const useArmKinematics: () => Context;
+export {};