keyframes 0.1.0__py3-none-any.whl

keyframes/static/components/keyframes-excalidraw.js

@@ -0,0 +1,189 @@
+import { SwComponent } from "../runtime/component.js";
+
+const STEP_FRAME = /^step-(\d+)$/i;
+const FRAME_RENDERING = { enabled: true, name: false, outline: false, clip: false };
+const BOUND_TEXT_PADDING = 5;
+const ALIGN = { left: 0, top: 0, center: 0.5, middle: 0.5, right: 1, bottom: 1 };
+
+const style = document.createElement("style");
+style.textContent = `
+keyframes-excalidraw { display: block; position: relative; width: 100%; height: 100%; }
+keyframes-excalidraw > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s ease; }
+keyframes-excalidraw > svg.is-hidden { opacity: 0; }
+html.keyframes-print keyframes-excalidraw > svg { transition: none; }
+`;
+document.head.append(style);
+
+let excalidraw = null;
+let svgCount = 0;
+
+function loadExcalidraw() {
+  window.EXCALIDRAW_ASSET_PATH ??= import.meta.resolve("@excalidraw/excalidraw/dist/prod/");
+  return (excalidraw ??= import("@excalidraw/excalidraw"));
+}
+
+function stepResolver(elements) {
+  const byId = new Map(elements.map((el) => [el.id, el]));
+  const frameSteps = new Map();
+  for (const el of elements) {
+    const match = el.type === "frame" && el.name?.match(STEP_FRAME);
+    if (match) frameSteps.set(el.id, Number(match[1]));
+  }
+  const stepOf = (el) => {
+    const own = el.customData?.step ?? frameSteps.get(el.id) ?? frameSteps.get(el.frameId);
+    if (own != null) return Number(own);
+    const container = byId.get(el.containerId);
+    return container ? stepOf(container) : 0;
+  };
+  return stepOf;
+}
+
+function textBox({ type, x, y, width, height }) {
+  const inset = { ellipse: 1 - Math.SQRT1_2, diamond: 0.5 }[type] ?? 0;
+  return {
+    x: x + BOUND_TEXT_PADDING + (width * inset) / 2,
+    y: y + BOUND_TEXT_PADDING + (height * inset) / 2,
+    width: width * (1 - inset) - 2 * BOUND_TEXT_PADDING,
+    height: height * (1 - inset) - 2 * BOUND_TEXT_PADDING,
+  };
+}
+
+function unsizeText(el) {
+  const sized = el.width > 0 && el.height > 0;
+  return el.type === "text" && !sized ? { ...el, width: undefined, height: undefined } : el;
+}
+
+function placeBoundText(elements) {
+  const byId = new Map(elements.map((el) => [el.id, el]));
+  return elements.map((el) => {
+    const container = el.type === "text" && byId.get(el.containerId);
+    if (!container || container.type === "arrow") return el;
+    const box = textBox(container);
+    const x = box.x + (box.width - el.width) * (ALIGN[el.textAlign] ?? 0.5);
+    const y = box.y + (box.height - el.height) * (ALIGN[el.verticalAlign] ?? 0.5);
+    return { ...el, x, y };
+  });
+}
+
+function scopeIds(svg) {
+  const prefix = `keyframes-excalidraw-${++svgCount}-`;
+  const ids = new Set();
+  for (const el of svg.querySelectorAll("[id]")) {
+    ids.add(el.id);
+    el.id = prefix + el.id;
+  }
+  const scope = (ref, id) => (ids.has(id) ? ref.replace(id, prefix + id) : ref);
+  for (const el of svg.querySelectorAll("*")) {
+    for (const attr of el.attributes) {
+      const value = attr.value.replace(/url\(#([^)]+)\)/g, scope).replace(/^#(.+)$/, scope);
+      if (value !== attr.value) attr.value = value;
+    }
+  }
+}
+
+async function loadSvgFonts(svg) {
+  const texts = [...svg.querySelectorAll("text")];
+  await Promise.all(
+    texts.map((t) =>
+      document.fonts.load(`${t.getAttribute("font-size")} ${t.getAttribute("font-family")}`, t.textContent),
+    ),
+  );
+}
+
+class SwExcalidraw extends SwComponent {
+  #scene = null;
+  #layers = [];
+
+  connectedCallback() {
+    if (this.#scene) return;
+    this.#scene = this.#fetchScene();
+    this.#scene.catch(() => {});
+  }
+
+  prepare() {
+    return this.#scene;
+  }
+
+  async init() {
+    const [lib, data] = await Promise.all([loadExcalidraw(), this.#scene]);
+    const { elements, appState, files } = await this.#restore(lib, data);
+    const stepOf = stepResolver(elements);
+    const steps = [...new Set(elements.map(stepOf))].sort((a, b) => a - b);
+    const background = this.getAttribute("background");
+    const exportAppState = {
+      ...appState,
+      exportWithDarkMode: this.hasAttribute("dark"),
+      viewBackgroundColor: background || appState.viewBackgroundColor,
+      frameRendering: FRAME_RENDERING,
+    };
+    const exportPadding = Number(this.getAttribute("padding") ?? 16);
+    this.#layers = await Promise.all(
+      steps.map(async (n, i) => {
+        const svg = await lib.exportToSvg({
+          elements: elements.map((el) => (stepOf(el) === n ? el : { ...el, opacity: 0 })),
+          appState: { ...exportAppState, exportBackground: background != null && i === 0 },
+          files,
+          exportPadding,
+        });
+        scopeIds(svg);
+        this.#fitSvg(svg);
+        svg.dataset.layer = n;
+        return svg;
+      }),
+    );
+    this.replaceChildren(...this.#layers, ...this.querySelectorAll(":scope > [data-step]"));
+  }
+
+  destroy() {
+    for (const svg of this.#layers) svg.remove();
+    this.#layers = [];
+  }
+
+  step(n) {
+    for (const svg of this.#layers) svg.classList.toggle("is-hidden", Number(svg.dataset.layer) > n);
+  }
+
+  async #fetchScene() {
+    const response = await fetch(this.resolveUrl(this.getAttribute("src")), { cache: "no-store" });
+    if (!response.ok) throw new Error(`${response.status} ${response.statusText}: ${response.url}`);
+    const scene = await response.json();
+    this.#addStepMarkers(scene.elements ?? []);
+    return scene;
+  }
+
+  #addStepMarkers(elements) {
+    const live = elements.filter((el) => !el.isDeleted);
+    const stepOf = stepResolver(live);
+    for (const n of new Set(live.map(stepOf))) {
+      if (n <= 0) continue;
+      const marker = document.createElement("span");
+      marker.dataset.step = n;
+      marker.hidden = true;
+      this.append(marker);
+    }
+  }
+
+  async #restore({ exportToSvg, restore }, data) {
+    data = { ...data, elements: (data.elements ?? []).map(unsizeText) };
+    const draft = restore(data, null, null);
+    const probe = await exportToSvg({ ...draft, exportPadding: 0 });
+    probe.style.cssText = "position: absolute; visibility: hidden";
+    this.append(probe);
+    try {
+      await loadSvgFonts(probe);
+      const scene = restore(data, null, null, { refreshDimensions: true, repairBindings: true });
+      return { ...scene, elements: placeBoundText(scene.elements) };
+    } finally {
+      probe.remove();
+    }
+  }
+
+  #fitSvg(svg) {
+    svg.removeAttribute("width");
+    svg.removeAttribute("height");
+    const cover = this.getAttribute("fit") === "cover";
+    svg.setAttribute("preserveAspectRatio", cover ? "xMidYMid slice" : "xMidYMid meet");
+  }
+}
+
+customElements.define("keyframes-excalidraw", SwExcalidraw);

keyframes/static/components/keyframes-mujoco.js

@@ -0,0 +1,515 @@
+import { SwComponent, onResize } from "../runtime/component.js";
+
+const MAX_SUBSTEPS = 200;
+const HIDDEN_GROUP = 3;
+const DEFAULT_RGBA = [0.5, 0.5, 0.5, 1];
+
+let mujocoModule = null;
+const loadMujoco = () =>
+  (mujocoModule ??= import("@mujoco/mujoco").then((m) => m.default()).catch((e) => {
+    mujocoModule = null;
+    throw e;
+  }));
+
+const style = document.createElement("style");
+style.textContent = `
+keyframes-mujoco { display: block; position: relative; width: 100%; height: 100%; }
+keyframes-mujoco > canvas, keyframes-mujoco > img { display: block; width: 100%; height: 100%; touch-action: none; }
+`;
+document.head.append(style);
+
+const parseVec = (value) => value?.split(",").map(Number);
+
+async function fetchOk(url) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`${response.status} ${url}`);
+  return response;
+}
+
+export class SwMujoco extends SwComponent {
+  #three;
+  #mj;
+  #model;
+  #data;
+  #controller = {};
+  #renderer;
+  #scene;
+  #camera;
+  #controls;
+  #bodies = [];
+  #geoms = [];
+  #disposables = [];
+  #cleanup = [];
+  #drag = null;
+  #frame = 0;
+  #last = 0;
+  #lag = 0;
+  #timeline = null;
+
+  get mujoco() {
+    return this.#mj;
+  }
+
+  get mjModel() {
+    return this.#model;
+  }
+
+  get mjData() {
+    return this.#data;
+  }
+
+  async init() {
+    const [THREE, { OrbitControls }, { RoomEnvironment }, mujoco] = await Promise.all([
+      import("three"),
+      import("three/addons/controls/OrbitControls.js"),
+      import("three/addons/environments/RoomEnvironment.js"),
+      loadMujoco(),
+    ]);
+    this.#three = THREE;
+    this.#mj = mujoco;
+    try {
+      await this.#loadModel();
+      await this.#loadController();
+      this.#buildRenderer(RoomEnvironment);
+      this.#buildCamera(OrbitControls);
+      this.#buildGeoms();
+      this.#buildLights();
+      this.#bindEvents();
+      this.reset();
+    } catch (e) {
+      this.destroy();
+      throw e;
+    }
+  }
+
+  async #loadModel() {
+    const url = this.resolveUrl(this.getAttribute("model"));
+    const assets = (this.getAttribute("assets") || "").split(",").map((s) => s.trim()).filter(Boolean);
+    const files = await Promise.all(
+      [url, ...assets.map((a) => new URL(a, url).href)].map(async (u) => new Uint8Array(await (await fetchOk(u)).arrayBuffer())),
+    );
+    const name = url.split("/").pop().split("?")[0];
+    const vfs = new this.#mj.MjVFS();
+    try {
+      vfs.addBuffer(name, files[0]);
+      assets.forEach((a, i) => vfs.addBuffer(a, files[i + 1]));
+      this.#model = this.#mj.MjModel.from_xml_path(name, vfs);
+    } finally {
+      vfs.delete();
+    }
+    this.#data = new this.#mj.MjData(this.#model);
+  }
+
+  async #loadController() {
+    const src = this.getAttribute("controller");
+    if (!src) return;
+    const { default: setup } = await import(this.resolveUrl(src));
+    const context = { mujoco: this.#mj, model: this.#model, data: this.#data, container: this, params: this.params };
+    this.#controller = (await setup(context)) || {};
+    for (const [name, value] of Object.entries(this.params)) this.#controller.onParam?.(name, value);
+  }
+
+  #buildRenderer(RoomEnvironment) {
+    const THREE = this.#three;
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setPixelRatio(Math.min(this.pixelRatio, 3));
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFShadowMap;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    this.append(renderer.domElement);
+    this.#renderer = renderer;
+
+    this.#scene = new THREE.Scene();
+    const pmrem = new THREE.PMREMGenerator(renderer);
+    const room = new RoomEnvironment();
+    this.#scene.environment = pmrem.fromScene(room, 0.04).texture;
+    this.#scene.environmentIntensity = 0.35;
+    this.#disposables.push(this.#scene.environment);
+    room.traverse((o) => o.geometry?.dispose());
+    pmrem.dispose();
+  }
+
+  #buildCamera(OrbitControls) {
+    const THREE = this.#three;
+    const { extent, center } = this.#model.stat;
+    const target = new THREE.Vector3(...(parseVec(this.getAttribute("target")) ?? center));
+    const eye = parseVec(this.getAttribute("camera"));
+    this.#camera = new THREE.PerspectiveCamera(40, 1, extent * 0.005, extent * 100);
+    this.#camera.up.set(0, 0, 1);
+    if (eye) this.#camera.position.set(...eye);
+    else this.#camera.position.copy(target).addScaledVector(new THREE.Vector3(1, -1.5, 0.9).normalize(), extent * 1.8);
+    this.#controls = new OrbitControls(this.#camera, this.#renderer.domElement);
+    this.#controls.target.copy(target);
+    this.#controls.enableDamping = true;
+    this.#controls.update();
+  }
+
+  #buildLights() {
+    const THREE = this.#three;
+    const { extent, center } = this.#model.stat;
+    const c = new THREE.Vector3(...center);
+    const key = new THREE.DirectionalLight(0xffffff, 3);
+    key.position.copy(c).add(new THREE.Vector3(-0.6, -1.2, 2.5).multiplyScalar(extent));
+    key.target.position.copy(c);
+    key.castShadow = true;
+    const s = key.shadow;
+    s.mapSize.set(2048, 2048);
+    s.radius = 4;
+    s.bias = -0.0004;
+    s.normalBias = extent * 0.002;
+    Object.assign(s.camera, { left: -extent, right: extent, top: extent, bottom: -extent, near: 0.01, far: extent * 8 });
+    const fill = new THREE.HemisphereLight(0xf4f7ff, 0x9a958c, 0.4);
+    fill.position.set(0, 0, 1);
+    this.#scene.add(key, key.target, fill);
+  }
+
+  #buildGeoms() {
+    const THREE = this.#three;
+    const m = this.#model;
+    const T = this.#mj.mjtGeom;
+    const builders = {
+      [T.mjGEOM_PLANE.value]: (s, i) => this.#plane(s, i),
+      [T.mjGEOM_SPHERE.value]: (s) => new THREE.SphereGeometry(s[0], 32, 16),
+      [T.mjGEOM_ELLIPSOID.value]: (s) => new THREE.SphereGeometry(1, 32, 16).scale(s[0], s[1], s[2]),
+      [T.mjGEOM_CAPSULE.value]: (s) => new THREE.CapsuleGeometry(s[0], 2 * s[1], 8, 24).rotateX(Math.PI / 2),
+      [T.mjGEOM_CYLINDER.value]: (s) => new THREE.CylinderGeometry(s[0], s[0], 2 * s[1], 32).rotateX(Math.PI / 2),
+      [T.mjGEOM_BOX.value]: (s) => new THREE.BoxGeometry(2 * s[0], 2 * s[1], 2 * s[2]),
+      [T.mjGEOM_MESH.value]: (s, i) => this.#mesh(m.geom_dataid[i]),
+    };
+    for (let i = 0; i < m.ngeom; i++) {
+      const rgba = this.#geomRgba(i);
+      const build = builders[m.geom_type[i]];
+      if (!build || m.geom_group[i] >= HIDDEN_GROUP || rgba[3] === 0) continue;
+      const built = build(m.geom_size.subarray(3 * i, 3 * i + 3), i);
+      const mesh = built.isMesh ? built : new THREE.Mesh(built, this.#material(i, rgba));
+      mesh.castShadow = rgba[3] > 0.5 && m.geom_type[i] !== T.mjGEOM_PLANE.value;
+      mesh.receiveShadow = true;
+      mesh.matrixAutoUpdate = false;
+      mesh.userData.body = m.geom_bodyid[i];
+      this.#disposables.push(mesh.geometry, mesh.material);
+      this.#scene.add(mesh);
+      this.#geoms.push([i, mesh]);
+      if (m.geom_bodyid[i] > 0) this.#bodies.push(mesh);
+    }
+  }
+
+  #geomRgba(i) {
+    const m = this.#model;
+    const rgba = [...m.geom_rgba.subarray(4 * i, 4 * i + 4)];
+    const mat = m.geom_matid[i];
+    const isDefault = rgba.every((v, k) => Math.abs(v - DEFAULT_RGBA[k]) < 1e-6);
+    return mat >= 0 && isDefault ? [...m.mat_rgba.subarray(4 * mat, 4 * mat + 4)] : rgba;
+  }
+
+  #material(i, [r, g, b, a]) {
+    const THREE = this.#three;
+    const mat = this.#model.geom_matid[i];
+    const shininess = mat >= 0 ? this.#model.mat_shininess[mat] : 0.5;
+    return new THREE.MeshStandardMaterial({
+      color: new THREE.Color().setRGB(r, g, b, THREE.SRGBColorSpace),
+      roughness: 1 - 0.6 * shininess,
+      metalness: mat >= 0 ? this.#model.mat_reflectance[mat] : 0,
+      transparent: a < 1,
+      opacity: a,
+    });
+  }
+
+  #plane(size, i) {
+    const THREE = this.#three;
+    const extent = this.#model.stat.extent;
+    const infinite = size[0] <= 0 || size[1] <= 0;
+    const sx = infinite ? extent * 6 : size[0];
+    const sy = infinite ? extent * 6 : size[1];
+    const cell = size[2] > 0 ? size[2] : extent / 10;
+    const [r, g, b, a] = this.#geomRgba(i);
+    const color = new THREE.Color().setRGB(r, g, b, THREE.SRGBColorSpace);
+    const map = this.#canvasTexture(128, (ctx, n) => {
+      ctx.fillStyle = `#${color.getHexString()}`;
+      ctx.fillRect(0, 0, n, n);
+      ctx.fillStyle = `#${color.clone().multiplyScalar(0.86).getHexString()}`;
+      ctx.fillRect(0, 0, n / 2, n / 2);
+      ctx.fillRect(n / 2, n / 2, n / 2, n / 2);
+    });
+    map.colorSpace = THREE.SRGBColorSpace;
+    map.wrapS = map.wrapT = THREE.RepeatWrapping;
+    map.repeat.set(sx / cell, sy / cell);
+    map.anisotropy = 8;
+    const material = new THREE.MeshStandardMaterial({ map, roughness: 0.9, transparent: infinite || a < 1, opacity: a });
+    if (infinite) {
+      material.alphaMap = this.#canvasTexture(256, (ctx, n) => {
+        const fade = ctx.createRadialGradient(n / 2, n / 2, 0, n / 2, n / 2, n / 2);
+        fade.addColorStop(0.25, "#fff");
+        fade.addColorStop(1, "#000");
+        ctx.fillStyle = fade;
+        ctx.fillRect(0, 0, n, n);
+      });
+      material.depthWrite = false;
+    }
+    const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2 * sx, 2 * sy), material);
+    mesh.renderOrder = -1;
+    return mesh;
+  }
+
+  #canvasTexture(n, draw) {
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = n;
+    draw(canvas.getContext("2d"), n);
+    const texture = new this.#three.CanvasTexture(canvas);
+    this.#disposables.push(texture);
+    return texture;
+  }
+
+  #mesh(id) {
+    const THREE = this.#three;
+    const m = this.#model;
+    const vert = m.mesh_vert.subarray(3 * m.mesh_vertadr[id], 3 * (m.mesh_vertadr[id] + m.mesh_vertnum[id]));
+    const normal = m.mesh_normal.subarray(3 * m.mesh_normaladr[id], 3 * (m.mesh_normaladr[id] + m.mesh_normalnum[id]));
+    const faces = 3 * m.mesh_facenum[id];
+    const face = m.mesh_face.subarray(3 * m.mesh_faceadr[id], 3 * m.mesh_faceadr[id] + faces);
+    const faceNormal = m.mesh_facenormal.subarray(3 * m.mesh_faceadr[id], 3 * m.mesh_faceadr[id] + faces);
+    const position = new Float32Array(3 * faces);
+    const normals = new Float32Array(3 * faces);
+    for (let k = 0; k < faces; k++) {
+      position.set(vert.subarray(3 * face[k], 3 * face[k] + 3), 3 * k);
+      normals.set(normal.subarray(3 * faceNormal[k], 3 * faceNormal[k] + 3), 3 * k);
+    }
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", new THREE.BufferAttribute(position, 3));
+    geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
+    return geometry;
+  }
+
+  #bindEvents() {
+    const canvas = this.#renderer.domElement;
+    const listen = (target, type, fn, options) => {
+      target.addEventListener(type, fn, options);
+      this.#cleanup.push(() => target.removeEventListener(type, fn, options));
+    };
+    listen(this, "pointerdown", (e) => this.#startDrag(e), { capture: true });
+    listen(canvas, "pointermove", (e) => this.#moveDrag(e));
+    listen(canvas, "pointerup", () => this.#endDrag());
+    listen(canvas, "pointercancel", () => this.#endDrag());
+    listen(canvas, "dblclick", () => this.reset());
+    listen(window.keyframes ?? window, "scale", () => this.#resize());
+    this.#cleanup.push(onResize(this, () => this.#resize()));
+    this.#resize();
+  }
+
+  #resize() {
+    const w = this.clientWidth;
+    const h = this.clientHeight;
+    if (!w || !h) return;
+    this.#renderer.setPixelRatio(Math.min(this.pixelRatio, 3));
+    this.#renderer.setSize(w, h, false);
+    this.#camera.aspect = w / h;
+    this.#camera.updateProjectionMatrix();
+    this.#render();
+  }
+
+  #ray(e) {
+    const THREE = this.#three;
+    const rect = this.#renderer.domElement.getBoundingClientRect();
+    const ndc = new THREE.Vector2(((e.clientX - rect.left) / rect.width) * 2 - 1, -((e.clientY - rect.top) / rect.height) * 2 + 1);
+    const raycaster = new THREE.Raycaster();
+    raycaster.setFromCamera(ndc, this.#camera);
+    return raycaster;
+  }
+
+  #startDrag(e) {
+    if (!(e.ctrlKey || e.metaKey) || e.button !== 0) return;
+    const hit = this.#ray(e).intersectObjects(this.#bodies, false)[0];
+    if (!hit) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const THREE = this.#three;
+    const body = hit.object.userData.body;
+    const pert = new this.#mj.MjvPerturb();
+    pert.select = body;
+    pert.active = this.#mj.mjtPertBit.mjPERT_TRANSLATE.value;
+    pert.localmass = this.#model.body_subtreemass[body];
+    pert.localpos.set(this.#toBodyFrame(body, hit.point));
+    pert.refselpos.set(hit.point.toArray());
+    const normal = this.#camera.getWorldDirection(new THREE.Vector3());
+    const line = new THREE.Line(
+      new THREE.BufferGeometry().setFromPoints([hit.point, hit.point]),
+      new THREE.LineBasicMaterial({ color: 0xf2994a, depthTest: false }),
+    );
+    line.renderOrder = 10;
+    line.frustumCulled = false;
+    this.#scene.add(line);
+    this.#drag = { body, pert, line, plane: new THREE.Plane().setFromNormalAndCoplanarPoint(normal, hit.point) };
+    this.#controls.enabled = false;
+    this.#renderer.domElement.setPointerCapture(e.pointerId);
+  }
+
+  #toBodyFrame(body, point) {
+    const p = this.#data.xpos.subarray(3 * body, 3 * body + 3);
+    const R = this.#data.xmat.subarray(9 * body, 9 * body + 9);
+    const d = [point.x - p[0], point.y - p[1], point.z - p[2]];
+    return [0, 1, 2].map((i) => R[i] * d[0] + R[3 + i] * d[1] + R[6 + i] * d[2]);
+  }
+
+  #moveDrag(e) {
+    if (!this.#drag) return;
+    const point = this.#ray(e).ray.intersectPlane(this.#drag.plane, new this.#three.Vector3());
+    if (point) this.#drag.pert.refselpos.set(point.toArray());
+  }
+
+  #endDrag() {
+    if (!this.#drag) return;
+    const { body, pert, line } = this.#drag;
+    this.#data.xfrc_applied.fill(0, 6 * body, 6 * body + 6);
+    pert.delete();
+    line.geometry.dispose();
+    line.material.dispose();
+    line.removeFromParent();
+    this.#drag = null;
+    this.#controls.enabled = true;
+  }
+
+  #applyDrag() {
+    const { body, pert } = this.#drag;
+    this.#data.xfrc_applied.fill(0, 6 * body, 6 * body + 6);
+    this.#mj.mjv_applyPerturbForce(this.#model, this.#data, pert);
+  }
+
+  #updateDragLine() {
+    const { body, pert, line } = this.#drag;
+    const THREE = this.#three;
+    const p = this.#data.xpos.subarray(3 * body, 3 * body + 3);
+    const R = this.#data.xmat.subarray(9 * body, 9 * body + 9);
+    const l = pert.localpos;
+    const anchor = new THREE.Vector3(...[0, 1, 2].map((i) => p[i] + R[3 * i] * l[0] + R[3 * i + 1] * l[1] + R[3 * i + 2] * l[2]));
+    line.geometry.setFromPoints([anchor, new THREE.Vector3(...pert.refselpos)]);
+  }
+
+  reset() {
+    this.#restart();
+    if (this.#timeline != null) this.#seekTo(this.#timeline);
+    this.#render();
+  }
+
+  seek(t) {
+    this.#timeline = t;
+    if (this.#data) this.#seekTo(t);
+  }
+
+  paramChanged(name, value) {
+    this.#controller.onParam?.(name, value);
+  }
+
+  #restart() {
+    const { mujoco, mjModel: model, mjData: data } = this;
+    if (model.nkey > 0) mujoco.mj_resetDataKeyframe(model, data, 0);
+    else mujoco.mj_resetData(model, data);
+    this.#controller.reset?.();
+    mujoco.mj_forward(model, data);
+    this.#lag = 0;
+  }
+
+  #seekTo(t) {
+    const half = this.#model.opt.timestep / 2;
+    if (t < this.#data.time - half) this.#restart();
+    while (this.#data.time + half < t) this.#stepOnce();
+  }
+
+  #advance(seconds) {
+    const dt = this.#model.opt.timestep;
+    this.#lag += seconds * Number(this.getAttribute("speed") ?? 1);
+    let n = Math.floor(this.#lag / dt);
+    if (n > MAX_SUBSTEPS) {
+      n = MAX_SUBSTEPS;
+      this.#lag = 0;
+    } else {
+      this.#lag -= n * dt;
+    }
+    for (let k = 0; k < n; k++) this.#stepOnce();
+  }
+
+  #stepOnce() {
+    this.#controller.step?.(this.#data.time);
+    if (this.#drag) this.#applyDrag();
+    this.#mj.mj_step(this.#model, this.#data);
+  }
+
+  #sync() {
+    const xpos = this.#data.geom_xpos;
+    const xmat = this.#data.geom_xmat;
+    for (const [i, mesh] of this.#geoms) {
+      const p = 3 * i;
+      const r = 9 * i;
+      mesh.matrix.set(
+        xmat[r], xmat[r + 1], xmat[r + 2], xpos[p],
+        xmat[r + 3], xmat[r + 4], xmat[r + 5], xpos[p + 1],
+        xmat[r + 6], xmat[r + 7], xmat[r + 8], xpos[p + 2],
+        0, 0, 0, 1,
+      );
+      mesh.matrixWorldNeedsUpdate = true;
+    }
+    if (this.#drag) this.#updateDragLine();
+  }
+
+  #render() {
+    if (!this.#renderer) return;
+    this.#sync();
+    this.#renderer.render(this.#scene, this.#camera);
+  }
+
+  #tick = (now) => {
+    this.#frame = requestAnimationFrame(this.#tick);
+    const elapsed = Math.min((now - this.#last) / 1000, 0.1);
+    this.#last = now;
+    if (this.#timeline == null && !this.hasAttribute("paused")) this.#advance(elapsed);
+    this.#controls.update();
+    this.#render();
+  };
+
+  play() {
+    this.#last = performance.now();
+    this.#frame = requestAnimationFrame(this.#tick);
+  }
+
+  pause() {
+    cancelAnimationFrame(this.#frame);
+    this.#endDrag();
+  }
+
+  step(n) {
+    this.#controller.onStep?.(n);
+  }
+
+  async snapshot() {
+    if (!this.#renderer) return;
+    this.pause();
+    this.#seekTo(this.#timeline ?? Number(this.getAttribute("snapshot-time") ?? 2));
+    this.#render();
+    const img = document.createElement("img");
+    img.src = this.#renderer.domElement.toDataURL("image/png");
+    await img.decode();
+    this.#renderer.domElement.replaceWith(img);
+  }
+
+  destroy() {
+    cancelAnimationFrame(this.#frame);
+    this.#endDrag();
+    this.#cleanup.forEach((fn) => fn());
+    this.#controller.dispose?.();
+    this.#controls?.dispose();
+    this.#disposables.forEach((d) => d?.dispose());
+    if (this.#renderer) {
+      this.#renderer.dispose();
+      this.#renderer.forceContextLoss();
+    }
+    this.replaceChildren();
+    this.#data?.delete();
+    this.#model?.delete();
+    this.#cleanup = [];
+    this.#disposables = [];
+    this.#geoms = [];
+    this.#bodies = [];
+    this.#controller = {};
+    this.#renderer = this.#scene = this.#camera = this.#controls = this.#data = this.#model = null;
+  }
+}
+
+customElements.define("keyframes-mujoco", SwMujoco);