@liiift-studio/magnettype 1.0.8 → 1.1.1

package/README.md

@@ -140,6 +140,7 @@ const legibilityOpts: MagnetTypeOptions = {
 | `falloff` | `'quadratic'` | *(field mode only)* Falloff curve. `'linear'` — strength decreases linearly with distance. `'quadratic'` — strength decreases as distance², giving a tighter hot zone and a sharper peak feel |
 | `magnetMode` | `'attract'` | *(field mode only)* `'attract'` — words near the cursor approach `peakValue`. `'repel'` — words near the cursor stay at `restValue`; words farther away approach `peakValue` |
 | `wdthBoost` | `6` | *(legibility mode only)* `wdth` axis units added to confusable characters, scaled by risk level. Risk 3 characters (`i l 1 I`) receive the full boost; risk 2 characters (`r 0 O`) receive ⅔; risk 1 characters (`n m o b d p q c e`) receive ⅓ |
+| `transitionMs` | `0` | Duration in milliseconds for the CSS transition back to rest values when the cursor leaves (or a touch ends). `0` preserves the existing instant snap. When > 0, `font-variation-settings` animates back over the given duration using `ease` easing. The transition is cleared immediately on the next `mousemove`/`touchmove` so live tracking is not delayed |
 | `as` | `'p'` | HTML element to render, e.g. `'h1'`, `'div'`, `'span'`. Accepts any valid React element type. *(React component only)* |
 
 ---
@@ -187,12 +188,10 @@ The package itself has zero runtime dependencies. Do not remove this entry.
 
 ## Future improvements
 
-- **Touch support** — `touchmove` events for mobile field mode; currently `mousemove`-only, so the effect is desktop-exclusive
-- **Smooth transition on stop** — animate axis values back to `restValue` over a short duration when the cursor leaves, rather than snapping on the next rAF tick
 - **Custom confusable table** — allow callers to pass their own `Record<string, number>` to override or extend the built-in character risk map for language- or font-specific tuning
 - **Axis clamping** — optional per-axis min/max clamp to prevent axis values from exceeding a font's supported range, avoiding undefined browser rendering behaviour
 - **SSR hydration** — pre-render legibility mode markup on the server so boosted characters are present from first paint without a client-side flash
 
 ---
 
-Current version: v1.0.7
+Current version: 0.1.3

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import { default as default_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 
 /**
@@ -38,6 +40,28 @@ export declare const MAGNET_TYPE_CLASSES: {
     readonly probe: "mt-probe";
 };
 
+/**
+ * Drop-in block element with cursor-proximity variable font weight variation.
+ * Accepts any ReactNode — use spreadRadius for per-word spread, proximityRadius
+ * for a whole-element proximity gate, or combine both.
+ */
+export declare const MagnetBlock: ForwardRefExoticComponent<MagnetBlockProps & RefAttributes<HTMLElement>>;
+
+export declare interface MagnetBlockProps {
+    children: React.ReactNode;
+    /** HTML element to render. Default: 'p' */
+    as?: React.ElementType;
+    className?: string;
+    style?: React.CSSProperties;
+    minWeight?: number;
+    maxWeight?: number;
+    /** Pixel distance from the element edge within which the whole-element effect activates */
+    proximityRadius?: number;
+    /** Pixel distance from the cursor within which each word's weight rises to max */
+    spreadRadius?: number;
+    fixedAxes?: Record<string, number>;
+}
+
 /** Whether cursor proximity attracts toward peak or repels toward rest */
 export declare type MagnetModeType = 'attract' | 'repel';
 
@@ -104,6 +128,15 @@ export declare interface MagnetTypeOptions {
      * Risk 3 characters receive wdthBoost × (3/3) = full boost at peak.
      */
     wdthBoost?: number;
+    /**
+     * Duration in milliseconds for the CSS transition back to rest values when the
+     * cursor leaves (mouseleave / touchend). Default: 0 (instant snap, no transition).
+     *
+     * When > 0, sets `transition: font-variation-settings <transitionMs>ms ease` on
+     * each span at leave time, then removes the transition property after the duration.
+     * On mousemove / touchmove the transition is cleared so live tracking is not delayed.
+     */
+    transitionMs?: number;
 }
 
 /**

package/dist/index.js

@@ -1,6 +1,6 @@
-import { useRef as B, useCallback as _, useLayoutEffect as J, useEffect as K, forwardRef as U } from "react";
-import { jsx as G } from "react/jsx-runtime";
-const D = {
+import { useRef as k, useCallback as j, useLayoutEffect as tt, useEffect as _, forwardRef as z } from "react";
+import { jsx as Q } from "react/jsx-runtime";
+const G = {
   i: 3,
   l: 3,
   1: 3,
@@ -22,14 +22,14 @@ const D = {
   c: 1,
   e: 1
   // similar bowls
-}, V = {
+}, I = {
   /** 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"
-}, C = {
+}, Y = {
   axes: { wght: [300, 500] },
   radius: 120,
   falloff: "quadratic",
@@ -37,196 +37,320 @@ const D = {
   wdthBoost: 6,
   scope: "document"
 };
-function k(t, e = []) {
-  return t.nodeType === Node.TEXT_NODE ? e.push(t) : t.childNodes.forEach((n) => k(n, e)), e;
+function J(t, o = []) {
+  return t.nodeType === Node.TEXT_NODE ? o.push(t) : t.childNodes.forEach((r) => J(r, o)), o;
 }
-function $(t, e, n) {
-  if (!t || t === "normal") return `"${e}" ${n}`;
-  const c = new RegExp(`(["'])${e}\\1\\s+[\\d.eE+-]+`), o = `"${e}" ${n}`;
-  return c.test(t) ? t.replace(c, o) : `${t}, ${o}`;
+function D(t, o, r) {
+  if (!t || t === "normal") return `"${o}" ${r}`;
+  const f = new RegExp(`(["'])${o}\\1\\s+[\\d.eE+-]+`), c = `"${o}" ${r}`;
+  return f.test(t) ? t.replace(f, c) : `${t}, ${c}`;
 }
-function I(t, e) {
-  let n = t;
-  for (const [c, o] of Object.entries(e))
-    n = $(n, c, o);
-  return n;
+function R(t, o) {
+  let r = t;
+  for (const [f, c] of Object.entries(o))
+    r = D(r, f, c);
+  return r;
 }
-function P(t, e, n) {
-  if (e.opacity !== void 0) {
-    const [c, o] = e.opacity;
-    t.style.opacity = String(c + (o - c) * n);
+function Z(t, o, r) {
+  if (o.opacity !== void 0) {
+    const [f, c] = o.opacity;
+    t.style.opacity = String(f + (c - f) * r);
   }
-  e.italic === !0 && (t.style.fontStyle = n > 0.5 ? "italic" : "");
+  o.italic === !0 && (t.style.fontStyle = r > 0.5 ? "italic" : "");
 }
-function j(t, e) {
-  e.opacity !== void 0 && (t.style.opacity = String(e.opacity[0])), e.italic === !0 && (t.style.fontStyle = "");
+function P(t, o) {
+  o.opacity !== void 0 && (t.style.opacity = String(o.opacity[0])), o.italic === !0 && (t.style.fontStyle = "");
 }
-function z(t) {
-  const e = t.cloneNode(!0), n = e.querySelectorAll(
-    `.${V.word}, .${V.char}`
+function et(t) {
+  const o = t.cloneNode(!0), r = o.querySelectorAll(
+    `.${I.word}, .${I.char}`
   );
-  return Array.from(n).reverse().forEach((o) => {
-    const y = o.parentNode;
-    if (y) {
-      for (; o.firstChild; ) y.insertBefore(o.firstChild, o);
-      y.removeChild(o);
+  return Array.from(r).reverse().forEach((c) => {
+    const a = c.parentNode;
+    if (a) {
+      for (; c.firstChild; ) a.insertBefore(c.firstChild, c);
+      a.removeChild(c);
     }
-  }), e.innerHTML;
+  }), o.innerHTML;
 }
-function rt(t, e) {
-  t.innerHTML = e;
+function ut(t, o) {
+  t.innerHTML = o;
 }
-function Q(t, e, n = {}) {
+function nt(t, o, r = {}) {
   if (typeof window > "u") return () => {
   };
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-    return t.innerHTML = e, () => {
+    return t.innerHTML = o, () => {
     };
-  const c = n.wdthBoost ?? C.wdthBoost, o = n.radius ?? C.radius, y = n.falloff ?? C.falloff, m = n.scope ?? C.scope, p = n.props, d = window.scrollY;
-  t.innerHTML = e;
-  const l = getComputedStyle(t).fontVariationSettings, A = l.match(/"wdth"\s+([\d.eE+-]+)/), h = A ? parseFloat(A[1]) : 100, q = k(t), w = [];
-  for (const r of q) {
-    const s = r.textContent ?? "";
-    if (!s || !s.split("").some((i) => i in D)) continue;
-    const u = document.createDocumentFragment();
-    for (const i of s) {
-      const L = D[i];
-      if (L === void 0) {
-        const a = u.lastChild;
-        a && a.nodeType === Node.TEXT_NODE ? a.textContent += i : u.appendChild(document.createTextNode(i));
+  const f = r.wdthBoost ?? Y.wdthBoost, c = r.radius ?? Y.radius, a = r.falloff ?? Y.falloff, w = r.scope ?? Y.scope, v = r.props, d = r.transitionMs ?? 0, x = window.scrollY;
+  t.innerHTML = o;
+  const L = getComputedStyle(t).fontVariationSettings, N = L.match(/"wdth"\s+([\d.eE+-]+)/), y = N ? parseFloat(N[1]) : 100, A = J(t), M = [];
+  for (const n of A) {
+    const e = n.textContent ?? "";
+    if (!e || !e.split("").some((m) => m in G)) continue;
+    const p = document.createDocumentFragment();
+    for (const m of e) {
+      const B = G[m];
+      if (B === void 0) {
+        const E = p.lastChild;
+        E && E.nodeType === Node.TEXT_NODE ? E.textContent += m : p.appendChild(document.createTextNode(m));
       } else {
-        const a = document.createElement("span");
-        a.className = V.char, a.style.fontVariationSettings = $(l, "wdth", h), a.textContent = i, u.appendChild(a), w.push({ span: a, riskLevel: L });
+        const E = document.createElement("span");
+        E.className = I.char, E.style.fontVariationSettings = D(L, "wdth", y), E.textContent = m, p.appendChild(E), M.push({ span: E, riskLevel: B });
       }
     }
-    r.parentNode.replaceChild(u, r);
+    n.parentNode.replaceChild(p, n);
   }
   if (requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - d) > 2 && window.scrollTo({ top: d, behavior: "instant" });
-  }), w.length === 0) return () => {
+    typeof window < "u" && Math.abs(window.scrollY - x) > 2 && window.scrollTo({ top: x, behavior: "instant" });
+  }), M.length === 0) return () => {
   };
-  p && w.forEach(({ span: r }) => j(r, p));
-  let g = -9999, v = -9999, M = !1, f = 0, F = !0;
-  function N() {
-    if (!F) return;
-    if (!M) {
-      w.forEach(({ span: s }) => {
-        s.style.fontVariationSettings = $(l, "wdth", h), p && j(s, p);
-      }), f = 0;
+  v && M.forEach(({ span: n }) => P(n, v));
+  let h = -9999, q = -9999, g = !1, i = 0, V = !0, s = null;
+  function l() {
+    if (!V) return;
+    if (!g) {
+      M.forEach(({ span: e }) => {
+        d > 0 && (e.style.transition = `font-variation-settings ${d}ms ease`), e.style.fontVariationSettings = D(L, "wdth", y), v && P(e, v);
+      }), d > 0 && (s !== null && clearTimeout(s), s = setTimeout(() => {
+        M.forEach(({ span: e }) => {
+          e.style.transition = "";
+        }), s = null;
+      }, d)), i = 0;
       return;
     }
-    const r = w.map(({ span: s }) => s.getBoundingClientRect());
-    w.forEach(({ span: s, riskLevel: E }, u) => {
-      const i = r[u], L = i.left + i.width / 2, a = i.top + i.height / 2, b = Math.sqrt((g - L) ** 2 + (v - a) ** 2), T = Math.max(0, 1 - b / o), S = y === "quadratic" ? T * T : T, R = c * (E / 3) * S;
-      s.style.fontVariationSettings = $(l, "wdth", h + R), p && P(s, p, S);
-    }), f = requestAnimationFrame(N);
+    const n = M.map(({ span: e }) => e.getBoundingClientRect());
+    M.forEach(({ span: e, riskLevel: T }, p) => {
+      e.style.transition = "";
+      const m = n[p], B = m.left + m.width / 2, E = m.top + m.height / 2, X = Math.sqrt((h - B) ** 2 + (q - E) ** 2), O = Math.max(0, 1 - X / c), $ = a === "quadratic" ? O * O : O, H = f * (T / 3) * $;
+      e.style.fontVariationSettings = D(L, "wdth", y + H), v && Z(e, v, $);
+    }), i = requestAnimationFrame(l);
   }
-  function O(r) {
-    g = r.clientX, v = r.clientY, M || (M = !0), f === 0 && (f = requestAnimationFrame(N));
+  function C(n) {
+    h = n.clientX, q = n.clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l));
   }
-  function Y() {
-    M = !1, f === 0 && (f = requestAnimationFrame(N));
+  function S() {
+    g = !1, i === 0 && (i = requestAnimationFrame(l));
   }
-  const x = m === "document" ? document : t;
-  return x.addEventListener("mousemove", O), x.addEventListener("mouseleave", Y), () => {
-    F = !1, cancelAnimationFrame(f), x.removeEventListener("mousemove", O), x.removeEventListener("mouseleave", Y), t.innerHTML = e;
+  function F(n) {
+    n.touches.length !== 0 && (h = n.touches[0].clientX, q = n.touches[0].clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l)));
+  }
+  function b() {
+    g = !1, i === 0 && (i = requestAnimationFrame(l));
+  }
+  const u = w === "document" ? document : t;
+  return u.addEventListener("mousemove", C), u.addEventListener("mouseleave", S), u.addEventListener("touchmove", F, { passive: !0 }), u.addEventListener("touchend", b), () => {
+    V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s), u.removeEventListener("mousemove", C), u.removeEventListener("mouseleave", S), u.removeEventListener("touchmove", F), u.removeEventListener("touchend", b), t.innerHTML = o;
   };
 }
-function Z(t, e, n = {}) {
+function ot(t, o, r = {}) {
   if (typeof window > "u") return () => {
   };
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-    return t.innerHTML = e, () => {
+    return t.innerHTML = o, () => {
     };
-  const c = n.axes ?? C.axes, o = n.radius ?? C.radius, y = n.falloff ?? C.falloff, m = n.magnetMode ?? C.magnetMode, p = n.scope ?? C.scope, d = n.props, l = window.scrollY;
-  t.innerHTML = e;
-  const A = k(t), h = [];
-  for (const r of A) {
-    const s = r.textContent ?? "";
-    if (!s.trim()) continue;
-    const E = s.split(/(\S+)/), u = document.createDocumentFragment();
-    for (let i = 0; i < E.length; i += 2) {
-      const L = E[i], a = E[i + 1];
-      if (!a) continue;
-      const T = E[i + 3] === void 0 ? E[i + 2] ?? "" : "", S = document.createElement("span");
-      S.className = V.word, S.textContent = L + a + T, u.appendChild(S), h.push(S);
+  const f = r.axes ?? Y.axes, c = r.radius ?? Y.radius, a = r.falloff ?? Y.falloff, w = r.magnetMode ?? Y.magnetMode, v = r.scope ?? Y.scope, d = r.props, x = r.transitionMs ?? 0, L = window.scrollY;
+  t.innerHTML = o;
+  const N = J(t), y = [];
+  for (const n of N) {
+    const e = n.textContent ?? "";
+    if (!e.trim()) continue;
+    const T = e.split(/(\S+)/), p = document.createDocumentFragment();
+    for (let m = 0; m < T.length; m += 2) {
+      const B = T[m], E = T[m + 1];
+      if (!E) continue;
+      const O = T[m + 3] === void 0 ? T[m + 2] ?? "" : "", $ = document.createElement("span");
+      $.className = I.word, $.textContent = B + E + O, p.appendChild($), y.push($);
     }
-    r.parentNode.replaceChild(u, r);
+    n.parentNode.replaceChild(p, n);
   }
   if (requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - l) > 2 && window.scrollTo({ top: l, behavior: "instant" });
-  }), h.length === 0) return () => {
+    typeof window < "u" && Math.abs(window.scrollY - L) > 2 && window.scrollTo({ top: L, behavior: "instant" });
+  }), y.length === 0) return () => {
   };
-  const q = getComputedStyle(t).fontVariationSettings, w = I(
-    q,
-    Object.fromEntries(Object.entries(c).map(([r, [s]]) => [r, s]))
+  const A = getComputedStyle(t).fontVariationSettings, M = R(
+    A,
+    Object.fromEntries(Object.entries(f).map(([n, [e]]) => [n, e]))
   );
-  h.forEach((r) => {
-    r.style.fontVariationSettings = w, d && j(r, d);
+  y.forEach((n) => {
+    n.style.fontVariationSettings = M, d && P(n, d);
   });
-  let g = -9999, v = -9999, M = !1, f = 0, F = !0;
-  function N() {
-    if (!F) return;
-    if (!M) {
-      h.forEach((s) => {
-        s.style.fontVariationSettings = w, d && j(s, d);
-      }), f = 0;
+  let h = -9999, q = -9999, g = !1, i = 0, V = !0, s = null;
+  function l() {
+    if (!V) return;
+    if (!g) {
+      y.forEach((e) => {
+        x > 0 && (e.style.transition = `font-variation-settings ${x}ms ease`), e.style.fontVariationSettings = M, d && P(e, d);
+      }), x > 0 && (s !== null && clearTimeout(s), s = setTimeout(() => {
+        y.forEach((e) => {
+          e.style.transition = "";
+        }), s = null;
+      }, x)), i = 0;
       return;
     }
-    const r = h.map((s) => s.getBoundingClientRect());
-    h.forEach((s, E) => {
-      const u = r[E], i = u.left + u.width / 2, L = u.top + u.height / 2, a = Math.sqrt((g - i) ** 2 + (v - L) ** 2), b = Math.max(0, 1 - a / o), T = y === "quadratic" ? b * b : b, S = m === "repel" ? 1 - T : T, R = {};
-      for (const H of Object.keys(c)) {
-        const [X, W] = c[H] ?? [300, 500];
-        R[H] = X + (W - X) * S;
+    const n = y.map((e) => e.getBoundingClientRect());
+    y.forEach((e, T) => {
+      e.style.transition = "";
+      const p = n[T], m = p.left + p.width / 2, B = p.top + p.height / 2, E = Math.sqrt((h - m) ** 2 + (q - B) ** 2), X = Math.max(0, 1 - E / c), O = a === "quadratic" ? X * X : X, $ = w === "repel" ? 1 - O : O, H = {};
+      for (const K of Object.keys(f)) {
+        const [U, W] = f[K] ?? [300, 500];
+        H[K] = U + (W - U) * $;
       }
-      s.style.fontVariationSettings = I(q, R), d && P(s, d, T);
-    }), f = requestAnimationFrame(N);
+      e.style.fontVariationSettings = R(A, H), d && Z(e, d, O);
+    }), i = requestAnimationFrame(l);
+  }
+  function C(n) {
+    h = n.clientX, q = n.clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l));
   }
-  function O(r) {
-    g = r.clientX, v = r.clientY, M || (M = !0), f === 0 && (f = requestAnimationFrame(N));
+  function S() {
+    g = !1, i === 0 && (i = requestAnimationFrame(l));
   }
-  function Y() {
-    M = !1, f === 0 && (f = requestAnimationFrame(N));
+  function F(n) {
+    n.touches.length !== 0 && (h = n.touches[0].clientX, q = n.touches[0].clientY, g || (g = !0), i === 0 && (i = requestAnimationFrame(l)));
   }
-  const x = p === "document" ? document : t;
-  return x.addEventListener("mousemove", O), x.addEventListener("mouseleave", Y), () => {
-    F = !1, cancelAnimationFrame(f), x.removeEventListener("mousemove", O), x.removeEventListener("mouseleave", Y), t.innerHTML = e;
+  function b() {
+    g = !1, i === 0 && (i = requestAnimationFrame(l));
+  }
+  const u = v === "document" ? document : t;
+  return u.addEventListener("mousemove", C), u.addEventListener("mouseleave", S), u.addEventListener("touchmove", F, { passive: !0 }), u.addEventListener("touchend", b), () => {
+    V = !1, cancelAnimationFrame(i), s !== null && clearTimeout(s), u.removeEventListener("mousemove", C), u.removeEventListener("mouseleave", S), u.removeEventListener("touchmove", F), u.removeEventListener("touchend", b), t.innerHTML = o;
   };
 }
-function tt(t) {
-  const e = B(null), n = B(null), c = B(t);
-  c.current = t;
-  const o = B(null), y = t.mode ?? "field", { axes: m, radius: p, falloff: d, magnetMode: l, wdthBoost: A, scope: h } = t, q = m ? JSON.stringify(m) : void 0, w = t.props ? JSON.stringify(t.props) : void 0, g = _(() => {
-    const v = e.current;
-    if (!v) return;
-    n.current === null && (n.current = z(v)), o.current && (o.current(), o.current = null), (c.current.mode ?? "field") === "field" ? o.current = Z(v, n.current, c.current) : o.current = Q(v, n.current, c.current);
-  }, [y, q, p, d, l, A, h, w]);
-  return J(() => (g(), () => {
-    o.current && (o.current(), o.current = null);
-  }), [g]), K(() => {
-    document.fonts.ready.then(g);
-  }, [g]), e;
+function rt(t) {
+  const o = k(null), r = k(null), f = k(t);
+  f.current = t;
+  const c = k(null), a = t.mode ?? "field", { axes: w, radius: v, falloff: d, magnetMode: x, wdthBoost: L, scope: N } = t, y = w ? JSON.stringify(w) : void 0, A = t.props ? JSON.stringify(t.props) : void 0, M = j(() => {
+    const h = o.current;
+    if (!h) return;
+    r.current === null && (r.current = et(h)), c.current && (c.current(), c.current = null), (f.current.mode ?? "field") === "field" ? c.current = ot(h, r.current, f.current) : c.current = nt(h, r.current, f.current);
+  }, [a, y, v, d, x, L, N, A]);
+  return tt(() => (M(), () => {
+    c.current && (c.current(), c.current = null);
+  }), [M]), _(() => {
+    document.fonts.ready.then(M);
+  }, [M]), o;
 }
-const et = U(
-  function({ children: e, as: n = "p", className: c, style: o, ...y }, m) {
-    const p = tt(y), d = _(
-      (l) => {
-        p.current = l, typeof m == "function" ? m(l) : m && (m.current = l);
+const st = z(
+  function({ children: o, as: r = "p", className: f, style: c, ...a }, w) {
+    const v = rt(a), d = j(
+      (x) => {
+        v.current = x, typeof w == "function" ? w(x) : w && (w.current = x);
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [w]
+    );
+    return /* @__PURE__ */ Q(r, { ref: d, className: f, style: c, children: o });
+  }
+);
+st.displayName = "MagnetTypeText";
+const ct = z(
+  function({
+    children: o,
+    as: r = "p",
+    className: f,
+    style: c,
+    minWeight: a = 300,
+    maxWeight: w = 600,
+    proximityRadius: v,
+    spreadRadius: d,
+    fixedAxes: x = {}
+  }, L) {
+    const N = k(null), y = k(null), A = k([]), M = j(
+      (s) => {
+        N.current = s, typeof L == "function" ? L(s) : L && (L.current = s);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [m]
+      [L]
+    );
+    function h(s) {
+      const l = [`'wght' ${s.toFixed(0)}`];
+      for (const [C, S] of Object.entries(x)) l.push(`'${C}' ${S}`);
+      return l.join(", ");
+    }
+    _(() => {
+      var b;
+      if (!d) return;
+      const s = N.current;
+      if (!s) return;
+      const l = [], C = document.createTreeWalker(s, NodeFilter.SHOW_TEXT), S = [];
+      let F;
+      for (; F = C.nextNode(); ) S.push(F);
+      for (const u of S) {
+        const n = u.textContent ?? "";
+        if (!n) continue;
+        const e = document.createDocumentFragment();
+        for (const T of n)
+          if (/\s/.test(T))
+            e.appendChild(document.createTextNode(T));
+          else {
+            const p = document.createElement("span");
+            p.style.fontVariationSettings = h(a), p.textContent = T, l.push(p), e.appendChild(p);
+          }
+        (b = u.parentNode) == null || b.replaceChild(e, u);
+      }
+      A.current = l;
+    }, []);
+    function q(s, l) {
+      const C = N.current;
+      if (!C) return;
+      const S = C.getBoundingClientRect(), F = Math.max(S.left - s, 0, s - S.right), b = Math.max(S.top - l, 0, l - S.bottom), u = Math.sqrt(F * F + b * b);
+      if (v !== void 0 && !d) {
+        const e = 1 - (1 - Math.max(0, 1 - u / v)) ** 2;
+        C.style.fontVariationSettings = h(a + (w - a) * e);
+        return;
+      }
+      if (d) {
+        if (v !== void 0 && u > v) {
+          C.style.fontVariationSettings = h(a);
+          for (const n of A.current) n.style.fontVariationSettings = h(a);
+          return;
+        }
+        for (const n of A.current) {
+          const e = n.getBoundingClientRect(), T = (e.left + e.right) / 2, p = (e.top + e.bottom) / 2, m = Math.sqrt((s - T) ** 2 + (l - p) ** 2), E = 1 - (1 - Math.max(0, 1 - m / d)) ** 2;
+          n.style.fontVariationSettings = h(a + (w - a) * E);
+        }
+      }
+    }
+    const g = j(
+      (s) => {
+        y.current = { x: s.clientX, y: s.clientY }, q(s.clientX, s.clientY);
+      },
+      [a, w, v, d]
+    ), i = j(
+      () => {
+        y.current && q(y.current.x, y.current.y);
+      },
+      [a, w, v, d]
+    ), V = j(
+      () => {
+        y.current = null;
+        const s = N.current;
+        s && (s.style.fontVariationSettings = h(a));
+        for (const l of A.current) l.style.fontVariationSettings = h(a);
+      },
+      [a]
+    );
+    return _(() => (window.addEventListener("mousemove", g, { passive: !0 }), window.addEventListener("scroll", i, { passive: !0, capture: !0 }), document.documentElement.addEventListener("mouseleave", V), () => {
+      window.removeEventListener("mousemove", g), window.removeEventListener("scroll", i, { capture: !0 }), document.documentElement.removeEventListener("mouseleave", V);
+    }), [g, i, V]), /* @__PURE__ */ Q(
+      r,
+      {
+        ref: M,
+        className: f,
+        style: { fontVariationSettings: h(a), ...c },
+        children: o
+      }
     );
-    return /* @__PURE__ */ G(n, { ref: d, className: c, style: o, children: e });
   }
 );
-et.displayName = "MagnetTypeText";
+ct.displayName = "MagnetBlock";
 export {
-  V as MAGNET_TYPE_CLASSES,
-  et as MagnetTypeText,
-  Q as applyMagnetType,
-  z as getCleanHTML,
-  rt as removeMagnetType,
-  Z as startMagnetType,
-  tt as useMagnetType
+  I as MAGNET_TYPE_CLASSES,
+  ct as MagnetBlock,
+  st as MagnetTypeText,
+  nt as applyMagnetType,
+  et as getCleanHTML,
+  ut as removeMagnetType,
+  ot as startMagnetType,
+  rt as useMagnetType
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/magnettype",
-	"version": "1.0.8",
+	"version": "1.1.1",
 	"description": "Cursor-field per-word variable font axis variation and per-character legibility mode",
 	"type": "module",
 	"main": "dist/index.cjs",
@@ -38,8 +38,8 @@
 	"devDependencies": {
 		"@types/react": "^19.0.0",
 		"@vitejs/plugin-react": "^4.0.0",
-		"happy-dom": "^12.0.0",
-		"next": "16.2.2",
+		"happy-dom": "^20.9.0",
+		"next": "^16.2.6",
 		"react": "^19.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0",
@@ -83,5 +83,8 @@
 	"sideEffects": false,
 	"publishConfig": {
 		"access": "public"
+	},
+	"overrides": {
+		"postcss": ">=8.5.10"
 	}
 }