@viamrobotics/motion-tools 0.19.2 → 1.0.2

package/dist/components/Details.svelte

@@ -3,7 +3,7 @@
 	lang="ts"
 >
 	import { OrientationVector } from '../three/OrientationVector'
-	import { Quaternion, Vector3, MathUtils } from 'three'
+	import { Quaternion, Vector3, MathUtils, type Vector2Like } from 'three'
 
 	const vec3 = new Vector3()
 	const quaternion = new Quaternion()
@@ -11,68 +11,81 @@
 </script>
 
 <script lang="ts">
+	import { draggable } from '@neodrag/svelte'
 	import { Check, Copy } from 'lucide-svelte'
 	import { useTask } from '@threlte/core'
 	import { Button, Icon, Select, Input } from '@viamrobotics/prime-core'
 	import {
-		useSelectedObject,
-		useFocusedObject,
-		useFocused,
+		useSelectedEntity,
+		useFocusedEntity,
 		useFocusedObject3d,
 		useSelectedObject3d,
 	} from '../hooks/useSelection.svelte'
-	import { useDraggable } from '../hooks/useDraggable.svelte'
-	import WeblabActive from './weblab/WeblabActive.svelte'
 	import { useFrames } from '../hooks/useFrames.svelte'
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 	import { FrameConfigUpdater } from '../FrameConfigUpdater.svelte'
-	import { useWeblabs } from '../hooks/useWeblabs.svelte'
-	import { WEBLABS_EXPERIMENTS } from '../hooks/useWeblabs.svelte'
 	import { useEnvironment } from '../hooks/useEnvironment.svelte'
+	import { traits, useTrait } from '../ecs'
+	import { useResourceByName } from '../hooks/useResourceByName.svelte'
+	import { PersistedState } from 'runed'
 
 	const { ...rest } = $props()
 
-	const focused = useFocused()
-	const focusedObject = useFocusedObject()
-	const focusedObject3d = useFocusedObject3d()
+	const dragPosition = new PersistedState<Vector2Like | undefined>(
+		'details-drag-position',
+		undefined
+	)
+
+	const resourceByName = useResourceByName()
 	const frames = useFrames()
 	const partConfig = usePartConfig()
-	const selectedObject = useSelectedObject()
+	const selectedEntity = useSelectedEntity()
 	const selectedObject3d = useSelectedObject3d()
-	const weblab = useWeblabs()
 	const environment = useEnvironment()
