@viamrobotics/motion-tools 1.14.0 → 1.15.1

package/dist/components/overlay/Details.svelte

@@ -2,8 +2,9 @@
 	module
 	lang="ts"
 >
+	import { BufferAttribute, MathUtils, Quaternion, Vector3 } from 'three'
+
 	import { OrientationVector } from '../../three/OrientationVector'
-	import { Quaternion, Vector3, MathUtils, BufferAttribute } from 'three'
 
 	const vec3 = new Vector3()
 	const quaternion = new Quaternion()
@@ -12,24 +13,25 @@
 
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
+	import { isInstanceOf, useTask } from '@threlte/core'
+	import { Button, Icon, Input, Select, Tooltip } from '@viamrobotics/prime-core'
 	import { Check, Copy } from 'lucide-svelte'
-	import { useTask, isInstanceOf } from '@threlte/core'
-	import { Button, Icon, Select, Input, Tooltip } from '@viamrobotics/prime-core'
+
+	import AddRelationship from './AddRelationship.svelte'
+	import { relations, traits, useTrait, useWorld } from '../../ecs'
+	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
+	import { useConfigFrames } from '../../hooks/useConfigFrames.svelte'
+	import { useCameraControls } from '../../hooks/useControls.svelte'
+	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
+	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
+	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
+	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
 	import {
-		useSelectedEntity,
 		useFocusedEntity,
 		useFocusedObject3d,
+		useSelectedEntity,
 		useSelectedObject3d,
 	} from '../../hooks/useSelection.svelte'
-	import { useConfigFrames } from '../../hooks/useConfigFrames.svelte'
-	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
-	import { FrameConfigUpdater } from '../../FrameConfigUpdater.svelte'
-	import { useEnvironment } from '../../hooks/useEnvironment.svelte'
-	import { traits, useTrait, useWorld, relations } from '../../ecs'
-	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
-	import { useCameraControls } from '../../hooks/useControls.svelte'
-	import { useLinkedEntities } from '../../hooks/useLinked.svelte'
-	import AddRelationship from './AddRelationship.svelte'
 	import { createPose } from '../../transform'
 
 	const { ...rest } = $props()
@@ -259,18 +261,18 @@
 		id="details-panel"
 		class="border-medium bg-extralight absolute top-0 right-0 z-4 m-2 {showEditFrameOptions
 			? 'w-80'
-			: 'w-60'} border p-2 text-xs"
+			: 'w-60'} border p-2 text-xs dark:text-black"
 		use:draggable={{
 			bounds: 'body',
 			handle: dragElement,
 		}}
 		{...rest}
 	>
-		<div class="flex items-center justify-between gap-2 pb-2">
-			<div class="flex w-[80%] items-center gap-1">
-				<button bind:this={dragElement}>
-					<Icon name="drag" />
-				</button>
+		<div
+			class="flex cursor-move items-center justify-between gap-2 pb-2"
+			bind:this={dragElement}
+		>
+			<div class="flex w-[90%] items-center gap-1">
 				<strong class="overflow-hidden text-nowrap text-ellipsis">{name.current}</strong>
 				<span class="text-subtle-2">{resourceName?.subtype}</span>
 			</div>
@@ -636,9 +638,9 @@
 			{/if}
 		</div>
 
