cubing 0.30.0 → 0.31.1

package/dist/esm/twisty/index.js

@@ -18,20 +18,21 @@ import {
   rawRenderPooled,
   setCameraFromOrbitCoordinates,
   setTwistyDebug
-} from "../chunk-KOAJIBEX.js";
+} from "../chunk-52L7V4XF.js";
 import "../chunk-QHWK5RXN.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-C6KMV2PL.js";
+} from "../chunk-G6MFOXW4.js";
 import {
   cube3x3x3,
   puzzles
-} from "../chunk-35OK6TQ4.js";
+} from "../chunk-VTO7WPWK.js";
 import {
-  customPGPuzzleLoader
-} from "../chunk-6FB2XWAK.js";
-import "../chunk-GQBRF4EM.js";
+  customPGPuzzleLoader,
+  getPieceStickeringMask
+} from "../chunk-JCIUBLD5.js";
+import "../chunk-MHP4YJE7.js";
 import {
   Alg,
   AlgBuilder,
@@ -43,8 +44,9 @@ import {
   TraversalUp,
   direct,
   directedGenerator,
-  experimentalAppendMove
-} from "../chunk-ZQT3QSWD.js";
+  experimentalAppendMove,
+  functionFromTraversal
+} from "../chunk-PVI43RDV.js";
 
 // src/cubing/twisty/controllers/AnimationTypes.ts
 function directionScalar(direction) {
@@ -380,42 +382,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 +424,7 @@ var colorMaps = {
   }
 };
 var KPuzzleSVGWrapper = class {
-  constructor(kpuzzle, svgSource, experimentalAppearance) {
+  constructor(kpuzzle, svgSource, experimentalStickeringMask) {
     this.kpuzzle = kpuzzle;
     this.originalColors = {};
     this.gradients = {};
@@ -488,26 +454,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 +607,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 +657,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 +710,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 +723,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 +743,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 +877,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 +953,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(),
@@ -1637,13 +1651,15 @@ async function screenshot(model, options) {
     puzzleLoader,
     visualizationStrategy,
     _stickering,
+    _stickeringMaskRequest,
     _legacyPosition,
     orbitCoordinates
   ] = await Promise.all([
     THREEJS,
     await model.puzzleLoader.get(),
     await model.visualizationStrategy.get(),
-    await model.twistySceneModel.stickering.get(),
+    await model.twistySceneModel.stickeringRequest.get(),
+    await model.twistySceneModel.stickeringMaskRequest.get(),
     await model.legacyPosition.get(),
     await model.twistySceneModel.orbitCoordinates.get()
   ]);
@@ -2075,9 +2091,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();
@@ -2220,10 +2234,7 @@ var LocalSimulMoves = class extends TraversalUp {
     return [];
   }
 };
-var localSimulMovesInstance = new LocalSimulMoves();
-var localSimulMoves = localSimulMovesInstance.traverseAlg.bind(
-  localSimulMovesInstance
-);
+var localSimulMoves = functionFromTraversal(LocalSimulMoves);
 function simulMoves(a) {
   let timestamp = 0;
   const l = localSimulMoves(a).map(
@@ -2440,7 +2451,7 @@ var SimultaneousMoveIndexer = class {
 };
 
 // src/cubing/twisty/controllers/indexer/tree/AlgWalker.ts
-var AlgWalkterDecoration = class {
+var AlgWalkerDecoration = class {
   constructor(moveCount, duration, forward, backward, children = []) {
     this.moveCount = moveCount;
     this.duration = duration;
@@ -2458,7 +2469,7 @@ var DecoratorConstructor = class extends TraversalUp {
     );
     this.cache = {};
     this.identity = kpuzzle.identityTransformation();
-    this.dummyLeaf = new AlgWalkterDecoration(
+    this.dummyLeaf = new AlgWalkerDecoration(
       0,
       0,
       this.identity,
@@ -2482,7 +2493,7 @@ var DecoratorConstructor = class extends TraversalUp {
       }
       child.push(apd);
     }
-    return new AlgWalkterDecoration(
+    return new AlgWalkerDecoration(
       moveCount,
       duration,
       transformation,
@@ -2496,19 +2507,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 AlgWalkerDecoration(
       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);
@@ -2516,7 +2527,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 AlgWalkerDecoration(
+      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) {
@@ -2524,17 +2541,20 @@ 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 AlgWalkerDecoration(
+      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) {
     if (pause.experimentalNISSGrouping) {
       return this.dummyLeaf;
     }
-    return new AlgWalkterDecoration(
+    return new AlgWalkerDecoration(
       1,
       this.durationFn.traverseAlgNode(pause),
       this.identity,
@@ -2550,7 +2570,7 @@ var DecoratorConstructor = class extends TraversalUp {
   mult(apd, n, child) {
     const absn = Math.abs(n);
     const st = apd.forward.selfMultiply(n);
-    return new AlgWalkterDecoration(
+    return new AlgWalkerDecoration(
       apd.moveCount * absn,
       apd.duration * absn,
       st,
@@ -2602,8 +2622,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)) {
@@ -2814,10 +2834,7 @@ var ChunkAlgs = class extends TraversalUp {
     return comment;
   }
 };
-var chunkAlgsInstance = new ChunkAlgs();
-var chunkAlgs = chunkAlgsInstance.traverseAlg.bind(
-  chunkAlgsInstance
-);
+var chunkAlgs = functionFromTraversal(ChunkAlgs);
 
 // src/cubing/twisty/controllers/indexer/tree/TreeAlgIndexer.ts
 var TreeAlgIndexer = class {
@@ -3237,10 +3254,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;
   }
 };
 
@@ -3401,7 +3502,8 @@ var TwistySceneModel = class {
     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
     });
@@ -3414,6 +3516,11 @@ var TwistySceneModel = class {
       puzzleID: twistyPlayerModel.puzzleID,
       strategy: twistyPlayerModel.visualizationStrategy
     });
+    this.stickeringMask = new StickeringMaskProp({
+      stickeringMaskRequest: this.stickeringMaskRequest,
+      stickeringRequest: this.stickeringRequest,
+      puzzleLoader: twistyPlayerModel.puzzleLoader
+    });
   }
 };
 
@@ -3541,7 +3648,7 @@ var TwistyPlayerModel = class {
       alg,
       setup,
       anchor,
-      experimentalStickering
+      experimentalStickeringRequest
     ] = await Promise.all([
       this.viewerLink.get(),
       this.puzzleID.get(),
@@ -3549,7 +3656,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(
@@ -3564,8 +3671,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);
@@ -3688,10 +3798,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);
@@ -3845,6 +3963,7 @@ var twistyPlayerAttributeMap = {
   visualization: "visualization",
   "hint-facelets": "hintFacelets",
   "experimental-stickering": "experimentalStickering",
+  "experimental-stickering-mask-orbits": "experimentalStickeringMaskOrbits",
   background: "background",
   "control-panel": "controlPanel",
   "back-view": "backView",
@@ -3914,13 +4033,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
@@ -3932,15 +4053,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)
     );
@@ -4400,10 +4525,7 @@ var AlgToDOMTree = class extends TraversalDownUp {
     };
   }
 };
-var algToDOMTreeInstance = new AlgToDOMTree();
-var algToDOMTree = algToDOMTreeInstance.traverseAlg.bind(
-  algToDOMTreeInstance
-);
+var algToDOMTree = functionFromTraversal(AlgToDOMTree);
 var MoveHighlighter = class {
   constructor() {
     this.moveCharIndexMap = /* @__PURE__ */ new Map();
@@ -4462,28 +4584,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;
@@ -4595,10 +4723,7 @@ var LeafTokens = class extends TraversalDownUp {
     };
   }
 };
-var leafTokensInstance = new LeafTokens();
-var leafTokens = leafTokensInstance.traverseAlg.bind(
-  leafTokensInstance
-);
+var leafTokens = functionFromTraversal(LeafTokens);
 
 // src/cubing/twisty/views/TwistyAlgEditor/model.ts
 var TwistyAlgEditorValueProp = class extends SimpleTwistyPropSource {
@@ -4819,11 +4944,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;
@@ -4926,61 +5053,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();