@liiift-studio/magnettype 1.1.4 → 1.1.6

package/README.md

@@ -86,6 +86,9 @@ import { MagnetBlock } from '@liiift-studio/magnettype'
 | `spreadRadius` | — | Pixel distance from the cursor within which each **character's** weight rises to `maxWeight`. When omitted, per-character splitting is skipped |
 | `proximityRadius` | — | Pixel distance from the element **edge** that gates the effect. Without `spreadRadius`, drives a whole-element weight ramp. With `spreadRadius`, acts as an outer gate — the spread only fires while the cursor is within this distance |
 | `fixedAxes` | `{}` | Additional axis values to hold constant in every `font-variation-settings` string (e.g. `{ opsz: 144 }`) |
+| `stabilizeLayout` | `true` | Apply compensating letter-spacing to prevent text reflow as weight rises. Measures the element's width at rest and peak weight via an off-screen probe and applies proportional negative letter-spacing per character. Disable if you want natural bold spacing, or if your font expands glyphs very unevenly (compensation is a per-element average) |
+| `cachePositions` | `true` | Cache character centre positions in page-relative coordinates, eliminating `getBoundingClientRect` calls on every `mousemove`. Rebuilt on resize and after fonts load. Disable if the element is inside a custom scroll container (`overflow: scroll` on a non-window element) |
+| `rafThrottle` | `true` | Throttle proximity updates to one per animation frame (≈ 60 fps on most displays). Disable for lowest input latency on 120 Hz displays or very fast-moving effects |
 | `className` | — | Forwarded to the root element |
 | `style` | — | Merged with the root element's style; `fontVariationSettings` at `minWeight` is set as the base |
 
@@ -244,4 +247,4 @@ The package itself has zero runtime dependencies. Do not remove this entry.
 
 ---
 
-Current version: 1.1.3
+Current version: 1.1.6

