@grame/faustwasm 0.3.2 → 0.4.1

package/assets/standalone/faust-ui/index.js

@@ -129,6 +129,25 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _layout_Layout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./layout/Layout */ "./src/layout/Layout.ts");
 /* harmony import */ var _components_Group__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/Group */ "./src/components/Group.ts");
 /* harmony import */ var _index_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 
 
@@ -142,8 +161,7 @@ class FaustUI {
      * Can be overriden, called by components when its value is changed by user.
      */
     this.paramChangeByUI = (path, value) => {
-      if (!this.hostWindow)
-        return;
+      if (!this.hostWindow) return;
       this.hostWindow.postMessage({ path, value, type: "param" }, "*");
     };
     const { root, ui: uiIn, listenWindowResize, listenWindowMessage } = options;
@@ -159,8 +177,7 @@ class FaustUI {
         const { data, source } = e;
         this.hostWindow = source;
         const { type } = data;
-        if (!type)
-          return;
+        if (!type) return;
         if (type === "ui") {
           this.ui = data.ui;
         } else if (type === "param") {
@@ -200,17 +217,14 @@ class FaustUI {
    * This method should be called by components to register itself to map.
    */
   register(path, item) {
-    if (this.componentMap[path])
-      this.componentMap[path].push(item);
-    else
-      this.componentMap[path] = [item];
+    if (this.componentMap[path]) this.componentMap[path].push(item);
+    else this.componentMap[path] = [item];
   }
   /**
    * Notify the component to change its value.
    */
   paramChangeByDSP(path, value) {
-    if (this.componentMap[path])
-      this.componentMap[path].forEach((item) => item.setState({ value }));
+    if (this.componentMap[path]) this.componentMap[path].forEach((item) => item.setState({ value }));
   }
   /**
    * Calculate UI layout in grid then calculate grid size.
@@ -234,16 +248,30 @@ class FaustUI {
    * Force recalculate grid size and resize UI
    */
   resize() {
-    if (!this.faustUIRoot)
-      return;
+    if (!this.faustUIRoot) return;
     this.calcGrid();
     this.faustUIRoot.setState({ style: { grid: this.grid } });
   }
+  /** Filter out items with `hidden` metadata and `soundfile` items */
+  filter(ui) {
+    const callback = (items, item) => {
+      var _a;
+      if (item.type === "soundfile") return items;
+      if (item.type === "hgroup" || item.type === "vgroup" || item.type === "tgroup") {
+        items.push(__spreadProps(__spreadValues({}, item), { items: item.items.reduce(callback, []) }));
+        return items;
+      }
+      if ((_a = item.meta) == null ? void 0 : _a.find((m) => m.hidden && m.hidden === "1")) return items;
+      items.push(item);
+      return items;
+    };
+    return ui.reduce(callback, []);
+  }
   get ui() {
     return this._ui;
   }
   set ui(uiIn) {
-    this._ui = uiIn;
+    this._ui = this.filter(uiIn);
     this.calc();
     this.mount();
   }
@@ -335,10 +363,8 @@ class AbstractComponent extends _shren_typed_event_emitter__WEBPACK_IMPORTED_MOD
       if (stateKey in this.state && this.state[stateKey] !== stateValue) {
         this.state[stateKey] = stateValue;
         shouldUpdate = true;
-      } else
-        return;
-      if (shouldUpdate)
-        this.emit(stateKey, this.state[stateKey]);
+      } else return;
+      if (shouldUpdate) this.emit(stateKey, this.state[stateKey]);
     }
   }
   /**
@@ -346,10 +372,8 @@ class AbstractComponent extends _shren_typed_event_emitter__WEBPACK_IMPORTED_MOD
    * schedule what you need to do in next render tick in `raf` callback
    */
   schedule(func) {
-    if (this.tasks.indexOf(func) === -1)
-      this.tasks.push(func);
-    if (this.$raf)
-      return;
+    if (this.tasks.indexOf(func) === -1) this.tasks.push(func);
+    if (this.$raf) return;
     this.$raf = window.requestAnimationFrame(this.raf);
   }
 }
