magic-canvas-yonava 1.0.9 → 1.0.11

package/dist/index.es.js

@@ -2772,7 +2772,7 @@ const bt = (e, t) => {
       t.cleanup(o.value);
     }), (r, n) => (dt(), ct("canvas", ut({
       ...r.$attrs,
-      class: Fe(ro)(r.$attrs.class, ["w-full", "h-full"])
+      class: Fe(ro)(r.$attrs.class, ["w-[100vw]", "h-[100vh]"])
     }, {
       ref_key: "canvas",
       ref: o

package/dist/index.umd.js

@@ -1 +1 @@
-(function(E,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],m):(E=typeof globalThis<"u"?globalThis:E||self,m(E.MagicCanvas={},E.Vue))})(this,(function(E,m){"use strict";const Ke=(e,t)=>{const o=new Array(e.length+t.length);for(let n=0;n<e.length;n++)o[n]=e[n];for(let n=0;n<t.length;n++)o[e.length+n]=t[n];return o},Qe=(e,t)=>({classGroupId:e,validator:t}),ye=(e=new Map,t=null,o)=>({nextPart:e,validators:t,classGroupId:o}),ke=[],et="arbitrary..",tt=e=>{const t=nt(e),{conflictingClassGroups:o,conflictingClassGroupModifiers:n}=e;return{getClassGroupId:s=>{if(s.startsWith("[")&&s.endsWith("]"))return ot(s);const i=s.split("-"),l=i[0]===""&&i.length>1?1:0;return xe(i,l,t)},getConflictingClassGroupIds:(s,i)=>{if(i){const l=n[s],u=o[s];return l?u?Ke(u,l):l:u||ke}return o[s]||ke}}},xe=(e,t,o)=>{if(e.length-t===0)return o.classGroupId;const r=e[t],a=o.nextPart.get(r);if(a){const u=xe(e,t+1,a);if(u)return u}const s=o.validators;if(s===null)return;const i=t===0?e.join("-"):e.slice(t).join("-"),l=s.length;for(let u=0;u<l;u++){const b=s[u];if(b.validator(i))return b.classGroupId}},ot=e=>e.slice(1,-1).indexOf(":")===-1?void 0:(()=>{const t=e.slice(1,-1),o=t.indexOf(":"),n=t.slice(0,o);return n?et+n:void 0})(),nt=e=>{const{theme:t,classGroups:o}=e;return rt(o,t)},rt=(e,t)=>{const o=ye();for(const n in e){const r=e[n];me(r,o,n,t)}return o},me=(e,t,o,n)=>{const r=e.length;for(let a=0;a<r;a++){const s=e[a];st(s,t,o,n)}},st=(e,t,o,n)=>{if(typeof e=="string"){at(e,t,o);return}if(typeof e=="function"){it(e,t,o,n);return}lt(e,t,o,n)},at=(e,t,o)=>{const n=e===""?t:Ce(t,e);n.classGroupId=o},it=(e,t,o,n)=>{if(ct(e)){me(e(n),t,o,n);return}t.validators===null&&(t.validators=[]),t.validators.push(Qe(o,e))},lt=(e,t,o,n)=>{const r=Object.entries(e),a=r.length;for(let s=0;s<a;s++){const[i,l]=r[s];me(l,Ce(t,i),o,n)}},Ce=(e,t)=>{let o=e;const n=t.split("-"),r=n.length;for(let a=0;a<r;a++){const s=n[a];let i=o.nextPart.get(s);i||(i=ye(),o.nextPart.set(s,i)),o=i}return o},ct=e=>"isThemeGetter"in e&&e.isThemeGetter===!0,dt=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,o=Object.create(null),n=Object.create(null);const r=(a,s)=>{o[a]=s,t++,t>e&&(t=0,n=o,o=Object.create(null))};return{get(a){let s=o[a];if(s!==void 0)return s;if((s=n[a])!==void 0)return r(a,s),s},set(a,s){a in o?o[a]=s:r(a,s)}}},ut=[],Se=(e,t,o,n,r)=>({modifiers:e,hasImportantModifier:t,baseClassName:o,maybePostfixModifierPosition:n,isExternal:r}),mt=e=>{const{prefix:t,experimentalParseClassName:o}=e;let n=r=>{const a=[];let s=0,i=0,l=0,u;const b=r.length;for(let k=0;k<b;k++){const x=r[k];if(s===0&&i===0){if(x===":"){a.push(r.slice(l,k)),l=k+1;continue}if(x==="/"){u=k;continue}}x==="["?s++:x==="]"?s--:x==="("?i++:x===")"&&i--}const f=a.length===0?r:r.slice(l);let y=f,S=!1;f.endsWith("!")?(y=f.slice(0,-1),S=!0):f.startsWith("!")&&(y=f.slice(1),S=!0);const p=u&&u>l?u-l:void 0;return Se(a,S,y,p)};if(t){const r=t+":",a=n;n=s=>s.startsWith(r)?a(s.slice(r.length)):Se(ut,!1,s,void 0,!0)}if(o){const r=n;n=a=>o({className:a,parseClassName:r})}return n},ft=e=>{const t=new Map;return e.orderSensitiveModifiers.forEach((o,n)=>{t.set(o,1e6+n)}),o=>{const n=[];let r=[];for(let a=0;a<o.length;a++){const s=o[a],i=s[0]==="[",l=t.has(s);i||l?(r.length>0&&(r.sort(),n.push(...r),r=[]),n.push(s)):r.push(s)}return r.length>0&&(r.sort(),n.push(...r)),n}},pt=e=>({cache:dt(e.cacheSize),parseClassName:mt(e),sortModifiers:ft(e),...tt(e)}),gt=/\s+/,ht=(e,t)=>{const{parseClassName:o,getClassGroupId:n,getConflictingClassGroupIds:r,sortModifiers:a}=t,s=[],i=e.trim().split(gt);let l="";for(let u=i.length-1;u>=0;u-=1){const b=i[u],{isExternal:f,modifiers:y,hasImportantModifier:S,baseClassName:p,maybePostfixModifierPosition:k}=o(b);if(f){l=b+(l.length>0?" "+l:l);continue}let x=!!k,R=n(x?p.substring(0,k):p);if(!R){if(!x){l=b+(l.length>0?" "+l:l);continue}if(R=n(p),!R){l=b+(l.length>0?" "+l:l);continue}x=!1}const G=y.length===0?"":y.length===1?y[0]:a(y).join(":"),P=S?G+"!":G,L=P+R;if(s.indexOf(L)>-1)continue;s.push(L);const I=r(R,x);for(let N=0;N<I.length;++N){const j=I[N];s.push(P+j)}l=b+(l.length>0?" "+l:l)}return l},bt=(...e)=>{let t=0,o,n,r="";for(;t<e.length;)(o=e[t++])&&(n=Ae(o))&&(r&&(r+=" "),r+=n);return r},Ae=e=>{if(typeof e=="string")return e;let t,o="";for(let n=0;n<e.length;n++)e[n]&&(t=Ae(e[n]))&&(o&&(o+=" "),o+=t);return o},wt=(e,...t)=>{let o,n,r,a;const s=l=>{const u=t.reduce((b,f)=>f(b),e());return o=pt(u),n=o.cache.get,r=o.cache.set,a=i,i(l)},i=l=>{const u=n(l);if(u)return u;const b=ht(l,o);return r(l,b),b};return a=s,(...l)=>a(bt(...l))},vt=[],M=e=>{const t=o=>o[e]||vt;return t.isThemeGetter=!0,t},Me=/^\[(?:(\w[\w-]*):)?(.+)\]$/i,Re=/^\((?:(\w[\w-]*):)?(.+)\)$/i,yt=/^\d+\/\d+$/,kt=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,xt=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,Ct=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,St=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,At=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,B=e=>yt.test(e),w=e=>!!e&&!Number.isNaN(Number(e)),X=e=>!!e&&Number.isInteger(Number(e)),fe=e=>e.endsWith("%")&&w(e.slice(0,-1)),F=e=>kt.test(e),Mt=()=>!0,Rt=e=>xt.test(e)&&!Ct.test(e),Te=()=>!1,Tt=e=>St.test(e),zt=e=>At.test(e),Et=e=>!c(e)&&!d(e),Pt=e=>$(e,Ie,Te),c=e=>Me.test(e),D=e=>$(e,_e,Rt),pe=e=>$(e,Nt,w),ze=e=>$(e,Pe,Te),Ot=e=>$(e,Oe,zt),q=e=>$(e,Le,Tt),d=e=>Re.test(e),J=e=>U(e,_e),It=e=>U(e,Yt),Ee=e=>U(e,Pe),_t=e=>U(e,Ie),Lt=e=>U(e,Oe),K=e=>U(e,Le,!0),$=(e,t,o)=>{const n=Me.exec(e);return n?n[1]?t(n[1]):o(n[2]):!1},U=(e,t,o=!1)=>{const n=Re.exec(e);return n?n[1]?t(n[1]):o:!1},Pe=e=>e==="position"||e==="percentage",Oe=e=>e==="image"||e==="url",Ie=e=>e==="length"||e==="size"||e==="bg-size",_e=e=>e==="length",Nt=e=>e==="number",Yt=e=>e==="family-name",Le=e=>e==="shadow",Ft=wt(()=>{const e=M("color"),t=M("font"),o=M("text"),n=M("font-weight"),r=M("tracking"),a=M("leading"),s=M("breakpoint"),i=M("container"),l=M("spacing"),u=M("radius"),b=M("shadow"),f=M("inset-shadow"),y=M("text-shadow"),S=M("drop-shadow"),p=M("blur"),k=M("perspective"),x=M("aspect"),R=M("ease"),G=M("animate"),P=()=>["auto","avoid","all","avoid-page","page","left","right","column"],L=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom"],I=()=>[...L(),d,c],N=()=>["auto","hidden","clip","visible","scroll"],j=()=>["auto","contain","none"],h=()=>[d,c,l],_=()=>[B,"full","auto",...h()],se=()=>[X,"none","subgrid",d,c],ae=()=>["auto",{span:["full",X,d,c]},X,d,c],Y=()=>[X,"auto",d,c],ie=()=>["auto","min","max","fr",d,c],v=()=>["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"],C=()=>["start","end","center","stretch","center-safe","end-safe"],A=()=>["auto",...h()],W=()=>[B,"auto","full","dvw","dvh","lvw","lvh","svw","svh","min","max","fit",...h()],g=()=>[e,d,c],Ue=()=>[...L(),Ee,ze,{position:[d,c]}],Ze=()=>["no-repeat",{repeat:["","x","y","space","round"]}],He=()=>["auto","cover","contain",_t,Pt,{size:[d,c]}],we=()=>[fe,J,D],z=()=>["","none","full",u,d,c],O=()=>["",w,J,D],le=()=>["solid","dashed","dotted","double"],Je=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],T=()=>[w,fe,Ee,ze],qe=()=>["","none",p,d,c],ce=()=>["none",w,d,c],de=()=>["none",w,d,c],ve=()=>[w,d,c],ue=()=>[B,"full",...h()];return{cacheSize:500,theme:{animate:["spin","ping","pulse","bounce"],aspect:["video"],blur:[F],breakpoint:[F],color:[Mt],container:[F],"drop-shadow":[F],ease:["in","out","in-out"],font:[Et],"font-weight":["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"],"inset-shadow":[F],leading:["none","tight","snug","normal","relaxed","loose"],perspective:["dramatic","near","normal","midrange","distant","none"],radius:[F],shadow:[F],spacing:["px",w],text:[F],"text-shadow":[F],tracking:["tighter","tight","normal","wide","wider","widest"]},classGroups:{aspect:[{aspect:["auto","square",B,c,d,x]}],container:["container"],columns:[{columns:[w,c,d,i]}],"break-after":[{"break-after":P()}],"break-before":[{"break-before":P()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],sr:["sr-only","not-sr-only"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:I()}],overflow:[{overflow:N()}],"overflow-x":[{"overflow-x":N()}],"overflow-y":[{"overflow-y":N()}],overscroll:[{overscroll:j()}],"overscroll-x":[{"overscroll-x":j()}],"overscroll-y":[{"overscroll-y":j()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:_()}],"inset-x":[{"inset-x":_()}],"inset-y":[{"inset-y":_()}],start:[{start:_()}],end:[{end:_()}],top:[{top:_()}],right:[{right:_()}],bottom:[{bottom:_()}],left:[{left:_()}],visibility:["visible","invisible","collapse"],z:[{z:[X,"auto",d,c]}],basis:[{basis:[B,"full","auto",i,...h()]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["nowrap","wrap","wrap-reverse"]}],flex:[{flex:[w,B,"auto","initial","none",c]}],grow:[{grow:["",w,d,c]}],shrink:[{shrink:["",w,d,c]}],order:[{order:[X,"first","last","none",d,c]}],"grid-cols":[{"grid-cols":se()}],"col-start-end":[{col:ae()}],"col-start":[{"col-start":Y()}],"col-end":[{"col-end":Y()}],"grid-rows":[{"grid-rows":se()}],"row-start-end":[{row:ae()}],"row-start":[{"row-start":Y()}],"row-end":[{"row-end":Y()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":ie()}],"auto-rows":[{"auto-rows":ie()}],gap:[{gap:h()}],"gap-x":[{"gap-x":h()}],"gap-y":[{"gap-y":h()}],"justify-content":[{justify:[...v(),"normal"]}],"justify-items":[{"justify-items":[...C(),"normal"]}],"justify-self":[{"justify-self":["auto",...C()]}],"align-content":[{content:["normal",...v()]}],"align-items":[{items:[...C(),{baseline:["","last"]}]}],"align-self":[{self:["auto",...C(),{baseline:["","last"]}]}],"place-content":[{"place-content":v()}],"place-items":[{"place-items":[...C(),"baseline"]}],"place-self":[{"place-self":["auto",...C()]}],p:[{p:h()}],px:[{px:h()}],py:[{py:h()}],ps:[{ps:h()}],pe:[{pe:h()}],pt:[{pt:h()}],pr:[{pr:h()}],pb:[{pb:h()}],pl:[{pl:h()}],m:[{m:A()}],mx:[{mx:A()}],my:[{my:A()}],ms:[{ms:A()}],me:[{me:A()}],mt:[{mt:A()}],mr:[{mr:A()}],mb:[{mb:A()}],ml:[{ml:A()}],"space-x":[{"space-x":h()}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":h()}],"space-y-reverse":["space-y-reverse"],size:[{size:W()}],w:[{w:[i,"screen",...W()]}],"min-w":[{"min-w":[i,"screen","none",...W()]}],"max-w":[{"max-w":[i,"screen","none","prose",{screen:[s]},...W()]}],h:[{h:["screen","lh",...W()]}],"min-h":[{"min-h":["screen","lh","none",...W()]}],"max-h":[{"max-h":["screen","lh",...W()]}],"font-size":[{text:["base",o,J,D]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:[n,d,pe]}],"font-stretch":[{"font-stretch":["ultra-condensed","extra-condensed","condensed","semi-condensed","normal","semi-expanded","expanded","extra-expanded","ultra-expanded",fe,c]}],"font-family":[{font:[It,c,t]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:[r,d,c]}],"line-clamp":[{"line-clamp":[w,"none",d,pe]}],leading:[{leading:[a,...h()]}],"list-image":[{"list-image":["none",d,c]}],"list-style-position":[{list:["inside","outside"]}],"list-style-type":[{list:["disc","decimal","none",d,c]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"placeholder-color":[{placeholder:g()}],"text-color":[{text:g()}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...le(),"wavy"]}],"text-decoration-thickness":[{decoration:[w,"from-font","auto",d,D]}],"text-decoration-color":[{decoration:g()}],"underline-offset":[{"underline-offset":[w,"auto",d,c]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:h()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",d,c]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],wrap:[{wrap:["break-word","anywhere","normal"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",d,c]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:Ue()}],"bg-repeat":[{bg:Ze()}],"bg-size":[{bg:He()}],"bg-image":[{bg:["none",{linear:[{to:["t","tr","r","br","b","bl","l","tl"]},X,d,c],radial:["",d,c],conic:[X,d,c]},Lt,Ot]}],"bg-color":[{bg:g()}],"gradient-from-pos":[{from:we()}],"gradient-via-pos":[{via:we()}],"gradient-to-pos":[{to:we()}],"gradient-from":[{from:g()}],"gradient-via":[{via:g()}],"gradient-to":[{to:g()}],rounded:[{rounded:z()}],"rounded-s":[{"rounded-s":z()}],"rounded-e":[{"rounded-e":z()}],"rounded-t":[{"rounded-t":z()}],"rounded-r":[{"rounded-r":z()}],"rounded-b":[{"rounded-b":z()}],"rounded-l":[{"rounded-l":z()}],"rounded-ss":[{"rounded-ss":z()}],"rounded-se":[{"rounded-se":z()}],"rounded-ee":[{"rounded-ee":z()}],"rounded-es":[{"rounded-es":z()}],"rounded-tl":[{"rounded-tl":z()}],"rounded-tr":[{"rounded-tr":z()}],"rounded-br":[{"rounded-br":z()}],"rounded-bl":[{"rounded-bl":z()}],"border-w":[{border:O()}],"border-w-x":[{"border-x":O()}],"border-w-y":[{"border-y":O()}],"border-w-s":[{"border-s":O()}],"border-w-e":[{"border-e":O()}],"border-w-t":[{"border-t":O()}],"border-w-r":[{"border-r":O()}],"border-w-b":[{"border-b":O()}],"border-w-l":[{"border-l":O()}],"divide-x":[{"divide-x":O()}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":O()}],"divide-y-reverse":["divide-y-reverse"],"border-style":[{border:[...le(),"hidden","none"]}],"divide-style":[{divide:[...le(),"hidden","none"]}],"border-color":[{border:g()}],"border-color-x":[{"border-x":g()}],"border-color-y":[{"border-y":g()}],"border-color-s":[{"border-s":g()}],"border-color-e":[{"border-e":g()}],"border-color-t":[{"border-t":g()}],"border-color-r":[{"border-r":g()}],"border-color-b":[{"border-b":g()}],"border-color-l":[{"border-l":g()}],"divide-color":[{divide:g()}],"outline-style":[{outline:[...le(),"none","hidden"]}],"outline-offset":[{"outline-offset":[w,d,c]}],"outline-w":[{outline:["",w,J,D]}],"outline-color":[{outline:g()}],shadow:[{shadow:["","none",b,K,q]}],"shadow-color":[{shadow:g()}],"inset-shadow":[{"inset-shadow":["none",f,K,q]}],"inset-shadow-color":[{"inset-shadow":g()}],"ring-w":[{ring:O()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:g()}],"ring-offset-w":[{"ring-offset":[w,D]}],"ring-offset-color":[{"ring-offset":g()}],"inset-ring-w":[{"inset-ring":O()}],"inset-ring-color":[{"inset-ring":g()}],"text-shadow":[{"text-shadow":["none",y,K,q]}],"text-shadow-color":[{"text-shadow":g()}],opacity:[{opacity:[w,d,c]}],"mix-blend":[{"mix-blend":[...Je(),"plus-darker","plus-lighter"]}],"bg-blend":[{"bg-blend":Je()}],"mask-clip":[{"mask-clip":["border","padding","content","fill","stroke","view"]},"mask-no-clip"],"mask-composite":[{mask:["add","subtract","intersect","exclude"]}],"mask-image-linear-pos":[{"mask-linear":[w]}],"mask-image-linear-from-pos":[{"mask-linear-from":T()}],"mask-image-linear-to-pos":[{"mask-linear-to":T()}],"mask-image-linear-from-color":[{"mask-linear-from":g()}],"mask-image-linear-to-color":[{"mask-linear-to":g()}],"mask-image-t-from-pos":[{"mask-t-from":T()}],"mask-image-t-to-pos":[{"mask-t-to":T()}],"mask-image-t-from-color":[{"mask-t-from":g()}],"mask-image-t-to-color":[{"mask-t-to":g()}],"mask-image-r-from-pos":[{"mask-r-from":T()}],"mask-image-r-to-pos":[{"mask-r-to":T()}],"mask-image-r-from-color":[{"mask-r-from":g()}],"mask-image-r-to-color":[{"mask-r-to":g()}],"mask-image-b-from-pos":[{"mask-b-from":T()}],"mask-image-b-to-pos":[{"mask-b-to":T()}],"mask-image-b-from-color":[{"mask-b-from":g()}],"mask-image-b-to-color":[{"mask-b-to":g()}],"mask-image-l-from-pos":[{"mask-l-from":T()}],"mask-image-l-to-pos":[{"mask-l-to":T()}],"mask-image-l-from-color":[{"mask-l-from":g()}],"mask-image-l-to-color":[{"mask-l-to":g()}],"mask-image-x-from-pos":[{"mask-x-from":T()}],"mask-image-x-to-pos":[{"mask-x-to":T()}],"mask-image-x-from-color":[{"mask-x-from":g()}],"mask-image-x-to-color":[{"mask-x-to":g()}],"mask-image-y-from-pos":[{"mask-y-from":T()}],"mask-image-y-to-pos":[{"mask-y-to":T()}],"mask-image-y-from-color":[{"mask-y-from":g()}],"mask-image-y-to-color":[{"mask-y-to":g()}],"mask-image-radial":[{"mask-radial":[d,c]}],"mask-image-radial-from-pos":[{"mask-radial-from":T()}],"mask-image-radial-to-pos":[{"mask-radial-to":T()}],"mask-image-radial-from-color":[{"mask-radial-from":g()}],"mask-image-radial-to-color":[{"mask-radial-to":g()}],"mask-image-radial-shape":[{"mask-radial":["circle","ellipse"]}],"mask-image-radial-size":[{"mask-radial":[{closest:["side","corner"],farthest:["side","corner"]}]}],"mask-image-radial-pos":[{"mask-radial-at":L()}],"mask-image-conic-pos":[{"mask-conic":[w]}],"mask-image-conic-from-pos":[{"mask-conic-from":T()}],"mask-image-conic-to-pos":[{"mask-conic-to":T()}],"mask-image-conic-from-color":[{"mask-conic-from":g()}],"mask-image-conic-to-color":[{"mask-conic-to":g()}],"mask-mode":[{mask:["alpha","luminance","match"]}],"mask-origin":[{"mask-origin":["border","padding","content","fill","stroke","view"]}],"mask-position":[{mask:Ue()}],"mask-repeat":[{mask:Ze()}],"mask-size":[{mask:He()}],"mask-type":[{"mask-type":["alpha","luminance"]}],"mask-image":[{mask:["none",d,c]}],filter:[{filter:["","none",d,c]}],blur:[{blur:qe()}],brightness:[{brightness:[w,d,c]}],contrast:[{contrast:[w,d,c]}],"drop-shadow":[{"drop-shadow":["","none",S,K,q]}],"drop-shadow-color":[{"drop-shadow":g()}],grayscale:[{grayscale:["",w,d,c]}],"hue-rotate":[{"hue-rotate":[w,d,c]}],invert:[{invert:["",w,d,c]}],saturate:[{saturate:[w,d,c]}],sepia:[{sepia:["",w,d,c]}],"backdrop-filter":[{"backdrop-filter":["","none",d,c]}],"backdrop-blur":[{"backdrop-blur":qe()}],"backdrop-brightness":[{"backdrop-brightness":[w,d,c]}],"backdrop-contrast":[{"backdrop-contrast":[w,d,c]}],"backdrop-grayscale":[{"backdrop-grayscale":["",w,d,c]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[w,d,c]}],"backdrop-invert":[{"backdrop-invert":["",w,d,c]}],"backdrop-opacity":[{"backdrop-opacity":[w,d,c]}],"backdrop-saturate":[{"backdrop-saturate":[w,d,c]}],"backdrop-sepia":[{"backdrop-sepia":["",w,d,c]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":h()}],"border-spacing-x":[{"border-spacing-x":h()}],"border-spacing-y":[{"border-spacing-y":h()}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["","all","colors","opacity","shadow","transform","none",d,c]}],"transition-behavior":[{transition:["normal","discrete"]}],duration:[{duration:[w,"initial",d,c]}],ease:[{ease:["linear","initial",R,d,c]}],delay:[{delay:[w,d,c]}],animate:[{animate:["none",G,d,c]}],backface:[{backface:["hidden","visible"]}],perspective:[{perspective:[k,d,c]}],"perspective-origin":[{"perspective-origin":I()}],rotate:[{rotate:ce()}],"rotate-x":[{"rotate-x":ce()}],"rotate-y":[{"rotate-y":ce()}],"rotate-z":[{"rotate-z":ce()}],scale:[{scale:de()}],"scale-x":[{"scale-x":de()}],"scale-y":[{"scale-y":de()}],"scale-z":[{"scale-z":de()}],"scale-3d":["scale-3d"],skew:[{skew:ve()}],"skew-x":[{"skew-x":ve()}],"skew-y":[{"skew-y":ve()}],transform:[{transform:[d,c,"","none","gpu","cpu"]}],"transform-origin":[{origin:I()}],"transform-style":[{transform:["3d","flat"]}],translate:[{translate:ue()}],"translate-x":[{"translate-x":ue()}],"translate-y":[{"translate-y":ue()}],"translate-z":[{"translate-z":ue()}],"translate-none":["translate-none"],accent:[{accent:g()}],appearance:[{appearance:["none","auto"]}],"caret-color":[{caret:g()}],"color-scheme":[{scheme:["normal","dark","light","light-dark","only-dark","only-light"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",d,c]}],"field-sizing":[{"field-sizing":["fixed","content"]}],"pointer-events":[{"pointer-events":["auto","none"]}],resize:[{resize:["none","","y","x"]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":h()}],"scroll-mx":[{"scroll-mx":h()}],"scroll-my":[{"scroll-my":h()}],"scroll-ms":[{"scroll-ms":h()}],"scroll-me":[{"scroll-me":h()}],"scroll-mt":[{"scroll-mt":h()}],"scroll-mr":[{"scroll-mr":h()}],"scroll-mb":[{"scroll-mb":h()}],"scroll-ml":[{"scroll-ml":h()}],"scroll-p":[{"scroll-p":h()}],"scroll-px":[{"scroll-px":h()}],"scroll-py":[{"scroll-py":h()}],"scroll-ps":[{"scroll-ps":h()}],"scroll-pe":[{"scroll-pe":h()}],"scroll-pt":[{"scroll-pt":h()}],"scroll-pr":[{"scroll-pr":h()}],"scroll-pb":[{"scroll-pb":h()}],"scroll-pl":[{"scroll-pl":h()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",d,c]}],fill:[{fill:["none",...g()]}],"stroke-w":[{stroke:[w,J,D,pe]}],stroke:[{stroke:["none",...g()]}],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-x","border-w-y","border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-x","border-color-y","border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],translate:["translate-x","translate-y","translate-none"],"translate-none":["translate","translate-x","translate-y","translate-z"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]},orderSensitiveModifiers:["*","**","after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]}}),Ne=m.defineComponent({__name:"MagicCanvas",props:{canvasRef:{type:Function},cleanup:{type:Function}},setup(e){const t=e,o=m.ref();return m.onMounted(()=>{if(!o.value)throw new Error("Canvas not found in DOM. Check ref link.");t.canvasRef(o.value)}),m.onBeforeUnmount(()=>{if(!o.value)throw new Error("Canvas not found in DOM. Check ref link.");t.cleanup(o.value)}),(n,r)=>(m.openBlock(),m.createElementBlock("canvas",m.mergeProps({...n.$attrs,class:m.unref(Ft)(n.$attrs.class,["w-full","h-full"])},{ref_key:"canvas",ref:o})," Sorry, your browser does not support canvas. ",16))}});function Ye(e){return m.getCurrentScope()?(m.onScopeDispose(e),!0):!1}const Gt=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Xt=Object.prototype.toString,Dt=e=>Xt.call(e)==="[object Object]",Vt=()=>{};function jt(...e){if(e.length!==1)return m.toRef(...e);const t=e[0];return typeof t=="function"?m.readonly(m.customRef(()=>({get:t,set:Vt}))):m.ref(t)}function Wt(e,t){function o(...n){return new Promise((r,a)=>{Promise.resolve(e(()=>t.apply(this,n),{fn:t,thisArg:this,args:n})).then(r).catch(a)})}return o}const Fe=e=>e();function Bt(e=Fe,t={}){const{initialState:o="active"}=t,n=jt(o==="active");function r(){n.value=!1}function a(){n.value=!0}const s=(...i)=>{n.value&&e(...i)};return{isActive:m.readonly(n),pause:r,resume:a,eventFilter:s}}function Q(e){return Array.isArray(e)?e:[e]}function $t(e){return m.getCurrentInstance()}function Ut(e,t,o={}){const{eventFilter:n=Fe,...r}=o;return m.watch(e,Wt(n,t),r)}function Zt(e,t,o={}){const{eventFilter:n,initialState:r="active",...a}=o,{eventFilter:s,pause:i,resume:l,isActive:u}=Bt(n,{initialState:r});return{stop:Ut(e,t,{...a,eventFilter:s}),pause:i,resume:l,isActive:u}}function Ge(e,t=!0,o){$t()?m.onMounted(e,o):t?e():m.nextTick(e)}function Ht(e,t,o){return m.watch(e,t,{...o,immediate:!0})}const Z=Gt?window:void 0;function V(e){var t;const o=m.toValue(e);return(t=o?.$el)!=null?t:o}function Xe(...e){const t=[],o=()=>{t.forEach(i=>i()),t.length=0},n=(i,l,u,b)=>(i.addEventListener(l,u,b),()=>i.removeEventListener(l,u,b)),r=m.computed(()=>{const i=Q(m.toValue(e[0])).filter(l=>l!=null);return i.every(l=>typeof l!="string")?i:void 0}),a=Ht(()=>{var i,l;return[(l=(i=r.value)==null?void 0:i.map(u=>V(u)))!=null?l:[Z].filter(u=>u!=null),Q(m.toValue(r.value?e[1]:e[0])),Q(m.unref(r.value?e[2]:e[1])),m.toValue(r.value?e[3]:e[2])]},([i,l,u,b])=>{if(o(),!i?.length||!l?.length||!u?.length)return;const f=Dt(b)?{...b}:b;t.push(...i.flatMap(y=>l.flatMap(S=>u.map(p=>n(y,S,p,f)))))},{flush:"post"}),s=()=>{a(),o()};return Ye(o),s}function Jt(){const e=m.shallowRef(!1),t=m.getCurrentInstance();return t&&m.onMounted(()=>{e.value=!0},t),e}function qt(e){const t=Jt();return m.computed(()=>(t.value,!!e()))}const ee=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},te="__vueuse_ssr_handlers__",Kt=Qt();function Qt(){return te in ee||(ee[te]=ee[te]||{}),ee[te]}function eo(e,t){return Kt[e]||t}function to(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const oo={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},De="vueuse-storage";function no(e,t,o,n={}){var r;const{flush:a="pre",deep:s=!0,listenToStorageChanges:i=!0,writeDefaults:l=!0,mergeDefaults:u=!1,shallow:b,window:f=Z,eventFilter:y,onError:S=v=>{console.error(v)},initOnMounted:p}=n,k=(b?m.shallowRef:m.ref)(typeof t=="function"?t():t),x=m.computed(()=>m.toValue(e));if(!o)try{o=eo("getDefaultStorage",()=>{var v;return(v=Z)==null?void 0:v.localStorage})()}catch(v){S(v)}if(!o)return k;const R=m.toValue(t),G=to(R),P=(r=n.serializer)!=null?r:oo[G],{pause:L,resume:I}=Zt(k,v=>se(v),{flush:a,deep:s,eventFilter:y});m.watch(x,()=>Y(),{flush:a});let N=!1;const j=v=>{p&&!N||Y(v)},h=v=>{p&&!N||ie(v)};f&&i&&(o instanceof Storage?Xe(f,"storage",j,{passive:!0}):Xe(f,De,h)),p?Ge(()=>{N=!0,Y()}):Y();function _(v,C){if(f){const A={key:x.value,oldValue:v,newValue:C,storageArea:o};f.dispatchEvent(o instanceof Storage?new StorageEvent("storage",A):new CustomEvent(De,{detail:A}))}}function se(v){try{const C=o.getItem(x.value);if(v==null)_(C,null),o.removeItem(x.value);else{const A=P.write(v);C!==A&&(o.setItem(x.value,A),_(C,A))}}catch(C){S(C)}}function ae(v){const C=v?v.newValue:o.getItem(x.value);if(C==null)return l&&R!=null&&o.setItem(x.value,P.write(R)),R;if(!v&&u){const A=P.read(C);return typeof u=="function"?u(A,R):G==="object"&&!Array.isArray(A)?{...R,...A}:A}else return typeof C!="string"?C:P.read(C)}function Y(v){if(!(v&&v.storageArea!==o)){if(v&&v.key==null){k.value=R;return}if(!(v&&v.key!==x.value)){L();try{const C=P.write(k.value);(v===void 0||v?.newValue!==C)&&(k.value=ae(v))}catch(C){S(C)}finally{v?m.nextTick(I):I()}}}}function ie(v){Y(v.detail)}return k}function ro(e,t,o={}){const{window:n=Z,...r}=o;let a;const s=qt(()=>n&&"ResizeObserver"in n),i=()=>{a&&(a.disconnect(),a=void 0)},l=m.computed(()=>{const f=m.toValue(e);return Array.isArray(f)?f.map(y=>V(y)):[V(f)]}),u=m.watch(l,f=>{if(i(),s.value&&n){a=new ResizeObserver(t);for(const y of f)y&&a.observe(y,r)}},{immediate:!0,flush:"post"}),b=()=>{i(),u()};return Ye(b),{isSupported:s,stop:b}}function so(e,t={width:0,height:0},o={}){const{window:n=Z,box:r="content-box"}=o,a=m.computed(()=>{var f,y;return(y=(f=V(e))==null?void 0:f.namespaceURI)==null?void 0:y.includes("svg")}),s=m.shallowRef(t.width),i=m.shallowRef(t.height),{stop:l}=ro(e,([f])=>{const y=r==="border-box"?f.borderBoxSize:r==="content-box"?f.contentBoxSize:f.devicePixelContentBoxSize;if(n&&a.value){const S=V(e);if(S){const p=S.getBoundingClientRect();s.value=p.width,i.value=p.height}}else if(y){const S=Q(y);s.value=S.reduce((p,{inlineSize:k})=>p+k,0),i.value=S.reduce((p,{blockSize:k})=>p+k,0)}else s.value=f.contentRect.width,i.value=f.contentRect.height},o);Ge(()=>{const f=V(e);f&&(s.value="offsetWidth"in f?f.offsetWidth:t.width,i.value="offsetHeight"in f?f.offsetHeight:t.height)});const u=m.watch(()=>V(e),f=>{s.value=f?t.width:0,i.value=f?t.height:0});function b(){l(),u()}return{width:s,height:i,stop:b}}function ge(e,t,o={}){const{window:n=Z}=o;return no(e,t,n?.localStorage,o)}const oe=()=>window.devicePixelRatio??1,ao=(e,t)=>{const o=t.translateX??0,n=t.translateY??0;(o!==0||n!==0)&&e.translate(o,n);const r=t.scaleX??1,a=t.scaleY??1;(r!==1||a!==1)&&e.scale(r,a);const s=t.skewX??0,i=t.skewY??0;(s!==0||i!==0)&&e.transform(1,i,s,1,0,0)},Ve=e=>{if(!e)throw new Error("canvas not found");const t="value"in e?e.value:e;if(!t)throw new Error("canvas not found");const o=t.getContext("2d");if(!o)throw new Error("2d context not found");return o},io={middle:1},he=e=>{const{a:t,e:o,f:n}=e.getTransform(),r=oe(),a=t/r,s=o/r,i=n/r;return{panX:s,panY:i,zoom:a}},ne=(e,t)=>{const o=t.canvas.getBoundingClientRect(),n=e.clientX-o.left,r=e.clientY-o.top,{panX:a,panY:s,zoom:i}=he(t),l=(n-a)/i,u=(r-s)/i;return{x:l,y:u,zoom:i}},lo=(e,t)=>{const{panX:o,panY:n,zoom:r}=he(t),{x:a,y:s}=e;return{clientX:a*r+o,clientY:s*r+n,zoom:r}},je=e=>{const t=m.ref({x:0,y:0}),o=n=>t.value=ne(n,Ve(e));return m.onMounted(()=>{if(!e.value)throw new Error("Canvas not found in DOM. Check ref link.");e.value.addEventListener("mousemove",o),e.value.addEventListener("wheel",o)}),{coordinates:t,cleanup:n=>{n.removeEventListener("mousemove",o),n.removeEventListener("wheel",o)}}},H=100,We=.6,re=.25,co=e=>{if(e<=re)return"00";if(e>=We)return"";const t=String(Math.floor((e-re)/(We-re)*100));return t.length===1?`0${t}`:t},uo=({panX:e,panY:t,zoom:o},n)=>({draw:a=>{if(o.value<=re)return;const s=ne({clientX:0,clientY:0},a),i=ne({clientX:window.innerWidth+H,clientY:window.innerHeight+H},a),l=e.value/o.value%H,u=t.value/o.value%H;for(let b=s.x+l;b<i.x;b+=H)for(let f=s.y+u;f<i.y;f+=H)n.value(a,{x:b,y:f},co(o.value))}}),be={cameraPanX:e=>`camera-pan-x-${e}`,cameraPanY:e=>`camera-pan-y-${e}`,cameraZoom:e=>`camera-zoom-${e}`},mo=.2,fo=10,po=.02,Be=1,go=(e,t)=>{const o=ge(be.cameraPanX(t),0),n=ge(be.cameraPanY(t),0),r=ge(be.cameraZoom(t),1),a=p=>{const k=e.value.getBoundingClientRect(),x=p.clientX-k.left,R=p.clientY-k.top,G=Math.max(-100,Math.min(100,p.deltaY)),P=Math.exp(-G*po),L=Math.min(fo,Math.max(mo,r.value*P)),I=L/r.value;o.value=x-(x-o.value)*I,n.value=R-(R-n.value)*I,r.value=L},s=p=>{o.value-=p.deltaX*Be,n.value-=p.deltaY*Be},i=p=>{p.preventDefault(),(!p.ctrlKey?s:a)(p)};let l=0,u=0,b=!1;const f=p=>{b=p.button===io.middle,b&&(l=p.clientX,u=p.clientY)},y=p=>{b&&(s({deltaX:l-p.clientX,deltaY:u-p.clientY}),l=p.clientX,u=p.clientY)},S=()=>{l=0,u=0,b=!1};return m.onMounted(()=>{if(!e.value)throw new Error("canvas not found in DOM");e.value.addEventListener("wheel",i,{passive:!1}),e.value.addEventListener("mousedown",f),e.value.addEventListener("mousemove",y),document.addEventListener("mouseup",S)}),{actions:{zoomIn:(p=12.5)=>a({deltaY:-p,clientX:window.innerWidth/2,clientY:window.innerHeight/2}),zoomOut:(p=12.5)=>a({deltaY:p,clientX:window.innerWidth/2,clientY:window.innerHeight/2})},state:{panX:o,panY:n,zoom:r},getTransform:()=>({scaleX:r.value,scaleY:r.value,translateX:o.value,translateY:n.value}),cleanup:p=>{p.removeEventListener("wheel",i),p.removeEventListener("mousedown",f),p.removeEventListener("mousemove",y),document.removeEventListener("mouseup",S)}}},ho=(e,t)=>{const{getTransform:o,...n}=go(e,t),r=oe(),a={scaleX:r,scaleY:r};return{...n,transformAndClear:s=>{s.resetTransform(),s.clearRect(0,0,s.canvas.width,s.canvas.height);const i=[a,o()];for(const l of i)ao(s,l)}}},bo=60,$e=e=>{if(!e)throw new Error("Canvas not found in DOM. Check ref link.");const t=oe(),o=e.getBoundingClientRect();e.width=o.width*t,e.height=o.height*t},wo=(e={})=>{const t=m.ref(),o=so(t),n=m.ref(()=>{}),r=m.ref(()=>{});let a;m.onMounted(()=>{$e(t.value),a=setInterval(f,1e3/bo)}),m.watch([o.width,o.height],()=>$e(t.value));const{cleanup:s,...i}=ho(t,e?.storageKey??"[default-storage-key]"),{coordinates:l,cleanup:u}=je(t),b=uo(i.state,r),f=()=>{const y=Ve(t);i.transformAndClear(y),b.draw(y),n.value(y)};return{canvas:t,camera:i,cursorCoordinates:l,ref:{canvasRef:y=>t.value=y,cleanup:y=>{u(y),s(y),clearInterval(a)}},draw:{content:n,backgroundPattern:r}}},vo={install(e){e.component("MagicCanvas",Ne)}};E.MagicCanvas=Ne,E.MagicCanvasPlugin=vo,E.getCanvasTransform=he,E.getClientCoordinates=lo,E.getDevicePixelRatio=oe,E.getMagicCoordinates=ne,E.useMagicCanvas=wo,E.useMagicCoordinates=je,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));
+(function(E,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],m):(E=typeof globalThis<"u"?globalThis:E||self,m(E.MagicCanvas={},E.Vue))})(this,(function(E,m){"use strict";const Ke=(e,t)=>{const o=new Array(e.length+t.length);for(let n=0;n<e.length;n++)o[n]=e[n];for(let n=0;n<t.length;n++)o[e.length+n]=t[n];return o},Qe=(e,t)=>({classGroupId:e,validator:t}),ye=(e=new Map,t=null,o)=>({nextPart:e,validators:t,classGroupId:o}),ke=[],et="arbitrary..",tt=e=>{const t=nt(e),{conflictingClassGroups:o,conflictingClassGroupModifiers:n}=e;return{getClassGroupId:s=>{if(s.startsWith("[")&&s.endsWith("]"))return ot(s);const i=s.split("-"),l=i[0]===""&&i.length>1?1:0;return xe(i,l,t)},getConflictingClassGroupIds:(s,i)=>{if(i){const l=n[s],u=o[s];return l?u?Ke(u,l):l:u||ke}return o[s]||ke}}},xe=(e,t,o)=>{if(e.length-t===0)return o.classGroupId;const r=e[t],a=o.nextPart.get(r);if(a){const u=xe(e,t+1,a);if(u)return u}const s=o.validators;if(s===null)return;const i=t===0?e.join("-"):e.slice(t).join("-"),l=s.length;for(let u=0;u<l;u++){const b=s[u];if(b.validator(i))return b.classGroupId}},ot=e=>e.slice(1,-1).indexOf(":")===-1?void 0:(()=>{const t=e.slice(1,-1),o=t.indexOf(":"),n=t.slice(0,o);return n?et+n:void 0})(),nt=e=>{const{theme:t,classGroups:o}=e;return rt(o,t)},rt=(e,t)=>{const o=ye();for(const n in e){const r=e[n];me(r,o,n,t)}return o},me=(e,t,o,n)=>{const r=e.length;for(let a=0;a<r;a++){const s=e[a];st(s,t,o,n)}},st=(e,t,o,n)=>{if(typeof e=="string"){at(e,t,o);return}if(typeof e=="function"){it(e,t,o,n);return}lt(e,t,o,n)},at=(e,t,o)=>{const n=e===""?t:Ce(t,e);n.classGroupId=o},it=(e,t,o,n)=>{if(ct(e)){me(e(n),t,o,n);return}t.validators===null&&(t.validators=[]),t.validators.push(Qe(o,e))},lt=(e,t,o,n)=>{const r=Object.entries(e),a=r.length;for(let s=0;s<a;s++){const[i,l]=r[s];me(l,Ce(t,i),o,n)}},Ce=(e,t)=>{let o=e;const n=t.split("-"),r=n.length;for(let a=0;a<r;a++){const s=n[a];let i=o.nextPart.get(s);i||(i=ye(),o.nextPart.set(s,i)),o=i}return o},ct=e=>"isThemeGetter"in e&&e.isThemeGetter===!0,dt=e=>{if(e<1)return{get:()=>{},set:()=>{}};let t=0,o=Object.create(null),n=Object.create(null);const r=(a,s)=>{o[a]=s,t++,t>e&&(t=0,n=o,o=Object.create(null))};return{get(a){let s=o[a];if(s!==void 0)return s;if((s=n[a])!==void 0)return r(a,s),s},set(a,s){a in o?o[a]=s:r(a,s)}}},ut=[],Se=(e,t,o,n,r)=>({modifiers:e,hasImportantModifier:t,baseClassName:o,maybePostfixModifierPosition:n,isExternal:r}),mt=e=>{const{prefix:t,experimentalParseClassName:o}=e;let n=r=>{const a=[];let s=0,i=0,l=0,u;const b=r.length;for(let k=0;k<b;k++){const x=r[k];if(s===0&&i===0){if(x===":"){a.push(r.slice(l,k)),l=k+1;continue}if(x==="/"){u=k;continue}}x==="["?s++:x==="]"?s--:x==="("?i++:x===")"&&i--}const f=a.length===0?r:r.slice(l);let y=f,S=!1;f.endsWith("!")?(y=f.slice(0,-1),S=!0):f.startsWith("!")&&(y=f.slice(1),S=!0);const p=u&&u>l?u-l:void 0;return Se(a,S,y,p)};if(t){const r=t+":",a=n;n=s=>s.startsWith(r)?a(s.slice(r.length)):Se(ut,!1,s,void 0,!0)}if(o){const r=n;n=a=>o({className:a,parseClassName:r})}return n},ft=e=>{const t=new Map;return e.orderSensitiveModifiers.forEach((o,n)=>{t.set(o,1e6+n)}),o=>{const n=[];let r=[];for(let a=0;a<o.length;a++){const s=o[a],i=s[0]==="[",l=t.has(s);i||l?(r.length>0&&(r.sort(),n.push(...r),r=[]),n.push(s)):r.push(s)}return r.length>0&&(r.sort(),n.push(...r)),n}},pt=e=>({cache:dt(e.cacheSize),parseClassName:mt(e),sortModifiers:ft(e),...tt(e)}),gt=/\s+/,ht=(e,t)=>{const{parseClassName:o,getClassGroupId:n,getConflictingClassGroupIds:r,sortModifiers:a}=t,s=[],i=e.trim().split(gt);let l="";for(let u=i.length-1;u>=0;u-=1){const b=i[u],{isExternal:f,modifiers:y,hasImportantModifier:S,baseClassName:p,maybePostfixModifierPosition:k}=o(b);if(f){l=b+(l.length>0?" "+l:l);continue}let x=!!k,R=n(x?p.substring(0,k):p);if(!R){if(!x){l=b+(l.length>0?" "+l:l);continue}if(R=n(p),!R){l=b+(l.length>0?" "+l:l);continue}x=!1}const G=y.length===0?"":y.length===1?y[0]:a(y).join(":"),P=S?G+"!":G,L=P+R;if(s.indexOf(L)>-1)continue;s.push(L);const I=r(R,x);for(let N=0;N<I.length;++N){const j=I[N];s.push(P+j)}l=b+(l.length>0?" "+l:l)}return l},bt=(...e)=>{let t=0,o,n,r="";for(;t<e.length;)(o=e[t++])&&(n=Ae(o))&&(r&&(r+=" "),r+=n);return r},Ae=e=>{if(typeof e=="string")return e;let t,o="";for(let n=0;n<e.length;n++)e[n]&&(t=Ae(e[n]))&&(o&&(o+=" "),o+=t);return o},wt=(e,...t)=>{let o,n,r,a;const s=l=>{const u=t.reduce((b,f)=>f(b),e());return o=pt(u),n=o.cache.get,r=o.cache.set,a=i,i(l)},i=l=>{const u=n(l);if(u)return u;const b=ht(l,o);return r(l,b),b};return a=s,(...l)=>a(bt(...l))},vt=[],M=e=>{const t=o=>o[e]||vt;return t.isThemeGetter=!0,t},Me=/^\[(?:(\w[\w-]*):)?(.+)\]$/i,Re=/^\((?:(\w[\w-]*):)?(.+)\)$/i,yt=/^\d+\/\d+$/,kt=/^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/,xt=/\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/,Ct=/^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/,St=/^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/,At=/^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/,B=e=>yt.test(e),w=e=>!!e&&!Number.isNaN(Number(e)),X=e=>!!e&&Number.isInteger(Number(e)),fe=e=>e.endsWith("%")&&w(e.slice(0,-1)),F=e=>kt.test(e),Mt=()=>!0,Rt=e=>xt.test(e)&&!Ct.test(e),Te=()=>!1,Tt=e=>St.test(e),zt=e=>At.test(e),Et=e=>!c(e)&&!d(e),Pt=e=>$(e,Ie,Te),c=e=>Me.test(e),D=e=>$(e,_e,Rt),pe=e=>$(e,Nt,w),ze=e=>$(e,Pe,Te),Ot=e=>$(e,Oe,zt),q=e=>$(e,Le,Tt),d=e=>Re.test(e),J=e=>U(e,_e),It=e=>U(e,Yt),Ee=e=>U(e,Pe),_t=e=>U(e,Ie),Lt=e=>U(e,Oe),K=e=>U(e,Le,!0),$=(e,t,o)=>{const n=Me.exec(e);return n?n[1]?t(n[1]):o(n[2]):!1},U=(e,t,o=!1)=>{const n=Re.exec(e);return n?n[1]?t(n[1]):o:!1},Pe=e=>e==="position"||e==="percentage",Oe=e=>e==="image"||e==="url",Ie=e=>e==="length"||e==="size"||e==="bg-size",_e=e=>e==="length",Nt=e=>e==="number",Yt=e=>e==="family-name",Le=e=>e==="shadow",Ft=wt(()=>{const e=M("color"),t=M("font"),o=M("text"),n=M("font-weight"),r=M("tracking"),a=M("leading"),s=M("breakpoint"),i=M("container"),l=M("spacing"),u=M("radius"),b=M("shadow"),f=M("inset-shadow"),y=M("text-shadow"),S=M("drop-shadow"),p=M("blur"),k=M("perspective"),x=M("aspect"),R=M("ease"),G=M("animate"),P=()=>["auto","avoid","all","avoid-page","page","left","right","column"],L=()=>["center","top","bottom","left","right","top-left","left-top","top-right","right-top","bottom-right","right-bottom","bottom-left","left-bottom"],I=()=>[...L(),d,c],N=()=>["auto","hidden","clip","visible","scroll"],j=()=>["auto","contain","none"],h=()=>[d,c,l],_=()=>[B,"full","auto",...h()],se=()=>[X,"none","subgrid",d,c],ae=()=>["auto",{span:["full",X,d,c]},X,d,c],Y=()=>[X,"auto",d,c],ie=()=>["auto","min","max","fr",d,c],v=()=>["start","end","center","between","around","evenly","stretch","baseline","center-safe","end-safe"],C=()=>["start","end","center","stretch","center-safe","end-safe"],A=()=>["auto",...h()],W=()=>[B,"auto","full","dvw","dvh","lvw","lvh","svw","svh","min","max","fit",...h()],g=()=>[e,d,c],Ue=()=>[...L(),Ee,ze,{position:[d,c]}],Ze=()=>["no-repeat",{repeat:["","x","y","space","round"]}],He=()=>["auto","cover","contain",_t,Pt,{size:[d,c]}],we=()=>[fe,J,D],z=()=>["","none","full",u,d,c],O=()=>["",w,J,D],le=()=>["solid","dashed","dotted","double"],Je=()=>["normal","multiply","screen","overlay","darken","lighten","color-dodge","color-burn","hard-light","soft-light","difference","exclusion","hue","saturation","color","luminosity"],T=()=>[w,fe,Ee,ze],qe=()=>["","none",p,d,c],ce=()=>["none",w,d,c],de=()=>["none",w,d,c],ve=()=>[w,d,c],ue=()=>[B,"full",...h()];return{cacheSize:500,theme:{animate:["spin","ping","pulse","bounce"],aspect:["video"],blur:[F],breakpoint:[F],color:[Mt],container:[F],"drop-shadow":[F],ease:["in","out","in-out"],font:[Et],"font-weight":["thin","extralight","light","normal","medium","semibold","bold","extrabold","black"],"inset-shadow":[F],leading:["none","tight","snug","normal","relaxed","loose"],perspective:["dramatic","near","normal","midrange","distant","none"],radius:[F],shadow:[F],spacing:["px",w],text:[F],"text-shadow":[F],tracking:["tighter","tight","normal","wide","wider","widest"]},classGroups:{aspect:[{aspect:["auto","square",B,c,d,x]}],container:["container"],columns:[{columns:[w,c,d,i]}],"break-after":[{"break-after":P()}],"break-before":[{"break-before":P()}],"break-inside":[{"break-inside":["auto","avoid","avoid-page","avoid-column"]}],"box-decoration":[{"box-decoration":["slice","clone"]}],box:[{box:["border","content"]}],display:["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"],sr:["sr-only","not-sr-only"],float:[{float:["right","left","none","start","end"]}],clear:[{clear:["left","right","both","none","start","end"]}],isolation:["isolate","isolation-auto"],"object-fit":[{object:["contain","cover","fill","none","scale-down"]}],"object-position":[{object:I()}],overflow:[{overflow:N()}],"overflow-x":[{"overflow-x":N()}],"overflow-y":[{"overflow-y":N()}],overscroll:[{overscroll:j()}],"overscroll-x":[{"overscroll-x":j()}],"overscroll-y":[{"overscroll-y":j()}],position:["static","fixed","absolute","relative","sticky"],inset:[{inset:_()}],"inset-x":[{"inset-x":_()}],"inset-y":[{"inset-y":_()}],start:[{start:_()}],end:[{end:_()}],top:[{top:_()}],right:[{right:_()}],bottom:[{bottom:_()}],left:[{left:_()}],visibility:["visible","invisible","collapse"],z:[{z:[X,"auto",d,c]}],basis:[{basis:[B,"full","auto",i,...h()]}],"flex-direction":[{flex:["row","row-reverse","col","col-reverse"]}],"flex-wrap":[{flex:["nowrap","wrap","wrap-reverse"]}],flex:[{flex:[w,B,"auto","initial","none",c]}],grow:[{grow:["",w,d,c]}],shrink:[{shrink:["",w,d,c]}],order:[{order:[X,"first","last","none",d,c]}],"grid-cols":[{"grid-cols":se()}],"col-start-end":[{col:ae()}],"col-start":[{"col-start":Y()}],"col-end":[{"col-end":Y()}],"grid-rows":[{"grid-rows":se()}],"row-start-end":[{row:ae()}],"row-start":[{"row-start":Y()}],"row-end":[{"row-end":Y()}],"grid-flow":[{"grid-flow":["row","col","dense","row-dense","col-dense"]}],"auto-cols":[{"auto-cols":ie()}],"auto-rows":[{"auto-rows":ie()}],gap:[{gap:h()}],"gap-x":[{"gap-x":h()}],"gap-y":[{"gap-y":h()}],"justify-content":[{justify:[...v(),"normal"]}],"justify-items":[{"justify-items":[...C(),"normal"]}],"justify-self":[{"justify-self":["auto",...C()]}],"align-content":[{content:["normal",...v()]}],"align-items":[{items:[...C(),{baseline:["","last"]}]}],"align-self":[{self:["auto",...C(),{baseline:["","last"]}]}],"place-content":[{"place-content":v()}],"place-items":[{"place-items":[...C(),"baseline"]}],"place-self":[{"place-self":["auto",...C()]}],p:[{p:h()}],px:[{px:h()}],py:[{py:h()}],ps:[{ps:h()}],pe:[{pe:h()}],pt:[{pt:h()}],pr:[{pr:h()}],pb:[{pb:h()}],pl:[{pl:h()}],m:[{m:A()}],mx:[{mx:A()}],my:[{my:A()}],ms:[{ms:A()}],me:[{me:A()}],mt:[{mt:A()}],mr:[{mr:A()}],mb:[{mb:A()}],ml:[{ml:A()}],"space-x":[{"space-x":h()}],"space-x-reverse":["space-x-reverse"],"space-y":[{"space-y":h()}],"space-y-reverse":["space-y-reverse"],size:[{size:W()}],w:[{w:[i,"screen",...W()]}],"min-w":[{"min-w":[i,"screen","none",...W()]}],"max-w":[{"max-w":[i,"screen","none","prose",{screen:[s]},...W()]}],h:[{h:["screen","lh",...W()]}],"min-h":[{"min-h":["screen","lh","none",...W()]}],"max-h":[{"max-h":["screen","lh",...W()]}],"font-size":[{text:["base",o,J,D]}],"font-smoothing":["antialiased","subpixel-antialiased"],"font-style":["italic","not-italic"],"font-weight":[{font:[n,d,pe]}],"font-stretch":[{"font-stretch":["ultra-condensed","extra-condensed","condensed","semi-condensed","normal","semi-expanded","expanded","extra-expanded","ultra-expanded",fe,c]}],"font-family":[{font:[It,c,t]}],"fvn-normal":["normal-nums"],"fvn-ordinal":["ordinal"],"fvn-slashed-zero":["slashed-zero"],"fvn-figure":["lining-nums","oldstyle-nums"],"fvn-spacing":["proportional-nums","tabular-nums"],"fvn-fraction":["diagonal-fractions","stacked-fractions"],tracking:[{tracking:[r,d,c]}],"line-clamp":[{"line-clamp":[w,"none",d,pe]}],leading:[{leading:[a,...h()]}],"list-image":[{"list-image":["none",d,c]}],"list-style-position":[{list:["inside","outside"]}],"list-style-type":[{list:["disc","decimal","none",d,c]}],"text-alignment":[{text:["left","center","right","justify","start","end"]}],"placeholder-color":[{placeholder:g()}],"text-color":[{text:g()}],"text-decoration":["underline","overline","line-through","no-underline"],"text-decoration-style":[{decoration:[...le(),"wavy"]}],"text-decoration-thickness":[{decoration:[w,"from-font","auto",d,D]}],"text-decoration-color":[{decoration:g()}],"underline-offset":[{"underline-offset":[w,"auto",d,c]}],"text-transform":["uppercase","lowercase","capitalize","normal-case"],"text-overflow":["truncate","text-ellipsis","text-clip"],"text-wrap":[{text:["wrap","nowrap","balance","pretty"]}],indent:[{indent:h()}],"vertical-align":[{align:["baseline","top","middle","bottom","text-top","text-bottom","sub","super",d,c]}],whitespace:[{whitespace:["normal","nowrap","pre","pre-line","pre-wrap","break-spaces"]}],break:[{break:["normal","words","all","keep"]}],wrap:[{wrap:["break-word","anywhere","normal"]}],hyphens:[{hyphens:["none","manual","auto"]}],content:[{content:["none",d,c]}],"bg-attachment":[{bg:["fixed","local","scroll"]}],"bg-clip":[{"bg-clip":["border","padding","content","text"]}],"bg-origin":[{"bg-origin":["border","padding","content"]}],"bg-position":[{bg:Ue()}],"bg-repeat":[{bg:Ze()}],"bg-size":[{bg:He()}],"bg-image":[{bg:["none",{linear:[{to:["t","tr","r","br","b","bl","l","tl"]},X,d,c],radial:["",d,c],conic:[X,d,c]},Lt,Ot]}],"bg-color":[{bg:g()}],"gradient-from-pos":[{from:we()}],"gradient-via-pos":[{via:we()}],"gradient-to-pos":[{to:we()}],"gradient-from":[{from:g()}],"gradient-via":[{via:g()}],"gradient-to":[{to:g()}],rounded:[{rounded:z()}],"rounded-s":[{"rounded-s":z()}],"rounded-e":[{"rounded-e":z()}],"rounded-t":[{"rounded-t":z()}],"rounded-r":[{"rounded-r":z()}],"rounded-b":[{"rounded-b":z()}],"rounded-l":[{"rounded-l":z()}],"rounded-ss":[{"rounded-ss":z()}],"rounded-se":[{"rounded-se":z()}],"rounded-ee":[{"rounded-ee":z()}],"rounded-es":[{"rounded-es":z()}],"rounded-tl":[{"rounded-tl":z()}],"rounded-tr":[{"rounded-tr":z()}],"rounded-br":[{"rounded-br":z()}],"rounded-bl":[{"rounded-bl":z()}],"border-w":[{border:O()}],"border-w-x":[{"border-x":O()}],"border-w-y":[{"border-y":O()}],"border-w-s":[{"border-s":O()}],"border-w-e":[{"border-e":O()}],"border-w-t":[{"border-t":O()}],"border-w-r":[{"border-r":O()}],"border-w-b":[{"border-b":O()}],"border-w-l":[{"border-l":O()}],"divide-x":[{"divide-x":O()}],"divide-x-reverse":["divide-x-reverse"],"divide-y":[{"divide-y":O()}],"divide-y-reverse":["divide-y-reverse"],"border-style":[{border:[...le(),"hidden","none"]}],"divide-style":[{divide:[...le(),"hidden","none"]}],"border-color":[{border:g()}],"border-color-x":[{"border-x":g()}],"border-color-y":[{"border-y":g()}],"border-color-s":[{"border-s":g()}],"border-color-e":[{"border-e":g()}],"border-color-t":[{"border-t":g()}],"border-color-r":[{"border-r":g()}],"border-color-b":[{"border-b":g()}],"border-color-l":[{"border-l":g()}],"divide-color":[{divide:g()}],"outline-style":[{outline:[...le(),"none","hidden"]}],"outline-offset":[{"outline-offset":[w,d,c]}],"outline-w":[{outline:["",w,J,D]}],"outline-color":[{outline:g()}],shadow:[{shadow:["","none",b,K,q]}],"shadow-color":[{shadow:g()}],"inset-shadow":[{"inset-shadow":["none",f,K,q]}],"inset-shadow-color":[{"inset-shadow":g()}],"ring-w":[{ring:O()}],"ring-w-inset":["ring-inset"],"ring-color":[{ring:g()}],"ring-offset-w":[{"ring-offset":[w,D]}],"ring-offset-color":[{"ring-offset":g()}],"inset-ring-w":[{"inset-ring":O()}],"inset-ring-color":[{"inset-ring":g()}],"text-shadow":[{"text-shadow":["none",y,K,q]}],"text-shadow-color":[{"text-shadow":g()}],opacity:[{opacity:[w,d,c]}],"mix-blend":[{"mix-blend":[...Je(),"plus-darker","plus-lighter"]}],"bg-blend":[{"bg-blend":Je()}],"mask-clip":[{"mask-clip":["border","padding","content","fill","stroke","view"]},"mask-no-clip"],"mask-composite":[{mask:["add","subtract","intersect","exclude"]}],"mask-image-linear-pos":[{"mask-linear":[w]}],"mask-image-linear-from-pos":[{"mask-linear-from":T()}],"mask-image-linear-to-pos":[{"mask-linear-to":T()}],"mask-image-linear-from-color":[{"mask-linear-from":g()}],"mask-image-linear-to-color":[{"mask-linear-to":g()}],"mask-image-t-from-pos":[{"mask-t-from":T()}],"mask-image-t-to-pos":[{"mask-t-to":T()}],"mask-image-t-from-color":[{"mask-t-from":g()}],"mask-image-t-to-color":[{"mask-t-to":g()}],"mask-image-r-from-pos":[{"mask-r-from":T()}],"mask-image-r-to-pos":[{"mask-r-to":T()}],"mask-image-r-from-color":[{"mask-r-from":g()}],"mask-image-r-to-color":[{"mask-r-to":g()}],"mask-image-b-from-pos":[{"mask-b-from":T()}],"mask-image-b-to-pos":[{"mask-b-to":T()}],"mask-image-b-from-color":[{"mask-b-from":g()}],"mask-image-b-to-color":[{"mask-b-to":g()}],"mask-image-l-from-pos":[{"mask-l-from":T()}],"mask-image-l-to-pos":[{"mask-l-to":T()}],"mask-image-l-from-color":[{"mask-l-from":g()}],"mask-image-l-to-color":[{"mask-l-to":g()}],"mask-image-x-from-pos":[{"mask-x-from":T()}],"mask-image-x-to-pos":[{"mask-x-to":T()}],"mask-image-x-from-color":[{"mask-x-from":g()}],"mask-image-x-to-color":[{"mask-x-to":g()}],"mask-image-y-from-pos":[{"mask-y-from":T()}],"mask-image-y-to-pos":[{"mask-y-to":T()}],"mask-image-y-from-color":[{"mask-y-from":g()}],"mask-image-y-to-color":[{"mask-y-to":g()}],"mask-image-radial":[{"mask-radial":[d,c]}],"mask-image-radial-from-pos":[{"mask-radial-from":T()}],"mask-image-radial-to-pos":[{"mask-radial-to":T()}],"mask-image-radial-from-color":[{"mask-radial-from":g()}],"mask-image-radial-to-color":[{"mask-radial-to":g()}],"mask-image-radial-shape":[{"mask-radial":["circle","ellipse"]}],"mask-image-radial-size":[{"mask-radial":[{closest:["side","corner"],farthest:["side","corner"]}]}],"mask-image-radial-pos":[{"mask-radial-at":L()}],"mask-image-conic-pos":[{"mask-conic":[w]}],"mask-image-conic-from-pos":[{"mask-conic-from":T()}],"mask-image-conic-to-pos":[{"mask-conic-to":T()}],"mask-image-conic-from-color":[{"mask-conic-from":g()}],"mask-image-conic-to-color":[{"mask-conic-to":g()}],"mask-mode":[{mask:["alpha","luminance","match"]}],"mask-origin":[{"mask-origin":["border","padding","content","fill","stroke","view"]}],"mask-position":[{mask:Ue()}],"mask-repeat":[{mask:Ze()}],"mask-size":[{mask:He()}],"mask-type":[{"mask-type":["alpha","luminance"]}],"mask-image":[{mask:["none",d,c]}],filter:[{filter:["","none",d,c]}],blur:[{blur:qe()}],brightness:[{brightness:[w,d,c]}],contrast:[{contrast:[w,d,c]}],"drop-shadow":[{"drop-shadow":["","none",S,K,q]}],"drop-shadow-color":[{"drop-shadow":g()}],grayscale:[{grayscale:["",w,d,c]}],"hue-rotate":[{"hue-rotate":[w,d,c]}],invert:[{invert:["",w,d,c]}],saturate:[{saturate:[w,d,c]}],sepia:[{sepia:["",w,d,c]}],"backdrop-filter":[{"backdrop-filter":["","none",d,c]}],"backdrop-blur":[{"backdrop-blur":qe()}],"backdrop-brightness":[{"backdrop-brightness":[w,d,c]}],"backdrop-contrast":[{"backdrop-contrast":[w,d,c]}],"backdrop-grayscale":[{"backdrop-grayscale":["",w,d,c]}],"backdrop-hue-rotate":[{"backdrop-hue-rotate":[w,d,c]}],"backdrop-invert":[{"backdrop-invert":["",w,d,c]}],"backdrop-opacity":[{"backdrop-opacity":[w,d,c]}],"backdrop-saturate":[{"backdrop-saturate":[w,d,c]}],"backdrop-sepia":[{"backdrop-sepia":["",w,d,c]}],"border-collapse":[{border:["collapse","separate"]}],"border-spacing":[{"border-spacing":h()}],"border-spacing-x":[{"border-spacing-x":h()}],"border-spacing-y":[{"border-spacing-y":h()}],"table-layout":[{table:["auto","fixed"]}],caption:[{caption:["top","bottom"]}],transition:[{transition:["","all","colors","opacity","shadow","transform","none",d,c]}],"transition-behavior":[{transition:["normal","discrete"]}],duration:[{duration:[w,"initial",d,c]}],ease:[{ease:["linear","initial",R,d,c]}],delay:[{delay:[w,d,c]}],animate:[{animate:["none",G,d,c]}],backface:[{backface:["hidden","visible"]}],perspective:[{perspective:[k,d,c]}],"perspective-origin":[{"perspective-origin":I()}],rotate:[{rotate:ce()}],"rotate-x":[{"rotate-x":ce()}],"rotate-y":[{"rotate-y":ce()}],"rotate-z":[{"rotate-z":ce()}],scale:[{scale:de()}],"scale-x":[{"scale-x":de()}],"scale-y":[{"scale-y":de()}],"scale-z":[{"scale-z":de()}],"scale-3d":["scale-3d"],skew:[{skew:ve()}],"skew-x":[{"skew-x":ve()}],"skew-y":[{"skew-y":ve()}],transform:[{transform:[d,c,"","none","gpu","cpu"]}],"transform-origin":[{origin:I()}],"transform-style":[{transform:["3d","flat"]}],translate:[{translate:ue()}],"translate-x":[{"translate-x":ue()}],"translate-y":[{"translate-y":ue()}],"translate-z":[{"translate-z":ue()}],"translate-none":["translate-none"],accent:[{accent:g()}],appearance:[{appearance:["none","auto"]}],"caret-color":[{caret:g()}],"color-scheme":[{scheme:["normal","dark","light","light-dark","only-dark","only-light"]}],cursor:[{cursor:["auto","default","pointer","wait","text","move","help","not-allowed","none","context-menu","progress","cell","crosshair","vertical-text","alias","copy","no-drop","grab","grabbing","all-scroll","col-resize","row-resize","n-resize","e-resize","s-resize","w-resize","ne-resize","nw-resize","se-resize","sw-resize","ew-resize","ns-resize","nesw-resize","nwse-resize","zoom-in","zoom-out",d,c]}],"field-sizing":[{"field-sizing":["fixed","content"]}],"pointer-events":[{"pointer-events":["auto","none"]}],resize:[{resize:["none","","y","x"]}],"scroll-behavior":[{scroll:["auto","smooth"]}],"scroll-m":[{"scroll-m":h()}],"scroll-mx":[{"scroll-mx":h()}],"scroll-my":[{"scroll-my":h()}],"scroll-ms":[{"scroll-ms":h()}],"scroll-me":[{"scroll-me":h()}],"scroll-mt":[{"scroll-mt":h()}],"scroll-mr":[{"scroll-mr":h()}],"scroll-mb":[{"scroll-mb":h()}],"scroll-ml":[{"scroll-ml":h()}],"scroll-p":[{"scroll-p":h()}],"scroll-px":[{"scroll-px":h()}],"scroll-py":[{"scroll-py":h()}],"scroll-ps":[{"scroll-ps":h()}],"scroll-pe":[{"scroll-pe":h()}],"scroll-pt":[{"scroll-pt":h()}],"scroll-pr":[{"scroll-pr":h()}],"scroll-pb":[{"scroll-pb":h()}],"scroll-pl":[{"scroll-pl":h()}],"snap-align":[{snap:["start","end","center","align-none"]}],"snap-stop":[{snap:["normal","always"]}],"snap-type":[{snap:["none","x","y","both"]}],"snap-strictness":[{snap:["mandatory","proximity"]}],touch:[{touch:["auto","none","manipulation"]}],"touch-x":[{"touch-pan":["x","left","right"]}],"touch-y":[{"touch-pan":["y","up","down"]}],"touch-pz":["touch-pinch-zoom"],select:[{select:["none","text","all","auto"]}],"will-change":[{"will-change":["auto","scroll","contents","transform",d,c]}],fill:[{fill:["none",...g()]}],"stroke-w":[{stroke:[w,J,D,pe]}],stroke:[{stroke:["none",...g()]}],"forced-color-adjust":[{"forced-color-adjust":["auto","none"]}]},conflictingClassGroups:{overflow:["overflow-x","overflow-y"],overscroll:["overscroll-x","overscroll-y"],inset:["inset-x","inset-y","start","end","top","right","bottom","left"],"inset-x":["right","left"],"inset-y":["top","bottom"],flex:["basis","grow","shrink"],gap:["gap-x","gap-y"],p:["px","py","ps","pe","pt","pr","pb","pl"],px:["pr","pl"],py:["pt","pb"],m:["mx","my","ms","me","mt","mr","mb","ml"],mx:["mr","ml"],my:["mt","mb"],size:["w","h"],"font-size":["leading"],"fvn-normal":["fvn-ordinal","fvn-slashed-zero","fvn-figure","fvn-spacing","fvn-fraction"],"fvn-ordinal":["fvn-normal"],"fvn-slashed-zero":["fvn-normal"],"fvn-figure":["fvn-normal"],"fvn-spacing":["fvn-normal"],"fvn-fraction":["fvn-normal"],"line-clamp":["display","overflow"],rounded:["rounded-s","rounded-e","rounded-t","rounded-r","rounded-b","rounded-l","rounded-ss","rounded-se","rounded-ee","rounded-es","rounded-tl","rounded-tr","rounded-br","rounded-bl"],"rounded-s":["rounded-ss","rounded-es"],"rounded-e":["rounded-se","rounded-ee"],"rounded-t":["rounded-tl","rounded-tr"],"rounded-r":["rounded-tr","rounded-br"],"rounded-b":["rounded-br","rounded-bl"],"rounded-l":["rounded-tl","rounded-bl"],"border-spacing":["border-spacing-x","border-spacing-y"],"border-w":["border-w-x","border-w-y","border-w-s","border-w-e","border-w-t","border-w-r","border-w-b","border-w-l"],"border-w-x":["border-w-r","border-w-l"],"border-w-y":["border-w-t","border-w-b"],"border-color":["border-color-x","border-color-y","border-color-s","border-color-e","border-color-t","border-color-r","border-color-b","border-color-l"],"border-color-x":["border-color-r","border-color-l"],"border-color-y":["border-color-t","border-color-b"],translate:["translate-x","translate-y","translate-none"],"translate-none":["translate","translate-x","translate-y","translate-z"],"scroll-m":["scroll-mx","scroll-my","scroll-ms","scroll-me","scroll-mt","scroll-mr","scroll-mb","scroll-ml"],"scroll-mx":["scroll-mr","scroll-ml"],"scroll-my":["scroll-mt","scroll-mb"],"scroll-p":["scroll-px","scroll-py","scroll-ps","scroll-pe","scroll-pt","scroll-pr","scroll-pb","scroll-pl"],"scroll-px":["scroll-pr","scroll-pl"],"scroll-py":["scroll-pt","scroll-pb"],touch:["touch-x","touch-y","touch-pz"],"touch-x":["touch"],"touch-y":["touch"],"touch-pz":["touch"]},conflictingClassGroupModifiers:{"font-size":["leading"]},orderSensitiveModifiers:["*","**","after","backdrop","before","details-content","file","first-letter","first-line","marker","placeholder","selection"]}}),Ne=m.defineComponent({__name:"MagicCanvas",props:{canvasRef:{type:Function},cleanup:{type:Function}},setup(e){const t=e,o=m.ref();return m.onMounted(()=>{if(!o.value)throw new Error("Canvas not found in DOM. Check ref link.");t.canvasRef(o.value)}),m.onBeforeUnmount(()=>{if(!o.value)throw new Error("Canvas not found in DOM. Check ref link.");t.cleanup(o.value)}),(n,r)=>(m.openBlock(),m.createElementBlock("canvas",m.mergeProps({...n.$attrs,class:m.unref(Ft)(n.$attrs.class,["w-[100vw]","h-[100vh]"])},{ref_key:"canvas",ref:o})," Sorry, your browser does not support canvas. ",16))}});function Ye(e){return m.getCurrentScope()?(m.onScopeDispose(e),!0):!1}const Gt=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Xt=Object.prototype.toString,Dt=e=>Xt.call(e)==="[object Object]",Vt=()=>{};function jt(...e){if(e.length!==1)return m.toRef(...e);const t=e[0];return typeof t=="function"?m.readonly(m.customRef(()=>({get:t,set:Vt}))):m.ref(t)}function Wt(e,t){function o(...n){return new Promise((r,a)=>{Promise.resolve(e(()=>t.apply(this,n),{fn:t,thisArg:this,args:n})).then(r).catch(a)})}return o}const Fe=e=>e();function Bt(e=Fe,t={}){const{initialState:o="active"}=t,n=jt(o==="active");function r(){n.value=!1}function a(){n.value=!0}const s=(...i)=>{n.value&&e(...i)};return{isActive:m.readonly(n),pause:r,resume:a,eventFilter:s}}function Q(e){return Array.isArray(e)?e:[e]}function $t(e){return m.getCurrentInstance()}function Ut(e,t,o={}){const{eventFilter:n=Fe,...r}=o;return m.watch(e,Wt(n,t),r)}function Zt(e,t,o={}){const{eventFilter:n,initialState:r="active",...a}=o,{eventFilter:s,pause:i,resume:l,isActive:u}=Bt(n,{initialState:r});return{stop:Ut(e,t,{...a,eventFilter:s}),pause:i,resume:l,isActive:u}}function Ge(e,t=!0,o){$t()?m.onMounted(e,o):t?e():m.nextTick(e)}function Ht(e,t,o){return m.watch(e,t,{...o,immediate:!0})}const Z=Gt?window:void 0;function V(e){var t;const o=m.toValue(e);return(t=o?.$el)!=null?t:o}function Xe(...e){const t=[],o=()=>{t.forEach(i=>i()),t.length=0},n=(i,l,u,b)=>(i.addEventListener(l,u,b),()=>i.removeEventListener(l,u,b)),r=m.computed(()=>{const i=Q(m.toValue(e[0])).filter(l=>l!=null);return i.every(l=>typeof l!="string")?i:void 0}),a=Ht(()=>{var i,l;return[(l=(i=r.value)==null?void 0:i.map(u=>V(u)))!=null?l:[Z].filter(u=>u!=null),Q(m.toValue(r.value?e[1]:e[0])),Q(m.unref(r.value?e[2]:e[1])),m.toValue(r.value?e[3]:e[2])]},([i,l,u,b])=>{if(o(),!i?.length||!l?.length||!u?.length)return;const f=Dt(b)?{...b}:b;t.push(...i.flatMap(y=>l.flatMap(S=>u.map(p=>n(y,S,p,f)))))},{flush:"post"}),s=()=>{a(),o()};return Ye(o),s}function Jt(){const e=m.shallowRef(!1),t=m.getCurrentInstance();return t&&m.onMounted(()=>{e.value=!0},t),e}function qt(e){const t=Jt();return m.computed(()=>(t.value,!!e()))}const ee=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},te="__vueuse_ssr_handlers__",Kt=Qt();function Qt(){return te in ee||(ee[te]=ee[te]||{}),ee[te]}function eo(e,t){return Kt[e]||t}function to(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const oo={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},De="vueuse-storage";function no(e,t,o,n={}){var r;const{flush:a="pre",deep:s=!0,listenToStorageChanges:i=!0,writeDefaults:l=!0,mergeDefaults:u=!1,shallow:b,window:f=Z,eventFilter:y,onError:S=v=>{console.error(v)},initOnMounted:p}=n,k=(b?m.shallowRef:m.ref)(typeof t=="function"?t():t),x=m.computed(()=>m.toValue(e));if(!o)try{o=eo("getDefaultStorage",()=>{var v;return(v=Z)==null?void 0:v.localStorage})()}catch(v){S(v)}if(!o)return k;const R=m.toValue(t),G=to(R),P=(r=n.serializer)!=null?r:oo[G],{pause:L,resume:I}=Zt(k,v=>se(v),{flush:a,deep:s,eventFilter:y});m.watch(x,()=>Y(),{flush:a});let N=!1;const j=v=>{p&&!N||Y(v)},h=v=>{p&&!N||ie(v)};f&&i&&(o instanceof Storage?Xe(f,"storage",j,{passive:!0}):Xe(f,De,h)),p?Ge(()=>{N=!0,Y()}):Y();function _(v,C){if(f){const A={key:x.value,oldValue:v,newValue:C,storageArea:o};f.dispatchEvent(o instanceof Storage?new StorageEvent("storage",A):new CustomEvent(De,{detail:A}))}}function se(v){try{const C=o.getItem(x.value);if(v==null)_(C,null),o.removeItem(x.value);else{const A=P.write(v);C!==A&&(o.setItem(x.value,A),_(C,A))}}catch(C){S(C)}}function ae(v){const C=v?v.newValue:o.getItem(x.value);if(C==null)return l&&R!=null&&o.setItem(x.value,P.write(R)),R;if(!v&&u){const A=P.read(C);return typeof u=="function"?u(A,R):G==="object"&&!Array.isArray(A)?{...R,...A}:A}else return typeof C!="string"?C:P.read(C)}function Y(v){if(!(v&&v.storageArea!==o)){if(v&&v.key==null){k.value=R;return}if(!(v&&v.key!==x.value)){L();try{const C=P.write(k.value);(v===void 0||v?.newValue!==C)&&(k.value=ae(v))}catch(C){S(C)}finally{v?m.nextTick(I):I()}}}}function ie(v){Y(v.detail)}return k}function ro(e,t,o={}){const{window:n=Z,...r}=o;let a;const s=qt(()=>n&&"ResizeObserver"in n),i=()=>{a&&(a.disconnect(),a=void 0)},l=m.computed(()=>{const f=m.toValue(e);return Array.isArray(f)?f.map(y=>V(y)):[V(f)]}),u=m.watch(l,f=>{if(i(),s.value&&n){a=new ResizeObserver(t);for(const y of f)y&&a.observe(y,r)}},{immediate:!0,flush:"post"}),b=()=>{i(),u()};return Ye(b),{isSupported:s,stop:b}}function so(e,t={width:0,height:0},o={}){const{window:n=Z,box:r="content-box"}=o,a=m.computed(()=>{var f,y;return(y=(f=V(e))==null?void 0:f.namespaceURI)==null?void 0:y.includes("svg")}),s=m.shallowRef(t.width),i=m.shallowRef(t.height),{stop:l}=ro(e,([f])=>{const y=r==="border-box"?f.borderBoxSize:r==="content-box"?f.contentBoxSize:f.devicePixelContentBoxSize;if(n&&a.value){const S=V(e);if(S){const p=S.getBoundingClientRect();s.value=p.width,i.value=p.height}}else if(y){const S=Q(y);s.value=S.reduce((p,{inlineSize:k})=>p+k,0),i.value=S.reduce((p,{blockSize:k})=>p+k,0)}else s.value=f.contentRect.width,i.value=f.contentRect.height},o);Ge(()=>{const f=V(e);f&&(s.value="offsetWidth"in f?f.offsetWidth:t.width,i.value="offsetHeight"in f?f.offsetHeight:t.height)});const u=m.watch(()=>V(e),f=>{s.value=f?t.width:0,i.value=f?t.height:0});function b(){l(),u()}return{width:s,height:i,stop:b}}function ge(e,t,o={}){const{window:n=Z}=o;return no(e,t,n?.localStorage,o)}const oe=()=>window.devicePixelRatio??1,ao=(e,t)=>{const o=t.translateX??0,n=t.translateY??0;(o!==0||n!==0)&&e.translate(o,n);const r=t.scaleX??1,a=t.scaleY??1;(r!==1||a!==1)&&e.scale(r,a);const s=t.skewX??0,i=t.skewY??0;(s!==0||i!==0)&&e.transform(1,i,s,1,0,0)},Ve=e=>{if(!e)throw new Error("canvas not found");const t="value"in e?e.value:e;if(!t)throw new Error("canvas not found");const o=t.getContext("2d");if(!o)throw new Error("2d context not found");return o},io={middle:1},he=e=>{const{a:t,e:o,f:n}=e.getTransform(),r=oe(),a=t/r,s=o/r,i=n/r;return{panX:s,panY:i,zoom:a}},ne=(e,t)=>{const o=t.canvas.getBoundingClientRect(),n=e.clientX-o.left,r=e.clientY-o.top,{panX:a,panY:s,zoom:i}=he(t),l=(n-a)/i,u=(r-s)/i;return{x:l,y:u,zoom:i}},lo=(e,t)=>{const{panX:o,panY:n,zoom:r}=he(t),{x:a,y:s}=e;return{clientX:a*r+o,clientY:s*r+n,zoom:r}},je=e=>{const t=m.ref({x:0,y:0}),o=n=>t.value=ne(n,Ve(e));return m.onMounted(()=>{if(!e.value)throw new Error("Canvas not found in DOM. Check ref link.");e.value.addEventListener("mousemove",o),e.value.addEventListener("wheel",o)}),{coordinates:t,cleanup:n=>{n.removeEventListener("mousemove",o),n.removeEventListener("wheel",o)}}},H=100,We=.6,re=.25,co=e=>{if(e<=re)return"00";if(e>=We)return"";const t=String(Math.floor((e-re)/(We-re)*100));return t.length===1?`0${t}`:t},uo=({panX:e,panY:t,zoom:o},n)=>({draw:a=>{if(o.value<=re)return;const s=ne({clientX:0,clientY:0},a),i=ne({clientX:window.innerWidth+H,clientY:window.innerHeight+H},a),l=e.value/o.value%H,u=t.value/o.value%H;for(let b=s.x+l;b<i.x;b+=H)for(let f=s.y+u;f<i.y;f+=H)n.value(a,{x:b,y:f},co(o.value))}}),be={cameraPanX:e=>`camera-pan-x-${e}`,cameraPanY:e=>`camera-pan-y-${e}`,cameraZoom:e=>`camera-zoom-${e}`},mo=.2,fo=10,po=.02,Be=1,go=(e,t)=>{const o=ge(be.cameraPanX(t),0),n=ge(be.cameraPanY(t),0),r=ge(be.cameraZoom(t),1),a=p=>{const k=e.value.getBoundingClientRect(),x=p.clientX-k.left,R=p.clientY-k.top,G=Math.max(-100,Math.min(100,p.deltaY)),P=Math.exp(-G*po),L=Math.min(fo,Math.max(mo,r.value*P)),I=L/r.value;o.value=x-(x-o.value)*I,n.value=R-(R-n.value)*I,r.value=L},s=p=>{o.value-=p.deltaX*Be,n.value-=p.deltaY*Be},i=p=>{p.preventDefault(),(!p.ctrlKey?s:a)(p)};let l=0,u=0,b=!1;const f=p=>{b=p.button===io.middle,b&&(l=p.clientX,u=p.clientY)},y=p=>{b&&(s({deltaX:l-p.clientX,deltaY:u-p.clientY}),l=p.clientX,u=p.clientY)},S=()=>{l=0,u=0,b=!1};return m.onMounted(()=>{if(!e.value)throw new Error("canvas not found in DOM");e.value.addEventListener("wheel",i,{passive:!1}),e.value.addEventListener("mousedown",f),e.value.addEventListener("mousemove",y),document.addEventListener("mouseup",S)}),{actions:{zoomIn:(p=12.5)=>a({deltaY:-p,clientX:window.innerWidth/2,clientY:window.innerHeight/2}),zoomOut:(p=12.5)=>a({deltaY:p,clientX:window.innerWidth/2,clientY:window.innerHeight/2})},state:{panX:o,panY:n,zoom:r},getTransform:()=>({scaleX:r.value,scaleY:r.value,translateX:o.value,translateY:n.value}),cleanup:p=>{p.removeEventListener("wheel",i),p.removeEventListener("mousedown",f),p.removeEventListener("mousemove",y),document.removeEventListener("mouseup",S)}}},ho=(e,t)=>{const{getTransform:o,...n}=go(e,t),r=oe(),a={scaleX:r,scaleY:r};return{...n,transformAndClear:s=>{s.resetTransform(),s.clearRect(0,0,s.canvas.width,s.canvas.height);const i=[a,o()];for(const l of i)ao(s,l)}}},bo=60,$e=e=>{if(!e)throw new Error("Canvas not found in DOM. Check ref link.");const t=oe(),o=e.getBoundingClientRect();e.width=o.width*t,e.height=o.height*t},wo=(e={})=>{const t=m.ref(),o=so(t),n=m.ref(()=>{}),r=m.ref(()=>{});let a;m.onMounted(()=>{$e(t.value),a=setInterval(f,1e3/bo)}),m.watch([o.width,o.height],()=>$e(t.value));const{cleanup:s,...i}=ho(t,e?.storageKey??"[default-storage-key]"),{coordinates:l,cleanup:u}=je(t),b=uo(i.state,r),f=()=>{const y=Ve(t);i.transformAndClear(y),b.draw(y),n.value(y)};return{canvas:t,camera:i,cursorCoordinates:l,ref:{canvasRef:y=>t.value=y,cleanup:y=>{u(y),s(y),clearInterval(a)}},draw:{content:n,backgroundPattern:r}}},vo={install(e){e.component("MagicCanvas",Ne)}};E.MagicCanvas=Ne,E.MagicCanvasPlugin=vo,E.getCanvasTransform=he,E.getClientCoordinates=lo,E.getDevicePixelRatio=oe,E.getMagicCoordinates=ne,E.useMagicCanvas=wo,E.useMagicCoordinates=je,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));

package/dist/magic-canvas-yonava.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-400:oklch(82.8% .189 84.429);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.h-\[100vh\]{height:100vh}.w-\[100vw\]{width:100vw}.transform\!{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)!important}.bg-amber-400{background-color:var(--color-amber-400)}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}

