torph 0.0.7 → 0.0.8

package/dist/index.d.mts

@@ -18,6 +18,17 @@ interface TextMorphOptions {
     onAnimationComplete?: () => void;
 }
 
+declare class MorphController {
+    private instance;
+    private lastText;
+    private configKey;
+    attach(element: HTMLElement, options: Omit<TextMorphOptions, "element">): void;
+    update(text: string): void;
+    needsRecreate(options: Omit<TextMorphOptions, "element">): boolean;
+    destroy(): void;
+    static serializeConfig(options: Omit<TextMorphOptions, "element">): string;
+}
+
 declare const DEFAULT_AS = "span";
 declare const DEFAULT_TEXT_MORPH_OPTIONS: {
     readonly debug: false;
@@ -44,4 +55,4 @@ declare class TextMorph {
     private updateStyles;
 }
 
-export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, type SpringParams, TextMorph, type TextMorphOptions };
+export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, MorphController, type SpringParams, TextMorph, type TextMorphOptions };

package/dist/index.d.ts

@@ -18,6 +18,17 @@ interface TextMorphOptions {
     onAnimationComplete?: () => void;
 }
 
+declare class MorphController {
+    private instance;
+    private lastText;
+    private configKey;
+    attach(element: HTMLElement, options: Omit<TextMorphOptions, "element">): void;
+    update(text: string): void;
+    needsRecreate(options: Omit<TextMorphOptions, "element">): boolean;
+    destroy(): void;
+    static serializeConfig(options: Omit<TextMorphOptions, "element">): string;
+}
+
 declare const DEFAULT_AS = "span";
 declare const DEFAULT_TEXT_MORPH_OPTIONS: {
     readonly debug: false;
@@ -44,4 +55,4 @@ declare class TextMorph {
     private updateStyles;
 }
 
-export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, type SpringParams, TextMorph, type TextMorphOptions };
+export { DEFAULT_AS, DEFAULT_TEXT_MORPH_OPTIONS, MorphController, type SpringParams, TextMorph, type TextMorphOptions };

package/dist/index.js