@@ -393,7 +417,7 @@ var __spreadValues = (a, b) => {
 
 
 
-const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
+const _AbstractItem = class _AbstractItem extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
   /**
    * Initiate default state with incoming state.
    */
@@ -484,19 +508,16 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
     this.handleFocusIn = (e) => this.setState({ focus: true });
     this.handleFocusOut = (e) => this.setState({ focus: false });
     this.state.style = __spreadValues(__spreadValues({}, this.defaultProps.style), props.style);
-    if (this.state.emitter)
-      this.state.emitter.register(this.state.address, this);
+    if (this.state.emitter) this.state.emitter.register(this.state.address, this);
   }
   /**
    * Get a nearest valid number
    */
   toValidNumber(value) {
     const { min, max, step } = this.state;
-    if (typeof min !== "number" || typeof max !== "number")
-      return value;
+    if (typeof min !== "number" || typeof max !== "number") return value;
     const v = Math.min(max, Math.max(min, value));
-    if (!step)
-      return v;
+    if (!step) return v;
     return min + Math.floor((v - min) / step) * step;
   }
   /**
@@ -505,16 +526,14 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
   setValue(valueIn) {
     const value = this.toValidNumber(valueIn);
     const changed = this.setState({ value });
-    if (changed)
-      this.change(value);
+    if (changed) this.change(value);
     return changed;
   }
   /**
    * Send value to DSP
    */
   change(valueIn) {
-    if (this.state.emitter)
-      this.state.emitter.paramChangeByUI(this.state.address, typeof valueIn === "number" ? valueIn : this.state.value);
+    if (this.state.emitter) this.state.emitter.paramChangeByUI(this.state.address, typeof valueIn === "number" ? valueIn : this.state.value);
   }
   /**
    * set internal state and fire events for UI parts subscribed
@@ -536,10 +555,8 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
       } else if (stateKey in this.state && this.state[stateKey] !== stateValue) {
         this.state[stateKey] = stateValue;
         shouldUpdate = true;
-      } else
-        return false;
-      if (shouldUpdate)
-        this.emit(stateKey, this.state[stateKey]);
+      } else return false;
+      if (shouldUpdate) this.emit(stateKey, this.state[stateKey]);
     }
     return shouldUpdate;
   }
@@ -552,8 +569,7 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
     this.container.className = ["faust-ui-component", "faust-ui-component-" + this.className].join(" ");
     this.container.tabIndex = 1;
     this.container.id = this.state.address;
-    if (this.state.tooltip)
-      this.container.title = this.state.tooltip;
+    if (this.state.tooltip) this.container.title = this.state.tooltip;
     this.label = document.createElement("div");
     this.label.className = "faust-ui-component-label";
     this.labelCanvas = document.createElement("canvas");
@@ -574,8 +590,7 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
     const canvas = this.labelCanvas;
     const ratio = window.devicePixelRatio || 1;
     let { width, height } = this.label.getBoundingClientRect();
-    if (!width || !height)
-      return this;
+    if (!width || !height) return this;
     width = Math.floor(width);
     height = Math.floor(height);
     const scaledWidth = Math.floor(width * ratio);
@@ -615,10 +630,8 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
     const { type, max, min, step, enums } = this.state;
     const maxSteps = type === "enum" ? enums.length : type === "int" ? max - min : (max - min) / step;
     if (step) {
-      if (type === "enum")
-        return enums.length;
-      if (type === "int")
-        return Math.min(Math.floor((max - min) / (Math.round(step) || 1)), maxSteps);
+      if (type === "enum") return enums.length;
+      if (type === "int") return Math.min(Math.floor((max - min) / (Math.round(step) || 1)), maxSteps);
       return Math.floor((max - min) / step);
     }
     return maxSteps;
@@ -632,8 +645,7 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
   }
   static getDistance(state) {
     const { type, max, min, value, enums, scale } = state;
-    if (type === "enum")
-      return value / (enums.length - 1);
+    if (type === "enum") return value / (enums.length - 1);
     const v = scale === "exp" ? (0,_utils__WEBPACK_IMPORTED_MODULE_1__.normLog)(value, min, max) : scale === "log" ? (0,_utils__WEBPACK_IMPORTED_MODULE_1__.normExp)(value, min, max) : value;
     return (0,_utils__WEBPACK_IMPORTED_MODULE_1__.normalize)(v, min, max);
   }
@@ -646,11 +658,10 @@ const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_
     return full / stepsCount;
   }
 };
-let AbstractItem = _AbstractItem;
 /**
  * The default state of the component.
  */
