speakid-build-a-sentence 1.0.24 → 1.0.26

package/dist/speakid-build-a-sentence.es.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { useState as l, useCallback as ge, useRef as oe, useEffect as Y, useMemo as sn, Component as dn } from "react";
+import { useState as c, useCallback as ge, useRef as oe, useEffect as V, useMemo as sn, Component as dn } from "react";
 const an = `
   @keyframes spin {
     from { transform: rotate(0deg); }
@@ -173,50 +173,50 @@ const Te = {
   // ===== Анимационные стили =====
   ...Te
 }, ln = () => {
-  const [u, s] = l([]), W = ge((H, I, f) => {
-    const y = [];
-    H.trim() || y.push({
+  const [u, s] = c([]), S = ge((H, I, f) => {
+    const b = [];
+    H.trim() || b.push({
       type: "empty",
       message: "Sentence cannot be empty"
-    }), H.length > 41 && y.push({
+    }), H.length > 41 && b.push({
       type: "length",
       message: `Sentence is too long (${H.length}/41 characters)`
-    }), H && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(H) && y.push({
+    }), H && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(H) && b.push({
       type: "characters",
       message: "Only Latin characters, numbers, spaces and punctuation are allowed"
     });
-    const S = f.findIndex((C, K) => K !== I && C.toLowerCase().trim() === H.toLowerCase().trim());
-    return S !== -1 && y.push({
+    const W = f.findIndex((C, K) => K !== I && C.toLowerCase().trim() === H.toLowerCase().trim());
+    return W !== -1 && b.push({
       type: "duplicate",
-      message: `Duplicate sentence (same as sentence ${S + 1})`
-    }), s(y), {
-      isValid: y.length === 0,
-      errors: y
+      message: `Duplicate sentence (same as sentence ${W + 1})`
+    }), s(b), {
+      isValid: b.length === 0,
+      errors: b
     };
   }, []), se = ge((H) => {
     const I = [];
-    return H.forEach((f, y) => {
-      const b = W(f, y, H);
-      I.push(...b.errors.map((S) => ({
-        ...S,
-        message: `Sentence ${y + 1}: ${S.message}`
+    return H.forEach((f, b) => {
+      const y = S(f, b, H);
+      I.push(...y.errors.map((W) => ({
+        ...W,
+        message: `Sentence ${b + 1}: ${W.message}`
       })));
     }), {
       isValid: I.length === 0,
       errors: I
     };
-  }, [W]), de = ge(() => {
+  }, [S]), de = ge(() => {
     s([]);
   }, []);
   return {
     errors: u,
-    validateSentence: W,
+    validateSentence: S,
     validateAllSentences: se,
     clearErrors: de
   };
-}, cn = (u, s, W) => s && W ? `${u} word "${s}" ${W}` : s ? `${u} word "${s}"` : u, hn = (u, s, W = ["Enter", " "]) => {
-  W.includes(u.key) && (u.preventDefault(), s());
-}, B = (u) => {
+}, cn = (u, s, S) => s && S ? `${u} word "${s}" ${S}` : s ? `${u} word "${s}"` : u, hn = (u, s, S = ["Enter", " "]) => {
+  S.includes(u.key) && (u.preventDefault(), s());
+}, L = (u) => {
   const s = document.createElement("div");
   s.setAttribute("aria-live", "polite"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.left = "-10000px", s.style.width = "1px", s.style.height = "1px", s.style.overflow = "hidden", document.body.appendChild(s), s.textContent = u, setTimeout(() => {
     document.body.removeChild(s);
@@ -254,7 +254,7 @@ const Te = {
   s && s.remove(), document.head.appendChild(u);
 }, gn = (u) => [...u].sort(() => Math.random() - 0.5);
 function yn(u = {}) {
-  const { logoUrl: s, showLogo: W = !0 } = u, se = oe(null), { validateAllSentences: de, errors: H } = ln(), I = () => d || window.innerWidth < 768, f = () => d || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, y = (e = "medium") => {
+  const { logoUrl: s, showLogo: S = !0 } = u, se = oe(null), { validateAllSentences: de, errors: H } = ln(), I = () => !!(d || window.innerWidth < 768 || window.innerWidth >= 768 && window.innerWidth < 1300), f = () => d || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, b = (e = "medium") => {
     if (!f())
       return {
         padding: "12px 24px",
@@ -282,15 +282,15 @@ function yn(u = {}) {
         };
     }
   };
-  Y(() => (pn(), () => {
+  V(() => (pn(), () => {
     document.documentElement.style.overflow = "", document.body.style.overflow = "";
     const e = document.getElementById("magic-sentence-reset");
     e && e.remove();
   }), []);
-  const [b, S] = l("select"), [C, K] = l(null), [ue, we] = l(null), [T, Z] = l([]), [D, fe] = l(0), [ae, me] = l([]), [k, le] = l([]), [q, xe] = l(20), [V, L] = l(0), [un, ye] = l(null), [M, z] = l(null), [c, _] = l(!1), [be, ce] = l(!1), [he, De] = l(
+  const [y, W] = c("select"), [C, K] = c(null), [ue, we] = c(null), [T, Z] = c([]), [D, fe] = c(0), [ae, me] = c([]), [k, le] = c([]), [B, xe] = c(20), [U, M] = c(0), [un, ye] = c(null), [A, z] = c(null), [l, _] = c(!1), [be, ce] = c(!1), [he, De] = c(
     Number(localStorage.getItem("magicSentenceBest")) || 0
-  ), U = oe(null), Re = oe(null), Se = oe(0), [m, E] = l({ list: null, id: null, side: null }), [d, ze] = l(!1), [Ee, Q] = l(1), [We, ee] = l(null), [Pe, Be] = l(!1), [A, Le] = l(!1), [$, Me] = l(!1), [O, Ae] = l(!1), [N, $e] = l(!1), [G, Oe] = l(!1), [X, Ne] = l(!1), [j, Ge] = l(!1), [F, Xe] = l(!1), [wn, je] = l(!1), [fn, Fe] = l(!1);
-  Y(() => {
+  ), J = oe(null), Re = oe(null), We = oe(0), [m, E] = c({ list: null, id: null, side: null }), [d, ze] = c(!1), [Ee, Q] = c(1), [Se, ee] = c(null), [Pe, Be] = c(!1), [$, Le] = c(!1), [O, Me] = c(!1), [N, Ae] = c(!1), [G, $e] = c(!1), [X, Oe] = c(!1), [j, Ne] = c(!1), [F, Ge] = c(!1), [q, Xe] = c(!1), [wn, je] = c(!1), [fn, Fe] = c(!1);
+  V(() => {
     const e = () => {
       const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, r = n < 700, p = t / n > 1.8, w = t === 768 && n === 1024, o = t === 1024 && n === 768, h = t === 820 && n === 1180, R = t === 1180 && n === 820, v = t === 540 && n === 720, re = t === 720 && n === 540, He = t === 1024 && n === 1366, Ie = t === 1366 && n === 1024, Ce = t >= 1200 && n >= 600 && !i;
       Be(Ce), Le(w), Me(o), Ae(h), $e(R), Oe(v), Ne(re), Ge(He), Xe(Ie), Fe(p);
@@ -312,15 +312,15 @@ function yn(u = {}) {
     return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
   const ne = (e, t, n, i) => {
-    if (c) return;
+    if (l) return;
     let r = [...ae], p = [...k];
     const w = e === "bank" ? r : p, o = t === "bank" ? r : p, h = w.findIndex((re) => re.id === n);
     if (h === -1) return;
     const [R] = w.splice(h, 1);
     let v = i;
     e === t && v !== null && v !== void 0 && v > h && (v = v - 1), v == null || v < 0 || v > o.length ? o.push(R) : o.splice(v, 0, R), e === "bank" ? r = w : p = w, t === "bank" ? r = o : p = o, me(r), le(p);
-  }, J = (e, t, n) => {
-    if (e.preventDefault(), c) {
+  }, Y = (e, t, n) => {
+    if (e.preventDefault(), l) {
       E({ list: null, id: null, side: null });
       return;
     }
@@ -340,9 +340,9 @@ function yn(u = {}) {
       E({ list: null, id: null, side: null });
     }
   }, qe = (e) => {
-    K(e), Re.current = e, Z(Array(e).fill("")), S("time");
+    K(e), Re.current = e, Z(Array(e).fill("")), W("time");
   }, Ve = (e) => {
-    we(e), S("type");
+    we(e), W("type");
   }, Ue = (e, t) => {
     if (t.length > 41 || t && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))
       return;
@@ -350,15 +350,18 @@ function yn(u = {}) {
     i[e] = t, Z(i);
     const r = de(i);
     r.isValid || console.warn("Validation errors:", r.errors);
-  }, Je = (e) => e.trim().replace(/\s+/g, " "), ke = (e) => e <= 3 ? 20 : e <= 5 ? 18 : e <= 7 ? 16 : e <= 9 ? 14 : 12, Ye = () => {
-    T.some((t) => t.trim().length === 0) || (Z((t) => t.map((n) => Je(n))), L(0), fe(0), Se.current = 0, ye(null), S("getready"));
+  }, Je = (e) => e.trim().replace(/\s+/g, " "), ke = (e) => {
+    const t = window.innerWidth >= 768 && window.innerWidth < 1300;
+    return e <= 3 ? t ? 18 : 20 : e <= 5 ? t ? 16 : 18 : e <= 7 ? t ? 14 : 16 : e <= 9 ? t ? 12 : 14 : e <= 12 ? t ? 10 : 12 : t ? 9 : 10;
+  }, Ye = () => {
+    T.some((t) => t.trim().length === 0) || (Z((t) => t.map((n) => Je(n))), M(0), fe(0), We.current = 0, ye(null), W("getready"));
   };
-  Y(() => {
-    if (b === "getready") {
+  V(() => {
+    if (y === "getready") {
       const e = setTimeout(() => te(0), 3e3);
       return () => clearTimeout(e);
     }
-  }, [b]);
+  }, [y]);
   const te = (e) => {
     const t = T[e];
     if (!t) return;
@@ -368,46 +371,41 @@ function yn(u = {}) {
       id: `${Date.now()}-${e}-${p}-${Math.random().toString(36).slice(2)}`,
       text: r
     }));
-    me(i), le([]), fe(e), Se.current = e, xe(ue || 20), z(null), _(!1), ce(!1), S("play");
+    me(i), le([]), fe(e), We.current = e, xe(ue || 20), z(null), _(!1), ce(!1), W("play");
   };
-  Y(() => {
-    if (b === "play" && !c)
-      if (U.current !== null && window.clearTimeout(U.current), q > 0)
-        U.current = window.setTimeout(() => xe((e) => e - 1), 1e3);
-      else {
-        _(!0);
-        const e = T[D];
-        if (!e) {
-          z(null);
-          return;
-        }
-        const t = e.trim().split(/\s+/), n = k.map((o) => o.text), i = t.filter((o) => !n.includes(o)).length, r = n.filter((o) => !t.includes(o)).length, p = t.filter((o, h) => n.includes(o) ? n[h] !== o : !1).length, w = i + r + p;
-        w === 0 ? (z("correct"), be || (ce(!0), L((o) => o + 1)), P("correct"), B("Correct! Well done!")) : w === 1 ? (z("almost"), L((o) => o + 0.5), P("half"), B("Almost correct! Just one mistake.")) : (z("wrong"), P("wrong"), B("Not quite right. Keep trying!"));
+  V(() => (y === "play" && !l && (J.current !== null && window.clearTimeout(J.current), B > 0 ? J.current = window.setTimeout(() => xe((e) => e - 1), 1e3) : _(!0)), () => {
+    J.current !== null && window.clearTimeout(J.current);
+  }), [y, B, l]), V(() => {
+    if (y === "play" && l && B === 0) {
+      const e = T[D];
+      if (!e) {
+        z(null);
+        return;
       }
-    return () => {
-      U.current !== null && window.clearTimeout(U.current);
-    };
-  }, [b, q, c, T, D, k, be]);
+      const t = e.trim().split(/\s+/), n = k.map((o) => o.text), i = t.filter((o) => !n.includes(o)).length, r = n.filter((o) => !t.includes(o)).length, p = t.filter((o, h) => n.includes(o) ? n[h] !== o : !1).length, w = i + r + p;
+      w === 0 ? (z("correct"), be || (ce(!0), M((o) => o + 1)), P("correct"), L("Correct! Well done!")) : w === 1 ? (z("almost"), M((o) => o + 0.5), P("half"), L("Almost correct! Just one mistake.")) : (z("wrong"), P("wrong"), L("Not quite right. Keep trying!"));
+    }
+  }, [y, l, B, T, D, k, be]);
   const Ke = (e = !0) => {
     if (e) {
-      if (c) {
-        D + 1 < (C || 0) ? te(D + 1) : (S("results"), setTimeout(() => ie(), 600));
+      if (l) {
+        D + 1 < (C || 0) ? te(D + 1) : (W("results"), setTimeout(() => ie(), 600));
         return;
       }
       const t = T[D];
       if (!t) {
-        D + 1 < (C || 0) ? te(D + 1) : (S("results"), setTimeout(() => ie(), 600));
+        D + 1 < (C || 0) ? te(D + 1) : (W("results"), setTimeout(() => ie(), 600));
         return;
       }
       const n = t.trim().split(/\s+/), i = k.map((h) => h.text), r = n.filter((h) => !i.includes(h)).length, p = i.filter((h) => !n.includes(h)).length, w = n.filter((h, R) => i.includes(h) ? i[R] !== h : !1).length, o = r + p + w;
-      o === 0 ? (L((h) => h + 1), z("correct"), ce(!0), P("correct"), B("Correct! Well done!")) : o === 1 ? (L((h) => h + 0.5), z("almost"), P("half"), B("Almost correct! Just one mistake.")) : (z("wrong"), P("wrong"), B("Not quite right. Keep trying!")), D + 1 < (C || 0) ? setTimeout(() => te(D + 1), 800) : setTimeout(() => {
-        S("results"), setTimeout(() => ie(), 600);
+      o === 0 ? (M((h) => h + 1), z("correct"), ce(!0), P("correct"), L("Correct! Well done!")) : o === 1 ? (M((h) => h + 0.5), z("almost"), P("half"), L("Almost correct! Just one mistake.")) : (z("wrong"), P("wrong"), L("Not quite right. Keep trying!")), D + 1 < (C || 0) ? setTimeout(() => te(D + 1), 800) : setTimeout(() => {
+        W("results"), setTimeout(() => ie(), 600);
       }, 800);
     }
   };
-  Y(() => {
-    b === "results" && V > he && (De(V), localStorage.setItem("magicSentenceBest", String(V)));
-  }, [b, V, he]);
+  V(() => {
+    y === "results" && U > he && (De(U), localStorage.setItem("magicSentenceBest", String(U)));
+  }, [y, U, he]);
   const P = (e) => {
     const t = new (window.AudioContext || window.webkitAudioContext)(), n = t.createOscillator(), i = t.createGain();
     switch (n.connect(i), i.connect(t.destination), e) {
@@ -457,7 +455,7 @@ function yn(u = {}) {
         onClick: () => qe(e),
         style: {
           ...g.gmButton,
-          ...y("medium")
+          ...b("medium")
         },
         children: [
           e,
@@ -479,7 +477,7 @@ function yn(u = {}) {
         onClick: () => Ve(e),
         style: {
           ...g.gmButton,
-          ...y("medium")
+          ...b("medium")
         },
         children: [
           e,
@@ -535,7 +533,7 @@ function yn(u = {}) {
           marginTop: 30,
           background: T.some((e) => e.trim().length === 0) ? "#ccc" : "#ec4c44",
           cursor: T.some((e) => e.trim().length === 0) ? "not-allowed" : "pointer",
-          ...y("large")
+          ...b("large")
         },
         children: "PLAY"
       }
@@ -556,7 +554,7 @@ function yn(u = {}) {
       "/",
       C,
       " — ",
-      c ? "TIME'S UP!" : `Time: ${q}s`
+      l ? "TIME'S UP!" : `Time: ${B}s`
     ] }),
     /* @__PURE__ */ a(
       "div",
@@ -574,8 +572,8 @@ function yn(u = {}) {
           {
             style: {
               height: "100%",
-              width: `${q / (ue || 20) * 100}%`,
-              background: q <= 5 ? "#ec4c44" : "#4caf50",
+              width: `${B / (ue || 20) * 100}%`,
+              background: B <= 5 ? "#ec4c44" : "#4caf50",
               transition: "width 1s linear"
             }
           }
@@ -586,7 +584,7 @@ function yn(u = {}) {
       "div",
       {
         onDragOver: (e) => e.preventDefault(),
-        onDrop: (e) => J(e, "bank", null),
+        onDrop: (e) => Y(e, "bank", null),
         style: {
           display: "flex",
           flexWrap: I() ? "wrap" : "nowrap",
@@ -600,49 +598,50 @@ function yn(u = {}) {
         children: ae.map((e, t) => /* @__PURE__ */ a(
           "div",
           {
-            draggable: !c,
+            draggable: !l,
             role: "button",
-            tabIndex: c ? -1 : 0,
-            "aria-label": c ? `Word: ${e.text} (time expired)` : cn("Drag word", e.text, "to build sentence"),
+            tabIndex: l ? -1 : 0,
+            "aria-label": l ? `Word: ${e.text} (time expired)` : cn("Drag word", e.text, "to build sentence"),
             onDragStart: (n) => {
-              if (c) {
+              if (l) {
                 n.preventDefault();
                 return;
               }
               n.dataTransfer.setData(
                 "application/x-token",
                 JSON.stringify({ from: "bank", id: e.id })
-              ), n.dataTransfer.setData("text/plain", e.id), B(`Dragging word: ${e.text}`);
+              ), n.dataTransfer.setData("text/plain", e.id), L(`Dragging word: ${e.text}`);
             },
             onKeyDown: (n) => {
-              c || hn(n, () => ne("bank", "selected", e.id, null));
+              l || hn(n, () => ne("bank", "selected", e.id, null));
             },
             onDragOver: (n) => n.preventDefault(),
             onDrop: (n) => {
               const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, p = n.clientX > r ? t + 1 : t;
-              E({ list: null, id: null, side: null }), n.stopPropagation(), J(n, "bank", p);
+              E({ list: null, id: null, side: null }), n.stopPropagation(), Y(n, "bank", p);
             },
             onDragEnter: (n) => {
-              if (c) return;
+              if (l) return;
               const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
               E({ list: "bank", id: e.id, side: n.clientX > r ? "right" : "left" });
             },
             onDragLeave: () => E({ list: null, id: null, side: null }),
             onClick: () => {
-              c || ne("bank", "selected", e.id, null);
+              l || ne("bank", "selected", e.id, null);
             },
             style: {
               padding: d || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
               borderRadius: d || window.innerWidth < 768 ? "6px" : "10px",
               border: "1px solid #ccc",
-              background: c ? "#f0f0f0" : "#f9f9f9",
-              cursor: c ? "not-allowed" : m.list === "bank" && m.id === e.id ? "grabbing" : "grab",
-              fontSize: d || window.innerWidth < 768 ? "12px" : "18px",
+              background: l ? "#f0f0f0" : "#f9f9f9",
+              cursor: l ? "not-allowed" : m.list === "bank" && m.id === e.id ? "grabbing" : "grab",
+              fontSize: d || window.innerWidth < 768 ? "12px" : window.innerWidth >= 768 && window.innerWidth < 1300 ? "14px" : "18px",
+              // Полный размер только для Pro и больших экранов
               ...m.list === "bank" && m.id === e.id && m.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
               ...m.list === "bank" && m.id === e.id && m.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
               flexShrink: 0,
               flexBasis: "auto",
-              opacity: c ? 0.6 : 1,
+              opacity: l ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
               ...m.list === "bank" && m.id === e.id ? {
                 transform: "scale(1.05)",
@@ -662,14 +661,14 @@ function yn(u = {}) {
         onDrop: (e) => {
           const t = e.currentTarget.getBoundingClientRect(), n = Array.from(e.currentTarget.children);
           if (n.length === 0) {
-            J(e, "selected", 0);
+            Y(e, "selected", 0);
             return;
           }
           let i = k.length, r = 1 / 0;
           n.forEach((p, w) => {
             const o = p.getBoundingClientRect(), h = o.left + o.width / 2, R = Math.abs(e.clientX - h);
             R < r && (r = R, i = e.clientX < h ? w : w + 1);
-          }), e.clientX > t.right - 30 && (i = k.length), e.clientX < t.left + 30 && (i = 0), J(e, "selected", i);
+          }), e.clientX > t.right - 30 && (i = k.length), e.clientX < t.left + 30 && (i = 0), Y(e, "selected", i);
         },
         style: {
           minHeight: d || window.innerWidth < 768 ? "50px" : "70px",
@@ -679,7 +678,7 @@ function yn(u = {}) {
           // Убираем ограничение максимальной ширины
           minWidth: "245px",
           // Минимальная ширина для растягивания
-          border: M === "correct" ? "2px dashed #4caf50" : M === "almost" ? "2px dashed #ff9800" : M === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
+          border: A === "correct" ? "2px dashed #4caf50" : A === "almost" ? "2px dashed #ff9800" : A === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
           borderRadius: d || window.innerWidth < 768 ? "8px" : "12px",
           padding: d || window.innerWidth < 768 ? "8px" : "12px",
           display: "flex",
@@ -687,16 +686,16 @@ function yn(u = {}) {
           alignItems: "center",
           justifyContent: "center",
           fontSize: `${ke(k.length)}px`,
-          background: M === "correct" ? "#e8f5e8" : M === "almost" ? "#fff3e0" : M === "wrong" ? "#ffebee" : "#fafafa",
+          background: A === "correct" ? "#e8f5e8" : A === "almost" ? "#fff3e0" : A === "wrong" ? "#ffebee" : "#fafafa",
           overflowX: I() ? "hidden" : "auto",
           whiteSpace: I() ? "normal" : "nowrap"
         },
         children: k.map((e, t) => /* @__PURE__ */ a(
           "span",
           {
-            draggable: !c,
+            draggable: !l,
             onDragStart: (n) => {
-              if (c) {
+              if (l) {
                 n.preventDefault();
                 return;
               }
@@ -708,27 +707,27 @@ function yn(u = {}) {
             onDragOver: (n) => n.preventDefault(),
             onDrop: (n) => {
               const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2, p = i.width * 0.25, w = n.clientX < r - p ? t : n.clientX > r + p || n.clientX > r ? t + 1 : t;
-              E({ list: null, id: null, side: null }), n.stopPropagation(), J(n, "selected", w);
+              E({ list: null, id: null, side: null }), n.stopPropagation(), Y(n, "selected", w);
             },
             onDragEnter: (n) => {
-              if (c) return;
+              if (l) return;
               const i = n.currentTarget.getBoundingClientRect(), r = i.left + i.width / 2;
               E({ list: "selected", id: e.id, side: n.clientX > r ? "right" : "left" });
             },
             onDragLeave: () => E({ list: null, id: null, side: null }),
             onClick: () => {
-              c || ne("selected", "bank", e.id, null);
+              l || ne("selected", "bank", e.id, null);
             },
-            title: c ? "Time expired" : "Click to remove back to bank",
+            title: l ? "Time expired" : "Click to remove back to bank",
             style: {
               padding: f() ? "4px 6px" : "6px 10px",
               margin: f() ? "2px" : "4px",
               borderRadius: f() ? "4px" : "8px",
-              background: c ? "#f0f0f0" : "#ffe9e7",
-              border: c ? "1px solid #ccc" : "1px solid #ec4c44",
+              background: l ? "#f0f0f0" : "#ffe9e7",
+              border: l ? "1px solid #ccc" : "1px solid #ec4c44",
               ...m.list === "selected" && m.id === e.id && m.side === "left" ? { borderLeft: "3px solid #3b82f6" } : {},
               ...m.list === "selected" && m.id === e.id && m.side === "right" ? { borderRight: "3px solid #3b82f6" } : {},
-              cursor: c ? "not-allowed" : m.list === "selected" && m.id === e.id ? "grabbing" : "grab",
+              cursor: l ? "not-allowed" : m.list === "selected" && m.id === e.id ? "grabbing" : "grab",
               userSelect: "none",
               fontSize: `${ke(k.length)}px`,
               // Адаптивный размер шрифта для слов
@@ -736,7 +735,7 @@ function yn(u = {}) {
               // Более плотный шрифт
               whiteSpace: "nowrap",
               // Запрещаем перенос слов
-              opacity: c ? 0.6 : 1,
+              opacity: l ? 0.6 : 1,
               transition: "opacity 0.3s ease, transform 0.2s ease",
               ...m.list === "selected" && m.id === e.id ? {
                 transform: "scale(1.05)",
@@ -753,16 +752,16 @@ function yn(u = {}) {
       "button",
       {
         onClick: () => Ke(!0),
-        disabled: !c && k.length === 0,
+        disabled: !l && k.length === 0,
         style: {
           marginTop: f() ? "15px" : "30px",
           fontSize: f() ? "14px" : "20px",
           padding: f() ? "6px 12px" : "10px 24px",
           borderRadius: f() ? "8px" : "12px",
-          background: c || k.length > 0 ? "#ec4c44" : "#ccc",
+          background: l || k.length > 0 ? "#ec4c44" : "#ccc",
           color: "white",
           border: "none",
-          cursor: c || k.length > 0 ? "pointer" : "not-allowed"
+          cursor: l || k.length > 0 ? "pointer" : "not-allowed"
         },
         children: "NEXT"
       }
@@ -770,26 +769,26 @@ function yn(u = {}) {
   ] }), tn = () => /* @__PURE__ */ x("div", { style: g.gmCenterScreen, children: [
     /* @__PURE__ */ a("h1", { style: {
       ...g.gmHeadline1,
-      marginTop: (d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || A || $ || O || N || G || X || j || F, "0px"),
-      marginBottom: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || A || $ || O || N || G || X || j || F ? "2px" : "10px",
+      marginTop: (d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q, "0px"),
+      marginBottom: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "2px" : "10px",
       fontSize: d && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "32px" : "clamp(28px, 4vw, 40px)"
     }, children: "Game Over 🎯" }),
     /* @__PURE__ */ x("h2", { style: {
       ...g.gmHeadline2,
-      marginTop: (d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || A || $ || O || N || G || X || j || F, "0px"),
-      marginBottom: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || A || $ || O || N || G || X || j || F ? "2px" : "16px",
+      marginTop: (d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q, "0px"),
+      marginBottom: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "2px" : "16px",
       fontSize: d && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "18px" : "24px"
     }, children: [
       "Your score: ",
-      V,
+      U,
       " out of ",
       C
     ] }),
     /* @__PURE__ */ x("p", { style: {
       ...g.gmBodyM,
       color: "#10b981",
-      marginTop: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || A || $ || O || N || G || X || j || F ? "0px" : "12px",
-      marginBottom: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || A || $ || O || N || G || X || j || F ? "2px" : "16px",
+      marginTop: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "0px" : "12px",
+      marginBottom: d && window.innerWidth > window.innerHeight || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 || $ || O || N || G || X || j || F || q ? "2px" : "16px",
       fontSize: d && window.innerWidth <= 375 && window.innerHeight <= 667 || window.innerWidth === 896 && window.innerHeight === 414 || window.innerWidth === 844 && window.innerHeight === 390 || window.innerWidth === 926 && window.innerHeight === 428 || window.innerWidth === 932 && window.innerHeight === 430 ? "14px" : "16px"
     }, children: [
       "Best score: ",
@@ -805,12 +804,12 @@ function yn(u = {}) {
         {
           onClick: () => {
             ie(), P("start"), setTimeout(() => {
-              S("getready"), ye(null), _(!1);
+              W("getready"), ye(null), _(!1);
             }, 800);
           },
           style: {
             ...g.gmButton,
-            ...y("medium")
+            ...b("medium")
           },
           children: "🔁 Play again"
         }
@@ -819,17 +818,17 @@ function yn(u = {}) {
         "button",
         {
           onClick: () => {
-            P("click"), S("select"), K(null), we(null), Z([]), L(0), le([]), _(!1);
+            P("click"), W("select"), K(null), we(null), Z([]), M(0), le([]), _(!1);
           },
           style: {
             ...g.gmButton,
-            ...y("medium")
+            ...b("medium")
           },
           children: "⬅️ Exit"
         }
       )
     ] })
-  ] }), ve = !d && W, rn = sn(
+  ] }), ve = !d && S, rn = sn(
     () => {
       if (d && window.innerWidth > window.innerHeight || window.innerHeight < 700 || !ve)
         return null;
@@ -881,8 +880,8 @@ function yn(u = {}) {
         "div",
         {
           style: {
-            width: d ? "100%" : We || 1e3,
-            height: d ? "100%" : We || 1e3,
+            width: d ? "100%" : Se || 1e3,
+            height: d ? "100%" : Se || 1e3,
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
@@ -909,12 +908,12 @@ function yn(u = {}) {
               },
               children: /* @__PURE__ */ x("div", { id: "magic-sentence-root", children: [
                 rn,
-                b === "select" ? Ze() : null,
-                b === "time" ? _e() : null,
-                b === "type" ? Qe() : null,
-                b === "getready" ? en() : null,
-                b === "play" ? nn() : null,
-                b === "results" ? tn() : null
+                y === "select" ? Ze() : null,
+                y === "time" ? _e() : null,
+                y === "type" ? Qe() : null,
+                y === "getready" ? en() : null,
+                y === "play" ? nn() : null,
+                y === "results" ? tn() : null
               ] })
             }
           )
@@ -933,10 +932,10 @@ class bn extends dn {
       error: s
     };
   }
-  componentDidCatch(s, W) {
-    console.error("Game Error:", s, W), this.setState({
+  componentDidCatch(s, S) {
+    console.error("Game Error:", s, S), this.setState({
       error: s,
-      errorInfo: W
+      errorInfo: S
     });
   }
   handleReset = () => {
@@ -996,7 +995,7 @@ class bn extends dn {
 export {
   bn as ErrorBoundary,
   yn as Game,
-  B as announceToScreenReader,
+  L as announceToScreenReader,
   cn as createAriaLabel,
   yn as default,
   hn as handleKeyDown,