@viamrobotics/test-widgets 0.8.0 → 0.9.0

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/component-name-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 = 'Component', onChange }: Props = $props()
+</script>
+
+<Label>
+	{label}
+
+	<Select
+		slot="input"
+		{value}
+		on:change={(event) => {
+			onChange((event.target as HTMLSelectElement).value)
+		}}
+	>
+		<option value="">Select a component…</option>
+		{#each options as name (name)}
+			<option value={name}>{name}</option>
+		{/each}
+	</Select>
+</Label>

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

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

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

@@ -0,0 +1,28 @@
+/** 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 component 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 componentName - The component (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, componentName: string) => string;

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

@@ -0,0 +1,30 @@
+/**
+ * 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 component 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 componentName - The component (frame) whose parent to look up.
+ * @returns The parent frame name, or `'world'` when there is no configured parent.
+ */
+export const parentFrame = (config, componentName) => {
+    const entry = config?.find((item) => item.frame?.referenceFrame === componentName);
+    return entry?.frame?.poseInObserverFrame?.referenceFrame || 'world';
+};

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import ApiSection from '../../api-section.svelte'
+	import ConnectionStatus from '../../connection-status.svelte'
+
+	import MoveWidget from './move-widget.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<ConnectionStatus {partID}>
+	{#snippet connected()}
+		<ApiSection
+			title="Move"
+			api="rdk:service:motion"
+		>
+			<MoveWidget
+				{partID}
+				{resourceName}
+			/>
+		</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,84 @@
+<script lang="ts">
+	import { MotionClient, type RobotClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createRobotQuery,
+		useRobotClient,
+	} from '@viamrobotics/svelte-sdk'
+
+	import ComponentNameSelect from './component-name-select.svelte'
+	import { movableFrameNames, parentFrame } from './frame-system-config'
+	import Move from './move.svelte'
+	import { type MoveInput, parseMoveArgs } from './parse-move-args'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const robotClient = useRobotClient(() => partID)
+	const client = createResourceClient(
+		MotionClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const move = createResourceMutation(client, 'move')
+	const frameSystem = createRobotQuery(robotClient, 'frameSystemConfig', () => ({
+		refetchInterval: 5000,
+	}))
+	const frameNames = $derived(movableFrameNames(frameSystem.data))
+
+	let selectedName = $state<string>()
+	const componentName = $derived(selectedName ?? frameNames[0] ?? '')
+
+	const destinationFrame = $derived(parentFrame(frameSystem.data, componentName))
+	const poseArgs = $derived<Parameters<RobotClient['getPose']>>([
+		componentName,
+		destinationFrame,
+		[],
+	])
+
+	const poseQuery = createRobotQuery(
+		robotClient,
+		'getPose',
+		() => poseArgs,
+		() => ({ enabled: componentName !== '' })
+	)
+
+	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(componentName, input), {})
+		} catch (error) {
+			parseError = error instanceof Error ? error : new Error(String(error))
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	<ComponentNameSelect
+		value={componentName}
+		options={frameNames}
+		onChange={(value) => {
+			selectedName = value
+		}}
+	/>
+	<Move
+		{componentName}
+		{currentPose}
+		currentReferenceFrame={destinationFrame}
+		isPending={move.isPending}
+		lastError={parseError ?? move.error ?? poseError}
+		storageKey={`${partID}/${resourceName}/motion-move`}
+		onExecute={executeMove}
+	/>
+</div>

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

@@ -0,0 +1,7 @@
+interface Props {
+    partID: string;
+    resourceName: 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,127 @@
+<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 PoseInFrameInput from './pose-in-frame-input.svelte'
+
+	interface Props {
+		componentName: string
+		currentPose?: Pose
+		currentReferenceFrame?: string
+		isPending: boolean
+		lastError: Error | null
+		storageKey: string
+		onExecute: (input: MoveInput) => void
+	}
+
+	const {
+		componentName,
+		currentPose,
+		currentReferenceFrame,
+		isPending,
+		lastError,
+		storageKey,
+		onExecute,
+	}: Props = $props()
+
+	const zeroPose: Pose = { x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 }
+
+	let edit = $state<{ component: string; referenceFrame: string; pose: Pose }>()
+	const isEdited = $derived(edit?.component === componentName)
+	const referenceFrame = $derived(
+		isEdited && edit ? edit.referenceFrame : (currentReferenceFrame ?? 'world')
+	)
+
+	const pose = $derived(isEdited && edit ? edit.pose : (currentPose ?? zeroPose))
+
+	// PersistedState is created inside $derived so Svelte can track the storageKey
+	// dependency. The localStorage read on construction is benign and idempotent.
+	// storageKey is stable for the lifetime of this component.
+	const worldState = $derived(new PersistedState(`${storageKey}/world-state`, ''))
+	const constraints = $derived(new PersistedState(`${storageKey}/constraints`, ''))
+
+	const disabled = $derived(componentName === '' || isPending)
+
+	const execute = () => {
+		onExecute({
+			referenceFrame,
+			pose,
+			worldStateJson: worldState.current,
+			constraintsJson: constraints.current,
+		})
+	}
+</script>
+
+<div class="flex min-w-0 flex-col gap-4">
+	<PoseInFrameInput
+		{referenceFrame}
+		{pose}
+		onReferenceFrameChange={(frame) => {
+			edit = { component: componentName, referenceFrame: frame, pose }
+		}}
+		onPoseChange={(next) => {
+			edit = { component: componentName, referenceFrame, 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,14 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { MoveInput } from './parse-move-args';
+interface Props {
+    componentName: string;
+    currentPose?: Pose;
+    currentReferenceFrame?: string;
+    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 componentName - Name of the component to move.
+ * @param input - The pose, reference frame, and optional world-state/constraints JSON.
+ * @returns The `[destination, componentName, worldState?, constraints?]` tuple.
+ */
+export declare const parseMoveArgs: (componentName: 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 componentName - Name of the component to move.
+ * @param input - The pose, reference frame, and optional world-state/constraints JSON.
+ * @returns The `[destination, componentName, worldState?, constraints?]` tuple.
+ */
+export const parseMoveArgs = (componentName, 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, componentName, 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-in-frame-input.svelte

@@ -0,0 +1,168 @@
+<script
+	lang="ts"
+	module
+>
+	import type { Pose } from '@viamrobotics/sdk'
+
+	const poseLabelsList = Object.entries({
+		x: 'X',
+		y: 'Y',
+		z: 'Z',
+		oX: 'OX',
+		oY: 'OY',
+		oZ: 'OZ',
+		theta: 'θ',
+	}) as [keyof Pose, string][]
+</script>
+
+<script lang="ts">
+	import { Button, Icon, Input, Label, 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 {
+		referenceFrame: string
+		pose: Pose
+		onReferenceFrameChange: (frame: string) => void
+		onPoseChange: (pose: Pose) => void
+	}
+
+	const { referenceFrame, pose, onReferenceFrameChange, 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 given 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>
+
+	<Label>
+		Reference frame
+
+		<Input
+			slot="input"
+			value={referenceFrame}
+			placeholder="world"
+			on:input={(event) => {
+				onReferenceFrameChange((event.target as HTMLInputElement).value)
+			}}
+		/>
+	</Label>
+
+	<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-in-frame-input.svelte.d.ts

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

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, MotionMoveWidget, 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,10 @@ const resourceWidgetRegistry = {
     // services
     [ResourceTriplets.Discovery]: { widget: DiscoveryWidget, apis: [] },
     [ResourceTriplets.MLModel]: { widget: MLModelServiceWidget, apis: [] },
+    [ResourceTriplets.Motion]: {
+        widget: MotionServiceWidget,
+        apis: [{ id: 'move', label: 'Move', widgets: [MotionMoveWidget] }],
+    },
     [ResourceTriplets.Navigation]: { widget: NavigationServiceWidget, apis: [] },
     [ResourceTriplets.Slam]: {
         widget: SlamWidget,
@@ -145,12 +154,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 +166,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.0",
   "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",