muigui 0.0.21 → 0.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/0.x/muigui.js +5 -1
  2. package/dist/0.x/muigui.js.map +1 -1
  3. package/dist/0.x/muigui.min.js +1 -1
  4. package/dist/0.x/muigui.min.js.map +1 -1
  5. package/dist/0.x/muigui.module.js +5 -1
  6. package/dist/0.x/muigui.module.js.map +1 -1
  7. package/dist/0.x/muigui.module.min.js +1 -1
  8. package/dist/0.x/muigui.module.min.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/controllers/Container.js +4 -0
package/dist/0.x/muigui.module.min.js CHANGED
@@ -1,2 +1,2 @@
1
- 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: #8BF;\n --range-color: #AAA;\n --invalid-color: #FF0000;\n --selected-color: rgb(255, 255, 255, 0.9);\n\n --button-bg-color: var(--value-bg-color);\n\n --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);\n --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICM0NDQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);\n --image-checkerboard: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDA0MDQwOyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PC9yZWN0PgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjODA4MDgwOyIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwJSIgaGVpZ2h0PSI1MCUiPjwvcmVjdD4KICA8cmVjdCBzdHlsZT0iZmlsbDogIzgwODA4MDsiIHg9IjUwJSIgeT0iNTAlIiB3aWR0aD0iNTAlIiBoZWlnaHQ9IjUwJSI+PC9yZWN0Pgo8L3N2Zz4=);\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 --button-image: \n linear-gradient(\n rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.2)\n );\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: #458; /*#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 --button-image: linear-gradient(\n rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)\n );\n\n color: var(--color);\n background-color: var(--bg-color);\n\n --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);\n --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICNEREQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);\n }\n}\n\n.muigui {\n --width: 250px;\n --label-width: 45%;\n --number-width: 40%;\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 white-space: nowrap;\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/* this shouldn\'t be needed! */\n.muigui-disabled label {\n color: var(--disabled-color) \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 z-index: 1;\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: 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; why?? */\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 content: "X";\n color: rgba(0, 0, 0, 0);\n background-color: var(--range-color);\n border-radius: 0.2em;\n width: 1.25em;\n margin-right: 0.25em;\n height: 1.25em; /*var(--line-height);*/\n display: inline-grid;\n place-content: center start;\n pointer-events: none;\n}\n.muigui-open>button>label::before {\n background-image: var(--image-open);\n}\n.muigui-closed>button>label::before {\n background-image: var(--image-closed);\n}\n\n.muigui-open>.muigui-open-container {\n transition: all 0.1s ease-out;\n overflow: auto;\n height: 100%;\n}\n.muigui-closed>.muigui-open-container {\n transition: all 0.1s ease-out;\n overflow: hidden;\n min-height: 0;\n}\n.muigui-open>.muigui-open-container>* {\n transition: all 0.1s ease-out;\n margin-top: 0px;\n}\n.muigui-closed>.muigui-open-container>* {\n transition: all 0.1s ease-out;\n margin-top: -1000%;\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-closed .muigui-pop-down-bottom {\n max-height: 0;\n}\n\n.muigui-value .muigui-pop-down-bottom {\n margin: 0;\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 background-image: var(--image-checkerboard);\n background-size: 10px 10px;\n background-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\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 padding: 2px 0 2px 0;\n}\n.muigui-button button {\n border: none;\n color: var(--value-color);\n background-color: var(--button-bg-color);\n background-image: var(--button-image);\n cursor: pointer;\n place-content: center center;\n height: var(--line-height);\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) - 6px) / -2);\n width: calc(var(--line-height) - 6px);\n height: calc(var(--line-height) - 6px);\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:{include:["default"],css:"\n "},float:{include:["default"],css:"\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"},form:{include:[],css:"\n .muigui {\n --width: 100%;\n --label-width: 45%;\n --number-width: 40%;\n }\n .muigui-root>button {\n display: none;\n }\n .muigui-controller {\n margin-top: 1em;\n }\n .muigui-label-controller {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n margin-top: 1em;\n }\n .muigui-label-controller:has(.muigui-checkbox) {\n flex-direction: row;\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-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 "},none:{include:[],css:""}}};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 m(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 p{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 p{#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 b 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})}name(t){return this.#l.textContent=t,this}setOptions(t){l(this.#u,t);const{name:e}=this.#u;return this.#l.textContent=e,this}}function f(t,e){if(t.length!==e.length)return!1;for(let n=0;n<t.length;++n)if(t[n]!==e[n])return!1;return!0}class v extends p{#c;#h;#d(t){const e=!f(t,this.#c);return e&&function(t,e){e.length=t.length;for(let n=0;n<t.length;++n)e[n]=t[n]}(t,this.#c),e}#m(){let t=!0;return function(e){let n=t;return t=!1,n||(n=!f(e,this.#c)),n}}#p(t){let e=!1;for(const n in t)t[n]!==this.#c[n]&&(e=!0,this.#c[n]=t[n]);return e}#g(t){const e=t!==this.#c;return this.#c=t,e}#b(t){return Array.isArray(t)?(this.#c=[],this.#d.bind(this)):r(t)?(this.#c=new t.constructor(t),this.#m(this)):"object"==typeof t?(this.#c={},this.#p.bind(this)):this.#g.bind(this)}updateDisplayIfNeeded(t,e){this.#h=this.#h||this.#b(t),(this.#h(t)||e)&&this.updateDisplay(t)}setOptions(){return this}}class x extends v{#f;constructor(t,n){const i=e("input",{type:"checkbox",id:n,onInput:()=>{t.setValue(i.checked)},onChange:()=>{t.setFinalValue(i.checked)}});super(e("label",{},[i])),this.#f=i}updateDisplay(t){this.#f.checked=t}}const w=[],y=new Set;let k,E;function I(){k=void 0,E=!0;for(const t of w)y.has(t)||t();E=!1,y.size&&(E?$():(y.forEach((t=>{i(w,t)})),y.clear())),$()}function $(){!k&&w.length&&(k=requestAnimationFrame(I))}let C=0;function M(){return"muigui-"+ ++C}class S extends p{constructor(t=""){super(e("div",{className:"muigui-value"})),t&&this.domElement.classList.add(t)}}class V extends g{#v;#x;constructor(t="",n=""){super("muigui-label-controller"),this.#v=M(),this.#x=e("label",{for:this.#v}),this.domElement.appendChild(this.#x),this.pushSubView(new S(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 V{#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<t.length;++i)n||=e[i]!==t[i],e[i]=t[i];else{for(const i of Object.keys(t))n||=e[i]!==t[i];Object.assign(e,t)}}else n=this.#s[this.#a]!==t,this.#s[this.#a]=t;return this.updateDisplay(e),n&&this.emitChange(this.getValue(),this.#s,this.#a),n}setValue(t){this.#E(t)}setFinalValue(t){return this.#E(t,!0)&&this.emitFinalChange(this.getValue(),this.#s,this.#a),this}updateDisplay(t){const e=this.getValue();for(const n of this.#e)n.updateDisplayIfNeeded(e,t);return this}setOptions(t){for(const e of this.#e)e.setOptions(t);return this.updateDisplay(),this}getValue(){return this.#s[this.#a]}value(t){return this.setValue(t),this}reset(){return this.setValue(this.#w),this}listen(t=!0){var e;return this.#k||(this.#k=this.updateDisplay.bind(this)),t?this.#y||(this.#y=!0,e=this.#k,w.push(e),$()):this.#y&&(this.#y=!1,function(t){y.set(t);const e=w.indexOf(t);e>=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 A={to:t=>t,from:t=>[!0,t]},j={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 F extends v{#I;#$;#C;#M;#u={step:.01,converters:j,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.#S(i,!0)},onChange:()=>{this.#S(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),[h,d]=this.#$(c);h&&t.setValue(d)}})),this.setOptions(n)}#S(t,e){const n=parseFloat(this.domElement.value),[i,r]=this.#$(n);let s;if(i&&!Number.isNaN(n)){const{min:n,max:i}=this.#u;s=r>=n&&r<=i,this.#M=e,t(o(r,n,i))}this.domElement.classList.toggle("muigui-invalid-value",!i||!s)}updateDisplay(t){this.#M||(this.domElement.value=s(t,this.#I,this.#C)),this.#M=!1}setOptions(t){l(this.#u,t);const{step:e,converters:{to:n,from:i}}=this.#u;return this.#I=n,this.#$=i,this.#C=e,this}}class P extends D{#V;#C;constructor(t,e,n={}){super(t,e,"muigui-text-number"),this.#V=this.add(new F(this,n)),this.updateDisplay()}}class O 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 O(this,r)),this.updateDisplay()}}class T extends v{#I;#$;#C;#M;#u={step:.01,min:0,max:1,converters:A};constructor(t,n){const i=L();super(e("input",{type:"range",onInput:()=>{this.#M=!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.#$(a);l&&t.setValue(u)},onChange:()=>{this.#M=!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.#$(a);l&&t.setFinalValue(u)},onWheel:e=>{e.preventDefault();const[n,r]=this.#$(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.#M||(this.domElement.value=s(t,this.#I,this.#C)),this.#M=!1}setOptions(t){l(this.#u,t);const{step:e,min:n,max:i,converters:{to:o,from:r}}=this.#u;return this.#I=o,this.#$=r,this.#C=e,this.domElement.step=e,this.domElement.min=n,this.domElement.max=i,this}}class W extends D{constructor(t,e,n){super(t,e,"muigui-range"),this.add(new T(this,n)),this.add(new F(this,n))}}class B extends v{#I;#$;#M;#u={converters:A};constructor(t,n){const i=t.setValue.bind(t),o=t.setFinalValue.bind(t);super(e("input",{type:"text",onInput:()=>{this.#S(i,!0)},onChange:()=>{this.#S(o,!1)}})),this.setOptions(n)}#S(t,e){const[n,i]=this.#$(this.domElement.value);n&&(this.#M=e,t(i)),this.domElement.style.color=n?"":"var(--invalid-color)"}updateDisplay(t){this.#M||(this.domElement.value=this.#I(t),this.domElement.style.color=""),this.#M=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#I=e,this.#$=n,this}}class G extends D{constructor(t,e){super(t,e,"muigui-text"),this.add(new B(this)),this.updateDisplay()}}const Z=(t,e,n)=>Math.max(e,Math.min(n,t)),R=(t,e,n)=>t+(e-t)*n,J=t=>t>=0?t%1:1-t%1,Y=t=>+t.toFixed(0),Q=t=>+t.toFixed(3),_=t=>parseInt(t.substring(1,3),16)<<16|parseInt(t.substring(3,5),16)<<8|parseInt(t.substring(5,7),16),K=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),q=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)],X=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=>q(t).map((t=>Q(t/255))),it=t=>X(Array.from(t).map((t=>Math.round(Z(255*t,0,255))))),ot=t=>tt(t).map((t=>Q(t/255))),rt=t=>et(Array.from(t).map((t=>Math.round(Z(255*t,0,255))))),st=t=>Z(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(${q(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*$/,mt=t=>{const e=yt(q(t)).map((t=>Y(t)));return`hsl(${e[0]}, ${e[1]}%, ${e[2]}%)`},pt=t=>{const e=kt(tt(t)).map(((t,e)=>3===e?Q(t):Y(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*$/,bt=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\/\s*(\d+\.\d+|\d+)\s*\)\s*$/,ft=(t,e)=>(t%e+e)%e;function vt([t,e,n]){t=ft(t,360),e=Z(e/100,0,1),n=Z(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<n?6:0);break;case e:a=(n-t)/s+2;break;case n:a=(t-e)/s+4}return[a/6,l,r]}function wt([t,e,n,i]){return[...xt([t,e,n]),i]}const yt=t=>{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=Z(e,0,1),n=Z(n,0,1),[t,t+2/3,t+1/3].map((t=>R(1,Z(Math.abs(6*J(t)-3)-1,0,1),e)*n))}function It([t,e,n,i]){return[...Et([t,e,n]),i]}const $t=t=>Math.round(1e3*t)/1e3;function Ct([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($t)}function Mt([t,e,n,i]){return[...Ct([t,e,n]),i]}const St=t=>t.endsWith("a")||t.startsWith("hex8"),Vt=[{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:bt,format:"css-hsla"}];function Dt(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 Vt)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 Nt(t){return t.trim(t)}function At(t){return t.trim(t)}function jt(t){return t[1]===t[2]&&t[3]===t[4]&&t[5]===t[6]?`#${t[1]}${t[3]}${t[5]}`:t}const Ut=/^(#|)([0-9a-f]{3})$/i;function Lt(t){const e=Ut.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 Ft(t){return jt(Nt(t))}const Pt=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(", ")})`]},Ot=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(", ")})`]},Ht=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]}%)`]},zt=t=>{const e=bt.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]})`]},Tt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Wt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Bt=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=>Q(t)))]},Gt=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=>Q(t)))]},Zt=/^\s*(?:0x){0,1}([0-9a-z]{1,6})\s*$/i,Rt=/^\s*(?:0x){0,1}([0-9a-z]{1,8})\s*$/i,Jt=/^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i,Yt=/^\s*[a-f0-9]{6}\s*$/i,Qt=/^\s*#[a-f0-9]{8}\s*$/i,_t=/^\s*[a-f0-9]{8}\s*$/i,Kt={hex6:{color:{from:t=>[!0,t],to:Nt},text:{from:t=>[Jt.test(t),t.trim()],to:t=>t}},hex8:{color:{from:t=>[!0,t],to:At},text:{from:t=>[Qt.test(t),t.trim()],to:t=>t}},hex3:{color:{from:t=>[!0,Ft(t)],to:Lt},text:{from:t=>[Jt.test(t),jt(t.trim())],to:t=>t}},"hex6-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Nt(t)}`},text:{from:t=>[Yt.test(t),t.trim()],to:t=>t}},"hex8-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${At(t)}`},text:{from:t=>[_t.test(t),t.trim()],to:t=>t}},"hex3-no-hash":{color:{from:t=>[!0,Ft(t).substring(1)],to:Lt},text:{from:t=>[Yt.test(t),jt(t.trim())],to:t=>t}},"uint32-rgb":{color:{from:t=>[!0,_(t)],to:t=>`#${Math.round(t).toString(16).padStart(6,"0")}`},text:{from:t=>(t=>{const e=Zt.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,K(t)],to:t=>`#${Math.round(t).toString(16).padStart(8,"0")}`},text:{from:t=>(t=>{const e=Rt.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,q(t)],to:X},text:{from:t=>{const e=Tt.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=Wt.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:Bt,to:t=>Array.from(t).map((t=>Q(t))).join(", ")}},"float-rgba":{color:{from:t=>[!0,ot(t)],to:rt},text:{from:Gt,to:t=>Array.from(t).map((t=>Q(t))).join(", ")}},"float-hsv":{color:{from:t=>[!0,Ct(nt(t))],to:t=>Et(it(t))},text:{from:Bt,to:t=>Array.from(t).map((t=>Q(t))).join(", ")}},"float-hsva":{color:{from:t=>[!0,Mt(nt(t))],to:t=>It(it(t))},text:{from:Gt,to:t=>Array.from(t).map((t=>Q(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:${Q(t.r)}, g:${Q(t.g)}, b:${Q(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:${Q(t.r)}, g:${Q(t.g)}, b:${Q(t.b)}}, a:${Q(t.a)}}`}},"css-rgb":{color:{from:t=>[!0,ut(t)],to:t=>{const e=ct.exec(t);return X([e[1],e[2],e[3]].map((t=>parseInt(t))))}},text:{from:Pt,to:t=>Pt(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:Ot,to:t=>Ot(t)[1]}},"css-hsl":{color:{from:t=>[!0,mt(t)],to:t=>{const e=gt.exec(t),n=vt([e[1],e[2],e[3]].map((t=>parseFloat(t))));return X(n)}},text:{from:Ht,to:t=>Ht(t)[1]}},"css-hsla":{color:{from:t=>[!0,pt(t)],to:t=>{const e=bt.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:zt,to:t=>zt(t)[1]}}};class qt extends p{constructor(t,n){super(e(t,{className:n}))}}class Xt extends V{#N;constructor(t){super("muigui-canvas",t),this.#N=this.add(new qt("canvas","muigui-canvas")).domElement}get canvas(){return this.#N}listen(){return this}}class te extends v{#I;#$;#A;#M;#u={converters:A};constructor(t,n){const i=e("input",{type:"color",onInput:()=>{const[e,n]=this.#$(i.value);e&&(this.#M=!0,t.setValue(n))},onChange:()=>{const[e,n]=this.#$(i.value);e&&(this.#M=!0,t.setFinalValue(n))}});super(e("div",{},[i])),this.setOptions(n),this.#A=i}updateDisplay(t){this.#M||(this.#A.value=this.#I(t)),this.#M=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#I=e,this.#$=n,this}}class ee extends D{#j;#V;constructor(t,e,n={}){super(t,e,"muigui-color");const i=n.format||Dt(this.getValue()),{color:o,text:r}=Kt[i];this.#j=this.add(new te(this,{converters:o})),this.#V=this.add(new B(this,{converters:r})),this.updateDisplay()}setOptions(t){const{format:e}=t;if(e){const{color:t,text:n}=Kt[e];this.#j.setOptions({converters:t}),this.#V.setOptions({converters:n})}return super.setOptions(t),this}}class ne extends g{constructor(){super("muigui-divider")}}class ie 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 ie)))}get folders(){return this.#U.filter((t=>t instanceof ie))}reset(t=!0){for(const e of this.#U)e instanceof ie&&!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}#F(t){return this.domElement.appendChild(t.domElement),this.#U.push(t),t.setParent(this),t}addController(t){return this.#L.#F(t)}pushContainer(t){return this.addController(t),this.#L=t,t}popContainer(){return this.#L=this.#L.parent,this}listen(){return this.#U.forEach((t=>{t.listen()})),this}}class oe extends ie{#P;constructor(t="Controls",n="muigui-menu"){super(n),this.#P=e("label"),this.addElem(e("button",{type:"button",onClick:()=>this.toggleOpen()},[this.#P])),this.pushContainer(new ie("muigui-open-container")),this.pushContainer(new ie),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.#P.textContent=t,this}title(t){return this.name(t)}toggleOpen(){return this.open(!this.domElement.classList.contains("muigui-open")),this}}class re extends g{constructor(t){super("muigui-label"),this.text(t)}text(t){return this.domElement.textContent=t,this}}function se(){}function ae(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 le(t,{onDown:e=se,onMove:n=se,onUp:i=se}){let o;const r=function(e){const i={type:"move",...ae(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=ae(t,n);o=[i.x,i.y],e({type:"down",...i})};return t.addEventListener("pointerdown",a),function(){t.removeEventListener("pointerdown",a)}}function ue(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 ce extends v{#I;#$;#O;#H;#z;#T;#W;#B;#G;#Z;#R;#J;#Y;#Q;#u={converters:A,alpha:!1};#_;#K;constructor(t,n){super(e("div",{innerHTML:'\n<svg class="muigui-checkered-background" tabindex="0" viewBox="0 0 64 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <linearGradient data-src="muigui-color-chooser-light-dark" x1="0" x2="0" y1="0" y2="1">\n <stop stop-color="rgba(0,0,0,0)" offset="0%"/>\n <stop stop-color="#000" offset="100%"/>\n </linearGradient>\n <linearGradient data-src="muigui-color-chooser-hue">\n <stop stop-color="hsl(60 0% 100% / 1)" offset="0%"/>\n <stop stop-color="hsl(60 100% 50% / 1)" offset="100%"/>\n </linearGradient>\n\n <rect width="64" height="48" data-target="muigui-color-chooser-hue"/>\n <rect width="64" height="48" data-target="muigui-color-chooser-light-dark"/>\n <circle r="4" class="muigui-color-chooser-circle"/>\n</svg>\n<svg tabindex="0" viewBox="0 0 64 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <linearGradient data-src="muigui-color-chooser-hues" x1="0" x2="1" y1="0" y2="0">\n <stop stop-color="hsl(0,100%,50%)" offset="0%"/>\n <stop stop-color="hsl(60,100%,50%)" offset="16.666%"/>\n <stop stop-color="hsl(120,100%,50%)" offset="33.333%"/>\n <stop stop-color="hsl(180,100%,50%)" offset="50%"/>\n <stop stop-color="hsl(240,100%,50%)" offset="66.666%"/>\n <stop stop-color="hsl(300,100%,50%)" offset="83.333%"/>\n <stop stop-color="hsl(360,100%,50%)" offset="100%"/>\n </linearGradient>\n <rect y="1" width="64" height="4" data-target="muigui-color-chooser-hues"/>\n <g class="muigui-color-chooser-hue-cursor">\n <rect x="-3" width="6" height="6" />\n </g>\n</svg>\n<svg class="muigui-checkered-background" tabindex="0" viewBox="0 0 64 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <linearGradient data-src="muigui-color-chooser-alpha" x1="0" x2="1" y1="0" y2="0">\n <stop stop-color="hsla(0,100%,100%,0)" offset="0%"/>\n <stop stop-color="hsla(0,100%,100%,1)" offset="100%"/>\n </linearGradient>\n <rect y="1" width="64" height="4" data-target="muigui-color-chooser-alpha"/>\n <g class="muigui-color-chooser-alpha-cursor">\n <rect x="-3" width="6" height="6" />\n </g>\n</svg>\n',className:"muigui-no-scroll"})),this.#O=this.domElement.children[0],this.#z=this.domElement.children[1],this.#B=this.domElement.children[2],ue(this.#O),ue(this.#z),ue(this.#B),this.#H=this.$(".muigui-color-chooser-circle"),this.#T=this.$("[data-src=muigui-color-chooser-hue]"),this.#W=this.$(".muigui-color-chooser-hue-cursor"),this.#G=this.$("[data-src=muigui-color-chooser-alpha]"),this.#Z=this.$(".muigui-color-chooser-alpha-cursor");const i=e=>{const n=o(e.nx,0,1),i=o(e.ny,0,1);this.#R[1]=n,this.#R[2]=1-i,this.#J=!0,this.#Q=!0;const[r,s]=this.#$(this.#_(this.#R));r&&t.setValue(s)},r=e=>{const n=o(e.nx,0,1);this.#R[0]=n,this.#Y=!0,this.#Q=!0;const[i,r]=this.#$(this.#_(this.#R));i&&t.setValue(r)},s=e=>{const n=o(e.nx,0,1);this.#R[3]=n,this.#J=!0,this.#Y=!0;const[i,r]=this.#$(this.#_(this.#R));i&&t.setValue(r)};le(this.#O,{onDown:i,onMove:i}),le(this.#z,{onDown:r,onMove:r}),le(this.#B,{onDown:s,onMove:s}),this.setOptions(n)}updateDisplay(t){this.#R||(this.#R=this.#K(this.#I(t)));{const[e,n,i,o=1]=this.#K(this.#I(t));this.#J||(this.#R[0]=n>.001&&i>.001?e:this.#R[0]),this.#Y||(this.#R[1]=n,this.#R[2]=i),this.#Q||(this.#R[3]=o)}{const[t,e,n,i]=this.#R,[o,r,s]=wt(It(this.#R));this.#J||this.#W.setAttribute("transform",`translate(${64*t}, 0)`),this.#T.children[0].setAttribute("stop-color",`hsl(${360*o} 0% 100% / ${i})`),this.#T.children[1].setAttribute("stop-color",`hsl(${360*o} 100% 50% / ${i})`),this.#Q||this.#Z.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.#Y||(this.#H.setAttribute("cx",""+64*e),this.#H.setAttribute("cy",""+48*(1-n)))}this.#J=!1,this.#Y=!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.#_=i?t=>rt(It(t)):t=>it(Et(t)),this.#K=i?t=>Mt(ot(t)):t=>Ct(nt(t)),this.#I=e,this.#$=n,this}}class he extends D{#q;#X;#f;#tt;#u={open:!1};constructor(t,n,i={}){super(t,n,"muigui-pop-down-controller"),this.#q=this.add(new qt("div","muigui-pop-down-top"));const o=this.#q.addElem(e("input",{type:"checkbox",onChange:()=>{this.#u.open=o.checked,this.updateDisplay()}}));this.#f=o,this.#X=this.#q.add(new qt("div","muigui-pop-down-values"));const r=new qt("div","muigui-pop-down-bottom muigui-open-container");this.#tt=new qt("div"),r.add(this.#tt),this.add(r),this.setOptions(i)}setKnobColor(t){this.#f&&(this.#f.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.#X.add(t)}addBottom(t){return this.#tt.add(t)}}class de extends he{#j;#V;#I;constructor(t,e,n={}){super(t,e,"muigui-color-chooser");const i=n.format||Dt(this.getValue()),{color:o,text:r}=Kt[i];this.#I=o.to,this.#V=new B(this,{converters:r,alpha:St(i)}),this.#j=new ce(this,{converters:o,alpha:St(i)}),this.addTop(this.#V),this.addBottom(this.#j),this.___setKnobHelper=!0,this.updateDisplay()}#et(){if(this.#I){const t=this.#I(this.getValue()),e=9===t.length?t.substring(7,9):"FF",n=yt(q(t));n[2]=(n[2]+50)%100;const i=X(vt(n));this.setKnobColor(`${t.substring(0,7)}${e}`,i)}}updateDisplay(){super.updateDisplay(),this.___setKnobHelper&&this.#et()}setOptions(t){return super.setOptions(t),this}}function me(t){return function(t){return t.replace(/(.)([A-Z][a-z]+)/g,"$1_$2").replace(/([a-z0-9])([A-Z])/g,"$1_$2").toLowerCase()}(t.toString()).replaceAll("_"," ")}class pe extends oe{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});if(i&&i.keyValues)return new z(t,e,{keyValues:i.keyValues});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 W(t,e,{min:i,max:o,...r&&{step:r}})}return 0===n.length?new P(t,e,...n):new W(t,e,...n);case"boolean":return new N(t,e,...n);case"function":return new b(t,e,...n);case"string":return new G(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).name(me(e));return this.addController(i)}addCanvas(t){return this.addController(new Xt(t))}addColor(t,e,n={}){const i=t[e];return St(n.format||Dt(i))?this.addController(new de(t,e,n)).name(me(e)):this.addController(new ee(t,e,n)).name(me(e))}addDivider(){return this.addController(new ne)}addFolder(t){return this.addController(new pe(t))}addLabel(t){return this.addController(new re(t))}addButton(t,e){const n={fn:e};return this.add(n,"fn").name(me(t))}}class ge extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}}customElements.define("muigui-element",ge);const be=new CSSStyleSheet,fe=new CSSStyleSheet;function ve(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 xe=ve(be),we=ve(fe);function ye(e){const{include:n,css:i}=t.themes[e];return`${n.map((e=>t[e])).join("\n")} : css.default}\n${i||""}`}class ke extends pe{static converters=U;static mapRange=u;static makeRangeConverters=c;static makeRangeOptions=h;static makeMinMaxPair=m;#nt=new CSSStyleSheet;constructor(n={}){super("Controls","muigui-root"),n instanceof HTMLElement&&(n={parent:n});const{autoPlace:i=!0,width:o,title:r="Controls"}=n;let{parent:s}=n;if(o&&(this.domElement.style.width=/^\d+$/.test(o)?`${o}px`:o),void 0===s&&i&&(s=document.body,this.domElement.classList.add("muigui-auto-place")),s){const t=e("muigui-element");t.shadowRoot.adoptedStyleSheets=[this.#nt,be,fe],t.shadow.appendChild(this.domElement),s.appendChild(t)}r&&this.title(r),this.#nt.replaceSync(t.default),this.domElement.classList.add("muigui","muigui-colors")}setStyle(t){this.#nt.replace(t)}static setBaseStyles(t){xe(t)}static getBaseStyleSheet(){return be}static setUserStyles(t){we(t)}static getUserStyleSheet(){return fe}setTheme(t){this.setStyle(ye(t))}static setTheme(t){ke.setBaseStyles(ye(t))}}function Ee(){}const Ie={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};function $e(t,{onDown:e=Ee,onUp:n=Ee}){const i=function(t){const i=t.shiftKey?10:1,[o,r]=(Ie[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 Ce(t,e=""){if(!t)throw new Error(e)}function Me(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 Se(t,e,n,i,o){Ce(Math.abs(i-o)<=2*Math.PI),Ce(i>=-Math.PI&&i<=2*Math.PI),Ce(i<=o),Ce(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]=Me(t,e,n,i,o,r),[u,c]=Me(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 Ve=t=>a(t+Math.PI,2*Math.PI)-Math.PI;class De extends v{#it;#ot;#rt;#st;#u={step:1,min:-180,max:180,dirMin:-Math.PI,dirMax:Math.PI,wrap:void 0,converters:A};constructor(t,n={}){const i=L();super(e("div",{className:"muigui-direction muigui-no-scroll",innerHTML:'\n<svg tabindex="0" viewBox="-32 -32 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n \x3c!--<circle id="muigui-outline" cx="0" cy="0" r="28.871" class="muigui-direction-circle"/>--\x3e\n <path id="muigui-range" class="muigui-direction-range" />\n <g id="muigui-arrow">\n <g transform="translate(-32, -32)">\n <path d="M31.029,33.883c-1.058,-0.007 -1.916,-0.868 -1.916,-1.928c0,-1.065 0.864,-1.929 1.929,-1.929c0.204,0 0.401,0.032 0.586,0.091l14.729,-0l0,-2.585l12.166,4.468l-12.166,4.468l0,-2.585l-15.315,0l-0.013,0Z" class="muigui-direction-arrow"/>\n </g>\n </g>\n</svg>\n',onWheel:e=>{e.preventDefault();const{min:n,max:r,step:l}=this.#u,u=i(e,l);let c=this.#rt+u;this.#st&&(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,m=o((Ve(h-d)-Ve(a-d))/(l-a),0,1),p=s(n+(i-n)*m,(t=>t),r);t.setValue(p)};le(this.domElement,{onDown:r,onMove:r}),$e(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#rt+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),this.#it=this.$("#muigui-arrow"),this.#ot=this.$("#muigui-range"),this.setOptions(n)}updateDisplay(t){this.#rt=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.#it.style.transform=`rotate(${o}rad)`}setOptions(t){l(this.#u,t);const{dirMin:e,dirMax:n,wrap:i}=this.#u;this.#st=void 0!==i?i:Math.abs(e-n)>=2*Math.PI-Number.EPSILON;const[o,r]=e<n?[e,n]:[n,e];this.#ot.setAttribute("d",Se(0,0,28.87,o,r))}}class Ne extends he{#u;constructor(t,e,n){super(t,e,"muigui-direction"),this.#u=n,this.addTop(new F(this,A)),this.addBottom(new De(this,n)),this.updateDisplay()}}class Ae extends v{#D;constructor(t,n,i=3){const o=[],r=M();super(e("div",{},n.map((([n,i],a)=>(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<this.domElement.children.length;++t)this.domElement.children[t].children[0].checked=t===e}cols(t){this.domElement.style.gridTemplateColumns=`repeat(${t}, 1fr)`}}class je 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 Ae(this,s,r)),this.updateDisplay()}}function Ue(t,e){new ResizeObserver((()=>{e({rect:t.getBoundingClientRect(),elem:t})})).observe(t)}function Le(t,e,n,i){Ue(t,(({rect:o})=>{const{width:r,height:s}=o;t.setAttribute("viewBox",`-${r*e} -${s*n} ${r} ${s}`),i({elem:t,rect:o})}))}function Fe(t,e,n,i,o,r){const a=[];t<i&&(t+=s(i-t,(t=>t),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 Pe extends v{#at;#lt;#ut;#ct;#ht;#dt;#mt;#pt;#gt;#rt;#bt;#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<svg tabindex="0" viewBox="-32 -32 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <g id="muigui-orientation">\n <g id="muigui-origin">\n <g transform="translate(0, 4)">\n <path id="muigui-ticks" class="muigui-ticks"/>\n <path id="muigui-thicks" class="muigui-thicks"/>\n </g>\n <g transform="translate(0, 14)">\n <g id="muigui-number-orientation">\n <g id="muigui-numbers" transform="translate(0, -3)" class="muigui-svg-text"/>\n </g>\n </g>\n </g>\n <linearGradient id="muigui-bg-to-transparent">\n <stop stop-color="var(--value-bg-color)" offset="0%"/>\n <stop stop-color="var(--value-bg-color)" stop-opacity="0" offset="100%"/>\n </linearGradient>\n <linearGradient id="muigui-transparent-to-bg">\n <stop stop-color="var(--value-bg-color)" stop-opacity="0" offset="0%"/>\n <stop stop-color="var(--value-bg-color)" offset="100%"/> \n </linearGradient>\n \x3c!--<circle cx="0" cy="2" r="2" class="muigui-mark"/>--\x3e\n \x3c!--<rect x="-1" y="0" width="2" height="10" class="muigui-mark"/>--\x3e\n <path d="M0 4L-2 0L2 0" class="muigui-mark"/>\n </g>\n <rect id="muigui-left-grad" x="0" y="0" width="20" height="20" fill="url(#muigui-bg-to-transparent)"/>\n <rect id="muigui-right-grad" x="48" y="0" width="20" height="20" fill="url(#muigui-transparent-to-bg)"/>\n</svg>\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.#rt+l,(t=>t),a),n,r);t.setValue(u)}})),this.#at=this.$("svg"),this.#lt=this.$("#muigui-origin"),this.#ut=this.$("#muigui-ticks"),this.#ct=this.$("#muigui-thicks"),this.#ht=this.$("#muigui-numbers"),this.#dt=this.$("#muigui-left-grad"),this.#mt=this.$("#muigui-right-grad"),this.setOptions(n),le(this.domElement,{onDown:()=>{r=this.#rt},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)}}),$e(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#rt+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),Le(this.#at,.5,0,(({rect:{width:t}})=>{this.#dt.setAttribute("x",-t/2),this.#mt.setAttribute("x",t/2-20),this.#bt=function(t){const e=t.innerHTML;t.innerHTML="<text>- </text>";const n=t.querySelector("text").getComputedTextLength();return t.innerHTML=e,n}(this.#ht),this.#pt=t,this.#ft()}))}#ft(){if(!this.#pt||void 0===this.#rt)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.#pt/u),d=this.#rt/l,m=Math.round(d-h),p=m*u,g=(m+2*h)*u,b=e?n*u/l:p,f=e?i*u/l:g,v=""===t(1)?10:5;a>1&&this.#ut.setAttribute("d",Fe(p,g,u/a,b,f,v*r)),this.#ct.style.stroke=c,this.#ct.setAttribute("d",Fe(p,g,u,b,f,v)),this.#ht.innerHTML=function(t,e,n,i,o,r,a,l){const u=[];t<r&&(t+=s(r-t,(t=>t),n)),e=Math.min(e,a);const c=Math.max(0,-Math.log10(i));for(let r=t;r<=e;r+=n)u.push(`<text text-anchor="middle" dominant-baseline="hanging" x="${r>=0?r:r-o/2}" y="0">${h=r/n*i,l(h.toFixed(c))}</text>`);var h;return u.join("\n")}(p,g,u,l,this.#bt,b,f,t),this.#lt.setAttribute("transform",`translate(${-this.#rt*u/l} 0)`),this.#at.classList.toggle("muigui-slider-up","up"===o)}updateDisplay(t){this.#rt=t,this.#ft()}setOptions(t){return l(this.#u,t),this}}class Oe extends D{constructor(t,e,n={}){super(t,e,"muigui-slider"),this.add(new Pe(this,n)),this.add(new F(this,n)),this.updateDisplay()}}class He extends v{#at;#it;#H;#rt=[];constructor(t){super(e("div",{innerHTML:'\n<svg tabindex="0" viewBox="-32 -32 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <path d="m-3200,0L3200,0M0,-3200L0,3200" class="muigui-vec2-axis"/>\n <path id="muigui-arrow" d="" class="muigui-vec2-line"/>\n <g id="muigui-circle" transform="translate(0, 0)">\n <circle r="3" class="muigui-vec2-axis"/>\n </g>\n</svg>\n',className:"muigui-no-scroll"}));const n=e=>{const{width:n,height:i}=this.#at.getBoundingClientRect(),o=2*e.nx-1,r=2*e.ny-1;t.setValue([o*n*.5,r*i*.5])};le(this.domElement,{onDown:n,onMove:n}),this.#at=this.$("svg"),this.#it=this.$("#muigui-arrow"),this.#H=this.$("#muigui-circle"),Le(this.#at,.5,.5,(()=>this.#vt))}#vt(){const[t,e]=this.#rt;this.#it.setAttribute("d",`M0,0L${t},${e}`),this.#H.setAttribute("transform",`translate(${t}, ${e})`)}updateDisplay(t){this.#rt[0]=t[0],this.#rt[1]=t[1],this.#vt()}}class ze extends he{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 F(n(0),{converters:{to:t=>t[0],from:j.from}})),this.addTop(new F(n(1),{converters:{to:t=>t[1],from:j.from}})),this.addBottom(new He(this)),this.updateDisplay()}}const Te={main:"#ddd"},We={main:"#333"},Be=window.matchMedia("(prefers-color-scheme: dark)");let Ge,Ze;function Re(){Ze=Be.matches,Ge=Ze?Te:We}Be.addEventListener("change",Re),Re();const Je={graph:function(t,e,{min:n=-1,max:i=1,interval:o=16,color:r}){const s=t.getContext("2d");setInterval((function(){const{width:o,height:a}=t;s.clearRect(0,0,o,a),s.beginPath();const l=i-n;for(let t=0;t<e.length;++t){const i=t*o/e.length,r=(e[t]-n)*a/l;s.lineTo(i,r)}s.strokeStyle=r||Ge.main,s.stroke()}),o)},monitor:function(t,e,n,{interval:i=200}={}){setInterval((()=>{t.text(JSON.stringify(e[n],null,2))}),i)}};export{de as ColorChooser,Ne as Direction,je as RadioGrid,W as Range,z as Select,Oe as Slider,P as TextNumber,ze as Vec2,ke as default,Je as helpers};
1
+ 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: #8BF;\n --range-color: #AAA;\n --invalid-color: #FF0000;\n --selected-color: rgb(255, 255, 255, 0.9);\n\n --button-bg-color: var(--value-bg-color);\n\n --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);\n --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDQ0OyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICM0NDQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);\n --image-checkerboard: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjNDA0MDQwOyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSI+PC9yZWN0PgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjODA4MDgwOyIgeD0iMCIgeT0iMCIgd2lkdGg9IjUwJSIgaGVpZ2h0PSI1MCUiPjwvcmVjdD4KICA8cmVjdCBzdHlsZT0iZmlsbDogIzgwODA4MDsiIHg9IjUwJSIgeT0iNTAlIiB3aWR0aD0iNTAlIiBoZWlnaHQ9IjUwJSI+PC9yZWN0Pgo8L3N2Zz4=);\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 --button-image: \n linear-gradient(\n rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.2)\n );\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: #458; /*#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 --button-image: linear-gradient(\n rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)\n );\n\n color: var(--color);\n background-color: var(--bg-color);\n\n --image-closed: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iMjAlIiB5PSI0NSUiIHdpZHRoPSI2MCUiIGhlaWdodD0iMTAlIj48L3JlY3Q+Cjwvc3ZnPg==);\n --image-open: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHN0eWxlPSJmaWxsOiAjREREOyIgeD0iNDUlIiB5PSIyMCUiIHdpZHRoPSIxMCUiIGhlaWdodD0iNjAlIj48L3JlY3Q+CiAgPHJlY3Qgc3R5bGU9ImZpbGw6ICNEREQ7IiB4PSIyMCUiIHk9IjQ1JSIgd2lkdGg9IjYwJSIgaGVpZ2h0PSIxMCUiPjwvcmVjdD4KPC9zdmc+);\n }\n}\n\n.muigui {\n --width: 250px;\n --label-width: 45%;\n --number-width: 40%;\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 white-space: nowrap;\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/* this shouldn\'t be needed! */\n.muigui-disabled label {\n color: var(--disabled-color) \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 z-index: 1;\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: 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; why?? */\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 content: "X";\n color: rgba(0, 0, 0, 0);\n background-color: var(--range-color);\n border-radius: 0.2em;\n width: 1.25em;\n margin-right: 0.25em;\n height: 1.25em; /*var(--line-height);*/\n display: inline-grid;\n place-content: center start;\n pointer-events: none;\n}\n.muigui-open>button>label::before {\n background-image: var(--image-open);\n}\n.muigui-closed>button>label::before {\n background-image: var(--image-closed);\n}\n\n.muigui-open>.muigui-open-container {\n transition: all 0.1s ease-out;\n overflow: auto;\n height: 100%;\n}\n.muigui-closed>.muigui-open-container {\n transition: all 0.1s ease-out;\n overflow: hidden;\n min-height: 0;\n}\n.muigui-open>.muigui-open-container>* {\n transition: all 0.1s ease-out;\n margin-top: 0px;\n}\n.muigui-closed>.muigui-open-container>* {\n transition: all 0.1s ease-out;\n margin-top: -1000%;\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-closed .muigui-pop-down-bottom {\n max-height: 0;\n}\n\n.muigui-value .muigui-pop-down-bottom {\n margin: 0;\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 background-image: var(--image-checkerboard);\n background-size: 10px 10px;\n background-position: 0 0, 0 5px, 5px -5px, -5px 0px;\n\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 padding: 2px 0 2px 0;\n}\n.muigui-button button {\n border: none;\n color: var(--value-color);\n background-color: var(--button-bg-color);\n background-image: var(--button-image);\n cursor: pointer;\n place-content: center center;\n height: var(--line-height);\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) - 6px) / -2);\n width: calc(var(--line-height) - 6px);\n height: calc(var(--line-height) - 6px);\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:{include:["default"],css:"\n "},float:{include:["default"],css:"\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"},form:{include:[],css:"\n .muigui {\n --width: 100%;\n --label-width: 45%;\n --number-width: 40%;\n }\n .muigui-root>button {\n display: none;\n }\n .muigui-controller {\n margin-top: 1em;\n }\n .muigui-label-controller {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n margin-top: 1em;\n }\n .muigui-label-controller:has(.muigui-checkbox) {\n flex-direction: row;\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-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 "},none:{include:[],css:""}}};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 m(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 p{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 p{#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 b 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})}name(t){return this.#l.textContent=t,this}setOptions(t){l(this.#u,t);const{name:e}=this.#u;return this.#l.textContent=e,this}}function f(t,e){if(t.length!==e.length)return!1;for(let n=0;n<t.length;++n)if(t[n]!==e[n])return!1;return!0}class v extends p{#c;#h;#d(t){const e=!f(t,this.#c);return e&&function(t,e){e.length=t.length;for(let n=0;n<t.length;++n)e[n]=t[n]}(t,this.#c),e}#m(){let t=!0;return function(e){let n=t;return t=!1,n||(n=!f(e,this.#c)),n}}#p(t){let e=!1;for(const n in t)t[n]!==this.#c[n]&&(e=!0,this.#c[n]=t[n]);return e}#g(t){const e=t!==this.#c;return this.#c=t,e}#b(t){return Array.isArray(t)?(this.#c=[],this.#d.bind(this)):r(t)?(this.#c=new t.constructor(t),this.#m(this)):"object"==typeof t?(this.#c={},this.#p.bind(this)):this.#g.bind(this)}updateDisplayIfNeeded(t,e){this.#h=this.#h||this.#b(t),(this.#h(t)||e)&&this.updateDisplay(t)}setOptions(){return this}}class x extends v{#f;constructor(t,n){const i=e("input",{type:"checkbox",id:n,onInput:()=>{t.setValue(i.checked)},onChange:()=>{t.setFinalValue(i.checked)}});super(e("label",{},[i])),this.#f=i}updateDisplay(t){this.#f.checked=t}}const w=[],y=new Set;let k,E;function I(){k=void 0,E=!0;for(const t of w)y.has(t)||t();E=!1,y.size&&(E?$():(y.forEach((t=>{i(w,t)})),y.clear())),$()}function $(){!k&&w.length&&(k=requestAnimationFrame(I))}let C=0;function M(){return"muigui-"+ ++C}class S extends p{constructor(t=""){super(e("div",{className:"muigui-value"})),t&&this.domElement.classList.add(t)}}class V extends g{#v;#x;constructor(t="",n=""){super("muigui-label-controller"),this.#v=M(),this.#x=e("label",{for:this.#v}),this.domElement.appendChild(this.#x),this.pushSubView(new S(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 V{#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<t.length;++i)n||=e[i]!==t[i],e[i]=t[i];else{for(const i of Object.keys(t))n||=e[i]!==t[i];Object.assign(e,t)}}else n=this.#s[this.#a]!==t,this.#s[this.#a]=t;return this.updateDisplay(e),n&&this.emitChange(this.getValue(),this.#s,this.#a),n}setValue(t){this.#E(t)}setFinalValue(t){return this.#E(t,!0)&&this.emitFinalChange(this.getValue(),this.#s,this.#a),this}updateDisplay(t){const e=this.getValue();for(const n of this.#e)n.updateDisplayIfNeeded(e,t);return this}setOptions(t){for(const e of this.#e)e.setOptions(t);return this.updateDisplay(),this}getValue(){return this.#s[this.#a]}value(t){return this.setValue(t),this}reset(){return this.setValue(this.#w),this}listen(t=!0){var e;return this.#k||(this.#k=this.updateDisplay.bind(this)),t?this.#y||(this.#y=!0,e=this.#k,w.push(e),$()):this.#y&&(this.#y=!1,function(t){y.set(t);const e=w.indexOf(t);e>=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 A={to:t=>t,from:t=>[!0,t]},j={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 F extends v{#I;#$;#C;#M;#u={step:.01,converters:j,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.#S(i,!0)},onChange:()=>{this.#S(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),[h,d]=this.#$(c);h&&t.setValue(d)}})),this.setOptions(n)}#S(t,e){const n=parseFloat(this.domElement.value),[i,r]=this.#$(n);let s;if(i&&!Number.isNaN(n)){const{min:n,max:i}=this.#u;s=r>=n&&r<=i,this.#M=e,t(o(r,n,i))}this.domElement.classList.toggle("muigui-invalid-value",!i||!s)}updateDisplay(t){this.#M||(this.domElement.value=s(t,this.#I,this.#C)),this.#M=!1}setOptions(t){l(this.#u,t);const{step:e,converters:{to:n,from:i}}=this.#u;return this.#I=n,this.#$=i,this.#C=e,this}}class P extends D{#V;#C;constructor(t,e,n={}){super(t,e,"muigui-text-number"),this.#V=this.add(new F(this,n)),this.updateDisplay()}}class O 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 O(this,r)),this.updateDisplay()}}class T extends v{#I;#$;#C;#M;#u={step:.01,min:0,max:1,converters:A};constructor(t,n){const i=L();super(e("input",{type:"range",onInput:()=>{this.#M=!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.#$(a);l&&t.setValue(u)},onChange:()=>{this.#M=!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.#$(a);l&&t.setFinalValue(u)},onWheel:e=>{e.preventDefault();const[n,r]=this.#$(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.#M||(this.domElement.value=s(t,this.#I,this.#C)),this.#M=!1}setOptions(t){l(this.#u,t);const{step:e,min:n,max:i,converters:{to:o,from:r}}=this.#u;return this.#I=o,this.#$=r,this.#C=e,this.domElement.step=e,this.domElement.min=n,this.domElement.max=i,this}}class W extends D{constructor(t,e,n){super(t,e,"muigui-range"),this.add(new T(this,n)),this.add(new F(this,n))}}class B extends v{#I;#$;#M;#u={converters:A};constructor(t,n){const i=t.setValue.bind(t),o=t.setFinalValue.bind(t);super(e("input",{type:"text",onInput:()=>{this.#S(i,!0)},onChange:()=>{this.#S(o,!1)}})),this.setOptions(n)}#S(t,e){const[n,i]=this.#$(this.domElement.value);n&&(this.#M=e,t(i)),this.domElement.style.color=n?"":"var(--invalid-color)"}updateDisplay(t){this.#M||(this.domElement.value=this.#I(t),this.domElement.style.color=""),this.#M=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#I=e,this.#$=n,this}}class G extends D{constructor(t,e){super(t,e,"muigui-text"),this.add(new B(this)),this.updateDisplay()}}const Z=(t,e,n)=>Math.max(e,Math.min(n,t)),R=(t,e,n)=>t+(e-t)*n,J=t=>t>=0?t%1:1-t%1,Y=t=>+t.toFixed(0),Q=t=>+t.toFixed(3),_=t=>parseInt(t.substring(1,3),16)<<16|parseInt(t.substring(3,5),16)<<8|parseInt(t.substring(5,7),16),K=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),q=t=>[parseInt(t.substring(1,3),16),parseInt(t.substring(3,5),16),parseInt(t.substring(5,7),16)],X=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=>q(t).map((t=>Q(t/255))),it=t=>X(Array.from(t).map((t=>Math.round(Z(255*t,0,255))))),ot=t=>tt(t).map((t=>Q(t/255))),rt=t=>et(Array.from(t).map((t=>Math.round(Z(255*t,0,255))))),st=t=>Z(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(${q(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*$/,mt=t=>{const e=yt(q(t)).map((t=>Y(t)));return`hsl(${e[0]}, ${e[1]}%, ${e[2]}%)`},pt=t=>{const e=kt(tt(t)).map(((t,e)=>3===e?Q(t):Y(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*$/,bt=/^\s*hsl\(\s*(\d+)(?:deg|)\s*(?:,|)\s*(\d+)%\s*(?:,|)\s*(\d+)%\s*\/\s*(\d+\.\d+|\d+)\s*\)\s*$/,ft=(t,e)=>(t%e+e)%e;function vt([t,e,n]){t=ft(t,360),e=Z(e/100,0,1),n=Z(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<n?6:0);break;case e:a=(n-t)/s+2;break;case n:a=(t-e)/s+4}return[a/6,l,r]}function wt([t,e,n,i]){return[...xt([t,e,n]),i]}const yt=t=>{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=Z(e,0,1),n=Z(n,0,1),[t,t+2/3,t+1/3].map((t=>R(1,Z(Math.abs(6*J(t)-3)-1,0,1),e)*n))}function It([t,e,n,i]){return[...Et([t,e,n]),i]}const $t=t=>Math.round(1e3*t)/1e3;function Ct([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($t)}function Mt([t,e,n,i]){return[...Ct([t,e,n]),i]}const St=t=>t.endsWith("a")||t.startsWith("hex8"),Vt=[{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:bt,format:"css-hsla"}];function Dt(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 Vt)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 Nt(t){return t.trim(t)}function At(t){return t.trim(t)}function jt(t){return t[1]===t[2]&&t[3]===t[4]&&t[5]===t[6]?`#${t[1]}${t[3]}${t[5]}`:t}const Ut=/^(#|)([0-9a-f]{3})$/i;function Lt(t){const e=Ut.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 Ft(t){return jt(Nt(t))}const Pt=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(", ")})`]},Ot=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(", ")})`]},Ht=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]}%)`]},zt=t=>{const e=bt.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]})`]},Tt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Wt=/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/,Bt=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=>Q(t)))]},Gt=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=>Q(t)))]},Zt=/^\s*(?:0x){0,1}([0-9a-z]{1,6})\s*$/i,Rt=/^\s*(?:0x){0,1}([0-9a-z]{1,8})\s*$/i,Jt=/^\s*#[a-f0-9]{6}\s*$|^\s*#[a-f0-9]{3}\s*$/i,Yt=/^\s*[a-f0-9]{6}\s*$/i,Qt=/^\s*#[a-f0-9]{8}\s*$/i,_t=/^\s*[a-f0-9]{8}\s*$/i,Kt={hex6:{color:{from:t=>[!0,t],to:Nt},text:{from:t=>[Jt.test(t),t.trim()],to:t=>t}},hex8:{color:{from:t=>[!0,t],to:At},text:{from:t=>[Qt.test(t),t.trim()],to:t=>t}},hex3:{color:{from:t=>[!0,Ft(t)],to:Lt},text:{from:t=>[Jt.test(t),jt(t.trim())],to:t=>t}},"hex6-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${Nt(t)}`},text:{from:t=>[Yt.test(t),t.trim()],to:t=>t}},"hex8-no-hash":{color:{from:t=>[!0,t.substring(1)],to:t=>`#${At(t)}`},text:{from:t=>[_t.test(t),t.trim()],to:t=>t}},"hex3-no-hash":{color:{from:t=>[!0,Ft(t).substring(1)],to:Lt},text:{from:t=>[Yt.test(t),jt(t.trim())],to:t=>t}},"uint32-rgb":{color:{from:t=>[!0,_(t)],to:t=>`#${Math.round(t).toString(16).padStart(6,"0")}`},text:{from:t=>(t=>{const e=Zt.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,K(t)],to:t=>`#${Math.round(t).toString(16).padStart(8,"0")}`},text:{from:t=>(t=>{const e=Rt.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,q(t)],to:X},text:{from:t=>{const e=Tt.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=Wt.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:Bt,to:t=>Array.from(t).map((t=>Q(t))).join(", ")}},"float-rgba":{color:{from:t=>[!0,ot(t)],to:rt},text:{from:Gt,to:t=>Array.from(t).map((t=>Q(t))).join(", ")}},"float-hsv":{color:{from:t=>[!0,Ct(nt(t))],to:t=>Et(it(t))},text:{from:Bt,to:t=>Array.from(t).map((t=>Q(t))).join(", ")}},"float-hsva":{color:{from:t=>[!0,Mt(nt(t))],to:t=>It(it(t))},text:{from:Gt,to:t=>Array.from(t).map((t=>Q(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:${Q(t.r)}, g:${Q(t.g)}, b:${Q(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:${Q(t.r)}, g:${Q(t.g)}, b:${Q(t.b)}}, a:${Q(t.a)}}`}},"css-rgb":{color:{from:t=>[!0,ut(t)],to:t=>{const e=ct.exec(t);return X([e[1],e[2],e[3]].map((t=>parseInt(t))))}},text:{from:Pt,to:t=>Pt(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:Ot,to:t=>Ot(t)[1]}},"css-hsl":{color:{from:t=>[!0,mt(t)],to:t=>{const e=gt.exec(t),n=vt([e[1],e[2],e[3]].map((t=>parseFloat(t))));return X(n)}},text:{from:Ht,to:t=>Ht(t)[1]}},"css-hsla":{color:{from:t=>[!0,pt(t)],to:t=>{const e=bt.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:zt,to:t=>zt(t)[1]}}};class qt extends p{constructor(t,n){super(e(t,{className:n}))}}class Xt extends V{#N;constructor(t){super("muigui-canvas",t),this.#N=this.add(new qt("canvas","muigui-canvas")).domElement}get canvas(){return this.#N}listen(){return this}}class te extends v{#I;#$;#A;#M;#u={converters:A};constructor(t,n){const i=e("input",{type:"color",onInput:()=>{const[e,n]=this.#$(i.value);e&&(this.#M=!0,t.setValue(n))},onChange:()=>{const[e,n]=this.#$(i.value);e&&(this.#M=!0,t.setFinalValue(n))}});super(e("div",{},[i])),this.setOptions(n),this.#A=i}updateDisplay(t){this.#M||(this.#A.value=this.#I(t)),this.#M=!1}setOptions(t){l(this.#u,t);const{converters:{to:e,from:n}}=this.#u;return this.#I=e,this.#$=n,this}}class ee extends D{#j;#V;constructor(t,e,n={}){super(t,e,"muigui-color");const i=n.format||Dt(this.getValue()),{color:o,text:r}=Kt[i];this.#j=this.add(new te(this,{converters:o})),this.#V=this.add(new B(this,{converters:r})),this.updateDisplay()}setOptions(t){const{format:e}=t;if(e){const{color:t,text:n}=Kt[e];this.#j.setOptions({converters:t}),this.#V.setOptions({converters:n})}return super.setOptions(t),this}}class ne extends g{constructor(){super("muigui-divider")}}class ie 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 ie)))}get folders(){return this.#U.filter((t=>t instanceof ie))}reset(t=!0){for(const e of this.#U)e instanceof ie&&!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)}else this.#U.forEach((e=>{e.remove(t)}));return this}#F(t){return this.domElement.appendChild(t.domElement),this.#U.push(t),t.setParent(this),t}addController(t){return this.#L.#F(t)}pushContainer(t){return this.addController(t),this.#L=t,t}popContainer(){return this.#L=this.#L.parent,this}listen(){return this.#U.forEach((t=>{t.listen()})),this}}class oe extends ie{#P;constructor(t="Controls",n="muigui-menu"){super(n),this.#P=e("label"),this.addElem(e("button",{type:"button",onClick:()=>this.toggleOpen()},[this.#P])),this.pushContainer(new ie("muigui-open-container")),this.pushContainer(new ie),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.#P.textContent=t,this}title(t){return this.name(t)}toggleOpen(){return this.open(!this.domElement.classList.contains("muigui-open")),this}}class re extends g{constructor(t){super("muigui-label"),this.text(t)}text(t){return this.domElement.textContent=t,this}}function se(){}function ae(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 le(t,{onDown:e=se,onMove:n=se,onUp:i=se}){let o;const r=function(e){const i={type:"move",...ae(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=ae(t,n);o=[i.x,i.y],e({type:"down",...i})};return t.addEventListener("pointerdown",a),function(){t.removeEventListener("pointerdown",a)}}function ue(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 ce extends v{#I;#$;#O;#H;#z;#T;#W;#B;#G;#Z;#R;#J;#Y;#Q;#u={converters:A,alpha:!1};#_;#K;constructor(t,n){super(e("div",{innerHTML:'\n<svg class="muigui-checkered-background" tabindex="0" viewBox="0 0 64 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <linearGradient data-src="muigui-color-chooser-light-dark" x1="0" x2="0" y1="0" y2="1">\n <stop stop-color="rgba(0,0,0,0)" offset="0%"/>\n <stop stop-color="#000" offset="100%"/>\n </linearGradient>\n <linearGradient data-src="muigui-color-chooser-hue">\n <stop stop-color="hsl(60 0% 100% / 1)" offset="0%"/>\n <stop stop-color="hsl(60 100% 50% / 1)" offset="100%"/>\n </linearGradient>\n\n <rect width="64" height="48" data-target="muigui-color-chooser-hue"/>\n <rect width="64" height="48" data-target="muigui-color-chooser-light-dark"/>\n <circle r="4" class="muigui-color-chooser-circle"/>\n</svg>\n<svg tabindex="0" viewBox="0 0 64 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <linearGradient data-src="muigui-color-chooser-hues" x1="0" x2="1" y1="0" y2="0">\n <stop stop-color="hsl(0,100%,50%)" offset="0%"/>\n <stop stop-color="hsl(60,100%,50%)" offset="16.666%"/>\n <stop stop-color="hsl(120,100%,50%)" offset="33.333%"/>\n <stop stop-color="hsl(180,100%,50%)" offset="50%"/>\n <stop stop-color="hsl(240,100%,50%)" offset="66.666%"/>\n <stop stop-color="hsl(300,100%,50%)" offset="83.333%"/>\n <stop stop-color="hsl(360,100%,50%)" offset="100%"/>\n </linearGradient>\n <rect y="1" width="64" height="4" data-target="muigui-color-chooser-hues"/>\n <g class="muigui-color-chooser-hue-cursor">\n <rect x="-3" width="6" height="6" />\n </g>\n</svg>\n<svg class="muigui-checkered-background" tabindex="0" viewBox="0 0 64 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <linearGradient data-src="muigui-color-chooser-alpha" x1="0" x2="1" y1="0" y2="0">\n <stop stop-color="hsla(0,100%,100%,0)" offset="0%"/>\n <stop stop-color="hsla(0,100%,100%,1)" offset="100%"/>\n </linearGradient>\n <rect y="1" width="64" height="4" data-target="muigui-color-chooser-alpha"/>\n <g class="muigui-color-chooser-alpha-cursor">\n <rect x="-3" width="6" height="6" />\n </g>\n</svg>\n',className:"muigui-no-scroll"})),this.#O=this.domElement.children[0],this.#z=this.domElement.children[1],this.#B=this.domElement.children[2],ue(this.#O),ue(this.#z),ue(this.#B),this.#H=this.$(".muigui-color-chooser-circle"),this.#T=this.$("[data-src=muigui-color-chooser-hue]"),this.#W=this.$(".muigui-color-chooser-hue-cursor"),this.#G=this.$("[data-src=muigui-color-chooser-alpha]"),this.#Z=this.$(".muigui-color-chooser-alpha-cursor");const i=e=>{const n=o(e.nx,0,1),i=o(e.ny,0,1);this.#R[1]=n,this.#R[2]=1-i,this.#J=!0,this.#Q=!0;const[r,s]=this.#$(this.#_(this.#R));r&&t.setValue(s)},r=e=>{const n=o(e.nx,0,1);this.#R[0]=n,this.#Y=!0,this.#Q=!0;const[i,r]=this.#$(this.#_(this.#R));i&&t.setValue(r)},s=e=>{const n=o(e.nx,0,1);this.#R[3]=n,this.#J=!0,this.#Y=!0;const[i,r]=this.#$(this.#_(this.#R));i&&t.setValue(r)};le(this.#O,{onDown:i,onMove:i}),le(this.#z,{onDown:r,onMove:r}),le(this.#B,{onDown:s,onMove:s}),this.setOptions(n)}updateDisplay(t){this.#R||(this.#R=this.#K(this.#I(t)));{const[e,n,i,o=1]=this.#K(this.#I(t));this.#J||(this.#R[0]=n>.001&&i>.001?e:this.#R[0]),this.#Y||(this.#R[1]=n,this.#R[2]=i),this.#Q||(this.#R[3]=o)}{const[t,e,n,i]=this.#R,[o,r,s]=wt(It(this.#R));this.#J||this.#W.setAttribute("transform",`translate(${64*t}, 0)`),this.#T.children[0].setAttribute("stop-color",`hsl(${360*o} 0% 100% / ${i})`),this.#T.children[1].setAttribute("stop-color",`hsl(${360*o} 100% 50% / ${i})`),this.#Q||this.#Z.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.#Y||(this.#H.setAttribute("cx",""+64*e),this.#H.setAttribute("cy",""+48*(1-n)))}this.#J=!1,this.#Y=!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.#_=i?t=>rt(It(t)):t=>it(Et(t)),this.#K=i?t=>Mt(ot(t)):t=>Ct(nt(t)),this.#I=e,this.#$=n,this}}class he extends D{#q;#X;#f;#tt;#u={open:!1};constructor(t,n,i={}){super(t,n,"muigui-pop-down-controller"),this.#q=this.add(new qt("div","muigui-pop-down-top"));const o=this.#q.addElem(e("input",{type:"checkbox",onChange:()=>{this.#u.open=o.checked,this.updateDisplay()}}));this.#f=o,this.#X=this.#q.add(new qt("div","muigui-pop-down-values"));const r=new qt("div","muigui-pop-down-bottom muigui-open-container");this.#tt=new qt("div"),r.add(this.#tt),this.add(r),this.setOptions(i)}setKnobColor(t){this.#f&&(this.#f.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.#X.add(t)}addBottom(t){return this.#tt.add(t)}}class de extends he{#j;#V;#I;constructor(t,e,n={}){super(t,e,"muigui-color-chooser");const i=n.format||Dt(this.getValue()),{color:o,text:r}=Kt[i];this.#I=o.to,this.#V=new B(this,{converters:r,alpha:St(i)}),this.#j=new ce(this,{converters:o,alpha:St(i)}),this.addTop(this.#V),this.addBottom(this.#j),this.___setKnobHelper=!0,this.updateDisplay()}#et(){if(this.#I){const t=this.#I(this.getValue()),e=9===t.length?t.substring(7,9):"FF",n=yt(q(t));n[2]=(n[2]+50)%100;const i=X(vt(n));this.setKnobColor(`${t.substring(0,7)}${e}`,i)}}updateDisplay(){super.updateDisplay(),this.___setKnobHelper&&this.#et()}setOptions(t){return super.setOptions(t),this}}function me(t){return function(t){return t.replace(/(.)([A-Z][a-z]+)/g,"$1_$2").replace(/([a-z0-9])([A-Z])/g,"$1_$2").toLowerCase()}(t.toString()).replaceAll("_"," ")}class pe extends oe{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});if(i&&i.keyValues)return new z(t,e,{keyValues:i.keyValues});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 W(t,e,{min:i,max:o,...r&&{step:r}})}return 0===n.length?new P(t,e,...n):new W(t,e,...n);case"boolean":return new N(t,e,...n);case"function":return new b(t,e,...n);case"string":return new G(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).name(me(e));return this.addController(i)}addCanvas(t){return this.addController(new Xt(t))}addColor(t,e,n={}){const i=t[e];return St(n.format||Dt(i))?this.addController(new de(t,e,n)).name(me(e)):this.addController(new ee(t,e,n)).name(me(e))}addDivider(){return this.addController(new ne)}addFolder(t){return this.addController(new pe(t))}addLabel(t){return this.addController(new re(t))}addButton(t,e){const n={fn:e};return this.add(n,"fn").name(me(t))}}class ge extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}}customElements.define("muigui-element",ge);const be=new CSSStyleSheet,fe=new CSSStyleSheet;function ve(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 xe=ve(be),we=ve(fe);function ye(e){const{include:n,css:i}=t.themes[e];return`${n.map((e=>t[e])).join("\n")} : css.default}\n${i||""}`}class ke extends pe{static converters=U;static mapRange=u;static makeRangeConverters=c;static makeRangeOptions=h;static makeMinMaxPair=m;#nt=new CSSStyleSheet;constructor(n={}){super("Controls","muigui-root"),n instanceof HTMLElement&&(n={parent:n});const{autoPlace:i=!0,width:o,title:r="Controls"}=n;let{parent:s}=n;if(o&&(this.domElement.style.width=/^\d+$/.test(o)?`${o}px`:o),void 0===s&&i&&(s=document.body,this.domElement.classList.add("muigui-auto-place")),s){const t=e("muigui-element");t.shadowRoot.adoptedStyleSheets=[this.#nt,be,fe],t.shadow.appendChild(this.domElement),s.appendChild(t)}r&&this.title(r),this.#nt.replaceSync(t.default),this.domElement.classList.add("muigui","muigui-colors")}setStyle(t){this.#nt.replace(t)}static setBaseStyles(t){xe(t)}static getBaseStyleSheet(){return be}static setUserStyles(t){we(t)}static getUserStyleSheet(){return fe}setTheme(t){this.setStyle(ye(t))}static setTheme(t){ke.setBaseStyles(ye(t))}}function Ee(){}const Ie={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]};function $e(t,{onDown:e=Ee,onUp:n=Ee}){const i=function(t){const i=t.shiftKey?10:1,[o,r]=(Ie[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 Ce(t,e=""){if(!t)throw new Error(e)}function Me(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 Se(t,e,n,i,o){Ce(Math.abs(i-o)<=2*Math.PI),Ce(i>=-Math.PI&&i<=2*Math.PI),Ce(i<=o),Ce(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]=Me(t,e,n,i,o,r),[u,c]=Me(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 Ve=t=>a(t+Math.PI,2*Math.PI)-Math.PI;class De extends v{#it;#ot;#rt;#st;#u={step:1,min:-180,max:180,dirMin:-Math.PI,dirMax:Math.PI,wrap:void 0,converters:A};constructor(t,n={}){const i=L();super(e("div",{className:"muigui-direction muigui-no-scroll",innerHTML:'\n<svg tabindex="0" viewBox="-32 -32 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n \x3c!--<circle id="muigui-outline" cx="0" cy="0" r="28.871" class="muigui-direction-circle"/>--\x3e\n <path id="muigui-range" class="muigui-direction-range" />\n <g id="muigui-arrow">\n <g transform="translate(-32, -32)">\n <path d="M31.029,33.883c-1.058,-0.007 -1.916,-0.868 -1.916,-1.928c0,-1.065 0.864,-1.929 1.929,-1.929c0.204,0 0.401,0.032 0.586,0.091l14.729,-0l0,-2.585l12.166,4.468l-12.166,4.468l0,-2.585l-15.315,0l-0.013,0Z" class="muigui-direction-arrow"/>\n </g>\n </g>\n</svg>\n',onWheel:e=>{e.preventDefault();const{min:n,max:r,step:l}=this.#u,u=i(e,l);let c=this.#rt+u;this.#st&&(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,m=o((Ve(h-d)-Ve(a-d))/(l-a),0,1),p=s(n+(i-n)*m,(t=>t),r);t.setValue(p)};le(this.domElement,{onDown:r,onMove:r}),$e(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#rt+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),this.#it=this.$("#muigui-arrow"),this.#ot=this.$("#muigui-range"),this.setOptions(n)}updateDisplay(t){this.#rt=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.#it.style.transform=`rotate(${o}rad)`}setOptions(t){l(this.#u,t);const{dirMin:e,dirMax:n,wrap:i}=this.#u;this.#st=void 0!==i?i:Math.abs(e-n)>=2*Math.PI-Number.EPSILON;const[o,r]=e<n?[e,n]:[n,e];this.#ot.setAttribute("d",Se(0,0,28.87,o,r))}}class Ne extends he{#u;constructor(t,e,n){super(t,e,"muigui-direction"),this.#u=n,this.addTop(new F(this,A)),this.addBottom(new De(this,n)),this.updateDisplay()}}class Ae extends v{#D;constructor(t,n,i=3){const o=[],r=M();super(e("div",{},n.map((([n,i],a)=>(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<this.domElement.children.length;++t)this.domElement.children[t].children[0].checked=t===e}cols(t){this.domElement.style.gridTemplateColumns=`repeat(${t}, 1fr)`}}class je 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 Ae(this,s,r)),this.updateDisplay()}}function Ue(t,e){new ResizeObserver((()=>{e({rect:t.getBoundingClientRect(),elem:t})})).observe(t)}function Le(t,e,n,i){Ue(t,(({rect:o})=>{const{width:r,height:s}=o;t.setAttribute("viewBox",`-${r*e} -${s*n} ${r} ${s}`),i({elem:t,rect:o})}))}function Fe(t,e,n,i,o,r){const a=[];t<i&&(t+=s(i-t,(t=>t),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 Pe extends v{#at;#lt;#ut;#ct;#ht;#dt;#mt;#pt;#gt;#rt;#bt;#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<svg tabindex="0" viewBox="-32 -32 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <g id="muigui-orientation">\n <g id="muigui-origin">\n <g transform="translate(0, 4)">\n <path id="muigui-ticks" class="muigui-ticks"/>\n <path id="muigui-thicks" class="muigui-thicks"/>\n </g>\n <g transform="translate(0, 14)">\n <g id="muigui-number-orientation">\n <g id="muigui-numbers" transform="translate(0, -3)" class="muigui-svg-text"/>\n </g>\n </g>\n </g>\n <linearGradient id="muigui-bg-to-transparent">\n <stop stop-color="var(--value-bg-color)" offset="0%"/>\n <stop stop-color="var(--value-bg-color)" stop-opacity="0" offset="100%"/>\n </linearGradient>\n <linearGradient id="muigui-transparent-to-bg">\n <stop stop-color="var(--value-bg-color)" stop-opacity="0" offset="0%"/>\n <stop stop-color="var(--value-bg-color)" offset="100%"/> \n </linearGradient>\n \x3c!--<circle cx="0" cy="2" r="2" class="muigui-mark"/>--\x3e\n \x3c!--<rect x="-1" y="0" width="2" height="10" class="muigui-mark"/>--\x3e\n <path d="M0 4L-2 0L2 0" class="muigui-mark"/>\n </g>\n <rect id="muigui-left-grad" x="0" y="0" width="20" height="20" fill="url(#muigui-bg-to-transparent)"/>\n <rect id="muigui-right-grad" x="48" y="0" width="20" height="20" fill="url(#muigui-transparent-to-bg)"/>\n</svg>\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.#rt+l,(t=>t),a),n,r);t.setValue(u)}})),this.#at=this.$("svg"),this.#lt=this.$("#muigui-origin"),this.#ut=this.$("#muigui-ticks"),this.#ct=this.$("#muigui-thicks"),this.#ht=this.$("#muigui-numbers"),this.#dt=this.$("#muigui-left-grad"),this.#mt=this.$("#muigui-right-grad"),this.setOptions(n),le(this.domElement,{onDown:()=>{r=this.#rt},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)}}),$e(this.domElement,{onDown:e=>{const{min:n,max:i,step:r}=this.#u,a=o(s(this.#rt+e.dx*r,(t=>t),r),n,i);t.setValue(a)}}),Le(this.#at,.5,0,(({rect:{width:t}})=>{this.#dt.setAttribute("x",-t/2),this.#mt.setAttribute("x",t/2-20),this.#bt=function(t){const e=t.innerHTML;t.innerHTML="<text>- </text>";const n=t.querySelector("text").getComputedTextLength();return t.innerHTML=e,n}(this.#ht),this.#pt=t,this.#ft()}))}#ft(){if(!this.#pt||void 0===this.#rt)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.#pt/u),d=this.#rt/l,m=Math.round(d-h),p=m*u,g=(m+2*h)*u,b=e?n*u/l:p,f=e?i*u/l:g,v=""===t(1)?10:5;a>1&&this.#ut.setAttribute("d",Fe(p,g,u/a,b,f,v*r)),this.#ct.style.stroke=c,this.#ct.setAttribute("d",Fe(p,g,u,b,f,v)),this.#ht.innerHTML=function(t,e,n,i,o,r,a,l){const u=[];t<r&&(t+=s(r-t,(t=>t),n)),e=Math.min(e,a);const c=Math.max(0,-Math.log10(i));for(let r=t;r<=e;r+=n)u.push(`<text text-anchor="middle" dominant-baseline="hanging" x="${r>=0?r:r-o/2}" y="0">${h=r/n*i,l(h.toFixed(c))}</text>`);var h;return u.join("\n")}(p,g,u,l,this.#bt,b,f,t),this.#lt.setAttribute("transform",`translate(${-this.#rt*u/l} 0)`),this.#at.classList.toggle("muigui-slider-up","up"===o)}updateDisplay(t){this.#rt=t,this.#ft()}setOptions(t){return l(this.#u,t),this}}class Oe extends D{constructor(t,e,n={}){super(t,e,"muigui-slider"),this.add(new Pe(this,n)),this.add(new F(this,n)),this.updateDisplay()}}class He extends v{#at;#it;#H;#rt=[];constructor(t){super(e("div",{innerHTML:'\n<svg tabindex="0" viewBox="-32 -32 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">\n <path d="m-3200,0L3200,0M0,-3200L0,3200" class="muigui-vec2-axis"/>\n <path id="muigui-arrow" d="" class="muigui-vec2-line"/>\n <g id="muigui-circle" transform="translate(0, 0)">\n <circle r="3" class="muigui-vec2-axis"/>\n </g>\n</svg>\n',className:"muigui-no-scroll"}));const n=e=>{const{width:n,height:i}=this.#at.getBoundingClientRect(),o=2*e.nx-1,r=2*e.ny-1;t.setValue([o*n*.5,r*i*.5])};le(this.domElement,{onDown:n,onMove:n}),this.#at=this.$("svg"),this.#it=this.$("#muigui-arrow"),this.#H=this.$("#muigui-circle"),Le(this.#at,.5,.5,(()=>this.#vt))}#vt(){const[t,e]=this.#rt;this.#it.setAttribute("d",`M0,0L${t},${e}`),this.#H.setAttribute("transform",`translate(${t}, ${e})`)}updateDisplay(t){this.#rt[0]=t[0],this.#rt[1]=t[1],this.#vt()}}class ze extends he{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 F(n(0),{converters:{to:t=>t[0],from:j.from}})),this.addTop(new F(n(1),{converters:{to:t=>t[1],from:j.from}})),this.addBottom(new He(this)),this.updateDisplay()}}const Te={main:"#ddd"},We={main:"#333"},Be=window.matchMedia("(prefers-color-scheme: dark)");let Ge,Ze;function Re(){Ze=Be.matches,Ge=Ze?Te:We}Be.addEventListener("change",Re),Re();const Je={graph:function(t,e,{min:n=-1,max:i=1,interval:o=16,color:r}){const s=t.getContext("2d");setInterval((function(){const{width:o,height:a}=t;s.clearRect(0,0,o,a),s.beginPath();const l=i-n;for(let t=0;t<e.length;++t){const i=t*o/e.length,r=(e[t]-n)*a/l;s.lineTo(i,r)}s.strokeStyle=r||Ge.main,s.stroke()}),o)},monitor:function(t,e,n,{interval:i=200}={}){setInterval((()=>{t.text(JSON.stringify(e[n],null,2))}),i)}};export{de as ColorChooser,Ne as Direction,je as RadioGrid,W as Range,z as Select,Oe as Slider,P as TextNumber,ze as Vec2,ke as default,Je as helpers};
2
2
  //# sourceMappingURL=muigui.module.min.js.map