cubing 0.22.0 → 0.24.0-pre2

package/dist/esm/twisty/index.js

@@ -11,7 +11,7 @@ import {
   TwistyPropDerived,
   TwistyPropSource,
   from
-} from "../chunk-DLN5QS4V.js";
+} from "../chunk-REMJV2GO.js";
 import {
   countAnimatedLeaves,
   countMoves
@@ -21,16 +21,8 @@ import {
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-HXKINJ7U.js";
-import {
-  KPuzzle,
-  KPuzzleSVGWrapper,
-  areStatesEquivalent,
-  combineTransformations,
-  identityTransformation,
-  invertTransformation,
-  transformationForMove
-} from "../chunk-X6JHXPDX.js";
+} from "../chunk-ZLIK3DZT.js";
+import "../chunk-TNRZDNGH.js";
 import {
   Alg,
   AlgBuilder,
@@ -267,7 +259,7 @@ var TwistyAnimationController = class {
       this.lastTimestampPromise,
       this.model.timeRangeProp.get(),
       this.model.tempoScaleProp.get(),
-      this.model.currentLeavesProp.get()
+      this.model.currentMoveInfoProp.get()
     ]));
     const [playingInfo, lastTimestamp, timeRange, tempoScale, currentMoveInfo] = freshenerResult;
     if (!playingInfo.playing) {
@@ -399,7 +391,7 @@ _currentClassName = new WeakMap();
 var HTMLElementStub = class {
 };
 var HTMLElementShim;
-if (typeof HTMLElement !== "undefined") {
+if (globalThis.HTMLElement) {
   HTMLElementShim = HTMLElement;
 } else {
   HTMLElementShim = HTMLElementStub;
@@ -409,7 +401,7 @@ var CustomElementsStub = class {
   }
 };
 var customElementsShim;
-if (typeof customElements !== "undefined") {
+if (globalThis.customElements) {
   customElementsShim = customElements;
 } else {
   customElementsShim = new CustomElementsStub();
@@ -539,7 +531,7 @@ twisty-scrubber {
 // src/cubing/twisty/heavy-code-imports/3d.ts
 var cachedConstructorProxy = null;
 async function proxy3D() {
-  return cachedConstructorProxy ?? (cachedConstructorProxy = import("../3d-3WQVOHX5.js"));
+  return cachedConstructorProxy ?? (cachedConstructorProxy = import("../3d-NFF7OGTI.js"));
 }
 var THREEJS = from(async () => (await proxy3D()).T3I);
 
@@ -609,12 +601,196 @@ svg {
 }
 `);
 
+// 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();
+}
+var colorMaps = {
+  dim: {
+    "white": "#dddddd",
+    "orange": "#884400",
+    "limegreen": "#008800",
+    "red": "#660000",
+    "rgb(34, 102, 255)": "#000088",
+    "yellow": "#888800"
+  },
+  oriented: {
+    "white": "#ff88ff",
+    "orange": "#ff88ff",
+    "limegreen": "#ff88ff",
+    "red": "#ff88ff",
+    "rgb(34, 102, 255)": "#ff88ff",
+    "yellow": "#ff88ff"
+  },
+  ignored: {
+    "white": "#444444",
+    "orange": "#444444",
+    "limegreen": "#444444",
+    "red": "#444444",
+    "rgb(34, 102, 255)": "#444444",
+    "yellow": "#444444"
+  },
+  invisible: {
+    "white": "#00000000",
+    "orange": "#00000000",
+    "limegreen": "#00000000",
+    "red": "#00000000",
+    "rgb(34, 102, 255)": "#00000000",
+    "yellow": "#00000000"
+  }
+};
+var KPuzzleSVGWrapper = class {
+  constructor(kpuzzle, svgSource, experimentalAppearance) {
+    this.kpuzzle = kpuzzle;
+    this.originalColors = {};
+    this.gradients = {};
+    if (!svgSource) {
+      throw new Error(`No SVG definition for puzzle type: ${kpuzzle.name()}`);
+    }
+    this.svgID = nextSVGID();
+    this.element = document.createElement("div");
+    this.element.classList.add("svg-wrapper");
+    this.element.innerHTML = svgSource;
+    const svgElem = this.element.querySelector("svg");
+    if (!svgElem) {
+      throw new Error("Could not get SVG element");
+    }
+    if (xmlns !== svgElem.namespaceURI) {
+      throw new Error("Unexpected XML namespace");
+    }
+    svgElem.style.maxWidth = "100%";
+    svgElem.style.maxHeight = "100%";
+    this.gradientDefs = document.createElementNS(xmlns, "defs");
+    svgElem.insertBefore(this.gradientDefs, svgElem.firstChild);
+    for (const orbitName in kpuzzle.definition.orbits) {
+      const orbitDefinition = kpuzzle.definition.orbits[orbitName];
+      for (let idx = 0; idx < orbitDefinition.numPieces; idx++) {
+        for (let orientation = 0; orientation < orbitDefinition.orientations; orientation++) {
+          const id = this.elementID(orbitName, idx, orientation);
+          const elem = this.elementByID(id);
+          let originalColor = elem.style.fill;
+          if (experimentalAppearance) {
+            (() => {
+              const a = experimentalAppearance.orbits;
+              if (!a) {
+                return;
+              }
+              const orbitAppearance = a[orbitName];
+              if (!orbitAppearance) {
+                return;
+              }
+              const pieceAppearance = orbitAppearance.pieces[idx];
+              if (!pieceAppearance) {
+                return;
+              }
+              const faceletAppearance = pieceAppearance.facelets[orientation];
+              if (!faceletAppearance) {
+                return;
+              }
+              const appearance = typeof faceletAppearance === "string" ? faceletAppearance : faceletAppearance?.appearance;
+              const colorMap = colorMaps[appearance];
+              if (colorMap) {
+                originalColor = colorMap[originalColor];
+              }
+            })();
+          } else {
+            originalColor = elem.style.fill;
+          }
+          this.originalColors[id] = originalColor;
+          this.gradients[id] = this.newGradient(id, originalColor);
+          this.gradientDefs.appendChild(this.gradients[id]);
+          elem.setAttribute("style", `fill: url(#grad-${this.svgID}-${id})`);
+        }
+      }
+    }
+  }
+  drawState(state, nextState, fraction) {
+    this.draw(state, nextState, fraction);
+  }
+  draw(state, nextState, fraction) {
+    const transformation = state.experimentalToTransformation();
+    const nextTransformation = nextState?.experimentalToTransformation();
+    if (!transformation) {
+      throw new Error("Distinguishable pieces are not handled for SVG yet!");
+    }
+    for (const orbitName in transformation.kpuzzle.definition.orbits) {
+      const orbitDefinition = transformation.kpuzzle.definition.orbits[orbitName];
+      const curTransformationOrbit = transformation.transformationData[orbitName];
+      const nextTransformationOrbit = nextTransformation ? nextTransformation.transformationData[orbitName] : null;
+      for (let idx = 0; idx < orbitDefinition.numPieces; idx++) {
+        for (let orientation = 0; orientation < orbitDefinition.orientations; orientation++) {
+          const id = this.elementID(orbitName, idx, orientation);
+          const fromCur = this.elementID(orbitName, curTransformationOrbit.permutation[idx], (orbitDefinition.orientations - curTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.orientations);
+          let singleColor = false;
+          if (nextTransformationOrbit) {
+            const fromNext = this.elementID(orbitName, nextTransformationOrbit.permutation[idx], (orbitDefinition.orientations - nextTransformationOrbit.orientation[idx] + orientation) % orbitDefinition.orientations);
+            if (fromCur === fromNext) {
+              singleColor = true;
+            }
+            fraction = fraction || 0;
+            const easedBackwardsPercent = 100 * (1 - fraction * fraction * (2 - fraction * fraction));
+            this.gradients[id].children[0].setAttribute("stop-color", this.originalColors[fromCur]);
+            this.gradients[id].children[1].setAttribute("stop-color", this.originalColors[fromCur]);
+            this.gradients[id].children[1].setAttribute("offset", `${Math.max(easedBackwardsPercent - 5, 0)}%`);
+            this.gradients[id].children[2].setAttribute("offset", `${Math.max(easedBackwardsPercent - 5, 0)}%`);
+            this.gradients[id].children[3].setAttribute("offset", `${easedBackwardsPercent}%`);
+            this.gradients[id].children[4].setAttribute("offset", `${easedBackwardsPercent}%`);
+            this.gradients[id].children[4].setAttribute("stop-color", this.originalColors[fromNext]);
+            this.gradients[id].children[5].setAttribute("stop-color", this.originalColors[fromNext]);
+          } else {
+            singleColor = true;
+          }
+          if (singleColor) {
+            this.gradients[id].children[0].setAttribute("stop-color", this.originalColors[fromCur]);
+            this.gradients[id].children[1].setAttribute("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%`);
+          }
+        }
+      }
+    }
+  }
+  newGradient(id, originalColor) {
+    const grad = document.createElementNS(xmlns, "radialGradient");
+    grad.setAttribute("id", `grad-${this.svgID}-${id}`);
+    grad.setAttribute("r", `70.7107%`);
+    const stopDefs = [
+      { offset: 0, color: originalColor },
+      { offset: 0, color: originalColor },
+      { offset: 0, color: "black" },
+      { offset: 0, color: "black" },
+      { offset: 0, color: originalColor },
+      { offset: 100, color: originalColor }
+    ];
+    for (const stopDef of stopDefs) {
+      const stop = document.createElementNS(xmlns, "stop");
+      stop.setAttribute("offset", `${stopDef.offset}%`);
+      stop.setAttribute("stop-color", stopDef.color);
+      stop.setAttribute("stop-opacity", "1");
+      grad.appendChild(stop);
+    }
+    return grad;
+  }
+  elementID(orbitName, idx, orientation) {
+    return orbitName + "-l" + idx + "-o" + orientation;
+  }
+  elementByID(id) {
+    return this.element.querySelector("#" + id);
+  }
+};
+
 // src/cubing/twisty/views/2D/Twisty2DPuzzle.ts
 var _cachedPosition, _freshListenerManager;
 var Twisty2DPuzzle = class extends ManagedCustomElement {
-  constructor(model, def, svgSource, options, puzzleLoader) {
+  constructor(model, kpuzzle, svgSource, options, puzzleLoader) {
     super();
     this.model = model;
+    this.kpuzzle = kpuzzle;
     this.svgSource = svgSource;
     this.options = options;
     this.puzzleLoader = puzzleLoader;
@@ -622,7 +798,6 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     __privateAdd(this, _cachedPosition, null);
     __privateAdd(this, _freshListenerManager, new FreshListenerManager());
     this.addCSS(twisty2DSVGCSS);
-    this.definition = def;
     this.resetSVG();
     __privateGet(this, _freshListenerManager).addListener(this.model.puzzleIDProp, (puzzleID) => {
       if (puzzleLoader?.id !== puzzleID) {
@@ -641,15 +816,14 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     try {
       if (position.movesInProgress.length > 0) {
         const move = position.movesInProgress[0].move;
-        const def = this.definition;
         let partialMove = move;
         if (position.movesInProgress[0].direction === Direction.Backwards) {
           partialMove = move.invert();
         }
-        const newState = combineTransformations(def, position.state, transformationForMove(def, partialMove));
-        this.svg.draw(this.definition, position.state, newState, position.movesInProgress[0].fraction);
+        const newState = position.state.applyMove(partialMove);
+        this.svg.draw(position.state, newState, position.movesInProgress[0].fraction);
       } else {
-        this.svg.draw(this.definition, position.state);
+        this.svg.draw(position.state);
         __privateSet(this, _cachedPosition, position);
       }
     } catch (e) {
@@ -673,10 +847,10 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     if (this.svg) {
       this.removeElement(this.svg.element);
     }
-    if (!this.definition) {
+    if (!this.kpuzzle) {
       return;
     }
-    this.svg = new KPuzzleSVGWrapper(this.definition, this.svgSource, appearance);
+    this.svg = new KPuzzleSVGWrapper(this.kpuzzle, this.svgSource, appearance);
     this.addElement(this.svg.element);
     if (__privateGet(this, _cachedPosition)) {
       this.onPositionChange(__privateGet(this, _cachedPosition));
@@ -712,7 +886,7 @@ var Twisty2DPuzzleWrapper = class {
   async twisty2DPuzzle() {
     return __privateGet(this, _cachedTwisty2DPuzzle) ?? __privateSet(this, _cachedTwisty2DPuzzle, (async () => {
       const svgPromise = this.effectiveVisualization === "experimental-2D-LL" ? this.puzzleLoader.llSVG() : this.puzzleLoader.svg();
-      return new Twisty2DPuzzle(this.model, await this.puzzleLoader.def(), await svgPromise, {}, this.puzzleLoader);
+      return new Twisty2DPuzzle(this.model, await this.puzzleLoader.kpuzzle(), await svgPromise, {}, this.puzzleLoader);
     })());
   }
 };
@@ -1993,6 +2167,7 @@ var TwistyScrubberV2 = class extends ManagedCustomElement {
     const inputElem = await this.inputElem();
     inputElem.min = detailedTimelineInfo.timeRange.start.toString();
     inputElem.max = detailedTimelineInfo.timeRange.end.toString();
+    inputElem.disabled = inputElem.min === inputElem.max;
     inputElem.value = detailedTimelineInfo.timestamp.toString();
   }
   async connectedCallback() {
@@ -2003,6 +2178,7 @@ var TwistyScrubberV2 = class extends ManagedCustomElement {
     return __privateGet(this, _inputElem) ?? __privateSet(this, _inputElem, (async () => {
       const elem = document.createElement("input");
       elem.type = "range";
+      elem.disabled = true;
       this.model?.detailedTimelineInfoProp.addFreshListener(this.onDetailedTimelineInfo.bind(this));
       elem.addEventListener("input", this.onInput.bind(this));
       return elem;
@@ -2538,8 +2714,8 @@ var AlgDuration = class extends TraversalUp {
 
 // src/cubing/twisty/controllers/indexer/SimpleAlgIndexer.ts
 var SimpleAlgIndexer = class {
-  constructor(puzzle, alg) {
-    this.puzzle = puzzle;
+  constructor(kpuzzle, alg) {
+    this.kpuzzle = kpuzzle;
     this.durationFn = new AlgDuration(defaultDurationForAmount);
     this.moves = new Alg(alg.experimentalExpand());
   }
@@ -2562,12 +2738,12 @@ var SimpleAlgIndexer = class {
     return i;
   }
   stateAtIndex(index) {
-    return this.puzzle.combine(this.puzzle.startState(), this.transformAtIndex(index));
+    return this.kpuzzle.startState().applyTransformation(this.transformationAtIndex(index));
   }
-  transformAtIndex(index) {
-    let state = this.puzzle.identity();
+  transformationAtIndex(index) {
+    let state = this.kpuzzle.identityTransformation();
     for (const move of Array.from(this.moves.units()).slice(0, index)) {
-      state = this.puzzle.combine(state, this.puzzle.stateFromMove(move));
+      state = state.applyMove(move);
     }
     return state;
   }
@@ -2760,8 +2936,8 @@ var demos = {
   ]
 };
 var SimultaneousMoveIndexerV2 = class {
-  constructor(puzzle, alg) {
-    this.puzzle = puzzle;
+  constructor(kpuzzle, alg) {
+    this.kpuzzle = kpuzzle;
     this.animLeaves = demos[alg.toString()] ?? simulMoves(alg);
   }
   getAnimLeaf(index) {
@@ -2786,13 +2962,13 @@ var SimultaneousMoveIndexerV2 = class {
     }
     return Math.max(0, i - 1);
   }
-  timestampToPosition(timestamp, startTransformation) {
+  timestampToPosition(timestamp, startState) {
     const currentMoveInfo = this.currentMoveInfo(timestamp);
-    let state = startTransformation ?? this.puzzle.identity();
+    let state = startState ?? this.kpuzzle.identityTransformation().toKState();
     for (const leafWithRange of this.animLeaves.slice(0, currentMoveInfo.stateIndex)) {
       const move = leafWithRange.animLeaf.as(Move);
       if (move !== null) {
-        state = this.puzzle.combine(state, this.puzzle.stateFromMove(move));
+        state = state.applyMove(move);
       }
     }
     return {
@@ -2866,26 +3042,26 @@ var SimultaneousMoveIndexerV2 = class {
       movesFinished
     };
   }
-  stateAtIndex(index, startTransformation) {
-    let state = startTransformation ?? this.puzzle.startState();
+  stateAtIndex(index, startState) {
+    let state = startState ?? this.kpuzzle.startState();
     for (let i = 0; i < this.animLeaves.length && i < index; i++) {
       const leafWithRange = this.animLeaves[i];
       const move = leafWithRange.animLeaf.as(Move);
       if (move !== null) {
-        state = this.puzzle.combine(state, this.puzzle.stateFromMove(move));
+        state = state.applyMove(move);
       }
     }
     return state;
   }
-  transformAtIndex(index) {
-    let state = this.puzzle.identity();
+  transformationAtIndex(index) {
+    let transformation = this.kpuzzle.identityTransformation();
     for (const leafWithRange of this.animLeaves.slice(0, index)) {
       const move = leafWithRange.animLeaf.as(Move);
       if (move !== null) {
-        state = this.puzzle.combine(state, this.puzzle.stateFromMove(move));
+        transformation = transformation.applyMove(move);
       }
     }
-    return state;
+    return transformation;
   }
   algDuration() {
     let max = 0;
@@ -2903,57 +3079,9 @@ var SimultaneousMoveIndexerV2 = class {
   }
 };
 
-// src/cubing/twisty/controllers/indexer/tree/chunkAlgs.ts
-var MIN_CHUNKING_THRESHOLD = 16;
-function chunkifyAlg(alg, chunkMaxLength) {
-  const mainAlgBuilder = new AlgBuilder();
-  const chunkAlgBuilder = new AlgBuilder();
-  for (const unit of alg.units()) {
-    chunkAlgBuilder.push(unit);
-    if (chunkAlgBuilder.experimentalNumUnits() >= chunkMaxLength) {
-      mainAlgBuilder.push(new Grouping(chunkAlgBuilder.toAlg()));
-      chunkAlgBuilder.reset();
-    }
-  }
-  mainAlgBuilder.push(new Grouping(chunkAlgBuilder.toAlg()));
-  return mainAlgBuilder.toAlg();
-}
-var ChunkAlgs = class extends TraversalUp {
-  traverseAlg(alg) {
-    const algLength = alg.experimentalNumUnits();
-    if (algLength < MIN_CHUNKING_THRESHOLD) {
-      return alg;
-    }
-    return chunkifyAlg(alg, Math.ceil(Math.sqrt(algLength)));
-  }
-  traverseGrouping(grouping) {
-    return new Grouping(this.traverseAlg(grouping.alg), grouping.amount);
-  }
-  traverseMove(move) {
-    return move;
-  }
-  traverseCommutator(commutator) {
-    return new Conjugate(this.traverseAlg(commutator.A), this.traverseAlg(commutator.B));
-  }
-  traverseConjugate(conjugate) {
-    return new Conjugate(this.traverseAlg(conjugate.A), this.traverseAlg(conjugate.B));
-  }
-  traversePause(pause) {
-    return pause;
-  }
-  traverseNewline(newline) {
-    return newline;
-  }
-  traverseLineComment(comment) {
-    return comment;
-  }
-};
-var chunkAlgsInstance = new ChunkAlgs();
-var chunkAlgs = chunkAlgsInstance.traverseAlg.bind(chunkAlgsInstance);
-
 // src/cubing/twisty/controllers/indexer/tree/AlgWalker.ts
 var AlgPartDecoration = class {
-  constructor(_puz, moveCount, duration, forward, backward, children = []) {
+  constructor(moveCount, duration, forward, backward, children = []) {
     this.moveCount = moveCount;
     this.duration = duration;
     this.forward = forward;
@@ -2962,31 +3090,31 @@ var AlgPartDecoration = class {
   }
 };
 var DecoratorConstructor = class extends TraversalUp {
-  constructor(puz) {
+  constructor(kpuzzle) {
     super();
-    this.puz = puz;
+    this.kpuzzle = kpuzzle;
     this.durationFn = new AlgDuration(defaultDurationForAmount);
     this.cache = {};
-    this.identity = puz.identity();
-    this.dummyLeaf = new AlgPartDecoration(puz, 0, 0, this.identity, this.identity, []);
+    this.identity = kpuzzle.identityTransformation();
+    this.dummyLeaf = new AlgPartDecoration(0, 0, this.identity, this.identity, []);
   }
   traverseAlg(alg) {
     let moveCount = 0;
     let duration = 0;
-    let state = this.identity;
+    let transformation = this.identity;
     const child = [];
     for (const unit of alg.units()) {
       const apd = this.traverseUnit(unit);
       moveCount += apd.moveCount;
       duration += apd.duration;
-      if (state === this.identity) {
-        state = apd.forward;
+      if (transformation === this.identity) {
+        transformation = apd.forward;
       } else {
-        state = this.puz.combine(state, apd.forward);
+        transformation = transformation.applyTransformation(apd.forward);
       }
       child.push(apd);
     }
-    return new AlgPartDecoration(this.puz, moveCount, duration, state, this.puz.invert(state), child);
+    return new AlgPartDecoration(moveCount, duration, transformation, transformation.invert(), child);
   }
   traverseGrouping(grouping) {
     const dec = this.traverseAlg(grouping.alg);
@@ -2998,29 +3126,30 @@ var DecoratorConstructor = class extends TraversalUp {
     if (r) {
       return r;
     }
-    r = new AlgPartDecoration(this.puz, 1, this.durationFn.traverseUnit(move), this.puz.stateFromMove(move), this.puz.stateFromMove(move.invert()));
+    const transformation = this.kpuzzle.moveToTransformation(move);
+    r = new AlgPartDecoration(1, this.durationFn.traverseUnit(move), transformation, transformation.invert());
     this.cache[key] = r;
     return r;
   }
   traverseCommutator(commutator) {
     const decA = this.traverseAlg(commutator.A);
     const decB = this.traverseAlg(commutator.B);
-    const AB = this.puz.combine(decA.forward, decB.forward);
-    const ApBp = this.puz.combine(decA.backward, decB.backward);
-    const ABApBp = this.puz.combine(AB, ApBp);
-    const dec = new AlgPartDecoration(this.puz, 2 * (decA.moveCount + decB.moveCount), 2 * (decA.duration + decB.duration), ABApBp, this.puz.invert(ABApBp), [decA, decB]);
+    const AB = decA.forward.applyTransformation(decB.forward);
+    const ApBp = decA.backward.applyTransformation(decB.backward);
+    const ABApBp = AB.applyTransformation(ApBp);
+    const dec = new AlgPartDecoration(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) {
     const decA = this.traverseAlg(conjugate.A);
     const decB = this.traverseAlg(conjugate.B);
-    const AB = this.puz.combine(decA.forward, decB.forward);
-    const ABAp = this.puz.combine(AB, decA.backward);
-    const dec = new AlgPartDecoration(this.puz, 2 * decA.moveCount + decB.moveCount, 2 * decA.duration + decB.duration, ABAp, this.puz.invert(ABAp), [decA, decB]);
+    const AB = decA.forward.applyTransformation(decB.forward);
+    const ABAp = AB.applyTransformation(decA.backward);
+    const dec = new AlgPartDecoration(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) {
-    return new AlgPartDecoration(this.puz, 1, this.durationFn.traverseUnit(pause), this.identity, this.identity);
+    return new AlgPartDecoration(1, this.durationFn.traverseUnit(pause), this.identity, this.identity);
   }
   traverseNewline(_newline) {
     return this.dummyLeaf;
@@ -3030,8 +3159,8 @@ var DecoratorConstructor = class extends TraversalUp {
   }
   mult(apd, n, child) {
     const absn = Math.abs(n);
-    const st = this.puz.multiply(apd.forward, n);
-    return new AlgPartDecoration(this.puz, apd.moveCount * absn, apd.duration * absn, st, this.puz.invert(st), child);
+    const st = apd.forward.selfMultiply(n);
+    return new AlgPartDecoration(apd.moveCount * absn, apd.duration * absn, st, st.invert(), child);
   }
 };
 var WalkerDown = class {
@@ -3041,9 +3170,9 @@ var WalkerDown = class {
   }
 };
 var AlgWalker = class extends TraversalDownUp {
-  constructor(puz, algOrUnit, apd) {
+  constructor(kpuzzle, algOrUnit, apd) {
     super();
-    this.puz = puz;
+    this.kpuzzle = kpuzzle;
     this.algOrUnit = algOrUnit;
     this.apd = apd;
     this.i = -1;
@@ -3053,7 +3182,7 @@ var AlgWalker = class extends TraversalDownUp {
     this.move = void 0;
     this.back = false;
     this.moveDuration = 0;
-    this.st = this.puz.identity();
+    this.st = this.kpuzzle.identityTransformation();
     this.root = new WalkerDown(this.apd, false);
   }
   moveByIndex(loc) {
@@ -3076,7 +3205,7 @@ var AlgWalker = class extends TraversalDownUp {
     this.move = void 0;
     this.moveDuration = 0;
     this.back = false;
-    this.st = this.puz.identity();
+    this.st = this.kpuzzle.identityTransformation();
     const r = this.algOrUnit.is(Alg) ? this.traverseAlg(this.algOrUnit, this.root) : this.traverseUnit(this.algOrUnit, this.root);
     return r;
   }
@@ -3173,29 +3302,77 @@ var AlgWalker = class extends TraversalDownUp {
     this.dur += mul * wd.apd.duration;
     if (mul !== 1) {
       if (wd.back) {
-        this.st = this.puz.combine(this.st, this.puz.multiply(wd.apd.backward, mul));
+        this.st = this.st.applyTransformation(wd.apd.backward.selfMultiply(mul));
       } else {
-        this.st = this.puz.combine(this.st, this.puz.multiply(wd.apd.forward, mul));
+        this.st = this.st.applyTransformation(wd.apd.forward.selfMultiply(mul));
       }
     } else {
       if (wd.back) {
-        this.st = this.puz.combine(this.st, wd.apd.backward);
+        this.st = this.st.applyTransformation(wd.apd.backward);
       } else {
-        this.st = this.puz.combine(this.st, wd.apd.forward);
+        this.st = this.st.applyTransformation(wd.apd.forward);
       }
     }
     return false;
   }
 };
 
+// src/cubing/twisty/controllers/indexer/tree/chunkAlgs.ts
+var MIN_CHUNKING_THRESHOLD = 16;
+function chunkifyAlg(alg, chunkMaxLength) {
+  const mainAlgBuilder = new AlgBuilder();
+  const chunkAlgBuilder = new AlgBuilder();
+  for (const unit of alg.units()) {
+    chunkAlgBuilder.push(unit);
+    if (chunkAlgBuilder.experimentalNumUnits() >= chunkMaxLength) {
+      mainAlgBuilder.push(new Grouping(chunkAlgBuilder.toAlg()));
+      chunkAlgBuilder.reset();
+    }
+  }
+  mainAlgBuilder.push(new Grouping(chunkAlgBuilder.toAlg()));
+  return mainAlgBuilder.toAlg();
+}
+var ChunkAlgs = class extends TraversalUp {
+  traverseAlg(alg) {
+    const algLength = alg.experimentalNumUnits();
+    if (algLength < MIN_CHUNKING_THRESHOLD) {
+      return alg;
+    }
+    return chunkifyAlg(alg, Math.ceil(Math.sqrt(algLength)));
+  }
+  traverseGrouping(grouping) {
+    return new Grouping(this.traverseAlg(grouping.alg), grouping.amount);
+  }
+  traverseMove(move) {
+    return move;
+  }
+  traverseCommutator(commutator) {
+    return new Conjugate(this.traverseAlg(commutator.A), this.traverseAlg(commutator.B));
+  }
+  traverseConjugate(conjugate) {
+    return new Conjugate(this.traverseAlg(conjugate.A), this.traverseAlg(conjugate.B));
+  }
+  traversePause(pause) {
+    return pause;
+  }
+  traverseNewline(newline) {
+    return newline;
+  }
+  traverseLineComment(comment) {
+    return comment;
+  }
+};
+var chunkAlgsInstance = new ChunkAlgs();
+var chunkAlgs = chunkAlgsInstance.traverseAlg.bind(chunkAlgsInstance);
+
 // src/cubing/twisty/controllers/indexer/tree/TreeAlgIndexer.ts
 var TreeAlgIndexer = class {
-  constructor(puzzle, alg) {
-    this.puzzle = puzzle;
-    const deccon = new DecoratorConstructor(this.puzzle);
+  constructor(kpuzzle, alg) {
+    this.kpuzzle = kpuzzle;
+    const deccon = new DecoratorConstructor(this.kpuzzle);
     const chunkedAlg = chunkAlgs(alg);
     this.decoration = deccon.traverseAlg(chunkedAlg);
-    this.walker = new AlgWalker(this.puzzle, chunkedAlg, this.decoration);
+    this.walker = new AlgWalker(this.kpuzzle, chunkedAlg, this.decoration);
   }
   getAnimLeaf(index) {
     if (this.walker.moveByIndex(index)) {
@@ -3222,11 +3399,11 @@ var TreeAlgIndexer = class {
     }
     throw new Error(`Out of algorithm: index ${index}`);
   }
-  stateAtIndex(index, startTransformation) {
+  stateAtIndex(index, startState) {
     this.walker.moveByIndex(index);
-    return this.puzzle.combine(startTransformation ?? this.puzzle.startState(), this.walker.st);
+    return (startState ?? this.kpuzzle.startState()).applyTransformation(this.walker.st);
   }
-  transformAtIndex(index) {
+  transformationAtIndex(index) {
     this.walker.moveByIndex(index);
     return this.walker.st;
   }
@@ -3272,8 +3449,7 @@ var IndexerConstructorProp = class extends TwistyPropDerived {
 var PuzzleAlgProp = class extends TwistyPropDerived {
   async derive(inputs) {
     try {
-      const kpuzzle = new KPuzzle(inputs.puzzleDef);
-      kpuzzle.applyAlg(inputs.algWithIssues.alg);
+      inputs.kpuzzle.algToTransformation(inputs.algWithIssues.alg);
       return inputs.algWithIssues;
     } catch (e) {
       return {
@@ -3286,83 +3462,17 @@ var PuzzleAlgProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/views/3D/puzzles/KPuzzleWrapper.ts
-var PuzzleWrapper = class {
-  multiply(state, amount) {
-    if (amount < 0) {
-      return this.invert(this.multiply(state, -amount));
-    }
-    if (amount === 0) {
-      return this.identity();
-    }
-    while (amount % 2 === 0) {
-      amount = amount / 2;
-      state = this.combine(state, state);
-    }
-    let newState = state;
-    amount--;
-    while (amount > 0) {
-      if (amount % 2 === 1) {
-        newState = this.combine(newState, state);
-      }
-      amount = Math.floor(amount / 2);
-      if (amount > 0) {
-        state = this.combine(state, state);
-      }
-    }
-    return newState;
-  }
-};
-var KPuzzleWrapper = class extends PuzzleWrapper {
-  constructor(definition) {
-    super();
-    this.definition = definition;
-    this.moveCache = {};
-  }
-  static async fromID(id) {
-    return new KPuzzleWrapper(await puzzles[id].def());
-  }
-  startState() {
-    return this.definition.startPieces;
-  }
-  invert(state) {
-    return invertTransformation(this.definition, state);
-  }
-  combine(s1, s2) {
-    return combineTransformations(this.definition, s1, s2);
-  }
-  stateFromMove(move) {
-    const key = move.toString();
-    if (!this.moveCache[key]) {
-      this.moveCache[key] = transformationForMove(this.definition, move);
-    }
-    return this.moveCache[key];
-  }
-  identity() {
-    return identityTransformation(this.definition);
-  }
-  equivalent(s1, s2) {
-    return areStatesEquivalent(this.definition, s1, s2);
-  }
-};
-
 // src/cubing/twisty/model/props/puzzle/state/AlgTransformationProp.ts
 var AlgTransformationProp = class extends TwistyPropDerived {
   derive(input) {
-    return this.applyAlg(input.def, input.alg.alg);
-  }
-  applyAlg(def, alg) {
-    const kpuzzleWrapper = new KPuzzleWrapper(def);
-    const indexer = new TreeAlgIndexer(kpuzzleWrapper, alg);
-    return indexer.transformAtIndex(indexer.numAnimatedLeaves());
+    return input.kpuzzle.algToTransformation(input.alg.alg);
   }
 };
 
 // src/cubing/twisty/model/props/puzzle/state/IndexerProp.ts
 var IndexerProp = class extends TwistyPropDerived {
   derive(input) {
-    const kpuzzleWrapper = new KPuzzleWrapper(input.def);
-    return new input.indexerConstructor(kpuzzleWrapper, input.algWithIssues.alg);
+    return new input.indexerConstructor(input.kpuzzle, input.algWithIssues.alg);
   }
 };
 
@@ -3373,9 +3483,9 @@ var AnchoredStartProp = class extends TwistyPropDerived {
       case "start":
         return inputs.setupTransformation;
       case "end": {
-        const algTransformation = inputs.indexer.transformAtIndex(inputs.indexer.numAnimatedLeaves());
-        const inverseAlgTransformation = invertTransformation(inputs.def, algTransformation);
-        return combineTransformations(inputs.def, inputs.setupTransformation, inverseAlgTransformation);
+        const algTransformation = inputs.indexer.transformationAtIndex(inputs.indexer.numAnimatedLeaves());
+        const inverseAlgTransformation = algTransformation.invert();
+        return inputs.setupTransformation.applyTransformation(inverseAlgTransformation);
       }
       default:
         throw new Error("Unimplemented!");
@@ -3453,8 +3563,8 @@ var CoarseTimelineInfoProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/CurrentLeavesProp.ts
-var CurrentLeavesProp = class extends TwistyPropDerived {
+// src/cubing/twisty/model/props/puzzle/state/CurrentMoveInfoProp.ts
+var CurrentMoveInfoProp = class extends TwistyPropDerived {
   derive(inputs) {
     function addCatchUpMove(currentMoveInfo) {
       if (inputs.detailedTimelineInfo.atEnd && inputs.catchUpMove.move !== null) {
@@ -3526,19 +3636,18 @@ var CurrentLeavesSimplifiedProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/state/CurrentTransformationProp.ts
-var CurrentTransformationProp = class extends TwistyPropDerived {
+// src/cubing/twisty/model/props/puzzle/state/CurrentStateProp.ts
+var CurrentStateProp = class extends TwistyPropDerived {
   derive(inputs) {
-    let state = inputs.indexer.transformAtIndex(inputs.currentLeavesSimplified.stateIndex);
-    state = combineTransformations(inputs.def, inputs.anchoredStart, state);
-    const ksolvePuzzle = new KPuzzleWrapper(inputs.def);
+    let transformation = inputs.indexer.transformationAtIndex(inputs.currentLeavesSimplified.stateIndex);
+    transformation = inputs.anchoredStart.applyTransformation(transformation);
     for (const finishingMove of inputs.currentLeavesSimplified.movesFinishing) {
-      state = combineTransformations(inputs.def, state, ksolvePuzzle.stateFromMove(finishingMove));
+      transformation = transformation.applyMove(finishingMove);
     }
     for (const finishedMove of inputs.currentLeavesSimplified.movesFinished) {
-      state = combineTransformations(inputs.def, state, ksolvePuzzle.stateFromMove(finishedMove));
+      transformation = transformation.applyMove(finishedMove);
     }
-    return state;
+    return transformation.toKState();
   }
 };
 
@@ -3546,16 +3655,16 @@ var CurrentTransformationProp = class extends TwistyPropDerived {
 var LegacyPositionProp = class extends TwistyPropDerived {
   derive(inputs) {
     return {
-      state: inputs.transformation,
+      state: inputs.state,
       movesInProgress: inputs.currentMoveInfo.currentMoves
     };
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/structure/PuzzleDefProp.ts
-var PuzzleDefProp = class extends TwistyPropDerived {
+// src/cubing/twisty/model/props/puzzle/structure/KPuzzleProp.ts
+var KPuzzleProp = class extends TwistyPropDerived {
   async derive(inputs) {
-    return inputs.puzzleLoader.def();
+    return inputs.puzzleLoader.kpuzzle();
   }
 };
 
@@ -3644,15 +3753,15 @@ var TwistyPlayerModel = class {
       puzzleIDRequest: this.puzzleIDRequestProp,
       puzzleDescriptionRequest: this.puzzleDescriptionRequestProp
     }, this.userVisibleErrorTracker);
-    this.puzzleDefProp = new PuzzleDefProp({ puzzleLoader: this.puzzleLoaderProp });
+    this.kpuzzleProp = new KPuzzleProp({ puzzleLoader: this.puzzleLoaderProp });
     this.puzzleIDProp = new PuzzleIDProp({ puzzleLoader: this.puzzleLoaderProp });
     this.puzzleAlgProp = new PuzzleAlgProp({
       algWithIssues: this.algProp,
-      puzzleDef: this.puzzleDefProp
+      kpuzzle: this.kpuzzleProp
     });
     this.puzzleSetupProp = new PuzzleAlgProp({
       algWithIssues: this.setupProp,
-      puzzleDef: this.puzzleDefProp
+      kpuzzle: this.kpuzzleProp
     });
     this.visualizationStrategyProp = new VisualizationStrategyProp({
       visualizationRequest: this.visualizationFormatProp,
@@ -3673,18 +3782,17 @@ var TwistyPlayerModel = class {
     });
     this.setupTransformationProp = new AlgTransformationProp({
       alg: this.puzzleSetupProp,
-      def: this.puzzleDefProp
+      kpuzzle: this.kpuzzleProp
     });
     this.indexerProp = new IndexerProp({
       indexerConstructor: this.indexerConstructorProp,
       algWithIssues: this.puzzleAlgProp,
-      def: this.puzzleDefProp
+      kpuzzle: this.kpuzzleProp
     });
     this.anchoredStartProp = new AnchoredStartProp({
       setupAnchor: this.setupAnchorProp,
       setupTransformation: this.setupTransformationProp,
-      indexer: this.indexerProp,
-      def: this.puzzleDefProp
+      indexer: this.indexerProp
     });
     this.timeRangeProp = new TimeRangeProp({
       indexer: this.indexerProp
@@ -3698,7 +3806,7 @@ var TwistyPlayerModel = class {
       detailedTimelineInfo: this.detailedTimelineInfoProp,
       playingInfo: this.playingInfoProp
     });
-    this.currentLeavesProp = new CurrentLeavesProp({
+    this.currentMoveInfoProp = new CurrentMoveInfoProp({
       indexer: this.indexerProp,
       detailedTimelineInfo: this.detailedTimelineInfoProp,
       catchUpMove: this.catchUpMoveProp
@@ -3708,26 +3816,26 @@ var TwistyPlayerModel = class {
       viewerLink: this.viewerLinkProp
     });
     this.currentLeavesSimplifiedProp = new CurrentLeavesSimplifiedProp({
-      currentMoveInfo: this.currentLeavesProp
+      currentMoveInfo: this.currentMoveInfoProp
     });
-    this.currentTransformationProp = new CurrentTransformationProp({
+    this.currentStateProp = new CurrentStateProp({
       anchoredStart: this.anchoredStartProp,
       currentLeavesSimplified: this.currentLeavesSimplifiedProp,
-      indexer: this.indexerProp,
-      def: this.puzzleDefProp
+      indexer: this.indexerProp
     });
     this.legacyPositionProp = new LegacyPositionProp({
-      currentMoveInfo: this.currentLeavesProp,
-      transformation: this.currentTransformationProp
+      currentMoveInfo: this.currentMoveInfoProp,
+      state: this.currentStateProp
     });
   }
   async twizzleLink() {
     const url = new URL("https://alpha.twizzle.net/edit/");
-    const [puzzle, alg, setup, anchor] = await Promise.all([
+    const [puzzle, alg, setup, anchor, experimentalStickering] = await Promise.all([
       this.puzzleIDProp.get(),
       this.algProp.get(),
       this.setupProp.get(),
-      this.setupAnchorProp.get()
+      this.setupAnchorProp.get(),
+      this.stickeringProp.get()
     ]);
     if (!alg.alg.experimentalIsEmpty()) {
       url.searchParams.set("alg", alg.alg.toString());
@@ -3738,6 +3846,9 @@ var TwistyPlayerModel = class {
     if (anchor !== "start") {
       url.searchParams.set("setup-anchor", anchor);
     }
+    if (experimentalStickering !== "full") {
+      url.searchParams.set("experimental-stickering", experimentalStickering);
+    }
     if (puzzle !== "3x3x3") {
       url.searchParams.set("puzzle", puzzle);
     }
@@ -4374,7 +4485,7 @@ var TwistyAlgViewer = class extends HTMLElementShim {
     const sourceAlg = (await this.twistyPlayer.experimentalModel.algProp.get()).alg;
     const parsedAlg = "startCharIndex" in sourceAlg ? sourceAlg : Alg.fromString(sourceAlg.toString());
     this.setAlg(parsedAlg);
-    twistyPlayer.experimentalModel.currentLeavesProp.addFreshListener((currentMoveInfo) => {
+    twistyPlayer.experimentalModel.currentMoveInfoProp.addFreshListener((currentMoveInfo) => {
       let moveInfo = currentMoveInfo.currentMoves[0];
       moveInfo ?? (moveInfo = currentMoveInfo.movesStarting[0]);
       moveInfo ?? (moveInfo = currentMoveInfo.movesFinishing[0]);
@@ -4914,7 +5025,7 @@ customElementsShim.define("twisty-alg-editor", TwistyAlgEditor);
 export {
   Cube3D,
   NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE,
-  KPuzzleWrapper as KSolvePuzzle,
+  KPuzzleSVGWrapper as ExperimentalKPuzzleSVGWrapper,
   PG3D,
   SimpleAlgIndexer,
   TreeAlgIndexer,