@liiift-studio/magnettype 1.0.0 → 1.0.6

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react"),I=require("react/jsx-runtime"),j={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},S={word:"mt-word",char:"mt-char",probe:"mt-probe"},N={axes:{wght:[300,500]},radius:120,falloff:"quadratic",magnetMode:"attract",wdthBoost:6};function F(e,n=[]){return e.nodeType===Node.TEXT_NODE?n.push(e):e.childNodes.forEach(o=>F(o,n)),n}function H(e,n,o){if(!e||e==="normal")return`"${n}" ${o}`;const r=new RegExp(`(["'])${n}\\1\\s+[\\d.eE+-]+`),t=`"${n}" ${o}`;return r.test(e)?e.replace(r,t):`${e}, ${t}`}function B(e,n){let o=e;for(const[r,t]of Object.entries(n))o=H(o,r,t);return o}function V(e){const n=e.cloneNode(!0),o=n.querySelectorAll(`.${S.word}, .${S.char}`);return Array.from(o).reverse().forEach(t=>{const l=t.parentNode;if(l){for(;t.firstChild;)l.insertBefore(t.firstChild,t);l.removeChild(t)}}),n.innerHTML}function X(e,n){e.innerHTML=n}function k(e,n,o={}){if(typeof window>"u")return;const r=window.scrollY,t=o.wdthBoost??N.wdthBoost;e.innerHTML=n;const l=F(e),a=getComputedStyle(e).fontVariationSettings;for(const h of l){const y=h.textContent??"";if(!y||!y.split("").some(m=>m in j))continue;const M=document.createDocumentFragment();for(const m of y){const p=j[m];if(p===void 0){const s=M.lastChild;s&&s.nodeType===Node.TEXT_NODE?s.textContent+=m:M.appendChild(document.createTextNode(m))}else{const s=t*(p/3),c=document.createElement("span");c.className=S.char;const f=a.match(/"wdth"\s+([\d.eE+-]+)/),E=(f?parseFloat(f[1]):100)+s;c.style.fontVariationSettings=H(a,"wdth",E),c.textContent=m,M.appendChild(c)}}h.parentNode.replaceChild(M,h)}requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-r)>2&&window.scrollTo({top:r,behavior:"instant"})})}function W(e,n,o={}){if(typeof window>"u")return()=>{};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return e.innerHTML=n,()=>{};const r=o.axes??N.axes,t=o.radius??N.radius,l=o.falloff??N.falloff,a=o.magnetMode??N.magnetMode,h=window.scrollY;e.innerHTML=n;const y=F(e),u=[];for(const i of y){const d=i.textContent??"";if(!d.trim())continue;const w=d.split(/(\S+)/),T=document.createDocumentFragment();for(let g=0;g<w.length;g+=2){const R=w[g],b=w[g+1];if(!b)continue;const q=w[g+3]===void 0?w[g+2]??"":"",v=document.createElement("span");v.className=S.word,v.textContent=R+b+q,T.appendChild(v),u.push(v)}i.parentNode.replaceChild(T,i)}if(requestAnimationFrame(()=>{typeof window<"u"&&Math.abs(window.scrollY-h)>2&&window.scrollTo({top:h,behavior:"instant"})}),u.length===0)return()=>{};const M=getComputedStyle(e).fontVariationSettings,m=B(M,Object.fromEntries(Object.entries(r).map(([i,[d]])=>[i,d])));u.forEach(i=>{i.style.fontVariationSettings=m});let p=-9999,s=-9999,c=!1,f=0,C=!0;function E(i,d){const[w,T]=r[i]??[300,500],g=a==="repel"?1-d:d;return w+(T-w)*g}function L(){if(!C)return;if(!c){u.forEach(d=>{d.style.fontVariationSettings=m}),f=0;return}const i=u.map(d=>d.getBoundingClientRect());u.forEach((d,w)=>{const T=i[w],g=T.left+T.width/2,R=T.top+T.height/2,b=Math.sqrt((p-g)**2+(s-R)**2),A=Math.max(0,1-b/t),q=l==="quadratic"?A*A:A,v={};for(const $ of Object.keys(r))v[$]=E($,q);d.style.fontVariationSettings=B(M,v)}),f=requestAnimationFrame(L)}function O(i){p=i.clientX,s=i.clientY,c||(c=!0),f===0&&(f=requestAnimationFrame(L))}function Y(){c=!1,f===0&&(f=requestAnimationFrame(L))}return e.addEventListener("mousemove",O),e.addEventListener("mouseleave",Y),()=>{C=!1,cancelAnimationFrame(f),e.removeEventListener("mousemove",O),e.removeEventListener("mouseleave",Y),e.innerHTML=n}}function _(e){const n=x.useRef(null),o=x.useRef(null),r=x.useRef(e);r.current=e;const t=x.useRef(null),l=e.mode??"field",{axes:a,radius:h,falloff:y,magnetMode:u,wdthBoost:M}=e,m=a?JSON.stringify(a):void 0,p=x.useCallback(()=>{const s=n.current;if(!s)return;o.current===null&&(o.current=V(s)),t.current&&(t.current(),t.current=null),(r.current.mode??"field")==="field"?t.current=W(s,o.current,r.current):k(s,o.current,r.current)},[l,m,h,y,u,M]);return x.useLayoutEffect(()=>{if(p(),typeof ResizeObserver>"u")return()=>{t.current&&(t.current(),t.current=null)};if((r.current.mode??"field")==="field")return()=>{t.current&&(t.current(),t.current=null)};let s=0,c=0;const f=new ResizeObserver(C=>{const E=Math.round(C[0].contentRect.width);E!==s&&(s=E,cancelAnimationFrame(c),c=requestAnimationFrame(p))});return f.observe(n.current),()=>{f.disconnect(),cancelAnimationFrame(c),t.current&&(t.current(),t.current=null)}},[p]),x.useEffect(()=>{document.fonts.ready.then(p)},[p]),n}const D=x.forwardRef(function({children:n,as:o="p",className:r,style:t,...l},a){const h=_(l),y=x.useCallback(u=>{h.current=u,typeof a=="function"?a(u):a&&(a.current=u)},[a]);return I.jsx(o,{ref:y,className:r,style:t,children:n})});D.displayName="MagnetTypeText";exports.MAGNET_TYPE_CLASSES=S;exports.MagnetTypeText=D;exports.applyMagnetType=k;exports.getCleanHTML=V;exports.removeMagnetType=X;exports.startMagnetType=W;exports.useMagnetType=_;
+"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;

