@viamrobotics/motion-tools 1.30.0 → 1.32.0

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)
@@ -43,14 +44,15 @@
 	)
 	const isFragmentComponentWithVariables = $derived(
 		name.current &&
-			Object.keys(partConfig.componentNameToFragmentInfo[name.current]?.variables ?? {}).length > 0
+			Object.keys(partConfig.componentNameToFragmentInfo?.[name.current]?.variables ?? {}).length >
+				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)
@@ -111,7 +102,8 @@
 	const isGeometry = $derived(!!geometriesAPI.current)
 	const isFragmentComponentWithVariables = $derived(
 		name.current &&
-			Object.keys(partConfig.componentNameToFragmentInfo[name.current]?.variables ?? {}).length > 0
+			Object.keys(partConfig.componentNameToFragmentInfo?.[name.current]?.variables ?? {}).length >
+				0
 	)
 	const showEditFrameOptions = $derived(
 		isFrameNode && partConfig.hasEditPermissions && !isFragmentComponentWithVariables
@@ -128,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(() => {
@@ -155,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
@@ -311,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"
@@ -767,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/draw.d.ts

@@ -4,6 +4,7 @@ import type { Transform as TransformProto } from './buf/common/v1/common_pb';
 import type { Drawing } from './buf/draw/v1/drawing_pb';
 import type { Relationship } from './metadata';
 import { type Metadata } from './metadata';
+export declare const DEFAULT_LINE_WIDTH = 5;
 export type Transform = TransformWithUUID | TransformProto;
 export declare const uuidBytesToString: (bytes: Uint8Array | undefined) => string | undefined;
 export declare const uuidStringToBytes: (uuid: string) => Uint8Array<ArrayBuffer>;

package/dist/draw.js

@@ -11,7 +11,7 @@ import { ColorFormat } from './buf/draw/v1/metadata_pb';
 import { isPointCloud } from './geometry';
 const vec3 = new Vector3();
 const rgb = { r: 0, g: 0, b: 0 };
-const DEFAULT_LINE_WIDTH = 5;
+export const DEFAULT_LINE_WIDTH = 5;
 const DEFAULT_POINT_SIZE = 10;
 const DEFAULT_NURBS_DEGREE = 3;
 const DEFAULT_NURBS_WEIGHT = 1;

package/dist/ecs/index.d.ts

@@ -1,6 +1,7 @@
 export { provideWorld, useWorld } from './useWorld';
 export { useQuery } from './useQuery.svelte';
 export { useTrait } from './useTrait.svelte';
+export { useTag } from './useTag.svelte';
 export { useTarget } from './useTarget.svelte';
 export { useParentName } from './useParentName.svelte';
 export { provideHierarchy } from './provideHierarchy.svelte';

package/dist/ecs/index.js

@@ -1,6 +1,7 @@
 export { provideWorld, useWorld } from './useWorld';
 export { useQuery } from './useQuery.svelte';
 export { useTrait } from './useTrait.svelte';
+export { useTag } from './useTag.svelte';
 export { useTarget } from './useTarget.svelte';
 export { useParentName } from './useParentName.svelte';
 export { provideHierarchy } from './provideHierarchy.svelte';

package/dist/ecs/traits.d.ts

@@ -1,5 +1,5 @@
 import type { GLTF as ThreeGltf } from 'three/examples/jsm/loaders/GLTFLoader.js';
-import { Geometry as ViamGeometry } from '@viamrobotics/sdk';
+import { type Pose, Geometry as ViamGeometry } from '@viamrobotics/sdk';
 import { type Entity } from 'koota';
 import { Matrix4, BufferGeometry as ThreeBufferGeometry } from 'three';
 export declare const Name: import("koota").Trait<() => string>;
@@ -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>;
+/**
+ * Suppresses the default frame-style world/local pose and parent-frame blocks
+ * in the details panel. Entities that render their own pose UI via the
+ * `details-extensions` portal target (e.g. gizmo plugin entities) opt in by
+ * adding this trait.
+ */
+export declare const CustomDetails: import("koota").Trait<() => boolean>;
 /**
  * True when the entity itself, or any of its parents up the `ChildOf`
  * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;
@@ -76,11 +83,14 @@ 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
  */
-export declare const Instanced: import("koota").Trait<() => boolean>;
+export declare const InstanceId: import("koota").Trait<() => number>;
 export declare const Instance: import("koota").Trait<{
     meshID: number;
     instanceID: number;
 }>;
+export declare const Instances: import("koota").Trait<{
+    count: number;
+}>;
 export declare const RenderOrder: import("koota").Trait<() => number>;
 export declare const Opacity: import("koota").Trait<() => number>;
 /**
@@ -108,9 +118,6 @@ export declare const Colors: import("koota").Trait<() => Uint8Array<ArrayBufferL
  * Per-vertex opacity values packed as uint8 (0-255).
  */
 export declare const Opacities: import("koota").Trait<() => Uint8Array<ArrayBuffer>>;
-export declare const Instances: import("koota").Trait<{
-    count: number;
-}>;
 export declare const Arrows: import("koota").Trait<{
     headAtPose: boolean;
 }>;
@@ -205,6 +212,10 @@ export declare const ChunkProgress: import("koota").Trait<{
  */
 export type InteractionLayerValue = 'selectTool';
 export declare const SelectToolInteractionLayer: import("koota").Trait<() => boolean>;
+/**
+ * This entity is selected by the user
+ */
+export declare const Selected: import("koota").TagTrait;
 /**
  * This entity can be safely removed from the scene by the user
  */
@@ -229,3 +240,9 @@ export declare const Geometry: (geometry: ViamGeometry) => import("koota").Trait
     r: number;
 }>] | [import("koota").Trait<() => ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>>, ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>];
 export declare const updateGeometryTrait: (entity: Entity, geometry?: ViamGeometry) => void;
+/**
+ * Patches an entity's `Matrix` trait in-place via the `Pose` round-trip
+ * (`matrixToPose` → merge → `poseToMatrix`), then signals `entity.changed(Matrix)`.
+ * No-ops silently if the entity has no `Matrix` trait.
+ */
+export declare const writeMatrix: (entity: Entity, patch: Partial<Pose>) => void;