@grame/faust-web-component 0.3.7 → 0.3.8

package/README.md

@@ -76,9 +76,13 @@ effect = dm.freeverb_demo;
 
 to get a polyphonic clarinet instrument with 16 voices and a global reverb effect.
 
+### HTML example page
+
+The HTML [index.html](./index.html) example page can be copied and tested in `dist` folder.
+
 ## NPM package 
 
- A [npm package](https://www.npmjs.com/package/@grame/faust-web-component) can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.3.5/dist/faust-web-component.js (possibly update the version number).
+ A [npm package](https://www.npmjs.com/package/@grame/faust-web-component) can be used with the CDN link: https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.3.8/dist/faust-web-component.js (possibly update the version number).
  
  Here is an HTML example using this model:
  
@@ -97,7 +101,7 @@ process = vgroup("Oscillator", os.osc(freq1) * vol, os.osc(freq2) * vol);
 -->
 </faust-editor>
 
-<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.3.5/dist/faust-web-component.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.3.8/dist/faust-web-component.js"></script>
 ```
 
 ## Demo

package/dist/faust-web-component.js

@@ -3402,18 +3402,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   margin-top: auto;
 }
 .faust-ui-component.faust-ui-component-radio > .faust-ui-component-radio-group {
-  flex: 0 0 auto;
+  flex: 0 1 auto;
   margin-bottom: auto;
   border-width: 1px;
   border-radius: 4px;
   padding: 2px 4px;
   width: calc(100% - 8px);
+  overflow: auto;
 }
 .faust-ui-component.faust-ui-component-radio > .faust-ui-component-radio-group > div {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}`, "", { "version": 3, "sources": ["webpack://./src/components/Radio.scss"], "names": [], "mappings": "AAAA;EACI,mBAAA;AACJ;AAAI;EACI,cAAA;EACA,gBAAA;AAER;AAAI;EACI,cAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;AAER;AADQ;EACI,uBAAA;EACA,mBAAA;EACA,gBAAA;AAGZ", "sourcesContent": [".faust-ui-component.faust-ui-component-radio {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n        margin-top: auto;\n    }\n    & > .faust-ui-component-radio-group {\n        flex: 0 0 auto;\n        margin-bottom: auto;\n        border-width: 1px;\n        border-radius: 4px;\n        padding: 2px 4px;\n        width: calc(100% - 8px);\n        & > div {\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            overflow: hidden;\n        }\n    }\n}"], "sourceRoot": "" }]);
