@viamrobotics/motion-tools 1.31.0 → 1.33.0

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const partID = usePartID()
+
+	const visionServices = useResourceNames(() => partID.current, 'vision')
+	const settings = useSettings()
+	const { disabledVisionServices } = $derived(settings.current)
+</script>
+
+<div class="text-gray-9 flex flex-col gap-1 text-xs">
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Enabled vision services</strong></h3>
+
+	{#each visionServices.current as visionService (visionService)}
+		<div class="flex items-center justify-between py-0.5">
+			{visionService.name}
+			<Switch
+				on={disabledVisionServices[visionService.name] !== true}
+				on:change={(event) => {
+					disabledVisionServices[visionService.name] = !event.detail
+				}}
+			/>
+		</div>
+	{:else}
+		No vision services detected
+	{/each}
+</div>

package/dist/components/overlay/settings/VisionSettings.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VisionSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type VisionSettings = ReturnType<typeof VisionSettings>;
+export default VisionSettings;

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { onMount } from 'svelte'
+
+	import { useWeblabs, WEBLABS_EXPERIMENTS } from '../../../hooks/useWeblabs.svelte'
+
+	const weblabs = useWeblabs()
+	const knownWeblabs = Object.keys(WEBLABS_EXPERIMENTS)
+
+	onMount(() => {
+		weblabs.load(knownWeblabs)
+	})
+</script>
+
+<div class="flex flex-col gap-1 text-xs">
+	{#each knownWeblabs as experiment (experiment)}
+		<label class="flex items-center justify-between gap-2 py-0.5">
+			{experiment}
+			<Switch
+				on={weblabs.isActive(experiment)}
+				on:change={() => weblabs.toggle(experiment)}
+			/>
+		</label>
+	{:else}
+		No weblabs defined
+	{/each}
+</div>

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

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Switch } from '@viamrobotics/prime-core'
+	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
+	const partID = usePartID()
+	const cameras = useResourceNames(() => partID.current, 'camera')
+	const settings = useSettings()
+
+	const currentRobotCameraWidgets = $derived(
+		settings.current.openCameraWidgets[partID.current] || []
+	)
+</script>
+
+<div class="text-gray-9 flex flex-col gap-1 text-xs">
+	<label class="flex items-center justify-between gap-2 py-1">
+		Arm positions
+		<Switch bind:on={settings.current.enableArmPositionsWidget} />
+	</label>
+
+	<h3 class="border-gray-3 border-b py-1 text-sm"><strong>Camera widgets</strong></h3>
+
+	{#each cameras.current as camera (camera)}
+		{@const isWidgetOpen = currentRobotCameraWidgets.includes(camera.name)}
+		<div class="flex items-center justify-between gap-2 py-0.5">
+			<span class="min-w-0 truncate">{camera.name}</span>
+			<Switch
+				on={isWidgetOpen}
+				on:change={(event) => {
+					settings.current.openCameraWidgets = event.detail
+						? {
+								...settings.current.openCameraWidgets,
+								[partID.current]: [...currentRobotCameraWidgets, camera.name],
+							}
+						: {
+								...settings.current.openCameraWidgets,
+								[partID.current]: currentRobotCameraWidgets.filter(
+									(widget) => widget !== camera.name
+								),
+							}
+				}}
+			/>
+		</div>
+	{:else}
+		No cameras detected
+	{/each}
+</div>

package/dist/components/overlay/settings/WidgetSettings.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const WidgetSettings: import("svelte").Component<Record<string, never>, {}, "">;
+type WidgetSettings = ReturnType<typeof WidgetSettings>;
+export default WidgetSettings;

package/dist/components/overlay/widgets/FramePov.svelte

@@ -7,7 +7,6 @@
 	import { usePartID } from '../../../hooks/usePartID.svelte'
 	import { useSettings } from '../../../hooks/useSettings.svelte'
 
-	import { useOrigin } from '../../xr/useOrigin.svelte'
 	import Button from '../dashboard/Button.svelte'
 	import FloatingPanel from '../FloatingPanel.svelte'
 
@@ -20,7 +19,6 @@
 	const { scene, renderer: mainRenderer, renderStage, invalidate } = useThrelte()
 	const settings = useSettings()
 	const partID = usePartID()
-	const origin = useOrigin()
 
 	// Three.js cameras look down -Z; Viam camera frames conventionally have the
 	// optical axis along +Z with image-down along +Y. A 180° rotation around X
@@ -53,7 +51,6 @@
 	const orthoHeight = $derived(BASE_ORTHO_HEIGHT / orthoZoom)
 
 	const composed = new Matrix4()
-	const originMat = new Matrix4()
 
 	$effect(() => {
 		if (!canvasEl) return
@@ -121,15 +118,7 @@
 
 			const povCamera = cameraMode === 'perspective' ? perspectiveCamera : orthographicCamera
 
-			// Compose origin × worldMatrix × VIAM_TO_THREE_CAMERA. The frame
-			// entities' WorldMatrix lives in ECS world space; the rendered scene
-			// is wrapped in a T.Group that applies `origin` on top, so the POV
-			// camera needs the same origin transform to share coordinate space
-			// with the meshes it's rendering.
-			originMat
-				.makeRotationZ(origin.rotation)
-				.setPosition(origin.position[0], origin.position[1], origin.position[2])
-			composed.copy(originMat).multiply(worldMat).multiply(VIAM_TO_THREE_CAMERA)
+			composed.multiplyMatrices(worldMat, VIAM_TO_THREE_CAMERA)
 			composed.decompose(povCamera.position, povCamera.quaternion, povCamera.scale)
 
 			const aspect = width / height

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;

package/dist/ecs/traits.js

@@ -6,6 +6,7 @@ import { ColorFormat } from '../buf/draw/v1/metadata_pb';
 import { createBox, createCapsule, createSphere } from '../geometry';
 import { parsePcdInWorker } from '../loaders/pcd';
 import { parsePlyInput } from '../ply';
+import { createPose, matrixToPose, poseToMatrix } from '../transform';
 export const Name = trait(() => '');
 export const UUID = trait(() => '');
 /**
@@ -61,6 +62,13 @@ export const InstancedMatrix = trait(() => ({
 }));
 export const Hovered = trait(() => true);
 export const Invisible = trait(() => true);
+/**
+ * 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 const CustomDetails = trait(() => true);
 /**
  * True when the entity itself, or any of its parents up the `ChildOf`
  * chain, has `Invisible`. Maintained by `provideInheritedInvisible`;
@@ -72,11 +80,14 @@ 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
  */
-export const Instanced = trait(() => true);
+export const InstanceId = trait(() => -1);
 export const Instance = trait({
     meshID: -1,
     instanceID: -1,
 });
+export const Instances = trait({
+    count: 0,
+});
 export const RenderOrder = trait(() => 0);
 export const Opacity = trait(() => 1);
 /**
@@ -100,9 +111,6 @@ export const Colors = trait(() => new Uint8Array());
  * Per-vertex opacity values packed as uint8 (0-255).
  */
 export const Opacities = trait(() => new Uint8Array());
-export const Instances = trait({
-    count: 0,
-});
 export const Arrows = trait({
     headAtPose: true,
 });
@@ -175,6 +183,10 @@ export const ReferenceFrame = trait(() => true);
  */
 export const ChunkProgress = trait({ loaded: 0, total: 0 });
 export const SelectToolInteractionLayer = trait(() => true);
+/**
+ * This entity is selected by the user
+ */
+export const Selected = trait();
 /**
  * This entity can be safely removed from the scene by the user
  */
@@ -250,6 +262,23 @@ export const updateGeometryTrait = (entity, geometry) => {
         updatePointCloud(entity, geometry.geometryType.value.pointCloud);
     }
 };
+/**
+ * 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 const writeMatrix = (entity, patch) => {
+    const matrix = entity.get(Matrix);
+    if (!matrix)
+        return;
+    const pose = matrixToPose(matrix, createPose());
+    const filtered = Object.fromEntries(Object.entries(patch).filter(([, v]) => v !== undefined));
+    if (Object.keys(filtered).length === 0)
+        return;
+    Object.assign(pose, filtered);
+    poseToMatrix(pose, matrix);
+    entity.changed(Matrix);
+};
 const updatePointCloud = (entity, pointCloud) => {
     parsePcdInWorker(new Uint8Array(pointCloud))
         .then((parsed) => {

package/dist/ecs/useTag.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type Entity, type TagTrait, type World } from 'koota';
+export declare function isWorld(target: Entity | World): target is World;
+export declare function useTag(target: () => Entity | World | undefined | null, tag: TagTrait): {
+    readonly current: boolean;
+};

package/dist/ecs/useTag.svelte.js

@@ -0,0 +1,43 @@
+import { $internal as internal } from 'koota';
+import { useWorld } from './useWorld';
+export function isWorld(target) {
+    return typeof target?.spawn === 'function';
+}
+export function useTag(target, tag) {
+    const contextWorld = useWorld();
+    let value = $state(false);
+    $effect(() => {
+        const t = target();
+        if (!t) {
+            value = false;
+            return;
+        }
+        const world = isWorld(t) ? t : contextWorld;
+        // ???
+        // eslint-disable-next-line prefer-const
+        let entity;
+        /**
+         * Subscribe before reading worldEntity: world.onAdd triggers lazy
+         * registration so worldEntity is guaranteed to exist after this.
+         */
+        const onAddUnsub = world.onAdd(tag, (e) => {
+            if (e === entity)
+                value = true;
+        });
+        const onRemoveUnsub = world.onRemove(tag, (e) => {
+            if (e === entity)
+                value = false;
+        });
+        entity = isWorld(t) ? t[internal].worldEntity : t;
+        value = entity.has(tag);
+        return () => {
+            onAddUnsub();
+            onRemoveUnsub();
+        };
+    });
+    return {
+        get current() {
+            return value;
+        },
+    };
+}

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