-		<h3 class="text-subtle-2 pt-3 pb-2">Relationships</h3>
-
 		{#if linkedEntities.current.length > 0}
+			<h3 class="text-subtle-2 pt-3 pb-2">Relationships</h3>
+
 			<div>
 				<div class="mt-0.5 flex flex-col gap-1">
 					<strong class="font-semibold">Linked entities</strong>

package/dist/components/overlay/FloatingPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
-	import { Icon } from '@viamrobotics/prime-core'
 
+	import { Icon } from '@viamrobotics/prime-core'
 	import * as floatingPanel from '@zag-js/floating-panel'
 	import { normalizeProps, useMachine } from '@zag-js/svelte'
 
@@ -10,6 +10,7 @@
 		defaultSize?: { width: number; height: number }
 		defaultPosition?: { x: number; y: number }
 		exitable?: boolean
+		resizable?: boolean
 		persistRect?: boolean
 		strategy?: 'absolute' | 'fixed'
 		isOpen?: boolean
@@ -19,7 +20,12 @@
 	let {
 		title = '',
 		defaultSize = { width: 700, height: 500 },
+		defaultPosition = {
+			x: globalThis.innerWidth / 2 - defaultSize.width / 2,
+			y: globalThis.innerHeight / 2 - defaultSize.height / 2,
+		},
 		exitable = true,
+		resizable = false,
 		persistRect = true,
 		isOpen = $bindable(false),
 		children,
@@ -30,7 +36,8 @@
 	const floatingPanelService = useMachine(floatingPanel.machine, () => ({
 		id,
 		defaultSize,
-		resizable: false,
+		defaultPosition,
+		resizable,
 		allowOverflow: false,
 		persistRect,
 		open: isOpen,
@@ -46,7 +53,7 @@
 >
 	<div
 		{...api.getContentProps()}
-		class="border-medium border-1 bg-white"
+		class="border-medium border-1 bg-white dark:text-black"
 	>
 		<div
 			{...api.getDragTriggerProps()}
@@ -56,12 +63,12 @@
 				{...api.getHeaderProps()}
 				class="border-medium flex justify-between border-b p-2"
 			>
-				<p
+				<h3
 					{...api.getTitleProps()}
 					class="text-gray-7 text-xs"
 				>
 					{title}
-				</p>
+				</h3>
 
 				{#if exitable}
 					<div
@@ -85,5 +92,40 @@
 		>
 			{@render children()}
 		</div>
+
+		{#if resizable}
+			<div
+				{...api.getResizeTriggerProps({ axis: 'n' })}
+				class="h-1.5 max-w-[90%]"
+			></div>
+			<div
+				{...api.getResizeTriggerProps({ axis: 'e' })}
+				class="max-h-[90%] w-1.5"
+			></div>
+			<div
+				{...api.getResizeTriggerProps({ axis: 'w' })}
+				class="max-h-[90%] w-1.5"
+			></div>
+			<div
+				{...api.getResizeTriggerProps({ axis: 's' })}
+				class="h-1.5 max-w-[90%]"
+			></div>
+			<div
+				{...api.getResizeTriggerProps({ axis: 'ne' })}
+				class="size-2.5"
+			></div>
+			<div
+				{...api.getResizeTriggerProps({ axis: 'se' })}
+				class="size-2.5"
+			></div>
+			<div
+				{...api.getResizeTriggerProps({ axis: 'sw' })}
+				class="size-2.5"
+			></div>
+			<div
+				{...api.getResizeTriggerProps({ axis: 'nw' })}
+				class="size-2.5"
+			></div>
+		{/if}
 	</div>
 </div>

package/dist/components/overlay/FloatingPanel.svelte.d.ts

@@ -10,6 +10,7 @@ interface Props {
         y: number;
     };
     exitable?: boolean;
+    resizable?: boolean;
     persistRect?: boolean;
     strategy?: 'absolute' | 'fixed';
     isOpen?: boolean;

package/dist/components/overlay/LiveUpdatesBanner.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Button, Icon } from '@viamrobotics/prime-core'
+
 	import { usePartConfig } from '../../hooks/usePartConfig.svelte'
 
 	const partConfig = usePartConfig()

package/dist/components/overlay/Logs.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { Portal } from '@threlte/extras'
+	import { PersistedState } from 'runed'
+
 	import { useLogs } from '../../hooks/useLogs.svelte'
-	import FloatingPanel from './FloatingPanel.svelte'
+
 	import DashboardButton from './dashboard/Button.svelte'
-	import { PersistedState } from 'runed'
+	import FloatingPanel from './FloatingPanel.svelte'
 
 	const logs = useLogs()
 

package/dist/components/overlay/Popover.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import * as popover from '@zag-js/popover'
-	import { portal, useMachine, normalizeProps } from '@zag-js/svelte'
 	import type { Snippet } from 'svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 
+	import * as popover from '@zag-js/popover'
+	import { normalizeProps, portal, useMachine } from '@zag-js/svelte'
+
 	interface Props {
 		trigger: Snippet<[HTMLButtonAttributes]>
 		children: Snippet

package/dist/components/overlay/RefreshRate.svelte

@@ -16,10 +16,12 @@
 </script>
 
 <script lang="ts">
-	import { Select, IconButton } from '@viamrobotics/prime-core'
-	import { useMachineSettings } from '../../hooks/useMachineSettings.svelte'
 	import type { Snippet } from 'svelte'
 
+	import { IconButton, Select } from '@viamrobotics/prime-core'
+
+	import { useMachineSettings } from '../../hooks/useMachineSettings.svelte'
+
 	interface Props {
 		id: string
 		label: string

package/dist/components/overlay/dashboard/Button.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
+
 	import { Icon, type IconName, Tooltip } from '@viamrobotics/prime-core'
 	import { Ruler } from 'lucide-svelte'
-	import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements'
 
 	interface Props extends HTMLButtonAttributes {
 		icon: IconName | 'ruler'

package/dist/components/overlay/dashboard/Button.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type IconName } from '@viamrobotics/prime-core';
 import type { ClassValue, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
+import { type IconName } from '@viamrobotics/prime-core';
 interface Props extends HTMLButtonAttributes {
     icon: IconName | 'ruler';
     active?: boolean;

package/dist/components/overlay/dashboard/Dashboard.svelte

@@ -1,6 +1,8 @@
 <script>
-	import { useSettings } from '../../../hooks/useSettings.svelte'
 	import { PortalTarget } from '@threlte/extras'
+
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+
 	import Button from './Button.svelte'
 
 	let { dashboard, ...rest } = $props()

package/dist/components/overlay/left-pane/Drawer.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { PersistedState } from 'runed'
-	import { Icon } from '@viamrobotics/prime-core'
 	import type { Snippet } from 'svelte'
 
+	import { Icon } from '@viamrobotics/prime-core'
+	import { PersistedState } from 'runed'
+
 	interface Props {
 		name: string
 		defaultOpen?: boolean

package/dist/components/overlay/left-pane/Tree.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
+	import { normalizeProps, useMachine } from '@zag-js/svelte'
 	import * as tree from '@zag-js/tree-view'
-	import { useMachine, normalizeProps } from '@zag-js/svelte'
 	import { ChevronRight, Eye, EyeOff } from 'lucide-svelte'
-	import { useVisibility } from '../../../hooks/useVisibility.svelte'
-	import type { TreeNode } from './buildTree'
 	import { VirtualList } from 'svelte-virtuallists'
-	import { Icon } from '@viamrobotics/prime-core'
+	import { SvelteSet } from 'svelte/reactivity'
+
 	import { traits } from '../../../ecs'
 	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
-	import { SvelteSet } from 'svelte/reactivity'
+	import { useVisibility } from '../../../hooks/useVisibility.svelte'
+
+	import type { TreeNode } from './buildTree'
 
 	const selected = useSelectedEntity()
 	const visibility = useVisibility()
@@ -175,39 +176,27 @@
 	{/if}
 {/snippet}
 
-<div class="root-node">
-	<div {...api.getRootProps() as object}>
-		<div class="border-medium flex items-center gap-1 border-b p-2">
-			<button bind:this={dragElement}>
-				<Icon name="drag" />
-			</button>
-			<h3 {...api.getLabelProps() as object}>{rootNode.entity.get(traits.Name)}</h3>
-		</div>
-
-		<div {...api.getTreeProps()}>
-			{#if rootChildren.length === 0}
-				<p class="text-subtle-2 px-2 py-4">No objects displayed</p>
-			{:else if rootChildren.length > 200}
-				<VirtualList
-					class="w-full"
-					style="height:{Math.min(8, Math.max(rootChildren.length, 5)) * 32}px;"
-					items={rootChildren}
-				>
-					{#snippet vl_slot({ index, item })}
-						{@render treeNode({ node: item, indexPath: [Number(index)], api })}
-					{/snippet}
-				</VirtualList>
-			{:else}
-				<div
-					style="height:{Math.min(8, Math.max(rootChildren.length, 5)) * 32}px;"
-					class="overflow-auto"
-				>
-					{#each rootChildren as node, index (node.entity)}
-						{@render treeNode({ node, indexPath: [Number(index)], api })}
-					{/each}
-				</div>
-			{/if}
-		</div>
+<div
+	{...api.getRootProps()}
+	class="h-full overflow-auto text-xs"
+>
+	<div {...api.getTreeProps()}>
+		{#if rootChildren.length === 0}
+			<p class="text-subtle-2 px-2 py-4">No objects displayed</p>
+		{:else if rootChildren.length > 200}
+			<VirtualList
+				class="w-full"
+				items={rootChildren}
+			>
+				{#snippet vl_slot({ index, item })}
+					{@render treeNode({ node: item, indexPath: [Number(index)], api })}
+				{/snippet}
+			</VirtualList>
+		{:else}
+			{#each rootChildren as node, index (node.entity)}
+				{@render treeNode({ node, indexPath: [Number(index)], api })}
+			{/each}
+		{/if}
 	</div>
 </div>
 

package/dist/components/overlay/left-pane/TreeContainer.svelte

@@ -1,33 +1,19 @@
 <script lang="ts">
-	import { draggable } from '@neodrag/svelte'
-	import Tree from './Tree.svelte'
-	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
-	import { provideTreeExpandedContext } from './useExpanded.svelte'
-	import AddFrames from './AddFrames.svelte'
-	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
-	import { usePartID } from '../../../hooks/usePartID.svelte'
-	import { usePartConfig } from '../../../hooks/usePartConfig.svelte'
-	import { useFrames } from '../../../hooks/useFrames.svelte'
+	import { type Entity, IsExcluded } from 'koota'
+
 	import { traits, useQuery, useWorld } from '../../../ecs'
-	import { IsExcluded, type Entity } from 'koota'
-	import { buildTreeNodes, type TreeNode } from './buildTree'
-	import { MIN_DIMENSIONS, useResizable } from '../../../hooks/useResizable.svelte'
+	import { useFrames } from '../../../hooks/useFrames.svelte'
+	import { useSelectedEntity } from '../../../hooks/useSelection.svelte'
 
-	const { ...rest } = $props()
+	import FloatingPanel from '../FloatingPanel.svelte'
+	import { buildTreeNodes, type TreeNode } from './buildTree'
+	import Tree from './Tree.svelte'
+	import { provideTreeExpandedContext } from './useExpanded.svelte'
 
 	provideTreeExpandedContext()
 
-	let container = $state.raw<HTMLDivElement>()
-	let dragElement = $state.raw<HTMLElement>()
-
-	const partID = usePartID()
 	const selectedEntity = useSelectedEntity()
-	const resizable = useResizable(
-		() => 'treeview',
-		() => ({ width: 240, height: window.innerHeight - 20 })
-	)
-	const environment = useEnvironment()
-	const partConfig = usePartConfig()
+
 	const frames = useFrames()
 	const world = useWorld()
 
@@ -46,39 +32,23 @@
 		entity: worldEntity,
 		children: rootNodes,
 	})
-
-	$effect(() => {
-		if (container) {
-			resizable.observe(container)
-		}
-	})
 </script>
 
-<div
-	bind:this={container}
-	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 resize overflow-y-auto border text-xs"
-	style:min-width="{MIN_DIMENSIONS.width}px"
-	style:min-height="{MIN_DIMENSIONS.height}px"
-	style:width={resizable.current ? `${resizable.current.width}px` : undefined}
-	style:height={resizable.current ? `${resizable.current.height}px` : undefined}
-	use:draggable={{
-		bounds: 'body',
-		handle: dragElement,
-	}}
-	{...rest}
+<FloatingPanel
+	isOpen
+	defaultPosition={{ x: 10, y: 10 }}
+	defaultSize={{ width: 240, height: 400 }}
+	title="World"
+	exitable={false}
+	resizable
 >
 	<Tree
 		{rootNode}
 		{nodeMap}
-		bind:dragElement
 		onSelectionChange={(event) => {
 			const value = event.selectedValue[0]
 
 			selectedEntity.set(value ? (Number(value) as Entity) : undefined)
 		}}
 	/>
-
-	{#if environment.current.isStandalone && partID.current && partConfig.hasEditPermissions}
-		<AddFrames />
-	{/if}
-</div>
+</FloatingPanel>

package/dist/components/overlay/left-pane/TreeContainer.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const TreeContainer: import("svelte").Component<Record<string, any>, {}, "">;
+declare const TreeContainer: import("svelte").Component<Record<string, never>, {}, "">;
 type TreeContainer = ReturnType<typeof TreeContainer>;
 export default TreeContainer;

package/dist/components/overlay/settings/Settings.svelte

@@ -1,21 +1,25 @@
 <script lang="ts">
-	import { Switch, Input } from '@viamrobotics/prime-core'
+	import { useThrelte } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import RefreshRate from '../RefreshRate.svelte'
-	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { Input, Switch } from '@viamrobotics/prime-core'
 	import { useResourceNames } from '@viamrobotics/svelte-sdk'
-	import { usePartID } from '../../../hooks/usePartID.svelte'
-	import { RefreshRates, useMachineSettings } from '../../../hooks/useMachineSettings.svelte'
+	import { PersistedState } from 'runed'
+	import { onMount } from 'svelte'
+
+	import DashboardButton from '../dashboard/Button.svelte'
+	import XRControllerSettings from '../../xr/XRControllerSettings.svelte'
 	import { useGeometries } from '../../../hooks/useGeometries.svelte'
+	import { RefreshRates, useMachineSettings } from '../../../hooks/useMachineSettings.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
 	import { usePointClouds } from '../../../hooks/usePointclouds.svelte'
-	import { useThrelte } from '@threlte/core'
 	import { useRefetchPoses } from '../../../hooks/useRefetchPoses'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
+	import { useWeblabs, WEBLABS_EXPERIMENTS } from '../../../hooks/useWeblabs.svelte'
+
 	import FloatingPanel from '../FloatingPanel.svelte'
-	import DashboardButton from '../dashboard/Button.svelte'
-	import Tabs from './Tabs.svelte'
-	import { PersistedState } from 'runed'
+	import RefreshRate from '../RefreshRate.svelte'
 	import ToggleGroup from '../ToggleGroup.svelte'
-	import XRControllerSettings from '../../xr/XRControllerSettings.svelte'
+	import Tabs from './Tabs.svelte'
 
 	const { invalidate } = useThrelte()
 	const partID = usePartID()
@@ -26,6 +30,12 @@
 	const geometries = useGeometries()
 	const pointclouds = usePointClouds()
 	const { refetchPoses } = useRefetchPoses()
+	const weblabs = useWeblabs()
+	const knownWeblabs = Object.keys(WEBLABS_EXPERIMENTS)
+
+	onMount(() => {
+		weblabs.load(knownWeblabs)
+	})
 
 	// Invalidate the renderer for any settings change
 	$effect(() => {
@@ -269,6 +279,22 @@
 	</div>
 {/snippet}
 
+{#snippet Weblabs()}
+	<div class="flex flex-col gap-1 text-xs">
+		{#each knownWeblabs as experiment (experiment)}
+			<label class="flex items-center justify-between gap-2 py-0.5">
+				{experiment}
+				<Switch
+					on={weblabs.isActive(experiment)}
+					on:change={() => weblabs.toggle(experiment)}
+				/>
+			</label>
+		{:else}
+			No weblabs defined
+		{/each}
+	</div>
+{/snippet}
+
 {#snippet Widgets()}
 	<div class="text-gray-9 flex flex-col gap-1 text-xs">
 		<label class="flex items-center justify-between gap-2 py-1">
@@ -319,6 +345,7 @@
 			{ label: 'Vision', content: Vision },
 			{ label: 'Widgets', content: Widgets },
 			{ label: 'Stats', content: Stats },
+			{ label: 'Weblabs', content: Weblabs },
 			...('xr' in navigator ? [{ label: 'VR / AR', content: XR }] : []),
 		]}
 		onValueChange={(value) => {

package/dist/components/overlay/settings/Tabs.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte'
+
+	import { normalizeProps, useMachine } from '@zag-js/svelte'
 	import * as tabs from '@zag-js/tabs'
-	import { useMachine, normalizeProps } from '@zag-js/svelte'
 
 	interface Props {
 		defaultTab?: string

package/dist/components/overlay/widgets/ArmPositions.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
-	import { formatNumeric } from '../../../format'
+	import { Icon, Label, Select } from '@viamrobotics/prime-core'
+
 	import Table from '../Table.svelte'
+	import { formatNumeric } from '../../../format'
 	import { useArmClient } from '../../../hooks/useArmClient.svelte'
-	import { Icon, Label, Select } from '@viamrobotics/prime-core'
 
 	const { ...rest } = $props()
 

package/dist/components/overlay/widgets/Camera.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { draggable } from '@neodrag/svelte'
 	import { Icon, Select } from '@viamrobotics/prime-core'
-	import { CameraStream, useRobotClient, useConnectionStatus } from '@viamrobotics/svelte-sdk'
-	import { StreamClient, MachineConnectionEvent } from '@viamrobotics/sdk'
-	import { useSettings } from '../../../hooks/useSettings.svelte'
-	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { MachineConnectionEvent, StreamClient } from '@viamrobotics/sdk'
+	import { CameraStream, useConnectionStatus, useRobotClient } from '@viamrobotics/svelte-sdk'
+
 	import { useEnvironment } from '../../../hooks/useEnvironment.svelte'
+	import { usePartID } from '../../../hooks/usePartID.svelte'
+	import { useSettings } from '../../../hooks/useSettings.svelte'
 
 	interface Resolution {
 		width: number
@@ -115,7 +116,7 @@
 </script>
 
 <div
-	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 flex resize-x flex-col overflow-hidden border text-xs"
+	class="bg-extralight border-medium absolute top-0 left-0 z-4 m-2 flex resize-x flex-col overflow-hidden border text-xs dark:text-black"
 	style:width="320px"
 	style:height="auto !important"
 	use:draggable={{

package/dist/components/weblab/WeblabActive.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { useWeblabs } from '../../hooks/useWeblabs.svelte'
 	import type { Snippet } from 'svelte'
 
+	import { useWeblabs } from '../../hooks/useWeblabs.svelte'
+
 	interface Props {
 		experiment: string
 		renderIfActive?: boolean

package/dist/components/xr/ArmTeleop.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
-	import { useTask, T } from '@threlte/core'
+	import { T, useTask } from '@threlte/core'
 	import { useController, useXR, type XRController } from '@threlte/xr'
-	import { Vector3, Quaternion } from 'three'
-	import { createResourceClient } from '@viamrobotics/svelte-sdk'
 	import { ArmClient, GripperClient } from '@viamrobotics/sdk'
 	import * as VIAM from '@viamrobotics/sdk'
-	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { createResourceClient } from '@viamrobotics/svelte-sdk'
+	import { Quaternion, Vector3 } from 'three'
+
 	import {
-		getFrameTransformationQuaternion,
 		calculatePositionTarget,
+		getFrameTransformationQuaternion,
 	} from './math'
-	import { OrientationVector } from '../../three/OrientationVector'
 	import { xrToast } from './toasts.svelte'
+	import { usePartID } from '../../hooks/usePartID.svelte'
+	import { OrientationVector } from '../../three/OrientationVector'
 
 	interface Props {
 		armName: string

package/dist/components/xr/BentPlaneGeometry.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { Vector2, PlaneGeometry } from 'three'
-	import { T } from '@threlte/core'
 	import type { BufferAttribute } from 'three'
 
+	import { T } from '@threlte/core'
+	import { PlaneGeometry, Vector2 } from 'three'
+
 	export let args: [
 		radius: number,
 		width?: number | undefined,