cubing 0.20.2 → 0.21.0-pre12

package/src/cubing/twisty/views/TwistyPlayer.ts

@@ -0,0 +1,327 @@
+import type { ExperimentalStickering } from "..";
+import { Alg, Move } from "../../alg";
+import type { PuzzleDescriptionString } from "../../puzzle-geometry/PGPuzzles";
+import type { TwistyAnimationControllerDelegate } from "../controllers/TwistyAnimationController";
+import { TwistyPlayerController } from "../controllers/TwistyPlayerController";
+import type { BackgroundThemeWithAuto } from "../model/props/viewer/BackgroundProp";
+import type { BackViewLayoutWithAuto } from "../model/props/viewer/BackViewProp";
+import type { ControlPanelThemeWithAuto } from "../model/props/viewer/ControlPanelProp";
+import type { HintFaceletStyleWithAuto } from "../model/props/puzzle/display/HintFaceletProp";
+import type { ViewerLinkPageWithAuto } from "../model/props/viewer/ViewerLinkProp";
+import type { VisualizationFormatWithAuto } from "../model/props/viewer/VisualizationProp";
+import type { VisualizationStrategy } from "../model/props/viewer/VisualizationStrategyProp";
+import { ClassListManager } from "../old/dom/element/ClassListManager";
+import { customElementsShim } from "../old/dom/element/node-custom-element-shims";
+import { twistyPlayerCSS } from "../old/dom/TwistyPlayer.css";
+import {
+  controlsLocations,
+  PuzzleID,
+  SetupToLocation,
+} from "../old/dom/TwistyPlayerConfig";
+import { Twisty2DSceneWrapper } from "./2D/Twisty2DSceneWrapper";
+import { Twisty3DSceneWrapper } from "./3D/Twisty3DSceneWrapper";
+import { TwistyButtonsV2 } from "./control-panel/TwistyButtonsV2";
+import { TwistyScrubberV2 } from "./control-panel/TwistyScrubberV2";
+import { downloadURL, getDefaultFilename, screenshot } from "./screenshot";
+import { TwistyPlayerSettable } from "./TwistyPlayerSettable";
+
+// TODO: I couldn't figure out how to use use more specific types. Ideally, we'd
+// enforce consistency with the model.
+export const twistyPlayerAttributeMap = {
+  // TODO: We assume each of these can be set using a string or will be automatically converted by JS (e.g. numbers). Can we enforce
+  // that with types? Do we need to add a translation mechanism for things we
+  // don't want to leave settable as strings?
+  // TODO: Enum validation.
+
+  // Alg
+  "alg": "alg",
+  "experimental-setup-alg": "experimentalSetupAlg",
+
+  // String-based
+  "experimental-setup-anchor": "experimentalSetupAnchor",
+  "puzzle": "puzzle",
+  "experimental-puzzle-description": "experimentalPuzzleDescription",
+  "visualization": "visualization",
+  "hint-facelets": "hintFacelets",
+  "experimental-stickering": "experimentalStickering",
+  "background": "background",
+  "control-panel": "controlPanel",
+  "back-view": "backView",
+  // "indexer": "indexer",
+  "viewer-link": "viewerLink",
+
+  // Number-based
+  "camera-latitude": "cameraLatitude",
+  "camera-longitude": "cameraLongitude",
+  "camera-distance": "cameraDistance",
+  "camera-latitude-limit": "cameraLatitudeLimit",
+  "tempo-scale": "tempoScale",
+
+  // URL-based
+  "experimental-sprite": "experimentalSprite",
+  "experimental-hint-sprite": "experimentalHintSprite",
+};
+
+export type TwistyPlayerAttribute = keyof typeof twistyPlayerAttributeMap;
+
+const configKeys: Record<TwistyPlayerAttribute, true> = Object.fromEntries(
+  Object.values(twistyPlayerAttributeMap).map((s) => [s, true]),
+) as any;
+
+// TODO: Find a way to share this def with `attributeMap`.
+export interface TwistyPlayerConfig {
+  // Alg
+  alg?: Alg | string;
+  experimentalSetupAlg?: Alg | string;
+
+  // String-based
+  experimentalSetupAnchor?: SetupToLocation; // TODO: "auto"
+  puzzle?: PuzzleID;
+  experimentalPuzzleDescription?: PuzzleDescriptionString;
+  visualization?: VisualizationFormatWithAuto;
+  hintFacelets?: HintFaceletStyleWithAuto;
+  experimentalStickering?: ExperimentalStickering;
+  background?: BackViewLayoutWithAuto;
+  controlPanel?: ControlPanelThemeWithAuto;
+  backView?: BackViewLayoutWithAuto;
+  // "indexer"?: "indexer";
+  viewerLink?: ViewerLinkPageWithAuto;
+
+  // Number-based
+  cameraLatitude?: number;
+  cameraLongitude?: number;
+  cameraDistance?: number;
+  cameraLatitudeLimit?: number;
+  tempoScale?: number;
+
+  // URL-based
+  experimentalSprite?: string | null;
+  experimentalHintSprite?: string | null;
+}
+
+/**
+ * TwistyPlayer is the heart of `cubing.js`. It can be used to display a puzzle on a web page like this:
+ *
+ *     <script src="path/to/cubing/twisty" type="module"></script>
+ *     <twisty-player alg="R U R'"></twisty-player>
+ *
+ * You can also construct it directly in JavaScript:
+ *
+ *     import { TwistyPlayer } from "cubing/twisty";
+ *     const twistyPlayer = new TwistyPlayer({alg: "R U R'"});
+ *     // Once the page has loaded, you can do this:
+ *     document.body.appendChild(twistyPlayer);
+ *
+ * See {@link https://js.cubing.net/cubing/} for more examples.
+ */
+export class TwistyPlayer
+  extends TwistyPlayerSettable
+  implements TwistyAnimationControllerDelegate
+{
+  controller: TwistyPlayerController = new TwistyPlayerController(
+    this.experimentalModel,
+    this,
+  );
+
+  buttons: TwistyButtonsV2;
+
+  constructor(config: TwistyPlayerConfig = {}) {
+    super();
+
+    // TODO: double-check that these are all getting set sync without causing extra work.
+    for (const [propName, value] of Object.entries(config)) {
+      if (!configKeys[propName as TwistyPlayerAttribute]) {
+        console.warn(`Invalid config passed to TwistyPlayer: ${propName}`);
+        break;
+      }
+      (this as any)[propName] = value;
+    }
+  }
+
+  #controlsManager: ClassListManager<ControlPanelThemeWithAuto> =
+    new ClassListManager<ControlPanelThemeWithAuto>(
+      this,
+      "controls-",
+      (["auto"] as ControlPanelThemeWithAuto[]).concat(
+        Object.keys(controlsLocations) as ControlPanelThemeWithAuto[],
+      ),
+    );
+
+  #visualizationWrapperElem = document.createElement("div"); // TODO: Better pattern.
+  #errorElem = document.createElement("div"); // TODO: Better pattern.
+  async connectedCallback(): Promise<void> {
+    this.addCSS(twistyPlayerCSS);
+
+    this.addElement(this.#visualizationWrapperElem).classList.add(
+      "visualization-wrapper",
+    );
+    this.addElement(this.#errorElem).classList.add("error-elem");
+    this.#errorElem.textContent = "Error";
+    this.experimentalModel.userVisibleErrorTracker.addFreshListener(
+      (userVisibleError) => {
+        const errorString: string | null = userVisibleError.errors[0] ?? null;
+        this.contentWrapper.classList.toggle("error", !!errorString);
+        if (errorString) {
+          this.#errorElem.textContent = errorString;
+        }
+      },
+    );
+
+    const scrubber = new TwistyScrubberV2(this.experimentalModel);
+    this.contentWrapper.appendChild(scrubber);
+
+    this.buttons = new TwistyButtonsV2(
+      this.experimentalModel,
+      this.controller,
+      this,
+    );
+    this.contentWrapper.appendChild(this.buttons);
+
+    this.experimentalModel.backgroundProp.addFreshListener(
+      (backgroundTheme: BackgroundThemeWithAuto) => {
+        this.contentWrapper.classList.toggle(
+          "checkered",
+          backgroundTheme !== "none",
+        );
+      },
+    );
+
+    this.experimentalModel.controlPanelProp.addFreshListener(
+      (controlPanel: ControlPanelThemeWithAuto) => {
+        this.#controlsManager.setValue(controlPanel);
+      },
+    );
+
+    this.experimentalModel.visualizationStrategyProp.addFreshListener(
+      this.#setVisualizationWrapper.bind(this),
+    );
+
+    this.experimentalModel.puzzleIDProp.addFreshListener(this.flash.bind(this));
+  }
+
+  flash() {
+    this.#visualizationWrapper?.animate([{ opacity: 0.25 }, { opacity: 1 }], {
+      duration: 250,
+    });
+  }
+
+  #visualizationWrapper: Twisty2DSceneWrapper | Twisty3DSceneWrapper | null =
+    null;
+
+  #visualizationStrategy: VisualizationStrategy | null = null;
+  #setVisualizationWrapper(strategy: VisualizationStrategy): void {
+    if (strategy !== this.#visualizationStrategy) {
+      this.#visualizationWrapper?.remove();
+      this.#visualizationWrapper?.disconnect();
+      let newWrapper: Twisty2DSceneWrapper | Twisty3DSceneWrapper;
+      switch (strategy) {
+        case "2D":
+        case "experimental-2D-LL":
+          newWrapper = new Twisty2DSceneWrapper(
+            this.experimentalModel,
+            strategy,
+          );
+          break;
+        case "Cube3D":
+        case "PG3D":
+          // TODO: Properly wire this up so we can set PG3D for the cube.
+          newWrapper = new Twisty3DSceneWrapper(this.experimentalModel);
+          break;
+        default:
+          throw new Error("Invalid visualization");
+      }
+      this.#visualizationWrapperElem.appendChild(newWrapper);
+      this.#visualizationWrapper = newWrapper;
+      this.#visualizationStrategy = strategy;
+    }
+  }
+
+  jumpToStart(options?: { flash: boolean }): void {
+    this.controller.jumpToStart(options);
+  }
+
+  jumpToEnd(options?: { flash: boolean }): void {
+    this.controller.jumpToEnd(options);
+  }
+
+  play(): void {
+    this.controller.togglePlay(true);
+  }
+
+  pause(): void {
+    this.controller.togglePlay(false);
+  }
+
+  // Inspiration:
+  // - https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute (`force` argument)
+  // - https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle (`force` argument)
+  // We still provide `play()` and `pause()` individually for convenience, though.
+  togglePlay(play?: boolean): void {
+    this.controller.togglePlay(play);
+  }
+
+  // TODO: Animate the new move.
+  experimentalAddMove(move: Move): void {
+    (async () => {
+      const alg = (await this.experimentalModel.algProp.get()).alg;
+      this.experimentalModel.algProp.set(new Alg(alg.concat([move])));
+      this.experimentalModel.timestampRequestProp.set("end");
+    })();
+  }
+
+  static get observedAttributes(): string[] {
+    return Object.keys(twistyPlayerAttributeMap);
+  }
+
+  attributeChangedCallback(
+    attributeName: string,
+    _oldValue: string,
+    newValue: string,
+  ): void {
+    const setterName =
+      twistyPlayerAttributeMap[attributeName as TwistyPlayerAttribute];
+    if (!setterName) {
+      return;
+    }
+
+    (this as any)[setterName] = newValue;
+  }
+
+  // TODO: Make this more ergonomic and flexible.
+  // TODO: dimensions.
+  async experimentalScreenshot(options?: {
+    width: number;
+    height: number;
+  }): Promise<string> {
+    return (await screenshot(this.experimentalModel, options)).dataURL;
+  }
+
+  // TODO: Make this more ergonomic and flexible.
+  // TODO: dimensions.
+  async experimentalDownloadScreenshot(filename?: string): Promise<void> {
+    if (
+      ["2D", "experimental-2D-LL"].includes(
+        await this.experimentalModel.visualizationStrategyProp.get(),
+      )
+    ) {
+      // TODO: This has lots of async issues. It should also go into the screenshot impl file.
+      const wrapper2D = this.#visualizationWrapper as Twisty2DSceneWrapper;
+      const twisty2DPuzzle = await wrapper2D
+        .currentTwisty2DPuzzleWrapper()!
+        .twisty2DPuzzle();
+      const str = new XMLSerializer().serializeToString(
+        twisty2DPuzzle.svg.element,
+      );
+      const url = URL.createObjectURL(new Blob([str]));
+      downloadURL(
+        url,
+        filename ?? (await getDefaultFilename(this.experimentalModel)),
+        "svg",
+      );
+    } else {
+      await (await screenshot(this.experimentalModel)).download(filename);
+    }
+  }
+}
+
+customElementsShim.define("twisty-player", TwistyPlayer);

