@tresjs/leches 0.14.0 → 0.14.1

package/dist/tresleches.umd.cjs

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

package/dist/utils/index.d.ts

@@ -1,2 +1,2 @@
-export * from './normalize';
 export * from './is';
+export * from './normalize';

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@tresjs/leches",
   "type": "module",
-  "version": "0.14.0",
-  "packageManager": "pnpm@8.3.1",
+  "version": "0.14.1",
+  "packageManager": "pnpm@9.15.4",
   "description": "Tasty GUI for Vue controls 🍰",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tresjs/leches.git"
+  },
   "keywords": [
     "vue",
     "gui",
@@ -18,24 +22,24 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/tresleches.js"
     },
-    "./styles": "./dist/style.css",
+    "./styles": "./dist/tresleches.css",
     "./*": "./*"
   },
   "main": "./dist/tresleches.js",
   "module": "./dist/tresleches.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "*.d.ts"
+    "*.d.ts",
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "cd playground && npm run dev",
-    "build": "vue-tsc && vite build",
+    "dev": "cd playground && pnpm run dev",
+    "build": "vite build",
     "preview": "vite preview",
-    "playground": "cd playground && npm run dev",
+    "playground": "cd playground && pnpm run dev",
     "test": "vitest",
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
@@ -43,7 +47,7 @@
     "test:browser:ui": "BROWSER_TEST=true vitest",
     "release": "release-it",
     "coverage": "vitest run --coverage",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
+    "lint": "eslint .",
     "story:dev": "histoire dev",
     "story:build": "histoire build",
     "story:preview": "histoire preview",
@@ -55,43 +59,43 @@
     "vue": ">=3.3.4"
   },
   "dependencies": {
-    "@unocss/core": "^0.57.7",
-    "@vueuse/components": "^10.6.1",
-    "vite-plugin-css-injected-by-js": "^3.3.0"
+    "@unocss/core": "^65.4.0",
+    "@vueuse/components": "^12.4.0"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.17.6",
-    "@iconify-json/ic": "^1.1.16",
-    "@iconify/json": "^2.2.150",
-    "@release-it/conventional-changelog": "^8.0.1",
+    "@histoire/plugin-vue": "^0.17.17",
+    "@iconify-json/ic": "^1.2.2",
+    "@iconify/json": "^2.2.295",
+    "@release-it/conventional-changelog": "^10.0.0",
+    "@tresjs/eslint-config": "^1.4.0",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "@vitejs/plugin-vue": "^4.5.0",
-    "@vitest/browser": "^0.34.6",
-    "@vitest/ui": "^0.34.6",
-    "@vue/test-utils": "^2.4.3",
-    "@vueuse/core": "^10.6.1",
-    "@vueuse/shared": "^10.6.1",
-    "eslint": "^8.54.0",
-    "eslint-plugin-vitest-globals": "^1.4.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "histoire": "^0.17.6",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/browser": "^2.1.8",
+    "@vitest/ui": "^2.1.8",
+    "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": "^12.4.0",
+    "@vueuse/shared": "^12.4.0",
+    "eslint": "^9.18.0",
+    "eslint-plugin-vitest-globals": "^1.5.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "histoire": "^0.17.17",
     "kolorist": "^1.8.0",
-    "pathe": "^1.1.1",
-    "release-it": "^17.0.0",
+    "pathe": "^2.0.1",
+    "release-it": "^18.1.1",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-visualizer": "^5.9.3",
-    "typescript": "^5.3.2",
-    "unocss": "^0.57.7",
-    "unplugin-vue-components": "^0.25.2",
-    "vite": "^5.0.4",
-    "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "^3.6.4",
-    "vitepress": "1.0.0-rc.31",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.9",
-    "vue-tsc": "^1.8.24",
-    "webdriverio": "^8.24.5"
+    "rollup-plugin-visualizer": "^5.14.0",
+    "typescript": "^5.7.3",
+    "unocss": "^65.4.0",
+    "unplugin-vue-components": "^28.0.0",
+    "vite": "^6.0.7",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.0",
+    "vitepress": "1.5.0",
+    "vitest": "^2.1.8",
+    "vue": "^3.5.13",
+    "webdriverio": "^9.5.7"
   }
 }

package/dist/style.css

