@viamrobotics/test-widgets 0.9.0 → 0.9.1

package/dist/components/widgets/motion/{component-name-select.svelte → frame-select.svelte}

@@ -4,11 +4,11 @@
 	interface Props {
 		value: string
 		options: string[]
-		label?: string
+		label: string
 		onChange: (value: string) => void
 	}
 
-	const { value, options, label = 'Component', onChange }: Props = $props()
+	const { value, options, label, onChange }: Props = $props()
 </script>
 
 <Label>
@@ -21,7 +21,7 @@
 			onChange((event.target as HTMLSelectElement).value)
 		}}
 	>
-		<option value="">Select a component…</option>
+		<option value="">Select a frame…</option>
 		{#each options as name (name)}
 			<option value={name}>{name}</option>
 		{/each}

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

@@ -17,12 +17,21 @@ export interface FrameConfigEntry {
  */
 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
+ * 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 componentName - The component (frame) whose parent to look up.
+ * @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, componentName: string) => string;
+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

@@ -16,15 +16,27 @@ export const movableFrameNames = (config) => {
         .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
+ * 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 componentName - The component (frame) whose parent to look up.
+ * @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, componentName) => {
-    const entry = config?.find((item) => item.frame?.referenceFrame === componentName);
+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

@@ -1,7 +1,11 @@
 <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 {
@@ -10,6 +14,20 @@
 	}
 
 	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}>
@@ -18,10 +36,30 @@
 			title="Move"
 			api="rdk:service:motion"
 		>
-			<MoveWidget
-				{partID}
-				{resourceName}
-			/>
+			<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/move-widget.svelte

@@ -7,17 +7,19 @@
 		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
+		/** 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 }: Props = $props()
+	const { partID, resourceName, frameName, destination }: Props = $props()
 
 	const robotClient = useRobotClient(() => partID)
 	const client = createResourceClient(
@@ -27,26 +29,14 @@
 	)
 
 	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,
-		[],
-	])
 
+	// 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: componentName !== '' })
+		() => ({ enabled: frameName !== '' })
 	)
 
 	const currentPose = $derived(poseQuery.data?.pose)
@@ -57,28 +47,19 @@
 	const executeMove = (input: MoveInput) => {
 		try {
 			parseError = undefined
-			move.mutate(parseMoveArgs(componentName, input), {})
+			move.mutate(parseMoveArgs(frameName, 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>
+<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

@@ -1,6 +1,10 @@
 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>;

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

@@ -9,12 +9,14 @@
 
 	import type { MoveInput } from './parse-move-args'
 
-	import PoseInFrameInput from './pose-in-frame-input.svelte'
+	import PoseInput from './pose-input.svelte'
 
 	interface Props {
-		componentName: string
+		/** 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
-		currentReferenceFrame?: string
 		isPending: boolean
 		lastError: Error | null
 		storageKey: string
@@ -22,9 +24,9 @@
 	}
 
 	const {
-		componentName,
+		frameName,
+		destination,
 		currentPose,
-		currentReferenceFrame,
 		isPending,
 		lastError,
 		storageKey,
@@ -33,25 +35,19 @@
 
 	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 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))
 
-	// 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 disabled = $derived(frameName === '' || isPending)
 
 	const execute = () => {
 		onExecute({
-			referenceFrame,
+			referenceFrame: destination,
 			pose,
 			worldStateJson: worldState.current,
 			constraintsJson: constraints.current,
@@ -60,14 +56,10 @@
 </script>
 
 <div class="flex min-w-0 flex-col gap-4">
-	<PoseInFrameInput
-		{referenceFrame}
+	<PoseInput
 		{pose}
-		onReferenceFrameChange={(frame) => {
-			edit = { component: componentName, referenceFrame: frame, pose }
-		}}
 		onPoseChange={(next) => {
-			edit = { component: componentName, referenceFrame, pose: next }
+			edit = { key: editKey, pose: next }
 		}}
 	/>
 

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

@@ -1,9 +1,11 @@
 import type { Pose } from '@viamrobotics/sdk';
 import type { MoveInput } from './parse-move-args';
 interface Props {
-    componentName: string;
+    /** 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;
-    currentReferenceFrame?: string;
     isPending: boolean;
     lastError: Error | null;
     storageKey: string;

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

@@ -17,8 +17,8 @@ export type MoveArgs = [PoseInFrame, string, WorldState | undefined, Constraints
  * 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 frameName - The frame to move.
  * @param input - The pose, reference frame, and optional world-state/constraints JSON.
- * @returns The `[destination, componentName, worldState?, constraints?]` tuple.
+ * @returns The `[destination, frameName, worldState?, constraints?]` tuple.
  */
-export declare const parseMoveArgs: (componentName: string, input: MoveInput) => MoveArgs;
+export declare const parseMoveArgs: (frameName: string, input: MoveInput) => MoveArgs;

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

@@ -6,11 +6,11 @@ import { Constraints, WorldState } from '@viamrobotics/sdk';
  * 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 frameName - The frame to move.
  * @param input - The pose, reference frame, and optional world-state/constraints JSON.
- * @returns The `[destination, componentName, worldState?, constraints?]` tuple.
+ * @returns The `[destination, frameName, worldState?, constraints?]` tuple.
  */
-export const parseMoveArgs = (componentName, input) => {
+export const parseMoveArgs = (frameName, input) => {
     const destination = {
         referenceFrame: input.referenceFrame,
         pose: input.pose,
@@ -19,5 +19,5 @@ export const parseMoveArgs = (componentName, input) => {
     const constraints = input.constraintsJson.trim() === ''
         ? undefined
         : Constraints.fromJsonString(input.constraintsJson);
-    return [destination, componentName, worldState, constraints];
+    return [destination, frameName, worldState, constraints];
 };

package/dist/components/widgets/motion/{pose-in-frame-input.svelte → pose-input.svelte}

@@ -4,19 +4,19 @@
 >
 	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][]
+	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, Input, Label, NumericInput, Tooltip } from '@viamrobotics/prime-core'
+	import { Button, Icon, NumericInput, Tooltip } from '@viamrobotics/prime-core'
 
 	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
 	import CopyButton from '../../copy-button.svelte'
@@ -28,13 +28,11 @@
 	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()
+	const { pose, onPoseChange }: Props = $props()
 
 	let useRadians = $state(false)
 
@@ -85,7 +83,8 @@
 				/>
 
 				<span slot="description">
-					The target pose expressed in the given reference frame. Translations are in millimeters.
+					The target pose expressed in the selected reference frame. Translations are in
+					millimeters.
 				</span>
 			</Tooltip>
 		</span>
@@ -101,19 +100,6 @@
 		</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>

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/registry.js

@@ -1,4 +1,4 @@
-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 { 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";
 /**
@@ -132,10 +132,7 @@ 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.Motion]: { widget: MotionServiceWidget, apis: [] },
     [ResourceTriplets.Navigation]: { widget: NavigationServiceWidget, apis: [] },
     [ResourceTriplets.Slam]: {
         widget: SlamWidget,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "license": "Apache-2.0",
   "type": "module",
   "files": [

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

@@ -1,9 +0,0 @@
-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/pose-in-frame-input.svelte.d.ts

@@ -1,10 +0,0 @@
-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;