speakid-build-a-sentence 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Game.d.ts.map +1 -1
  2. package/dist/speakid-build-a-sentence.cjs.js +2 -2
  3. package/dist/speakid-build-a-sentence.cjs.js.map +1 -1
  4. package/dist/speakid-build-a-sentence.es.js +171 -161
  5. package/dist/speakid-build-a-sentence.es.js.map +1 -1
  6. package/package.json +1 -1
package/dist/speakid-build-a-sentence.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as a, jsxs as f } from "react/jsx-runtime";
2
- import { useState as p, useCallback as ce, useRef as We, useEffect as V, Component as Ye } from "react";
1
+ import { jsx as a, jsxs as m } from "react/jsx-runtime";
2
+ import { useState as p, useCallback as pe, useRef as We, useEffect as V, Component as Ye } from "react";
3
3
  const Ke = `
4
4
  @keyframes magic-sentence-spin {
5
5
  from { transform: rotate(0deg); }
@@ -35,8 +35,8 @@ const Ke = `
35
35
  }
36
36
  `;
37
37
  if (typeof document < "u" && !document.getElementById("magic-sentence-keyframes")) {
38
- const w = document.createElement("style");
39
- w.id = "magic-sentence-keyframes", w.innerHTML = Ke, document.head.appendChild(w);
38
+ const h = document.createElement("style");
39
+ h.id = "magic-sentence-keyframes", h.innerHTML = Ke, document.head.appendChild(h);
40
40
  }
41
41
  const Se = {
42
42
  spin: {
@@ -176,7 +176,7 @@ const Se = {
176
176
  // ===== Анимационные стили =====
177
177
  ...Se
178
178
  }, _e = () => {
179
- const [w, r] = p([]), y = ce((S, M, C) => {
179
+ const [h, r] = p([]), y = pe((S, M, C) => {
180
180
  const c = [];
181
181
  S.trim() || c.push({
182
182
  type: "empty",
@@ -188,45 +188,47 @@ const Se = {
188
188
  type: "characters",
189
189
  message: "Only Latin characters, numbers, spaces and punctuation are allowed"
190
190
  });
191
- const m = C.findIndex((k, I) => I !== M && k.toLowerCase().trim() === S.toLowerCase().trim());
192
- return m !== -1 && c.push({
191
+ const f = C.findIndex((k, I) => I !== M && k.toLowerCase().trim() === S.toLowerCase().trim());
192
+ return f !== -1 && c.push({
193
193
  type: "duplicate",
194
- message: `Duplicate sentence (same as sentence ${m + 1})`
194
+ message: `Duplicate sentence (same as sentence ${f + 1})`
195
195
  }), r(c), {
196
196
  isValid: c.length === 0,
197
197
  errors: c
198
198
  };
199
- }, []), B = ce((S) => {
199
+ }, []), B = pe((S) => {
200
200
  const M = [];
201
201
  return S.forEach((C, c) => {
202
202
  const D = y(C, c, S);
203
- M.push(...D.errors.map((m) => ({
204
- ...m,
205
- message: `Sentence ${c + 1}: ${m.message}`
203
+ M.push(...D.errors.map((f) => ({
204
+ ...f,
205
+ message: `Sentence ${c + 1}: ${f.message}`
206
206
  })));
207
207
  }), {
208
208
  isValid: M.length === 0,
209
209
  errors: M
210
210
  };
211
- }, [y]), ne = ce(() => {
211
+ }, [y]), ne = pe(() => {
212
212
  r([]);
213
213
  }, []);
214
214
  return {
215
- errors: w,
215
+ errors: h,
216
216
  validateSentence: y,
217
217
  validateAllSentences: B,
218
218
  clearErrors: ne
219
219
  };
220
- }, en = (w, r, y) => r && y ? `${w} word "${r}" ${y}` : r ? `${w} word "${r}"` : w, nn = (w, r, y = ["Enter", " "]) => {
221
- y.includes(w.key) && (w.preventDefault(), r());
222
- }, E = (w) => {
220
+ }, en = (h, r, y) => r && y ? `${h} word "${r}" ${y}` : r ? `${h} word "${r}"` : h, nn = (h, r, y = ["Enter", " "]) => {
221
+ y.includes(h.key) && (h.preventDefault(), r());
222
+ }, E = (h) => {
223
223
  const r = document.createElement("div");
224
- r.setAttribute("aria-live", "polite"), r.setAttribute("aria-atomic", "true"), r.style.position = "absolute", r.style.left = "-10000px", r.style.width = "1px", r.style.height = "1px", r.style.overflow = "hidden", document.body.appendChild(r), r.textContent = w, setTimeout(() => {
224
+ r.setAttribute("aria-live", "polite"), r.setAttribute("aria-atomic", "true"), r.style.position = "absolute", r.style.left = "-10000px", r.style.width = "1px", r.style.height = "1px", r.style.overflow = "hidden", document.body.appendChild(r), r.textContent = h, setTimeout(() => {
225
225
  document.body.removeChild(r);
226
226
  }, 1e3);
227
227
  }, tn = () => {
228
- const w = document.createElement("style");
229
- w.textContent = `
228
+ const h = document.createElement("style");
229
+ h.id = "magic-sentence-reset";
230
+ const r = document.getElementById("magic-sentence-reset");
231
+ r && r.remove(), h.textContent = `
230
232
  #magic-sentence-root, #magic-sentence-root * {
231
233
  box-sizing: border-box;
232
234
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
@@ -252,10 +254,10 @@ const Se = {
252
254
  height: 100% !important;
253
255
  overflow: hidden !important;
254
256
  }
255
- `, document.head.appendChild(w);
256
- }, on = (w) => [...w].sort(() => Math.random() - 0.5);
257
- function ln(w = {}) {
258
- const { logoUrl: r, showLogo: y = !0, baseURL: B } = w, ne = We(null), { validateAllSentences: S, errors: M } = _e(), C = () => l || window.innerWidth < 768, c = () => l || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, D = (e = "medium") => {
257
+ `, document.head.appendChild(h);
258
+ }, on = (h) => [...h].sort(() => Math.random() - 0.5);
259
+ function ln(h = {}) {
260
+ const { logoUrl: r, showLogo: y = !0, baseURL: B } = h, ne = We(null), { validateAllSentences: S, errors: M } = _e(), C = () => d || window.innerWidth < 768, c = () => d || window.innerWidth < 768 || window.innerWidth >= 320 && window.innerWidth <= 932 && window.innerHeight >= 390 && window.innerHeight <= 932, D = (e = "medium") => {
259
261
  if (!c())
260
262
  return {
261
263
  padding: "12px 24px",
@@ -284,15 +286,17 @@ function ln(w = {}) {
284
286
  }
285
287
  };
286
288
  V(() => (tn(), () => {
287
- document.body.style.overflow = "";
289
+ document.documentElement.style.overflow = "", document.body.style.overflow = "";
290
+ const e = document.getElementById("magic-sentence-reset");
291
+ e && e.remove();
288
292
  }), []);
289
- const [m, k] = p("select"), [I, pe] = p(null), [ge, he] = p(null), [H, q] = p([]), [T, we] = p(0), [te, ue] = p([]), [v, ie] = p([]), [L, me] = p(20), [J, Y] = p(0), [rn, fe] = p(null), [A, z] = p(null), [d, K] = p(!1), [oe, ve] = p(
293
+ const [f, k] = p("select"), [I, ge] = p(null), [he, we] = p(null), [H, q] = p([]), [T, ue] = p(0), [te, me] = p([]), [v, ie] = p([]), [L, fe] = p(20), [J, Y] = p(0), [rn, xe] = p(null), [A, z] = p(null), [l, K] = p(!1), [oe, ve] = p(
290
294
  Number(localStorage.getItem("magicSentenceBest")) || 0
291
- ), U = We(null), [b, P] = p({ list: null, index: null, side: null }), [l, ke] = p(!1), [sn, re] = p(1), [xe, se] = p(null), [He, Ie] = p(!1), [$, Ce] = p(!1), [G, De] = p(!1), [N, Te] = p(!1), [j, Pe] = p(!1), [O, Re] = p(!1), [F, ze] = p(!1), [Z, Ee] = p(!1), [Q, Be] = p(!1);
295
+ ), U = We(null), [b, P] = p({ list: null, index: null, side: null }), [d, ke] = p(!1), [sn, re] = p(1), [ye, se] = p(null), [He, Ie] = p(!1), [$, Ce] = p(!1), [G, De] = p(!1), [N, Te] = p(!1), [j, Pe] = p(!1), [O, Re] = p(!1), [F, ze] = p(!1), [Z, Ee] = p(!1), [Q, Be] = p(!1);
292
296
  V(() => {
293
297
  const e = () => {
294
- const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, o = n < 700, u = t === 768 && n === 1024, x = t === 1024 && n === 768, s = t === 820 && n === 1180, h = t === 1180 && n === 820, X = t === 540 && n === 720, W = t === 720 && n === 540, le = t === 1024 && n === 1366, Ue = t === 1366 && n === 1024, Ve = t >= 1200 && n >= 600 && !i;
295
- if (Ie(Ve), Ce(u), De(x), Te(s), Pe(h), Re(X), ze(W), Ee(le), Be(Ue), ke(i), i)
298
+ const t = window.innerWidth, n = window.innerHeight, i = t < 768 || t === 926 && n === 428 || t === 932 && n === 430, o = n < 700, u = t === 768 && n === 1024, x = t === 1024 && n === 768, s = t === 820 && n === 1180, w = t === 1180 && n === 820, X = t === 540 && n === 720, W = t === 720 && n === 540, ce = t === 1024 && n === 1366, Ue = t === 1366 && n === 1024, Ve = t >= 1200 && n >= 600 && !i;
299
+ if (Ie(Ve), Ce(u), De(x), Te(s), Pe(w), Re(X), ze(W), Ee(ce), Be(Ue), ke(i), i)
296
300
  se(null), re(1);
297
301
  else if (o)
298
302
  se(null), re(1);
@@ -304,22 +308,22 @@ function ln(w = {}) {
304
308
  return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
305
309
  }, []);
306
310
  const _ = (e, t, n, i) => {
307
- if (d) return;
311
+ if (l) return;
308
312
  let o = [...te], u = [...v];
309
- const x = e === "bank" ? o : u, s = t === "bank" ? o : u, h = x.findIndex((le) => le.id === n);
310
- if (h === -1) return;
311
- const [X] = x.splice(h, 1);
313
+ const x = e === "bank" ? o : u, s = t === "bank" ? o : u, w = x.findIndex((ce) => ce.id === n);
314
+ if (w === -1) return;
315
+ const [X] = x.splice(w, 1);
312
316
  let W = i;
313
- e === t && W !== null && W !== void 0 && W > h && (W = W - 1), W == null || W < 0 || W > s.length ? s.push(X) : s.splice(W, 0, X), e === "bank" ? o = x : u = x, t === "bank" ? o = s : u = s, ue(o), ie(u);
317
+ e === t && W !== null && W !== void 0 && W > w && (W = W - 1), W == null || W < 0 || W > s.length ? s.push(X) : s.splice(W, 0, X), e === "bank" ? o = x : u = x, t === "bank" ? o = s : u = s, me(o), ie(u);
314
318
  }, ee = (e, t, n) => {
315
- if (e.preventDefault(), d) {
319
+ if (e.preventDefault(), l) {
316
320
  P({ list: null, index: null, side: null });
317
321
  return;
318
322
  }
319
323
  const i = e.dataTransfer.getData("application/x-token") || (() => {
320
324
  const o = e.dataTransfer.getData("text/plain");
321
325
  if (!o) return "";
322
- const u = te.some((h) => h.id === o), x = v.some((h) => h.id === o), s = u ? "bank" : x ? "selected" : null;
326
+ const u = te.some((w) => w.id === o), x = v.some((w) => w.id === o), s = u ? "bank" : x ? "selected" : null;
323
327
  return s ? JSON.stringify({ from: s, id: o }) : "";
324
328
  })();
325
329
  if (i) {
@@ -332,9 +336,9 @@ function ln(w = {}) {
332
336
  P({ list: null, index: null, side: null });
333
337
  }
334
338
  }, Me = (e) => {
335
- pe(e), q(Array(e).fill("")), k("time");
339
+ ge(e), q(Array(e).fill("")), k("time");
336
340
  }, Le = (e) => {
337
- he(e), k("type");
341
+ we(e), k("type");
338
342
  }, Ae = (e, t) => {
339
343
  if (t.length > 41 || t && !/^[a-zA-Z0-9\s.,!?;:'"-]*$/.test(t))
340
344
  return;
@@ -342,15 +346,15 @@ function ln(w = {}) {
342
346
  i[e] = t, q(i);
343
347
  const o = S(i);
344
348
  o.isValid || console.warn("Validation errors:", o.errors);
345
- }, $e = (e) => e.trim().replace(/\s+/g, " "), ye = (e) => e <= 3 ? 20 : e <= 5 ? 18 : e <= 7 ? 16 : e <= 9 ? 14 : 12, Ge = () => {
346
- H.some((t) => t.trim().length === 0) || (q((t) => t.map((n) => $e(n))), Y(0), we(0), fe(null), k("getready"));
349
+ }, $e = (e) => e.trim().replace(/\s+/g, " "), be = (e) => e <= 3 ? 20 : e <= 5 ? 18 : e <= 7 ? 16 : e <= 9 ? 14 : 12, Ge = () => {
350
+ H.some((t) => t.trim().length === 0) || (q((t) => t.map((n) => $e(n))), Y(0), ue(0), xe(null), k("getready"));
347
351
  };
348
352
  V(() => {
349
- if (m === "getready") {
353
+ if (f === "getready") {
350
354
  const e = setTimeout(() => ae(0), 3e3);
351
355
  return () => clearTimeout(e);
352
356
  }
353
- }, [m]);
357
+ }, [f]);
354
358
  const ae = (e) => {
355
359
  const t = H[e];
356
360
  if (!t) return;
@@ -360,34 +364,34 @@ function ln(w = {}) {
360
364
  id: `${Date.now()}-${e}-${u}-${Math.random().toString(36).slice(2)}`,
361
365
  text: o
362
366
  }));
363
- ue(i), ie([]), we(e), me(ge || 20), z(null), K(!1), k("play");
367
+ me(i), ie([]), ue(e), fe(he || 20), z(null), K(!1), k("play");
364
368
  };
365
369
  V(() => {
366
- if (m === "play" && !d)
370
+ if (f === "play" && !l)
367
371
  if (U.current !== null && window.clearTimeout(U.current), L > 0)
368
- U.current = window.setTimeout(() => me((e) => e - 1), 1e3);
372
+ U.current = window.setTimeout(() => fe((e) => e - 1), 1e3);
369
373
  else {
370
374
  K(!0);
371
- const t = H[T].trim().split(/\s+/), n = v.map((s) => s.text), i = t.filter((s) => !n.includes(s)).length, o = n.filter((s) => !t.includes(s)).length, u = t.filter((s, h) => s !== n[h]).length, x = i + o + u;
375
+ const t = H[T].trim().split(/\s+/), n = v.map((s) => s.text), i = t.filter((s) => !n.includes(s)).length, o = n.filter((s) => !t.includes(s)).length, u = t.filter((s, w) => s !== n[w]).length, x = i + o + u;
372
376
  x === 0 ? (z("correct"), R("correct"), E("Correct! Well done!")) : x === 1 ? (z("almost"), R("half"), E("Almost correct! Just one mistake.")) : (z("wrong"), R("wrong"), E("Not quite right. Keep trying!"));
373
377
  }
374
378
  return () => {
375
379
  U.current !== null && window.clearTimeout(U.current);
376
380
  };
377
- }, [m, L, d, H, T, v]);
381
+ }, [f, L, l, H, T, v]);
378
382
  const Ne = (e = !0) => {
379
- if (d && e) {
383
+ if (l && e) {
380
384
  T + 1 < (I || 0) ? ae(T + 1) : (k("results"), setTimeout(() => de(), 600));
381
385
  return;
382
386
  }
383
- if (e && !d) {
384
- const n = H[T].trim().split(/\s+/), i = v.map((h) => h.text), o = n.filter((h) => !i.includes(h)).length, u = i.filter((h) => !n.includes(h)).length, x = n.filter((h, X) => h !== i[X]).length, s = o + u + x;
385
- s === 0 && L > 0 ? (Y((h) => h + 1), z("correct"), R("correct"), E("Correct! Well done!")) : s === 1 ? (Y((h) => h + 0.5), z("almost"), R("half"), E("Almost correct! Just one mistake.")) : (z("wrong"), R("wrong"), E("Not quite right. Keep trying!")), T + 1 < (I || 0) ? setTimeout(() => ae(T + 1), 800) : (k("results"), setTimeout(() => de(), 600));
387
+ if (e && !l) {
388
+ const n = H[T].trim().split(/\s+/), i = v.map((w) => w.text), o = n.filter((w) => !i.includes(w)).length, u = i.filter((w) => !n.includes(w)).length, x = n.filter((w, X) => w !== i[X]).length, s = o + u + x;
389
+ s === 0 && L > 0 ? (Y((w) => w + 1), z("correct"), R("correct"), E("Correct! Well done!")) : s === 1 ? (Y((w) => w + 0.5), z("almost"), R("half"), E("Almost correct! Just one mistake.")) : (z("wrong"), R("wrong"), E("Not quite right. Keep trying!")), T + 1 < (I || 0) ? setTimeout(() => ae(T + 1), 800) : (k("results"), setTimeout(() => de(), 600));
386
390
  }
387
391
  };
388
392
  V(() => {
389
- m === "results" && J > oe && (ve(J), localStorage.setItem("magicSentenceBest", String(J)));
390
- }, [m, J, oe]);
393
+ f === "results" && J > oe && (ve(J), localStorage.setItem("magicSentenceBest", String(J)));
394
+ }, [f, J, oe]);
391
395
  const R = (e) => {
392
396
  const t = new (window.AudioContext || window.webkitAudioContext)(), n = t.createOscillator(), i = t.createGain();
393
397
  switch (n.connect(i), i.connect(t.destination), e) {
@@ -424,14 +428,14 @@ function ln(w = {}) {
424
428
  }), Date.now() < t ? requestAnimationFrame(x) : document.body.removeChild(i);
425
429
  };
426
430
  x();
427
- }, je = () => /* @__PURE__ */ f("div", { style: g.gmCenterScreen, children: [
431
+ }, je = () => /* @__PURE__ */ m("div", { style: g.gmCenterScreen, children: [
428
432
  /* @__PURE__ */ a("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
429
433
  /* @__PURE__ */ a("p", { style: g.gmBodyM, children: "Select number of rounds" }),
430
434
  /* @__PURE__ */ a("div", { style: {
431
435
  display: "flex",
432
436
  gap: c() ? "8px" : "16px",
433
437
  justifyContent: "center"
434
- }, children: [3, 4, 5].map((e) => /* @__PURE__ */ f(
438
+ }, children: [3, 4, 5].map((e) => /* @__PURE__ */ m(
435
439
  "button",
436
440
  {
437
441
  onClick: () => Me(e),
@@ -446,14 +450,14 @@ function ln(w = {}) {
446
450
  },
447
451
  e
448
452
  )) })
449
- ] }), Oe = () => /* @__PURE__ */ f("div", { style: g.gmCenterScreen, children: [
453
+ ] }), Oe = () => /* @__PURE__ */ m("div", { style: g.gmCenterScreen, children: [
450
454
  /* @__PURE__ */ a("h1", { style: g.gmHeadline1, children: "MAGIC SENTENCE" }),
451
455
  /* @__PURE__ */ a("p", { style: g.gmBodyM, children: "Select time per round" }),
452
456
  /* @__PURE__ */ a("div", { style: {
453
457
  display: "flex",
454
458
  gap: c() ? "8px" : "16px",
455
459
  justifyContent: "center"
456
- }, children: [15, 20, 30].map((e) => /* @__PURE__ */ f(
460
+ }, children: [15, 20, 30].map((e) => /* @__PURE__ */ m(
457
461
  "button",
458
462
  {
459
463
  onClick: () => Le(e),
@@ -468,8 +472,8 @@ function ln(w = {}) {
468
472
  },
469
473
  e
470
474
  )) })
471
- ] }), Fe = () => /* @__PURE__ */ f("div", { style: g.gmCenterScreen, children: [
472
- /* @__PURE__ */ f("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
475
+ ] }), Fe = () => /* @__PURE__ */ m("div", { style: g.gmCenterScreen, children: [
476
+ /* @__PURE__ */ m("h2", { style: { ...g.gmBodyM, marginBottom: "0px" }, children: [
473
477
  "Type down ",
474
478
  I,
475
479
  " sentence",
@@ -520,17 +524,14 @@ function ln(w = {}) {
520
524
  children: "PLAY"
521
525
  }
522
526
  )
523
- ] }), Ze = () => /* @__PURE__ */ f("div", { style: g.gmReadyWrapper, children: [
527
+ ] }), Ze = () => /* @__PURE__ */ m("div", { style: g.gmReadyWrapper, children: [
524
528
  /* @__PURE__ */ a("h1", { style: {
525
529
  ...g.gmHeadline1,
526
- fontSize: c() ? "36px" : "72px",
527
- color: "#ec4c44",
528
- marginBottom: "20px",
529
- animation: "pulse 1s ease-in-out infinite"
530
+ color: "#ec4c44"
530
531
  }, children: "GET READY" }),
531
532
  /* @__PURE__ */ a("div", { style: g.gmHourglass, children: "⏳" })
532
- ] }), Qe = () => /* @__PURE__ */ f("div", { style: g.gmGameLayout, children: [
533
- /* @__PURE__ */ f("h2", { style: {
533
+ ] }), Qe = () => /* @__PURE__ */ m("div", { style: g.gmGameLayout, children: [
534
+ /* @__PURE__ */ m("h2", { style: {
534
535
  marginBottom: c() ? "5px" : "10px",
535
536
  fontSize: c() ? "16px" : "20px"
536
537
  }, children: [
@@ -539,7 +540,7 @@ function ln(w = {}) {
539
540
  "/",
540
541
  I,
541
542
  " — ",
542
- d ? "TIME'S UP!" : `Time: ${L}s`
543
+ l ? "TIME'S UP!" : `Time: ${L}s`
543
544
  ] }),
544
545
  /* @__PURE__ */ a(
545
546
  "div",
@@ -557,7 +558,7 @@ function ln(w = {}) {
557
558
  {
558
559
  style: {
559
560
  height: "100%",
560
- width: `${L / (ge || 20) * 100}%`,
561
+ width: `${L / (he || 20) * 100}%`,
561
562
  background: L <= 5 ? "#ec4c44" : "#4caf50",
562
563
  transition: "width 1s linear"
563
564
  }
@@ -573,22 +574,22 @@ function ln(w = {}) {
573
574
  style: {
574
575
  display: "flex",
575
576
  flexWrap: C() ? "wrap" : "nowrap",
576
- gap: l || window.innerWidth < 768 ? "6px" : "10px",
577
+ gap: d || window.innerWidth < 768 ? "6px" : "10px",
577
578
  justifyContent: "center",
578
- marginBottom: l || window.innerWidth < 768 ? "15px" : "30px",
579
- padding: l || window.innerWidth < 768 ? "5px" : "10px",
579
+ marginBottom: d || window.innerWidth < 768 ? "15px" : "30px",
580
+ padding: d || window.innerWidth < 768 ? "5px" : "10px",
580
581
  width: "100%",
581
582
  boxSizing: "border-box"
582
583
  },
583
584
  children: te.map((e, t) => /* @__PURE__ */ a(
584
585
  "div",
585
586
  {
586
- draggable: !d,
587
+ draggable: !l,
587
588
  role: "button",
588
- tabIndex: d ? -1 : 0,
589
- "aria-label": d ? `Word: ${e.text} (time expired)` : en("Drag word", e.text, "to build sentence"),
589
+ tabIndex: l ? -1 : 0,
590
+ "aria-label": l ? `Word: ${e.text} (time expired)` : en("Drag word", e.text, "to build sentence"),
590
591
  onDragStart: (n) => {
591
- if (d) {
592
+ if (l) {
592
593
  n.preventDefault();
593
594
  return;
594
595
  }
@@ -598,7 +599,7 @@ function ln(w = {}) {
598
599
  ), n.dataTransfer.setData("text/plain", e.id), E(`Dragging word: ${e.text}`);
599
600
  },
600
601
  onKeyDown: (n) => {
601
- d || nn(n, () => _("bank", "selected", e.id, null));
602
+ l || nn(n, () => _("bank", "selected", e.id, null));
602
603
  },
603
604
  onDragOver: (n) => n.preventDefault(),
604
605
  onDrop: (n) => {
@@ -606,26 +607,26 @@ function ln(w = {}) {
606
607
  P({ list: null, index: null, side: null }), n.stopPropagation(), ee(n, "bank", u);
607
608
  },
608
609
  onDragEnter: (n) => {
609
- if (d) return;
610
+ if (l) return;
610
611
  const i = n.currentTarget.getBoundingClientRect(), o = i.left + i.width / 2;
611
612
  P({ list: "bank", index: t, side: n.clientX > o ? "right" : "left" });
612
613
  },
613
614
  onDragLeave: () => P({ list: null, index: null, side: null }),
614
615
  onClick: () => {
615
- d || _("bank", "selected", e.id, null);
616
+ l || _("bank", "selected", e.id, null);
616
617
  },
617
618
  style: {
618
- padding: l || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
619
- borderRadius: l || window.innerWidth < 768 ? "6px" : "10px",
619
+ padding: d || window.innerWidth < 768 ? "6px 10px" : "10px 16px",
620
+ borderRadius: d || window.innerWidth < 768 ? "6px" : "10px",
620
621
  border: "1px solid #ccc",
621
- background: d ? "#f0f0f0" : "#f9f9f9",
622
- cursor: d ? "not-allowed" : "pointer",
623
- fontSize: l || window.innerWidth < 768 ? "12px" : "18px",
622
+ background: l ? "#f0f0f0" : "#f9f9f9",
623
+ cursor: l ? "not-allowed" : "pointer",
624
+ fontSize: d || window.innerWidth < 768 ? "12px" : "18px",
624
625
  borderLeft: b.list === "bank" && b.index === t && b.side === "left" ? "3px solid #3b82f6" : "1px solid #ccc",
625
626
  borderRight: b.list === "bank" && b.index === t && b.side === "right" ? "3px solid #3b82f6" : "1px solid #ccc",
626
627
  flexShrink: 0,
627
628
  flexBasis: "auto",
628
- opacity: d ? 0.6 : 1,
629
+ opacity: l ? 0.6 : 1,
629
630
  transition: "opacity 0.3s ease"
630
631
  },
631
632
  children: e.text
@@ -640,7 +641,7 @@ function ln(w = {}) {
640
641
  onDragOver: (e) => e.preventDefault(),
641
642
  onDrop: (e) => ee(e, "selected", null),
642
643
  style: {
643
- minHeight: l || window.innerWidth < 768 ? "50px" : "70px",
644
+ minHeight: d || window.innerWidth < 768 ? "50px" : "70px",
644
645
  width: "auto",
645
646
  // Автоматическая ширина в зависимости от содержимого
646
647
  maxWidth: "none",
@@ -648,13 +649,13 @@ function ln(w = {}) {
648
649
  minWidth: "245px",
649
650
  // Минимальная ширина для растягивания
650
651
  border: A === "correct" ? "2px dashed #4caf50" : A === "almost" ? "2px dashed #ff9800" : A === "wrong" ? "2px dashed #f44336" : "2px dashed #ccc",
651
- borderRadius: l || window.innerWidth < 768 ? "8px" : "12px",
652
- padding: l || window.innerWidth < 768 ? "8px" : "12px",
652
+ borderRadius: d || window.innerWidth < 768 ? "8px" : "12px",
653
+ padding: d || window.innerWidth < 768 ? "8px" : "12px",
653
654
  display: "flex",
654
655
  flexWrap: C() ? "wrap" : "nowrap",
655
656
  alignItems: "center",
656
657
  justifyContent: "center",
657
- fontSize: `${ye(v.length)}px`,
658
+ fontSize: `${be(v.length)}px`,
658
659
  background: A === "correct" ? "#e8f5e8" : A === "almost" ? "#fff3e0" : A === "wrong" ? "#ffebee" : "#fafafa",
659
660
  overflowX: C() ? "hidden" : "auto",
660
661
  whiteSpace: C() ? "normal" : "nowrap"
@@ -662,9 +663,9 @@ function ln(w = {}) {
662
663
  children: v.map((e, t) => /* @__PURE__ */ a(
663
664
  "span",
664
665
  {
665
- draggable: !d,
666
+ draggable: !l,
666
667
  onDragStart: (n) => {
667
- if (d) {
668
+ if (l) {
668
669
  n.preventDefault();
669
670
  return;
670
671
  }
@@ -679,32 +680,32 @@ function ln(w = {}) {
679
680
  P({ list: null, index: null, side: null }), n.stopPropagation(), ee(n, "selected", u);
680
681
  },
681
682
  onDragEnter: (n) => {
682
- if (d) return;
683
+ if (l) return;
683
684
  const i = n.currentTarget.getBoundingClientRect(), o = i.left + i.width / 2;
684
685
  P({ list: "selected", index: t, side: n.clientX > o ? "right" : "left" });
685
686
  },
686
687
  onDragLeave: () => P({ list: null, index: null, side: null }),
687
688
  onClick: () => {
688
- d || _("selected", "bank", e.id, null);
689
+ l || _("selected", "bank", e.id, null);
689
690
  },
690
- title: d ? "Time expired" : "Click to remove back to bank",
691
+ title: l ? "Time expired" : "Click to remove back to bank",
691
692
  style: {
692
693
  padding: c() ? "4px 6px" : "6px 10px",
693
694
  margin: c() ? "2px" : "4px",
694
695
  borderRadius: c() ? "4px" : "8px",
695
- background: d ? "#f0f0f0" : "#ffe9e7",
696
- border: d ? "1px solid #ccc" : "1px solid #ec4c44",
696
+ background: l ? "#f0f0f0" : "#ffe9e7",
697
+ border: l ? "1px solid #ccc" : "1px solid #ec4c44",
697
698
  borderLeft: b.list === "selected" && b.index === t && b.side === "left" ? "3px solid #3b82f6" : void 0,
698
699
  borderRight: b.list === "selected" && b.index === t && b.side === "right" ? "3px solid #3b82f6" : void 0,
699
- cursor: d ? "not-allowed" : "pointer",
700
+ cursor: l ? "not-allowed" : "pointer",
700
701
  userSelect: "none",
701
- fontSize: `${ye(v.length)}px`,
702
+ fontSize: `${be(v.length)}px`,
702
703
  // Адаптивный размер шрифта для слов
703
704
  fontFamily: '"Roboto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif',
704
705
  // Более плотный шрифт
705
706
  whiteSpace: "nowrap",
706
707
  // Запрещаем перенос слов
707
- opacity: d ? 0.6 : 1,
708
+ opacity: l ? 0.6 : 1,
708
709
  transition: "opacity 0.3s ease"
709
710
  },
710
711
  children: e.text
@@ -717,59 +718,59 @@ function ln(w = {}) {
717
718
  "button",
718
719
  {
719
720
  onClick: () => Ne(!0),
720
- disabled: !d && v.length === 0,
721
+ disabled: !l && v.length === 0,
721
722
  style: {
722
723
  marginTop: c() ? "15px" : "30px",
723
724
  fontSize: c() ? "14px" : "20px",
724
725
  padding: c() ? "6px 12px" : "10px 24px",
725
726
  borderRadius: c() ? "8px" : "12px",
726
- background: d || v.length > 0 ? "#ec4c44" : "#ccc",
727
+ background: l || v.length > 0 ? "#ec4c44" : "#ccc",
727
728
  color: "white",
728
729
  border: "none",
729
- cursor: d || v.length > 0 ? "pointer" : "not-allowed"
730
+ cursor: l || v.length > 0 ? "pointer" : "not-allowed"
730
731
  },
731
732
  children: "NEXT"
732
733
  }
733
734
  )
734
- ] }), Xe = () => /* @__PURE__ */ f("div", { style: g.gmCenterScreen, children: [
735
+ ] }), Xe = () => /* @__PURE__ */ m("div", { style: g.gmCenterScreen, children: [
735
736
  /* @__PURE__ */ a("h1", { style: {
736
737
  ...g.gmHeadline1,
737
- marginTop: (l && 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 || $ || G || N || j || O || F || Z || Q, "0px"),
738
- marginBottom: l && 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 || $ || G || N || j || O || F || Z || Q ? "2px" : "10px",
739
- fontSize: l && 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)"
738
+ 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 || $ || G || N || j || O || F || Z || Q, "0px"),
739
+ 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 || $ || G || N || j || O || F || Z || Q ? "2px" : "10px",
740
+ 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)"
740
741
  }, children: "Game Over 🎯" }),
741
- /* @__PURE__ */ f("h2", { style: {
742
+ /* @__PURE__ */ m("h2", { style: {
742
743
  ...g.gmHeadline2,
743
- marginTop: (l && 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 || $ || G || N || j || O || F || Z || Q, "0px"),
744
- marginBottom: l && 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 || $ || G || N || j || O || F || Z || Q ? "2px" : "16px",
745
- fontSize: l && 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"
744
+ 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 || $ || G || N || j || O || F || Z || Q, "0px"),
745
+ 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 || $ || G || N || j || O || F || Z || Q ? "2px" : "16px",
746
+ 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"
746
747
  }, children: [
747
748
  "Your score: ",
748
749
  J,
749
750
  " out of ",
750
751
  I
751
752
  ] }),
752
- /* @__PURE__ */ f("p", { style: {
753
+ /* @__PURE__ */ m("p", { style: {
753
754
  ...g.gmBodyM,
754
755
  color: "#10b981",
755
- marginTop: l && 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 || $ || G || N || j || O || F || Z || Q ? "0px" : "12px",
756
- marginBottom: l && 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 || $ || G || N || j || O || F || Z || Q ? "2px" : "16px",
757
- fontSize: l && 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"
756
+ 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 || $ || G || N || j || O || F || Z || Q ? "0px" : "12px",
757
+ 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 || $ || G || N || j || O || F || Z || Q ? "2px" : "16px",
758
+ 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"
758
759
  }, children: [
759
760
  "Best score: ",
760
761
  oe
761
762
  ] }),
762
- /* @__PURE__ */ f("div", { style: {
763
+ /* @__PURE__ */ m("div", { style: {
763
764
  display: "flex",
764
- gap: l && window.innerWidth > window.innerHeight || l && 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",
765
- marginTop: l && window.innerWidth > window.innerHeight || l && 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 || He ? "12px" : "24px"
765
+ gap: d && window.innerWidth > window.innerHeight || 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 ? "6px" : "12px",
766
+ marginTop: d && window.innerWidth > window.innerHeight || 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 ? "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 || He ? "12px" : "24px"
766
767
  }, children: [
767
768
  /* @__PURE__ */ a(
768
769
  "button",
769
770
  {
770
771
  onClick: () => {
771
772
  de(), R("start"), setTimeout(() => {
772
- k("getready"), fe(null), K(!1);
773
+ k("getready"), xe(null), K(!1);
773
774
  }, 800);
774
775
  },
775
776
  style: {
@@ -783,7 +784,7 @@ function ln(w = {}) {
783
784
  "button",
784
785
  {
785
786
  onClick: () => {
786
- R("click"), k("select"), pe(null), he(null), q([]), Y(0), ie([]), K(!1);
787
+ R("click"), k("select"), ge(null), we(null), q([]), Y(0), ie([]), K(!1);
787
788
  },
788
789
  style: {
789
790
  ...g.gmButton,
@@ -793,7 +794,7 @@ function ln(w = {}) {
793
794
  }
794
795
  )
795
796
  ] })
796
- ] }), be = r || (B ? `${B.endsWith("/") ? B.slice(0, -1) : B}/logo.svg` : typeof window < "u" && window.origin ? `${window.origin}/browser/speakid/games/magic%20sentence/logo.svg` : null), Je = !l && y && !(window.innerWidth > window.innerHeight) && window.innerHeight >= 700;
797
+ ] }), le = r || (B ? `${B.endsWith("/") ? B.slice(0, -1) : B}/logo.svg` : typeof window < "u" && window.origin ? `${window.origin}/browser/speakid/games/magic%20sentence/logo.svg` : null), Je = !d && y && !(window.innerWidth > window.innerHeight) && window.innerHeight >= 700;
797
798
  return /* @__PURE__ */ a(
798
799
  "div",
799
800
  {
@@ -813,55 +814,64 @@ function ln(w = {}) {
813
814
  right: 0,
814
815
  bottom: 0
815
816
  },
816
- children: /* @__PURE__ */ a(
817
+ children: /* @__PURE__ */ m(
817
818
  "div",
818
819
  {
819
820
  style: {
820
- width: l ? "100%" : xe || 1e3,
821
- height: l ? "100%" : xe || 1e3,
821
+ width: d ? "100%" : ye || 1e3,
822
+ height: d ? "100%" : ye || 1e3,
822
823
  display: "flex",
823
824
  justifyContent: "center",
824
825
  alignItems: "center",
825
826
  overflow: "hidden",
826
- borderRadius: l ? 0 : "20px",
827
+ borderRadius: d ? 0 : "20px",
827
828
  background: "linear-gradient(to bottom, #fff8f8 0%, #f9fafb 100%)",
828
- boxShadow: l ? "none" : "0 0 40px rgba(0,0,0,0.1)",
829
- margin: l ? "0 auto" : "unset",
829
+ boxShadow: d ? "none" : "0 0 40px rgba(0,0,0,0.1)",
830
+ margin: d ? "0 auto" : "unset",
830
831
  position: "relative"
832
+ // needed so absolute logo is inside the square
831
833
  },
832
- children: /* @__PURE__ */ a(
833
- "div",
834
- {
835
- style: {
836
- transform: "none",
837
- width: "100%",
838
- height: "100%",
839
- display: "flex",
840
- justifyContent: "center",
841
- alignItems: "center"
842
- },
843
- children: /* @__PURE__ */ f("div", { id: "magic-sentence-root", children: [
844
- Je ? /* @__PURE__ */ a("div", { style: {
845
- ...g.gmLogoFixed,
846
- display: "block"
847
- }, children: be ? /* @__PURE__ */ a(
848
- "img",
849
- {
850
- src: be,
851
- alt: "SPEAKID Logo",
852
- style: g.gmLogoImg,
853
- loading: "lazy"
854
- }
855
- ) : /* @__PURE__ */ a("div", { style: g.gmLogoImg, children: "SPEAKID" }) }) : null,
856
- m === "select" ? je() : null,
857
- m === "time" ? Oe() : null,
858
- m === "type" ? Fe() : null,
859
- m === "getready" ? Ze() : null,
860
- m === "play" ? Qe() : null,
861
- m === "results" ? Xe() : null
862
- ] })
863
- }
864
- )
834
+ children: [
835
+ !d && Je && /* @__PURE__ */ a("div", { style: { ...g.gmLogoFixed, position: "absolute", top: 16, left: 16, zIndex: 30 }, children: le ? /* @__PURE__ */ m("picture", { children: [
836
+ /* @__PURE__ */ a(
837
+ "source",
838
+ {
839
+ srcSet: le,
840
+ type: "image/svg+xml"
841
+ }
842
+ ),
843
+ /* @__PURE__ */ a(
844
+ "img",
845
+ {
846
+ src: le.replace(".svg", ".png"),
847
+ alt: "SPEAKID Logo",
848
+ style: g.gmLogoImg,
849
+ loading: "lazy"
850
+ }
851
+ )
852
+ ] }) : /* @__PURE__ */ a("div", { style: g.gmLogoImg, children: "SPEAKID" }) }),
853
+ /* @__PURE__ */ a(
854
+ "div",
855
+ {
856
+ style: {
857
+ transform: "none",
858
+ width: "100%",
859
+ height: "100%",
860
+ display: "flex",
861
+ justifyContent: "center",
862
+ alignItems: "center"
863
+ },
864
+ children: /* @__PURE__ */ m("div", { id: "magic-sentence-root", children: [
865
+ f === "select" ? je() : null,
866
+ f === "time" ? Oe() : null,
867
+ f === "type" ? Fe() : null,
868
+ f === "getready" ? Ze() : null,
869
+ f === "play" ? Qe() : null,
870
+ f === "results" ? Xe() : null
871
+ ] })
872
+ }
873
+ )
874
+ ]
865
875
  }
866
876
  )
867
877
  }
@@ -887,7 +897,7 @@ class cn extends Ye {
887
897
  this.setState({ hasError: !1, error: void 0, errorInfo: void 0 });
888
898
  };
889
899
  render() {
890
- return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ f("div", { style: {
900
+ return this.state.hasError ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ m("div", { style: {
891
901
  display: "flex",
892
902
  flexDirection: "column",
893
903
  alignItems: "center",
@@ -920,9 +930,9 @@ class cn extends Ye {
920
930
  children: "🔄 Restart Game"
921
931
  }
922
932
  ),
923
- typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ f("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
933
+ typeof process < "u" && process.env.NODE_ENV === "development" && this.state.error && /* @__PURE__ */ m("details", { style: { marginTop: "20px", textAlign: "left", maxWidth: "600px" }, children: [
924
934
  /* @__PURE__ */ a("summary", { style: { cursor: "pointer", fontSize: "14px" }, children: "Technical Details (Development Only)" }),
925
- /* @__PURE__ */ f("pre", { style: {
935
+ /* @__PURE__ */ m("pre", { style: {
926
936
  backgroundColor: "#f3f4f6",
927
937
  padding: "12px",
928
938
  borderRadius: "4px",