@viamrobotics/test-widgets 0.0.1 → 0.1.2

package/dist/components/navigation-map/components/obstacle.svelte

@@ -8,7 +8,8 @@
 		type MapLayerTouchEvent,
 		type MapMouseEvent,
 	} from 'maplibre-gl'
-	import * as THREE from 'three'
+	import { fromStore } from 'svelte/store'
+	import { type BufferGeometry, Vector2 } from 'three'
 
 	import type { Obstacle } from '../types'
 
@@ -24,7 +25,8 @@
 
 	const { name, onupdate }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const nav = useNavigationMap()
 
 	let pointerdownTheta = 0
@@ -35,13 +37,13 @@
 
 	let draggingObstacle = $state(false)
 
-	const pointermove = new THREE.Vector2()
-	const pointerdown = new THREE.Vector2()
+	const pointermove = new Vector2()
+	const pointerdown = new Vector2()
 
 	const debugMode = $derived(nav.environment === 'debug')
 	const obstacle = $derived(nav.obstacles.find((item) => item.name === name))
 
-	const handleGeometryCreate = (ref: THREE.BufferGeometry) => {
+	const handleGeometryCreate = (ref: BufferGeometry) => {
 		ref.rotateX(-Math.PI / 2)
 	}
 
@@ -52,7 +54,7 @@
 			return
 		}
 
-		map.dragPan.disable()
+		map.current.dragPan.disable()
 		draggingObstacle = true
 	}
 
@@ -66,7 +68,7 @@
 
 		if (isManipulating) {
 			event.preventDefault()
-			map.getCanvas().classList.add('!cursor-ns-resize')
+			map.current.getCanvas().classList.add('!cursor-ns-resize')
 		}
 
 		pointerdown.set(event.point.x, event.point.y)
@@ -164,17 +166,21 @@
 
 	const handlePointerUp = () => {
 		draggingObstacle = false
-		map.dragPan.enable()
-		map.getCanvas().classList.remove('!cursor-ns-resize')
+		map.current.dragPan.enable()
+		map.current.getCanvas().classList.remove('!cursor-ns-resize')
 	}
 
 	const active = $derived(nav.hovered === name || nav.selected === name)
 
