@viamrobotics/test-widgets 0.4.0 → 0.6.0

package/dist/components/copy-button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Icon } from '@viamrobotics/prime-core'
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
 
 	interface Props {
 		data: string
@@ -25,13 +25,13 @@
 	}
 </script>
 
-<button
-	onclick={handleCopyClick}
-	aria-label={ariaLabel}
-	class="text-gray-6 hover:border-medium hover:bg-medium active:bg-gray-2 justify-items-end p-0.5"
->
-	<Icon
-		name={showCopySuccess ? 'check' : 'content-copy'}
-		size="xs"
+<Tooltip>
+	<IconButton
+		onclick={handleCopyClick}
+		aria-label={ariaLabel}
+		class="text-gray-6 hover:border-medium hover:bg-medium active:bg-gray-2 justify-items-end p-0.5"
+		icon={showCopySuccess ? 'check' : 'content-copy'}
+		label="Copy to clipboard"
 	/>
-</button>
+	<span slot="description">{ariaLabel}</span>
+</Tooltip>

package/dist/components/mutation-section.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <section
-	class="flex flex-col gap-2 p-4"
+	class="flex w-full flex-col gap-2 p-4"
 	aria-labelledby={headingID}
 >
 	<div class={twMerge('flex grow flex-row flex-wrap gap-2', className)}>

package/dist/components/paste-button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { IconButton, Tooltip } from '@viamrobotics/prime-core'
+
+	interface Props {
+		onPaste: (data: string) => boolean
+		ariaLabel?: string
+	}
+
+	const { onPaste, ariaLabel = 'Paste from clipboard' }: Props = $props()
+
+	let isPasteSuccessful = $state<boolean | null>(null)
+
+	const handlePasteClick = async (event: Event) => {
+		event.stopPropagation()
+		event.preventDefault()
+		const data = await globalThis.navigator.clipboard.readText()
+		isPasteSuccessful = onPaste(data)
+		setTimeout(() => {
+			isPasteSuccessful = null
+		}, 750)
+	}
+
+	const iconName = $derived(
+		// eslint-disable-next-line unicorn/no-nested-ternary
+		isPasteSuccessful === null ? 'content-paste' : isPasteSuccessful ? 'check' : 'close'
+	)
+</script>
+
+<Tooltip>
+	<IconButton
+		onclick={handlePasteClick}
+		aria-label={ariaLabel}
+		class="text-gray-6 hover:border-medium hover:bg-medium active:bg-gray-2 justify-items-end p-0.5"
+		icon={iconName}
+		label="Paste from clipboard"
+	/>
+	<span slot="description">{ariaLabel}</span>
+</Tooltip>

package/dist/components/paste-button.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    onPaste: (data: string) => boolean;
+    ariaLabel?: string;
+}
+declare const PasteButton: import("svelte").Component<Props, {}, "">;
+type PasteButton = ReturnType<typeof PasteButton>;
+export default PasteButton;

package/dist/components/widgets/arm/arm.svelte

@@ -11,10 +11,12 @@
 	import ApiSection from '../../api-section.svelte'
 	import ConnectionStatus from '../../connection-status.svelte'
 	import IsMoving from '../../is-moving.svelte'
+	import Queries from '../../queries.svelte'
 	import Query from '../../query.svelte'
 	import StopButton from '../../stop-button.svelte'
 
 	import GetJointPositions from './get-joint-positions.svelte'
+	import { getJointPositionLimits, type KinematicsJSON } from './joint-position-limits'
 	import MoveToJointPositions from './move-to-joint-positions.svelte'
 	import MoveToPosition from './move-to-position.svelte'
 	import QuickMove from './quick-move.svelte'
@@ -35,6 +37,7 @@
 	const options = { refetchInterval: 500 }
 	const jointPositionsQuery = createResourceQuery(client, 'getJointPositions', options)
 	const endPositionQuery = createResourceQuery(client, 'getEndPosition', options)
+	const kinematicsQuery = createResourceQuery(client, 'getKinematics', options)
 
 	const moveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
 	const quickMoveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
@@ -72,15 +75,16 @@
 					</Query>
 				</ApiSection>
 				<ApiSection title="MoveToJointPositions">
