motion-plus-vue 1.1.4 → 1.1.6

package/dist/cjs/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("motion-v");function te(n,{locales:t,format:o},i,r){const d=new Intl.NumberFormat(t,o).formatToParts(Number(n));i&&d.unshift({type:"prefix",value:i}),r&&d.push({type:"suffix",value:r});const f=[],h=[],g=[],v=[],u={},l=m=>`${m}:${u[m]=(u[m]??-1)+1}`;let p="",w=!1,P=!1,y=0;for(const m of d){p+=m.value;const c=m.type==="minusSign"||m.type==="plusSign"?"sign":m.type;switch(c){case"integer":w=!0,h.push(...m.value.split("").map(k=>({type:c,value:parseInt(k)})));break;case"group":h.push({type:c,value:m.value});break;case"decimal":P=!0,g.push({type:c,value:m.value,key:l(c),originalIndex:y++});break;case"fraction":g.push(...m.value.split("").map(k=>({type:c,value:parseInt(k),key:l(c),originalIndex:y++})));break;default:(w||P?v:f).push({type:c,value:m.value,key:l(c),originalIndex:y++})}}const x=[];for(let m=h.length-1;m>=0;m--){const c=l(h[m].type);x.unshift({...h[m],key:c,originalIndex:m})}return{pre:f,integer:x,fraction:g,post:v,formatted:p}}const[ne,oe]=s.createContext("SectionContext");function Z(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function L(n){const{width:t,fontSize:o}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(o)}em`}const S="var(--mask-height, 0.15em)",N="var(--mask-width, 0.5em)",b=`calc(${N} / var(--invert-x, 1))`,z="#000 0, transparent 71%",ie=`linear-gradient(to right, transparent 0, #000 ${b}, #000 calc(100% - ${b}), transparent),linear-gradient(to bottom, transparent 0, #000 ${S}, #000 calc(100% - ${S}), transparent 100%),radial-gradient(at bottom right, ${z}),radial-gradient(at bottom left, ${z}), radial-gradient(at top left, ${z}), radial-gradient(at top right, ${z})`,re=`100% calc(100% - ${S} * 2),calc(100% - ${b} * 2) 100%,${b} ${S},${b} ${S},${b} ${S},${b} ${S}`;s.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:o})=>o.x.scale*t.x}});const D={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function q(n){const t=e.ref();function o(r){t.value=r==null?void 0:r.$el}e.watch(()=>n.isPresent,r=>{var a;t.value&&((a=s.mountedStates.get(t.value))==null||a.setActive("exit",!r))});function i(r){var a;r.detail.isExit&&!n.isPresent&&((a=n.onRemove)==null||a.call(n,n.partKey))}return{root:t,getRoot:o,handleComplete:i}}const ae=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{}},setup(n){const t=n,{justify:o}=ne(),{getRoot:i,handleComplete:r}=q(t);return(a,d)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),layout:"position","data-state":a.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(o),padding:`calc(${e.unref(S)}/2) 0`,position:"relative",pointerEvents:a.isPresent?void 0:"none"}),"aria-hidden":!a.isPresent,onMotioncomplete:e.unref(r)},{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(o),initial:!1},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(s.motion).span,{key:a.value,layout:e.unref(o)==="right"?"position":!1,initial:{opacity:0},animate:{opacity:[null,1]},exit:{opacity:[null,0],transition:{duration:.3}},style:{display:"inline-block",whiteSpace:"pre"},transition:{duration:.2}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.value),1)]),_:1},8,["layout"]))]),_:1},8,["anchor-x"])]),_:1},8,["data-state","style","aria-hidden","onMotioncomplete"]))}}),J=new WeakMap,se=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{}},setup(n){const t=n,o=t.initialValue??t.value,i=Z(),r=s.useMotionConfig(),a=e.ref(),d=e.ref(Array(10).fill(null)),f=e.ref(),{getRoot:h,handleComplete:g,root:v}=q(t);let u=o;const l=e.ref(o);e.watch([()=>t.value,()=>t.isPresent],([y,x])=>{if(!x)return l.value=0;if(i.current)return e.nextTick(()=>{l.value=y});l.value=y},{immediate:!0});function p(y){var k;if(!a.value||y===u)return;const x=a.value.getBoundingClientRect(),m=(k=v.value)==null?void 0:k.getBoundingClientRect(),c=x.height*(y-u)+(x.top-(m?m.top||0:x.top));s.animate(a.value,{y:[c,0]},r.value.transition)}function w(y){if(i.current&&o===y||!d.value[y])return;const x=L(d.value[y]);v.value&&J.set(v.value,x),f.value=x}e.watch(l,y=>{w(y)},{immediate:!0,flush:"post"}),e.watch(l,(y,x,m)=>{p(y),m(()=>{u=y})},{immediate:!0,flush:"pre"});function P(y){return()=>e.createVNode("span",{key:y,style:{display:"inline-block",padding:`calc(${S}/2) 0`}},[y])}return(y,x)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(h),layout:"position","data-state":y.isPresent?void 0:"exiting","data-key":y.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:f.value,pointerEvents:y.isPresent?void 0:"none"}),"aria-hidden":!y.isPresent,onMotioncomplete:e.unref(g)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:a,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[l.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(D),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(m-1)),{key:m-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value)))),l.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(D),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-l.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(P(l.value+m)),{key:l.value+m}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),E=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{}},setup(n){const t=n,o=e.ref(),i=s.useDomRef(),r=e.ref(),a=Z();e.watch(()=>t.parts,g=>{const v=new Map(g.map(l=>[l.key,{...l,isPresent:!0}]));f=[...f.filter(l=>!v.get(l.key)).map(l=>({...l,isPresent:!1})),...g].sort((l,p)=>d.value==="right"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?-1:1:d.value==="left"?l.isPresent===p.isPresent?l.originalIndex-p.originalIndex:l.isPresent?1:-1:l.originalIndex-p.originalIndex)},{flush:"pre"}),e.watch(()=>t.parts.map(g=>g.value).join(""),(g,v)=>{if(!r.value)return;if(a.current){i.value&&(i.value.style.width=L(r.value));return}const u=Array.from(r.value.children).map(p=>{if(!(p instanceof HTMLElement))return;if(p.dataset.state==="exiting"){const y=p.nextSibling;return p.remove(),()=>{r.value&&r.value.insertBefore(p,y)}}const w=J.get(p);if(!w)return;const P=p.style.width;return p.style.width=w,()=>{p.style.width=P}});function l(){const p=L(r.value);o.value=p}+g>+(v||0)?s.frame.read(l):l();for(let p=u.length-1;p>=0;p--){const w=u[p];w&&w()}},{immediate:!0,flush:"post"});const d=e.toRef(t,"justify");oe({justify:d});let f=t.parts;function h(g){f=f.filter(v=>v.key!==g)}return(g,v)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{ref:e.unref(i),class:e.normalizeClass(`number-section-${g.name}`),style:e.normalizeStyle({...g.style,display:"inline-flex",justifyContent:d.value,width:o.value}),layout:"position"},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:r,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[v[0]||(v[0]=e.createTextVNode(" ​ ")),e.createVNode(e.unref(s.AnimatePresence),{mode:g.mode,"anchor-x":d.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(f),u=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u.key},[u.type==="integer"||u.type==="fraction"?(e.openBlock(),e.createBlock(se,{key:u.key,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,"initial-value":e.unref(a).current?void 0:0,onRemove:h},null,8,["part-key","value","is-present","initial-value"])):(e.openBlock(),e.createBlock(ae,{key:u.type==="literal"?`${u.key}:${u.value}`:u.key,type:u.type,"part-key":u.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:u.value,"is-present":u.isPresent??!0,onRemove:h},null,8,["type","part-key","value","is-present"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style"]))}}),ue=e.defineComponent({__name:"Mask",setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.unref(s.motion).span,{layout:"","aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(N)})`,padding:`calc(${e.unref(S)}/2) ${e.unref(N)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(ie),webkitMaskSize:e.unref(re),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["style"]))}}),le=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{}},setup(n){const t={opacity:{duration:1,ease:s.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},o=n,i=e.computed(()=>{const f=o.value;return te(f,{locales:o.locales,format:o.format},o.prefix,o.suffix)}),r=s.useMotionConfig(),a=e.computed(()=>o.transition??r.value.transition??t);function d(){const{format:f,prefix:h,suffix:g,locales:v,value:u,...l}=o;return l}return(f,h)=>(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:a.value},{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,e.mergeProps({...f.$attrs,...d()},{layout:"",style:{lineHeight:"1",...f.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.motion).div,{layout:"","aria-label":i.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:i.value.pre,name:"pre"},null,8,["style","parts"]),e.createVNode(ue,null,{default:e.withCtx(()=>[e.createVNode(E,{justify:"right",parts:i.value.integer,name:"integer",mode:"popLayout"},null,8,["parts"]),e.createVNode(E,{layout:"position",parts:i.value.fraction,name:"fraction",mode:"popLayout"},null,8,["parts"])]),_:1}),e.createVNode(E,{style:e.normalizeStyle({padding:`calc(${e.unref(S)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:i.value.post,name:"post"},null,8,["style","parts"])]),_:1},8,["aria-label"])]),_:1},16,["style"])]),_:1},8,["transition"])]),_:1}))}}),ce=le;function fe(){const n=document.createElement("style");return n.textContent=`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("motion-v");function ee(n,{locales:t,format:o},i,a){const y=new Intl.NumberFormat(t,o).formatToParts(Number(n));i&&y.unshift({type:"prefix",value:i}),a&&y.push({type:"suffix",value:a});const d=[],v=[],w=[],h=[],s={},f=m=>`${m}:${s[m]=(s[m]??-1)+1}`;let p="",x=!1,g=!1,c=0;for(const m of y){p+=m.value;const l=m.type==="minusSign"||m.type==="plusSign"?"sign":m.type;switch(l){case"integer":x=!0,v.push(...m.value.split("").map(B=>({type:l,value:parseInt(B)})));break;case"group":v.push({type:l,value:m.value});break;case"decimal":g=!0,w.push({type:l,value:m.value,key:f(l),originalIndex:c++});break;case"fraction":w.push(...m.value.split("").map(B=>({type:l,value:parseInt(B),key:f(l),originalIndex:c++})));break;default:(x||g?h:d).push({type:l,value:m.value,key:f(l),originalIndex:c++})}}const k=[];for(let m=v.length-1;m>=0;m--){const l=f(v[m].type);k.unshift({...v[m],key:l,originalIndex:m})}return{pre:d,integer:k,fraction:w,post:h,formatted:p}}const[te,ne]=u.createContext("SectionContext");function Z(){const n={current:!0};return e.onMounted(()=>{n.current=!1}),n}function L(n){const{width:t,fontSize:o}=getComputedStyle(n);return`${parseFloat(t)/parseFloat(o)}em`}const b="var(--mask-height, 0.15em)",N="var(--mask-width, 0.5em)",$=`calc(${N} / var(--invert-x, 1))`,z="#000 0, transparent 71%",oe=`linear-gradient(to right, transparent 0, #000 ${$}, #000 calc(100% - ${$}), transparent),linear-gradient(to bottom, transparent 0, #000 ${b}, #000 calc(100% - ${b}), transparent 100%),radial-gradient(at bottom right, ${z}),radial-gradient(at bottom left, ${z}), radial-gradient(at top left, ${z}), radial-gradient(at top right, ${z})`,ie=`100% calc(100% - ${b} * 2),calc(100% - ${$} * 2) 100%,${$} ${b},${$} ${b},${$} ${b},${$} ${b}`;u.addScaleCorrector({"--invert-x":{correct:(n,{treeScale:t,projectionDelta:o})=>o.x.scale*t.x}});const O={display:"flex",flexDirection:"column",alignItems:"center",position:"absolute",width:"100%"};function q(n){const t=e.ref();function o(a){t.value=a==null?void 0:a.$el}e.watch(()=>n.isPresent,a=>{var r;t.value&&((r=u.mountedStates.get(t.value))==null||r.setActive("exit",!a))});function i(a){var r;a.detail.isExit&&!n.isPresent&&((r=n.onRemove)==null||r.call(n,n.partKey,a.target))}return{root:t,getRoot:o,handleComplete:i}}const ae=e.defineComponent({__name:"NumberSymbol",props:{partKey:{},type:{},value:{},isPresent:{type:Boolean},onRemove:{type:Function},style:{},layoutDependency:{},preInitial:{type:Boolean}},setup(n){const t=n,{justify:o}=te(),{getRoot:i,handleComplete:a}=q(t);return(r,y)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(i),layout:"position","layout-dependency":r.layoutDependency,"data-state":r.isPresent?void 0:"exiting",style:e.normalizeStyle({display:"inline-flex",justifyContent:e.unref(o),padding:`calc(${e.unref(b)}/2) 0`,position:"relative",pointerEvents:r.isPresent?void 0:"none"}),"aria-hidden":!r.isPresent,onMotioncomplete:e.unref(a)},{default:e.withCtx(()=>[e.createVNode(e.unref(u.AnimatePresence),{mode:"popLayout","anchor-x":e.unref(o),initial:r.preInitial},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.unref(u.motion).span,{key:r.value,layout:e.unref(o)==="right"?"position":!1,"layout-dependency":r.layoutDependency,initial:{opacity:0,left:e.unref(o)==="right"&&r.preInitial===void 0?"-100%":void 0},animate:{opacity:[null,1],left:0},exit:{opacity:[null,0],transition:{opacity:{duration:.4}}},style:{display:"inline-block",whiteSpace:"pre",position:"relative"}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.value),1)]),_:1},8,["layout","layout-dependency","initial"]))]),_:1},8,["anchor-x","initial"])]),_:1},8,["layout-dependency","data-state","style","aria-hidden","onMotioncomplete"]))}}),re=new WeakMap,ue=e.defineComponent({__name:"NumberDigit",props:{value:{},initialValue:{default:void 0},isPresent:{type:Boolean},partKey:{},onRemove:{},style:{},layoutDependency:{}},setup(n){const t=n,o=t.initialValue??t.value,i=Z(),a=u.useMotionConfig(),r=e.ref(),y=e.ref(Array(10).fill(null)),d=e.ref(),{getRoot:v,handleComplete:w,root:h}=q(t);let s=o;const f=e.ref(o);e.watch([()=>t.value,()=>t.isPresent],([c,k])=>{if(!k)return f.value=0;if(i.current)return e.nextTick(()=>{f.value=c});f.value=c},{immediate:!0});function p(c){var B;if(!r.value||c===s)return;const k=r.value.getBoundingClientRect(),m=(B=h.value)==null?void 0:B.getBoundingClientRect(),l=k.height*(c-s)+(k.top-(m?m.top||0:k.top));u.animate(r.value,{y:[l,0]},a.value.transition)}function x(c){if(i.current&&o===c||!y.value[c])return;const k=L(y.value[c]);h.value&&(re.set(h.value,k),h.value.style.width=k),d.value=k}e.watch(f,c=>{x(c)},{immediate:!0,flush:"sync"}),e.watch(f,async(c,k,m)=>{await e.nextTick(),p(c),m(()=>{s=c})},{immediate:!0,flush:"sync"});function g(c){return()=>e.createVNode("span",{key:c,style:{display:"inline-block",padding:`calc(${b}/2) 0`},ref:k=>{y.value[c]=k}},[c])}return(c,k)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(v),layout:"position","layout-dependency":c.layoutDependency,"data-state":c.isPresent?void 0:"exiting","data-key":c.partKey,style:e.normalizeStyle({display:"inline-flex",justifyContent:"center",width:d.value,pointerEvents:c.isPresent?void 0:"none"}),"aria-hidden":!c.isPresent,onMotioncomplete:e.unref(w)},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"scope",ref:r,style:{display:"inline-flex",justifyContent:"center",flexDirection:"column",alignItems:"center",position:"relative"}},[f.value!==0?(e.openBlock(),e.createElementBlock("span",{key:0,style:e.normalizeStyle({...e.unref(O),bottom:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g(m-1)),{key:m-1}))),128))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g(f.value)))),f.value!==9?(e.openBlock(),e.createElementBlock("span",{key:1,style:e.normalizeStyle({...e.unref(O),top:"100%",left:0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(9-f.value,m=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g(f.value+m)),{key:f.value+m}))),128))],4)):e.createCommentVNode("",!0)],512)]),_:1},8,["layout-dependency","data-state","data-key","style","aria-hidden","onMotioncomplete"]))}}),E=e.defineComponent({__name:"NumberSection",props:{parts:{},justify:{default:"left"},mode:{},name:{},style:{},layoutDependency:{}},setup(n){var h;const t=n,o=e.ref(),i=u.useDomRef(),a=e.ref(),r=Z(),y=e.ref(t.parts);let d=t.name==="pre"&&!((h=t.parts)!=null&&h.length)?void 0:!1;e.watch(()=>t.parts,s=>{const f=new Map(s.map(g=>[g.key,{...g,isPresent:!0}])),p=y.value.filter(g=>!f.get(g.key)).map(g=>({...g,isPresent:!1})),x=s.sort((g,c)=>g.originalIndex-c.originalIndex);y.value=p.concat(x)},{flush:"pre"}),e.watch(()=>{var s;return(s=t.parts)==null?void 0:s.map(f=>f.value).join("")},async(s,f)=>{if(await e.nextTick(),d=!1,!a.value)return;if(r.current){i.value&&(i.value.style.width=L(a.value));return}const p=Array.from(a.value.children).map(g=>{if(g instanceof HTMLElement&&g.dataset.state==="exiting"){const c=g.nextSibling;return g.remove(),()=>{a.value&&a.value.insertBefore(g,c)}}}),x=L(a.value);o.value=x;for(let g=p.length-1;g>=0;g--){const c=p[g];c&&c()}},{flush:"post"});const v=e.toRef(t,"justify");ne({justify:v});function w(s,f){var p;y.value=y.value.filter(x=>x.key!==s),(p=f==null?void 0:f.parentElement)==null||p.removeChild(f)}return(s,f)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{ref:e.unref(i),class:e.normalizeClass(`number-section-${s.name}`),style:e.normalizeStyle({...s.style,display:"inline-flex",justifyContent:v.value,width:o.value}),layout:"position","layout-dependency":s.layoutDependency},{default:e.withCtx(()=>[e.createElementVNode("span",{ref_key:"measuredRef",ref:a,style:{display:"inline-flex",justifyContent:"inherit",position:"relative"}},[f[0]||(f[0]=e.createTextVNode(" ​ ")),e.createVNode(e.unref(u.AnimatePresence),{mode:s.mode,"anchor-x":v.value,initial:!1},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(y.value,p=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:p.key},[p.type==="integer"||p.type==="fraction"?(e.openBlock(),e.createBlock(ue,{key:p.key,"part-key":p.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:p.value,"is-present":p.isPresent??!0,"initial-value":e.unref(r).current?void 0:0,"layout-dependency":s.layoutDependency,onRemove:w},null,8,["part-key","value","is-present","initial-value","layout-dependency"])):(e.openBlock(),e.createBlock(ae,{key:p.type==="literal"?`${p.key}:${p.value}`:p.key,type:p.type,"part-key":p.key,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},value:p.value,"is-present":p.isPresent??!0,"pre-initial":e.unref(d),"layout-dependency":s.layoutDependency,onRemove:w},null,8,["type","part-key","value","is-present","pre-initial","layout-dependency"]))],64))),128))]),_:1},8,["mode","anchor-x"])],512)]),_:1},8,["class","style","layout-dependency"]))}}),se=e.defineComponent({__name:"Mask",props:{layoutDependency:{}},setup(n){return(t,o)=>(e.openBlock(),e.createBlock(e.unref(u.motion).span,{layout:"","layout-dependency":t.layoutDependency,"aria-hidden":!0,style:e.normalizeStyle({display:"inline-flex","--invert-x":1,margin:`0 calc(-1*${e.unref(N)})`,padding:`calc(${e.unref(b)}/2) ${e.unref(N)}`,position:"relative",zIndex:-1,overflow:"clip",webkitMaskImage:e.unref(oe),webkitMaskSize:e.unref(ie),webkitMaskPosition:"center, center, top left, top right, bottom right, bottom left",webkitMaskRepeat:"no-repeat"})},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["layout-dependency","style"]))}}),le=e.defineComponent({name:"AnimateNumber",inheritAttrs:!1,__name:"AnimateNumber",props:{locales:{},format:{},transition:{},suffix:{},prefix:{},value:{},style:{},layoutDependency:{}},setup(n){const t={opacity:{duration:1,ease:u.easeOut},layout:{type:"spring",duration:1,bounce:0},y:{type:"spring",duration:1,bounce:0}},o=n,i=e.computed(()=>{const v=o.value;return ee(v,{locales:o.locales,format:o.format},o.prefix,o.suffix)}),a=u.useMotionConfig(),r=e.computed(()=>o.transition??a.value.transition??t);function y(){const{format:v,prefix:w,suffix:h,locales:s,value:f,layoutDependency:p,...x}=o;return x}const d=e.computed(()=>{if(o.layoutDependency!==void 0)return{layoutDependency:o.layoutDependency,value:o.value}});return(v,w)=>(e.openBlock(),e.createBlock(e.unref(u.LayoutGroup),null,{default:e.withCtx(()=>[e.createVNode(e.unref(u.MotionConfig),{transition:r.value},{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,e.mergeProps({...v.$attrs,...y()},{layout:"","layout-dependency":d.value,style:{lineHeight:"1",...v.style,display:"inline-flex",isolation:"isolate",whiteSpace:"nowrap"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.motion).div,{layout:"","layout-dependency":d.value,"aria-label":i.value.formatted,style:{display:"inline-flex",direction:"ltr",isolation:"isolate",position:"relative",zIndex:-1}},{default:e.withCtx(()=>[e.createVNode(E,{"layout-dependency":d.value,style:e.normalizeStyle({padding:`calc(${e.unref(b)}/2) 0`}),"aria-hidden":!0,justify:"right",mode:"popLayout",parts:i.value.pre,name:"pre"},null,8,["layout-dependency","style","parts"]),e.createVNode(se,{"layout-dependency":d.value},{default:e.withCtx(()=>[e.createVNode(E,{"layout-dependency":d.value,justify:"right",parts:i.value.integer,name:"integer",mode:"popLayout"},null,8,["layout-dependency","parts"]),e.createVNode(E,{"layout-dependency":d.value,layout:"position",parts:i.value.fraction,name:"fraction",mode:"popLayout"},null,8,["layout-dependency","parts"])]),_:1},8,["layout-dependency"]),e.createVNode(E,{"layout-dependency":d.value,style:e.normalizeStyle({padding:`calc(${e.unref(b)}/2) 0`}),"aria-hidden":!0,layout:"position",mode:"popLayout",parts:i.value.post,name:"post"},null,8,["layout-dependency","style","parts"])]),_:1},8,["layout-dependency","aria-label"])]),_:1},16,["layout-dependency","style"])]),_:1},8,["transition"])]),_:1}))}}),ce=le;function de(){const n=document.createElement("style");return n.textContent=`
       * {
           cursor: none !important;
       }
@@ -6,4 +6,4 @@
       [data-motion-cursor="pointer"] {
           background-color: #333;
       }
-    `,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function de(n){e.watch(n,(t,o,i)=>{const r=t?fe():s.noop;return i(()=>{r()})},{immediate:!0,flush:"post"})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let V,_;function pe(){V=s.motionValue(0),_=s.motionValue(0);let n=0,t=0;function o(){V.set(n),_.set(t)}typeof window<"u"&&window.addEventListener("pointermove",R(i=>{n=i.clientX,t=i.clientY,s.frame.update(o)}))}function j(){return V||pe(),{x:V,y:_}}function me(n,t){return{x:s.useTransform(()=>n.x.get()+t.value.x),y:s.useTransform(()=>n.y.get()+t.value.y)}}function ye(n){return n.closest("[data-cursor]")}function ge(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ve(n){return window.getComputedStyle(n).userSelect==="none"?null:n.closest("p, textarea:not(:disabled), input[type='text']:not(:disabled), h1, h2, h3, h4, h5, h6")}function he(n){let t=ye(n);return t?[t.dataset.cursor,t]:(t=ge(n),t?["pointer",t]:(t=ve(n),t?["text",t]:["default",null]))}let M=null,C={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,zone:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-zone]");o instanceof HTMLElement&&(t=o.dataset.cursorZone||null)}return t}function xe(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(f){C={...C,...f},n.forEach(h=>h(C))}const o=F(()=>{C.isPressed||t({isPressed:!0})}),i=F(()=>{C.isPressed&&t({isPressed:!1})}),r=R(({target:f})=>{if(!f)return;const[h,g]=he(f);let v=!1;const u={target:g,zone:we(f)};h!==C.type&&(u.type=h,v=!0),u.zone!==C.zone&&(C.zone=u.zone,v=!0);const l=h==="pointer"&&g?g.getBoundingClientRect():null;if(l!==C.targetBoundingBox&&(u.targetBoundingBox=l,v=!0),h==="text"){const{fontSize:p}=window.getComputedStyle(f),w=p?parseInt(p):null;w!==C.fontSize&&(u.fontSize=w,v=!0)}else C.fontSize&&(u.fontSize=null,v=!0);v&&t(u)});function a(){typeof window>"u"||(window.addEventListener("pointerover",r),window.addEventListener("pointerdown",o),window.addEventListener("pointerup",i))}function d(){window.removeEventListener("pointerover",r),window.removeEventListener("pointerdown",o),window.removeEventListener("pointerup",i)}return{onChange:f=>(n.size||a(),n.add(f),()=>{n.delete(f),n.size||d()})}}function ke(){return M||(M=xe()),M}function A(){const n=e.ref({...C});return e.watch(n,()=>ke().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let T=null;function Be(){const n=new Set;function t(){n.forEach(a=>a.show())}function o(){n.forEach(a=>a.hide())}function i(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",o)}function r(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",o)}return{on:a=>typeof window>"u"?s.noop:(n.size||i(),n.add(a),()=>{n.delete(a),n.size===0&&r()})}}function Ce(){return T||(T=Be()),T}function Q(n){const t=e.ref(!0);return e.watch(t,()=>Ce().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}const H={x:0,y:0},Se={x:.5,y:.5},Pe={duration:0},be={stiffness:1e3,damping:100},$e={duration:.15,ease:[.38,.12,.29,1]},W={magneticOptions:{morph:!0,padding:5,snap:.8}},X=17,Y=31,K=4,ze=20;function I(n,t,o){const i={width:(o==null?void 0:o.width)??n,height:(o==null?void 0:o.height)??t};return typeof i.width=="number"&&(i.width=`${i.width}px`),typeof i.height=="number"&&(i.height=`${i.height}px`),i}function Ee({type:n,state:t,hasChildren:o,style:i,isMagnetic:r,magneticOptions:a,matchTextSize:d}){const f=r&&t.targetBoundingBox;if(o&&!f)return I("auto","auto",i);const{padding:h,morph:g}=a;switch(n){case"pointer":if(r&&g&&t.targetBoundingBox){const{width:v,height:u}=t.targetBoundingBox;return{width:`${v+h*2}px`,height:`${u+h*2}px`}}return I(Y,Y,i);case"text":return d&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:I(K,ze,i);default:return I(X,X,i)}}function Ie({x:n,y:t},o){const i=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(i,()=>{if(i.value)return;const r=()=>{i.value=!0,o(),a()},a=s.pipe(n.on("change",r),t.on("change",r));return()=>a()},{immediate:!0}),i}function Ve(n,t,o){return s.useTransform(()=>s.mix(n.value.get(),t.get(),o.get()))}function G(n,t,o){const i=s.useSpring(0,{stiffness:600,damping:50}),r=s.useMotionValue(0),a=Ve(n,i,r);return e.watch(()=>o==null?void 0:o.value,(d,f)=>{d?(!f&&!r.isAnimating()?i.jump(d):i.set(d),s.animate(r,t.value||0)):s.animate(r,0)},{immediate:!0,flush:"sync"}),a}function Me(n,t,o,i){const r=G(e.computed(()=>n.value.x),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),a=G(e.computed(()=>n.value.y),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return e.computed(()=>t?{x:r,y:a}:n.value)}const Te=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?H:Se},offset:{default:()=>H},spring:{type:[Boolean,Object],default:({follow:n})=>n?be:!1},matchTextSize:{type:Boolean,default:!0},magnetic:{type:[Boolean,Object],default:!1},transition:{},variants:{},style:{},show:{type:Boolean,default:!0}},setup(n){const t=n,{offset:o,magnetic:i}=e.toRefs(t),r=s.useReducedMotion();de(()=>!r.value&&!t.follow);const a=j(),d=me(a,o),f=s.useSpring(d.x,t.spring||void 0),h=s.useSpring(d.y,t.spring||void 0),g=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function v(){const c=d.x.on("change",B=>{f.jump(B),c()}),k=d.y.on("change",B=>{h.jump(B),k()})}const u=A(),l=Q(v),p=Me(e.computed(()=>t.spring?{x:f,y:h}:a),e.computed(()=>!!i.value),u,e.computed(()=>g.value&&g.value.snap)),w=e.useSlots(),P=e.computed(()=>{var B,$;const c=($=(B=w.default)==null?void 0:B.call(w))==null?void 0:$.filter(O=>O.type!==Symbol.for("v-cmt"));return Ee({type:u.value.type,state:u.value,hasChildren:!!(c!=null&&c.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:g.value,matchTextSize:t.matchTextSize})}),y=Ie(a,v);function x(c){return(k,B)=>`translate(-${c.x*100}%, -${c.y*100}%) ${B}`}function m(){const{follow:c,center:k,offset:B,spring:$,matchTextSize:O,magnetic:Ne,...ee}=t;return ee}return(c,k)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(y)?(e.openBlock(),e.createBlock(e.unref(s.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(s.MotionConfig),{transition:e.unref(r)?e.unref(Pe):c.transition||e.unref($e)},{default:e.withCtx(()=>{var B,$;return[e.createVNode(e.unref(s.motion).div,e.mergeProps({layout:"","data-motion-cursor":c.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...c.$attrs,...m()},{variants:{pressed:c.follow?{}:{scale:.9},...c.variants,default:{opacity:1,scale:1,...(B=c.variants)==null?void 0:B.default},exit:{opacity:0,scale:0,...($=c.variants)==null?void 0:$.exit}},animate:["default",e.unref(u).type,e.unref(i)&&e.unref(u).targetBoundingBox?"magnetic":"",!e.unref(l)||!c.show?"exit":e.unref(u).isPressed?"pressed":""],"transform-template":x(c.center),style:{borderRadius:c.follow?0:20,zIndex:c.follow?99998:99999,willChange:"transform",contain:"layout",originX:c.center.x,originY:c.center.y,...c.style,width:P.value.width,height:P.value.height,x:e.unref(p).x,y:e.unref(p).y,top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(s.AnimatePresence),null,{default:e.withCtx(()=>[e.renderSlot(c.$slots,"default")]),_:3})]),_:3},16,["data-motion-cursor","variants","animate","transform-template","style"])]}),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}});function U(n,t,o){const i=s.useMotionValue(0),r=s.useMotionValue(0),a=s.useMotionValue(0);return e.watch(()=>o==null?void 0:o.value,d=>{if(typeof d=="number"){s.animate(a,1);const f=()=>{r.set(t*(n.get()-d))};return f(),n.on("change",f)}else s.animate(a,0)},{immediate:!0,flush:"post"}),s.useTransform(()=>s.mix(i.get(),r.get(),a.get()))}function Le(n,t=.1){const o=A(),i=j(),r=e.computed(()=>o.value.targetBoundingBox&&o.value.target===n.value),a=U(i.x,t,e.computed(()=>r.value?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),d=U(i.y,t,e.computed(()=>r.value?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return{x:a,y:d}}exports.AnimateNumber=ce;exports.Cursor=Te;exports.useCursorIsInView=Q;exports.useCursorState=A;exports.useMagneticPull=Le;exports.usePointerPosition=j;
+    `,document.head.appendChild(n),()=>{document.head.removeChild(n)}}function fe(n){e.watch(n,(t,o,i)=>{const a=t?de():u.noop;return i(()=>{a()})},{immediate:!0,flush:"post"})}function R(n){return t=>{t.pointerType==="mouse"&&n(t)}}function F(n){return R(t=>{t.button===0&&n(t)})}let T,D;function pe(){T=u.motionValue(0),D=u.motionValue(0);let n=0,t=0;function o(){T.set(n),D.set(t)}typeof window<"u"&&window.addEventListener("pointermove",R(i=>{n=i.clientX,t=i.clientY,u.frame.update(o)}))}function _(){return T||pe(),{x:T,y:D}}function ye(n,t){return{x:u.useTransform(()=>n.x.get()+t.value.x),y:u.useTransform(()=>n.y.get()+t.value.y)}}function me(n){return n.closest("[data-cursor]")}function ve(n){return n.closest('a, button, input[type="button"]:not(:disabled)')}function ge(n){return window.getComputedStyle(n).userSelect==="none"?null:n.closest("p, textarea:not(:disabled), input[type='text']:not(:disabled), h1, h2, h3, h4, h5, h6")}function he(n){let t=me(n);return t?[t.dataset.cursor,t]:(t=ve(n),t?["pointer",t]:(t=ge(n),t?["text",t]:["default",null]))}let V=null,S={type:"default",isPressed:!1,fontSize:null,targetBoundingBox:null,target:null,zone:null};function we(n){let t=null;if("closest"in n){const o=n.closest("[data-cursor-zone]");o instanceof HTMLElement&&(t=o.dataset.cursorZone||null)}return t}function xe(){if(typeof window>"u")return{onChange:()=>()=>{}};const n=new Set;function t(d){S={...S,...d},n.forEach(v=>v(S))}const o=F(()=>{S.isPressed||t({isPressed:!0})}),i=F(()=>{S.isPressed&&t({isPressed:!1})}),a=R(({target:d})=>{if(!d)return;const[v,w]=he(d);let h=!1;const s={target:w,zone:we(d)};v!==S.type&&(s.type=v,h=!0),s.zone!==S.zone&&(S.zone=s.zone,h=!0);const f=v==="pointer"&&w?w.getBoundingClientRect():null;if(f!==S.targetBoundingBox&&(s.targetBoundingBox=f,h=!0),v==="text"){const{fontSize:p}=window.getComputedStyle(d),x=p?parseInt(p):null;x!==S.fontSize&&(s.fontSize=x,h=!0)}else S.fontSize&&(s.fontSize=null,h=!0);h&&t(s)});function r(){typeof window>"u"||(window.addEventListener("pointerover",a),window.addEventListener("pointerdown",o),window.addEventListener("pointerup",i))}function y(){window.removeEventListener("pointerover",a),window.removeEventListener("pointerdown",o),window.removeEventListener("pointerup",i)}return{onChange:d=>(n.size||r(),n.add(d),()=>{n.delete(d),n.size||y()})}}function ke(){return V||(V=xe()),V}function j(){const n=e.ref({...S});return e.watch(n,()=>ke().onChange(t=>{n.value=t}),{immediate:!0,flush:"post"}),n}let M=null;function Be(){const n=new Set;function t(){n.forEach(r=>r.show())}function o(){n.forEach(r=>r.hide())}function i(){document.body.addEventListener("mouseenter",t),document.body.addEventListener("mouseleave",o)}function a(){document.body.removeEventListener("mouseenter",t),document.body.removeEventListener("mouseleave",o)}return{on:r=>typeof window>"u"?u.noop:(n.size||i(),n.add(r),()=>{n.delete(r),n.size===0&&a()})}}function Ce(){return M||(M=Be()),M}function J(n){const t=e.ref(!0);return e.watch(t,()=>Ce().on({show:()=>{t.value||(n(),t.value=!0)},hide:()=>t.value=!1}),{immediate:!0}),t}const H={x:0,y:0},Se={x:.5,y:.5},be={duration:0},$e={stiffness:1e3,damping:100},Pe={duration:.15,ease:[.38,.12,.29,1]},W={magneticOptions:{morph:!0,padding:5,snap:.8}},X=17,Y=31,K=4,ze=20;function I(n,t,o){const i={width:(o==null?void 0:o.width)??n,height:(o==null?void 0:o.height)??t};return typeof i.width=="number"&&(i.width=`${i.width}px`),typeof i.height=="number"&&(i.height=`${i.height}px`),i}function Ee({type:n,state:t,hasChildren:o,style:i,isMagnetic:a,magneticOptions:r,matchTextSize:y}){const d=a&&t.targetBoundingBox;if(o&&!d)return I("auto","auto",i);const{padding:v,morph:w}=r;switch(n){case"pointer":if(a&&w&&t.targetBoundingBox){const{width:h,height:s}=t.targetBoundingBox;return{width:`${h+v*2}px`,height:`${s+v*2}px`}}return I(Y,Y,i);case"text":return y&&t.fontSize?{width:`${K}px`,height:`${t.fontSize}px`}:I(K,ze,i);default:return I(X,X,i)}}function Ie({x:n,y:t},o){const i=e.ref(n.prev!==void 0||t.prev!==void 0);return e.watch(i,()=>{if(i.value)return;const a=()=>{i.value=!0,o(),r()},r=u.pipe(n.on("change",a),t.on("change",a));return()=>r()},{immediate:!0}),i}function Te(n,t,o){return u.useTransform(()=>u.mix(n.value.get(),t.get(),o.get()))}function G(n,t,o){const i=u.useSpring(0,{stiffness:600,damping:50}),a=u.useMotionValue(0),r=Te(n,i,a);return e.watch(()=>o==null?void 0:o.value,(y,d)=>{y?(!d&&!a.isAnimating()?i.jump(y):i.set(y),u.animate(a,t.value||0)):u.animate(a,0)},{immediate:!0,flush:"sync"}),r}function Ve(n,t,o,i){const a=G(e.computed(()=>n.value.x),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),r=G(e.computed(()=>n.value.y),i,e.computed(()=>o.value.targetBoundingBox?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return e.computed(()=>t.value?{x:a,y:r}:n.value)}const Me=e.defineComponent({name:"Cursor",inheritAttrs:!1,__name:"Cursor",props:{follow:{type:Boolean,default:!1},center:{default:({follow:n})=>n?H:Se},offset:{default:()=>H},spring:{type:[Boolean,Object],default:({follow:n})=>n?$e:!1},matchTextSize:{type:Boolean,default:!0},magnetic:{type:[Boolean,Object],default:!1},transition:{},variants:{},style:{},show:{type:Boolean,default:!0}},setup(n){const t=n,{offset:o,magnetic:i}=e.toRefs(t),a=u.useReducedMotion();fe(()=>!a.value&&!t.follow);const r=_(),y=ye(r,o),d=u.useSpring(y.x,t.spring||void 0),v=u.useSpring(y.y,t.spring||void 0),w=e.computed(()=>typeof t.magnetic=="object"?{...W.magneticOptions,...t.magnetic}:W.magneticOptions);function h(){const l=y.x.on("change",C=>{d.jump(C),l()}),B=y.y.on("change",C=>{v.jump(C),B()})}const s=j(),f=J(h),p=Ve(e.computed(()=>t.spring?{x:d,y:v}:r),e.computed(()=>!!i.value),s,e.computed(()=>w.value&&w.value.snap)),x=e.useSlots(),g=e.computed(()=>{var C,P;const l=(P=(C=x.default)==null?void 0:C.call(x))==null?void 0:P.filter(A=>A.type!==Symbol.for("v-cmt"));return Ee({type:s.value.type,state:s.value,hasChildren:!!(l!=null&&l.length),isMagnetic:!!t.magnetic,style:t.style,magneticOptions:w.value,matchTextSize:t.matchTextSize})}),c=Ie(r,h);function k(l){return(B,C)=>`translate(-${l.x*100}%, -${l.y*100}%) ${C}`}function m(){const{follow:l,center:B,offset:C,spring:P,matchTextSize:A,magnetic:Ne,...Q}=t;return Q}return(l,B)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.unref(c)?(e.openBlock(),e.createBlock(e.unref(u.LayoutGroup),{key:0},{default:e.withCtx(()=>[e.createVNode(e.unref(u.MotionConfig),{transition:e.unref(a)?e.unref(be):l.transition||e.unref(Pe)},{default:e.withCtx(()=>{var C,P;return[e.createVNode(e.unref(u.motion).div,e.mergeProps({layout:"","data-motion-cursor":l.follow?"follow":"pointer","data-framer-portal-id":"motion-cursor",initial:"exit",exit:"exit"},{...l.$attrs,...m()},{variants:{pressed:l.follow?{}:{scale:.9},...l.variants,default:{opacity:1,scale:1,...(C=l.variants)==null?void 0:C.default},exit:{opacity:0,scale:0,...(P=l.variants)==null?void 0:P.exit}},animate:["default",e.unref(s).type,e.unref(i)&&e.unref(s).targetBoundingBox?"magnetic":"",!e.unref(f)||!l.show?"exit":e.unref(s).isPressed?"pressed":""],"transform-template":k(l.center),style:{borderRadius:l.follow?0:20,zIndex:l.follow?99998:99999,willChange:"transform",contain:"layout",originX:l.center.x,originY:l.center.y,...l.style,width:g.value.width,height:g.value.height,x:e.unref(p).x,y:e.unref(p).y,top:0,left:0,position:"fixed",pointerEvents:"none"}}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.AnimatePresence),null,{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3})]),_:3},16,["data-motion-cursor","variants","animate","transform-template","style"])]}),_:3},8,["transition"])]),_:3})):e.createCommentVNode("",!0)]))}});function U(n,t,o){const i=u.useMotionValue(0),a=u.useMotionValue(0),r=u.useMotionValue(0);return e.watch(()=>o==null?void 0:o.value,y=>{if(typeof y=="number"){u.animate(r,1);const d=()=>{a.set(t*(n.get()-y))};return d(),n.on("change",d)}else u.animate(r,0)},{immediate:!0,flush:"post"}),u.useTransform(()=>u.mix(i.get(),a.get(),r.get()))}function Le(n,t=.1){const o=j(),i=_(),a=e.computed(()=>o.value.targetBoundingBox&&o.value.target===n.value),r=U(i.x,t,e.computed(()=>a.value?o.value.targetBoundingBox.left+o.value.targetBoundingBox.width/2:void 0)),y=U(i.y,t,e.computed(()=>a.value?o.value.targetBoundingBox.top+o.value.targetBoundingBox.height/2:void 0));return{x:r,y}}exports.AnimateNumber=ce;exports.Cursor=Me;exports.useCursorIsInView=J;exports.useCursorState=j;exports.useMagneticPull=Le;exports.usePointerPosition=_;