-	$effect.pre(() => {
+	$effect(() => {
 		if (draggingObstacle) {
-			map.on('mousemove', handlePointerMove)
+			map.current.on('mousemove', handlePointerMove)
 		} else {
-			map.off('mousemove', handlePointerMove)
+			map.current.off('mousemove', handlePointerMove)
+		}
+
+		return () => {
+			map.current.off('mousemove', handlePointerMove)
 		}
 	})
 

package/dist/components/navigation-map/plugins/interactivity.js

@@ -1,5 +1,6 @@
 import { useThrelte } from '@threlte/core';
 import { interactivity } from '@threlte/extras';
+import { fromStore } from 'svelte/store';
 import { useMapLibre, useMapLibreThreeRaycast } from '../../maplibre';
 /**
  * Provides interactivity as described in @threlte/extras,
@@ -8,10 +9,11 @@ import { useMapLibre, useMapLibreThreeRaycast } from '../../maplibre';
  */
 export const interactivityPlugin = () => {
     const { camera } = useThrelte();
-    const { map } = useMapLibre();
+    const context = useMapLibre();
+    const map = fromStore(context.map);
     const { pointer, compute } = useMapLibreThreeRaycast(camera);
     interactivity({
-        target: map.getCanvas(),
+        target: map.current.getCanvas(),
         filter: (hits) => {
             // Only return the first hit
             return hits.slice(0, 1);

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

@@ -16,6 +16,7 @@
 
 	const { positions, moveToJointPositions, lastError }: Props = $props()
 
+	// svelte-ignore state_referenced_locally
 	let desiredPositions = $state([...positions])
 	let useRadians = $state(false)
 

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

@@ -18,6 +18,7 @@
 
 	const { endPosition, moveToPosition, lastError }: Props = $props()
 
+	// svelte-ignore state_referenced_locally
 	let desiredPosition = $state({ ...endPosition })
 	let useRadians = $state(false)
 

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/navigation/obstacles/scene.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { T, useThrelte } from '@threlte/core'
 	import { interactivity } from '@threlte/extras'
+	import { fromStore } from 'svelte/store'
 	import { Camera, type Intersection, Plane, Vector3 } from 'three'
 
 	import {
@@ -16,7 +17,8 @@
 
 	const { view, children }: Props = $props()
 
-	const { map } = useMapLibre()
+	const context = useMapLibre()
+	const map = fromStore(context.map)
 	const { scene, camera, renderer } = $state(useThrelte())
 
 	camera.set(new Camera())
@@ -24,7 +26,7 @@
 	const { pointer, compute } = useMapLibreThreeRaycast(camera)
 
 	interactivity({
-		target: map.getCanvas(),
+		target: map.current.getCanvas(),
 		filter: (hits: Intersection[]) => {
 			// Only return the first hit
 			return hits.slice(0, 1)

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/package.json

@@ -1,117 +1,117 @@
 {
-	"name": "@viamrobotics/test-widgets",
-	"version": "0.0.1",
-	"license": "Apache-2.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && pnpm prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write . && eslint . --fix",
-		"test:unit": "vitest",
-		"test": "pnpm test:unit -- --run",
-		"test:e2e": "playwright test",
-		"release": "changeset publish"
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/viamrobotics/test-widgets.git"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@changesets/cli": "^2.30.0",
-		"@eslint/compat": "^2.0.3",
-		"@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",
-		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.55.0",
-		"@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",
-		"@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",
-		"@types/lodash-es": "^4.17.12",
-		"@types/node": "^25",
-		"@types/three": "^0.183.1",
-		"@viamrobotics/motion-tools": "^1.16.0",
-		"@viamrobotics/prime-core": "^0.1.16",
-		"@viamrobotics/prime-editor": "^0.0.2",
-		"@viamrobotics/sdk": "^0.68.1",
-		"@viamrobotics/svelte-sdk": "^1.1.5",
-		"@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",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-perfectionist": "^5.8.0",
-		"eslint-plugin-svelte": "^3.16.0",
-		"eslint-plugin-unicorn": "^64.0.0",
-		"globals": "^17.4.0",
-		"lodash-es": "^4.18.1",
-		"maplibre-gl": "^5.21.1",
-		"mock-match-media": "^1.0.3",
-		"playwright": "^1.59.1",
-		"prettier": "^3.8.1",
-		"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-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",
-		"type-fest": "^5.5.0",
-		"typescript": "^6.0.2",
-		"typescript-eslint": "^8.58.0",
-		"vite": "^8.0.3",
-		"vite-plugin-devtools-json": "^1.0.0",
-		"vite-plugin-glsl": "^1.5.6",
-		"vitest": "^4.1.2",
-		"vitest-browser-svelte": "^2.1.0"
-	},
-	"packageManager": "pnpm@10.33.0",
-	"engines": {
-		"node": ">=22.12.0"
-	}
-}
+  "name": "@viamrobotics/test-widgets",
+  "version": "0.1.2",
+  "license": "Apache-2.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/viamrobotics/test-widgets.git"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.30.0",
+    "@eslint/compat": "^2.0.3",
+    "@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",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.55.0",
+    "@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",
+    "@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",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^25",
+    "@types/three": "^0.183.1",
+    "@viamrobotics/motion-tools": "^1.16.0",
+    "@viamrobotics/prime-core": "^0.1.16",
+    "@viamrobotics/prime-editor": "^0.0.2",
+    "@viamrobotics/sdk": "^0.68.1",
+    "@viamrobotics/svelte-sdk": "^1.1.5",
+    "@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",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-perfectionist": "^5.8.0",
+    "eslint-plugin-svelte": "^3.16.0",
+    "eslint-plugin-unicorn": "^64.0.0",
+    "globals": "^17.4.0",
+    "lodash-es": "^4.18.1",
+    "maplibre-gl": "^5.21.1",
+    "mock-match-media": "^1.0.3",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.1",
+    "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-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",
+    "type-fest": "^5.5.0",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.3",
+    "vite-plugin-devtools-json": "^1.0.0",
+    "vite-plugin-glsl": "^1.5.6",
+    "vitest": "^4.1.2",
+    "vitest-browser-svelte": "^2.1.0"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write . && eslint . --fix",
+    "test:unit": "vitest",
+    "test": "pnpm test:unit -- --run",
+    "test:e2e": "playwright test",
+    "release": "changeset publish"
+  }
+}

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