magic-canvas-yonava 1.0.6 → 1.0.7

package/dist/index.umd.js

@@ -0,0 +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"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "magic-canvas-yonava",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,16 +12,19 @@
     }
   },
   "scripts": {
-    "build:types": "vue-tsc -b .",
-    "republish": "rm -rf dist && npm run build:types && npm publish"
+    "build": "vue-tsc -b . && vite build",
+    "republish": "rm -rf dist && npm run build && npm publish"
   },
   "peerDependencies": {
     "vue": "^3.5.18"
   },
   "dependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
     "@vueuse/core": "^13.6.0",
-    "magic-utils-yonava": "^1.0.7",
-    "tailwind-merge": "^3.3.1"
+    "magic-utils-yonava": "^1.0.11",
+    "tailwind-merge": "^3.3.1",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4"
   },
   "devDependencies": {
     "@types/node": "^24.8.1",

package/src/index.ts

@@ -12,7 +12,7 @@ declare module "vue" {
   }
 }
 
-export default {
+export const MagicCanvasPlugin = {
   install(app: App) {
     app.component("MagicCanvas", MagicCanvas);
   },

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "outDir": "./dist",
-    "rootDir": "./src",
+    "rootDir": "src",
 
     "target": "ES2022",
     "module": "ESNext",

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+      include: ["src/index.ts"],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "MagicCanvas",
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+});

package/dist/MagicCanvas.vue.d.ts

@@ -1,9 +0,0 @@
-declare const __VLS_export: import("vue").DefineComponent<{
-    canvasRef: (canvas: HTMLCanvasElement) => void;
-    cleanup: (canvas: HTMLCanvasElement) => void;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    canvasRef: (canvas: HTMLCanvasElement) => void;
-    cleanup: (canvas: HTMLCanvasElement) => void;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/MagicCanvas.vue.js

@@ -1,36 +0,0 @@
-import { twMerge } from "tailwind-merge";
-import { onBeforeUnmount, onMounted, ref } from "vue";
-const props = defineProps();
-const canvas = ref();
-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);
-});
-const __VLS_ctx = {
-    ...{},
-    ...{},
-    ...{},
-    ...{},
-};
-let __VLS_components;
-let __VLS_intrinsics;
-let __VLS_directives;
-__VLS_asFunctionalElement1(__VLS_intrinsics.canvas, __VLS_intrinsics.canvas)({
-    ...({
-        ...__VLS_ctx.$attrs,
-        class: __VLS_ctx.twMerge(__VLS_ctx.$attrs.class, ['w-full', 'h-full']),
-    }),
-    ref: "canvas",
-});
-// @ts-ignore
-[$attrs, $attrs, twMerge,];
-const __VLS_export = (await import('vue')).defineComponent({
-    __typeProps: {},
-});
-export default {};

package/dist/backgroundPattern.d.ts

@@ -1,6 +0,0 @@
-import type { Camera } from './camera';
-import type { Coordinate, DrawFns } from './types';
-export type DrawPattern = (ctx: CanvasRenderingContext2D, at: Coordinate, alpha: string) => void;
-export declare const useBackgroundPattern: ({ panX, panY, zoom }: Camera["state"], drawPattern: DrawFns["backgroundPattern"]) => {
-    draw: (ctx: CanvasRenderingContext2D) => void;
-};

package/dist/backgroundPattern.js

