@tspro/web-music-score 4.2.1 → 5.1.0

package/dist/pieces/index.d.mts

@@ -1,4 +1,4 @@
-import { M as MDocument } from '../music-objects-3Hxlkxy6.mjs';
+import { M as MDocument } from '../music-objects-DTDFSro0.mjs';
 import '../note-eA2xPPiG.mjs';
 import '../tempo-dkctPkCS.mjs';
 import '@tspro/ts-utils-lib';

package/dist/pieces/index.d.ts

@@ -1,4 +1,4 @@
-import { M as MDocument } from '../music-objects-CI7IjsjE.js';
+import { M as MDocument } from '../music-objects-CMdYZeC6.js';
 import '../note-eA2xPPiG.js';
 import '../tempo-GrstpD9G.js';
 import '@tspro/ts-utils-lib';

package/dist/pieces/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v4.2.1 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.1.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/pieces/index.mjs

@@ -1,5 +1,5 @@
-/* WebMusicScore v4.2.1 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
-import "../chunk-64N22LCV.mjs";
+/* WebMusicScore v5.1.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+import "../chunk-2EQHSQWO.mjs";
 
 // src/pieces/frere-jacques.ts
 import { DocumentBuilder } from "@tspro/web-music-score/score";

package/dist/react-ui/index.d.mts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { c as Scale, S as ScaleType } from '../scale-DQP3b9Zx.mjs';
 import { b as PitchNotation, G as GuitarNoteLabel, N as Note } from '../note-eA2xPPiG.mjs';
 import { H as Handedness } from '../guitar-DdexKdN6.mjs';
-import { D as DivRect, M as MDocument, n as ScoreEventListener, p as MRenderer, q as MPlaybackButtons } from '../music-objects-3Hxlkxy6.mjs';
+import { D as DivRect, M as MDocument, n as ScoreEventListener, p as MRenderer, q as MPlaybackButtons } from '../music-objects-DTDFSro0.mjs';
 import '../tempo-dkctPkCS.mjs';
 import '@tspro/ts-utils-lib';
 
@@ -14,7 +14,7 @@ interface CircleOfFifthsProps {
 }
 /**
  * Circle of fifths react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -27,14 +27,14 @@ interface CircleOfFifthsProps {
  *           console.log("New scale is " + newScale.getScaleName());
  *       }
  *
- *       return &lt;&gt;
- *          &lt;ScoreUI.CircleOfFifths
+ *       return <>
+ *          <ScoreUI.CircleOfFifths
  *              style={{ position: "relative", padding: "0.5em" }}
  *              scale={curScale}
- *              onScaleChange={onChangeScale} /&gt;
- *      &lt;/&gt;;
+ *              onScaleChange={onChangeScale} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class CircleOfFifths extends React.Component<CircleOfFifthsProps, {}> {
     constructor(props: CircleOfFifthsProps);
@@ -187,7 +187,7 @@ interface GuitarViewState {
 }
 /**
  * Guitar (neck) view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -204,15 +204,15 @@ interface GuitarViewState {
  *       const onUpdateFretPosition: ScoreUI.UpdateFretPositionFunc = (fretPos) => { }
  *       const onClickFretPosition: ScoreUI.ClickFretPositionFunc = (fretPos) => { }
  *
- *       return &lt;&gt;
- *           &lt;ScoreUI.GuitarView
+ *       return <>
+ *           <ScoreUI.GuitarView
  *               style={{ position: "relative", width: 640 }}
  *               guitarContext={guitarCtx}
  *               onUpdateFretPosition={onUpdateFretPosition}
- *               onClickFretPosition={onClickFretPosition} /&gt;
- *      &lt;/&gt;;
+ *               onClickFretPosition={onClickFretPosition} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class GuitarView extends React.Component<GuitarViewProps, GuitarViewState> {
     state: GuitarViewState;
@@ -234,20 +234,23 @@ interface MusicScoreViewProps {
 }
 /**
  * Music score view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
- *   import * as Score from "@tspro/web-music-score/react";
- *   import * as Pieces from "@tspro/web-music-score/pieces";
+ *   import * as Score from "@tspro/web-music-score/score";
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *
  *   // Render function of react component.
  *   render() {
- *       const doc = Pieces.createFrereJacques();
+ *       // Create document.
+ *       const doc = new Score.DocumentBuilder()
+ *           // Build document...
+ *           .getDocument();
  *
- *       return &lt;&gt;
- *          &lt;Score.MusicScoreView doc=\{doc\} /&gt;
- *       &lt;/&gt;;
+ *       return <>
+ *          <ScoreUI.MusicScoreView doc={doc} />
+ *       </>;
  *   }
- * </pre>
+ * ```
  */
 declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     renderer: MRenderer;
