@viamrobotics/test-widgets 0.1.1 → 0.1.3

package/README.md

@@ -1,65 +1,46 @@
-# Svelte library
-
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
-
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```sh
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-To recreate this project with the same configuration:
-
-```sh
-# recreate this project
-pnpm dlx sv@0.12.8 create --template library --types ts --add prettier eslint vitest="usages:unit,component" playwright tailwindcss="plugins:none" sveltekit-adapter="adapter:static" devtools-json mcp="ide:claude-code+setup:remote" --install pnpm my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
-
-To build your library:
-
-```sh
-npm pack
-```
-
-To create a production version of your showcase app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```sh
-npm publish
+# @viamrobotics/test-widgets
+
+A library of Svelte components for interacting with Viam-powered machines. Each widget provides a test interface for a specific resource type -- arms, bases, cameras, motors, sensors, and more -- allowing users to send commands, view live data, and control hardware directly from the browser.
+
+Also includes reusable building blocks for visualizations, such as maps (MapLibre), SLAM mapping, 3D point clouds (Three.js), etc.
+
+## Playground
+
+The playground (`pnpm dev`) can be used to develop the test-cards against prod robots with prod modules.
+
+This is useful if you need to validate the sdk against specific behavior of modules or need to replicate a bug from another robot (why replicate locally when you could just develop directly against the robot with the bug?).
+
+To setup your playground, create a `.env.local` in the test-cards directory with the following format (no need to create two robots):
+
+```json
+VITE_PLAYGROUND_ROBOTS='
+{
+  "some prod robot": {
+    "host": "fleet-rover-01-main.ve4ba7w5qr.viam.cloud",
+    "partId": "<PART-ID>",
+    "apiKeyId": "<API-KEY-ID>",
+    "apiKeyValue": "<API-KEY-VALUE>",
+    "signalingAddress": "https://app.viam.com:443"
+  },
+  "some staging robot name": {
+    "host": "fleet-rover-02-main.ytobojb44p.viamstg.cloud",
+    "partId": "<PART-ID>",
+    "apiKeyId": "<API-KEY-ID>",
+    "apiKeyValue": "<API-KEY-VALUE>",
+    "signalingAddress": "https://app.viam.dev:443"
+  },
+  "local-machine (no fqdn)": {
+    "host": "localhost:8080",
+    "serviceHost": "http://localhost:8080",
+    "partId": "local-machine (no fqdn)",
+    "signalingAddress": ""
+  },
+  "local-machine (fqdn)": {
+    "host": "something-unique",
+    "serviceHost": "http://localhost:8080",
+    "partId": "local-machine (fqdn)",
+    "signalingAddress": ""
+  }
+}
+'
 ```

package/dist/components/index.d.ts

@@ -53,5 +53,3 @@ export { default as VisionServiceWidget } from './widgets/vision-service/vision-
 export { default as RefetchController } from './refetch-controller.svelte';
 export { NavigationMap, NavigationTab, type NavigationTabType, type Shapes, type CapsuleGeometry, type SphereGeometry, type BoxGeometry, type Geometry, type Obstacle, type Path, } from './navigation-map';
 export { MapLibre, MapLibreMarker, CenterControls, FollowControls, NavigationControls, SatelliteControls, DirectionalMarker, LngLatInput, MapProviders, type MapProvider, GeoPose, Waypoint, useMapLibre, useMapLibreEvent, useMapLibreThreeRaycast, useMapLibreThreeRenderer, lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './maplibre';
-export { default as BoundingBoxLabeler } from './image-annotations/bounding-box-labeler.svelte';
-export { ZOOM_MIN, ZOOM_MAX, INVERT_Y_FLOAT_DISTANCE, INVERT_X_FLOAT_DISTANCE, } from './image-annotations/labeler-constants';

package/dist/components/index.js

@@ -52,5 +52,3 @@ export { default as VisionServiceWidget } from './widgets/vision-service/vision-
 export { default as RefetchController } from './refetch-controller.svelte';
 export { NavigationMap, NavigationTab, } from './navigation-map';
 export { MapLibre, MapLibreMarker, CenterControls, FollowControls, NavigationControls, SatelliteControls, DirectionalMarker, LngLatInput, MapProviders, GeoPose, Waypoint, useMapLibre, useMapLibreEvent, useMapLibreThreeRaycast, useMapLibreThreeRenderer, lngLatToMercator, mercatorToCartesian, lngLatToCartesian, cartesianToMercator, cartesianToLngLat, } from './maplibre';
-export { default as BoundingBoxLabeler } from './image-annotations/bounding-box-labeler.svelte';
-export { ZOOM_MIN, ZOOM_MAX, INVERT_Y_FLOAT_DISTANCE, INVERT_X_FLOAT_DISTANCE, } from './image-annotations/labeler-constants';

package/dist/components/queries.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import type { ResizeDetail } from '@svelte-put/resize'
 	import type { QueryObserverResult } from '@tanstack/svelte-query'
 	import type { Snippet } from 'svelte'
 
-	import { resize } from '@svelte-put/resize'
+	import { useResizeObserver } from 'runed'
 
 	import ContentRect from './content-rect.svelte'
 	import ErrorDisplay from './error.svelte'
@@ -17,10 +16,15 @@
 
 	const { queries, contentCx = '', children }: Props = $props()
 
-	let contentRect = $state<DOMRect>()
-	const handleResize = (event: CustomEvent<ResizeDetail>) => {
-		contentRect = event.detail.entry.contentRect
-	}
+	let el = $state.raw<HTMLDivElement>()
+	let contentRect = $state.raw<DOMRect>()
+
+	useResizeObserver(
+		() => el,
+		([entry]) => {
+			contentRect = entry.contentRect
+		}
+	)
 
 	let errors = $state.raw<Error[]>([])
 	let data = $state.raw<unknown[]>([])
@@ -65,8 +69,7 @@
 {:else}
 	<div
 		class="w-full"
-		use:resize
-		onresized={handleResize}
+		bind:this={el}
 	>
 		{@render children?.({ data })}
 	</div>

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

@@ -2,7 +2,6 @@
 	import { Button, Label, Switch, ToggleButtons } from '@viamrobotics/prime-core'
 	import { CameraClient } from '@viamrobotics/sdk'
 	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
-	import { writable } from 'svelte/store'
 
 	import { useAddImageToDataset } from '../../../add-image-to-dataset'
 	import ConnectionStatus from '../../connection-status.svelte'
@@ -30,7 +29,7 @@
 		() => resourceName,
 		'camera'
 	)
-	const isShowingPip = writable(false)
+	const isShowingPip = $state(false)
 	let isShowingPointcloud = $state(false)
 
 	const { addImageToDataset } = useAddImageToDataset()
@@ -47,7 +46,7 @@
 	const imageQuery = createResourceQuery(client, 'getImages', () => ({
 		enabled: refetchInterval.current !== RefetchIntervals.LIVE,
 		refetchInterval: refetchInterval.current,
-		refetchIntervalInBackground: $isShowingPip,
+		refetchIntervalInBackground: isShowingPip,
 	}))
 
 	const pointcloudQuery = createResourceQuery(client, 'getPointCloud', () => ({

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

@@ -1,12 +1,10 @@
 <script lang="ts">
-	import type { ResizeDetail } from '@svelte-put/resize'
-
 	import * as Sentry from '@sentry/svelte'
-	import { resize } from '@svelte-put/resize'
 	import { createMutation, type QueryObserverResult } from '@tanstack/svelte-query'
 	import { Button, Label, Select } from '@viamrobotics/prime-core'
 	import { CameraClient, type RobotClient, streamApi, StreamClient } from '@viamrobotics/sdk'
 	import { useRobotClient } from '@viamrobotics/svelte-sdk'
+	import { useResizeObserver } from 'runed'
 	import { untrack } from 'svelte'
 
 	import { assertExists } from '../../../assert'
@@ -228,9 +226,12 @@
 	})
 
 	let contentRect = $state.raw<DOMRect>()
-	const handleResize = (event: CustomEvent<ResizeDetail>) => {
-		contentRect = event.detail.entry.contentRect
-	}
+	useResizeObserver(
+		() => videoElement,
+		([entry]) => {
+			contentRect = entry.contentRect
+		}
+	)
 
 	let hoverTooltipOpen = $state(false)
 	let mouseHoverImagePosition = $state({ pctX: 0, pctY: 0, absX: 0, absY: 0 })
@@ -340,8 +341,6 @@
 		controls={false}
 		playsinline
 		aria-label={`${resourceName} stream`}
-		use:resize
-		onresized={handleResize}
 	>
 	</video>
 </div>

package/dist/components/widgets/camera/picture-in-picture-button.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import type { Writable } from 'svelte/store'
-
 	import { Button } from '@viamrobotics/prime-core'
 	import { onMount } from 'svelte'
 
@@ -9,19 +7,20 @@
 	interface Props {
 		resourceName: string
 		mediaStream: MediaStream | null
-		isShowingPip: Writable<boolean>
+		isShowingPip: boolean
 	}
 
-	const { resourceName, mediaStream, isShowingPip }: Props = $props()
+	let { resourceName, mediaStream, isShowingPip = $bindable(false) }: Props = $props()
 
 	let videoElement = $state.raw<HTMLVideoElement>()
 	let lastErr = $state.raw<Error>()
 
 	const onEnter = () => {
-		$isShowingPip = true
+		isShowingPip = true
 	}
+
 	const onLeave = () => {
-		$isShowingPip = false
+		isShowingPip = false
 	}
 
 	onMount(() => {
@@ -31,7 +30,7 @@
 		return () => {
 			videoElement?.removeEventListener('enterpictureinpicture', onEnter)
 			videoElement?.removeEventListener('leavepictureinpicture', onLeave)
-			if ($isShowingPip) {
+			if (isShowingPip) {
 				document.exitPictureInPicture()
 			}
 		}
@@ -47,7 +46,7 @@
 		lastErr = undefined
 
 		try {
-			await ($isShowingPip
+			await (isShowingPip
 				? document.exitPictureInPicture()
 				: videoElement?.requestPictureInPicture())
 		} catch (error) {

package/dist/components/widgets/camera/picture-in-picture-button.svelte.d.ts

@@ -1,9 +1,8 @@
-import type { Writable } from 'svelte/store';
 interface Props {
     resourceName: string;
     mediaStream: MediaStream | null;
-    isShowingPip: Writable<boolean>;
+    isShowingPip: boolean;
 }
-declare const PictureInPictureButton: import("svelte").Component<Props, {}, "">;
+declare const PictureInPictureButton: import("svelte").Component<Props, {}, "isShowingPip">;
 type PictureInPictureButton = ReturnType<typeof PictureInPictureButton>;
 export default PictureInPictureButton;

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button } from '@viamrobotics/prime-core'
+	import { Button, Progress } from '@viamrobotics/prime-core'
 	import { JsonEditor } from '@viamrobotics/prime-editor'
 	import { MLModelClient, ResourceName, Struct } from '@viamrobotics/sdk'
 	import { createResourceClient, createResourceMutation } from '@viamrobotics/svelte-sdk'
@@ -31,7 +31,7 @@
 
 	const doCommandMutation = $derived(createResourceMutation(client, 'doCommand'))
 
-	let lastErr = $state<Error>()
+	let lastErr = $state<Error | null>()
 
 	const uid = $props.id()
 
@@ -41,10 +41,12 @@
 
 	const execute = async () => {
 		try {
+			lastErr = null
+			output = ''
 			const parsedInput = Struct.fromJsonString(input.current ?? '{}')
 			const data = await doCommandMutation.mutateAsync([parsedInput])
 			output = JSON.stringify(data, null, 2)
-			lastErr = undefined
+			lastErr = null
 		} catch (error) {
 			lastErr = error as Error
 		}
@@ -72,7 +74,15 @@
 		>
 
 		<div class="flex w-[45%] flex-col gap-2 border-l py-2">
-			<span class="text-gray-9 px-4 text-sm font-medium">Output</span>
+			<div class="flex flex-row items-center">
+				<span class="text-gray-9 px-4 text-sm font-medium">Output</span>
+				{#if doCommandMutation.isPending}
+					<Progress
+						size="medium"
+						variant="dark"
+					/>
+				{/if}
+			</div>
 			{#if !lastErr}
 				<JsonEditor
 					label="output"

package/dist/components/widgets/switch/position-view.svelte

@@ -27,17 +27,17 @@
 		refetchInterval: 500,
 	})
 
-	// TODO: switch to using optimistic update mutation client from svelte SDK when available APP-15498
-	let currentPosition = $derived(positionQuery.data ?? 0)
-
 	const numPositionsQuery = createResourceQuery(client, 'getNumberOfPositions', {
 		refetchInterval: 500,
 	})
 
-	const setPositionMutation = createResourceMutation(client, 'setPosition')
+	const setPositionMutation = createResourceMutation(
+		client,
+		'setPosition',
+		() => positionQuery.queryKey
+	)
 
 	const onSelect = async (position: number) => {
-		currentPosition = position
 		await setPositionMutation.mutateAsync([position])
 		await positionQuery.refetch()
 	}
@@ -51,7 +51,7 @@
 		<Position
 			numPositions={numPositionsQuery.data[0]}
 			labels={numPositionsQuery.data[1]}
-			{currentPosition}
+			currentPosition={positionQuery.data}
 			{onSelect}
 			lastError={setPositionMutation.error}
 		/>

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

@@ -6,12 +6,12 @@ import { labelToColor } from "./color.js";
  * Adds ids to detections.
  */
 export const addIdsToDetections = (detections) => {
-    for (const detection of detections) {
-        detection.id = MathUtils.generateUUID();
-        detection.confidence = Math.round(detection.confidence * 100);
-        detection.color = labelToColor(detection.className);
-    }
-    return detections;
+    return detections.map((detection) => ({
+        ...detection,
+        id: MathUtils.generateUUID(),
+        confidence: Math.round(detection.confidence * 100),
+        color: labelToColor(detection.className),
+    }));
 };
 export const DETECTIONS_CONTEXT_KEY = Symbol('detections-context');
 const categorize = (list) => {

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

@@ -69,7 +69,6 @@
 </script>
 
 <Container
-	name="Detection {detection.id}"
 	positionType="absolute"
 	positionLeft={factoredxMin}
 	positionTop={factoredyMin}

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import type { cameraApi, Classification, Detection } from '@viamrobotics/sdk'
 
-	import { resize } from '@svelte-put/resize'
 	import { Canvas } from '@threlte/core'
 	import { Progress } from '@viamrobotics/prime-core'
+	import { useResizeObserver } from 'runed'
 	import { provideFontFamilies } from 'threlte-uikit'
 
 	import { useMeasureFps } from '../../../fps.svelte'
@@ -69,6 +69,13 @@
 	let container = $state<HTMLElement>()
 	let size = $state<Size>()
 
+	useResizeObserver(
+		() => container,
+		() => {
+			setSize()
+		}
+	)
+
 	const setSize = () => {
 		if (container) {
 			size = getImageSize(img, container)
@@ -94,8 +101,6 @@
 <div
 	class="flex h-full min-h-0 w-full min-w-0 gap-2 py-2 pl-2"
 	bind:this={container}
-	use:resize
-	onresize={setSize}
 >
 	{#if !size}
 		<div class="grid w-full place-content-center">

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

@@ -134,7 +134,10 @@
 						</Select>
 					</Label>
 				</div>
-				<Label position="top">
+				<Label
+					cx="w-fit"
+					position="top"
+				>
 					Is remote?
 					<Switch
 						slot="input"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "Apache-2.0",
   "type": "module",
   "files": [
@@ -27,76 +27,86 @@
     "url": "git+https://github.com/viamrobotics/test-widgets.git"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "@sentry/svelte": ">=8",
+    "@threlte/core": ">=8",
+    "@threlte/extras": ">=9",
+    "@viamrobotics/prime-core": ">=0.1",
+    "@viamrobotics/prime-editor": ">=0.0.2",
+    "@viamrobotics/sdk": ">=0.68",
+    "@viamrobotics/svelte-sdk": ">=1.1",
+    "lodash-es": ">=4",
+    "runed": ">=0.28",
+    "svelte": ">=5",
+    "three": ">=0.178",
+    "threlte-uikit": ">=2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.30.0",
-    "@eslint/compat": "^2.0.3",
+    "@eslint/compat": "^2.0.5",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/public-sans": "^5.2.7",
     "@fontsource-variable/roboto-mono": "^5.2.8",
     "@fontsource-variable/space-grotesk": "^5.2.10",
     "@playwright/test": "^1.59.1",
-    "@sentry/svelte": "^10.47.0",
-    "@svelte-put/resize": "^4.0.0",
+    "@sentry/svelte": "^10.48.0",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/kit": "^2.57.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
-    "@tanstack/svelte-query": "^6.1.12",
-    "@tanstack/svelte-query-devtools": "^6.1.12",
+    "@tanstack/svelte-query": "^6.1.16",
+    "@tanstack/svelte-query-devtools": "^6.1.16",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@threlte/core": "^8.5.5",
-    "@threlte/extras": "^9.14.2",
-    "@threlte/test": "^1.0.0",
+    "@threlte/core": "^8.5.9",
+    "@threlte/extras": "^9.14.6",
+    "@threlte/test": "^2.0.2",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^25",
     "@types/three": "^0.183.1",
-    "@viamrobotics/motion-tools": "^1.16.0",
+    "@viamrobotics/motion-tools": "^1.18.1",
     "@viamrobotics/prime-core": "^0.1.16",
     "@viamrobotics/prime-editor": "^0.0.2",
-    "@viamrobotics/sdk": "^0.68.1",
-    "@viamrobotics/svelte-sdk": "^1.1.5",
+    "@viamrobotics/sdk": "^0.68.2",
+    "@viamrobotics/svelte-sdk": "^1.1.6",
     "@viamrobotics/tailwind-config": "^1.0.0",
     "@viamrobotics/three": "^0.0.9",
-    "@vitest/browser": "^4.1.2",
-    "@vitest/browser-playwright": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "eslint": "^10.1.0",
+    "@vitest/browser": "^4.1.4",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
+    "eslint": "^10.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-perfectionist": "^5.8.0",
-    "eslint-plugin-svelte": "^3.16.0",
+    "eslint-plugin-svelte": "^3.17.0",
     "eslint-plugin-unicorn": "^64.0.0",
-    "globals": "^17.4.0",
+    "globals": "^17.5.0",
     "lodash-es": "^4.18.1",
-    "maplibre-gl": "^5.21.1",
+    "maplibre-gl": "^5.23.0",
     "mock-match-media": "^1.0.3",
     "playwright": "^1.59.1",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^3.5.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.18",
     "runed": "^0.37.1",
-    "svelte": "^5.55.1",
+    "svelte": "^5.55.4",
     "svelte-check": "^4.4.6",
     "svelte-splitpanes": "^8.0.12",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.2",
     "three": "^0.183.2",
-    "threlte-uikit": "^1.2.1",
+    "threlte-uikit": "^2.0.0",
     "type-fest": "^5.5.0",
     "typescript": "^6.0.2",
-    "typescript-eslint": "^8.58.0",
-    "vite": "^8.0.3",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.8",
     "vite-plugin-devtools-json": "^1.0.0",
-    "vite-plugin-glsl": "^1.5.6",
-    "vitest": "^4.1.2",
-    "vitest-browser-svelte": "^2.1.0"
+    "vite-plugin-glsl": "^1.6.0",
+    "vitest": "^4.1.4",
+    "vitest-browser-svelte": "^2.1.1"
   },
   "engines": {
     "node": ">=22.12.0"

package/dist/components/image-annotations/annotation-edit-utils.d.ts

@@ -1,21 +0,0 @@
-import type { Size } from './get-image-size';
-import { type BoundingBox, type BoundingCoords, type Coordinates, ResizeHandleLocation } from './bounding-box-types';
-export declare const getBoundingRect: (original: BoundingBox, dragDistance: Coordinates | undefined, containerWidth: number, containerHeight: number, corner?: ResizeHandleLocation) => BoundingCoords;
-export declare const shouldDisplayBoxFill: (annotationID: string, inEditMode: boolean, focusedID: string | undefined, editTargetID: string | undefined, hoveredAnnotations: Record<string, boolean>) => boolean;
-export declare const createNormalizedTempBox: (label: string, size: Size, firstPoint: Coordinates, finalPoint: Coordinates) => {
-    xMinNormalized: number;
-    xMaxNormalized: number;
-    yMinNormalized: number;
-    yMaxNormalized: number;
-    label: string;
-    id: string;
-} | undefined;
-export declare const getModifyKeyForOS: () => "metaKey" | "ctrlKey";
-export declare const calculatePastedBox: (mousePosition: Coordinates, copyTarget: BoundingBox, containerWidth: number, containerHeight: number) => {
-    id: string;
-    label: string;
-    xMinNormalized: number;
-    xMaxNormalized: number;
-    yMinNormalized: number;
-    yMaxNormalized: number;
-};