@@ -1,36 +0,0 @@
-import { getMagicCoordinates } from './coordinates';
-const STAGGER = 100;
-const START_PATTERN_FADE_OUT = 0.6;
-const PATTERN_FULLY_FADED_OUT = 0.25;
-const computeAlpha = (z) => {
-    if (z <= PATTERN_FULLY_FADED_OUT)
-        return '00';
-    if (z >= START_PATTERN_FADE_OUT)
-        return '';
-    const strPercent = String(Math.floor(((z - PATTERN_FULLY_FADED_OUT) /
-        (START_PATTERN_FADE_OUT - PATTERN_FULLY_FADED_OUT)) *
-        100));
-    return strPercent.length === 1 ? `0${strPercent}` : strPercent;
-};
-export const useBackgroundPattern = ({ panX, panY, zoom }, drawPattern) => {
-    const draw = (ctx) => {
-        if (zoom.value <= PATTERN_FULLY_FADED_OUT)
-            return;
-        const startingCoords = getMagicCoordinates({
-            clientX: 0,
-            clientY: 0,
-        }, ctx);
-        const endingCoords = getMagicCoordinates({
-            clientX: window.innerWidth + STAGGER,
-            clientY: window.innerHeight + STAGGER,
-        }, ctx);
-        const offsetX = (panX.value / zoom.value) % STAGGER;
-        const offsetY = (panY.value / zoom.value) % STAGGER;
-        for (let x = startingCoords.x + offsetX; x < endingCoords.x; x += STAGGER) {
-            for (let y = startingCoords.y + offsetY; y < endingCoords.y; y += STAGGER) {
-                drawPattern.value(ctx, { x, y }, computeAlpha(zoom.value));
-            }
-        }
-    };
-    return { draw };
-};

package/dist/camera/index.d.ts

@@ -1,15 +0,0 @@
-import type { Ref } from 'vue';
-export declare const useCamera: (canvas: Ref<HTMLCanvasElement | undefined>, storageKey: string) => {
-    transformAndClear: (ctx: CanvasRenderingContext2D) => void;
-    actions: {
-        zoomIn: (increment?: number) => void;
-        zoomOut: (decrement?: number) => void;
-    };
-    state: {
-        panX: import("@vueuse/shared").RemovableRef<number>;
-        panY: import("@vueuse/shared").RemovableRef<number>;
-        zoom: import("@vueuse/shared").RemovableRef<number>;
-    };
-    cleanup: (ref: HTMLCanvasElement) => void;
-};
-export type Camera = ReturnType<typeof useCamera>;

package/dist/camera/index.js

@@ -1,20 +0,0 @@
-import { usePanAndZoom } from './panZoom';
-import { addTransform, getDevicePixelRatio, } from './utils';
-export const useCamera = (canvas, storageKey) => {
-    const { getTransform: getPZTransform, ...rest } = usePanAndZoom(canvas, storageKey);
-    const dpr = getDevicePixelRatio();
-    const dprTransform = {
-        scaleX: dpr,
-        scaleY: dpr,
-    };
-    return {
-        ...rest,
-        transformAndClear: (ctx) => {
-            ctx.resetTransform();
-            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-            const transforms = [dprTransform, getPZTransform()];
-            for (const t of transforms)
-                addTransform(ctx, t);
-        },
-    };
-};

package/dist/camera/panZoom.d.ts

@@ -1,23 +0,0 @@
-import { type Ref } from "vue";
-export declare const MIN_ZOOM = 0.2;
-export declare const MAX_ZOOM = 10;
-export declare const ZOOM_SENSITIVITY = 0.02;
-export declare const PAN_SENSITIVITY = 1;
-export declare const usePanAndZoom: (canvas: Ref<HTMLCanvasElement | undefined>, storageKey: string) => {
-    actions: {
-        zoomIn: (increment?: number) => void;
-        zoomOut: (decrement?: number) => void;
-    };
-    state: {
-        panX: import("@vueuse/shared").RemovableRef<number>;
-        panY: import("@vueuse/shared").RemovableRef<number>;
-        zoom: import("@vueuse/shared").RemovableRef<number>;
-    };
-    getTransform: () => {
-        scaleX: number;
-        scaleY: number;
-        translateX: number;
-        translateY: number;
-    };
-    cleanup: (ref: HTMLCanvasElement) => void;
-};

package/dist/camera/panZoom.js

