@viamrobotics/test-widgets 0.7.0 → 0.9.0

package/dist/components/widgets/audio-input/get-properties-widget.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { AudioInClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Properties from './properties.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		AudioInClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getProperties', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetProperties"
+	description="Audio input properties"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Properties
+				supportedCodecs={query.data.supportedCodecs}
+				sampleRateHz={query.data.sampleRateHz}
+				numChannels={query.data.numChannels}
+			/>
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/audio-input/get-properties-widget.svelte.d.ts

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

package/dist/components/widgets/audio-output/get-properties-widget.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { AudioOutClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Properties from './properties.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		AudioOutClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getProperties', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetProperties"
+	description="Audio output properties"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Properties
+				supportedCodecs={query.data.supportedCodecs}
+				sampleRateHz={query.data.sampleRateHz}
+				numChannels={query.data.numChannels}
+			/>
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/audio-output/get-properties-widget.svelte.d.ts

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

package/dist/components/widgets/base/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { BaseClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={BaseClient}
+	api={ResourceTriplets.Base}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/base/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/base/quick-move.svelte

@@ -90,8 +90,11 @@
 		}
 	}
 
+	// stopImmediatePropagation (not stopPropagation) in the capture phase so movement
+	// keys never reach sibling window keydown listeners on the same target — e.g. the
+	// config builder's "A" add-resource hotkey. stopPropagation leaves siblings running.
 	const onKeydown = (event: KeyboardEvent) => {
-		if (!isKeyboardEnabled || event.repeat) {
+		if (!isKeyboardEnabled) {
 			return
 		}
 
@@ -100,9 +103,13 @@
 			return
 		}
 
-		event.stopPropagation()
+		event.stopImmediatePropagation()
 		event.preventDefault()
 
+		if (event.repeat) {
+			return
+		}
+
 		pressedKeys[key] = true
 		onKeyChange()
 	}
@@ -117,7 +124,7 @@
 			return
 		}
 
-		event.stopPropagation()
+		event.stopImmediatePropagation()
 		event.preventDefault()
 
 		pressedKeys[key] = false
@@ -132,8 +139,8 @@
 </script>
 
 <svelte:window
-	onkeydown={onKeydown}
-	onkeyup={onKeyup}
+	onkeydowncapture={onKeydown}
+	onkeyupcapture={onKeyup}
 />
 
 <div class="flex grow flex-col gap-6">

package/dist/components/widgets/camera/live-or-polling-video.svelte

@@ -14,6 +14,7 @@
 	import Progress from '../../progress.svelte'
 	import { formatNumeric } from '../../../format'
 	import { useMeasureFps } from '../../../fps.svelte'
+	import { usePip } from '../../../pip/context.svelte'
 
 	import { getBlobForViamDepth, VIAM_DEPTH_MIME_TYPE } from './decode-viam-depth'
 	import { pickImageForSource } from './pick-image-for-source'
@@ -52,7 +53,13 @@
 	let vfcID = 0
 	let liveStreamStart: DOMHighResTimeStamp | undefined
 
