web-music-score 6.0.0-pre.1 → 6.0.0-pre.3

package/dist/pieces/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/pieces/index.mjs

@@ -1,5 +1,5 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
-import "../chunk-A7C2G7OG.mjs";
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+import "../chunk-QJ3X3GQ6.mjs";
 
 // src/pieces/andante-diabelli.ts
 import { DocumentBuilder } from "web-music-score/score";

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

@@ -78,6 +78,8 @@ interface PlaybackButtonsState {
  */
 declare class PlaybackButtons extends React.Component<PlaybackButtonsProps, PlaybackButtonsState> {
     state: PlaybackButtonsState;
+    private buttonClass;
+    private buttonGroupClass;
     constructor(props: PlaybackButtonsProps);
     componentDidUpdate(prevProps: Readonly<PlaybackButtonsProps>): void;
     render(): react_jsx_runtime.JSX.Element;

package/dist/react-ui/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -73,13 +73,43 @@ var MusicScoreView = class extends React.Component {
 var React2 = __toESM(require("react"));
 var import_score2 = require("web-music-score/score");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+function detectStyleSystem() {
+  if (typeof window === "undefined") return "unknown";
+  const test = document.createElement("button");
+  test.className = "btn btn-primary";
+  document.body.appendChild(test);
+  const style = getComputedStyle(test);
+  const padding = style.padding;
+  document.body.removeChild(test);
+  const isBootstrap = padding.includes("6px") && padding.includes("12px");
+  if (isBootstrap) return "bootstrap";
+  const root = getComputedStyle(document.documentElement);
+  const primary = root.getPropertyValue("--ifm-color-primary").trim();
+  if (primary !== "") return "infima";
+  return "unknown";
+}
 var PlaybackButtons = class extends React2.Component {
   constructor(props) {
     super(props);
     __publicField(this, "state");
+    __publicField(this, "buttonClass");
+    __publicField(this, "buttonGroupClass");
     this.state = {
       controller: new import_score2.MPlaybackButtons().setDocument(props.doc)
     };
+    switch (detectStyleSystem()) {
+      case "bootstrap":
+        this.buttonClass = "btn btn-primary";
+        this.buttonGroupClass = "btn-group";
+        break;
+      case "infima":
+        this.buttonClass = "button button--primary";
+        this.buttonGroupClass = "ifm-button-group";
+        break;
+      default:
+        this.buttonClass = "wms-button";
+        this.buttonGroupClass = "wms-button-group";
+    }
   }
   componentDidUpdate(prevProps) {
     if (this.props.doc !== prevProps.doc) {
@@ -87,33 +117,34 @@ var PlaybackButtons = class extends React2.Component {
     }
   }
   render() {
-    let { singlePlayStop, playStop, playPauseStop, playLabel, pauseLabel, stopLabel } = this.props;
+    let { singlePlayStop, playStop, playLabel, pauseLabel, stopLabel } = this.props;
     let { controller } = this.state;
+    const { buttonClass, buttonGroupClass } = this;
     playLabel != null ? playLabel : playLabel = "Play";
     pauseLabel != null ? pauseLabel : pauseLabel = "Pause";
     stopLabel != null ? stopLabel : stopLabel = "Stop";
     if (singlePlayStop) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: buttonClass, ref: (btn) => {
         if (btn) controller.setPlayStopButton(btn, playLabel, stopLabel);
       } });
     } else if (playStop) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "btn-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: buttonGroupClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setPlayButton(btn, playLabel);
         } }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setStopButton(btn, stopLabel);
         } })
       ] });
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "btn-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: buttonGroupClass, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setPlayButton(btn, playLabel);
         } }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setPauseButton(btn, pauseLabel);
         } }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: "btn btn-primary", ref: (btn) => {
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setStopButton(btn, stopLabel);
         } })
       ] });

package/dist/react-ui/index.mjs

@@ -1,7 +1,7 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 import {
   __publicField
-} from "../chunk-A7C2G7OG.mjs";
+} from "../chunk-QJ3X3GQ6.mjs";
 
 // src/react-ui/music-score-view.tsx
 import * as React from "react";