-	const object = $derived(focusedObject.current ?? selectedObject.current)
+	const focusedEntity = useFocusedEntity()
+	const focusedObject3d = useFocusedObject3d()
+	const entity = $derived(focusedEntity.current ?? selectedEntity.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
 	const worldPosition = $state({ x: 0, y: 0, z: 0 })
 	const worldOrientation = $state({ x: 0, y: 0, z: 1, th: 0 })
-	let geometryType = $derived.by(
-		() =>
-			(object?.geometry?.geometryType.case as 'none' | 'box' | 'sphere' | 'capsule' | undefined) ??
-			'none'
-	)
 
-	const localPose = $derived(object?.localEditedPose)
-	const referenceFrame = $derived(object?.referenceFrame ?? 'world')
-	const referenceFrameOptions = $derived(frames.getParentFrameOptions(object?.name ?? ''))
-	const isFrameNode = $derived(
-		frames.current.find((frame) => frame.name === object?.name) !== undefined
-	)
+	const name = useTrait(() => entity, traits.Name)
+	const parent = useTrait(() => entity, traits.Parent)
+	const localPose = useTrait(() => entity, traits.EditedPose)
+	const box = useTrait(() => entity, traits.Box)
+	const sphere = useTrait(() => entity, traits.Sphere)
+	const capsule = useTrait(() => entity, traits.Capsule)
+
+	const framesAPI = useTrait(() => entity, traits.FramesAPI)
+	const isFrameNode = $derived(!!framesAPI.current)
+
 	const showEditFrameOptions = $derived(isFrameNode && partConfig.hasEditPermissions)
+
+	const resourceName = $derived(name.current ? resourceByName.current[name.current] : undefined)
+
+	let geometryType = $derived.by<'box' | 'sphere' | 'capsule' | 'none'>(() => {
+		if (box.current) return 'box'
+		if (sphere.current) return 'sphere'
+		if (capsule.current) return 'capsule'
+		return 'none'
+	})
+
 	let copied = $state(false)
 
-	const draggable = useDraggable('details')
+	let dragElement = $state.raw<HTMLElement>()
 
-	const detailConfigUpdater = new FrameConfigUpdater(
-		() => object,
-		partConfig.updateFrame,
-		partConfig.deleteFrame,
-		() => referenceFrame
-	)
+	const detailConfigUpdater = new FrameConfigUpdater(partConfig.updateFrame, partConfig.deleteFrame)
 
 	const setGeometryType = (type: 'none' | 'box' | 'sphere' | 'capsule') => {
-		if (type === geometryType) return
+		if (type === geometryType) {
+			return
+		}
+
 		geometryType = type
-		detailConfigUpdater.setGeometryType(type)
+
+		if (entity) {
+			detailConfigUpdater.setGeometryType(entity, type)
+		}
 	}
 
 	const { start, stop } = useTask(
@@ -109,45 +122,43 @@
 	})
 
 	const getCopyClipboardText = () => {
-		if (weblab.isActive(WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME)) {
-			return JSON.stringify(
-				{
-					worldPosition: worldPosition,
-					worldOrientation: worldOrientation,
-					localPosition: {
-						x: localPose?.x,
-						y: localPose?.y,
-						z: localPose?.z,
-					},
-					localOrientation: {
-						x: localPose?.oX,
-						y: localPose?.oY,
-						z: localPose?.oZ,
-						th: localPose?.theta,
-					},
-					geometry: {
-						type: geometryType,
-						value: object?.geometry?.geometryType.value,
-					},
-					parentFrame: referenceFrame,
+		return JSON.stringify(
+			{
+				worldPosition: worldPosition,
+				worldOrientation: worldOrientation,
+				localPosition: {
+					x: localPose.current?.x,
+					y: localPose.current?.y,
+					z: localPose.current?.z,
 				},
-				null,
-				2
-			)
-		} else {
-			return JSON.stringify(
-				{
-					worldPosition: worldPosition,
-					worldOrientation: worldOrientation,
-					geometry: {
-						type: geometryType,
-						value: object?.geometry?.geometryType.value,
-					},
+				localOrientation: {
+					x: localPose.current?.oX,
+					y: localPose.current?.oY,
+					z: localPose.current?.oZ,
+					th: localPose.current?.theta,
 				},
-				null,
-				2
-			)
-		}
+				geometry: {
+					type: geometryType,
+					value: box.current ?? capsule.current ?? sphere.current,
+				},
+				parentFrame: parent.current ?? 'world',
+			},
+			null,
+			2
+		)
+	}
+
+	const isIntermediateInput = (input: string) => {
+		if (input === '0') return false
+
+		return (
+			input.startsWith('0') ||
+			input.startsWith('.') ||
+			input.startsWith('-0') ||
+			input.startsWith('-.') ||
+			(input.includes('.') && input.endsWith('0')) ||
+			input.endsWith('.')
+		)
 	}
 </script>
 
@@ -157,7 +168,7 @@
 	ariaLabel,
 }: {
 	label?: string
-	value: string
+	value?: number | string
 	ariaLabel: string
 })}
 	<div>
@@ -168,7 +179,7 @@
 			{label}
 		</span>
 
-		{value}
+		{typeof value === 'number' ? value.toFixed(2) : (value ?? '-')}
 	</div>
 {/snippet}
 
@@ -179,16 +190,14 @@
 	onInput,
 }: {
 	label: string
-	value: string
+	value?: number
 	ariaLabel: string
 	onInput: (value: string) => void
 })}
 	<div class="flex items-center gap-1">
 		<span class="text-subtle-2">{label}</span>
 		<Input
-			type="number"
 			aria-label={`mutable ${ariaLabel}`}
-			class="max-w-24 min-w-0 flex-1 rounded border px-1 py-0.5 text-xs"
 			{value}
 			on:input={(event) => onInput((event.target as HTMLInputElement).value)}
 		/>