-					<Query query={jointPositionsQuery}>
-						{#if jointPositionsQuery.data}
+					<Queries queries={[jointPositionsQuery, kinematicsQuery]}>
+						{#if jointPositionsQuery.data && kinematicsQuery.data}
 							<MoveToJointPositions
 								positions={jointPositionsQuery.data.values}
 								{moveToJointPositions}
 								lastError={moveToJointPosMutation.error}
+								jointLimitsDegrees={getJointPositionLimits(kinematicsQuery.data as KinematicsJSON)}
 							/>
 						{/if}
-					</Query>
+					</Queries>
 				</ApiSection>
 				<ApiSection title="MoveToPosition">
 					<Query query={endPositionQuery}>

package/dist/components/widgets/arm/joint-position-limits.d.ts

@@ -0,0 +1,11 @@
+export type JointLimit = {
+    minDegrees: number;
+    maxDegrees: number;
+};
+export type OutOfBoundsSide = 'below-min' | 'above-max';
+export interface KinematicsJSON {
+    kinematic_param_type: string;
+}
+export declare const isOutsideJointLimit: (value: number, min: number, max: number) => boolean;
+export declare const getOutOfBoundsSide: (value: number, min: number, max: number) => OutOfBoundsSide | null;
+export declare const getJointPositionLimits: (kinematics: KinematicsJSON) => JointLimit[];

package/dist/components/widgets/arm/joint-position-limits.js

@@ -0,0 +1,26 @@
+export const isOutsideJointLimit = (value, min, max) => value < min || value > max;
+export const getOutOfBoundsSide = (value, min, max) => {
+    if (value < min) {
+        return 'below-min';
+    }
+    if (value > max) {
+        return 'above-max';
+    }
+    return null;
+};
+export const getJointPositionLimits = (kinematics) => {
+    if (kinematics.kinematic_param_type === 'SVA') {
+        return parseSVAKinematics(kinematics);
+    }
+    return [];
+};
+const parseSVAKinematics = (kinematics) => {
+    const joints = kinematics.joints;
+    const limits = joints.map((joint) => {
+        return {
+            minDegrees: joint.min,
+            maxDegrees: joint.max,
+        };
+    });
+    return limits;
+};

package/dist/components/widgets/arm/move-to-joint-positions-widget.svelte

@@ -6,8 +6,9 @@
 		createResourceQuery,
 	} from '@viamrobotics/svelte-sdk'
 
-	import Query from '../../query.svelte'
+	import Queries from '../../queries.svelte'
 
+	import { getJointPositionLimits, type KinematicsJSON } from './joint-position-limits'
 	import MoveToJointPositions from './move-to-joint-positions.svelte'
 
 	interface Props {
@@ -26,6 +27,9 @@
 	const jointPositionsQuery = createResourceQuery(client, 'getJointPositions', {
 		refetchInterval: 500,
 	})
+	const kinematicsQuery = createResourceQuery(client, 'getKinematics', {
+		refetchInterval: 500,
+	})
 
 	const moveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
 
@@ -34,12 +38,13 @@
 	}
 </script>
 
-<Query query={jointPositionsQuery}>
-	{#if jointPositionsQuery.data}
+<Queries queries={[jointPositionsQuery, kinematicsQuery]}>
+	{#if jointPositionsQuery.data && kinematicsQuery.data}
 		<MoveToJointPositions
 			positions={jointPositionsQuery.data.values}
 			{moveToJointPositions}
 			lastError={moveToJointPosMutation.error}
+			jointLimitsDegrees={getJointPositionLimits(kinematicsQuery.data as KinematicsJSON)}
 		/>
 	{/if}
-</Query>
+</Queries>

package/dist/components/widgets/arm/move-to-joint-positions.svelte

@@ -4,17 +4,21 @@
 	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
 	import CopyButton from '../../copy-button.svelte'
 	import ErrorDisplay from '../../error.svelte'
+	import PasteButton from '../../paste-button.svelte'
 	import Table from '../../table.svelte'
 	import { numberValueFromEvent } from '../../../event-handlers'
 	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
 
+	import { getOutOfBoundsSide, isOutsideJointLimit, type JointLimit } from './joint-position-limits'
+
 	interface Props {
 		positions: number[]
 		moveToJointPositions: (jointPositions: number[]) => void
 		lastError: Error | null
+		jointLimitsDegrees: JointLimit[]
 	}
 
-	const { positions, moveToJointPositions, lastError }: Props = $props()
+	const { positions, moveToJointPositions, lastError, jointLimitsDegrees }: Props = $props()
 
 	// svelte-ignore state_referenced_locally
 	let desiredPositions = $state([...positions])
@@ -28,23 +32,77 @@
 		desiredPositions = [...positions]
 	}
 
-	const displayPositions = $derived(
-		desiredPositions.map((pos) => (useRadians ? degreesToRadians(pos) : pos))
-	)
-
-	const copyData = $derived(`[${displayPositions.join(', ')}]`)
-
 	const handleJointInputChange = (index: number, inputValue: number) => {
 		// default is degrees, so if user has toggle to radians, convert back to degrees before setting
 		// (we only convert to radians when displaying)
 		desiredPositions[index] = useRadians ? radiansToDegrees(inputValue) : inputValue
 	}
+
+	const handlePaste = (data: string): boolean => {
+		try {
+			desiredPositions = JSON.parse(data) as number[]
+		} catch {
+			return false
+		}
+		return true
+	}
+	const degreesToDisplayAngle = (degrees: number) => {
+		return useRadians ? degreesToRadians(degrees) : degrees
+	}
+
+	const outOfBoundsMessage = (displayValue: number, limit: JointLimit) => {
+		const min = degreesToDisplayAngle(limit.minDegrees)
+		const max = degreesToDisplayAngle(limit.maxDegrees)
+		const unit = useRadians ? 'rad' : 'deg'
+		const side = getOutOfBoundsSide(displayValue, min, max)
+
+		if (side === 'below-min') {
+			return `Min value is ${formatNumeric(min)} ${unit}`
+		}
+
+		if (side === 'above-max') {
+			return `Max value is ${formatNumeric(max)} ${unit}`
+		}
+	}
+
+	const displayPositions = $derived(desiredPositions.map((pos) => degreesToDisplayAngle(pos)))
+
+	const copyData = $derived(`[${displayPositions.join(', ')}]`)
+
+	const outOfBoundsByIndex = $derived(
+		displayPositions.map((displayValue, index) => {
+			const limit = jointLimitsDegrees[index]
+			if (!limit) {
+				return false
+			}
+			return isOutsideJointLimit(
+				displayValue,
+				degreesToDisplayAngle(limit.minDegrees),
+				degreesToDisplayAngle(limit.maxDegrees)
+			)
+		})
+	)
+
+	const hasOutOfBoundsPositions = $derived(outOfBoundsByIndex.some(Boolean))
 </script>
 
 <div class="flex min-w-0 flex-col gap-4">
 	<!-- Controls Header -->
 	<div class="flex items-center justify-between">
-		<span class="text-sm">Joint Positions</span>
+		<span class="flex flex-row items-center gap-1 text-sm">
+			Joint Positions
+			<Tooltip>
+				<Icon
+					name="information-outline"
+					cx="text-gray-6"
+				/>
+
+				<span slot="description">
+					Joint position limits are based solely on the arm kinematics and do not take into account
+					motion service limit overrides.
+				</span>
+			</Tooltip>
+		</span>
 		<div class="flex gap-1">
 			<AngleUnitToggle
 				{useRadians}
@@ -53,6 +111,7 @@
 				}}
 			/>
 			<CopyButton data={copyData} />
