@viamrobotics/motion-tools 1.7.0 → 1.9.1

package/dist/components/{LiveUpdatesBanner.svelte → overlay/LiveUpdatesBanner.svelte}

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, Icon } from '@viamrobotics/prime-core'
-	import { usePartConfig } from '../hooks/usePartConfig.svelte'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 
 	const partConfig = usePartConfig()
 
@@ -25,7 +25,7 @@
 
 {#if partConfig.isDirty}
 	<div
-		class="absolute bottom-8 z-10 flex w-full justify-center gap-2"
+		class="absolute bottom-8 z-4 flex w-full justify-center gap-2"
 		{...rest}
 	>
 		<div

package/dist/components/overlay/Popover.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import * as popover from '@zag-js/popover'
+	import { portal, useMachine, normalizeProps } from '@zag-js/svelte'
+	import type { Snippet } from 'svelte'
+	import type { HTMLButtonAttributes } from 'svelte/elements'
+
+	interface Props {
+		trigger: Snippet<[HTMLButtonAttributes]>
+		children: Snippet
+	}
+
+	let { children, trigger }: Props = $props()
+
+	const id = $props.id()
+	const service = useMachine(popover.machine, { id })
+	const api = $derived(popover.connect(service, normalizeProps))
+</script>
+
+{@render trigger(api.getTriggerProps())}
+
+<div
+	use:portal={{ disabled: !api.portalled }}
+	{...api.getPositionerProps()}
+>
+	<div {...api.getContentProps()}>
+		{@render children()}
+	</div>
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props {
+    trigger: Snippet<[HTMLButtonAttributes]>;
+    children: Snippet;
+}
+declare const Popover: import("svelte").Component<Props, {}, "">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/overlay/ToggleGroup.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte'
+	import * as toggle from '@zag-js/toggle-group'
+
+	interface Props {
+		multiple: boolean
+		buttons: {
+			on?: boolean
+			disabled?: boolean
+			label?: string
+			value: string
+		}[]
+		onclick: (details: string[]) => void
+	}
+
+	let { multiple, buttons, onclick }: Props = $props()
+
+	const id = $props.id()
+	const service = useMachine(toggle.machine, () => ({
+		id,
+		value: buttons.filter((button) => button.on).map((button) => button.value),
+		multiple,
+		onValueChange(details) {
+			onclick(details.value)
+		},
+	}))
+	const api = $derived(toggle.connect(service, normalizeProps))
+</script>
+
+<div
+	class="flex items-center"
+	{...api.getRootProps()}
+>
+	{#each buttons as button (button.value)}
+		<button
+			class="-ml-px flex h-5 w-5 items-center justify-center border text-xs"
+			{...api.getItemProps({ value: button.value })}
+		>
+			{button.label ?? button.value}
+		</button>
+	{/each}
+</div>
+
+<style>
+	button[data-state='on'] {
+		background: green;
+		border-color: black;
+		color: white;
+	}
+
+	button[data-disabled] {
+		opacity: 0.5;
+
+		filter: grayscale(100%);
+	}
+
+	button[data-focus] {
+		outline: none;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+interface Props {
+    multiple: boolean;
+    buttons: {
+        on?: boolean;
+        disabled?: boolean;
+        label?: string;
+        value: string;
+    }[];
+    onclick: (details: string[]) => void;
+}
+declare const ToggleGroup: import("svelte").Component<Props, {}, "">;
+type ToggleGroup = ReturnType<typeof ToggleGroup>;
+export default ToggleGroup;

package/dist/components/{__tests__ → overlay/__tests__}/__fixtures__/entity.js

@@ -1,4 +1,4 @@
-import { traits } from '../../../ecs';
+import { traits } from '../../../../ecs';
 export const createEntityFixture = (world) => {
     return world.spawn(traits.Parent('parent_frame'), traits.Name('Test Object'), traits.Pose({
         x: 10,

package/dist/components/{dashboard → overlay/dashboard}/Button.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
 	import { Ruler } from 'lucide-svelte'
-	import type { ClassValue, MouseEventHandler } from 'svelte/elements'
+	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
-	interface Props {
+	interface Props extends HTMLButtonAttributes {
 		icon: IconName | 'ruler'
 		active?: boolean
 		description: string
 		hotkey?: string
 		class?: ClassValue | null | undefined
+		tooltipLocation?: 'bottom' | 'right'
 		onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined
 	}
 
@@ -18,19 +19,21 @@
 		description,
 		hotkey = '',
 		class: className = '',
+		tooltipLocation,
 		onclick,
+		...rest
 	}: Props = $props()
 </script>
 
 <Tooltip
 	let:tooltipID
-	location="bottom"
+	location={tooltipLocation ?? 'bottom'}
 >
 	<label
 		class={[
 			className,
 			'relative block border',
-			active ? 'border-gray-5 text-gray-8 z-10 bg-white' : 'bg-light border-medium text-disabled',
+			active ? 'border-gray-5 text-gray-8 z-4 bg-white' : 'bg-light border-medium text-disabled',
 		]}
 		aria-describedby={tooltipID}
 	>
@@ -40,6 +43,7 @@
 			aria-label={description}
 			aria-checked={active}
 			{onclick}
+			{...rest}
 		>
 			{#if icon === 'ruler'}
 				<Ruler size="16" />

package/dist/components/{dashboard → overlay/dashboard}/Button.svelte.d.ts

@@ -1,11 +1,12 @@
 import { type IconName } from '@viamrobotics/prime-core';
-import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-interface Props {
+import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
     icon: IconName | 'ruler';
     active?: boolean;
     description: string;
     hotkey?: string;
     class?: ClassValue | null | undefined;
+    tooltipLocation?: 'bottom' | 'right';
     onclick?: MouseEventHandler<HTMLButtonElement> | null | undefined;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;

package/dist/components/{dashboard → overlay/dashboard}/Dashboard.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
 	import { PortalTarget } from '@threlte/extras'
 	import Button from './Button.svelte'
 
@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="absolute top-2 z-10 flex w-full justify-center gap-2"
+	class="absolute top-2 z-4 flex w-full justify-center gap-2"
 	{...rest}
 >
 	<!-- camera view -->

package/dist/components/{Tree → overlay/left-pane}/AddFrames.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { IconButton } from '@viamrobotics/prime-core'
 	import Drawer from './Drawer.svelte'
-	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
-	import { useFramelessComponents } from '../../hooks/useFramelessComponents.svelte'
+	import { usePartConfig } from '../../../hooks/usePartConfig.svelte'
+	import { useFramelessComponents } from '../../../hooks/useFramelessComponents.svelte'
 
 	const framelessComponents = useFramelessComponents()
 	const partConfig = usePartConfig()

package/dist/components/{Tree → overlay/left-pane}/Logs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useLogs } from '../../hooks/useLogs.svelte'
+	import { useLogs } from '../../../hooks/useLogs.svelte'
 	import Drawer from './Drawer.svelte'
 
 	const logs = useLogs()

package/dist/components/{RefreshRate.svelte → overlay/left-pane/RefreshRate.svelte}

@@ -17,7 +17,7 @@
 
 <script lang="ts">
 	import { Select, IconButton } from '@viamrobotics/prime-core'
-	import { useMachineSettings } from '../hooks/useMachineSettings.svelte'
+	import { useMachineSettings } from '../../../hooks/useMachineSettings.svelte'
 	import type { Snippet } from 'svelte'
 
 	interface Props {

package/dist/components/{Tree → overlay/left-pane}/Settings.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { Select, Switch, Input } from '@viamrobotics/prime-core'
-	import RefreshRate from '../RefreshRate.svelte'
+	import RefreshRate from './RefreshRate.svelte'
 	import Drawer from './Drawer.svelte'
-	import { useSettings } from '../../hooks/useSettings.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
 	import { useResourceNames } from '@viamrobotics/svelte-sdk'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { RefreshRates, useMachineSettings } from '../../hooks/useMachineSettings.svelte'
-	import { useGeometries } from '../../hooks/useGeometries.svelte'
-	import { usePointClouds } from '../../hooks/usePointclouds.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { RefreshRates, useMachineSettings } from '../../../hooks/useMachineSettings.svelte'
+	import { useGeometries } from '../../../hooks/useGeometries.svelte'
+	import { usePointClouds } from '../../../hooks/usePointclouds.svelte'
 	import { useThrelte } from '@threlte/core'
-	import { useRefetchPoses } from '../../hooks/useRefetchPoses'
+	import { useRefetchPoses } from '../../../hooks/useRefetchPoses'
 
 	const { invalidate } = useThrelte()
 	const partID = usePartID()
@@ -193,6 +193,11 @@
 			<label class="flex items-center justify-between gap-2">
 				Render stats <Switch bind:on={settings.current.renderStats} />
 			</label>
+			<label class="flex items-center justify-between gap-2">
+				Render sub-entity hover detail <Switch
+					bind:on={settings.current.renderSubEntityHoverDetail}
+				/>
+			</label>
 			<label class="flex items-center justify-between gap-2">
 				Render Arm Models
 				<Select

package/dist/components/{Tree → overlay/left-pane}/Tree.svelte

@@ -2,12 +2,12 @@
 	import * as tree from '@zag-js/tree-view'
 	import { useMachine, normalizeProps } from '@zag-js/svelte'
 	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
-	import { useVisibility } from '../../hooks/useVisibility.svelte'
+	import { useVisibility } from '../../../hooks/useVisibility.svelte'
 	import type { TreeNode } from './buildTree'
 	import { VirtualList } from 'svelte-virtuallists'
 	import { Icon } from '@viamrobotics/prime-core'
-	import { traits } from '../../ecs'
-	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { traits } from '../../../ecs'
+	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { SvelteSet } from 'svelte/reactivity'
 
 	const selected = useSelectedEntity()

package/dist/components/{Tree → overlay/left-pane}/TreeContainer.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
 	import Tree from './Tree.svelte'
-	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
+	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { provideTreeExpandedContext } from './useExpanded.svelte'
 	import Settings from './Settings.svelte'
 	import Logs from './Logs.svelte'
 	import Widgets from './Widgets.svelte'
 	import AddFrames from './AddFrames.svelte'
-	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
-	import { useFrames } from '../../hooks/useFrames.svelte'
-	import { traits, useQuery, useWorld } from '../../ecs'
+	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { usePartConfig } from '../../../hooks/usePartConfig.svelte'
+	import { useFrames } from '../../../hooks/useFrames.svelte'
+	import { traits, useQuery, useWorld } from '../../../ecs'
 	import { IsExcluded, type Entity } from 'koota'
 	import { buildTreeNodes, type TreeNode } from './buildTree'
-	import { MIN_DIMENSIONS, useResizable } from '../../hooks/useResizable.svelte'
+	import { MIN_DIMENSIONS, useResizable } from '../../../hooks/useResizable.svelte'
 
 	const { ...rest } = $props()
 
@@ -59,7 +59,7 @@
 
 <div
 	bind:this={container}
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 resize overflow-y-auto border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 resize overflow-y-auto border text-xs"
 	style:min-width="{MIN_DIMENSIONS.width}px"
 	style:min-height="{MIN_DIMENSIONS.height}px"
 	style:width={resizable.current ? `${resizable.current.width}px` : undefined}

package/dist/components/{Tree → overlay/left-pane}/Widgets.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { Switch } from '@viamrobotics/prime-core'
 	import Drawer from './Drawer.svelte'
-	import { useSettings } from '../../hooks/useSettings.svelte'
-	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { useResourceByName } from '../../../hooks/useResourceByName.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
 
 	const settings = useSettings()
 	const resourceByName = useResourceByName()

package/dist/components/{Tree → overlay/left-pane}/buildTree.js

@@ -1,4 +1,4 @@
-import { traits } from '../../ecs';
+import { traits } from '../../../ecs';
 /**
  * Creates a tree representing parent child / relationships from a set of frames.
  */

package/dist/components/{widgets → overlay/widgets}/ArmPositions.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
-	import { formatNumeric } from '../../format'
-	import Table from '../shared/Table.svelte'
-	import { useArmClient } from '../../hooks/useArmClient.svelte'
+	import { formatNumeric } from '../../../format'
+	import Table from '../Table.svelte'
+	import { useArmClient } from '../../../hooks/useArmClient.svelte'
 	import { Icon, Label, Select } from '@viamrobotics/prime-core'
 
 	const { ...rest } = $props()
@@ -17,7 +17,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-4 m-2 overflow-y-auto border text-xs"
 	use:draggable={{
 		bounds: 'body',
 		handle: dragElement,

package/dist/components/{widgets → overlay/widgets}/Camera.svelte

@@ -3,9 +3,9 @@
 	import { Icon, Select } from '@viamrobotics/prime-core'
 	import { CameraStream, useRobotClient } from '@viamrobotics/svelte-sdk'
 	import { StreamClient } from '@viamrobotics/sdk'
-	import { useSettings } from '../../hooks/useSettings.svelte'
-	import { usePartID } from '../../hooks/usePartID.svelte'
-	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
 
 	interface Resolution {
 		width: number
@@ -107,7 +107,7 @@
 </script>
 
 <div
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 flex resize-x flex-col overflow-hidden border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 flex resize-x flex-col overflow-hidden border text-xs"
 	style:width="320px"
 	style:height="auto !important"
 	use:draggable={{
@@ -176,7 +176,7 @@
 			<!-- FPS Pill -->
 			{#if fps > 0}
 				<div
-					class="absolute bottom-2 left-2 z-10 rounded-[3px] bg-black/30 px-1 py-0.5 text-right font-mono text-xs text-white"
+					class="absolute bottom-2 left-2 z-4 rounded-[3px] bg-black/30 px-1 py-0.5 text-right font-mono text-xs text-white"
 				>
 					{fps.toFixed(1)}fps
 				</div>

package/dist/ecs/traits.d.ts

@@ -30,11 +30,17 @@ export declare const Center: import("koota").Trait<{
     oZ: number;
     theta: number;
 }>;
+export declare const Hover: import("koota").Trait<{
+    index: number;
+    x: number;
+    y: number;
+    z: number;
+}>;
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
  */
-export declare const Instanced: import("koota").TagTrait;
+export declare const Instanced: import("koota").Trait<() => boolean>;
 export declare const Instance: import("koota").Trait<{
     meshID: number;
     instanceID: number;
@@ -49,7 +55,7 @@ export declare const Color: import("koota").Trait<{
     g: number;
     b: number;
 }>;
-export declare const Arrow: import("koota").TagTrait;
+export declare const Arrow: import("koota").Trait<() => boolean>;
 export declare const Positions: import("koota").Trait<() => Float32Array<ArrayBuffer>>;
 export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;
 export declare const Instances: import("koota").Trait<{
@@ -61,7 +67,7 @@ export declare const Arrows: import("koota").Trait<{
 /**
  * Render entity as points
  */
-export declare const Points: import("koota").TagTrait;
+export declare const Points: import("koota").Trait<() => boolean>;
 /**
  * A box, in mm
  */
@@ -108,15 +114,16 @@ export declare const Scale: import("koota").Trait<{
     y: number;
     z: number;
 }>;
-export declare const FramesAPI: import("koota").TagTrait;
-export declare const GeometriesAPI: import("koota").TagTrait;
-export declare const DrawAPI: import("koota").TagTrait;
-export declare const WorldStateStoreAPI: import("koota").TagTrait;
-export declare const SnapshotAPI: import("koota").TagTrait;
+export declare const FramesAPI: import("koota").Trait<() => boolean>;
+export declare const GeometriesAPI: import("koota").Trait<() => boolean>;
+export declare const DrawAPI: import("koota").Trait<() => boolean>;
+export declare const WorldStateStoreAPI: import("koota").Trait<() => boolean>;
+export declare const SnapshotAPI: import("koota").Trait<() => boolean>;
 /**
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
-export declare const DroppedFile: import("koota").TagTrait;
+export declare const DroppedFile: import("koota").Trait<() => boolean>;
+export declare const ShowAxesHelper: import("koota").Trait<() => boolean>;
 /**
  * Point size, in mm
  */
@@ -125,12 +132,12 @@ export declare const PointSize: import("koota").Trait<() => number>;
  * Line width, in mm
  */
 export declare const LineWidth: import("koota").Trait<() => number>;
-export declare const ReferenceFrame: import("koota").TagTrait;
+export declare const ReferenceFrame: import("koota").Trait<() => boolean>;
 /**
  * This entity can be safetly removed from the scene by the user
  */
-export declare const Removable: import("koota").TagTrait;
-export declare const Geometry: (geometry: ViamGeometry) => import("koota").TagTrait | [import("koota").Trait<{
+export declare const Removable: import("koota").Trait<() => boolean>;
+export declare const Geometry: (geometry: ViamGeometry) => import("koota").Trait<() => boolean> | [import("koota").Trait<{
     x: number;
     y: number;
     z: number;

package/dist/ecs/traits.js

@@ -8,11 +8,17 @@ export const Parent = trait(() => 'world');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const EditedPose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const Center = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
+export const Hover = trait({
+    index: -1, // Sub-entity index, -1 if not applicable
+    x: 0, // World position X in meters
+    y: 0, // World position Y in meters
+    z: 0, // World position Z in meters
+});
 /**
  * Represents that an entity is composed of many instances, so that the treeview and
  * details panel may display all instances
  */
-export const Instanced = trait();
+export const Instanced = trait(() => true);
 export const Instance = trait({
     meshID: -1,
     instanceID: -1,
@@ -23,7 +29,7 @@ export const Opacity = trait(() => 1);
  * @default { r: 1, g: 0, b: 0 }
  */
 export const Color = trait({ r: 0, g: 0, b: 0 });
-export const Arrow = trait();
+export const Arrow = trait(() => true);
 export const Positions = trait(() => new Float32Array());
 export const Colors = trait(() => new Uint8Array());
 export const Instances = trait({
@@ -35,7 +41,7 @@ export const Arrows = trait({
 /**
  * Render entity as points
  */
-export const Points = trait();
+export const Points = trait(() => true);
 /**
  * A box, in mm
  */
@@ -59,15 +65,16 @@ export const GLTF = trait(() => ({
     animationName: '',
 }));
 export const Scale = trait({ x: 1, y: 1, z: 1 });
-export const FramesAPI = trait();
-export const GeometriesAPI = trait();
-export const DrawAPI = trait();
-export const WorldStateStoreAPI = trait();
-export const SnapshotAPI = trait();
+export const FramesAPI = trait(() => true);
+export const GeometriesAPI = trait(() => true);
+export const DrawAPI = trait(() => true);
+export const WorldStateStoreAPI = trait(() => true);
+export const SnapshotAPI = trait(() => true);
 /**
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
-export const DroppedFile = trait();
+export const DroppedFile = trait(() => true);
+export const ShowAxesHelper = trait(() => true);
 // === Shape Properties ===
 /**
  * Point size, in mm
@@ -77,11 +84,11 @@ export const PointSize = trait(() => 10);
  * Line width, in mm
  */
 export const LineWidth = trait(() => 5);
-export const ReferenceFrame = trait();
+export const ReferenceFrame = trait(() => true);
 /**
  * This entity can be safetly removed from the scene by the user
  */
-export const Removable = trait();
+export const Removable = trait(() => true);
 export const Geometry = (geometry) => {
     if (geometry.geometryType.case === 'box') {
         return Box(createBox(geometry.geometryType.value));

package/dist/ecs/useQuery.svelte.js

@@ -1,29 +1,29 @@
 import { untrack } from 'svelte';
-import { $internal as internal, cacheQuery } from 'koota';
+import { $internal as internal, createQuery } from 'koota';
 import { useWorld } from './useWorld';
 export function useQuery(...parameters) {
     const world = useWorld();
-    const hash = cacheQuery(...parameters);
+    const createdQuery = createQuery(...parameters);
     // Using internals to get the query data.
-    const query = world[internal].queriesHashMap.get(hash);
+    const query = world[internal].queriesHashMap.get(createdQuery.hash);
     const initialQueryVersion = query?.version;
     let version = $state.raw(0);
-    let entities = $state.raw(world.query(hash));
+    let entities = $state.raw(world.query(createdQuery));
     $effect(() => {
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         version;
         // Compare the initial version to the current version to
         // see it the query has changed.
-        const query = world[internal].queriesHashMap.get(hash);
+        const query = world[internal].queriesHashMap.get(createdQuery.hash);
         if (query?.version !== initialQueryVersion) {
-            entities = world.query(hash);
+            entities = world.query(createdQuery);
         }
         return untrack(() => {
-            const unsubAdd = world.onQueryAdd(hash, () => {
-                entities = world.query(hash);
+            const unsubAdd = world.onQueryAdd(createdQuery, () => {
+                entities = world.query(createdQuery);
             });
-            const unsubRemove = world.onQueryRemove(hash, () => {
-                entities = world.query(hash);
+            const unsubRemove = world.onQueryRemove(createdQuery, () => {
+                entities = world.query(createdQuery);
             });
             return () => {
                 unsubAdd();

package/dist/hooks/useDrawAPI.svelte.js

@@ -149,7 +149,7 @@ export const provideDrawAPI = () => {
             if (frame.geometry) {
                 entityTraits.push(geometryTrait());
             }
-            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame, traits.Removable);
+            entityTraits.push(traits.Name(name), traits.Pose(pose), traits.DrawAPI, traits.ReferenceFrame, traits.Removable, traits.ShowAxesHelper);
             const entity = world.spawn(...entityTraits);
             entities.set(name, entity);
         }

package/dist/hooks/useFrames.svelte.js

@@ -199,6 +199,7 @@ export const provideFrames = (partID) => {
                 traits.Pose(pose),
                 traits.EditedPose(pose),
                 traits.FramesAPI,
+                traits.ShowAxesHelper,
             ];
             if (parent && parent !== 'world') {
                 entityTraits.push(traits.Parent(parent));

package/dist/hooks/useGeometries.svelte.js

@@ -9,7 +9,7 @@ import { useResourceByName } from './useResourceByName.svelte';
 import { traits, useWorld } from '../ecs';
 import {} from 'koota';
 import { createPose } from '../transform';
-import { RefetchRates } from '../components/RefreshRate.svelte';
+import { RefetchRates } from '../components/overlay/left-pane/RefreshRate.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
 const key = Symbol('geometries-context');
 const colorUtil = new Color();

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

@@ -3,6 +3,7 @@ import type { Entity } from 'koota';
 export declare const useObjectEvents: (entity: () => Entity | undefined) => {
     readonly visible: boolean;
     onpointerenter: (event: IntersectionEvent<MouseEvent>) => void;
+    onpointermove: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerleave: (event: IntersectionEvent<MouseEvent>) => void;
     ondblclick: (event: IntersectionEvent<MouseEvent>) => void;
     onpointerdown: (event: IntersectionEvent<MouseEvent>) => void;