@viamrobotics/motion-tools 0.14.2 → 0.14.5

package/dist/{Detail.svelte.d.ts → FrameConfigUpdater.svelte.d.ts}

@@ -1,20 +1,14 @@
+import type { Frame } from './frame';
 import type { WorldObject } from './lib';
 import type { Geometries } from './WorldObject.svelte';
 import type { Pose } from '@viamrobotics/sdk';
 type UpdateFrameCallback = {
-    (componentName: string, referenceFrame: string, pose: Pose, geometry?: {
-        type: 'none' | 'box' | 'sphere' | 'capsule';
-        r?: number;
-        l?: number;
-        x?: number;
-        y?: number;
-        z?: number;
-    }): void;
+    (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']): void;
 };
 type RemoveFrameCallback = {
     (componentName: string): void;
 };
-export declare class DetailConfigUpdater {
+export declare class FrameConfigUpdater {
     private object;
     private referenceFrame;
     private updateFrame;
@@ -31,14 +25,7 @@ export declare class DetailConfigUpdater {
         oZ?: number;
         theta?: number;
     }) => void;
-    updateGeometry: (geometry: {
-        type: "none" | "box" | "sphere" | "capsule";
-        r?: number;
-        l?: number;
-        x?: number;
-        y?: number;
-        z?: number;
-    }) => void;
+    updateGeometry: (geometry: Partial<Frame["geometry"]>) => void;
     setFrameParent: (parentName: string) => void;
     deleteFrame: () => void;
     setGeometryType: (type: "none" | "box" | "sphere" | "capsule") => void;

package/dist/{Detail.svelte.js → FrameConfigUpdater.svelte.js}

@@ -1,4 +1,5 @@
-export class DetailConfigUpdater {
+import { createPose } from './transform';
+export class FrameConfigUpdater {
     object;
     referenceFrame;
     updateFrame;
@@ -49,7 +50,7 @@ export class DetailConfigUpdater {
         if (!object)
             return;
         let geometryObject;
-        if (geometry.type === 'box') {
+        if (geometry?.type === 'box') {
             const currentGeometry = object.geometry?.geometryType.value;
             geometryObject = {
                 type: 'box',
@@ -58,14 +59,14 @@ export class DetailConfigUpdater {
                 z: geometry.z ?? currentGeometry?.dimsMm?.z,
             };
         }
-        else if (geometry.type === 'sphere') {
+        else if (geometry?.type === 'sphere') {
             const currentGeometry = object.geometry?.geometryType.value;
             geometryObject = {
                 type: 'sphere',
                 r: geometry.r ?? currentGeometry?.radiusMm,
             };
         }
-        else if (geometry.type === 'capsule') {
+        else if (geometry?.type === 'capsule') {
             const currentGeometry = object.geometry?.geometryType.value;
             geometryObject = {
                 type: 'capsule',
@@ -73,29 +74,13 @@ export class DetailConfigUpdater {
                 l: geometry.l ?? currentGeometry?.lengthMm,
             };
         }
-        this.updateFrame(object.name ?? '', this.referenceFrame(), {
-            x: object.localEditedPose.x,
-            y: object.localEditedPose.y,
-            z: object.localEditedPose.z,
-            oX: object.localEditedPose.oX,
-            oY: object.localEditedPose.oY,
-            oZ: object.localEditedPose.oZ,
-            theta: object.localEditedPose.theta,
-        }, { ...geometryObject });
+        this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), geometryObject);
     };
     setFrameParent = (parentName) => {
         const object = this.object();
         if (!object)
             return;
-        this.updateFrame(object.name ?? '', parentName, {
-            x: object.localEditedPose.x,
-            y: object.localEditedPose.y,
-            z: object.localEditedPose.z,
-            oX: object.localEditedPose.oX,
-            oY: object.localEditedPose.oY,
-            oZ: object.localEditedPose.oZ,
-            theta: object.localEditedPose.theta,
-        });
+        this.updateFrame(object.name ?? '', parentName, createPose(object.localEditedPose));
     };
     deleteFrame = () => {
         const object = this.object();
@@ -108,37 +93,13 @@ export class DetailConfigUpdater {
         if (!object)
             return;
         if (type === 'none') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), {
-                x: object.localEditedPose.x,
-                y: object.localEditedPose.y,
-                z: object.localEditedPose.z,
-                oX: object.localEditedPose.oX,
-                oY: object.localEditedPose.oY,
-                oZ: object.localEditedPose.oZ,
-                theta: object.localEditedPose.theta,
-            }, { type: 'none' });
+            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'none' });
         }
         else if (type === 'box') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), {
-                x: object.localEditedPose.x,
-                y: object.localEditedPose.y,
-                z: object.localEditedPose.z,
-                oX: object.localEditedPose.oX,
-                oY: object.localEditedPose.oY,
-                oZ: object.localEditedPose.oZ,
-                theta: object.localEditedPose.theta,
-            }, { type: 'box', x: 100, y: 100, z: 100 });
+            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'box', x: 100, y: 100, z: 100 });
         }
         else if (type === 'sphere') {
-            this.updateFrame(object.name ?? '', this.referenceFrame(), {
-                x: object.localEditedPose.x,
-                y: object.localEditedPose.y,
-                z: object.localEditedPose.z,
-                oX: object.localEditedPose.oX,
-                oY: object.localEditedPose.oY,
-                oZ: object.localEditedPose.oZ,
-                theta: object.localEditedPose.theta,
-            }, { type: 'sphere', r: 100 });
+            this.updateFrame(object.name ?? '', this.referenceFrame(), createPose(object.localEditedPose), { type: 'sphere', r: 100 });
         }
         else if (type === 'capsule') {
             this.updateFrame(object.name ?? '', this.referenceFrame(), {

package/dist/components/App.svelte

@@ -4,7 +4,6 @@
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 	import type { Struct } from '@viamrobotics/sdk'
-
 	import Scene from './Scene.svelte'
 	import TreeContainer from './Tree/TreeContainer.svelte'
 	import Details from './Details.svelte'
@@ -16,7 +15,7 @@
 	import { domPortal } from '../portal'
 	import { provideSettings } from '../hooks/useSettings.svelte'
 	import FileDrop from './FileDrop.svelte'
-	import WeblabProvider from './weblab/WeblabProvider.svelte'
+	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
 	import { useViamClient } from '@viamrobotics/svelte-sdk'
 	import LiveUpdatesBanner from './LiveUpdatesBanner.svelte'
@@ -54,6 +53,7 @@
 
 	createPartIDContext(() => partID)
 
+	provideWeblabs()
 	provideToast()
 
 	let root = $state.raw<HTMLElement>()
@@ -83,41 +83,39 @@
 	<SvelteQueryDevtools initialIsOpen />
 {/if}
 
-<WeblabProvider>
-	<div
-		class="relative h-full w-full overflow-hidden"
-		bind:this={root}
-	>
-		<Canvas renderMode="always">
-			<World>
-				<SceneProviders>
-					{#snippet children({ focus })}
-						<Scene>
-							{@render appChildren?.()}
-						</Scene>
-
-						<XR {@attach domPortal(root)} />
-
-						<Dashboard {@attach domPortal(root)} />
-						<Details {@attach domPortal(root)} />
-						{#if environment.current.isStandalone}
-							<LiveUpdatesBanner {@attach domPortal(root)} />
-						{/if}
-
-						{#if !focus}
-							<TreeContainer {@attach domPortal(root)} />
-						{/if}
-
-						{#if !focus && settings.current.enableArmPositionsWidget}
-							<ArmPositions {@attach domPortal(root)} />
-						{/if}
-
-						<FileDrop {@attach domPortal(root)} />
-					{/snippet}
-				</SceneProviders>
-			</World>
-		</Canvas>
-
-		<ToastContainer />
-	</div>
-</WeblabProvider>
+<div
+	class="relative h-full w-full overflow-hidden"
+	bind:this={root}
+>
+	<Canvas renderMode="always">
+		<World>
+			<SceneProviders>
+				{#snippet children({ focus })}
+					<Scene>
+						{@render appChildren?.()}
+					</Scene>
+
+					<XR {@attach domPortal(root)} />
+
+					<Dashboard {@attach domPortal(root)} />
+					<Details {@attach domPortal(root)} />
+					{#if environment.current.isStandalone}
+						<LiveUpdatesBanner {@attach domPortal(root)} />
+					{/if}
+
+					{#if !focus}
+						<TreeContainer {@attach domPortal(root)} />
+					{/if}
+
+					{#if !focus && settings.current.enableArmPositionsWidget}
+						<ArmPositions {@attach domPortal(root)} />
+					{/if}
+
+					<FileDrop {@attach domPortal(root)} />
+				{/snippet}
+			</SceneProviders>
+		</World>
+	</Canvas>
+
+	<ToastContainer />
+</div>

package/dist/components/AxesHelper.svelte

@@ -65,7 +65,6 @@
 <T
 	is={line}
 	{...rest}
-	raycast={() => null}
 	bvh={{ enabled: false }}
 >
 	<T is={geometry} />

package/dist/components/Details.svelte

@@ -25,7 +25,8 @@
 	import WeblabActive from './weblab/WeblabActive.svelte'
 	import { useFrames } from '../hooks/useFrames.svelte'
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
-	import { DetailConfigUpdater } from '../Detail.svelte'
+	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
+	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 
 	const { ...rest } = $props()
 
@@ -36,6 +37,7 @@
 	const partConfig = usePartConfig()
 	const selectedObject = useSelectedObject()
 	const selectedObject3d = useSelectedObject3d()
+	const weblab = useWeblabs()
 
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
@@ -57,7 +59,7 @@
 
 	const draggable = useDraggable('details')
 
-	const detailConfigUpdater: DetailConfigUpdater = new DetailConfigUpdater(
+	const detailConfigUpdater = new FrameConfigUpdater(
 		() => object,
 		partConfig.updateFrame,
 		partConfig.deleteFrame,
@@ -99,6 +101,48 @@
 			stop()
 		}
 	})
+
+	const getCopyClipboardText = () => {
+		if (weblab.isActive('MOTION_TOOLS_EDIT_FRAME')) {
+			return JSON.stringify(
+				{
+					worldPosition: worldPosition,
+					worldOrientation: worldOrientation,
+					localPosition: {
+						x: localPose?.x,
+						y: localPose?.y,
+						z: localPose?.z,
+					},
+					localOrientation: {
+						x: localPose?.oX,
+						y: localPose?.oY,
+						z: localPose?.oZ,
+						th: localPose?.theta,
+					},
+					geometry: {
+						type: geometryType,
+						value: object?.geometry?.geometryType.value,
+					},
+					parentFrame: referenceFrame,
+				},
+				null,
+				2
+			)
+		} else {
+			return JSON.stringify(
+				{
+					worldPosition: worldPosition,
+					worldOrientation: worldOrientation,
+					geometry: {
+						type: geometryType,
+						value: object?.geometry?.geometryType.value,
+					},
+				},
+				null,
+				2
+			)
+		}
+	}
 </script>
 
 {#snippet ImmutableField({
@@ -199,7 +243,7 @@
 
 			<button
 				onclick={async () => {
-					navigator.clipboard.writeText(JSON.stringify($state.snapshot(object)))
+					navigator.clipboard.writeText(getCopyClipboardText())
 					copied = true
 					setTimeout(() => (copied = false), 1000)
 				}}
@@ -430,7 +474,7 @@
 							<div class="flex items-center gap-2">
 								{@render GeometryAttribute({
 									label: 'r',
-									ariaLabel: 'sphere dimensions radius value input',
+									ariaLabel: 'sphere dimensions radius value',
 									value: radiusMm ? radiusMm.toFixed(2) : '-',
 									onInput: (value) =>
 										detailConfigUpdater.updateGeometry({ type: 'sphere', r: parseFloat(value) }),
@@ -523,7 +567,7 @@
 				<Button
 					variant="danger"
 					class="mt-2 w-full"
-					onclick={() => detailConfigUpdater.deleteFrame()}>Delete Frame</Button
+					onclick={() => detailConfigUpdater.deleteFrame()}>Delete frame</Button
 				>
 			{/if}
 		</WeblabActive>

package/dist/components/Geometry.svelte

@@ -65,18 +65,38 @@
 	const oncreate = (ref: BufferGeometry) => {
 		geo = ref
 	}
+
+	const parsePlyInput = (mesh: string | Uint8Array): BufferGeometry => {
+		// Case 1: already a base64 or ASCII string
+		if (typeof mesh === 'string') {
+			return plyLoader.parse(atob(mesh))
+		}
+
+		// Case 2: detect text vs binary PLY in Uint8Array
+		const header = new TextDecoder().decode(mesh.slice(0, 50))
+		const isAscii = header.includes('format ascii')
+
+		// Case 3: text-mode PLY → decode bytes to string
+		if (isAscii) {
+			const text = new TextDecoder().decode(mesh)
+			return plyLoader.parse(text)
+		}
+
+		// Case 4: binary PLY → pass ArrayBuffer directly
+		return plyLoader.parse(mesh.buffer as ArrayBuffer)
+	}
 </script>
 
 <T
 	is={group}
 	{...rest}
 >
-	<AxesHelper
-		width={3}
-		length={0.1}
-	/>
-
 	{#if geometry?.geometryType}
+		<AxesHelper
+			width={3}
+			length={0.1}
+		/>
+
 		<T
 			is={mesh}
 			{name}
@@ -84,8 +104,8 @@
 			bvh={{ enabled: false }}
 		>
 			{#if geometry.geometryType.case === 'mesh'}
-				{@const mesh = geometry.geometryType.value.mesh as Uint8Array<ArrayBuffer>}
-				{@const meshGeometry = plyLoader.parse(typeof mesh === 'string' ? atob(mesh) : mesh.buffer)}
+				{@const mesh = geometry.geometryType.value.mesh}
+				{@const meshGeometry = parsePlyInput(mesh)}
 				<T
 					is={meshGeometry}
 					{oncreate}
@@ -111,7 +131,7 @@
 					args={[radiusMm * 0.001, lengthMm * 0.001]}
 					{oncreate}
 				/>
-			{:else}{/if}
+			{/if}
 
 			{#if geometry.geometryType.case === 'line'}
 				<MeshLineMaterial
@@ -137,6 +157,13 @@
 				{/if}
 			{/if}
 		</T>
+	{:else}
+		<AxesHelper
+			{name}
+			{uuid}
+			width={3}
+			length={0.1}
+		/>
 	{/if}
 
 	{@render children?.({ ref: group })}

package/dist/components/LiveUpdatesBanner.svelte

@@ -15,7 +15,7 @@
 			class="flex flex-col items-start rounded border-l-4 border-yellow-600 bg-yellow-50 px-4 py-2"
 		>
 			<p>
-				<strong>Live Updates Paused</strong>
+				<strong>Live updates paused</strong>
 			</p>
 
 			<p class="text-sm">

package/dist/components/Tree/AddFrames.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <Drawer name="Add frames">
-	<div class="flex h-64 w-60 flex-col gap-2 overflow-auto p-3">
+	<div class="flex max-h-64 flex-col gap-2 overflow-auto p-3">
 		{#if framelessComponents.current.length > 0}
 			<ul class="space-y-1">
 				{#each framelessComponents.current as component (component)}

package/dist/components/Tree/Drawer.svelte

@@ -7,9 +7,10 @@
 		name: string
 		defaultOpen?: boolean
 		children: Snippet
+		titleAlert?: Snippet
 	}
 
-	let { name, children, defaultOpen = false }: Props = $props()
+	let { name, children, titleAlert, defaultOpen = false }: Props = $props()
 
 	const expanded = $derived(new PersistedState(`${name}-expanded`, defaultOpen))
 </script>
@@ -24,9 +25,10 @@
 			label="unfold more icon"
 			variant="ghost"
 			cx="size-6"
-			on:click={() => (expanded.current = !expanded.current)}
+			onclick={() => (expanded.current = !expanded.current)}
 		/>
 		{name}
+		{@render titleAlert?.()}
 	</h3>
 </button>
 

package/dist/components/Tree/Drawer.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     name: string;
     defaultOpen?: boolean;
     children: Snippet;
+    titleAlert?: Snippet;
 }
 declare const Drawer: import("svelte").Component<Props, {}, "">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/Tree/Logs.svelte

@@ -1,14 +1,56 @@
 <script lang="ts">
+	import { useFrames } from '../../hooks/useFrames.svelte'
+	import { useGeometries } from '../../hooks/useGeometries.svelte'
 	import { useLogs } from '../../hooks/useLogs.svelte'
+	import { usePointClouds } from '../../hooks/usePointclouds.svelte'
 	import Drawer from './Drawer.svelte'
 
+	const frames = useFrames()
+	const geometries = useGeometries()
+	const pointclouds = usePointClouds()
 	const logs = useLogs()
-	const truncated = $derived(logs.current.slice(0, 100).reverse())
+
+	$effect(() => {
+		if (frames.error) {
+			const message = `Frames: ${frames.error.message}`
+			logs.add(message, 'error')
+		}
+	})
+
+	$effect(() => {
+		if (geometries.errors.length > 0) {
+			for (const error of geometries.errors) {
+				logs.add(`Geometries: ${error.message}`, 'error')
+			}
+		}
+	})
+
+	$effect(() => {
+		if (pointclouds.errors.length > 0) {
+			for (const error of pointclouds.errors) {
+				logs.add(`Pointclouds: ${error.message}`, 'error')
+			}
+		}
+	})
 </script>
 
 <Drawer name="Logs">
-	<div class="flex h-64 w-60 flex-col gap-2 overflow-auto p-3">
-		{#each truncated as log (log.uuid)}
+	{#snippet titleAlert()}
+		{#if logs.warnings.length > 0}
+			<span class="mr-1 rounded bg-yellow-700 px-1 py-0.5 text-xs text-white">
+				{logs.warnings.length}
+			</span>
+		{/if}
+
+		{#if logs.errors.length > 0}
+			<span class="mr-1 rounded bg-red-700 px-1 py-0.5 text-xs text-white">
+				{logs.errors.length}
+			</span>
+		{/if}
+	{/snippet}
+
+	<div class="flex h-64 flex-col gap-2 overflow-auto p-3">
+		{#each logs.current as log (log.uuid)}
 			<div>
 				<div class="flex flex-wrap items-center gap-1.5">
 					<div
@@ -23,7 +65,14 @@
 					></div>
 					<div class="text-subtle-2">{log.timestamp}</div>
 				</div>
-				<div>{log.message}</div>
+				<div>
+					{#if log.count > 1}
+						<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
+							{log.count}
+						</span>
+					{/if}
+					{log.message}
+				</div>
 			</div>
 		{:else}
 			No logs

package/dist/components/Tree/TreeContainer.svelte

@@ -13,10 +13,12 @@
 	import Widgets from './Widgets.svelte'
 	import AddFrames from './AddFrames.svelte'
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
 	const { ...rest } = $props()
 
 	provideTreeExpandedContext()
 
+	const partID = usePartID()
 	const selected = useSelected()
 	const objects = useObjects()
 	const draggable = useDraggable('treeview')
@@ -40,7 +42,7 @@
 </script>
 
 <div
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 overflow-y-auto border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 w-60 overflow-y-auto border text-xs"
 	style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
 	{...rest}
 >
@@ -56,9 +58,10 @@
 		/>
 	{/key}
 
-	{#if environment.current.isStandalone}
+	{#if environment.current.isStandalone && partID.current}
 		<AddFrames />
 	{/if}
+
 	<Logs />
 	<Settings />
 	<Widgets />

package/dist/components/WorldObjects.svelte

@@ -74,6 +74,21 @@
 	</Portal>
 {/each}
 
+{#each drawAPI.frames as object (object.uuid)}
+	<Portal id={object.referenceFrame}>
+		<Frame
+			uuid={object.uuid}
+			name={object.name}
+			pose={object.pose}
+			geometry={object.geometry}
+			metadata={object.metadata}
+		>
+			<PortalTarget id={object.name} />
+			<Label text={object.name} />
+		</Frame>
+	</Portal>
+{/each}
+
 {#each drawAPI.points as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Pointcloud {object}>

package/dist/components/weblab/WeblabActive.svelte

@@ -9,13 +9,13 @@
 	}
 	let { experiment, children, renderIfActive = true }: Props = $props()
 
-	const { weblab } = useWeblabs()
+	const weblabs = useWeblabs()
 
 	$effect.pre(() => {
-		weblab.load([experiment])
+		weblabs.load([experiment])
 	})
 </script>
 
-{#if weblab.isActive(experiment) === renderIfActive}
+{#if weblabs.isActive(experiment) === renderIfActive}
 	{@render children()}
 {/if}