@@ -1,6 +1,6 @@
 export declare const ENVIRONMENT_CONTEXT_KEY: unique symbol;
 interface Environemnt {
-    viewerMode: 'edit' | 'monitor' | 'focus';
+    viewerMode: 'edit' | 'monitor';
     isStandalone: boolean;
     inputBindingsEnabled: boolean;
 }

package/dist/hooks/useLinked.svelte.js

@@ -1,20 +1,19 @@
 import { getContext, setContext } from 'svelte';
-import { relations, useWorld } from '../ecs';
-import { useFocusedEntity, useSelectedEntity } from './useSelection.svelte';
+import { relations, traits, useQuery, useWorld } from '../ecs';
 const linkedKey = Symbol('linked-context');
 export const provideLinkedEntities = () => {
     const world = useWorld();
-    const selectedEntity = useSelectedEntity();
-    const focusedEntity = useFocusedEntity();
-    const displayEntity = $derived(selectedEntity.current ?? focusedEntity.current);
-    let linkedEntities = $derived(displayEntity?.targetsFor(relations.SubEntityLink) ?? []);
+    const selected = useQuery(traits.Selected);
+    let linkedEntities = $derived(selected.current
+        .flatMap((entity) => entity.targetFor(relations.SubEntityLink))
+        .filter((entity) => entity !== undefined));
     const unsubAdd = world.onAdd(relations.SubEntityLink, (entity, target) => {
-        if (entity === displayEntity) {
+        if (selected.current.includes(entity)) {
             linkedEntities = [...linkedEntities, target];
         }
     });
     const unsubRemove = world.onRemove(relations.SubEntityLink, (entity, target) => {
-        if (entity === displayEntity) {
+        if (selected.current.includes(entity)) {
             linkedEntities = linkedEntities.filter((e) => e !== target);
         }
     });

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

@@ -5,9 +5,10 @@ interface RaycastEvent<T extends EventNames> {
     intersections: Intersection[];
 }
 type Callback<T extends EventNames> = (event: RaycastEvent<T>) => void;
-export declare const useMouseRaycaster: (getOptions?: () => {
-    enabled: boolean;
-}) => {
+interface MouseRaycasterOptions {
+    enabled?: boolean;
+}
+export declare const useMouseRaycaster: (getOptions?: () => MouseRaycasterOptions) => {
     raycaster: Raycaster;
     onclick: (cb: Callback<"click">) => void;
     onmove: (cb: Callback<"move">) => void;

package/dist/hooks/useMouseRaycaster.svelte.js

@@ -69,6 +69,7 @@ export const useMouseRaycaster = (getOptions) => {
         if (!options.enabled) {
             return;
         }
+        raycaster.firstHitOnly = true;
         dom.addEventListener('pointermove', onPointerMove, { passive: true });
         dom.addEventListener('pointerdown', onPointerDown, { passive: true });
         dom.addEventListener('pointerup', onPointerUp, { passive: true });

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

@@ -1,7 +1,7 @@
 import type { ColorRepresentation } from 'three';
 export interface Settings {
     cameraMode: 'orthographic' | 'perspective';
-    interactionMode: 'navigate' | 'measure' | 'select';
+    interactionMode: 'navigate' | 'measure' | 'select' | 'gizmo';
     refreshRates: {
         poses: number;
         pointclouds: number;

package/dist/plugins/Focus/Focus.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Portal } from '@threlte/extras'
+	import { PressedKeys } from 'runed'
+
+	import Button from '../../components/overlay/dashboard/Button.svelte'
+	import { traits, useQuery } from '../../ecs'
+
+	import FocusBox from './FocusBox.svelte'
+	import { provideFocus } from './provideFocus.svelte'
+
+	let focusing = $state(false)
+
+	provideFocus(() => focusing)
+
+	const selected = useQuery(traits.Selected)
+
+	const canFocus = $derived(selected.current.length > 0 || focusing)
+
+	const keys = new PressedKeys()
+
+	keys.onKeys('/', () => {
+		if (selected.current.length > 0 && !focusing) {
+			focusing = true
+		} else if (focusing) {
+			focusing = false
+		}
+	})
+</script>
+
+<Portal id="dashboard">
+	<fieldset class="flex">
+		<Button
+			icon="focus"
+			active={focusing}
+			disabled={!canFocus}
+			description="Focus selection"
+			hotkey="/"
+			onclick={() => (focusing = !focusing)}
+		/>
+	</fieldset>
+</Portal>
+
+{#if focusing}
+	<FocusBox />
+{/if}

package/dist/plugins/Focus/Focus.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Focus: import("svelte").Component<Record<string, never>, {}, "">;
+type Focus = ReturnType<typeof Focus>;
+export default Focus;

package/dist/plugins/Focus/FocusBox.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { T, useThrelte } from '@threlte/core'
+	import { Gizmo, TrackballControls } from '@threlte/extras'
+	import { untrack } from 'svelte'
+	import { Box3, Vector3 } from 'three'
+
+	import Camera from '../../components/Camera.svelte'
+	import { traits, useQuery } from '../../ecs'
+	import { useCameraControls } from '../../hooks/useControls.svelte'
+
+	const { scene } = useThrelte()
+	const cameraControls = useCameraControls()
+	const selected = useQuery(traits.Selected)
+
+	/**
+	 * Save the main camera controls and their state the instant focus begins —
+	 * this runs before the TrackballControls below swaps the shared context, so
+	 * `current` is still the main controls. On teardown we hand `current` back to
+	 * them (the trackball never restores it) and reset them to the saved view, so
+	 * exiting focus returns the camera to where it was. camera-controls exposes
+	 * saveState()/reset(); TrackballControls does not, which also narrows the type.
+	 */
+	$effect.pre(() => {
+		const previousControls = untrack(() => cameraControls.current)
+		const restorableControls =
+			previousControls && 'saveState' in previousControls ? previousControls : undefined
+		restorableControls?.saveState()
+
+		return () => {
+			if (!restorableControls) return
+			cameraControls.set(restorableControls)
+			restorableControls.reset(false)
+		}
+	})
+
+	const box = new Box3()
+	const vec = new Vector3()
+
+	let center = $state.raw<[number, number, number]>([0, 0, 0])
+	let size = $state.raw<[number, number, number]>([0, 0, 0])
+
+	/**
+	 * Frame the camera on the selection captured when focus was entered. Reading
+	 * the selection untracked leaves this effect with no reactive dependencies,
+	 * so it runs once on mount and the framing stays put — changing the selection
+	 * while focused must not re-frame or reset the camera.
+	 */
+	$effect(() => {
+		box.makeEmpty()
+		for (const entity of untrack(() => selected.current)) {
+			const object3d = scene.getObjectByName(entity as unknown as string)
+			if (object3d) {
+				box.expandByObject(object3d)
+			}
+		}
+
+		size = box.getSize(vec).toArray()
+		center = box.getCenter(vec).toArray()
+	})
+</script>
+
+<Camera position={[size[0] + 1, size[0] + 1, size[0] + 1]}>
+	<TrackballControls
+		target={center}
+		oncreate={(ref) => cameraControls.set(ref)}
+	>
+		<Gizmo placement="bottom-right" />
+	</TrackballControls>
+</Camera>
+
+<T.Box3Helper
+	args={[box, 'red']}
+	bvh={{ enabled: false }}
+	raycast={() => null}
+/>

package/dist/plugins/Focus/FocusBox.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FocusBox: import("svelte").Component<Record<string, never>, {}, "">;
+type FocusBox = ReturnType<typeof FocusBox>;
+export default FocusBox;

package/dist/plugins/Focus/provideFocus.svelte.d.ts

@@ -0,0 +1 @@
+export declare const provideFocus: (focusing: () => boolean) => void;