cubing 0.21.1 → 0.22.1

package/dist/esm/twisty/index.js

@@ -1,36 +1,27 @@
 import {
-  CSSSource,
-  ClassListManager,
   Cube3D,
   DEGREES_PER_RADIAN,
-  HTMLElementShim,
-  ManagedCustomElement,
+  FreshListenerManager,
+  HintFaceletProp,
+  NO_VALUE,
   PG3D,
-  RenderScheduler,
-  Stats,
-  Twisty3DCanvas,
-  Twisty3DScene,
-  TwistyPlayerConfig,
-  TwistyViewerWrapper,
-  controlsLocations,
-  customElementsShim,
-  defaultCameraOrbitCoordinates,
-  experimentalShowRenderStats,
-  pixelRatio,
-  pyraminxLookAt,
-  twisty3DCanvasCSS,
-  twistyViewerWrapperCSS
-} from "../chunk-APIIMJG6.js";
+  SimpleTwistyPropSource,
+  StaleDropper,
+  StickeringProp,
+  TwistyPropDerived,
+  TwistyPropSource,
+  from
+} from "../chunk-GF76PWEV.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-RE7MIN5R.js";
+} from "../chunk-4IUYLRHT.js";
 import {
   cube3x3x3,
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-MUQMBH2S.js";
+} from "../chunk-R3HRHYIW.js";
 import {
   KPuzzle,
   KPuzzleSVGWrapper,
@@ -39,7 +30,7 @@ import {
   identityTransformation,
   invertTransformation,
   transformationForMove
-} from "../chunk-YV3RT5PX.js";
+} from "../chunk-X6JHXPDX.js";
 import {
   Alg,
   AlgBuilder,
@@ -52,16 +43,15 @@ import {
   direct,
   directedGenerator,
   experimentalAppendMove
-} from "../chunk-BU5PUJK3.js";
+} from "../chunk-EWRBHQFX.js";
 import {
   __privateAdd,
   __privateGet,
   __privateMethod,
-  __privateSet,
-  __privateWrapper
+  __privateSet
 } from "../chunk-WO2AXYFE.js";
 
-// src/cubing/twisty/old/animation/cursor/CursorTypes.ts
+// src/cubing/twisty/controllers/AnimationTypes.ts
 var Direction;
 (function(Direction2) {
   Direction2[Direction2["Forwards"] = 1] = "Forwards";
@@ -77,52 +67,29 @@ var BoundaryType;
   BoundaryType2["EntireTimeline"] = "entire-timeline";
 })(BoundaryType || (BoundaryType = {}));
 