package/dist/index.d.ts

@@ -2,16 +2,22 @@ import { default as default_2 } from 'react';
 import { RefObject } from 'react';
 
 /**
- * Apply per-character wdth boost to visually confusable characters (legibility mode).
+ * Start the legibility effect on an element.
  *
- * Wraps each character in a span with a boosted wdth axis value proportional to
- * the character's confusion risk level. Non-confusable characters are left unwrapped.
+ * Wraps visually confusable characters in spans, then listens for mousemove events
+ * to drive per-character wdth boost based on cursor distance. Characters near the
+ * cursor receive a wdth boost proportional to their confusion risk level.
+ * Resets to base wdth on mouseleave.
+ *
+ * Defaults to listening on document (scope: 'document'), enabling cross-paragraph
+ * effects when multiple elements are independently targeted.
  *
  * @param element      - Target element (must be in the live DOM and visible)
  * @param originalHTML - Clean HTML snapshot from getCleanHTML()
- * @param options      - MagnetTypeOptions; only wdthBoost is used here
+ * @param options      - MagnetTypeOptions; wdthBoost, radius, falloff, scope, props used
+ * @returns            - A stop function. Call it to cancel listeners and restore markup.
  */
-export declare function applyMagnetType(element: HTMLElement, originalHTML: string, options?: MagnetTypeOptions): void;
+export declare function applyMagnetType(element: HTMLElement, originalHTML: string, options?: MagnetTypeOptions): () => void;
 
 /** Falloff curve for the cursor proximity field */
 export declare type FalloffType = 'linear' | 'quadratic';
@@ -43,25 +49,26 @@ export declare type MagnetTypeModeType = 'field' | 'legibility';
  *
  * Two modes share this options type:
  * - 'field'      — cursor proximity drives per-word variable font axis values
