@liiift-studio/magnettype 1.1.5 → 1.2.0

package/README.md

@@ -30,7 +30,7 @@ Per-word cursor-proximity weight variation driven by a continuous rAF loop.
 import { MagnetTypeText } from '@liiift-studio/magnettype'
 
 <MagnetTypeText
-  mode="field"
+  mode="word"
   axes={{ wght: [300, 700] }}
   radius={150}
   falloff="quadratic"
@@ -40,43 +40,43 @@ import { MagnetTypeText } from '@liiift-studio/magnettype'
 </MagnetTypeText>
 ```
 
-### React — block mode (`MagnetBlock`)
+### React — block mode (`MagnetChar`)
 
 Per-character cursor-proximity weight variation. Works with mixed content (inline elements, links, `<code>`, etc.) inside any block element. Characters are wrapped as React elements — no DOM mutation.
 
 ```tsx
-import { MagnetBlock } from '@liiift-studio/magnettype'
+import { MagnetChar } from '@liiift-studio/magnettype'
 
 // Per-character spread — each character responds to cursor distance
-<MagnetBlock
+<MagnetChar
   spreadRadius={200}
   minWeight={300}
   maxWeight={700}
 >
   Typography that responds to presence.
-</MagnetBlock>
+</MagnetChar>
 
 // Whole-element gate — the effect only activates when the cursor is within proximityRadius of the element edge
-<MagnetBlock
+<MagnetChar
   proximityRadius={120}
   minWeight={300}
   maxWeight={700}
 >
   Weight rises when the cursor enters.
-</MagnetBlock>
+</MagnetChar>
 
 // Both combined — proximity gates the spread effect
-<MagnetBlock
+<MagnetChar
   proximityRadius={200}
   spreadRadius={120}
   minWeight={300}
   maxWeight={700}
 >
   Only spreads when the cursor is close.
-</MagnetBlock>
+</MagnetChar>
 ```
 
-**`MagnetBlock` props:**
+**`MagnetChar` props:**
 
 | Prop | Default | Description |
 |------|---------|-------------|
@@ -97,7 +97,7 @@ import { MagnetBlock } from '@liiift-studio/magnettype'
 ```tsx
 import { useMagnetType } from '@liiift-studio/magnettype'
 
-const ref = useMagnetType({ mode: 'field', axes: { wght: [300, 700] }, radius: 150 })
+const ref = useMagnetType({ mode: 'word', axes: { wght: [300, 700] }, radius: 150 })
 return <p ref={ref}>{children}</p>
 ```
 
@@ -120,7 +120,7 @@ import { startMagnetType, removeMagnetType, getCleanHTML } from '@liiift-studio/
 
 const el = document.querySelector('p')
 const original = getCleanHTML(el)
-const opts = { mode: 'field', axes: { wght: [300, 700] }, radius: 150 }
+const opts = { mode: 'word', axes: { wght: [300, 700] }, radius: 150 }
 
 let stop
 
@@ -163,10 +163,10 @@ ro.observe(el)
 ### TypeScript
 
 ```ts
