@viamrobotics/test-widgets 0.0.1

package/dist/components/refetch-interval-store.svelte.js

@@ -0,0 +1,37 @@
+import { PersistedState } from 'runed';
+export const RefetchRates = {
+    LIVE: 'Live',
+    ONE_SEC: 'Refresh every second',
+    FIVE_SEC: 'Refresh every 5 seconds',
+    MANUAL: 'Manual refresh',
+};
+export const RefetchIntervals = {
+    LIVE: 33.3333,
+    ONE_SEC: 1000,
+    FIVE_SEC: 5000,
+    MANUAL: false,
+};
+export const RefetchRateToInterval = Object.entries(RefetchRates).map(([rateKey, rate]) => [
+    rate,
+    RefetchIntervals[rateKey],
+]);
+// create a persisted store for the specified partID + resourceName +
+// scope. Scope is useful to differentiate multiple refresh rates per card
+export const createRefetchIntervalStore = (partID, resourceName, scope, defaultInterval = RefetchIntervals.ONE_SEC) => {
+    const key = $derived(`control-card-refresh/${partID()}/${resourceName()}/${scope}`);
+    const persisted = $derived(new PersistedState(key, defaultInterval));
+    $effect(() => {
+        // Reset to default if the stored option is not a valid interval
+        if (!Object.values(RefetchIntervals).includes(persisted.current)) {
+            persisted.current = defaultInterval;
+        }
+    });
+    return {
+        get current() {
+            return persisted.current;
+        },
+        set current(value) {
+            persisted.current = value;
+        },
+    };
+};

package/dist/components/resource-icon.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Icon } from '@viamrobotics/prime-core'
+
+	interface Props {
+		type: string
+	}
+
+	const { type }: Props = $props()
+
+	const getIconName = (resourceType: string) => {
+		if (resourceType === 'component') {
+			return 'viam-component' as const
+		}
+
+		return resourceType === 'service' ? ('viam-service' as const) : undefined
+	}
+
+	const iconName = $derived(getIconName(type))
+</script>
+
+<!-- 'check' is just a placeholder when there's not an iconName -->
+<Icon
+	name={iconName ?? 'check'}
+	cx={[
+		'shrink-0',
+		'text-gray-6',
+		{
+			'opacity-0': !iconName,
+		},
+	]}
+/>

package/dist/components/resource-icon.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    type: string;
+}
+declare const ResourceIcon: import("svelte").Component<Props, {}, "">;
+type ResourceIcon = ReturnType<typeof ResourceIcon>;
+export default ResourceIcon;

package/dist/components/section-group.svelte

@@ -0,0 +1,64 @@
+<!--
+@component
+
+A group of sections in a card. For example, "test" or "do command"
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	import { Icon } from '@viamrobotics/prime-core'
+	import { slide } from 'svelte/transition'
+
+	interface Props {
+		/** Title for the group. */
+		title: string
+		/** Collapsed state. */
+		isCollapsed: boolean
+		/** Toggle collapsed state. */
+		toggleIsCollapsed: () => void
+		children?: Snippet
+	}
+
+	const { title, isCollapsed, toggleIsCollapsed, children }: Props = $props()
+
+	const id = $props.id()
+	const collapseID = `section-group-collapse-${id}`
+	const headingID = `section-group-heading-${id}`
+</script>
+
+<section
+	class="flex flex-col"
+	aria-labelledby={headingID}
+>
+	<header class={['border-gray-3 bg-light hover:bg-medium h-7', !isCollapsed && 'border-b']}>
+		<button
+			class="group flex h-full w-full flex-row items-center gap-2 px-[11px]"
+			aria-controls={collapseID}
+			aria-expanded={!isCollapsed}
+			aria-label={`${isCollapsed ? 'expand' : 'collapse'} ${title}`}
+			onclick={toggleIsCollapsed}
+		>
+			<Icon
+				name={isCollapsed ? 'unfold-more-horizontal' : 'unfold-less-horizontal'}
+				cx="group-hover:text-gray-7 text-[#AEAEB5]"
+			/>
+
+			<h2
+				id={headingID}
+				class="font-roboto-mono text-subtle-2 m-0 text-left text-xs tracking-[0.06em] uppercase"
+			>
+				{title}
+			</h2>
+		</button>
+	</header>
+	{#if !isCollapsed}
+		<div
+			id={collapseID}
+			role="region"
+			class="divide-y"
+			transition:slide={{ duration: 150 }}
+		>
+			{@render children?.()}
+		</div>
+	{/if}
+</section>

package/dist/components/section-group.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Title for the group. */
+    title: string;
+    /** Collapsed state. */
+    isCollapsed: boolean;
+    /** Toggle collapsed state. */
+    toggleIsCollapsed: () => void;
+    children?: Snippet;
+}
+/** A group of sections in a card. For example, "test" or "do command" */
+declare const SectionGroup: import("svelte").Component<Props, {}, "">;
+type SectionGroup = ReturnType<typeof SectionGroup>;
+export default SectionGroup;