@@ -38,13 +38,43 @@ var MusicScoreView = class extends React.Component {
 import * as React2 from "react";
 import { MPlaybackButtons } from "web-music-score/score";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function detectStyleSystem() {
+  if (typeof window === "undefined") return "unknown";
+  const test = document.createElement("button");
+  test.className = "btn btn-primary";
+  document.body.appendChild(test);
+  const style = getComputedStyle(test);
+  const padding = style.padding;
+  document.body.removeChild(test);
+  const isBootstrap = padding.includes("6px") && padding.includes("12px");
+  if (isBootstrap) return "bootstrap";
+  const root = getComputedStyle(document.documentElement);
+  const primary = root.getPropertyValue("--ifm-color-primary").trim();
+  if (primary !== "") return "infima";
+  return "unknown";
+}
 var PlaybackButtons = class extends React2.Component {
   constructor(props) {
     super(props);
     __publicField(this, "state");
+    __publicField(this, "buttonClass");
+    __publicField(this, "buttonGroupClass");
     this.state = {
       controller: new MPlaybackButtons().setDocument(props.doc)
     };
+    switch (detectStyleSystem()) {
+      case "bootstrap":
+        this.buttonClass = "btn btn-primary";
+        this.buttonGroupClass = "btn-group";
+        break;
+      case "infima":
+        this.buttonClass = "button button--primary";
+        this.buttonGroupClass = "ifm-button-group";
+        break;
+      default:
+        this.buttonClass = "wms-button";
+        this.buttonGroupClass = "wms-button-group";
+    }
   }
   componentDidUpdate(prevProps) {
     if (this.props.doc !== prevProps.doc) {
@@ -52,33 +82,34 @@ var PlaybackButtons = class extends React2.Component {
     }
   }
   render() {
-    let { singlePlayStop, playStop, playPauseStop, playLabel, pauseLabel, stopLabel } = this.props;
+    let { singlePlayStop, playStop, playLabel, pauseLabel, stopLabel } = this.props;
     let { controller } = this.state;
+    const { buttonClass, buttonGroupClass } = this;
     playLabel != null ? playLabel : playLabel = "Play";
     pauseLabel != null ? pauseLabel : pauseLabel = "Pause";
     stopLabel != null ? stopLabel : stopLabel = "Stop";
     if (singlePlayStop) {
-      return /* @__PURE__ */ jsx2("button", { className: "btn btn-primary", ref: (btn) => {
+      return /* @__PURE__ */ jsx2("button", { className: buttonClass, ref: (btn) => {
         if (btn) controller.setPlayStopButton(btn, playLabel, stopLabel);
       } });
     } else if (playStop) {
-      return /* @__PURE__ */ jsxs("div", { className: "btn-group", children: [
-        /* @__PURE__ */ jsx2("button", { className: "btn btn-primary", ref: (btn) => {
+      return /* @__PURE__ */ jsxs("div", { className: buttonGroupClass, children: [
+        /* @__PURE__ */ jsx2("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setPlayButton(btn, playLabel);
         } }),
-        /* @__PURE__ */ jsx2("button", { className: "btn btn-primary", ref: (btn) => {
+        /* @__PURE__ */ jsx2("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setStopButton(btn, stopLabel);
         } })
       ] });
     } else {
-      return /* @__PURE__ */ jsxs("div", { className: "btn-group", children: [
-        /* @__PURE__ */ jsx2("button", { className: "btn btn-primary", ref: (btn) => {
+      return /* @__PURE__ */ jsxs("div", { className: buttonGroupClass, children: [
+        /* @__PURE__ */ jsx2("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setPlayButton(btn, playLabel);
         } }),
-        /* @__PURE__ */ jsx2("button", { className: "btn btn-primary", ref: (btn) => {
+        /* @__PURE__ */ jsx2("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setPauseButton(btn, pauseLabel);
         } }),
-        /* @__PURE__ */ jsx2("button", { className: "btn btn-primary", ref: (btn) => {
+        /* @__PURE__ */ jsx2("button", { className: buttonClass, ref: (btn) => {
           if (btn) controller.setStopButton(btn, stopLabel);
         } })
       ] });

package/dist/score/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -10513,7 +10513,7 @@ var ObjMeasure = class extends MusicObject {
     this.regions.padding_3 = padding;
     this.regions.columnsMin_4 = Math.max(
       DocumentSettings.MinColumnsWidth * unitSize,
-      this.columns.map((col) => col.getRect().width).reduce((acc, cur) => acc + cur)
+      this.columns.map((col) => col.getRect().width).reduce((acc, cur) => acc + cur, 0)
     );
     this.regions.padding_5 = padding;
     this.regions.rightBarLine_6 = this.barLineRight.getRect().width;
@@ -12125,6 +12125,7 @@ var _DocumentBuilder = class _DocumentBuilder {
    * @returns - Music document.
    */
   getDocument() {
+    this.getMeasure();
     return this.doc.getMusicInterface();
   }
   /**

package/dist/score/index.mjs

@@ -1,12 +1,12 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 import {
   MusicError
-} from "../chunk-PW2SO6EZ.mjs";
+} from "../chunk-SCF6ZZFQ.mjs";
 import {
   NoteLengthProps,
   RhythmProps,
   validateNoteLength
-} from "../chunk-GNT3ECDB.mjs";
+} from "../chunk-TM46RT77.mjs";
 import {
   AnchoredRect,
   BiMap,
@@ -20,12 +20,12 @@ import {
   device_exports,
   guard_exports,
   utils_exports
-} from "../chunk-X7BMJX7E.mjs";
+} from "../chunk-S5PIZUF6.mjs";
 import {
   __publicField,
   __spreadProps,
   __spreadValues
-} from "../chunk-A7C2G7OG.mjs";
+} from "../chunk-QJ3X3GQ6.mjs";
 
 // src/score/engine/settings.ts
 var DebugSettings = {
@@ -6651,7 +6651,7 @@ var ObjMeasure = class extends MusicObject {
     this.regions.padding_3 = padding;
     this.regions.columnsMin_4 = Math.max(
       DocumentSettings.MinColumnsWidth * unitSize,
-      this.columns.map((col) => col.getRect().width).reduce((acc, cur) => acc + cur)
+      this.columns.map((col) => col.getRect().width).reduce((acc, cur) => acc + cur, 0)
     );
     this.regions.padding_5 = padding;
     this.regions.rightBarLine_6 = this.barLineRight.getRect().width;
@@ -8263,6 +8263,7 @@ var _DocumentBuilder = class _DocumentBuilder {
    * @returns - Music document.
    */
   getDocument() {
+    this.getMeasure();
     return this.doc.getMusicInterface();
   }
   /**

package/dist/theory/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/theory/index.mjs

@@ -1,4 +1,4 @@
-/* WebMusicScore v6.0.0-pre.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.0.0-pre.3 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 import {
   NoteLength,
   NoteLengthProps,
@@ -8,7 +8,7 @@ import {
   isTupletRatio,
   validateNoteLength,
   validateTupletRatio
-} from "../chunk-GNT3ECDB.mjs";
+} from "../chunk-TM46RT77.mjs";
 import {
   IndexArray,
   LRUCache,
@@ -16,10 +16,10 @@ import {
   UniMap,
   guard_exports,
   utils_exports
-} from "../chunk-X7BMJX7E.mjs";
+} from "../chunk-S5PIZUF6.mjs";
 import {
   __publicField
-} from "../chunk-A7C2G7OG.mjs";
+} from "../chunk-QJ3X3GQ6.mjs";
 
 // src/theory/types.ts
 import { MusicError, MusicErrorType } from "web-music-score/core";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "web-music-score",
-    "version": "6.0.0-pre.1",
+    "version": "6.0.0-pre.3",
     "author": "Stefan Brockmann",
     "license": "MIT",
     "private": false,
@@ -95,7 +95,8 @@
             }
         }
     },
-    "unpkg": "./dist/iife/index.global.js",
+    "unpkg": "./dist/iife/index.js",
+    "jsdelivr": "./dist/iife/index.js",
     "files": [
         "CHANGELOG.md",
         "LICENSE",