@tresjs/leches 0.11.0 → 0.12.0

package/dist/style.css

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/leches
- * version: v0.11.0
+ * version: v0.12.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SeW4Ep0.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_QOW4Ep0.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_R-W4Ep0.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_S-W4Ep0.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SuW4Ep0.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.i-ic-baseline-drag-indicator{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2s.9-2 2-2s2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.i-ic\:baseline-check{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.i-ic\:baseline-keyboard-arrow-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.i-ic\:baseline-keyboard-arrow-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.absolute{position:absolute}.relative{position:relative}.bottom-0\.5{bottom:.125rem}.right-0\.5{right:.125rem}.z-24{z-index:24}.-mt-0\.5{margin-top:-.125rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mr-2{margin-right:.5rem}.box-border{box-sizing:border-box}.hidden{display:none}.h-0\.75{height:.1875rem}.h-30px{height:30px}.h-4{height:1rem}.min-h-32px{min-height:32px}.w-1\/2{width:50%}.w-1\/3{width:33.3333333333%}.w-1\/4{width:25%}.w-2\/3{width:66.6666666667%}.w-280px{width:280px}.w-3{width:.75rem}.w-30px{width:30px}.w-4{width:1rem}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.animate-fade-in{animation:fade-in 1s linear 1}.animate-fade-out{animation:fade-out 1s linear 1}.animate-duration-200{animation-duration:.2s}.animate-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.cursor-pointer{cursor:pointer}.cursor-grabbing{cursor:grabbing}.cursor-ew-resize{cursor:ew-resize}.select-none{-webkit-user-select:none;user-select:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-black{--un-border-opacity:1;border-color:rgba(0,0,0,var(--un-border-opacity))}.border-gray-300{--un-border-opacity:1;border-color:rgba(209,213,219,var(--un-border-opacity))}.focus\:border-gray-200:focus{--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.rounded-b{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.border-none{border-style:none}.border-solid{border-style:solid}.bg-dark-200{--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity))}.bg-dark-500{--un-bg-opacity:1;background-color:rgba(31,31,31,var(--un-bg-opacity))}.bg-gray-100{--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity))}.bg-gray-200{--un-bg-opacity:1;background-color:rgba(229,231,235,var(--un-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-right{text-align:right}.text-0\.65rem{font-size:.65rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.line-height-0{line-height:0}.font-sans{font-family:Roboto Mono,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-gray-200{--un-text-opacity:1;color:rgba(229,231,235,var(--un-text-opacity))}.text-gray-300{--un-text-opacity:1;color:rgba(209,213,219,var(--un-text-opacity))}.text-gray-400{--un-text-opacity:1;color:rgba(156,163,175,var(--un-text-opacity))}.text-gray-500{--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity))}.text-light{--un-text-opacity:1;color:rgba(246,246,246,var(--un-text-opacity))}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.important-outline-gray-200{--un-outline-color-opacity:1 !important;outline-color:rgba(229,231,235,var(--un-outline-color-opacity))!important}.outline{outline-style:solid}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus\:ring-blue-600:focus{--un-ring-opacity:1;--un-ring-color:rgba(37,99,235,var(--un-ring-opacity))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}input[type=range][data-v-9e6267fe]{outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}input[type=range][data-v-9e6267fe]::-webkit-slider-thumb{height:1rem;width:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:2px;border-radius:.125rem;--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}input[type=range][data-v-9e6267fe]::-moz-range-thumb{height:1rem;width:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:2px;border-radius:.125rem;--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}input[type=color]{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.125rem;border-style:none;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{border-style:none;padding:0}input[type=color]::-webkit-color-swatch{margin-top:-.125rem;height:30px;width:30px;border-radius:.125rem;border-style:none;padding:0}
+*,:before,:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SeW4Ep0.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_QOW4Ep0.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_R-W4Ep0.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_S-W4Ep0.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SuW4Ep0.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Roboto Mono;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.i-ic-baseline-drag-indicator{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2s.9-2 2-2s2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.i-ic\:baseline-check{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.i-ic\:baseline-keyboard-arrow-down{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.i-ic\:baseline-keyboard-arrow-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em}.absolute{position:absolute}.relative{position:relative}.bottom-0\.5{bottom:.125rem}.right-0\.5{right:.125rem}.z-24{z-index:24}.-mt-0\.5{margin-top:-.125rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mr-2{margin-right:.5rem}.box-border{box-sizing:border-box}.hidden{display:none}.h-0\.75{height:.1875rem}.h-30px{height:30px}.h-4{height:1rem}.min-h-32px{min-height:32px}.w-1\/2{width:50%}.w-1\/3{width:33.3333333333%}.w-1\/4{width:25%}.w-2\/3{width:66.6666666667%}.w-2\/5{width:40%}.w-280px{width:280px}.w-3{width:.75rem}.w-30px{width:30px}.w-4{width:1rem}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.animate-fade-in{animation:fade-in 1s linear 1}.animate-fade-out{animation:fade-out 1s linear 1}.animate-duration-200{animation-duration:.2s}.animate-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.cursor-pointer{cursor:pointer}.cursor-grabbing{cursor:grabbing}.cursor-ew-resize{cursor:ew-resize}.select-none{-webkit-user-select:none;user-select:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-black{--un-border-opacity:1;border-color:rgba(0,0,0,var(--un-border-opacity))}.border-gray-300{--un-border-opacity:1;border-color:rgba(209,213,219,var(--un-border-opacity))}.focus\:border-gray-200:focus{--un-border-opacity:1;border-color:rgba(229,231,235,var(--un-border-opacity))}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-sm{border-radius:.125rem}.rounded-b{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.border-none{border-style:none}.border-solid{border-style:solid}.bg-dark-200{--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity))}.bg-dark-500{--un-bg-opacity:1;background-color:rgba(31,31,31,var(--un-bg-opacity))}.bg-gray-100{--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity))}.bg-gray-200{--un-bg-opacity:1;background-color:rgba(229,231,235,var(--un-bg-opacity))}.bg-transparent{background-color:transparent}.bg-white{--un-bg-opacity:1;background-color:rgba(255,255,255,var(--un-bg-opacity))}.p-0{padding:0}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-right{text-align:right}.text-0\.65rem{font-size:.65rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.line-height-0{line-height:0}.font-sans{font-family:Roboto Mono,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.text-gray-200{--un-text-opacity:1;color:rgba(229,231,235,var(--un-text-opacity))}.text-gray-300{--un-text-opacity:1;color:rgba(209,213,219,var(--un-text-opacity))}.text-gray-400{--un-text-opacity:1;color:rgba(156,163,175,var(--un-text-opacity))}.text-gray-500{--un-text-opacity:1;color:rgba(107,114,128,var(--un-text-opacity))}.text-light{--un-text-opacity:1;color:rgba(246,246,246,var(--un-text-opacity))}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.important-outline-gray-200{--un-outline-color-opacity:1 !important;outline-color:rgba(229,231,235,var(--un-outline-color-opacity))!important}.outline{outline-style:solid}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}.focus\:ring-blue-600:focus{--un-ring-opacity:1;--un-ring-color:rgba(37,99,235,var(--un-ring-opacity))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}input[type=range][data-v-9e6267fe]{outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}input[type=range][data-v-9e6267fe]::-webkit-slider-thumb{height:1rem;width:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:2px;border-radius:.125rem;--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}input[type=range][data-v-9e6267fe]::-moz-range-thumb{height:1rem;width:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:2px;border-radius:.125rem;--un-bg-opacity:1;background-color:rgba(50,50,50,var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgba(0,0,0,.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgba(0,0,0,.1));box-shadow:var(--un-ring-offset-shadow),var(--un-ring-shadow),var(--un-shadow)}input[type=color]{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.125rem;border-style:none;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px;cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{border-style:none;padding:0}input[type=color]::-webkit-color-swatch{margin-top:-.125rem;height:30px;width:30px;border-radius:.125rem;border-style:none;padding:0}

package/dist/tresleches.js

@@ -1,34 +1,34 @@
 /**
  * name: @tresjs/leches
- * version: v0.11.0
+ * version: v0.12.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { unref as A, isRef as L, toRefs as E, customRef as se, ref as y, watch as N, computed as K, defineComponent as M, reactive as z, h as ie, provide as ce, isReactive as ue, openBlock as v, createElementBlock as _, createElementVNode as d, toDisplayString as k, normalizeClass as S, withDirectives as J, vShow as Q, createTextVNode as de, normalizeStyle as fe, Fragment as I, renderList as O, createCommentVNode as P, createBlock as C, createVNode as pe, Transition as ve, withCtx as Z } from "vue";
-import { useWindowSize as ee, useEventListener as W, useStorage as ge, isClient as ye, useMouse as R, useFps as be, useRafFn as he } from "@vueuse/core";
-function D(n) {
-  return typeof n == "function" ? n() : A(n);
+import { unref as F, isRef as W, toRefs as z, customRef as ie, ref as g, watch as V, computed as U, defineComponent as S, reactive as L, h as de, provide as fe, isReactive as pe, openBlock as v, createElementBlock as _, createElementVNode as d, toDisplayString as M, normalizeClass as A, withDirectives as te, vShow as oe, createTextVNode as ve, normalizeStyle as ge, Fragment as q, renderList as B, createCommentVNode as j, createBlock as k, createVNode as ye, Transition as he, withCtx as le } from "vue";
+import { useWindowSize as ae, useEventListener as Y, useStorage as be, isClient as me, useMouse as J, useMousePressed as _e, useKeyModifier as Q, useFps as xe, useRafFn as we } from "@vueuse/core";
+function E(n) {
+  return typeof n == "function" ? n() : F(n);
 }
-const ne = typeof window < "u" && typeof document < "u";
-function me(n, l = {}) {
-  if (!L(n))
-    return E(n);
+const re = typeof window < "u" && typeof document < "u";
+function $e(n, l = {}) {
+  if (!W(n))
+    return z(n);
   const t = Array.isArray(n.value) ? Array.from({ length: n.value.length }) : {};
   for (const e in n.value)
-    t[e] = se(() => ({
+    t[e] = ie(() => ({
       get() {
         return n.value[e];
       },
       set(a) {
         var r;
-        if ((r = D(l.replaceRef)) != null ? r : !0)
+        if ((r = E(l.replaceRef)) != null ? r : !0)
           if (Array.isArray(n.value)) {
-            const f = [...n.value];
-            f[e] = a, n.value = f;
+            const c = [...n.value];
+            c[e] = a, n.value = c;
           } else {
-            const f = { ...n.value, [e]: a };
-            Object.setPrototypeOf(f, Object.getPrototypeOf(n.value)), n.value = f;
+            const c = { ...n.value, [e]: a };
+            Object.setPrototypeOf(c, Object.getPrototypeOf(n.value)), n.value = c;
           }
         else
           n.value[e] = a;
@@ -36,64 +36,64 @@ function me(n, l = {}) {
     }));
   return t;
 }
-const _e = ne ? window : void 0;
-function xe(n, l = {}) {
+const Ce = re ? window : void 0;
+function ke(n, l = {}) {
   const {
     pointerTypes: t,
     preventDefault: e,
     stopPropagation: a,
     exact: r,
-    onMove: i,
-    onEnd: f,
-    onStart: p,
-    initialValue: w,
-    axis: c = "both",
-    draggingElement: o = _e,
-    handle: u = n
-  } = l, { width: h } = ee();
-  let T = h.value;
-  const s = y(
-    D(w) ?? { x: 0, y: 0 }
+    onMove: u,
+    onEnd: c,
+    onStart: f,
+    initialValue: h,
+    axis: i = "both",
+    draggingElement: o = Ce,
+    handle: p = n
+  } = l, { width: b } = ae();
+  let D = b.value;
+  const y = g(
+    E(h) ?? { x: 0, y: 0 }
   );
-  N(h, () => {
-    const b = h.value - T;
-    s.value.x += b, T = h.value;
+  V(b, () => {
+    const s = b.value - D;
+    y.value.x += s, D = b.value;
   });
-  const m = y(), $ = (b) => t ? t.includes(b.pointerType) : !0, g = (b) => {
-    D(e) && b.preventDefault(), D(a) && b.stopPropagation();
-  }, x = (b) => {
-    if (!$(b) || D(r) && b.target !== D(n))
+  const K = g(), I = (s) => t ? t.includes(s.pointerType) : !0, w = (s) => {
+    E(e) && s.preventDefault(), E(a) && s.stopPropagation();
+  }, $ = (s) => {
+    if (!I(s) || E(r) && s.target !== E(n))
       return;
-    const V = D(n).getBoundingClientRect(), q = {
-      x: b.clientX - V.left,
-      y: b.clientY - V.top
+    const x = E(n).getBoundingClientRect(), C = {
+      x: s.clientX - x.left,
+      y: s.clientY - x.top
     };
-    (p == null ? void 0 : p(q, b)) !== !1 && (m.value = q, g(b));
-  }, ae = (b) => {
-    if (!$(b) || !m.value)
+    (f == null ? void 0 : f(C, s)) !== !1 && (K.value = C, w(s));
+  }, X = (s) => {
+    if (!I(s) || !K.value)
       return;
-    let { x: V, y: q } = s.value;
-    (c === "x" || c === "both") && (V = b.clientX - m.value.x), (c === "y" || c === "both") && (q = b.clientY - m.value.y), s.value = {
-      x: V,
-      y: q
-    }, i == null || i(s.value, b), g(b);
-  }, re = (b) => {
-    $(b) && m.value && (m.value = void 0, f == null || f(s.value, b), g(b));
+    let { x, y: C } = y.value;
+    (i === "x" || i === "both") && (x = s.clientX - K.value.x), (i === "y" || i === "both") && (C = s.clientY - K.value.y), y.value = {
+      x,
+      y: C
+    }, u == null || u(y.value, s), w(s);
+  }, R = (s) => {
+    I(s) && K.value && (K.value = void 0, c == null || c(y.value, s), w(s));
   };
-  if (ne) {
-    const b = { capture: l.capture ?? !0 };
-    W(u, "pointerdown", x, b), W(o, "pointermove", ae, b), W(o, "pointerup", re, b);
+  if (re) {
+    const s = { capture: l.capture ?? !0 };
+    Y(p, "pointerdown", $, s), Y(o, "pointermove", X, s), Y(o, "pointerup", R, s);
   }
   return {
-    ...me(s),
-    position: s,
-    isDragging: K(() => !!m.value),
-    style: K(
-      () => `left:${s.value.x}px;top:${s.value.y}px;`
+    ...$e(y),
+    position: y,
+    isDragging: U(() => !!K.value),
+    style: U(
+      () => `left:${y.value.x}px;top:${y.value.y}px;`
     )
   };
 }
-const we = /* @__PURE__ */ M({
+const Me = /* @__PURE__ */ S({
   name: "UseDraggable",
   props: [
     "storageKey",
@@ -111,77 +111,77 @@ const we = /* @__PURE__ */ M({
     "onEnd"
   ],
   setup(n, { slots: l }) {
-    const t = y(), e = K(() => n.handle ?? t.value), a = n.storageKey && ge(
+    const t = g(), e = U(() => n.handle ?? t.value), a = n.storageKey && be(
       n.storageKey,
-      D(n.initialValue) || { x: 0, y: 0 },
-      ye ? n.storageType === "session" ? sessionStorage : localStorage : void 0
-    ), r = a || n.initialValue || { x: 0, y: 0 }, f = z(xe(t, {
+      E(n.initialValue) || { x: 0, y: 0 },
+      me ? n.storageType === "session" ? sessionStorage : localStorage : void 0
+    ), r = a || n.initialValue || { x: 0, y: 0 }, c = L(ke(t, {
       ...n,
       handle: e,
       initialValue: r,
-      onEnd: (p, w) => {
-        var c;
-        (c = n.onEnd) == null || c.call(n, p, w), a && (a.value.x = p.x, a.value.y = p.y);
+      onEnd: (f, h) => {
+        var i;
+        (i = n.onEnd) == null || i.call(n, f, h), a && (a.value.x = f.x, a.value.y = f.y);
       }
     }));
     return () => {
       if (l.default)
-        return ie(n.as || "div", { ref: t, style: `touch-action:none;${f.style}` }, l.default(f));
+        return de(n.as || "div", { ref: t, style: `touch-action:none;${c.style}` }, l.default(c));
     };
   }
-}), $e = Symbol("CONTROLS_CONTEXT_KEY"), te = "default", F = z({});
-function Ce(n = te) {
-  return ce($e, F), F[n];
+}), Se = Symbol("CONTROLS_CONTEXT_KEY"), se = "default", O = L({});
+function Ke(n = se) {
+  return fe(Se, O), O[n];
 }
-const j = (n) => {
+const H = (n) => {
   const l = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
   return typeof n == "boolean" ? "boolean" : typeof n == "number" ? "number" : typeof n == "string" && l.test(n) ? "color" : typeof n == "string" ? "string" : n.isVector3 || n.isVector2 || n.isEuler || n instanceof Array ? "vector" : n.min !== void 0 || n.max !== void 0 || n.step !== void 0 ? "range" : n.options && Array.isArray(n.options) ? "select" : "unknown";
-}, X = (n, l, t, e) => {
+}, N = (n, l, t, e) => {
   const a = {
-    key: y(n),
-    label: y(n),
-    name: y(n),
-    type: y(t),
-    value: y(l),
-    visible: y(!0),
-    [n]: y(l)
+    key: g(n),
+    label: g(n),
+    name: g(n),
+    type: g(t),
+    value: g(l),
+    visible: g(!0),
+    [n]: g(l)
   };
-  return e && (a.folder = y(e)), a;
-}, ke = (n, l) => {
+  return e && (a.folder = g(e)), a;
+}, Te = (n, l) => {
   let t = 1, e = `${n}_${t}`;
   for (; l[e]; )
     t++, e = `${n}_${t}`;
   return e;
-}, An = (n, l, t) => {
-  const e = {}, a = typeof n == "string" ? n : null, r = a ? l : n, i = a && a !== "fpsgraph" ? t : l, f = (i == null ? void 0 : i.uuid) || te;
-  if (F[f] || (F[f] = z({})), n === "fpsgraph") {
-    const o = X("fpsgraph", null, "fpsgraph", null);
-    return F[f].fpsgraph = o, e.fpsgraph = o, E(z(e));
+}, Fn = (n, l, t) => {
+  const e = {}, a = typeof n == "string" ? n : null, r = a ? l : n, u = a && a !== "fpsgraph" ? t : l, c = (u == null ? void 0 : u.uuid) || se;
+  if (O[c] || (O[c] = L({})), n === "fpsgraph") {
+    const o = N("fpsgraph", null, "fpsgraph", null);
+    return O[c].fpsgraph = o, e.fpsgraph = o, z(L(e));
   }
-  const p = F[f], w = ue(r), c = w ? E(r) : {};
+  const f = O[c], h = pe(r), i = h ? z(r) : {};
   for (const o in r) {
-    let u = r[o], h = o;
-    if (w && c[o] && (u = c[o]), a && (h = `${a}${o.charAt(0).toUpperCase() + o.slice(1)}`), !a && p[h] && (h = ke(o, p)), typeof u == "object" && !L(u) && !Array.isArray(u) && u.value !== void 0) {
-      const s = u, m = L(s.value) ? s.value : y(s.value), $ = j(s), g = X(o, m, $, a);
-      $ === "select" && (g.options = y(s.options.map((x) => typeof x == "object" && x.text && x.value ? x : {
-        text: x,
-        value: x
-      }))), $ === "range" && (g.min = y(s.min || 0), g.max = y(s.max || 1), g.step = y(s.step || 0.1)), g.label.value = s.label || o, g.visible.value = s.visible !== void 0 ? s.visible : !0, p[h] = g, e[h] = g;
+    let p = r[o], b = o;
+    if (h && i[o] && (p = i[o]), a && (b = `${a}${o.charAt(0).toUpperCase() + o.slice(1)}`), !a && f[b] && (b = Te(o, f)), typeof p == "object" && !W(p) && !Array.isArray(p) && p.value !== void 0) {
+      const y = p, K = W(y.value) ? y.value : g(y.value), I = H(y), w = N(o, K, I, a);
+      I === "select" && (w.options = g(y.options.map(($) => typeof $ == "object" && $.text && $.value ? $ : {
+        text: $,
+        value: $
+      }))), I === "range" && (w.min = g(y.min || 0), w.max = g(y.max || 1), w.step = g(y.step || 0.1)), w.label.value = y.label || o, w.visible.value = y.visible !== void 0 ? y.visible : !0, f[b] = w, e[b] = w;
       continue;
     }
-    if (L(u)) {
-      const s = X(o, u, j(u.value), a);
-      p[h] = s, e[h] = s;
+    if (W(p)) {
+      const y = N(o, p, H(p.value), a);
+      f[b] = y, e[b] = y;
       continue;
-    } else if (typeof u == "object" && !Array.isArray(u)) {
-      const s = E(u);
-      s[o] && (u = s[o]);
+    } else if (typeof p == "object" && !Array.isArray(p)) {
+      const y = z(p);
+      y[o] && (p = y[o]);
     }
-    const T = X(o, u, j(u), a);
-    p[h] = T, e[h] = T, T.uniqueKey = h;
+    const D = N(o, p, H(p), a);
+    f[b] = D, e[b] = D, D.uniqueKey = b;
   }
-  return Object.keys(e).length > 1 ? E(z(e)) : Object.values(e)[0];
-}, Me = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Se = ["for"], Te = ["id", "value", "min", "max", "step"], Ae = /* @__PURE__ */ M({
+  return Object.keys(e).length > 1 ? z(L(e)) : Object.values(e)[0];
+}, Ae = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ie = ["for"], De = ["id", "value", "min", "max", "step"], Fe = /* @__PURE__ */ S({
   __name: "NumberControl",
   props: {
     label: {},
@@ -190,40 +190,40 @@ const j = (n) => {
   emits: ["change"],
   setup(n, { emit: l }) {
     const t = n;
-    function e(c) {
-      const { target: o } = c;
+    function e(i) {
+      const { target: o } = i;
       l("change", o.valueAsNumber);
     }
-    const a = R(), r = y(0), i = y(!1), f = (c) => {
-      r.value = c.clientX, i.value = !0;
-    }, p = () => {
-      i.value = !1;
-    }, w = (c) => Math.floor(Math.abs(c) / 10);
-    return N(a.x, (c) => {
-      if (i.value) {
-        const o = c - r.value, u = w(o);
-        o > 0 ? l("change", t.control.value + 1 + u) : o < 0 && l("change", t.control.value - 1 + u), t.control.min !== void 0 && t.control.value < t.control.min && l("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && l("change", t.control.max), r.value = c;
+    const a = J(), r = g(0), u = g(!1), c = (i) => {
+      r.value = i.clientX, u.value = !0;
+    }, f = () => {
+      u.value = !1;
+    }, h = (i) => Math.floor(Math.abs(i) / 10);
+    return V(a.x, (i) => {
+      if (u.value) {
+        const o = i - r.value, p = h(o);
+        o > 0 ? l("change", t.control.value + 1 + p) : o < 0 && l("change", t.control.value - 1 + p), t.control.min !== void 0 && t.control.value < t.control.min && l("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && l("change", t.control.max), r.value = i;
       }
-    }), (c, o) => (v(), _("div", Me, [
+    }), (i, o) => (v(), _("div", Ae, [
       d("label", {
         class: "text-gray-500 w-1/3",
-        for: c.control.uniqueKey
-      }, k(c.label), 9, Se),
+        for: i.control.uniqueKey
+      }, M(i.label), 9, Ie),
       d("input", {
-        id: c.control.uniqueKey,
-        value: c.control.value,
-        class: S(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": i.value }]),
+        id: i.control.uniqueKey,
+        value: i.control.value,
+        class: A(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": u.value }]),
         type: "number",
-        min: c.control.min,
-        max: c.control.max,
-        step: c.control.step,
+        min: i.control.min,
+        max: i.control.max,
+        step: i.control.step,
         onInput: e,
-        onMousedown: f,
-        onMouseup: p
-      }, null, 42, Te)
+        onMousedown: c,
+        onMouseup: f
+      }, null, 42, De)
     ]));
   }
-}), De = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Ie = ["for"], Ke = ["id", "value", "aria-label"], Ee = /* @__PURE__ */ M({
+}), Ee = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, Ve = ["for"], qe = ["id", "value", "aria-label"], Ue = /* @__PURE__ */ S({
   __name: "TextControl",
   props: {
     label: {},
@@ -235,11 +235,11 @@ const j = (n) => {
       const { target: a } = e;
       l("change", a.value);
     }
-    return (e, a) => (v(), _("div", De, [
+    return (e, a) => (v(), _("div", Ee, [
       d("label", {
         for: e.control.uniqueKey,
         class: "text-gray-500 w-1/3"
-      }, k(e.label), 9, Ie),
+      }, M(e.label), 9, Ve),
       d("input", {
         id: e.control.uniqueKey,
         value: e.control.value,
@@ -249,10 +249,10 @@ const j = (n) => {
         "aria-label": e.label,
         placeholder: "Enter value here...",
         onChange: t
-      }, null, 40, Ke)
+      }, null, 40, qe)
     ]));
   }
-}), Fe = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Ve = { class: "text-gray-500 w-1/3" }, qe = ["id", "checked"], Ue = ["for"], ze = ["aria-checked"], Oe = { class: "i-ic:baseline-check text-light" }, Xe = /* @__PURE__ */ M({
+}), ze = { class: "flex px-4 justify-start gap-2 items-center mb-2 min-h-32px" }, Oe = { class: "text-gray-500 w-1/3" }, Xe = ["id", "checked"], Pe = ["for"], Le = ["aria-checked"], Be = { class: "i-ic:baseline-check text-light" }, Ne = /* @__PURE__ */ S({
   __name: "BooleanControl",
   props: {
     label: {},
@@ -262,21 +262,21 @@ const j = (n) => {
   setup(n, { emit: l }) {
     const t = n;
     function e(r) {
-      const { target: i } = r;
-      l("change", i.checked);
+      const { target: u } = r;
+      l("change", u.checked);
     }
     function a(r) {
       (r.code === "Space" || r.code === "Enter") && (r.preventDefault(), l("change", !t.control.value));
     }
-    return (r, i) => (v(), _("div", Fe, [
-      d("label", Ve, k(r.label), 1),
+    return (r, u) => (v(), _("div", ze, [
+      d("label", Oe, M(r.label), 1),
       d("input", {
         id: r.control.uniqueKey,
         checked: r.control.value,
         class: "hidden",
         type: "checkbox",
         onInput: e
-      }, null, 40, qe),
+      }, null, 40, Xe),
       d("label", {
         for: r.control.uniqueKey,
         class: "inline-flex items-center cursor-pointer"
@@ -285,17 +285,17 @@ const j = (n) => {
           tabindex: "0",
           role: "checkbox",
           "aria-checked": r.control.value.toString(),
-          class: S([{ "bg-dark-500": r.control.value, "bg-gray-200": !r.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),
+          class: A([{ "bg-dark-500": r.control.value, "bg-gray-200": !r.control.value }, "w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),
           onKeydown: a
         }, [
-          J(d("i", Oe, null, 512), [
-            [Q, r.control.value]
+          te(d("i", Be, null, 512), [
+            [oe, r.control.value]
           ])
-        ], 42, ze)
-      ], 8, Ue)
+        ], 42, Le)
+      ], 8, Pe)
     ]));
   }
-}), Le = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, Pe = ["value", "min", "max", "step"], Ne = ["value", "min", "max", "step"], We = /* @__PURE__ */ M({
+}), We = { class: "px-4 relative flex justify-between gap-4 items-center mb-2" }, je = ["value", "min", "max", "step"], Re = ["value", "min", "max", "step"], Ye = /* @__PURE__ */ S({
   __name: "SliderControl",
   props: {
     label: {},
@@ -305,60 +305,60 @@ const j = (n) => {
   setup(n, { emit: l }) {
     const t = n;
     function e(o) {
-      const { target: u } = o;
-      l("change", u.valueAsNumber);
+      const { target: p } = o;
+      l("change", p.valueAsNumber);
     }
-    const a = K(() => ({
+    const a = U(() => ({
       backgroundImage: `linear-gradient(to right, #333 0% ${100 * (t.control.value - (t.control.min || 0)) / ((t.control.max || 100) - (t.control.min || 0))}%, #e2e2e2 0%)`
-    })), r = R(), i = y(0), f = y(!1), p = (o) => {
-      i.value = o.clientX, f.value = !0;
-    }, w = () => {
-      f.value = !1;
-    }, c = (o) => Math.floor(Math.abs(o) / 10);
-    return N(r.x, (o) => {
-      if (f.value) {
-        const u = o - i.value, h = c(u);
-        u > 0 ? l("change", t.control.value + 1 + h) : u < 0 && l("change", t.control.value - 1 + h), t.control.min !== void 0 && t.control.value < t.control.min && l("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && l("change", t.control.max), i.value = o;
+    })), r = J(), u = g(0), c = g(!1), f = (o) => {
+      u.value = o.clientX, c.value = !0;
+    }, h = () => {
+      c.value = !1;
+    }, i = (o) => Math.floor(Math.abs(o) / 10);
+    return V(r.x, (o) => {
+      if (c.value) {
+        const p = o - u.value, b = i(p);
+        p > 0 ? l("change", t.control.value + 1 + b) : p < 0 && l("change", t.control.value - 1 + b), t.control.min !== void 0 && t.control.value < t.control.min && l("change", t.control.min), t.control.max !== void 0 && t.control.value > t.control.max && l("change", t.control.max), u.value = o;
       }
-    }), (o, u) => (v(), _("div", Le, [
+    }), (o, p) => (v(), _("div", We, [
       d("label", {
-        class: S(["text-gray-500 w-1/3", { "flex justify-between items-center": o.control.icon }])
+        class: A(["text-gray-500 w-1/3", { "flex justify-between items-center": o.control.icon }])
       }, [
-        de(k(o.label) + " ", 1),
+        ve(M(o.label) + " ", 1),
         d("i", {
-          class: S(`i-${o.control.icon}`)
+          class: A(`i-${o.control.icon}`)
         }, null, 2)
       ], 2),
       d("input", {
         value: o.control.value,
         class: "w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",
-        style: fe(a.value),
+        style: ge(a.value),
         type: "range",
         min: o.control.min,
         max: o.control.max,
         step: o.control.step,
         onInput: e
-      }, null, 44, Pe),
+      }, null, 44, je),
       d("input", {
         value: o.control.value,
-        class: S(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": f.value }]),
+        class: A(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans", { "cursor-ew-resize": c.value }]),
         type: "number",
         min: o.control.min,
         max: o.control.max,
         step: o.control.step,
         onInput: e,
-        onMousedown: p,
-        onMouseup: w
-      }, null, 42, Ne)
+        onMousedown: f,
+        onMouseup: h
+      }, null, 42, Re)
     ]));
   }
 });
-const je = (n, l) => {
+const He = (n, l) => {
   const t = n.__vccOpts || n;
   for (const [e, a] of l)
     t[e] = a;
   return t;
-}, Be = /* @__PURE__ */ je(We, [["__scopeId", "data-v-9e6267fe"]]), Re = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Ye = { class: "text-gray-500 w-1/3" }, He = ["id", "value", "aria-label"], Ge = ["id", "aria-label", "value"], Je = /* @__PURE__ */ M({
+}, Ge = /* @__PURE__ */ He(Ye, [["__scopeId", "data-v-9e6267fe"]]), Je = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, Qe = { class: "text-gray-500 w-1/3" }, Ze = ["id", "value", "aria-label"], en = ["id", "aria-label", "value"], nn = /* @__PURE__ */ S({
   __name: "ColorControl",
   props: {
     label: {},
@@ -370,17 +370,17 @@ const je = (n, l) => {
       const { target: a } = e;
       l("change", a.value);
     }
-    return (e, a) => (v(), _("div", Re, [
-      d("label", Ye, k(e.label), 1),
+    return (e, a) => (v(), _("div", Je, [
+      d("label", Qe, M(e.label), 1),
       d("input", {
         id: e.control.uniqueKey,
         tabindex: "0",
         value: e.control.value,
         "aria-label": e.label,
-        class: S(["focus:outline-none focus:ring-2 focus:ring-blue-600", { "important-outline-gray-200": e.control.value === "#ffffff" }]),
+        class: A(["focus:outline-none focus:ring-2 focus:ring-blue-600", { "important-outline-gray-200": e.control.value === "#ffffff" }]),
         type: "color",
         onInput: t
-      }, null, 42, He),
+      }, null, 42, Ze),
       d("input", {
         id: e.control.uniqueKey,
         tabindex: "0",
@@ -389,29 +389,29 @@ const je = (n, l) => {
         class: "p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",
         type: "text",
         onInput: t
-      }, null, 40, Ge)
+      }, null, 40, en)
     ]));
   }
 });
-function Qe(n) {
+function tn(n) {
   if (typeof n == "number")
     return [n, n, n];
-  if (oe(n)) {
+  if (ue(n)) {
     const { x: l, y: t, z: e } = n;
     return [l, t, e];
   }
   return n;
 }
-function Ze(n) {
+function on(n) {
   return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z > "u";
 }
-function oe(n) {
+function ue(n) {
   return n && typeof n.x == "number" && typeof n.y == "number" && typeof n.z == "number";
 }
-const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-between gap-0.5" }, tn = {
+const ln = { class: "text-gray-500 w-1/3" }, an = { class: "relative w-2/3 flex justify-between gap-0.5" }, rn = {
   key: 0,
   class: "font-bold px-1 py-1 text-0.65rem text-gray-300"
-}, on = ["id", "value", "onInput", "onMousedown", "onMouseup"], ln = /* @__PURE__ */ M({
+}, sn = ["id", "step", "value", "onInput", "onMousedown", "onMouseup", "onFocus"], un = /* @__PURE__ */ S({
   __name: "VectorControl",
   props: {
     label: {},
@@ -419,67 +419,83 @@ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-b
   },
   emits: ["change"],
   setup(n, { emit: l }) {
-    const t = n, e = R(), a = y(0), r = y(!1), i = y(0), f = (s, m) => {
-      i.value = m, a.value = s.clientX, r.value = !0;
-    }, p = (s, m) => {
-      i.value = m, r.value = !1;
-    }, w = () => {
-      r.value = !1;
-    }, c = (s) => Math.floor(Math.abs(s) / 10), o = K(() => Qe(t.control.value)), u = y(["x", "y", "z"]), h = K(() => Ze(t.control.value) || oe(t.control.value));
-    function T(s, m) {
-      const { value: $ } = t.control, { target: g } = s;
-      i.value = m, $[h.value ? u.value[i.value] : i.value] = parseFloat(g.value), l("change", $);
+    const t = n, e = J(), { pressed: a } = _e(), r = g(0), u = g(!1), c = g(0), f = g(null), h = g(1), i = Q("Shift"), o = Q("Alt");
+    V(i, (s) => {
+      h.value = s ? 10 : 1;
+    }), V(o, (s) => {
+      h.value = s ? 0.1 : 1;
+    });
+    const p = (s) => {
+      f.value = s;
+    }, b = () => {
+      f.value = null;
+    }, D = (s, x) => {
+      c.value = x, r.value = s.clientX, u.value = !0;
+    }, y = (s, x) => {
+      c.value = x, u.value = !1;
+    }, K = () => {
+      u.value = !1;
+    };
+    V(a, (s) => {
+      s || (u.value = !1);
+    });
+    const I = (s) => Math.floor(Math.abs(s) / 10), w = U(() => tn(t.control.value)), $ = g(["x", "y", "z"]), X = U(() => on(t.control.value) || ue(t.control.value));
+    function R(s, x) {
+      const { value: C } = t.control, { target: m } = s;
+      c.value = x, C[X.value ? $.value[c.value] : c.value] = parseFloat(m.value), l("change", C);
     }
-    return N(e.x, (s) => {
-      if (r.value) {
-        const m = s - a.value, $ = c(m), { value: g } = t.control, x = h.value ? u.value[i.value] : i.value;
-        m > 0 ? g[x] += 0.1 + $ : m < 0 && (g[x] -= 0.1 + $), t.control.min !== void 0 && g < t.control.min && (g[x] = t.control.min), t.control.max !== void 0 && g > t.control.max && (g[x] = t.control.max), l("change", g), a.value = s;
+    return V(e.x, (s) => {
+      if (u.value) {
+        const x = s - r.value, C = I(x), { value: m } = t.control, T = X.value ? $.value[c.value] : c.value;
+        x > 0 ? m[T] += h.value + C : x < 0 && (m[T] -= h.value + C), t.control.min !== void 0 && m < t.control.min && (m[T] = t.control.min), t.control.max !== void 0 && m > t.control.max && (m[T] = t.control.max), l("change", m), r.value = s;
       }
-    }), (s, m) => (v(), _("div", {
+    }), (s, x) => (v(), _("div", {
       class: "flex px-4 justify-between gap-1 items-center mb-2",
-      onMouseup: m[0] || (m[0] = ($) => w())
+      onMouseup: x[0] || (x[0] = (C) => K())
     }, [
-      d("label", en, k(s.label), 1),
-      d("div", nn, [
-        (v(!0), _(I, null, O(o.value, ($, g) => (v(), _("div", {
-          key: s.label + g,
-          class: "flex items-center w-1/3 bg-gray-100 rounded"
+      d("label", ln, M(s.label), 1),
+      d("div", an, [
+        (v(!0), _(q, null, B(w.value, (C, m) => (v(), _("div", {
+          key: s.label + m,
+          class: A(["flex items-center w-1/3 bg-gray-100 rounded", { "w-2/5": f.value === m }])
         }, [
-          u.value[g] && h.value ? (v(), _("span", tn, k(u.value[g]), 1)) : P("", !0),
+          $.value[m] && X.value ? (v(), _("span", rn, M($.value[m]), 1)) : j("", !0),
           d("input", {
-            id: `${s.control.uniqueKey}-${u.value[g]}`,
+            id: `${s.control.uniqueKey}-${$.value[m]}`,
             type: "number",
-            step: "0.1",
-            class: S(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none", { "cursor-ew-resize": r.value }]),
-            value: o.value[g].toFixed(2),
-            onInput: (x) => T(x, g),
-            onMousedown: (x) => f(x, g),
-            onMouseup: (x) => p(x, g)
-          }, null, 42, on)
-        ]))), 128))
+            step: h.value,
+            class: A(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none", { "cursor-ew-resize": u.value }]),
+            value: w.value[m].toFixed(2),
+            onInput: (T) => R(T, m),
+            onMousedown: (T) => D(T, m),
+            onMouseup: (T) => y(T, m),
+            onFocus: (T) => p(m),
+            onBlur: b
+          }, null, 42, sn)
+        ], 2))), 128))
       ])
     ], 32));
   }
-}), an = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, rn = { class: "text-gray-500 w-1/3" }, sn = { class: "relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans" }, cn = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, un = ["points"], Y = 160, B = 40, U = 2, H = 100, G = 20, dn = /* @__PURE__ */ M({
+}), cn = { class: "flex px-4 justify-between gap-4 items-center mb-2" }, dn = { class: "text-gray-500 w-1/3" }, fn = { class: "relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans" }, pn = { class: "absolute bottom-0.5 right-0.5 font-sans text-xs" }, vn = ["points"], Z = 160, G = 40, P = 2, ee = 100, ne = 20, gn = /* @__PURE__ */ S({
   __name: "FPSGraph",
   props: {
     label: {},
     control: {}
   },
   setup(n) {
-    const l = be({ every: H }), t = y(""), e = y([]), a = y(Y / U);
+    const l = xe({ every: ee }), t = g(""), e = g([]), a = g(Z / P);
     let r = performance.now();
-    return he(({ timestamp: i }) => {
-      i - r >= H && (r = i, e.value.push(l.value), e.value.length > a.value && e.value.shift(), t.value = e.value.map(
-        (f, p) => `${p * U},${B + G - U / 2 - f * (B + G - U) / 120}`
+    return we(({ timestamp: u }) => {
+      u - r >= ee && (r = u, e.value.push(l.value), e.value.length > a.value && e.value.shift(), t.value = e.value.map(
+        (c, f) => `${f * P},${G + ne - P / 2 - c * (G + ne - P) / 120}`
       ).join(" "));
-    }), (i, f) => (v(), _("div", an, [
-      d("label", rn, k(i.label), 1),
-      d("div", sn, [
-        d("div", cn, k(Math.round(A(l))) + " FPS ", 1),
+    }), (u, c) => (v(), _("div", cn, [
+      d("label", dn, M(u.label), 1),
+      d("div", fn, [
+        d("div", pn, M(Math.round(F(l))) + " FPS ", 1),
         (v(), _("svg", {
-          width: Y,
-          height: B,
+          width: Z,
+          height: G,
           xmlns: "http://www.w3.org/2000/svg",
           class: "bg-gray-100"
         }, [
@@ -487,15 +503,15 @@ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-b
             points: t.value,
             fill: "none",
             stroke: "lightgray",
-            "stroke-width": U,
+            "stroke-width": P,
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
-          }, null, 8, un)
+          }, null, 8, vn)
         ]))
       ])
     ]));
   }
-}), fn = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, pn = ["for"], vn = ["id", "value"], gn = ["value"], yn = /* @__PURE__ */ M({
+}), yn = { class: "flex px-4 justify-between gap-4 items-center mb-2 min-h-32px" }, hn = ["for"], bn = ["id", "value"], mn = ["value"], _n = /* @__PURE__ */ S({
   __name: "SelectControl",
   props: {
     label: {},
@@ -506,25 +522,25 @@ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-b
     function t(e) {
       l("change", e.target.value);
     }
-    return (e, a) => (v(), _("div", fn, [
+    return (e, a) => (v(), _("div", yn, [
       d("label", {
         class: "text-gray-500 w-1/3",
         for: e.control.uniqueKey
-      }, k(e.label), 9, pn),
+      }, M(e.label), 9, hn),
       d("select", {
         id: e.control.uniqueKey,
         value: e.control.value,
         class: "p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",
         onChange: t
       }, [
-        (v(!0), _(I, null, O(e.control.options, (r) => (v(), _("option", {
+        (v(!0), _(q, null, B(e.control.options, (r) => (v(), _("option", {
           key: r.value,
           value: r.value
-        }, k(r.text), 9, gn))), 128))
-      ], 40, vn)
+        }, M(r.text), 9, mn))), 128))
+      ], 40, bn)
     ]));
   }
-}), le = /* @__PURE__ */ M({
+}), ce = /* @__PURE__ */ S({
   __name: "ControlInput",
   props: {
     control: {}
@@ -534,53 +550,53 @@ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-b
     function t(e) {
       l("change", e);
     }
-    return (e, a) => e.control.visible ? (v(), _(I, { key: 0 }, [
-      e.control.type === "color" ? (v(), C(Je, {
+    return (e, a) => e.control.visible ? (v(), _(q, { key: 0 }, [
+      e.control.type === "color" ? (v(), k(nn, {
         key: 0,
         label: e.control.label,
         control: e.control,
         onChange: t
-      }, null, 8, ["label", "control"])) : e.control.type === "select" ? (v(), C(yn, {
+      }, null, 8, ["label", "control"])) : e.control.type === "select" ? (v(), k(_n, {
         key: 1,
         label: e.control.label,
         control: e.control,
         onChange: t
-      }, null, 8, ["label", "control"])) : e.control.type === "vector" ? (v(), C(ln, {
+      }, null, 8, ["label", "control"])) : e.control.type === "vector" ? (v(), k(un, {
         key: 2,
         label: e.control.label,
         control: e.control,
         onChange: t
-      }, null, 8, ["label", "control"])) : e.control.type === "boolean" ? (v(), C(Xe, {
+      }, null, 8, ["label", "control"])) : e.control.type === "boolean" ? (v(), k(Ne, {
         key: 3,
         label: e.control.label,
         control: e.control,
         onChange: t
-      }, null, 8, ["label", "control"])) : e.control.type === "fpsgraph" ? (v(), C(dn, {
+      }, null, 8, ["label", "control"])) : e.control.type === "fpsgraph" ? (v(), k(gn, {
         key: 4,
         label: e.control.label,
         control: e.control
-      }, null, 8, ["label", "control"])) : e.control.type === "number" ? (v(), C(Ae, {
+      }, null, 8, ["label", "control"])) : e.control.type === "number" ? (v(), k(Fe, {
         key: 5,
         label: e.control.label,
         control: e.control,
         onChange: t
-      }, null, 8, ["label", "control"])) : e.control.type === "range" ? (v(), C(Be, {
+      }, null, 8, ["label", "control"])) : e.control.type === "range" ? (v(), k(Ge, {
         key: 6,
         label: e.control.label,
         control: e.control,
         onChange: t
-      }, null, 8, ["label", "control"])) : (v(), C(Ee, {
+      }, null, 8, ["label", "control"])) : (v(), k(Ue, {
         key: 7,
         label: e.control.label,
         control: e.control,
         onChange: t
       }, null, 8, ["label", "control"]))
-    ], 64)) : P("", !0);
+    ], 64)) : j("", !0);
   }
-}), bn = { class: "mb-4" }, hn = ["aria-expanded", "data-folder"], mn = {
+}), xn = { class: "mb-4" }, wn = ["aria-expanded", "data-folder"], $n = {
   class: "bg-white rounded-b pt-4",
   role: "menu"
-}, _n = /* @__PURE__ */ M({
+}, Cn = /* @__PURE__ */ S({
   __name: "Folder",
   props: {
     controls: {},
@@ -590,10 +606,10 @@ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-b
     function l(a, r) {
       r.value = a;
     }
-    const t = y(!1), e = () => {
+    const t = g(!1), e = () => {
       t.value = !t.value;
     };
-    return (a, r) => (v(), _("div", bn, [
+    return (a, r) => (v(), _("div", xn, [
       d("button", {
         class: "flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer",
         "aria-expanded": t.value,
@@ -603,85 +619,85 @@ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-b
         tabindex: "0",
         onClick: e
       }, [
-        d("span", null, k(a.label), 1),
+        d("span", null, M(a.label), 1),
         d("i", {
-          class: S(t.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
+          class: A(t.value ? "i-ic:baseline-keyboard-arrow-up" : "i-ic:baseline-keyboard-arrow-down")
         }, null, 2)
-      ], 8, hn),
-      pe(ve, {
+      ], 8, wn),
+      ye(he, {
         name: "slide",
         "enter-active-class": " animate-fade-in animate-duration-200 animate-ease-in-out",
         "leave-active-class": " animate-fade-out animate-duration-200 animate-ease-in-out"
       }, {
-        default: Z(() => [
-          J(d("div", mn, [
-            (v(!0), _(I, null, O(a.controls, (i) => (v(), C(le, {
-              key: i.label,
-              control: i,
+        default: le(() => [
+          te(d("div", $n, [
+            (v(!0), _(q, null, B(a.controls, (u) => (v(), k(ce, {
+              key: u.label,
+              control: u,
               role: "menuitem",
-              onChange: (f) => l(f, i)
+              onChange: (c) => l(c, u)
             }, null, 8, ["control", "onChange"]))), 128))
           ], 512), [
-            [Q, t.value]
+            [oe, t.value]
           ])
         ]),
         _: 1
       })
     ]));
   }
-}), xn = {
+}), kn = {
   tabindex: "0",
   class: "bg-white shadow-xl rounded border-4 border-solid border-black"
-}, wn = /* @__PURE__ */ d("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), $n = /* @__PURE__ */ d("div", null, [
+}, Mn = /* @__PURE__ */ d("i", { class: "h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs" }, "🍰", -1), Sn = /* @__PURE__ */ d("div", null, [
   /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
   /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" }),
   /* @__PURE__ */ d("i", { class: "i-ic-baseline-drag-indicator" })
-], -1), Cn = /* @__PURE__ */ d("div", null, null, -1), kn = [
-  wn,
-  $n,
-  Cn
-], Mn = 280, Dn = /* @__PURE__ */ M({
+], -1), Kn = /* @__PURE__ */ d("div", null, null, -1), Tn = [
+  Mn,
+  Sn,
+  Kn
+], An = 280, En = /* @__PURE__ */ S({
   __name: "TresLeches",
   props: {
     uuid: {}
   },
   setup(n) {
-    const l = n, { uuid: t } = E(l), { width: e } = ee(), a = y(null), r = Ce(t == null ? void 0 : t.value);
-    function i(p, w) {
-      r[A(p)].value = w, r[A(p)][A(p)] = w;
+    const l = n, { uuid: t } = z(l), { width: e } = ae(), a = g(null), r = Ke(t == null ? void 0 : t.value);
+    function u(f, h) {
+      r[F(f)].value = h, r[F(f)][F(f)] = h;
     }
-    const f = K(() => {
-      const p = {};
-      for (const w in r) {
-        const c = r[w], o = c.folder || "default";
-        p[o] || (p[o] = []), p[o].push(c);
+    const c = U(() => {
+      const f = {};
+      for (const h in r) {
+        const i = r[h], o = i.folder || "default";
+        f[o] || (f[o] = []), f[o].push(i);
       }
-      return p;
+      return f;
     });
-    return (p, w) => (v(), C(A(we), {
-      id: A(t),
-      "initial-value": { x: A(e) - Mn - 40, y: 10 },
-      class: S(["absolute select-none z-24 w-280px font-sans text-xs", p.$attrs.class]),
+    return (f, h) => (v(), k(F(Me), {
+      id: F(t),
+      "initial-value": { x: F(e) - An - 40, y: 10 },
+      class: A(["absolute select-none z-24 w-280px font-sans text-xs", f.$attrs.class]),
       handle: a.value
     }, {
-      default: Z(() => [
-        d("div", xn, [
+      default: le(() => [
+        d("div", kn, [
           d("header", {
             ref_key: "handle",
             ref: a,
             class: "relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"
-          }, kn, 512),
-          (v(!0), _(I, null, O(f.value, (c, o) => (v(), _(I, { key: o }, [
-            o !== "default" ? (v(), C(_n, {
+          }, Tn, 512),
+          (v(!0), _(q, null, B(c.value, (i, o) => (v(), _(q, { key: o }, [
+            o !== "default" ? (v(), k(Cn, {
               key: 0,
               label: o,
-              controls: c
-            }, null, 8, ["label", "controls"])) : P("", !0),
-            o === "default" ? (v(!0), _(I, { key: 1 }, O(c, (u) => (v(), C(le, {
-              key: u.label,
-              control: u,
-              onChange: (h) => i(u.key, h)
-            }, null, 8, ["control", "onChange"]))), 128)) : P("", !0)
+              controls: i
+            }, null, 8, ["label", "controls"])) : j("", !0),
+            o === "default" ? (v(!0), _(q, { key: 1 }, B(i, (p) => (v(), k(ce, {
+              key: p.label,
+              control: p,
+              onChange: (b) => u(p.key, b)
+            }, null, 8, ["control", "onChange"]))), 128)) : j("", !0)
           ], 64))), 128))
         ])
       ]),
@@ -690,7 +706,7 @@ const en = { class: "text-gray-500 w-1/3" }, nn = { class: "w-2/3 flex justify-b
   }
 });
 export {
-  Dn as TresLeches,
-  An as useControls,
-  Ce as useControlsProvider
+  En as TresLeches,
+  Fn as useControls,
+  Ke as useControlsProvider
 };

package/dist/tresleches.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/leches
- * version: v0.11.0
+ * version: v0.12.0
  * (c) 2023
  * description: Tasty GUI for Vue controls 🍰
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(w,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],e):(w=typeof globalThis<"u"?globalThis:w||self,e(w.tresleches={},w.Vue,w.VueUseCore))})(this,function(w,e,x){"use strict";const We="";function E(n){return typeof n=="function"?n():e.unref(n)}const T=typeof window<"u"&&typeof document<"u";function U(n,r={}){if(!e.isRef(n))return e.toRefs(n);const o=Array.isArray(n.value)?Array.from({length:n.value.length}):{};for(const t in n.value)o[t]=e.customRef(()=>({get(){return n.value[t]},set(a){var s;if((s=E(r.replaceRef))!=null?s:!0)if(Array.isArray(n.value)){const f=[...n.value];f[t]=a,n.value=f}else{const f={...n.value,[t]:a};Object.setPrototypeOf(f,Object.getPrototypeOf(n.value)),n.value=f}else n.value[t]=a}}));return o}const O=T?window:void 0;function R(n,r={}){const{pointerTypes:o,preventDefault:t,stopPropagation:a,exact:s,onMove:c,onEnd:f,onStart:p,initialValue:_,axis:d="both",draggingElement:l=O,handle:u=n}=r,{width:y}=x.useWindowSize();let C=y.value;const i=e.ref(E(_)??{x:0,y:0});e.watch(y,()=>{const g=y.value-C;i.value.x+=g,C=y.value});const h=e.ref(),k=g=>o?o.includes(g.pointerType):!0,m=g=>{E(t)&&g.preventDefault(),E(a)&&g.stopPropagation()},b=g=>{if(!k(g)||E(s)&&g.target!==E(n))return;const $=E(n).getBoundingClientRect(),N={x:g.clientX-$.left,y:g.clientY-$.top};(p==null?void 0:p(N,g))!==!1&&(h.value=N,m(g))},Xe=g=>{if(!k(g)||!h.value)return;let{x:$,y:N}=i.value;(d==="x"||d==="both")&&($=g.clientX-h.value.x),(d==="y"||d==="both")&&(N=g.clientY-h.value.y),i.value={x:$,y:N},c==null||c(i.value,g),m(g)},je=g=>{k(g)&&h.value&&(h.value=void 0,f==null||f(i.value,g),m(g))};if(T){const g={capture:r.capture??!0};x.useEventListener(u,"pointerdown",b,g),x.useEventListener(l,"pointermove",Xe,g),x.useEventListener(l,"pointerup",je,g)}return{...U(i),position:i,isDragging:e.computed(()=>!!h.value),style:e.computed(()=>`left:${i.value.x}px;top:${i.value.y}px;`)}}const P=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(n,{slots:r}){const o=e.ref(),t=e.computed(()=>n.handle??o.value),a=n.storageKey&&x.useStorage(n.storageKey,E(n.initialValue)||{x:0,y:0},x.isClient?n.storageType==="session"?sessionStorage:localStorage:void 0),s=a||n.initialValue||{x:0,y:0},c=(p,_)=>{var d;(d=n.onEnd)==null||d.call(n,p,_),a&&(a.value.x=p.x,a.value.y=p.y)},f=e.reactive(R(o,{...n,handle:t,initialValue:s,onEnd:c}));return()=>{if(r.default)return e.h(n.as||"div",{ref:o,style:`touch-action:none;${f.style}`},r.default(f))}}}),X=Symbol("CONTROLS_CONTEXT_KEY"),F="default",B=e.reactive({});function z(n=F){return e.provide(X,B),B[n]}const D=n=>{const r=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;return typeof n=="boolean"?"boolean":typeof n=="number"?"number":typeof n=="string"&&r.test(n)?"color":typeof n=="string"?"string":n.isVector3||n.isVector2||n.isEuler||n instanceof Array?"vector":n.min!==void 0||n.max!==void 0||n.step!==void 0?"range":n.options&&Array.isArray(n.options)?"select":"unknown"},S=(n,r,o,t)=>{const a={key:e.ref(n),label:e.ref(n),name:e.ref(n),type:e.ref(o),value:e.ref(r),visible:e.ref(!0),[n]:e.ref(r)};return t&&(a.folder=e.ref(t)),a},j=(n,r)=>{let o=1,t=`${n}_${o}`;for(;r[t];)o++,t=`${n}_${o}`;return t},W=(n,r,o)=>{const t={},a=typeof n=="string"?n:null,s=a?r:n,c=a&&a!=="fpsgraph"?o:r,f=(c==null?void 0:c.uuid)||F;if(B[f]||(B[f]=e.reactive({})),n==="fpsgraph"){const l=S("fpsgraph",null,"fpsgraph",null);return B[f].fpsgraph=l,t.fpsgraph=l,e.toRefs(e.reactive(t))}const p=B[f],_=e.isReactive(s),d=_?e.toRefs(s):{};for(const l in s){let u=s[l],y=l;if(_&&d[l]&&(u=d[l]),a&&(y=`${a}${l.charAt(0).toUpperCase()+l.slice(1)}`),!a&&p[y]&&(y=j(l,p)),typeof u=="object"&&!e.isRef(u)&&!Array.isArray(u)&&u.value!==void 0){const i=u,h=e.isRef(i.value)?i.value:e.ref(i.value),k=D(i),m=S(l,h,k,a);k==="select"&&(m.options=e.ref(i.options.map(b=>typeof b=="object"&&b.text&&b.value?b:{text:b,value:b}))),k==="range"&&(m.min=e.ref(i.min||0),m.max=e.ref(i.max||1),m.step=e.ref(i.step||.1)),m.label.value=i.label||l,m.visible.value=i.visible!==void 0?i.visible:!0,p[y]=m,t[y]=m;continue}if(e.isRef(u)){const i=S(l,u,D(u.value),a);p[y]=i,t[y]=i;continue}else if(typeof u=="object"&&!Array.isArray(u)){const i=e.toRefs(u);i[l]&&(u=i[l])}const C=S(l,u,D(u),a);p[y]=C,t[y]=C,C.uniqueKey=y}return Object.keys(t).length>1?e.toRefs(e.reactive(t)):Object.values(t)[0]},Y={class:"flex px-4 justify-between gap-4 items-center mb-2"},H=["for"],v=["id","value","min","max","step"],G=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(d){const{target:l}=d;r("change",l.valueAsNumber)}const a=x.useMouse(),s=e.ref(0),c=e.ref(!1),f=d=>{s.value=d.clientX,c.value=!0},p=()=>{c.value=!1},_=d=>Math.floor(Math.abs(d)/10);return e.watch(a.x,d=>{if(c.value){const l=d-s.value,u=_(l);l>0?r("change",o.control.value+1+u):l<0&&r("change",o.control.value-1+u),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),s.value=d}}),(d,l)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:d.control.uniqueKey},e.toDisplayString(d.label),9,H),e.createElementVNode("input",{id:d.control.uniqueKey,value:d.control.value,class:e.normalizeClass(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":c.value}]),type:"number",min:d.control.min,max:d.control.max,step:d.control.step,onInput:t,onMousedown:f,onMouseup:p},null,42,v)]))}}),J={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Q=["for"],Z=["id","value","aria-label"],ee=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("label",{for:t.control.uniqueKey,class:"text-gray-500 w-1/3"},e.toDisplayString(t.label),9,Q),e.createElementVNode("input",{id:t.control.uniqueKey,value:t.control.value,type:"text",tabindex:"0",class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 border-none font-sans","aria-label":t.label,placeholder:"Enter value here...",onChange:o},null,40,Z)]))}}),te={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},ne={class:"text-gray-500 w-1/3"},oe=["id","checked"],le=["for"],re=["aria-checked"],ae={class:"i-ic:baseline-check text-light"},se=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(s){const{target:c}=s;r("change",c.checked)}function a(s){(s.code==="Space"||s.code==="Enter")&&(s.preventDefault(),r("change",!o.control.value))}return(s,c)=>(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("label",ne,e.toDisplayString(s.label),1),e.createElementVNode("input",{id:s.control.uniqueKey,checked:s.control.value,class:"hidden",type:"checkbox",onInput:t},null,40,oe),e.createElementVNode("label",{for:s.control.uniqueKey,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{tabindex:"0",role:"checkbox","aria-checked":s.control.value.toString(),class:e.normalizeClass([{"bg-dark-500":s.control.value,"bg-gray-200":!s.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),onKeydown:a},[e.withDirectives(e.createElementVNode("i",ae,null,512),[[e.vShow,s.control.value]])],42,re)],8,le)]))}}),ce={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},ie=["value","min","max","step"],de=["value","min","max","step"],ue=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(l){const{target:u}=l;r("change",u.valueAsNumber)}const a=e.computed(()=>({backgroundImage:`linear-gradient(to right, #333 0% ${100*(o.control.value-(o.control.min||0))/((o.control.max||100)-(o.control.min||0))}%, #e2e2e2 0%)`})),s=x.useMouse(),c=e.ref(0),f=e.ref(!1),p=l=>{c.value=l.clientX,f.value=!0},_=()=>{f.value=!1},d=l=>Math.floor(Math.abs(l)/10);return e.watch(s.x,l=>{if(f.value){const u=l-c.value,y=d(u);u>0?r("change",o.control.value+1+y):u<0&&r("change",o.control.value-1+y),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),c.value=l}}),(l,u)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("label",{class:e.normalizeClass(["text-gray-500 w-1/3",{"flex justify-between items-center":l.control.icon}])},[e.createTextVNode(e.toDisplayString(l.label)+" ",1),e.createElementVNode("i",{class:e.normalizeClass(`i-${l.control.icon}`)},null,2)],2),e.createElementVNode("input",{value:l.control.value,class:"w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",style:e.normalizeStyle(a.value),type:"range",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t},null,44,ie),e.createElementVNode("input",{value:l.control.value,class:e.normalizeClass(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":f.value}]),type:"number",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t,onMousedown:p,onMouseup:_},null,42,de)]))}}),Ye="",fe=((n,r)=>{const o=n.__vccOpts||n;for(const[t,a]of r)o[t]=a;return o})(ue,[["__scopeId","data-v-9e6267fe"]]),pe={class:"flex px-4 justify-between gap-4 items-center mb-2"},me={class:"text-gray-500 w-1/3"},ge=["id","value","aria-label"],ye=["id","aria-label","value"],he=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",pe,[e.createElementVNode("label",me,e.toDisplayString(t.label),1),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0",value:t.control.value,"aria-label":t.label,class:e.normalizeClass(["focus:outline-none focus:ring-2 focus:ring-blue-600",{"important-outline-gray-200":t.control.value==="#ffffff"}]),type:"color",onInput:o},null,42,ge),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0","aria-label":t.label,value:t.control.value,class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",type:"text",onInput:o},null,40,ye)]))}}),ve="";function be(n){if(typeof n=="number")return[n,n,n];if(A(n)){const{x:r,y:o,z:t}=n;return[r,o,t]}return n}function _e(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z>"u"}function A(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z=="number"}const ke={class:"text-gray-500 w-1/3"},xe={class:"w-2/3 flex justify-between gap-0.5"},we={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},Ee=["id","value","onInput","onMousedown","onMouseup"],Ce=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n,t=x.useMouse(),a=e.ref(0),s=e.ref(!1),c=e.ref(0),f=(i,h)=>{c.value=h,a.value=i.clientX,s.value=!0},p=(i,h)=>{c.value=h,s.value=!1},_=()=>{s.value=!1},d=i=>Math.floor(Math.abs(i)/10),l=e.computed(()=>be(o.control.value)),u=e.ref(["x","y","z"]),y=e.computed(()=>_e(o.control.value)||A(o.control.value));function C(i,h){const{value:k}=o.control,{target:m}=i;c.value=h,k[y.value?u.value[c.value]:c.value]=parseFloat(m.value),r("change",k)}return e.watch(t.x,i=>{if(s.value){const h=i-a.value,k=d(h),{value:m}=o.control,b=y.value?u.value[c.value]:c.value;h>0?m[b]+=.1+k:h<0&&(m[b]-=.1+k),o.control.min!==void 0&&m<o.control.min&&(m[b]=o.control.min),o.control.max!==void 0&&m>o.control.max&&(m[b]=o.control.max),r("change",m),a.value=i}}),(i,h)=>(e.openBlock(),e.createElementBlock("div",{class:"flex px-4 justify-between gap-1 items-center mb-2",onMouseup:h[0]||(h[0]=k=>_())},[e.createElementVNode("label",ke,e.toDisplayString(i.label),1),e.createElementVNode("div",xe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,(k,m)=>(e.openBlock(),e.createElementBlock("div",{key:i.label+m,class:"flex items-center w-1/3 bg-gray-100 rounded"},[u.value[m]&&y.value?(e.openBlock(),e.createElementBlock("span",we,e.toDisplayString(u.value[m]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:`${i.control.uniqueKey}-${u.value[m]}`,type:"number",step:"0.1",class:e.normalizeClass(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none",{"cursor-ew-resize":s.value}]),value:l.value[m].toFixed(2),onInput:b=>C(b,m),onMousedown:b=>f(b,m),onMouseup:b=>p(b,m)},null,42,Ee)]))),128))])],32))}}),Be={class:"flex px-4 justify-between gap-4 items-center mb-2"},Ve={class:"text-gray-500 w-1/3"},$e={class:"relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans"},Ne={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Se=["points"],I=160,M=40,V=2,K=100,q=20,De=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(n){const r=x.useFps({every:K}),o=e.ref(""),t=e.ref([]),a=e.ref(I/V);let s=performance.now();return x.useRafFn(({timestamp:c})=>{c-s>=K&&(s=c,t.value.push(r.value),t.value.length>a.value&&t.value.shift(),o.value=t.value.map((f,p)=>`${p*V},${M+q-V/2-f*(M+q-V)/120}`).join(" "))}),(c,f)=>(e.openBlock(),e.createElementBlock("div",Be,[e.createElementVNode("label",Ve,e.toDisplayString(c.label),1),e.createElementVNode("div",$e,[e.createElementVNode("div",Ne,e.toDisplayString(Math.round(e.unref(r)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:I,height:M,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:o.value,fill:"none",stroke:"lightgray","stroke-width":V,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Se)]))])]))}}),Me={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Te=["for"],Fe=["id","value"],ze=["value"],Ae=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t.target.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",Me,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:t.control.uniqueKey},e.toDisplayString(t.label),9,Te),e.createElementVNode("select",{id:t.control.uniqueKey,value:t.control.value,class:"p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",onChange:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.control.options,s=>(e.openBlock(),e.createElementBlock("option",{key:s.value,value:s.value},e.toDisplayString(s.text),9,ze))),128))],40,Fe)]))}}),L=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t)}return(t,a)=>t.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.control.type==="color"?(e.openBlock(),e.createBlock(he,{key:0,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="select"?(e.openBlock(),e.createBlock(Ae,{key:1,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="vector"?(e.openBlock(),e.createBlock(Ce,{key:2,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="boolean"?(e.openBlock(),e.createBlock(se,{key:3,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(De,{key:4,label:t.control.label,control:t.control},null,8,["label","control"])):t.control.type==="number"?(e.openBlock(),e.createBlock(G,{key:5,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="range"?(e.openBlock(),e.createBlock(fe,{key:6,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):(e.openBlock(),e.createBlock(ee,{key:7,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ie={class:"mb-4"},Ke=["aria-expanded","data-folder"],qe={class:"bg-white rounded-b pt-4",role:"menu"},Le=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(n){function r(a,s){s.value=a}const o=e.ref(!1),t=()=>{o.value=!o.value};return(a,s)=>(e.openBlock(),e.createElementBlock("div",Ie,[e.createElementVNode("button",{class:"flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer","aria-expanded":o.value,"aria-haspopup":"true",role:"button","data-folder":a.label,tabindex:"0",onClick:t},[e.createElementVNode("span",null,e.toDisplayString(a.label),1),e.createElementVNode("i",{class:e.normalizeClass(o.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)],8,Ke),e.createVNode(e.Transition,{name:"slide","enter-active-class":" animate-fade-in animate-duration-200 animate-ease-in-out","leave-active-class":" animate-fade-out animate-duration-200 animate-ease-in-out"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.controls,c=>(e.openBlock(),e.createBlock(L,{key:c.label,control:c,role:"menuitem",onChange:f=>r(f,c)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Ue={tabindex:"0",class:"bg-white shadow-xl rounded border-4 border-solid border-black"},Oe=[e.createElementVNode("i",{class:"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs"},"🍰",-1),e.createElementVNode("div",null,[e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"})],-1),e.createElementVNode("div",null,null,-1)],Re=280,Pe=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(n){const r=n,{uuid:o}=e.toRefs(r),{width:t}=x.useWindowSize(),a=e.ref(null),s=z(o==null?void 0:o.value);function c(p,_){s[e.unref(p)].value=_,s[e.unref(p)][e.unref(p)]=_}const f=e.computed(()=>{const p={};for(const _ in s){const d=s[_],l=d.folder||"default";p[l]||(p[l]=[]),p[l].push(d)}return p});return(p,_)=>(e.openBlock(),e.createBlock(e.unref(P),{id:e.unref(o),"initial-value":{x:e.unref(t)-Re-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",p.$attrs.class]),handle:a.value},{default:e.withCtx(()=>[e.createElementVNode("div",Ue,[e.createElementVNode("header",{ref_key:"handle",ref:a,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},Oe,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(d,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[l!=="default"?(e.openBlock(),e.createBlock(Le,{key:0,label:l,controls:d},null,8,["label","controls"])):e.createCommentVNode("",!0),l==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(d,u=>(e.openBlock(),e.createBlock(L,{key:u.label,control:u,onChange:y=>c(u.key,y)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});w.TresLeches=Pe,w.useControls=W,w.useControlsProvider=z,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
+(function(B,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],e):(B=typeof globalThis<"u"?globalThis:B||self,e(B.tresleches={},B.Vue,B.VueUseCore))})(this,function(B,e,_){"use strict";const Ye="";function $(n){return typeof n=="function"?n():e.unref(n)}const A=typeof window<"u"&&typeof document<"u";function X(n,r={}){if(!e.isRef(n))return e.toRefs(n);const o=Array.isArray(n.value)?Array.from({length:n.value.length}):{};for(const t in n.value)o[t]=e.customRef(()=>({get(){return n.value[t]},set(a){var s;if((s=$(r.replaceRef))!=null?s:!0)if(Array.isArray(n.value)){const u=[...n.value];u[t]=a,n.value=u}else{const u={...n.value,[t]:a};Object.setPrototypeOf(u,Object.getPrototypeOf(n.value)),n.value=u}else n.value[t]=a}}));return o}const j=A?window:void 0;function W(n,r={}){const{pointerTypes:o,preventDefault:t,stopPropagation:a,exact:s,onMove:i,onEnd:u,onStart:f,initialValue:g,axis:d="both",draggingElement:l=j,handle:p=n}=r,{width:y}=_.useWindowSize();let N=y.value;const m=e.ref($(g)??{x:0,y:0});e.watch(y,()=>{const c=y.value-N;m.value.x+=c,N=y.value});const E=e.ref(),V=c=>o?o.includes(c.pointerType):!0,k=c=>{$(t)&&c.preventDefault(),$(a)&&c.stopPropagation()},w=c=>{if(!V(c)||$(s)&&c.target!==$(n))return;const b=$(n).getBoundingClientRect(),x={x:c.clientX-b.left,y:c.clientY-b.top};(f==null?void 0:f(x,c))!==!1&&(E.value=x,k(c))},D=c=>{if(!V(c)||!E.value)return;let{x:b,y:x}=m.value;(d==="x"||d==="both")&&(b=c.clientX-E.value.x),(d==="y"||d==="both")&&(x=c.clientY-E.value.y),m.value={x:b,y:x},i==null||i(m.value,c),k(c)},z=c=>{V(c)&&E.value&&(E.value=void 0,u==null||u(m.value,c),k(c))};if(A){const c={capture:r.capture??!0};_.useEventListener(p,"pointerdown",w,c),_.useEventListener(l,"pointermove",D,c),_.useEventListener(l,"pointerup",z,c)}return{...X(m),position:m,isDragging:e.computed(()=>!!E.value),style:e.computed(()=>`left:${m.value.x}px;top:${m.value.y}px;`)}}const v=e.defineComponent({name:"UseDraggable",props:["storageKey","storageType","initialValue","exact","preventDefault","stopPropagation","pointerTypes","as","handle","axis","onStart","onMove","onEnd"],setup(n,{slots:r}){const o=e.ref(),t=e.computed(()=>n.handle??o.value),a=n.storageKey&&_.useStorage(n.storageKey,$(n.initialValue)||{x:0,y:0},_.isClient?n.storageType==="session"?sessionStorage:localStorage:void 0),s=a||n.initialValue||{x:0,y:0},i=(f,g)=>{var d;(d=n.onEnd)==null||d.call(n,f,g),a&&(a.value.x=f.x,a.value.y=f.y)},u=e.reactive(W(o,{...n,handle:t,initialValue:s,onEnd:i}));return()=>{if(r.default)return e.h(n.as||"div",{ref:o,style:`touch-action:none;${u.style}`},r.default(u))}}}),Y=Symbol("CONTROLS_CONTEXT_KEY"),I="default",S=e.reactive({});function q(n=I){return e.provide(Y,S),S[n]}const T=n=>{const r=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^0x([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;return typeof n=="boolean"?"boolean":typeof n=="number"?"number":typeof n=="string"&&r.test(n)?"color":typeof n=="string"?"string":n.isVector3||n.isVector2||n.isEuler||n instanceof Array?"vector":n.min!==void 0||n.max!==void 0||n.step!==void 0?"range":n.options&&Array.isArray(n.options)?"select":"unknown"},F=(n,r,o,t)=>{const a={key:e.ref(n),label:e.ref(n),name:e.ref(n),type:e.ref(o),value:e.ref(r),visible:e.ref(!0),[n]:e.ref(r)};return t&&(a.folder=e.ref(t)),a},H=(n,r)=>{let o=1,t=`${n}_${o}`;for(;r[t];)o++,t=`${n}_${o}`;return t},G=(n,r,o)=>{const t={},a=typeof n=="string"?n:null,s=a?r:n,i=a&&a!=="fpsgraph"?o:r,u=(i==null?void 0:i.uuid)||I;if(S[u]||(S[u]=e.reactive({})),n==="fpsgraph"){const l=F("fpsgraph",null,"fpsgraph",null);return S[u].fpsgraph=l,t.fpsgraph=l,e.toRefs(e.reactive(t))}const f=S[u],g=e.isReactive(s),d=g?e.toRefs(s):{};for(const l in s){let p=s[l],y=l;if(g&&d[l]&&(p=d[l]),a&&(y=`${a}${l.charAt(0).toUpperCase()+l.slice(1)}`),!a&&f[y]&&(y=H(l,f)),typeof p=="object"&&!e.isRef(p)&&!Array.isArray(p)&&p.value!==void 0){const m=p,E=e.isRef(m.value)?m.value:e.ref(m.value),V=T(m),k=F(l,E,V,a);V==="select"&&(k.options=e.ref(m.options.map(w=>typeof w=="object"&&w.text&&w.value?w:{text:w,value:w}))),V==="range"&&(k.min=e.ref(m.min||0),k.max=e.ref(m.max||1),k.step=e.ref(m.step||.1)),k.label.value=m.label||l,k.visible.value=m.visible!==void 0?m.visible:!0,f[y]=k,t[y]=k;continue}if(e.isRef(p)){const m=F(l,p,T(p.value),a);f[y]=m,t[y]=m;continue}else if(typeof p=="object"&&!Array.isArray(p)){const m=e.toRefs(p);m[l]&&(p=m[l])}const N=F(l,p,T(p),a);f[y]=N,t[y]=N,N.uniqueKey=y}return Object.keys(t).length>1?e.toRefs(e.reactive(t)):Object.values(t)[0]},J={class:"flex px-4 justify-between gap-4 items-center mb-2"},Q=["for"],Z=["id","value","min","max","step"],ee=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(d){const{target:l}=d;r("change",l.valueAsNumber)}const a=_.useMouse(),s=e.ref(0),i=e.ref(!1),u=d=>{s.value=d.clientX,i.value=!0},f=()=>{i.value=!1},g=d=>Math.floor(Math.abs(d)/10);return e.watch(a.x,d=>{if(i.value){const l=d-s.value,p=g(l);l>0?r("change",o.control.value+1+p):l<0&&r("change",o.control.value-1+p),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),s.value=d}}),(d,l)=>(e.openBlock(),e.createElementBlock("div",J,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:d.control.uniqueKey},e.toDisplayString(d.label),9,Q),e.createElementVNode("input",{id:d.control.uniqueKey,value:d.control.value,class:e.normalizeClass(["p-2 w-1/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":i.value}]),type:"number",min:d.control.min,max:d.control.max,step:d.control.step,onInput:t,onMousedown:u,onMouseup:f},null,42,Z)]))}}),te={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},ne=["for"],oe=["id","value","aria-label"],le=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("label",{for:t.control.uniqueKey,class:"text-gray-500 w-1/3"},e.toDisplayString(t.label),9,ne),e.createElementVNode("input",{id:t.control.uniqueKey,value:t.control.value,type:"text",tabindex:"0",class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 border-none font-sans","aria-label":t.label,placeholder:"Enter value here...",onChange:o},null,40,oe)]))}}),re={class:"flex px-4 justify-start gap-2 items-center mb-2 min-h-32px"},ae={class:"text-gray-500 w-1/3"},se=["id","checked"],ce=["for"],ie=["aria-checked"],ue={class:"i-ic:baseline-check text-light"},de=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(s){const{target:i}=s;r("change",i.checked)}function a(s){(s.code==="Space"||s.code==="Enter")&&(s.preventDefault(),r("change",!o.control.value))}return(s,i)=>(e.openBlock(),e.createElementBlock("div",re,[e.createElementVNode("label",ae,e.toDisplayString(s.label),1),e.createElementVNode("input",{id:s.control.uniqueKey,checked:s.control.value,class:"hidden",type:"checkbox",onInput:t},null,40,se),e.createElementVNode("label",{for:s.control.uniqueKey,class:"inline-flex items-center cursor-pointer"},[e.createElementVNode("span",{tabindex:"0",role:"checkbox","aria-checked":s.control.value.toString(),class:e.normalizeClass([{"bg-dark-500":s.control.value,"bg-gray-200":!s.control.value},"w-4 h-4 flex justify-center items-center rounded border border-gray-300 mr-2 transition-colors duration-200"]),onKeydown:a},[e.withDirectives(e.createElementVNode("i",ue,null,512),[[e.vShow,s.control.value]])],42,ie)],8,ce)]))}}),fe={class:"px-4 relative flex justify-between gap-4 items-center mb-2"},pe=["value","min","max","step"],me=["value","min","max","step"],ge=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n;function t(l){const{target:p}=l;r("change",p.valueAsNumber)}const a=e.computed(()=>({backgroundImage:`linear-gradient(to right, #333 0% ${100*(o.control.value-(o.control.min||0))/((o.control.max||100)-(o.control.min||0))}%, #e2e2e2 0%)`})),s=_.useMouse(),i=e.ref(0),u=e.ref(!1),f=l=>{i.value=l.clientX,u.value=!0},g=()=>{u.value=!1},d=l=>Math.floor(Math.abs(l)/10);return e.watch(s.x,l=>{if(u.value){const p=l-i.value,y=d(p);p>0?r("change",o.control.value+1+y):p<0&&r("change",o.control.value-1+y),o.control.min!==void 0&&o.control.value<o.control.min&&r("change",o.control.min),o.control.max!==void 0&&o.control.value>o.control.max&&r("change",o.control.max),i.value=l}}),(l,p)=>(e.openBlock(),e.createElementBlock("div",fe,[e.createElementVNode("label",{class:e.normalizeClass(["text-gray-500 w-1/3",{"flex justify-between items-center":l.control.icon}])},[e.createTextVNode(e.toDisplayString(l.label)+" ",1),e.createElementVNode("i",{class:e.normalizeClass(`i-${l.control.icon}`)},null,2)],2),e.createElementVNode("input",{value:l.control.value,class:"w-1/2 h-0.75 bg-dark-200 rounded-full appearance-none",style:e.normalizeStyle(a.value),type:"range",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t},null,44,pe),e.createElementVNode("input",{value:l.control.value,class:e.normalizeClass(["p-2 w-1/4 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",{"cursor-ew-resize":u.value}]),type:"number",min:l.control.min,max:l.control.max,step:l.control.step,onInput:t,onMousedown:f,onMouseup:g},null,42,me)]))}}),He="",ye=((n,r)=>{const o=n.__vccOpts||n;for(const[t,a]of r)o[t]=a;return o})(ge,[["__scopeId","data-v-9e6267fe"]]),he={class:"flex px-4 justify-between gap-4 items-center mb-2"},be={class:"text-gray-500 w-1/3"},_e=["id","value","aria-label"],ke=["id","aria-label","value"],we=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){const{target:a}=t;r("change",a.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",he,[e.createElementVNode("label",be,e.toDisplayString(t.label),1),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0",value:t.control.value,"aria-label":t.label,class:e.normalizeClass(["focus:outline-none focus:ring-2 focus:ring-blue-600",{"important-outline-gray-200":t.control.value==="#ffffff"}]),type:"color",onInput:o},null,42,_e),e.createElementVNode("input",{id:t.control.uniqueKey,tabindex:"0","aria-label":t.label,value:t.control.value,class:"p-2 w-2/3 rounded text-right text-xs text-gray-400 bg-gray-100 border-none font-sans",type:"text",onInput:o},null,40,ke)]))}}),Je="";function xe(n){if(typeof n=="number")return[n,n,n];if(L(n)){const{x:r,y:o,z:t}=n;return[r,o,t]}return n}function Ee(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z>"u"}function L(n){return n&&typeof n.x=="number"&&typeof n.y=="number"&&typeof n.z=="number"}const Ce={class:"text-gray-500 w-1/3"},Be={class:"relative w-2/3 flex justify-between gap-0.5"},Ve={key:0,class:"font-bold px-1 py-1 text-0.65rem text-gray-300"},$e=["id","step","value","onInput","onMousedown","onMouseup","onFocus"],Ne=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){const o=n,t=_.useMouse(),{pressed:a}=_.useMousePressed(),s=e.ref(0),i=e.ref(!1),u=e.ref(0),f=e.ref(null),g=e.ref(1),d=_.useKeyModifier("Shift"),l=_.useKeyModifier("Alt");e.watch(d,c=>{g.value=c?10:1}),e.watch(l,c=>{g.value=c?.1:1});const p=c=>{f.value=c},y=()=>{f.value=null},N=(c,b)=>{u.value=b,s.value=c.clientX,i.value=!0},m=(c,b)=>{u.value=b,i.value=!1},E=()=>{i.value=!1};e.watch(a,c=>{c||(i.value=!1)});const V=c=>Math.floor(Math.abs(c)/10),k=e.computed(()=>xe(o.control.value)),w=e.ref(["x","y","z"]),D=e.computed(()=>Ee(o.control.value)||L(o.control.value));function z(c,b){const{value:x}=o.control,{target:h}=c;u.value=b,x[D.value?w.value[u.value]:u.value]=parseFloat(h.value),r("change",x)}return e.watch(t.x,c=>{if(i.value){const b=c-s.value,x=V(b),{value:h}=o.control,C=D.value?w.value[u.value]:u.value;b>0?h[C]+=g.value+x:b<0&&(h[C]-=g.value+x),o.control.min!==void 0&&h<o.control.min&&(h[C]=o.control.min),o.control.max!==void 0&&h>o.control.max&&(h[C]=o.control.max),r("change",h),s.value=c}}),(c,b)=>(e.openBlock(),e.createElementBlock("div",{class:"flex px-4 justify-between gap-1 items-center mb-2",onMouseup:b[0]||(b[0]=x=>E())},[e.createElementVNode("label",Ce,e.toDisplayString(c.label),1),e.createElementVNode("div",Be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(x,h)=>(e.openBlock(),e.createElementBlock("div",{key:c.label+h,class:e.normalizeClass(["flex items-center w-1/3 bg-gray-100 rounded",{"w-2/5":f.value===h}])},[w.value[h]&&D.value?(e.openBlock(),e.createElementBlock("span",Ve,e.toDisplayString(w.value[h]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:`${c.control.uniqueKey}-${w.value[h]}`,type:"number",step:g.value,class:e.normalizeClass(["w-full px-0 p-1 text-right text-0.65rem text-gray-400 bg-transparent focus:border-gray-200 outline-none border-none font-sans appearence-none",{"cursor-ew-resize":i.value}]),value:k.value[h].toFixed(2),onInput:C=>z(C,h),onMousedown:C=>N(C,h),onMouseup:C=>m(C,h),onFocus:C=>p(h),onBlur:y},null,42,$e)],2))),128))])],32))}}),Se={class:"flex px-4 justify-between gap-4 items-center mb-2"},Me={class:"text-gray-500 w-1/3"},De={class:"relative w-2/3 p-1 rounded text-right text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans"},Fe={class:"absolute bottom-0.5 right-0.5 font-sans text-xs"},Te=["points"],U=160,K=40,M=2,O=100,R=20,Ke=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(n){const r=_.useFps({every:O}),o=e.ref(""),t=e.ref([]),a=e.ref(U/M);let s=performance.now();return _.useRafFn(({timestamp:i})=>{i-s>=O&&(s=i,t.value.push(r.value),t.value.length>a.value&&t.value.shift(),o.value=t.value.map((u,f)=>`${f*M},${K+R-M/2-u*(K+R-M)/120}`).join(" "))}),(i,u)=>(e.openBlock(),e.createElementBlock("div",Se,[e.createElementVNode("label",Me,e.toDisplayString(i.label),1),e.createElementVNode("div",De,[e.createElementVNode("div",Fe,e.toDisplayString(Math.round(e.unref(r)))+" FPS ",1),(e.openBlock(),e.createElementBlock("svg",{width:U,height:K,xmlns:"http://www.w3.org/2000/svg",class:"bg-gray-100"},[e.createElementVNode("polyline",{points:o.value,fill:"none",stroke:"lightgray","stroke-width":M,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Te)]))])]))}}),ze={class:"flex px-4 justify-between gap-4 items-center mb-2 min-h-32px"},Ae=["for"],Ie=["id","value"],qe=["value"],Le=e.defineComponent({__name:"SelectControl",props:{label:{},control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t.target.value)}return(t,a)=>(e.openBlock(),e.createElementBlock("div",ze,[e.createElementVNode("label",{class:"text-gray-500 w-1/3",for:t.control.uniqueKey},e.toDisplayString(t.label),9,Ae),e.createElementVNode("select",{id:t.control.uniqueKey,value:t.control.value,class:"p-2 w-2/3 rounded text-left text-xs text-gray-400 bg-gray-100 focus:border-gray-200 outline-none border-none font-sans",onChange:o},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.control.options,s=>(e.openBlock(),e.createElementBlock("option",{key:s.value,value:s.value},e.toDisplayString(s.text),9,qe))),128))],40,Ie)]))}}),P=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(n,{emit:r}){function o(t){r("change",t)}return(t,a)=>t.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.control.type==="color"?(e.openBlock(),e.createBlock(we,{key:0,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="select"?(e.openBlock(),e.createBlock(Le,{key:1,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="vector"?(e.openBlock(),e.createBlock(Ne,{key:2,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="boolean"?(e.openBlock(),e.createBlock(de,{key:3,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(Ke,{key:4,label:t.control.label,control:t.control},null,8,["label","control"])):t.control.type==="number"?(e.openBlock(),e.createBlock(ee,{key:5,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):t.control.type==="range"?(e.openBlock(),e.createBlock(ye,{key:6,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"])):(e.openBlock(),e.createBlock(le,{key:7,label:t.control.label,control:t.control,onChange:o},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),Ue={class:"mb-4"},Oe=["aria-expanded","data-folder"],Re={class:"bg-white rounded-b pt-4",role:"menu"},Pe=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(n){function r(a,s){s.value=a}const o=e.ref(!1),t=()=>{o.value=!o.value};return(a,s)=>(e.openBlock(),e.createElementBlock("div",Ue,[e.createElementVNode("button",{class:"flex items-center justify-between w-full py-2 px-4 bg-gray-100 border-none text-gray-400 font-bold text-xs font-sans cursor-pointer","aria-expanded":o.value,"aria-haspopup":"true",role:"button","data-folder":a.label,tabindex:"0",onClick:t},[e.createElementVNode("span",null,e.toDisplayString(a.label),1),e.createElementVNode("i",{class:e.normalizeClass(o.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)],8,Oe),e.createVNode(e.Transition,{name:"slide","enter-active-class":" animate-fade-in animate-duration-200 animate-ease-in-out","leave-active-class":" animate-fade-out animate-duration-200 animate-ease-in-out"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",Re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.controls,i=>(e.openBlock(),e.createBlock(P,{key:i.label,control:i,role:"menuitem",onChange:u=>r(u,i)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),Xe={tabindex:"0",class:"bg-white shadow-xl rounded border-4 border-solid border-black"},je=[e.createElementVNode("i",{class:"h-4 w-4 p-1.5 flex items-center line-height-0 rounded-full bg-gray-100 text-xs"},"🍰",-1),e.createElementVNode("div",null,[e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"}),e.createElementVNode("i",{class:"i-ic-baseline-drag-indicator"})],-1),e.createElementVNode("div",null,null,-1)],We=280,ve=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(n){const r=n,{uuid:o}=e.toRefs(r),{width:t}=_.useWindowSize(),a=e.ref(null),s=q(o==null?void 0:o.value);function i(f,g){s[e.unref(f)].value=g,s[e.unref(f)][e.unref(f)]=g}const u=e.computed(()=>{const f={};for(const g in s){const d=s[g],l=d.folder||"default";f[l]||(f[l]=[]),f[l].push(d)}return f});return(f,g)=>(e.openBlock(),e.createBlock(e.unref(v),{id:e.unref(o),"initial-value":{x:e.unref(t)-We-40,y:10},class:e.normalizeClass(["absolute select-none z-24 w-280px font-sans text-xs",f.$attrs.class]),handle:a.value},{default:e.withCtx(()=>[e.createElementVNode("div",Xe,[e.createElementVNode("header",{ref_key:"handle",ref:a,class:"relative cursor-grabbing p-4 flex justify-between text-gray-200 relative"},je,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,(d,l)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:l},[l!=="default"?(e.openBlock(),e.createBlock(Pe,{key:0,label:l,controls:d},null,8,["label","controls"])):e.createCommentVNode("",!0),l==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(d,p=>(e.openBlock(),e.createBlock(P,{key:p.label,control:p,onChange:y=>i(p.key,y)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128))])]),_:1},8,["id","initial-value","class","handle"]))}});B.TresLeches=ve,B.useControls=G,B.useControlsProvider=q,Object.defineProperty(B,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/leches",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "packageManager": "pnpm@8.3.1",
   "description": "Tasty GUI for Vue controls 🍰",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",