package/dist/components/slam/map2d/base-marker.txt

@@ -0,0 +1 @@
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAABfVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////w/VAaAAAAfnRSTlMAAQIDBAUGBwgJCgsMDQ4QEhQVFhcYGRodHyIlKCstLjAxMzQ1ODs8QUJESElNTk9VVltcXmJjZmlqb3B2d3x9gIOEiYqQkZaXmZ2eoqSlqaqrrLGys7e4vr/ExcjLztDS09XW19rb3eDi5efp6+3u7/Dx8/X29/j5+vv8/f5jKYBhAAAAAWJLR0R+P7hBcwAAAlVJREFUGBntwWlTUlEABuAXkczMPVNTo9IE0xQr9wW1RHNDE9fSjMyNTHNLRd7fHsMwBnKBc+49Z6YPPA9ycnKkOZ3Qa3ICWhWfnJZApz6yFzptkUFo5GJUM/SZY9QstCm/YNRlJXQZYswgNLHtMGY3D3q0Ma4VegQYtwgtasKMC9dChzHeGoUGjgPeCjmgXicTeKDeGhOsQrn6CBM1QDUfk4xDscIjJjkuglrdvKMLam3wjk0o1cQUjVBpmimmoFDpGVOcl0GdARrohzpBGti2QZUWGnJDlQUamociVVc0dF0NNbxMYxhK2PeYxr4dKnQwrXaosMK0lqHAkxumFamDdR+YwXtYVvCTGRzeh1VvmdEbWPWZGa3DIiezeA5rJpnFBCwpPmEWpyWwoo9Z9cKKLWYVhAUuCmiGeXMUMAvTyi8o4LISZg1RyCBMsu1QyG4ezGmjoFaYE6CgRZhSE6agcC3MGKOwUZjgOKCwkAPyOinBA3lrlLAKafURymiALB+ljENS4RGlHBdBTjcldUHOBiVtQkoTpTVCxjSlTUFC6RmlnZdB3ACN3Sy5Xsxc0Vg/xAVp5MRXi6jHI79oZNsGUS00sDtUiriHPd9pwA1RC0yx7rEjQd6rpQjvmoegqismu5x/iRTPPl4w2XU1xHiZ5LevBoYejRwyyTCE2PeY4Ef/A6RV8O4bE+zbIaKD/6y/tiEz11KEt9ohYoVxf2aeQkCd74xxyxDhZ0zIWwFBFd4QY/wQYZ8j+bWnEBLueb6Q/OSAkHx/wA1p7oA/Hzk5OTn/p7/SQudi6Kx0wAAAAABJRU5ErkJggg==

package/dist/components/slam/map2d/color-map.d.ts

@@ -0,0 +1,2 @@
+import { type BufferAttribute } from 'three';
+export declare const mapColorAttributeGrayscale: (colors: BufferAttribute) => void;

package/dist/components/slam/map2d/color-map.js