-// src/cubing/twisty/model/PromiseFreshener.ts
-var _latestAssignedIdx, _latestResolvedIdx;
-var PromiseFreshener = class {
-  constructor() {
-    __privateAdd(this, _latestAssignedIdx, 0);
-    __privateAdd(this, _latestResolvedIdx, 0);
-  }
-  async queue(p) {
-    const idx = ++__privateWrapper(this, _latestAssignedIdx)._;
-    const result = await p;
-    if (idx > __privateGet(this, _latestResolvedIdx)) {
-      __privateSet(this, _latestResolvedIdx, idx);
-      return {
-        fresh: true,
-        result
-      };
-    } else {
-      return { fresh: false };
+// src/cubing/twisty/controllers/RenderScheduler.ts
+var RenderScheduler = class {
+  constructor(callback) {
+    this.callback = callback;
+    this.animFrameID = null;
+    this.animFrame = this.animFrameWrapper.bind(this);
+  }
+  requestAnimFrame() {
+    if (!this.animFrameID) {
+      this.animFrameID = requestAnimationFrame(this.animFrame);
     }
   }
-};
-_latestAssignedIdx = new WeakMap();
-_latestResolvedIdx = new WeakMap();
-var _latestAssignedIdx2, _latestResolvedIdx2;
-var StaleDropper = class {
-  constructor() {
-    __privateAdd(this, _latestAssignedIdx2, 0);
-    __privateAdd(this, _latestResolvedIdx2, 0);
+  cancelAnimFrame() {
+    if (this.animFrameID) {
+      cancelAnimationFrame(this.animFrameID);
+      this.animFrameID = 0;
+    }
   }
-  queue(p) {
-    return new Promise(async (resolve, reject) => {
-      try {
-        const idx = ++__privateWrapper(this, _latestAssignedIdx2)._;
-        const result = await p;
-        if (idx > __privateGet(this, _latestResolvedIdx2)) {
-          __privateSet(this, _latestResolvedIdx2, idx);
-          resolve(result);
-        }
-      } catch (e) {
-        reject(e);
-      }
-    });
+  animFrameWrapper(timestamp) {
+    this.animFrameID = 0;
+    this.callback(timestamp);
   }
 };
-_latestAssignedIdx2 = new WeakMap();
-_latestResolvedIdx2 = new WeakMap();
 
 // src/cubing/twisty/model/helpers.ts
 function arrayEquals(a, b) {
@@ -386,12 +353,126 @@ var TwistyPlayerController = class {
   }
 };
 
-// src/cubing/twisty/old/dom/TwistyPlayer.css.ts
+// src/cubing/twisty/model/props/viewer/ControlPanelProp.ts
+var controlsLocations = {
+  "bottom-row": true,
+  "none": true
+};
+var ControlPanelProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
+// src/cubing/twisty/views/ClassListManager.ts
+var _currentClassName;
+var ClassListManager = class {
+  constructor(elem, prefix, validSuffixes) {
+    this.elem = elem;
+    this.prefix = prefix;
+    this.validSuffixes = validSuffixes;
+    __privateAdd(this, _currentClassName, null);
+  }
+  clearValue() {
+    if (__privateGet(this, _currentClassName)) {
+      this.elem.contentWrapper.classList.remove(__privateGet(this, _currentClassName));
+    }
+    __privateSet(this, _currentClassName, null);
+  }
+  setValue(suffix) {
+    if (!this.validSuffixes.includes(suffix)) {
+      throw new Error(`Invalid suffix: ${suffix}`);
+    }
+    const newClassName = `${this.prefix}${suffix}`;
+    const changed = __privateGet(this, _currentClassName) !== newClassName;
+    if (changed) {
+      this.clearValue();
+      this.elem.contentWrapper.classList.add(newClassName);
+      __privateSet(this, _currentClassName, newClassName);
+    }
+    return changed;
+  }
+};
+_currentClassName = new WeakMap();
+
+// src/cubing/twisty/views/node-custom-element-shims.ts
+var HTMLElementStub = class {
+};
+var HTMLElementShim;
+if (globalThis.HTMLElement) {
+  HTMLElementShim = HTMLElement;
+} else {
+  HTMLElementShim = HTMLElementStub;
+}
+var CustomElementsStub = class {
+  define() {
+  }
+};
+var customElementsShim;
+if (globalThis.customElements) {
+  customElementsShim = customElements;
+} else {
+  customElementsShim = new CustomElementsStub();
+}
+
+// src/cubing/twisty/views/ManagedCustomElement.ts
+var CSSSource = class {
+  constructor(sourceText) {
+    this.sourceText = sourceText;
+  }
+  getAsString() {
+    return this.sourceText;
+  }
+};
+var _cssSourceMap;
+var ManagedCustomElement = class extends HTMLElementShim {
+  constructor(options) {
+    super();
+    __privateAdd(this, _cssSourceMap, new Map());
+    this.shadow = this.attachShadow({ mode: options?.mode ?? "closed" });
+    this.contentWrapper = document.createElement("div");
+    this.contentWrapper.classList.add("wrapper");
+    this.shadow.appendChild(this.contentWrapper);
+  }
+  addCSS(cssSource) {
+    if (__privateGet(this, _cssSourceMap).get(cssSource)) {
+      return;
+    }
+    const cssElem = document.createElement("style");
+    cssElem.textContent = cssSource.getAsString();
+    __privateGet(this, _cssSourceMap).set(cssSource, cssElem);
+    this.shadow.appendChild(cssElem);
+  }
+  removeCSS(cssSource) {
+    const cssElem = __privateGet(this, _cssSourceMap).get(cssSource);
+    if (!cssElem) {
+      return;
+    }
+    this.shadow.removeChild(cssElem);
+    __privateGet(this, _cssSourceMap).delete(cssSource);
+  }
+  addElement(element) {
+    return this.contentWrapper.appendChild(element);
+  }
+  prependElement(element) {
+    this.contentWrapper.prepend(element);
+  }
+  removeElement(element) {
+    return this.contentWrapper.removeChild(element);
+  }
+};
+_cssSourceMap = new WeakMap();
+customElementsShim.define("twisty-managed-custom-element", ManagedCustomElement);
+
+// src/cubing/twisty/views/TwistyPlayer.css.ts
 var twistyPlayerCSS = new CSSSource(`
 :host {
   width: 384px;
   height: 256px;
   display: grid;
+
+  -webkit-user-select: none;
+  user-select: none;
 }
 
 .wrapper {
@@ -455,291 +536,55 @@ twisty-scrubber {
 }
 `);
 
-// src/cubing/vendor/p-lazy/p-lazy.ts
-var PLazy = class extends Promise {
-  constructor(executor) {
-    super((resolve) => {
-      resolve();
-    });
-    this._executor = executor;
-  }
-  static from(function_) {
-    return new PLazy((resolve) => {
-      resolve(function_());
-    });
-  }
-  static resolve(value) {
-    return new PLazy((resolve) => {
-      resolve(value);
-    });
-  }
-  static reject(error) {
-    return new PLazy((_resolve, reject) => {
-      reject(error);
-    });
-  }
-  then(onFulfilled, onRejected) {
-    this._promise = this._promise || new Promise(this._executor);
-    return this._promise.then(onFulfilled, onRejected);
-  }
-  catch(onRejected) {
-    this._promise = this._promise || new Promise(this._executor);
-    return this._promise.catch(onRejected);
-  }
-};
-function from(function_) {
-  return new PLazy((resolve) => {
-    resolve(function_());
-  });
-}
-
 // src/cubing/twisty/heavy-code-imports/3d.ts
 var cachedConstructorProxy = null;
 async function proxy3D() {
-  return cachedConstructorProxy ?? (cachedConstructorProxy = import("../3d-B25DP5PE.js"));
+  return cachedConstructorProxy ?? (cachedConstructorProxy = import("../3d-M7GBIT3X.js"));
 }
 var THREEJS = from(async () => (await proxy3D()).T3I);
 
-// src/cubing/twisty/model/props/TwistyProp.ts
-var globalSourceGeneration = 0;
-var _children, _rawListeners, _scheduleRawDispatch, scheduleRawDispatch_fn, _rawDispatchPending, _dispatchRawListeners, dispatchRawListeners_fn, _freshListeners;
-var TwistyPropParent = class {
-  constructor() {
-    __privateAdd(this, _scheduleRawDispatch);
-    __privateAdd(this, _dispatchRawListeners);
-    __privateAdd(this, _children, new Set());
-    this.lastSourceGeneration = 0;
-    __privateAdd(this, _rawListeners, new Set());
-    __privateAdd(this, _rawDispatchPending, false);
-    __privateAdd(this, _freshListeners, new Map());
-  }
-  canReuse(v1, v2) {
-    return v1 === v2 || this.canReuseValue(v1, v2);
-  }
-  canReuseValue(_v1, _v2) {
-    return false;
-  }
-  debugGetChildren() {
-    return Array.from(__privateGet(this, _children).values());
-  }
-  addChild(child) {
-    __privateGet(this, _children).add(child);
-  }
-  removeChild(child) {
-    __privateGet(this, _children).delete(child);
-  }
-  markStale(sourceEvent) {
-    if (sourceEvent.detail.generation !== globalSourceGeneration) {
-      throw new Error("A TwistyProp was marked stale too late!");
-    }
-    if (this.lastSourceGeneration === sourceEvent.detail.generation) {
-      return;
-    }
-    this.lastSourceGeneration = sourceEvent.detail.generation;
-    for (const child of __privateGet(this, _children)) {
-      child.markStale(sourceEvent);
-    }
-    __privateMethod(this, _scheduleRawDispatch, scheduleRawDispatch_fn).call(this);
-  }
-  addRawListener(listener, options) {
-    __privateGet(this, _rawListeners).add(listener);
-    if (options?.initial) {
-      listener();
-    }
-  }
-  removeRawListener(listener) {
-    __privateGet(this, _rawListeners).delete(listener);
-  }
-  addFreshListener(listener) {
-    const staleDropper = new StaleDropper();
-    let lastResult = null;
-    const callback = async () => {
-      const result = await staleDropper.queue(this.get());
-      if (lastResult !== null && this.canReuse(lastResult, result)) {
-        return;
-      }
-      lastResult = result;
-      listener(result);
-    };
-    __privateGet(this, _freshListeners).set(listener, callback);
-    this.addRawListener(callback, { initial: true });
-  }
-  removeFreshListener(listener) {
-    this.removeRawListener(__privateGet(this, _freshListeners).get(listener));
-    __privateGet(this, _freshListeners).delete(listener);
-  }
-};
-_children = new WeakMap();
-_rawListeners = new WeakMap();
-_scheduleRawDispatch = new WeakSet();
-scheduleRawDispatch_fn = function() {
-  if (!__privateGet(this, _rawDispatchPending)) {
-    __privateSet(this, _rawDispatchPending, true);
-    setTimeout(() => __privateMethod(this, _dispatchRawListeners, dispatchRawListeners_fn).call(this), 0);
-  }
-};
-_rawDispatchPending = new WeakMap();
-_dispatchRawListeners = new WeakSet();
-dispatchRawListeners_fn = function() {
-  if (!__privateGet(this, _rawDispatchPending)) {
-    throw new Error("Invalid dispatch state!");
-  }
-  for (const listener of __privateGet(this, _rawListeners)) {
-    listener();
-  }
-  __privateSet(this, _rawDispatchPending, false);
-};
-_freshListeners = new WeakMap();
-var _value;
-var TwistyPropSource = class extends TwistyPropParent {
-  constructor(initialValue) {
-    super();
-    __privateAdd(this, _value, void 0);
-    __privateSet(this, _value, from(() => this.getDefaultValue()));
-    if (initialValue) {
-      __privateSet(this, _value, this.deriveFromPromiseOrValue(initialValue, __privateGet(this, _value)));
-    }
-  }
-  set(input) {
-    __privateSet(this, _value, this.deriveFromPromiseOrValue(input, __privateGet(this, _value)));
-    const sourceEventDetail = {
-      sourceProp: this,
-      value: __privateGet(this, _value),
-      generation: ++globalSourceGeneration
-    };
-    this.markStale(new CustomEvent("stale", {
-      detail: sourceEventDetail
-    }));
-  }
-  async get() {
-    return __privateGet(this, _value);
-  }
-  async deriveFromPromiseOrValue(input, oldValuePromise) {
-    return this.derive(await input, oldValuePromise);
-  }
-};
-_value = new WeakMap();
-var SimpleTwistyPropSource = class extends TwistyPropSource {
-  derive(input) {
-    return input;
-  }
-};
-var NO_VALUE = Symbol("no value");
-var _parents, _cachedLastSuccessfulCalculation, _cachedLatestGenerationCalculation, _getParents, getParents_fn, _cacheDerive, cacheDerive_fn;
-var TwistyPropDerived = class extends TwistyPropParent {
-  constructor(parents, userVisibleErrorTracker) {
-    super();
-    this.userVisibleErrorTracker = userVisibleErrorTracker;
-    __privateAdd(this, _getParents);
-    __privateAdd(this, _cacheDerive);
-    __privateAdd(this, _parents, void 0);
-    __privateAdd(this, _cachedLastSuccessfulCalculation, null);
-    __privateAdd(this, _cachedLatestGenerationCalculation, null);
-    __privateSet(this, _parents, parents);
-    for (const parent of Object.values(parents)) {
-      parent.addChild(this);
-    }
-  }
-  async get() {
-    const generation = this.lastSourceGeneration;
-    if (__privateGet(this, _cachedLatestGenerationCalculation)?.generation === generation) {
-      return __privateGet(this, _cachedLatestGenerationCalculation).output;
-    }
-    const latestGenerationCalculation = {
-      generation,
-      output: __privateMethod(this, _cacheDerive, cacheDerive_fn).call(this, __privateMethod(this, _getParents, getParents_fn).call(this), generation, __privateGet(this, _cachedLastSuccessfulCalculation))
-    };
-    __privateSet(this, _cachedLatestGenerationCalculation, latestGenerationCalculation);
-    this.userVisibleErrorTracker?.reset();
-    return latestGenerationCalculation.output;
-  }
-};
-_parents = new WeakMap();
-_cachedLastSuccessfulCalculation = new WeakMap();
-_cachedLatestGenerationCalculation = new WeakMap();
-_getParents = new WeakSet();
-getParents_fn = async function() {
-  const inputValuePromises = {};
-  for (const [key, parent] of Object.entries(__privateGet(this, _parents))) {
-    inputValuePromises[key] = parent.get();
-  }
-  const inputs = {};
-  for (const key in __privateGet(this, _parents)) {
-    inputs[key] = await inputValuePromises[key];
-  }
-  return inputs;
-};
-_cacheDerive = new WeakSet();
-cacheDerive_fn = async function(inputsPromise, generation, cachedLatestGenerationCalculation = null) {
-  const inputs = await inputsPromise;
-  const cache = (output) => {
-    __privateSet(this, _cachedLastSuccessfulCalculation, {
-      inputs,
-      output: Promise.resolve(output),
-      generation
-    });
-    return output;
-  };
-  if (!cachedLatestGenerationCalculation) {
-    return cache(await this.derive(inputs));
-  }
-  const cachedInputs = cachedLatestGenerationCalculation.inputs;
-  for (const key in __privateGet(this, _parents)) {
-    const parent = __privateGet(this, _parents)[key];
-    if (!parent.canReuse(inputs[key], cachedInputs[key])) {
-      return cache(await this.derive(inputs));
-    }
-  }
-  return cachedLatestGenerationCalculation.output;
-};
-var _disconnectionFunctions;
-var FreshListenerManager = class {
-  constructor() {
-    __privateAdd(this, _disconnectionFunctions, []);
-  }
-  addListener(prop, listener) {
-    let disconnected = false;
-    const wrappedListener = (value) => {
-      if (disconnected) {
-        return;
-      }
-      listener(value);
-    };
-    prop.addFreshListener(wrappedListener);
-    __privateGet(this, _disconnectionFunctions).push(() => {
-      prop.removeFreshListener(wrappedListener);
-      disconnected = true;
-    });
-  }
-  addMultiListener(props, listener) {
-    let disconnected = false;
-    const wrappedListener = async (_) => {
-      if (disconnected) {
-        return;
-      }
-      const promises = props.map((prop) => prop.get());
-      const values = await Promise.all(promises);
-      listener(values);
-    };
-    for (const prop of props) {
-      prop.addFreshListener(wrappedListener);
-    }
-    __privateGet(this, _disconnectionFunctions).push(() => {
-      for (const prop of props) {
-        prop.removeFreshListener(wrappedListener);
-      }
-      disconnected = true;
-    });
-  }
-  disconnect() {
-    for (const disconnectionFunction of __privateGet(this, _disconnectionFunctions)) {
-      disconnectionFunction();
-    }
-  }
-};
-_disconnectionFunctions = new WeakMap();
+// src/cubing/twisty/views/TwistyViewerWrapper.css.ts
+var twistyViewerWrapperCSS = new CSSSource(`
+:host {
+  width: 384px;
+  height: 256px;
+  display: grid;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  overflow: hidden;
+}
+
+.wrapper > * {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
 
-// src/cubing/twisty/old/dom/viewers/Twisty2DSVGView.css.ts
+.wrapper.back-view-side-by-side {
+  grid-template-columns: 1fr 1fr;
+}
+
+.wrapper.back-view-top-right {
+  grid-template-columns: 3fr 1fr;
+  grid-template-rows: 1fr 3fr;
+}
+
+.wrapper.back-view-top-right > :nth-child(1) {
+  grid-row: 1 / 3;
+  grid-column: 1 / 3;
+}
+
+.wrapper.back-view-top-right > :nth-child(2) {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+}
+`);
+
+// src/cubing/twisty/views/2D/Twisty2DPuzzle.css.ts
 var twisty2DSVGCSS = new CSSSource(`
 :host {
   width: 384px;
@@ -922,6 +767,9 @@ _cachedScene = new WeakMap();
 _currentTwisty2DPuzzleWrapper = new WeakMap();
 customElementsShim.define("twisty-2d-scene-wrapper", Twisty2DSceneWrapper);
 
+// src/cubing/twisty/views/3D/Twisty3DSceneWrapper.ts
+import { Vector2 } from "three";
+
 // src/cubing/twisty/views/3D/Twisty3DPuzzleWrapper.ts
 var _freshListenerManager4, _cachedTwisty3DPuzzle;
 var Twisty3DPuzzleWrapper = class {
@@ -952,6 +800,12 @@ var Twisty3DPuzzleWrapper = class {
       });
       this.scheduleRender();
     });
+    __privateGet(this, _freshListenerManager4).addListener(this.model.foundationDisplayProp, async (foundationDisplay) => {
+      (await this.twisty3DPuzzle()).experimentalUpdateOptions({
+        showFoundation: foundationDisplay !== "none"
+      });
+      this.scheduleRender();
+    });
     __privateGet(this, _freshListenerManager4).addListener(this.model.stickeringProp, async (stickering) => {
       if ("setStickering" in await this.twisty3DPuzzle()) {
         (await this.twisty3DPuzzle()).setStickering(stickering);
@@ -1015,10 +869,281 @@ var Twisty3DPuzzleWrapper = class {
       }
     })());
   }
+  async raycastMove(raycasterPromise, transformations) {
+    const puzzle = await this.twisty3DPuzzle();
+    if (!(puzzle instanceof PG3D)) {
+      console.info("not PG3D! skipping raycast");
+      return;
+    }
+    const targets = puzzle.experimentalGetControlTargets();
+    const [raycaster] = await Promise.all([raycasterPromise]);
+    const intersects = raycaster.intersectObjects(targets);
+    if (intersects.length > 0) {
+      const closestMove = puzzle.getClosestMoveToAxis(intersects[0].point, transformations);
+      if (closestMove) {
+        this.model.experimentalAddMove(closestMove.move, {
+          coalesce: true,
+          mod: closestMove.order
+        });
+      } else {
+        console.info("Skipping move!");
+      }
+    }
+  }
 };
 _freshListenerManager4 = new WeakMap();
 _cachedTwisty3DPuzzle = new WeakMap();
 
+// src/cubing/vendor/three/examples/jsm/libs/stats.modified.module.ts
+var performance2 = globalThis.performance;
+var Stats = class {
+  constructor() {
+    this.mode = 0;
+    this.dom = document.createElement("div");
+    this.beginTime = (performance2 || Date).now();
+    this.prevTime = this.beginTime;
+    this.frames = 0;
+    this.fpsPanel = this.addPanel(new StatsPanel("FPS", "#0ff", "#002"));
+    this.msPanel = this.addPanel(new StatsPanel("MS", "#0f0", "#020"));
+    this.memPanel = performance2?.memory ? this.addPanel(new StatsPanel("MB", "#f08", "#201")) : null;
+    this.REVISION = 16;
+    this.dom.style.cssText = "position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";
+    this.dom.addEventListener("click", (event) => {
+      event.preventDefault();
+      this.showPanel(++this.mode % this.dom.children.length);
+    }, false);
+    this.showPanel(0);
+  }
+  addPanel(panel) {
+    this.dom.appendChild(panel.dom);
+    return panel;
+  }
+  showPanel(id) {
+    for (let i = 0; i < this.dom.children.length; i++) {
+      this.dom.children[i].style.display = i === id ? "block" : "none";
+    }
+    this.mode = id;
+  }
+  begin() {
+    this.beginTime = (performance2 || Date).now();
+  }
+  end() {
+    this.frames++;
+    const time = (performance2 || Date).now();
+    this.msPanel.update(time - this.beginTime, 200);
+    if (time >= this.prevTime + 1e3) {
+      this.fpsPanel.update(this.frames * 1e3 / (time - this.prevTime), 100);
+      this.prevTime = time;
+      this.frames = 0;
+      if (this.memPanel) {
+        const memory = performance2.memory;
+        this.memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
+      }
+    }
+    return time;
+  }
+  update() {
+    this.beginTime = this.end();
+  }
+};
+var PR = Math.round(globalThis?.window?.devicePixelRatio ?? 1);
+var WIDTH = 80 * PR;
+var HEIGHT = 48 * PR;
+var TEXT_X = 3 * PR;
+var TEXT_Y = 2 * PR;
+var GRAPH_X = 3 * PR;
+var GRAPH_Y = 15 * PR;
+var GRAPH_WIDTH = 74 * PR;
+var GRAPH_HEIGHT = 30 * PR;
+var StatsPanel = class {
+  constructor(name, fg, bg) {
+    this.name = name;
+    this.fg = fg;
+    this.bg = bg;
+    this.min = Infinity;
+    this.max = 0;
+    this.dom = document.createElement("canvas");
+    this.context = this.dom.getContext("2d");
+    this.dom.width = WIDTH;
+    this.dom.height = HEIGHT;
+    this.dom.style.cssText = "width:80px;height:48px";
+    this.context.font = `bold ${9 * PR}px Helvetica,Arial,sans-serif`;
+    this.context.textBaseline = "top";
+    this.context.fillStyle = bg;
+    this.context.fillRect(0, 0, WIDTH, HEIGHT);
+    this.context.fillStyle = fg;
+    this.context.fillText(name, TEXT_X, TEXT_Y);
+    this.context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+    this.context.fillStyle = bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
+  }
+  update(value, maxValue) {
+    this.min = Math.min(this.min, value);
+    this.max = Math.max(this.max, value);
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 1;
+    this.context.fillRect(0, 0, WIDTH, GRAPH_Y);
+    this.context.fillStyle = this.fg;
+    this.context.fillText(Math.round(value) + " " + this.name + " (" + Math.round(this.min) + "-" + Math.round(this.max) + ")", TEXT_X, TEXT_Y);
+    this.context.drawImage(this.dom, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
+    this.context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
+    this.context.fillStyle = this.bg;
+    this.context.globalAlpha = 0.9;
+    this.context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, Math.round((1 - value / maxValue) * GRAPH_HEIGHT));
+  }
+};
+
+// src/cubing/twisty/views/canvas.ts
+var globalPixelRatioOverride = null;
+function pixelRatio() {
+  return globalPixelRatioOverride ?? (devicePixelRatio || 1);
+}
+
+// src/cubing/twisty/views/3D/Twisty3DVantage.css.ts
+var twisty3DVantageCSS = new CSSSource(`
+:host {
+  width: 384px;
+  height: 256px;
+  display: grid;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  overflow: hidden;
+}
+
+/* TODO: This is due to stats hack. Replace with \`canvas\`. */
+.wrapper > canvas {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.wrapper.invisible {
+  opacity: 0;
+}
+`);
+
+// src/cubing/twisty/views/3D/DragTracker.ts
+var MOVEMENT_EPSILON = 0.1;
+var _dragInfoMap, _lazyListenersRegistered, _registerLazyListeners, registerLazyListeners_fn, _clear, clear_fn, _trackDrag, trackDrag_fn;
+var DragTracker = class extends EventTarget {
+  constructor(target) {
+    super();
+    this.target = target;
+    __privateAdd(this, _registerLazyListeners);
+    __privateAdd(this, _clear);
+    __privateAdd(this, _trackDrag);
+    __privateAdd(this, _dragInfoMap, new Map());
+    __privateAdd(this, _lazyListenersRegistered, false);
+    target.addEventListener("pointerdown", this.onPointerDown.bind(this));
+    this.target.addEventListener("contextmenu", (e) => {
+      if (e.buttons & 2) {
+        e.preventDefault();
+      }
+    });
+    this.target.addEventListener("touchmove", (e) => e.preventDefault());
+    this.target.addEventListener("dblclick", (e) => e.preventDefault());
+  }
+  onPointerDown(e) {
+    __privateMethod(this, _registerLazyListeners, registerLazyListeners_fn).call(this);
+    const newDragInfo = {
+      attachedInfo: {},
+      hasMoved: false,
+      lastClientX: e.clientX,
+      lastClientY: e.clientY,
+      lastTimeStamp: e.timeStamp
+    };
+    __privateGet(this, _dragInfoMap).set(e.pointerId, newDragInfo);
+    this.target.setPointerCapture(e.pointerId);
+  }
+  onPointerMove(e) {
+    const movementInfo = __privateMethod(this, _trackDrag, trackDrag_fn).call(this, e).movementInfo;
+    if (movementInfo) {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent("move", {
+        detail: movementInfo
+      }));
+    }
+  }
+  onPointerUp(e) {
+    const trackDragResult = __privateMethod(this, _trackDrag, trackDrag_fn).call(this, e);
+    const existing = __privateGet(this, _dragInfoMap).get(e.pointerId);
+    __privateMethod(this, _clear, clear_fn).call(this, e);
+    this.target.releasePointerCapture(e.pointerId);
+    let event;
+    if (trackDragResult.hasMoved) {
+      event = new CustomEvent("up", {
+        detail: { attachedInfo: existing.attachedInfo }
+      });
+    } else {
+      const { altKey, ctrlKey, metaKey, shiftKey } = e;
+      event = new CustomEvent("press", {
+        detail: {
+          normalizedX: e.offsetX / this.target.offsetWidth * 2 - 1,
+          normalizedY: 1 - e.offsetY / this.target.offsetHeight * 2,
+          rightClick: !!(e.button & 2),
+          keys: {
+            altKey,
+            ctrlOrMetaKey: ctrlKey || metaKey,
+            shiftKey
+          }
+        }
+      });
+    }
+    this.dispatchEvent(event);
+  }
+};
+_dragInfoMap = new WeakMap();
+_lazyListenersRegistered = new WeakMap();
+_registerLazyListeners = new WeakSet();
+registerLazyListeners_fn = function() {
+  if (__privateGet(this, _lazyListenersRegistered)) {
+    return;
+  }
+  this.target.addEventListener("pointermove", this.onPointerMove.bind(this));
+  this.target.addEventListener("pointerup", this.onPointerUp.bind(this));
+  __privateSet(this, _lazyListenersRegistered, true);
+};
+_clear = new WeakSet();
+clear_fn = function(e) {
+  __privateGet(this, _dragInfoMap).delete(e.pointerId);
+};
+_trackDrag = new WeakSet();
+trackDrag_fn = function(e) {
+  const existing = __privateGet(this, _dragInfoMap).get(e.pointerId);
+  if (!existing) {
+    return { movementInfo: null, hasMoved: false };
+  }
+  let movementInfo;
+  if ((e.movementX ?? 0) !== 0 || (e.movementY ?? 0) !== 0) {
+    movementInfo = {
+      attachedInfo: existing.attachedInfo,
+      movementX: e.movementX,
+      movementY: e.movementY,
+      elapsedMs: e.timeStamp - existing.lastTimeStamp
+    };
+  } else {
+    movementInfo = {
+      attachedInfo: existing.attachedInfo,
+      movementX: e.clientX - existing.lastClientX,
+      movementY: e.clientY - existing.lastClientY,
+      elapsedMs: e.timeStamp - existing.lastTimeStamp
+    };
+  }
+  existing.lastClientX = e.clientX;
+  existing.lastClientY = e.clientY;
+  existing.lastTimeStamp = e.timeStamp;
+  if (Math.abs(movementInfo.movementX) < MOVEMENT_EPSILON && Math.abs(movementInfo.movementY) < MOVEMENT_EPSILON) {
+    return { movementInfo: null, hasMoved: existing.hasMoved };
+  } else {
+    existing.hasMoved = true;
+    return { movementInfo, hasMoved: existing.hasMoved };
+  }
+};
+
 // src/cubing/twisty/views/3D/RendererPool.ts
 var renderers = [];
 async function renderPooled(width, height, canvas, scene, camera) {
@@ -1045,10 +1170,9 @@ async function newRenderer() {
   return renderer;
 }
 
-// src/cubing/twisty/views/3D/TwistyOrbitControlsV2.ts
+// src/cubing/twisty/views/3D/TwistyOrbitControls.ts
 import { Spherical } from "three";
 var INERTIA_DEFAULT = true;
-var LATITUDE_LIMITS_DEFAULT = "auto";
 var INERTIA_DURATION_MS = 500;
 var INERTIA_TIMEOUT_MS = 50;
 var VERTICAL_MOVEMENT_BASE_SCALE = 0.75;
@@ -1079,137 +1203,58 @@ var Inertia = class {
     this.lastTimestamp = now;
   }
 };
-var TwistyOrbitControlsV2 = class {
-  constructor(model, mirror, canvas) {
+var TwistyOrbitControls = class {
+  constructor(model, mirror, canvas, dragTracker) {
     this.model = model;
     this.mirror = mirror;
     this.canvas = canvas;
+    this.dragTracker = dragTracker;
     this.experimentalInertia = INERTIA_DEFAULT;
-    this.experimentalLatitudeLimits = LATITUDE_LIMITS_DEFAULT;
-    this.lastTouchClientX = 0;
-    this.lastTouchClientY = 0;
-    this.currentTouchID = null;
-    this.onMoveBound = this.onMove.bind(this);
-    this.onMouseMoveBound = this.onMouseMove.bind(this);
-    this.onMouseEndBound = this.onMouseEnd.bind(this);
-    this.onTouchMoveBound = this.onTouchMove.bind(this);
-    this.onTouchEndBound = this.onTouchEnd.bind(this);
-    this.lastTouchTimestamp = 0;
-    this.lastTouchMoveMomentumX = 0;
-    this.lastTouchMoveMomentumY = 0;
-    this.lastMouseTimestamp = 0;
-    this.lastMouseMoveMomentumX = 0;
-    this.lastMouseMoveMomentumY = 0;
+    this.onMovementBound = this.onMovement.bind(this);
     this.experimentalHasBeenMoved = false;
-    canvas.addEventListener("mousedown", this.onMouseStart.bind(this));
-    canvas.addEventListener("touchstart", this.onTouchStart.bind(this));
+    this.dragTracker.addEventListener("move", this.onMove.bind(this));
+    this.dragTracker.addEventListener("up", this.onUp.bind(this));
   }
   temperMovement(f) {
     return Math.sign(f) * Math.log(Math.abs(f * 10) + 1) / 6;
   }
-  onMouseStart(e) {
-    window.addEventListener("mousemove", this.onMouseMoveBound);
-    window.addEventListener("mouseup", this.onMouseEndBound);
-    this.onStart(e);
-    this.lastMouseTimestamp = e.timeStamp;
-  }
-  onMouseMove(e) {
-    if (e.buttons === 0) {
-      this.onMouseEnd(e);
-      return;
-    }
-    if (e.movementX === 0 && e.movementY === 0) {
-      return;
-    }
-    const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
-    const movementX = this.temperMovement(e.movementX / minDim);
-    const movementY = this.temperMovement(e.movementY / minDim * VERTICAL_MOVEMENT_BASE_SCALE);
-    this.onMove(movementX, movementY);
-    const deltaMs = e.timeStamp - this.lastMouseTimestamp;
-    if (deltaMs > 0) {
-      this.lastMouseMoveMomentumX = movementX / deltaMs;
-      this.lastMouseMoveMomentumY = movementY / deltaMs;
-      this.lastMouseTimestamp = e.timeStamp;
-    }
-  }
-  onMouseEnd(e) {
-    window.removeEventListener("mousemove", this.onMouseMoveBound);
-    window.removeEventListener("mouseup", this.onMouseEndBound);
-    this.onEnd(e);
-    if (this.experimentalInertia) {
-      new Inertia(this.lastMouseTimestamp, this.lastMouseMoveMomentumX, this.lastMouseMoveMomentumY, this.onMoveBound);
-    }
-  }
-  onTouchStart(e) {
-    if (this.currentTouchID === null) {
-      if (e.touches[0].clientX === 0 && e.touches[0].clientY === 0) {
-        return;
-      }
-      this.currentTouchID = e.changedTouches[0].identifier;
-      this.lastTouchClientX = e.touches[0].clientX;
-      this.lastTouchClientY = e.touches[0].clientY;
-      window.addEventListener("touchmove", this.onTouchMoveBound);
-      window.addEventListener("touchend", this.onTouchEndBound);
-      window.addEventListener("touchcancel", this.onTouchEndBound);
-      this.onStart(e);
-      this.lastTouchTimestamp = e.timeStamp;
-    }
-  }
-  onTouchMove(e) {
-    for (let i = 0; i < e.changedTouches.length; i++) {
-      const touch = e.changedTouches[i];
-      if (touch.identifier === this.currentTouchID) {
-        const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
-        const movementX = this.temperMovement((touch.clientX - this.lastTouchClientX) / minDim);
-        const movementY = this.temperMovement((touch.clientY - this.lastTouchClientY) / minDim * VERTICAL_MOVEMENT_BASE_SCALE);
-        this.onMove(movementX, movementY);
-        this.lastTouchClientX = touch.clientX;
-        this.lastTouchClientY = touch.clientY;
-        const deltaMs = e.timeStamp - this.lastTouchTimestamp;
-        if (deltaMs > 0) {
-          this.lastTouchMoveMomentumX = movementX / deltaMs;
-          this.lastTouchMoveMomentumY = movementY / deltaMs;
-          this.lastTouchTimestamp = e.timeStamp;
-        }
-      }
-    }
-  }
-  onTouchEnd(e) {
-    for (let i = 0; i < e.changedTouches.length; i++) {
-      const touch = e.changedTouches[i];
-      if (touch.identifier === this.currentTouchID) {
-        this.currentTouchID = null;
-        window.removeEventListener("touchmove", this.onTouchMoveBound);
-        window.removeEventListener("touchend", this.onTouchEndBound);
-        window.removeEventListener("touchcancel", this.onTouchEndBound);
-        this.onEnd(e);
-      }
-    }
-    if (this.experimentalInertia) {
-      new Inertia(this.lastTouchTimestamp, this.lastTouchMoveMomentumX, this.lastTouchMoveMomentumY, this.onMoveBound);
-    }
-  }
-  onStart(e) {
-    e.preventDefault();
+  onMove(e) {
+    var _a;
+    (_a = e.detail).attachedInfo ?? (_a.attachedInfo = {});
+    const { temperedX, temperedY } = this.onMovement(e.detail.movementX, e.detail.movementY);
+    const attachedInfo = e.detail.attachedInfo;
+    attachedInfo.lastTemperedX = temperedX * 10;
+    attachedInfo.lastTemperedY = temperedY * 10;
+    attachedInfo.timestamp = e.timeStamp;
   }
-  async onMove(movementX, movementY) {
+  onMovement(movementX, movementY) {
     const scale = this.mirror ? -1 : 1;
+    const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
+    const temperedX = this.temperMovement(movementX / minDim);
+    const temperedY = this.temperMovement(movementY / minDim * VERTICAL_MOVEMENT_BASE_SCALE);
     this.model.orbitCoordinatesRequestProp.set((async () => {
       const prevCoords = await this.model.orbitCoordinatesProp.get();
       const newCoords = {
-        latitude: prevCoords.latitude + 2 * movementY * DEGREES_PER_RADIAN * scale,
-        longitude: prevCoords.longitude - 2 * movementX * DEGREES_PER_RADIAN
+        latitude: prevCoords.latitude + 2 * temperedY * DEGREES_PER_RADIAN * scale,
+        longitude: prevCoords.longitude - 2 * temperedX * DEGREES_PER_RADIAN
       };
       return newCoords;
     })());
+    return { temperedX, temperedY };
   }
-  onEnd(e) {
+  onUp(e) {
     e.preventDefault();
+    if ("lastTemperedX" in e.detail.attachedInfo && "lastTemperedY" in e.detail.attachedInfo && "timestamp" in e.detail.attachedInfo && e.timeStamp - e.detail.attachedInfo.timestamp < 60) {
+      new Inertia(e.timeStamp, e.detail.attachedInfo.lastTemperedX, e.detail.attachedInfo.lastTemperedY, this.onMovementBound);
+    }
   }
 };
 
 // src/cubing/twisty/views/3D/Twisty3DVantage.ts
 var SHOW_STATS = false;
+function debugShowRenderStats(enable) {
+  SHOW_STATS = enable;
+}
 async function setCameraFromOrbitCoordinates(camera, orbitCoordinates, backView = false) {
   const spherical = new (await THREEJS).Spherical(orbitCoordinates.distance, (90 - (backView ? -1 : 1) * orbitCoordinates.latitude) / DEGREES_PER_RADIAN, ((backView ? 180 : 0) + orbitCoordinates.longitude) / DEGREES_PER_RADIAN);
   spherical.makeSafe();
@@ -1217,27 +1262,34 @@ async function setCameraFromOrbitCoordinates(camera, orbitCoordinates, backView
   camera.lookAt(0, 0, 0);
 }
 var shareAllNewRenderers = null;
-function experimentalSetShareAllNewRenderers(share) {
+function experimentalForceNewRendererSharing(share) {
   shareAllNewRenderers = share;
 }
-var anyRenderersSofar = false;
+var dedicatedRenderersSoFar = 0;
+var DEFAULT_MAX_DEDICATED_RENDERERS = 2;
 function shareRenderer() {
   if (shareAllNewRenderers !== null) {
+    if (!shareAllNewRenderers) {
+      dedicatedRenderersSoFar++;
+    }
     return shareAllNewRenderers;
   }
-  if (!anyRenderersSofar) {
-    anyRenderersSofar = true;
+  if (dedicatedRenderersSoFar < DEFAULT_MAX_DEDICATED_RENDERERS) {
+    dedicatedRenderersSoFar++;
     return false;
+  } else {
+    return true;
   }
-  return true;
 }
-var _onResizeStaleDropper, _width, _height, _onResize, onResize_fn, _cachedRenderer, _cachedCanvas, _cachedCamera, _cachedOrbitControls, _disconnectionFunctions2, _scheduler;
+var _setupBasicPresses, setupBasicPresses_fn, _onResizeStaleDropper, _width, _height, _onResize, onResize_fn, _cachedRenderer, _cachedCanvas, _cachedDragTracker, _dragTracker, dragTracker_fn, _cachedCamera, _cachedOrbitControls, _disconnectionFunctions, _scheduler;
 var Twisty3DVantage = class extends ManagedCustomElement {
   constructor(model, scene, options) {
     super();
     this.model = model;
     this.options = options;
+    __privateAdd(this, _setupBasicPresses);
     __privateAdd(this, _onResize);
+    __privateAdd(this, _dragTracker);
     this.scene = null;
     this.stats = null;
     this.rendererIsShared = shareRenderer();
@@ -1246,9 +1298,10 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     __privateAdd(this, _height, 0);
     __privateAdd(this, _cachedRenderer, null);
     __privateAdd(this, _cachedCanvas, null);
+    __privateAdd(this, _cachedDragTracker, null);
     __privateAdd(this, _cachedCamera, null);
     __privateAdd(this, _cachedOrbitControls, null);
-    __privateAdd(this, _disconnectionFunctions2, []);
+    __privateAdd(this, _disconnectionFunctions, []);
     __privateAdd(this, _scheduler, new RenderScheduler(this.render.bind(this)));
     this.scene = scene ?? null;
     if (SHOW_STATS) {
@@ -1258,27 +1311,42 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     }
   }
   async connectedCallback() {
-    this.addCSS(twisty3DCanvasCSS);
-    this.addElement(await this.canvas());
+    this.addCSS(twisty3DVantageCSS);
+    this.addElement((await this.canvasInfo()).canvas);
     __privateMethod(this, _onResize, onResize_fn).call(this);
     const observer = new ResizeObserver(__privateMethod(this, _onResize, onResize_fn).bind(this));
     observer.observe(this.contentWrapper);
     this.orbitControls();
+    __privateMethod(this, _setupBasicPresses, setupBasicPresses_fn).call(this);
     this.scheduleRender();
   }
+  async clearCanvas() {
+    if (this.rendererIsShared) {
+      const canvasInfo = await this.canvasInfo();
+      canvasInfo.context.clearRect(0, 0, canvasInfo.canvas.width, canvasInfo.canvas.height);
+    } else {
+      const renderer = await this.renderer();
+      const context = renderer.getContext();
+      context.clear(context.COLOR_BUFFER_BIT);
+    }
+  }
   async renderer() {
     if (this.rendererIsShared) {
       throw new Error("renderer expected to be shared.");
     }
     return __privateGet(this, _cachedRenderer) ?? __privateSet(this, _cachedRenderer, newRenderer());
   }
-  async canvas() {
+  async canvasInfo() {
     return __privateGet(this, _cachedCanvas) ?? __privateSet(this, _cachedCanvas, (async () => {
+      let canvas;
       if (this.rendererIsShared) {
-        return this.addElement(document.createElement("canvas"));
+        canvas = this.addElement(document.createElement("canvas"));
+      } else {
+        const renderer = await this.renderer();
+        canvas = this.addElement(renderer.domElement);
       }
-      const renderer = await this.renderer();
-      return this.addElement(renderer.domElement);
+      const context = canvas.getContext("2d");
+      return { canvas, context };
     })());
   }
   async camera() {
@@ -1291,7 +1359,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
   }
   async orbitControls() {
     return __privateGet(this, _cachedOrbitControls) ?? __privateSet(this, _cachedOrbitControls, (async () => {
-      const orbitControls = new TwistyOrbitControlsV2(this.model, !!this.options?.backView, await this.canvas());
+      const orbitControls = new TwistyOrbitControls(this.model, !!this.options?.backView, (await this.canvasInfo()).canvas, await __privateMethod(this, _dragTracker, dragTracker_fn).call(this));
       if (this.model) {
         this.addListener(this.model.orbitCoordinatesProp, async (orbitCoordinates) => {
           const camera = await this.camera();
@@ -1304,15 +1372,15 @@ var Twisty3DVantage = class extends ManagedCustomElement {
   }
   addListener(prop, listener) {
     prop.addFreshListener(listener);
-    __privateGet(this, _disconnectionFunctions2).push(() => {
+    __privateGet(this, _disconnectionFunctions).push(() => {
       prop.removeFreshListener(listener);
     });
   }
   disconnect() {
-    for (const fn of __privateGet(this, _disconnectionFunctions2)) {
+    for (const fn of __privateGet(this, _disconnectionFunctions)) {
       fn();
     }
-    __privateSet(this, _disconnectionFunctions2, []);
+    __privateSet(this, _disconnectionFunctions, []);
   }
   async render() {
     if (!this.scene) {
@@ -1322,10 +1390,10 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     const [scene, camera, canvas] = await Promise.all([
       this.scene.scene(),
       this.camera(),
-      this.canvas()
+      this.canvasInfo()
     ]);
     if (this.rendererIsShared) {
-      renderPooled(__privateGet(this, _width), __privateGet(this, _height), canvas, scene, camera);
+      renderPooled(__privateGet(this, _width), __privateGet(this, _height), canvas.canvas, scene, camera);
     } else {
       (await this.renderer()).render(scene, camera);
     }
@@ -1335,6 +1403,22 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     __privateGet(this, _scheduler).requestAnimFrame();
   }
 };
+_setupBasicPresses = new WeakSet();
+setupBasicPresses_fn = async function() {
+  const dragTracker = await __privateMethod(this, _dragTracker, dragTracker_fn).call(this);
+  dragTracker.addEventListener("press", async (e) => {
+    const movePressInput = await this.model.movePressInputProp.get();
+    if (movePressInput !== "basic") {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("press", {
+      detail: {
+        pressInfo: e.detail,
+        cameraPromise: this.camera()
+      }
+    }));
+  });
+};
 _onResizeStaleDropper = new WeakMap();
 _width = new WeakMap();
 _height = new WeakMap();
@@ -1355,24 +1439,33 @@ onResize_fn = async function() {
   camera.aspect = w / h;
   camera.setViewOffset(w, h - excess, off, yoff, w, h);
   camera.updateProjectionMatrix();
+  this.clearCanvas();
   if (this.rendererIsShared) {
-    const canvas = await this.canvas();
-    canvas.width = w * pixelRatio();
-    canvas.height = h * pixelRatio();
-    canvas.style.width = w.toString();
-    canvas.style.height = w.toString();
+    const canvasInfo = await this.canvasInfo();
+    canvasInfo.canvas.width = w * pixelRatio();
+    canvasInfo.canvas.height = h * pixelRatio();
+    canvasInfo.canvas.style.width = w.toString();
+    canvasInfo.canvas.style.height = w.toString();
   } else {
-    (await this.renderer()).setSize(w, h, true);
+    const renderer = await this.renderer();
+    renderer.setSize(w, h, true);
   }
   this.scheduleRender();
 };
 _cachedRenderer = new WeakMap();
 _cachedCanvas = new WeakMap();
+_cachedDragTracker = new WeakMap();
+_dragTracker = new WeakSet();
+dragTracker_fn = async function() {
+  return __privateGet(this, _cachedDragTracker) ?? __privateSet(this, _cachedDragTracker, (async () => {
+    return new DragTracker((await this.canvasInfo()).canvas);
+  })());
+};
 _cachedCamera = new WeakMap();
 _cachedOrbitControls = new WeakMap();
-_disconnectionFunctions2 = new WeakMap();
+_disconnectionFunctions = new WeakMap();
 _scheduler = new WeakMap();
-customElementsShim.define("twisty-3d-vantage-v2", Twisty3DVantage);
+customElementsShim.define("twisty-3d-vantage", Twisty3DVantage);
 
 // src/cubing/twisty/views/3D/Twisty3DSceneWrapper.ts
 var _backViewClassListManager, _freshListenerManager5, _backViewVantage, _cachedScene2, _vantages, _currentTwisty3DPuzzleWrapper, _twisty3DStaleDropper;
@@ -1428,10 +1521,32 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
   onBackView(backView) {
     this.setBackView(backView);
   }
+  async onPress(e) {
+    const twisty3DPuzzleWrapper = __privateGet(this, _currentTwisty3DPuzzleWrapper);
+    if (!twisty3DPuzzleWrapper) {
+      console.info("no wrapper; skipping scene wrapper press!");
+      return;
+    }
+    const raycasterPromise = (async () => {
+      const [camera, three] = await Promise.all([
+        e.detail.cameraPromise,
+        THREEJS
+      ]);
+      const raycaster = new three.Raycaster();
+      const mouse = new Vector2(e.detail.pressInfo.normalizedX, e.detail.pressInfo.normalizedY);
+      raycaster.setFromCamera(mouse, camera);
+      return raycaster;
+    })();
+    twisty3DPuzzleWrapper.raycastMove(raycasterPromise, {
+      invert: !e.detail.pressInfo.rightClick,
+      depth: e.detail.pressInfo.keys.ctrlOrMetaKey ? "rotation" : e.detail.pressInfo.keys.shiftKey ? "secondSlice" : "none"
+    });
+  }
   async scene() {
     return __privateGet(this, _cachedScene2) ?? __privateSet(this, _cachedScene2, (async () => new (await THREEJS).Scene())());
   }
   addVantage(vantage) {
+    vantage.addEventListener("press", this.onPress.bind(this));
     __privateGet(this, _vantages).add(vantage);
     this.contentWrapper.appendChild(vantage);
   }
@@ -1476,7 +1591,7 @@ _currentTwisty3DPuzzleWrapper = new WeakMap();
 _twisty3DStaleDropper = new WeakMap();
 customElementsShim.define("twisty-3d-scene-wrapper", Twisty3DSceneWrapper);
 
-// src/cubing/twisty/old/dom/controls/buttons.css.ts
+// src/cubing/twisty/views/control-panel/TwistyButtonsV2.css.ts
 var buttonGridCSS = new CSSSource(`
 :host {
   width: 384px;
@@ -1794,7 +1909,7 @@ var TwistyButtonV2 = class extends ManagedCustomElement {
 _iconManager = new WeakMap();
 customElementsShim.define("twisty-button-v2", TwistyButtonV2);
 
-// src/cubing/twisty/old/dom/controls/TwistyScrubber.css.ts
+// src/cubing/twisty/views/control-panel/TwistyScrubber.css.ts
 var twistyScrubberCSS = new CSSSource(`
 :host {
   width: 384px;
@@ -2059,21 +2174,12 @@ var BackgroundProp = class extends SimpleTwistyPropSource {
 };
 
 // src/cubing/twisty/model/props/viewer/BackViewProp.ts
-var BackViewProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
-  }
-};
-
-// src/cubing/twisty/model/props/viewer/ControlPanelProp.ts
-var ControlPanelProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
-  }
+var backViewLayouts = {
+  "none": true,
+  "side-by-side": true,
+  "top-right": true
 };
-
-// src/cubing/twisty/model/props/puzzle/display/HintFaceletProp.ts
-var HintFaceletProp = class extends SimpleTwistyPropSource {
+var BackViewProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
@@ -2186,13 +2292,6 @@ var SetupAnchorProp = class extends SimpleTwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/display/StickeringProp.ts
-var StickeringProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "full";
-  }
-};
-
 // src/cubing/twisty/model/props/timeline/TempoScaleProp.ts
 var TempoScaleProp = class extends TwistyPropSource {
   getDefaultValue() {
@@ -2280,6 +2379,53 @@ var OrbitCoordinatesProp = class extends TwistyPropDerived {
     }
   }
 };
+var centeredCameraOrbitCoordinates = {
+  latitude: 31.717474411461005,
+  longitude: 0,
+  distance: 5.877852522924731
+};
+var cubeCube3DCameraOrbitCoordinates = {
+  latitude: 35,
+  longitude: 30,
+  distance: 6
+};
+var cubePG3DCameraOrbitCoordinates = {
+  latitude: 35,
+  longitude: 30,
+  distance: 6.25
+};
+var megaminxCameraOrbitCoordinates = {
+  latitude: Math.atan(1 / 2) * DEGREES_PER_RADIAN,
+  longitude: 0,
+  distance: 6.7
+};
+var pyraminxCameraOrbitCoordinates = {
+  latitude: 26.56505117707799,
+  longitude: 0,
+  distance: 6
+};
+function defaultCameraOrbitCoordinates(puzzleID, strategy) {
+  if (puzzleID[1] === "x") {
+    if (strategy === "Cube3D") {
+      return cubeCube3DCameraOrbitCoordinates;
+    } else {
+      return cubePG3DCameraOrbitCoordinates;
+    }
+  } else {
+    switch (puzzleID) {
+      case "megaminx":
+      case "gigaminx":
+        return megaminxCameraOrbitCoordinates;
+      case "pyraminx":
+      case "master_tetraminx":
+        return pyraminxCameraOrbitCoordinates;
+      case "skewb":
+        return cubePG3DCameraOrbitCoordinates;
+      default:
+        return centeredCameraOrbitCoordinates;
+    }
+  }
+}
 
 // src/cubing/twisty/model/props/puzzle/structure/PuzzleIDProp.ts
 var PuzzleIDProp = class extends TwistyPropDerived {
@@ -2342,7 +2488,7 @@ var VisualizationStrategyProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/old/animation/indexer/AlgDuration.ts
+// src/cubing/twisty/controllers/indexer/AlgDuration.ts
 function defaultDurationForAmount(amount) {
   switch (Math.abs(amount)) {
     case 0:
@@ -2390,7 +2536,7 @@ var AlgDuration = class extends TraversalUp {
   }
 };
 
-// src/cubing/twisty/old/animation/indexer/SimpleAlgIndexer.ts
+// src/cubing/twisty/controllers/indexer/SimpleAlgIndexer.ts
 var SimpleAlgIndexer = class {
   constructor(puzzle, alg) {
     this.puzzle = puzzle;
@@ -2436,7 +2582,7 @@ var SimpleAlgIndexer = class {
   }
 };
 
-// src/cubing/twisty/old/animation/indexer/simultaneous-moves/simul-moves.ts
+// src/cubing/twisty/controllers/indexer/simultaneous-moves/simul-moves.ts
 var axisLookup = {
   u: "y",
   l: "x",
@@ -2566,7 +2712,7 @@ function simulMoves(a) {
   return l;
 }
 
-// src/cubing/twisty/old/animation/indexer/simultaneous-moves/SimultaneousMoveIndexerV2.ts
+// src/cubing/twisty/controllers/indexer/simultaneous-moves/SimultaneousMoveIndexerV2.ts
 var demos = {
   "y' y' U' E D R2 r2 F2 B2 U E D' R2 L2' z2 S2 U U D D S2 F2' B2": [
     { animLeaf: new Move("y", -1), start: 0, end: 1e3 },
@@ -2757,7 +2903,7 @@ var SimultaneousMoveIndexerV2 = class {
   }
 };
 
-// src/cubing/twisty/old/animation/indexer/tree/chunkAlgs.ts
+// src/cubing/twisty/controllers/indexer/tree/chunkAlgs.ts
 var MIN_CHUNKING_THRESHOLD = 16;
 function chunkifyAlg(alg, chunkMaxLength) {
   const mainAlgBuilder = new AlgBuilder();
@@ -2805,7 +2951,7 @@ var ChunkAlgs = class extends TraversalUp {
 var chunkAlgsInstance = new ChunkAlgs();
 var chunkAlgs = chunkAlgsInstance.traverseAlg.bind(chunkAlgsInstance);
 
-// src/cubing/twisty/old/animation/indexer/tree/AlgWalker.ts
+// src/cubing/twisty/controllers/indexer/tree/AlgWalker.ts
 var AlgPartDecoration = class {
   constructor(_puz, moveCount, duration, forward, backward, children = []) {
     this.moveCount = moveCount;
@@ -3042,7 +3188,7 @@ var AlgWalker = class extends TraversalDownUp {
   }
 };
 
-// src/cubing/twisty/old/animation/indexer/tree/TreeAlgIndexer.ts
+// src/cubing/twisty/controllers/indexer/tree/TreeAlgIndexer.ts
 var TreeAlgIndexer = class {
   constructor(puzzle, alg) {
     this.puzzle = puzzle;
@@ -3437,6 +3583,30 @@ var CatchUpMoveProp = class extends SimpleTwistyPropSource {
   }
 };
 
+// src/cubing/twisty/model/props/puzzle/state/NaiveMoveCountProp.ts
+var NaiveMoveCountProp = class extends TwistyPropDerived {
+  derive(inputs) {
+    if (inputs.alg.issues.errors.length > 0) {
+      return null;
+    }
+    return countMoves(inputs.alg.alg);
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/state/MovePressInputProp.ts
+var MovePressInputProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/display/FoundationDisplayProp.ts
+var FoundationDisplayProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
 // src/cubing/twisty/model/TwistyPlayerModel.ts
 var TwistyPlayerModel = class {
   constructor() {
@@ -3446,11 +3616,13 @@ var TwistyPlayerModel = class {
     this.backViewProp = new BackViewProp();
     this.controlPanelProp = new ControlPanelProp();
     this.catchUpMoveProp = new CatchUpMoveProp();
+    this.foundationDisplayProp = new FoundationDisplayProp();
     this.foundationStickerSpriteURL = new URLProp();
     this.hintFaceletProp = new HintFaceletProp();
     this.hintStickerSpriteURL = new URLProp();
     this.indexerConstructorRequestProp = new IndexerConstructorRequestProp();
     this.latitudeLimitProp = new LatitudeLimitProp();
+    this.movePressInputProp = new MovePressInputProp();
     this.orbitCoordinatesRequestProp = new OrbitCoordinatesRequestProp();
     this.playingInfoProp = new PlayingInfoProp();
     this.puzzleDescriptionRequestProp = new PGPuzzleDescriptionStringProp();
@@ -3492,6 +3664,7 @@ var TwistyPlayerModel = class {
       visualizationStrategy: this.visualizationStrategyProp,
       indexerConstructorRequest: this.indexerConstructorRequestProp
     });
+    this.moveCountProp = new NaiveMoveCountProp({ alg: this.puzzleAlgProp });
     this.orbitCoordinatesProp = new OrbitCoordinatesProp({
       orbitCoordinatesRequest: this.orbitCoordinatesRequestProp,
       latitudeLimit: this.latitudeLimitProp,
@@ -3550,11 +3723,12 @@ var TwistyPlayerModel = class {
   }
   async twizzleLink() {
     const url = new URL("https://alpha.twizzle.net/edit/");
-    const [puzzle, alg, setup, anchor] = await Promise.all([
+    const [puzzle, alg, setup, anchor, experimentalStickering] = await Promise.all([
       this.puzzleIDProp.get(),
       this.algProp.get(),
       this.setupProp.get(),
-      this.setupAnchorProp.get()
+      this.setupAnchorProp.get(),
+      this.stickeringProp.get()
     ]);
     if (!alg.alg.experimentalIsEmpty()) {
       url.searchParams.set("alg", alg.alg.toString());
@@ -3565,11 +3739,30 @@ var TwistyPlayerModel = class {
     if (anchor !== "start") {
       url.searchParams.set("setup-anchor", anchor);
     }
+    if (experimentalStickering !== "full") {
+      url.searchParams.set("experimental-stickering", experimentalStickering);
+    }
     if (puzzle !== "3x3x3") {
       url.searchParams.set("puzzle", puzzle);
     }
     return url.toString();
   }
+  experimentalAddMove(flexibleMove, options = {}) {
+    const move = typeof flexibleMove === "string" ? new Move(flexibleMove) : flexibleMove;
+    (async () => {
+      const alg = (await this.algProp.get()).alg;
+      const newAlg = experimentalAppendMove(alg, move, {
+        coalesce: options?.coalesce,
+        mod: options?.mod
+      });
+      this.algProp.set(newAlg);
+      this.timestampRequestProp.set("end");
+      this.catchUpMoveProp.set({
+        move,
+        amount: 0
+      });
+    })();
+  }
 };
 
 // src/cubing/twisty/views/TwistyPlayerSettable.ts
@@ -3646,13 +3839,13 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
     this.experimentalModel.controlPanelProp.set(newControlPanel);
   }
   get controlPanel() {
-    throw new Error("Cannot get `.controlPanel` directly from a `TwistyPlayer`.");
+    throw err("controlPanel");
   }
   set visualization(visualizationFormat) {
     this.experimentalModel.visualizationFormatProp.set(visualizationFormat);
   }
   get visualization() {
-    throw new Error("Cannot get `.visualization` directly from a `TwistyPlayer`.");
+    throw err("visualization");
   }
   set viewerLink(viewerLinkPage) {
     this.experimentalModel.viewerLinkProp.set(viewerLinkPage);
@@ -3660,29 +3853,35 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
   get viewerLink() {
     throw err("viewerLink");
   }
+  set experimentalMovePressInput(movePressInput) {
+    this.experimentalModel.movePressInputProp.set(movePressInput);
+  }
+  get experimentalMovePressInput() {
+    throw err("experimentalMovePressInput");
+  }
   set cameraLatitude(latitude) {
     this.experimentalModel.orbitCoordinatesRequestProp.set({ latitude });
   }
   get cameraLatitude() {
-    throw new Error("Cannot get `.cameraLatitude` directly from a `TwistyPlayer`.");
+    throw err("cameraLatitude");
   }
   set cameraLongitude(longitude) {
     this.experimentalModel.orbitCoordinatesRequestProp.set({ longitude });
   }
   get cameraLongitude() {
-    throw new Error("Cannot get `.cameraLongitude` directly from a `TwistyPlayer`.");
+    throw err("cameraLongitude");
   }
   set cameraDistance(distance) {
     this.experimentalModel.orbitCoordinatesRequestProp.set({ distance });
   }
   get cameraDistance() {
-    throw new Error("Cannot get `.cameraDistance` directly from a `TwistyPlayer`.");
+    throw err("cameraDistance");
   }
   set cameraLatitudeLimit(latitudeLimit) {
     this.experimentalModel.latitudeLimitProp.set(latitudeLimit);
   }
   get cameraLatitudeLimit() {
-    throw new Error("Cannot get `.cameraLatitudeLimit` directly from a `TwistyPlayer`.");
+    throw err("cameraLatitudeLimit");
   }
   set indexer(indexer) {
     this.experimentalModel.indexerConstructorRequestProp.set(indexer);
@@ -3741,6 +3940,7 @@ var twistyPlayerAttributeMap = {
   "control-panel": "controlPanel",
   "back-view": "backView",
   "viewer-link": "viewerLink",
+  "experimental-move-press-input": "experimentalMovePressInput",
   "camera-latitude": "cameraLatitude",
   "camera-longitude": "cameraLongitude",
   "camera-distance": "cameraDistance",
@@ -3813,7 +4013,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     if (wrapper instanceof Twisty3DSceneWrapper) {
       const vantages = wrapper.experimentalVantages();
       for (const vantage of vantages) {
-        canvases.push(await vantage.canvas());
+        canvases.push((await vantage.canvasInfo()).canvas);
       }
     }
     return canvases;
@@ -3842,19 +4042,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     this.controller.togglePlay(play);
   }
   experimentalAddMove(flexibleMove, options = {}) {
-    const move = typeof flexibleMove === "string" ? new Move(flexibleMove) : flexibleMove;
-    (async () => {
-      const alg = (await this.experimentalModel.algProp.get()).alg;
-      const newAlg = experimentalAppendMove(alg, move, {
-        coalesce: options?.coalesce
-      });
-      this.experimentalModel.algProp.set(newAlg);
-      this.experimentalModel.timestampRequestProp.set("end");
-      this.experimentalModel.catchUpMoveProp.set({
-        move,
-        amount: 0
-      });
-    })();
+    this.experimentalModel.experimentalAddMove(flexibleMove, options);
   }
   static get observedAttributes() {
     return Object.keys(twistyPlayerAttributeMap);
@@ -4510,6 +4698,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     ]));
     __privateAdd(this, _twistyPlayer, null);
     __privateAdd(this, _twistyPlayerProp, void 0);
+    this.debugNeverRequestTimestamp = false;
     __privateAdd(this, _onInputHasFired, false);
     __privateAdd(this, _highlightedLeaf, null);
     __privateGet(this, _carbonCopy).classList.add("carbon-copy");
@@ -4657,7 +4846,9 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
             console.log("invalid where");
             throw new Error("Invalid where!");
         }
-        twistyPlayer.experimentalModel.timestampRequestProp.set(newTimestamp);
+        if (!this.debugNeverRequestTimestamp) {
+          twistyPlayer.experimentalModel.timestampRequestProp.set(newTimestamp);
+        }
       });
       twistyPlayer.experimentalModel.currentLeavesSimplifiedProp.addFreshListener(async (currentLeavesSimplified) => {
         const indexer = await twistyPlayer.experimentalModel.indexerProp.get();
@@ -4724,1826 +4915,18 @@ padSuffix_fn = function(s) {
 };
 _highlightedLeaf = new WeakMap();
 customElementsShim.define("twisty-alg-editor", TwistyAlgEditor);
-
-// src/cubing/twisty/old/dom/TwistyPlayer.ts
-import { Vector3 as Vector32 } from "three";
-
-// src/cubing/twisty/old/animation/cursor/AlgCursor.ts
-var AlgCursor = class {
-  constructor(timeline, def, alg, startStateAlg, indexerConstructor) {
-    this.timeline = timeline;
-    this.def = def;
-    this.alg = alg;
-    this.positionListeners = new Set();
-    this.indexerConstructor = TreeAlgIndexer;
-    this.ksolvePuzzle = new KPuzzleWrapper(def);
-    if (indexerConstructor) {
-      this.indexerConstructor = indexerConstructor;
-    }
-    this.instantiateIndexer(alg);
-    this.startState = startStateAlg ? this.algToState(startStateAlg) : this.ksolvePuzzle.startState();
-    timeline.addTimestampListener(this);
-  }
-  setStartState(startState) {
-    this.startState = startState;
-    this.dispatchPositionForTimestamp(this.timeline.timestamp);
-  }
-  experimentalSetIndexer(indexerConstructor) {
-    this.indexerConstructor = indexerConstructor;
-    this.instantiateIndexer(this.alg);
-    this.timeline.onCursorChange(this);
-    this.dispatchPositionForTimestamp(this.timeline.timestamp);
-  }
-  instantiateIndexer(alg) {
-    this.indexer = new this.indexerConstructor(this.ksolvePuzzle, alg);
-  }
-  algToState(s) {
-    const kpuzzle = new KPuzzle(this.def);
-    kpuzzle.applyAlg(s);
-    return this.ksolvePuzzle.combine(this.def.startPieces, kpuzzle.state);
-  }
-  timeRange() {
-    return {
-      start: 0,
-      end: this.indexer.algDuration()
-    };
-  }
-  experimentalTimestampForStartOfLastMove() {
-    const numMoves = this.indexer.numAnimatedLeaves();
-    if (numMoves > 0) {
-      return this.indexer.indexToMoveStartTimestamp(numMoves - 1);
-    }
-    return 0;
-  }
-  addPositionListener(positionListener) {
-    this.positionListeners.add(positionListener);
-    this.dispatchPositionForTimestamp(this.timeline.timestamp, [
-      positionListener
-    ]);
-  }
-  removePositionListener(positionListener) {
-    this.positionListeners.delete(positionListener);
-  }
-  onTimelineTimestampChange(timestamp) {
-    this.dispatchPositionForTimestamp(timestamp);
-  }
-  dispatchPositionForTimestamp(timestamp, listeners = this.positionListeners) {
-    let position;
-    if (this.indexer.timestampToPosition) {
-      position = this.indexer.timestampToPosition(timestamp, this.startState);
-    } else {
-      const idx = this.indexer.timestampToIndex(timestamp);
-      const state = this.indexer.stateAtIndex(idx, this.startState);
-      position = {
-        state,
-        movesInProgress: []
-      };
-      if (this.indexer.numAnimatedLeaves() > 0) {
-        const move = this.indexer.getAnimLeaf(idx)?.as(Move);
-        if (!move) {
-          return;
-        }
-        const fraction = (timestamp - this.indexer.indexToMoveStartTimestamp(idx)) / this.indexer.moveDuration(idx);
-        if (fraction === 1) {
-          position.state = this.ksolvePuzzle.combine(state, this.ksolvePuzzle.stateFromMove(move));
-        } else if (fraction > 0) {
-          if (move) {
-            position.movesInProgress.push({
-              move,
-              direction: Direction.Forwards,
-              fraction
-            });
-          }
-        }
-      }
-    }
-    for (const listener of listeners) {
-      listener.onPositionChange(position);
-    }
-  }
-  onTimeRangeChange(_timeRange) {
-  }
-  setAlg(alg, indexerConstructor) {
-    indexerConstructor ?? (indexerConstructor = this.indexerConstructor);
-    if (alg.isIdentical(this.alg) && this.indexerConstructor === indexerConstructor) {
-      return;
-    }
-    this.indexerConstructor = indexerConstructor;
-    this.alg = alg;
-    this.instantiateIndexer(alg);
-    this.timeline.onCursorChange(this);
-    this.dispatchPositionForTimestamp(this.timeline.timestamp);
-  }
-  moveBoundary(timestamp, direction) {
-    if (this.indexer.numAnimatedLeaves() === 0) {
-      return null;
-    }
-    const offsetHack = directionScalar(direction) * 1e-3;
-    const idx = this.indexer.timestampToIndex(timestamp + offsetHack);
-    const moveStart = this.indexer.indexToMoveStartTimestamp(idx);
-    if (direction === Direction.Backwards) {
-      return timestamp >= moveStart ? moveStart : null;
-    } else {
-      const moveEnd = moveStart + this.indexer.moveDuration(idx);
-      return timestamp <= moveEnd ? moveEnd : null;
-    }
-  }
-  setPuzzle(def, alg = this.alg, startStateAlg) {
-    this.ksolvePuzzle = new KPuzzleWrapper(def);
-    this.def = def;
-    this.indexer = new this.indexerConstructor(this.ksolvePuzzle, alg);
-    if (alg !== this.alg) {
-      this.timeline.onCursorChange(this);
-    }
-    this.setStartState(startStateAlg ? this.algToState(startStateAlg) : this.ksolvePuzzle.startState());
-    this.alg = alg;
-  }
-  experimentalTimestampFromIndex(index) {
-    return this.indexer.indexToMoveStartTimestamp(index);
-  }
-  experimentalIndexFromTimestamp(timestamp) {
-    return this.indexer.timestampToIndex(timestamp);
-  }
-  experimentalLeafAtIndex(index) {
-    return this.indexer.getAnimLeaf(index);
-  }
-};
-
-// src/cubing/twisty/old/animation/indexer/simultaneous-moves/SimultaneousMoveIndexer.ts
-var demos2 = {
-  "y' y' U' E D R2 r2 F2 B2 U E D' R2 L2' z2 S2 U U D D S2 F2' B2": [
-    { animLeaf: new Move("y", -1), start: 0, end: 1e3 },
-    { animLeaf: new Move("y", -1), start: 1e3, end: 2e3 },
-    { animLeaf: new Move("U", -1), start: 1e3, end: 1600 },
-    { animLeaf: new Move("E", 1), start: 1200, end: 1800 },
-    { animLeaf: new Move("D"), start: 1400, end: 2e3 },
-    { animLeaf: new Move("R", 2), start: 2e3, end: 3500 },
-    { animLeaf: new Move("r", 2), start: 2e3, end: 3500 },
-    { animLeaf: new Move("F", 2), start: 3500, end: 4200 },
-    { animLeaf: new Move("B", 2), start: 3800, end: 4500 },
-    { animLeaf: new Move("U", 1), start: 4500, end: 5500 },
-    { animLeaf: new Move("E", 1), start: 4500, end: 5500 },
-    { animLeaf: new Move("D", -1), start: 4500, end: 5500 },
-    { animLeaf: new Move("R", 2), start: 5500, end: 6500 },
-    { animLeaf: new Move("L", -2), start: 5500, end: 6500 },
-    { animLeaf: new Move("z", 2), start: 5500, end: 6500 },
-    { animLeaf: new Move("S", 2), start: 6500, end: 7500 },
-    { animLeaf: new Move("U"), start: 7500, end: 8e3 },
-    { animLeaf: new Move("U"), start: 8e3, end: 8500 },
-    { animLeaf: new Move("D"), start: 7750, end: 8250 },
-    { animLeaf: new Move("D"), start: 8250, end: 8750 },
-    { animLeaf: new Move("S", 2), start: 8750, end: 9250 },
-    { animLeaf: new Move("F", -2), start: 8750, end: 1e4 },
-    { animLeaf: new Move("B", 2), start: 8750, end: 1e4 }
-  ],
-  "M' R' U' D' M R": [
-    { animLeaf: new Move("M", -1), start: 0, end: 1e3 },
-    { animLeaf: new Move("R", -1), start: 0, end: 1e3 },
-    { animLeaf: new Move("U", -1), start: 1e3, end: 2e3 },
-    { animLeaf: new Move("D", -1), start: 1e3, end: 2e3 },
-    { animLeaf: new Move("M"), start: 2e3, end: 3e3 },
-    { animLeaf: new Move("R"), start: 2e3, end: 3e3 }
-  ],
-  "U' E' r E r2' E r U E": [
-    { animLeaf: new Move("U", -1), start: 0, end: 1e3 },
-    { animLeaf: new Move("E", -1), start: 0, end: 1e3 },
-    { animLeaf: new Move("r"), start: 1e3, end: 2500 },
-    { animLeaf: new Move("E"), start: 2500, end: 3500 },
-    { animLeaf: new Move("r", -2), start: 3500, end: 5e3 },
-    { animLeaf: new Move("E"), start: 5e3, end: 6e3 },
-    { animLeaf: new Move("r"), start: 6e3, end: 7e3 },
-    { animLeaf: new Move("U"), start: 7e3, end: 8e3 },
-    { animLeaf: new Move("E"), start: 7e3, end: 8e3 }
-  ]
-};
-var SimultaneousMoveIndexer = class {
-  constructor(puzzle, alg) {
-    this.puzzle = puzzle;
-    this.animLeaves = demos2[alg.toString()] ?? simulMoves(alg);
-  }
-  getAnimLeaf(index) {
-    return this.animLeaves[Math.min(index, this.animLeaves.length - 1)]?.animLeaf ?? null;
-  }
-  getAnimLeafWithRange(index) {
-    return this.animLeaves[Math.min(index, this.animLeaves.length - 1)];
-  }
-  indexToMoveStartTimestamp(index) {
-    let start = 0;
-    if (this.animLeaves.length > 0) {
-      start = this.animLeaves[Math.min(index, this.animLeaves.length - 1)].start;
-    }
-    return start;
-  }
-  timestampToIndex(timestamp) {
-    let i = 0;
-    for (i = 0; i < this.animLeaves.length; i++) {
-      if (this.animLeaves[i].start >= timestamp) {
-        return Math.max(0, i - 1);
-      }
-    }
-    return Math.max(0, i - 1);
-  }
-  timestampToPosition(timestamp, startTransformation) {
-    const position = {
-      state: startTransformation ?? this.puzzle.identity(),
-      movesInProgress: []
-    };
-    for (const leafWithRange of this.animLeaves) {
-      if (leafWithRange.end <= timestamp) {
-        const move = leafWithRange.animLeaf.as(Move);
-        if (move !== null) {
-          position.state = this.puzzle.combine(position.state, this.puzzle.stateFromMove(move));
-        }
-      } else if (leafWithRange.start < timestamp && timestamp < leafWithRange.end) {
-        const move = leafWithRange.animLeaf.as(Move);
-        if (move !== null) {
-          position.movesInProgress.push({
-            move,
-            direction: Direction.Forwards,
-            fraction: (timestamp - leafWithRange.start) / (leafWithRange.end - leafWithRange.start)
-          });
-        }
-      } else if (timestamp < leafWithRange.start) {
-        continue;
-      }
-    }
-    return position;
-  }
-  stateAtIndex(index, startTransformation) {
-    let state = startTransformation ?? this.puzzle.startState();
-    for (let i = 0; i < this.animLeaves.length && i < index; i++) {
-      const leafWithRange = this.animLeaves[i];
-      const move = leafWithRange.animLeaf.as(Move);
-      if (move !== null) {
-        state = this.puzzle.combine(state, this.puzzle.stateFromMove(move));
-      }
-    }
-    return state;
-  }
-  transformAtIndex(index) {
-    let state = this.puzzle.identity();
-    for (const leafWithRange of this.animLeaves.slice(0, index)) {
-      const move = leafWithRange.animLeaf.as(Move);
-      if (move !== null) {
-        state = this.puzzle.combine(state, this.puzzle.stateFromMove(move));
-      }
-    }
-    return state;
-  }
-  algDuration() {
-    let max = 0;
-    for (const leafWithRange of this.animLeaves) {
-      max = Math.max(max, leafWithRange.end);
-    }
-    return max;
-  }
-  numAnimatedLeaves() {
-    return this.animLeaves.length;
-  }
-  moveDuration(index) {
-    const move = this.getAnimLeafWithRange(index);
-    return move.end - move.start;
-  }
-};
-
-// src/cubing/twisty/old/animation/Timeline.ts
-var PAUSE_ON_JUMP = true;
-var TimelineAction;
-(function(TimelineAction2) {
-  TimelineAction2["StartingToPlay"] = "StartingToPlay";
-  TimelineAction2["Pausing"] = "Pausing";
-  TimelineAction2["Jumping"] = "Jumping";
-})(TimelineAction || (TimelineAction = {}));
-var TimestampLocationType;
-(function(TimestampLocationType2) {
-  TimestampLocationType2["StartOfTimeline"] = "Start";
-  TimestampLocationType2["EndOfTimeline"] = "End";
-  TimestampLocationType2["StartOfMove"] = "StartOfMove";
-  TimestampLocationType2["EndOfMove"] = "EndOfMove";
-  TimestampLocationType2["MiddleOfMove"] = "MiddleOfMove";
-  TimestampLocationType2["BetweenMoves"] = "BetweenMoves";
-})(TimestampLocationType || (TimestampLocationType = {}));
-function getNow() {
-  return Math.round(performance.now());
-}
-var Timeline = class {
-  constructor() {
-    this.animating = false;
-    this.tempoScale = 1;
-    this.cursors = new Set();
-    this.timestampListeners = new Set();
-    this.actionListeners = new Set();
-    this.timestamp = 0;
-    this.lastAnimFrameNow = 0;
-    this.direction = Direction.Forwards;
-    this.boundaryType = BoundaryType.EntireTimeline;
-    const animFrame = (_now) => {
-      if (this.animating) {
-        const now = getNow();
-        this.timestamp = this.timestamp + this.tempoScale * directionScalar(this.direction) * (now - this.lastAnimFrameNow);
-        this.lastAnimFrameNow = now;
-        const atOrPastBoundary = this.direction === Direction.Backwards ? this.timestamp <= this.cachedNextBoundary : this.timestamp >= this.cachedNextBoundary;
-        if (atOrPastBoundary) {
-          this.timestamp = this.cachedNextBoundary;
-          if (this.animating) {
-            this.animating = false;
-            this.dispatchAction(TimelineAction.Pausing);
-          }
-        }
-      }
-      if (this.timestamp !== this.lastAnimFrameTimestamp) {
-        this.dispatchTimestamp();
-        this.lastAnimFrameTimestamp = this.timestamp;
-      }
-      if (this.animating) {
-        this.scheduler.requestAnimFrame();
-      }
-    };
-    this.scheduler = new RenderScheduler(animFrame);
-  }
-  addCursor(cursor) {
-    this.cursors.add(cursor);
-    this.dispatchTimeRange();
-  }
-  removeCursor(cursor) {
-    this.cursors.delete(cursor);
-    this.clampTimestampToRange();
-    this.dispatchTimeRange();
-  }
-  clampTimestampToRange() {
-    const timeRange = this.timeRange();
-    if (this.timestamp < timeRange.start) {
-      this.setTimestamp(timeRange.start);
-    }
-    if (this.timestamp > timeRange.end) {
-      this.setTimestamp(timeRange.end);
-    }
-  }
-  onCursorChange(_cursor) {
-    if (this.timestamp > this.maxTimestamp()) {
-      this.timestamp = this.maxTimestamp();
-    }
-    this.dispatchTimeRange();
-  }
-  timeRange() {
-    let start = 0;
-    let end = 0;
-    for (const cursor of this.cursors) {
-      const cursorTimeRange = cursor.timeRange();
-      start = Math.min(start, cursorTimeRange.start);
-      end = Math.max(end, cursorTimeRange.end);
-    }
-    return { start, end };
-  }
-  minTimestamp() {
-    return this.timeRange().start;
-  }
-  maxTimestamp() {
-    return this.timeRange().end;
-  }
-  dispatchTimeRange() {
-    const timeRange = this.timeRange();
-    for (const listener of this.cursors) {
-      listener.onTimeRangeChange(timeRange);
-    }
-    for (const listener of this.timestampListeners) {
-      listener.onTimeRangeChange(timeRange);
-    }
-  }
-  dispatchTimestamp() {
-    for (const listener of this.cursors) {
-      listener.onTimelineTimestampChange(this.timestamp);
-    }
-    for (const listener of this.timestampListeners) {
-      listener.onTimelineTimestampChange(this.timestamp);
-    }
-  }
-  addTimestampListener(timestampListener) {
-    this.timestampListeners.add(timestampListener);
-  }
-  removeTimestampListener(timestampListener) {
-    this.timestampListeners.delete(timestampListener);
-  }
-  addActionListener(actionListener) {
-    this.actionListeners.add(actionListener);
-  }
-  removeActionListener(actionListener) {
-    this.actionListeners.delete(actionListener);
-  }
-  play() {
-    this.experimentalPlay(Direction.Forwards, BoundaryType.EntireTimeline);
-  }
-  experimentalPlay(direction, boundaryType = BoundaryType.EntireTimeline) {
-    this.direction = direction;
-    this.boundaryType = boundaryType;
-    const nextBoundary = this.nextBoundary(this.timestamp, direction, this.boundaryType);
-    if (nextBoundary === null) {
-      return;
-    }
-    this.cachedNextBoundary = nextBoundary;
-    if (!this.animating) {
-      this.animating = true;
-      this.lastAnimFrameNow = getNow();
-      this.dispatchAction(TimelineAction.StartingToPlay);
-      this.scheduler.requestAnimFrame();
-    }
-  }
-  nextBoundary(timestamp, direction, boundaryType = BoundaryType.EntireTimeline) {
-    switch (boundaryType) {
-      case BoundaryType.EntireTimeline: {
-        switch (direction) {
-          case Direction.Backwards:
-            return timestamp <= this.minTimestamp() ? null : this.minTimestamp();
-          case Direction.Forwards:
-            return timestamp >= this.maxTimestamp() ? null : this.maxTimestamp();
-          default:
-            throw new Error("invalid direction");
-        }
-      }
-      case BoundaryType.Move: {
-        let result = null;
-        for (const cursor of this.cursors) {
-          const boundaryTimestamp = cursor.moveBoundary(timestamp, direction);
-          if (boundaryTimestamp !== null) {
-            switch (direction) {
-              case Direction.Backwards: {
-                result = Math.min(result ?? boundaryTimestamp, boundaryTimestamp);
-                break;
-              }
-              case Direction.Forwards: {
-                result = Math.max(result ?? boundaryTimestamp, boundaryTimestamp);
-                break;
-              }
-              default:
-                throw new Error("invalid direction");
-            }
-          }
-        }
-        return result;
-      }
-      default:
-        throw new Error("invalid boundary type");
-    }
-  }
-  pause() {
-    if (this.animating) {
-      this.animating = false;
-      this.dispatchAction(TimelineAction.Pausing);
-      this.scheduler.requestAnimFrame();
-    }
-  }
-  playPause() {
-    if (this.animating) {
-      this.pause();
-    } else {
-      if (this.timestamp >= this.maxTimestamp()) {
-        this.timestamp = 0;
-      }
-      this.experimentalPlay(Direction.Forwards, BoundaryType.EntireTimeline);
-    }
-  }
-  setTimestamp(timestamp) {
-    const oldTimestamp = this.timestamp;
-    this.timestamp = timestamp;
-    this.lastAnimFrameNow = getNow();
-    if (oldTimestamp !== timestamp) {
-      this.dispatchAction(TimelineAction.Jumping);
-      this.scheduler.requestAnimFrame();
-    }
-    if (PAUSE_ON_JUMP) {
-      this.animating = false;
-      this.dispatchAction(TimelineAction.Pausing);
-    }
-  }
-  jumpToStart() {
-    this.setTimestamp(this.minTimestamp());
-  }
-  jumpToEnd() {
-    this.setTimestamp(this.maxTimestamp());
-  }
-  experimentalJumpToLastMove() {
-    let max = 0;
-    for (const cursor of this.cursors) {
-      max = Math.max(max, cursor.experimentalTimestampForStartOfLastMove() ?? 0);
-    }
-    this.setTimestamp(max);
-  }
-  dispatchAction(event) {
-    let locationType = TimestampLocationType.MiddleOfMove;
-    switch (this.timestamp) {
-      case this.minTimestamp():
-        locationType = TimestampLocationType.StartOfTimeline;
-        break;
-      case this.maxTimestamp():
-        locationType = TimestampLocationType.EndOfTimeline;
-        break;
-    }
-    const actionEvent = {
-      action: event,
-      locationType
-    };
-    for (const listener of this.actionListeners) {
-      listener.onTimelineAction(actionEvent);
-    }
-  }
-};
-
-// src/cubing/twisty/old/dom/controls/buttons.ts
-var TwistyControlButton = class extends ManagedCustomElement {
-  constructor(timeline, timelineCommand, options) {
-    super();
-    this.currentIconName = null;
-    this.button = document.createElement("button");
-    this.fullscreenElement = null;
-    this.visitTwizzleLinkCallback = null;
-    this.fullscreenElement = options?.fullscreenElement ?? null;
-    this.visitTwizzleLinkCallback = options?.visitTwizzleLinkCallback ?? null;
-    if (!timeline) {
-      console.warn("Must have timeline!");
-    }
-    this.timeline = timeline;
-    if (!timelineCommand) {
-      console.warn("Must have timelineCommand!");
-    }
-    this.timelineCommand = timelineCommand;
-    this.addCSS(buttonCSS);
-    this.setIcon(this.initialIcon());
-    this.setHoverTitle(this.initialHoverTitle());
-    this.addElement(this.button);
-    this.addEventListener("click", this.onPress.bind(this));
-    switch (this.timelineCommand) {
-      case "fullscreen":
-        if (!document.fullscreenEnabled) {
-          this.button.disabled = true;
-        }
-        break;
-      case "jump-to-start":
-      case "play-step-backwards":
-        this.button.disabled = true;
-        break;
-    }
-    if (this.timeline) {
-      this.timeline.addActionListener(this);
-      switch (this.timelineCommand) {
-        case "play-pause":
-        case "play-step-backwards":
-        case "play-step":
-          this.timeline.addTimestampListener(this);
-          break;
-      }
-      this.autoSetTimelineBasedDisabled();
-    }
-  }
-  autoSetTimelineBasedDisabled() {
-    switch (this.timelineCommand) {
-      case "jump-to-start":
-      case "play-pause":
-      case "play-step-backwards":
-      case "play-step":
-      case "jump-to-end": {
-        const timeRange = this.timeline.timeRange();
-        if (timeRange.start === timeRange.end) {
-          this.button.disabled = true;
-          return;
-        }
-        switch (this.timelineCommand) {
-          case "jump-to-start":
-          case "play-step-backwards":
-            this.button.disabled = this.timeline.timestamp < this.timeline.maxTimestamp();
-            break;
-          case "jump-to-end":
-          case "play-step":
-            this.button.disabled = this.timeline.timestamp > this.timeline.minTimestamp();
-            break;
-          default:
-            this.button.disabled = false;
-        }
-        break;
-      }
-    }
-  }
-  setIcon(buttonIconName) {
-    if (this.currentIconName === buttonIconName) {
-      return;
-    }
-    if (this.currentIconName) {
-      this.button.classList.remove(`svg-${this.currentIconName}`);
-    }
-    this.button.classList.add(`svg-${buttonIconName}`);
-    this.currentIconName = buttonIconName;
-  }
-  initialIcon() {
-    const map = {
-      "jump-to-start": "skip-to-start",
-      "play-pause": "play",
-      "play-step": "step-forward",
-      "play-step-backwards": "step-backward",
-      "jump-to-end": "skip-to-end",
-      "fullscreen": "enter-fullscreen",
-      "twizzle-link": "twizzle-tw"
-    };
-    return map[this.timelineCommand];
-  }
-  initialHoverTitle() {
-    const map = {
-      "jump-to-start": "Restart",
-      "play-pause": "Play",
-      "play-step": "Step forward",
-      "play-step-backwards": "Step backward",
-      "jump-to-end": "Skip to End",
-      "fullscreen": "Enter fullscreen",
-      "twizzle-link": "View at Twizzle"
-    };
-    return map[this.timelineCommand];
-  }
-  setHoverTitle(title) {
-    this.button.title = title;
-  }
-  onPress() {
-    switch (this.timelineCommand) {
-      case "fullscreen":
-        if (document.fullscreenElement === this.fullscreenElement) {
-          document.exitFullscreen();
-        } else {
-          this.setIcon("exit-fullscreen");
-          this.fullscreenElement.requestFullscreen().then(() => {
-            const onFullscreen = () => {
-              if (document.fullscreenElement !== this.fullscreenElement) {
-                this.setIcon("enter-fullscreen");
-                window.removeEventListener("fullscreenchange", onFullscreen);
-              }
-            };
-            window.addEventListener("fullscreenchange", onFullscreen);
-          });
-        }
-        break;
-      case "jump-to-start":
-        this.timeline.setTimestamp(0);
-        break;
-      case "jump-to-end":
-        this.timeline.jumpToEnd();
-        break;
-      case "play-pause":
-        this.timeline.playPause();
-        break;
-      case "play-step":
-        this.timeline.experimentalPlay(Direction.Forwards, BoundaryType.Move);
-        break;
-      case "play-step-backwards":
-        this.timeline.experimentalPlay(Direction.Backwards, BoundaryType.Move);
-        break;
-      case "twizzle-link":
-        if (this.visitTwizzleLinkCallback) {
-          this.visitTwizzleLinkCallback();
-        }
-        break;
-    }
-  }
-  onTimelineAction(actionEvent) {
-    switch (this.timelineCommand) {
-      case "jump-to-start":
-        this.button.disabled = actionEvent.locationType === TimestampLocationType.StartOfTimeline && actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-      case "jump-to-end":
-        this.button.disabled = actionEvent.locationType === TimestampLocationType.EndOfTimeline && actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-      case "play-pause":
-        switch (actionEvent.action) {
-          case TimelineAction.Pausing:
-            this.setIcon("play");
-            this.setHoverTitle("Play");
-            break;
-          case TimelineAction.StartingToPlay:
-            this.setIcon("pause");
-            this.setHoverTitle("Pause");
-            break;
-        }
-        break;
-      case "play-step":
-        this.button.disabled = actionEvent.locationType === TimestampLocationType.EndOfTimeline && actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-      case "play-step-backwards":
-        this.button.disabled = actionEvent.locationType === TimestampLocationType.StartOfTimeline && actionEvent.action !== TimelineAction.StartingToPlay;
-        break;
-    }
-  }
-  onTimelineTimestampChange(_timestamp) {
-  }
-  onTimeRangeChange(_timeRange) {
-    this.autoSetTimelineBasedDisabled();
-  }
-};
-customElementsShim.define("twisty-control-button", TwistyControlButton);
-var _viewerLinkClassListManager;
-var TwistyControlButtonPanel = class extends ManagedCustomElement {
-  constructor(timeline, options) {
-    super();
-    __privateAdd(this, _viewerLinkClassListManager, new ClassListManager(this, "viewer-link-", ["none", "twizzle"]));
-    this.addCSS(buttonGridCSS);
-    __privateGet(this, _viewerLinkClassListManager).setValue(options?.viewerLink ?? "none");
-    this.addElement(new TwistyControlButton(timeline, "fullscreen", {
-      fullscreenElement: options?.fullscreenElement
-    }));
-    this.addElement(new TwistyControlButton(timeline, "jump-to-start"));
-    this.addElement(new TwistyControlButton(timeline, "play-step-backwards"));
-    this.addElement(new TwistyControlButton(timeline, "play-pause"));
-    this.addElement(new TwistyControlButton(timeline, "play-step"));
-    this.addElement(new TwistyControlButton(timeline, "jump-to-end"));
-    this.addElement(new TwistyControlButton(timeline, "twizzle-link", {
-      visitTwizzleLinkCallback: options?.viewerLinkCallback
-    })).classList.add("twizzle-link-button");
-  }
-  setViewerLink(viewerLink) {
-    __privateGet(this, _viewerLinkClassListManager).setValue(viewerLink);
-  }
-};
-_viewerLinkClassListManager = new WeakMap();
-customElementsShim.define("twisty-control-button-panel", TwistyControlButtonPanel);
-
-// src/cubing/twisty/old/dom/controls/TwistyScrubber.ts
-var TwistyScrubber = class extends ManagedCustomElement {
-  constructor(timeline) {
-    super();
-    this.range = document.createElement("input");
-    this.timeline = timeline;
-    this.addCSS(twistyScrubberCSS);
-    this.timeline?.addTimestampListener(this);
-    this.range.type = "range";
-    this.range.step = 1 .toString();
-    this.range.min = this.timeline?.minTimestamp().toString();
-    this.range.max = this.timeline?.maxTimestamp().toString();
-    this.range.value = this.timeline?.timestamp.toString();
-    this.range.addEventListener("input", this.onInput.bind(this));
-    this.addElement(this.range);
-  }
-  onTimelineTimestampChange(timestamp) {
-    this.range.value = timestamp.toString();
-  }
-  onTimeRangeChange(timeRange) {
-    this.range.min = timeRange.start.toString();
-    this.range.max = timeRange.end.toString();
-  }
-  onInput() {
-    this.timeline.setTimestamp(parseInt(this.range.value, 10));
-  }
-};
-customElementsShim.define("twisty-scrubber", TwistyScrubber);
-
-// src/cubing/twisty/old/dom/viewers/Twisty2DSVG.ts
-var _cachedPosition2;
-var Twisty2DSVG = class extends ManagedCustomElement {
-  constructor(cursor, def, svgSource, options, puzzleLoader) {
-    super();
-    this.svgSource = svgSource;
-    this.options = options;
-    this.puzzleLoader = puzzleLoader;
-    this.scheduler = new RenderScheduler(this.render.bind(this));
-    __privateAdd(this, _cachedPosition2, null);
-    this.addCSS(twisty2DSVGCSS);
-    this.definition = def;
-    this.resetSVG();
-    cursor?.addPositionListener(this);
-    if (this.options?.experimentalStickering) {
-      this.experimentalSetStickering(this.options.experimentalStickering);
-    }
-  }
-  onPositionChange(position) {
-    if (position.movesInProgress.length > 0) {
-      const move = position.movesInProgress[0].move;
-      const def = this.definition;
-      let partialMove = move;
-      if (position.movesInProgress[0].direction === Direction.Backwards) {
-        partialMove = move.invert();
-      }
-      const newState = combineTransformations(def, position.state, transformationForMove(def, partialMove));
-      this.svg.draw(this.definition, position.state, newState, position.movesInProgress[0].fraction);
-    } else {
-      this.svg.draw(this.definition, position.state);
-      __privateSet(this, _cachedPosition2, position);
-    }
-  }
-  scheduleRender() {
-    this.scheduler.requestAnimFrame();
-  }
-  experimentalSetStickering(stickering) {
-    (async () => {
-      if (!this.puzzleLoader?.appearance) {
-        return;
-      }
-      const appearance = await this.puzzleLoader.appearance(stickering);
-      this.resetSVG(appearance);
-    })();
-  }
-  resetSVG(appearance) {
-    if (this.svg) {
-      this.removeElement(this.svg.element);
-    }
-    if (!this.definition) {
-      return;
-    }
-    this.svg = new KPuzzleSVGWrapper(this.definition, this.svgSource, appearance);
-    this.addElement(this.svg.element);
-    if (__privateGet(this, _cachedPosition2)) {
-      this.onPositionChange(__privateGet(this, _cachedPosition2));
-    }
-  }
-  render() {
-  }
-};
-_cachedPosition2 = new WeakMap();
-customElementsShim.define("twisty-2d-svg", Twisty2DSVG);
-
-// src/cubing/twisty/old/dom/TwistyPlayer.ts
-function is3DVisualization(visualizationFormat) {
-  return ["3D", "PG3D"].includes(visualizationFormat);
-}
-var indexerMap = {
-  simple: SimpleAlgIndexer,
-  tree: TreeAlgIndexer,
-  simultaneous: SimultaneousMoveIndexer
-};
-var _config, _connected, _legacyExperimentalPG3DViewConfig, _experimentalStartStateOverride, _hackyPendingFinalMoveCoalesce, _viewerWrapper, _controlsClassListManager, _experimentalInvalidInitialAlgCallback, _initialized, _setCursorStartState, setCursorStartState_fn, _cursorStartAlg, cursorStartAlg_fn, _orbitControls, orbitControls_fn, _backOrbitControls, backOrbitControls_fn, _lookAt, lookAt_fn, _cursorIndexerName, _indexerConstructor, indexerConstructor_fn, _pendingPuzzleUpdates, _renderMode, _clearRenderMode, clearRenderMode_fn, _setRenderMode2D, setRenderMode2D_fn, _setTwisty2DSVG, setTwisty2DSVG_fn, _setRenderMode3D, setRenderMode3D_fn, _setTwisty3D, setTwisty3D_fn, _setCursor, setCursor_fn, _getPG3DAppearance, getPG3DAppearance_fn, _createBackViewer, createBackViewer_fn, _removeBackViewerElem, removeBackViewerElem_fn, _hackyCoalescePending, hackyCoalescePending_fn;
-var TwistyPlayerV1 = class extends ManagedCustomElement {
-  constructor(initialConfig = {}, legacyExperimentalPG3DViewConfig = null, experimentalInvalidInitialAlgCallback = () => {
-  }) {
-    super();
-    __privateAdd(this, _setCursorStartState);
-    __privateAdd(this, _cursorStartAlg);
-    __privateAdd(this, _orbitControls);
-    __privateAdd(this, _backOrbitControls);
-    __privateAdd(this, _lookAt);
-    __privateAdd(this, _indexerConstructor);
-    __privateAdd(this, _clearRenderMode);
-    __privateAdd(this, _setRenderMode2D);
-    __privateAdd(this, _setTwisty2DSVG);
-    __privateAdd(this, _setRenderMode3D);
-    __privateAdd(this, _setTwisty3D);
-    __privateAdd(this, _setCursor);
-    __privateAdd(this, _getPG3DAppearance);
-    __privateAdd(this, _createBackViewer);
-    __privateAdd(this, _removeBackViewerElem);
-    __privateAdd(this, _hackyCoalescePending);
-    __privateAdd(this, _config, void 0);
-    this.scene = null;
-    this.twisty3D = null;
-    __privateAdd(this, _connected, false);
-    __privateAdd(this, _legacyExperimentalPG3DViewConfig, null);
-    this.legacyExperimentalPG3D = null;
-    __privateAdd(this, _experimentalStartStateOverride, null);
-    this.viewerElems = [];
-    this.controlElems = [];
-    __privateAdd(this, _hackyPendingFinalMoveCoalesce, false);
-    __privateAdd(this, _viewerWrapper, void 0);
-    this.legacyExperimentalCoalesceModFunc = (_move) => 0;
-    __privateAdd(this, _controlsClassListManager, new ClassListManager(this, "controls-", ["none", "bottom-row"]));
-    __privateAdd(this, _experimentalInvalidInitialAlgCallback, void 0);
-    __privateAdd(this, _initialized, false);
-    __privateAdd(this, _cursorIndexerName, "tree");
-    __privateAdd(this, _pendingPuzzleUpdates, []);
-    __privateAdd(this, _renderMode, null);
-    this.addCSS(twistyPlayerCSS);
-    __privateSet(this, _config, new TwistyPlayerConfig(this, initialConfig));
-    __privateSet(this, _experimentalInvalidInitialAlgCallback, experimentalInvalidInitialAlgCallback);
-    this.timeline = new Timeline();
-    this.timeline.addActionListener(this);
-    this.contentWrapper.classList.add("checkered");
-    __privateSet(this, _legacyExperimentalPG3DViewConfig, legacyExperimentalPG3DViewConfig);
-  }
-  set alg(newAlg) {
-    if (typeof newAlg === "string") {
-      newAlg = Alg.fromString(newAlg);
-    }
-    __privateGet(this, _config).attributes["alg"].setValue(newAlg);
-    this.cursor?.setAlg(newAlg, __privateMethod(this, _indexerConstructor, indexerConstructor_fn).call(this));
-    __privateMethod(this, _setCursorStartState, setCursorStartState_fn).call(this);
-    this.dispatchEvent(new CustomEvent("experimental-alg-update", { detail: { alg: this.alg } }));
-  }
-  get alg() {
-    return __privateGet(this, _config).attributes["alg"].value;
-  }
-  set experimentalSetupAlg(newAlg) {
-    if (typeof newAlg === "string") {
-      console.warn("`experimentalSetupAlg` for a `TwistyPlayer` was set using a string. It should be set using a `Sequence`!");
-      newAlg = new Alg(newAlg);
-    }
-    __privateGet(this, _config).attributes["experimental-setup-alg"].setValue(newAlg);
-    __privateMethod(this, _setCursorStartState, setCursorStartState_fn).call(this);
-  }
-  get experimentalSetupAlg() {
-    return __privateGet(this, _config).attributes["experimental-setup-alg"].value;
-  }
-  set experimentalSetupAnchor(setupToLocation) {
-    __privateGet(this, _config).attributes["experimental-setup-anchor"].setValue(setupToLocation);
-    __privateMethod(this, _setCursorStartState, setCursorStartState_fn).call(this);
-  }
-  get experimentalSetupAnchor() {
-    return __privateGet(this, _config).attributes["experimental-setup-anchor"].value;
-  }
-  set puzzle(puzzle) {
-    if (__privateGet(this, _config).attributes["puzzle"].setValue(puzzle)) {
-      this.updatePuzzleDOM();
-    }
-  }
-  get puzzle() {
-    return __privateGet(this, _config).attributes["puzzle"].value;
-  }
-  set visualization(visualization) {
-    if (__privateGet(this, _config).attributes["visualization"].setValue(visualization)) {
-      this.updatePuzzleDOM();
-    }
-  }
-  get visualization() {
-    return __privateGet(this, _config).attributes["visualization"].value;
-  }
-  set hintFacelets(hintFacelets) {
-    if (__privateGet(this, _config).attributes["hint-facelets"].setValue(hintFacelets)) {
-      if (this.twisty3D instanceof Cube3D) {
-        this.twisty3D.experimentalUpdateOptions({ hintFacelets });
-      }
-    }
-  }
-  get hintFacelets() {
-    return __privateGet(this, _config).attributes["hint-facelets"].value;
-  }
-  set experimentalStickering(experimentalStickering) {
-    if (__privateGet(this, _config).attributes["experimental-stickering"].setValue(experimentalStickering)) {
-      const twisty3D = this.twisty3D;
-      if (twisty3D instanceof Cube3D) {
-        twisty3D.experimentalUpdateOptions({
-          experimentalStickering
-        });
-      }
-      if (twisty3D instanceof PG3D) {
-        (async () => {
-          const appearance = await __privateMethod(this, _getPG3DAppearance, getPG3DAppearance_fn).call(this);
-          twisty3D.experimentalSetAppearance(appearance);
-        })();
-      }
-      if (this.viewerElems[0] instanceof Twisty2DSVG) {
-        this.viewerElems[0].experimentalSetStickering(this.experimentalStickering);
-      }
-    }
-  }
-  get experimentalStickering() {
-    return __privateGet(this, _config).attributes["experimental-stickering"].value;
-  }
-  set background(background) {
-    if (__privateGet(this, _config).attributes["background"].setValue(background)) {
-      this.contentWrapper.classList.toggle("checkered", background === "checkered");
-    }
-  }
-  get background() {
-    return __privateGet(this, _config).attributes["background"].value;
-  }
-  set controlPanel(controlPanel) {
-    __privateGet(this, _config).attributes["control-panel"].setValue(controlPanel);
-    __privateGet(this, _controlsClassListManager).setValue(controlPanel);
-  }
-  get controlPanel() {
-    return __privateGet(this, _config).attributes["control-panel"].value;
-  }
-  set controls(controls) {
-    this.controlPanel = controls;
-  }
-  get controls() {
-    return this.controlPanel;
-  }
-  set backView(backView) {
-    __privateGet(this, _config).attributes["back-view"].setValue(backView);
-    if (backView !== "none" && this.viewerElems.length === 1) {
-      __privateMethod(this, _createBackViewer, createBackViewer_fn).call(this);
-    }
-    if (backView === "none" && this.viewerElems.length > 1) {
-      __privateMethod(this, _removeBackViewerElem, removeBackViewerElem_fn).call(this);
-    }
-    if (__privateGet(this, _viewerWrapper) && __privateGet(this, _viewerWrapper).setBackView(backView)) {
-      for (const viewer of this.viewerElems) {
-        viewer.makeInvisibleUntilRender();
-      }
-    }
-  }
-  get backView() {
-    return __privateGet(this, _config).attributes["back-view"].value;
-  }
-  set experimentalCameraLatitude(latitude) {
-    __privateGet(this, _config).attributes["experimental-camera-latitude"].setValue(latitude);
-    const orbitControls = __privateMethod(this, _orbitControls, orbitControls_fn).call(this);
-    if (orbitControls && latitude !== null) {
-      orbitControls.latitude = latitude;
-      this.viewerElems[0].scheduleRender();
-      this.viewerElems[1]?.scheduleRender();
-    }
-  }
-  get experimentalCameraLatitude() {
-    if (__privateGet(this, _config).attributes["experimental-camera-latitude"].value !== null) {
-      return __privateGet(this, _config).attributes["experimental-camera-latitude"].value;
-    }
-    return __privateMethod(this, _orbitControls, orbitControls_fn).call(this)?.latitude ?? null;
-  }
-  set experimentalCameraLongitude(longitude) {
-    __privateGet(this, _config).attributes["experimental-camera-longitude"].setValue(longitude);
-    const orbitControls = __privateMethod(this, _orbitControls, orbitControls_fn).call(this);
-    if (orbitControls && longitude !== null) {
-      orbitControls.longitude = longitude;
-      this.viewerElems[0].scheduleRender();
-      this.viewerElems[1]?.scheduleRender();
-    }
-  }
-  get experimentalCameraLongitude() {
-    if (__privateGet(this, _config).attributes["experimental-camera-longitude"].value !== null) {
-      return __privateGet(this, _config).attributes["experimental-camera-longitude"].value;
-    }
-    return __privateMethod(this, _orbitControls, orbitControls_fn).call(this)?.longitude ?? null;
-  }
-  set experimentalCameraLatitudeLimits(latitudeLimits) {
-    __privateGet(this, _config).attributes["experimental-camera-latitude-limits"].setValue(latitudeLimits);
-    const orbitControls = __privateMethod(this, _orbitControls, orbitControls_fn).call(this);
-    console.log({ orbitControls });
-    if (orbitControls) {
-      orbitControls.experimentalLatitudeLimits = latitudeLimits;
-    }
-    const backOrbitControls = __privateMethod(this, _backOrbitControls, backOrbitControls_fn).call(this);
-    if (backOrbitControls) {
-      backOrbitControls.experimentalLatitudeLimits = latitudeLimits;
-    }
-  }
-  get experimentalCameraLatitudeLimits() {
-    return __privateGet(this, _config).attributes["experimental-camera-latitude-limits"].value;
-  }
-  set viewerLink(viewerLinkPage) {
-    __privateGet(this, _config).attributes["viewer-link"].setValue(viewerLinkPage);
-    const maybePanel = this.controlElems[1];
-    if (maybePanel?.setViewerLink) {
-      maybePanel.setViewerLink(viewerLinkPage);
-    }
-  }
-  get viewerLink() {
-    return __privateGet(this, _config).attributes["viewer-link"].value;
-  }
-  experimentalSetCameraOrbitCoordinates(coords) {
-    this.experimentalCameraLatitude = coords.latitude;
-    this.experimentalCameraLongitude = coords.longitude;
-    const orbitControls = __privateMethod(this, _orbitControls, orbitControls_fn).call(this);
-    if (orbitControls) {
-      orbitControls.distance = coords.distance;
-    }
-  }
-  experimentalDerivedCameraOrbitCoordinates() {
-    const defaultCoordinatesForPuzzle = defaultCameraOrbitCoordinates(this.puzzle, this.twisty3D instanceof PG3D ? "PG3D" : "Cube3D");
-    return {
-      latitude: this.experimentalCameraLatitude ?? defaultCoordinatesForPuzzle.latitude,
-      longitude: this.experimentalCameraLongitude ?? defaultCoordinatesForPuzzle.longitude,
-      distance: defaultCoordinatesForPuzzle.distance
-    };
-  }
-  static get observedAttributes() {
-    return TwistyPlayerConfig.observedAttributes;
-  }
-  attributeChangedCallback(attributeName, oldValue, newValue) {
-    __privateGet(this, _config).attributeChangedCallback(attributeName, oldValue, newValue);
-  }
-  experimentalSetStartStateOverride(state) {
-    __privateSet(this, _experimentalStartStateOverride, state);
-    __privateMethod(this, _setCursorStartState, setCursorStartState_fn).call(this);
-  }
-  experimentalSetCursorIndexer(cursorName) {
-    if (__privateGet(this, _cursorIndexerName) === cursorName) {
-      return;
-    }
-    __privateSet(this, _cursorIndexerName, cursorName);
-    this.cursor?.experimentalSetIndexer(__privateMethod(this, _indexerConstructor, indexerConstructor_fn).call(this));
-  }
-  connectedCallback() {
-    this.contentWrapper.classList.toggle("checkered", this.background === "checkered");
-    const setBackView = this.backView && is3DVisualization(this.visualization);
-    const backView = setBackView ? this.backView : "none";
-    __privateSet(this, _viewerWrapper, new TwistyViewerWrapper({
-      backView
-    }));
-    this.addElement(__privateGet(this, _viewerWrapper));
-    const scrubber = new TwistyScrubber(this.timeline);
-    const controlButtonGrid = new TwistyControlButtonPanel(this.timeline, {
-      fullscreenElement: this,
-      viewerLinkCallback: this.visitTwizzleLink.bind(this),
-      viewerLink: this.viewerLink
-    });
-    this.controlElems = [scrubber, controlButtonGrid];
-    __privateGet(this, _controlsClassListManager).setValue(this.controlPanel);
-    this.addElement(this.controlElems[0]);
-    this.addElement(this.controlElems[1]);
-    __privateSet(this, _connected, true);
-    this.updatePuzzleDOM(true).then(() => {
-      if (!__privateGet(this, _initialized)) {
-        __privateSet(this, _initialized, true);
-        this.dispatchEvent(new CustomEvent("initialized"));
-      }
-    });
-  }
-  get initialized() {
-    return __privateGet(this, _initialized);
-  }
-  twizzleLink() {
-    const url = new URL("https://alpha.twizzle.net/edit/");
-    if (!this.alg.experimentalIsEmpty()) {
-      url.searchParams.set("alg", this.alg.toString());
-    }
-    if (!this.experimentalSetupAlg.experimentalIsEmpty()) {
-      url.searchParams.set("experimental-setup-alg", this.experimentalSetupAlg.toString());
-    }
-    if (this.experimentalSetupAnchor !== "start") {
-      url.searchParams.set("experimental-setup-anchor", this.experimentalSetupAnchor);
-    }
-    if (this.experimentalStickering !== "full") {
-      url.searchParams.set("experimental-stickering", this.experimentalStickering);
-    }
-    if (this.puzzle !== "3x3x3") {
-      url.searchParams.set("puzzle", this.puzzle);
-    }
-    return url.toString();
-  }
-  visitTwizzleLink() {
-    const a = document.createElement("a");
-    a.href = this.twizzleLink();
-    a.target = "_blank";
-    a.click();
-  }
-  async updatePuzzleDOM(initial = false) {
-    if (!__privateGet(this, _connected)) {
-      return;
-    }
-    let puzzleLoader;
-    if (this.puzzle === "custom") {
-      puzzleLoader = {
-        id: "custom",
-        fullName: "Custom (PG3D)",
-        def: () => Promise.resolve(__privateGet(this, _legacyExperimentalPG3DViewConfig).def),
-        svg: () => {
-          throw "unimplemented";
-        }
-      };
-    } else {
-      puzzleLoader = puzzles[this.puzzle];
-    }
-    for (const pendingPuzzleUpdate2 of __privateGet(this, _pendingPuzzleUpdates)) {
-      pendingPuzzleUpdate2.cancelled = true;
-    }
-    __privateSet(this, _pendingPuzzleUpdates, []);
-    const pendingPuzzleUpdate = { cancelled: false };
-    __privateGet(this, _pendingPuzzleUpdates).push(pendingPuzzleUpdate);
-    const def = await puzzleLoader.def();
-    if (pendingPuzzleUpdate.cancelled) {
-      return;
-    }
-    let cursor;
-    try {
-      cursor = new AlgCursor(this.timeline, def, this.alg, __privateMethod(this, _cursorStartAlg, cursorStartAlg_fn).call(this), __privateMethod(this, _indexerConstructor, indexerConstructor_fn).call(this));
-      __privateMethod(this, _setCursor, setCursor_fn).call(this, cursor);
-    } catch (e) {
-      if (initial) {
-        __privateGet(this, _experimentalInvalidInitialAlgCallback).call(this, this.alg);
-      }
-      cursor = new AlgCursor(this.timeline, def, new Alg(), new Alg(), __privateMethod(this, _indexerConstructor, indexerConstructor_fn).call(this));
-      __privateMethod(this, _setCursor, setCursor_fn).call(this, cursor);
-    }
-    if (initial && this.experimentalSetupAlg.experimentalIsEmpty() && this.experimentalSetupAnchor !== "end") {
-      this.timeline.jumpToEnd();
-    }
-    switch (this.visualization) {
-      case "2D":
-      case "experimental-2D-LL":
-        {
-          const options = {};
-          if (this.experimentalStickering) {
-            options.experimentalStickering = this.experimentalStickering;
-          }
-          __privateMethod(this, _setRenderMode2D, setRenderMode2D_fn).call(this);
-          const svgPromiseFn = this.visualization === "2D" ? puzzleLoader.svg : puzzleLoader.llSVG ?? puzzleLoader.svg;
-          const mainViewer = new Twisty2DSVG(cursor, def, await svgPromiseFn(), options, puzzleLoader);
-          if (!pendingPuzzleUpdate.cancelled) {
-            __privateMethod(this, _setTwisty2DSVG, setTwisty2DSVG_fn).call(this, mainViewer);
-          }
-        }
-        break;
-      case "3D":
-      case "PG3D":
-        {
-          __privateMethod(this, _setRenderMode3D, setRenderMode3D_fn).call(this);
-          const scene = this.scene;
-          let twisty3D;
-          if (this.visualization === "3D" && this.puzzle === "3x3x3") {
-            twisty3D = new Cube3D(def, cursor, scene.scheduleRender.bind(scene), {
-              hintFacelets: this.hintFacelets,
-              experimentalStickering: this.experimentalStickering
-            });
-          } else {
-            let def2;
-            let stickerDat;
-            const pgGetter = puzzleLoader.pg;
-            if (this.puzzle === "custom") {
-              def2 = __privateGet(this, _legacyExperimentalPG3DViewConfig).def;
-              stickerDat = __privateGet(this, _legacyExperimentalPG3DViewConfig).stickerDat;
-            } else if (pgGetter) {
-              const pg = await pgGetter();
-              if (pendingPuzzleUpdate.cancelled) {
-                return;
-              }
-              def2 = pg.writekpuzzle(true);
-              stickerDat = pg.get3d();
-            } else {
-              throw "Unimplemented!";
-            }
-            const options = {};
-            const heightMap = {
-              megaminx: 1.5,
-              pyraminx: 1.75
-            };
-            const hintStickerHeightScale = __privateGet(this, _legacyExperimentalPG3DViewConfig)?.hintStickerHeightScale ?? heightMap[this.puzzle] ?? 1;
-            const pg3d = new PG3D(cursor, scene.scheduleRender.bind(scene), def2, stickerDat, __privateGet(this, _legacyExperimentalPG3DViewConfig)?.showFoundation ?? true, __privateGet(this, _legacyExperimentalPG3DViewConfig)?.hintStickers ?? this.hintFacelets === "floating", hintStickerHeightScale, options);
-            (async () => {
-              const appearance = await __privateMethod(this, _getPG3DAppearance, getPG3DAppearance_fn).call(this);
-              if (appearance) {
-                pg3d.experimentalSetAppearance(appearance);
-              }
-            })();
-            this.legacyExperimentalPG3D = pg3d;
-            twisty3D = pg3d;
-          }
-          __privateMethod(this, _setTwisty3D, setTwisty3D_fn).call(this, twisty3D);
-        }
-        break;
-    }
-  }
-  async setCustomPuzzleGeometry(legacyExperimentalPG3DViewConfig) {
-    this.puzzle = "custom";
-    __privateSet(this, _legacyExperimentalPG3DViewConfig, legacyExperimentalPG3DViewConfig);
-    await this.updatePuzzleDOM();
-  }
-  experimentalAddMove(move, coalesce = false, coalesceDelayed = false) {
-    if (__privateGet(this, _hackyPendingFinalMoveCoalesce)) {
-      __privateMethod(this, _hackyCoalescePending, hackyCoalescePending_fn).call(this);
-    }
-    const oldNumMoves = countMoves(this.alg);
-    const newAlg = experimentalAppendMove(this.alg, move, {
-      coalesce: coalesce && !coalesceDelayed,
-      mod: this.legacyExperimentalCoalesceModFunc(move)
-    });
-    if (coalesce && coalesceDelayed) {
-      __privateSet(this, _hackyPendingFinalMoveCoalesce, true);
-    }
-    this.alg = newAlg;
-    if (oldNumMoves <= countMoves(newAlg)) {
-      this.timeline.experimentalJumpToLastMove();
-    } else {
-      this.timeline.jumpToEnd();
-    }
-    this.timeline.play();
-  }
-  onTimelineAction(actionEvent) {
-    if (actionEvent.action === TimelineAction.Pausing && actionEvent.locationType === TimestampLocationType.EndOfTimeline && __privateGet(this, _hackyPendingFinalMoveCoalesce)) {
-      __privateMethod(this, _hackyCoalescePending, hackyCoalescePending_fn).call(this);
-      this.timeline.jumpToEnd();
-    }
-  }
-  fullscreen() {
-    this.requestFullscreen();
-  }
-};
-_config = new WeakMap();
-_connected = new WeakMap();
-_legacyExperimentalPG3DViewConfig = new WeakMap();
-_experimentalStartStateOverride = new WeakMap();
-_hackyPendingFinalMoveCoalesce = new WeakMap();
-_viewerWrapper = new WeakMap();
-_controlsClassListManager = new WeakMap();
-_experimentalInvalidInitialAlgCallback = new WeakMap();
-_initialized = new WeakMap();
-_setCursorStartState = new WeakSet();
-setCursorStartState_fn = function() {
-  if (this.cursor) {
-    this.cursor.setStartState(__privateGet(this, _experimentalStartStateOverride) ?? this.cursor.algToState(__privateMethod(this, _cursorStartAlg, cursorStartAlg_fn).call(this)));
-  }
-};
-_cursorStartAlg = new WeakSet();
-cursorStartAlg_fn = function() {
-  let startAlg = this.experimentalSetupAlg;
-  if (this.experimentalSetupAnchor === "end") {
-    startAlg = startAlg.concat(this.alg.invert());
-  }
-  return startAlg;
-};
-_orbitControls = new WeakSet();
-orbitControls_fn = function() {
-  if (!["3D", "PG3D"].includes(__privateGet(this, _config).attributes["visualization"].value)) {
-    return null;
-  }
-  return this.viewerElems[0]?.orbitControls ?? null;
-};
-_backOrbitControls = new WeakSet();
-backOrbitControls_fn = function() {
-  if (!["3D", "PG3D"].includes(__privateGet(this, _config).attributes["visualization"].value)) {
-    return null;
-  }
-  return this.viewerElems[1]?.orbitControls ?? null;
-};
-_lookAt = new WeakSet();
-lookAt_fn = function() {
-  switch (this.puzzle) {
-    case "pyraminx":
-    case "master_tetraminx":
-      return pyraminxLookAt;
-    default:
-      return new Vector32(0, 0, 0);
-  }
-};
-_cursorIndexerName = new WeakMap();
-_indexerConstructor = new WeakSet();
-indexerConstructor_fn = function() {
-  return indexerMap[__privateGet(this, _cursorIndexerName)];
-};
-_pendingPuzzleUpdates = new WeakMap();
-_renderMode = new WeakMap();
-_clearRenderMode = new WeakSet();
-clearRenderMode_fn = function() {
-  switch (__privateGet(this, _renderMode)) {
-    case "3D":
-      this.scene = null;
-      this.twisty3D = null;
-      this.legacyExperimentalPG3D = null;
-      this.viewerElems = [];
-      __privateGet(this, _viewerWrapper).clear();
-      break;
-    case "2D":
-      this.viewerElems = [];
-      __privateGet(this, _viewerWrapper).clear();
-      break;
-  }
-  __privateSet(this, _renderMode, null);
-};
-_setRenderMode2D = new WeakSet();
-setRenderMode2D_fn = function() {
-  if (__privateGet(this, _renderMode) === "2D") {
-    return;
-  }
-  __privateMethod(this, _clearRenderMode, clearRenderMode_fn).call(this);
-  __privateSet(this, _renderMode, "2D");
-};
-_setTwisty2DSVG = new WeakSet();
-setTwisty2DSVG_fn = function(twisty2DSVG) {
-  __privateMethod(this, _setRenderMode2D, setRenderMode2D_fn).call(this);
-  __privateGet(this, _viewerWrapper).clear();
-  __privateGet(this, _viewerWrapper).addElement(twisty2DSVG);
-  this.viewerElems.push(twisty2DSVG);
-};
-_setRenderMode3D = new WeakSet();
-setRenderMode3D_fn = function() {
-  if (__privateGet(this, _renderMode) === "3D") {
-    return;
-  }
-  __privateMethod(this, _clearRenderMode, clearRenderMode_fn).call(this);
-  this.scene = new Twisty3DScene();
-  const mainViewer = new Twisty3DCanvas(this.scene, {
-    orbitCoordinates: this.experimentalDerivedCameraOrbitCoordinates()
-  });
-  mainViewer.orbitControls.experimentalLatitudeLimits = this.experimentalCameraLatitudeLimits;
-  this.viewerElems.push(mainViewer);
-  __privateGet(this, _viewerWrapper).addElement(mainViewer);
-  if (this.backView !== "none") {
-    __privateMethod(this, _createBackViewer, createBackViewer_fn).call(this);
-  }
-  __privateSet(this, _renderMode, "3D");
-};
-_setTwisty3D = new WeakSet();
-setTwisty3D_fn = function(twisty3D) {
-  if (this.twisty3D) {
-    this.scene.removeTwisty3DPuzzle(this.twisty3D);
-    if (this.twisty3D instanceof PG3D) {
-      this.twisty3D.dispose();
-    }
-    this.twisty3D = null;
-  }
-  this.twisty3D = twisty3D;
-  this.scene.addTwisty3DPuzzle(twisty3D);
-  const orbitControls = __privateMethod(this, _orbitControls, orbitControls_fn).call(this);
-  if (orbitControls) {
-    orbitControls.lookAt(__privateMethod(this, _lookAt, lookAt_fn).call(this));
-  }
-};
-_setCursor = new WeakSet();
-setCursor_fn = function(cursor) {
-  const oldCursor = this.cursor;
-  this.cursor = cursor;
-  try {
-    this.cursor.setAlg(this.alg, __privateMethod(this, _indexerConstructor, indexerConstructor_fn).call(this));
-    __privateMethod(this, _setCursorStartState, setCursorStartState_fn).call(this);
-  } catch (e) {
-    this.cursor.setAlg(new Alg(), __privateMethod(this, _indexerConstructor, indexerConstructor_fn).call(this));
-    this.cursor.setStartState(this.cursor.algToState(new Alg()));
-    __privateGet(this, _experimentalInvalidInitialAlgCallback).call(this, this.alg);
-  }
-  __privateMethod(this, _setCursorStartState, setCursorStartState_fn).call(this);
-  this.timeline.addCursor(cursor);
-  if (oldCursor) {
-    this.timeline.removeCursor(oldCursor);
-    this.timeline.removeTimestampListener(oldCursor);
-  }
-  this.experimentalSetCursorIndexer(__privateGet(this, _cursorIndexerName));
-};
-_getPG3DAppearance = new WeakSet();
-getPG3DAppearance_fn = async function() {
-  const puzzleLoader = puzzles[this.puzzle];
-  if (puzzleLoader?.appearance) {
-    return puzzleLoader.appearance(this.experimentalStickering ?? "full");
-  }
-  return null;
-};
-_createBackViewer = new WeakSet();
-createBackViewer_fn = function() {
-  if (!is3DVisualization(this.visualization)) {
-    throw new Error("Back viewer requires a 3D visualization");
-  }
-  const backViewer = new Twisty3DCanvas(this.scene, {
-    orbitCoordinates: this.experimentalDerivedCameraOrbitCoordinates(),
-    negateCameraPosition: true
-  });
-  backViewer.orbitControls.experimentalLatitudeLimits = this.experimentalCameraLatitudeLimits;
-  this.viewerElems.push(backViewer);
-  this.viewerElems[0].setMirror(backViewer);
-  __privateGet(this, _viewerWrapper).addElement(backViewer);
-};
-_removeBackViewerElem = new WeakSet();
-removeBackViewerElem_fn = function() {
-  if (this.viewerElems.length !== 2) {
-    throw new Error("Tried to remove non-existent back view!");
-  }
-  __privateGet(this, _viewerWrapper).removeElement(this.viewerElems.pop());
-};
-_hackyCoalescePending = new WeakSet();
-hackyCoalescePending_fn = function() {
-  const units = Array.from(this.alg.units());
-  const length = units.length;
-  const pending = __privateGet(this, _hackyPendingFinalMoveCoalesce);
-  __privateSet(this, _hackyPendingFinalMoveCoalesce, false);
-  if (pending && length > 1 && units[length - 1].is(Move)) {
-    const finalMove = units[length - 1];
-    const newAlg = experimentalAppendMove(new Alg(units.slice(0, length - 1)), finalMove, {
-      coalesce: true,
-      mod: this.legacyExperimentalCoalesceModFunc(finalMove)
-    });
-    this.alg = newAlg;
-  }
-};
-customElementsShim.define("twisty-player-v1", TwistyPlayerV1);
-
-// src/cubing/twisty/old/dom/TwistyAlgViewerV1.css.ts
-var twistyAlgViewerCSS2 = new CSSSource(`
-:host {
-  display: inline-grid;
-}
-
-a:not(:hover) {
-  color: inherit;
-  text-decoration: none;
-}
-
-twisty-alg-leaf-elem.twisty-alg-comment {
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.wrapper.current-move {
-  background: rgba(66, 133, 244, 0.3);
-  margin-left: -0.1em;
-  margin-right: -0.1em;
-  padding-left: 0.1em;
-  padding-right: 0.1em;
-  border-radius: 0.1em;
-}
-`);
-
-// src/cubing/twisty/old/dom/TwistyAlgViewerV1.ts
-var DEFAULT_OFFSET_MS2 = 250;
-var TwistyAlgLeafElemV1 = class extends ManagedCustomElement {
-  constructor(className, text, dataDown, algOrUnit, offsetIntoMove, clickable) {
-    super({ mode: "open" });
-    this.algOrUnit = algOrUnit;
-    this.classList.add(className);
-    this.addCSS(twistyAlgViewerCSS2);
-    if (clickable) {
-      const anchor = this.contentWrapper.appendChild(document.createElement("a"));
-      anchor.href = "#";
-      anchor.textContent = text;
-      anchor.addEventListener("click", (e) => {
-        e.preventDefault();
-        dataDown.twistyAlgViewer.jumpToIndex(dataDown.earliestMoveIndex, offsetIntoMove);
-      });
-    } else {
-      this.contentWrapper.appendChild(document.createElement("span")).textContent = text;
-    }
-  }
-  pathToIndex(_index) {
-    return [];
-  }
-  setCurrentMove(current) {
-    this.contentWrapper.classList.toggle("current-move", current);
-  }
-};
-customElementsShim.define("twisty-alg-leaf-elem-v1", TwistyAlgLeafElemV1);
-var TwistyAlgWrapperElemV1 = class extends HTMLElementShim {
-  constructor(className, algOrUnit) {
-    super();
-    this.algOrUnit = algOrUnit;
-    this.queue = [];
-    this.classList.add(className);
-  }
-  addString(str) {
-    this.queue.push(document.createTextNode(str));
-  }
-  addElem(dataUp) {
-    this.queue.push(dataUp.element);
-    return dataUp.moveCount;
-  }
-  flushQueue(direction = IterationDirection.Forwards) {
-    for (const node of maybeReverseList2(this.queue, direction)) {
-      this.append(node);
-    }
-    this.queue = [];
-  }
-  pathToIndex(_index) {
-    return [];
-  }
-};
-customElementsShim.define("twisty-alg-wrapper-elem-v1", TwistyAlgWrapperElemV1);
-function oppositeDirection2(direction) {
-  return direction === IterationDirection.Forwards ? IterationDirection.Backwards : IterationDirection.Forwards;
-}
-function updateDirectionByAmount2(currentDirection, amount) {
-  return amount < 0 ? oppositeDirection2(currentDirection) : currentDirection;
-}
-function maybeReverseList2(l, direction) {
-  if (direction === IterationDirection.Forwards) {
-    return l;
-  }
-  const copy = Array.from(l);
-  copy.reverse();
-  return copy;
-}
-var AlgToDOMTree2 = class extends TraversalDownUp {
-  traverseAlg(alg, dataDown) {
-    let moveCount = 0;
-    const element = new TwistyAlgWrapperElemV1("twisty-alg-alg", alg);
-    let first = true;
-    for (const unit of direct(alg.units(), dataDown.direction)) {
-      if (!first) {
-        element.addString(" ");
-      }
-      first = false;
-      moveCount += element.addElem(this.traverseUnit(unit, {
-        earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
-        twistyAlgViewer: dataDown.twistyAlgViewer,
-        direction: dataDown.direction
-      }));
-    }
-    element.flushQueue(dataDown.direction);
-    return {
-      moveCount,
-      element
-    };
-  }
-  traverseGrouping(grouping, dataDown) {
-    const square1Tuple = grouping.experimentalAsSquare1Tuple();
-    const direction = updateDirectionByAmount2(dataDown.direction, grouping.amount);
-    let moveCount = 0;
-    const element = new TwistyAlgWrapperElemV1("twisty-alg-grouping", grouping);
-    element.addString("(");
-    if (square1Tuple) {
-      moveCount += element.addElem({
-        moveCount: 1,
-        element: new TwistyAlgLeafElemV1("twisty-alg-move", square1Tuple[0].amount.toString(), dataDown, square1Tuple[0], true, true)
-      });
-      element.addString(", ");
-      moveCount += element.addElem({
-        moveCount: 1,
-        element: new TwistyAlgLeafElemV1("twisty-alg-move", square1Tuple[1].amount.toString(), dataDown, square1Tuple[1], true, true)
-      });
-    } else {
-      moveCount += element.addElem(this.traverseAlg(grouping.alg, {
-        earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
-        twistyAlgViewer: dataDown.twistyAlgViewer,
-        direction
-      }));
-    }
-    element.addString(")" + grouping.experimentalRepetitionSuffix);
-    element.flushQueue();
-    return {
-      moveCount: moveCount * Math.abs(grouping.amount),
-      element
-    };
-  }
-  traverseMove(move, dataDown) {
-    const element = new TwistyAlgLeafElemV1("twisty-alg-move", move.toString(), dataDown, move, true, true);
-    dataDown.twistyAlgViewer.highlighter.addMove(move.startCharIndex, element);
-    return {
-      moveCount: 1,
-      element
-    };
-  }
-  traverseCommutator(commutator, dataDown) {
-    let moveCount = 0;
-    const element = new TwistyAlgWrapperElemV1("twisty-alg-commutator", commutator);
-    element.addString("[");
-    element.flushQueue();
-    const [first, second] = maybeReverseList2([commutator.A, commutator.B], dataDown.direction);
-    moveCount += element.addElem(this.traverseAlg(first, {
-      earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
-      twistyAlgViewer: dataDown.twistyAlgViewer,
-      direction: dataDown.direction
-    }));
-    element.addString(", ");
-    moveCount += element.addElem(this.traverseAlg(second, {
-      earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
-      twistyAlgViewer: dataDown.twistyAlgViewer,
-      direction: dataDown.direction
-    }));
-    element.flushQueue(dataDown.direction);
-    element.addString("]");
-    element.flushQueue();
-    return {
-      moveCount: moveCount * 2,
-      element
-    };
-  }
-  traverseConjugate(conjugate, dataDown) {
-    let moveCount = 0;
-    const element = new TwistyAlgWrapperElemV1("twisty-alg-conjugate", conjugate);
-    element.addString("[");
-    const aLen = element.addElem(this.traverseAlg(conjugate.A, {
-      earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
-      twistyAlgViewer: dataDown.twistyAlgViewer,
-      direction: dataDown.direction
-    }));
-    moveCount += aLen;
-    element.addString(": ");
-    moveCount += element.addElem(this.traverseAlg(conjugate.B, {
-      earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
-      twistyAlgViewer: dataDown.twistyAlgViewer,
-      direction: dataDown.direction
-    }));
-    element.addString("]");
-    element.flushQueue();
-    return {
-      moveCount: moveCount + aLen,
-      element
-    };
-  }
-  traversePause(pause, dataDown) {
-    return {
-      moveCount: 1,
-      element: new TwistyAlgLeafElemV1("twisty-alg-pause", ".", dataDown, pause, true, true)
-    };
-  }
-  traverseNewline(newline, _dataDown) {
-    const element = new TwistyAlgWrapperElemV1("twisty-alg-newline", newline);
-    element.append(document.createElement("br"));
-    return {
-      moveCount: 0,
-      element
-    };
-  }
-  traverseLineComment(lineComment, dataDown) {
-    return {
-      moveCount: 0,
-      element: new TwistyAlgLeafElemV1("twisty-alg-line-comment", `//${lineComment.text}`, dataDown, lineComment, false, false)
-    };
-  }
-};
-var algToDOMTreeInstance2 = new AlgToDOMTree2();
-var algToDOMTree2 = algToDOMTreeInstance2.traverseAlg.bind(algToDOMTreeInstance2);
-var MoveHighlighter2 = class {
-  constructor() {
-    this.moveCharIndexMap = new Map();
-    this.currentElem = null;
-  }
-  addMove(charIndex, elem) {
-    this.moveCharIndexMap.set(charIndex, elem);
-  }
-  set(move) {
-    const newElem = move ? this.moveCharIndexMap.get(move.startCharIndex) ?? null : null;
-    if (this.currentElem === newElem) {
-      return;
-    }
-    this.currentElem?.classList.remove("twisty-alg-current-move");
-    this.currentElem?.setCurrentMove(false);
-    newElem?.classList.add("twisty-alg-current-move");
-    newElem?.setCurrentMove(true);
-    this.currentElem = newElem;
-  }
-};
-var _domTree2;
-var TwistyAlgViewerV1 = class extends HTMLElementShim {
-  constructor(options) {
-    super();
-    this.highlighter = new MoveHighlighter2();
-    __privateAdd(this, _domTree2, void 0);
-    this.twistyPlayer = null;
-    this.lastClickTimestamp = null;
-    if (options?.twistyPlayer) {
-      this.setTwistyPlayer(options?.twistyPlayer);
-    }
-  }
-  connectedCallback() {
-  }
-  setAlg(alg) {
-    __privateSet(this, _domTree2, algToDOMTree2(alg, {
-      earliestMoveIndex: 0,
-      twistyAlgViewer: this,
-      direction: IterationDirection.Forwards
-    }).element);
-    this.textContent = "";
-    this.appendChild(__privateGet(this, _domTree2));
-  }
-  setTwistyPlayer(twistyPlayer) {
-    if (this.twistyPlayer) {
-      console.warn("twisty-player reassignment is not supported");
-      return;
-    }
-    this.twistyPlayer = twistyPlayer;
-    this.twistyPlayer.addEventListener("experimental-alg-update", (e) => {
-      this.setAlg(e.detail.alg);
-    });
-    const sourceAlg = this.twistyPlayer.alg;
-    const parsedAlg = "charIndex" in sourceAlg ? sourceAlg : Alg.fromString(sourceAlg.toString());
-    this.setAlg(parsedAlg);
-    (async () => {
-      const wrapper = new KPuzzleWrapper(await puzzles[twistyPlayer.puzzle].def());
-      const indexer = new TreeAlgIndexer(wrapper, parsedAlg);
-      twistyPlayer.timeline.addTimestampListener({
-        onTimelineTimestampChange: (timestamp) => {
-          this.highlighter.set(indexer.getAnimLeaf(indexer.timestampToIndex(timestamp)));
-        },
-        onTimeRangeChange(_timeRange) {
-        }
-      });
-    })();
-    twistyPlayer.timeline.addTimestampListener({
-      onTimelineTimestampChange: (timestamp) => {
-        if (timestamp !== this.lastClickTimestamp) {
-          this.lastClickTimestamp = null;
-        }
-        const index = this.twistyPlayer?.cursor?.experimentalIndexFromTimestamp(timestamp) ?? null;
-        if (index !== null) {
-        }
-      },
-      onTimeRangeChange: (_timeRange) => {
-      }
-    });
-  }
-  jumpToIndex(index, offsetIntoMove) {
-    if (this.twistyPlayer && this.twistyPlayer.cursor) {
-      const offset = offsetIntoMove ? DEFAULT_OFFSET_MS2 : 0;
-      const timestamp = (this.twistyPlayer.cursor.experimentalTimestampFromIndex(index) ?? -offset) + offset;
-      this.twistyPlayer?.timeline.setTimestamp(timestamp);
-      if (this.lastClickTimestamp === timestamp) {
-        this.twistyPlayer.timeline.play();
-        this.lastClickTimestamp = null;
-      } else {
-        this.lastClickTimestamp = timestamp;
-      }
-    }
-  }
-  attributeChangedCallback(attributeName, _oldValue, newValue) {
-    if (attributeName === "for") {
-      const elem = document.getElementById(newValue);
-      if (!elem) {
-        console.warn("for= elem does not exist");
-        return;
-      }
-      if (!(elem instanceof TwistyPlayerV1)) {
-        console.warn("for= elem is not a twisty-player");
-        return;
-      }
-      this.setTwistyPlayer(elem);
-    }
-  }
-  static get observedAttributes() {
-    return ["for"];
-  }
-};
-_domTree2 = new WeakMap();
-customElementsShim.define("twisty-alg-viewer-v1", TwistyAlgViewerV1);
 export {
   Cube3D,
   NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE,
   KPuzzleWrapper as KSolvePuzzle,
   PG3D,
   SimpleAlgIndexer,
-  TimestampLocationType,
   TreeAlgIndexer,
-  Twisty3DCanvas,
   TwistyAlgEditor,
   TwistyAlgViewer,
-  TwistyAlgViewerV1,
   TwistyPlayer,
-  TwistyPlayerV1,
-  experimentalSetShareAllNewRenderers,
-  experimentalShowRenderStats
+  backViewLayouts,
+  debugShowRenderStats as experimentalDebugShowRenderStats,
+  experimentalForceNewRendererSharing
 };
 //# sourceMappingURL=index.js.map