package/dist/test/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLCanvasElement>;
+export default _default;

package/dist/test/main.d.ts

@@ -0,0 +1 @@
+export {};

package/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magic Canvas Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/test/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "magic-canvas-yonava",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "main": "dist/index.es.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,7 @@
     }
   },
   "scripts": {
+    "dev": "vite",
     "build": "vue-tsc -b . && vite build",
     "republish": "rm -rf dist && npm run build && npm publish"
   },
@@ -19,10 +20,12 @@
     "vue": "^3.5.18"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vueuse/core": "^13.6.0",
     "magic-utils-yonava": "^1.0.11",
     "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4.1.18",
     "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4"
   },

package/src/MagicCanvas.vue

@@ -1,35 +1,32 @@
 <script setup lang="ts">
-  import { type ClassNameValue, twMerge } from "tailwind-merge";
+import { type ClassNameValue, twMerge } from "tailwind-merge";
 
-  import { onBeforeUnmount, onMounted, ref } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 
-  import type { MagicCanvasProps } from "./types";
+import type { MagicCanvasProps } from "./types";
 
-  const props = defineProps<MagicCanvasProps["ref"]>();
+const props = defineProps<MagicCanvasProps["ref"]>();
 
-  const canvas = ref<HTMLCanvasElement>();
+const canvas = ref<HTMLCanvasElement>();
 