- * - 'legibility' — per-character wdth boost for visually confusable characters
+ * - 'legibility' — cursor proximity drives per-character wdth boost for confusable characters
  */
 export declare interface MagnetTypeOptions {
     /**
      * Operating mode. Default: 'field'
      *
      * - **'field'** — cursor proximity drives per-word font-variation-settings.
-     * - **'legibility'** — per-character wdth boost for confusable characters; no cursor needed.
+     * - **'legibility'** — cursor-driven wdth boost for confusable characters; both return a stop function.
      */
     mode?: MagnetTypeModeType;
     /**
-     * Map of axis tag → [restValue, peakValue].
-     * restValue is applied at full distance; peakValue when cursor is directly over the word.
-     * Default: { wght: [300, 500] }
+     * Scope for cursor event listeners. Default: 'document'
+     *
+     * - **'document'** — listens on document; works across multiple elements and paragraphs.
+     * - **'element'** — listens only on the target element.
      */
-    axes?: Record<string, [number, number]>;
+    scope?: ScopeType;
     /**
      * Pixel radius over which the field effect fades.
-     * Words beyond this distance receive restValue. Default: 120
+     * Words/chars beyond this distance receive restValue. Default: 120
      */
     radius?: number;
     /**
@@ -71,6 +78,17 @@ export declare interface MagnetTypeOptions {
      * - **'quadratic'** — strength decreases as distance², giving a tighter hot zone
      */
     falloff?: FalloffType;
+    /**
+     * Additional CSS property effects driven by cursor proximity.
+     * Supports opacity [rest, peak] and italic toggle.
+     */
+    props?: MagnetTypeProps;
+    /**
+     * Map of axis tag → [restValue, peakValue].
+     * restValue is applied at full distance; peakValue when cursor is directly over the word.
+     * Default: { wght: [300, 500] }
+     */
+    axes?: Record<string, [number, number]>;
     /**
      * Attraction or repulsion mode. Default: 'attract'
      *
@@ -79,15 +97,32 @@ export declare interface MagnetTypeOptions {
      */
     magnetMode?: MagnetModeType;
     /**
-     * wdth axis units to add to confusable characters. Default: 6
+     * wdth axis units to add to confusable characters at full cursor strength. Default: 6
      *
-     * Risk 1 characters receive wdthBoost × (1/3).
-     * Risk 2 characters receive wdthBoost × (2/3).
-     * Risk 3 characters receive wdthBoost × (3/3) = full boost.
+     * Risk 1 characters receive wdthBoost × (1/3) at peak.
+     * Risk 2 characters receive wdthBoost × (2/3) at peak.
+     * Risk 3 characters receive wdthBoost × (3/3) = full boost at peak.
      */
     wdthBoost?: number;
 }
 
+/**
+ * Additional CSS property effects driven by cursor proximity.
+ * Applied to word spans in field mode, or char spans in legibility mode.
+ */
+declare interface MagnetTypeProps {
+    /**
+     * Opacity range [restValue, peakValue].
+     * e.g. [1, 0.6] fades words/chars near the cursor.
+     */
+    opacity?: [number, number];
+    /**
+     * When true, applies font-style:italic to spans where cursor strength > 0.5.
+     * For variable fonts with an 'ital' axis, use axes: { ital: [0, 1] } instead.
+     */
+    italic?: boolean;
+}
+
 /**
  * Drop-in component that applies the magnetType effect to its children.
  * Forwards the ref to the root element while also attaching the internal hook ref.
@@ -107,10 +142,17 @@ declare interface MagnetTypeTextProps extends MagnetTypeOptions {
  * Remove magnetType markup and restore the element to its original HTML.
  *
  * @param element      - The element that was previously modified
- * @param originalHTML - The snapshot passed to applyMagnetType
+ * @param originalHTML - The snapshot passed to applyMagnetType / startMagnetType
  */
 export declare function removeMagnetType(element: HTMLElement, originalHTML: string): void;
 
