cubing 0.32.2 → 0.33.0

package/dist/esm/twisty/index.js

@@ -1244,12 +1244,20 @@ button:enabled {
   background-color: rgba(196, 196, 196, 0.75)
 }
 
+.dark-mode button:enabled {
+  background-color: #88888888;
+}
+
 button:disabled {
   background-color: rgba(0, 0, 0, 0.4);
   opacity: 0.25;
   pointer-events: none;
 }
 
+.dark-mode button:disabled {
+  background-color: #ffffff44;
+}
+
 button:enabled:hover {
   background-color: rgba(255, 255, 255, 0.75);
   box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
@@ -1398,11 +1406,11 @@ var buttonCommands = {
   "twizzle-link": true
 };
 var TwistyButtons = class extends ManagedCustomElement {
-  constructor(model, controller, fullscreenElement) {
+  constructor(model, controller, defaultFullscreenElement) {
     super();
     this.model = model;
     this.controller = controller;
-    this.fullscreenElement = fullscreenElement;
+    this.defaultFullscreenElement = defaultFullscreenElement;
     this.buttons = null;
   }
   connectedCallback() {
@@ -1419,6 +1427,9 @@ var TwistyButtons = class extends ManagedCustomElement {
     }
     this.buttons = buttons;
     this.model?.buttonAppearance.addFreshListener(this.update.bind(this));
+    this.model?.twistySceneModel.darkMode.addFreshListener(
+      this.updateDarkMode.bind(this)
+    );
   }
   #onCommand(command) {
     switch (command) {
@@ -1461,16 +1472,18 @@ var TwistyButtons = class extends ManagedCustomElement {
     }
   }
   async onFullscreenButton() {
-    if (!this.fullscreenElement) {
+    if (!this.defaultFullscreenElement) {
       throw new Error("Attempted to go fullscreen without an element.");
     }
-    if (documentFullscreenElement() === this.fullscreenElement) {
+    if (documentFullscreenElement() === this.defaultFullscreenElement) {
       documentExitFullscreen();
     } else {
       this.buttons?.fullscreen.setIcon("exit-fullscreen");
-      requestFullscreen(this.fullscreenElement);
+      requestFullscreen(
+        await this.model?.twistySceneModel.fullscreenElement.get() ?? this.defaultFullscreenElement
+      );
       const onFullscreen = () => {
-        if (documentFullscreenElement() !== this.fullscreenElement) {
+        if (documentFullscreenElement() !== this.defaultFullscreenElement) {
           this.buttons?.fullscreen.setIcon("enter-fullscreen");
           window.removeEventListener("fullscreenchange", onFullscreen);
         }
@@ -1488,6 +1501,11 @@ var TwistyButtons = class extends ManagedCustomElement {
       button.hidden = !!info.hidden;
     }
   }
+  updateDarkMode(darkMode) {
+    for (const button of Object.values(this.buttons ?? {})) {
+      button.updateDarkMode(darkMode);
+    }
+  }
 };
 customElementsShim.define("twisty-buttons", TwistyButtons);
 var TwistyButton = class extends ManagedCustomElement {
@@ -1500,6 +1518,9 @@ var TwistyButton = class extends ManagedCustomElement {
       buttonIcons
     );
   }
+  updateDarkMode(darkMode) {
+    this.contentWrapper.classList.toggle("dark-mode", darkMode === "dark");
+  }
   connectedCallback() {
     this.addCSS(buttonCSS);
     this.addElement(this.htmlButton);
@@ -1527,12 +1548,16 @@ var twistyScrubberCSS = new CSSSource(
   overflow: hidden;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
-  background: rgba(196, 196, 196, 0.75)
+  background: rgba(196, 196, 196, 0.75);
 }
 
 input:not(:disabled) {
   cursor: ew-resize;
 }
+
+.wrapper.dark-mode {
+  background: #666666;
+}
 `
 );
 
@@ -1591,6 +1616,12 @@ var TwistyScrubber = class extends ManagedCustomElement {
   async connectedCallback() {
     this.addCSS(twistyScrubberCSS);
     this.addElement(await this.inputElem());
+    this.model?.twistySceneModel.darkMode.addFreshListener(
+      this.updateDarkMode.bind(this)
+    );
+  }
+  updateDarkMode(darkMode) {
+    this.contentWrapper.classList.toggle("dark-mode", darkMode === "dark");
   }
   #inputElem = null;
   async inputElem() {
@@ -1768,7 +1799,8 @@ twisty-scrubber {
   background: rgba(196, 196, 196, 0.5);
 }
 
-.wrapper.checkered {
+.wrapper.checkered,
+.wrapper.checkered-transparent {
   background-color: #EAEAEA;
   background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD),
     linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);
@@ -1776,6 +1808,18 @@ twisty-scrubber {
   background-position: 0 0, 16px 16px;
 }
 
+.wrapper.checkered-transparent {
+  background-color: #F4F4F4;
+  background-image: linear-gradient(45deg, #DDDDDD88 25%, transparent 25%, transparent 75%, #DDDDDD88 75%, #DDDDDD88),
+    linear-gradient(45deg, #DDDDDD88 25%, transparent 25%, transparent 75%, #DDDDDD88 75%, #DDDDDD88);
+}
+
+.wrapper.dark-mode {
+  background-color: #444;
+  background-image: linear-gradient(45deg, #DDDDDD0b 25%, transparent 25%, transparent 75%, #DDDDDD0b 75%, #DDDDDD0b),
+    linear-gradient(45deg, #DDDDDD0b 25%, transparent 25%, transparent 75%, #DDDDDD0b 75%, #DDDDDD0b);
+}
+
 .visualization-wrapper > * {
   width: 100%;
   height: 100%;
@@ -3096,6 +3140,8 @@ var DetailedTimelineInfoProp = class extends TwistyPropDerived {
   }
   #requestedTimestampToMilliseconds(inputs) {
     switch (inputs.timestampRequest) {
+      case "auto":
+        return inputs.setupAnchor === "start" && inputs.setupAlg.alg.experimentalIsEmpty() ? inputs.timeRange.end : inputs.timeRange.start;
       case "start":
         return inputs.timeRange.start;
       case "end":
@@ -3146,6 +3192,7 @@ var TempoScaleProp = class extends TwistyPropSource {
 
 // src/cubing/twisty/model/props/timeline/TimestampRequestProp.ts
 var smartTimestamps = {
+  auto: true,
   start: true,
   end: true,
   anchor: true,
@@ -3153,7 +3200,7 @@ var smartTimestamps = {
 };
 var TimestampRequestProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
-    return "opposite-anchor";
+    return "auto";
   }
   set(v) {
     if (!this.validInput(v)) {
@@ -3244,6 +3291,13 @@ var VisualizationStrategyProp = class extends TwistyPropDerived {
   }
 };
 
+// src/cubing/twisty/model/props/puzzle/display/FaceletScaleProp.ts
+var FaceletScaleProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
 // src/cubing/twisty/model/props/puzzle/display/FoundationDisplayProp.ts
 var FoundationDisplayProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
@@ -3379,13 +3433,6 @@ var StickeringRequestProp = class extends SimpleTwistyPropSource {
   }
 };
 
-// src/cubing/twisty/model/props/puzzle/display/FaceletScaleProp.ts
-var FaceletScaleProp = class extends SimpleTwistyPropSource {
-  getDefaultValue() {
-    return "auto";
-  }
-};
-
 // src/cubing/twisty/model/props/puzzle/state/DragInputProp.ts
 var DragInputProp = class extends SimpleTwistyPropSource {
   getDefaultValue() {
@@ -3414,6 +3461,27 @@ var BackgroundProp = class extends SimpleTwistyPropSource {
   }
 };
 
+// src/cubing/twisty/model/props/viewer/DarkModeProp.ts
+var DarkModeProp = class extends TwistyPropDerived {
+  derive(inputs) {
+    return inputs.darkModeRequest === "dark" ? "dark" : "light";
+  }
+};
+
+// src/cubing/twisty/model/props/viewer/DarkModeRequestProp.ts
+var DarkModeRequstProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return "auto";
+  }
+};
+
+// src/cubing/twisty/model/props/viewer/DOMElementReferenceProp.ts
+var DOMElementReferenceProp = class extends SimpleTwistyPropSource {
+  getDefaultValue() {
+    return null;
+  }
+};
+
 // src/cubing/twisty/model/props/viewer/LatitudeLimit.ts
 var DEFAULT_LATITUDE_LIMIT = 35;
 var LatitudeLimitProp = class extends SimpleTwistyPropSource {
@@ -3534,9 +3602,11 @@ var TwistySceneModel = class {
   constructor(twistyPlayerModel) {
     this.twistyPlayerModel = twistyPlayerModel;
     this.background = new BackgroundProp();
+    this.darkModeRequest = new DarkModeRequstProp();
     this.dragInput = new DragInputProp();
     this.foundationDisplay = new FoundationDisplayProp();
     this.foundationStickerSpriteURL = new URLProp();
+    this.fullscreenElement = new DOMElementReferenceProp();
     this.hintFacelet = new HintFaceletProp();
     this.hintStickerSpriteURL = new URLProp();
     this.initialHintFaceletsAnimation = new InitialHintFaceletsAnimationProp();
@@ -3547,6 +3617,7 @@ var TwistySceneModel = class {
     this.stickeringMaskRequest = new StickeringMaskRequestProp();
     this.stickeringRequest = new StickeringRequestProp();
     this.faceletScale = new FaceletScaleProp();
+    this.darkMode = new DarkModeProp({ darkModeRequest: this.darkModeRequest });
     this.foundationStickerSprite = new SpriteProp({
       spriteURL: this.foundationStickerSpriteURL
     });
@@ -3653,7 +3724,8 @@ var TwistyPlayerModel = class {
       {
         timestampRequest: this.timestampRequest,
         timeRange: this.timeRange,
-        setupAnchor: this.setupAnchor
+        setupAnchor: this.setupAnchor,
+        setupAlg: this.setupAlg
       }
     );
     this.coarseTimelineInfo = new CoarseTimelineInfoProp({
@@ -3691,7 +3763,8 @@ var TwistyPlayerModel = class {
       alg,
       setup,
       anchor,
-      experimentalStickeringRequest
+      experimentalStickeringRequest,
+      experimentalTitle
     ] = await Promise.all([
       this.viewerLink.get(),
       this.puzzleID.get(),
@@ -3699,7 +3772,8 @@ var TwistyPlayerModel = class {
       this.alg.get(),
       this.setupAlg.get(),
       this.setupAnchor.get(),
-      this.twistySceneModel.stickeringRequest.get()
+      this.twistySceneModel.stickeringRequest.get(),
+      this.twistySceneModel.twistyPlayerModel.title.get()
     ]);
     const isExplorer = viewerLink === "experimental-twizzle-explorer";
     const url = new URL(
@@ -3725,6 +3799,9 @@ var TwistyPlayerModel = class {
     } else if (puzzleID !== "3x3x3") {
       url.searchParams.set("puzzle", puzzleID);
     }
+    if (experimentalTitle) {
+      url.searchParams.set("title", experimentalTitle);
+    }
     return url.toString();
   }
   experimentalAddAlgLeaf(algLeaf, options) {
@@ -3874,6 +3951,12 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
   get background() {
     throw err("background");
   }
+  set darkMode(darkMode) {
+    this.experimentalModel.twistySceneModel.darkModeRequest.set(darkMode);
+  }
+  get darkMode() {
+    throw err("darkMode");
+  }
   set controlPanel(newControlPanel) {
     this.experimentalModel.controlPanel.set(newControlPanel);
   }
@@ -3978,6 +4061,12 @@ var TwistyPlayerSettable = class extends ManagedCustomElement {
   get experimentalHintSprite() {
     throw err("experimentalHintSprite");
   }
+  set fullscreenElement(element) {
+    this.experimentalModel.twistySceneModel.fullscreenElement.set(element);
+  }
+  get fullscreenElement() {
+    throw err("fullscreenElement");
+  }
   set experimentalInitialHintFaceletsAnimation(anim) {
     this.experimentalModel.twistySceneModel.initialHintFaceletsAnimation.set(
       anim
@@ -4024,6 +4113,7 @@ var twistyPlayerAttributeMap = {
   "experimental-stickering": "experimentalStickering",
   "experimental-stickering-mask-orbits": "experimentalStickeringMaskOrbits",
   background: "background",
+  "dark-mode": "darkMode",
   "control-panel": "controlPanel",
   "back-view": "backView",
   "experimental-initial-hint-facelets-animation": "experimentalInitialHintFaceletsAnimation",
@@ -4117,7 +4207,19 @@ var TwistyPlayer = class extends TwistyPlayerSettable {
       (backgroundTheme) => {
         this.contentWrapper.classList.toggle(
           "checkered",
-          backgroundTheme !== "none"
+          ["auto", "checkered"].includes(backgroundTheme)
+        );
+        this.contentWrapper.classList.toggle(
+          "checkered-transparent",
+          backgroundTheme === "checkered-transparent"
+        );
+      }
+    );
+    this.experimentalModel.twistySceneModel.darkMode.addFreshListener(
+      (darkModeTheme) => {
+        this.contentWrapper.classList.toggle(
+          "dark-mode",
+          ["dark"].includes(darkModeTheme)
         );
       }
     );
@@ -5140,7 +5242,7 @@ var TwistyAlgEditor = class extends ManagedCustomElement {
             await twistyPlayer.experimentalModel.indexer.get(),
             await twistyPlayer.experimentalModel.timestampRequest.get()
           ]);
-          if (timestampRequest === "opposite-anchor" && !this.#onInputHasFired) {
+          if (timestampRequest === "auto" && !this.#onInputHasFired) {
             return;
           }
           const moveStartTimestamp = indexer.indexToMoveStartTimestamp(
@@ -5237,7 +5339,8 @@ var twizzleLinkCSS = new CSSSource(
 .heading {
   background: rgba(255, 230, 210, 1);
   font-weight: bold;
-  padding: 0.25em 0.5em;    display: grid;
+  padding: 0.25em 0.5em;
+  display: grid;
   grid-template-columns: 1fr auto;
 }
 
@@ -5261,8 +5364,55 @@ twisty-player {
 twisty-player + .heading {
   padding-top: 0.5em;
 }
+
+twisty-alg-viewer {
+  display: inline-block;
+}
+
+.wrapper:fullscreen {
+  width: 100%;
+  height: 100%;
+}
+
+.wrapper:fullscreen twisty-player {
+  height: 50vh;
+}
+
+.wrapper:fullscreen .scrollable-region {
+  height: 50vh
+}
 `
 );
+var twizzleLinkForumTweaksCSS = new CSSSource(`
+.wrapper {
+  background: white;
+}
+
+.heading {
+  background: #4285f422;
+}
+
+.scrollable-region {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.wrapper.dark-mode {
+  background: #262626;
+  color: #929292;
+  border-color: #FFFFFF44;
+  color-scheme: dark;
+}
+
+.wrapper.dark-mode .heading {
+  background: #1d1d1d;
+  color: #ececec;
+}
+
+.heading.title {
+  background: none;
+}
+`);
 
 // src/cubing/twisty/views/twizzle/url-params.ts
 function getConfigFromURL(prefix = "", url = location.href) {
@@ -5291,8 +5441,9 @@ function getConfigFromURL(prefix = "", url = location.href) {
 
 // src/cubing/twisty/views/twizzle/TwizzleLink.ts
 var TwizzleLink = class extends ManagedCustomElement {
-  constructor() {
+  constructor(options) {
     super({ mode: "open" });
+    this.options = options;
     this.twistyPlayer = null;
     this.a = null;
   }
@@ -5306,13 +5457,20 @@ var TwizzleLink = class extends ManagedCustomElement {
       span.title = "Could not show a player for link";
       this.addElement(this.a);
     }
-    if (this.#cssElem) {
-      this.#cssElem.remove();
-    }
+    this.#cssElem?.remove();
+    this.#cssCDNForumTweaksElem?.remove();
   }
   #cssElem;
+  #cssCDNForumTweaksElem;
+  #scrollableRegion;
   async connectedCallback() {
+    if (this.options?.darkMode) {
+      this.contentWrapper.classList.add("dark-mode");
+    }
     this.#cssElem = this.addCSS(twizzleLinkCSS);
+    if (this.options?.cdnForumTweaks) {
+      this.addCSS(twizzleLinkForumTweaksCSS);
+    }
     this.a = this.querySelector("a");
     if (!this.a) {
       return;
@@ -5333,10 +5491,18 @@ var TwizzleLink = class extends ManagedCustomElement {
       }
       this.twistyPlayer = this.addElement(
         new TwistyPlayer({
+          background: this.options?.cdnForumTweaks ? "checkered-transparent" : "checkered",
+          darkMode: this.options?.darkMode ? "dark" : "light",
           ...config,
           viewerLink: isExplorer ? "experimental-twizzle-explorer" : "auto"
         })
       );
+      this.twistyPlayer.fullscreenElement = this.contentWrapper;
+      if (config.experimentalTitle) {
+        this.twistyPlayer.experimentalTitle = config.experimentalTitle;
+      }
+      this.#scrollableRegion = this.addElement(document.createElement("div"));
+      this.#scrollableRegion.classList.add("scrollable-region");
       if (config.experimentalTitle) {
         this.addHeading(config.experimentalTitle).classList.add("title");
       }
@@ -5345,7 +5511,9 @@ var TwizzleLink = class extends ManagedCustomElement {
           "Setup",
           async () => (await this.twistyPlayer?.experimentalModel.setupAlg.get())?.alg.toString() ?? null
         );
-        const setupAlgDiv = this.addElement(document.createElement("div"));
+        const setupAlgDiv = this.#scrollableRegion.appendChild(
+          document.createElement("div")
+        );
         setupAlgDiv.classList.add("setup-alg");
         setupAlgDiv.textContent = new Alg(
           config.experimentalSetupAlg
@@ -5355,7 +5523,7 @@ var TwizzleLink = class extends ManagedCustomElement {
         "Moves",
         async () => (await this.twistyPlayer?.experimentalModel.alg.get())?.alg.toString() ?? null
       );
-      const twistyAlgViewer = this.addElement(
+      const twistyAlgViewer = this.#scrollableRegion.appendChild(
         new TwistyAlgViewer({ twistyPlayer: this.twistyPlayer })
       );
       twistyAlgViewer.part.add("twisty-alg-viewer");
@@ -5364,7 +5532,9 @@ var TwizzleLink = class extends ManagedCustomElement {
     }
   }
   addHeading(text, getTextToCopy) {
-    const headingDiv = this.addElement(document.createElement("div"));
+    const headingDiv = this.#scrollableRegion.appendChild(
+      document.createElement("div")
+    );
     headingDiv.classList.add("heading");
     headingDiv.textContent = text;
     if (getTextToCopy) {
@@ -5382,18 +5552,18 @@ var TwizzleLink = class extends ManagedCustomElement {
       }
       a.addEventListener("click", async (e) => {
         e.preventDefault();
-        a.textContent = "\u{1F4CB}\u2026";
+        a.textContent = "\u2026\u{1F4CB}";
         const textToCopy = await getTextToCopy();
         if (textToCopy) {
           try {
             await navigator.clipboard.writeText(textToCopy);
-            setAndClear("\u{1F4CB}\u2705");
+            setAndClear("\u2705\u{1F4CB}");
           } catch (e2) {
-            setAndClear("\u{1F4CB}\u274C");
+            setAndClear("\u274C\u{1F4CB}");
             throw e2;
           }
         } else {
-          setAndClear("\u{1F4CB}\u274C");
+          setAndClear("\u274C\u{1F4CB}");
         }
       });
     }
@@ -5401,6 +5571,15 @@ var TwizzleLink = class extends ManagedCustomElement {
   }
 };
 customElementsShim.define("twizzle-link", TwizzleLink);
+var TwizzleForumLink = class extends TwizzleLink {
+  constructor() {
+    super({
+      cdnForumTweaks: true,
+      darkMode: document.documentElement.classList.contains("style-dark")
+    });
+  }
+};
+customElementsShim.define("twizzle-forum-link", TwizzleForumLink);
 export {
   NO_VALUE as EXPERIMENTAL_PROP_NO_VALUE,
   KPuzzleSVGWrapper as ExperimentalKPuzzleSVGWrapper,
@@ -5409,7 +5588,7 @@ export {
   TwistyAlgEditor,
   TwistyAlgViewer,
   TwistyPlayer,
-  TwizzleLink,
+  TwizzleForumLink as TwizzleLink,
   backViewLayouts,
   setTwistyDebug
 };