@viamrobotics/motion-tools 1.29.0 → 1.30.0

package/dist/components/App.svelte

@@ -3,7 +3,6 @@
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
 
-	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import { Canvas } from '@threlte/core'
 	import { PortalTarget } from '@threlte/extras'
 	import { useXR } from '@threlte/xr'
@@ -11,6 +10,8 @@
 	import { primeTheme } from '@viamrobotics/tweakpane-config'
 	import { ThemeUtils } from 'svelte-tweakpane-ui'
 
+	import type { FragmentInfo } from '../hooks/usePartConfig.svelte'
+
 	import Controls from './overlay/controls/Controls.svelte'
 	import Dashboard from './overlay/dashboard/Dashboard.svelte'
 	import Details from './overlay/Details.svelte'
@@ -40,7 +41,7 @@
 	interface LocalConfigProps {
 		current: Struct
 		isDirty: boolean
-		componentToFragId: Record<string, string>
+		componentNameToFragmentInfo: Record<string, FragmentInfo>
 		setLocalPartConfig: (config: Struct) => void
 	}
 
@@ -111,18 +112,11 @@
 	})
 </script>
 
-{#if settings.current.enableQueryDevtools}
-	<SvelteQueryDevtools initialIsOpen />
-{/if}
-
 <div
 	class="relative h-full w-full overflow-hidden dark:bg-white"
 	bind:this={root}
 >
-	<Canvas
-		renderMode="on-demand"
-		dpr={[1, 2]}
-	>
+	<Canvas renderMode="on-demand">
 		<SceneProviders>
 			{#snippet children({ focus })}
 				<Scene>

package/dist/components/App.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Struct } from '@viamrobotics/sdk';
 import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
+import type { FragmentInfo } from '../hooks/usePartConfig.svelte';
 import { type CameraPose } from '../hooks/useControls.svelte';
 interface LocalConfigProps {
     current: Struct;
     isDirty: boolean;
-    componentToFragId: Record<string, string>;
+    componentNameToFragmentInfo: Record<string, FragmentInfo>;
     setLocalPartConfig: (config: Struct) => void;
 }
 interface Props {

package/dist/components/Entities/Arrows/Arrows.svelte

@@ -20,7 +20,7 @@
 
 	const { invalidate } = useThrelte()
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const events = useEntityEvents(() => entity)

package/dist/components/Entities/Frame.svelte

@@ -39,7 +39,7 @@ Renders a Viam Frame object
 	const entityColor = useTrait(() => entity, traits.Color)
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const center = useTrait(() => entity, traits.Center)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 
 	const events = useEntityEvents(() => entity)
 

package/dist/components/Entities/GLTF.svelte

@@ -35,7 +35,7 @@
 
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const gltfTrait = useTrait(() => entity, traits.GLTF)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 	const events = useEntityEvents(() => entity)
 

package/dist/components/Entities/Geometry.svelte

@@ -33,7 +33,7 @@ Renders a Viam Geometry object
 	const name = useTrait(() => entity, traits.Name)
 	const worldMatrix = useTrait(() => entity, traits.WorldMatrix)
 	const center = useTrait(() => entity, traits.Center)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 
 	const model = $derived.by(() => {
 		if (!settings.current.renderArmModels.includes('model')) {

package/dist/components/Entities/Line.svelte

@@ -34,7 +34,7 @@
 	const renderOrder = useTrait(() => entity, traits.RenderOrder)
 	const opacity = useTrait(() => entity, traits.Opacity)
 	const screenSpace = useTrait(() => entity, traits.ScreenSpace)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 
 	const events = useEntityEvents(() => entity)

package/dist/components/Entities/Points.svelte

@@ -28,7 +28,7 @@
 	const colors = useTrait(() => entity, traits.Colors)
 	const entityPointSize = useTrait(() => entity, traits.PointSize)
 	const opacity = useTrait(() => entity, traits.Opacity)
-	const invisible = useTrait(() => entity, traits.Invisible)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const showAxesHelper = useTrait(() => entity, traits.ShowAxesHelper)
 	const renderOrder = useTrait(() => entity, traits.RenderOrder)
 	const materialProps = useTrait(() => entity, traits.Material)

package/dist/components/Entities/hooks/useEntityEvents.svelte.js

@@ -18,7 +18,7 @@ export const useEntityEvents = (entity) => {
     const selectedEntity = useSelectedEntity();
     const focusedEntity = useFocusedEntity();
     const cursor = useCursor();
-    const invisible = useTrait(entity, traits.Invisible);
+    const invisible = useTrait(entity, traits.InheritedInvisible);
     const onpointerenter = (event) => {
         if (invisible.current)
             return;

package/dist/components/SceneProviders.svelte

@@ -11,6 +11,7 @@
 	import { provideFramelessComponents } from '../hooks/useFramelessComponents.svelte'
 	import { provideFrames } from '../hooks/useFrames.svelte'
 	import { provideGeometries } from '../hooks/useGeometries.svelte'
+	import { provideInheritedInvisible } from '../hooks/useInheritedInvisible.svelte'
 	import { provideLinkedEntities } from '../hooks/useLinked.svelte'
 	import { provideLogs } from '../hooks/useLogs.svelte'
 	import { usePartID } from '../hooks/usePartID.svelte'
@@ -36,6 +37,7 @@
 
 	provideHierarchy()
 	provideWorldMatrix()
+	provideInheritedInvisible()
 	provideOrigin()
 
 	provideRelationships()

package/dist/components/SelectedTransformControls.svelte

@@ -8,6 +8,7 @@
 	import { useTransformControls } from '../hooks/useControls.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
 	import { useFrameEditSession } from '../hooks/useFrameEditSession.svelte'
+	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 	import {
@@ -21,6 +22,7 @@
 
 	const settings = useSettings()
 	const environment = useEnvironment()
+	const partConfig = usePartConfig()
 	const transformControls = useTransformControls()
 	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
@@ -29,14 +31,20 @@
 	const mode = $derived(settings.current.transformMode)
 	const entity = $derived(selectedEntity.current)
 	const transformable = useTrait(() => entity, traits.Transformable)
+	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const configMatrix = useTrait(() => entity, traits.Matrix)
 	const liveMatrix = useTrait(() => entity, traits.LiveMatrix)
 	const box = useTrait(() => entity, traits.Box)
 	const sphere = useTrait(() => entity, traits.Sphere)
 	const capsule = useTrait(() => entity, traits.Capsule)
+	const name = useTrait(() => entity, traits.Name)
 	const hasScalableGeometry = $derived(
 		box.current !== undefined || sphere.current !== undefined || capsule.current !== undefined
 	)
+	const isFragmentComponentWithVariables = $derived(
+		name.current &&
+			Object.keys(partConfig.componentNameToFragmentInfo[name.current]?.variables ?? {}).length > 0
+	)
 
 	// Mesh sets name={entity} on its inner mesh, so useSelectedObject3d resolves
 	// to that mesh — not the parent Frame Group we actually want to drive. Walk
@@ -241,7 +249,7 @@
 	}
 </script>
 
-{#if ref && entity && activeMode}
+{#if ref && entity && activeMode && !isFragmentComponentWithVariables && !invisible.current}
 	{#key entity}
 		<TransformControls
 			object={ref}

package/dist/components/overlay/AddFrames.svelte

@@ -22,7 +22,7 @@
 	<Portal id="dashboard">
 		<fieldset>
 			<DashboardButton
-				active
+				active={isOpen}
 				icon="axis-arrow"
 				description="Add frames"
 				onclick={() => {

package/dist/components/overlay/Details.svelte

@@ -109,7 +109,13 @@
 
 	const isFrameNode = $derived(!!framesAPI.current)
 	const isGeometry = $derived(!!geometriesAPI.current)
-	const showEditFrameOptions = $derived(isFrameNode && partConfig.hasEditPermissions)
+	const isFragmentComponentWithVariables = $derived(
+		name.current &&
+			Object.keys(partConfig.componentNameToFragmentInfo[name.current]?.variables ?? {}).length > 0
+	)
+	const showEditFrameOptions = $derived(
+		isFrameNode && partConfig.hasEditPermissions && !isFragmentComponentWithVariables
+	)
 	const showRelationshipOptions = $derived(points.current || arrows.current)
 	const resourceName = $derived(name.current ? resourceByName.current[name.current] : undefined)
 	const displayType = $derived(isFrameNode ? resourceName?.subtype : isGeometry ? 'geometry' : '')
@@ -406,6 +412,16 @@
 
 		<div class="border-medium -mx-2 w-[100%+0.5rem] border-b"></div>
 
+		{#if isFragmentComponentWithVariables}
+			<p
+				class="mt-2 rounded border-l-4 border-yellow-600 bg-yellow-50 px-2 py-1.5 text-yellow-900"
+				data-testid="fragment-variables-warning"
+				role="status"
+			>
+				This component is from a fragment with variables, editing frames in 3D scene is disabled
+			</p>
+		{/if}
+
 		<h3
 			class="text-subtle-2 flex justify-between py-2"
 			data-testid="details-header"

package/dist/components/overlay/Logs.svelte

@@ -21,7 +21,7 @@
 <Portal id="dashboard">
 	<fieldset class="relative">
 		<DashboardButton
-			active
+			active={isOpen.current}
 			icon="article"
 			description="Logs"
 			onclick={() => {

package/dist/components/overlay/dashboard/Button.svelte

@@ -34,7 +34,7 @@
 		class={[
 			className,
 			'relative block rounded-md border',
-			active ? 'border-gray-5 text-gray-8 z-4 bg-white' : 'bg-light border-medium text-disabled',
+			active ? 'z-4 border-[#666] bg-[#666] text-white' : 'border-gray-5 text-gray-8 bg-white',
 		]}
 		aria-describedby={tooltipID}
 	>

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

@@ -20,6 +20,7 @@
 
 	const name = useTrait(() => node.entity, traits.Name)
 	const invisible = useTrait(() => node.entity, traits.Invisible)
+	const inheritedInvisible = useTrait(() => node.entity, traits.InheritedInvisible)
 	const chunkProgress = useTrait(() => node.entity, traits.ChunkProgress)
 	const loading = $derived(chunkProgress.current !== undefined)
 	const progress = $derived(
@@ -55,7 +56,7 @@
 		class={[
 			'w-full',
 			{
-				'text-disabled': invisible.current,
+				'text-disabled': inheritedInvisible.current,
 				'bg-medium': nodeState.selected,
 				sticky: true,
 			},
@@ -129,7 +130,7 @@
 	<div
 		class={{
 			'flex justify-between': true,
-			'text-disabled': invisible.current,
+			'text-disabled': inheritedInvisible.current,
 			'bg-medium': nodeState.selected,
 		}}
 		{...api.getItemProps(nodeProps)}

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

@@ -62,7 +62,7 @@
 <Portal id="dashboard">
 	<fieldset>
 		<DashboardButton
-			active
+			active={isOpen.current}
 			icon="cog"
 			description="Settings"
 			onclick={() => {
@@ -278,10 +278,6 @@
 
 {#snippet Stats()}
 	<div class="flex w-full flex-col gap-2.5 text-xs">
-		<label class="flex items-center justify-between gap-2">
-			Query devtools <Switch bind:on={settings.current.enableQueryDevtools} />
-		</label>
-
 		<label class="flex items-center justify-between gap-2">
 			Render stats <Switch bind:on={settings.current.renderStats} />
 		</label>

package/dist/ecs/traits.d.ts

@@ -65,6 +65,13 @@ export declare const InstancedMatrix: import("koota").Trait<() => {
 }>;
 export declare const Hovered: import("koota").Trait<() => boolean>;
 export declare const Invisible: import("koota").Trait<() => boolean>;
+/**
+ * True when the entity itself, or any of its parents up the `ChildOf`
+ * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;
+ * don't add or remove it by hand — toggle `Invisible` and the cascade
+ * follows.
+ */
+export declare const InheritedInvisible: import("koota").Trait<() => boolean>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances

package/dist/ecs/traits.js

@@ -61,6 +61,13 @@ export const InstancedMatrix = trait(() => ({
 }));
 export const Hovered = trait(() => true);
 export const Invisible = trait(() => true);
+/**
+ * True when the entity itself, or any of its parents up the `ChildOf`
+ * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;
+ * don't add or remove it by hand — toggle `Invisible` and the cascade
+ * follows.
+ */
+export const InheritedInvisible = trait(() => true);
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances

package/dist/hooks/useConfigFrames.svelte.js

@@ -25,12 +25,12 @@ export const provideConfigFrames = () => {
     });
     const [fragmentFrames, fragmentUnsetFrameNames] = $derived.by(() => {
         const { fragment_mods: fragmentMods = [] } = partConfig.current;
-        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentId);
+        const fragmentDefinedComponents = Object.keys(partConfig.componentNameToFragmentInfo);
         const results = {};
         const unsetResults = [];
         // deal with fragment defined components
         for (const fragmentComponentName of fragmentDefinedComponents || []) {
-            const fragmentId = partConfig.componentNameToFragmentId[fragmentComponentName];
+            const fragmentId = partConfig.componentNameToFragmentInfo[fragmentComponentName].id;
             const fragmentMod = fragmentMods?.find((mod) => mod.fragment_id === fragmentId);
             if (!fragmentMod) {
                 continue;
@@ -64,7 +64,7 @@ export const provideConfigFrames = () => {
          * any whose frame the user has $unset.
          */
         const unsetFragmentNames = new Set(fragmentUnsetFrameNames);
-        for (const name of Object.keys(partConfig.componentNameToFragmentId)) {
+        for (const name of Object.keys(partConfig.componentNameToFragmentInfo)) {
             if (!unsetFragmentNames.has(name)) {
                 validFrames.add(name);
             }

package/dist/hooks/useFramelessComponents.svelte.js

@@ -11,7 +11,7 @@ export const provideFramelessComponents = () => {
             ?.filter((component) => component.frame === undefined)
             .map((component) => component.name) ?? [];
         const fragmentComponentsWithNoFrame = new Set(partComponentsWIthNoFrame);
-        for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentId)) {
+        for (const fragmentComponentName of Object.keys(partConfig.componentNameToFragmentInfo)) {
             if (frames.current.some((frame) => frame.referenceFrame === fragmentComponentName)) {
                 continue;
             }

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

@@ -0,0 +1,3 @@
+import { type World } from 'koota';
+export declare const addInheritedInvisibleListeners: (world: World) => () => void;
+export declare const provideInheritedInvisible: () => void;

package/dist/hooks/useInheritedInvisible.svelte.js

@@ -0,0 +1,89 @@
+import {} from 'koota';
+import { ChildOf } from '../ecs/relations';
+import { InheritedInvisible, Invisible } from '../ecs/traits';
+import { useWorld } from '../ecs/useWorld';
+/**
+ * Walks up `ChildOf` and returns true if the entity itself or any
+ * ancestor has `Invisible`. Memoizes via `cache` so siblings in the
+ * same flush reuse a parent's result.
+ */
+const hasInherited = (entity, cache) => {
+    const cached = cache.get(entity);
+    if (cached !== undefined)
+        return cached;
+    if (!entity.isAlive())
+        return false;
+    if (entity.has(Invisible)) {
+        cache.set(entity, true);
+        return true;
+    }
+    const parent = entity.targetFor(ChildOf);
+    const inherited = parent && parent.isAlive() ? hasInherited(parent, cache) : false;
+    cache.set(entity, inherited);
+    return inherited;
+};
+const flushDirty = (world, dirty) => {
+    if (dirty.size === 0)
+        return;
+    const cache = new Map();
+    const allEntities = new Set();
+    const collectChildren = (entity) => {
+        if (allEntities.has(entity))
+            return;
+        allEntities.add(entity);
+        for (const child of world.query(ChildOf(entity))) {
+            collectChildren(child);
+        }
+    };
+    for (const entity of dirty) {
+        collectChildren(entity);
+    }
+    dirty.clear();
+    for (const entity of allEntities) {
+        if (!entity.isAlive()) {
+            continue;
+        }
+        const hasInheritedTrait = hasInherited(entity, cache);
+        const hasTrait = entity.has(InheritedInvisible);
+        if (hasInheritedTrait && !hasTrait) {
+            entity.add(InheritedInvisible);
+        }
+        else if (!hasInheritedTrait && hasTrait) {
+            entity.remove(InheritedInvisible);
+        }
+    }
+};
+export const addInheritedInvisibleListeners = (world) => {
+    const dirty = new Set();
+    let scheduled = false;
+    const enqueue = (entity) => {
+        dirty.add(entity);
+        if (scheduled)
+            return;
+        scheduled = true;
+        // Microtask-deferred so a burst of changes is grouped into one subtree walk.
+        queueMicrotask(() => {
+            scheduled = false;
+            flushDirty(world, dirty);
+        });
+    };
+    for (const entity of world.query(Invisible)) {
+        enqueue(entity);
+    }
+    const unsubs = [
+        world.onAdd(Invisible, enqueue),
+        world.onRemove(Invisible, enqueue),
+        world.onAdd(ChildOf, enqueue),
+        world.onChange(ChildOf, enqueue),
+        world.onRemove(ChildOf, enqueue),
+    ];
+    return () => {
+        for (const unsub of unsubs) {
+            unsub();
+        }
+    };
+};
+export const provideInheritedInvisible = () => {
+    const world = useWorld();
+    $effect(() => addInheritedInvisibleListeners(world));
+};

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

@@ -11,12 +11,16 @@ export interface PartConfig {
         mods: any[];
     }[];
 }
+export type FragmentInfo = {
+    id: string;
+    variables: Record<string, string>;
+};
 interface PartConfigContext {
     current: PartConfig;
     isDirty: boolean;
     hasPendingSave: boolean;
     hasEditPermissions: boolean;
-    componentNameToFragmentId: Record<string, string>;
+    componentNameToFragmentInfo: Record<string, FragmentInfo>;
     updateFrame: (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']) => void;
     deleteFrame: (componentName: string) => void;
     createFrame: (componentName: string) => void;
@@ -30,7 +34,7 @@ export declare const usePartConfig: () => PartConfigContext;
 interface AppEmbeddedPartConfigProps {
     current: Struct;
     isDirty: boolean;
-    componentToFragId: Record<string, string>;
+    componentNameToFragmentInfo: Record<string, FragmentInfo>;
     setLocalPartConfig: (config: Struct) => void;
 }
 export {};

package/dist/hooks/usePartConfig.svelte.js

@@ -155,8 +155,8 @@ export const providePartConfig = (partID, params) => {
         get current() {
             return current;
         },
-        get componentNameToFragmentId() {
-            return config.componentNameToFragmentId;
+        get componentNameToFragmentInfo() {
+            return config.componentNameToFragmentInfo;
         },
         get isDirty() {
             return config.isDirty;
@@ -168,7 +168,7 @@ export const providePartConfig = (partID, params) => {
             return config.hasEditPermissions;
         },
         updateFrame: (componentName, referenceFrame, framePosition, frameGeometry) => {
-            const fragmentId = config.componentNameToFragmentId[componentName];
+            const fragmentId = config.componentNameToFragmentInfo[componentName]?.id;
             if (fragmentId === undefined) {
                 updatePartFrame(componentName, referenceFrame, framePosition, frameGeometry);
             }
@@ -177,7 +177,7 @@ export const providePartConfig = (partID, params) => {
             }
         },
         deleteFrame: (componentName) => {
-            const fragmentId = config.componentNameToFragmentId[componentName];
+            const fragmentId = config.componentNameToFragmentInfo[componentName]?.id;
             if (fragmentId === undefined) {
                 deletePartFrame(componentName);
             }
@@ -186,7 +186,7 @@ export const providePartConfig = (partID, params) => {
             }
         },
         createFrame: (componentName) => {
-            const fragmentId = config.componentNameToFragmentId[componentName];
+            const fragmentId = config.componentNameToFragmentInfo[componentName]?.id;
             if (fragmentId === undefined) {
                 createPartFrame(componentName);
             }
@@ -244,8 +244,8 @@ const useEmbeddedPartConfig = (props) => {
         get current() {
             return props.current ?? new Struct();
         },
-        get componentNameToFragmentId() {
-            return props.componentToFragId;
+        get componentNameToFragmentInfo() {
+            return props.componentNameToFragmentInfo;
         },
         set(config) {
             const struct = Struct.fromJson(config);
@@ -287,7 +287,16 @@ const useStandalonePartConfig = (partID) => {
         const id = typeof fragmentId === 'string' ? fragmentId : fragmentId.id;
         return createAppQuery('getFragment', () => [id], { refetchInterval: false });
     }));
-    const componentNameToFragmentId = $derived.by(() => {
+    const fragmentIdToVariables = $derived.by(() => {
+        const results = {};
+        for (const fragment of configJSON?.fragments ?? []) {
+            const id = typeof fragment === 'string' ? fragment : fragment.id;
+            const variables = typeof fragment === 'string' ? {} : fragment.variables;
+            results[id] = variables;
+        }
+        return results;
+    });
+    const componentNameToFragmentInfo = $derived.by(() => {
         const results = {};
         for (const query of fragmentQueries) {
             if (!query.data) {
@@ -300,7 +309,10 @@ const useStandalonePartConfig = (partID) => {
                     if (component.kind.case === 'structValue') {
                         const componentName = component.kind.value.fields['name']?.kind;
                         if (componentName.case === 'stringValue') {
-                            results[componentName.value] = fragmentId;
+                            results[componentName.value] = {
+                                id: fragmentId,
+                                variables: fragmentIdToVariables[fragmentId] ?? {},
+                            };
                         }
                     }
                 }
@@ -340,8 +352,8 @@ const useStandalonePartConfig = (partID) => {
         get hasEditPermissions() {
             return hasEditPermissions;
         },
-        get componentNameToFragmentId() {
-            return componentNameToFragmentId;
+        get componentNameToFragmentInfo() {
+            return componentNameToFragmentInfo;
         },
         set(config) {
             current = Struct.fromJson(config);

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

@@ -23,7 +23,6 @@ export interface Settings {
     enableMeasureAxisY: boolean;
     enableMeasureAxisZ: boolean;
     enableLabels: boolean;
-    enableQueryDevtools: boolean;
     enableArmPositionsWidget: boolean;
     openCameraWidgets: Record<string, string[]>;
     openFramePovWidgets: Record<string, string[]>;

package/dist/hooks/useSettings.svelte.js

@@ -30,7 +30,6 @@ const defaults = () => ({
     enableMeasureAxisY: true,
     enableMeasureAxisZ: true,
     enableLabels: false,
-    enableQueryDevtools: false,
     enableArmPositionsWidget: false,
     openCameraWidgets: {},
     openFramePovWidgets: {},

package/dist/plugins/Debug/Debug.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+</script>
+
+<SvelteQueryDevtools buttonPosition="bottom-left" />

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

package/dist/plugins/index.d.ts

@@ -3,3 +3,4 @@ export * as selectionTraits from './Selection/traits';
 export { useSelectionPlugin } from './Selection/useSelectionPlugin.svelte';
 export { default as DrawService } from './DrawService/DrawService.svelte';
 export { default as Skybox } from './Skybox/Skybox.svelte';
+export { default as Debug } from './Debug/Debug.svelte';

package/dist/plugins/index.js

@@ -6,3 +6,5 @@ export { useSelectionPlugin } from './Selection/useSelectionPlugin.svelte';
 export { default as DrawService } from './DrawService/DrawService.svelte';
 // Skybox
 export { default as Skybox } from './Skybox/Skybox.svelte';
+// Debug
+export { default as Debug } from './Debug/Debug.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -22,6 +22,7 @@
     "@sveltejs/vite-plugin-svelte": "6.1.4",
     "@tailwindcss/forms": "0.5.10",
     "@tailwindcss/vite": "4.1.13",
+    "@tanstack/svelte-query-devtools": "6.0.2",
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "^14.6.1",
@@ -87,6 +88,7 @@
     "@ag-grid-community/core": ">=32.3.0",
     "@ag-grid-community/styles": ">=32.3.0",
     "@dimforge/rapier3d-compat": ">=0.17",
+    "@tanstack/svelte-query-devtools": ">=6",
     "@threlte/core": ">=8",
     "@threlte/extras": ">=9",
     "@threlte/rapier": ">=3",
@@ -110,6 +112,11 @@
     "svelte-tweakpane-ui": ">=1.5",
     "svelte-virtuallists": ">=1"
   },
+  "peerDependenciesMeta": {
+    "@tanstack/svelte-query-devtools": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=22.12.0"
   },
@@ -143,7 +150,6 @@
     "@connectrpc/connect": "1.7.0",
     "@connectrpc/connect-web": "1.7.0",
     "@neodrag/svelte": "^2.3.3",
-    "@tanstack/svelte-query-devtools": "^6.0.2",
     "earcut": "^3.0.2",
     "filtrex": "^3.1.0",
     "koota": "0.6.5",