+			<PasteButton onPaste={handlePaste} />
 		</div>
 	</div>
 
@@ -65,18 +124,27 @@
 		</thead>
 		<tbody>
 			{#each { length: positions.length }, index}
+				{@const limit = jointLimitsDegrees[index]}
 				{@const value = Number.parseFloat(formatNumeric(displayPositions[index]))}
+				{@const outOfBounds = outOfBoundsByIndex[index]}
 				<tr>
-					<th> {index} </th>
+					<th>{index}</th>
 					<th>
-						<NumericInput
-							cx="max-w-[76px]"
-							{value}
-							on:change={(event) => {
-								const inputValue = numberValueFromEvent(event) ?? 0
-								handleJointInputChange(index, inputValue)
-							}}
-						/>
+						<div class="flex flex-col items-center gap-0.5 py-0.5">
+							<NumericInput
+								cx="max-w-[76px]"
+								{value}
+								on:change={(event) => {
+									const inputValue = numberValueFromEvent(event) ?? 0
+									handleJointInputChange(index, inputValue)
+								}}
+							/>
+							{#if limit && outOfBounds}
+								<p class="text-danger-dark text-center text-[10px] leading-snug whitespace-normal">
+									{outOfBoundsMessage(displayPositions[index], limit)}
+								</p>
+							{/if}
+						</div>
 					</th>
 				</tr>
 			{/each}
@@ -104,6 +172,7 @@
 	</div>
 	<Button
 		class="mt-auto w-fit"
+		disabled={hasOutOfBoundsPositions}
 		icon="play-circle-outline"
 		variant="dark"
 		onclick={() => moveToJointPositions(desiredPositions)}

package/dist/components/widgets/arm/move-to-joint-positions.svelte.d.ts

@@ -1,7 +1,9 @@
+import { type JointLimit } from './joint-position-limits';
 interface Props {
     positions: number[];
     moveToJointPositions: (jointPositions: number[]) => void;
     lastError: Error | null;
+    jointLimitsDegrees: JointLimit[];
 }
 declare const MoveToJointPositions: import("svelte").Component<Props, {}, "">;
 type MoveToJointPositions = ReturnType<typeof MoveToJointPositions>;

package/dist/components/widgets/arm/move-to-position.svelte

@@ -6,6 +6,7 @@
 	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
 	import CopyButton from '../../copy-button.svelte'
 	import ErrorDisplay from '../../error.svelte'
+	import PasteButton from '../../paste-button.svelte'
 	import Table from '../../table.svelte'
 	import { numberValueFromEvent } from '../../../event-handlers'
 	import { degreesToRadians, formatNumeric, radiansToDegrees } from '../../../format'
@@ -48,9 +49,15 @@
 		theta: useRadians ? degreesToRadians(desiredPosition.theta) : desiredPosition.theta,
 	})
 
-	const copyData = $derived(
-		`{x: ${displayPosition.x}, y: ${displayPosition.y}, z: ${displayPosition.z}, o_x: ${displayPosition.oX}, o_y: ${displayPosition.oY}, o_z: ${displayPosition.oZ}, theta: ${displayPosition.theta}}`
-	)
+	const copyData = $derived(JSON.stringify(displayPosition))
+	const handlePaste = (data: string): boolean => {
+		try {
+			desiredPosition = JSON.parse(data) as Pose
+		} catch {
+			return false
+		}
+		return true
+	}
 
 	const handleAngleInputChange = (key: keyof Pose, inputValue: number) => {
 		if (key === 'theta') {
@@ -84,6 +91,7 @@
 				}}
 			/>
 			<CopyButton data={copyData} />
+			<PasteButton onPaste={handlePaste} />
 		</div>
 	</div>
 

package/dist/components/widgets/camera/camera.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Canvas } from '@threlte/core'
 	import { Button, Label, Select, Switch, ToggleButtons } from '@viamrobotics/prime-core'
 	import { CameraClient } from '@viamrobotics/sdk'
 	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
@@ -15,8 +16,11 @@
 	import PCDWidget from '../pcd/pcd-widget.svelte'
 	import ExportScreenshot from './export-screenshot.svelte'
 	import { getSourceNames } from './get-source-names'
+	import { getXmpJsonFromImageBytes, type XmpJson } from './get-xmp-json-from-image'
 	import LiveOrPollingVideo from './live-or-polling-video.svelte'
+	import { pickImageForSource } from './pick-image-for-source'
 	import PictureInPictureButton from './picture-in-picture-button.svelte'
+	import ThreeSixtyCameraView from './three-sixty-camera-view.svelte'
 
 	interface Props {
 		partID: string
@@ -41,6 +45,7 @@
 	let isShowingPointcloud = $state(false)
 	let selectedSource = $state('')
 	let sourceNames = $state<string[]>([])
+	let displayAs360 = $state(false)
 
 	const { addImageToDataset } = useAddImageToDataset()
 	const setIsShowingPointcloud = (event: CustomEvent<boolean>) => {
@@ -73,6 +78,20 @@
 		}
 	})
 