+}`, "", { "version": 3, "sources": ["webpack://./src/components/Radio.scss"], "names": [], "mappings": "AAAA;EACI,mBAAA;AACJ;AAAI;EACI,cAAA;EACA,gBAAA;AAER;AAAI;EACI,cAAA;EACA,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA;EACA,uBAAA;EACA,cAAA;AAER;AADQ;EACI,uBAAA;EACA,mBAAA;EACA,gBAAA;AAGZ", "sourcesContent": [".faust-ui-component.faust-ui-component-radio {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n        margin-top: auto;\n    }\n    & > .faust-ui-component-radio-group {\n        flex: 0 1 auto;\n        margin-bottom: auto;\n        border-width: 1px;\n        border-radius: 4px;\n        padding: 2px 4px;\n        width: calc(100% - 8px);\n        overflow: auto;\n        & > div {\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            overflow: hidden;\n        }\n    }\n}"], "sourceRoot": "" }]);
                 const __WEBPACK_DEFAULT_EXPORT__ = ___CSS_LOADER_EXPORT___;
               }
             ),
@@ -3793,7 +3794,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   constructor(options) {
                     this.componentMap = {};
                     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;
@@ -3809,7 +3811,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                         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") {
@@ -3849,14 +3852,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                    * 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.
@@ -3880,7 +3886,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                    * 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 } });
                   }
@@ -3888,12 +3895,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   filter(ui) {
                     const callback = (items, item) => {
                       var _a2;
-                      if (item.type === "soundfile") return items;
+                      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 ((_a2 = item.meta) == null ? void 0 : _a2.find((m) => m.hidden && m.hidden === "1")) return items;
+                      if ((_a2 = item.meta) == null ? void 0 : _a2.find((m) => m.hidden && m.hidden === "1"))
+                        return items;
                       items.push(item);
                       return items;
                     };
@@ -3989,8 +3998,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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]);
                     }
                   }
                   /**
@@ -3998,8 +4009,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                    * 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);
                   }
                 }
@@ -4050,7 +4063,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     }
                   return a2;
                 };
-                const _AbstractItem = class _AbstractItem2 extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
+                const _AbstractItem = class extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
                   /**
                    * Initiate default state with incoming state.
                    */
@@ -4138,14 +4151,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       const prevValue = this.state.value;
                       this.handleMouseOrTouchDown({ pointerId, x: fromX, y: fromY, originalEvent: e });
                       const handlePointerMove = (e2) => {
-                        if (e2.pointerId !== pointerId) return;
+                        if (e2.pointerId !== pointerId)
+                          return;
                         e2.preventDefault();
                         const x = e2.clientX - rect.left;
                         const y2 = e2.clientY - rect.top;
                         this.handleMouseOrTouchMove({ pointerId, prevValue, x, y: y2, fromX, fromY, movementX: e2.movementX, movementY: e2.movementY, originalEvent: e2 });
                       };
                       const handlePointerUp = (e2) => {
-                        if (e2.pointerId !== pointerId) return;
+                        if (e2.pointerId !== pointerId)
+                          return;
                         e2.preventDefault();
                         const x = e2.clientX - rect.left;
                         const y2 = e2.clientY - rect.top;
@@ -4165,16 +4180,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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;
                   }
                   /**
@@ -4183,14 +4201,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   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
@@ -4212,8 +4232,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       } 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;
                   }
@@ -4226,7 +4248,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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");
@@ -4247,7 +4270,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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);
@@ -4287,8 +4311,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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;
@@ -4298,11 +4324,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                    */
                   get distance() {
                     const { type, max, min, value, enums, scale } = this.state;
-                    return _AbstractItem2.getDistance({ type, max, min, value, enums, scale });
+                    return _AbstractItem.getDistance({ type, max, min, value, enums, scale });
                   }
                   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);
                   }
@@ -4315,7 +4342,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     return full / stepsCount;
                   }
                 };
-                _AbstractItem.defaultProps = {
+                let AbstractItem = _AbstractItem;
+                AbstractItem.defaultProps = {
                   value: 0,
                   active: true,
                   focus: false,
@@ -4330,7 +4358,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   step: 0.01,
                   style: { width: 45, height: 15, left: 0, top: 0, labelcolor: "rgba(226, 222, 255, 0.5)" }
                 };
-                let AbstractItem = _AbstractItem;
               }
             ),
             /***/
@@ -4566,7 +4593,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       this.children = [];
                       const { style, type, items, emitter, isRoot } = this.state;
                       const { grid, left, top: top2, 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 = `${top2 * grid}px`;
                       this.container.style.width = `${width * grid}px`;
@@ -4575,11 +4603,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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") {
@@ -4599,7 +4629,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                             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];
@@ -4608,8 +4639,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                             for (let j = 0; j < this.tabs.children.length; j++) {
                               const e = this.tabs.children[j];
                               if (i2 !== 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);
@@ -4619,7 +4652,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   }
                   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]+?))\}/;
@@ -4681,19 +4715,32 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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) {
@@ -4712,8 +4759,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       } 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() {
@@ -4731,14 +4780,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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);
@@ -4759,7 +4810,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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);
@@ -4770,7 +4822,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     var _a2;
                     const handleResize = () => {
                       const { grid, left, top: top2, 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`;
@@ -4801,7 +4854,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     };
                     this.on("label", () => this.schedule(labelChange));
                     this.paintLabel();
-                    if ((_a2 = this.tabs) == null ? void 0 : _a2.children.length) this.tabs.children[0].click();
+                    if ((_a2 = this.tabs) == null ? void 0 : _a2.children.length)
+                      this.tabs.children[0].click();
                     this.children.forEach((item) => item.componentDidMount());
                     return this;
                   }
@@ -4869,7 +4923,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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;
@@ -4889,15 +4944,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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, top2, drawWidth * overloadStop, drawHeight);
-                      if (paintValue < max) ctx.fillRect(left + drawWidth * overloadStop + 1, top2, drawWidth * (1 - overloadStop) - 1, drawHeight);
+                      if (paintValue < 0)
+                        ctx.fillRect(left, top2, drawWidth * overloadStop, drawHeight);
+                      if (paintValue < max)
+                        ctx.fillRect(left + drawWidth * overloadStop + 1, top2, 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) }));
@@ -5054,7 +5117,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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 || "");
                     };
@@ -5109,7 +5173,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     };
                     this.handleMouseOrTouchMove = (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() {
@@ -5201,8 +5266,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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;
                   }
                 }
@@ -5282,19 +5349,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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, top2, 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, top2, drawWidth, drawHeight);
                       ctx.fill();
                     };
                   }
@@ -5442,7 +5519,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                         const option = document.createElement("option");
                         option.value = enums[key].toString();
                         option.text = key;
-                        if (i2 === 0) option.selected = true;
+                        if (i2 === 0)
+                          option.selected = true;
                         this.select.appendChild(option);
                         i2++;
                       }
@@ -5457,7 +5535,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     const valueChange = () => {
                       for (let i2 = this.select.children.length - 1; i2 >= 0; i2--) {
                         const option = this.select.children[i2];
-                        if (+option.value === this.state.value) this.select.selectedIndex = i2;
+                        if (+option.value === this.state.value)
+                          this.select.selectedIndex = i2;
                       }
                     };
                     this.on("value", () => this.schedule(valueChange));
@@ -5729,9 +5808,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                           input.value = enums[key].toString();
                           input.name = address;
                           input.type = "radio";
-                          if (i2 === 0) input.checked = true;
+                          if (i2 === 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);
@@ -5779,7 +5860,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     const valueChange = () => {
                       for (let i2 = this.group.children.length - 1; i2 >= 0; i2--) {
                         const input = this.group.children[i2].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));
