@viamrobotics/motion-tools 0.14.2 → 0.14.3

package/dist/components/App.svelte

@@ -4,7 +4,6 @@
 	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
 	import type { Struct } from '@viamrobotics/sdk'
-
 	import Scene from './Scene.svelte'
 	import TreeContainer from './Tree/TreeContainer.svelte'
 	import Details from './Details.svelte'
@@ -16,7 +15,7 @@
 	import { domPortal } from '../portal'
 	import { provideSettings } from '../hooks/useSettings.svelte'
 	import FileDrop from './FileDrop.svelte'
-	import WeblabProvider from './weblab/WeblabProvider.svelte'
+	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
 	import { providePartConfig } from '../hooks/usePartConfig.svelte'
 	import { useViamClient } from '@viamrobotics/svelte-sdk'
 	import LiveUpdatesBanner from './LiveUpdatesBanner.svelte'
@@ -54,6 +53,7 @@
 
 	createPartIDContext(() => partID)
 
+	provideWeblabs()
 	provideToast()
 
 	let root = $state.raw<HTMLElement>()
@@ -83,41 +83,39 @@
 	<SvelteQueryDevtools initialIsOpen />
 {/if}
 
-<WeblabProvider>
-	<div
-		class="relative h-full w-full overflow-hidden"
-		bind:this={root}
-	>
-		<Canvas renderMode="always">
-			<World>
-				<SceneProviders>
-					{#snippet children({ focus })}
-						<Scene>
-							{@render appChildren?.()}
-						</Scene>
-
-						<XR {@attach domPortal(root)} />
-
-						<Dashboard {@attach domPortal(root)} />
-						<Details {@attach domPortal(root)} />
-						{#if environment.current.isStandalone}
-							<LiveUpdatesBanner {@attach domPortal(root)} />
-						{/if}
-
-						{#if !focus}
-							<TreeContainer {@attach domPortal(root)} />
-						{/if}
-
-						{#if !focus && settings.current.enableArmPositionsWidget}
-							<ArmPositions {@attach domPortal(root)} />
-						{/if}
-
-						<FileDrop {@attach domPortal(root)} />
-					{/snippet}
-				</SceneProviders>
-			</World>
-		</Canvas>
-
-		<ToastContainer />
-	</div>
-</WeblabProvider>
+<div
+	class="relative h-full w-full overflow-hidden"
+	bind:this={root}
+>
+	<Canvas renderMode="always">
+		<World>
+			<SceneProviders>
+				{#snippet children({ focus })}
+					<Scene>
+						{@render appChildren?.()}
+					</Scene>
+
+					<XR {@attach domPortal(root)} />
+
+					<Dashboard {@attach domPortal(root)} />
+					<Details {@attach domPortal(root)} />
+					{#if environment.current.isStandalone}
+						<LiveUpdatesBanner {@attach domPortal(root)} />
+					{/if}
+
+					{#if !focus}
+						<TreeContainer {@attach domPortal(root)} />
+					{/if}
+
+					{#if !focus && settings.current.enableArmPositionsWidget}
+						<ArmPositions {@attach domPortal(root)} />
+					{/if}
+
+					<FileDrop {@attach domPortal(root)} />
+				{/snippet}
+			</SceneProviders>
+		</World>
+	</Canvas>
+
+	<ToastContainer />
+</div>

package/dist/components/Details.svelte

@@ -26,6 +26,7 @@
 	import { useFrames } from '../hooks/useFrames.svelte'
 	import { usePartConfig } from '../hooks/usePartConfig.svelte'
 	import { DetailConfigUpdater } from '../Detail.svelte'
+	import { useWeblabs } from '../hooks/useWeblabs.svelte'
 
 	const { ...rest } = $props()
 
@@ -36,6 +37,7 @@
 	const partConfig = usePartConfig()
 	const selectedObject = useSelectedObject()
 	const selectedObject3d = useSelectedObject3d()
+	const weblab = useWeblabs()
 
 	const object = $derived(focusedObject.current ?? selectedObject.current)
 	const object3d = $derived(focusedObject3d.current ?? selectedObject3d.current)
@@ -99,6 +101,48 @@
 			stop()
 		}
 	})
+
+	const getCopyClipboardText = () => {
+		if (weblab.isActive('MOTION_TOOLS_EDIT_FRAME')) {
+			return JSON.stringify(
+				{
+					worldPosition: worldPosition,
+					worldOrientation: worldOrientation,
+					localPosition: {
+						x: localPose?.x,
+						y: localPose?.y,
+						z: localPose?.z,
+					},
+					localOrientation: {
+						x: localPose?.oX,
+						y: localPose?.oY,
+						z: localPose?.oZ,
+						th: localPose?.theta,
+					},
+					geometry: {
+						type: geometryType,
+						value: object?.geometry?.geometryType.value,
+					},
+					parentFrame: referenceFrame,
+				},
+				null,
+				2
+			)
+		} else {
+			return JSON.stringify(
+				{
+					worldPosition: worldPosition,
+					worldOrientation: worldOrientation,
+					geometry: {
+						type: geometryType,
+						value: object?.geometry?.geometryType.value,
+					},
+				},
+				null,
+				2
+			)
+		}
+	}
 </script>
 
 {#snippet ImmutableField({
@@ -199,7 +243,7 @@
 
 			<button
 				onclick={async () => {
-					navigator.clipboard.writeText(JSON.stringify($state.snapshot(object)))
+					navigator.clipboard.writeText(getCopyClipboardText())
 					copied = true
 					setTimeout(() => (copied = false), 1000)
 				}}
@@ -430,7 +474,7 @@
 							<div class="flex items-center gap-2">
 								{@render GeometryAttribute({
 									label: 'r',
-									ariaLabel: 'sphere dimensions radius value input',
+									ariaLabel: 'sphere dimensions radius value',
 									value: radiusMm ? radiusMm.toFixed(2) : '-',
 									onInput: (value) =>
 										detailConfigUpdater.updateGeometry({ type: 'sphere', r: parseFloat(value) }),
@@ -523,7 +567,7 @@
 				<Button
 					variant="danger"
 					class="mt-2 w-full"
-					onclick={() => detailConfigUpdater.deleteFrame()}>Delete Frame</Button
+					onclick={() => detailConfigUpdater.deleteFrame()}>Delete frame</Button
 				>
 			{/if}
 		</WeblabActive>

package/dist/components/LiveUpdatesBanner.svelte

@@ -15,7 +15,7 @@
 			class="flex flex-col items-start rounded border-l-4 border-yellow-600 bg-yellow-50 px-4 py-2"
 		>
 			<p>
-				<strong>Live Updates Paused</strong>
+				<strong>Live updates paused</strong>
 			</p>
 
 			<p class="text-sm">

package/dist/components/Tree/AddFrames.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <Drawer name="Add frames">
-	<div class="flex h-64 w-60 flex-col gap-2 overflow-auto p-3">
+	<div class="flex max-h-64 flex-col gap-2 overflow-auto p-3">
 		{#if framelessComponents.current.length > 0}
 			<ul class="space-y-1">
 				{#each framelessComponents.current as component (component)}

package/dist/components/Tree/Drawer.svelte

@@ -7,9 +7,10 @@
 		name: string
 		defaultOpen?: boolean
 		children: Snippet
+		titleAlert?: Snippet
 	}
 
-	let { name, children, defaultOpen = false }: Props = $props()
+	let { name, children, titleAlert, defaultOpen = false }: Props = $props()
 
 	const expanded = $derived(new PersistedState(`${name}-expanded`, defaultOpen))
 </script>
@@ -24,9 +25,10 @@
 			label="unfold more icon"
 			variant="ghost"
 			cx="size-6"
-			on:click={() => (expanded.current = !expanded.current)}
+			onclick={() => (expanded.current = !expanded.current)}
 		/>
 		{name}
+		{@render titleAlert?.()}
 	</h3>
 </button>
 

package/dist/components/Tree/Drawer.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     name: string;
     defaultOpen?: boolean;
     children: Snippet;
+    titleAlert?: Snippet;
 }
 declare const Drawer: import("svelte").Component<Props, {}, "">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/Tree/Logs.svelte

@@ -1,14 +1,56 @@
 <script lang="ts">
+	import { useFrames } from '../../hooks/useFrames.svelte'
+	import { useGeometries } from '../../hooks/useGeometries.svelte'
 	import { useLogs } from '../../hooks/useLogs.svelte'
+	import { usePointClouds } from '../../hooks/usePointclouds.svelte'
 	import Drawer from './Drawer.svelte'
 
+	const frames = useFrames()
+	const geometries = useGeometries()
+	const pointclouds = usePointClouds()
 	const logs = useLogs()
-	const truncated = $derived(logs.current.slice(0, 100).reverse())
+
+	$effect(() => {
+		if (frames.error) {
+			const message = `Frames: ${frames.error.message}`
+			logs.add(message, 'error')
+		}
+	})
+
+	$effect(() => {
+		if (geometries.errors.length > 0) {
+			for (const error of geometries.errors) {
+				logs.add(`Geometries: ${error.message}`, 'error')
+			}
+		}
+	})
+
+	$effect(() => {
+		if (pointclouds.errors.length > 0) {
+			for (const error of pointclouds.errors) {
+				logs.add(`Pointclouds: ${error.message}`, 'error')
+			}
+		}
+	})
 </script>
 
 <Drawer name="Logs">
-	<div class="flex h-64 w-60 flex-col gap-2 overflow-auto p-3">
-		{#each truncated as log (log.uuid)}
+	{#snippet titleAlert()}
+		{#if logs.warnings.length > 0}
+			<span class="mr-1 rounded bg-yellow-700 px-1 py-0.5 text-xs text-white">
+				{logs.warnings.length}
+			</span>
+		{/if}
+
+		{#if logs.errors.length > 0}
+			<span class="mr-1 rounded bg-red-700 px-1 py-0.5 text-xs text-white">
+				{logs.errors.length}
+			</span>
+		{/if}
+	{/snippet}
+
+	<div class="flex h-64 flex-col gap-2 overflow-auto p-3">
+		{#each logs.current as log (log.uuid)}
 			<div>
 				<div class="flex flex-wrap items-center gap-1.5">
 					<div
@@ -23,7 +65,14 @@
 					></div>
 					<div class="text-subtle-2">{log.timestamp}</div>
 				</div>
-				<div>{log.message}</div>
+				<div>
+					{#if log.count > 1}
+						<span class="mr-1 rounded bg-green-700 px-1 py-0.5 text-xs text-white">
+							{log.count}
+						</span>
+					{/if}
+					{log.message}
+				</div>
 			</div>
 		{:else}
 			No logs

package/dist/components/Tree/TreeContainer.svelte

@@ -13,10 +13,12 @@
 	import Widgets from './Widgets.svelte'
 	import AddFrames from './AddFrames.svelte'
 	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
 	const { ...rest } = $props()
 
 	provideTreeExpandedContext()
 
+	const partID = usePartID()
 	const selected = useSelected()
 	const objects = useObjects()
 	const draggable = useDraggable('treeview')
@@ -40,7 +42,7 @@
 </script>
 
 <div
-	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 overflow-y-auto border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-1000 m-2 w-60 overflow-y-auto border text-xs"
 	style:transform="translate({draggable.current.x}px, {draggable.current.y}px)"
 	{...rest}
 >
@@ -56,9 +58,10 @@
 		/>
 	{/key}
 
-	{#if environment.current.isStandalone}
+	{#if environment.current.isStandalone && partID.current}
 		<AddFrames />
 	{/if}
+
 	<Logs />
 	<Settings />
 	<Widgets />

package/dist/components/weblab/WeblabActive.svelte

@@ -9,13 +9,13 @@
 	}
 	let { experiment, children, renderIfActive = true }: Props = $props()
 
-	const { weblab } = useWeblabs()
+	const weblabs = useWeblabs()
 
 	$effect.pre(() => {
-		weblab.load([experiment])
+		weblabs.load([experiment])
 	})
 </script>
 
-{#if weblab.isActive(experiment) === renderIfActive}
+{#if weblabs.isActive(experiment) === renderIfActive}
 	{@render children()}
 {/if}

package/dist/hooks/useFrames.svelte.js

@@ -1,13 +1,13 @@
 import { getContext, setContext, untrack } from 'svelte';
 import { useRobotClient, createRobotQuery, useMachineStatus, useResourceNames, } from '@viamrobotics/svelte-sdk';
 import { WorldObject } from '../WorldObject.svelte';
-import { observe } from '@threlte/core';
 import { useLogs } from './useLogs.svelte';
 import { resourceColors } from '../color';
 import { usePartConfig } from './usePartConfig.svelte';
 import { Color } from 'three';
 import { useEnvironment } from './useEnvironment.svelte';
 import { createPoseFromFrame } from '../transform';
+import { observe } from '@threlte/core';
 const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
     const resourceNames = useResourceNames(partID);
@@ -22,7 +22,7 @@ export const provideFrames = (partID) => {
         untrack(() => query.current).refetch();
         logs.add('Fetching frames...');
     });
-    observe.pre(() => [partConfig.isDirty], () => {
+    $effect.pre(() => {
         if (partConfig.isDirty) {
             environment.current.viewerMode = 'edit';
         }

package/dist/hooks/useGeometries.svelte.d.ts

@@ -1,6 +1,7 @@
 import { WorldObject } from '../WorldObject.svelte';
 interface Context {
     current: WorldObject[];
+    errors: Error[];
 }
 export declare const provideGeometries: (partID: () => string) => void;
 export declare const useGeometries: () => Context;

package/dist/hooks/useGeometries.svelte.js

@@ -1,4 +1,4 @@
-import { ArmClient, CameraClient, Geometry, GripperClient } from '@viamrobotics/sdk';
+import { ArmClient, CameraClient, GantryClient, Geometry, GripperClient } from '@viamrobotics/sdk';
 import { createQueries, queryOptions } from '@tanstack/svelte-query';
 import { createResourceClient, useResourceNames } from '@viamrobotics/svelte-sdk';
 import { setContext, getContext } from 'svelte';
@@ -9,18 +9,24 @@ import { usePersistentUUIDs } from './usePersistentUUIDs.svelte';
 import { useLogs } from './useLogs.svelte';
 import { resourceColors } from '../color';
 import { Color } from 'three';
+import { useFrames } from './useFrames.svelte';
 const key = Symbol('geometries-context');
 export const provideGeometries = (partID) => {
+    const frames = useFrames();
     const resourceNames = useResourceNames(partID);
     const arms = useResourceNames(partID, 'arm');
     const cameras = useResourceNames(partID, 'camera');
     const grippers = useResourceNames(partID, 'gripper');
+    const gantries = useResourceNames(partID, 'gantry');
     const logs = useLogs();
     const { refreshRates } = useMachineSettings();
     const armClients = $derived(arms.current.map((arm) => createResourceClient(ArmClient, partID, () => arm.name)));
     const gripperClients = $derived(grippers.current.map((gripper) => createResourceClient(GripperClient, partID, () => gripper.name)));
     const cameraClients = $derived(cameras.current.map((camera) => createResourceClient(CameraClient, partID, () => camera.name)));
-    const clients = $derived([...armClients, ...gripperClients, ...cameraClients]);
+    const gantryClients = $derived(gantries.current.map((gantry) => createResourceClient(GantryClient, partID, () => gantry.name)));
+    const clients = $derived([...armClients, ...gripperClients, ...cameraClients, ...gantryClients].filter((client) => {
+        return frames.current.some((frame) => frame.name === client.current?.name);
+    }));
     const options = $derived.by(() => {
         const interval = refreshRates.get(RefreshRates.poses);
         const results = [];
@@ -44,6 +50,7 @@ export const provideGeometries = (partID) => {
     });
     const { updateUUIDs } = usePersistentUUIDs();
     const queries = fromStore(createQueries({ queries: toStore(() => options) }));
+    const errors = $derived(queries.current.map((query) => query.error).filter((error) => error !== null));
     const geometries = $derived.by(() => {
         const results = [];
         for (const query of queries.current) {
@@ -66,6 +73,9 @@ export const provideGeometries = (partID) => {
         get current() {
             return geometries;
         },
+        get errors() {
+            return errors;
+        },
     });
 };
 export const useGeometries = () => {

package/dist/hooks/useLogs.svelte.d.ts

@@ -2,11 +2,14 @@ type Level = 'info' | 'warn' | 'error';
 interface Log {
     uuid: string;
     message: string;
+    count: number;
     level: Level;
     timestamp: string;
 }
 interface Context {
     current: Log[];
+    errors: Log[];
+    warnings: Log[];
     add(message: string, level?: Level): void;
 }
 export declare const provideLogs: () => void;

package/dist/hooks/useLogs.svelte.js

@@ -1,8 +1,10 @@
-import { getContext, setContext } from 'svelte';
+import { getContext, setContext, untrack } from 'svelte';
 import { MathUtils } from 'three';
 const key = Symbol('logs-context');
 export const provideLogs = () => {
     const logs = $state([]);
+    const warnings = $state([]);
+    const errors = $state([]);
     const intl = new Intl.DateTimeFormat('en-US', {
         dateStyle: 'short',
         timeStyle: 'short',
@@ -11,16 +13,45 @@ export const provideLogs = () => {
         get current() {
             return logs;
         },
+        get errors() {
+            return errors;
+        },
+        get warnings() {
+            return warnings;
+        },
         add(message, level = 'info') {
-            logs.push({
-                message,
-                level,
-                uuid: MathUtils.generateUUID(),
-                timestamp: intl.format(Date.now()),
+            untrack(() => {
+                const timestamp = intl.format(Date.now());
+                const match = logs.find((log) => log.message === message && log.level === level && log.timestamp === timestamp);
+                if (match) {
+                    match.count += 1;
+                }
+                else {
+                    const log = {
+                        timestamp,
+                        message,
+                        count: 1,
+                        level,
+                        uuid: MathUtils.generateUUID(),
+                    };
+                    logs.unshift(log);
+                    if (level === 'error') {
+                        errors.unshift(log);
+                    }
+                    else if (level === 'warn') {
+                        warnings.unshift(log);
+                    }
+                }
+                if (logs.length > 200) {
+                    const log = logs.pop();
+                    if (log && level === 'error') {
+                        errors.splice(errors.indexOf(log), 1);
+                    }
+                    else if (log && level === 'warn') {
+                        warnings.splice(errors.indexOf(log), 1);
+                    }
+                }
             });
-            if (logs.length > 1000) {
-                logs.shift();
-            }
         },
     });
 };

package/dist/hooks/usePartConfig.svelte.js

@@ -257,32 +257,29 @@ export class StandalonePartConfig {
                 const fragmentRequests = [];
                 if (configJson.fragments) {
                     for (const fragmentId of configJson.fragments) {
-                        fragmentRequests.push(standalonePartConfigProps.viamClient()?.appClient.getFragment(fragmentId));
+                        //TODO: right now the json could be just a list of strings or an object with an id prop
+                        const fragId = typeof fragmentId === 'string' ? fragmentId : fragmentId.id;
+                        fragmentRequests.push(standalonePartConfigProps.viamClient()?.appClient.getFragment(fragId));
                     }
-                    try {
-                        const fragementResponses = await Promise.all(fragmentRequests);
-                        for (const fragmentResponse of fragementResponses) {
-                            const fragmentId = fragmentResponse?.id;
-                            if (!fragmentId) {
-                                continue;
-                            }
-                            const components = fragmentResponse?.fragment?.fields['components'].kind;
-                            if (components?.case === 'listValue') {
-                                for (const component of components.value.values) {
-                                    if (component.kind.case === 'structValue') {
-                                        const componentName = component.kind.value.fields['name'].kind;
-                                        if (componentName.case === 'stringValue') {
-                                            componentNameToFragmentId[componentName.value] = fragmentId;
-                                        }
+                    const fragementResponses = await Promise.all(fragmentRequests);
+                    for (const fragmentResponse of fragementResponses) {
+                        const fragmentId = fragmentResponse?.id;
+                        if (!fragmentId) {
+                            continue;
+                        }
+                        const components = fragmentResponse?.fragment?.fields['components'].kind;
+                        if (components?.case === 'listValue') {
+                            for (const component of components.value.values) {
+                                if (component.kind.case === 'structValue') {
+                                    const componentName = component.kind.value.fields['name'].kind;
+                                    if (componentName.case === 'stringValue') {
+                                        componentNameToFragmentId[componentName.value] = fragmentId;
                                     }
                                 }
                             }
                         }
-                        this._componentNameToFragmentId = componentNameToFragmentId;
-                    }
-                    catch {
-                        /* Do nothing */
                     }
+                    this._componentNameToFragmentId = componentNameToFragmentId;
                 }
             };
             initLocalConfig();

package/dist/hooks/usePointclouds.svelte.d.ts

@@ -1,6 +1,7 @@
 import { WorldObject, type PointsGeometry } from '../WorldObject.svelte';
 interface Context {
     current: WorldObject<PointsGeometry>[];
+    errors: Error[];
 }
 export declare const providePointclouds: (partID: () => string) => void;
 export declare const usePointClouds: () => Context;

package/dist/hooks/usePointclouds.svelte.js

@@ -48,9 +48,11 @@ export const providePointclouds = (partID) => {
             const data = results
                 .flatMap((result) => result.data)
                 .filter((data) => data !== null && data !== undefined);
+            const errors = results.flatMap((result) => result.error).filter((error) => error !== null);
             updateUUIDs(data);
             return {
                 data,
+                errors,
             };
         },
     }));
@@ -58,6 +60,9 @@ export const providePointclouds = (partID) => {
         get current() {
             return queries.current.data;
         },
+        get errors() {
+            return queries.current.errors;
+        },
     });
 };
 export const usePointClouds = () => {

package/dist/hooks/useWeblabs.svelte.d.ts

@@ -1,12 +1,9 @@
+export declare const WEBLABS_CONTEXT_KEY: unique symbol;
 interface Context {
-    weblab: Weblab;
+    load: (experiments: string[]) => void;
+    isActive(experiment: string): boolean;
 }
+export declare const createWeblabs: () => Context;
 export declare const provideWeblabs: () => void;
 export declare const useWeblabs: () => Context;
-export declare class Weblab {
-    private activeExperiments;
-    constructor();
-    isActive(experiment: string): boolean;
-    load(experiments: string[]): void;
-}
 export {};

package/dist/hooks/useWeblabs.svelte.js

@@ -1,25 +1,50 @@
 import { getContext, setContext } from 'svelte';
-const key = Symbol('weblabs-context');
-export const provideWeblabs = () => {
-    const weblab = $state(new Weblab());
-    setContext(key, { weblab });
-};
-export const useWeblabs = () => {
-    return getContext(key);
-};
-export class Weblab {
-    activeExperiments;
-    constructor() {
-        this.activeExperiments = new Set();
+import { SvelteSet } from 'svelte/reactivity';
+export const WEBLABS_CONTEXT_KEY = Symbol('weblabs-context');
+const getCookie = (name) => {
+    const value = `; ${document.cookie}`;
+    const parts = value.split(`; ${name}=`);
+    if (parts.length === 2) {
+        return parts.pop()?.split(';').shift() || null;
     }
-    isActive(experiment) {
-        return this.activeExperiments.has(experiment);
+    return null;
+};
+const addCookie = (name, value, days, path = '/') => {
+    let expires = '';
+    if (days !== undefined) {
+        const date = new Date();
+        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); // days in milliseconds
+        expires = '; expires=' + date.toUTCString();
     }
-    load(experiments) {
+    document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}${expires}; path=${path}`;
+};
+const getCookieExperiments = () => {
+    return getCookie('weblab_experiments')?.split(',') ?? [];
+};
+export const createWeblabs = () => {
+    const activeExperiments = new SvelteSet();
+    const load = (experiments) => {
+        const cookieExperiments = getCookieExperiments();
         for (const experiment of experiments) {
-            if (document.cookie.includes(experiment)) {
-                this.activeExperiments.add(experiment);
+            if (cookieExperiments.includes(experiment)) {
+                activeExperiments.add(experiment);
             }
         }
+    };
+    return {
+        load,
+        isActive: (experiment) => {
+            return activeExperiments.has(experiment);
+        },
+    };
+};
+export const provideWeblabs = () => {
+    const urlExperiment = new URLSearchParams(window.location.search).get('experiment');
+    if (urlExperiment) {
+        addCookie('weblab_experiments', [...getCookieExperiments(), urlExperiment].join(','));
     }
-}
+    setContext(WEBLABS_CONTEXT_KEY, createWeblabs());
+};
+export const useWeblabs = () => {
+    return getContext(WEBLABS_CONTEXT_KEY);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -38,7 +38,7 @@
     "@typescript-eslint/parser": "8.42.0",
     "@viamrobotics/prime-core": "0.1.5",
     "@viamrobotics/sdk": "0.52.0",
-    "@viamrobotics/svelte-sdk": "0.6.1",
+    "@viamrobotics/svelte-sdk": "0.7.1",
     "@vitejs/plugin-basic-ssl": "2.1.0",
     "@zag-js/svelte": "1.22.1",
     "@zag-js/tree-view": "1.22.1",

package/dist/components/weblab/WeblabProvider.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { provideWeblabs } from '../../hooks/useWeblabs.svelte'
-
-	let { children } = $props()
-	provideWeblabs()
-</script>
-
-{@render children()}

package/dist/components/weblab/WeblabProvider.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const WeblabProvider: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type WeblabProvider = ReturnType<typeof WeblabProvider>;
-export default WeblabProvider;