@grame/faust-web-component 0.5.4 → 0.5.5

package/README.md

@@ -82,7 +82,7 @@ The HTML [index.html](./index.html) example page can be copied and tested in `di
 
 ## 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.5.4/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.5.5/dist/faust-web-component.js (possibly update the version number).
  
  Here is an HTML example using this model:
  
@@ -101,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.5.4/dist/faust-web-component.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@grame/faust-web-component@0.5.5/dist/faust-web-component.js"></script>
 ```
 
 ## Demo

package/dist/faust-web-component.js

@@ -1,6 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 (function() {
   "use strict";
   /*!
@@ -3861,21 +3858,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./index.scss */
                     "./src/index.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -4034,19 +4031,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! @shren/typed-event-emitter */
                     "./node_modules/@shren/typed-event-emitter/dist/index.js"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -4129,19 +4126,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Base.scss */
                     "./src/components/Base.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -4192,6 +4189,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       };
                       this.handleClick = (e) => {
                       };
+                      this.handleDoubleClick = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.setToInitialValue();
+                      };
                       this.handleMouseDown = (e) => {
                         e.preventDefault();
                         e.currentTarget.focus();
@@ -4281,6 +4283,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       if (changed) this.change(value);
                       return changed;
                     }
+                    setToInitialValue() {
+                      this.setValue(this.state.init);
+                    }
                     /**
                      * Send value to DSP
                      */
@@ -4418,6 +4423,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     address: "",
                     min: 0,
                     max: 1,
+                    init: 0,
                     enums: {},
                     type: "float",
                     unit: "",
@@ -4452,21 +4458,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Button.scss */
                     "./src/components/Button.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -4657,6 +4663,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                   class Group extends _AbstractComponent__WEBPACK_IMPORTED_MODULE_0__["default"] {
                     constructor() {
                       super(...arguments);
+                      this.handleDoubleClick = (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.setToInitialValue();
+                      };
                       this.updateUI = () => {
                         this.children = [];
                         const { style, type, items, emitter, isRoot } = this.state;
@@ -4717,10 +4728,10 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       if (!metaIn) return { metaObject };
                       metaIn.forEach((m) => Object.assign(metaObject, m));
                       if (metaObject.style) {
-                        const enumsRegex = /\{(?:(?:'|_|-)(.+?)(?:'|_|-):([-+]?[0-9]*\.?[0-9]+);)+(?:(?:'|_|-)(.+?)(?:'|_|-):([-+]?[0-9]*\.?[0-9]+))\}/;
+                        const enumsRegex = /\{\s*(?:['_\-](.+?)['_\-]\s*:\s*([-+]?[0-9]*\.?[0-9]+)\s*;\s*)+(?:['_\-](.+?)['_\-]\s*:\s*([-+]?[0-9]*\.?[0-9]+))\s*\}/;
                         const matched = metaObject.style.match(enumsRegex);
                         if (matched) {
-                          const itemsRegex = /(?:(?:'|_|-)(.+?)(?:'|_|-):([-+]?[0-9]*\.?[0-9]+))/g;
+                          const itemsRegex = /['_\-](.+?)['_\-]\s*:\s*([-+]?[0-9]*\.?[0-9]+)\s*/g;
                           const enums = {};
                           let item;
                           while (item = itemsRegex.exec(matched[0])) {
@@ -4774,7 +4785,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                         min: isFinite(min) ? min : 0,
                         max: isFinite(max) ? max : 1,
                         step: "step" in item ? +item.step : 1,
-                        value: "init" in item ? +item.init || 0 : 0
+                        value: "init" in item ? +item.init || 0 : 0,
+                        init: "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);
@@ -4791,6 +4803,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       if (type === "led") return new _Led__WEBPACK_IMPORTED_MODULE_10__["default"](props);
                       return null;
                     }
+                    setToInitialValue() {
+                      this.children.forEach((item) => item.setToInitialValue());
+                    }
                     setState(newState) {
                       let shouldUpdate = false;
                       for (const key in newState) {
@@ -4862,7 +4877,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       return this;
                     }
                     componentDidMount() {
-                      var _a2;
+                      var _a2, _b;
                       const handleResize = () => {
                         const { grid, left, top: top2, width, height } = this.state.style;
                         if (!this.state.isRoot) this.label.style.height = `${grid * 0.3}px`;
@@ -4896,7 +4911,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();
+                      (_a2 = this.labelCanvas) == null ? void 0 : _a2.addEventListener("dblclick", this.handleDoubleClick);
+                      if ((_b = this.tabs) == null ? void 0 : _b.children.length) this.tabs.children[0].click();
                       this.children.forEach((item) => item.componentDidMount());
                       return this;
                     }
@@ -5122,21 +5138,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Knob.scss */
                     "./src/components/Knob.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -5247,6 +5263,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       super.componentDidMount();
                       this.input.addEventListener("change", this.handleChange);
                       this.canvas.addEventListener("pointerdown", this.handlePointerDown);
+                      this.canvas.addEventListener("dblclick", this.handleDoubleClick);
                       this.on("style", () => {
                         this.schedule(this.setStyle);
                         this.schedule(this.paint);
@@ -5327,21 +5344,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Led.scss */
                     "./src/components/Led.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -5473,21 +5490,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Menu.scss */
                     "./src/components/Menu.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -5591,21 +5608,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Nentry.scss */
                     "./src/components/Nentry.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -5697,21 +5714,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Numerical.scss */
                     "./src/components/Numerical.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -5790,21 +5807,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Radio.scss */
                     "./src/components/Radio.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -5913,21 +5930,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./Soundfile.scss */
                     "./src/components/Soundfile.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -6016,21 +6033,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./VBargraph.scss */
                     "./src/components/VBargraph.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -6215,21 +6232,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                     /*! ./VSlider.scss */
                     "./src/components/VSlider.scss"
                   );
-                  var __defProp2 = Object.defineProperty;
+                  var __defProp = Object.defineProperty;
                   var __defProps = Object.defineProperties;
                   var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
                   var __getOwnPropSymbols = Object.getOwnPropertySymbols;
                   var __hasOwnProp = Object.prototype.hasOwnProperty;
                   var __propIsEnum = Object.prototype.propertyIsEnumerable;
-                  var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+                  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
                   var __spreadValues = (a, b) => {
                     for (var prop in b || (b = {}))
                       if (__hasOwnProp.call(b, prop))
-                        __defNormalProp2(a, prop, b[prop]);
+                        __defNormalProp(a, prop, b[prop]);
                     if (__getOwnPropSymbols)
                       for (var prop of __getOwnPropSymbols(b)) {
                         if (__propIsEnum.call(b, prop))
-                          __defNormalProp2(a, prop, b[prop]);
+                          __defNormalProp(a, prop, b[prop]);
                       }
                     return a;
                   };
@@ -6338,6 +6355,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                       super.componentDidMount();
                       this.input.addEventListener("change", this.handleChange);
                       this.canvas.addEventListener("pointerdown", this.handlePointerDown);
+                      this.canvas.addEventListener("dblclick", this.handleDoubleClick);
                       this.on("style", () => {
                         this.schedule(this.setStyle);
                         this.schedule(this.paint);
@@ -16074,10 +16092,10 @@ const dependencies = {
         ensureAddr(this, i2 << 1);
       this.computeSlot = null;
     }
-    field(field, require2 = true) {
+    field(field, require = true) {
       let addr = this.config.address[field.id];
       if (addr == null) {
-        if (require2)
+        if (require)
           throw new RangeError("Field is not present in this state");
         return void 0;
       }
@@ -17433,6 +17451,33 @@ const dependencies = {
     if (name2 == "Down") name2 = "ArrowDown";
     return name2;
   }
+  function crelt() {
+    var elt = arguments[0];
+    if (typeof elt == "string") elt = document.createElement(elt);
+    var i2 = 1, next = arguments[1];
+    if (next && typeof next == "object" && next.nodeType == null && !Array.isArray(next)) {
+      for (var name2 in next) if (Object.prototype.hasOwnProperty.call(next, name2)) {
+        var value = next[name2];
+        if (typeof value == "string") elt.setAttribute(name2, value);
+        else if (value != null) elt[name2] = value;
+      }
+      i2++;
+    }
+    for (; i2 < arguments.length; i2++) add(elt, arguments[i2]);
+    return elt;
+  }
+  function add(elt, child) {
+    if (typeof child == "string") {
+      elt.appendChild(document.createTextNode(child));
+    } else if (child == null) ;
+    else if (child.nodeType != null) {
+      elt.appendChild(child);
+    } else if (Array.isArray(child)) {
+      for (var i2 = 0; i2 < child.length; i2++) add(elt, child[i2]);
+    } else {
+      throw new RangeError("Unsupported child node: " + child);
+    }
+  }
   function getSelection(root) {
     let target;
     if (root.nodeType == 11) {
@@ -19673,14 +19718,30 @@ const dependencies = {
   }
   const editable = /* @__PURE__ */ Facet.define({ combine: (values) => values.length ? values[0] : true });
   let nextPluginID = 0;
-  const viewPlugin = /* @__PURE__ */ Facet.define();
+  const viewPlugin = /* @__PURE__ */ Facet.define({
+    combine(plugins2) {
+      return plugins2.filter((p2, i2) => {
+        for (let j = 0; j < i2; j++)
+          if (plugins2[j].plugin == p2.plugin)
+            return false;
+        return true;
+      });
+    }
+  });
   class ViewPlugin {
     constructor(id, create, domEventHandlers, domEventObservers, buildExtensions) {
       this.id = id;
       this.create = create;
       this.domEventHandlers = domEventHandlers;
       this.domEventObservers = domEventObservers;
-      this.extension = buildExtensions(this);
+      this.baseExtensions = buildExtensions(this);
+      this.extension = this.baseExtensions.concat(viewPlugin.of({ plugin: this, arg: void 0 }));
+    }
+    /**
+    Create an extension for this plugin with the given argument.
+    */
+    of(arg) {
+      return this.baseExtensions.concat(viewPlugin.of({ plugin: this, arg }));
     }
     /**
     Define a plugin from a constructor function that creates the
@@ -19689,7 +19750,7 @@ const dependencies = {
     static define(create, spec) {
       const { eventHandlers, eventObservers, provide, decorations: deco } = spec || {};
       return new ViewPlugin(nextPluginID++, create, eventHandlers, eventObservers, (plugin) => {
-        let ext = [viewPlugin.of(plugin)];
+        let ext = [];
         if (deco)
           ext.push(decorations.of((view) => {
             let pluginInst = view.plugin(plugin);
@@ -19705,7 +19766,7 @@ const dependencies = {
     editor view as argument.
     */
     static fromClass(cls, spec) {
-      return ViewPlugin.define((view) => new cls(view), spec);
+      return ViewPlugin.define((view, arg) => new cls(view, arg), spec);
     }
   }
   class PluginInstance {
@@ -19714,11 +19775,14 @@ const dependencies = {
       this.mustUpdate = null;
       this.value = null;
     }
+    get plugin() {
+      return this.spec && this.spec.plugin;
+    }
     update(view) {
       if (!this.value) {
         if (this.spec) {
           try {
-            this.value = this.spec.create(view);
+            this.value = this.spec.plugin.create(view, this.spec.arg);
           } catch (e) {
             logException(view.state, e, "CodeMirror plugin crashed");
             this.deactivate();
@@ -20596,8 +20660,7 @@ const dependencies = {
           closestRect = rect;
           closestX = dx;
           closestY = dy;
-          let side = dy ? y < rect.top ? -1 : 1 : dx ? x2 < rect.left ? -1 : 1 : 0;
-          closestOverlap = !side || (side > 0 ? i2 < rects.length - 1 : i2 > 0);
+          closestOverlap = !dx ? true : x2 < rect.left ? i2 > 0 : i2 < rects.length - 1;
         }
         if (dx == 0) {
           if (y > rect.bottom && (!aboveRect || aboveRect.bottom < rect.bottom)) {
@@ -20743,13 +20806,23 @@ const dependencies = {
     return block.from + findColumn(content2, into, view.state.tabSize);
   }
   function isSuspiciousSafariCaretResult(node, offset, x2) {
-    let len;
+    let len, scan = node;
     if (node.nodeType != 3 || offset != (len = node.nodeValue.length))
       return false;
-    for (let next = node.nextSibling; next; next = next.nextSibling)
-      if (next.nodeType != 1 || next.nodeName != "BR")
+    for (; ; ) {
+      let next = scan.nextSibling;
+      if (next) {
+        if (next.nodeName == "BR")
+          break;
         return false;
-    return textRange(node, len - 1, len).getBoundingClientRect().left > x2;
+      } else {
+        let parent = scan.parentNode;
+        if (!parent || parent.nodeName == "DIV")
+          break;
+        scan = parent;
+      }
+    }
+    return textRange(node, len - 1, len).getBoundingClientRect().right > x2;
   }
   function isSuspiciousChromeCaretResult(node, offset, x2) {
     if (offset != 0)
@@ -21347,16 +21420,16 @@ const dependencies = {
       return result[type] || (result[type] = { observers: [], handlers: [] });
     }
     for (let plugin of plugins2) {
-      let spec = plugin.spec;
-      if (spec && spec.domEventHandlers)
-        for (let type in spec.domEventHandlers) {
-          let f = spec.domEventHandlers[type];
+      let spec = plugin.spec, handlers2 = spec && spec.plugin.domEventHandlers, observers2 = spec && spec.plugin.domEventObservers;
+      if (handlers2)
+        for (let type in handlers2) {
+          let f = handlers2[type];
           if (f)
             record(type).handlers.push(bindHandler(plugin.value, f));
         }
-      if (spec && spec.domEventObservers)
-        for (let type in spec.domEventObservers) {
-          let f = spec.domEventObservers[type];
+      if (observers2)
+        for (let type in observers2) {
+          let f = observers2[type];
           if (f)
             record(type).observers.push(bindHandler(plugin.value, f));
         }
@@ -23429,13 +23502,16 @@ const dependencies = {
       display: "flex",
       height: "100%",
       boxSizing: "border-box",
-      insetInlineStart: 0,
       zIndex: 200
     },
+    ".cm-gutters-before": { insetInlineStart: 0 },
+    ".cm-gutters-after": { insetInlineEnd: 0 },
     "&light .cm-gutters": {
       backgroundColor: "#f5f5f5",
       color: "#6c6c6c",
-      borderRight: "1px solid #ddd"
+      border: "0px solid #ddd",
+      "&.cm-gutters-before": { borderRightWidth: "1px" },
+      "&.cm-gutters-after": { borderLeftWidth: "1px" }
     },
     "&dark .cm-gutters": {
       backgroundColor: "#333338",
@@ -23486,6 +23562,21 @@ const dependencies = {
       backgroundColor: "#333338",
       color: "white"
     },
+    ".cm-dialog": {
+      padding: "2px 19px 4px 6px",
+      position: "relative",
+      "& label": { fontSize: "80%" }
+    },
+    ".cm-dialog-close": {
+      position: "absolute",
+      top: "3px",
+      right: "4px",
+      backgroundColor: "inherit",
+      border: "none",
+      font: "inherit",
+      fontSize: "14px",
+      padding: "0"
+    },
     ".cm-tab": {
       display: "inline-block",
       overflow: "hidden",
@@ -23590,7 +23681,7 @@ const dependencies = {
         else
           this.flush();
       });
-      if (window.EditContext && view.constructor.EDIT_CONTEXT !== false && // Chrome <126 doesn't support inverted selections in edit context (#1392)
+      if (window.EditContext && browser.android && view.constructor.EDIT_CONTEXT !== false && // Chrome <126 doesn't support inverted selections in edit context (#1392)
       !(browser.chrome && browser.chrome_version < 126)) {
         this.editContext = new EditContextManager(view);
         if (view.state.facet(editable))
@@ -24682,8 +24773,8 @@ const dependencies = {
     */
     plugin(plugin) {
       let known = this.pluginMap.get(plugin);
-      if (known === void 0 || known && known.spec != plugin)
-        this.pluginMap.set(plugin, known = this.plugins.find((p2) => p2.spec == plugin) || null);
+      if (known === void 0 || known && known.plugin != plugin)
+        this.pluginMap.set(plugin, known = this.plugins.find((p2) => p2.plugin == plugin) || null);
       return known && known.update(this).value;
     }
     /**
@@ -26998,21 +27089,37 @@ const dependencies = {
   const gutterView = /* @__PURE__ */ ViewPlugin.fromClass(class {
     constructor(view) {
       this.view = view;
+      this.domAfter = null;
       this.prevViewport = view.viewport;
       this.dom = document.createElement("div");
-      this.dom.className = "cm-gutters";
+      this.dom.className = "cm-gutters cm-gutters-before";
       this.dom.setAttribute("aria-hidden", "true");
       this.dom.style.minHeight = this.view.contentHeight / this.view.scaleY + "px";
       this.gutters = view.state.facet(activeGutters).map((conf) => new SingleGutterView(view, conf));
-      for (let gutter of this.gutters)
-        this.dom.appendChild(gutter.dom);
       this.fixed = !view.state.facet(unfixGutters);
+      for (let gutter of this.gutters) {
+        if (gutter.config.side == "after")
+          this.getDOMAfter().appendChild(gutter.dom);
+        else
+          this.dom.appendChild(gutter.dom);
+      }
       if (this.fixed) {
         this.dom.style.position = "sticky";
       }
       this.syncGutters(false);
       view.scrollDOM.insertBefore(this.dom, view.contentDOM);
     }
+    getDOMAfter() {
+      if (!this.domAfter) {
+        this.domAfter = document.createElement("div");
+        this.domAfter.className = "cm-gutters cm-gutters-after";
+        this.domAfter.setAttribute("aria-hidden", "true");
+        this.domAfter.style.minHeight = this.view.contentHeight / this.view.scaleY + "px";
+        this.domAfter.style.position = this.fixed ? "sticky" : "";
+        this.view.scrollDOM.appendChild(this.domAfter);
+      }
+      return this.domAfter;
+    }
     update(update) {
       if (this.updateGutters(update)) {
         let vpA = this.prevViewport, vpB = update.view.viewport;
@@ -27020,18 +27127,26 @@ const dependencies = {
         this.syncGutters(vpOverlap < (vpB.to - vpB.from) * 0.8);
       }
       if (update.geometryChanged) {
-        this.dom.style.minHeight = this.view.contentHeight / this.view.scaleY + "px";
+        let min = this.view.contentHeight / this.view.scaleY + "px";
+        this.dom.style.minHeight = min;
+        if (this.domAfter)
+          this.domAfter.style.minHeight = min;
       }
       if (this.view.state.facet(unfixGutters) != !this.fixed) {
         this.fixed = !this.fixed;
         this.dom.style.position = this.fixed ? "sticky" : "";
+        if (this.domAfter)
+          this.domAfter.style.position = this.fixed ? "sticky" : "";
       }
       this.prevViewport = update.view.viewport;
     }
     syncGutters(detach) {
       let after = this.dom.nextSibling;
-      if (detach)
+      if (detach) {
         this.dom.remove();
+        if (this.domAfter)
+          this.domAfter.remove();
+      }
       let lineClasses = RangeSet.iter(this.view.state.facet(gutterLineClass), this.view.viewport.from);
       let classSet = [];
       let contexts = this.gutters.map((gutter) => new UpdateContext(gutter, this.view.viewport, -this.view.documentPadding.top));
@@ -27062,8 +27177,11 @@ const dependencies = {
       }
       for (let cx of contexts)
         cx.finish();
-      if (detach)
+      if (detach) {
         this.view.scrollDOM.insertBefore(this.dom, after);
+        if (this.domAfter)
+          this.view.scrollDOM.appendChild(this.domAfter);
+      }
     }
     updateGutters(update) {
       let prev = update.startState.facet(activeGutters), cur2 = update.state.facet(activeGutters);
@@ -27089,8 +27207,12 @@ const dependencies = {
           if (gutters2.indexOf(g2) < 0)
             g2.destroy();
         }
-        for (let g2 of gutters2)
-          this.dom.appendChild(g2.dom);
+        for (let g2 of gutters2) {
+          if (g2.config.side == "after")
+            this.getDOMAfter().appendChild(g2.dom);
+          else
+            this.dom.appendChild(g2.dom);
+        }
         this.gutters = gutters2;
       }
       return change;
@@ -27099,13 +27221,16 @@ const dependencies = {
       for (let view of this.gutters)
         view.destroy();
       this.dom.remove();
+      if (this.domAfter)
+        this.domAfter.remove();
     }
   }, {
     provide: (plugin) => EditorView.scrollMargins.of((view) => {
       let value = view.plugin(plugin);
       if (!value || value.gutters.length == 0 || !value.fixed)
         return null;
-      return view.textDirection == Direction.LTR ? { left: value.dom.offsetWidth * view.scaleX } : { right: value.dom.offsetWidth * view.scaleX };
+      let before = value.dom.offsetWidth * view.scaleX, after = value.domAfter ? value.domAfter.offsetWidth * view.scaleX : 0;
+      return view.textDirection == Direction.LTR ? { left: before, right: after } : { right: before, left: after };
     })
   });
   function asArray(val) {
@@ -27345,7 +27470,8 @@ const dependencies = {
       let max = formatNumber(update.view, maxLineNumber(update.view.state.doc.lines));
       return max == spacer.number ? spacer : new NumberMarker(max);
     },
-    domEventHandlers: state.facet(lineNumberConfig).domEventHandlers
+    domEventHandlers: state.facet(lineNumberConfig).domEventHandlers,
+    side: "before"
   }));
   function lineNumbers(config2 = {}) {
     return [
@@ -30298,7 +30424,7 @@ const dependencies = {
     let inner = ast.resolveInner(pos, -1).resolve(pos, 0).enterUnfinishedNodesBefore(pos);
     if (inner != stack.node) {
       let add2 = [];
-      for (let cur2 = inner; cur2 && !(cur2.from == stack.node.from && cur2.type == stack.node.type); cur2 = cur2.parent)
+      for (let cur2 = inner; cur2 && !(cur2.from < stack.node.from || cur2.to > stack.node.to || cur2.from == stack.node.from && cur2.type == stack.node.type); cur2 = cur2.parent)
         add2.push(cur2);
       for (let i2 = add2.length - 1; i2 >= 0; i2--)
         stack = { node: add2[i2], next: stack };
@@ -32358,33 +32484,6 @@ const dependencies = {
     { key: "Alt-A", run: toggleBlockComment },
     { key: "Ctrl-m", mac: "Shift-Alt-m", run: toggleTabFocusMode }
   ].concat(standardKeymap);
-  function crelt() {
-    var elt = arguments[0];
-    if (typeof elt == "string") elt = document.createElement(elt);
-    var i2 = 1, next = arguments[1];
-    if (next && typeof next == "object" && next.nodeType == null && !Array.isArray(next)) {
-      for (var name2 in next) if (Object.prototype.hasOwnProperty.call(next, name2)) {
-        var value = next[name2];
-        if (typeof value == "string") elt.setAttribute(name2, value);
-        else if (value != null) elt[name2] = value;
-      }
-      i2++;
-    }
-    for (; i2 < arguments.length; i2++) add(elt, arguments[i2]);
-    return elt;
-  }
-  function add(elt, child) {
-    if (typeof child == "string") {
-      elt.appendChild(document.createTextNode(child));
-    } else if (child == null) ;
-    else if (child.nodeType != null) {
-      elt.appendChild(child);
-    } else if (Array.isArray(child)) {
-      for (var i2 = 0; i2 < child.length; i2++) add(elt, child[i2]);
-    } else {
-      throw new RangeError("Unsupported child node: " + child);
-    }
-  }
   const basicNormalize = typeof String.prototype.normalize == "function" ? (x2) => x2.normalize("NFKD") : (x2) => x2;
   class SearchCursor {
     /**
@@ -36472,10 +36571,10 @@ const dependencies = {
     closeLintPanel(editor);
   }
   class Scope {
+    container;
+    canvas;
+    ctx;
     constructor(container) {
-      __publicField(this, "container");
-      __publicField(this, "canvas");
-      __publicField(this, "ctx");
       this.container = container;
       this.container.classList.add("scope");
       this.canvas = document.createElement("canvas");
@@ -36864,8 +36963,8 @@ const dependencies = {
         gutterSize: 7,
         snapOffset: 150,
         onDragEnd: () => {
-          scope == null ? void 0 : scope.onResize();
-          spectrum == null ? void 0 : spectrum.onResize();
+          scope?.onResize();
+          spectrum?.onResize();
         }
       });
       faustPromise.then(() => runButton.disabled = false);
@@ -36951,7 +37050,7 @@ const dependencies = {
         const ui = node.getUI();
         openTab(ui.length > 1 || ui[0].items.length > 0 ? 0 : 3);
         const faustUI = new distExports.FaustUI({ ui, root: faustUIRoot });
-        faustUI.paramChangeByUI = (path, value) => node == null ? void 0 : node.setParamValue(path, value);
+        faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value);
         node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value));
         editorEl.style.height = `${Math.max(125, faustUI.minHeight)}px`;
         faustUIRoot.style.width = faustUI.minWidth * 1.25 + "px";
@@ -37216,7 +37315,7 @@ const dependencies = {
             console.error("Error accessing MIDI device:", error.message);
           });
         }
-        faustUI.paramChangeByUI = (path, value) => node == null ? void 0 : node.setParamValue(path, value);
+        faustUI.paramChangeByUI = (path, value) => node?.setParamValue(path, value);
         node.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value));
         if (node.numberOfInputs > 0) {
           audioInputSelector.disabled = false;
@@ -37230,8 +37329,8 @@ const dependencies = {
         powerButton.style.color = "#ffa500";
       };
       const stop = () => {
-        node == null ? void 0 : node.disconnect();
-        node == null ? void 0 : node.stopSensors();
+        node?.disconnect();
+        node?.stopSensors();
         powerButton.style.color = "#fff";
       };
       powerButton.onclick = () => {

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@grame/faust-web-component",
     "description": "Web component embedding the Faust Compiler",
-    "version": "0.5.4",
+    "version": "0.5.5",
     "module": "dist/faust-web-component.js",
     "files": [
         "src/",
@@ -43,7 +43,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.4.2",
         "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@grame/faustwasm": "^0.9.5",
-        "@shren/faust-ui": "^1.1.16",
+        "@shren/faust-ui": "^1.1.19",
         "codemirror": "^6.0.1",
         "split.js": "^1.6.5"
     }