@@ -5976,7 +6058,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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;
@@ -5996,15 +6079,23 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       const hotStop = (-3 - min) / (max - min);
                       const overloadStop = Math.max(0, -min / (max - min));
                       const gradient = ctx.createLinearGradient(0, drawHeight, 0, top2);
-                      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, top2 + (1 - overloadStop) * drawHeight, drawWidth, drawHeight * overloadStop);
-                      if (paintValue < max) ctx.fillRect(left, top2, drawWidth, (1 - overloadStop) * drawHeight - 1);
+                      if (paintValue < 0)
+                        ctx.fillRect(left, top2 + (1 - overloadStop) * drawHeight, drawWidth, drawHeight * overloadStop);
+                      if (paintValue < max)
+                        ctx.fillRect(left, top2, 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) }));
@@ -6148,7 +6239,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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 || "");
                     };
@@ -6190,13 +6282,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     };
                     this.handleMouseOrTouchDown = (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.handleMouseOrTouchMove = (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() {
@@ -6286,8 +6381,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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;
@@ -6308,8 +6405,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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;
                   }
                 }
@@ -6412,8 +6511,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 const iNormExp = normLog;
                 const roundedRect = (ctx, x, y2, width, height, radius) => {
                   const radii = [0, 0, 0, 0];
-                  if (typeof radius === "number") radii.fill(radius);
-                  else radius.forEach((v, i2) => radii[i2] = v);
+                  if (typeof radius === "number")
+                    radii.fill(radius);
+                  else
+                    radius.forEach((v, i2) => radii[i2] = v);
                   ctx.beginPath();
                   ctx.moveTo(x + radii[0], y2);
                   ctx.lineTo(x + width - radii[1], y2);
@@ -6429,8 +6530,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 };
                 const fillRoundedRect = (ctx, x, y2, width, height, radius) => {
                   const radii = [0, 0, 0, 0];
-                  if (typeof radius === "number") radii.fill(radius);
-                  else radius.forEach((v, i2) => radii[i2] = v);
+                  if (typeof radius === "number")
+                    radii.fill(radius);
+                  else
+                    radius.forEach((v, i2) => radii[i2] = v);
                   ctx.beginPath();
                   ctx.moveTo(x + radii[0], y2);
                   ctx.lineTo(x + width - radii[1], y2);
@@ -6459,12 +6562,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   "default": () => __WEBPACK_DEFAULT_EXPORT__
                   /* harmony export */
                 });
-                var _FaustUI__WEBPACK_IMPORTED_MODULE_0__2 = __webpack_require__2(
+                var _FaustUI__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__2(
                   /*! ./FaustUI */
                   "./src/FaustUI.ts"
                 );
                 const instantiate = () => {
-                  const faustUI = new _FaustUI__WEBPACK_IMPORTED_MODULE_0__2["default"]({
+                  const faustUI = new _FaustUI__WEBPACK_IMPORTED_MODULE_0__["default"]({
                     root: document.getElementById("root"),
                     listenWindowResize: true,
                     listenWindowMessage: true
@@ -6475,10 +6578,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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;
                 };
@@ -6501,7 +6606,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   )
                   /* harmony export */
                 });
-                const _AbstractGroup = class _AbstractGroup2 {
+                const _AbstractGroup = class {
                   constructor(group, isRoot) {
                     this.isRoot = !!isRoot;
                     Object.assign(this, group);
@@ -6509,8 +6614,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     const sizing = hasHSizingDesc && hasVSizingDesc ? "both" : hasHSizingDesc ? "horizontal" : hasVSizingDesc ? "vertical" : "none";
                     this.layout = {
                       type: group.type,
-                      width: _AbstractGroup2.padding * 2,
-                      height: _AbstractGroup2.padding * 2 + (this.isRoot ? 0 : _AbstractGroup2.labelHeight),
+                      width: _AbstractGroup.padding * 2,
+                      height: _AbstractGroup.padding * 2 + (this.isRoot ? 0 : _AbstractGroup.labelHeight),
                       sizing
                     };
                   }
@@ -6519,7 +6624,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                    */
                   get hasHSizingDesc() {
                     return !!this.items.find((item) => {
-                      if (item instanceof _AbstractGroup2) return item.hasHSizingDesc;
+                      if (item instanceof _AbstractGroup)
+                        return item.hasHSizingDesc;
                       return item.layout.sizing === "horizontal" || item.layout.sizing === "both";
                     });
                   }
@@ -6528,7 +6634,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                    */
                   get hasVSizingDesc() {
                     return !!this.items.find((item) => {
-                      if (item instanceof _AbstractGroup2) return item.hasVSizingDesc;
+                      if (item instanceof _AbstractGroup)
+                        return item.hasVSizingDesc;
                       return item.layout.sizing === "vertical" || item.layout.sizing === "both";
                     });
                   }
@@ -6542,10 +6649,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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;
               }
             ),
             /***/
@@ -6762,13 +6869,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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;
@@ -6960,26 +7069,31 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       if ((_a2 = item.meta) == null ? void 0 : _a2.find((meta2) => {
                         var _a22;
                         return (_a22 = meta2.style) == null ? void 0 : _a22.startsWith("led");
-                      })) return "led";
+                      }))
+                        return "led";
                       if ((_b = item.meta) == null ? void 0 : _b.find((meta2) => {
                         var _a22;
                         return (_a22 = meta2.style) == null ? void 0 : _a22.startsWith("numerical");
-                      })) return "numerical";
+                      }))
+                        return "numerical";
                       return item.type;
                     }
                     if (item.type === "hslider" || item.type === "nentry" || item.type === "vslider") {
                       if ((_c = item.meta) == null ? void 0 : _c.find((meta2) => {
                         var _a22;
                         return (_a22 = meta2.style) == null ? void 0 : _a22.startsWith("knob");
-                      })) return "knob";
+                      }))
+                        return "knob";
                       if ((_d = item.meta) == null ? void 0 : _d.find((meta2) => {
                         var _a22;
                         return (_a22 = meta2.style) == null ? void 0 : _a22.startsWith("menu");
-                      })) return "menu";
+                      }))
+                        return "menu";
                       if ((_e = item.meta) == null ? void 0 : _e.find((meta2) => {
                         var _a22;
                         return (_a22 = meta2.style) == null ? void 0 : _a22.startsWith("radio");
-                      })) return "radio";
+                      }))
+                        return "radio";
                     }
                     return item.type;
                   }