@@ -256,6 +259,10 @@ declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     render(): react_jsx_runtime.JSX.Element;
 }
 
+/**
+ * Playback buttons layout
+ * @deprecated - Use `PlaybackButtonsProps` properties `singlePlayStop`, `playStop` or `playPauseStop` instead.
+ */
 declare enum PlaybackButtonsLayout {
     PlayStopSingle = 0,
     PlayStop = 1,
@@ -263,7 +270,11 @@ declare enum PlaybackButtonsLayout {
 }
 interface PlaybackButtonsProps {
     doc: MDocument;
+    /** @deprecated - Use `singlePlayStop`, `playStop` or `playPauseStop` properties instead. */
     buttonLayout?: PlaybackButtonsLayout;
+    singlePlayStop?: boolean;
+    playStop?: boolean;
+    playPauseStop?: boolean;
     playLabel?: string;
     pauseLabel?: string;
     stopLabel?: string;
@@ -273,23 +284,31 @@ interface PlaybackButtonsState {
 }
 /**
  * Usage:
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
- *   import * as Score from "\@tspro/web-music-score/score";
- *   import * as Pieces from "@tspro/web-music-score/pieces";
+ *   import * as Score from "@tspro/web-music-score/score";
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
+ *
+ *   // Create document.
+ *   const doc = new Score.DocumentBuilder()
+ *       // Build document...
+ *       .getDocument();
+ *
+ *   // Create default playback buttons (play, pause and stop buttons).
+ *   <ScoreUI.PlaybackButtons doc={doc} />
  *
- *   // Create sample musicdocument.
- *   const doc = Pieces.createFrereJacques();
+ *   // Create playback buttons with single play/stop button.
+ *   <ScoreUI.PlaybackButtons doc={doc} singlePlayStop />
  *
- *   // Create default playback buttons
- *   &lt;Score.PlaybackButtons doc={doc} /&gt;
+ *   // Create playback buttons with play and stop buttons.
+ *   <ScoreUI.PlaybackButtons doc={doc} playStop />
  *
- *   // Create playback buttons with custom play, pause and stop labels:
- *   &lt;Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /&gt;
+ *   // Create playback buttons with play, pause and stop buttons.
+ *   <ScoreUI.PlaybackButtons doc={doc} playPauseStop />
  *
- *   // Create playback buttons with different button layout.
- *   &lt;Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} /&gt;
- * </pre>
+ *   // You can also set custom play, pause and stop button labels.
+ *   <ScoreUI.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" />
+ * ```
  */
 declare class PlaybackButtons extends React.Component<PlaybackButtonsProps, PlaybackButtonsState> {
     state: PlaybackButtonsState;

package/dist/react-ui/index.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { c as Scale, S as ScaleType } from '../scale-DGx3tJH4.js';
 import { b as PitchNotation, G as GuitarNoteLabel, N as Note } from '../note-eA2xPPiG.js';
 import { H as Handedness } from '../guitar-CaZJDA05.js';
-import { D as DivRect, M as MDocument, n as ScoreEventListener, p as MRenderer, q as MPlaybackButtons } from '../music-objects-CI7IjsjE.js';
+import { D as DivRect, M as MDocument, n as ScoreEventListener, p as MRenderer, q as MPlaybackButtons } from '../music-objects-CMdYZeC6.js';
 import '../tempo-GrstpD9G.js';
 import '@tspro/ts-utils-lib';
 
@@ -14,7 +14,7 @@ interface CircleOfFifthsProps {
 }
 /**
  * Circle of fifths react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -27,14 +27,14 @@ interface CircleOfFifthsProps {
  *           console.log("New scale is " + newScale.getScaleName());
  *       }
  *
- *       return &lt;&gt;
- *          &lt;ScoreUI.CircleOfFifths
+ *       return <>
+ *          <ScoreUI.CircleOfFifths
  *              style={{ position: "relative", padding: "0.5em" }}
  *              scale={curScale}
- *              onScaleChange={onChangeScale} /&gt;
- *      &lt;/&gt;;
+ *              onScaleChange={onChangeScale} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class CircleOfFifths extends React.Component<CircleOfFifthsProps, {}> {
     constructor(props: CircleOfFifthsProps);
@@ -187,7 +187,7 @@ interface GuitarViewState {
 }
 /**
  * Guitar (neck) view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
  *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *   import * as Theory from "@tspro/web-music-score/theory";
@@ -204,15 +204,15 @@ interface GuitarViewState {
  *       const onUpdateFretPosition: ScoreUI.UpdateFretPositionFunc = (fretPos) => { }
  *       const onClickFretPosition: ScoreUI.ClickFretPositionFunc = (fretPos) => { }
  *
- *       return &lt;&gt;
- *           &lt;ScoreUI.GuitarView
+ *       return <>
+ *           <ScoreUI.GuitarView
  *               style={{ position: "relative", width: 640 }}
  *               guitarContext={guitarCtx}
  *               onUpdateFretPosition={onUpdateFretPosition}
- *               onClickFretPosition={onClickFretPosition} /&gt;
- *      &lt;/&gt;;
+ *               onClickFretPosition={onClickFretPosition} />
+ *      </>;
  *   }
- * </pre>
+ * ```
  */
 declare class GuitarView extends React.Component<GuitarViewProps, GuitarViewState> {
     state: GuitarViewState;
@@ -234,20 +234,23 @@ interface MusicScoreViewProps {
 }
 /**
  * Music score view react component.
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
- *   import * as Score from "@tspro/web-music-score/react";
- *   import * as Pieces from "@tspro/web-music-score/pieces";
+ *   import * as Score from "@tspro/web-music-score/score";
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
  *
  *   // Render function of react component.
  *   render() {
- *       const doc = Pieces.createFrereJacques();
+ *       // Create document.
+ *       const doc = new Score.DocumentBuilder()
+ *           // Build document...
+ *           .getDocument();
  *
- *       return &lt;&gt;
- *          &lt;Score.MusicScoreView doc=\{doc\} /&gt;
- *       &lt;/&gt;;
+ *       return <>
+ *          <ScoreUI.MusicScoreView doc={doc} />
+ *       </>;
  *   }
- * </pre>
+ * ```
  */
 declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     renderer: MRenderer;
@@ -256,6 +259,10 @@ declare class MusicScoreView extends React.Component<MusicScoreViewProps, {}> {
     render(): react_jsx_runtime.JSX.Element;
 }
 
+/**
+ * Playback buttons layout
+ * @deprecated - Use `PlaybackButtonsProps` properties `singlePlayStop`, `playStop` or `playPauseStop` instead.
+ */
 declare enum PlaybackButtonsLayout {
     PlayStopSingle = 0,
     PlayStop = 1,
@@ -263,7 +270,11 @@ declare enum PlaybackButtonsLayout {
 }
 interface PlaybackButtonsProps {
     doc: MDocument;
+    /** @deprecated - Use `singlePlayStop`, `playStop` or `playPauseStop` properties instead. */
     buttonLayout?: PlaybackButtonsLayout;
+    singlePlayStop?: boolean;
+    playStop?: boolean;
+    playPauseStop?: boolean;
     playLabel?: string;
     pauseLabel?: string;
     stopLabel?: string;
@@ -273,23 +284,31 @@ interface PlaybackButtonsState {
 }
 /**
  * Usage:
- * <pre>
+ * ```ts
  *   // Using with React TSX/JSX
- *   import * as Score from "\@tspro/web-music-score/score";
- *   import * as Pieces from "@tspro/web-music-score/pieces";
+ *   import * as Score from "@tspro/web-music-score/score";
+ *   import * as ScoreUI from "@tspro/web-music-score/react-ui";
+ *
+ *   // Create document.
+ *   const doc = new Score.DocumentBuilder()
+ *       // Build document...
+ *       .getDocument();
+ *
+ *   // Create default playback buttons (play, pause and stop buttons).
+ *   <ScoreUI.PlaybackButtons doc={doc} />
  *
- *   // Create sample musicdocument.
- *   const doc = Pieces.createFrereJacques();
+ *   // Create playback buttons with single play/stop button.
+ *   <ScoreUI.PlaybackButtons doc={doc} singlePlayStop />
  *
- *   // Create default playback buttons
- *   &lt;Score.PlaybackButtons doc={doc} /&gt;
+ *   // Create playback buttons with play and stop buttons.
+ *   <ScoreUI.PlaybackButtons doc={doc} playStop />
  *
- *   // Create playback buttons with custom play, pause and stop labels:
- *   &lt;Score.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" /&gt;
+ *   // Create playback buttons with play, pause and stop buttons.
+ *   <ScoreUI.PlaybackButtons doc={doc} playPauseStop />
  *
- *   // Create playback buttons with different button layout.
- *   &lt;Score.PlaybackButtons doc={doc} buttonLayout={Score.PlaybackButtonsLayout.PlayStopSingle} /&gt;
- * </pre>
+ *   // You can also set custom play, pause and stop button labels.
+ *   <ScoreUI.PlaybackButtons doc={doc} playLabel="⏵" pauseLabel="⏸" stopLabel="⏹" />
+ * ```
  */
 declare class PlaybackButtons extends React.Component<PlaybackButtonsProps, PlaybackButtonsState> {
     state: PlaybackButtonsState;

package/dist/react-ui/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v4.2.1 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.1.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -621,7 +621,7 @@ var MusicScoreView = class extends React3.Component {
         this.renderer.draw();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { style: { position: "relative" }, ref: setCanvas, children: "Canvas error!" });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("canvas", { style: { position: "relative" }, ref: setCanvas, children: "Your browser does not support the HTML canvas tag." });
   }
 };
 
@@ -649,37 +649,46 @@ var PlaybackButtons = class extends React4.Component {
     }
   }
   render() {
-    let { buttonLayout, playLabel, pauseLabel, stopLabel } = this.props;
+    let { buttonLayout, singlePlayStop, playStop, playPauseStop, playLabel, pauseLabel, stopLabel } = this.props;
     let { controller } = this.state;
-    buttonLayout = buttonLayout != null ? buttonLayout : 2 /* PlayPauseStop */;
-    playLabel = playLabel != null ? playLabel : "Play";
-    pauseLabel = pauseLabel != null ? pauseLabel : "Pause";
-    stopLabel = stopLabel != null ? stopLabel : "Stop";
-    if (buttonLayout === 0 /* PlayStopSingle */) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
-        if (btn) controller.setPlayStopButton(btn, playLabel, stopLabel);
-      } });
-    } else if (buttonLayout === 1 /* PlayStop */) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "btn-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setPlayButton(btn, playLabel);
-        } }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setStopButton(btn, stopLabel);
-        } })
-      ] });
-    } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "btn-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setPlayButton(btn, playLabel);
-        } }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setPauseButton(btn, pauseLabel);
-        } }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setStopButton(btn, stopLabel);
-        } })
-      ] });
+    playLabel != null ? playLabel : playLabel = "Play";
+    pauseLabel != null ? pauseLabel : pauseLabel = "Pause";
+    stopLabel != null ? stopLabel : stopLabel = "Stop";
+    if (singlePlayStop) buttonLayout = 0 /* PlayStopSingle */;
+    if (playStop) buttonLayout = 1 /* PlayStop */;
+    if (playPauseStop) buttonLayout = 2 /* PlayPauseStop */;
+    buttonLayout != null ? buttonLayout : buttonLayout = 2 /* PlayPauseStop */;
+    switch (buttonLayout) {
+      case 0 /* PlayStopSingle */:
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+          if (btn) controller.setPlayStopButton(btn, playLabel, stopLabel);
+        } });
+      case 1 /* PlayStop */:
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "btn-group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setPlayButton(btn, playLabel);
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setStopButton(btn, stopLabel);
+          } })
+        ] });
+      case 2 /* PlayPauseStop */:
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "btn-group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setPlayButton(btn, playLabel);
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setPauseButton(btn, pauseLabel);
+          } }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setStopButton(btn, stopLabel);
+          } })
+        ] });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          "Invalid button layout: ",
+          buttonLayout
+        ] });
     }
   }
 };

