@viamrobotics/test-widgets 0.7.0 → 0.9.0

package/dist/components/widgets/movement-sensor/get-compass-heading-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import CompassHeading from './compass-heading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getCompassHeading', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetCompassHeading"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<CompassHeading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/get-compass-heading-widget.svelte.d.ts

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

package/dist/components/widgets/movement-sensor/get-orientation-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Orientation from './orientation.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getOrientation', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetOrientation"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Orientation data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/get-orientation-widget.svelte.d.ts

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

package/dist/components/widgets/movement-sensor/get-position-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { MovementSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		MovementSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getPosition', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetPosition"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Position data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/movement-sensor/get-position-widget.svelte.d.ts

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

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

@@ -2,10 +2,9 @@
 	import type { GeoGeometry } from '@viamrobotics/sdk'
 
 	import { T } from '@threlte/core'
-	import { CapsuleGeometry } from '@viamrobotics/motion-tools/lib'
 	import { type BufferGeometry, MathUtils } from 'three'
 
-	import { AxesHelper } from '../../../three'
+	import { AxesHelper, CapsuleGeometry } from '../../../three'
 
 	import { getColor } from './color'
 

package/dist/components/widgets/power-sensor/get-current-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PowerSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import CurrentReading from './current-reading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		PowerSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getCurrent', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetCurrent"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<CurrentReading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/power-sensor/get-current-widget.svelte.d.ts

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

package/dist/components/widgets/power-sensor/get-power-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PowerSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import PowerReading from './power-reading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		PowerSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getPower', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetPower"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<PowerReading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/power-sensor/get-power-widget.svelte.d.ts

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

package/dist/components/widgets/power-sensor/get-voltage-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { PowerSensorClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import VoltageReading from './voltage-reading.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		PowerSensorClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getVoltage', { refetchInterval: 500 })
+</script>
+
+<ApiSection
+	title="GetVoltage"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<VoltageReading data={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/power-sensor/get-voltage-widget.svelte.d.ts

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

package/dist/components/widgets/servo/is-moving-widget.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ServoClient } from '@viamrobotics/sdk'
+
+	import IsMoving from '../../is-moving.svelte'
+	import { ResourceTriplets } from '../../../resource-triplet'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+</script>
+
+<IsMoving
+	client={ServoClient}
+	api={ResourceTriplets.Servo}
+	{partID}
+	{resourceName}
+/>

package/dist/components/widgets/servo/is-moving-widget.svelte.d.ts

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

package/dist/components/widgets/slam/get-position-widget.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { SlamClient } from '@viamrobotics/sdk'
+	import { createResourceClient, createResourceQuery } from '@viamrobotics/svelte-sdk'
+
+	import ApiSection from '../../api-section.svelte'
+	import Query from '../../query.svelte'
+
+	import Position from './position.svelte'
+
+	interface Props {
+		partID: string
+		resourceName: string
+	}
+
+	const { partID, resourceName }: Props = $props()
+
+	const client = createResourceClient(
+		SlamClient,
+		() => partID,
+		() => resourceName
+	)
+
+	const query = createResourceQuery(client, 'getPosition', { refetchInterval: 1000 })
+</script>
+
+<ApiSection
+	title="GetPosition"
+	class="grow"
+>
+	<Query
+		{query}
+		contentCx="h-6"
+	>
+		{#if query.data !== undefined}
+			<Position position={query.data} />
+		{/if}
+	</Query>
+</ApiSection>

package/dist/components/widgets/slam/get-position-widget.svelte.d.ts

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

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

@@ -147,16 +147,15 @@
 						</Select>
 					</Label>
 				</div>
-				<Label
-					cx="w-fit"
-					position="top"
-				>
-					Is remote?
-					<Switch
-						slot="input"
-						bind:on={isRemote}
-					/>
-				</Label>
+				<div class="w-fit">
+					<Label position="top">
+						Is remote?
+						<Switch
+							slot="input"
+							bind:on={isRemote}
+						/>
+					</Label>
+				</div>
 			</div>
 
 			<h6 class="text-subtle-1 font-semibold">Detections/Classifications</h6>

package/dist/index.d.ts

@@ -3,5 +3,10 @@ export { apiDocsHref } from './api-docs-href';
 export { clientForResource } from './client-map';
 export * from './components';
 export { getResourceAPI } from './get-resource-api';
+export { isKnownResource, 
+/** @deprecated use `isKnownResource` instead. Will be deleted in the next release  */
+isKnownResource as hasWidget, } from './is-known-resource';
 export { providePip, usePip } from './pip/context.svelte';
-export { hasWidget, showResourceWidget, widgetForResource } from './resource';
+export { ResourceTriplets } from './resource-triplet';
+export type { ResourceAPIWidget, ResourceWidget, ResourceWidgetProps, } from './resource-widget-types';
+export { showResourceWidget } from './show-resource-widget';

package/dist/index.js

@@ -3,5 +3,10 @@ export { apiDocsHref } from './api-docs-href';
 export { clientForResource } from './client-map';
 export * from './components';
 export { getResourceAPI } from './get-resource-api';
+export { isKnownResource, 
+// TODO: Delete `hasWidget`
+/** @deprecated use `isKnownResource` instead. Will be deleted in the next release  */
+isKnownResource as hasWidget, } from './is-known-resource';
 export { providePip, usePip } from './pip/context.svelte';
-export { hasWidget, showResourceWidget, widgetForResource } from './resource';
+export { ResourceTriplets } from './resource-triplet';
+export { showResourceWidget } from './show-resource-widget';

package/dist/is-known-resource.d.ts

@@ -0,0 +1,3 @@
+import type { ResourceName } from '@viamrobotics/sdk';
+/** Whether a resource's API is a recognized Viam resource triplet. */
+export declare const isKnownResource: (resource: ResourceName) => boolean;

package/dist/is-known-resource.js

@@ -0,0 +1,5 @@
+import { getResourceAPI } from "./get-resource-api.js";
+import { ResourceTriplets } from "./resource-triplet.js";
+const knownResources = new Set(Object.values(ResourceTriplets));
+/** Whether a resource's API is a recognized Viam resource triplet. */
+export const isKnownResource = (resource) => knownResources.has(getResourceAPI(resource));

package/dist/pip/context.svelte.d.ts

@@ -2,6 +2,8 @@ interface PipContext {
     /** Called by PictureInPictureButton to start or stop PiP. */
     toggle(resourceName: string): Promise<void>;
     setRate(rate: 'live' | number | false): void;
+    /** Register the media stream from the main camera view when its card is open. */
+    setStream(resourceName: string, stream: MediaStream | null): void;
     error: Error | undefined;
     /** Whether the PictureInPicture is active */
     readyState: 'inactive' | 'loading' | 'active';

package/dist/pip/context.svelte.js

@@ -14,12 +14,21 @@ export function providePip(partID) {
     const canvasCtx = canvas.getContext('2d');
     const canvasStream = canvas.captureStream();
     const img = document.createElement('img');
+    const externalStreams = new Map();
+    let externalStreamVersion = $state(0);
     let error = $state();
     let readyState = $state('inactive');
     let rate = $state('live');
     let activeName = $state();
-    const cameraClient = $derived(activeName ? createResourceClient(CameraClient, partID, () => activeName ?? '') : undefined);
-    const streamClient = $derived(activeName ? createStreamClient(partID, () => activeName ?? '') : undefined);
+    const externalStream = $derived.by(() => {
+        void externalStreamVersion;
+        return activeName ? externalStreams.get(activeName) : undefined;
+    });
+    const needsOwnedStream = $derived(activeName !== undefined && !externalStream);
+    const cameraClient = $derived(needsOwnedStream && activeName
+        ? createResourceClient(CameraClient, partID, () => activeName ?? '')
+        : undefined);
+    const streamClient = $derived(needsOwnedStream && activeName ? createStreamClient(partID, () => activeName ?? '') : undefined);
     const imageQuery = $derived(cameraClient?.current
         ? createResourceQuery(cameraClient, 'getImages', () => ({
             enabled: rate !== 'live',
@@ -27,22 +36,39 @@ export function providePip(partID) {
             refetchIntervalInBackground: activeName === cameraClient?.current?.name,
         }))
         : undefined);
-    const mediaStream = $derived((rate === 'live' ? streamClient?.mediaStream : canvasStream) ?? null);
+    const ownedMediaStream = $derived(needsOwnedStream ? ((rate === 'live' ? streamClient?.mediaStream : canvasStream) ?? null) : null);
+    const playbackStream = $derived(externalStream ?? ownedMediaStream);
+    const setStream = (resourceName, stream) => {
+        if (stream) {
+            externalStreams.set(resourceName, stream);
+        }
+        else {
+            externalStreams.delete(resourceName);
+        }
+        externalStreamVersion++;
+    };
     $effect(() => {
         document.body.append(video);
+        const handleLeave = () => {
+            readyState = 'inactive';
+            activeName = undefined;
+            error = undefined;
+        };
+        video.addEventListener('leavepictureinpicture', handleLeave);
         return () => {
+            video.removeEventListener('leavepictureinpicture', handleLeave);
             video.remove();
         };
     });
     $effect(() => {
-        video.srcObject = mediaStream;
+        video.srcObject = playbackStream;
         return () => {
             video.srcObject = null;
         };
     });
     $effect(() => {
         const currentRate = rate;
-        if (currentRate === 'live')
+        if (!needsOwnedStream || currentRate === 'live')
             return;
         const image = imageQuery?.data?.images[0];
         if (!image)
@@ -64,12 +90,11 @@ export function providePip(partID) {
             img.removeEventListener('load', drawImage);
         };
     });
-    const toggle = async () => {
-        if (activeName === undefined &&
-            readyState === 'active' &&
-            document.pictureInPictureElement === video) {
+    const toggle = async (resourceName) => {
+        if (activeName === resourceName && document.pictureInPictureElement === video) {
             try {
                 await document.exitPictureInPicture();
+                activeName = undefined;
                 readyState = 'inactive';
                 error = undefined;
             }
@@ -78,28 +103,31 @@ export function providePip(partID) {
             }
             return;
         }
+        activeName = resourceName;
         readyState = 'loading';
-        // Wait for the new stream's metadata to load before requesting PiP,
-        // otherwise the browser throws InvalidStateError.
-        if (video.readyState < 1 /* HAVE_METADATA */) {
-            await new Promise((resolve) => {
-                video.addEventListener('loadedmetadata', () => resolve(), { once: true });
-            });
-        }
         try {
+            const stream = ownedMediaStream;
+            video.srcObject = stream;
+            // Wait for the stream's metadata to load before requesting PiP,
+            // otherwise the browser throws InvalidStateError.
+            if (video.readyState < 1 /* HAVE_METADATA */) {
+                await new Promise((resolve) => {
+                    video.addEventListener('loadedmetadata', () => resolve(), { once: true });
+                });
+            }
             await video.requestPictureInPicture();
             readyState = 'active';
             error = undefined;
         }
         catch (nextError) {
+            readyState = 'inactive';
+            activeName = undefined;
             error = nextError;
         }
     };
     const context = {
-        async toggle(resourceName) {
-            activeName = activeName === resourceName ? undefined : resourceName;
-            await toggle();
-        },
+        toggle,
+        setStream,
         setRate(newRate) {
             rate = newRate;
         },

package/dist/registry.d.ts

@@ -0,0 +1,28 @@
+import type { ResourceName } from '@viamrobotics/sdk';
+import type { ResourceAPIWidget, ResourceWidget } from './resource-widget-types.ts';
+import { type ResourceTriplet } from './resource-triplet.ts';
+/**
+ * Returns a resource's individual API widgets. Each entry carries a stable `id`, a
+ * display `label`, and the `widgets` to render with `{ partID, resourceName }`.
+ *
+ * Returns `[]` for a resource with a card but no standalone API widgets, and for
+ * unrecognized resources.
+ *
+ * @example
+ * apiWidgetsForResource(gripperResourceName)
+ * // [{ id: 'open-grab', label: 'Open / Grab', widgets: [GripperOpenWidget, GripperGrabWidget] }, ...]
+ */
+export declare const apiWidgetsForResource: (resource: ResourceName) => ResourceAPIWidget[];
+/**
+ * Returns every resource triplet that has a test card, mapped to its API widgets.
+ * Use this to enumerate the full catalog, e.g. a menu spanning every resource type;
+ * for a single resource, prefer `apiWidgetsForResource`.
+ *
+ * @example
+ * availableAPIWidgets()[ResourceTriplets.Gripper]
+ * // [{ id: 'open-grab', label: 'Open / Grab', widgets: [GripperOpenWidget, GripperGrabWidget] }, ...]
+ */
+export declare const availableAPIWidgets: () => Partial<Record<ResourceTriplet, ResourceAPIWidget[]>>;
+/** Returns the full composite test card for a resource, or `undefined` if none exists. */
+export declare const widgetForResource: (resource: ResourceName) => ResourceWidget | undefined;
+export type { ResourceAPIWidget, ResourceWidget, ResourceWidgetProps, } from './resource-widget-types.ts';