cubing 0.29.1 → 0.30.0

package/dist/esm/twisty/index.js

@@ -15,22 +15,23 @@ import {
   TwistyPropSource,
   customElementsShim,
   proxy3D,
+  rawRenderPooled,
   setCameraFromOrbitCoordinates,
   setTwistyDebug
-} from "../chunk-XT3R2ENM.js";
-import "../chunk-OX6O2ZO5.js";
+} from "../chunk-KOAJIBEX.js";
+import "../chunk-QHWK5RXN.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-ZNAYJGVL.js";
+} from "../chunk-C6KMV2PL.js";
 import {
   cube3x3x3,
   puzzles
-} from "../chunk-XRZBPKES.js";
+} from "../chunk-35OK6TQ4.js";
 import {
   customPGPuzzleLoader
-} from "../chunk-U2ONHTIX.js";
-import "../chunk-XU5ILFX5.js";
+} from "../chunk-6FB2XWAK.js";
+import "../chunk-GQBRF4EM.js";
 import {
   Alg,
   AlgBuilder,
@@ -43,8 +44,7 @@ import {
   direct,
   directedGenerator,
   experimentalAppendMove
-} from "../chunk-NI7U4XAZ.js";
-import "../chunk-SBZRVSPK.js";
+} from "../chunk-ZQT3QSWD.js";
 
 // src/cubing/twisty/controllers/AnimationTypes.ts
 function directionScalar(direction) {
@@ -329,7 +329,7 @@ var TwistyPlayerController = class {
 // src/cubing/twisty/model/props/viewer/ControlPanelProp.ts
 var controlsLocations = {
   "bottom-row": true,
-  "none": true
+  none: true
 };
 var ControlPanelProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
@@ -338,7 +338,8 @@ var ControlPanelProp = class extends SimpleTwistyPropSource {
 };
 
 // src/cubing/twisty/views/TwistyViewerWrapper.css.ts
-var twistyViewerWrapperCSS = new CSSSource(`
+var twistyViewerWrapperCSS = new CSSSource(
+  `
 :host {
   width: 384px;
   height: 256px;
@@ -376,10 +377,12 @@ var twistyViewerWrapperCSS = new CSSSource(`
   grid-row: 1 / 2;
   grid-column: 2 / 3;
 }
-`);
+`
+);
 
 // src/cubing/twisty/views/2D/Twisty2DPuzzle.css.ts
-var twisty2DSVGCSS = new CSSSource(`
+var twisty2DSVGCSS = new CSSSource(
+  `
 :host {
   width: 384px;
   height: 256px;
@@ -410,47 +413,48 @@ svg {
   from { opacity: 0; }
   to { opacity: 1; }
 }
-`);
+`
+);
 
 // src/cubing/twisty/views/2D/KPuzzleSVGWrapper.ts
 var xmlns = "http://www.w3.org/2000/svg";
 var svgCounter = 0;
 function nextSVGID() {
   svgCounter += 1;
-  return "svg" + svgCounter.toString();
+  return `svg${svgCounter.toString()}`;
 }
 var colorMaps = {
   dim: {
-    "white": "#dddddd",
-    "orange": "#884400",
-    "limegreen": "#008800",
-    "red": "#660000",
+    white: "#dddddd",
+    orange: "#884400",
+    limegreen: "#008800",
+    red: "#660000",
     "rgb(34, 102, 255)": "#000088",
-    "yellow": "#888800"
+    yellow: "#888800"
   },
   oriented: {
-    "white": "#44ddcc",
-    "orange": "#44ddcc",
-    "limegreen": "#44ddcc",
-    "red": "#44ddcc",
+    white: "#44ddcc",
+    orange: "#44ddcc",
+    limegreen: "#44ddcc",
+    red: "#44ddcc",
     "rgb(34, 102, 255)": "#44ddcc",
-    "yellow": "#44ddcc"
+    yellow: "#44ddcc"
   },
   ignored: {
-    "white": "#444444",
-    "orange": "#444444",
-    "limegreen": "#444444",
-    "red": "#444444",
+    white: "#444444",
+    orange: "#444444",
+    limegreen: "#444444",
+    red: "#444444",
     "rgb(34, 102, 255)": "#444444",
-    "yellow": "#444444"
+    yellow: "#444444"
   },
   invisible: {
-    "white": "#00000000",
-    "orange": "#00000000",
-    "limegreen": "#00000000",
-    "red": "#00000000",
+    white: "#00000000",
+    orange: "#00000000",
+    limegreen: "#00000000",
+    red: "#00000000",
     "rgb(34, 102, 255)": "#00000000",
-    "yellow": "#00000000"
+    yellow: "#00000000"
   }
 };
 var KPuzzleSVGWrapper = class {
@@ -596,10 +600,10 @@ var KPuzzleSVGWrapper = class {
               "stop-color",
               this.originalColors[fromCur]
             );
-            this.gradients[id].children[1].setAttribute("offset", `100%`);
-            this.gradients[id].children[2].setAttribute("offset", `100%`);
-            this.gradients[id].children[3].setAttribute("offset", `100%`);
-            this.gradients[id].children[4].setAttribute("offset", `100%`);
+            this.gradients[id].children[1].setAttribute("offset", "100%");
+            this.gradients[id].children[2].setAttribute("offset", "100%");
+            this.gradients[id].children[3].setAttribute("offset", "100%");
+            this.gradients[id].children[4].setAttribute("offset", "100%");
           }
         }
       }
@@ -611,7 +615,7 @@ var KPuzzleSVGWrapper = class {
       "radialGradient"
     );
     grad.setAttribute("id", `grad-${this.svgID}-${id}`);
-    grad.setAttribute("r", `70.7107%`);
+    grad.setAttribute("r", "70.7107%");
     const stopDefs = [
       { offset: 0, color: originalColor },
       { offset: 0, color: originalColor },
@@ -630,10 +634,10 @@ var KPuzzleSVGWrapper = class {
     return grad;
   }
   elementID(orbitName, idx, orientation) {
-    return orbitName + "-l" + idx + "-o" + orientation;
+    return `${orbitName}-l${idx}-o${orientation}`;
   }
   elementByID(id) {
-    return this.wrapperElement.querySelector("#" + id);
+    return this.wrapperElement.querySelector(`#${id}`);
   }
 };
 
@@ -651,14 +655,11 @@ 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)
@@ -741,12 +742,9 @@ 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.stickering, async (stickering) => {
+      (await this.twisty2DPuzzle()).experimentalSetStickering(stickering);
+    });
   }
   #freshListenerManager = new FreshListenerManager();
   disconnect() {
@@ -873,61 +871,46 @@ 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.legacyPosition,
-      async (position) => {
-        try {
-          (await this.twisty3DPuzzle()).onPositionChange(position);
-          this.scheduleRender();
-        } catch (e) {
-          this.disconnect();
-        }
+    this.#freshListenerManager.addListener(this.model.puzzleLoader, (puzzleLoader2) => {
+      if (this.puzzleLoader.id !== puzzleLoader2.id) {
+        this.disconnect();
       }
-    );
-    this.#freshListenerManager.addListener(
-      this.model.twistySceneModel.hintFacelet,
-      async (hintFaceletStyle) => {
-        (await this.twisty3DPuzzle()).experimentalUpdateOptions({
-          hintFacelets: hintFaceletStyle === "auto" ? "floating" : hintFaceletStyle
-        });
+    });
+    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.foundationDisplay,
-      async (foundationDisplay) => {
-        (await this.twisty3DPuzzle()).experimentalUpdateOptions({
-          showFoundation: foundationDisplay !== "none"
-        });
+    });
+    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.scheduleRender();
-      }
-    );
-    this.#freshListenerManager.addListener(
-      this.model.twistySceneModel.stickering,
-      async (stickering) => {
-        if ("setStickering" in await this.twisty3DPuzzle()) {
-          (await this.twisty3DPuzzle()).setStickering(stickering);
+      } else {
+        if ("appearance" in this.puzzleLoader) {
+          const [twisty3D, appearancePromise] = await Promise.all([
+            this.twisty3DPuzzle(),
+            this.puzzleLoader.appearance(stickering ?? "full")
+          ]);
+          twisty3D.experimentalSetAppearance(appearancePromise);
           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.addMultiListener3(
       [
         this.model.twistySceneModel.stickering,
@@ -964,14 +947,11 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
           this.model.twistySceneModel.hintStickerSprite.get(),
           this.model.twistySceneModel.stickering.get()
         ]);
-        return (await proxyPromise).cube3DShim(
-          () => this.schedulable.scheduleRender(),
-          {
-            foundationSprite,
-            hintSprite,
-            experimentalStickering
-          }
-        );
+        return (await proxyPromise).cube3DShim(() => this.schedulable.scheduleRender(), {
+          foundationSprite,
+          hintSprite,
+          experimentalStickering
+        });
       } else {
         const [hintFacelets, foundationSprite, hintSprite] = await Promise.all([
           this.model.twistySceneModel.hintFacelet.get(),
@@ -1001,7 +981,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(
@@ -1010,8 +993,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!");
@@ -1159,7 +1141,8 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
 customElementsShim.define("twisty-3d-scene-wrapper", Twisty3DSceneWrapper);
 
 // src/cubing/twisty/views/control-panel/TwistyButtons.css.ts
-var buttonGridCSS = new CSSSource(`
+var buttonGridCSS = new CSSSource(
+  `
 :host {
   width: 384px;
   height: 24px;
@@ -1188,8 +1171,10 @@ var buttonGridCSS = new CSSSource(`
   width: inherit;
   height: inherit;
 }
-`);
-var buttonCSS = new CSSSource(`
+`
+);
+var buttonCSS = new CSSSource(
+  `
 :host:not([hidden]) {
   display: grid;
 }
@@ -1277,7 +1262,8 @@ button.svg-exit-fullscreen {
 button.svg-twizzle-tw {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODY0IiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzk3LjU4MSAxNTEuMTh2NTcuMDg0aC04OS43MDN2MjQwLjM1MmgtNjYuOTU1VjIwOC4yNjRIMTUxLjIydi01Ny4wODNoMjQ2LjM2MXptNTQuMzEgNzEuNjc3bDcuNTEyIDMzLjY5MmMyLjcxOCAxMi4xNiA1LjU4IDI0LjY4IDguNTg0IDM3LjU1NWEyMTgwLjc3NSAyMTgwLjc3NSAwIDAwOS40NDIgMzguODQzIDEyNjYuMyAxMjY2LjMgMCAwMDEwLjA4NiAzNy41NTVjMy43Mi0xMi41OSA3LjM2OC0yNS40NjYgMTAuOTQ1LTM4LjYyOCAzLjU3Ni0xMy4xNjIgNy4wMS0yNi4xMSAxMC4zLTM4Ljg0M2w1Ljc2OS0yMi40NTZjMS4yNDgtNC44ODcgMi40NzItOS43MDUgMy42NzQtMTQuNDU1IDMuMDA0LTExLjg3NSA1LjY1MS0yMi45NjIgNy45NC0zMy4yNjNoNDYuMzU0bDIuMzg0IDEwLjU2M2EyMDAwLjc3IDIwMDAuNzcgMCAwMDMuOTM1IDE2LjgyOGw2LjcxMSAyNy43MWMxLjIxMyA0Ljk1NiAyLjQ1IDkuOTggMy43MDkgMTUuMDczYTMxMTkuNzc3IDMxMTkuNzc3IDAgMDA5Ljg3MSAzOC44NDMgMTI0OS4yMjcgMTI0OS4yMjcgMCAwMDEwLjczIDM4LjYyOCAxOTA3LjYwNSAxOTA3LjYwNSAwIDAwMTAuMzAxLTM3LjU1NSAxMzk3Ljk0IDEzOTcuOTQgMCAwMDkuNjU3LTM4Ljg0M2w0LjQtMTkuMDQ2Yy43MTUtMy4xMyAxLjQyMS02LjIzNiAyLjExOC05LjMyMWw5LjU3Ny00Mi44OGg2Ni41MjZhMjk4OC43MTggMjk4OC43MTggMCAwMS0xOS41MjkgNjYuMzExbC01LjcyOCAxOC40ODJhMzIzNy40NiAzMjM3LjQ2IDAgMDEtMTQuMDE1IDQzLjc1MmMtNi40MzggMTkuNi0xMi43MzMgMzcuNjk4LTE4Ljg4NSA1NC4yOTRsLTMuMzA2IDguODI1Yy00Ljg4NCAxMi44OTgtOS40MzMgMjQuMjYzLTEzLjY0NyAzNC4wOTVoLTQ5Ljc4N2E4NDE3LjI4OSA4NDE3LjI4OSAwIDAxLTIxLjAzMS02NC44MDkgMTI4OC42ODYgMTI4OC42ODYgMCAwMS0xOC44ODUtNjQuODEgMTk3Mi40NDQgMTk3Mi40NDQgMCAwMS0xOC4yNCA2NC44MSAyNTc5LjQxMiAyNTc5LjQxMiAwIDAxLTIwLjM4OCA2NC44MWgtNDkuNzg3Yy00LjY4Mi0xMC45MjYtOS43Mi0yMy43NDMtMTUuMTEtMzguNDUxbC0xLjYyOS00LjQ3Yy01LjI1OC0xNC41MjEtMTAuNjgtMzAuMTkyLTE2LjI2Ni00Ny4wMTRsLTIuNDA0LTcuMjhjLTYuNDM4LTE5LjYtMTMuMDItNDAuMzQ0LTE5Ljc0My02Mi4yMzRhMjk4OC43MDcgMjk4OC43MDcgMCAwMS0xOS41MjktNjYuMzExaDY3LjM4NXoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==");
 }
-`);
+`
+);
 
 // src/cubing/twisty/views/document.ts
 var globalSafeDocument = typeof document === "undefined" ? null : document;
@@ -1321,7 +1307,7 @@ var buttonIcons = [
 var ButtonAppearanceProp = class extends TwistyPropDerived {
   derive(inputs) {
     const buttonAppearances = {
-      "fullscreen": {
+      fullscreen: {
         enabled: fullscreenEnabled,
         icon: document.fullscreenElement === null ? "enter-fullscreen" : "exit-fullscreen",
         title: "Enter fullscreen"
@@ -1364,7 +1350,7 @@ var ButtonAppearanceProp = class extends TwistyPropDerived {
 
 // src/cubing/twisty/views/control-panel/TwistyButtons.ts
 var buttonCommands = {
-  "fullscreen": true,
+  fullscreen: true,
   "jump-to-start": true,
   "play-step-backwards": true,
   "play-pause": true,
@@ -1397,33 +1383,40 @@ var TwistyButtons = class extends ManagedCustomElement {
   }
   #onCommand(command) {
     switch (command) {
-      case "fullscreen":
+      case "fullscreen": {
         this.onFullscreenButton();
         break;
-      case "jump-to-start":
+      }
+      case "jump-to-start": {
         this.controller?.jumpToStart({ flash: true });
         break;
-      case "play-step-backwards":
+      }
+      case "play-step-backwards": {
         this.controller?.animationController.play({
           direction: -1 /* Backwards */,
           untilBoundary: "move" /* Move */
         });
         break;
-      case "play-pause":
+      }
+      case "play-pause": {
         this.controller?.togglePlay();
         break;
-      case "play-step":
+      }
+      case "play-step": {
         this.controller?.animationController.play({
           direction: 1 /* Forwards */,
           untilBoundary: "move" /* Move */
         });
         break;
-      case "jump-to-end":
+      }
+      case "jump-to-end": {
         this.controller?.jumpToEnd({ flash: true });
         break;
-      case "twizzle-link":
+      }
+      case "twizzle-link": {
         this.controller?.visitTwizzleLink();
         break;
+      }
       default:
         throw new Error("Missing command");
     }
@@ -1480,7 +1473,8 @@ var TwistyButton = class extends ManagedCustomElement {
 customElementsShim.define("twisty-button", TwistyButton);
 
 // src/cubing/twisty/views/control-panel/TwistyScrubber.css.ts
-var twistyScrubberCSS = new CSSSource(`
+var twistyScrubberCSS = new CSSSource(
+  `
 :host {
   width: 384px;
   height: 16px;
@@ -1500,7 +1494,8 @@ var twistyScrubberCSS = new CSSSource(`
 input:not(:disabled) {
   cursor: ew-resize;
 }
-`);
+`
+);
 
 // src/cubing/twisty/views/control-panel/TwistyScrubber.ts
 var SLOW_DOWN_SCRUBBING = false;
@@ -1542,9 +1537,10 @@ var lastPreval = 0;
 var scaling = false;
 var currentClickNum = 0;
 var TwistyScrubber = class extends ManagedCustomElement {
-  constructor(model) {
+  constructor(model, controller) {
     super();
     this.model = model;
+    this.controller = controller;
   }
   async onDetailedTimelineInfo(detailedTimelineInfo) {
     const inputElem = await this.inputElem();
@@ -1567,6 +1563,7 @@ var TwistyScrubber = class extends ManagedCustomElement {
         this.onDetailedTimelineInfo.bind(this)
       );
       elem.addEventListener("input", this.onInput.bind(this));
+      elem.addEventListener("keydown", this.onKeypress.bind(this));
       return elem;
     })());
   }
@@ -1580,6 +1577,24 @@ var TwistyScrubber = class extends ManagedCustomElement {
     this.model?.playingInfo.set({ playing: false });
     this.model?.timestampRequest.set(value);
   }
+  onKeypress(e) {
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowRight": {
+        this.controller?.animationController.play({
+          direction: e.key === "ArrowLeft" ? -1 /* Backwards */ : 1 /* Forwards */,
+          untilBoundary: "move" /* Move */
+        });
+        e.preventDefault();
+        break;
+      }
+      case " ": {
+        this.controller?.togglePlay();
+        e.preventDefault();
+        break;
+      }
+    }
+  }
   async slowDown(e, inputElem) {
     if (!SLOW_DOWN_SCRUBBING) {
       return;
@@ -1617,33 +1632,39 @@ 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,
+    _legacyPosition,
+    orbitCoordinates
+  ] = await Promise.all([
+    THREEJS,
+    await model.puzzleLoader.get(),
+    await model.visualizationStrategy.get(),
+    await model.twistySceneModel.stickering.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,
@@ -1657,7 +1678,7 @@ async function getDefaultFilename(model) {
     model.puzzleID.get(),
     model.alg.get()
   ]);
-  return `[${puzzleID}]${algWithIssues.alg.experimentalNumChildAlgNodes() === 0 ? "" : " " + algWithIssues.alg.toString()}`;
+  return `[${puzzleID}]${algWithIssues.alg.experimentalNumChildAlgNodes() === 0 ? "" : ` ${algWithIssues.alg.toString()}`}`;
 }
 function downloadURL(url, name, extension = "png") {
   const a = document.createElement("a");
@@ -1667,7 +1688,8 @@ function downloadURL(url, name, extension = "png") {
 }
 
 // src/cubing/twisty/views/TwistyPlayer.css.ts
-var twistyPlayerCSS = new CSSSource(`
+var twistyPlayerCSS = new CSSSource(
+  `
 :host {
   width: 384px;
   height: 256px;
@@ -1736,7 +1758,8 @@ twisty-scrubber {
 .wrapper.error .error-elem {
   display: grid;
 }
-`);
+`
+);
 
 // src/cubing/twisty/model/props/general/ArbitraryStringProp.ts
 var ArbitraryStringProp = class extends SimpleTwistyPropSource {
@@ -1786,7 +1809,7 @@ function algWithIssuesFromString(s) {
     const alg = Alg.fromString(s);
     const warnings = [];
     if (alg.toString() !== s) {
-      warnings.push(`Alg is non-canonical!`);
+      warnings.push("Alg is non-canonical!");
     }
     return {
       alg,
@@ -2052,7 +2075,9 @@ 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();
@@ -2347,16 +2372,18 @@ var SimultaneousMoveIndexer = class {
             endTimestamp: leafWithRange.end
           };
           switch (fraction) {
-            case 0:
+            case 0: {
               movesStarting.push(currentMove);
               break;
-            case 1:
+            }
+            case 1: {
               if (moveFinished) {
                 movesFinished.push(currentMove);
               } else {
                 movesFinishing.push(currentMove);
               }
               break;
+            }
             default:
               currentMoves.push(currentMove);
               latestStart = Math.max(latestStart, leafWithRange.start);
@@ -2489,13 +2516,7 @@ 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) {
@@ -2503,13 +2524,10 @@ 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) {
@@ -3085,9 +3103,9 @@ var TempoScaleProp = class extends TwistyPropSource {
 
 // src/cubing/twisty/model/props/timeline/TimestampRequestProp.ts
 var smartTimestamps = {
-  "start": true,
-  "end": true,
-  "anchor": true,
+  start: true,
+  end: true,
+  anchor: true,
   "opposite-anchor": true
 };
 var TimestampRequestProp = class extends SimpleTwistyPropSource {
@@ -3113,7 +3131,7 @@ var TimestampRequestProp = class extends SimpleTwistyPropSource {
 
 // src/cubing/twisty/model/props/viewer/BackViewProp.ts
 var backViewLayouts = {
-  "none": true,
+  none: true,
   "side-by-side": true,
   "top-right": true
 };
@@ -3233,6 +3251,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() {
@@ -3374,6 +3399,7 @@ 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.foundationStickerSprite = new SpriteProp({
@@ -3548,7 +3574,7 @@ var TwistyPlayerModel = class {
     }
     return url.toString();
   }
-  experimentalAddAlgLeaf(algLeaf, options = {}) {
+  experimentalAddAlgLeaf(algLeaf, options) {
     const maybeMove = algLeaf.as(Move);
     if (maybeMove) {
       this.experimentalAddMove(maybeMove, options);
@@ -3563,14 +3589,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({
@@ -3581,6 +3610,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
@@ -3697,20 +3747,34 @@ 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 });
+    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({
+      latitude
+    });
   }
   get cameraLatitude() {
     throw err("cameraLatitude");
   }
   set cameraLongitude(longitude) {
-    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({ longitude });
+    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({
+      longitude
+    });
   }
   get cameraLongitude() {
     throw err("cameraLongitude");
   }
   set cameraDistance(distance) {
-    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({ distance });
+    this.experimentalModel.twistySceneModel.orbitCoordinatesRequest.set({
+      distance
+    });
   }
   get cameraDistance() {
     throw err("cameraDistance");
@@ -3773,15 +3837,15 @@ var ExperimentalGetters = class {
 // src/cubing/twisty/views/TwistyPlayer.ts
 var DATA_ATTRIBUTE_PREFIX = "data-";
 var twistyPlayerAttributeMap = {
-  "alg": "alg",
+  alg: "alg",
   "experimental-setup-alg": "experimentalSetupAlg",
   "experimental-setup-anchor": "experimentalSetupAnchor",
-  "puzzle": "puzzle",
+  puzzle: "puzzle",
   "experimental-puzzle-description": "experimentalPuzzleDescription",
-  "visualization": "visualization",
+  visualization: "visualization",
   "hint-facelets": "hintFacelets",
   "experimental-stickering": "experimentalStickering",
-  "background": "background",
+  background: "background",
   "control-panel": "controlPanel",
   "back-view": "backView",
   "viewer-link": "viewerLink",
@@ -3801,6 +3865,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();
@@ -3825,7 +3892,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;
       }
@@ -3847,16 +3914,17 @@ 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
     );
-    const scrubber = new TwistyScrubber(this.experimentalModel);
     this.contentWrapper.appendChild(scrubber);
     this.buttons = new TwistyButtons(
       this.experimentalModel,
@@ -3864,19 +3932,15 @@ 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)
     );
@@ -3904,17 +3968,19 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
       let newWrapper;
       switch (strategy) {
         case "2D":
-        case "experimental-2D-LL":
+        case "experimental-2D-LL": {
           newWrapper = new Twisty2DSceneWrapper(
             this.experimentalModel.twistySceneModel,
             strategy
           );
           break;
+        }
         case "Cube3D":
-        case "PG3D":
+        case "PG3D": {
           newWrapper = new Twisty3DSceneWrapper(this.experimentalModel);
           this.#initial3DVisualizationWrapper.handleNewValue(newWrapper);
           break;
+        }
         default:
           throw new Error("Invalid visualization");
       }
@@ -3976,10 +4042,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() {
@@ -3989,6 +4055,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);
@@ -4025,7 +4094,8 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
 customElementsShim.define("twisty-player", TwistyPlayer);
 
 // src/cubing/twisty/views/TwistyAlgViewer.css.ts
-var twistyAlgViewerCSS = new CSSSource(`
+var twistyAlgViewerCSS = new CSSSource(
+  `
 :host {
   display: inline;
 }
@@ -4051,7 +4121,8 @@ twisty-alg-leaf-elem.twisty-alg-comment {
   padding-right: 0.1em;
   border-radius: 0.1em;
 }
-`);
+`
+);
 
 // src/cubing/twisty/views/TwistyAlgViewer.ts
 var DEFAULT_OFFSET_MS = 250;
@@ -4204,7 +4275,7 @@ var AlgToDOMTree = class extends TraversalDownUp {
         })
       );
     }
-    element.addString(")" + grouping.experimentalRepetitionSuffix);
+    element.addString(`)${grouping.experimentalRepetitionSuffix}`);
     element.flushQueue();
     return {
       moveCount: moveCount * Math.abs(grouping.amount),
@@ -4391,34 +4462,28 @@ 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;
@@ -4632,7 +4697,8 @@ var TwistyAlgEditorModel = class {
 };
 
 // src/cubing/twisty/views/TwistyAlgEditor/TwistyAlgEditor.css.ts
-var twistyAlgEditorCSS = new CSSSource(`
+var twistyAlgEditorCSS = new CSSSource(
+  `
 :host {
   width: 384px;
   display: grid;
@@ -4701,7 +4767,8 @@ textarea {
   border: 1px solid red;
   background: rgba(255, 0, 0, 0.1);
 }
-`);
+`
+);
 
 // src/cubing/twisty/views/TwistyAlgEditor/TwistyAlgEditor.ts
 var ATTRIBUTE_FOR_TWISTY_PLAYER = "for-twisty-player";
@@ -4752,13 +4819,11 @@ 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;
@@ -4813,7 +4878,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     this.#textareaClassListValidForPuzzleManager.setValue(issues);
   }
   #padSuffix(s) {
-    return s.endsWith("\n") ? s + " " : s;
+    return s.endsWith("\n") ? `${s} ` : s;
   }
   #highlightedLeaf;
   highlightLeaf(leaf) {
@@ -4861,62 +4926,61 @@ 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();
-            } else {
-            }
+      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 {
-            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;
+      });
+      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;
           }
-          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!");
+          case "start":
+          case "inside": {
+            newTimestamp = moveStartTimestamp + duration / 4;
+            break;
           }
-          if (!this.debugNeverRequestTimestamp) {
-            twistyPlayer.experimentalModel.timestampRequest.set(newTimestamp);
+          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);
+        }
+      });
       twistyPlayer.experimentalModel.currentLeavesSimplified.addFreshListener(
         async (currentLeavesSimplified) => {
           const indexer = await twistyPlayer.experimentalModel.indexer.get();
@@ -4941,16 +5005,18 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
         this.twistyPlayer = elem;
         return;
       }
-      case ATTRIBUTE_PLACEHOLDER:
+      case ATTRIBUTE_PLACEHOLDER: {
         this.placeholder = newValue;
         return;
-      case ATTRIBUTE_TWISTY_PLAYER_PROP:
+      }
+      case ATTRIBUTE_TWISTY_PLAYER_PROP: {
         if (this.#twistyPlayer) {
           console.log("cannot set prop");
           throw new Error("cannot set prop after twisty player");
         }
         this.#twistyPlayerProp = newValue;
         return;
+      }
     }
   }
   static get observedAttributes() {
@@ -4964,7 +5030,8 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
 customElementsShim.define("twisty-alg-editor", TwistyAlgEditor);
 
 // src/cubing/twisty/views/twizzle/TwizzleLink.css.ts
-var twizzleLinkCSS = new CSSSource(`
+var twizzleLinkCSS = new CSSSource(
+  `
 .wrapper {
   background: rgb(255, 245, 235);
   display: grid;
@@ -4997,20 +5064,21 @@ twisty-player {
 twisty-player + .heading {
   padding-top: 0.5em;
 }
-`);
+`
+);
 
 // src/cubing/twisty/views/twizzle/url-params.ts
 function getConfigFromURL(prefix = "", url = location.href) {
   const paramMapping = {
-    "alg": "alg",
+    alg: "alg",
     "setup-alg": "experimental-setup-alg",
     "setup-anchor": "experimental-setup-anchor",
-    "puzzle": "puzzle",
-    "stickering": "experimental-stickering",
+    puzzle: "puzzle",
+    stickering: "experimental-stickering",
     "puzzle-description": "experimental-puzzle-description",
-    "title": "experimental-title",
+    title: "experimental-title",
     "video-url": "experimental-video-url",
-    "competition": "experimental-competition-id"
+    competition: "experimental-competition-id"
   };
   const params = new URL(url).searchParams;
   const config = {};