@overpunch/threadtext 0.4.6

package/dist/threadtext.webflow.min.js

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

package/package.json

@@ -0,0 +1,88 @@
+{
+	"name": "@overpunch/threadtext",
+	"version": "0.4.6",
+	"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",
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "vite build",
+		"build:webflow": "vite build --config vite.webflow.config.ts",
+		"test": "vitest",
+		"test:run": "vitest run",
+		"lint": "tsc --noEmit",
+		"capture": "node scripts/capture/capture.mjs",
+		"demo": "python3 -m http.server 8080",
+		"prepublishOnly": "npm run test:run && npm run build && npm run build:webflow"
+	},
+	"peerDependencies": {
+		"react": ">=17",
+		"react-dom": ">=17"
+	},
+	"peerDependenciesMeta": {
+		"react": {
+			"optional": true
+		},
+		"react-dom": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@testing-library/react": "^16.3.2",
+		"@types/react": "^19.0.0",
+		"@vitejs/plugin-react": "^4.0.0",
+		"happy-dom": "^20.10.6",
+		"next": "16.2.2",
+		"playwright": "^1.61.1",
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^6.0.0",
+		"vite-plugin-dts": "^4.0.0",
+		"vitest": "^3.0.0"
+	},
+	"keywords": [
+		"typography",
+		"web-typography",
+		"embroidery",
+		"satin-stitch",
+		"cross-stitch",
+		"thread",
+		"thread-text",
+		"procedural",
+		"canvas",
+		"real-time",
+		"variable-font",
+		"text-effect",
+		"liiift-studio",
+		"type-tools",
+		"frontend",
+		"react",
+		"typescript"
+	],
+	"author": "Quinn Keaveney <quinn@liiift.studio>",
+	"license": "MIT",
+	"homepage": "https://threadtext.com",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/over-punch/ThreadText.git"
+	},
+	"bugs": {
+		"url": "https://github.com/over-punch/ThreadText/issues"
+	},
+	"sideEffects": false,
+	"publishConfig": {
+		"access": "public"
+	}
+}