package/dist/react-ui/index.mjs

@@ -1,7 +1,7 @@
-/* WebMusicScore v4.2.1 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
+/* WebMusicScore v5.1.0 | (c) 2023 PahkaSoft | MIT License | Includes: Tone.js (MIT License) */
 import {
   __publicField
-} from "../chunk-64N22LCV.mjs";
+} from "../chunk-2EQHSQWO.mjs";
 
 // src/react-ui/circle-of-fifths.tsx
 import * as React from "react";
@@ -580,7 +580,7 @@ var MusicScoreView = class extends React3.Component {
         this.renderer.draw();
       }
     };
-    return /* @__PURE__ */ jsx3("canvas", { style: { position: "relative" }, ref: setCanvas, children: "Canvas error!" });
+    return /* @__PURE__ */ jsx3("canvas", { style: { position: "relative" }, ref: setCanvas, children: "Your browser does not support the HTML canvas tag." });
   }
 };
 
@@ -608,37 +608,46 @@ var PlaybackButtons = class extends React4.Component {
     }
   }
   render() {
-    let { buttonLayout, playLabel, pauseLabel, stopLabel } = this.props;
+    let { buttonLayout, singlePlayStop, playStop, playPauseStop, playLabel, pauseLabel, stopLabel } = this.props;
     let { controller } = this.state;
-    buttonLayout = buttonLayout != null ? buttonLayout : 2 /* PlayPauseStop */;
-    playLabel = playLabel != null ? playLabel : "Play";
-    pauseLabel = pauseLabel != null ? pauseLabel : "Pause";
-    stopLabel = stopLabel != null ? stopLabel : "Stop";
-    if (buttonLayout === 0 /* PlayStopSingle */) {
-      return /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
-        if (btn) controller.setPlayStopButton(btn, playLabel, stopLabel);
-      } });
-    } else if (buttonLayout === 1 /* PlayStop */) {
-      return /* @__PURE__ */ jsxs("div", { className: "btn-group", children: [
-        /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setPlayButton(btn, playLabel);
-        } }),
-        /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setStopButton(btn, stopLabel);
-        } })
-      ] });
-    } else {
-      return /* @__PURE__ */ jsxs("div", { className: "btn-group", children: [
-        /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setPlayButton(btn, playLabel);
-        } }),
-        /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setPauseButton(btn, pauseLabel);
-        } }),
-        /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
-          if (btn) controller.setStopButton(btn, stopLabel);
-        } })
-      ] });
+    playLabel != null ? playLabel : playLabel = "Play";
+    pauseLabel != null ? pauseLabel : pauseLabel = "Pause";
+    stopLabel != null ? stopLabel : stopLabel = "Stop";
+    if (singlePlayStop) buttonLayout = 0 /* PlayStopSingle */;
+    if (playStop) buttonLayout = 1 /* PlayStop */;
+    if (playPauseStop) buttonLayout = 2 /* PlayPauseStop */;
+    buttonLayout != null ? buttonLayout : buttonLayout = 2 /* PlayPauseStop */;
+    switch (buttonLayout) {
+      case 0 /* PlayStopSingle */:
+        return /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
+          if (btn) controller.setPlayStopButton(btn, playLabel, stopLabel);
+        } });
+      case 1 /* PlayStop */:
+        return /* @__PURE__ */ jsxs("div", { className: "btn-group", children: [
+          /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setPlayButton(btn, playLabel);
+          } }),
+          /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setStopButton(btn, stopLabel);
+          } })
+        ] });
+      case 2 /* PlayPauseStop */:
+        return /* @__PURE__ */ jsxs("div", { className: "btn-group", children: [
+          /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setPlayButton(btn, playLabel);
+          } }),
+          /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setPauseButton(btn, pauseLabel);
+          } }),
+          /* @__PURE__ */ jsx4("button", { className: "btn btn-primary", ref: (btn) => {
+            if (btn) controller.setStopButton(btn, stopLabel);
+          } })
+        ] });
+      default:
+        return /* @__PURE__ */ jsxs("div", { children: [
+          "Invalid button layout: ",
+          buttonLayout
+        ] });
     }
   }
 };

