@viamrobotics/test-widgets 0.3.1 → 0.5.0

package/dist/client-map.d.ts

@@ -30,5 +30,5 @@ export declare const clientMap: {
     readonly 'rdk:service:world_state_store': typeof WorldStateStoreClient;
     readonly 'rdk:service:video': typeof VideoClient;
 };
-export declare const clientForResource: (resource: ResourceName) => typeof ArmClient | typeof BaseClient | typeof GantryClient | typeof GripperClient | typeof MotorClient | typeof ServoClient | typeof AudioInClient | typeof AudioOutClient | typeof BoardClient | typeof ButtonClient | typeof CameraClient | typeof DiscoveryClient | typeof EncoderClient | typeof GenericComponentClient | typeof InputControllerClient | typeof MovementSensorClient | typeof PoseTrackerClient | typeof PowerSensorClient | typeof SensorClient | typeof SwitchClient | typeof DataManagerClient | typeof GenericServiceClient | typeof MLModelClient | typeof MotionClient | typeof NavigationClient | typeof SlamClient | typeof VisionClient | typeof WorldStateStoreClient | typeof VideoClient | undefined;
+export declare const clientForResource: (resource: ResourceName) => typeof ArmClient | typeof AudioInClient | typeof AudioOutClient | typeof BaseClient | typeof BoardClient | typeof ButtonClient | typeof CameraClient | typeof EncoderClient | typeof GantryClient | typeof GenericComponentClient | typeof GripperClient | typeof InputControllerClient | typeof MotorClient | typeof MovementSensorClient | typeof PoseTrackerClient | typeof PowerSensorClient | typeof SensorClient | typeof ServoClient | typeof SwitchClient | typeof DataManagerClient | typeof DiscoveryClient | typeof GenericServiceClient | typeof MLModelClient | typeof MotionClient | typeof NavigationClient | typeof SlamClient | typeof VisionClient | typeof WorldStateStoreClient | typeof VideoClient | undefined;
 export declare const supportsDoCommand: (resource: ResourceName) => boolean;

package/dist/client-map.js

@@ -1,5 +1,5 @@
 import { ArmClient, AudioInClient, AudioOutClient, BaseClient, BoardClient, ButtonClient, CameraClient, DataManagerClient, DiscoveryClient, EncoderClient, GantryClient, GenericComponentClient, GenericServiceClient, GripperClient, InputControllerClient, MLModelClient, MotionClient, MotorClient, MovementSensorClient, NavigationClient, PoseTrackerClient, PowerSensorClient, SensorClient, ServoClient, SlamClient, SwitchClient, VideoClient, VisionClient, WorldStateStoreClient, } from '@viamrobotics/sdk';
-import { getResourceAPI } from "./resource.js";
+import { getResourceAPI } from "./get-resource-api.js";
 export const clientMap = {
     'rdk:component:arm': ArmClient,
     'rdk:component:audio_in': AudioInClient,

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/refetch-interval-store.svelte.d.ts

@@ -14,5 +14,5 @@ export declare const RefetchIntervals: {
 };
 export type RefetchRate = ValueOf<typeof RefetchRates>;
 export type RefetchInterval = ValueOf<typeof RefetchIntervals>;
-export declare const RefetchRateToInterval: ["Live" | "Refresh every second" | "Refresh every 5 seconds" | "Manual refresh", false | 33.3333 | 1000 | 5000][];
+export declare const RefetchRateToInterval: ["Live" | "Refresh every second" | "Refresh every 5 seconds" | "Manual refresh", false | 1000 | 33.3333 | 5000][];
 export declare const createRefetchIntervalStore: (partID: () => string, resourceName: () => string, scope: string, defaultInterval?: RefetchInterval) => PersistedState<RefetchInterval>;

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>;