cubing 0.29.2 → 0.31.0

package/dist/esm/twisty/index.js

@@ -15,22 +15,24 @@ import {
   TwistyPropSource,
   customElementsShim,
   proxy3D,
+  rawRenderPooled,
   setCameraFromOrbitCoordinates,
   setTwistyDebug
-} from "../chunk-J5KJ2WWA.js";
+} from "../chunk-JQLCWEVU.js";
 import "../chunk-QHWK5RXN.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-NUMCMGLU.js";
+} from "../chunk-J5IQUWXC.js";
 import {
   cube3x3x3,
   puzzles
-} from "../chunk-EOEJDDXN.js";
+} from "../chunk-SNLVO6OQ.js";
 import {
-  customPGPuzzleLoader
-} from "../chunk-YD2TMJI2.js";
-import "../chunk-POCUG6QW.js";
+  customPGPuzzleLoader,
+  getPieceStickeringMask
+} from "../chunk-SYSXHJ4V.js";
+import "../chunk-UAHLC2BK.js";
 import {
   Alg,
   AlgBuilder,
@@ -43,8 +45,7 @@ import {
   direct,
   directedGenerator,
   experimentalAppendMove
-} from "../chunk-7OIUETFU.js";
-import "../chunk-SBZRVSPK.js";
+} from "../chunk-RBZINRTT.js";
 
 // src/cubing/twisty/controllers/AnimationTypes.ts
 function directionScalar(direction) {
@@ -380,42 +381,6 @@ var twistyViewerWrapperCSS = new CSSSource(
 `
 );
 
-// src/cubing/twisty/views/2D/Twisty2DPuzzle.css.ts
-var twisty2DSVGCSS = new CSSSource(
-  `
-:host {
-  width: 384px;
-  height: 256px;
-  display: grid;
-}
-
-.wrapper {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  overflow: hidden;
-}
-
-.svg-wrapper,
-twisty-2d-svg,
-svg {
-  width: 100%;
-  height: 100%;
-  display: grid;
-  min-height: 0;
-}
-
-svg {
-  animation: fade-in 0.25s ease-in;
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-`
-);
-
 // src/cubing/twisty/views/2D/KPuzzleSVGWrapper.ts
 var xmlns = "http://www.w3.org/2000/svg";
 var svgCounter = 0;
@@ -458,7 +423,7 @@ var colorMaps = {
   }
 };
 var KPuzzleSVGWrapper = class {
-  constructor(kpuzzle, svgSource, experimentalAppearance) {
+  constructor(kpuzzle, svgSource, experimentalStickeringMask) {
     this.kpuzzle = kpuzzle;
     this.originalColors = {};
     this.gradients = {};
@@ -488,26 +453,26 @@ var KPuzzleSVGWrapper = class {
           const id = this.elementID(orbitName, idx, orientation);
           const elem = this.elementByID(id);
           let originalColor = elem.style.fill;
-          if (experimentalAppearance) {
+          if (experimentalStickeringMask) {
             (() => {
-              const a = experimentalAppearance.orbits;
+              const a = experimentalStickeringMask.orbits;
               if (!a) {
                 return;
               }
-              const orbitAppearance = a[orbitName];
-              if (!orbitAppearance) {
+              const orbitStickeringMask = a[orbitName];
+              if (!orbitStickeringMask) {
                 return;
               }
-              const pieceAppearance = orbitAppearance.pieces[idx];
-              if (!pieceAppearance) {
+              const pieceStickeringMask = orbitStickeringMask.pieces[idx];
+              if (!pieceStickeringMask) {
                 return;
               }
-              const faceletAppearance = pieceAppearance.facelets[orientation];
-              if (!faceletAppearance) {
+              const faceletStickeringMasks = pieceStickeringMask.facelets[orientation];
+              if (!faceletStickeringMasks) {
                 return;
               }
-              const appearance = typeof faceletAppearance === "string" ? faceletAppearance : faceletAppearance?.appearance;
-              const colorMap = colorMaps[appearance];
+              const stickeringMask = typeof faceletStickeringMasks === "string" ? faceletStickeringMasks : faceletStickeringMasks?.mask;
+              const colorMap = colorMaps[stickeringMask];
               if (colorMap) {
                 originalColor = colorMap[originalColor];
               }
@@ -641,6 +606,42 @@ var KPuzzleSVGWrapper = class {
   }
 };
 
+// src/cubing/twisty/views/2D/Twisty2DPuzzle.css.ts
+var twisty2DSVGCSS = new CSSSource(
+  `
+:host {
+  width: 384px;
+  height: 256px;
+  display: grid;
+}
+
+.wrapper {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  overflow: hidden;
+}
+
+.svg-wrapper,
+twisty-2d-svg,
+svg {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  min-height: 0;
+}
+
+svg {
+  animation: fade-in 0.25s ease-in;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+`
+);
+
 // src/cubing/twisty/views/2D/Twisty2DPuzzle.ts
 var Twisty2DPuzzle = class extends ManagedCustomElement {
   constructor(model, kpuzzle, svgSource, options, puzzleLoader) {
@@ -655,17 +656,22 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     this.#freshListenerManager = new FreshListenerManager();
     this.addCSS(twisty2DSVGCSS);
     this.resetSVG();
-    this.#freshListenerManager.addListener(this.model.puzzleID, (puzzleID) => {
-      if (puzzleLoader?.id !== puzzleID) {
-        this.disconnect();
+    this.#freshListenerManager.addListener(
+      this.model.puzzleID,
+      (puzzleID) => {
+        if (puzzleLoader?.id !== puzzleID) {
+          this.disconnect();
+        }
       }
-    });
+    );
     this.#freshListenerManager.addListener(
       this.model.legacyPosition,
       this.onPositionChange.bind(this)
     );
-    if (this.options?.experimentalStickering) {
-      this.experimentalSetStickering(this.options.experimentalStickering);
+    if (this.options?.experimentalStickeringMask) {
+      this.experimentalSetStickeringMask(
+        this.options.experimentalStickeringMask
+      );
     }
   }
   #cachedPosition;
@@ -703,16 +709,10 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
   scheduleRender() {
     this.scheduler.requestAnimFrame();
   }
-  experimentalSetStickering(stickering) {
-    (async () => {
-      if (!this.puzzleLoader?.appearance) {
-        return;
-      }
-      const appearance = await this.puzzleLoader.appearance(stickering);
-      this.resetSVG(appearance);
-    })();
+  experimentalSetStickeringMask(stickeringMask) {
+    this.resetSVG(stickeringMask);
   }
-  resetSVG(appearance) {
+  resetSVG(stickeringMask) {
     if (this.svgWrapper) {
       this.removeElement(this.svgWrapper.wrapperElement);
     }
@@ -722,7 +722,7 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     this.svgWrapper = new KPuzzleSVGWrapper(
       this.kpuzzle,
       this.svgSource,
-      appearance
+      stickeringMask
     );
     this.addElement(this.svgWrapper.wrapperElement);
     if (this.#cachedPosition) {
@@ -742,9 +742,14 @@ var Twisty2DPuzzleWrapper = class {
     this.puzzleLoader = puzzleLoader;
     this.effectiveVisualization = effectiveVisualization;
     this.twisty2DPuzzle();
-    this.#freshListenerManager.addListener(this.model.twistySceneModel.stickering, async (stickering) => {
-      (await this.twisty2DPuzzle()).experimentalSetStickering(stickering);
-    });
+    this.#freshListenerManager.addListener(
+      this.model.twistySceneModel.stickeringMask,
+      async (stickeringMask) => {
+        (await this.twisty2DPuzzle()).experimentalSetStickeringMask(
+          stickeringMask
+        );
+      }
+    );
   }
   #freshListenerManager = new FreshListenerManager();
   disconnect() {
@@ -871,56 +876,61 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
     this.puzzleLoader = puzzleLoader;
     this.visualizationStrategy = visualizationStrategy;
     this.twisty3DPuzzle();
-    this.#freshListenerManager.addListener(this.model.puzzleLoader, (puzzleLoader2) => {
-      if (this.puzzleLoader.id !== puzzleLoader2.id) {
-        this.disconnect();
+    this.#freshListenerManager.addListener(
+      this.model.puzzleLoader,
+      (puzzleLoader2) => {
+        if (this.puzzleLoader.id !== puzzleLoader2.id) {
+          this.disconnect();
+        }
       }
-    });
-    this.#freshListenerManager.addListener(this.model.legacyPosition, async (position) => {
-      try {
-        (await this.twisty3DPuzzle()).onPositionChange(position);
+    );
+    this.#freshListenerManager.addListener(
+      this.model.legacyPosition,
+      async (position) => {
+        try {
+          (await this.twisty3DPuzzle()).onPositionChange(position);
+          this.scheduleRender();
+        } catch (e) {
+          this.disconnect();
+        }
+      }
+    );
+    this.#freshListenerManager.addListener(
+      this.model.twistySceneModel.hintFacelet,
+      async (hintFaceletStyle) => {
+        (await this.twisty3DPuzzle()).experimentalUpdateOptions({
+          hintFacelets: hintFaceletStyle === "auto" ? "floating" : hintFaceletStyle
+        });
         this.scheduleRender();
-      } catch (e) {
-        this.disconnect();
       }
-    });
-    this.#freshListenerManager.addListener(this.model.twistySceneModel.hintFacelet, async (hintFaceletStyle) => {
-      (await this.twisty3DPuzzle()).experimentalUpdateOptions({
-        hintFacelets: hintFaceletStyle === "auto" ? "floating" : hintFaceletStyle
-      });
-      this.scheduleRender();
-    });
-    this.#freshListenerManager.addListener(this.model.twistySceneModel.foundationDisplay, async (foundationDisplay) => {
-      (await this.twisty3DPuzzle()).experimentalUpdateOptions({
-        showFoundation: foundationDisplay !== "none"
-      });
-      this.scheduleRender();
-    });
-    this.#freshListenerManager.addListener(this.model.twistySceneModel.stickering, async (stickering) => {
-      if ("setStickering" in await this.twisty3DPuzzle()) {
-        (await this.twisty3DPuzzle()).setStickering(stickering);
+    );
+    this.#freshListenerManager.addListener(
+      this.model.twistySceneModel.foundationDisplay,
+      async (foundationDisplay) => {
+        (await this.twisty3DPuzzle()).experimentalUpdateOptions({
+          showFoundation: foundationDisplay !== "none"
+        });
         this.scheduleRender();
-      } else {
-        if ("appearance" in this.puzzleLoader) {
-          const [twisty3D, appearancePromise] = await Promise.all([
-            this.twisty3DPuzzle(),
-            this.puzzleLoader.appearance(stickering ?? "full")
-          ]);
-          twisty3D.experimentalSetAppearance(appearancePromise);
-          this.scheduleRender();
-        }
       }
-    });
+    );
+    this.#freshListenerManager.addListener(
+      this.model.twistySceneModel.stickeringMask,
+      async (stickeringMask) => {
+        const twisty3D = await this.twisty3DPuzzle();
+        twisty3D.setStickeringMask(stickeringMask);
+        this.scheduleRender();
+      }
+    );
     this.#freshListenerManager.addMultiListener3(
       [
-        this.model.twistySceneModel.stickering,
+        this.model.twistySceneModel.stickeringMask,
         this.model.twistySceneModel.foundationStickerSprite,
         this.model.twistySceneModel.hintStickerSprite
       ],
       async (inputs) => {
         if ("experimentalUpdateTexture" in await this.twisty3DPuzzle()) {
           (await this.twisty3DPuzzle()).experimentalUpdateTexture(
-            inputs[0] === "picture",
+            inputs[0].specialBehaviour === "picture",
             inputs[1],
             inputs[2]
           );
@@ -942,16 +952,19 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
     return this.#cachedTwisty3DPuzzle ?? (this.#cachedTwisty3DPuzzle = (async () => {
       const proxyPromise = proxy3D();
       if (this.puzzleLoader.id === "3x3x3" && this.visualizationStrategy === "Cube3D") {
-        const [foundationSprite, hintSprite, experimentalStickering] = await Promise.all([
+        const [foundationSprite, hintSprite, experimentalStickeringMask] = await Promise.all([
           this.model.twistySceneModel.foundationStickerSprite.get(),
           this.model.twistySceneModel.hintStickerSprite.get(),
-          this.model.twistySceneModel.stickering.get()
+          this.model.twistySceneModel.stickeringMask.get()
         ]);
-        return (await proxyPromise).cube3DShim(() => this.schedulable.scheduleRender(), {
-          foundationSprite,
-          hintSprite,
-          experimentalStickering
-        });
+        return (await proxyPromise).cube3DShim(
+          () => this.schedulable.scheduleRender(),
+          {
+            foundationSprite,
+            hintSprite,
+            experimentalStickeringMask
+          }
+        );
       } else {
         const [hintFacelets, foundationSprite, hintSprite] = await Promise.all([
           this.model.twistySceneModel.hintFacelet.get(),
@@ -981,7 +994,10 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
       return;
     }
     const targets = puzzle.experimentalGetControlTargets();
-    const [raycaster] = await Promise.all([raycasterPromise]);
+    const [raycaster, movePressCancelOptions] = await Promise.all([
+      raycasterPromise,
+      this.model.twistySceneModel.movePressCancelOptions.get()
+    ]);
     const intersects = raycaster.intersectObjects(targets);
     if (intersects.length > 0) {
       const closestMove = puzzle.getClosestMoveToAxis(
@@ -990,8 +1006,7 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
       );
       if (closestMove) {
         this.model.experimentalAddMove(closestMove.move, {
-          coalesce: true,
-          mod: closestMove.order
+          cancel: movePressCancelOptions
         });
       } else {
         console.info("Skipping move!");
@@ -1630,33 +1645,41 @@ customElementsShim.define("twisty-scrubber", TwistyScrubber);
 // src/cubing/twisty/views/screenshot.ts
 var cachedCamera = null;
 async function screenshot(model, options) {
+  const [
+    { PerspectiveCamera, Scene },
+    puzzleLoader,
+    visualizationStrategy,
+    _stickering,
+    _stickeringMaskRequest,
+    _legacyPosition,
+    orbitCoordinates
+  ] = await Promise.all([
+    THREEJS,
+    await model.puzzleLoader.get(),
+    await model.visualizationStrategy.get(),
+    await model.twistySceneModel.stickeringRequest.get(),
+    await model.twistySceneModel.stickeringMaskRequest.get(),
+    await model.legacyPosition.get(),
+    await model.twistySceneModel.orbitCoordinates.get()
+  ]);
   const width = options?.width ?? 2048;
   const height = options?.height ?? 2048;
   const aspectRatio = width / height;
   const camera = cachedCamera ?? (cachedCamera = await (async () => {
-    return new (await THREEJS).PerspectiveCamera(20, aspectRatio, 0.1, 20);
+    return new PerspectiveCamera(20, aspectRatio, 0.1, 20);
   })());
-  const scene = new (await THREEJS).Scene();
+  const scene = new Scene();
   const twisty3DWrapper = new Twisty3DPuzzleWrapper(
     model,
     { scheduleRender: () => {
     } },
-    await model.puzzleLoader.get(),
-    await model.visualizationStrategy.get()
+    puzzleLoader,
+    visualizationStrategy
   );
-  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.twistySceneModel.orbitCoordinates.get();
   await setCameraFromOrbitCoordinates(camera, orbitCoordinates);
-  const renderer = new (await THREEJS).WebGLRenderer({
-    antialias: true,
-    alpha: true
-  });
-  renderer.setSize(width, height);
-  renderer.render(scene, camera);
-  const dataURL = renderer.domElement.toDataURL();
+  const rendererCanvas = await rawRenderPooled(width, height, scene, camera);
+  const dataURL = rendererCanvas.toDataURL();
   const defaultFilename = await getDefaultFilename(model);
   return {
     dataURL,
@@ -2067,9 +2090,7 @@ var SimpleAlgIndexer = class {
     return i;
   }
   stateAtIndex(index) {
-    return this.kpuzzle.startState().applyTransformation(
-      this.transformationAtIndex(index)
-    );
+    return this.kpuzzle.startState().applyTransformation(this.transformationAtIndex(index));
   }
   transformationAtIndex(index) {
     let state = this.kpuzzle.identityTransformation();
@@ -2488,19 +2509,19 @@ var DecoratorConstructor = class extends TraversalUp {
   }
   traverseMove(move) {
     const key = move.toString();
-    let r = this.cache[key];
-    if (r) {
-      return r;
+    let r2 = this.cache[key];
+    if (r2) {
+      return r2;
     }
     const transformation = this.kpuzzle.moveToTransformation(move);
-    r = new AlgWalkterDecoration(
+    r2 = new AlgWalkterDecoration(
       1,
       this.durationFn.traverseAlgNode(move),
       transformation,
       transformation.invert()
     );
-    this.cache[key] = r;
-    return r;
+    this.cache[key] = r2;
+    return r2;
   }
   traverseCommutator(commutator) {
     const decA = this.traverseAlg(commutator.A);
@@ -2508,7 +2529,13 @@ var DecoratorConstructor = class extends TraversalUp {
     const AB = decA.forward.applyTransformation(decB.forward);
     const ApBp = decA.backward.applyTransformation(decB.backward);
     const ABApBp = AB.applyTransformation(ApBp);
-    const dec = new AlgWalkterDecoration(2 * (decA.moveCount + decB.moveCount), 2 * (decA.duration + decB.duration), ABApBp, ABApBp.invert(), [decA, decB]);
+    const dec = new AlgWalkterDecoration(
+      2 * (decA.moveCount + decB.moveCount),
+      2 * (decA.duration + decB.duration),
+      ABApBp,
+      ABApBp.invert(),
+      [decA, decB]
+    );
     return this.mult(dec, 1, [dec, decA, decB]);
   }
   traverseConjugate(conjugate) {
@@ -2516,10 +2543,13 @@ var DecoratorConstructor = class extends TraversalUp {
     const decB = this.traverseAlg(conjugate.B);
     const AB = decA.forward.applyTransformation(decB.forward);
     const ABAp = AB.applyTransformation(decA.backward);
-    const dec = new AlgWalkterDecoration(2 * decA.moveCount + decB.moveCount, 2 * decA.duration + decB.duration, ABAp, ABAp.invert(), [
-      decA,
-      decB
-    ]);
+    const dec = new AlgWalkterDecoration(
+      2 * decA.moveCount + decB.moveCount,
+      2 * decA.duration + decB.duration,
+      ABAp,
+      ABAp.invert(),
+      [decA, decB]
+    );
     return this.mult(dec, 1, [dec, decA, decB]);
   }
   traversePause(pause) {
@@ -2594,8 +2624,8 @@ var AlgWalker = class extends TraversalDownUp {
     this.moveDuration = 0;
     this.back = false;
     this.st = this.kpuzzle.identityTransformation();
-    const r = this.algOrAlgNode.is(Alg) ? this.traverseAlg(this.algOrAlgNode, this.root) : this.traverseAlgNode(this.algOrAlgNode, this.root);
-    return r;
+    const r2 = this.algOrAlgNode.is(Alg) ? this.traverseAlg(this.algOrAlgNode, this.root) : this.traverseAlgNode(this.algOrAlgNode, this.root);
+    return r2;
   }
   traverseAlg(alg, wd) {
     if (!this.firstcheck(wd)) {
@@ -3229,10 +3259,94 @@ var SpriteProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/display/StickeringProp.ts
-var StickeringProp = class extends SimpleTwistyPropSource {
+// src/cubing/twisty/model/props/puzzle/display/StickeringMaskProp.ts
+var r = {
+  facelets: ["regular", "regular", "regular", "regular", "regular"]
+};
+async function fullStickeringMask(puzzleLoader) {
+  const { definition } = await puzzleLoader.kpuzzle();
+  const fullStickeringMask2 = { orbits: {} };
+  for (const [orbitName, orbitDef] of Object.entries(definition.orbits)) {
+    fullStickeringMask2.orbits[orbitName] = {
+      pieces: new Array(orbitDef.numPieces).fill(r)
+    };
+  }
+  return fullStickeringMask2;
+}
+var StickeringMaskProp = class extends TwistyPropDerived {
   getDefaultValue() {
-    return "full";
+    return { orbits: {} };
+  }
+  async derive(inputs) {
+    if (inputs.stickeringMaskRequest) {
+      return inputs.stickeringMaskRequest;
+    }
+    if (inputs.stickeringRequest === "picture") {
+      return {
+        specialBehaviour: "picture",
+        orbits: {}
+      };
+    }
+    return inputs.puzzleLoader.stickeringMask?.(
+      inputs.stickeringRequest ?? "full"
+    ) ?? fullStickeringMask(inputs.puzzleLoader);
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/display/parseSerializedStickeringMask.ts
+var charMap = {
+  "-": "Regular" /* Regular */,
+  D: "Dim" /* Dim */,
+  I: "Ignored" /* Ignored */,
+  X: "Invisible" /* Invisible */,
+  O: "IgnoreNonPrimary" /* IgnoreNonPrimary */,
+  P: "PermuteNonPrimary" /* PermuteNonPrimary */,
+  o: "Ignoriented" /* Ignoriented */,
+  "?": "OrientationWithoutPermutation" /* OrientationWithoutPermutation */,
+  "@": "Regular" /* Regular */
+};
+function parseSerializedStickeringMask(serializedStickeringMask) {
+  const stickeringMask = {
+    orbits: {}
+  };
+  const serializedOrbits = serializedStickeringMask.split(",");
+  for (const serializedOrbit of serializedOrbits) {
+    const [orbitName, serializedOrbitPieces, ...rest] = serializedOrbit.split(":");
+    if (rest.length > 0) {
+      throw new Error(
+        `Invalid serialized orbit stickering mask (too many colons): \`${serializedOrbit}\``
+      );
+    }
+    const pieces = [];
+    stickeringMask.orbits[orbitName] = { pieces };
+    for (const char of serializedOrbitPieces) {
+      const pieceStickering = charMap[char];
+      pieces.push(getPieceStickeringMask(pieceStickering));
+    }
+  }
+  return stickeringMask;
+}
+
+// src/cubing/twisty/model/props/puzzle/display/StickeringMaskRequestProp.ts
+var StickeringMaskRequestProp = class extends TwistyPropSource {
+  getDefaultValue() {
+    return null;
+  }
+  derive(input) {
+    if (input === null) {
+      return null;
+    } else if (typeof input === "string") {
+      return parseSerializedStickeringMask(input);
+    } else {
+      return input;
+    }
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/display/StickeringRequestProp.ts
+var StickeringRequestProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return null;
   }
 };
 
