cubing 0.42.1 → 0.43.1

package/dist/{cubing → lib/cubing}/twisty/index.js

@@ -18,22 +18,22 @@ import {
   rawRenderPooled,
   setCameraFromOrbitCoordinates,
   setTwistyDebug
-} from "../chunk-FCRM3RQU.js";
+} from "../chunks/chunk-Z2CCB3XX.js";
 import {
   countAnimatedLeaves,
   countMetricMoves,
   countMoves
-} from "../chunk-YEOYXOGB.js";
+} from "../chunks/chunk-ZUPLJQAD.js";
 import {
   cube3x3x3,
   puzzles
-} from "../chunk-AU3TSTCA.js";
+} from "../chunks/chunk-32CXD7UA.js";
 import {
   customPGPuzzleLoader,
   getPartialAppendOptionsForPuzzleSpecificSimplifyOptions,
   getPieceStickeringMask
-} from "../chunk-KF2JGMZA.js";
-import "../chunk-OLH526Y4.js";
+} from "../chunks/chunk-RS62HLA5.js";
+import "../chunks/chunk-QF4HTZYW.js";
 import {
   Alg,
   AlgBuilder,
@@ -48,7 +48,7 @@ import {
   experimentalAppendMove,
   functionFromTraversal,
   offsetMod
-} from "../chunk-ULQMFOA2.js";
+} from "../chunks/chunk-7X47IY3P.js";
 
 // src/cubing/twisty/controllers/AnimationTypes.ts
 function directionScalar(direction) {
@@ -92,17 +92,16 @@ function modIntoRange(v, rangeMin, rangeMax) {
 var CatchUpHelper = class {
   constructor(model) {
     this.model = model;
-    this.catchingUp = false;
-    this.pendingFrame = false;
-    this.scheduler = new RenderScheduler(
-      this.animFrame.bind(this)
-    );
-    this.catchUpMs = 500;
-    this.lastTimestamp = 0;
     model.tempoScale.addFreshListener((tempoScale) => {
       this.tempoScale = tempoScale;
     });
   }
+  catchingUp = false;
+  pendingFrame = false;
+  tempoScale;
+  scheduler = new RenderScheduler(
+    this.animFrame.bind(this)
+  );
   start() {
     if (!this.catchingUp) {
       this.lastTimestamp = performance.now();
@@ -115,6 +114,8 @@ var CatchUpHelper = class {
     this.catchingUp = false;
     this.scheduler.cancelAnimFrame();
   }
+  catchUpMs = 500;
+  lastTimestamp = 0;
   animFrame(timestamp) {
     this.scheduler.requestAnimFrame();
     const delta = this.tempoScale * (timestamp - this.lastTimestamp) / this.catchUpMs;
@@ -147,20 +148,22 @@ var CatchUpHelper = class {
 var TwistyAnimationController = class {
   constructor(model, delegate) {
     this.delegate = delegate;
-    // TODO: #private?
-    this.playing = false;
-    this.direction = 1 /* Forwards */;
-    this.lastDatestamp = 0;
-    this.scheduler = new RenderScheduler(
-      this.animFrame.bind(this)
-    );
-    this.#animFrameEffectiveTimestampStaleDropper = new StaleDropper();
     this.model = model;
     this.lastTimestampPromise = this.#effectiveTimestampMilliseconds();
     this.model.playingInfo.addFreshListener(this.onPlayingProp.bind(this));
     this.catchUpHelper = new CatchUpHelper(this.model);
     this.model.catchUpMove.addFreshListener(this.onCatchUpMoveProp.bind(this));
   }
+  // TODO: #private?
+  playing = false;
+  direction = 1 /* Forwards */;
+  catchUpHelper;
+  model;
+  lastDatestamp = 0;
+  lastTimestampPromise;
+  scheduler = new RenderScheduler(
+    this.animFrame.bind(this)
+  );
   // TODO: Do we need this?
   async onPlayingProp(playingInfo) {
     if (playingInfo.playing !== this.playing) {
@@ -235,7 +238,7 @@ var TwistyAnimationController = class {
       untilBoundary: "entire-timeline" /* EntireTimeline */
     });
   }
-  #animFrameEffectiveTimestampStaleDropper;
+  #animFrameEffectiveTimestampStaleDropper = new StaleDropper();
   async animFrame(frameDatestamp) {
     if (this.playing) {
       this.scheduler.requestAnimFrame();
@@ -317,6 +320,7 @@ var TwistyPlayerController = class {
     this.model = model;
     this.animationController = new TwistyAnimationController(model, delegate);
   }
+  animationController;
   jumpToStart(options) {
     this.animationController.jumpToStart(options);
   }
@@ -420,8 +424,6 @@ var TwistyAnimatedSVG = class {
   constructor(kpuzzle, svgSource, experimentalStickeringMask, showUnknownOrientations = false) {
     this.kpuzzle = kpuzzle;
     this.showUnknownOrientations = showUnknownOrientations;
-    this.originalColors = {};
-    this.gradients = {};
     if (!svgSource) {
       throw new Error(`No SVG definition for puzzle type: ${kpuzzle.name()}`);
     }
@@ -497,6 +499,12 @@ var TwistyAnimatedSVG = class {
       this.drawPattern(this.kpuzzle.defaultPattern());
     }
   }
+  wrapperElement;
+  svgElement;
+  gradientDefs;
+  originalColors = {};
+  gradients = {};
+  svgID;
   drawPattern(pattern, nextPattern, fraction) {
     this.draw(pattern, nextPattern, fraction);
   }
@@ -662,9 +670,6 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     this.svgSource = svgSource;
     this.options = options;
     this.puzzleLoader = puzzleLoader;
-    this.scheduler = new RenderScheduler(this.render.bind(this));
-    this.#cachedPosition = null;
-    this.#freshListenerManager = new FreshListenerManager();
     this.addCSS(twisty2DSVGCSS);
     this.resetSVG();
     this.#freshListenerManager.addListener(
@@ -685,8 +690,10 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
       );
     }
   }
-  #cachedPosition;
-  #freshListenerManager;
+  svgWrapper;
+  scheduler = new RenderScheduler(this.render.bind(this));
+  #cachedPosition = null;
+  #freshListenerManager = new FreshListenerManager();
   disconnect() {
     this.#freshListenerManager.disconnect();
   }
@@ -773,7 +780,7 @@ var Twisty2DPuzzleWrapper = class {
   #cachedTwisty2DPuzzle = null;
   // TODO: Stale dropper?
   async twisty2DPuzzle() {
-    return this.#cachedTwisty2DPuzzle ?? (this.#cachedTwisty2DPuzzle = (async () => {
+    return this.#cachedTwisty2DPuzzle ??= (async () => {
       const svgPromise = this.effectiveVisualization === "experimental-2D-LL" ? this.puzzleLoader.llSVG() : this.puzzleLoader.svg();
       return new Twisty2DPuzzle(
         this.model,
@@ -782,7 +789,7 @@ var Twisty2DPuzzleWrapper = class {
         {},
         this.puzzleLoader
       );
-    })());
+    })();
   }
 };
 
@@ -808,7 +815,7 @@ var Twisty2DSceneWrapper = class extends ManagedCustomElement {
   }
   #cachedScene;
   async scene() {
-    return this.#cachedScene ?? (this.#cachedScene = (async () => new (await THREEJS).Scene())());
+    return this.#cachedScene ??= (async () => new (await THREEJS).Scene())();
   }
   scheduleRender() {
     this.#currentTwisty2DPuzzleWrapper?.scheduleRender();
@@ -873,14 +880,13 @@ var ClassListManager = class {
 
 // src/cubing/twisty/views/InitialValueTracker.ts
 var InitialValueTracker = class {
-  constructor() {
-    // TODO: AbortController?
-    this.promise = new Promise((resolve, reject) => {
-      this.#resolve = resolve;
-      this.reject = reject;
-    });
-  }
   #resolve;
+  reject;
+  // TODO: AbortController?
+  promise = new Promise((resolve, reject) => {
+    this.#resolve = resolve;
+    this.reject = reject;
+  });
   handleNewValue(t) {
     this.#resolve(t);
   }
@@ -977,7 +983,7 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
   }
   #cachedTwisty3DPuzzle = null;
   async twisty3DPuzzle() {
-    return this.#cachedTwisty3DPuzzle ?? (this.#cachedTwisty3DPuzzle = (async () => {
+    return this.#cachedTwisty3DPuzzle ??= (async () => {
       const proxyPromise = proxy3D();
       if (this.puzzleLoader.id === "3x3x3" && this.visualizationStrategy === "Cube3D") {
         const [
@@ -1024,7 +1030,7 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
         );
         return pg3d;
       }
-    })());
+    })();
   }
   async raycastMove(raycasterPromise, transformations) {
     const puzzle = await this.twisty3DPuzzle();
@@ -1135,7 +1141,7 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
   }
   #cachedScene;
   async scene() {
-    return this.#cachedScene ?? (this.#cachedScene = (async () => new (await THREEJS).Scene())());
+    return this.#cachedScene ??= (async () => new (await THREEJS).Scene())();
   }
   #vantages = /* @__PURE__ */ new Set();
   addVantage(vantage) {
@@ -1434,8 +1440,8 @@ var TwistyButtons = class extends ManagedCustomElement {
     this.model = model;
     this.controller = controller;
     this.defaultFullscreenElement = defaultFullscreenElement;
-    this.buttons = null;
   }
+  buttons = null;
   connectedCallback() {
     this.addCSS(buttonGridCSS);
     const buttons = {};
@@ -1534,15 +1540,7 @@ var TwistyButtons = class extends ManagedCustomElement {
 };
 customElementsShim.define("twisty-buttons", TwistyButtons);
 var TwistyButton = class extends ManagedCustomElement {
-  constructor() {
-    super(...arguments);
-    this.htmlButton = document.createElement("button");
-    this.#iconManager = new ClassListManager(
-      this,
-      "svg-",
-      buttonIcons
-    );
-  }
+  htmlButton = document.createElement("button");
   // TODO: async?
   updateColorScheme(colorScheme) {
     this.contentWrapper.classList.toggle("dark-mode", colorScheme === "dark");
@@ -1551,7 +1549,11 @@ var TwistyButton = class extends ManagedCustomElement {
     this.addCSS(buttonCSS);
     this.addElement(this.htmlButton);
   }
-  #iconManager;
+  #iconManager = new ClassListManager(
+    this,
+    "svg-",
+    buttonIcons
+  );
   setIcon(iconName) {
     this.#iconManager.setValue(iconName);
   }
@@ -1651,7 +1653,7 @@ var TwistyScrubber = class extends ManagedCustomElement {
   }
   #inputElem = null;
   async inputElem() {
-    return this.#inputElem ?? (this.#inputElem = (async () => {
+    return this.#inputElem ??= (async () => {
       const elem = document.createElement("input");
       elem.type = "range";
       elem.disabled = true;
@@ -1661,7 +1663,7 @@ var TwistyScrubber = class extends ManagedCustomElement {
       elem.addEventListener("input", this.onInput.bind(this));
       elem.addEventListener("keydown", this.onKeypress.bind(this));
       return elem;
-    })());
+    })();
   }
   async onInput(e) {
     if (scaling) {
@@ -1750,9 +1752,9 @@ async function screenshot(model, options) {
   const width = options?.width ?? 2048;
   const height = options?.height ?? 2048;
   const aspectRatio = width / height;
-  const camera = cachedCamera ?? (cachedCamera = await (async () => {
+  const camera = cachedCamera ??= await (async () => {
     return new PerspectiveCamera(20, aspectRatio, 0.1, 20);
-  })());
+  })();
   const scene = new Scene();
   const twisty3DWrapper = new Twisty3DPuzzleWrapper(
     model,
@@ -1897,6 +1899,9 @@ var URLProp = class extends TwistyPropSource {
 
 // src/cubing/twisty/model/props/puzzle/state/AlgProp.ts
 var AlgIssues = class _AlgIssues {
+  // TODO: (string | Error)[]
+  warnings;
+  errors;
   constructor(issues) {
     this.warnings = Object.freeze(issues?.warnings ?? []);
     this.errors = Object.freeze(issues?.errors ?? []);
@@ -2169,12 +2174,13 @@ var AlgDuration = class extends TraversalUp {
 var SimpleAlgIndexer = class {
   constructor(kpuzzle, alg) {
     this.kpuzzle = kpuzzle;
-    // TODO: Allow custom `durationFn`.
-    this.durationFn = new AlgDuration(
-      defaultDurationForAmount
-    );
     this.moves = new Alg(alg.experimentalExpand());
   }
+  moves;
+  // TODO: Allow custom `durationFn`.
+  durationFn = new AlgDuration(
+    defaultDurationForAmount
+  );
   getAnimLeaf(index) {
     return Array.from(this.moves.childAlgNodes())[index];
   }
@@ -2408,6 +2414,7 @@ var SimultaneousMoveIndexer = class {
     this.kpuzzle = kpuzzle;
     this.animLeaves = demos[alg.toString()] ?? simulMoves(alg);
   }
+  animLeaves;
   getAnimLeaf(index) {
     return this.animLeaves[Math.min(index, this.animLeaves.length - 1)]?.animLeaf ?? null;
   }
@@ -2570,10 +2577,6 @@ var DecoratorConstructor = class extends TraversalUp {
   constructor(kpuzzle) {
     super();
     this.kpuzzle = kpuzzle;
-    this.durationFn = new AlgDuration(
-      defaultDurationForAmount
-    );
-    this.cache = {};
     this.identity = kpuzzle.identityTransformation();
     this.dummyLeaf = new AlgWalkerDecoration(
       0,
@@ -2583,6 +2586,12 @@ var DecoratorConstructor = class extends TraversalUp {
       []
     );
   }
+  identity;
+  dummyLeaf;
+  durationFn = new AlgDuration(
+    defaultDurationForAmount
+  );
+  cache = {};
   traverseAlg(alg) {
     let moveCount = 0;
     let duration = 0;
@@ -2707,6 +2716,15 @@ var AlgWalker = class extends TraversalDownUp {
     this.st = this.kpuzzle.identityTransformation();
     this.root = new WalkerDown(this.apd, false);
   }
+  move;
+  moveDuration;
+  back;
+  st;
+  root;
+  i;
+  dur;
+  goali;
+  goaldur;
   moveByIndex(loc) {
     if (this.i >= 0 && this.i === loc) {
       return this.move !== void 0;
@@ -2952,6 +2970,8 @@ var TreeAlgIndexer = class {
     this.decoration = deccon.traverseAlg(chunkedAlg);
     this.walker = new AlgWalker(this.kpuzzle, chunkedAlg, this.decoration);
   }
+  decoration;
+  walker;
   getAnimLeaf(index) {
     if (this.walker.moveByIndex(index)) {
       if (!this.walker.move) {
@@ -3350,7 +3370,7 @@ var InitialHintFaceletsAnimationProp = class extends SimpleTwistyPropSource {
 // src/cubing/twisty/model/props/puzzle/display/SpriteProp.ts
 var cachedLoader = null;
 async function loader() {
-  return cachedLoader ?? (cachedLoader = new (await THREEJS).TextureLoader());
+  return cachedLoader ??= new (await THREEJS).TextureLoader();
 }
 var SpriteProp = class extends TwistyPropDerived {
   async derive(inputs) {
@@ -3643,34 +3663,6 @@ function defaultCameraOrbitCoordinates(puzzleID, strategy) {
 var TwistySceneModel = class {
   constructor(twistyPlayerModel) {
     this.twistyPlayerModel = twistyPlayerModel;
-    // Depth 0
-    this.background = new BackgroundProp();
-    this.colorSchemeRequest = new ColorSchemeRequestProp();
-    this.dragInput = new DragInputProp();
-    this.foundationDisplay = new FoundationDisplayProp();
-    this.foundationStickerSpriteURL = new URLProp();
-    this.fullscreenElement = new DOMElementReferenceProp();
-    this.hintFacelet = new HintFaceletProp();
-    this.hintStickerSpriteURL = new URLProp();
-    this.initialHintFaceletsAnimation = new InitialHintFaceletsAnimationProp();
-    this.latitudeLimit = new LatitudeLimitProp();
-    this.movePressInput = new MovePressInputProp();
-    this.movePressCancelOptions = new MovePressCancelOptions();
-    this.orbitCoordinatesRequest = new OrbitCoordinatesRequestProp();
-    // `stickeringMaskRequest` takes priority over `stickeringRequest`
-    this.stickeringMaskRequest = new StickeringMaskRequestProp();
-    this.stickeringRequest = new StickeringRequestProp();
-    this.faceletScale = new FaceletScaleProp();
-    // Depth 1
-    this.colorScheme = new ColorSchemeProp({
-      colorSchemeRequest: this.colorSchemeRequest
-    });
-    this.foundationStickerSprite = new SpriteProp({
-      spriteURL: this.foundationStickerSpriteURL
-    });
-    this.hintStickerSprite = new SpriteProp({
-      spriteURL: this.hintStickerSpriteURL
-    });
     this.orbitCoordinates = new OrbitCoordinatesProp({
       orbitCoordinatesRequest: this.orbitCoordinatesRequest,
       latitudeLimit: this.latitudeLimit,
@@ -3683,6 +3675,37 @@ var TwistySceneModel = class {
       puzzleLoader: twistyPlayerModel.puzzleLoader
     });
   }
+  // Depth 0
+  background = new BackgroundProp();
+  colorSchemeRequest = new ColorSchemeRequestProp();
+  dragInput = new DragInputProp();
+  foundationDisplay = new FoundationDisplayProp();
+  foundationStickerSpriteURL = new URLProp();
+  fullscreenElement = new DOMElementReferenceProp();
+  hintFacelet = new HintFaceletProp();
+  hintStickerSpriteURL = new URLProp();
+  initialHintFaceletsAnimation = new InitialHintFaceletsAnimationProp();
+  latitudeLimit = new LatitudeLimitProp();
+  movePressInput = new MovePressInputProp();
+  movePressCancelOptions = new MovePressCancelOptions();
+  orbitCoordinatesRequest = new OrbitCoordinatesRequestProp();
+  // `stickeringMaskRequest` takes priority over `stickeringRequest`
+  stickeringMaskRequest = new StickeringMaskRequestProp();
+  stickeringRequest = new StickeringRequestProp();
+  faceletScale = new FaceletScaleProp();
+  // Depth 1
+  colorScheme = new ColorSchemeProp({
+    colorSchemeRequest: this.colorSchemeRequest
+  });
+  foundationStickerSprite = new SpriteProp({
+    spriteURL: this.foundationStickerSpriteURL
+  });
+  hintStickerSprite = new SpriteProp({
+    spriteURL: this.hintStickerSpriteURL
+  });
+  // Dependence on TwistyPlayerModel
+  orbitCoordinates;
+  stickeringMask;
 };
 
 // src/cubing/twisty/model/UserVisibleErrorTracker.ts
@@ -3701,123 +3724,121 @@ var UserVisibleErrorTracker = class extends SimpleTwistyPropSource {
 
 // src/cubing/twisty/model/TwistyPlayerModel.ts
 var TwistyPlayerModel = class {
-  constructor() {
-    // TODO: incorporate error handling into the entire prop graph.
-    // TODO: Make this something that can't get confused with normal props?
-    this.userVisibleErrorTracker = new UserVisibleErrorTracker();
-    // TODO: Redistribute and group props with controllers.
-    // Depth 0
-    this.alg = new AlgProp();
-    this.backView = new BackViewProp();
-    this.controlPanel = new ControlPanelProp();
-    this.catchUpMove = new CatchUpMoveProp();
-    this.indexerConstructorRequest = new IndexerConstructorRequestProp();
-    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.tempoScale = new TempoScaleProp();
-    this.timestampRequest = new TimestampRequestProp();
-    this.viewerLink = new ViewerLinkProp();
-    this.visualizationFormat = new VisualizationFormatProp();
-    // Metadata
-    this.title = new ArbitraryStringProp();
-    this.videoURL = new URLProp();
-    this.competitionID = new ArbitraryStringProp();
-    // Depth 1
-    this.puzzleLoader = new PuzzleLoaderProp(
-      {
-        puzzleIDRequest: this.puzzleIDRequest,
-        puzzleDescriptionRequest: this.puzzleDescriptionRequest
-      },
-      this.userVisibleErrorTracker
-    );
-    // Depth 2
-    this.kpuzzle = new KPuzzleProp({ puzzleLoader: this.puzzleLoader });
-    this.puzzleID = new PuzzleIDProp({ puzzleLoader: this.puzzleLoader });
-    // Depth 3
-    this.puzzleAlg = new PuzzleAlgProp({
-      algWithIssues: this.alg,
-      kpuzzle: this.kpuzzle
-    });
-    this.puzzleSetupAlg = new PuzzleAlgProp({
-      algWithIssues: this.setupAlg,
-      kpuzzle: this.kpuzzle
-    });
-    this.visualizationStrategy = new VisualizationStrategyProp({
-      visualizationRequest: this.visualizationFormat,
-      puzzleID: this.puzzleID
-    });
-    // Depth 4
-    this.indexerConstructor = new IndexerConstructorProp({
-      alg: this.alg,
-      puzzle: this.puzzleID,
-      visualizationStrategy: this.visualizationStrategy,
-      indexerConstructorRequest: this.indexerConstructorRequest
-    });
-    this.setupAlgTransformation = new AlgTransformationProp({
-      setupAlg: this.puzzleSetupAlg,
-      kpuzzle: this.kpuzzle
-    });
-    // Depth 5
-    this.indexer = new IndexerProp({
-      indexerConstructor: this.indexerConstructor,
-      algWithIssues: this.puzzleAlg,
-      kpuzzle: this.kpuzzle
-    });
-    // Depth 6
-    this.anchorTransformation = new AnchorTransformationProp({
-      setupTransformation: this.setupTransformation,
+  // TODO: incorporate error handling into the entire prop graph.
+  // TODO: Make this something that can't get confused with normal props?
+  userVisibleErrorTracker = new UserVisibleErrorTracker();
+  // TODO: Redistribute and group props with controllers.
+  // Depth 0
+  alg = new AlgProp();
+  backView = new BackViewProp();
+  controlPanel = new ControlPanelProp();
+  catchUpMove = new CatchUpMoveProp();
+  indexerConstructorRequest = new IndexerConstructorRequestProp();
+  playingInfo = new PlayingInfoProp();
+  puzzleDescriptionRequest = new PGPuzzleDescriptionStringProp();
+  puzzleIDRequest = new PuzzleIDRequestProp();
+  setupAnchor = new SetupAnchorProp();
+  setupAlg = new AlgProp();
+  setupTransformation = new SetupTransformationProp();
+  tempoScale = new TempoScaleProp();
+  timestampRequest = new TimestampRequestProp();
+  viewerLink = new ViewerLinkProp();
+  visualizationFormat = new VisualizationFormatProp();
+  // Metadata
+  title = new ArbitraryStringProp();
+  videoURL = new URLProp();
+  competitionID = new ArbitraryStringProp();
+  // Depth 1
+  puzzleLoader = new PuzzleLoaderProp(
+    {
+      puzzleIDRequest: this.puzzleIDRequest,
+      puzzleDescriptionRequest: this.puzzleDescriptionRequest
+    },
+    this.userVisibleErrorTracker
+  );
+  // Depth 2
+  kpuzzle = new KPuzzleProp({ puzzleLoader: this.puzzleLoader });
+  puzzleID = new PuzzleIDProp({ puzzleLoader: this.puzzleLoader });
+  // Depth 3
+  puzzleAlg = new PuzzleAlgProp({
+    algWithIssues: this.alg,
+    kpuzzle: this.kpuzzle
+  });
+  puzzleSetupAlg = new PuzzleAlgProp({
+    algWithIssues: this.setupAlg,
+    kpuzzle: this.kpuzzle
+  });
+  visualizationStrategy = new VisualizationStrategyProp({
+    visualizationRequest: this.visualizationFormat,
+    puzzleID: this.puzzleID
+  });
+  // Depth 4
+  indexerConstructor = new IndexerConstructorProp({
+    alg: this.alg,
+    puzzle: this.puzzleID,
+    visualizationStrategy: this.visualizationStrategy,
+    indexerConstructorRequest: this.indexerConstructorRequest
+  });
+  setupAlgTransformation = new AlgTransformationProp({
+    setupAlg: this.puzzleSetupAlg,
+    kpuzzle: this.kpuzzle
+  });
+  // Depth 5
+  indexer = new IndexerProp({
+    indexerConstructor: this.indexerConstructor,
+    algWithIssues: this.puzzleAlg,
+    kpuzzle: this.kpuzzle
+  });
+  // Depth 6
+  anchorTransformation = new AnchorTransformationProp({
+    setupTransformation: this.setupTransformation,
+    setupAnchor: this.setupAnchor,
+    setupAlgTransformation: this.setupAlgTransformation,
+    indexer: this.indexer
+  });
+  timeRange = new TimeRangeProp({
+    indexer: this.indexer
+  });
+  // Depth 7
+  detailedTimelineInfo = new DetailedTimelineInfoProp(
+    {
+      timestampRequest: this.timestampRequest,
+      timeRange: this.timeRange,
       setupAnchor: this.setupAnchor,
-      setupAlgTransformation: this.setupAlgTransformation,
-      indexer: this.indexer
-    });
-    this.timeRange = new TimeRangeProp({
-      indexer: this.indexer
-    });
-    // Depth 7
-    this.detailedTimelineInfo = new DetailedTimelineInfoProp(
-      {
-        timestampRequest: this.timestampRequest,
-        timeRange: this.timeRange,
-        setupAnchor: this.setupAnchor,
-        setupAlg: this.setupAlg
-      }
-    );
-    // Depth 8
-    this.coarseTimelineInfo = new CoarseTimelineInfoProp({
-      detailedTimelineInfo: this.detailedTimelineInfo,
-      playingInfo: this.playingInfo
-    });
-    this.currentMoveInfo = new CurrentMoveInfoProp({
-      indexer: this.indexer,
-      detailedTimelineInfo: this.detailedTimelineInfo,
-      catchUpMove: this.catchUpMove
-    });
-    // Depth 9
-    // TODO: Inline Twisty3D management.
-    this.buttonAppearance = new ButtonAppearanceProp({
-      coarseTimelineInfo: this.coarseTimelineInfo,
-      viewerLink: this.viewerLink
-    });
-    this.currentLeavesSimplified = new CurrentLeavesSimplifiedProp({
-      currentMoveInfo: this.currentMoveInfo
-    });
-    // Depth 10
-    this.currentPattern = new CurrentPatternProp({
-      anchoredStart: this.anchorTransformation,
-      currentLeavesSimplified: this.currentLeavesSimplified,
-      indexer: this.indexer
-    });
-    // Depth 11
-    this.legacyPosition = new LegacyPositionProp({
-      currentMoveInfo: this.currentMoveInfo,
-      currentPattern: this.currentPattern
-    });
-    this.twistySceneModel = new TwistySceneModel(this);
-  }
+      setupAlg: this.setupAlg
+    }
+  );
+  // Depth 8
+  coarseTimelineInfo = new CoarseTimelineInfoProp({
+    detailedTimelineInfo: this.detailedTimelineInfo,
+    playingInfo: this.playingInfo
+  });
+  currentMoveInfo = new CurrentMoveInfoProp({
+    indexer: this.indexer,
+    detailedTimelineInfo: this.detailedTimelineInfo,
+    catchUpMove: this.catchUpMove
+  });
+  // Depth 9
+  // TODO: Inline Twisty3D management.
+  buttonAppearance = new ButtonAppearanceProp({
+    coarseTimelineInfo: this.coarseTimelineInfo,
+    viewerLink: this.viewerLink
+  });
+  currentLeavesSimplified = new CurrentLeavesSimplifiedProp({
+    currentMoveInfo: this.currentMoveInfo
+  });
+  // Depth 10
+  currentPattern = new CurrentPatternProp({
+    anchoredStart: this.anchorTransformation,
+    currentLeavesSimplified: this.currentLeavesSimplified,
+    indexer: this.indexer
+  });
+  // Depth 11
+  legacyPosition = new LegacyPositionProp({
+    currentMoveInfo: this.currentMoveInfo,
+    currentPattern: this.currentPattern
+  });
+  twistySceneModel = new TwistySceneModel(this);
   async twizzleLink() {
     const [
       viewerLink,
@@ -3937,11 +3958,7 @@ function err(propName) {
   );
 }
 var TwistyPlayerSettable = class extends ManagedCustomElement {
-  constructor() {
-    super(...arguments);
-    this.experimentalModel = new TwistyPlayerModel();
-    this.experimentalGet = new ExperimentalGetters(this.experimentalModel);
-  }
+  experimentalModel = new TwistyPlayerModel();
   set alg(newAlg) {
     this.experimentalModel.alg.set(newAlg);
   }
@@ -4146,6 +4163,7 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
   get experimentalDragInput() {
     throw err("experimentalDragInput");
   }
+  experimentalGet = new ExperimentalGetters(this.experimentalModel);
 };
 var ExperimentalGetters = class {
   constructor(model) {
@@ -4213,32 +4231,17 @@ var propOnly = {
   experimentalMovePressCancelOptions: true
 };
 var TwistyPlayer = class extends TwistyPlayerSettable {
+  controller = new TwistyPlayerController(
+    this.experimentalModel,
+    this
+  );
+  buttons;
+  experimentalCanvasClickCallback = () => {
+  };
   // #onCanvasClick() {
   // }
   constructor(config = {}) {
     super();
-    this.controller = new TwistyPlayerController(
-      this.experimentalModel,
-      this
-    );
-    this.experimentalCanvasClickCallback = () => {
-    };
-    this.#controlsManager = new ClassListManager(
-      this,
-      "controls-",
-      ["auto"].concat(
-        Object.keys(controlsLocations)
-      )
-    );
-    this.#visualizationWrapperElem = document.createElement("div");
-    // TODO: Better pattern.
-    this.#errorElem = document.createElement("div");
-    // TODO: Better pattern.
-    this.#alreadyConnected = false;
-    this.#flashLevel = "auto";
-    this.#visualizationWrapper = null;
-    this.#initial3DVisualizationWrapper = new InitialValueTracker();
-    this.#visualizationStrategy = null;
     for (const [propName, value] of Object.entries(config)) {
       if (!(configKeys[propName] || propOnly[propName])) {
         console.warn(`Invalid config passed to TwistyPlayer: ${propName}`);
@@ -4247,10 +4250,18 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
       this[propName] = value;
     }
   }
-  #controlsManager;
-  #visualizationWrapperElem;
-  #errorElem;
-  #alreadyConnected;
+  #controlsManager = new ClassListManager(
+    this,
+    "controls-",
+    ["auto"].concat(
+      Object.keys(controlsLocations)
+    )
+  );
+  #visualizationWrapperElem = document.createElement("div");
+  // TODO: Better pattern.
+  #errorElem = document.createElement("div");
+  // TODO: Better pattern.
+  #alreadyConnected = false;
   // TODO: support resetting
   async connectedCallback() {
     if (this.#alreadyConnected) {
@@ -4313,7 +4324,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     );
     this.experimentalModel.puzzleID.addFreshListener(this.flash.bind(this));
   }
-  #flashLevel;
+  #flashLevel = "auto";
   /** @deprecated */
   experimentalSetFlashLevel(newLevel) {
     this.#flashLevel = newLevel;
@@ -4326,9 +4337,9 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
       });
     }
   }
-  #visualizationWrapper;
-  #initial3DVisualizationWrapper;
-  #visualizationStrategy;
+  #visualizationWrapper = null;
+  #initial3DVisualizationWrapper = new InitialValueTracker();
+  #visualizationStrategy = null;
   #setVisualizationWrapper(strategy) {
     if (strategy !== this.#visualizationStrategy) {
       this.#visualizationWrapper?.remove();
@@ -4587,9 +4598,9 @@ var TwistyAlgWrapperElem = class extends HTMLElementShim {
   constructor(className, algOrAlgNode) {
     super();
     this.algOrAlgNode = algOrAlgNode;
-    this.queue = [];
     this.classList.add(className);
   }
+  queue = [];
   addString(str) {
     this.queue.push(document.createTextNode(str));
   }
@@ -4828,10 +4839,8 @@ var AlgToDOMTree = class extends TraversalDownUp {
 };
 var algToDOMTree = functionFromTraversal(AlgToDOMTree);
 var MoveHighlighter = class {
-  constructor() {
-    this.moveCharIndexMap = /* @__PURE__ */ new Map();
-    this.currentElem = null;
-  }
+  moveCharIndexMap = /* @__PURE__ */ new Map();
+  currentElem = null;
   addMove(charIndex, elem) {
     this.moveCharIndexMap.set(charIndex, elem);
   }
@@ -4848,17 +4857,16 @@ var MoveHighlighter = class {
   }
 };
 var TwistyAlgViewer = class extends HTMLElementShim {
+  highlighter = new MoveHighlighter();
+  #domTree;
+  #twistyPlayer = null;
+  lastClickTimestamp = null;
   constructor(options) {
     super();
-    this.highlighter = new MoveHighlighter();
-    this.#twistyPlayer = null;
-    this.lastClickTimestamp = null;
     if (options?.twistyPlayer) {
       this.twistyPlayer = options?.twistyPlayer;
     }
   }
-  #domTree;
-  #twistyPlayer;
   connectedCallback() {
   }
   setAlg(alg) {
@@ -4896,8 +4904,8 @@ var TwistyAlgViewer = class extends HTMLElementShim {
     twistyPlayer.experimentalModel.currentMoveInfo.addFreshListener(
       (currentMoveInfo) => {
         let moveInfo = currentMoveInfo.currentMoves[0];
-        moveInfo ?? (moveInfo = currentMoveInfo.movesStarting[0]);
-        moveInfo ?? (moveInfo = currentMoveInfo.movesFinishing[0]);
+        moveInfo ??= currentMoveInfo.movesStarting[0];
+        moveInfo ??= currentMoveInfo.movesFinishing[0];
         if (!moveInfo) {
           this.highlighter.set(null);
         } else {
@@ -5107,21 +5115,19 @@ var LeafToHighlightProp = class extends TwistyPropDerived {
   }
 };
 var TwistyAlgEditorModel = class {
-  constructor() {
-    this.valueProp = new TwistyAlgEditorValueProp();
-    this.selectionProp = new TwistyAlgEditorSelectionProp();
-    this.targetCharProp = new TargetCharProp({ selectionInfo: this.selectionProp });
-    this.algEditorAlgWithIssues = new AlgEditorAlgWithIssuesProp({
-      value: this.valueProp
-    });
-    this.leafTokensProp = new LeafTokensProp({
-      algWithIssues: this.algEditorAlgWithIssues
-    });
-    this.leafToHighlight = new LeafToHighlightProp({
-      leafTokens: this.leafTokensProp,
-      targetChar: this.targetCharProp
-    });
-  }
+  valueProp = new TwistyAlgEditorValueProp();
+  selectionProp = new TwistyAlgEditorSelectionProp();
+  targetCharProp = new TargetCharProp({ selectionInfo: this.selectionProp });
+  algEditorAlgWithIssues = new AlgEditorAlgWithIssuesProp({
+    value: this.valueProp
+  });
+  leafTokensProp = new LeafTokensProp({
+    algWithIssues: this.algEditorAlgWithIssues
+  });
+  leafToHighlight = new LeafToHighlightProp({
+    leafTokens: this.leafTokensProp,
+    targetChar: this.targetCharProp
+  });
 };
 
 // src/cubing/twisty/views/TwistyAlgEditor/paste.ts
@@ -5133,7 +5139,7 @@ function maybeParse(str) {
     return null;
   }
 }
-function splitBeforeOnFirstOccurrence(str, delimiter) {
+function sliceBeforeFirstOccurrence(str, delimiter) {
   const idx = str.indexOf(delimiter);
   if (idx === -1) {
     return [str, ""];
@@ -5143,7 +5149,7 @@ function splitBeforeOnFirstOccurrence(str, delimiter) {
 function replaceSmartQuotesOutsideComments(str) {
   const linesOut = [];
   for (const line of str.split("\n")) {
-    let [before, after] = splitBeforeOnFirstOccurrence(line, COMMENT_DELIMITER);
+    let [before, after] = sliceBeforeFirstOccurrence(line, COMMENT_DELIMITER);
     before = before.replaceAll("\u2019", "'");
     linesOut.push(before + after);
   }
@@ -5160,7 +5166,7 @@ function pasteIntoTextArea(textArea, pastedText) {
   const pasteEndsWithComment = pastedText.match(/\/\/[^\n]*$/);
   let replacement = pastedText;
   if (pasteStartsWithCommentText) {
-    const [before, after] = splitBeforeOnFirstOccurrence(pastedText, "\n");
+    const [before, after] = sliceBeforeFirstOccurrence(pastedText, "\n");
     replacement = before + replaceSmartQuotesOutsideComments(after);
   } else {
     replacement = replaceSmartQuotesOutsideComments(pastedText);
@@ -5271,27 +5277,33 @@ var ATTRIBUTE_FOR_TWISTY_PLAYER = "for-twisty-player";
 var ATTRIBUTE_PLACEHOLDER = "placeholder";
 var ATTRIBUTE_TWISTY_PLAYER_PROP = "twisty-player-prop";
 var TwistyAlgEditor = class extends ManagedCustomElement {
+  model = new TwistyAlgEditorModel();
+  // #alg: Alg = new Alg();
+  #textarea = document.createElement("textarea");
+  #carbonCopy = document.createElement("div");
+  #carbonCopyPrefix = document.createElement("span");
+  #carbonCopyHighlight = document.createElement("span");
+  #carbonCopySuffix = document.createElement("span");
+  // #textareaClassListManager: ClassListManager<"none" | "warning" | "error"> =
+  //   new ClassListManager(this, "issue-", ["none", "warning", "error"]);
+  #textareaClassListValidForPuzzleManager = new ClassListManager(this, "valid-for-puzzle-", [
+    "none",
+    "warning",
+    "error"
+  ]);
+  #twistyPlayer = null;
+  #twistyPlayerProp;
+  get #algProp() {
+    if (this.#twistyPlayer === null) {
+      return null;
+    } else {
+      return this.#twistyPlayer.experimentalModel[this.#twistyPlayerProp];
+    }
+  }
+  // Temporary Workaround for Twizzle Explorer
+  debugNeverRequestTimestamp = false;
   constructor(options) {
     super();
-    this.model = new TwistyAlgEditorModel();
-    // #alg: Alg = new Alg();
-    this.#textarea = document.createElement("textarea");
-    this.#carbonCopy = document.createElement("div");
-    this.#carbonCopyPrefix = document.createElement("span");
-    this.#carbonCopyHighlight = document.createElement("span");
-    this.#carbonCopySuffix = document.createElement("span");
-    // #textareaClassListManager: ClassListManager<"none" | "warning" | "error"> =
-    //   new ClassListManager(this, "issue-", ["none", "warning", "error"]);
-    this.#textareaClassListValidForPuzzleManager = new ClassListManager(this, "valid-for-puzzle-", [
-      "none",
-      "warning",
-      "error"
-    ]);
-    this.#twistyPlayer = null;
-    // Temporary Workaround for Twizzle Explorer
-    this.debugNeverRequestTimestamp = false;
-    this.#onInputHasFired = false;
-    this.#highlightedLeaf = null;
     this.#carbonCopy.classList.add("carbon-copy");
     this.addElement(this.#carbonCopy);
     this.#textarea.rows = 1;
@@ -5328,21 +5340,6 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
       );
     }
   }
-  #textarea;
-  #carbonCopy;
-  #carbonCopyPrefix;
-  #carbonCopyHighlight;
-  #carbonCopySuffix;
-  #textareaClassListValidForPuzzleManager;
-  #twistyPlayer;
-  #twistyPlayerProp;
-  get #algProp() {
-    if (this.#twistyPlayer === null) {
-      return null;
-    } else {
-      return this.#twistyPlayer.experimentalModel[this.#twistyPlayerProp];
-    }
-  }
   connectedCallback() {
     this.#textarea.addEventListener("paste", (e) => {
       const text = e.clipboardData?.getData("text");
@@ -5366,7 +5363,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
   set placeholder(placeholderText) {
     this.#textarea.placeholder = placeholderText;
   }
-  #onInputHasFired;
+  #onInputHasFired = false;
   onInput() {
     this.#carbonCopyHighlight.hidden = true;
     this.highlightLeaf(null);
@@ -5397,7 +5394,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
   #padSuffix(s) {
     return s.endsWith("\n") ? `${s} ` : s;
   }
-  #highlightedLeaf;
+  #highlightedLeaf = null;
   // TODO: support a primary highlighted move and secondary ones.
   highlightLeaf(leaf) {
     if (this.#twistyPlayerProp !== "alg") {
@@ -5780,9 +5777,9 @@ var TwizzleLink = class extends ManagedCustomElement {
   constructor(options) {
     super({ mode: "open" });
     this.options = options;
-    this.twistyPlayer = null;
-    this.a = null;
   }
+  twistyPlayer = null;
+  a = null;
   fallback() {
     this.contentWrapper.textContent = "";
     if (this.a) {