cubing 0.26.6 → 0.28.0

package/dist/esm/twisty/index.js

@@ -9,32 +9,33 @@ import {
   TwistyPropDerived,
   TwistyPropSource,
   proxy3D
-} from "../chunk-LJBHUHEP.js";
-import "../chunk-YBDBUTYE.js";
+} from "../chunk-7BLWQDZX.js";
+import "../chunk-GVPTO3OF.js";
 import {
   countAnimatedLeaves,
   countMoves
-} from "../chunk-NHCGS73I.js";
+} from "../chunk-47SWOA3X.js";
 import {
   cube3x3x3,
   puzzles
-} from "../chunk-GOBAXDTU.js";
+} from "../chunk-JAGHV77R.js";
 import {
   customPGPuzzleLoader
-} from "../chunk-VFDAQ42O.js";
-import "../chunk-GNKVWDWW.js";
+} from "../chunk-LTPPXK6F.js";
+import "../chunk-UP6RBLG2.js";
 import {
   Alg,
   AlgBuilder,
   Conjugate,
   Grouping,
   Move,
+  Pause,
   TraversalDownUp,
   TraversalUp,
   direct,
   directedGenerator,
   experimentalAppendMove
-} from "../chunk-FCB447RN.js";
+} from "../chunk-GXZIBFSN.js";
 import {
   __privateAdd,
   __privateGet,
@@ -543,13 +544,14 @@ var KPuzzleSVGWrapper = class {
       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");
+    this.wrapperElement = document.createElement("div");
+    this.wrapperElement.classList.add("svg-wrapper");
+    this.wrapperElement.innerHTML = svgSource;
+    const svgElem = this.wrapperElement.querySelector("svg");
     if (!svgElem) {
       throw new Error("Could not get SVG element");
     }
+    this.svgElement = svgElem;
     if (xmlns !== svgElem.namespaceURI) {
       throw new Error("Unexpected XML namespace");
     }
@@ -672,7 +674,7 @@ var KPuzzleSVGWrapper = class {
     return orbitName + "-l" + idx + "-o" + orientation;
   }
   elementByID(id) {
-    return this.element.querySelector("#" + id);
+    return this.wrapperElement.querySelector("#" + id);
   }
 };
 
@@ -713,9 +715,9 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
           partialMove = move.invert();
         }
         const newState = position.state.applyMove(partialMove);
-        this.svg.draw(position.state, newState, position.movesInProgress[0].fraction);
+        this.svgWrapper.draw(position.state, newState, position.movesInProgress[0].fraction);
       } else {
-        this.svg.draw(position.state);
+        this.svgWrapper.draw(position.state);
         __privateSet(this, _cachedPosition, position);
       }
     } catch (e) {
@@ -736,14 +738,14 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
     })();
   }
   resetSVG(appearance) {
-    if (this.svg) {
-      this.removeElement(this.svg.element);
+    if (this.svgWrapper) {
+      this.removeElement(this.svgWrapper.wrapperElement);
     }
     if (!this.kpuzzle) {
       return;
     }
-    this.svg = new KPuzzleSVGWrapper(this.kpuzzle, this.svgSource, appearance);
-    this.addElement(this.svg.element);
+    this.svgWrapper = new KPuzzleSVGWrapper(this.kpuzzle, this.svgSource, appearance);
+    this.addElement(this.svgWrapper.wrapperElement);
     if (__privateGet(this, _cachedPosition)) {
       this.onPositionChange(__privateGet(this, _cachedPosition));
     }
@@ -932,12 +934,13 @@ var Twisty3DPuzzleWrapper = class extends EventTarget {
         }
       }
     });