@@ -3243,6 +3357,13 @@ var DragInputProp = class extends SimpleTwistyPropSource {
   }
 };
 
+// src/cubing/twisty/model/props/puzzle/state/MovePressCancelOptions.ts
+var MovePressCancelOptions = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return {};
+  }
+};
+
 // src/cubing/twisty/model/props/puzzle/state/MovePressInputProp.ts
 var MovePressInputProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
@@ -3384,8 +3505,10 @@ var TwistySceneModel = class {
     this.hintStickerSpriteURL = new URLProp();
     this.latitudeLimit = new LatitudeLimitProp();
     this.movePressInput = new MovePressInputProp();
+    this.movePressCancelOptions = new MovePressCancelOptions();
     this.orbitCoordinatesRequest = new OrbitCoordinatesRequestProp();
-    this.stickering = new StickeringProp();
+    this.stickeringMaskRequest = new StickeringMaskRequestProp();
+    this.stickeringRequest = new StickeringRequestProp();
     this.foundationStickerSprite = new SpriteProp({
       spriteURL: this.foundationStickerSpriteURL
     });
@@ -3398,6 +3521,11 @@ var TwistySceneModel = class {
       puzzleID: twistyPlayerModel.puzzleID,
       strategy: twistyPlayerModel.visualizationStrategy
     });
