From 4e5ed8b0a26c46b1c8c6da843e57a43985316435 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Wed, 20 May 2026 15:13:37 +0000
Subject: [PATCH 1/7] feat: add info disclaimer to moveToJointPositions widget
 (#75)

Add a tooltip next to the "Joint Positions" header explaining that
joint position limits are based solely on arm kinematics and do not
account for motion service limit overrides.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .changeset/joint-position-limits-disclaimer.md    |  5 +++++
 .../arm/__tests__/move-to-joint-positions.spec.ts | 11 +++++++++++
 .../widgets/arm/move-to-joint-positions.svelte    | 15 ++++++++++++++-
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/joint-position-limits-disclaimer.md

diff --git a/.changeset/joint-position-limits-disclaimer.md b/.changeset/joint-position-limits-disclaimer.md
new file mode 100644
index 0000000..fbdc6d0
--- /dev/null
+++ b/.changeset/joint-position-limits-disclaimer.md
@@ -0,0 +1,5 @@
+---
+'@viamrobotics/test-widgets': patch
+---
+
+Add info disclaimer to `moveToJointPositions` widget about joint position limits
diff --git a/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts b/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts
index 7b7fa84..8fad5f6 100644
--- a/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts
+++ b/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts
@@ -31,6 +31,17 @@ describe('Arm move-to-joint-positions', () => {
 		})
 	}
 