-    __privateGet(this, _freshListenerManager4).addMultiListener([
+    __privateGet(this, _freshListenerManager4).addMultiListener3([
+      this.model.twistySceneModel.stickering,
       this.model.twistySceneModel.foundationStickerSprite,
       this.model.twistySceneModel.hintStickerSprite
     ], async (inputs) => {
       if ("experimentalUpdateTexture" in await this.twisty3DPuzzle()) {
-        (await this.twisty3DPuzzle()).experimentalUpdateTexture(true, ...inputs);
+        (await this.twisty3DPuzzle()).experimentalUpdateTexture(inputs[0] === "picture", inputs[1], inputs[2]);
         this.scheduleRender();
       }
     });
@@ -1438,7 +1441,7 @@ function shareRenderer() {
     return true;
   }
 }
-var _setupBasicPresses, setupBasicPresses_fn, _onResizeStaleDropper, _width, _height, _onResize, onResize_fn, _cachedRenderer, _cachedCanvas, _cachedDragTracker, _dragTracker, dragTracker_fn, _cachedCamera, _cachedOrbitControls, _disconnectionFunctions, _scheduler;
+var _setupBasicPresses, setupBasicPresses_fn, _onResizeStaleDropper, _width, _height, _onResize, onResize_fn, _cachedRenderer, _cachedCanvas, _cachedDragTracker, _dragTracker, dragTracker_fn, _cachedCamera, _cachedOrbitControls, _disconnectionFunctions, _experimentalNextRenderFinishedCallback, _scheduler;
 var Twisty3DVantage = class extends ManagedCustomElement {
   constructor(model, scene, options) {
     super();
@@ -1460,6 +1463,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     __privateAdd(this, _cachedCamera, null);
     __privateAdd(this, _cachedOrbitControls, null);
     __privateAdd(this, _disconnectionFunctions, []);
+    __privateAdd(this, _experimentalNextRenderFinishedCallback, null);
     __privateAdd(this, _scheduler, new RenderScheduler(this.render.bind(this)));
     this.scene = scene ?? null;
     this.loadingElement = this.addElement(document.createElement("div"));
@@ -1543,7 +1547,11 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     }
     __privateSet(this, _disconnectionFunctions, []);
   }
+  experimentalNextRenderFinishedCallback(callback) {
+    __privateSet(this, _experimentalNextRenderFinishedCallback, callback);
+  }
   async render() {
+    var _a;
     if (!this.scene) {
       throw new Error("Attempted to render without a scene");
     }
@@ -1559,6 +1567,8 @@ var Twisty3DVantage = class extends ManagedCustomElement {
       (await this.renderer()).render(scene, camera);
     }
     this.stats?.end();
+    (_a = __privateGet(this, _experimentalNextRenderFinishedCallback)) == null ? void 0 : _a.call(this);
+    __privateSet(this, _experimentalNextRenderFinishedCallback, null);
   }
   scheduleRender() {
     __privateGet(this, _scheduler).requestAnimFrame();
@@ -1639,6 +1649,7 @@ dragTracker_fn = async function() {
 _cachedCamera = new WeakMap();
 _cachedOrbitControls = new WeakMap();
 _disconnectionFunctions = new WeakMap();
+_experimentalNextRenderFinishedCallback = new WeakMap();
 _scheduler = new WeakMap();
 customElementsShim.define("twisty-3d-vantage", Twisty3DVantage);
 
@@ -2257,7 +2268,7 @@ async function getDefaultFilename(model) {
     model.puzzleID.get(),
     model.alg.get()
   ]);
-  return `[${puzzleID}]${algWithIssues.alg.experimentalNumUnits() === 0 ? "" : " " + algWithIssues.alg.toString()}`;
+  return `[${puzzleID}]${algWithIssues.alg.experimentalNumChildAlgNodes() === 0 ? "" : " " + algWithIssues.alg.toString()}`;
 }
 function downloadURL(url, name, extension = "png") {
   const a = document.createElement("a");
@@ -2568,8 +2579,8 @@ var AlgDuration = class extends TraversalUp {
   }
   traverseAlg(alg) {
     let total = 0;
-    for (const unit of alg.units()) {
-      total += this.traverseUnit(unit);
+    for (const algNode of alg.childAlgNodes()) {
+      total += this.traverseAlgNode(algNode);
     }
     return total;
   }
@@ -2604,10 +2615,10 @@ var SimpleAlgIndexer = class {
     this.moves = new Alg(alg.experimentalExpand());
   }
   getAnimLeaf(index) {
-    return Array.from(this.moves.units())[index];
+    return Array.from(this.moves.childAlgNodes())[index];
   }
   indexToMoveStartTimestamp(index) {
-    const alg = new Alg(Array.from(this.moves.units()).slice(0, index));
+    const alg = new Alg(Array.from(this.moves.childAlgNodes()).slice(0, index));
     return this.durationFn.traverseAlg(alg);
   }
   timestampToIndex(timestamp) {
@@ -2626,7 +2637,7 @@ var SimpleAlgIndexer = class {
   }
   transformationAtIndex(index) {
     let state = this.kpuzzle.identityTransformation();
-    for (const move of Array.from(this.moves.units()).slice(0, index)) {
+    for (const move of Array.from(this.moves.childAlgNodes()).slice(0, index)) {
       state = state.applyMove(move);
     }
     return state;
@@ -2663,8 +2674,8 @@ function isSameAxis(move1, move2) {
 var LocalSimulMoves = class extends TraversalUp {
   traverseAlg(alg) {
     const processed = [];
-    for (const nestedUnit of alg.units()) {
-      processed.push(this.traverseUnit(nestedUnit));
+    for (const childAlgNode of alg.childAlgNodes()) {
+      processed.push(this.traverseAlgNode(childAlgNode));
     }
     return Array.prototype.concat(...processed);
   }
@@ -2672,12 +2683,12 @@ var LocalSimulMoves = class extends TraversalUp {
     if (alg.experimentalIsEmpty()) {
       return [];
     }
-    for (const unit of alg.units()) {
-      if (!unit.is(Move)) {
+    for (const algNode of alg.childAlgNodes()) {
+      if (!algNode.is(Move)) {
         return this.traverseAlg(alg);
       }
     }
-    const moves = Array.from(alg.units());
+    const moves = Array.from(alg.childAlgNodes());
     let maxSimulDur = defaultDurationForAmount(moves[0].amount);
     for (let i = 0; i < moves.length - 1; i++) {
       for (let j = 1; j < moves.length; j++) {
@@ -2689,7 +2700,7 @@ var LocalSimulMoves = class extends TraversalUp {
     }
     const localMovesWithRange = moves.map((blockMove) => {
       return {
-        animLeafUnit: blockMove,
+        animLeafAlgNode: blockMove,
         msUntilNext: 0,
         duration: maxSimulDur
       };
@@ -2709,7 +2720,7 @@ var LocalSimulMoves = class extends TraversalUp {
     const duration = defaultDurationForAmount(move.amount);
     return [
       {
-        animLeafUnit: move,
+        animLeafAlgNode: move,
         msUntilNext: duration,
         duration
       }
@@ -2741,10 +2752,13 @@ var LocalSimulMoves = class extends TraversalUp {
     return Array.prototype.concat(...processed);
   }
   traversePause(pause) {
+    if (pause.experimentalNISSGrouping) {
+      return [];
+    }
     const duration = defaultDurationForAmount(1);
     return [
       {
-        animLeafUnit: pause,
+        animLeafAlgNode: pause,
         msUntilNext: duration,
         duration
       }
@@ -2763,7 +2777,7 @@ function simulMoves(a) {
   let timestamp = 0;
   const l = localSimulMoves(a).map((localSimulMove) => {
     const leafWithRange = {
-      animLeaf: localSimulMove.animLeafUnit,
+      animLeaf: localSimulMove.animLeafAlgNode,
       start: timestamp,
       end: timestamp + localSimulMove.duration
     };
@@ -2965,7 +2979,7 @@ var SimultaneousMoveIndexer = class {
 };
 
 // src/cubing/twisty/controllers/indexer/tree/AlgWalker.ts
-var AlgPartDecoration = class {
+var AlgWalkterDecoration = class {
   constructor(moveCount, duration, forward, backward, children = []) {
     this.moveCount = moveCount;
     this.duration = duration;
@@ -2981,15 +2995,15 @@ var DecoratorConstructor = class extends TraversalUp {
     this.durationFn = new AlgDuration(defaultDurationForAmount);
     this.cache = {};
     this.identity = kpuzzle.identityTransformation();
-    this.dummyLeaf = new AlgPartDecoration(0, 0, this.identity, this.identity, []);
+    this.dummyLeaf = new AlgWalkterDecoration(0, 0, this.identity, this.identity, []);
   }
   traverseAlg(alg) {
     let moveCount = 0;
     let duration = 0;
     let transformation = this.identity;
     const child = [];
-    for (const unit of alg.units()) {
-      const apd = this.traverseUnit(unit);
+    for (const algNode of alg.childAlgNodes()) {
+      const apd = this.traverseAlgNode(algNode);
       moveCount += apd.moveCount;
       duration += apd.duration;
       if (transformation === this.identity) {
@@ -2999,7 +3013,7 @@ var DecoratorConstructor = class extends TraversalUp {
       }
       child.push(apd);
     }
-    return new AlgPartDecoration(moveCount, duration, transformation, transformation.invert(), child);
+    return new AlgWalkterDecoration(moveCount, duration, transformation, transformation.invert(), child);
   }
   traverseGrouping(grouping) {
     const dec = this.traverseAlg(grouping.alg);
@@ -3012,7 +3026,7 @@ var DecoratorConstructor = class extends TraversalUp {
       return r;
     }
     const transformation = this.kpuzzle.moveToTransformation(move);
-    r = new AlgPartDecoration(1, this.durationFn.traverseUnit(move), transformation, transformation.invert());
+    r = new AlgWalkterDecoration(1, this.durationFn.traverseAlgNode(move), transformation, transformation.invert());
     this.cache[key] = r;
     return r;
   }
@@ -3022,7 +3036,7 @@ var DecoratorConstructor = class extends TraversalUp {
     const AB = decA.forward.applyTransformation(decB.forward);
     const ApBp = decA.backward.applyTransformation(decB.backward);
     const ABApBp = AB.applyTransformation(ApBp);
-    const dec = new AlgPartDecoration(2 * (decA.moveCount + decB.moveCount), 2 * (decA.duration + decB.duration), ABApBp, ABApBp.invert(), [decA, decB]);
+    const dec = new AlgWalkterDecoration(2 * (decA.moveCount + decB.moveCount), 2 * (decA.duration + decB.duration), ABApBp, ABApBp.invert(), [decA, decB]);
     return this.mult(dec, 1, [dec, decA, decB]);
   }
   traverseConjugate(conjugate) {
@@ -3030,11 +3044,14 @@ var DecoratorConstructor = class extends TraversalUp {
     const decB = this.traverseAlg(conjugate.B);
     const AB = decA.forward.applyTransformation(decB.forward);
     const ABAp = AB.applyTransformation(decA.backward);
-    const dec = new AlgPartDecoration(2 * decA.moveCount + decB.moveCount, 2 * decA.duration + decB.duration, ABAp, ABAp.invert(), [decA, decB]);
+    const dec = new AlgWalkterDecoration(2 * decA.moveCount + decB.moveCount, 2 * decA.duration + decB.duration, ABAp, ABAp.invert(), [decA, decB]);
     return this.mult(dec, 1, [dec, decA, decB]);
   }
   traversePause(pause) {
-    return new AlgPartDecoration(1, this.durationFn.traverseUnit(pause), this.identity, this.identity);
+    if (pause.experimentalNISSGrouping) {
+      return this.dummyLeaf;
+    }
+    return new AlgWalkterDecoration(1, this.durationFn.traverseAlgNode(pause), this.identity, this.identity);
   }
   traverseNewline(_newline) {
     return this.dummyLeaf;
@@ -3045,7 +3062,7 @@ var DecoratorConstructor = class extends TraversalUp {
   mult(apd, n, child) {
     const absn = Math.abs(n);
     const st = apd.forward.selfMultiply(n);
-    return new AlgPartDecoration(apd.moveCount * absn, apd.duration * absn, st, st.invert(), child);
+    return new AlgWalkterDecoration(apd.moveCount * absn, apd.duration * absn, st, st.invert(), child);
   }
 };
 var WalkerDown = class {
@@ -3055,10 +3072,10 @@ var WalkerDown = class {
   }
 };
 var AlgWalker = class extends TraversalDownUp {
-  constructor(kpuzzle, algOrUnit, apd) {
+  constructor(kpuzzle, algOrAlgNode, apd) {
     super();
     this.kpuzzle = kpuzzle;
-    this.algOrUnit = algOrUnit;
+    this.algOrAlgNode = algOrAlgNode;
     this.apd = apd;
     this.i = -1;
     this.dur = -1;
@@ -3091,16 +3108,16 @@ var AlgWalker = class extends TraversalDownUp {
     this.moveDuration = 0;
     this.back = false;
     this.st = this.kpuzzle.identityTransformation();
-    const r = this.algOrUnit.is(Alg) ? this.traverseAlg(this.algOrUnit, this.root) : this.traverseUnit(this.algOrUnit, this.root);
+    const r = this.algOrAlgNode.is(Alg) ? this.traverseAlg(this.algOrAlgNode, this.root) : this.traverseAlgNode(this.algOrAlgNode, this.root);
     return r;
   }
   traverseAlg(alg, wd) {
     if (!this.firstcheck(wd)) {
       return false;
     }
-    let i = wd.back ? alg.experimentalNumUnits() - 1 : 0;
-    for (const unit of directedGenerator(alg.units(), wd.back ? -1 /* Backwards */ : 1 /* Forwards */)) {
-      if (this.traverseUnit(unit, new WalkerDown(wd.apd.children[i], wd.back))) {
+    let i = wd.back ? alg.experimentalNumChildAlgNodes() - 1 : 0;
+    for (const algNode of directedGenerator(alg.childAlgNodes(), wd.back ? -1 /* Backwards */ : 1 /* Forwards */)) {
+      if (this.traverseAlgNode(algNode, new WalkerDown(wd.apd.children[i], wd.back))) {
         return true;
       }
       i += wd.back ? -1 : 1;
@@ -3207,9 +3224,9 @@ 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) {
+  for (const algNode of alg.childAlgNodes()) {
+    chunkAlgBuilder.push(algNode);
+    if (chunkAlgBuilder.experimentalNumAlgNodes() >= chunkMaxLength) {
       mainAlgBuilder.push(new Grouping(chunkAlgBuilder.toAlg()));
       chunkAlgBuilder.reset();
     }
@@ -3219,7 +3236,7 @@ function chunkifyAlg(alg, chunkMaxLength) {
 }
 var ChunkAlgs = class extends TraversalUp {
   traverseAlg(alg) {
-    const algLength = alg.experimentalNumUnits();
+    const algLength = alg.experimentalNumChildAlgNodes();
     if (algLength < MIN_CHUNKING_THRESHOLD) {
       return alg;
     }
@@ -4279,15 +4296,19 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
       });
     }
   }
-  async experimentalCurrentCanvases() {
+  async experimentalCurrentVantages() {
     this.connectedCallback();
     const wrapper = __privateGet(this, _visualizationWrapper);
-    const canvases = [];
     if (wrapper instanceof Twisty3DSceneWrapper) {
-      const vantages = wrapper.experimentalVantages();
-      for (const vantage of vantages) {
-        canvases.push((await vantage.canvasInfo()).canvas);
-      }
+      return wrapper.experimentalVantages();
+    }
+    return [];
+  }
+  async experimentalCurrentCanvases() {
+    const vantages = await this.experimentalCurrentVantages();
+    const canvases = [];
+    for (const vantage of vantages) {
+      canvases.push((await vantage.canvasInfo()).canvas);
     }
     return canvases;
   }
@@ -4296,17 +4317,18 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     const sceneWrapper = await __privateGet(this, _initial3DVisualizationWrapper).promise;
     const puzzleWrapper = await sceneWrapper.experimentalTwisty3DPuzzleWrapper();
     const twisty3DPuzzlePromise = puzzleWrapper.twisty3DPuzzle();
-    const setTimeoutPromise = new Promise((resolve, _) => setTimeout(resolve, 0));
+    const safeToCallback = (async () => {
+      await twisty3DPuzzlePromise;
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    })();
     if (puzzleChangeCallback) {
       const scheduler = new RenderScheduler(async () => {
       });
       puzzleWrapper.addEventListener("render-scheduled", async () => {
         if (!scheduler.requestIsPending()) {
           scheduler.requestAnimFrame();
-          (async () => {
-            await setTimeoutPromise;
-            puzzleChangeCallback();
-          })();
+          await safeToCallback;
+          puzzleChangeCallback();
         }
       });
     }
@@ -4354,7 +4376,7 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     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);
+      const str = new XMLSerializer().serializeToString(twisty2DPuzzle.svgWrapper.svgElement);
       const url = URL.createObjectURL(new Blob([str]));
       downloadURL(url, filename ?? await getDefaultFilename(this.experimentalModel), "svg");
     } else {
@@ -4399,7 +4421,11 @@ customElementsShim.define("twisty-player", TwistyPlayer);
 // src/cubing/twisty/views/TwistyAlgViewer.css.ts
 var twistyAlgViewerCSS = new CSSSource(`
 :host {
-  display: inline-grid;
+  display: inline;
+}
+
+.wrapper {
+  display: inline;
 }
 
 a:not(:hover) {
@@ -4424,9 +4450,9 @@ twisty-alg-leaf-elem.twisty-alg-comment {
 // src/cubing/twisty/views/TwistyAlgViewer.ts
 var DEFAULT_OFFSET_MS = 250;
 var TwistyAlgLeafElem = class extends ManagedCustomElement {
-  constructor(className, text, dataDown, algOrUnit, offsetIntoMove, clickable) {
+  constructor(className, text, dataDown, algOrAlgNode, offsetIntoMove, clickable) {
     super({ mode: "open" });
-    this.algOrUnit = algOrUnit;
+    this.algOrAlgNode = algOrAlgNode;
     this.classList.add(className);
     this.addCSS(twistyAlgViewerCSS);
     if (clickable) {
@@ -4450,9 +4476,9 @@ var TwistyAlgLeafElem = class extends ManagedCustomElement {
 };
 customElementsShim.define("twisty-alg-leaf-elem", TwistyAlgLeafElem);
 var TwistyAlgWrapperElem = class extends HTMLElementShim {
-  constructor(className, algOrUnit) {
+  constructor(className, algOrAlgNode) {
     super();
-    this.algOrUnit = algOrUnit;
+    this.algOrAlgNode = algOrAlgNode;
     this.queue = [];
     this.classList.add(className);
   }
@@ -4493,16 +4519,24 @@ var AlgToDOMTree = class extends TraversalDownUp {
     let moveCount = 0;
     const element = new TwistyAlgWrapperElem("twisty-alg-alg", alg);
     let first = true;
-    for (const unit of direct(alg.units(), dataDown.direction)) {
+    for (const algNode of direct(alg.childAlgNodes(), dataDown.direction)) {
       if (!first) {
         element.addString(" ");
       }
       first = false;
-      moveCount += element.addElem(this.traverseUnit(unit, {
-        earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
-        twistyAlgViewer: dataDown.twistyAlgViewer,
-        direction: dataDown.direction
-      }));
+      if (algNode.as(Pause)?.experimentalNISSGrouping) {
+        element.addString("^(");
+      }
+      if (!algNode.as(Grouping)?.experimentalNISSPlaceholder) {
+        moveCount += element.addElem(this.traverseAlgNode(algNode, {
+          earliestMoveIndex: dataDown.earliestMoveIndex + moveCount,
+          twistyAlgViewer: dataDown.twistyAlgViewer,
+          direction: dataDown.direction
+        }));
+      }
+      if (algNode.as(Pause)?.experimentalNISSGrouping) {
+        element.addString(")");
+      }
     }
     element.flushQueue(dataDown.direction);
     return {
@@ -4597,6 +4631,9 @@ var AlgToDOMTree = class extends TraversalDownUp {
     };
   }
   traversePause(pause, dataDown) {
+    if (pause.experimentalNISSGrouping) {
+      return this.traverseAlg(pause.experimentalNISSGrouping.alg, dataDown);
+    }
     return {
       moveCount: 1,
       element: new TwistyAlgLeafElem("twisty-alg-pause", ".", dataDown, pause, true, true)
@@ -4746,17 +4783,17 @@ customElementsShim.define("twisty-alg-viewer", TwistyAlgViewer);
 // src/cubing/twisty/views/TwistyAlgEditor/LeafTokens.ts
 var LeafTokens = class extends TraversalDownUp {
   traverseAlg(alg, dataDown) {
-    const unitArrays = [];
+    const algNodeArrays = [];
     let numMovesInside = 0;
-    for (const unit of alg.units()) {
-      const dataUp = this.traverseUnit(unit, {
+    for (const algNode of alg.childAlgNodes()) {
+      const dataUp = this.traverseAlgNode(algNode, {
         numMovesSofar: dataDown.numMovesSofar + numMovesInside
       });
-      unitArrays.push(dataUp.tokens);
+      algNodeArrays.push(dataUp.tokens);
       numMovesInside += dataUp.numLeavesInside;
     }
     return {
-      tokens: Array.prototype.concat(...unitArrays),
+      tokens: Array.prototype.concat(...algNodeArrays),
       numLeavesInside: numMovesInside
     };
   }