@@ -0,0 +1,55 @@
+import { theme } from '@viamrobotics/prime-core/theme';
+import { Color, Vector3 } from 'three';
+/*
+ * this color map is greyscale. The color map is being used map probability values of a PCD
+ * into different color buckets provided by the color map.
+ * generated with: https://grayscale.design/app
+ */
+const colorMapGrey = [
+    [240, 240, 240],
+    [220, 220, 220],
+    [200, 200, 200],
+    [190, 190, 190],
+    [170, 170, 170],
+    [150, 150, 150],
+    [40, 40, 40],
+    [20, 20, 20],
+    [10, 10, 10],
+    [0, 0, 0],
+].map(([red, green, blue]) => new Vector3(red, green, blue).multiplyScalar(1 / 255));
+const USER_GENERATED_POINT_COLOR = new Color(theme.extend.colors.cyberpunk);
+/*
+ * Find the desired color bucket for a given probability. This assumes the probability will be a value from 0 to 100
+ * ticket to add testing: https://viam.atlassian.net/browse/RSDK-2606
+ */
+const probToColorMapBucket = (probability, numBuckets) => {
+    const prob = Math.max(Math.min(100, probability * 255), 0);
+    return Math.floor(((numBuckets - 1) * prob) / 100);
+};
+/*
+ * Map the color of a pixel to a color bucket value.
+ * probability represents the probability value normalized by the size of a byte(255) to be between 0 to 1.
+ * ticket to add testing: https://viam.atlassian.net/browse/RSDK-2606
+ */
+const colorBuckets = (probability) => {
+    const bucket = probToColorMapBucket(probability, colorMapGrey.length);
+    return colorMapGrey[bucket] ?? new Vector3();
+};
+export const mapColorAttributeGrayscale = (colors) => {
+    for (let i = 0; i < colors.count; i += 1) {
+        /*
+         * Probability is currently assumed to be held in the b part of the rgb field of the PCD map, on a scale of 0 to 100.
+         * ticket to look into this further https://viam.atlassian.net/browse/RSDK-2605.
+         *
+         * User generated points that have been added to the pcd are marked as such by putting 100% probability
+         * in the r part of the rgb field. If that has been set, we will draw the point in blue instead of mapping it to its
+         * corresponding shade of gray to signal it is a user generated point.
+         */
+        if (colors.getX(i) === 1) {
+            colors.setXYZ(i, USER_GENERATED_POINT_COLOR.r, USER_GENERATED_POINT_COLOR.g, USER_GENERATED_POINT_COLOR.b);
+            continue;
+        }
+        const colorMapPoint = colorBuckets(colors.getZ(i) * 10);
+        colors.setXYZ(i, colorMapPoint.x, colorMapPoint.y, colorMapPoint.z);
+    }
+};

package/dist/components/slam/map2d/destination-marker.txt

@@ -0,0 +1 @@
+data:image/png;base64,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

package/dist/components/slam/map2d/helpers.svelte

@@ -0,0 +1,29 @@
+<!--
+  @component
+  Helpers for orienting the user spacially within a map.
+  Contains a grid and axes, with small grid spaces placed at 1m.
+-->
+<script lang="ts">
+	import { Grid } from '@threlte/extras'
+
+	import { AxesHelper } from '../../three'
+	import { renderOrder } from './render-order'
+</script>
+
+<Grid
+	infiniteGrid
+	fadeDistance={150}
+	renderOrder={renderOrder.grid}
+	rotation.x={Math.PI / 2}
+	cellColor="#ddd"
+	sectionColor="#ccc"
+	sectionThickness={1.5}
+	position.z={-0.1}
+/>
+
+<AxesHelper length={10_000} />
+
+<AxesHelper
+	rotation.z={Math.PI}
+	length={10_000}
+/>

package/dist/components/slam/map2d/helpers.svelte.d.ts

@@ -0,0 +1,22 @@
+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;
+}
+/**
+ * Helpers for orienting the user spacially within a map.
+ * Contains a grid and axes, with small grid spaces placed at 1m.
+ */
+declare const Helpers: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Helpers = InstanceType<typeof Helpers>;
+export default Helpers;

