@viamrobotics/test-widgets 0.8.0 → 0.9.1

package/README.md

@@ -4,6 +4,39 @@ A library of Svelte components for interacting with Viam-powered machines. Each
 
 Also includes reusable building blocks for visualizations, such as maps (MapLibre), SLAM mapping, 3D point clouds (Three.js), etc.
 
+## Entry points
+
+There is one root entry plus a registry entry point. Which you reach for depends on whether you name widgets **statically** or resolve them **dynamically** at runtime.
+
+### Static use
+
+Import the widget components you need and render them:
+
+```ts
+import { ArmWidget, CameraWidget } from '@viamrobotics/test-widgets'
+```
+
+### Dynamic use
+
+If you resolve widgets at runtime from a resource (for example, a control panel that lists every API of every resource on a scanned machine), import the registry:
+
+```ts
+import { apiWidgetsForResource, widgetForResource } from '@viamrobotics/test-widgets/registry'
+```
+
+- **`@viamrobotics/test-widgets/registry`** — the lookups `apiWidgetsForResource(resource)`, `widgetForResource(resource)`, and `availableAPIWidgets()`, which resolve any resource, component or service. The registry references every widget, so importing it pulls **all** widgets and their optional peers into your build. Keeping these lookups out of the root is what lets the root stay tree-shakeable.
+
+### Optional peer dependencies
+
+A few widgets depend on optional peers. Install a peer only if you render a widget (or import an entry point) that needs it; otherwise it stays out of your build.
+
+| Optional peer         | Required by                                                                                                                                              |
+| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `maplibre-gl`         | `MovementSensorWidget` (a **component** — plots GPS position on a map), `NavigationServiceWidget`, and the `maplibre` / `navigation-map` building blocks |
+| `@viamrobotics/three` | `NavigationServiceWidget` (navigation-map 3D geometry)                                                                                                   |
+
+So a consumer that names widgets statically installs a peer only for the widgets it renders: `maplibre-gl` only if it renders `MovementSensorWidget` or `NavigationServiceWidget`, and `@viamrobotics/three` only for `NavigationServiceWidget`. Importing `/registry` references every widget, so it needs both.
+
 ## Playground
 
 The playground (`pnpm dev`) can be used to develop the test-cards against prod robots with prod modules.

package/dist/components/index.d.ts

@@ -42,6 +42,8 @@ export { default as GripperIsMovingWidget } from './widgets/gripper/is-moving-wi
 export { default as GripperOpenWidget } from './widgets/gripper/open.svelte';
 export { default as InputControllerWidget } from './widgets/input-controller/input-controller.svelte';
 export { default as MLModelServiceWidget } from './widgets/ml-model-service/ml-model-service.svelte';
+export { default as MotionServiceWidget } from './widgets/motion/motion.svelte';
+export { default as MotionMoveWidget } from './widgets/motion/move-widget.svelte';
 export { default as MotorGoForWidget } from './widgets/motor/go-for-view.svelte';
 export { default as MotorGoToWidget } from './widgets/motor/go-to-view.svelte';
 export { default as MotorWidget } from './widgets/motor/motor.svelte';

package/dist/components/index.js

@@ -41,6 +41,8 @@ export { default as GripperIsMovingWidget } from './widgets/gripper/is-moving-wi
 export { default as GripperOpenWidget } from './widgets/gripper/open.svelte';
 export { default as InputControllerWidget } from './widgets/input-controller/input-controller.svelte';
 export { default as MLModelServiceWidget } from './widgets/ml-model-service/ml-model-service.svelte';
+export { default as MotionServiceWidget } from './widgets/motion/motion.svelte';
+export { default as MotionMoveWidget } from './widgets/motion/move-widget.svelte';
 export { default as MotorGoForWidget } from './widgets/motor/go-for-view.svelte';
 export { default as MotorGoToWidget } from './widgets/motor/go-to-view.svelte';
 export { default as MotorWidget } from './widgets/motor/motor.svelte';

package/dist/components/navigation-map/components/obstacle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
-	import { AxesHelper, CapsuleGeometry } from '@viamrobotics/motion-tools/lib'
 	import { theme } from '@viamrobotics/prime-core/theme'
 	import {
 		LngLat,
@@ -11,6 +10,8 @@
 	import { fromStore } from 'svelte/store'
 	import { type BufferGeometry, Vector2 } from 'three'
 
+	import { AxesHelper, CapsuleGeometry } from '../../three'
+
 	import type { Obstacle } from '../types'
 
 	import { useMapLibre, useMapLibreEvent } from '../../maplibre'

package/dist/components/three/capsule-geometry.d.ts

@@ -0,0 +1,10 @@
+import { LatheGeometry } from 'three';
+/**
+ * An alternate definition of a THREE.CapsuleGeometry: the length
+ * represents the entire length of the capsule, including the rounded ends,
+ * rather than just the midsection, which is the default THREE.CapsuleGeometry definition.
+ */
+export declare class CapsuleGeometry extends LatheGeometry {
+    type: string;
+    constructor(r?: number, l?: number, capSegments?: number, radialSegments?: number);
+}

package/dist/components/three/capsule-geometry.js

@@ -0,0 +1,19 @@
+import { LatheGeometry, Path } from 'three';
+/**
+ * An alternate definition of a THREE.CapsuleGeometry: the length
+ * represents the entire length of the capsule, including the rounded ends,
+ * rather than just the midsection, which is the default THREE.CapsuleGeometry definition.
+ */
+export class CapsuleGeometry extends LatheGeometry {
+    type = 'CapsuleGeometry';
+    constructor(r = 1, l = 1, capSegments = 4, radialSegments = 8) {
+        const radius = Math.max(0.0001, r);
+        const length = Math.max(0.0001, l);
+        const path = new Path();
+        const midsectionLength = length - 2 * radius;
+        path.absarc(0, -midsectionLength / 2, radius, Math.PI * 1.5, 0);
+        path.absarc(0, midsectionLength / 2, radius, 0, Math.PI * 0.5);
+        super(path.getPoints(capSegments), radialSegments);
+        this.rotateX(-Math.PI / 2);
+    }
+}

package/dist/components/three/index.d.ts

@@ -1 +1,2 @@
 export { default as AxesHelper } from './axes-helper.svelte';
+export { CapsuleGeometry } from './capsule-geometry.ts';

package/dist/components/three/index.js

@@ -1 +1,2 @@
 export { default as AxesHelper } from './axes-helper.svelte';
+export { CapsuleGeometry } from "./capsule-geometry.js";

package/dist/components/widgets/do-command/do-command.svelte

@@ -19,9 +19,16 @@
 		resource: ResourceName
 		/** Rendered above the input/output editor row. */
 		header?: Snippet<[{ input: string; setInput: (value: string) => void }]>
+		/**
+		 * Optional bindable editor value. Use `bind:input` (including function
+		 * bindings) to control it from a parent. When unbound, falls back to the
+		 * widget's persisted local state — assignments still update locally so the
+		 * editor cannot freeze.
+		 */
+		input?: string
 	}
 
