@viamrobotics/motion-tools 1.13.1 → 1.15.0

package/dist/FrameConfigUpdater.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Entity } from 'koota';
 import type { Pose } from '@viamrobotics/sdk';
-import type { Frame } from './frame';
+import type { Entity } from 'koota';
 import type { Vector3Like } from 'three';
+import type { Frame } from './frame';
 type UpdateFrameCallback = {
     (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']): void;
 };

package/dist/HoverUpdater.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Entity } from 'koota';
 import type { IntersectionEvent } from '@threlte/extras';
+import type { Entity } from 'koota';
 export interface HoverInfo {
     index: number;
     x: number;

package/dist/attribute.js

@@ -1,9 +1,16 @@
-import { BufferGeometry, BufferAttribute } from 'three';
+import { BufferAttribute, BufferGeometry } from 'three';
+import { STRIDE } from './buffer';
+const colorStride = (colors, positions) => {
+    const numVertices = positions.length / STRIDE.POSITIONS;
+    const stride = colors.length / numVertices;
+    return stride === STRIDE.COLORS_RGBA ? STRIDE.COLORS_RGBA : STRIDE.COLORS_RGB;
+};
 export const createBufferGeometry = (positions, colors) => {
     const geometry = new BufferGeometry();
     geometry.setAttribute('position', new BufferAttribute(positions, 3));
     if (colors) {
-        geometry.setAttribute('color', new BufferAttribute(colors, 3, true));
+        const stride = colorStride(colors, positions);
+        geometry.setAttribute('color', new BufferAttribute(colors, stride, true));
     }
     return geometry;
 };
@@ -24,7 +31,8 @@ export const updateBufferGeometry = (geometry, positions, colors) => {
             colorAttr.needsUpdate = true;
         }
         else {
-            geometry.setAttribute('color', new BufferAttribute(colors, 3, true));
+            const stride = colorStride(colors, positions);
+            geometry.setAttribute('color', new BufferAttribute(colors, stride, true));
         }
     }
 };

package/dist/buffer.d.ts

@@ -4,6 +4,7 @@
  * Proto messages pack float32 data as `Uint8Array` (bytes fields). These utilities
  * provide efficient conversion to `Float32Array` for Three.js BufferAttributes.
  */
+import { Color } from 'three';
 /**
  * Stride constants for proto binary data formats.
  * Each value represents the number of float32 elements per item.
@@ -37,16 +38,64 @@ export declare const STRIDE: {
  */
 export declare const asFloat32Array: (bytes: Uint8Array<ArrayBuffer>) => Float32Array<ArrayBuffer>;
 /**
- * Converts uint8 RGBA colors to normalized float32 colors (0-1 range).
- * Three.js expects colors in 0-1 range for BufferAttributes.
+ * Sets a Three.js Color from 3 bytes of a uint8 color array starting at `offset`.
+ * Mutates and returns `target` — pass a pre-allocated Color to avoid allocations
+ * in hot paths.
  *
- * @param colors - Uint8Array of RGBA color data [r, g, b, a, ...]
- * @returns Float32Array with normalized color values
+ * @param bytes - Uint8Array with at least `offset + 3` elements [r, g, b, ...]
+ * @param target - Color instance to write into
+ * @param offset - Byte offset to start reading from (default 0)
+ * @returns The mutated `target`, or black if the array has fewer than `offset + 3` elements
  *
  * @example
  * ```ts
- * const colors = normalizeColorsRGBA(metadata.colors)
- * geometry.setAttribute('color', new BufferAttribute(colors, 4))
+ * asColor(colors.current, material.color)
+ * asColor(colors.current, pointColorUtil, stride) // read second color
  * ```
  */