package/dist/components/slam/map2d/hooks/use-raycast-click/index.d.ts

@@ -0,0 +1,9 @@
+import { Vector3 } from 'three';
+/**
+ * Fires when the user clicks on the canvas, and reports
+ * the intersection of a ray cast from the mouse coordinate
+ * to an infinite xy plane at z=0.
+ */
+type ClickHandler = (value: Vector3) => void;
+export declare const useRaycastClick: (onClick: ClickHandler) => void;
+export {};

package/dist/components/slam/map2d/hooks/use-raycast-click/index.js

@@ -0,0 +1,36 @@
+import { useThrelte } from '@threlte/core';
+import { onMount } from 'svelte';
+import { Plane, Raycaster, Vector2, Vector3 } from 'three';
+import { normalizeDeviceCoordinates } from './normalize-device-coordinates';
+const EPSILON = 0.001;
+export const useRaycastClick = (onClick) => {
+    const { renderer, camera } = useThrelte();
+    const canvas = renderer.domElement;
+    const raycaster = new Raycaster();
+    const pointerDown = new Vector2();
+    const pointerUp = new Vector2();
+    const plane = new Plane();
+    plane.normal.set(0, 0, -1);
+    const handleDown = (event) => {
+        normalizeDeviceCoordinates(canvas, event.clientX, event.clientY, pointerDown);
+    };
+    const handleUp = (event) => {
+        normalizeDeviceCoordinates(canvas, event.clientX, event.clientY, pointerUp);
+        const pointerMoved = pointerDown.sub(pointerUp).lengthSq() > EPSILON;
+        if (pointerMoved) {
+            return;
+        }
+        const vec3 = new Vector3();
+        raycaster.setFromCamera(pointerUp, camera.current);
+        raycaster.ray.intersectPlane(plane, vec3);
+        onClick(vec3);
+    };
+    onMount(() => {
+        canvas.addEventListener('pointerdown', handleDown);
+        canvas.addEventListener('click', handleUp);
+        return () => {
+            canvas.removeEventListener('pointerdown', handleDown);
+            canvas.removeEventListener('click', handleUp);
+        };
+    });
+};

package/dist/components/slam/map2d/hooks/use-raycast-click/normalize-device-coordinates.d.ts

@@ -0,0 +1,2 @@
+import { Vector2 } from 'three';
+export declare const normalizeDeviceCoordinates: (element: HTMLElement, x: number, y: number, target: Vector2) => void;

package/dist/components/slam/map2d/hooks/use-raycast-click/normalize-device-coordinates.js

@@ -0,0 +1,9 @@
+import { Vector2 } from 'three';
+export const normalizeDeviceCoordinates = (element, x, y, target) => {
+    if (element.clientWidth === 0 || element.clientHeight === 0) {
+        throw new Error('normalizeDeviceCoordinates cannot operate on a dimensionless element');
+    }
+    const rect = element.getBoundingClientRect();
+    target.x = ((x - rect.x) / element.clientWidth) * 2 - 1;
+    target.y = -(((y - rect.y) / element.clientHeight) * 2) + 1;
+};

package/dist/components/slam/map2d/index.svelte

