@viamrobotics/motion-tools 0.13.0 → 0.14.0

package/dist/Detail.svelte.d.ts

@@ -11,11 +11,15 @@ type UpdateFrameCallback = {
         z?: number;
     }): void;
 };
+type RemoveFrameCallback = {
+    (componentName: string): void;
+};
 export declare class DetailConfigUpdater {
     private object;
     private referenceFrame;
     private updateFrame;
-    constructor(object: () => WorldObject<Geometries> | undefined, updateFrame: UpdateFrameCallback, referenceFrame: () => string);
+    private removeFrame;
+    constructor(object: () => WorldObject<Geometries> | undefined, updateFrame: UpdateFrameCallback, removeFrame: RemoveFrameCallback, referenceFrame: () => string);
     updateLocalPosition: ({ x, y, z }: {
         x?: number;
         y?: number;
@@ -36,6 +40,7 @@ export declare class DetailConfigUpdater {
         z?: number;
     }) => void;
     setFrameParent: (parentName: string) => void;
+    deleteFrame: () => void;
     setGeometryType: (type: "none" | "box" | "sphere" | "capsule") => void;
 }
 export {};

package/dist/Detail.svelte.js

@@ -2,10 +2,12 @@ export class DetailConfigUpdater {
     object;
     referenceFrame;
     updateFrame;
-    constructor(object, updateFrame, referenceFrame) {
+    removeFrame;
+    constructor(object, updateFrame, removeFrame, referenceFrame) {
         this.referenceFrame = referenceFrame;
         this.object = object;
         this.updateFrame = updateFrame;
+        this.removeFrame = removeFrame;
     }
     updateLocalPosition = ({ x, y, z }) => {
         const object = this.object();
@@ -95,6 +97,12 @@ export class DetailConfigUpdater {
             theta: object.localEditedPose.theta,
         });
     };
+    deleteFrame = () => {
+        const object = this.object();
+        if (!object)
+            return;
+        this.removeFrame(object.name ?? '');
+    };
     setGeometryType = (type) => {
         const object = this.object();
         if (!object)

package/dist/WorldObject.svelte.d.ts

@@ -1,5 +1,6 @@
-import type { Geometry, Pose, TransformWithUUID } from '@viamrobotics/sdk';
-import { BatchedMesh, Object3D, Vector3, type ColorRepresentation } from 'three';
+import type { Geometry, PlainMessage, Pose, Struct, TransformWithUUID } from '@viamrobotics/sdk';
+import { BatchedMesh, Color, Object3D, Vector3 } from 'three';
+import type { ValueOf } from 'type-fest';
 import type { OBB } from 'three/addons/math/OBB.js';
 export type PointsGeometry = {
     center: undefined;
@@ -16,9 +17,14 @@ export type LinesGeometry = {
     };
 };
 export type Geometries = Geometry | PointsGeometry | LinesGeometry;
+export declare const SupportedShapes: {
+    readonly points: "points";
+    readonly line: "line";
+    readonly arrow: "arrow";
+};
 export type Metadata = {
     colors?: Float32Array;
-    color?: ColorRepresentation;
+    color?: Color;
     opacity?: number;
     gltf?: {
         scene: Object3D;
@@ -26,22 +32,25 @@ export type Metadata = {
     points?: Vector3[];
     pointSize?: number;
     lineWidth?: number;
-    lineDotColor?: ColorRepresentation;
+    lineDotColor?: Color;
     batched?: {
         id: number;
         object: BatchedMesh;
     };
+    shape?: ValueOf<typeof SupportedShapes>;
     getBoundingBoxAt?: (box: OBB) => void;
 };
-export declare const determinePose: (object: WorldObject, pose: WorldObject["pose"] | undefined) => WorldObject["pose"];
+export declare const isMetadataKey: (key: string) => key is keyof Metadata;
 export declare class WorldObject<T extends Geometries = Geometries> {
     uuid: string;
     name: string;
     referenceFrame: string | undefined;
-    pose: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
+    pose: PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
     geometry?: T;
     metadata: Metadata;
-    localEditedPose: import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
+    localEditedPose: PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Pose>;
     constructor(name: string, pose?: Pose, parent?: string, geometry?: T, metadata?: Metadata);
 }
-export declare const fromTransform: (transform: TransformWithUUID) => WorldObject<import("@viamrobotics/sdk").PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Geometry>>;
+export declare const parseMetadata: (fields?: PlainMessage<Struct>["fields"]) => Metadata;
+export declare const fromTransform: (transform: TransformWithUUID) => WorldObject<PlainMessage<import("@viamrobotics/sdk/dist/gen/common/v1/common_pb").Geometry>>;
+export declare const determinePose: (object: WorldObject, pose: Pose | undefined) => Pose;

package/dist/WorldObject.svelte.js

@@ -1,17 +1,25 @@
-import { BatchedMesh, Color, MathUtils, Matrix4, Object3D, Quaternion, Vector3, } from 'three';
-import { createPose } from './transform';
-export const determinePose = (object, pose) => {
-    if (pose === undefined) {
-        return object.localEditedPose;
-    }
-    else {
-        const poseNetwork = poseToMatrix(object.pose);
-        const poseUsePose = poseToMatrix(pose);
-        const poseLocalEditedPose = poseToMatrix(object.localEditedPose);
-        const poseNetworkInverse = poseNetwork.invert();
-        const resultMatrix = poseUsePose.multiply(poseNetworkInverse).multiply(poseLocalEditedPose);
-        return matrixToPose(resultMatrix);
-    }
+import { BatchedMesh, Color, MathUtils, Object3D, Vector3 } from 'three';
+import { createPose, matrixToPose, poseToMatrix } from './transform';
+import { isColorRepresentation, isRGB, parseColor, parseOpacity, parseRGB } from './color';
+export const SupportedShapes = {
+    points: 'points',
+    line: 'line',
+    arrow: 'arrow',
+};
+const METADATA_KEYS = [
+    'colors',
+    'color',
+    'opacity',
+    'gltf',
+    'points',
+    'pointSize',
+    'lineWidth',
+    'lineDotColor',
+    'batched',
+    'shape',
+];
+export const isMetadataKey = (key) => {
+    return METADATA_KEYS.includes(key);
 };
 export class WorldObject {
     uuid;
@@ -19,20 +27,23 @@ export class WorldObject {
     referenceFrame = $state.raw();
     pose = $state.raw(createPose());
     geometry;
-    metadata;
+    metadata = $state({});
     localEditedPose = $state.raw(createPose());
     constructor(name, pose, parent = 'world', geometry, metadata) {
         this.uuid = MathUtils.generateUUID();
         this.name = name;
         this.referenceFrame = parent;
         this.geometry = geometry;
-        this.metadata = metadata ?? {};
+        if (metadata) {
+            this.metadata = metadata;
+        }
         if (pose) {
             this.pose = pose;
             this.localEditedPose = { ...pose };
         }
     }
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const unwrapValue = (value) => {
     if (!value?.kind)
         return value;
@@ -42,9 +53,9 @@ const unwrapValue = (value) => {
         case 'boolValue':
             return value.kind.value;
         case 'structValue': {
-            // Recursively unwrap nested struct
             const result = {};
             for (const [key, val] of Object.entries(value.kind.value.fields || {})) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 result[key] = unwrapValue(val);
             }
             return result;
@@ -57,56 +68,65 @@ const unwrapValue = (value) => {
             return value.kind.value;
     }
 };
-const parseMetadata = (metadata) => {
-    let json = {};
-    for (const [k, v] of Object.entries(metadata)) {
+export const parseMetadata = (fields = {}) => {
+    const json = {};
+    for (const [k, v] of Object.entries(fields)) {
+        if (!isMetadataKey(k))
+            continue;
         const unwrappedValue = unwrapValue(v);
-        // TODO: Remove special case and add better handling for metadata
-        if (k === 'color' && unwrappedValue && typeof unwrappedValue === 'object') {
-            const { r, g, b } = unwrappedValue;
-            json[k] = new Color().setRGB(r / 255, g / 255, b / 255);
-        }
-        else {
-            json = { ...json, [k]: unwrappedValue };
+        switch (k) {
+            case 'color':
+            case 'lineDotColor':
+                json[k] = readColor(unwrappedValue);
+                break;
+            case 'opacity':
+                json[k] = parseOpacity(unwrappedValue);
+                break;
+            case 'gltf':
+                json[k] = unwrappedValue;
+                break;
+            case 'points':
+                json[k] = unwrappedValue;
+                break;
+            case 'pointSize':
+                json[k] = unwrappedValue;
+                break;
+            case 'lineWidth':
+                json[k] = unwrappedValue;
+                break;
+            case 'batched':
+                json[k] = unwrappedValue;
+                break;
+            case 'shape':
+                json[k] = unwrappedValue;
+                break;
         }
     }
     return json;
 };
+const readColor = (color) => {
+    if (isColorRepresentation(color))
+        return parseColor(color);
+    if (isRGB(color))
+        return parseRGB(color);
+    return new Color('black');
+};
 export const fromTransform = (transform) => {
-    const metadata = transform.metadata
-        ? parseMetadata(transform.metadata.fields)
-        : {};
+    const metadata = transform.metadata ? parseMetadata(transform.metadata.fields) : {};
     const worldObject = new WorldObject(transform.referenceFrame, transform.poseInObserverFrame?.pose, transform.poseInObserverFrame?.referenceFrame, transform.physicalObject, metadata);
     worldObject.uuid = transform.uuidString;
     return worldObject;
 };
-const poseToMatrix = (pose) => {
-    const matrix = new Matrix4();
-    const poseQuaternion = new Quaternion().setFromAxisAngle(new Vector3(pose.oX, pose.oY, pose.oZ), pose.theta * (Math.PI / 180));
-    matrix.makeRotationFromQuaternion(poseQuaternion);
-    matrix.setPosition(new Vector3(pose.x, pose.y, pose.z));
-    return matrix;
-};
-const matrixToPose = (matrix) => {
-    const pose = createPose();
-    const translation = new Vector3();
-    const quaternion = new Quaternion();
-    matrix.decompose(translation, quaternion, new Vector3());
-    pose.x = translation.x;
-    pose.y = translation.y;
-    pose.z = translation.z;
-    const s = Math.sqrt(1 - quaternion.w * quaternion.w);
-    if (s < 0.000001) {
-        pose.oX = 0;
-        pose.oY = 0;
-        pose.oZ = 1;
-        pose.theta = 0;
+export const determinePose = (object, pose) => {
+    if (pose === undefined) {
+        return object.localEditedPose;
     }
     else {
-        pose.oX = quaternion.x / s;
-        pose.oY = quaternion.y / s;
-        pose.oZ = quaternion.z / s;
-        pose.theta = Math.acos(quaternion.w) * 2 * (180 / Math.PI);
+        const poseNetwork = poseToMatrix(object.pose);
+        const poseUsePose = poseToMatrix(pose);
+        const poseLocalEditedPose = poseToMatrix(object.localEditedPose);
+        const poseNetworkInverse = poseNetwork.invert();
+        const resultMatrix = poseUsePose.multiply(poseNetworkInverse).multiply(poseLocalEditedPose);
+        return matrixToPose(resultMatrix);
     }
-    return pose;
 };

package/dist/color.d.ts

@@ -1,4 +1,4 @@
-import { Color, type ColorRepresentation } from 'three';
+import { Color, type ColorRepresentation, type RGB } from 'three';
 /**
  * Darkens a THREE.Color by a given percentage while preserving hue.
  * @param color The original THREE.Color instance.
@@ -27,3 +27,8 @@ export declare const resourceColors: {
     readonly switch: string;
     readonly webcam: string;
 };
+export declare const isColorRepresentation: (color: unknown) => color is ColorRepresentation;
+export declare const parseColor: (color: unknown, defaultColor?: ColorRepresentation) => Color;
+export declare const isRGB: (color: unknown) => color is RGB;
+export declare const parseRGB: (color: unknown, defaultColor?: RGB) => Color;
+export declare const parseOpacity: (opacity: unknown, defaultOpacity?: number) => number;

package/dist/color.js

@@ -1,5 +1,6 @@
 import { Color } from 'three';
 import twColors from 'tailwindcss/colors';
+import { isNumber } from 'lodash-es';
 // Step 3: linear sRGB → sRGB
 const linearToSrgb = (x) => {
     return x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
@@ -73,3 +74,62 @@ export const resourceColors = {
     switch: oklchToHex(twColors.stone[darkness]),
     webcam: oklchToHex(twColors.sky[darkness]),
 };
+export const isColorRepresentation = (color) => {
+    if (!color)
+        return false;
+    if (isColorString(color))
+        return true;
+    if (isColorHex(color))
+        return true;
+    if (isColor(color))
+        return true;
+    return false;
+};
+export const parseColor = (color, defaultColor = 'black') => {
+    if (!isColorRepresentation(color))
+        return new Color(defaultColor);
+    return new Color(color);
+};
+export const isRGB = (color) => {
+    if (!color ||
+        typeof color !== 'object' ||
+        !('r' in color) ||
+        !('g' in color) ||
+        !('b' in color)) {
+        return false;
+    }
+    return isNumber(color.r) && isNumber(color.g) && isNumber(color.b);
+};
+export const parseRGB = (color, defaultColor = { r: 0, g: 0, b: 0 }) => {
+    if (!isRGB(color))
+        return new Color().setRGB(defaultColor.r, defaultColor.g, defaultColor.b);
+    return new Color().setRGB(color.r, color.g, color.b);
+};
+export const parseOpacity = (opacity, defaultOpacity = 1) => {
+    if (!isNumber(opacity))
+        return defaultOpacity;
+    return opacity > 1 ? opacity / 100 : opacity;
+};
+const isColor = (color) => {
+    if (!color)
+        return false;
+    return color instanceof Color;
+};
+const isColorString = (color) => {
+    if (!color)
+        return false;
+    if (typeof color === 'string') {
+        const parsed = new Color(color);
+        return parsed.isColor;
+    }
+    return false;
+};
+const isColorHex = (color) => {
+    if (!color)
+        return false;
+    if (typeof color === 'number') {
+        const parsed = new Color(color);
+        return parsed.isColor;
+    }
+    return false;
+};

package/dist/components/App.svelte

@@ -21,6 +21,7 @@
 	import { useViamClient } from '@viamrobotics/svelte-sdk'
 	import LiveUpdatesBanner from './LiveUpdatesBanner.svelte'
 	import ArmPositions from './widgets/ArmPositions.svelte'
+	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
 
 	interface LocalConfigProps {
 		getLocalPartConfig: () => Struct
@@ -45,6 +46,7 @@
 
 	const appClient = useViamClient()
 	const settings = provideSettings()
+	const environment = provideEnvironment()
 
 	$effect(() => {
 		settings.current.enableKeybindings = enableKeybindings
@@ -55,10 +57,9 @@
 	provideToast()
 
 	let root = $state.raw<HTMLElement>()
-	let isStandalone = $state(false)
 
 	if (localConfigProps) {
-		isStandalone = false
+		environment.current.isStandalone = false
 		providePartConfig({
 			appEmbeddedPartConfigProps: {
 				isDirty: () => localConfigProps.isDirty(),
@@ -68,7 +69,7 @@
 			},
 		})
 	} else {
-		isStandalone = true
+		environment.current.isStandalone = true
 		providePartConfig({
 			standalonePartConfigProps: {
 				viamClient: () => appClient?.current,
@@ -99,7 +100,7 @@
 
 						<Dashboard {@attach domPortal(root)} />
 						<Details {@attach domPortal(root)} />
-						{#if isStandalone}
+						{#if environment.current.isStandalone}
 							<LiveUpdatesBanner {@attach domPortal(root)} />
 						{/if}
 

package/dist/components/Details.svelte

@@ -60,6 +60,7 @@
 	const detailConfigUpdater: DetailConfigUpdater = new DetailConfigUpdater(
 		() => object,
 		partConfig.updateFrame,
+		partConfig.deleteFrame,
 		() => referenceFrame
 	)
 
@@ -493,6 +494,16 @@
 
 		<h3 class="text-subtle-2 pt-3 pb-2">Actions</h3>
 
+		<WeblabActive experiment="MOTION_TOOLS_EDIT_FRAME">
+			{#if isFrameNode}
+				<Button
+					variant="danger"
+					class="mb-2 w-full"
+					onclick={() => detailConfigUpdater.deleteFrame()}>Delete Frame</Button
+				>
+			{/if}
+		</WeblabActive>
+
 		{#if focused.current}
 			<Button
 				class="w-full"

package/dist/components/LiveUpdatesBanner.svelte

@@ -19,18 +19,18 @@
 			</p>
 
 			<p class="text-sm">
-				<a
+				<button
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
 						partConfig.saveLocalPartConfig()
-					}}>Save</a
+					}}>Save</button
 				>
 				or
-				<a
+				<button
 					class="cursor-pointer text-blue-600"
 					onclick={() => {
 						partConfig.resetLocalPartConfig()
-					}}>Discard</a
+					}}>Discard</button
 				>
 				to resume.
 			</p>

package/dist/components/Tree/AddFrames.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import Drawer from './Drawer.svelte'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+	import { useFramelessComponents } from '../../hooks/useFramelessComponents.svelte'
+
+	const framelessComponents = useFramelessComponents()
+	const partConfig = usePartConfig()
+</script>
+
+<Drawer name="Add frames">
+	<div class="flex h-64 w-60 flex-col gap-2 overflow-auto p-3">
+		{#if framelessComponents.current.length > 0}
+			<ul class="space-y-1">
+				{#each framelessComponents.current as component (component)}
+					<li class="text-sm text-gray-700">
+						{component}
+						<button
+							class="focus:ring-opacity-50 ml-2 rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+							onclick={() => partConfig.createFrame(component)}>Add Frame</button
+						>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			No components without frames
+		{/if}
+	</div>
+</Drawer>

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

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AddFrames: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AddFrames = InstanceType<typeof AddFrames>;
+export default AddFrames;

package/dist/components/Tree/TreeContainer.svelte

@@ -11,7 +11,8 @@
 	import { useDraggable } from '../../hooks/useDraggable.svelte'
 	import { useWorldStates } from '../../hooks/useWorldState.svelte'
 	import Widgets from './Widgets.svelte'
-
+	import AddFrames from './AddFrames.svelte'
+	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
 	const { ...rest } = $props()
 
 	provideTreeExpandedContext()
@@ -20,6 +21,7 @@
 	const objects = useObjects()
 	const draggable = useDraggable('treeview')
 	const worldStates = useWorldStates()
+	const environment = useEnvironment()
 
 	let rootNode = $state<TreeNode>({
 		id: 'world',
@@ -54,6 +56,9 @@
 		/>
 	{/key}
 
+	{#if environment.current.isStandalone}
+		<AddFrames />
+	{/if}
 	<Logs />
 	<Settings />
 	<Widgets />

package/dist/components/WorldState.svelte

@@ -1,18 +1,70 @@
 <script lang="ts">
+	import { Color, Vector3 } from 'three'
+
 	import Frame from './Frame.svelte'
 	import Label from './Label.svelte'
 	import Portal from './portal/Portal.svelte'
 	import PortalTarget from './portal/PortalTarget.svelte'
 	import { WorldObject } from '../WorldObject.svelte'
+	import { useArrows } from '../hooks/useArrows.svelte'
+	import { poseToDirection } from '../transform'
 
 	interface Props {
 		worldObjects: WorldObject[]
 	}
 
 	let { worldObjects }: Props = $props()
+
+	const batchedArrow = useArrows()
+	const currentArrows: Record<string, { id: number; arrow: WorldObject }> = {}
+
+	const arrows = $derived(worldObjects.filter((object) => object.metadata?.shape === 'arrow'))
+	const objects = $derived(worldObjects.filter((object) => object.metadata?.shape !== 'arrow'))
+
+	const getArrows = () => ({ ...currentArrows })
+	const getArrow = (uuid: string) => currentArrows[uuid]
+	const removeArrow = (uuid: string) => delete currentArrows[uuid]
+	const setArrow = (arrow: WorldObject) => {
+		const currentArrow = getArrow(arrow.uuid)
+		const color = arrow.metadata?.color ?? new Color('yellow')
+		if (currentArrow) {
+			batchedArrow.updateArrow(
+				currentArrow.id,
+				poseToDirection(arrow.pose),
+				new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z),
+				0.1,
+				color,
+				true
+			)
+
+			currentArrows[arrow.uuid] = { id: currentArrow.id, arrow }
+		} else {
+			const id = batchedArrow.addArrow(
+				poseToDirection(arrow.pose),
+				new Vector3(arrow.pose.x, arrow.pose.y, arrow.pose.z),
+				0.1,
+				color,
+				true
+			)
+			currentArrows[arrow.uuid] = { id, arrow }
+		}
+	}
+
+	$effect(() => {
+		const toRemove = getArrows()
+		arrows.forEach((arrow) => {
+			setArrow(arrow)
+			delete toRemove[arrow.uuid]
+		})
+
+		Object.values(toRemove).forEach(({ id, arrow }) => {
+			batchedArrow.removeArrow(id)
+			removeArrow(arrow.uuid)
+		})
+	})
 </script>
 
-{#each worldObjects as object (object.uuid)}
+{#each objects as object (object.uuid)}
 	<Portal id={object.referenceFrame}>
 		<Frame
 			uuid={object.uuid}

package/dist/hooks/useDrawAPI.svelte.js

@@ -92,7 +92,7 @@ export const provideDrawAPI = () => {
             geometry.geometryType.value = data.capsule;
         }
         const object = new WorldObject(data.label ?? ++geometryIndex, data.center, parent, geometry, {
-            color,
+            color: new Color(color),
         });
         meshes.push(object);
     };
@@ -104,7 +104,7 @@ export const provideDrawAPI = () => {
         }
         const controlPoints = data.ControlPts.map((point) => new Vector4(point.x / 1000, point.y / 1000, point.z / 1000));
         const curve = new NURBSCurve(data.Degree, data.Knots, controlPoints);
-        const object = new WorldObject(data.name, data.pose, data.parent, { center: undefined, geometryType: { case: 'line', value: new Float32Array() } }, { color, points: curve.getPoints(200) });
+        const object = new WorldObject(data.name, data.pose, data.parent, { center: undefined, geometryType: { case: 'line', value: new Float32Array() } }, { color: new Color(color), points: curve.getPoints(200) });
         nurbs.push(object);
     };
     const drawPoses = async (reader) => {

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

@@ -0,0 +1,10 @@
+interface Environemnt {
+    viewerMode: 'edit' | 'monitor';
+    isStandalone: boolean;
+}
+interface Context {
+    current: Environemnt;
+}
+export declare const provideEnvironment: () => Context;
+export declare const useEnvironment: () => Context;
+export {};

package/dist/hooks/useEnvironment.svelte.js

@@ -0,0 +1,19 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('environment');
+const defaults = () => ({
+    viewerMode: 'monitor',
+    isStandalone: true,
+});
+export const provideEnvironment = () => {
+    const environment = $state(defaults());
+    const context = {
+        get current() {
+            return environment;
+        },
+    };
+    setContext(key, context);
+    return context;
+};
+export const useEnvironment = () => {
+    return getContext(key);
+};