@viamrobotics/motion-tools 1.31.0 → 1.33.0

package/dist/components/Selected.svelte

@@ -1,55 +1,48 @@
 <script lang="ts">
-	import { isInstanceOf, T, useTask, useThrelte } from '@threlte/core'
+	import { T, useTask, useThrelte } from '@threlte/core'
 	import { BatchedMesh, Box3 } from 'three'
 	import { OBB } from 'three/addons/math/OBB.js'
 
-	import type { InstancedArrows } from '../three/InstancedArrows/InstancedArrows'
-
-	import { useSelectedEntity, useSelectedObject3d } from '../hooks/useSelection.svelte'
+	import { traits, useQuery } from '../ecs'
 	import { OBBHelper } from '../three/OBBHelper'
 
 	const box3 = new Box3()
 	const obb = new OBB()
-	const obbHelper = new OBBHelper()
 
-	const { invalidate } = useThrelte()
-	const selectedEntity = useSelectedEntity()
-	const selectedObject3d = useSelectedObject3d()
+	const { scene, invalidate } = useThrelte()
+	const selected = useQuery(traits.Selected)
 
-	const object = $derived(selectedObject3d.current)
+	const obbHelpers = $derived(selected.current.map((entity) => [entity, new OBBHelper()] as const))
 
 	useTask(
 		() => {
-			if (object === undefined) {
-				return
-			}
-
-			if (
-				selectedEntity.instance &&
-				(isInstanceOf(object, 'BatchedMesh') || (object as InstancedArrows).isInstancedArrows)
-			) {
-				const mesh = object as BatchedMesh | InstancedArrows
-				mesh.getBoundingBoxAt(selectedEntity.instance, box3)
-				obb.fromBox3(box3)
-				obbHelper.setFromOBB(obb)
-			} else {
-				obbHelper.setFromObject(object)
+			for (const [entity, obbHelper] of obbHelpers) {
+				const object = scene.getObjectByName(entity as unknown as string)
+				if (!object) continue
+
+				const instance = entity.get(traits.InstanceId)
+				if (instance !== undefined && instance >= 0) {
+					;(object as BatchedMesh).getBoundingBoxAt(instance, box3)
+					obb.fromBox3(box3)
+					obbHelper.setFromOBB(obb)
+				} else {
+					obbHelper.setFromObject(object)
+				}
 			}
 
 			invalidate()
 		},
 		{
-			running: () => selectedEntity.current !== undefined,
+			running: () => selected.current.length > 0,
 			autoInvalidate: false,
 		}
 	)
 </script>
 
-{#if selectedEntity.current}
+{#each obbHelpers as [entity, obbHelper] (entity)}
 	<T
 		is={obbHelper}
-		dispose={false}
 		raycast={() => null}
 		bvh={{ enabled: false }}
 	/>
-{/if}
+{/each}

package/dist/components/SelectedTransformControls.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
+	import { useThrelte } from '@threlte/core'
 	import { TransformControls } from '@threlte/extras'
 	import { Matrix4, Quaternion, Vector3 } from 'three'
 
 	import type { FrameEditSession } from '../editing/FrameEditSession'
 
-	import { relations, traits, useTrait } from '../ecs'
+	import { relations, traits, useQuery, useTrait } from '../ecs'
 	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 {
 		createPose,
@@ -20,16 +20,17 @@
 		vector3ToPose,
 	} from '../transform'
 
+	const { scene } = useThrelte()
 	const settings = useSettings()
 	const environment = useEnvironment()
 	const partConfig = usePartConfig()
 	const transformControls = useTransformControls()
-	const selectedEntity = useSelectedEntity()
-	const selectedObject3d = useSelectedObject3d()
 	const sessions = useFrameEditSession()
+	const selected = useQuery(traits.Selected)
 
 	const mode = $derived(settings.current.transformMode)
-	const entity = $derived(selectedEntity.current)
+	const entity = $derived(selected.current[0])
+	const object3d = $derived(scene.getObjectByName(entity as unknown as string))
 	const transformable = useTrait(() => entity, traits.Transformable)
 	const invisible = useTrait(() => entity, traits.InheritedInvisible)
 	const configMatrix = useTrait(() => entity, traits.Matrix)
@@ -47,11 +48,11 @@
 				0
 	)
 
-	// Mesh sets name={entity} on its inner mesh, so useSelectedObject3d resolves
+	// Mesh sets name={entity} on its inner mesh, so getObjectByName resolves
 	// to that mesh — not the parent Frame Group we actually want to drive. Walk
 	// up to the Group so translate/rotate/scale apply to the whole frame, not
 	// the geometry inside it.
-	const ref = $derived(selectedObject3d.current?.parent ?? selectedObject3d.current)
+	const ref = $derived(object3d?.parent ?? object3d)
 
 	const activeMode = $derived.by<'translate' | 'rotate' | 'scale' | undefined>(() => {
 		if (mode === 'none' || !transformable.current) return

package/dist/components/StaticGeometries.svelte

@@ -11,17 +11,16 @@
 	import { PressedKeys } from 'runed'
 	import { SvelteSet } from 'svelte/reactivity'
 
-	import { traits, useWorld } from '../ecs'
-	import { useSelectedEntity } from '../hooks/useSelection.svelte'
+	import { traits, useQuery, useWorld } from '../ecs'
 
 	import Frame from './Entities/Frame.svelte'
 
 	const world = useWorld()
-	const selectedEntity = useSelectedEntity()
+	const selected = useQuery(traits.Selected)
 
 	const entities = new SvelteSet<Entity>()
 	const selectedCustomGeometry = $derived(
-		[...entities].find((entity) => entity === selectedEntity.current)
+		[...entities].find((entity) => entity === selected.current[0])
 	)
 
 	const keys = new PressedKeys()
@@ -43,7 +42,6 @@
 			const entity = selectedCustomGeometry
 			entity.destroy()
 			entities.delete(entity)
-			selectedEntity.set()
 		}
 	})
 </script>

package/dist/components/hover/HoveredEntities.svelte

@@ -1,24 +1,25 @@
 <script lang="ts">
-	import { traits, useTrait } from '../../ecs'
+	import { traits, useQuery, useTrait } from '../../ecs'
 	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
-	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
-	import { useFocusedEntity } from '../../hooks/useSelection.svelte'
 
 	import HoveredEntity from './HoveredEntity.svelte'
 	import LinkedHoveredEntity from './LinkedHoveredEntity.svelte'
 
-	const selectedEntity = useSelectedEntity()
-	const focusedEntity = useFocusedEntity()
 	const linkedEntities = useLinkedEntities()
-
-	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
-	const isHovered = useTrait(() => displayEntity, traits.Hovered)
+	const selected = useQuery(traits.Selected)
 </script>
 
-{#if isHovered}
-	<HoveredEntity />
+{#each selected.current as entity (entity)}
+	{@const isHovered = useTrait(() => entity, traits.Hovered)}
+
+	{#if isHovered}
+		<HoveredEntity {entity} />
 
-	{#each linkedEntities.current as entity (entity)}
-		<LinkedHoveredEntity linkedEntity={entity} />
-	{/each}
-{/if}
+		{#each linkedEntities.current as linkedEntity (linkedEntity)}
+			<LinkedHoveredEntity
+				{linkedEntity}
+				{entity}
+			/>
+		{/each}
+	{/if}
+{/each}

package/dist/components/hover/HoveredEntities.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const HoveredEntities: import("svelte").Component<Record<string, never>, {}, "">;
-type HoveredEntities = ReturnType<typeof HoveredEntities>;
+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 HoveredEntities: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type HoveredEntities = InstanceType<typeof HoveredEntities>;
 export default HoveredEntities;

package/dist/components/hover/HoveredEntity.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
+	import type { Entity } from 'koota'
+
 	import { MathUtils, Quaternion, Vector3 } from 'three'
 
 	import type { HoverInfo } from '../../HoverUpdater.svelte'
 
 	import { traits, useTrait } from '../../ecs'
-	import { useFocusedEntity, useSelectedEntity } from '../../hooks/useSelection.svelte'
 	import { OrientationVector } from '../../three/OrientationVector'
 
 	import HoveredEntityTooltip from './HoveredEntityTooltip.svelte'
 
-	const selectedEntity = useSelectedEntity()
-	const focusedEntity = useFocusedEntity()
+	interface Props {
+		entity: Entity
+	}
+
+	let { entity }: Props = $props()
 
-	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
-	const instancedMatrix = useTrait(() => displayEntity, traits.InstancedMatrix)
+	const instancedMatrix = useTrait(() => entity, traits.InstancedMatrix)
 
 	// Pool: InstancedMatrix's `Matrix4` is in metres (matches Three.js).
 	// Decompose for the tooltip's display, which expects metres for position

package/dist/components/hover/HoveredEntity.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const HoveredEntity: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Entity } from 'koota';
+interface Props {
+    entity: Entity;
+}
+declare const HoveredEntity: import("svelte").Component<Props, {}, "">;
 type HoveredEntity = ReturnType<typeof HoveredEntity>;
 export default HoveredEntity;

package/dist/components/hover/LinkedHoveredEntity.svelte

@@ -5,36 +5,32 @@
 
 	import { relations, traits, useTrait } from '../../ecs'
 	import { SubEntityLinkType } from '../../ecs/relations'
-	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
-	import { useFocusedEntity } from '../../hooks/useSelection.svelte'
 	import { getLinkedHoverInfo, type HoverInfo } from '../../HoverUpdater.svelte'
 
 	import HoveredEntityTooltip from './HoveredEntityTooltip.svelte'
 
 	interface Props {
 		linkedEntity: Entity
+		entity: Entity
 	}
 
-	let { linkedEntity }: Props = $props()
+	let { linkedEntity, entity }: Props = $props()
 
-	const selectedEntity = useSelectedEntity()
-	const focusedEntity = useFocusedEntity()
-	const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current)
-
-	const displayedHoverInfo = useTrait(() => displayEntity, traits.InstancedMatrix)
+	const displayedHoverInfo = useTrait(() => entity, traits.InstancedMatrix)
 
 	let hoverInfo = $state.raw<HoverInfo | null>(null)
 
 	$effect(() => {
-		if (displayEntity && displayedHoverInfo.current) {
-			const linkType = displayEntity?.get(relations.SubEntityLink(linkedEntity))?.type
+		if (entity && displayedHoverInfo.current) {
+			const linkType = entity?.get(relations.SubEntityLink(linkedEntity))?.type
 			if (linkType !== SubEntityLinkType.HoverLink) {
 				return
 			}
+
 			// Index mapping is a formula with the variable 'index' in it.
 			// Supported operations: https://github.com/cshaa/filtrex#expressions
 			const indexMapping =
-				displayEntity?.get(relations.SubEntityLink(linkedEntity))?.indexMapping ?? 'index'
+				entity?.get(relations.SubEntityLink(linkedEntity))?.indexMapping ?? 'index'
 			const evaluate = compileExpression(indexMapping)
 			const resolvedIndex = evaluate({ index: displayedHoverInfo.current.index })
 			const linkedHoverInfo = getLinkedHoverInfo(resolvedIndex, linkedEntity)

package/dist/components/hover/LinkedHoveredEntity.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Entity } from 'koota';
 interface Props {
     linkedEntity: Entity;
+    entity: Entity;
 }
 declare const LinkedHoveredEntity: import("svelte").Component<Props, {}, "">;
 type LinkedHoveredEntity = ReturnType<typeof LinkedHoveredEntity>;

package/dist/components/overlay/Details.svelte

@@ -15,6 +15,7 @@
 	import type { Pose } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
+	import type { HTMLAttributes } from 'svelte/elements'
 
 	import { draggable } from '@neodrag/svelte'
 	import { isInstanceOf, useThrelte } from '@threlte/core'
@@ -46,38 +47,28 @@
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 	import { usePartID } from '../../hooks/usePartID.svelte'
 	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
-	import {
-		useFocusedEntity,
-		useFocusedObject3d,
-		useSelectedEntity,
-		useSelectedObject3d,
-	} from '../../hooks/useSelection.svelte'
 	import { useSettings } from '../../hooks/useSettings.svelte'
 	import { createPose, matrixToPose } from '../../transform'
 
-	interface Props {
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		entity: Entity
 		details?: Snippet<[{ entity: Entity }]>
 	}
 
-	const { details }: Props = $props()
+	const { entity, details, ...rest }: Props = $props()
 
 	const world = useWorld()
-	const { invalidate } = useThrelte()
+	const { scene, invalidate } = useThrelte()
 	const controls = useCameraControls()
 	const resourceByName = useResourceByName()
 	const configFrames = useConfigFrames()
 	const partConfig = usePartConfig()
 	const partID = usePartID()
 	const settings = useSettings()
-	const selectedEntity = useSelectedEntity()
-	const selectedObject3d = useSelectedObject3d()
 	const environment = useEnvironment()
-	const focusedEntity = useFocusedEntity()
-	const focusedObject3d = useFocusedObject3d()
 	const linkedEntities = useLinkedEntities()
 
-	const entity = $derived(focusedEntity.current ?? selectedEntity.current)
-	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
+	const object3d = $derived(scene.getObjectByName(entity as unknown as string))
 
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useParentName(() => entity)
@@ -129,8 +120,7 @@
 	})
 
 	const geometryTypes = ['none', 'box', 'sphere', 'capsule'] as const
-	// Writable derived: re-derives from the trait, but TabGroup's bind:selectedIndex
-	// can write a transient override that lasts until the trait re-derives.
+
 	let geometryTabIndex = $derived(geometryTypes.indexOf(geometryType))
 
 	$effect(() => {
@@ -156,6 +146,10 @@
 
 	const detailConfigUpdater = new FrameConfigUpdater(partConfig.updateFrame, partConfig.deleteFrame)
 
+	const stopKeyboardPropagation = (event: KeyboardEvent) => {
+		event.stopPropagation()
+	}
+
 	const handlePositionChange = (event: PointChangeEvent) => {
 		if (event.detail.origin !== 'internal' || !entity) return
 		const next = event.detail.value as PointValue3dObject
@@ -312,13 +306,21 @@
 {/snippet}
 
 {#if entity}
+	<!-- tabindex makes the whole panel focusable so a click anywhere in it (not
+	just the inputs) raises it via `focus-within:z-5`. -->
 	<div
 		id="details-panel"
-		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs"
+		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 w-70 border p-2 text-xs focus-within:z-5"
+		role="region"
+		aria-label="Details panel"
+		tabindex="-1"
+		onkeydown={stopKeyboardPropagation}
+		onkeyup={stopKeyboardPropagation}
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,
 		}}
+		{...rest}
 	>
 		<div
 			class="flex cursor-move items-center justify-between gap-2 pb-2"
@@ -768,25 +770,8 @@
 
 		{@render details?.({ entity })}
 
-		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
-
-		{#if focusedEntity.current}
-			<Button
-				class="w-full"
-				icon="arrow-left"
-				variant="dark"
-				onclick={() => focusedEntity.set()}
-			>
-				Exit object view
-			</Button>
-		{:else}
-			<Button
-				class="w-full"
-				icon="image-filter-center-focus"
-				onclick={() => focusedEntity.set(entity)}
-			>
-				Enter object view
-			</Button>
+		{#if showRelationshipOptions || (showEditFrameOptions && environment.current.isStandalone)}
+			<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
 		{/if}
 
 		{#if showRelationshipOptions}

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

@@ -1,6 +1,8 @@
 import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    entity: Entity;
     details?: Snippet<[{
         entity: Entity;
     }]>;

package/dist/components/overlay/controls/Controls.svelte

@@ -16,7 +16,6 @@
 
 	<fieldset class="flex flex-col">
 		<Button
-			active
 			class="rounded-b-none"
 			icon="camera-outline"
 			description="Reset camera"
@@ -26,7 +25,6 @@
 			}}
 		/>
 		<Button
-			active
 			class="-my-0.5 rounded-t-none"
 			icon={isOrthographic ? 'grid-orthographic' : 'grid-perspective'}
 			description={isOrthographic ? 'Switch to perspective view' : 'Switch to orthographic view'}

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

@@ -2,10 +2,10 @@
 	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
-	import { MousePointer2, Ruler } from 'lucide-svelte'
+	import { Focus, MousePointer2, Ruler } from 'lucide-svelte'
 
 	interface Props extends HTMLButtonAttributes {
-		icon: IconName | 'ruler' | 'mouse-pointer'
+		icon: IconName | 'ruler' | 'mouse-pointer' | 'focus'
 		active?: boolean
 		description: string
 		hotkey?: string
@@ -33,7 +33,7 @@
 	<label
 		class={[
 			className,
-			'relative block rounded-md border',
+			'relative block rounded-md border active:z-4 active:border-[#666] active:bg-[#666] active:text-white',
 			active ? 'z-4 border-[#666] bg-[#666] text-white' : 'border-gray-5 text-gray-8 bg-white',
 		]}
 		aria-describedby={tooltipID}
@@ -50,6 +50,8 @@
 				<Ruler size="16" />
 			{:else if icon === 'mouse-pointer'}
 				<MousePointer2 size="16" />
+			{:else if icon === 'focus'}
+				<Focus size="16" />
 			{:else}
 				<Icon name={icon} />
 			{/if}

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

@@ -1,7 +1,7 @@
 import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 import { type IconName } from '@viamrobotics/prime-core';
 interface Props extends HTMLButtonAttributes {
-    icon: IconName | 'ruler' | 'mouse-pointer';
+    icon: IconName | 'ruler' | 'mouse-pointer' | 'focus';
     active?: boolean;
     description: string;
     hotkey?: string;

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

@@ -6,15 +6,12 @@
 	import { VirtualList } from 'svelte-virtuallists'
 	import { SvelteSet } from 'svelte/reactivity'
 
-	import { relations, traits } from '../../../ecs'
-	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
+	import { relations, traits, useQuery } from '../../../ecs'
 
 	import type { TreeNode as TreeNodeType } from './useTree.svelte'
 
 	import TreeNode from './TreeNode.svelte'
 
-	const selected = useSelectedEntity()
-
 	interface Props {
 		rootNode: TreeNodeType
 		dragElement?: HTMLElement
@@ -31,14 +28,18 @@
 		})
 	)
 
-	const selectedValue = $derived(selected.current ? [`${selected.current}`] : [])
+	const selected = useQuery(traits.Selected)
+
+	const selectedValue = $derived(selected.current.map((entity) => `${entity}`))
 	const expandedValues = new SvelteSet<string>()
 
 	$effect(() => {
-		let entity: Entity | undefined = selected.current
-		while (entity) {
-			expandedValues.add(`${entity}`)
-			entity = entity.targetFor(relations.ChildOf)
+		for (const entity of selected.current) {
+			let ancestor: Entity | undefined = entity.targetFor(relations.ChildOf)
+			while (ancestor) {
+				expandedValues.add(`${ancestor}`)
+				ancestor = ancestor.targetFor(relations.ChildOf)
+			}
 		}
 	})
 
@@ -46,6 +47,8 @@
 	const service = useMachine(tree.machine, () => ({
 		id,
 		collection,
+		selectionMode: 'multiple' as const,
+		expandOnClick: false,
 		selectedValue,
 		expandedValue: [...expandedValues],
 		onSelectionChange(details) {
@@ -64,7 +67,7 @@
 
 	$effect(() => {
 		const element = document.querySelector(
-			`[data-scope="tree-view"][data-value="${selected.current}"]`
+			`[data-scope="tree-view"][data-value="${selected.current.at(-1)}"]`
 		)
 
 		requestAnimationFrame(() => {

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

@@ -2,7 +2,6 @@
 	import { type Entity, IsExcluded } from 'koota'
 
 	import { traits, useWorld } from '../../../ecs'
-	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 
 	import FloatingPanel from '../FloatingPanel.svelte'
 	import Tree from './Tree.svelte'
@@ -11,7 +10,6 @@
 
 	provideTreeExpandedContext()
 
-	const selectedEntity = useSelectedEntity()
 	const world = useWorld()
 
 	const worldEntity = world.spawn(IsExcluded, traits.Name('World'))
@@ -35,9 +33,16 @@
 	<Tree
 		{rootNode}
 		onSelectionChange={(event) => {
-			const value = event.selectedValue[0]
+			const next = new Set(event.selectedValue.map(Number))
 
-			selectedEntity.set(value ? (Number(value) as Entity) : undefined)
+			for (const entity of world.query(traits.Selected)) {
+				if (!next.has(entity as number)) entity.remove(traits.Selected)
+			}
+
+			for (const id of next) {
+				const entity = id as Entity
+				if (!entity.has(traits.Selected)) entity.add(traits.Selected)
+			}
 		}}
 	/>
 </FloatingPanel>

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

@@ -63,12 +63,14 @@
 		]}
 	>
 		<div {...api.getBranchControlProps(nodeProps)}>
-			<span
-				{...api.getBranchIndicatorProps(nodeProps)}
-				class={{ 'rotate-90': expanded }}
+			<button
+				type="button"
+				aria-label={expanded ? 'Collapse' : 'Expand'}
+				{...api.getBranchTriggerProps(nodeProps)}
+				class={['flex items-center', { 'rotate-90': expanded }]}
 			>
 				<ChevronRight size={14} />
-			</span>
+			</button>
 			<span
 				class="flex items-center overflow-hidden text-ellipsis"
 				{...api.getBranchTextProps(nodeProps)}

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { useGeometries } from '../../../hooks/useGeometries.svelte'
+	import { usePointcloudObjects } from '../../../hooks/usePointcloudObjects.svelte'
+	import { usePointClouds } from '../../../hooks/usePointclouds.svelte'
+	import { useRefetchPoses } from '../../../hooks/useRefetchPoses'
+	import { RefreshRates } from '../../../hooks/useSettings.svelte'
+
+	import RefreshRate from '../RefreshRate.svelte'
+
+	const geometries = useGeometries()
+	const pointclouds = usePointClouds()
+	const pointcloudObjects = usePointcloudObjects()
+	const { refetchPoses } = useRefetchPoses()
+</script>
+
+<div class="flex flex-col gap-2.5 text-xs">
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Polling rates</strong></h3>
+
+	<RefreshRate
+		id={RefreshRates.poses}
+		label="Poses"
+		allowLive
+		onManualRefetch={() => {
+			refetchPoses()
+			geometries.refetch()
+		}}
+	/>
+	<RefreshRate
+		id={RefreshRates.pointclouds}
+		label="Pointclouds from cameras"
+		onManualRefetch={() => {
+			pointclouds.refetch()
+		}}
+	/>
+	<RefreshRate
+		id={RefreshRates.vision}
+		label="Vision service pointcloud segments and objects"
+		onManualRefetch={() => {
+			pointcloudObjects.refetch()
+		}}
+	/>
+</div>