package/src/cubing/twisty/views/TwistyPlayerSettable.ts

@@ -0,0 +1,111 @@
+import type { Alg } from "../../alg";
+import type { PuzzleDescriptionString } from "../../puzzle-geometry/PGPuzzles";
+import type { ExperimentalStickering } from "../../twisty";
+import type { BackgroundThemeWithAuto } from "../model/props/viewer/BackgroundProp";
+import type { BackViewLayoutWithAuto } from "../model/props/viewer/BackViewProp";
+import type { ControlPanelThemeWithAuto } from "../model/props/viewer/ControlPanelProp";
+import type { HintFaceletStyleWithAuto } from "../model/props/puzzle/display/HintFaceletProp";
+import type { IndexerStrategyName } from "../model/props/puzzle/state/IndexerConstructorRequestProp";
+import type { TimestampRequest } from "../model/props/timeline/TimestampRequestProp";
+import type { ViewerLinkPageWithAuto } from "../model/props/viewer/ViewerLinkProp";
+import type { VisualizationFormatWithAuto } from "../model/props/viewer/VisualizationProp";
+import { TwistyPlayerModel } from "../model/TwistyPlayerModel";
+import type { MillisecondTimestamp } from "../old/animation/cursor/CursorTypes";
+import { ManagedCustomElement } from "../old/dom/element/ManagedCustomElement";
+import type { PuzzleID, SetupToLocation } from "../old/dom/TwistyPlayerConfig";
+
+function err(propName: string): Error {
+  return new Error(
+    `Cannot get \`.${propName}\` directly from a \`TwistyPlayer\`.`,
+  );
+}
+
+// prettier-ignore
+export abstract class TwistyPlayerSettable extends ManagedCustomElement {
+  experimentalModel: TwistyPlayerModel = new TwistyPlayerModel();
+
+  set alg(newAlg: Alg | string) { this.experimentalModel.algProp.set(newAlg); }
+  get alg(): never { throw err("alg"); }
+
+  set experimentalSetupAlg(newSetup: Alg | string) { this.experimentalModel.setupProp.set(newSetup); }
+  get experimentalSetupAlg(): never { throw err("setup"); }
+
+  set experimentalSetupAnchor(anchor: SetupToLocation) { this.experimentalModel.setupAnchorProp.set(anchor); }
+  get experimentalSetupAnchor(): never { throw err("anchor"); }
+
+  set puzzle(puzzleID: PuzzleID) { this.experimentalModel.puzzleIDRequestProp.set(puzzleID); }
+  get puzzle(): never { throw err("puzzle"); }
+
+  set experimentalPuzzleDescription(puzzleDescription: PuzzleDescriptionString) { this.experimentalModel.puzzleDescriptionRequestProp.set(puzzleDescription); }
+  get experimentalPuzzleDescription(): never { throw err("experimentalPuzzleDescription"); }
+
+  set timestamp(timestamp: TimestampRequest) { this.experimentalModel.timestampRequestProp.set(timestamp); }
+  get timestamp(): never { throw err("timestamp"); }
+
+  set hintFacelets(hintFaceletStyle: HintFaceletStyleWithAuto) { this.experimentalModel.hintFaceletProp.set(hintFaceletStyle); }
+  get hintFacelets(): never { throw err("hintFacelets"); }
+
+  set experimentalStickering(stickering: ExperimentalStickering) { this.experimentalModel.stickeringProp.set(stickering); }
+  get experimentalStickering(): never { throw err("stickering"); }
+
+  set backView(backView: BackViewLayoutWithAuto) { this.experimentalModel.backViewProp.set(backView); }
+  get backView(): never { throw err("backView"); }
+
+  set background(backgroundTheme: BackgroundThemeWithAuto) { this.experimentalModel.backgroundProp.set(backgroundTheme); }
+  get background(): never { throw err("background"); }
+
+  set controlPanel(newControlPanel: ControlPanelThemeWithAuto) { this.experimentalModel.controlPanelProp.set(newControlPanel); }
+  get controlPanel(): never { throw new Error( "Cannot get `.controlPanel` directly from a `TwistyPlayer`."); }
+
+  set visualization(visualizationFormat: VisualizationFormatWithAuto) { this.experimentalModel.visualizationFormatProp.set(visualizationFormat); }
+  get visualization(): never { throw new Error( "Cannot get `.visualization` directly from a `TwistyPlayer`."); }
+
+  set viewerLink(viewerLinkPage: ViewerLinkPageWithAuto) { this.experimentalModel.viewerLinkProp.set(viewerLinkPage); }
+  get viewerLink(): never { throw err("viewerLink"); }
+
+  set cameraLatitude(latitude: number) { this.experimentalModel.orbitCoordinatesRequestProp.set({ latitude }); }
+  get cameraLatitude(): never { throw new Error( "Cannot get `.cameraLatitude` directly from a `TwistyPlayer`."); }
+
+  set cameraLongitude(longitude: number) { this.experimentalModel.orbitCoordinatesRequestProp.set({ longitude }); }
+  get cameraLongitude(): never { throw new Error( "Cannot get `.cameraLongitude` directly from a `TwistyPlayer`."); }
+
+  set cameraDistance(distance: number) { this.experimentalModel.orbitCoordinatesRequestProp.set({ distance }); }
+  get cameraDistance(): never { throw new Error( "Cannot get `.cameraDistance` directly from a `TwistyPlayer`."); }
+
+  set cameraLatitudeLimit(latitudeLimit: number) { this.experimentalModel.latitudeLimitProp.set(latitudeLimit); }
+  get cameraLatitudeLimit(): never { throw new Error( "Cannot get `.cameraLatitudeLimit` directly from a `TwistyPlayer`."); }
+
+  set indexer(indexer: IndexerStrategyName) { this.experimentalModel.indexerConstructorRequestProp.set(indexer); }
+  get indexer(): never { throw err("indexer"); }
+
+  set tempoScale(newTempoScale: number) { this.experimentalModel.tempoScaleProp.set(newTempoScale); }
+  get tempoScale(): never { throw err("tempoScale"); }
+
+  set experimentalSprite(url: string | URL) { this.experimentalModel.foundationStickerSpriteURL.set(url); }
+  get experimentalSprite(): never { throw err("experimentalSprite"); }
+
+  set experimentalHintSprite(url: string | URL) { this.experimentalModel.hintStickerSpriteURL.set(url); }
+  get experimentalHintSprite(): never { throw err("experimentalHintSprite"); }
+
+  experimentalGet = new ExperimentalGetters(this.experimentalModel)
+}
+
+class ExperimentalGetters {
+  constructor(private model: TwistyPlayerModel) {}
+
+  async alg(): Promise<Alg> {
+    return (await this.model.algProp.get()).alg;
+  }
+
+  async setupAlg(): Promise<Alg> {
+    return (await this.model.setupProp.get()).alg;
+  }
+
+  puzzleID(): Promise<PuzzleID> {
+    return this.model.puzzleIDProp.get();
+  }
+
+  async timestamp(): Promise<MillisecondTimestamp> {
+    return (await this.model.detailedTimelineInfoProp.get()).timestamp;
+  }
+}

