(()=>{"use strict";var e={305:(e,n,t)=>{t.d(n,{v:()=>_n});var o={};function r(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function a(e){for(var n=1;nqe,set:()=>Fe});var c=new Map;function l(e){var n=c.get(e);return void 0===n&&(n=e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),c.set(e,n)),n}function d(e,n){var t=window.ShadyCSS;return t&&!t.nativeShadow?e(t):n}function u(e){return"<".concat(String(e.tagName).toLowerCase(),">")}var s="ActiveXObject"in window,f=Promise.resolve(),p=new WeakMap;function b(e){return(b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var v=function(e){return e},h=function(e){if("object"!==b(e))throw TypeError("Assigned value must be an object: ".concat(b(e)));return e&&Object.freeze(e)};function m(e,n){var t=b(e),o=v;switch(t){case"string":o=String;break;case"number":o=Number;break;case"boolean":o=Boolean;break;case"function":e=(o=e)();break;case"object":e&&Object.freeze(e),o=h}return{get:function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e;return t},set:function(e,n,t){return o(n,t)},connect:"object"!==t&&"undefined"!==t?function(t,r,a){if(t[r]===e){var i=l(r);if(t.hasAttribute(i)){var c=t.getAttribute(i);t[r]=""===c&&o===Boolean||c}}return n&&n(t,r,a)}:n}}function g(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function y(e){for(var n=1;n1&&void 0!==arguments[1]?arguments[1]:{};if("function"!=typeof e)throw TypeError("The first argument must be a function: ".concat(x(e)));var t=y({shadowRoot:!0},n),o={mode:"open"};return"object"===x(t.shadowRoot)&&Object.assign(o,t.shadowRoot),{get:function(n){var r=e(n),a=n;return t.shadowRoot&&(n.shadowRoot||n.attachShadow(o),a=n.shadowRoot),function(){return r(n,a),a}},observe:function(e,n){n()}}}(a):{get:a}:"object"!==i||null===a||Array.isArray(a)?m(a):{get:a.get||G,set:a.set||!a.get&&G||void 0,connect:a.connect,observe:a.observe},Object.defineProperty(e.prototype,o,{get:function(){return T(this,o,r.get)},set:r.set&&function(e){!function(e,n,t,o){var r=_(e,n),a=t(e,o,r.value);a!==r.value&&(r.checksum=0,r.state+=1,r.value=a,I(r))}(this,o,r.set,e)},enumerable:!0,configurable:"production"!==X.env.NODE_ENV}),r.observe&&t.unshift((function(e){return D(e,o,r.get,r.observe)})),r.connect&&t.push((function(e){return r.connect(e,o,(function(){C(e,o)}))}))}))}if("production"!==X.env.NODE_ENV){var Z=function e(n,t){t(n),Array.from(n.children).forEach((function(n){return e(n,t)})),n.shadowRoot&&Array.from(n.shadowRoot.children).forEach((function(n){return e(n,t)}))},K=new Map;H=function(e,n){K.size||f.then((function(){Z(document.body,(function(e){if(K.has(e.constructor)){var n=K.get(e.constructor);e.disconnectedCallback(),Object.keys(e.constructor.hybrids).forEach((function(t){C(e,t,e.constructor.hybrids[t]!==n[t])})),e.connectedCallback()}})),K.clear()})),K.set(e,n)}}var Q=new WeakMap;function ee(e,n){var t=W(n);if("object"!==t&&"function"!==t)throw TypeError("Second argument must be an object or a function: ".concat(t));if(null!==e){var o=window.customElements.get(e);if("function"===t)return o!==n?window.customElements.define(e,n):o;if(o){if(o.hybrids===n)return o;if("production"!==X.env.NODE_ENV&&o.hybrids){Object.keys(o.hybrids).forEach((function(e){delete o.prototype[e]}));var r=o.hybrids;return J(o,n),H(o,r),o}throw Error("Element '".concat(e,"' already defined"))}}var a=function(e){!function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(n&&n.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),n&&B(e,n)}(a,e);var n,t,o,r=(n=a,function(){var e,t=q(n);if(F()){var o=q(this).constructor;e=Reflect.construct(t,arguments,o)}else e=t.apply(this,arguments);return L(this,e)});function a(){var e;!function(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}(this,a),e=r.call(this);for(var n=U.get(a),t=0;t1&&void 0!==arguments[1]?arguments[1]:new Set;return Array.isArray(e)?e.forEach((function(e){return n.add(e)})):null!==e&&"object"===pe(e)?Object.keys(e).forEach((function(t){return e[t]&&n.add(t)})):n.add(e),n}(t);be.set(n,r),r.forEach((function(e){n.classList.add(e),o.delete(e)})),o.forEach((function(e){n.classList.remove(e)}))}function he(e){return(he="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var me=new WeakMap;function ge(e,n,t){if(null===t||"object"!==he(t))throw TypeError("Style value must be an object in ".concat(u(n),":"),t);var o=me.get(n)||new Map,r=Object.keys(t).reduce((function(e,r){var a=l(r),i=t[r];return i||0===i?n.style.setProperty(a,i):n.style.removeProperty(a),e.set(a,i),o.delete(a),e}),new Map);o.forEach((function(e,t){n.style[t]=""})),me.set(n,r)}function ye(e,n,t){if("on"===n.substr(0,2))return o=n.substr(2),function(e,n,t,r){if(r){var a=fe.get(n);a&&n.removeEventListener(o,a.get(r),void 0!==r.options&&r.options)}if(t){if("function"!=typeof t)throw Error("Event listener must be a function: ".concat(se(t)));var i=fe.get(n);i||(i=new WeakMap,fe.set(n,i));var c=t.bind(null,e);i.set(t,c),n.addEventListener(o,c,void 0!==t.options&&t.options)}};var o;switch(e){case"class":return ve;case"style":return ge;default:return function(o,r,a){if(t||r instanceof SVGElement||!(n in r))if(!1===a||null==a)r.removeAttribute(e);else{var i=!0===a?"":String(a);r.setAttribute(e,i)}else r[n]!==a&&(r[n]=a)}}}function we(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var t=[],o=!0,r=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(o=(i=c.next()).done)&&(t.push(i.value),!n||t.length!==n);o=!0);}catch(e){r=!0,a=e}finally{try{o||null==c.return||c.return()}finally{if(r)throw a}}return t}}(e,n)||function(e,n){if(e){if("string"==typeof e)return xe(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(t):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?xe(e,n):void 0}}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function xe(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,o=new Array(n);t0&&void 0!==arguments[0]?arguments[0]:0;return"{{h-".concat($e,"-").concat(e,"}}")},ke=Ne("(\\d+)"),_e=new RegExp("^".concat(ke,"$")),Oe=new RegExp(ke,"g"),Ie="--".concat($e,"--"),Me=new RegExp(Ie,"g"),je=new WeakMap,Te="object"===Se(window.ShadyDOM)&&window.ShadyDOM.inUse?function(e){var n;return{get currentNode(){return n},nextNode:function(){if(void 0===n)n=e.childNodes[0];else if(n.childNodes.length)n=n.childNodes[0];else if(n.nextSibling)n=n.nextSibling;else{var t=n.parentNode;for(n=t.nextSibling;!n&&t!==e;)t=t.parentNode,n=t.nextSibling}return!!n}}}:function(e){return document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT,null,!1)},Ae=document.createElement("div"),Ce=new Map;function De(e,n){var t=Ne(n),o=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=(e=e.replace(/(^[\n\s\t ]+)|([\n\s\t ]+$)+/g,"")).indexOf("\n");if(t>-1){var o=0-n-2;for(t+=1;" "===e[t]&&t-1?"| ".concat(e,"\n--").concat("-".repeat(n)).concat("^".repeat(6)):"| ".concat(e)})).join("\n").replace(Oe,"${...}");return"".concat(o)}function Pe(e,n,t){var o=document.createElement("template"),r=[],a=function(e,n){var t=e.reduce((function(n,t,o){return 0===o?t:e.slice(o).join("").match(/^\s*<\/\s*(table|tr|thead|tbody|tfoot|colgroup)>/)?"".concat(n,"\x3c!--").concat(Ne(o-1),"--\x3e").concat(t):n+Ne(o-1)+t}),"");return n&&(t+="")),s?t.replace(/style\s*=\s*(["][^"]+["]|['][^']+[']|[^\s"'<>/]+)/g,(function(e){return"".concat(Ie).concat(e)})):t}(e,t);if(n&&(a="".concat(a,"")),s?o.innerHTML=a:(Ae.innerHTML=""),o.content.appendChild(Ae.children[0].content)),n){var i=o.content.firstChild;o.content.removeChild(i),Array.from(i.childNodes).forEach((function(e){return o.content.appendChild(e)}))}!function(e){for(var n,t=document.createNodeIterator(e,NodeFilter.SHOW_COMMENT,null,!1);n=t.nextNode();)_e.test(n.textContent)&&(n.parentNode.insertBefore(document.createTextNode(n.textContent),n),n.parentNode.removeChild(n))}(o.content);for(var c=Te(o.content),l=0,f=function(){var t=c.currentNode;if(t.nodeType===Node.TEXT_NODE){var o=t.textContent;if(!o.match(_e)){var a=o.match(Oe);if(a){var i=t;a.reduce((function(e,n){var t=we(e.pop().split(n),2),o=t[0],r=t[1];return o&&e.push(o),e.push(n),r&&e.push(r),e}),[o]).forEach((function(e,n){0===n?i.textContent=e:i=i.parentNode.insertBefore(document.createTextNode(e),i.nextSibling)}))}}var d=t.textContent.match(_e);d&&(s||(t.textContent=""),r[d[1]]=[l,ue])}else t.nodeType===Node.ELEMENT_NODE&&Array.from(t.attributes).forEach((function(o){var a=o.value.trim(),i=s?o.name.replace(Ie,""):o.name,c=a.match(_e);if(c){var d=e[c[1]].replace(/\s*=\s*['"]*$/g,"").split(/\s+/).pop();r[c[1]]=[l,ye(i,d,n)],t.removeAttribute(o.name)}else{var u=a.match(Oe);if(u){var f="attr__".concat(i);u.forEach((function(e,n){var t=we(e.match(_e),2)[1];r[t]=[l,function(t,o,r){var c=re(o,{});c[f]=(c[f]||a).replace(e,null==r?"":r),1!==u.length&&n+1!==u.length||(o.setAttribute(i,c[f]),c[f]=void 0)}]})),o.value="",s&&i!==o.name&&(t.removeAttribute(o.name),t.setAttribute(i,""))}}}));l+=1};c.nextNode();)f();return function(e,n,t,i){var c=re(n,{type:"function"});if(o!==c.template){(c.template||n.nodeType===Node.ELEMENT_NODE)&&ie(n),c.prevArgs=null;var l=document.importNode(function(e,n){return n?d((function(t){var o=je.get(e);o||(o=new Map,je.set(e,o));var r=o.get(n);if(!r){(r=document.createElement("template")).content.appendChild(e.content.cloneNode(!0)),o.set(n,r);var a=r.content.querySelectorAll("style");Array.from(a).forEach((function(e){for(var n=e.childNodes.length+1,t=0;t-1&&!customElements.get(m.tagName.toLowerCase()))throw Error("Missing ".concat(u(m)," element definition in ").concat(u(e)));for(;v&&v[0]===b;)h.push([m,v[1]]),v=p.shift();b+=1}if(n.nodeType===Node.TEXT_NODE){c.startNode=l.childNodes[0],c.endNode=l.childNodes[l.childNodes.length-1];for(var g=n,y=l.childNodes[0];y;)n.parentNode.insertBefore(y,g.nextSibling),g=y,y=l.childNodes[0]}else n.appendChild(l)}var w=n.adoptedStyleSheets;if(i){var x=!1;if((i=i.map((function(e){if(e instanceof CSSStyleSheet)return e;var n=Ce.get(e);return n||((n=new CSSStyleSheet).replaceSync(e),Ce.set(e,n)),n}))).length===w.length){x=!0;for(var S=0;S2&&void 0!==arguments[2]?arguments[2]:200;return function(o,r){var a;n&&(a=setTimeout((function(){a=void 0,requestAnimationFrame((function(){n(o,r)}))}),t)),Be.set(r,e),e.then((function(n){a&&clearTimeout(a),Be.get(r)===e&&(n(o,r),Be.set(r,null))}))}}var We=Ne(),Xe=Ne("svg"),He=/@import/,Ge=new Map,Ye=new WeakMap,Ue={define:function(e){return te(e),this},key:function(e){return this.id=e,this},style:function(){for(var e=arguments.length,n=new Array(e),t=0;t1&&void 0!==arguments[1]?arguments[1]:r,c=Ye.get(o),l=e.join(We);if(c){var d=c.join(We);(a=!!i.adoptedStyleSheets&&!He.test(d))||(l+=d)}t&&(l+=Xe);var u=Ge.get(l);u||(u=Pe(e,t,!a&&c),Ge.set(l,u)),u(r,i,n,a&&c)}),Ue)}function Ze(e){for(var n=arguments.length,t=new Array(n>1?n-1:0),o=1;o1?n-1:0),o=1;o{const a=`\n :host{\n flex-grow: ${e};\n margin: ${n}rem;\n display: flex;\n flex-direction: ${r};\n\n }\n div {\n display: flex;\n flex-direction: ${r};\n flex: 1 1;\n border-radius: var(--b-radius);\n border: ${t?"var(--b-width) solid":"none"}; \n border-color: ${o};\n\n }`;return Ze`
`.style(a)}};te("group-row",Ke);var Qe,en,nn,tn=Object.assign({},Ke);async function on(){try{return Qe||(Qe=await navigator.requestMIDIAccess()),Qe}catch(e){console.error("MIDI getAccess failed",e)}}function rn(e,n=1,t=0){if(!en)return;const o=nn>0?nn:n;un(e,"note"),un(t,"velocity"),dn(o),console.debug(`MIDI note off - note:${e}, velo:${t}, channel:${o}`),en.send([o-1+128,e,t])}function an(e,n=1,t=0){if(!en)return;const o=nn>0?nn:n;un(e,"CC"),un(t),dn(o),console.debug(`MIDI control - cc:${e}, val:${t}, channel:${o}`),en.send([o-1+176,e,t])}function cn(e,n=1,t=0,o=!1){if(!en)return;const r=nn>0?nn:n;try{const a=e.split(","),i=parseInt(a[0].trim()),c=parseInt(a[1].trim());if(un(i,"NRPN LSB"),un(c,"NRPN MSB"),dn(r),en.send([n-1+176,99,c]),en.send([n-1+176,98,i]),console.debug(`MIDI nrpn - lsb:${i}, msb:${c}, val:${t}, channel:${r}, highRes:${o}`),o){if(!Number.isInteger(t))throw"Bad value";const e=Math.floor(t/128),o=Math.floor(t%128);en.send([n-1+176,6,e]),en.send([n-1+176,38,o])}else un(t),en.send([n-1+176,6,t])}catch(n){console.warn("Malformed NRPN, it should be two integers separated by commas:",e,t)}}function ln(e,n=1,t=0){if(!en)return;const o=nn>0?nn:n;try{const n=e.split(","),r=parseInt(n[0].trim()),a=parseInt(n[1].trim());un(r,"Bank LSB"),un(a,"Bank MSB"),dn(o),console.debug(`MIDI prog change - lsb:${r}, msb:${a}, progNum:${t}, channel:${o}`),en.send([o-1+176,0,a]),en.send([o-1+176,32,r]),en.send([o-1+192,t])}catch(n){console.warn("Malformed program change number, it should be two integers separated by commas:",e,t)}}function dn(e){if(!(e>0&&e<=16&&Number.isInteger(e)))throw`MIDI channel '${e}' is invalid, should be an integer between 1 and 16`}function un(e,n="value"){if(!(e>=0&&e<=127&&Number.isInteger(e)))throw`MIDI value '${e}' for '${n}' is invalid, should be an integer between 0 and 127`}tn._direction="column",te("group-column",tn);const sn=window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1);function fn(e,n,t){return Math.min(Math.max(e,n),t)}function pn(e,n="",t="",o="",r="",a=""){let i=e.replaceAll("\\n","
");var c;return i=i.replaceAll(/%v([-+]\d+)?/g,((e,t)=>t?n+parseInt(t):n)),i=i.replaceAll("%h",o),i=i.replaceAll("%t",r),i=i.replaceAll("%n",a),i=i.replaceAll("%a",["C","C♯","D","D♯","E","F","F♯","G","G♯","A","A♯","B"][(c=a)%12]+(Math.floor(c/12)-1)),i=i.replaceAll("%p",t),i=i.replaceAll("%%","%"),i}function bn(e="",n="60"){return e.startsWith("#")?`${e}${n}`:`${function(e){var n={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4","indianred ":"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"};return void 0!==n[e.toLowerCase()]?n[e.toLowerCase()]:"#ffffff"}(e)}${n}`}function vn(e,n,t){t!==Number.MIN_SAFE_INTEGER&&_n.restoreValues&&localStorage.setItem(`touchmidi.${sn}.${e}.${n}`,t)}function hn(e,n=""){n||(n=`${e.cc}${e.chan}${e.nrpn}`);const t=e.tagName.toLowerCase();return localStorage.getItem(`touchmidi.${sn}.${t}.${n}`)}function mn(){for(let[e,n]of Object.entries(localStorage))e.startsWith(`touchmidi.${sn}`)&&localStorage.removeItem(e)}const gn="#dialog {\n border: var(--b-width) solid;\n border-color: #11dd11;\n border-radius: var(--b-radius);\n position: absolute;\n top: 50%;\n left: 50%;\n padding: 1rem;\n transform: translate(-50%, -50%);\n z-index: 100;\n background-color: var(--bg);\n width: 80%;\n color: #dddddd;\n}\n\n#container {\n display: flex;\n flex-direction: column;\n}\n\n@media (orientation: landscape) {\n #container {\n flex-direction: row;\n }\n}\n\n.box {\n flex: 1;\n margin: 0.5rem;\n font-size: min(6vw, 1.5rem);\n}\n@media (orientation: landscape) {\n #container {\n flex-direction: row;\n }\n}\n\nlabel {\n font-size: min(5vw, 1.3rem);\n}\n\nINPUT[type='checkbox'] {\n width: min(5vw, 1.3rem);\n height: min(5vw, 1.3rem);\n border-radius: var(--b-radius);\n}\n\nselect {\n scrollbar-width: none;\n background-color: var(--bg);\n color: #bbbbbb;\n font-size: min(5vw, 1.3rem);\n width: 100%;\n overflow-y: auto;\n border: var(--b-width) solid;\n border-color: #222222;\n border-radius: var(--b-radius);\n margin: 0.2rem;\n outline: none;\n font-family: var(--font);\n}\n\n#start {\n border: var(--b-width) solid;\n border-radius: var(--b-radius);\n background-color: var(--bg);\n font-size: 2rem;\n font-family: var(--font);\n margin-top: 1rem;\n width: 100%;\n background-color: darkgreen;\n color: white;\n border-color: #11dd11;\n}\n\n.disabled {\n color: #444444 !important;\n background-color: #111111 !important;\n border-color: #666666 !important;\n pointer-events: none !important;\n}\n\n#title {\n text-align: right;\n display: flex;\n justify-content: flex-end;\n color: #666666;\n}\n\n#title a {\n color: #666666;\n text-decoration: none;\n}\n";let yn={deviceId:"output-1",globalChannel:1,restoreValues:!1};function wn(e){const n=e.shadowRoot.querySelector("#deviceList").value,t=parseInt(e.shadowRoot.querySelector("#channel").value)||0,o=e.shadowRoot.querySelector("#restoreValues").checked,r=e.shadowRoot.querySelector("#fullScreen").checked;if(!n)return;o||mn();const i=window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1);localStorage.setItem(`touchmidi.${i}.config`,JSON.stringify({deviceId:n,globalChannel:t,restoreValues:o})),function(e,n){var t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};e.dispatchEvent(new CustomEvent(n,a({bubbles:!1},t)))}(e,"config-done",{detail:{deviceId:n,globalChannel:t,restoreValues:o}}),r&&document.body.requestFullscreen(),document.getElementById("pageMask").style.display="none",document.body.removeChild(e)}function xn(e){e.shadowRoot.querySelector("#start").classList.remove("disabled")}function Sn(e,n){if(n.restoreValue)e.value=n.restoreValue;else{e._previousPos={x:n.x,y:n.y};var t=0;(t=e.horizontal?e.value+n.dx:e.value-n.dy)>e.max&&(t=e.max),t0&&rn(e.note,e.chan),e.cc>0&&e.valueOff&&an(e.cc,e.chan,e.valueOff),e.nrpn&&e.valueOff&&cn(e.nrpn,e.chan,e.valueOff,e.nrpnHires))}function $n(e,n){n.preventDefault(),e.toggle?e._pressed=!e._pressed:e._pressed=!0,e._pressed?(e.cc>0&&an(e.cc,e.chan,e.value),e.nrpn&&cn(e.nrpn,e.chan,e.value,e.nrpnHires),e.note>0&&function(e,n=1,t=127){if(!en)return;const o=nn>0?nn:n;un(e,"note"),un(t,"velocity"),dn(o),console.debug(`MIDI note on - note:${e}, velo:${t}, channel:${o}`),en.send([o-1+144,e,t])}(e.note,e.chan,e.velo),e.prog&&ln(e.prog,e.chan,e.value)):e.toggle&&(e.note>0&&rn(e.note,e.chan),e.cc>0&&e.valueOff&&an(e.cc,e.chan,e.valueOff),e.nrpn&&e.valueOff&&cn(e.nrpn,e.chan,e.valueOff,e.nrpnHires),e.prog&&e.valueOff&&ln(e.prog,e.chan,e.valueOff))}function Nn(e,n){n.preventDefault(),"inc"==n.target.id?e.value=e.value+1:e.value=e.value-1,e.value>e.max&&(e.value=e.max),e.value0&&an(e.cc,e.chan,e.value)}te("midi-config",{render:()=>{if(document.getElementById("pageMask").style.display="block",!Qe)return void alert("No MIDI access, something went wrong!\nYou should never see this error!");if(0==Qe.outputs.size)return Ze`
No MIDI output devices were found 😥

Please attach a MIDI device and try again
`.style(gn);const e=Array.from(Array(16).keys()),n=window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1),t=localStorage.getItem(`touchmidi.${n}.config`);let o={};o=t?JSON.parse(t):yn;let r="disabled";return Qe.outputs.forEach((function(e,n){n==o.deviceId&&(r="enabled")})),Ze`
Touch Midi v${"2.2.0"}   [[ GitHub ]]
Select MIDI Device
MIDI Channels

`.style(gn)}}),te("midi-slider",{_previousPos:null,_width:30,_update:{observe:Sn},value:Number.MIN_SAFE_INTEGER,chan:1,cc:-1,nrpn:"",min:0,max:127,pitchBend:!1,colour:m("#ffffff"),label:"__unset__",horizontal:!1,labelScale:1,grow:1,render:({value:e,colour:n,label:t,min:o,max:r,cc:a,chan:i,horizontal:c,nrpn:l,pitchBend:d,_width:u,labelScale:s,grow:f})=>{const p=e;vn("midi-slider",`${a}${i}${l}`,e),e>r&&(e=r),e0&&p>Number.MIN_SAFE_INTEGER&&an(a,i,e),l&&p>Number.MIN_SAFE_INTEGER&&cn(l,i,e,r>127),d&&function(e=1,n=0){if(!en)return;const t=nn>0?nn:e;dn(t);const o=Math.floor(n/128),r=Math.floor(n%128);console.debug(`MIDI pitchbend - val_msb:${o}, val_lsb:${r}, channel:${t}`),en.send([t-1+224,o,r])}(i,e),Ze`
`.style(":host {\n flex: 1 1;\n display: flex;\n margin: var(--spacing);\n}\n\ndiv {\n font-size: 4vw;\n display: flex;\n flex: 1 1;\n border: var(--b-width) solid;\n border-radius: var(--b-radius);\n justify-content: center;\n align-items: center;\n text-align: center;\n line-height: 0.9em;\n cursor: pointer;\n overflow: hidden;\n user-select: none;\n}\n",v)}}),te("midi-encoder",{_previousPos:null,_width:30,_update:{observe:Sn},value:Number.MIN_SAFE_INTEGER,chan:1,cc:-1,nrpn:"",min:0,max:127,colour:m("#ffffff"),label:"__unset__",horizontal:!1,labelScale:1,grow:1,render:({value:e,colour:n,label:t,min:o,max:r,chan:a,cc:i,nrpn:c,_width:l,labelScale:d,grow:u})=>{const s=e;vn("midi-encoder",`${i}${a}${c}`,e),e>r&&(e=r),e0&&s>Number.MIN_SAFE_INTEGER&&an(i,a,e),c&&s>Number.MIN_SAFE_INTEGER&&cn(c,a,e,r>127);const b=`\n :host {\n flex-grow: ${u}\n }\n #label {\n color: ${n}; \n font-size:${.2*l*d}px\n }`;return Ze`
`.style(":host {\n flex: 1 1;\n display: flex;\n margin: var(--spacing);\n}\n\nsvg {\n height: 100%;\n margin: 0 auto;\n}\n\ndiv {\n flex: auto;\n justify-content: center;\n display: flex;\n align-items: center;\n text-align: center;\n cursor: pointer;\n overflow: hidden;\n user-select: none;\n position: relative;\n}\n\n#label {\n font-size: 5vmin;\n position: absolute;\n z-index: 40;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n line-height: 0.9em;\n width: 100%;\n padding: 0.2rem;\n}\n",b)}}),te("midi-button",{_pressed:!1,_width:30,chan:1,cc:-1,nrpn:"",nrpnHires:!1,value:0,valueOff:0,velo:127,note:-1,prog:"",colour:m("#ffffff"),label:"__unset__",toggle:!1,labelScale:1,grow:1,render:({label:e,colour:n,_pressed:t,chan:o,cc:r,nrpn:a,prog:i,note:c,_width:l,labelScale:d,grow:u})=>{"__unset__"===e&&(c>0?e="%a":r>0?e="%t":a?e=a:i&&(e=i));const s=`\n :host {\n flex-grow: ${u}\n }\n button {\n background-color: ${t?`${bn(n)}`:"var(--bg)"};\n color: ${n};\n border-color: ${n};\n font-size: ${.3*l*d}px !important;\n }`;return Ze``.style(":host {\n flex: 1 1;\n display: flex;\n margin: var(--spacing);\n}\n\nbutton {\n font-family: var(--font);\n background-color: var(--bg);\n font-size: 5vw;\n display: flex;\n flex: 1 1;\n border: var(--b-width) solid;\n border-radius: var(--b-radius);\n justify-content: center;\n align-items: center;\n cursor: pointer;\n overflow: hidden;\n width: 1px;\n user-select: none;\n}\n",s)}}),te("midi-pad",{_previousPos:null,_width:30,_update:{observe:(e,n)=>{if(n.restoreValue)return void(e.value=n.restoreValue);e._previousPos={x:n.x,y:n.y};let t=e.valueX+n.dx,o=e.valueY-n.dy;t=fn(t,e.min,e.max),o=fn(o,e.min,e.max),e.valueX=Math.round(t),e.valueY=Math.round(o)}},valueX:Number.MIN_SAFE_INTEGER,valueY:Number.MIN_SAFE_INTEGER,chan:1,ccX:-1,ccY:-1,min:0,max:127,colour:m("#ffffff"),label:"__unset__",labelScale:1,grow:1,render:({valueX:e,valueY:n,colour:t,label:o,min:r,max:a,ccX:i,ccY:c,chan:l,nrpn:d,_width:u,labelScale:s,grow:f})=>{const p=e,b=n;vn("midi-pad",`${i}${l}${d}X`,e),vn("midi-pad",`${c}${l}${d}Y`,n),e=fn(e,r,a),n=fn(n,r,a);let v=Math.round((e-r)/(a-r)*100),h=Math.round((n-r)/(a-r)*100);"__unset__"===o&&(o="%v");const m=`\n :host {\n flex-grow: ${f}\n }\n div {\n color: ${t};\n border-color: ${t};\n }\n #label {\n font-size: ${.4*u*s}px;\n }\n #marker {\n background-color: ${bn(t)};\n border-color: ${t};\n bottom: calc(${h}% - ${.05*u}px);\n left: calc(${v}% - ${.05*u}px);\n width: ${.1*u}px;\n height: ${.1*u}px;\n }`;return i>0&&c>0&&p>Number.MIN_SAFE_INTEGER&&b>Number.MIN_SAFE_INTEGER&&(an(i,l,e),an(c,l,n)),Ze`
`.style(":host {\n flex: 1 1;\n display: flex;\n margin: var(--spacing);\n}\n\ndiv {\n font-size: 4vw;\n display: flex;\n flex: 1 1;\n border: var(--b-width) solid;\n border-radius: var(--b-radius);\n justify-content: center;\n align-items: center;\n text-align: center;\n line-height: 0.9em;\n cursor: pointer;\n overflow: hidden;\n width: 1px;\n user-select: none;\n position: relative;\n}\n\n#marker {\n width: 3vmax;\n height: 3vmax;\n border-radius: 50%;\n position: absolute;\n background-color: white;\n display: block;\n z-index: 10;\n border: 0.3vmax solid white;\n}\n\n#label {\n border: none;\n padding: 1rem;\n}\n",m)}}),te("midi-counter",{_width:30,chan:1,cc:-1,value:0,min:0,max:127,colour:m("#ffffff"),label:"__unset__",labelScale:1,grow:1,render:({colour:e,chan:n,cc:t,_width:o,labelScale:r,grow:a,value:i})=>{vn("midi-counter",`${t}${n}0`,i);const c=`\n :host {\n flex-grow: ${a}\n }\n button:active {\n background-color: ${bn(e)};\n }\n #label {\n font-size: ${.2*o*r}px !important;\n border-color: ${e};\n color: ${e};\n background-color: var(--bg);\n }\n button {\n color: ${e};\n border-color: ${e};\n font-size: ${.3*o*r}px !important;\n }`;return Ze`
`.style(":host {\n flex: 1 1;\n display: flex;\n margin: var(--spacing);\n}\n\ndiv {\n display: flex;\n flex-direction: row;\n flex: 1 1;\n position: relative;\n}\n\nbutton {\n font-family: var(--font);\n background-color: var(--bg);\n font-size: 5vw;\n flex: 1 1;\n border: var(--b-width) solid;\n border-radius: var(--b-radius);\n justify-content: center;\n align-items: center;\n cursor: pointer;\n overflow: hidden;\n user-select: none;\n}\n\n#label {\n position: absolute;\n background-color: var(--bg);\n height: 50%;\n text-align: center;\n width: 25%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 4;\n font-size: 5vw;\n overflow: hidden;\n display: block;\n pointer-events: none;\n}\n",c)}}),te("midi-spacer",{grow:1,render:({grow:e})=>{const n=`\n :host{\n flex: ${e} 1;\n }\n div {\n flex ${e} 1;\n }`;return Ze`
`.style(n)}}),te("midi-label",{grow:1,render:({grow:e})=>{const n=`\n :host{\n flex: ${e} 1;\n }\n div {\n flex ${e} 1;\n font-size: 4vw;\n }`;return Ze`
`.style(n)}});let kn=[],_n={};function On(e){for(let n of e.changedTouches)kn[n.identifier]=n.target}function In(e){for(let n of e.changedTouches)Cn(n.target,n.screenX,n.screenY)}function Mn(e){for(let n of e.changedTouches)kn.splice(n.identifier,1)}function jn(e){kn[20]=e.target}function Tn(e){Cn(kn[20],e.screenX,e.screenY)}function An(){kn.splice(20,1)}function Cn(e,n,t){if(!e)return;let o=0,r=0;e._previousPos&&(o=n-e._previousPos.x,r=t-e._previousPos.y,o=fn(o,-6,6)/1,r=fn(r,-6,6)/1),e._update={dx:o,dy:r,x:n,y:t}}function Dn(e){e.preventDefault()}function Pn(e){if(!e.deviceId)return void alert("No MIDI device id, MIDI output will fail!");let n=!1;for(let t of Qe.outputs.values())t.id===e.deviceId&&(n=!0);if(n){if(function(e="output-1",n=0){en=e,nn=n}(Qe.outputs.get(e.deviceId),e.globalChannel||0),console.log(`MIDI configured for device '${e.deviceId}' and channel: ${e.globalChannel}`),e.restoreValues){console.log("Restoring saved widget values...");for(let e of document.body.querySelectorAll("midi-slider,midi-encoder,midi-pad,midi-counter"))if("midi-pad"==e.tagName.toLowerCase()){let n=hn(e,`${e.ccX}${e.chan}${e.nrpn}X`),t=hn(e,`${e.ccY}${e.chan}${e.nrpn}Y`);n&&(e.valueX=n),t&&(e.valueY=t)}else{let n=hn(e);n&&(e.value=n)}}}else alert(`The provided MIDI device id '${e.deviceId}' is invalid, MIDI output will fail!`)}function Ln(){for(let e of document.body.querySelectorAll("midi-slider,midi-encoder,midi-pad,midi-button,midi-counter"))e._width=e.clientWidth}window.addEventListener("load",(async()=>{await async function(){const e=document.createElement("div");e.id="pageMask",document.body.append(e);const n=document.createElement("style");n.textContent="@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');\n\n:root {\n /* these variables are used everywhere */\n --bg: black; /* background colour */\n --b-radius: min(1.9vmin, 15px); /* border radius */\n --b-width: 0.3rem; /* border thickness */\n --spacing: 0.3rem; /* widget spacing */\n\n --font: 'PT Sans', sans-serif; /* Consolas, 'Courier New', monospace; */\n}\n\nhtml,\nbody {\n height: 100%;\n margin: 0;\n padding: 0;\n overflow-y: hidden;\n color: white;\n background-color: var(--bg);\n font-family: var(--font);\n touch-action: none;\n}\n\nbody {\n display: flex;\n flex-direction: column;\n}\n\n/* Used to hide the page behind the config dialog */\n#pageMask {\n background: rgba(0, 0, 0, 0.8);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: none;\n}\n";let t=document.createElement("meta");t.setAttribute("name","viewport"),t.setAttribute("content","width=device-width, user-scalable=no, initial-scale=1.0"),document.getElementsByTagName("head")[0].appendChild(t);let o=document.querySelector("link[rel~='icon']");o||(o=document.createElement("link"),o.rel="icon",o.href="https://raw.githubusercontent.com/benc-uk/touchmidi/main/src/assets/favicon.png",document.getElementsByTagName("head")[0].appendChild(o)),document.head.append(n)}();const e=await on();if(e){for(let n of e.outputs.values())console.log(`MIDI device found --- deviceId: ${n.id}, name: ${n.name}`);null===new URLSearchParams(window.location.search).get("nomidi")&&function(e){const n=new URLSearchParams(window.location.search);if(n.has("channel")||n.has("device")||n.has("restore")){_n=yn,_n.globalChannel=n.has("channel")?parseInt(n.get("channel")):1,_n.deviceId=n.has("device")?n.get("device"):_n.deviceId,_n.restoreValues=n.has("restore")?"true"===n.get("restore"):_n.restoreValues,_n.restoreValues||mn();const e=window.location.pathname.substring(window.location.pathname.lastIndexOf("/")+1);return localStorage.setItem(`touchmidi.${e}.config`,JSON.stringify(_n)),void Pn(_n)}const t=document.createElement("midi-config");t.channelNames=void 0,t.addEventListener("config-done",(e=>{Pn(e.detail)})),document.body.appendChild(t)}(),window.addEventListener("resize",Ln),setTimeout(Ln,200),window.addEventListener("mousedown",jn,!1),window.addEventListener("mousemove",Tn,!1),window.addEventListener("mouseup",An,!1),window.addEventListener("touchstart",On,!1),window.addEventListener("touchmove",In,!1),window.addEventListener("touchend",Mn,!1),window.addEventListener("dblclick",Dn,!1),window.addEventListener("contextmenu",Dn,!1)}else document.body.innerHTML='
\n

Failed to get MIDI access 😯

\n
This is likely because your browser doesn\'t support MIDI or permissions were not granted.\n
Also ensure you load the page from a https:// or file:// URL origin.

Try again using Chrome or Edge
'}))}},n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{}};return e[o](r,r.exports,t),r.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t(305)})();