@@ -1,6 +1,6 @@
-'use strict';function $(n,e,t){if(t<1){let u=e*Math.sqrt(1-t*t);return 1-Math.exp(-t*e*n)*(Math.cos(u*n)+t*e/u*Math.sin(u*n))}let i=Math.sqrt(t*t-1),s=-e*(t+i),r=-e*(t-i),o=-s/(r-s);return 1-(1-o)*Math.exp(s*n)-o*Math.exp(r*n)}function B(n,e,t){let r=0;for(let o=0;o<10;o+=.001)if(Math.abs($(o,n,e)-1)>t)r=0;else if(r+=.001,r>.1)return Math.ceil((o-r+.001)*1e3);return Math.ceil(10*1e3)}var I=new Map;function D(n){let{stiffness:e=100,damping:t=10,mass:i=1,precision:s=.001}=n??{},r=`${e}:${t}:${i}:${s}`,o=I.get(r);if(o)return o;let a=Math.sqrt(e/i),u=t/(2*Math.sqrt(e*i)),m=B(a,u,s),c=Math.min(100,Math.max(32,Math.round(m/15))),l=[];for(let g=0;g<c;g++){let b=g/(c-1)*(m/1e3),E=g===c-1?1:$(b,a,u);l.push(Math.round(E*1e4)/1e4+"");}for(;l.length>2&&l[l.length-2]==="1";)l.splice(l.length-2,1);let p={easing:`linear(${l.join(", ")})`,duration:m};return I.set(r,p),p}function H(n,e){let t=n.includes(" ");if(typeof Intl.Segmenter<"u"){let s=new Intl.Segmenter(e,{granularity:t?"word":"grapheme"}).segment(n)[Symbol.iterator]();return j(s)}return Y(n,t)}function j(n){return Array.from(n).reduce((e,t)=>t.segment===" "?[...e,{id:`space-${t.index}`,string:"\xA0"}]:e.find(s=>s.string===t.segment)?[...e,{id:`${t.segment}-${t.index}`,string:t.segment}]:[...e,{id:t.segment,string:t.segment}],[])}function q(n,e,t){let i=n.find(s=>s.string===e);n.push(i?{id:`${e}-${t}`,string:e}:{id:e,string:e});}function Y(n,e){let t=e?n.split(" "):n.split(""),i=[];return t.forEach((s,r)=>{e&&r>0&&i.push({id:`space-${r}`,string:"\xA0"}),q(i,s,r);}),i}var y="torph-root",T="torph-item",f="torph-id",d="torph-exiting",M="torph-debug";function A(n){let e=Array.from(n.children),t={};return e.forEach((i,s)=>{if(i.hasAttribute(d))return;let r=i.getAttribute(f)||`child-${s}`;t[r]={x:i.offsetLeft,y:i.offsetTop};}),t}function S(n,e,t){let i=n[t],s=e[t];return !i||!s?{dx:0,dy:0}:{dx:i.x-s.x,dy:i.y-s.y}}function w(n,e,t,i="backward-first"){let[s,r]=i==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let u=n-1;u>=0;u--)if(t.has(e[u]))return e[u]}else for(let u=n+1;u<e.length;u++)if(t.has(e[u]))return e[u];return null};return o(s)??o(r)}function _(n,e,t,i){let s=new Set(t.filter((o,a)=>i.has(o)&&!e.has(n[a]))),r=new Map;for(let o=0;o<n.length;o++){let a=n[o];e.has(a)&&r.set(a,w(o,t,s,"forward-first"));}return r}function O(n,e){return Math.min(n*e,150)}function R(n){let e=getComputedStyle(n).transform;if(!e||e==="none")return {tx:0,ty:0};let t=e.match(/matrix\(([^)]+)\)/);if(!t)return {tx:0,ty:0};let i=t[1].split(",").map(Number);return {tx:i[4]||0,ty:i[5]||0}}function Q(n){let{tx:e,ty:t}=R(n),i=Number(getComputedStyle(n).opacity)||1;return n.getAnimations().forEach(s=>s.cancel()),{tx:e,ty:t,opacity:i}}function N(n,e){let{dx:t,dy:i,duration:s,ease:r,scale:o}=e;n.animate({transform:o?`translate(${t}px, ${i}px) scale(0.95)`:`translate(${t}px, ${i}px)`,offset:1},{duration:s,easing:r,fill:"both"});let a=n.animate({opacity:0,offset:1},{duration:O(s,.25),easing:"linear",fill:"both"});a.onfinish=()=>n.remove();}function C(n,e){let{deltaX:t,deltaY:i,isNew:s,duration:r,ease:o}=e,a=Q(n),u=t+a.tx,m=i+a.ty;n.animate({transform:`translate(${u}px, ${m}px) scale(${s?.95:1})`,offset:0},{duration:r,easing:o,fill:"both"});let c=s&&a.opacity>=1?0:a.opacity;c<1&&n.animate([{opacity:c},{opacity:1}],{duration:O(r,s?.5:.25),easing:"linear",fill:"both"});}var x=null;function k(n,e,t,i,s){if(x&&(x(),x=null),e===0||t===0)return;n.style.width="auto",n.style.height="auto",n.offsetWidth;let r=n.offsetWidth,o=n.offsetHeight;n.style.width=`${e}px`,n.style.height=`${t}px`,n.offsetWidth,n.style.width=`${r}px`,n.style.height=`${o}px`;function a(){n.removeEventListener("transitionend",u),clearTimeout(m),x=null,n.style.width="auto",n.style.height="auto",s?.();}function u(c){c.target===n&&(c.propertyName!=="width"&&c.propertyName!=="height"||a());}n.addEventListener("transitionend",u);let m=setTimeout(a,i+50);x=()=>{n.removeEventListener("transitionend",u),clearTimeout(m),x=null;};}function F(n){let e=n.map(t=>{let{tx:i,ty:s}=R(t),r=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(o=>o.cancel()),{left:t.offsetLeft+i,top:t.offsetTop+s,width:t.offsetWidth,height:t.offsetHeight,opacity:r}});n.forEach((t,i)=>{let s=e[i];t.setAttribute(d,""),t.style.position="absolute",t.style.pointerEvents="none",t.style.left=`${s.left}px`,t.style.top=`${s.top}px`,t.style.width=`${s.width}px`,t.style.height=`${s.height}px`,t.style.opacity=String(s.opacity);});}function P(n,e,t,i){let s=new Map;e.forEach(r=>{let o=r.getAttribute(f);t.has(o)&&!r.hasAttribute(d)&&(s.set(o,r),r.remove());}),Array.from(n.childNodes).forEach(r=>{r.nodeType===Node.TEXT_NODE&&r.remove();}),i.forEach(r=>{let o=s.get(r.id);if(o)o.textContent=r.string,n.appendChild(o);else {let a=document.createElement("span");a.setAttribute(T,""),a.setAttribute(f,r.id),a.textContent=r.string,n.appendChild(a);}});}var K=`
+'use strict';function $(e,t,n){if(n<1){let u=t*Math.sqrt(1-n*n);return 1-Math.exp(-n*t*e)*(Math.cos(u*e)+n*t/u*Math.sin(u*e))}let o=Math.sqrt(n*n-1),r=-t*(n+o),i=-t*(n-o),s=-r/(i-r);return 1-(1-s)*Math.exp(r*e)-s*Math.exp(i*e)}function j(e,t,n){let i=0;for(let s=0;s<10;s+=.001)if(Math.abs($(s,e,t)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((s-i+.001)*1e3);return Math.ceil(10*1e3)}var O=new Map;function D(e){let{stiffness:t=100,damping:n=10,mass:o=1,precision:r=.001}=e??{},i=`${t}:${n}:${o}:${r}`,s=O.get(i);if(s)return s;let a=Math.sqrt(t/o),u=n/(2*Math.sqrt(t*o)),c=j(a,u,r),l=Math.min(100,Math.max(32,Math.round(c/15))),d=[];for(let g=0;g<l;g++){let A=g/(l-1)*(c/1e3),S=g===l-1?1:$(A,a,u);d.push(Math.round(S*1e4)/1e4+"");}for(;d.length>2&&d[d.length-2]==="1";)d.splice(d.length-2,1);let p={easing:`linear(${d.join(", ")})`,duration:c};return O.set(i,p),p}function H(e,t){let n=e.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(t,{granularity:n?"word":"grapheme"}).segment(e)[Symbol.iterator]();return q(r)}return Y(e,n)}function q(e){return Array.from(e).reduce((t,n)=>n.segment===" "?[...t,{id:`space-${n.index}`,string:"\xA0"}]:t.find(r=>r.string===n.segment)?[...t,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...t,{id:n.segment,string:n.segment}],[])}function K(e,t,n){let o=e.find(r=>r.string===t);e.push(o?{id:`${t}-${n}`,string:t}:{id:t,string:t});}function Y(e,t){let n=t?e.split(" "):e.split(""),o=[];return n.forEach((r,i)=>{t&&i>0&&o.push({id:`space-${i}`,string:"\xA0"}),K(o,r,i);}),o}var y="torph-root",T="torph-item",m="torph-id",f="torph-exiting",M="torph-debug";function R(e){let t=Array.from(e.children),n={},o=e.getBoundingClientRect();return t.forEach((r,i)=>{if(r.hasAttribute(f))return;let s=r.getAttribute(m)||`child-${i}`,a=r.getBoundingClientRect();n[s]={x:a.left-o.left,y:a.top-o.top};}),n}function w(e,t,n){let o=e[n],r=t[n];return !o||!r?{dx:0,dy:0}:{dx:o.x-r.x,dy:o.y-r.y}}function v(e,t,n,o="backward-first"){let[r,i]=o==="backward-first"?["backward","forward"]:["forward","backward"],s=a=>{if(a==="backward"){for(let u=e-1;u>=0;u--)if(n.has(t[u]))return t[u]}else for(let u=e+1;u<t.length;u++)if(n.has(t[u]))return t[u];return null};return s(r)??s(i)}function _(e,t,n,o){let r=new Set(n.filter((s,a)=>o.has(s)&&!t.has(e[a]))),i=new Map;for(let s=0;s<e.length;s++){let a=e[s];t.has(a)&&i.set(a,v(s,n,r,"forward-first"));}return i}function C(e,t){return Math.min(e*t,150)}function L(e){let t=getComputedStyle(e).transform;if(!t||t==="none")return {tx:0,ty:0};let n=t.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let o=n[1].split(",").map(Number);return {tx:o[4]||0,ty:o[5]||0}}function Q(e){let{tx:t,ty:n}=L(e),o=Number(getComputedStyle(e).opacity)||1;return e.getAnimations().forEach(r=>r.cancel()),{tx:t,ty:n,opacity:o}}function N(e,t){let{dx:n,dy:o,duration:r,ease:i,scale:s}=t;e.animate({transform:s?`translate(${n}px, ${o}px) scale(0.95)`:`translate(${n}px, ${o}px)`,offset:1},{duration:r,easing:i,fill:"both"});let a=e.animate({opacity:0,offset:1},{duration:C(r,.25),easing:"linear",fill:"both"});a.onfinish=()=>e.remove();}function k(e,t){let{deltaX:n,deltaY:o,isNew:r,duration:i,ease:s}=t,a=Q(e),u=n+a.tx,c=o+a.ty;e.animate({transform:`translate(${u}px, ${c}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:s,fill:"both"});let l=r&&a.opacity>=1?0:a.opacity;l<1&&e.animate([{opacity:l},{opacity:1}],{duration:C(i,r?.5:.25),easing:"linear",fill:"both"});}var x=null;function F(e,t,n,o,r){if(x&&(x(),x=null),t===0||n===0)return;e.style.width="auto",e.style.height="auto",e.offsetWidth;let i=e.offsetWidth,s=e.offsetHeight;e.style.width=`${t}px`,e.style.height=`${n}px`,e.offsetWidth,e.style.width=`${i}px`,e.style.height=`${s}px`;function a(){e.removeEventListener("transitionend",u),clearTimeout(c),x=null,e.style.width="auto",e.style.height="auto",r?.();}function u(l){l.target===e&&(l.propertyName!=="width"&&l.propertyName!=="height"||a());}e.addEventListener("transitionend",u);let c=setTimeout(a,o+50);x=()=>{e.removeEventListener("transitionend",u),clearTimeout(c),x=null;};}function P(e){let n=e[0]?.parentElement?.getBoundingClientRect(),o=e.map(r=>{let{tx:i,ty:s}=L(r),a=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(c=>c.cancel());let u=r.getBoundingClientRect();return {left:(n?u.left-n.left:u.left)+i,top:(n?u.top-n.top:u.top)+s,width:u.width,height:u.height,opacity:a}});e.forEach((r,i)=>{let s=o[i];r.setAttribute(f,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${s.left}px`,r.style.top=`${s.top}px`,r.style.width=`${s.width}px`,r.style.height=`${s.height}px`,r.style.opacity=String(s.opacity);});}function X(e,t,n,o){let r=new Map;t.forEach(i=>{let s=i.getAttribute(m);n.has(s)&&!i.hasAttribute(f)&&(r.set(s,i),i.remove());}),Array.from(e.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),o.forEach(i=>{let s=r.get(i.id);if(s)s.textContent=i.string,e.appendChild(s);else {let a=document.createElement("span");a.setAttribute(T,""),a.setAttribute(m,i.id),a.textContent=i.string,e.appendChild(a);}});}var J=`
 [${y}] {
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   will-change: width, height;
   transition-property: width, height;
@@ -20,4 +20,4 @@
     outline: 2px solid cyan;
     outline-offset: -4px;
   }
-}`,h=null,v=0;function X(){v++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=K,document.head.appendChild(h));}function G(){v--,!(v>0||!h)&&(h.remove(),h=null);}function U(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:n.matches,destroy:i};function t(s){e.prefersReducedMotion=s.matches;}function i(){n.removeEventListener("change",t);}return n.addEventListener("change",t),e}var J="span",W={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},L=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:t,...i}={...W,...e},s,r;if(typeof t=="object"){let o=D(t);s=o.easing,r=o.duration;}else s=t,r=i.duration;this.options={...i,ease:s,duration:r},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=U()),this.isDisabled()||(this.element.setAttribute(y,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(M,"")),this.data="",this.isDisabled()||X();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(y),this.element.removeAttribute(M),G();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,t){let i=t.offsetWidth,s=t.offsetHeight,r=H(e,this.options.locale);this.prevMeasures=A(this.element);let o=Array.from(t.children),a=new Set(r.map(p=>p.id)),u=o.filter(p=>!a.has(p.getAttribute(f))&&!p.hasAttribute(d)),m=new Set(u),c=o.map(p=>p.getAttribute(f)),l=_(o,m,c,a);if(F(u),P(t,o,a,r),this.currentMeasures=A(this.element),this.updateStyles(r),u.forEach(p=>{if(this.isInitialRender){p.remove();return}let g=l.get(p),{dx:b,dy:E}=g?S(this.currentMeasures,this.prevMeasures,g):{dx:0,dy:0};N(p,{dx:b,dy:E,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,t.style.width="auto",t.style.height="auto";return}k(t,i,s,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let t=Array.from(this.element.children),i=e.map(r=>r.id),s=new Set(i.filter(r=>this.prevMeasures[r]));t.forEach((r,o)=>{if(r.hasAttribute(d))return;let a=r.getAttribute(f)||`child-${o}`,u=!this.prevMeasures[a],m=u?w(e.findIndex(p=>p.id===a),i,s):a,{dx:c,dy:l}=m?S(this.prevMeasures,this.currentMeasures,m):{dx:0,dy:0};C(r,{deltaX:c,deltaY:l,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};exports.DEFAULT_AS=J;exports.DEFAULT_TEXT_MORPH_OPTIONS=W;exports.TextMorph=L;
+}`,h=null,I=0;function B(){I++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=J,document.head.appendChild(h));}function G(){I--,!(I>0||!h)&&(h.remove(),h=null);}function U(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let e=window.matchMedia("(prefers-reduced-motion: reduce)"),t={prefersReducedMotion:e.matches,destroy:o};function n(r){t.prefersReducedMotion=r.matches;}function o(){e.removeEventListener("change",n);}return e.addEventListener("change",n),t}var E=class e{instance=null;lastText="";configKey="";attach(t,n){this.instance?.destroy(),this.instance=new b({element:t,...n}),this.configKey=e.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(t){this.lastText=t,this.instance?.update(t);}needsRecreate(t){return e.serializeConfig(t)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(t){return JSON.stringify({ease:t.ease,duration:t.duration,locale:t.locale,scale:t.scale,debug:t.debug,disabled:t.disabled,respectReducedMotion:t.respectReducedMotion})}};var V="span",W={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},b=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(t){let{ease:n,...o}={...W,...t},r,i;if(typeof n=="object"){let s=D(n);r=s.easing,i=s.duration;}else r=n,i=o.duration;this.options={...o,ease:r,duration:i},this.element=t.element,this.options.respectReducedMotion&&(this.reducedMotion=U()),this.isDisabled()||(this.element.setAttribute(y,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute(M,"")),this.data="",this.isDisabled()||B();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute(y),this.element.removeAttribute(M),G();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(t,n){let o=n.offsetWidth,r=n.offsetHeight,i=H(t,this.options.locale);this.prevMeasures=R(this.element);let s=Array.from(n.children),a=new Set(i.map(p=>p.id)),u=s.filter(p=>!a.has(p.getAttribute(m))&&!p.hasAttribute(f)),c=new Set(u),l=s.map(p=>p.getAttribute(m)),d=_(s,c,l,a);if(P(u),X(n,s,a,i),this.currentMeasures=R(this.element),this.updateStyles(i),u.forEach(p=>{if(this.isInitialRender){p.remove();return}let g=d.get(p),{dx:A,dy:S}=g?w(this.currentMeasures,this.prevMeasures,g):{dx:0,dy:0};N(p,{dx:A,dy:S,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}F(n,o,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(t){if(this.isInitialRender)return;let n=Array.from(this.element.children),o=t.map(i=>i.id),r=new Set(o.filter(i=>this.prevMeasures[i]));n.forEach((i,s)=>{if(i.hasAttribute(f))return;let a=i.getAttribute(m)||`child-${s}`,u=!this.prevMeasures[a],c=u?v(t.findIndex(p=>p.id===a),o,r):a,{dx:l,dy:d}=c?w(this.prevMeasures,this.currentMeasures,c):{dx:0,dy:0};k(i,{deltaX:l,deltaY:d,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};exports.DEFAULT_AS=V;exports.DEFAULT_TEXT_MORPH_OPTIONS=W;exports.MorphController=E;exports.TextMorph=b;

package/dist/index.mjs

@@ -1,6 +1,6 @@
-function $(n,e,t){if(t<1){let u=e*Math.sqrt(1-t*t);return 1-Math.exp(-t*e*n)*(Math.cos(u*n)+t*e/u*Math.sin(u*n))}let i=Math.sqrt(t*t-1),s=-e*(t+i),r=-e*(t-i),o=-s/(r-s);return 1-(1-o)*Math.exp(s*n)-o*Math.exp(r*n)}function B(n,e,t){let r=0;for(let o=0;o<10;o+=.001)if(Math.abs($(o,n,e)-1)>t)r=0;else if(r+=.001,r>.1)return Math.ceil((o-r+.001)*1e3);return Math.ceil(10*1e3)}var I=new Map;function D(n){let{stiffness:e=100,damping:t=10,mass:i=1,precision:s=.001}=n??{},r=`${e}:${t}:${i}:${s}`,o=I.get(r);if(o)return o;let a=Math.sqrt(e/i),u=t/(2*Math.sqrt(e*i)),m=B(a,u,s),c=Math.min(100,Math.max(32,Math.round(m/15))),l=[];for(let g=0;g<c;g++){let b=g/(c-1)*(m/1e3),E=g===c-1?1:$(b,a,u);l.push(Math.round(E*1e4)/1e4+"");}for(;l.length>2&&l[l.length-2]==="1";)l.splice(l.length-2,1);let p={easing:`linear(${l.join(", ")})`,duration:m};return I.set(r,p),p}function H(n,e){let t=n.includes(" ");if(typeof Intl.Segmenter<"u"){let s=new Intl.Segmenter(e,{granularity:t?"word":"grapheme"}).segment(n)[Symbol.iterator]();return j(s)}return Y(n,t)}function j(n){return Array.from(n).reduce((e,t)=>t.segment===" "?[...e,{id:`space-${t.index}`,string:"\xA0"}]:e.find(s=>s.string===t.segment)?[...e,{id:`${t.segment}-${t.index}`,string:t.segment}]:[...e,{id:t.segment,string:t.segment}],[])}function q(n,e,t){let i=n.find(s=>s.string===e);n.push(i?{id:`${e}-${t}`,string:e}:{id:e,string:e});}function Y(n,e){let t=e?n.split(" "):n.split(""),i=[];return t.forEach((s,r)=>{e&&r>0&&i.push({id:`space-${r}`,string:"\xA0"}),q(i,s,r);}),i}var y="torph-root",T="torph-item",f="torph-id",d="torph-exiting",M="torph-debug";function A(n){let e=Array.from(n.children),t={};return e.forEach((i,s)=>{if(i.hasAttribute(d))return;let r=i.getAttribute(f)||`child-${s}`;t[r]={x:i.offsetLeft,y:i.offsetTop};}),t}function S(n,e,t){let i=n[t],s=e[t];return !i||!s?{dx:0,dy:0}:{dx:i.x-s.x,dy:i.y-s.y}}function w(n,e,t,i="backward-first"){let[s,r]=i==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let u=n-1;u>=0;u--)if(t.has(e[u]))return e[u]}else for(let u=n+1;u<e.length;u++)if(t.has(e[u]))return e[u];return null};return o(s)??o(r)}function _(n,e,t,i){let s=new Set(t.filter((o,a)=>i.has(o)&&!e.has(n[a]))),r=new Map;for(let o=0;o<n.length;o++){let a=n[o];e.has(a)&&r.set(a,w(o,t,s,"forward-first"));}return r}function O(n,e){return Math.min(n*e,150)}function R(n){let e=getComputedStyle(n).transform;if(!e||e==="none")return {tx:0,ty:0};let t=e.match(/matrix\(([^)]+)\)/);if(!t)return {tx:0,ty:0};let i=t[1].split(",").map(Number);return {tx:i[4]||0,ty:i[5]||0}}function Q(n){let{tx:e,ty:t}=R(n),i=Number(getComputedStyle(n).opacity)||1;return n.getAnimations().forEach(s=>s.cancel()),{tx:e,ty:t,opacity:i}}function N(n,e){let{dx:t,dy:i,duration:s,ease:r,scale:o}=e;n.animate({transform:o?`translate(${t}px, ${i}px) scale(0.95)`:`translate(${t}px, ${i}px)`,offset:1},{duration:s,easing:r,fill:"both"});let a=n.animate({opacity:0,offset:1},{duration:O(s,.25),easing:"linear",fill:"both"});a.onfinish=()=>n.remove();}function C(n,e){let{deltaX:t,deltaY:i,isNew:s,duration:r,ease:o}=e,a=Q(n),u=t+a.tx,m=i+a.ty;n.animate({transform:`translate(${u}px, ${m}px) scale(${s?.95:1})`,offset:0},{duration:r,easing:o,fill:"both"});let c=s&&a.opacity>=1?0:a.opacity;c<1&&n.animate([{opacity:c},{opacity:1}],{duration:O(r,s?.5:.25),easing:"linear",fill:"both"});}var x=null;function k(n,e,t,i,s){if(x&&(x(),x=null),e===0||t===0)return;n.style.width="auto",n.style.height="auto",n.offsetWidth;let r=n.offsetWidth,o=n.offsetHeight;n.style.width=`${e}px`,n.style.height=`${t}px`,n.offsetWidth,n.style.width=`${r}px`,n.style.height=`${o}px`;function a(){n.removeEventListener("transitionend",u),clearTimeout(m),x=null,n.style.width="auto",n.style.height="auto",s?.();}function u(c){c.target===n&&(c.propertyName!=="width"&&c.propertyName!=="height"||a());}n.addEventListener("transitionend",u);let m=setTimeout(a,i+50);x=()=>{n.removeEventListener("transitionend",u),clearTimeout(m),x=null;};}function F(n){let e=n.map(t=>{let{tx:i,ty:s}=R(t),r=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(o=>o.cancel()),{left:t.offsetLeft+i,top:t.offsetTop+s,width:t.offsetWidth,height:t.offsetHeight,opacity:r}});n.forEach((t,i)=>{let s=e[i];t.setAttribute(d,""),t.style.position="absolute",t.style.pointerEvents="none",t.style.left=`${s.left}px`,t.style.top=`${s.top}px`,t.style.width=`${s.width}px`,t.style.height=`${s.height}px`,t.style.opacity=String(s.opacity);});}function P(n,e,t,i){let s=new Map;e.forEach(r=>{let o=r.getAttribute(f);t.has(o)&&!r.hasAttribute(d)&&(s.set(o,r),r.remove());}),Array.from(n.childNodes).forEach(r=>{r.nodeType===Node.TEXT_NODE&&r.remove();}),i.forEach(r=>{let o=s.get(r.id);if(o)o.textContent=r.string,n.appendChild(o);else {let a=document.createElement("span");a.setAttribute(T,""),a.setAttribute(f,r.id),a.textContent=r.string,n.appendChild(a);}});}var K=`
+function $(e,t,n){if(n<1){let u=t*Math.sqrt(1-n*n);return 1-Math.exp(-n*t*e)*(Math.cos(u*e)+n*t/u*Math.sin(u*e))}let o=Math.sqrt(n*n-1),r=-t*(n+o),i=-t*(n-o),s=-r/(i-r);return 1-(1-s)*Math.exp(r*e)-s*Math.exp(i*e)}function j(e,t,n){let i=0;for(let s=0;s<10;s+=.001)if(Math.abs($(s,e,t)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((s-i+.001)*1e3);return Math.ceil(10*1e3)}var O=new Map;function D(e){let{stiffness:t=100,damping:n=10,mass:o=1,precision:r=.001}=e??{},i=`${t}:${n}:${o}:${r}`,s=O.get(i);if(s)return s;let a=Math.sqrt(t/o),u=n/(2*Math.sqrt(t*o)),c=j(a,u,r),l=Math.min(100,Math.max(32,Math.round(c/15))),d=[];for(let g=0;g<l;g++){let A=g/(l-1)*(c/1e3),S=g===l-1?1:$(A,a,u);d.push(Math.round(S*1e4)/1e4+"");}for(;d.length>2&&d[d.length-2]==="1";)d.splice(d.length-2,1);let p={easing:`linear(${d.join(", ")})`,duration:c};return O.set(i,p),p}function H(e,t){let n=e.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(t,{granularity:n?"word":"grapheme"}).segment(e)[Symbol.iterator]();return q(r)}return Y(e,n)}function q(e){return Array.from(e).reduce((t,n)=>n.segment===" "?[...t,{id:`space-${n.index}`,string:"\xA0"}]:t.find(r=>r.string===n.segment)?[...t,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...t,{id:n.segment,string:n.segment}],[])}function K(e,t,n){let o=e.find(r=>r.string===t);e.push(o?{id:`${t}-${n}`,string:t}:{id:t,string:t});}function Y(e,t){let n=t?e.split(" "):e.split(""),o=[];return n.forEach((r,i)=>{t&&i>0&&o.push({id:`space-${i}`,string:"\xA0"}),K(o,r,i);}),o}var y="torph-root",T="torph-item",m="torph-id",f="torph-exiting",M="torph-debug";function R(e){let t=Array.from(e.children),n={},o=e.getBoundingClientRect();return t.forEach((r,i)=>{if(r.hasAttribute(f))return;let s=r.getAttribute(m)||`child-${i}`,a=r.getBoundingClientRect();n[s]={x:a.left-o.left,y:a.top-o.top};}),n}function w(e,t,n){let o=e[n],r=t[n];return !o||!r?{dx:0,dy:0}:{dx:o.x-r.x,dy:o.y-r.y}}function v(e,t,n,o="backward-first"){let[r,i]=o==="backward-first"?["backward","forward"]:["forward","backward"],s=a=>{if(a==="backward"){for(let u=e-1;u>=0;u--)if(n.has(t[u]))return t[u]}else for(let u=e+1;u<t.length;u++)if(n.has(t[u]))return t[u];return null};return s(r)??s(i)}function _(e,t,n,o){let r=new Set(n.filter((s,a)=>o.has(s)&&!t.has(e[a]))),i=new Map;for(let s=0;s<e.length;s++){let a=e[s];t.has(a)&&i.set(a,v(s,n,r,"forward-first"));}return i}function C(e,t){return Math.min(e*t,150)}function L(e){let t=getComputedStyle(e).transform;if(!t||t==="none")return {tx:0,ty:0};let n=t.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let o=n[1].split(",").map(Number);return {tx:o[4]||0,ty:o[5]||0}}function Q(e){let{tx:t,ty:n}=L(e),o=Number(getComputedStyle(e).opacity)||1;return e.getAnimations().forEach(r=>r.cancel()),{tx:t,ty:n,opacity:o}}function N(e,t){let{dx:n,dy:o,duration:r,ease:i,scale:s}=t;e.animate({transform:s?`translate(${n}px, ${o}px) scale(0.95)`:`translate(${n}px, ${o}px)`,offset:1},{duration:r,easing:i,fill:"both"});let a=e.animate({opacity:0,offset:1},{duration:C(r,.25),easing:"linear",fill:"both"});a.onfinish=()=>e.remove();}function k(e,t){let{deltaX:n,deltaY:o,isNew:r,duration:i,ease:s}=t,a=Q(e),u=n+a.tx,c=o+a.ty;e.animate({transform:`translate(${u}px, ${c}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:s,fill:"both"});let l=r&&a.opacity>=1?0:a.opacity;l<1&&e.animate([{opacity:l},{opacity:1}],{duration:C(i,r?.5:.25),easing:"linear",fill:"both"});}var x=null;function F(e,t,n,o,r){if(x&&(x(),x=null),t===0||n===0)return;e.style.width="auto",e.style.height="auto",e.offsetWidth;let i=e.offsetWidth,s=e.offsetHeight;e.style.width=`${t}px`,e.style.height=`${n}px`,e.offsetWidth,e.style.width=`${i}px`,e.style.height=`${s}px`;function a(){e.removeEventListener("transitionend",u),clearTimeout(c),x=null,e.style.width="auto",e.style.height="auto",r?.();}function u(l){l.target===e&&(l.propertyName!=="width"&&l.propertyName!=="height"||a());}e.addEventListener("transitionend",u);let c=setTimeout(a,o+50);x=()=>{e.removeEventListener("transitionend",u),clearTimeout(c),x=null;};}function P(e){let n=e[0]?.parentElement?.getBoundingClientRect(),o=e.map(r=>{let{tx:i,ty:s}=L(r),a=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(c=>c.cancel());let u=r.getBoundingClientRect();return {left:(n?u.left-n.left:u.left)+i,top:(n?u.top-n.top:u.top)+s,width:u.width,height:u.height,opacity:a}});e.forEach((r,i)=>{let s=o[i];r.setAttribute(f,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${s.left}px`,r.style.top=`${s.top}px`,r.style.width=`${s.width}px`,r.style.height=`${s.height}px`,r.style.opacity=String(s.opacity);});}function X(e,t,n,o){let r=new Map;t.forEach(i=>{let s=i.getAttribute(m);n.has(s)&&!i.hasAttribute(f)&&(r.set(s,i),i.remove());}),Array.from(e.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),o.forEach(i=>{let s=r.get(i.id);if(s)s.textContent=i.string,e.appendChild(s);else {let a=document.createElement("span");a.setAttribute(T,""),a.setAttribute(m,i.id),a.textContent=i.string,e.appendChild(a);}});}var J=`
 [${y}] {
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   will-change: width, height;
   transition-property: width, height;
@@ -20,4 +20,4 @@ function $(n,e,t){if(t<1){let u=e*Math.sqrt(1-t*t);return 1-Math.exp(-t*e*n)*(Ma
     outline: 2px solid cyan;
     outline-offset: -4px;
   }
-}`,h=null,v=0;function X(){v++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=K,document.head.appendChild(h));}function G(){v--,!(v>0||!h)&&(h.remove(),h=null);}function U(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:n.matches,destroy:i};function t(s){e.prefersReducedMotion=s.matches;}function i(){n.removeEventListener("change",t);}return n.addEventListener("change",t),e}var J="span",W={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},L=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:t,...i}={...W,...e},s,r;if(typeof t=="object"){let o=D(t);s=o.easing,r=o.duration;}else s=t,r=i.duration;this.options={...i,ease:s,duration:r},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=U()),this.isDisabled()||(this.element.setAttribute(y,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(M,"")),this.data="",this.isDisabled()||X();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(y),this.element.removeAttribute(M),G();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,t){let i=t.offsetWidth,s=t.offsetHeight,r=H(e,this.options.locale);this.prevMeasures=A(this.element);let o=Array.from(t.children),a=new Set(r.map(p=>p.id)),u=o.filter(p=>!a.has(p.getAttribute(f))&&!p.hasAttribute(d)),m=new Set(u),c=o.map(p=>p.getAttribute(f)),l=_(o,m,c,a);if(F(u),P(t,o,a,r),this.currentMeasures=A(this.element),this.updateStyles(r),u.forEach(p=>{if(this.isInitialRender){p.remove();return}let g=l.get(p),{dx:b,dy:E}=g?S(this.currentMeasures,this.prevMeasures,g):{dx:0,dy:0};N(p,{dx:b,dy:E,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,t.style.width="auto",t.style.height="auto";return}k(t,i,s,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let t=Array.from(this.element.children),i=e.map(r=>r.id),s=new Set(i.filter(r=>this.prevMeasures[r]));t.forEach((r,o)=>{if(r.hasAttribute(d))return;let a=r.getAttribute(f)||`child-${o}`,u=!this.prevMeasures[a],m=u?w(e.findIndex(p=>p.id===a),i,s):a,{dx:c,dy:l}=m?S(this.prevMeasures,this.currentMeasures,m):{dx:0,dy:0};C(r,{deltaX:c,deltaY:l,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};export{J as DEFAULT_AS,W as DEFAULT_TEXT_MORPH_OPTIONS,L as TextMorph};
+}`,h=null,I=0;function B(){I++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=J,document.head.appendChild(h));}function G(){I--,!(I>0||!h)&&(h.remove(),h=null);}function U(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let e=window.matchMedia("(prefers-reduced-motion: reduce)"),t={prefersReducedMotion:e.matches,destroy:o};function n(r){t.prefersReducedMotion=r.matches;}function o(){e.removeEventListener("change",n);}return e.addEventListener("change",n),t}var E=class e{instance=null;lastText="";configKey="";attach(t,n){this.instance?.destroy(),this.instance=new b({element:t,...n}),this.configKey=e.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(t){this.lastText=t,this.instance?.update(t);}needsRecreate(t){return e.serializeConfig(t)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(t){return JSON.stringify({ease:t.ease,duration:t.duration,locale:t.locale,scale:t.scale,debug:t.debug,disabled:t.disabled,respectReducedMotion:t.respectReducedMotion})}};var V="span",W={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},b=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(t){let{ease:n,...o}={...W,...t},r,i;if(typeof n=="object"){let s=D(n);r=s.easing,i=s.duration;}else r=n,i=o.duration;this.options={...o,ease:r,duration:i},this.element=t.element,this.options.respectReducedMotion&&(this.reducedMotion=U()),this.isDisabled()||(this.element.setAttribute(y,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute(M,"")),this.data="",this.isDisabled()||B();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute(y),this.element.removeAttribute(M),G();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(t,n){let o=n.offsetWidth,r=n.offsetHeight,i=H(t,this.options.locale);this.prevMeasures=R(this.element);let s=Array.from(n.children),a=new Set(i.map(p=>p.id)),u=s.filter(p=>!a.has(p.getAttribute(m))&&!p.hasAttribute(f)),c=new Set(u),l=s.map(p=>p.getAttribute(m)),d=_(s,c,l,a);if(P(u),X(n,s,a,i),this.currentMeasures=R(this.element),this.updateStyles(i),u.forEach(p=>{if(this.isInitialRender){p.remove();return}let g=d.get(p),{dx:A,dy:S}=g?w(this.currentMeasures,this.prevMeasures,g):{dx:0,dy:0};N(p,{dx:A,dy:S,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}F(n,o,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(t){if(this.isInitialRender)return;let n=Array.from(this.element.children),o=t.map(i=>i.id),r=new Set(o.filter(i=>this.prevMeasures[i]));n.forEach((i,s)=>{if(i.hasAttribute(f))return;let a=i.getAttribute(m)||`child-${s}`,u=!this.prevMeasures[a],c=u?v(t.findIndex(p=>p.id===a),o,r):a,{dx:l,dy:d}=c?w(this.prevMeasures,this.currentMeasures,c):{dx:0,dy:0};k(i,{deltaX:l,deltaY:d,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};export{V as DEFAULT_AS,W as DEFAULT_TEXT_MORPH_OPTIONS,E as MorphController,b as TextMorph};

package/dist/react/index.d.mts

@@ -28,7 +28,7 @@ type TextMorphProps = Omit<TextMorphOptions, "element"> & {
 };
 declare const TextMorph: ({ children, className, style, as, ...props }: TextMorphProps) => React.JSX.Element;
 declare function useTextMorph(props: Omit<TextMorphOptions, "element">): {
-    ref: React.MutableRefObject<HTMLDivElement | null>;
+    ref: React.MutableRefObject<HTMLElement | null>;
     update: (text: string) => void;
 };
 

package/dist/react/index.d.ts

@@ -28,7 +28,7 @@ type TextMorphProps = Omit<TextMorphOptions, "element"> & {
 };
 declare const TextMorph: ({ children, className, style, as, ...props }: TextMorphProps) => React.JSX.Element;
 declare function useTextMorph(props: Omit<TextMorphOptions, "element">): {
-    ref: React.MutableRefObject<HTMLDivElement | null>;
+    ref: React.MutableRefObject<HTMLElement | null>;
     update: (text: string) => void;
 };
 

package/dist/react/index.js

@@ -1,6 +1,6 @@
-'use strict';var g=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var g__default=/*#__PURE__*/_interopDefault(g);function H(n,e,t){if(t<1){let u=e*Math.sqrt(1-t*t);return 1-Math.exp(-t*e*n)*(Math.cos(u*n)+t*e/u*Math.sin(u*n))}let i=Math.sqrt(t*t-1),s=-e*(t+i),r=-e*(t-i),o=-s/(r-s);return 1-(1-o)*Math.exp(s*n)-o*Math.exp(r*n)}function Y(n,e,t){let r=0;for(let o=0;o<10;o+=.001)if(Math.abs(H(o,n,e)-1)>t)r=0;else if(r+=.001,r>.1)return Math.ceil((o-r+.001)*1e3);return Math.ceil(10*1e3)}var $=new Map;function D(n){let{stiffness:e=100,damping:t=10,mass:i=1,precision:s=.001}=n??{},r=`${e}:${t}:${i}:${s}`,o=$.get(r);if(o)return o;let a=Math.sqrt(e/i),u=t/(2*Math.sqrt(e*i)),p=Y(a,u,s),l=Math.min(100,Math.max(32,Math.round(p/15))),m=[];for(let y=0;y<l;y++){let S=y/(l-1)*(p/1e3),R=y===l-1?1:H(S,a,u);m.push(Math.round(R*1e4)/1e4+"");}for(;m.length>2&&m[m.length-2]==="1";)m.splice(m.length-2,1);let c={easing:`linear(${m.join(", ")})`,duration:p};return $.set(r,c),c}function _(n,e){let t=n.includes(" ");if(typeof Intl.Segmenter<"u"){let s=new Intl.Segmenter(e,{granularity:t?"word":"grapheme"}).segment(n)[Symbol.iterator]();return Q(s)}return V(n,t)}function Q(n){return Array.from(n).reduce((e,t)=>t.segment===" "?[...e,{id:`space-${t.index}`,string:"\xA0"}]:e.find(s=>s.string===t.segment)?[...e,{id:`${t.segment}-${t.index}`,string:t.segment}]:[...e,{id:t.segment,string:t.segment}],[])}function J(n,e,t){let i=n.find(s=>s.string===e);n.push(i?{id:`${e}-${t}`,string:e}:{id:e,string:e});}function V(n,e){let t=e?n.split(" "):n.split(""),i=[];return t.forEach((s,r)=>{e&&r>0&&i.push({id:`space-${r}`,string:"\xA0"}),J(i,s,r);}),i}var x="torph-root",M="torph-item",f="torph-id",d="torph-exiting",b="torph-debug";function w(n){let e=Array.from(n.children),t={};return e.forEach((i,s)=>{if(i.hasAttribute(d))return;let r=i.getAttribute(f)||`child-${s}`;t[r]={x:i.offsetLeft,y:i.offsetTop};}),t}function v(n,e,t){let i=n[t],s=e[t];return !i||!s?{dx:0,dy:0}:{dx:i.x-s.x,dy:i.y-s.y}}function L(n,e,t,i="backward-first"){let[s,r]=i==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let u=n-1;u>=0;u--)if(t.has(e[u]))return e[u]}else for(let u=n+1;u<e.length;u++)if(t.has(e[u]))return e[u];return null};return o(s)??o(r)}function C(n,e,t,i){let s=new Set(t.filter((o,a)=>i.has(o)&&!e.has(n[a]))),r=new Map;for(let o=0;o<n.length;o++){let a=n[o];e.has(a)&&r.set(a,L(o,t,s,"forward-first"));}return r}function N(n,e){return Math.min(n*e,150)}function I(n){let e=getComputedStyle(n).transform;if(!e||e==="none")return {tx:0,ty:0};let t=e.match(/matrix\(([^)]+)\)/);if(!t)return {tx:0,ty:0};let i=t[1].split(",").map(Number);return {tx:i[4]||0,ty:i[5]||0}}function z(n){let{tx:e,ty:t}=I(n),i=Number(getComputedStyle(n).opacity)||1;return n.getAnimations().forEach(s=>s.cancel()),{tx:e,ty:t,opacity:i}}function k(n,e){let{dx:t,dy:i,duration:s,ease:r,scale:o}=e;n.animate({transform:o?`translate(${t}px, ${i}px) scale(0.95)`:`translate(${t}px, ${i}px)`,offset:1},{duration:s,easing:r,fill:"both"});let a=n.animate({opacity:0,offset:1},{duration:N(s,.25),easing:"linear",fill:"both"});a.onfinish=()=>n.remove();}function P(n,e){let{deltaX:t,deltaY:i,isNew:s,duration:r,ease:o}=e,a=z(n),u=t+a.tx,p=i+a.ty;n.animate({transform:`translate(${u}px, ${p}px) scale(${s?.95:1})`,offset:0},{duration:r,easing:o,fill:"both"});let l=s&&a.opacity>=1?0:a.opacity;l<1&&n.animate([{opacity:l},{opacity:1}],{duration:N(r,s?.5:.25),easing:"linear",fill:"both"});}var T=null;function F(n,e,t,i,s){if(T&&(T(),T=null),e===0||t===0)return;n.style.width="auto",n.style.height="auto",n.offsetWidth;let r=n.offsetWidth,o=n.offsetHeight;n.style.width=`${e}px`,n.style.height=`${t}px`,n.offsetWidth,n.style.width=`${r}px`,n.style.height=`${o}px`;function a(){n.removeEventListener("transitionend",u),clearTimeout(p),T=null,n.style.width="auto",n.style.height="auto",s?.();}function u(l){l.target===n&&(l.propertyName!=="width"&&l.propertyName!=="height"||a());}n.addEventListener("transitionend",u);let p=setTimeout(a,i+50);T=()=>{n.removeEventListener("transitionend",u),clearTimeout(p),T=null;};}function X(n){let e=n.map(t=>{let{tx:i,ty:s}=I(t),r=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(o=>o.cancel()),{left:t.offsetLeft+i,top:t.offsetTop+s,width:t.offsetWidth,height:t.offsetHeight,opacity:r}});n.forEach((t,i)=>{let s=e[i];t.setAttribute(d,""),t.style.position="absolute",t.style.pointerEvents="none",t.style.left=`${s.left}px`,t.style.top=`${s.top}px`,t.style.width=`${s.width}px`,t.style.height=`${s.height}px`,t.style.opacity=String(s.opacity);});}function G(n,e,t,i){let s=new Map;e.forEach(r=>{let o=r.getAttribute(f);t.has(o)&&!r.hasAttribute(d)&&(s.set(o,r),r.remove());}),Array.from(n.childNodes).forEach(r=>{r.nodeType===Node.TEXT_NODE&&r.remove();}),i.forEach(r=>{let o=s.get(r.id);if(o)o.textContent=r.string,n.appendChild(o);else {let a=document.createElement("span");a.setAttribute(M,""),a.setAttribute(f,r.id),a.textContent=r.string,n.appendChild(a);}});}var Z=`
+'use strict';var g=require('react');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var g__default=/*#__PURE__*/_interopDefault(g);function H(t,e,n){if(n<1){let c=e*Math.sqrt(1-n*n);return 1-Math.exp(-n*e*t)*(Math.cos(c*t)+n*e/c*Math.sin(c*t))}let s=Math.sqrt(n*n-1),r=-e*(n+s),i=-e*(n-s),o=-r/(i-r);return 1-(1-o)*Math.exp(r*t)-o*Math.exp(i*t)}function Y(t,e,n){let i=0;for(let o=0;o<10;o+=.001)if(Math.abs(H(o,t,e)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((o-i+.001)*1e3);return Math.ceil(10*1e3)}var $=new Map;function C(t){let{stiffness:e=100,damping:n=10,mass:s=1,precision:r=.001}=t??{},i=`${e}:${n}:${s}:${r}`,o=$.get(i);if(o)return o;let a=Math.sqrt(e/s),c=n/(2*Math.sqrt(e*s)),u=Y(a,c,r),l=Math.min(100,Math.max(32,Math.round(u/15))),m=[];for(let y=0;y<l;y++){let R=y/(l-1)*(u/1e3),S=y===l-1?1:H(R,a,c);m.push(Math.round(S*1e4)/1e4+"");}for(;m.length>2&&m[m.length-2]==="1";)m.splice(m.length-2,1);let p={easing:`linear(${m.join(", ")})`,duration:u};return $.set(i,p),p}function D(t,e){let n=t.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(e,{granularity:n?"word":"grapheme"}).segment(t)[Symbol.iterator]();return Q(r)}return V(t,n)}function Q(t){return Array.from(t).reduce((e,n)=>n.segment===" "?[...e,{id:`space-${n.index}`,string:"\xA0"}]:e.find(r=>r.string===n.segment)?[...e,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...e,{id:n.segment,string:n.segment}],[])}function J(t,e,n){let s=t.find(r=>r.string===e);t.push(s?{id:`${e}-${n}`,string:e}:{id:e,string:e});}function V(t,e){let n=e?t.split(" "):t.split(""),s=[];return n.forEach((r,i)=>{e&&i>0&&s.push({id:`space-${i}`,string:"\xA0"}),J(s,r,i);}),s}var x="torph-root",M="torph-item",d="torph-id",f="torph-exiting",b="torph-debug";function w(t){let e=Array.from(t.children),n={},s=t.getBoundingClientRect();return e.forEach((r,i)=>{if(r.hasAttribute(f))return;let o=r.getAttribute(d)||`child-${i}`,a=r.getBoundingClientRect();n[o]={x:a.left-s.left,y:a.top-s.top};}),n}function v(t,e,n){let s=t[n],r=e[n];return !s||!r?{dx:0,dy:0}:{dx:s.x-r.x,dy:s.y-r.y}}function L(t,e,n,s="backward-first"){let[r,i]=s==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let c=t-1;c>=0;c--)if(n.has(e[c]))return e[c]}else for(let c=t+1;c<e.length;c++)if(n.has(e[c]))return e[c];return null};return o(r)??o(i)}function _(t,e,n,s){let r=new Set(n.filter((o,a)=>s.has(o)&&!e.has(t[a]))),i=new Map;for(let o=0;o<t.length;o++){let a=t[o];e.has(a)&&i.set(a,L(o,n,r,"forward-first"));}return i}function N(t,e){return Math.min(t*e,150)}function I(t){let e=getComputedStyle(t).transform;if(!e||e==="none")return {tx:0,ty:0};let n=e.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let s=n[1].split(",").map(Number);return {tx:s[4]||0,ty:s[5]||0}}function z(t){let{tx:e,ty:n}=I(t),s=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(r=>r.cancel()),{tx:e,ty:n,opacity:s}}function k(t,e){let{dx:n,dy:s,duration:r,ease:i,scale:o}=e;t.animate({transform:o?`translate(${n}px, ${s}px) scale(0.95)`:`translate(${n}px, ${s}px)`,offset:1},{duration:r,easing:i,fill:"both"});let a=t.animate({opacity:0,offset:1},{duration:N(r,.25),easing:"linear",fill:"both"});a.onfinish=()=>t.remove();}function P(t,e){let{deltaX:n,deltaY:s,isNew:r,duration:i,ease:o}=e,a=z(t),c=n+a.tx,u=s+a.ty;t.animate({transform:`translate(${c}px, ${u}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:o,fill:"both"});let l=r&&a.opacity>=1?0:a.opacity;l<1&&t.animate([{opacity:l},{opacity:1}],{duration:N(i,r?.5:.25),easing:"linear",fill:"both"});}var T=null;function F(t,e,n,s,r){if(T&&(T(),T=null),e===0||n===0)return;t.style.width="auto",t.style.height="auto",t.offsetWidth;let i=t.offsetWidth,o=t.offsetHeight;t.style.width=`${e}px`,t.style.height=`${n}px`,t.offsetWidth,t.style.width=`${i}px`,t.style.height=`${o}px`;function a(){t.removeEventListener("transitionend",c),clearTimeout(u),T=null,t.style.width="auto",t.style.height="auto",r?.();}function c(l){l.target===t&&(l.propertyName!=="width"&&l.propertyName!=="height"||a());}t.addEventListener("transitionend",c);let u=setTimeout(a,s+50);T=()=>{t.removeEventListener("transitionend",c),clearTimeout(u),T=null;};}function X(t){let n=t[0]?.parentElement?.getBoundingClientRect(),s=t.map(r=>{let{tx:i,ty:o}=I(r),a=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(u=>u.cancel());let c=r.getBoundingClientRect();return {left:(n?c.left-n.left:c.left)+i,top:(n?c.top-n.top:c.top)+o,width:c.width,height:c.height,opacity:a}});t.forEach((r,i)=>{let o=s[i];r.setAttribute(f,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${o.left}px`,r.style.top=`${o.top}px`,r.style.width=`${o.width}px`,r.style.height=`${o.height}px`,r.style.opacity=String(o.opacity);});}function B(t,e,n,s){let r=new Map;e.forEach(i=>{let o=i.getAttribute(d);n.has(o)&&!i.hasAttribute(f)&&(r.set(o,i),i.remove());}),Array.from(t.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),s.forEach(i=>{let o=r.get(i.id);if(o)o.textContent=i.string,t.appendChild(o);else {let a=document.createElement("span");a.setAttribute(M,""),a.setAttribute(d,i.id),a.textContent=i.string,t.appendChild(a);}});}var Z=`
 [${x}] {
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   will-change: width, height;
   transition-property: width, height;
@@ -20,4 +20,4 @@
     outline: 2px solid cyan;
     outline-offset: -4px;
   }
-}`,h=null,O=0;function U(){O++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=Z,document.head.appendChild(h));}function W(){O--,!(O>0||!h)&&(h.remove(),h=null);}function j(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:n.matches,destroy:i};function t(s){e.prefersReducedMotion=s.matches;}function i(){n.removeEventListener("change",t);}return n.addEventListener("change",t),e}var E=class n{instance=null;lastText="";configKey="";attach(e,t){this.instance?.destroy(),this.instance=new A({element:e,...t}),this.configKey=n.serializeConfig(t),this.lastText&&this.instance.update(this.lastText);}update(e){this.lastText=e,this.instance?.update(e);}needsRecreate(e){return n.serializeConfig(e)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(e){return JSON.stringify({ease:e.ease,duration:e.duration,locale:e.locale,scale:e.scale,debug:e.debug,disabled:e.disabled,respectReducedMotion:e.respectReducedMotion})}};var B="span",tt={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},A=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:t,...i}={...tt,...e},s,r;if(typeof t=="object"){let o=D(t);s=o.easing,r=o.duration;}else s=t,r=i.duration;this.options={...i,ease:s,duration:r},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=j()),this.isDisabled()||(this.element.setAttribute(x,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(b,"")),this.data="",this.isDisabled()||U();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(x),this.element.removeAttribute(b),W();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,t){let i=t.offsetWidth,s=t.offsetHeight,r=_(e,this.options.locale);this.prevMeasures=w(this.element);let o=Array.from(t.children),a=new Set(r.map(c=>c.id)),u=o.filter(c=>!a.has(c.getAttribute(f))&&!c.hasAttribute(d)),p=new Set(u),l=o.map(c=>c.getAttribute(f)),m=C(o,p,l,a);if(X(u),G(t,o,a,r),this.currentMeasures=w(this.element),this.updateStyles(r),u.forEach(c=>{if(this.isInitialRender){c.remove();return}let y=m.get(c),{dx:S,dy:R}=y?v(this.currentMeasures,this.prevMeasures,y):{dx:0,dy:0};k(c,{dx:S,dy:R,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,t.style.width="auto",t.style.height="auto";return}F(t,i,s,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let t=Array.from(this.element.children),i=e.map(r=>r.id),s=new Set(i.filter(r=>this.prevMeasures[r]));t.forEach((r,o)=>{if(r.hasAttribute(d))return;let a=r.getAttribute(f)||`child-${o}`,u=!this.prevMeasures[a],p=u?L(e.findIndex(c=>c.id===a),i,s):a,{dx:l,dy:m}=p?v(this.prevMeasures,this.currentMeasures,p):{dx:0,dy:0};P(r,{deltaX:l,deltaY:m,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};function K(n){if(typeof n=="string")return n;if(typeof n=="number")return String(n);if(!n||typeof n=="boolean")return "";if(Array.isArray(n))return n.map(K).join("");throw g__default.default.isValidElement(n)?new Error("TextMorph only accepts text content. Found a React element \u2014 use strings, numbers, or expressions instead."):new Error(`TextMorph received an unsupported child of type "${typeof n}".`)}var et=({children:n,className:e,style:t,as:i=B,...s})=>{let{ref:r,update:o}=q(s),a=K(n),u=g__default.default.useRef({__html:a});return g__default.default.useEffect(()=>{o(a);},[a,o]),g__default.default.createElement(i,{ref:r,className:e,style:t,dangerouslySetInnerHTML:u.current})};function q(n){let e=g__default.default.useRef(null),t=g__default.default.useRef(new E),i=E.serializeConfig(n);g__default.default.useEffect(()=>(e.current&&t.current.attach(e.current,n),()=>{t.current.destroy();}),[i]);let s=g__default.default.useCallback(r=>{t.current.update(r);},[]);return {ref:e,update:s}}exports.TextMorph=et;exports.useTextMorph=q;
+}`,h=null,O=0;function G(){O++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=Z,document.head.appendChild(h));}function U(){O--,!(O>0||!h)&&(h.remove(),h=null);}function j(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let t=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:t.matches,destroy:s};function n(r){e.prefersReducedMotion=r.matches;}function s(){t.removeEventListener("change",n);}return t.addEventListener("change",n),e}var E=class t{instance=null;lastText="";configKey="";attach(e,n){this.instance?.destroy(),this.instance=new A({element:e,...n}),this.configKey=t.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(e){this.lastText=e,this.instance?.update(e);}needsRecreate(e){return t.serializeConfig(e)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(e){return JSON.stringify({ease:e.ease,duration:e.duration,locale:e.locale,scale:e.scale,debug:e.debug,disabled:e.disabled,respectReducedMotion:e.respectReducedMotion})}};var K="span",tt={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},A=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:n,...s}={...tt,...e},r,i;if(typeof n=="object"){let o=C(n);r=o.easing,i=o.duration;}else r=n,i=s.duration;this.options={...s,ease:r,duration:i},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=j()),this.isDisabled()||(this.element.setAttribute(x,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(b,"")),this.data="",this.isDisabled()||G();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(x),this.element.removeAttribute(b),U();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,n){let s=n.offsetWidth,r=n.offsetHeight,i=D(e,this.options.locale);this.prevMeasures=w(this.element);let o=Array.from(n.children),a=new Set(i.map(p=>p.id)),c=o.filter(p=>!a.has(p.getAttribute(d))&&!p.hasAttribute(f)),u=new Set(c),l=o.map(p=>p.getAttribute(d)),m=_(o,u,l,a);if(X(c),B(n,o,a,i),this.currentMeasures=w(this.element),this.updateStyles(i),c.forEach(p=>{if(this.isInitialRender){p.remove();return}let y=m.get(p),{dx:R,dy:S}=y?v(this.currentMeasures,this.prevMeasures,y):{dx:0,dy:0};k(p,{dx:R,dy:S,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}F(n,s,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let n=Array.from(this.element.children),s=e.map(i=>i.id),r=new Set(s.filter(i=>this.prevMeasures[i]));n.forEach((i,o)=>{if(i.hasAttribute(f))return;let a=i.getAttribute(d)||`child-${o}`,c=!this.prevMeasures[a],u=c?L(e.findIndex(p=>p.id===a),s,r):a,{dx:l,dy:m}=u?v(this.prevMeasures,this.currentMeasures,u):{dx:0,dy:0};P(i,{deltaX:l,deltaY:m,isNew:c,duration:this.options.duration,ease:this.options.ease});});}};function W(t){if(typeof t=="string")return t;if(typeof t=="number")return String(t);if(!t||typeof t=="boolean")return "";if(Array.isArray(t))return t.map(W).join("");throw g__default.default.isValidElement(t)?new Error("TextMorph only accepts text content. Found a React element \u2014 use strings, numbers, or expressions instead."):new Error(`TextMorph received an unsupported child of type "${typeof t}".`)}var et=({children:t,className:e,style:n,as:s=K,...r})=>{let{ref:i,update:o}=q(r),a=W(t),c=g__default.default.useRef({__html:a});return g__default.default.useEffect(()=>{o(a);},[a,o]),g__default.default.createElement(s,{ref:i,className:e,style:n,dangerouslySetInnerHTML:c.current})};function q(t){let e=g__default.default.useRef(null),n=g__default.default.useRef(new E),s=E.serializeConfig(t);g__default.default.useEffect(()=>(e.current&&n.current.attach(e.current,t),()=>{n.current.destroy();}),[s]);let r=g__default.default.useCallback(i=>{n.current.update(i);},[]);return {ref:e,update:r}}exports.TextMorph=et;exports.useTextMorph=q;

package/dist/react/index.mjs

@@ -1,6 +1,6 @@
-import g from'react';function H(n,e,t){if(t<1){let u=e*Math.sqrt(1-t*t);return 1-Math.exp(-t*e*n)*(Math.cos(u*n)+t*e/u*Math.sin(u*n))}let i=Math.sqrt(t*t-1),s=-e*(t+i),r=-e*(t-i),o=-s/(r-s);return 1-(1-o)*Math.exp(s*n)-o*Math.exp(r*n)}function Y(n,e,t){let r=0;for(let o=0;o<10;o+=.001)if(Math.abs(H(o,n,e)-1)>t)r=0;else if(r+=.001,r>.1)return Math.ceil((o-r+.001)*1e3);return Math.ceil(10*1e3)}var $=new Map;function D(n){let{stiffness:e=100,damping:t=10,mass:i=1,precision:s=.001}=n??{},r=`${e}:${t}:${i}:${s}`,o=$.get(r);if(o)return o;let a=Math.sqrt(e/i),u=t/(2*Math.sqrt(e*i)),p=Y(a,u,s),l=Math.min(100,Math.max(32,Math.round(p/15))),m=[];for(let y=0;y<l;y++){let S=y/(l-1)*(p/1e3),R=y===l-1?1:H(S,a,u);m.push(Math.round(R*1e4)/1e4+"");}for(;m.length>2&&m[m.length-2]==="1";)m.splice(m.length-2,1);let c={easing:`linear(${m.join(", ")})`,duration:p};return $.set(r,c),c}function _(n,e){let t=n.includes(" ");if(typeof Intl.Segmenter<"u"){let s=new Intl.Segmenter(e,{granularity:t?"word":"grapheme"}).segment(n)[Symbol.iterator]();return Q(s)}return V(n,t)}function Q(n){return Array.from(n).reduce((e,t)=>t.segment===" "?[...e,{id:`space-${t.index}`,string:"\xA0"}]:e.find(s=>s.string===t.segment)?[...e,{id:`${t.segment}-${t.index}`,string:t.segment}]:[...e,{id:t.segment,string:t.segment}],[])}function J(n,e,t){let i=n.find(s=>s.string===e);n.push(i?{id:`${e}-${t}`,string:e}:{id:e,string:e});}function V(n,e){let t=e?n.split(" "):n.split(""),i=[];return t.forEach((s,r)=>{e&&r>0&&i.push({id:`space-${r}`,string:"\xA0"}),J(i,s,r);}),i}var x="torph-root",M="torph-item",f="torph-id",d="torph-exiting",b="torph-debug";function w(n){let e=Array.from(n.children),t={};return e.forEach((i,s)=>{if(i.hasAttribute(d))return;let r=i.getAttribute(f)||`child-${s}`;t[r]={x:i.offsetLeft,y:i.offsetTop};}),t}function v(n,e,t){let i=n[t],s=e[t];return !i||!s?{dx:0,dy:0}:{dx:i.x-s.x,dy:i.y-s.y}}function L(n,e,t,i="backward-first"){let[s,r]=i==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let u=n-1;u>=0;u--)if(t.has(e[u]))return e[u]}else for(let u=n+1;u<e.length;u++)if(t.has(e[u]))return e[u];return null};return o(s)??o(r)}function C(n,e,t,i){let s=new Set(t.filter((o,a)=>i.has(o)&&!e.has(n[a]))),r=new Map;for(let o=0;o<n.length;o++){let a=n[o];e.has(a)&&r.set(a,L(o,t,s,"forward-first"));}return r}function N(n,e){return Math.min(n*e,150)}function I(n){let e=getComputedStyle(n).transform;if(!e||e==="none")return {tx:0,ty:0};let t=e.match(/matrix\(([^)]+)\)/);if(!t)return {tx:0,ty:0};let i=t[1].split(",").map(Number);return {tx:i[4]||0,ty:i[5]||0}}function z(n){let{tx:e,ty:t}=I(n),i=Number(getComputedStyle(n).opacity)||1;return n.getAnimations().forEach(s=>s.cancel()),{tx:e,ty:t,opacity:i}}function k(n,e){let{dx:t,dy:i,duration:s,ease:r,scale:o}=e;n.animate({transform:o?`translate(${t}px, ${i}px) scale(0.95)`:`translate(${t}px, ${i}px)`,offset:1},{duration:s,easing:r,fill:"both"});let a=n.animate({opacity:0,offset:1},{duration:N(s,.25),easing:"linear",fill:"both"});a.onfinish=()=>n.remove();}function P(n,e){let{deltaX:t,deltaY:i,isNew:s,duration:r,ease:o}=e,a=z(n),u=t+a.tx,p=i+a.ty;n.animate({transform:`translate(${u}px, ${p}px) scale(${s?.95:1})`,offset:0},{duration:r,easing:o,fill:"both"});let l=s&&a.opacity>=1?0:a.opacity;l<1&&n.animate([{opacity:l},{opacity:1}],{duration:N(r,s?.5:.25),easing:"linear",fill:"both"});}var T=null;function F(n,e,t,i,s){if(T&&(T(),T=null),e===0||t===0)return;n.style.width="auto",n.style.height="auto",n.offsetWidth;let r=n.offsetWidth,o=n.offsetHeight;n.style.width=`${e}px`,n.style.height=`${t}px`,n.offsetWidth,n.style.width=`${r}px`,n.style.height=`${o}px`;function a(){n.removeEventListener("transitionend",u),clearTimeout(p),T=null,n.style.width="auto",n.style.height="auto",s?.();}function u(l){l.target===n&&(l.propertyName!=="width"&&l.propertyName!=="height"||a());}n.addEventListener("transitionend",u);let p=setTimeout(a,i+50);T=()=>{n.removeEventListener("transitionend",u),clearTimeout(p),T=null;};}function X(n){let e=n.map(t=>{let{tx:i,ty:s}=I(t),r=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(o=>o.cancel()),{left:t.offsetLeft+i,top:t.offsetTop+s,width:t.offsetWidth,height:t.offsetHeight,opacity:r}});n.forEach((t,i)=>{let s=e[i];t.setAttribute(d,""),t.style.position="absolute",t.style.pointerEvents="none",t.style.left=`${s.left}px`,t.style.top=`${s.top}px`,t.style.width=`${s.width}px`,t.style.height=`${s.height}px`,t.style.opacity=String(s.opacity);});}function G(n,e,t,i){let s=new Map;e.forEach(r=>{let o=r.getAttribute(f);t.has(o)&&!r.hasAttribute(d)&&(s.set(o,r),r.remove());}),Array.from(n.childNodes).forEach(r=>{r.nodeType===Node.TEXT_NODE&&r.remove();}),i.forEach(r=>{let o=s.get(r.id);if(o)o.textContent=r.string,n.appendChild(o);else {let a=document.createElement("span");a.setAttribute(M,""),a.setAttribute(f,r.id),a.textContent=r.string,n.appendChild(a);}});}var Z=`
+import g from'react';function H(t,e,n){if(n<1){let c=e*Math.sqrt(1-n*n);return 1-Math.exp(-n*e*t)*(Math.cos(c*t)+n*e/c*Math.sin(c*t))}let s=Math.sqrt(n*n-1),r=-e*(n+s),i=-e*(n-s),o=-r/(i-r);return 1-(1-o)*Math.exp(r*t)-o*Math.exp(i*t)}function Y(t,e,n){let i=0;for(let o=0;o<10;o+=.001)if(Math.abs(H(o,t,e)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((o-i+.001)*1e3);return Math.ceil(10*1e3)}var $=new Map;function C(t){let{stiffness:e=100,damping:n=10,mass:s=1,precision:r=.001}=t??{},i=`${e}:${n}:${s}:${r}`,o=$.get(i);if(o)return o;let a=Math.sqrt(e/s),c=n/(2*Math.sqrt(e*s)),u=Y(a,c,r),l=Math.min(100,Math.max(32,Math.round(u/15))),m=[];for(let y=0;y<l;y++){let R=y/(l-1)*(u/1e3),S=y===l-1?1:H(R,a,c);m.push(Math.round(S*1e4)/1e4+"");}for(;m.length>2&&m[m.length-2]==="1";)m.splice(m.length-2,1);let p={easing:`linear(${m.join(", ")})`,duration:u};return $.set(i,p),p}function D(t,e){let n=t.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(e,{granularity:n?"word":"grapheme"}).segment(t)[Symbol.iterator]();return Q(r)}return V(t,n)}function Q(t){return Array.from(t).reduce((e,n)=>n.segment===" "?[...e,{id:`space-${n.index}`,string:"\xA0"}]:e.find(r=>r.string===n.segment)?[...e,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...e,{id:n.segment,string:n.segment}],[])}function J(t,e,n){let s=t.find(r=>r.string===e);t.push(s?{id:`${e}-${n}`,string:e}:{id:e,string:e});}function V(t,e){let n=e?t.split(" "):t.split(""),s=[];return n.forEach((r,i)=>{e&&i>0&&s.push({id:`space-${i}`,string:"\xA0"}),J(s,r,i);}),s}var x="torph-root",M="torph-item",d="torph-id",f="torph-exiting",b="torph-debug";function w(t){let e=Array.from(t.children),n={},s=t.getBoundingClientRect();return e.forEach((r,i)=>{if(r.hasAttribute(f))return;let o=r.getAttribute(d)||`child-${i}`,a=r.getBoundingClientRect();n[o]={x:a.left-s.left,y:a.top-s.top};}),n}function v(t,e,n){let s=t[n],r=e[n];return !s||!r?{dx:0,dy:0}:{dx:s.x-r.x,dy:s.y-r.y}}function L(t,e,n,s="backward-first"){let[r,i]=s==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let c=t-1;c>=0;c--)if(n.has(e[c]))return e[c]}else for(let c=t+1;c<e.length;c++)if(n.has(e[c]))return e[c];return null};return o(r)??o(i)}function _(t,e,n,s){let r=new Set(n.filter((o,a)=>s.has(o)&&!e.has(t[a]))),i=new Map;for(let o=0;o<t.length;o++){let a=t[o];e.has(a)&&i.set(a,L(o,n,r,"forward-first"));}return i}function N(t,e){return Math.min(t*e,150)}function I(t){let e=getComputedStyle(t).transform;if(!e||e==="none")return {tx:0,ty:0};let n=e.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let s=n[1].split(",").map(Number);return {tx:s[4]||0,ty:s[5]||0}}function z(t){let{tx:e,ty:n}=I(t),s=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(r=>r.cancel()),{tx:e,ty:n,opacity:s}}function k(t,e){let{dx:n,dy:s,duration:r,ease:i,scale:o}=e;t.animate({transform:o?`translate(${n}px, ${s}px) scale(0.95)`:`translate(${n}px, ${s}px)`,offset:1},{duration:r,easing:i,fill:"both"});let a=t.animate({opacity:0,offset:1},{duration:N(r,.25),easing:"linear",fill:"both"});a.onfinish=()=>t.remove();}function P(t,e){let{deltaX:n,deltaY:s,isNew:r,duration:i,ease:o}=e,a=z(t),c=n+a.tx,u=s+a.ty;t.animate({transform:`translate(${c}px, ${u}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:o,fill:"both"});let l=r&&a.opacity>=1?0:a.opacity;l<1&&t.animate([{opacity:l},{opacity:1}],{duration:N(i,r?.5:.25),easing:"linear",fill:"both"});}var T=null;function F(t,e,n,s,r){if(T&&(T(),T=null),e===0||n===0)return;t.style.width="auto",t.style.height="auto",t.offsetWidth;let i=t.offsetWidth,o=t.offsetHeight;t.style.width=`${e}px`,t.style.height=`${n}px`,t.offsetWidth,t.style.width=`${i}px`,t.style.height=`${o}px`;function a(){t.removeEventListener("transitionend",c),clearTimeout(u),T=null,t.style.width="auto",t.style.height="auto",r?.();}function c(l){l.target===t&&(l.propertyName!=="width"&&l.propertyName!=="height"||a());}t.addEventListener("transitionend",c);let u=setTimeout(a,s+50);T=()=>{t.removeEventListener("transitionend",c),clearTimeout(u),T=null;};}function X(t){let n=t[0]?.parentElement?.getBoundingClientRect(),s=t.map(r=>{let{tx:i,ty:o}=I(r),a=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(u=>u.cancel());let c=r.getBoundingClientRect();return {left:(n?c.left-n.left:c.left)+i,top:(n?c.top-n.top:c.top)+o,width:c.width,height:c.height,opacity:a}});t.forEach((r,i)=>{let o=s[i];r.setAttribute(f,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${o.left}px`,r.style.top=`${o.top}px`,r.style.width=`${o.width}px`,r.style.height=`${o.height}px`,r.style.opacity=String(o.opacity);});}function B(t,e,n,s){let r=new Map;e.forEach(i=>{let o=i.getAttribute(d);n.has(o)&&!i.hasAttribute(f)&&(r.set(o,i),i.remove());}),Array.from(t.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),s.forEach(i=>{let o=r.get(i.id);if(o)o.textContent=i.string,t.appendChild(o);else {let a=document.createElement("span");a.setAttribute(M,""),a.setAttribute(d,i.id),a.textContent=i.string,t.appendChild(a);}});}var Z=`
 [${x}] {
-  display: inline-flex;
+  display: inline-block;
   position: relative;
   will-change: width, height;
   transition-property: width, height;
@@ -20,4 +20,4 @@ import g from'react';function H(n,e,t){if(t<1){let u=e*Math.sqrt(1-t*t);return 1
     outline: 2px solid cyan;
     outline-offset: -4px;
   }
-}`,h=null,O=0;function U(){O++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=Z,document.head.appendChild(h));}function W(){O--,!(O>0||!h)&&(h.remove(),h=null);}function j(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:n.matches,destroy:i};function t(s){e.prefersReducedMotion=s.matches;}function i(){n.removeEventListener("change",t);}return n.addEventListener("change",t),e}var E=class n{instance=null;lastText="";configKey="";attach(e,t){this.instance?.destroy(),this.instance=new A({element:e,...t}),this.configKey=n.serializeConfig(t),this.lastText&&this.instance.update(this.lastText);}update(e){this.lastText=e,this.instance?.update(e);}needsRecreate(e){return n.serializeConfig(e)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(e){return JSON.stringify({ease:e.ease,duration:e.duration,locale:e.locale,scale:e.scale,debug:e.debug,disabled:e.disabled,respectReducedMotion:e.respectReducedMotion})}};var B="span",tt={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},A=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:t,...i}={...tt,...e},s,r;if(typeof t=="object"){let o=D(t);s=o.easing,r=o.duration;}else s=t,r=i.duration;this.options={...i,ease:s,duration:r},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=j()),this.isDisabled()||(this.element.setAttribute(x,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(b,"")),this.data="",this.isDisabled()||U();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(x),this.element.removeAttribute(b),W();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,t){let i=t.offsetWidth,s=t.offsetHeight,r=_(e,this.options.locale);this.prevMeasures=w(this.element);let o=Array.from(t.children),a=new Set(r.map(c=>c.id)),u=o.filter(c=>!a.has(c.getAttribute(f))&&!c.hasAttribute(d)),p=new Set(u),l=o.map(c=>c.getAttribute(f)),m=C(o,p,l,a);if(X(u),G(t,o,a,r),this.currentMeasures=w(this.element),this.updateStyles(r),u.forEach(c=>{if(this.isInitialRender){c.remove();return}let y=m.get(c),{dx:S,dy:R}=y?v(this.currentMeasures,this.prevMeasures,y):{dx:0,dy:0};k(c,{dx:S,dy:R,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,t.style.width="auto",t.style.height="auto";return}F(t,i,s,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let t=Array.from(this.element.children),i=e.map(r=>r.id),s=new Set(i.filter(r=>this.prevMeasures[r]));t.forEach((r,o)=>{if(r.hasAttribute(d))return;let a=r.getAttribute(f)||`child-${o}`,u=!this.prevMeasures[a],p=u?L(e.findIndex(c=>c.id===a),i,s):a,{dx:l,dy:m}=p?v(this.prevMeasures,this.currentMeasures,p):{dx:0,dy:0};P(r,{deltaX:l,deltaY:m,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};function K(n){if(typeof n=="string")return n;if(typeof n=="number")return String(n);if(!n||typeof n=="boolean")return "";if(Array.isArray(n))return n.map(K).join("");throw g.isValidElement(n)?new Error("TextMorph only accepts text content. Found a React element \u2014 use strings, numbers, or expressions instead."):new Error(`TextMorph received an unsupported child of type "${typeof n}".`)}var et=({children:n,className:e,style:t,as:i=B,...s})=>{let{ref:r,update:o}=q(s),a=K(n),u=g.useRef({__html:a});return g.useEffect(()=>{o(a);},[a,o]),g.createElement(i,{ref:r,className:e,style:t,dangerouslySetInnerHTML:u.current})};function q(n){let e=g.useRef(null),t=g.useRef(new E),i=E.serializeConfig(n);g.useEffect(()=>(e.current&&t.current.attach(e.current,n),()=>{t.current.destroy();}),[i]);let s=g.useCallback(r=>{t.current.update(r);},[]);return {ref:e,update:s}}export{et as TextMorph,q as useTextMorph};
+}`,h=null,O=0;function G(){O++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=Z,document.head.appendChild(h));}function U(){O--,!(O>0||!h)&&(h.remove(),h=null);}function j(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let t=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:t.matches,destroy:s};function n(r){e.prefersReducedMotion=r.matches;}function s(){t.removeEventListener("change",n);}return t.addEventListener("change",n),e}var E=class t{instance=null;lastText="";configKey="";attach(e,n){this.instance?.destroy(),this.instance=new A({element:e,...n}),this.configKey=t.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(e){this.lastText=e,this.instance?.update(e);}needsRecreate(e){return t.serializeConfig(e)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(e){return JSON.stringify({ease:e.ease,duration:e.duration,locale:e.locale,scale:e.scale,debug:e.debug,disabled:e.disabled,respectReducedMotion:e.respectReducedMotion})}};var K="span",tt={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},A=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:n,...s}={...tt,...e},r,i;if(typeof n=="object"){let o=C(n);r=o.easing,i=o.duration;}else r=n,i=s.duration;this.options={...s,ease:r,duration:i},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=j()),this.isDisabled()||(this.element.setAttribute(x,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(b,"")),this.data="",this.isDisabled()||G();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(x),this.element.removeAttribute(b),U();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,n){let s=n.offsetWidth,r=n.offsetHeight,i=D(e,this.options.locale);this.prevMeasures=w(this.element);let o=Array.from(n.children),a=new Set(i.map(p=>p.id)),c=o.filter(p=>!a.has(p.getAttribute(d))&&!p.hasAttribute(f)),u=new Set(c),l=o.map(p=>p.getAttribute(d)),m=_(o,u,l,a);if(X(c),B(n,o,a,i),this.currentMeasures=w(this.element),this.updateStyles(i),c.forEach(p=>{if(this.isInitialRender){p.remove();return}let y=m.get(p),{dx:R,dy:S}=y?v(this.currentMeasures,this.prevMeasures,y):{dx:0,dy:0};k(p,{dx:R,dy:S,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}F(n,s,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let n=Array.from(this.element.children),s=e.map(i=>i.id),r=new Set(s.filter(i=>this.prevMeasures[i]));n.forEach((i,o)=>{if(i.hasAttribute(f))return;let a=i.getAttribute(d)||`child-${o}`,c=!this.prevMeasures[a],u=c?L(e.findIndex(p=>p.id===a),s,r):a,{dx:l,dy:m}=u?v(this.prevMeasures,this.currentMeasures,u):{dx:0,dy:0};P(i,{deltaX:l,deltaY:m,isNew:c,duration:this.options.duration,ease:this.options.ease});});}};function W(t){if(typeof t=="string")return t;if(typeof t=="number")return String(t);if(!t||typeof t=="boolean")return "";if(Array.isArray(t))return t.map(W).join("");throw g.isValidElement(t)?new Error("TextMorph only accepts text content. Found a React element \u2014 use strings, numbers, or expressions instead."):new Error(`TextMorph received an unsupported child of type "${typeof t}".`)}var et=({children:t,className:e,style:n,as:s=K,...r})=>{let{ref:i,update:o}=q(r),a=W(t),c=g.useRef({__html:a});return g.useEffect(()=>{o(a);},[a,o]),g.createElement(s,{ref:i,className:e,style:n,dangerouslySetInnerHTML:c.current})};function q(t){let e=g.useRef(null),n=g.useRef(new E),s=E.serializeConfig(t);g.useEffect(()=>(e.current&&n.current.attach(e.current,t),()=>{n.current.destroy();}),[s]);let r=g.useCallback(i=>{n.current.update(i);},[]);return {ref:e,update:r}}export{et as TextMorph,q as useTextMorph};

package/dist/svelte/index.js

@@ -1 +1,23 @@
-'use strict';require('svelte/internal/disclose-version');var e=require('svelte/internal/client'),textMorph=require('../lib/text-morph'),controller=require('../lib/text-morph/controller');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var e__namespace=/*#__PURE__*/_interopNamespace(e);function c(s,t){e__namespace.push(t,true);let p=e__namespace.prop(t,"locale",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.locale),u=e__namespace.prop(t,"duration",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.duration),m=e__namespace.prop(t,"ease",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.ease),f=e__namespace.prop(t,"scale",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.scale),g=e__namespace.prop(t,"debug",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.debug),$=e__namespace.prop(t,"disabled",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.disabled),b=e__namespace.prop(t,"respectReducedMotion",19,()=>textMorph.DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion),A=e__namespace.prop(t,"onAnimationStart",19,()=>{}),M=e__namespace.prop(t,"onAnimationComplete",19,()=>{}),_=e__namespace.prop(t,"as",3,textMorph.DEFAULT_AS),h=e__namespace.rest_props(t,["$$slots","$$events","$$legacy","text","locale","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as"]),a=e__namespace.state(void 0),n=new controller.MorphController,i=e__namespace.derived(()=>({locale:p(),duration:u(),ease:m(),debug:g(),scale:f(),disabled:$(),respectReducedMotion:b(),onAnimationStart:A(),onAnimationComplete:M()})),v=e__namespace.derived(()=>controller.MorphController.serializeConfig(e__namespace.get(i)));e__namespace.user_effect(()=>{if(e__namespace.get(v),e__namespace.get(a))return n.attach(e__namespace.get(a),e__namespace.get(i)),()=>{n.destroy();}}),e__namespace.user_effect(()=>{n.update(t.text);});var r=e__namespace.comment(),x=e__namespace.first_child(r);e__namespace.element(x,_,false,(d,C)=>{e__namespace.bind_this(d,T=>e__namespace.set(a,T,true),()=>e__namespace.get(a)),e__namespace.attribute_effect(d,()=>({...h}));}),e__namespace.append(s,r),e__namespace.pop();}exports.TextMorph=c;
+'use strict';require('svelte/internal/disclose-version');var a=require('svelte/internal/client');function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var a__namespace=/*#__PURE__*/_interopNamespace(a);function H(e,t,n){if(n<1){let u=t*Math.sqrt(1-n*n);return 1-Math.exp(-n*t*e)*(Math.cos(u*e)+n*t/u*Math.sin(u*e))}let o=Math.sqrt(n*n-1),r=-t*(n+o),i=-t*(n-o),s=-r/(i-r);return 1-(1-s)*Math.exp(r*e)-s*Math.exp(i*e)}function Z(e,t,n){let i=0;for(let s=0;s<10;s+=.001)if(Math.abs(H(s,e,t)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((s-i+.001)*1e3);return Math.ceil(10*1e3)}var C=new Map;function N(e){let{stiffness:t=100,damping:n=10,mass:o=1,precision:r=.001}=e??{},i=`${t}:${n}:${o}:${r}`,s=C.get(i);if(s)return s;let c=Math.sqrt(t/o),u=n/(2*Math.sqrt(t*o)),p=Z(c,u,r),d=Math.min(100,Math.max(32,Math.round(p/15))),m=[];for(let f=0;f<d;f++){let T=f/(d-1)*(p/1e3),M=f===d-1?1:H(T,c,u);m.push(Math.round(M*1e4)/1e4+"");}for(;m.length>2&&m[m.length-2]==="1";)m.splice(m.length-2,1);let l={easing:`linear(${m.join(", ")})`,duration:p};return C.set(i,l),l}function k(e,t){let n=e.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(t,{granularity:n?"word":"grapheme"}).segment(e)[Symbol.iterator]();return tt(r)}return nt(e,n)}function tt(e){return Array.from(e).reduce((t,n)=>n.segment===" "?[...t,{id:`space-${n.index}`,string:"\xA0"}]:t.find(r=>r.string===n.segment)?[...t,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...t,{id:n.segment,string:n.segment}],[])}function et(e,t,n){let o=e.find(r=>r.string===t);e.push(o?{id:`${t}-${n}`,string:t}:{id:t,string:t});}function nt(e,t){let n=t?e.split(" "):e.split(""),o=[];return n.forEach((r,i)=>{t&&i>0&&o.push({id:`space-${i}`,string:"\xA0"}),et(o,r,i);}),o}var b="torph-root",A="torph-item",h="torph-id",y="torph-exiting",S="torph-debug";function v(e){let t=Array.from(e.children),n={},o=e.getBoundingClientRect();return t.forEach((r,i)=>{if(r.hasAttribute(y))return;let s=r.getAttribute(h)||`child-${i}`,c=r.getBoundingClientRect();n[s]={x:c.left-o.left,y:c.top-o.top};}),n}function $(e,t,n){let o=e[n],r=t[n];return !o||!r?{dx:0,dy:0}:{dx:o.x-r.x,dy:o.y-r.y}}function L(e,t,n,o="backward-first"){let[r,i]=o==="backward-first"?["backward","forward"]:["forward","backward"],s=c=>{if(c==="backward"){for(let u=e-1;u>=0;u--)if(n.has(t[u]))return t[u]}else for(let u=e+1;u<t.length;u++)if(n.has(t[u]))return t[u];return null};return s(r)??s(i)}function F(e,t,n,o){let r=new Set(n.filter((s,c)=>o.has(s)&&!t.has(e[c]))),i=new Map;for(let s=0;s<e.length;s++){let c=e[s];t.has(c)&&i.set(c,L(s,n,r,"forward-first"));}return i}function P(e,t){return Math.min(e*t,150)}function I(e){let t=getComputedStyle(e).transform;if(!t||t==="none")return {tx:0,ty:0};let n=t.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let o=n[1].split(",").map(Number);return {tx:o[4]||0,ty:o[5]||0}}function rt(e){let{tx:t,ty:n}=I(e),o=Number(getComputedStyle(e).opacity)||1;return e.getAnimations().forEach(r=>r.cancel()),{tx:t,ty:n,opacity:o}}function X(e,t){let{dx:n,dy:o,duration:r,ease:i,scale:s}=t;e.animate({transform:s?`translate(${n}px, ${o}px) scale(0.95)`:`translate(${n}px, ${o}px)`,offset:1},{duration:r,easing:i,fill:"both"});let c=e.animate({opacity:0,offset:1},{duration:P(r,.25),easing:"linear",fill:"both"});c.onfinish=()=>e.remove();}function B(e,t){let{deltaX:n,deltaY:o,isNew:r,duration:i,ease:s}=t,c=rt(e),u=n+c.tx,p=o+c.ty;e.animate({transform:`translate(${u}px, ${p}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:s,fill:"both"});let d=r&&c.opacity>=1?0:c.opacity;d<1&&e.animate([{opacity:d},{opacity:1}],{duration:P(i,r?.5:.25),easing:"linear",fill:"both"});}var E=null;function G(e,t,n,o,r){if(E&&(E(),E=null),t===0||n===0)return;e.style.width="auto",e.style.height="auto",e.offsetWidth;let i=e.offsetWidth,s=e.offsetHeight;e.style.width=`${t}px`,e.style.height=`${n}px`,e.offsetWidth,e.style.width=`${i}px`,e.style.height=`${s}px`;function c(){e.removeEventListener("transitionend",u),clearTimeout(p),E=null,e.style.width="auto",e.style.height="auto",r?.();}function u(d){d.target===e&&(d.propertyName!=="width"&&d.propertyName!=="height"||c());}e.addEventListener("transitionend",u);let p=setTimeout(c,o+50);E=()=>{e.removeEventListener("transitionend",u),clearTimeout(p),E=null;};}function U(e){let n=e[0]?.parentElement?.getBoundingClientRect(),o=e.map(r=>{let{tx:i,ty:s}=I(r),c=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(p=>p.cancel());let u=r.getBoundingClientRect();return {left:(n?u.left-n.left:u.left)+i,top:(n?u.top-n.top:u.top)+s,width:u.width,height:u.height,opacity:c}});e.forEach((r,i)=>{let s=o[i];r.setAttribute(y,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${s.left}px`,r.style.top=`${s.top}px`,r.style.width=`${s.width}px`,r.style.height=`${s.height}px`,r.style.opacity=String(s.opacity);});}function K(e,t,n,o){let r=new Map;t.forEach(i=>{let s=i.getAttribute(h);n.has(s)&&!i.hasAttribute(y)&&(r.set(s,i),i.remove());}),Array.from(e.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),o.forEach(i=>{let s=r.get(i.id);if(s)s.textContent=i.string,e.appendChild(s);else {let c=document.createElement("span");c.setAttribute(A,""),c.setAttribute(h,i.id),c.textContent=i.string,e.appendChild(c);}});}var it=`
+[${b}] {
+  display: inline-block;
+  position: relative;
+  will-change: width, height;
+  transition-property: width, height;
+  white-space: nowrap;
+}
+
+[${A}] {
+  display: inline-block;
+  will-change: opacity, transform;
+  transform: none;
+  opacity: 1;
+}
+
+[${b}][${S}] {
+  outline: 2px solid magenta;
+  [${A}] {
+    outline: 2px solid cyan;
+    outline-offset: -4px;
+  }
+}`,x=null,O=0;function W(){O++,!x&&(x=document.createElement("style"),x.dataset.torph="true",x.textContent=it,document.head.appendChild(x));}function j(){O--,!(O>0||!x)&&(x.remove(),x=null);}function q(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let e=window.matchMedia("(prefers-reduced-motion: reduce)"),t={prefersReducedMotion:e.matches,destroy:o};function n(r){t.prefersReducedMotion=r.matches;}function o(){e.removeEventListener("change",n);}return e.addEventListener("change",n),t}var R=class e{instance=null;lastText="";configKey="";attach(t,n){this.instance?.destroy(),this.instance=new w({element:t,...n}),this.configKey=e.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(t){this.lastText=t,this.instance?.update(t);}needsRecreate(t){return e.serializeConfig(t)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(t){return JSON.stringify({ease:t.ease,duration:t.duration,locale:t.locale,scale:t.scale,debug:t.debug,disabled:t.disabled,respectReducedMotion:t.respectReducedMotion})}};var Y="span",g={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},w=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(t){let{ease:n,...o}={...g,...t},r,i;if(typeof n=="object"){let s=N(n);r=s.easing,i=s.duration;}else r=n,i=o.duration;this.options={...o,ease:r,duration:i},this.element=t.element,this.options.respectReducedMotion&&(this.reducedMotion=q()),this.isDisabled()||(this.element.setAttribute(b,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute(S,"")),this.data="",this.isDisabled()||W();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute(b),this.element.removeAttribute(S),j();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(t,n){let o=n.offsetWidth,r=n.offsetHeight,i=k(t,this.options.locale);this.prevMeasures=v(this.element);let s=Array.from(n.children),c=new Set(i.map(l=>l.id)),u=s.filter(l=>!c.has(l.getAttribute(h))&&!l.hasAttribute(y)),p=new Set(u),d=s.map(l=>l.getAttribute(h)),m=F(s,p,d,c);if(U(u),K(n,s,c,i),this.currentMeasures=v(this.element),this.updateStyles(i),u.forEach(l=>{if(this.isInitialRender){l.remove();return}let f=m.get(l),{dx:T,dy:M}=f?$(this.currentMeasures,this.prevMeasures,f):{dx:0,dy:0};X(l,{dx:T,dy:M,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}G(n,o,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(t){if(this.isInitialRender)return;let n=Array.from(this.element.children),o=t.map(i=>i.id),r=new Set(o.filter(i=>this.prevMeasures[i]));n.forEach((i,s)=>{if(i.hasAttribute(y))return;let c=i.getAttribute(h)||`child-${s}`,u=!this.prevMeasures[c],p=u?L(t.findIndex(l=>l.id===c),o,r):c,{dx:d,dy:m}=p?$(this.prevMeasures,this.currentMeasures,p):{dx:0,dy:0};B(i,{deltaX:d,deltaY:m,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};function Q(e,t){a__namespace.push(t,true);let n=a__namespace.prop(t,"locale",19,()=>g.locale),o=a__namespace.prop(t,"duration",19,()=>g.duration),r=a__namespace.prop(t,"ease",19,()=>g.ease),i=a__namespace.prop(t,"scale",19,()=>g.scale),s=a__namespace.prop(t,"debug",19,()=>g.debug),c=a__namespace.prop(t,"disabled",19,()=>g.disabled),u=a__namespace.prop(t,"respectReducedMotion",19,()=>g.respectReducedMotion),p=a__namespace.prop(t,"onAnimationStart",19,()=>{}),d=a__namespace.prop(t,"onAnimationComplete",19,()=>{}),m=a__namespace.prop(t,"as",3,Y),l=a__namespace.rest_props(t,["$$slots","$$events","$$legacy","text","locale","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as"]),f=a__namespace.state(void 0),T=new R,M=a__namespace.derived(()=>({locale:n(),duration:o(),ease:r(),debug:s(),scale:i(),disabled:c(),respectReducedMotion:u(),onAnimationStart:p(),onAnimationComplete:d()})),J=a__namespace.derived(()=>R.serializeConfig(a__namespace.get(M)));a__namespace.user_effect(()=>{if(a__namespace.get(J),a__namespace.get(f))return T.attach(a__namespace.get(f),a__namespace.get(M)),()=>{T.destroy();}}),a__namespace.user_effect(()=>{T.update(t.text);});var _=a__namespace.comment(),z=a__namespace.first_child(_);a__namespace.element(z,m,false,(D,st)=>{a__namespace.bind_this(D,V=>a__namespace.set(f,V,true),()=>a__namespace.get(f)),a__namespace.attribute_effect(D,()=>({...l}));}),a__namespace.append(e,_),a__namespace.pop();}exports.TextMorph=Q;

package/dist/svelte/index.mjs

@@ -1 +1,23 @@
-import'svelte/internal/disclose-version';import*as e from'svelte/internal/client';import {DEFAULT_TEXT_MORPH_OPTIONS,DEFAULT_AS}from'../lib/text-morph';import {MorphController}from'../lib/text-morph/controller';function c(s,t){e.push(t,true);let p=e.prop(t,"locale",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.locale),u=e.prop(t,"duration",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.duration),m=e.prop(t,"ease",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.ease),f=e.prop(t,"scale",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.scale),g=e.prop(t,"debug",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.debug),$=e.prop(t,"disabled",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.disabled),b=e.prop(t,"respectReducedMotion",19,()=>DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion),A=e.prop(t,"onAnimationStart",19,()=>{}),M=e.prop(t,"onAnimationComplete",19,()=>{}),_=e.prop(t,"as",3,DEFAULT_AS),h=e.rest_props(t,["$$slots","$$events","$$legacy","text","locale","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as"]),a=e.state(void 0),n=new MorphController,i=e.derived(()=>({locale:p(),duration:u(),ease:m(),debug:g(),scale:f(),disabled:$(),respectReducedMotion:b(),onAnimationStart:A(),onAnimationComplete:M()})),v=e.derived(()=>MorphController.serializeConfig(e.get(i)));e.user_effect(()=>{if(e.get(v),e.get(a))return n.attach(e.get(a),e.get(i)),()=>{n.destroy();}}),e.user_effect(()=>{n.update(t.text);});var r=e.comment(),x=e.first_child(r);e.element(x,_,false,(d,C)=>{e.bind_this(d,T=>e.set(a,T,true),()=>e.get(a)),e.attribute_effect(d,()=>({...h}));}),e.append(s,r),e.pop();}export{c as TextMorph};
+import'svelte/internal/disclose-version';import*as a from'svelte/internal/client';function H(e,t,n){if(n<1){let u=t*Math.sqrt(1-n*n);return 1-Math.exp(-n*t*e)*(Math.cos(u*e)+n*t/u*Math.sin(u*e))}let o=Math.sqrt(n*n-1),r=-t*(n+o),i=-t*(n-o),s=-r/(i-r);return 1-(1-s)*Math.exp(r*e)-s*Math.exp(i*e)}function Z(e,t,n){let i=0;for(let s=0;s<10;s+=.001)if(Math.abs(H(s,e,t)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((s-i+.001)*1e3);return Math.ceil(10*1e3)}var C=new Map;function N(e){let{stiffness:t=100,damping:n=10,mass:o=1,precision:r=.001}=e??{},i=`${t}:${n}:${o}:${r}`,s=C.get(i);if(s)return s;let c=Math.sqrt(t/o),u=n/(2*Math.sqrt(t*o)),p=Z(c,u,r),d=Math.min(100,Math.max(32,Math.round(p/15))),m=[];for(let f=0;f<d;f++){let T=f/(d-1)*(p/1e3),M=f===d-1?1:H(T,c,u);m.push(Math.round(M*1e4)/1e4+"");}for(;m.length>2&&m[m.length-2]==="1";)m.splice(m.length-2,1);let l={easing:`linear(${m.join(", ")})`,duration:p};return C.set(i,l),l}function k(e,t){let n=e.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(t,{granularity:n?"word":"grapheme"}).segment(e)[Symbol.iterator]();return tt(r)}return nt(e,n)}function tt(e){return Array.from(e).reduce((t,n)=>n.segment===" "?[...t,{id:`space-${n.index}`,string:"\xA0"}]:t.find(r=>r.string===n.segment)?[...t,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...t,{id:n.segment,string:n.segment}],[])}function et(e,t,n){let o=e.find(r=>r.string===t);e.push(o?{id:`${t}-${n}`,string:t}:{id:t,string:t});}function nt(e,t){let n=t?e.split(" "):e.split(""),o=[];return n.forEach((r,i)=>{t&&i>0&&o.push({id:`space-${i}`,string:"\xA0"}),et(o,r,i);}),o}var b="torph-root",A="torph-item",h="torph-id",y="torph-exiting",S="torph-debug";function v(e){let t=Array.from(e.children),n={},o=e.getBoundingClientRect();return t.forEach((r,i)=>{if(r.hasAttribute(y))return;let s=r.getAttribute(h)||`child-${i}`,c=r.getBoundingClientRect();n[s]={x:c.left-o.left,y:c.top-o.top};}),n}function $(e,t,n){let o=e[n],r=t[n];return !o||!r?{dx:0,dy:0}:{dx:o.x-r.x,dy:o.y-r.y}}function L(e,t,n,o="backward-first"){let[r,i]=o==="backward-first"?["backward","forward"]:["forward","backward"],s=c=>{if(c==="backward"){for(let u=e-1;u>=0;u--)if(n.has(t[u]))return t[u]}else for(let u=e+1;u<t.length;u++)if(n.has(t[u]))return t[u];return null};return s(r)??s(i)}function F(e,t,n,o){let r=new Set(n.filter((s,c)=>o.has(s)&&!t.has(e[c]))),i=new Map;for(let s=0;s<e.length;s++){let c=e[s];t.has(c)&&i.set(c,L(s,n,r,"forward-first"));}return i}function P(e,t){return Math.min(e*t,150)}function I(e){let t=getComputedStyle(e).transform;if(!t||t==="none")return {tx:0,ty:0};let n=t.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let o=n[1].split(",").map(Number);return {tx:o[4]||0,ty:o[5]||0}}function rt(e){let{tx:t,ty:n}=I(e),o=Number(getComputedStyle(e).opacity)||1;return e.getAnimations().forEach(r=>r.cancel()),{tx:t,ty:n,opacity:o}}function X(e,t){let{dx:n,dy:o,duration:r,ease:i,scale:s}=t;e.animate({transform:s?`translate(${n}px, ${o}px) scale(0.95)`:`translate(${n}px, ${o}px)`,offset:1},{duration:r,easing:i,fill:"both"});let c=e.animate({opacity:0,offset:1},{duration:P(r,.25),easing:"linear",fill:"both"});c.onfinish=()=>e.remove();}function B(e,t){let{deltaX:n,deltaY:o,isNew:r,duration:i,ease:s}=t,c=rt(e),u=n+c.tx,p=o+c.ty;e.animate({transform:`translate(${u}px, ${p}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:s,fill:"both"});let d=r&&c.opacity>=1?0:c.opacity;d<1&&e.animate([{opacity:d},{opacity:1}],{duration:P(i,r?.5:.25),easing:"linear",fill:"both"});}var E=null;function G(e,t,n,o,r){if(E&&(E(),E=null),t===0||n===0)return;e.style.width="auto",e.style.height="auto",e.offsetWidth;let i=e.offsetWidth,s=e.offsetHeight;e.style.width=`${t}px`,e.style.height=`${n}px`,e.offsetWidth,e.style.width=`${i}px`,e.style.height=`${s}px`;function c(){e.removeEventListener("transitionend",u),clearTimeout(p),E=null,e.style.width="auto",e.style.height="auto",r?.();}function u(d){d.target===e&&(d.propertyName!=="width"&&d.propertyName!=="height"||c());}e.addEventListener("transitionend",u);let p=setTimeout(c,o+50);E=()=>{e.removeEventListener("transitionend",u),clearTimeout(p),E=null;};}function U(e){let n=e[0]?.parentElement?.getBoundingClientRect(),o=e.map(r=>{let{tx:i,ty:s}=I(r),c=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(p=>p.cancel());let u=r.getBoundingClientRect();return {left:(n?u.left-n.left:u.left)+i,top:(n?u.top-n.top:u.top)+s,width:u.width,height:u.height,opacity:c}});e.forEach((r,i)=>{let s=o[i];r.setAttribute(y,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${s.left}px`,r.style.top=`${s.top}px`,r.style.width=`${s.width}px`,r.style.height=`${s.height}px`,r.style.opacity=String(s.opacity);});}function K(e,t,n,o){let r=new Map;t.forEach(i=>{let s=i.getAttribute(h);n.has(s)&&!i.hasAttribute(y)&&(r.set(s,i),i.remove());}),Array.from(e.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),o.forEach(i=>{let s=r.get(i.id);if(s)s.textContent=i.string,e.appendChild(s);else {let c=document.createElement("span");c.setAttribute(A,""),c.setAttribute(h,i.id),c.textContent=i.string,e.appendChild(c);}});}var it=`
+[${b}] {
+  display: inline-block;
+  position: relative;
+  will-change: width, height;
+  transition-property: width, height;
+  white-space: nowrap;
+}
+
+[${A}] {
+  display: inline-block;
+  will-change: opacity, transform;
+  transform: none;
+  opacity: 1;
+}
+
+[${b}][${S}] {
+  outline: 2px solid magenta;
+  [${A}] {
+    outline: 2px solid cyan;
+    outline-offset: -4px;
+  }
+}`,x=null,O=0;function W(){O++,!x&&(x=document.createElement("style"),x.dataset.torph="true",x.textContent=it,document.head.appendChild(x));}function j(){O--,!(O>0||!x)&&(x.remove(),x=null);}function q(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let e=window.matchMedia("(prefers-reduced-motion: reduce)"),t={prefersReducedMotion:e.matches,destroy:o};function n(r){t.prefersReducedMotion=r.matches;}function o(){e.removeEventListener("change",n);}return e.addEventListener("change",n),t}var R=class e{instance=null;lastText="";configKey="";attach(t,n){this.instance?.destroy(),this.instance=new w({element:t,...n}),this.configKey=e.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(t){this.lastText=t,this.instance?.update(t);}needsRecreate(t){return e.serializeConfig(t)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(t){return JSON.stringify({ease:t.ease,duration:t.duration,locale:t.locale,scale:t.scale,debug:t.debug,disabled:t.disabled,respectReducedMotion:t.respectReducedMotion})}};var Y="span",g={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},w=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(t){let{ease:n,...o}={...g,...t},r,i;if(typeof n=="object"){let s=N(n);r=s.easing,i=s.duration;}else r=n,i=o.duration;this.options={...o,ease:r,duration:i},this.element=t.element,this.options.respectReducedMotion&&(this.reducedMotion=q()),this.isDisabled()||(this.element.setAttribute(b,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,t.debug&&this.element.setAttribute(S,"")),this.data="",this.isDisabled()||W();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(t=>t.cancel()),this.element.removeAttribute(b),this.element.removeAttribute(S),j();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(t){if(t!==this.data){if(this.data=t,this.isDisabled()){typeof t=="string"&&(this.element.textContent=t);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(t,n){let o=n.offsetWidth,r=n.offsetHeight,i=k(t,this.options.locale);this.prevMeasures=v(this.element);let s=Array.from(n.children),c=new Set(i.map(l=>l.id)),u=s.filter(l=>!c.has(l.getAttribute(h))&&!l.hasAttribute(y)),p=new Set(u),d=s.map(l=>l.getAttribute(h)),m=F(s,p,d,c);if(U(u),K(n,s,c,i),this.currentMeasures=v(this.element),this.updateStyles(i),u.forEach(l=>{if(this.isInitialRender){l.remove();return}let f=m.get(l),{dx:T,dy:M}=f?$(this.currentMeasures,this.prevMeasures,f):{dx:0,dy:0};X(l,{dx:T,dy:M,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}G(n,o,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(t){if(this.isInitialRender)return;let n=Array.from(this.element.children),o=t.map(i=>i.id),r=new Set(o.filter(i=>this.prevMeasures[i]));n.forEach((i,s)=>{if(i.hasAttribute(y))return;let c=i.getAttribute(h)||`child-${s}`,u=!this.prevMeasures[c],p=u?L(t.findIndex(l=>l.id===c),o,r):c,{dx:d,dy:m}=p?$(this.prevMeasures,this.currentMeasures,p):{dx:0,dy:0};B(i,{deltaX:d,deltaY:m,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};function Q(e,t){a.push(t,true);let n=a.prop(t,"locale",19,()=>g.locale),o=a.prop(t,"duration",19,()=>g.duration),r=a.prop(t,"ease",19,()=>g.ease),i=a.prop(t,"scale",19,()=>g.scale),s=a.prop(t,"debug",19,()=>g.debug),c=a.prop(t,"disabled",19,()=>g.disabled),u=a.prop(t,"respectReducedMotion",19,()=>g.respectReducedMotion),p=a.prop(t,"onAnimationStart",19,()=>{}),d=a.prop(t,"onAnimationComplete",19,()=>{}),m=a.prop(t,"as",3,Y),l=a.rest_props(t,["$$slots","$$events","$$legacy","text","locale","duration","ease","scale","debug","disabled","respectReducedMotion","onAnimationStart","onAnimationComplete","as"]),f=a.state(void 0),T=new R,M=a.derived(()=>({locale:n(),duration:o(),ease:r(),debug:s(),scale:i(),disabled:c(),respectReducedMotion:u(),onAnimationStart:p(),onAnimationComplete:d()})),J=a.derived(()=>R.serializeConfig(a.get(M)));a.user_effect(()=>{if(a.get(J),a.get(f))return T.attach(a.get(f),a.get(M)),()=>{T.destroy();}}),a.user_effect(()=>{T.update(t.text);});var _=a.comment(),z=a.first_child(_);a.element(z,m,false,(D,st)=>{a.bind_this(D,V=>a.set(f,V,true),()=>a.get(f)),a.attribute_effect(D,()=>({...l}));}),a.append(e,_),a.pop();}export{Q as TextMorph};

package/dist/vue/index.d.mts

@@ -1,3 +1,128 @@
+import * as vue from 'vue';
+
+declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: any;
+        default: undefined;
+    };
+    style: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    locale: {
+        type: StringConstructor;
+        default: "en";
+    };
+    duration: {
+        type: NumberConstructor;
+        default: 400;
+    };
+    ease: {
+        type: any;
+        default: "cubic-bezier(0.19, 1, 0.22, 1)";
+    };
+    scale: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: false;
+    };
+    respectReducedMotion: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    onAnimationStart: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+    onAnimationComplete: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: any;
+        default: undefined;
+    };
+    style: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    locale: {
+        type: StringConstructor;
+        default: "en";
+    };
+    duration: {
+        type: NumberConstructor;
+        default: 400;
+    };
+    ease: {
+        type: any;
+        default: "cubic-bezier(0.19, 1, 0.22, 1)";
+    };
+    scale: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: false;
+    };
+    respectReducedMotion: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    onAnimationStart: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+    onAnimationComplete: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    duration: number;
+    ease: any;
+    scale: boolean;
+    style: Record<string, any>;
+    debug: boolean;
+    locale: string;
+    disabled: boolean;
+    respectReducedMotion: boolean;
+    onAnimationStart: Function;
+    onAnimationComplete: Function;
+    class: any;
+    as: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 interface SpringParams {
     stiffness?: number;
     damping?: number;
@@ -25,4 +150,4 @@ interface TextMorphProps extends Omit<TextMorphOptions, "element"> {
     as?: string;
 }
 
-export type { TextMorphProps };
+export { _default as TextMorph, type TextMorphProps };

package/dist/vue/index.d.ts

@@ -1,3 +1,128 @@
+import * as vue from 'vue';
+
+declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: any;
+        default: undefined;
+    };
+    style: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    locale: {
+        type: StringConstructor;
+        default: "en";
+    };
+    duration: {
+        type: NumberConstructor;
+        default: 400;
+    };
+    ease: {
+        type: any;
+        default: "cubic-bezier(0.19, 1, 0.22, 1)";
+    };
+    scale: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: false;
+    };
+    respectReducedMotion: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    onAnimationStart: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+    onAnimationComplete: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: any;
+        default: undefined;
+    };
+    style: {
+        type: ObjectConstructor;
+        default: undefined;
+    };
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    locale: {
+        type: StringConstructor;
+        default: "en";
+    };
+    duration: {
+        type: NumberConstructor;
+        default: 400;
+    };
+    ease: {
+        type: any;
+        default: "cubic-bezier(0.19, 1, 0.22, 1)";
+    };
+    scale: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: false;
+    };
+    respectReducedMotion: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    onAnimationStart: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+    onAnimationComplete: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    duration: number;
+    ease: any;
+    scale: boolean;
+    style: Record<string, any>;
+    debug: boolean;
+    locale: string;
+    disabled: boolean;
+    respectReducedMotion: boolean;
+    onAnimationStart: Function;
+    onAnimationComplete: Function;
+    class: any;
+    as: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
 interface SpringParams {
     stiffness?: number;
     damping?: number;
@@ -25,4 +150,4 @@ interface TextMorphProps extends Omit<TextMorphOptions, "element"> {
     as?: string;
 }
 
-export type { TextMorphProps };
+export { _default as TextMorph, type TextMorphProps };

package/dist/vue/index.js

@@ -1 +1,23 @@
-'use strict';var TextMorphLC6RO5C5_vue=require('../TextMorph-LC6RO5C5.vue');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var TextMorphLC6RO5C5_vue__default=/*#__PURE__*/_interopDefault(TextMorphLC6RO5C5_vue);Object.defineProperty(exports,"TextMorph",{enumerable:true,get:function(){return TextMorphLC6RO5C5_vue__default.default}});
+'use strict';var vue=require('vue');function H(t,e,n){if(n<1){let u=e*Math.sqrt(1-n*n);return 1-Math.exp(-n*e*t)*(Math.cos(u*t)+n*e/u*Math.sin(u*t))}let s=Math.sqrt(n*n-1),r=-e*(n+s),i=-e*(n-s),o=-r/(i-r);return 1-(1-o)*Math.exp(r*t)-o*Math.exp(i*t)}function W(t,e,n){let i=0;for(let o=0;o<10;o+=.001)if(Math.abs(H(o,t,e)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((o-i+.001)*1e3);return Math.ceil(10*1e3)}var D=new Map;function C(t){let{stiffness:e=100,damping:n=10,mass:s=1,precision:r=.001}=t??{},i=`${e}:${n}:${s}:${r}`,o=D.get(i);if(o)return o;let a=Math.sqrt(e/s),u=n/(2*Math.sqrt(e*s)),c=W(a,u,r),d=Math.min(100,Math.max(32,Math.round(c/15))),p=[];for(let y=0;y<d;y++){let S=y/(d-1)*(c/1e3),R=y===d-1?1:H(S,a,u);p.push(Math.round(R*1e4)/1e4+"");}for(;p.length>2&&p[p.length-2]==="1";)p.splice(p.length-2,1);let l={easing:`linear(${p.join(", ")})`,duration:c};return D.set(i,l),l}function _(t,e){let n=t.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(e,{granularity:n?"word":"grapheme"}).segment(t)[Symbol.iterator]();return Y(r)}return J(t,n)}function Y(t){return Array.from(t).reduce((e,n)=>n.segment===" "?[...e,{id:`space-${n.index}`,string:"\xA0"}]:e.find(r=>r.string===n.segment)?[...e,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...e,{id:n.segment,string:n.segment}],[])}function Q(t,e,n){let s=t.find(r=>r.string===e);t.push(s?{id:`${e}-${n}`,string:e}:{id:e,string:e});}function J(t,e){let n=e?t.split(" "):t.split(""),s=[];return n.forEach((r,i)=>{e&&i>0&&s.push({id:`space-${i}`,string:"\xA0"}),Q(s,r,i);}),s}var x="torph-root",b="torph-item",m="torph-id",f="torph-exiting",E="torph-debug";function w(t){let e=Array.from(t.children),n={},s=t.getBoundingClientRect();return e.forEach((r,i)=>{if(r.hasAttribute(f))return;let o=r.getAttribute(m)||`child-${i}`,a=r.getBoundingClientRect();n[o]={x:a.left-s.left,y:a.top-s.top};}),n}function v(t,e,n){let s=t[n],r=e[n];return !s||!r?{dx:0,dy:0}:{dx:s.x-r.x,dy:s.y-r.y}}function L(t,e,n,s="backward-first"){let[r,i]=s==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let u=t-1;u>=0;u--)if(n.has(e[u]))return e[u]}else for(let u=t+1;u<e.length;u++)if(n.has(e[u]))return e[u];return null};return o(r)??o(i)}function N(t,e,n,s){let r=new Set(n.filter((o,a)=>s.has(o)&&!e.has(t[a]))),i=new Map;for(let o=0;o<t.length;o++){let a=t[o];e.has(a)&&i.set(a,L(o,n,r,"forward-first"));}return i}function F(t,e){return Math.min(t*e,150)}function I(t){let e=getComputedStyle(t).transform;if(!e||e==="none")return {tx:0,ty:0};let n=e.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let s=n[1].split(",").map(Number);return {tx:s[4]||0,ty:s[5]||0}}function z(t){let{tx:e,ty:n}=I(t),s=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(r=>r.cancel()),{tx:e,ty:n,opacity:s}}function P(t,e){let{dx:n,dy:s,duration:r,ease:i,scale:o}=e;t.animate({transform:o?`translate(${n}px, ${s}px) scale(0.95)`:`translate(${n}px, ${s}px)`,offset:1},{duration:r,easing:i,fill:"both"});let a=t.animate({opacity:0,offset:1},{duration:F(r,.25),easing:"linear",fill:"both"});a.onfinish=()=>t.remove();}function k(t,e){let{deltaX:n,deltaY:s,isNew:r,duration:i,ease:o}=e,a=z(t),u=n+a.tx,c=s+a.ty;t.animate({transform:`translate(${u}px, ${c}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:o,fill:"both"});let d=r&&a.opacity>=1?0:a.opacity;d<1&&t.animate([{opacity:d},{opacity:1}],{duration:F(i,r?.5:.25),easing:"linear",fill:"both"});}var T=null;function B(t,e,n,s,r){if(T&&(T(),T=null),e===0||n===0)return;t.style.width="auto",t.style.height="auto",t.offsetWidth;let i=t.offsetWidth,o=t.offsetHeight;t.style.width=`${e}px`,t.style.height=`${n}px`,t.offsetWidth,t.style.width=`${i}px`,t.style.height=`${o}px`;function a(){t.removeEventListener("transitionend",u),clearTimeout(c),T=null,t.style.width="auto",t.style.height="auto",r?.();}function u(d){d.target===t&&(d.propertyName!=="width"&&d.propertyName!=="height"||a());}t.addEventListener("transitionend",u);let c=setTimeout(a,s+50);T=()=>{t.removeEventListener("transitionend",u),clearTimeout(c),T=null;};}function X(t){let n=t[0]?.parentElement?.getBoundingClientRect(),s=t.map(r=>{let{tx:i,ty:o}=I(r),a=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(c=>c.cancel());let u=r.getBoundingClientRect();return {left:(n?u.left-n.left:u.left)+i,top:(n?u.top-n.top:u.top)+o,width:u.width,height:u.height,opacity:a}});t.forEach((r,i)=>{let o=s[i];r.setAttribute(f,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${o.left}px`,r.style.top=`${o.top}px`,r.style.width=`${o.width}px`,r.style.height=`${o.height}px`,r.style.opacity=String(o.opacity);});}function U(t,e,n,s){let r=new Map;e.forEach(i=>{let o=i.getAttribute(m);n.has(o)&&!i.hasAttribute(f)&&(r.set(o,i),i.remove());}),Array.from(t.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),s.forEach(i=>{let o=r.get(i.id);if(o)o.textContent=i.string,t.appendChild(o);else {let a=document.createElement("span");a.setAttribute(b,""),a.setAttribute(m,i.id),a.textContent=i.string,t.appendChild(a);}});}var V=`
+[${x}] {
+  display: inline-block;
+  position: relative;
+  will-change: width, height;
+  transition-property: width, height;
+  white-space: nowrap;
+}
+
+[${b}] {
+  display: inline-block;
+  will-change: opacity, transform;
+  transform: none;
+  opacity: 1;
+}
+
+[${x}][${E}] {
+  outline: 2px solid magenta;
+  [${b}] {
+    outline: 2px solid cyan;
+    outline-offset: -4px;
+  }
+}`,h=null,O=0;function G(){O++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=V,document.head.appendChild(h));}function j(){O--,!(O>0||!h)&&(h.remove(),h=null);}function q(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let t=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:t.matches,destroy:s};function n(r){e.prefersReducedMotion=r.matches;}function s(){t.removeEventListener("change",n);}return t.addEventListener("change",n),e}var M=class t{instance=null;lastText="";configKey="";attach(e,n){this.instance?.destroy(),this.instance=new A({element:e,...n}),this.configKey=t.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(e){this.lastText=e,this.instance?.update(e);}needsRecreate(e){return t.serializeConfig(e)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(e){return JSON.stringify({ease:e.ease,duration:e.duration,locale:e.locale,scale:e.scale,debug:e.debug,disabled:e.disabled,respectReducedMotion:e.respectReducedMotion})}};var K="span",g={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},A=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:n,...s}={...g,...e},r,i;if(typeof n=="object"){let o=C(n);r=o.easing,i=o.duration;}else r=n,i=s.duration;this.options={...s,ease:r,duration:i},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=q()),this.isDisabled()||(this.element.setAttribute(x,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(E,"")),this.data="",this.isDisabled()||G();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(x),this.element.removeAttribute(E),j();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,n){let s=n.offsetWidth,r=n.offsetHeight,i=_(e,this.options.locale);this.prevMeasures=w(this.element);let o=Array.from(n.children),a=new Set(i.map(l=>l.id)),u=o.filter(l=>!a.has(l.getAttribute(m))&&!l.hasAttribute(f)),c=new Set(u),d=o.map(l=>l.getAttribute(m)),p=N(o,c,d,a);if(X(u),U(n,o,a,i),this.currentMeasures=w(this.element),this.updateStyles(i),u.forEach(l=>{if(this.isInitialRender){l.remove();return}let y=p.get(l),{dx:S,dy:R}=y?v(this.currentMeasures,this.prevMeasures,y):{dx:0,dy:0};P(l,{dx:S,dy:R,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}B(n,s,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let n=Array.from(this.element.children),s=e.map(i=>i.id),r=new Set(s.filter(i=>this.prevMeasures[i]));n.forEach((i,o)=>{if(i.hasAttribute(f))return;let a=i.getAttribute(m)||`child-${o}`,u=!this.prevMeasures[a],c=u?L(e.findIndex(l=>l.id===a),s,r):a,{dx:d,dy:p}=c?v(this.prevMeasures,this.currentMeasures,c):{dx:0,dy:0};k(i,{deltaX:d,deltaY:p,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};var it=vue.defineComponent({name:"TextMorph",props:{text:{type:String,required:true},class:{type:[String,Object,Array],default:void 0},style:{type:Object,default:void 0},as:{type:String,default:K},locale:{type:String,default:g.locale},duration:{type:Number,default:g.duration},ease:{type:[String,Object],default:g.ease},scale:{type:Boolean,default:g.scale},debug:{type:Boolean,default:void 0},disabled:{type:Boolean,default:g.disabled},respectReducedMotion:{type:Boolean,default:g.respectReducedMotion},onAnimationStart:{type:Function,default:void 0},onAnimationComplete:{type:Function,default:void 0}},setup(t){let e=vue.ref(null),n=new M,s=vue.computed(()=>M.serializeConfig(t));function r(){e.value&&n.attach(e.value,{locale:t.locale,duration:t.duration,ease:t.ease,debug:t.debug,scale:t.scale,disabled:t.disabled,respectReducedMotion:t.respectReducedMotion,onAnimationStart:t.onAnimationStart,onAnimationComplete:t.onAnimationComplete});}return vue.watch(e,()=>r(),{flush:"post"}),vue.watch(s,()=>r()),vue.onUnmounted(()=>{n.destroy();}),vue.watch(()=>t.text,i=>{n.update(i);}),()=>vue.h(t.as,{ref:e,class:t.class,style:t.style})}});exports.TextMorph=it;

package/dist/vue/index.mjs

@@ -1 +1,23 @@
-export{default as TextMorph}from'../TextMorph-LC6RO5C5.vue';
+import {defineComponent,ref,computed,h as h$1,watch,onUnmounted}from'vue';function H(t,e,n){if(n<1){let u=e*Math.sqrt(1-n*n);return 1-Math.exp(-n*e*t)*(Math.cos(u*t)+n*e/u*Math.sin(u*t))}let s=Math.sqrt(n*n-1),r=-e*(n+s),i=-e*(n-s),o=-r/(i-r);return 1-(1-o)*Math.exp(r*t)-o*Math.exp(i*t)}function W(t,e,n){let i=0;for(let o=0;o<10;o+=.001)if(Math.abs(H(o,t,e)-1)>n)i=0;else if(i+=.001,i>.1)return Math.ceil((o-i+.001)*1e3);return Math.ceil(10*1e3)}var D=new Map;function C(t){let{stiffness:e=100,damping:n=10,mass:s=1,precision:r=.001}=t??{},i=`${e}:${n}:${s}:${r}`,o=D.get(i);if(o)return o;let a=Math.sqrt(e/s),u=n/(2*Math.sqrt(e*s)),c=W(a,u,r),d=Math.min(100,Math.max(32,Math.round(c/15))),p=[];for(let y=0;y<d;y++){let S=y/(d-1)*(c/1e3),R=y===d-1?1:H(S,a,u);p.push(Math.round(R*1e4)/1e4+"");}for(;p.length>2&&p[p.length-2]==="1";)p.splice(p.length-2,1);let l={easing:`linear(${p.join(", ")})`,duration:c};return D.set(i,l),l}function _(t,e){let n=t.includes(" ");if(typeof Intl.Segmenter<"u"){let r=new Intl.Segmenter(e,{granularity:n?"word":"grapheme"}).segment(t)[Symbol.iterator]();return Y(r)}return J(t,n)}function Y(t){return Array.from(t).reduce((e,n)=>n.segment===" "?[...e,{id:`space-${n.index}`,string:"\xA0"}]:e.find(r=>r.string===n.segment)?[...e,{id:`${n.segment}-${n.index}`,string:n.segment}]:[...e,{id:n.segment,string:n.segment}],[])}function Q(t,e,n){let s=t.find(r=>r.string===e);t.push(s?{id:`${e}-${n}`,string:e}:{id:e,string:e});}function J(t,e){let n=e?t.split(" "):t.split(""),s=[];return n.forEach((r,i)=>{e&&i>0&&s.push({id:`space-${i}`,string:"\xA0"}),Q(s,r,i);}),s}var x="torph-root",b="torph-item",m="torph-id",f="torph-exiting",E="torph-debug";function w(t){let e=Array.from(t.children),n={},s=t.getBoundingClientRect();return e.forEach((r,i)=>{if(r.hasAttribute(f))return;let o=r.getAttribute(m)||`child-${i}`,a=r.getBoundingClientRect();n[o]={x:a.left-s.left,y:a.top-s.top};}),n}function v(t,e,n){let s=t[n],r=e[n];return !s||!r?{dx:0,dy:0}:{dx:s.x-r.x,dy:s.y-r.y}}function L(t,e,n,s="backward-first"){let[r,i]=s==="backward-first"?["backward","forward"]:["forward","backward"],o=a=>{if(a==="backward"){for(let u=t-1;u>=0;u--)if(n.has(e[u]))return e[u]}else for(let u=t+1;u<e.length;u++)if(n.has(e[u]))return e[u];return null};return o(r)??o(i)}function N(t,e,n,s){let r=new Set(n.filter((o,a)=>s.has(o)&&!e.has(t[a]))),i=new Map;for(let o=0;o<t.length;o++){let a=t[o];e.has(a)&&i.set(a,L(o,n,r,"forward-first"));}return i}function F(t,e){return Math.min(t*e,150)}function I(t){let e=getComputedStyle(t).transform;if(!e||e==="none")return {tx:0,ty:0};let n=e.match(/matrix\(([^)]+)\)/);if(!n)return {tx:0,ty:0};let s=n[1].split(",").map(Number);return {tx:s[4]||0,ty:s[5]||0}}function z(t){let{tx:e,ty:n}=I(t),s=Number(getComputedStyle(t).opacity)||1;return t.getAnimations().forEach(r=>r.cancel()),{tx:e,ty:n,opacity:s}}function P(t,e){let{dx:n,dy:s,duration:r,ease:i,scale:o}=e;t.animate({transform:o?`translate(${n}px, ${s}px) scale(0.95)`:`translate(${n}px, ${s}px)`,offset:1},{duration:r,easing:i,fill:"both"});let a=t.animate({opacity:0,offset:1},{duration:F(r,.25),easing:"linear",fill:"both"});a.onfinish=()=>t.remove();}function k(t,e){let{deltaX:n,deltaY:s,isNew:r,duration:i,ease:o}=e,a=z(t),u=n+a.tx,c=s+a.ty;t.animate({transform:`translate(${u}px, ${c}px) scale(${r?.95:1})`,offset:0},{duration:i,easing:o,fill:"both"});let d=r&&a.opacity>=1?0:a.opacity;d<1&&t.animate([{opacity:d},{opacity:1}],{duration:F(i,r?.5:.25),easing:"linear",fill:"both"});}var T=null;function B(t,e,n,s,r){if(T&&(T(),T=null),e===0||n===0)return;t.style.width="auto",t.style.height="auto",t.offsetWidth;let i=t.offsetWidth,o=t.offsetHeight;t.style.width=`${e}px`,t.style.height=`${n}px`,t.offsetWidth,t.style.width=`${i}px`,t.style.height=`${o}px`;function a(){t.removeEventListener("transitionend",u),clearTimeout(c),T=null,t.style.width="auto",t.style.height="auto",r?.();}function u(d){d.target===t&&(d.propertyName!=="width"&&d.propertyName!=="height"||a());}t.addEventListener("transitionend",u);let c=setTimeout(a,s+50);T=()=>{t.removeEventListener("transitionend",u),clearTimeout(c),T=null;};}function X(t){let n=t[0]?.parentElement?.getBoundingClientRect(),s=t.map(r=>{let{tx:i,ty:o}=I(r),a=Number(getComputedStyle(r).opacity)||1;r.getAnimations().forEach(c=>c.cancel());let u=r.getBoundingClientRect();return {left:(n?u.left-n.left:u.left)+i,top:(n?u.top-n.top:u.top)+o,width:u.width,height:u.height,opacity:a}});t.forEach((r,i)=>{let o=s[i];r.setAttribute(f,""),r.style.position="absolute",r.style.pointerEvents="none",r.style.left=`${o.left}px`,r.style.top=`${o.top}px`,r.style.width=`${o.width}px`,r.style.height=`${o.height}px`,r.style.opacity=String(o.opacity);});}function U(t,e,n,s){let r=new Map;e.forEach(i=>{let o=i.getAttribute(m);n.has(o)&&!i.hasAttribute(f)&&(r.set(o,i),i.remove());}),Array.from(t.childNodes).forEach(i=>{i.nodeType===Node.TEXT_NODE&&i.remove();}),s.forEach(i=>{let o=r.get(i.id);if(o)o.textContent=i.string,t.appendChild(o);else {let a=document.createElement("span");a.setAttribute(b,""),a.setAttribute(m,i.id),a.textContent=i.string,t.appendChild(a);}});}var V=`
+[${x}] {
+  display: inline-block;
+  position: relative;
+  will-change: width, height;
+  transition-property: width, height;
+  white-space: nowrap;
+}
+
+[${b}] {
+  display: inline-block;
+  will-change: opacity, transform;
+  transform: none;
+  opacity: 1;
+}
+
+[${x}][${E}] {
+  outline: 2px solid magenta;
+  [${b}] {
+    outline: 2px solid cyan;
+    outline-offset: -4px;
+  }
+}`,h=null,O=0;function G(){O++,!h&&(h=document.createElement("style"),h.dataset.torph="true",h.textContent=V,document.head.appendChild(h));}function j(){O--,!(O>0||!h)&&(h.remove(),h=null);}function q(){if(typeof window>"u")return {prefersReducedMotion:false,destroy:()=>{}};let t=window.matchMedia("(prefers-reduced-motion: reduce)"),e={prefersReducedMotion:t.matches,destroy:s};function n(r){e.prefersReducedMotion=r.matches;}function s(){t.removeEventListener("change",n);}return t.addEventListener("change",n),e}var M=class t{instance=null;lastText="";configKey="";attach(e,n){this.instance?.destroy(),this.instance=new A({element:e,...n}),this.configKey=t.serializeConfig(n),this.lastText&&this.instance.update(this.lastText);}update(e){this.lastText=e,this.instance?.update(e);}needsRecreate(e){return t.serializeConfig(e)!==this.configKey}destroy(){this.instance?.destroy(),this.instance=null;}static serializeConfig(e){return JSON.stringify({ease:e.ease,duration:e.duration,locale:e.locale,scale:e.scale,debug:e.debug,disabled:e.disabled,respectReducedMotion:e.respectReducedMotion})}};var K="span",g={debug:false,locale:"en",duration:400,scale:true,ease:"cubic-bezier(0.19, 1, 0.22, 1)",disabled:false,respectReducedMotion:true},A=class{element;options={};data;currentMeasures={};prevMeasures={};isInitialRender=true;reducedMotion=null;constructor(e){let{ease:n,...s}={...g,...e},r,i;if(typeof n=="object"){let o=C(n);r=o.easing,i=o.duration;}else r=n,i=s.duration;this.options={...s,ease:r,duration:i},this.element=e.element,this.options.respectReducedMotion&&(this.reducedMotion=q()),this.isDisabled()||(this.element.setAttribute(x,""),this.element.style.transitionDuration=`${this.options.duration}ms`,this.element.style.transitionTimingFunction=this.options.ease,e.debug&&this.element.setAttribute(E,"")),this.data="",this.isDisabled()||G();}destroy(){this.reducedMotion?.destroy(),this.element.getAnimations().forEach(e=>e.cancel()),this.element.removeAttribute(x),this.element.removeAttribute(E),j();}isDisabled(){return !!(this.options.disabled||this.reducedMotion?.prefersReducedMotion)}update(e){if(e!==this.data){if(this.data=e,this.isDisabled()){typeof e=="string"&&(this.element.textContent=e);return}if(this.data instanceof HTMLElement)throw new Error("HTMLElement not yet supported");this.options.onAnimationStart&&!this.isInitialRender&&this.options.onAnimationStart(),this.createTextGroup(this.data,this.element);}}createTextGroup(e,n){let s=n.offsetWidth,r=n.offsetHeight,i=_(e,this.options.locale);this.prevMeasures=w(this.element);let o=Array.from(n.children),a=new Set(i.map(l=>l.id)),u=o.filter(l=>!a.has(l.getAttribute(m))&&!l.hasAttribute(f)),c=new Set(u),d=o.map(l=>l.getAttribute(m)),p=N(o,c,d,a);if(X(u),U(n,o,a,i),this.currentMeasures=w(this.element),this.updateStyles(i),u.forEach(l=>{if(this.isInitialRender){l.remove();return}let y=p.get(l),{dx:S,dy:R}=y?v(this.currentMeasures,this.prevMeasures,y):{dx:0,dy:0};P(l,{dx:S,dy:R,duration:this.options.duration,ease:this.options.ease,scale:this.options.scale});}),this.isInitialRender){this.isInitialRender=false,n.style.width="auto",n.style.height="auto";return}B(n,s,r,this.options.duration,this.options.onAnimationComplete);}updateStyles(e){if(this.isInitialRender)return;let n=Array.from(this.element.children),s=e.map(i=>i.id),r=new Set(s.filter(i=>this.prevMeasures[i]));n.forEach((i,o)=>{if(i.hasAttribute(f))return;let a=i.getAttribute(m)||`child-${o}`,u=!this.prevMeasures[a],c=u?L(e.findIndex(l=>l.id===a),s,r):a,{dx:d,dy:p}=c?v(this.prevMeasures,this.currentMeasures,c):{dx:0,dy:0};k(i,{deltaX:d,deltaY:p,isNew:u,duration:this.options.duration,ease:this.options.ease});});}};var it=defineComponent({name:"TextMorph",props:{text:{type:String,required:true},class:{type:[String,Object,Array],default:void 0},style:{type:Object,default:void 0},as:{type:String,default:K},locale:{type:String,default:g.locale},duration:{type:Number,default:g.duration},ease:{type:[String,Object],default:g.ease},scale:{type:Boolean,default:g.scale},debug:{type:Boolean,default:void 0},disabled:{type:Boolean,default:g.disabled},respectReducedMotion:{type:Boolean,default:g.respectReducedMotion},onAnimationStart:{type:Function,default:void 0},onAnimationComplete:{type:Function,default:void 0}},setup(t){let e=ref(null),n=new M,s=computed(()=>M.serializeConfig(t));function r(){e.value&&n.attach(e.value,{locale:t.locale,duration:t.duration,ease:t.ease,debug:t.debug,scale:t.scale,disabled:t.disabled,respectReducedMotion:t.respectReducedMotion,onAnimationStart:t.onAnimationStart,onAnimationComplete:t.onAnimationComplete});}return watch(e,()=>r(),{flush:"post"}),watch(s,()=>r()),onUnmounted(()=>{n.destroy();}),watch(()=>t.text,i=>{n.update(i);}),()=>h$1(t.as,{ref:e,class:t.class,style:t.style})}});export{it as TextMorph};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "torph",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Dependency-free animated text component.",
   "homepage": "https://torph.lochie.me",
   "author": "Lochie Axon",

package/dist/TextMorph-LC6RO5C5.vue

@@ -1,65 +0,0 @@
-<template>
-  <component
-    :is="as"
-    ref="containerRef"
-    :class="props.class"
-    :style="props.style"
-  ></component>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onUnmounted, watch } from "vue";
-import {
-  DEFAULT_AS,
-  DEFAULT_TEXT_MORPH_OPTIONS,
-} from "../lib/text-morph";
-import { MorphController } from "../lib/text-morph/controller";
-import type { TextMorphProps } from "./types";
-
-const props = withDefaults(defineProps<TextMorphProps>(), {
-  locale: DEFAULT_TEXT_MORPH_OPTIONS.locale,
-  duration: DEFAULT_TEXT_MORPH_OPTIONS.duration,
-  ease: DEFAULT_TEXT_MORPH_OPTIONS.ease,
-  scale: DEFAULT_TEXT_MORPH_OPTIONS.scale,
-  disabled: DEFAULT_TEXT_MORPH_OPTIONS.disabled,
-  respectReducedMotion: DEFAULT_TEXT_MORPH_OPTIONS.respectReducedMotion,
-  as: DEFAULT_AS,
-});
-
-const containerRef = ref<HTMLElement | null>(null);
-const controller = new MorphController();
-
-const configKey = computed(() =>
-  MorphController.serializeConfig(props),
-);
-
-function createInstance() {
-  if (containerRef.value) {
-    controller.attach(containerRef.value, {
-      locale: props.locale,
-      duration: props.duration,
-      ease: props.ease,
-      debug: props.debug,
-      scale: props.scale,
-      disabled: props.disabled,
-      respectReducedMotion: props.respectReducedMotion,
-      onAnimationStart: props.onAnimationStart,
-      onAnimationComplete: props.onAnimationComplete,
-    });
-  }
-}
-
-watch(containerRef, () => createInstance(), { flush: "post" });
-watch(configKey, () => createInstance());
-
-onUnmounted(() => {
-  controller.destroy();
-});
-
-watch(
-  () => props.text,
-  (newText) => {
-    controller.update(newText);
-  },
-);
-</script>