@grame/faustwasm 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grame/faustwasm",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "description": "WebAssembly version of Faust Compiler",
   "main": "dist/cjs/index.js",
   "types": "dist/esm/index.d.ts",
@@ -39,9 +39,11 @@
   "homepage": "https://github.com/grame-cncm/faustwasm#readme",
   "devDependencies": {
     "@aws-crypto/sha256-js": "^5.2.0",
-    "@shren/faust-ui": "^1.1.11",
+    "@shren/faust-ui": "^1.1.12",
     "@types/node": "^20.12.7",
     "@types/webmidi": "^2.0.10",
+    "@webaudiomodules/api": "^2.0.0-alpha.6",
+    "@webaudiomodules/sdk-parammgr": "^0.0.13",
     "dts-bundle-generator": "^9.5.1",
     "esbuild": "^0.20.2",
     "typescript": "^5.4.5"

package/src/FaustAudioWorkletNode.ts

@@ -18,7 +18,7 @@ export class FaustAudioWorkletNode<Poly extends boolean = false> extends (global
     #hasAccInput = false;
     #hasGyrInput = false;
 
-    constructor(context: BaseAudioContext, name: string, factory: LooseFaustDspFactory, options: FaustAudioWorkletNodeOptions<Poly>["processorOptions"], nodeOptions: Partial<FaustAudioWorkletNodeOptions> = {}) {
+    constructor(context: BaseAudioContext, name: string, factory: LooseFaustDspFactory, options: Partial<FaustAudioWorkletNodeOptions<Poly>> = {}) {
 
         // Create JSON object
         const JSONObj: FaustDspMeta = JSON.parse(factory.json);
@@ -31,8 +31,8 @@ export class FaustAudioWorkletNode<Poly extends boolean = false> extends (global
             outputChannelCount: [JSONObj.outputs],
             channelCountMode: "explicit",
             channelInterpretation: "speakers",
-            processorOptions: options,
-            ...nodeOptions
+            processorOptions: options.processorOptions,
+            ...options
         });
 
         this.fJSONDsp = JSONObj;
@@ -156,6 +156,9 @@ export class FaustAudioWorkletNode<Poly extends boolean = false> extends (global
     getPlotHandler(): PlotHandler | null {
         return this.fPlotHandler;
     }
+    setupWamEventHandler() {
+        this.port.postMessage({ type: "setupWamEventHandler" });
+    }
 
     getNumInputs() {
         return this.fJSONDsp.inputs;
@@ -252,8 +255,8 @@ export class FaustMonoAudioWorkletNode extends FaustAudioWorkletNode<false> impl
         throw e;
     }
 
-    constructor(context: BaseAudioContext, name: string, factory: LooseFaustDspFactory, sampleSize: number, nodeOptions: Partial<FaustAudioWorkletNodeOptions> = {}) {
-        super(context, name, factory, { name, factory, sampleSize }, nodeOptions);
+    constructor(context: BaseAudioContext, options: Partial<FaustAudioWorkletNodeOptions<false>> & Pick<FaustAudioWorkletNodeOptions<false>, "processorOptions">) {
+        super(context, options.processorOptions.name, options.processorOptions.factory, options);
     }
 }
 
@@ -269,30 +272,16 @@ export class FaustPolyAudioWorkletNode extends FaustAudioWorkletNode<true> imple
         throw e;
     }
 
-    constructor(context: BaseAudioContext,
-        name: string,
-        voiceFactory: LooseFaustDspFactory,
-        mixerModule: WebAssembly.Module,
-        voices: number,
-        sampleSize: number,
-        effectFactory?: LooseFaustDspFactory, nodeOptions: Partial<FaustAudioWorkletNodeOptions> = {}) {
+    constructor(context: BaseAudioContext, options: Partial<FaustAudioWorkletNodeOptions<true>> & Pick<FaustAudioWorkletNodeOptions<true>, "processorOptions">) {
 
         super(
             context,
-            name,
-            voiceFactory,
-            {
-                name,
-                voiceFactory,
-                mixerModule,
-                voices,
-                sampleSize,
-                effectFactory
-            },
-            nodeOptions
+            options.processorOptions.name,
+            options.processorOptions.voiceFactory,
+            options
         );
 
-        this.fJSONEffect = effectFactory ? JSON.parse(effectFactory.json) : null;
+        this.fJSONEffect = options.processorOptions.effectFactory ? JSON.parse(options.processorOptions.effectFactory.json) : null;
 
         if (this.fJSONEffect) {
             FaustBaseWebAudioDsp.parseUI(this.fJSONEffect.ui, this.fUICallback);

package/src/FaustAudioWorkletProcessor.ts

@@ -1,6 +1,7 @@
 import type FaustWasmInstantiator from "./FaustWasmInstantiator";
 import type { FaustBaseWebAudioDsp, FaustWebAudioDspVoice, FaustMonoWebAudioDsp, FaustPolyWebAudioDsp } from "./FaustWebAudioDsp";
-import type { AudioParamDescriptor, AudioWorkletGlobalScope, LooseFaustDspFactory, FaustDspMeta, FaustUIItem, AudioWorkletProcessor } from "./types";
+import type { AudioParamDescriptor, AudioWorkletGlobalScope, LooseFaustDspFactory, FaustDspMeta, FaustUIItem } from "./types";
+import type { AudioWorkletGlobalScope as WamAudioWorkletGlobalScope, WamParamMgrSDKBaseModuleScope } from "@webaudiomodules/sdk-parammgr";
 
 /**
  * Injected in the string to be compiled on AudioWorkletProcessor side
@@ -31,6 +32,9 @@ export interface FaustPolyAudioWorkletNodeOptions extends AudioWorkletNodeOption
 export interface FaustAudioWorkletProcessorOptions {
     name: string;
     sampleSize: number;
+    // for WAMs
+    moduleId?: string;
+    instanceId?: string;
 }
 export interface FaustMonoAudioWorkletProcessorOptions extends FaustAudioWorkletProcessorOptions {
     factory: LooseFaustDspFactory;
@@ -82,6 +86,8 @@ const getFaustAudioWorkletProcessor = <Poly extends boolean = false>(dependencie
 
         protected paramValuesCache: Record<string, number> = {};
 
+        protected wamInfo?: { moduleId: string; instanceId: string };
+
         constructor(options: FaustAudioWorkletNodeOptions<Poly>) {
             super(options);
 
@@ -92,6 +98,10 @@ const getFaustAudioWorkletProcessor = <Poly extends boolean = false>(dependencie
             parameterDescriptors.forEach((pd) => {
                 this.paramValuesCache[pd.name] = pd.defaultValue || 0;
             })
+            
+            const { moduleId, instanceId } = options.processorOptions;
+            if (!moduleId || !instanceId) return;
+            this.wamInfo = { moduleId, instanceId };
         }
 
         static get parameterDescriptors() {
@@ -107,6 +117,19 @@ const getFaustAudioWorkletProcessor = <Poly extends boolean = false>(dependencie
             return params;
         }
 
+        setupWamEventHandler() {
+            if (!this.wamInfo) return;
+            const { moduleId, instanceId } = this.wamInfo;
+	        const { webAudioModules } = (globalThis as unknown as WamAudioWorkletGlobalScope);
+            const ModuleScope = webAudioModules.getModuleScope(moduleId) as WamParamMgrSDKBaseModuleScope;
+            const paramMgrProcessor = ModuleScope?.paramMgrProcessors?.[instanceId];
+            if (!paramMgrProcessor) return;
+            if (paramMgrProcessor.handleEvent) return;
+            paramMgrProcessor.handleEvent = (event) => {
+                if (event.type === "wam-midi") this.midiMessage(event.data.bytes);
+            };
+        }
+
         process(inputs: Float32Array[][], outputs: Float32Array[][], parameters: { [key: string]: Float32Array }) {
 
             // Update controls (possibly needed for sample accurate control)
@@ -162,6 +185,10 @@ const getFaustAudioWorkletProcessor = <Poly extends boolean = false>(dependencie
                     }
                     break;
                 }
+                case "setupWamEventHandler": {
+                    this.setupWamEventHandler();
+                    break;
+                }
                 case "start": {
                     this.fDSPCode.start();
                     break;

package/src/FaustDspGenerator.ts

@@ -52,6 +52,7 @@ export interface IFaustMonoDspGenerator extends GeneratorSupportingSoundfiles {
      * @param sp - whether to compile a ScriptProcessorNode or an AudioWorkletNode
      * @param bufferSize - the buffer size in frames to be used in ScriptProcessorNode only, since AudioWorkletNode always uses 128 frames
      * @param processorName - AudioWorklet Processor name
+     * @param processorOptions - Additional AudioWorklet Processor options
      * @returns the compiled WebAudio node or 'null' if failure
      */
     createNode(
@@ -60,7 +61,8 @@ export interface IFaustMonoDspGenerator extends GeneratorSupportingSoundfiles {
         factory?: LooseFaustDspFactory,
         sp?: boolean,
         bufferSize?: number,
-        processorName?: string
+        processorName?: string,
+        processorOptions?: Record<string, any>
     ): Promise<IFaustMonoWebAudioNode | null>;
 
     /**
@@ -72,6 +74,7 @@ export interface IFaustMonoDspGenerator extends GeneratorSupportingSoundfiles {
      * @param factory - default is the compiled factory
      * @param fftOptions - initial FFT options
      * @param processorName - AudioWorklet Processor name
+     * @param processorOptions - Additional AudioWorklet Processor options
      * @returns the compiled WebAudio node or 'null' if failure
      */
     createFFTNode(
@@ -80,7 +83,8 @@ export interface IFaustMonoDspGenerator extends GeneratorSupportingSoundfiles {
         name?: string,
         factory?: LooseFaustDspFactory,
         fftOptions?: Partial<FaustFFTOptionsData>,
-        processorName?: string
+        processorName?: string,
+        processorOptions?: Record<string, any>
     ): Promise<FaustMonoAudioWorkletNode | null>;
 
     /**
@@ -148,6 +152,7 @@ export interface IFaustPolyDspGenerator extends GeneratorSupportingSoundfiles {
      * @param effectFactory - the Faust factory for the effect, either obtained with a compiler (createDSPFactory) or loaded from files (loadDSPFactory)
      * @param sp - whether to compile a ScriptProcessorNode or an AudioWorkletNode
      * @param bufferSize - the buffer size in frames to be used in ScriptProcessorNode only, since AudioWorkletNode always uses 128 frames
+     * @param processorOptions - Additional AudioWorklet Processor options
      * @returns the compiled WebAudio node or 'null' if failure
      */
     createNode(
@@ -159,7 +164,8 @@ export interface IFaustPolyDspGenerator extends GeneratorSupportingSoundfiles {
         effectFactory?: LooseFaustDspFactory | null,
         sp?: boolean,
         bufferSize?: number,
-        processorName?: string
+        processorName?: string,
+        processorOptions?: Record<string, any>
     ): Promise<IFaustPolyWebAudioNode | null>;
 
     /**
@@ -244,7 +250,8 @@ export class FaustMonoDspGenerator implements IFaustMonoDspGenerator {
         factory = this.factory as LooseFaustDspFactory,
         sp = false as SP,
         bufferSize = 1024,
-        processorName = factory?.shaKey || name
+        processorName = factory?.shaKey || name,
+        processorOptions: Record<string, any> = {}
     ): Promise<SP extends true ? FaustMonoScriptProcessorNode | null : FaustMonoAudioWorkletNode | null> {
         if (!factory) throw new Error("Code is not compiled, please define the factory or call `await this.compile()` first.");
 
@@ -307,7 +314,7 @@ const dependencies = {
                 }
             }
             // Create the AWN
-            const node = new FaustMonoAudioWorkletNode(context, processorName, factory, sampleSize);
+            const node = new FaustMonoAudioWorkletNode(context, { processorOptions: { name: processorName, factory, sampleSize, ...processorOptions } });
 
             return node as SP extends true ? FaustMonoScriptProcessorNode : FaustMonoAudioWorkletNode;
         }
@@ -319,7 +326,8 @@ const dependencies = {
         name = this.name,
         factory = this.factory as LooseFaustDspFactory,
         fftOptions: Partial<FaustFFTOptionsData> = {},
-        processorName = factory?.shaKey ? `${factory.shaKey}_fft` : name
+        processorName = factory?.shaKey ? `${factory.shaKey}_fft` : name,
+        processorOptions: Record<string, any> = {}
     ): Promise<FaustMonoAudioWorkletNode | null> {
         if (!factory) throw new Error("Code is not compiled, please define the factory or call `await this.compile()` first.");
 
@@ -375,7 +383,7 @@ const dependencies = {
             }
         }
         // Create the AWN
-        const node = new FaustMonoAudioWorkletNode(context, processorName, factory, sampleSize, { channelCount: Math.max(1, Math.ceil(meta.inputs / 3)), outputChannelCount: [Math.ceil(meta.outputs / 2)] });
+        const node = new FaustMonoAudioWorkletNode(context, { channelCount: Math.max(1, Math.ceil(meta.inputs / 3)), outputChannelCount: [Math.ceil(meta.outputs / 2)], processorOptions: { name: processorName, factory, sampleSize, ...processorOptions } });
         if (fftOptions.fftSize) {
             const param = node.parameters.get("fftSize");
             if (param) param.value = fftOptions.fftSize;
@@ -573,7 +581,8 @@ process = adaptorIns(dsp_code.process) : dsp_code.effect : adaptorOuts;
         effectFactory = this.effectFactory as LooseFaustDspFactory | null,
         sp = false as SP,
         bufferSize = 1024,
-        processorName = ((voiceFactory?.shaKey || "") + (effectFactory?.shaKey || "")) || `${name}_poly`
+        processorName = ((voiceFactory?.shaKey || "") + (effectFactory?.shaKey || "")) || `${name}_poly`,
+        processorOptions = {}
     ): Promise<SP extends true ? FaustPolyScriptProcessorNode | null : FaustPolyAudioWorkletNode | null> {
         if (!voiceFactory) throw new Error("Code is not compiled, please define the factory or call `await this.compile()` first.");
 
@@ -642,7 +651,7 @@ const dependencies = {
                 }
             }
             // Create the AWN
-            const node = new FaustPolyAudioWorkletNode(context, processorName, voiceFactory, mixerModule, voices, sampleSize, effectFactory || undefined);
+            const node = new FaustPolyAudioWorkletNode(context, { processorOptions: { name: processorName, voiceFactory, mixerModule, voices, sampleSize, effectFactory: effectFactory || undefined, ...processorOptions } });
 
             return node as SP extends true ? FaustPolyScriptProcessorNode : FaustPolyAudioWorkletNode;
         }

package/src/FaustFFTAudioWorkletProcessor.ts

@@ -2,6 +2,7 @@ import type { FaustMonoDspInstance } from "./FaustDspInstance";
 import type FaustWasmInstantiator from "./FaustWasmInstantiator";
 import type { FaustBaseWebAudioDsp, FaustMonoWebAudioDsp, PlotHandler } from "./FaustWebAudioDsp";
 import type { AudioParamDescriptor, AudioWorkletGlobalScope, LooseFaustDspFactory, FaustDspMeta, FaustUIItem, InterfaceFFT, TWindowFunction, Writeable, TypedArray, FFTUtils } from "./types";
+import type { AudioWorkletGlobalScope as WamAudioWorkletGlobalScope, WamParamMgrSDKBaseModuleScope } from "@webaudiomodules/sdk-parammgr";
 
 export interface FaustFFTOptionsData {
     fftSize: number;
@@ -33,6 +34,9 @@ export interface FaustFFTAudioWorkletProcessorOptions {
     name: string;
     sampleSize: number;
     factory: LooseFaustDspFactory;
+    // for WAMs
+    moduleId?: string;
+    instanceId?: string;
 }
 
 
@@ -122,6 +126,8 @@ const getFaustFFTAudioWorkletProcessor = (dependencies: FaustFFTAudioWorkletProc
 
         protected paramValuesCache: Record<string, number> = {};
 
+        protected wamInfo?: { moduleId: string; instanceId: string };
+
         private dspInstance!: FaustMonoDspInstance;
         private sampleSize!: number;
 
@@ -187,6 +193,10 @@ const getFaustFFTAudioWorkletProcessor = (dependencies: FaustFFTAudioWorkletProc
 
             // Init the FFT constructor and the Faust FFT Processor
             this.initFFT();
+
+            const { moduleId, instanceId } = options.processorOptions;
+            if (!moduleId || !instanceId) return;
+            this.wamInfo = { moduleId, instanceId };
         }
 
         async initFFT(): Promise<true> {
@@ -232,6 +242,19 @@ const getFaustFFTAudioWorkletProcessor = (dependencies: FaustFFTAudioWorkletProc
             ];
         }
 
+        setupWamEventHandler() {
+            if (!this.wamInfo) return;
+            const { moduleId, instanceId } = this.wamInfo;
+	        const { webAudioModules } = (globalThis as unknown as WamAudioWorkletGlobalScope);
+            const ModuleScope = webAudioModules.getModuleScope(moduleId) as WamParamMgrSDKBaseModuleScope;
+            const paramMgrProcessor = ModuleScope?.paramMgrProcessors?.[instanceId];
+            if (!paramMgrProcessor) return;
+            if (paramMgrProcessor.handleEvent) return;
+            paramMgrProcessor.handleEvent = (event) => {
+                if (event.type === "wam-midi") this.midiMessage(event.data.bytes);
+            };
+        }
+
         processFFT() {
             // Get the number of samples that need to proceed, from the input r/w pointers
             let samplesForFFT = mod(this.$inputWrite - this.$inputRead, this.fftBufferSize) || this.fftBufferSize;
@@ -400,6 +423,10 @@ const getFaustFFTAudioWorkletProcessor = (dependencies: FaustFFTAudioWorkletProc
                     this.fDSPCode?.setPlotHandler(this.fPlotHandler);
                     break;
                 }
+                case "setupWamEventHandler": {
+                    this.setupWamEventHandler();
+                    break;
+                }
                 case "start": {
                     this.fDSPCode?.start();
                     break;

package/src/instantiateFaustModule.js

@@ -0,0 +1,82 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.FaustModuleFactoryData = exports.FaustModuleFactoryWasm = exports.FaustModuleFactoryFn = void 0;
+var libfaust_wasm_cjs_1 = require("../libfaust-wasm/libfaust-wasm.cjs");
+var libfaust_wasm_wasm_1 = require("../libfaust-wasm/libfaust-wasm.wasm");
+var libfaust_wasm_data_1 = require("../libfaust-wasm/libfaust-wasm.data");
+exports.FaustModuleFactoryFn = libfaust_wasm_cjs_1["default"];
+exports.FaustModuleFactoryWasm = libfaust_wasm_wasm_1["default"];
+exports.FaustModuleFactoryData = libfaust_wasm_data_1["default"];
+/**
+ * Instantiate `FaustModule` using bundled binaries. Module constructor and files can be overriden.
+ */
+var instantiateFaustModule = function (FaustModuleFactoryIn, dataBinaryIn, wasmBinaryIn) {
+    if (FaustModuleFactoryIn === void 0) { FaustModuleFactoryIn = libfaust_wasm_cjs_1["default"]; }
+    if (dataBinaryIn === void 0) { dataBinaryIn = libfaust_wasm_data_1["default"]; }
+    if (wasmBinaryIn === void 0) { wasmBinaryIn = libfaust_wasm_wasm_1["default"]; }
+    return __awaiter(void 0, void 0, void 0, function () {
+        var g, faustModule;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    g = globalThis;
+                    if (g.AudioWorkletGlobalScope) {
+                        g.importScripts = function () { };
+                        g.self = { location: { href: "" } };
+                    }
+                    return [4 /*yield*/, FaustModuleFactoryIn({
+                            wasmBinary: wasmBinaryIn,
+                            getPreloadedPackage: function (remotePackageName, remotePackageSize) {
+                                if (remotePackageName === "libfaust-wasm.data")
+                                    return dataBinaryIn.buffer;
+                                return new ArrayBuffer(0);
+                            }
+                        })];
+                case 1:
+                    faustModule = _a.sent();
+                    if (g.AudioWorkletGlobalScope) {
+                        delete g.importScripts;
+                        delete g.self;
+                    }
+                    return [2 /*return*/, faustModule];
+            }
+        });
+    });
+};
+exports["default"] = instantiateFaustModule;

package/test/faustlive-wasm/faust-ui/index.css

@@ -53,6 +53,7 @@
   display: block;
   height: 100%;
   width: 100%;
+  touch-action: none;
 }
 .faust-ui-component.faust-ui-component-vslider > .faust-ui-component-vslider-flexdiv input {
   position: relative;
@@ -98,6 +99,7 @@
   display: block;
   height: 100%;
   width: 100%;
+  touch-action: none;
 }
 .faust-ui-component.faust-ui-component-hslider > .faust-ui-component-hslider-flexdiv > input {
   position: relative;
@@ -162,6 +164,7 @@
   border-radius: 4px;
   flex: 1 0 auto;
   border-style: solid;
+  touch-action: none;
 }
 .faust-ui-component.faust-ui-component-button > div > span {
   user-select: none;
@@ -179,6 +182,7 @@
   border-radius: 1px;
   flex: 1 0 auto;
   border-style: solid;
+  touch-action: none;
 }
 .faust-ui-component.faust-ui-component-checkbox > div > span {
   margin: auto;
@@ -196,6 +200,7 @@
   flex: 1 1 auto;
   min-height: 50%;
   width: 100%;
+  touch-action: none;
 }
 .faust-ui-component.faust-ui-component-knob > input {
   position: relative;
@@ -271,6 +276,7 @@
   display: block;
   height: 100%;
   width: 100%;
+  touch-action: none;
 }
 /*!************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/Numerical.scss ***!
@@ -318,6 +324,7 @@
   display: block;
   height: 100%;
   width: 100%;
+  touch-action: none;
 }
 .faust-ui-component.faust-ui-component-vbargraph > .faust-ui-component-vbargraph-flexdiv > input {
   position: relative;
@@ -358,6 +365,7 @@
   display: block;
   height: 100%;
   width: 100%;
+  touch-action: none;
 }
 .faust-ui-component.faust-ui-component-hbargraph > .faust-ui-component-hbargraph-flexdiv > input {
   position: relative;

package/test/faustlive-wasm/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;AAIhB;AADQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGZ;AAFY;EAEI;EACA;AAGhB,C;;;;AC1CI;EACI;AAAR;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;EACA;EACA;EACA;AACZ;AAAY;EACI;EACA;EACA;EACA;AAEhB;AACQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACZ;AAAY;EAEI;EACA;AAChB,C;;;;ACxCA;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;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACZI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;AACZ,C;;;;ACbA;EACI;AACJ;AAAI;EACI;EACA;EACA;EACA;EACA;AAER;AAAI;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAER;AADQ;EAEI;EACA;AAEZ,C;;;;AC1BA;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;AAGZ,C;;;;ACjBA;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;AAIhB;AADQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAGZ,C;;;;ACrCI;EACI;AAAR;AAEI;EACI;EACA;EACA;EACA;EACA;EACA;AAAR;AACQ;EACI;EACA;EACA;EACA;EACA;AACZ;AAAY;EACI;EACA;EACA;EACA;AAEhB;AACQ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACZ,C;;;;AClCA;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            }\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            }\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        & > 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        & > 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    }\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        }\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            }\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            }\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;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":""}