@overpunch/threadtext 0.4.6

package/dist/index.js

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