-	const { partID, resource, header }: Props = $props()
+	let { partID, resource, header, input = $bindable() }: Props = $props()
 
 	const client = createDoCommandClient(
 		() => resource,
@@ -37,19 +44,26 @@
 
 	const uid = $props.id()
 
-	const input = $derived(new PersistedState(`${partID}/${getResourceKey(resource)}`, '{\n}'))
+	const persisted = $derived(new PersistedState(`${partID}/${getResourceKey(resource)}`, '{\n}'))
+
+	const displayInput = $derived(input ?? persisted.current ?? '{\n}')
 
 	let output = $state('')
 
+	const updateInput = (value: string) => {
+		input = value
+		persisted.current = value
+	}
+
 	const setInput = (value: string) => {
-		input.current = value
+		updateInput(value)
 	}
 
 	const execute = async () => {
 		try {
 			lastErr = null
 			output = ''
-			const parsedInput = Struct.fromJsonString(input.current ?? '{}')
+			const parsedInput = Struct.fromJsonString(displayInput)
 			const data = await doCommandMutation.mutateAsync([parsedInput])
 			output = JSON.stringify(data, null, 2)
 			lastErr = null
@@ -62,7 +76,7 @@
 {#if isSupported}
 	{#if header}
 		<div class="border-b">
-			{@render header({ input: input.current ?? '{}', setInput })}
+			{@render header({ input: displayInput, setInput })}
 		</div>
 	{/if}
 	<div class="flex flex-row items-center justify-between">
@@ -71,9 +85,9 @@
 			<CodeEditor
 				label="input"
 				language="json"
-				value={input.current ?? '{}'}
+				value={displayInput}
 				onChange={(nextInput: string) => {
-					input.current = nextInput
+					updateInput(nextInput)
 				}}
 				class="h-56 overflow-y-auto"
 				errorMessageID={lastErr ? uid : undefined}

package/dist/components/widgets/do-command/do-command.svelte.d.ts

@@ -8,7 +8,14 @@ interface Props {
         input: string;
         setInput: (value: string) => void;
     }]>;
+    /**
+     * Optional bindable editor value. Use `bind:input` (including function
+     * bindings) to control it from a parent. When unbound, falls back to the
+     * widget's persisted local state — assignments still update locally so the
+     * editor cannot freeze.
+     */
+    input?: string;
 }
-declare const DoCommand: import("svelte").Component<Props, {}, "">;
+declare const DoCommand: import("svelte").Component<Props, {}, "input">;
 type DoCommand = ReturnType<typeof DoCommand>;
 export default DoCommand;

package/dist/components/widgets/motion/frame-select.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Label, Select } from '@viamrobotics/prime-core'
+
+	interface Props {
+		value: string
+		options: string[]
+		label: string
+		onChange: (value: string) => void
+	}
+
+	const { value, options, label, onChange }: Props = $props()
+</script>
+
+<Label>
+	{label}
+
+	<Select
+		slot="input"
+		{value}
+		on:change={(event) => {
+			onChange((event.target as HTMLSelectElement).value)
+		}}
+	>
+		<option value="">Select a frame…</option>
+		{#each options as name (name)}
+			<option value={name}>{name}</option>
+		{/each}
+	</Select>
+</Label>

package/dist/components/widgets/motion/frame-select.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    value: string;
+    options: string[];
+    label: string;
+    onChange: (value: string) => void;
+}
+declare const FrameSelect: import("svelte").Component<Props, {}, "">;
+type FrameSelect = ReturnType<typeof FrameSelect>;
+export default FrameSelect;

package/dist/components/widgets/motion/frame-system-config.d.ts

@@ -0,0 +1,37 @@
+/** The subset of a `FrameSystemConfig` entry these helpers read. */
+export interface FrameConfigEntry {
+    frame?: {
+        referenceFrame?: string;
+        poseInObserverFrame?: {
+            referenceFrame?: string;
+        };
+    };
+}
+/**
+ * The components the motion service can `Move` are exactly the frames in the
+ * machine's frame system config. `Move` builds a kinematic chain to a frame, so
+ * anything with a configured frame is a valid target.
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @returns The non-empty reference frame names, sorted alphabetically.
+ */
+export declare const movableFrameNames: (config: FrameConfigEntry[] | undefined) => string[];
+/**
+ * The parent frame a frame is attached to in the machine's frame system. A
+ * frame's parent is the reference frame of the pose that positions it (its
+ * observer frame), so `getPose` and `Move` can be expressed relative to it.
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @param frameName - The frame whose parent to look up.
+ * @returns The parent frame name, or `'world'` when there is no configured parent.
+ */
+export declare const parentFrame: (config: FrameConfigEntry[] | undefined, frameName: string) => string;
+/**
+ * The reference frames a destination pose can be expressed in: the root
+ * `'world'` frame first, then every frame in the machine's frame system
+ * (already sorted alphabetically by `movableFrameNames`).
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @returns The selectable reference frame names, always led by `'world'`.
+ */
+export declare const referenceFrameNames: (config: FrameConfigEntry[] | undefined) => string[];

package/dist/components/widgets/motion/frame-system-config.js

@@ -0,0 +1,42 @@
+/**
+ * The components the motion service can `Move` are exactly the frames in the
+ * machine's frame system config. `Move` builds a kinematic chain to a frame, so
+ * anything with a configured frame is a valid target.
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @returns The non-empty reference frame names, sorted alphabetically.
+ */
+export const movableFrameNames = (config) => {
+    if (!config) {
+        return [];
+    }
+    return config
+        .map((entry) => entry.frame?.referenceFrame ?? '')
+        .filter((name) => name !== '')
+        .toSorted((a, b) => a.localeCompare(b));
+};
+/**
+ * The parent frame a frame is attached to in the machine's frame system. A
+ * frame's parent is the reference frame of the pose that positions it (its
+ * observer frame), so `getPose` and `Move` can be expressed relative to it.
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @param frameName - The frame whose parent to look up.
+ * @returns The parent frame name, or `'world'` when there is no configured parent.
+ */
+export const parentFrame = (config, frameName) => {
+    const entry = config?.find((item) => item.frame?.referenceFrame === frameName);
+    return entry?.frame?.poseInObserverFrame?.referenceFrame || 'world';
+};
+/**
+ * The reference frames a destination pose can be expressed in: the root
+ * `'world'` frame first, then every frame in the machine's frame system
+ * (already sorted alphabetically by `movableFrameNames`).
+ *
+ * @param config - The machine's frame system config, or `undefined` while loading.
+ * @returns The selectable reference frame names, always led by `'world'`.
+ */
+export const referenceFrameNames = (config) => {
+    const frames = movableFrameNames(config).filter((name) => name !== 'world');
+    return ['world', ...frames];
+};

package/dist/components/widgets/motion/motion.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { createRobotQuery, useRobotClient } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+
+	import FrameSelect from './frame-select.svelte'
+	import { movableFrameNames, parentFrame, referenceFrameNames } from './frame-system-config'
+	import MoveWidget from './move-widget.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const robotClient = useRobotClient(() => partID)
+	const frameSystem = createRobotQuery(robotClient, 'frameSystemConfig', () => ({
+		refetchInterval: 5000,
+	}))
+
+	const frameNames = $derived(movableFrameNames(frameSystem.data))
+	const destinationOptions = $derived(referenceFrameNames(frameSystem.data))
+
+	let selectedFrame = $state<string>()
+	const frameName = $derived(selectedFrame ?? frameNames[0] ?? '')
+
+	let selectedDestination = $state<string>()
+	const destination = $derived(selectedDestination ?? parentFrame(frameSystem.data, frameName))
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<ApiSection
+			title="Move"
+			api="rdk:service:motion"
+		>
+			<div class="flex min-w-0 flex-col gap-4">
+				<FrameSelect
+					label="Component"
+					value={frameName}
+					options={frameNames}
+					onChange={(value) => {
+						selectedFrame = value
+					}}
+				/>
+				<FrameSelect
+					label="Destination frame"
+					value={destination}
+					options={destinationOptions}
+					onChange={(value) => {
+						selectedDestination = value
+					}}
+				/>
+				<MoveWidget
+					{partID}
+					{resourceName}
+					{frameName}
+					{destination}
+				/>
+			</div>
+		</ApiSection>
+	{/snippet}
+</ConnectionStatus>

package/dist/components/widgets/motion/motion.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+}
+declare const Motion: import("svelte").Component<Props, {}, "">;
+type Motion = ReturnType<typeof Motion>;
+export default Motion;

package/dist/components/widgets/motion/move-widget.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { MotionClient, type RobotClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createRobotQuery,
+		useRobotClient,
+	} from '@viamrobotics/svelte-sdk'
+
+	import Move from './move.svelte'
+	import { type MoveInput, parseMoveArgs } from './parse-move-args'
+
+	interface Props {
+		partID: string
+		resourceName: string
+		/** The frame to move — a frame from the machine's frame system. */
+		frameName: string
+		/** The reference frame the destination pose is expressed in. */
+		destination: string
+	}
+
+	const { partID, resourceName, frameName, destination }: Props = $props()
+
+	const robotClient = useRobotClient(() => partID)
+	const client = createResourceClient(
+		MotionClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const move = createResourceMutation(client, 'move')
+
+	// Pre-fill the editor with the frame's current pose in the destination frame.
+	const poseArgs = $derived<Parameters<RobotClient['getPose']>>([frameName, destination, []])
+	const poseQuery = createRobotQuery(
+		robotClient,
+		'getPose',
+		() => poseArgs,
+		() => ({ enabled: frameName !== '' })
+	)
+
+	const currentPose = $derived(poseQuery.data?.pose)
+	const poseError = $derived(poseQuery.error instanceof Error ? poseQuery.error : null)
+
+	let parseError = $state<Error>()
+
+	const executeMove = (input: MoveInput) => {
+		try {
+			parseError = undefined
+			move.mutate(parseMoveArgs(frameName, input), {})
+		} catch (error) {
+			parseError = error instanceof Error ? error : new Error(String(error))
+		}
+	}
+</script>
+
+<Move
+	{frameName}
+	{destination}
+	{currentPose}
+	isPending={move.isPending}
+	lastError={parseError ?? move.error ?? poseError}
+	storageKey={`${partID}/${resourceName}/motion-move`}
+	onExecute={executeMove}
+/>

package/dist/components/widgets/motion/move-widget.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    partID: string;
+    resourceName: string;
+    /** The frame to move — a frame from the machine's frame system. */
+    frameName: string;
+    /** The reference frame the destination pose is expressed in. */
+    destination: string;
+}
+declare const MoveWidget: import("svelte").Component<Props, {}, "">;
+type MoveWidget = ReturnType<typeof MoveWidget>;
+export default MoveWidget;

package/dist/components/widgets/motion/move.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { Pose } from '@viamrobotics/sdk'
+
+	import { Button, Progress } from '@viamrobotics/prime-core'
+	import { CodeEditor } from '@viamrobotics/prime-core/code-editor'
+	import { PersistedState } from 'runed'
+
+	import ErrorDisplay from '../../error.svelte'
+
+	import type { MoveInput } from './parse-move-args'
+
+	import PoseInput from './pose-input.svelte'
+
+	interface Props {
+		/** The frame being moved. Gates execution and re-seeds the editor on change. */
+		frameName: string
+		/** The reference frame the destination pose is expressed in. */
+		destination: string
+		currentPose?: Pose
+		isPending: boolean
+		lastError: Error | null
+		storageKey: string
+		onExecute: (input: MoveInput) => void
+	}
+
+	const {
+		frameName,
+		destination,
+		currentPose,
+		isPending,
+		lastError,
+		storageKey,
+		onExecute,
+	}: Props = $props()
+
+	const zeroPose: Pose = { x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 }
+
+	const editKey = $derived(JSON.stringify([frameName, destination]))
+	let edit = $state<{ key: string; pose: Pose }>()
+	const isEdited = $derived(edit?.key === editKey)
+	const pose = $derived(isEdited && edit ? edit.pose : (currentPose ?? zeroPose))
+
+	const worldState = $derived(new PersistedState(`${storageKey}/world-state`, ''))
+	const constraints = $derived(new PersistedState(`${storageKey}/constraints`, ''))
+
+	const disabled = $derived(frameName === '' || isPending)
+
+	const execute = () => {
+		onExecute({
+			referenceFrame: destination,
+			pose,
+			worldStateJson: worldState.current,
+			constraintsJson: constraints.current,
+		})
+	}
+</script>
+
+<div class="flex min-w-0 flex-col gap-4">
+	<PoseInput
+		{pose}
+		onPoseChange={(next) => {
+			edit = { key: editKey, pose: next }
+		}}
+	/>
+
+	<div class="flex flex-col gap-1">
+		<span class="text-xs font-medium">
+			World state <abbr class="text-subtle-2">(optional JSON)</abbr>
+		</span>
+		<CodeEditor
+			label="World state"
+			language="json"
+			value={worldState.current}
+			onChange={(next: string) => {
+				worldState.current = next
+			}}
+			class="h-32 overflow-y-auto"
+		/>
+	</div>
+
+	<div class="flex flex-col gap-1">
+		<span class="text-xs font-medium">
+			Constraints <abbr class="text-subtle-2">(optional JSON)</abbr>
+		</span>
+		<CodeEditor
+			label="Constraints"
+			language="json"
+			value={constraints.current}
+			onChange={(next: string) => {
+				constraints.current = next
+			}}
+			class="h-32 overflow-y-auto"
+		/>
+	</div>
+
+	<div class="flex items-center gap-2">
+		<Button
+			class="w-fit"
+			icon="play-circle-outline"
+			variant="dark"
+			{disabled}
+			onclick={execute}
+		>
+			Execute
+		</Button>
+		{#if isPending}
+			<Progress
+				size="medium"
+				variant="dark"
+			/>
+		{/if}
+	</div>
+
+	<p class="text-subtle-2 text-xs">
+		Move blocks until the motion completes. Stop the component itself to interrupt.
+	</p>
+
+	<ErrorDisplay {lastError} />
+</div>

package/dist/components/widgets/motion/move.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { MoveInput } from './parse-move-args';
+interface Props {
+    /** The frame being moved. Gates execution and re-seeds the editor on change. */
+    frameName: string;
+    /** The reference frame the destination pose is expressed in. */
+    destination: string;
+    currentPose?: Pose;
+    isPending: boolean;
+    lastError: Error | null;
+    storageKey: string;
+    onExecute: (input: MoveInput) => void;
+}
+declare const Move: import("svelte").Component<Props, {}, "">;
+type Move = ReturnType<typeof Move>;
+export default Move;

package/dist/components/widgets/motion/parse-move-args.d.ts

@@ -0,0 +1,24 @@
+import { Constraints, type Pose, type PoseInFrame, WorldState } from '@viamrobotics/sdk';
+/** User-entered inputs for a motion `Move` call. Pose is always mm + degrees. */
+export interface MoveInput {
+    referenceFrame: string;
+    pose: Pose;
+    /** Optional `WorldState` as proto JSON. Empty/whitespace means "omit". */
+    worldStateJson: string;
+    /** Optional `Constraints` as proto JSON. Empty/whitespace means "omit". */
+    constraintsJson: string;
+}
+/** Positional arguments for `MotionClient.move`, ready to spread into `mutate`. */
+export type MoveArgs = [PoseInFrame, string, WorldState | undefined, Constraints | undefined];
+/**
+ * Builds the positional arguments for `MotionClient.move` from form inputs.
+ *
+ * Empty or whitespace-only JSON fields are omitted (passed as `undefined`).
+ * Non-empty JSON is parsed with the generated message classes and throws on
+ * invalid input — callers should catch and surface the error.
+ *
+ * @param frameName - The frame to move.
+ * @param input - The pose, reference frame, and optional world-state/constraints JSON.
+ * @returns The `[destination, frameName, worldState?, constraints?]` tuple.
+ */
+export declare const parseMoveArgs: (frameName: string, input: MoveInput) => MoveArgs;

package/dist/components/widgets/motion/parse-move-args.js

@@ -0,0 +1,23 @@
+import { Constraints, WorldState } from '@viamrobotics/sdk';
+/**
+ * Builds the positional arguments for `MotionClient.move` from form inputs.
+ *
+ * Empty or whitespace-only JSON fields are omitted (passed as `undefined`).
+ * Non-empty JSON is parsed with the generated message classes and throws on
+ * invalid input — callers should catch and surface the error.
+ *
+ * @param frameName - The frame to move.
+ * @param input - The pose, reference frame, and optional world-state/constraints JSON.
+ * @returns The `[destination, frameName, worldState?, constraints?]` tuple.
+ */
+export const parseMoveArgs = (frameName, input) => {
+    const destination = {
+        referenceFrame: input.referenceFrame,
+        pose: input.pose,
+    };
+    const worldState = input.worldStateJson.trim() === '' ? undefined : WorldState.fromJsonString(input.worldStateJson);
+    const constraints = input.constraintsJson.trim() === ''
+        ? undefined
+        : Constraints.fromJsonString(input.constraintsJson);
+    return [destination, frameName, worldState, constraints];
+};

package/dist/components/widgets/motion/parse-pasted-pose.d.ts

@@ -0,0 +1,10 @@
+import type { Pose } from '@viamrobotics/sdk';
+/**
+ * Parses a clipboard string as a pose. Accepts a JSON object with numeric
+ * `x`, `y`, `z`, `oX`, `oY`, `oZ`, and `theta` fields — the same shape the arm
+ * `MoveToPosition` widget copies, so poses can be pasted between the two.
+ *
+ * @param data - The pasted string.
+ * @returns The parsed pose, or `undefined` if it is not a valid pose.
+ */
+export declare const parsePastedPose: (data: string) => Pose | undefined;

package/dist/components/widgets/motion/parse-pasted-pose.js

@@ -0,0 +1,30 @@
+const poseKeys = ['x', 'y', 'z', 'oX', 'oY', 'oZ', 'theta'];
+const isPose = (value) => {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const record = value;
+    return poseKeys.every((key) => typeof record[key] === 'number');
+};
+/**
+ * Parses a clipboard string as a pose. Accepts a JSON object with numeric
+ * `x`, `y`, `z`, `oX`, `oY`, `oZ`, and `theta` fields — the same shape the arm
+ * `MoveToPosition` widget copies, so poses can be pasted between the two.
+ *
+ * @param data - The pasted string.
+ * @returns The parsed pose, or `undefined` if it is not a valid pose.
+ */
+export const parsePastedPose = (data) => {
+    let parsed;
+    try {
+        parsed = JSON.parse(data);
+    }
+    catch {
+        return undefined;
+    }
+    if (!isPose(parsed)) {
+        return undefined;
+    }
+    const { x, y, z, oX, oY, oZ, theta } = parsed;
+    return { x, y, z, oX, oY, oZ, theta };
+};

package/dist/components/widgets/motion/pose-input.svelte

@@ -0,0 +1,154 @@
+<script
+	lang="ts"
+	module
+>
+	import type { Pose } from '@viamrobotics/sdk'
+
+	const poseLabelsList: [keyof Pose, string][] = [
+		['x', 'X'],
+		['y', 'Y'],
+		['z', 'Z'],
+		['oX', 'OX'],
+		['oY', 'OY'],
+		['oZ', 'OZ'],
+		['theta', 'θ'],
+	]
+</script>
+
+<script lang="ts">
+	import { Button, Icon, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+
+	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
+	import CopyButton from '../../copy-button.svelte'
+	import PasteButton from '../../paste-button.svelte'
+	import Table from '../../table.svelte'
+	import { numberValueFromEvent } from '../../../event-handlers'
+	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
+
+	import { parsePastedPose } from './parse-pasted-pose'
+
+	interface Props {
+		pose: Pose
+		onPoseChange: (pose: Pose) => void
+	}
+
+	const { pose, onPoseChange }: Props = $props()
+
+	let useRadians = $state(false)
+
+	const displayPose = $derived({
+		...pose,
+		theta: useRadians ? degreesToRadians(pose.theta) : pose.theta,
+	})
+
+	const copyData = $derived(JSON.stringify(pose))
+
+	const handlePaste = (data: string): boolean => {
+		const parsed = parsePastedPose(data)
+		if (!parsed) {
+			return false
+		}
+		onPoseChange(parsed)
+		return true
+	}
+
+	const handleValueChange = (key: keyof Pose, inputValue: number) => {
+		const nextValue = key === 'theta' && useRadians ? radiansToDegrees(inputValue) : inputValue
+		onPoseChange({ ...pose, [key]: nextValue })
+	}
+
+	const zero = () => {
+		onPoseChange({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 })
+	}
+
+	const poseUnits = $derived({
+		x: 'mm',
+		y: 'mm',
+		z: 'mm',
+		oX: '',
+		oY: '',
+		oZ: '',
+		theta: useRadians ? 'rad' : 'deg',
+	})
+</script>
+
+<div class="flex min-w-0 flex-col gap-4">
+	<div class="flex items-center justify-between">
+		<span class="flex flex-row items-center gap-1 text-sm">
+			Destination pose
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<span slot="description">
+					The target pose expressed in the selected reference frame. Translations are in
+					millimeters.
+				</span>
+			</Tooltip>
+		</span>
+		<div class="flex gap-1">
+			<AngleUnitToggle
+				{useRadians}
+				onToggle={() => {
+					useRadians = !useRadians
+				}}
+			/>
+			<CopyButton data={copyData} />
+			<PasteButton onPaste={handlePaste} />
+		</div>
+	</div>
+
+	<Table>
+		<thead>
+			<tr>
+				<th>Pose</th>
+				<th>Value</th>
+			</tr>
+		</thead>
+		<tbody>
+			{#each poseLabelsList as labelList (labelList)}
+				{@const [key, label] = labelList}
+				{@const value = Number.parseFloat(formatNumeric(displayPose[key]))}
+				<tr>
+					<th>
+						<span class="relative inline-flex justify-center">
+							{label}
+							<abbr class="text-subtle-2 absolute left-full ml-1">{poseUnits[key]}</abbr>
+						</span>
+					</th>
+					<th>
+						<NumericInput
+							cx="max-w-[76px]"
+							{value}
+							on:change={(event) => {
+								handleValueChange(key, numberValueFromEvent(event) ?? 0)
+							}}
+						/>
+					</th>
+				</tr>
+			{/each}
+		</tbody>
+	</Table>
+
+	<div class="flex flex-col gap-2">
+		<span class="flex flex-row gap-2">
+			<h4 class="text-xs font-semibold">Quick set</h4>
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<span slot="description"> Will update the pose values but will not execute </span>
+			</Tooltip>
+		</span>
+		<Button
+			class="w-fit"
+			onclick={zero}
+		>
+			Zero
+		</Button>
+	</div>
+</div>

package/dist/components/widgets/motion/pose-input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Pose } from '@viamrobotics/sdk';
+interface Props {
+    pose: Pose;
+    onPoseChange: (pose: Pose) => void;
+}
+declare const PoseInput: import("svelte").Component<Props, {}, "">;
+type PoseInput = ReturnType<typeof PoseInput>;
+export default PoseInput;

package/dist/components/widgets/navigation/obstacles/meshes.svelte

@@ -2,10 +2,9 @@
 	import type { GeoGeometry } from '@viamrobotics/sdk'
 
 	import { T } from '@threlte/core'
-	import { CapsuleGeometry } from '@viamrobotics/motion-tools/lib'
 	import { type BufferGeometry, MathUtils } from 'three'
 
-	import { AxesHelper } from '../../../three'
+	import { AxesHelper, CapsuleGeometry } from '../../../three'
 
 	import { getColor } from './color'
 

package/dist/index.d.ts

@@ -3,8 +3,10 @@ export { apiDocsHref } from './api-docs-href';
 export { clientForResource } from './client-map';
 export * from './components';
 export { getResourceAPI } from './get-resource-api';
+export { isKnownResource, 
+/** @deprecated use `isKnownResource` instead. Will be deleted in the next release  */
+isKnownResource as hasWidget, } from './is-known-resource';
 export { providePip, usePip } from './pip/context.svelte';
 export { ResourceTriplets } from './resource-triplet';
-export { apiWidgetsForResource, availableAPIWidgets, isKnownResource, 
-/** @deprecated use `isKnownResource` instead. Will be deleted in the next release  */
-isKnownResource as hasWidget, type ResourceAPIWidget, showResourceWidget, widgetForResource, } from './resource-widget';
+export type { ResourceAPIWidget, ResourceWidget, ResourceWidgetProps, } from './resource-widget-types';
+export { showResourceWidget } from './show-resource-widget';

package/dist/index.js

@@ -3,9 +3,10 @@ export { apiDocsHref } from './api-docs-href';
 export { clientForResource } from './client-map';
 export * from './components';
 export { getResourceAPI } from './get-resource-api';
-export { providePip, usePip } from './pip/context.svelte';
-export { ResourceTriplets } from './resource-triplet';
-export { apiWidgetsForResource, availableAPIWidgets, isKnownResource, 
+export { isKnownResource, 
 // TODO: Delete `hasWidget`
 /** @deprecated use `isKnownResource` instead. Will be deleted in the next release  */
-isKnownResource as hasWidget, showResourceWidget, widgetForResource, } from './resource-widget';
+isKnownResource as hasWidget, } from './is-known-resource';
+export { providePip, usePip } from './pip/context.svelte';
+export { ResourceTriplets } from './resource-triplet';
+export { showResourceWidget } from './show-resource-widget';

package/dist/is-known-resource.d.ts

@@ -0,0 +1,3 @@
+import type { ResourceName } from '@viamrobotics/sdk';
+/** Whether a resource's API is a recognized Viam resource triplet. */
+export declare const isKnownResource: (resource: ResourceName) => boolean;

package/dist/is-known-resource.js

@@ -0,0 +1,5 @@
+import { getResourceAPI } from "./get-resource-api.js";
+import { ResourceTriplets } from "./resource-triplet.js";
+const knownResources = new Set(Object.values(ResourceTriplets));
+/** Whether a resource's API is a recognized Viam resource triplet. */
+export const isKnownResource = (resource) => knownResources.has(getResourceAPI(resource));

package/dist/registry.d.ts

@@ -0,0 +1,28 @@
+import type { ResourceName } from '@viamrobotics/sdk';
+import type { ResourceAPIWidget, ResourceWidget } from './resource-widget-types.ts';
+import { type ResourceTriplet } from './resource-triplet.ts';
+/**
+ * Returns a resource's individual API widgets. Each entry carries a stable `id`, a
+ * display `label`, and the `widgets` to render with `{ partID, resourceName }`.
+ *
+ * Returns `[]` for a resource with a card but no standalone API widgets, and for
+ * unrecognized resources.
+ *
+ * @example
+ * apiWidgetsForResource(gripperResourceName)
+ * // [{ id: 'open-grab', label: 'Open / Grab', widgets: [GripperOpenWidget, GripperGrabWidget] }, ...]
+ */
+export declare const apiWidgetsForResource: (resource: ResourceName) => ResourceAPIWidget[];
+/**
+ * Returns every resource triplet that has a test card, mapped to its API widgets.
+ * Use this to enumerate the full catalog, e.g. a menu spanning every resource type;
+ * for a single resource, prefer `apiWidgetsForResource`.
+ *
+ * @example
+ * availableAPIWidgets()[ResourceTriplets.Gripper]
+ * // [{ id: 'open-grab', label: 'Open / Grab', widgets: [GripperOpenWidget, GripperGrabWidget] }, ...]
+ */
+export declare const availableAPIWidgets: () => Partial<Record<ResourceTriplet, ResourceAPIWidget[]>>;
+/** Returns the full composite test card for a resource, or `undefined` if none exists. */
+export declare const widgetForResource: (resource: ResourceName) => ResourceWidget | undefined;
+export type { ResourceAPIWidget, ResourceWidget, ResourceWidgetProps, } from './resource-widget-types.ts';

package/dist/{resource-widget.js → registry.js}

@@ -1,6 +1,11 @@
-import { ArmGetJointPositionsWidget, ArmIsMovingWidget, ArmMoveToJointPositionsWidget, ArmMoveToPositionWidget, ArmQuickMoveWidget, ArmWidget, AudioInputGetPropertiesWidget, AudioInputWidget, AudioOutputGetPropertiesWidget, AudioOutputWidget, BaseIsMovingWidget, BaseMoveStraightWidget, BaseQuickMoveWidget, BaseSetPowerWidget, BaseSetVelocityWidget, BaseSpinWidget, BaseWidget, BoardWidget, ButtonWidget, CameraWidget, DiscoveryWidget, EncoderGetPositionWidget, EncoderWidget, GantryGetPositionWidget, GantryHomeWidget, GantryIsMovingWidget, GantryMoveToPositionWidget, GantryQuickMoveWidget, GantryWidget, GripperGrabWidget, GripperIsHoldingSomethingWidget, GripperIsMovingWidget, GripperOpenWidget, GripperWidget, InputControllerWidget, MLModelServiceWidget, MotorGoForWidget, MotorGoToWidget, MotorIsMovingWidget, MotorQuickMoveWidget, MotorSetPowerWidget, MotorSetRPMWidget, MotorWidget, MovementSensorGetAccuracyWidget, MovementSensorGetCompassHeadingWidget, MovementSensorGetOrientationWidget, MovementSensorGetPositionWidget, MovementSensorWidget, NavigationServiceWidget, PowerSensorGetCurrentWidget, PowerSensorGetPowerWidget, PowerSensorGetVoltageWidget, PowerSensorWidget, SensorWidget, ServoIsMovingWidget, ServoMoveWidget, ServoQuickMoveWidget, ServoWidget, SlamGetPositionWidget, SlamWidget, SwitchWidget, VisionServiceWidget, } from "./components/index.js";
+import { ArmGetJointPositionsWidget, ArmIsMovingWidget, ArmMoveToJointPositionsWidget, ArmMoveToPositionWidget, ArmQuickMoveWidget, ArmWidget, AudioInputGetPropertiesWidget, AudioInputWidget, AudioOutputGetPropertiesWidget, AudioOutputWidget, BaseIsMovingWidget, BaseMoveStraightWidget, BaseQuickMoveWidget, BaseSetPowerWidget, BaseSetVelocityWidget, BaseSpinWidget, BaseWidget, BoardWidget, ButtonWidget, CameraWidget, DiscoveryWidget, EncoderGetPositionWidget, EncoderWidget, GantryGetPositionWidget, GantryHomeWidget, GantryIsMovingWidget, GantryMoveToPositionWidget, GantryQuickMoveWidget, GantryWidget, GripperGrabWidget, GripperIsHoldingSomethingWidget, GripperIsMovingWidget, GripperOpenWidget, GripperWidget, InputControllerWidget, MLModelServiceWidget, MotionServiceWidget, MotorGoForWidget, MotorGoToWidget, MotorIsMovingWidget, MotorQuickMoveWidget, MotorSetPowerWidget, MotorSetRPMWidget, MotorWidget, MovementSensorGetAccuracyWidget, MovementSensorGetCompassHeadingWidget, MovementSensorGetOrientationWidget, MovementSensorGetPositionWidget, MovementSensorWidget, NavigationServiceWidget, PowerSensorGetCurrentWidget, PowerSensorGetPowerWidget, PowerSensorGetVoltageWidget, PowerSensorWidget, SensorWidget, ServoIsMovingWidget, ServoMoveWidget, ServoQuickMoveWidget, ServoWidget, SlamGetPositionWidget, SlamWidget, SwitchWidget, VisionServiceWidget, } from "./components/index.js";
 import { getResourceAPI } from "./get-resource-api.js";
 import { ResourceTriplets } from "./resource-triplet.js";
+/**
+ * Maps a resource's API triplet to its composite test card and individual API widgets.
+ * Referencing this pulls every widget (and its optional peers) into the build, which is
+ * why the lookups below live behind the `/registry` entry point rather than the root.
+ */
 const resourceWidgetRegistry = {
     // components
     [ResourceTriplets.Arm]: {
@@ -127,6 +132,7 @@ const resourceWidgetRegistry = {
     // services
     [ResourceTriplets.Discovery]: { widget: DiscoveryWidget, apis: [] },
     [ResourceTriplets.MLModel]: { widget: MLModelServiceWidget, apis: [] },
+    [ResourceTriplets.Motion]: { widget: MotionServiceWidget, apis: [] },
     [ResourceTriplets.Navigation]: { widget: NavigationServiceWidget, apis: [] },
     [ResourceTriplets.Slam]: {
         widget: SlamWidget,
@@ -145,12 +151,7 @@ const resourceWidgetRegistry = {
  * apiWidgetsForResource(gripperResourceName)
  * // [{ id: 'open-grab', label: 'Open / Grab', widgets: [GripperOpenWidget, GripperGrabWidget] }, ...]
  */
-export const apiWidgetsForResource = (resource) => {
-    const api = getResourceAPI(resource);
-    return api in resourceWidgetRegistry
-        ? resourceWidgetRegistry[api].apis
-        : [];
-};
+export const apiWidgetsForResource = (resource) => resourceWidgetRegistry[getResourceAPI(resource)]?.apis ?? [];
 /**
  * Returns every resource triplet that has a test card, mapped to its API widgets.
  * Use this to enumerate the full catalog, e.g. a menu spanning every resource type;
@@ -162,26 +163,11 @@ export const apiWidgetsForResource = (resource) => {
  */
 export const availableAPIWidgets = () => {
     const result = {};
-    for (const triplet of Object.keys(resourceWidgetRegistry)) {
-        result[triplet] = resourceWidgetRegistry[triplet].apis;
+    for (const [api, entry] of Object.entries(resourceWidgetRegistry)) {
+        if (entry)
+            result[api] = entry.apis;
     }
     return result;
 };
 /** Returns the full composite test card for a resource, or `undefined` if none exists. */
-export const widgetForResource = (resource) => {
-    const api = getResourceAPI(resource);
-    return api in resourceWidgetRegistry
-        ? resourceWidgetRegistry[api].widget
-        : undefined;
-};
-const knownResources = new Set(Object.values(ResourceTriplets));
-/** Whether a resource's API is a recognized Viam resource triplet. */
-export const isKnownResource = (resource) => knownResources.has(getResourceAPI(resource));
-const hiddenResources = new Set([
-    ResourceTriplets.DataManager,
-    ResourceTriplets.Motion,
-    ResourceTriplets.Sensors,
-    ResourceTriplets.Shell,
-]);
-/** Whether the control view should surface a card for this resource. */
-export const showResourceWidget = (resource) => resource.namespace !== 'rdk-internal' && !hiddenResources.has(getResourceAPI(resource));
+export const widgetForResource = (resource) => resourceWidgetRegistry[getResourceAPI(resource)]?.widget;

package/dist/resource-widget-types.d.ts

@@ -0,0 +1,21 @@
+import type { Component } from 'svelte';
+/** Every resource widget shares this prop contract and is self-contained. */
+export interface ResourceWidgetProps {
+    partID: string;
+    resourceName: string;
+}
+export type ResourceWidget = Component<ResourceWidgetProps>;
+/** One of a resource's individual API widgets (e.g. a menu entry); renders one or more self-contained widgets. */
+export interface ResourceAPIWidget {
+    /** Stable identifier, safe to persist. Never rename. e.g. `'move-to-joint-positions'`. */
+    id: string;
+    /** Human-readable menu label. e.g. `'MoveToJointPositions'` or `'Quick move'`. */
+    label: string;
+    /** The self-contained widget(s) this entry renders, each with `{ partID, resourceName }`. */
+    widgets: ResourceWidget[];
+}
+/** A registry entry: a resource's composite card plus its individual API widgets. */
+export interface ResourceWidgetEntry {
+    widget: ResourceWidget;
+    apis: ResourceAPIWidget[];
+}

package/dist/resource-widget-types.js

@@ -0,0 +1 @@
+export {};

package/dist/show-resource-widget.d.ts

@@ -0,0 +1,3 @@
+import type { ResourceName } from '@viamrobotics/sdk';
+/** Whether the control view should surface a card for this resource. */
+export declare const showResourceWidget: (resource: ResourceName) => boolean;

package/dist/show-resource-widget.js

@@ -0,0 +1,10 @@
+import { getResourceAPI } from "./get-resource-api.js";
+import { ResourceTriplets } from "./resource-triplet.js";
+const hiddenResources = new Set([
+    ResourceTriplets.DataManager,
+    ResourceTriplets.Motion,
+    ResourceTriplets.Sensors,
+    ResourceTriplets.Shell,
+]);
+/** Whether the control view should surface a card for this resource. */
+export const showResourceWidget = (resource) => resource.namespace !== 'rdk-internal' && !hiddenResources.has(getResourceAPI(resource));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -17,6 +17,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
+    },
+    "./registry": {
+      "types": "./dist/registry.d.ts",
+      "svelte": "./dist/registry.js"
     }
   },
   "publishConfig": {
@@ -33,13 +37,26 @@
     "@viamrobotics/prime-core": ">=0.1",
     "@viamrobotics/sdk": ">=0.68",
     "@viamrobotics/svelte-sdk": ">=1.1",
+    "@viamrobotics/three": ">=0.0.9",
     "lodash-es": ">=4",
+    "maplibre-gl": ">=5",
     "runed": ">=0.28",
     "svelte": ">=5",
     "three": ">=0.178",
     "threlte-uikit": ">=2"
   },
+  "peerDependenciesMeta": {
+    "@viamrobotics/three": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@ag-grid-community/client-side-row-model": "^32.3.9",
+    "@ag-grid-community/core": "^32.3.9",
+    "@ag-grid-community/styles": "^32.3.9",
     "@changesets/cli": "^2.31.0",
     "@eslint/compat": "^2.0.5",
     "@eslint/js": "^10.0.1",
@@ -66,7 +83,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^25.6.0",
     "@types/three": "^0.183.1",
-    "@viamrobotics/motion-tools": "^1.19.1",
     "@viamrobotics/prime-core": "^0.1.22",
     "@viamrobotics/sdk": "^0.69.0",
     "@viamrobotics/svelte-sdk": "^1.2.1",
@@ -75,6 +91,7 @@
     "@vitest/browser": "^4.1.8",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.1.5",
+    "@zag-js/dialog": "^1.37.0",
     "eslint": "^10.2.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-perfectionist": "^5.9.0",
@@ -118,8 +135,8 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint": "eslint . --concurrency auto",
+    "lint:fix": "eslint . --fix --concurrency auto",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
     "test:unit": "vitest",