+/**
+ * Scope for cursor event listeners.
+ * 'document' enables cross-element / cross-paragraph effects (default).
+ * 'element' restricts the field to the target element only.
+ */
+declare type ScopeType = 'element' | 'document';
+
 /**
  * Start the cursor-field effect on an element.
  *
@@ -118,9 +160,12 @@ export declare function removeMagnetType(element: HTMLElement, originalHTML: str
  * font-variation-settings based on cursor distance. Uses a requestAnimationFrame
  * loop for smooth axis interpolation. Resets all words to restValue on mouseleave.
  *
+ * Defaults to listening on document (scope: 'document'), enabling cross-paragraph
+ * effects when multiple elements are independently targeted.
+ *
  * @param element      - Target element (must be in the live DOM and visible)
  * @param originalHTML - Clean HTML snapshot from getCleanHTML()
- * @param options      - MagnetTypeOptions; axes, radius, falloff, magnetMode are used
+ * @param options      - MagnetTypeOptions; axes, radius, falloff, magnetMode, scope, props used
  * @returns            - A stop function. Call it to cancel the rAF loop and restore markup.
  */
 export declare function startMagnetType(element: HTMLElement, originalHTML: string, options?: MagnetTypeOptions): () => void;
@@ -129,11 +174,10 @@ 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.
- * The stop function is called on unmount and when options change.
- * No ResizeObserver needed — the rAF loop reads live getBoundingClientRect each frame.
+ * For mode: 'legibility' — starts the cursor-driven wdth boost via applyMagnetType.
  *
- * For mode: 'legibility' — applies the static per-character wdth boost via applyMagnetType.
- * Re-runs on container width changes via ResizeObserver, and after fonts load.
+ * 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.
  */

package/dist/index.js

