@viamrobotics/motion-tools 1.32.0 → 1.33.1

package/dist/components/overlay/settings/Tabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte'
+	import type { Component } from 'svelte'
 
 	import { normalizeProps, useMachine } from '@zag-js/svelte'
 	import * as tabs from '@zag-js/tabs'
@@ -9,7 +9,7 @@
 		onValueChange: (value: string) => void
 		items: {
 			label: string
-			content: Snippet
+			component: Component
 		}[]
 	}
 
@@ -45,11 +45,13 @@
 	</div>
 
 	{#each items as item (item.label)}
+		{@const Component = item.component}
+
 		<div
 			{...api.getContentProps({ value: item.label })}
 			class="h-full w-full overflow-y-auto p-4"
 		>
-			{@render item.content()}
+			<Component />
 		</div>
 	{/each}
 </div>

package/dist/components/overlay/settings/Tabs.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { Snippet } from 'svelte';
+import type { Component } from 'svelte';
 interface Props {
     defaultTab?: string;
     onValueChange: (value: string) => void;
     items: {
         label: string;
-        content: Snippet;
+        component: Component;
     }[];
 }
-declare const Tabs: import("svelte").Component<Props, {}, "">;
+declare const Tabs: Component<Props, {}, "">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/overlay/settings/VisionSettings.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const partID = usePartID()
+
+	const visionServices = useResourceNames(() => partID.current, 'vision')
+	const settings = useSettings()
+	const { disabledVisionServices } = $derived(settings.current)
+</script>
+
+<div class="text-gray-9 flex flex-col gap-1 text-xs">
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Enabled vision services</strong></h3>
+
+	{#each visionServices.current as visionService (visionService)}
+		<div class="flex items-center justify-between py-0.5">
+			{visionService.name}
+			<Switch
+				on={disabledVisionServices[visionService.name] !== true}
+				on:change={(event) => {
+					disabledVisionServices[visionService.name] = !event.detail
+				}}
+			/>
+		</div>
+	{:else}
+		No vision services detected
+	{/each}
+</div>

package/dist/components/overlay/settings/VisionSettings.svelte.d.ts

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

package/dist/components/overlay/settings/WeblabSettings.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { onMount } from 'svelte'
+
+	import { useWeblabs, WEBLABS_EXPERIMENTS } from '../../../hooks/useWeblabs.svelte'
+
+	const weblabs = useWeblabs()
+	const knownWeblabs = Object.keys(WEBLABS_EXPERIMENTS)
+
+	onMount(() => {
+		weblabs.load(knownWeblabs)
+	})
+</script>
+
+<div class="flex flex-col gap-1 text-xs">
+	{#each knownWeblabs as experiment (experiment)}
+		<label class="flex items-center justify-between gap-2 py-0.5">
+			{experiment}
+			<Switch
+				on={weblabs.isActive(experiment)}
+				on:change={() => weblabs.toggle(experiment)}
+			/>
+		</label>
+	{:else}
+		No weblabs defined
+	{/each}
+</div>

package/dist/components/overlay/settings/WeblabSettings.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 WeblabSettings: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type WeblabSettings = InstanceType<typeof WeblabSettings>;
+export default WeblabSettings;

package/dist/components/overlay/settings/WidgetSettings.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const partID = usePartID()
+	const cameras = useResourceNames(() => partID.current, 'camera')
+	const settings = useSettings()
+
+	const currentRobotCameraWidgets = $derived(
+		settings.current.openCameraWidgets[partID.current] || []
+	)
+</script>
+
+<div class="text-gray-9 flex flex-col gap-1 text-xs">
+	<label class="flex items-center justify-between gap-2 py-1">
+		Arm positions
+		<Switch bind:on={settings.current.enableArmPositionsWidget} />
+	</label>
+
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Camera widgets</strong></h3>
+
+	{#each cameras.current as camera (camera)}
+		{@const isWidgetOpen = currentRobotCameraWidgets.includes(camera.name)}
+		<div class="flex items-center justify-between gap-2 py-0.5">
+			<span class="min-w-0 truncate">{camera.name}</span>
+			<Switch
+				on={isWidgetOpen}
+				on:change={(event) => {
+					settings.current.openCameraWidgets = event.detail
+						? {
+								...settings.current.openCameraWidgets,
+								[partID.current]: [...currentRobotCameraWidgets, camera.name],
+							}
+						: {
+								...settings.current.openCameraWidgets,
+								[partID.current]: currentRobotCameraWidgets.filter(
+									(widget) => widget !== camera.name
+								),
+							}
+				}}
+			/>
+		</div>
+	{:else}
+		No cameras detected
+	{/each}
+</div>

package/dist/components/overlay/settings/WidgetSettings.svelte.d.ts

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

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

@@ -7,7 +7,6 @@
 	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'
 
@@ -20,7 +19,6 @@
 	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
@@ -53,7 +51,6 @@
 	const orthoHeight = $derived(BASE_ORTHO_HEIGHT / orthoZoom)
 
 	const composed = new Matrix4()
-	const originMat = new Matrix4()
 
 	$effect(() => {
 		if (!canvasEl) return
@@ -121,15 +118,7 @@
 
 			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.multiplyMatrices(worldMat, VIAM_TO_THREE_CAMERA)
 			composed.decompose(povCamera.position, povCamera.quaternion, povCamera.scale)
 
 			const aspect = width / height

package/dist/ecs/traits.d.ts

@@ -71,7 +71,7 @@ export declare const Invisible: import("koota").Trait<() => boolean>;
  * `details-extensions` portal target (e.g. gizmo plugin entities) opt in by
  * adding this trait.
  */
-export declare const CustomDetails: import("koota").Trait<() => boolean>;
+export declare const CustomDetails: import("koota").TagTrait;
 /**
  * True when the entity itself, or any of its parents up the `ChildOf`
  * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;

package/dist/ecs/traits.js

@@ -68,7 +68,7 @@ export const Invisible = trait(() => true);
  * `details-extensions` portal target (e.g. gizmo plugin entities) opt in by
  * adding this trait.
  */
-export const CustomDetails = trait(() => true);
+export const CustomDetails = trait();
 /**
  * True when the entity itself, or any of its parents up the `ChildOf`
  * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;

package/dist/hooks/useWorldState.svelte.js

@@ -1,6 +1,6 @@
 import { useThrelte } from '@threlte/core';
 import { Struct, TransformChangeType, WorldStateStoreClient, } from '@viamrobotics/sdk';
-import { createResourceClient, createResourceQuery, createResourceStream, useResourceNames, } from '@viamrobotics/svelte-sdk';
+import { createResourceClient, createResourceQuery, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import { Matrix4 } from 'three';
 import { asFloat32Array, inMeters } from '../buffer';
 import { createChunkLoader } from '../chunking';
@@ -161,14 +161,12 @@ const createWorldState = (client) => {
     };
     let initialized = false;
     let flushScheduled = false;
+    let rafId = 0;
     let pendingEvents = [];
     const listUUIDs = createResourceQuery(client, 'listUUIDs');
     const getTransformQueries = $derived(listUUIDs.data?.map((uuid) => {
         return createResourceQuery(client, 'getTransform', () => [uuid], () => ({ refetchInterval: false }));
     }));
-    const changeStream = createResourceStream(client, 'streamTransformChanges', {
-        refetchMode: 'replace',
-    });
     const applyEvents = (events) => {
         for (const event of events) {
             if (event.changeType === TransformChangeType.ADDED) {
@@ -190,11 +188,12 @@ const createWorldState = (client) => {
         if (flushScheduled)
             return;
         flushScheduled = true;
-        requestAnimationFrame(() => {
-            const toApply = pendingEvents;
-            applyEvents(toApply);
+        rafId = requestAnimationFrame(() => {
+            rafId = 0;
             flushScheduled = false;
+            const toApply = pendingEvents;
             pendingEvents = [];
+            applyEvents(toApply);
         });
     };
     $effect(() => {
@@ -213,55 +212,45 @@ const createWorldState = (client) => {
         invalidate();
         initialized = true;
     });
-    $effect(() => {
-        if (changeStream?.data === undefined)
+    /**
+     * Consumes the `streamTransformChanges` server stream directly.
+     * Transform changes are write-once into the ECS world, so we drain
+     * each event into `pendingEvents` (cleared every flush) and never
+     * retain history. Mirrors `useDrawService`'s stream consumption.
+     */
+    const consumeChanges = async (signal) => {
+        const activeClient = client.current;
+        if (!activeClient)
             return;
-        const eventsByUUID = new Map();
-        for (const event of changeStream.data) {
-            if (!event.transform) {
-                continue;
-            }
-            const uuid = event.transform.uuidString;
-            const existing = eventsByUUID.get(uuid);
-            if (!existing) {
-                eventsByUUID.set(uuid, event);
-                continue;
-            }
-            switch (event.changeType) {
-                case TransformChangeType.REMOVED: {
-                    eventsByUUID.set(uuid, event);
-                    break;
-                }
-                case TransformChangeType.ADDED: {
-                    if (existing.changeType !== TransformChangeType.REMOVED) {
-                        eventsByUUID.set(uuid, event);
-                    }
-                    break;
-                }
-                case TransformChangeType.UPDATED: {
-                    // merge with existing updated event
-                    if (existing.changeType === TransformChangeType.UPDATED) {
-                        existing.updatedFields ??= { paths: [] };
-                        const paths = event.updatedFields?.paths ?? [];
-                        for (const path of paths) {
-                            if (existing.updatedFields.paths.includes(path)) {
-                                continue;
-                            }
-                            existing.updatedFields.paths.push(path);
-                        }
-                        existing.transform = event.transform;
-                    }
-                    else {
-                        eventsByUUID.set(uuid, event);
-                    }
+        try {
+            for await (const event of activeClient.streamTransformChanges(undefined, { signal })) {
+                if (signal.aborted)
                     break;
-                }
+                if (!event.transform)
+                    continue;
+                pendingEvents.push(event);
+                scheduleFlush();
+            }
+        }
+        catch (error) {
+            if (!signal.aborted) {
+                console.error('World state transform stream error:', error);
             }
         }
-        pendingEvents.push(...eventsByUUID.values());
-        scheduleFlush();
+    };
+    $effect(() => {
+        if (!client.current)
+            return;
+        const controller = new AbortController();
+        void consumeChanges(controller.signal);
+        return () => {
+            controller.abort();
+        };
     });
     return () => {
+        if (rafId)
+            cancelAnimationFrame(rafId);
+        pendingEvents = [];
         chunkLoader.dispose();
         for (const [, entity] of entities) {
             if (world.has(entity)) {

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;