speakid-build-a-sentence 1.0.0

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

@@ -0,0 +1,1232 @@
+import tn, { useState as f, useCallback as We, useRef as Re, useEffect as ue, useMemo as rn, Component as on } from "react";
+var be = { exports: {} }, pe = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ie;
+function sn() {
+  if (Ie) return pe;
+  Ie = 1;
+  var u = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
+  function m(D, R, y) {
+    var E = null;
+    if (y !== void 0 && (E = "" + y), R.key !== void 0 && (E = "" + R.key), "key" in R) {
+      y = {};
+      for (var p in R)
+        p !== "key" && (y[p] = R[p]);
+    } else y = R;
+    return R = y.ref, {
+      $$typeof: u,
+      type: D,
+      key: E,
+      ref: R !== void 0 ? R : null,
+      props: y
+    };
+  }
+  return pe.Fragment = d, pe.jsx = m, pe.jsxs = m, pe;
+}
+var fe = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var je;
+function an() {
+  return je || (je = 1, process.env.NODE_ENV !== "production" && (function() {
+    function u(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Ee ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case M:
+          return "Fragment";
+        case ge:
+          return "Profiler";
+        case A:
+          return "StrictMode";
+        case le:
+          return "Suspense";
+        case N:
+          return "SuspenseList";
+        case q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case H:
+            return "Portal";
+          case he:
+            return e.displayName || "Context";
+          case de:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case j:
+            var i = e.render;
+            return e = e.displayName, e || (e = i.displayName || i.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case me:
+            return i = e.displayName || null, i !== null ? i : u(e.type) || "Memo";
+          case _:
+            i = e._payload, e = e._init;
+            try {
+              return u(e(i));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function d(e) {
+      return "" + e;
+    }
+    function m(e) {
+      try {
+        d(e);
+        var i = !1;
+      } catch {
+        i = !0;
+      }
+      if (i) {
+        i = console;
+        var h = i.error, v = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return h.call(
+          i,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          v
+        ), d(e);
+      }
+    }
+    function D(e) {
+      if (e === M) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === _)
+        return "<...>";
+      try {
+        var i = u(e);
+        return i ? "<" + i + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function R() {
+      var e = U.A;
+      return e === null ? null : e.getOwner();
+    }
+    function y() {
+      return Error("react-stack-top-frame");
+    }
+    function E(e) {
+      if (O.call(e, "key")) {
+        var i = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (i && i.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, i) {
+      function h() {
+        V || (V = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          i
+        ));
+      }
+      h.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: h,
+        configurable: !0
+      });
+    }
+    function S() {
+      var e = u(this.type);
+      return Z[e] || (Z[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function k(e, i, h, v, L, Q) {
+      var w = h.ref;
+      return e = {
+        $$typeof: ae,
+        type: e,
+        key: i,
+        props: h,
+        _owner: v
+      }, (w !== void 0 ? w : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: S
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: L
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Q
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function W(e, i, h, v, L, Q) {
+      var w = i.children;
+      if (w !== void 0)
+        if (v)
+          if (z(w)) {
+            for (v = 0; v < w.length; v++)
+              P(w[v]);
+            Object.freeze && Object.freeze(w);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else P(w);
+      if (O.call(i, "key")) {
+        w = u(e);
+        var $ = Object.keys(i).filter(function(F) {
+          return F !== "key";
+        });
+        v = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", I[w + v] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          v,
+          w,
+          $,
+          w
+        ), I[w + v] = !0);
+      }
+      if (w = null, h !== void 0 && (m(h), w = "" + h), E(i) && (m(i.key), w = "" + i.key), "key" in i) {
+        h = {};
+        for (var ce in i)
+          ce !== "key" && (h[ce] = i[ce]);
+      } else h = i;
+      return w && p(
+        h,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), k(
+        e,
+        w,
+        h,
+        R(),
+        L,
+        Q
+      );
+    }
+    function P(e) {
+      Y(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === _ && (e._payload.status === "fulfilled" ? Y(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function Y(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === ae;
+    }
+    var J = tn, ae = Symbol.for("react.transitional.element"), H = Symbol.for("react.portal"), M = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), ge = Symbol.for("react.profiler"), de = Symbol.for("react.consumer"), he = Symbol.for("react.context"), j = Symbol.for("react.forward_ref"), le = Symbol.for("react.suspense"), N = Symbol.for("react.suspense_list"), me = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), Ee = Symbol.for("react.client.reference"), U = J.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, z = Array.isArray, l = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    J = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var V, Z = {}, we = J.react_stack_bottom_frame.bind(
+      J,
+      y
+    )(), B = l(D(y)), I = {};
+    fe.Fragment = M, fe.jsx = function(e, i, h) {
+      var v = 1e4 > U.recentlyCreatedOwnerStacks++;
+      return W(
+        e,
+        i,
+        h,
+        !1,
+        v ? Error("react-stack-top-frame") : we,
+        v ? l(D(e)) : B
+      );
+    }, fe.jsxs = function(e, i, h) {
+      var v = 1e4 > U.recentlyCreatedOwnerStacks++;
+      return W(
+        e,
+        i,
+        h,
+        !0,
+        v ? Error("react-stack-top-frame") : we,
+        v ? l(D(e)) : B
+      );
+    };
+  })()), fe;
+}
+var Pe;
+function dn() {
+  return Pe || (Pe = 1, process.env.NODE_ENV === "production" ? be.exports = sn() : be.exports = an()), be.exports;
+}
+var s = dn();
+const ln = `
+  @keyframes magic-sentence-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  
+  @keyframes magic-sentence-pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+  }
+  
+  @keyframes magic-sentence-shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+  }
+  
+  @keyframes magic-sentence-slideIn {
+    from { transform: translateY(-20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+  
+  @keyframes magic-sentence-bounce {
+    0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
+    40%, 43% { transform: translate3d(0, -8px, 0); }
+    70% { transform: translate3d(0, -4px, 0); }
+    90% { transform: translate3d(0, -2px, 0); }
+  }
+  
+  @keyframes magic-sentence-glow {
+    0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
+    50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.8), 0 0 30px rgba(76, 175, 80, 0.6); }
+  }
+`;
+if (typeof document < "u" && !document.getElementById("magic-sentence-keyframes")) {
+  const u = document.createElement("style");
+  u.id = "magic-sentence-keyframes", u.innerHTML = ln, document.head.appendChild(u);
+}
+const He = {
+  spin: {
+    animation: "magic-sentence-spin 1.4s linear infinite"
+  },
+  pulse: {
+    animation: "magic-sentence-pulse 0.6s ease-in-out"
+  },
+  shake: {
+    animation: "magic-sentence-shake 0.4s ease-in-out"
+  },
+  slideIn: {
+    animation: "magic-sentence-slideIn 0.3s ease-out"
+  },
+  bounce: {
+    animation: "magic-sentence-bounce 0.6s ease-in-out"
+  },
+  glow: {
+    animation: "magic-sentence-glow 1s ease-in-out infinite"
+  }
+}, g = {
+  gmCenterScreen: {
+    position: "relative",
+    zIndex: 1,
+    // use percent so the component fits inside the centered square container
+    // (100vh caused overflow on tablets because it measured the viewport, not the container)
+    minHeight: "100%",
+    width: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    color: "#1f2937",
+    padding: "24px 16px",
+    boxSizing: "border-box",
+    transform: "translateY(20px)"
+    // чуть вниз, чтобы компенсировать логотип
+  },
+  gmHeadline1: {
+    fontWeight: 700,
+    fontSize: "clamp(28px, 4vw, 40px)",
+    lineHeight: "110%"
+  },
+  gmHeadline2: {
+    fontWeight: 600,
+    fontSize: "24px",
+    lineHeight: "120%"
+  },
+  gmBodyM: {
+    fontWeight: 400,
+    fontSize: "16px",
+    lineHeight: "140%"
+  },
+  gmBodyS: {
+    fontWeight: 400,
+    fontSize: "14px",
+    lineHeight: "140%",
+    color: "#6b7280"
+  },
+  gmButton: {
+    fontFamily: '"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',
+    fontWeight: 600,
+    fontSize: "16px",
+    padding: "10px 16px",
+    borderRadius: "12px",
+    border: "1px solid #e5e7eb",
+    background: "#ec4c44",
+    color: "#ffffff",
+    cursor: "pointer",
+    boxShadow: "0 6px 18px rgba(236, 76, 68, .18)",
+    transition: "transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease"
+  },
+  gmGameLayout: {
+    position: "relative",
+    width: "100%",
+    // allow the layout to expand within the square container for tablets/laptops
+    maxWidth: "none",
+    // should fill the parent square, not the full viewport
+    minHeight: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center",
+    color: "#1f2937",
+    padding: "16px 8px",
+    margin: "0 auto"
+  },
+  gmInput: {
+    padding: "6px 10px",
+    borderRadius: "6px",
+    border: "1px solid #ccc",
+    fontSize: "16px",
+    fontFamily: '"Geist", system-ui',
+    width: "160px"
+  },
+  // ✅ Обновлено только для качества логотипа
+  gmLogoFixed: {
+    position: "absolute",
+    top: "16px",
+    left: "24px",
+    width: "120px",
+    zIndex: 10,
+    pointerEvents: "none",
+    background: "transparent",
+    transform: "none",
+    willChange: "auto"
+  },
+  gmLogoImg: {
+    height: "clamp(28px, 5vw, 40px)",
+    width: "auto",
+    background: "transparent",
+    backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8dGV4dCB4PSI1MCIgeT0iMjUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNlYzRjNDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlNQRUFLSUQ8L3RleHQ+Cjwvc3ZnPgo=')",
+    backgroundSize: "contain",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    transform: "translateZ(0)",
+    backfaceVisibility: "hidden",
+    WebkitFontSmoothing: "antialiased",
+    objectFit: "contain",
+    imageRendering: "auto"
+  },
+  gmReadyWrapper: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    // use percent so the wrapper scales with the container square
+    height: "60%",
+    gap: "16px"
+  },
+  gmHourglass: {
+    fontSize: "42px",
+    ...He.spin
+  },
+  // ===== Анимационные стили =====
+  ...He
+}, cn = () => {
+  const [u, d] = f([]), m = We((y, E, p) => {
+    const S = [];
+    y.trim() || S.push({
+      type: "empty",
+      message: "Sentence cannot be empty"
+    }), y.length > 41 && S.push({
+      type: "length",
+      message: `Sentence is too long (${y.length}/41 characters)`
+    }), y && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(y) && S.push({
+      type: "characters",
+      message: "Only Latin characters, numbers, spaces and punctuation are allowed"
+    });
+    const W = p.findIndex((P, Y) => Y !== E && P.toLowerCase().trim() === y.toLowerCase().trim());
+    return W !== -1 && S.push({
+      type: "duplicate",
+      message: `Duplicate sentence (same as sentence ${W + 1})`
+    }), d(S), {
+      isValid: S.length === 0,
+      errors: S
+    };
+  }, []), D = We((y) => {
+    const E = [];
+    return y.forEach((p, S) => {
+      const k = m(p, S, y);
+      E.push(...k.errors.map((W) => ({
+        ...W,
+        message: `Sentence ${S + 1}: ${W.message}`
+      })));
+    }), {
+      isValid: E.length === 0,
+      errors: E
+    };
+  }, [m]), R = We(() => {
+    d([]);
+  }, []);
+  return {
+    errors: u,
+    validateSentence: m,
+    validateAllSentences: D,
+    clearErrors: R
+  };
+}, un = (u, d, m) => d && m ? `${u} word "${d}" ${m}` : d ? `${u} word "${d}"` : u, pn = (u, d, m = ["Enter", " "]) => {
+  m.includes(u.key) && (u.preventDefault(), d());
+}, X = (u) => {
+  const d = document.createElement("div");
+  d.setAttribute("aria-live", "polite"), d.setAttribute("aria-atomic", "true"), d.style.position = "absolute", d.style.left = "-10000px", d.style.width = "1px", d.style.height = "1px", d.style.overflow = "hidden", document.body.appendChild(d), d.textContent = u, setTimeout(() => {
+    document.body.removeChild(d);
+  }, 1e3);
+}, fn = () => {
+  const u = document.createElement("style");
+  u.textContent = `
+    #magic-sentence-root, #magic-sentence-root * {
+      box-sizing: border-box;
+      font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+    }
+    #magic-sentence-root img {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      user-select: none;
+    }
+    html, body {
+      margin: 0 !important;
+      padding: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+      zoom: 1 !important;
+    }
+    #root {
+      margin: 0 !important;
+      padding: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      overflow: hidden !important;
+    }
+  `, document.head.appendChild(u);
+}, gn = (u) => [...u].sort(() => Math.random() - 0.5);
+function mn({ logoUrl: u, showLogo: d = !0, baseURL: m } = {}) {
+  const D = Re(null), { validateAllSentences: R, errors: y } = cn(), E = () => i || window.innerWidth < 768, p = () => i || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, S = (n = "medium") => {
+    if (!p())
+      return {
+        padding: "12px 24px",
+        fontSize: "16px",
+        minWidth: "auto"
+      };
+    switch (n) {
+      case "small":
+        return {
+          padding: "4px 6px",
+          fontSize: "9px",
+          minWidth: "40px"
+        };
+      case "medium":
+        return {
+          padding: "5px 8px",
+          fontSize: "10px",
+          minWidth: "50px"
+        };
+      case "large":
+        return {
+          padding: "6px 10px",
+          fontSize: "11px",
+          minWidth: "60px"
+        };
+    }
+  };
+  ue(() => (fn(), () => {
+    document.body.style.overflow = "";
+  }), []);
+  const [k, W] = f("select"), [P, Y] = f(null), [J, ae] = f(null), [H, M] = f([]), [A, ge] = f(0), [de, he] = f([]), [j, le] = f([]), [N, me] = f(20), [_, q] = f(0), [Ee, U] = f(null), [O, z] = f(null), [l, V] = f(!1), [Z, we] = f(
+    Number(localStorage.getItem("magicSentenceBest")) || 0
+  ), B = Re(null), [I, e] = f({ list: null, index: null, side: null }), [i, h] = f(!1), [v, L] = f(1), [Q, w] = f(null), [$, ce] = f(!1), [F, Ce] = f(!1), [K, Ae] = f(!1), [ee, De] = f(!1), [ne, _e] = f(!1), [te, Oe] = f(!1), [ie, ze] = f(!1), [re, Me] = f(!1), [oe, Ne] = f(!1);
+  ue(() => {
+    const n = () => {
+      const r = window.innerWidth, t = window.innerHeight, o = r < 768 || r === 926 && t === 428 || r === 932 && t === 430, a = t < 700, b = r === 768 && t === 1024, T = r === 1024 && t === 768, c = r === 820 && t === 1180, x = r === 1180 && t === 820, se = r === 540 && t === 720, C = r === 720 && t === 540, ke = r === 1024 && t === 1366, Ke = r === 1366 && t === 1024, en = r >= 1200 && t >= 600 && !o;
+      if (ce(en), Ce(b), Ae(T), De(c), _e(x), Oe(se), ze(C), Me(ke), Ne(Ke), h(o), o)
+        w(null), L(1);
+      else if (a)
+        w(null), L(1);
+      else {
+        const nn = Math.min(1e3, Math.min(r, t) * 0.9);
+        w(nn), L(1);
+      }
+    };
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+  }, []);
+  const xe = (n, r, t, o) => {
+    if (l) return;
+    let a = [...de], b = [...j];
+    const T = n === "bank" ? a : b, c = r === "bank" ? a : b, x = T.findIndex((ke) => ke.id === t);
+    if (x === -1) return;
+    const [se] = T.splice(x, 1);
+    let C = o;
+    n === r && C !== null && C !== void 0 && C > x && (C = C - 1), C == null || C < 0 || C > c.length ? c.push(se) : c.splice(C, 0, se), n === "bank" ? a = T : b = T, r === "bank" ? a = c : b = c, he(a), le(b);
+  }, ye = (n, r, t) => {
+    if (n.preventDefault(), l) {
+      e({ list: null, index: null, side: null });
+      return;
+    }
+    const o = n.dataTransfer.getData("application/x-token") || (() => {
+      const a = n.dataTransfer.getData("text/plain");
+      if (!a) return "";
+      const b = de.some((x) => x.id === a), T = j.some((x) => x.id === a), c = b ? "bank" : T ? "selected" : null;
+      return c ? JSON.stringify({ from: c, id: a }) : "";
+    })();
+    if (o) {
+      try {
+        const a = JSON.parse(o);
+        if (!a || !a.id || !a.from) return;
+        xe(a.from, r, a.id, t);
+      } catch {
+      }
+      e({ list: null, index: null, side: null });
+    }
+  }, Be = (n) => {
+    Y(n), M(Array(n).fill("")), W("time");
+  }, Le = (n) => {
+    ae(n), W("type");
+  }, $e = (n, r) => {
+    if (r.length > 41 || r && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(r))
+      return;
+    const o = [...H];
+    o[n] = r, M(o);
+    const a = R(o);
+    a.isValid || console.warn("Validation errors:", a.errors);
+  }, Fe = (n) => n.trim().replace(/\s+/g, " "), Te = (n) => n <= 3 ? 20 : n <= 5 ? 18 : n <= 7 ? 16 : n <= 9 ? 14 : 12, Ge = () => {
+    H.some((r) => r.trim().length === 0) || (M((r) => r.map((t) => Fe(t))), q(0), ge(0), U(null), W("getready"));
+  };
+  ue(() => {
+    if (k === "getready") {
+      const n = setTimeout(() => ve(0), 3e3);
+      return () => clearTimeout(n);
+    }
+  }, [k]);
+  const ve = (n) => {
+    const r = H[n];
+    if (!r) return;
+    const o = gn(
+      r.trim().split(/\s+/).filter(Boolean)
+    ).map((a, b) => ({
+      id: `${Date.now()}-${n}-${b}-${Math.random().toString(36).slice(2)}`,
+      text: a
+    }));
+    he(o), le([]), ge(n), me(J || 20), z(null), V(!1), W("play");
+  };
+  ue(() => {
+    if (k === "play" && !l)
+      if (B.current !== null && window.clearTimeout(B.current), N > 0)
+        B.current = window.setTimeout(() => me((n) => n - 1), 1e3);
+      else {
+        V(!0);
+        const r = H[A].trim().split(/\s+/), t = j.map((c) => c.text), o = r.filter((c) => !t.includes(c)).length, a = t.filter((c) => !r.includes(c)).length, b = r.filter((c, x) => c !== t[x]).length, T = o + a + b;
+        T === 0 ? (z("correct"), G("correct"), X("Correct! Well done!")) : T === 1 ? (z("almost"), G("half"), X("Almost correct! Just one mistake.")) : (z("wrong"), G("wrong"), X("Not quite right. Keep trying!"));
+      }
+    return () => {
+      B.current !== null && window.clearTimeout(B.current);
+    };
+  }, [k, N, l, H, A, j]);
+  const Ye = (n = !0) => {
+    if (l && n) {
+      A + 1 < (P || 0) ? ve(A + 1) : (W("results"), setTimeout(() => Se(), 600));
+      return;
+    }
+    if (n && !l) {
+      const t = H[A].trim().split(/\s+/), o = j.map((x) => x.text), a = t.filter((x) => !o.includes(x)).length, b = o.filter((x) => !t.includes(x)).length, T = t.filter((x, se) => x !== o[se]).length, c = a + b + T;
+      c === 0 && N > 0 ? (q((x) => x + 1), z("correct"), G("correct"), X("Correct! Well done!")) : c === 1 ? (q((x) => x + 0.5), z("almost"), G("half"), X("Almost correct! Just one mistake.")) : (z("wrong"), G("wrong"), X("Not quite right. Keep trying!")), A + 1 < (P || 0) ? setTimeout(() => ve(A + 1), 800) : (W("results"), setTimeout(() => Se(), 600));
+    }
+  };
+  ue(() => {
+    k === "results" && _ > Z && (we(_), localStorage.setItem("magicSentenceBest", String(_)));
+  }, [k, _, Z]);
+  const G = (n) => {
+    const r = new (window.AudioContext || window.webkitAudioContext)(), t = r.createOscillator(), o = r.createGain();
+    switch (t.connect(o), o.connect(r.destination), n) {
+      case "start":
+        t.frequency.value = 500;
+        break;
+      case "click":
+        t.frequency.value = 800;
+        break;
+      case "correct":
+        t.frequency.value = 1e3;
+        break;
+      case "half":
+        t.frequency.value = 700;
+        break;
+      case "wrong":
+        t.frequency.value = 200;
+        break;
+    }
+    o.gain.setValueAtTime(0.1, r.currentTime), t.start(), t.stop(r.currentTime + 0.2);
+  }, Se = () => {
+    const r = Date.now() + 2500, t = ["#ec4c44", "#f7c948", "#6fcf97", "#56ccf2", "#bb6bd9"], o = document.createElement("canvas"), a = o.getContext("2d");
+    o.width = window.innerWidth, o.height = window.innerHeight, o.style.position = "fixed", o.style.top = "0", o.style.left = "0", o.style.pointerEvents = "none", document.body.appendChild(o);
+    const b = Array.from({ length: 100 }).map(() => ({
+      x: Math.random() * o.width,
+      y: Math.random() * o.height - o.height,
+      size: 6 + Math.random() * 6,
+      color: t[Math.floor(Math.random() * t.length)],
+      speed: 2 + Math.random() * 4,
+      tilt: Math.random() * 2 * Math.PI
+    })), T = () => {
+      a.clearRect(0, 0, o.width, o.height), b.forEach((c) => {
+        a.fillStyle = c.color, a.beginPath(), a.ellipse(c.x, c.y, c.size, c.size / 2, c.tilt, 0, 2 * Math.PI), a.fill(), c.y += c.speed, c.x += Math.sin(c.tilt);
+      }), Date.now() < r ? requestAnimationFrame(T) : document.body.removeChild(o);
+    };
+    T();
+  }, Je = () => /* @__PURE__ */ s.jsxs("div", { style: g.gmCenterScreen, children: [
+    /* @__PURE__ */ s.jsx("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ s.jsx("p", { style: g.gmBodyM, children: "Select number of rounds" }),
+    /* @__PURE__ */ s.jsx("div", { style: {
+      display: "flex",
+      gap: p() ? "8px" : "16px",
+      justifyContent: "center"
+    }, children: [3, 4, 5].map((n) => /* @__PURE__ */ s.jsxs(
+      "button",
+      {
+        onClick: () => Be(n),
+        style: {
+          ...g.gmButton,
+          ...S("medium")
+        },
+        children: [
+          n,
+          " ROUNDS"
+        ]
+      },
+      n
+    )) })
+  ] }), Ve = () => /* @__PURE__ */ s.jsxs("div", { style: g.gmCenterScreen, children: [
+    /* @__PURE__ */ s.jsx("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
+    /* @__PURE__ */ s.jsx("p", { style: g.gmBodyM, children: "Select time per round" }),
+    /* @__PURE__ */ s.jsx("div", { style: {
+      display: "flex",
+      gap: p() ? "8px" : "16px",
+      justifyContent: "center"
+    }, children: [15, 20, 30].map((n) => /* @__PURE__ */ s.jsxs(
+      "button",
+      {
+        onClick: () => Le(n),
+        style: {
+          ...g.gmButton,
+          ...S("medium")
+        },
+        children: [
+          n,
+          "s"
+        ]
+      },
+      n
+    )) })
+  ] }), Xe = () => /* @__PURE__ */ s.jsxs("div", { style: g.gmCenterScreen, children: [
+    /* @__PURE__ */ s.jsxs("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
+      "Type down ",
+      P,
+      " sentence",
+      P && P > 1 ? "s" : "",
+      " for your student"
+    ] }),
+    /* @__PURE__ */ s.jsx("p", { style: { ...g.gmBodyS, marginBottom: "16px", marginTop: "0px", color: "#6b7280" }, children: "Maximum 41 characters per sentence" }),
+    /* @__PURE__ */ s.jsx("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      gap: 12,
+      width: "auto",
+      // Автоматическая ширина по содержимому
+      minWidth: "fit-content",
+      // Минимальная ширина по содержимому
+      maxWidth: "600px"
+      // Ограничиваем максимальную ширину
+    }, children: H.map((n, r) => /* @__PURE__ */ s.jsx(
+      "input",
+      {
+        value: n,
+        placeholder: `Sentence ${r + 1}`,
+        onChange: (t) => $e(r, t.target.value),
+        style: {
+          ...g.gmInput,
+          padding: p() ? "8px 12px" : "12px 16px",
+          fontSize: p() ? "14px" : "16px",
+          width: "100%",
+          // Поля теперь будут шире благодаря увеличенной ширине контейнера
+          textAlign: "center"
+          // Центрируем placeholder текст
+        }
+      },
+      r
+    )) }),
+    /* @__PURE__ */ s.jsx(
+      "button",
+      {
+        onClick: Ge,
+        disabled: H.some((n) => n.trim().length === 0),
+        style: {
+          ...g.gmButton,
+          marginTop: 30,
+          background: H.some((n) => n.trim().length === 0) ? "#ccc" : "#ec4c44",
+          cursor: H.some((n) => n.trim().length === 0) ? "not-allowed" : "pointer",
+          ...S("large")
+        },
+        children: "PLAY"
+      }
+    )
+  ] }), qe = () => /* @__PURE__ */ s.jsxs("div", { style: g.gmReadyWrapper, children: [
+    /* @__PURE__ */ s.jsx("h1", { style: {
+      ...g.gmHeadline1,
+      fontSize: p() ? "36px" : "72px",
+      color: "#ec4c44",
+      marginBottom: "20px",
+      animation: "pulse 1s ease-in-out infinite"
+    }, children: "GET READY" }),
+    /* @__PURE__ */ s.jsx("div", { style: g.gmHourglass, children: "⏳" })
+  ] }), Ue = () => /* @__PURE__ */ s.jsxs("div", { style: g.gmGameLayout, children: [
+    /* @__PURE__ */ s.jsxs("h2", { style: {
+      marginBottom: p() ? "5px" : "10px",
+      fontSize: p() ? "16px" : "20px"
+    }, children: [
+      "Round ",
+      A + 1,
+      "/",
+      P,
+      " — ",
+      l ? "TIME'S UP!" : `Time: ${N}s`
+    ] }),
+    /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        style: {
+          width: "60%",
+          height: p() ? "8px" : "14px",
+          borderRadius: 8,
+          background: "#eee",
+          overflow: "hidden",
+          marginBottom: p() ? "10px" : "20px"
+        },
+        children: /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            style: {
+              height: "100%",
+              width: `${N / (J || 20) * 100}%`,
+              background: N <= 5 ? "#ec4c44" : "#4caf50",
+              transition: "width 1s linear"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        onDragOver: (n) => n.preventDefault(),
+        onDrop: (n) => ye(n, "bank", null),
+        style: {
+          display: "flex",
+          flexWrap: E() ? "wrap" : "nowrap",
+          gap: i || window.innerWidth < 768 ? "6px" : "10px",
+          justifyContent: "center",
+          marginBottom: i || window.innerWidth < 768 ? "15px" : "30px",
+          padding: i || window.innerWidth < 768 ? "5px" : "10px",
+          width: "100%",
+          boxSizing: "border-box"
+        },
+        children: de.map((n, r) => /* @__PURE__ */ s.jsx(
+          "div",
+          {
+            draggable: !l,
+            role: "button",
+            tabIndex: l ? -1 : 0,
+            "aria-label": l ? `Word: ${n.text} (time expired)` : un("Drag word", n.text, "to build sentence"),
+            onDragStart: (t) => {
+              if (l) {
+                t.preventDefault();
+                return;
+              }
+              t.dataTransfer.setData(
+                "application/x-token",
+                JSON.stringify({ from: "bank", id: n.id })
+              ), t.dataTransfer.setData("text/plain", n.id), X(`Dragging word: ${n.text}`);
+            },
+            onKeyDown: (t) => {
+              l || pn(t, () => xe("bank", "selected", n.id, null));
+            },
+            onDragOver: (t) => t.preventDefault(),
+            onDrop: (t) => {
+              const o = t.currentTarget.getBoundingClientRect(), a = o.left + o.width / 2, b = t.clientX > a ? r + 1 : r;
+              e({ list: null, index: null, side: null }), t.stopPropagation(), ye(t, "bank", b);
+            },
+            onDragEnter: (t) => {
+              if (l) return;
+              const o = t.currentTarget.getBoundingClientRect(), a = o.left + o.width / 2;
+              e({ list: "bank", index: r, side: t.clientX > a ? "right" : "left" });
+            },
+            onDragLeave: () => e({ list: null, index: null, side: null }),
+            onClick: () => {
+              l || xe("bank", "selected", n.id, null);
+            },
+            style: {
+              padding: i || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
+              borderRadius: i || window.innerWidth < 768 ? "6px" : "10px",
+              border: "1px solid #ccc",
+              background: l ? "#f0f0f0" : "#f9f9f9",
+              cursor: l ? "not-allowed" : "pointer",
+              fontSize: i || window.innerWidth < 768 ? "12px" : "18px",
+              borderLeft: I.list === "bank" && I.index === r && I.side === "left" ? "3px solid #3b82f6" : "1px solid #ccc",
+              borderRight: I.list === "bank" && I.index === r && I.side === "right" ? "3px solid #3b82f6" : "1px solid #ccc",
+              flexShrink: 0,
+              flexBasis: "auto",
+              opacity: l ? 0.6 : 1,
+              transition: "opacity 0.3s ease"
+            },
+            children: n.text
+          },
+          n.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        onDragOver: (n) => n.preventDefault(),
+        onDrop: (n) => ye(n, "selected", null),
+        style: {
+          minHeight: i || window.innerWidth < 768 ? "50px" : "70px",
+          width: "auto",
+          // Автоматическая ширина в зависимости от содержимого
+          maxWidth: "none",
+          // Убираем ограничение максимальной ширины
+          minWidth: "245px",
+          // Минимальная ширина для растягивания
+          border: O === "correct" ? "2px dashed #4caf50" : O === "almost" ? "2px dashed #ff9800" : O === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
+          borderRadius: i || window.innerWidth < 768 ? "8px" : "12px",
+          padding: i || window.innerWidth < 768 ? "8px" : "12px",
+          display: "flex",
+          flexWrap: E() ? "wrap" : "nowrap",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: `${Te(j.length)}px`,
+          background: O === "correct" ? "#e8f5e8" : O === "almost" ? "#fff3e0" : O === "wrong" ? "#ffebee" : "#fafafa",
+          overflowX: E() ? "hidden" : "auto",
+          whiteSpace: E() ? "normal" : "nowrap"
+        },
+        children: j.map((n, r) => /* @__PURE__ */ s.jsx(
+          "span",
+          {
+            draggable: !l,
+            onDragStart: (t) => {
+              if (l) {
+                t.preventDefault();
+                return;
+              }
+              t.dataTransfer.setData(
+                "application/x-token",
+                JSON.stringify({ from: "selected", id: n.id })
+              ), t.dataTransfer.setData("text/plain", n.id);
+            },
+            onDragOver: (t) => t.preventDefault(),
+            onDrop: (t) => {
+              const o = t.currentTarget.getBoundingClientRect(), a = o.left + o.width / 2, b = t.clientX > a ? r + 1 : r;
+              e({ list: null, index: null, side: null }), t.stopPropagation(), ye(t, "selected", b);
+            },
+            onDragEnter: (t) => {
+              if (l) return;
+              const o = t.currentTarget.getBoundingClientRect(), a = o.left + o.width / 2;
+              e({ list: "selected", index: r, side: t.clientX > a ? "right" : "left" });
+            },
+            onDragLeave: () => e({ list: null, index: null, side: null }),
+            onClick: () => {
+              l || xe("selected", "bank", n.id, null);
+            },
+            title: l ? "Time expired" : "Click to remove back to bank",
+            style: {
+              padding: p() ? "4px 6px" : "6px 10px",
+              margin: p() ? "2px" : "4px",
+              borderRadius: p() ? "4px" : "8px",
+              background: l ? "#f0f0f0" : "#ffe9e7",
+              border: l ? "1px solid #ccc" : "1px solid #ec4c44",
+              borderLeft: I.list === "selected" && I.index === r && I.side === "left" ? "3px solid #3b82f6" : void 0,
+              borderRight: I.list === "selected" && I.index === r && I.side === "right" ? "3px solid #3b82f6" : void 0,
+              cursor: l ? "not-allowed" : "pointer",
+              userSelect: "none",
+              fontSize: `${Te(j.length)}px`,
+              // Адаптивный размер шрифта для слов
+              fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
+              // Более плотный шрифт
+              whiteSpace: "nowrap",
+              // Запрещаем перенос слов
+              opacity: l ? 0.6 : 1,
+              transition: "opacity 0.3s ease"
+            },
+            children: n.text
+          },
+          n.id
+        ))
+      }
+    ),
+    /* @__PURE__ */ s.jsx(
+      "button",
+      {
+        onClick: () => Ye(!0),
+        disabled: !l && j.length === 0,
+        style: {
+          marginTop: p() ? "15px" : "30px",
+          fontSize: p() ? "14px" : "20px",
+          padding: p() ? "6px 12px" : "10px 24px",
+          borderRadius: p() ? "8px" : "12px",
+          background: l || j.length > 0 ? "#ec4c44" : "#ccc",
+          color: "white",
+          border: "none",
+          cursor: l || j.length > 0 ? "pointer" : "not-allowed"
+        },
+        children: "NEXT"
+      }
+    )
+  ] }), Ze = () => /* @__PURE__ */ s.jsxs("div", { style: g.gmCenterScreen, children: [
+    /* @__PURE__ */ s.jsx("h1", { style: {
+      ...g.gmHeadline1,
+      marginTop: (i && 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 || F || K || ee || ne || te || ie || re || oe, "0px"),
+      marginBottom: i && 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 || F || K || ee || ne || te || ie || re || oe ? "2px" : "10px",
+      fontSize: i && 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__ */ s.jsxs("h2", { style: {
+      ...g.gmHeadline2,
+      marginTop: (i && 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 || F || K || ee || ne || te || ie || re || oe, "0px"),
+      marginBottom: i && 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 || F || K || ee || ne || te || ie || re || oe ? "2px" : "16px",
+      fontSize: i && 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: ",
+      _,
+      " out of ",
+      P
+    ] }),
+    /* @__PURE__ */ s.jsxs("p", { style: {
+      ...g.gmBodyM,
+      color: "#10b981",
+      marginTop: i && 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 || F || K || ee || ne || te || ie || re || oe ? "0px" : "12px",
+      marginBottom: i && 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 || F || K || ee || ne || te || ie || re || oe ? "2px" : "16px",
+      fontSize: i && 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: ",
+      Z
+    ] }),
+    /* @__PURE__ */ s.jsxs("div", { style: {
+      display: "flex",
+      gap: i && window.innerWidth > window.innerHeight || i && 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 ? "6px" : "12px",
+      marginTop: i && window.innerWidth > window.innerHeight || i && 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 ? "2px" : window.innerWidth === 1366 && window.innerHeight === 766 || window.innerWidth === 1366 && window.innerHeight === 768 || window.innerWidth === 1280 && window.innerHeight === 720 || window.innerWidth === 1440 && window.innerHeight === 900 || $ ? "12px" : "24px"
+    }, children: [
+      /* @__PURE__ */ s.jsx(
+        "button",
+        {
+          onClick: () => {
+            Se(), G("start"), setTimeout(() => {
+              W("getready"), U(null), V(!1);
+            }, 800);
+          },
+          style: {
+            ...g.gmButton,
+            ...S("medium")
+          },
+          children: "🔁 Play again"
+        }
+      ),
+      /* @__PURE__ */ s.jsx(
+        "button",
+        {
+          onClick: () => {
+            G("click"), W("select"), Y(null), ae(null), M([]), q(0), le([]), V(!1);
+          },
+          style: {
+            ...g.gmButton,
+            ...S("medium")
+          },
+          children: "⬅️ Exit"
+        }
+      )
+    ] })
+  ] }), Qe = rn(
+    () => {
+      let n = u;
+      return !n && m && (n = `${m.endsWith("/") ? m.slice(0, -1) : m}/logo.svg`), /* @__PURE__ */ s.jsx("div", { style: {
+        ...g.gmLogoFixed,
+        display: !d || i && window.innerWidth > window.innerHeight || window.innerHeight < 700 ? "none" : "block"
+      }, children: n ? /* @__PURE__ */ s.jsx(
+        "img",
+        {
+          src: n,
+          alt: "SPEAKID Logo",
+          style: g.gmLogoImg,
+          loading: "lazy"
+        }
+      ) : /* @__PURE__ */ s.jsx("div", { style: g.gmLogoImg, children: "SPEAKID" }) });
+    },
+    [i, d, u, m]
+  );
+  return /* @__PURE__ */ s.jsx(
+    "div",
+    {
+      ref: D,
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+        transition: "background 0.3s ease",
+        overflow: "hidden",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      children: /* @__PURE__ */ s.jsx(
+        "div",
+        {
+          style: {
+            width: i ? "100%" : Q || 1e3,
+            height: i ? "100%" : Q || 1e3,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "hidden",
+            borderRadius: i ? 0 : "20px",
+            background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
+            boxShadow: i ? "none" : "0 0 40px rgba(0,0,0,0.1)",
+            margin: i ? "0 auto" : "unset",
+            position: "relative"
+          },
+          children: /* @__PURE__ */ s.jsx(
+            "div",
+            {
+              style: {
+                transform: "none",
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ s.jsxs("div", { id: "magic-sentence-root", children: [
+                !i && Qe,
+                k === "select" && Je(),
+                k === "time" && Ve(),
+                k === "type" && Xe(),
+                k === "getready" && qe(),
+                k === "play" && Ue(),
+                k === "results" && Ze()
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+class wn extends on {
+  constructor(d) {
+    super(d), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError(d) {
+    return {
+      hasError: !0,
+      error: d
+    };
+  }
+  componentDidCatch(d, m) {
+    console.error("Game Error:", d, m), this.setState({
+      error: d,
+      errorInfo: m
+    });
+  }
+  handleReset = () => {
+    this.setState({ hasError: !1, error: void 0, errorInfo: void 0 });
+  };
+  render() {
+    return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ s.jsxs("div", { style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: "100vh",
+      padding: "20px",
+      textAlign: "center",
+      backgroundColor: "#fef2f2",
+      color: "#dc2626",
+      fontFamily: "system-ui, sans-serif"
+    }, children: [
+      /* @__PURE__ */ s.jsx("h1", { style: { fontSize: "24px", marginBottom: "16px" }, children: "🚨 Oops! Something went wrong" }),
+      /* @__PURE__ */ s.jsx("p", { style: { fontSize: "16px", marginBottom: "24px", maxWidth: "500px" }, children: "The game encountered an unexpected error. Don't worry, your progress is saved!" }),
+      /* @__PURE__ */ s.jsx(
+        "button",
+        {
+          onClick: this.handleReset,
+          style: {
+            padding: "12px 24px",
+            fontSize: "16px",
+            backgroundColor: "#dc2626",
+            color: "white",
+            border: "none",
+            borderRadius: "8px",
+            cursor: "pointer",
+            transition: "background-color 0.2s"
+          },
+          onMouseOver: (d) => d.currentTarget.style.backgroundColor = "#b91c1c",
+          onMouseOut: (d) => d.currentTarget.style.backgroundColor = "#dc2626",
+          children: "🔄 Restart Game"
+        }
+      ),
+      typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ s.jsxs("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
+        /* @__PURE__ */ s.jsx("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
+        /* @__PURE__ */ s.jsxs("pre", { style: {
+          backgroundColor: "#f3f4f6",
+          padding: "12px",
+          borderRadius: "4px",
+          fontSize: "12px",
+          overflow: "auto",
+          marginTop: "8px"
+        }, children: [
+          this.state.error.toString(),
+          this.state.errorInfo?.componentStack
+        ] })
+      ] })
+    ] }) : this.props.children;
+  }
+}
+export {
+  wn as ErrorBoundary,
+  mn as Game,
+  X as announceToScreenReader,
+  un as createAriaLabel,
+  mn as default,
+  pn as handleKeyDown,
+  cn as useValidation
+};
+//# sourceMappingURL=speakid-build-a-sentence.es.js.map