@@ -0,0 +1,60 @@
+<!--
+  @component
+  Renders a 2d pointcloud from a top-down perspective.
+  The pointcloud exists on the xy axis, with the camera set at z=1.
+  Has the ability to also render other environmental features,
+  such as the pose of a base and / or a motion plan.
+
+  ```svelte
+  <SlamMap2d
+    pointcloud={new Uint8Array()} // An arraybuffer representing a PCD file.
+    basePose={{ x: number, y: number, z: number }} // An optional pose of a robot.
+    destination={{ x: number, y: number }} // An optional user-specificed robot destination.
+    helpers={true | false} // Whether or not scene helpers should be rendered. Default true.
+    motionPath={new Float32Array(x1, y1, x2, y2, x3, y3])} // An optional motion path. Units are assumed to be in Meters. Must not contain NaN.
+  />
+  ```
+-->
+<script lang="ts">
+	import type { Vector2, Vector3 } from 'three'
+
+	import { Canvas } from '@threlte/core'
+
+	import Legend from './legend.svelte'
+	import Scene from './scene.svelte'
+
+	interface Props {
+		/** A buffer representing a .pcd file */
+		pointcloud?: Uint8Array | undefined
+		/** The pose of the base of the robot */
+		basePose?: { x: number; y: number; theta: number } | undefined
+		/** A user-specificed robot destination */
+		destination?: Vector2 | undefined
+		/** Whether or not scene helpers should be rendered */
+		helpers?: boolean
+		/** An optional motion path */
+		motionPath?: Float32Array | undefined
+		onClick: (value: Vector3) => void
+	}
+
+	const { pointcloud, basePose, destination, helpers = true, motionPath, onClick }: Props = $props()
+</script>
+
+<div class="relative h-full w-full">
+	<Canvas>
+		<Scene
+			{helpers}
+			{pointcloud}
+			{basePose}
+			{destination}
+			{motionPath}
+			{onClick}
+		/>
+	</Canvas>
+
+	{#if helpers}
+		<p class="absolute top-3 left-3 bg-white text-xs">Grid set to 1 meter</p>
+	{/if}
+
+	<Legend />
+</div>

package/dist/components/slam/map2d/index.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Vector2, Vector3 } from 'three';
+interface Props {
+    /** A buffer representing a .pcd file */
+    pointcloud?: Uint8Array | undefined;
+    /** The pose of the base of the robot */
+    basePose?: {
+        x: number;
+        y: number;
+        theta: number;
+    } | undefined;
+    /** A user-specificed robot destination */
+    destination?: Vector2 | undefined;
+    /** Whether or not scene helpers should be rendered */
+    helpers?: boolean;
+    /** An optional motion path */
+    motionPath?: Float32Array | undefined;
+    onClick: (value: Vector3) => void;
+}
+/**
+ * Renders a 2d pointcloud from a top-down perspective.
+ * The pointcloud exists on the xy axis, with the camera set at z=1.
+ * Has the ability to also render other environmental features,
+ * such as the pose of a base and / or a motion plan.
+ *
+ * ```svelte
+ * <SlamMap2d
+ *   pointcloud={new Uint8Array()} // An arraybuffer representing a PCD file.
+ *   basePose={{ x: number, y: number, z: number }} // An optional pose of a robot.
+ *   destination={{ x: number, y: number }} // An optional user-specificed robot destination.
+ *   helpers={true | false} // Whether or not scene helpers should be rendered. Default true.
+ *   motionPath={new Float32Array(x1, y1, x2, y2, x3, y3])} // An optional motion path. Units are assumed to be in Meters. Must not contain NaN.
+ * />
+ * ```
+ */
+declare const Index: import("svelte").Component<Props, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/slam/map2d/legend.svelte

@@ -0,0 +1,67 @@
+<!--
+  @component
+  A user legend for the SLAM map axes.
+-->
+<svg
+	class="absolute top-3 right-3"
+	width="30"
+	height="30"
+	viewBox="0 0 30 30"
+	fill="none"
+>
+	<rect
+		width="10"
+		height="10"
+		rx="5"
+		fill="green"
+	/>
+	<path
+		d="M4.7 6H4.5L2.8 2.4H3.5L5 5.5H5L6.5 2.4H7.2L5.5 6H5.3V8H4.7V6Z"
+		fill="white"
+	/>
+
+	<rect
+		x="20"
+		y="20"
+		width="10"
+		height="10"
+		rx="5"
+		fill="red"
+	/>
+	<path
+		d="M23.7 22.4L24.9 24.9H25L26.3 22.4H27.1L25.7 25.144V25.24L27.1 28H26.3L25 26H24.9L23.7 28H22.9L24.3 25.2V25.1L22.9 22.4H23.7Z"
+		fill="white"
+	/>
+
+	<rect
+		x="4"
+		y="9"
+		width="2"
+		height="17"
+		fill="green"
+	/>
+	<rect
+		x="21"
+		y="24"
+		width="2"
+		height="17"
+		transform="rotate(90 21 24)"
+		fill="red"
+	/>
+	<rect
+		x="0.5"
+		y="20.5"
+		width="9"
+		height="9"
+		rx="4.5"
+		fill="#E0FAE3"
+	/>
+	<rect
+		x="0.5"
+		y="20.5"
+		width="9"
+		height="9"
+		rx="4.5"
+		stroke="#3D7D3F"
+	/>
+</svg>