+	const xmpJson = $derived.by((): XmpJson | null => {
+		const imageRecord = imageQuery.data?.images?.[0]
+		const image = imageRecord?.image
+		if (!image) {
+			return null
+		}
+
+		return getXmpJsonFromImageBytes(new Uint8Array(image), imageRecord.mimeType)
+	})
+
+	const is360EnabledImage = $derived.by((): boolean => {
+		return xmpJson?.['viam:is360'] === 'true'
+	})
+
 	const pointcloudQuery = createResourceQuery(client, 'getPointCloud', () => ({
 		enabled: isShowingPointcloud,
 		refetchInterval:
@@ -135,22 +154,42 @@
 						</Select>
 					</Label>
 				{/if}
+				{#if is360EnabledImage}
+					<Label>
+						Display as 360°
+						<ToggleButtons
+							slot="input"
+							options={['On', 'Off']}
+							selected={displayAs360 ? 'On' : 'Off'}
+							on:input={(event) => {
+								displayAs360 = event.detail === 'On'
+							}}
+						/>
+					</Label>
+				{/if}
 			</div>
 		{/if}
 		<div class="flex h-full w-full gap-4 p-4">
 			<div class="grow">
 				{#if isPlaying}
-					<LiveOrPollingVideo
-						{partID}
-						{resourceName}
-						showResolutionOptions
-						isLive={refetchInterval.current === RefetchIntervals.LIVE}
-						data={imageQuery.data}
-						error={imageQuery.error}
-						isLoading={imageQuery.isLoading}
-						refetch={imageQuery.refetch}
-						showMousePositionTooltip={mousePostionTooltip === 'On'}
-					/>
+					{#if displayAs360}
+						<Canvas>
+							<ThreeSixtyCameraView data={imageQuery.data} />
+						</Canvas>
+					{:else}
+						<LiveOrPollingVideo
+							{partID}
+							{resourceName}
+							showResolutionOptions
+							isLive={refetchInterval.current === RefetchIntervals.LIVE}
+							data={imageQuery.data}
+							error={imageQuery.error}
+							isLoading={imageQuery.isLoading}
+							refetch={imageQuery.refetch}
+							showMousePositionTooltip={mousePostionTooltip === 'On'}
+							sourceName={selectedSource}
+						/>
+					{/if}
 				{:else}
 					<div class="bg-medium flex h-64 w-80 items-center justify-center">
 						<Button
@@ -169,6 +208,7 @@
 				<div class="flex flex-col items-start gap-2">
 					<ExportScreenshot
 						name={client.current?.name ?? ''}
+						sourceName={selectedSource}
 						getImage={exportScreenshotQuery.refetch}
 					/>
 					{#if addImageToDataset}
@@ -184,8 +224,9 @@
 									imgData = imageQuery.data
 								}
 
-								const image = imgData?.images?.[0]?.image
-								const mimeType = imgData?.images?.[0]?.mimeType
+								const matchingImage = pickImageForSource(imgData?.images, selectedSource)
+								const image = matchingImage?.image
+								const mimeType = matchingImage?.mimeType
 
 								if (image) {
 									addImageToDataset({

package/dist/components/widgets/camera/decode-viam-depth.d.ts

@@ -0,0 +1,37 @@
+/** MIME type used by Viam's custom 16-bit depth format. */
+export declare const VIAM_DEPTH_MIME_TYPE = "image/vnd.viam.dep";
+/**
+ * Decode the Viam depth format (`image/vnd.viam.dep`) and return a colorized
+ * visualization (warm = near, cool = far), matching the hue sweep that RDK's
+ * `DepthMap.ToPrettyPicture` produces. Pixels with depth 0 are rendered as
+ * opaque black to match RDK. The wire format is:
+ *
+ * - bytes 0–8: magic `DEPTHMAP` (big-endian)
+ * - bytes 8–16: width (big-endian uint64)
+ * - bytes 16–24: height (big-endian uint64)
+ * - bytes 24–end: depth values as big-endian uint16, row-major
+ *
+ * The browser cannot decode this MIME type natively, so depth frames must be
+ * rendered to a canvas ourselves. References:
+ *
+ * - Reader: https://github.com/viamrobotics/rdk/blob/main/rimage/depth_map_raw.go (readDepthMapViam)
+ * - Format registration: https://github.com/viamrobotics/rdk/blob/main/rimage/image_file.go
+ * - Visualization (`DepthMap.ToPrettyPicture`):
+ *   https://github.com/viamrobotics/rdk/blob/main/rimage/depth_map.go
+ * - Python equivalent (`ViamImage.bytes_to_depth_array`):
+ *   https://github.com/viamrobotics/viam-python-sdk/blob/main/src/viam/media/video.py
+ *
+ * Returns undefined if the buffer is too short to be a valid depth image.
+ */
+export declare const decodeViamDepth: (bytes: Uint8Array) => {
+    width: number;
+    height: number;
+    pixels: Uint8ClampedArray;
+} | undefined;
+/**
+ * Decode the Viam depth format and return a PNG `Blob` suitable for display or export,
+ * using the same colorization as `decodeViamDepth`.
+ *
+ * Returns `undefined` if the buffer is too short or a canvas context is unavailable.
+ */
+export declare const getBlobForViamDepth: (bytes: Uint8Array) => Promise<Blob | undefined>;

package/dist/components/widgets/camera/decode-viam-depth.js

@@ -0,0 +1,114 @@
+/** MIME type used by Viam's custom 16-bit depth format. */
+export const VIAM_DEPTH_MIME_TYPE = 'image/vnd.viam.dep';
+const HEADER_BYTES = 24;
+// Hue sweep used by RDK's ToPrettyPicture: near = warm (~30°), far = cool (~230°).
+const HUE_NEAR = 30;
+const HUE_FAR = 230;
+const hueToRgb = (hue) => {
+    const sector = hue / 60;
+    const x = Math.round((1 - Math.abs((sector % 2) - 1)) * 255);
+    if (sector < 1)
+        return [255, x, 0];
+    if (sector < 2)
+        return [x, 255, 0];
+    if (sector < 3)
+        return [0, 255, x];
+    if (sector < 4)
+        return [0, x, 255];
+    if (sector < 5)
+        return [x, 0, 255];
+    return [255, 0, x];
+};
+/**
+ * Decode the Viam depth format (`image/vnd.viam.dep`) and return a colorized
+ * visualization (warm = near, cool = far), matching the hue sweep that RDK's
+ * `DepthMap.ToPrettyPicture` produces. Pixels with depth 0 are rendered as
+ * opaque black to match RDK. The wire format is:
+ *
+ * - bytes 0–8: magic `DEPTHMAP` (big-endian)
+ * - bytes 8–16: width (big-endian uint64)
+ * - bytes 16–24: height (big-endian uint64)
+ * - bytes 24–end: depth values as big-endian uint16, row-major
+ *
+ * The browser cannot decode this MIME type natively, so depth frames must be
+ * rendered to a canvas ourselves. References:
+ *
+ * - Reader: https://github.com/viamrobotics/rdk/blob/main/rimage/depth_map_raw.go (readDepthMapViam)
+ * - Format registration: https://github.com/viamrobotics/rdk/blob/main/rimage/image_file.go
+ * - Visualization (`DepthMap.ToPrettyPicture`):
+ *   https://github.com/viamrobotics/rdk/blob/main/rimage/depth_map.go
+ * - Python equivalent (`ViamImage.bytes_to_depth_array`):
+ *   https://github.com/viamrobotics/viam-python-sdk/blob/main/src/viam/media/video.py
+ *
+ * Returns undefined if the buffer is too short to be a valid depth image.
+ */
+export const decodeViamDepth = (bytes) => {
+    if (bytes.length < HEADER_BYTES) {
+        return undefined;
+    }
+    const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    // Verify the 8-byte "DEPTHMAP" magic (0x4445505448_4d4150).
+    const magic = view.getBigUint64(0, false);
+    if (magic !== 0x44455054484d4150n) {
+        return undefined;
+    }
+    const width = Number(view.getBigUint64(8, false));
+    const height = Number(view.getBigUint64(16, false));
+    const pixelCount = width * height;
+    if (bytes.length < HEADER_BYTES + pixelCount * 2) {
+        return undefined;
+    }
+    let min = Number.POSITIVE_INFINITY;
+    let max = 0;
+    for (let i = 0; i < pixelCount; i++) {
+        const depth = view.getUint16(HEADER_BYTES + i * 2, false);
+        if (depth === 0)
+            continue;
+        if (depth < min)
+            min = depth;
+        if (depth > max)
+            max = depth;
+    }
+    const span = Number.isFinite(min) ? Math.max(1, max - min) : 1;
+    const base = Number.isFinite(min) ? min : 0;
+    const hueSpan = HUE_FAR - HUE_NEAR;
+    const pixels = new Uint8ClampedArray(pixelCount * 4);
+    for (let i = 0; i < pixelCount; i++) {
+        const depth = view.getUint16(HEADER_BYTES + i * 2, false);
+        const idx = i * 4;
+        pixels[idx + 3] = 255;
+        if (depth === 0) {
+            // Unmeasured pixel — leave RGB at 0 (black) to match RDK.
+            continue;
+        }
+        const ratio = (depth - base) / span;
+        const [r, g, b] = hueToRgb(HUE_NEAR + ratio * hueSpan);
+        pixels[idx] = r;
+        pixels[idx + 1] = g;
+        pixels[idx + 2] = b;
+    }
+    return { width, height, pixels };
+};
+/**
+ * Decode the Viam depth format and return a PNG `Blob` suitable for display or export,
+ * using the same colorization as `decodeViamDepth`.
+ *
+ * Returns `undefined` if the buffer is too short or a canvas context is unavailable.
+ */
+export const getBlobForViamDepth = (bytes) => {
+    const decoded = decodeViamDepth(bytes);
+    if (!decoded)
+        return Promise.resolve(undefined);
+    const offscreen = document.createElement('canvas');
+    offscreen.width = decoded.width;
+    offscreen.height = decoded.height;
+    const ctx = offscreen.getContext('2d');
+    if (!ctx)
+        return Promise.resolve(undefined);
+    const imageData = ctx.createImageData(decoded.width, decoded.height);
+    imageData.data.set(decoded.pixels);
+    ctx.putImageData(imageData, 0, 0);
+    return new Promise((resolve) => {
+        offscreen.toBlob((blob) => resolve(blob ?? undefined), 'image/png');
+    });
+};

package/dist/components/widgets/camera/export-screenshot.svelte

@@ -6,12 +6,16 @@
 
 	import ErrorDisplay from '../../error.svelte'
 
+	import { getBlobForViamDepth, VIAM_DEPTH_MIME_TYPE } from './decode-viam-depth'
+	import { pickImageForSource } from './pick-image-for-source'
+
 	interface Props {
 		name: string
+		sourceName?: string
 		getImage: () => Promise<QueryObserverResult<Awaited<ReturnType<CameraClient['getImages']>>>>
 	}
 
-	const { name, getImage }: Props = $props()
+	const { name, sourceName = '', getImage }: Props = $props()
 
 	let lastError = $state<Error>()
 
@@ -35,7 +39,6 @@
 	}
 
 	const handleExport = async () => {
-		const exportFilename = `${name}-${getDateString()}.jpeg`
 		const image = await getImage()
 		if (image.error) {
 			lastError = image.error
@@ -43,18 +46,36 @@
 		}
 
 		lastError = undefined
-		if (image.data?.images?.[0]?.image) {
-			const imageBlob = new Blob([new Uint8Array(image.data.images[0].image)], {
-				type: image.data.images[0].mimeType || 'image/jpeg',
-			})
+		const matchingImage = pickImageForSource(image.data?.images, sourceName)
+		if (!matchingImage?.image) {
+			return
+		}
 
-			const link = document.createElement('a')
-			const dataUrl = URL.createObjectURL(imageBlob)
-			link.href = dataUrl
-			link.download = exportFilename
-			link.click()
-			URL.revokeObjectURL(dataUrl)
+		const bytes = new Uint8Array(matchingImage.image)
+		let blob: Blob
+		let ext: string
+
+		if (matchingImage.mimeType === VIAM_DEPTH_MIME_TYPE) {
+			// Decode depth frames to a viewable PNG so the exported file matches the live feed.
+			const depthBlob = await getBlobForViamDepth(bytes)
+			if (!depthBlob) {
+				lastError = new Error('Failed to decode depth image')
+				return
+			}
+			blob = depthBlob
+			ext = 'png'
+		} else {
+			blob = new Blob([bytes], { type: matchingImage.mimeType || 'image/jpeg' })
+			ext = 'jpeg'
 		}
+
+		const exportFilename = `${name}-${getDateString()}.${ext}`
+		const link = document.createElement('a')
+		const dataUrl = URL.createObjectURL(blob)
+		link.href = dataUrl
+		link.download = exportFilename
+		link.click()
+		URL.revokeObjectURL(dataUrl)
 	}
 </script>
 

package/dist/components/widgets/camera/export-screenshot.svelte.d.ts

@@ -2,6 +2,7 @@ import type { QueryObserverResult } from '@tanstack/svelte-query';
 import type { CameraClient } from '@viamrobotics/sdk';
 interface Props {
     name: string;
+    sourceName?: string;
     getImage: () => Promise<QueryObserverResult<Awaited<ReturnType<CameraClient['getImages']>>>>;
 }
 declare const ExportScreenshot: import("svelte").Component<Props, {}, "">;

package/dist/components/widgets/camera/get-xmp-json-from-image.d.ts

@@ -0,0 +1,3 @@
+export type XmpJson = Record<string, unknown>;
+/** Extract XMP metadata from image bytes and return it as a plain object. */
+export declare const getXmpJsonFromImageBytes: (image: Uint8Array, mimeType?: string) => XmpJson | null;

package/dist/components/widgets/camera/get-xmp-json-from-image.js

@@ -0,0 +1,134 @@
+const JPEG_SOI = 0xffd8;
+const JPEG_MARKER_PREFIX = 0xff;
+const JPEG_APP1_MARKER = 0xe1;
+const JPEG_EOI_MARKER = 0xd9;
+const XMP_IDENTIFIER = 'http://ns.adobe.com/xap/1.0/\0';
+/** Extract XMP metadata from image bytes and return it as a plain object. */
+export const getXmpJsonFromImageBytes = (image, mimeType) => {
+    if (mimeType?.includes('png')) {
+        return getXmpJsonFromPng(image);
+    }
+    return getXmpJsonFromJpeg(image);
+};
+const getXmpJsonFromJpeg = (image) => {
+    if (image.length < 4 || readUint16(image, 0) !== JPEG_SOI) {
+        return null;
+    }
+    const xmpXml = readXmpXmlFromJpeg(image);
+    if (!xmpXml) {
+        return null;
+    }
+    return xmpXmlToJson(xmpXml);
+};
+const readXmpXmlFromJpeg = (image) => {
+    const identifier = new TextEncoder().encode(XMP_IDENTIFIER);
+    let offset = 2;
+    while (offset + 4 < image.length) {
+        if (image[offset] !== JPEG_MARKER_PREFIX) {
+            break;
+        }
+        const marker = image[offset + 1];
+        if (marker === undefined) {
+            break;
+        }
+        if (marker === JPEG_EOI_MARKER) {
+            break;
+        }
+        const segmentLength = readUint16(image, offset + 2);
+        if (segmentLength < 2 || offset + 2 + segmentLength > image.length) {
+            break;
+        }
+        if (marker === JPEG_APP1_MARKER) {
+            const segmentData = image.subarray(offset + 4, offset + 2 + segmentLength);
+            if (startsWith(segmentData, identifier)) {
+                const xmpBytes = segmentData.subarray(identifier.length);
+                return new TextDecoder('utf-8').decode(xmpBytes);
+            }
+        }
+        offset += 2 + segmentLength;
+    }
+    return null;
+};
+const getXmpJsonFromPng = (image) => {
+    const signature = [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
+    if (image.length < signature.length || !startsWith(image, new Uint8Array(signature))) {
+        return null;
+    }
+    let offset = signature.length;
+    while (offset + 12 <= image.length) {
+        const chunkLength = readUint32(image, offset);
+        const chunkType = new TextDecoder('ascii').decode(image.subarray(offset + 4, offset + 8));
+        if (chunkType === 'iTXt') {
+            const chunkData = image.subarray(offset + 8, offset + 8 + chunkLength);
+            const xmpXml = readXmpXmlFromPngITXtChunk(chunkData);
+            if (xmpXml) {
+                return xmpXmlToJson(xmpXml);
+            }
+        }
+        offset += 12 + chunkLength;
+    }
+    return null;
+};
+const readXmpXmlFromPngITXtChunk = (chunkData) => {
+    let index = 0;
+    const readNullTerminated = () => {
+        const start = index;
+        while (index < chunkData.length && chunkData[index] !== 0) {
+            index += 1;
+        }
+        if (index >= chunkData.length) {
+            return null;
+        }
+        const value = new TextDecoder('utf-8').decode(chunkData.subarray(start, index));
+        index += 1;
+        return value;
+    };
+    const keyword = readNullTerminated();
+    if (keyword !== 'XML:com.adobe.xmp') {
+        return null;
+    }
+    readNullTerminated(); // compression flag
+    readNullTerminated(); // compression method
+    readNullTerminated(); // language tag
+    readNullTerminated(); // translated keyword
+    if (index >= chunkData.length) {
+        return null;
+    }
+    return new TextDecoder('utf-8').decode(chunkData.subarray(index));
+};
+const xmpXmlToJson = (xmpXml) => {
+    const doc = new DOMParser().parseFromString(xmpXml, 'application/xml');
+    if (doc.querySelector('parsererror')) {
+        return null;
+    }
+    const json = {};
+    for (const element of doc.querySelectorAll('*')) {
+        for (const attribute of element.attributes) {
+            if (attribute.localName === 'about' || attribute.name === 'rdf:about') {
+                continue;
+            }
+            json[attribute.name] = attribute.value;
+        }
+        if (element.childElementCount === 0 && element.textContent?.trim()) {
+            const key = element.prefix ? `${element.prefix}:${element.localName}` : element.localName;
+            json[key] = element.textContent.trim();
+        }
+    }
+    return Object.keys(json).length > 0 ? json : null;
+};
+const readUint16 = (bytes, offset) => (bytes[offset] << 8) | bytes[offset + 1];
+const readUint32 = (bytes, offset) => (bytes[offset] << 24) |
+    (bytes[offset + 1] << 16) |
+    (bytes[offset + 2] << 8) |
+    bytes[offset + 3];
+const startsWith = (bytes, prefix) => {
+    if (bytes.length < prefix.length) {
+        return false;
+    }
+    for (let index = 0; index < prefix.length; index += 1) {
+        if (bytes[index] !== prefix[index]) {
+            return false;
+        }
+    }
+    return true;
+};

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

@@ -15,6 +15,9 @@
 	import { formatNumeric } from '../../../format'
 	import { useMeasureFps } from '../../../fps.svelte'
 
+	import { getBlobForViamDepth, VIAM_DEPTH_MIME_TYPE } from './decode-viam-depth'
+	import { pickImageForSource } from './pick-image-for-source'
+
 	interface Props {
 		resourceName: string
 		partID: string
@@ -25,6 +28,7 @@
 		isLoading: boolean
 		videoClass?: string
 		showMousePositionTooltip?: boolean
+		sourceName?: string
 		refetch: () => Promise<unknown>
 	}
 
@@ -38,6 +42,7 @@
 		isLoading,
 		videoClass = '',
 		showMousePositionTooltip = false,
+		sourceName = '',
 		refetch,
 	}: Props = $props()
 
@@ -211,16 +216,38 @@
 	})
 
 	$effect(() => {
-		if (!data?.images?.[0]?.image) {
+		const matchingImage = pickImageForSource(data?.images, sourceName)
+		if (!matchingImage?.image) {
 			return
 		}
 
-		const imageBlob = new Blob([new Uint8Array(data.images[0].image)], {
-			type: data.images[0].mimeType || 'image/jpeg',
-		})
+		const bytes = new Uint8Array(matchingImage.image)
+		let cancelled = false
+		let objectUrl: string | undefined
+
+		const render = async () => {
+			let blob: Blob | undefined
+			if (matchingImage.mimeType === VIAM_DEPTH_MIME_TYPE) {
+				blob = await getBlobForViamDepth(bytes)
+				if (!blob) {
+					lastError = new Error('Failed to decode depth frame: truncated or corrupt buffer')
+					return
+				}
+			} else {
+				blob = new Blob([bytes], { type: matchingImage.mimeType || 'image/jpeg' })
+			}
+			if (cancelled) return
+			lastError = undefined
+			objectUrl = URL.createObjectURL(blob)
+			img.src = objectUrl
+		}
+
+		void render()
 
-		img.src = URL.createObjectURL(imageBlob)
-		return () => URL.revokeObjectURL(img.src)
+		return () => {
+			cancelled = true
+			if (objectUrl) URL.revokeObjectURL(objectUrl)
+		}
 	})
 
 	let contentRect = $state.raw<DOMRect>()

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

@@ -10,6 +10,7 @@ interface Props {
     isLoading: boolean;
     videoClass?: string;
     showMousePositionTooltip?: boolean;
+    sourceName?: string;
     refetch: () => Promise<unknown>;
 }
 declare const LiveOrPollingVideo: import("svelte").Component<Props, {}, "">;

package/dist/components/widgets/camera/pick-image-for-source.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Pick the image whose `sourceName` matches the given source, falling back to
+ * the first image.
+ */
+export declare const pickImageForSource: <T extends {
+    sourceName: string;
+}>(images: T[] | undefined, sourceName: string) => T | undefined;

package/dist/components/widgets/camera/pick-image-for-source.js

@@ -0,0 +1,13 @@
+/**
+ * Pick the image whose `sourceName` matches the given source, falling back to
+ * the first image.
+ */
+export const pickImageForSource = (images, sourceName) => {
+    if (!images || images.length === 0) {
+        return undefined;
+    }
+    if (!sourceName) {
+        return images[0];
+    }
+    return images.find((img) => img.sourceName === sourceName) ?? images[0];
+};

package/dist/components/widgets/camera/three-sixty-camera-view.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { QueryObserverResult } from '@tanstack/svelte-query'
+	import type { OrbitControls as OrbitControlsType } from 'three/examples/jsm/controls/OrbitControls.js'
+
+	import { T } from '@threlte/core'
+	import { OrbitControls, useTexture } from '@threlte/extras'
+	import { CameraClient } from '@viamrobotics/sdk'
+	import { BackSide } from 'three'
+
+	const {
+		data,
+	}: { data: QueryObserverResult<Awaited<ReturnType<CameraClient['getImages']>>>['data'] } =
+		$props()
+
+	let imageUrl = $state.raw('')
+	let controlsRef = $state<OrbitControlsType>()
+
+	$effect(() => {
+		const imageRecord = data?.images?.[0]
+		const image = imageRecord?.image
+		if (!image) {
+			imageUrl = ''
+			return
+		}
+
+		const imageBytes = new Uint8Array(image)
+		const imageBlob = new Blob([imageBytes], {
+			type: imageRecord.mimeType || 'image/jpeg',
+		})
+		const url = URL.createObjectURL(imageBlob)
+		imageUrl = url
+
+		return () => {
+			URL.revokeObjectURL(url)
+		}
+	})
+
+	const texture = $derived.by(() => (imageUrl ? useTexture(imageUrl) : null))
+</script>
+
+<T.PerspectiveCamera
+	makeDefault
+	position={[0, 0, 0.1]}
+	fov={75}
+>
+	<OrbitControls
+		bind:ref={controlsRef}
+		enableZoom={true}
+		enablePan={false}
+	/>
+</T.PerspectiveCamera>
+
+{#if $texture}
+	{#await texture then map}
+		<T.Mesh scale={[-1, 1, 1]}>
+			<T.SphereGeometry args={[500, 60, 40]} />
+			<T.MeshBasicMaterial
+				{map}
+				side={BackSide}
+			/>
+		</T.Mesh>
+	{/await}
+{/if}
+
+<T.AmbientLight intensity={0.5} />
+<T.DirectionalLight
+	position={[5, 5, 5]}
+	intensity={1}
+/>

package/dist/components/widgets/camera/three-sixty-camera-view.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { QueryObserverResult } from '@tanstack/svelte-query';
+import { CameraClient } from '@viamrobotics/sdk';
+type $$ComponentProps = {
+    data: QueryObserverResult<Awaited<ReturnType<CameraClient['getImages']>>>['data'];
+};
+declare const ThreeSixtyCameraView: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThreeSixtyCameraView = ReturnType<typeof ThreeSixtyCameraView>;
+export default ThreeSixtyCameraView;

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte'
+
 	import { Button, Progress } from '@viamrobotics/prime-core'
 	import { CodeEditor } from '@viamrobotics/prime-core/code-editor'
 	import { type ResourceName, Struct } from '@viamrobotics/sdk'
@@ -15,9 +17,11 @@
 	interface Props {
 		partID: string
 		resource: ResourceName
+		/** Rendered above the input/output editor row. */
+		header?: Snippet<[{ input: string; setInput: (value: string) => void }]>
 	}
 
-	const { partID, resource }: Props = $props()
+	const { partID, resource, header }: Props = $props()
 
 	const client = createDoCommandClient(
 		() => resource,
@@ -37,6 +41,10 @@
 
 	let output = $state('')
 
+	const setInput = (value: string) => {
+		input.current = value
+	}
+
 	const execute = async () => {
 		try {
 			lastErr = null
@@ -52,6 +60,11 @@
 </script>
 
 {#if isSupported}
+	{#if header}
+		<div class="border-b">
+			{@render header({ input: input.current ?? '{}', setInput })}
+		</div>
+	{/if}
 	<div class="flex flex-row items-center justify-between">
 		<div class="flex w-[45%] flex-col gap-2 border-r py-2">
 			<span class="text-gray-9 px-4 text-sm font-medium">Input</span>

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

@@ -1,7 +1,13 @@
+import type { Snippet } from 'svelte';
 import { type ResourceName } from '@viamrobotics/sdk';
 interface Props {
     partID: string;
     resource: ResourceName;
+    /** Rendered above the input/output editor row. */
+    header?: Snippet<[{
+        input: string;
+        setInput: (value: string) => void;
+    }]>;
 }
 declare const DoCommand: import("svelte").Component<Props, {}, "">;
 type DoCommand = ReturnType<typeof DoCommand>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -49,7 +49,7 @@
     "@playwright/test": "^1.59.1",
     "@sentry/svelte": "^10.50.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.58.0",
+    "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/postcss": "^4.2.4",
@@ -67,12 +67,12 @@
     "@types/node": "^25.6.0",
     "@types/three": "^0.183.1",
     "@viamrobotics/motion-tools": "^1.19.1",
-    "@viamrobotics/prime-core": "^0.1.21",
+    "@viamrobotics/prime-core": "^0.1.22",
     "@viamrobotics/sdk": "^0.69.0",
     "@viamrobotics/svelte-sdk": "^1.2.1",
     "@viamrobotics/tailwind-config": "^1.0.0",
     "@viamrobotics/three": "^0.0.9",
-    "@vitest/browser": "^4.1.5",
+    "@vitest/browser": "^4.1.6",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.1.5",
     "eslint": "^10.2.1",