@omrips/viewstl 2.0.0-rc.4 → 2.0.0-rc.5

package/build/{v2/viewstl.cjs → viewstl.cjs}

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/v2/commonjs.js
+// src/commonjs.js
 var commonjs_exports = {};
 __export(commonjs_exports, {
   StlViewer: () => StlViewer,
@@ -25,7 +25,7 @@ __export(commonjs_exports, {
 });
 module.exports = __toCommonJS(commonjs_exports);
 
-// src/v2/appearance.js
+// src/appearance.js
 var DISPLAYS = [
   "flat",
   "smooth",
@@ -73,7 +73,7 @@ function sectionPlane(bounds, section) {
   return plane;
 }
 
-// src/v2/math.js
+// src/math.js
 var add = (a, b) => a.map((v, i) => v + b[i]);
 var sub = (a, b) => a.map((v, i) => v - b[i]);
 var mul = (a, s) => a.map((v) => v * s);
@@ -225,7 +225,7 @@ function rayTriangle(o, d, p, i) {
   return t >= 0 ? t : Infinity;
 }
 
-// src/v2/memory.js
+// src/memory.js
 var MEMORY_OVERHEAD = 64 * 1024 * 1024;
 var TRIANGLE_MEMORY = 224;
 function geometryMemory(g) {
@@ -242,7 +242,7 @@ function derivedMemory(triangles, features) {
   return MEMORY_OVERHEAD + triangles * (TRIANGLE_MEMORY + (features.smooth ? 1536 : 0) + (features.edges || features.wire ? 2048 : 0));
 }
 
-// src/v2/geometry.js
+// src/geometry.js
 var DEFAULT_LIMITS = Object.freeze({
   max_file_bytes: 256 * 1024 * 1024,
   max_triangles: 5e6,
@@ -390,7 +390,7 @@ function exportSTL(g, scale = [1, 1, 1], center = [0, 0, 0]) {
   return buffer;
 }
 
-// src/v2/infinite-grid.js
+// src/infinite-grid.js
 var vertex = `#version 300 es
 precision highp float;
 out vec2 screen;
@@ -482,7 +482,7 @@ var InfiniteGrid = class {
   }
 };
 
-// src/v2/selection-frame.js
+// src/selection-frame.js
 function selectionFrame(bounds) {
   const padding = Math.max(
     Math.max(...bounds.max.map((v, i) => v - bounds.min[i])) * 0.015,
@@ -500,7 +500,7 @@ function selectionFrame(bounds) {
   return new Float32Array(lines);
 }
 
-// src/v2/renderer.js
+// src/renderer.js
 var vertex2 = `#version 300 es
 precision highp float;
 layout(location=0) in vec3 position;
@@ -921,7 +921,7 @@ var Renderer = class {
   }
 };
 
-// src/v2/controls.js
+// src/controls.js
 var Controls = class {
   constructor(canvas, camera, invalidate, pick, type = 0) {
     this.enabled = true;
@@ -1032,7 +1032,7 @@ var Controls = class {
   }
 };
 
-// src/v2/worker-pool.js
+// src/worker-pool.js
 var WorkerPool = class {
   constructor(url, { count = 2, timeout = 12e4, factory } = {}) {
     this.url = url;
@@ -1117,7 +1117,178 @@ var WorkerPool = class {
   }
 };
 
-// src/v2/scene-import.js
+// src/animation.js
+var animationKeys = [
+  "x",
+  "y",
+  "z",
+  "rotationx",
+  "rotationy",
+  "rotationz",
+  "scalex",
+  "scaley",
+  "scalez"
+];
+var isScale = (key) => key.startsWith("scale");
+var number = (value, name, positive2 = false) => {
+  if (typeof value !== "number" || !Number.isFinite(value) || Math.abs(value) > Number.MAX_SAFE_INTEGER || positive2 && value <= 0)
+    throw new Error(`Invalid animation ${name}`);
+  return value;
+};
+var object = (value, name) => {
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    throw new Error(`Invalid animation ${name}`);
+  return value;
+};
+function animationPose(model) {
+  return Object.fromEntries(
+    animationKeys.map((key) => [
+      key,
+      number(
+        model[key] ?? (isScale(key) ? model.scale ?? 1 : 0),
+        key,
+        isScale(key)
+      )
+    ])
+  );
+}
+function normalizeAnimation(input) {
+  object(input, "definition");
+  const result = {}, claimed = /* @__PURE__ */ new Set();
+  for (const mode of ["delta", "exact"]) {
+    if (input[mode] == null) continue;
+    const source = object(input[mode], mode), values = {};
+    const msec = number(source.msec ?? 300, "duration", true);
+    if (source.loop !== void 0 && typeof source.loop !== "boolean")
+      throw new Error("Animation loop must be a boolean");
+    const loop = mode === "delta" && !!source.loop;
+    for (const key of animationKeys) {
+      const value = source[key] ?? (isScale(key) ? source.scale : void 0);
+      if (value === void 0) continue;
+      if (claimed.has(key))
+        throw new Error(`Animation delta/exact conflict: ${key}`);
+      number(value, key, mode === "exact" && isScale(key));
+      if (loop && isScale(key) && value < 0)
+        throw new Error("Looping scale deltas cannot be negative");
+      values[key] = value;
+      claimed.add(key);
+    }
+    if (!Object.keys(values).length)
+      throw new Error("Animation track needs a transform");
+    result[mode] = { ...values, msec, ...loop ? { loop: true } : {} };
+  }
+  if (!Object.keys(result).length)
+    throw new Error("Animation needs delta or exact");
+  return result;
+}
+function normalizePlaybackState(input) {
+  object(input, "playback state");
+  if (input.version !== 1 || typeof input.paused !== "boolean")
+    throw new Error("Invalid animation playback state version or paused flag");
+  const elapsed_ms = number(input.elapsed_ms, "elapsed time");
+  if (elapsed_ms < 0) throw new Error("Invalid animation elapsed time");
+  object(input.origin, "origin");
+  for (const key of animationKeys) number(input.origin[key], key, isScale(key));
+  if (!Array.isArray(input.center) || input.center.length !== 3)
+    throw new Error("Invalid animation pivot");
+  return {
+    version: 1,
+    elapsed_ms,
+    paused: input.paused,
+    origin: animationPose(input.origin),
+    center: input.center.map((v) => number(v, "pivot"))
+  };
+}
+function createPlayback(definition, model, saved) {
+  const animation = normalizeAnimation(definition);
+  const state = saved == null ? null : normalizePlaybackState(saved);
+  const origin = state?.origin ?? animationPose(model);
+  const tracks = Object.entries(animation).map(([mode, a]) => {
+    const values = Object.entries(a).filter(
+      ([key]) => animationKeys.includes(key)
+    );
+    if (mode === "delta")
+      for (const [key, value] of values)
+        number(origin[key] + value, `${key} endpoint`, isScale(key));
+    return { mode, values, duration: a.msec, loop: !!a.loop, done: false };
+  });
+  const playback = {
+    animation,
+    origin,
+    tracks,
+    elapsed_ms: state?.elapsed_ms ?? 0,
+    paused: state?.paused ?? false,
+    last_time: null
+  };
+  evaluatePlayback({ ...playback, tracks: tracks.map((t) => ({ ...t })) }, {});
+  return playback;
+}
+function evaluatePlayback(playback, model) {
+  const updates = [];
+  for (const track of playback.tracks) {
+    if (track.done) continue;
+    const fraction = playback.elapsed_ms / track.duration;
+    const p = track.loop ? fraction : Math.min(fraction, 1);
+    for (const [key, value] of track.values) {
+      const from = playback.origin[key];
+      const to = track.mode === "delta" ? from + value * p : from * (1 - p) + value * p;
+      updates.push([key, number(to, `${key} result`, isScale(key))]);
+    }
+  }
+  let scaleChanged = false;
+  for (const [key, value] of updates) {
+    scaleChanged ||= isScale(key) && model[key] !== value;
+    model[key] = value;
+  }
+  for (const track of playback.tracks)
+    if (!track.loop && playback.elapsed_ms >= track.duration) track.done = true;
+  if (scaleChanged) model._stats = null;
+  return playback.tracks.some((track) => !track.done);
+}
+function advancePlayback(playback, model, time) {
+  if (playback.paused) return true;
+  if (playback.last_time !== null)
+    playback.elapsed_ms = number(
+      playback.elapsed_ms + Math.max(0, time - playback.last_time),
+      "elapsed time"
+    );
+  playback.last_time = time;
+  return evaluatePlayback(playback, model);
+}
+function playbackState(playback, suspended = false) {
+  return {
+    status: playback.paused ? "paused" : "running",
+    elapsed_ms: playback.elapsed_ms,
+    suspended,
+    tracks: playback.tracks.filter((t) => !t.done).map((t) => ({
+      mode: t.mode,
+      msec: t.duration,
+      loop: t.loop,
+      progress: t.loop ? playback.elapsed_ms % t.duration / t.duration : Math.min(1, playback.elapsed_ms / t.duration)
+    }))
+  };
+}
+function savePlayback(model) {
+  const p = model._animation;
+  if (!p) return null;
+  const factor = model.unitScale ?? 1;
+  const animation = structuredClone(p.animation), origin = { ...p.origin };
+  for (const key of animationKeys.filter(isScale)) {
+    origin[key] *= factor;
+    for (const track of Object.values(animation))
+      if (track[key] !== void 0) track[key] *= factor;
+  }
+  const animation_state = normalizePlaybackState({
+    version: 1,
+    origin,
+    elapsed_ms: p.elapsed_ms,
+    paused: p.paused,
+    center: [...model.center]
+  });
+  return { animation: normalizeAnimation(animation), animation_state };
+}
+
+// src/scene-import.js
 var sceneFormat = (name) => String(name || "").match(/\.(vsb|vsj)(?:[?#]|$)/i)?.[1].toLowerCase() || "";
 function localSceneFile(reference, files) {
   let path;
@@ -1151,7 +1322,7 @@ function sceneURL(reference, base) {
   return url.href;
 }
 
-// src/v2/scene-import-controller.js
+// src/scene-import-controller.js
 function importScene(source, options = {}) {
   const controller = new AbortController(), signal = controller.signal;
   const generation = this._generation, ids = [], added = /* @__PURE__ */ new Map(), usedFiles = /* @__PURE__ */ new Set();
@@ -1266,7 +1437,7 @@ function importScene(source, options = {}) {
       progress({ phase: "opening-model", loaded: index, total: models.length });
       check();
       const input = models[index], id = this.max_model_id + 1;
-      this.add_model({ ...input, id });
+      this.add_model({ ...input, id, animation: null, animation_state: null });
       const model = this._models.get(id);
       if (!model) throw new Error(this.error || "Invalid scene model");
       ids.push(id);
@@ -1291,7 +1462,9 @@ function importScene(source, options = {}) {
         }),
         delta
       );
-      ["x", "y", "z"].forEach((axis, i) => model[axis] += shift[i]);
+      if (input.animation)
+        model.center = [...input.animation_state?.center ?? desired];
+      else ["x", "y", "z"].forEach((axis, i) => model[axis] += shift[i]);
       if ([...this._models.values()].reduce(
         (n, m) => n + (m.geometry?.triangles || 0),
         0
@@ -1304,7 +1477,12 @@ function importScene(source, options = {}) {
       total: models.length
     });
     check();
-    for (const model of added.values()) model._sceneImportPending = false;
+    for (let index = 0; index < ids.length; index++) {
+      const model = added.get(ids[index]), input = models[index];
+      if (input.animation)
+        this._startAnimation(model, input.animation, input.animation_state);
+      model._sceneImportPending = false;
+    }
     if (scene.bg_color !== void 0) this.set_bg_color(scene.bg_color);
     if (scene.infinite_grid)
       this.set_infinite_grid(
@@ -1336,12 +1514,12 @@ function importScene(source, options = {}) {
   return promise;
 }
 
-// src/v2/print-options.js
+// src/print-options.js
 function printOptions(input = {}) {
   const level = input.level ?? "basic";
   if (!["basic", "detailed"].includes(level))
     throw new Error("Choose basic or detailed print checks");
-  const number = (v, name, max = 1e9) => {
+  const number2 = (v, name, max = 1e9) => {
     if (!Number.isFinite(v) || v <= 0 || v > max)
       throw new Error(`Invalid ${name}`);
     return v;
@@ -1353,9 +1531,9 @@ function printOptions(input = {}) {
     profile = { technology: "fdm" };
     for (const key of ["min_wall_mm", "line_width_mm"])
       if (input.profile[key] != null)
-        profile[key] = number(input.profile[key], key);
+        profile[key] = number2(input.profile[key], key);
     if (input.profile.overhang_degrees != null)
-      profile.overhang_degrees = number(
+      profile.overhang_degrees = number2(
         input.profile.overhang_degrees,
         "overhang angle",
         89.9
@@ -1364,11 +1542,11 @@ function printOptions(input = {}) {
       if (!Array.isArray(input.profile.build_volume_mm) || input.profile.build_volume_mm.length !== 3)
         throw new Error("Build volume requires X, Y and Z");
       profile.build_volume_mm = input.profile.build_volume_mm.map(
-        (v) => number(v, "build volume")
+        (v) => number2(v, "build volume")
       );
     }
   }
-  const time = number(input.max_time_ms ?? 3e4, "check time limit", 12e4);
+  const time = number2(input.max_time_ms ?? 3e4, "check time limit", 12e4);
   return {
     level,
     profile,
@@ -1391,7 +1569,7 @@ var printSignature = (model) => JSON.stringify([
   model.unitScale
 ]);
 
-// src/v2/print-controller.js
+// src/print-controller.js
 var reports = /* @__PURE__ */ new WeakMap();
 function reportCurrent(viewer, report) {
   const saved = reports.get(report);
@@ -1604,7 +1782,7 @@ function showPrintability(report, { issue, model_id = report.model_ids[0] } = {}
   return lines.length / 6;
 }
 
-// src/v2/export-options.js
+// src/export-options.js
 function exportFilename(filename, extension) {
   const name = String(filename || "scene").split(/[\\/]/).pop().split(/[?#]/)[0].replace(/[<>:"|*\x00-\x1f\x7f]/g, "_").replace(/\.(?:stl|obj|3mf|step|stp|iges|igs|zip|vsb|vsj)$/i, "").replace(/[. ]+$/g, "").slice(0, 160) || "scene";
   return `${name}.${extension}`;
@@ -1645,7 +1823,7 @@ function exportMemory(models, options) {
   return MEMORY_OVERHEAD + triangles * perTriangle[options.format] + models.length * 4096;
 }
 
-// src/v2/io.js
+// src/io.js
 async function readSource(source, limit, progress = () => {
 }, signal) {
   let stream, total = 0;
@@ -1707,7 +1885,7 @@ async function readSource(source, limit, progress = () => {
   return data.buffer;
 }
 
-// src/v2/three-bridge.js
+// src/three-bridge.js
 function fromThreeMesh(mesh, limits) {
   if (!mesh?.isMesh && !mesh?.geometry)
     throw new Error("Expected a Three.js mesh");
@@ -1780,7 +1958,7 @@ function toThreeMesh(model, THREE) {
   return mesh;
 }
 
-// src/v2/viewer.js
+// src/viewer.js
 var transformKeys = [
   "x",
   "y",
@@ -1818,7 +1996,8 @@ var modelKeys = [
   "smooth_shading",
   "section",
   "units",
-  "animation"
+  "animation",
+  "animation_state"
 ];
 var finite = (v, name) => {
   if (typeof v !== "number" || !Number.isFinite(v))
@@ -1850,7 +2029,7 @@ function modelOptions(input) {
   return out;
 }
 var StlViewer = class _StlViewer {
-  static version = "2.0.0-rc.4";
+  static version = "2.0.0-rc.5";
   static workerURL = null;
   constructor(parent, options = {}) {
     if (!parent?.appendChild)
@@ -1900,7 +2079,9 @@ var StlViewer = class _StlViewer {
       "model_loaded_callback",
       "load_error_callback",
       "loading_progress_callback",
-      "on_model_drop"
+      "on_model_drop",
+      "animation_state_callback",
+      "animation_complete_callback"
     ])
       this[name] = options[name] ?? null;
     this.onmousedown_callback = options.on_model_mousedown ?? options.on_model_mouseclick ?? null;
@@ -1939,11 +2120,15 @@ var StlViewer = class _StlViewer {
       this.parent_element.appendChild(this.canvas);
       this.renderer = new Renderer(
         this.canvas,
-        () => this._message(
-          "Graphics interrupted. Waiting for the browser to restore rendering\u2026"
-        ),
+        () => {
+          this._suspendAnimations(true);
+          this._message(
+            "Graphics interrupted. Waiting for the browser to restore rendering\u2026"
+          );
+        },
         () => {
           this._removeMessage();
+          this._suspendAnimations(this.canvas.ownerDocument.hidden);
           this._invalidate();
         },
         (e) => this._error(e)
@@ -2008,6 +2193,14 @@ var StlViewer = class _StlViewer {
         }
       };
       this.canvas.addEventListener("keydown", this._key);
+      this._visibility = () => this._suspendAnimations(
+        this.canvas.ownerDocument.hidden || this.renderer.lost
+      );
+      this.canvas.ownerDocument.addEventListener(
+        "visibilitychange",
+        this._visibility
+      );
+      this._animationSuspended = this.canvas.ownerDocument.hidden;
       this.ready = true;
       this._readyResolve(this);
       this._callback("ready_callback");
@@ -2022,6 +2215,11 @@ var StlViewer = class _StlViewer {
       this.controls?.dispose();
       this.renderer?.dispose();
       this._resizeObserver?.disconnect();
+      if (this._visibility)
+        this.canvas.ownerDocument.removeEventListener(
+          "visibilitychange",
+          this._visibility
+        );
     }
   }
   _callback(name, ...args) {
@@ -2070,7 +2268,7 @@ var StlViewer = class _StlViewer {
     const diagnostic = this.renderer?.diagnostic;
     if (diagnostic && printSignature(diagnostic.model) !== diagnostic.signature)
       this.renderer.setDiagnostic(null);
-    if (this.killsign || !this.renderer || this.renderer.lost || this._frame)
+    if (this.killsign || !this.renderer || this.renderer.lost || this._frame || this._animationSuspended)
       return;
     this._frame = requestAnimationFrame((t) => {
       this._frame = 0;
@@ -2082,12 +2280,15 @@ var StlViewer = class _StlViewer {
     this._lastTime = time;
     let animated = false;
     for (const m of this._models.values())
-      if (m.geometry && m._animation) {
+      if (m.geometry && !m._sceneImportPending && m._animation && !m._animation.paused) {
         this._animate(m, time);
-        animated ||= !!m._animation;
+        animated ||= !!m._animation && !m._animation.paused;
       }
     if (this.auto_rotate && this.controls.enabled)
       this.controls.orbit(elapsed * 0.3, 0);
+    const diagnostic = this.renderer.diagnostic;
+    if (diagnostic && printSignature(diagnostic.model) !== diagnostic.signature)
+      this.renderer.setDiagnostic(null);
     this._clip();
     try {
       this.renderer.draw(
@@ -2211,6 +2412,11 @@ var StlViewer = class _StlViewer {
       m.color = supplied.color ?? (supplied.mesh?.material?.color?.getHexString ? "#" + supplied.mesh.material.color.getHexString() : null);
       if (m.color && m.color !== "transparent") colorRGB(m.color);
       m.view_edges = !!supplied.view_edges;
+      m.animation = supplied.animation == null ? null : normalizeAnimation(supplied.animation);
+      m.animation_state = supplied.animation_state == null ? null : normalizePlaybackState(supplied.animation_state);
+      if (m.animation_state && !m.animation)
+        throw new Error("Playback state needs an animation");
+      if (m.animation) createPlayback(m.animation, m, m.animation_state);
       Object.defineProperty(m, "scaleVector", {
         get: () => [
           m.scalex * m.unitScale,
@@ -2363,7 +2569,10 @@ var StlViewer = class _StlViewer {
         );
       if ((supplied.mesh || supplied.data) && (features.smooth || features.edges || features.wire))
         await this._derive(m, features);
-      if (supplied.animation) this.animate_model(m.id, supplied.animation);
+      if (m.animation_state) m.center = [...m.animation_state.center];
+      if (m.animation && !m._animation)
+        this._startAnimation(m, m.animation, m.animation_state);
+      delete m.animation_state;
       delete m.mesh;
       delete m.data;
       this._invalidate();
@@ -2385,6 +2594,7 @@ var StlViewer = class _StlViewer {
     this._invalidate();
   }
   _deleteModel(m) {
+    this._stopAnimation(m, "removed");
     for (const [controller, models] of this._printJobs || [])
       if (models.has(m)) controller.abort();
     this._printCache = null;
@@ -2415,6 +2625,7 @@ var StlViewer = class _StlViewer {
     this._pool?.clear();
     for (const c of this._aborters) c.abort();
     this._aborters.clear();
+    for (const m of this._models.values()) this._stopAnimation(m, "clean");
     this._models.clear();
     this._pending.clear();
     this._jobs.clear();
@@ -2446,6 +2657,11 @@ var StlViewer = class _StlViewer {
       window.removeEventListener("resize", this._windowResize);
     this.renderer?.dispose();
     if (this.canvas) {
+      if (this._visibility)
+        this.canvas.ownerDocument.removeEventListener(
+          "visibilitychange",
+          this._visibility
+        );
       this.canvas.removeEventListener("drop", this._drop);
       this.canvas.removeEventListener("dragover", this._drag);
       this.canvas.removeEventListener("keydown", this._key);
@@ -2584,6 +2800,10 @@ var StlViewer = class _StlViewer {
   set_position(id, x, y, z) {
     return this._guard(() => {
       const m = this._model(id);
+      [x, y, z].forEach((v) => {
+        if (v !== void 0) finite(v, "position");
+      });
+      this._stopAnimation(m, "manual");
       [x, y, z].forEach((v, i) => {
         if (v !== void 0) m[["x", "y", "z"][i]] = finite(v, "position");
       });
@@ -2597,8 +2817,12 @@ var StlViewer = class _StlViewer {
       if (keepPrevious) {
         if (x / m.scalex !== y / m.scaley || x / m.scalex !== z / m.scalez)
           throw new Error("keep_prev_scale requires a uniform geometry factor");
+        this._stopAnimation(m, "manual");
         m.unitScale *= x / m.scalex;
-      } else [m.scalex, m.scaley, m.scalez] = [x, y, z];
+      } else {
+        this._stopAnimation(m, "manual");
+        [m.scalex, m.scaley, m.scalez] = [x, y, z];
+      }
       m._stats = null;
       this._invalidate();
     });
@@ -2612,6 +2836,10 @@ var StlViewer = class _StlViewer {
   set_rotation(id, x, y, z, increment = false) {
     return this._guard(() => {
       const m = this._model(id);
+      [x, y, z].forEach((v) => {
+        if (v !== void 0) finite(v, "rotation");
+      });
+      this._stopAnimation(m, "manual");
       [x, y, z].forEach((v, i) => {
         const k = ["rotationx", "rotationy", "rotationz"][i];
         if (v !== void 0)
@@ -2665,6 +2893,7 @@ var StlViewer = class _StlViewer {
       if (!["mm", "inch"].includes(units))
         throw new Error("Units must be mm or inch");
       const m = this._model(id);
+      this._stopAnimation(m, "manual");
       if (scale && m.units !== units)
         m.unitScale *= units === "inch" ? 25.4 : 1 / 25.4;
       m.units = units;
@@ -3054,6 +3283,14 @@ var StlViewer = class _StlViewer {
     this._exportBytes += working;
     let job, cancel, callbackError;
     try {
+      const snapshot = format === "vsb" ? models.map((m, index) => ({
+        id: m.id,
+        triangles: m.geometry.triangles,
+        positions: m.geometry.positions.slice(),
+        colors: m.geometry.colors?.slice() || null,
+        scale: scene.models[index].animation_state ? [1, 1, 1] : m.scaleVector,
+        center: scene.models[index].animation_state ? [0, 0, 0] : [...m.center]
+      })) : null;
       options.on_progress?.({
         loaded: 0,
         total: models.length,
@@ -3069,14 +3306,6 @@ var StlViewer = class _StlViewer {
           phase: "complete"
         });
       } else {
-        const snapshot = models.map((m) => ({
-          id: m.id,
-          triangles: m.geometry.triangles,
-          positions: m.geometry.positions.slice(),
-          colors: m.geometry.colors?.slice() || null,
-          scale: m.scaleVector,
-          center: [...m.center]
-        }));
         job = this._pool.run(
           {
             kind: "export-scene",
@@ -3162,13 +3391,21 @@ var StlViewer = class _StlViewer {
           model.orig_filename = basename(m.orig_filename || m.filename);
         for (const key of transformKeys)
           if (!key.startsWith("scale")) model[key] = m[key];
-        if (!for_vsb) {
+        if (!for_vsb || m._animation) {
           model.scalex = m.scalex * m.unitScale;
           model.scaley = m.scaley * m.unitScale;
           model.scalez = m.scalez * m.unitScale;
         }
         if (m.color) model.color = m.color;
-        if (m.animation) model.animation = structuredClone(m.animation);
+        const playback = savePlayback(m);
+        if (playback) Object.assign(model, playback);
+        else if (!for_vsb) {
+          const center = this.center_models ? m.geometry.bounds.min.map(
+            (v, i) => (v + m.geometry.bounds.max[i]) / 2
+          ) : [0, 0, 0];
+          const position = transform(modelMatrix(m), center);
+          ["x", "y", "z"].forEach((axis, i) => model[axis] = position[i]);
+        }
         data.models.push(model);
       }
     return as_js_obj ? data : JSON.stringify(data);
@@ -3182,7 +3419,10 @@ var StlViewer = class _StlViewer {
   get_vsb() {
     return {
       vsj: this.get_vsj(true, true, true),
-      files: [...this._models.values()].filter((m) => m.geometry).map((m) => ({ id: m.id, bin: this.get_stl_bin(m.id) }))
+      files: [...this._models.values()].filter((m) => m.geometry).map((m) => ({
+        id: m.id,
+        bin: m._animation ? exportSTL(m.geometry, [1, 1, 1], [0, 0, 0]) : this.get_stl_bin(m.id)
+      }))
     };
   }
   async get_vsb_blob() {
@@ -3263,20 +3503,57 @@ var StlViewer = class _StlViewer {
         );
       else if (scene.grid) this.set_grid(true);
       if (scene.camera_state) this._restoreCamera = scene.camera_state;
-      for (const input of scene.models) {
-        if (!input || typeof input !== "object")
-          throw new Error("Invalid scene model");
-        const model = modelOptions(input);
-        delete model.mesh;
-        delete model.data;
-        delete model.local_file;
-        if (files) {
-          if (typeof model.filename !== "string" || !Object.hasOwn(files, model.filename))
-            throw new Error("VSB model file is missing");
-          model.local_file = new File([files[model.filename]], model.filename);
-        } else if (model.filename)
-          model.filename = new URL(model.filename, base).href;
-        this.add_model(model);
+      const incoming = [];
+      try {
+        for (const input of scene.models) {
+          if (!input || typeof input !== "object")
+            throw new Error("Invalid scene model");
+          const model = modelOptions(input);
+          delete model.mesh;
+          delete model.data;
+          delete model.local_file;
+          if (files) {
+            if (typeof model.filename !== "string" || !Object.hasOwn(files, model.filename))
+              throw new Error("VSB model file is missing");
+            model.local_file = new File(
+              [files[model.filename]],
+              model.filename
+            );
+          } else if (model.filename)
+            model.filename = new URL(model.filename, base).href;
+          const id = model.id === void 0 || model.id === -1 ? this.max_model_id + 1 : model.id;
+          if (this._models.has(id))
+            throw new Error(`Invalid or duplicate model id: ${id}`);
+          this.add_model({
+            ...model,
+            id,
+            animation: null,
+            animation_state: null
+          });
+          const m = this._models.get(id);
+          if (!m) throw new Error(this.error || "Invalid scene model");
+          m._sceneImportPending = true;
+          incoming.push({ m, model, pending: this._pending.get(id) });
+        }
+        await Promise.all(incoming.map((item) => item.pending));
+        if (generation !== this._generation || this.killsign) return;
+        for (const { m, model } of incoming) {
+          if (this._models.get(m.id) !== m || !m.geometry)
+            throw new Error("A scene model could not be opened");
+          if (model.animation)
+            createPlayback(model.animation, m, model.animation_state);
+          else if (model.animation_state)
+            throw new Error("Playback state needs an animation");
+        }
+        for (const { m, model } of incoming) {
+          if (model.animation)
+            this._startAnimation(m, model.animation, model.animation_state);
+          m._sceneImportPending = false;
+        }
+      } catch (error) {
+        for (const { m } of incoming)
+          if (this._models.get(m.id) === m) this.remove_model(m.id);
+        throw error;
       }
     })().catch((e) => {
       if (generation === this._generation && e.name !== "AbortError")
@@ -3298,56 +3575,101 @@ var StlViewer = class _StlViewer {
     return this._guard(() => {
       const m = this._model(id);
       if (!animation) {
-        m.animation = null;
-        m._animation = null;
+        this._stopAnimation(m, "stopped");
+        this._invalidate();
         return;
       }
-      const copy = structuredClone(animation), tracks = [];
-      for (const mode of ["delta", "exact"])
-        if (copy[mode]) {
-          const a = copy[mode];
-          positive(a.msec ?? 300, "animation duration");
-          const values = {};
-          for (const key of transformKeys) {
-            const value = a[key] ?? (key.startsWith("scale") ? a.scale : void 0);
-            if (value !== void 0) {
-              finite(value, key);
-              if (mode === "exact" && key.startsWith("scale"))
-                positive(value, key);
-              values[key] = value;
-            }
-          }
-          tracks.push({
-            mode,
-            values,
-            duration: a.msec ?? 300,
-            loop: mode === "delta" && !!a.loop,
-            from: Object.fromEntries(transformKeys.map((k) => [k, m[k]]))
-          });
-        }
-      if (!tracks.length) throw new Error("Animation needs delta or exact");
-      m.animation = copy;
-      m._animation = { start: null, tracks };
+      this._startAnimation(m, animation);
+      this._invalidate();
+    });
+  }
+  _startAnimation(m, definition, saved) {
+    const playback = createPlayback(definition, m, saved);
+    if (m._animation) this._stopAnimation(m, "replaced");
+    if (saved) m.center = [...saved.center];
+    m.animation = playback.animation;
+    m._animation = playback;
+    delete m.animation_state;
+    m._animationResult = null;
+    const running = evaluatePlayback(playback, m);
+    if (running) this._animationEvent(m, saved ? "restored" : "started");
+    else this._completeAnimation(m);
+  }
+  _animationEvent(m, reason) {
+    const state = this._animationState(m);
+    queueMicrotask(() => {
+      this._callback("animation_state_callback", m.id, state, reason);
+      if (reason === "completed")
+        this._callback("animation_complete_callback", m.id, state);
+    });
+  }
+  _animationState(m) {
+    return m._animation ? playbackState(m._animation, !!this._animationSuspended) : {
+      ...m._animationResult ?? { status: "idle", elapsed_ms: 0 },
+      suspended: false,
+      tracks: []
+    };
+  }
+  _stopAnimation(m, reason) {
+    if (!m._animation && !m.animation) return;
+    m._animationResult = {
+      status: "stopped",
+      elapsed_ms: m._animation?.elapsed_ms ?? 0
+    };
+    m._animation = null;
+    m.animation = null;
+    delete m.animation_state;
+    this._animationEvent(m, reason);
+  }
+  _completeAnimation(m) {
+    m._animationResult = {
+      status: "completed",
+      elapsed_ms: m._animation.elapsed_ms
+    };
+    m._animation = null;
+    m.animation = null;
+    this._animationEvent(m, "completed");
+  }
+  pause_model_animation(id) {
+    return this._guard(() => {
+      const m = this._model(id);
+      if (!m._animation || m._animation.paused) return;
+      m._animation.paused = true;
+      m._animation.last_time = null;
+      this._animationEvent(m, "paused");
+      this._invalidate();
+    });
+  }
+  resume_model_animation(id) {
+    return this._guard(() => {
+      const m = this._model(id);
+      if (!m._animation || !m._animation.paused) return;
+      m._animation.paused = false;
+      m._animation.last_time = null;
+      this._animationEvent(m, "resumed");
       this._invalidate();
     });
   }
+  get_model_animation_state(id) {
+    return this._guard(() => this._animationState(this._model(id)));
+  }
+  _suspendAnimations(suspended) {
+    this._animationSuspended = !!suspended;
+    this._lastTime = 0;
+    for (const m of this._models.values())
+      if (m._animation) m._animation.last_time = null;
+    if (suspended) {
+      cancelAnimationFrame(this._frame);
+      this._frame = 0;
+    } else this._invalidate();
+  }
   _animate(m, time) {
-    const animation = m._animation;
-    animation.start ??= time;
-    let running = false;
-    for (const t of animation.tracks) {
-      const fraction = (time - animation.start) / t.duration, p = t.loop ? fraction : Math.min(fraction, 1);
-      running ||= t.loop || fraction < 1;
-      for (const [k, v] of Object.entries(t.values))
-        m[k] = k.startsWith("scale") ? Math.max(
-          1e-6,
-          t.mode === "delta" ? t.from[k] + v * p : t.from[k] + (v - t.from[k]) * p
-        ) : t.mode === "delta" ? t.from[k] + v * p : t.from[k] + (v - t.from[k]) * p;
-    }
-    m._stats = null;
-    if (!running) {
-      m._animation = null;
-      m.animation = null;
+    if (this._animationSuspended || !m._animation) return;
+    try {
+      if (!advancePlayback(m._animation, m, time)) this._completeAnimation(m);
+    } catch (error) {
+      this._stopAnimation(m, "error");
+      this._error(error);
     }
   }
   async get_image_blob(type = "image/png") {
@@ -3371,7 +3693,7 @@ var StlViewer = class _StlViewer {
 };
 var viewer_default = StlViewer;
 
-// src/v2/memory-policy.js
+// src/memory-policy.js
 var GiB = 1024 ** 3;
 var MiB = 1024 ** 2;
 function memoryPolicy(reportedGiB) {
@@ -3401,10 +3723,10 @@ async function estimateFile(file) {
   return 64 * MiB + (file.size || 0) * 3;
 }
 
-// src/v2/model-transform.js
+// src/model-transform.js
 var axes = ["x", "y", "z"];
 var vector2 = (p) => axes.map((a) => p[a]);
-var object = (p) => Object.fromEntries(axes.map((a, i) => [a, p[i]]));
+var object2 = (p) => Object.fromEntries(axes.map((a, i) => [a, p[i]]));
 var dot2 = (a, b) => a.reduce((sum, v, i) => sum + v * b[i], 0);
 var norm2 = (a) => {
   const n = Math.hypot(...a) || 1;
@@ -3435,7 +3757,7 @@ function rotationMatrix(degrees = { x: 0, y: 0, z: 0 }) {
 }
 var centerOf = (bounds) => bounds.min.map((v, i) => (v + bounds.max[i]) / 2);
 function modelCenter(model) {
-  return object(
+  return object2(
     centerOf(model.bounds).map((v, i) => v + model.position[axes[i]])
   );
 }
@@ -3447,7 +3769,7 @@ function modelRadius(model) {
 }
 function enginePosition(model) {
   const c = centerOf(model.bounds), rotated = transform2(rotationMatrix(model.rotation), c);
-  return object(c.map((v, i) => model.position[axes[i]] + v - rotated[i]));
+  return object2(c.map((v, i) => model.position[axes[i]] + v - rotated[i]));
 }
 function modelBounds(model) {
   if (!model.rotation || !Object.values(model.rotation).some((v) => v % 360))
@@ -3500,12 +3822,12 @@ function depthPosition(model, camera, amount) {
   const clearance = Math.max(model.radius || 1e-6, 1e-6) * 1.1 / Math.max(0.05, dot2(direction, forward));
   const desired = (distance || clearance) * Math.exp(Math.max(-6, Math.min(6, amount)));
   const next = amount < 0 ? Math.max(Math.min(distance, clearance), desired) : Math.max(distance, Math.min(1e12, desired));
-  return object(
+  return object2(
     vector2(model.position).map((v, i) => v + direction[i] * (next - distance))
   );
 }
 
-// src/v2/scene-layout.js
+// src/scene-layout.js
 function scenePlacement(models, mode) {
   if (mode === "custom")
     return models.map((m) => ({
@@ -3543,7 +3865,7 @@ function sceneFloor(models, placement) {
   ) : 0;
 }
 
-// src/v2/model-move.js
+// src/model-move.js
 var vector3 = (p) => [p.x, p.y, p.z];
 var sub2 = (a, b) => a.map((v, i) => v - b[i]);
 var dot3 = (a, b) => a.reduce((n, v, i) => n + v * b[i], 0);
@@ -3709,7 +4031,7 @@ function bindModelMove(canvas, {
   };
 }
 
-// src/v2/drop-source.js
+// src/drop-source.js
 function dropKind(transfer) {
   const types = Array.from(transfer?.types || [], (type) => type.toLowerCase());
   if (types.includes("files") || transfer?.files?.length) return "files";
@@ -3749,7 +4071,7 @@ function droppedURLs(transfer) {
   return [...urls];
 }
 
-// src/v2/app-export.js
+// src/app-export.js
 var exportControls = [
   "save-button",
   "save-dialog",
@@ -3919,7 +4241,7 @@ function bindAppExport({
   };
 }
 
-// src/v2/app-print.js
+// src/app-print.js
 var printControls = [
   "print-button",
   "print-panel",
@@ -3953,6 +4275,7 @@ function bindAppPrint({
 }) {
   let job = null, report = null, timer = null, disposed = false, scopeKey = "", previousScope = "", unavailable = false;
   const panel = $("print-panel"), document2 = panel.ownerDocument;
+  const pausedForCheck = /* @__PURE__ */ new Set();
   const summary = {
     issues_found: "Issues found",
     incomplete: "Check incomplete",
@@ -3974,6 +4297,15 @@ function bindAppPrint({
     const s = getState();
     $("print-button").disabled = s.busy || !s.models.length;
     if (panel.hidden) return;
+    for (const id of pausedForCheck)
+      if (!s.models.some((m) => m.id === id) || getViewer()?.get_model_animation_state(id)?.status !== "paused")
+        pausedForCheck.delete(id);
+    if ($("print-resume")) {
+      $("print-resume").hidden = !pausedForCheck.size;
+      $("print-resume").disabled = !!job || s.busy;
+    }
+    if ($("print-animation-note"))
+      $("print-animation-note").hidden = !pausedForCheck.size;
     const wasUnavailable = unavailable;
     unavailable = s.busy || !s.models.length;
     $("print-run").disabled = !!job || unavailable;
@@ -4120,6 +4452,19 @@ function bindAppPrint({
   listen($("print-fields"), "change", changed);
   listen($("print-clear"), "click", clear);
   listen($("print-cancel"), "click", cancel);
+  if ($("print-resume"))
+    listen($("print-resume"), "click", () => {
+      if (job || getState().busy) return;
+      for (const id of pausedForCheck)
+        if (getState().models.some((m) => m.id === id) && getViewer().get_model_animation_state(id)?.status === "paused")
+          getViewer().resume_model_animation(id);
+      pausedForCheck.clear();
+      report = null;
+      clear();
+      $("print-results").replaceChildren();
+      $("print-status").textContent = "Animation resumed. Pause and run the check again for the new pose.";
+      sync();
+    });
   listen($("print-results"), "click", (e) => {
     const b = e.target.closest("button[data-issue]");
     if (!b || !report) return;
@@ -4163,6 +4508,13 @@ function bindAppPrint({
         }
       }
       scopeKey = key();
+      for (const id of stateIds()) {
+        if (getViewer().get_model_animation_state(id)?.status === "running") {
+          getViewer().pause_model_animation(id);
+          pausedForCheck.add(id);
+        }
+      }
+      sync();
       const result = await getViewer().check_printability({
         model_ids: stateIds(),
         level: $("print-level").value,
@@ -4200,11 +4552,216 @@ function bindAppPrint({
       disposed = true;
       close(false);
       report = null;
+      pausedForCheck.clear();
     }
   };
 }
 
-// src/v2/app.js
+// src/app-animation.js
+var animationControls = [
+  "animation-details",
+  "animation-fields",
+  "animation-axis",
+  "animation-seconds",
+  "animation-direction",
+  "animation-play",
+  "animation-pause",
+  "animation-stop",
+  "animation-status",
+  "animation-error"
+];
+var axes2 = ["x", "y", "z"];
+function syncAnimatedRecord(record, model) {
+  if (!record || !model?.geometry) return;
+  record.bounds = Object.fromEntries(
+    ["min", "max"].map((key) => [
+      key,
+      model.geometry.bounds[key].map(
+        (v, i) => (v - model.center[i]) * model.scaleVector[i]
+      )
+    ])
+  );
+  record.rotation = Object.fromEntries(
+    axes2.map((a) => [a, model["rotation" + a] * 180 / Math.PI % 360])
+  );
+  record.position = { x: 0, y: 0, z: 0 };
+  const offset = enginePosition(record);
+  for (const a of axes2) record.position[a] = model[a] - offset[a];
+}
+function centerAnimationPivot(record, model) {
+  syncAnimatedRecord(record, model);
+  const center = model.geometry.bounds.min.map(
+    (v, i) => (v + model.geometry.bounds.max[i]) / 2
+  );
+  const delta = center.map(
+    (v, i) => (v - model.center[i]) * model.scaleVector[i]
+  );
+  const rotation2 = rotationMatrix(record.rotation);
+  const original = record.originalPosition || { x: 0, y: 0, z: 0 };
+  record.originalPosition = Object.fromEntries(
+    axes2.map((a, i) => [a, original[a] + delta[i]])
+  );
+  for (let i = 0; i < 3; i++)
+    model[axes2[i]] += delta.reduce(
+      (sum, v, j) => sum + rotation2[i * 3 + j] * v,
+      0
+    );
+  model.center = center;
+  record.animationPivot = true;
+  syncAnimatedRecord(record, model);
+}
+function spinDefinition(axis, seconds, direction) {
+  if (!axes2.includes(axis) || !Number.isFinite(seconds) || seconds < 0.1 || seconds > 3600 || !["1", "-1"].includes(direction))
+    throw new Error("Choose an axis and a duration from 0.1 to 3,600 seconds.");
+  return {
+    delta: {
+      ["rotation" + axis]: 2 * Math.PI * Number(direction),
+      msec: seconds * 1e3,
+      loop: true
+    }
+  };
+}
+function bindAppAnimation({
+  $,
+  listen,
+  window: window2,
+  getState,
+  getViewer,
+  beforePlay,
+  refreshPose,
+  announce
+}) {
+  const settings = /* @__PURE__ */ new Map();
+  let selected = null, timer = null, disposed = false;
+  const state = () => {
+    const s = getState();
+    return {
+      ...s,
+      playback: s.selectedId == null ? null : getViewer()?.get_model_animation_state(s.selectedId)
+    };
+  };
+  function sync() {
+    if (disposed) return;
+    const s = state(), available = s.models.some((m) => m.id === s.selectedId);
+    for (const id of settings.keys())
+      if (!s.models.some((m) => m.id === id)) settings.delete(id);
+    $("animation-details").hidden = !available;
+    $("animation-fields").disabled = s.busy || !available;
+    if (selected !== s.selectedId) {
+      selected = s.selectedId;
+      let value = settings.get(selected);
+      if (!value) {
+        value = { axis: "z", seconds: 5, direction: "1" };
+        const a = getViewer()?._models.get(selected)?.animation;
+        const entries = Object.entries(a?.delta || {}).filter(
+          ([k, v]) => k.startsWith("rotation") && v !== 0
+        );
+        if (a?.delta?.loop && !a.exact && entries.length === 1) {
+          value = {
+            axis: entries[0][0].slice(-1),
+            seconds: a.delta.msec * 2 * Math.PI / Math.abs(entries[0][1]) / 1e3,
+            direction: entries[0][1] < 0 ? "-1" : "1"
+          };
+        }
+        settings.set(selected, value);
+      }
+      $("animation-axis").value = value.axis;
+      $("animation-seconds").value = value.seconds;
+      $("animation-direction").value = value.direction;
+      $("animation-error").hidden = true;
+    }
+    const status = s.playback?.status || "idle", active = ["running", "paused"].includes(status);
+    $("animation-play").textContent = active ? "Restart spin" : "Play";
+    $("animation-pause").textContent = status === "paused" ? "Resume" : "Pause";
+    $("animation-pause").disabled = !active;
+    $("animation-stop").disabled = !active;
+    const label = {
+      idle: "Ready",
+      running: "Playing",
+      paused: "Paused",
+      stopped: "Stopped",
+      completed: "Finished"
+    }[status];
+    const text = `${label}. ${active ? "Stop keeps the current pose." : "Spin the selected model around its center."}`;
+    if ($("animation-status").textContent !== text)
+      $("animation-status").textContent = text;
+    if (status === "running" && !timer)
+      timer = window2.setInterval(() => {
+        if (!disposed && !window2.document.hidden) refreshPose();
+      }, 250);
+    if (status !== "running" && timer) {
+      window2.clearInterval(timer);
+      timer = null;
+    }
+  }
+  function play(keepPaused = false) {
+    const s = state();
+    if (s.busy || s.selectedId == null) return;
+    try {
+      const value = {
+        axis: $("animation-axis").value,
+        seconds: $("animation-seconds").valueAsNumber,
+        direction: $("animation-direction").value
+      };
+      const definition = spinDefinition(
+        value.axis,
+        value.seconds,
+        value.direction
+      );
+      beforePlay(s.selectedId);
+      getViewer().animate_model(s.selectedId, definition);
+      if (keepPaused && s.playback?.status === "paused")
+        getViewer().pause_model_animation(s.selectedId);
+      settings.set(s.selectedId, value);
+      $("animation-error").hidden = true;
+      announce(
+        keepPaused && s.playback?.status === "paused" ? "Spin updated. Still paused." : "Animation playing."
+      );
+      sync();
+    } catch (error) {
+      $("animation-error").textContent = error.message;
+      $("animation-error").hidden = false;
+    }
+  }
+  listen($("animation-play"), "click", () => play());
+  listen($("animation-pause"), "click", () => {
+    const s = state();
+    if (s.busy || s.selectedId == null) return;
+    getViewer()[s.playback?.status === "paused" ? "resume_model_animation" : "pause_model_animation"](s.selectedId);
+    sync();
+  });
+  listen($("animation-stop"), "click", () => {
+    const s = state();
+    if (!s.busy && s.selectedId != null)
+      getViewer().animate_model(s.selectedId, null);
+    sync();
+  });
+  for (const id of [
+    "animation-axis",
+    "animation-seconds",
+    "animation-direction"
+  ])
+    listen($(id), "change", () => {
+      if (["running", "paused"].includes(state().playback?.status)) play(true);
+      else
+        settings.set(selected, {
+          axis: $("animation-axis").value,
+          seconds: $("animation-seconds").valueAsNumber,
+          direction: $("animation-direction").value
+        });
+    });
+  sync();
+  return {
+    sync,
+    dispose() {
+      disposed = true;
+      window2.clearInterval(timer);
+      settings.clear();
+    }
+  };
+}
+
+// src/app.js
 var mountedRoots = /* @__PURE__ */ new WeakMap();
 var requiredControls = [
   "background-color",
@@ -4309,6 +4866,8 @@ function mountViewstlApp(root, options = {}) {
     missing.push(...exportControls.filter((id) => !$(id)));
   if (printControls.some((id) => $(id)))
     missing.push(...printControls.filter((id) => !$(id)));
+  if (animationControls.some((id) => $(id)))
+    missing.push(...animationControls.filter((id) => !$(id)));
   if (missing.length)
     throw new Error("Missing ViewSTL controls: " + missing.join(", "));
   const abort = new window2.AbortController();
@@ -4336,6 +4895,7 @@ function mountViewstlApp(root, options = {}) {
   let viewerPromise, viewer, generation = 0, appearanceRequest = 0, modelID = null, nextID = 0, loadingID = null;
   let exportUI;
   let printUI;
+  let animationUI;
   let sceneImport;
   let draining = false, busy = false, gridEnabled = false, gridHeight = 0, gridSpacing = 1, moveMode = false, transformTool = "move", modelMover, dragArrangement, background = "transparent";
   const viewNames = {
@@ -4409,6 +4969,7 @@ function mountViewstlApp(root, options = {}) {
     $("background-value").textContent = background === "transparent" ? "Default" : background.toUpperCase();
   }
   function syncControls() {
+    syncAnimatedRecord(records.get(modelID), viewer?._models.get(modelID));
     const info = modelID === null ? null : viewer.get_model_info(modelID), mode = info?.display === "smooth" ? "flat" : info?.display || "flat";
     for (const input of modeInputs) {
       input.checked = input.value === mode;
@@ -4437,6 +4998,7 @@ function mountViewstlApp(root, options = {}) {
     syncPosition();
     exportUI?.sync();
     printUI?.sync();
+    animationUI?.sync();
   }
   function populateInfo() {
     if (modelID === null) return;
@@ -4516,6 +5078,10 @@ function mountViewstlApp(root, options = {}) {
   }
   function arrangeScene() {
     setMoveMode(false);
+    for (const record of records.values())
+      syncAnimatedRecord(record, viewer?._models.get(record.id));
+    if ($("scene-arrangement").value === "custom") return;
+    for (const record of records.values()) prepareManual(record.id);
     if ($("scene-arrangement").value === "original")
       for (const record of records.values())
         record.rotation = {
@@ -4532,19 +5098,20 @@ function mountViewstlApp(root, options = {}) {
     updateGrid();
     viewer?.set_auto_zoom();
   }
-  function syncPosition() {
+  function syncPosition(preserveFocus = false) {
     const record = records.get(modelID);
     for (const axis of ["x", "y", "z"]) {
       const input = $("position-" + axis);
-      input.value = Number((record?.position?.[axis] || 0).toPrecision(12));
+      if (!preserveFocus || document2.activeElement !== input)
+        input.value = Number((record?.position?.[axis] || 0).toPrecision(12));
       input.disabled = !record;
       input.removeAttribute("aria-invalid");
     }
     $("position-error").hidden = true;
-    $("position-units").textContent = record?.units === "mm" ? "Offset from file coordinates, in mm." : "Offset from file coordinates, in model units.";
+    $("position-units").textContent = record?.animationPivot ? "Position of the model center in the scene." : record?.units === "mm" ? "Offset from file coordinates, in mm." : "Offset from file coordinates, in model units.";
     $("move-model-button").disabled = !record || busy;
     $("reset-position").disabled = !record;
-    syncRotation();
+    syncRotation(preserveFocus);
     for (const id of [
       "rotate-model-button",
       "depth-model-button",
@@ -4573,14 +5140,16 @@ function mountViewstlApp(root, options = {}) {
     viewer.set_position(record.id, p.x, p.y, p.z);
   }
   function selectedTransform() {
+    prepareManual(modelID);
     const record = records.get(modelID);
     return record ? { ...record, center: modelCenter(record), radius: modelRadius(record) } : null;
   }
-  function syncRotation() {
+  function syncRotation(preserveFocus = false) {
     const record = records.get(modelID);
     for (const axis of ["x", "y", "z"]) {
       const input = $("rotation-" + axis);
-      input.value = Number((record?.rotation?.[axis] || 0).toPrecision(10));
+      if (!preserveFocus || document2.activeElement !== input)
+        input.value = Number((record?.rotation?.[axis] || 0).toPrecision(10));
       input.disabled = !record;
       input.removeAttribute("aria-invalid");
     }
@@ -4626,6 +5195,7 @@ function mountViewstlApp(root, options = {}) {
     modelMover?.setEnabled(false);
     transformTool = tool;
     moveMode = !!enabled && modelID !== null && !busy;
+    if (moveMode) prepareManual(modelID);
     modelMover?.setEnabled(moveMode);
     syncTool();
     $("move-mode").hidden = !moveMode;
@@ -4649,6 +5219,7 @@ function mountViewstlApp(root, options = {}) {
     const input = $("rotation-" + axis);
     listen(input, "input", () => {
       if (modelID === null || !input.value.trim()) return;
+      prepareManual(modelID);
       if (applyRotation(
         modelID,
         { ...records.get(modelID).rotation, [axis]: input.valueAsNumber },
@@ -4660,6 +5231,7 @@ function mountViewstlApp(root, options = {}) {
     });
     listen(input, "change", () => {
       if (modelID === null) return;
+      prepareManual(modelID);
       if (!input.value.trim() || !applyRotation(modelID, {
         ...records.get(modelID).rotation,
         [axis]: input.valueAsNumber
@@ -4672,6 +5244,7 @@ function mountViewstlApp(root, options = {}) {
   listen($("reset-rotation"), "click", () => {
     setMoveMode(false);
     if (modelID !== null) {
+      prepareManual(modelID);
       applyRotation(modelID, {
         ...records.get(modelID).originalRotation || { x: 0, y: 0, z: 0 }
       });
@@ -4711,6 +5284,7 @@ function mountViewstlApp(root, options = {}) {
     const input = $("position-" + axis);
     listen(input, "input", () => {
       if (modelID === null || !input.value.trim()) return;
+      prepareManual(modelID);
       if (applyPosition(
         modelID,
         { ...records.get(modelID).position, [axis]: input.valueAsNumber },
@@ -4722,6 +5296,7 @@ function mountViewstlApp(root, options = {}) {
     });
     listen(input, "change", () => {
       if (modelID === null) return;
+      prepareManual(modelID);
       if (!input.value.trim() || !applyPosition(modelID, {
         ...records.get(modelID).position,
         [axis]: input.valueAsNumber
@@ -4738,6 +5313,7 @@ function mountViewstlApp(root, options = {}) {
   listen($("reset-position"), "click", () => {
     setMoveMode(false);
     if (modelID !== null) {
+      prepareManual(modelID);
       applyPosition(modelID, {
         ...records.get(modelID).originalPosition || { x: 0, y: 0, z: 0 }
       });
@@ -4788,6 +5364,29 @@ function mountViewstlApp(root, options = {}) {
     renderScene();
     announce(name + " removed.");
   }
+  function prepareManual(id) {
+    if (!records.has(id)) return;
+    syncAnimatedRecord(records.get(id), viewer?._models.get(id));
+    viewer?.animate_model(id, null);
+  }
+  function refreshAnimatedPose() {
+    if (disposed || modelID === null) return;
+    syncAnimatedRecord(records.get(modelID), viewer?._models.get(modelID));
+    if (!$("scene-panel").hidden && $("position-details").open)
+      syncPosition(true);
+  }
+  function animationChanged(id, state, reason) {
+    if (disposed) return;
+    if (reason === "restored" && state.status === "running" && window2.matchMedia?.("(prefers-reduced-motion: reduce)").matches)
+      viewer.pause_model_animation(id);
+    syncAnimatedRecord(records.get(id), viewer?._models.get(id));
+    if (["started", "restored", "resumed"].includes(reason))
+      $("scene-arrangement").value = "custom";
+    if (id === modelID) refreshAnimatedPose();
+    animationUI?.sync();
+    printUI?.sync();
+    options.animation_state_callback?.(id, state, reason);
+  }
   async function getViewer() {
     if (!viewerPromise)
       viewerPromise = Promise.resolve().then(async () => {
@@ -4802,6 +5401,10 @@ function mountViewstlApp(root, options = {}) {
           center_models: false,
           bg_color: background,
           allow_drag_and_drop: false,
+          animation_state_callback: animationChanged,
+          animation_complete_callback: (...args) => {
+            if (!disposed) options.animation_complete_callback?.(...args);
+          },
           camera_state: {
             position: { x: 90, y: -130, z: 90 },
             target: { x: 0, y: 0, z: 0 },
@@ -5383,6 +5986,26 @@ function mountViewstlApp(root, options = {}) {
       },
       announce
     });
+  if ($("animation-details"))
+    animationUI = bindAppAnimation({
+      $,
+      listen,
+      window: window2,
+      getState: () => ({
+        busy,
+        selectedId: modelID,
+        models: [...records.values()]
+      }),
+      getViewer: () => viewer,
+      beforePlay(id) {
+        setMoveMode(false);
+        prepareManual(id);
+        centerAnimationPivot(records.get(id), viewer._models.get(id));
+        $("scene-arrangement").value = "custom";
+      },
+      refreshPose: refreshAnimatedPose,
+      announce
+    });
   updateGrid();
   setBusy(false);
   setMoveMode(false);
@@ -5407,6 +6030,8 @@ function mountViewstlApp(root, options = {}) {
     },
     getState() {
       assertActive();
+      for (const record of records.values())
+        syncAnimatedRecord(record, viewer?._models.get(record.id));
       return {
         selectedId: modelID,
         busy,
@@ -5419,7 +6044,8 @@ function mountViewstlApp(root, options = {}) {
           units: record.units,
           position: { ...record.position },
           rotation: { ...record.rotation },
-          color: record.color
+          color: record.color,
+          animation: viewer.get_model_animation_state(record.id)
         }))
       };
     },
@@ -5427,6 +6053,7 @@ function mountViewstlApp(root, options = {}) {
       if (disposed) return;
       exportUI?.dispose();
       printUI?.dispose();
+      animationUI?.dispose();
       cancelLoading();
       setMoveMode(false);
       appearanceRequest++;