-import type { MagnetTypeOptions, FalloffType, MagnetModeType, MagnetBlockProps } from '@liiift-studio/magnettype'
+import type { MagnetTypeOptions, FalloffType, MagnetModeType, MagnetCharProps } from '@liiift-studio/magnettype'
 
 const fieldOpts: MagnetTypeOptions = {
-  mode: 'field',
+  mode: 'word',
   axes: { wght: [300, 700], wdth: [90, 110] },
   radius: 120,
   falloff: 'quadratic' as FalloffType,
@@ -185,7 +185,7 @@ const legibilityOpts: MagnetTypeOptions = {
 
 | Option | Default | Description |
 |--------|---------|-------------|
-| `mode` | `'field'` | `'field'` — cursor proximity drives per-word `font-variation-settings` via a continuous rAF loop. `'legibility'` — static per-character `wdth` boost on visually confusable characters |
+| `mode` | `'word'` | `'word'` — cursor proximity drives per-word `font-variation-settings` via a continuous rAF loop. `'legibility'` — static per-character `wdth` boost on visually confusable characters |
 | `axes` | `{ wght: [300, 500] }` | *(field mode)* Map of axis tag → `[restValue, peakValue]` |
 | `radius` | `120` | *(field mode)* Pixel radius over which the field effect fades from each word's centre |
 | `falloff` | `'quadratic'` | *(field mode)* `'linear'` or `'quadratic'` falloff curve |
@@ -209,9 +209,9 @@ strength   = normalised² (quadratic) or normalised (linear)
 
 Each word's `font-variation-settings` interpolates between `restValue` and `peakValue` at that strength. Reads are batched before writes on every frame to avoid layout thrashing. When the cursor leaves, one final frame resets all words to `restValue`.
 
-### Block mode (`MagnetBlock`)
+### Block mode (`MagnetChar`)
 
-`MagnetBlock` splits string children into per-character `<span>` elements during the React render pass using `useMemo` — no DOM mutation. Callback refs collect each span element. On `mousemove` (and on `scroll`, using the stored last position), the component reads each span's `getBoundingClientRect`, computes cursor-to-character-centre distance, and sets `font-variation-settings` directly on the span's style. This is passive and batched per frame via the event handler.
+`MagnetChar` splits string children into per-character `<span>` elements during the React render pass using `useMemo` — no DOM mutation. Callback refs collect each span element. On `mousemove` (and on `scroll`, using the stored last position), the component reads each span's `getBoundingClientRect`, computes cursor-to-character-centre distance, and sets `font-variation-settings` directly on the span's style. This is passive and batched per frame via the event handler.
 
 `proximityRadius` measures cursor distance to the element **edge** (not its centre) — useful as an outer gate so the effect only fires when the cursor is actually near the block. `spreadRadius` measures cursor distance to each **character centre** — controls how wide the weight gradient spreads around the cursor within the block. Both are independent and combinable.
 
@@ -247,4 +247,4 @@ The package itself has zero runtime dependencies. Do not remove this entry.
 
 ---
 
-Current version: 1.1.5
+Current version: 1.2.0

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -38,9 +38,15 @@ export declare const MAGNET_TYPE_CLASSES: {
     readonly probe: "mt-probe";
 };
 
-export declare const MagnetBlock: default_2.ForwardRefExoticComponent<MagnetBlockProps & default_2.RefAttributes<HTMLElement>>;
+/** @deprecated Use MagnetChar instead */
+export declare const MagnetBlock: default_2.ForwardRefExoticComponent<MagnetCharProps & default_2.RefAttributes<HTMLElement>>;
 
-export declare interface MagnetBlockProps {
+/** @deprecated Use MagnetCharProps instead */
+export declare type MagnetBlockProps = MagnetCharProps;
+
+export declare const MagnetChar: default_2.ForwardRefExoticComponent<MagnetCharProps & default_2.RefAttributes<HTMLElement>>;
+
+export declare interface MagnetCharProps {
     children: default_2.ReactNode;
     /** HTML element to render. Default: 'p' */
     as?: default_2.ElementType;
@@ -87,7 +93,7 @@ export declare interface MagnetBlockProps {
 export declare type MagnetModeType = 'attract' | 'repel';
 
 /** Which mode magnetType operates in */
-export declare type MagnetTypeModeType = 'field' | 'legibility';
+export declare type MagnetTypeModeType = 'word' | 'legibility';
 
 /**
  * Options for the magnetType effect.
@@ -98,9 +104,9 @@ export declare type MagnetTypeModeType = 'field' | 'legibility';
  */
 export declare interface MagnetTypeOptions {
     /**
-     * Operating mode. Default: 'field'
+     * Operating mode. Default: 'word'
      *
-     * - **'field'** — cursor proximity drives per-word font-variation-settings.
+     * - **'word'** — cursor proximity drives per-word font-variation-settings.
      * - **'legibility'** — cursor-driven wdth boost for confusable characters; both return a stop function.
      */
     mode?: MagnetTypeModeType;
@@ -249,13 +255,13 @@ export declare function startMagnetType(element: HTMLElement, originalHTML: stri
 /**
  * React hook that applies the magnetType effect to a ref'd element.
  *
- * For mode: 'field' — starts the cursor proximity rAF loop via startMagnetType.
+ * For mode: 'word' — starts the cursor proximity rAF loop via startMagnetType.
  * For mode: 'legibility' — starts the cursor-driven wdth boost via applyMagnetType.
  *
  * Both modes return a stop function on mount and restart when options change.
  * No ResizeObserver needed — the rAF loop reads live getBoundingClientRect each frame.
  *
- * Defaults to 'field' mode if mode is undefined.
+ * Defaults to 'word' mode if mode is undefined.
  */
 export declare function useMagnetType(options: MagnetTypeOptions): RefObject<HTMLElement | null>;
 

package/dist/index.js

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

package/package.json

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