-AbstractItem.defaultProps = {
+_AbstractItem.defaultProps = {
   value: 0,
   active: true,
   focus: false,
@@ -665,6 +676,7 @@ AbstractItem.defaultProps = {
   step: 0.01,
   style: { width: 45, height: 15, left: 0, top: 0, labelcolor: "rgba(226, 222, 255, 0.5)" }
 };
+let AbstractItem = _AbstractItem;
 
 
 
@@ -846,8 +858,7 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
       this.children = [];
       const { style, type, items, emitter, isRoot } = this.state;
       const { grid, left, top, width, height } = style;
-      if (!this.state.isRoot)
-        this.label.style.height = `${grid * 0.3}px`;
+      if (!this.state.isRoot) this.label.style.height = `${grid * 0.3}px`;
       this.container.style.left = `${left * grid}px`;
       this.container.style.top = `${top * grid}px`;
       this.container.style.width = `${width * grid}px`;
@@ -856,13 +867,11 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
       items.forEach((item) => {
         if (item.type.endsWith("group")) {
           const component = Group.getComponent(item, emitter, grid);
-          if (component)
-            this.children.push(component);
+          if (component) this.children.push(component);
         } else {
           const ioItem = item;
           const itemComponent = Group.getComponent(ioItem, this.state.emitter, grid);
-          if (itemComponent)
-            this.children.push(itemComponent);
+          if (itemComponent) this.children.push(itemComponent);
         }
       });
       if (type === "tgroup") {
@@ -882,8 +891,7 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
             const groups = [];
             for (let j = 0; j < this.container.children.length; j++) {
               const element = this.container.children[j];
-              if (j > 1)
-                groups.push(element);
+              if (j > 1) groups.push(element);
             }
             for (let j = 0; j < groups.length; j++) {
               const element = groups[j];
@@ -892,10 +900,8 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
             for (let j = 0; j < this.tabs.children.length; j++) {
               const e = this.tabs.children[j];
               if (i !== j) {
-                if (e.classList.contains("active"))
-                  e.classList.remove("active");
-              } else
-                e.classList.add("active");
+                if (e.classList.contains("active")) e.classList.remove("active");
+              } else e.classList.add("active");
             }
           });
           this.tabs.appendChild(tab);
@@ -905,8 +911,7 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
   }
   static parseMeta(metaIn) {
     const metaObject = {};
-    if (!metaIn)
-      return { metaObject };
+    if (!metaIn) return { metaObject };
     metaIn.forEach((m) => Object.assign(metaObject, m));
     if (metaObject.style) {
       const enumsRegex = /\{(?:(?:'|_|-)(.+?)(?:'|_|-):([-+]?[0-9]*\.?[0-9]+?);)+(?:(?:'|_|-)(.+?)(?:'|_|-):([-+]?[0-9]*\.?[0-9]+?))\}/;
@@ -968,32 +973,19 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
       step: "step" in item ? +item.step : 1,
       value: "init" in item ? +item.init || 0 : 0
     };
-    if (type === "button")
-      return new _Button__WEBPACK_IMPORTED_MODULE_5__["default"](props);
-    if (type === "checkbox")
-      return new _Checkbox__WEBPACK_IMPORTED_MODULE_6__["default"](props);
-    if (type === "nentry")
-      return new _Nentry__WEBPACK_IMPORTED_MODULE_3__["default"](props);
-    if (type === "soundfile")
-      return new _Soundfile__WEBPACK_IMPORTED_MODULE_4__["default"](props);
-    if (type === "knob")
-      return new _Knob__WEBPACK_IMPORTED_MODULE_7__["default"](props);
-    if (type === "menu")
-      return new _Menu__WEBPACK_IMPORTED_MODULE_8__["default"](props);
-    if (type === "radio")
-      return new _Radio__WEBPACK_IMPORTED_MODULE_9__["default"](props);
-    if (type === "hslider")
-      return new _HSlider__WEBPACK_IMPORTED_MODULE_1__["default"](props);
-    if (type === "vslider")
-      return new _VSlider__WEBPACK_IMPORTED_MODULE_2__["default"](props);
-    if (type === "hbargraph")
-      return new _HBargraph__WEBPACK_IMPORTED_MODULE_12__["default"](props);
-    if (type === "vbargraph")
-      return new _VBargraph__WEBPACK_IMPORTED_MODULE_13__["default"](props);
-    if (type === "numerical")
-      return new _Numerical__WEBPACK_IMPORTED_MODULE_11__["default"](props);
-    if (type === "led")
-      return new _Led__WEBPACK_IMPORTED_MODULE_10__["default"](props);
+    if (type === "button") return new _Button__WEBPACK_IMPORTED_MODULE_5__["default"](props);
+    if (type === "checkbox") return new _Checkbox__WEBPACK_IMPORTED_MODULE_6__["default"](props);
+    if (type === "nentry") return new _Nentry__WEBPACK_IMPORTED_MODULE_3__["default"](props);
+    if (type === "soundfile") return new _Soundfile__WEBPACK_IMPORTED_MODULE_4__["default"](props);
+    if (type === "knob") return new _Knob__WEBPACK_IMPORTED_MODULE_7__["default"](props);
+    if (type === "menu") return new _Menu__WEBPACK_IMPORTED_MODULE_8__["default"](props);
+    if (type === "radio") return new _Radio__WEBPACK_IMPORTED_MODULE_9__["default"](props);
+    if (type === "hslider") return new _HSlider__WEBPACK_IMPORTED_MODULE_1__["default"](props);
+    if (type === "vslider") return new _VSlider__WEBPACK_IMPORTED_MODULE_2__["default"](props);
+    if (type === "hbargraph") return new _HBargraph__WEBPACK_IMPORTED_MODULE_12__["default"](props);
+    if (type === "vbargraph") return new _VBargraph__WEBPACK_IMPORTED_MODULE_13__["default"](props);
+    if (type === "numerical") return new _Numerical__WEBPACK_IMPORTED_MODULE_11__["default"](props);
+    if (type === "led") return new _Led__WEBPACK_IMPORTED_MODULE_10__["default"](props);
     return null;
   }
   setState(newState) {
@@ -1012,10 +1004,8 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
       } else if (stateKey in this.state && this.state[stateKey] !== stateValue) {
         this.state[stateKey] = stateValue;
         shouldUpdate = true;
-      } else
-        return;
-      if (shouldUpdate)
-        this.emit(stateKey, this.state[stateKey]);
+      } else return;
+      if (shouldUpdate) this.emit(stateKey, this.state[stateKey]);
     }
   }
   componentWillMount() {
@@ -1033,16 +1023,14 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
     return this;
   }
   paintLabel() {
-    if (this.state.isRoot)
-      return this;
+    if (this.state.isRoot) return this;
     const label = this.state.label;
     const color = this.state.style.labelcolor;
     const ctx = this.labelCtx;
     const canvas = this.labelCanvas;
     const ratio = window.devicePixelRatio || 1;
     let { width, height } = this.label.getBoundingClientRect();
-    if (!width || !height)
-      return this;
+    if (!width || !height) return this;
     width = Math.floor(width);
     height = Math.floor(height);
     const scaledWidth = Math.floor(width * ratio);
@@ -1063,8 +1051,7 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
       this.label.appendChild(this.labelCanvas);
       this.container.appendChild(this.label);
     }
