@mblinkov/whats-missing 20.0.2 → 20.0.4

package/dist/whats-missing.cjs.js

@@ -1,30 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react");var ee={exports:{}},G={};/**
- * @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 ae;function ce(){if(ae)return G;ae=1;var a=Symbol.for("react.transitional.element"),g=Symbol.for("react.fragment");function m(s,i,h){var x=null;if(h!==void 0&&(x=""+h),i.key!==void 0&&(x=""+i.key),"key"in i){h={};for(var v in i)v!=="key"&&(h[v]=i[v])}else h=i;return i=h.ref,{$$typeof:a,type:s,key:x,ref:i!==void 0?i:null,props:h}}return G.Fragment=g,G.jsx=m,G.jsxs=m,G}var D={};/**
- * @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 ie;function de(){return ie||(ie=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===H?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case L:return"Profiler";case M:return"StrictMode";case A:return"Suspense";case F:return"SuspenseList";case R: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 V:return"Portal";case te:return e.displayName||"Context";case J:return(e._context.displayName||"Context")+".Consumer";case W:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case O:return n=e.displayName||null,n!==null?n:a(e.type)||"Memo";case P:n=e._payload,e=e._init;try{return a(e(n))}catch{}}return null}function g(e){return""+e}function m(e){try{g(e);var n=!1}catch{n=!0}if(n){n=console;var l=n.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),g(e)}}function s(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var n=a(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function i(){var e=E.A;return e===null?null:e.getOwner()}function h(){return Error("react-stack-top-frame")}function x(e){if(Y.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function v(e,n){function l(){Z||(Z=!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)",n))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function C(){var e=a(this.type);return I[e]||(I[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 U(e,n,l,u,z,$){var f=l.ref;return e={$$typeof:N,type:e,key:n,props:l,_owner:u},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:C}):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:z}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:$}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function y(e,n,l,u,z,$){var f=n.children;if(f!==void 0)if(u)if(X(f)){for(u=0;u<f.length;u++)q(f[u]);Object.freeze&&Object.freeze(f)}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 q(f);if(Y.call(n,"key")){f=a(e);var k=Object.keys(n).filter(function(c){return c!=="key"});u=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",_[f+u]||(k=0<k.length?"{"+k.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} />`,u,f,k,f),_[f+u]=!0)}if(f=null,l!==void 0&&(m(l),f=""+l),x(n)&&(m(n.key),f=""+n.key),"key"in n){l={};for(var r in n)r!=="key"&&(l[r]=n[r])}else l=n;return f&&v(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),U(e,f,l,i(),z,$)}function q(e){p(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===P&&(e._payload.status==="fulfilled"?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e=="object"&&e!==null&&e.$$typeof===N}var T=d,N=Symbol.for("react.transitional.element"),V=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),M=Symbol.for("react.strict_mode"),L=Symbol.for("react.profiler"),J=Symbol.for("react.consumer"),te=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),A=Symbol.for("react.suspense"),F=Symbol.for("react.suspense_list"),O=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),R=Symbol.for("react.activity"),H=Symbol.for("react.client.reference"),E=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,X=Array.isArray,j=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var Z,I={},Q=T.react_stack_bottom_frame.bind(T,h)(),B=j(s(h)),_={};D.Fragment=S,D.jsx=function(e,n,l){var u=1e4>E.recentlyCreatedOwnerStacks++;return y(e,n,l,!1,u?Error("react-stack-top-frame"):Q,u?j(s(e)):B)},D.jsxs=function(e,n,l){var u=1e4>E.recentlyCreatedOwnerStacks++;return y(e,n,l,!0,u?Error("react-stack-top-frame"):Q,u?j(s(e)):B)}})()),D}var le;function ue(){return le||(le=1,process.env.NODE_ENV==="production"?ee.exports=ce():ee.exports=de()),ee.exports}var t=ue();const me=window.origin+"/cloud/speakid/games/whatsmissing/",ne=(a,g)=>a.map(([m,s])=>({src:`${me}${g}/${s.replace(/\s/g,"%20")}.png`,name:s})),fe=[["apple","apple"],["banana","banana"],["bread","bread"],["burger","burger"],["cake","cake"],["carrot","carrot"],["cheese","cheese"],["chicken","chicken"],["chocolate","chocolate"],["corn","corn"],["donut","donut"],["fish","fish"],["fries","fries"],["grapes","grapes"],["ice_cream","ice cream"],["milk","milk"],["orange","orange"],["pear","pear"],["pizza","pizza"],["rice","rice"],["sandwich","sandwich"],["soup","soup"],["strawberry","strawberry"],["tomato","tomato"],["watermelon","watermelon"]],ge=[["bear","bear"],["cat","cat"],["crocodile","crocodile"],["dolphin","dolphin"],["elephant","elephant"],["fox","fox"],["giraffe","giraffe"],["horse","horse"],["kangaroo","kangaroo"],["lion","lion"],["monkey","monkey"],["owl","owl"],["panda","panda"],["penguin","penguin"],["squirrel","squirrel"],["tiger","tiger"],["tortoise","tortoise"],["wolf","wolf"],["zebra","zebra"]],pe=[["ball","ball"],["balloon","balloon"],["blocks","blocks"],["car","car"],["doll","doll"],["drum","drum"],["guitar","guitar"],["jump_rope","jump rope"],["kite","kite"],["paints","paints"],["plane","plane"],["puzzle","puzzle"],["rocket","rocket"],["scooter","scooter"],["skateboard","skateboard"],["slide","slide"],["teddy_bear","teddy bear"],["yo-yo","yo-yo"],["crayons","crayons"]],oe={food:ne(fe,"food"),animals:ne(ge,"animals"),toys:ne(pe,"toys")},he=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),se=window.origin+"/cloud/speakid/games/whatsmissing/",M=(r,c)=>r.map(([l,s])=>({src:`${se}${c}/${s.replace(/\s/g,"%20")}.png`,name:s})),ne=[["apple","apple"],["banana","banana"],["bread","bread"],["burger","burger"],["cake","cake"],["carrot","carrot"],["cheese","cheese"],["chicken","chicken"],["chocolate","chocolate"],["corn","corn"],["donut","donut"],["fish","fish"],["fries","fries"],["grapes","grapes"],["ice_cream","ice cream"],["milk","milk"],["orange","orange"],["pear","pear"],["pizza","pizza"],["rice","rice"],["sandwich","sandwich"],["soup","soup"],["strawberry","strawberry"],["tomato","tomato"],["watermelon","watermelon"]],re=[["bear","bear"],["cat","cat"],["crocodile","crocodile"],["dolphin","dolphin"],["elephant","elephant"],["fox","fox"],["giraffe","giraffe"],["horse","horse"],["kangaroo","kangaroo"],["lion","lion"],["monkey","monkey"],["owl","owl"],["panda","panda"],["penguin","penguin"],["squirrel","squirrel"],["tiger","tiger"],["tortoise","tortoise"],["wolf","wolf"],["zebra","zebra"]],ie=[["ball","ball"],["balloon","balloon"],["blocks","blocks"],["car","car"],["doll","doll"],["drum","drum"],["guitar","guitar"],["jump_rope","jump rope"],["kite","kite"],["paints","paints"],["plane","plane"],["puzzle","puzzle"],["rocket","rocket"],["scooter","scooter"],["skateboard","skateboard"],["slide","slide"],["teddy_bear","teddy bear"],["yo-yo","yo-yo"],["crayons","crayons"]],B={food:M(ne,"food"),animals:M(re,"animals"),toys:M(ie,"toys")},le=`
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
-`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const a=document.createElement("style");a.id="spin-keyframes",a.innerHTML=he,document.head.appendChild(a)}const xe={animation:"spin 1.4s linear infinite"},o={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",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%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},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"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"sticky",top:"16px",left:"20px",zIndex:9999,background:"white",padding:"4px 8px",borderRadius:"8px"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto"},gmHourglass:{fontSize:"42px",...xe}},be=window.origin+"/cloud/speakid/games/whatsmissing/logo.png",ye=()=>{const a=document.createElement("style");a.textContent=`
+`;if(typeof document<"u"&&!document.getElementById("spin-keyframes")){const r=document.createElement("style");r.id="spin-keyframes",r.innerHTML=le,document.head.appendChild(r)}const ae={animation:"spin 1.4s linear infinite"},o={gmCenterScreen:{position:"relative",zIndex:1,minHeight:"100vh",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%"},gmHeadline3:{fontWeight:600,fontSize:"18px",lineHeight:"130%"},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"},gmButtonActive:{background:"#333",color:"#fff"},gmGameLayout:{position:"relative",width:"100%",maxWidth:"600px",minHeight:"100vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",color:"#1f2937",padding:"16px 8px",margin:"0 auto"},gmGrid:{width:"100%",maxWidth:"calc(210px * 3 + 20px * 2)",margin:"0 auto",display:"grid",gridTemplateColumns:"repeat(3, 210px)",gridAutoRows:"210px",gap:"20px",justifyContent:"center"},gmCard:{border:"1px solid #e5e7eb",borderRadius:"16px",background:"#f9f9f9",aspectRatio:"1 / 1",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",transition:"transform .2s ease, box-shadow .2s ease, border-color .2s ease"},gmCorrect:{border:"2px solid #10b981",boxShadow:"0 0 18px rgba(16,185,129,.45)",background:"#ecfdf5"},gmWrong:{border:"2px solid #ec4c44",boxShadow:"0 0 18px rgba(236,76,68,.35)",background:"#fef2f2"},gmInput:{padding:"6px 10px",borderRadius:"6px",border:"1px solid #ccc",fontSize:"16px",fontFamily:'"Geist", system-ui',width:"160px"},gmTable:{marginTop:"20px",marginBottom:"32px",borderCollapse:"collapse",width:"100%",maxWidth:"520px",tableLayout:"fixed",textAlign:"center"},gmTableCell:{padding:"8px 12px",borderBottom:"1px solid #e5e7eb",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},gmLogoFixed:{position:"absolute",top:"16px",left:"24px",width:"120px",zIndex:10,pointerEvents:"none",background:"transparent"},gmLogoImg:{height:"clamp(28px, 5vw, 40px)",width:"auto",background:"transparent"},gmHourglass:{fontSize:"42px",...ae}},de=window.origin+"/cloud/speakid/games/whatsmissing/logo.png",ce=()=>{const r=document.createElement("style");r.textContent=`
     html, body, #root {
       margin: 0;
       padding: 0;
@@ -54,4 +33,4 @@ React keys must be passed directly to JSX without using spread:
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
     }
-  `,document.head.appendChild(a)},we=(a,g)=>{const m=Array.from({length:a.length+1},()=>Array(g.length+1).fill(0));for(let s=0;s<=a.length;s++)m[s][0]=s;for(let s=0;s<=g.length;s++)m[0][s]=s;for(let s=1;s<=a.length;s++)for(let i=1;i<=g.length;i++)m[s][i]=a[s-1]===g[i-1]?m[s-1][i-1]:Math.min(m[s-1][i-1],m[s][i-1],m[s-1][i])+1;return m[a.length][g.length]};function Te(){d.useEffect(()=>{ye()},[]);const[a,g]=d.useState(null),[m,s]=d.useState([]),[i,h]=d.useState(4),[x,v]=d.useState(!1),[C,U]=d.useState(1),[y,q]=d.useState(null),[p,T]=d.useState("ready"),[N,V]=d.useState(3),[S,M]=d.useState(7),[L,J]=d.useState(20),[te,W]=d.useState(0),[A,F]=d.useState(!1),[O,P]=d.useState(""),[R,H]=d.useState(!1),[E,Y]=d.useState(!1),[X,j]=d.useState(null),[Z,I]=d.useState([]),[Q,B]=d.useState([]),[_,e]=d.useState(!1);d.useEffect(()=>{const r=()=>e(window.innerWidth<768);return r(),window.addEventListener("resize",r),()=>window.removeEventListener("resize",r)},[]);const n=r=>[...r].sort(()=>Math.random()-.5).slice(0,6),l=()=>{if(!a)return;const r=n(oe[a]);s(r),v(!0),F(!1),U(1),W(0),I([]),B([]),u(r,[],!0)},u=(r=m,c=Q,w=!1)=>{const b=n(r.length?r:oe[a]);let K=Math.floor(Math.random()*b.length),re=b[K].name,se=0;for(;c.includes(re)&&se<20;)K=Math.floor(Math.random()*b.length),re=b[K].name,se++;s(b),q(K),B([...c,re]),H(!1),P(""),J(20),j(null),w?(T("ready"),V(3),M(7)):(T("memorize"),M(7))};d.useEffect(()=>{if(!(!x||A||R)){if(p==="ready")if(N<=0)T("memorize");else{const r=setTimeout(()=>V(c=>c-1),1e3);return()=>clearTimeout(r)}if(p==="memorize")if(S<=0)T("guess");else{const r=setTimeout(()=>M(c=>c-1),1e3);return()=>clearTimeout(r)}if(p==="guess"){if(L<=0){H(!0),j("wrong");const c=m[y].name;I(w=>[...w,{round:C,answer:O,correct:c,result:"wrong"}]);return}const r=setTimeout(()=>J(c=>c-1),1e3);return()=>clearTimeout(r)}}},[p,N,S,L,x,A,R,m,y,C,O]);const z=()=>{if(y===null||E)return;const r=m[y].name,c=O.toLowerCase().trim();let w="wrong";c===r?(W(b=>b+1),j("correct"),w="correct"):we(c,r)===1?(W(b=>b+.5),j("almost"),w="almost"):(j("wrong"),w="wrong"),I(b=>[...b,{round:C,answer:c,correct:r,result:w}]),Y(!0),setTimeout(()=>{Y(!1),H(!0)},600)},$=()=>C<i?(U(r=>r+1),u()):F(!0),f=()=>{v(!1),F(!1),g(null)},k=()=>t.jsx("div",{style:o.gmLogoFixed,children:t.jsx("img",{src:be,alt:"SPEAKID Logo",style:o.gmLogoImg})});return t.jsxs(t.Fragment,{children:[!_&&t.jsx(k,{}),!a&&!x&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"WHAT'S MISSING?"}),t.jsx("p",{style:o.gmBodyM,children:"Select a theme:"}),t.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(r=>t.jsx("button",{style:o.gmButton,onClick:()=>g(r),children:r==="animals"?"🐶 Animals":r==="food"?"🍎 Food":"🧸 Toys"},r))}),t.jsxs("div",{style:{marginTop:24},children:[t.jsx("p",{style:o.gmBodyS,children:"Choose number of rounds:"}),t.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(r=>t.jsx("button",{style:{...o.gmButton,...i===r?o.gmButtonActive:{}},onClick:()=>h(r),children:r},r))})]})]}),a&&!x&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",a]}),t.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",i]}),t.jsx("button",{style:o.gmButton,onClick:l,children:"▶ Start game"})]}),A&&t.jsxs("div",{style:o.gmCenterScreen,children:[t.jsx("h1",{style:o.gmHeadline1,children:"Results"}),t.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",te," / ",i]}),t.jsxs("table",{style:o.gmTable,children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{children:"Round"}),t.jsx("th",{children:"Your Answer"}),t.jsx("th",{children:"Correct"}),t.jsx("th",{children:"Result"})]})}),t.jsx("tbody",{children:Z.map((r,c)=>t.jsxs("tr",{children:[t.jsx("td",{style:o.gmTableCell,children:r.round}),t.jsx("td",{style:o.gmTableCell,children:r.answer||"—"}),t.jsx("td",{style:o.gmTableCell,children:r.correct}),t.jsx("td",{style:o.gmTableCell,children:r.result==="correct"?"✔ Correct":r.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},c))})]}),t.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[t.jsx("button",{style:o.gmButton,onClick:l,children:"🔁 Play again"}),t.jsx("button",{style:o.gmButton,onClick:f,children:"⬅️ Choose theme"})]})]}),x&&!A&&t.jsxs("div",{style:o.gmGameLayout,children:[t.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[p==="ready"&&t.jsxs(t.Fragment,{children:[t.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),t.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),p==="memorize"&&t.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",S,")"]}),p==="guess"&&!R&&t.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",L,"s"]})]}),p!=="ready"&&t.jsx("div",{style:{...o.gmGrid,gridTemplateColumns:_?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:_?"150px":"210px",gap:_?"12px":"20px",justifyItems:"center",...window.innerWidth>2e3?{gridTemplateColumns:"repeat(3, 260px)",gridAutoRows:"260px",gap:"28px"}:{},...window.innerWidth>2560?{gridTemplateColumns:"repeat(3, 300px)",gridAutoRows:"300px",gap:"32px"}:{}},children:m.map((r,c)=>{const w=y===c&&p==="guess"&&!R;return t.jsx("div",{style:{...o.gmCard,...X==="correct"&&y===c?o.gmCorrect:{},...X==="wrong"&&y===c?o.gmWrong:{}},children:!w&&t.jsx("img",{src:r.src,alt:r.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},c)})}),t.jsxs("div",{style:{marginTop:16,height:80},children:[p==="guess"&&!R&&t.jsxs("div",{children:[t.jsx("input",{type:"text",placeholder:"Type the missing word",value:O,onChange:r=>P(r.target.value),style:o.gmInput}),t.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:z,disabled:E,children:E?"...":"Check"})]}),R&&t.jsx("button",{style:o.gmButton,onClick:$,children:"Next round"})]})]})]})}exports.Game=Te;exports.themes=oe;
+  `,document.head.appendChild(r)},me=(r,c)=>{const l=Array.from({length:r.length+1},()=>Array(c.length+1).fill(0));for(let s=0;s<=r.length;s++)l[s][0]=s;for(let s=0;s<=c.length;s++)l[0][s]=s;for(let s=1;s<=r.length;s++)for(let a=1;a<=c.length;a++)l[s][a]=r[s-1]===c[a-1]?l[s-1][a-1]:Math.min(l[s-1][a-1],l[s][a-1],l[s-1][a])+1;return l[r.length][c.length]};function ge(){n.useEffect(()=>{ce()},[]);const[r,c]=n.useState(null),[l,s]=n.useState([]),[a,$]=n.useState(4),[h,L]=n.useState(!1),[f,W]=n.useState(1),[u,K]=n.useState(null),[m,y]=n.useState("ready"),[E,G]=n.useState(3),[k,C]=n.useState(7),[T,F]=n.useState(20),[V,v]=n.useState(0),[b,z]=n.useState(!1),[w,D]=n.useState(""),[p,R]=n.useState(!1),[I,q]=n.useState(!1),[P,x]=n.useState(null),[Z,A]=n.useState([]),[J,U]=n.useState([]),[j,Q]=n.useState(!1);n.useEffect(()=>{const t=()=>Q(window.innerWidth<768);return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const Y=t=>[...t].sort(()=>Math.random()-.5).slice(0,6),N=()=>{if(!r)return;const t=Y(B[r]);s(t),L(!0),z(!1),W(1),v(0),A([]),U([]),O(t,[],!0)},O=(t=l,i=J,g=!1)=>{const d=Y(t.length?t:B[r]);let S=Math.floor(Math.random()*d.length),H=d[S].name,_=0;for(;i.includes(H)&&_<20;)S=Math.floor(Math.random()*d.length),H=d[S].name,_++;s(d),K(S),U([...i,H]),R(!1),D(""),F(20),x(null),g?(y("ready"),G(3),C(7)):(y("memorize"),C(7))};n.useEffect(()=>{if(!(!h||b||p)){if(m==="ready")if(E<=0)y("memorize");else{const t=setTimeout(()=>G(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="memorize")if(k<=0)y("guess");else{const t=setTimeout(()=>C(i=>i-1),1e3);return()=>clearTimeout(t)}if(m==="guess"){if(T<=0){R(!0),x("wrong");const i=l[u].name;A(g=>[...g,{round:f,answer:w,correct:i,result:"wrong"}]);return}const t=setTimeout(()=>F(i=>i-1),1e3);return()=>clearTimeout(t)}}},[m,E,k,T,h,b,p,l,u,f,w]);const X=()=>{if(u===null||I)return;const t=l[u].name,i=w.toLowerCase().trim();let g="wrong";i===t?(v(d=>d+1),x("correct"),g="correct"):me(i,t)===1?(v(d=>d+.5),x("almost"),g="almost"):(x("wrong"),g="wrong"),A(d=>[...d,{round:f,answer:i,correct:t,result:g}]),q(!0),setTimeout(()=>{q(!1),R(!0)},600)},ee=()=>f<a?(W(t=>t+1),O()):z(!0),te=()=>{L(!1),z(!1),c(null)},oe=n.useMemo(()=>e.jsx("div",{style:o.gmLogoFixed,children:e.jsx("img",{src:de,alt:"SPEAKID Logo",style:o.gmLogoImg})}),[]);return e.jsxs(e.Fragment,{children:[!j&&oe,!r&&!h&&e.jsxs("div",{style:o.gmCenterScreen,children:[e.jsx("h1",{style:o.gmHeadline1,children:"WHAT'S MISSING?"}),e.jsx("p",{style:o.gmBodyM,children:"Select a theme:"}),e.jsx("div",{style:{display:"flex",gap:16},children:["animals","food","toys"].map(t=>e.jsx("button",{style:o.gmButton,onClick:()=>c(t),children:t==="animals"?"🐶 Animals":t==="food"?"🍎 Food":"🧸 Toys"},t))}),e.jsxs("div",{style:{marginTop:24},children:[e.jsx("p",{style:o.gmBodyS,children:"Choose number of rounds:"}),e.jsx("div",{style:{display:"flex",gap:12,marginTop:8},children:[3,4,5].map(t=>e.jsx("button",{style:{...o.gmButton,...a===t?o.gmButtonActive:{}},onClick:()=>$(t),children:t},t))})]})]}),r&&!h&&e.jsxs("div",{style:o.gmCenterScreen,children:[e.jsxs("h1",{style:o.gmHeadline1,children:["Theme selected: ",r]}),e.jsxs("p",{style:o.gmBodyM,children:["Rounds: ",a]}),e.jsx("button",{style:o.gmButton,onClick:N,children:"▶ Start game"})]}),b&&e.jsxs("div",{style:o.gmCenterScreen,children:[e.jsx("h1",{style:o.gmHeadline1,children:"Results"}),e.jsxs("h2",{style:o.gmHeadline3,children:["Your score: ",V," / ",a]}),e.jsxs("table",{style:o.gmTable,children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"Round"}),e.jsx("th",{children:"Your Answer"}),e.jsx("th",{children:"Correct"}),e.jsx("th",{children:"Result"})]})}),e.jsx("tbody",{children:Z.map((t,i)=>e.jsxs("tr",{children:[e.jsx("td",{style:o.gmTableCell,children:t.round}),e.jsx("td",{style:o.gmTableCell,children:t.answer||"—"}),e.jsx("td",{style:o.gmTableCell,children:t.correct}),e.jsx("td",{style:o.gmTableCell,children:t.result==="correct"?"✔ Correct":t.result==="almost"?"◐ Almost (0.5)":"✘ Wrong"})]},i))})]}),e.jsxs("div",{style:{display:"flex",gap:12,marginTop:24},children:[e.jsx("button",{style:o.gmButton,onClick:N,children:"🔁 Play again"}),e.jsx("button",{style:o.gmButton,onClick:te,children:"⬅️ Choose theme"})]})]}),h&&!b&&e.jsxs("div",{style:o.gmGameLayout,children:[e.jsxs("div",{style:{minHeight:160,display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"},children:[m==="ready"&&e.jsxs(e.Fragment,{children:[e.jsx("h1",{style:{...o.gmHeadline1,color:"#ec4c44"},children:"GET READY"}),e.jsx("div",{style:o.gmHourglass,children:"⏳"})]}),m==="memorize"&&e.jsxs("p",{style:{...o.gmBodyM,color:"#10b981"},children:["MEMORIZE (",k,")"]}),m==="guess"&&!p&&e.jsxs("p",{style:o.gmBodyM,children:["⏳ Time left: ",T,"s"]})]}),m!=="ready"&&e.jsx("div",{style:{...o.gmGrid,gridTemplateColumns:j?"repeat(2, 1fr)":"repeat(3, 210px)",gridAutoRows:j?"150px":"210px",gap:j?"12px":"20px",justifyItems:"center",...window.innerWidth>2e3?{gridTemplateColumns:"repeat(3, 260px)",gridAutoRows:"260px",gap:"28px"}:{},...window.innerWidth>2560?{gridTemplateColumns:"repeat(3, 300px)",gridAutoRows:"300px",gap:"32px"}:{}},children:l.map((t,i)=>{const g=u===i&&m==="guess"&&!p;return e.jsx("div",{style:{...o.gmCard,...P==="correct"&&u===i?o.gmCorrect:{},...P==="wrong"&&u===i?o.gmWrong:{}},children:!g&&e.jsx("img",{src:t.src,alt:t.name,style:{width:"100%",height:"100%",objectFit:"cover"}})},i)})}),e.jsxs("div",{style:{marginTop:16,height:80},children:[m==="guess"&&!p&&e.jsxs("div",{children:[e.jsx("input",{type:"text",placeholder:"Type the missing word",value:w,onChange:t=>D(t.target.value),style:o.gmInput}),e.jsx("button",{style:{...o.gmButton,marginLeft:8},onClick:X,disabled:I,children:I?"...":"Check"})]}),p&&e.jsx("button",{style:o.gmButton,onClick:ee,children:"Next round"})]})]})]})}exports.Game=ge;exports.themes=B;

package/dist/whats-missing.es.js

@@ -1,286 +1,9 @@
-import de, { useEffect as ne, useState as f } from "react";
-var ee = { exports: {} }, D = {};
-/**
- * @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 ae;
-function ue() {
-  if (ae) return D;
-  ae = 1;
-  var a = Symbol.for("react.transitional.element"), p = Symbol.for("react.fragment");
-  function u(s, i, h) {
-    var x = null;
-    if (h !== void 0 && (x = "" + h), i.key !== void 0 && (x = "" + i.key), "key" in i) {
-      h = {};
-      for (var v in i)
-        v !== "key" && (h[v] = i[v]);
-    } else h = i;
-    return i = h.ref, {
-      $$typeof: a,
-      type: s,
-      key: x,
-      ref: i !== void 0 ? i : null,
-      props: h
-    };
-  }
-  return D.Fragment = p, D.jsx = u, D.jsxs = u, D;
-}
-var G = {};
-/**
- * @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 ie;
-function me() {
-  return ie || (ie = 1, process.env.NODE_ENV !== "production" && (function() {
-    function a(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === H ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case E:
-          return "Fragment";
-        case L:
-          return "Profiler";
-        case M:
-          return "StrictMode";
-        case A:
-          return "Suspense";
-        case F:
-          return "SuspenseList";
-        case R:
-          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 V:
-            return "Portal";
-          case te:
-            return e.displayName || "Context";
-          case J:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case W:
-            var n = e.render;
-            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case O:
-            return n = e.displayName || null, n !== null ? n : a(e.type) || "Memo";
-          case P:
-            n = e._payload, e = e._init;
-            try {
-              return a(e(n));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function p(e) {
-      return "" + e;
-    }
-    function u(e) {
-      try {
-        p(e);
-        var n = !1;
-      } catch {
-        n = !0;
-      }
-      if (n) {
-        n = console;
-        var l = n.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return l.call(
-          n,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), p(e);
-      }
-    }
-    function s(e) {
-      if (e === E) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === P)
-        return "<...>";
-      try {
-        var n = a(e);
-        return n ? "<" + n + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function i() {
-      var e = _.A;
-      return e === null ? null : e.getOwner();
-    }
-    function h() {
-      return Error("react-stack-top-frame");
-    }
-    function x(e) {
-      if (Y.call(e, "key")) {
-        var n = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (n && n.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function v(e, n) {
-      function l() {
-        Z || (Z = !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)",
-          n
-        ));
-      }
-      l.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: l,
-        configurable: !0
-      });
-    }
-    function C() {
-      var e = a(this.type);
-      return I[e] || (I[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 U(e, n, l, d, z, $) {
-      var m = l.ref;
-      return e = {
-        $$typeof: N,
-        type: e,
-        key: n,
-        props: l,
-        _owner: d
-      }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: C
-      }) : 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: z
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: $
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function y(e, n, l, d, z, $) {
-      var m = n.children;
-      if (m !== void 0)
-        if (d)
-          if (X(m)) {
-            for (d = 0; d < m.length; d++)
-              q(m[d]);
-            Object.freeze && Object.freeze(m);
-          } 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 q(m);
-      if (Y.call(n, "key")) {
-        m = a(e);
-        var k = Object.keys(n).filter(function(c) {
-          return c !== "key";
-        });
-        d = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", S[m + d] || (k = 0 < k.length ? "{" + k.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} />`,
-          d,
-          m,
-          k,
-          m
-        ), S[m + d] = !0);
-      }
-      if (m = null, l !== void 0 && (u(l), m = "" + l), x(n) && (u(n.key), m = "" + n.key), "key" in n) {
-        l = {};
-        for (var r in n)
-          r !== "key" && (l[r] = n[r]);
-      } else l = n;
-      return m && v(
-        l,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), U(
-        e,
-        m,
-        l,
-        i(),
-        z,
-        $
-      );
-    }
-    function q(e) {
-      g(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? g(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function g(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === N;
-    }
-    var T = de, N = Symbol.for("react.transitional.element"), V = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), L = Symbol.for("react.profiler"), J = Symbol.for("react.consumer"), te = Symbol.for("react.context"), W = Symbol.for("react.forward_ref"), A = Symbol.for("react.suspense"), F = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), R = Symbol.for("react.activity"), H = Symbol.for("react.client.reference"), _ = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Y = Object.prototype.hasOwnProperty, X = Array.isArray, j = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    T = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var Z, I = {}, Q = T.react_stack_bottom_frame.bind(
-      T,
-      h
-    )(), B = j(s(h)), S = {};
-    G.Fragment = E, G.jsx = function(e, n, l) {
-      var d = 1e4 > _.recentlyCreatedOwnerStacks++;
-      return y(
-        e,
-        n,
-        l,
-        !1,
-        d ? Error("react-stack-top-frame") : Q,
-        d ? j(s(e)) : B
-      );
-    }, G.jsxs = function(e, n, l) {
-      var d = 1e4 > _.recentlyCreatedOwnerStacks++;
-      return y(
-        e,
-        n,
-        l,
-        !0,
-        d ? Error("react-stack-top-frame") : Q,
-        d ? j(s(e)) : B
-      );
-    };
-  })()), G;
-}
-var le;
-function fe() {
-  return le || (le = 1, process.env.NODE_ENV === "production" ? ee.exports = ue() : ee.exports = me()), ee.exports;
-}
-var t = fe();
-const pe = window.origin + "/cloud/speakid/games/whatsmissing/", oe = (a, p) => a.map(([u, s]) => ({
-  src: `${pe}${p}/${s.replace(/\s/g, "%20")}.png`,
-  name: s
-})), ge = [
+import { jsx as o, jsxs as s, Fragment as O } from "react/jsx-runtime";
+import { useEffect as L, useState as l, useMemo as se } from "react";
+const le = window.origin + "/cloud/speakid/games/whatsmissing/", W = (r, m) => r.map(([a, n]) => ({
+  src: `${le}${m}/${n.replace(/\s/g, "%20")}.png`,
+  name: n
+})), ae = [
   ["apple", "apple"],
   ["banana", "banana"],
   ["bread", "bread"],
@@ -306,7 +29,7 @@ const pe = window.origin + "/cloud/speakid/games/whatsmissing/", oe = (a, p) =>
   ["strawberry", "strawberry"],
   ["tomato", "tomato"],
   ["watermelon", "watermelon"]
-], he = [
+], de = [
   ["bear", "bear"],
   ["cat", "cat"],
   ["crocodile", "crocodile"],
@@ -326,7 +49,7 @@ const pe = window.origin + "/cloud/speakid/games/whatsmissing/", oe = (a, p) =>
   ["tortoise", "tortoise"],
   ["wolf", "wolf"],
   ["zebra", "zebra"]
-], xe = [
+], ce = [
   ["ball", "ball"],
   ["balloon", "balloon"],
   ["blocks", "blocks"],
@@ -346,23 +69,23 @@ const pe = window.origin + "/cloud/speakid/games/whatsmissing/", oe = (a, p) =>
   ["teddy_bear", "teddy bear"],
   ["yo-yo", "yo-yo"],
   ["crayons", "crayons"]
-], ce = {
-  food: oe(ge, "food"),
-  animals: oe(he, "animals"),
-  toys: oe(xe, "toys")
-}, be = `
+], V = {
+  food: W(ae, "food"),
+  animals: W(de, "animals"),
+  toys: W(ce, "toys")
+}, me = `
   @keyframes spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
 `;
 if (typeof document < "u" && !document.getElementById("spin-keyframes")) {
-  const a = document.createElement("style");
-  a.id = "spin-keyframes", a.innerHTML = be, document.head.appendChild(a);
+  const r = document.createElement("style");
+  r.id = "spin-keyframes", r.innerHTML = me, document.head.appendChild(r);
 }
-const ye = {
+const ge = {
   animation: "spin 1.4s linear infinite"
-}, o = {
+}, t = {
   gmCenterScreen: {
     position: "relative",
     zIndex: 1,
@@ -421,7 +144,6 @@ const ye = {
     position: "relative",
     width: "100%",
     maxWidth: "600px",
-    // ограничение ширины для мобильных
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column",
@@ -487,26 +209,28 @@ const ye = {
     overflow: "hidden",
     textOverflow: "ellipsis"
   },
+  // ✅ Исправленный логотип: без белого фона, не ломает верстку
   gmLogoFixed: {
-    position: "sticky",
+    position: "absolute",
     top: "16px",
-    left: "20px",
-    zIndex: 9999,
-    background: "white",
-    padding: "4px 8px",
-    borderRadius: "8px"
+    left: "24px",
+    width: "120px",
+    zIndex: 10,
+    pointerEvents: "none",
+    background: "transparent"
   },
   gmLogoImg: {
     height: "clamp(28px, 5vw, 40px)",
-    width: "auto"
+    width: "auto",
+    background: "transparent"
   },
   gmHourglass: {
     fontSize: "42px",
-    ...ye
+    ...ge
   }
-}, we = window.origin + "/cloud/speakid/games/whatsmissing/logo.png", Te = () => {
-  const a = document.createElement("style");
-  a.textContent = `
+}, pe = window.origin + "/cloud/speakid/games/whatsmissing/logo.png", ue = () => {
+  const r = document.createElement("style");
+  r.textContent = `
     html, body, #root {
       margin: 0;
       padding: 0;
@@ -536,154 +260,157 @@ const ye = {
       from { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
     }
-  `, document.head.appendChild(a);
-}, je = (a, p) => {
-  const u = Array.from({ length: a.length + 1 }, () => Array(p.length + 1).fill(0));
-  for (let s = 0; s <= a.length; s++) u[s][0] = s;
-  for (let s = 0; s <= p.length; s++) u[0][s] = s;
-  for (let s = 1; s <= a.length; s++)
-    for (let i = 1; i <= p.length; i++)
-      u[s][i] = a[s - 1] === p[i - 1] ? u[s - 1][i - 1] : Math.min(u[s - 1][i - 1], u[s][i - 1], u[s - 1][i]) + 1;
-  return u[a.length][p.length];
+  `, document.head.appendChild(r);
+}, he = (r, m) => {
+  const a = Array.from({ length: r.length + 1 }, () => Array(m.length + 1).fill(0));
+  for (let n = 0; n <= r.length; n++) a[n][0] = n;
+  for (let n = 0; n <= m.length; n++) a[0][n] = n;
+  for (let n = 1; n <= r.length; n++)
+    for (let d = 1; d <= m.length; d++)
+      a[n][d] = r[n - 1] === m[d - 1] ? a[n - 1][d - 1] : Math.min(a[n - 1][d - 1], a[n][d - 1], a[n - 1][d]) + 1;
+  return a[r.length][m.length];
 };
-function Re() {
-  ne(() => {
-    Te();
+function xe() {
+  L(() => {
+    ue();
   }, []);
-  const [a, p] = f(null), [u, s] = f([]), [i, h] = f(4), [x, v] = f(!1), [C, U] = f(1), [y, q] = f(null), [g, T] = f("ready"), [N, V] = f(3), [E, M] = f(7), [L, J] = f(20), [te, W] = f(0), [A, F] = f(!1), [O, P] = f(""), [R, H] = f(!1), [_, Y] = f(!1), [X, j] = f(null), [Z, I] = f([]), [Q, B] = f([]), [S, e] = f(!1);
-  ne(() => {
-    const r = () => e(window.innerWidth < 768);
-    return r(), window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
+  const [r, m] = l(null), [a, n] = l([]), [d, Z] = l(4), [f, j] = l(!1), [x, E] = l(1), [u, J] = l(null), [g, b] = l("ready"), [G, F] = l(3), [v, S] = l(7), [z, D] = l(20), [Q, R] = l(0), [w, I] = l(!1), [k, U] = l(""), [h, A] = l(!1), [H, Y] = l(!1), [N, y] = l(null), [X, M] = l([]), [ee, P] = l([]), [C, te] = l(!1);
+  L(() => {
+    const e = () => te(window.innerWidth < 768);
+    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
   }, []);
-  const n = (r) => [...r].sort(() => Math.random() - 0.5).slice(0, 6), l = () => {
-    if (!a) return;
-    const r = n(ce[a]);
-    s(r), v(!0), F(!1), U(1), W(0), I([]), B([]), d(r, [], !0);
-  }, d = (r = u, c = Q, w = !1) => {
-    const b = n(r.length ? r : ce[a]);
-    let K = Math.floor(Math.random() * b.length), re = b[K].name, se = 0;
-    for (; c.includes(re) && se < 20; )
-      K = Math.floor(Math.random() * b.length), re = b[K].name, se++;
-    s(b), q(K), B([...c, re]), H(!1), P(""), J(20), j(null), w ? (T("ready"), V(3), M(7)) : (T("memorize"), M(7));
+  const _ = (e) => [...e].sort(() => Math.random() - 0.5).slice(0, 6), $ = () => {
+    if (!r) return;
+    const e = _(V[r]);
+    n(e), j(!0), I(!1), E(1), R(0), M([]), P([]), q(e, [], !0);
+  }, q = (e = a, i = ee, p = !1) => {
+    const c = _(e.length ? e : V[r]);
+    let T = Math.floor(Math.random() * c.length), B = c[T].name, K = 0;
+    for (; i.includes(B) && K < 20; )
+      T = Math.floor(Math.random() * c.length), B = c[T].name, K++;
+    n(c), J(T), P([...i, B]), A(!1), U(""), D(20), y(null), p ? (b("ready"), F(3), S(7)) : (b("memorize"), S(7));
   };
-  ne(() => {
-    if (!(!x || A || R)) {
+  L(() => {
+    if (!(!f || w || h)) {
       if (g === "ready")
-        if (N <= 0)
-          T("memorize");
+        if (G <= 0)
+          b("memorize");
         else {
-          const r = setTimeout(() => V((c) => c - 1), 1e3);
-          return () => clearTimeout(r);
+          const e = setTimeout(() => F((i) => i - 1), 1e3);
+          return () => clearTimeout(e);
         }
       if (g === "memorize")
-        if (E <= 0)
-          T("guess");
+        if (v <= 0)
+          b("guess");
         else {
-          const r = setTimeout(() => M((c) => c - 1), 1e3);
-          return () => clearTimeout(r);
+          const e = setTimeout(() => S((i) => i - 1), 1e3);
+          return () => clearTimeout(e);
         }
       if (g === "guess") {
-        if (L <= 0) {
-          H(!0), j("wrong");
-          const c = u[y].name;
-          I((w) => [
-            ...w,
-            { round: C, answer: O, correct: c, result: "wrong" }
+        if (z <= 0) {
+          A(!0), y("wrong");
+          const i = a[u].name;
+          M((p) => [
+            ...p,
+            { round: x, answer: k, correct: i, result: "wrong" }
           ]);
           return;
         }
-        const r = setTimeout(() => J((c) => c - 1), 1e3);
-        return () => clearTimeout(r);
+        const e = setTimeout(() => D((i) => i - 1), 1e3);
+        return () => clearTimeout(e);
       }
     }
   }, [
     g,
-    N,
-    E,
-    L,
-    x,
-    A,
-    R,
+    G,
+    v,
+    z,
+    f,
+    w,
+    h,
+    a,
     u,
-    y,
-    C,
-    O
+    x,
+    k
   ]);
-  const z = () => {
-    if (y === null || _) return;
-    const r = u[y].name, c = O.toLowerCase().trim();
-    let w = "wrong";
-    c === r ? (W((b) => b + 1), j("correct"), w = "correct") : je(c, r) === 1 ? (W((b) => b + 0.5), j("almost"), w = "almost") : (j("wrong"), w = "wrong"), I((b) => [
-      ...b,
-      { round: C, answer: c, correct: r, result: w }
+  const oe = () => {
+    if (u === null || H) return;
+    const e = a[u].name, i = k.toLowerCase().trim();
+    let p = "wrong";
+    i === e ? (R((c) => c + 1), y("correct"), p = "correct") : he(i, e) === 1 ? (R((c) => c + 0.5), y("almost"), p = "almost") : (y("wrong"), p = "wrong"), M((c) => [
+      ...c,
+      { round: x, answer: i, correct: e, result: p }
     ]), Y(!0), setTimeout(() => {
-      Y(!1), H(!0);
+      Y(!1), A(!0);
     }, 600);
-  }, $ = () => C < i ? (U((r) => r + 1), d()) : F(!0), m = () => {
-    v(!1), F(!1), p(null);
-  }, k = () => /* @__PURE__ */ t.jsx("div", { style: o.gmLogoFixed, children: /* @__PURE__ */ t.jsx("img", { src: we, alt: "SPEAKID Logo", style: o.gmLogoImg }) });
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    !S && /* @__PURE__ */ t.jsx(k, {}),
-    !a && !x && /* @__PURE__ */ t.jsxs("div", { style: o.gmCenterScreen, children: [
-      /* @__PURE__ */ t.jsx("h1", { style: o.gmHeadline1, children: "WHAT'S MISSING?" }),
-      /* @__PURE__ */ t.jsx("p", { style: o.gmBodyM, children: "Select a theme:" }),
-      /* @__PURE__ */ t.jsx("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((r) => /* @__PURE__ */ t.jsx("button", { style: o.gmButton, onClick: () => p(r), children: r === "animals" ? "🐶 Animals" : r === "food" ? "🍎 Food" : "🧸 Toys" }, r)) }),
-      /* @__PURE__ */ t.jsxs("div", { style: { marginTop: 24 }, children: [
-        /* @__PURE__ */ t.jsx("p", { style: o.gmBodyS, children: "Choose number of rounds:" }),
-        /* @__PURE__ */ t.jsx("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((r) => /* @__PURE__ */ t.jsx(
+  }, ne = () => x < d ? (E((e) => e + 1), q()) : I(!0), re = () => {
+    j(!1), I(!1), m(null);
+  }, ie = se(
+    () => /* @__PURE__ */ o("div", { style: t.gmLogoFixed, children: /* @__PURE__ */ o("img", { src: pe, alt: "SPEAKID Logo", style: t.gmLogoImg }) }),
+    []
+  );
+  return /* @__PURE__ */ s(O, { children: [
+    !C && ie,
+    !r && !f && /* @__PURE__ */ s("div", { style: t.gmCenterScreen, children: [
+      /* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "WHAT'S MISSING?" }),
+      /* @__PURE__ */ o("p", { style: t.gmBodyM, children: "Select a theme:" }),
+      /* @__PURE__ */ o("div", { style: { display: "flex", gap: 16 }, children: ["animals", "food", "toys"].map((e) => /* @__PURE__ */ o("button", { style: t.gmButton, onClick: () => m(e), children: e === "animals" ? "🐶 Animals" : e === "food" ? "🍎 Food" : "🧸 Toys" }, e)) }),
+      /* @__PURE__ */ s("div", { style: { marginTop: 24 }, children: [
+        /* @__PURE__ */ o("p", { style: t.gmBodyS, children: "Choose number of rounds:" }),
+        /* @__PURE__ */ o("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [3, 4, 5].map((e) => /* @__PURE__ */ o(
           "button",
           {
             style: {
-              ...o.gmButton,
-              ...i === r ? o.gmButtonActive : {}
+              ...t.gmButton,
+              ...d === e ? t.gmButtonActive : {}
             },
-            onClick: () => h(r),
-            children: r
+            onClick: () => Z(e),
+            children: e
           },
-          r
+          e
         )) })
       ] })
     ] }),
-    a && !x && /* @__PURE__ */ t.jsxs("div", { style: o.gmCenterScreen, children: [
-      /* @__PURE__ */ t.jsxs("h1", { style: o.gmHeadline1, children: [
+    r && !f && /* @__PURE__ */ s("div", { style: t.gmCenterScreen, children: [
+      /* @__PURE__ */ s("h1", { style: t.gmHeadline1, children: [
         "Theme selected: ",
-        a
+        r
       ] }),
-      /* @__PURE__ */ t.jsxs("p", { style: o.gmBodyM, children: [
+      /* @__PURE__ */ s("p", { style: t.gmBodyM, children: [
         "Rounds: ",
-        i
+        d
       ] }),
-      /* @__PURE__ */ t.jsx("button", { style: o.gmButton, onClick: l, children: "▶ Start game" })
+      /* @__PURE__ */ o("button", { style: t.gmButton, onClick: $, children: "▶ Start game" })
     ] }),
-    A && /* @__PURE__ */ t.jsxs("div", { style: o.gmCenterScreen, children: [
-      /* @__PURE__ */ t.jsx("h1", { style: o.gmHeadline1, children: "Results" }),
-      /* @__PURE__ */ t.jsxs("h2", { style: o.gmHeadline3, children: [
+    w && /* @__PURE__ */ s("div", { style: t.gmCenterScreen, children: [
+      /* @__PURE__ */ o("h1", { style: t.gmHeadline1, children: "Results" }),
+      /* @__PURE__ */ s("h2", { style: t.gmHeadline3, children: [
         "Your score: ",
-        te,
+        Q,
         " / ",
-        i
+        d
       ] }),
-      /* @__PURE__ */ t.jsxs("table", { style: o.gmTable, children: [
-        /* @__PURE__ */ t.jsx("thead", { children: /* @__PURE__ */ t.jsxs("tr", { children: [
-          /* @__PURE__ */ t.jsx("th", { children: "Round" }),
-          /* @__PURE__ */ t.jsx("th", { children: "Your Answer" }),
-          /* @__PURE__ */ t.jsx("th", { children: "Correct" }),
-          /* @__PURE__ */ t.jsx("th", { children: "Result" })
+      /* @__PURE__ */ s("table", { style: t.gmTable, children: [
+        /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ s("tr", { children: [
+          /* @__PURE__ */ o("th", { children: "Round" }),
+          /* @__PURE__ */ o("th", { children: "Your Answer" }),
+          /* @__PURE__ */ o("th", { children: "Correct" }),
+          /* @__PURE__ */ o("th", { children: "Result" })
         ] }) }),
-        /* @__PURE__ */ t.jsx("tbody", { children: Z.map((r, c) => /* @__PURE__ */ t.jsxs("tr", { children: [
-          /* @__PURE__ */ t.jsx("td", { style: o.gmTableCell, children: r.round }),
-          /* @__PURE__ */ t.jsx("td", { style: o.gmTableCell, children: r.answer || "—" }),
-          /* @__PURE__ */ t.jsx("td", { style: o.gmTableCell, children: r.correct }),
-          /* @__PURE__ */ t.jsx("td", { style: o.gmTableCell, children: r.result === "correct" ? "✔ Correct" : r.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
-        ] }, c)) })
+        /* @__PURE__ */ o("tbody", { children: X.map((e, i) => /* @__PURE__ */ s("tr", { children: [
+          /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.round }),
+          /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.answer || "—" }),
+          /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.correct }),
+          /* @__PURE__ */ o("td", { style: t.gmTableCell, children: e.result === "correct" ? "✔ Correct" : e.result === "almost" ? "◐ Almost (0.5)" : "✘ Wrong" })
+        ] }, i)) })
       ] }),
-      /* @__PURE__ */ t.jsxs("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
-        /* @__PURE__ */ t.jsx("button", { style: o.gmButton, onClick: l, children: "🔁 Play again" }),
-        /* @__PURE__ */ t.jsx("button", { style: o.gmButton, onClick: m, children: "⬅️ Choose theme" })
+      /* @__PURE__ */ s("div", { style: { display: "flex", gap: 12, marginTop: 24 }, children: [
+        /* @__PURE__ */ o("button", { style: t.gmButton, onClick: $, children: "🔁 Play again" }),
+        /* @__PURE__ */ o("button", { style: t.gmButton, onClick: re, children: "⬅️ Choose theme" })
       ] })
     ] }),
-    x && !A && /* @__PURE__ */ t.jsxs("div", { style: o.gmGameLayout, children: [
-      /* @__PURE__ */ t.jsxs(
+    f && !w && /* @__PURE__ */ s("div", { style: t.gmGameLayout, children: [
+      /* @__PURE__ */ s(
         "div",
         {
           style: {
@@ -694,33 +421,32 @@ function Re() {
             alignItems: "center"
           },
           children: [
-            g === "ready" && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-              /* @__PURE__ */ t.jsx("h1", { style: { ...o.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
-              /* @__PURE__ */ t.jsx("div", { style: o.gmHourglass, children: "⏳" })
+            g === "ready" && /* @__PURE__ */ s(O, { children: [
+              /* @__PURE__ */ o("h1", { style: { ...t.gmHeadline1, color: "#ec4c44" }, children: "GET READY" }),
+              /* @__PURE__ */ o("div", { style: t.gmHourglass, children: "⏳" })
             ] }),
-            g === "memorize" && /* @__PURE__ */ t.jsxs("p", { style: { ...o.gmBodyM, color: "#10b981" }, children: [
+            g === "memorize" && /* @__PURE__ */ s("p", { style: { ...t.gmBodyM, color: "#10b981" }, children: [
               "MEMORIZE (",
-              E,
+              v,
               ")"
             ] }),
-            g === "guess" && !R && /* @__PURE__ */ t.jsxs("p", { style: o.gmBodyM, children: [
+            g === "guess" && !h && /* @__PURE__ */ s("p", { style: t.gmBodyM, children: [
               "⏳ Time left: ",
-              L,
+              z,
               "s"
             ] })
           ]
         }
       ),
-      g !== "ready" && /* @__PURE__ */ t.jsx(
+      g !== "ready" && /* @__PURE__ */ o(
         "div",
         {
           style: {
-            ...o.gmGrid,
-            gridTemplateColumns: S ? "repeat(2, 1fr)" : "repeat(3, 210px)",
-            gridAutoRows: S ? "150px" : "210px",
-            gap: S ? "12px" : "20px",
+            ...t.gmGrid,
+            gridTemplateColumns: C ? "repeat(2, 1fr)" : "repeat(3, 210px)",
+            gridAutoRows: C ? "150px" : "210px",
+            gap: C ? "12px" : "20px",
             justifyItems: "center",
-            // 🔹 увеличение только при >2000px
             ...window.innerWidth > 2e3 ? {
               gridTemplateColumns: "repeat(3, 260px)",
               gridAutoRows: "260px",
@@ -732,21 +458,21 @@ function Re() {
               gap: "32px"
             } : {}
           },
-          children: u.map((r, c) => {
-            const w = y === c && g === "guess" && !R;
-            return /* @__PURE__ */ t.jsx(
+          children: a.map((e, i) => {
+            const p = u === i && g === "guess" && !h;
+            return /* @__PURE__ */ o(
               "div",
               {
                 style: {
-                  ...o.gmCard,
-                  ...X === "correct" && y === c ? o.gmCorrect : {},
-                  ...X === "wrong" && y === c ? o.gmWrong : {}
+                  ...t.gmCard,
+                  ...N === "correct" && u === i ? t.gmCorrect : {},
+                  ...N === "wrong" && u === i ? t.gmWrong : {}
                 },
-                children: !w && /* @__PURE__ */ t.jsx(
+                children: !p && /* @__PURE__ */ o(
                   "img",
                   {
-                    src: r.src,
-                    alt: r.name,
+                    src: e.src,
+                    alt: e.name,
                     style: {
                       width: "100%",
                       height: "100%",
@@ -755,39 +481,39 @@ function Re() {
                   }
                 )
               },
-              c
+              i
             );
           })
         }
       ),
-      /* @__PURE__ */ t.jsxs("div", { style: { marginTop: 16, height: 80 }, children: [
-        g === "guess" && !R && /* @__PURE__ */ t.jsxs("div", { children: [
-          /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ s("div", { style: { marginTop: 16, height: 80 }, children: [
+        g === "guess" && !h && /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ o(
             "input",
             {
               type: "text",
               placeholder: "Type the missing word",
-              value: O,
-              onChange: (r) => P(r.target.value),
-              style: o.gmInput
+              value: k,
+              onChange: (e) => U(e.target.value),
+              style: t.gmInput
             }
           ),
-          /* @__PURE__ */ t.jsx(
+          /* @__PURE__ */ o(
             "button",
             {
-              style: { ...o.gmButton, marginLeft: 8 },
-              onClick: z,
-              disabled: _,
-              children: _ ? "..." : "Check"
+              style: { ...t.gmButton, marginLeft: 8 },
+              onClick: oe,
+              disabled: H,
+              children: H ? "..." : "Check"
             }
           )
         ] }),
-        R && /* @__PURE__ */ t.jsx("button", { style: o.gmButton, onClick: $, children: "Next round" })
+        h && /* @__PURE__ */ o("button", { style: t.gmButton, onClick: ne, children: "Next round" })
       ] })
     ] })
   ] });
 }
 export {
-  Re as Game,
-  ce as themes
+  xe as Game,
+  V as themes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@mblinkov/whats-missing",
- "version": "20.0.2",
+ "version": "20.0.4",
  "main": "dist/whats-missing.umd.js",
  "module": "dist/whats-missing.es.js",
  "types": "dist/index.d.ts",

package/src/Game.styles.ts

@@ -99,7 +99,7 @@ export const styles: Record<string, CSSProperties> = {
   gmGameLayout: {
     position: "relative",
     width: "100%",
-    maxWidth: "600px", // ограничение ширины для мобильных
+    maxWidth: "600px",
     minHeight: "100vh",
     display: "flex",
     flexDirection: "column",
@@ -174,19 +174,21 @@ export const styles: Record<string, CSSProperties> = {
     textOverflow: "ellipsis",
   },
 
+  // ✅ Исправленный логотип: без белого фона, не ломает верстку
   gmLogoFixed: {
-    position: "sticky",
+    position: "absolute",
     top: "16px",
-    left: "20px",
-    zIndex: 9999,
-    background: "white",
-    padding: "4px 8px",
-    borderRadius: "8px",
+    left: "24px",
+    width: "120px",
+    zIndex: 10,
+    pointerEvents: "none",
+    background: "transparent",
   },
 
   gmLogoImg: {
     height: "clamp(28px, 5vw, 40px)",
     width: "auto",
+    background: "transparent",
   },
 
   gmReadyWrapper: {

package/src/Game.tsx

@@ -1,11 +1,10 @@
-import { useState, useEffect } from "react";
-// логотип теперь в облаке, локальный импорт удаляем
+import { useState, useEffect, useMemo } from "react";
 import { themes } from "./themes";
 import { styles } from "./Game.styles";
 import type { Theme } from "./themes";
 
-// если логотип всё-таки нужен в интерфейсе
 const logo = window.origin + "/cloud/speakid/games/whatsmissing/logo.png";
+
 type ImageItem = { src: string; name: string };
 type RoundResult = {
   round: number;
@@ -14,7 +13,6 @@ type RoundResult = {
   result: "correct" | "almost" | "wrong";
 };
 
-// 🔹 встроенный глобальный reset (вместо index.css)
 const globalReset = () => {
   const style = document.createElement("style");
   style.textContent = `
@@ -226,15 +224,19 @@ export default function Game() {
     setTheme(null);
   };
 
-  const Logo = () => (
-    <div style={styles.gmLogoFixed}>
-      <img src={logo} alt="SPEAKID Logo" style={styles.gmLogoImg} />
-    </div>
+  // ✅ мемоизированный логотип (больше не мигает)
+  const MemoizedLogo = useMemo(
+    () => (
+      <div style={styles.gmLogoFixed}>
+        <img src={logo} alt="SPEAKID Logo" style={styles.gmLogoImg} />
+      </div>
+    ),
+    []
   );
 
   return (
     <>
-      {!isMobile && <Logo />}
+      {!isMobile && MemoizedLogo}
 
       {!theme && !started && (
         <div style={styles.gmCenterScreen}>
@@ -355,7 +357,6 @@ export default function Game() {
                 gridAutoRows: isMobile ? "150px" : "210px",
                 gap: isMobile ? "12px" : "20px",
                 justifyItems: "center",
-                // 🔹 увеличение только при >2000px
                 ...(window.innerWidth > 2000
                   ? {
                       gridTemplateColumns: "repeat(3, 260px)",
@@ -373,7 +374,8 @@ export default function Game() {
               }}
             >
               {files.map((file, i) => {
-                const isHidden = hiddenIndex === i && phase === "guess" && !answered;
+                const isHidden =
+                  hiddenIndex === i && phase === "guess" && !answered;
                 return (
                   <div
                     key={i}

package/vite.config.ts

@@ -17,11 +17,12 @@ export default defineConfig({
     lib: {
       entry: "src/index.ts",
       name: "WhatsMissing",
-      formats: ["es", "cjs"], // ✅ добавлено — теперь Webpack поймет
+      formats: ["es", "cjs"], // ✅ поддержка Webpack
       fileName: (format) => `whats-missing.${format}.js`,
     },
     rollupOptions: {
-      external: ["react", "react-dom"],
+      // 🔥 добавлено "react/jsx-runtime"
+      external: ["react", "react-dom", "react/jsx-runtime"],
       output: {
         globals: {
           react: "React",