web-music-score 6.0.1 → 6.2.0

package/CHANGELOG.md

@@ -1,4 +1,28 @@
 # Changelog
+## [6.2.0] - 2026-01-12
+### Added
+- `Core.getLibVersion()`
+- `Core.getLibInfo()`
+
+### Changed
+- Do not export `package.json`
+
+## [6.1.0] - 2026-01-10
+### Added
+- Custom HTML elements <wms-view> and <wms-controls>.
+- Document can be undefined in RenderContext/MusicScoreView.
+
+### Renamed And Deprecated
+ - Score.MRenderContext (deprecated)    => Score.WmsView
+ - Score.MPlaybackButtons (deprecated)  => Score.WmsControls
+ - Score.MPlayer (deprecated)           => Score.PLayer
+ - Score.MRenderContext (deprecated)    => Score.WmsView
+ - ReactUI.MusicScoreView (deprecated)  => ReactUI.WmsView
+ - ReactUI.PlaybackButtons (deprecated) => ReactUI.WmsControls
+
+### Fixed
+- Fermata position.
+
 ## [6.0.1] - 2025-12-31
 ### Fixed
 - Set rest position in tuplets if rest does not have its own staffPos.

package/README.md

@@ -5,32 +5,65 @@ Web Music Score is a TypeScript/JavaScript music notation web component and play
 
 ## Install
 ```bash
-npm i web-music-score
+npm install web-music-score
 ```
 
 ## Quick Example
-```ts
-import * as Score from "web-music-score/score";
 
+Here are simple snippets to give an overview about usage of this lib.
+
+### Create Document
+
+```ts
 const doc = new Score.DocumentBuilder()
-    .setScoreConfiguration("guitarTreble")
-    .addMeasure()
+    .setScoreConfiguration("treble")
     .setKeySignature("C Major")
     .setTimeSignature("3/4")
-    .addNote(0, "C4", "4n")
-    .addNote(0, "E4", "4n")
-    .addNote(0, "G4", "4n")
-    .endSong()
+    .addNote(0, ["C4", "E4", "G4"], "4n")
+    .addMeasure()
+    .addChord(0, ["C4", "E4", "G4"], "2.", { arpeggio: true })
     .getDocument();
+```
+
+### Render With JSX/TSX And React 
+
+```ts
+import * as Score from "web-music-score/score";
+import * as ReactUI from "web-music-score/react-ui";
+
+function render() {
+    return <ReactUI.WmsView doc={doc} />;
+}
+```
+
+### Render With Custom HTML Element
+
+```html
+<script src="https://unpkg.com/web-music-score@6.2.0/dist/iife/index.js"></script>
+
+<wms-view id="view1"></wms-view>
+
+<script>
+    const { Score } = window.WebMusicScore;
+
+    doc.bindElement("view1");
+</script>
+```
+### Render With Plain JavaScript
+
+```html
+<script src="https://unpkg.com/web-music-score@6.2.0/dist/iife/index.js"></script>
+
+<canvas id="canvas1"></canvas><br />
 
-new Score.MRenderContext().
-    setCanvas("scoreCanvasId").
-    setDocument(doc).
-    draw();
+<script>
+    const { Score } = window.WebMusicScore;
 
