cubing 0.21.0-pre8 → 0.21.2

package/dist/esm/twisty/index.js

@@ -15,13 +15,12 @@ import {
   controlsLocations,
   customElementsShim,
   defaultCameraOrbitCoordinates,
-  experimentalSetShareAllNewRenderers,
   experimentalShowRenderStats,
   pixelRatio,
   pyraminxLookAt,
   twisty3DCanvasCSS,
   twistyViewerWrapperCSS
-} from "../chunk-6BXLPCNQ.js";
+} from "../chunk-APIIMJG6.js";
 import {
   countAnimatedLeaves,
   countMoves
@@ -31,7 +30,7 @@ import {
   cubeAppearance,
   customPGPuzzleLoader,
   puzzles
-} from "../chunk-L6K5FKPV.js";
+} from "../chunk-MUQMBH2S.js";
 import {
   KPuzzle,
   KPuzzleSVGWrapper,
@@ -162,6 +161,54 @@ function modIntoRange(v, rangeMin, rangeMax) {
 }
 
 // src/cubing/twisty/controllers/TwistyAnimationController.ts
+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;
+  }
+  start() {
+    if (!this.catchingUp) {
+      this.lastTimestamp = performance.now();
+    }
+    this.catchingUp = true;
+    this.pendingFrame = true;
+    this.scheduler.requestAnimFrame();
+  }
+  stop() {
+    this.catchingUp = false;
+    this.scheduler.cancelAnimFrame();
+  }
+  animFrame(timestamp) {
+    this.scheduler.requestAnimFrame();
+    const delta = (timestamp - this.lastTimestamp) / this.catchUpMs;
+    this.lastTimestamp = timestamp;
+    this.model.catchUpMoveProp.set((async () => {
+      const previousCatchUpMove = await this.model.catchUpMoveProp.get();
+      if (previousCatchUpMove.move === null) {
+        return previousCatchUpMove;
+      }
+      const amount = previousCatchUpMove.amount + delta;
+      if (amount >= 1) {
+        this.pendingFrame = true;
+        this.stop();
+        this.model.timestampRequestProp.set("end");
+        return {
+          move: null,
+          amount: 0
+        };
+      }
+      this.pendingFrame = false;
+      return {
+        move: previousCatchUpMove.move,
+        amount
+      };
+    })());
+  }
+};
 var _effectiveTimestampMilliseconds, effectiveTimestampMilliseconds_fn, _animFrameEffectiveTimestampStaleDropper;
 var TwistyAnimationController = class {
   constructor(model, delegate) {
@@ -175,12 +222,21 @@ var TwistyAnimationController = class {
     this.model = model;
     this.lastTimestampPromise = __privateMethod(this, _effectiveTimestampMilliseconds, effectiveTimestampMilliseconds_fn).call(this);
     this.model.playingInfoProp.addFreshListener(this.onPlayingProp.bind(this));
+    this.catchUpHelper = new CatchUpHelper(this.model);
+    this.model.catchUpMoveProp.addFreshListener(this.onCatchUpMoveProp.bind(this));
   }
   async onPlayingProp(playingInfo) {
     if (playingInfo.playing !== this.playing) {
       playingInfo.playing ? this.play(playingInfo) : this.pause();
     }
   }
+  async onCatchUpMoveProp(catchUpMove) {
+    const catchingUp = catchUpMove.move !== null;
+    if (catchingUp !== this.catchUpHelper.catchingUp) {
+      catchingUp ? this.catchUpHelper.start() : this.catchUpHelper.stop();
+    }
+    this.scheduler.requestAnimFrame();
+  }
   jumpToStart(options) {
     this.model.timestampRequestProp.set("start");
     this.pause();
@@ -247,7 +303,7 @@ var TwistyAnimationController = class {
       this.model.currentLeavesProp.get()
     ]));
     const [playingInfo, lastTimestamp, timeRange, tempoScale, currentMoveInfo] = freshenerResult;
-    if (playingInfo.playing === false) {
+    if (!playingInfo.playing) {
       this.playing = false;
       return;
     }
@@ -377,6 +433,26 @@ twisty-scrubber {
   width: 100%;
   height: 100%;
 }
+
+.error-elem {
+  width: 100%;
+  height: 100%;
+  display: none;
+  place-content: center;
+  font-family: sans-serif;
+  box-shadow: inset 0 0 2em rgb(255, 0, 0);
+  color: red;
+  text-shadow: 0 0 0.2em white;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.wrapper.error .visualization-wrapper {
+  display: none;
+}
+
+.wrapper.error .error-elem {
+  display: grid;
+}
 `);
 
 // src/cubing/vendor/p-lazy/p-lazy.ts
@@ -420,11 +496,11 @@ function from(function_) {
 // src/cubing/twisty/heavy-code-imports/3d.ts
 var cachedConstructorProxy = null;
 async function proxy3D() {
-  return cachedConstructorProxy ?? (cachedConstructorProxy = import("../3d-TYWC5MQY.js"));
+  return cachedConstructorProxy ?? (cachedConstructorProxy = import("../3d-B25DP5PE.js"));
 }
 var THREEJS = from(async () => (await proxy3D()).T3I);
 
-// src/cubing/twisty/model/TwistyProp.ts
+// src/cubing/twisty/model/props/TwistyProp.ts
 var globalSourceGeneration = 0;
 var _children, _rawListeners, _scheduleRawDispatch, scheduleRawDispatch_fn, _rawDispatchPending, _dispatchRawListeners, dispatchRawListeners_fn, _freshListeners;
 var TwistyPropParent = class {
@@ -551,8 +627,9 @@ var SimpleTwistyPropSource = class extends TwistyPropSource {
 var NO_VALUE = Symbol("no value");
 var _parents, _cachedLastSuccessfulCalculation, _cachedLatestGenerationCalculation, _getParents, getParents_fn, _cacheDerive, cacheDerive_fn;
 var TwistyPropDerived = class extends TwistyPropParent {
-  constructor(parents) {
+  constructor(parents, userVisibleErrorTracker) {
     super();
+    this.userVisibleErrorTracker = userVisibleErrorTracker;
     __privateAdd(this, _getParents);
     __privateAdd(this, _cacheDerive);
     __privateAdd(this, _parents, void 0);
@@ -573,6 +650,7 @@ var TwistyPropDerived = class extends TwistyPropParent {
       output: __privateMethod(this, _cacheDerive, cacheDerive_fn).call(this, __privateMethod(this, _getParents, getParents_fn).call(this), generation, __privateGet(this, _cachedLastSuccessfulCalculation))
     };
     __privateSet(this, _cachedLatestGenerationCalculation, latestGenerationCalculation);
+    this.userVisibleErrorTracker?.reset();
     return latestGenerationCalculation.output;
   }
 };
@@ -623,7 +701,6 @@ var FreshListenerManager = class {
     let disconnected = false;
     const wrappedListener = (value) => {
       if (disconnected) {
-        console.warn("Should be disconnected!");
         return;
       }
       listener(value);
@@ -638,10 +715,10 @@ var FreshListenerManager = class {
     let disconnected = false;
     const wrappedListener = async (_) => {
       if (disconnected) {
-        console.warn("Should be disconnected!");
         return;
       }
-      const values = await Promise.all(props.map((prop) => prop.get()));
+      const promises = props.map((prop) => prop.get());
+      const values = await Promise.all(promises);
       listener(values);
     };
     for (const prop of props) {
@@ -731,7 +808,7 @@ var Twisty2DPuzzle = class extends ManagedCustomElement {
         __privateSet(this, _cachedPosition, position);
       }
     } catch (e) {
-      console.warn("Bad position. Pre-emptively disconnecting:", this.puzzleLoader?.id, e);
+      console.warn("Bad position (this doesn't necessarily mean something is wrong). Pre-emptively disconnecting:", this.puzzleLoader?.id, e);
       this.disconnect();
     }
   }
@@ -866,7 +943,6 @@ var Twisty3DPuzzleWrapper = class {
         (await this.twisty3DPuzzle()).onPositionChange(position);
         this.scheduleRender();
       } catch (e) {
-        console.warn("Bad position. Pre-emptively disconnecting:", this.puzzleLoader.id, e);
         this.disconnect();
       }
     });
@@ -943,6 +1019,32 @@ var Twisty3DPuzzleWrapper = class {
 _freshListenerManager4 = new WeakMap();
 _cachedTwisty3DPuzzle = new WeakMap();
 
+// src/cubing/twisty/views/3D/RendererPool.ts
+var renderers = [];
+async function renderPooled(width, height, canvas, scene, camera) {
+  if (width === 0 || height === 0) {
+    return;
+  }
+  if (renderers.length === 0) {
+    renderers.push(newRenderer());
+  }
+  const renderer = await renderers[0];
+  renderer.setSize(width, height);
+  renderer.render(scene, camera);
+  const context = canvas.getContext("2d");
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(renderer.domElement, 0, 0);
+}
+async function newRenderer() {
+  const rendererConstructor = (await THREEJS).WebGLRenderer;
+  const renderer = new rendererConstructor({
+    antialias: true,
+    alpha: true
+  });
+  renderer.setPixelRatio(pixelRatio());
+  return renderer;
+}
+
 // src/cubing/twisty/views/3D/TwistyOrbitControlsV2.ts
 import { Spherical } from "three";
 var INERTIA_DEFAULT = true;
@@ -1114,7 +1216,27 @@ async function setCameraFromOrbitCoordinates(camera, orbitCoordinates, backView
   camera.position.setFromSpherical(spherical);
   camera.lookAt(0, 0, 0);
 }
-var _onResizeStaleDropper, _onResize, onResize_fn, _cachedRenderer, _cachedCanvas, _cachedCamera, _cachedOrbitControls, _disconnectionFunctions2, _scheduler;
+var shareAllNewRenderers = null;
+function experimentalForceNewRendererSharing(share) {
+  shareAllNewRenderers = share;
+}
+var dedicatedRenderersSoFar = 0;
+var DEFAULT_MAX_DEDICATED_RENDERERS = 2;
+function shareRenderer() {
+  if (shareAllNewRenderers !== null) {
+    if (!shareAllNewRenderers) {
+      dedicatedRenderersSoFar++;
+    }
+    return shareAllNewRenderers;
+  }
+  if (dedicatedRenderersSoFar < DEFAULT_MAX_DEDICATED_RENDERERS) {
+    dedicatedRenderersSoFar++;
+    return false;
+  } else {
+    return true;
+  }
+}
+var _onResizeStaleDropper, _width, _height, _onResize, onResize_fn, _cachedRenderer, _cachedCanvas, _cachedCamera, _cachedOrbitControls, _disconnectionFunctions2, _scheduler;
 var Twisty3DVantage = class extends ManagedCustomElement {
   constructor(model, scene, options) {
     super();
@@ -1123,7 +1245,10 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     __privateAdd(this, _onResize);
     this.scene = null;
     this.stats = null;
+    this.rendererIsShared = shareRenderer();
     __privateAdd(this, _onResizeStaleDropper, new StaleDropper());
+    __privateAdd(this, _width, 0);
+    __privateAdd(this, _height, 0);
     __privateAdd(this, _cachedRenderer, null);
     __privateAdd(this, _cachedCanvas, null);
     __privateAdd(this, _cachedCamera, null);
@@ -1132,7 +1257,7 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     __privateAdd(this, _scheduler, new RenderScheduler(this.render.bind(this)));
     this.scene = scene ?? null;
     if (SHOW_STATS) {
-      this.stats = Stats();
+      this.stats = new Stats();
       this.stats.dom.style.position = "absolute";
       this.contentWrapper.appendChild(this.stats.dom);
     }
@@ -1147,19 +1272,18 @@ var Twisty3DVantage = class extends ManagedCustomElement {
     this.scheduleRender();
   }
   async renderer() {
-    return __privateGet(this, _cachedRenderer) ?? __privateSet(this, _cachedRenderer, (async () => {
-      const rendererConstructor = (await THREEJS).WebGLRenderer;
-      const renderer = new rendererConstructor({
-        antialias: true,
-        alpha: true
-      });
-      renderer.setPixelRatio(pixelRatio());
-      return renderer;
-    })());
+    if (this.rendererIsShared) {
+      throw new Error("renderer expected to be shared.");
+    }
+    return __privateGet(this, _cachedRenderer) ?? __privateSet(this, _cachedRenderer, newRenderer());
   }
   async canvas() {
     return __privateGet(this, _cachedCanvas) ?? __privateSet(this, _cachedCanvas, (async () => {
-      return (await this.renderer()).domElement;
+      if (this.rendererIsShared) {
+        return this.addElement(document.createElement("canvas"));
+      }
+      const renderer = await this.renderer();
+      return this.addElement(renderer.domElement);
     })());
   }
   async camera() {
@@ -1200,12 +1324,16 @@ var Twisty3DVantage = class extends ManagedCustomElement {
       throw new Error("Attempted to render without a scene");
     }
     this.stats?.begin();
-    const [renderer, scene, camera] = await Promise.all([
-      this.renderer(),
+    const [scene, camera, canvas] = await Promise.all([
       this.scene.scene(),
-      this.camera()
+      this.camera(),
+      this.canvas()
     ]);
-    renderer.render(scene, camera);
+    if (this.rendererIsShared) {
+      renderPooled(__privateGet(this, _width), __privateGet(this, _height), canvas, scene, camera);
+    } else {
+      (await this.renderer()).render(scene, camera);
+    }
     this.stats?.end();
   }
   scheduleRender() {
@@ -1213,11 +1341,15 @@ var Twisty3DVantage = class extends ManagedCustomElement {
   }
 };
 _onResizeStaleDropper = new WeakMap();
+_width = new WeakMap();
+_height = new WeakMap();
 _onResize = new WeakSet();
 onResize_fn = async function() {
-  const [camera, renderer] = await __privateGet(this, _onResizeStaleDropper).queue(Promise.all([this.camera(), this.renderer()]));
+  const camera = await __privateGet(this, _onResizeStaleDropper).queue(this.camera());
   const w = this.contentWrapper.clientWidth;
   const h = this.contentWrapper.clientHeight;
+  __privateSet(this, _width, w);
+  __privateSet(this, _height, h);
   const off = 0;
   let yoff = 0;
   let excess = 0;
@@ -1228,8 +1360,15 @@ onResize_fn = async function() {
   camera.aspect = w / h;
   camera.setViewOffset(w, h - excess, off, yoff, w, h);
   camera.updateProjectionMatrix();
-  renderer.setPixelRatio(pixelRatio());
-  renderer.setSize(w, h, true);
+  if (this.rendererIsShared) {
+    const canvas = await this.canvas();
+    canvas.width = w * pixelRatio();
+    canvas.height = h * pixelRatio();
+    canvas.style.width = w.toString();
+    canvas.style.height = w.toString();
+  } else {
+    (await this.renderer()).setSize(w, h, true);
+  }
   this.scheduleRender();
 };
 _cachedRenderer = new WeakMap();
@@ -1307,6 +1446,9 @@ var Twisty3DSceneWrapper = class extends ManagedCustomElement {
     vantage.disconnect();
     __privateGet(this, _currentTwisty3DPuzzleWrapper)?.disconnect();
   }
+  experimentalVantages() {
+    return __privateGet(this, _vantages).values();
+  }
   scheduleRender() {
     for (const vantage of __privateGet(this, _vantages)) {
       vantage.scheduleRender();
@@ -1487,7 +1629,7 @@ function requestFullscreen(element) {
   }
 }
 
-// src/cubing/twisty/model/depth-9/ButtonAppearanceProp.ts
+// src/cubing/twisty/model/props/viewer/ButtonAppearanceProp.ts
 var buttonIcons = [
   "skip-to-start",
   "skip-to-end",
@@ -1849,7 +1991,7 @@ function downloadURL(url, name, extension = "png") {
   a.click();
 }
 
-// src/cubing/twisty/model/depth-0/AlgProp.ts
+// src/cubing/twisty/model/props/puzzle/state/AlgProp.ts
 var AlgIssues = class {
   constructor(issues) {
     this.warnings = Object.freeze(issues?.warnings ?? []);
@@ -1914,42 +2056,42 @@ var AlgProp = class extends TwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/depth-0/BackgroundProp.ts
+// src/cubing/twisty/model/props/viewer/BackgroundProp.ts
 var BackgroundProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/depth-0/BackViewProp.ts
+// src/cubing/twisty/model/props/viewer/BackViewProp.ts
 var BackViewProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/depth-0/ControlPanelProp.ts
+// src/cubing/twisty/model/props/viewer/ControlPanelProp.ts
 var ControlPanelProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/depth-0/HintFaceletProp.ts
+// src/cubing/twisty/model/props/puzzle/display/HintFaceletProp.ts
 var HintFaceletProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/depth-0/IndexerConstructorRequestProp.ts
+// src/cubing/twisty/model/props/puzzle/state/IndexerConstructorRequestProp.ts
 var IndexerConstructorRequestProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/depth-0/LatitudeLimit.ts
+// src/cubing/twisty/model/props/viewer/LatitudeLimit.ts
 var DEFAULT_LATITUDE_LIMIT = 35;
 var LatitudeLimitProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
@@ -1957,7 +2099,7 @@ var LatitudeLimitProp = class extends SimpleTwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/depth-0/OrbitCoordinatesRequestProp.ts
+// src/cubing/twisty/model/props/viewer/OrbitCoordinatesRequestProp.ts
 function orbitCoordinatesEqual(c1, c2) {
   return c1.latitude === c2.latitude && c1.longitude === c2.longitude && c1.distance === c2.distance;
 }
@@ -1988,7 +2130,7 @@ var OrbitCoordinatesRequestProp = class extends TwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/depth-0/PlayingInfoProp.ts
+// src/cubing/twisty/model/props/timeline/PlayingInfoProp.ts
 var PlayingInfoProp = class extends TwistyPropSource {
   async getDefaultValue() {
     return {
@@ -2009,25 +2151,31 @@ var PlayingInfoProp = class extends TwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/depth-0/PuzzleDescriptionProp.ts
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleDescriptionProp.ts
 var PGPuzzleDescriptionStringProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return NO_VALUE;
   }
 };
 
-// src/cubing/twisty/model/depth-0/PuzzleIDRequestProp.ts
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleIDRequestProp.ts
 var PuzzleIDRequestProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return NO_VALUE;
   }
 };
 
-// src/cubing/twisty/model/depth-1/PuzzleLoaderProp.ts
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleLoaderProp.ts
 var PuzzleLoaderProp = class extends TwistyPropDerived {
   derive(inputs) {
     if (inputs.puzzleIDRequest && inputs.puzzleIDRequest !== NO_VALUE) {
-      return puzzles[inputs.puzzleIDRequest];
+      const puzzleLoader = puzzles[inputs.puzzleIDRequest];
+      if (!puzzleLoader) {
+        this.userVisibleErrorTracker.set({
+          errors: [`Invalid puzzle ID: ${inputs.puzzleIDRequest}`]
+        });
+      }
+      return puzzleLoader;
     }
     if (inputs.puzzleDescriptionRequest && inputs.puzzleDescriptionRequest !== NO_VALUE) {
       return customPGPuzzleLoader(inputs.puzzleDescriptionRequest);
@@ -2036,21 +2184,21 @@ var PuzzleLoaderProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-0/SetupAnchorProp.ts
+// src/cubing/twisty/model/props/puzzle/state/SetupAnchorProp.ts
 var SetupAnchorProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "start";
   }
 };
 
-// src/cubing/twisty/model/depth-0/StickeringProp.ts
+// src/cubing/twisty/model/props/puzzle/display/StickeringProp.ts
 var StickeringProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "full";
   }
 };
 
-// src/cubing/twisty/model/depth-0/TempoScaleProp.ts
+// src/cubing/twisty/model/props/timeline/TempoScaleProp.ts
 var TempoScaleProp = class extends TwistyPropSource {
   getDefaultValue() {
     return 1;
@@ -2060,7 +2208,7 @@ var TempoScaleProp = class extends TwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/depth-0/TimestampRequestProp.ts
+// src/cubing/twisty/model/props/timeline/TimestampRequestProp.ts
 var smartTimestamps = {
   "start": true,
   "end": true,
@@ -2088,7 +2236,7 @@ var TimestampRequestProp = class extends SimpleTwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/depth-0/URLProp.ts
+// src/cubing/twisty/model/props/general/URLProp.ts
 var URLProp = class extends TwistyPropSource {
   getDefaultValue() {
     return null;
@@ -2101,21 +2249,21 @@ var URLProp = class extends TwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/depth-0/ViewerLinkProp.ts
+// src/cubing/twisty/model/props/viewer/ViewerLinkProp.ts
 var ViewerLinkProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/depth-0/VisualizationProp.ts
+// src/cubing/twisty/model/props/viewer/VisualizationProp.ts
 var VisualizationFormatProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
     return "auto";
   }
 };
 
-// src/cubing/twisty/model/depth-4/OrbitCoordinatesProp.ts
+// src/cubing/twisty/model/props/viewer/OrbitCoordinatesProp.ts
 var OrbitCoordinatesProp = class extends TwistyPropDerived {
   canReuseValue(v1, v2) {
     return orbitCoordinatesEqual(v1, v2);
@@ -2138,14 +2286,14 @@ var OrbitCoordinatesProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-2/PuzzleIDProp.ts
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleIDProp.ts
 var PuzzleIDProp = class extends TwistyPropDerived {
   async derive(inputs) {
     return inputs.puzzleLoader.id;
   }
 };
 
-// src/cubing/twisty/model/depth-1/SpriteProp.ts
+// src/cubing/twisty/model/props/puzzle/display/SpriteProp.ts
 var cachedLoader = null;
 async function loader() {
   return cachedLoader ?? (cachedLoader = new (await THREEJS).TextureLoader());
@@ -2170,7 +2318,7 @@ var SpriteProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-3/VisualizationStrategyProp.ts
+// src/cubing/twisty/model/props/viewer/VisualizationStrategyProp.ts
 var VisualizationStrategyProp = class extends TwistyPropDerived {
   derive(inputs) {
     switch (inputs.puzzleID) {
@@ -2957,7 +3105,7 @@ var TreeAlgIndexer = class {
   }
 };
 
-// src/cubing/twisty/model/depth-4/IndexerConstructorProp.ts
+// src/cubing/twisty/model/props/puzzle/state/IndexerConstructorProp.ts
 var IndexerConstructorProp = class extends TwistyPropDerived {
   derive(inputs) {
     switch (inputs.indexerConstructorRequest) {
@@ -2979,7 +3127,7 @@ var IndexerConstructorProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-3/PuzzleAlgProp.ts
+// src/cubing/twisty/model/props/puzzle/state/PuzzleAlgProp.ts
 var PuzzleAlgProp = class extends TwistyPropDerived {
   async derive(inputs) {
     try {
@@ -3057,7 +3205,7 @@ var KPuzzleWrapper = class extends PuzzleWrapper {
   }
 };
 
-// src/cubing/twisty/model/depth-4/AlgTransformationProp.ts
+// src/cubing/twisty/model/props/puzzle/state/AlgTransformationProp.ts
 var AlgTransformationProp = class extends TwistyPropDerived {
   derive(input) {
     return this.applyAlg(input.def, input.alg.alg);
@@ -3069,7 +3217,7 @@ var AlgTransformationProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-5/IndexerProp.ts
+// src/cubing/twisty/model/props/puzzle/state/IndexerProp.ts
 var IndexerProp = class extends TwistyPropDerived {
   derive(input) {
     const kpuzzleWrapper = new KPuzzleWrapper(input.def);
@@ -3077,7 +3225,7 @@ var IndexerProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-6/AnchoredStartProp.ts
+// src/cubing/twisty/model/props/puzzle/state/AnchoredStartProp.ts
 var AnchoredStartProp = class extends TwistyPropDerived {
   derive(inputs) {
     switch (inputs.setupAnchor) {
@@ -3094,7 +3242,7 @@ var AnchoredStartProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-6/TimeRangeProp.ts
+// src/cubing/twisty/model/props/viewer/TimeRangeProp.ts
 var TimeRangeProp = class extends TwistyPropDerived {
   derive(inputs) {
     return {
@@ -3104,7 +3252,7 @@ var TimeRangeProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-7/DetailedTimelineInfoProp.ts
+// src/cubing/twisty/model/props/timeline/DetailedTimelineInfoProp.ts
 var _requestedTimestampToMilliseconds, requestedTimestampToMilliseconds_fn;
 var DetailedTimelineInfoProp = class extends TwistyPropDerived {
   constructor() {
@@ -3150,7 +3298,7 @@ requestedTimestampToMilliseconds_fn = function(inputs) {
   }
 };
 
-// src/cubing/twisty/model/depth-8/CoarseTimelineInfoProp.ts
+// src/cubing/twisty/model/props/timeline/CoarseTimelineInfoProp.ts
 var CoarseTimelineInfoProp = class extends TwistyPropDerived {
   derive(inputs) {
     return {
@@ -3164,11 +3312,23 @@ var CoarseTimelineInfoProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-8/CurrentLeavesProp.ts
+// src/cubing/twisty/model/props/puzzle/state/CurrentLeavesProp.ts
 var CurrentLeavesProp = class extends TwistyPropDerived {
   derive(inputs) {
+    function addCatchUpMove(currentMoveInfo) {
+      if (inputs.detailedTimelineInfo.atEnd && inputs.catchUpMove.move !== null) {
+        currentMoveInfo.currentMoves.push({
+          move: inputs.catchUpMove.move,
+          direction: Direction.Backwards,
+          fraction: 1 - inputs.catchUpMove.amount,
+          startTimestamp: -1,
+          endTimestamp: -1
+        });
+      }
+      return currentMoveInfo;
+    }
     if (inputs.indexer.currentMoveInfo) {
-      return inputs.indexer.currentMoveInfo(inputs.detailedTimelineInfo.timestamp);
+      return addCatchUpMove(inputs.indexer.currentMoveInfo(inputs.detailedTimelineInfo.timestamp));
     } else {
       const idx = inputs.indexer.timestampToIndex(inputs.detailedTimelineInfo.timestamp);
       const currentMoveInfo = {
@@ -3183,7 +3343,7 @@ var CurrentLeavesProp = class extends TwistyPropDerived {
       if (inputs.indexer.numAnimatedLeaves() > 0) {
         const move = inputs.indexer.getAnimLeaf(idx)?.as(Move);
         if (!move) {
-          return currentMoveInfo;
+          return addCatchUpMove(currentMoveInfo);
         }
         const start = inputs.indexer.indexToMoveStartTimestamp(idx);
         const duration = inputs.indexer.moveDuration(idx);
@@ -3206,12 +3366,12 @@ var CurrentLeavesProp = class extends TwistyPropDerived {
           currentMoveInfo.earliestEnd = Math.min(currentMoveInfo.earliestEnd, end);
         }
       }
-      return currentMoveInfo;
+      return addCatchUpMove(currentMoveInfo);
     }
   }
 };
 
-// src/cubing/twisty/model/depth-9/CurrentLeavesSimplified.ts
+// src/cubing/twisty/model/props/puzzle/state/CurrentLeavesSimplified.ts
 var CurrentLeavesSimplifiedProp = class extends TwistyPropDerived {
   derive(inputs) {
     return {
@@ -3225,7 +3385,7 @@ var CurrentLeavesSimplifiedProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-10/CurrentTransformationProp.ts
+// src/cubing/twisty/model/props/puzzle/state/CurrentTransformationProp.ts
 var CurrentTransformationProp = class extends TwistyPropDerived {
   derive(inputs) {
     let state = inputs.indexer.transformAtIndex(inputs.currentLeavesSimplified.stateIndex);
@@ -3241,7 +3401,7 @@ var CurrentTransformationProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-11/LegacyPositionProp.ts
+// src/cubing/twisty/model/props/puzzle/state/LegacyPositionProp.ts
 var LegacyPositionProp = class extends TwistyPropDerived {
   derive(inputs) {
     return {
@@ -3251,20 +3411,46 @@ var LegacyPositionProp = class extends TwistyPropDerived {
   }
 };
 
-// src/cubing/twisty/model/depth-2/PuzzleDefProp.ts
+// src/cubing/twisty/model/props/puzzle/structure/PuzzleDefProp.ts
 var PuzzleDefProp = class extends TwistyPropDerived {
   async derive(inputs) {
     return inputs.puzzleLoader.def();
   }
 };
 
+// src/cubing/twisty/model/UserVisibleErrorTracker.ts
+var EMPTY_ERRORS = { errors: [] };
+var UserVisibleErrorTracker = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return EMPTY_ERRORS;
+  }
+  reset() {
+    this.set(this.getDefaultValue());
+  }
+  canReuseValue(_v1, _v2) {
+    return arrayEquals(_v1.errors, _v2.errors);
+  }
+};
+
+// src/cubing/twisty/model/props/puzzle/state/CatchUpMoveProp.ts
+var CatchUpMoveProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return { move: null, amount: 0 };
+  }
+  canReuseValue(v1, v2) {
+    return v1.move === v2.move && v1.amount === v2.amount;
+  }
+};
+
 // src/cubing/twisty/model/TwistyPlayerModel.ts
 var TwistyPlayerModel = class {
   constructor() {
+    this.userVisibleErrorTracker = new UserVisibleErrorTracker();
     this.algProp = new AlgProp();
     this.backgroundProp = new BackgroundProp();
     this.backViewProp = new BackViewProp();
     this.controlPanelProp = new ControlPanelProp();
+    this.catchUpMoveProp = new CatchUpMoveProp();
     this.foundationStickerSpriteURL = new URLProp();
     this.hintFaceletProp = new HintFaceletProp();
     this.hintStickerSpriteURL = new URLProp();
@@ -3290,7 +3476,7 @@ var TwistyPlayerModel = class {
     this.puzzleLoaderProp = new PuzzleLoaderProp({
       puzzleIDRequest: this.puzzleIDRequestProp,
       puzzleDescriptionRequest: this.puzzleDescriptionRequestProp
-    });
+    }, this.userVisibleErrorTracker);
     this.puzzleDefProp = new PuzzleDefProp({ puzzleLoader: this.puzzleLoaderProp });
     this.puzzleIDProp = new PuzzleIDProp({ puzzleLoader: this.puzzleLoaderProp });
     this.puzzleAlgProp = new PuzzleAlgProp({
@@ -3346,7 +3532,8 @@ var TwistyPlayerModel = class {
     });
     this.currentLeavesProp = new CurrentLeavesProp({
       indexer: this.indexerProp,
-      detailedTimelineInfo: this.detailedTimelineInfoProp
+      detailedTimelineInfo: this.detailedTimelineInfoProp,
+      catchUpMove: this.catchUpMoveProp
     });
     this.buttonAppearanceProp = new ButtonAppearanceProp({
       coarseTimelineInfo: this.coarseTimelineInfoProp,
@@ -3568,14 +3755,18 @@ var twistyPlayerAttributeMap = {
   "experimental-hint-sprite": "experimentalHintSprite"
 };
 var configKeys = Object.fromEntries(Object.values(twistyPlayerAttributeMap).map((s) => [s, true]));
-var _controlsManager, _visualizationWrapperElem, _visualizationWrapper, _visualizationStrategy, _setVisualizationWrapper, setVisualizationWrapper_fn;
+var _controlsManager, _visualizationWrapperElem, _errorElem, _alreadyConnected, _visualizationWrapper, _visualizationStrategy, _setVisualizationWrapper, setVisualizationWrapper_fn;
 var TwistyPlayer = class extends TwistyPlayerSettable {
   constructor(config = {}) {
     super();
     __privateAdd(this, _setVisualizationWrapper);
     this.controller = new TwistyPlayerController(this.experimentalModel, this);
+    this.experimentalCanvasClickCallback = () => {
+    };
     __privateAdd(this, _controlsManager, new ClassListManager(this, "controls-", ["auto"].concat(Object.keys(controlsLocations))));
     __privateAdd(this, _visualizationWrapperElem, document.createElement("div"));
+    __privateAdd(this, _errorElem, document.createElement("div"));
+    __privateAdd(this, _alreadyConnected, false);
     __privateAdd(this, _visualizationWrapper, null);
     __privateAdd(this, _visualizationStrategy, null);
     for (const [propName, value] of Object.entries(config)) {
@@ -3587,8 +3778,21 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
     }
   }
   async connectedCallback() {
+    if (__privateGet(this, _alreadyConnected)) {
+      return;
+    }
+    __privateSet(this, _alreadyConnected, true);
     this.addCSS(twistyPlayerCSS);
     this.addElement(__privateGet(this, _visualizationWrapperElem)).classList.add("visualization-wrapper");
+    this.addElement(__privateGet(this, _errorElem)).classList.add("error-elem");
+    __privateGet(this, _errorElem).textContent = "Error";
+    this.experimentalModel.userVisibleErrorTracker.addFreshListener((userVisibleError) => {
+      const errorString = userVisibleError.errors[0] ?? null;
+      this.contentWrapper.classList.toggle("error", !!errorString);
+      if (errorString) {
+        __privateGet(this, _errorElem).textContent = errorString;
+      }
+    });
     const scrubber = new TwistyScrubberV2(this.experimentalModel);
     this.contentWrapper.appendChild(scrubber);
     this.buttons = new TwistyButtonsV2(this.experimentalModel, this.controller, this);
@@ -3607,6 +3811,26 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
       duration: 250
     });
   }
+  async experimentalCurrentCanvases() {
+    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.canvas());
+      }
+    }
+    return canvases;
+  }
+  async experimentalPG3D() {
+    this.connectedCallback();
+    const wrapper = __privateGet(this, _visualizationWrapper);
+    if (wrapper instanceof Twisty3DSceneWrapper) {
+      wrapper;
+    }
+    return null;
+  }
   jumpToStart(options) {
     this.controller.jumpToStart(options);
   }
@@ -3622,11 +3846,19 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
   togglePlay(play) {
     this.controller.togglePlay(play);
   }
-  experimentalAddMove(move) {
+  experimentalAddMove(flexibleMove, options = {}) {
+    const move = typeof flexibleMove === "string" ? new Move(flexibleMove) : flexibleMove;
     (async () => {
       const alg = (await this.experimentalModel.algProp.get()).alg;
-      this.experimentalModel.algProp.set(new Alg(alg.concat([move])));
+      const newAlg = experimentalAppendMove(alg, move, {
+        coalesce: options?.coalesce
+      });
+      this.experimentalModel.algProp.set(newAlg);
       this.experimentalModel.timestampRequestProp.set("end");
+      this.experimentalModel.catchUpMoveProp.set({
+        move,
+        amount: 0
+      });
     })();
   }
   static get observedAttributes() {
@@ -3656,6 +3888,8 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
 };
 _controlsManager = new WeakMap();
 _visualizationWrapperElem = new WeakMap();
+_errorElem = new WeakMap();
+_alreadyConnected = new WeakMap();
 _visualizationWrapper = new WeakMap();
 _visualizationStrategy = new WeakMap();
 _setVisualizationWrapper = new WeakSet();
@@ -4293,6 +4527,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
     __privateGet(this, _carbonCopy).appendChild(__privateGet(this, _carbonCopyHighlight));
     __privateGet(this, _carbonCopySuffix).classList.add("suffix");
     __privateGet(this, _carbonCopy).appendChild(__privateGet(this, _carbonCopySuffix));
+    __privateGet(this, _textarea).placeholder = "Alg";
     __privateGet(this, _textarea).setAttribute("spellcheck", "false");
     this.addCSS(twistyAlgEditorCSS);
     __privateGet(this, _textarea).addEventListener("input", () => {
@@ -6313,7 +6548,7 @@ export {
   TwistyAlgViewerV1,
   TwistyPlayer,
   TwistyPlayerV1,
-  experimentalSetShareAllNewRenderers,
+  experimentalForceNewRendererSharing,
   experimentalShowRenderStats
 };
 //# sourceMappingURL=index.js.map