@overpunch/threadtext 0.4.6 → 0.5.0

package/dist/index.js

@@ -1,747 +1,85 @@
-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,
+import { createThreadText as y } from "./core.js";
+import { THREAD_TEXT_CLASSES as j } from "./core.js";
+import { useRef as i, useLayoutEffect as g, useEffect as C, forwardRef as p, useCallback as _ } from "react";
+import { jsx as E } from "react/jsx-runtime";
+function M(o) {
+  const a = i(null), n = i(null), c = i(o);
+  c.current = o;
+  const u = i(o.onTextChange);
+  u.current = o.onTextChange;
+  const { text: r, reducedMotion: s, onTextChange: x, ...f } = o, T = JSON.stringify(f), t = i(null);
+  return g(() => {
+    var d;
+    const e = a.current, h = t.current;
+    h && h.el === e && h.reducedMotion === s || ((d = n.current) == null || d.destroy(), n.current = null, t.current = null, e && (n.current = y(e, {
+      ...c.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;
+      onTextChange: (m) => {
+        var l;
+        return (l = u.current) == null ? void 0 : l.call(u, m);
+      }
+    }), t.current = { el: e, reducedMotion: s }));
+  }), C(() => () => {
+    var e;
+    (e = n.current) == null || e.destroy(), n.current = null, t.current = null;
+  }, []), C(() => {
+    var l;
+    const { text: e, reducedMotion: h, onTextChange: d, ...m } = c.current;
+    (l = n.current) == null || l.update(m);
+  }, [T]), C(() => {
+    var e;
+    (e = n.current) == null || e.setText(r);
+  }, [r]), a;
 }
-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);
+const S = [
+  "text",
+  "font",
+  "weight",
+  "fill",
+  "align",
+  "pitch",
+  "threadColor",
+  "threadColor2",
+  "colorMode",
+  "backstitch",
+  "outlineColor",
+  "sewRate",
+  "sewStyle",
+  "stitchMode",
+  "sheen",
+  "animate",
+  "editable",
+  "reducedMotion",
+  "axes",
+  "onTextChange"
+], b = p(
+  function({ className: a, style: n, as: c = "div", ...u }, r) {
+    const s = {}, x = {};
+    for (const [t, e] of Object.entries(u))
+      S.includes(t) ? s[t] = e : x[t] = e;
+    const f = M(s), T = _(
+      (t) => {
+        f.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [R, T]
+      [f, r]
     );
-    return /* @__PURE__ */ Ht(
-      u,
+    return /* @__PURE__ */ E(
+      c,
       {
-        ref: b,
-        className: n,
-        style: r,
-        role: y.editable ? C : C ?? "img",
-        "aria-label": y.editable ? f : f ?? y.text,
-        "aria-describedby": h
-      }
+        ref: T,
+        className: a,
+        style: n,
+        ...x
+      },
+      typeof c == "string" ? c : "C"
     );
   }
 );
-tn.displayName = "ThreadText";
+b.displayName = "ThreadText";
 export {
-  it as THREAD_TEXT_CLASSES,
-  tn as ThreadText,
-  Wt as createThreadText,
-  en as useThreadText
+  j as THREAD_TEXT_CLASSES,
+  b as ThreadText,
+  y as createThreadText,
+  M as useThreadText
 };