@@ -1,8 +0,0 @@
-/**
- * name: @tresjs/leches
- * version: v0.14.0
- * (c) 2023
- * description: Tasty GUI for Vue controls 🍰
- * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
- */
-*,:before,:after{--tl-rotate:0;--tl-rotate-x:0;--tl-rotate-y:0;--tl-rotate-z:0;--tl-scale-x:1;--tl-scale-y:1;--tl-scale-z:1;--tl-skew-x:0;--tl-skew-y:0;--tl-translate-x:0;--tl-translate-y:0;--tl-translate-z:0;--tl-pan-x: ;--tl-pan-y: ;--tl-pinch-zoom: ;--tl-scroll-snap-strictness:proximity;--tl-ordinal: ;--tl-slashed-zero: ;--tl-numeric-figure: ;--tl-numeric-spacing: ;--tl-numeric-fraction: ;--tl-border-spacing-x:0;--tl-border-spacing-y:0;--tl-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--tl-ring-shadow:0 0 rgb(0 0 0 / 0);--tl-shadow-inset: ;--tl-shadow:0 0 rgb(0 0 0 / 0);--tl-ring-inset: ;--tl-ring-offset-width:0px;--tl-ring-offset-color:#fff;--tl-ring-width:0px;--tl-ring-color:rgb(147 197 253 / .5);--tl-blur: ;--tl-brightness: ;--tl-contrast: ;--tl-drop-shadow: ;--tl-grayscale: ;--tl-hue-rotate: ;--tl-invert: ;--tl-saturate: ;--tl-sepia: ;--tl-backdrop-blur: ;--tl-backdrop-brightness: ;--tl-backdrop-contrast: ;--tl-backdrop-grayscale: ;--tl-backdrop-hue-rotate: ;--tl-backdrop-invert: ;--tl-backdrop-opacity: ;--tl-backdrop-saturate: ;--tl-backdrop-sepia: }::backdrop{--tl-rotate:0;--tl-rotate-x:0;--tl-rotate-y:0;--tl-rotate-z:0;--tl-scale-x:1;--tl-scale-y:1;--tl-scale-z:1;--tl-skew-x:0;--tl-skew-y:0;--tl-translate-x:0;--tl-translate-y:0;--tl-translate-z:0;--tl-pan-x: ;--tl-pan-y: ;--tl-pinch-zoom: ;--tl-scroll-snap-strictness:proximity;--tl-ordinal: ;--tl-slashed-zero: ;--tl-numeric-figure: ;--tl-numeric-spacing: ;--tl-numeric-fraction: ;--tl-border-spacing-x:0;--tl-border-spacing-y:0;--tl-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--tl-ring-shadow:0 0 rgb(0 0 0 / 0);--tl-shadow-inset: ;--tl-shadow:0 0 rgb(0 0 0 / 0);--tl-ring-inset: ;--tl-ring-offset-width:0px;--tl-ring-offset-color:#fff;--tl-ring-width:0px;--tl-ring-color:rgb(147 197 253 / .5);--tl-blur: ;--tl-brightness: ;--tl-contrast: ;--tl-drop-shadow: ;--tl-grayscale: ;--tl-hue-rotate: ;--tl-invert: ;--tl-saturate: ;--tl-sepia: ;--tl-backdrop-blur: ;--tl-backdrop-brightness: ;--tl-backdrop-contrast: ;--tl-backdrop-grayscale: ;--tl-backdrop-hue-rotate: ;--tl-backdrop-invert: ;--tl-backdrop-opacity: ;--tl-backdrop-saturate: ;--tl-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{--tl-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(--tl-icon) no-repeat;mask:var(--tl-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{--tl-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(--tl-icon) no-repeat;mask:var(--tl-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{--tl-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(--tl-icon) no-repeat;mask:var(--tl-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{--tl-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(--tl-icon) no-repeat;mask:var(--tl-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}.tl-absolute{position:absolute}.tl-relative{position:relative}.tl-bottom-0\.5{bottom:.125rem}.tl-right-0\.5{right:.125rem}.tl-z-24{z-index:24}.-tl-mt-0\.5{margin-top:-.125rem}.tl-mb-2{margin-bottom:.5rem}.tl-mb-4{margin-bottom:1rem}.tl-mr-2{margin-right:.5rem}.tl-box-border{box-sizing:border-box}.tl-block{display:block}.tl-hidden{display:none}.tl-h-0\.75{height:.1875rem}.tl-h-30px{height:30px}.tl-h-4{height:1rem}.tl-min-h-32px{min-height:32px}.tl-w-1\/2{width:50%}.tl-w-1\/3{width:33.3333333333%}.tl-w-1\/4{width:25%}.tl-w-2\/3{width:66.6666666667%}.tl-w-2\/5{width:40%}.tl-w-280px{width:280px}.tl-w-3{width:.75rem}.tl-w-30px{width:30px}.tl-w-4{width:1rem}.tl-w-full{width:100%}.tl-flex{display:flex}.tl-inline-flex{display:inline-flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.tl-animate-fade-in{animation:fade-in 1s linear 1}.tl-animate-fade-out{animation:fade-out 1s linear 1}.tl-animate-duration-200{animation-duration:.2s}.tl-animate-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.tl-cursor-pointer{cursor:pointer}.tl-cursor-grabbing{cursor:grabbing}.tl-cursor-ew-resize{cursor:ew-resize}.tl-select-none{-webkit-user-select:none;user-select:none}.tl-appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.tl-items-center{align-items:center}.tl-justify-start{justify-content:flex-start}.tl-justify-center{justify-content:center}.tl-justify-between{justify-content:space-between}.tl-gap-0\.5{gap:.125rem}.tl-gap-1{gap:.25rem}.tl-gap-2{gap:.5rem}.tl-gap-4{gap:1rem}.tl-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tl-border{border-width:1px}.tl-border-2{border-width:2px}.tl-border-4{border-width:4px}.tl-border-black{--tl-border-opacity:1;border-color:rgb(0 0 0 / var(--tl-border-opacity))}.tl-border-gray-300{--tl-border-opacity:1;border-color:rgb(209 213 219 / var(--tl-border-opacity))}.focus\:tl-border-gray-200:focus{--tl-border-opacity:1;border-color:rgb(229 231 235 / var(--tl-border-opacity))}.tl-rounded{border-radius:.25rem}.tl-rounded-full{border-radius:9999px}.tl-rounded-md{border-radius:.375rem}.tl-rounded-sm{border-radius:.125rem}.tl-rounded-b{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.tl-border-none{border-style:none}.tl-border-solid{border-style:solid}.tl-bg-dark-200{--tl-bg-opacity:1;background-color:rgb(50 50 50 / var(--tl-bg-opacity))}.tl-bg-dark-500{--tl-bg-opacity:1;background-color:rgb(31 31 31 / var(--tl-bg-opacity))}.tl-bg-dark-600{--tl-bg-opacity:1;background-color:rgb(28 28 30 / var(--tl-bg-opacity))}.tl-bg-dark-700{--tl-bg-opacity:1;background-color:rgb(27 27 27 / var(--tl-bg-opacity))}.tl-bg-gray-100{--tl-bg-opacity:1;background-color:rgb(243 244 246 / var(--tl-bg-opacity))}.tl-bg-gray-200{--tl-bg-opacity:1;background-color:rgb(229 231 235 / var(--tl-bg-opacity))}.tl-bg-transparent{background-color:transparent}.tl-bg-white{--tl-bg-opacity:1;background-color:rgb(255 255 255 / var(--tl-bg-opacity))}.tl-p-0{padding:0}.tl-p-1{padding:.25rem}.tl-p-1\.5{padding:.375rem}.tl-p-2{padding:.5rem}.tl-p-4{padding:1rem}.tl-px-0{padding-left:0;padding-right:0}.tl-px-1{padding-left:.25rem;padding-right:.25rem}.tl-px-2\.5{padding-left:.625rem;padding-right:.625rem}.tl-px-3{padding-left:.75rem;padding-right:.75rem}.tl-px-4{padding-left:1rem;padding-right:1rem}.tl-py-1{padding-top:.25rem;padding-bottom:.25rem}.tl-py-2{padding-top:.5rem;padding-bottom:.5rem}.tl-pt-4{padding-top:1rem}.tl-text-left{text-align:left}.tl-text-right{text-align:right}.tl-text-0\.65rem{font-size:.65rem}.tl-text-base{font-size:1rem;line-height:1.5rem}.tl-text-sm{font-size:.875rem;line-height:1.25rem}.tl-text-xs{font-size:.75rem;line-height:1rem}.tl-font-bold{font-weight:700}.tl-line-height-0{line-height:0}.tl-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"}.tl-text-gray-200{--tl-text-opacity:1;color:rgb(229 231 235 / var(--tl-text-opacity))}.tl-text-gray-300{--tl-text-opacity:1;color:rgb(209 213 219 / var(--tl-text-opacity))}.tl-text-gray-400{--tl-text-opacity:1;color:rgb(156 163 175 / var(--tl-text-opacity))}.tl-text-gray-500{--tl-text-opacity:1;color:rgb(107 114 128 / var(--tl-text-opacity))}.tl-text-gray-700{--tl-text-opacity:1;color:rgb(55 65 81 / var(--tl-text-opacity))}.tl-text-light{--tl-text-opacity:1;color:rgb(246 246 246 / var(--tl-text-opacity))}.tl-text-light-100{--tl-text-opacity:1;color:rgb(252 252 252 / var(--tl-text-opacity))}.tl-shadow-lg{--tl-shadow:var(--tl-shadow-inset) 0 10px 15px -3px var(--tl-shadow-color, rgb(0 0 0 / .1)),var(--tl-shadow-inset) 0 4px 6px -4px var(--tl-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tl-ring-offset-shadow),var(--tl-ring-shadow),var(--tl-shadow)}.tl-shadow-xl{--tl-shadow:var(--tl-shadow-inset) 0 20px 25px -5px var(--tl-shadow-color, rgb(0 0 0 / .1)),var(--tl-shadow-inset) 0 8px 10px -6px var(--tl-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tl-ring-offset-shadow),var(--tl-ring-shadow),var(--tl-shadow)}.important-tl-outline-gray-200{--tl-outline-color-opacity:1 !important;outline-color:rgb(229 231 235 / var(--tl-outline-color-opacity))!important}.tl-outline-none{outline:2px solid transparent;outline-offset:2px}.focus\:tl-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:tl-ring-2:focus{--tl-ring-width:2px;--tl-ring-offset-shadow:var(--tl-ring-inset) 0 0 0 var(--tl-ring-offset-width) var(--tl-ring-offset-color);--tl-ring-shadow:var(--tl-ring-inset) 0 0 0 calc(var(--tl-ring-width) + var(--tl-ring-offset-width)) var(--tl-ring-color);box-shadow:var(--tl-ring-offset-shadow),var(--tl-ring-shadow),var(--tl-shadow)}.focus\:tl-ring-blue-600:focus{--tl-ring-opacity:1;--tl-ring-color:rgb(37 99 235 / var(--tl-ring-opacity))}.tl-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.tl-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}.tl-duration-200{transition-duration:.2s}input[type=range][data-v-e775088a]{outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}input[type=range][data-v-e775088a]::-webkit-slider-thumb{height:1rem;width:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:2px;border-radius:.125rem;--tl-bg-opacity:1;background-color:rgb(50 50 50 / var(--tl-bg-opacity));--tl-shadow:var(--tl-shadow-inset) 0 10px 15px -3px var(--tl-shadow-color, rgb(0 0 0 / .1)),var(--tl-shadow-inset) 0 4px 6px -4px var(--tl-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tl-ring-offset-shadow),var(--tl-ring-shadow),var(--tl-shadow)}input[type=range][data-v-e775088a]::-moz-range-thumb{height:1rem;width:.75rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:2px;border-radius:.125rem;--tl-bg-opacity:1;background-color:rgb(50 50 50 / var(--tl-bg-opacity));--tl-shadow:var(--tl-shadow-inset) 0 10px 15px -3px var(--tl-shadow-color, rgb(0 0 0 / .1)),var(--tl-shadow-inset) 0 4px 6px -4px var(--tl-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tl-ring-offset-shadow),var(--tl-ring-shadow),var(--tl-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}.leches-btn[data-v-6a95ac59]{display:flex;cursor:pointer;align-items:center;border-radius:.375rem;border-style:none;font-weight:700;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:.2s}.leches-btn-sm[data-v-6a95ac59]{padding:.5rem .625rem;font-size:.75rem;line-height:1rem}.leches-btn-md[data-v-6a95ac59]{padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem}.leches-btn-lg[data-v-6a95ac59]{padding:.5rem 1rem;font-size:1rem;line-height:1.5rem}.leches-btn-block[data-v-6a95ac59]{width:100%;justify-content:center;padding:.5rem 1rem;font-size:1rem;line-height:1.5rem}.leches-btn-primary[data-v-6a95ac59]{--tl-bg-opacity:1;background-color:rgb(243 244 246 / var(--tl-bg-opacity));--tl-text-opacity:1;color:rgb(55 65 81 / var(--tl-text-opacity))}.leches-btn-primary[data-v-6a95ac59]:hover{--tl-bg-opacity:1;background-color:rgb(229 231 235 / var(--tl-bg-opacity))}.leches-btn-secondary[data-v-6a95ac59]{--tl-bg-opacity:1;background-color:rgb(27 27 27 / var(--tl-bg-opacity));--tl-text-opacity:1;color:rgb(252 252 252 / var(--tl-text-opacity))}.leches-btn-secondary[data-v-6a95ac59]:hover{--tl-bg-opacity:1;background-color:rgb(28 28 30 / var(--tl-bg-opacity))}