-export declare const normalizeColorsRGBA: (colors: Float32Array) => Float32Array;
+export declare const asColor: (bytes: Uint8Array<ArrayBuffer>, target: Color, offset?: number) => Color;
+/**
+ * Creates a Uint8Array from a Three.js Color.
+ *
+ * @param color - The Three.js Color to convert
+ * @returns A Uint8Array with the RGBA values
+ *
+ * @example
+ * ```ts
+ * const color = fromColor(new Color(0, 1, 0))
+ * ```
+ */
+export declare const fromColor: (color: Color) => Uint8Array<ArrayBuffer>;
+/**
+ * Reads a byte from a uint8 color array at `offset` and normalizes it to 0-1.
+ * Returns `fallback` when the array has fewer than `offset + 1` elements.
+ *
+ * @param bytes - ArrayLike of uint8 color values
+ * @param fallback - Value to return when no alpha byte is present (default 1)
+ * @param offset - Byte index to read from (default 3, the alpha channel of the first color)
+ * @returns Normalized opacity in 0-1 range, or the fallback value
+ *
+ * @example
+ * ```ts
+ * material.opacity = asOpacity(colors.current)
+ * material.opacity = asOpacity(colors.current, 1, stride + 3) // alpha of second color
+ * ```
+ */
+export declare const asOpacity: (bytes: Uint8Array<ArrayBuffer>, fallback?: number, offset?: number) => number;
+/**
+ * Returns true when `colors` contains exactly one color entry per point (RGB or RGBA).
+ * Use this to distinguish per-vertex color buffers from a single uniform color.
+ *
+ * @param colors - Uint8Array of packed color bytes
+ * @param numVertex - Number of points/vertices the color buffer should cover
+ *
+ * @example
+ * ```ts
+ * if (isPerVertexColors(colors, positions.length / STRIDE.POSITIONS)) {
+ *   // treat as per-vertex
+ * } else {
+ *   addColorTraits(entityTraits, colors)
+ * }
+ * ```
+ */
+export declare const isPerVertexColors: (colors: Uint8Array<ArrayBuffer>, numVertex: number) => boolean;

package/dist/buffer.js

@@ -4,6 +4,7 @@
  * Proto messages pack float32 data as `Uint8Array` (bytes fields). These utilities
  * provide efficient conversion to `Float32Array` for Three.js BufferAttributes.
  */
+import { Color } from 'three';
 /**
  * Stride constants for proto binary data formats.
  * Each value represents the number of float32 elements per item.
@@ -50,22 +51,79 @@ export const asFloat32Array = (bytes) => {
     return aligned;
 };
 /**
- * Converts uint8 RGBA colors to normalized float32 colors (0-1 range).
- * Three.js expects colors in 0-1 range for BufferAttributes.
+ * Sets a Three.js Color from 3 bytes of a uint8 color array starting at `offset`.
+ * Mutates and returns `target` — pass a pre-allocated Color to avoid allocations
+ * in hot paths.
  *
- * @param colors - Uint8Array of RGBA color data [r, g, b, a, ...]
- * @returns Float32Array with normalized color values
+ * @param bytes - Uint8Array with at least `offset + 3` elements [r, g, b, ...]
+ * @param target - Color instance to write into
+ * @param offset - Byte offset to start reading from (default 0)
+ * @returns The mutated `target`, or black if the array has fewer than `offset + 3` elements
  *
  * @example
  * ```ts
- * const colors = normalizeColorsRGBA(metadata.colors)
- * geometry.setAttribute('color', new BufferAttribute(colors, 4))
+ * asColor(colors.current, material.color)
+ * asColor(colors.current, pointColorUtil, stride) // read second color
  * ```
  */
