@viamrobotics/motion-tools 1.13.0 → 1.14.0

package/dist/components/xr/ArmTeleop.svelte

@@ -24,7 +24,7 @@
 	let {
 		armName,
 		gripperName,
-		scaleFactor = 1.0,
+		scaleFactor = 1,
 		hand = 'right',
 		rotationEnabled = true,
 	}: Props = $props()
@@ -33,6 +33,7 @@
 
 	// Capture initial prop values — parent uses {#key} to force remount on changes.
 	// Wrapped in an IIFE to avoid Svelte's state_referenced_locally warning.
+	// eslint-disable-next-line unicorn/no-unreadable-iife
 	const { initialHand, initialGripperName } = (() => ({
 		initialHand: hand,
 		initialGripperName: gripperName,
@@ -101,16 +102,14 @@
 		const currentSession = $session
 		if (!currentSession) return
 
-		const inputSource = Array.from(currentSession.inputSources).find(
-			(s) => s.handedness === initialHand
-		)
+		const inputSource = [...currentSession.inputSources].find((s) => s.handedness === initialHand)
 		if (!inputSource?.gamepad?.hapticActuators?.length) return
 
 		const actuator = inputSource.gamepad.hapticActuators[0]
 		if ('pulse' in actuator) {
 			actuator
 				.pulse(intensity, duration)
-				.catch((e) => console.warn('[ArmTeleop] Haptic pulse failed:', e))
+				.catch((error) => console.warn('[ArmTeleop] Haptic pulse failed:', error))
 		}
 	}
 
@@ -143,9 +142,7 @@
 		const currentSession = $session
 		if (!currentSession || !controller.current) return
 
-		const inputSource = Array.from(currentSession.inputSources).find(
-			(s) => s.handedness === initialHand
-		)
+		const inputSource = [...currentSession.inputSources].find((s) => s.handedness === initialHand)
 
 		if (!inputSource || !inputSource.gamepad) return
 
@@ -166,15 +163,16 @@
 			if (armClient.current) {
 				handleStartControl(controller.current)
 			}
-		} else if (!isPressed && wasPressed) {
-			// Falling Edge: Stop Control
-			if (isControlling) {
-				isControlling = false
-				// Haptic feedback: short pulse on teleop end
-				triggerHapticFeedback(0.3, 80)
-				// Log final position
-				handleStopControl()
-			}
+		} else if (
+			!isPressed &&
+			wasPressed && // Falling Edge: Stop Control
+			isControlling
+		) {
+			isControlling = false
+			// Haptic feedback: short pulse on teleop end
+			triggerHapticFeedback(0.3, 80)
+			// Log final position
+			handleStopControl()
 		}
 
 		// 4. Edge Detection - GRIPPER CONTROL (Trigger)
@@ -186,7 +184,7 @@
 					clearTimeout(gripperStopTimeout)
 					gripperStopTimeout = null
 				}
-				gripperClient.current.grab().catch((e) => console.warn('Gripper grab failed:', e))
+				gripperClient.current.grab().catch((error) => console.warn('Gripper grab failed:', error))
 			} else if (!isTriggerPressed && wasTriggerPressed) {
 				// Trigger released: Open gripper, then stop after 1 second
 				// Clear any pending stop timeout
@@ -194,11 +192,13 @@
 					clearTimeout(gripperStopTimeout)
 					gripperStopTimeout = null
 				}
-				gripperClient.current.open().catch((e) => console.warn('Gripper open failed:', e))
+				gripperClient.current.open().catch((error) => console.warn('Gripper open failed:', error))
 
 				// Schedule stop after 1 second
 				gripperStopTimeout = setTimeout(() => {
-					gripperClient?.current?.stop().catch((e) => console.warn('Gripper stop failed:', e))
+					gripperClient?.current
+						?.stop()
+						.catch((error) => console.warn('Gripper stop failed:', error))
 					gripperStopTimeout = null
 				}, 1000)
 			}
@@ -275,16 +275,16 @@
 
 			// Haptic feedback: short pulse on teleop start
 			triggerHapticFeedback(0.5, 100)
