@viamrobotics/test-widgets 0.11.2 → 0.12.0

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

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import type { Pose } from '@viamrobotics/sdk'
-
 	import { ArmClient } from '@viamrobotics/sdk'
 	import {
 		createResourceClient,
@@ -17,7 +15,7 @@
 	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 MoveToPositionControl from './move-to-position-control.svelte'
 
 	interface Props {
 		partID: string
@@ -34,22 +32,16 @@
 
 	const options = { refetchInterval: 500 }
 	const jointPositionsQuery = createResourceQuery(client, 'getJointPositions', options)
-	const endPositionQuery = createResourceQuery(client, 'getEndPosition', options)
 	const kinematicsQuery = createResourceQuery(client, 'getKinematics', options)
 	const isMovingQuery = createResourceQuery(client, 'isMoving', options)
 
 	const moveToJointPosMutation = createResourceMutation(client, 'moveToJointPositions')
 	const stopMutation = createResourceMutation(client, 'stop')
-	const moveToPosMutation = createResourceMutation(client, 'moveToPosition')
 
 	const moveToJointPositions = (jointPositionsList: number[]) => {
 		moveToJointPosMutation.mutate([jointPositionsList], {})
 	}
 
-	const moveToPosition = (position: Pose) => {
-		moveToPosMutation.mutate([position], {})
-	}
-
 	const jointLimitsDegrees = $derived(
 		kinematicsQuery.data ? getJointPositionLimits(kinematicsQuery.data as KinematicsJSON) : []
 	)
@@ -94,15 +86,10 @@
 						title="MoveToPosition"
 						api="rdk:component:arm"
 					>
-						<Query query={endPositionQuery}>
-							{#if endPositionQuery.data}
-								<MoveToPosition
-									endPosition={endPositionQuery.data}
-									{moveToPosition}
-									lastError={moveToPosMutation.error}
-								/>
-							{/if}
-						</Query>
+						<MoveToPositionControl
+							{partID}
+							{resourceName}
+						/>
 					</ApiSection>
 				</div>
 

package/dist/components/widgets/arm/move-control-mode.d.ts

@@ -0,0 +1,19 @@
+/** How the arm MoveToPosition widget executes a move. */
+export type MoveControlMode = 'motion' | 'direct';
+/**
+ * The mode the widget starts in: motion planning whenever the machine has a
+ * motion service, direct arm control only when it has none.
+ */
+export declare const defaultMoveControlMode: (motionServiceNames: string[]) => MoveControlMode;
+/**
+ * The motion service a `Move` call targets: `builtin` when present, otherwise
+ * the first discovered service.
+ *
+ * @returns The service name, or `undefined` when the machine has no motion service.
+ */
+export declare const moveMotionServiceName: (motionServiceNames: string[]) => string | undefined;
+/**
+ * The selectable motion services for the service select: `builtin` first when
+ * present, the rest alphabetical.
+ */
+export declare const motionServiceOptions: (motionServiceNames: string[]) => string[];

package/dist/components/widgets/arm/move-control-mode.js

@@ -0,0 +1,22 @@
+/**
+ * The mode the widget starts in: motion planning whenever the machine has a
+ * motion service, direct arm control only when it has none.
+ */
+export const defaultMoveControlMode = (motionServiceNames) => motionServiceNames.length > 0 ? 'motion' : 'direct';
+/**
+ * The motion service a `Move` call targets: `builtin` when present, otherwise
+ * the first discovered service.
+ *
+ * @returns The service name, or `undefined` when the machine has no motion service.
+ */
+export const moveMotionServiceName = (motionServiceNames) => motionServiceNames.includes('builtin') ? 'builtin' : motionServiceNames[0];
+/**
+ * The selectable motion services for the service select: `builtin` first when
+ * present, the rest alphabetical.
+ */
+export const motionServiceOptions = (motionServiceNames) => {
+    const others = motionServiceNames
+        .filter((name) => name !== 'builtin')
+        .toSorted((a, b) => a.localeCompare(b));
+    return motionServiceNames.includes('builtin') ? ['builtin', ...others] : others;
+};

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Icon, Tooltip } from '@viamrobotics/prime-core'
+	import { Icon, ToggleButtons, Tooltip } from '@viamrobotics/prime-core'
 
 	import AngleUnitToggle from '../../angle-unit-toggle.svelte'
 	import CopyButton from '../../copy-button.svelte'
@@ -11,7 +11,9 @@
 	import { type JointLimit } from './joint-position-limits'
 	import JointPositionQuickMove from './joint-position-quick-move.svelte'
 
-	type ControlMode = 'jointPositions' | 'quickMove'
+	type ControlMode = 'Joint Positions' | 'Quick Move'
+
+	const CONTROL_MODES: ControlMode[] = ['Joint Positions', 'Quick Move']
 
 	interface Props {
 		positions: number[]
@@ -32,9 +34,9 @@
 	// svelte-ignore state_referenced_locally
 	let desiredPositions = $state([...positions]) // in degrees
 	let useRadians = $state(false)
-	let controlMode = $state<ControlMode>('jointPositions')
+	let controlMode = $state<ControlMode>('Joint Positions')
 
-	const isQuickMoveMode = $derived(controlMode === 'quickMove')
+	const isQuickMoveMode = $derived(controlMode === 'Quick Move')
 
 	const getJointMin = (index: number): number => jointLimitsDegrees[index]?.minDegrees ?? -180
 	const getJointMax = (index: number): number => jointLimitsDegrees[index]?.maxDegrees ?? 180
@@ -44,8 +46,11 @@
 	const displayPositions = $derived(desiredPositions.map((degrees) => toDisplayAngle(degrees)))
 	const copyData = $derived(`[${displayPositions.map((v) => formatNumeric(v)).join(', ')}]`)
 
-	const toggleMode = () => {
-		controlMode = isQuickMoveMode ? 'jointPositions' : 'quickMove'
+	const handleModeChange = ({ detail }: CustomEvent<string>) => {
+		const nextMode = CONTROL_MODES.find((mode) => mode === detail)
+		if (nextMode) {
+			controlMode = nextMode
+		}
 	}
 
 	const handlePaste = (data: string): boolean => {
@@ -63,48 +68,35 @@
 </script>
 
 <div class="flex min-w-0 flex-col gap-4">
-	<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>
+	<div class="flex flex-wrap items-center justify-between gap-2">
+		<ToggleButtons
+			role="group"
+			aria-label="Control mode"
+			options={CONTROL_MODES}
+			selected={controlMode}
+			on:input={handleModeChange}
+		/>
 		<div class="flex items-center gap-1">
-			<div class="flex gap-1">
-				{#if !isQuickMoveMode}
-					<CopyButton data={copyData} />
-					<PasteButton onPaste={handlePaste} />
-				{/if}
-				<AngleUnitToggle
-					{useRadians}
-					onToggle={() => {
-						useRadians = !useRadians
-					}}
-				/>
-			</div>
-			<Tooltip>
-				<button
-					onclick={toggleMode}
-					aria-label={isQuickMoveMode ? 'Exit quick move mode' : 'Enter quick move mode'}
-					class={[
-						'hover:border-medium hover:bg-medium active:bg-gray-2 rounded p-0.5',
-						isQuickMoveMode ? 'text-amber-600' : 'text-gray-6',
-					]}
-				>
-					<Icon name="lightning-bolt-outline" />
-				</button>
-				<span slot="description">
-					{isQuickMoveMode ? 'Exit quick move mode' : 'Enter quick move mode'}
-				</span>
-			</Tooltip>
+			{#if !isQuickMoveMode}
+				<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>
+				<CopyButton data={copyData} />
+				<PasteButton onPaste={handlePaste} />
+			{/if}
+			<AngleUnitToggle
+				{useRadians}
+				onToggle={() => {
+					useRadians = !useRadians
+				}}
+			/>
 		</div>
 	</div>
 

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

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import { Banner, Icon, Label, Select, ToggleButtons, Tooltip } from '@viamrobotics/prime-core'
+	import { ArmClient, MotionClient, type Pose, type RobotClient } from '@viamrobotics/sdk'
+	import {
+		createResourceClient,
+		createResourceMutation,
+		createResourceQuery,
+		createRobotQuery,
+		useResourceStatuses,
+		useRobotClient,
+	} from '@viamrobotics/svelte-sdk'
+
+	import Query from '../../query.svelte'
+
+	import {
+		defaultMoveControlMode,
+		motionServiceOptions,
+		type MoveControlMode,
+		moveMotionServiceName,
+	} from './move-control-mode'
+	import MoveToPosition from './move-to-position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const motionServices = useResourceStatuses(() => partID, 'motion')
+	const motionServiceNames = $derived(
+		motionServices.current
+			.map((service) => service.name?.name)
+			.filter((name): name is string => name !== undefined)
+	)
+	const hasMotionService = $derived(motionServiceNames.length > 0)
+
+	let userChoice = $state<MoveControlMode>()
+	const mode = $derived(userChoice ?? defaultMoveControlMode(motionServiceNames))
+
+	let userServiceChoice = $state<string>()
+	const activeMotionServiceName = $derived(
+		userServiceChoice ?? moveMotionServiceName(motionServiceNames)
+	)
+	const serviceOptions = $derived(motionServiceOptions(motionServiceNames))
+	const showServiceSelect = $derived(mode === 'motion' && serviceOptions.length > 1)
+
+	const robotClient = useRobotClient(() => partID)
+	const armClient = createResourceClient(
+		ArmClient,
+		() => partID,
+		() => resourceName
+	)
+	const motionClient = createResourceClient(
+		MotionClient,
+		() => partID,
+		() => activeMotionServiceName ?? ''
+	)
+
+	// Pre-fill the editor with the arm's current pose, in the frame the active mode sends to.
+	const poseArgs = $derived<Parameters<RobotClient['getPose']>>([resourceName, 'world', []])
+	const poseQuery = createRobotQuery(
+		robotClient,
+		'getPose',
+		() => poseArgs,
+		() => ({ enabled: mode === 'motion' })
+	)
+	const endPositionQuery = createResourceQuery(armClient, 'getEndPosition', () => ({
+		refetchInterval: 500,
+		enabled: mode === 'direct',
+	}))
+
+	const activeQuery = $derived(mode === 'motion' ? poseQuery : endPositionQuery)
+	const endPosition = $derived(mode === 'motion' ? poseQuery.data?.pose : endPositionQuery.data)
+
+	const moveMutation = createResourceMutation(motionClient, 'move')
+	const moveToPosMutation = createResourceMutation(armClient, 'moveToPosition')
+	const lastError = $derived(mode === 'motion' ? moveMutation.error : moveToPosMutation.error)
+
+	const description = $derived(
+		mode === 'motion'
+			? 'Pose is in the world frame, as required by the motion service.'
+			: 'Pose is with respect to the arm origin and does not take into account the motion service or frame system.'
+	)
+
+	const handleModeInput = (event: CustomEvent<string>) => {
+		userChoice = event.detail === 'Motion service' ? 'motion' : 'direct'
+	}
+
+	const handleServiceChange = (event: Event) => {
+		if (event.target instanceof HTMLSelectElement) {
+			userServiceChoice = event.target.value
+		}
+	}
+
+	const moveToPosition = (position: Pose) => {
+		if (mode === 'motion') {
+			moveMutation.mutate([{ referenceFrame: 'world', pose: position }, resourceName], {})
+		} else {
+			moveToPosMutation.mutate([position], {})
+		}
+	}
+</script>
+
+<div class="flex flex-col gap-4">
+	{#if hasMotionService}
+		<Label position="top">
+			<span class="flex items-center gap-1 text-xs">
+				Control mode
+				<Tooltip>
+					<Icon
+						name="information-outline"
+						size="sm"
+					/>
+					<span slot="description">
+						Using a motion service will include motion planning and obstacle avoidance. Direct arm
+						control will move the arm without any planning and regardless of obstacles.
+					</span>
+				</Tooltip>
+			</span>
+
+			<ToggleButtons
+				slot="input"
+				options={['Motion service', 'Arm']}
+				selected={mode === 'motion' ? 'Motion service' : 'Arm'}
+				on:input={handleModeInput}
+			/>
+		</Label>
+	{/if}
+	{#if showServiceSelect}
+		<Label>
+			Motion service name
+
+			<Select
+				slot="input"
+				value={activeMotionServiceName ?? ''}
+				on:change={handleServiceChange}
+			>
+				{#each serviceOptions as name (name)}
+					<option value={name}>{name}</option>
+				{/each}
+			</Select>
+		</Label>
+	{/if}
+	<Banner variant={mode === 'motion' ? 'info' : 'danger'}>
+		{#snippet subtitle()}
+			{#if mode === 'motion'}
+				Movement goes through motion planning and attempts to avoid obstacles.
+			{:else}
+				The arm will not avoid obstacles when moving. Use with caution.
+			{/if}
+		{/snippet}
+	</Banner>
+	<Query query={activeQuery}>
+		{#if endPosition}
+			<MoveToPosition
+				{endPosition}
+				{moveToPosition}
+				{lastError}
+				{description}
+			/>
+		{/if}
+	</Query>
+</div>

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

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

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

@@ -1,14 +1,5 @@
 <script lang="ts">
-	import { ArmClient, type Pose } from '@viamrobotics/sdk'
-	import {
-		createResourceClient,
-		createResourceMutation,
-		createResourceQuery,
-	} from '@viamrobotics/svelte-sdk'
-
-	import Query from '../../query.svelte'
-
-	import MoveToPosition from './move-to-position.svelte'
+	import MoveToPositionControl from './move-to-position-control.svelte'
 
 	interface Props {
 		partID: string
@@ -16,28 +7,9 @@
 	}
 
 	const { partID, resourceName }: Props = $props()
-
-	const client = createResourceClient(
-		ArmClient,
-		() => partID,
-		() => resourceName
-	)
-
-	const endPositionQuery = createResourceQuery(client, 'getEndPosition', {
-		refetchInterval: 500,
-	})
-	const moveToPosMutation = createResourceMutation(client, 'moveToPosition')
-	const moveToPosition = (position: Pose) => {
-		moveToPosMutation.mutate([position], {})
-	}
 </script>
 
-<Query query={endPositionQuery}>
-	{#if endPositionQuery.data}
-		<MoveToPosition
-			endPosition={endPositionQuery.data}
-			{moveToPosition}
-			lastError={moveToPosMutation.error}
-		/>
-	{/if}
-</Query>
+<MoveToPositionControl
+	{partID}
+	{resourceName}
+/>

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

@@ -10,9 +10,15 @@
 		endPosition: Pose
 		moveToPosition: (position: Pose) => void
 		lastError: Error | null
+		description?: string
 	}
 
-	const { endPosition, moveToPosition, lastError }: Props = $props()
+	const {
+		endPosition,
+		moveToPosition,
+		lastError,
+		description = 'Pose is with respect to the arm origin and does not take into account the motion service or frame system.',
+	}: Props = $props()
 
 	// svelte-ignore state_referenced_locally
 	let desiredPosition = $state({ ...endPosition })
@@ -41,7 +47,7 @@
 			desiredPosition = next
 		}}
 		title="Pose Values"
-		description="Pose is with respect to the arm origin and does not take into account the motion service or frame system."
+		{description}
 	/>
 
 	<div class="mb-2 flex flex-col gap-2">

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

@@ -3,6 +3,7 @@ interface Props {
     endPosition: Pose;
     moveToPosition: (position: Pose) => void;
     lastError: Error | null;
+    description?: string;
 }
 declare const MoveToPosition: import("svelte").Component<Props, {}, "">;
 type MoveToPosition = ReturnType<typeof MoveToPosition>;

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

@@ -1,7 +1,6 @@
 import { MLModelClient, ResourceName } from '@viamrobotics/sdk';
+import { type ResourceClientContext } from '@viamrobotics/svelte-sdk';
 import { clientMap } from '../../../client-map';
 type DoCommandable = InstanceType<Exclude<(typeof clientMap)[keyof typeof clientMap], typeof MLModelClient>>;
-export declare const createDoCommandClient: (resource: () => ResourceName, partID: () => string, resourceName: () => string) => {
-    current: DoCommandable | undefined;
-};
+export declare const createDoCommandClient: (resource: () => ResourceName, partID: () => string, resourceName: () => string) => ResourceClientContext<DoCommandable>;
 export {};

package/dist/components/widgets/do-command/create-do-command-client.svelte.js

@@ -1,5 +1,5 @@
 import { MachineConnectionEvent, MLModelClient, ResourceName } from '@viamrobotics/sdk';
-import { useConnectionStatus, useRobotClient } from '@viamrobotics/svelte-sdk';
+import { useConnectionStatus, useRobotClient, } from '@viamrobotics/svelte-sdk';
 import { clientForResource, clientMap } from '../../../client-map';
 export const createDoCommandClient = (resource, partID, resourceName) => {
     const robotClient = useRobotClient(partID);
@@ -22,5 +22,11 @@ export const createDoCommandClient = (resource, partID, resourceName) => {
         get current() {
             return resourceClient;
         },
+        get partID() {
+            return partID();
+        },
+        get name() {
+            return resourceName();
+        },
     };
 };

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useResourceNames } from '@viamrobotics/svelte-sdk'
+	import { useResourceStatuses } from '@viamrobotics/svelte-sdk'
 
 	import DoCommand from './do-command.svelte'
 
@@ -10,9 +10,9 @@
 
 	const { partID, resourceName }: Props = $props()
 
-	const resourceNames = useResourceNames(() => partID)
+	const statuses = useResourceStatuses(() => partID)
 	const resource = $derived(
-		resourceNames.current.find((candidate) => candidate.name === resourceName)
+		statuses.current.find((status) => status.name?.name === resourceName)?.name
 	)
 </script>
 

package/dist/components/widgets/movement-sensor/map.svelte

@@ -24,7 +24,7 @@
 	const lng = $derived(safeReadCoordinate(coordinate?.longitude))
 </script>
 
-<div class="relative h-[300px] w-full lg:h-auto lg:w-1/2">
+<div class="relative h-[300px] w-full @4xl:h-auto @4xl:w-1/2">
 	<MapLibre
 		zoom={15}
 		options={{ attributionControl: { compact: false } }}

package/dist/components/widgets/movement-sensor/movement-sensor.svelte

@@ -103,150 +103,152 @@
 			query={propertiesQuery}
 			contentCx="p-4 h-14"
 		>
-			<div class="flex flex-wrap text-xs lg:flex-nowrap">
-				<div class="flex w-full flex-col gap-5 py-4 pr-6 pl-4 lg:w-1/4">
-					{#if propertiesQuery.data?.positionSupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetPosition"
-								api={MS_API}
-							/>
-							<Query
-								query={positionQuery}
-								contentCx="h-6"
-							>
-								{#if positionQuery.data !== undefined}
-									<Position data={positionQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+			<div class="@container">
+				<div class="flex flex-wrap text-xs @4xl:flex-nowrap">
+					<div class="flex w-full flex-col gap-5 py-4 pr-6 pl-4 @4xl:w-1/4">
+						{#if propertiesQuery.data?.positionSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetPosition"
+									api={MS_API}
+								/>
+								<Query
+									query={positionQuery}
+									contentCx="h-6"
+								>
+									{#if positionQuery.data !== undefined}
+										<Position data={positionQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.orientationSupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetOrientation"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={orientationQuery}
-								contentCx="h-6"
-							>
-								{#if orientationQuery.data !== undefined}
-									<Orientation data={orientationQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+						{#if propertiesQuery.data?.orientationSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetOrientation"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={orientationQuery}
+									contentCx="h-6"
+								>
+									{#if orientationQuery.data !== undefined}
+										<Orientation data={orientationQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.compassHeadingSupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetCompassHeading"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={compassHeadingQuery}
-								contentCx="h-6"
-							>
-								{#if compassHeadingQuery.data !== undefined}
-									<CompassHeading data={compassHeadingQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
-				</div>
+						{#if propertiesQuery.data?.compassHeadingSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetCompassHeading"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={compassHeadingQuery}
+									contentCx="h-6"
+								>
+									{#if compassHeadingQuery.data !== undefined}
+										<CompassHeading data={compassHeadingQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
+					</div>
 
-				<div class="flex w-full flex-col gap-5 p-4 lg:w-1/4">
-					{#if propertiesQuery.data?.angularVelocitySupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetAngularVelocity"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º/s)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={angularVelocityQuery}
-								contentCx="h-6"
-							>
-								{#if angularVelocityQuery.data !== undefined}
-									<Vector3 data={angularVelocityQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+					<div class="flex w-full flex-col gap-5 p-4 @4xl:w-1/4">
+						{#if propertiesQuery.data?.angularVelocitySupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetAngularVelocity"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(º/s)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={angularVelocityQuery}
+									contentCx="h-6"
+								>
+									{#if angularVelocityQuery.data !== undefined}
+										<Vector3 data={angularVelocityQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.linearVelocitySupported}
-						<div class="flex flex-col gap-2">
-							<SectionTitle
-								title="GetLinearVelocity"
-								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(m/s)</span
-									>{/snippet}
-							</SectionTitle>
-							<Query
-								query={linearVelocityQuery}
-								contentCx="h-6"
-							>
-								{#if linearVelocityQuery.data !== undefined}
-									<Vector3 data={linearVelocityQuery.data} />
-								{/if}
-							</Query>
-						</div>
-					{/if}
+						{#if propertiesQuery.data?.linearVelocitySupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetLinearVelocity"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal">(m/s)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={linearVelocityQuery}
+									contentCx="h-6"
+								>
+									{#if linearVelocityQuery.data !== undefined}
+										<Vector3 data={linearVelocityQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
+
+						{#if propertiesQuery.data?.linearAccelerationSupported}
+							<div class="flex flex-col gap-2">
+								<SectionTitle
+									title="GetLinearAcceleration"
+									api={MS_API}
+								>
+									{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal"
+											>(m/s<sup>2</sup>)</span
+										>{/snippet}
+								</SectionTitle>
+								<Query
+									query={linearAccelerationQuery}
+									contentCx="h-6"
+								>
+									{#if linearAccelerationQuery.data !== undefined}
+										<Vector3 data={linearAccelerationQuery.data} />
+									{/if}
+								</Query>
+							</div>
+						{/if}
 
-					{#if propertiesQuery.data?.linearAccelerationSupported}
 						<div class="flex flex-col gap-2">
 							<SectionTitle
-								title="GetLinearAcceleration"
+								title="GetAccuracy"
 								api={MS_API}
-							>
-								{#snippet suffix()}<span class="text-subtle-2 text-xs font-normal"
-										>(m/s<sup>2</sup>)</span
-									>{/snippet}
-							</SectionTitle>
+							/>
 							<Query
-								query={linearAccelerationQuery}
+								query={accuracyQuery}
 								contentCx="h-6"
 							>
-								{#if linearAccelerationQuery.data !== undefined}
-									<Vector3 data={linearAccelerationQuery.data} />
+								{#if accuracyQuery.data !== undefined}
+									<Accuracy data={accuracyQuery.data} />
 								{/if}
 							</Query>
 						</div>
-					{/if}
+					</div>
 
-					<div class="flex flex-col gap-2">
-						<SectionTitle
-							title="GetAccuracy"
-							api={MS_API}
+					{#if propertiesQuery.data?.positionSupported}
+						<Map
+							coordinate={positionQuery.data?.coordinate}
+							rotation={orientationQuery.data?.oZ}
 						/>
-						<Query
-							query={accuracyQuery}
-							contentCx="h-6"
-						>
-							{#if accuracyQuery.data !== undefined}
-								<Accuracy data={accuracyQuery.data} />
-							{/if}
-						</Query>
-					</div>
+					{/if}
 				</div>
-
-				{#if propertiesQuery.data?.positionSupported}
-					<Map
-						coordinate={positionQuery.data?.coordinate}
-						rotation={orientationQuery.data?.oZ}
-					/>
-				{/if}
 			</div>
 		</Query>
 

package/dist/components/widgets/navigation/navigation.svelte

@@ -134,7 +134,7 @@
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		<div class="flex w-full justify-between p-4">
+		<div class="flex w-full flex-wrap justify-between gap-2 p-4">
 			<RefetchController
 				{refetchInterval}
 				queries={[locationQuery, obstaclesQuery, waypointsQuery]}
@@ -152,85 +152,89 @@
 			</div>
 		</div>
 
-		<div class="relative h-120 w-full items-stretch p-2 sm:flex">
-			<div class="w-full max-w-62.5 p-2">
-				<TabsBar variant="secondary">
-					<Tab
-						title="Obstacles"
-						selected={tab.current === 'obstacles'}
-						selectTab={() => (tab.current = 'obstacles')}
-					/>
-					<Tab
-						title="Waypoints"
-						selected={tab.current === 'waypoints'}
-						selectTab={() => (tab.current = 'waypoints')}
-					/>
-				</TabsBar>
-
-				<ul class="h-[calc(100%-32px)] overflow-auto">
-					{#if tab.current === 'obstacles'}
-						<ObstaclesLegend
-							{map}
-							{hovered}
-							{obstacles}
-							onEnter={setHovered}
-							onLeave={setHovered}
+		<div class="@container">
+			<div class="relative flex w-full flex-col items-stretch p-2 @2xl:h-120 @2xl:flex-row">
+				<div class="w-full p-2 @2xl:max-w-62.5">
+					<TabsBar variant="secondary">
+						<Tab
+							title="Obstacles"
+							selected={tab.current === 'obstacles'}
+							selectTab={() => (tab.current = 'obstacles')}
 						/>
-					{:else if tab.current === 'waypoints'}
-						<WaypointsLegend
-							{map}
-							{hovered}
-							{waypoints}
-							onEnter={setHovered}
-							onLeave={setHovered}
-							onRemove={async (id) => {
-								await removeWaypointMutation.mutateAsync([id])
-								await waypointsQuery.refetch()
-							}}
+						<Tab
+							title="Waypoints"
+							selected={tab.current === 'waypoints'}
+							selectTab={() => (tab.current = 'waypoints')}
 						/>
-					{/if}
-				</ul>
-			</div>
+					</TabsBar>
+
+					<ul class="max-h-60 overflow-auto @2xl:h-[calc(100%-32px)] @2xl:max-h-none">
+						{#if tab.current === 'obstacles'}
+							<ObstaclesLegend
+								{map}
+								{hovered}
+								{obstacles}
+								onEnter={setHovered}
+								onLeave={setHovered}
+							/>
+						{:else if tab.current === 'waypoints'}
+							<WaypointsLegend
+								{map}
+								{hovered}
+								{waypoints}
+								onEnter={setHovered}
+								onLeave={setHovered}
+								onRemove={async (id) => {
+									await removeWaypointMutation.mutateAsync([id])
+									await waypointsQuery.refetch()
+								}}
+							/>
+						{/if}
+					</ul>
+				</div>
 
-			<MapLibre
-				class="relative grow"
-				maxPitch={view === '3D' ? 60 : 0}
-				mapProvider={MapProviders.googleMaps}
-				mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
-				bind:map
-			>
-				<NavigationControls showZoom={false} />
+				<div class="relative h-80 @2xl:h-auto @2xl:grow">
+					<MapLibre
+						class="relative"
+						maxPitch={view === '3D' ? 60 : 0}
+						mapProvider={MapProviders.googleMaps}
+						mapProviderKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
+						bind:map
+					>
+						<NavigationControls showZoom={false} />
+
+						<div class="absolute top-5 right-14 z-10 flex items-center gap-2">
+							<ToggleButtons
+								options={['2D', '3D']}
+								selected={view}
+								on:input={handleViewSelect}
+							/>
+							<SatelliteControls />
+							<CenterControls />
+						</div>
+
+						{#if locationQuery.data}
+							<DirectionalMarker position={locationQuery.data} />
+						{/if}
+
+						<Waypoints
+							{waypoints}
+							{addWayPoint}
+							tab={tab.current ?? 'obstacles'}
+							{hovered}
+						/>
 
-				<div class="absolute top-5 right-14 z-10 flex items-center gap-2">
-					<ToggleButtons
-						options={['2D', '3D']}
-						selected={view}
-						on:input={handleViewSelect}
-					/>
-					<SatelliteControls />
-					<CenterControls />
+						{#snippet layer()}
+							<Obstacles
+								{obstacles}
+								{hovered}
+								{setHovered}
+								{view}
+							/>
+						{/snippet}
+					</MapLibre>
 				</div>
-
-				{#if locationQuery.data}
-					<DirectionalMarker position={locationQuery.data} />
-				{/if}
-
-				<Waypoints
-					{waypoints}
-					{addWayPoint}
-					tab={tab.current ?? 'obstacles'}
-					{hovered}
-				/>
-
-				{#snippet layer()}
-					<Obstacles
-						{obstacles}
-						{hovered}
-						{setHovered}
-						{view}
-					/>
-				{/snippet}
-			</MapLibre>
+			</div>
 		</div>
 	{/snippet}
 </ConnectionStatus>

package/dist/components/widgets/slam/move-on-map.svelte

@@ -49,7 +49,7 @@
 			End position
 			<abbr class="text-disabled">(m)</abbr>
 		</h4>
-		<div class="flex flex-row gap-2 px-3 py-2.5">
+		<div class="flex flex-wrap gap-2 px-3 py-2.5">
 			<Label>
 				X
 

package/dist/components/widgets/slam/slam.svelte

@@ -191,78 +191,86 @@
 					>.
 				</div>
 			{:else}
-				<div class="flex divide-x">
-					<div class="divide-y">
-						<div class="m-4">
-							<RefetchController
-								{refetchInterval}
-								queries={[positionQuery, pointCloudMapQuery]}
+				<div class="@container">
+					<div class="flex flex-col @2xl:flex-row @2xl:divide-x">
+						<div class="divide-y">
+							<div class="m-4">
+								<RefetchController
+									{refetchInterval}
+									queries={[positionQuery, pointCloudMapQuery]}
+								/>
+							</div>
+
+							<ApiSection
+								title="GetPosition"
+								api="rdk:service:slam"
+							>
+								<Queries
+									queries={[propertiesQuery, positionQuery]}
+									contentCx="h-6"
+								>
+									{#if positionQuery.data !== undefined}
+										<Position position={positionQuery.data} />
+									{/if}
+								</Queries>
+							</ApiSection>
+
+							<ApiSection title="Motion">
+								<Label>
+									Base name
+
+									<Input
+										slot="input"
+										bind:value={baseName}
+									/>
+								</Label>
+								<Label>
+									Motion name
+
+									<Input
+										slot="input"
+										placeholder="builtin"
+										bind:value={motionName}
+									/>
+								</Label>
+							</ApiSection>
+
+							<MoveOnMap
+								{destination}
+								{updateDestination}
+								{moveOnMap}
+								{stopPlan}
+								lastError={moveOnMapMutation.error ?? stopPlanMutation.error}
 							/>
 						</div>
 
-						<ApiSection
-							title="GetPosition"
-							api="rdk:service:slam"
-						>
+						<div class="flex w-full">
 							<Queries
-								queries={[propertiesQuery, positionQuery]}
-								contentCx="h-6"
+								queries={[propertiesQuery, positionQuery, pointCloudMapQuery]}
+								contentCx="p-4 h-auto"
 							>
-								{#if positionQuery.data !== undefined}
-									<Position position={positionQuery.data} />
+								{#if positionQuery.data?.pose !== undefined && pointCloudMapQuery.data !== undefined}
+									<div class="h-80 w-full @2xl:h-full">
+										<SlamMap2D
+											pointcloud={pointCloudMapQuery.data}
+											basePose={{
+												// Position is returned in millimeters, but the map uses meters
+												x: positionQuery.data.pose.x / 1000,
+												y: positionQuery.data.pose.y / 1000,
+												theta: positionQuery.data.pose.theta,
+											}}
+											{motionPath}
+											destination={destination
+												? new Vector2(destination.x, destination.y)
+												: undefined}
+											helpers={true}
+											onClick={handleClick}
+										/>
+									</div>
 								{/if}
 							</Queries>
-						</ApiSection>
-
-						<ApiSection title="Motion">
-							<Label>
-								Base name
-
-								<Input
-									slot="input"
-									bind:value={baseName}
-								/>
-							</Label>
-							<Label>
-								Motion name
-
-								<Input
-									slot="input"
-									placeholder="builtin"
-									bind:value={motionName}
-								/>
-							</Label>
-						</ApiSection>
-
-						<MoveOnMap
-							{destination}
-							{updateDestination}
-							{moveOnMap}
-							{stopPlan}
-							lastError={moveOnMapMutation.error ?? stopPlanMutation.error}
-						/>
+						</div>
 					</div>
-
-					<Queries
-						queries={[propertiesQuery, positionQuery, pointCloudMapQuery]}
-						contentCx="p-4 h-auto"
-					>
-						{#if positionQuery.data?.pose !== undefined && pointCloudMapQuery.data !== undefined}
-							<SlamMap2D
-								pointcloud={pointCloudMapQuery.data}
-								basePose={{
-									// Position is returned in millimeters, but the map uses meters
-									x: positionQuery.data.pose.x / 1000,
-									y: positionQuery.data.pose.y / 1000,
-									theta: positionQuery.data.pose.theta,
-								}}
-								{motionPath}
-								destination={destination ? new Vector2(destination.x, destination.y) : undefined}
-								helpers={true}
-								onClick={handleClick}
-							/>
-						{/if}
-					</Queries>
 				</div>
 			{/if}
 		</Query>

package/dist/components/widgets/vision-service/vision-service.svelte

@@ -4,7 +4,7 @@
 	import {
 		createResourceClient,
 		createResourceQuery,
-		useResourceNames,
+		useResourceStatuses,
 	} from '@viamrobotics/svelte-sdk'
 
 	import { useAddImageToDataset } from '../../../add-image-to-dataset'
@@ -46,12 +46,18 @@
 	let showObjectPointClouds = $state(false)
 	let isRemote = $state(false)
 
-	const cameras = useResourceNames(() => partID, 'camera')
+	const cameraStatuses = useResourceStatuses(() => partID, 'camera')
+
+	const cameras = $derived(
+		cameraStatuses.current
+			.map((status) => status.name?.name)
+			.filter((name): name is string => name !== undefined)
+	)
 
 	$effect.pre(() => {
-		if (cameras.current.length > 0 && !initialFetchComplete) {
+		if (cameras.length > 0 && !initialFetchComplete) {
 			initialFetchComplete = true
-			cameraName = cameras.current[0]?.name ?? ''
+			cameraName = cameras[0] ?? ''
 		}
 	})
 
@@ -136,7 +142,7 @@
 							>
 								Default camera
 							</option>
-							{#each cameras.current as { name } (name)}
+							{#each cameras as name (name)}
 								<option
 									selected={cameraName === name}
 									value={name}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "license": "Apache-2.0",
   "type": "module",
   "wireit": {
@@ -249,7 +249,7 @@
     "@types/three": "^0.183.1",
     "@viamrobotics/prime-core": "^0.1.22",
     "@viamrobotics/sdk": "^0.69.0",
-    "@viamrobotics/svelte-sdk": "^1.2.1",
+    "@viamrobotics/svelte-sdk": "^1.5.1",
     "@viamrobotics/tailwind-config": "^1.2.0",
     "@vitest/browser": "^4.1.10",
     "@vitest/browser-playwright": "^4.1.5",