@liiift-studio/threadtext 0.1.1 → 0.2.0

package/README.md

@@ -75,8 +75,9 @@ import { ThreadText } from '@liiift-studio/threadtext'
 ```
 
 Thread colour, `fill` (size — the word re-fits to the container width on load/resize),
-`weight`, `font`, `sewRate`, `sheen`, `animate`, and `editable` (type straight on the
-artwork — backed by a real input, so touch keyboards and IME work) with an `onTextChange`
+`weight`, `font`, `sewStyle` (`'machine'` satin rows or `'hand'` — a single thread that
+wanders stitch by stitch), `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`
 are optional peers; the core is framework-free.

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -77,7 +77,15 @@ export declare interface ThreadTextOptions {
     fill?: number;
     /** Play the sew-in animation on mount and on `replay()`. (default: true) */
     animate?: boolean;
-    /** Satin cross-rows laid per second during the sew-in. (default: 110) */
+    /**
+     * 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.
+     */
+    sewStyle?: 'machine' | 'hand';
+    /** Satin cross-rows (machine) or stitches (hand) laid per second during the sew-in. (default: 110) */
     sewRate?: number;
     /** Enable the cursor-following radial sheen on the overlay canvas. (default: true) */
     sheen?: boolean;

package/dist/index.js

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

package/dist/threadtext.webflow.min.js

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

package/package.json

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