@@ -1,100 +0,0 @@
-import { useLocalStorage } from "@vueuse/core";
-import { localKeys } from "../localStorage";
-import { onMounted } from "vue";
-import { MOUSE_BUTTONS } from "magic-utils-yonava";
-export const MIN_ZOOM = 0.2;
-export const MAX_ZOOM = 10;
-export const ZOOM_SENSITIVITY = 0.02;
-export const PAN_SENSITIVITY = 1;
-export const usePanAndZoom = (canvas, storageKey) => {
-    const panX = useLocalStorage(localKeys.cameraPanX(storageKey), 0);
-    const panY = useLocalStorage(localKeys.cameraPanY(storageKey), 0);
-    const zoom = useLocalStorage(localKeys.cameraZoom(storageKey), 1);
-    const setZoom = (ev) => {
-        const rect = canvas.value.getBoundingClientRect();
-        const cx = ev.clientX - rect.left;
-        const cy = ev.clientY - rect.top;
-        // clamp deltaY to a max range to prevent mice with large deltaY notches from feeling too sensitive
-        const normalizedDelta = Math.max(-100, Math.min(100, ev.deltaY));
-        const zoomFactor = Math.exp(-normalizedDelta * ZOOM_SENSITIVITY);
-        const clampedZoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, zoom.value * zoomFactor));
-        const scale = clampedZoom / zoom.value;
-        panX.value = cx - (cx - panX.value) * scale;
-        panY.value = cy - (cy - panY.value) * scale;
-        zoom.value = clampedZoom;
-    };
-    const setPan = (ev) => {
-        panX.value -= ev.deltaX * PAN_SENSITIVITY;
-        panY.value -= ev.deltaY * PAN_SENSITIVITY;
-    };
-    const onWheel = (ev) => {
-        ev.preventDefault();
-        const isPanning = !ev.ctrlKey;
-        const maneuverCamera = isPanning ? setPan : setZoom;
-        maneuverCamera(ev);
-    };
-    let lastX = 0;
-    let lastY = 0;
-    let middleMouseDown = false;
-    const onMousedown = (ev) => {
-        middleMouseDown = ev.button === MOUSE_BUTTONS.middle;
-        if (!middleMouseDown)
-            return;
-        lastX = ev.clientX;
-        lastY = ev.clientY;
-    };
-    const onMousemove = (ev) => {
-        if (!middleMouseDown)
-            return;
-        setPan({
-            deltaX: lastX - ev.clientX,
-            deltaY: lastY - ev.clientY,
-        });
-        lastX = ev.clientX;
-        lastY = ev.clientY;
-    };
-    const onMouseup = () => {
-        lastX = 0;
-        lastY = 0;
-        middleMouseDown = false;
-    };
-    onMounted(() => {
-        if (!canvas.value)
-            throw new Error("canvas not found in DOM");
-        canvas.value.addEventListener("wheel", onWheel, { passive: false });
-        canvas.value.addEventListener("mousedown", onMousedown);
-        canvas.value.addEventListener("mousemove", onMousemove);
-        document.addEventListener("mouseup", onMouseup);
-    });
-    return {
-        actions: {
-            zoomIn: (increment = 12.5) => setZoom({
-                deltaY: -increment,
-                clientX: window.innerWidth / 2,
-                clientY: window.innerHeight / 2,
-            }),
-            zoomOut: (decrement = 12.5) => setZoom({
-                deltaY: decrement,
-                clientX: window.innerWidth / 2,
-                clientY: window.innerHeight / 2,
-            }),
-        },
-        state: {
-            panX,
-            panY,
-            zoom,
-        },
-        getTransform: () => ({
-            scaleX: zoom.value,
-            scaleY: zoom.value,
-            translateX: panX.value,
-            translateY: panY.value,
-        }),
-        cleanup: (ref) => {
-            ref.removeEventListener("wheel", onWheel);
-            ref.removeEventListener("mousedown", onMousedown);
-            ref.removeEventListener("mousemove", onMousemove);
-            document.removeEventListener("mouseup", onMouseup);
-        },
-    };
-};

package/dist/camera/utils.d.ts

