@liiift-studio/threadtext 0.2.1 → 0.2.2

package/README.md

@@ -75,8 +75,9 @@ import { ThreadText } from '@liiift-studio/threadtext'
 ```
 
 Thread colour, `fill` (size — the word re-fits to the container width on load/resize),
-`weight`, `font`, `sewStyle` (`'machine'` satin rows in parallel, or `'hand'` — one letter at
-a time, longest threads first), `sewRate`, `sheen`, `animate`, and `editable` (type straight on
+`weight`, `font`, `sewStyle` (`'machine'` satin rows in parallel, or `'hand'` — one letter at a
+time, entering at the top and working down, edges last), `sewRate`, `sheen`, `animate`, and
+`editable` (type straight on
 the artwork — backed by a real input, so touch keyboards and IME work) with an `onTextChange`
 callback are all options — see `ThreadTextOptions`. Change any of them live with
 `instance.update(...)` — it redraws instantly, never re-running the sew-in. `react`/`react-dom`

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),Re=require("react/jsx-runtime"),St={bg:"tt-bg",fx:"tt-fx",caret:"tt-caret"};function ot(x,n){let o=Math.imul(x|0,374761393)+Math.imul(n|0,668265263)|0;return o=Math.imul(o^o>>>13,1274126177),((o^o>>>16)>>>0)/4294967295}function oe(x,n){const o=Math.floor(x),i=Math.floor(n),a=x-o,l=n-i,h=a*a*(3-2*a),F=l*l*(3-2*l),E=ot(o,i),P=ot(o+1,i),c=ot(o,i+1),m=ot(o+1,i+1);return E+(P-E)*h+(c-E)*F+(E-P-c+m)*h*F}const Et=1e20;function re(x,n,o,i,a){let l=0;i[0]=0,a[0]=-Et,a[1]=Et;for(let h=1;h<n;h++){let F=(x[h]+h*h-(x[i[l]]+i[l]*i[l]))/(2*h-2*i[l]);for(;F<=a[l];)l--,F=(x[h]+h*h-(x[i[l]]+i[l]*i[l]))/(2*h-2*i[l]);l++,i[l]=h,a[l]=F,a[l+1]=Et}l=0;for(let h=0;h<n;h++){for(;a[l+1]<h;)l++;o[h]=(h-i[l])*(h-i[l])+x[i[l]]}}function Le(x,n,o){const i=new Float64Array(n*o);for(let c=0;c<n*o;c++)i[c]=x[c]?Et:0;const a=Math.max(n,o),l=new Float64Array(a),h=new Float64Array(a),F=new Int32Array(a),E=new Float64Array(a+1);for(let c=0;c<n;c++){for(let m=0;m<o;m++)l[m]=i[m*n+c];re(l,o,h,F,E);for(let m=0;m<o;m++)i[m*n+c]=h[m]}for(let c=0;c<o;c++){for(let m=0;m<n;m++)l[m]=i[c*n+m];re(l,n,h,F,E);for(let m=0;m<n;m++)i[c*n+m]=h[m]}const P=new Float32Array(n*o);for(let c=0;c<n*o;c++)P[c]=Math.sqrt(i[c]);return P}function ie(x,n,o,i,a){let l=Float32Array.from(x);const h=new Float32Array(n*o),F=1/(2*i+1),E=(P,c)=>P<0?0:P>c?c:P;for(let P=0;P<a;P++){for(let c=0;c<o;c++){const m=c*n;let k=0;for(let j=-i;j<=i;j++)k+=l[m+E(j,n-1)];for(let j=0;j<n;j++)h[m+j]=k*F,k+=l[m+E(j+i+1,n-1)]-l[m+E(j-i,n-1)]}for(let c=0;c<n;c++){let m=0;for(let k=-i;k<=i;k++)m+=h[E(k,o-1)*n+c];for(let k=0;k<o;k++)l[k*n+c]=m*F,m+=h[E(k+i+1,o-1)*n+c]-h[E(k-i,o-1)*n+c]}}return l}function ae(x,n){if(!x)return n;const o=x.trim();if(o[0]==="#"){let a=o.slice(1);if(a.length===3&&(a=a[0]+a[0]+a[1]+a[1]+a[2]+a[2]),a.length>=6){const l=parseInt(a.slice(0,2),16),h=parseInt(a.slice(2,4),16),F=parseInt(a.slice(4,6),16);if(!Number.isNaN(l)&&!Number.isNaN(h)&&!Number.isNaN(F))return[l,h,F]}return n}const i=o.match(/rgba?\(([^)]+)\)/i);if(i){const a=i[1].split(",").map(l=>parseFloat(l));if(a.length>=3&&a.slice(0,3).every(l=>!Number.isNaN(l)))return[Math.round(a[0]),Math.round(a[1]),Math.round(a[2])]}return n}function H(x){return x<0?0:x>255?255:Math.round(x)}function bt(x,n,o){return x<n?n:x>o?o:x}function le(x){return(x.split(",")[0]||"serif").trim().replace(/^["']|["']$/g,"")}function se(x,n){if(typeof window>"u"||typeof document>"u"||!x)return{setText(){},replay(){},resize(){},update(){},focus(){},destroy(){},get text(){return n.text??""}};let o=n.text??"",i=n.font??"Georgia, serif",a=bt(n.weight??680,1,1e3),l=bt(n.fill??.9,.05,1),h=Math.max(1,n.sewRate??110),F=n.sewStyle==="hand"?"hand":"machine",E=n.sheen??!0,P=n.animate??!0,c=n.editable??!1,m=n.pitch,k=n.onTextChange,j=le(i);const gt=n.reducedMotion??!!(window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches);let O=ae(n.threadColor??"#fffbf3",[255,251,243]),ft=[0,0,0],D=[0,0,0];function ut(t){O=ae(t,[255,251,243]),ft=[O[0]*.585,O[1]*.585,O[2]*.585],D=[O[0]*.47,O[1]*.47,O[2]*.47]}ut(n.threadColor??"#fffbf3");const G=[];let B,L;x instanceof HTMLCanvasElement?(B=x,L=x.parentElement??x):(L=x,B=document.createElement("canvas"),G.push(B),L.appendChild(B)),B.classList.add(St.bg);const q=document.createElement("canvas");G.push(q),q.classList.add(St.fx),L.appendChild(q),getComputedStyle(L).position==="static"&&(L.style.position="relative"),B.style.display="block",B.style.width="100%",Object.assign(q.style,{position:"absolute",inset:"0",width:"100%",pointerEvents:"none",mixBlendMode:"screen"});let v=null,A=null,tt=!1,u=0,p=0,rt=0,At=0,it=4,at=[],dt=0,ht=0,qt=-1,zt="",_t=-1,Xt=-1,Ft=new Uint8Array(0),Rt=new Float32Array(0),pt=new Float32Array(0),wt=new Float32Array(0),Q=null,lt=null,Mt=null,mt=[],et=3;const $={rows:[],idx:0,acc:0,rate:0,on:!1},K={x:0,y:0,set:!1};let nt=!0,Lt=0,xt=!1,yt=0,z=!1,Z=!1;function ue(){const t=L.getBoundingClientRect(),e=Math.max(1,Math.round(t.width||Math.min(window.innerWidth*.95,1240))),r=o||"Ag",f=B.getContext("2d");f&&(f.textBaseline="middle");let C=100;f&&(f.font=`${a} 100px ${i}`,C=f.measureText(r).width||100);const y=Math.max(8,100*(e*l)/C);let g=y*.62,b=y*.62,T=e*l;if(f){f.font=`${a} ${y}px ${i}`;const w=f.measureText(r);T=w.width||T,w.actualBoundingBoxAscent>0&&(g=w.actualBoundingBoxAscent),w.actualBoundingBoxDescent>0&&(b=w.actualBoundingBoxDescent)}const d=Math.max(1,Math.round(2*Math.max(g,b)*1.1));let s=Math.min(window.devicePixelRatio||1,1.7);for(;e*s*d*s>9e5&&s>.4;)s-=.1;u=Math.max(1,Math.round(e*s)),p=Math.max(1,Math.round(d*s)),rt=Math.max(4,Math.round(y*s)),At=Math.round(u/2-T*s/2);for(const w of[B,q])w.width=u,w.height=p,w.style.height=d+"px";L.style.height=d+"px",it=m??Math.max(3,p*.0095)}function de(){lt&&_t===u&&Xt===p||(lt=document.createElement("canvas"),lt.width=u,lt.height=p,Mt=lt.getContext("2d",{willReadFrequently:!0}),_t=u,Xt=p)}function Ut(){const t=Math.max(7,it*2.5),e=Math.max(3.2,it*1.3);dt=Math.ceil(t)+2,ht=Math.ceil(e)+2,at=[];for(let r=0;r<20;r++){const f=.34+r/19*.82,C=document.createElement("canvas");C.width=dt,C.height=ht;const y=C.getContext("2d");if(!y){at.push(C);continue}const g=dt/2,b=ht/2,T=y.createLinearGradient(0,b-e/2,0,b+e/2),d=(I,N)=>`rgba(${H(I[0]*f)},${H(I[1]*f)},${H(I[2]*f)},${N})`;T.addColorStop(0,d(D,0)),T.addColorStop(.16,d(ft,1)),T.addColorStop(.5,d(O,1)),T.addColorStop(.84,d(ft,1)),T.addColorStop(1,d(D,0)),y.fillStyle=T,y.beginPath();const s=e/2;y.moveTo(g-t/2+s,b-s),y.lineTo(g+t/2-s,b-s),y.arc(g+t/2-s,b,s,-Math.PI/2,Math.PI/2),y.lineTo(g-t/2+s,b+s),y.arc(g-t/2+s,b,s,Math.PI/2,-Math.PI/2),y.closePath(),y.fill(),y.globalCompositeOperation="destination-in";const w=y.createLinearGradient(g-t/2,0,g+t/2,0);w.addColorStop(0,"rgba(0,0,0,0)"),w.addColorStop(.22,"rgba(0,0,0,1)"),w.addColorStop(.78,"rgba(0,0,0,1)"),w.addColorStop(1,"rgba(0,0,0,0)"),y.fillStyle=w,y.fillRect(0,0,dt,ht),at.push(C)}qt=it,zt=O.join(",")}function he(){at.length&&qt===it&&zt===O.join(",")||Ut()}function me(){if(!Mt)return;const t=Mt;t.clearRect(0,0,u,p),t.fillStyle="#fff",t.textAlign="left",t.textBaseline="middle",t.font=`${a} ${rt}px ${i}`,t.fillText(o,At,p*.5);const e=t.getImageData(0,0,u,p).data,r=new Uint8Array(u*p);for(let M=0;M<p;M++)for(let S=0;S<u;S++){const R=M*u+S,X=e[R*4+3]/255,U=oe(S*.5,M*.5)*.22+oe(S*1.8,M*1.8)*.1;r[R]=X>.5+(U-.16)?1:0}Ft=r;const f=Le(r,u,p),C=new Float32Array(u*p);for(let M=1;M<p-1;M++)for(let S=1;S<u-1;S++){const R=M*u+S;C[R]=(f[R]*4+f[R-1]+f[R+1]+f[R-u]+f[R+u])/8}const y=new Float32Array(u*p),g=new Float32Array(u*p),b=new Float32Array(u*p),T=new Float32Array(u*p);for(let M=1;M<p-1;M++)for(let S=1;S<u-1;S++){const R=M*u+S;if(!r[R])continue;const X=(C[R+1]-C[R-1])*.5,U=(C[R+u]-C[R-u])*.5;b[R]=X,T[R]=U,y[R]=X*X-U*U,g[R]=2*X*U}const d=Math.max(7,Math.round(p*.05)),s=ie(y,u,p,d,2),w=ie(g,u,p,d,2);pt=new Float32Array(u*p),wt=new Float32Array(u*p);for(let M=0;M<u*p;M++){if(!r[M])continue;const S=.5*Math.atan2(w[M],s[M]);pt[M]=Math.cos(S),wt[M]=Math.sin(S)}const I=Math.max(9,p*.04),N=new Float32Array(u*p),V=-.45,W=-.62,Y=.64;for(let M=1;M<p-1;M++)for(let S=1;S<u-1;S++){const R=M*u+S;if(!r[R])continue;let X=b[R],U=T[R];const Wt=Math.hypot(X,U)||1;X/=Wt,U/=Wt;const te=C[R],ee=(1-Math.min(te/I,1))*1.25;let Bt=-X*ee,Nt=-U*ee;const ne=1.5,jt=Math.hypot(Bt,Nt,ne);Bt/=jt,Nt/=jt;let Dt=Bt*V+Nt*W+ne/jt*Y;Dt<0&&(Dt=0);const Fe=Math.min(1,.45+.55*Math.min(te/(I*.7),1));N[R]=Math.min(1.12,(.5+.75*Dt)*Fe)}Rt=N,Q=document.createElement("canvas"),Q.width=u,Q.height=p;const _=Q.getContext("2d");if(_){const M=_.createImageData(u,p);for(let S=0;S<u*p;S++)r[S]&&(M.data[S*4]=255,M.data[S*4+1]=255,M.data[S*4+2]=255,M.data[S*4+3]=255);_.putImageData(M,0,0)}}function xe(){const t=Math.max(1.6,it*.6);et=t;const e=[];for(let r=0;r<p;r+=t)for(let f=0;f<u;f+=t){const C=(ot(Math.floor(f),Math.floor(r))-.5)*t*.9,y=(ot(Math.floor(r),Math.floor(f))-.5)*t*.9,g=Math.round(f+C),b=Math.round(r+y);if(g<1||b<1||g>=u-1||b>=p-1)continue;const T=b*u+g;if(!Ft[T])continue;const d=Math.atan2(wt[T],pt[T]),s=.86+ot(g*7,b*13)*.18;let w=Rt[T]*s;w=w<0?0:w>1.12?1.12:w,e.push({x:g,y:b,ang:d,idx:Math.min(19,Math.max(0,Math.round(w/1.12*19)))})}mt=e}function Gt(t,e){t.save(),t.translate(e.x,e.y),t.rotate(e.ang),t.drawImage(at[e.idx],-dt/2,-ht/2),t.restore()}function $t(){const t=B.getContext("2d");if(t)for(const e of mt)Gt(t,e)}function It(){const t=B.getContext("2d");t&&t.clearRect(0,0,u,p)}function Kt(t){if(!t.length)return[];const e=Math.max(4,et*1.5),r=new Map,f=(d,s)=>d+","+s;t.forEach((d,s)=>{const w=f(Math.floor(d.x/e),Math.floor(d.y/e));let I=r.get(w);I||r.set(w,I=[]),I.push(s)});const C=et*1.8*(et*1.8);function y(d){const s=t[d],w=Math.floor(s.x/e),I=Math.floor(s.y/e),N=[];for(let V=-1;V<=1;V++)for(let W=-1;W<=1;W++){const Y=r.get(f(w+V,I+W));if(Y)for(const _ of Y){if(_===d)continue;const M=t[_].x-s.x,S=t[_].y-s.y;M*M+S*S<=C&&N.push(_)}}return N}const g=new Uint8Array(t.length),b=[],T=t.map((d,s)=>s).sort((d,s)=>t[d].x+t[d].y-(t[s].x+t[s].y));for(const d of T){if(g[d])continue;let s=[d];for(g[d]=1;s.length;){b.push(s.map(I=>t[I]));const w=[];for(const I of s)for(const N of y(I))g[N]||(g[N]=1,w.push(N));s=w}}return b}function ye(t){const e=Math.max(4,et*1.5),r=new Map,f=(T,d)=>T+","+d;t.forEach((T,d)=>{const s=f(Math.floor(T.x/e),Math.floor(T.y/e));let w=r.get(s);w||r.set(s,w=[]),w.push(d)});const C=et*1.8*(et*1.8),y=T=>{const d=t[T],s=Math.floor(d.x/e),w=Math.floor(d.y/e),I=[];for(let N=-1;N<=1;N++)for(let V=-1;V<=1;V++){const W=r.get(f(s+N,w+V));if(W)for(const Y of W){if(Y===T)continue;const _=t[Y].x-d.x,M=t[Y].y-d.y;_*_+M*M<=C&&I.push(Y)}}return I},g=new Uint8Array(t.length),b=[];for(let T=0;T<t.length;T++){if(g[T])continue;const d=[];let s=[T];for(g[T]=1;s.length;){const w=[];for(const I of s){d.push(t[I]);for(const N of y(I))g[N]||(g[N]=1,w.push(N))}s=w}b.push(d)}return b}function ge(t){if(!t.length)return[];const e=C=>{let y=1/0;for(const g of C)g.x<y&&(y=g.x);return y},r=ye(t).sort((C,y)=>e(C)-e(y)),f=[];for(const C of r){const y=Kt(C);y.sort((g,b)=>b.length-g.length);for(const g of y)f.push(g)}return f}function pe(){if(It(),gt||!P){$t(),$.on=!1;return}$.rows=F==="hand"?ge(mt):Kt(mt),$.idx=0,$.acc=0,$.rate=h,$.on=$.rows.length>0}function we(t){const e=B.getContext("2d");if(e)for(t>$.rows.length&&(t=$.rows.length);$.idx<t;){const r=$.rows[$.idx++];for(const f of r)Gt(e,f)}}function Me(t,e){const r=q.getContext("2d");if(!r||(r.clearRect(0,0,u,p),!E||!Q))return;const f=u*.32,C=r.createRadialGradient(t,e,0,t,e,f);C.addColorStop(0,"rgba(255,250,238,0.18)"),C.addColorStop(.5,"rgba(255,250,238,0.055)"),C.addColorStop(1,"rgba(255,250,238,0)"),r.fillStyle=C,r.fillRect(0,0,u,p),r.globalCompositeOperation="destination-in",r.drawImage(Q,0,0),r.globalCompositeOperation="source-over"}function Ce(){A||!c||(A=document.createElement("span"),A.className=St.caret,A.setAttribute("aria-hidden","true"),Object.assign(A.style,{position:"absolute",pointerEvents:"none",borderRadius:"1px",opacity:"0",background:`rgb(${H(O[0])},${H(O[1])},${H(O[2])})`}),L.appendChild(A),G.push(A))}function Pt(){if(!c||!A)return;const t=B.getContext("2d");if(!t)return;t.font=`${a} ${rt}px ${i}`;const e=t.measureText(o).width,r=(B.clientWidth||u)/u,f=rt*.7;A.style.left=(At+e+rt*.05)*r+"px",A.style.top=.5*(B.clientHeight||p)-f*r/2+"px",A.style.height=f*r+"px",A.style.width=Math.max(2,Math.round(rt*.02*r))+"px",A.style.background=`rgb(${H(O[0])},${H(O[1])},${H(O[2])})`}function st(){z||xt||(xt=!0,yt=0,Lt=requestAnimationFrame(Vt))}function Vt(t){if(z){xt=!1;return}yt||(yt=t);const e=Math.min(.25,(t-yt)/1e3);yt=t,$.on&&($.acc+=$.rate*e,we($.acc),$.idx>=$.rows.length&&($.on=!1)),nt&&Q&&(Me(K.set?K.x:u*.5,K.set?K.y:p*.45),nt=!1);const r=c&&tt;if(A&&(A.style.opacity=r&&Math.floor(t/530)%2===0?"1":"0"),!$.on&&!nt&&!r){xt=!1;return}Lt=requestAnimationFrame(Vt)}function Ct(t){const e=L.getBoundingClientRect();K.x=(t.clientX-e.left)/(e.width||1)*u,K.y=(t.clientY-e.top)/(e.height||1)*p,K.set=!0,nt=!0,st()}function vt(){K.set=!1,nt=!0,st()}function ve(){v&&Ht(v.value,!0)}function Te(t){t.key==="Enter"&&(t.preventDefault(),Ot.replay())}function be(){tt=!0,st()}function Se(){tt=!1,A&&(A.style.opacity="0")}function Yt(t){t===c&&v||(c=t,t?(v||(v=document.createElement("input"),v.type="text",v.value=o,v.maxLength=64,v.setAttribute("aria-label","Embroidered text — type to change it"),v.setAttribute("autocomplete","off"),v.setAttribute("autocapitalize","off"),v.spellcheck=!1,Object.assign(v.style,{position:"absolute",inset:"0",width:"100%",height:"100%",margin:"0",padding:"0",border:"0",outline:"none",background:"transparent",color:"transparent",caretColor:"transparent",font:"inherit",textAlign:"center",cursor:"text"}),v.addEventListener("input",ve),v.addEventListener("keydown",Te),v.addEventListener("focus",be),v.addEventListener("blur",Se),L.appendChild(v),G.push(v)),Ce(),Pt()):(v&&(v.remove(),v=null),tt=!1,A&&(A.style.opacity="0")))}function Ee(t){if(t!==E)if(E=t,t)L.addEventListener("pointermove",Ct,{passive:!0}),L.addEventListener("pointerleave",vt,{passive:!0}),K.set=!1,nt=!0,st();else{L.removeEventListener("pointermove",Ct),L.removeEventListener("pointerleave",vt);const e=q.getContext("2d");e&&e.clearRect(0,0,u,p)}}function ct(t){ue(),de(),he(),me(),xe(),t?pe():(It(),$t(),$.on=!1),v&&v.value!==o&&(v.value=o),Pt(),nt=!0,st()}function Ht(t,e){t=t??"",!(t===o&&Z)&&(o=t,Z&&(ct(!1),e&&k&&k(o)))}const Tt=new Set;function Jt(t,e,r){const f=`${e} 200px ${t}`;let C=!1;try{C=!!document.fonts&&document.fonts.check(f)}catch{C=!0}if(!document.fonts||C){r();return}let y=!1,g;const b=()=>{y||(y=!0,clearTimeout(g),Tt.delete(g),z||r())};document.fonts.load(f,o).then(()=>document.fonts.ready).then(b,b),g=setTimeout(b,1500),Tt.add(g)}function Ae(){z||(ct(!0),Z=!0)}c&&(c=!1,Yt(!0)),E&&(L.addEventListener("pointermove",Ct,{passive:!0}),L.addEventListener("pointerleave",vt,{passive:!0})),Jt(j,a,Ae);let kt,Qt=-1;function Zt(){clearTimeout(kt),kt=setTimeout(()=>{if(z||!Z)return;const t=Math.round(L.getBoundingClientRect().width);t!==Qt&&(Qt=t,ct(!1))},200)}window.addEventListener("resize",Zt);const Ot={get text(){return o},setText(t){if(!z){if(!Z){o=t??"",v&&(v.value=o);return}Ht(t,!1)}},replay(){z||!Z||ct(!0)},resize(){z||!Z||ct(!1)},update(t){if(z)return;t.text!==void 0&&Ot.setText(t.text);let e=!1,r=!1;if(t.font!==void 0&&t.font!==i&&(i=t.font,j=le(i),e=!0),t.weight!==void 0){const f=bt(t.weight,1,1e3);f!==a&&(a=f,e=!0)}if(t.fill!==void 0){const f=bt(t.fill,.05,1);f!==l&&(l=f,e=!0)}t.pitch!==void 0&&t.pitch!==m&&(m=t.pitch,e=!0),t.threadColor!==void 0&&(ut(t.threadColor),r=!0),t.sewRate!==void 0&&(h=Math.max(1,t.sewRate)),t.sewStyle!==void 0&&(F=t.sewStyle==="hand"?"hand":"machine"),t.animate!==void 0&&(P=t.animate),t.onTextChange!==void 0&&(k=t.onTextChange),t.sheen!==void 0&&Ee(t.sheen),t.editable!==void 0&&Yt(t.editable),Z&&(e?Jt(j,a,()=>{z||ct(!1)}):r&&(Ut(),It(),$t(),Pt(),st()))},focus(){!z&&c&&(v==null||v.focus())},destroy(){if(!z){z=!0,xt=!1,cancelAnimationFrame(Lt),clearTimeout(kt);for(const t of Tt)clearTimeout(t);Tt.clear(),window.removeEventListener("resize",Zt),L.removeEventListener("pointermove",Ct),L.removeEventListener("pointerleave",vt);for(const t of G)t.remove();at=[],mt=[],$.rows=[],Ft=new Uint8Array(0),Rt=new Float32Array(0),pt=new Float32Array(0),wt=new Float32Array(0),Q=lt=null,Mt=null,A=null,v=null}}};return Ot}function ce(x){const n=J.useRef(null),o=J.useRef(null),i=J.useRef(x);i.current=x;const a=J.useRef(x.onTextChange);a.current=x.onTextChange;const{text:l,font:h,weight:F,threadColor:E,pitch:P,fill:c,animate:m,sewStyle:k,sewRate:j,sheen:gt,editable:O,reducedMotion:ft}=x;return J.useLayoutEffect(()=>{const D=n.current;if(!D)return;const ut=se(D,{...i.current,onTextChange:v=>{var A;return(A=a.current)==null?void 0:A.call(a,v)}});o.current=ut;let G=0,B=0,L=!0,q;return typeof ResizeObserver<"u"&&(q=new ResizeObserver(v=>{const A=Math.round(v[0].contentRect.width);if(L){L=!1,B=A;return}A!==B&&(B=A,cancelAnimationFrame(G),G=requestAnimationFrame(()=>{var tt;return(tt=o.current)==null?void 0:tt.resize()}))}),q.observe(D)),()=>{q==null||q.disconnect(),cancelAnimationFrame(G),ut.destroy(),o.current=null}},[ft]),J.useEffect(()=>{var D;(D=o.current)==null||D.update({font:h,weight:F,threadColor:E,pitch:P,fill:c,animate:m,sewStyle:k,sewRate:j,sheen:gt,editable:O})},[h,F,E,P,c,m,k,j,gt,O]),J.useEffect(()=>{var D;(D=o.current)==null||D.setText(l)},[l]),n}const fe=J.forwardRef(function({className:n,style:o,as:i="div","aria-label":a,role:l,"aria-describedby":h,...F},E){const P=ce(F),c=J.useCallback(m=>{P.current=m,typeof E=="function"?E(m):E&&(E.current=m)},[P,E]);return Re.jsx(i,{ref:c,className:n,style:o,role:F.editable?l:l??"img","aria-label":F.editable?a:a??F.text,"aria-describedby":h})});fe.displayName="ThreadText";exports.THREAD_TEXT_CLASSES=St;exports.ThreadText=fe;exports.createThreadText=se;exports.useThreadText=ce;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),Re=require("react/jsx-runtime"),St={bg:"tt-bg",fx:"tt-fx",caret:"tt-caret"};function ot(g,n){let o=Math.imul(g|0,374761393)+Math.imul(n|0,668265263)|0;return o=Math.imul(o^o>>>13,1274126177),((o^o>>>16)>>>0)/4294967295}function oe(g,n){const o=Math.floor(g),a=Math.floor(n),s=g-o,l=n-a,x=s*s*(3-2*s),F=l*l*(3-2*l),E=ot(o,a),P=ot(o+1,a),f=ot(o,a+1),y=ot(o+1,a+1);return E+(P-E)*x+(f-E)*F+(E-P-f+y)*x*F}const Et=1e20;function re(g,n,o,a,s){let l=0;a[0]=0,s[0]=-Et,s[1]=Et;for(let x=1;x<n;x++){let F=(g[x]+x*x-(g[a[l]]+a[l]*a[l]))/(2*x-2*a[l]);for(;F<=s[l];)l--,F=(g[x]+x*x-(g[a[l]]+a[l]*a[l]))/(2*x-2*a[l]);l++,a[l]=x,s[l]=F,s[l+1]=Et}l=0;for(let x=0;x<n;x++){for(;s[l+1]<x;)l++;o[x]=(x-a[l])*(x-a[l])+g[a[l]]}}function Le(g,n,o){const a=new Float64Array(n*o);for(let f=0;f<n*o;f++)a[f]=g[f]?Et:0;const s=Math.max(n,o),l=new Float64Array(s),x=new Float64Array(s),F=new Int32Array(s),E=new Float64Array(s+1);for(let f=0;f<n;f++){for(let y=0;y<o;y++)l[y]=a[y*n+f];re(l,o,x,F,E);for(let y=0;y<o;y++)a[y*n+f]=x[y]}for(let f=0;f<o;f++){for(let y=0;y<n;y++)l[y]=a[f*n+y];re(l,n,x,F,E);for(let y=0;y<n;y++)a[f*n+y]=x[y]}const P=new Float32Array(n*o);for(let f=0;f<n*o;f++)P[f]=Math.sqrt(a[f]);return P}function ie(g,n,o,a,s){let l=Float32Array.from(g);const x=new Float32Array(n*o),F=1/(2*a+1),E=(P,f)=>P<0?0:P>f?f:P;for(let P=0;P<s;P++){for(let f=0;f<o;f++){const y=f*n;let k=0;for(let j=-a;j<=a;j++)k+=l[y+E(j,n-1)];for(let j=0;j<n;j++)x[y+j]=k*F,k+=l[y+E(j+a+1,n-1)]-l[y+E(j-a,n-1)]}for(let f=0;f<n;f++){let y=0;for(let k=-a;k<=a;k++)y+=x[E(k,o-1)*n+f];for(let k=0;k<o;k++)l[k*n+f]=y*F,y+=x[E(k+a+1,o-1)*n+f]-x[E(k-a,o-1)*n+f]}}return l}function ae(g,n){if(!g)return n;const o=g.trim();if(o[0]==="#"){let s=o.slice(1);if(s.length===3&&(s=s[0]+s[0]+s[1]+s[1]+s[2]+s[2]),s.length>=6){const l=parseInt(s.slice(0,2),16),x=parseInt(s.slice(2,4),16),F=parseInt(s.slice(4,6),16);if(!Number.isNaN(l)&&!Number.isNaN(x)&&!Number.isNaN(F))return[l,x,F]}return n}const a=o.match(/rgba?\(([^)]+)\)/i);if(a){const s=a[1].split(",").map(l=>parseFloat(l));if(s.length>=3&&s.slice(0,3).every(l=>!Number.isNaN(l)))return[Math.round(s[0]),Math.round(s[1]),Math.round(s[2])]}return n}function H(g){return g<0?0:g>255?255:Math.round(g)}function bt(g,n,o){return g<n?n:g>o?o:g}function se(g){return(g.split(",")[0]||"serif").trim().replace(/^["']|["']$/g,"")}function le(g,n){if(typeof window>"u"||typeof document>"u"||!g)return{setText(){},replay(){},resize(){},update(){},focus(){},destroy(){},get text(){return n.text??""}};let o=n.text??"",a=n.font??"Georgia, serif",s=bt(n.weight??680,1,1e3),l=bt(n.fill??.9,.05,1),x=Math.max(1,n.sewRate??110),F=n.sewStyle==="hand"?"hand":"machine",E=n.sheen??!0,P=n.animate??!0,f=n.editable??!1,y=n.pitch,k=n.onTextChange,j=se(a);const gt=n.reducedMotion??!!(window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches);let O=ae(n.threadColor??"#fffbf3",[255,251,243]),ft=[0,0,0],D=[0,0,0];function ut(t){O=ae(t,[255,251,243]),ft=[O[0]*.585,O[1]*.585,O[2]*.585],D=[O[0]*.47,O[1]*.47,O[2]*.47]}ut(n.threadColor??"#fffbf3");const G=[];let B,$;g instanceof HTMLCanvasElement?(B=g,$=g.parentElement??g):($=g,B=document.createElement("canvas"),G.push(B),$.appendChild(B)),B.classList.add(St.bg);const q=document.createElement("canvas");G.push(q),q.classList.add(St.fx),$.appendChild(q),getComputedStyle($).position==="static"&&($.style.position="relative"),B.style.display="block",B.style.width="100%",Object.assign(q.style,{position:"absolute",inset:"0",width:"100%",pointerEvents:"none",mixBlendMode:"screen"});let T=null,A=null,tt=!1,u=0,w=0,rt=0,At=0,it=4,at=[],dt=0,ht=0,qt=-1,zt="",_t=-1,Xt=-1,Ft=new Uint8Array(0),Rt=new Float32Array(0),pt=new Float32Array(0),wt=new Float32Array(0),Q=null,st=null,Mt=null,mt=[],et=3;const I={rows:[],idx:0,acc:0,rate:0,on:!1},K={x:0,y:0,set:!1};let nt=!0,Lt=0,xt=!1,yt=0,z=!1,Z=!1;function ue(){const t=$.getBoundingClientRect(),e=Math.max(1,Math.round(t.width||Math.min(window.innerWidth*.95,1240))),r=o||"Ag",d=B.getContext("2d");d&&(d.textBaseline="middle");let b=100;d&&(d.font=`${s} 100px ${a}`,b=d.measureText(r).width||100);const p=Math.max(8,100*(e*l)/b);let h=p*.62,M=p*.62,C=e*l;if(d){d.font=`${s} ${p}px ${a}`;const i=d.measureText(r);C=i.width||C,i.actualBoundingBoxAscent>0&&(h=i.actualBoundingBoxAscent),i.actualBoundingBoxDescent>0&&(M=i.actualBoundingBoxDescent)}const m=Math.max(1,Math.round(2*Math.max(h,M)*1.1));let c=Math.min(window.devicePixelRatio||1,1.7);for(;e*c*m*c>9e5&&c>.4;)c-=.1;u=Math.max(1,Math.round(e*c)),w=Math.max(1,Math.round(m*c)),rt=Math.max(4,Math.round(p*c)),At=Math.round(u/2-C*c/2);for(const i of[B,q])i.width=u,i.height=w,i.style.height=m+"px";$.style.height=m+"px",it=y??Math.max(3,w*.0095)}function de(){st&&_t===u&&Xt===w||(st=document.createElement("canvas"),st.width=u,st.height=w,Mt=st.getContext("2d",{willReadFrequently:!0}),_t=u,Xt=w)}function Ut(){const t=Math.max(7,it*2.5),e=Math.max(3.2,it*1.3);dt=Math.ceil(t)+2,ht=Math.ceil(e)+2,at=[];for(let r=0;r<20;r++){const d=.34+r/19*.82,b=document.createElement("canvas");b.width=dt,b.height=ht;const p=b.getContext("2d");if(!p){at.push(b);continue}const h=dt/2,M=ht/2,C=p.createLinearGradient(0,M-e/2,0,M+e/2),m=(R,N)=>`rgba(${H(R[0]*d)},${H(R[1]*d)},${H(R[2]*d)},${N})`;C.addColorStop(0,m(D,0)),C.addColorStop(.16,m(ft,1)),C.addColorStop(.5,m(O,1)),C.addColorStop(.84,m(ft,1)),C.addColorStop(1,m(D,0)),p.fillStyle=C,p.beginPath();const c=e/2;p.moveTo(h-t/2+c,M-c),p.lineTo(h+t/2-c,M-c),p.arc(h+t/2-c,M,c,-Math.PI/2,Math.PI/2),p.lineTo(h-t/2+c,M+c),p.arc(h-t/2+c,M,c,Math.PI/2,-Math.PI/2),p.closePath(),p.fill(),p.globalCompositeOperation="destination-in";const i=p.createLinearGradient(h-t/2,0,h+t/2,0);i.addColorStop(0,"rgba(0,0,0,0)"),i.addColorStop(.22,"rgba(0,0,0,1)"),i.addColorStop(.78,"rgba(0,0,0,1)"),i.addColorStop(1,"rgba(0,0,0,0)"),p.fillStyle=i,p.fillRect(0,0,dt,ht),at.push(b)}qt=it,zt=O.join(",")}function he(){at.length&&qt===it&&zt===O.join(",")||Ut()}function me(){if(!Mt)return;const t=Mt;t.clearRect(0,0,u,w),t.fillStyle="#fff",t.textAlign="left",t.textBaseline="middle",t.font=`${s} ${rt}px ${a}`,t.fillText(o,At,w*.5);const e=t.getImageData(0,0,u,w).data,r=new Uint8Array(u*w);for(let v=0;v<w;v++)for(let S=0;S<u;S++){const L=v*u+S,X=e[L*4+3]/255,U=oe(S*.5,v*.5)*.22+oe(S*1.8,v*1.8)*.1;r[L]=X>.5+(U-.16)?1:0}Ft=r;const d=Le(r,u,w),b=new Float32Array(u*w);for(let v=1;v<w-1;v++)for(let S=1;S<u-1;S++){const L=v*u+S;b[L]=(d[L]*4+d[L-1]+d[L+1]+d[L-u]+d[L+u])/8}const p=new Float32Array(u*w),h=new Float32Array(u*w),M=new Float32Array(u*w),C=new Float32Array(u*w);for(let v=1;v<w-1;v++)for(let S=1;S<u-1;S++){const L=v*u+S;if(!r[L])continue;const X=(b[L+1]-b[L-1])*.5,U=(b[L+u]-b[L-u])*.5;M[L]=X,C[L]=U,p[L]=X*X-U*U,h[L]=2*X*U}const m=Math.max(7,Math.round(w*.05)),c=ie(p,u,w,m,2),i=ie(h,u,w,m,2);pt=new Float32Array(u*w),wt=new Float32Array(u*w);for(let v=0;v<u*w;v++){if(!r[v])continue;const S=.5*Math.atan2(i[v],c[v]);pt[v]=Math.cos(S),wt[v]=Math.sin(S)}const R=Math.max(9,w*.04),N=new Float32Array(u*w),Y=-.45,W=-.62,V=.64;for(let v=1;v<w-1;v++)for(let S=1;S<u-1;S++){const L=v*u+S;if(!r[L])continue;let X=M[L],U=C[L];const Wt=Math.hypot(X,U)||1;X/=Wt,U/=Wt;const te=b[L],ee=(1-Math.min(te/R,1))*1.25;let Bt=-X*ee,Nt=-U*ee;const ne=1.5,jt=Math.hypot(Bt,Nt,ne);Bt/=jt,Nt/=jt;let Dt=Bt*Y+Nt*W+ne/jt*V;Dt<0&&(Dt=0);const Fe=Math.min(1,.45+.55*Math.min(te/(R*.7),1));N[L]=Math.min(1.12,(.5+.75*Dt)*Fe)}Rt=N,Q=document.createElement("canvas"),Q.width=u,Q.height=w;const _=Q.getContext("2d");if(_){const v=_.createImageData(u,w);for(let S=0;S<u*w;S++)r[S]&&(v.data[S*4]=255,v.data[S*4+1]=255,v.data[S*4+2]=255,v.data[S*4+3]=255);_.putImageData(v,0,0)}}function xe(){const t=Math.max(1.6,it*.6);et=t;const e=[];for(let r=0;r<w;r+=t)for(let d=0;d<u;d+=t){const b=(ot(Math.floor(d),Math.floor(r))-.5)*t*.9,p=(ot(Math.floor(r),Math.floor(d))-.5)*t*.9,h=Math.round(d+b),M=Math.round(r+p);if(h<1||M<1||h>=u-1||M>=w-1)continue;const C=M*u+h;if(!Ft[C])continue;const m=Math.atan2(wt[C],pt[C]),c=.86+ot(h*7,M*13)*.18;let i=Rt[C]*c;i=i<0?0:i>1.12?1.12:i,e.push({x:h,y:M,ang:m,idx:Math.min(19,Math.max(0,Math.round(i/1.12*19)))})}mt=e}function Gt(t,e){t.save(),t.translate(e.x,e.y),t.rotate(e.ang),t.drawImage(at[e.idx],-dt/2,-ht/2),t.restore()}function $t(){const t=B.getContext("2d");if(t)for(const e of mt)Gt(t,e)}function It(){const t=B.getContext("2d");t&&t.clearRect(0,0,u,w)}function Kt(t){if(!t.length)return[];const e=Math.max(4,et*1.5),r=new Map,d=(m,c)=>m+","+c;t.forEach((m,c)=>{const i=d(Math.floor(m.x/e),Math.floor(m.y/e));let R=r.get(i);R||r.set(i,R=[]),R.push(c)});const b=et*1.8*(et*1.8);function p(m){const c=t[m],i=Math.floor(c.x/e),R=Math.floor(c.y/e),N=[];for(let Y=-1;Y<=1;Y++)for(let W=-1;W<=1;W++){const V=r.get(d(i+Y,R+W));if(V)for(const _ of V){if(_===m)continue;const v=t[_].x-c.x,S=t[_].y-c.y;v*v+S*S<=b&&N.push(_)}}return N}const h=new Uint8Array(t.length),M=[],C=t.map((m,c)=>c).sort((m,c)=>t[m].x+t[m].y-(t[c].x+t[c].y));for(const m of C){if(h[m])continue;let c=[m];for(h[m]=1;c.length;){M.push(c.map(R=>t[R]));const i=[];for(const R of c)for(const N of p(R))h[N]||(h[N]=1,i.push(N));c=i}}return M}function ye(t){const e=Math.max(4,et*1.5),r=new Map,d=(C,m)=>C+","+m;t.forEach((C,m)=>{const c=d(Math.floor(C.x/e),Math.floor(C.y/e));let i=r.get(c);i||r.set(c,i=[]),i.push(m)});const b=et*1.8*(et*1.8),p=C=>{const m=t[C],c=Math.floor(m.x/e),i=Math.floor(m.y/e),R=[];for(let N=-1;N<=1;N++)for(let Y=-1;Y<=1;Y++){const W=r.get(d(c+N,i+Y));if(W)for(const V of W){if(V===C)continue;const _=t[V].x-m.x,v=t[V].y-m.y;_*_+v*v<=b&&R.push(V)}}return R},h=new Uint8Array(t.length),M=[];for(let C=0;C<t.length;C++){if(h[C])continue;const m=[];let c=[C];for(h[C]=1;c.length;){const i=[];for(const R of c){m.push(t[R]);for(const N of p(R))h[N]||(h[N]=1,i.push(N))}c=i}M.push(m)}return M}function ge(t){if(!t.length)return[];const e=p=>{let h=1/0;for(const M of p)M.x<h&&(h=M.x);return h},r=p=>{let h=0;for(const M of p)h+=M.y;return h/p.length},d=ye(t).sort((p,h)=>e(p)-e(h)),b=[];for(const p of d){const h=Kt(p);let M=1;for(const i of h)i.length>M&&(M=i.length);const C=Math.max(2,M*.45),m=h.filter(i=>i.length>=C).sort((i,R)=>r(i)-r(R)),c=h.filter(i=>i.length<C).sort((i,R)=>r(i)-r(R));for(const i of m)b.push(i);for(const i of c)b.push(i)}return b}function pe(){if(It(),gt||!P){$t(),I.on=!1;return}I.rows=F==="hand"?ge(mt):Kt(mt),I.idx=0,I.acc=0,I.rate=x,I.on=I.rows.length>0}function we(t){const e=B.getContext("2d");if(e)for(t>I.rows.length&&(t=I.rows.length);I.idx<t;){const r=I.rows[I.idx++];for(const d of r)Gt(e,d)}}function Me(t,e){const r=q.getContext("2d");if(!r||(r.clearRect(0,0,u,w),!E||!Q))return;const d=u*.32,b=r.createRadialGradient(t,e,0,t,e,d);b.addColorStop(0,"rgba(255,250,238,0.18)"),b.addColorStop(.5,"rgba(255,250,238,0.055)"),b.addColorStop(1,"rgba(255,250,238,0)"),r.fillStyle=b,r.fillRect(0,0,u,w),r.globalCompositeOperation="destination-in",r.drawImage(Q,0,0),r.globalCompositeOperation="source-over"}function Ce(){A||!f||(A=document.createElement("span"),A.className=St.caret,A.setAttribute("aria-hidden","true"),Object.assign(A.style,{position:"absolute",pointerEvents:"none",borderRadius:"1px",opacity:"0",background:`rgb(${H(O[0])},${H(O[1])},${H(O[2])})`}),$.appendChild(A),G.push(A))}function Pt(){if(!f||!A)return;const t=B.getContext("2d");if(!t)return;t.font=`${s} ${rt}px ${a}`;const e=t.measureText(o).width,r=(B.clientWidth||u)/u,d=rt*.7;A.style.left=(At+e+rt*.05)*r+"px",A.style.top=.5*(B.clientHeight||w)-d*r/2+"px",A.style.height=d*r+"px",A.style.width=Math.max(2,Math.round(rt*.02*r))+"px",A.style.background=`rgb(${H(O[0])},${H(O[1])},${H(O[2])})`}function lt(){z||xt||(xt=!0,yt=0,Lt=requestAnimationFrame(Yt))}function Yt(t){if(z){xt=!1;return}yt||(yt=t);const e=Math.min(.25,(t-yt)/1e3);yt=t,I.on&&(I.acc+=I.rate*e,we(I.acc),I.idx>=I.rows.length&&(I.on=!1)),nt&&Q&&(Me(K.set?K.x:u*.5,K.set?K.y:w*.45),nt=!1);const r=f&&tt;if(A&&(A.style.opacity=r&&Math.floor(t/530)%2===0?"1":"0"),!I.on&&!nt&&!r){xt=!1;return}Lt=requestAnimationFrame(Yt)}function Ct(t){const e=$.getBoundingClientRect();K.x=(t.clientX-e.left)/(e.width||1)*u,K.y=(t.clientY-e.top)/(e.height||1)*w,K.set=!0,nt=!0,lt()}function vt(){K.set=!1,nt=!0,lt()}function ve(){T&&Ht(T.value,!0)}function Te(t){t.key==="Enter"&&(t.preventDefault(),Ot.replay())}function be(){tt=!0,lt()}function Se(){tt=!1,A&&(A.style.opacity="0")}function Vt(t){t===f&&T||(f=t,t?(T||(T=document.createElement("input"),T.type="text",T.value=o,T.maxLength=64,T.setAttribute("aria-label","Embroidered text — type to change it"),T.setAttribute("autocomplete","off"),T.setAttribute("autocapitalize","off"),T.spellcheck=!1,Object.assign(T.style,{position:"absolute",inset:"0",width:"100%",height:"100%",margin:"0",padding:"0",border:"0",outline:"none",background:"transparent",color:"transparent",caretColor:"transparent",font:"inherit",textAlign:"center",cursor:"text"}),T.addEventListener("input",ve),T.addEventListener("keydown",Te),T.addEventListener("focus",be),T.addEventListener("blur",Se),$.appendChild(T),G.push(T)),Ce(),Pt()):(T&&(T.remove(),T=null),tt=!1,A&&(A.style.opacity="0")))}function Ee(t){if(t!==E)if(E=t,t)$.addEventListener("pointermove",Ct,{passive:!0}),$.addEventListener("pointerleave",vt,{passive:!0}),K.set=!1,nt=!0,lt();else{$.removeEventListener("pointermove",Ct),$.removeEventListener("pointerleave",vt);const e=q.getContext("2d");e&&e.clearRect(0,0,u,w)}}function ct(t){ue(),de(),he(),me(),xe(),t?pe():(It(),$t(),I.on=!1),T&&T.value!==o&&(T.value=o),Pt(),nt=!0,lt()}function Ht(t,e){t=t??"",!(t===o&&Z)&&(o=t,Z&&(ct(!1),e&&k&&k(o)))}const Tt=new Set;function Jt(t,e,r){const d=`${e} 200px ${t}`;let b=!1;try{b=!!document.fonts&&document.fonts.check(d)}catch{b=!0}if(!document.fonts||b){r();return}let p=!1,h;const M=()=>{p||(p=!0,clearTimeout(h),Tt.delete(h),z||r())};document.fonts.load(d,o).then(()=>document.fonts.ready).then(M,M),h=setTimeout(M,1500),Tt.add(h)}function Ae(){z||(ct(!0),Z=!0)}f&&(f=!1,Vt(!0)),E&&($.addEventListener("pointermove",Ct,{passive:!0}),$.addEventListener("pointerleave",vt,{passive:!0})),Jt(j,s,Ae);let kt,Qt=-1;function Zt(){clearTimeout(kt),kt=setTimeout(()=>{if(z||!Z)return;const t=Math.round($.getBoundingClientRect().width);t!==Qt&&(Qt=t,ct(!1))},200)}window.addEventListener("resize",Zt);const Ot={get text(){return o},setText(t){if(!z){if(!Z){o=t??"",T&&(T.value=o);return}Ht(t,!1)}},replay(){z||!Z||ct(!0)},resize(){z||!Z||ct(!1)},update(t){if(z)return;t.text!==void 0&&Ot.setText(t.text);let e=!1,r=!1;if(t.font!==void 0&&t.font!==a&&(a=t.font,j=se(a),e=!0),t.weight!==void 0){const d=bt(t.weight,1,1e3);d!==s&&(s=d,e=!0)}if(t.fill!==void 0){const d=bt(t.fill,.05,1);d!==l&&(l=d,e=!0)}t.pitch!==void 0&&t.pitch!==y&&(y=t.pitch,e=!0),t.threadColor!==void 0&&(ut(t.threadColor),r=!0),t.sewRate!==void 0&&(x=Math.max(1,t.sewRate)),t.sewStyle!==void 0&&(F=t.sewStyle==="hand"?"hand":"machine"),t.animate!==void 0&&(P=t.animate),t.onTextChange!==void 0&&(k=t.onTextChange),t.sheen!==void 0&&Ee(t.sheen),t.editable!==void 0&&Vt(t.editable),Z&&(e?Jt(j,s,()=>{z||ct(!1)}):r&&(Ut(),It(),$t(),Pt(),lt()))},focus(){!z&&f&&(T==null||T.focus())},destroy(){if(!z){z=!0,xt=!1,cancelAnimationFrame(Lt),clearTimeout(kt);for(const t of Tt)clearTimeout(t);Tt.clear(),window.removeEventListener("resize",Zt),$.removeEventListener("pointermove",Ct),$.removeEventListener("pointerleave",vt);for(const t of G)t.remove();at=[],mt=[],I.rows=[],Ft=new Uint8Array(0),Rt=new Float32Array(0),pt=new Float32Array(0),wt=new Float32Array(0),Q=st=null,Mt=null,A=null,T=null}}};return Ot}function ce(g){const n=J.useRef(null),o=J.useRef(null),a=J.useRef(g);a.current=g;const s=J.useRef(g.onTextChange);s.current=g.onTextChange;const{text:l,font:x,weight:F,threadColor:E,pitch:P,fill:f,animate:y,sewStyle:k,sewRate:j,sheen:gt,editable:O,reducedMotion:ft}=g;return J.useLayoutEffect(()=>{const D=n.current;if(!D)return;const ut=le(D,{...a.current,onTextChange:T=>{var A;return(A=s.current)==null?void 0:A.call(s,T)}});o.current=ut;let G=0,B=0,$=!0,q;return typeof ResizeObserver<"u"&&(q=new ResizeObserver(T=>{const A=Math.round(T[0].contentRect.width);if($){$=!1,B=A;return}A!==B&&(B=A,cancelAnimationFrame(G),G=requestAnimationFrame(()=>{var tt;return(tt=o.current)==null?void 0:tt.resize()}))}),q.observe(D)),()=>{q==null||q.disconnect(),cancelAnimationFrame(G),ut.destroy(),o.current=null}},[ft]),J.useEffect(()=>{var D;(D=o.current)==null||D.update({font:x,weight:F,threadColor:E,pitch:P,fill:f,animate:y,sewStyle:k,sewRate:j,sheen:gt,editable:O})},[x,F,E,P,f,y,k,j,gt,O]),J.useEffect(()=>{var D;(D=o.current)==null||D.setText(l)},[l]),n}const fe=J.forwardRef(function({className:n,style:o,as:a="div","aria-label":s,role:l,"aria-describedby":x,...F},E){const P=ce(F),f=J.useCallback(y=>{P.current=y,typeof E=="function"?E(y):E&&(E.current=y)},[P,E]);return Re.jsx(a,{ref:f,className:n,style:o,role:F.editable?l:l??"img","aria-label":F.editable?s:s??F.text,"aria-describedby":x})});fe.displayName="ThreadText";exports.THREAD_TEXT_CLASSES=St;exports.ThreadText=fe;exports.createThreadText=le;exports.useThreadText=ce;

package/dist/index.d.ts

@@ -81,9 +81,9 @@ export declare interface ThreadTextOptions {
      * How the word is sewn in:
      * - **'machine'** (default) — satin cross-rows appear in parallel across each stroke, like
      *   machine embroidery (a BFS over the stitch graph).
-     * - **'hand'** — works one letter at a time (left to right), laying the longest threads
-     *   (the widest satin cross-rows) first, then the thin serifs and terminals — the way a
-     *   person establishes the body of a shape before the details.
+     * - **'hand'** — works one letter at a time (left to right). Within each letter it enters at
+     *   the widest region near the top and works its way down the strokes, then cleans up the thin
+     *   serifs and terminals last — the way a person embroiders a shape.
      */
     sewStyle?: 'machine' | 'hand';
     /** Satin cross-rows (machine) or stitches (hand) laid per second during the sew-in. (default: 110) */

package/dist/index.js

@@ -8,98 +8,98 @@ const Dt = {
   /** Blinking text caret shown in editable mode. */
   caret: "tt-caret"
 };
-function nt(x, n) {
-  let o = Math.imul(x | 0, 374761393) + Math.imul(n | 0, 668265263) | 0;
+function nt(g, n) {
+  let o = Math.imul(g | 0, 374761393) + Math.imul(n | 0, 668265263) | 0;
   return o = Math.imul(o ^ o >>> 13, 1274126177), ((o ^ o >>> 16) >>> 0) / 4294967295;
 }
-function re(x, n) {
-  const o = Math.floor(x), i = Math.floor(n), a = x - o, l = n - i, h = a * a * (3 - 2 * a), F = l * l * (3 - 2 * l), S = nt(o, i), P = nt(o + 1, i), s = nt(o, i + 1), m = nt(o + 1, i + 1);
-  return S + (P - S) * h + (s - S) * F + (S - P - s + m) * h * F;
+function re(g, n) {
+  const o = Math.floor(g), a = Math.floor(n), l = g - o, s = n - a, x = l * l * (3 - 2 * l), F = s * s * (3 - 2 * s), S = nt(o, a), P = nt(o + 1, a), f = nt(o, a + 1), y = nt(o + 1, a + 1);
+  return S + (P - S) * x + (f - S) * F + (S - P - f + y) * x * F;
 }
 const Et = 1e20;
-function ie(x, n, o, i, a) {
-  let l = 0;
-  i[0] = 0, a[0] = -Et, a[1] = Et;
-  for (let h = 1; h < n; h++) {
-    let F = (x[h] + h * h - (x[i[l]] + i[l] * i[l])) / (2 * h - 2 * i[l]);
-    for (; F <= a[l]; )
-      l--, F = (x[h] + h * h - (x[i[l]] + i[l] * i[l])) / (2 * h - 2 * i[l]);
-    l++, i[l] = h, a[l] = F, a[l + 1] = Et;
-  }
-  l = 0;
-  for (let h = 0; h < n; h++) {
-    for (; a[l + 1] < h; ) l++;
-    o[h] = (h - i[l]) * (h - i[l]) + x[i[l]];
+function ie(g, n, o, a, l) {
+  let s = 0;
+  a[0] = 0, l[0] = -Et, l[1] = Et;
+  for (let x = 1; x < n; x++) {
+    let F = (g[x] + x * x - (g[a[s]] + a[s] * a[s])) / (2 * x - 2 * a[s]);
+    for (; F <= l[s]; )
+      s--, F = (g[x] + x * x - (g[a[s]] + a[s] * a[s])) / (2 * x - 2 * a[s]);
+    s++, a[s] = x, l[s] = F, l[s + 1] = Et;
+  }
+  s = 0;
+  for (let x = 0; x < n; x++) {
+    for (; l[s + 1] < x; ) s++;
+    o[x] = (x - a[s]) * (x - a[s]) + g[a[s]];
   }
 }
-function $e(x, n, o) {
-  const i = new Float64Array(n * o);
-  for (let s = 0; s < n * o; s++) i[s] = x[s] ? Et : 0;
-  const a = Math.max(n, o), l = new Float64Array(a), h = new Float64Array(a), F = new Int32Array(a), S = new Float64Array(a + 1);
-  for (let s = 0; s < n; s++) {
-    for (let m = 0; m < o; m++) l[m] = i[m * n + s];
-    ie(l, o, h, F, S);
-    for (let m = 0; m < o; m++) i[m * n + s] = h[m];
-  }
-  for (let s = 0; s < o; s++) {
-    for (let m = 0; m < n; m++) l[m] = i[s * n + m];
-    ie(l, n, h, F, S);
-    for (let m = 0; m < n; m++) i[s * n + m] = h[m];
+function $e(g, n, o) {
+  const a = new Float64Array(n * o);
+  for (let f = 0; f < n * o; f++) a[f] = g[f] ? Et : 0;
+  const l = Math.max(n, o), s = new Float64Array(l), x = new Float64Array(l), F = new Int32Array(l), S = new Float64Array(l + 1);
+  for (let f = 0; f < n; f++) {
+    for (let y = 0; y < o; y++) s[y] = a[y * n + f];
+    ie(s, o, x, F, S);
+    for (let y = 0; y < o; y++) a[y * n + f] = x[y];
+  }
+  for (let f = 0; f < o; f++) {
+    for (let y = 0; y < n; y++) s[y] = a[f * n + y];
+    ie(s, n, x, F, S);
+    for (let y = 0; y < n; y++) a[f * n + y] = x[y];
   }
   const P = new Float32Array(n * o);
-  for (let s = 0; s < n * o; s++) P[s] = Math.sqrt(i[s]);
+  for (let f = 0; f < n * o; f++) P[f] = Math.sqrt(a[f]);
   return P;
 }
-function ae(x, n, o, i, a) {
-  let l = Float32Array.from(x);
-  const h = new Float32Array(n * o), F = 1 / (2 * i + 1), S = (P, s) => P < 0 ? 0 : P > s ? s : P;
-  for (let P = 0; P < a; P++) {
-    for (let s = 0; s < o; s++) {
-      const m = s * n;
+function ae(g, n, o, a, l) {
+  let s = Float32Array.from(g);
+  const x = new Float32Array(n * o), F = 1 / (2 * a + 1), S = (P, f) => P < 0 ? 0 : P > f ? f : P;
+  for (let P = 0; P < l; P++) {
+    for (let f = 0; f < o; f++) {
+      const y = f * n;
       let k = 0;
-      for (let j = -i; j <= i; j++) k += l[m + S(j, n - 1)];
+      for (let j = -a; j <= a; j++) k += s[y + S(j, n - 1)];
       for (let j = 0; j < n; j++)
-        h[m + j] = k * F, k += l[m + S(j + i + 1, n - 1)] - l[m + S(j - i, n - 1)];
+        x[y + j] = k * F, k += s[y + S(j + a + 1, n - 1)] - s[y + S(j - a, n - 1)];
     }
-    for (let s = 0; s < n; s++) {
-      let m = 0;
-      for (let k = -i; k <= i; k++) m += h[S(k, o - 1) * n + s];
+    for (let f = 0; f < n; f++) {
+      let y = 0;
+      for (let k = -a; k <= a; k++) y += x[S(k, o - 1) * n + f];
       for (let k = 0; k < o; k++)
-        l[k * n + s] = m * F, m += h[S(k + i + 1, o - 1) * n + s] - h[S(k - i, o - 1) * n + s];
+        s[k * n + f] = y * F, y += x[S(k + a + 1, o - 1) * n + f] - x[S(k - a, o - 1) * n + f];
     }
   }
-  return l;
+  return s;
 }
-function le(x, n) {
-  if (!x) return n;
-  const o = x.trim();
+function le(g, n) {
+  if (!g) return n;
+  const o = g.trim();
   if (o[0] === "#") {
-    let a = o.slice(1);
-    if (a.length === 3 && (a = a[0] + a[0] + a[1] + a[1] + a[2] + a[2]), a.length >= 6) {
-      const l = parseInt(a.slice(0, 2), 16), h = parseInt(a.slice(2, 4), 16), F = parseInt(a.slice(4, 6), 16);
-      if (!Number.isNaN(l) && !Number.isNaN(h) && !Number.isNaN(F)) return [l, h, F];
+    let l = o.slice(1);
+    if (l.length === 3 && (l = l[0] + l[0] + l[1] + l[1] + l[2] + l[2]), l.length >= 6) {
+      const s = parseInt(l.slice(0, 2), 16), x = parseInt(l.slice(2, 4), 16), F = parseInt(l.slice(4, 6), 16);
+      if (!Number.isNaN(s) && !Number.isNaN(x) && !Number.isNaN(F)) return [s, x, F];
     }
     return n;
   }
-  const i = o.match(/rgba?\(([^)]+)\)/i);
-  if (i) {
-    const a = i[1].split(",").map((l) => parseFloat(l));
-    if (a.length >= 3 && a.slice(0, 3).every((l) => !Number.isNaN(l)))
-      return [Math.round(a[0]), Math.round(a[1]), Math.round(a[2])];
+  const a = o.match(/rgba?\(([^)]+)\)/i);
+  if (a) {
+    const l = a[1].split(",").map((s) => parseFloat(s));
+    if (l.length >= 3 && l.slice(0, 3).every((s) => !Number.isNaN(s)))
+      return [Math.round(l[0]), Math.round(l[1]), Math.round(l[2])];
   }
   return n;
 }
-function H(x) {
-  return x < 0 ? 0 : x > 255 ? 255 : Math.round(x);
+function H(g) {
+  return g < 0 ? 0 : g > 255 ? 255 : Math.round(g);
 }
-function Tt(x, n, o) {
-  return x < n ? n : x > o ? o : x;
+function Tt(g, n, o) {
+  return g < n ? n : g > o ? o : g;
 }
-function ce(x) {
-  return (x.split(",")[0] || "serif").trim().replace(/^["']|["']$/g, "");
+function se(g) {
+  return (g.split(",")[0] || "serif").trim().replace(/^["']|["']$/g, "");
 }
-function Ie(x, n) {
-  if (typeof window > "u" || typeof document > "u" || !x)
+function Ie(g, n) {
+  if (typeof window > "u" || typeof document > "u" || !g)
     return { setText() {
     }, replay() {
     }, resize() {
@@ -109,61 +109,61 @@ function Ie(x, n) {
     }, get text() {
       return n.text ?? "";
     } };
-  let o = n.text ?? "", i = n.font ?? "Georgia, serif", a = Tt(n.weight ?? 680, 1, 1e3), l = Tt(n.fill ?? 0.9, 0.05, 1), h = Math.max(1, n.sewRate ?? 110), F = n.sewStyle === "hand" ? "hand" : "machine", S = n.sheen ?? !0, P = n.animate ?? !0, s = n.editable ?? !1, m = n.pitch, k = n.onTextChange, j = ce(i);
+  let o = n.text ?? "", a = n.font ?? "Georgia, serif", l = Tt(n.weight ?? 680, 1, 1e3), s = Tt(n.fill ?? 0.9, 0.05, 1), x = Math.max(1, n.sewRate ?? 110), F = n.sewStyle === "hand" ? "hand" : "machine", S = n.sheen ?? !0, P = n.animate ?? !0, f = n.editable ?? !1, y = n.pitch, k = n.onTextChange, j = se(a);
   const yt = n.reducedMotion ?? !!(window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches);
-  let B = le(n.threadColor ?? "#fffbf3", [255, 251, 243]), st = [0, 0, 0], D = [0, 0, 0];
+  let B = le(n.threadColor ?? "#fffbf3", [255, 251, 243]), ct = [0, 0, 0], D = [0, 0, 0];
   function ft(t) {
-    B = le(t, [255, 251, 243]), st = [B[0] * 0.585, B[1] * 0.585, B[2] * 0.585], D = [B[0] * 0.47, B[1] * 0.47, B[2] * 0.47];
+    B = le(t, [255, 251, 243]), ct = [B[0] * 0.585, B[1] * 0.585, B[2] * 0.585], D = [B[0] * 0.47, B[1] * 0.47, B[2] * 0.47];
   }
   ft(n.threadColor ?? "#fffbf3");
   const G = [];
-  let O, R;
-  x instanceof HTMLCanvasElement ? (O = x, R = x.parentElement ?? x) : (R = x, O = document.createElement("canvas"), G.push(O), R.appendChild(O)), O.classList.add(Dt.bg);
+  let O, $;
+  g instanceof HTMLCanvasElement ? (O = g, $ = g.parentElement ?? g) : ($ = g, O = document.createElement("canvas"), G.push(O), $.appendChild(O)), O.classList.add(Dt.bg);
   const z = document.createElement("canvas");
-  G.push(z), z.classList.add(Dt.fx), R.appendChild(z), getComputedStyle(R).position === "static" && (R.style.position = "relative"), O.style.display = "block", O.style.width = "100%", Object.assign(z.style, { position: "absolute", inset: "0", width: "100%", pointerEvents: "none", mixBlendMode: "screen" });
-  let v = null, A = null, W = !1, u = 0, p = 0, ot = 0, St = 0, rt = 4, it = [], ut = 0, dt = 0, zt = -1, qt = "", _t = -1, Ut = -1, At = new Uint8Array(0), Ft = new Float32Array(0), gt = new Float32Array(0), pt = new Float32Array(0), J = null, at = null, wt = null, ht = [], tt = 3;
-  const $ = { rows: [], idx: 0, acc: 0, rate: 0, on: !1 }, K = { x: 0, y: 0, set: !1 };
+  G.push(z), z.classList.add(Dt.fx), $.appendChild(z), getComputedStyle($).position === "static" && ($.style.position = "relative"), O.style.display = "block", O.style.width = "100%", Object.assign(z.style, { position: "absolute", inset: "0", width: "100%", pointerEvents: "none", mixBlendMode: "screen" });
+  let b = null, A = null, W = !1, u = 0, w = 0, ot = 0, St = 0, rt = 4, it = [], ut = 0, dt = 0, zt = -1, qt = "", _t = -1, Ut = -1, At = new Uint8Array(0), Ft = new Float32Array(0), gt = new Float32Array(0), pt = new Float32Array(0), J = null, at = null, wt = null, ht = [], tt = 3;
+  const I = { rows: [], idx: 0, acc: 0, rate: 0, on: !1 }, K = { x: 0, y: 0, set: !1 };
   let et = !0, Lt = 0, mt = !1, xt = 0, q = !1, Q = !1;
-  function se() {
-    const t = R.getBoundingClientRect(), e = Math.max(1, Math.round(t.width || Math.min(window.innerWidth * 0.95, 1240))), r = o || "Ag", f = O.getContext("2d");
-    f && (f.textBaseline = "middle");
-    let C = 100;
-    f && (f.font = `${a} 100px ${i}`, C = f.measureText(r).width || 100);
-    const y = Math.max(8, 100 * (e * l) / C);
-    let g = y * 0.62, T = y * 0.62, b = e * l;
-    if (f) {
-      f.font = `${a} ${y}px ${i}`;
-      const w = f.measureText(r);
-      b = w.width || b, w.actualBoundingBoxAscent > 0 && (g = w.actualBoundingBoxAscent), w.actualBoundingBoxDescent > 0 && (T = w.actualBoundingBoxDescent);
+  function ce() {
+    const t = $.getBoundingClientRect(), e = Math.max(1, Math.round(t.width || Math.min(window.innerWidth * 0.95, 1240))), r = o || "Ag", d = O.getContext("2d");
+    d && (d.textBaseline = "middle");
+    let T = 100;
+    d && (d.font = `${l} 100px ${a}`, T = d.measureText(r).width || 100);
+    const p = Math.max(8, 100 * (e * s) / T);
+    let h = p * 0.62, M = p * 0.62, C = e * s;
+    if (d) {
+      d.font = `${l} ${p}px ${a}`;
+      const i = d.measureText(r);
+      C = i.width || C, i.actualBoundingBoxAscent > 0 && (h = i.actualBoundingBoxAscent), i.actualBoundingBoxDescent > 0 && (M = i.actualBoundingBoxDescent);
     }
-    const d = Math.max(1, Math.round(2 * Math.max(g, T) * 1.1));
+    const m = Math.max(1, Math.round(2 * Math.max(h, M) * 1.1));
     let c = Math.min(window.devicePixelRatio || 1, 1.7);
-    for (; e * c * d * c > 9e5 && c > 0.4; ) c -= 0.1;
-    u = Math.max(1, Math.round(e * c)), p = Math.max(1, Math.round(d * c)), ot = Math.max(4, Math.round(y * c)), St = Math.round(u / 2 - b * c / 2);
-    for (const w of [O, z])
-      w.width = u, w.height = p, w.style.height = d + "px";
-    R.style.height = d + "px", rt = m ?? Math.max(3, p * 95e-4);
+    for (; e * c * m * c > 9e5 && c > 0.4; ) c -= 0.1;
+    u = Math.max(1, Math.round(e * c)), w = Math.max(1, Math.round(m * c)), ot = Math.max(4, Math.round(p * c)), St = Math.round(u / 2 - C * c / 2);
+    for (const i of [O, z])
+      i.width = u, i.height = w, i.style.height = m + "px";
+    $.style.height = m + "px", rt = y ?? Math.max(3, w * 95e-4);
   }
   function fe() {
-    at && _t === u && Ut === p || (at = document.createElement("canvas"), at.width = u, at.height = p, wt = at.getContext("2d", { willReadFrequently: !0 }), _t = u, Ut = p);
+    at && _t === u && Ut === w || (at = document.createElement("canvas"), at.width = u, at.height = w, wt = at.getContext("2d", { willReadFrequently: !0 }), _t = u, Ut = w);
   }
   function Xt() {
     const t = Math.max(7, rt * 2.5), e = Math.max(3.2, rt * 1.3);
     ut = Math.ceil(t) + 2, dt = Math.ceil(e) + 2, it = [];
     for (let r = 0; r < 20; r++) {
-      const f = 0.34 + r / 19 * 0.82, C = document.createElement("canvas");
-      C.width = ut, C.height = dt;
-      const y = C.getContext("2d");
-      if (!y) {
-        it.push(C);
+      const d = 0.34 + r / 19 * 0.82, T = document.createElement("canvas");
+      T.width = ut, T.height = dt;
+      const p = T.getContext("2d");
+      if (!p) {
+        it.push(T);
         continue;
       }
-      const g = ut / 2, T = dt / 2, b = y.createLinearGradient(0, T - e / 2, 0, T + e / 2), d = (I, N) => `rgba(${H(I[0] * f)},${H(I[1] * f)},${H(I[2] * f)},${N})`;
-      b.addColorStop(0, d(D, 0)), b.addColorStop(0.16, d(st, 1)), b.addColorStop(0.5, d(B, 1)), b.addColorStop(0.84, d(st, 1)), b.addColorStop(1, d(D, 0)), y.fillStyle = b, y.beginPath();
+      const h = ut / 2, M = dt / 2, C = p.createLinearGradient(0, M - e / 2, 0, M + e / 2), m = (L, N) => `rgba(${H(L[0] * d)},${H(L[1] * d)},${H(L[2] * d)},${N})`;
+      C.addColorStop(0, m(D, 0)), C.addColorStop(0.16, m(ct, 1)), C.addColorStop(0.5, m(B, 1)), C.addColorStop(0.84, m(ct, 1)), C.addColorStop(1, m(D, 0)), p.fillStyle = C, p.beginPath();
       const c = e / 2;
-      y.moveTo(g - t / 2 + c, T - c), y.lineTo(g + t / 2 - c, T - c), y.arc(g + t / 2 - c, T, c, -Math.PI / 2, Math.PI / 2), y.lineTo(g - t / 2 + c, T + c), y.arc(g - t / 2 + c, T, c, Math.PI / 2, -Math.PI / 2), y.closePath(), y.fill(), y.globalCompositeOperation = "destination-in";
-      const w = y.createLinearGradient(g - t / 2, 0, g + t / 2, 0);
-      w.addColorStop(0, "rgba(0,0,0,0)"), w.addColorStop(0.22, "rgba(0,0,0,1)"), w.addColorStop(0.78, "rgba(0,0,0,1)"), w.addColorStop(1, "rgba(0,0,0,0)"), y.fillStyle = w, y.fillRect(0, 0, ut, dt), it.push(C);
+      p.moveTo(h - t / 2 + c, M - c), p.lineTo(h + t / 2 - c, M - c), p.arc(h + t / 2 - c, M, c, -Math.PI / 2, Math.PI / 2), p.lineTo(h - t / 2 + c, M + c), p.arc(h - t / 2 + c, M, c, Math.PI / 2, -Math.PI / 2), p.closePath(), p.fill(), p.globalCompositeOperation = "destination-in";
+      const i = p.createLinearGradient(h - t / 2, 0, h + t / 2, 0);
+      i.addColorStop(0, "rgba(0,0,0,0)"), i.addColorStop(0.22, "rgba(0,0,0,1)"), i.addColorStop(0.78, "rgba(0,0,0,1)"), i.addColorStop(1, "rgba(0,0,0,0)"), p.fillStyle = i, p.fillRect(0, 0, ut, dt), it.push(T);
     }
     zt = rt, qt = B.join(",");
   }
@@ -173,68 +173,68 @@ function Ie(x, n) {
   function de() {
     if (!wt) return;
     const t = wt;
-    t.clearRect(0, 0, u, p), t.fillStyle = "#fff", t.textAlign = "left", t.textBaseline = "middle", t.font = `${a} ${ot}px ${i}`, t.fillText(o, St, p * 0.5);
-    const e = t.getImageData(0, 0, u, p).data, r = new Uint8Array(u * p);
-    for (let M = 0; M < p; M++) for (let E = 0; E < u; E++) {
-      const L = M * u + E, U = e[L * 4 + 3] / 255, X = re(E * 0.5, M * 0.5) * 0.22 + re(E * 1.8, M * 1.8) * 0.1;
-      r[L] = U > 0.5 + (X - 0.16) ? 1 : 0;
+    t.clearRect(0, 0, u, w), t.fillStyle = "#fff", t.textAlign = "left", t.textBaseline = "middle", t.font = `${l} ${ot}px ${a}`, t.fillText(o, St, w * 0.5);
+    const e = t.getImageData(0, 0, u, w).data, r = new Uint8Array(u * w);
+    for (let v = 0; v < w; v++) for (let E = 0; E < u; E++) {
+      const R = v * u + E, U = e[R * 4 + 3] / 255, X = re(E * 0.5, v * 0.5) * 0.22 + re(E * 1.8, v * 1.8) * 0.1;
+      r[R] = U > 0.5 + (X - 0.16) ? 1 : 0;
     }
     At = r;
-    const f = $e(r, u, p), C = new Float32Array(u * p);
-    for (let M = 1; M < p - 1; M++) for (let E = 1; E < u - 1; E++) {
-      const L = M * u + E;
-      C[L] = (f[L] * 4 + f[L - 1] + f[L + 1] + f[L - u] + f[L + u]) / 8;
+    const d = $e(r, u, w), T = new Float32Array(u * w);
+    for (let v = 1; v < w - 1; v++) for (let E = 1; E < u - 1; E++) {
+      const R = v * u + E;
+      T[R] = (d[R] * 4 + d[R - 1] + d[R + 1] + d[R - u] + d[R + u]) / 8;
     }
-    const y = new Float32Array(u * p), g = new Float32Array(u * p), T = new Float32Array(u * p), b = new Float32Array(u * p);
-    for (let M = 1; M < p - 1; M++) for (let E = 1; E < u - 1; E++) {
-      const L = M * u + E;
-      if (!r[L]) continue;
-      const U = (C[L + 1] - C[L - 1]) * 0.5, X = (C[L + u] - C[L - u]) * 0.5;
-      T[L] = U, b[L] = X, y[L] = U * U - X * X, g[L] = 2 * U * X;
+    const p = new Float32Array(u * w), h = new Float32Array(u * w), M = new Float32Array(u * w), C = new Float32Array(u * w);
+    for (let v = 1; v < w - 1; v++) for (let E = 1; E < u - 1; E++) {
+      const R = v * u + E;
+      if (!r[R]) continue;
+      const U = (T[R + 1] - T[R - 1]) * 0.5, X = (T[R + u] - T[R - u]) * 0.5;
+      M[R] = U, C[R] = X, p[R] = U * U - X * X, h[R] = 2 * U * X;
     }
-    const d = Math.max(7, Math.round(p * 0.05)), c = ae(y, u, p, d, 2), w = ae(g, u, p, d, 2);
-    gt = new Float32Array(u * p), pt = new Float32Array(u * p);
-    for (let M = 0; M < u * p; M++) {
-      if (!r[M]) continue;
-      const E = 0.5 * Math.atan2(w[M], c[M]);
-      gt[M] = Math.cos(E), pt[M] = Math.sin(E);
+    const m = Math.max(7, Math.round(w * 0.05)), c = ae(p, u, w, m, 2), i = ae(h, u, w, m, 2);
+    gt = new Float32Array(u * w), pt = new Float32Array(u * w);
+    for (let v = 0; v < u * w; v++) {
+      if (!r[v]) continue;
+      const E = 0.5 * Math.atan2(i[v], c[v]);
+      gt[v] = Math.cos(E), pt[v] = Math.sin(E);
     }
-    const I = Math.max(9, p * 0.04), N = new Float32Array(u * p), V = -0.45, Z = -0.62, Y = 0.64;
-    for (let M = 1; M < p - 1; M++) for (let E = 1; E < u - 1; E++) {
-      const L = M * u + E;
-      if (!r[L]) continue;
-      let U = T[L], X = b[L];
+    const L = Math.max(9, w * 0.04), N = new Float32Array(u * w), Y = -0.45, Z = -0.62, V = 0.64;
+    for (let v = 1; v < w - 1; v++) for (let E = 1; E < u - 1; E++) {
+      const R = v * u + E;
+      if (!r[R]) continue;
+      let U = M[R], X = C[R];
       const Wt = Math.hypot(U, X) || 1;
       U /= Wt, X /= Wt;
-      const te = C[L], ee = (1 - Math.min(te / I, 1)) * 1.25;
+      const te = T[R], ee = (1 - Math.min(te / L, 1)) * 1.25;
       let Bt = -U * ee, Ot = -X * ee;
       const ne = 1.5, Nt = Math.hypot(Bt, Ot, ne);
       Bt /= Nt, Ot /= Nt;
-      let jt = Bt * V + Ot * Z + ne / Nt * Y;
+      let jt = Bt * Y + Ot * Z + ne / Nt * V;
       jt < 0 && (jt = 0);
-      const Se = Math.min(1, 0.45 + 0.55 * Math.min(te / (I * 0.7), 1));
-      N[L] = Math.min(1.12, (0.5 + 0.75 * jt) * Se);
+      const Se = Math.min(1, 0.45 + 0.55 * Math.min(te / (L * 0.7), 1));
+      N[R] = Math.min(1.12, (0.5 + 0.75 * jt) * Se);
     }
-    Ft = N, J = document.createElement("canvas"), J.width = u, J.height = p;
+    Ft = N, J = document.createElement("canvas"), J.width = u, J.height = w;
     const _ = J.getContext("2d");
     if (_) {
-      const M = _.createImageData(u, p);
-      for (let E = 0; E < u * p; E++) r[E] && (M.data[E * 4] = 255, M.data[E * 4 + 1] = 255, M.data[E * 4 + 2] = 255, M.data[E * 4 + 3] = 255);
-      _.putImageData(M, 0, 0);
+      const v = _.createImageData(u, w);
+      for (let E = 0; E < u * w; E++) r[E] && (v.data[E * 4] = 255, v.data[E * 4 + 1] = 255, v.data[E * 4 + 2] = 255, v.data[E * 4 + 3] = 255);
+      _.putImageData(v, 0, 0);
     }
   }
   function he() {
     const t = Math.max(1.6, rt * 0.6);
     tt = t;
     const e = [];
-    for (let r = 0; r < p; r += t) for (let f = 0; f < u; f += t) {
-      const C = (nt(Math.floor(f), Math.floor(r)) - 0.5) * t * 0.9, y = (nt(Math.floor(r), Math.floor(f)) - 0.5) * t * 0.9, g = Math.round(f + C), T = Math.round(r + y);
-      if (g < 1 || T < 1 || g >= u - 1 || T >= p - 1) continue;
-      const b = T * u + g;
-      if (!At[b]) continue;
-      const d = Math.atan2(pt[b], gt[b]), c = 0.86 + nt(g * 7, T * 13) * 0.18;
-      let w = Ft[b] * c;
-      w = w < 0 ? 0 : w > 1.12 ? 1.12 : w, e.push({ x: g, y: T, ang: d, idx: Math.min(19, Math.max(0, Math.round(w / 1.12 * 19))) });
+    for (let r = 0; r < w; r += t) for (let d = 0; d < u; d += t) {
+      const T = (nt(Math.floor(d), Math.floor(r)) - 0.5) * t * 0.9, p = (nt(Math.floor(r), Math.floor(d)) - 0.5) * t * 0.9, h = Math.round(d + T), M = Math.round(r + p);
+      if (h < 1 || M < 1 || h >= u - 1 || M >= w - 1) continue;
+      const C = M * u + h;
+      if (!At[C]) continue;
+      const m = Math.atan2(pt[C], gt[C]), c = 0.86 + nt(h * 7, M * 13) * 0.18;
+      let i = Ft[C] * c;
+      i = i < 0 ? 0 : i > 1.12 ? 1.12 : i, e.push({ x: h, y: M, ang: m, idx: Math.min(19, Math.max(0, Math.round(i / 1.12 * 19))) });
     }
     ht = e;
   }
@@ -248,152 +248,159 @@ function Ie(x, n) {
   }
   function $t() {
     const t = O.getContext("2d");
-    t && t.clearRect(0, 0, u, p);
+    t && t.clearRect(0, 0, u, w);
   }
   function Kt(t) {
     if (!t.length) return [];
-    const e = Math.max(4, tt * 1.5), r = /* @__PURE__ */ new Map(), f = (d, c) => d + "," + c;
-    t.forEach((d, c) => {
-      const w = f(Math.floor(d.x / e), Math.floor(d.y / e));
-      let I = r.get(w);
-      I || r.set(w, I = []), I.push(c);
+    const e = Math.max(4, tt * 1.5), r = /* @__PURE__ */ new Map(), d = (m, c) => m + "," + c;
+    t.forEach((m, c) => {
+      const i = d(Math.floor(m.x / e), Math.floor(m.y / e));
+      let L = r.get(i);
+      L || r.set(i, L = []), L.push(c);
     });
-    const C = tt * 1.8 * (tt * 1.8);
-    function y(d) {
-      const c = t[d], w = Math.floor(c.x / e), I = Math.floor(c.y / e), N = [];
-      for (let V = -1; V <= 1; V++) for (let Z = -1; Z <= 1; Z++) {
-        const Y = r.get(f(w + V, I + Z));
-        if (Y)
-          for (const _ of Y) {
-            if (_ === d) continue;
-            const M = t[_].x - c.x, E = t[_].y - c.y;
-            M * M + E * E <= C && N.push(_);
+    const T = tt * 1.8 * (tt * 1.8);
+    function p(m) {
+      const c = t[m], i = Math.floor(c.x / e), L = Math.floor(c.y / e), N = [];
+      for (let Y = -1; Y <= 1; Y++) for (let Z = -1; Z <= 1; Z++) {
+        const V = r.get(d(i + Y, L + Z));
+        if (V)
+          for (const _ of V) {
+            if (_ === m) continue;
+            const v = t[_].x - c.x, E = t[_].y - c.y;
+            v * v + E * E <= T && N.push(_);
           }
       }
       return N;
     }
-    const g = new Uint8Array(t.length), T = [], b = t.map((d, c) => c).sort((d, c) => t[d].x + t[d].y - (t[c].x + t[c].y));
-    for (const d of b) {
-      if (g[d]) continue;
-      let c = [d];
-      for (g[d] = 1; c.length; ) {
-        T.push(c.map((I) => t[I]));
-        const w = [];
-        for (const I of c) for (const N of y(I)) g[N] || (g[N] = 1, w.push(N));
-        c = w;
+    const h = new Uint8Array(t.length), M = [], C = t.map((m, c) => c).sort((m, c) => t[m].x + t[m].y - (t[c].x + t[c].y));
+    for (const m of C) {
+      if (h[m]) continue;
+      let c = [m];
+      for (h[m] = 1; c.length; ) {
+        M.push(c.map((L) => t[L]));
+        const i = [];
+        for (const L of c) for (const N of p(L)) h[N] || (h[N] = 1, i.push(N));
+        c = i;
       }
     }
-    return T;
+    return M;
   }
   function me(t) {
-    const e = Math.max(4, tt * 1.5), r = /* @__PURE__ */ new Map(), f = (b, d) => b + "," + d;
-    t.forEach((b, d) => {
-      const c = f(Math.floor(b.x / e), Math.floor(b.y / e));
-      let w = r.get(c);
-      w || r.set(c, w = []), w.push(d);
+    const e = Math.max(4, tt * 1.5), r = /* @__PURE__ */ new Map(), d = (C, m) => C + "," + m;
+    t.forEach((C, m) => {
+      const c = d(Math.floor(C.x / e), Math.floor(C.y / e));
+      let i = r.get(c);
+      i || r.set(c, i = []), i.push(m);
     });
-    const C = tt * 1.8 * (tt * 1.8), y = (b) => {
-      const d = t[b], c = Math.floor(d.x / e), w = Math.floor(d.y / e), I = [];
-      for (let N = -1; N <= 1; N++) for (let V = -1; V <= 1; V++) {
-        const Z = r.get(f(c + N, w + V));
+    const T = tt * 1.8 * (tt * 1.8), p = (C) => {
+      const m = t[C], c = Math.floor(m.x / e), i = Math.floor(m.y / e), L = [];
+      for (let N = -1; N <= 1; N++) for (let Y = -1; Y <= 1; Y++) {
+        const Z = r.get(d(c + N, i + Y));
         if (Z)
-          for (const Y of Z) {
-            if (Y === b) continue;
-            const _ = t[Y].x - d.x, M = t[Y].y - d.y;
-            _ * _ + M * M <= C && I.push(Y);
+          for (const V of Z) {
+            if (V === C) continue;
+            const _ = t[V].x - m.x, v = t[V].y - m.y;
+            _ * _ + v * v <= T && L.push(V);
           }
       }
-      return I;
-    }, g = new Uint8Array(t.length), T = [];
-    for (let b = 0; b < t.length; b++) {
-      if (g[b]) continue;
-      const d = [];
-      let c = [b];
-      for (g[b] = 1; c.length; ) {
-        const w = [];
-        for (const I of c) {
-          d.push(t[I]);
-          for (const N of y(I)) g[N] || (g[N] = 1, w.push(N));
+      return L;
+    }, h = new Uint8Array(t.length), M = [];
+    for (let C = 0; C < t.length; C++) {
+      if (h[C]) continue;
+      const m = [];
+      let c = [C];
+      for (h[C] = 1; c.length; ) {
+        const i = [];
+        for (const L of c) {
+          m.push(t[L]);
+          for (const N of p(L)) h[N] || (h[N] = 1, i.push(N));
         }
-        c = w;
+        c = i;
       }
-      T.push(d);
+      M.push(m);
     }
-    return T;
+    return M;
   }
   function xe(t) {
     if (!t.length) return [];
-    const e = (C) => {
-      let y = 1 / 0;
-      for (const g of C) g.x < y && (y = g.x);
-      return y;
-    }, r = me(t).sort((C, y) => e(C) - e(y)), f = [];
-    for (const C of r) {
-      const y = Kt(C);
-      y.sort((g, T) => T.length - g.length);
-      for (const g of y) f.push(g);
+    const e = (p) => {
+      let h = 1 / 0;
+      for (const M of p) M.x < h && (h = M.x);
+      return h;
+    }, r = (p) => {
+      let h = 0;
+      for (const M of p) h += M.y;
+      return h / p.length;
+    }, d = me(t).sort((p, h) => e(p) - e(h)), T = [];
+    for (const p of d) {
+      const h = Kt(p);
+      let M = 1;
+      for (const i of h) i.length > M && (M = i.length);
+      const C = Math.max(2, M * 0.45), m = h.filter((i) => i.length >= C).sort((i, L) => r(i) - r(L)), c = h.filter((i) => i.length < C).sort((i, L) => r(i) - r(L));
+      for (const i of m) T.push(i);
+      for (const i of c) T.push(i);
     }
-    return f;
+    return T;
   }
   function ye() {
     if ($t(), yt || !P) {
-      Rt(), $.on = !1;
+      Rt(), I.on = !1;
       return;
     }
-    $.rows = F === "hand" ? xe(ht) : Kt(ht), $.idx = 0, $.acc = 0, $.rate = h, $.on = $.rows.length > 0;
+    I.rows = F === "hand" ? xe(ht) : Kt(ht), I.idx = 0, I.acc = 0, I.rate = x, I.on = I.rows.length > 0;
   }
   function ge(t) {
     const e = O.getContext("2d");
     if (e)
-      for (t > $.rows.length && (t = $.rows.length); $.idx < t; ) {
-        const r = $.rows[$.idx++];
-        for (const f of r) Gt(e, f);
+      for (t > I.rows.length && (t = I.rows.length); I.idx < t; ) {
+        const r = I.rows[I.idx++];
+        for (const d of r) Gt(e, d);
       }
   }
   function pe(t, e) {
     const r = z.getContext("2d");
-    if (!r || (r.clearRect(0, 0, u, p), !S || !J)) return;
-    const f = u * 0.32, C = r.createRadialGradient(t, e, 0, t, e, f);
-    C.addColorStop(0, "rgba(255,250,238,0.18)"), C.addColorStop(0.5, "rgba(255,250,238,0.055)"), C.addColorStop(1, "rgba(255,250,238,0)"), r.fillStyle = C, r.fillRect(0, 0, u, p), r.globalCompositeOperation = "destination-in", r.drawImage(J, 0, 0), r.globalCompositeOperation = "source-over";
+    if (!r || (r.clearRect(0, 0, u, w), !S || !J)) return;
+    const d = u * 0.32, T = r.createRadialGradient(t, e, 0, t, e, d);
+    T.addColorStop(0, "rgba(255,250,238,0.18)"), T.addColorStop(0.5, "rgba(255,250,238,0.055)"), T.addColorStop(1, "rgba(255,250,238,0)"), r.fillStyle = T, r.fillRect(0, 0, u, w), r.globalCompositeOperation = "destination-in", r.drawImage(J, 0, 0), r.globalCompositeOperation = "source-over";
   }
   function we() {
-    A || !s || (A = document.createElement("span"), A.className = Dt.caret, A.setAttribute("aria-hidden", "true"), Object.assign(A.style, { position: "absolute", pointerEvents: "none", borderRadius: "1px", opacity: "0", background: `rgb(${H(B[0])},${H(B[1])},${H(B[2])})` }), R.appendChild(A), G.push(A));
+    A || !f || (A = document.createElement("span"), A.className = Dt.caret, A.setAttribute("aria-hidden", "true"), Object.assign(A.style, { position: "absolute", pointerEvents: "none", borderRadius: "1px", opacity: "0", background: `rgb(${H(B[0])},${H(B[1])},${H(B[2])})` }), $.appendChild(A), G.push(A));
   }
   function It() {
-    if (!s || !A) return;
+    if (!f || !A) return;
     const t = O.getContext("2d");
     if (!t) return;
-    t.font = `${a} ${ot}px ${i}`;
-    const e = t.measureText(o).width, r = (O.clientWidth || u) / u, f = ot * 0.7;
-    A.style.left = (St + e + ot * 0.05) * r + "px", A.style.top = 0.5 * (O.clientHeight || p) - f * r / 2 + "px", A.style.height = f * r + "px", A.style.width = Math.max(2, Math.round(ot * 0.02 * r)) + "px", A.style.background = `rgb(${H(B[0])},${H(B[1])},${H(B[2])})`;
+    t.font = `${l} ${ot}px ${a}`;
+    const e = t.measureText(o).width, r = (O.clientWidth || u) / u, d = ot * 0.7;
+    A.style.left = (St + e + ot * 0.05) * r + "px", A.style.top = 0.5 * (O.clientHeight || w) - d * r / 2 + "px", A.style.height = d * r + "px", A.style.width = Math.max(2, Math.round(ot * 0.02 * r)) + "px", A.style.background = `rgb(${H(B[0])},${H(B[1])},${H(B[2])})`;
   }
   function lt() {
-    q || mt || (mt = !0, xt = 0, Lt = requestAnimationFrame(Vt));
+    q || mt || (mt = !0, xt = 0, Lt = requestAnimationFrame(Yt));
   }
-  function Vt(t) {
+  function Yt(t) {
     if (q) {
       mt = !1;
       return;
     }
     xt || (xt = t);
     const e = Math.min(0.25, (t - xt) / 1e3);
-    xt = t, $.on && ($.acc += $.rate * e, ge($.acc), $.idx >= $.rows.length && ($.on = !1)), et && J && (pe(K.set ? K.x : u * 0.5, K.set ? K.y : p * 0.45), et = !1);
-    const r = s && W;
-    if (A && (A.style.opacity = r && Math.floor(t / 530) % 2 === 0 ? "1" : "0"), !$.on && !et && !r) {
+    xt = t, I.on && (I.acc += I.rate * e, ge(I.acc), I.idx >= I.rows.length && (I.on = !1)), et && J && (pe(K.set ? K.x : u * 0.5, K.set ? K.y : w * 0.45), et = !1);
+    const r = f && W;
+    if (A && (A.style.opacity = r && Math.floor(t / 530) % 2 === 0 ? "1" : "0"), !I.on && !et && !r) {
       mt = !1;
       return;
     }
-    Lt = requestAnimationFrame(Vt);
+    Lt = requestAnimationFrame(Yt);
   }
   function Mt(t) {
-    const e = R.getBoundingClientRect();
-    K.x = (t.clientX - e.left) / (e.width || 1) * u, K.y = (t.clientY - e.top) / (e.height || 1) * p, K.set = !0, et = !0, lt();
+    const e = $.getBoundingClientRect();
+    K.x = (t.clientX - e.left) / (e.width || 1) * u, K.y = (t.clientY - e.top) / (e.height || 1) * w, K.set = !0, et = !0, lt();
   }
   function Ct() {
     K.set = !1, et = !0, lt();
   }
   function Me() {
-    v && Ht(v.value, !0);
+    b && Ht(b.value, !0);
   }
   function Ce(t) {
     t.key === "Enter" && (t.preventDefault(), kt.replay());
@@ -404,54 +411,54 @@ function Ie(x, n) {
   function be() {
     W = !1, A && (A.style.opacity = "0");
   }
-  function Yt(t) {
-    t === s && v || (s = t, t ? (v || (v = document.createElement("input"), v.type = "text", v.value = o, v.maxLength = 64, v.setAttribute("aria-label", "Embroidered text — type to change it"), v.setAttribute("autocomplete", "off"), v.setAttribute("autocapitalize", "off"), v.spellcheck = !1, Object.assign(v.style, { position: "absolute", inset: "0", width: "100%", height: "100%", margin: "0", padding: "0", border: "0", outline: "none", background: "transparent", color: "transparent", caretColor: "transparent", font: "inherit", textAlign: "center", cursor: "text" }), v.addEventListener("input", Me), v.addEventListener("keydown", Ce), v.addEventListener("focus", ve), v.addEventListener("blur", be), R.appendChild(v), G.push(v)), we(), It()) : (v && (v.remove(), v = null), W = !1, A && (A.style.opacity = "0")));
+  function Vt(t) {
+    t === f && b || (f = t, t ? (b || (b = document.createElement("input"), b.type = "text", b.value = o, b.maxLength = 64, b.setAttribute("aria-label", "Embroidered text — type to change it"), b.setAttribute("autocomplete", "off"), b.setAttribute("autocapitalize", "off"), b.spellcheck = !1, Object.assign(b.style, { position: "absolute", inset: "0", width: "100%", height: "100%", margin: "0", padding: "0", border: "0", outline: "none", background: "transparent", color: "transparent", caretColor: "transparent", font: "inherit", textAlign: "center", cursor: "text" }), b.addEventListener("input", Me), b.addEventListener("keydown", Ce), b.addEventListener("focus", ve), b.addEventListener("blur", be), $.appendChild(b), G.push(b)), we(), It()) : (b && (b.remove(), b = null), W = !1, A && (A.style.opacity = "0")));
   }
   function Te(t) {
     if (t !== S)
       if (S = t, t)
-        R.addEventListener("pointermove", Mt, { passive: !0 }), R.addEventListener("pointerleave", Ct, { passive: !0 }), K.set = !1, et = !0, lt();
+        $.addEventListener("pointermove", Mt, { passive: !0 }), $.addEventListener("pointerleave", Ct, { passive: !0 }), K.set = !1, et = !0, lt();
       else {
-        R.removeEventListener("pointermove", Mt), R.removeEventListener("pointerleave", Ct);
+        $.removeEventListener("pointermove", Mt), $.removeEventListener("pointerleave", Ct);
         const e = z.getContext("2d");
-        e && e.clearRect(0, 0, u, p);
+        e && e.clearRect(0, 0, u, w);
       }
   }
-  function ct(t) {
-    se(), fe(), ue(), de(), he(), t ? ye() : ($t(), Rt(), $.on = !1), v && v.value !== o && (v.value = o), It(), et = !0, lt();
+  function st(t) {
+    ce(), fe(), ue(), de(), he(), t ? ye() : ($t(), Rt(), I.on = !1), b && b.value !== o && (b.value = o), It(), et = !0, lt();
   }
   function Ht(t, e) {
-    t = t ?? "", !(t === o && Q) && (o = t, Q && (ct(!1), e && k && k(o)));
+    t = t ?? "", !(t === o && Q) && (o = t, Q && (st(!1), e && k && k(o)));
   }
   const vt = /* @__PURE__ */ new Set();
   function Jt(t, e, r) {
-    const f = `${e} 200px ${t}`;
-    let C = !1;
+    const d = `${e} 200px ${t}`;
+    let T = !1;
     try {
-      C = !!document.fonts && document.fonts.check(f);
+      T = !!document.fonts && document.fonts.check(d);
     } catch {
-      C = !0;
+      T = !0;
     }
-    if (!document.fonts || C) {
+    if (!document.fonts || T) {
       r();
       return;
     }
-    let y = !1, g;
-    const T = () => {
-      y || (y = !0, clearTimeout(g), vt.delete(g), q || r());
+    let p = !1, h;
+    const M = () => {
+      p || (p = !0, clearTimeout(h), vt.delete(h), q || r());
     };
-    document.fonts.load(f, o).then(() => document.fonts.ready).then(T, T), g = setTimeout(T, 1500), vt.add(g);
+    document.fonts.load(d, o).then(() => document.fonts.ready).then(M, M), h = setTimeout(M, 1500), vt.add(h);
   }
   function Ee() {
-    q || (ct(!0), Q = !0);
+    q || (st(!0), Q = !0);
   }
-  s && (s = !1, Yt(!0)), S && (R.addEventListener("pointermove", Mt, { passive: !0 }), R.addEventListener("pointerleave", Ct, { passive: !0 })), Jt(j, a, Ee);
+  f && (f = !1, Vt(!0)), S && ($.addEventListener("pointermove", Mt, { passive: !0 }), $.addEventListener("pointerleave", Ct, { passive: !0 })), Jt(j, l, Ee);
   let Pt, Qt = -1;
   function Zt() {
     clearTimeout(Pt), Pt = setTimeout(() => {
       if (q || !Q) return;
-      const t = Math.round(R.getBoundingClientRect().width);
-      t !== Qt && (Qt = t, ct(!1));
+      const t = Math.round($.getBoundingClientRect().width);
+      t !== Qt && (Qt = t, st(!1));
     }, 200);
   }
   window.addEventListener("resize", Zt);
@@ -462,72 +469,72 @@ function Ie(x, n) {
     setText(t) {
       if (!q) {
         if (!Q) {
-          o = t ?? "", v && (v.value = o);
+          o = t ?? "", b && (b.value = o);
           return;
         }
         Ht(t, !1);
       }
     },
     replay() {
-      q || !Q || ct(!0);
+      q || !Q || st(!0);
     },
     resize() {
-      q || !Q || ct(!1);
+      q || !Q || st(!1);
     },
     update(t) {
       if (q) return;
       t.text !== void 0 && kt.setText(t.text);
       let e = !1, r = !1;
-      if (t.font !== void 0 && t.font !== i && (i = t.font, j = ce(i), e = !0), t.weight !== void 0) {
-        const f = Tt(t.weight, 1, 1e3);
-        f !== a && (a = f, e = !0);
+      if (t.font !== void 0 && t.font !== a && (a = t.font, j = se(a), e = !0), t.weight !== void 0) {
+        const d = Tt(t.weight, 1, 1e3);
+        d !== l && (l = d, e = !0);
       }
       if (t.fill !== void 0) {
-        const f = Tt(t.fill, 0.05, 1);
-        f !== l && (l = f, e = !0);
+        const d = Tt(t.fill, 0.05, 1);
+        d !== s && (s = d, e = !0);
       }
-      t.pitch !== void 0 && t.pitch !== m && (m = t.pitch, e = !0), t.threadColor !== void 0 && (ft(t.threadColor), r = !0), t.sewRate !== void 0 && (h = Math.max(1, t.sewRate)), t.sewStyle !== void 0 && (F = t.sewStyle === "hand" ? "hand" : "machine"), t.animate !== void 0 && (P = t.animate), t.onTextChange !== void 0 && (k = t.onTextChange), t.sheen !== void 0 && Te(t.sheen), t.editable !== void 0 && Yt(t.editable), Q && (e ? Jt(j, a, () => {
-        q || ct(!1);
+      t.pitch !== void 0 && t.pitch !== y && (y = t.pitch, e = !0), t.threadColor !== void 0 && (ft(t.threadColor), r = !0), t.sewRate !== void 0 && (x = Math.max(1, t.sewRate)), t.sewStyle !== void 0 && (F = t.sewStyle === "hand" ? "hand" : "machine"), t.animate !== void 0 && (P = t.animate), t.onTextChange !== void 0 && (k = t.onTextChange), t.sheen !== void 0 && Te(t.sheen), t.editable !== void 0 && Vt(t.editable), Q && (e ? Jt(j, l, () => {
+        q || st(!1);
       }) : r && (Xt(), $t(), Rt(), It(), lt()));
     },
     focus() {
-      !q && s && (v == null || v.focus());
+      !q && f && (b == null || b.focus());
     },
     destroy() {
       if (!q) {
         q = !0, mt = !1, cancelAnimationFrame(Lt), clearTimeout(Pt);
         for (const t of vt) clearTimeout(t);
-        vt.clear(), window.removeEventListener("resize", Zt), R.removeEventListener("pointermove", Mt), R.removeEventListener("pointerleave", Ct);
+        vt.clear(), window.removeEventListener("resize", Zt), $.removeEventListener("pointermove", Mt), $.removeEventListener("pointerleave", Ct);
         for (const t of G) t.remove();
-        it = [], ht = [], $.rows = [], At = new Uint8Array(0), Ft = new Float32Array(0), gt = new Float32Array(0), pt = new Float32Array(0), J = at = null, wt = null, A = null, v = null;
+        it = [], ht = [], I.rows = [], At = new Uint8Array(0), Ft = new Float32Array(0), gt = new Float32Array(0), pt = new Float32Array(0), J = at = null, wt = null, A = null, b = null;
       }
     }
   };
   return kt;
 }
-function Pe(x) {
-  const n = bt(null), o = bt(null), i = bt(x);
-  i.current = x;
-  const a = bt(x.onTextChange);
-  a.current = x.onTextChange;
-  const { text: l, font: h, weight: F, threadColor: S, pitch: P, fill: s, animate: m, sewStyle: k, sewRate: j, sheen: yt, editable: B, reducedMotion: st } = x;
+function Pe(g) {
+  const n = bt(null), o = bt(null), a = bt(g);
+  a.current = g;
+  const l = bt(g.onTextChange);
+  l.current = g.onTextChange;
+  const { text: s, font: x, weight: F, threadColor: S, pitch: P, fill: f, animate: y, sewStyle: k, sewRate: j, sheen: yt, editable: B, reducedMotion: ct } = g;
   return Ae(() => {
     const D = n.current;
     if (!D) return;
     const ft = Ie(D, {
-      ...i.current,
+      ...a.current,
       // Stable callback wrapper so typing edits always reach the latest handler.
-      onTextChange: (v) => {
+      onTextChange: (b) => {
         var A;
-        return (A = a.current) == null ? void 0 : A.call(a, v);
+        return (A = l.current) == null ? void 0 : A.call(l, b);
       }
     });
     o.current = ft;
-    let G = 0, O = 0, R = !0, z;
-    return typeof ResizeObserver < "u" && (z = new ResizeObserver((v) => {
-      const A = Math.round(v[0].contentRect.width);
-      if (R) {
-        R = !1, O = A;
+    let G = 0, O = 0, $ = !0, z;
+    return typeof ResizeObserver < "u" && (z = new ResizeObserver((b) => {
+      const A = Math.round(b[0].contentRect.width);
+      if ($) {
+        $ = !1, O = A;
         return;
       }
       A !== O && (O = A, cancelAnimationFrame(G), G = requestAnimationFrame(() => {
@@ -537,32 +544,32 @@ function Pe(x) {
     }), z.observe(D)), () => {
       z == null || z.disconnect(), cancelAnimationFrame(G), ft.destroy(), o.current = null;
     };
-  }, [st]), oe(() => {
+  }, [ct]), oe(() => {
     var D;
-    (D = o.current) == null || D.update({ font: h, weight: F, threadColor: S, pitch: P, fill: s, animate: m, sewStyle: k, sewRate: j, sheen: yt, editable: B });
-  }, [h, F, S, P, s, m, k, j, yt, B]), oe(() => {
+    (D = o.current) == null || D.update({ font: x, weight: F, threadColor: S, pitch: P, fill: f, animate: y, sewStyle: k, sewRate: j, sheen: yt, editable: B });
+  }, [x, F, S, P, f, y, k, j, yt, B]), oe(() => {
     var D;
-    (D = o.current) == null || D.setText(l);
-  }, [l]), n;
+    (D = o.current) == null || D.setText(s);
+  }, [s]), n;
 }
 const ke = Fe(
-  function({ className: n, style: o, as: i = "div", "aria-label": a, role: l, "aria-describedby": h, ...F }, S) {
-    const P = Pe(F), s = Le(
-      (m) => {
-        P.current = m, typeof S == "function" ? S(m) : S && (S.current = m);
+  function({ className: n, style: o, as: a = "div", "aria-label": l, role: s, "aria-describedby": x, ...F }, S) {
+    const P = Pe(F), f = Le(
+      (y) => {
+        P.current = y, typeof S == "function" ? S(y) : S && (S.current = y);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [P, S]
     );
     return /* @__PURE__ */ Re(
-      i,
+      a,
       {
-        ref: s,
+        ref: f,
         className: n,
         style: o,
-        role: F.editable ? l : l ?? "img",
-        "aria-label": F.editable ? a : a ?? F.text,
-        "aria-describedby": h
+        role: F.editable ? s : s ?? "img",
+        "aria-label": F.editable ? l : l ?? F.text,
+        "aria-describedby": x
       }
     );
   }

package/dist/threadtext.webflow.min.js

@@ -1 +1 @@
-var ThreadText=(function(ut){"use strict";const St={bg:"tt-bg",fx:"tt-fx",caret:"tt-caret"};function J(a,n){let e=Math.imul(a|0,374761393)+Math.imul(n|0,668265263)|0;return e=Math.imul(e^e>>>13,1274126177),((e^e>>>16)>>>0)/4294967295}function _t(a,n){const e=Math.floor(a),o=Math.floor(n),i=a-e,d=n-o,p=i*i*(3-2*i),$=d*d*(3-2*d),N=J(e,o),O=J(e+1,o),u=J(e,o+1),v=J(e+1,o+1);return N+(O-N)*p+(u-N)*$+(N-O-u+v)*p*$}const ht=1e20;function qt(a,n,e,o,i){let d=0;o[0]=0,i[0]=-ht,i[1]=ht;for(let p=1;p<n;p++){let $=(a[p]+p*p-(a[o[d]]+o[d]*o[d]))/(2*p-2*o[d]);for(;$<=i[d];)d--,$=(a[p]+p*p-(a[o[d]]+o[d]*o[d]))/(2*p-2*o[d]);d++,o[d]=p,i[d]=$,i[d+1]=ht}d=0;for(let p=0;p<n;p++){for(;i[d+1]<p;)d++;e[p]=(p-o[d])*(p-o[d])+a[o[d]]}}function fe(a,n,e){const o=new Float64Array(n*e);for(let u=0;u<n*e;u++)o[u]=a[u]?ht:0;const i=Math.max(n,e),d=new Float64Array(i),p=new Float64Array(i),$=new Int32Array(i),N=new Float64Array(i+1);for(let u=0;u<n;u++){for(let v=0;v<e;v++)d[v]=o[v*n+u];qt(d,e,p,$,N);for(let v=0;v<e;v++)o[v*n+u]=p[v]}for(let u=0;u<e;u++){for(let v=0;v<n;v++)d[v]=o[u*n+v];qt(d,n,p,$,N);for(let v=0;v<n;v++)o[u*n+v]=p[v]}const O=new Float32Array(n*e);for(let u=0;u<n*e;u++)O[u]=Math.sqrt(o[u]);return O}function zt(a,n,e,o,i){let d=Float32Array.from(a);const p=new Float32Array(n*e),$=1/(2*o+1),N=(O,u)=>O<0?0:O>u?u:O;for(let O=0;O<i;O++){for(let u=0;u<e;u++){const v=u*n;let P=0;for(let D=-o;D<=o;D++)P+=d[v+N(D,n-1)];for(let D=0;D<n;D++)p[v+D]=P*$,P+=d[v+N(D+o+1,n-1)]-d[v+N(D-o,n-1)]}for(let u=0;u<n;u++){let v=0;for(let P=-o;P<=o;P++)v+=p[N(P,e-1)*n+u];for(let P=0;P<e;P++)d[P*n+u]=v*$,v+=p[N(P+o+1,e-1)*n+u]-p[N(P-o,e-1)*n+u]}}return d}function Ut(a,n){if(!a)return n;const e=a.trim();if(e[0]==="#"){let i=e.slice(1);if(i.length===3&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]),i.length>=6){const d=parseInt(i.slice(0,2),16),p=parseInt(i.slice(2,4),16),$=parseInt(i.slice(4,6),16);if(!Number.isNaN(d)&&!Number.isNaN(p)&&!Number.isNaN($))return[d,p,$]}return n}const o=e.match(/rgba?\(([^)]+)\)/i);if(o){const i=o[1].split(",").map(d=>parseFloat(d));if(i.length>=3&&i.slice(0,3).every(d=>!Number.isNaN(d)))return[Math.round(i[0]),Math.round(i[1]),Math.round(i[2])]}return n}function U(a){return a<0?0:a>255?255:Math.round(a)}function mt(a,n,e){return a<n?n:a>e?e:a}function Xt(a){return(a.split(",")[0]||"serif").trim().replace(/^["']|["']$/g,"")}function de(a,n){if(typeof window>"u"||typeof document>"u"||!a)return{setText(){},replay(){},resize(){},update(){},focus(){},destroy(){},get text(){return n.text??""}};let e=n.text??"",o=n.font??"Georgia, serif",i=mt(n.weight??680,1,1e3),d=mt(n.fill??.9,.05,1),p=Math.max(1,n.sewRate??110),$=n.sewStyle==="hand"?"hand":"machine",N=n.sheen??!0,O=n.animate??!0,u=n.editable??!1,v=n.pitch,P=n.onTextChange,D=Xt(o);const xe=n.reducedMotion??!!(window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches);let k=Ut(n.threadColor??"#fffbf3",[255,251,243]),At=[0,0,0],bt=[0,0,0];function Ht(t){k=Ut(t,[255,251,243]),At=[k[0]*.585,k[1]*.585,k[2]*.585],bt=[k[0]*.47,k[1]*.47,k[2]*.47]}Ht(n.threadColor??"#fffbf3");const at=[];let B,L;a instanceof HTMLCanvasElement?(B=a,L=a.parentElement??a):(L=a,B=document.createElement("canvas"),at.push(B),L.appendChild(B)),B.classList.add(St.bg);const Q=document.createElement("canvas");at.push(Q),Q.classList.add(St.fx),L.appendChild(Q),getComputedStyle(L).position==="static"&&(L.style.position="relative"),B.style.display="block",B.style.width="100%",Object.assign(Q.style,{position:"absolute",inset:"0",width:"100%",pointerEvents:"none",mixBlendMode:"screen"});let S=null,R=null,xt=!1,f=0,x=0,tt=0,Et=0,et=4,nt=[],st=0,lt=0,Kt=-1,Vt="",Yt=-1,Jt=-1,Ft=new Uint8Array(0),Lt=new Float32Array(0),gt=new Float32Array(0),pt=new Float32Array(0),K=null,ot=null,wt=null,ct=[],Z=3;const E={rows:[],idx:0,acc:0,rate:0,on:!1},X={x:0,y:0,set:!1};let W=!0,Rt=0,ft=!1,dt=0,j=!1,V=!1;function ge(){const t=L.getBoundingClientRect(),r=Math.max(1,Math.round(t.width||Math.min(window.innerWidth*.95,1240))),s=e||"Ag",c=B.getContext("2d");c&&(c.textBaseline="middle");let M=100;c&&(c.font=`${i} 100px ${o}`,M=c.measureText(s).width||100);const m=Math.max(8,100*(r*d)/M);let y=m*.62,T=m*.62,C=r*d;if(c){c.font=`${i} ${m}px ${o}`;const g=c.measureText(s);C=g.width||C,g.actualBoundingBoxAscent>0&&(y=g.actualBoundingBoxAscent),g.actualBoundingBoxDescent>0&&(T=g.actualBoundingBoxDescent)}const h=Math.max(1,Math.round(2*Math.max(y,T)*1.1));let l=Math.min(window.devicePixelRatio||1,1.7);for(;r*l*h*l>9e5&&l>.4;)l-=.1;f=Math.max(1,Math.round(r*l)),x=Math.max(1,Math.round(h*l)),tt=Math.max(4,Math.round(m*l)),Et=Math.round(f/2-C*l/2);for(const g of[B,Q])g.width=f,g.height=x,g.style.height=h+"px";L.style.height=h+"px",et=v??Math.max(3,x*.0095)}function pe(){ot&&Yt===f&&Jt===x||(ot=document.createElement("canvas"),ot.width=f,ot.height=x,wt=ot.getContext("2d",{willReadFrequently:!0}),Yt=f,Jt=x)}function Qt(){const t=Math.max(7,et*2.5),r=Math.max(3.2,et*1.3);st=Math.ceil(t)+2,lt=Math.ceil(r)+2,nt=[];for(let s=0;s<20;s++){const c=.34+s/19*.82,M=document.createElement("canvas");M.width=st,M.height=lt;const m=M.getContext("2d");if(!m){nt.push(M);continue}const y=st/2,T=lt/2,C=m.createLinearGradient(0,T-r/2,0,T+r/2),h=(F,I)=>`rgba(${U(F[0]*c)},${U(F[1]*c)},${U(F[2]*c)},${I})`;C.addColorStop(0,h(bt,0)),C.addColorStop(.16,h(At,1)),C.addColorStop(.5,h(k,1)),C.addColorStop(.84,h(At,1)),C.addColorStop(1,h(bt,0)),m.fillStyle=C,m.beginPath();const l=r/2;m.moveTo(y-t/2+l,T-l),m.lineTo(y+t/2-l,T-l),m.arc(y+t/2-l,T,l,-Math.PI/2,Math.PI/2),m.lineTo(y-t/2+l,T+l),m.arc(y-t/2+l,T,l,Math.PI/2,-Math.PI/2),m.closePath(),m.fill(),m.globalCompositeOperation="destination-in";const g=m.createLinearGradient(y-t/2,0,y+t/2,0);g.addColorStop(0,"rgba(0,0,0,0)"),g.addColorStop(.22,"rgba(0,0,0,1)"),g.addColorStop(.78,"rgba(0,0,0,1)"),g.addColorStop(1,"rgba(0,0,0,0)"),m.fillStyle=g,m.fillRect(0,0,st,lt),nt.push(M)}Kt=et,Vt=k.join(",")}function we(){nt.length&&Kt===et&&Vt===k.join(",")||Qt()}function Me(){if(!wt)return;const t=wt;t.clearRect(0,0,f,x),t.fillStyle="#fff",t.textAlign="left",t.textBaseline="middle",t.font=`${i} ${tt}px ${o}`,t.fillText(e,Et,x*.5);const r=t.getImageData(0,0,f,x).data,s=new Uint8Array(f*x);for(let w=0;w<x;w++)for(let A=0;A<f;A++){const b=w*f+A,q=r[b*4+3]/255,z=_t(A*.5,w*.5)*.22+_t(A*1.8,w*1.8)*.1;s[b]=q>.5+(z-.16)?1:0}Ft=s;const c=fe(s,f,x),M=new Float32Array(f*x);for(let w=1;w<x-1;w++)for(let A=1;A<f-1;A++){const b=w*f+A;M[b]=(c[b]*4+c[b-1]+c[b+1]+c[b-f]+c[b+f])/8}const m=new Float32Array(f*x),y=new Float32Array(f*x),T=new Float32Array(f*x),C=new Float32Array(f*x);for(let w=1;w<x-1;w++)for(let A=1;A<f-1;A++){const b=w*f+A;if(!s[b])continue;const q=(M[b+1]-M[b-1])*.5,z=(M[b+f]-M[b-f])*.5;T[b]=q,C[b]=z,m[b]=q*q-z*z,y[b]=2*q*z}const h=Math.max(7,Math.round(x*.05)),l=zt(m,f,x,h,2),g=zt(y,f,x,h,2);gt=new Float32Array(f*x),pt=new Float32Array(f*x);for(let w=0;w<f*x;w++){if(!s[w])continue;const A=.5*Math.atan2(g[w],l[w]);gt[w]=Math.cos(A),pt[w]=Math.sin(A)}const F=Math.max(9,x*.04),I=new Float32Array(f*x),G=-.45,Y=-.62,H=.64;for(let w=1;w<x-1;w++)for(let A=1;A<f-1;A++){const b=w*f+A;if(!s[b])continue;let q=T[b],z=C[b];const ae=Math.hypot(q,z)||1;q/=ae,z/=ae;const se=M[b],le=(1-Math.min(se/F,1))*1.25;let Ot=-q*le,Bt=-z*le;const ce=1.5,Dt=Math.hypot(Ot,Bt,ce);Ot/=Dt,Bt/=Dt;let jt=Ot*G+Bt*Y+ce/Dt*H;jt<0&&(jt=0);const Pe=Math.min(1,.45+.55*Math.min(se/(F*.7),1));I[b]=Math.min(1.12,(.5+.75*jt)*Pe)}Lt=I,K=document.createElement("canvas"),K.width=f,K.height=x;const _=K.getContext("2d");if(_){const w=_.createImageData(f,x);for(let A=0;A<f*x;A++)s[A]&&(w.data[A*4]=255,w.data[A*4+1]=255,w.data[A*4+2]=255,w.data[A*4+3]=255);_.putImageData(w,0,0)}}function ve(){const t=Math.max(1.6,et*.6);Z=t;const r=[];for(let s=0;s<x;s+=t)for(let c=0;c<f;c+=t){const M=(J(Math.floor(c),Math.floor(s))-.5)*t*.9,m=(J(Math.floor(s),Math.floor(c))-.5)*t*.9,y=Math.round(c+M),T=Math.round(s+m);if(y<1||T<1||y>=f-1||T>=x-1)continue;const C=T*f+y;if(!Ft[C])continue;const h=Math.atan2(pt[C],gt[C]),l=.86+J(y*7,T*13)*.18;let g=Lt[C]*l;g=g<0?0:g>1.12?1.12:g,r.push({x:y,y:T,ang:h,idx:Math.min(19,Math.max(0,Math.round(g/1.12*19)))})}ct=r}function Zt(t,r){t.save(),t.translate(r.x,r.y),t.rotate(r.ang),t.drawImage(nt[r.idx],-st/2,-lt/2),t.restore()}function Nt(){const t=B.getContext("2d");if(t)for(const r of ct)Zt(t,r)}function It(){const t=B.getContext("2d");t&&t.clearRect(0,0,f,x)}function Wt(t){if(!t.length)return[];const r=Math.max(4,Z*1.5),s=new Map,c=(h,l)=>h+","+l;t.forEach((h,l)=>{const g=c(Math.floor(h.x/r),Math.floor(h.y/r));let F=s.get(g);F||s.set(g,F=[]),F.push(l)});const M=Z*1.8*(Z*1.8);function m(h){const l=t[h],g=Math.floor(l.x/r),F=Math.floor(l.y/r),I=[];for(let G=-1;G<=1;G++)for(let Y=-1;Y<=1;Y++){const H=s.get(c(g+G,F+Y));if(H)for(const _ of H){if(_===h)continue;const w=t[_].x-l.x,A=t[_].y-l.y;w*w+A*A<=M&&I.push(_)}}return I}const y=new Uint8Array(t.length),T=[],C=t.map((h,l)=>l).sort((h,l)=>t[h].x+t[h].y-(t[l].x+t[l].y));for(const h of C){if(y[h])continue;let l=[h];for(y[h]=1;l.length;){T.push(l.map(F=>t[F]));const g=[];for(const F of l)for(const I of m(F))y[I]||(y[I]=1,g.push(I));l=g}}return T}function Ce(t){const r=Math.max(4,Z*1.5),s=new Map,c=(C,h)=>C+","+h;t.forEach((C,h)=>{const l=c(Math.floor(C.x/r),Math.floor(C.y/r));let g=s.get(l);g||s.set(l,g=[]),g.push(h)});const M=Z*1.8*(Z*1.8),m=C=>{const h=t[C],l=Math.floor(h.x/r),g=Math.floor(h.y/r),F=[];for(let I=-1;I<=1;I++)for(let G=-1;G<=1;G++){const Y=s.get(c(l+I,g+G));if(Y)for(const H of Y){if(H===C)continue;const _=t[H].x-h.x,w=t[H].y-h.y;_*_+w*w<=M&&F.push(H)}}return F},y=new Uint8Array(t.length),T=[];for(let C=0;C<t.length;C++){if(y[C])continue;const h=[];let l=[C];for(y[C]=1;l.length;){const g=[];for(const F of l){h.push(t[F]);for(const I of m(F))y[I]||(y[I]=1,g.push(I))}l=g}T.push(h)}return T}function Se(t){if(!t.length)return[];const r=M=>{let m=1/0;for(const y of M)y.x<m&&(m=y.x);return m},s=Ce(t).sort((M,m)=>r(M)-r(m)),c=[];for(const M of s){const m=Wt(M);m.sort((y,T)=>T.length-y.length);for(const y of m)c.push(y)}return c}function Te(){if(It(),xe||!O){Nt(),E.on=!1;return}E.rows=$==="hand"?Se(ct):Wt(ct),E.idx=0,E.acc=0,E.rate=p,E.on=E.rows.length>0}function Ae(t){const r=B.getContext("2d");if(r)for(t>E.rows.length&&(t=E.rows.length);E.idx<t;){const s=E.rows[E.idx++];for(const c of s)Zt(r,c)}}function be(t,r){const s=Q.getContext("2d");if(!s||(s.clearRect(0,0,f,x),!N||!K))return;const c=f*.32,M=s.createRadialGradient(t,r,0,t,r,c);M.addColorStop(0,"rgba(255,250,238,0.18)"),M.addColorStop(.5,"rgba(255,250,238,0.055)"),M.addColorStop(1,"rgba(255,250,238,0)"),s.fillStyle=M,s.fillRect(0,0,f,x),s.globalCompositeOperation="destination-in",s.drawImage(K,0,0),s.globalCompositeOperation="source-over"}function Ee(){R||!u||(R=document.createElement("span"),R.className=St.caret,R.setAttribute("aria-hidden","true"),Object.assign(R.style,{position:"absolute",pointerEvents:"none",borderRadius:"1px",opacity:"0",background:`rgb(${U(k[0])},${U(k[1])},${U(k[2])})`}),L.appendChild(R),at.push(R))}function $t(){if(!u||!R)return;const t=B.getContext("2d");if(!t)return;t.font=`${i} ${tt}px ${o}`;const r=t.measureText(e).width,s=(B.clientWidth||f)/f,c=tt*.7;R.style.left=(Et+r+tt*.05)*s+"px",R.style.top=.5*(B.clientHeight||x)-c*s/2+"px",R.style.height=c*s+"px",R.style.width=Math.max(2,Math.round(tt*.02*s))+"px",R.style.background=`rgb(${U(k[0])},${U(k[1])},${U(k[2])})`}function rt(){j||ft||(ft=!0,dt=0,Rt=requestAnimationFrame(te))}function te(t){if(j){ft=!1;return}dt||(dt=t);const r=Math.min(.25,(t-dt)/1e3);dt=t,E.on&&(E.acc+=E.rate*r,Ae(E.acc),E.idx>=E.rows.length&&(E.on=!1)),W&&K&&(be(X.set?X.x:f*.5,X.set?X.y:x*.45),W=!1);const s=u&&xt;if(R&&(R.style.opacity=s&&Math.floor(t/530)%2===0?"1":"0"),!E.on&&!W&&!s){ft=!1;return}Rt=requestAnimationFrame(te)}function Mt(t){const r=L.getBoundingClientRect();X.x=(t.clientX-r.left)/(r.width||1)*f,X.y=(t.clientY-r.top)/(r.height||1)*x,X.set=!0,W=!0,rt()}function vt(){X.set=!1,W=!0,rt()}function Fe(){S&&ne(S.value,!0)}function Le(t){t.key==="Enter"&&(t.preventDefault(),kt.replay())}function Re(){xt=!0,rt()}function Ne(){xt=!1,R&&(R.style.opacity="0")}function ee(t){t===u&&S||(u=t,t?(S||(S=document.createElement("input"),S.type="text",S.value=e,S.maxLength=64,S.setAttribute("aria-label","Embroidered text — type to change it"),S.setAttribute("autocomplete","off"),S.setAttribute("autocapitalize","off"),S.spellcheck=!1,Object.assign(S.style,{position:"absolute",inset:"0",width:"100%",height:"100%",margin:"0",padding:"0",border:"0",outline:"none",background:"transparent",color:"transparent",caretColor:"transparent",font:"inherit",textAlign:"center",cursor:"text"}),S.addEventListener("input",Fe),S.addEventListener("keydown",Le),S.addEventListener("focus",Re),S.addEventListener("blur",Ne),L.appendChild(S),at.push(S)),Ee(),$t()):(S&&(S.remove(),S=null),xt=!1,R&&(R.style.opacity="0")))}function Ie(t){if(t!==N)if(N=t,t)L.addEventListener("pointermove",Mt,{passive:!0}),L.addEventListener("pointerleave",vt,{passive:!0}),X.set=!1,W=!0,rt();else{L.removeEventListener("pointermove",Mt),L.removeEventListener("pointerleave",vt);const r=Q.getContext("2d");r&&r.clearRect(0,0,f,x)}}function it(t){ge(),pe(),we(),Me(),ve(),t?Te():(It(),Nt(),E.on=!1),S&&S.value!==e&&(S.value=e),$t(),W=!0,rt()}function ne(t,r){t=t??"",!(t===e&&V)&&(e=t,V&&(it(!1),r&&P&&P(e)))}const Ct=new Set;function oe(t,r,s){const c=`${r} 200px ${t}`;let M=!1;try{M=!!document.fonts&&document.fonts.check(c)}catch{M=!0}if(!document.fonts||M){s();return}let m=!1,y;const T=()=>{m||(m=!0,clearTimeout(y),Ct.delete(y),j||s())};document.fonts.load(c,e).then(()=>document.fonts.ready).then(T,T),y=setTimeout(T,1500),Ct.add(y)}function $e(){j||(it(!0),V=!0)}u&&(u=!1,ee(!0)),N&&(L.addEventListener("pointermove",Mt,{passive:!0}),L.addEventListener("pointerleave",vt,{passive:!0})),oe(D,i,$e);let Pt,re=-1;function ie(){clearTimeout(Pt),Pt=setTimeout(()=>{if(j||!V)return;const t=Math.round(L.getBoundingClientRect().width);t!==re&&(re=t,it(!1))},200)}window.addEventListener("resize",ie);const kt={get text(){return e},setText(t){if(!j){if(!V){e=t??"",S&&(S.value=e);return}ne(t,!1)}},replay(){j||!V||it(!0)},resize(){j||!V||it(!1)},update(t){if(j)return;t.text!==void 0&&kt.setText(t.text);let r=!1,s=!1;if(t.font!==void 0&&t.font!==o&&(o=t.font,D=Xt(o),r=!0),t.weight!==void 0){const c=mt(t.weight,1,1e3);c!==i&&(i=c,r=!0)}if(t.fill!==void 0){const c=mt(t.fill,.05,1);c!==d&&(d=c,r=!0)}t.pitch!==void 0&&t.pitch!==v&&(v=t.pitch,r=!0),t.threadColor!==void 0&&(Ht(t.threadColor),s=!0),t.sewRate!==void 0&&(p=Math.max(1,t.sewRate)),t.sewStyle!==void 0&&($=t.sewStyle==="hand"?"hand":"machine"),t.animate!==void 0&&(O=t.animate),t.onTextChange!==void 0&&(P=t.onTextChange),t.sheen!==void 0&&Ie(t.sheen),t.editable!==void 0&&ee(t.editable),V&&(r?oe(D,i,()=>{j||it(!1)}):s&&(Qt(),It(),Nt(),$t(),rt()))},focus(){!j&&u&&(S==null||S.focus())},destroy(){if(!j){j=!0,ft=!1,cancelAnimationFrame(Rt),clearTimeout(Pt);for(const t of Ct)clearTimeout(t);Ct.clear(),window.removeEventListener("resize",ie),L.removeEventListener("pointermove",Mt),L.removeEventListener("pointerleave",vt);for(const t of at)t.remove();nt=[],ct=[],E.rows=[],Ft=new Uint8Array(0),Lt=new Float32Array(0),gt=new Float32Array(0),pt=new Float32Array(0),K=ot=null,wt=null,R=null,S=null}}};return kt}const ue="data-threadtext",Tt=new WeakMap;function he(a,n){const e=a.dataset,o={text:e.ttText??n};if(e.ttFont&&(o.font=e.ttFont),e.ttWeight!==void 0){const i=parseFloat(e.ttWeight);isNaN(i)||(o.weight=i)}if(e.ttThreadColor&&(o.threadColor=e.ttThreadColor),e.ttPitch!==void 0){const i=parseFloat(e.ttPitch);isNaN(i)||(o.pitch=i)}if(e.ttFill!==void 0){const i=parseFloat(e.ttFill);isNaN(i)||(o.fill=i)}if(e.ttSewStyle==="hand"&&(o.sewStyle="hand"),e.ttSewRate!==void 0){const i=parseFloat(e.ttSewRate);isNaN(i)||(o.sewRate=i)}return e.ttSheen==="false"&&(o.sheen=!1),e.ttAnimate==="false"&&(o.animate=!1),e.ttEditable==="true"&&(o.editable=!0),o}function me(a){Gt(a);const n=a.innerHTML,e=(a.dataset.ttText??a.textContent??"").trim();if(!e)return;const o=he(a,e);a.innerHTML="",o.editable||(a.setAttribute("role","img"),a.setAttribute("aria-label",e));const i=de(a,o);Tt.set(a,{instance:i,originalHTML:n})}function Gt(a){const n=Tt.get(a);n&&(n.instance.destroy(),a.removeAttribute("role"),a.removeAttribute("aria-label"),a.innerHTML=n.originalHTML,Tt.delete(a))}function yt(a=document){a.querySelectorAll(`[${ue}]`).forEach(me)}function ye(){const a=()=>{var n;typeof document<"u"&&((n=document.fonts)!=null&&n.ready)?document.fonts.ready.then(()=>yt()).catch(()=>yt()):yt()};typeof document<"u"&&document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a,{once:!0}):a()}return ye(),ut.destroy=Gt,ut.init=yt,Object.defineProperty(ut,Symbol.toStringTag,{value:"Module"}),ut})({});
+var ThreadText=(function(ut){"use strict";const St={bg:"tt-bg",fx:"tt-fx",caret:"tt-caret"};function J(a,n){let e=Math.imul(a|0,374761393)+Math.imul(n|0,668265263)|0;return e=Math.imul(e^e>>>13,1274126177),((e^e>>>16)>>>0)/4294967295}function _t(a,n){const e=Math.floor(a),o=Math.floor(n),i=a-e,u=n-o,w=i*i*(3-2*i),$=u*u*(3-2*u),N=J(e,o),O=J(e+1,o),m=J(e,o+1),C=J(e+1,o+1);return N+(O-N)*w+(m-N)*$+(N-O-m+C)*w*$}const ht=1e20;function qt(a,n,e,o,i){let u=0;o[0]=0,i[0]=-ht,i[1]=ht;for(let w=1;w<n;w++){let $=(a[w]+w*w-(a[o[u]]+o[u]*o[u]))/(2*w-2*o[u]);for(;$<=i[u];)u--,$=(a[w]+w*w-(a[o[u]]+o[u]*o[u]))/(2*w-2*o[u]);u++,o[u]=w,i[u]=$,i[u+1]=ht}u=0;for(let w=0;w<n;w++){for(;i[u+1]<w;)u++;e[w]=(w-o[u])*(w-o[u])+a[o[u]]}}function fe(a,n,e){const o=new Float64Array(n*e);for(let m=0;m<n*e;m++)o[m]=a[m]?ht:0;const i=Math.max(n,e),u=new Float64Array(i),w=new Float64Array(i),$=new Int32Array(i),N=new Float64Array(i+1);for(let m=0;m<n;m++){for(let C=0;C<e;C++)u[C]=o[C*n+m];qt(u,e,w,$,N);for(let C=0;C<e;C++)o[C*n+m]=w[C]}for(let m=0;m<e;m++){for(let C=0;C<n;C++)u[C]=o[m*n+C];qt(u,n,w,$,N);for(let C=0;C<n;C++)o[m*n+C]=w[C]}const O=new Float32Array(n*e);for(let m=0;m<n*e;m++)O[m]=Math.sqrt(o[m]);return O}function zt(a,n,e,o,i){let u=Float32Array.from(a);const w=new Float32Array(n*e),$=1/(2*o+1),N=(O,m)=>O<0?0:O>m?m:O;for(let O=0;O<i;O++){for(let m=0;m<e;m++){const C=m*n;let P=0;for(let D=-o;D<=o;D++)P+=u[C+N(D,n-1)];for(let D=0;D<n;D++)w[C+D]=P*$,P+=u[C+N(D+o+1,n-1)]-u[C+N(D-o,n-1)]}for(let m=0;m<n;m++){let C=0;for(let P=-o;P<=o;P++)C+=w[N(P,e-1)*n+m];for(let P=0;P<e;P++)u[P*n+m]=C*$,C+=w[N(P+o+1,e-1)*n+m]-w[N(P-o,e-1)*n+m]}}return u}function Ut(a,n){if(!a)return n;const e=a.trim();if(e[0]==="#"){let i=e.slice(1);if(i.length===3&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]),i.length>=6){const u=parseInt(i.slice(0,2),16),w=parseInt(i.slice(2,4),16),$=parseInt(i.slice(4,6),16);if(!Number.isNaN(u)&&!Number.isNaN(w)&&!Number.isNaN($))return[u,w,$]}return n}const o=e.match(/rgba?\(([^)]+)\)/i);if(o){const i=o[1].split(",").map(u=>parseFloat(u));if(i.length>=3&&i.slice(0,3).every(u=>!Number.isNaN(u)))return[Math.round(i[0]),Math.round(i[1]),Math.round(i[2])]}return n}function U(a){return a<0?0:a>255?255:Math.round(a)}function mt(a,n,e){return a<n?n:a>e?e:a}function Xt(a){return(a.split(",")[0]||"serif").trim().replace(/^["']|["']$/g,"")}function de(a,n){if(typeof window>"u"||typeof document>"u"||!a)return{setText(){},replay(){},resize(){},update(){},focus(){},destroy(){},get text(){return n.text??""}};let e=n.text??"",o=n.font??"Georgia, serif",i=mt(n.weight??680,1,1e3),u=mt(n.fill??.9,.05,1),w=Math.max(1,n.sewRate??110),$=n.sewStyle==="hand"?"hand":"machine",N=n.sheen??!0,O=n.animate??!0,m=n.editable??!1,C=n.pitch,P=n.onTextChange,D=Xt(o);const ge=n.reducedMotion??!!(window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches);let k=Ut(n.threadColor??"#fffbf3",[255,251,243]),bt=[0,0,0],At=[0,0,0];function Ht(t){k=Ut(t,[255,251,243]),bt=[k[0]*.585,k[1]*.585,k[2]*.585],At=[k[0]*.47,k[1]*.47,k[2]*.47]}Ht(n.threadColor??"#fffbf3");const at=[];let B,L;a instanceof HTMLCanvasElement?(B=a,L=a.parentElement??a):(L=a,B=document.createElement("canvas"),at.push(B),L.appendChild(B)),B.classList.add(St.bg);const Q=document.createElement("canvas");at.push(Q),Q.classList.add(St.fx),L.appendChild(Q),getComputedStyle(L).position==="static"&&(L.style.position="relative"),B.style.display="block",B.style.width="100%",Object.assign(Q.style,{position:"absolute",inset:"0",width:"100%",pointerEvents:"none",mixBlendMode:"screen"});let T=null,R=null,gt=!1,f=0,x=0,tt=0,Et=0,et=4,nt=[],st=0,lt=0,Kt=-1,Yt="",Vt=-1,Jt=-1,Ft=new Uint8Array(0),Lt=new Float32Array(0),xt=new Float32Array(0),pt=new Float32Array(0),K=null,ot=null,wt=null,ct=[],Z=3;const F={rows:[],idx:0,acc:0,rate:0,on:!1},X={x:0,y:0,set:!1};let W=!0,Rt=0,ft=!1,dt=0,j=!1,Y=!1;function xe(){const t=L.getBoundingClientRect(),r=Math.max(1,Math.round(t.width||Math.min(window.innerWidth*.95,1240))),s=e||"Ag",d=B.getContext("2d");d&&(d.textBaseline="middle");let S=100;d&&(d.font=`${i} 100px ${o}`,S=d.measureText(s).width||100);const g=Math.max(8,100*(r*u)/S);let h=g*.62,p=g*.62,M=r*u;if(d){d.font=`${i} ${g}px ${o}`;const l=d.measureText(s);M=l.width||M,l.actualBoundingBoxAscent>0&&(h=l.actualBoundingBoxAscent),l.actualBoundingBoxDescent>0&&(p=l.actualBoundingBoxDescent)}const y=Math.max(1,Math.round(2*Math.max(h,p)*1.1));let c=Math.min(window.devicePixelRatio||1,1.7);for(;r*c*y*c>9e5&&c>.4;)c-=.1;f=Math.max(1,Math.round(r*c)),x=Math.max(1,Math.round(y*c)),tt=Math.max(4,Math.round(g*c)),Et=Math.round(f/2-M*c/2);for(const l of[B,Q])l.width=f,l.height=x,l.style.height=y+"px";L.style.height=y+"px",et=C??Math.max(3,x*.0095)}function pe(){ot&&Vt===f&&Jt===x||(ot=document.createElement("canvas"),ot.width=f,ot.height=x,wt=ot.getContext("2d",{willReadFrequently:!0}),Vt=f,Jt=x)}function Qt(){const t=Math.max(7,et*2.5),r=Math.max(3.2,et*1.3);st=Math.ceil(t)+2,lt=Math.ceil(r)+2,nt=[];for(let s=0;s<20;s++){const d=.34+s/19*.82,S=document.createElement("canvas");S.width=st,S.height=lt;const g=S.getContext("2d");if(!g){nt.push(S);continue}const h=st/2,p=lt/2,M=g.createLinearGradient(0,p-r/2,0,p+r/2),y=(A,I)=>`rgba(${U(A[0]*d)},${U(A[1]*d)},${U(A[2]*d)},${I})`;M.addColorStop(0,y(At,0)),M.addColorStop(.16,y(bt,1)),M.addColorStop(.5,y(k,1)),M.addColorStop(.84,y(bt,1)),M.addColorStop(1,y(At,0)),g.fillStyle=M,g.beginPath();const c=r/2;g.moveTo(h-t/2+c,p-c),g.lineTo(h+t/2-c,p-c),g.arc(h+t/2-c,p,c,-Math.PI/2,Math.PI/2),g.lineTo(h-t/2+c,p+c),g.arc(h-t/2+c,p,c,Math.PI/2,-Math.PI/2),g.closePath(),g.fill(),g.globalCompositeOperation="destination-in";const l=g.createLinearGradient(h-t/2,0,h+t/2,0);l.addColorStop(0,"rgba(0,0,0,0)"),l.addColorStop(.22,"rgba(0,0,0,1)"),l.addColorStop(.78,"rgba(0,0,0,1)"),l.addColorStop(1,"rgba(0,0,0,0)"),g.fillStyle=l,g.fillRect(0,0,st,lt),nt.push(S)}Kt=et,Yt=k.join(",")}function we(){nt.length&&Kt===et&&Yt===k.join(",")||Qt()}function Me(){if(!wt)return;const t=wt;t.clearRect(0,0,f,x),t.fillStyle="#fff",t.textAlign="left",t.textBaseline="middle",t.font=`${i} ${tt}px ${o}`,t.fillText(e,Et,x*.5);const r=t.getImageData(0,0,f,x).data,s=new Uint8Array(f*x);for(let v=0;v<x;v++)for(let b=0;b<f;b++){const E=v*f+b,q=r[E*4+3]/255,z=_t(b*.5,v*.5)*.22+_t(b*1.8,v*1.8)*.1;s[E]=q>.5+(z-.16)?1:0}Ft=s;const d=fe(s,f,x),S=new Float32Array(f*x);for(let v=1;v<x-1;v++)for(let b=1;b<f-1;b++){const E=v*f+b;S[E]=(d[E]*4+d[E-1]+d[E+1]+d[E-f]+d[E+f])/8}const g=new Float32Array(f*x),h=new Float32Array(f*x),p=new Float32Array(f*x),M=new Float32Array(f*x);for(let v=1;v<x-1;v++)for(let b=1;b<f-1;b++){const E=v*f+b;if(!s[E])continue;const q=(S[E+1]-S[E-1])*.5,z=(S[E+f]-S[E-f])*.5;p[E]=q,M[E]=z,g[E]=q*q-z*z,h[E]=2*q*z}const y=Math.max(7,Math.round(x*.05)),c=zt(g,f,x,y,2),l=zt(h,f,x,y,2);xt=new Float32Array(f*x),pt=new Float32Array(f*x);for(let v=0;v<f*x;v++){if(!s[v])continue;const b=.5*Math.atan2(l[v],c[v]);xt[v]=Math.cos(b),pt[v]=Math.sin(b)}const A=Math.max(9,x*.04),I=new Float32Array(f*x),G=-.45,V=-.62,H=.64;for(let v=1;v<x-1;v++)for(let b=1;b<f-1;b++){const E=v*f+b;if(!s[E])continue;let q=p[E],z=M[E];const ae=Math.hypot(q,z)||1;q/=ae,z/=ae;const se=S[E],le=(1-Math.min(se/A,1))*1.25;let Ot=-q*le,Bt=-z*le;const ce=1.5,Dt=Math.hypot(Ot,Bt,ce);Ot/=Dt,Bt/=Dt;let jt=Ot*G+Bt*V+ce/Dt*H;jt<0&&(jt=0);const Pe=Math.min(1,.45+.55*Math.min(se/(A*.7),1));I[E]=Math.min(1.12,(.5+.75*jt)*Pe)}Lt=I,K=document.createElement("canvas"),K.width=f,K.height=x;const _=K.getContext("2d");if(_){const v=_.createImageData(f,x);for(let b=0;b<f*x;b++)s[b]&&(v.data[b*4]=255,v.data[b*4+1]=255,v.data[b*4+2]=255,v.data[b*4+3]=255);_.putImageData(v,0,0)}}function ve(){const t=Math.max(1.6,et*.6);Z=t;const r=[];for(let s=0;s<x;s+=t)for(let d=0;d<f;d+=t){const S=(J(Math.floor(d),Math.floor(s))-.5)*t*.9,g=(J(Math.floor(s),Math.floor(d))-.5)*t*.9,h=Math.round(d+S),p=Math.round(s+g);if(h<1||p<1||h>=f-1||p>=x-1)continue;const M=p*f+h;if(!Ft[M])continue;const y=Math.atan2(pt[M],xt[M]),c=.86+J(h*7,p*13)*.18;let l=Lt[M]*c;l=l<0?0:l>1.12?1.12:l,r.push({x:h,y:p,ang:y,idx:Math.min(19,Math.max(0,Math.round(l/1.12*19)))})}ct=r}function Zt(t,r){t.save(),t.translate(r.x,r.y),t.rotate(r.ang),t.drawImage(nt[r.idx],-st/2,-lt/2),t.restore()}function Nt(){const t=B.getContext("2d");if(t)for(const r of ct)Zt(t,r)}function It(){const t=B.getContext("2d");t&&t.clearRect(0,0,f,x)}function Wt(t){if(!t.length)return[];const r=Math.max(4,Z*1.5),s=new Map,d=(y,c)=>y+","+c;t.forEach((y,c)=>{const l=d(Math.floor(y.x/r),Math.floor(y.y/r));let A=s.get(l);A||s.set(l,A=[]),A.push(c)});const S=Z*1.8*(Z*1.8);function g(y){const c=t[y],l=Math.floor(c.x/r),A=Math.floor(c.y/r),I=[];for(let G=-1;G<=1;G++)for(let V=-1;V<=1;V++){const H=s.get(d(l+G,A+V));if(H)for(const _ of H){if(_===y)continue;const v=t[_].x-c.x,b=t[_].y-c.y;v*v+b*b<=S&&I.push(_)}}return I}const h=new Uint8Array(t.length),p=[],M=t.map((y,c)=>c).sort((y,c)=>t[y].x+t[y].y-(t[c].x+t[c].y));for(const y of M){if(h[y])continue;let c=[y];for(h[y]=1;c.length;){p.push(c.map(A=>t[A]));const l=[];for(const A of c)for(const I of g(A))h[I]||(h[I]=1,l.push(I));c=l}}return p}function Ce(t){const r=Math.max(4,Z*1.5),s=new Map,d=(M,y)=>M+","+y;t.forEach((M,y)=>{const c=d(Math.floor(M.x/r),Math.floor(M.y/r));let l=s.get(c);l||s.set(c,l=[]),l.push(y)});const S=Z*1.8*(Z*1.8),g=M=>{const y=t[M],c=Math.floor(y.x/r),l=Math.floor(y.y/r),A=[];for(let I=-1;I<=1;I++)for(let G=-1;G<=1;G++){const V=s.get(d(c+I,l+G));if(V)for(const H of V){if(H===M)continue;const _=t[H].x-y.x,v=t[H].y-y.y;_*_+v*v<=S&&A.push(H)}}return A},h=new Uint8Array(t.length),p=[];for(let M=0;M<t.length;M++){if(h[M])continue;const y=[];let c=[M];for(h[M]=1;c.length;){const l=[];for(const A of c){y.push(t[A]);for(const I of g(A))h[I]||(h[I]=1,l.push(I))}c=l}p.push(y)}return p}function Se(t){if(!t.length)return[];const r=g=>{let h=1/0;for(const p of g)p.x<h&&(h=p.x);return h},s=g=>{let h=0;for(const p of g)h+=p.y;return h/g.length},d=Ce(t).sort((g,h)=>r(g)-r(h)),S=[];for(const g of d){const h=Wt(g);let p=1;for(const l of h)l.length>p&&(p=l.length);const M=Math.max(2,p*.45),y=h.filter(l=>l.length>=M).sort((l,A)=>s(l)-s(A)),c=h.filter(l=>l.length<M).sort((l,A)=>s(l)-s(A));for(const l of y)S.push(l);for(const l of c)S.push(l)}return S}function Te(){if(It(),ge||!O){Nt(),F.on=!1;return}F.rows=$==="hand"?Se(ct):Wt(ct),F.idx=0,F.acc=0,F.rate=w,F.on=F.rows.length>0}function be(t){const r=B.getContext("2d");if(r)for(t>F.rows.length&&(t=F.rows.length);F.idx<t;){const s=F.rows[F.idx++];for(const d of s)Zt(r,d)}}function Ae(t,r){const s=Q.getContext("2d");if(!s||(s.clearRect(0,0,f,x),!N||!K))return;const d=f*.32,S=s.createRadialGradient(t,r,0,t,r,d);S.addColorStop(0,"rgba(255,250,238,0.18)"),S.addColorStop(.5,"rgba(255,250,238,0.055)"),S.addColorStop(1,"rgba(255,250,238,0)"),s.fillStyle=S,s.fillRect(0,0,f,x),s.globalCompositeOperation="destination-in",s.drawImage(K,0,0),s.globalCompositeOperation="source-over"}function Ee(){R||!m||(R=document.createElement("span"),R.className=St.caret,R.setAttribute("aria-hidden","true"),Object.assign(R.style,{position:"absolute",pointerEvents:"none",borderRadius:"1px",opacity:"0",background:`rgb(${U(k[0])},${U(k[1])},${U(k[2])})`}),L.appendChild(R),at.push(R))}function $t(){if(!m||!R)return;const t=B.getContext("2d");if(!t)return;t.font=`${i} ${tt}px ${o}`;const r=t.measureText(e).width,s=(B.clientWidth||f)/f,d=tt*.7;R.style.left=(Et+r+tt*.05)*s+"px",R.style.top=.5*(B.clientHeight||x)-d*s/2+"px",R.style.height=d*s+"px",R.style.width=Math.max(2,Math.round(tt*.02*s))+"px",R.style.background=`rgb(${U(k[0])},${U(k[1])},${U(k[2])})`}function rt(){j||ft||(ft=!0,dt=0,Rt=requestAnimationFrame(te))}function te(t){if(j){ft=!1;return}dt||(dt=t);const r=Math.min(.25,(t-dt)/1e3);dt=t,F.on&&(F.acc+=F.rate*r,be(F.acc),F.idx>=F.rows.length&&(F.on=!1)),W&&K&&(Ae(X.set?X.x:f*.5,X.set?X.y:x*.45),W=!1);const s=m&&gt;if(R&&(R.style.opacity=s&&Math.floor(t/530)%2===0?"1":"0"),!F.on&&!W&&!s){ft=!1;return}Rt=requestAnimationFrame(te)}function Mt(t){const r=L.getBoundingClientRect();X.x=(t.clientX-r.left)/(r.width||1)*f,X.y=(t.clientY-r.top)/(r.height||1)*x,X.set=!0,W=!0,rt()}function vt(){X.set=!1,W=!0,rt()}function Fe(){T&&ne(T.value,!0)}function Le(t){t.key==="Enter"&&(t.preventDefault(),kt.replay())}function Re(){gt=!0,rt()}function Ne(){gt=!1,R&&(R.style.opacity="0")}function ee(t){t===m&&T||(m=t,t?(T||(T=document.createElement("input"),T.type="text",T.value=e,T.maxLength=64,T.setAttribute("aria-label","Embroidered text — type to change it"),T.setAttribute("autocomplete","off"),T.setAttribute("autocapitalize","off"),T.spellcheck=!1,Object.assign(T.style,{position:"absolute",inset:"0",width:"100%",height:"100%",margin:"0",padding:"0",border:"0",outline:"none",background:"transparent",color:"transparent",caretColor:"transparent",font:"inherit",textAlign:"center",cursor:"text"}),T.addEventListener("input",Fe),T.addEventListener("keydown",Le),T.addEventListener("focus",Re),T.addEventListener("blur",Ne),L.appendChild(T),at.push(T)),Ee(),$t()):(T&&(T.remove(),T=null),gt=!1,R&&(R.style.opacity="0")))}function Ie(t){if(t!==N)if(N=t,t)L.addEventListener("pointermove",Mt,{passive:!0}),L.addEventListener("pointerleave",vt,{passive:!0}),X.set=!1,W=!0,rt();else{L.removeEventListener("pointermove",Mt),L.removeEventListener("pointerleave",vt);const r=Q.getContext("2d");r&&r.clearRect(0,0,f,x)}}function it(t){xe(),pe(),we(),Me(),ve(),t?Te():(It(),Nt(),F.on=!1),T&&T.value!==e&&(T.value=e),$t(),W=!0,rt()}function ne(t,r){t=t??"",!(t===e&&Y)&&(e=t,Y&&(it(!1),r&&P&&P(e)))}const Ct=new Set;function oe(t,r,s){const d=`${r} 200px ${t}`;let S=!1;try{S=!!document.fonts&&document.fonts.check(d)}catch{S=!0}if(!document.fonts||S){s();return}let g=!1,h;const p=()=>{g||(g=!0,clearTimeout(h),Ct.delete(h),j||s())};document.fonts.load(d,e).then(()=>document.fonts.ready).then(p,p),h=setTimeout(p,1500),Ct.add(h)}function $e(){j||(it(!0),Y=!0)}m&&(m=!1,ee(!0)),N&&(L.addEventListener("pointermove",Mt,{passive:!0}),L.addEventListener("pointerleave",vt,{passive:!0})),oe(D,i,$e);let Pt,re=-1;function ie(){clearTimeout(Pt),Pt=setTimeout(()=>{if(j||!Y)return;const t=Math.round(L.getBoundingClientRect().width);t!==re&&(re=t,it(!1))},200)}window.addEventListener("resize",ie);const kt={get text(){return e},setText(t){if(!j){if(!Y){e=t??"",T&&(T.value=e);return}ne(t,!1)}},replay(){j||!Y||it(!0)},resize(){j||!Y||it(!1)},update(t){if(j)return;t.text!==void 0&&kt.setText(t.text);let r=!1,s=!1;if(t.font!==void 0&&t.font!==o&&(o=t.font,D=Xt(o),r=!0),t.weight!==void 0){const d=mt(t.weight,1,1e3);d!==i&&(i=d,r=!0)}if(t.fill!==void 0){const d=mt(t.fill,.05,1);d!==u&&(u=d,r=!0)}t.pitch!==void 0&&t.pitch!==C&&(C=t.pitch,r=!0),t.threadColor!==void 0&&(Ht(t.threadColor),s=!0),t.sewRate!==void 0&&(w=Math.max(1,t.sewRate)),t.sewStyle!==void 0&&($=t.sewStyle==="hand"?"hand":"machine"),t.animate!==void 0&&(O=t.animate),t.onTextChange!==void 0&&(P=t.onTextChange),t.sheen!==void 0&&Ie(t.sheen),t.editable!==void 0&&ee(t.editable),Y&&(r?oe(D,i,()=>{j||it(!1)}):s&&(Qt(),It(),Nt(),$t(),rt()))},focus(){!j&&m&&(T==null||T.focus())},destroy(){if(!j){j=!0,ft=!1,cancelAnimationFrame(Rt),clearTimeout(Pt);for(const t of Ct)clearTimeout(t);Ct.clear(),window.removeEventListener("resize",ie),L.removeEventListener("pointermove",Mt),L.removeEventListener("pointerleave",vt);for(const t of at)t.remove();nt=[],ct=[],F.rows=[],Ft=new Uint8Array(0),Lt=new Float32Array(0),xt=new Float32Array(0),pt=new Float32Array(0),K=ot=null,wt=null,R=null,T=null}}};return kt}const ue="data-threadtext",Tt=new WeakMap;function he(a,n){const e=a.dataset,o={text:e.ttText??n};if(e.ttFont&&(o.font=e.ttFont),e.ttWeight!==void 0){const i=parseFloat(e.ttWeight);isNaN(i)||(o.weight=i)}if(e.ttThreadColor&&(o.threadColor=e.ttThreadColor),e.ttPitch!==void 0){const i=parseFloat(e.ttPitch);isNaN(i)||(o.pitch=i)}if(e.ttFill!==void 0){const i=parseFloat(e.ttFill);isNaN(i)||(o.fill=i)}if(e.ttSewStyle==="hand"&&(o.sewStyle="hand"),e.ttSewRate!==void 0){const i=parseFloat(e.ttSewRate);isNaN(i)||(o.sewRate=i)}return e.ttSheen==="false"&&(o.sheen=!1),e.ttAnimate==="false"&&(o.animate=!1),e.ttEditable==="true"&&(o.editable=!0),o}function me(a){Gt(a);const n=a.innerHTML,e=(a.dataset.ttText??a.textContent??"").trim();if(!e)return;const o=he(a,e);a.innerHTML="",o.editable||(a.setAttribute("role","img"),a.setAttribute("aria-label",e));const i=de(a,o);Tt.set(a,{instance:i,originalHTML:n})}function Gt(a){const n=Tt.get(a);n&&(n.instance.destroy(),a.removeAttribute("role"),a.removeAttribute("aria-label"),a.innerHTML=n.originalHTML,Tt.delete(a))}function yt(a=document){a.querySelectorAll(`[${ue}]`).forEach(me)}function ye(){const a=()=>{var n;typeof document<"u"&&((n=document.fonts)!=null&&n.ready)?document.fonts.ready.then(()=>yt()).catch(()=>yt()):yt()};typeof document<"u"&&document.readyState==="loading"?document.addEventListener("DOMContentLoaded",a,{once:!0}):a()}return ye(),ut.destroy=Gt,ut.init=yt,Object.defineProperty(ut,Symbol.toStringTag,{value:"Module"}),ut})({});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/threadtext",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "Render any text as photorealistic procedural satin-stitch embroidery, in real time in the browser, from the font's glyph geometry",
 	"type": "module",
 	"main": "dist/index.cjs",