@viamrobotics/motion-tools 1.21.0 → 1.23.0

package/dist/ecs/traits.js

@@ -11,6 +11,7 @@ export const Parent = trait(() => 'world');
 export const UUID = trait(() => '');
 export const Pose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const EditedPose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
+export const LivePose = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const Center = trait({ x: 0, y: 0, z: 0, oX: 0, oY: 0, oZ: 1, theta: 0 });
 export const InstancedPose = trait({
     x: 0,
@@ -103,6 +104,12 @@ export const SnapshotAPI = trait(() => true);
  * Marker trait for entities created from user-dropped files (PLY, PCD, etc.)
  */
 export const DroppedFile = trait(() => true);
+/**
+ * Marker trait for entities the dashboard's TransformControls may attach to —
+ * editable frames and ad-hoc custom geometries. Other entity kinds (lines,
+ * points, batched arrows, etc.) are deliberately excluded.
+ */
+export const Transformable = trait(() => true);
 export const ShowAxesHelper = trait(() => true);
 /**
  * Marker trait for entities that should be rendered in screen space (CSS pixels)

package/dist/editing/FrameEditSession.d.ts

@@ -0,0 +1,37 @@
+import type { Pose } from '@viamrobotics/sdk';
+import type { Entity } from 'koota';
+import type { Frame } from '../frame';
+export type UpdateFrameFn = (componentName: string, referenceFrame: string, pose: Pose, geometry?: Frame['geometry']) => void;
+export type DeleteFrameFn = (componentName: string) => void;
+/**
+ * A single user gesture against one or more frames (drag, parent change, geometry tweak).
+ * Owns the affected entities until commit() or abort() runs. Snapshots their pre-gesture
+ * trait state so abort() can restore — both the ECS view and the dirty part config.
+ *
+ * Replaces the Transforming marker trait: while a session is active, useFrames asks
+ * `session.owns(entity)` instead of inspecting a per-entity flag.
+ */
+export declare class FrameEditSession {
+    #private;
+    private snapshots;
+    private updateFrame;
+    private deleteFrame;
+    private onClose;
+    constructor(entities: Entity[], updateFrame: UpdateFrameFn, deleteFrame: DeleteFrameFn, onClose: () => void);
+    get isClosed(): boolean;
+    owns(entity: Entity | undefined): boolean;
+    stagePose: (entity: Entity, pose: Partial<Pose>) => void;
+    stageGeometry: (entity: Entity, geometry: Frame["geometry"]) => void;
+    stageParent: (entity: Entity, parent: string) => void;
+    stageDelete: (entity: Entity) => void;
+    /**
+     * Validate and close. Returns true on success. On invalid pose data
+     * (NaN/infinite from a degenerate gizmo state), aborts and returns false.
+     */
+    commit: () => boolean;
+    /**
+     * Restore each owned entity's traits to its pre-session state and re-issue
+     * an updateFrame so the dirty part config matches.
+     */
+    abort: () => void;
+}

package/dist/editing/FrameEditSession.js

@@ -0,0 +1,178 @@
+import { traits } from '../ecs';
+import { isFinitePose } from '../transform';
+const captureGeometry = (entity) => {
+    const box = entity.get(traits.Box);
+    if (box)
+        return { type: 'box', box: { ...box } };
+    const sphere = entity.get(traits.Sphere);
+    if (sphere)
+        return { type: 'sphere', sphere: { ...sphere } };
+    const capsule = entity.get(traits.Capsule);
+    if (capsule)
+        return { type: 'capsule', capsule: { ...capsule } };
+    return { type: 'none' };
+};
+const restoreGeometryTrait = (entity, snap) => {
+    if (snap.type === 'none') {
+        entity.remove(traits.Box, traits.Sphere, traits.Capsule);
+        return;
+    }
+    if (snap.type === 'box' && snap.box) {
+        entity.remove(traits.Sphere, traits.Capsule);
+        if (entity.has(traits.Box))
+            entity.set(traits.Box, snap.box);
+        else
+            entity.add(traits.Box(snap.box));
+        return;
+    }
+    if (snap.type === 'sphere' && snap.sphere) {
+        entity.remove(traits.Box, traits.Capsule);
+        if (entity.has(traits.Sphere))
+            entity.set(traits.Sphere, snap.sphere);
+        else
+            entity.add(traits.Sphere(snap.sphere));
+        return;
+    }
+    if (snap.type === 'capsule' && snap.capsule) {
+        entity.remove(traits.Box, traits.Sphere);
+        if (entity.has(traits.Capsule))
+            entity.set(traits.Capsule, snap.capsule);
+        else
+            entity.add(traits.Capsule(snap.capsule));
+    }
+};
+const snapshotToFrameGeometry = (snap) => {
+    if (snap.type === 'box' && snap.box)
+        return { type: 'box', ...snap.box };
+    if (snap.type === 'sphere' && snap.sphere)
+        return { type: 'sphere', ...snap.sphere };
+    if (snap.type === 'capsule' && snap.capsule)
+        return { type: 'capsule', ...snap.capsule };
+    return { type: 'none' };
+};
+const liveGeometry = (entity) => snapshotToFrameGeometry(captureGeometry(entity));
+/**
+ * A single user gesture against one or more frames (drag, parent change, geometry tweak).
+ * Owns the affected entities until commit() or abort() runs. Snapshots their pre-gesture
+ * trait state so abort() can restore — both the ECS view and the dirty part config.
+ *
+ * Replaces the Transforming marker trait: while a session is active, useFrames asks
+ * `session.owns(entity)` instead of inspecting a per-entity flag.
+ */
+export class FrameEditSession {
+    snapshots = new Map();
+    updateFrame;
+    deleteFrame;
+    onClose;
+    #closed = false;
+    constructor(entities, updateFrame, deleteFrame, onClose) {
+        this.updateFrame = updateFrame;
+        this.deleteFrame = deleteFrame;
+        this.onClose = onClose;
+        for (const entity of entities) {
+            const name = entity.get(traits.Name);
+            const editedPose = entity.get(traits.EditedPose);
+            if (!name || !editedPose)
+                continue;
+            this.snapshots.set(entity, {
+                name,
+                parent: entity.get(traits.Parent) ?? 'world',
+                editedPose: { ...editedPose },
+                geometry: captureGeometry(entity),
+            });
+        }
+    }
+    get isClosed() {
+        return this.#closed;
+    }
+    owns(entity) {
+        return entity !== undefined && !this.#closed && this.snapshots.has(entity);
+    }
+    stagePose = (entity, pose) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed)
+            return;
+        const current = entity.get(traits.EditedPose);
+        if (!current)
+            return;
+        const next = { ...current, ...pose };
+        entity.set(traits.EditedPose, next);
+        this.updateFrame(snap.name, entity.get(traits.Parent) ?? 'world', next, liveGeometry(entity));
+    };
+    stageGeometry = (entity, geometry) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed || !geometry)
+            return;
+        if (geometry.type === 'none') {
+            entity.remove(traits.Box, traits.Sphere, traits.Capsule);
+        }
+        else if (geometry.type === 'box') {
+            const data = { x: geometry.x, y: geometry.y, z: geometry.z };
+            restoreGeometryTrait(entity, { type: 'box', box: data });
+        }
+        else if (geometry.type === 'sphere') {
+            restoreGeometryTrait(entity, { type: 'sphere', sphere: { r: geometry.r } });
+        }
+        else if (geometry.type === 'capsule') {
+            restoreGeometryTrait(entity, { type: 'capsule', capsule: { r: geometry.r, l: geometry.l } });
+        }
+        const editedPose = entity.get(traits.EditedPose);
+        if (editedPose) {
+            this.updateFrame(snap.name, entity.get(traits.Parent) ?? 'world', editedPose, geometry);
+        }
+    };
+    stageParent = (entity, parent) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed)
+            return;
+        traits.setParentTrait(entity, parent === 'world' ? undefined : parent);
+        const editedPose = entity.get(traits.EditedPose);
+        if (editedPose) {
+            this.updateFrame(snap.name, parent, editedPose, liveGeometry(entity));
+        }
+    };
+    stageDelete = (entity) => {
+        const snap = this.snapshots.get(entity);
+        if (!snap || this.#closed)
+            return;
+        this.deleteFrame(snap.name);
+    };
+    /**
+     * Validate and close. Returns true on success. On invalid pose data
+     * (NaN/infinite from a degenerate gizmo state), aborts and returns false.
+     */
+    commit = () => {
+        if (this.#closed)
+            return false;
+        for (const [entity] of this.snapshots) {
+            const pose = entity.get(traits.EditedPose);
+            if (pose && !isFinitePose(pose)) {
+                this.abort();
+                return false;
+            }
+        }
+        this.#close();
+        return true;
+    };
+    /**
+     * Restore each owned entity's traits to its pre-session state and re-issue
+     * an updateFrame so the dirty part config matches.
+     */
+    abort = () => {
+        if (this.#closed)
+            return;
+        for (const [entity, snap] of this.snapshots) {
+            if (entity.isAlive()) {
+                entity.set(traits.EditedPose, snap.editedPose);
+                traits.setParentTrait(entity, snap.parent === 'world' ? undefined : snap.parent);
+                restoreGeometryTrait(entity, snap.geometry);
+            }
+            this.updateFrame(snap.name, snap.parent, snap.editedPose, snapshotToFrameGeometry(snap.geometry));
+        }
+        this.#close();
+    };
+    #close = () => {
+        this.#closed = true;
+        this.onClose();
+    };
+}

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

@@ -2,6 +2,7 @@ export declare const ENVIRONMENT_CONTEXT_KEY: unique symbol;
 interface Environemnt {
     viewerMode: 'edit' | 'monitor' | 'focus';
     isStandalone: boolean;
+    inputBindingsEnabled: boolean;
 }
 interface Context {
     current: Environemnt;

package/dist/hooks/useEnvironment.svelte.js

@@ -3,6 +3,7 @@ export const ENVIRONMENT_CONTEXT_KEY = Symbol('environment');
 const defaults = () => ({
     viewerMode: 'monitor',
     isStandalone: true,
+    inputBindingsEnabled: true,
 });
 export const createEnvironment = () => {
     const environment = $state(defaults());

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

@@ -0,0 +1,15 @@
+import type { Entity } from 'koota';
+import { FrameEditSession } from '../editing/FrameEditSession';
+interface FrameEditSessionContext {
+    /** The currently-active session, or undefined when no gesture is in flight. */
+    current: FrameEditSession | undefined;
+    /**
+     * Open a new session over the given entities. If a previous session is still
+     * active (e.g. selection changed mid-drag and onMouseUp never fired), it is
+     * aborted first so its snapshot is restored.
+     */
+    begin: (entities: Entity[]) => FrameEditSession;
+}
+export declare const provideFrameEditSession: (partID: () => string) => void;
+export declare const useFrameEditSession: () => FrameEditSessionContext;
+export {};

package/dist/hooks/useFrameEditSession.svelte.js

@@ -0,0 +1,36 @@
+import { getContext, setContext } from 'svelte';
+import { FrameEditSession } from '../editing/FrameEditSession';
+import { usePartConfig } from './usePartConfig.svelte';
+const key = Symbol('frame-edit-session-context');
+export const provideFrameEditSession = (partID) => {
+    const partConfig = usePartConfig();
+    let active = $state(undefined);
+    const begin = (entities) => {
+        active?.abort();
+        const session = new FrameEditSession(entities, partConfig.updateFrame, partConfig.deleteFrame, () => {
+            if (active === session)
+                active = undefined;
+        });
+        active = session;
+        return session;
+    };
+    // Drop any in-flight session when the partID changes — its snapshots reference
+    // entities from the old world that useFrames will destroy, and aborting it
+    // after the swap would write old frame names into the new part's config.
+    let lastPartID;
+    $effect.pre(() => {
+        const id = partID();
+        if (lastPartID !== undefined && lastPartID !== id) {
+            active?.abort();
+            active = undefined;
+        }
+        lastPartID = id;
+    });
+    setContext(key, {
+        get current() {
+            return active;
+        },
+        begin,
+    });
+};
+export const useFrameEditSession = () => getContext(key);

package/dist/hooks/useFrames.svelte.js

@@ -7,6 +7,7 @@ import { traits, useWorld } from '../ecs';
 import { createPose } from '../transform';
 import { useConfigFrames } from './useConfigFrames.svelte';
 import { useEnvironment } from './useEnvironment.svelte';
+import { useFrameEditSession } from './useFrameEditSession.svelte';
 import { useLogs } from './useLogs.svelte';
 import { usePartConfig } from './usePartConfig.svelte';
 import { useResourceByName } from './useResourceByName.svelte';
@@ -14,6 +15,7 @@ const key = Symbol('frames-context');
 export const provideFrames = (partID) => {
     const configFrames = useConfigFrames();
     const partConfig = usePartConfig();
+    const editSession = useFrameEditSession();
     const environment = useEnvironment();
     const world = useWorld();
     const resourceByName = useResourceByName();
@@ -23,6 +25,17 @@ export const provideFrames = (partID) => {
     const logs = useLogs();
     const pendingSaveKey = $derived(`viam-pending-save-revision:${partID()}`);
     let didRecentlyEdit = $state(false);
+    let lastPartID;
+    $effect.pre(() => {
+        const id = partID();
+        if (lastPartID !== undefined && lastPartID !== id) {
+            // Don't let an edited flag from the previous part bleed into the
+            // new one — the merge condition would otherwise stay forced on for
+            // a freshly-switched part the user hasn't touched.
+            didRecentlyEdit = false;
+        }
+        lastPartID = id;
+    });
     const isEditMode = $derived(environment.current.viewerMode === 'edit');
     const query = createRobotQuery(client, 'frameSystemConfig', () => ({
         refetchOnWindowFocus: false,
@@ -47,11 +60,15 @@ export const provideFrames = (partID) => {
                 frames[frame.referenceFrame] = frame;
             }
         }
-        // Let config frames take priority if the user has made edits,
-        // has a pending save, or is disconnected
+        // Let config frames take priority if the user has made edits, has a
+        // pending save, or we don't have a live robot connection. The latter
+        // covers DISCONNECTED, CONNECTING, and the undefined case where the
+        // embedder never provided a dial config (e.g. the Viam app's
+        // dialConfigsForParts filters to live parts only, so offline parts
+        // never transition through DISCONNECTED).
         if (didRecentlyEdit ||
             partConfig.hasPendingSave ||
-            connectionStatus.current === MachineConnectionEvent.DISCONNECTED) {
+            connectionStatus.current !== MachineConnectionEvent.CONNECTED) {
             const mergedFrames = {
                 ...frames,
                 ...configFrames.current,
@@ -73,7 +90,7 @@ export const provideFrames = (partID) => {
     });
     const current = $derived(Object.values(frames));
     const entities = new Map();
-    $effect.pre(() => {
+    $effect(() => {
         if (revision) {
             untrack(() => query.refetch());
         }
@@ -145,6 +162,13 @@ export const provideFrames = (partID) => {
                     subtypeToColor(currentComponentSubtypeByName[frame.referenceFrame]);
                 const existing = entities.get(entityKey);
                 if (existing) {
+                    // Active edit session owns the entity's traits for the duration of
+                    // the user's gesture. Skip the entire re-sync — re-setting Parent
+                    // would re-evaluate the <Portal> id and re-mount the group,
+                    // detaching the gizmo's drag target mid-stroke.
+                    if (editSession.current?.owns(existing)) {
+                        continue;
+                    }
                     traits.setParentTrait(existing, parent);
                     if (color) {
                         existing.set(traits.Color, color);
@@ -153,14 +177,30 @@ export const provideFrames = (partID) => {
                         existing.set(traits.Center, center);
                     }
                     traits.updateGeometryTrait(existing, frame.physicalObject);
-                    existing.set(traits.EditedPose, pose);
+                    if (!isEditMode && !partConfig.hasPendingSave) {
+                        existing.set(traits.Pose, pose);
+                    }
+                    if (!existing.has(traits.LivePose)) {
+                        existing.add(traits.LivePose(pose));
+                    }
+                    // Skip the EditedPose overwrite while in edit mode. The merged
+                    // `frames` source can differ from query.data once didRecentlyEdit
+                    // flips (fragment overrides, round-trip drift), and writing those
+                    // values would shift entities whose parents the user is portaling
+                    // into — the gizmo's drag target moves underneath it. Once we're
+                    // back in monitor mode, the next sync resumes the overwrite.
+                    if (!isEditMode) {
+                        existing.set(traits.EditedPose, pose);
+                    }
                     continue;
                 }
                 const entityTraits = [
                     traits.Name(name),
                     traits.Pose(pose),
                     traits.EditedPose(pose),
+                    traits.LivePose(pose),
                     traits.FramesAPI,
+                    traits.Transformable,
                     traits.ShowAxesHelper,
                     ...traits.getParentTrait(parent),
                 ];

package/dist/hooks/usePartConfig.svelte.js

@@ -273,7 +273,17 @@ const useStandalonePartConfig = (partID) => {
         }
         return results;
     });
+    let lastPartID;
     $effect.pre(() => {
+        const id = partID();
+        if (lastPartID !== undefined && lastPartID !== id) {
+            // Part changed: drop any in-memory edits/pending-save state from the
+            // previous part. `current` is left for the existing sync below to
+            // repopulate once the new part's networkPartConfig arrives.
+            isDirty = false;
+            hasPendingSave = false;
+        }
+        lastPartID = id;
         if (!networkPartConfig || isDirty) {
             return;
         }

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

@@ -9,9 +9,8 @@ export interface Settings {
     };
     disabledCameras: Record<string, boolean>;
     disabledVisionServices: Record<string, boolean>;
-    transforming: boolean;
     snapping: boolean;
-    transformMode: 'translate' | 'rotate' | 'scale';
+    transformMode: 'none' | 'translate' | 'rotate' | 'scale';
     grid: boolean;
     gridCellSize: number;
     gridSectionSize: number;
@@ -24,7 +23,6 @@ export interface Settings {
     enableMeasureAxisY: boolean;
     enableMeasureAxisZ: boolean;
     enableLabels: boolean;
-    enableKeybindings: boolean;
     enableQueryDevtools: boolean;
     enableArmPositionsWidget: boolean;
     openCameraWidgets: Record<string, string[]>;

package/dist/hooks/useSettings.svelte.js

@@ -15,9 +15,8 @@ const defaults = () => ({
     },
     disabledCameras: {},
     disabledVisionServices: {},
-    transforming: false,
     snapping: false,
-    transformMode: 'translate',
+    transformMode: 'none',
     grid: true,
     gridCellSize: 0.5,
     gridSectionSize: 10,
@@ -31,7 +30,6 @@ const defaults = () => ({
     enableMeasureAxisY: true,
     enableMeasureAxisZ: true,
     enableLabels: false,
-    enableKeybindings: true,
     enableQueryDevtools: false,
     enableArmPositionsWidget: false,
     openCameraWidgets: {},

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+/** @deprecated MotionTools has been renamed to Visualizer. This export will be removed in v2. */
 export { default as MotionTools } from './components/App.svelte';
+export { default as Visualizer } from './components/App.svelte';
 export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';
 export * as relations from './ecs/relations';

package/dist/index.js

@@ -1,4 +1,6 @@
+/** @deprecated MotionTools has been renamed to Visualizer. This export will be removed in v2. */
 export { default as MotionTools } from './components/App.svelte';
+export { default as Visualizer } from './components/App.svelte';
 // Plugins
 export { default as SelectionTool } from './components/Selection/Tool.svelte';
 export { default as PCD } from './components/PCD.svelte';

package/dist/transform.js

@@ -105,3 +105,16 @@ export const matrixToPose = (matrix) => {
     pose.theta = MathUtils.radToDeg(ov.th);
     return pose;
 };
+export const composeRenderedPose = (livePose, baselinePose, editedPose) => matrixToPose(poseToMatrix(livePose)
+    .multiply(poseToMatrix(baselinePose).invert())
+    .multiply(poseToMatrix(editedPose)));
+export const composeEditedPoseForRenderedPose = (baselinePose, livePose, renderedPose) => matrixToPose(poseToMatrix(baselinePose)
+    .multiply(poseToMatrix(livePose).invert())
+    .multiply(poseToMatrix(renderedPose)));
+export const isFinitePose = (pose) => Number.isFinite(pose.x) &&
+    Number.isFinite(pose.y) &&
+    Number.isFinite(pose.z) &&
+    Number.isFinite(pose.oX) &&
+    Number.isFinite(pose.oY) &&
+    Number.isFinite(pose.oZ) &&
+    Number.isFinite(pose.theta);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/motion-tools",
-  "version": "1.21.0",
+  "version": "1.23.0",
   "description": "Motion visualization with Viam",
   "license": "Apache-2.0",
   "type": "module",
@@ -25,8 +25,8 @@
     "@testing-library/jest-dom": "6.8.0",
     "@testing-library/svelte": "5.2.8",
     "@testing-library/user-event": "^14.6.1",
-    "@threlte/core": "8.5.5",
-    "@threlte/extras": "9.14.1",
+    "@threlte/core": "8.5.11",
+    "@threlte/extras": "9.15.0",
     "@threlte/rapier": "3.4.1",
     "@threlte/xr": "1.5.2",
     "@types/bun": "1.2.21",
@@ -147,9 +147,8 @@
     "uuid-tool": "^2.0.3"
   },
   "scripts": {
-    "dev": "pnpm dev:bun",
+    "dev": "concurrently \"pnpm dev:bun\" \"go run cmd/draw-server/main.go -port 3030\"",
     "dev:bun": "tsx server/check-bun && bun run server/server.ts",
-    "dev:next": "concurrently \"pnpm dev:bun\" \"go run cmd/draw-server/main.go -port 3030\"",
     "dev:https": "vite dev -- --https",
     "build": "vite build && npm run prepack",
     "build:workers": "node scripts/build-workers.js",
@@ -174,6 +173,9 @@
     "vet:client": "go vet ./client/...",
     "vet": "pnpm vet:draw && pnpm vet:client",
     "model-pipeline:run": "node scripts/model-pipeline.js",
-    "release": "changeset publish"
+    "release": "changeset publish",
+    "docs:dev": "pnpm --dir docs dev",
+    "docs:build": "pnpm --dir docs build",
+    "docs:preview": "pnpm --dir docs preview"
   }
 }

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

@@ -1,7 +0,0 @@
-import type { CameraControlsRef } from '@threlte/extras';
-interface Props {
-    cameraControls: CameraControlsRef;
-}
-declare const KeyboardControls: import("svelte").Component<Props, {}, "">;
-type KeyboardControls = ReturnType<typeof KeyboardControls>;
-export default KeyboardControls;