package/dist/components/slam/map2d/legend.svelte.d.ts

@@ -0,0 +1,27 @@
+export default Legend;
+type Legend = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+/** A user legend for the SLAM map axes. */
+declare const Legend: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/components/slam/map2d/marker.svelte

@@ -0,0 +1,41 @@
+<!--
+  @component
+  A 2D marker that can accept a texture.
+  Used for rendering the base position, endpoints, etc.
+-->
+<script
+	lang="ts"
+	module
+>
+	import { TextureLoader } from 'three'
+
+	const textureLoader = new TextureLoader()
+</script>
+
+<script lang="ts">
+	import { T } from '@threlte/core'
+
+	import { renderOrder } from './render-order'
+
+	interface Props {
+		name: string
+		url: string
+		rotation?: number
+		[key: string]: unknown
+	}
+
+	const { name, url, rotation = 0, ...rest }: Props = $props()
+</script>
+
+<T.Sprite
+	{name}
+	{...rest}
+	renderOrder={renderOrder.markers}
+>
+	<T.SpriteMaterial
+		map={textureLoader.load(url)}
+		sizeAttenuation={false}
+		color="#ff0047"
+		{rotation}
+	/>
+</T.Sprite>

package/dist/components/slam/map2d/marker.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    name: string;
+    url: string;
+    rotation?: number;
+    [key: string]: unknown;
+}
+/**
+ * A 2D marker that can accept a texture.
+ * Used for rendering the base position, endpoints, etc.
+ */
+declare const Marker: import("svelte").Component<Props, {}, "">;
+type Marker = ReturnType<typeof Marker>;
+export default Marker;

package/dist/components/slam/map2d/motion-path.svelte

@@ -0,0 +1,65 @@
+<!--
+  @component
+  Renders a motion plan using thick lines.
+  
+  Assumes the motion plan is coming in as a Float32Array in the following format:
+  Float32Array([x1, y1, x2, y2, x3, y3, ...])
+
+  Units are assumed to be in Meters.
+  Must not contain NaN.
+-->
+<script lang="ts">
+	import { T } from '@threlte/core'
+	import { Line2 } from 'three/examples/jsm/lines/Line2.js'
+	import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
+	import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
+
+	import { renderOrder } from './render-order'
+
+	interface Props {
+		path: Float32Array | undefined
+	}
+
+	const { path }: Props = $props()
+
+	const updatePath = (xy?: Float32Array) => {
+		if (xy === undefined) {
+			return
+		}
+
+		const lineGeometry = new LineGeometry()
+		const xyz: number[] = []
+		for (let i = 0; i < xy.length - 1; i += 2) {
+			const x = xy[i]
+			const y = xy[i + 1]
+			if (x !== undefined && y !== undefined) {
+				xyz.push(x, y, 0)
+			}
+		}
+
+		lineGeometry.setPositions(xyz)
+
+		return lineGeometry
+	}
+
+	let geometry: LineGeometry | undefined = $state()
+
+	$effect.pre(() => {
+		geometry?.dispose()
+		geometry = updatePath(path)
+	})
+</script>
+
+{#if geometry}
+	<T
+		is={Line2}
+		renderOrder={renderOrder.motionPath}
+	>
+		<T
+			is={LineMaterial}
+			color="#FF0047"
+			linewidth={1}
+		/>
+		<T is={geometry} />
+	</T>
+{/if}