-new Score.MPlaybackButtons().
-    setPlayStopButton("playButtonId").
-    setDocument(doc);
+    new Score.WmsView()
+        .setCanvas("canvas1")
+        .setDocument(doc)
+        .draw();
+</script>
 ```
 
 ## Report a Bug

package/dist/audio/index.js

@@ -1,9 +1,13 @@
-/* WebMusicScore v6.0.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.2.0 | (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;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,6 +21,38 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
+var __await = function(promise, isYieldStar) {
+  this[0] = promise;
+  this[1] = isYieldStar;
+};
+var __yieldStar = (value) => {
+  var obj = value[__knownSymbol("asyncIterator")], isAwait = false, method, it = {};
+  if (obj == null) {
+    obj = value[__knownSymbol("iterator")]();
+    method = (k) => it[k] = (x) => obj[k](x);
+  } else {
+    obj = obj.call(value);
+    method = (k) => it[k] = (v) => {
+      if (isAwait) {
+        isAwait = false;
+        if (k === "throw") throw v;
+        return v;
+      }
+      isAwait = true;
+      return {
+        done: false,
+        value: new __await(new Promise((resolve) => {
+          var x = obj[k](v);
+          if (!(x instanceof Object)) __typeError("Object expected");
+          resolve(x);
+        }), 1)
+      };
+    };
+  }
+  return it[__knownSymbol("iterator")] = () => it, method("next"), "throw" in obj ? method("throw") : it.throw = (x) => {
+    throw x;
+  }, "return" in obj && method("return"), it;
+};
 
 // src/audio/index.ts
 var audio_exports = {};
@@ -44,10 +80,12 @@ function linearToDecibels(linearVolume) {
 
 // node_modules/@tspro/ts-utils-lib/dist/index.mjs
 var __defProp2 = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export2 = (target, all) => {
   for (var name in all)
     __defProp2(target, name, { get: all[name], enumerable: true });
 };
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var assert_exports = {};
 __export2(assert_exports, {
   assert: () => assert,
@@ -1238,26 +1276,39 @@ function eraseAll() {
 var device_exports = {};
 __export2(device_exports, {
   DPI: () => DPI,
+  DevicePixelRatio: () => DevicePixelRatio,
   FontSize: () => FontSize,
   HostAddress: () => HostAddress,
   IsMobileDevice: () => IsMobileDevice,
   IsTouchDevice: () => IsTouchDevice,
-  PxPerMm: () => PxPerMm,
   ScrollbarWidth: () => ScrollbarWidth,
-  mmToPx: () => mmToPx,
-  pxToMm: () => pxToMm,
-  toPx: () => toPx
+  pxToUnit: () => pxToUnit,
+  pxToUnitStr: () => pxToUnitStr,
+  unitToPx: () => unitToPx
 });
-function getDPI() {
+var CSS_UNIT_RE = /^\s*([+-]?\d*\.?\d+)\s*(px|cm|mm|in|pt|pc|em|rem|vw|vh|vmin|vmax|%)?\s*$/;
+function parseCssUnit(input) {
+  var _a;
+  const m = CSS_UNIT_RE.exec(input);
+  if (!m) return void 0;
+  return {
+    value: Number(m[1]),
+    unit: (_a = m[2]) != null ? _a : void 0
+  };
+}
+function getDevicePixelRatio() {
+  return typeof window === "undefined" ? 1 : window.devicePixelRatio;
+}
+function getPxPerUnit(unit, _default) {
   try {
     let el = document.createElement("div");
-    el.style.width = "1in";
+    el.style.width = "1" + unit;
     document.body.appendChild(el);
     let dpi = el.offsetWidth;
     el.remove();
-    return dpi || 96;
+    return dpi || _default;
   } catch (e) {
-    return 96;
+    return _default;
   }
 }
 function getScrollBarWidth() {
@@ -1315,55 +1366,60 @@ function getHostAddress() {
   }
   return `${location.protocol}//${location.host}`;
 }
-var UnitRegExp = /^(mm|cm|in|inch|px|em)$/;
-var ValueUnitRegExp = /^([0-9\\.]+)(.*)$/;
-var DPI = getDPI();
-var PxPerMm = DPI / 25.4;
 var ScrollbarWidth = getScrollBarWidth();
 var FontSize = getSystemFontSize();
 var IsTouchDevice = getIsTouchDevice();
 var IsMobileDevice = getIsMobileDevice();
 var HostAddress = getHostAddress();
