cubing 0.24.0-pre5 → 0.24.3

package/dist/esm/twisty/index.js

@@ -10,7 +10,7 @@ import {
   TwistyPropDerived,
   TwistyPropSource,
   proxy3D
-} from "../chunk-27MCV5LC.js";
+} from "../chunk-ZA7DHVIG.js";
 import {
   countAnimatedLeaves,
   countMoves
@@ -20,7 +20,7 @@ import {
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-54HT7B4M.js";
+} from "../chunk-IS5V7Y6I.js";
 import "../chunk-B27E6KTE.js";
 import {
   Alg,
@@ -144,8 +144,8 @@ var CatchUpHelper = class {
     this.scheduler.requestAnimFrame();
     const delta = (timestamp - this.lastTimestamp) / this.catchUpMs;
     this.lastTimestamp = timestamp;
-    this.model.catchUpMoveProp.set((async () => {
-      const previousCatchUpMove = await this.model.catchUpMoveProp.get();
+    this.model.catchUpMove.set((async () => {
+      const previousCatchUpMove = await this.model.catchUpMove.get();
       if (previousCatchUpMove.move === null) {
         return previousCatchUpMove;
       }
@@ -153,7 +153,7 @@ var CatchUpHelper = class {
       if (amount >= 1) {
         this.pendingFrame = true;
         this.stop();
-        this.model.timestampRequestProp.set("end");
+        this.model.timestampRequest.set("end");
         return {
           move: null,
           amount: 0
@@ -179,9 +179,9 @@ var TwistyAnimationController = class {
     __privateAdd(this, _animFrameEffectiveTimestampStaleDropper, new StaleDropper());
     this.model = model;
     this.lastTimestampPromise = __privateMethod(this, _effectiveTimestampMilliseconds, effectiveTimestampMilliseconds_fn).call(this);
-    this.model.playingInfoProp.addFreshListener(this.onPlayingProp.bind(this));
+    this.model.playingInfo.addFreshListener(this.onPlayingProp.bind(this));
     this.catchUpHelper = new CatchUpHelper(this.model);
-    this.model.catchUpMoveProp.addFreshListener(this.onCatchUpMoveProp.bind(this));
+    this.model.catchUpMove.addFreshListener(this.onCatchUpMoveProp.bind(this));
   }
   async onPlayingProp(playingInfo) {
     if (playingInfo.playing !== this.playing) {
@@ -196,14 +196,14 @@ var TwistyAnimationController = class {
     this.scheduler.requestAnimFrame();
   }
   jumpToStart(options) {
-    this.model.timestampRequestProp.set("start");
+    this.model.timestampRequest.set("start");
     this.pause();
     if (options?.flash) {
       this.delegate.flash();
     }
   }
   jumpToEnd(options) {
-    this.model.timestampRequestProp.set("end");
+    this.model.timestampRequest.set("end");
     this.pause();
     if (options?.flash) {
       this.delegate.flash();
@@ -218,18 +218,18 @@ var TwistyAnimationController = class {
   }
   async play(options) {
     const direction = options?.direction ?? Direction.Forwards;
-    const coarseTimelineInfo = await this.model.coarseTimelineInfoProp.get();
+    const coarseTimelineInfo = await this.model.coarseTimelineInfo.get();
     if (options?.autoSkipToOtherEndIfStartingAtBoundary ?? true) {
       if (direction === Direction.Forwards && coarseTimelineInfo.atEnd) {
-        this.model.timestampRequestProp.set("start");
+        this.model.timestampRequest.set("start");
         this.delegate.flash();
       }
       if (direction === Direction.Backwards && coarseTimelineInfo.atStart) {
-        this.model.timestampRequestProp.set("end");
+        this.model.timestampRequest.set("end");
         this.delegate.flash();
       }
     }
-    this.model.playingInfoProp.set({
+    this.model.playingInfo.set({
       playing: true,
       direction,
       untilBoundary: options?.untilBoundary ?? BoundaryType.EntireTimeline,
@@ -243,7 +243,7 @@ var TwistyAnimationController = class {
   pause() {
     this.playing = false;
     this.scheduler.cancelAnimFrame();
-    this.model.playingInfoProp.set({
+    this.model.playingInfo.set({
       playing: false,
       untilBoundary: BoundaryType.EntireTimeline
     });
@@ -254,11 +254,11 @@ var TwistyAnimationController = class {
     }
     const lastDatestamp = this.lastDatestamp;
     const freshenerResult = await __privateGet(this, _animFrameEffectiveTimestampStaleDropper).queue(Promise.all([
-      this.model.playingInfoProp.get(),
+      this.model.playingInfo.get(),
       this.lastTimestampPromise,
-      this.model.timeRangeProp.get(),
-      this.model.tempoScaleProp.get(),
-      this.model.currentMoveInfoProp.get()
+      this.model.timeRange.get(),
+      this.model.tempoScale.get(),
+      this.model.currentMoveInfo.get()
     ]));
     const [playingInfo, lastTimestamp, timeRange, tempoScale, currentMoveInfo] = freshenerResult;
     if (!playingInfo.playing) {
@@ -288,7 +288,7 @@ var TwistyAnimationController = class {
           newTimestamp = end;
         }
         this.playing = false;
-        this.model.playingInfoProp.set({
+        this.model.playingInfo.set({
           playing: false
         });
       }
@@ -302,19 +302,19 @@ var TwistyAnimationController = class {
           newTimestamp = start;
         }
         this.playing = false;
-        this.model.playingInfoProp.set({
+        this.model.playingInfo.set({
           playing: false
         });
       }
     }
     this.lastDatestamp = frameDatestamp;
     this.lastTimestampPromise = Promise.resolve(newTimestamp);
-    this.model.timestampRequestProp.set(newSmartTimestampRequest ?? newTimestamp);
+    this.model.timestampRequest.set(newSmartTimestampRequest ?? newTimestamp);
   }
 };
 _effectiveTimestampMilliseconds = new WeakSet();
 effectiveTimestampMilliseconds_fn = async function() {
-  return (await this.model.detailedTimelineInfoProp.get()).timestamp;
+  return (await this.model.detailedTimelineInfo.get()).timestamp;
 };
 _animFrameEffectiveTimestampStaleDropper = new WeakMap();
 
@@ -395,13 +395,15 @@ var ManagedCustomElement = class extends HTMLElementShim {
     this.shadow.appendChild(this.contentWrapper);
   }
   addCSS(cssSource) {
-    if (__privateGet(this, _cssSourceMap).get(cssSource)) {
-      return;
+    const existing = __privateGet(this, _cssSourceMap).get(cssSource);
+    if (existing) {
+      return existing;
     }
     const cssElem = document.createElement("style");
     cssElem.textContent = cssSource.getAsString();
     __privateGet(this, _cssSourceMap).set(cssSource, cssElem);
     this.shadow.appendChild(cssElem);
+    return cssElem;
   }
   removeCSS(cssSource) {
     const cssElem = __privateGet(this, _cssSourceMap).get(cssSource);
@@ -688,12 +690,12 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     __privateAdd(this, _freshListenerManager, new FreshListenerManager());
     this.addCSS(twisty2DSVGCSS);
     this.resetSVG();
-    __privateGet(this, _freshListenerManager).addListener(this.model.puzzleIDProp, (puzzleID) => {
+    __privateGet(this, _freshListenerManager).addListener(this.model.puzzleID, (puzzleID) => {
       if (puzzleLoader?.id !== puzzleID) {
         this.disconnect();
       }
     });
-    __privateGet(this, _freshListenerManager).addListener(this.model.legacyPositionProp, this.onPositionChange.bind(this));
+    __privateGet(this, _freshListenerManager).addListener(this.model.legacyPosition, this.onPositionChange.bind(this));
     if (this.options?.experimentalStickering) {
       this.experimentalSetStickering(this.options.experimentalStickering);
     }
@@ -763,7 +765,7 @@ var Twisty2DPuzzleWrapper = class {
     __privateAdd(this, _freshListenerManager2, new FreshListenerManager());
     __privateAdd(this, _cachedTwisty2DPuzzle, null);
     this.twisty2DPuzzle();
-    __privateGet(this, _freshListenerManager2).addListener(this.model.stickeringProp, async (stickering) => {
+    __privateGet(this, _freshListenerManager2).addListener(this.model.stickering, async (stickering) => {
       (await this.twisty2DPuzzle()).experimentalSetStickering(stickering);
     });
   }
@@ -799,7 +801,7 @@ var Twisty2DSceneWrapper = class extends ManagedCustomElement {
   async connectedCallback() {
     this.addCSS(twistyViewerWrapperCSS);
     if (this.model) {
-      __privateGet(this, _freshListenerManager3).addListener(this.model.puzzleLoaderProp, this.onPuzzleLoader.bind(this));
+      __privateGet(this, _freshListenerManager3).addListener(this.model.puzzleLoader, this.onPuzzleLoader.bind(this));
     }
   }
   async scene() {
@@ -872,12 +874,12 @@ var Twisty3DPuzzleWrapper = class {
     __privateAdd(this, _freshListenerManager4, new FreshListenerManager());
     __privateAdd(this, _cachedTwisty3DPuzzle, null);
     this.twisty3DPuzzle();
-    __privateGet(this, _freshListenerManager4).addListener(this.model.puzzleLoaderProp, (puzzleLoader2) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.puzzleLoader, (puzzleLoader2) => {
       if (this.puzzleLoader.id !== puzzleLoader2.id) {
         this.disconnect();
       }
     });
-    __privateGet(this, _freshListenerManager4).addListener(this.model.legacyPositionProp, async (position) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.legacyPosition, async (position) => {
       try {
         (await this.twisty3DPuzzle()).onPositionChange(position);
         this.scheduleRender();
@@ -885,19 +887,19 @@ var Twisty3DPuzzleWrapper = class {
         this.disconnect();
       }
     });
-    __privateGet(this, _freshListenerManager4).addListener(this.model.hintFaceletProp, async (hintFaceletStyle) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.hintFacelet, async (hintFaceletStyle) => {
       (await this.twisty3DPuzzle()).experimentalUpdateOptions({
         hintFacelets: hintFaceletStyle === "auto" ? "floating" : hintFaceletStyle
       });
       this.scheduleRender();
     });
-    __privateGet(this, _freshListenerManager4).addListener(this.model.foundationDisplayProp, async (foundationDisplay) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.foundationDisplay, async (foundationDisplay) => {
       (await this.twisty3DPuzzle()).experimentalUpdateOptions({
         showFoundation: foundationDisplay !== "none"
       });
       this.scheduleRender();
     });
-    __privateGet(this, _freshListenerManager4).addListener(this.model.stickeringProp, async (stickering) => {
+    __privateGet(this, _freshListenerManager4).addListener(this.model.stickering, async (stickering) => {
       if ("setStickering" in await this.twisty3DPuzzle()) {
         (await this.twisty3DPuzzle()).setStickering(stickering);
         this.scheduleRender();
@@ -941,7 +943,7 @@ var Twisty3DPuzzleWrapper = class {
         const [foundationSprite, hintSprite, experimentalStickering] = await Promise.all([
           this.model.foundationStickerSprite.get(),
           this.model.hintStickerSprite.get(),
-          this.model.stickeringProp.get()
+          this.model.stickering.get()
         ]);
         return (await proxyPromise).cube3DShim({
           foundationSprite,
@@ -950,7 +952,7 @@ var Twisty3DPuzzleWrapper = class {
         });
       } else {
         const [hintFacelets, foundationSprite, hintSprite] = await Promise.all([
-          this.model.hintFaceletProp.get(),
+          this.model.hintFacelet.get(),
           this.model.foundationStickerSprite.get(),
           this.model.hintStickerSprite.get()
         ]);
@@ -1104,12 +1106,45 @@ var twisty3DVantageCSS = new CSSSource(`
   height: 100%;
   display: grid;
   overflow: hidden;
+  place-content: center;
+}
+
+.loading {
+  width: 4em;
+  height: 4em;
+  border-radius: 2.5em;
+  border: 0.5em solid rgba(0, 0, 0, 0);
+  border-top: 0.5em solid rgba(0, 0, 0, 0.7);
+  border-right: 0.5em solid rgba(0, 0, 0, 0.7);
+  animation: fade-in-delayed 4s, rotate 1s linear infinite;
+}
+
+@keyframes fade-in-delayed {
+  0% { opacity: 0; }
+  25% {opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 /* TODO: This is due to stats hack. Replace with \`canvas\`. */
 .wrapper > canvas {
   max-width: 100%;
   max-height: 100%;
+  cursor: grab;
+  animation: fade-in 0.25s ease-in;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.wrapper > canvas:active {
+  cursor: grabbing;
 }
 
 .wrapper.invisible {
@@ -1322,8 +1357,8 @@ var TwistyOrbitControls = class {
     const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
     const temperedX = this.temperMovement(movementX / minDim);
     const temperedY = this.temperMovement(movementY / minDim * VERTICAL_MOVEMENT_BASE_SCALE);
-    this.model.orbitCoordinatesRequestProp.set((async () => {
-      const prevCoords = await this.model.orbitCoordinatesProp.get();
+    this.model.orbitCoordinatesRequest.set((async () => {
+      const prevCoords = await this.model.orbitCoordinates.get();
       const newCoords = {
         latitude: prevCoords.latitude + 2 * temperedY * DEGREES_PER_RADIAN * scale,
         longitude: prevCoords.longitude - 2 * temperedX * DEGREES_PER_RADIAN
@@ -1383,6 +1418,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     this.scene = null;
     this.stats = null;
     this.rendererIsShared = shareRenderer();
+    this.loadingElement = null;
     __privateAdd(this, _onResizeStaleDropper, new StaleDropper());
     __privateAdd(this, _width, 0);
     __privateAdd(this, _height, 0);
@@ -1394,6 +1430,8 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     __privateAdd(this, _disconnectionFunctions, []);
     __privateAdd(this, _scheduler, new RenderScheduler(this.render.bind(this)));
     this.scene = scene ?? null;
+    this.loadingElement = this.addElement(document.createElement("div"));
+    this.loadingElement.classList.add("loading");
     if (SHOW_STATS) {
       this.stats = new Stats();
       this.stats.dom.style.position = "absolute";
@@ -1435,6 +1473,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
         const renderer = await this.renderer();
         canvas = this.addElement(renderer.domElement);
       }
+      this.loadingElement?.remove();
       const context = canvas.getContext("2d");
       return { canvas, context };
     })());
@@ -1451,7 +1490,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     return __privateGet(this, _cachedOrbitControls) ?? __privateSet(this, _cachedOrbitControls, (async () => {
       const orbitControls = new TwistyOrbitControls(this.model, !!this.options?.backView, (await this.canvasInfo()).canvas, await __privateMethod(this, _dragTracker, dragTracker_fn).call(this));
       if (this.model) {
-        this.addListener(this.model.orbitCoordinatesProp, async (orbitCoordinates) => {
+        this.addListener(this.model.orbitCoordinates, async (orbitCoordinates) => {
           const camera = await this.camera();
           setCameraFromOrbitCoordinates(camera, orbitCoordinates, this.options?.backView);
           this.scheduleRender();
@@ -1497,7 +1536,7 @@ _setupBasicPresses = new WeakSet();
 setupBasicPresses_fn = async function() {
   const dragTracker = await __privateMethod(this, _dragTracker, dragTracker_fn).call(this);
   dragTracker.addEventListener("press", async (e) => {
-    const movePressInput = await this.model.movePressInputProp.get();
+    const movePressInput = await this.model.movePressInput.get();
     if (movePressInput !== "basic") {
       return;
     }
@@ -1584,8 +1623,8 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
     const vantage = new Twisty3DVantage(this.model, this);
     this.addVantage(vantage);
     if (this.model) {
-      __privateGet(this, _freshListenerManager5).addMultiListener([this.model.puzzleLoaderProp, this.model.visualizationStrategyProp], this.onPuzzle.bind(this));
-      __privateGet(this, _freshListenerManager5).addListener(this.model.backViewProp, this.onBackView.bind(this));
+      __privateGet(this, _freshListenerManager5).addMultiListener([this.model.puzzleLoader, this.model.visualizationStrategy], this.onPuzzle.bind(this));
+      __privateGet(this, _freshListenerManager5).addListener(this.model.backView, this.onBackView.bind(this));
     }
     this.scheduleRender();
   }
@@ -1656,11 +1695,14 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
   }
   async setCurrentTwisty3DPuzzleWrapper(scene, twisty3DPuzzleWrapper) {
     const old = __privateGet(this, _currentTwisty3DPuzzleWrapper);
-    __privateSet(this, _currentTwisty3DPuzzleWrapper, twisty3DPuzzleWrapper);
-    old?.disconnect();
-    scene.add(await twisty3DPuzzleWrapper.twisty3DPuzzle());
-    if (old) {
-      scene.remove(await old.twisty3DPuzzle());
+    try {
+      __privateSet(this, _currentTwisty3DPuzzleWrapper, twisty3DPuzzleWrapper);
+      old?.disconnect();
+      scene.add(await twisty3DPuzzleWrapper.twisty3DPuzzle());
+    } finally {
+      if (old) {
+        scene.remove(await old.twisty3DPuzzle());
+      }
     }
   }
   async onPuzzle(inputs) {
@@ -1915,7 +1957,7 @@ var TwistyButtonsV2 = class extends ManagedCustomElement {
       this.addElement(button);
     }
     this.buttons = buttons;
-    this.model?.buttonAppearanceProp.addFreshListener(this.update.bind(this));
+    this.model?.buttonAppearance.addFreshListener(this.update.bind(this));
   }
   async onFullscreenButton() {
     if (!this.fullscreenElement) {
@@ -2014,36 +2056,11 @@ var twistyScrubberCSS = new CSSSource(`
   overflow: hidden;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
+  background: rgba(196, 196, 196, 0.75)
 }
 
-input {
-  margin: 0; width: 100%;
-}
-
-input {
-  background: none;
-}
-
-::-moz-range-track {
-  background: rgba(0, 0, 0, 0.25);
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-::-webkit-slider-runnable-track {
-  background: rgba(0, 0, 0, 0.05);
-}
-
-::-moz-range-progress {
-  background: #3273F6;
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-::-ms-fill-lower {
-  background: #3273F6;
-  height: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+input:not(:disabled) {
+  cursor: ew-resize;
 }
 `);
 
@@ -2097,7 +2114,7 @@ var TwistyScrubberV2 = class extends ManagedCustomElement {
       const elem = document.createElement("input");
       elem.type = "range";
       elem.disabled = true;
-      this.model?.detailedTimelineInfoProp.addFreshListener(this.onDetailedTimelineInfo.bind(this));
+      this.model?.detailedTimelineInfo.addFreshListener(this.onDetailedTimelineInfo.bind(this));
       elem.addEventListener("input", this.onInput.bind(this));
       return elem;
     })());
@@ -2109,8 +2126,8 @@ var TwistyScrubberV2 = class extends ManagedCustomElement {
     const inputElem = await this.inputElem();
     await this.slowDown(e, inputElem);
     const value = parseInt(inputElem.value);
-    this.model?.playingInfoProp.set({ playing: false });
-    this.model?.timestampRequestProp.set(value);
+    this.model?.playingInfo.set({ playing: false });
+    this.model?.timestampRequest.set(value);
   }
   async slowDown(e, inputElem) {
     if (!SLOW_DOWN_SCRUBBING) {
@@ -2158,12 +2175,12 @@ async function screenshot(model, options) {
   })());
   const scene = new (await THREEJS).Scene();
   const twisty3DWrapper = new Twisty3DPuzzleWrapper(model, { scheduleRender: () => {
-  } }, await model.puzzleLoaderProp.get(), await model.visualizationStrategyProp.get());
-  await model.stickeringProp.get();
+  } }, await model.puzzleLoader.get(), await model.visualizationStrategy.get());
+  await model.stickering.get();
   await new Promise((resolve) => setTimeout(resolve, 1e3));
-  await model.legacyPositionProp.get();
+  await model.legacyPosition.get();
   scene.add(await twisty3DWrapper.twisty3DPuzzle());
-  const orbitCoordinates = await model.orbitCoordinatesProp.get();
+  const orbitCoordinates = await model.orbitCoordinates.get();
   await setCameraFromOrbitCoordinates(camera, orbitCoordinates);
   const renderer = new (await THREEJS).WebGLRenderer({
     antialias: true,
@@ -2182,8 +2199,8 @@ async function screenshot(model, options) {
 }
 async function getDefaultFilename(model) {
   const [puzzleID, algWithIssues] = await Promise.all([
-    model.puzzleIDProp.get(),
-    model.algProp.get()
+    model.puzzleID.get(),
+    model.alg.get()
   ]);
   return `[${puzzleID}]${algWithIssues.alg.experimentalNumUnits() === 0 ? "" : " " + algWithIssues.alg.toString()}`;
 }
@@ -2208,7 +2225,7 @@ var twistyPlayerCSS = new CSSSource(`
 .wrapper {
   display: grid;
   overflow: hidden;
-  grid-template-rows: 7fr 1em 1fr;
+  grid-template-rows: 7fr minmax(1.5em, 0.5fr) minmax(2em, 1fr);
 }
 
 .wrapper > * {
@@ -3458,7 +3475,7 @@ var PuzzleAlgProp = class extends TwistyPropDerived {
 // src/cubing/twisty/model/props/puzzle/state/AlgTransformationProp.ts
 var AlgTransformationProp = class extends TwistyPropDerived {
   derive(input) {
-    return input.kpuzzle.algToTransformation(input.alg.alg);
+    return input.kpuzzle.algToTransformation(input.setupAlg.alg);
   }
 };
 
@@ -3469,16 +3486,19 @@ var IndexerProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/AnchoredStartProp.ts
-var AnchoredStartProp = class extends TwistyPropDerived {
+// src/cubing/twisty/model/props/puzzle/state/AnchorTransformationProp.ts
+var AnchorTransformationProp = class extends TwistyPropDerived {
   derive(inputs) {
+    if (inputs.setupTransformation) {
+      return inputs.setupTransformation;
+    }
     switch (inputs.setupAnchor) {
       case "start":
-        return inputs.setupTransformation;
+        return inputs.setupAlgTransformation;
       case "end": {
         const algTransformation = inputs.indexer.transformationAtIndex(inputs.indexer.numAnimatedLeaves());
         const inverseAlgTransformation = algTransformation.invert();
-        return inputs.setupTransformation.applyTransformation(inverseAlgTransformation);
+        return inputs.setupAlgTransformation.applyTransformation(inverseAlgTransformation);
       }
       default:
         throw new Error("Unimplemented!");
@@ -3709,127 +3729,148 @@ var FoundationDisplayProp = class extends SimpleTwistyPropSource {
   }
 };
 
+// src/cubing/twisty/model/props/puzzle/state/SetupTransformationProp.ts
+var SetupTransformationProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return null;
+  }
+};
+
 // src/cubing/twisty/model/TwistyPlayerModel.ts
 var TwistyPlayerModel = class {
   constructor() {
     this.userVisibleErrorTracker = new UserVisibleErrorTracker();
-    this.algProp = new AlgProp();
-    this.backgroundProp = new BackgroundProp();
-    this.backViewProp = new BackViewProp();
-    this.controlPanelProp = new ControlPanelProp();
-    this.catchUpMoveProp = new CatchUpMoveProp();
-    this.foundationDisplayProp = new FoundationDisplayProp();
+    this.alg = new AlgProp();
+    this.background = new BackgroundProp();
+    this.backView = new BackViewProp();
+    this.controlPanel = new ControlPanelProp();
+    this.catchUpMove = new CatchUpMoveProp();
+    this.foundationDisplay = new FoundationDisplayProp();
     this.foundationStickerSpriteURL = new URLProp();
-    this.hintFaceletProp = new HintFaceletProp();
+    this.hintFacelet = new HintFaceletProp();
     this.hintStickerSpriteURL = new URLProp();
-    this.indexerConstructorRequestProp = new IndexerConstructorRequestProp();
-    this.latitudeLimitProp = new LatitudeLimitProp();
-    this.movePressInputProp = new MovePressInputProp();
-    this.orbitCoordinatesRequestProp = new OrbitCoordinatesRequestProp();
-    this.playingInfoProp = new PlayingInfoProp();
-    this.puzzleDescriptionRequestProp = new PGPuzzleDescriptionStringProp();
-    this.puzzleIDRequestProp = new PuzzleIDRequestProp();
-    this.setupAnchorProp = new SetupAnchorProp();
-    this.setupProp = new AlgProp();
-    this.stickeringProp = new StickeringProp();
-    this.tempoScaleProp = new TempoScaleProp();
-    this.timestampRequestProp = new TimestampRequestProp();
-    this.viewerLinkProp = new ViewerLinkProp();
-    this.visualizationFormatProp = new VisualizationFormatProp();
+    this.indexerConstructorRequest = new IndexerConstructorRequestProp();
+    this.latitudeLimit = new LatitudeLimitProp();
+    this.movePressInput = new MovePressInputProp();
+    this.orbitCoordinatesRequest = new OrbitCoordinatesRequestProp();
+    this.playingInfo = new PlayingInfoProp();
+    this.puzzleDescriptionRequest = new PGPuzzleDescriptionStringProp();
+    this.puzzleIDRequest = new PuzzleIDRequestProp();
+    this.setupAnchor = new SetupAnchorProp();
+    this.setupAlg = new AlgProp();
+    this.setupTransformation = new SetupTransformationProp();
+    this.stickering = new StickeringProp();
+    this.tempoScale = new TempoScaleProp();
+    this.timestampRequest = new TimestampRequestProp();
+    this.viewerLink = new ViewerLinkProp();
+    this.visualizationFormat = new VisualizationFormatProp();
     this.foundationStickerSprite = new SpriteProp({
       spriteURL: this.foundationStickerSpriteURL
     });
     this.hintStickerSprite = new SpriteProp({
       spriteURL: this.hintStickerSpriteURL
     });
-    this.puzzleLoaderProp = new PuzzleLoaderProp({
-      puzzleIDRequest: this.puzzleIDRequestProp,
-      puzzleDescriptionRequest: this.puzzleDescriptionRequestProp
+    this.puzzleLoader = new PuzzleLoaderProp({
+      puzzleIDRequest: this.puzzleIDRequest,
+      puzzleDescriptionRequest: this.puzzleDescriptionRequest
     }, this.userVisibleErrorTracker);
-    this.kpuzzleProp = new KPuzzleProp({ puzzleLoader: this.puzzleLoaderProp });
-    this.puzzleIDProp = new PuzzleIDProp({ puzzleLoader: this.puzzleLoaderProp });
-    this.puzzleAlgProp = new PuzzleAlgProp({
-      algWithIssues: this.algProp,
-      kpuzzle: this.kpuzzleProp
+    this.kpuzzle = new KPuzzleProp({ puzzleLoader: this.puzzleLoader });
+    this.puzzleID = new PuzzleIDProp({ puzzleLoader: this.puzzleLoader });
+    this.puzzleAlg = new PuzzleAlgProp({
+      algWithIssues: this.alg,
+      kpuzzle: this.kpuzzle
     });
-    this.puzzleSetupProp = new PuzzleAlgProp({
-      algWithIssues: this.setupProp,
-      kpuzzle: this.kpuzzleProp
+    this.puzzleSetupAlg = new PuzzleAlgProp({
+      algWithIssues: this.setupAlg,
+      kpuzzle: this.kpuzzle
     });
-    this.visualizationStrategyProp = new VisualizationStrategyProp({
-      visualizationRequest: this.visualizationFormatProp,
-      puzzleID: this.puzzleIDProp
+    this.visualizationStrategy = new VisualizationStrategyProp({
+      visualizationRequest: this.visualizationFormat,
+      puzzleID: this.puzzleID
     });
-    this.indexerConstructorProp = new IndexerConstructorProp({
-      alg: this.algProp,
-      puzzle: this.puzzleIDProp,
-      visualizationStrategy: this.visualizationStrategyProp,
-      indexerConstructorRequest: this.indexerConstructorRequestProp
+    this.indexerConstructor = new IndexerConstructorProp({
+      alg: this.alg,
+      puzzle: this.puzzleID,
+      visualizationStrategy: this.visualizationStrategy,
+      indexerConstructorRequest: this.indexerConstructorRequest
     });
-    this.moveCountProp = new NaiveMoveCountProp({ alg: this.puzzleAlgProp });
-    this.orbitCoordinatesProp = new OrbitCoordinatesProp({
-      orbitCoordinatesRequest: this.orbitCoordinatesRequestProp,
-      latitudeLimit: this.latitudeLimitProp,
-      puzzleID: this.puzzleIDProp,
-      strategy: this.visualizationStrategyProp
+    this.moveCount = new NaiveMoveCountProp({ alg: this.puzzleAlg });
+    this.orbitCoordinates = new OrbitCoordinatesProp({
+      orbitCoordinatesRequest: this.orbitCoordinatesRequest,
+      latitudeLimit: this.latitudeLimit,
+      puzzleID: this.puzzleID,
+      strategy: this.visualizationStrategy
     });
-    this.setupTransformationProp = new AlgTransformationProp({
-      alg: this.puzzleSetupProp,
-      kpuzzle: this.kpuzzleProp
+    this.setupAlgTransformation = new AlgTransformationProp({
+      setupAlg: this.puzzleSetupAlg,
+      kpuzzle: this.kpuzzle
     });
-    this.indexerProp = new IndexerProp({
-      indexerConstructor: this.indexerConstructorProp,
-      algWithIssues: this.puzzleAlgProp,
-      kpuzzle: this.kpuzzleProp
+    this.indexer = new IndexerProp({
+      indexerConstructor: this.indexerConstructor,
+      algWithIssues: this.puzzleAlg,
+      kpuzzle: this.kpuzzle
     });
-    this.anchoredStartProp = new AnchoredStartProp({
-      setupAnchor: this.setupAnchorProp,
-      setupTransformation: this.setupTransformationProp,
-      indexer: this.indexerProp
+    this.anchorTransformation = new AnchorTransformationProp({
+      setupTransformation: this.setupTransformation,
+      setupAnchor: this.setupAnchor,
+      setupAlgTransformation: this.setupAlgTransformation,
+      indexer: this.indexer
     });
-    this.timeRangeProp = new TimeRangeProp({
-      indexer: this.indexerProp
+    this.timeRange = new TimeRangeProp({
+      indexer: this.indexer
     });
-    this.detailedTimelineInfoProp = new DetailedTimelineInfoProp({
-      timestampRequest: this.timestampRequestProp,
-      timeRange: this.timeRangeProp,
-      setupAnchor: this.setupAnchorProp
+    this.detailedTimelineInfo = new DetailedTimelineInfoProp({
+      timestampRequest: this.timestampRequest,
+      timeRange: this.timeRange,
+      setupAnchor: this.setupAnchor
     });
-    this.coarseTimelineInfoProp = new CoarseTimelineInfoProp({
-      detailedTimelineInfo: this.detailedTimelineInfoProp,
-      playingInfo: this.playingInfoProp
+    this.coarseTimelineInfo = new CoarseTimelineInfoProp({
+      detailedTimelineInfo: this.detailedTimelineInfo,
+      playingInfo: this.playingInfo
     });
-    this.currentMoveInfoProp = new CurrentMoveInfoProp({
-      indexer: this.indexerProp,
-      detailedTimelineInfo: this.detailedTimelineInfoProp,
-      catchUpMove: this.catchUpMoveProp
+    this.currentMoveInfo = new CurrentMoveInfoProp({
+      indexer: this.indexer,
+      detailedTimelineInfo: this.detailedTimelineInfo,
+      catchUpMove: this.catchUpMove
     });
-    this.buttonAppearanceProp = new ButtonAppearanceProp({
-      coarseTimelineInfo: this.coarseTimelineInfoProp,
-      viewerLink: this.viewerLinkProp
+    this.buttonAppearance = new ButtonAppearanceProp({
+      coarseTimelineInfo: this.coarseTimelineInfo,
+      viewerLink: this.viewerLink
     });
-    this.currentLeavesSimplifiedProp = new CurrentLeavesSimplifiedProp({
-      currentMoveInfo: this.currentMoveInfoProp
+    this.currentLeavesSimplified = new CurrentLeavesSimplifiedProp({
+      currentMoveInfo: this.currentMoveInfo
     });
-    this.currentStateProp = new CurrentStateProp({
-      anchoredStart: this.anchoredStartProp,
-      currentLeavesSimplified: this.currentLeavesSimplifiedProp,
-      indexer: this.indexerProp
+    this.currentState = new CurrentStateProp({
+      anchoredStart: this.anchorTransformation,
+      currentLeavesSimplified: this.currentLeavesSimplified,
+      indexer: this.indexer
     });
-    this.legacyPositionProp = new LegacyPositionProp({
-      currentMoveInfo: this.currentMoveInfoProp,
-      state: this.currentStateProp
+    this.legacyPosition = new LegacyPositionProp({
+      currentMoveInfo: this.currentMoveInfo,
+      state: this.currentState
     });
   }
   async twizzleLink() {
-    const url = new URL("https://alpha.twizzle.net/edit/");
-    const [puzzle, alg, setup, anchor, experimentalStickering] = await Promise.all([
-      this.puzzleIDProp.get(),
-      this.algProp.get(),
-      this.setupProp.get(),
-      this.setupAnchorProp.get(),
-      this.stickeringProp.get()
+    const [
+      viewerLink,
+      puzzleID,
+      puzzleDescription,
+      alg,
+      setup,
+      anchor,
+      experimentalStickering
+    ] = await Promise.all([
+      this.viewerLink.get(),
+      this.puzzleID.get(),
+      this.puzzleDescriptionRequest.get(),
+      this.alg.get(),
+      this.setupAlg.get(),
+      this.setupAnchor.get(),
+      this.stickering.get()
     ]);
+    const isExplorer = viewerLink === "experimental-twizzle-explorer";
+    console.log({ isExplorer, viewerLink });
+    const url = new URL(`https://alpha.twizzle.net/${isExplorer ? "explore" : "edit"}/`);
     if (!alg.alg.experimentalIsEmpty()) {
       url.searchParams.set("alg", alg.alg.toString());
     }
@@ -3842,27 +3883,33 @@ var TwistyPlayerModel = class {
     if (experimentalStickering !== "full") {
       url.searchParams.set("experimental-stickering", experimentalStickering);
     }
-    if (puzzle !== "3x3x3") {
-      url.searchParams.set("puzzle", puzzle);
+    if (isExplorer && puzzleDescription !== NO_VALUE) {
+      url.searchParams.set("puzzle-description", puzzleDescription);
+    } else if (puzzleID !== "3x3x3") {
+      url.searchParams.set("puzzle", puzzleID);
     }
     return url.toString();
   }
   experimentalAddMove(flexibleMove, options = {}) {
     const move = typeof flexibleMove === "string" ? new Move(flexibleMove) : flexibleMove;
     (async () => {
-      const alg = (await this.algProp.get()).alg;
+      const alg = (await this.alg.get()).alg;
       const newAlg = experimentalAppendMove(alg, move, {
         coalesce: options?.coalesce,
         mod: options?.mod
       });
-      this.algProp.set(newAlg);
-      this.timestampRequestProp.set("end");
-      this.catchUpMoveProp.set({
+      this.alg.set(newAlg);
+      this.timestampRequest.set("end");
+      this.catchUpMove.set({
         move,
         amount: 0
       });
     })();
   }
+  get playingInfoProp() {
+    console.warn("Using deprecated prop: `playingInfoProp`. Please switch to: `playingInfo`");
+    return this.playingInfo;
+  }
 };
 
 // src/cubing/twisty/views/TwistyPlayerSettable.ts
@@ -3876,121 +3923,121 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
     this.experimentalGet = new ExperimentalGetters(this.experimentalModel);
   }
   set alg(newAlg) {
-    this.experimentalModel.algProp.set(newAlg);
+    this.experimentalModel.alg.set(newAlg);
   }
   get alg() {
     throw err("alg");
   }
   set experimentalSetupAlg(newSetup) {
-    this.experimentalModel.setupProp.set(newSetup);
+    this.experimentalModel.setupAlg.set(newSetup);
   }
   get experimentalSetupAlg() {
     throw err("setup");
   }
   set experimentalSetupAnchor(anchor) {
-    this.experimentalModel.setupAnchorProp.set(anchor);
+    this.experimentalModel.setupAnchor.set(anchor);
   }
   get experimentalSetupAnchor() {
     throw err("anchor");
   }
   set puzzle(puzzleID) {
-    this.experimentalModel.puzzleIDRequestProp.set(puzzleID);
+    this.experimentalModel.puzzleIDRequest.set(puzzleID);
   }
   get puzzle() {
     throw err("puzzle");
   }
   set experimentalPuzzleDescription(puzzleDescription) {
-    this.experimentalModel.puzzleDescriptionRequestProp.set(puzzleDescription);
+    this.experimentalModel.puzzleDescriptionRequest.set(puzzleDescription);
   }
   get experimentalPuzzleDescription() {
     throw err("experimentalPuzzleDescription");
   }
   set timestamp(timestamp) {
-    this.experimentalModel.timestampRequestProp.set(timestamp);
+    this.experimentalModel.timestampRequest.set(timestamp);
   }
   get timestamp() {
     throw err("timestamp");
   }
   set hintFacelets(hintFaceletStyle) {
-    this.experimentalModel.hintFaceletProp.set(hintFaceletStyle);
+    this.experimentalModel.hintFacelet.set(hintFaceletStyle);
   }
   get hintFacelets() {
     throw err("hintFacelets");
   }
   set experimentalStickering(stickering) {
-    this.experimentalModel.stickeringProp.set(stickering);
+    this.experimentalModel.stickering.set(stickering);
   }
   get experimentalStickering() {
     throw err("stickering");
   }
   set backView(backView) {
-    this.experimentalModel.backViewProp.set(backView);
+    this.experimentalModel.backView.set(backView);
   }
   get backView() {
     throw err("backView");
   }
   set background(backgroundTheme) {
-    this.experimentalModel.backgroundProp.set(backgroundTheme);
+    this.experimentalModel.background.set(backgroundTheme);
   }
   get background() {
     throw err("background");
   }
   set controlPanel(newControlPanel) {
-    this.experimentalModel.controlPanelProp.set(newControlPanel);
+    this.experimentalModel.controlPanel.set(newControlPanel);
   }
   get controlPanel() {
     throw err("controlPanel");
   }
   set visualization(visualizationFormat) {
-    this.experimentalModel.visualizationFormatProp.set(visualizationFormat);
+    this.experimentalModel.visualizationFormat.set(visualizationFormat);
   }
   get visualization() {
     throw err("visualization");
   }
   set viewerLink(viewerLinkPage) {
-    this.experimentalModel.viewerLinkProp.set(viewerLinkPage);
+    this.experimentalModel.viewerLink.set(viewerLinkPage);
   }
   get viewerLink() {
     throw err("viewerLink");
   }
   set experimentalMovePressInput(movePressInput) {
-    this.experimentalModel.movePressInputProp.set(movePressInput);
+    this.experimentalModel.movePressInput.set(movePressInput);
   }
   get experimentalMovePressInput() {
     throw err("experimentalMovePressInput");
   }
   set cameraLatitude(latitude) {
-    this.experimentalModel.orbitCoordinatesRequestProp.set({ latitude });
+    this.experimentalModel.orbitCoordinatesRequest.set({ latitude });
   }
   get cameraLatitude() {
     throw err("cameraLatitude");
   }
   set cameraLongitude(longitude) {
-    this.experimentalModel.orbitCoordinatesRequestProp.set({ longitude });
+    this.experimentalModel.orbitCoordinatesRequest.set({ longitude });
   }
   get cameraLongitude() {
     throw err("cameraLongitude");
   }
   set cameraDistance(distance) {
-    this.experimentalModel.orbitCoordinatesRequestProp.set({ distance });
+    this.experimentalModel.orbitCoordinatesRequest.set({ distance });
   }
   get cameraDistance() {
     throw err("cameraDistance");
   }
   set cameraLatitudeLimit(latitudeLimit) {
-    this.experimentalModel.latitudeLimitProp.set(latitudeLimit);
+    this.experimentalModel.latitudeLimit.set(latitudeLimit);
   }
   get cameraLatitudeLimit() {
     throw err("cameraLatitudeLimit");
   }
   set indexer(indexer) {
-    this.experimentalModel.indexerConstructorRequestProp.set(indexer);
+    this.experimentalModel.indexerConstructorRequest.set(indexer);
   }
   get indexer() {
     throw err("indexer");
   }
   set tempoScale(newTempoScale) {
-    this.experimentalModel.tempoScaleProp.set(newTempoScale);
+    this.experimentalModel.tempoScale.set(newTempoScale);
   }
   get tempoScale() {
     throw err("tempoScale");
@@ -4013,16 +4060,16 @@ var ExperimentalGetters = class {
     this.model = model;
   }
   async alg() {
-    return (await this.model.algProp.get()).alg;
+    return (await this.model.alg.get()).alg;
   }
   async setupAlg() {
-    return (await this.model.setupProp.get()).alg;
+    return (await this.model.setupAlg.get()).alg;
   }
   puzzleID() {
-    return this.model.puzzleIDProp.get();
+    return this.model.puzzleID.get();
   }
   async timestamp() {
-    return (await this.model.detailedTimelineInfoProp.get()).timestamp;
+    return (await this.model.detailedTimelineInfo.get()).timestamp;
   }
 };
 
@@ -4092,14 +4139,14 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     this.contentWrapper.appendChild(scrubber);
     this.buttons = new TwistyButtonsV2(this.experimentalModel, this.controller, this);
     this.contentWrapper.appendChild(this.buttons);
-    this.experimentalModel.backgroundProp.addFreshListener((backgroundTheme) => {
+    this.experimentalModel.background.addFreshListener((backgroundTheme) => {
       this.contentWrapper.classList.toggle("checkered", backgroundTheme !== "none");
     });
-    this.experimentalModel.controlPanelProp.addFreshListener((controlPanel) => {
+    this.experimentalModel.controlPanel.addFreshListener((controlPanel) => {
       __privateGet(this, _controlsManager).setValue(controlPanel);
     });
-    this.experimentalModel.visualizationStrategyProp.addFreshListener(__privateMethod(this, _setVisualizationWrapper, setVisualizationWrapper_fn).bind(this));
-    this.experimentalModel.puzzleIDProp.addFreshListener(this.flash.bind(this));
+    this.experimentalModel.visualizationStrategy.addFreshListener(__privateMethod(this, _setVisualizationWrapper, setVisualizationWrapper_fn).bind(this));
+    this.experimentalModel.puzzleID.addFreshListener(this.flash.bind(this));
   }
   flash() {
     __privateGet(this, _visualizationWrapper)?.animate([{ opacity: 0.25 }, { opacity: 1 }], {
@@ -4158,7 +4205,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     return (await screenshot(this.experimentalModel, options)).dataURL;
   }
   async experimentalDownloadScreenshot(filename) {
-    if (["2D", "experimental-2D-LL"].includes(await this.experimentalModel.visualizationStrategyProp.get())) {
+    if (["2D", "experimental-2D-LL"].includes(await this.experimentalModel.visualizationStrategy.get())) {
       const wrapper2D = __privateGet(this, _visualizationWrapper);
       const twisty2DPuzzle = await wrapper2D.currentTwisty2DPuzzleWrapper().twisty2DPuzzle();
       const str = new XMLSerializer().serializeToString(twisty2DPuzzle.svg.element);
@@ -4472,13 +4519,13 @@ var TwistyAlgViewer = class extends HTMLElementShim {
       return;
     }
     this.twistyPlayer = twistyPlayer;
-    this.twistyPlayer.experimentalModel.algProp.addFreshListener((algWithIssues) => {
+    this.twistyPlayer.experimentalModel.alg.addFreshListener((algWithIssues) => {
       this.setAlg(algWithIssues.alg);
     });
-    const sourceAlg = (await this.twistyPlayer.experimentalModel.algProp.get()).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.currentMoveInfoProp.addFreshListener((currentMoveInfo) => {
+    twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener((currentMoveInfo) => {
       let moveInfo = currentMoveInfo.currentMoves[0];
       moveInfo ?? (moveInfo = currentMoveInfo.movesStarting[0]);
       moveInfo ?? (moveInfo = currentMoveInfo.movesFinishing[0]);
@@ -4489,7 +4536,7 @@ var TwistyAlgViewer = class extends HTMLElementShim {
         this.highlighter.set(mainCurrentMove);
       }
     });
-    twistyPlayer.experimentalModel.detailedTimelineInfoProp.addFreshListener((detailedTimelineInfo) => {
+    twistyPlayer.experimentalModel.detailedTimelineInfo.addFreshListener((detailedTimelineInfo) => {
       if (detailedTimelineInfo.timestamp !== this.lastClickTimestamp) {
         this.lastClickTimestamp = null;
       }
@@ -4500,11 +4547,11 @@ var TwistyAlgViewer = class extends HTMLElementShim {
     if (twistyPlayer) {
       twistyPlayer.pause();
       const timestampPromise = (async () => {
-        const indexer = await twistyPlayer.experimentalModel.indexerProp.get();
+        const indexer = await twistyPlayer.experimentalModel.indexer.get();
         const offset = offsetIntoMove ? DEFAULT_OFFSET_MS : 0;
         return (indexer.indexToMoveStartTimestamp(index) ?? -offset) + offset;
       })();
-      twistyPlayer.experimentalModel.timestampRequestProp.set(await timestampPromise);
+      twistyPlayer.experimentalModel.timestampRequest.set(await timestampPromise);
       if (this.lastClickTimestamp === await timestampPromise) {
         twistyPlayer.play();
         this.lastClickTimestamp = null;
@@ -4823,8 +4870,8 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     if (options?.twistyPlayer) {
       this.twistyPlayer = options.twistyPlayer;
     }
-    __privateSet(this, _twistyPlayerProp, options?.twistyPlayerProp ?? "algProp");
-    if (options?.twistyPlayerProp === "algProp") {
+    __privateSet(this, _twistyPlayerProp, options?.twistyPlayerProp ?? "alg");
+    if (options?.twistyPlayerProp === "alg") {
       this.model.leafToHighlight.addFreshListener((highlightInfo) => {
         if (highlightInfo) {
           this.highlightLeaf(highlightInfo.leafInfo.leaf);
@@ -4853,7 +4900,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     if (document.activeElement !== this || this.shadow.activeElement !== __privateGet(this, _textarea)) {
       return;
     }
-    if (__privateGet(this, _twistyPlayerProp) !== "algProp") {
+    if (__privateGet(this, _twistyPlayerProp) !== "alg") {
       return;
     }
     const { selectionStart, selectionEnd } = __privateGet(this, _textarea);
@@ -4868,7 +4915,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     __privateGet(this, _textareaClassListValidForPuzzleManager).setValue(issues);
   }
   highlightLeaf(leaf) {
-    if (__privateGet(this, _twistyPlayerProp) !== "algProp") {
+    if (__privateGet(this, _twistyPlayerProp) !== "alg") {
       return;
     }
     if (leaf === null) {
@@ -4901,8 +4948,8 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     (async () => {
       this.algString = __privateGet(this, _algProp, algProp_get) ? (await __privateGet(this, _algProp, algProp_get).get()).alg.toString() : "";
     })();
-    if (__privateGet(this, _twistyPlayerProp) === "algProp") {
-      __privateGet(this, _twistyPlayer)?.experimentalModel.puzzleAlgProp.addFreshListener((algWithIssues) => {
+    if (__privateGet(this, _twistyPlayerProp) === "alg") {
+      __privateGet(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;
@@ -4921,8 +4968,8 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
           return;
         }
         const [indexer, timestampRequest] = await Promise.all([
-          await twistyPlayer.experimentalModel.indexerProp.get(),
-          await twistyPlayer.experimentalModel.timestampRequestProp.get()
+          await twistyPlayer.experimentalModel.indexer.get(),
+          await twistyPlayer.experimentalModel.timestampRequest.get()
         ]);
         if (timestampRequest === "opposite-anchor" && !__privateGet(this, _onInputHasFired)) {
           return;
@@ -4947,11 +4994,11 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
             throw new Error("Invalid where!");
         }
         if (!this.debugNeverRequestTimestamp) {
-          twistyPlayer.experimentalModel.timestampRequestProp.set(newTimestamp);
+          twistyPlayer.experimentalModel.timestampRequest.set(newTimestamp);
         }
       });
-      twistyPlayer.experimentalModel.currentLeavesSimplifiedProp.addFreshListener(async (currentLeavesSimplified) => {
-        const indexer = await twistyPlayer.experimentalModel.indexerProp.get();
+      twistyPlayer.experimentalModel.currentLeavesSimplified.addFreshListener(async (currentLeavesSimplified) => {
+        const indexer = await twistyPlayer.experimentalModel.indexer.get();
         const leaf = indexer.getAnimLeaf(currentLeavesSimplified.stateIndex);
         this.highlightLeaf(leaf);
       });
@@ -5015,6 +5062,175 @@ padSuffix_fn = function(s) {
 };
 _highlightedLeaf = new WeakMap();
 customElementsShim.define("twisty-alg-editor", TwistyAlgEditor);
+
+// src/cubing/twisty/views/twizzle/TwizzleLink.css.ts
+var twizzleLinkCSS = new CSSSource(`
+.wrapper {
+  background: rgb(255, 245, 235);
+  display: grid;
+  grid-template-columns: 1fr;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.setup-alg, twisty-alg-viewer {
+  padding: 0.5em 1em;
+}
+
+.heading {
+  background: rgba(255, 230, 210, 1);
+  font-weight: bold;
+  padding: 0.25em 0.5em;
+}
+
+twisty-player {
+  width: 100%;
+  resize: vertical;
+  overflow-y: hidden;
+}
+
+twisty-player + .heading {
+  padding-top: 0.5em;
+}
+`);
+
+// src/cubing/twisty/views/twizzle/url-params.ts
+function updateURL(url) {
+  window.history.replaceState("", "", url.toString());
+}
+var _prefix;
+var URLParamUpdater = class {
+  constructor(model, options) {
+    __privateAdd(this, _prefix, void 0);
+    __privateSet(this, _prefix, options?.prefix ?? "");
+    this.listenToAlgProp(model.alg, "alg");
+    this.listenToAlgProp(model.setupAlg, "setup-alg");
+    this.listenToStringSourceProp(model.stickering, "stickering");
+    this.listenToStringSourceProp(model.setupAnchor, "setup-anchor");
+    this.listenToStringOrNoValueProp(model.puzzleIDRequest, "puzzle", NO_VALUE);
+    this.listenToStringOrNoValueProp(model.puzzleDescriptionRequest, "puzzle-description", NO_VALUE);
+  }
+  setURLParam(unprefixedKey, value, defaultString) {
+    const prefixedKey = __privateGet(this, _prefix) + unprefixedKey;
+    const url = new URL(location.href);
+    if (value === defaultString) {
+      url.searchParams.delete(prefixedKey);
+    } else {
+      url.searchParams.set(prefixedKey, value);
+    }
+    updateURL(url);
+  }
+  async listenToStringSourceProp(prop, key, defaultString) {
+    const actualDefaultString = defaultString ?? await prop.getDefaultValue();
+    prop.addFreshListener((s) => {
+      this.setURLParam(key, s, actualDefaultString);
+    });
+  }
+  async listenToStringOrNoValueProp(prop, key, defaultString) {
+    prop.addFreshListener((s) => {
+      if (s === NO_VALUE) {
+        s = defaultString;
+      }
+      if (s === NO_VALUE) {
+        this.setURLParam(key, "", "");
+      } else {
+        this.setURLParam(key, s, "");
+      }
+    });
+  }
+  listenToAlgProp(prop, key) {
+    prop.addFreshListener((algWithIssues) => {
+      this.setURLParam(key, algWithIssues.alg.toString(), "");
+    });
+  }
+};
+_prefix = new WeakMap();
+function getConfigFromURL(prefix = "", url = location.href) {
+  const paramMapping = {
+    "alg": "alg",
+    "setup-alg": "experimental-setup-alg",
+    "setup-anchor": "experimental-setup-anchor",
+    "puzzle": "puzzle",
+    "stickering": "experimental-stickering",
+    "puzzle-description": "experimental-puzzle-description"
+  };
+  const params = new URL(url).searchParams;
+  const config = {};
+  for (const [ourParam, twistyPlayerParam] of Object.entries(paramMapping)) {
+    const paramValue = params.get(prefix + ourParam);
+    if (paramValue !== null) {
+      const configKey = twistyPlayerAttributeMap[twistyPlayerParam];
+      config[configKey] = paramValue;
+    }
+  }
+  return config;
+}
+
+// src/cubing/twisty/views/twizzle/TwizzleLink.ts
+var _cssElem;
+var TwizzleLink = class extends ManagedCustomElement {
+  constructor() {
+    super({ mode: "open" });
+    this.twistyPlayer = null;
+    this.a = null;
+    __privateAdd(this, _cssElem, void 0);
+  }
+  fallback() {
+    this.contentWrapper.textContent = "";
+    if (this.a) {
+      const span = this.contentWrapper.appendChild(document.createElement("span"));
+      span.textContent = "\u2757\uFE0F";
+      span.title = "Could not show a player for link";
+      this.addElement(this.a);
+    }
+    if (__privateGet(this, _cssElem)) {
+      __privateGet(this, _cssElem).remove();
+    }
+  }
+  async connectedCallback() {
+    __privateSet(this, _cssElem, this.addCSS(twizzleLinkCSS));
+    this.a = this.querySelector("a");
+    if (!this.a) {
+      return;
+    }
+    const config = getConfigFromURL("", this.a.href);
+    const href = this.a?.href;
+    const { hostname, pathname } = new URL(href);
+    if (hostname !== "alpha.twizzle.net") {
+      this.fallback();
+      return;
+    }
+    if (["/edit/", "/explore/"].includes(pathname)) {
+      const isExplorer = pathname === "/explore/";
+      if (config.puzzle && !(config.puzzle in puzzles)) {
+        const puzzleDescription = (await import("../puzzle-geometry/index.js")).getPuzzleDescriptionString(config.puzzle);
+        delete config.puzzle;
+        config.experimentalPuzzleDescription = puzzleDescription;
+      }
+      this.twistyPlayer = this.addElement(new TwistyPlayer({
+        ...config,
+        viewerLink: isExplorer ? "experimental-twizzle-explorer" : "auto"
+      }));
+      if (config.experimentalSetupAlg) {
+        this.addHeading("Setup");
+        const setupAlgDiv = this.addElement(document.createElement("div"));
+        setupAlgDiv.classList.add("setup-alg");
+        setupAlgDiv.textContent = new Alg(config.experimentalSetupAlg).toString();
+      }
+      this.addHeading("Moves");
+      const twistyAlgViewer = this.addElement(new TwistyAlgViewer({ twistyPlayer: this.twistyPlayer }));
+      twistyAlgViewer.part.add("twisty-alg-viewer");
+    } else {
+      this.fallback();
+    }
+  }
+  addHeading(text) {
+    const headingDiv = this.addElement(document.createElement("div"));
+    headingDiv.classList.add("heading");
+    headingDiv.textContent = text;
+  }
+};
+_cssElem = new WeakMap();
+customElementsShim.define("twizzle-link", TwizzleLink);
 export {
   NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE,
   KPuzzleSVGWrapper as ExperimentalKPuzzleSVGWrapper,
@@ -5023,6 +5239,7 @@ export {
   TwistyAlgEditor,
   TwistyAlgViewer,
   TwistyPlayer,
+  TwizzleLink,
   backViewLayouts,
   debugShowRenderStats as experimentalDebugShowRenderStats,
   experimentalForceNewRendererSharing