From 9136378b2f609073817b267da4544e6e55fd0204 Mon Sep 17 00:00:00 2001 From: Gregg Tavares Date: Fri, 24 Nov 2023 12:05:01 -0800 Subject: [PATCH] lint --- .eslintignore | 2 + .eslintrc.cjs | 112 +++--- build/append-banner.js | 9 - build/externs.js | 5 - build/serve.js | 1 + dist/0.x/muigui.js | 100 ++--- dist/0.x/muigui.min.js | 2 +- dist/0.x/muigui.module.js | 100 ++--- dist/0.x/muigui.module.min.js | 2 +- package-lock.json | 621 +++++++++++++++++++++++++++++++- package.json | 4 + src/controllers/ColorChooser.js | 8 +- src/controllers/Container.js | 4 +- src/libs/keyboard.js | 4 +- src/libs/touch.js | 8 +- src/libs/wheel.js | 2 +- src/views/RadioGridView.js | 5 +- src/views/{View.js => View.ts} | 28 +- test/assert.js | 6 +- test/index.js | 2 - test/mocha-support.js | 2 - test/puppeteer.js | 2 +- tsconfig.json | 7 +- 23 files changed, 821 insertions(+), 215 deletions(-) delete mode 100644 build/append-banner.js delete mode 100644 build/externs.js rename src/views/{View.js => View.ts} (66%) diff --git a/.eslintignore b/.eslintignore index a9aab6c..e4fc7fe 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,3 +3,5 @@ test/mocha.js /webgl-lint.js dist examples/3rdParty +out +examples/**/*.js diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 8bacbea..c3b9a4f 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,42 +1,70 @@ /* global module */ module.exports = { + parser: '@typescript-eslint/parser', env: { - 'es2021': true, - 'browser': true, + es2022: true, + browser: true, }, parserOptions: { - 'sourceType': 'module', - 'ecmaVersion': 'latest', + sourceType: 'module', + ecmaVersion: 'latest', + tsconfigRootDir: __dirname, + project: ['./tsconfig.json'], }, + root: true, plugins: [ + '@typescript-eslint', 'eslint-plugin-html', 'eslint-plugin-optional-comma-spacing', -// "eslint-plugin-one-variable-per-var", 'eslint-plugin-require-trailing-comma', ], - extends: 'eslint:recommended', + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin + ], rules: { - 'one-var': ['error', 'never'], - 'no-eval': 2, + 'brace-style': [2, '1tbs', { allowSingleLine: false }], + camelcase: [0], + 'comma-dangle': 0, + 'comma-spacing': 0, + 'comma-style': [2, 'last'], + 'consistent-return': 2, + curly: [2, 'all'], + 'dot-notation': 0, + 'eol-last': [0], + eqeqeq: 2, + 'global-strict': [0], + 'key-spacing': [0], + 'keyword-spacing': [1, { before: true, after: true, overrides: {} }], + 'new-cap': 2, + 'new-parens': 2, + 'no-alert': 2, 'no-array-constructor': 2, 'no-caller': 2, 'no-catch-shadow': 2, + 'no-comma-dangle': [0], + 'no-const-assign': 2, + 'no-eval': 2, 'no-extend-native': 2, 'no-extra-bind': 2, + 'no-extra-parens': [2, 'functions'], 'no-implied-eval': 2, - 'no-inner-declarations': 0, + 'no-irregular-whitespace': 2, 'no-iterator': 2, 'no-label-var': 2, 'no-labels': 2, - 'no-lone-blocks': 0, + 'no-lone-blocks': 2, + 'no-loop-func': 2, + 'no-multi-spaces': [0], 'no-multi-str': 2, 'no-native-reassign': 2, - 'no-new': 2, 'no-new-func': 2, 'no-new-object': 2, 'no-new-wrappers': 2, + 'no-new': 2, + 'no-obj-calls': 2, 'no-octal-escape': 2, 'no-process-exit': 2, 'no-proto': 2, @@ -44,52 +72,38 @@ module.exports = { 'no-script-url': 2, 'no-sequences': 2, 'no-shadow-restricted-names': 2, + 'no-shadow': [0], 'no-spaced-func': 2, 'no-trailing-spaces': 2, 'no-undef-init': 2, + //'no-undef': 2, // ts recommends this be off: https://typescript-eslint.io/linting/troubleshooting + 'no-underscore-dangle': 2, + 'no-unreachable': 2, 'no-unused-expressions': 2, 'no-use-before-define': 0, 'no-var': 2, 'no-with': 2, + 'one-var': ["error", "never"], + 'optional-comma-spacing/optional-comma-spacing': [2, { after: true }], 'prefer-const': 2, - 'consistent-return': 2, - 'curly': [2, 'all'], - 'no-extra-parens': [2, 'functions'], - 'eqeqeq': 2, - 'new-cap': 2, - 'new-parens': 2, - 'semi-spacing': [2, {'before': false, 'after': true}], - 'space-infix-ops': 2, - 'space-unary-ops': [2, { 'words': true, 'nonwords': false }], - 'yoda': [2, 'never'], - - 'brace-style': [2, '1tbs', { 'allowSingleLine': false }], - 'camelcase': [0], - 'comma-spacing': 0, - 'comma-dangle': 0, - 'comma-style': [2, 'last'], - 'optional-comma-spacing/optional-comma-spacing': [2, {'after': true}], - 'dot-notation': 0, - 'eol-last': [0], - 'global-strict': [0], - 'key-spacing': [0], - 'no-comma-dangle': [0], - 'no-irregular-whitespace': 2, - 'no-multi-spaces': [0], - 'no-loop-func': 0, - 'no-obj-calls': 2, - 'no-redeclare': [0], - 'no-shadow': [0], - 'no-undef': [2], - 'no-unreachable': 2, - //"one-variable-per-var/one-variable-per-var": [2], - 'quotes': [2, 'single'], - 'require-atomic-updates': 0, 'require-trailing-comma/require-trailing-comma': [2], - 'require-yield': 0, - 'semi': [2, 'always'], - 'strict': [2, 'global'], - 'space-before-function-paren': [2, 'never'], - 'keyword-spacing': [1, {'before': true, 'after': true, 'overrides': {}} ], + 'semi-spacing': [2, { before: false, after: true }], + semi: [2, 'always'], + 'space-before-function-paren': [ + 2, + { + anonymous: 'always', + named: 'never', + asyncArrow: 'always', + }, + ], + 'space-infix-ops': 2, + 'space-unary-ops': [2, { words: true, nonwords: false }], + strict: [2, 'function'], + yoda: [2, 'never'], + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-explicit-any': 'off', // TODO: Reenable this and figure out how to fix code. + '@typescript-eslint/no-non-null-assertion': 'off', + '@typescript-eslint/no-unused-vars': 2, }, }; diff --git a/build/append-banner.js b/build/append-banner.js deleted file mode 100644 index 566136a..0000000 --- a/build/append-banner.js +++ /dev/null @@ -1,9 +0,0 @@ -/* global require, process */ -const fs = require('fs'); -const pkg = JSON.parse(fs.readFileSync('package.json', {encoding: 'utf8'})); -const banner = `/* unzipit@${pkg.version}, license MIT */`; - -for (const filename of process.argv.slice(2)) { - const content = fs.readFileSync(filename, 'utf8'); - fs.writeFileSync(filename, `${banner}\n${content}`); -} \ No newline at end of file diff --git a/build/externs.js b/build/externs.js deleted file mode 100644 index afcbbef..0000000 --- a/build/externs.js +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint no-unused-vars:0 no-var:0 */ -function require() {} -function define() {} -var module; -var exports; diff --git a/build/serve.js b/build/serve.js index 9c38076..a373cb6 100644 --- a/build/serve.js +++ b/build/serve.js @@ -22,6 +22,7 @@ const ignoreFns = [ fn => fn.startsWith('build'), fn => fn.startsWith('out'), fn => fn.startsWith('src'), + fn => fn.startsWith('dist'), fn => fn.startsWith('.'), ]; diff --git a/dist/0.x/muigui.js b/dist/0.x/muigui.js index 0199969..3e3bb6f 100644 --- a/dist/0.x/muigui.js +++ b/dist/0.x/muigui.js @@ -906,58 +906,58 @@ } class View { - #childDestElem; - #views = []; - - constructor(elem) { - this.domElement = elem; - this.#childDestElem = elem; - } - addElem(elem) { - this.#childDestElem.appendChild(elem); - return elem; - } - removeElem(elem) { - this.#childDestElem.removeChild(elem); - return elem; - } - pushSubElem(elem) { - this.#childDestElem.appendChild(elem); - this.#childDestElem = elem; - } - popSubElem() { - this.#childDestElem = this.#childDestElem.parentElement; - } - add(view) { - this.#views.push(view); - this.addElem(view.domElement); - return view; - } - remove(view) { - this.removeElem(view.domElement); - removeArrayElem(this.#views, view); - return view; - } - pushSubView(view) { - this.pushSubElem(view.domElement); - } - popSubView() { - this.popSubElem(); - } - setOptions(options) { - for (const view of this.#views) { - view.setOptions(options); + domElement; + #childDestElem; + #views = []; + constructor(elem) { + this.domElement = elem; + this.#childDestElem = elem; } - } - updateDisplayIfNeeded(newV, ignoreCache) { - for (const view of this.#views) { - view.updateDisplayIfNeeded(newV, ignoreCache); + addElem(elem) { + this.#childDestElem.appendChild(elem); + return elem; + } + removeElem(elem) { + this.#childDestElem.removeChild(elem); + return elem; + } + pushSubElem(elem) { + this.#childDestElem.appendChild(elem); + this.#childDestElem = elem; + } + popSubElem() { + this.#childDestElem = this.#childDestElem.parentElement; + } + add(view) { + this.#views.push(view); + this.addElem(view.domElement); + return view; + } + remove(view) { + this.removeElem(view.domElement); + removeArrayElem(this.#views, view); + return view; + } + pushSubView(view) { + this.pushSubElem(view.domElement); + } + popSubView() { + this.popSubElem(); + } + setOptions(options) { + for (const view of this.#views) { + view.setOptions(options); + } + } + updateDisplayIfNeeded(newV, ignoreCache) { + for (const view of this.#views) { + view.updateDisplayIfNeeded(newV, ignoreCache); + } + return this; + } + $(selector) { + return this.domElement.querySelector(selector); } - return this; - } - $(selector) { - return this.domElement.querySelector(selector); - } } class Controller extends View { diff --git a/dist/0.x/muigui.min.js b/dist/0.x/muigui.min.js index 7eec151..9a859d1 100644 --- a/dist/0.x/muigui.min.js +++ b/dist/0.x/muigui.min.js @@ -1,2 +1,2 @@ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).GUI=e()}(this,(function(){"use strict";var t={default:'\n.muigui {\n --bg-color: #ddd;\n --color: #222;\n --contrast-color: #eee;\n --value-color: #145 ;\n --value-bg-color: #eeee;\n --disabled-color: #999;\n --menu-bg-color: #f8f8f8;\n --menu-sep-color: #bbb;\n --hover-bg-color: #999;\n --focus-color: #68C;\n --range-color: #888888;\n --invalid-color: #FF0000;\n --selected-color: rgb(255, 255, 255, 0.9);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n .muigui {\n --bg-color: #222222;\n --color: #dddddd;\n --contrast-color: #000;\n --value-color: #43e5f7;\n --value-bg-color: #444444;\n --disabled-color: #666666;\n --menu-bg-color: #080808;\n --menu-sep-color: #444444;\n --hover-bg-color: #666666;\n --focus-color: #88AAFF;\n --range-color: #888888;\n --invalid-color: #FF6666;\n --selected-color: rgba(255, 255, 255, 0.3);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n }\n}\n\n.muigui {\n --width: 250px;\n --label-width: 45%;\n --number-width: 40%;\n\n\n --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;\n --font-size: 11px;\n --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;\n --font-size-mono: 11px;\n\n --line-height: 1.7em;\n --border-radius: 0px;\n\n width: var(--width);\n font-family: var(--font-family);\n font-size: var(--font-size);\n box-sizing: border-box;\n line-height: 100%;\n}\n.muigui * {\n box-sizing: inherit;\n}\n\n.muigui-no-scroll {\n touch-action: none;\n}\n.muigui-no-h-scroll {\n touch-action: pan-y;\n}\n.muigui-no-v-scroll {\n touch-action: pan-x;\n}\n\n.muigui-invalid-value {\n background-color: red !important;\n color: white !important;\n}\n\n.muigui-grid {\n display: grid;\n}\n.muigui-rows {\n display: flex;\n flex-direction: column;\n\n min-height: 20px;\n border: 2px solid red;\n}\n.muigui-columns {\n display: flex;\n flex-direction: row;\n\n height: 20px;\n border: 2px solid green;\n}\n.muigui-rows>*,\n.muigui-columns>* {\n flex: 1 1 auto;\n align-items: stretch;\n min-height: 0;\n min-width: 0;\n}\n\n.muigui-row {\n border: 2px solid yellow;\n min-height: 10px\n}\n.muigui-column {\n border: 2px solid lightgreen;\n}\n\n/* -------- */\n\n.muigui-show { /* */ }\n.muigui-hide { \n display: none !important;\n}\n.muigui-disabled {\n pointer-events: none;\n --color: var(--disabled-color) !important;\n --value-color: var(--disabled-color) !important;\n --range-left-color: var(--disabled-color) !important;\n}\n\n.muigui canvas,\n.muigui svg {\n display: block;\n border-radius: var(--border-radius);\n}\n.muigui canvas {\n background-color: var(--value-bg-color);\n}\n\n.muigui-controller {\n min-width: 0;\n min-height: var(--line-height);\n}\n.muigui-root,\n.muigui-menu {\n display: flex;\n flex-direction: column;\n position: relative;\n user-select: none;\n height: fit-content;\n margin: 0;\n padding-bottom: 0.1em;\n border-radius: var(--border-radius);\n}\n.muigui-menu {\n border-bottom: 1px solid var(--menu-sep-color);\n}\n\n.muigui-root>button:nth-child(1),\n.muigui-menu>button:nth-child(1) {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n position: relative;\n text-align: left;\n color: var(--color);\n background-color: var(--menu-bg-color);\n min-height: var(--line-height);\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n.muigui-root>div:nth-child(2),\n.muigui-menu>div:nth-child(2) {\n flex: 1 1 auto;\n}\n\n.muigui-controller {\n margin-left: 0.2em;\n margin-right: 0.2em;\n}\n.muigui-root.muigui-controller,\n.muigui-menu.muigui-controller {\n margin-left: 0;\n margin-right: 0;\n}\n.muigui-controller>*:nth-child(1) {\n flex: 1 0 var(--label-width);\n min-width: 0;\n white-space: pre;\n}\n.muigui-controller>label:nth-child(1) {\n place-content: center start;\n display: inline-grid;\n overflow: hidden;\n}\n.muigui-controller>*:nth-child(2) {\n flex: 1 1 75%;\n min-width: 0;\n}\n\n/* -----------------------------------------\n a label controller is [[label][value]]\n*/\n\n.muigui-label-controller {\n display: flex;\n margin: 0.4em 0 0.4em 0;\n word-wrap: initial;\n align-items: stretch;\n}\n\n.muigui-value {\n display: flex;\n align-items: stretch;\n}\n.muigui-value>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n.muigui-value>*:nth-child(1) {\n flex: 1 1 calc(100% - var(--number-width));\n}\n.muigui-value>*:nth-child(2) {\n flex: 1 1 var(--number-width);\n margin-left: 0.2em;\n}\n\n/* fix! */\n.muigui-open>button>label::before,\n.muigui-closed>button>label::before {\n width: 1.25em;\n height: var(--line-height);\n display: inline-grid;\n place-content: center start;\n pointer-events: none;\n}\n.muigui-open>button>label::before {\n content: "ⓧ"; /*"▼";*/\n}\n.muigui-closed>button>label::before {\n content: "⨁"; /*"▶";*/\n}\n.muigui-open>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 0.5s ease-out;\n max-height: 100vh;\n overflow: auto;\n opacity: 1;\n}\n\n.muigui-closed>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 1s;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n}\n\n/* ---- popdown ---- */\n\n.muigui-pop-down-top {\n display: flex;\n}\n/* fix? */\n.muigui-value>*:nth-child(1).muigui-pop-down-top {\n flex: 0;\n}\n.muigui-pop-down-bottom {\n\n}\n\n.muigui-pop-down-values {\n min-width: 0;\n display: flex;\n}\n.muigui-pop-down-values>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.muigui-value.muigui-pop-down-controller {\n flex-direction: column;\n}\n\n.muigui-pop-down-top input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-pop-down-top input[type=checkbox]::before {\n content: "+";\n display: grid;\n place-content: center;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n color: var(--value-bg-color);\n width: calc(var(--line-height) - 4px);\n height: calc(var(--line-height) - 4px);\n}\n\n.muigui-pop-down-top input[type=checkbox]:checked::before {\n content: "Ｘ";\n}\n\n\n/* ---- select ---- */\n\n.muigui select,\n.muigui option,\n.muigui input,\n.muigui button {\n color: var(--value-color);\n background-color: var(--value-bg-color);\n font-family: var(--font-family);\n font-size: var(--font-size);\n border: none;\n margin: 0;\n border-radius: var(--border-radius);\n}\n.muigui select {\n appearance: none;\n margin: 0;\n margin-left: 0; /*?*/\n overflow: hidden; /* Safari */\n}\n\n.muigui select:focus,\n.muigui input:focus,\n.muigui button:focus {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui select:hover,\n.muigui option:hover,\n.muigui input:hover,\n.muigui button:hover {\n background-color: var(--hover-bg-color); \n}\n\n/* ------ [ label ] ------ */\n\n.muigui-label {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n padding-top: 0.4em;\n padding-bottom: 0.3em;\n place-content: center start;\n background-color: var(--menu-bg-color);\n white-space: pre;\n border-radius: var(--border-radius);\n}\n\n/* ------ [ divider] ------ */\n\n.muigui-divider {\n min-height: 6px;\n border-top: 2px solid var(--menu-sep-color);\n margin-top: 6px;\n}\n\n/* ------ [ button ] ------ */\n\n.muigui-button {\n display: grid;\n\n}\n.muigui-button button {\n border: none;\n color: var(--value-color);\n background-color: var(--button-bg-color);\n cursor: pointer;\n place-content: center center;\n}\n\n/* ------ [ color ] ------ */\n\n.muigui-color>div {\n overflow: hidden;\n position: relative;\n margin-left: 0;\n margin-right: 0; /* why? */\n max-width: var(--line-height);\n border-radius: var(--border-radius);\n}\n\n.muigui-color>div:focus-within {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui-color input[type=color] {\n border: none;\n padding: 0;\n background: inherit;\n cursor: pointer;\n position: absolute;\n width: 200%;\n left: -10px;\n top: -10px;\n height: 200%;\n}\n.muigui-disabled canvas,\n.muigui-disabled svg,\n.muigui-disabled img,\n.muigui-disabled .muigui-color input[type=color] {\n opacity: 0.2;\n}\n\n/* ------ [ checkbox ] ------ */\n\n.muigui-checkbox>label:nth-child(2) {\n display: grid;\n place-content: center start;\n margin: 0;\n}\n\n.muigui-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-checkbox input[type=checkbox]::before {\n content: "";\n color: var(--value-color);\n display: grid;\n place-content: center;\n}\n\n.muigui-checkbox input[type=checkbox]:checked::before {\n content: "✔";\n}\n\n.muigui input[type=number]::-webkit-inner-spin-button, \n.muigui input[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none;\n appearance: none;\n margin: 0; \n}\n.muigui input[type=number] {\n -moz-appearance: textfield;\n}\n\n/* ------ [ radio grid ] ------ */\n\n.muigui-radio-grid>div {\n display: grid;\n gap: 2px;\n}\n\n.muigui-radio-grid input {\n appearance: none;\n display: none;\n}\n\n.muigui-radio-grid button {\n color: var(--color);\n width: 100%;\n text-align: left;\n}\n\n.muigui-radio-grid input:checked + button {\n color: var(--value-color);\n background-color: var(--selected-color);\n}\n\n/* ------ [ color-chooser ] ------ */\n\n.muigui-color-chooser-cursor {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n.muigui-color-chooser-circle {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n\n\n/* ------ [ vec2 ] ------ */\n\n.muigui-vec2 svg {\n background-color: var(--value-bg-color);\n}\n\n.muigui-vec2-axis {\n stroke: 1px;\n stroke: var(--focus-color);\n}\n\n.muigui-vec2-line {\n stroke-width: 1px;\n stroke: var(--value-color);\n fill: var(--value-color);\n}\n\n/* ------ [ direction ] ------ */\n\n.muigui-direction svg {\n background-color: rgba(0,0,0,0.2);\n}\n\n.muigui-direction:focus-within svg {\n outline: none;\n}\n.muigui-direction-range {\n fill: var(--value-bg-color);\n}\n.muigui-direction svg:focus {\n outline: none;\n}\n.muigui-direction svg:focus .muigui-direction-range {\n stroke-width: 0.5px;\n stroke: var(--focus-color);\n}\n\n.muigui-direction-arrow {\n fill: var(--value-color);\n}\n\n/* ------ [ slider ] ------ */\n\n.muigui-slider>div {\n display: flex;\n align-items: stretch;\n height: var(--line-height);\n}\n.muigui-slider svg {\n flex: 1 1 auto;\n}\n.muigui-slider .muigui-slider-up #muigui-orientation {\n transform: scale(1, -1) translateY(-100%);\n}\n\n.muigui-slider .muigui-slider-up #muigui-number-orientation {\n transform: scale(1,-1);\n}\n\n.muigui-ticks {\n stroke: var(--range-color);\n}\n.muigui-thicks {\n stroke: var(--color);\n stroke-width: 2px;\n}\n.muigui-svg-text {\n fill: var(--color);\n font-size: 7px;\n}\n.muigui-mark {\n fill: var(--value-color);\n}\n\n/* ------ [ range ] ------ */\n\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: transparent;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n margin-top: calc((var(--line-height) - 2px) / -2);\n width: calc(var(--line-height) - 2px);\n height: calc(var(--line-height) - 2px);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n border: 1px solid var(--menu-sep-color);\n height: 2px;\n}\n\n\n/* dat.gui style - doesn\'t work on Safari iOS */\n\n/*\n.muigui-range input[type=range] {\n cursor: ew-resize;\n overflow: hidden;\n}\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: var(--range-right-color);\n margin: 0;\n}\n.muigui-range input[type=range]:hover {\n background-color: var(--range-right-hover-color);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n height: max-content;\n color: var(--range-left-color);\n margin-top: -1px;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 0px;\n height: max-content;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n}\n*/\n\n/* FF */\n/*\n.muigui-range input[type=range]::-moz-slider-progress {\n background-color: var(--range-left-color); \n}\n.muigui-range input[type=range]::-moz-slider-thumb {\n height: max-content;\n width: 0;\n border: none;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n box-sizing: border-box;\n}\n*/\n\n.muigui-checkered-background {\n background-color: #404040;\n background-image:\n linear-gradient(45deg, #808080 25%, transparent 25%),\n linear-gradient(-45deg, #808080 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #808080 75%),\n linear-gradient(-45deg, transparent 75%, #808080 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0px;\n}\n\n/* ---------------------------------------------------------- */\n\n/* needs to be at bottom to take precedence */\n.muigui-auto-place {\n max-height: 100%;\n position: fixed;\n top: 0;\n right: 15px;\n z-index: 100001;\n}\n\n',themes:{default:"",float:"\n :root {\n color-scheme: light dark,\n }\n\n .muigui {\n --width: 400px;\n --bg-color: initial;\n --label-width: 25%;\n --number-width: 20%;\n }\n\n input,\n .muigui-label-controller>label {\n text-shadow:\n -1px -1px 0 var(--contrast-color),\n 1px -1px 0 var(--contrast-color),\n -1px 1px 0 var(--contrast-color),\n 1px 1px 0 var(--contrast-color);\n }\n\n .muigui-controller > label:nth-child(1) {\n place-content: center end;\n margin-right: 1em;\n }\n\n .muigui-value > :nth-child(2) {\n margin-left: 1em;\n }\n\n .muigui-root>*:nth-child(1) {\n display: none;\n }\n\n .muigui-range input[type=range]::-webkit-slider-thumb {\n border-radius: 1em;\n }\n\n .muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: initial;\n appearance: none;\n border: 1px solid rgba(0, 0, 0, 0.25);\n height: 2px;\n }\n\n .muigui-colors {\n --value-color: var(--color );\n --value-bg-color: rgba(0, 0, 0, 0.1);\n --disabled-color: #cccccc;\n --menu-bg-color: rgba(0, 0, 0, 0.1);\n --menu-sep-color: #bbbbbb;\n --hover-bg-color: rgba(0, 0, 0, 0);\n --invalid-color: #FF0000;\n --selected-color: rgba(0, 0, 0, 0.3);\n --range-color: rgba(0, 0, 0, 0.125);\n }\n"}};function e(t,e={},n=[]){const i=document.createElement(t);return function(t,e,n){for(const[n,i]of Object.entries(e))if("function"==typeof i&&n.startsWith("on")){const e=n.substring(2).toLowerCase();t.addEventListener(e,i,{passive:!1})}else if("object"==typeof i)for(const[e,o]of Object.entries(i))t[n][e]=o;else void 0===t[n]?t.setAttribute(n,i):t[n]=i;for(const e of n)t.appendChild(e)}(i,e,n),i}let n=0;function i(t,e){const n=t.indexOf(e);return n&&t.splice(n,1),t}function o(t,e,n){return Math.max(e,Math.min(n,t))}const r="undefined"!=typeof SharedArrayBuffer?function(t){return t&&t.buffer&&(t.buffer instanceof ArrayBuffer||t.buffer instanceof SharedArrayBuffer)}:function(t){return t&&t.buffer&&t.buffer instanceof ArrayBuffer},s=(t,e,n)=>Math.round(e(t)/n)/(1/n),a=(t,e)=>(t%e+e)%e;function l(t,e){for(const n in e)n in t&&(t[n]=e[n]);return t}const u=(t,e,n,i,o)=>(t-e)*(o-i)/(n-e)+i,c=({from:t,to:e})=>({to:n=>u(n,...t,...e),from:n=>[!0,u(n,...e,...t)]}),h=({from:t,to:e,step:n})=>({min:e[0],max:e[1],...n&&{step:n},converters:c({from:t,to:e})}),d={to:t=>t,from:t=>[!0,t]};function p(t,e,n,i,o){const{converters:{from:r}=d}=o,{min:s,max:a}=o,l=o.minRange||0,u=r(l)[1],c=t.add(e,n,{...o,min:s,max:a-l}).onChange((t=>{h.setValue(Math.min(a,Math.max(t+u,e[i])))})),h=t.add(e,i,{...o,min:s+l,max:a}).onChange((t=>{c.setValue(Math.max(s,Math.min(t-u,e[n])))}));return[c,h]}class m{#t;#e=[];constructor(t){this.domElement=t,this.#t=t}addElem(t){return this.#t.appendChild(t),t}removeElem(t){return this.#t.removeChild(t),t}pushSubElem(t){this.#t.appendChild(t),this.#t=t}popSubElem(){this.#t=this.#t.parentElement}add(t){return this.#e.push(t),this.addElem(t.domElement),t}remove(t){return this.removeElem(t.domElement),i(this.#e,t),t}pushSubView(t){this.pushSubElem(t.domElement)}popSubView(){this.popSubElem()}setOptions(t){for(const e of this.#e)e.setOptions(t)}updateDisplayIfNeeded(t,e){for(const n of this.#e)n.updateDisplayIfNeeded(t,e);return this}$(t){return this.domElement.querySelector(t)}}class g extends m{#n;#i;#o;constructor(t){super(e("div",{className:"muigui-controller"})),this.#n=[],this.#i=[],t&&this.domElement.classList.add(t)}get parent(){return this.#o}setParent(t){this.#o=t,this.enable(!this.disabled())}show(t=!0){return this.domElement.classList.toggle("muigui-hide",!t),this.domElement.classList.toggle("muigui-show",t),this}hide(){return this.show(!1)}disabled(){return!!this.domElement.closest(".muigui-disabled")}enable(t=!0){return this.domElement.classList.toggle("muigui-disabled",!t),["input","button","select","textarea"].forEach((t=>{this.domElement.querySelectorAll(t).forEach((t=>{const e=!!t.closest(".muigui-disabled");t.disabled=e}))})),this}disable(t=!0){return this.enable(!t)}onChange(t){return this.removeChange(t),this.#n.push(t),this}removeChange(t){return i(this.#n,t),this}onFinishChange(t){return this.removeFinishChange(t),this.#i.push(t),this}removeFinishChange(t){return i(this.#i,t),this}#r(t,e){for(const n of t)n.call(this,e)}emitChange(t,e,n){this.#r(this.#n,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitChange({object:e,property:n,value:t,controller:this}))}emitFinalChange(t,e,n){this.#r(this.#i,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitFinalChange({object:e,property:n,value:t,controller:this}))}updateDisplay(){}getColors(){const t=t=>t.replace(/-([a-z])/g,((t,e)=>e.toUpperCase())),n=e("div");this.domElement.appendChild(n);const i=Object.fromEntries(["color","bg-color","value-color","value-bg-color","hover-bg-color","menu-bg-color","menu-sep-color","disabled-color"].map((e=>{n.style.color=`var(--${e})`;const i=getComputedStyle(n);return[t(e),i.color]})));return n.remove(),i}}class f extends g{#s;#a;#l;#u={name:""};constructor(t,n,i={}){super("muigui-button",""),this.#s=t,this.#a=n,this.#l=this.addElem(e("button",{type:"button",onClick:()=>{this.#s[this.#a](this)}})),this.setOptions({name:n,...i})}setOptions(t){l(this.#u,t);const{name:e}=this.#u;this.#l.textContent=e}}function b(t,e){if(t.length!==e.length)return!1;for(let n=0;n{t.setValue(i.checked)},onChange:()=>{t.setFinalValue(i.checked)}});super(e("label",{},[i])),this.#b=i}updateDisplay(t){this.#b.checked=t}}const w=[],y=new Set;let k,E;function $(){k=void 0,E=!0;for(const t of w)y.has(t)||t();E=!1,y.size&&(E?C():(y.forEach((t=>{i(w,t)})),y.clear())),C()}function C(){!k&&w.length&&(k=requestAnimationFrame($))}let V=0;function I(){return"muigui-"+ ++V}class M extends m{constructor(t=""){super(e("div",{className:"muigui-value"})),t&&this.domElement.classList.add(t)}}class S extends g{#v;#x;constructor(t="",n=""){super("muigui-label-controller"),this.#v=I(),this.#x=e("label",{for:this.#v}),this.domElement.appendChild(this.#x),this.pushSubView(new M(t)),this.name(n)}get id(){return this.#v}name(t){return this.#x.title===this.#x.textContent&&(this.#x.title=t),this.#x.textContent=t,this}tooltip(t){this.#x.title=t}}class D extends S{#s;#a;#w;#y;#e;#k;constructor(t,e,n=""){super(n,e),this.#s=t,this.#a=e,this.#w=this.getValue(),this.#y=!1,this.#e=[]}get initialValue(){return this.#w}get object(){return this.#s}get property(){return this.#a}add(t){return this.#e.push(t),super.add(t),this.updateDisplay(),t}#E(t,e){let n=!1;if("object"==typeof t){const e=this.#s[this.#a];if(Array.isArray(t)||r(t))for(let i=0;i=0&&w.splice(e,1)}(this.#k)),this}}class N extends D{constructor(t,e){super(t,e,"muigui-checkbox");const n=this.id;this.add(new x(this,n)),this.updateDisplay()}}const F={to:t=>t,from:t=>[!0,t]},A={to:t=>t.toString(),from:t=>{const e=parseFloat(t);return[!Number.isNaN(e),e]}},U={radToDeg:c({to:[0,180],from:[0,Math.PI]})};function L(){let t=0;return function(e,n,i=5){t-=e.deltaY*n/i;const o=Math.floor(Math.abs(t)/n)*Math.sign(t)*n;return t-=o,o}}class O extends v{#$;#C;#V;#I;#u={step:.01,converters:A,min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY};constructor(t,n){const i=t.setValue.bind(t),r=t.setFinalValue.bind(t),a=L();super(e("input",{type:"number",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(r,!1),onWheel:e=>{e.preventDefault();const{min:n,max:i,step:r}=this.#u,l=a(e,r),u=parseFloat(this.domElement.value),c=o(s(u+l,(t=>t),r),n,i);t.setValue(c)}})),this.setOptions(n)}#M(t,e){const n=parseFloat(this.domElement.value),[i,r]=this.#C(n);let s;if(i&&!Number.isNaN(n)){const{min:n,max:i}=this.#u;s=r>=n&&r<=i,this.#I=e,t(o(r,n,i))}this.domElement.classList.toggle("muigui-invalid-value",!i||!s)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,converters:{to:n,from:i}}=this.#u;return this.#$=n,this.#C=i,this.#V=e,this}}class j extends D{#S;#V;constructor(t,e,n={}){super(t,e,"muigui-checkbox"),this.#S=this.add(new O(this,n)),this.updateDisplay()}}class T extends v{#D;constructor(t,n){const i=[];super(e("select",{onChange:()=>{t.setFinalValue(this.#D[this.domElement.selectedIndex])}},n.map((([t,n])=>(i.push(n),e("option",{textContent:t})))))),this.#D=i}updateDisplay(t){const e=this.#D.indexOf(t);this.domElement.selectedIndex=e}}function H(t,e){return Array.isArray(t)?Array.isArray(t[0])?t:e?t.map(((t,e)=>[t,e])):t.map((t=>[t,t])):[...Object.entries(t)]}class z extends D{constructor(t,e,n){super(t,e,"muigui-select");const i="number"==typeof this.getValue(),{keyValues:o}=n,r=H(o,i);this.add(new T(this,r)),this.updateDisplay()}}class P extends v{#$;#C;#V;#I;#u={step:.01,min:0,max:1,converters:F};constructor(t,n){const i=L();super(e("input",{type:"range",onInput:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setValue(u)},onChange:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setFinalValue(u)},onWheel:e=>{e.preventDefault();const[n,r]=this.#C(parseFloat(this.domElement.value));if(!n)return;const{min:a,max:l,step:u}=this.#u,c=i(e,u),h=o(s(r+c,(t=>t),u),a,l);t.setValue(h)}})),this.setOptions(n)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,min:n,max:i,converters:{to:o,from:r}}=this.#u;return this.#$=o,this.#C=r,this.#V=e,this.domElement.step=e,this.domElement.min=n,this.domElement.max=i,this}}class B extends D{constructor(t,e,n){super(t,e,"muigui-range"),this.add(new P(this,n)),this.add(new O(this,n))}}class G extends v{#$;#C;#I;#u={converters:F};constructor(t,n){const i=t.setValue.bind(t),o=t.setFinalValue.bind(t);super(e("input",{type:"text",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(o,!1)})),this.setOptions(n)}#M(t,e){const[n,i]=this.#C(this.domElement.value);n&&(this.#I=e,t(i)),this.domElement.style.color=n?"":"var(--invalid-color)"}updateDisplay(t){this.#I||(this.domElement.value=this.#$(t),this.domElement.style.color=""),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class R extends D{constructor(t,e){super(t,e,"muigui-checkbox"),this.add(new G(this)),this.updateDisplay()}}const _=(t,e,n)=>Math.max(e,Math.min(n,t)),Y=(t,e,n)=>t+(e-t)*n,W=t=>t>=0?t%1:1-t%1,q=t=>+t.toFixed(0),K=t=>+t.toFixed(3),J=t=>parseInt(t.substring(1,3),16)<<16|parseInt(t.substring(3,5),16)<<8|parseInt(t.substring(5,7),16),X=t=>parseInt(t.substring(1,3),16)*2**24+65536*parseInt(t.substring(3,5),16)+256*parseInt(t.substring(5,7),16)+parseInt(t.substring(7,9),16),Z=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)],Q=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,tt=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16),parseInt(t.substring(7,9),16)],et=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,nt=t=>Z(t).map((t=>K(t/255))),it=t=>Q(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),ot=t=>tt(t).map((t=>K(t/255))),rt=t=>et(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),st=t=>_(Math.round(255*t),0,255).toString(16).padStart(2,"0"),at=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255}),lt=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255,a:parseInt(t.substring(7,9),16)/255}),ut=t=>`rgb(${Z(t).join(", ")})`,ct=/^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,ht=t=>`rgba(${tt(t).map(((t,e)=>3===e?t/255:t)).join(", ")})`,dt=/^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+\.\d+|\d+)\s*\)\s*$/,pt=t=>{const e=yt(Z(t)).map((t=>q(t)));return`hsl(${e[0]}, ${e[1]}%, ${e[2]}%)`},mt=t=>{const e=kt(tt(t)).map(((t,e)=>3===e?K(t):q(t)));return`hsl(${e[0]} ${e[1]}% ${e[2]}% / ${e[3]})`},gt=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\)\s*$/,ft=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\/\s*(\d+\.\d+|\d+)\s*\)\s*$/,bt=(t,e)=>(t%e+e)%e;function vt([t,e,n]){t=bt(t,360),e=_(e/100,0,1),n=_(n/100,0,1);const i=e*Math.min(n,1-n);function o(e){const o=(e+t/30)%12;return n-i*Math.max(-1,Math.min(o-3,9-o,1))}return[o(0),o(8),o(4)].map((t=>Math.round(255*t)))}function xt([t,e,n]){const i=Math.max(t,e,n),o=Math.min(t,e,n),r=.5*(o+i),s=i-o;let a=0,l=0;if(0!==s)switch(l=0===r||1===r?0:(i-r)/Math.min(r,1-r),i){case t:a=(e-n)/s+(e{const[e,n,i]=xt(t.map((t=>t/255)));return[360*e,100*n,100*i]},kt=t=>{const[e,n,i,o]=wt(t.map((t=>t/255)));return[360*e,100*n,100*i,o]};function Et([t,e,n]){return e=_(e,0,1),n=_(n,0,1),[t,t+2/3,t+1/3].map((t=>Y(1,_(Math.abs(6*W(t)-3)-1,0,1),e)*n))}function $t([t,e,n,i]){return[...Et([t,e,n]),i]}const Ct=t=>Math.round(1e3*t)/1e3;function Vt([t,e,n]){const i=n>e?[n,e,-1,2/3]:[e,n,0,-1/3],o=i[0]>t?[i[0],i[1],i[3],t]:[t,i[1],i[2],i[0]],r=o[0]-Math.min(o[3],o[1]);return[Math.abs(o[2]+(o[3]-o[1])/(6*r+Number.EPSILON)),r/(o[0]+Number.EPSILON),o[0]].map(Ct)}const It=t=>t.endsWith("a")||t.startsWith("hex8"),Mt=[{re:/^#(?:[0-9a-f]){6}$/i,format:"hex6"},{re:/^(?:[0-9a-f]){6}$/i,format:"hex6-no-hash"},{re:/^#(?:[0-9a-f]){8}$/i,format:"hex8"},{re:/^(?:[0-9a-f]){8}$/i,format:"hex8-no-hash"},{re:/^#(?:[0-9a-f]){3}$/i,format:"hex3"},{re:/^(?:[0-9a-f]){3}$/i,format:"hex3-no-hash"},{re:ct,format:"css-rgb"},{re:gt,format:"css-hsl"},{re:dt,format:"css-rgba"},{re:ft,format:"css-hsla"}];function St(t){switch(typeof t){case"number":return console.warn('can not reliably guess format based on a number. You should pass in a format like {format: "uint32-rgb"} or {format: "uint32-rgb"}'),t<=16777215?"uint32-rgb":"uint32-rgba";case"string":{const e=function(t){for(const e of Mt)if(e.re.test(t))return e}(t.trim());if(e)return e.format;break}case"object":if(t instanceof Uint8Array||t instanceof Uint8ClampedArray){if(3===t.length)return"uint8-rgb";if(4===t.length)return"uint8-rgba"}else if(t instanceof Float32Array){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if(Array.isArray(t)){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if("r"in t&&"g"in t&&"b"in t)return"a"in t?"object-rgba":"object-rgb"}throw new Error(`unknown color format: ${t}`)}function Dt(t){return t.trim(t)}function Nt(t){return t.trim(t)}function Ft(t){return t[1]===t[2]&&t[3]===t[4]&&t[5]===t[6]?`#${t[1]}${t[3]}${t[5]}`:t}const At=/^(#|)([0-9a-f]{3})$/i;function Ut(t){const e=At.exec(t);if(e){const[,,t]=e;return"#"+`${(n=t)[0]}${n[0]}${n[1]}${n[1]}${n[2]}${n[2]}`}var n;return t}function Lt(t){return Ft(Dt(t))}const Ot=t=>{const e=ct.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),`rgb(${n.join(", ")})`]},jt=t=>{const e=dt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?parseFloat(t):parseInt(t)));return[!n.find((t=>t>255)),`rgba(${n.join(", ")})`]},Tt=t=>{const e=gt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]}, ${n[1]}%, ${n[2]}%)`]},Ht=t=>{const e=ft.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]} ${n[1]}% ${n[2]}% / ${n[3]})`]},zt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Pt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Bt=/^\s*(?:0x){0,1}([0-9a-z]{1,6})\s*$/i,Gt=/^\s*(?:0x){0,1}([0-9a-z]{1,8})\s*$/i,Rt=/^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i,_t=/^\s*[a-f0-9]{6}\s*$/i,Yt=/^\s*#[a-f0-9]{8}\s*$/i,Wt=/^\s*[a-f0-9]{8}\s*$/i,qt={hex6:{color:{from:t=>[!0,t],to:Dt},text:{from:t=>[Rt.test(t),t.trim()],to:t=>t}},hex8:{color:{from:t=>[!0,t],to:Nt},text:{from:t=>[Yt.test(t),t.trim()],to:t=>t}},hex3:{color:{from:t=>[!0,Lt(t)],to:Ut},text:{from:t=>[Rt.test(t),Ft(t.trim())],to:t=>t}},"hex6-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Dt(t)}`},text:{from:t=>[_t.test(t),t.trim()],to:t=>t}},"hex8-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Nt(t)}`},text:{from:t=>[Wt.test(t),t.trim()],to:t=>t}},"hex3-no-hash":{color:{from:t=>[!0,Lt(t).substring(1)],to:Ut},text:{from:t=>[_t.test(t),Ft(t.trim())],to:t=>t}},"uint32-rgb":{color:{from:t=>[!0,J(t)],to:t=>`#${Math.round(t).toString(16).padStart(6,"0")}`},text:{from:t=>(t=>{const e=Bt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(6,"0")}`}},"uint32-rgba":{color:{from:t=>[!0,X(t)],to:t=>`#${Math.round(t).toString(16).padStart(8,"0")}`},text:{from:t=>(t=>{const e=Gt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(8,"0")}`}},"uint8-rgb":{color:{from:t=>[!0,Z(t)],to:Q},text:{from:t=>{const e=zt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"uint8-rgba":{color:{from:t=>[!0,tt(t)],to:et},text:{from:t=>{const e=Pt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"float-rgb":{color:{from:t=>[!0,nt(t)],to:it},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(3!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"float-rgba":{color:{from:t=>[!0,ot(t)],to:rt},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(4!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"object-rgb":{color:{from:t=>[!0,at(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b))throw new Error("not {r, g, b}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}`}},"object-rgba":{color:{from:t=>[!0,lt(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}${st(t.a)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b)||Number.isNaN(n.a))throw new Error("not {r, g, b, a}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}, a:${K(t.a)}}`}},"css-rgb":{color:{from:t=>[!0,ut(t)],to:t=>{const e=ct.exec(t);return Q([e[1],e[2],e[3]].map((t=>parseInt(t))))}},text:{from:Ot,to:t=>Ot(t)[1]}},"css-rgba":{color:{from:t=>[!0,ht(t)],to:t=>{const e=dt.exec(t);return et([e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?255*parseFloat(t)|0:parseInt(t))))}},text:{from:jt,to:t=>jt(t)[1]}},"css-hsl":{color:{from:t=>[!0,pt(t)],to:t=>{const e=gt.exec(t),n=vt([e[1],e[2],e[3]].map((t=>parseFloat(t))));return Q(n)}},text:{from:Tt,to:t=>Tt(t)[1]}},"css-hsla":{color:{from:t=>[!0,mt(t)],to:t=>{const e=ft.exec(t),n=function([t,e,n,i]){return[...vt([t,e,n]),255*i|0]}([e[1],e[2],e[3],e[4]].map((t=>parseFloat(t))));return et(n)}},text:{from:Ht,to:t=>Ht(t)[1]}}};class Kt extends m{constructor(t,n){super(e(t,{className:n}))}}class Jt extends S{#N;constructor(){super("muigui-canvas"),this.#N=this.add(new Kt("canvas","muigui-canvas")).domElement}get canvas(){return this.#N}}class Xt extends v{#$;#C;#F;#I;#u={converters:F};constructor(t,n){const i=e("input",{type:"color",onInput:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setValue(n))},onChange:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setFinalValue(n))}});super(e("div",{},[i])),this.setOptions(n),this.#F=i}updateDisplay(t){this.#I||(this.#F.value=this.#$(t)),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class Zt extends D{#A;#S;constructor(t,e,n={}){super(t,e,"muigui-color");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#A=this.add(new Xt(this,{converters:o})),this.#S=this.add(new G(this,{converters:r})),this.updateDisplay()}setOptions(t){const{format:e}=t;if(e){const{color:t,text:n}=qt[e];this.#A.setOptions({converters:t}),this.#S.setOptions({converters:n})}return super.setOptions(t),this}}class Qt extends g{constructor(){super("muigui-divider")}}class te extends g{#U;#L;constructor(t){super(t),this.#U=[],this.#L=this}get children(){return this.#U}get controllers(){return this.#U.filter((t=>!(t instanceof te)))}get folders(){return this.#U.filter((t=>t instanceof te))}reset(t=!0){for(const e of this.#U)e instanceof te&&!t||e.reset(t);return this}updateDisplay(){for(const t of this.#U)t.updateDisplay();return this}remove(t){const e=this.#U.indexOf(t);if(e>=0){const t=this.#U.splice(e,1)[0];t.domElement.remove(),t.setParent(null)}return this}_addControllerImpl(t){return this.domElement.appendChild(t.domElement),this.#U.push(t),t.setParent(this),t}addController(t){return this.#L._addControllerImpl(t)}pushContainer(t){return this.addController(t),this.#L=t,t}popContainer(){return this.#L=this.#L.parent,this}}class ee extends te{#O;constructor(t="Controls",n="muigui-menu"){super(n),this.#O=e("label"),this.addElem(e("button",{type:"button",onClick:()=>this.toggleOpen()},[this.#O])),this.pushContainer(new te),this.name(t),this.open()}open(t=!0){return this.domElement.classList.toggle("muigui-closed",!t),this.domElement.classList.toggle("muigui-open",t),this}close(){return this.open(!1)}name(t){return this.#O.textContent=t,this}title(t){return this.name(t)}toggleOpen(){return this.open(!this.domElement.classList.contains("muigui-open")),this}}class ne extends g{constructor(t){super("muigui-label"),this.text(t)}text(t){return this.domElement.textContent=t,this}}function ie(){}function oe(t,e,n){const i=t.getBoundingClientRect(),o=e.clientX-i.left,r=e.clientY-i.top,s=o/i.width,a=r/i.height,l=o-(n=n||[o,r])[0],u=r-n[1];return{x:o,y:r,nx:s,ny:a,dx:l,dy:u,ndx:l/i.width,ndy:u/i.width}}function re(t,{onDown:e=ie,onMove:n=ie,onUp:i=ie}){let o;const r=function(e){const i={type:"move",...oe(t,e,o)};n(i)},s=function(e){t.releasePointerCapture(e.pointerId),t.removeEventListener("pointermove",r),t.removeEventListener("pointerup",s),document.body.style.backgroundColor="",i("up")},a=function(n){t.addEventListener("pointermove",r),t.addEventListener("pointerup",s),t.setPointerCapture(n.pointerId);const i=oe(t,n);o=[i.x,i.y],e({type:"down",...i})};return t.addEventListener("pointerdown",a),function(){t.removeEventListener("pointerdown",a)}}function se(t){return t.querySelectorAll("[data-src]").forEach((e=>{const i="muigui-id-"+n++;e.id=i,t.querySelectorAll(`[data-target=${e.dataset.src}]`).forEach((t=>{t.setAttribute("fill",`url(#${i})`)}))})),t}class ae extends v{#$;#C;#j;#T;#H;#z;#P;#B;#G;#R;#_;#Y;#W;#q;#u={converters:F,alpha:!1};#K;#J;constructor(t,n){super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n\n \n \n \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n \n \n \n \n \n \n\n',className:"muigui-no-scroll"})),this.#j=this.domElement.children[0],this.#H=this.domElement.children[1],this.#B=this.domElement.children[2],se(this.#j),se(this.#H),se(this.#B),this.#T=this.$(".muigui-color-chooser-circle"),this.#z=this.$("[data-src=muigui-color-chooser-hue]"),this.#P=this.$(".muigui-color-chooser-hue-cursor"),this.#G=this.$("[data-src=muigui-color-chooser-alpha]"),this.#R=this.$(".muigui-color-chooser-alpha-cursor");const i=e=>{const n=o(e.nx,0,1),i=o(e.ny,0,1);this.#_[1]=n,this.#_[2]=1-i,this.#Y=!0,this.#q=!0;const[r,s]=this.#C(this.#K(this.#_));r&&t.setValue(s)},r=e=>{const n=o(e.nx,0,1);this.#_[0]=n,this.#W=!0,this.#q=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)},s=e=>{const n=o(e.nx,0,1);this.#_[3]=n,this.#Y=!0,this.#W=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)};re(this.#j,{onDown:i,onMove:i}),re(this.#H,{onDown:r,onMove:r}),re(this.#B,{onDown:s,onMove:s}),this.setOptions(n)}updateDisplay(t){this.#_||(this.#_=this.#J(this.#$(t)));{const[e,n,i,o=1]=this.#J(this.#$(t));this.#Y||(this.#_[0]=n>.001&&i>.001?e:this.#_[0]),this.#W||(this.#_[1]=n,this.#_[2]=i),this.#q||(this.#_[3]=o)}{const[t,e,n,i]=this.#_,[o,r,s]=wt($t(this.#_));this.#Y||this.#P.setAttribute("transform",`translate(${64*t}, 0)`),this.#z.children[0].setAttribute("stop-color",`hsl(${360*o} 0% 100% / ${i})`),this.#z.children[1].setAttribute("stop-color",`hsl(${360*o} 100% 50% / ${i})`),this.#q||this.#R.setAttribute("transform",`translate(${64*i}, 0)`),this.#G.children[0].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 0)`),this.#G.children[1].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 1)`),this.#W||(this.#T.setAttribute("cx",""+64*e),this.#T.setAttribute("cy",""+48*(1-n)))}this.#Y=!1,this.#W=!1,this.#q=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n},alpha:i}=this.#u;return this.#B.style.display=i?"":"none",this.#K=i?t=>rt($t(t)):t=>it(Et(t)),this.#J=i?t=>function([t,e,n,i]){return[...Vt([t,e,n]),i]}(ot(t)):t=>Vt(nt(t)),this.#$=e,this.#C=n,this}}class le extends D{#X;#Z;#b;#Q;#u={open:!1};constructor(t,n,i={}){super(t,n,"muigui-pop-down-controller"),this.#X=this.add(new Kt("div","muigui-pop-down-top"));const o=this.#X.addElem(e("input",{type:"checkbox",onChange:()=>{this.#u.open=o.checked,this.updateDisplay()}}));this.#b=o,this.#Z=this.#X.add(new Kt("div","muigui-pop-down-values")),this.#Q=this.add(new Kt("div","muigui-pop-down-bottom")),this.setOptions(i)}setKnobColor(t){this.#b&&(this.#b.style=`\n --range-color: ${t};\n --value-bg-color: ${t};\n `)}updateDisplay(){super.updateDisplay();const{open:t}=this.#u;this.domElement.children[1].classList.toggle("muigui-open",t),this.domElement.children[1].classList.toggle("muigui-closed",!t)}setOptions(t){l(this.#u,t),super.setOptions(t),this.updateDisplay()}addTop(t){return this.#Z.add(t)}addBottom(t){return this.#Q.add(t)}}class ue extends le{#A;#S;#$;constructor(t,e,n={}){super(t,e,"muigui-color-chooser");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#$=o.to,this.#S=new G(this,{converters:r,alpha:It(i)}),this.#A=new ae(this,{converters:o,alpha:It(i)}),this.addTop(this.#S),this.addBottom(this.#A),this.__setKnobHelper=()=>{if(this.#$){const t=this.#$(this.getValue()),e=yt(Z(t));e[2]=(e[2]+50)%100;const n=Q(vt(e));this.setKnobColor(`${t.substring(0,7)}FF`,n)}},this.updateDisplay()}updateDisplay(){super.updateDisplay(),this.__setKnobHelper&&this.__setKnobHelper()}setOptions(t){return super.setOptions(t),this}}class ce extends ee{add(t,e,...n){const i=t instanceof g?t:function(t,e,...n){const[i]=n;if(Array.isArray(i))return new z(t,e,{keyValues:i});const o=typeof t[e];switch(o){case"number":if("number"==typeof n[0]&&"number"==typeof n[1]){const i=n[0],o=n[1],r=n[2];return new B(t,e,{min:i,max:o,...r&&{step:r}})}return 0===n.length?new j(t,e,...n):new B(t,e,...n);case"boolean":return new N(t,e,...n);case"function":return new f(t,e,...n);case"string":return new R(t,e,...n);case"undefined":throw new Error(`no property named ${e}`);default:throw new Error(`unhandled type ${o} for property ${e}`)}}(t,e,...n);return this.addController(i)}addCanvas(t){return this.addController(new Jt(t))}addColor(t,e,n={}){const i=t[e];return It(n.format||St(i))?this.addController(new ue(t,e,n)):this.addController(new Zt(t,e,n))}addDivider(){return this.addController(new Qt)}addFolder(t){return this.addController(new ce(t))}addLabel(t){return this.addController(new ne(t))}}class he extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}}customElements.define("muigui-element",he);const de=new CSSStyleSheet;de.replaceSync(t.default);const pe=new CSSStyleSheet;function me(t){let e,n;function i(){if(e&&!n){const o=e;e=void 0,n=t.replace(o).then((()=>{n=void 0,i()}))}}return function(t){e=t,i()}}const ge=me(de),fe=me(pe);class be extends ce{static converters=U;static mapRange=u;static makeRangeConverters=c;static makeRangeOptions=h;static makeMinMaxPair=p;#tt=new CSSStyleSheet;constructor(t={}){super("Controls","muigui-root"),t instanceof HTMLElement&&(t={parent:t});const{autoPlace:n=!0,width:i,title:o="Controls"}=t;let{parent:r}=t;if(i&&(this.domElement.style.width=/^\d+$/.test(i)?`${i}px`:i),void 0===r&&n&&(r=document.body,this.domElement.classList.add("muigui-auto-place")),r){const t=e("muigui-element");t.shadowRoot.adoptedStyleSheets=[de,pe,this.#tt],t.shadow.appendChild(this.domElement),r.appendChild(t)}o&&this.title(o),this.domElement.classList.add("muigui","muigui-colors")}setStyle(t){this.#tt.replace(t)}static setBaseStyles(t){ge(t)}static getBaseStyleSheet(){return de}static setUserStyles(t){fe(t)}static getUserStyleSheet(){return pe}static setTheme(e){be.setBaseStyles(`${t.default}\n${t.themes[e]||""}`)}}function ve(){}const xe={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};function we(t,{onDown:e=ve,onUp:n=ve}){const i=function(t){const i=t.shiftKey?10:1,[o,r]=(xe[t.key]||[0,0]).map((t=>t*i));("keydown"===t.type?e:n)({type:t.type.substring(3),dx:o,dy:r,event:t})};return t.addEventListener("keydown",i),t.addEventListener("keyup",i),function(){t.removeEventListener("keydown",i),t.removeEventListener("keyup",i)}}function ye(t,e=""){if(!t)throw new Error(e)}function ke(t,e,n,i,o,r){const s=Math.abs(n)*Math.cos(r),a=Math.abs(i)*Math.sin(r);return[t+Math.cos(o)*s-Math.sin(o)*a,e+Math.sin(o)*s+Math.cos(o)*a]}function Ee(t,e,n,i,o){ye(Math.abs(i-o)<=2*Math.PI),ye(i>=-Math.PI&&i<=2*Math.PI),ye(i<=o),ye(o>=-Math.PI&&o<=4*Math.PI);const{x1:r,y1:s,x2:a,y2:l,fa:u,fs:c}=function(t,e,n,i,o,r,s){const[a,l]=ke(t,e,n,i,o,r),[u,c]=ke(t,e,n,i,o,r+s);return{x1:a,y1:l,x2:u,y2:c,fa:Math.abs(s)>Math.PI?1:0,fs:s>0?1:0}}(t,e,n,n,0,i,o-i);return Math.abs(Math.abs(i-o)-2*Math.PI)>Number.EPSILON?`M${t} ${e} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l} L${t} ${e}`:`M${r} ${s} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l}`}const $e=t=>a(t+Math.PI,2*Math.PI)-Math.PI;class Ce extends v{#et;#nt;#it;#ot;#u={step:1,min:-180,max:180,dirMin:-Math.PI,dirMax:Math.PI,wrap:void 0,converters:F};constructor(t,n={}){const i=L();super(e("div",{className:"muigui-direction muigui-no-scroll",innerHTML:'\n\n \x3c!----\x3e\n \n \n \n \n \n \n\n',onWheel:e=>{e.preventDefault();const{min:n,max:r,step:l}=this.#u,u=i(e,l);let c=this.#it+u;this.#ot&&(c=a(c-n,r-n)+n);const h=o(s(c,(t=>t),l),n,r);t.setValue(h)}}));const r=e=>{const{min:n,max:i,step:r,dirMin:a,dirMax:l}=this.#u,u=2*e.nx-1,c=2*e.ny-1,h=Math.atan2(c,u),d=(a+l)/2,p=o(($e(h-d)-$e(a-d))/(l-a),0,1),m=s(n+(i-n)*p,(t=>t),r);t.setValue(m)};re(this.domElement,{onDown:r,onMove:r}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),this.#et=this.$("#muigui-arrow"),this.#nt=this.$("#muigui-range"),this.setOptions(n)}updateDisplay(t){this.#it=t;const{min:e,max:n}=this.#u,i=(t-e)/(n-e),o=(r=this.#u.dirMin,s=this.#u.dirMax,r+(s-r)*i);var r,s;this.#et.style.transform=`rotate(${o}rad)`}setOptions(t){l(this.#u,t);const{dirMin:e,dirMax:n,wrap:i}=this.#u;this.#ot=void 0!==i?i:Math.abs(e-n)>=2*Math.PI-Number.EPSILON;const[o,r]=e(o.push(i),e("label",{},[e("input",{type:"radio",name:r,value:a,onChange:function(){this.checked&&t.setFinalValue(s.#D[this.value])}}),e("button",{type:"button",textContent:n,onClick:function(){this.previousElementSibling.click()}})]))))));const s=this;this.#D=o,this.cols(i)}updateDisplay(t){const e=this.#D.indexOf(t);for(let t=0;t{e({rect:t.getBoundingClientRect(),elem:t})})).observe(t)}function Me(t,e,n,i){Ie(t,(({rect:o})=>{const{width:r,height:s}=o;t.setAttribute("viewBox",`-${r*e} -${s*n} ${r} ${s}`),i({elem:t,rect:o})}))}function Se(t,e,n,i,o,r){const a=[];tt),n)),e=Math.min(e,o);for(let i=t;i<=e;i+=n)a.push(`M${i} 0 l0 ${r}`);return a.join(" ")}class De extends v{#rt;#st;#at;#lt;#ut;#ct;#ht;#dt;#pt;#it;#mt;#u={min:-100,max:100,step:1,unit:10,unitSize:10,ticksPerUnit:5,labelFn:t=>t,tickHeight:1,limits:!0,thicksColor:void 0,orientation:void 0};constructor(t,n){const i=L();let r;super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \x3c!----\x3e\n \x3c!----\x3e\n \n \n \n \n\n',className:"muigui-no-v-scroll",onWheel:e=>{e.preventDefault();const{min:n,max:r,step:a}=this.#u,l=i(e,a),u=o(s(this.#it+l,(t=>t),a),n,r);t.setValue(u)}})),this.#rt=this.$("svg"),this.#st=this.$("#muigui-origin"),this.#at=this.$("#muigui-ticks"),this.#lt=this.$("#muigui-thicks"),this.#ut=this.$("#muigui-numbers"),this.#ct=this.$("#muigui-left-grad"),this.#ht=this.$("#muigui-right-grad"),this.setOptions(n),re(this.domElement,{onDown:()=>{r=this.#it},onMove:e=>{const{min:n,max:i,unitSize:a,unit:l,step:u}=this.#u,c=o(s(r-e.dx/a*l,(t=>t),u),n,i);t.setValue(c)}}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),Me(this.#rt,.5,0,(({rect:{width:t}})=>{this.#ct.setAttribute("x",-t/2),this.#ht.setAttribute("x",t/2-20),this.#mt=function(t){const e=t.innerHTML;t.innerHTML="- ";const n=t.querySelector("text").getComputedTextLength();return t.innerHTML=e,n}(this.#ut),this.#dt=t,this.#gt()}))}#gt(){if(!this.#dt||void 0===this.#it)return;const{labelFn:t,limits:e,min:n,max:i,orientation:o,tickHeight:r,ticksPerUnit:a,unit:l,unitSize:u,thicksColor:c}=this.#u,h=Math.ceil(this.#dt/u),d=this.#it/l,p=Math.round(d-h),m=p*u,g=(p+2*h)*u,f=e?n*u/l:m,b=e?i*u/l:g,v=""===t(1)?10:5;a>1&&this.#at.setAttribute("d",Se(m,g,u/a,f,b,v*r)),this.#lt.style.stroke=c,this.#lt.setAttribute("d",Se(m,g,u,f,b,v)),this.#ut.innerHTML=function(t,e,n,i,o,r,a,l){const u=[];tt),n)),e=Math.min(e,a);const c=Math.max(0,-Math.log10(i));for(let r=t;r<=e;r+=n)u.push(`${h=r/n*i,l(h.toFixed(c))}`);var h;return u.join("\n")}(m,g,u,l,this.#mt,f,b,t),this.#st.setAttribute("transform",`translate(${-this.#it*u/l} 0)`),this.#rt.classList.toggle("muigui-slider-up","up"===o)}updateDisplay(t){this.#it=t,this.#gt()}setOptions(t){return l(this.#u,t),this}}class Ne extends v{#rt;#et;#T;#it=[];constructor(t){super(e("div",{innerHTML:'\n\n \n \n \n \n \n\n',className:"muigui-no-scroll"}));const n=e=>{const{width:n,height:i}=this.#rt.getBoundingClientRect(),o=2*e.nx-1,r=2*e.ny-1;t.setValue([o*n*.5,r*i*.5])};re(this.domElement,{onDown:n,onMove:n}),this.#rt=this.$("svg"),this.#et=this.$("#muigui-arrow"),this.#T=this.$("#muigui-circle"),Me(this.#rt,.5,.5,(()=>this.#ft))}#ft(){const[t,e]=this.#it;this.#et.setAttribute("d",`M0,0L${t},${e}`),this.#T.setAttribute("transform",`translate(${t}, ${e})`)}updateDisplay(t){this.#it[0]=t[0],this.#it[1]=t[1],this.#ft()}}return be.ColorChooser=ue,be.Direction=class extends le{#u;constructor(t,e,n){super(t,e,"muigui-direction"),this.#u=n,this.addTop(new O(this,F)),this.addBottom(new Ce(this,n)),this.updateDisplay()}},be.RadioGrid=class extends D{constructor(t,e,n){super(t,e,"muigui-radio-grid");const i="number"==typeof this.getValue(),{keyValues:o,cols:r=3}=n,s=H(o,i);this.add(new Ve(this,s,r)),this.updateDisplay()}},be.Range=B,be.Select=z,be.Slider=class extends D{constructor(t,e,n={}){super(t,e,"muigui-slider"),this.add(new De(this,n)),this.add(new O(this,n)),this.updateDisplay()}},be.TextNumber=j,be.Vec2=class extends le{constructor(t,e){super(t,e,"muigui-vec2");const n=t=>({setValue:e=>{const n=this.getValue();n[t]=e,this.setValue(n)},setFinalValue:e=>{const n=this.getValue();n[t]=e,this.setFinalValue(n)}});this.addTop(new O(n(0),{converters:{to:t=>t[0],from:A.from}})),this.addTop(new O(n(1),{converters:{to:t=>t[1],from:A.from}})),this.addBottom(new Ne(this)),this.updateDisplay()}},be})); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).GUI=e()}(this,(function(){"use strict";var t={default:'\n.muigui {\n --bg-color: #ddd;\n --color: #222;\n --contrast-color: #eee;\n --value-color: #145 ;\n --value-bg-color: #eeee;\n --disabled-color: #999;\n --menu-bg-color: #f8f8f8;\n --menu-sep-color: #bbb;\n --hover-bg-color: #999;\n --focus-color: #68C;\n --range-color: #888888;\n --invalid-color: #FF0000;\n --selected-color: rgb(255, 255, 255, 0.9);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n .muigui {\n --bg-color: #222222;\n --color: #dddddd;\n --contrast-color: #000;\n --value-color: #43e5f7;\n --value-bg-color: #444444;\n --disabled-color: #666666;\n --menu-bg-color: #080808;\n --menu-sep-color: #444444;\n --hover-bg-color: #666666;\n --focus-color: #88AAFF;\n --range-color: #888888;\n --invalid-color: #FF6666;\n --selected-color: rgba(255, 255, 255, 0.3);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n }\n}\n\n.muigui {\n --width: 250px;\n --label-width: 45%;\n --number-width: 40%;\n\n\n --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;\n --font-size: 11px;\n --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;\n --font-size-mono: 11px;\n\n --line-height: 1.7em;\n --border-radius: 0px;\n\n width: var(--width);\n font-family: var(--font-family);\n font-size: var(--font-size);\n box-sizing: border-box;\n line-height: 100%;\n}\n.muigui * {\n box-sizing: inherit;\n}\n\n.muigui-no-scroll {\n touch-action: none;\n}\n.muigui-no-h-scroll {\n touch-action: pan-y;\n}\n.muigui-no-v-scroll {\n touch-action: pan-x;\n}\n\n.muigui-invalid-value {\n background-color: red !important;\n color: white !important;\n}\n\n.muigui-grid {\n display: grid;\n}\n.muigui-rows {\n display: flex;\n flex-direction: column;\n\n min-height: 20px;\n border: 2px solid red;\n}\n.muigui-columns {\n display: flex;\n flex-direction: row;\n\n height: 20px;\n border: 2px solid green;\n}\n.muigui-rows>*,\n.muigui-columns>* {\n flex: 1 1 auto;\n align-items: stretch;\n min-height: 0;\n min-width: 0;\n}\n\n.muigui-row {\n border: 2px solid yellow;\n min-height: 10px\n}\n.muigui-column {\n border: 2px solid lightgreen;\n}\n\n/* -------- */\n\n.muigui-show { /* */ }\n.muigui-hide { \n display: none !important;\n}\n.muigui-disabled {\n pointer-events: none;\n --color: var(--disabled-color) !important;\n --value-color: var(--disabled-color) !important;\n --range-left-color: var(--disabled-color) !important;\n}\n\n.muigui canvas,\n.muigui svg {\n display: block;\n border-radius: var(--border-radius);\n}\n.muigui canvas {\n background-color: var(--value-bg-color);\n}\n\n.muigui-controller {\n min-width: 0;\n min-height: var(--line-height);\n}\n.muigui-root,\n.muigui-menu {\n display: flex;\n flex-direction: column;\n position: relative;\n user-select: none;\n height: fit-content;\n margin: 0;\n padding-bottom: 0.1em;\n border-radius: var(--border-radius);\n}\n.muigui-menu {\n border-bottom: 1px solid var(--menu-sep-color);\n}\n\n.muigui-root>button:nth-child(1),\n.muigui-menu>button:nth-child(1) {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n position: relative;\n text-align: left;\n color: var(--color);\n background-color: var(--menu-bg-color);\n min-height: var(--line-height);\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n.muigui-root>div:nth-child(2),\n.muigui-menu>div:nth-child(2) {\n flex: 1 1 auto;\n}\n\n.muigui-controller {\n margin-left: 0.2em;\n margin-right: 0.2em;\n}\n.muigui-root.muigui-controller,\n.muigui-menu.muigui-controller {\n margin-left: 0;\n margin-right: 0;\n}\n.muigui-controller>*:nth-child(1) {\n flex: 1 0 var(--label-width);\n min-width: 0;\n white-space: pre;\n}\n.muigui-controller>label:nth-child(1) {\n place-content: center start;\n display: inline-grid;\n overflow: hidden;\n}\n.muigui-controller>*:nth-child(2) {\n flex: 1 1 75%;\n min-width: 0;\n}\n\n/* -----------------------------------------\n a label controller is [[label][value]]\n*/\n\n.muigui-label-controller {\n display: flex;\n margin: 0.4em 0 0.4em 0;\n word-wrap: initial;\n align-items: stretch;\n}\n\n.muigui-value {\n display: flex;\n align-items: stretch;\n}\n.muigui-value>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n.muigui-value>*:nth-child(1) {\n flex: 1 1 calc(100% - var(--number-width));\n}\n.muigui-value>*:nth-child(2) {\n flex: 1 1 var(--number-width);\n margin-left: 0.2em;\n}\n\n/* fix! */\n.muigui-open>button>label::before,\n.muigui-closed>button>label::before {\n width: 1.25em;\n height: var(--line-height);\n display: inline-grid;\n place-content: center start;\n pointer-events: none;\n}\n.muigui-open>button>label::before {\n content: "ⓧ"; /*"▼";*/\n}\n.muigui-closed>button>label::before {\n content: "⨁"; /*"▶";*/\n}\n.muigui-open>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 0.5s ease-out;\n max-height: 100vh;\n overflow: auto;\n opacity: 1;\n}\n\n.muigui-closed>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 1s;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n}\n\n/* ---- popdown ---- */\n\n.muigui-pop-down-top {\n display: flex;\n}\n/* fix? */\n.muigui-value>*:nth-child(1).muigui-pop-down-top {\n flex: 0;\n}\n.muigui-pop-down-bottom {\n\n}\n\n.muigui-pop-down-values {\n min-width: 0;\n display: flex;\n}\n.muigui-pop-down-values>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.muigui-value.muigui-pop-down-controller {\n flex-direction: column;\n}\n\n.muigui-pop-down-top input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-pop-down-top input[type=checkbox]::before {\n content: "+";\n display: grid;\n place-content: center;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n color: var(--value-bg-color);\n width: calc(var(--line-height) - 4px);\n height: calc(var(--line-height) - 4px);\n}\n\n.muigui-pop-down-top input[type=checkbox]:checked::before {\n content: "Ｘ";\n}\n\n\n/* ---- select ---- */\n\n.muigui select,\n.muigui option,\n.muigui input,\n.muigui button {\n color: var(--value-color);\n background-color: var(--value-bg-color);\n font-family: var(--font-family);\n font-size: var(--font-size);\n border: none;\n margin: 0;\n border-radius: var(--border-radius);\n}\n.muigui select {\n appearance: none;\n margin: 0;\n margin-left: 0; /*?*/\n overflow: hidden; /* Safari */\n}\n\n.muigui select:focus,\n.muigui input:focus,\n.muigui button:focus {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui select:hover,\n.muigui option:hover,\n.muigui input:hover,\n.muigui button:hover {\n background-color: var(--hover-bg-color); \n}\n\n/* ------ [ label ] ------ */\n\n.muigui-label {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n padding-top: 0.4em;\n padding-bottom: 0.3em;\n place-content: center start;\n background-color: var(--menu-bg-color);\n white-space: pre;\n border-radius: var(--border-radius);\n}\n\n/* ------ [ divider] ------ */\n\n.muigui-divider {\n min-height: 6px;\n border-top: 2px solid var(--menu-sep-color);\n margin-top: 6px;\n}\n\n/* ------ [ button ] ------ */\n\n.muigui-button {\n display: grid;\n\n}\n.muigui-button button {\n border: none;\n color: var(--value-color);\n background-color: var(--button-bg-color);\n cursor: pointer;\n place-content: center center;\n}\n\n/* ------ [ color ] ------ */\n\n.muigui-color>div {\n overflow: hidden;\n position: relative;\n margin-left: 0;\n margin-right: 0; /* why? */\n max-width: var(--line-height);\n border-radius: var(--border-radius);\n}\n\n.muigui-color>div:focus-within {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui-color input[type=color] {\n border: none;\n padding: 0;\n background: inherit;\n cursor: pointer;\n position: absolute;\n width: 200%;\n left: -10px;\n top: -10px;\n height: 200%;\n}\n.muigui-disabled canvas,\n.muigui-disabled svg,\n.muigui-disabled img,\n.muigui-disabled .muigui-color input[type=color] {\n opacity: 0.2;\n}\n\n/* ------ [ checkbox ] ------ */\n\n.muigui-checkbox>label:nth-child(2) {\n display: grid;\n place-content: center start;\n margin: 0;\n}\n\n.muigui-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-checkbox input[type=checkbox]::before {\n content: "";\n color: var(--value-color);\n display: grid;\n place-content: center;\n}\n\n.muigui-checkbox input[type=checkbox]:checked::before {\n content: "✔";\n}\n\n.muigui input[type=number]::-webkit-inner-spin-button, \n.muigui input[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none;\n appearance: none;\n margin: 0; \n}\n.muigui input[type=number] {\n -moz-appearance: textfield;\n}\n\n/* ------ [ radio grid ] ------ */\n\n.muigui-radio-grid>div {\n display: grid;\n gap: 2px;\n}\n\n.muigui-radio-grid input {\n appearance: none;\n display: none;\n}\n\n.muigui-radio-grid button {\n color: var(--color);\n width: 100%;\n text-align: left;\n}\n\n.muigui-radio-grid input:checked + button {\n color: var(--value-color);\n background-color: var(--selected-color);\n}\n\n/* ------ [ color-chooser ] ------ */\n\n.muigui-color-chooser-cursor {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n.muigui-color-chooser-circle {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n\n\n/* ------ [ vec2 ] ------ */\n\n.muigui-vec2 svg {\n background-color: var(--value-bg-color);\n}\n\n.muigui-vec2-axis {\n stroke: 1px;\n stroke: var(--focus-color);\n}\n\n.muigui-vec2-line {\n stroke-width: 1px;\n stroke: var(--value-color);\n fill: var(--value-color);\n}\n\n/* ------ [ direction ] ------ */\n\n.muigui-direction svg {\n background-color: rgba(0,0,0,0.2);\n}\n\n.muigui-direction:focus-within svg {\n outline: none;\n}\n.muigui-direction-range {\n fill: var(--value-bg-color);\n}\n.muigui-direction svg:focus {\n outline: none;\n}\n.muigui-direction svg:focus .muigui-direction-range {\n stroke-width: 0.5px;\n stroke: var(--focus-color);\n}\n\n.muigui-direction-arrow {\n fill: var(--value-color);\n}\n\n/* ------ [ slider ] ------ */\n\n.muigui-slider>div {\n display: flex;\n align-items: stretch;\n height: var(--line-height);\n}\n.muigui-slider svg {\n flex: 1 1 auto;\n}\n.muigui-slider .muigui-slider-up #muigui-orientation {\n transform: scale(1, -1) translateY(-100%);\n}\n\n.muigui-slider .muigui-slider-up #muigui-number-orientation {\n transform: scale(1,-1);\n}\n\n.muigui-ticks {\n stroke: var(--range-color);\n}\n.muigui-thicks {\n stroke: var(--color);\n stroke-width: 2px;\n}\n.muigui-svg-text {\n fill: var(--color);\n font-size: 7px;\n}\n.muigui-mark {\n fill: var(--value-color);\n}\n\n/* ------ [ range ] ------ */\n\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: transparent;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n margin-top: calc((var(--line-height) - 2px) / -2);\n width: calc(var(--line-height) - 2px);\n height: calc(var(--line-height) - 2px);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n border: 1px solid var(--menu-sep-color);\n height: 2px;\n}\n\n\n/* dat.gui style - doesn\'t work on Safari iOS */\n\n/*\n.muigui-range input[type=range] {\n cursor: ew-resize;\n overflow: hidden;\n}\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: var(--range-right-color);\n margin: 0;\n}\n.muigui-range input[type=range]:hover {\n background-color: var(--range-right-hover-color);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n height: max-content;\n color: var(--range-left-color);\n margin-top: -1px;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 0px;\n height: max-content;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n}\n*/\n\n/* FF */\n/*\n.muigui-range input[type=range]::-moz-slider-progress {\n background-color: var(--range-left-color); \n}\n.muigui-range input[type=range]::-moz-slider-thumb {\n height: max-content;\n width: 0;\n border: none;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n box-sizing: border-box;\n}\n*/\n\n.muigui-checkered-background {\n background-color: #404040;\n background-image:\n linear-gradient(45deg, #808080 25%, transparent 25%),\n linear-gradient(-45deg, #808080 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #808080 75%),\n linear-gradient(-45deg, transparent 75%, #808080 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0px;\n}\n\n/* ---------------------------------------------------------- */\n\n/* needs to be at bottom to take precedence */\n.muigui-auto-place {\n max-height: 100%;\n position: fixed;\n top: 0;\n right: 15px;\n z-index: 100001;\n}\n\n',themes:{default:"",float:"\n :root {\n color-scheme: light dark,\n }\n\n .muigui {\n --width: 400px;\n --bg-color: initial;\n --label-width: 25%;\n --number-width: 20%;\n }\n\n input,\n .muigui-label-controller>label {\n text-shadow:\n -1px -1px 0 var(--contrast-color),\n 1px -1px 0 var(--contrast-color),\n -1px 1px 0 var(--contrast-color),\n 1px 1px 0 var(--contrast-color);\n }\n\n .muigui-controller > label:nth-child(1) {\n place-content: center end;\n margin-right: 1em;\n }\n\n .muigui-value > :nth-child(2) {\n margin-left: 1em;\n }\n\n .muigui-root>*:nth-child(1) {\n display: none;\n }\n\n .muigui-range input[type=range]::-webkit-slider-thumb {\n border-radius: 1em;\n }\n\n .muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: initial;\n appearance: none;\n border: 1px solid rgba(0, 0, 0, 0.25);\n height: 2px;\n }\n\n .muigui-colors {\n --value-color: var(--color );\n --value-bg-color: rgba(0, 0, 0, 0.1);\n --disabled-color: #cccccc;\n --menu-bg-color: rgba(0, 0, 0, 0.1);\n --menu-sep-color: #bbbbbb;\n --hover-bg-color: rgba(0, 0, 0, 0);\n --invalid-color: #FF0000;\n --selected-color: rgba(0, 0, 0, 0.3);\n --range-color: rgba(0, 0, 0, 0.125);\n }\n"}};function e(t,e={},n=[]){const i=document.createElement(t);return function(t,e,n){for(const[n,i]of Object.entries(e))if("function"==typeof i&&n.startsWith("on")){const e=n.substring(2).toLowerCase();t.addEventListener(e,i,{passive:!1})}else if("object"==typeof i)for(const[e,o]of Object.entries(i))t[n][e]=o;else void 0===t[n]?t.setAttribute(n,i):t[n]=i;for(const e of n)t.appendChild(e)}(i,e,n),i}let n=0;function i(t,e){const n=t.indexOf(e);return n&&t.splice(n,1),t}function o(t,e,n){return Math.max(e,Math.min(n,t))}const r="undefined"!=typeof SharedArrayBuffer?function(t){return t&&t.buffer&&(t.buffer instanceof ArrayBuffer||t.buffer instanceof SharedArrayBuffer)}:function(t){return t&&t.buffer&&t.buffer instanceof ArrayBuffer},s=(t,e,n)=>Math.round(e(t)/n)/(1/n),a=(t,e)=>(t%e+e)%e;function l(t,e){for(const n in e)n in t&&(t[n]=e[n]);return t}const u=(t,e,n,i,o)=>(t-e)*(o-i)/(n-e)+i,c=({from:t,to:e})=>({to:n=>u(n,...t,...e),from:n=>[!0,u(n,...e,...t)]}),h=({from:t,to:e,step:n})=>({min:e[0],max:e[1],...n&&{step:n},converters:c({from:t,to:e})}),d={to:t=>t,from:t=>[!0,t]};function p(t,e,n,i,o){const{converters:{from:r}=d}=o,{min:s,max:a}=o,l=o.minRange||0,u=r(l)[1],c=t.add(e,n,{...o,min:s,max:a-l}).onChange((t=>{h.setValue(Math.min(a,Math.max(t+u,e[i])))})),h=t.add(e,i,{...o,min:s+l,max:a}).onChange((t=>{c.setValue(Math.max(s,Math.min(t-u,e[n])))}));return[c,h]}class m{domElement;#t;#e=[];constructor(t){this.domElement=t,this.#t=t}addElem(t){return this.#t.appendChild(t),t}removeElem(t){return this.#t.removeChild(t),t}pushSubElem(t){this.#t.appendChild(t),this.#t=t}popSubElem(){this.#t=this.#t.parentElement}add(t){return this.#e.push(t),this.addElem(t.domElement),t}remove(t){return this.removeElem(t.domElement),i(this.#e,t),t}pushSubView(t){this.pushSubElem(t.domElement)}popSubView(){this.popSubElem()}setOptions(t){for(const e of this.#e)e.setOptions(t)}updateDisplayIfNeeded(t,e){for(const n of this.#e)n.updateDisplayIfNeeded(t,e);return this}$(t){return this.domElement.querySelector(t)}}class g extends m{#n;#i;#o;constructor(t){super(e("div",{className:"muigui-controller"})),this.#n=[],this.#i=[],t&&this.domElement.classList.add(t)}get parent(){return this.#o}setParent(t){this.#o=t,this.enable(!this.disabled())}show(t=!0){return this.domElement.classList.toggle("muigui-hide",!t),this.domElement.classList.toggle("muigui-show",t),this}hide(){return this.show(!1)}disabled(){return!!this.domElement.closest(".muigui-disabled")}enable(t=!0){return this.domElement.classList.toggle("muigui-disabled",!t),["input","button","select","textarea"].forEach((t=>{this.domElement.querySelectorAll(t).forEach((t=>{const e=!!t.closest(".muigui-disabled");t.disabled=e}))})),this}disable(t=!0){return this.enable(!t)}onChange(t){return this.removeChange(t),this.#n.push(t),this}removeChange(t){return i(this.#n,t),this}onFinishChange(t){return this.removeFinishChange(t),this.#i.push(t),this}removeFinishChange(t){return i(this.#i,t),this}#r(t,e){for(const n of t)n.call(this,e)}emitChange(t,e,n){this.#r(this.#n,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitChange({object:e,property:n,value:t,controller:this}))}emitFinalChange(t,e,n){this.#r(this.#i,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitFinalChange({object:e,property:n,value:t,controller:this}))}updateDisplay(){}getColors(){const t=t=>t.replace(/-([a-z])/g,((t,e)=>e.toUpperCase())),n=e("div");this.domElement.appendChild(n);const i=Object.fromEntries(["color","bg-color","value-color","value-bg-color","hover-bg-color","menu-bg-color","menu-sep-color","disabled-color"].map((e=>{n.style.color=`var(--${e})`;const i=getComputedStyle(n);return[t(e),i.color]})));return n.remove(),i}}class f extends g{#s;#a;#l;#u={name:""};constructor(t,n,i={}){super("muigui-button",""),this.#s=t,this.#a=n,this.#l=this.addElem(e("button",{type:"button",onClick:()=>{this.#s[this.#a](this)}})),this.setOptions({name:n,...i})}setOptions(t){l(this.#u,t);const{name:e}=this.#u;this.#l.textContent=e}}function b(t,e){if(t.length!==e.length)return!1;for(let n=0;n{t.setValue(i.checked)},onChange:()=>{t.setFinalValue(i.checked)}});super(e("label",{},[i])),this.#b=i}updateDisplay(t){this.#b.checked=t}}const w=[],y=new Set;let k,E;function $(){k=void 0,E=!0;for(const t of w)y.has(t)||t();E=!1,y.size&&(E?C():(y.forEach((t=>{i(w,t)})),y.clear())),C()}function C(){!k&&w.length&&(k=requestAnimationFrame($))}let V=0;function I(){return"muigui-"+ ++V}class M extends m{constructor(t=""){super(e("div",{className:"muigui-value"})),t&&this.domElement.classList.add(t)}}class S extends g{#v;#x;constructor(t="",n=""){super("muigui-label-controller"),this.#v=I(),this.#x=e("label",{for:this.#v}),this.domElement.appendChild(this.#x),this.pushSubView(new M(t)),this.name(n)}get id(){return this.#v}name(t){return this.#x.title===this.#x.textContent&&(this.#x.title=t),this.#x.textContent=t,this}tooltip(t){this.#x.title=t}}class D extends S{#s;#a;#w;#y;#e;#k;constructor(t,e,n=""){super(n,e),this.#s=t,this.#a=e,this.#w=this.getValue(),this.#y=!1,this.#e=[]}get initialValue(){return this.#w}get object(){return this.#s}get property(){return this.#a}add(t){return this.#e.push(t),super.add(t),this.updateDisplay(),t}#E(t,e){let n=!1;if("object"==typeof t){const e=this.#s[this.#a];if(Array.isArray(t)||r(t))for(let i=0;i=0&&w.splice(e,1)}(this.#k)),this}}class N extends D{constructor(t,e){super(t,e,"muigui-checkbox");const n=this.id;this.add(new x(this,n)),this.updateDisplay()}}const F={to:t=>t,from:t=>[!0,t]},A={to:t=>t.toString(),from:t=>{const e=parseFloat(t);return[!Number.isNaN(e),e]}},U={radToDeg:c({to:[0,180],from:[0,Math.PI]})};function L(){let t=0;return function(e,n,i=5){t-=e.deltaY*n/i;const o=Math.floor(Math.abs(t)/n)*Math.sign(t)*n;return t-=o,o}}class O extends v{#$;#C;#V;#I;#u={step:.01,converters:A,min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY};constructor(t,n){const i=t.setValue.bind(t),r=t.setFinalValue.bind(t),a=L();super(e("input",{type:"number",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(r,!1),onWheel:e=>{e.preventDefault();const{min:n,max:i,step:r}=this.#u,l=a(e,r),u=parseFloat(this.domElement.value),c=o(s(u+l,(t=>t),r),n,i);t.setValue(c)}})),this.setOptions(n)}#M(t,e){const n=parseFloat(this.domElement.value),[i,r]=this.#C(n);let s;if(i&&!Number.isNaN(n)){const{min:n,max:i}=this.#u;s=r>=n&&r<=i,this.#I=e,t(o(r,n,i))}this.domElement.classList.toggle("muigui-invalid-value",!i||!s)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,converters:{to:n,from:i}}=this.#u;return this.#$=n,this.#C=i,this.#V=e,this}}class j extends D{#S;#V;constructor(t,e,n={}){super(t,e,"muigui-checkbox"),this.#S=this.add(new O(this,n)),this.updateDisplay()}}class T extends v{#D;constructor(t,n){const i=[];super(e("select",{onChange:()=>{t.setFinalValue(this.#D[this.domElement.selectedIndex])}},n.map((([t,n])=>(i.push(n),e("option",{textContent:t})))))),this.#D=i}updateDisplay(t){const e=this.#D.indexOf(t);this.domElement.selectedIndex=e}}function H(t,e){return Array.isArray(t)?Array.isArray(t[0])?t:e?t.map(((t,e)=>[t,e])):t.map((t=>[t,t])):[...Object.entries(t)]}class z extends D{constructor(t,e,n){super(t,e,"muigui-select");const i="number"==typeof this.getValue(),{keyValues:o}=n,r=H(o,i);this.add(new T(this,r)),this.updateDisplay()}}class P extends v{#$;#C;#V;#I;#u={step:.01,min:0,max:1,converters:F};constructor(t,n){const i=L();super(e("input",{type:"range",onInput:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setValue(u)},onChange:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setFinalValue(u)},onWheel:e=>{e.preventDefault();const[n,r]=this.#C(parseFloat(this.domElement.value));if(!n)return;const{min:a,max:l,step:u}=this.#u,c=i(e,u),h=o(s(r+c,(t=>t),u),a,l);t.setValue(h)}})),this.setOptions(n)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,min:n,max:i,converters:{to:o,from:r}}=this.#u;return this.#$=o,this.#C=r,this.#V=e,this.domElement.step=e,this.domElement.min=n,this.domElement.max=i,this}}class B extends D{constructor(t,e,n){super(t,e,"muigui-range"),this.add(new P(this,n)),this.add(new O(this,n))}}class G extends v{#$;#C;#I;#u={converters:F};constructor(t,n){const i=t.setValue.bind(t),o=t.setFinalValue.bind(t);super(e("input",{type:"text",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(o,!1)})),this.setOptions(n)}#M(t,e){const[n,i]=this.#C(this.domElement.value);n&&(this.#I=e,t(i)),this.domElement.style.color=n?"":"var(--invalid-color)"}updateDisplay(t){this.#I||(this.domElement.value=this.#$(t),this.domElement.style.color=""),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class R extends D{constructor(t,e){super(t,e,"muigui-checkbox"),this.add(new G(this)),this.updateDisplay()}}const _=(t,e,n)=>Math.max(e,Math.min(n,t)),Y=(t,e,n)=>t+(e-t)*n,W=t=>t>=0?t%1:1-t%1,q=t=>+t.toFixed(0),K=t=>+t.toFixed(3),J=t=>parseInt(t.substring(1,3),16)<<16|parseInt(t.substring(3,5),16)<<8|parseInt(t.substring(5,7),16),X=t=>parseInt(t.substring(1,3),16)*2**24+65536*parseInt(t.substring(3,5),16)+256*parseInt(t.substring(5,7),16)+parseInt(t.substring(7,9),16),Z=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)],Q=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,tt=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16),parseInt(t.substring(7,9),16)],et=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,nt=t=>Z(t).map((t=>K(t/255))),it=t=>Q(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),ot=t=>tt(t).map((t=>K(t/255))),rt=t=>et(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),st=t=>_(Math.round(255*t),0,255).toString(16).padStart(2,"0"),at=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255}),lt=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255,a:parseInt(t.substring(7,9),16)/255}),ut=t=>`rgb(${Z(t).join(", ")})`,ct=/^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,ht=t=>`rgba(${tt(t).map(((t,e)=>3===e?t/255:t)).join(", ")})`,dt=/^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+\.\d+|\d+)\s*\)\s*$/,pt=t=>{const e=yt(Z(t)).map((t=>q(t)));return`hsl(${e[0]}, ${e[1]}%, ${e[2]}%)`},mt=t=>{const e=kt(tt(t)).map(((t,e)=>3===e?K(t):q(t)));return`hsl(${e[0]} ${e[1]}% ${e[2]}% / ${e[3]})`},gt=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\)\s*$/,ft=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\/\s*(\d+\.\d+|\d+)\s*\)\s*$/,bt=(t,e)=>(t%e+e)%e;function vt([t,e,n]){t=bt(t,360),e=_(e/100,0,1),n=_(n/100,0,1);const i=e*Math.min(n,1-n);function o(e){const o=(e+t/30)%12;return n-i*Math.max(-1,Math.min(o-3,9-o,1))}return[o(0),o(8),o(4)].map((t=>Math.round(255*t)))}function xt([t,e,n]){const i=Math.max(t,e,n),o=Math.min(t,e,n),r=.5*(o+i),s=i-o;let a=0,l=0;if(0!==s)switch(l=0===r||1===r?0:(i-r)/Math.min(r,1-r),i){case t:a=(e-n)/s+(e{const[e,n,i]=xt(t.map((t=>t/255)));return[360*e,100*n,100*i]},kt=t=>{const[e,n,i,o]=wt(t.map((t=>t/255)));return[360*e,100*n,100*i,o]};function Et([t,e,n]){return e=_(e,0,1),n=_(n,0,1),[t,t+2/3,t+1/3].map((t=>Y(1,_(Math.abs(6*W(t)-3)-1,0,1),e)*n))}function $t([t,e,n,i]){return[...Et([t,e,n]),i]}const Ct=t=>Math.round(1e3*t)/1e3;function Vt([t,e,n]){const i=n>e?[n,e,-1,2/3]:[e,n,0,-1/3],o=i[0]>t?[i[0],i[1],i[3],t]:[t,i[1],i[2],i[0]],r=o[0]-Math.min(o[3],o[1]);return[Math.abs(o[2]+(o[3]-o[1])/(6*r+Number.EPSILON)),r/(o[0]+Number.EPSILON),o[0]].map(Ct)}const It=t=>t.endsWith("a")||t.startsWith("hex8"),Mt=[{re:/^#(?:[0-9a-f]){6}$/i,format:"hex6"},{re:/^(?:[0-9a-f]){6}$/i,format:"hex6-no-hash"},{re:/^#(?:[0-9a-f]){8}$/i,format:"hex8"},{re:/^(?:[0-9a-f]){8}$/i,format:"hex8-no-hash"},{re:/^#(?:[0-9a-f]){3}$/i,format:"hex3"},{re:/^(?:[0-9a-f]){3}$/i,format:"hex3-no-hash"},{re:ct,format:"css-rgb"},{re:gt,format:"css-hsl"},{re:dt,format:"css-rgba"},{re:ft,format:"css-hsla"}];function St(t){switch(typeof t){case"number":return console.warn('can not reliably guess format based on a number. You should pass in a format like {format: "uint32-rgb"} or {format: "uint32-rgb"}'),t<=16777215?"uint32-rgb":"uint32-rgba";case"string":{const e=function(t){for(const e of Mt)if(e.re.test(t))return e}(t.trim());if(e)return e.format;break}case"object":if(t instanceof Uint8Array||t instanceof Uint8ClampedArray){if(3===t.length)return"uint8-rgb";if(4===t.length)return"uint8-rgba"}else if(t instanceof Float32Array){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if(Array.isArray(t)){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if("r"in t&&"g"in t&&"b"in t)return"a"in t?"object-rgba":"object-rgb"}throw new Error(`unknown color format: ${t}`)}function Dt(t){return t.trim(t)}function Nt(t){return t.trim(t)}function Ft(t){return t[1]===t[2]&&t[3]===t[4]&&t[5]===t[6]?`#${t[1]}${t[3]}${t[5]}`:t}const At=/^(#|)([0-9a-f]{3})$/i;function Ut(t){const e=At.exec(t);if(e){const[,,t]=e;return"#"+`${(n=t)[0]}${n[0]}${n[1]}${n[1]}${n[2]}${n[2]}`}var n;return t}function Lt(t){return Ft(Dt(t))}const Ot=t=>{const e=ct.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),`rgb(${n.join(", ")})`]},jt=t=>{const e=dt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?parseFloat(t):parseInt(t)));return[!n.find((t=>t>255)),`rgba(${n.join(", ")})`]},Tt=t=>{const e=gt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]}, ${n[1]}%, ${n[2]}%)`]},Ht=t=>{const e=ft.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]} ${n[1]}% ${n[2]}% / ${n[3]})`]},zt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Pt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Bt=/^\s*(?:0x){0,1}([0-9a-z]{1,6})\s*$/i,Gt=/^\s*(?:0x){0,1}([0-9a-z]{1,8})\s*$/i,Rt=/^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i,_t=/^\s*[a-f0-9]{6}\s*$/i,Yt=/^\s*#[a-f0-9]{8}\s*$/i,Wt=/^\s*[a-f0-9]{8}\s*$/i,qt={hex6:{color:{from:t=>[!0,t],to:Dt},text:{from:t=>[Rt.test(t),t.trim()],to:t=>t}},hex8:{color:{from:t=>[!0,t],to:Nt},text:{from:t=>[Yt.test(t),t.trim()],to:t=>t}},hex3:{color:{from:t=>[!0,Lt(t)],to:Ut},text:{from:t=>[Rt.test(t),Ft(t.trim())],to:t=>t}},"hex6-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Dt(t)}`},text:{from:t=>[_t.test(t),t.trim()],to:t=>t}},"hex8-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Nt(t)}`},text:{from:t=>[Wt.test(t),t.trim()],to:t=>t}},"hex3-no-hash":{color:{from:t=>[!0,Lt(t).substring(1)],to:Ut},text:{from:t=>[_t.test(t),Ft(t.trim())],to:t=>t}},"uint32-rgb":{color:{from:t=>[!0,J(t)],to:t=>`#${Math.round(t).toString(16).padStart(6,"0")}`},text:{from:t=>(t=>{const e=Bt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(6,"0")}`}},"uint32-rgba":{color:{from:t=>[!0,X(t)],to:t=>`#${Math.round(t).toString(16).padStart(8,"0")}`},text:{from:t=>(t=>{const e=Gt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(8,"0")}`}},"uint8-rgb":{color:{from:t=>[!0,Z(t)],to:Q},text:{from:t=>{const e=zt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"uint8-rgba":{color:{from:t=>[!0,tt(t)],to:et},text:{from:t=>{const e=Pt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"float-rgb":{color:{from:t=>[!0,nt(t)],to:it},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(3!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"float-rgba":{color:{from:t=>[!0,ot(t)],to:rt},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(4!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"object-rgb":{color:{from:t=>[!0,at(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b))throw new Error("not {r, g, b}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}`}},"object-rgba":{color:{from:t=>[!0,lt(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}${st(t.a)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b)||Number.isNaN(n.a))throw new Error("not {r, g, b, a}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}, a:${K(t.a)}}`}},"css-rgb":{color:{from:t=>[!0,ut(t)],to:t=>{const e=ct.exec(t);return Q([e[1],e[2],e[3]].map((t=>parseInt(t))))}},text:{from:Ot,to:t=>Ot(t)[1]}},"css-rgba":{color:{from:t=>[!0,ht(t)],to:t=>{const e=dt.exec(t);return et([e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?255*parseFloat(t)|0:parseInt(t))))}},text:{from:jt,to:t=>jt(t)[1]}},"css-hsl":{color:{from:t=>[!0,pt(t)],to:t=>{const e=gt.exec(t),n=vt([e[1],e[2],e[3]].map((t=>parseFloat(t))));return Q(n)}},text:{from:Tt,to:t=>Tt(t)[1]}},"css-hsla":{color:{from:t=>[!0,mt(t)],to:t=>{const e=ft.exec(t),n=function([t,e,n,i]){return[...vt([t,e,n]),255*i|0]}([e[1],e[2],e[3],e[4]].map((t=>parseFloat(t))));return et(n)}},text:{from:Ht,to:t=>Ht(t)[1]}}};class Kt extends m{constructor(t,n){super(e(t,{className:n}))}}class Jt extends S{#N;constructor(){super("muigui-canvas"),this.#N=this.add(new Kt("canvas","muigui-canvas")).domElement}get canvas(){return this.#N}}class Xt extends v{#$;#C;#F;#I;#u={converters:F};constructor(t,n){const i=e("input",{type:"color",onInput:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setValue(n))},onChange:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setFinalValue(n))}});super(e("div",{},[i])),this.setOptions(n),this.#F=i}updateDisplay(t){this.#I||(this.#F.value=this.#$(t)),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class Zt extends D{#A;#S;constructor(t,e,n={}){super(t,e,"muigui-color");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#A=this.add(new Xt(this,{converters:o})),this.#S=this.add(new G(this,{converters:r})),this.updateDisplay()}setOptions(t){const{format:e}=t;if(e){const{color:t,text:n}=qt[e];this.#A.setOptions({converters:t}),this.#S.setOptions({converters:n})}return super.setOptions(t),this}}class Qt extends g{constructor(){super("muigui-divider")}}class te extends g{#U;#L;constructor(t){super(t),this.#U=[],this.#L=this}get children(){return this.#U}get controllers(){return this.#U.filter((t=>!(t instanceof te)))}get folders(){return this.#U.filter((t=>t instanceof te))}reset(t=!0){for(const e of this.#U)e instanceof te&&!t||e.reset(t);return this}updateDisplay(){for(const t of this.#U)t.updateDisplay();return this}remove(t){const e=this.#U.indexOf(t);if(e>=0){const t=this.#U.splice(e,1)[0];t.domElement.remove(),t.setParent(null)}return this}_addControllerImpl(t){return this.domElement.appendChild(t.domElement),this.#U.push(t),t.setParent(this),t}addController(t){return this.#L._addControllerImpl(t)}pushContainer(t){return this.addController(t),this.#L=t,t}popContainer(){return this.#L=this.#L.parent,this}}class ee extends te{#O;constructor(t="Controls",n="muigui-menu"){super(n),this.#O=e("label"),this.addElem(e("button",{type:"button",onClick:()=>this.toggleOpen()},[this.#O])),this.pushContainer(new te),this.name(t),this.open()}open(t=!0){return this.domElement.classList.toggle("muigui-closed",!t),this.domElement.classList.toggle("muigui-open",t),this}close(){return this.open(!1)}name(t){return this.#O.textContent=t,this}title(t){return this.name(t)}toggleOpen(){return this.open(!this.domElement.classList.contains("muigui-open")),this}}class ne extends g{constructor(t){super("muigui-label"),this.text(t)}text(t){return this.domElement.textContent=t,this}}function ie(){}function oe(t,e,n){const i=t.getBoundingClientRect(),o=e.clientX-i.left,r=e.clientY-i.top,s=o/i.width,a=r/i.height,l=o-(n=n||[o,r])[0],u=r-n[1];return{x:o,y:r,nx:s,ny:a,dx:l,dy:u,ndx:l/i.width,ndy:u/i.width}}function re(t,{onDown:e=ie,onMove:n=ie,onUp:i=ie}){let o;const r=function(e){const i={type:"move",...oe(t,e,o)};n(i)},s=function(e){t.releasePointerCapture(e.pointerId),t.removeEventListener("pointermove",r),t.removeEventListener("pointerup",s),document.body.style.backgroundColor="",i("up")},a=function(n){t.addEventListener("pointermove",r),t.addEventListener("pointerup",s),t.setPointerCapture(n.pointerId);const i=oe(t,n);o=[i.x,i.y],e({type:"down",...i})};return t.addEventListener("pointerdown",a),function(){t.removeEventListener("pointerdown",a)}}function se(t){return t.querySelectorAll("[data-src]").forEach((e=>{const i="muigui-id-"+n++;e.id=i,t.querySelectorAll(`[data-target=${e.dataset.src}]`).forEach((t=>{t.setAttribute("fill",`url(#${i})`)}))})),t}class ae extends v{#$;#C;#j;#T;#H;#z;#P;#B;#G;#R;#_;#Y;#W;#q;#u={converters:F,alpha:!1};#K;#J;constructor(t,n){super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n\n \n \n \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n \n \n \n \n \n \n\n',className:"muigui-no-scroll"})),this.#j=this.domElement.children[0],this.#H=this.domElement.children[1],this.#B=this.domElement.children[2],se(this.#j),se(this.#H),se(this.#B),this.#T=this.$(".muigui-color-chooser-circle"),this.#z=this.$("[data-src=muigui-color-chooser-hue]"),this.#P=this.$(".muigui-color-chooser-hue-cursor"),this.#G=this.$("[data-src=muigui-color-chooser-alpha]"),this.#R=this.$(".muigui-color-chooser-alpha-cursor");const i=e=>{const n=o(e.nx,0,1),i=o(e.ny,0,1);this.#_[1]=n,this.#_[2]=1-i,this.#Y=!0,this.#q=!0;const[r,s]=this.#C(this.#K(this.#_));r&&t.setValue(s)},r=e=>{const n=o(e.nx,0,1);this.#_[0]=n,this.#W=!0,this.#q=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)},s=e=>{const n=o(e.nx,0,1);this.#_[3]=n,this.#Y=!0,this.#W=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)};re(this.#j,{onDown:i,onMove:i}),re(this.#H,{onDown:r,onMove:r}),re(this.#B,{onDown:s,onMove:s}),this.setOptions(n)}updateDisplay(t){this.#_||(this.#_=this.#J(this.#$(t)));{const[e,n,i,o=1]=this.#J(this.#$(t));this.#Y||(this.#_[0]=n>.001&&i>.001?e:this.#_[0]),this.#W||(this.#_[1]=n,this.#_[2]=i),this.#q||(this.#_[3]=o)}{const[t,e,n,i]=this.#_,[o,r,s]=wt($t(this.#_));this.#Y||this.#P.setAttribute("transform",`translate(${64*t}, 0)`),this.#z.children[0].setAttribute("stop-color",`hsl(${360*o} 0% 100% / ${i})`),this.#z.children[1].setAttribute("stop-color",`hsl(${360*o} 100% 50% / ${i})`),this.#q||this.#R.setAttribute("transform",`translate(${64*i}, 0)`),this.#G.children[0].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 0)`),this.#G.children[1].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 1)`),this.#W||(this.#T.setAttribute("cx",""+64*e),this.#T.setAttribute("cy",""+48*(1-n)))}this.#Y=!1,this.#W=!1,this.#q=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n},alpha:i}=this.#u;return this.#B.style.display=i?"":"none",this.#K=i?t=>rt($t(t)):t=>it(Et(t)),this.#J=i?t=>function([t,e,n,i]){return[...Vt([t,e,n]),i]}(ot(t)):t=>Vt(nt(t)),this.#$=e,this.#C=n,this}}class le extends D{#X;#Z;#b;#Q;#u={open:!1};constructor(t,n,i={}){super(t,n,"muigui-pop-down-controller"),this.#X=this.add(new Kt("div","muigui-pop-down-top"));const o=this.#X.addElem(e("input",{type:"checkbox",onChange:()=>{this.#u.open=o.checked,this.updateDisplay()}}));this.#b=o,this.#Z=this.#X.add(new Kt("div","muigui-pop-down-values")),this.#Q=this.add(new Kt("div","muigui-pop-down-bottom")),this.setOptions(i)}setKnobColor(t){this.#b&&(this.#b.style=`\n --range-color: ${t};\n --value-bg-color: ${t};\n `)}updateDisplay(){super.updateDisplay();const{open:t}=this.#u;this.domElement.children[1].classList.toggle("muigui-open",t),this.domElement.children[1].classList.toggle("muigui-closed",!t)}setOptions(t){l(this.#u,t),super.setOptions(t),this.updateDisplay()}addTop(t){return this.#Z.add(t)}addBottom(t){return this.#Q.add(t)}}class ue extends le{#A;#S;#$;constructor(t,e,n={}){super(t,e,"muigui-color-chooser");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#$=o.to,this.#S=new G(this,{converters:r,alpha:It(i)}),this.#A=new ae(this,{converters:o,alpha:It(i)}),this.addTop(this.#S),this.addBottom(this.#A),this.__setKnobHelper=()=>{if(this.#$){const t=this.#$(this.getValue()),e=yt(Z(t));e[2]=(e[2]+50)%100;const n=Q(vt(e));this.setKnobColor(`${t.substring(0,7)}FF`,n)}},this.updateDisplay()}updateDisplay(){super.updateDisplay(),this.__setKnobHelper&&this.__setKnobHelper()}setOptions(t){return super.setOptions(t),this}}class ce extends ee{add(t,e,...n){const i=t instanceof g?t:function(t,e,...n){const[i]=n;if(Array.isArray(i))return new z(t,e,{keyValues:i});const o=typeof t[e];switch(o){case"number":if("number"==typeof n[0]&&"number"==typeof n[1]){const i=n[0],o=n[1],r=n[2];return new B(t,e,{min:i,max:o,...r&&{step:r}})}return 0===n.length?new j(t,e,...n):new B(t,e,...n);case"boolean":return new N(t,e,...n);case"function":return new f(t,e,...n);case"string":return new R(t,e,...n);case"undefined":throw new Error(`no property named ${e}`);default:throw new Error(`unhandled type ${o} for property ${e}`)}}(t,e,...n);return this.addController(i)}addCanvas(t){return this.addController(new Jt(t))}addColor(t,e,n={}){const i=t[e];return It(n.format||St(i))?this.addController(new ue(t,e,n)):this.addController(new Zt(t,e,n))}addDivider(){return this.addController(new Qt)}addFolder(t){return this.addController(new ce(t))}addLabel(t){return this.addController(new ne(t))}}class he extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}}customElements.define("muigui-element",he);const de=new CSSStyleSheet;de.replaceSync(t.default);const pe=new CSSStyleSheet;function me(t){let e,n;function i(){if(e&&!n){const o=e;e=void 0,n=t.replace(o).then((()=>{n=void 0,i()}))}}return function(t){e=t,i()}}const ge=me(de),fe=me(pe);class be extends ce{static converters=U;static mapRange=u;static makeRangeConverters=c;static makeRangeOptions=h;static makeMinMaxPair=p;#tt=new CSSStyleSheet;constructor(t={}){super("Controls","muigui-root"),t instanceof HTMLElement&&(t={parent:t});const{autoPlace:n=!0,width:i,title:o="Controls"}=t;let{parent:r}=t;if(i&&(this.domElement.style.width=/^\d+$/.test(i)?`${i}px`:i),void 0===r&&n&&(r=document.body,this.domElement.classList.add("muigui-auto-place")),r){const t=e("muigui-element");t.shadowRoot.adoptedStyleSheets=[de,pe,this.#tt],t.shadow.appendChild(this.domElement),r.appendChild(t)}o&&this.title(o),this.domElement.classList.add("muigui","muigui-colors")}setStyle(t){this.#tt.replace(t)}static setBaseStyles(t){ge(t)}static getBaseStyleSheet(){return de}static setUserStyles(t){fe(t)}static getUserStyleSheet(){return pe}static setTheme(e){be.setBaseStyles(`${t.default}\n${t.themes[e]||""}`)}}function ve(){}const xe={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};function we(t,{onDown:e=ve,onUp:n=ve}){const i=function(t){const i=t.shiftKey?10:1,[o,r]=(xe[t.key]||[0,0]).map((t=>t*i));("keydown"===t.type?e:n)({type:t.type.substring(3),dx:o,dy:r,event:t})};return t.addEventListener("keydown",i),t.addEventListener("keyup",i),function(){t.removeEventListener("keydown",i),t.removeEventListener("keyup",i)}}function ye(t,e=""){if(!t)throw new Error(e)}function ke(t,e,n,i,o,r){const s=Math.abs(n)*Math.cos(r),a=Math.abs(i)*Math.sin(r);return[t+Math.cos(o)*s-Math.sin(o)*a,e+Math.sin(o)*s+Math.cos(o)*a]}function Ee(t,e,n,i,o){ye(Math.abs(i-o)<=2*Math.PI),ye(i>=-Math.PI&&i<=2*Math.PI),ye(i<=o),ye(o>=-Math.PI&&o<=4*Math.PI);const{x1:r,y1:s,x2:a,y2:l,fa:u,fs:c}=function(t,e,n,i,o,r,s){const[a,l]=ke(t,e,n,i,o,r),[u,c]=ke(t,e,n,i,o,r+s);return{x1:a,y1:l,x2:u,y2:c,fa:Math.abs(s)>Math.PI?1:0,fs:s>0?1:0}}(t,e,n,n,0,i,o-i);return Math.abs(Math.abs(i-o)-2*Math.PI)>Number.EPSILON?`M${t} ${e} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l} L${t} ${e}`:`M${r} ${s} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l}`}const $e=t=>a(t+Math.PI,2*Math.PI)-Math.PI;class Ce extends v{#et;#nt;#it;#ot;#u={step:1,min:-180,max:180,dirMin:-Math.PI,dirMax:Math.PI,wrap:void 0,converters:F};constructor(t,n={}){const i=L();super(e("div",{className:"muigui-direction muigui-no-scroll",innerHTML:'\n\n \x3c!----\x3e\n \n \n \n \n \n \n\n',onWheel:e=>{e.preventDefault();const{min:n,max:r,step:l}=this.#u,u=i(e,l);let c=this.#it+u;this.#ot&&(c=a(c-n,r-n)+n);const h=o(s(c,(t=>t),l),n,r);t.setValue(h)}}));const r=e=>{const{min:n,max:i,step:r,dirMin:a,dirMax:l}=this.#u,u=2*e.nx-1,c=2*e.ny-1,h=Math.atan2(c,u),d=(a+l)/2,p=o(($e(h-d)-$e(a-d))/(l-a),0,1),m=s(n+(i-n)*p,(t=>t),r);t.setValue(m)};re(this.domElement,{onDown:r,onMove:r}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),this.#et=this.$("#muigui-arrow"),this.#nt=this.$("#muigui-range"),this.setOptions(n)}updateDisplay(t){this.#it=t;const{min:e,max:n}=this.#u,i=(t-e)/(n-e),o=(r=this.#u.dirMin,s=this.#u.dirMax,r+(s-r)*i);var r,s;this.#et.style.transform=`rotate(${o}rad)`}setOptions(t){l(this.#u,t);const{dirMin:e,dirMax:n,wrap:i}=this.#u;this.#ot=void 0!==i?i:Math.abs(e-n)>=2*Math.PI-Number.EPSILON;const[o,r]=e(o.push(i),e("label",{},[e("input",{type:"radio",name:r,value:a,onChange:function(){this.checked&&t.setFinalValue(s.#D[this.value])}}),e("button",{type:"button",textContent:n,onClick:function(){this.previousElementSibling.click()}})]))))));const s=this;this.#D=o,this.cols(i)}updateDisplay(t){const e=this.#D.indexOf(t);for(let t=0;t{e({rect:t.getBoundingClientRect(),elem:t})})).observe(t)}function Me(t,e,n,i){Ie(t,(({rect:o})=>{const{width:r,height:s}=o;t.setAttribute("viewBox",`-${r*e} -${s*n} ${r} ${s}`),i({elem:t,rect:o})}))}function Se(t,e,n,i,o,r){const a=[];tt),n)),e=Math.min(e,o);for(let i=t;i<=e;i+=n)a.push(`M${i} 0 l0 ${r}`);return a.join(" ")}class De extends v{#rt;#st;#at;#lt;#ut;#ct;#ht;#dt;#pt;#it;#mt;#u={min:-100,max:100,step:1,unit:10,unitSize:10,ticksPerUnit:5,labelFn:t=>t,tickHeight:1,limits:!0,thicksColor:void 0,orientation:void 0};constructor(t,n){const i=L();let r;super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \x3c!----\x3e\n \x3c!----\x3e\n \n \n \n \n\n',className:"muigui-no-v-scroll",onWheel:e=>{e.preventDefault();const{min:n,max:r,step:a}=this.#u,l=i(e,a),u=o(s(this.#it+l,(t=>t),a),n,r);t.setValue(u)}})),this.#rt=this.$("svg"),this.#st=this.$("#muigui-origin"),this.#at=this.$("#muigui-ticks"),this.#lt=this.$("#muigui-thicks"),this.#ut=this.$("#muigui-numbers"),this.#ct=this.$("#muigui-left-grad"),this.#ht=this.$("#muigui-right-grad"),this.setOptions(n),re(this.domElement,{onDown:()=>{r=this.#it},onMove:e=>{const{min:n,max:i,unitSize:a,unit:l,step:u}=this.#u,c=o(s(r-e.dx/a*l,(t=>t),u),n,i);t.setValue(c)}}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),Me(this.#rt,.5,0,(({rect:{width:t}})=>{this.#ct.setAttribute("x",-t/2),this.#ht.setAttribute("x",t/2-20),this.#mt=function(t){const e=t.innerHTML;t.innerHTML="- ";const n=t.querySelector("text").getComputedTextLength();return t.innerHTML=e,n}(this.#ut),this.#dt=t,this.#gt()}))}#gt(){if(!this.#dt||void 0===this.#it)return;const{labelFn:t,limits:e,min:n,max:i,orientation:o,tickHeight:r,ticksPerUnit:a,unit:l,unitSize:u,thicksColor:c}=this.#u,h=Math.ceil(this.#dt/u),d=this.#it/l,p=Math.round(d-h),m=p*u,g=(p+2*h)*u,f=e?n*u/l:m,b=e?i*u/l:g,v=""===t(1)?10:5;a>1&&this.#at.setAttribute("d",Se(m,g,u/a,f,b,v*r)),this.#lt.style.stroke=c,this.#lt.setAttribute("d",Se(m,g,u,f,b,v)),this.#ut.innerHTML=function(t,e,n,i,o,r,a,l){const u=[];tt),n)),e=Math.min(e,a);const c=Math.max(0,-Math.log10(i));for(let r=t;r<=e;r+=n)u.push(`${h=r/n*i,l(h.toFixed(c))}`);var h;return u.join("\n")}(m,g,u,l,this.#mt,f,b,t),this.#st.setAttribute("transform",`translate(${-this.#it*u/l} 0)`),this.#rt.classList.toggle("muigui-slider-up","up"===o)}updateDisplay(t){this.#it=t,this.#gt()}setOptions(t){return l(this.#u,t),this}}class Ne extends v{#rt;#et;#T;#it=[];constructor(t){super(e("div",{innerHTML:'\n\n \n \n \n \n \n\n',className:"muigui-no-scroll"}));const n=e=>{const{width:n,height:i}=this.#rt.getBoundingClientRect(),o=2*e.nx-1,r=2*e.ny-1;t.setValue([o*n*.5,r*i*.5])};re(this.domElement,{onDown:n,onMove:n}),this.#rt=this.$("svg"),this.#et=this.$("#muigui-arrow"),this.#T=this.$("#muigui-circle"),Me(this.#rt,.5,.5,(()=>this.#ft))}#ft(){const[t,e]=this.#it;this.#et.setAttribute("d",`M0,0L${t},${e}`),this.#T.setAttribute("transform",`translate(${t}, ${e})`)}updateDisplay(t){this.#it[0]=t[0],this.#it[1]=t[1],this.#ft()}}return be.ColorChooser=ue,be.Direction=class extends le{#u;constructor(t,e,n){super(t,e,"muigui-direction"),this.#u=n,this.addTop(new O(this,F)),this.addBottom(new Ce(this,n)),this.updateDisplay()}},be.RadioGrid=class extends D{constructor(t,e,n){super(t,e,"muigui-radio-grid");const i="number"==typeof this.getValue(),{keyValues:o,cols:r=3}=n,s=H(o,i);this.add(new Ve(this,s,r)),this.updateDisplay()}},be.Range=B,be.Select=z,be.Slider=class extends D{constructor(t,e,n={}){super(t,e,"muigui-slider"),this.add(new De(this,n)),this.add(new O(this,n)),this.updateDisplay()}},be.TextNumber=j,be.Vec2=class extends le{constructor(t,e){super(t,e,"muigui-vec2");const n=t=>({setValue:e=>{const n=this.getValue();n[t]=e,this.setValue(n)},setFinalValue:e=>{const n=this.getValue();n[t]=e,this.setFinalValue(n)}});this.addTop(new O(n(0),{converters:{to:t=>t[0],from:A.from}})),this.addTop(new O(n(1),{converters:{to:t=>t[1],from:A.from}})),this.addBottom(new Ne(this)),this.updateDisplay()}},be})); //# sourceMappingURL=muigui.min.js.map diff --git a/dist/0.x/muigui.module.js b/dist/0.x/muigui.module.js index 0927f35..e0992db 100644 --- a/dist/0.x/muigui.module.js +++ b/dist/0.x/muigui.module.js @@ -900,58 +900,58 @@ function makeMinMaxPair(gui, properties, minPropName, maxPropName, options) { } class View { - #childDestElem; - #views = []; - - constructor(elem) { - this.domElement = elem; - this.#childDestElem = elem; - } - addElem(elem) { - this.#childDestElem.appendChild(elem); - return elem; - } - removeElem(elem) { - this.#childDestElem.removeChild(elem); - return elem; - } - pushSubElem(elem) { - this.#childDestElem.appendChild(elem); - this.#childDestElem = elem; - } - popSubElem() { - this.#childDestElem = this.#childDestElem.parentElement; - } - add(view) { - this.#views.push(view); - this.addElem(view.domElement); - return view; - } - remove(view) { - this.removeElem(view.domElement); - removeArrayElem(this.#views, view); - return view; - } - pushSubView(view) { - this.pushSubElem(view.domElement); - } - popSubView() { - this.popSubElem(); - } - setOptions(options) { - for (const view of this.#views) { - view.setOptions(options); + domElement; + #childDestElem; + #views = []; + constructor(elem) { + this.domElement = elem; + this.#childDestElem = elem; } - } - updateDisplayIfNeeded(newV, ignoreCache) { - for (const view of this.#views) { - view.updateDisplayIfNeeded(newV, ignoreCache); + addElem(elem) { + this.#childDestElem.appendChild(elem); + return elem; + } + removeElem(elem) { + this.#childDestElem.removeChild(elem); + return elem; + } + pushSubElem(elem) { + this.#childDestElem.appendChild(elem); + this.#childDestElem = elem; + } + popSubElem() { + this.#childDestElem = this.#childDestElem.parentElement; + } + add(view) { + this.#views.push(view); + this.addElem(view.domElement); + return view; + } + remove(view) { + this.removeElem(view.domElement); + removeArrayElem(this.#views, view); + return view; + } + pushSubView(view) { + this.pushSubElem(view.domElement); + } + popSubView() { + this.popSubElem(); + } + setOptions(options) { + for (const view of this.#views) { + view.setOptions(options); + } + } + updateDisplayIfNeeded(newV, ignoreCache) { + for (const view of this.#views) { + view.updateDisplayIfNeeded(newV, ignoreCache); + } + return this; + } + $(selector) { + return this.domElement.querySelector(selector); } - return this; - } - $(selector) { - return this.domElement.querySelector(selector); - } } class Controller extends View { diff --git a/dist/0.x/muigui.module.min.js b/dist/0.x/muigui.module.min.js index f5222b2..ed1d8b4 100644 --- a/dist/0.x/muigui.module.min.js +++ b/dist/0.x/muigui.module.min.js @@ -1,2 +1,2 @@ -var t={default:'\n.muigui {\n --bg-color: #ddd;\n --color: #222;\n --contrast-color: #eee;\n --value-color: #145 ;\n --value-bg-color: #eeee;\n --disabled-color: #999;\n --menu-bg-color: #f8f8f8;\n --menu-sep-color: #bbb;\n --hover-bg-color: #999;\n --focus-color: #68C;\n --range-color: #888888;\n --invalid-color: #FF0000;\n --selected-color: rgb(255, 255, 255, 0.9);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n .muigui {\n --bg-color: #222222;\n --color: #dddddd;\n --contrast-color: #000;\n --value-color: #43e5f7;\n --value-bg-color: #444444;\n --disabled-color: #666666;\n --menu-bg-color: #080808;\n --menu-sep-color: #444444;\n --hover-bg-color: #666666;\n --focus-color: #88AAFF;\n --range-color: #888888;\n --invalid-color: #FF6666;\n --selected-color: rgba(255, 255, 255, 0.3);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n }\n}\n\n.muigui {\n --width: 250px;\n --label-width: 45%;\n --number-width: 40%;\n\n\n --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;\n --font-size: 11px;\n --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;\n --font-size-mono: 11px;\n\n --line-height: 1.7em;\n --border-radius: 0px;\n\n width: var(--width);\n font-family: var(--font-family);\n font-size: var(--font-size);\n box-sizing: border-box;\n line-height: 100%;\n}\n.muigui * {\n box-sizing: inherit;\n}\n\n.muigui-no-scroll {\n touch-action: none;\n}\n.muigui-no-h-scroll {\n touch-action: pan-y;\n}\n.muigui-no-v-scroll {\n touch-action: pan-x;\n}\n\n.muigui-invalid-value {\n background-color: red !important;\n color: white !important;\n}\n\n.muigui-grid {\n display: grid;\n}\n.muigui-rows {\n display: flex;\n flex-direction: column;\n\n min-height: 20px;\n border: 2px solid red;\n}\n.muigui-columns {\n display: flex;\n flex-direction: row;\n\n height: 20px;\n border: 2px solid green;\n}\n.muigui-rows>*,\n.muigui-columns>* {\n flex: 1 1 auto;\n align-items: stretch;\n min-height: 0;\n min-width: 0;\n}\n\n.muigui-row {\n border: 2px solid yellow;\n min-height: 10px\n}\n.muigui-column {\n border: 2px solid lightgreen;\n}\n\n/* -------- */\n\n.muigui-show { /* */ }\n.muigui-hide { \n display: none !important;\n}\n.muigui-disabled {\n pointer-events: none;\n --color: var(--disabled-color) !important;\n --value-color: var(--disabled-color) !important;\n --range-left-color: var(--disabled-color) !important;\n}\n\n.muigui canvas,\n.muigui svg {\n display: block;\n border-radius: var(--border-radius);\n}\n.muigui canvas {\n background-color: var(--value-bg-color);\n}\n\n.muigui-controller {\n min-width: 0;\n min-height: var(--line-height);\n}\n.muigui-root,\n.muigui-menu {\n display: flex;\n flex-direction: column;\n position: relative;\n user-select: none;\n height: fit-content;\n margin: 0;\n padding-bottom: 0.1em;\n border-radius: var(--border-radius);\n}\n.muigui-menu {\n border-bottom: 1px solid var(--menu-sep-color);\n}\n\n.muigui-root>button:nth-child(1),\n.muigui-menu>button:nth-child(1) {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n position: relative;\n text-align: left;\n color: var(--color);\n background-color: var(--menu-bg-color);\n min-height: var(--line-height);\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n.muigui-root>div:nth-child(2),\n.muigui-menu>div:nth-child(2) {\n flex: 1 1 auto;\n}\n\n.muigui-controller {\n margin-left: 0.2em;\n margin-right: 0.2em;\n}\n.muigui-root.muigui-controller,\n.muigui-menu.muigui-controller {\n margin-left: 0;\n margin-right: 0;\n}\n.muigui-controller>*:nth-child(1) {\n flex: 1 0 var(--label-width);\n min-width: 0;\n white-space: pre;\n}\n.muigui-controller>label:nth-child(1) {\n place-content: center start;\n display: inline-grid;\n overflow: hidden;\n}\n.muigui-controller>*:nth-child(2) {\n flex: 1 1 75%;\n min-width: 0;\n}\n\n/* -----------------------------------------\n a label controller is [[label][value]]\n*/\n\n.muigui-label-controller {\n display: flex;\n margin: 0.4em 0 0.4em 0;\n word-wrap: initial;\n align-items: stretch;\n}\n\n.muigui-value {\n display: flex;\n align-items: stretch;\n}\n.muigui-value>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n.muigui-value>*:nth-child(1) {\n flex: 1 1 calc(100% - var(--number-width));\n}\n.muigui-value>*:nth-child(2) {\n flex: 1 1 var(--number-width);\n margin-left: 0.2em;\n}\n\n/* fix! */\n.muigui-open>button>label::before,\n.muigui-closed>button>label::before {\n width: 1.25em;\n height: var(--line-height);\n display: inline-grid;\n place-content: center start;\n pointer-events: none;\n}\n.muigui-open>button>label::before {\n content: "ⓧ"; /*"▼";*/\n}\n.muigui-closed>button>label::before {\n content: "⨁"; /*"▶";*/\n}\n.muigui-open>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 0.5s ease-out;\n max-height: 100vh;\n overflow: auto;\n opacity: 1;\n}\n\n.muigui-closed>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 1s;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n}\n\n/* ---- popdown ---- */\n\n.muigui-pop-down-top {\n display: flex;\n}\n/* fix? */\n.muigui-value>*:nth-child(1).muigui-pop-down-top {\n flex: 0;\n}\n.muigui-pop-down-bottom {\n\n}\n\n.muigui-pop-down-values {\n min-width: 0;\n display: flex;\n}\n.muigui-pop-down-values>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.muigui-value.muigui-pop-down-controller {\n flex-direction: column;\n}\n\n.muigui-pop-down-top input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-pop-down-top input[type=checkbox]::before {\n content: "+";\n display: grid;\n place-content: center;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n color: var(--value-bg-color);\n width: calc(var(--line-height) - 4px);\n height: calc(var(--line-height) - 4px);\n}\n\n.muigui-pop-down-top input[type=checkbox]:checked::before {\n content: "Ｘ";\n}\n\n\n/* ---- select ---- */\n\n.muigui select,\n.muigui option,\n.muigui input,\n.muigui button {\n color: var(--value-color);\n background-color: var(--value-bg-color);\n font-family: var(--font-family);\n font-size: var(--font-size);\n border: none;\n margin: 0;\n border-radius: var(--border-radius);\n}\n.muigui select {\n appearance: none;\n margin: 0;\n margin-left: 0; /*?*/\n overflow: hidden; /* Safari */\n}\n\n.muigui select:focus,\n.muigui input:focus,\n.muigui button:focus {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui select:hover,\n.muigui option:hover,\n.muigui input:hover,\n.muigui button:hover {\n background-color: var(--hover-bg-color); \n}\n\n/* ------ [ label ] ------ */\n\n.muigui-label {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n padding-top: 0.4em;\n padding-bottom: 0.3em;\n place-content: center start;\n background-color: var(--menu-bg-color);\n white-space: pre;\n border-radius: var(--border-radius);\n}\n\n/* ------ [ divider] ------ */\n\n.muigui-divider {\n min-height: 6px;\n border-top: 2px solid var(--menu-sep-color);\n margin-top: 6px;\n}\n\n/* ------ [ button ] ------ */\n\n.muigui-button {\n display: grid;\n\n}\n.muigui-button button {\n border: none;\n color: var(--value-color);\n background-color: var(--button-bg-color);\n cursor: pointer;\n place-content: center center;\n}\n\n/* ------ [ color ] ------ */\n\n.muigui-color>div {\n overflow: hidden;\n position: relative;\n margin-left: 0;\n margin-right: 0; /* why? */\n max-width: var(--line-height);\n border-radius: var(--border-radius);\n}\n\n.muigui-color>div:focus-within {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui-color input[type=color] {\n border: none;\n padding: 0;\n background: inherit;\n cursor: pointer;\n position: absolute;\n width: 200%;\n left: -10px;\n top: -10px;\n height: 200%;\n}\n.muigui-disabled canvas,\n.muigui-disabled svg,\n.muigui-disabled img,\n.muigui-disabled .muigui-color input[type=color] {\n opacity: 0.2;\n}\n\n/* ------ [ checkbox ] ------ */\n\n.muigui-checkbox>label:nth-child(2) {\n display: grid;\n place-content: center start;\n margin: 0;\n}\n\n.muigui-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-checkbox input[type=checkbox]::before {\n content: "";\n color: var(--value-color);\n display: grid;\n place-content: center;\n}\n\n.muigui-checkbox input[type=checkbox]:checked::before {\n content: "✔";\n}\n\n.muigui input[type=number]::-webkit-inner-spin-button, \n.muigui input[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none;\n appearance: none;\n margin: 0; \n}\n.muigui input[type=number] {\n -moz-appearance: textfield;\n}\n\n/* ------ [ radio grid ] ------ */\n\n.muigui-radio-grid>div {\n display: grid;\n gap: 2px;\n}\n\n.muigui-radio-grid input {\n appearance: none;\n display: none;\n}\n\n.muigui-radio-grid button {\n color: var(--color);\n width: 100%;\n text-align: left;\n}\n\n.muigui-radio-grid input:checked + button {\n color: var(--value-color);\n background-color: var(--selected-color);\n}\n\n/* ------ [ color-chooser ] ------ */\n\n.muigui-color-chooser-cursor {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n.muigui-color-chooser-circle {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n\n\n/* ------ [ vec2 ] ------ */\n\n.muigui-vec2 svg {\n background-color: var(--value-bg-color);\n}\n\n.muigui-vec2-axis {\n stroke: 1px;\n stroke: var(--focus-color);\n}\n\n.muigui-vec2-line {\n stroke-width: 1px;\n stroke: var(--value-color);\n fill: var(--value-color);\n}\n\n/* ------ [ direction ] ------ */\n\n.muigui-direction svg {\n background-color: rgba(0,0,0,0.2);\n}\n\n.muigui-direction:focus-within svg {\n outline: none;\n}\n.muigui-direction-range {\n fill: var(--value-bg-color);\n}\n.muigui-direction svg:focus {\n outline: none;\n}\n.muigui-direction svg:focus .muigui-direction-range {\n stroke-width: 0.5px;\n stroke: var(--focus-color);\n}\n\n.muigui-direction-arrow {\n fill: var(--value-color);\n}\n\n/* ------ [ slider ] ------ */\n\n.muigui-slider>div {\n display: flex;\n align-items: stretch;\n height: var(--line-height);\n}\n.muigui-slider svg {\n flex: 1 1 auto;\n}\n.muigui-slider .muigui-slider-up #muigui-orientation {\n transform: scale(1, -1) translateY(-100%);\n}\n\n.muigui-slider .muigui-slider-up #muigui-number-orientation {\n transform: scale(1,-1);\n}\n\n.muigui-ticks {\n stroke: var(--range-color);\n}\n.muigui-thicks {\n stroke: var(--color);\n stroke-width: 2px;\n}\n.muigui-svg-text {\n fill: var(--color);\n font-size: 7px;\n}\n.muigui-mark {\n fill: var(--value-color);\n}\n\n/* ------ [ range ] ------ */\n\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: transparent;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n margin-top: calc((var(--line-height) - 2px) / -2);\n width: calc(var(--line-height) - 2px);\n height: calc(var(--line-height) - 2px);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n border: 1px solid var(--menu-sep-color);\n height: 2px;\n}\n\n\n/* dat.gui style - doesn\'t work on Safari iOS */\n\n/*\n.muigui-range input[type=range] {\n cursor: ew-resize;\n overflow: hidden;\n}\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: var(--range-right-color);\n margin: 0;\n}\n.muigui-range input[type=range]:hover {\n background-color: var(--range-right-hover-color);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n height: max-content;\n color: var(--range-left-color);\n margin-top: -1px;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 0px;\n height: max-content;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n}\n*/\n\n/* FF */\n/*\n.muigui-range input[type=range]::-moz-slider-progress {\n background-color: var(--range-left-color); \n}\n.muigui-range input[type=range]::-moz-slider-thumb {\n height: max-content;\n width: 0;\n border: none;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n box-sizing: border-box;\n}\n*/\n\n.muigui-checkered-background {\n background-color: #404040;\n background-image:\n linear-gradient(45deg, #808080 25%, transparent 25%),\n linear-gradient(-45deg, #808080 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #808080 75%),\n linear-gradient(-45deg, transparent 75%, #808080 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0px;\n}\n\n/* ---------------------------------------------------------- */\n\n/* needs to be at bottom to take precedence */\n.muigui-auto-place {\n max-height: 100%;\n position: fixed;\n top: 0;\n right: 15px;\n z-index: 100001;\n}\n\n',themes:{default:"",float:"\n :root {\n color-scheme: light dark,\n }\n\n .muigui {\n --width: 400px;\n --bg-color: initial;\n --label-width: 25%;\n --number-width: 20%;\n }\n\n input,\n .muigui-label-controller>label {\n text-shadow:\n -1px -1px 0 var(--contrast-color),\n 1px -1px 0 var(--contrast-color),\n -1px 1px 0 var(--contrast-color),\n 1px 1px 0 var(--contrast-color);\n }\n\n .muigui-controller > label:nth-child(1) {\n place-content: center end;\n margin-right: 1em;\n }\n\n .muigui-value > :nth-child(2) {\n margin-left: 1em;\n }\n\n .muigui-root>*:nth-child(1) {\n display: none;\n }\n\n .muigui-range input[type=range]::-webkit-slider-thumb {\n border-radius: 1em;\n }\n\n .muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: initial;\n appearance: none;\n border: 1px solid rgba(0, 0, 0, 0.25);\n height: 2px;\n }\n\n .muigui-colors {\n --value-color: var(--color );\n --value-bg-color: rgba(0, 0, 0, 0.1);\n --disabled-color: #cccccc;\n --menu-bg-color: rgba(0, 0, 0, 0.1);\n --menu-sep-color: #bbbbbb;\n --hover-bg-color: rgba(0, 0, 0, 0);\n --invalid-color: #FF0000;\n --selected-color: rgba(0, 0, 0, 0.3);\n --range-color: rgba(0, 0, 0, 0.125);\n }\n"}};function e(t,e={},n=[]){const i=document.createElement(t);return function(t,e,n){for(const[n,i]of Object.entries(e))if("function"==typeof i&&n.startsWith("on")){const e=n.substring(2).toLowerCase();t.addEventListener(e,i,{passive:!1})}else if("object"==typeof i)for(const[e,o]of Object.entries(i))t[n][e]=o;else void 0===t[n]?t.setAttribute(n,i):t[n]=i;for(const e of n)t.appendChild(e)}(i,e,n),i}let n=0;function i(t,e){const n=t.indexOf(e);return n&&t.splice(n,1),t}function o(t,e,n){return Math.max(e,Math.min(n,t))}const r="undefined"!=typeof SharedArrayBuffer?function(t){return t&&t.buffer&&(t.buffer instanceof ArrayBuffer||t.buffer instanceof SharedArrayBuffer)}:function(t){return t&&t.buffer&&t.buffer instanceof ArrayBuffer},s=(t,e,n)=>Math.round(e(t)/n)/(1/n),a=(t,e)=>(t%e+e)%e;function l(t,e){for(const n in e)n in t&&(t[n]=e[n]);return t}const u=(t,e,n,i,o)=>(t-e)*(o-i)/(n-e)+i,c=({from:t,to:e})=>({to:n=>u(n,...t,...e),from:n=>[!0,u(n,...e,...t)]}),h=({from:t,to:e,step:n})=>({min:e[0],max:e[1],...n&&{step:n},converters:c({from:t,to:e})}),d={to:t=>t,from:t=>[!0,t]};function p(t,e,n,i,o){const{converters:{from:r}=d}=o,{min:s,max:a}=o,l=o.minRange||0,u=r(l)[1],c=t.add(e,n,{...o,min:s,max:a-l}).onChange((t=>{h.setValue(Math.min(a,Math.max(t+u,e[i])))})),h=t.add(e,i,{...o,min:s+l,max:a}).onChange((t=>{c.setValue(Math.max(s,Math.min(t-u,e[n])))}));return[c,h]}class m{#t;#e=[];constructor(t){this.domElement=t,this.#t=t}addElem(t){return this.#t.appendChild(t),t}removeElem(t){return this.#t.removeChild(t),t}pushSubElem(t){this.#t.appendChild(t),this.#t=t}popSubElem(){this.#t=this.#t.parentElement}add(t){return this.#e.push(t),this.addElem(t.domElement),t}remove(t){return this.removeElem(t.domElement),i(this.#e,t),t}pushSubView(t){this.pushSubElem(t.domElement)}popSubView(){this.popSubElem()}setOptions(t){for(const e of this.#e)e.setOptions(t)}updateDisplayIfNeeded(t,e){for(const n of this.#e)n.updateDisplayIfNeeded(t,e);return this}$(t){return this.domElement.querySelector(t)}}class g extends m{#n;#i;#o;constructor(t){super(e("div",{className:"muigui-controller"})),this.#n=[],this.#i=[],t&&this.domElement.classList.add(t)}get parent(){return this.#o}setParent(t){this.#o=t,this.enable(!this.disabled())}show(t=!0){return this.domElement.classList.toggle("muigui-hide",!t),this.domElement.classList.toggle("muigui-show",t),this}hide(){return this.show(!1)}disabled(){return!!this.domElement.closest(".muigui-disabled")}enable(t=!0){return this.domElement.classList.toggle("muigui-disabled",!t),["input","button","select","textarea"].forEach((t=>{this.domElement.querySelectorAll(t).forEach((t=>{const e=!!t.closest(".muigui-disabled");t.disabled=e}))})),this}disable(t=!0){return this.enable(!t)}onChange(t){return this.removeChange(t),this.#n.push(t),this}removeChange(t){return i(this.#n,t),this}onFinishChange(t){return this.removeFinishChange(t),this.#i.push(t),this}removeFinishChange(t){return i(this.#i,t),this}#r(t,e){for(const n of t)n.call(this,e)}emitChange(t,e,n){this.#r(this.#n,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitChange({object:e,property:n,value:t,controller:this}))}emitFinalChange(t,e,n){this.#r(this.#i,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitFinalChange({object:e,property:n,value:t,controller:this}))}updateDisplay(){}getColors(){const t=t=>t.replace(/-([a-z])/g,((t,e)=>e.toUpperCase())),n=e("div");this.domElement.appendChild(n);const i=Object.fromEntries(["color","bg-color","value-color","value-bg-color","hover-bg-color","menu-bg-color","menu-sep-color","disabled-color"].map((e=>{n.style.color=`var(--${e})`;const i=getComputedStyle(n);return[t(e),i.color]})));return n.remove(),i}}class f extends g{#s;#a;#l;#u={name:""};constructor(t,n,i={}){super("muigui-button",""),this.#s=t,this.#a=n,this.#l=this.addElem(e("button",{type:"button",onClick:()=>{this.#s[this.#a](this)}})),this.setOptions({name:n,...i})}setOptions(t){l(this.#u,t);const{name:e}=this.#u;this.#l.textContent=e}}function b(t,e){if(t.length!==e.length)return!1;for(let n=0;n{t.setValue(i.checked)},onChange:()=>{t.setFinalValue(i.checked)}});super(e("label",{},[i])),this.#b=i}updateDisplay(t){this.#b.checked=t}}const w=[],y=new Set;let k,E;function $(){k=void 0,E=!0;for(const t of w)y.has(t)||t();E=!1,y.size&&(E?C():(y.forEach((t=>{i(w,t)})),y.clear())),C()}function C(){!k&&w.length&&(k=requestAnimationFrame($))}let V=0;function I(){return"muigui-"+ ++V}class M extends m{constructor(t=""){super(e("div",{className:"muigui-value"})),t&&this.domElement.classList.add(t)}}class S extends g{#v;#x;constructor(t="",n=""){super("muigui-label-controller"),this.#v=I(),this.#x=e("label",{for:this.#v}),this.domElement.appendChild(this.#x),this.pushSubView(new M(t)),this.name(n)}get id(){return this.#v}name(t){return this.#x.title===this.#x.textContent&&(this.#x.title=t),this.#x.textContent=t,this}tooltip(t){this.#x.title=t}}class D extends S{#s;#a;#w;#y;#e;#k;constructor(t,e,n=""){super(n,e),this.#s=t,this.#a=e,this.#w=this.getValue(),this.#y=!1,this.#e=[]}get initialValue(){return this.#w}get object(){return this.#s}get property(){return this.#a}add(t){return this.#e.push(t),super.add(t),this.updateDisplay(),t}#E(t,e){let n=!1;if("object"==typeof t){const e=this.#s[this.#a];if(Array.isArray(t)||r(t))for(let i=0;i=0&&w.splice(e,1)}(this.#k)),this}}class N extends D{constructor(t,e){super(t,e,"muigui-checkbox");const n=this.id;this.add(new x(this,n)),this.updateDisplay()}}const F={to:t=>t,from:t=>[!0,t]},A={to:t=>t.toString(),from:t=>{const e=parseFloat(t);return[!Number.isNaN(e),e]}},U={radToDeg:c({to:[0,180],from:[0,Math.PI]})};function L(){let t=0;return function(e,n,i=5){t-=e.deltaY*n/i;const o=Math.floor(Math.abs(t)/n)*Math.sign(t)*n;return t-=o,o}}class O extends v{#$;#C;#V;#I;#u={step:.01,converters:A,min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY};constructor(t,n){const i=t.setValue.bind(t),r=t.setFinalValue.bind(t),a=L();super(e("input",{type:"number",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(r,!1),onWheel:e=>{e.preventDefault();const{min:n,max:i,step:r}=this.#u,l=a(e,r),u=parseFloat(this.domElement.value),c=o(s(u+l,(t=>t),r),n,i);t.setValue(c)}})),this.setOptions(n)}#M(t,e){const n=parseFloat(this.domElement.value),[i,r]=this.#C(n);let s;if(i&&!Number.isNaN(n)){const{min:n,max:i}=this.#u;s=r>=n&&r<=i,this.#I=e,t(o(r,n,i))}this.domElement.classList.toggle("muigui-invalid-value",!i||!s)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,converters:{to:n,from:i}}=this.#u;return this.#$=n,this.#C=i,this.#V=e,this}}class j extends D{#S;#V;constructor(t,e,n={}){super(t,e,"muigui-checkbox"),this.#S=this.add(new O(this,n)),this.updateDisplay()}}class T extends v{#D;constructor(t,n){const i=[];super(e("select",{onChange:()=>{t.setFinalValue(this.#D[this.domElement.selectedIndex])}},n.map((([t,n])=>(i.push(n),e("option",{textContent:t})))))),this.#D=i}updateDisplay(t){const e=this.#D.indexOf(t);this.domElement.selectedIndex=e}}function H(t,e){return Array.isArray(t)?Array.isArray(t[0])?t:e?t.map(((t,e)=>[t,e])):t.map((t=>[t,t])):[...Object.entries(t)]}class z extends D{constructor(t,e,n){super(t,e,"muigui-select");const i="number"==typeof this.getValue(),{keyValues:o}=n,r=H(o,i);this.add(new T(this,r)),this.updateDisplay()}}class P extends v{#$;#C;#V;#I;#u={step:.01,min:0,max:1,converters:F};constructor(t,n){const i=L();super(e("input",{type:"range",onInput:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setValue(u)},onChange:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setFinalValue(u)},onWheel:e=>{e.preventDefault();const[n,r]=this.#C(parseFloat(this.domElement.value));if(!n)return;const{min:a,max:l,step:u}=this.#u,c=i(e,u),h=o(s(r+c,(t=>t),u),a,l);t.setValue(h)}})),this.setOptions(n)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,min:n,max:i,converters:{to:o,from:r}}=this.#u;return this.#$=o,this.#C=r,this.#V=e,this.domElement.step=e,this.domElement.min=n,this.domElement.max=i,this}}class B extends D{constructor(t,e,n){super(t,e,"muigui-range"),this.add(new P(this,n)),this.add(new O(this,n))}}class G extends v{#$;#C;#I;#u={converters:F};constructor(t,n){const i=t.setValue.bind(t),o=t.setFinalValue.bind(t);super(e("input",{type:"text",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(o,!1)})),this.setOptions(n)}#M(t,e){const[n,i]=this.#C(this.domElement.value);n&&(this.#I=e,t(i)),this.domElement.style.color=n?"":"var(--invalid-color)"}updateDisplay(t){this.#I||(this.domElement.value=this.#$(t),this.domElement.style.color=""),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class R extends D{constructor(t,e){super(t,e,"muigui-checkbox"),this.add(new G(this)),this.updateDisplay()}}const _=(t,e,n)=>Math.max(e,Math.min(n,t)),Y=(t,e,n)=>t+(e-t)*n,W=t=>t>=0?t%1:1-t%1,q=t=>+t.toFixed(0),K=t=>+t.toFixed(3),J=t=>parseInt(t.substring(1,3),16)<<16|parseInt(t.substring(3,5),16)<<8|parseInt(t.substring(5,7),16),X=t=>parseInt(t.substring(1,3),16)*2**24+65536*parseInt(t.substring(3,5),16)+256*parseInt(t.substring(5,7),16)+parseInt(t.substring(7,9),16),Z=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)],Q=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,tt=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16),parseInt(t.substring(7,9),16)],et=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,nt=t=>Z(t).map((t=>K(t/255))),it=t=>Q(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),ot=t=>tt(t).map((t=>K(t/255))),rt=t=>et(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),st=t=>_(Math.round(255*t),0,255).toString(16).padStart(2,"0"),at=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255}),lt=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255,a:parseInt(t.substring(7,9),16)/255}),ut=t=>`rgb(${Z(t).join(", ")})`,ct=/^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,ht=t=>`rgba(${tt(t).map(((t,e)=>3===e?t/255:t)).join(", ")})`,dt=/^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+\.\d+|\d+)\s*\)\s*$/,pt=t=>{const e=yt(Z(t)).map((t=>q(t)));return`hsl(${e[0]}, ${e[1]}%, ${e[2]}%)`},mt=t=>{const e=kt(tt(t)).map(((t,e)=>3===e?K(t):q(t)));return`hsl(${e[0]} ${e[1]}% ${e[2]}% / ${e[3]})`},gt=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\)\s*$/,ft=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\/\s*(\d+\.\d+|\d+)\s*\)\s*$/,bt=(t,e)=>(t%e+e)%e;function vt([t,e,n]){t=bt(t,360),e=_(e/100,0,1),n=_(n/100,0,1);const i=e*Math.min(n,1-n);function o(e){const o=(e+t/30)%12;return n-i*Math.max(-1,Math.min(o-3,9-o,1))}return[o(0),o(8),o(4)].map((t=>Math.round(255*t)))}function xt([t,e,n]){const i=Math.max(t,e,n),o=Math.min(t,e,n),r=.5*(o+i),s=i-o;let a=0,l=0;if(0!==s)switch(l=0===r||1===r?0:(i-r)/Math.min(r,1-r),i){case t:a=(e-n)/s+(e{const[e,n,i]=xt(t.map((t=>t/255)));return[360*e,100*n,100*i]},kt=t=>{const[e,n,i,o]=wt(t.map((t=>t/255)));return[360*e,100*n,100*i,o]};function Et([t,e,n]){return e=_(e,0,1),n=_(n,0,1),[t,t+2/3,t+1/3].map((t=>Y(1,_(Math.abs(6*W(t)-3)-1,0,1),e)*n))}function $t([t,e,n,i]){return[...Et([t,e,n]),i]}const Ct=t=>Math.round(1e3*t)/1e3;function Vt([t,e,n]){const i=n>e?[n,e,-1,2/3]:[e,n,0,-1/3],o=i[0]>t?[i[0],i[1],i[3],t]:[t,i[1],i[2],i[0]],r=o[0]-Math.min(o[3],o[1]);return[Math.abs(o[2]+(o[3]-o[1])/(6*r+Number.EPSILON)),r/(o[0]+Number.EPSILON),o[0]].map(Ct)}const It=t=>t.endsWith("a")||t.startsWith("hex8"),Mt=[{re:/^#(?:[0-9a-f]){6}$/i,format:"hex6"},{re:/^(?:[0-9a-f]){6}$/i,format:"hex6-no-hash"},{re:/^#(?:[0-9a-f]){8}$/i,format:"hex8"},{re:/^(?:[0-9a-f]){8}$/i,format:"hex8-no-hash"},{re:/^#(?:[0-9a-f]){3}$/i,format:"hex3"},{re:/^(?:[0-9a-f]){3}$/i,format:"hex3-no-hash"},{re:ct,format:"css-rgb"},{re:gt,format:"css-hsl"},{re:dt,format:"css-rgba"},{re:ft,format:"css-hsla"}];function St(t){switch(typeof t){case"number":return console.warn('can not reliably guess format based on a number. You should pass in a format like {format: "uint32-rgb"} or {format: "uint32-rgb"}'),t<=16777215?"uint32-rgb":"uint32-rgba";case"string":{const e=function(t){for(const e of Mt)if(e.re.test(t))return e}(t.trim());if(e)return e.format;break}case"object":if(t instanceof Uint8Array||t instanceof Uint8ClampedArray){if(3===t.length)return"uint8-rgb";if(4===t.length)return"uint8-rgba"}else if(t instanceof Float32Array){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if(Array.isArray(t)){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if("r"in t&&"g"in t&&"b"in t)return"a"in t?"object-rgba":"object-rgb"}throw new Error(`unknown color format: ${t}`)}function Dt(t){return t.trim(t)}function Nt(t){return t.trim(t)}function Ft(t){return t[1]===t[2]&&t[3]===t[4]&&t[5]===t[6]?`#${t[1]}${t[3]}${t[5]}`:t}const At=/^(#|)([0-9a-f]{3})$/i;function Ut(t){const e=At.exec(t);if(e){const[,,t]=e;return"#"+`${(n=t)[0]}${n[0]}${n[1]}${n[1]}${n[2]}${n[2]}`}var n;return t}function Lt(t){return Ft(Dt(t))}const Ot=t=>{const e=ct.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),`rgb(${n.join(", ")})`]},jt=t=>{const e=dt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?parseFloat(t):parseInt(t)));return[!n.find((t=>t>255)),`rgba(${n.join(", ")})`]},Tt=t=>{const e=gt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]}, ${n[1]}%, ${n[2]}%)`]},Ht=t=>{const e=ft.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]} ${n[1]}% ${n[2]}% / ${n[3]})`]},zt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Pt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Bt=/^\s*(?:0x){0,1}([0-9a-z]{1,6})\s*$/i,Gt=/^\s*(?:0x){0,1}([0-9a-z]{1,8})\s*$/i,Rt=/^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i,_t=/^\s*[a-f0-9]{6}\s*$/i,Yt=/^\s*#[a-f0-9]{8}\s*$/i,Wt=/^\s*[a-f0-9]{8}\s*$/i,qt={hex6:{color:{from:t=>[!0,t],to:Dt},text:{from:t=>[Rt.test(t),t.trim()],to:t=>t}},hex8:{color:{from:t=>[!0,t],to:Nt},text:{from:t=>[Yt.test(t),t.trim()],to:t=>t}},hex3:{color:{from:t=>[!0,Lt(t)],to:Ut},text:{from:t=>[Rt.test(t),Ft(t.trim())],to:t=>t}},"hex6-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Dt(t)}`},text:{from:t=>[_t.test(t),t.trim()],to:t=>t}},"hex8-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Nt(t)}`},text:{from:t=>[Wt.test(t),t.trim()],to:t=>t}},"hex3-no-hash":{color:{from:t=>[!0,Lt(t).substring(1)],to:Ut},text:{from:t=>[_t.test(t),Ft(t.trim())],to:t=>t}},"uint32-rgb":{color:{from:t=>[!0,J(t)],to:t=>`#${Math.round(t).toString(16).padStart(6,"0")}`},text:{from:t=>(t=>{const e=Bt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(6,"0")}`}},"uint32-rgba":{color:{from:t=>[!0,X(t)],to:t=>`#${Math.round(t).toString(16).padStart(8,"0")}`},text:{from:t=>(t=>{const e=Gt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(8,"0")}`}},"uint8-rgb":{color:{from:t=>[!0,Z(t)],to:Q},text:{from:t=>{const e=zt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"uint8-rgba":{color:{from:t=>[!0,tt(t)],to:et},text:{from:t=>{const e=Pt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"float-rgb":{color:{from:t=>[!0,nt(t)],to:it},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(3!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"float-rgba":{color:{from:t=>[!0,ot(t)],to:rt},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(4!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"object-rgb":{color:{from:t=>[!0,at(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b))throw new Error("not {r, g, b}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}`}},"object-rgba":{color:{from:t=>[!0,lt(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}${st(t.a)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b)||Number.isNaN(n.a))throw new Error("not {r, g, b, a}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}, a:${K(t.a)}}`}},"css-rgb":{color:{from:t=>[!0,ut(t)],to:t=>{const e=ct.exec(t);return Q([e[1],e[2],e[3]].map((t=>parseInt(t))))}},text:{from:Ot,to:t=>Ot(t)[1]}},"css-rgba":{color:{from:t=>[!0,ht(t)],to:t=>{const e=dt.exec(t);return et([e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?255*parseFloat(t)|0:parseInt(t))))}},text:{from:jt,to:t=>jt(t)[1]}},"css-hsl":{color:{from:t=>[!0,pt(t)],to:t=>{const e=gt.exec(t),n=vt([e[1],e[2],e[3]].map((t=>parseFloat(t))));return Q(n)}},text:{from:Tt,to:t=>Tt(t)[1]}},"css-hsla":{color:{from:t=>[!0,mt(t)],to:t=>{const e=ft.exec(t),n=function([t,e,n,i]){return[...vt([t,e,n]),255*i|0]}([e[1],e[2],e[3],e[4]].map((t=>parseFloat(t))));return et(n)}},text:{from:Ht,to:t=>Ht(t)[1]}}};class Kt extends m{constructor(t,n){super(e(t,{className:n}))}}class Jt extends S{#N;constructor(){super("muigui-canvas"),this.#N=this.add(new Kt("canvas","muigui-canvas")).domElement}get canvas(){return this.#N}}class Xt extends v{#$;#C;#F;#I;#u={converters:F};constructor(t,n){const i=e("input",{type:"color",onInput:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setValue(n))},onChange:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setFinalValue(n))}});super(e("div",{},[i])),this.setOptions(n),this.#F=i}updateDisplay(t){this.#I||(this.#F.value=this.#$(t)),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class Zt extends D{#A;#S;constructor(t,e,n={}){super(t,e,"muigui-color");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#A=this.add(new Xt(this,{converters:o})),this.#S=this.add(new G(this,{converters:r})),this.updateDisplay()}setOptions(t){const{format:e}=t;if(e){const{color:t,text:n}=qt[e];this.#A.setOptions({converters:t}),this.#S.setOptions({converters:n})}return super.setOptions(t),this}}class Qt extends g{constructor(){super("muigui-divider")}}class te extends g{#U;#L;constructor(t){super(t),this.#U=[],this.#L=this}get children(){return this.#U}get controllers(){return this.#U.filter((t=>!(t instanceof te)))}get folders(){return this.#U.filter((t=>t instanceof te))}reset(t=!0){for(const e of this.#U)e instanceof te&&!t||e.reset(t);return this}updateDisplay(){for(const t of this.#U)t.updateDisplay();return this}remove(t){const e=this.#U.indexOf(t);if(e>=0){const t=this.#U.splice(e,1)[0];t.domElement.remove(),t.setParent(null)}return this}_addControllerImpl(t){return this.domElement.appendChild(t.domElement),this.#U.push(t),t.setParent(this),t}addController(t){return this.#L._addControllerImpl(t)}pushContainer(t){return this.addController(t),this.#L=t,t}popContainer(){return this.#L=this.#L.parent,this}}class ee extends te{#O;constructor(t="Controls",n="muigui-menu"){super(n),this.#O=e("label"),this.addElem(e("button",{type:"button",onClick:()=>this.toggleOpen()},[this.#O])),this.pushContainer(new te),this.name(t),this.open()}open(t=!0){return this.domElement.classList.toggle("muigui-closed",!t),this.domElement.classList.toggle("muigui-open",t),this}close(){return this.open(!1)}name(t){return this.#O.textContent=t,this}title(t){return this.name(t)}toggleOpen(){return this.open(!this.domElement.classList.contains("muigui-open")),this}}class ne extends g{constructor(t){super("muigui-label"),this.text(t)}text(t){return this.domElement.textContent=t,this}}function ie(){}function oe(t,e,n){const i=t.getBoundingClientRect(),o=e.clientX-i.left,r=e.clientY-i.top,s=o/i.width,a=r/i.height,l=o-(n=n||[o,r])[0],u=r-n[1];return{x:o,y:r,nx:s,ny:a,dx:l,dy:u,ndx:l/i.width,ndy:u/i.width}}function re(t,{onDown:e=ie,onMove:n=ie,onUp:i=ie}){let o;const r=function(e){const i={type:"move",...oe(t,e,o)};n(i)},s=function(e){t.releasePointerCapture(e.pointerId),t.removeEventListener("pointermove",r),t.removeEventListener("pointerup",s),document.body.style.backgroundColor="",i("up")},a=function(n){t.addEventListener("pointermove",r),t.addEventListener("pointerup",s),t.setPointerCapture(n.pointerId);const i=oe(t,n);o=[i.x,i.y],e({type:"down",...i})};return t.addEventListener("pointerdown",a),function(){t.removeEventListener("pointerdown",a)}}function se(t){return t.querySelectorAll("[data-src]").forEach((e=>{const i="muigui-id-"+n++;e.id=i,t.querySelectorAll(`[data-target=${e.dataset.src}]`).forEach((t=>{t.setAttribute("fill",`url(#${i})`)}))})),t}class ae extends v{#$;#C;#j;#T;#H;#z;#P;#B;#G;#R;#_;#Y;#W;#q;#u={converters:F,alpha:!1};#K;#J;constructor(t,n){super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n\n \n \n \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n \n \n \n \n \n \n\n',className:"muigui-no-scroll"})),this.#j=this.domElement.children[0],this.#H=this.domElement.children[1],this.#B=this.domElement.children[2],se(this.#j),se(this.#H),se(this.#B),this.#T=this.$(".muigui-color-chooser-circle"),this.#z=this.$("[data-src=muigui-color-chooser-hue]"),this.#P=this.$(".muigui-color-chooser-hue-cursor"),this.#G=this.$("[data-src=muigui-color-chooser-alpha]"),this.#R=this.$(".muigui-color-chooser-alpha-cursor");const i=e=>{const n=o(e.nx,0,1),i=o(e.ny,0,1);this.#_[1]=n,this.#_[2]=1-i,this.#Y=!0,this.#q=!0;const[r,s]=this.#C(this.#K(this.#_));r&&t.setValue(s)},r=e=>{const n=o(e.nx,0,1);this.#_[0]=n,this.#W=!0,this.#q=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)},s=e=>{const n=o(e.nx,0,1);this.#_[3]=n,this.#Y=!0,this.#W=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)};re(this.#j,{onDown:i,onMove:i}),re(this.#H,{onDown:r,onMove:r}),re(this.#B,{onDown:s,onMove:s}),this.setOptions(n)}updateDisplay(t){this.#_||(this.#_=this.#J(this.#$(t)));{const[e,n,i,o=1]=this.#J(this.#$(t));this.#Y||(this.#_[0]=n>.001&&i>.001?e:this.#_[0]),this.#W||(this.#_[1]=n,this.#_[2]=i),this.#q||(this.#_[3]=o)}{const[t,e,n,i]=this.#_,[o,r,s]=wt($t(this.#_));this.#Y||this.#P.setAttribute("transform",`translate(${64*t}, 0)`),this.#z.children[0].setAttribute("stop-color",`hsl(${360*o} 0% 100% / ${i})`),this.#z.children[1].setAttribute("stop-color",`hsl(${360*o} 100% 50% / ${i})`),this.#q||this.#R.setAttribute("transform",`translate(${64*i}, 0)`),this.#G.children[0].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 0)`),this.#G.children[1].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 1)`),this.#W||(this.#T.setAttribute("cx",""+64*e),this.#T.setAttribute("cy",""+48*(1-n)))}this.#Y=!1,this.#W=!1,this.#q=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n},alpha:i}=this.#u;return this.#B.style.display=i?"":"none",this.#K=i?t=>rt($t(t)):t=>it(Et(t)),this.#J=i?t=>function([t,e,n,i]){return[...Vt([t,e,n]),i]}(ot(t)):t=>Vt(nt(t)),this.#$=e,this.#C=n,this}}class le extends D{#X;#Z;#b;#Q;#u={open:!1};constructor(t,n,i={}){super(t,n,"muigui-pop-down-controller"),this.#X=this.add(new Kt("div","muigui-pop-down-top"));const o=this.#X.addElem(e("input",{type:"checkbox",onChange:()=>{this.#u.open=o.checked,this.updateDisplay()}}));this.#b=o,this.#Z=this.#X.add(new Kt("div","muigui-pop-down-values")),this.#Q=this.add(new Kt("div","muigui-pop-down-bottom")),this.setOptions(i)}setKnobColor(t){this.#b&&(this.#b.style=`\n --range-color: ${t};\n --value-bg-color: ${t};\n `)}updateDisplay(){super.updateDisplay();const{open:t}=this.#u;this.domElement.children[1].classList.toggle("muigui-open",t),this.domElement.children[1].classList.toggle("muigui-closed",!t)}setOptions(t){l(this.#u,t),super.setOptions(t),this.updateDisplay()}addTop(t){return this.#Z.add(t)}addBottom(t){return this.#Q.add(t)}}class ue extends le{#A;#S;#$;constructor(t,e,n={}){super(t,e,"muigui-color-chooser");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#$=o.to,this.#S=new G(this,{converters:r,alpha:It(i)}),this.#A=new ae(this,{converters:o,alpha:It(i)}),this.addTop(this.#S),this.addBottom(this.#A),this.__setKnobHelper=()=>{if(this.#$){const t=this.#$(this.getValue()),e=yt(Z(t));e[2]=(e[2]+50)%100;const n=Q(vt(e));this.setKnobColor(`${t.substring(0,7)}FF`,n)}},this.updateDisplay()}updateDisplay(){super.updateDisplay(),this.__setKnobHelper&&this.__setKnobHelper()}setOptions(t){return super.setOptions(t),this}}class ce extends ee{add(t,e,...n){const i=t instanceof g?t:function(t,e,...n){const[i]=n;if(Array.isArray(i))return new z(t,e,{keyValues:i});const o=typeof t[e];switch(o){case"number":if("number"==typeof n[0]&&"number"==typeof n[1]){const i=n[0],o=n[1],r=n[2];return new B(t,e,{min:i,max:o,...r&&{step:r}})}return 0===n.length?new j(t,e,...n):new B(t,e,...n);case"boolean":return new N(t,e,...n);case"function":return new f(t,e,...n);case"string":return new R(t,e,...n);case"undefined":throw new Error(`no property named ${e}`);default:throw new Error(`unhandled type ${o} for property ${e}`)}}(t,e,...n);return this.addController(i)}addCanvas(t){return this.addController(new Jt(t))}addColor(t,e,n={}){const i=t[e];return It(n.format||St(i))?this.addController(new ue(t,e,n)):this.addController(new Zt(t,e,n))}addDivider(){return this.addController(new Qt)}addFolder(t){return this.addController(new ce(t))}addLabel(t){return this.addController(new ne(t))}}class he extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}}customElements.define("muigui-element",he);const de=new CSSStyleSheet;de.replaceSync(t.default);const pe=new CSSStyleSheet;function me(t){let e,n;function i(){if(e&&!n){const o=e;e=void 0,n=t.replace(o).then((()=>{n=void 0,i()}))}}return function(t){e=t,i()}}const ge=me(de),fe=me(pe);class be extends ce{static converters=U;static mapRange=u;static makeRangeConverters=c;static makeRangeOptions=h;static makeMinMaxPair=p;#tt=new CSSStyleSheet;constructor(t={}){super("Controls","muigui-root"),t instanceof HTMLElement&&(t={parent:t});const{autoPlace:n=!0,width:i,title:o="Controls"}=t;let{parent:r}=t;if(i&&(this.domElement.style.width=/^\d+$/.test(i)?`${i}px`:i),void 0===r&&n&&(r=document.body,this.domElement.classList.add("muigui-auto-place")),r){const t=e("muigui-element");t.shadowRoot.adoptedStyleSheets=[de,pe,this.#tt],t.shadow.appendChild(this.domElement),r.appendChild(t)}o&&this.title(o),this.domElement.classList.add("muigui","muigui-colors")}setStyle(t){this.#tt.replace(t)}static setBaseStyles(t){ge(t)}static getBaseStyleSheet(){return de}static setUserStyles(t){fe(t)}static getUserStyleSheet(){return pe}static setTheme(e){be.setBaseStyles(`${t.default}\n${t.themes[e]||""}`)}}function ve(){}const xe={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};function we(t,{onDown:e=ve,onUp:n=ve}){const i=function(t){const i=t.shiftKey?10:1,[o,r]=(xe[t.key]||[0,0]).map((t=>t*i));("keydown"===t.type?e:n)({type:t.type.substring(3),dx:o,dy:r,event:t})};return t.addEventListener("keydown",i),t.addEventListener("keyup",i),function(){t.removeEventListener("keydown",i),t.removeEventListener("keyup",i)}}function ye(t,e=""){if(!t)throw new Error(e)}function ke(t,e,n,i,o,r){const s=Math.abs(n)*Math.cos(r),a=Math.abs(i)*Math.sin(r);return[t+Math.cos(o)*s-Math.sin(o)*a,e+Math.sin(o)*s+Math.cos(o)*a]}function Ee(t,e,n,i,o){ye(Math.abs(i-o)<=2*Math.PI),ye(i>=-Math.PI&&i<=2*Math.PI),ye(i<=o),ye(o>=-Math.PI&&o<=4*Math.PI);const{x1:r,y1:s,x2:a,y2:l,fa:u,fs:c}=function(t,e,n,i,o,r,s){const[a,l]=ke(t,e,n,i,o,r),[u,c]=ke(t,e,n,i,o,r+s);return{x1:a,y1:l,x2:u,y2:c,fa:Math.abs(s)>Math.PI?1:0,fs:s>0?1:0}}(t,e,n,n,0,i,o-i);return Math.abs(Math.abs(i-o)-2*Math.PI)>Number.EPSILON?`M${t} ${e} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l} L${t} ${e}`:`M${r} ${s} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l}`}const $e=t=>a(t+Math.PI,2*Math.PI)-Math.PI;class Ce extends v{#et;#nt;#it;#ot;#u={step:1,min:-180,max:180,dirMin:-Math.PI,dirMax:Math.PI,wrap:void 0,converters:F};constructor(t,n={}){const i=L();super(e("div",{className:"muigui-direction muigui-no-scroll",innerHTML:'\n\n \x3c!----\x3e\n \n \n \n \n \n \n\n',onWheel:e=>{e.preventDefault();const{min:n,max:r,step:l}=this.#u,u=i(e,l);let c=this.#it+u;this.#ot&&(c=a(c-n,r-n)+n);const h=o(s(c,(t=>t),l),n,r);t.setValue(h)}}));const r=e=>{const{min:n,max:i,step:r,dirMin:a,dirMax:l}=this.#u,u=2*e.nx-1,c=2*e.ny-1,h=Math.atan2(c,u),d=(a+l)/2,p=o(($e(h-d)-$e(a-d))/(l-a),0,1),m=s(n+(i-n)*p,(t=>t),r);t.setValue(m)};re(this.domElement,{onDown:r,onMove:r}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),this.#et=this.$("#muigui-arrow"),this.#nt=this.$("#muigui-range"),this.setOptions(n)}updateDisplay(t){this.#it=t;const{min:e,max:n}=this.#u,i=(t-e)/(n-e),o=(r=this.#u.dirMin,s=this.#u.dirMax,r+(s-r)*i);var r,s;this.#et.style.transform=`rotate(${o}rad)`}setOptions(t){l(this.#u,t);const{dirMin:e,dirMax:n,wrap:i}=this.#u;this.#ot=void 0!==i?i:Math.abs(e-n)>=2*Math.PI-Number.EPSILON;const[o,r]=e(o.push(i),e("label",{},[e("input",{type:"radio",name:r,value:a,onChange:function(){this.checked&&t.setFinalValue(s.#D[this.value])}}),e("button",{type:"button",textContent:n,onClick:function(){this.previousElementSibling.click()}})]))))));const s=this;this.#D=o,this.cols(i)}updateDisplay(t){const e=this.#D.indexOf(t);for(let t=0;t{e({rect:t.getBoundingClientRect(),elem:t})})).observe(t)}function De(t,e,n,i){Se(t,(({rect:o})=>{const{width:r,height:s}=o;t.setAttribute("viewBox",`-${r*e} -${s*n} ${r} ${s}`),i({elem:t,rect:o})}))}function Ne(t,e,n,i,o,r){const a=[];tt),n)),e=Math.min(e,o);for(let i=t;i<=e;i+=n)a.push(`M${i} 0 l0 ${r}`);return a.join(" ")}class Fe extends v{#rt;#st;#at;#lt;#ut;#ct;#ht;#dt;#pt;#it;#mt;#u={min:-100,max:100,step:1,unit:10,unitSize:10,ticksPerUnit:5,labelFn:t=>t,tickHeight:1,limits:!0,thicksColor:void 0,orientation:void 0};constructor(t,n){const i=L();let r;super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \x3c!----\x3e\n \x3c!----\x3e\n \n \n \n \n\n',className:"muigui-no-v-scroll",onWheel:e=>{e.preventDefault();const{min:n,max:r,step:a}=this.#u,l=i(e,a),u=o(s(this.#it+l,(t=>t),a),n,r);t.setValue(u)}})),this.#rt=this.$("svg"),this.#st=this.$("#muigui-origin"),this.#at=this.$("#muigui-ticks"),this.#lt=this.$("#muigui-thicks"),this.#ut=this.$("#muigui-numbers"),this.#ct=this.$("#muigui-left-grad"),this.#ht=this.$("#muigui-right-grad"),this.setOptions(n),re(this.domElement,{onDown:()=>{r=this.#it},onMove:e=>{const{min:n,max:i,unitSize:a,unit:l,step:u}=this.#u,c=o(s(r-e.dx/a*l,(t=>t),u),n,i);t.setValue(c)}}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),De(this.#rt,.5,0,(({rect:{width:t}})=>{this.#ct.setAttribute("x",-t/2),this.#ht.setAttribute("x",t/2-20),this.#mt=function(t){const e=t.innerHTML;t.innerHTML="- ";const n=t.querySelector("text").getComputedTextLength();return t.innerHTML=e,n}(this.#ut),this.#dt=t,this.#gt()}))}#gt(){if(!this.#dt||void 0===this.#it)return;const{labelFn:t,limits:e,min:n,max:i,orientation:o,tickHeight:r,ticksPerUnit:a,unit:l,unitSize:u,thicksColor:c}=this.#u,h=Math.ceil(this.#dt/u),d=this.#it/l,p=Math.round(d-h),m=p*u,g=(p+2*h)*u,f=e?n*u/l:m,b=e?i*u/l:g,v=""===t(1)?10:5;a>1&&this.#at.setAttribute("d",Ne(m,g,u/a,f,b,v*r)),this.#lt.style.stroke=c,this.#lt.setAttribute("d",Ne(m,g,u,f,b,v)),this.#ut.innerHTML=function(t,e,n,i,o,r,a,l){const u=[];tt),n)),e=Math.min(e,a);const c=Math.max(0,-Math.log10(i));for(let r=t;r<=e;r+=n)u.push(`${h=r/n*i,l(h.toFixed(c))}`);var h;return u.join("\n")}(m,g,u,l,this.#mt,f,b,t),this.#st.setAttribute("transform",`translate(${-this.#it*u/l} 0)`),this.#rt.classList.toggle("muigui-slider-up","up"===o)}updateDisplay(t){this.#it=t,this.#gt()}setOptions(t){return l(this.#u,t),this}}class Ae extends D{constructor(t,e,n={}){super(t,e,"muigui-slider"),this.add(new Fe(this,n)),this.add(new O(this,n)),this.updateDisplay()}}class Ue extends v{#rt;#et;#T;#it=[];constructor(t){super(e("div",{innerHTML:'\n\n \n \n \n \n \n\n',className:"muigui-no-scroll"}));const n=e=>{const{width:n,height:i}=this.#rt.getBoundingClientRect(),o=2*e.nx-1,r=2*e.ny-1;t.setValue([o*n*.5,r*i*.5])};re(this.domElement,{onDown:n,onMove:n}),this.#rt=this.$("svg"),this.#et=this.$("#muigui-arrow"),this.#T=this.$("#muigui-circle"),De(this.#rt,.5,.5,(()=>this.#ft))}#ft(){const[t,e]=this.#it;this.#et.setAttribute("d",`M0,0L${t},${e}`),this.#T.setAttribute("transform",`translate(${t}, ${e})`)}updateDisplay(t){this.#it[0]=t[0],this.#it[1]=t[1],this.#ft()}}class Le extends le{constructor(t,e){super(t,e,"muigui-vec2");const n=t=>({setValue:e=>{const n=this.getValue();n[t]=e,this.setValue(n)},setFinalValue:e=>{const n=this.getValue();n[t]=e,this.setFinalValue(n)}});this.addTop(new O(n(0),{converters:{to:t=>t[0],from:A.from}})),this.addTop(new O(n(1),{converters:{to:t=>t[1],from:A.from}})),this.addBottom(new Ue(this)),this.updateDisplay()}}export{ue as ColorChooser,Ve as Direction,Me as RadioGrid,B as Range,z as Select,Ae as Slider,j as TextNumber,Le as Vec2,be as default}; +var t={default:'\n.muigui {\n --bg-color: #ddd;\n --color: #222;\n --contrast-color: #eee;\n --value-color: #145 ;\n --value-bg-color: #eeee;\n --disabled-color: #999;\n --menu-bg-color: #f8f8f8;\n --menu-sep-color: #bbb;\n --hover-bg-color: #999;\n --focus-color: #68C;\n --range-color: #888888;\n --invalid-color: #FF0000;\n --selected-color: rgb(255, 255, 255, 0.9);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n}\n\n@media (prefers-color-scheme: dark) {\n .muigui {\n --bg-color: #222222;\n --color: #dddddd;\n --contrast-color: #000;\n --value-color: #43e5f7;\n --value-bg-color: #444444;\n --disabled-color: #666666;\n --menu-bg-color: #080808;\n --menu-sep-color: #444444;\n --hover-bg-color: #666666;\n --focus-color: #88AAFF;\n --range-color: #888888;\n --invalid-color: #FF6666;\n --selected-color: rgba(255, 255, 255, 0.3);\n\n --button-bg-color: var(--value-bg-color);\n\n --range-left-color: var(--value-color);\n --range-right-color: var(--value-bg-color); \n --range-right-hover-color: var(--hover-bg-color);\n\n color: var(--color);\n background-color: var(--bg-color);\n }\n}\n\n.muigui {\n --width: 250px;\n --label-width: 45%;\n --number-width: 40%;\n\n\n --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;\n --font-size: 11px;\n --font-family-mono: Menlo, Monaco, Consolas, "Droid Sans Mono", monospace;\n --font-size-mono: 11px;\n\n --line-height: 1.7em;\n --border-radius: 0px;\n\n width: var(--width);\n font-family: var(--font-family);\n font-size: var(--font-size);\n box-sizing: border-box;\n line-height: 100%;\n}\n.muigui * {\n box-sizing: inherit;\n}\n\n.muigui-no-scroll {\n touch-action: none;\n}\n.muigui-no-h-scroll {\n touch-action: pan-y;\n}\n.muigui-no-v-scroll {\n touch-action: pan-x;\n}\n\n.muigui-invalid-value {\n background-color: red !important;\n color: white !important;\n}\n\n.muigui-grid {\n display: grid;\n}\n.muigui-rows {\n display: flex;\n flex-direction: column;\n\n min-height: 20px;\n border: 2px solid red;\n}\n.muigui-columns {\n display: flex;\n flex-direction: row;\n\n height: 20px;\n border: 2px solid green;\n}\n.muigui-rows>*,\n.muigui-columns>* {\n flex: 1 1 auto;\n align-items: stretch;\n min-height: 0;\n min-width: 0;\n}\n\n.muigui-row {\n border: 2px solid yellow;\n min-height: 10px\n}\n.muigui-column {\n border: 2px solid lightgreen;\n}\n\n/* -------- */\n\n.muigui-show { /* */ }\n.muigui-hide { \n display: none !important;\n}\n.muigui-disabled {\n pointer-events: none;\n --color: var(--disabled-color) !important;\n --value-color: var(--disabled-color) !important;\n --range-left-color: var(--disabled-color) !important;\n}\n\n.muigui canvas,\n.muigui svg {\n display: block;\n border-radius: var(--border-radius);\n}\n.muigui canvas {\n background-color: var(--value-bg-color);\n}\n\n.muigui-controller {\n min-width: 0;\n min-height: var(--line-height);\n}\n.muigui-root,\n.muigui-menu {\n display: flex;\n flex-direction: column;\n position: relative;\n user-select: none;\n height: fit-content;\n margin: 0;\n padding-bottom: 0.1em;\n border-radius: var(--border-radius);\n}\n.muigui-menu {\n border-bottom: 1px solid var(--menu-sep-color);\n}\n\n.muigui-root>button:nth-child(1),\n.muigui-menu>button:nth-child(1) {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n position: relative;\n text-align: left;\n color: var(--color);\n background-color: var(--menu-bg-color);\n min-height: var(--line-height);\n padding-top: 0.2em;\n padding-bottom: 0.2em;\n cursor: pointer;\n border-radius: var(--border-radius);\n}\n.muigui-root>div:nth-child(2),\n.muigui-menu>div:nth-child(2) {\n flex: 1 1 auto;\n}\n\n.muigui-controller {\n margin-left: 0.2em;\n margin-right: 0.2em;\n}\n.muigui-root.muigui-controller,\n.muigui-menu.muigui-controller {\n margin-left: 0;\n margin-right: 0;\n}\n.muigui-controller>*:nth-child(1) {\n flex: 1 0 var(--label-width);\n min-width: 0;\n white-space: pre;\n}\n.muigui-controller>label:nth-child(1) {\n place-content: center start;\n display: inline-grid;\n overflow: hidden;\n}\n.muigui-controller>*:nth-child(2) {\n flex: 1 1 75%;\n min-width: 0;\n}\n\n/* -----------------------------------------\n a label controller is [[label][value]]\n*/\n\n.muigui-label-controller {\n display: flex;\n margin: 0.4em 0 0.4em 0;\n word-wrap: initial;\n align-items: stretch;\n}\n\n.muigui-value {\n display: flex;\n align-items: stretch;\n}\n.muigui-value>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n.muigui-value>*:nth-child(1) {\n flex: 1 1 calc(100% - var(--number-width));\n}\n.muigui-value>*:nth-child(2) {\n flex: 1 1 var(--number-width);\n margin-left: 0.2em;\n}\n\n/* fix! */\n.muigui-open>button>label::before,\n.muigui-closed>button>label::before {\n width: 1.25em;\n height: var(--line-height);\n display: inline-grid;\n place-content: center start;\n pointer-events: none;\n}\n.muigui-open>button>label::before {\n content: "ⓧ"; /*"▼";*/\n}\n.muigui-closed>button>label::before {\n content: "⨁"; /*"▶";*/\n}\n.muigui-open>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 0.5s ease-out;\n max-height: 100vh;\n overflow: auto;\n opacity: 1;\n}\n\n.muigui-closed>*:nth-child(2) {\n transition: max-height 0.2s ease-out,\n opacity 1s;\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n}\n\n/* ---- popdown ---- */\n\n.muigui-pop-down-top {\n display: flex;\n}\n/* fix? */\n.muigui-value>*:nth-child(1).muigui-pop-down-top {\n flex: 0;\n}\n.muigui-pop-down-bottom {\n\n}\n\n.muigui-pop-down-values {\n min-width: 0;\n display: flex;\n}\n.muigui-pop-down-values>* {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.muigui-value.muigui-pop-down-controller {\n flex-direction: column;\n}\n\n.muigui-pop-down-top input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-pop-down-top input[type=checkbox]::before {\n content: "+";\n display: grid;\n place-content: center;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n color: var(--value-bg-color);\n width: calc(var(--line-height) - 4px);\n height: calc(var(--line-height) - 4px);\n}\n\n.muigui-pop-down-top input[type=checkbox]:checked::before {\n content: "Ｘ";\n}\n\n\n/* ---- select ---- */\n\n.muigui select,\n.muigui option,\n.muigui input,\n.muigui button {\n color: var(--value-color);\n background-color: var(--value-bg-color);\n font-family: var(--font-family);\n font-size: var(--font-size);\n border: none;\n margin: 0;\n border-radius: var(--border-radius);\n}\n.muigui select {\n appearance: none;\n margin: 0;\n margin-left: 0; /*?*/\n overflow: hidden; /* Safari */\n}\n\n.muigui select:focus,\n.muigui input:focus,\n.muigui button:focus {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui select:hover,\n.muigui option:hover,\n.muigui input:hover,\n.muigui button:hover {\n background-color: var(--hover-bg-color); \n}\n\n/* ------ [ label ] ------ */\n\n.muigui-label {\n border-top: 1px solid var(--menu-sep-color);\n border-bottom: 1px solid var(--menu-sep-color);\n padding-top: 0.4em;\n padding-bottom: 0.3em;\n place-content: center start;\n background-color: var(--menu-bg-color);\n white-space: pre;\n border-radius: var(--border-radius);\n}\n\n/* ------ [ divider] ------ */\n\n.muigui-divider {\n min-height: 6px;\n border-top: 2px solid var(--menu-sep-color);\n margin-top: 6px;\n}\n\n/* ------ [ button ] ------ */\n\n.muigui-button {\n display: grid;\n\n}\n.muigui-button button {\n border: none;\n color: var(--value-color);\n background-color: var(--button-bg-color);\n cursor: pointer;\n place-content: center center;\n}\n\n/* ------ [ color ] ------ */\n\n.muigui-color>div {\n overflow: hidden;\n position: relative;\n margin-left: 0;\n margin-right: 0; /* why? */\n max-width: var(--line-height);\n border-radius: var(--border-radius);\n}\n\n.muigui-color>div:focus-within {\n outline: 1px solid var(--focus-color);\n}\n\n.muigui-color input[type=color] {\n border: none;\n padding: 0;\n background: inherit;\n cursor: pointer;\n position: absolute;\n width: 200%;\n left: -10px;\n top: -10px;\n height: 200%;\n}\n.muigui-disabled canvas,\n.muigui-disabled svg,\n.muigui-disabled img,\n.muigui-disabled .muigui-color input[type=color] {\n opacity: 0.2;\n}\n\n/* ------ [ checkbox ] ------ */\n\n.muigui-checkbox>label:nth-child(2) {\n display: grid;\n place-content: center start;\n margin: 0;\n}\n\n.muigui-checkbox input[type=checkbox] {\n -webkit-appearance: none;\n appearance: none;\n width: auto;\n color: var(--value-color);\n background-color: var(--value-bg-color);\n cursor: pointer;\n\n display: grid;\n place-content: center;\n margin: 0;\n font: inherit;\n color: currentColor;\n width: 1.7em;\n height: 1.7em;\n transform: translateY(-0.075em);\n}\n\n.muigui-checkbox input[type=checkbox]::before {\n content: "";\n color: var(--value-color);\n display: grid;\n place-content: center;\n}\n\n.muigui-checkbox input[type=checkbox]:checked::before {\n content: "✔";\n}\n\n.muigui input[type=number]::-webkit-inner-spin-button, \n.muigui input[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none;\n appearance: none;\n margin: 0; \n}\n.muigui input[type=number] {\n -moz-appearance: textfield;\n}\n\n/* ------ [ radio grid ] ------ */\n\n.muigui-radio-grid>div {\n display: grid;\n gap: 2px;\n}\n\n.muigui-radio-grid input {\n appearance: none;\n display: none;\n}\n\n.muigui-radio-grid button {\n color: var(--color);\n width: 100%;\n text-align: left;\n}\n\n.muigui-radio-grid input:checked + button {\n color: var(--value-color);\n background-color: var(--selected-color);\n}\n\n/* ------ [ color-chooser ] ------ */\n\n.muigui-color-chooser-cursor {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n.muigui-color-chooser-circle {\n stroke-width: 1px;\n stroke: white;\n fill: none;\n}\n\n\n/* ------ [ vec2 ] ------ */\n\n.muigui-vec2 svg {\n background-color: var(--value-bg-color);\n}\n\n.muigui-vec2-axis {\n stroke: 1px;\n stroke: var(--focus-color);\n}\n\n.muigui-vec2-line {\n stroke-width: 1px;\n stroke: var(--value-color);\n fill: var(--value-color);\n}\n\n/* ------ [ direction ] ------ */\n\n.muigui-direction svg {\n background-color: rgba(0,0,0,0.2);\n}\n\n.muigui-direction:focus-within svg {\n outline: none;\n}\n.muigui-direction-range {\n fill: var(--value-bg-color);\n}\n.muigui-direction svg:focus {\n outline: none;\n}\n.muigui-direction svg:focus .muigui-direction-range {\n stroke-width: 0.5px;\n stroke: var(--focus-color);\n}\n\n.muigui-direction-arrow {\n fill: var(--value-color);\n}\n\n/* ------ [ slider ] ------ */\n\n.muigui-slider>div {\n display: flex;\n align-items: stretch;\n height: var(--line-height);\n}\n.muigui-slider svg {\n flex: 1 1 auto;\n}\n.muigui-slider .muigui-slider-up #muigui-orientation {\n transform: scale(1, -1) translateY(-100%);\n}\n\n.muigui-slider .muigui-slider-up #muigui-number-orientation {\n transform: scale(1,-1);\n}\n\n.muigui-ticks {\n stroke: var(--range-color);\n}\n.muigui-thicks {\n stroke: var(--color);\n stroke-width: 2px;\n}\n.muigui-svg-text {\n fill: var(--color);\n font-size: 7px;\n}\n.muigui-mark {\n fill: var(--value-color);\n}\n\n/* ------ [ range ] ------ */\n\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: transparent;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n border-radius: calc(var(--border-radius) + 2px);\n border-left: 1px solid rgba(255,255,255,0.3);\n border-top: 1px solid rgba(255,255,255,0.3);\n border-bottom: 1px solid rgba(0,0,0,0.2);\n border-right: 1px solid rgba(0,0,0,0.2);\n background-color: var(--range-color);\n margin-top: calc((var(--line-height) - 2px) / -2);\n width: calc(var(--line-height) - 2px);\n height: calc(var(--line-height) - 2px);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n border: 1px solid var(--menu-sep-color);\n height: 2px;\n}\n\n\n/* dat.gui style - doesn\'t work on Safari iOS */\n\n/*\n.muigui-range input[type=range] {\n cursor: ew-resize;\n overflow: hidden;\n}\n\n.muigui-range input[type=range] {\n -webkit-appearance: none;\n appearance: none;\n background-color: var(--range-right-color);\n margin: 0;\n}\n.muigui-range input[type=range]:hover {\n background-color: var(--range-right-hover-color);\n}\n\n.muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n appearance: none;\n height: max-content;\n color: var(--range-left-color);\n margin-top: -1px;\n}\n\n.muigui-range input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 0px;\n height: max-content;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n}\n*/\n\n/* FF */\n/*\n.muigui-range input[type=range]::-moz-slider-progress {\n background-color: var(--range-left-color); \n}\n.muigui-range input[type=range]::-moz-slider-thumb {\n height: max-content;\n width: 0;\n border: none;\n box-shadow: -1000px 0 0 1000px var(--range-left-color);\n box-sizing: border-box;\n}\n*/\n\n.muigui-checkered-background {\n background-color: #404040;\n background-image:\n linear-gradient(45deg, #808080 25%, transparent 25%),\n linear-gradient(-45deg, #808080 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #808080 75%),\n linear-gradient(-45deg, transparent 75%, #808080 75%);\n background-size: 16px 16px;\n background-position: 0 0, 0 8px, 8px -8px, -8px 0px;\n}\n\n/* ---------------------------------------------------------- */\n\n/* needs to be at bottom to take precedence */\n.muigui-auto-place {\n max-height: 100%;\n position: fixed;\n top: 0;\n right: 15px;\n z-index: 100001;\n}\n\n',themes:{default:"",float:"\n :root {\n color-scheme: light dark,\n }\n\n .muigui {\n --width: 400px;\n --bg-color: initial;\n --label-width: 25%;\n --number-width: 20%;\n }\n\n input,\n .muigui-label-controller>label {\n text-shadow:\n -1px -1px 0 var(--contrast-color),\n 1px -1px 0 var(--contrast-color),\n -1px 1px 0 var(--contrast-color),\n 1px 1px 0 var(--contrast-color);\n }\n\n .muigui-controller > label:nth-child(1) {\n place-content: center end;\n margin-right: 1em;\n }\n\n .muigui-value > :nth-child(2) {\n margin-left: 1em;\n }\n\n .muigui-root>*:nth-child(1) {\n display: none;\n }\n\n .muigui-range input[type=range]::-webkit-slider-thumb {\n border-radius: 1em;\n }\n\n .muigui-range input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: initial;\n appearance: none;\n border: 1px solid rgba(0, 0, 0, 0.25);\n height: 2px;\n }\n\n .muigui-colors {\n --value-color: var(--color );\n --value-bg-color: rgba(0, 0, 0, 0.1);\n --disabled-color: #cccccc;\n --menu-bg-color: rgba(0, 0, 0, 0.1);\n --menu-sep-color: #bbbbbb;\n --hover-bg-color: rgba(0, 0, 0, 0);\n --invalid-color: #FF0000;\n --selected-color: rgba(0, 0, 0, 0.3);\n --range-color: rgba(0, 0, 0, 0.125);\n }\n"}};function e(t,e={},n=[]){const i=document.createElement(t);return function(t,e,n){for(const[n,i]of Object.entries(e))if("function"==typeof i&&n.startsWith("on")){const e=n.substring(2).toLowerCase();t.addEventListener(e,i,{passive:!1})}else if("object"==typeof i)for(const[e,o]of Object.entries(i))t[n][e]=o;else void 0===t[n]?t.setAttribute(n,i):t[n]=i;for(const e of n)t.appendChild(e)}(i,e,n),i}let n=0;function i(t,e){const n=t.indexOf(e);return n&&t.splice(n,1),t}function o(t,e,n){return Math.max(e,Math.min(n,t))}const r="undefined"!=typeof SharedArrayBuffer?function(t){return t&&t.buffer&&(t.buffer instanceof ArrayBuffer||t.buffer instanceof SharedArrayBuffer)}:function(t){return t&&t.buffer&&t.buffer instanceof ArrayBuffer},s=(t,e,n)=>Math.round(e(t)/n)/(1/n),a=(t,e)=>(t%e+e)%e;function l(t,e){for(const n in e)n in t&&(t[n]=e[n]);return t}const u=(t,e,n,i,o)=>(t-e)*(o-i)/(n-e)+i,c=({from:t,to:e})=>({to:n=>u(n,...t,...e),from:n=>[!0,u(n,...e,...t)]}),h=({from:t,to:e,step:n})=>({min:e[0],max:e[1],...n&&{step:n},converters:c({from:t,to:e})}),d={to:t=>t,from:t=>[!0,t]};function p(t,e,n,i,o){const{converters:{from:r}=d}=o,{min:s,max:a}=o,l=o.minRange||0,u=r(l)[1],c=t.add(e,n,{...o,min:s,max:a-l}).onChange((t=>{h.setValue(Math.min(a,Math.max(t+u,e[i])))})),h=t.add(e,i,{...o,min:s+l,max:a}).onChange((t=>{c.setValue(Math.max(s,Math.min(t-u,e[n])))}));return[c,h]}class m{domElement;#t;#e=[];constructor(t){this.domElement=t,this.#t=t}addElem(t){return this.#t.appendChild(t),t}removeElem(t){return this.#t.removeChild(t),t}pushSubElem(t){this.#t.appendChild(t),this.#t=t}popSubElem(){this.#t=this.#t.parentElement}add(t){return this.#e.push(t),this.addElem(t.domElement),t}remove(t){return this.removeElem(t.domElement),i(this.#e,t),t}pushSubView(t){this.pushSubElem(t.domElement)}popSubView(){this.popSubElem()}setOptions(t){for(const e of this.#e)e.setOptions(t)}updateDisplayIfNeeded(t,e){for(const n of this.#e)n.updateDisplayIfNeeded(t,e);return this}$(t){return this.domElement.querySelector(t)}}class g extends m{#n;#i;#o;constructor(t){super(e("div",{className:"muigui-controller"})),this.#n=[],this.#i=[],t&&this.domElement.classList.add(t)}get parent(){return this.#o}setParent(t){this.#o=t,this.enable(!this.disabled())}show(t=!0){return this.domElement.classList.toggle("muigui-hide",!t),this.domElement.classList.toggle("muigui-show",t),this}hide(){return this.show(!1)}disabled(){return!!this.domElement.closest(".muigui-disabled")}enable(t=!0){return this.domElement.classList.toggle("muigui-disabled",!t),["input","button","select","textarea"].forEach((t=>{this.domElement.querySelectorAll(t).forEach((t=>{const e=!!t.closest(".muigui-disabled");t.disabled=e}))})),this}disable(t=!0){return this.enable(!t)}onChange(t){return this.removeChange(t),this.#n.push(t),this}removeChange(t){return i(this.#n,t),this}onFinishChange(t){return this.removeFinishChange(t),this.#i.push(t),this}removeFinishChange(t){return i(this.#i,t),this}#r(t,e){for(const n of t)n.call(this,e)}emitChange(t,e,n){this.#r(this.#n,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitChange({object:e,property:n,value:t,controller:this}))}emitFinalChange(t,e,n){this.#r(this.#i,t),this.#o&&(void 0===e?this.#o.emitChange(t):this.#o.emitFinalChange({object:e,property:n,value:t,controller:this}))}updateDisplay(){}getColors(){const t=t=>t.replace(/-([a-z])/g,((t,e)=>e.toUpperCase())),n=e("div");this.domElement.appendChild(n);const i=Object.fromEntries(["color","bg-color","value-color","value-bg-color","hover-bg-color","menu-bg-color","menu-sep-color","disabled-color"].map((e=>{n.style.color=`var(--${e})`;const i=getComputedStyle(n);return[t(e),i.color]})));return n.remove(),i}}class f extends g{#s;#a;#l;#u={name:""};constructor(t,n,i={}){super("muigui-button",""),this.#s=t,this.#a=n,this.#l=this.addElem(e("button",{type:"button",onClick:()=>{this.#s[this.#a](this)}})),this.setOptions({name:n,...i})}setOptions(t){l(this.#u,t);const{name:e}=this.#u;this.#l.textContent=e}}function b(t,e){if(t.length!==e.length)return!1;for(let n=0;n{t.setValue(i.checked)},onChange:()=>{t.setFinalValue(i.checked)}});super(e("label",{},[i])),this.#b=i}updateDisplay(t){this.#b.checked=t}}const w=[],y=new Set;let k,E;function $(){k=void 0,E=!0;for(const t of w)y.has(t)||t();E=!1,y.size&&(E?C():(y.forEach((t=>{i(w,t)})),y.clear())),C()}function C(){!k&&w.length&&(k=requestAnimationFrame($))}let V=0;function I(){return"muigui-"+ ++V}class M extends m{constructor(t=""){super(e("div",{className:"muigui-value"})),t&&this.domElement.classList.add(t)}}class S extends g{#v;#x;constructor(t="",n=""){super("muigui-label-controller"),this.#v=I(),this.#x=e("label",{for:this.#v}),this.domElement.appendChild(this.#x),this.pushSubView(new M(t)),this.name(n)}get id(){return this.#v}name(t){return this.#x.title===this.#x.textContent&&(this.#x.title=t),this.#x.textContent=t,this}tooltip(t){this.#x.title=t}}class D extends S{#s;#a;#w;#y;#e;#k;constructor(t,e,n=""){super(n,e),this.#s=t,this.#a=e,this.#w=this.getValue(),this.#y=!1,this.#e=[]}get initialValue(){return this.#w}get object(){return this.#s}get property(){return this.#a}add(t){return this.#e.push(t),super.add(t),this.updateDisplay(),t}#E(t,e){let n=!1;if("object"==typeof t){const e=this.#s[this.#a];if(Array.isArray(t)||r(t))for(let i=0;i=0&&w.splice(e,1)}(this.#k)),this}}class N extends D{constructor(t,e){super(t,e,"muigui-checkbox");const n=this.id;this.add(new x(this,n)),this.updateDisplay()}}const F={to:t=>t,from:t=>[!0,t]},A={to:t=>t.toString(),from:t=>{const e=parseFloat(t);return[!Number.isNaN(e),e]}},U={radToDeg:c({to:[0,180],from:[0,Math.PI]})};function L(){let t=0;return function(e,n,i=5){t-=e.deltaY*n/i;const o=Math.floor(Math.abs(t)/n)*Math.sign(t)*n;return t-=o,o}}class O extends v{#$;#C;#V;#I;#u={step:.01,converters:A,min:Number.NEGATIVE_INFINITY,max:Number.POSITIVE_INFINITY};constructor(t,n){const i=t.setValue.bind(t),r=t.setFinalValue.bind(t),a=L();super(e("input",{type:"number",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(r,!1),onWheel:e=>{e.preventDefault();const{min:n,max:i,step:r}=this.#u,l=a(e,r),u=parseFloat(this.domElement.value),c=o(s(u+l,(t=>t),r),n,i);t.setValue(c)}})),this.setOptions(n)}#M(t,e){const n=parseFloat(this.domElement.value),[i,r]=this.#C(n);let s;if(i&&!Number.isNaN(n)){const{min:n,max:i}=this.#u;s=r>=n&&r<=i,this.#I=e,t(o(r,n,i))}this.domElement.classList.toggle("muigui-invalid-value",!i||!s)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,converters:{to:n,from:i}}=this.#u;return this.#$=n,this.#C=i,this.#V=e,this}}class j extends D{#S;#V;constructor(t,e,n={}){super(t,e,"muigui-checkbox"),this.#S=this.add(new O(this,n)),this.updateDisplay()}}class T extends v{#D;constructor(t,n){const i=[];super(e("select",{onChange:()=>{t.setFinalValue(this.#D[this.domElement.selectedIndex])}},n.map((([t,n])=>(i.push(n),e("option",{textContent:t})))))),this.#D=i}updateDisplay(t){const e=this.#D.indexOf(t);this.domElement.selectedIndex=e}}function H(t,e){return Array.isArray(t)?Array.isArray(t[0])?t:e?t.map(((t,e)=>[t,e])):t.map((t=>[t,t])):[...Object.entries(t)]}class z extends D{constructor(t,e,n){super(t,e,"muigui-select");const i="number"==typeof this.getValue(),{keyValues:o}=n,r=H(o,i);this.add(new T(this,r)),this.updateDisplay()}}class P extends v{#$;#C;#V;#I;#u={step:.01,min:0,max:1,converters:F};constructor(t,n){const i=L();super(e("input",{type:"range",onInput:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setValue(u)},onChange:()=>{this.#I=!0;const{min:e,max:n,step:i}=this.#u,r=parseFloat(this.domElement.value),a=o(s(r,(t=>t),i),e,n),[l,u]=this.#C(a);l&&t.setFinalValue(u)},onWheel:e=>{e.preventDefault();const[n,r]=this.#C(parseFloat(this.domElement.value));if(!n)return;const{min:a,max:l,step:u}=this.#u,c=i(e,u),h=o(s(r+c,(t=>t),u),a,l);t.setValue(h)}})),this.setOptions(n)}updateDisplay(t){this.#I||(this.domElement.value=s(t,this.#$,this.#V)),this.#I=!1}setOptions(t){l(this.#u,t);const{step:e,min:n,max:i,converters:{to:o,from:r}}=this.#u;return this.#$=o,this.#C=r,this.#V=e,this.domElement.step=e,this.domElement.min=n,this.domElement.max=i,this}}class B extends D{constructor(t,e,n){super(t,e,"muigui-range"),this.add(new P(this,n)),this.add(new O(this,n))}}class G extends v{#$;#C;#I;#u={converters:F};constructor(t,n){const i=t.setValue.bind(t),o=t.setFinalValue.bind(t);super(e("input",{type:"text",onInput:()=>this.#M(i,!0),onChange:()=>this.#M(o,!1)})),this.setOptions(n)}#M(t,e){const[n,i]=this.#C(this.domElement.value);n&&(this.#I=e,t(i)),this.domElement.style.color=n?"":"var(--invalid-color)"}updateDisplay(t){this.#I||(this.domElement.value=this.#$(t),this.domElement.style.color=""),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class R extends D{constructor(t,e){super(t,e,"muigui-checkbox"),this.add(new G(this)),this.updateDisplay()}}const _=(t,e,n)=>Math.max(e,Math.min(n,t)),Y=(t,e,n)=>t+(e-t)*n,W=t=>t>=0?t%1:1-t%1,q=t=>+t.toFixed(0),K=t=>+t.toFixed(3),J=t=>parseInt(t.substring(1,3),16)<<16|parseInt(t.substring(3,5),16)<<8|parseInt(t.substring(5,7),16),X=t=>parseInt(t.substring(1,3),16)*2**24+65536*parseInt(t.substring(3,5),16)+256*parseInt(t.substring(5,7),16)+parseInt(t.substring(7,9),16),Z=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)],Q=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,tt=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16),parseInt(t.substring(7,9),16)],et=t=>`#${Array.from(t).map((t=>t.toString(16).padStart(2,"0"))).join("")}`,nt=t=>Z(t).map((t=>K(t/255))),it=t=>Q(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),ot=t=>tt(t).map((t=>K(t/255))),rt=t=>et(Array.from(t).map((t=>Math.round(_(255*t,0,255))))),st=t=>_(Math.round(255*t),0,255).toString(16).padStart(2,"0"),at=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255}),lt=t=>({r:parseInt(t.substring(1,3),16)/255,g:parseInt(t.substring(3,5),16)/255,b:parseInt(t.substring(5,7),16)/255,a:parseInt(t.substring(7,9),16)/255}),ut=t=>`rgb(${Z(t).join(", ")})`,ct=/^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,ht=t=>`rgba(${tt(t).map(((t,e)=>3===e?t/255:t)).join(", ")})`,dt=/^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+\.\d+|\d+)\s*\)\s*$/,pt=t=>{const e=yt(Z(t)).map((t=>q(t)));return`hsl(${e[0]}, ${e[1]}%, ${e[2]}%)`},mt=t=>{const e=kt(tt(t)).map(((t,e)=>3===e?K(t):q(t)));return`hsl(${e[0]} ${e[1]}% ${e[2]}% / ${e[3]})`},gt=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\)\s*$/,ft=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\/\s*(\d+\.\d+|\d+)\s*\)\s*$/,bt=(t,e)=>(t%e+e)%e;function vt([t,e,n]){t=bt(t,360),e=_(e/100,0,1),n=_(n/100,0,1);const i=e*Math.min(n,1-n);function o(e){const o=(e+t/30)%12;return n-i*Math.max(-1,Math.min(o-3,9-o,1))}return[o(0),o(8),o(4)].map((t=>Math.round(255*t)))}function xt([t,e,n]){const i=Math.max(t,e,n),o=Math.min(t,e,n),r=.5*(o+i),s=i-o;let a=0,l=0;if(0!==s)switch(l=0===r||1===r?0:(i-r)/Math.min(r,1-r),i){case t:a=(e-n)/s+(e{const[e,n,i]=xt(t.map((t=>t/255)));return[360*e,100*n,100*i]},kt=t=>{const[e,n,i,o]=wt(t.map((t=>t/255)));return[360*e,100*n,100*i,o]};function Et([t,e,n]){return e=_(e,0,1),n=_(n,0,1),[t,t+2/3,t+1/3].map((t=>Y(1,_(Math.abs(6*W(t)-3)-1,0,1),e)*n))}function $t([t,e,n,i]){return[...Et([t,e,n]),i]}const Ct=t=>Math.round(1e3*t)/1e3;function Vt([t,e,n]){const i=n>e?[n,e,-1,2/3]:[e,n,0,-1/3],o=i[0]>t?[i[0],i[1],i[3],t]:[t,i[1],i[2],i[0]],r=o[0]-Math.min(o[3],o[1]);return[Math.abs(o[2]+(o[3]-o[1])/(6*r+Number.EPSILON)),r/(o[0]+Number.EPSILON),o[0]].map(Ct)}const It=t=>t.endsWith("a")||t.startsWith("hex8"),Mt=[{re:/^#(?:[0-9a-f]){6}$/i,format:"hex6"},{re:/^(?:[0-9a-f]){6}$/i,format:"hex6-no-hash"},{re:/^#(?:[0-9a-f]){8}$/i,format:"hex8"},{re:/^(?:[0-9a-f]){8}$/i,format:"hex8-no-hash"},{re:/^#(?:[0-9a-f]){3}$/i,format:"hex3"},{re:/^(?:[0-9a-f]){3}$/i,format:"hex3-no-hash"},{re:ct,format:"css-rgb"},{re:gt,format:"css-hsl"},{re:dt,format:"css-rgba"},{re:ft,format:"css-hsla"}];function St(t){switch(typeof t){case"number":return console.warn('can not reliably guess format based on a number. You should pass in a format like {format: "uint32-rgb"} or {format: "uint32-rgb"}'),t<=16777215?"uint32-rgb":"uint32-rgba";case"string":{const e=function(t){for(const e of Mt)if(e.re.test(t))return e}(t.trim());if(e)return e.format;break}case"object":if(t instanceof Uint8Array||t instanceof Uint8ClampedArray){if(3===t.length)return"uint8-rgb";if(4===t.length)return"uint8-rgba"}else if(t instanceof Float32Array){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if(Array.isArray(t)){if(3===t.length)return"float-rgb";if(4===t.length)return"float-rgba"}else if("r"in t&&"g"in t&&"b"in t)return"a"in t?"object-rgba":"object-rgb"}throw new Error(`unknown color format: ${t}`)}function Dt(t){return t.trim(t)}function Nt(t){return t.trim(t)}function Ft(t){return t[1]===t[2]&&t[3]===t[4]&&t[5]===t[6]?`#${t[1]}${t[3]}${t[5]}`:t}const At=/^(#|)([0-9a-f]{3})$/i;function Ut(t){const e=At.exec(t);if(e){const[,,t]=e;return"#"+`${(n=t)[0]}${n[0]}${n[1]}${n[1]}${n[2]}${n[2]}`}var n;return t}function Lt(t){return Ft(Dt(t))}const Ot=t=>{const e=ct.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),`rgb(${n.join(", ")})`]},jt=t=>{const e=dt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?parseFloat(t):parseInt(t)));return[!n.find((t=>t>255)),`rgba(${n.join(", ")})`]},Tt=t=>{const e=gt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]}, ${n[1]}%, ${n[2]}%)`]},Ht=t=>{const e=ft.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseFloat(t)));return[!n.find((t=>Number.isNaN(t))),`hsl(${n[0]} ${n[1]}% ${n[2]}% / ${n[3]})`]},zt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Pt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Bt=/^\s*(?:0x){0,1}([0-9a-z]{1,6})\s*$/i,Gt=/^\s*(?:0x){0,1}([0-9a-z]{1,8})\s*$/i,Rt=/^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i,_t=/^\s*[a-f0-9]{6}\s*$/i,Yt=/^\s*#[a-f0-9]{8}\s*$/i,Wt=/^\s*[a-f0-9]{8}\s*$/i,qt={hex6:{color:{from:t=>[!0,t],to:Dt},text:{from:t=>[Rt.test(t),t.trim()],to:t=>t}},hex8:{color:{from:t=>[!0,t],to:Nt},text:{from:t=>[Yt.test(t),t.trim()],to:t=>t}},hex3:{color:{from:t=>[!0,Lt(t)],to:Ut},text:{from:t=>[Rt.test(t),Ft(t.trim())],to:t=>t}},"hex6-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Dt(t)}`},text:{from:t=>[_t.test(t),t.trim()],to:t=>t}},"hex8-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Nt(t)}`},text:{from:t=>[Wt.test(t),t.trim()],to:t=>t}},"hex3-no-hash":{color:{from:t=>[!0,Lt(t).substring(1)],to:Ut},text:{from:t=>[_t.test(t),Ft(t.trim())],to:t=>t}},"uint32-rgb":{color:{from:t=>[!0,J(t)],to:t=>`#${Math.round(t).toString(16).padStart(6,"0")}`},text:{from:t=>(t=>{const e=Bt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(6,"0")}`}},"uint32-rgba":{color:{from:t=>[!0,X(t)],to:t=>`#${Math.round(t).toString(16).padStart(8,"0")}`},text:{from:t=>(t=>{const e=Gt.exec(t);return e?[!0,parseInt(e[1],16)]:[!1]})(t),to:t=>`0x${t.toString(16).padStart(8,"0")}`}},"uint8-rgb":{color:{from:t=>[!0,Z(t)],to:Q},text:{from:t=>{const e=zt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"uint8-rgba":{color:{from:t=>[!0,tt(t)],to:et},text:{from:t=>{const e=Pt.exec(t);if(!e)return[!1];const n=[e[1],e[2],e[3],e[4]].map((t=>parseInt(t)));return[!n.find((t=>t>255)),n]},to:t=>t.join(", ")}},"float-rgb":{color:{from:t=>[!0,nt(t)],to:it},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(3!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"float-rgba":{color:{from:t=>[!0,ot(t)],to:rt},text:{from:t=>{const e=t.split(",").map((t=>t.trim())),n=e.map((t=>parseFloat(t)));if(4!==n.length)return[!1];const i=e.findIndex((t=>isNaN(t)));return[i<0,n.map((t=>K(t)))]},to:t=>Array.from(t).map((t=>K(t))).join(", ")}},"object-rgb":{color:{from:t=>[!0,at(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b))throw new Error("not {r, g, b}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}`}},"object-rgba":{color:{from:t=>[!0,lt(t)],to:t=>`#${st(t.r)}${st(t.g)}${st(t.b)}${st(t.a)}`},text:{from:t=>{try{const e=t.replace(/([a-z])/g,'"$1"'),n=JSON.parse(e);if(Number.isNaN(n.r)||Number.isNaN(n.g)||Number.isNaN(n.b)||Number.isNaN(n.a))throw new Error("not {r, g, b, a}");return[!0,n]}catch(t){return[!1]}},to:t=>`{r:${K(t.r)}, g:${K(t.g)}, b:${K(t.b)}}, a:${K(t.a)}}`}},"css-rgb":{color:{from:t=>[!0,ut(t)],to:t=>{const e=ct.exec(t);return Q([e[1],e[2],e[3]].map((t=>parseInt(t))))}},text:{from:Ot,to:t=>Ot(t)[1]}},"css-rgba":{color:{from:t=>[!0,ht(t)],to:t=>{const e=dt.exec(t);return et([e[1],e[2],e[3],e[4]].map(((t,e)=>3===e?255*parseFloat(t)|0:parseInt(t))))}},text:{from:jt,to:t=>jt(t)[1]}},"css-hsl":{color:{from:t=>[!0,pt(t)],to:t=>{const e=gt.exec(t),n=vt([e[1],e[2],e[3]].map((t=>parseFloat(t))));return Q(n)}},text:{from:Tt,to:t=>Tt(t)[1]}},"css-hsla":{color:{from:t=>[!0,mt(t)],to:t=>{const e=ft.exec(t),n=function([t,e,n,i]){return[...vt([t,e,n]),255*i|0]}([e[1],e[2],e[3],e[4]].map((t=>parseFloat(t))));return et(n)}},text:{from:Ht,to:t=>Ht(t)[1]}}};class Kt extends m{constructor(t,n){super(e(t,{className:n}))}}class Jt extends S{#N;constructor(){super("muigui-canvas"),this.#N=this.add(new Kt("canvas","muigui-canvas")).domElement}get canvas(){return this.#N}}class Xt extends v{#$;#C;#F;#I;#u={converters:F};constructor(t,n){const i=e("input",{type:"color",onInput:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setValue(n))},onChange:()=>{const[e,n]=this.#C(i.value);e&&(this.#I=!0,t.setFinalValue(n))}});super(e("div",{},[i])),this.setOptions(n),this.#F=i}updateDisplay(t){this.#I||(this.#F.value=this.#$(t)),this.#I=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#$=e,this.#C=n,this}}class Zt extends D{#A;#S;constructor(t,e,n={}){super(t,e,"muigui-color");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#A=this.add(new Xt(this,{converters:o})),this.#S=this.add(new G(this,{converters:r})),this.updateDisplay()}setOptions(t){const{format:e}=t;if(e){const{color:t,text:n}=qt[e];this.#A.setOptions({converters:t}),this.#S.setOptions({converters:n})}return super.setOptions(t),this}}class Qt extends g{constructor(){super("muigui-divider")}}class te extends g{#U;#L;constructor(t){super(t),this.#U=[],this.#L=this}get children(){return this.#U}get controllers(){return this.#U.filter((t=>!(t instanceof te)))}get folders(){return this.#U.filter((t=>t instanceof te))}reset(t=!0){for(const e of this.#U)e instanceof te&&!t||e.reset(t);return this}updateDisplay(){for(const t of this.#U)t.updateDisplay();return this}remove(t){const e=this.#U.indexOf(t);if(e>=0){const t=this.#U.splice(e,1)[0];t.domElement.remove(),t.setParent(null)}return this}_addControllerImpl(t){return this.domElement.appendChild(t.domElement),this.#U.push(t),t.setParent(this),t}addController(t){return this.#L._addControllerImpl(t)}pushContainer(t){return this.addController(t),this.#L=t,t}popContainer(){return this.#L=this.#L.parent,this}}class ee extends te{#O;constructor(t="Controls",n="muigui-menu"){super(n),this.#O=e("label"),this.addElem(e("button",{type:"button",onClick:()=>this.toggleOpen()},[this.#O])),this.pushContainer(new te),this.name(t),this.open()}open(t=!0){return this.domElement.classList.toggle("muigui-closed",!t),this.domElement.classList.toggle("muigui-open",t),this}close(){return this.open(!1)}name(t){return this.#O.textContent=t,this}title(t){return this.name(t)}toggleOpen(){return this.open(!this.domElement.classList.contains("muigui-open")),this}}class ne extends g{constructor(t){super("muigui-label"),this.text(t)}text(t){return this.domElement.textContent=t,this}}function ie(){}function oe(t,e,n){const i=t.getBoundingClientRect(),o=e.clientX-i.left,r=e.clientY-i.top,s=o/i.width,a=r/i.height,l=o-(n=n||[o,r])[0],u=r-n[1];return{x:o,y:r,nx:s,ny:a,dx:l,dy:u,ndx:l/i.width,ndy:u/i.width}}function re(t,{onDown:e=ie,onMove:n=ie,onUp:i=ie}){let o;const r=function(e){const i={type:"move",...oe(t,e,o)};n(i)},s=function(e){t.releasePointerCapture(e.pointerId),t.removeEventListener("pointermove",r),t.removeEventListener("pointerup",s),document.body.style.backgroundColor="",i("up")},a=function(n){t.addEventListener("pointermove",r),t.addEventListener("pointerup",s),t.setPointerCapture(n.pointerId);const i=oe(t,n);o=[i.x,i.y],e({type:"down",...i})};return t.addEventListener("pointerdown",a),function(){t.removeEventListener("pointerdown",a)}}function se(t){return t.querySelectorAll("[data-src]").forEach((e=>{const i="muigui-id-"+n++;e.id=i,t.querySelectorAll(`[data-target=${e.dataset.src}]`).forEach((t=>{t.setAttribute("fill",`url(#${i})`)}))})),t}class ae extends v{#$;#C;#j;#T;#H;#z;#P;#B;#G;#R;#_;#Y;#W;#q;#u={converters:F,alpha:!1};#K;#J;constructor(t,n){super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n\n \n \n \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n \n \n \n \n \n \n \n \n\n',className:"muigui-no-scroll"})),this.#j=this.domElement.children[0],this.#H=this.domElement.children[1],this.#B=this.domElement.children[2],se(this.#j),se(this.#H),se(this.#B),this.#T=this.$(".muigui-color-chooser-circle"),this.#z=this.$("[data-src=muigui-color-chooser-hue]"),this.#P=this.$(".muigui-color-chooser-hue-cursor"),this.#G=this.$("[data-src=muigui-color-chooser-alpha]"),this.#R=this.$(".muigui-color-chooser-alpha-cursor");const i=e=>{const n=o(e.nx,0,1),i=o(e.ny,0,1);this.#_[1]=n,this.#_[2]=1-i,this.#Y=!0,this.#q=!0;const[r,s]=this.#C(this.#K(this.#_));r&&t.setValue(s)},r=e=>{const n=o(e.nx,0,1);this.#_[0]=n,this.#W=!0,this.#q=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)},s=e=>{const n=o(e.nx,0,1);this.#_[3]=n,this.#Y=!0,this.#W=!0;const[i,r]=this.#C(this.#K(this.#_));i&&t.setValue(r)};re(this.#j,{onDown:i,onMove:i}),re(this.#H,{onDown:r,onMove:r}),re(this.#B,{onDown:s,onMove:s}),this.setOptions(n)}updateDisplay(t){this.#_||(this.#_=this.#J(this.#$(t)));{const[e,n,i,o=1]=this.#J(this.#$(t));this.#Y||(this.#_[0]=n>.001&&i>.001?e:this.#_[0]),this.#W||(this.#_[1]=n,this.#_[2]=i),this.#q||(this.#_[3]=o)}{const[t,e,n,i]=this.#_,[o,r,s]=wt($t(this.#_));this.#Y||this.#P.setAttribute("transform",`translate(${64*t}, 0)`),this.#z.children[0].setAttribute("stop-color",`hsl(${360*o} 0% 100% / ${i})`),this.#z.children[1].setAttribute("stop-color",`hsl(${360*o} 100% 50% / ${i})`),this.#q||this.#R.setAttribute("transform",`translate(${64*i}, 0)`),this.#G.children[0].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 0)`),this.#G.children[1].setAttribute("stop-color",`hsl(${360*o} ${100*r}% ${100*s}% / 1)`),this.#W||(this.#T.setAttribute("cx",""+64*e),this.#T.setAttribute("cy",""+48*(1-n)))}this.#Y=!1,this.#W=!1,this.#q=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n},alpha:i}=this.#u;return this.#B.style.display=i?"":"none",this.#K=i?t=>rt($t(t)):t=>it(Et(t)),this.#J=i?t=>function([t,e,n,i]){return[...Vt([t,e,n]),i]}(ot(t)):t=>Vt(nt(t)),this.#$=e,this.#C=n,this}}class le extends D{#X;#Z;#b;#Q;#u={open:!1};constructor(t,n,i={}){super(t,n,"muigui-pop-down-controller"),this.#X=this.add(new Kt("div","muigui-pop-down-top"));const o=this.#X.addElem(e("input",{type:"checkbox",onChange:()=>{this.#u.open=o.checked,this.updateDisplay()}}));this.#b=o,this.#Z=this.#X.add(new Kt("div","muigui-pop-down-values")),this.#Q=this.add(new Kt("div","muigui-pop-down-bottom")),this.setOptions(i)}setKnobColor(t){this.#b&&(this.#b.style=`\n --range-color: ${t};\n --value-bg-color: ${t};\n `)}updateDisplay(){super.updateDisplay();const{open:t}=this.#u;this.domElement.children[1].classList.toggle("muigui-open",t),this.domElement.children[1].classList.toggle("muigui-closed",!t)}setOptions(t){l(this.#u,t),super.setOptions(t),this.updateDisplay()}addTop(t){return this.#Z.add(t)}addBottom(t){return this.#Q.add(t)}}class ue extends le{#A;#S;#$;constructor(t,e,n={}){super(t,e,"muigui-color-chooser");const i=n.format||St(this.getValue()),{color:o,text:r}=qt[i];this.#$=o.to,this.#S=new G(this,{converters:r,alpha:It(i)}),this.#A=new ae(this,{converters:o,alpha:It(i)}),this.addTop(this.#S),this.addBottom(this.#A),this.__setKnobHelper=()=>{if(this.#$){const t=this.#$(this.getValue()),e=yt(Z(t));e[2]=(e[2]+50)%100;const n=Q(vt(e));this.setKnobColor(`${t.substring(0,7)}FF`,n)}},this.updateDisplay()}updateDisplay(){super.updateDisplay(),this.__setKnobHelper&&this.__setKnobHelper()}setOptions(t){return super.setOptions(t),this}}class ce extends ee{add(t,e,...n){const i=t instanceof g?t:function(t,e,...n){const[i]=n;if(Array.isArray(i))return new z(t,e,{keyValues:i});const o=typeof t[e];switch(o){case"number":if("number"==typeof n[0]&&"number"==typeof n[1]){const i=n[0],o=n[1],r=n[2];return new B(t,e,{min:i,max:o,...r&&{step:r}})}return 0===n.length?new j(t,e,...n):new B(t,e,...n);case"boolean":return new N(t,e,...n);case"function":return new f(t,e,...n);case"string":return new R(t,e,...n);case"undefined":throw new Error(`no property named ${e}`);default:throw new Error(`unhandled type ${o} for property ${e}`)}}(t,e,...n);return this.addController(i)}addCanvas(t){return this.addController(new Jt(t))}addColor(t,e,n={}){const i=t[e];return It(n.format||St(i))?this.addController(new ue(t,e,n)):this.addController(new Zt(t,e,n))}addDivider(){return this.addController(new Qt)}addFolder(t){return this.addController(new ce(t))}addLabel(t){return this.addController(new ne(t))}}class he extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}}customElements.define("muigui-element",he);const de=new CSSStyleSheet;de.replaceSync(t.default);const pe=new CSSStyleSheet;function me(t){let e,n;function i(){if(e&&!n){const o=e;e=void 0,n=t.replace(o).then((()=>{n=void 0,i()}))}}return function(t){e=t,i()}}const ge=me(de),fe=me(pe);class be extends ce{static converters=U;static mapRange=u;static makeRangeConverters=c;static makeRangeOptions=h;static makeMinMaxPair=p;#tt=new CSSStyleSheet;constructor(t={}){super("Controls","muigui-root"),t instanceof HTMLElement&&(t={parent:t});const{autoPlace:n=!0,width:i,title:o="Controls"}=t;let{parent:r}=t;if(i&&(this.domElement.style.width=/^\d+$/.test(i)?`${i}px`:i),void 0===r&&n&&(r=document.body,this.domElement.classList.add("muigui-auto-place")),r){const t=e("muigui-element");t.shadowRoot.adoptedStyleSheets=[de,pe,this.#tt],t.shadow.appendChild(this.domElement),r.appendChild(t)}o&&this.title(o),this.domElement.classList.add("muigui","muigui-colors")}setStyle(t){this.#tt.replace(t)}static setBaseStyles(t){ge(t)}static getBaseStyleSheet(){return de}static setUserStyles(t){fe(t)}static getUserStyleSheet(){return pe}static setTheme(e){be.setBaseStyles(`${t.default}\n${t.themes[e]||""}`)}}function ve(){}const xe={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};function we(t,{onDown:e=ve,onUp:n=ve}){const i=function(t){const i=t.shiftKey?10:1,[o,r]=(xe[t.key]||[0,0]).map((t=>t*i));("keydown"===t.type?e:n)({type:t.type.substring(3),dx:o,dy:r,event:t})};return t.addEventListener("keydown",i),t.addEventListener("keyup",i),function(){t.removeEventListener("keydown",i),t.removeEventListener("keyup",i)}}function ye(t,e=""){if(!t)throw new Error(e)}function ke(t,e,n,i,o,r){const s=Math.abs(n)*Math.cos(r),a=Math.abs(i)*Math.sin(r);return[t+Math.cos(o)*s-Math.sin(o)*a,e+Math.sin(o)*s+Math.cos(o)*a]}function Ee(t,e,n,i,o){ye(Math.abs(i-o)<=2*Math.PI),ye(i>=-Math.PI&&i<=2*Math.PI),ye(i<=o),ye(o>=-Math.PI&&o<=4*Math.PI);const{x1:r,y1:s,x2:a,y2:l,fa:u,fs:c}=function(t,e,n,i,o,r,s){const[a,l]=ke(t,e,n,i,o,r),[u,c]=ke(t,e,n,i,o,r+s);return{x1:a,y1:l,x2:u,y2:c,fa:Math.abs(s)>Math.PI?1:0,fs:s>0?1:0}}(t,e,n,n,0,i,o-i);return Math.abs(Math.abs(i-o)-2*Math.PI)>Number.EPSILON?`M${t} ${e} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l} L${t} ${e}`:`M${r} ${s} L${r} ${s} A ${n} ${n} 0 ${u} ${c} ${a} ${l}`}const $e=t=>a(t+Math.PI,2*Math.PI)-Math.PI;class Ce extends v{#et;#nt;#it;#ot;#u={step:1,min:-180,max:180,dirMin:-Math.PI,dirMax:Math.PI,wrap:void 0,converters:F};constructor(t,n={}){const i=L();super(e("div",{className:"muigui-direction muigui-no-scroll",innerHTML:'\n\n \x3c!----\x3e\n \n \n \n \n \n \n\n',onWheel:e=>{e.preventDefault();const{min:n,max:r,step:l}=this.#u,u=i(e,l);let c=this.#it+u;this.#ot&&(c=a(c-n,r-n)+n);const h=o(s(c,(t=>t),l),n,r);t.setValue(h)}}));const r=e=>{const{min:n,max:i,step:r,dirMin:a,dirMax:l}=this.#u,u=2*e.nx-1,c=2*e.ny-1,h=Math.atan2(c,u),d=(a+l)/2,p=o(($e(h-d)-$e(a-d))/(l-a),0,1),m=s(n+(i-n)*p,(t=>t),r);t.setValue(m)};re(this.domElement,{onDown:r,onMove:r}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),this.#et=this.$("#muigui-arrow"),this.#nt=this.$("#muigui-range"),this.setOptions(n)}updateDisplay(t){this.#it=t;const{min:e,max:n}=this.#u,i=(t-e)/(n-e),o=(r=this.#u.dirMin,s=this.#u.dirMax,r+(s-r)*i);var r,s;this.#et.style.transform=`rotate(${o}rad)`}setOptions(t){l(this.#u,t);const{dirMin:e,dirMax:n,wrap:i}=this.#u;this.#ot=void 0!==i?i:Math.abs(e-n)>=2*Math.PI-Number.EPSILON;const[o,r]=e(o.push(i),e("label",{},[e("input",{type:"radio",name:r,value:a,onChange:function(){this.checked&&t.setFinalValue(s.#D[this.value])}}),e("button",{type:"button",textContent:n,onClick:function(){this.previousElementSibling.click()}})]))))));const s=this;this.#D=o,this.cols(i)}updateDisplay(t){const e=this.#D.indexOf(t);for(let t=0;t{e({rect:t.getBoundingClientRect(),elem:t})})).observe(t)}function De(t,e,n,i){Se(t,(({rect:o})=>{const{width:r,height:s}=o;t.setAttribute("viewBox",`-${r*e} -${s*n} ${r} ${s}`),i({elem:t,rect:o})}))}function Ne(t,e,n,i,o,r){const a=[];tt),n)),e=Math.min(e,o);for(let i=t;i<=e;i+=n)a.push(`M${i} 0 l0 ${r}`);return a.join(" ")}class Fe extends v{#rt;#st;#at;#lt;#ut;#ct;#ht;#dt;#pt;#it;#mt;#u={min:-100,max:100,step:1,unit:10,unitSize:10,ticksPerUnit:5,labelFn:t=>t,tickHeight:1,limits:!0,thicksColor:void 0,orientation:void 0};constructor(t,n){const i=L();let r;super(e("div",{innerHTML:'\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \x3c!----\x3e\n \x3c!----\x3e\n \n \n \n \n\n',className:"muigui-no-v-scroll",onWheel:e=>{e.preventDefault();const{min:n,max:r,step:a}=this.#u,l=i(e,a),u=o(s(this.#it+l,(t=>t),a),n,r);t.setValue(u)}})),this.#rt=this.$("svg"),this.#st=this.$("#muigui-origin"),this.#at=this.$("#muigui-ticks"),this.#lt=this.$("#muigui-thicks"),this.#ut=this.$("#muigui-numbers"),this.#ct=this.$("#muigui-left-grad"),this.#ht=this.$("#muigui-right-grad"),this.setOptions(n),re(this.domElement,{onDown:()=>{r=this.#it},onMove:e=>{const{min:n,max:i,unitSize:a,unit:l,step:u}=this.#u,c=o(s(r-e.dx/a*l,(t=>t),u),n,i);t.setValue(c)}}),we(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#it+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),De(this.#rt,.5,0,(({rect:{width:t}})=>{this.#ct.setAttribute("x",-t/2),this.#ht.setAttribute("x",t/2-20),this.#mt=function(t){const e=t.innerHTML;t.innerHTML="- ";const n=t.querySelector("text").getComputedTextLength();return t.innerHTML=e,n}(this.#ut),this.#dt=t,this.#gt()}))}#gt(){if(!this.#dt||void 0===this.#it)return;const{labelFn:t,limits:e,min:n,max:i,orientation:o,tickHeight:r,ticksPerUnit:a,unit:l,unitSize:u,thicksColor:c}=this.#u,h=Math.ceil(this.#dt/u),d=this.#it/l,p=Math.round(d-h),m=p*u,g=(p+2*h)*u,f=e?n*u/l:m,b=e?i*u/l:g,v=""===t(1)?10:5;a>1&&this.#at.setAttribute("d",Ne(m,g,u/a,f,b,v*r)),this.#lt.style.stroke=c,this.#lt.setAttribute("d",Ne(m,g,u,f,b,v)),this.#ut.innerHTML=function(t,e,n,i,o,r,a,l){const u=[];tt),n)),e=Math.min(e,a);const c=Math.max(0,-Math.log10(i));for(let r=t;r<=e;r+=n)u.push(`${h=r/n*i,l(h.toFixed(c))}`);var h;return u.join("\n")}(m,g,u,l,this.#mt,f,b,t),this.#st.setAttribute("transform",`translate(${-this.#it*u/l} 0)`),this.#rt.classList.toggle("muigui-slider-up","up"===o)}updateDisplay(t){this.#it=t,this.#gt()}setOptions(t){return l(this.#u,t),this}}class Ae extends D{constructor(t,e,n={}){super(t,e,"muigui-slider"),this.add(new Fe(this,n)),this.add(new O(this,n)),this.updateDisplay()}}class Ue extends v{#rt;#et;#T;#it=[];constructor(t){super(e("div",{innerHTML:'\n\n \n \n \n \n \n\n',className:"muigui-no-scroll"}));const n=e=>{const{width:n,height:i}=this.#rt.getBoundingClientRect(),o=2*e.nx-1,r=2*e.ny-1;t.setValue([o*n*.5,r*i*.5])};re(this.domElement,{onDown:n,onMove:n}),this.#rt=this.$("svg"),this.#et=this.$("#muigui-arrow"),this.#T=this.$("#muigui-circle"),De(this.#rt,.5,.5,(()=>this.#ft))}#ft(){const[t,e]=this.#it;this.#et.setAttribute("d",`M0,0L${t},${e}`),this.#T.setAttribute("transform",`translate(${t}, ${e})`)}updateDisplay(t){this.#it[0]=t[0],this.#it[1]=t[1],this.#ft()}}class Le extends le{constructor(t,e){super(t,e,"muigui-vec2");const n=t=>({setValue:e=>{const n=this.getValue();n[t]=e,this.setValue(n)},setFinalValue:e=>{const n=this.getValue();n[t]=e,this.setFinalValue(n)}});this.addTop(new O(n(0),{converters:{to:t=>t[0],from:A.from}})),this.addTop(new O(n(1),{converters:{to:t=>t[1],from:A.from}})),this.addBottom(new Ue(this)),this.updateDisplay()}}export{ue as ColorChooser,Ve as Direction,Me as RadioGrid,B as Range,z as Select,Ae as Slider,j as TextNumber,Le as Vec2,be as default}; //# sourceMappingURL=muigui.module.min.js.map diff --git a/package-lock.json b/package-lock.json index 9c8956a..f14f763 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,12 @@ "@rollup/plugin-terser": "^0.4.0", "@rollup/plugin-typescript": "^11.1.5", "@tsconfig/recommended": "^1.0.3", + "@typescript-eslint/eslint-plugin": "^6.12.0", + "@typescript-eslint/parser": "^6.12.0", "chokidar": "^3.5.3", "eslint": "^8.20.0", "eslint-plugin-html": "^7.1.0", + "eslint-plugin-one-variable-per-var": "^0.0.3", "eslint-plugin-optional-comma-spacing": "0.0.4", "eslint-plugin-require-trailing-comma": "0.0.1", "puppeteer": "^21.5.2", @@ -177,9 +180,9 @@ } }, "node_modules/@eslint-community/regexpp": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.0.tgz", - "integrity": "sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz", + "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==", "dev": true, "engines": { "node": "^12.0.0 || ^14.0.0 || >=16.0.0" @@ -489,6 +492,12 @@ "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", "dev": true }, + "node_modules/@types/json-schema": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", + "dev": true + }, "node_modules/@types/node": { "version": "20.9.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.5.tgz", @@ -507,6 +516,12 @@ "@types/node": "*" } }, + "node_modules/@types/semver": { + "version": "7.5.6", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz", + "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==", + "dev": true + }, "node_modules/@types/yauzl": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz", @@ -517,6 +532,195 @@ "@types/node": "*" } }, + "node_modules/@typescript-eslint/eslint-plugin": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.12.0.tgz", + "integrity": "sha512-XOpZ3IyJUIV1b15M7HVOpgQxPPF7lGXgsfcEIu3yDxFPaf/xZKt7s9QO/pbk7vpWQyVulpJbu4E5LwpZiQo4kA==", + "dev": true, + "dependencies": { + "@eslint-community/regexpp": "^4.5.1", + "@typescript-eslint/scope-manager": "6.12.0", + "@typescript-eslint/type-utils": "6.12.0", + "@typescript-eslint/utils": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0", + "debug": "^4.3.4", + "graphemer": "^1.4.0", + "ignore": "^5.2.4", + "natural-compare": "^1.4.0", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha", + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/parser": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.12.0.tgz", + "integrity": "sha512-s8/jNFPKPNRmXEnNXfuo1gemBdVmpQsK1pcu+QIvuNJuhFzGrpD7WjOcvDc/+uEdfzSYpNu7U/+MmbScjoQ6vg==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "6.12.0", + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/typescript-estree": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0", + "debug": "^4.3.4" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/scope-manager": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.12.0.tgz", + "integrity": "sha512-5gUvjg+XdSj8pcetdL9eXJzQNTl3RD7LgUiYTl8Aabdi8hFkaGSYnaS6BLc0BGNaDH+tVzVwmKtWvu0jLgWVbw==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/type-utils": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.12.0.tgz", + "integrity": "sha512-WWmRXxhm1X8Wlquj+MhsAG4dU/Blvf1xDgGaYCzfvStP2NwPQh6KBvCDbiOEvaE0filhranjIlK/2fSTVwtBng==", + "dev": true, + "dependencies": { + "@typescript-eslint/typescript-estree": "6.12.0", + "@typescript-eslint/utils": "6.12.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/types": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.12.0.tgz", + "integrity": "sha512-MA16p/+WxM5JG/F3RTpRIcuOghWO30//VEOvzubM8zuOOBYXsP+IfjoCXXiIfy2Ta8FRh9+IO9QLlaFQUU+10Q==", + "dev": true, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@typescript-eslint/typescript-estree": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.12.0.tgz", + "integrity": "sha512-vw9E2P9+3UUWzhgjyyVczLWxZ3GuQNT7QpnIY3o5OMeLO/c8oHljGc8ZpryBMIyympiAAaKgw9e5Hl9dCWFOYw==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@typescript-eslint/utils": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.12.0.tgz", + "integrity": "sha512-LywPm8h3tGEbgfyjYnu3dauZ0U7R60m+miXgKcZS8c7QALO9uWJdvNoP+duKTk2XMWc7/Q3d/QiCuLN9X6SWyQ==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.4.0", + "@types/json-schema": "^7.0.12", + "@types/semver": "^7.5.0", + "@typescript-eslint/scope-manager": "6.12.0", + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/typescript-estree": "6.12.0", + "semver": "^7.5.4" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0" + } + }, + "node_modules/@typescript-eslint/visitor-keys": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.12.0.tgz", + "integrity": "sha512-rg3BizTZHF1k3ipn8gfrzDXXSFKyOEB5zxYXInQ6z0hUvmQlhaZQzK+YmHmNViMA9HzW5Q9+bPPt90bU6GQwyw==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.12.0", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, "node_modules/accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -637,6 +841,15 @@ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", "dev": true }, + "node_modules/array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/ast-types": { "version": "0.13.4", "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz", @@ -1215,6 +1428,18 @@ "integrity": "sha512-nEzHZteIUZfGCZtTiS1fRpC8UZmsfD1SiyPvaUNvS13dvKf666OAm8YTi0+Ca3n1nLEyu49Cy4+dPWpaHFJk9g==", "dev": true }, + "node_modules/dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "dependencies": { + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -1447,6 +1672,15 @@ "htmlparser2": "^8.0.1" } }, + "node_modules/eslint-plugin-one-variable-per-var": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-one-variable-per-var/-/eslint-plugin-one-variable-per-var-0.0.3.tgz", + "integrity": "sha512-gdqNqxyuGNjiJFIbOFMV5rs+cAR8TwQmldwsHINFNtgsm7/D5ogFmplibJL4UzQpINb5RwiXdOY0Ixed71PtIQ==", + "dev": true, + "peerDependencies": { + "eslint": ">=0.8.0" + } + }, "node_modules/eslint-plugin-optional-comma-spacing": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/eslint-plugin-optional-comma-spacing/-/eslint-plugin-optional-comma-spacing-0.0.4.tgz", @@ -1479,9 +1713,9 @@ } }, "node_modules/eslint-visitor-keys": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz", - "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -1680,6 +1914,34 @@ "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==", "dev": true }, + "node_modules/fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -1964,6 +2226,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "dependencies": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -1988,6 +2270,12 @@ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "dev": true }, + "node_modules/graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true + }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -2439,6 +2727,15 @@ "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", "dev": true }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, "node_modules/methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -2448,6 +2745,19 @@ "node": ">= 0.6" } }, + "node_modules/micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "dependencies": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, "node_modules/mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -3120,6 +3430,33 @@ "node": ">=10" } }, + "node_modules/semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "dependencies": { + "lru-cache": "^6.0.0" + }, + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/semver/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/send": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", @@ -3369,6 +3706,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/smart-buffer": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", @@ -3598,6 +3944,18 @@ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "dev": true }, + "node_modules/ts-api-utils": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", + "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==", + "dev": true, + "engines": { + "node": ">=16.13.0" + }, + "peerDependencies": { + "typescript": ">=4.2.0" + } + }, "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", @@ -3814,6 +4172,12 @@ "node": ">=10" } }, + "node_modules/yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", @@ -3988,9 +4352,9 @@ } }, "@eslint-community/regexpp": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.0.tgz", - "integrity": "sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==", + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz", + "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==", "dev": true }, "@eslint/eslintrc": { @@ -4209,6 +4573,12 @@ "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==", "dev": true }, + "@types/json-schema": { + "version": "7.0.15", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", + "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", + "dev": true + }, "@types/node": { "version": "20.9.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.5.tgz", @@ -4227,6 +4597,12 @@ "@types/node": "*" } }, + "@types/semver": { + "version": "7.5.6", + "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz", + "integrity": "sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==", + "dev": true + }, "@types/yauzl": { "version": "2.10.3", "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz", @@ -4237,6 +4613,106 @@ "@types/node": "*" } }, + "@typescript-eslint/eslint-plugin": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.12.0.tgz", + "integrity": "sha512-XOpZ3IyJUIV1b15M7HVOpgQxPPF7lGXgsfcEIu3yDxFPaf/xZKt7s9QO/pbk7vpWQyVulpJbu4E5LwpZiQo4kA==", + "dev": true, + "requires": { + "@eslint-community/regexpp": "^4.5.1", + "@typescript-eslint/scope-manager": "6.12.0", + "@typescript-eslint/type-utils": "6.12.0", + "@typescript-eslint/utils": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0", + "debug": "^4.3.4", + "graphemer": "^1.4.0", + "ignore": "^5.2.4", + "natural-compare": "^1.4.0", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + } + }, + "@typescript-eslint/parser": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.12.0.tgz", + "integrity": "sha512-s8/jNFPKPNRmXEnNXfuo1gemBdVmpQsK1pcu+QIvuNJuhFzGrpD7WjOcvDc/+uEdfzSYpNu7U/+MmbScjoQ6vg==", + "dev": true, + "requires": { + "@typescript-eslint/scope-manager": "6.12.0", + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/typescript-estree": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0", + "debug": "^4.3.4" + } + }, + "@typescript-eslint/scope-manager": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.12.0.tgz", + "integrity": "sha512-5gUvjg+XdSj8pcetdL9eXJzQNTl3RD7LgUiYTl8Aabdi8hFkaGSYnaS6BLc0BGNaDH+tVzVwmKtWvu0jLgWVbw==", + "dev": true, + "requires": { + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0" + } + }, + "@typescript-eslint/type-utils": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.12.0.tgz", + "integrity": "sha512-WWmRXxhm1X8Wlquj+MhsAG4dU/Blvf1xDgGaYCzfvStP2NwPQh6KBvCDbiOEvaE0filhranjIlK/2fSTVwtBng==", + "dev": true, + "requires": { + "@typescript-eslint/typescript-estree": "6.12.0", + "@typescript-eslint/utils": "6.12.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.0.1" + } + }, + "@typescript-eslint/types": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.12.0.tgz", + "integrity": "sha512-MA16p/+WxM5JG/F3RTpRIcuOghWO30//VEOvzubM8zuOOBYXsP+IfjoCXXiIfy2Ta8FRh9+IO9QLlaFQUU+10Q==", + "dev": true + }, + "@typescript-eslint/typescript-estree": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.12.0.tgz", + "integrity": "sha512-vw9E2P9+3UUWzhgjyyVczLWxZ3GuQNT7QpnIY3o5OMeLO/c8oHljGc8ZpryBMIyympiAAaKgw9e5Hl9dCWFOYw==", + "dev": true, + "requires": { + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/visitor-keys": "6.12.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + } + }, + "@typescript-eslint/utils": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.12.0.tgz", + "integrity": "sha512-LywPm8h3tGEbgfyjYnu3dauZ0U7R60m+miXgKcZS8c7QALO9uWJdvNoP+duKTk2XMWc7/Q3d/QiCuLN9X6SWyQ==", + "dev": true, + "requires": { + "@eslint-community/eslint-utils": "^4.4.0", + "@types/json-schema": "^7.0.12", + "@types/semver": "^7.5.0", + "@typescript-eslint/scope-manager": "6.12.0", + "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/typescript-estree": "6.12.0", + "semver": "^7.5.4" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.12.0.tgz", + "integrity": "sha512-rg3BizTZHF1k3ipn8gfrzDXXSFKyOEB5zxYXInQ6z0hUvmQlhaZQzK+YmHmNViMA9HzW5Q9+bPPt90bU6GQwyw==", + "dev": true, + "requires": { + "@typescript-eslint/types": "6.12.0", + "eslint-visitor-keys": "^3.4.1" + } + }, "accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -4324,6 +4800,12 @@ "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", "dev": true }, + "array-union": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", + "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "dev": true + }, "ast-types": { "version": "0.13.4", "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz", @@ -4737,6 +5219,15 @@ "integrity": "sha512-nEzHZteIUZfGCZtTiS1fRpC8UZmsfD1SiyPvaUNvS13dvKf666OAm8YTi0+Ca3n1nLEyu49Cy4+dPWpaHFJk9g==", "dev": true }, + "dir-glob": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", + "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "dev": true, + "requires": { + "path-type": "^4.0.0" + } + }, "doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -4912,6 +5403,13 @@ "htmlparser2": "^8.0.1" } }, + "eslint-plugin-one-variable-per-var": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-one-variable-per-var/-/eslint-plugin-one-variable-per-var-0.0.3.tgz", + "integrity": "sha512-gdqNqxyuGNjiJFIbOFMV5rs+cAR8TwQmldwsHINFNtgsm7/D5ogFmplibJL4UzQpINb5RwiXdOY0Ixed71PtIQ==", + "dev": true, + "requires": {} + }, "eslint-plugin-optional-comma-spacing": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/eslint-plugin-optional-comma-spacing/-/eslint-plugin-optional-comma-spacing-0.0.4.tgz", @@ -4937,9 +5435,9 @@ } }, "eslint-visitor-keys": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz", - "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==", + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", "dev": true }, "espree": { @@ -5081,6 +5579,30 @@ "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==", "dev": true }, + "fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dev": true, + "requires": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "dependencies": { + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "requires": { + "is-glob": "^4.0.1" + } + } + } + }, "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -5300,6 +5822,20 @@ "type-fest": "^0.20.2" } }, + "globby": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", + "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "dev": true, + "requires": { + "array-union": "^2.1.0", + "dir-glob": "^3.0.1", + "fast-glob": "^3.2.9", + "ignore": "^5.2.0", + "merge2": "^1.4.1", + "slash": "^3.0.0" + } + }, "gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -5321,6 +5857,12 @@ "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==", "dev": true }, + "graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -5651,12 +6193,28 @@ "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==", "dev": true }, + "merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true + }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", "dev": true }, + "micromatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz", + "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==", + "dev": true, + "requires": { + "braces": "^3.0.2", + "picomatch": "^2.3.1" + } + }, "mime": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", @@ -6134,6 +6692,26 @@ "node-forge": "^1" } }, + "semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + }, + "dependencies": { + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + } + } + }, "send": { "version": "0.18.0", "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz", @@ -6355,6 +6933,12 @@ "object-inspect": "^1.9.0" } }, + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true + }, "smart-buffer": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz", @@ -6536,6 +7120,13 @@ "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", "dev": true }, + "ts-api-utils": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", + "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==", + "dev": true, + "requires": {} + }, "tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", @@ -6689,6 +7280,12 @@ "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", "dev": true }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", + "dev": true + }, "yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", diff --git a/package.json b/package.json index 101d5a1..7168ce7 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "build-normal": "rollup -c", "build-min": "rollup -c", "eslint": "eslint \"**/*.js\"", + "fix": "eslint --fix", "pre-push": "npm run eslint && npm run test", "test": "node test/puppeteer.js" }, @@ -39,9 +40,12 @@ "@rollup/plugin-terser": "^0.4.0", "@rollup/plugin-typescript": "^11.1.5", "@tsconfig/recommended": "^1.0.3", + "@typescript-eslint/eslint-plugin": "^6.12.0", + "@typescript-eslint/parser": "^6.12.0", "chokidar": "^3.5.3", "eslint": "^8.20.0", "eslint-plugin-html": "^7.1.0", + "eslint-plugin-one-variable-per-var": "^0.0.3", "eslint-plugin-optional-comma-spacing": "0.0.4", "eslint-plugin-require-trailing-comma": "0.0.1", "puppeteer": "^21.5.2", diff --git a/src/controllers/ColorChooser.js b/src/controllers/ColorChooser.js index cbff660..e31f1f0 100644 --- a/src/controllers/ColorChooser.js +++ b/src/controllers/ColorChooser.js @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ import { colorFormatConverters, guessFormat, @@ -15,6 +16,7 @@ export default class ColorChooser extends PopDownController { #colorView; #textView; #to; + #setKnobHelper; constructor(object, property, options = {}) { super(object, property, 'muigui-color-chooser'); @@ -26,7 +28,7 @@ export default class ColorChooser extends PopDownController { this.addTop(this.#textView); this.addBottom(this.#colorView); // WTF! FIX! - this.__setKnobHelper = () => { + this.#setKnobHelper = () => { if (this.#to) { const hex6Or8 = this.#to(this.getValue()); const hsl = rgbUint8ToHsl(hexToUint8RGB(hex6Or8)); @@ -39,8 +41,8 @@ export default class ColorChooser extends PopDownController { } updateDisplay() { super.updateDisplay(); - if (this.__setKnobHelper) { - this.__setKnobHelper(); + if (this.#setKnobHelper) { + this.#setKnobHelper(); } } setOptions(options) { diff --git a/src/controllers/Container.js b/src/controllers/Container.js index 11bb4fc..cfe15fe 100644 --- a/src/controllers/Container.js +++ b/src/controllers/Container.js @@ -43,14 +43,14 @@ export default class Container extends Controller { } return this; } - _addControllerImpl(controller) { + #addControllerImpl(controller) { this.domElement.appendChild(controller.domElement); this.#controllers.push(controller); controller.setParent(this); return controller; } addController(controller) { - return this.#childDestController._addControllerImpl(controller); + return this.#childDestController.#addControllerImpl(controller); } pushContainer(container) { this.addController(container); diff --git a/src/libs/keyboard.js b/src/libs/keyboard.js index 757c56f..562f092 100644 --- a/src/libs/keyboard.js +++ b/src/libs/keyboard.js @@ -10,7 +10,7 @@ const keyDirections = { // This probably needs to be global export function addKeyboardEvents(elem, {onDown = noop, onUp = noop}) { - const keyDown = function(event) { + const keyDown = function (event) { const mult = event.shiftKey ? 10 : 1; const [dx, dy] = (keyDirections[event.key] || [0, 0]).map(v => v * mult); const fn = event.type === 'keydown' ? onDown : onUp; @@ -25,7 +25,7 @@ export function addKeyboardEvents(elem, {onDown = noop, onUp = noop}) { elem.addEventListener('keydown', keyDown); elem.addEventListener('keyup', keyDown); - return function() { + return function () { elem.removeEventListener('keydown', keyDown); elem.removeEventListener('keyup', keyDown); }; diff --git a/src/libs/touch.js b/src/libs/touch.js index 010d7c6..d4df304 100644 --- a/src/libs/touch.js +++ b/src/libs/touch.js @@ -17,7 +17,7 @@ export function computeRelativePosition(elem, event, start) { export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop}) { let start; - const pointerMove = function(event) { + const pointerMove = function (event) { const e = { type: 'move', ...computeRelativePosition(elem, event, start), @@ -25,7 +25,7 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop} onMove(e); }; - const pointerUp = function(event) { + const pointerUp = function (event) { elem.releasePointerCapture(event.pointerId); elem.removeEventListener('pointermove', pointerMove); elem.removeEventListener('pointerup', pointerUp); @@ -35,7 +35,7 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop} onUp('up'); }; - const pointerDown = function(event) { + const pointerDown = function (event) { elem.addEventListener('pointermove', pointerMove); elem.addEventListener('pointerup', pointerUp); elem.setPointerCapture(event.pointerId); @@ -50,7 +50,7 @@ export function addTouchEvents(elem, {onDown = noop, onMove = noop, onUp = noop} elem.addEventListener('pointerdown', pointerDown); - return function() { + return function () { elem.removeEventListener('pointerdown', pointerDown); }; } \ No newline at end of file diff --git a/src/libs/wheel.js b/src/libs/wheel.js index 2de561f..2ac7f0f 100644 --- a/src/libs/wheel.js +++ b/src/libs/wheel.js @@ -1,6 +1,6 @@ export function createWheelHelper() { let wheelAccum = 0; - return function(e, step, wheelScale = 5) { + return function (e, step, wheelScale = 5) { wheelAccum -= e.deltaY * step / wheelScale; const wheelSteps = Math.floor(Math.abs(wheelAccum) / step) * Math.sign(wheelAccum); const delta = wheelSteps * step; diff --git a/src/views/RadioGridView.js b/src/views/RadioGridView.js index 0362ed3..3613732 100644 --- a/src/views/RadioGridView.js +++ b/src/views/RadioGridView.js @@ -15,7 +15,7 @@ export default class RadioGridView extends EditView { type: 'radio', name, value: ndx, - onChange: function() { + onChange: function () { if (this.checked) { setter.setFinalValue(that.#values[this.value]); } @@ -24,12 +24,13 @@ export default class RadioGridView extends EditView { createElem('button', { type: 'button', textContent: key, - onClick: function() { + onClick: function () { this.previousElementSibling.click(); }, }), ]); }))); + // eslint-disable-next-line @typescript-eslint/no-this-alias const that = this; this.#values = values; this.cols(cols); diff --git a/src/views/View.js b/src/views/View.ts similarity index 66% rename from src/views/View.js rename to src/views/View.ts index 6db32e9..f10b151 100644 --- a/src/views/View.js +++ b/src/views/View.ts @@ -1,56 +1,58 @@ import { removeArrayElem } from '../libs/utils.js'; export default class View { - #childDestElem; - #views = []; + domElement: HTMLElement; - constructor(elem) { + #childDestElem: HTMLElement; + #views: View[] = []; + + constructor(elem: HTMLElement) { this.domElement = elem; this.#childDestElem = elem; } - addElem(elem) { + addElem(elem: HTMLElement) { this.#childDestElem.appendChild(elem); return elem; } - removeElem(elem) { + removeElem(elem: HTMLElement) { this.#childDestElem.removeChild(elem); return elem; } - pushSubElem(elem) { + pushSubElem(elem: HTMLElement) { this.#childDestElem.appendChild(elem); this.#childDestElem = elem; } popSubElem() { - this.#childDestElem = this.#childDestElem.parentElement; + this.#childDestElem = this.#childDestElem.parentElement!; } - add(view) { + add(view: View) { this.#views.push(view); this.addElem(view.domElement); return view; } - remove(view) { + remove(view: View) { this.removeElem(view.domElement); removeArrayElem(this.#views, view); return view; } - pushSubView(view) { + pushSubView(view: View) { this.pushSubElem(view.domElement); } popSubView() { this.popSubElem(); } - setOptions(options) { + setOptions(options: any) { for (const view of this.#views) { view.setOptions(options); } } - updateDisplayIfNeeded(newV, ignoreCache) { + updateDisplayIfNeeded(newV: any, ignoreCache?: boolean) { for (const view of this.#views) { view.updateDisplayIfNeeded(newV, ignoreCache); } return this; } - $(selector) { + $(selector: string) { return this.domElement.querySelector(selector); } } \ No newline at end of file diff --git a/test/assert.js b/test/assert.js index 0808db4..0440bbc 100644 --- a/test/assert.js +++ b/test/assert.js @@ -107,7 +107,7 @@ export function assertThrowsWith(func, expectations, msg = '') { if (config.throwOnError === false) { const origFn = console.error; const errors = []; - console.error = function(...args) { + console.error = function (...args) { errors.push(args.join(' ')); }; func(); @@ -140,7 +140,7 @@ export function assertIfThrowsItThrowsWith(func, expectations, msg = '') { if (config.throwOnError === false) { const origFn = console.error; const errors = []; - console.error = function(...args) { + console.error = function (...args) { errors.push(args.join(' ')); }; func(); @@ -184,7 +184,7 @@ function assertStringMatchesREs(actual, expectations, msg) { export function assertWarnsWith(func, expectations, msg = '') { const warnings = []; const origWarnFn = console.warn; - console.warn = function(...args) { + console.warn = function (...args) { origWarnFn.call(this, ...args); warnings.push(args.join(' ')); }; diff --git a/test/index.js b/test/index.js index e20f40d..5065958 100644 --- a/test/index.js +++ b/test/index.js @@ -1,6 +1,4 @@ /* global mocha */ -/* global URLSearchParams */ -/* global window */ import './tests/muigui-tests.js'; import './tests/color-utils-tests.js'; diff --git a/test/mocha-support.js b/test/mocha-support.js index 351db8a..7e251b7 100644 --- a/test/mocha-support.js +++ b/test/mocha-support.js @@ -1,5 +1,3 @@ -/* global window */ - export const describe = window.describe; export const it = window.it; export const before = window.before; diff --git a/test/puppeteer.js b/test/puppeteer.js index 935e9db..9881b2e 100755 --- a/test/puppeteer.js +++ b/test/puppeteer.js @@ -45,7 +45,7 @@ async function test(port) { let waitingPromiseInfo; // Get the "viewport" of the page, as reported by the page. - page.on('domcontentloaded', async() => { + page.on('domcontentloaded', async () => { const failures = await page.evaluate(() => { return window.testsPromiseInfo.promise; }); diff --git a/tsconfig.json b/tsconfig.json index d0262d2..42c165d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,15 +11,16 @@ "include": [ "src/**/*.ts", "src/**/*.js", + "build/**/*.js", //"examples/**/*.js", - //"test/**/*.js", + "test/**/*.js", //"build/**/*.js", //".eslintrc.cjs", - //"*.js", + "*.js", //"test/tests/**/*.html", ], "exclude": [ - "examples/3rdparty/**/*.js", + "examples/**/*.js", "test/mocha.js", ], } \ No newline at end of file