@@ -219,23 +228,31 @@
 	</Select>
 {/snippet}
 
-{#if object}
+{#if entity}
+	{@const ParentFrame = showEditFrameOptions ? DropDownField : ImmutableField}
+	{@const ScalarAttribute = showEditFrameOptions ? MutableField : ImmutableField}
+
 	<div
-		class="border-medium bg-extralight absolute top-0 right-0 z-1000 m-2 {showEditFrameOptions
+		class="border-medium bg-extralight absolute top-0 right-0 z-10 m-2 {showEditFrameOptions
 			? 'w-80'
 			: 'w-60'} border p-2 text-xs"
-		style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
+		use:draggable={{
+			bounds: 'body',
+			handle: dragElement,
+			defaultPosition: dragPosition.current,
+			onDragEnd(data) {
+				dragPosition.current = { x: data.offsetX, y: data.offsetY }
+			},
+		}}
 		{...rest}
 	>
 		<div class="flex items-center justify-between gap-2 pb-2">
 			<div class="flex items-center gap-1">
-				<button
-					onmousedown={draggable.onDragStart}
-					onmouseup={draggable.onDragEnd}
-				>
+				<button bind:this={dragElement}>
 					<Icon name="drag" />
 				</button>
-				{object.name}
+				<strong>{name.current}</strong>
+				<span class="text-subtle-2">{resourceName?.subtype}</span>
 			</div>
 		</div>
 
@@ -263,302 +280,284 @@
 		</h3>
 
 		<div class="flex flex-col gap-2.5">
-			{#if worldPosition}
-				<div>
-					<strong class="font-semibold">world position</strong>
-					<span class="text-subtle-2">(m)</span>
-
-					<div class="flex gap-3">
-						<div>
-							<span class="text-subtle-2">x</span>
-							{worldPosition.x.toFixed(2)}
-						</div>
-						<div>
-							<span class="text-subtle-2">y</span>
-							{worldPosition.y.toFixed(2)}
-						</div>
-						<div>
-							<span class="text-subtle-2">z</span>
-							{worldPosition.z.toFixed(2)}
-						</div>
+			<div>
+				<strong class="font-semibold">world position</strong>
+				<span class="text-subtle-2">(mm)</span>
+
+				<div class="flex gap-3">
+					<div>
+						<span class="text-subtle-2">x</span>
+						{(worldPosition.x * 1000).toFixed(2)}
+					</div>
+					<div>
+						<span class="text-subtle-2">y</span>
+						{(worldPosition.y * 1000).toFixed(2)}
+					</div>
+					<div>
+						<span class="text-subtle-2">z</span>
+						{(worldPosition.z * 1000).toFixed(2)}
 					</div>
 				</div>
-			{/if}
+			</div>
 
-			{#if worldOrientation}
-				<div>
-					<strong class="font-semibold">world orientation</strong>
-					<span class="text-subtle-2">(deg)</span>
-					<div class="flex gap-3">
-						<div>
-							<span class="text-subtle-2">x</span>
-							{worldOrientation.x.toFixed(2)}
-						</div>
-						<div>
-							<span class="text-subtle-2">y</span>
-							{worldOrientation.y.toFixed(2)}
-						</div>
-						<div>
-							<span class="text-subtle-2">z</span>
-							{worldOrientation.z.toFixed(2)}
-						</div>
-						<div>
-							<span class="text-subtle-2">th</span>
-							{MathUtils.radToDeg(worldOrientation.th).toFixed(2)}
-						</div>
+			<div>
+				<strong class="font-semibold">world orientation</strong>
+				<span class="text-subtle-2">(deg)</span>
+				<div class="flex gap-3">
+					<div>
+						<span class="text-subtle-2">x</span>
+						{worldOrientation.x.toFixed(2)}
+					</div>
+					<div>
+						<span class="text-subtle-2">y</span>
+						{worldOrientation.y.toFixed(2)}
+					</div>
+					<div>
+						<span class="text-subtle-2">z</span>
+						{worldOrientation.z.toFixed(2)}
+					</div>
+					<div>
+						<span class="text-subtle-2">th</span>
+						{MathUtils.radToDeg(worldOrientation.th).toFixed(2)}
 					</div>
 				</div>
-			{/if}
+			</div>
 
-			<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}>
-				{@const ParentFrame = showEditFrameOptions ? DropDownField : ImmutableField}
+			<div>
+				<strong class="font-semibold">parent frame</strong>
+				<div class="mt-0.5 flex gap-3">
+					{@render ParentFrame({
+						ariaLabel: 'parent frame name',
+						value: parent.current ?? 'world',
+						options: frames.getParentFrameOptions(name.current ?? ''),
+						onChange: (value) => {
+							detailConfigUpdater.setFrameParent(entity, value)
+						},
+					})}
+				</div>
+			</div>
 
+			{#if localPose.current}
 				<div>
-					<strong class="font-semibold">parent frame</strong>
-					<div class="flex gap-3">
-						{@render ParentFrame({
-							ariaLabel: 'parent frame name',
-							value: referenceFrame,
-							options: referenceFrameOptions,
-							onChange: (value) => detailConfigUpdater.setFrameParent(value),
+					<strong class="font-semibold">local position</strong>
+					<span class="text-subtle-2">(mm)</span>
+
+					<div class="mt-0.5 flex gap-3">
+						{@render ScalarAttribute({
+							label: 'x',
+							ariaLabel: 'local position x coordinate',
+							value: localPose.current.x,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateLocalPosition(entity, { x: Number.parseFloat(value) })
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'y',
+							ariaLabel: 'local position y coordinate',
+							value: localPose.current.y,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateLocalPosition(entity, { y: Number.parseFloat(value) })
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'z',
+							ariaLabel: 'local position z coordinate',
+							value: localPose.current.z,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateLocalPosition(entity, { z: Number.parseFloat(value) })
+							},
 						})}
 					</div>
 				</div>
 
-				{#if localPose}
-					{@const PoseAttribute = showEditFrameOptions ? MutableField : ImmutableField}
-					<div>
-						<strong class="font-semibold">local position</strong>
-						<span class="text-subtle-2">(m)</span>
-
-						<div class="flex gap-3">
-							{@render PoseAttribute({
-								label: 'x',
-								ariaLabel: 'local position x coordinate',
-								value: localPose.x.toFixed(2),
-								onInput: (value) =>
-									detailConfigUpdater.updateLocalPosition({ x: parseFloat(value) }),
-							})}
-							{@render PoseAttribute({
-								label: 'y',
-								ariaLabel: 'local position y coordinate',
-								value: localPose.y.toFixed(2),
-								onInput: (value) =>
-									detailConfigUpdater.updateLocalPosition({ y: parseFloat(value) }),
-							})}
-							{@render PoseAttribute({
-								label: 'z',
-								ariaLabel: 'local position z coordinate',
-								value: localPose.z.toFixed(2),
-								onInput: (value) =>
-									detailConfigUpdater.updateLocalPosition({ z: parseFloat(value) }),
-							})}
-						</div>
+				<div>
+					<strong class="font-semibold">local orientation</strong>
+					<span class="text-subtle-2">(deg)</span>
+					<div class="flex {showEditFrameOptions ? 'gap-2' : 'gap-3'} mt-0.5">
+						{@render ScalarAttribute({
+							label: 'x',
+							ariaLabel: 'local orientation x coordinate',
+							value: localPose.current?.oX,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateLocalOrientation(entity, { oX: Number.parseFloat(value) })
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'y',
+							ariaLabel: 'local orientation y coordinate',
+							value: localPose.current?.oY,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateLocalOrientation(entity, { oY: Number.parseFloat(value) })
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'z',
+							ariaLabel: 'local orientation z coordinate',
+							value: localPose.current?.oZ,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateLocalOrientation(entity, { oZ: Number.parseFloat(value) })
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'th',
+							ariaLabel: 'local orientation theta degrees',
+							value: localPose.current?.theta,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateLocalOrientation(entity, {
+									theta: Number.parseFloat(value),
+								})
+							},
+						})}
 					</div>
+				</div>
+			{/if}
 
-					<div>
-						<strong class="font-semibold">local orientation</strong>
-						<span class="text-subtle-2">(deg)</span>
-						<div class="flex {showEditFrameOptions ? 'gap-2' : 'gap-3'}">
-							{@render PoseAttribute({
-								label: 'x',
-								ariaLabel: 'local orientation x coordinate',
-								value: localPose.oX.toFixed(2),
-								onInput: (value) =>
-									detailConfigUpdater.updateLocalOrientation({ oX: parseFloat(value) }),
-							})}
-							{@render PoseAttribute({
-								label: 'y',
-								ariaLabel: 'local orientation y coordinate',
-								value: localPose.oY.toFixed(2),
-								onInput: (value) =>
-									detailConfigUpdater.updateLocalOrientation({ oY: parseFloat(value) }),
-							})}
-							{@render PoseAttribute({
-								label: 'z',
-								ariaLabel: 'local orientation z coordinate',
-								value: localPose.oZ.toFixed(2),
-								onInput: (value) =>
-									detailConfigUpdater.updateLocalOrientation({ oZ: parseFloat(value) }),
-							})}
-							{@render PoseAttribute({
-								label: 'th',
-								ariaLabel: 'local orientation theta degrees',
-								value: localPose.theta.toFixed(2),
-								onInput: (value) =>
-									detailConfigUpdater.updateLocalOrientation({ theta: parseFloat(value) }),
-							})}
-						</div>
+			{#if showEditFrameOptions}
+				<div>
+					<strong class="font-semibold">geometry</strong>
+					<div class="mt-0.5 grid grid-cols-4 gap-1">
+						<Button
+							variant={geometryType === 'none' ? 'dark' : 'primary'}
+							class="h-6 px-2 py-1 text-xs"
+							onclick={() => setGeometryType('none')}
+						>
+							None
+						</Button>
+						<Button
+							variant={geometryType === 'box' ? 'dark' : 'primary'}
+							class="h-6 px-2 py-1 text-xs"
+							onclick={() => setGeometryType('box')}
+						>
+							Box
+						</Button>
+						<Button
+							variant={geometryType === 'sphere' ? 'dark' : 'primary'}
+							class="h-6 px-2 py-1 text-xs"
+							onclick={() => setGeometryType('sphere')}
+						>
+							Sphere
+						</Button>
+						<Button
+							variant={geometryType === 'capsule' ? 'dark' : 'primary'}
+							class="h-6 px-2 py-1 text-xs"
+							onclick={() => setGeometryType('capsule')}
+						>
+							Capsule
+						</Button>
 					</div>
-				{/if}
+				</div>
+			{/if}
 
-				{#if showEditFrameOptions}
-					<div>
-						<strong class="font-semibold">geometry</strong>
-						<div class="grid grid-cols-4 gap-1">
-							<Button
-								variant={geometryType === 'none' ? 'dark' : 'primary'}
-								class="h-6 px-2 py-1 text-xs"
-								onclick={() => setGeometryType('none')}>None</Button
-							>
-							<Button
-								variant={geometryType === 'box' ? 'dark' : 'primary'}
-								class="h-6 px-2 py-1 text-xs"
-								onclick={() => setGeometryType('box')}>Box</Button
-							>
-							<Button
-								variant={geometryType === 'sphere' ? 'dark' : 'primary'}
-								class="h-6 px-2 py-1 text-xs"
-								onclick={() => setGeometryType('sphere')}>Sphere</Button
-							>
-							<Button
-								variant={geometryType === 'capsule' ? 'dark' : 'primary'}
-								class="h-6 px-2 py-1 text-xs"
-								onclick={() => setGeometryType('capsule')}>Capsule</Button
-							>
-						</div>
+			{#if box.current}
+				<div>
+					<strong class="font-semibold"> dimensions </strong>
+					<span class="text-subtle-2">(box) (mm)</span>
+					<div class="mt-0.5 flex items-center gap-2">
+						{@render ScalarAttribute({
+							label: 'x',
+							ariaLabel: 'box dimensions x value input',
+							value: box.current.x,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateGeometry(entity, {
+									type: 'box',
+									x: Number.parseFloat(value),
+								})
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'y',
+							ariaLabel: 'box dimensions y value input',
+							value: box.current.y,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateGeometry(entity, {
+									type: 'box',
+									y: Number.parseFloat(value),
+								})
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'z',
+							ariaLabel: 'box dimensions z value input',
+							value: box.current.z,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateGeometry(entity, {
+									type: 'box',
+									z: Number.parseFloat(value),
+								})
+							},
+						})}
 					</div>
-				{/if}
-				{#if geometryType !== 'none'}
-					{@const GeometryAttribute = showEditFrameOptions ? MutableField : ImmutableField}
-					{#if geometryType === 'box'}
-						{@const { dimsMm } = object?.geometry?.geometryType.value as {
-							dimsMm: { x: number; y: number; z: number }
-						}}
-						<div>
-							<strong class="font-semibold">dimensions (box)</strong>
-							<div class="flex items-center gap-2">
-								{@render GeometryAttribute({
-									label: 'x',
-									ariaLabel: 'box dimensions x value input',
-									value: dimsMm?.x ? dimsMm.x.toFixed(2) : '-',
-									onInput: (value) =>
-										detailConfigUpdater.updateGeometry({ type: 'box', x: parseFloat(value) }),
-								})}
-								{@render GeometryAttribute({
-									label: 'y',
-									ariaLabel: 'box dimensions y value input',
-									value: dimsMm?.y ? dimsMm.y.toFixed(2) : '-',
-									onInput: (value) =>
-										detailConfigUpdater.updateGeometry({ type: 'box', y: parseFloat(value) }),
-								})}
-								{@render GeometryAttribute({
-									label: 'z',
-									ariaLabel: 'box dimensions z value input',
-									value: dimsMm?.z ? dimsMm.z.toFixed(2) : '-',
-									onInput: (value) =>
-										detailConfigUpdater.updateGeometry({ type: 'box', z: parseFloat(value) }),
-								})}
-							</div>
-						</div>
-					{/if}
-					{#if geometryType === 'capsule'}
-						{@const { radiusMm, lengthMm } = object?.geometry?.geometryType.value as {
-							radiusMm: number
-							lengthMm: number
-						}}
-						<div>
-							<strong class="font-semibold">dimensions (capsule)</strong>
-							<div class="flex items-center gap-2">
-								{@render GeometryAttribute({
-									label: 'r',
-									ariaLabel: 'capsule dimensions radius value input',
-									value: radiusMm ? radiusMm.toFixed(2) : '-',
-									onInput: (value) =>
-										detailConfigUpdater.updateGeometry({ type: 'capsule', r: parseFloat(value) }),
-								})}
-								{@render GeometryAttribute({
-									label: 'l',
-									ariaLabel: 'capsule dimensions length value input',
-									value: lengthMm ? lengthMm.toFixed(2) : '-',
-									onInput: (value) =>
-										detailConfigUpdater.updateGeometry({ type: 'capsule', l: parseFloat(value) }),
-								})}
-							</div>
-						</div>
-					{/if}
-					{#if geometryType === 'sphere'}
-						{@const { radiusMm } = object?.geometry?.geometryType.value as { radiusMm: number }}
-						<div>
-							<strong class="font-semibold">dimensions (sphere)</strong>
-							<div class="flex items-center gap-2">
-								{@render GeometryAttribute({
-									label: 'r',
-									ariaLabel: 'sphere dimensions radius value',
-									value: radiusMm ? radiusMm.toFixed(2) : '-',
-									onInput: (value) =>
-										detailConfigUpdater.updateGeometry({ type: 'sphere', r: parseFloat(value) }),
-								})}
-							</div>
-						</div>
-					{/if}
-				{/if}
-			</WeblabActive>
-
-			<WeblabActive
-				experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}
-				renderIfActive={false}
-			>
-				{#if object.geometry}
-					{#if object.geometry.geometryType.case === 'box'}
-						{@const { dimsMm } = object.geometry.geometryType.value}
-						<div>
-							<strong class="font-semibold">dimensions (box)</strong>
-							<div class="flex gap-3">
-								<div>
-									<span class="text-subtle-2">x</span>
-									{dimsMm?.x ? dimsMm.x.toFixed(2) : '-'}
-								</div>
-								<div>
-									<span class="text-subtle-2">y</span>
-									{dimsMm?.y ? dimsMm.y.toFixed(2) : '-'}
-								</div>
-								<div>
-									<span class="text-subtle-2">z</span>
-									{dimsMm?.z ? dimsMm.z.toFixed(2) : '-'}
-								</div>
-							</div>
-						</div>
-					{:else if object.geometry.geometryType.case === 'capsule'}
-						{@const { value } = object.geometry.geometryType}
-						<div>
-							<strong class="font-semibold">dimensions (capsule)</strong>
-							<div class="flex gap-3">
-								<div>
-									<span class="text-subtle-2">r</span>
-									{value.radiusMm ? value.radiusMm.toFixed(2) : '-'}
-								</div>
-								<div>
-									<span class="text-subtle-2">l</span>
-									{value.lengthMm ? value.lengthMm.toFixed(2) : '-'}
-								</div>
-							</div>
-						</div>
-					{:else if object.geometry.geometryType.case === 'sphere'}
-						<div class="flex justify-between">
-							<div>
-								<strong class="font-semibold">dimensions (sphere)</strong>
-								<div class="flex gap-3">
-									<div>
-										<span class="text-subtle-2">r</span>
-										{object.geometry.geometryType.value.radiusMm.toFixed(2)}
-									</div>
-								</div>
-							</div>
-						</div>
-					{/if}
-				{/if}
-			</WeblabActive>
+				</div>
+			{:else if capsule.current}
+				<div>
+					<strong class="font-semibold">dimensions</strong>
+					<span class="text-subtle-2">(capsule) (mm)</span>
+					<div class="mt-0.5 flex items-center gap-2">
+						{@render ScalarAttribute({
+							label: 'r',
+							ariaLabel: 'capsule dimensions radius value input',
+							value: capsule.current.r,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateGeometry(entity, {
+									type: 'capsule',
+									r: Number.parseFloat(value),
+								})
+							},
+						})}
+						{@render ScalarAttribute({
+							label: 'l',
+							ariaLabel: 'capsule dimensions length value input',
+							value: capsule.current.l,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateGeometry(entity, {
+									type: 'capsule',
+									l: Number.parseFloat(value),
+								})
+							},
+						})}
+					</div>
+				</div>
+			{:else if sphere.current}
+				<div>
+					<strong class="font-semibold">dimensions (sphere)</strong>
+					<div class="flex items-center gap-2">
+						{@render ScalarAttribute({
+							label: 'r',
+							ariaLabel: 'sphere dimensions radius value',
+							value: sphere.current.r,
+							onInput: (value) => {
+								if (isIntermediateInput(value)) return
+								detailConfigUpdater.updateGeometry(entity, {
+									type: 'sphere',
+									r: Number.parseFloat(value),
+								})
+							},
+						})}
+					</div>
+				</div>
+			{/if}
 		</div>
 
 		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
 
-		{#if focused.current}
+		{#if focusedEntity.current}
 			<Button
 				class="w-full"
 				icon="arrow-left"
 				variant="dark"
-				onclick={() => focused.set()}
+				onclick={() => focusedEntity.set()}
 			>
 				Exit object view
 			</Button>
@@ -566,20 +565,20 @@
 			<Button
 				class="w-full"
 				icon="image-filter-center-focus"
-				onclick={() => focused.set(object.uuid)}
+				onclick={() => focusedEntity.set(entity)}
 			>
 				Enter object view
 			</Button>
 		{/if}
 
-		<WeblabActive experiment={WEBLABS_EXPERIMENTS.MOTION_TOOLS_EDIT_FRAME}>
-			{#if showEditFrameOptions && environment.current.isStandalone}
-				<Button
-					variant="danger"
-					class="mt-2 w-full"
-					onclick={() => detailConfigUpdater.deleteFrame()}>Delete frame</Button
-				>
-			{/if}
-		</WeblabActive>
+		{#if showEditFrameOptions && environment.current.isStandalone}
+			<Button
+				variant="danger"
+				class="mt-2 w-full"
+				onclick={() => detailConfigUpdater.deleteFrame(entity)}
+			>
+				Delete frame
+			</Button>
+		{/if}
 	</div>
 {/if}