@viamrobotics/motion-tools 1.12.3 → 1.13.0

package/dist/components/App.svelte

@@ -30,6 +30,7 @@
 	import HoveredEntities from './hover/HoveredEntities.svelte'
 	import Settings from './overlay/settings/Settings.svelte'
 	import { useXR } from '@threlte/xr'
+	import Logs from './overlay/Logs.svelte'
 
 	interface LocalConfigProps {
 		current: Struct
@@ -120,7 +121,6 @@
 					<FileDrop />
 					<Dashboard {dashboard} />
 					<Details />
-					<Settings />
 
 					{#if environment.current.isStandalone}
 						<LiveUpdatesBanner />
@@ -141,6 +141,9 @@
 					{/if}
 
 					<PortalTarget id="dom" />
+
+					<Settings />
+					<Logs />
 				</div>
 			{/snippet}
 		</SceneProviders>

package/dist/components/Geometry.svelte

@@ -135,17 +135,17 @@
 			/>
 		{/if}
 
-		<T
-			is={mesh}
-			name={entity}
-			userData.name={name}
-			renderOrder={renderOrder.current}
-		>
-			{#if model && renderMode.includes('model')}
-				<T is={model} />
-			{/if}
-
-			{#if !model || renderMode.includes('colliders')}
+		{#if model && renderMode.includes('model')}
+			<T is={model} />
+		{/if}
+
+		{#if !model || renderMode.includes('colliders')}
+			<T
+				is={mesh}
+				name={entity}
+				userData.name={name}
+				renderOrder={renderOrder.current}
+			>
 				{#if linePositions.current}
 					<LineGeometry positions={linePositions.current} />
 				{:else if box.current}
@@ -168,40 +168,40 @@
 						{oncreate}
 					/>
 				{/if}
-			{/if}
-
-			{#if linePositions.current}
-				<T
-					is={LineMaterial}
-					{color}
-					width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
-					depthTest={materialProps.current?.depthTest ?? true}
-				/>
-			{:else}
-				{@const currentOpacity = opacity.current ?? 0.7}
-				<T.MeshToonMaterial
-					{color}
-					side={geometryType === 'buffer' ? DoubleSide : FrontSide}
-					transparent={currentOpacity < 1}
-					depthWrite={currentOpacity === 1}
-					opacity={currentOpacity}
-					depthTest={materialProps.current?.depthTest ?? true}
-				/>
-
-				{#if geo && (renderMode.includes('colliders') || !model)}
-					<T.LineSegments
-						raycast={() => null}
-						bvh={{ enabled: false }}
-					>
-						<T.EdgesGeometry args={[geo, 0]} />
-						<T.LineBasicMaterial color={darkenColor(color, 10)} />
-					</T.LineSegments>
+
+				{#if linePositions.current}
+					<T
+						is={LineMaterial}
+						{color}
+						width={lineWidth.current ? lineWidth.current * 0.001 : 0.5}
+						depthTest={materialProps.current?.depthTest ?? true}
+					/>
+				{:else}
+					{@const currentOpacity = opacity.current ?? 0.7}
+					<T.MeshToonMaterial
+						{color}
+						side={geometryType === 'buffer' ? DoubleSide : FrontSide}
+						transparent={currentOpacity < 1}
+						depthWrite={currentOpacity === 1}
+						opacity={currentOpacity}
+						depthTest={materialProps.current?.depthTest ?? true}
+					/>
+
+					{#if geo && (renderMode.includes('colliders') || !model)}
+						<T.LineSegments
+							raycast={() => null}
+							bvh={{ enabled: false }}
+						>
+							<T.EdgesGeometry args={[geo, 0]} />
+							<T.LineBasicMaterial color={darkenColor(color, 10)} />
+						</T.LineSegments>
+					{/if}
 				{/if}
-			{/if}
-		</T>
+			</T>
+		{/if}
 	{:else if showAxesHelper.current}
 		<AxesHelper
-			name={name.current}
+			name={entity}
 			width={3}
 			length={0.1}
 		/>

package/dist/components/SceneProviders.svelte

@@ -23,6 +23,7 @@
 	import { provide3DModels } from '../hooks/use3DModels.svelte'
 	import { providePointcloudObjects } from '../hooks/usePointcloudObjects.svelte'
 	import { provideLinkedEntities } from '../hooks/useLinked.svelte'
+	import { provideConfigFrames } from '../hooks/useConfigFrames.svelte'
 
 	interface Props {
 		cameraPose?: CameraPose
@@ -43,6 +44,7 @@
 	provideDrawAPI()
 
 	provideResourceByName(() => partID.current)
+	provideConfigFrames()
 	provideFrames(() => partID.current)
 	provideGeometries(() => partID.current)
 	provide3DModels(() => partID.current)

package/dist/components/Selected.svelte

@@ -15,19 +15,17 @@
 	const selectedObject3d = useSelectedObject3d()
 
 	const object = $derived.by(() => {
-		if (!isInstanceOf(selectedObject3d.current, 'Mesh')) {
-			return selectedObject3d.current
+		if (!selectedObject3d.current) {
+			return
 		}
 
 		// Create a clone in the case of meshes, which could be frames with geometries,
 		// so that our bounding box doesn't include children
-		const result = selectedObject3d.current?.clone(false)
-
-		if (result) {
-			selectedObject3d.current?.getWorldPosition(result.position)
-			selectedObject3d.current?.getWorldQuaternion(result.quaternion)
-			return result
+		if (isInstanceOf(selectedObject3d.current, 'Mesh')) {
+			return selectedObject3d.current?.clone(false)
 		}
+
+		return selectedObject3d.current
 	})
 
 	const { start, stop } = useTask(
@@ -44,7 +42,9 @@
 				mesh.getBoundingBoxAt(selectedEntity.instance, box3)
 				obb.fromBox3(box3)
 				obbHelper.setFromOBB(obb)
-			} else {
+			} else if (isInstanceOf(selectedObject3d.current, 'Mesh')) {
+				selectedObject3d.current?.getWorldPosition(object.position)
+				selectedObject3d.current?.getWorldQuaternion(object.quaternion)
 				obbHelper.setFromObject(object)
 			}
 

package/dist/components/StaticGeometries.svelte

@@ -39,7 +39,7 @@
 		const entity = world.spawn(
 			traits.Name(`custom geometry ${++index}`),
 			traits.Pose,
-			traits.Box({ x: 0.1, y: 0.1, z: 0.1 }),
+			traits.Box({ x: 100, y: 100, z: 100 }),
 			traits.Removable
 		)
 
@@ -87,7 +87,10 @@
 								ref.quaternion.copy(quaternion)
 								entity.set(traits.Pose, pose)
 							} else if (box && mode === 'scale') {
-								entity.set(traits.Box, ref.scale)
+								box.x *= ref.scale.x
+								box.y *= ref.scale.y
+								box.z *= ref.scale.z
+								entity.set(traits.Box, box)
 								ref.scale.setScalar(1)
 							}
 						}}

package/dist/components/overlay/Details.svelte

@@ -21,7 +21,7 @@
 		useFocusedObject3d,
 		useSelectedObject3d,
 	} from '../../hooks/useSelection.svelte'
-	import { useFrames } from '../../hooks/useFrames.svelte'
+	import { useConfigFrames } from '../../hooks/useConfigFrames.svelte'
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
@@ -37,7 +37,7 @@
 	const world = useWorld()
 	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
-	const frames = useFrames()
+	const configFrames = useConfigFrames()
 	const partConfig = usePartConfig()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
@@ -402,7 +402,7 @@
 					{@render ParentFrame({
 						ariaLabel: 'parent frame name',
 						value: parent.current ?? 'world',
-						options: frames.getParentFrameOptions(name.current ?? ''),
+						options: configFrames.getParentFrameOptions(name.current ?? ''),
 						onChange: (value) => {
 							detailConfigUpdater.setFrameParent(entity, value)
 						},

package/dist/components/overlay/FloatingPanel.svelte

@@ -10,6 +10,7 @@
 		defaultSize?: { width: number; height: number }
 		defaultPosition?: { x: number; y: number }
 		exitable?: boolean
+		persistRect?: boolean
 		strategy?: 'absolute' | 'fixed'
 		isOpen?: boolean
 		children: Snippet
@@ -19,6 +20,7 @@
 		title = '',
 		defaultSize = { width: 700, height: 500 },
 		exitable = true,
+		persistRect = true,
 		isOpen = $bindable(false),
 		children,
 		...props
@@ -30,6 +32,7 @@
 		defaultSize,
 		resizable: false,
 		allowOverflow: false,
+		persistRect,
 		open: isOpen,
 		...props,
 	}))

package/dist/components/overlay/FloatingPanel.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
         y: number;
     };
     exitable?: boolean;
+    persistRect?: boolean;
     strategy?: 'absolute' | 'fixed';
     isOpen?: boolean;
     children: Snippet;

package/dist/components/overlay/Logs.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+	import { useLogs } from '../../hooks/useLogs.svelte'
+	import FloatingPanel from './FloatingPanel.svelte'
+	import DashboardButton from './dashboard/Button.svelte'
+	import { PersistedState } from 'runed'
+
+	const logs = useLogs()
+
+	const isOpen = new PersistedState('logs-is-open', false)
+</script>
+
+<Portal id="dashboard">
+	<fieldset class="relative">
+		<DashboardButton
+			active
+			icon="article"
+			description="Logs"
+			onclick={() => {
+				isOpen.current = !isOpen.current
+			}}
+		/>
+		{#if logs.warnings.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 w-4 rounded-full bg-yellow-700 text-center text-[10px] text-white"
+			>
+				{logs.warnings.length}
+			</span>
+		{/if}
+
+		{#if logs.errors.length > 0}
+			<span
+				class="absolute z-4 -mt-1.5 -ml-1.5 h-4 rounded-full bg-red-700 px-1.25 text-center text-[10px] text-white"
+			>
+				{logs.errors.length}
+			</span>
+		{/if}
+	</fieldset>
+</Portal>
+
+<FloatingPanel
+	title="Logs"
+	bind:isOpen={isOpen.current}
+	defaultSize={{ width: 240, height: 315 }}
+>
+	<div class="flex h-70 flex-col gap-2 overflow-auto p-3 text-xs">
+		{#each logs.current as log (log.uuid)}
+			<div>
+				<div class="flex flex-wrap items-center gap-1.5">
+					<div
+						class={[
+							'h-2 w-2 rounded-full',
+							{
+								'bg-danger-dark': log.level === 'error',
+								'bg-amber-300': log.level === 'warn',
+								'bg-blue-400': log.level === 'info',
+							},
+						]}
+					></div>
+					<div class="text-subtle-2">{log.timestamp}</div>
+				</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
+		{/each}
+	</div>
+</FloatingPanel>

package/dist/components/overlay/left-pane/TreeContainer.svelte

@@ -3,7 +3,6 @@
 	import Tree from './Tree.svelte'
 	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
-	import Logs from './Logs.svelte'
 	import AddFrames from './AddFrames.svelte'
 	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
 	import { usePartID } from '../../../hooks/usePartID.svelte'
@@ -82,6 +81,4 @@
 	{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
 		<AddFrames />
 	{/if}
-
-	<Logs />
 </div>

package/dist/hooks/use3DModels.svelte.js

@@ -42,7 +42,6 @@ export const provide3DModels = (partID) => {
                         gltfModel.scene.traverse((object) => {
                             if (isInstanceOf(object, 'Mesh')) {
                                 const { material } = object;
-                                console.log(material);
                                 if (isInstanceOf(material, 'MeshStandardMaterial')) {
                                     material.roughness = 0.3;
                                     material.metalness = 0.1;

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

@@ -0,0 +1,9 @@
+import { Transform } from '@viamrobotics/sdk';
+interface ConfigFramesContext {
+    unsetFrames: string[];
+    current: Record<string, Transform>;
+    getParentFrameOptions: (componentName: string) => string[];
+}
+export declare const provideConfigFrames: () => void;
+export declare const useConfigFrames: () => ConfigFramesContext;
+export {};

package/dist/hooks/useConfigFrames.svelte.js

@@ -0,0 +1,92 @@
+import { useEnvironment } from './useEnvironment.svelte';
+import { usePartConfig } from './usePartConfig.svelte';
+import { createTransformFromFrame } from '../frame';
+import { Transform } from '@viamrobotics/sdk';
+import { getContext, setContext } from 'svelte';
+const key = Symbol('config-frames-context');
+export const provideConfigFrames = () => {
+    const environment = useEnvironment();
+    const partConfig = usePartConfig();
+    $effect(() => {
+        if (partConfig.isDirty) {
+            environment.current.viewerMode = 'edit';
+        }
+        else {
+            environment.current.viewerMode = 'monitor';
+        }
+    });
+    const [configFrames, configUnsetFrameNames] = $derived.by(() => {
+        const { components } = partConfig.current;
+        const results = {};
+        const unsetResults = [];
+        for (const { name, frame } of components ?? []) {
+            if (!frame) {
+                unsetResults.push(name);
+                continue;
+            }
+            results[name] = createTransformFromFrame(name, frame);
+        }
+        return [results, unsetResults];
+    });
+    const [fragmentFrames, fragmentUnsetFrameNames] = $derived.by(() => {
+        const { fragment_mods: fragmentMods = [] } = partConfig.current;
+        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
+        const results = {};
+        const unsetResults = [];
+        // deal with fragment defined components
+        for (const fragmentComponentName of fragmentDefinedComponents || []) {
+            const fragmentId = partConfig.componentNameToFragmentId[fragmentComponentName];
+            const fragmentMod = fragmentMods?.find((mod) => mod.fragment_id === fragmentId);
+            if (!fragmentMod) {
+                continue;
+            }
+            const setComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$set']?.[`components.${fragmentComponentName}.frame`] !== undefined);
+            const unsetComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$unset']?.[`components.${fragmentComponentName}.frame`] !== undefined);
+            if (setComponentModIndex < unsetComponentModIndex) {
+                unsetResults.push(fragmentComponentName);
+            }
+            else if (unsetComponentModIndex < setComponentModIndex) {
+                const frameData = fragmentMod.mods[setComponentModIndex]['$set'][`components.${fragmentComponentName}.frame`];
+                results[fragmentComponentName] = createTransformFromFrame(fragmentComponentName, frameData);
+            }
+        }
+        return [results, unsetResults];
+    });
+    const frames = $derived.by(() => {
+        const result = {
+            ...configFrames,
+            ...fragmentFrames,
+        };
+        return result;
+    });
+    const frameValues = $derived(Object.values(frames));
+    const getParentFrameOptions = (componentName) => {
+        const validFrames = new Set(frameValues.map((frame) => frame.referenceFrame));
+        validFrames.add('world');
+        const frameNameQueue = [componentName];
+        while (frameNameQueue.length > 0) {
+            const frameName = frameNameQueue.shift();
+            if (frameName) {
+                validFrames.delete(frameName);
+                const filteredFrames = frameValues.filter((frame) => frame.poseInObserverFrame?.referenceFrame === frameName);
+                for (const frame of filteredFrames) {
+                    frameNameQueue.push(frame.referenceFrame);
+                }
+            }
+        }
+        return Array.from(validFrames);
+    };
+    const unsetFrames = $derived([...new Set([...configUnsetFrameNames, ...fragmentUnsetFrameNames])]);
+    setContext(key, {
+        getParentFrameOptions,
+        get unsetFrames() {
+            return unsetFrames;
+        },
+        get current() {
+            return frames;
+        },
+    });
+};
+export const useConfigFrames = () => {
+    return getContext(key);
+};

package/dist/hooks/useFramelessComponents.svelte.js

@@ -12,7 +12,7 @@ export const provideFramelessComponents = () => {
             .map((component) => component.name) ?? [];
         const fragmentComponentsWithNoFrame = [];
         for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentId)) {
-            if (frames.current.find((frame) => frame.transform.referenceFrame === fragmentComponentName)) {
+            if (frames.current.find((frame) => frame.referenceFrame === fragmentComponentName)) {
                 continue;
             }
             fragmentComponentsWithNoFrame.push(fragmentComponentName);

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

@@ -1,11 +1,6 @@
 import { Transform } from '@viamrobotics/sdk';
-interface FrameTransform {
-    type: 'machine' | 'config' | 'fragment';
-    transform: Transform;
-}
 interface FramesContext {
-    current: FrameTransform[];
-    getParentFrameOptions: (componentName: string) => string[];
+    current: Transform[];
 }
 export declare const provideFrames: (partID: () => string) => void;
 export declare const useFrames: () => FramesContext;

package/dist/hooks/useFrames.svelte.js

@@ -1,27 +1,28 @@
 import { getContext, setContext, untrack } from 'svelte';
-import { Transform } from '@viamrobotics/sdk';
-import { useRobotClient, createRobotQuery, useMachineStatus } from '@viamrobotics/svelte-sdk';
+import { MachineConnectionEvent, Transform } from '@viamrobotics/sdk';
+import { useRobotClient, createRobotQuery, useMachineStatus, useConnectionStatus, } from '@viamrobotics/svelte-sdk';
 import { useLogs } from './useLogs.svelte';
 import { resourceNameToColor } from '../color';
-import { createTransformFromFrame } from '../frame';
-import { usePartConfig } from './usePartConfig.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
 import { createPose } from '../transform';
 import { useResourceByName } from './useResourceByName.svelte';
 import { traits, useWorld } from '../ecs';
+import { useConfigFrames } from './useConfigFrames.svelte';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
+    const configFrames = useConfigFrames();
     const environment = useEnvironment();
     const world = useWorld();
     const resourceByName = useResourceByName();
     const client = useRobotClient(partID);
+    const connectionStatus = useConnectionStatus(partID);
     const machineStatus = useMachineStatus(partID);
     const logs = useLogs();
+    const isEditMode = $derived(environment.current.viewerMode === 'edit');
     const query = createRobotQuery(client, 'frameSystemConfig', () => ({
-        enabled: partID() !== '' && environment.current.viewerMode === 'monitor',
+        enabled: partID() !== '' && !isEditMode,
     }));
     const revision = $derived(machineStatus.current?.config?.revision);
-    const partConfig = usePartConfig();
     $effect(() => {
         if (query.isFetching) {
             logs.add('Fetching frames...');
@@ -30,131 +31,40 @@ export const provideFrames = (partID) => {
             logs.add(`Frames: ${query.error.message}`, 'error');
         }
     });
-    $effect(() => {
-        if (partConfig.isDirty) {
-            environment.current.viewerMode = 'edit';
-        }
-        else {
-            environment.current.viewerMode = 'monitor';
-        }
-    });
-    const machineFrames = $derived.by(() => {
+    const frames = $derived.by(() => {
         const frames = {};
         for (const { frame } of query.data ?? []) {
             if (frame === undefined) {
                 continue;
             }
-            frames[frame.referenceFrame] = {
-                type: 'machine',
-                transform: frame,
-            };
+            frames[frame.referenceFrame] = frame;
         }
-        return frames;
-    });
-    const [configFrames, configUnsetFrameNames] = $derived.by(() => {
-        const { components } = partConfig.current;
-        const results = {};
-        const unsetResults = [];
-        for (const { name, frame } of components ?? []) {
-            if (!frame) {
-                unsetResults.push(name);
-                continue;
-            }
-            results[name] = {
-                type: 'config',
-                transform: createTransformFromFrame(name, frame),
+        if (isEditMode || connectionStatus.current === MachineConnectionEvent.DISCONNECTED) {
+            const mergedFrames = {
+                ...frames,
+                ...configFrames.current,
             };
+            /**
+             * Remove frames that have just been deleted locally for optimistic updates,
+             * or frames that have been removed by fragment overrides
+             */
+            for (const name of configFrames.unsetFrames) {
+                delete mergedFrames[name];
+            }
+            return mergedFrames;
         }
-        return [results, unsetResults];
-    });
-    const [fragmentFrames, fragmentUnsetFrameNames] = $derived.by(() => {
-        const { fragment_mods: fragmentMods = [] } = partConfig.current;
-        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
-        const results = {};
-        const unsetResults = [];
-        // deal with fragment defined components
-        for (const fragmentComponentName of fragmentDefinedComponents || []) {
-            const fragmentId = partConfig.componentNameToFragmentId[fragmentComponentName];
-            const fragmentMod = fragmentMods?.find((mod) => mod.fragment_id === fragmentId);
-            if (!fragmentMod) {
-                continue;
-            }
-            const setComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$set']?.[`components.${fragmentComponentName}.frame`] !== undefined);
-            const unsetComponentModIndex = fragmentMod.mods.findLastIndex((mod) => mod['$unset']?.[`components.${fragmentComponentName}.frame`] !== undefined);
-            if (setComponentModIndex < unsetComponentModIndex) {
-                unsetResults.push(fragmentComponentName);
-            }
-            else if (unsetComponentModIndex < setComponentModIndex) {
-                const frameData = fragmentMod.mods[setComponentModIndex]['$set'][`components.${fragmentComponentName}.frame`];
-                results[fragmentComponentName] = {
-                    type: 'fragment',
-                    transform: createTransformFromFrame(fragmentComponentName, frameData),
-                };
-            }
-        }
-        return [results, unsetResults];
-    });
-    const frames = $derived.by(() => {
-        const result = {
-            ...machineFrames,
-            ...configFrames,
-            ...fragmentFrames,
-        };
-        // Remove frames that have just been deleted locally for optimistic updates
-        for (const name of configUnsetFrameNames) {
-            delete result[name];
-        }
-        // Remove frames that have been removed by fragment overrides
-        for (const name of fragmentUnsetFrameNames) {
-            delete result[name];
-        }
-        return result;
+        /**
+         * If we're not in edit mode and we have a robot connection,
+         * we only use frames reported by the machine
+         *
+         */
+        return frames;
     });
     const current = $derived(Object.values(frames));
     const entities = new Map();
     $effect.pre(() => {
         if (revision) {
-            untrack(async () => {
-                await query.refetch();
-                for (const [name, machineFrame] of Object.entries(machineFrames)) {
-                    if (machineFrame === undefined) {
-                        continue;
-                    }
-                    const existing = entities.get(name);
-                    if (existing) {
-                        const pose = createPose(machineFrame.transform.poseInObserverFrame?.pose);
-                        existing.set(traits.Pose, pose);
-                        if (environment.current.viewerMode === 'monitor') {
-                            // if we are in monitor mode, we want the network pose to overwrite any leftover edited poses
-                            existing.set(traits.EditedPose, pose);
-                        }
-                    }
-                }
-            });
-        }
-    });
-    $effect.pre(() => {
-        for (const [name, configFrame] of Object.entries(configFrames)) {
-            if (configFrame === undefined) {
-                continue;
-            }
-            const existing = entities.get(name);
-            if (existing) {
-                const pose = createPose(configFrame.transform.poseInObserverFrame?.pose);
-                existing.set(traits.EditedPose, pose);
-            }
-        }
-    });
-    $effect.pre(() => {
-        for (const [name, fragmentFrame] of Object.entries(fragmentFrames)) {
-            if (fragmentFrame === undefined) {
-                continue;
-            }
-            const existing = entities.get(name);
-            if (existing) {
-                const pose = createPose(fragmentFrame.transform.poseInObserverFrame?.pose);
-                existing.set(traits.EditedPose, pose);
-            }
+            untrack(() => query.refetch());
         }
     });
     $effect.pre(() => {
@@ -162,13 +72,13 @@ export const provideFrames = (partID) => {
             if (frame === undefined) {
                 continue;
             }
-            const name = frame.transform.referenceFrame;
-            const parent = frame.transform.poseInObserverFrame?.referenceFrame;
-            const pose = createPose(frame.transform.poseInObserverFrame?.pose);
-            const center = frame.transform.physicalObject?.center
-                ? createPose(frame.transform.physicalObject.center)
+            const name = frame.referenceFrame;
+            const parent = frame.poseInObserverFrame?.referenceFrame;
+            const pose = createPose(frame.poseInObserverFrame?.pose);
+            const center = frame.physicalObject?.center
+                ? createPose(frame.physicalObject.center)
                 : undefined;
-            const resourceName = resourceByName.current[frame.transform.referenceFrame];
+            const resourceName = resourceByName.current[frame.referenceFrame];
             const color = resourceNameToColor(resourceName);
             const existing = entities.get(name);
             if (existing) {
@@ -188,10 +98,11 @@ export const provideFrames = (partID) => {
                     existing.set(traits.Center, center);
                 }
                 existing.remove(traits.Box, traits.Sphere, traits.BufferGeometry, traits.Capsule);
-                if (frame.transform.physicalObject) {
-                    const geometry = traits.Geometry(frame.transform.physicalObject);
+                if (frame.physicalObject) {
+                    const geometry = traits.Geometry(frame.physicalObject);
                     existing.add(geometry);
                 }
+                existing.set(traits.EditedPose, pose);
                 continue;
             }
             const entityTraits = [
@@ -210,8 +121,8 @@ export const provideFrames = (partID) => {
             if (center) {
                 entityTraits.push(traits.Center(center));
             }
-            if (frame.transform.physicalObject) {
-                entityTraits.push(traits.Geometry(frame.transform.physicalObject));
+            if (frame.physicalObject) {
+                entityTraits.push(traits.Geometry(frame.physicalObject));
             }
             const entity = world.spawn(...entityTraits);
             entities.set(name, entity);
@@ -224,24 +135,7 @@ export const provideFrames = (partID) => {
             }
         }
     });
-    const getParentFrameOptions = (componentName) => {
-        const validFrames = new Set(current.map((frame) => frame.transform.referenceFrame));
-        validFrames.add('world');
-        const frameNameQueue = [componentName];
-        while (frameNameQueue.length > 0) {
-            const frameName = frameNameQueue.shift();
-            if (frameName) {
-                validFrames.delete(frameName);
-                const frames = current.filter((frame) => frame.transform.poseInObserverFrame?.referenceFrame === frameName);
-                for (const frame of frames) {
-                    frameNameQueue.push(frame.transform.referenceFrame);
-                }
-            }
-        }
-        return Array.from(validFrames);
-    };
     setContext(key, {
-        getParentFrameOptions,
         get current() {
             return current;
         },

package/dist/hooks/usePartConfig.svelte.js

@@ -126,7 +126,7 @@ export const providePartConfig = (partID, params) => {
     };
     const deletePartFrame = (componentName) => {
         const newConfig = getCurrent();
-        const component = newConfig?.components?.find((comp) => comp.name === componentName);
+        const component = newConfig?.components?.find(({ name }) => name === componentName);
         if (!component) {
             return;
         }

package/dist/hooks/useVisibility.svelte.js

@@ -1,20 +1,8 @@
-import { get, set } from 'idb-keyval';
 import { getContext, setContext } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 const key = Symbol('object-visibility-context');
-const idbKey = 'object-visibility';
 export const provideVisibility = () => {
     const map = new SvelteMap();
-    get(idbKey).then((entries) => {
-        if (entries) {
-            for (const [key, value] of entries) {
-                map.set(key, value);
-            }
-        }
-    });
-    $effect(() => {
-        set(idbKey, [...map.entries()]);
-    });
     setContext(key, map);
 };
 export const useVisibility = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",

package/dist/components/overlay/left-pane/Logs.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-	import { useLogs } from '../../../hooks/useLogs.svelte'
-	import Drawer from './Drawer.svelte'
-
-	const logs = useLogs()
-</script>
-
-<Drawer name="Logs">
-	{#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
-						class={[
-							'h-2 w-2 rounded-full',
-							{
-								'bg-danger-dark': log.level === 'error',
-								'bg-amber-300': log.level === 'warn',
-								'bg-blue-400': log.level === 'info',
-							},
-						]}
-					></div>
-					<div class="text-subtle-2">{log.timestamp}</div>
-				</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
-		{/each}
-	</div>
-</Drawer>