package/dist/index.cjs

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),G=require("react/jsx-runtime"),tt={i:3,l:3,1:3,I:3,r:2,n:1,m:1,0:2,O:2,o:1,b:1,d:1,p:1,q:1,c:1,e:1},D={word:"mt-word",char:"mt-char",probe:"mt-probe"},j={axes:{wght:[300,500]},radius:120,falloff:"quadratic",magnetMode:"attract",wdthBoost:6,scope:"document"};function W(e,r=[]){return e.nodeType===Node.TEXT_NODE?r.push(e):e.childNodes.forEach(o=>W(o,r)),r}function K(e,r,o){if(!e||e==="normal")return`"${r}" ${o}`;const y=new RegExp(`(["'])${r}\\1\\s+[\\d.eE+-]+`),a=`"${r}" ${o}`;return y.test(e)?e.replace(y,a):`${e}, ${a}`}function et(e,r){let o=e;for(const[y,a]of Object.entries(r))o=K(o,y,a);return o}function nt(e,r,o){if(r.opacity!==void 0){const[y,a]=r.opacity;e.style.opacity=String(y+(a-y)*o)}r.italic===!0&&(e.style.fontStyle=o>.5?"italic":"")}function U(e,r){r.opacity!==void 0&&(e.style.opacity=String(r.opacity[0])),r.italic===!0&&(e.style.fontStyle="")}function rt(e){const r=e.cloneNode(!0),o=r.querySelectorAll(`.${D.word}, .${D.char}`);return Array.from(o).reverse().forEach(a=>{const l=a.parentNode;if(l){for(;a.firstChild;)l.insertBefore(a.firstChild,a);l.removeChild(a)}}),r.innerHTML}function lt(e,r){e.innerHTML=r}function ot(e,r,o={}){if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return e.innerHTML=r,()=>{};const y=o.wdthBoost??j.wdthBoost,a=o.radius??j.radius,l=o.falloff??j.falloff,x=o.scope??j.scope,E=o.props,f=o.transitionMs??0,w=window.scrollY;e.innerHTML=r;const L=getComputedStyle(e).fontVariationSettings,Y=L.match(/"wdth"\s+([\d.eE+-]+)/),T=Y?parseFloat(Y[1]):100,F=W(e),p=[];for(const s of F){const t=s.textContent??"";if(!t||!t.split("").some(n=>n in tt))continue;const c=document.createDocumentFragment();for(const n of t){const M=tt[n];if(M===void 0){const m=c.lastChild;m&&m.nodeType===Node.TEXT_NODE?m.textContent+=n:c.appendChild(document.createTextNode(n))}else{const m=document.createElement("span");m.className=D.char,m.style.fontVariationSettings=K(L,"wdth",T),m.textContent=n,c.appendChild(m),p.push({span:m,riskLevel:M})}}s.parentNode.replaceChild(c,s)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-w)>2&&window.scrollTo({top:w,behavior:"instant"})}),p.length===0)return()=>{};E&&p.forEach(({span:s})=>U(s,E));let g=-9999,V=-9999,S=!1,u=0,b=!0,N=null;function h(){if(!b)return;if(!S){p.forEach(({span:t})=>{f>0&&(t.style.transition=`font-variation-settings ${f}ms ease`),t.style.fontVariationSettings=K(L,"wdth",T),E&&U(t,E)}),f>0&&(N!==null&&clearTimeout(N),N=setTimeout(()=>{p.forEach(({span:t})=>{t.style.transition=""}),N=null},f)),u=0;return}const s=p.map(({span:t})=>t.getBoundingClientRect());p.forEach(({span:t,riskLevel:i},c)=>{t.style.transition="";const n=s[c],M=n.left+n.width/2,m=n.top+n.height/2,B=Math.sqrt((g-M)**2+(V-m)**2),A=Math.max(0,1-B/a),q=l==="quadratic"?A*A:A,H=y*(i/3)*q;t.style.fontVariationSettings=K(L,"wdth",T+H),E&&nt(t,E,q)}),u=requestAnimationFrame(h)}function X(s){g=s.clientX,V=s.clientY,S||(S=!0),u===0&&(u=requestAnimationFrame(h))}function R(){S=!1,u===0&&(u=requestAnimationFrame(h))}function k(s){s.touches.length!==0&&(g=s.touches[0].clientX,V=s.touches[0].clientY,S||(S=!0),u===0&&(u=requestAnimationFrame(h)))}function $(){S=!1,u===0&&(u=requestAnimationFrame(h))}const v=x==="document"?document:e;return v.addEventListener("mousemove",X),v.addEventListener("mouseleave",R),v.addEventListener("touchmove",k,{passive:!0}),v.addEventListener("touchend",$),()=>{b=!1,cancelAnimationFrame(u),N!==null&&clearTimeout(N),v.removeEventListener("mousemove",X),v.removeEventListener("mouseleave",R),v.removeEventListener("touchmove",k),v.removeEventListener("touchend",$),e.innerHTML=r}}function st(e,r,o={}){if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return e.innerHTML=r,()=>{};const y=o.axes??j.axes,a=o.radius??j.radius,l=o.falloff??j.falloff,x=o.magnetMode??j.magnetMode,E=o.scope??j.scope,f=o.props,w=o.transitionMs??0,L=window.scrollY;e.innerHTML=r;const Y=W(e),T=[];for(const s of Y){const t=s.textContent??"";if(!t.trim())continue;const i=t.split(/(\S+)/),c=document.createDocumentFragment();for(let n=0;n<i.length;n+=2){const M=i[n],m=i[n+1];if(!m)continue;const A=i[n+3]===void 0?i[n+2]??"":"",q=document.createElement("span");q.className=D.word,q.textContent=M+m+A,c.appendChild(q),T.push(q)}s.parentNode.replaceChild(c,s)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-L)>2&&window.scrollTo({top:L,behavior:"instant"})}),T.length===0)return()=>{};const F=getComputedStyle(e).fontVariationSettings,p=et(F,Object.fromEntries(Object.entries(y).map(([s,[t]])=>[s,t])));T.forEach(s=>{s.style.fontVariationSettings=p,f&&U(s,f)});let g=-9999,V=-9999,S=!1,u=0,b=!0,N=null;function h(){if(!b)return;if(!S){T.forEach(t=>{w>0&&(t.style.transition=`font-variation-settings ${w}ms ease`),t.style.fontVariationSettings=p,f&&U(t,f)}),w>0&&(N!==null&&clearTimeout(N),N=setTimeout(()=>{T.forEach(t=>{t.style.transition=""}),N=null},w)),u=0;return}const s=T.map(t=>t.getBoundingClientRect());T.forEach((t,i)=>{t.style.transition="";const c=s[i],n=c.left+c.width/2,M=c.top+c.height/2,m=Math.sqrt((g-n)**2+(V-M)**2),B=Math.max(0,1-m/a),A=l==="quadratic"?B*B:B,q=x==="repel"?1-A:A,H={};for(const _ of Object.keys(y)){const[J,O]=y[_]??[300,500];H[_]=J+(O-J)*q}t.style.fontVariationSettings=et(F,H),f&&nt(t,f,A)}),u=requestAnimationFrame(h)}function X(s){g=s.clientX,V=s.clientY,S||(S=!0),u===0&&(u=requestAnimationFrame(h))}function R(){S=!1,u===0&&(u=requestAnimationFrame(h))}function k(s){s.touches.length!==0&&(g=s.touches[0].clientX,V=s.touches[0].clientY,S||(S=!0),u===0&&(u=requestAnimationFrame(h)))}function $(){S=!1,u===0&&(u=requestAnimationFrame(h))}const v=E==="document"?document:e;return v.addEventListener("mousemove",X),v.addEventListener("mouseleave",R),v.addEventListener("touchmove",k,{passive:!0}),v.addEventListener("touchend",$),()=>{b=!1,cancelAnimationFrame(u),N!==null&&clearTimeout(N),v.removeEventListener("mousemove",X),v.removeEventListener("mouseleave",R),v.removeEventListener("touchmove",k),v.removeEventListener("touchend",$),e.innerHTML=r}}function ct(e){const r=d.useRef(null),o=d.useRef(null),y=d.useRef(e);y.current=e;const a=d.useRef(null),l=e.mode??"field",{axes:x,radius:E,falloff:f,magnetMode:w,wdthBoost:L,scope:Y}=e,T=x?JSON.stringify(x):void 0,F=e.props?JSON.stringify(e.props):void 0,p=d.useCallback(()=>{const g=r.current;if(!g)return;o.current===null&&(o.current=rt(g)),a.current&&(a.current(),a.current=null),(y.current.mode??"field")==="field"?a.current=st(g,o.current,y.current):a.current=ot(g,o.current,y.current)},[l,T,E,f,w,L,Y,F]);return d.useLayoutEffect(()=>(p(),()=>{a.current&&(a.current(),a.current=null)}),[p]),d.useEffect(()=>{document.fonts.ready.then(p)},[p]),r}const it=d.forwardRef(function({children:r,as:o="p",className:y,style:a,...l},x){const E=ct(l),f=d.useCallback(w=>{E.current=w,typeof x=="function"?x(w):x&&(x.current=w)},[x]);return G.jsx(o,{ref:f,className:y,style:a,children:r})});it.displayName="MagnetTypeText";const ut=d.forwardRef(function({children:r,as:o="p",className:y,style:a,minWeight:l=300,maxWeight:x=600,proximityRadius:E,spreadRadius:f,fixedAxes:w={},cachePositions:L=!0,rafThrottle:Y=!0},T){const F=d.useRef(null),p=d.useRef(null),g=d.useRef([]),V=d.useRef([]),S=d.useRef(null),u=d.useRef(!1),b=d.useRef(null),N=d.useCallback(t=>{F.current=t,typeof T=="function"?T(t):T&&(T.current=t)},[T]);function h(t){const i=[`'wght' ${t.toFixed(0)}`];for(const[c,n]of Object.entries(w))i.push(`'${c}' ${n}`);return i.join(", ")}function X(){const t=F.current;if(!t)return;const i=window.scrollX,c=window.scrollY,n=t.getBoundingClientRect();S.current={top:n.top+c,left:n.left+i,right:n.right+i,bottom:n.bottom+c},V.current=g.current.map(M=>{if(!M)return{cx:0,cy:0};const m=M.getBoundingClientRect();return{cx:(m.left+m.right)/2+i,cy:(m.top+m.bottom)/2+c}}),u.current=!0}function R(t,i){const c=F.current;if(!c)return;L&&!u.current&&X();let n,M,m,B,A,q;if(L&&S.current)A=t+window.scrollX,q=i+window.scrollY,{top:n,left:M,right:m,bottom:B}=S.current;else{const O=c.getBoundingClientRect();A=t,q=i,n=O.top,M=O.left,m=O.right,B=O.bottom}const H=Math.max(M-A,0,A-m),_=Math.max(n-q,0,q-B),J=Math.sqrt(H*H+_*_);if(E!==void 0&&!f){const C=1-(1-Math.max(0,1-J/E))**2;c.style.fontVariationSettings=h(l+(x-l)*C);return}if(f){if(E!==void 0&&J>E){c.style.fontVariationSettings=h(l);for(const C of g.current)C&&(C.style.fontVariationSettings=h(l));return}if(J>f){for(const C of g.current)C&&(C.style.fontVariationSettings=h(l));return}const O=g.current;if(L&&V.current.length===O.length)for(let C=0;C<O.length;C++){const I=O[C];if(!I)continue;const{cx:z,cy:P}=V.current[C],Q=Math.sqrt((A-z)**2+(q-P)**2),Z=1-(1-Math.max(0,1-Q/f))**2;I.style.fontVariationSettings=h(l+(x-l)*Z)}else for(const C of O){if(!C)continue;const I=C.getBoundingClientRect(),z=(I.left+I.right)/2,P=(I.top+I.bottom)/2,Q=Math.sqrt((t-z)**2+(i-P)**2),Z=1-(1-Math.max(0,1-Q/f))**2;C.style.fontVariationSettings=h(l+(x-l)*Z)}}}const k=d.useCallback(t=>{p.current={x:t.clientX,y:t.clientY},Y?b.current===null&&(b.current=requestAnimationFrame(()=>{b.current=null,p.current&&R(p.current.x,p.current.y)})):R(t.clientX,t.clientY)},[l,x,E,f,L,Y,JSON.stringify(w)]),$=d.useCallback(()=>{p.current&&R(p.current.x,p.current.y)},[l,x,E,f,L,JSON.stringify(w)]),v=d.useCallback(()=>{p.current=null,b.current!==null&&(cancelAnimationFrame(b.current),b.current=null);const t=F.current;t&&(t.style.fontVariationSettings=h(l));for(const i of g.current)i&&(i.style.fontVariationSettings=h(l))},[l,JSON.stringify(w)]);d.useEffect(()=>(window.addEventListener("mousemove",k,{passive:!0}),window.addEventListener("scroll",$,{passive:!0,capture:!0}),document.documentElement.addEventListener("mouseleave",v),()=>{window.removeEventListener("mousemove",k),window.removeEventListener("scroll",$,{capture:!0}),document.documentElement.removeEventListener("mouseleave",v),b.current!==null&&(cancelAnimationFrame(b.current),b.current=null)}),[k,$,v]),d.useEffect(()=>{if(!L||!f)return;u.current=!1;const t=F.current;if(!t)return;const i=new ResizeObserver(()=>{u.current=!1});return i.observe(t),document.fonts.ready.then(()=>{u.current=!1}),()=>i.disconnect()},[L,f]),d.useEffect(()=>{u.current=!1},[r,f]);const s=d.useMemo(()=>{if(!f)return r;g.current=[];let t=0;function i(c){if(typeof c=="string")return[...c].map(n=>{if(/\s/.test(n))return n;const M=t++;return G.jsx("span",{ref:m=>{g.current[M]=m},style:{fontVariationSettings:h(l)},children:n},M)});if(Array.isArray(c))return c.map((n,M)=>G.jsx(d.Fragment,{children:i(n)},M));if(d.isValidElement(c)){const n=c;if(n.props.children!==void 0)return d.cloneElement(n,{},i(n.props.children))}return c}return i(r)},[r,f,l,JSON.stringify(w)]);return G.jsx(o,{ref:N,className:y,style:{fontVariationSettings:h(l),...a},children:s})});ut.displayName="MagnetBlock";exports.MAGNET_TYPE_CLASSES=D;exports.MagnetBlock=ut;exports.MagnetTypeText=it;exports.applyMagnetType=ot;exports.getCleanHTML=rt;exports.removeMagnetType=lt;exports.startMagnetType=st;exports.useMagnetType=ct;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),W=require("react/jsx-runtime"),rt={i:3,l:3,1:3,I:3,r:2,n:1,m:1,0:2,O:2,o:1,b:1,d:1,p:1,q:1,c:1,e:1},z={word:"mt-word",char:"mt-char",probe:"mt-probe"},K={axes:{wght:[300,500]},radius:120,falloff:"quadratic",magnetMode:"attract",wdthBoost:6,scope:"document"};function ot(t,n=[]){return t.nodeType===Node.TEXT_NODE?n.push(t):t.childNodes.forEach(o=>ot(o,n)),n}function tt(t,n,o){if(!t||t==="normal")return`"${n}" ${o}`;const E=new RegExp(`(["'])${n}\\1\\s+[\\d.eE+-]+`),y=`"${n}" ${o}`;return E.test(t)?t.replace(E,y):`${t}, ${y}`}function nt(t,n){let o=t;for(const[E,y]of Object.entries(n))o=tt(o,E,y);return o}function st(t,n,o){if(n.opacity!==void 0){const[E,y]=n.opacity;t.style.opacity=String(E+(y-E)*o)}n.italic===!0&&(t.style.fontStyle=o>.5?"italic":"")}function et(t,n){n.opacity!==void 0&&(t.style.opacity=String(n.opacity[0])),n.italic===!0&&(t.style.fontStyle="")}function ct(t){const n=t.cloneNode(!0),o=n.querySelectorAll(`.${z.word}, .${z.char}`);return Array.from(o).reverse().forEach(y=>{const d=y.parentNode;if(d){for(;y.firstChild;)d.insertBefore(y.firstChild,y);d.removeChild(y)}}),n.innerHTML}function mt(t,n){t.innerHTML=n}function it(t,n,o={}){var p,r;if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.innerHTML=n,()=>{};const E=o.wdthBoost??K.wdthBoost,y=o.radius??K.radius,d=o.falloff??K.falloff,L=o.scope??K.scope,F=o.props,m=o.transitionMs??0,S=o.cachePositions??!0,V=window.scrollY;t.innerHTML=n;const j=getComputedStyle(t).fontVariationSettings,N=j.match(/"wdth"\s+([\d.eE+-]+)/),k=N?parseFloat(N[1]):100,T=ot(t),g=[];for(const a of T){const C=a.textContent??"";if(!C||!C.split("").some(v=>v in rt))continue;const e=document.createDocumentFragment();for(const v of C){const i=rt[v];if(i===void 0){const u=e.lastChild;u&&u.nodeType===Node.TEXT_NODE?u.textContent+=v:e.appendChild(document.createTextNode(v))}else{const u=document.createElement("span");u.className=z.char,u.style.fontVariationSettings=tt(j,"wdth",k),u.textContent=v,e.appendChild(u),g.push({span:u,riskLevel:i})}}a.parentNode.replaceChild(e,a)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-V)>2&&window.scrollTo({top:V,behavior:"instant"})}),g.length===0)return()=>{};F&&g.forEach(({span:a})=>et(a,F));let A=[],H=!1;function _(){const a=window.scrollX,C=window.scrollY;A=g.map(({span:c})=>{const e=c.getBoundingClientRect();return{cx:(e.left+e.right)/2+a,cy:(e.top+e.bottom)/2+C}}),H=!0}let R=null;S&&(_(),R=new ResizeObserver(()=>{H=!1}),R.observe(t),(r=(p=document.fonts)==null?void 0:p.ready)==null||r.then(()=>{H=!1}));let q=-9999,B=-9999,$=!1,w=0,P=!0,b=null;function D(){if(!P)return;if(!$){g.forEach(({span:e})=>{m>0&&(e.style.transition=`font-variation-settings ${m}ms ease`),e.style.fontVariationSettings=tt(j,"wdth",k),F&&et(e,F)}),m>0&&(b!==null&&clearTimeout(b),b=setTimeout(()=>{g.forEach(({span:e})=>{e.style.transition=""}),b=null},m)),w=0;return}S&&!H&&_();const a=S?q+window.scrollX:q,C=S?B+window.scrollY:B,c=S?null:g.map(({span:e})=>e.getBoundingClientRect());g.forEach(({span:e,riskLevel:v},i)=>{e.style.transition="";let u,O;if(S)({cx:u,cy:O}=A[i]);else{const I=c[i];u=I.left+I.width/2,O=I.top+I.height/2}const M=Math.sqrt((a-u)**2+(C-O)**2),f=Math.max(0,1-M/y),x=d==="quadratic"?f*f:f,Y=E*(v/3)*x;e.style.fontVariationSettings=tt(j,"wdth",k+Y),F&&st(e,F,x)}),w=requestAnimationFrame(D)}function X(a){q=a.clientX,B=a.clientY,$||($=!0),w===0&&(w=requestAnimationFrame(D))}function J(){$=!1,w===0&&(w=requestAnimationFrame(D))}function Q(a){a.touches.length!==0&&(q=a.touches[0].clientX,B=a.touches[0].clientY,$||($=!0),w===0&&(w=requestAnimationFrame(D)))}function l(){$=!1,w===0&&(w=requestAnimationFrame(D))}const s=L==="document"?document:t;return s.addEventListener("mousemove",X),s.addEventListener("mouseleave",J),s.addEventListener("touchmove",Q,{passive:!0}),s.addEventListener("touchend",l),()=>{P=!1,cancelAnimationFrame(w),b!==null&&clearTimeout(b),R&&R.disconnect(),s.removeEventListener("mousemove",X),s.removeEventListener("mouseleave",J),s.removeEventListener("touchmove",Q),s.removeEventListener("touchend",l),t.innerHTML=n}}function lt(t,n,o={}){var a,C;if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return t.innerHTML=n,()=>{};const E=o.axes??K.axes,y=o.radius??K.radius,d=o.falloff??K.falloff,L=o.magnetMode??K.magnetMode,F=o.scope??K.scope,m=o.props,S=o.transitionMs??0,V=o.cachePositions??!0,j=o.stabilizeLayout??!0,N=window.scrollY;t.innerHTML=n;const k=ot(t),T=[];for(const c of k){const e=c.textContent??"";if(!e.trim())continue;const v=e.split(/(\S+)/),i=document.createDocumentFragment();for(let u=0;u<v.length;u+=2){const O=v[u],M=v[u+1];if(!M)continue;const x=v[u+3]===void 0?v[u+2]??"":"",Y=document.createElement("span");Y.className=z.word,Y.textContent=O+M+x,i.appendChild(Y),T.push(Y)}c.parentNode.replaceChild(i,c)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-N)>2&&window.scrollTo({top:N,behavior:"instant"})}),T.length===0)return()=>{};const g=getComputedStyle(t).fontVariationSettings,A=nt(g,Object.fromEntries(Object.entries(E).map(([c,[e]])=>[c,e])));let H=0;if(j){const c=nt(g,Object.fromEntries(Object.entries(E).map(([f,[,x]])=>[f,x]))),e=t.style.fontVariationSettings,v=t.style.whiteSpace,i=t.style.overflow;t.style.whiteSpace="nowrap",t.style.overflow="visible",t.style.fontVariationSettings=c;const u=t.scrollWidth;t.style.fontVariationSettings=A;const O=t.scrollWidth;t.style.fontVariationSettings=e,t.style.whiteSpace=v,t.style.overflow=i;const M=T.reduce((f,x)=>{var Y;return f+(((Y=x.textContent)==null?void 0:Y.replace(/\s+/g,"").length)??0)},0);M>0&&u>O&&(H=(u-O)/M)}T.forEach(c=>{c.style.fontVariationSettings=A,m&&et(c,m)});let _=[],R=!1;function q(){const c=window.scrollX,e=window.scrollY;_=T.map(v=>{const i=v.getBoundingClientRect();return{cx:(i.left+i.right)/2+c,cy:(i.top+i.bottom)/2+e}}),R=!0}let B=null;V&&(q(),B=new ResizeObserver(()=>{R=!1}),B.observe(t),(C=(a=document.fonts)==null?void 0:a.ready)==null||C.then(()=>{R=!1}));let $=-9999,w=-9999,P=!1,b=0,D=!0,X=null;function J(){if(!D)return;if(!P){T.forEach(i=>{S>0&&(i.style.transition=`font-variation-settings ${S}ms ease`),i.style.fontVariationSettings=A,j&&(i.style.letterSpacing=""),m&&et(i,m)}),S>0&&(X!==null&&clearTimeout(X),X=setTimeout(()=>{T.forEach(i=>{i.style.transition=""}),X=null},S)),b=0;return}V&&!R&&q();const c=V?$+window.scrollX:$,e=V?w+window.scrollY:w,v=V?null:T.map(i=>i.getBoundingClientRect());T.forEach((i,u)=>{i.style.transition="";let O,M;if(V)({cx:O,cy:M}=_[u]);else{const G=v[u];O=G.left+G.width/2,M=G.top+G.height/2}const f=Math.sqrt((c-O)**2+(e-M)**2),x=Math.max(0,1-f/y),Y=d==="quadratic"?x*x:x,I=L==="repel"?1-Y:Y,Z={};for(const G of Object.keys(E)){const[U,dt]=E[G]??[300,500];Z[G]=U+(dt-U)*I}i.style.fontVariationSettings=nt(g,Z),j&&H!==0&&(i.style.letterSpacing=`${(-H*I).toFixed(3)}px`),m&&st(i,m,Y)}),b=requestAnimationFrame(J)}function Q(c){$=c.clientX,w=c.clientY,P||(P=!0),b===0&&(b=requestAnimationFrame(J))}function l(){P=!1,b===0&&(b=requestAnimationFrame(J))}function s(c){c.touches.length!==0&&($=c.touches[0].clientX,w=c.touches[0].clientY,P||(P=!0),b===0&&(b=requestAnimationFrame(J)))}function p(){P=!1,b===0&&(b=requestAnimationFrame(J))}const r=F==="document"?document:t;return r.addEventListener("mousemove",Q),r.addEventListener("mouseleave",l),r.addEventListener("touchmove",s,{passive:!0}),r.addEventListener("touchend",p),()=>{D=!1,cancelAnimationFrame(b),X!==null&&clearTimeout(X),B&&B.disconnect(),r.removeEventListener("mousemove",Q),r.removeEventListener("mouseleave",l),r.removeEventListener("touchmove",s),r.removeEventListener("touchend",p),t.innerHTML=n}}function at(t){const n=h.useRef(null),o=h.useRef(null),E=h.useRef(t);E.current=t;const y=h.useRef(null),d=t.mode??"field",{axes:L,radius:F,falloff:m,magnetMode:S,wdthBoost:V,scope:j}=t,N=L?JSON.stringify(L):void 0,k=t.props?JSON.stringify(t.props):void 0,T=h.useCallback(()=>{const g=n.current;if(!g)return;o.current===null&&(o.current=ct(g)),y.current&&(y.current(),y.current=null),(E.current.mode??"field")==="field"?y.current=lt(g,o.current,E.current):y.current=it(g,o.current,E.current)},[d,N,F,m,S,V,j,k]);return h.useLayoutEffect(()=>(T(),()=>{y.current&&(y.current(),y.current=null)}),[T]),h.useEffect(()=>{var g,A;(A=(g=document.fonts)==null?void 0:g.ready)==null||A.then(T)},[T]),n}const ut=h.forwardRef(function({children:n,as:o="p",className:E,style:y,...d},L){const F=at(d),m=h.useCallback(S=>{F.current=S,typeof L=="function"?L(S):L&&(L.current=S)},[L]);return W.jsx(o,{ref:m,className:E,style:y,children:n})});ut.displayName="MagnetTypeText";const ft=h.forwardRef(function({children:n,as:o="p",className:E,style:y,minWeight:d=300,maxWeight:L=600,proximityRadius:F,spreadRadius:m,fixedAxes:S={},cachePositions:V=!0,rafThrottle:j=!0,stabilizeLayout:N=!0},k){const T=h.useRef(null),g=h.useRef(null),A=h.useRef([]),H=h.useRef([]),_=h.useRef(null),R=h.useRef(!1),q=h.useRef(null),B=h.useRef(0),$=h.useCallback(l=>{T.current=l,typeof k=="function"?k(l):k&&(k.current=l)},[k]);function w(l){const s=[`'wght' ${l.toFixed(0)}`];for(const[p,r]of Object.entries(S))s.push(`'${p}' ${r}`);return s.join(", ")}function P(){const l=T.current;if(!l)return;const s=window.scrollX,p=window.scrollY,r=l.getBoundingClientRect();_.current={top:r.top+p,left:r.left+s,right:r.right+s,bottom:r.bottom+p},H.current=A.current.map(a=>{if(!a)return{cx:0,cy:0};const C=a.getBoundingClientRect();return{cx:(C.left+C.right)/2+s,cy:(C.top+C.bottom)/2+p}}),R.current=!0}function b(l,s){const p=T.current;if(!p)return;V&&!R.current&&P();let r,a,C,c,e,v;if(V&&_.current)e=l+window.scrollX,v=s+window.scrollY,{top:r,left:a,right:C,bottom:c}=_.current;else{const M=p.getBoundingClientRect();e=l,v=s,r=M.top,a=M.left,C=M.right,c=M.bottom}const i=Math.max(a-e,0,e-C),u=Math.max(r-v,0,v-c),O=Math.sqrt(i*i+u*u);if(F!==void 0&&!m){const f=1-(1-Math.max(0,1-O/F))**2;p.style.fontVariationSettings=w(d+(L-d)*f);return}if(m){if(F!==void 0&&O>F){p.style.fontVariationSettings=w(d);for(const f of A.current)f&&(f.style.fontVariationSettings=w(d),N&&(f.style.letterSpacing=""));return}if(O>m){for(const f of A.current)f&&(f.style.fontVariationSettings=w(d),N&&(f.style.letterSpacing=""));return}const M=A.current;if(V&&H.current.length===M.length)for(let f=0;f<M.length;f++){const x=M[f];if(!x)continue;const{cx:Y,cy:I}=H.current[f],Z=Math.sqrt((e-Y)**2+(v-I)**2),U=1-(1-Math.max(0,1-Z/m))**2;x.style.fontVariationSettings=w(d+(L-d)*U),N&&B.current!==0&&(x.style.letterSpacing=`${(-B.current*U).toFixed(3)}px`)}else for(const f of M){if(!f)continue;const x=f.getBoundingClientRect(),Y=(x.left+x.right)/2,I=(x.top+x.bottom)/2,Z=Math.sqrt((l-Y)**2+(s-I)**2),U=1-(1-Math.max(0,1-Z/m))**2;f.style.fontVariationSettings=w(d+(L-d)*U),N&&B.current!==0&&(f.style.letterSpacing=`${(-B.current*U).toFixed(3)}px`)}}}const D=h.useCallback(l=>{g.current={x:l.clientX,y:l.clientY},j?q.current===null&&(q.current=requestAnimationFrame(()=>{q.current=null,g.current&&b(g.current.x,g.current.y)})):b(l.clientX,l.clientY)},[d,L,F,m,V,j,N,JSON.stringify(S)]),X=h.useCallback(()=>{g.current&&b(g.current.x,g.current.y)},[d,L,F,m,V,N,JSON.stringify(S)]),J=h.useCallback(()=>{g.current=null,q.current!==null&&(cancelAnimationFrame(q.current),q.current=null);const l=T.current;l&&(l.style.fontVariationSettings=w(d));for(const s of A.current)s&&(s.style.fontVariationSettings=w(d),N&&(s.style.letterSpacing=""))},[d,N,JSON.stringify(S)]);h.useEffect(()=>(window.addEventListener("mousemove",D,{passive:!0}),window.addEventListener("scroll",X,{passive:!0,capture:!0}),document.documentElement.addEventListener("mouseleave",J),()=>{window.removeEventListener("mousemove",D),window.removeEventListener("scroll",X,{capture:!0}),document.documentElement.removeEventListener("mouseleave",J),q.current!==null&&(cancelAnimationFrame(q.current),q.current=null)}),[D,X,J]),h.useEffect(()=>{var p,r;if(!V||!m)return;R.current=!1;const l=T.current;if(!l)return;const s=new ResizeObserver(()=>{R.current=!1});return s.observe(l),(r=(p=document.fonts)==null?void 0:p.ready)==null||r.then(()=>{R.current=!1}),()=>s.disconnect()},[V,m]),h.useEffect(()=>{R.current=!1},[n,m]),h.useEffect(()=>{var s,p;if(!N||!m){B.current=0;return}function l(){const r=T.current;if(!r)return;const a=r.textContent??"",C=a.replace(/\s/g,"").length;if(C===0)return;const c=getComputedStyle(r),e=document.createElement("span");e.style.cssText="position:fixed;top:-9999px;left:-9999px;visibility:hidden;white-space:nowrap;pointer-events:none;",e.style.fontFamily=c.fontFamily,e.style.fontSize=c.fontSize,e.style.fontWeight=c.fontWeight,e.style.lineHeight=c.lineHeight,e.style.letterSpacing=c.letterSpacing,e.textContent=a,document.body.appendChild(e);const v=O=>{const M=[`'wght' ${O.toFixed(0)}`];for(const[f,x]of Object.entries(S))M.push(`'${f}' ${x}`);return M.join(", ")};e.style.fontVariationSettings=v(L);const i=e.scrollWidth;e.style.fontVariationSettings=v(d);const u=e.scrollWidth;document.body.removeChild(e),B.current=i>u?(i-u)/C:0}l(),(p=(s=document.fonts)==null?void 0:s.ready)==null||p.then(l)},[N,m,d,L,n,JSON.stringify(S)]);const Q=h.useMemo(()=>{if(!m)return n;A.current=[];let l=0;function s(p){if(typeof p=="string")return[...p].map(r=>{if(/\s/.test(r))return r;const a=l++;return W.jsx("span",{ref:C=>{A.current[a]=C},style:{fontVariationSettings:w(d)},children:r},a)});if(Array.isArray(p))return p.map((r,a)=>W.jsx(h.Fragment,{children:s(r)},a));if(h.isValidElement(p)){const r=p;if(r.props.children!==void 0)return h.cloneElement(r,{},s(r.props.children))}return p}return s(n)},[n,m,d,JSON.stringify(S)]);return W.jsx(o,{ref:$,className:E,style:{fontVariationSettings:w(d),...y},children:Q})});ft.displayName="MagnetBlock";exports.MAGNET_TYPE_CLASSES=z;exports.MagnetBlock=ft;exports.MagnetTypeText=ut;exports.applyMagnetType=it;exports.getCleanHTML=ct;exports.removeMagnetType=mt;exports.startMagnetType=lt;exports.useMagnetType=at;

