@grame/faustwasm 0.5.2 → 0.5.4

package/README.md

@@ -61,7 +61,7 @@ will create a set of files: `index.js`, `dsp-module.wasm`, `dsp-meta.json`, `ind
 
 #### Creating a Progressive Web Application (PWA) of a Faust DSP
 
-You can create a standalone Progressive Web Application using the same command line:
+You can create a standalone Progressive Web Application using the command line:
 
 ```bash
 node scripts/faust2wasm.js test/rev.dsp test/rev -pwa
@@ -79,7 +79,7 @@ will create a set of files: `icon.png`, `service-worker.js`, `manifest.json`, `i
 
 #### Creating a standalone version of a Faust DSP, with audio and MIDI devices selector
 
-You can create a standalone  using the same command line:
+You can create a standalone using the command line:
 
 ```bash
 node scripts/faust2wasm.js test/rev.dsp test/rev -standalone

package/assets/standalone/create-node.js

@@ -51,6 +51,7 @@ const createFaustNode = async (audioContext, dspName = "template", voices = 0, s
             faustDsp.effectModule = await WebAssembly.compileStreaming(await fetch("./effect-module.wasm"));
         }
 
+        // Create a polyphonic Faust audio node
         const generator = new FaustPolyDspGenerator();
         faustNode = await generator.createNode(
             audioContext,
@@ -62,6 +63,7 @@ const createFaustNode = async (audioContext, dspName = "template", voices = 0, s
             sp
         );
     } else {
+        // Create a standard Faust audio node
         const generator = new FaustMonoDspGenerator();
         faustNode = await generator.createNode(
             audioContext,
@@ -81,10 +83,11 @@ const createFaustNode = async (audioContext, dspName = "template", voices = 0, s
  * @param {AudioContext} audioContext - The Web Audio API AudioContext to which the Faust audio node is connected.
  * @param {string} id - The ID of the audio input device to connect.
  * @param {FaustNode} faustNode - The Faust audio node to which the audio input stream will be connected.
- * @param {MediaStreamAudioSourceNode} inputStreamNode - The audio input stream node to be connected to the Faust audio node.
+ * @param {MediaStreamAudioSourceNode} inputStreamNode - The audio input stream node to be disconnected from the Faust audio node.
  * @returns {Promise<MediaStreamAudioSourceNode>} - The audio input stream node connected to the Faust audio node.
  */
 async function connectToAudioInput(audioContext, id, faustNode, inputStreamNode) {
+    // Create an audio input stream node
     const constraints = {
         audio: {
             echoCancellation: false,
@@ -93,6 +96,7 @@ async function connectToAudioInput(audioContext, id, faustNode, inputStreamNode)
             deviceId: id ? { exact: id } : undefined,
         },
     };
+    // Get the audio input stream
     const stream = await navigator.mediaDevices.getUserMedia(constraints);
     if (stream) {
         if (inputStreamNode) inputStreamNode.disconnect();
@@ -102,4 +106,33 @@ async function connectToAudioInput(audioContext, id, faustNode, inputStreamNode)
     return inputStreamNode;
 };
 
-export { createFaustNode, connectToAudioInput };
+/**
+ * @param {FaustAudioWorkletNode} faustNode 
+ */
+async function createFaustUI(divFaustUI, faustNode) {
+    const { FaustUI } = await import("./faust-ui/index.js");
+    const $container = document.createElement("div");
+    $container.style.margin = "0";
+    $container.style.position = "absolute";
+    $container.style.overflow = "auto";
+    $container.style.display = "flex";
+    $container.style.flexDirection = "column";
+    $container.style.width = "100%";
+    $container.style.height = "100%";
+    divFaustUI.appendChild($container);
+    const faustUI = new FaustUI({
+        ui: faustNode.getUI(),
+        root: $container,
+        listenWindowMessage: false,
+        listenWindowResize: true,
+    });
+    faustUI.paramChangeByUI = (path, value) => faustNode.setParamValue(path, value);
+    faustNode.setOutputParamHandler((path, value) => faustUI.paramChangeByDSP(path, value));
+    $container.style.minWidth = `${faustUI.minWidth}px`;
+    $container.style.minHeight = `${faustUI.minHeight}px`;
+    faustUI.resize();
+};
+
+// Export the functions
+export { createFaustNode, createFaustUI, connectToAudioInput };
+

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

@@ -244,12 +244,13 @@
   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;

package/assets/standalone/faust-ui/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;EACI;EACA;EACA;EACA;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;AAGZ;AAAI;EACI;AAER,C;;;;ACvBA;EACI;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;AAGZ;AAFY;EACI;EACA;EACA;EACA;EACA;AAIhB;AADQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGZ;AAFY;EAEI;EACA;AAGhB,C;;;;AC3CI;EACI;AAAR;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;EACA;EACA;EACA;AACZ;AAAY;EACI;EACA;EACA;EACA;EACA;AAEhB;AACQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACZ;AAAY;EAEI;EACA;AAChB,C;;;;ACzCA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EAEI;AAEZ,C;;;;ACZI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACZI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACbI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACdA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EAEI;EACA;AAEZ,C;;;;AC3BA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER,C;;;;ACVA;EACI;AACJ;AAAI;EACI;EACA;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;AAGZ,C;;;;ACnBA;EACI;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;EACA;AAGZ,C;;;;AClBA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAER,C;;;;ACdA;EACI;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;AAGZ;AAFY;EACI;EACA;EACA;EACA;EACA;AAIhB;AADQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGZ,C;;;;ACtCI;EACI;AAAR;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;EACA;EACA;EACA;AACZ;AAAY;EACI;EACA;EACA;EACA;EACA;AAEhB;AACQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACZ,C;;;;ACnCA;EACI;EACA;EACA;EACA;EACA;AAAJ;AACI;EACI;EACA;EACA;EACA;AACR;AAAQ;EACI;EACA;EACA;EACA;AAEZ;AACI;EACI;EACA;EACA;EACA;AACR;AAAQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEZ;AADY;EACI;AAGhB;AADY;EACI;EACA;AAGhB,C;;;;AC3CA;EACI;EACA;EACA;EACA;EACA;EACA;AACJ,C","sources":["webpack://@shren/faust-ui/./src/components/Base.scss","webpack://@shren/faust-ui/./src/components/VSlider.scss","webpack://@shren/faust-ui/./src/components/HSlider.scss","webpack://@shren/faust-ui/./src/components/Nentry.scss","webpack://@shren/faust-ui/./src/components/Soundfile.scss","webpack://@shren/faust-ui/./src/components/Button.scss","webpack://@shren/faust-ui/./src/components/Checkbox.scss","webpack://@shren/faust-ui/./src/components/Knob.scss","webpack://@shren/faust-ui/./src/components/Menu.scss","webpack://@shren/faust-ui/./src/components/Radio.scss","webpack://@shren/faust-ui/./src/components/Led.scss","webpack://@shren/faust-ui/./src/components/Numerical.scss","webpack://@shren/faust-ui/./src/components/VBargraph.scss","webpack://@shren/faust-ui/./src/components/HBargraph.scss","webpack://@shren/faust-ui/./src/components/Group.scss","webpack://@shren/faust-ui/./src/index.scss"],"sourcesContent":[".faust-ui-component {\n    display: flex;\n    position: absolute;\n    flex-direction: column;\n    overflow: hidden;\n    &:focus {\n        outline: none;\n    }\n    & > .faust-ui-component-label {\n        position: relative;\n        margin-top: 4px;\n        width: 100%;\n        user-select: none;\n        & > canvas {\n            position: relative;\n            display: block;\n            max-width: 100%;\n            max-height: 100%;\n        }\n    }\n    & input {\n        box-shadow: none;\n    }\n}",".faust-ui-component.faust-ui-component-vslider {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-vslider-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            width: 100%;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & 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            &::-webkit-inner-spin-button, \n            &::-webkit-outer-spin-button {\n                -webkit-appearance: none;\n                margin: 0;\n            }\n        }\n    }\n}",".faust-ui-component.faust-ui-component-hslider {\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-hslider-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            height: 100%;\n            margin: auto;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & > 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            &::-webkit-inner-spin-button, \n            &::-webkit-outer-spin-button {\n                -webkit-appearance: none;\n                margin: 0;\n            }\n        }\n    }\n}\n",".faust-ui-component.faust-ui-component-nentry {\n    align-items: center;\n    & 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        &::-webkit-inner-spin-button, \n        &::-webkit-outer-spin-button {\n            opacity: 1;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-soundfile {\n    & > 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        & > span {\n            user-select: none;\n            margin: auto;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-button {\n    & > 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        & > span {\n            user-select: none;\n            margin: auto;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-checkbox {\n    & > 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        & > span {\n            margin: auto;\n            user-select: none;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-knob {\n    align-items: center;\n    & > 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    & > 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        &::-webkit-inner-spin-button, \n        &::-webkit-outer-spin-button {\n            -webkit-appearance: none;\n            margin: 0;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-menu {\n    align-items: center;\n    & > 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}",".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}",".faust-ui-component.faust-ui-component-led {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .faust-ui-component-led-canvasdiv {\n        position: relative;\n        display: block;\n        flex: 1 1 auto;\n        width: 100%;\n        & > canvas {\n            position: absolute;\n            display: block;\n            height: 100%;\n            width: 100%;\n            touch-action: none;\n        }\n    }\n}\n",".faust-ui-component.faust-ui-component-numerical {\n    align-items: center;\n    & > 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}",".faust-ui-component.faust-ui-component-vbargraph {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-vbargraph-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            width: 100%;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & > 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}\n",".faust-ui-component.faust-ui-component-hbargraph {\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-hbargraph-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            height: 100%;\n            margin: auto;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & > 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}","\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    & > .faust-ui-group-label {\n        position: relative;\n        margin: 4px;\n        width: calc(100% - 8px);\n        user-select: none;\n        & > canvas {\n            position: relative;\n            display: block;\n            max-width: 100%;\n            max-height: 100%;\n        }\n    }\n    & .faust-ui-tgroup-tabs {\n        position: absolute;\n        display: inline-block;\n        white-space: nowrap;\n        left: 0px;\n        & .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            &:hover {\n                background-color: rgba(255, 255, 255, 1);\n            }\n            &.active {\n                background-color: rgba(40, 40, 40, 1);\n                color: white;\n            }\n        }\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}"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AAAA;EACI;EACA;EACA;EACA;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;AAGZ;AAAI;EACI;AAER,C;;;;ACvBA;EACI;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;AAGZ;AAFY;EACI;EACA;EACA;EACA;EACA;AAIhB;AADQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGZ;AAFY;EAEI;EACA;AAGhB,C;;;;AC3CI;EACI;AAAR;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;EACA;EACA;EACA;AACZ;AAAY;EACI;EACA;EACA;EACA;EACA;AAEhB;AACQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACZ;AAAY;EAEI;EACA;AAChB,C;;;;ACzCA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EAEI;AAEZ,C;;;;ACZI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACZI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACbI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACdA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EAEI;EACA;AAEZ,C;;;;AC3BA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER,C;;;;ACVA;EACI;AACJ;AAAI;EACI;EACA;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;AAGZ,C;;;;ACpBA;EACI;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;EACA;AAGZ,C;;;;AClBA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAER,C;;;;ACdA;EACI;AACJ;AAAI;EACI;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EACI;EACA;EACA;EACA;AAGZ;AAFY;EACI;EACA;EACA;EACA;EACA;AAIhB;AADQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGZ,C;;;;ACtCI;EACI;AAAR;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;EACA;EACA;EACA;AACZ;AAAY;EACI;EACA;EACA;EACA;EACA;AAEhB;AACQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACZ,C;;;;ACnCA;EACI;EACA;EACA;EACA;EACA;AAAJ;AACI;EACI;EACA;EACA;EACA;AACR;AAAQ;EACI;EACA;EACA;EACA;AAEZ;AACI;EACI;EACA;EACA;EACA;AACR;AAAQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEZ;AADY;EACI;AAGhB;AADY;EACI;EACA;AAGhB,C;;;;AC3CA;EACI;EACA;EACA;EACA;EACA;EACA;AACJ,C","sources":["webpack://@shren/faust-ui/./src/components/Base.scss","webpack://@shren/faust-ui/./src/components/VSlider.scss","webpack://@shren/faust-ui/./src/components/HSlider.scss","webpack://@shren/faust-ui/./src/components/Nentry.scss","webpack://@shren/faust-ui/./src/components/Soundfile.scss","webpack://@shren/faust-ui/./src/components/Button.scss","webpack://@shren/faust-ui/./src/components/Checkbox.scss","webpack://@shren/faust-ui/./src/components/Knob.scss","webpack://@shren/faust-ui/./src/components/Menu.scss","webpack://@shren/faust-ui/./src/components/Radio.scss","webpack://@shren/faust-ui/./src/components/Led.scss","webpack://@shren/faust-ui/./src/components/Numerical.scss","webpack://@shren/faust-ui/./src/components/VBargraph.scss","webpack://@shren/faust-ui/./src/components/HBargraph.scss","webpack://@shren/faust-ui/./src/components/Group.scss","webpack://@shren/faust-ui/./src/index.scss"],"sourcesContent":[".faust-ui-component {\n    display: flex;\n    position: absolute;\n    flex-direction: column;\n    overflow: hidden;\n    &:focus {\n        outline: none;\n    }\n    & > .faust-ui-component-label {\n        position: relative;\n        margin-top: 4px;\n        width: 100%;\n        user-select: none;\n        & > canvas {\n            position: relative;\n            display: block;\n            max-width: 100%;\n            max-height: 100%;\n        }\n    }\n    & input {\n        box-shadow: none;\n    }\n}",".faust-ui-component.faust-ui-component-vslider {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-vslider-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            width: 100%;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & 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            &::-webkit-inner-spin-button, \n            &::-webkit-outer-spin-button {\n                -webkit-appearance: none;\n                margin: 0;\n            }\n        }\n    }\n}",".faust-ui-component.faust-ui-component-hslider {\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-hslider-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            height: 100%;\n            margin: auto;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & > 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            &::-webkit-inner-spin-button, \n            &::-webkit-outer-spin-button {\n                -webkit-appearance: none;\n                margin: 0;\n            }\n        }\n    }\n}\n",".faust-ui-component.faust-ui-component-nentry {\n    align-items: center;\n    & 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        &::-webkit-inner-spin-button, \n        &::-webkit-outer-spin-button {\n            opacity: 1;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-soundfile {\n    & > 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        & > span {\n            user-select: none;\n            margin: auto;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-button {\n    & > 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        & > span {\n            user-select: none;\n            margin: auto;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-checkbox {\n    & > 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        & > span {\n            margin: auto;\n            user-select: none;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-knob {\n    align-items: center;\n    & > 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    & > 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        &::-webkit-inner-spin-button, \n        &::-webkit-outer-spin-button {\n            -webkit-appearance: none;\n            margin: 0;\n        }\n    }\n}",".faust-ui-component.faust-ui-component-menu {\n    align-items: center;\n    & > 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}",".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}",".faust-ui-component.faust-ui-component-led {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .faust-ui-component-led-canvasdiv {\n        position: relative;\n        display: block;\n        flex: 1 1 auto;\n        width: 100%;\n        & > canvas {\n            position: absolute;\n            display: block;\n            height: 100%;\n            width: 100%;\n            touch-action: none;\n        }\n    }\n}\n",".faust-ui-component.faust-ui-component-numerical {\n    align-items: center;\n    & > 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}",".faust-ui-component.faust-ui-component-vbargraph {\n    align-items: center;\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-vbargraph-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            width: 100%;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & > 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}\n",".faust-ui-component.faust-ui-component-hbargraph {\n    & > .faust-ui-component-label {\n        flex: 0 0 auto;\n    }\n    & > .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        & > .faust-ui-component-hbargraph-canvasdiv {\n            position: relative;\n            display: block;\n            flex: 1 1 auto;\n            height: 100%;\n            margin: auto;\n            & > canvas {\n                position: absolute;\n                display: block;\n                height: 100%;\n                width: 100%;\n                touch-action: none;\n            }\n        }\n        & > 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}","\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    & > .faust-ui-group-label {\n        position: relative;\n        margin: 4px;\n        width: calc(100% - 8px);\n        user-select: none;\n        & > canvas {\n            position: relative;\n            display: block;\n            max-width: 100%;\n            max-height: 100%;\n        }\n    }\n    & .faust-ui-tgroup-tabs {\n        position: absolute;\n        display: inline-block;\n        white-space: nowrap;\n        left: 0px;\n        & .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            &:hover {\n                background-color: rgba(255, 255, 255, 1);\n            }\n            &.active {\n                background-color: rgba(40, 40, 40, 1);\n                color: white;\n            }\n        }\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}"],"names":[],"sourceRoot":""}