@@ -7010,7 +7124,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   }
                   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);
                     });
                   }
@@ -7243,17 +7358,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   /*! ./AbstractGroup */
                   "./src/layout/AbstractGroup.ts"
                 );
-                const _TGroup = class _TGroup2 extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
+                const _TGroup = class extends _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"] {
                   adjust() {
                     this.items.forEach((item) => {
                       item.adjust();
                       this.layout.width = Math.max(this.layout.width, item.layout.width + 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding);
-                      this.layout.height = Math.max(this.layout.height, item.layout.height + 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding + _TGroup2.labelHeight);
+                      this.layout.height = Math.max(this.layout.height, item.layout.height + 2 * _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"].padding + _TGroup.labelHeight);
                     });
                     const tabsCount = this.items.length;
-                    this.layout.width = Math.max(this.layout.width, tabsCount * _TGroup2.tabLayout.width);
-                    this.layout.height += _TGroup2.tabLayout.height;
-                    if (this.layout.width < 1) this.layout.width += 1;
+                    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;
                     return this;
                   }
                   expand() {
@@ -7261,8 +7377,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     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 ? _TGroup2.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;
@@ -7270,7 +7388,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   offset() {
                     const { labelHeight, padding } = _AbstractGroup__WEBPACK_IMPORTED_MODULE_0__["default"];
                     const $left = padding;
-                    const $top = padding + (this.isRoot ? 0 : labelHeight) + _TGroup2.tabLayout.height;
+                    const $top = padding + (this.isRoot ? 0 : labelHeight) + _TGroup.tabLayout.height;
                     this.items.forEach((item) => {
                       item.layout.offsetLeft = $left;
                       item.layout.offsetTop = $top;
@@ -7281,11 +7399,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     return this;
                   }
                 };
-                _TGroup.tabLayout = {
+                let TGroup = _TGroup;
+                TGroup.tabLayout = {
                   width: 2,
                   height: 1
                 };
-                let TGroup = _TGroup;
               }
             ),
             /***/
@@ -7349,13 +7467,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       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;
@@ -8631,38 +8751,40 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             __webpack_require__.nc = void 0;
           })();
           var __webpack_exports__ = {};
-          /*!**********************!*\
-            !*** ./src/index.ts ***!
-            \**********************/
-          __webpack_require__.r(__webpack_exports__);
-          __webpack_require__.d(__webpack_exports__, {
-            /* harmony export */
-            FaustUI: () => (
-              /* reexport safe */
-              _FaustUI__WEBPACK_IMPORTED_MODULE_0__["default"]
-            ),
-            /* harmony export */
-            instantiate: () => (
-              /* reexport safe */
-              _instantiate__WEBPACK_IMPORTED_MODULE_1__["default"]
-            )
-            /* harmony export */
-          });
-          var _FaustUI__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
-            /*! ./FaustUI */
-            "./src/FaustUI.ts"
-          );
-          var _instantiate__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
-            /*! ./instantiate */
-            "./src/instantiate.ts"
-          );
+          (() => {
+            /*!**********************!*\
+              !*** ./src/index.ts ***!
+              \**********************/
+            __webpack_require__.r(__webpack_exports__);
+            __webpack_require__.d(__webpack_exports__, {
+              /* harmony export */
+              FaustUI: () => (
+                /* reexport safe */
+                _FaustUI__WEBPACK_IMPORTED_MODULE_0__["default"]
+              ),
+              /* harmony export */
+              instantiate: () => (
+                /* reexport safe */
+                _instantiate__WEBPACK_IMPORTED_MODULE_1__["default"]
+              )
+              /* harmony export */
+            });
+            var _FaustUI__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
+              /*! ./FaustUI */
+              "./src/FaustUI.ts"
+            );
+            var _instantiate__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
+              /*! ./instantiate */
+              "./src/instantiate.ts"
+            );
+          })();
           return __webpack_exports__;
         })()
       );
     });
   })(dist$1);
   var distExports = dist$1.exports;