+	const pip = usePip()
+
 	const setMediaStream = (mediaStream: MediaStream | null) => {
+		if (mediaStream) {
+			pip.setStream(resourceName, mediaStream)
+		}
+
 		if (videoElement) {
 			// TODO(2025-01-31): Remove these function guards.
 			// Sentry has some error traces where "cancelVideoFrameCallback is not a function".
@@ -190,6 +197,7 @@
 		return () =>
 			untrack(() => {
 				disableStream().then(() => {
+					pip.setStream(resourceName, null)
 					setMediaStream(null)
 				})
 			})
@@ -301,7 +309,6 @@
 	}
 
 	const fps = useMeasureFps()
-
 	$effect(() => {
 		let id: number | undefined
 

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/encoder/encoder-position-type.d.ts

@@ -0,0 +1,8 @@
+import { EncoderPositionType, type EncoderProperties } from '@viamrobotics/sdk';
+/**
+ * Picks the position type to request from an encoder based on its properties.
+ * @param properties - The encoder's reported properties, if loaded.
+ * @returns A single-element argument tuple for `getPosition`.
+ * @example getEncoderPositionArgs({ angleDegreesSupported: true }) // [EncoderPositionType.ANGLE_DEGREES]
+ */
+export declare const getEncoderPositionArgs: (properties: EncoderProperties | undefined) => [EncoderPositionType];

package/dist/components/widgets/encoder/encoder-position-type.js

@@ -0,0 +1,20 @@
+import { EncoderPositionType } from '@viamrobotics/sdk';
+/**
+ * Picks the position type to request from an encoder based on its properties.
+ * @param properties - The encoder's reported properties, if loaded.
+ * @returns A single-element argument tuple for `getPosition`.
+ * @example getEncoderPositionArgs({ angleDegreesSupported: true }) // [EncoderPositionType.ANGLE_DEGREES]
+ */
+export const getEncoderPositionArgs = (properties) => {
+    if (!properties) {
+        return [EncoderPositionType.UNSPECIFIED];
+    }
+    const { angleDegreesSupported, ticksCountSupported } = properties;
+    if (angleDegreesSupported) {
+        return [EncoderPositionType.ANGLE_DEGREES];
+    }
+    if (ticksCountSupported) {
+        return [EncoderPositionType.TICKS_COUNT];
+    }
+    return [EncoderPositionType.UNSPECIFIED];
+};

package/dist/components/widgets/encoder/encoder.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '@viamrobotics/prime-core'
-	import { EncoderClient, EncoderPositionType, type EncoderProperties } from '@viamrobotics/sdk'
+	import { EncoderClient } from '@viamrobotics/sdk'
 	import {
 		createResourceClient,
 		createResourceMutation,
@@ -14,6 +14,7 @@
 	import RefetchController from '../../refetch-controller.svelte'
 	import { createRefetchIntervalStore } from '../../refetch-interval-store.svelte'
 
+	import { getEncoderPositionArgs } from './encoder-position-type'
 	import Position from './position.svelte'
 
 	interface Props {
@@ -35,24 +36,6 @@
 		'encoder-view'
 	)
 
-	const getPositionArgs = (properties: EncoderProperties | undefined): [EncoderPositionType] => {
-		if (!properties) {
-			return [EncoderPositionType.UNSPECIFIED]
-		}
-
-		const { angleDegreesSupported, ticksCountSupported } = properties
-
-		if (angleDegreesSupported) {
-			return [EncoderPositionType.ANGLE_DEGREES]
-		}
-
-		if (ticksCountSupported) {
-			return [EncoderPositionType.TICKS_COUNT]
-		}
-
-		return [EncoderPositionType.UNSPECIFIED]
-	}
-
 	const propertiesQuery = createResourceQuery(client, 'getProperties', () => ({
 		refetchInterval: refetchInterval.current,
 	}))
@@ -60,7 +43,7 @@
 	const positionQuery = createResourceQuery(
 		client,
 		'getPosition',
-		() => getPositionArgs(propertiesQuery.data),
+		() => getEncoderPositionArgs(propertiesQuery.data),
 		() => ({
 			enabled: propertiesQuery.data !== undefined,
 			refetchInterval: refetchInterval.current,

package/dist/components/widgets/encoder/get-position-widget.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { EncoderClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Queries from '../../queries.svelte'
+
+	import { getEncoderPositionArgs } from './encoder-position-type'
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		EncoderClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const propertiesQuery = createResourceQuery(client, 'getProperties', { refetchInterval: 500 })
+
+	const positionQuery = createResourceQuery(
+		client,
+		'getPosition',
+		() => getEncoderPositionArgs(propertiesQuery.data),
+		() => ({
+			enabled: propertiesQuery.data !== undefined,
+			refetchInterval: 500,
+		})
+	)
+</script>
+
+<ApiSection
+	title="GetPosition"
+	tooltip="Relative encoders return ticks since last zeroing. Absolute encoders return degrees."
+	bottomText="Updates automatically"
+	class="grow"
+>
+	<Queries queries={[propertiesQuery, positionQuery]}>
+		{#if positionQuery.data !== undefined}
+			{@const [position, encoderPositionType] = positionQuery.data}
+			<div class="font-roboto-mono flex flex-col gap-2 text-sm">
+				<Position
+					{position}
+					{encoderPositionType}
+				/>
+			</div>
+		{/if}
+	</Queries>
+</ApiSection>

package/dist/components/widgets/encoder/get-position-widget.svelte.d.ts

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

package/dist/components/widgets/gantry/get-position-widget.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { GantryClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Queries from '../../queries.svelte'
+
+	import PositionAndLengths from './position-and-lengths.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		GantryClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const options = { refetchInterval: 500 }
+	const positionQuery = createResourceQuery(client, 'getPosition', options)
+	const lengthsQuery = createResourceQuery(client, 'getLengths', options)
+</script>
+
+<ApiSection
+	title="GetPosition"
+	bottomText="Updates automatically"
+	class="grow"
+>
+	<Queries queries={[positionQuery, lengthsQuery]}>
+		{@const positions = positionQuery.data}
+		{@const lengths = lengthsQuery.data ?? []}
+		{#if positions !== undefined}
+			<PositionAndLengths
+				{positions}
+				{lengths}
+			/>
+		{/if}
+	</Queries>
+</ApiSection>

package/dist/components/widgets/gantry/get-position-widget.svelte.d.ts

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

package/dist/components/widgets/gantry/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { GantryClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={GantryClient}
+	api={ResourceTriplets.Gantry}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/gantry/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/gripper/gripper.svelte

@@ -52,7 +52,7 @@
 					/>
 				</ApiSection>
 			</span>
-			<div class="flex shrink-0 flex-col divide-y">
+			<div class="flex flex-col divide-y">
 				<ApiSection
 					title="Stop"
 					api="rdk:component:gripper"

package/dist/components/widgets/gripper/is-holding-something.svelte

@@ -34,10 +34,7 @@
 	bottomText="Updates automatically"
 	class="grow"
 >
-	<Query
-		{query}
-		contentCx="h-5"
-	>
+	<Query {query}>
 		<div class="flex items-center gap-2">
 			{#if query.data !== undefined}
 				{#if query.data}

package/dist/components/widgets/gripper/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { GripperClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={GripperClient}
+	api={ResourceTriplets.Gripper}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/gripper/is-moving-widget.svelte.d.ts

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

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;