@@ -1,17 +0,0 @@
-export type TransformProps = {
-    /** corresponds to `a` in {@link CanvasRenderingContext2D.setTransform} */
-    scaleX: number;
-    /** corresponds to `b` in {@link CanvasRenderingContext2D.setTransform} */
-    skewY: number;
-    /** corresponds to `c` in {@link CanvasRenderingContext2D.setTransform} */
-    skewX: number;
-    /** corresponds to `d` in {@link CanvasRenderingContext2D.setTransform} */
-    scaleY: number;
-    /** corresponds to `e` in {@link CanvasRenderingContext2D.setTransform} */
-    translateX: number;
-    /** corresponds to `f` in {@link CanvasRenderingContext2D.setTransform} */
-    translateY: number;
-};
-export type TransformOptions = Partial<TransformProps>;
-export declare const getDevicePixelRatio: () => number;
-export declare const addTransform: (ctx: CanvasRenderingContext2D, t: TransformOptions) => void;

package/dist/camera/utils.js

@@ -1,18 +0,0 @@
-export const getDevicePixelRatio = () => window.devicePixelRatio ?? 1;
-export const addTransform = (ctx, t) => {
-    const translateX = t.translateX ?? 0;
-    const translateY = t.translateY ?? 0;
-    if (translateX !== 0 || translateY !== 0) {
-        ctx.translate(translateX, translateY);
-    }
-    const scaleX = t.scaleX ?? 1;
-    const scaleY = t.scaleY ?? 1;
-    if (scaleX !== 1 || scaleY !== 1) {
-        ctx.scale(scaleX, scaleY);
-    }
-    const skewX = t.skewX ?? 0;
-    const skewY = t.skewY ?? 0;
-    if (skewX !== 0 || skewY !== 0) {
-        ctx.transform(1, skewY, skewX, 1, 0, 0);
-    }
-};

package/dist/coordinates/index.d.ts

@@ -1,44 +0,0 @@
-import { type Ref } from "vue";
-import { Coordinate } from "../types";
-export declare const getCanvasTransform: (ctx: CanvasRenderingContext2D) => {
-    panX: number;
-    panY: number;
-    zoom: number;
-};
-/**
- * the coordinates in the real world. aka the browser
- */
-export type ClientCoords = Pick<MouseEvent, "clientX" | "clientY">;
-/**
- * the coordinates in the magic canvas world
- */
-export type MagicCoords = Coordinate;
-export type WithZoom<T> = T & {
-    /**
-     * the scale factor of the canvas
-     */
-    zoom: number;
-};
-/**
- * magic coordinates are coordinates transformed by the pan and zoom of the camera.
- *
- * if the user has panned their camera 10px to the left, running this function with
- * `clientCoords` set to (0, 0) will return (-10, 0, 1)
- */
-export declare const getMagicCoordinates: (clientCoords: ClientCoords, ctx: CanvasRenderingContext2D) => WithZoom<MagicCoords>;
-/**
- * client coordinates are the raw coordinates corresponding to the clients physical screen.
- *
- * the top left corner is (0, 0) and bottom right corner is (window.innerWidth, window.innerHeight).
- */
-export declare const getClientCoordinates: (magicCoords: MagicCoords, ctx: CanvasRenderingContext2D) => WithZoom<ClientCoords>;
-export declare const useMagicCoordinates: (canvas: Ref<HTMLCanvasElement | undefined>) => {
-    coordinates: Ref<{
-        x: number;
-        y: number;
-    }, Coordinate | {
-        x: number;
-        y: number;
-    }>;
-    cleanup: (ref: HTMLCanvasElement) => void;
-};

package/dist/coordinates/index.js