-  const faustCSS = '/*!*******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Base.scss ***!\n  \\*******************************************************************************************************************/\n.faust-ui-component {\n  display: flex;\n  position: absolute;\n  flex-direction: column;\n  overflow: hidden;\n}\n.faust-ui-component:focus {\n  outline: none;\n}\n.faust-ui-component > .faust-ui-component-label {\n  position: relative;\n  margin-top: 4px;\n  width: 100%;\n  user-select: none;\n}\n.faust-ui-component > .faust-ui-component-label > canvas {\n  position: relative;\n  display: block;\n  max-width: 100%;\n  max-height: 100%;\n}\n.faust-ui-component input {\n  box-shadow: none;\n}\n/*!**********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/VSlider.scss ***!\n  \\**********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-vslider {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  width: 100%;\n  height: auto;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv > .faust-ui-component-vslider-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv > .faust-ui-component-vslider-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: 5px auto auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  height: 5%;\n  max-width: calc(100% - 8px);\n  padding: 2px 4px;\n  -moz-appearance: textfield;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n/*!**********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/HSlider.scss ***!\n  \\**********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  flex: 1 1 auto;\n  width: 100%;\n  height: auto;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > .faust-ui-component-hslider-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  height: 100%;\n  margin: auto;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > .faust-ui-component-hslider-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: auto 5px auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  width: calc(20% - 13px);\n  padding: 2px 4px;\n  -moz-appearance: textfield;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n/*!*********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Nentry.scss ***!\n  \\*********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-nentry {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-nentry input {\n  margin: 0px;\n  text-align: center;\n  border-width: 1px;\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: calc(100% - 8px);\n}\n.faust-ui-component.faust-ui-component-nentry input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-nentry input::-webkit-outer-spin-button {\n  opacity: 1;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Soundfile.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-soundfile > div {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  text-align: center;\n  border-radius: 4px;\n  flex: 1 0 auto;\n  border-style: solid;\n}\n.faust-ui-component.faust-ui-component-soundfile > div > span {\n  user-select: none;\n  margin: auto;\n}\n/*!*********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Button.scss ***!\n  \\*********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-button > div {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  text-align: center;\n  border-radius: 4px;\n  flex: 1 0 auto;\n  border-style: solid;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-button > div > span {\n  user-select: none;\n  margin: auto;\n}\n/*!***********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Checkbox.scss ***!\n  \\***********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-checkbox > div {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  text-align: center;\n  border-radius: 1px;\n  flex: 1 0 auto;\n  border-style: solid;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-checkbox > div > span {\n  margin: auto;\n  user-select: none;\n}\n/*!*******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Knob.scss ***!\n  \\*******************************************************************************************************************/\n.faust-ui-component.faust-ui-component-knob {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-knob > canvas {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  min-height: 50%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-knob > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: 0px;\n  border-width: 0px;\n  border-radius: 4px;\n  max-width: calc(100% - 8px);\n  padding: 2px 4px;\n  -moz-appearance: textfield;\n}\n.faust-ui-component.faust-ui-component-knob > input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-knob > input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n/*!*******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Menu.scss ***!\n  \\*******************************************************************************************************************/\n.faust-ui-component.faust-ui-component-menu {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-menu > select {\n  margin: 0px;\n  text-align: center;\n  border-width: 1px;\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: calc(100% - 8px);\n}\n/*!********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Radio.scss ***!\n  \\********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-radio {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-radio > .faust-ui-component-label {\n  flex: 0 0 auto;\n  margin-top: auto;\n}\n.faust-ui-component.faust-ui-component-radio > .faust-ui-component-radio-group {\n  flex: 0 0 auto;\n  margin-bottom: auto;\n  border-width: 1px;\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: calc(100% - 8px);\n}\n.faust-ui-component.faust-ui-component-radio > .faust-ui-component-radio-group > div {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n/*!******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Led.scss ***!\n  \\******************************************************************************************************************/\n.faust-ui-component.faust-ui-component-led {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-led > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-led > .faust-ui-component-led-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n}\n.faust-ui-component.faust-ui-component-led > .faust-ui-component-led-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Numerical.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-numerical {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-numerical > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: auto;\n  border-width: 0px;\n  border-radius: 4px;\n  width: calc(100% - 8px);\n  padding: 2px 4px;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/VBargraph.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-vbargraph {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  width: 100%;\n  height: inherit;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv > .faust-ui-component-vbargraph-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv > .faust-ui-component-vbargraph-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: 5px auto auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  height: 5%;\n  width: calc(100% - 8px);\n  padding: 2px 4px;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/HBargraph.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  flex: 1 1 auto;\n  width: 100%;\n  height: auto;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv > .faust-ui-component-hbargraph-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  height: 100%;\n  margin: auto;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv > .faust-ui-component-hbargraph-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: auto 5px auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  width: calc(20% - 13px);\n  padding: 2px 4px;\n}\n/*!********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Group.scss ***!\n  \\********************************************************************************************************************/\n.faust-ui-group {\n  position: absolute;\n  display: block;\n  background-color: rgba(80, 80, 80, 0.75);\n  border-radius: 4px;\n  border: 1px rgba(255, 255, 255, 0.25) solid;\n}\n.faust-ui-group > .faust-ui-group-label {\n  position: relative;\n  margin: 4px;\n  width: calc(100% - 8px);\n  user-select: none;\n}\n.faust-ui-group > .faust-ui-group-label > canvas {\n  position: relative;\n  display: block;\n  max-width: 100%;\n  max-height: 100%;\n}\n.faust-ui-group .faust-ui-tgroup-tabs {\n  position: absolute;\n  display: inline-block;\n  white-space: nowrap;\n  left: 0px;\n}\n.faust-ui-group .faust-ui-tgroup-tabs .faust-ui-tgroup-tab {\n  position: relative;\n  display: inline-block;\n  border-radius: 5px;\n  cursor: pointer;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  margin: 10px;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.faust-ui-group .faust-ui-tgroup-tabs .faust-ui-tgroup-tab:hover {\n  background-color: rgb(255, 255, 255);\n}\n.faust-ui-group .faust-ui-tgroup-tabs .faust-ui-tgroup-tab.active {\n  background-color: rgb(40, 40, 40);\n  color: white;\n}\n/*!*********************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!\n  \\*********************************************************************************************************/\n.faust-ui-root {\n  margin: 0px auto;\n  flex: 1 0 auto;\n  position: relative !important;\n  background-color: transparent !important;\n  border: none !important;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n\n/*# sourceMappingURL=index.css.map*/';
+  const faustCSS = '/*!*******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Base.scss ***!\n  \\*******************************************************************************************************************/\n.faust-ui-component {\n  display: flex;\n  position: absolute;\n  flex-direction: column;\n  overflow: hidden;\n}\n.faust-ui-component:focus {\n  outline: none;\n}\n.faust-ui-component > .faust-ui-component-label {\n  position: relative;\n  margin-top: 4px;\n  width: 100%;\n  user-select: none;\n}\n.faust-ui-component > .faust-ui-component-label > canvas {\n  position: relative;\n  display: block;\n  max-width: 100%;\n  max-height: 100%;\n}\n.faust-ui-component input {\n  box-shadow: none;\n}\n/*!**********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/VSlider.scss ***!\n  \\**********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-vslider {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  width: 100%;\n  height: auto;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv > .faust-ui-component-vslider-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv > .faust-ui-component-vslider-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: 5px auto auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  height: 5%;\n  max-width: calc(100% - 8px);\n  padding: 2px 4px;\n  -moz-appearance: textfield;\n}\n.faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n/*!**********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/HSlider.scss ***!\n  \\**********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  flex: 1 1 auto;\n  width: 100%;\n  height: auto;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > .faust-ui-component-hslider-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  height: 100%;\n  margin: auto;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > .faust-ui-component-hslider-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: auto 5px auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  width: calc(20% - 13px);\n  padding: 2px 4px;\n  -moz-appearance: textfield;\n}\n.faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n/*!*********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Nentry.scss ***!\n  \\*********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-nentry {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-nentry input {\n  margin: 0px;\n  text-align: center;\n  border-width: 1px;\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: calc(100% - 8px);\n}\n.faust-ui-component.faust-ui-component-nentry input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-nentry input::-webkit-outer-spin-button {\n  opacity: 1;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Soundfile.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-soundfile > div {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  text-align: center;\n  border-radius: 4px;\n  flex: 1 0 auto;\n  border-style: solid;\n}\n.faust-ui-component.faust-ui-component-soundfile > div > span {\n  user-select: none;\n  margin: auto;\n}\n/*!*********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Button.scss ***!\n  \\*********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-button > div {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  text-align: center;\n  border-radius: 4px;\n  flex: 1 0 auto;\n  border-style: solid;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-button > div > span {\n  user-select: none;\n  margin: auto;\n}\n/*!***********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Checkbox.scss ***!\n  \\***********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-checkbox > div {\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  border-width: 1px;\n  text-align: center;\n  border-radius: 1px;\n  flex: 1 0 auto;\n  border-style: solid;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-checkbox > div > span {\n  margin: auto;\n  user-select: none;\n}\n/*!*******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Knob.scss ***!\n  \\*******************************************************************************************************************/\n.faust-ui-component.faust-ui-component-knob {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-knob > canvas {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  min-height: 50%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-knob > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: 0px;\n  border-width: 0px;\n  border-radius: 4px;\n  max-width: calc(100% - 8px);\n  padding: 2px 4px;\n  -moz-appearance: textfield;\n}\n.faust-ui-component.faust-ui-component-knob > input::-webkit-inner-spin-button, .faust-ui-component.faust-ui-component-knob > input::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n/*!*******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Menu.scss ***!\n  \\*******************************************************************************************************************/\n.faust-ui-component.faust-ui-component-menu {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-menu > select {\n  margin: 0px;\n  text-align: center;\n  border-width: 1px;\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: calc(100% - 8px);\n}\n/*!********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Radio.scss ***!\n  \\********************************************************************************************************************/\n.faust-ui-component.faust-ui-component-radio {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-radio > .faust-ui-component-label {\n  flex: 0 0 auto;\n  margin-top: auto;\n}\n.faust-ui-component.faust-ui-component-radio > .faust-ui-component-radio-group {\n  flex: 0 1 auto;\n  margin-bottom: auto;\n  border-width: 1px;\n  border-radius: 4px;\n  padding: 2px 4px;\n  width: calc(100% - 8px);\n  overflow: auto;\n}\n.faust-ui-component.faust-ui-component-radio > .faust-ui-component-radio-group > div {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n/*!******************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Led.scss ***!\n  \\******************************************************************************************************************/\n.faust-ui-component.faust-ui-component-led {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-led > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-led > .faust-ui-component-led-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n}\n.faust-ui-component.faust-ui-component-led > .faust-ui-component-led-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Numerical.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-numerical {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-numerical > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: auto;\n  border-width: 0px;\n  border-radius: 4px;\n  width: calc(100% - 8px);\n  padding: 2px 4px;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/VBargraph.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-vbargraph {\n  align-items: center;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  width: 100%;\n  height: inherit;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv > .faust-ui-component-vbargraph-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  width: 100%;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv > .faust-ui-component-vbargraph-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: 5px auto auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  height: 5%;\n  width: calc(100% - 8px);\n  padding: 2px 4px;\n}\n/*!************************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/HBargraph.scss ***!\n  \\************************************************************************************************************************/\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-label {\n  flex: 0 0 auto;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv {\n  position: relative;\n  display: flex;\n  flex-direction: row-reverse;\n  flex: 1 1 auto;\n  width: 100%;\n  height: auto;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv > .faust-ui-component-hbargraph-canvasdiv {\n  position: relative;\n  display: block;\n  flex: 1 1 auto;\n  height: 100%;\n  margin: auto;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv > .faust-ui-component-hbargraph-canvasdiv > canvas {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  touch-action: none;\n}\n.faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv > input {\n  position: relative;\n  display: block;\n  flex: 0 1 auto;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.25);\n  margin: auto 5px auto auto;\n  border-width: 0px;\n  border-radius: 4px;\n  width: calc(20% - 13px);\n  padding: 2px 4px;\n}\n/*!********************************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Group.scss ***!\n  \\********************************************************************************************************************/\n.faust-ui-group {\n  position: absolute;\n  display: block;\n  background-color: rgba(80, 80, 80, 0.75);\n  border-radius: 4px;\n  border: 1px rgba(255, 255, 255, 0.25) solid;\n}\n.faust-ui-group > .faust-ui-group-label {\n  position: relative;\n  margin: 4px;\n  width: calc(100% - 8px);\n  user-select: none;\n}\n.faust-ui-group > .faust-ui-group-label > canvas {\n  position: relative;\n  display: block;\n  max-width: 100%;\n  max-height: 100%;\n}\n.faust-ui-group .faust-ui-tgroup-tabs {\n  position: absolute;\n  display: inline-block;\n  white-space: nowrap;\n  left: 0px;\n}\n.faust-ui-group .faust-ui-tgroup-tabs .faust-ui-tgroup-tab {\n  position: relative;\n  display: inline-block;\n  border-radius: 5px;\n  cursor: pointer;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  margin: 10px;\n  text-align: center;\n  background-color: rgba(255, 255, 255, 0.5);\n}\n.faust-ui-group .faust-ui-tgroup-tabs .faust-ui-tgroup-tab:hover {\n  background-color: rgb(255, 255, 255);\n}\n.faust-ui-group .faust-ui-tgroup-tabs .faust-ui-tgroup-tab.active {\n  background-color: rgb(40, 40, 40);\n  color: white;\n}\n/*!*********************************************************************************************************!*\\\n  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!\n  \\*********************************************************************************************************/\n.faust-ui-root {\n  margin: 0px auto;\n  flex: 1 0 auto;\n  position: relative !important;\n  background-color: transparent !important;\n  border: none !important;\n  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n}\n\n/*# sourceMappingURL=index.css.map*/';
   var global = typeof window !== "undefined" ? window : null;
   var ssr = global === null;
   var document$1 = !ssr ? global.document : void 0;
