cubing 0.25.4 → 0.25.8

package/dist/esm/twisty/index.js

@@ -10,53 +10,41 @@ import {
   TwistyPropDerived,
   TwistyPropSource,
   proxy3D
-} from "../chunk-4VNM5SER.js";
+} from "../chunk-Q7QSEHWH.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-U2TSTTDG.js";
+} from "../chunk-NSLR2SC4.js";
 import {
   cube3x3x3,
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-V5K5JN2N.js";
-import "../chunk-Y32HHZUY.js";
+} from "../chunk-YCLG3ZLR.js";
+import "../chunk-YAOUFM4D.js";
 import {
   Alg,
   AlgBuilder,
   Conjugate,
   Grouping,
-  IterationDirection,
   Move,
   TraversalDownUp,
   TraversalUp,
   direct,
   directedGenerator,
   experimentalAppendMove
-} from "../chunk-EWRBHQFX.js";
+} from "../chunk-DO7GZAW4.js";
 import {
   __privateAdd,
   __privateGet,
   __privateMethod,
   __privateSet
-} from "../chunk-WO2AXYFE.js";
+} from "../chunk-MGJA5U5O.js";
 
 // src/cubing/twisty/controllers/AnimationTypes.ts
-var Direction;
-(function(Direction2) {
-  Direction2[Direction2["Forwards"] = 1] = "Forwards";
-  Direction2[Direction2["Paused"] = 0] = "Paused";
-  Direction2[Direction2["Backwards"] = -1] = "Backwards";
-})(Direction || (Direction = {}));
 function directionScalar(direction) {
   return direction;
 }