package/dist/components/AnimateNumber/AnimateNumber.d.ts

@@ -1,15 +1,15 @@
-import { MotionConfigProps } from './types';
 import { MotionProps } from 'motion-v';
 export interface AnimateNumberProps {
     locales?: Intl.LocalesArgument;
     format?: Omit<Intl.NumberFormatOptions, 'notation'> & {
         notation?: Exclude<Intl.NumberFormatOptions['notation'], 'scientific' | 'engineering'>;
     };
-    transition?: MotionConfigProps['transition'];
+    transition?: MotionProps['transition'];
     suffix?: string;
     prefix?: string;
     value?: number | bigint | string;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 declare const _default: import('vue').DefineComponent<AnimateNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimateNumberProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/AnimateNumber/Mask.d.ts

@@ -1,18 +1,21 @@
-import { motion } from 'motion-v';
+import { MotionProps, motion } from 'motion-v';
 import { mask, maskHeight, maskSize, maskWidth } from './config';
+type __VLS_Props = {
+    layoutDependency?: MotionProps['layoutDependency'];
+};
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_6: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_6) => any;
 }>;
-declare const __VLS_self: import('vue').DefineComponent<{}, {
+declare const __VLS_self: import('vue').DefineComponent<__VLS_Props, {
     motion: typeof motion;
     mask: typeof mask;
     maskHeight: typeof maskHeight;
     maskSize: typeof maskSize;
     maskWidth: typeof maskWidth;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/AnimateNumber/NumberSection.d.ts

@@ -8,6 +8,7 @@ export interface AnimateNumberProps {
     mode?: AnimatePresenceProps['mode'];
     name?: string;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 declare const _default: import('vue').DefineComponent<AnimateNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimateNumberProps> & Readonly<{}>, {
     justify: Justify;

package/dist/components/AnimateNumber/NumberSymbol.d.ts

@@ -1,3 +1,6 @@
 import { AnimateSymbolProps } from './types';
-declare const _default: import('vue').DefineComponent<AnimateSymbolProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<AnimateSymbolProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+type __VLS_Props = AnimateSymbolProps & {
+    preInitial?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/AnimateNumber/types.d.ts

@@ -5,16 +5,18 @@ export interface NumberDigitProps {
     initialValue?: number;
     isPresent?: boolean;
     partKey?: string;
-    onRemove?: (partKey: string) => void;
+    onRemove?: (partKey: string, target: HTMLElement) => void;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 export interface AnimateSymbolProps {
     partKey: string;
     type: string;
     value: string;
     isPresent: boolean;
-    onRemove: (partKey: string) => void;
+    onRemove?: (partKey: string, target: HTMLElement) => void;
     style?: MotionProps['style'];
+    layoutDependency?: MotionProps['layoutDependency'];
 }
 export type Justify = 'left' | 'right';
 export type NumberPartType = Exclude<Intl.NumberFormatPartTypes, 'minusSign' | 'plusSign'> | 'sign' | 'prefix' | 'suffix';
@@ -34,6 +36,7 @@ export type SymbolPart = {
 export type NumberPart = (DigitPart | SymbolPart) & PartSort;
 export type PartSort = {
     originalIndex?: number;
+    isPresent?: boolean;
 };
 export type KeyedPart = {
     key: string;

package/dist/components/Cursor/Cursor.d.ts

@@ -15,13 +15,13 @@ export interface CursorProps extends HTMMotionProps {
     show?: boolean;
 }
 declare const magnetic: import('vue').Ref<boolean | Partial<MagneticOptions>, boolean | Partial<MagneticOptions>>;
-declare const shouldReduceMotion: import('vue').Ref<boolean, boolean>;
+declare const shouldReduceMotion: import('@vue/reactivity').Ref<boolean>;
 declare const state: import('vue').Ref<import('./hooks/use-cursor-state/types').CursorState, import('./hooks/use-cursor-state/types').CursorState>;
 declare const isInView: import('vue').Ref<boolean, boolean>;
 declare const pointer: import('vue').ComputedRef<import('./hooks/use-offset').MotionPoint>;
 declare const size: import('vue').ComputedRef<{
-    width: number | string | import('motion-v/es').MotionValue<any>;
-    height: number | string | import('motion-v/es').MotionValue<any>;
+    width: number | string | import('motion-v').MotionValue<any>;
+    height: number | string | import('motion-v').MotionValue<any>;
 }>;
 declare const pointerHasMoved: import('vue').Ref<boolean, boolean>;
 declare function positionTransform(origin: Point): (_: any, generated: string) => string;

package/dist/es/components/AnimateNumber/AnimateNumber.vue.mjs

@@ -1,10 +1,10 @@
-import { defineComponent as v, computed as l, createBlock as h, openBlock as x, unref as o, withCtx as r, createVNode as t, mergeProps as b, normalizeStyle as s } from "vue";
+import { defineComponent as h, computed as u, createBlock as x, openBlock as b, unref as n, withCtx as i, createVNode as t, mergeProps as D, normalizeStyle as p } from "vue";
 import { formatToParts as L } from "./utils/format-parts.mjs";
-import { useMotionConfig as A, easeOut as C, LayoutGroup as N, MotionConfig as $, motion as u } from "motion-v";
-import n from "./NumberSection.vue.mjs";
-import { maskHeight as p } from "./config.mjs";
+import { useMotionConfig as A, easeOut as C, LayoutGroup as N, MotionConfig as $, motion as s } from "motion-v";
+import r from "./NumberSection.vue.mjs";
+import { maskHeight as d } from "./config.mjs";
 import T from "./Mask.vue.mjs";
-const O = /* @__PURE__ */ v({
+const P = /* @__PURE__ */ h({
   name: "AnimateNumber",
   inheritAttrs: !1,
   __name: "AnimateNumber",
@@ -15,42 +15,49 @@ const O = /* @__PURE__ */ v({
     suffix: {},
     prefix: {},
     value: {},
-    style: {}
+    style: {},
+    layoutDependency: {}
   },
-  setup(f) {
-    const m = {
+  setup(y) {
+    const c = {
       opacity: { duration: 1, ease: C },
       layout: { type: "spring", duration: 1, bounce: 0 },
       y: { type: "spring", duration: 1, bounce: 0 }
-    }, e = f, a = l(() => {
-      const i = e.value;
-      return L(i, { locales: e.locales, format: e.format }, e.prefix, e.suffix);
-    }), c = A(), d = l(() => e.transition ?? c.value.transition ?? m);
-    function y() {
-      const { format: i, prefix: g, suffix: k, locales: w, value: I, ..._ } = e;
+    }, e = y, o = u(() => {
+      const l = e.value;
+      return L(l, { locales: e.locales, format: e.format }, e.prefix, e.suffix);
+    }), f = A(), m = u(() => e.transition ?? f.value.transition ?? c);
+    function v() {
+      const { format: l, prefix: g, suffix: k, locales: w, value: I, layoutDependency: S, ..._ } = e;
       return _;
     }
-    return (i, g) => (x(), h(o(N), null, {
-      default: r(() => [
-        t(o($), { transition: d.value }, {
-          default: r(() => [
-            t(o(u).div, b({
-              ...i.$attrs,
-              ...y()
+    const a = u(() => {
+      if (e.layoutDependency !== void 0)
+        return { layoutDependency: e.layoutDependency, value: e.value };
+    });
+    return (l, g) => (b(), x(n(N), null, {
+      default: i(() => [
+        t(n($), { transition: m.value }, {
+          default: i(() => [
+            t(n(s).div, D({
+              ...l.$attrs,
+              ...v()
             }, {
               layout: "",
+              "layout-dependency": a.value,
               style: {
                 lineHeight: "1",
-                ...i.style,
+                ...l.style,
                 display: "inline-flex",
                 isolation: "isolate",
                 whiteSpace: "nowrap"
               }
             }), {
-              default: r(() => [
-                t(o(u).div, {
+              default: i(() => [
+                t(n(s).div, {
                   layout: "",
-                  "aria-label": a.value.formatted,
+                  "layout-dependency": a.value,
+                  "aria-label": o.value.formatted,
                   style: {
                     display: "inline-flex",
                     direction: "ltr",
@@ -59,46 +66,50 @@ const O = /* @__PURE__ */ v({
                     zIndex: -1
                   }
                 }, {
-                  default: r(() => [
-                    t(n, {
-                      style: s({ padding: `calc(${o(p)}/2) 0` }),
+                  default: i(() => [
+                    t(r, {
+                      "layout-dependency": a.value,
+                      style: p({ padding: `calc(${n(d)}/2) 0` }),
                       "aria-hidden": !0,
                       justify: "right",
                       mode: "popLayout",
-                      parts: a.value.pre,
+                      parts: o.value.pre,
                       name: "pre"
-                    }, null, 8, ["style", "parts"]),
-                    t(T, null, {
-                      default: r(() => [
-                        t(n, {
+                    }, null, 8, ["layout-dependency", "style", "parts"]),
+                    t(T, { "layout-dependency": a.value }, {
+                      default: i(() => [
+                        t(r, {
+                          "layout-dependency": a.value,
                           justify: "right",
-                          parts: a.value.integer,
+                          parts: o.value.integer,
                           name: "integer",
                           mode: "popLayout"
-                        }, null, 8, ["parts"]),
-                        t(n, {
+                        }, null, 8, ["layout-dependency", "parts"]),
+                        t(r, {
+                          "layout-dependency": a.value,
                           layout: "position",
-                          parts: a.value.fraction,
+                          parts: o.value.fraction,
                           name: "fraction",
                           mode: "popLayout"
-                        }, null, 8, ["parts"])
+                        }, null, 8, ["layout-dependency", "parts"])
                       ]),
                       _: 1
-                    }),
-                    t(n, {
-                      style: s({ padding: `calc(${o(p)}/2) 0` }),
+                    }, 8, ["layout-dependency"]),
+                    t(r, {
+                      "layout-dependency": a.value,
+                      style: p({ padding: `calc(${n(d)}/2) 0` }),
                       "aria-hidden": !0,
                       layout: "position",
                       mode: "popLayout",
-                      parts: a.value.post,
+                      parts: o.value.post,
                       name: "post"
-                    }, null, 8, ["style", "parts"])
+                    }, null, 8, ["layout-dependency", "style", "parts"])
                   ]),
                   _: 1
-                }, 8, ["aria-label"])
+                }, 8, ["layout-dependency", "aria-label"])
               ]),
               _: 1
-            }, 16, ["style"])
+            }, 16, ["layout-dependency", "style"])
           ]),
           _: 1
         }, 8, ["transition"])
@@ -108,5 +119,5 @@ const O = /* @__PURE__ */ v({
   }
 });
 export {
-  O as default
+  P as default
 };

package/dist/es/components/AnimateNumber/Mask.vue.mjs

@@ -1,33 +1,37 @@
-import { defineComponent as i, createBlock as a, openBlock as r, unref as e, normalizeStyle as n, withCtx as l, renderSlot as s } from "vue";
-import { motion as m } from "motion-v";
-import { maskSize as p, mask as k, maskHeight as c, maskWidth as t } from "./config.mjs";
-const b = /* @__PURE__ */ i({
+import { defineComponent as a, createBlock as n, openBlock as i, unref as e, normalizeStyle as r, withCtx as l, renderSlot as p } from "vue";
+import { motion as s } from "motion-v";
+import { maskSize as m, mask as d, maskHeight as c, maskWidth as o } from "./config.mjs";
+const _ = /* @__PURE__ */ a({
   __name: "Mask",
-  setup(f) {
-    return (o, d) => (r(), a(e(m).span, {
+  props: {
+    layoutDependency: {}
+  },
+  setup(k) {
+    return (t, f) => (i(), n(e(s).span, {
       layout: "",
+      "layout-dependency": t.layoutDependency,
       "aria-hidden": !0,
-      style: n({
+      style: r({
         display: "inline-flex",
         "--invert-x": 1,
-        margin: `0 calc(-1*${e(t)})`,
-        padding: `calc(${e(c)}/2) ${e(t)}`,
+        margin: `0 calc(-1*${e(o)})`,
+        padding: `calc(${e(c)}/2) ${e(o)}`,
         position: "relative",
         zIndex: -1,
         overflow: "clip",
-        webkitMaskImage: e(k),
-        webkitMaskSize: e(p),
+        webkitMaskImage: e(d),
+        webkitMaskSize: e(m),
         webkitMaskPosition: "center, center, top left, top right, bottom right, bottom left",
         webkitMaskRepeat: "no-repeat"
       })
     }, {
       default: l(() => [
-        s(o.$slots, "default")
+        p(t.$slots, "default")
       ]),
       _: 3
-    }, 8, ["style"]));
+    }, 8, ["layout-dependency", "style"]));
   }
 });
 export {
-  b as default
+  _ as default
 };

package/dist/es/components/AnimateNumber/NumberDigit.vue.mjs

@@ -1,11 +1,11 @@
-import { defineComponent as M, ref as u, watch as y, nextTick as W, createBlock as s, openBlock as o, unref as a, normalizeStyle as v, withCtx as j, createElementVNode as A, createElementBlock as m, createCommentVNode as R, Fragment as V, renderList as b, resolveDynamicComponent as g, createVNode as F } from "vue";
+import { defineComponent as _, ref as s, watch as v, nextTick as B, createBlock as c, openBlock as o, unref as l, normalizeStyle as g, withCtx as j, createElementVNode as A, createElementBlock as d, createCommentVNode as R, Fragment as V, renderList as b, resolveDynamicComponent as h, createVNode as F } from "vue";
 import { useMotionConfig as K, motion as S, animate as T } from "motion-v";
 import { useIsInitialRender as z } from "./hooks/use-is-initial-render.mjs";
-import { digitFillStyle as x, maskHeight as H } from "./config.mjs";
+import { digitFillStyle as D, maskHeight as H } from "./config.mjs";
 import { useAnimate as L } from "./use-animate.mjs";
 import { getWidthInEm as Y } from "./utils/get-width-in-ems.mjs";
 import { targetWidths as $ } from "./utils/target-widths.mjs";
-const Z = /* @__PURE__ */ M({
+const Z = /* @__PURE__ */ _({
   __name: "NumberDigit",
   props: {
     value: {},
@@ -17,79 +17,84 @@ const Z = /* @__PURE__ */ M({
     },
     partKey: {},
     onRemove: {},
-    style: {}
+    style: {},
+    layoutDependency: {}
   },
-  setup(w) {
-    const r = w, c = r.initialValue ?? r.value, h = z(), I = K(), l = u(), k = u(Array(10).fill(null)), C = u(), {
+  setup(x) {
+    const a = x, m = a.initialValue ?? a.value, k = z(), I = K(), r = s(), p = s(Array(10).fill(null)), C = s(), {
       getRoot: N,
       handleComplete: P,
-      root: p
-    } = L(r);
-    let d = c;
-    const t = u(c);
-    y([() => r.value, () => r.isPresent], ([e, n]) => {
-      if (!n)
-        return t.value = 0;
-      if (h.current)
-        return W(() => {
-          t.value = e;
+      root: u
+    } = L(a);
+    let f = m;
+    const n = s(m);
+    v([() => a.value, () => a.isPresent], ([e, t]) => {
+      if (!t)
+        return n.value = 0;
+      if (k.current)
+        return B(() => {
+          n.value = e;
         });
-      t.value = e;
+      n.value = e;
     }, {
       immediate: !0
     });
-    function D(e) {
-      var B;
-      if (!l.value || e === d) return;
-      const n = l.value.getBoundingClientRect(), i = (B = p.value) == null ? void 0 : B.getBoundingClientRect(), _ = n.height * (e - d) + (n.top - (i ? i.top || 0 : n.top));
-      T(l.value, {
-        y: [_, 0]
+    function E(e) {
+      var w;
+      if (!r.value || e === f) return;
+      const t = r.value.getBoundingClientRect(), i = (w = u.value) == null ? void 0 : w.getBoundingClientRect(), W = t.height * (e - f) + (t.top - (i ? i.top || 0 : t.top));
+      T(r.value, {
+        y: [W, 0]
       }, I.value.transition);
     }
-    function E(e) {
-      if (h.current && c === e || !k.value[e]) return;
-      const n = Y(k.value[e]);
-      p.value && $.set(p.value, n), C.value = n;
+    function M(e) {
+      if (k.current && m === e || !p.value[e]) return;
+      const t = Y(p.value[e]);
+      u.value && ($.set(u.value, t), u.value.style.width = t), C.value = t;
     }
-    y(t, (e) => {
-      E(e);
+    v(n, (e) => {
+      M(e);
     }, {
       immediate: !0,
-      flush: "post"
-    }), y(t, (e, n, i) => {
-      D(e), i(() => {
-        d = e;
+      flush: "sync"
+    }), v(n, async (e, t, i) => {
+      await B(), E(e), i(() => {
+        f = e;
       });
     }, {
       immediate: !0,
-      flush: "pre"
+      flush: "sync"
     });
-    function f(e) {
+    function y(e) {
       return () => F("span", {
         key: e,
         style: {
           display: "inline-block",
           padding: `calc(${H}/2) 0`
+        },
+        ref: (t) => {
+          p.value[e] = t;
         }
       }, [e]);
     }
-    return (e, n) => (o(), s(a(S).span, {
-      ref: a(N),
+    return (e, t) => (o(), c(l(S).span, {
+      ref: l(N),
       layout: "position",
+      "layout-dependency": e.layoutDependency,
       "data-state": e.isPresent ? void 0 : "exiting",
       "data-key": e.partKey,
-      style: v({
+      style: g({
         display: "inline-flex",
         justifyContent: "center",
         width: C.value,
         pointerEvents: e.isPresent ? void 0 : "none"
       }),
       "aria-hidden": !e.isPresent,
-      onMotioncomplete: a(P)
+      onMotioncomplete: l(P)
     }, {
       default: j(() => [A("span", {
         ref_key: "scope",
-        ref: l,
+        ref: r,
         style: {
           display: "inline-flex",
           justifyContent: "center",
@@ -97,27 +102,27 @@ const Z = /* @__PURE__ */ M({
           alignItems: "center",
           position: "relative"
         }
-      }, [t.value !== 0 ? (o(), m("span", {
+      }, [n.value !== 0 ? (o(), d("span", {
         key: 0,
-        style: v({
-          ...a(x),
+        style: g({
+          ...l(D),
           bottom: "100%",
           left: 0
         })
-      }, [(o(!0), m(V, null, b(t.value, (i) => (o(), s(g(f(i - 1)), {
+      }, [(o(!0), d(V, null, b(n.value, (i) => (o(), c(h(y(i - 1)), {
         key: i - 1
-      }))), 128))], 4)) : R("", !0), (o(), s(g(f(t.value)))), t.value !== 9 ? (o(), m("span", {
+      }))), 128))], 4)) : R("", !0), (o(), c(h(y(n.value)))), n.value !== 9 ? (o(), d("span", {
         key: 1,
-        style: v({
-          ...a(x),
+        style: g({
+          ...l(D),
           top: "100%",
           left: 0
         })
-      }, [(o(!0), m(V, null, b(9 - t.value, (i) => (o(), s(g(f(t.value + i)), {
-        key: t.value + i
+      }, [(o(!0), d(V, null, b(9 - n.value, (i) => (o(), c(h(y(n.value + i)), {
+        key: n.value + i
       }))), 128))], 4)) : R("", !0)], 512)]),
       _: 1
-    }, 8, ["data-state", "data-key", "style", "aria-hidden", "onMotioncomplete"]));
+    }, 8, ["layout-dependency", "data-state", "data-key", "style", "aria-hidden", "onMotioncomplete"]));
   }
 });
 export {

package/dist/es/components/AnimateNumber/NumberSection.vue.mjs

@@ -1,121 +1,117 @@
-import { defineComponent as j, ref as k, watch as x, toRef as C, createBlock as p, openBlock as u, unref as f, normalizeStyle as W, normalizeClass as $, withCtx as g, createElementVNode as B, createTextVNode as E, createVNode as N, createElementBlock as h, Fragment as P, renderList as S } from "vue";
-import { useDomRef as M, motion as V, AnimatePresence as z, frame as A } from "motion-v";
-import { injectSectionContext as L } from "./context.mjs";
-import { useIsInitialRender as T } from "./hooks/use-is-initial-render.mjs";
-import { getWidthInEm as w } from "./utils/get-width-in-ems.mjs";
-import D from "./NumberSymbol.vue.mjs";
+import { defineComponent as I, ref as c, watch as g, nextTick as D, toRef as E, createBlock as m, openBlock as u, unref as y, normalizeStyle as _, normalizeClass as $, withCtx as R, createElementVNode as B, createTextVNode as N, createVNode as S, createElementBlock as w, Fragment as P, renderList as b } from "vue";
+import { useDomRef as M, motion as T, AnimatePresence as V } from "motion-v";
+import { injectSectionContext as z } from "./context.mjs";
+import { useIsInitialRender as A } from "./hooks/use-is-initial-render.mjs";
+import { getWidthInEm as j } from "./utils/get-width-in-ems.mjs";
+import L from "./NumberSymbol.vue.mjs";
 import F from "./NumberDigit.vue.mjs";
-import { targetWidths as H } from "./utils/target-widths.mjs";
-const Y = /* @__PURE__ */ j({
+const Q = /* @__PURE__ */ I({
   __name: "NumberSection",
   props: {
     parts: {},
     justify: { default: "left" },
     mode: {},
     name: {},
-    style: {}
+    style: {},
+    layoutDependency: {}
   },
-  setup(I) {
-    const m = I, d = k(), y = M(), s = k(), c = T();
-    x(() => m.parts, (i) => {
-      const r = new Map(i.map((n) => [n.key, { ...n, isPresent: !0 }]));
-      a = [...a.filter((n) => !r.get(n.key)).map(
-        (n) => ({ ...n, isPresent: !1 })
-      ), ...i].sort((n, e) => o.value === "right" ? n.isPresent === e.isPresent ? n.originalIndex - e.originalIndex : n.isPresent ? -1 : 1 : o.value === "left" ? n.isPresent === e.isPresent ? n.originalIndex - e.originalIndex : n.isPresent ? 1 : -1 : n.originalIndex - e.originalIndex);
-    }, { flush: "pre" }), x(() => m.parts.map((i) => i.value).join(""), (i, r) => {
-      if (!s.value)
+  setup(C) {
+    var x;
+    const o = C, d = c(), p = M(), a = c(), v = A(), l = c(o.parts);
+    let k = o.name === "pre" && !((x = o.parts) != null && x.length) ? void 0 : !1;
+    g(() => o.parts, (n) => {
+      const i = new Map(n.map((t) => [t.key, { ...t, isPresent: !0 }])), e = l.value.filter((t) => !i.get(t.key)).map(
+        (t) => ({ ...t, isPresent: !1 })
+      ), s = n.sort((t, r) => t.originalIndex - r.originalIndex);
+      l.value = e.concat(s);
+    }, { flush: "pre" }), g(() => {
+      var n;
+      return (n = o.parts) == null ? void 0 : n.map((i) => i.value).join("");
+    }, async (n, i) => {
+      if (await D(), k = !1, !a.value)
         return;
-      if (c.current) {
-        y.value && (y.value.style.width = w(s.value));
+      if (v.current) {
+        p.value && (p.value.style.width = j(a.value));
         return;
       }
-      const t = Array.from(s.value.children).map((e) => {
-        if (!(e instanceof HTMLElement))
-          return;
-        if (e.dataset.state === "exiting") {
-          const _ = e.nextSibling;
-          return e.remove(), () => {
-            s.value && s.value.insertBefore(e, _);
+      const e = Array.from(a.value.children).map((t) => {
+        if (t instanceof HTMLElement && t.dataset.state === "exiting") {
+          const r = t.nextSibling;
+          return t.remove(), () => {
+            a.value && a.value.insertBefore(t, r);
           };
         }
-        const l = H.get(e);
-        if (!l)
-          return;
-        const R = e.style.width;
-        return e.style.width = l, () => {
-          e.style.width = R;
-        };
-      });
-      function n() {
-        const e = w(s.value);
-        d.value = e;
+      }), s = j(a.value);
+      d.value = s;
+      for (let t = e.length - 1; t >= 0; t--) {
+        const r = e[t];
+        r && r();
       }
-      +i > +(r || 0) ? A.read(n) : n();
-      for (let e = t.length - 1; e >= 0; e--) {
-        const l = t[e];
-        l && l();
-      }
-    }, { immediate: !0, flush: "post" });
-    const o = C(m, "justify");
-    L({
-      justify: o
+    }, { flush: "post" });
+    const f = E(o, "justify");
+    z({
+      justify: f
     });
-    let a = m.parts;
-    function v(i) {
-      a = a.filter((r) => r.key !== i);
+    function h(n, i) {
+      var e;
+      l.value = l.value.filter((s) => s.key !== n), (e = i == null ? void 0 : i.parentElement) == null || e.removeChild(i);
     }
-    return (i, r) => (u(), p(f(V).span, {
-      ref: f(y),
-      class: $(`number-section-${i.name}`),
-      style: W({
-        ...i.style,
+    return (n, i) => (u(), m(y(T).span, {
+      ref: y(p),
+      class: $(`number-section-${n.name}`),
+      style: _({
+        ...n.style,
         display: "inline-flex",
-        justifyContent: o.value,
+        justifyContent: f.value,
         width: d.value
       }),
-      layout: "position"
+      layout: "position",
+      "layout-dependency": n.layoutDependency
     }, {
-      default: g(() => [
+      default: R(() => [
         B("span", {
           ref_key: "measuredRef",
-          ref: s,
+          ref: a,
           style: {
             display: "inline-flex",
             justifyContent: "inherit",
             position: "relative"
           }
         }, [
-          r[0] || (r[0] = E(" ​ ")),
-          N(f(z), {
-            mode: i.mode,
-            "anchor-x": o.value,
+          i[0] || (i[0] = N(" ​ ")),
+          S(y(V), {
+            mode: n.mode,
+            "anchor-x": f.value,
             initial: !1
           }, {
-            default: g(() => [
-              (u(!0), h(P, null, S(f(a), (t) => (u(), h(P, {
-                key: t.key
+            default: R(() => [
+              (u(!0), w(P, null, b(l.value, (e) => (u(), w(P, {
+                key: e.key
               }, [
-                t.type === "integer" || t.type === "fraction" ? (u(), p(F, {
-                  key: t.key,
-                  "part-key": t.key,
+                e.type === "integer" || e.type === "fraction" ? (u(), m(F, {
+                  key: e.key,
+                  "part-key": e.key,
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
                   exit: { opacity: 0 },
-                  value: t.value,
-                  "is-present": t.isPresent ?? !0,
-                  "initial-value": f(c).current ? void 0 : 0,
-                  onRemove: v
-                }, null, 8, ["part-key", "value", "is-present", "initial-value"])) : (u(), p(D, {
-                  key: t.type === "literal" ? `${t.key}:${t.value}` : t.key,
-                  type: t.type,
-                  "part-key": t.key,
+                  value: e.value,
+                  "is-present": e.isPresent ?? !0,
+                  "initial-value": y(v).current ? void 0 : 0,
+                  "layout-dependency": n.layoutDependency,
+                  onRemove: h
+                }, null, 8, ["part-key", "value", "is-present", "initial-value", "layout-dependency"])) : (u(), m(L, {
+                  key: e.type === "literal" ? `${e.key}:${e.value}` : e.key,
+                  type: e.type,
+                  "part-key": e.key,
                   initial: { opacity: 0 },
                   animate: { opacity: 1 },
                   exit: { opacity: 0 },
-                  value: t.value,
-                  "is-present": t.isPresent ?? !0,
-                  onRemove: v
-                }, null, 8, ["type", "part-key", "value", "is-present"]))
+                  value: e.value,
+                  "is-present": e.isPresent ?? !0,
+                  "pre-initial": y(k),
+                  "layout-dependency": n.layoutDependency,
+                  onRemove: h
+                }, null, 8, ["type", "part-key", "value", "is-present", "pre-initial", "layout-dependency"]))
               ], 64))), 128))
             ]),
             _: 1
@@ -123,9 +119,9 @@ const Y = /* @__PURE__ */ j({
         ], 512)
       ]),
       _: 1
-    }, 8, ["class", "style"]));
+    }, 8, ["class", "style", "layout-dependency"]));
   }
 });
 export {
-  Y as default
+  Q as default
 };

package/dist/es/components/AnimateNumber/NumberSymbol.vue.mjs

@@ -1,9 +1,9 @@
-import { defineComponent as u, createBlock as n, openBlock as a, unref as e, normalizeStyle as d, withCtx as i, createVNode as y, createTextVNode as c, toDisplayString as f } from "vue";
-import { motion as r, AnimatePresence as h } from "motion-v";
+import { defineComponent as d, createBlock as i, openBlock as a, unref as e, normalizeStyle as u, withCtx as n, createVNode as c, createTextVNode as m, toDisplayString as f } from "vue";
+import { motion as l, AnimatePresence as h } from "motion-v";
 import { maskHeight as v } from "./config.mjs";
 import { useSectionContext as g } from "./context.mjs";
 import { useAnimate as k } from "./use-animate.mjs";
-const B = /* @__PURE__ */ u({
+const I = /* @__PURE__ */ d({
   __name: "NumberSymbol",
   props: {
     partKey: {},
@@ -11,15 +11,18 @@ const B = /* @__PURE__ */ u({
     value: {},
     isPresent: { type: Boolean },
     onRemove: { type: Function },
-    style: {}
+    style: {},
+    layoutDependency: {},
+    preInitial: { type: Boolean }
   },
-  setup(s) {
-    const l = s, { justify: o } = g(), { getRoot: p, handleComplete: m } = k(l);
-    return (t, x) => (a(), n(e(r).span, {
-      ref: e(p),
+  setup(p) {
+    const r = p, { justify: o } = g(), { getRoot: s, handleComplete: y } = k(r);
+    return (t, C) => (a(), i(e(l).span, {
+      ref: e(s),
       layout: "position",
+      "layout-dependency": t.layoutDependency,
       "data-state": t.isPresent ? void 0 : "exiting",
-      style: d({
+      style: u({
         display: "inline-flex",
         justifyContent: e(o),
         padding: `calc(${e(v)}/2) 0`,
@@ -27,47 +30,46 @@ const B = /* @__PURE__ */ u({
         pointerEvents: t.isPresent ? void 0 : "none"
       }),
       "aria-hidden": !t.isPresent,
-      onMotioncomplete: e(m)
+      onMotioncomplete: e(y)
     }, {
-      default: i(() => [
-        y(e(h), {
+      default: n(() => [
+        c(e(h), {
           mode: "popLayout",
           "anchor-x": e(o),
-          initial: !1
+          initial: t.preInitial
         }, {
-          default: i(() => [
-            (a(), n(e(r).span, {
+          default: n(() => [
+            (a(), i(e(l).span, {
               key: t.value,
               layout: e(o) === "right" ? "position" : !1,
-              initial: { opacity: 0 },
-              animate: { opacity: [null, 1] },
+              "layout-dependency": t.layoutDependency,
+              initial: { opacity: 0, left: e(o) === "right" && t.preInitial === void 0 ? "-100%" : void 0 },
+              animate: { opacity: [null, 1], left: 0 },
               exit: {
                 opacity: [null, 0],
                 transition: {
-                  duration: 0.3
+                  opacity: { duration: 0.4 }
                 }
               },
               style: {
                 display: "inline-block",
-                whiteSpace: "pre"
-              },
-              transition: {
-                duration: 0.2
+                whiteSpace: "pre",
+                position: "relative"
               }
             }, {
-              default: i(() => [
-                c(f(t.value), 1)
+              default: n(() => [
+                m(f(t.value), 1)
               ]),
               _: 1
-            }, 8, ["layout"]))
+            }, 8, ["layout", "layout-dependency", "initial"]))
           ]),
           _: 1
-        }, 8, ["anchor-x"])
+        }, 8, ["anchor-x", "initial"])
       ]),
       _: 1
-    }, 8, ["data-state", "style", "aria-hidden", "onMotioncomplete"]));
+    }, 8, ["layout-dependency", "data-state", "style", "aria-hidden", "onMotioncomplete"]));
   }
 });
 export {
-  B as default
+  I as default
 };

package/dist/es/components/AnimateNumber/use-animate.mjs

@@ -2,21 +2,21 @@ import { mountedStates as u } from "motion-v";
 import { ref as f, watch as m } from "vue";
 function v(e) {
   const n = f();
-  function o(t) {
+  function a(t) {
     n.value = t == null ? void 0 : t.$el;
   }
   m(() => e.isPresent, (t) => {
     var i;
     n.value && ((i = u.get(n.value)) == null || i.setActive("exit", !t));
   });
-  function a(t) {
+  function o(t) {
     var i;
-    t.detail.isExit && !e.isPresent && ((i = e.onRemove) == null || i.call(e, e.partKey));
+    t.detail.isExit && !e.isPresent && ((i = e.onRemove) == null || i.call(e, e.partKey, t.target));
   }
   return {
     root: n,
-    getRoot: o,
-    handleComplete: a
+    getRoot: a,
+    handleComplete: o
   };
 }
 export {

package/dist/es/components/Cursor/magnetic/use-magnetic-target.mjs

@@ -1,7 +1,7 @@
 import { computed as u } from "vue";
 import { useSnappedValue as g } from "../hooks/use-snapped-value.mjs";
-function d(e, t, o, n) {
-  const a = g(
+function v(e, a, o, n) {
+  const t = g(
     u(() => e.value.x),
     n,
     u(() => o.value.targetBoundingBox ? o.value.targetBoundingBox.left + o.value.targetBoundingBox.width / 2 : void 0)
@@ -10,8 +10,8 @@ function d(e, t, o, n) {
     n,
     u(() => o.value.targetBoundingBox ? o.value.targetBoundingBox.top + o.value.targetBoundingBox.height / 2 : void 0)
   );
-  return u(() => t ? { x: a, y: i } : e.value);
+  return u(() => a.value ? { x: t, y: i } : e.value);
 }
 export {
-  d as useMagneticTarget
+  v as useMagneticTarget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-plus-vue",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Motion Plus Vue",
   "author": "",
   "license": "ISC",