-    if (this.tabs.children.length)
-      this.container.appendChild(this.tabs);
+    if (this.tabs.children.length) this.container.appendChild(this.tabs);
     this.children.forEach((item) => {
       item.mount();
       this.container.appendChild(item.container);
@@ -1072,10 +1059,10 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
     return this;
   }
   componentDidMount() {
+    var _a;
     const handleResize = () => {
       const { grid, left, top, width, height } = this.state.style;
-      if (!this.state.isRoot)
-        this.label.style.height = `${grid * 0.3}px`;
+      if (!this.state.isRoot) this.label.style.height = `${grid * 0.3}px`;
       this.container.style.width = `${width * grid}px`;
       this.container.style.height = `${height * grid}px`;
       this.container.style.left = `${left * grid}px`;
@@ -1106,8 +1093,7 @@ class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
     };
     this.on("label", () => this.schedule(labelChange));
     this.paintLabel();
-    if (this.tabs && this.tabs.children.length)
-      this.tabs.children[0].click();
+    if ((_a = this.tabs) == null ? void 0 : _a.children.length) this.tabs.children[0].click();
     this.children.forEach((item) => item.componentDidMount());
     return this;
   }
@@ -1165,8 +1151,7 @@ class HBargraph extends _VBargraph__WEBPACK_IMPORTED_MODULE_1__["default"] {
       const paintValue = this.paintValue;
       if (paintValue > this.maxValue) {
         this.maxValue = paintValue;
-        if (this.maxTimer)
-          window.clearTimeout(this.maxTimer);
+        if (this.maxTimer) window.clearTimeout(this.maxTimer);
         this.maxTimer = window.setTimeout(() => {
           this.maxValue = this.paintValue;
           this.maxTimer = void 0;
@@ -1186,23 +1171,15 @@ class HBargraph extends _VBargraph__WEBPACK_IMPORTED_MODULE_1__["default"] {
       const hotStop = (-3 - min) / (max - min);
       const overloadStop = Math.max(0, -min / (max - min));
       const gradient = ctx.createLinearGradient(left, 0, drawWidth, 0);
-      if (coldStop <= 1 && coldStop >= 0)
-        gradient.addColorStop(coldStop, coldcolor);
-      else if (coldStop > 1)
-        gradient.addColorStop(1, coldcolor);
-      if (warmStop <= 1 && warmStop >= 0)
-        gradient.addColorStop(warmStop, warmcolor);
-      if (hotStop <= 1 && hotStop >= 0)
-        gradient.addColorStop(hotStop, hotcolor);
-      if (overloadStop <= 1 && overloadStop >= 0)
-        gradient.addColorStop(overloadStop, overloadcolor);
-      else if (overloadStop < 0)
-        gradient.addColorStop(0, coldcolor);
+      if (coldStop <= 1 && coldStop >= 0) gradient.addColorStop(coldStop, coldcolor);
+      else if (coldStop > 1) gradient.addColorStop(1, coldcolor);
+      if (warmStop <= 1 && warmStop >= 0) gradient.addColorStop(warmStop, warmcolor);
+      if (hotStop <= 1 && hotStop >= 0) gradient.addColorStop(hotStop, hotcolor);
+      if (overloadStop <= 1 && overloadStop >= 0) gradient.addColorStop(overloadStop, overloadcolor);
+      else if (overloadStop < 0) gradient.addColorStop(0, coldcolor);
       ctx.fillStyle = barbgcolor;
-      if (paintValue < 0)
-        ctx.fillRect(left, top, drawWidth * overloadStop, drawHeight);
-      if (paintValue < max)
-        ctx.fillRect(left + drawWidth * overloadStop + 1, top, drawWidth * (1 - overloadStop) - 1, drawHeight);
+      if (paintValue < 0) ctx.fillRect(left, top, drawWidth * overloadStop, drawHeight);
+      if (paintValue < max) ctx.fillRect(left + drawWidth * overloadStop + 1, top, drawWidth * (1 - overloadStop) - 1, drawHeight);
       ctx.fillStyle = gradient;
       if (paintValue > min) {
         const distance = Math.max(0, _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"].getDistance({ type, max, min, enums, scale, value: Math.min(0, paintValue) }));
@@ -1339,8 +1316,7 @@ class Knob extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const value = parseFloat(e.currentTarget.value);
       if (isFinite(value)) {
         const changed = this.setValue(+this.inputNumber.value);
-        if (changed)
-          return;
+        if (changed) return;
       }
       this.input.value = this.inputNumber.value + (this.state.unit || "");
     };
@@ -1395,8 +1371,7 @@ class Knob extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     };
     this.handlePointerDrag = (e) => {
       const newValue = this.getValueFromDelta(e);
-      if (newValue !== this.state.value)
-        this.setValue(newValue);
+      if (newValue !== this.state.value) this.setValue(newValue);
     };
   }
   static get defaultProps() {
@@ -1489,10 +1464,8 @@ class Knob extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     const v = scale === "exp" ? (0,_utils__WEBPACK_IMPORTED_MODULE_1__.normExp)(denormalized, min, max) : scale === "log" ? (0,_utils__WEBPACK_IMPORTED_MODULE_1__.normLog)(denormalized, min, max) : denormalized;
     let steps = Math.round((0,_utils__WEBPACK_IMPORTED_MODULE_1__.normalize)(v, min, max) * range / stepRange);
     steps = Math.min(stepsCount, Math.max(0, steps));
-    if (type === "enum")
-      return steps;
-    if (type === "int")
-      return Math.round(steps * step + min);
+    if (type === "enum") return steps;
+    if (type === "int") return Math.round(steps * step + min);
     return steps * step + min;
   }
 }
@@ -1564,29 +1537,19 @@ class Led extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const hotStop = (-3 - min) / (max - min);
       const overloadStop = -min / (max - min);
       const gradient = tempCtx.createLinearGradient(0, 0, tempCanvas.width, 0);
-      if (coldStop <= 1 && coldStop >= 0)
-        gradient.addColorStop(coldStop, coldcolor);
-      else if (coldStop > 1)
-        gradient.addColorStop(1, coldcolor);
-      if (warmStop <= 1 && warmStop >= 0)
-        gradient.addColorStop(warmStop, warmcolor);
-      if (hotStop <= 1 && hotStop >= 0)
-        gradient.addColorStop(hotStop, hotcolor);
-      if (overloadStop <= 1 && overloadStop >= 0)
-        gradient.addColorStop(overloadStop, overloadcolor);
-      else if (overloadStop < 0)
-        gradient.addColorStop(0, coldcolor);
+      if (coldStop <= 1 && coldStop >= 0) gradient.addColorStop(coldStop, coldcolor);
+      else if (coldStop > 1) gradient.addColorStop(1, coldcolor);
+      if (warmStop <= 1 && warmStop >= 0) gradient.addColorStop(warmStop, warmcolor);
+      if (hotStop <= 1 && hotStop >= 0) gradient.addColorStop(hotStop, hotcolor);
+      if (overloadStop <= 1 && overloadStop >= 0) gradient.addColorStop(overloadStop, overloadcolor);
+      else if (overloadStop < 0) gradient.addColorStop(0, coldcolor);
       tempCtx.fillStyle = gradient;
       tempCtx.fillRect(0, 0, tempCanvas.width, 10);
       const d = tempCtx.getImageData(Math.min(tempCanvas.width - 1, distance * tempCanvas.width), 0, 1, 1).data;
-      if (distance)
-        ctx.fillStyle = `rgb(${d[0]}, ${d[1]}, ${d[2]})`;
-      else
-        ctx.fillStyle = ledbgcolor;
-      if (shape === "circle")
-        ctx.arc(width / 2, height / 2, width / 2 - left, 0, 2 * Math.PI);
-      else
-        ctx.rect(left, top, drawWidth, drawHeight);
+      if (distance) ctx.fillStyle = `rgb(${d[0]}, ${d[1]}, ${d[2]})`;
+      else ctx.fillStyle = ledbgcolor;
+      if (shape === "circle") ctx.arc(width / 2, height / 2, width / 2 - left, 0, 2 * Math.PI);
+      else ctx.rect(left, top, drawWidth, drawHeight);
       ctx.fill();
     };
   }
@@ -1727,8 +1690,7 @@ class Menu extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
         const option = document.createElement("option");
         option.value = enums[key].toString();
         option.text = key;
-        if (i === 0)
-          option.selected = true;
+        if (i === 0) option.selected = true;
         this.select.appendChild(option);
         i++;
       }
@@ -1743,8 +1705,7 @@ class Menu extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     const valueChange = () => {
       for (let i = this.select.children.length - 1; i >= 0; i--) {
         const option = this.select.children[i];
-        if (+option.value === this.state.value)
-          this.select.selectedIndex = i;
+        if (+option.value === this.state.value) this.select.selectedIndex = i;
       }
     };
     this.on("value", () => this.schedule(valueChange));
@@ -1992,11 +1953,9 @@ class Radio extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
           input.value = enums[key].toString();
           input.name = address;
           input.type = "radio";
-          if (i === 0)
-            input.checked = true;
+          if (i === 0) input.checked = true;
           input.addEventListener("change", () => {
-            if (input.checked)
-              this.setValue(enums[key]);
+            if (input.checked) this.setValue(enums[key]);
           });
           div.appendChild(input);
           div.append(key);
@@ -2044,8 +2003,7 @@ class Radio extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     const valueChange = () => {
       for (let i = this.group.children.length - 1; i >= 0; i--) {
         const input = this.group.children[i].querySelector("input");
-        if (+input.value === this.state.value)
-          input.checked = true;
+        if (+input.value === this.state.value) input.checked = true;
       }
     };
     this.on("value", () => this.schedule(valueChange));
@@ -2227,8 +2185,7 @@ class VBargraph extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const paintValue = this.paintValue;
       if (paintValue > this.maxValue) {
         this.maxValue = paintValue;
-        if (this.maxTimer)
-          window.clearTimeout(this.maxTimer);
+        if (this.maxTimer) window.clearTimeout(this.maxTimer);
         this.maxTimer = window.setTimeout(() => {
           this.maxValue = this.paintValue;
           this.maxTimer = void 0;
@@ -2248,23 +2205,15 @@ class VBargraph extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const hotStop = (-3 - min) / (max - min);
       const overloadStop = Math.max(0, -min / (max - min));
       const gradient = ctx.createLinearGradient(0, drawHeight, 0, top);
-      if (coldStop <= 1 && coldStop >= 0)
-        gradient.addColorStop(coldStop, coldcolor);
-      else if (coldStop > 1)
-        gradient.addColorStop(1, coldcolor);
-      if (warmStop <= 1 && warmStop >= 0)
-        gradient.addColorStop(warmStop, warmcolor);
-      if (hotStop <= 1 && hotStop >= 0)
-        gradient.addColorStop(hotStop, hotcolor);
-      if (overloadStop <= 1 && overloadStop >= 0)
-        gradient.addColorStop(overloadStop, overloadcolor);
-      else if (overloadStop < 0)
-        gradient.addColorStop(0, coldcolor);
+      if (coldStop <= 1 && coldStop >= 0) gradient.addColorStop(coldStop, coldcolor);
+      else if (coldStop > 1) gradient.addColorStop(1, coldcolor);
+      if (warmStop <= 1 && warmStop >= 0) gradient.addColorStop(warmStop, warmcolor);
+      if (hotStop <= 1 && hotStop >= 0) gradient.addColorStop(hotStop, hotcolor);
+      if (overloadStop <= 1 && overloadStop >= 0) gradient.addColorStop(overloadStop, overloadcolor);
+      else if (overloadStop < 0) gradient.addColorStop(0, coldcolor);
       ctx.fillStyle = barbgcolor;
-      if (paintValue < 0)
-        ctx.fillRect(left, top + (1 - overloadStop) * drawHeight, drawWidth, drawHeight * overloadStop);
-      if (paintValue < max)
-        ctx.fillRect(left, top, drawWidth, (1 - overloadStop) * drawHeight - 1);
+      if (paintValue < 0) ctx.fillRect(left, top + (1 - overloadStop) * drawHeight, drawWidth, drawHeight * overloadStop);
+      if (paintValue < max) ctx.fillRect(left, top, drawWidth, (1 - overloadStop) * drawHeight - 1);
       ctx.fillStyle = gradient;
       if (paintValue > min) {
         const distance = Math.max(0, _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"].getDistance({ type, max, min, enums, scale, value: Math.min(0, paintValue) }));
@@ -2399,8 +2348,7 @@ class VSlider extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
       const value = parseFloat(e.currentTarget.value);
       if (isFinite(value)) {
         const changed = this.setValue(+value);
-        if (changed)
-          return;
+        if (changed) return;
       }
       this.input.value = this.inputNumber.value + (this.state.unit || "");
     };
@@ -2442,16 +2390,13 @@ class VSlider extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     };
     this.handlePointerDown = (e) => {
       const { value } = this.state;
-      if (e.x < this.interactionRect[0] || e.x > this.interactionRect[0] + this.interactionRect[2] || e.y < this.interactionRect[1] || e.y > this.interactionRect[1] + this.interactionRect[3])
-        return;
+      if (e.x < this.interactionRect[0] || e.x > this.interactionRect[0] + this.interactionRect[2] || e.y < this.interactionRect[1] || e.y > this.interactionRect[1] + this.interactionRect[3]) return;
       const newValue = this.getValueFromPos(e);
-      if (newValue !== value)
-        this.setValue(this.getValueFromPos(e));
+      if (newValue !== value) this.setValue(this.getValueFromPos(e));
     };
     this.handlePointerDrag = (e) => {
       const newValue = this.getValueFromPos(e);
-      if (newValue !== this.state.value)
-        this.setValue(newValue);
+      if (newValue !== this.state.value) this.setValue(newValue);
     };
   }
   static get defaultProps() {
@@ -2542,10 +2487,8 @@ class VSlider extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     const { type, max, min, step, enums } = this.state;
     const maxSteps = type === "enum" ? enums.length : type === "int" ? max - min : (max - min) / step;
     if (step) {
-      if (type === "enum")
-        return enums.length;
-      if (type === "int")
-        return Math.min(Math.floor((max - min) / (Math.round(step) || 0)), maxSteps);
+      if (type === "enum") return enums.length;
+      if (type === "int") return Math.min(Math.floor((max - min) / (Math.round(step) || 0)), maxSteps);
       return Math.floor((max - min) / step);
     }
     return maxSteps;
@@ -2566,10 +2509,8 @@ class VSlider extends _AbstractItem__WEBPACK_IMPORTED_MODULE_0__["default"] {
     const v = scale === "exp" ? (0,_utils__WEBPACK_IMPORTED_MODULE_1__.normExp)(denormalized, min, max) : scale === "log" ? (0,_utils__WEBPACK_IMPORTED_MODULE_1__.normLog)(denormalized, min, max) : denormalized;
     let steps = Math.round((0,_utils__WEBPACK_IMPORTED_MODULE_1__.normalize)(v, min, max) * range / stepRange);
     steps = Math.min(stepsCount, Math.max(0, steps));
-    if (type === "enum")
-      return steps;
-    if (type === "int")
-      return Math.round(steps * step + min);
+    if (type === "enum") return steps;
+    if (type === "int") return Math.round(steps * step + min);
     return steps * step + min;
   }
 }
@@ -2624,10 +2565,8 @@ const normExp = iNormLog;
 const iNormExp = normLog;
 const roundedRect = (ctx, x, y, width, height, radius) => {
   const radii = [0, 0, 0, 0];
-  if (typeof radius === "number")
-    radii.fill(radius);
-  else
-    radius.forEach((v, i) => radii[i] = v);
+  if (typeof radius === "number") radii.fill(radius);
+  else radius.forEach((v, i) => radii[i] = v);
   ctx.beginPath();
   ctx.moveTo(x + radii[0], y);
   ctx.lineTo(x + width - radii[1], y);
@@ -2643,10 +2582,8 @@ const roundedRect = (ctx, x, y, width, height, radius) => {
 };
 const fillRoundedRect = (ctx, x, y, width, height, radius) => {
   const radii = [0, 0, 0, 0];
-  if (typeof radius === "number")
-    radii.fill(radius);
-  else
-    radius.forEach((v, i) => radii[i] = v);
+  if (typeof radius === "number") radii.fill(radius);
+  else radius.forEach((v, i) => radii[i] = v);
   ctx.beginPath();
   ctx.moveTo(x + radii[0], y);
   ctx.lineTo(x + width - radii[1], y);
@@ -2688,12 +2625,10 @@ const instantiate = () => {
     host = source;
   });
   window.addEventListener("keydown", (e) => {
-    if (host)
-      host.postMessage({ type: "keydown", key: e.key }, "*");
+    if (host) host.postMessage({ type: "keydown", key: e.key }, "*");
   });
   window.addEventListener("keyup", (e) => {
-    if (host)
-      host.postMessage({ type: "keyup", key: e.key }, "*");
+    if (host) host.postMessage({ type: "keyup", key: e.key }, "*");
   });
   window.faustUI = faustUI;
 };
@@ -2712,7 +2647,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (/* binding */ AbstractGroup)
 /* harmony export */ });
-const _AbstractGroup = class {
+const _AbstractGroup = class _AbstractGroup {
   constructor(group, isRoot) {
     this.isRoot = !!isRoot;
     Object.assign(this, group);
@@ -2730,8 +2665,7 @@ const _AbstractGroup = class {
    */
   get hasHSizingDesc() {
     return !!this.items.find((item) => {
-      if (item instanceof _AbstractGroup)
-        return item.hasHSizingDesc;
+      if (item instanceof _AbstractGroup) return item.hasHSizingDesc;
       return item.layout.sizing === "horizontal" || item.layout.sizing === "both";
     });
   }
@@ -2740,8 +2674,7 @@ const _AbstractGroup = class {
    */
   get hasVSizingDesc() {
     return !!this.items.find((item) => {
-      if (item instanceof _AbstractGroup)
-        return item.hasVSizingDesc;
+      if (item instanceof _AbstractGroup) return item.hasVSizingDesc;
       return item.layout.sizing === "vertical" || item.layout.sizing === "both";
     });
   }
@@ -2755,10 +2688,10 @@ const _AbstractGroup = class {
     return this;
   }
 };
+_AbstractGroup.padding = 0.2;
+_AbstractGroup.labelHeight = 0.25;
+_AbstractGroup.spaceBetween = 0.1;
 let AbstractGroup = _AbstractGroup;
-AbstractGroup.padding = 0.2;
-AbstractGroup.labelHeight = 0.25;
-AbstractGroup.spaceBetween = 0.1;
 
 
 
@@ -2936,15 +2869,13 @@ class HGroup extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
       this.layout.height = Math.max(this.layout.height, item.layout.height + 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding + (this.isRoot ? 0 : _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight));
     });
     this.layout.width += _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].spaceBetween * (this.items.length - 1);
-    if (this.layout.width < 1)
-      this.layout.width += 1;
+    if (this.layout.width < 1) this.layout.width += 1;
     return this;
   }
   expand(dX) {
     let hExpandItems = 0;
     this.items.forEach((item) => {
-      if (item.layout.sizing === "both" || item.layout.sizing === "horizontal")
-        hExpandItems++;
+      if (item.layout.sizing === "both" || item.layout.sizing === "horizontal") hExpandItems++;
     });
     this.items.forEach((item) => {
       let dX$ = 0;
@@ -3083,22 +3014,31 @@ class Layout {
    * Get the rendering type of an item by parsing its metadata
    */
   static predictType(item) {
-    if (item.type === "vgroup" || item.type === "hgroup" || item.type === "tgroup" || item.type === "button" || item.type === "checkbox" || item.type === "soundfile")
-      return item.type;
+    var _a, _b, _c, _d, _e;
     if (item.type === "hbargraph" || item.type === "vbargraph") {
-      if (item.meta && item.meta.find((meta) => meta.style && meta.style.startsWith("led")))
-        return "led";
-      if (item.meta && item.meta.find((meta) => meta.style && meta.style.startsWith("numerical")))
-        return "numerical";
+      if ((_a = item.meta) == null ? void 0 : _a.find((meta) => {
+        var _a2;
+        return (_a2 = meta.style) == null ? void 0 : _a2.startsWith("led");
+      })) return "led";
+      if ((_b = item.meta) == null ? void 0 : _b.find((meta) => {
+        var _a2;
+        return (_a2 = meta.style) == null ? void 0 : _a2.startsWith("numerical");
+      })) return "numerical";
       return item.type;
     }
     if (item.type === "hslider" || item.type === "nentry" || item.type === "vslider") {
-      if (item.meta && item.meta.find((meta) => meta.style && meta.style.startsWith("knob")))
-        return "knob";
-      if (item.meta && item.meta.find((meta) => meta.style && meta.style.startsWith("menu")))
-        return "menu";
-      if (item.meta && item.meta.find((meta) => meta.style && meta.style.startsWith("radio")))
-        return "radio";
+      if ((_c = item.meta) == null ? void 0 : _c.find((meta) => {
+        var _a2;
+        return (_a2 = meta.style) == null ? void 0 : _a2.startsWith("knob");
+      })) return "knob";
+      if ((_d = item.meta) == null ? void 0 : _d.find((meta) => {
+        var _a2;
+        return (_a2 = meta.style) == null ? void 0 : _a2.startsWith("menu");
+      })) return "menu";
+      if ((_e = item.meta) == null ? void 0 : _e.find((meta) => {
+        var _a2;
+        return (_a2 = meta.style) == null ? void 0 : _a2.startsWith("radio");
+      })) return "radio";
     }
     return item.type;
   }
@@ -3129,8 +3069,7 @@ class Layout {
   }
   static getItems(items) {
     return items.map((item) => {
-      if ("items" in item)
-        item.items = this.getItems(item.items);
+      if ("items" in item) item.items = this.getItems(item.items);
       return this.getItem(item);
     });
   }
@@ -3321,7 +3260,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AbstractGroup */ "./src/layout/AbstractGroup.ts");
 
-const _TGroup = class extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
+const _TGroup = class _TGroup extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
   adjust() {
     this.items.forEach((item) => {
       item.adjust();
@@ -3331,8 +3270,7 @@ const _TGroup = class extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["defau
     const tabsCount = this.items.length;
     this.layout.width = Math.max(this.layout.width, tabsCount * _TGroup.tabLayout.width);
     this.layout.height += _TGroup.tabLayout.height;
-    if (this.layout.width < 1)
-      this.layout.width += 1;
+    if (this.layout.width < 1) this.layout.width += 1;
     return this;
   }
   expand() {
@@ -3340,10 +3278,8 @@ const _TGroup = class extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["defau
     this.items.forEach((item) => {
       let dY$ = 0;
       let dX$ = 0;
-      if (item.layout.sizing === "both" || item.layout.sizing === "horizontal")
-        dX$ = this.layout.width - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - item.layout.width;
-      if (item.layout.sizing === "both" || item.layout.sizing === "vertical")
-        dY$ = this.layout.height - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - (this.isRoot ? 0 : _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight) - (tabsCount ? _TGroup.tabLayout.height : 0) - item.layout.height;
+      if (item.layout.sizing === "both" || item.layout.sizing === "horizontal") dX$ = this.layout.width - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - item.layout.width;
+      if (item.layout.sizing === "both" || item.layout.sizing === "vertical") dY$ = this.layout.height - 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding - (this.isRoot ? 0 : _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].labelHeight) - (tabsCount ? _TGroup.tabLayout.height : 0) - item.layout.height;
       item.expand(dX$, dY$);
     });
     return this;
@@ -3362,11 +3298,11 @@ const _TGroup = class extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["defau
     return this;
   }
 };
-let TGroup = _TGroup;
-TGroup.tabLayout = {
+_TGroup.tabLayout = {
   width: 2,
   height: 1
 };
+let TGroup = _TGroup;
 
 
 
@@ -3419,15 +3355,13 @@ class VGroup extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
       this.layout.height += item.layout.height;
     });
     this.layout.height += _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].spaceBetween * (this.items.length - 1);
-    if (this.layout.width < 1)
-      this.layout.width += 1;
+    if (this.layout.width < 1) this.layout.width += 1;
     return this;
   }
   expand(dX, dY) {
     let vExpandItems = 0;
     this.items.forEach((item) => {
-      if (item.layout.sizing === "both" || item.layout.sizing === "vertical")
-        vExpandItems++;
+      if (item.layout.sizing === "both" || item.layout.sizing === "vertical") vExpandItems++;
     });
     this.items.forEach((item) => {
       let dX$ = 0;
@@ -3741,8 +3675,6 @@ __webpack_require__.r(__webpack_exports__);
 /******/ 
 /************************************************************************/
 var __webpack_exports__ = {};
-// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
-(() => {
 /*!**********************!*\
   !*** ./src/index.ts ***!
   \**********************/
@@ -3756,8 +3688,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-})();
-
 var __webpack_exports__FaustUI = __webpack_exports__.FaustUI;
 var __webpack_exports__instantiate = __webpack_exports__.instantiate;
 export { __webpack_exports__FaustUI as FaustUI, __webpack_exports__instantiate as instantiate };