-		} catch (e) {
-			console.error('[ArmTeleop] Failed to start teleop:', e)
+		} catch (error) {
+			console.error('[ArmTeleop] Failed to start teleop:', error)
 		}
 	}
 
 	async function handleStopControl() {
 		try {
 			await armClient.current!.getEndPosition()
-		} catch (e) {
-			console.error('[ArmTeleop] Failed to get final position:', e)
+		} catch (error) {
+			console.error('[ArmTeleop] Failed to get final position:', error)
 		}
 	}
 
@@ -361,7 +361,7 @@
 		lastCommandTime = now
 		isSending = true
 
-		if (isNaN(targetPos.x) || isNaN(targetOV.th)) {
+		if (Number.isNaN(targetPos.x) || Number.isNaN(targetOV.th)) {
 			console.warn('Teleop Safety: NaN detected', targetPos, targetOV)
 			isSending = false
 			return
@@ -387,12 +387,12 @@
 			if (client) {
 				client
 					.doCommand(VIAM.Struct.fromJson(command))
-					.catch((e) => {
-						console.warn('Move failed:', e)
+					.catch((error) => {
+						console.warn('Move failed:', error)
 						errorTimeout = Date.now() + ERROR_COOLDOWN
 						triggerHapticFeedback(0.8, 200)
 						lastErrorHapticTime = Date.now()
-						showArmErrorToast(e)
+						showArmErrorToast(error)
 					})
 					.finally(() => {
 						isSending = false
@@ -409,12 +409,12 @@
 					oZ: targetOV.z,
 					theta: (targetOV.th * 180) / Math.PI,
 				})
-				.catch((e) => {
-					console.warn('Move failed:', e)
+				.catch((error) => {
+					console.warn('Move failed:', error)
 					errorTimeout = Date.now() + ERROR_COOLDOWN
 					triggerHapticFeedback(0.8, 200)
 					lastErrorHapticTime = Date.now()
-					showArmErrorToast(e)
+					showArmErrorToast(error)
 				})
 				.finally(() => {
 					isSending = false
@@ -434,8 +434,8 @@
 			// Use moveToPosition to return to the saved pose
 			await armClient.current.moveToPosition(savedPose)
 			xrToast.success('Returned to saved position')
-		} catch (e) {
-			console.error('[ArmTeleop] Failed to return to saved pose:', e)
+		} catch (error) {
+			console.error('[ArmTeleop] Failed to return to saved pose:', error)
 			xrToast.danger('Failed to return to position')
 		} finally {
 			isReturning = false

package/dist/components/xr/CameraFeed.svelte

@@ -86,7 +86,7 @@
 			}
 
 			// Force play to ensure stream is active
-			video.play().catch((e) => console.warn('Video play failed:', e))
+			video.play().catch((error) => console.warn('Video play failed:', error))
 			ready = true
 
 			// PROFILING: Video ready
@@ -153,28 +153,26 @@
 				const captureTime = metadata.captureTime || metadata.mediaTime
 				const presentationTime = metadata.presentationTime || metadata.expectedDisplayTime
 
-				if (captureTime) {
-					// The times might be in different epochs, so we can only reliably calculate
-					// the difference between capture and presentation
-					if (presentationTime) {
-						// Encoding + Network + Decoding time
-						const captureToPresentMs = (presentationTime - captureTime) / 1000
-						metrics.captureToPresent = captureToPresentMs
-
-						// Time since video element presented the frame to when we render it
-						// This should be very small (< 16ms ideally)
-						const presentMsRelative = presentationTime / 1000
-						const timeSincePresentation = now - presentMsRelative
-
-						// Only use this if the time domains seem aligned (value is reasonable)
-						if (Math.abs(timeSincePresentation) < 1000) {
-							metrics.presentToRender = timeSincePresentation
-							metrics.totalLatency = captureToPresentMs + timeSincePresentation
-						} else {
-							// Time domains don't align - just use capture to present as approximation
-							metrics.presentToRender = undefined
-							metrics.totalLatency = captureToPresentMs
-						}
+				// The times might be in different epochs, so we can only reliably calculate
+				// the difference between capture and presentation
+				if (captureTime && presentationTime) {
+					// Encoding + Network + Decoding time
+					const captureToPresentMs = (presentationTime - captureTime) / 1000
+					metrics.captureToPresent = captureToPresentMs
+
+					// Time since video element presented the frame to when we render it
+					// This should be very small (< 16ms ideally)
+					const presentMsRelative = presentationTime / 1000
+					const timeSincePresentation = now - presentMsRelative
+
+					// Only use this if the time domains seem aligned (value is reasonable)
+					if (Math.abs(timeSincePresentation) < 1000) {
+						metrics.presentToRender = timeSincePresentation
+						metrics.totalLatency = captureToPresentMs + timeSincePresentation
+					} else {
+						// Time domains don't align - just use capture to present as approximation
+						metrics.presentToRender = undefined
+						metrics.totalLatency = captureToPresentMs
 					}
 				}
 			}

package/dist/components/xr/JointLimitsWidget.svelte

@@ -36,7 +36,7 @@
 		return jointLimits.map((limit, index) => {
 			const current = currentPositions[index] ?? 0
 			const range = limit.max - limit.min
-			const percentage = range !== 0 ? ((current - limit.min) / range) * 100 : 50
+			const percentage = range === 0 ? 50 : ((current - limit.min) / range) * 100
 
 			let status: 'safe' | 'caution' | 'danger'
 			if (percentage < 10 || percentage > 90) {
@@ -122,6 +122,18 @@
 		ctx.stroke()
 	}
 
+	const getJointColor = (status: 'safe' | 'caution' | 'danger') => {
+		if (status === 'danger') {
+			return '#ff4444'
+		}
+
+		if (status === 'caution') {
+			return '#ffaa00'
+		}
+
+		return '#44ff44'
+	}
+
 	// Render joint data to canvas
 	function renderJointLimits(
 		ctx: CanvasRenderingContext2D,
@@ -132,7 +144,8 @@
 		const s = RESOLUTION_SCALE
 		const rowHeight = (height - HEADER_HEIGHT) / joints.length
 
-		joints.forEach((joint, index) => {
+		let index = 0
+		for (const joint of joints) {
 			const y = HEADER_HEIGHT + index * rowHeight
 
 			// Background row
@@ -157,8 +170,7 @@
 
 			// Progress bar fill (colored by status)
 			const fillWidth = barWidth * (joint.percentage / 100)
-			ctx.fillStyle =
-				joint.status === 'danger' ? '#ff4444' : joint.status === 'caution' ? '#ffaa00' : '#44ff44'
+			ctx.fillStyle = getJointColor(joint.status)
 			ctx.fillRect(barX, barY, fillWidth, barHeight)
 
 			// Progress bar border
@@ -174,7 +186,9 @@
 				barX + barWidth + 20 * s,
 				y + rowHeight / 2
 			)
-		})
+
+			index += 1
+		}
 	}
 
 	// Update canvas when joint data changes

package/dist/components/xr/XRConfigPanel.svelte

@@ -21,8 +21,8 @@
 	let resources: ReturnType<typeof useResourceNames> | undefined
 	try {
 		resources = useResourceNames(() => partID.current)
-	} catch (e) {
-		console.warn('Failed to get resources, robot may not be connected yet:', e)
+	} catch (error) {
+		console.warn('Failed to get resources, robot may not be connected yet:', error)
 	}
 
 	// Get available arms and grippers
@@ -41,9 +41,9 @@
 	const currentConfig = $derived(settings.current.xrController[selectedHand])
 
 	// Local form state (editable) — synced from currentConfig via effect
-	let formArmName = $state<string | undefined>(undefined)
-	let formGripperName = $state<string | undefined>(undefined)
-	let formScaleFactor = $state<number>(1.0)
+	let formArmName = $state<string>()
+	let formGripperName = $state<string>()
+	let formScaleFactor = $state<number>(1)
 	let formRotationEnabled = $state<boolean>(true)
 
 	// Sync form state when selected hand or config changes
@@ -59,9 +59,9 @@
 	const CANVAS_WIDTH = 600
 	const CANVAS_HEIGHT = 500
 
-	let canvas: HTMLCanvasElement | undefined = $state()
-	let texture: CanvasTexture | undefined = $state()
-	let geometry: PlaneGeometry | undefined = $state()
+	let canvas = $state<HTMLCanvasElement>()
+	let texture = $state<CanvasTexture>()
+	let geometry = $state<PlaneGeometry>()
 
 	// Initialize canvas
 	$effect(() => {
@@ -90,14 +90,14 @@
 	let uiElements: UIElement[] = []
 
 	// Mesh ref for raycasting
-	let meshRef = $state<Mesh | undefined>()
+	let meshRef = $state<Mesh>()
 
 	// Controller interaction
 	const rightController = useController('right')
 	const leftController = useController('left')
 
 	// Interaction state
-	let hoveredElement = $state<UIElement | undefined>()
+	let hoveredElement = $state<UIElement>()
 	let lastButtonPressed = $state(false)
 
 	// Handle click on UI element
@@ -340,7 +340,7 @@
 		ctx.fillRect(sliderX, sliderY, sliderWidth, sliderHeight)
 
 		// Slider thumb
-		const thumbPos = ((formScaleFactor - 0.1) / (3.0 - 0.1)) * sliderWidth
+		const thumbPos = ((formScaleFactor - 0.1) / (3 - 0.1)) * sliderWidth
 		ctx.fillStyle = '#4CAF50'
 		ctx.beginPath()
 		ctx.arc(sliderX + thumbPos, sliderY + sliderHeight / 2, 12, 0, Math.PI * 2)
@@ -428,12 +428,13 @@
 		}
 	})
 
-	// Clean up on unmount
+	const cleanup = () => {
+		texture?.dispose()
+		geometry?.dispose()
+	}
+
 	$effect(() => {
-		return () => {
-			texture?.dispose()
-			geometry?.dispose()
-		}
+		return cleanup
 	})
 </script>
 

package/dist/components/xr/XRControllerSettings.svelte

@@ -105,8 +105,8 @@
 			max="3.0"
 			step="0.1"
 			value={config.left.scaleFactor}
-			style="--value: {((config.left.scaleFactor - 0.1) / (3.0 - 0.1)) * 100}%"
-			oninput={(e) => updateConfig('left', 'scaleFactor', parseFloat(e.currentTarget.value))}
+			style="--value: {((config.left.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
+			oninput={(e) => updateConfig('left', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
 		/>
 	</label>
 
@@ -166,8 +166,9 @@
 			max="3.0"
 			step="0.1"
 			value={config.right.scaleFactor}
-			style="--value: {((config.right.scaleFactor - 0.1) / (3.0 - 0.1)) * 100}%"
-			oninput={(e) => updateConfig('right', 'scaleFactor', parseFloat(e.currentTarget.value))}
+			style="--value: {((config.right.scaleFactor - 0.1) / (3 - 0.1)) * 100}%"
+			oninput={(e) =>
+				updateConfig('right', 'scaleFactor', Number.parseFloat(e.currentTarget.value))}
 		/>
 	</label>
 

package/dist/components/xr/XRToast.svelte

@@ -132,7 +132,8 @@
 		const iconCenterX = accentBarWidth + 30
 		const textStartX = accentBarWidth + 56
 
-		toasts.forEach((toast, index) => {
+		let index = 0
+		for (const toast of toasts) {
 			const y = index * (TOAST_HEIGHT + TOAST_GAP)
 			const style = VARIANT_STYLES[toast.variant]
 
@@ -165,7 +166,9 @@
 			ctx.font = '28px sans-serif'
 			ctx.textBaseline = 'middle'
 			ctx.fillText(toast.message, textStartX, y + TOAST_HEIGHT / 2)
-		})
+
+			index += 1
+		}
 
 		texture.needsUpdate = true
 	}
@@ -189,12 +192,14 @@
 		renderToasts(toasts)
 	})
 
+	const dispose = () => {
+		texture.dispose()
+		untrack(() => geometry?.dispose())
+	}
+
 	// Cleanup
 	$effect(() => {
-		return () => {
-			texture.dispose()
-			untrack(() => geometry?.dispose())
-		}
+		return dispose
 	})
 </script>
 

package/dist/ecs/relations.d.ts

@@ -1,3 +1,4 @@
+export declare const ChildOf: import("koota").Relation<import("koota").Trait<Record<string, never>>>;
 export declare const SubEntityLinkType: {
     readonly HoverLink: "HoverLink";
 };

package/dist/ecs/relations.js

@@ -1,4 +1,5 @@
 import { relation } from 'koota';
+export const ChildOf = relation({ exclusive: true });
 export const SubEntityLinkType = {
     HoverLink: 'HoverLink',
 };

package/dist/ecs/traits.d.ts

@@ -1,4 +1,5 @@
 import type { GLTF as ThreeGltf } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { type Entity } from 'koota';
 import { BufferGeometry as ThreeBufferGeometry } from 'three';
 import { Geometry as ViamGeometry } from '@viamrobotics/sdk';
 export declare const Name: import("koota").Trait<() => string>;
@@ -178,22 +179,4 @@ export declare const Geometry: (geometry: ViamGeometry) => import("koota").Trait
 }>, Partial<{
     r: number;
 }>] | [import("koota").Trait<() => ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>>, ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>];
-export declare const updateGeometry: (geometry: ViamGeometry) => (ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap> | import("koota").Trait<() => ThreeBufferGeometry<import("three").NormalBufferAttributes, import("three").BufferGeometryEventMap>>)[] | ({
-    x: number;
-    y: number;
-    z: number;
-} | import("koota").Trait<{
-    x: number;
-    y: number;
-    z: number;
-}>)[] | ({
-    r: number;
-    l: number;
-} | import("koota").Trait<{
-    l: number;
-    r: number;
-}>)[] | ({
-    r: number;
-} | import("koota").Trait<{
-    r: number;
-}>)[];
+export declare const updateGeometryTrait: (entity: Entity, geometry?: ViamGeometry) => void;

package/dist/ecs/traits.js

@@ -126,18 +126,45 @@ export const Geometry = (geometry) => {
     }
     return ReferenceFrame;
 };
-export const updateGeometry = (geometry) => {
+export const updateGeometryTrait = (entity, geometry) => {
+    if (!geometry) {
+        entity.remove(Box, Capsule, Sphere, BufferGeometry);
+        return;
+    }
     if (geometry.geometryType.case === 'box') {
-        return [Box, createBox(geometry.geometryType.value)];
+        if (entity.has(Box)) {
+            entity.set(Box, createBox(geometry.geometryType.value));
+        }
+        else {
+            entity.remove(Capsule, Sphere, BufferGeometry);
+            entity.add(Box(createBox(geometry.geometryType.value)));
+        }
     }
     else if (geometry.geometryType.case === 'capsule') {
-        return [Capsule, createCapsule(geometry.geometryType.value)];
+        if (entity.has(Capsule)) {
+            entity.set(Capsule, createCapsule(geometry.geometryType.value));
+        }
+        else {
+            entity.remove(Box, Sphere, BufferGeometry);
+            entity.add(Capsule(createCapsule(geometry.geometryType.value)));
+        }
     }
     else if (geometry.geometryType.case === 'sphere') {
-        return [Sphere, createSphere(geometry.geometryType.value)];
+        if (entity.has(Sphere)) {
+            entity.set(Sphere, createSphere(geometry.geometryType.value));
+        }
+        else {
+            entity.remove(Box, Capsule, BufferGeometry);
+            entity.add(Sphere(createSphere(geometry.geometryType.value)));
+        }
     }
     else if (geometry.geometryType.case === 'mesh') {
-        return [BufferGeometry, parsePlyInput(geometry.geometryType.value.mesh)];
+        if (entity.has(BufferGeometry)) {
+            entity.set(BufferGeometry, parsePlyInput(geometry.geometryType.value.mesh));
+        }
+        else {
+            entity.remove(Box, Sphere, Capsule);
+            entity.add(BufferGeometry(parsePlyInput(geometry.geometryType.value.mesh)));
+        }
     }
-    return [];
 };

package/dist/ecs/useQuery.svelte.js

@@ -31,11 +31,11 @@ export function useQuery(...parameters) {
             };
         });
     });
+    const handler = () => {
+        version += 1;
+    };
     // Force reattaching event listeners when the world is reset.
     $effect(() => {
-        const handler = () => {
-            version += 1;
-        };
         world[internal].resetSubscriptions.add(handler);
         return () => {
             world[internal].resetSubscriptions.delete(handler);

package/dist/format.js

@@ -2,7 +2,7 @@ export const formatNumeric = (value, decimals = 2) => {
     if (value === undefined) {
         return '––';
     }
-    if (isNaN(value)) {
+    if (Number.isNaN(value)) {
         return 'NaN';
     }
     if (value === Number.POSITIVE_INFINITY) {

package/dist/hooks/use3DModels.svelte.js

@@ -18,48 +18,46 @@ export const provide3DModels = (partID) => {
     const clients = $derived(armClients.filter((client) => {
         return arms.current.some((arm) => arm.name === client.current?.name);
     }));
-    $effect(() => {
-        const fetch3DModels = async () => {
-            const next = {};
-            for (const client of clients) {
-                if (!client.current)
+    const fetch3DModels = async () => {
+        const next = {};
+        for (const client of clients) {
+            if (!client.current)
+                continue;
+            try {
+                const geometries = await client.current.getGeometries();
+                if (geometries.length === 0) {
                     continue;
-                try {
-                    const geometries = await client.current.getGeometries();
-                    if (geometries.length === 0) {
-                        continue;
-                    }
-                    const geometryLabel = geometries[0].label;
-                    const prefix = geometryLabel.split(':')[0];
-                    const models = await client.current.get3DModels();
-                    if (!(prefix in next)) {
-                        next[prefix] = {};
-                    }
-                    for (const [id, model] of Object.entries(models)) {
-                        const arrayBuffer = model.mesh.buffer.slice(model.mesh.byteOffset, model.mesh.byteOffset + model.mesh.byteLength);
-                        const gltfModel = await gltfLoader.parseAsync(arrayBuffer, '');
-                        next[prefix][id] = gltfModel.scene;
-                        gltfModel.scene.traverse((object) => {
-                            if (isInstanceOf(object, 'Mesh')) {
-                                const { material } = object;
-                                if (isInstanceOf(material, 'MeshStandardMaterial')) {
-                                    material.roughness = 0.3;
-                                    material.metalness = 0.1;
-                                }
-                            }
-                        });
-                    }
-                    current = next;
                 }
-                catch (error) {
-                    // some arms may not implement this api yet
-                    console.warn(`${client.current.name} returned an error: ${error} when getting 3D models`);
+                const geometryLabel = geometries[0].label;
+                const prefix = geometryLabel.split(':')[0];
+                const models = await client.current.get3DModels();
+                if (!(prefix in next)) {
+                    next[prefix] = {};
+                }
+                for (const [id, model] of Object.entries(models)) {
+                    const arrayBuffer = model.mesh.buffer.slice(model.mesh.byteOffset, model.mesh.byteOffset + model.mesh.byteLength);
+                    const gltfModel = await gltfLoader.parseAsync(arrayBuffer, '');
+                    next[prefix][id] = gltfModel.scene;
+                    gltfModel.scene.traverse((object) => {
+                        if (isInstanceOf(object, 'Mesh')) {
+                            const { material } = object;
+                            if (isInstanceOf(material, 'MeshStandardMaterial')) {
+                                material.roughness = 0.3;
+                                material.metalness = 0.1;
+                            }
+                        }
+                    });
                 }
+                current = next;
             }
-        };
-        const shouldFetchModels = settings.current.isLoaded &&
-            (settings.current.renderArmModels === 'model' ||
-                settings.current.renderArmModels === 'colliders+model');
+            catch (error) {
+                // some arms may not implement this api yet
+                console.warn(`${client.current.name} returned an error: ${error} when getting 3D models`);
+            }
+        }
+    };
+    $effect(() => {
+        const shouldFetchModels = settings.current.isLoaded && settings.current.renderArmModels.includes('model');
         if (shouldFetchModels) {
             fetch3DModels();
         }

package/dist/hooks/useConfigFrames.svelte.js

@@ -8,12 +8,7 @@ export const provideConfigFrames = () => {
     const environment = useEnvironment();
     const partConfig = usePartConfig();
     $effect(() => {
-        if (partConfig.isDirty) {
-            environment.current.viewerMode = 'edit';
-        }
-        else {
-            environment.current.viewerMode = 'monitor';
-        }
+        environment.current.viewerMode = partConfig.isDirty ? 'edit' : 'monitor';
     });
     const [configFrames, configUnsetFrameNames] = $derived.by(() => {
         const { components } = partConfig.current;
@@ -74,7 +69,7 @@ export const provideConfigFrames = () => {
                 }
             }
         }
-        return Array.from(validFrames);
+        return [...validFrames];
     };
     const unsetFrames = $derived([...new Set([...configUnsetFrameNames, ...fragmentUnsetFrameNames])]);
     setContext(key, {