-export const normalizeColorsRGBA = (colors) => {
-    const normalized = new Float32Array(colors.length);
-    for (let i = 0; i < colors.length; i++) {
-        normalized[i] = colors[i] / 255;
-    }
-    return normalized;
+export const asColor = (bytes, target, offset = 0) => {
+    if (bytes.length < offset + 3)
+        return target.setRGB(0, 0, 0);
+    return target.setRGB(bytes[offset] / 255, bytes[offset + 1] / 255, bytes[offset + 2] / 255);
+};
+/**
+ * Creates a Uint8Array from a Three.js Color.
+ *
+ * @param color - The Three.js Color to convert
+ * @returns A Uint8Array with the RGBA values
+ *
+ * @example
+ * ```ts
+ * const color = fromColor(new Color(0, 1, 0))
+ * ```
+ */
+export const fromColor = (color) => {
+    return new Uint8Array([
+        Math.round(color.r * 255),
+        Math.round(color.g * 255),
+        Math.round(color.b * 255),
+    ]);
+};
+/**
+ * Reads a byte from a uint8 color array at `offset` and normalizes it to 0-1.
+ * Returns `fallback` when the array has fewer than `offset + 1` elements.
+ *
+ * @param bytes - ArrayLike of uint8 color values
+ * @param fallback - Value to return when no alpha byte is present (default 1)
+ * @param offset - Byte index to read from (default 3, the alpha channel of the first color)
+ * @returns Normalized opacity in 0-1 range, or the fallback value
+ *
+ * @example
+ * ```ts
+ * material.opacity = asOpacity(colors.current)
+ * material.opacity = asOpacity(colors.current, 1, stride + 3) // alpha of second color
+ * ```
+ */
+export const asOpacity = (bytes, fallback = 1, offset = 3) => {
+    if (bytes.length < offset + 1)
+        return fallback;
+    return bytes[offset] / 255;
 };
+/**
+ * Returns true when `colors` contains exactly one color entry per point (RGB or RGBA).
+ * Use this to distinguish per-vertex color buffers from a single uniform color.
+ *
+ * @param colors - Uint8Array of packed color bytes
+ * @param numVertex - Number of points/vertices the color buffer should cover
+ *
+ * @example
+ * ```ts
+ * if (isPerVertexColors(colors, positions.length / STRIDE.POSITIONS)) {
+ *   // treat as per-vertex
+ * } else {
+ *   addColorTraits(entityTraits, colors)
+ * }
+ * ```
+ */
+export const isPerVertexColors = (colors, numVertex) => colors.length === numVertex * STRIDE.COLORS_RGB ||
+    colors.length === numVertex * STRIDE.COLORS_RGBA;

package/dist/color.d.ts

@@ -1,5 +1,5 @@
-import { Color, type ColorRepresentation, type RGB } from 'three';
 import { ResourceName } from '@viamrobotics/sdk';
+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.

package/dist/color.js

@@ -1,6 +1,6 @@
-import { Color } from 'three';
-import twColors from 'tailwindcss/colors';
 import { ResourceName } from '@viamrobotics/sdk';
+import twColors from 'tailwindcss/colors';
+import { Color } from 'three';
 // 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;

package/dist/components/App.svelte

@@ -1,36 +1,40 @@
 <script lang="ts">
+	import type { Struct } from '@viamrobotics/sdk'
 	import type { Snippet } from 'svelte'
+
+	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
 	import { Canvas } from '@threlte/core'
 	import { PortalTarget } from '@threlte/extras'
-	import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools'
+	import { useXR } from '@threlte/xr'
 	import { provideToast, ToastContainer } from '@viamrobotics/prime-core'
-	import type { Struct } from '@viamrobotics/sdk'
-	import Scene from './Scene.svelte'
-	import TreeContainer from './overlay/left-pane/TreeContainer.svelte'
+
+	import type { CameraPose } from '../hooks/useControls.svelte'
+
+	import Dashboard from './overlay/dashboard/Dashboard.svelte'
 	import Details from './overlay/Details.svelte'
-	import SceneProviders from './SceneProviders.svelte'
+	import TreeContainer from './overlay/left-pane/TreeContainer.svelte'
+	import Settings from './overlay/settings/Settings.svelte'
 	import XR from './xr/XR.svelte'
-	import { createPartIDContext } from '../hooks/usePartID.svelte'
-	import Dashboard from './overlay/dashboard/Dashboard.svelte'
-	import { domPortal } from '../portal'
-	import { provideSettings } from '../hooks/useSettings.svelte'
-	import FileDrop from './FileDrop/FileDrop.svelte'
-	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
-	import { providePartConfig } from '../hooks/usePartConfig.svelte'
-	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
-	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
-	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
-	import type { CameraPose } from '../hooks/useControls.svelte'
 	import { provideWorld } from '../ecs'
 	import {
-		provideDrawConnectionConfig,
 		type DrawConnectionConfig,
+		provideDrawConnectionConfig,
 	} from '../hooks/useDrawConnectionConfig.svelte'
-	import Camera from './overlay/widgets/Camera.svelte'
+	import { provideEnvironment } from '../hooks/useEnvironment.svelte'
+	import { providePartConfig } from '../hooks/usePartConfig.svelte'
+	import { createPartIDContext } from '../hooks/usePartID.svelte'
+	import { provideSettings } from '../hooks/useSettings.svelte'
+	import { provideWeblabs } from '../hooks/useWeblabs.svelte'
+	import { domPortal } from '../portal'
+
+	import FileDrop from './FileDrop/FileDrop.svelte'
 	import HoveredEntities from './hover/HoveredEntities.svelte'
-	import Settings from './overlay/settings/Settings.svelte'
-	import { useXR } from '@threlte/xr'
+	import LiveUpdatesBanner from './overlay/LiveUpdatesBanner.svelte'
 	import Logs from './overlay/Logs.svelte'
+	import ArmPositions from './overlay/widgets/ArmPositions.svelte'
+	import Camera from './overlay/widgets/Camera.svelte'
+	import Scene from './Scene.svelte'
+	import SceneProviders from './SceneProviders.svelte'
 
 	interface LocalConfigProps {
 		current: Struct
@@ -96,7 +100,7 @@
 {/if}
 
 <div
-	class="relative h-full w-full overflow-hidden"
+	class="relative h-full w-full overflow-hidden dark:bg-white"
 	bind:this={root}
 >
 	<Canvas renderMode="on-demand">

package/dist/components/App.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from 'svelte';
 import type { Struct } from '@viamrobotics/sdk';
+import type { Snippet } from 'svelte';
 import type { CameraPose } from '../hooks/useControls.svelte';
 import { type DrawConnectionConfig } from '../hooks/useDrawConnectionConfig.svelte';
 interface LocalConfigProps {

package/dist/components/BatchedArrows.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
+	import type { Entity } from 'koota'
+
 	import { T } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import { BatchedArrow } from '../three/BatchedArrow'
-	import { traits, useWorld } from '../ecs'
-	import type { Entity } from 'koota'
 	import { Color, Vector3 } from 'three'
 
+	import { traits, useWorld } from '../ecs'
+	import { BatchedArrow } from '../three/BatchedArrow'
+
 	const arrowBatchMap = $state<Record<string, BatchedArrow>>({
 		world: new BatchedArrow(),
 	})

package/dist/components/Camera.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { T } from '@threlte/core'
+
 	import { useSettings } from '../hooks/useSettings.svelte'
 
 	let { children, ...rest } = $props()

package/dist/components/CameraControls.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-	import { MathUtils } from 'three'
 	import { CameraControls, type CameraControlsRef, Gizmo, Portal } from '@threlte/extras'
-	import { useCameraControls, useTransformControls } from '../hooks/useControls.svelte'
-	import KeyboardControls from './KeyboardControls.svelte'
+	import { MathUtils } from 'three'
+
 	import Button from './overlay/dashboard/Button.svelte'
+	import { useCameraControls, useTransformControls } from '../hooks/useControls.svelte'
 	import { useSettings } from '../hooks/useSettings.svelte'
 
+	import KeyboardControls from './KeyboardControls.svelte'
+
 	const cameraControls = useCameraControls()
 	const settings = useSettings()
 	const transformControls = useTransformControls()

package/dist/components/Entities/Arrows/ArrowGroups.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { InstancedArrows } from '../../../three/InstancedArrows/InstancedArrows'
-	import { traits, useWorld } from '../../../ecs'
 	import type { Entity } from 'koota'
-	import { STRIDE } from '../../../buffer'
+
 	import { SvelteMap } from 'svelte/reactivity'
 	import { Color } from 'three'
+
+	import { STRIDE } from '../../../buffer'
+	import { traits, useWorld } from '../../../ecs'
+	import { InstancedArrows } from '../../../three/InstancedArrows/InstancedArrows'
+
 	import Arrows from './Arrows.svelte'
 
 	const world = useWorld()

package/dist/components/Entities/Arrows/Arrows.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
+	import type { Entity } from 'koota'
+
 	import { T } from '@threlte/core'
 	import { Portal } from '@threlte/extras'
-	import type { Entity } from 'koota'
-	import { traits } from '../../../ecs'
-	import { useEntityEvents } from '../hooks/useEntityEvents.svelte'
+
 	import type { InstancedArrows } from '../../../three/InstancedArrows/InstancedArrows'
+
+	import { useEntityEvents } from '../hooks/useEntityEvents.svelte'
+	import { traits } from '../../../ecs'
 	import { useFocusedEntity, useSelectedEntity } from '../../../hooks/useSelection.svelte'
 	import { meshBoundsRaycast, raycast } from '../../../three/InstancedArrows/raycast'
 

package/dist/components/Entities/Entities.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-	import Pose from './Pose.svelte'
+	import { Not, Or } from 'koota'
+
+	import { traits, useQuery } from '../../ecs'
+
+	import Arrows from './Arrows/ArrowGroups.svelte'
 	import Frame from './Frame.svelte'
+	import Geometry from './Geometry.svelte'
 	import GLTF from './GLTF.svelte'
 	import Label from './Label.svelte'
 	import Line from './Line.svelte'
 	import Points from './Points.svelte'
-	import Arrows from './Arrows/ArrowGroups.svelte'
-
-	import { traits, useQuery } from '../../ecs'
-	import { Not, Or } from 'koota'
+	import Pose from './Pose.svelte'
 
 	/**
 	 * Frames from a live machine are bucketed into their own query
@@ -62,9 +64,9 @@
 {/each}
 
 {#each resourceGeometriesEntities.current as entity (entity)}
-	<Frame {entity}>
+	<Geometry {entity}>
 		<Label text={entity.get(traits.Name)} />
-	</Frame>
+	</Geometry>
 {/each}
 
 {#each worldStateEntities.current as entity (entity)}

package/dist/components/Entities/Frame.svelte

@@ -1,17 +1,30 @@
+<!--
+@component
+
+Renders a Viam Frame object
+-->
+<script module>
+	import { Color } from 'three'
+
+	const colorUtil = new Color()
+</script>
+
 <script lang="ts">
-	import type { Snippet } from 'svelte'
-	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
-	import { Color, Group, type Object3D } from 'three'
-	import Geometry from './Geometry.svelte'
-	import { useSelectedEntity } from '../../hooks/useSelection.svelte'
-	import { useSettings } from '../../hooks/useSettings.svelte'
-	import { use3DModels } from '../../hooks/use3DModels.svelte'
-	import { colors, darkenColor, resourceColors } from '../../color'
+	import type { Pose } from '@viamrobotics/sdk'
 	import type { Entity } from 'koota'
+	import type { Snippet } from 'svelte'
+
+	import { T, useThrelte } from '@threlte/core'
+	import { Portal, PortalTarget } from '@threlte/extras'
+	import { Group, type Object3D } from 'three'
+
+	import { colors, resourceColors } from '../../color'
 	import { traits, useTrait } from '../../ecs'
-	import type { Pose } from '@viamrobotics/sdk'
 	import { useResourceByName } from '../../hooks/useResourceByName.svelte'
-	import { Portal, PortalTarget } from '@threlte/extras'
+	import { poseToObject3d } from '../../transform'
+
+	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
+	import Mesh from './Mesh.svelte'
 
 	interface Props {
 		entity: Entity
@@ -21,69 +34,56 @@
 
 	let { entity, pose, children }: Props = $props()
 
-	let ref = $state<Group>()
-
-	const colorUtil = new Color()
-
-	const settings = useSettings()
-	const componentModels = use3DModels()
-	const selectedEntity = useSelectedEntity()
+	const { invalidate } = useThrelte()
 	const resourceByName = useResourceByName()
 
 	const name = useTrait(() => entity, traits.Name)
 	const parent = useTrait(() => entity, traits.Parent)
 	const entityColor = useTrait(() => entity, traits.Color)
+	const entityPose = useTrait(() => entity, traits.Pose)
+	const center = useTrait(() => entity, traits.Center)
 
 	const events = useEntityEvents(() => entity)
-	const resourceColor = $derived.by(() => {
-		if (!name.current) {
-			return undefined
-		}
-		const subtype = resourceByName.current[name.current]?.subtype
-		return resourceColors[subtype as keyof typeof resourceColors]
-	})
 
 	const color = $derived.by(() => {
 		if (entityColor.current) {
-			return colorUtil.set(entityColor.current.r, entityColor.current.g, entityColor.current.b)
+			return `#${colorUtil.set(entityColor.current.r, entityColor.current.g, entityColor.current.b).getHexString()}`
 		}
+
+		const subtype = resourceByName.current[name.current ?? '']?.subtype
+		const resourceColor = resourceColors[subtype as keyof typeof resourceColors]
+
 		if (resourceColor) {
 			return resourceColor
 		}
+
 		return colors.default
 	})
 
-	const model = $derived.by(() => {
-		if (!name.current) {
-			return
-		}
+	const group = new Group()
 
-		const [componentName, id] = name.current.split(':')
-		if (!componentName || !id) {
-			return
+	const resolvedPose = $derived(pose ?? entityPose.current)
+	$effect.pre(() => {
+		if (resolvedPose) {
+			poseToObject3d(resolvedPose, group)
+			invalidate()
 		}
-		return componentModels.current?.[componentName]?.[id].clone()
 	})
 </script>
 
 <Portal id={parent.current}>
-	<Geometry
-		bind:ref
-		{entity}
-		{model}
-		{pose}
-		renderMode={settings.current.renderArmModels}
-		color={selectedEntity.current === entity
-			? `#${darkenColor(color, 75).getHexString()}`
-			: `#${colorUtil.set(color).getHexString()}`}
-		{...events}
-	>
+	<T is={group}>
+		<Mesh
+			{entity}
+			{color}
+			{...events}
+			center={center.current}
+		/>
+
 		{#if name.current}
 			<PortalTarget id={name.current} />
 		{/if}
 
-		{#if ref}
-			{@render children?.({ ref })}
-		{/if}
-	</Geometry>
+		{@render children?.({ ref: group })}
+	</T>
 </Portal>

package/dist/components/Entities/Frame.svelte.d.ts

@@ -1,7 +1,7 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
 import { type Object3D } from 'three';
-import type { Entity } from 'koota';
-import type { Pose } from '@viamrobotics/sdk';
 interface Props {
     entity: Entity;
     pose?: Pose;
@@ -9,6 +9,7 @@ interface Props {
         ref: Object3D;
     }]>;
 }
+/** Renders a Viam Frame object */
 declare const Frame: import("svelte").Component<Props, {}, "">;
 type Frame = ReturnType<typeof Frame>;
 export default Frame;

package/dist/components/Entities/GLTF.svelte

@@ -2,7 +2,7 @@
 	module
 	lang="ts"
 >
-	import { GLTFLoader, DRACOLoader } from 'three/examples/jsm/Addons.js'
+	import { DRACOLoader, GLTFLoader } from 'three/examples/jsm/Addons.js'
 
 	const dracoLoader = new DRACOLoader()
 	const gltfLoader = new GLTFLoader()
@@ -12,15 +12,18 @@
 </script>
 
 <script lang="ts">
-	import { T, type Props as ThrelteProps } from '@threlte/core'
-	import { Portal, PortalTarget, useGltfAnimations, type ThrelteGltf } from '@threlte/extras'
+	import type { Entity } from 'koota'
 	import type { Snippet } from 'svelte'
+
+	import { T, type Props as ThrelteProps } from '@threlte/core'
+	import { Portal, PortalTarget, type ThrelteGltf, useGltfAnimations } from '@threlte/extras'
 	import { Group, type Object3D } from 'three'
-	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
-	import type { Entity } from 'koota'
+
 	import { traits, useTrait } from '../../ecs'
 	import { poseToObject3d } from '../../transform'
 
+	import { useEntityEvents } from './hooks/useEntityEvents.svelte'
+
 	interface Props extends ThrelteProps<Object3D> {
 		entity: Entity
 		children?: Snippet

package/dist/components/Entities/GLTF.svelte.d.ts

@@ -1,7 +1,7 @@
-import { type Props as ThrelteProps } from '@threlte/core';
+import type { Entity } from 'koota';
 import type { Snippet } from 'svelte';
+import { type Props as ThrelteProps } from '@threlte/core';
 import { type Object3D } from 'three';
-import type { Entity } from 'koota';
 interface Props extends ThrelteProps<Object3D> {
     entity: Entity;
     children?: Snippet;