@@ -1,58 +0,0 @@
-import { getDevicePixelRatio } from "../camera/utils";
-import { onMounted, ref } from "vue";
-import { getCtx } from "magic-utils-yonava";
-export const getCanvasTransform = (ctx) => {
-    const { a, e, f } = ctx.getTransform();
-    // TODO investigate why dpr isn't already factored into ctx. Camera should add it with the PZ transform!
-    const dpr = getDevicePixelRatio();
-    const zoom = a / dpr;
-    const panX = e / dpr;
-    const panY = f / dpr;
-    return { panX, panY, zoom };
-};
-/**
- * magic coordinates are coordinates transformed by the pan and zoom of the camera.
- *
- * if the user has panned their camera 10px to the left, running this function with
- * `clientCoords` set to (0, 0) will return (-10, 0, 1)
- */
-export const getMagicCoordinates = (clientCoords, ctx) => {
-    const rect = ctx.canvas.getBoundingClientRect();
-    const localX = clientCoords.clientX - rect.left;
-    const localY = clientCoords.clientY - rect.top;
-    const { panX, panY, zoom } = getCanvasTransform(ctx);
-    const x = (localX - panX) / zoom;
-    const y = (localY - panY) / zoom;
-    return { x, y, zoom };
-};
-/**
- * client coordinates are the raw coordinates corresponding to the clients physical screen.
- *
- * the top left corner is (0, 0) and bottom right corner is (window.innerWidth, window.innerHeight).
- */
-export const getClientCoordinates = (magicCoords, ctx) => {
-    const { panX, panY, zoom } = getCanvasTransform(ctx);
-    const { x, y } = magicCoords;
-    return {
-        clientX: x * zoom + panX,
-        clientY: y * zoom + panY,
-        zoom,
-    };
-};
-export const useMagicCoordinates = (canvas) => {
-    const coordinates = ref({ x: 0, y: 0 });
-    const captureCoords = (ev) => (coordinates.value = getMagicCoordinates(ev, getCtx(canvas)));
-    onMounted(() => {
-        if (!canvas.value)
-            throw new Error("Canvas not found in DOM. Check ref link.");
-        canvas.value.addEventListener("mousemove", captureCoords);
-        canvas.value.addEventListener("wheel", captureCoords);
-    });
-    return {
-        coordinates,
-        cleanup: (ref) => {
-            ref.removeEventListener("mousemove", captureCoords);
-            ref.removeEventListener("wheel", captureCoords);
-        },
-    };
-};

package/dist/index.js

@@ -1,11 +0,0 @@
-import MagicCanvas from "./MagicCanvas.vue";
-export * from "./types.js";
-export * from "./useMagicCanvas.js";
-export * from "./coordinates/index.js";
-export { getDevicePixelRatio } from "./camera/utils.js";
-export { MagicCanvas };
-export default {
-    install(app) {
-        app.component("MagicCanvas", MagicCanvas);
-    },
-};

package/dist/localStorage.d.ts

@@ -1,35 +0,0 @@
-/**
- * a registry for all localStorage keys this application uses
- */
-export declare const localKeys: {
-    /** camera `panX` state in magic canvas - {@link Camera.state} */
-    readonly cameraPanX: (key: string) => `camera-pan-x-${string}`;
-    /** camera `panY` state in magic canvas - {@link Camera.state} */
-    readonly cameraPanY: (key: string) => `camera-pan-y-${string}`;
-    /** camera `zoom` state in magic canvas - {@link Camera.state} */
-    readonly cameraZoom: (key: string) => `camera-zoom-${string}`;
-};
-/**
- * all return values of localStorage are, by default, string.
- * this type allows string to be narrowed to types such as 'true' | 'false'
- */
-type TypeOverride = {};
-type LocalObj = typeof localKeys;
-/**
- * @example
- * type T = TypeOrReturnType<number> // number
- * type TFunc = TypeOrReturnType<() => number> // number
- */
-type TypeOrReturnType<T> = T extends (...args: any[]) => infer U ? U : T;
-type LocalKeys = TypeOrReturnType<LocalObj[keyof LocalObj]>;
-type LocalType<T extends LocalKeys> = T extends keyof TypeOverride ? TypeOverride[T] : string;
-/**
- * perform **type safe** localStorage actions
- */
-export declare const local: {
-    get: <T extends LocalKeys>(key: T) => string | null;
-    set: <T extends LocalKeys, K extends LocalType<T>>(key: T, value: K) => void;
-    remove: <T extends LocalKeys>(key: T) => void;
-    clear: () => void;
-};
-export {};