package/dist/score/index.d.mts

@@ -1,5 +1,5 @@
-import { N as NoteOptions, R as RestOptions, S as StaffPreset, a as ScoreConfiguration, M as MDocument, V as VoiceId, T as TupletOptions, b as VerseNumber, L as LyricsOptions, c as StaffTabOrGroups, F as Fermata, d as Navigation, A as AnnotationText, e as Annotation, f as Label, C as Connective, g as TieType, h as NoteAnchor, i as VerticalPosition } from '../music-objects-3Hxlkxy6.mjs';
-export { aa as Arpeggio, a2 as Clef, D as DivRect, ae as DynamicsAnnotation, ac as LyricsAlign, ad as LyricsHyphen, s as MAccidental, u as MArpeggio, H as MBarLineLeft, G as MBarLineRight, v as MBeamGroup, t as MConnective, x as MEnding, a1 as MExtensionLine, y as MFermata, z as MHeader, B as MImage, a0 as MLyrics, E as MMeasure, J as MNoteGroup, q as MPlaybackButtons, o as MPlayer, p as MRenderer, P as MRest, U as MRhythmColumn, W as MScoreRow, Z as MSignature, _ as MSpecialText, X as MStaff, w as MStaffBeamGroup, K as MStaffNoteGroup, Q as MStaffRest, I as MStaffTabBarLine, Y as MTab, O as MTabNoteGroup, $ as MText, r as MusicInterface, ag as PlayState, ah as PlayStateChangeListener, k as ScoreEvent, n as ScoreEventListener, j as ScoreEventType, m as ScoreObjectEvent, l as ScoreStaffPosEvent, a3 as StaffConfig, ab as StaffTabOrGroup, a9 as Stem, a6 as StringNumber, a4 as TabConfig, af as TempoAnnotation, a7 as getStringNumbers, a8 as getVerseNumbers, a5 as getVoiceIds } from '../music-objects-3Hxlkxy6.mjs';
+import { N as NoteOptions, R as RestOptions, S as StaffPreset, a as ScoreConfiguration, M as MDocument, V as VoiceId, T as TupletOptions, b as VerseNumber, L as LyricsOptions, c as StaffTabOrGroups, F as Fermata, d as Navigation, A as AnnotationText, e as Annotation, f as Label, C as Connective, g as TieType, h as NoteAnchor, i as VerticalPosition } from '../music-objects-DTDFSro0.mjs';
+export { ad as Arpeggio, a5 as BaseConfig, a4 as Clef, D as DivRect, ah as DynamicsAnnotation, af as LyricsAlign, ag as LyricsHyphen, s as MAccidental, u as MArpeggio, H as MBarLineLeft, G as MBarLineRight, v as MBeamGroup, t as MConnective, x as MEnding, a3 as MExtensionLine, y as MFermata, z as MHeader, B as MImage, a2 as MLyrics, E as MMeasure, J as MNoteGroup, q as MPlaybackButtons, o as MPlayer, p as MRenderer, P as MRest, U as MRhythmColumn, W as MScoreRow, a0 as MSpecialText, X as MStaff, w as MStaffBeamGroup, K as MStaffNoteGroup, Q as MStaffRest, Z as MStaffSignature, I as MStaffTabBarLine, Y as MTab, O as MTabNoteGroup, $ as MTabRhythm, _ as MTabSignature, a1 as MText, r as MusicInterface, aj as PlayState, ak as PlayStateChangeListener, k as ScoreEvent, n as ScoreEventListener, j as ScoreEventType, m as ScoreObjectEvent, l as ScoreStaffPosEvent, a6 as StaffConfig, ae as StaffTabOrGroup, ac as Stem, a9 as StringNumber, a7 as TabConfig, ai as TempoAnnotation, aa as getStringNumbers, ab as getVerseNumbers, a8 as getVoiceIds } from '../music-objects-DTDFSro0.mjs';
 import { N as Note } from '../note-eA2xPPiG.mjs';
 import { S as ScaleType, c as Scale } from '../scale-DQP3b9Zx.mjs';
 import { N as NoteLength, i as NoteLengthStr, K as KeySignature, b as TimeSignature, T as TimeSignatures, B as BeamGrouping, k as TupletRatio } from '../tempo-dkctPkCS.mjs';