-var BoundaryType;
-(function(BoundaryType2) {
-  BoundaryType2["Move"] = "move";
-  BoundaryType2["EntireTimeline"] = "entire-timeline";
-})(BoundaryType || (BoundaryType = {}));
 
 // src/cubing/twisty/controllers/RenderScheduler.ts
 var RenderScheduler = class {
@@ -173,7 +161,7 @@ var TwistyAnimationController = class {
     this.delegate = delegate;
     __privateAdd(this, _effectiveTimestampMilliseconds);
     this.playing = false;
-    this.direction = Direction.Forwards;
+    this.direction = 1 /* Forwards */;
     this.lastDatestamp = 0;
     this.scheduler = new RenderScheduler(this.animFrame.bind(this));
     __privateAdd(this, _animFrameEffectiveTimestampStaleDropper, new StaleDropper());
@@ -217,14 +205,14 @@ var TwistyAnimationController = class {
     }
   }
   async play(options) {
-    const direction = options?.direction ?? Direction.Forwards;
+    const direction = options?.direction ?? 1 /* Forwards */;
     const coarseTimelineInfo = await this.model.coarseTimelineInfo.get();
     if (options?.autoSkipToOtherEndIfStartingAtBoundary ?? true) {
-      if (direction === Direction.Forwards && coarseTimelineInfo.atEnd) {
+      if (direction === 1 /* Forwards */ && coarseTimelineInfo.atEnd) {
         this.model.timestampRequest.set("start");
         this.delegate.flash();
       }
-      if (direction === Direction.Backwards && coarseTimelineInfo.atStart) {
+      if (direction === -1 /* Backwards */ && coarseTimelineInfo.atStart) {
         this.model.timestampRequest.set("end");
         this.delegate.flash();
       }
@@ -232,7 +220,7 @@ var TwistyAnimationController = class {
     this.model.playingInfo.set({
       playing: true,
       direction,
-      untilBoundary: options?.untilBoundary ?? BoundaryType.EntireTimeline,
+      untilBoundary: options?.untilBoundary ?? "entire-timeline" /* EntireTimeline */,
       loop: options?.loop ?? false
     });
     this.playing = true;
@@ -245,7 +233,7 @@ var TwistyAnimationController = class {
     this.scheduler.cancelAnimFrame();
     this.model.playingInfo.set({
       playing: false,
-      untilBoundary: BoundaryType.EntireTimeline
+      untilBoundary: "entire-timeline" /* EntireTimeline */
     });
   }
   async animFrame(frameDatestamp) {
@@ -266,11 +254,11 @@ var TwistyAnimationController = class {
       return;
     }
     let end = currentMoveInfo.earliestEnd;
-    if (currentMoveInfo.currentMoves.length === 0 || playingInfo.untilBoundary === BoundaryType.EntireTimeline) {
+    if (currentMoveInfo.currentMoves.length === 0 || playingInfo.untilBoundary === "entire-timeline" /* EntireTimeline */) {
       end = timeRange.end;
     }
     let start = currentMoveInfo.latestStart;
-    if (currentMoveInfo.currentMoves.length === 0 || playingInfo.untilBoundary === BoundaryType.EntireTimeline) {
+    if (currentMoveInfo.currentMoves.length === 0 || playingInfo.untilBoundary === "entire-timeline" /* EntireTimeline */) {
       start = timeRange.start;
     }
     let delta = (frameDatestamp - lastDatestamp) * directionScalar(this.direction) * tempoScale;
@@ -388,7 +376,7 @@ var _cssSourceMap;
 var ManagedCustomElement = class extends HTMLElementShim {
   constructor(options) {
     super();
-    __privateAdd(this, _cssSourceMap, new Map());
+    __privateAdd(this, _cssSourceMap, /* @__PURE__ */ new Map());
     this.shadow = this.attachShadow({ mode: options?.mode ?? "closed" });
     this.contentWrapper = document.createElement("div");
     this.contentWrapper.classList.add("wrapper");
@@ -717,7 +705,7 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
       if (position.movesInProgress.length > 0) {
         const move = position.movesInProgress[0].move;
         let partialMove = move;
-        if (position.movesInProgress[0].direction === Direction.Backwards) {
+        if (position.movesInProgress[0].direction === -1 /* Backwards */) {
           partialMove = move.invert();
         }
         const newState = position.state.applyMove(partialMove);
@@ -774,7 +762,7 @@ var Twisty2DPuzzleWrapper = class {
     __privateAdd(this, _freshListenerManager2, new FreshListenerManager());
     __privateAdd(this, _cachedTwisty2DPuzzle, null);
     this.twisty2DPuzzle();
-    __privateGet(this, _freshListenerManager2).addListener(this.model.stickering, async (stickering) => {
+    __privateGet(this, _freshListenerManager2).addListener(this.model.twistySceneModel.stickering, async (stickering) => {
       (await this.twisty2DPuzzle()).experimentalSetStickering(stickering);
     });
   }
@@ -810,7 +798,7 @@ var Twisty2DSceneWrapper = class extends ManagedCustomElement {
   async connectedCallback() {
     this.addCSS(twistyViewerWrapperCSS);
     if (this.model) {
-      __privateGet(this, _freshListenerManager3).addListener(this.model.puzzleLoader, this.onPuzzleLoader.bind(this));
+      __privateGet(this, _freshListenerManager3).addListener(this.model.twistyPlayerModel.puzzleLoader, this.onPuzzleLoader.bind(this));
     }
   }
   async scene() {
@@ -832,7 +820,7 @@ var Twisty2DSceneWrapper = class extends ManagedCustomElement {
   }
   async onPuzzleLoader(puzzleLoader) {
     __privateGet(this, _currentTwisty2DPuzzleWrapper)?.disconnect();
-    const twisty2DPuzzleWrapper = new Twisty2DPuzzleWrapper(this.model, this, puzzleLoader, this.effectiveVisualization);
+    const twisty2DPuzzleWrapper = new Twisty2DPuzzleWrapper(this.model.twistyPlayerModel, this, puzzleLoader, this.effectiveVisualization);
     this.setCurrentTwisty2DPuzzleWrapper(twisty2DPuzzleWrapper);
   }
 };
@@ -896,19 +884,19 @@ var Twisty3DPuzzleWrapper = class {
         this.disconnect();
       }
     });
-    __privateGet(this, _freshListenerManager4).addListener(this.model.hintFacelet, async (hintFaceletStyle) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.twistySceneModel.hintFacelet, async (hintFaceletStyle) => {
       (await this.twisty3DPuzzle()).experimentalUpdateOptions({
         hintFacelets: hintFaceletStyle === "auto" ? "floating" : hintFaceletStyle
       });
       this.scheduleRender();
     });
-    __privateGet(this, _freshListenerManager4).addListener(this.model.foundationDisplay, async (foundationDisplay) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.twistySceneModel.foundationDisplay, async (foundationDisplay) => {
       (await this.twisty3DPuzzle()).experimentalUpdateOptions({
         showFoundation: foundationDisplay !== "none"
       });
       this.scheduleRender();
     });
-    __privateGet(this, _freshListenerManager4).addListener(this.model.stickering, async (stickering) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.twistySceneModel.stickering, async (stickering) => {
       if ("setStickering" in await this.twisty3DPuzzle()) {
         (await this.twisty3DPuzzle()).setStickering(stickering);
         this.scheduleRender();
@@ -932,7 +920,10 @@ var Twisty3DPuzzleWrapper = class {
         }
       }
     });
-    __privateGet(this, _freshListenerManager4).addMultiListener([this.model.foundationStickerSprite, this.model.hintStickerSprite], async (inputs) => {
+    __privateGet(this, _freshListenerManager4).addMultiListener([
+      this.model.twistySceneModel.foundationStickerSprite,
+      this.model.twistySceneModel.hintStickerSprite
+    ], async (inputs) => {
       if ("experimentalUpdateTexture" in await this.twisty3DPuzzle()) {
         (await this.twisty3DPuzzle()).experimentalUpdateTexture(true, ...inputs);
         this.scheduleRender();
@@ -950,9 +941,9 @@ var Twisty3DPuzzleWrapper = class {
       const proxyPromise = proxy3D();
       if (this.puzzleLoader.id === "3x3x3" && this.visualizationStrategy === "Cube3D") {
         const [foundationSprite, hintSprite, experimentalStickering] = await Promise.all([
-          this.model.foundationStickerSprite.get(),
-          this.model.hintStickerSprite.get(),
-          this.model.stickering.get()
+          this.model.twistySceneModel.foundationStickerSprite.get(),
+          this.model.twistySceneModel.hintStickerSprite.get(),
+          this.model.twistySceneModel.stickering.get()
         ]);
         return (await proxyPromise).cube3DShim({
           foundationSprite,
@@ -961,9 +952,9 @@ var Twisty3DPuzzleWrapper = class {
         });
       } else {
         const [hintFacelets, foundationSprite, hintSprite] = await Promise.all([
-          this.model.hintFacelet.get(),
-          this.model.foundationStickerSprite.get(),
-          this.model.hintStickerSprite.get()
+          this.model.twistySceneModel.hintFacelet.get(),
+          this.model.twistySceneModel.foundationStickerSprite.get(),
+          this.model.twistySceneModel.hintStickerSprite.get()
         ]);
         const pg3d = (await proxyPromise).pg3dShim(this.puzzleLoader, hintFacelets === "auto" ? "floating" : hintFacelets);
         pg3d.then((p) => p.experimentalUpdateTexture(true, foundationSprite ?? void 0, hintSprite ?? void 0));
@@ -1171,7 +1162,7 @@ var DragTracker = class extends EventTarget {
     __privateAdd(this, _registerLazyListeners);
     __privateAdd(this, _clear);
     __privateAdd(this, _trackDrag);
-    __privateAdd(this, _dragInfoMap, new Map());
+    __privateAdd(this, _dragInfoMap, /* @__PURE__ */ new Map());
     __privateAdd(this, _lazyListenersRegistered, false);
     target.addEventListener("pointerdown", this.onPointerDown.bind(this));
     this.target.addEventListener("contextmenu", (e) => {
@@ -1364,8 +1355,8 @@ var TwistyOrbitControls = class {
     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.orbitCoordinatesRequest.set((async () => {
-      const prevCoords = await this.model.orbitCoordinates.get();
+    this.model.twistySceneModel.orbitCoordinatesRequest.set((async () => {
+      const prevCoords = await this.model.twistySceneModel.orbitCoordinates.get();
       const newCoords = {
         latitude: prevCoords.latitude + 2 * temperedY * DEGREES_PER_RADIAN * scale,
         longitude: prevCoords.longitude - 2 * temperedX * DEGREES_PER_RADIAN
@@ -1497,7 +1488,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     return __privateGet(this, _cachedOrbitControls) ?? __privateSet(this, _cachedOrbitControls, (async () => {
       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.orbitCoordinates, async (orbitCoordinates) => {
+        this.addListener(this.model.twistySceneModel.orbitCoordinates, async (orbitCoordinates) => {
           const camera = await this.camera();
           setCameraFromOrbitCoordinates(camera, orbitCoordinates, this.options?.backView);
           this.scheduleRender();
@@ -1543,7 +1534,7 @@ _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.movePressInput.get();
+    const movePressInput = await this.model.twistySceneModel.movePressInput.get();
     if (movePressInput !== "basic") {
       return;
     }
@@ -1581,7 +1572,7 @@ onResize_fn = async function() {
     canvasInfo.canvas.width = w * pixelRatio();
     canvasInfo.canvas.height = h * pixelRatio();
     canvasInfo.canvas.style.width = w.toString();
-    canvasInfo.canvas.style.height = w.toString();
+    canvasInfo.canvas.style.height = h.toString();
   } else {
     const renderer = await this.renderer();
     renderer.setSize(w, h, true);
@@ -1618,7 +1609,7 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
     __privateAdd(this, _freshListenerManager5, new FreshListenerManager());
     __privateAdd(this, _backViewVantage, null);
     __privateAdd(this, _cachedScene2, void 0);
-    __privateAdd(this, _vantages, new Set());
+    __privateAdd(this, _vantages, /* @__PURE__ */ new Set());
     __privateAdd(this, _currentTwisty3DPuzzleWrapper, null);
     __privateAdd(this, _twisty3DStaleDropper, new StaleDropper());
   }
@@ -1713,6 +1704,9 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
     }
   }
   async onPuzzle(inputs) {
+    if (inputs[1] === "2D") {
+      return;
+    }
     __privateGet(this, _currentTwisty3DPuzzleWrapper)?.disconnect();
     const [scene, twisty3DPuzzleWrapper] = await __privateGet(this, _twisty3DStaleDropper).queue(Promise.all([
       this.scene(),
@@ -2006,8 +2000,8 @@ onCommand_fn = function(command) {
       break;
     case "play-step-backwards":
       this.controller?.animationController.play({
-        direction: Direction.Backwards,
-        untilBoundary: BoundaryType.Move
+        direction: -1 /* Backwards */,
+        untilBoundary: "move" /* Move */
       });
       break;
     case "play-pause":
@@ -2015,8 +2009,8 @@ onCommand_fn = function(command) {
       break;
     case "play-step":
       this.controller?.animationController.play({
-        direction: Direction.Forwards,
-        untilBoundary: BoundaryType.Move
+        direction: 1 /* Forwards */,
+        untilBoundary: "move" /* Move */
       });
       break;
     case "jump-to-end":
@@ -2183,11 +2177,11 @@ async function screenshot(model, options) {
   const scene = new (await THREEJS).Scene();
   const twisty3DWrapper = new Twisty3DPuzzleWrapper(model, { scheduleRender: () => {
   } }, await model.puzzleLoader.get(), await model.visualizationStrategy.get());
-  await model.stickering.get();
+  await model.twistySceneModel.stickering.get();
   await new Promise((resolve) => setTimeout(resolve, 1e3));
   await model.legacyPosition.get();
   scene.add(await twisty3DWrapper.twisty3DPuzzle());
-  const orbitCoordinates = await model.orbitCoordinates.get();
+  const orbitCoordinates = await model.twistySceneModel.orbitCoordinates.get();
   await setCameraFromOrbitCoordinates(camera, orbitCoordinates);
   const renderer = new (await THREEJS).WebGLRenderer({
     antialias: true,
@@ -2290,6 +2284,26 @@ twisty-scrubber {
 }
 `);
 
+// src/cubing/twisty/model/props/general/ArbitraryStringProp.ts
+var ArbitraryStringProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return null;
+  }
+};
+
+// src/cubing/twisty/model/props/general/URLProp.ts
+var URLProp = class extends TwistyPropSource {
+  getDefaultValue() {
+    return null;
+  }
+  derive(input) {
+    if (typeof input === "string") {
+      return new URL(input, location.href);
+    }
+    return input;
+  }
+};
+
 // src/cubing/twisty/model/props/puzzle/state/AlgProp.ts
 var AlgIssues = class {
   constructor(issues) {
@@ -2355,353 +2369,155 @@ var AlgProp = class extends TwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/props/viewer/BackgroundProp.ts
-var BackgroundProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
-  }
-};
-
-// src/cubing/twisty/model/props/viewer/BackViewProp.ts
-var backViewLayouts = {
-  "none": true,
-  "side-by-side": true,
-  "top-right": true
-};
-var BackViewProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
-  }
-};
-
-// src/cubing/twisty/model/props/puzzle/state/IndexerConstructorRequestProp.ts
-var IndexerConstructorRequestProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
+// src/cubing/twisty/model/props/puzzle/state/AlgTransformationProp.ts
+var AlgTransformationProp = class extends TwistyPropDerived {
+  derive(input) {
+    return input.kpuzzle.algToTransformation(input.setupAlg.alg);
   }
 };
 
-// src/cubing/twisty/model/props/viewer/LatitudeLimit.ts
-var DEFAULT_LATITUDE_LIMIT = 35;
-var LatitudeLimitProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return DEFAULT_LATITUDE_LIMIT;
+// src/cubing/twisty/model/props/puzzle/state/AnchorTransformationProp.ts
+var AnchorTransformationProp = class extends TwistyPropDerived {
+  derive(inputs) {
+    if (inputs.setupTransformation) {
+      return inputs.setupTransformation;
+    }
+    switch (inputs.setupAnchor) {
+      case "start":
+        return inputs.setupAlgTransformation;
+      case "end": {
+        const algTransformation = inputs.indexer.transformationAtIndex(inputs.indexer.numAnimatedLeaves());
+        const inverseAlgTransformation = algTransformation.invert();
+        return inputs.setupAlgTransformation.applyTransformation(inverseAlgTransformation);
+      }
+      default:
+        throw new Error("Unimplemented!");
+    }
   }
 };
 
-// src/cubing/twisty/model/props/viewer/OrbitCoordinatesRequestProp.ts
-function orbitCoordinatesEqual(c1, c2) {
-  return c1.latitude === c2.latitude && c1.longitude === c2.longitude && c1.distance === c2.distance;
-}
-var OrbitCoordinatesRequestProp = class extends TwistyPropSource {
+// src/cubing/twisty/model/props/puzzle/state/CatchUpMoveProp.ts
+var CatchUpMoveProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
-    return "auto";
+    return { move: null, amount: 0 };
   }
   canReuseValue(v1, v2) {
-    return v1 === v2 || orbitCoordinatesEqual(v1, v2);
-  }
-  async derive(newCoordinates, oldValuePromise) {
-    if (newCoordinates === "auto") {
-      return "auto";
-    }
-    let oldValue = await oldValuePromise;
-    if (oldValue === "auto") {
-      oldValue = {};
-    }
-    const newValue = Object.assign({}, oldValue);
-    Object.assign(newValue, newCoordinates);
-    if (typeof newValue.latitude !== "undefined") {
-      newValue.latitude = Math.min(Math.max(newValue.latitude, -90), 90);
-    }
-    if (typeof newValue.longitude !== "undefined") {
-      newValue.longitude = mod(newValue.longitude, 360, 180);
-    }
-    return newValue;
+    return v1.move === v2.move && v1.amount === v2.amount;
   }
 };
 
-// src/cubing/twisty/model/props/timeline/PlayingInfoProp.ts
-var PlayingInfoProp = class extends TwistyPropSource {
-  async getDefaultValue() {
+// src/cubing/twisty/model/props/puzzle/state/CurrentLeavesSimplified.ts
+var CurrentLeavesSimplifiedProp = class extends TwistyPropDerived {
+  derive(inputs) {
     return {
-      direction: Direction.Forwards,
-      playing: false,
-      untilBoundary: BoundaryType.EntireTimeline,
-      loop: false
+      stateIndex: inputs.currentMoveInfo.stateIndex,
+      movesFinishing: inputs.currentMoveInfo.movesFinishing.map((currentMoveInfo) => currentMoveInfo.move),
+      movesFinished: inputs.currentMoveInfo.movesFinished.map((currentMoveInfo) => currentMoveInfo.move)
     };
   }
-  async derive(newInfo, oldValuePromise) {
-    const oldValue = await oldValuePromise;
-    const newValue = Object.assign({}, oldValue);
-    Object.assign(newValue, newInfo);
-    return newValue;
-  }
-  canReuseValue(v1, v2) {
-    return v1.direction === v2.direction && v1.playing === v2.playing && v1.untilBoundary === v2.untilBoundary && v1.loop === v2.loop;
-  }
-};
-
-// src/cubing/twisty/model/props/puzzle/structure/PuzzleDescriptionProp.ts
-var PGPuzzleDescriptionStringProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return NO_VALUE;
-  }
-};
-
-// src/cubing/twisty/model/props/puzzle/structure/PuzzleIDRequestProp.ts
-var PuzzleIDRequestProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return NO_VALUE;
+  canReuse(v1, v2) {
+    return v1.stateIndex === v2.stateIndex && arrayEqualsCompare(v1.movesFinishing, v2.movesFinishing, (m1, m2) => m1.isIdentical(m2)) && arrayEqualsCompare(v1.movesFinished, v2.movesFinished, (m1, m2) => m1.isIdentical(m2));
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/structure/PuzzleLoaderProp.ts
-var PuzzleLoaderProp = class extends TwistyPropDerived {
+// src/cubing/twisty/model/props/puzzle/state/CurrentMoveInfoProp.ts
+var CurrentMoveInfoProp = class extends TwistyPropDerived {
   derive(inputs) {
-    if (inputs.puzzleIDRequest && inputs.puzzleIDRequest !== NO_VALUE) {
-      const puzzleLoader = puzzles[inputs.puzzleIDRequest];
-      if (!puzzleLoader) {
-        this.userVisibleErrorTracker.set({
-          errors: [`Invalid puzzle ID: ${inputs.puzzleIDRequest}`]
+    function addCatchUpMove(currentMoveInfo) {
+      if (inputs.detailedTimelineInfo.atEnd && inputs.catchUpMove.move !== null) {
+        currentMoveInfo.currentMoves.push({
+          move: inputs.catchUpMove.move,
+          direction: -1 /* Backwards */,
+          fraction: 1 - inputs.catchUpMove.amount,
+          startTimestamp: -1,
+          endTimestamp: -1
         });
       }
-      return puzzleLoader;
+      return currentMoveInfo;
     }
-    if (inputs.puzzleDescriptionRequest && inputs.puzzleDescriptionRequest !== NO_VALUE) {
-      return customPGPuzzleLoader(inputs.puzzleDescriptionRequest);
+    if (inputs.indexer.currentMoveInfo) {
+      return addCatchUpMove(inputs.indexer.currentMoveInfo(inputs.detailedTimelineInfo.timestamp));
+    } else {
+      const idx = inputs.indexer.timestampToIndex(inputs.detailedTimelineInfo.timestamp);
+      const currentMoveInfo = {
+        stateIndex: idx,
+        currentMoves: [],
+        movesFinishing: [],
+        movesFinished: [],
+        movesStarting: [],
+        latestStart: -Infinity,
+        earliestEnd: Infinity
+      };
+      if (inputs.indexer.numAnimatedLeaves() > 0) {
+        const move = inputs.indexer.getAnimLeaf(idx)?.as(Move);
+        if (!move) {
+          return addCatchUpMove(currentMoveInfo);
+        }
+        const start = inputs.indexer.indexToMoveStartTimestamp(idx);
+        const duration = inputs.indexer.moveDuration(idx);
+        const fraction = (inputs.detailedTimelineInfo.timestamp - start) / duration;
+        const end = start + duration;
+        const currentMove = {
+          move,
+          direction: 1 /* Forwards */,
+          fraction,
+          startTimestamp: start,
+          endTimestamp: end
+        };
+        if (fraction === 0) {
+          currentMoveInfo.movesStarting.push(currentMove);
+        } else if (fraction === 1) {
+          currentMoveInfo.movesFinishing.push(currentMove);
+        } else {
+          currentMoveInfo.currentMoves.push(currentMove);
+          currentMoveInfo.latestStart = Math.max(currentMoveInfo.latestStart, start);
+          currentMoveInfo.earliestEnd = Math.min(currentMoveInfo.earliestEnd, end);
+        }
+      }
+      return addCatchUpMove(currentMoveInfo);
     }
-    return cube3x3x3;
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/SetupAnchorProp.ts
-var SetupAnchorProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "start";
+// src/cubing/twisty/model/props/puzzle/state/CurrentStateProp.ts
+var CurrentStateProp = class extends TwistyPropDerived {
+  derive(inputs) {
+    let transformation = inputs.indexer.transformationAtIndex(inputs.currentLeavesSimplified.stateIndex);
+    transformation = inputs.anchoredStart.applyTransformation(transformation);
+    for (const finishingMove of inputs.currentLeavesSimplified.movesFinishing) {
+      transformation = transformation.applyMove(finishingMove);
+    }
+    for (const finishedMove of inputs.currentLeavesSimplified.movesFinished) {
+      transformation = transformation.applyMove(finishedMove);
+    }
+    return transformation.toKState();
   }
 };
 
-// src/cubing/twisty/model/props/timeline/TempoScaleProp.ts
-var TempoScaleProp = class extends TwistyPropSource {
-  getDefaultValue() {
-    return 1;
-  }
-  derive(v) {
-    return v < 0 ? 1 : v;
+// src/cubing/twisty/controllers/indexer/AlgDuration.ts
+function defaultDurationForAmount(amount) {
+  switch (Math.abs(amount)) {
+    case 0:
+      return 0;
+    case 1:
+      return 1e3;
+    case 2:
+      return 1500;
+    default:
+      return 2e3;
   }
-};
-
-// src/cubing/twisty/model/props/timeline/TimestampRequestProp.ts
-var smartTimestamps = {
-  "start": true,
-  "end": true,
-  "anchor": true,
-  "opposite-anchor": true
-};
-var TimestampRequestProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "opposite-anchor";
+}
+var AlgDuration = class extends TraversalUp {
+  constructor(durationForAmount = defaultDurationForAmount) {
+    super();
+    this.durationForAmount = durationForAmount;
   }
-  set(v) {
-    if (!this.validInput(v)) {
-      return;
+  traverseAlg(alg) {
+    let total = 0;
+    for (const unit of alg.units()) {
+      total += this.traverseUnit(unit);
     }
-    super.set(v);
-  }
-  validInput(v) {
-    if (typeof v === "number") {
-      return true;
-    }
-    if (smartTimestamps[v]) {
-      return true;
-    }
-    return false;
-  }
-};
-
-// src/cubing/twisty/model/props/general/URLProp.ts
-var URLProp = class extends TwistyPropSource {
-  getDefaultValue() {
-    return null;
-  }
-  derive(input) {
-    if (typeof input === "string") {
-      return new URL(input, location.href);
-    }
-    return input;
-  }
-};
-
-// src/cubing/twisty/model/props/viewer/ViewerLinkProp.ts
-var ViewerLinkProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
-  }
-};
-
-// src/cubing/twisty/model/props/viewer/VisualizationProp.ts
-var VisualizationFormatProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
-  }
-};
-
-// src/cubing/twisty/model/props/viewer/OrbitCoordinatesProp.ts
-var OrbitCoordinatesProp = class extends TwistyPropDerived {
-  canReuseValue(v1, v2) {
-    return orbitCoordinatesEqual(v1, v2);
-  }
-  async derive(inputs) {
-    if (inputs.orbitCoordinatesRequest === "auto") {
-      return defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy);
-    }
-    const req = Object.assign(Object.assign({}, defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy), inputs.orbitCoordinatesRequest));
-    if (Math.abs(req.latitude) <= inputs.latitudeLimit) {
-      return req;
-    } else {
-      const { latitude, longitude, distance } = req;
-      return {
-        latitude: inputs.latitudeLimit * Math.sign(latitude),
-        longitude,
-        distance
-      };
-    }
-  }
-};
-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 {
-  async derive(inputs) {
-    return inputs.puzzleLoader.id;
-  }
-};
-
-// src/cubing/twisty/model/props/puzzle/display/SpriteProp.ts
-var cachedLoader = null;
-async function loader() {
-  return cachedLoader ?? (cachedLoader = new (await THREEJS).TextureLoader());
-}
-var SpriteProp = class extends TwistyPropDerived {
-  async derive(inputs) {
-    const { spriteURL: textureURL } = inputs;
-    if (textureURL === null) {
-      return null;
-    }
-    return new Promise(async (resolve, _reject) => {
-      const onLoadingError = () => {
-        console.warn("Could not load sprite:", textureURL.toString());
-        resolve(null);
-      };
-      try {
-        (await loader()).load(textureURL.toString(), resolve, onLoadingError, onLoadingError);
-      } catch (e) {
-        onLoadingError();
-      }
-    });
-  }
-};
-
-// src/cubing/twisty/model/props/viewer/VisualizationStrategyProp.ts
-var VisualizationStrategyProp = class extends TwistyPropDerived {
-  derive(inputs) {
-    switch (inputs.puzzleID) {
-      case "clock":
-      case "square1":
-      case "kilominx":
-        return "2D";
-      case "3x3x3":
-        switch (inputs.visualizationRequest) {
-          case "auto":
-          case "3D":
-            return "Cube3D";
-          default:
-            return inputs.visualizationRequest;
-        }
-      default:
-        switch (inputs.visualizationRequest) {
-          case "auto":
-          case "3D":
-            return "PG3D";
-          case "experimental-2D-LL":
-            return "2D";
-          default:
-            return inputs.visualizationRequest;
-        }
-    }
-  }
-};
-
-// src/cubing/twisty/controllers/indexer/AlgDuration.ts
-function defaultDurationForAmount(amount) {
-  switch (Math.abs(amount)) {
-    case 0:
-      return 0;
-    case 1:
-      return 1e3;
-    case 2:
-      return 1500;
-    default:
-      return 2e3;
-  }
-}
-var AlgDuration = class extends TraversalUp {
-  constructor(durationForAmount = defaultDurationForAmount) {
-    super();
-    this.durationForAmount = durationForAmount;
-  }
-  traverseAlg(alg) {
-    let total = 0;
-    for (const unit of alg.units()) {
-      total += this.traverseUnit(unit);
-    }
-    return total;
+    return total;
   }
   traverseGrouping(grouping) {
     return grouping.amount * this.traverseAlg(grouping.alg);
@@ -3023,7 +2839,7 @@ var SimultaneousMoveIndexer = class {
           }
           const currentMove = {
             move,
-            direction: Direction.Forwards,
+            direction: 1 /* Forwards */,
             fraction,
             startTimestamp: leafWithRange.start,
             endTimestamp: leafWithRange.end
@@ -3229,7 +3045,7 @@ var AlgWalker = class extends TraversalDownUp {
       return false;
     }
     let i = wd.back ? alg.experimentalNumUnits() - 1 : 0;
-    for (const unit of directedGenerator(alg.units(), wd.back ? IterationDirection.Backwards : IterationDirection.Forwards)) {
+    for (const unit of directedGenerator(alg.units(), wd.back ? -1 /* Backwards */ : 1 /* Forwards */)) {
       if (this.traverseUnit(unit, new WalkerDown(wd.apd.children[i], wd.back))) {
         return true;
       }
@@ -3460,6 +3276,40 @@ var IndexerConstructorProp = class extends TwistyPropDerived {
   }
 };
 
+// src/cubing/twisty/model/props/puzzle/state/IndexerConstructorRequestProp.ts
+var IndexerConstructorRequestProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/state/IndexerProp.ts
+var IndexerProp = class extends TwistyPropDerived {
+  derive(input) {
+    return new input.indexerConstructor(input.kpuzzle, input.algWithIssues.alg);
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/state/LegacyPositionProp.ts
+var LegacyPositionProp = class extends TwistyPropDerived {
+  derive(inputs) {
+    return {
+      state: inputs.state,
+      movesInProgress: inputs.currentMoveInfo.currentMoves
+    };
+  }
+};
+
+// 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/PuzzleAlgProp.ts
 var validate = true;
 var PuzzleAlgProp = class extends TwistyPropDerived {
@@ -3480,48 +3330,79 @@ var PuzzleAlgProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/AlgTransformationProp.ts
-var AlgTransformationProp = class extends TwistyPropDerived {
-  derive(input) {
-    return input.kpuzzle.algToTransformation(input.setupAlg.alg);
+// src/cubing/twisty/model/props/puzzle/state/SetupAnchorProp.ts
+var SetupAnchorProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "start";
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/IndexerProp.ts
-var IndexerProp = class extends TwistyPropDerived {
-  derive(input) {
-    return new input.indexerConstructor(input.kpuzzle, input.algWithIssues.alg);
+// src/cubing/twisty/model/props/puzzle/state/SetupTransformationProp.ts
+var SetupTransformationProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return null;
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/AnchorTransformationProp.ts
-var AnchorTransformationProp = class extends TwistyPropDerived {
-  derive(inputs) {
-    if (inputs.setupTransformation) {
-      return inputs.setupTransformation;
-    }
-    switch (inputs.setupAnchor) {
-      case "start":
-        return inputs.setupAlgTransformation;
-      case "end": {
-        const algTransformation = inputs.indexer.transformationAtIndex(inputs.indexer.numAnimatedLeaves());
-        const inverseAlgTransformation = algTransformation.invert();
-        return inputs.setupAlgTransformation.applyTransformation(inverseAlgTransformation);
+// src/cubing/twisty/model/props/puzzle/structure/KPuzzleProp.ts
+var KPuzzleProp = class extends TwistyPropDerived {
+  async derive(inputs) {
+    return inputs.puzzleLoader.kpuzzle();
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleDescriptionProp.ts
+var PGPuzzleDescriptionStringProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return NO_VALUE;
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleIDProp.ts
+var PuzzleIDProp = class extends TwistyPropDerived {
+  async derive(inputs) {
+    return inputs.puzzleLoader.id;
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleIDRequestProp.ts
+var PuzzleIDRequestProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return NO_VALUE;
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleLoaderProp.ts
+var PuzzleLoaderProp = class extends TwistyPropDerived {
+  derive(inputs) {
+    if (inputs.puzzleIDRequest && inputs.puzzleIDRequest !== NO_VALUE) {
+      const puzzleLoader = puzzles[inputs.puzzleIDRequest];
+      if (!puzzleLoader) {
+        this.userVisibleErrorTracker.set({
+          errors: [`Invalid puzzle ID: ${inputs.puzzleIDRequest}`]
+        });
       }
-      default:
-        throw new Error("Unimplemented!");
+      return puzzleLoader;
+    }
+    if (inputs.puzzleDescriptionRequest && inputs.puzzleDescriptionRequest !== NO_VALUE) {
+      return customPGPuzzleLoader(inputs.puzzleDescriptionRequest);
     }
+    return cube3x3x3;
   }
 };
 
-// src/cubing/twisty/model/props/viewer/TimeRangeProp.ts
-var TimeRangeProp = class extends TwistyPropDerived {
+// src/cubing/twisty/model/props/timeline/CoarseTimelineInfoProp.ts
+var CoarseTimelineInfoProp = class extends TwistyPropDerived {
   derive(inputs) {
     return {
-      start: 0,
-      end: inputs.indexer.algDuration()
+      playing: inputs.playingInfo.playing,
+      atStart: inputs.detailedTimelineInfo.atStart,
+      atEnd: inputs.detailedTimelineInfo.atEnd
     };
   }
+  canReuseValue(v1, v2) {
+    return v1.playing === v2.playing && v1.atStart === v2.atStart && v1.atEnd === v2.atEnd;
+  }
 };
 
 // src/cubing/twisty/model/props/timeline/DetailedTimelineInfoProp.ts
@@ -3570,156 +3451,161 @@ requestedTimestampToMilliseconds_fn = function(inputs) {
   }
 };
 
-// src/cubing/twisty/model/props/timeline/CoarseTimelineInfoProp.ts
-var CoarseTimelineInfoProp = class extends TwistyPropDerived {
-  derive(inputs) {
+// src/cubing/twisty/model/props/timeline/PlayingInfoProp.ts
+var PlayingInfoProp = class extends TwistyPropSource {
+  async getDefaultValue() {
     return {
-      playing: inputs.playingInfo.playing,
-      atStart: inputs.detailedTimelineInfo.atStart,
-      atEnd: inputs.detailedTimelineInfo.atEnd
+      direction: 1 /* Forwards */,
+      playing: false,
+      untilBoundary: "entire-timeline" /* EntireTimeline */,
+      loop: false
     };
   }
+  async derive(newInfo, oldValuePromise) {
+    const oldValue = await oldValuePromise;
+    const newValue = Object.assign({}, oldValue);
+    Object.assign(newValue, newInfo);
+    return newValue;
+  }
   canReuseValue(v1, v2) {
-    return v1.playing === v2.playing && v1.atStart === v2.atStart && v1.atEnd === v2.atEnd;
+    return v1.direction === v2.direction && v1.playing === v2.playing && v1.untilBoundary === v2.untilBoundary && v1.loop === v2.loop;
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/CurrentMoveInfoProp.ts
-var CurrentMoveInfoProp = class extends TwistyPropDerived {
-  derive(inputs) {
-    function addCatchUpMove(currentMoveInfo) {
-      if (inputs.detailedTimelineInfo.atEnd && inputs.catchUpMove.move !== null) {
-        currentMoveInfo.currentMoves.push({
-          move: inputs.catchUpMove.move,
-          direction: Direction.Backwards,
-          fraction: 1 - inputs.catchUpMove.amount,
-          startTimestamp: -1,
-          endTimestamp: -1
-        });
-      }
-      return currentMoveInfo;
-    }
-    if (inputs.indexer.currentMoveInfo) {
-      return addCatchUpMove(inputs.indexer.currentMoveInfo(inputs.detailedTimelineInfo.timestamp));
-    } else {
-      const idx = inputs.indexer.timestampToIndex(inputs.detailedTimelineInfo.timestamp);
-      const currentMoveInfo = {
-        stateIndex: idx,
-        currentMoves: [],
-        movesFinishing: [],
-        movesFinished: [],
-        movesStarting: [],
-        latestStart: -Infinity,
-        earliestEnd: Infinity
-      };
-      if (inputs.indexer.numAnimatedLeaves() > 0) {
-        const move = inputs.indexer.getAnimLeaf(idx)?.as(Move);
-        if (!move) {
-          return addCatchUpMove(currentMoveInfo);
-        }
-        const start = inputs.indexer.indexToMoveStartTimestamp(idx);
-        const duration = inputs.indexer.moveDuration(idx);
-        const fraction = (inputs.detailedTimelineInfo.timestamp - start) / duration;
-        const end = start + duration;
-        const currentMove = {
-          move,
-          direction: Direction.Forwards,
-          fraction,
-          startTimestamp: start,
-          endTimestamp: end
-        };
-        if (fraction === 0) {
-          currentMoveInfo.movesStarting.push(currentMove);
-        } else if (fraction === 1) {
-          currentMoveInfo.movesFinishing.push(currentMove);
-        } else {
-          currentMoveInfo.currentMoves.push(currentMove);
-          currentMoveInfo.latestStart = Math.max(currentMoveInfo.latestStart, start);
-          currentMoveInfo.earliestEnd = Math.min(currentMoveInfo.earliestEnd, end);
-        }
-      }
-      return addCatchUpMove(currentMoveInfo);
-    }
+// src/cubing/twisty/model/props/timeline/TempoScaleProp.ts
+var TempoScaleProp = class extends TwistyPropSource {
+  getDefaultValue() {
+    return 1;
+  }
+  derive(v) {
+    return v < 0 ? 1 : v;
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/CurrentLeavesSimplified.ts
-var CurrentLeavesSimplifiedProp = class extends TwistyPropDerived {
-  derive(inputs) {
-    return {
-      stateIndex: inputs.currentMoveInfo.stateIndex,
-      movesFinishing: inputs.currentMoveInfo.movesFinishing.map((currentMoveInfo) => currentMoveInfo.move),
-      movesFinished: inputs.currentMoveInfo.movesFinished.map((currentMoveInfo) => currentMoveInfo.move)
-    };
+// src/cubing/twisty/model/props/timeline/TimestampRequestProp.ts
+var smartTimestamps = {
+  "start": true,
+  "end": true,
+  "anchor": true,
+  "opposite-anchor": true
+};
+var TimestampRequestProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "opposite-anchor";
   }
-  canReuse(v1, v2) {
-    return v1.stateIndex === v2.stateIndex && arrayEqualsCompare(v1.movesFinishing, v2.movesFinishing, (m1, m2) => m1.isIdentical(m2)) && arrayEqualsCompare(v1.movesFinished, v2.movesFinished, (m1, m2) => m1.isIdentical(m2));
+  set(v) {
+    if (!this.validInput(v)) {
+      return;
+    }
+    super.set(v);
   }
-};
-
-// src/cubing/twisty/model/props/puzzle/state/CurrentStateProp.ts
-var CurrentStateProp = class extends TwistyPropDerived {
-  derive(inputs) {
-    let transformation = inputs.indexer.transformationAtIndex(inputs.currentLeavesSimplified.stateIndex);
-    transformation = inputs.anchoredStart.applyTransformation(transformation);
-    for (const finishingMove of inputs.currentLeavesSimplified.movesFinishing) {
-      transformation = transformation.applyMove(finishingMove);
+  validInput(v) {
+    if (typeof v === "number") {
+      return true;
     }
-    for (const finishedMove of inputs.currentLeavesSimplified.movesFinished) {
-      transformation = transformation.applyMove(finishedMove);
+    if (smartTimestamps[v]) {
+      return true;
     }
-    return transformation.toKState();
+    return false;
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/LegacyPositionProp.ts
-var LegacyPositionProp = class extends TwistyPropDerived {
+// src/cubing/twisty/model/props/viewer/BackViewProp.ts
+var backViewLayouts = {
+  "none": true,
+  "side-by-side": true,
+  "top-right": true
+};
+var BackViewProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
+// src/cubing/twisty/model/props/viewer/TimeRangeProp.ts
+var TimeRangeProp = class extends TwistyPropDerived {
   derive(inputs) {
     return {
-      state: inputs.state,
-      movesInProgress: inputs.currentMoveInfo.currentMoves
+      start: 0,
+      end: inputs.indexer.algDuration()
     };
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/structure/KPuzzleProp.ts
-var KPuzzleProp = class extends TwistyPropDerived {
-  async derive(inputs) {
-    return inputs.puzzleLoader.kpuzzle();
+// src/cubing/twisty/model/props/viewer/ViewerLinkProp.ts
+var ViewerLinkProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
   }
 };
 
-// src/cubing/twisty/model/UserVisibleErrorTracker.ts
-var EMPTY_ERRORS = { errors: [] };
-var UserVisibleErrorTracker = class extends SimpleTwistyPropSource {
+// src/cubing/twisty/model/props/viewer/VisualizationProp.ts
+var VisualizationFormatProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
-    return EMPTY_ERRORS;
-  }
-  reset() {
-    this.set(this.getDefaultValue());
+    return "auto";
   }
-  canReuseValue(_v1, _v2) {
-    return arrayEquals(_v1.errors, _v2.errors);
+};
+
+// src/cubing/twisty/model/props/viewer/VisualizationStrategyProp.ts
+var VisualizationStrategyProp = class extends TwistyPropDerived {
+  derive(inputs) {
+    switch (inputs.puzzleID) {
+      case "clock":
+      case "square1":
+      case "kilominx":
+      case "redi_cube":
+        return "2D";
+      case "3x3x3":
+        switch (inputs.visualizationRequest) {
+          case "auto":
+          case "3D":
+            return "Cube3D";
+          default:
+            return inputs.visualizationRequest;
+        }
+      default:
+        switch (inputs.visualizationRequest) {
+          case "auto":
+          case "3D":
+            return "PG3D";
+          case "experimental-2D-LL":
+            return "2D";
+          default:
+            return inputs.visualizationRequest;
+        }
+    }
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/CatchUpMoveProp.ts
-var CatchUpMoveProp = class extends SimpleTwistyPropSource {
+// src/cubing/twisty/model/props/puzzle/display/FoundationDisplayProp.ts
+var FoundationDisplayProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
-    return { move: null, amount: 0 };
-  }
-  canReuseValue(v1, v2) {
-    return v1.move === v2.move && v1.amount === v2.amount;
+    return "auto";
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/NaiveMoveCountProp.ts
-var NaiveMoveCountProp = class extends TwistyPropDerived {
-  derive(inputs) {
-    if (inputs.alg.issues.errors.length > 0) {
+// src/cubing/twisty/model/props/puzzle/display/SpriteProp.ts
+var cachedLoader = null;
+async function loader() {
+  return cachedLoader ?? (cachedLoader = new (await THREEJS).TextureLoader());
+}
+var SpriteProp = class extends TwistyPropDerived {
+  async derive(inputs) {
+    const { spriteURL: textureURL } = inputs;
+    if (textureURL === null) {
       return null;
     }
-    return countMoves(inputs.alg.alg);
+    return new Promise(async (resolve, _reject) => {
+      const onLoadingError = () => {
+        console.warn("Could not load sprite:", textureURL.toString());
+        resolve(null);
+      };
+      try {
+        (await loader()).load(textureURL.toString(), resolve, onLoadingError, onLoadingError);
+      } catch (e) {
+        onLoadingError();
+      }
+    });
   }
 };
 
@@ -3730,24 +3616,161 @@ var MovePressInputProp = class extends SimpleTwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/display/FoundationDisplayProp.ts
-var FoundationDisplayProp = class extends SimpleTwistyPropSource {
+// src/cubing/twisty/model/props/viewer/BackgroundProp.ts
+var BackgroundProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/SetupTransformationProp.ts
-var SetupTransformationProp = class extends SimpleTwistyPropSource {
+// src/cubing/twisty/model/props/viewer/LatitudeLimit.ts
+var DEFAULT_LATITUDE_LIMIT = 35;
+var LatitudeLimitProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
-    return null;
+    return DEFAULT_LATITUDE_LIMIT;
   }
 };
 
-// src/cubing/twisty/model/props/general/ArbitraryStringProp.ts
-var ArbitraryStringProp = class extends SimpleTwistyPropSource {
+// src/cubing/twisty/model/props/viewer/OrbitCoordinatesRequestProp.ts
+function orbitCoordinatesEqual(c1, c2) {
+  return c1.latitude === c2.latitude && c1.longitude === c2.longitude && c1.distance === c2.distance;
+}
+var OrbitCoordinatesRequestProp = class extends TwistyPropSource {
   getDefaultValue() {
-    return null;
+    return "auto";
+  }
+  canReuseValue(v1, v2) {
+    return v1 === v2 || orbitCoordinatesEqual(v1, v2);
+  }
+  async derive(newCoordinates, oldValuePromise) {
+    if (newCoordinates === "auto") {
+      return "auto";
+    }
+    let oldValue = await oldValuePromise;
+    if (oldValue === "auto") {
+      oldValue = {};
+    }
+    const newValue = Object.assign({}, oldValue);
+    Object.assign(newValue, newCoordinates);
+    if (typeof newValue.latitude !== "undefined") {
+      newValue.latitude = Math.min(Math.max(newValue.latitude, -90), 90);
+    }
+    if (typeof newValue.longitude !== "undefined") {
+      newValue.longitude = mod(newValue.longitude, 360, 180);
+    }
+    return newValue;
+  }
+};
+
+// src/cubing/twisty/model/props/viewer/OrbitCoordinatesProp.ts
+var OrbitCoordinatesProp = class extends TwistyPropDerived {
+  canReuseValue(v1, v2) {
+    return orbitCoordinatesEqual(v1, v2);
+  }
+  async derive(inputs) {
+    if (inputs.orbitCoordinatesRequest === "auto") {
+      return defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy);
+    }
+    const req = Object.assign(Object.assign({}, defaultCameraOrbitCoordinates(inputs.puzzleID, inputs.strategy), inputs.orbitCoordinatesRequest));
+    if (Math.abs(req.latitude) <= inputs.latitudeLimit) {
+      return req;
+    } else {
+      const { latitude, longitude, distance } = req;
+      return {
+        latitude: inputs.latitudeLimit * Math.sign(latitude),
+        longitude,
+        distance
+      };
+    }
+  }
+};
+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/TwistySceneModel.ts
+var TwistySceneModel = class {
+  constructor(twistyPlayerModel) {
+    this.twistyPlayerModel = twistyPlayerModel;
+    this.background = new BackgroundProp();
+    this.foundationDisplay = new FoundationDisplayProp();
+    this.foundationStickerSpriteURL = new URLProp();
+    this.hintFacelet = new HintFaceletProp();
+    this.hintStickerSpriteURL = new URLProp();
+    this.latitudeLimit = new LatitudeLimitProp();
+    this.movePressInput = new MovePressInputProp();
+    this.orbitCoordinatesRequest = new OrbitCoordinatesRequestProp();
+    this.stickering = new StickeringProp();
+    this.foundationStickerSprite = new SpriteProp({
+      spriteURL: this.foundationStickerSpriteURL
+    });
+    this.hintStickerSprite = new SpriteProp({
+      spriteURL: this.hintStickerSpriteURL
+    });
+    this.orbitCoordinates = new OrbitCoordinatesProp({
+      orbitCoordinatesRequest: this.orbitCoordinatesRequest,
+      latitudeLimit: this.latitudeLimit,
+      puzzleID: twistyPlayerModel.puzzleID,
+      strategy: twistyPlayerModel.visualizationStrategy
+    });
+  }
+};
+
+// src/cubing/twisty/model/UserVisibleErrorTracker.ts
+var EMPTY_ERRORS = { errors: [] };
+var UserVisibleErrorTracker = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return EMPTY_ERRORS;
+  }
+  reset() {
+    this.set(this.getDefaultValue());
+  }
+  canReuseValue(_v1, _v2) {
+    return arrayEquals(_v1.errors, _v2.errors);
   }
 };
 
@@ -3756,25 +3779,16 @@ var TwistyPlayerModel = class {
   constructor() {
     this.userVisibleErrorTracker = new UserVisibleErrorTracker();
     this.alg = new AlgProp();
-    this.background = new BackgroundProp();
     this.backView = new BackViewProp();
     this.controlPanel = new ControlPanelProp();
     this.catchUpMove = new CatchUpMoveProp();
-    this.foundationDisplay = new FoundationDisplayProp();
-    this.foundationStickerSpriteURL = new URLProp();
-    this.hintFacelet = new HintFaceletProp();
-    this.hintStickerSpriteURL = new URLProp();
     this.indexerConstructorRequest = new IndexerConstructorRequestProp();
-    this.latitudeLimit = new LatitudeLimitProp();
-    this.movePressInput = new MovePressInputProp();
-    this.orbitCoordinatesRequest = new OrbitCoordinatesRequestProp();
     this.playingInfo = new PlayingInfoProp();
     this.puzzleDescriptionRequest = new PGPuzzleDescriptionStringProp();
     this.puzzleIDRequest = new PuzzleIDRequestProp();
     this.setupAnchor = new SetupAnchorProp();
     this.setupAlg = new AlgProp();
     this.setupTransformation = new SetupTransformationProp();
-    this.stickering = new StickeringProp();
     this.tempoScale = new TempoScaleProp();
     this.timestampRequest = new TimestampRequestProp();
     this.viewerLink = new ViewerLinkProp();
@@ -3782,12 +3796,6 @@ var TwistyPlayerModel = class {
     this.title = new ArbitraryStringProp();
     this.videoURL = new URLProp();
     this.competitionID = new ArbitraryStringProp();
-    this.foundationStickerSprite = new SpriteProp({
-      spriteURL: this.foundationStickerSpriteURL
-    });
-    this.hintStickerSprite = new SpriteProp({
-      spriteURL: this.hintStickerSpriteURL
-    });
     this.puzzleLoader = new PuzzleLoaderProp({
       puzzleIDRequest: this.puzzleIDRequest,
       puzzleDescriptionRequest: this.puzzleDescriptionRequest
@@ -3813,12 +3821,6 @@ var TwistyPlayerModel = class {
       indexerConstructorRequest: this.indexerConstructorRequest
     });
     this.moveCount = new NaiveMoveCountProp({ alg: this.puzzleAlg });
-    this.orbitCoordinates = new OrbitCoordinatesProp({
-      orbitCoordinatesRequest: this.orbitCoordinatesRequest,
-      latitudeLimit: this.latitudeLimit,
-      puzzleID: this.puzzleID,
-      strategy: this.visualizationStrategy
-    });
     this.setupAlgTransformation = new AlgTransformationProp({
       setupAlg: this.puzzleSetupAlg,
       kpuzzle: this.kpuzzle
@@ -3867,6 +3869,7 @@ var TwistyPlayerModel = class {
       currentMoveInfo: this.currentMoveInfo,
       state: this.currentState
     });
+    this.twistySceneModel = new TwistySceneModel(this);
   }
   async twizzleLink() {
     const [
@@ -3884,7 +3887,7 @@ var TwistyPlayerModel = class {
       this.alg.get(),
       this.setupAlg.get(),
       this.setupAnchor.get(),
-      this.stickering.get()
+      this.twistySceneModel.stickering.get()
     ]);
     const isExplorer = viewerLink === "experimental-twizzle-explorer";
     console.log({ isExplorer, viewerLink });
@@ -3977,13 +3980,13 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
     throw err("timestamp");
   }
   set hintFacelets(hintFaceletStyle) {
-    this.experimentalModel.hintFacelet.set(hintFaceletStyle);
+    this.experimentalModel.twistySceneModel.hintFacelet.set(hintFaceletStyle);
   }
   get hintFacelets() {
     throw err("hintFacelets");
   }
   set experimentalStickering(stickering) {
-    this.experimentalModel.stickering.set(stickering);
+    this.experimentalModel.twistySceneModel.stickering.set(stickering);
   }
   get experimentalStickering() {
     throw err("stickering");
@@ -3995,7 +3998,7 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
     throw err("backView");
   }
   set background(backgroundTheme) {
-    this.experimentalModel.background.set(backgroundTheme);
+    this.experimentalModel.twistySceneModel.background.set(backgroundTheme);
   }
   get background() {
     throw err("background");
@@ -4037,31 +4040,31 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
     throw err("viewerLink");
   }
   set experimentalMovePressInput(movePressInput) {
-    this.experimentalModel.movePressInput.set(movePressInput);
+    this.experimentalModel.twistySceneModel.movePressInput.set(movePressInput);
   }
   get experimentalMovePressInput() {
     throw err("experimentalMovePressInput");
   }
   set cameraLatitude(latitude) {
-    this.experimentalModel.orbitCoordinatesRequest.set({ latitude });
+    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({ latitude });
   }
   get cameraLatitude() {
     throw err("cameraLatitude");
   }
   set cameraLongitude(longitude) {
-    this.experimentalModel.orbitCoordinatesRequest.set({ longitude });
+    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({ longitude });
   }
   get cameraLongitude() {
     throw err("cameraLongitude");
   }
   set cameraDistance(distance) {
-    this.experimentalModel.orbitCoordinatesRequest.set({ distance });
+    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({ distance });
   }
   get cameraDistance() {
     throw err("cameraDistance");
   }
   set cameraLatitudeLimit(latitudeLimit) {
-    this.experimentalModel.latitudeLimit.set(latitudeLimit);
+    this.experimentalModel.twistySceneModel.latitudeLimit.set(latitudeLimit);
   }
   get cameraLatitudeLimit() {
     throw err("cameraLatitudeLimit");
@@ -4079,13 +4082,13 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
     throw err("tempoScale");
   }
   set experimentalSprite(url) {
-    this.experimentalModel.foundationStickerSpriteURL.set(url);
+    this.experimentalModel.twistySceneModel.foundationStickerSpriteURL.set(url);
   }
   get experimentalSprite() {
     throw err("experimentalSprite");
   }
   set experimentalHintSprite(url) {
-    this.experimentalModel.hintStickerSpriteURL.set(url);
+    this.experimentalModel.twistySceneModel.hintStickerSpriteURL.set(url);
   }
   get experimentalHintSprite() {
     throw err("experimentalHintSprite");
@@ -4110,6 +4113,7 @@ var ExperimentalGetters = class {
 };
 
 // src/cubing/twisty/views/TwistyPlayer.ts
+var DATA_ATTRIBUTE_PREFIX = "data-";
 var twistyPlayerAttributeMap = {
   "alg": "alg",
   "experimental-setup-alg": "experimentalSetupAlg",
@@ -4178,7 +4182,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     this.contentWrapper.appendChild(scrubber);
     this.buttons = new TwistyButtons(this.experimentalModel, this.controller, this);
     this.contentWrapper.appendChild(this.buttons);
-    this.experimentalModel.background.addFreshListener((backgroundTheme) => {
+    this.experimentalModel.twistySceneModel.background.addFreshListener((backgroundTheme) => {
       this.contentWrapper.classList.toggle("checkered", backgroundTheme !== "none");
     });
     this.experimentalModel.controlPanel.addFreshListener((controlPanel) => {
@@ -4231,9 +4235,16 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     this.experimentalModel.experimentalAddMove(flexibleMove, options);
   }
   static get observedAttributes() {
-    return Object.keys(twistyPlayerAttributeMap);
+    const observed = [];
+    for (const key of Object.keys(twistyPlayerAttributeMap)) {
+      observed.push(key, DATA_ATTRIBUTE_PREFIX + key);
+    }
+    return observed;
   }
   attributeChangedCallback(attributeName, _oldValue, newValue) {
+    if (attributeName.startsWith("data-")) {
+      attributeName = attributeName.slice("data-".length);
+    }
     const setterName = twistyPlayerAttributeMap[attributeName];
     if (!setterName) {
       return;
@@ -4270,7 +4281,7 @@ setVisualizationWrapper_fn = function(strategy) {
     switch (strategy) {
       case "2D":
       case "experimental-2D-LL":
-        newWrapper = new Twisty2DSceneWrapper(this.experimentalModel, strategy);
+        newWrapper = new Twisty2DSceneWrapper(this.experimentalModel.twistySceneModel, strategy);
         break;
       case "Cube3D":
       case "PG3D":
@@ -4353,7 +4364,7 @@ var TwistyAlgWrapperElem = class extends HTMLElementShim {
     this.queue.push(dataUp.element);
     return dataUp.moveCount;
   }
-  flushQueue(direction = IterationDirection.Forwards) {
+  flushQueue(direction = 1 /* Forwards */) {
     for (const node of maybeReverseList(this.queue, direction)) {
       this.append(node);
     }
@@ -4365,13 +4376,13 @@ var TwistyAlgWrapperElem = class extends HTMLElementShim {
 };
 customElementsShim.define("twisty-alg-wrapper-elem", TwistyAlgWrapperElem);
 function oppositeDirection(direction) {
-  return direction === IterationDirection.Forwards ? IterationDirection.Backwards : IterationDirection.Forwards;
+  return direction === 1 /* Forwards */ ? -1 /* Backwards */ : 1 /* Forwards */;
 }
 function updateDirectionByAmount(currentDirection, amount) {
   return amount < 0 ? oppositeDirection(currentDirection) : currentDirection;
 }
 function maybeReverseList(l, direction) {
-  if (direction === IterationDirection.Forwards) {
+  if (direction === 1 /* Forwards */) {
     return l;
   }
   const copy = Array.from(l);
@@ -4511,7 +4522,7 @@ var algToDOMTreeInstance = new AlgToDOMTree();
 var algToDOMTree = algToDOMTreeInstance.traverseAlg.bind(algToDOMTreeInstance);
 var MoveHighlighter = class {
   constructor() {
-    this.moveCharIndexMap = new Map();
+    this.moveCharIndexMap = /* @__PURE__ */ new Map();
     this.currentElem = null;
   }
   addMove(charIndex, elem) {
@@ -4547,7 +4558,7 @@ var TwistyAlgViewer = class extends HTMLElementShim {
     __privateSet(this, _domTree, algToDOMTree(alg, {
       earliestMoveIndex: 0,
       twistyAlgViewer: this,
-      direction: IterationDirection.Forwards
+      direction: 1 /* Forwards */
     }).element);
     this.textContent = "";
     this.appendChild(__privateGet(this, _domTree));
@@ -5149,7 +5160,7 @@ var URLParamUpdater = class {
     __privateSet(this, _prefix, options?.prefix ?? "");
     this.listenToAlgProp(model.alg, "alg");
     this.listenToAlgProp(model.setupAlg, "setup-alg");
-    this.listenToStringSourceProp(model.stickering, "stickering");
+    this.listenToStringSourceProp(model.twistySceneModel.stickering, "stickering");
     this.listenToStringSourceProp(model.setupAnchor, "setup-anchor");
     this.listenToStringOrNoValueProp(model.puzzleIDRequest, "puzzle", NO_VALUE);
     this.listenToStringOrNoValueProp(model.puzzleDescriptionRequest, "puzzle-description", NO_VALUE);