package/dist/index.d.ts

@@ -69,6 +69,18 @@ export declare interface MagnetBlockProps {
      * @default true
      */
     rafThrottle?: boolean;
+    /**
+     * Apply compensating letter-spacing to keep line lengths stable as font weight changes.
+     * Measures the element's text width at rest and peak weight via an off-screen probe span,
+     * then applies proportional negative letter-spacing per character as weight rises,
+     * cancelling the advance-width increase that would otherwise cause text to reflow.
+     *
+     * Disable if you prefer natural bold letter-spacing, or if the font expands characters
+     * very unevenly across the weight axis (the compensation is a per-element average and
+     * may not perfectly cancel highly variable per-character expansion).
+     * @default true
+     */
+    stabilizeLayout?: boolean;
 }
 
 /** Whether cursor proximity attracts toward peak or repels toward rest */
@@ -137,6 +149,28 @@ export declare interface MagnetTypeOptions {
      * Risk 3 characters receive wdthBoost × (3/3) = full boost at peak.
      */
     wdthBoost?: number;
+    /**
+     * Cache word/character centre positions in page-relative coordinates after setup,
+     * eliminating getBoundingClientRect calls during the active interaction loop.
+     * The cache is rebuilt on resize and after fonts load. Disable if the element lives
+     * inside a custom scroll container (overflow: scroll on a non-window element) —
+     * page coordinates are computed using window.scrollX/Y and will be incorrect when
+     * a nested element is the scroll parent.
+     * @default true
+     */
+    cachePositions?: boolean;
+    /**
+     * Apply compensating letter-spacing to keep line lengths stable as font weight
+     * changes. Measures the element's text width at rest and peak weight, then applies
+     * proportional negative letter-spacing per word/character as weight rises, cancelling
+     * the advance-width increase that would otherwise cause text to reflow.
+     *
+     * Disable if you prefer natural bold letter-spacing, or if the font expands characters
+     * very unevenly across the weight axis (the compensation is a per-element average and
+     * may not perfectly cancel highly variable per-character expansion).
+     * @default true
+     */
+    stabilizeLayout?: boolean;
     /**
      * Duration in milliseconds for the CSS transition back to rest values when the
      * cursor leaves (mouseleave / touchend). Default: 0 (instant snap, no transition).

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
-import et, { useRef as O, useCallback as R, useLayoutEffect as ut, useEffect as K, forwardRef as ct, useMemo as at } from "react";
-import { jsx as U } from "react/jsx-runtime";
-const rt = {
+import rt, { useRef as I, useCallback as z, useLayoutEffect as ft, useEffect as W, forwardRef as lt, useMemo as dt } from "react";
+import { jsx as tt } from "react/jsx-runtime";
+const it = {
   i: 3,
   l: 3,
   1: 3,
@@ -23,14 +23,14 @@ const rt = {
   c: 1,
   e: 1
   // similar bowls
-}, G = {
+}, nt = {
   /** Applied to each word span in field mode */
   word: "mt-word",
   /** Applied to each character span in legibility mode */
   char: "mt-char",
   /** Applied to measurement probe spans (never in final output) */
   probe: "mt-probe"
-}, j = {
+}, U = {
   axes: { wght: [300, 500] },
   radius: 120,
   falloff: "quadratic",
@@ -38,389 +38,486 @@ const rt = {
   wdthBoost: 6,
   scope: "document"
 };
-function nt(e, r = []) {
-  return e.nodeType === Node.TEXT_NODE ? r.push(e) : e.childNodes.forEach((o) => nt(o, r)), r;
+function ct(t, n = []) {
+  return t.nodeType === Node.TEXT_NODE ? n.push(t) : t.childNodes.forEach((o) => ct(o, n)), n;
 }
-function z(e, r, o) {
-  if (!e || e === "normal") return `"${r}" ${o}`;
-  const p = new RegExp(`(["'])${r}\\1\\s+[\\d.eE+-]+`), a = `"${r}" ${o}`;
-  return p.test(e) ? e.replace(p, a) : `${e}, ${a}`;
+function et(t, n, o) {
+  if (!t || t === "normal") return `"${n}" ${o}`;
+  const M = new RegExp(`(["'])${n}\\1\\s+[\\d.eE+-]+`), h = `"${n}" ${o}`;
+  return M.test(t) ? t.replace(M, h) : `${t}, ${h}`;
 }
-function ot(e, r) {
-  let o = e;
-  for (const [p, a] of Object.entries(r))
-    o = z(o, p, a);
+function st(t, n) {
+  let o = t;
+  for (const [M, h] of Object.entries(n))
+    o = et(o, M, h);
   return o;
 }
-function st(e, r, o) {
-  if (r.opacity !== void 0) {
-    const [p, a] = r.opacity;
-    e.style.opacity = String(p + (a - p) * o);
+function at(t, n, o) {
+  if (n.opacity !== void 0) {
+    const [M, h] = n.opacity;
+    t.style.opacity = String(M + (h - M) * o);
   }
-  r.italic === !0 && (e.style.fontStyle = o > 0.5 ? "italic" : "");
+  n.italic === !0 && (t.style.fontStyle = o > 0.5 ? "italic" : "");
 }
-function Q(e, r) {
-  r.opacity !== void 0 && (e.style.opacity = String(r.opacity[0])), r.italic === !0 && (e.style.fontStyle = "");
+function ot(t, n) {
+  n.opacity !== void 0 && (t.style.opacity = String(n.opacity[0])), n.italic === !0 && (t.style.fontStyle = "");
 }
-function lt(e) {
-  const r = e.cloneNode(!0), o = r.querySelectorAll(
-    `.${G.word}, .${G.char}`
+function mt(t) {
+  const n = t.cloneNode(!0), o = n.querySelectorAll(
+    `.${nt.word}, .${nt.char}`
   );
-  return Array.from(o).reverse().forEach((a) => {
-    const l = a.parentNode;
-    if (l) {
-      for (; a.firstChild; ) l.insertBefore(a.firstChild, a);
-      l.removeChild(a);
+  return Array.from(o).reverse().forEach((h) => {
+    const d = h.parentNode;
+    if (d) {
+      for (; h.firstChild; ) d.insertBefore(h.firstChild, h);
+      d.removeChild(h);
     }
-  }), r.innerHTML;
+  }), n.innerHTML;
 }
-function gt(e, r) {
-  e.innerHTML = r;
+function Mt(t, n) {
+  t.innerHTML = n;
 }
-function ft(e, r, o = {}) {
+function pt(t, n, o = {}) {
+  var p, r;
   if (typeof window > "u") return () => {
   };
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-    return e.innerHTML = r, () => {
+    return t.innerHTML = n, () => {
     };
-  const p = o.wdthBoost ?? j.wdthBoost, a = o.radius ?? j.radius, l = o.falloff ?? j.falloff, S = o.scope ?? j.scope, w = o.props, f = o.transitionMs ?? 0, M = window.scrollY;
-  e.innerHTML = r;
-  const L = getComputedStyle(e).fontVariationSettings, Y = L.match(/"wdth"\s+([\d.eE+-]+)/), E = Y ? parseFloat(Y[1]) : 100, q = nt(e), m = [];
-  for (const c of q) {
-    const t = c.textContent ?? "";
-    if (!t || !t.split("").some((n) => n in rt)) continue;
-    const s = document.createDocumentFragment();
-    for (const n of t) {
-      const g = rt[n];
-      if (g === void 0) {
-        const d = s.lastChild;
-        d && d.nodeType === Node.TEXT_NODE ? d.textContent += n : s.appendChild(document.createTextNode(n));
+  const M = o.wdthBoost ?? U.wdthBoost, h = o.radius ?? U.radius, d = o.falloff ?? U.falloff, b = o.scope ?? U.scope, F = o.props, m = o.transitionMs ?? 0, w = o.cachePositions ?? !0, L = window.scrollY;
+  t.innerHTML = n;
+  const X = getComputedStyle(t).fontVariationSettings, V = X.match(/"wdth"\s+([\d.eE+-]+)/), j = V ? parseFloat(V[1]) : 100, x = ct(t), y = [];
+  for (const a of x) {
+    const E = a.textContent ?? "";
+    if (!E || !E.split("").some((g) => g in it)) continue;
+    const e = document.createDocumentFragment();
+    for (const g of E) {
+      const i = it[g];
+      if (i === void 0) {
+        const u = e.lastChild;
+        u && u.nodeType === Node.TEXT_NODE ? u.textContent += g : e.appendChild(document.createTextNode(g));
       } else {
-        const d = document.createElement("span");
-        d.className = G.char, d.style.fontVariationSettings = z(L, "wdth", E), d.textContent = n, s.appendChild(d), m.push({ span: d, riskLevel: g });
+        const u = document.createElement("span");
+        u.className = nt.char, u.style.fontVariationSettings = et(X, "wdth", j), u.textContent = g, e.appendChild(u), y.push({ span: u, riskLevel: i });
       }
     }
-    c.parentNode.replaceChild(s, c);
+    a.parentNode.replaceChild(e, a);
   }
   if (requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - M) > 2 && window.scrollTo({ top: M, behavior: "instant" });
-  }), m.length === 0) return () => {
+    typeof window < "u" && Math.abs(window.scrollY - L) > 2 && window.scrollTo({ top: L, behavior: "instant" });
+  }), y.length === 0) return () => {
   };
-  w && m.forEach(({ span: c }) => Q(c, w));
-  let y = -9999, F = -9999, T = !1, u = 0, C = !0, N = null;
-  function h() {
-    if (!C) return;
-    if (!T) {
-      m.forEach(({ span: t }) => {
-        f > 0 && (t.style.transition = `font-variation-settings ${f}ms ease`), t.style.fontVariationSettings = z(L, "wdth", E), w && Q(t, w);
-      }), f > 0 && (N !== null && clearTimeout(N), N = setTimeout(() => {
-        m.forEach(({ span: t }) => {
-          t.style.transition = "";
-        }), N = null;
-      }, f)), u = 0;
+  F && y.forEach(({ span: a }) => ot(a, F));
+  let N = [], H = !1;
+  function _() {
+    const a = window.scrollX, E = window.scrollY;
+    N = y.map(({ span: c }) => {
+      const e = c.getBoundingClientRect();
+      return { cx: (e.left + e.right) / 2 + a, cy: (e.top + e.bottom) / 2 + E };
+    }), H = !0;
+  }
+  let Y = null;
+  w && (_(), Y = new ResizeObserver(() => {
+    H = !1;
+  }), Y.observe(t), (r = (p = document.fonts) == null ? void 0 : p.ready) == null || r.then(() => {
+    H = !1;
+  }));
+  let A = -9999, $ = -9999, B = !1, v = 0, R = !0, T = null;
+  function D() {
+    if (!R) return;
+    if (!B) {
+      y.forEach(({ span: e }) => {
+        m > 0 && (e.style.transition = `font-variation-settings ${m}ms ease`), e.style.fontVariationSettings = et(X, "wdth", j), F && ot(e, F);
+      }), m > 0 && (T !== null && clearTimeout(T), T = setTimeout(() => {
+        y.forEach(({ span: e }) => {
+          e.style.transition = "";
+        }), T = null;
+      }, m)), v = 0;
       return;
     }
-    const c = m.map(({ span: t }) => t.getBoundingClientRect());
-    m.forEach(({ span: t, riskLevel: i }, s) => {
-      t.style.transition = "";
-      const n = c[s], g = n.left + n.width / 2, d = n.top + n.height / 2, B = Math.sqrt((y - g) ** 2 + (F - d) ** 2), b = Math.max(0, 1 - B / a), A = l === "quadratic" ? b * b : b, I = p * (i / 3) * A;
-      t.style.fontVariationSettings = z(L, "wdth", E + I), w && st(t, w, A);
-    }), u = requestAnimationFrame(h);
+    w && !H && _();
+    const a = w ? A + window.scrollX : A, E = w ? $ + window.scrollY : $, c = w ? null : y.map(({ span: e }) => e.getBoundingClientRect());
+    y.forEach(({ span: e, riskLevel: g }, i) => {
+      e.style.transition = "";
+      let u, O;
+      if (w)
+        ({ cx: u, cy: O } = N[i]);
+      else {
+        const P = c[i];
+        u = P.left + P.width / 2, O = P.top + P.height / 2;
+      }
+      const S = Math.sqrt((a - u) ** 2 + (E - O) ** 2), f = Math.max(0, 1 - S / h), C = d === "quadratic" ? f * f : f, q = M * (g / 3) * C;
+      e.style.fontVariationSettings = et(X, "wdth", j + q), F && at(e, F, C);
+    }), v = requestAnimationFrame(D);
   }
-  function H(c) {
-    y = c.clientX, F = c.clientY, T || (T = !0), u === 0 && (u = requestAnimationFrame(h));
+  function k(a) {
+    A = a.clientX, $ = a.clientY, B || (B = !0), v === 0 && (v = requestAnimationFrame(D));
   }
-  function $() {
-    T = !1, u === 0 && (u = requestAnimationFrame(h));
+  function J() {
+    B = !1, v === 0 && (v = requestAnimationFrame(D));
   }
-  function X(c) {
-    c.touches.length !== 0 && (y = c.touches[0].clientX, F = c.touches[0].clientY, T || (T = !0), u === 0 && (u = requestAnimationFrame(h)));
+  function Q(a) {
+    a.touches.length !== 0 && (A = a.touches[0].clientX, $ = a.touches[0].clientY, B || (B = !0), v === 0 && (v = requestAnimationFrame(D)));
   }
-  function k() {
-    T = !1, u === 0 && (u = requestAnimationFrame(h));
+  function l() {
+    B = !1, v === 0 && (v = requestAnimationFrame(D));
   }
-  const v = S === "document" ? document : e;
-  return v.addEventListener("mousemove", H), v.addEventListener("mouseleave", $), v.addEventListener("touchmove", X, { passive: !0 }), v.addEventListener("touchend", k), () => {
-    C = !1, cancelAnimationFrame(u), N !== null && clearTimeout(N), v.removeEventListener("mousemove", H), v.removeEventListener("mouseleave", $), v.removeEventListener("touchmove", X), v.removeEventListener("touchend", k), e.innerHTML = r;
+  const s = b === "document" ? document : t;
+  return s.addEventListener("mousemove", k), s.addEventListener("mouseleave", J), s.addEventListener("touchmove", Q, { passive: !0 }), s.addEventListener("touchend", l), () => {
+    R = !1, cancelAnimationFrame(v), T !== null && clearTimeout(T), Y && Y.disconnect(), s.removeEventListener("mousemove", k), s.removeEventListener("mouseleave", J), s.removeEventListener("touchmove", Q), s.removeEventListener("touchend", l), t.innerHTML = n;
   };
 }
-function dt(e, r, o = {}) {
+function ht(t, n, o = {}) {
+  var a, E;
   if (typeof window > "u") return () => {
   };
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-    return e.innerHTML = r, () => {
+    return t.innerHTML = n, () => {
     };
-  const p = o.axes ?? j.axes, a = o.radius ?? j.radius, l = o.falloff ?? j.falloff, S = o.magnetMode ?? j.magnetMode, w = o.scope ?? j.scope, f = o.props, M = o.transitionMs ?? 0, L = window.scrollY;
-  e.innerHTML = r;
-  const Y = nt(e), E = [];
-  for (const c of Y) {
-    const t = c.textContent ?? "";
-    if (!t.trim()) continue;
-    const i = t.split(/(\S+)/), s = document.createDocumentFragment();
-    for (let n = 0; n < i.length; n += 2) {
-      const g = i[n], d = i[n + 1];
-      if (!d) continue;
-      const b = i[n + 3] === void 0 ? i[n + 2] ?? "" : "", A = document.createElement("span");
-      A.className = G.word, A.textContent = g + d + b, s.appendChild(A), E.push(A);
+  const M = o.axes ?? U.axes, h = o.radius ?? U.radius, d = o.falloff ?? U.falloff, b = o.magnetMode ?? U.magnetMode, F = o.scope ?? U.scope, m = o.props, w = o.transitionMs ?? 0, L = o.cachePositions ?? !0, X = o.stabilizeLayout ?? !0, V = window.scrollY;
+  t.innerHTML = n;
+  const j = ct(t), x = [];
+  for (const c of j) {
+    const e = c.textContent ?? "";
+    if (!e.trim()) continue;
+    const g = e.split(/(\S+)/), i = document.createDocumentFragment();
+    for (let u = 0; u < g.length; u += 2) {
+      const O = g[u], S = g[u + 1];
+      if (!S) continue;
+      const C = g[u + 3] === void 0 ? g[u + 2] ?? "" : "", q = document.createElement("span");
+      q.className = nt.word, q.textContent = O + S + C, i.appendChild(q), x.push(q);
     }
-    c.parentNode.replaceChild(s, c);
+    c.parentNode.replaceChild(i, c);
   }
   if (requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - L) > 2 && window.scrollTo({ top: L, behavior: "instant" });
-  }), E.length === 0) return () => {
+    typeof window < "u" && Math.abs(window.scrollY - V) > 2 && window.scrollTo({ top: V, behavior: "instant" });
+  }), x.length === 0) return () => {
   };
-  const q = getComputedStyle(e).fontVariationSettings, m = ot(
-    q,
-    Object.fromEntries(Object.entries(p).map(([c, [t]]) => [c, t]))
+  const y = getComputedStyle(t).fontVariationSettings, N = st(
+    y,
+    Object.fromEntries(Object.entries(M).map(([c, [e]]) => [c, e]))
   );
-  E.forEach((c) => {
-    c.style.fontVariationSettings = m, f && Q(c, f);
+  let H = 0;
+  if (X) {
+    const c = st(
+      y,
+      Object.fromEntries(Object.entries(M).map(([f, [, C]]) => [f, C]))
+    ), e = t.style.fontVariationSettings, g = t.style.whiteSpace, i = t.style.overflow;
+    t.style.whiteSpace = "nowrap", t.style.overflow = "visible", t.style.fontVariationSettings = c;
+    const u = t.scrollWidth;
+    t.style.fontVariationSettings = N;
+    const O = t.scrollWidth;
+    t.style.fontVariationSettings = e, t.style.whiteSpace = g, t.style.overflow = i;
+    const S = x.reduce(
+      (f, C) => {
+        var q;
+        return f + (((q = C.textContent) == null ? void 0 : q.replace(/\s+/g, "").length) ?? 0);
+      },
+      0
+    );
+    S > 0 && u > O && (H = (u - O) / S);
+  }
+  x.forEach((c) => {
+    c.style.fontVariationSettings = N, m && ot(c, m);
   });
-  let y = -9999, F = -9999, T = !1, u = 0, C = !0, N = null;
-  function h() {
-    if (!C) return;
-    if (!T) {
-      E.forEach((t) => {
-        M > 0 && (t.style.transition = `font-variation-settings ${M}ms ease`), t.style.fontVariationSettings = m, f && Q(t, f);
-      }), M > 0 && (N !== null && clearTimeout(N), N = setTimeout(() => {
-        E.forEach((t) => {
-          t.style.transition = "";
-        }), N = null;
-      }, M)), u = 0;
+  let _ = [], Y = !1;
+  function A() {
+    const c = window.scrollX, e = window.scrollY;
+    _ = x.map((g) => {
+      const i = g.getBoundingClientRect();
+      return { cx: (i.left + i.right) / 2 + c, cy: (i.top + i.bottom) / 2 + e };
+    }), Y = !0;
+  }
+  let $ = null;
+  L && (A(), $ = new ResizeObserver(() => {
+    Y = !1;
+  }), $.observe(t), (E = (a = document.fonts) == null ? void 0 : a.ready) == null || E.then(() => {
+    Y = !1;
+  }));
+  let B = -9999, v = -9999, R = !1, T = 0, D = !0, k = null;
+  function J() {
+    if (!D) return;
+    if (!R) {
+      x.forEach((i) => {
+        w > 0 && (i.style.transition = `font-variation-settings ${w}ms ease`), i.style.fontVariationSettings = N, X && (i.style.letterSpacing = ""), m && ot(i, m);
+      }), w > 0 && (k !== null && clearTimeout(k), k = setTimeout(() => {
+        x.forEach((i) => {
+          i.style.transition = "";
+        }), k = null;
+      }, w)), T = 0;
       return;
     }
-    const c = E.map((t) => t.getBoundingClientRect());
-    E.forEach((t, i) => {
-      t.style.transition = "";
-      const s = c[i], n = s.left + s.width / 2, g = s.top + s.height / 2, d = Math.sqrt((y - n) ** 2 + (F - g) ** 2), B = Math.max(0, 1 - d / a), b = l === "quadratic" ? B * B : B, A = S === "repel" ? 1 - b : b, I = {};
-      for (const _ of Object.keys(p)) {
-        const [D, V] = p[_] ?? [300, 500];
-        I[_] = D + (V - D) * A;
+    L && !Y && A();
+    const c = L ? B + window.scrollX : B, e = L ? v + window.scrollY : v, g = L ? null : x.map((i) => i.getBoundingClientRect());
+    x.forEach((i, u) => {
+      i.style.transition = "";
+      let O, S;
+      if (L)
+        ({ cx: O, cy: S } = _[u]);
+      else {
+        const K = g[u];
+        O = K.left + K.width / 2, S = K.top + K.height / 2;
       }
-      t.style.fontVariationSettings = ot(q, I), f && st(t, f, b);
-    }), u = requestAnimationFrame(h);
+      const f = Math.sqrt((c - O) ** 2 + (e - S) ** 2), C = Math.max(0, 1 - f / h), q = d === "quadratic" ? C * C : C, P = b === "repel" ? 1 - q : q, Z = {};
+      for (const K of Object.keys(M)) {
+        const [G, ut] = M[K] ?? [300, 500];
+        Z[K] = G + (ut - G) * P;
+      }
+      i.style.fontVariationSettings = st(y, Z), X && H !== 0 && (i.style.letterSpacing = `${(-H * P).toFixed(3)}px`), m && at(i, m, q);
+    }), T = requestAnimationFrame(J);
   }
-  function H(c) {
-    y = c.clientX, F = c.clientY, T || (T = !0), u === 0 && (u = requestAnimationFrame(h));
+  function Q(c) {
+    B = c.clientX, v = c.clientY, R || (R = !0), T === 0 && (T = requestAnimationFrame(J));
   }
-  function $() {
-    T = !1, u === 0 && (u = requestAnimationFrame(h));
+  function l() {
+    R = !1, T === 0 && (T = requestAnimationFrame(J));
   }
-  function X(c) {
-    c.touches.length !== 0 && (y = c.touches[0].clientX, F = c.touches[0].clientY, T || (T = !0), u === 0 && (u = requestAnimationFrame(h)));
+  function s(c) {
+    c.touches.length !== 0 && (B = c.touches[0].clientX, v = c.touches[0].clientY, R || (R = !0), T === 0 && (T = requestAnimationFrame(J)));
   }
-  function k() {
-    T = !1, u === 0 && (u = requestAnimationFrame(h));
+  function p() {
+    R = !1, T === 0 && (T = requestAnimationFrame(J));
   }
-  const v = w === "document" ? document : e;
-  return v.addEventListener("mousemove", H), v.addEventListener("mouseleave", $), v.addEventListener("touchmove", X, { passive: !0 }), v.addEventListener("touchend", k), () => {
-    C = !1, cancelAnimationFrame(u), N !== null && clearTimeout(N), v.removeEventListener("mousemove", H), v.removeEventListener("mouseleave", $), v.removeEventListener("touchmove", X), v.removeEventListener("touchend", k), e.innerHTML = r;
+  const r = F === "document" ? document : t;
+  return r.addEventListener("mousemove", Q), r.addEventListener("mouseleave", l), r.addEventListener("touchmove", s, { passive: !0 }), r.addEventListener("touchend", p), () => {
+    D = !1, cancelAnimationFrame(T), k !== null && clearTimeout(k), $ && $.disconnect(), r.removeEventListener("mousemove", Q), r.removeEventListener("mouseleave", l), r.removeEventListener("touchmove", s), r.removeEventListener("touchend", p), t.innerHTML = n;
   };
 }
-function mt(e) {
-  const r = O(null), o = O(null), p = O(e);
-  p.current = e;
-  const a = O(null), l = e.mode ?? "field", { axes: S, radius: w, falloff: f, magnetMode: M, wdthBoost: L, scope: Y } = e, E = S ? JSON.stringify(S) : void 0, q = e.props ? JSON.stringify(e.props) : void 0, m = R(() => {
-    const y = r.current;
+function yt(t) {
+  const n = I(null), o = I(null), M = I(t);
+  M.current = t;
+  const h = I(null), d = t.mode ?? "field", { axes: b, radius: F, falloff: m, magnetMode: w, wdthBoost: L, scope: X } = t, V = b ? JSON.stringify(b) : void 0, j = t.props ? JSON.stringify(t.props) : void 0, x = z(() => {
+    const y = n.current;
     if (!y) return;
-    o.current === null && (o.current = lt(y)), a.current && (a.current(), a.current = null), (p.current.mode ?? "field") === "field" ? a.current = dt(y, o.current, p.current) : a.current = ft(y, o.current, p.current);
-  }, [l, E, w, f, M, L, Y, q]);
-  return ut(() => (m(), () => {
-    a.current && (a.current(), a.current = null);
-  }), [m]), K(() => {
-    document.fonts.ready.then(m);
-  }, [m]), r;
+    o.current === null && (o.current = mt(y)), h.current && (h.current(), h.current = null), (M.current.mode ?? "field") === "field" ? h.current = ht(y, o.current, M.current) : h.current = pt(y, o.current, M.current);
+  }, [d, V, F, m, w, L, X, j]);
+  return ft(() => (x(), () => {
+    h.current && (h.current(), h.current = null);
+  }), [x]), W(() => {
+    var y, N;
+    (N = (y = document.fonts) == null ? void 0 : y.ready) == null || N.then(x);
+  }, [x]), n;
 }
-const pt = ct(
-  function({ children: r, as: o = "p", className: p, style: a, ...l }, S) {
-    const w = mt(l), f = R(
-      (M) => {
-        w.current = M, typeof S == "function" ? S(M) : S && (S.current = M);
+const gt = lt(
+  function({ children: n, as: o = "p", className: M, style: h, ...d }, b) {
+    const F = yt(d), m = z(
+      (w) => {
+        F.current = w, typeof b == "function" ? b(w) : b && (b.current = w);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [S]
+      [b]
     );
-    return /* @__PURE__ */ U(o, { ref: f, className: p, style: a, children: r });
+    return /* @__PURE__ */ tt(o, { ref: m, className: M, style: h, children: n });
   }
 );
-pt.displayName = "MagnetTypeText";
-const ht = ct(
+gt.displayName = "MagnetTypeText";
+const vt = lt(
   function({
-    children: r,
+    children: n,
     as: o = "p",
-    className: p,
-    style: a,
-    minWeight: l = 300,
-    maxWeight: S = 600,
-    proximityRadius: w,
-    spreadRadius: f,
-    fixedAxes: M = {},
+    className: M,
+    style: h,
+    minWeight: d = 300,
+    maxWeight: b = 600,
+    proximityRadius: F,
+    spreadRadius: m,
+    fixedAxes: w = {},
     cachePositions: L = !0,
-    rafThrottle: Y = !0
-  }, E) {
-    const q = O(null), m = O(null), y = O([]), F = O([]), T = O(null), u = O(!1), C = O(null), N = R(
-      (t) => {
-        q.current = t, typeof E == "function" ? E(t) : E && (E.current = t);
+    rafThrottle: X = !0,
+    stabilizeLayout: V = !0
+  }, j) {
+    const x = I(null), y = I(null), N = I([]), H = I([]), _ = I(null), Y = I(!1), A = I(null), $ = I(0), B = z(
+      (l) => {
+        x.current = l, typeof j == "function" ? j(l) : j && (j.current = l);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [E]
+      [j]
     );
-    function h(t) {
-      const i = [`'wght' ${t.toFixed(0)}`];
-      for (const [s, n] of Object.entries(M)) i.push(`'${s}' ${n}`);
-      return i.join(", ");
+    function v(l) {
+      const s = [`'wght' ${l.toFixed(0)}`];
+      for (const [p, r] of Object.entries(w)) s.push(`'${p}' ${r}`);
+      return s.join(", ");
     }
-    function H() {
-      const t = q.current;
-      if (!t) return;
-      const i = window.scrollX, s = window.scrollY, n = t.getBoundingClientRect();
-      T.current = {
-        top: n.top + s,
-        left: n.left + i,
-        right: n.right + i,
-        bottom: n.bottom + s
-      }, F.current = y.current.map((g) => {
-        if (!g) return { cx: 0, cy: 0 };
-        const d = g.getBoundingClientRect();
+    function R() {
+      const l = x.current;
+      if (!l) return;
+      const s = window.scrollX, p = window.scrollY, r = l.getBoundingClientRect();
+      _.current = {
+        top: r.top + p,
+        left: r.left + s,
+        right: r.right + s,
+        bottom: r.bottom + p
+      }, H.current = N.current.map((a) => {
+        if (!a) return { cx: 0, cy: 0 };
+        const E = a.getBoundingClientRect();
         return {
-          cx: (d.left + d.right) / 2 + i,
-          cy: (d.top + d.bottom) / 2 + s
+          cx: (E.left + E.right) / 2 + s,
+          cy: (E.top + E.bottom) / 2 + p
         };
-      }), u.current = !0;
+      }), Y.current = !0;
     }
-    function $(t, i) {
-      const s = q.current;
-      if (!s) return;
-      L && !u.current && H();
-      let n, g, d, B, b, A;
-      if (L && T.current)
-        b = t + window.scrollX, A = i + window.scrollY, { top: n, left: g, right: d, bottom: B } = T.current;
+    function T(l, s) {
+      const p = x.current;
+      if (!p) return;
+      L && !Y.current && R();
+      let r, a, E, c, e, g;
+      if (L && _.current)
+        e = l + window.scrollX, g = s + window.scrollY, { top: r, left: a, right: E, bottom: c } = _.current;
       else {
-        const V = s.getBoundingClientRect();
-        b = t, A = i, n = V.top, g = V.left, d = V.right, B = V.bottom;
+        const S = p.getBoundingClientRect();
+        e = l, g = s, r = S.top, a = S.left, E = S.right, c = S.bottom;
       }
-      const I = Math.max(g - b, 0, b - d), _ = Math.max(n - A, 0, A - B), D = Math.sqrt(I * I + _ * _);
-      if (w !== void 0 && !f) {
-        const x = 1 - (1 - Math.max(0, 1 - D / w)) ** 2;
-        s.style.fontVariationSettings = h(l + (S - l) * x);
+      const i = Math.max(a - e, 0, e - E), u = Math.max(r - g, 0, g - c), O = Math.sqrt(i * i + u * u);
+      if (F !== void 0 && !m) {
+        const f = 1 - (1 - Math.max(0, 1 - O / F)) ** 2;
+        p.style.fontVariationSettings = v(d + (b - d) * f);
         return;
       }
-      if (f) {
-        if (w !== void 0 && D > w) {
-          s.style.fontVariationSettings = h(l);
-          for (const x of y.current) x && (x.style.fontVariationSettings = h(l));
+      if (m) {
+        if (F !== void 0 && O > F) {
+          p.style.fontVariationSettings = v(d);
+          for (const f of N.current)
+            f && (f.style.fontVariationSettings = v(d), V && (f.style.letterSpacing = ""));
           return;
         }
-        if (D > f) {
-          for (const x of y.current) x && (x.style.fontVariationSettings = h(l));
+        if (O > m) {
+          for (const f of N.current)
+            f && (f.style.fontVariationSettings = v(d), V && (f.style.letterSpacing = ""));
           return;
         }
-        const V = y.current;
-        if (L && F.current.length === V.length)
-          for (let x = 0; x < V.length; x++) {
-            const J = V[x];
-            if (!J) continue;
-            const { cx: Z, cy: P } = F.current[x], W = Math.sqrt((b - Z) ** 2 + (A - P) ** 2), tt = 1 - (1 - Math.max(0, 1 - W / f)) ** 2;
-            J.style.fontVariationSettings = h(l + (S - l) * tt);
+        const S = N.current;
+        if (L && H.current.length === S.length)
+          for (let f = 0; f < S.length; f++) {
+            const C = S[f];
+            if (!C) continue;
+            const { cx: q, cy: P } = H.current[f], Z = Math.sqrt((e - q) ** 2 + (g - P) ** 2), G = 1 - (1 - Math.max(0, 1 - Z / m)) ** 2;
+            C.style.fontVariationSettings = v(d + (b - d) * G), V && $.current !== 0 && (C.style.letterSpacing = `${(-$.current * G).toFixed(3)}px`);
           }
         else
-          for (const x of V) {
-            if (!x) continue;
-            const J = x.getBoundingClientRect(), Z = (J.left + J.right) / 2, P = (J.top + J.bottom) / 2, W = Math.sqrt((t - Z) ** 2 + (i - P) ** 2), tt = 1 - (1 - Math.max(0, 1 - W / f)) ** 2;
-            x.style.fontVariationSettings = h(l + (S - l) * tt);
+          for (const f of S) {
+            if (!f) continue;
+            const C = f.getBoundingClientRect(), q = (C.left + C.right) / 2, P = (C.top + C.bottom) / 2, Z = Math.sqrt((l - q) ** 2 + (s - P) ** 2), G = 1 - (1 - Math.max(0, 1 - Z / m)) ** 2;
+            f.style.fontVariationSettings = v(d + (b - d) * G), V && $.current !== 0 && (f.style.letterSpacing = `${(-$.current * G).toFixed(3)}px`);
           }
       }
     }
-    const X = R(
-      (t) => {
-        m.current = { x: t.clientX, y: t.clientY }, Y ? C.current === null && (C.current = requestAnimationFrame(() => {
-          C.current = null, m.current && $(m.current.x, m.current.y);
-        })) : $(t.clientX, t.clientY);
+    const D = z(
+      (l) => {
+        y.current = { x: l.clientX, y: l.clientY }, X ? A.current === null && (A.current = requestAnimationFrame(() => {
+          A.current = null, y.current && T(y.current.x, y.current.y);
+        })) : T(l.clientX, l.clientY);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [l, S, w, f, L, Y, JSON.stringify(M)]
-    ), k = R(
+      [d, b, F, m, L, X, V, JSON.stringify(w)]
+    ), k = z(
       () => {
-        m.current && $(m.current.x, m.current.y);
+        y.current && T(y.current.x, y.current.y);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [l, S, w, f, L, JSON.stringify(M)]
-    ), v = R(
+      [d, b, F, m, L, V, JSON.stringify(w)]
+    ), J = z(
       () => {
-        m.current = null, C.current !== null && (cancelAnimationFrame(C.current), C.current = null);
-        const t = q.current;
-        t && (t.style.fontVariationSettings = h(l));
-        for (const i of y.current) i && (i.style.fontVariationSettings = h(l));
+        y.current = null, A.current !== null && (cancelAnimationFrame(A.current), A.current = null);
+        const l = x.current;
+        l && (l.style.fontVariationSettings = v(d));
+        for (const s of N.current)
+          s && (s.style.fontVariationSettings = v(d), V && (s.style.letterSpacing = ""));
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [l, JSON.stringify(M)]
+      [d, V, JSON.stringify(w)]
     );
-    K(() => (window.addEventListener("mousemove", X, { passive: !0 }), window.addEventListener("scroll", k, { passive: !0, capture: !0 }), document.documentElement.addEventListener("mouseleave", v), () => {
-      window.removeEventListener("mousemove", X), window.removeEventListener("scroll", k, { capture: !0 }), document.documentElement.removeEventListener("mouseleave", v), C.current !== null && (cancelAnimationFrame(C.current), C.current = null);
-    }), [X, k, v]), K(() => {
-      if (!L || !f) return;
-      u.current = !1;
-      const t = q.current;
-      if (!t) return;
-      const i = new ResizeObserver(() => {
-        u.current = !1;
+    W(() => (window.addEventListener("mousemove", D, { passive: !0 }), window.addEventListener("scroll", k, { passive: !0, capture: !0 }), document.documentElement.addEventListener("mouseleave", J), () => {
+      window.removeEventListener("mousemove", D), window.removeEventListener("scroll", k, { capture: !0 }), document.documentElement.removeEventListener("mouseleave", J), A.current !== null && (cancelAnimationFrame(A.current), A.current = null);
+    }), [D, k, J]), W(() => {
+      var p, r;
+      if (!L || !m) return;
+      Y.current = !1;
+      const l = x.current;
+      if (!l) return;
+      const s = new ResizeObserver(() => {
+        Y.current = !1;
       });
-      return i.observe(t), document.fonts.ready.then(() => {
-        u.current = !1;
-      }), () => i.disconnect();
-    }, [L, f]), K(() => {
-      u.current = !1;
-    }, [r, f]);
-    const c = at(() => {
-      if (!f) return r;
-      y.current = [];
-      let t = 0;
-      function i(s) {
-        if (typeof s == "string")
-          return [...s].map((n) => {
-            if (/\s/.test(n)) return n;
-            const g = t++;
-            return /* @__PURE__ */ U(
+      return s.observe(l), (r = (p = document.fonts) == null ? void 0 : p.ready) == null || r.then(() => {
+        Y.current = !1;
+      }), () => s.disconnect();
+    }, [L, m]), W(() => {
+      Y.current = !1;
+    }, [n, m]), W(() => {
+      var s, p;
+      if (!V || !m) {
+        $.current = 0;
+        return;
+      }
+      function l() {
+        const r = x.current;
+        if (!r) return;
+        const a = r.textContent ?? "", E = a.replace(/\s/g, "").length;
+        if (E === 0) return;
+        const c = getComputedStyle(r), e = document.createElement("span");
+        e.style.cssText = "position:fixed;top:-9999px;left:-9999px;visibility:hidden;white-space:nowrap;pointer-events:none;", e.style.fontFamily = c.fontFamily, e.style.fontSize = c.fontSize, e.style.fontWeight = c.fontWeight, e.style.lineHeight = c.lineHeight, e.style.letterSpacing = c.letterSpacing, e.textContent = a, document.body.appendChild(e);
+        const g = (O) => {
+          const S = [`'wght' ${O.toFixed(0)}`];
+          for (const [f, C] of Object.entries(w)) S.push(`'${f}' ${C}`);
+          return S.join(", ");
+        };
+        e.style.fontVariationSettings = g(b);
+        const i = e.scrollWidth;
+        e.style.fontVariationSettings = g(d);
+        const u = e.scrollWidth;
+        document.body.removeChild(e), $.current = i > u ? (i - u) / E : 0;
+      }
+      l(), (p = (s = document.fonts) == null ? void 0 : s.ready) == null || p.then(l);
+    }, [V, m, d, b, n, JSON.stringify(w)]);
+    const Q = dt(() => {
+      if (!m) return n;
+      N.current = [];
+      let l = 0;
+      function s(p) {
+        if (typeof p == "string")
+          return [...p].map((r) => {
+            if (/\s/.test(r)) return r;
+            const a = l++;
+            return /* @__PURE__ */ tt(
               "span",
               {
-                ref: (d) => {
-                  y.current[g] = d;
+                ref: (E) => {
+                  N.current[a] = E;
                 },
-                style: { fontVariationSettings: h(l) },
-                children: n
+                style: { fontVariationSettings: v(d) },
+                children: r
               },
-              g
+              a
             );
           });
-        if (Array.isArray(s)) return s.map((n, g) => /* @__PURE__ */ U(et.Fragment, { children: i(n) }, g));
-        if (et.isValidElement(s)) {
-          const n = s;
-          if (n.props.children !== void 0)
-            return et.cloneElement(n, {}, i(n.props.children));
+        if (Array.isArray(p)) return p.map((r, a) => /* @__PURE__ */ tt(rt.Fragment, { children: s(r) }, a));
+        if (rt.isValidElement(p)) {
+          const r = p;
+          if (r.props.children !== void 0)
+            return rt.cloneElement(r, {}, s(r.props.children));
         }
-        return s;
+        return p;
       }
-      return i(r);
-    }, [r, f, l, JSON.stringify(M)]);
-    return /* @__PURE__ */ U(
+      return s(n);
+    }, [n, m, d, JSON.stringify(w)]);
+    return /* @__PURE__ */ tt(
       o,
       {
-        ref: N,
-        className: p,
-        style: { fontVariationSettings: h(l), ...a },
-        children: c
+        ref: B,
+        className: M,
+        style: { fontVariationSettings: v(d), ...h },
+        children: Q
       }
     );
   }
 );
-ht.displayName = "MagnetBlock";
+vt.displayName = "MagnetBlock";
 export {
-  G as MAGNET_TYPE_CLASSES,
-  ht as MagnetBlock,
-  pt as MagnetTypeText,
-  ft as applyMagnetType,
-  lt as getCleanHTML,
-  gt as removeMagnetType,
-  dt as startMagnetType,
-  mt as useMagnetType
+  nt as MAGNET_TYPE_CLASSES,
+  vt as MagnetBlock,
+  gt as MagnetTypeText,
+  pt as applyMagnetType,
+  mt as getCleanHTML,
+  Mt as removeMagnetType,
+  ht as startMagnetType,
+  yt as useMagnetType
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/magnettype",
-	"version": "1.1.4",
+	"version": "1.1.6",
 	"description": "Cursor-field per-word variable font axis variation and per-character legibility mode",
 	"type": "module",
 	"main": "dist/index.cjs",