-function pxToMm(px) {
-  return px / PxPerMm;
-}
-function mmToPx(mm) {
-  return mm * PxPerMm;
-}
-function toPx(input) {
-  if (typeof input === "number") {
-    return input;
-  }
-  let value = NaN;
-  let unit = void 0;
-  let match = input.toString().match(ValueUnitRegExp);
-  if (match && match[1]) {
-    value = parseFloat(match[1]);
-    let unitStr = match[2] ? match[2].toLowerCase() : "undefined";
-    let unitStrOk = UnitRegExp.test(unitStr);
-    unit = unitStrOk ? unitStr : void 0;
-    if (!unit) {
-      console.log("Unknown unit '" + unitStr + "' => using 'px'.");
-    }
-  } else {
-    value = parseFloat(input);
-  }
-  assert_exports.isFinite(value, "value in function toPx");
+var DevicePixelRatio = getDevicePixelRatio();
+var DPI = getPxPerUnit("in", 96);
+var PxPerIn = getPxPerUnit("in", 96);
+var PxPerMm = getPxPerUnit("mm", 96 / 25.4);
+var PxPerCm = getPxPerUnit("cm", 96 / 25.4 * 10);
+var PxPerEm = getPxPerUnit("em", FontSize);
+function unitToPx(valueUnit) {
+  if (typeof valueUnit === "number")
+    return valueUnit;
+  const p = parseCssUnit(valueUnit);
+  const value = p == null ? void 0 : p.value;
+  const unit = p == null ? void 0 : p.unit;
+  if (!guard_exports.isFinite(value))
+    assert_exports.fail(`Invalid value: ${value}`);
   switch (unit) {
     case "mm":
-      return mmToPx(value);
+      return value * PxPerMm;
     case "cm":
-      return mmToPx(value) * 10;
+      return value * PxPerCm;
     case "in":
-    case "inch":
-      return mmToPx(value) * 25.4;
+      return value * PxPerIn;
     case "em":
-      return FontSize * value;
-    default:
+      return value * PxPerEm;
     case "px":
+    case void 0:
       return value;
+    default:
+      assert_exports.fail(`Unsupported CssUnit: ${unit}`);
+  }
+}
+function pxToUnit(px, unit) {
+  switch (unit) {
+    case "mm":
+      return px / PxPerMm;
+    case "cm":
+      return px / PxPerCm;
+    case "em":
+      return px / PxPerEm;
+    case "in":
+      return px / PxPerIn;
+    case "px":
+      return px;
+    default:
+      assert_exports.fail(`Unsupported CssUnit: ${unit}`);
   }
 }
+function pxToUnitStr(px, unit) {
+  return `${pxToUnit(px, unit)}${unit}`;
+}
 var utils_exports = {};
 __export2(utils_exports, {
   Arr: () => arr_exports,
@@ -1473,8 +1529,8 @@ function _getElemById(id) {
   var _a;
   return typeof document === "undefined" ? void 0 : (_a = document.getElementById(id)) != null ? _a : void 0;
 }
-function toPx2(value) {
-  return value === void 0 ? void 0 : device_exports.toPx(value);
+function toPx(value) {
+  return value === void 0 ? void 0 : device_exports.unitToPx(value);
 }
 function hasClass(el, className) {
   if (className.length === 0) {
@@ -1571,38 +1627,38 @@ function getPadding(style) {
   if (!style) {
     return { top: 0, right: 0, bottom: 0, left: 0 };
   }
-  let top = toPx2(style.paddingTop);
-  let right = toPx2(style.paddingRight);
-  let bottom = toPx2(style.paddingBottom);
-  let left = toPx2(style.paddingLeft);
+  let top = toPx(style.paddingTop);
+  let right = toPx(style.paddingRight);
+  let bottom = toPx(style.paddingBottom);
+  let left = toPx(style.paddingLeft);
   let padding = ((_a = style.padding) != null ? _a : "").toString().split(" ").filter((s) => s.length > 0);
   switch (padding.length) {
     case 0:
       break;
     case 1:
-      top != null ? top : top = toPx2(padding[0]);
-      right != null ? right : right = toPx2(padding[0]);
-      bottom != null ? bottom : bottom = toPx2(padding[0]);
-      left != null ? left : left = toPx2(padding[0]);
+      top != null ? top : top = toPx(padding[0]);
+      right != null ? right : right = toPx(padding[0]);
+      bottom != null ? bottom : bottom = toPx(padding[0]);
+      left != null ? left : left = toPx(padding[0]);
       break;
     case 2:
-      top != null ? top : top = toPx2(padding[0]);
-      right != null ? right : right = toPx2(padding[1]);
-      bottom != null ? bottom : bottom = toPx2(padding[0]);
-      left != null ? left : left = toPx2(padding[1]);
+      top != null ? top : top = toPx(padding[0]);
+      right != null ? right : right = toPx(padding[1]);
+      bottom != null ? bottom : bottom = toPx(padding[0]);
+      left != null ? left : left = toPx(padding[1]);
       break;
     case 3:
-      top != null ? top : top = toPx2(padding[0]);
-      right != null ? right : right = toPx2(padding[1]);
-      bottom != null ? bottom : bottom = toPx2(padding[2]);
-      left != null ? left : left = toPx2(padding[1]);
+      top != null ? top : top = toPx(padding[0]);
+      right != null ? right : right = toPx(padding[1]);
+      bottom != null ? bottom : bottom = toPx(padding[2]);
+      left != null ? left : left = toPx(padding[1]);
       break;
     case 4:
     default:
-      top != null ? top : top = toPx2(padding[0]);
-      right != null ? right : right = toPx2(padding[1]);
-      bottom != null ? bottom : bottom = toPx2(padding[2]);
-      left != null ? left : left = toPx2(padding[3]);
+      top != null ? top : top = toPx(padding[0]);
+      right != null ? right : right = toPx(padding[1]);
+      bottom != null ? bottom : bottom = toPx(padding[2]);
+      left != null ? left : left = toPx(padding[3]);
       break;
   }
   top != null ? top : top = 0;
@@ -1612,12 +1668,12 @@ function getPadding(style) {
   return { top, right, bottom, left };
 }
 function getDimension(style) {
-  let left = toPx2(style == null ? void 0 : style.left);
-  let right = toPx2(style == null ? void 0 : style.right);
-  let top = toPx2(style == null ? void 0 : style.top);
-  let bottom = toPx2(style == null ? void 0 : style.bottom);
-  let width = toPx2(style == null ? void 0 : style.width);
-  let height = toPx2(style == null ? void 0 : style.height);
+  let left = toPx(style == null ? void 0 : style.left);
+  let right = toPx(style == null ? void 0 : style.right);
+  let top = toPx(style == null ? void 0 : style.top);
+  let bottom = toPx(style == null ? void 0 : style.bottom);
+  let width = toPx(style == null ? void 0 : style.width);
+  let height = toPx(style == null ? void 0 : style.height);
   if (width === void 0 && left !== void 0 && right !== void 0) {
     width = right - left;
   }
@@ -1776,6 +1832,223 @@ function avg(...values) {
 function cmp(a, b) {
   return a < b ? -1 : a > b ? 1 : 0;
 }
+var DefaultEqualityFn = (a, b) => a === b;
+var BaseContainer = class {
+};
+var UniMap = class _UniMap extends BaseContainer {
+  constructor(...args) {
+    super();
+    __publicField(this, "map");
+    __publicField(this, "keyEquals");
+    const maybeEquals = args.at(-1);
+    this.keyEquals = isFunction(maybeEquals) ? args.pop() : DefaultEqualityFn;
+    const entries = args[0];
+    this.map = new Map(entries);
+  }
+  static createDeep(arg) {
+    return arg ? new _UniMap(arg, isDeepEqual) : new _UniMap(isDeepEqual);
+  }
+  has(key) {
+    if (this.keyEquals === DefaultEqualityFn || this.map.has(key))
+      return this.map.has(key);
+    for (const [k, v] of this.map)
+      if (this.keyEquals(k, key))
+        return true;
+    return false;
+  }
+  set(key, value) {
+    if (this.keyEquals === DefaultEqualityFn || this.map.has(key)) {
+      this.map.set(key, value);
+      return value;
+    }
+    for (const key2 of this.map.keys())
+      if (this.keyEquals(key2, key)) {
+        this.map.set(key2, value);
+        return value;
+      }
+    this.map.set(key, value);
+    return value;
+  }
+  get(key) {
+    if (this.keyEquals === DefaultEqualityFn || this.map.has(key))
+      return this.map.get(key);
+    for (const [k, v] of this.map)
+      if (this.keyEquals(k, key))
+        return v;
+    return void 0;
+  }
+  delete(key) {
+    if (this.keyEquals === DefaultEqualityFn || this.map.has(key))
+      return this.map.delete(key);
+    for (const k of this.map.keys())
+      if (this.keyEquals(k, key))
+        return this.map.delete(k);
+    return this.map.delete(key);
+  }
+  getOrDefault(key, defaultValue) {
+    var _a;
+    return (_a = this.get(key)) != null ? _a : defaultValue;
+  }
+  getOrCreate(key, creatorOrValue) {
+    if (!this.has(key)) {
+      const value = isFunction(creatorOrValue) ? creatorOrValue() : creatorOrValue;
+      return this.set(key, value);
+    }
+    return this.get(key);
+  }
+  clear() {
+    this.map.clear();
+  }
+  get size() {
+    return this.map.size;
+  }
+  isEmpty() {
+    return this.size === 0;
+  }
+  forEach(callbackfn, thisArg) {
+    this.map.forEach((value, key) => callbackfn.call(thisArg, value, key, this));
+  }
+  *keys() {
+    yield* __yieldStar(this.map.keys());
+  }
+  *values() {
+    yield* __yieldStar(this.map.values());
+  }
+  *entries() {
+    for (const [key, value] of this.map)
+      yield [key, value];
+  }
+  keysArray() {
+    return [...this.keys()];
+  }
+  valuesArray() {
+    return [...this.values()];
+  }
+  entriesArray() {
+    return [...this.entries()];
+  }
+  *kvKeys() {
+    for (const key of this.keys()) {
+      yield [key];
+    }
+  }
+  *kvValues() {
+    for (const el of this.values()) {
+      yield el;
+    }
+  }
+  *kvEntries() {
+    for (const [key, el] of this.entries()) {
+      yield [[key], el];
+    }
+  }
+  *[Symbol.iterator]() {
+    yield* __yieldStar(this.entries());
+  }
+  clone() {
+    return new _UniMap(this, this.keyEquals);
+  }
+  merge(other, conflictResolver) {
+    for (const [key, value] of other.entries()) {
+      if (this.has(key) && conflictResolver) {
+        this.set(key, conflictResolver(this.get(key), value, key));
+      } else {
+        this.set(key, value);
+      }
+    }
+    return this;
+  }
+  some(fn) {
+    for (const [key, value] of this.map) {
+      if (fn(value, key)) return true;
+    }
+    return false;
+  }
+  every(fn) {
+    for (const [key, value] of this.map) {
+      if (!fn(value, key)) return false;
+    }
+    return true;
+  }
+  filter(predicate) {
+    const result = new this.constructor();
+    for (const [key, value] of this.map) {
+      if (predicate(value, key, this)) result.set(key, value);
+    }
+    return result;
+  }
+  reduce(fn, init) {
+    let iterator = this.entries();
+    let first = iterator.next();
+    if (first.done) {
+      if (arguments.length < 2) {
+        throw new TypeError("Reduce of empty UniMap with no initial value!");
+      }
+      return init;
+    }
+    let acc;
+    let start;
+    if (arguments.length < 2) {
+      acc = first.value[1];
+      start = iterator.next();
+    } else {
+      acc = init;
+      start = first;
+    }
+    for (let current = start; !current.done; current = iterator.next()) {
+      const [key, value] = current.value;
+      acc = fn(acc, value, key);
+    }
+    return acc;
+  }
+  mapEntries(fn) {
+    let result = [];
+    for (const [key, value] of this.map) {
+      result.push(fn(value, key));
+    }
+    return result;
+  }
+  mapValues(fn) {
+    let result = new _UniMap();
+    for (const [key, value] of this.map) {
+      result.set(key, fn(value, key));
+    }
+    return result;
+  }
+  toMap() {
+    return new Map(this.map);
+  }
+  toString() {
+    const entries = [...this.map].map(([k, v]) => `${stringify(k)} => ${stringify(v)}`).join(", ");
+    return entries.length === 0 ? `Map(${this.size}){ }` : `Map(${this.size}){ ${entries} }`;
+  }
+};
+var _CallTracker = class _CallTracker2 {
+  constructor() {
+    __publicField(this, "counts", new UniMap((a, b) => a === b));
+  }
+  track(value) {
+    const count = this.counts.getOrCreate(value, 0);
+    this.counts.set(value, count + 1);
+  }
+  getCallCountFor(value) {
+    var _a;
+    return (_a = this.counts.get(value)) != null ? _a : 0;
+  }
+  hasBeenCalledWith(value) {
+    return this.getCallCountFor(value) > 0;
+  }
+  static track(value) {
+    this._default.track(value);
+  }
+  static getCallCountFor(value) {
+    return this._default.getCallCountFor(value);
+  }
+  static hasBeenCalledWith(value) {
+    return this._default.hasBeenCalledWith(value);
+  }
+};
+__publicField(_CallTracker, "_default", new _CallTracker());
 
 // src/audio/index.ts
 (0, import_core.init)();
@@ -1860,7 +2133,7 @@ function isMuted() {
 
 @tspro/ts-utils-lib/dist/index.mjs:
   (*!
-   * TsUtilsLib v2.3.0 (esm)
+   * TsUtilsLib v3.1.1 (esm)
    * (c) 2023-2025 PahkaSoft
    * Licensed under the MIT License
    *)

package/dist/audio/index.mjs

@@ -1,12 +1,12 @@
-/* WebMusicScore v6.0.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.2.0 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
 import {
   linearToDecibels
-} from "../chunk-IW4YD7XE.mjs";
+} from "../chunk-V5OCPI6U.mjs";
 import {
   guard_exports,
   utils_exports
-} from "../chunk-EDHJ4ZRB.mjs";
-import "../chunk-OM25LPIN.mjs";
+} from "../chunk-TZTJWSNU.mjs";
+import "../chunk-IUGL627R.mjs";
 
 // src/audio/index.ts
 import { Note, PitchNotation, SymbolSet } from "web-music-score/theory";

package/dist/audio-cg/index.js

@@ -1,4 +1,4 @@
-/* WebMusicScore v6.0.1 | (c) 2023-2025 Stefan Brockmann | MIT License | Includes: Tone.js (MIT License), Color Name to Code (MIT License) */
+/* WebMusicScore v6.2.0 | (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 __defProps = Object.defineProperties;