package/src/cubing/twisty/views/control-panel/TwistyButtonsV2.ts

@@ -0,0 +1,159 @@
+import {
+  BoundaryType,
+  Direction,
+} from "../../old/animation/cursor/CursorTypes";
+import { buttonCSS, buttonGridCSS } from "../../old/dom/controls/buttons.css";
+import { ClassListManager } from "../../old/dom/element/ClassListManager";
+import { ManagedCustomElement } from "../../old/dom/element/ManagedCustomElement";
+import { customElementsShim } from "../../old/dom/element/node-custom-element-shims";
+import {
+  ButtonAppearances,
+  ButtonIcon,
+  buttonIcons,
+} from "../../model/props/viewer/ButtonAppearanceProp";
+import type { TwistyPlayerModel } from "../../model/TwistyPlayerModel";
+import type { TwistyPlayerController } from "../../controllers/TwistyPlayerController";
+import {
+  documentExitFullscreen,
+  documentFullscreenElement,
+  requestFullscreen,
+} from "./webkit-fullscreen";
+
+const buttonCommands = {
+  "fullscreen": true,
+  "jump-to-start": true,
+  "play-step-backwards": true,
+  "play-pause": true,
+  "play-step": true,
+  "jump-to-end": true,
+  "twizzle-link": true,
+};
+
+export type ButtonCommand = keyof typeof buttonCommands;
+
+export class TwistyButtonsV2 extends ManagedCustomElement {
+  buttons: Record<ButtonCommand, TwistyButtonV2> | null = null;
+
+  // TODO: Privacy
+  constructor(
+    public model?: TwistyPlayerModel,
+    public controller?: TwistyPlayerController,
+    private fullscreenElement?: HTMLElement,
+  ) {
+    super();
+  }
+
+  connectedCallback(): void {
+    this.addCSS(buttonGridCSS);
+    const buttons: Partial<Record<ButtonCommand, TwistyButtonV2>> = {};
+    for (const command in buttonCommands) {
+      const button = new TwistyButtonV2();
+      buttons[command as ButtonCommand] = button;
+      // Why does this still fire with the `disabled` attribute?
+      button.addEventListener("click", () =>
+        this.#onCommand(command as ButtonCommand),
+      );
+      this.addElement(button);
+    }
+    this.buttons = buttons as Record<ButtonCommand, TwistyButtonV2>;
+
+    this.model?.buttonAppearanceProp.addFreshListener(this.update.bind(this));
+  }
+
+  #onCommand(command: ButtonCommand) {
+    switch (command) {
+      case "fullscreen":
+        this.onFullscreenButton();
+        break;
+      case "jump-to-start":
+        this.controller?.jumpToStart({ flash: true });
+        break;
+      case "play-step-backwards":
+        this.controller?.animationController.play({
+          direction: Direction.Backwards,
+          untilBoundary: BoundaryType.Move,
+        });
+        break;
+      case "play-pause":
+        this.controller?.togglePlay();
+        break;
+      case "play-step":
+        this.controller?.animationController.play({
+          direction: Direction.Forwards,
+          untilBoundary: BoundaryType.Move,
+        });
+        break;
+      case "jump-to-end":
+        this.controller?.jumpToEnd({ flash: true });
+        break;
+      case "twizzle-link":
+        this.controller?.visitTwizzleLink();
+        break;
+      default:
+        throw new Error("Missing command");
+    }
+  }
+
+  // TODO: Should we have a prop, or a way to query if we're fullscreen?
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
+  async onFullscreenButton(): Promise<void> {
+    if (!this.fullscreenElement) {
+      throw new Error("Attempted to go fullscreen without an element.");
+    }
+
+    if (documentFullscreenElement() === this.fullscreenElement) {
+      documentExitFullscreen();
+    } else {
+      // TODO: Propagate button info to `ButtonAppearanceProp`.
+      this.buttons?.fullscreen.setIcon("exit-fullscreen");
+
+      requestFullscreen(this.fullscreenElement);
+
+      const onFullscreen = (): void => {
+        if (documentFullscreenElement() !== this.fullscreenElement) {
+          this.buttons?.fullscreen.setIcon("enter-fullscreen");
+          window.removeEventListener("fullscreenchange", onFullscreen);
+        }
+      };
+      window.addEventListener("fullscreenchange", onFullscreen);
+    }
+  }
+
+  async update(buttonAppearances: ButtonAppearances): Promise<void> {
+    // TODO: Check that we have every command?
+    for (const command in buttonCommands) {
+      // TODO: Why doesn't `command` have the type `ButtonCommand`?
+      const button = this.buttons![command as ButtonCommand];
+      // TODO: track individual changes?
+      const info = buttonAppearances[command as ButtonCommand];
+      button.button.disabled = !info.enabled;
+      button.button.title = info.title;
+      button.setIcon(info.icon);
+      button.hidden = !!info.hidden;
+      // button.textContent = info.icon;
+    }
+  }
+}
+
+customElementsShim.define("twisty-buttons-v2", TwistyButtonsV2);
+
+class TwistyButtonV2 extends ManagedCustomElement {
+  button: HTMLButtonElement = document.createElement("button"); // TODO: async?
+
+  connectedCallback() {
+    this.addCSS(buttonCSS);
+    this.addElement(this.button);
+  }
+
+  #iconManager: ClassListManager<ButtonIcon> = new ClassListManager(
+    this,
+    "svg-",
+    buttonIcons,
+  );
+
+  setIcon(iconName: ButtonIcon): void {
+    this.#iconManager.setValue(iconName);
+  }
+}
+
+customElementsShim.define("twisty-button-v2", TwistyButtonV2);