@viamrobotics/test-widgets 0.1.2 → 0.1.4

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/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/table.svelte

@@ -22,7 +22,8 @@
 
 	/* (:global is a svelte directive specifically for this purpose with slots.)*/
 
-	@reference "../../app.css";
+	@reference "tailwindcss";
+	@reference "@viamrobotics/tailwind-config";
 
 	.customTable {
 		@apply w-full table-auto;

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'
@@ -187,11 +185,13 @@
 	})
 
 	$effect(() => {
-		return untrack(() => {
-			disableStream().then(() => {
-				setMediaStream(null)
+		return () => {
+			untrack(() => {
+				disableStream().then(() => {
+					setMediaStream(null)
+				})
 			})
-		})
+		}
 	})
 
 	$effect(() => {
@@ -228,9 +228,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 +343,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/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.2",
+  "version": "0.1.4",
   "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"