@liiift-studio/threadtext 0.2.0 → 0.2.1

package/README.md

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

package/dist/index.d.ts

@@ -81,8 +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'** — a single continuous thread wanders stitch by stitch along each stroke and
-     *   carries to the next, laying one stitch at a time, like hand embroidery.
+     * - **'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.
      */
     sewStyle?: 'machine' | 'hand';
     /** Satin cross-rows (machine) or stitches (hand) laid per second during the sew-in. (default: 110) */

package/dist/index.js

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

package/dist/threadtext.webflow.min.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@liiift-studio/threadtext",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"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",