+    this.stickeringMask = new StickeringMaskProp({
+      stickeringMaskRequest: this.stickeringMaskRequest,
+      stickeringRequest: this.stickeringRequest,
+      puzzleLoader: twistyPlayerModel.puzzleLoader
+    });
   }
 };
 
@@ -3525,7 +3653,7 @@ var TwistyPlayerModel = class {
       alg,
       setup,
       anchor,
-      experimentalStickering
+      experimentalStickeringRequest
     ] = await Promise.all([
       this.viewerLink.get(),
       this.puzzleID.get(),
@@ -3533,7 +3661,7 @@ var TwistyPlayerModel = class {
       this.alg.get(),
       this.setupAlg.get(),
       this.setupAnchor.get(),
-      this.twistySceneModel.stickering.get()
+      this.twistySceneModel.stickeringRequest.get()
     ]);
     const isExplorer = viewerLink === "experimental-twizzle-explorer";
     const url = new URL(
@@ -3548,8 +3676,11 @@ var TwistyPlayerModel = class {
     if (anchor !== "start") {
       url.searchParams.set("setup-anchor", anchor);
     }
-    if (experimentalStickering !== "full") {
-      url.searchParams.set("experimental-stickering", experimentalStickering);
+    if (experimentalStickeringRequest !== "full" && experimentalStickeringRequest !== null) {
+      url.searchParams.set(
+        "experimental-stickering",
+        experimentalStickeringRequest
+      );
     }
     if (isExplorer && puzzleDescription !== NO_VALUE) {
       url.searchParams.set("puzzle-description", puzzleDescription);
@@ -3558,7 +3689,7 @@ var TwistyPlayerModel = class {
     }
     return url.toString();
   }
-  experimentalAddAlgLeaf(algLeaf, options = {}) {
+  experimentalAddAlgLeaf(algLeaf, options) {
     const maybeMove = algLeaf.as(Move);
     if (maybeMove) {
       this.experimentalAddMove(maybeMove, options);
@@ -3573,14 +3704,17 @@ var TwistyPlayerModel = class {
       );
     }
   }
-  experimentalAddMove(flexibleMove, options = {}) {
+  experimentalAddMove(flexibleMove, options) {
     const move = typeof flexibleMove === "string" ? new Move(flexibleMove) : flexibleMove;
     this.alg.set(
       (async () => {
-        const alg = (await this.alg.get()).alg;
+        const [{ alg }, puzzleLoader] = await Promise.all([
+          this.alg.get(),
+          this.puzzleLoader.get()
+        ]);
         const newAlg = experimentalAppendMove(alg, move, {
-          coalesce: options?.coalesce,
-          mod: options?.mod
+          ...options,
+          puzzleLoader
         });
         this.timestampRequest.set("end");
         this.catchUpMove.set({
@@ -3591,6 +3725,27 @@ var TwistyPlayerModel = class {
       })()
     );
   }
+  experimentalRemoveFinalChild() {
+    this.alg.set(
+      (async () => {
+        const alg = (await this.alg.get()).alg;
+        const children = Array.from(alg.childAlgNodes());
+        const [finalChild] = children.splice(-1);
+        if (!finalChild) {
+          return alg;
+        }
+        this.timestampRequest.set("end");
+        const finalChildMove = finalChild.as(Move);
+        if (finalChildMove) {
+          this.catchUpMove.set({
+            move: finalChildMove.invert(),
+            amount: 0
+          });
+        }
+        return new Alg(children);
+      })()
+    );
+  }
 };
 
 // src/cubing/twisty/views/TwistyPlayerSettable.ts
@@ -3648,10 +3803,18 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
     throw err("hintFacelets");
   }
   set experimentalStickering(stickering) {
-    this.experimentalModel.twistySceneModel.stickering.set(stickering);
+    this.experimentalModel.twistySceneModel.stickeringRequest.set(stickering);
   }
   get experimentalStickering() {
-    throw err("stickering");
+    throw err("experimentalStickering");
+  }
+  set experimentalStickeringMaskOrbits(stickeringMask) {
+    this.experimentalModel.twistySceneModel.stickeringMaskRequest.set(
+      stickeringMask
+    );
+  }
+  get experimentalStickeringMaskOrbits() {
+    throw err("experimentalStickeringMaskOrbits");
   }
   set backView(backView) {
     this.experimentalModel.backView.set(backView);
@@ -3707,6 +3870,14 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
   get experimentalMovePressInput() {
     throw err("experimentalMovePressInput");
   }
+  set experimentalMovePressCancelOptions(movePressCancelOptions) {
+    this.experimentalModel.twistySceneModel.movePressCancelOptions.set(
+      movePressCancelOptions
+    );
+  }
+  get experimentalMovePressCancelOptions() {
+    throw err("experimentalMovePressCancelOptions");
+  }
   set cameraLatitude(latitude) {
     this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({
       latitude
@@ -3797,6 +3968,7 @@ var twistyPlayerAttributeMap = {
   visualization: "visualization",
   "hint-facelets": "hintFacelets",
   "experimental-stickering": "experimentalStickering",
+  "experimental-stickering-mask-orbits": "experimentalStickeringMaskOrbits",
   background: "background",
   "control-panel": "controlPanel",
   "back-view": "backView",
@@ -3817,6 +3989,9 @@ var twistyPlayerAttributeMap = {
 var configKeys = Object.fromEntries(
   Object.values(twistyPlayerAttributeMap).map((s) => [s, true])
 );
+var propOnly = {
+  experimentalMovePressCancelOptions: true
+};
 var TwistyPlayer = class extends TwistyPlayerSettable {
   constructor(config = {}) {
     super();
@@ -3841,7 +4016,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     this.#initial3DVisualizationWrapper = new InitialValueTracker();
     this.#visualizationStrategy = null;
     for (const [propName, value] of Object.entries(config)) {
-      if (!configKeys[propName]) {
+      if (!(configKeys[propName] || propOnly[propName])) {
         console.warn(`Invalid config passed to TwistyPlayer: ${propName}`);
         break;
       }
@@ -3863,13 +4038,15 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     );
     this.addElement(this.#errorElem).classList.add("error-elem");
     this.#errorElem.textContent = "Error";
-    this.experimentalModel.userVisibleErrorTracker.addFreshListener((userVisibleError) => {
-      const errorString = userVisibleError.errors[0] ?? null;
-      this.contentWrapper.classList.toggle("error", !!errorString);
-      if (errorString) {
-        this.#errorElem.textContent = errorString;
+    this.experimentalModel.userVisibleErrorTracker.addFreshListener(
+      (userVisibleError) => {
+        const errorString = userVisibleError.errors[0] ?? null;
+        this.contentWrapper.classList.toggle("error", !!errorString);
+        if (errorString) {
+          this.#errorElem.textContent = errorString;
+        }
       }
-    });
+    );
     const scrubber = new TwistyScrubber(
       this.experimentalModel,
       this.controller
@@ -3881,15 +4058,19 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
       this
     );
     this.contentWrapper.appendChild(this.buttons);
-    this.experimentalModel.twistySceneModel.background.addFreshListener((backgroundTheme) => {
-      this.contentWrapper.classList.toggle(
-        "checkered",
-        backgroundTheme !== "none"
-      );
-    });
-    this.experimentalModel.controlPanel.addFreshListener((controlPanel) => {
-      this.#controlsManager.setValue(controlPanel);
-    });
+    this.experimentalModel.twistySceneModel.background.addFreshListener(
+      (backgroundTheme) => {
+        this.contentWrapper.classList.toggle(
+          "checkered",
+          backgroundTheme !== "none"
+        );
+      }
+    );
+    this.experimentalModel.controlPanel.addFreshListener(
+      (controlPanel) => {
+        this.#controlsManager.setValue(controlPanel);
+      }
+    );
     this.experimentalModel.visualizationStrategy.addFreshListener(
       this.#setVisualizationWrapper.bind(this)
     );
@@ -3991,10 +4172,10 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
   togglePlay(play) {
     this.controller.togglePlay(play);
   }
-  experimentalAddMove(flexibleMove, options = {}) {
+  experimentalAddMove(flexibleMove, options) {
     this.experimentalModel.experimentalAddMove(flexibleMove, options);
   }
-  experimentalAddAlgLeaf(algLeaf, options = {}) {
+  experimentalAddAlgLeaf(algLeaf, options) {
     this.experimentalModel.experimentalAddAlgLeaf(algLeaf, options);
   }
   static get observedAttributes() {
@@ -4004,6 +4185,9 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     }
     return observed;
   }
+  experimentalRemoveFinalChild() {
+    this.experimentalModel.experimentalRemoveFinalChild();
+  }
   attributeChangedCallback(attributeName, _oldValue, newValue) {
     if (attributeName.startsWith(DATA_ATTRIBUTE_PREFIX)) {
       attributeName = attributeName.slice(DATA_ATTRIBUTE_PREFIX.length);
@@ -4408,28 +4592,34 @@ var TwistyAlgViewer = class extends HTMLElementShim {
       throw new Error("clearing twistyPlayer is not supported");
     }
     this.#twistyPlayer = twistyPlayer;
-    this.#twistyPlayer.experimentalModel.alg.addFreshListener((algWithIssues) => {
-      this.setAlg(algWithIssues.alg);
-    });
+    this.#twistyPlayer.experimentalModel.alg.addFreshListener(
+      (algWithIssues) => {
+        this.setAlg(algWithIssues.alg);
+      }
+    );
     const sourceAlg = (await this.#twistyPlayer.experimentalModel.alg.get()).alg;
     const parsedAlg = "startCharIndex" in sourceAlg ? sourceAlg : Alg.fromString(sourceAlg.toString());
     this.setAlg(parsedAlg);
-    twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener((currentMoveInfo) => {
-      let moveInfo = currentMoveInfo.currentMoves[0];
-      moveInfo ?? (moveInfo = currentMoveInfo.movesStarting[0]);
-      moveInfo ?? (moveInfo = currentMoveInfo.movesFinishing[0]);
-      if (!moveInfo) {
-        this.highlighter.set(null);
-      } else {
-        const mainCurrentMove = moveInfo.move;
-        this.highlighter.set(mainCurrentMove);
+    twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener(
+      (currentMoveInfo) => {
+        let moveInfo = currentMoveInfo.currentMoves[0];
+        moveInfo ?? (moveInfo = currentMoveInfo.movesStarting[0]);
+        moveInfo ?? (moveInfo = currentMoveInfo.movesFinishing[0]);
+        if (!moveInfo) {
+          this.highlighter.set(null);
+        } else {
+          const mainCurrentMove = moveInfo.move;
+          this.highlighter.set(mainCurrentMove);
+        }
       }
-    });
-    twistyPlayer.experimentalModel.detailedTimelineInfo.addFreshListener((detailedTimelineInfo) => {
-      if (detailedTimelineInfo.timestamp !== this.lastClickTimestamp) {
-        this.lastClickTimestamp = null;
+    );
+    twistyPlayer.experimentalModel.detailedTimelineInfo.addFreshListener(
+      (detailedTimelineInfo) => {
+        if (detailedTimelineInfo.timestamp !== this.lastClickTimestamp) {
+          this.lastClickTimestamp = null;
+        }
       }
-    });
+    );
   }
   async jumpToIndex(index, offsetIntoMove) {
     const twistyPlayer = this.#twistyPlayer;
@@ -4765,11 +4955,13 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     }
     this.#twistyPlayerProp = options?.twistyPlayerProp ?? "alg";
     if (options?.twistyPlayerProp === "alg") {
-      this.model.leafToHighlight.addFreshListener((highlightInfo) => {
-        if (highlightInfo) {
-          this.highlightLeaf(highlightInfo.leafInfo.leaf);
+      this.model.leafToHighlight.addFreshListener(
+        (highlightInfo) => {
+          if (highlightInfo) {
+            this.highlightLeaf(highlightInfo.leafInfo.leaf);
+          }
         }
-      });
+      );
     }
   }
   #textarea;
@@ -4872,61 +5064,65 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
       this.algString = this.#algProp ? (await this.#algProp.get()).alg.toString() : "";
     })();
     if (this.#twistyPlayerProp === "alg") {
-      this.#twistyPlayer?.experimentalModel.puzzleAlg.addFreshListener((algWithIssues) => {
-        if (algWithIssues.issues.errors.length === 0) {
-          this.setAlgIssueClassForPuzzle(
-            algWithIssues.issues.warnings.length === 0 ? "none" : "warning"
-          );
-          const newAlg = algWithIssues.alg;
-          const oldAlg = Alg.fromString(this.algString);
-          if (!newAlg.isIdentical(oldAlg)) {
-            this.algString = newAlg.toString();
-            this.onInput();
+      this.#twistyPlayer?.experimentalModel.puzzleAlg.addFreshListener(
+        (algWithIssues) => {
+          if (algWithIssues.issues.errors.length === 0) {
+            this.setAlgIssueClassForPuzzle(
+              algWithIssues.issues.warnings.length === 0 ? "none" : "warning"
+            );
+            const newAlg = algWithIssues.alg;
+            const oldAlg = Alg.fromString(this.algString);
+            if (!newAlg.isIdentical(oldAlg)) {
+              this.algString = newAlg.toString();
+              this.onInput();
+            } else {
+            }
           } else {
+            this.setAlgIssueClassForPuzzle("error");
           }
-        } else {
-          this.setAlgIssueClassForPuzzle("error");
         }
-      });
-      this.model.leafToHighlight.addFreshListener(async (highlightInfo) => {
-        if (highlightInfo === null) {
-          return;
-        }
-        const [indexer, timestampRequest] = await Promise.all([
-          await twistyPlayer.experimentalModel.indexer.get(),
-          await twistyPlayer.experimentalModel.timestampRequest.get()
-        ]);
-        if (timestampRequest === "opposite-anchor" && !this.#onInputHasFired) {
-          return;
-        }
-        const moveStartTimestamp = indexer.indexToMoveStartTimestamp(
-          highlightInfo.leafInfo.idx
-        );
-        const duration = indexer.moveDuration(highlightInfo.leafInfo.idx);
-        let newTimestamp;
-        switch (highlightInfo.where) {
-          case "before": {
-            newTimestamp = moveStartTimestamp;
-            break;
+      );
+      this.model.leafToHighlight.addFreshListener(
+        async (highlightInfo) => {
+          if (highlightInfo === null) {
+            return;
           }
-          case "start":
-          case "inside": {
-            newTimestamp = moveStartTimestamp + duration / 4;
-            break;
+          const [indexer, timestampRequest] = await Promise.all([
+            await twistyPlayer.experimentalModel.indexer.get(),
+            await twistyPlayer.experimentalModel.timestampRequest.get()
+          ]);
+          if (timestampRequest === "opposite-anchor" && !this.#onInputHasFired) {
+            return;
           }
-          case "end":
-          case "after": {
-            newTimestamp = moveStartTimestamp + duration;
-            break;
+          const moveStartTimestamp = indexer.indexToMoveStartTimestamp(
+            highlightInfo.leafInfo.idx
+          );
+          const duration = indexer.moveDuration(highlightInfo.leafInfo.idx);
+          let newTimestamp;
+          switch (highlightInfo.where) {
+            case "before": {
+              newTimestamp = moveStartTimestamp;
+              break;
+            }
+            case "start":
+            case "inside": {
+              newTimestamp = moveStartTimestamp + duration / 4;
+              break;
+            }
+            case "end":
+            case "after": {
+              newTimestamp = moveStartTimestamp + duration;
+              break;
+            }
+            default:
+              console.log("invalid where");
+              throw new Error("Invalid where!");
+          }
+          if (!this.debugNeverRequestTimestamp) {
+            twistyPlayer.experimentalModel.timestampRequest.set(newTimestamp);
           }
-          default:
-            console.log("invalid where");
-            throw new Error("Invalid where!");
-        }
-        if (!this.debugNeverRequestTimestamp) {
-          twistyPlayer.experimentalModel.timestampRequest.set(newTimestamp);
         }
-      });
+      );
       twistyPlayer.experimentalModel.currentLeavesSimplified.addFreshListener(
         async (currentLeavesSimplified) => {
           const indexer = await twistyPlayer.experimentalModel.indexer.get();