@liiift-studio/threadtext 0.0.1 → 0.1.1

package/dist/index.js

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