@tresjs/leches 0.14.0 → 0.15.0-next.2

package/dist/tresleches.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/leches
- * version: v0.14.0
+ * version: v0.15.0-next.2
  * (c) 2023
  * 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(B,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("@tresjs/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","@tresjs/core"],e):(B=typeof globalThis<"u"?globalThis:B||self,e(B.tresleches={},B.Vue,B.VueUseCore,B.TresjsCore))})(this,function(B,e,k,Z){"use strict";function $(l){return typeof l=="function"?l():e.unref(l)}const q=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;function v(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 i;if((i=$(r.replaceRef))!=null?i:!0)if(Array.isArray(l.value)){const c=[...l.value];c[n]=t,l.value=c}else{const c={...l.value,[n]:t};Object.setPrototypeOf(c,Object.getPrototypeOf(l.value)),l.value=c}else l.value[n]=t}}));return o}const ee=q?window:void 0;function te(l,r={}){const{pointerTypes:o,preventDefault:n,stopPropagation:t,exact:i,onMove:s,onEnd:c,onStart:m,initialValue:g,axis:u="both",draggingElement:d=ee,handle:a=l}=r,{width:p}=k.useWindowSize();let E=p.value;const f=e.ref($(g)??{x:0,y:0});e.watch(p,()=>{const b=p.value-E;f.value.x+=b,E=p.value});const w=e.ref(),N=b=>o?o.includes(b.pointerType):!0,x=b=>{$(n)&&b.preventDefault(),$(t)&&b.stopPropagation()},C=b=>{if(!N(b)||$(i)&&b.target!==$(l))return;const h=$(l).getBoundingClientRect(),_={x:b.clientX-h.left,y:b.clientY-h.top};(m==null?void 0:m(_,b))!==!1&&(w.value=_,x(b))},M=b=>{if(!N(b)||!w.value)return;let{x:h,y:_}=f.value;(u==="x"||u==="both")&&(h=b.clientX-w.value.x),(u==="y"||u==="both")&&(_=b.clientY-w.value.y),f.value={x:h,y:_},s==null||s(f.value,b),x(b)},F=b=>{N(b)&&w.value&&(w.value=void 0,c==null||c(f.value,b),x(b))};if(q){const b={capture:r.capture??!0};k.useEventListener(a,"pointerdown",C,b),k.useEventListener(d,"pointermove",M,b),k.useEventListener(d,"pointerup",F,b)}return{...v(f),position:f,isDragging:e.computed(()=>!!w.value),style:e.computed(()=>`left:${f.value.x}px;top:${f.value.y}px;`)}}const le=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&&k.useStorage(l.storageKey,$(l.initialValue)||{x:0,y:0},k.isClient?l.storageType==="session"?sessionStorage:localStorage:void 0),i=t||l.initialValue||{x:0,y:0},s=(m,g)=>{var u;(u=l.onEnd)==null||u.call(l,m,g),t&&(t.value.x=m.x,t.value.y=m.y)},c=e.reactive(te(o,{...l,handle:n,initialValue:i,onEnd:s}));return()=>{if(r.default)return e.h(l.as||"div",{ref:o,style:`touch-action:none;${c.style}`},r.default(c))}}}),oe=Symbol("CONTROLS_CONTEXT_KEY"),j="default",T=e.reactive({});function X(l=j){return e.provide(oe,T),T[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"},z=(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},ne=(l,r,o)=>{const n={},t=typeof l=="string"?l:null,i=t?r:l,s=t&&t!=="fpsgraph"?o:r,c=(s==null?void 0:s.uuid)||j;if(T[c]||(T[c]=e.reactive({})),l==="fpsgraph"){const d=z("fpsgraph",null,"fpsgraph",null);return T[c].fpsgraph=d,n.fpsgraph=d,e.toRefs(e.reactive(n))}const m=T[c],g=e.isReactive(i),u=g?e.toRefs(i):{};for(const d in i){let a=i[d],p=d;if(g&&u[d]&&(a=u[d]),t&&(p=`${t}${d.charAt(0).toUpperCase()+d.slice(1)}`),typeof a=="object"&&!e.isRef(a)&&!Array.isArray(a)&&a.value!==void 0){const f=a,w=e.isRef(f.value)?f.value:e.ref(f.value),N=f.type||I(f),x=z(d,w,N,t);N==="select"&&(x.options=e.ref(f.options.map(C=>typeof C=="object"&&C.text&&C.value?C:{text:C,value:C}))),N==="range"&&(x.min=e.ref(f.min||0),x.max=e.ref(f.max||1),x.step=e.ref(f.step||.1)),x.label.value=f.label||d,x.icon.value=f.icon,x.visible.value=f.visible!==void 0?f.visible:!0,x.uniqueKey.value=p,m[p]=x,n[p]=x;continue}if(e.isRef(a)){const f=z(d,a,a.value.type||I(a.value),t);m[p]=f,n[p]=f;continue}else if(typeof a=="object"&&!Array.isArray(a)){const f=e.toRefs(a);f[d]&&(a=f[d])}const E=z(d,a,a.type||I(a),t);m[p]=E,n[p]=E,E.uniqueKey.value=p}return Object.keys(n).length>1?e.toRefs(e.reactive(n)):Object.values(n)[0]};function re(l){if(typeof l=="number")return[l,l,l];if(A(l)){const{x:r,y:o,z:n}=l;return[r,o,n]}if(P(l)){const{x:r,y:o}=l;return[r,o]}return l}function P(l){return l&&typeof l.x=="number"&&typeof l.y=="number"}function A(l){return l&&typeof l.x=="number"&&typeof l.y=="number"&&typeof l.z=="number"}function ae(l){let r=0;return l.traverse(o=>{if(o.isMesh&&o.geometry){const n=o.geometry,t=n.attributes.position.count*3*Float32Array.BYTES_PER_ELEMENT,i=n.index?n.index.count*Uint32Array.BYTES_PER_ELEMENT:0,s=n.attributes.normal?n.attributes.normal.count*3*Float32Array.BYTES_PER_ELEMENT:0,c=n.attributes.uv?n.attributes.uv.count*2*Float32Array.BYTES_PER_ELEMENT:0,m=t+i+s+c;r+=m}}),r}function se(l){return(l/1024).toFixed(2)}const ce=Symbol("PERF_CONTEXT_KEY"),K="default",L=e.reactive({[K]:{perf:{fps:e.reactive({value:0,accumulator:[],lastLoggedTime:Date.now(),logInterval:1e3}),memory:e.reactive({currentMem:0,averageMem:0,maxMemory:0,allocatedMem:0,accumulator:[],lastLoggedTime:Date.now(),logInterval:1e3}),gl:void 0,scene:void 0}}});function R(l=K){return e.provide(ce,L),L[l].perf}function Y(l){const{renderer:r,scene:o}=Z.useTresContext(),n=(l==null?void 0:l.renderer)||r.value;if(!n)throw new Error("Renderer not found");const t=L[K].perf;t.gl=n,t.scene=o.value;const i=100,s=k.useFps({every:i}),{isSupported:c,memory:m}=k.useMemory({interval:i}),g=80;let u=performance.now();const d=({timestamp:E})=>{t.memory.allocatedMem=ae(e.unref(o)),E-u>=i&&(u=E,t.fps.accumulator.push(s.value),t.fps.accumulator.length>g&&t.fps.accumulator.shift(),t.fps.value=t.fps.accumulator.reduce((f,w)=>f+w,0)/t.fps.accumulator.length,c.value&&m.value&&(t.memory.accumulator.push(m.value.usedJSHeapSize/1024/1024),t.memory.accumulator.length>g&&t.memory.accumulator.shift(),t.memory.currentMem=t.memory.accumulator.reduce((f,w)=>f+w,0)/t.memory.accumulator.length))},{pause:a,resume:p}=k.useRafFn(d,{immediate:!0});return e.onUnmounted(()=>{a()}),{perf:t,fps:t.fps,memory:t.memory,gl:t.gl,pausePerfTracking:a,resumePerfTracking:p}}const ie=["for","title"],D=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,ie))}}),de={class:"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2"},pe=["id","value","min","max","step"],me=e.defineComponent({__name:"NumberControl",props:{label:{},control:{}},emits:["change"],setup(l,{emit:r}){const o=l,n=r;function t(d){const{target:a}=d;n("change",a.valueAsNumber)}const i=k.useMouse(),s=e.ref(0),c=e.ref(!1),m=d=>{s.value=d.clientX,c.value=!0},g=()=>{c.value=!1},u=d=>Math.floor(Math.abs(d)/10);return e.watch(i.x,d=>{if(c.value){const a=d-s.value,p=u(a);a>0?n("change",o.control.value+1+p):a<0&&n("change",o.control.value-1+p),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=d}}),(d,a)=>(e.openBlock(),e.createElementBlock("div",de,[e.createVNode(D,{label:d.label,control:d.control},null,8,["label","control"]),e.createElementVNode("input",{id:d.control.uniqueKey,value:d.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":c.value}]),type:"number",min:d.control.min,max:d.control.max,step:d.control.step,onInput:t,onMousedown:m,onMouseup:g},null,42,pe)]))}}),fe={class:"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px"},ue=["id","value","aria-label"],ge=e.defineComponent({__name:"TextControl",props:{label:{},control:{}},emits:["change"],setup(l,{emit:r}){const o=r;function n(t){const{target:i}=t;o("change",i.value)}return(t,i)=>(e.openBlock(),e.createElementBlock("div",fe,[e.createVNode(D,{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,ue)]))}}),he={class:"tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px"},be={class:"tl-text-gray-500 tl-w-1/3"},ye=["id","checked"],_e=["for"],ke=["aria-checked"],Ee={class:"i-ic:baseline-check tl-text-light"},xe=e.defineComponent({__name:"BooleanControl",props:{label:{},control:{}},emits:["change"],setup(l,{emit:r}){const o=l,n=r;function t(s){const{target:c}=s;n("change",c.checked)}function i(s){(s.code==="Space"||s.code==="Enter")&&(s.preventDefault(),n("change",!o.control.value))}return(s,c)=>(e.openBlock(),e.createElementBlock("div",he,[e.createElementVNode("label",be,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,ye),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:i},[e.withDirectives(e.createElementVNode("i",Ee,null,512),[[e.vShow,s.control.value]])],42,ke)],8,_e)]))}}),we={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"],Ce=["value","min","max","step"],Ve=e.defineComponent({__name:"SliderControl",props:{label:{},control:{}},emits:["change"],setup(l,{emit:r}){const o=l,n=r;function t(a){const{target:p}=a;n("change",p.valueAsNumber)}const i=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=k.useMouse(),c=e.ref(0),m=e.ref(!1),g=a=>{c.value=a.clientX,m.value=!0},u=()=>{m.value=!1},d=a=>Math.floor(Math.abs(a)/10);return e.watch(s.x,a=>{if(m.value){const p=a-c.value,E=d(p);p>0?n("change",o.control.value+1+E):p<0&&n("change",o.control.value-1+E),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),c.value=a}}),(a,p)=>(e.openBlock(),e.createElementBlock("div",we,[e.createVNode(D,{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(i.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":m.value}]),type:"number",min:a.control.min,max:a.control.max,step:a.control.step,onInput:t,onMousedown:g,onMouseup:u},null,42,Ce)]))}}),W=(l,r)=>{const o=l.__vccOpts||l;for(const[n,t]of r)o[n]=t;return o},Ne=W(Ve,[["__scopeId","data-v-e775088a"]]),$e={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"},Se=["id","value","aria-label"],Te=["id","aria-label","value"],De=e.defineComponent({__name:"ColorControl",props:{label:{},control:{}},emits:["change"],setup(l,{emit:r}){const o=r;function n(t){const{target:i}=t;o("change",i.value)}return(t,i)=>(e.openBlock(),e.createElementBlock("div",$e,[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: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,Se),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,Te)]))}}),Fe={class:"tl-relative tl-w-2/3 tl-flex tl-justify-between tl-gap-0.5"},ze={key:0,class:"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300"},Ie=["id","step","value","onInput","onMousedown","onMouseup","onFocus"],Pe=e.defineComponent({__name:"VectorControl",props:{label:{},control:{}},emits:["change"],setup(l,{emit:r}){const o=l,n=r,t=k.useMouse(),{pressed:i}=k.useMousePressed(),s=e.ref(0),c=e.ref(!1),m=e.ref(0),g=e.ref(null),u=e.ref(1),d=k.useKeyModifier("Shift"),a=k.useKeyModifier("Alt");e.watch(d,h=>{u.value=h?10:1}),e.watch(a,h=>{u.value=h?.1:1});const p=h=>{g.value=h},E=()=>{g.value=null},f=(h,_)=>{m.value=_,s.value=h.clientX,c.value=!0},w=(h,_)=>{m.value=_,c.value=!1},N=()=>{c.value=!1};e.watch(i,h=>{h||(c.value=!1)});const x=h=>Math.floor(Math.abs(h)/10),C=e.computed(()=>re(o.control.value)),M=e.ref(["x","y","z"]),F=e.computed(()=>P(o.control.value)||A(o.control.value));function b(h,_){const{value:S}=o.control,{target:y}=h;m.value=_,S[F.value?M.value[m.value]:m.value]=parseFloat(y.value),n("change",S)}return e.watch(t.x,h=>{if(c.value){const _=h-s.value,S=x(_),{value:y}=o.control,V=F.value?M.value[m.value]:m.value;_>0?y[V]+=u.value+S:_<0&&(y[V]-=u.value+S),o.control.min!==void 0&&y<o.control.min&&(y[V]=o.control.min),o.control.max!==void 0&&y>o.control.max&&(y[V]=o.control.max),n("change",y),s.value=h}}),(h,_)=>(e.openBlock(),e.createElementBlock("div",{class:"tl-flex tl-px-4 tl-justify-between tl-gap-1 tl-items-center tl-mb-2",onMouseup:_[0]||(_[0]=S=>N())},[e.createVNode(D,{label:h.label,control:h.control},null,8,["label","control"]),e.createElementVNode("div",Fe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,(S,y)=>(e.openBlock(),e.createElementBlock("div",{key:h.label+y,class:e.normalizeClass(["tl-flex tl-items-center tl-bg-gray-100 tl-rounded",{"tl-w-2/5":g.value===y,"tl-w-1/3":e.unref(A)(h.control.value),"tl-w-1/2":e.unref(P)(h.control.value)}])},[M.value[y]&&F.value?(e.openBlock(),e.createElementBlock("span",ze,e.toDisplayString(M.value[y]),1)):e.createCommentVNode("",!0),e.createElementVNode("input",{id:`${h.control.uniqueKey}-${M.value[y]}`,type:"number",step:u.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":c.value}]),value:C.value[y].toFixed(2),onInput:V=>b(V,y),onMousedown:V=>f(V,y),onMouseup:V=>w(V,y),onFocus:V=>p(y),onBlur:E},null,42,Ie)],2))),128))])],32))}}),Ae={class:"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2"},Ke={class:"tl-text-gray-500 tl-w-1/3"},Le={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"},Re={class:"tl-absolute tl-bottom-0.5 tl-right-0.5 tl-font-sans tl-text-xs"},Ue=["points"],Oe=160,U=40,G=2,H=e.defineComponent({__name:"Graph",props:{points:{},value:{},unit:{},label:{}},setup(l){const r=l,o=e.ref(140);e.watchEffect(()=>{const t=Math.max(...r.points,30);o.value=Math.max(t,o.value)});const n=e.computed(()=>r.points.map((t,i)=>`${i*G},${U-t*U/o.value}`).join(" "));return(t,i)=>(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("label",Ke,e.toDisplayString(t.label),1),e.createElementVNode("div",Le,[e.createElementVNode("div",Re,e.toDisplayString(Math.round(t.value))+" "+e.toDisplayString(t.unit),1),(e.openBlock(),e.createElementBlock("svg",{width:Oe,height:U,xmlns:"http://www.w3.org/2000/svg",class:"tl-bg-gray-100"},[e.createElementVNode("polyline",{points:n.value,fill:"none",stroke:"lightgray","stroke-width":G,"stroke-linecap":"round","stroke-linejoin":"round"},null,8,Ue)]))])]))}}),qe=e.defineComponent({__name:"FPSGraph",props:{label:{},control:{}},setup(l){const{fps:r}=R();return(o,n)=>(e.openBlock(),e.createBlock(H,{points:e.unref(r).accumulator,value:e.unref(r).value,unit:"FPS",label:o.label},null,8,["points","value","label"]))}}),je={class:"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px"},Xe=["id","value"],Ye=["value"],We=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,i)=>(e.openBlock(),e.createElementBlock("div",je,[e.createVNode(D,{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,Ye))),128))],40,Xe)]))}}),Ge=W(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"}`,i=`leches-btn-${r.control.value.size||"sm"}`;return[n,t,i]});return(n,t)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(o.value),onClick:t[0]||(t[0]=(...i)=>n.control.value.onClick&&n.control.value.onClick(...i))},[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"]]),J=e.defineComponent({__name:"ControlInput",props:{control:{}},emits:["change"],setup(l,{emit:r}){const o=r;function n(t){o("change",t)}return(t,i)=>t.control.visible?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[t.control.type==="color"?(e.openBlock(),e.createBlock(De,{key:0,label:t.control.label,control:t.control,onChange:n},null,8,["label","control"])):t.control.type==="select"?(e.openBlock(),e.createBlock(We,{key:1,label:t.control.label,control:t.control,onChange:n},null,8,["label","control"])):t.control.type==="vector"?(e.openBlock(),e.createBlock(Pe,{key:2,label:t.control.label,control:t.control,onChange:n},null,8,["label","control"])):t.control.type==="boolean"?(e.openBlock(),e.createBlock(xe,{key:3,label:t.control.label,control:t.control,onChange:n},null,8,["label","control"])):t.control.type==="fpsgraph"?(e.openBlock(),e.createBlock(qe,{key:4,label:t.control.label,control:t.control},null,8,["label","control"])):t.control.type==="number"?(e.openBlock(),e.createBlock(me,{key:5,label:t.control.label,control:t.control,onChange:n},null,8,["label","control"])):t.control.type==="range"?(e.openBlock(),e.createBlock(Ne,{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(Ge,{label:t.control.label,control:t.control},null,8,["label","control"])],2)):(e.openBlock(),e.createBlock(ge,{key:8,label:t.control.label,control:t.control,onChange:n},null,8,["label","control"]))],64)):e.createCommentVNode("",!0)}}),He={class:"tl-mb-4"},Je=["aria-expanded","data-folder"],Qe={class:"tl-bg-white tl-rounded-b tl-pt-4",role:"menu"},Ze=e.defineComponent({__name:"Folder",props:{controls:{},label:{}},setup(l){function r(t,i){i.value=t}const o=e.ref(!1),n=()=>{o.value=!o.value};return(t,i)=>(e.openBlock(),e.createElementBlock("div",He,[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,Je),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",Qe,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.controls,s=>(e.openBlock(),e.createBlock(J,{key:s.label,control:s,role:"menuitem",onChange:c=>r(c,s)},null,8,["control","onChange"]))),128))],512),[[e.vShow,o.value]])]),_:1})]))}}),ve={class:"tl-relative tl-px-4 tl-py-6 tl-grid tl-grid-cols-2 tl-border tl-border-solid tl-border-gray-300 tl-rounded tl-my-4"},et={class:"tl-absolute tl-bg-white tl-text-gray-400 tl-px-2 tl-rounded -tl-top-2 tl-left-2"},O=e.defineComponent({__name:"Pane",props:{title:{}},setup(l){return(r,o)=>(e.openBlock(),e.createElementBlock("div",ve,[e.createElementVNode("span",et,e.toDisplayString(r.title),1),e.renderSlot(r.$slots,"default")]))}}),tt={class:""},lt=["onClick"],ot={class:"tl-cursor-pointer tl-flex tl-items-center"},nt={class:"tl-mr-2 tl-py-2"},rt=[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"},null,-1)],at={class:"tl-border-l-2 tl-border-transparent tl-border-l-gray-200 tl-border-2 tl-border-solid tl-ml-2 tl-pl-4"},Q=e.defineComponent({__name:"Tree",props:{items:{},depth:{default:0}},setup(l){const r=l,o=e.computed(()=>{var t;return(t=r.items)==null?void 0:t.map(i=>e.reactive({...i,isOpen:!1}))});function n(t){t.isOpen=!t.isOpen}return(t,i)=>(e.openBlock(),e.createElementBlock("div",tt,[e.createElementVNode("ul",{class:e.normalizeClass(["tl-list-none",{"tl-pl-0":t.depth===0}]),"V-IF":""},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(s,c)=>(e.openBlock(),e.createElementBlock("li",{key:c,onClick:m=>n(s)},[e.createElementVNode("div",ot,[e.createElementVNode("span",nt,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass([s.isOpen?"tl-transform tl-rotate-90":"","tl-w-4 tl-h-4 tl-transition-transform tl-text-gray-300"]),xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},rt,2))]),e.createTextVNode(" "+e.toDisplayString(s.name),1)]),e.withDirectives(e.createElementVNode("div",at,[e.renderSlot(t.$slots,`depth-${t.depth}`,{item:s},()=>[e.createVNode(Q,{items:s.children,depth:t.depth+1},null,8,["items","depth"])])],512),[[e.vShow,s.isOpen]])],8,lt))),128))],2)]))}}),st={class:"tl-mb-4"},ct=["aria-expanded"],it=e.createElementVNode("span",null,[e.createElementVNode("i",{class:"i-iconoir-dashboard-speed"}),e.createTextVNode(" Performance ")],-1),dt={class:"tl-bg-white tl-rounded-b tl-pt-4",role:"menu"},pt={class:"tl-p-2"},mt={class:"tl-flex tl-items-center tl-mb-2"},ft={class:"tl-bg-gray-200 tl-text-gray-600 tl-rounded tl-p-1 tl-flex tl-w-4 tl-mr-1"},ut={class:"tl-ml-2 tl-font-bold tl-text"},gt={class:"tl-text-xs tl-text-gray-500"},ht={class:"tl-flex tl-items-center tl-mb-2"},bt={class:"tl-bg-gray-200 tl-text-gray-600 tl-rounded tl-p-1 tl-flex tl-w-4 tl-mr-1"},yt={class:"tl-ml-2 tl-font-bold tl-text"},_t={class:"tl-text-xs tl-text-gray-500"},kt={class:"tl-w-full tl-overflow tl-text-xxs"},Et=e.defineComponent({__name:"index",props:{uuid:{}},setup(l){const r=l,{uuid:o}=e.toRefs(r),{gl:n,memory:t}=R(o==null?void 0:o.value),i=[{label:"geometries",icon:"i-iconoir-box-3d-three-points"},{label:"textures",icon:"i-iconoir-select-face-3d"}],s=[{label:"calls",icon:"i-iconoir-comp-align-left"},{label:"triangles",icon:"i-iconoir-triangle"},{label:"points",icon:"i-iconoir-one-point-circle"},{label:"lines",icon:"i-iconoir-linear"}],c=e.reactive({geometries:0,textures:0,calls:0,triangles:0,points:0,lines:0,programs:[]});k.useRafFn(()=>{n&&(c.geometries=n.info.memory.geometries,c.textures=n.info.memory.textures,c.calls=n.info.render.calls,c.triangles=n.info.render.triangles,c.points=n.info.render.points,c.lines=n.info.render.lines,c.programs=n.info.programs)});const m=e.ref(!1),g=()=>{m.value=!m.value},u=e.computed(()=>c.programs.map(d=>({...d,name:d.type,uniforms:d.getUniforms()})));return(d,a)=>(e.openBlock(),e.createElementBlock("div",st,[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":m.value,"aria-haspopup":"true",role:"button",tabindex:"0",onClick:g},[it,e.createElementVNode("i",{class:e.normalizeClass(m.value?"i-ic:baseline-keyboard-arrow-up":"i-ic:baseline-keyboard-arrow-down")},null,2)],8,ct),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",dt,[e.createElementVNode("div",pt,[e.createVNode(O,{title:`Memory ${e.unref(se)(e.unref(t).allocatedMem)}KB`},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(i,p=>e.createElementVNode("div",{key:p,class:"tl-flex tl-flex-col tl-items-center"},[e.createElementVNode("div",mt,[e.createElementVNode("span",ft,[e.createElementVNode("i",{class:e.normalizeClass(["tl-pl tl-text-sm",p.icon])},null,2)]),e.createElementVNode("span",ut,e.toDisplayString(c[p.label]),1)]),e.createElementVNode("span",gt,e.toDisplayString(p.label),1)])),64))]),_:1},8,["title"]),e.createVNode(H,{points:e.unref(t).accumulator,value:e.unref(t).currentMem,unit:"MB",label:"memory"},null,8,["points","value"]),e.createVNode(O,{title:"Render"},{default:e.withCtx(()=>[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(s,p=>e.createElementVNode("div",{key:p,class:"tl-flex tl-flex-col tl-items-center tl-mb-2"},[e.createElementVNode("div",ht,[e.createElementVNode("span",bt,[e.createElementVNode("i",{class:e.normalizeClass(["tl-pl tl-text-sm",p.icon])},null,2)]),e.createElementVNode("span",yt,e.toDisplayString(c[p.label]),1)]),e.createElementVNode("span",_t,e.toDisplayString(p.label),1)])),64))]),_:1}),e.createVNode(O,{title:"Programs"},{default:e.withCtx(()=>[e.createVNode(Q,{items:u.value},{"depth-0":e.withCtx(({item:p})=>[e.createElementVNode("pre",kt,e.toDisplayString(p),1)]),_:1},8,["items"])]),_:1})])],512),[[e.vShow,m.value]])]),_:1})]))}}),xt={tabindex:"0",class:"tl-bg-white tl-shadow-xl tl-rounded tl-border-4 tl-border-solid tl-border-black"},wt=[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)],Bt=280,Ct=e.defineComponent({__name:"TresLeches",props:{uuid:{}},setup(l){const r=l,{uuid:o}=e.toRefs(r),{width:n}=k.useWindowSize(),t=e.ref(null),i=X(o==null?void 0:o.value),s=R(o==null?void 0:o.value);function c(g,u){i[e.unref(g)].value=u,i[e.unref(g)][e.unref(g)]=u}const m=e.computed(()=>{const g={};for(const u in i){const d=i[u],a=d.folder||"default";g[a]||(g[a]=[]),g[a].push(d)}return g});return(g,u)=>(e.openBlock(),e.createBlock(e.unref(le),{id:e.unref(o),"initial-value":{x:e.unref(n)-Bt-40,y:10},class:e.normalizeClass(["tl-absolute tl-select-none tl-z-24 tl-w-280px tl-font-sans tl-text-xs",g.$attrs.class]),handle:t.value},{default:e.withCtx(()=>[e.createElementVNode("div",xt,[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"},wt,512),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.value,(d,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:a},[a!=="default"?(e.openBlock(),e.createBlock(Ze,{key:0,label:a,controls:d},null,8,["label","controls"])):e.createCommentVNode("",!0),a==="default"?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(d,p=>(e.openBlock(),e.createBlock(J,{key:p.label,control:p,onChange:E=>c(p.key,E)},null,8,["control","onChange"]))),128)):e.createCommentVNode("",!0)],64))),128)),e.unref(s).gl?(e.openBlock(),e.createBlock(Et,{key:0,uuid:e.unref(o)},null,8,["uuid"])):e.createCommentVNode("",!0)])]),_:1},8,["id","initial-value","class","handle"]))}}),Vt=e.defineComponent({__name:"TresPerf",setup(l){return Y(),(r,o)=>(e.openBlock(),e.createElementBlock("div"))}});B.Perf=Vt,B.TresLeches=Ct,B.useControls=ne,B.useControlsProvider=X,B.usePerf=Y,Object.defineProperty(B,Symbol.toStringTag,{value:"Module"})});

package/dist/utils/index.d.ts

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

package/dist/utils/perf.d.ts

@@ -0,0 +1,6 @@
+import type { TresObject } from '@tresjs/core';
+import type { Scene } from 'three';
+export declare function calculateMemoryUsage(object: TresObject | Scene): number;
+export declare function bytesToKB(bytes: number): string;
+export declare function bytesToMB(bytes: number): string;
+export declare function bytesToGB(bytes: number): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/leches",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.15.0-next.2",
   "packageManager": "pnpm@8.3.1",
   "description": "Tasty GUI for Vue controls 🍰",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -52,19 +52,24 @@
     "docs:preview": "vitepress preview docs"
   },
   "peerDependencies": {
+    "three": ">=0.133",
     "vue": ">=3.3.4"
   },
   "dependencies": {
-    "@unocss/core": "^0.57.7",
-    "@vueuse/components": "^10.6.1",
+    "@tresjs/core": "3.5.1",
+    "@types/three": "^0.158.1",
+    "@unocss/core": "^0.57.2",
+    "@vueuse/components": "^10.5.0",
     "vite-plugin-css-injected-by-js": "^3.3.0"
   },
   "devDependencies": {
     "@histoire/plugin-vue": "^0.17.6",
     "@iconify-json/ic": "^1.1.16",
+    "@iconify-json/iconoir": "^1.1.33",
     "@iconify/json": "^2.2.150",
     "@release-it/conventional-changelog": "^8.0.1",
     "@tresjs/eslint-config-vue": "^0.2.1",
+    "@types/webgl2": "^0.0.10",
     "@typescript-eslint/eslint-plugin": "^6.13.1",
     "@typescript-eslint/parser": "^6.13.1",
     "@vitejs/plugin-vue": "^4.5.0",
@@ -82,6 +87,7 @@
     "release-it": "^17.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.3",
+    "three": "^0.159.0",
     "typescript": "^5.3.2",
     "unocss": "^0.57.7",
     "unplugin-vue-components": "^0.25.2",