@@ -1,6 +1,6 @@
-import { useRef as A, useCallback as j, useLayoutEffect as W, useEffect as k, forwardRef as D } from "react";
-import { jsx as I } from "react/jsx-runtime";
-const B = {
+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 = {
   i: 3,
   l: 3,
   1: 3,
@@ -22,7 +22,7 @@ const B = {
   c: 1,
   e: 1
   // similar bowls
-}, L = {
+}, V = {
   /** Applied to each word span in field mode */
   word: "mt-word",
   /** Applied to each character span in legibility mode */
@@ -34,175 +34,199 @@ const B = {
   radius: 120,
   falloff: "quadratic",
   magnetMode: "attract",
-  wdthBoost: 6
+  wdthBoost: 6,
+  scope: "document"
 };
-function q(e, n = []) {
-  return e.nodeType === Node.TEXT_NODE ? n.push(e) : e.childNodes.forEach((o) => q(o, n)), n;
+function k(t, e = []) {
+  return t.nodeType === Node.TEXT_NODE ? e.push(t) : t.childNodes.forEach((n) => k(n, e)), e;
 }
-function H(e, n, o) {
-  if (!e || e === "normal") return `"${n}" ${o}`;
-  const r = new RegExp(`(["'])${n}\\1\\s+[\\d.eE+-]+`), t = `"${n}" ${o}`;
-  return r.test(e) ? e.replace(r, t) : `${e}, ${t}`;
+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 V(e, n) {
-  let o = e;
-  for (const [r, t] of Object.entries(n))
-    o = H(o, r, t);
-  return o;
+function I(t, e) {
+  let n = t;
+  for (const [c, o] of Object.entries(e))
+    n = $(n, c, o);
+  return n;
 }
-function X(e) {
-  const n = e.cloneNode(!0), o = n.querySelectorAll(
-    `.${L.word}, .${L.char}`
+function P(t, e, n) {
+  if (e.opacity !== void 0) {
+    const [c, o] = e.opacity;
+    t.style.opacity = String(c + (o - c) * n);
+  }
+  e.italic === !0 && (t.style.fontStyle = n > 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 z(t) {
+  const e = t.cloneNode(!0), n = e.querySelectorAll(
+    `.${V.word}, .${V.char}`
   );
-  return Array.from(o).reverse().forEach((t) => {
-    const l = t.parentNode;
-    if (l) {
-      for (; t.firstChild; ) l.insertBefore(t.firstChild, t);
-      l.removeChild(t);
+  return Array.from(n).reverse().forEach((o) => {
+    const y = o.parentNode;
+    if (y) {
+      for (; o.firstChild; ) y.insertBefore(o.firstChild, o);
+      y.removeChild(o);
     }
-  }), n.innerHTML;
+  }), e.innerHTML;
 }
-function P(e, n) {
-  e.innerHTML = n;
+function rt(t, e) {
+  t.innerHTML = e;
 }
-function _(e, n, o = {}) {
-  if (typeof window > "u") return;
-  const r = window.scrollY, t = o.wdthBoost ?? C.wdthBoost;
-  e.innerHTML = n;
-  const l = q(e), a = getComputedStyle(e).fontVariationSettings;
-  for (const h of l) {
-    const y = h.textContent ?? "";
-    if (!y || !y.split("").some((m) => m in B)) continue;
-    const M = document.createDocumentFragment();
-    for (const m of y) {
-      const p = B[m];
-      if (p === void 0) {
-        const s = M.lastChild;
-        s && s.nodeType === Node.TEXT_NODE ? s.textContent += m : M.appendChild(document.createTextNode(m));
+function Q(t, e, n = {}) {
+  if (typeof window > "u") return () => {
+  };
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+    return t.innerHTML = e, () => {
+    };
+  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));
       } else {
-        const s = t * (p / 3), c = document.createElement("span");
-        c.className = L.char;
-        const u = a.match(/"wdth"\s+([\d.eE+-]+)/), v = (u ? parseFloat(u[1]) : 100) + s;
-        c.style.fontVariationSettings = H(a, "wdth", v), c.textContent = m, M.appendChild(c);
+        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 });
       }
     }
-    h.parentNode.replaceChild(M, h);
+    r.parentNode.replaceChild(u, r);
   }
-  requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - r) > 2 && window.scrollTo({ top: r, behavior: "instant" });
-  });
+  if (requestAnimationFrame(() => {
+    typeof window < "u" && Math.abs(window.scrollY - d) > 2 && window.scrollTo({ top: d, behavior: "instant" });
+  }), w.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;
+      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);
+  }
+  function O(r) {
+    g = r.clientX, v = r.clientY, M || (M = !0), f === 0 && (f = requestAnimationFrame(N));
+  }
+  function Y() {
+    M = !1, f === 0 && (f = requestAnimationFrame(N));
+  }
+  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 z(e, n, o = {}) {
+function Z(t, e, n = {}) {
   if (typeof window > "u") return () => {
   };
   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
-    return e.innerHTML = n, () => {
+    return t.innerHTML = e, () => {
     };
-  const r = o.axes ?? C.axes, t = o.radius ?? C.radius, l = o.falloff ?? C.falloff, a = o.magnetMode ?? C.magnetMode, h = window.scrollY;
-  e.innerHTML = n;
-  const y = q(e), f = [];
-  for (const i of y) {
-    const d = i.textContent ?? "";
-    if (!d.trim()) continue;
-    const w = d.split(/(\S+)/), x = document.createDocumentFragment();
-    for (let g = 0; g < w.length; g += 2) {
-      const F = w[g], N = w[g + 1];
-      if (!N) continue;
-      const R = w[g + 3] === void 0 ? w[g + 2] ?? "" : "", T = document.createElement("span");
-      T.className = L.word, T.textContent = F + N + R, x.appendChild(T), f.push(T);
+  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);
     }
-    i.parentNode.replaceChild(x, i);
+    r.parentNode.replaceChild(u, r);
   }
   if (requestAnimationFrame(() => {
-    typeof window < "u" && Math.abs(window.scrollY - h) > 2 && window.scrollTo({ top: h, behavior: "instant" });
-  }), f.length === 0) return () => {
+    typeof window < "u" && Math.abs(window.scrollY - l) > 2 && window.scrollTo({ top: l, behavior: "instant" });
+  }), h.length === 0) return () => {
   };
-  const M = getComputedStyle(e).fontVariationSettings, m = V(
-    M,
-    Object.fromEntries(Object.entries(r).map(([i, [d]]) => [i, d]))
+  const q = getComputedStyle(t).fontVariationSettings, w = I(
+    q,
+    Object.fromEntries(Object.entries(c).map(([r, [s]]) => [r, s]))
   );
-  f.forEach((i) => {
-    i.style.fontVariationSettings = m;
+  h.forEach((r) => {
+    r.style.fontVariationSettings = w, d && j(r, d);
   });
-  let p = -9999, s = -9999, c = !1, u = 0, E = !0;
-  function v(i, d) {
-    const [w, x] = r[i] ?? [300, 500], g = a === "repel" ? 1 - d : d;
-    return w + (x - w) * g;
-  }
-  function S() {
-    if (!E) return;
-    if (!c) {
-      f.forEach((d) => {
-        d.style.fontVariationSettings = m;
-      }), u = 0;
+  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;
       return;
     }
-    const i = f.map((d) => d.getBoundingClientRect());
-    f.forEach((d, w) => {
-      const x = i[w], g = x.left + x.width / 2, F = x.top + x.height / 2, N = Math.sqrt((p - g) ** 2 + (s - F) ** 2), b = Math.max(0, 1 - N / t), R = l === "quadratic" ? b * b : b, T = {};
-      for (const $ of Object.keys(r))
-        T[$] = v($, R);
-      d.style.fontVariationSettings = V(M, T);
-    }), u = requestAnimationFrame(S);
+    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;
+      }
+      s.style.fontVariationSettings = I(q, R), d && P(s, d, T);
+    }), f = requestAnimationFrame(N);
   }
-  function O(i) {
-    p = i.clientX, s = i.clientY, c || (c = !0), u === 0 && (u = requestAnimationFrame(S));
+  function O(r) {
+    g = r.clientX, v = r.clientY, M || (M = !0), f === 0 && (f = requestAnimationFrame(N));
   }
   function Y() {
-    c = !1, u === 0 && (u = requestAnimationFrame(S));
+    M = !1, f === 0 && (f = requestAnimationFrame(N));
   }
-  return e.addEventListener("mousemove", O), e.addEventListener("mouseleave", Y), () => {
-    E = !1, cancelAnimationFrame(u), e.removeEventListener("mousemove", O), e.removeEventListener("mouseleave", Y), e.innerHTML = n;
+  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 U(e) {
-  const n = A(null), o = A(null), r = A(e);
-  r.current = e;
-  const t = A(null), l = e.mode ?? "field", { axes: a, radius: h, falloff: y, magnetMode: f, wdthBoost: M } = e, m = a ? JSON.stringify(a) : void 0, p = j(() => {
-    const s = n.current;
-    if (!s) return;
-    o.current === null && (o.current = X(s)), t.current && (t.current(), t.current = null), (r.current.mode ?? "field") === "field" ? t.current = z(s, o.current, r.current) : _(s, o.current, r.current);
-  }, [l, m, h, y, f, M]);
-  return W(() => {
-    if (p(), typeof ResizeObserver > "u")
-      return () => {
-        t.current && (t.current(), t.current = null);
-      };
-    if ((r.current.mode ?? "field") === "field")
-      return () => {
-        t.current && (t.current(), t.current = null);
-      };
-    let s = 0, c = 0;
-    const u = new ResizeObserver((E) => {
-      const v = Math.round(E[0].contentRect.width);
-      v !== s && (s = v, cancelAnimationFrame(c), c = requestAnimationFrame(p));
-    });
-    return u.observe(n.current), () => {
-      u.disconnect(), cancelAnimationFrame(c), t.current && (t.current(), t.current = null);
-    };
-  }, [p]), k(() => {
-    document.fonts.ready.then(p);
-  }, [p]), n;
+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;
 }
-const G = D(
-  function({ children: n, as: o = "p", className: r, style: t, ...l }, a) {
-    const h = U(l), y = j(
-      (f) => {
-        h.current = f, typeof a == "function" ? a(f) : a && (a.current = f);
+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);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [a]
+      [m]
     );
-    return /* @__PURE__ */ I(o, { ref: y, className: r, style: t, children: n });
+    return /* @__PURE__ */ G(n, { ref: d, className: c, style: o, children: e });
   }
 );
-G.displayName = "MagnetTypeText";
+et.displayName = "MagnetTypeText";
 export {
-  L as MAGNET_TYPE_CLASSES,
-  G as MagnetTypeText,
-  _ as applyMagnetType,
-  X as getCleanHTML,
-  P as removeMagnetType,
-  z as startMagnetType,
-  U as useMagnetType
+  V as MAGNET_TYPE_CLASSES,
+  et as MagnetTypeText,
+  Q as applyMagnetType,
+  z as getCleanHTML,
+  rt as removeMagnetType,
+  Z as startMagnetType,
+  tt as useMagnetType
 };

package/package.json

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