cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/{dom/controls/buttons.css_.ts → old/dom/controls/buttons.css.ts}

@@ -24,6 +24,7 @@ export const buttonGridCSS = new CSSSource(`
   display: none;
 }
 
+.wrapper twisty-button-v2,
 .wrapper twisty-control-button {
   width: inherit;
   height: inherit;
@@ -31,10 +32,13 @@ export const buttonGridCSS = new CSSSource(`
 `);
 
 export const buttonCSS = new CSSSource(`
+:host:not([hidden]) {
+  display: grid;
+}
+
 :host {
   width: 48px;
   height: 24px;
-  display: grid;
 }
 
 .wrapper {
@@ -71,38 +75,47 @@ button:enabled:hover {
 }
 
 /* TODO: fullscreen icons have too much padding?? */
+.svg-skip-to-start button,
 button.svg-skip-to-start {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNjQzIDEwMzdxMTktMTkgMzItMTN0MTMgMzJ2MTQ3MnEwIDI2LTEzIDMydC0zMi0xM2wtNzEwLTcxMHEtOS05LTEzLTE5djcxMHEwIDI2LTEzIDMydC0zMi0xM2wtNzEwLTcxMHEtOS05LTEzLTE5djY3OHEwIDI2LTE5IDQ1dC00NSAxOUg5NjBxLTI2IDAtNDUtMTl0LTE5LTQ1VjEwODhxMC0yNiAxOS00NXQ0NS0xOWgxMjhxMjYgMCA0NSAxOXQxOSA0NXY2NzhxNC0xMSAxMy0xOWw3MTAtNzEwcTE5LTE5IDMyLTEzdDEzIDMydjcxMHE0LTExIDEzLTE5eiIvPjwvc3ZnPg==");
 }
 
+.svg-skip-to-end button,
 button.svg-skip-to-end {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik05NDEgMjU0N3EtMTkgMTktMzIgMTN0LTEzLTMyVjEwNTZxMC0yNiAxMy0zMnQzMiAxM2w3MTAgNzEwcTggOCAxMyAxOXYtNzEwcTAtMjYgMTMtMzJ0MzIgMTNsNzEwIDcxMHE4IDggMTMgMTl2LTY3OHEwLTI2IDE5LTQ1dDQ1LTE5aDEyOHEyNiAwIDQ1IDE5dDE5IDQ1djE0MDhxMCAyNi0xOSA0NXQtNDUgMTloLTEyOHEtMjYgMC00NS0xOXQtMTktNDV2LTY3OHEtNSAxMC0xMyAxOWwtNzEwIDcxMHEtMTkgMTktMzIgMTN0LTEzLTMydi03MTBxLTUgMTAtMTMgMTl6Ii8+PC9zdmc+");
 }
 
+.svg-step-forward button,
 button.svg-step-forward {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNjg4IDE1NjhxMCAyNi0xOSA0NWwtNTEyIDUxMnEtMTkgMTktNDUgMTl0LTQ1LTE5cS0xOS0xOS0xOS00NXYtMjU2aC0yMjRxLTk4IDAtMTc1LjUgNnQtMTU0IDIxLjVxLTc2LjUgMTUuNS0xMzMgNDIuNXQtMTA1LjUgNjkuNXEtNDkgNDIuNS04MCAxMDF0LTQ4LjUgMTM4LjVxLTE3LjUgODAtMTcuNSAxODEgMCA1NSA1IDEyMyAwIDYgMi41IDIzLjV0Mi41IDI2LjVxMCAxNS04LjUgMjV0LTIzLjUgMTBxLTE2IDAtMjgtMTctNy05LTEzLTIydC0xMy41LTMwcS03LjUtMTctMTAuNS0yNC0xMjctMjg1LTEyNy00NTEgMC0xOTkgNTMtMzMzIDE2Mi00MDMgODc1LTQwM2gyMjR2LTI1NnEwLTI2IDE5LTQ1dDQ1LTE5cTI2IDAgNDUgMTlsNTEyIDUxMnExOSAxOSAxOSA0NXoiLz48L3N2Zz4=");
 }
 
+.svg-step-backward button,
 button.svg-step-backward {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNjg4IDIwNDhxMCAxNjYtMTI3IDQ1MS0zIDctMTAuNSAyNHQtMTMuNSAzMHEtNiAxMy0xMyAyMi0xMiAxNy0yOCAxNy0xNSAwLTIzLjUtMTB0LTguNS0yNXEwLTkgMi41LTI2LjV0Mi41LTIzLjVxNS02OCA1LTEyMyAwLTEwMS0xNy41LTE4MXQtNDguNS0xMzguNXEtMzEtNTguNS04MC0xMDF0LTEwNS41LTY5LjVxLTU2LjUtMjctMTMzLTQyLjV0LTE1NC0yMS41cS03Ny41LTYtMTc1LjUtNmgtMjI0djI1NnEwIDI2LTE5IDQ1dC00NSAxOXEtMjYgMC00NS0xOWwtNTEyLTUxMnEtMTktMTktMTktNDV0MTktNDVsNTEyLTUxMnExOS0xOSA0NS0xOXQ0NSAxOXExOSAxOSAxOSA0NXYyNTZoMjI0cTcxMyAwIDg3NSA0MDMgNTMgMTM0IDUzIDMzM3oiLz48L3N2Zz4=");
 }
 
+.svg-pause button,
 button.svg-pause {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNTYwIDEwODh2MTQwOHEwIDI2LTE5IDQ1dC00NSAxOWgtNTEycS0yNiAwLTQ1LTE5dC0xOS00NVYxMDg4cTAtMjYgMTktNDV0NDUtMTloNTEycTI2IDAgNDUgMTl0MTkgNDV6bS04OTYgMHYxNDA4cTAgMjYtMTkgNDV0LTQ1IDE5aC01MTJxLTI2IDAtNDUtMTl0LTE5LTQ1VjEwODhxMC0yNiAxOS00NXQ0NS0xOWg1MTJxMjYgMCA0NSAxOXQxOSA0NXoiLz48L3N2Zz4=");
 }
 
+.svg-play button,
 button.svg-play {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNTg0IiBoZWlnaHQ9IjM1ODQiIHZpZXdCb3g9IjAgMCAzNTg0IDM1ODQiPjxwYXRoIGQ9Ik0yNDcyLjUgMTgyM2wtMTMyOCA3MzhxLTIzIDEzLTM5LjUgM3QtMTYuNS0zNlYxMDU2cTAtMjYgMTYuNS0zNnQzOS41IDNsMTMyOCA3MzhxMjMgMTMgMjMgMzF0LTIzIDMxeiIvPjwvc3ZnPg==");
 }
 
+.svg-enter-fullscreen button,
 button.svg-enter-fullscreen {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgd2lkdGg9IjI4Ij48cGF0aCBkPSJNMiAyaDI0djI0SDJ6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTkgMTZIN3Y1aDV2LTJIOXYtM3ptLTItNGgyVjloM1Y3SDd2NXptMTIgN2gtM3YyaDV2LTVoLTJ2M3pNMTYgN3YyaDN2M2gyVjdoLTV6Ii8+PC9zdmc+");
 }
 
+.svg-exit-fullscreen button,
 button.svg-exit-fullscreen {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgd2lkdGg9IjI4Ij48cGF0aCBkPSJNMiAyaDI0djI0SDJ6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTcgMThoM3YzaDJ2LTVIN3Yyem0zLThIN3YyaDVWN2gtMnYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjdoLTJ2NWg1di0yaC0zeiIvPjwvc3ZnPg==");
 }
 
+.svg-twizzle-tw button,
 button.svg-twizzle-tw {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODY0IiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMzk3LjU4MSAxNTEuMTh2NTcuMDg0aC04OS43MDN2MjQwLjM1MmgtNjYuOTU1VjIwOC4yNjRIMTUxLjIydi01Ny4wODNoMjQ2LjM2MXptNTQuMzEgNzEuNjc3bDcuNTEyIDMzLjY5MmMyLjcxOCAxMi4xNiA1LjU4IDI0LjY4IDguNTg0IDM3LjU1NWEyMTgwLjc3NSAyMTgwLjc3NSAwIDAwOS40NDIgMzguODQzIDEyNjYuMyAxMjY2LjMgMCAwMDEwLjA4NiAzNy41NTVjMy43Mi0xMi41OSA3LjM2OC0yNS40NjYgMTAuOTQ1LTM4LjYyOCAzLjU3Ni0xMy4xNjIgNy4wMS0yNi4xMSAxMC4zLTM4Ljg0M2w1Ljc2OS0yMi40NTZjMS4yNDgtNC44ODcgMi40NzItOS43MDUgMy42NzQtMTQuNDU1IDMuMDA0LTExLjg3NSA1LjY1MS0yMi45NjIgNy45NC0zMy4yNjNoNDYuMzU0bDIuMzg0IDEwLjU2M2EyMDAwLjc3IDIwMDAuNzcgMCAwMDMuOTM1IDE2LjgyOGw2LjcxMSAyNy43MWMxLjIxMyA0Ljk1NiAyLjQ1IDkuOTggMy43MDkgMTUuMDczYTMxMTkuNzc3IDMxMTkuNzc3IDAgMDA5Ljg3MSAzOC44NDMgMTI0OS4yMjcgMTI0OS4yMjcgMCAwMDEwLjczIDM4LjYyOCAxOTA3LjYwNSAxOTA3LjYwNSAwIDAwMTAuMzAxLTM3LjU1NSAxMzk3Ljk0IDEzOTcuOTQgMCAwMDkuNjU3LTM4Ljg0M2w0LjQtMTkuMDQ2Yy43MTUtMy4xMyAxLjQyMS02LjIzNiAyLjExOC05LjMyMWw5LjU3Ny00Mi44OGg2Ni41MjZhMjk4OC43MTggMjk4OC43MTggMCAwMS0xOS41MjkgNjYuMzExbC01LjcyOCAxOC40ODJhMzIzNy40NiAzMjM3LjQ2IDAgMDEtMTQuMDE1IDQzLjc1MmMtNi40MzggMTkuNi0xMi43MzMgMzcuNjk4LTE4Ljg4NSA1NC4yOTRsLTMuMzA2IDguODI1Yy00Ljg4NCAxMi44OTgtOS40MzMgMjQuMjYzLTEzLjY0NyAzNC4wOTVoLTQ5Ljc4N2E4NDE3LjI4OSA4NDE3LjI4OSAwIDAxLTIxLjAzMS02NC44MDkgMTI4OC42ODYgMTI4OC42ODYgMCAwMS0xOC44ODUtNjQuODEgMTk3Mi40NDQgMTk3Mi40NDQgMCAwMS0xOC4yNCA2NC44MSAyNTc5LjQxMiAyNTc5LjQxMiAwIDAxLTIwLjM4OCA2NC44MWgtNDkuNzg3Yy00LjY4Mi0xMC45MjYtOS43Mi0yMy43NDMtMTUuMTEtMzguNDUxbC0xLjYyOS00LjQ3Yy01LjI1OC0xNC41MjEtMTAuNjgtMzAuMTkyLTE2LjI2Ni00Ny4wMTRsLTIuNDA0LTcuMjhjLTYuNDM4LTE5LjYtMTMuMDItNDAuMzQ0LTE5Ljc0My02Mi4yMzRhMjk4OC43MDcgMjk4OC43MDcgMCAwMS0xOS41MjktNjYuMzExaDY3LjM4NXoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==");
 }

package/src/cubing/twisty/{dom → old/dom}/controls/buttons.spec.ts

@@ -3,9 +3,9 @@
  */
 
 import { Timeline } from "../../animation/Timeline";
+import { TwistyControlButton } from "./buttons";
 import { ManagedCustomElement } from "../element/ManagedCustomElement";
 import { customElementsShim } from "../element/node-custom-element-shims";
-import { TwistyControlButton } from "./buttons";
 
 // function getButtonElem(
 //   twistyControlButton: TwistyControlButton,

package/src/cubing/twisty/{dom → old/dom}/controls/buttons.ts

@@ -14,8 +14,8 @@ import { ClassListManager } from "../element/ClassListManager";
 import { ManagedCustomElement } from "../element/ManagedCustomElement";
 import { customElementsShim } from "../element/node-custom-element-shims";
 import type { ViewerLinkPage } from "../TwistyPlayerConfig";
-import { buttonCSS, buttonGridCSS } from "./buttons.css_";
-import type { TwistyControlElement } from "./TwistyControlElement.ts";
+import { buttonCSS, buttonGridCSS } from "./buttons.css";
+import type { TwistyControlElement } from "./TwistyControlElement";
 
 type TimelineCommand =
   | "fullscreen"
@@ -78,7 +78,7 @@ export class TwistyControlButton
     this.addElement(this.button);
     this.addEventListener("click", this.onPress.bind(this));
 
-    switch (this.timelineCommand!) {
+    switch (this.timelineCommand) {
       case "fullscreen":
         if (!document.fullscreenEnabled) {
           this.button.disabled = true;
@@ -93,7 +93,7 @@ export class TwistyControlButton
     if (this.timeline) {
       // TODO
       this.timeline.addActionListener(this);
-      switch (this.timelineCommand!) {
+      switch (this.timelineCommand) {
         case "play-pause":
         case "play-step-backwards":
         case "play-step":
@@ -107,7 +107,7 @@ export class TwistyControlButton
 
   // TODO: Can we avoid duplicate calculations?
   private autoSetTimelineBasedDisabled(): void {
-    switch (this.timelineCommand!) {
+    switch (this.timelineCommand) {
       case "jump-to-start":
       case "play-pause":
       case "play-step-backwards":
@@ -118,7 +118,7 @@ export class TwistyControlButton
           this.button.disabled = true;
           return;
         }
-        switch (this.timelineCommand!) {
+        switch (this.timelineCommand) {
           case "jump-to-start":
           case "play-step-backwards":
             this.button.disabled =
@@ -179,7 +179,7 @@ export class TwistyControlButton
   }
 
   onPress(): void {
-    switch (this.timelineCommand!) {
+    switch (this.timelineCommand) {
       case "fullscreen":
         if (document.fullscreenElement === this.fullscreenElement) {
           document.exitFullscreen();
@@ -221,7 +221,7 @@ export class TwistyControlButton
   }
 
   onTimelineAction(actionEvent: TimelineActionEvent): void {
-    switch (this.timelineCommand!) {
+    switch (this.timelineCommand) {
       case "jump-to-start":
         // TODO: what if you're already playing?
         this.button.disabled =
@@ -298,17 +298,17 @@ export class TwistyControlButtonPanel
 
     // this.addElement(new TwistyControlButton(timeline!, fullscreenElement!));
     this.addElement(
-      new TwistyControlButton(timeline!, "fullscreen", {
+      new TwistyControlButton(timeline, "fullscreen", {
         fullscreenElement: options?.fullscreenElement,
       }),
     );
-    this.addElement(new TwistyControlButton(timeline!, "jump-to-start"));
-    this.addElement(new TwistyControlButton(timeline!, "play-step-backwards"));
-    this.addElement(new TwistyControlButton(timeline!, "play-pause"));
-    this.addElement(new TwistyControlButton(timeline!, "play-step"));
-    this.addElement(new TwistyControlButton(timeline!, "jump-to-end"));
+    this.addElement(new TwistyControlButton(timeline, "jump-to-start"));
+    this.addElement(new TwistyControlButton(timeline, "play-step-backwards"));
+    this.addElement(new TwistyControlButton(timeline, "play-pause"));
+    this.addElement(new TwistyControlButton(timeline, "play-step"));
+    this.addElement(new TwistyControlButton(timeline, "jump-to-end"));
     this.addElement(
-      new TwistyControlButton(timeline!, "twizzle-link", {
+      new TwistyControlButton(timeline, "twizzle-link", {
         visitTwizzleLinkCallback: options?.viewerLinkCallback,
       }),
     ).classList.add("twizzle-link-button");

package/src/cubing/twisty/{dom → old/dom}/element/ElementConfig.ts

@@ -1,6 +1,6 @@
 // // type ConfigAttributes = Record<string, any>;
 
-import { Alg } from "../../../alg";
+import { Alg } from "../../../../alg";
 
 export class AlgAttribute {
   string: string;

package/src/cubing/twisty/{dom → old/dom}/stream/TwistyStreamSource.ts

@@ -1,13 +1,13 @@
-import type { KeyboardPuzzle } from "../../../bluetooth/keyboard";
+import type { KeyboardPuzzle } from "../../../../bluetooth/keyboard";
 import type {
   BluetoothPuzzle,
   MoveEvent,
-} from "../../../bluetooth/smart-puzzle/bluetooth-puzzle";
-import type { TwizzleStreamServer } from "../../../stream";
-import type { PuzzleStreamMoveEventRegisterCompatible } from "../../../stream/process/ReorientedStream";
+} from "../../../../bluetooth/smart-puzzle/bluetooth-puzzle";
+import type { TwizzleStreamServer } from "../../../../stream";
+import type { PuzzleStreamMoveEventRegisterCompatible } from "../../../../stream/process/ReorientedStream";
 import { ManagedCustomElement } from "../element/ManagedCustomElement";
 import { customElementsShim } from "../element/node-custom-element-shims";
-import { twistyStreamSourceCSS } from "./TwistyStreamSource.css_";
+import { twistyStreamSourceCSS } from "./TwistyStreamSource.css";
 
 interface StreamSource extends EventTarget {
   disconnect?: () => void;
@@ -28,7 +28,7 @@ class BluetoothStreamSource extends EventTarget {
   }
 
   static async connect(): Promise<BluetoothStreamSource> {
-    const bluetooth = await import("../../../bluetooth");
+    const bluetooth = await import("../../../../bluetooth");
     const puzzle = await bluetooth.connectSmartPuzzle();
     return new BluetoothStreamSource(puzzle);
   }
@@ -53,7 +53,7 @@ class KeyboardStreamSource extends EventTarget {
   }
 
   static async connect(): Promise<KeyboardStreamSource> {
-    const bluetooth = await import("../../../bluetooth");
+    const bluetooth = await import("../../../../bluetooth");
     const puzzle = await bluetooth.debugKeyboardConnect();
     return new KeyboardStreamSource(puzzle);
   }
@@ -116,7 +116,7 @@ export class TwistyStreamSource extends ManagedCustomElement {
 
     let streamServer: TwizzleStreamServer | null = null;
     button.addEventListener("click", async () => {
-      const TwizzleStreamServer = (await import("../../../stream"))
+      const TwizzleStreamServer = (await import("../../../../stream"))
         .TwizzleStreamServer;
       streamServer ||= new TwizzleStreamServer();
       const streams = await streamServer.streams();

package/src/cubing/twisty/{dom → old/dom}/viewers/Twisty2DSVG.ts

@@ -2,11 +2,10 @@ import {
   combineTransformations,
   KPuzzleDefinition,
   KPuzzleSVGWrapper,
-  Transformation,
   transformationForMove,
-} from "../../../kpuzzle";
-import type { PuzzleLoader } from "../../../puzzles/PuzzleLoader";
-import type { PuzzleAppearance } from "../../../puzzles/stickerings/appearance";
+} from "../../../../kpuzzle";
+import type { PuzzleLoader } from "../../../../puzzles/PuzzleLoader";
+import type { PuzzleAppearance } from "../../../../puzzles/stickerings/appearance";
 import type {
   PositionDispatcher,
   PositionListener,
@@ -16,7 +15,7 @@ import { RenderScheduler } from "../../animation/RenderScheduler";
 import { ManagedCustomElement } from "../element/ManagedCustomElement";
 import { customElementsShim } from "../element/node-custom-element-shims";
 import type { ExperimentalStickering } from "../TwistyPlayerConfig";
-import { twisty2DSVGCSS } from "./Twisty2DSVGView.css_";
+import { twisty2DSVGCSS } from "./Twisty2DSVGView.css";
 import type { TwistyViewerElement } from "./TwistyViewerElement";
 
 export interface Twisty2DSVGOptions {
@@ -51,7 +50,6 @@ export class Twisty2DSVG
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
   onPositionChange(position: PuzzlePosition): void {
     if (position.movesInProgress.length > 0) {
       const move = position.movesInProgress[0].move;
@@ -63,18 +61,18 @@ export class Twisty2DSVG
       }
       const newState = combineTransformations(
         def,
-        position.state as Transformation,
+        position.state,
         transformationForMove(def, partialMove),
       );
       // TODO: move to render()
       this.svg.draw(
         this.definition,
-        position.state as Transformation,
+        position.state,
         newState,
         position.movesInProgress[0].fraction,
       );
     } else {
-      this.svg.draw(this.definition, position.state as Transformation);
+      this.svg.draw(this.definition, position.state);
       this.#cachedPosition = position;
     }
   }

package/src/cubing/twisty/{dom → old/dom}/viewers/Twisty3DCanvas.ts

@@ -1,13 +1,13 @@
 import { PerspectiveCamera, Vector3, WebGLRenderer } from "three";
-import type { Twisty3DScene } from "../../3D/Twisty3DScene";
+import type { Twisty3DScene } from "../../../views/3D/Twisty3DScene";
 import { RenderScheduler } from "../../animation/RenderScheduler";
 import { ManagedCustomElement } from "../element/ManagedCustomElement";
 import { pixelRatio } from "./canvas";
-import { twisty3DCanvasCSS } from "./Twisty3DCanvas.css_";
+import { twisty3DCanvasCSS } from "./Twisty3DCanvas.css";
 import { OrbitCoordinates, TwistyOrbitControls } from "./TwistyOrbitControls";
 import type { TwistyViewerElement } from "./TwistyViewerElement";
 import { customElementsShim } from "../element/node-custom-element-shims";
-import { Stats } from "../../../vendor/three/examples/jsm/libs/stats.module";
+import { Stats } from "../../../../vendor/three/examples/jsm/libs/stats.modified.module";
 import type { CameraLatitudeLimits } from "../TwistyPlayerConfig";
 
 let SHOW_STATS = false;
@@ -15,14 +15,7 @@ let SHOW_STATS = false;
 export function experimentalShowRenderStats(show: boolean): void {
   SHOW_STATS = show;
 }
-let shareAllNewRenderers: boolean = false;
-
-// WARNING: The current shared renderer implementation is not every efficient.
-// Avoid using for players that are likely to have dimensions approaching 1 megapixel or higher.
-// TODO: use a dedicated renderer while fullscreen?
-export function experimentalSetShareAllNewRenderers(share: boolean): void {
-  shareAllNewRenderers = share;
-}
+const shareAllNewRenderers: boolean = false;
 
 let sharedRenderer: WebGLRenderer | null = null;
 
@@ -72,7 +65,7 @@ export class Twisty3DCanvas
     this.scene = scene!;
     this.scene?.addRenderTarget(this); // TODO
     if (SHOW_STATS) {
-      this.stats = Stats();
+      this.stats = new Stats();
       this.stats.dom.style.position = "absolute";
       this.addElement(this.stats.dom);
     }

package/src/cubing/twisty/{dom → old/dom}/viewers/TwistyOrbitControls.ts

@@ -1,5 +1,5 @@
 import { Camera, Spherical, Vector3 } from "three";
-import { DEGREES_PER_RADIAN } from "../../3D/TAU";
+import { DEGREES_PER_RADIAN } from "../../../views/3D/TAU";
 import { RenderScheduler } from "../../animation/RenderScheduler";
 import type { CameraLatitudeLimits } from "../TwistyPlayerConfig";
 
@@ -203,6 +203,7 @@ export class TwistyOrbitControls {
   }
 
   onMouseStart(e: MouseEvent): void {
+    this.experimentalHasBeenMoved = true;
     window.addEventListener("mousemove", this.onMouseMoveBound);
     window.addEventListener("mouseup", this.onMouseEndBound);
     this.onStart(e);
@@ -218,6 +219,13 @@ export class TwistyOrbitControls {
       this.onMouseEnd(e);
       return;
     }
+
+    if (e.movementX === 0 && e.movementY === 0) {
+      // Short-circuit
+      console.log("short-circuit mouse!");
+      return;
+    }
+
     const minDim = Math.min(this.canvas.offsetWidth, this.canvas.offsetHeight);
     const movementX = this.temperMovement(e.movementX / minDim);
     const movementY = this.temperMovement(
@@ -225,11 +233,10 @@ export class TwistyOrbitControls {
     );
     this.onMove(movementX, movementY);
 
-    if (e.timeStamp !== this.lastTouchTimestamp) {
-      this.lastMouseMoveMomentumX =
-        movementX / (e.timeStamp - this.lastMouseTimestamp);
-      this.lastMouseMoveMomentumY =
-        movementY / (e.timeStamp - this.lastMouseTimestamp);
+    const deltaMs = e.timeStamp - this.lastMouseTimestamp;
+    if (deltaMs > 0) {
+      this.lastMouseMoveMomentumX = movementX / deltaMs;
+      this.lastMouseMoveMomentumY = movementY / deltaMs;
       this.lastMouseTimestamp = e.timeStamp;
     }
   }
@@ -250,13 +257,19 @@ export class TwistyOrbitControls {
   }
 
   onTouchStart(e: TouchEvent): void {
+    this.experimentalHasBeenMoved = true;
     if (this.currentTouchID === null) {
+      if (e.touches[0].clientX === 0 && e.touches[0].clientY === 0) {
+        // Short-circuit
+        console.log("short-circuit touch!");
+        return;
+      }
       this.currentTouchID = e.changedTouches[0].identifier;
       this.lastTouchClientX = e.touches[0].clientX;
       this.lastTouchClientY = e.touches[0].clientY;
       window.addEventListener("touchmove", this.onTouchMoveBound);
       window.addEventListener("touchend", this.onTouchEndBound);
-      window.addEventListener("touchcanel", this.onTouchEndBound);
+      window.addEventListener("touchcancel", this.onTouchEndBound);
       this.onStart(e);
 
       this.lastTouchTimestamp = e.timeStamp;
@@ -282,11 +295,10 @@ export class TwistyOrbitControls {
         this.lastTouchClientX = touch.clientX;
         this.lastTouchClientY = touch.clientY;
 
-        if (e.timeStamp !== this.lastTouchTimestamp) {
-          this.lastTouchMoveMomentumX =
-            movementX / (e.timeStamp - this.lastTouchTimestamp);
-          this.lastTouchMoveMomentumY =
-            movementY / (e.timeStamp - this.lastTouchTimestamp);
+        const deltaMs = e.timeStamp - this.lastTouchTimestamp;
+        if (deltaMs > 0) {
+          this.lastTouchMoveMomentumX = movementX / deltaMs;
+          this.lastTouchMoveMomentumY = movementY / deltaMs;
           this.lastTouchTimestamp = e.timeStamp;
         }
       }
@@ -325,15 +337,38 @@ export class TwistyOrbitControls {
 
     // this.#pullFromCamera();
 
-    this.#spherical.theta += -2 * movementX;
-    this.#spherical.phi += -2 * movementY;
+    // console.log(movementX, movementY)
+
+    const newSpherical = new Spherical();
+    newSpherical.copy(this.#spherical);
+
+    newSpherical.theta += -2 * movementX;
+    newSpherical.phi += -2 * movementY;
     if (this.experimentalLatitudeLimits !== "none") {
-      this.#spherical.phi = Math.max(this.#spherical.phi, Math.PI * 0.3); // TODO: Arctic circle: 1/6
-      this.#spherical.phi = Math.min(this.#spherical.phi, Math.PI * 0.7); // TODO: Antarctic circle: 5/6
+      newSpherical.phi = Math.max(newSpherical.phi, Math.PI * 0.3); // TODO: Arctic circle: 1/6
+      newSpherical.phi = Math.min(newSpherical.phi, Math.PI * 0.7); // TODO: Antarctic circle: 5/6
     } else {
-      this.#spherical.phi = Math.max(this.#spherical.phi, EPSILON);
-      this.#spherical.phi = Math.min(this.#spherical.phi, Math.PI - EPSILON);
+      newSpherical.phi = Math.max(newSpherical.phi, EPSILON);
+      newSpherical.phi = Math.min(newSpherical.phi, Math.PI - EPSILON);
     }
+
+    if (
+      isNaN(newSpherical.theta) ||
+      newSpherical.theta === Infinity ||
+      newSpherical.theta === -Infinity
+    ) {
+      return;
+    }
+
+    if (
+      isNaN(newSpherical.phi) ||
+      newSpherical.phi === Infinity ||
+      newSpherical.phi === -Infinity
+    ) {
+      return;
+    }
+
+    this.#spherical = newSpherical;
     this.#propagateSpherical();
   }
 
@@ -350,8 +385,6 @@ export class TwistyOrbitControls {
     try {
       this.#adjust();
 
-      this.experimentalHasBeenMoved = true;
-
       this.scheduleRender();
       this.mirrorControls?.updateMirroredCamera({
         latitude: this.latitude,

package/src/cubing/twisty/{dom → old/dom}/viewers/TwistyViewerElement.ts

@@ -1,4 +1,4 @@
-import type { Twisty3DRenderTarget } from "../../3D/Twisty3DRenderTarget";
+import type { Twisty3DRenderTarget } from "../../../views/3D/Twisty3DRenderTarget";
 
 export interface TwistyViewerElement extends Element, Twisty3DRenderTarget {
   /*...*/

package/src/cubing/twisty/{dom → old/dom}/viewers/TwistyViewerWrapper.ts

@@ -1,7 +1,7 @@
 import { ClassListManager } from "../element/ClassListManager";
 import { ManagedCustomElement } from "../element/ManagedCustomElement";
 import { customElementsShim } from "../element/node-custom-element-shims";
-import { twistyViewerWrapperCSS } from "./TwistyViewerWrapper.css_";
+import { twistyViewerWrapperCSS } from "./TwistyViewerWrapper.css";
 
 export const backViewLayouts = {
   "none": true, // default

package/src/cubing/twisty/old/dom/viewers/canvas.ts

@@ -0,0 +1,9 @@
+let globalPixelRatioOverride: number | null = null;
+export function setGlobalPixelRatioOverride(override: number | null): void {
+  globalPixelRatioOverride = override;
+}
+
+// TODO: Handle if you move across screens?
+export function pixelRatio(): number {
+  return globalPixelRatioOverride ?? (devicePixelRatio || 1);
+}

package/src/cubing/twisty/views/2D/Twisty2DPuzzle.ts

@@ -0,0 +1,150 @@
+import {
+  combineTransformations,
+  KPuzzleDefinition,
+  KPuzzleSVGWrapper,
+  transformationForMove,
+} from "../../../kpuzzle";
+import type { PuzzleLoader } from "../../../puzzles/PuzzleLoader";
+import type { PuzzleAppearance } from "../../../puzzles/stickerings/appearance";
+import type { PositionListener } from "../../old/animation/cursor/AlgCursor";
+import {
+  Direction,
+  PuzzlePosition,
+} from "../../old/animation/cursor/CursorTypes";
+import { RenderScheduler } from "../../old/animation/RenderScheduler";
+import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
+import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import { FreshListenerManager } from "../../model/props/TwistyProp";
+import type {
+  ExperimentalStickering,
+  PuzzleID,
+} from "../../old/dom/TwistyPlayerConfig";
+import { twisty2DSVGCSS } from "../../old/dom/viewers/Twisty2DSVGView.css";
+import type { TwistyViewerElement } from "../../old/dom/viewers/TwistyViewerElement";
+
+export interface Twisty2DPuzzleOptions {
+  experimentalStickering?: ExperimentalStickering;
+}
+
+// <twisty-2d-svg>
+export class Twisty2DPuzzle
+  extends ManagedCustomElement
+  implements TwistyViewerElement, PositionListener
+{
+  private definition: KPuzzleDefinition;
+  public svg: KPuzzleSVGWrapper;
+  private scheduler = new RenderScheduler(this.render.bind(this));
+  #cachedPosition: PuzzlePosition | null = null; // TODO: pull when needed.
+  constructor(
+    private model?: TwistyPlayerModel,
+    def?: KPuzzleDefinition,
+    private svgSource?: string,
+    private options?: Twisty2DPuzzleOptions,
+    private puzzleLoader?: PuzzleLoader,
+  ) {
+    super();
+    this.addCSS(twisty2DSVGCSS);
+
+    this.definition = def!;
+    this.resetSVG(); // TODO: do this in `connectedCallback()`?
+
+    this.#freshListenerManager.addListener(
+      this.model!.puzzleIDProp,
+      (puzzleID: PuzzleID) => {
+        if (puzzleLoader?.id !== puzzleID) {
+          this.disconnect();
+        }
+      },
+    );
+
+    this.#freshListenerManager.addListener(
+      this.model!.legacyPositionProp,
+      this.onPositionChange.bind(this),
+    );
+
+    if (this.options?.experimentalStickering) {
+      this.experimentalSetStickering(this.options.experimentalStickering);
+    }
+  }
+
+  #freshListenerManager = new FreshListenerManager();
+  disconnect(): void {
+    this.#freshListenerManager.disconnect();
+  }
+
+  onPositionChange(position: PuzzlePosition): void {
+    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),
+        );
+        // TODO: move to render()
+        this.svg.draw(
+          this.definition,
+          position.state,
+          newState,
+          position.movesInProgress[0].fraction,
+        );
+      } else {
+        this.svg.draw(this.definition, position.state);
+        this.#cachedPosition = position;
+      }
+    } catch (e) {
+      console.warn(
+        "Bad position (this doesn't necessarily mean something is wrong). Pre-emptively disconnecting:",
+        this.puzzleLoader?.id,
+        e,
+      );
+      this.disconnect();
+    }
+  }
+
+  scheduleRender(): void {
+    this.scheduler.requestAnimFrame();
+  }
+
+  experimentalSetStickering(stickering: ExperimentalStickering): void {
+    (async () => {
+      if (!this.puzzleLoader?.appearance) {
+        return;
+      }
+      const appearance = await this.puzzleLoader.appearance(stickering);
+      this.resetSVG(appearance);
+    })();
+  }
+
+  // TODO: do this without constructing a new SVG.
+  private resetSVG(appearance?: PuzzleAppearance): void {
+    if (this.svg) {
+      this.removeElement(this.svg.element);
+    }
+    if (!this.definition) {
+      return; // TODO
+    }
+    this.svg = new KPuzzleSVGWrapper(
+      this.definition,
+      this.svgSource!,
+      appearance,
+    ); // TODO
+    this.addElement(this.svg.element);
+    if (this.#cachedPosition) {
+      this.onPositionChange(this.#cachedPosition);
+    }
+  }
+
+  private render(): void {
+    /*...*/
+  }
+}
+
+customElementsShim.define("twisty-2d-puzzle", Twisty2DPuzzle);