+	it('renders a disclaimer about joint position limits', () => {
+		renderSubject({
+			positions: [1],
+			jointLimitsDegrees: jointLimitsForCount(1),
+		})
+
+		expect(
+			screen.getByText(/joint position limits are based solely on the arm kinematics/iu)
+		).toBeInTheDocument()
+	})
+
 	it('renders a row for each axis', () => {
 		renderSubject({
 			positions: [1, 2, 3],
diff --git a/src/lib/components/widgets/arm/move-to-joint-positions.svelte b/src/lib/components/widgets/arm/move-to-joint-positions.svelte
index 4241d24..0c270e6 100644
--- a/src/lib/components/widgets/arm/move-to-joint-positions.svelte
+++ b/src/lib/components/widgets/arm/move-to-joint-positions.svelte
@@ -89,7 +89,20 @@
 <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}

From 4073a3aea492c6fbe2ca7ebde4909495d5cb395f Mon Sep 17 00:00:00 2001
From: Matthew MacFarquhar <matthew.macfarquhar@gmail.com>
Date: Wed, 20 May 2026 12:16:51 -0400
Subject: [PATCH 2/7] format

---
 src/lib/components/widgets/arm/move-to-joint-positions.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/widgets/arm/move-to-joint-positions.svelte b/src/lib/components/widgets/arm/move-to-joint-positions.svelte
index 0c270e6..43aa9e4 100644
--- a/src/lib/components/widgets/arm/move-to-joint-positions.svelte
+++ b/src/lib/components/widgets/arm/move-to-joint-positions.svelte
@@ -98,8 +98,8 @@
 				/>
 
 				<span slot="description">
-					Joint position limits are based solely on the arm kinematics and do not take into
-					account motion service limit overrides.
+					Joint position limits are based solely on the arm kinematics and do not take into account
+					motion service limit overrides.
 				</span>
 			</Tooltip>
 		</span>

From ebb0a18a6759ea7180e19273339896daeb6451af Mon Sep 17 00:00:00 2001
From: Matthew MacFarquhar <matthew.macfarquhar@gmail.com>
Date: Thu, 21 May 2026 13:06:05 -0400
Subject: [PATCH 3/7] enable 360 image viewing for cameras with viam xmp data

---
 .../__tests__/get-xmp-json-from-image.spec.ts |  52 +++++
 .../components/widgets/camera/camera.svelte   |  59 ++++--
 .../widgets/camera/get-xmp-json-from-image.ts | 180 ++++++++++++++++++
 .../camera/three-sixty-camera-view.svelte     |  69 +++++++
 4 files changed, 349 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
 create mode 100644 src/lib/components/widgets/camera/get-xmp-json-from-image.ts
 create mode 100644 src/lib/components/widgets/camera/three-sixty-camera-view.svelte

diff --git a/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts b/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
new file mode 100644
index 0000000..3309ca7
--- /dev/null
+++ b/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest'
+
+import { getXmpJsonFromImageBytes } from '../get-xmp-json-from-image'
+
+const buildJpegWithXmp = (xmpXml: string): Uint8Array => {
+	const identifier = new TextEncoder().encode('http://ns.adobe.com/xap/1.0/\0')
+	const xmpBytes = new TextEncoder().encode(xmpXml)
+	const app1Length = 2 + identifier.length + xmpBytes.length
+	const app1Segment = new Uint8Array(2 + app1Length)
+
+	app1Segment[0] = 0xff
+	app1Segment[1] = 0xe1
+	app1Segment[2] = (app1Length >> 8) & 0xff
+	app1Segment[3] = app1Length & 0xff
+	app1Segment.set(identifier, 4)
+	app1Segment.set(xmpBytes, 4 + identifier.length)
+
+	return new Uint8Array([0xff, 0xd8, ...app1Segment, 0xff, 0xd9])
+}
+
+describe('getXmpJsonFromImageBytes', () => {
+	it('returns null when the image has no XMP segment', () => {
+		const jpeg = new Uint8Array([0xff, 0xd8, 0xff, 0xd9])
+
+		expect(getXmpJsonFromImageBytes(jpeg)).toBeNull()
+	})
+
+	it('parses GPano fields from a JPEG XMP packet', () => {
+		const xmpXml = `<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
+<x:xmpmeta xmlns:x="adobe:ns:meta/">
+  <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+    <rdf:Description
+      rdf:about=""
+      xmlns:GPano="http://ns.google.com/photos/1.0/panorama/"
+      GPano:ProjectionType="equirectangular"
+      GPano:UsePanoramaViewer="True"
+      GPano:PoseHeadingDegrees="90"
+    />
+  </rdf:RDF>
+</x:xmpmeta>
+<?xpacket end="w"?>`
+
+		const jpeg = buildJpegWithXmp(xmpXml)
+		const xmpJson = getXmpJsonFromImageBytes(jpeg, 'image/jpeg')
+
+		expect(xmpJson).toEqual({
+			'GPano:ProjectionType': 'equirectangular',
+			'GPano:UsePanoramaViewer': 'True',
+			'GPano:PoseHeadingDegrees': '90',
+		})
+	})
+})
diff --git a/src/lib/components/widgets/camera/camera.svelte b/src/lib/components/widgets/camera/camera.svelte
index 32c7d79..d4203c4 100644
--- a/src/lib/components/widgets/camera/camera.svelte
+++ b/src/lib/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,10 @@
 	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 PictureInPictureButton from './picture-in-picture-button.svelte'
+	import ThreeSixtyCameraView from './three-sixty-camera-view.svelte'
 
 	interface Props {
 		partID: string
@@ -41,6 +44,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 +77,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 +153,41 @@
 						</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'}
+						/>
+					{/if}
 				{:else}
 					<div class="bg-medium flex h-64 w-80 items-center justify-center">
 						<Button
diff --git a/src/lib/components/widgets/camera/get-xmp-json-from-image.ts b/src/lib/components/widgets/camera/get-xmp-json-from-image.ts
new file mode 100644
index 0000000..17c37c3
--- /dev/null
+++ b/src/lib/components/widgets/camera/get-xmp-json-from-image.ts
@@ -0,0 +1,180 @@
+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'
+
+export type XmpJson = Record<string, unknown>
+
+/** Extract XMP metadata from image bytes and return it as a plain object. */
+export const getXmpJsonFromImageBytes = (
+	image: Uint8Array,
+	mimeType?: string
+): XmpJson | null => {
+	if (mimeType?.includes('png')) {
+		return getXmpJsonFromPng(image)
+	}
+
+	return getXmpJsonFromJpeg(image)
+}
+
+const getXmpJsonFromJpeg = (image: Uint8Array): XmpJson | null => {
+	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: Uint8Array): string | null => {
+	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: Uint8Array): XmpJson | null => {
+	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: Uint8Array): string | null => {
+	let index = 0
+
+	const readNullTerminated = (): string | null => {
+		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: string): XmpJson | null => {
+	const doc = new DOMParser().parseFromString(xmpXml, 'application/xml')
+	if (doc.querySelector('parsererror')) {
+		return null
+	}
+
+	const json: XmpJson = {}
+
+	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: Uint8Array, offset: number): number =>
+	(bytes[offset]! << 8) | bytes[offset + 1]!
+
+const readUint32 = (bytes: Uint8Array, offset: number): number =>
+	(bytes[offset]! << 24) |
+	(bytes[offset + 1]! << 16) |
+	(bytes[offset + 2]! << 8) |
+	bytes[offset + 3]!
+
+const startsWith = (bytes: Uint8Array, prefix: Uint8Array): boolean => {
+	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
+}
diff --git a/src/lib/components/widgets/camera/three-sixty-camera-view.svelte b/src/lib/components/widgets/camera/three-sixty-camera-view.svelte
new file mode 100644
index 0000000..e1e61f0
--- /dev/null
+++ b/src/lib/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}
+/>

From 238a35c5b790289b242b7170d108bde06ff58f9c Mon Sep 17 00:00:00 2001
From: Matthew MacFarquhar <matthew.macfarquhar@gmail.com>
Date: Thu, 21 May 2026 13:10:48 -0400
Subject: [PATCH 4/7] Revert "feat: add info disclaimer to moveToJointPositions
 widget (#75)"

This reverts commit 4e5ed8b0a26c46b1c8c6da843e57a43985316435.
---
 .changeset/joint-position-limits-disclaimer.md    |  5 -----
 .../arm/__tests__/move-to-joint-positions.spec.ts | 11 -----------
 .../widgets/arm/move-to-joint-positions.svelte    | 15 +--------------
 3 files changed, 1 insertion(+), 30 deletions(-)
 delete mode 100644 .changeset/joint-position-limits-disclaimer.md

diff --git a/.changeset/joint-position-limits-disclaimer.md b/.changeset/joint-position-limits-disclaimer.md
deleted file mode 100644
index fbdc6d0..0000000
--- a/.changeset/joint-position-limits-disclaimer.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@viamrobotics/test-widgets': patch
----
-
-Add info disclaimer to `moveToJointPositions` widget about joint position limits
diff --git a/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts b/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts
index 8fad5f6..7b7fa84 100644
--- a/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts
+++ b/src/lib/components/widgets/arm/__tests__/move-to-joint-positions.spec.ts
@@ -31,17 +31,6 @@ describe('Arm move-to-joint-positions', () => {
 		})
 	}
 
-	it('renders a disclaimer about joint position limits', () => {
-		renderSubject({
-			positions: [1],
-			jointLimitsDegrees: jointLimitsForCount(1),
-		})
-
-		expect(
-			screen.getByText(/joint position limits are based solely on the arm kinematics/iu)
-		).toBeInTheDocument()
-	})
-
 	it('renders a row for each axis', () => {
 		renderSubject({
 			positions: [1, 2, 3],
diff --git a/src/lib/components/widgets/arm/move-to-joint-positions.svelte b/src/lib/components/widgets/arm/move-to-joint-positions.svelte
index 43aa9e4..4241d24 100644
--- a/src/lib/components/widgets/arm/move-to-joint-positions.svelte
+++ b/src/lib/components/widgets/arm/move-to-joint-positions.svelte
@@ -89,20 +89,7 @@
 <div class="flex min-w-0 flex-col gap-4">
 	<!-- Controls Header -->
 	<div class="flex items-center justify-between">
-		<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>
+		<span class="text-sm">Joint Positions</span>
 		<div class="flex gap-1">
 			<AngleUnitToggle
 				{useRadians}

From 6b6f58794c8fe863def69ed68f30e5c68d586eeb Mon Sep 17 00:00:00 2001
From: Matthew MacFarquhar <matthew.macfarquhar@gmail.com>
Date: Thu, 21 May 2026 13:14:15 -0400
Subject: [PATCH 5/7] update test file

---
 .../camera/__tests__/get-xmp-json-from-image.spec.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts b/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
index 3309ca7..9e0ef51 100644
--- a/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
+++ b/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
@@ -25,16 +25,14 @@ describe('getXmpJsonFromImageBytes', () => {
 		expect(getXmpJsonFromImageBytes(jpeg)).toBeNull()
 	})
 
-	it('parses GPano fields from a JPEG XMP packet', () => {
+	it('parses viam:is360 from a JPEG XMP packet', () => {
 		const xmpXml = `<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
 <x:xmpmeta xmlns:x="adobe:ns:meta/">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
     <rdf:Description
       rdf:about=""
-      xmlns:GPano="http://ns.google.com/photos/1.0/panorama/"
-      GPano:ProjectionType="equirectangular"
-      GPano:UsePanoramaViewer="True"
-      GPano:PoseHeadingDegrees="90"
+      xmlns:viam="https://www.viam.com/"
+      viam:is360="true"
     />
   </rdf:RDF>
 </x:xmpmeta>
@@ -44,9 +42,7 @@ describe('getXmpJsonFromImageBytes', () => {
 		const xmpJson = getXmpJsonFromImageBytes(jpeg, 'image/jpeg')
 
 		expect(xmpJson).toEqual({
-			'GPano:ProjectionType': 'equirectangular',
-			'GPano:UsePanoramaViewer': 'True',
-			'GPano:PoseHeadingDegrees': '90',
+			'viam:is360': 'true',
 		})
 	})
 })

From 34dedf62e20d0b7d7955b05c305fb74b4673b8d3 Mon Sep 17 00:00:00 2001
From: Matthew MacFarquhar <matthew.macfarquhar@gmail.com>
Date: Thu, 21 May 2026 13:25:56 -0400
Subject: [PATCH 6/7] changeset

---
 .changeset/stale-games-float.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/stale-games-float.md

diff --git a/.changeset/stale-games-float.md b/.changeset/stale-games-float.md
new file mode 100644
index 0000000..db98601
--- /dev/null
+++ b/.changeset/stale-games-float.md
@@ -0,0 +1,5 @@
+---
+'@viamrobotics/test-widgets': minor
+---
+
+support 360 camera images with special XMP metadata

From a4dd47f8476de7b3358512f324af1e810292badc Mon Sep 17 00:00:00 2001
From: Matthew MacFarquhar <matthew.macfarquhar@gmail.com>
Date: Thu, 21 May 2026 13:29:57 -0400
Subject: [PATCH 7/7] format

---
 .../camera/__tests__/get-xmp-json-from-image.spec.ts     | 3 +++
 .../components/widgets/camera/get-xmp-json-from-image.ts | 9 ++-------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts b/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
index 9e0ef51..b56c373 100644
--- a/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
+++ b/src/lib/components/widgets/camera/__tests__/get-xmp-json-from-image.spec.ts
@@ -43,6 +43,9 @@ describe('getXmpJsonFromImageBytes', () => {
 
 		expect(xmpJson).toEqual({
 			'viam:is360': 'true',
+			'xmlns:rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
+			'xmlns:viam': 'https://www.viam.com/',
+			'xmlns:x': 'adobe:ns:meta/',
 		})
 	})
 })
diff --git a/src/lib/components/widgets/camera/get-xmp-json-from-image.ts b/src/lib/components/widgets/camera/get-xmp-json-from-image.ts
index 17c37c3..d58b9ee 100644
--- a/src/lib/components/widgets/camera/get-xmp-json-from-image.ts
+++ b/src/lib/components/widgets/camera/get-xmp-json-from-image.ts
@@ -8,10 +8,7 @@ const XMP_IDENTIFIER = 'http://ns.adobe.com/xap/1.0/\0'
 export type XmpJson = Record<string, unknown>
 
 /** Extract XMP metadata from image bytes and return it as a plain object. */
-export const getXmpJsonFromImageBytes = (
-	image: Uint8Array,
-	mimeType?: string
-): XmpJson | null => {
+export const getXmpJsonFromImageBytes = (image: Uint8Array, mimeType?: string): XmpJson | null => {
 	if (mimeType?.includes('png')) {
 		return getXmpJsonFromPng(image)
 	}
@@ -146,9 +143,7 @@ const xmpXmlToJson = (xmpXml: string): XmpJson | null => {
 		}
 
 		if (element.childElementCount === 0 && element.textContent?.trim()) {
-			const key = element.prefix
-				? `${element.prefix}:${element.localName}`
-				: element.localName
+			const key = element.prefix ? `${element.prefix}:${element.localName}` : element.localName
 			json[key] = element.textContent.trim()
 		}
 	}