@@ -59,7 +59,7 @@ type ExtensionBuilder = {
 };
 /**
  * Document builder class.
- * <pre>
+ * ```ts
  * // Example
  * let doc = new Score.DocumentBuilder()
  *     .addScoreConfiguration({ type: "staff", clef: "G", isOctavewDown: true })
@@ -70,7 +70,7 @@ type ExtensionBuilder = {
  *     .addRest(1, "4n")
  *     // etc.
  *     .getDEocument();
- * </pre>
+ * ```
  */
 declare class DocumentBuilder {
     private readonly doc;
@@ -208,13 +208,13 @@ declare class DocumentBuilder {
     addRest(voiceId: VoiceId, restLength: NoteLength | NoteLengthStr, restOptions?: RestOptions): DocumentBuilder;
     /**
      * Usage:
-     * <pre>
+     * ```ts
      * addTuplet(0, Theory.Tuplet.Triplet, notes => {
      *     notes.addNote("G3", Theory.NoteLength.Eighth);
      *     notes.addNote("B3", Theory.NoteLength.Eighth);
      *     notes.addNote("D4", Theory.NoteLength.Eighth);
      * });
-     * </pre>
+     * ```
      *
      * @param voiceId - Voice id to add tuplet to.
      * @param tupletRatio - You can also use Theory.Tuplet presets (e.g. Theory.Tuplet.Triplet).
@@ -371,13 +371,13 @@ declare class DocumentBuilder {
     addConnective(connective: Connective.Slide | `${Connective.Slide}`, notAnchor?: NoteAnchor | `${NoteAnchor}`): DocumentBuilder;
     /**
      * Add extension line to previously added annotation or label element.
-     * <pre>
+     * ```ts
      *     // Example
      *     addExtension(ext => ext.notes("1n", 2))          // length is 2 whole notes
      *     addExtension(ext => ext.measures(3).hide())      // length is 3 measures, hidden
      *     addExtension(ext => ext.measures(1).notes("8n")) // length is 1 measure + 1 eigth note
      *     addExtension(ext => ext.infinity())              // length is as long as possible
-     * </pre>
+     * ```
      * @param extensionBuilder - Extension builder function used to build exstension.
      * @returns - This document builder instance.
      */