@@ -23504,8 +23626,10 @@ const dependencies = {
           return;
         this.pendingContextChange = change;
         applyDOMChangeInner(view, change, EditorSelection.single(this.toEditorPos(e.selectionStart), this.toEditorPos(e.selectionEnd)));
-        if (this.pendingContextChange)
+        if (this.pendingContextChange) {
           this.revertPending(view.state);
+          this.setSelection(view.state);
+        }
       };
       this.handlers.characterboundsupdate = (e) => {
         let rects = [], prev = null;
@@ -23583,12 +23707,13 @@ const dependencies = {
       return !abort;
     }
     update(update) {
+      let reverted = this.pendingContextChange;
       if (!this.applyEdits(update) || !this.rangeIsValid(update.state)) {
         this.pendingContextChange = null;
         this.resetRange(update.state);
         this.editContext.updateText(0, this.editContext.text.length, update.state.doc.sliceString(this.from, this.to));
         this.setSelection(update.state);
-      } else if (update.docChanged || update.selectionSet) {
+      } else if (update.docChanged || update.selectionSet || reverted) {
         this.setSelection(update.state);
       }
       if (update.geometryChanged || update.docChanged || update.selectionSet)
@@ -23610,7 +23735,7 @@ const dependencies = {
     revertPending(state) {
       let pending = this.pendingContextChange;
       this.pendingContextChange = null;
-      this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.to + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
+      this.editContext.updateText(this.toContextPos(pending.from), this.toContextPos(pending.from + pending.insert.length), state.doc.sliceString(pending.from, pending.to));
     }
     setSelection(state) {
       let { main } = state.selection;

package/index.html

@@ -1,68 +1,36 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Vite + TS</title>
-        <script type="module" src="/src/main.ts"></script>
-        <style>
-            #content {
-                width: 50%;
-                margin: auto;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="content">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
-            <faust-editor>
-import("stdfaust.lib");
-process = no.noise;
-            </faust-editor>
-            <p>Nostrum, id deserunt inventore ut veritatis iusto autem soluta officia debitis omnis, dolor sint cum, illo quam dignissimos fuga quod optio nesciunt.</p>
-<!-- Need to comment below example due to occurrence of `<`. -->
-            <faust-editor>
-<!--
-import("stdfaust.lib");
-ctFreq = 500;
-q = 5;
-gain = 1;
-process = no.noise : _ <: fi.resonlp(ctFreq,q,gain),fi.resonlp(ctFreq,q,gain);
--->
-            </faust-editor>
-            <p>Ex velit voluptates, laudantium laboriosam est quis veniam temporibus tempore minima aspernatur, modi labore molestiae provident adipisci voluptatem dolorem voluptatibus asperiores possimus.</p>
-            <faust-editor>
-<!--
+
+<body>
+    <center>
+        <H1>Here's an embedded editor!</H1>
+    </center>
+
+    <faust-editor>
+        <!--
 import("stdfaust.lib");
 ctFreq = hslider("cutoffFrequency",500,50,10000,0.01);
 q = hslider("q",5,1,30,0.1);
 gain = hslider("gain",1,0,1,0.01);
 process = no.noise : fi.resonlp(ctFreq,q,gain);
 -->
-            </faust-editor>
-            <p>Nam tempora officiis sunt nisi cupiditate expedita magnam atque. Unde, itaque.</p>
-            <faust-editor>
-                <!--
-import("stdfaust.lib");
-process = 
-    dm.cubicnl_demo : // distortion 
-    dm.wah4_demo <: // wah pedal
-    dm.phaser2_demo : // stereo phaser 
-    dm.compressor_demo : // stereo compressor
-    dm.zita_light; // stereo reverb
-                -->
-            </faust-editor>
-            <p>Minus, ducimus consequuntur? Corrupti animi aut magni nihil, dolor eos tenetur, autem deserunt et iure culpa, suscipit minus quia velit laudantium asperiores.</p>
-            <faust-widget>
-<!--
+    </faust-editor>
+    <center>
+        <H1>Here's a simple DSP widget!</H1>
+
+        <faust-widget>
+            <!--
 import("stdfaust.lib");
-ctFreq = hslider("cutoffFrequency",500,50,10000,0.01);
-q = hslider("q",5,1,30,0.1);
-gain = hslider("gain",1,0,1,0.01);
-process = no.noise : fi.resonlp(ctFreq,q,gain);
+ctFreq = hslider("[0]cutoffFrequency",500,50,10000,0.01) : si.smoo;
+q = hslider("[1]q",5,1,30,0.1) : si.smoo;
+gain = hslider("[2]gain",1,0,1,0.01) : si.smoo;
+t = button("[3]gate") : si.smoo;
+process = no.noise : fi.resonlp(ctFreq,q,gain)*t <: dm.zita_light;
 -->
-            </faust-widget>
-        </div>
-    </body>
-</html>
+        </faust-widget>
+    </center>
+    <script src="faust-web-component.js"></script>
+
+</body>
+
+</html>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@grame/faust-web-component",
     "description": "Web component embedding the Faust Compiler",
-    "version": "0.3.7",
+    "version": "0.3.8",
     "module": "dist/faust-web-component.js",
     "files": [
         "src/",
@@ -42,8 +42,8 @@
         "@codemirror/legacy-modes": "^6.3.3",
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
-        "@grame/faustwasm": "^0.5.2",
-        "@shren/faust-ui": "^1.1.12",
+        "@grame/faustwasm": "^0.5.4",
+        "@shren/faust-ui": "^1.1.13",
         "codemirror": "^6.0.1",
         "split.js": "^1.6.5"
     }