-  onMounted(() => {
-    if (!canvas.value)
-      throw new Error("Canvas not found in DOM. Check ref link.");
-    props.canvasRef(canvas.value);
-  });
+onMounted(() => {
+  if (!canvas.value)
+    throw new Error("Canvas not found in DOM. Check ref link.");
+  props.canvasRef(canvas.value);
+});
 
-  onBeforeUnmount(() => {
-    if (!canvas.value)
-      throw new Error("Canvas not found in DOM. Check ref link.");
-    props.cleanup(canvas.value);
-  });
+onBeforeUnmount(() => {
+  if (!canvas.value)
+    throw new Error("Canvas not found in DOM. Check ref link.");
+  props.cleanup(canvas.value);
+});
 </script>
 
 <template>
-  <canvas
-    v-bind="{
-      ...$attrs,
-      class: twMerge($attrs.class as ClassNameValue, ['w-full', 'h-full']),
-    }"
-    ref="canvas"
-  >
+  <canvas v-bind="{
+    ...$attrs,
+    class: twMerge($attrs.class as ClassNameValue, ['w-[100vw]', 'h-[100vh]']),
+  }" ref="canvas">
     Sorry, your browser does not support canvas.
   </canvas>
 </template>

package/src/index.ts

@@ -1,3 +1,4 @@
+import "./tailwind.css";
 import MagicCanvas from "./MagicCanvas.vue";
 import { App } from "vue";
 

package/src/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/src/test/App.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useMagicCanvas } from '..';
+
+
+const magic = useMagicCanvas()
+
+magic.draw.backgroundPattern.value = (ctx, at, alpha) => {
+  ctx.fillStyle = alpha ? `rgba(255, 0, 0, ${Number(alpha) / 100})` : 'red';
+  ctx.fillRect(at.x, at.y, 10, 10);
+}
+</script>
+
+<template>
+  <MagicCanvas class="bg-amber-400" v-bind="magic.ref" />
+</template>

package/src/test/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import { MagicCanvasPlugin } from "..";
+createApp(App).use(MagicCanvasPlugin).mount("#app");

package/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import dts from "vite-plugin-dts";
+import tailwindcss from "@tailwindcss/vite";
 
 export default defineConfig({
   plugins: [
@@ -10,6 +11,7 @@ export default defineConfig({
       insertTypesEntry: true,
       include: ["src/**/*.ts", "src/**/*.vue"],
     }),
+    tailwindcss(),
   ],
   build: {
     lib: {