@ertekinno/human-like/dist/keyboard.js

A sophisticated React typewriter effect library with realistic human typing behavior, mobile/desktop keyboards, and comprehensive theming support

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),s=require("./useHumanLike-BFxeOC2S.cjs");var i=(e=>(e.Off="off",e.On="on",e.Locked="locked",e))(i||{}),o=(e=>(e.Letters="letters",e.Numbers="numbers",e.Symbols="symbols",e))(o||{});const n=t.forwardRef(({currentView:s=o.Letters,onViewChange:n,highlightedKey:a,keyboardMode:r="light",onKeyPress:l,unstyled:c=!1,className:d="",classes:p={},style:x={},labelOverrides:h={},iconOverrides:u={},uppercaseLettersWhenShifted:m=!0,shiftState:y=i.Off,onShiftStateChange:k},f)=>{const[g,b]=t.useState(""),[j,v]=t.useState(s),[C,S]=t.useState(y),[T,w]=t.useState(0);t.useEffect(()=>{v(s)},[s]),t.useEffect(()=>{S(y)},[y]),t.useEffect(()=>{if(a){b(a);const e=setTimeout(()=>b(""),200);return()=>clearTimeout(e)}},[a]),t.useImperativeHandle(f,()=>({resetKeyboard:()=>{v(o.Letters),S(i.Off),b("")},setView:e=>{const t=j;v(e),null==n||n({previousView:t,currentView:e,timestamp:Date.now()})},setShift:e=>{const t=C;S(e),null==k||k({previousState:t,currentState:e,timestamp:Date.now()})},highlightKey:e=>{b(e),setTimeout(()=>b(""),200)}}),[j,C,n,k]);const _=[["q","w","e","r","t","y","u","i","o","p"],["a","s","d","f","g","h","j","k","l"],["⇧","z","x","c","v","b","n","m","⌫"],["123","space","return"]],A=[["1","2","3","4","5","6","7","8","9","0"],["-","/",":",";","(",")","$","&","@",'"'],["#+=",".",",","?","!","'","⌫"],["ABC","space","return"]],B=[["[","]","{","}","#","%","^","*","+","="],["_","\\","|","~","<",">","€","£","¥","•"],["123",".",",","?","!","'","⌫"],["ABC","space","return"]],z=e=>{const t=j;v(e),null==n||n({previousView:t,currentView:e,timestamp:Date.now()})},E=e=>{if("⇧"===e)(()=>{const e=Date.now();if(e-T<300){const t=C===i.Locked?i.Off:i.Locked,s=C;S(t),null==k||k({previousState:s,currentState:t,timestamp:e})}else{let t;const s=C;switch(C){case i.Off:t=i.On;break;case i.On:case i.Locked:t=i.Off;break;default:t=i.On}S(t),null==k||k({previousState:s,currentState:t,timestamp:e})}w(e)})();else if("123"===e)z(o.Numbers);else if("ABC"===e)z(o.Letters);else if("#+="===e)z(o.Symbols);else{if(C===i.On&&1===e.length&&/[a-z]/i.test(e)){const e=C;S(i.Off),null==k||k({previousState:e,currentState:i.Off,timestamp:Date.now()})}null==l||l(e)}},O=e=>u[e]?u[e]:h[e]?h[e]:"space"===e?"space":"return"===e?"return":"⇧"===e?"⇧":e,P=e=>{const t=e=>"⇧"===e?"⇧":"backspace"===e||"⌫"===e?"⌫":"space"===e?"space":"ABC"===e?"ABC":"123"===e?"123":"#+="===e?"#+=":"return"===e||"enter"===e?"return":e.toLowerCase(),s=t(g)===t(e)||t(a||"")===t(e),o=["⇧","ABC","123","#+=","space","⌫","return"].includes(e),n="⇧"===e,r=n&&C===i.Locked;let l="human-like-mobile-keyboard__key";return"space"===e?l+=" human-like-mobile-keyboard__key--space":"⇧"===e?l+=" human-like-mobile-keyboard__key--shift":"⌫"===e?l+=" human-like-mobile-keyboard__key--backspace":"return"===e?l+=" human-like-mobile-keyboard__key--return":["ABC","123","#+="].includes(e)?l+=" human-like-mobile-keyboard__key--view-switch":l+=" human-like-mobile-keyboard__key--regular",s&&(l+=" human-like-mobile-keyboard__key--active"),n&&(r?l+=" human-like-mobile-keyboard__key--shift-locked":C===i.On&&(l+=" human-like-mobile-keyboard__key--shift-on")),o&&(l+=" human-like-mobile-keyboard__key--modifier"),l},L=e=>{if(c){return{minWidth:"space"===e?"180px":"⇧"===e||"⌫"===e?"55px":"return"===e?"80px":["ABC","123","#+="].includes(e)?"50px":"35px",height:"42px",border:"none",background:"none",cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center"}}return{}},W=x;return e.jsx("div",{className:(()=>{let e="human-like-mobile-keyboard";return p.root&&(e+=` ${p.root}`),d&&(e+=` ${d}`),e.trim()})(),style:W,"data-theme":r,children:(()=>{let e;switch(j){case o.Numbers:e=A;break;case o.Symbols:e=B;break;default:e=_}return j!==o.Letters||!m||C!==i.On&&C!==i.Locked?e:e.map(e=>e.map(e=>1===e.length&&/[a-z]/.test(e)?e.toUpperCase():e))})().map((t,s)=>e.jsx("div",{className:`human-like-mobile-keyboard__row ${p.row||""}`,children:t.map(t=>e.jsx("button",{className:P(t),style:L(t),onClick:()=>E(t),children:O(t)},t))},s))})});n.displayName="MobileKeyboard";const a=({highlightedKey:s,keyboardMode:i="light",onKeyPress:o})=>{const[n,a]=t.useState(""),[r,l]=t.useState(!1);t.useEffect(()=>{if(s){a(s),"shift"===s&&(l(!0),setTimeout(()=>l(!1),300));const e=setTimeout(()=>a(""),200);return()=>clearTimeout(e)}},[s]);const c=e=>"string"==typeof e?r?e.toUpperCase():e:r?e.shift:e.key,d=(e,t=!1)=>{const i=e=>"caps lock"===e||"CAPS"===e||"caps"===e?"caps lock":"backspace"===e||"⌫"===e?"backspace":"space"===e?"space":"shift"===e?"shift":"enter"===e||"return"===e?"enter":e.toLowerCase(),o=i(n)===i(e)||i(s||"")===i(e)||"shift"===e&&r;let a="human-like-desktop-keyboard__key";return"tab"===e?a+=" human-like-desktop-keyboard__key--tab":"caps lock"===e?a+=" human-like-desktop-keyboard__key--caps-lock":"shift"===e?a+=" human-like-desktop-keyboard__key--shift":"enter"===e?a+=" human-like-desktop-keyboard__key--enter":"backspace"===e?a+=" human-like-desktop-keyboard__key--backspace":"space"===e?a+=" human-like-desktop-keyboard__key--space":["ctrl","alt","cmd"].includes(e)?a+=" human-like-desktop-keyboard__key--ctrl":t?a+=" human-like-desktop-keyboard__key--function":/^\d$/.test(e)&&(a+=" human-like-desktop-keyboard__key--number"),o&&(a+=" human-like-desktop-keyboard__key--active"),a};return e.jsxs("div",{className:"human-like-desktop-keyboard","data-theme":i,children:[e.jsxs("div",{className:"human-like-desktop-keyboard__row",children:[[{key:"`",shift:"~"},{key:"1",shift:"!"},{key:"2",shift:"@"},{key:"3",shift:"#"},{key:"4",shift:"$"},{key:"5",shift:"%"},{key:"6",shift:"^"},{key:"7",shift:"&"},{key:"8",shift:"*"},{key:"9",shift:"("},{key:"0",shift:")"},{key:"-",shift:"_"},{key:"=",shift:"+"}].map(t=>e.jsx("button",{className:d(t.key),onClick:()=>null==o?void 0:o(t.key),children:e.jsxs("div",{style:{textAlign:"center",lineHeight:"1.2"},children:[e.jsx("div",{style:{fontSize:"10px",opacity:.7},children:t.shift}),e.jsx("div",{children:t.key})]})},t.key)),e.jsx("button",{className:d("backspace",!0),onClick:()=>null==o?void 0:o("backspace"),children:"⌫"})]}),e.jsxs("div",{className:"human-like-desktop-keyboard__row",children:[e.jsx("button",{className:d("tab",!0),onClick:()=>null==o?void 0:o("tab"),children:"tab"}),["q","w","e","r","t","y","u","i","o","p","[","]","\\"].map(t=>e.jsx("button",{className:d(t),onClick:()=>null==o?void 0:o(t),children:c(t)},t))]}),e.jsxs("div",{className:"human-like-desktop-keyboard__row",children:[e.jsx("button",{className:d("caps lock",!0),onClick:()=>null==o?void 0:o("caps lock"),children:"caps lock"}),["a","s","d","f","g","h","j","k","l",";","'"].map(t=>e.jsx("button",{className:d(t),onClick:()=>null==o?void 0:o(t),children:c(t)},t)),e.jsx("button",{className:d("enter",!0),onClick:()=>null==o?void 0:o("enter"),children:"↵"})]}),e.jsxs("div",{className:"human-like-desktop-keyboard__row",children:[e.jsx("button",{className:d("shift",!0),onClick:()=>null==o?void 0:o("shift"),children:"shift"}),["z","x","c","v","b","n","m",",",".","/"].map(t=>e.jsx("button",{className:d(t),onClick:()=>null==o?void 0:o(t),children:c(t)},t)),e.jsx("button",{className:d("shift",!0),onClick:()=>null==o?void 0:o("shift"),children:"shift"})]}),e.jsxs("div",{className:"human-like-desktop-keyboard__row",children:[e.jsx("button",{className:d("ctrl",!0),onClick:()=>null==o?void 0:o("ctrl"),children:"ctrl"}),e.jsx("button",{className:d("alt",!0),onClick:()=>null==o?void 0:o("alt"),children:"alt"}),e.jsx("button",{className:d("cmd",!0),onClick:()=>null==o?void 0:o("cmd"),children:"cmd"}),e.jsx("button",{className:d("space",!1),onClick:()=>null==o?void 0:o("space"),children:"space"}),e.jsx("button",{className:d("cmd",!0),onClick:()=>null==o?void 0:o("cmd"),children:"cmd"}),e.jsx("button",{className:d("alt",!0),onClick:()=>null==o?void 0:o("alt"),children:"alt"}),e.jsx("button",{className:d("ctrl",!0),onClick:()=>null==o?void 0:o("ctrl"),children:"ctrl"})]})]})},r=(e=10)=>{const[s,i]=t.useState([]);return{keyHistory:s,addKeyPress:t=>{const s={keyInfo:t,timestamp:Date.now(),id:Math.random().toString(36).substring(7)};i(t=>[s,...t].slice(0,e))},clearHistory:()=>i([])}};exports.DESKTOP_ADJACENT=s.DESKTOP_ADJACENT,exports.DESKTOP_QWERTY_LAYOUT=s.DESKTOP_QWERTY_LAYOUT,exports.DESKTOP_TIMING_PROFILES=s.DESKTOP_TIMING_PROFILES,exports.KeyboardAnalyzer=s.KeyboardAnalyzer,exports.MOBILE_ADJACENT=s.MOBILE_ADJACENT,exports.MOBILE_LAYOUT=s.MOBILE_LAYOUT,exports.MOBILE_TIMING_PROFILES=s.MOBILE_TIMING_PROFILES,exports.QWERTY_ADJACENT=s.QWERTY_ADJACENT,exports.getAdjacentKeys=s.getAdjacentKeys,exports.getDefaultTimingProfile=s.getDefaultTimingProfile,exports.DesktopKeyboard=a,exports.KeyboardSimulationDemo=({text:i,speed:l,mistakeFrequency:c,keyboardMode:d,theme:p,autoStart:x=!1})=>{var h,u,m;const[y,k]=t.useState(i||"HELLO World! Check out these amazing symbols: @#$%^&*() and numbers 12345. This demonstrates natural keyboard timing with view switching on mobile keyboards! 🚀"),[f,g]=t.useState(i||y),[b,j]=t.useState(d||"mobile"),[v,C]=t.useState(o.Letters),[S,T]=t.useState(p||"light"),[w,_]=t.useState(""),{keyHistory:A,addKeyPress:B,clearHistory:z}=r();t.useEffect(()=>{p&&p!==S&&T(p)},[p,S]),t.useEffect(()=>{d&&d!==b&&j(d)},[d,b]),t.useEffect(()=>{i&&i!==f&&(g(i),k(i))},[i,f]);const[E,O]=t.useState({speed:l||60,speedVariation:20,mistakeFrequency:c||.02,keyboardMode:"mobile",mistakeTypes:{adjacent:!0,random:!1,doubleChar:!0,commonTypos:!0},fatigueEffect:!1,concentrationLapses:!1,overcorrection:!0}),[P,L]=t.useState({showCursor:!0,cursorChar:"|",cursorBlinkSpeed:530}),W=t.useCallback(e=>{console.log(`🔑 Key: ${e.key}, Type: ${e.type}, View: ${e.keyboardView}, Duration: ${e.duration}ms, Sequence: ${e.sequenceIndex+1}/${e.sequenceLength}`),_(e.key),setTimeout(()=>{_("")},e.duration);const t=e.keyboardView;"letters"===t?C(o.Letters):"numbers"===t?C(o.Numbers):"symbols"===t&&C(o.Symbols),B(e)},[B]),{displayText:M,showCursor:N,cursorChar:I,currentState:K,progress:F,currentWPM:D,mistakeCount:R,start:$,stop:V,pause:q,resume:H,skip:U,reset:Y}=s.useHumanLike({text:f,config:{...E,keyboardMode:b},showCursor:P.showCursor,cursorChar:P.cursorChar,cursorBlinkSpeed:P.cursorBlinkSpeed,autoStart:x,keyboardMode:b,onKey:W,onStart:()=>{z(),console.log("🚀 Keyboard simulation demo started")},onComplete:()=>console.log("✅ Demo completed"),onMistake:e=>console.log(`❌ Mistake: "${e.originalChar}" → "${e.mistakeChar}"`),onChar:(e,t)=>console.log(`📝 Character: "${e}" at position ${t}`)}),J=t.useRef(E);t.useEffect(()=>{!(JSON.stringify(J.current)!==JSON.stringify(E))||"typing"!==K&&"correcting"!==K&&"paused"!==K||(console.log("🔄 Configuration changed during typing, restarting..."),Y(),setTimeout(()=>{$()},100)),J.current=E},[E,K,Y,$]);const G={backgroundColor:"dark"===S?"#2c2c2c":"#ffffff",color:"dark"===S?"#ffffff":"#000000",padding:"20px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',borderRadius:"8px",border:"dark"===S?"1px solid #555555":"1px solid #cccccc",width:"100%",minWidth:"800px"},Q={display:"flex",flexWrap:"wrap",gap:"10px",justifyContent:"start",marginBottom:"16px"},X=(e="secondary")=>({padding:"8px 16px",border:"dark"===S?"1px solid #555555":"1px solid #cccccc",borderRadius:"6px",fontSize:"14px",fontWeight:"500",cursor:"pointer",transition:"all 0.2s ease",backgroundColor:"primary"===e?"#007aff":"dark"===S?"#404040":"#f8f8f8",color:"primary"===e||"dark"===S?"#ffffff":"#000000"}),Z={backgroundColor:"dark"===S?"#1c1c1c":"#f2f2f2",borderRadius:"8px",padding:"25px",width:"100%",minHeight:"120px",textAlign:"left",fontSize:"18px",lineHeight:"1.6",fontFamily:'SF Mono, Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace',border:"dark"===S?"1px solid #555555":"1px solid #cccccc",position:"relative",whiteSpace:"pre-wrap",wordWrap:"break-word"},ee={backgroundColor:"dark"===S?"#1c1c1c":"#f2f2f2",padding:"15px",borderRadius:"8px",textAlign:"center",border:"1px solid "+("dark"===S?"#3c3c3e":"#d1d1d6")},te={fontSize:"24px",fontWeight:"700",color:"#007AFF"},se={fontSize:"12px",opacity:.7,textTransform:"uppercase",fontWeight:"600",marginTop:"5px"};return e.jsxs("div",{style:G,children:[e.jsxs("div",{style:{marginBottom:"16px"},children:[e.jsx("label",{style:{fontSize:"14px",fontWeight:"600",marginBottom:"8px",display:"block",color:"dark"===S?"#ffffff":"#000000",textAlign:"left"},children:"Keyboard Mode:"}),e.jsxs("div",{style:Q,children:[e.jsx("button",{style:X("mobile"===b?"primary":"secondary"),onClick:()=>{j("mobile"),O(e=>({...e,keyboardMode:"mobile"})),Y()},children:"Mobile"}),e.jsx("button",{style:X("desktop"===b?"primary":"secondary"),onClick:()=>{j("desktop"),O(e=>({...e,keyboardMode:"desktop"})),Y()},children:"Desktop"})]})]}),e.jsxs("div",{style:{marginBottom:"20px"},children:[e.jsx("label",{style:{fontSize:"14px",fontWeight:"600",marginBottom:"8px",display:"block",color:"dark"===S?"#ffffff":"#000000",textAlign:"left"},children:"Playback Controls:"}),e.jsxs("div",{style:Q,children:[e.jsx("button",{style:X("primary"),onClick:$,children:"Start"}),e.jsx("button",{style:X(),onClick:q,children:"Pause"}),e.jsx("button",{style:X(),onClick:H,children:"Resume"}),e.jsx("button",{style:X(),onClick:V,children:"Stop"}),e.jsx("button",{style:X(),onClick:Y,children:"Reset"}),e.jsx("button",{style:X(),onClick:U,children:"Skip"})]})]}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(120px, 1fr))",gap:"15px",marginBottom:"20px"},children:[e.jsxs("div",{style:ee,children:[e.jsxs("div",{style:te,children:[Math.round(F),"%"]}),e.jsx("div",{style:se,children:"Progress"})]}),e.jsxs("div",{style:ee,children:[e.jsx("div",{style:te,children:D}),e.jsx("div",{style:se,children:"WPM"})]}),e.jsxs("div",{style:ee,children:[e.jsx("div",{style:te,children:R}),e.jsx("div",{style:se,children:"Mistakes"})]}),e.jsxs("div",{style:ee,children:[e.jsx("div",{style:te,children:K}),e.jsx("div",{style:se,children:"State"})]})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:"16px",marginBottom:"24px"},children:[e.jsxs("div",{style:Z,children:[M,N&&e.jsx("span",{style:{opacity:.7,marginLeft:"2px"},children:I})]}),e.jsx("div",{style:{backgroundColor:"dark"===S?"#404040":"#f8f8f8",borderRadius:"8px",padding:"16px",border:"dark"===S?"1px solid #555555":"1px solid #cccccc",height:"320px",minWidth:"240px",overflowY:"auto"},children:0===A.length?e.jsx("div",{style:{textAlign:"left",color:"dark"===S?"#999999":"#666666",fontSize:"14px"},children:"Start typing to see key presses..."}):A.map((t,s)=>{const i=t.keyInfo,o=e=>({letter:"#34C759",number:"#FF9F0A",symbol:"#FF2D92",modifier:"#007AFF","view-switch":"#AF52DE",space:"#8E8E93",enter:"#8E8E93",backspace:"#FF3B30"}[e]||"#999999");return e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"8px 12px",marginBottom:"6px",backgroundColor:"dark"===S?"#2c2c2c":"#ffffff",borderRadius:"6px",border:`2px solid ${o(i.type)}`,opacity:Math.max(.3,1-.1*s),transform:`scale(${Math.max(.9,1-.02*s)})`,transition:"all 0.3s ease"},children:[e.jsxs("div",{children:[e.jsx("span",{style:{display:"inline-block",padding:"2px 6px",borderRadius:"4px",backgroundColor:o(i.type),color:"#ffffff",fontSize:"10px",fontWeight:"500",textTransform:"uppercase",marginRight:"8px"},children:i.type}),e.jsx("span",{style:{fontWeight:"600",fontSize:"14px",fontFamily:"SF Mono, Monaco, monospace"},children:(()=>{const e=i.key;return"view-switch"===i.type?e.toUpperCase():"space"===e?"SPACE":"enter"===e||"return"===e?"ENTER":"shift"===e?"SHIFT":"caps lock"===e||"CAPS"===e?"CAPS LOCK":"backspace"===e||"⌫"===e?"BACKSPACE":".?123"===e||"numbers"===e?"123":"#+="===e||"symbols"===e?"#+=":"ABC"===e||"letters"===e?"ABC":e.toUpperCase()})()})]}),e.jsxs("div",{style:{fontSize:"12px",opacity:.7,textAlign:"right"},children:[e.jsxs("div",{children:[i.duration,"ms"]}),e.jsxs("div",{style:{fontSize:"10px"},children:[i.sequenceIndex+1,"/",i.sequenceLength]})]})]},t.id)})})]}),e.jsx("div",{style:{width:"100%",marginBottom:"24px"},children:"mobile"===b?e.jsx(n,{currentView:v,highlightedKey:w,keyboardMode:S,onViewChange:e=>{C(e.currentView)},onKeyPress:e=>{_(e),setTimeout(()=>_(""),200)},style:{maxWidth:"none"}}):e.jsx(a,{highlightedKey:w,keyboardMode:S,onKeyPress:e=>{_(e),setTimeout(()=>_(""),200)}})}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"24px"},children:[e.jsxs("div",{style:{backgroundColor:"dark"===S?"#404040":"#f8f8f8",borderRadius:"8px",padding:"16px",border:"dark"===S?"1px solid #555555":"1px solid #cccccc",textAlign:"left"},children:[e.jsx("h4",{style:{marginTop:"0px",marginBottom:"16px",fontSize:"16px",fontWeight:"600"},children:"Sample Texts"}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"8px",marginBottom:"24px"},children:Object.entries({capsLock:"CAPS LOCK DEMO: THIS SHOWS CAPS LOCK BEHAVIOR vs Single Caps Like This!",symbols:"Symbol test: @username #hashtag $100 %discount ^power &and *star (parentheses) +plus =equals",numbers:"Numbers: 1234567890 and mixed content like user123@email.com",mixed:"Mixed content: Hello WORLD! Check symbols @#$% numbers 123 and normal text.",programming:"const greeting = 'Hello World!'; if (user.isActive) { console.log(`Welcome ${user.name}!`); }",sentences:"Short sentence. Another one! What about questions? This demonstrates sentence pauses after punctuation.",words:"This text has many individual words to demonstrate word pause timing between each word in the sentence.",complex:"Sophisticated terminology demonstrates thinking pauses before complex multisyllabic words like 'implementation', 'configuration', and 'demonstration'."}).map(([t,s])=>e.jsx("button",{style:{...X(),fontSize:"13px",padding:"10px 12px",textAlign:"left"},onClick:()=>{g(s),k(s),Y()},title:s.substring(0,100)+"...",children:t.charAt(0).toUpperCase()+t.slice(1)},t))}),e.jsxs("div",{children:[e.jsx("h4",{style:{marginBottom:"12px",fontSize:"16px",fontWeight:"600"},children:"Custom Text"}),e.jsx("textarea",{value:y,onChange:e=>k(e.target.value),style:{width:"100%",height:"120px",padding:"12px",borderRadius:"6px",border:"dark"===S?"1px solid #555555":"1px solid #cccccc",backgroundColor:"dark"===S?"#2c2c2c":"#ffffff",color:"dark"===S?"#ffffff":"#000000",fontSize:"14px",fontFamily:"SF Mono, Monaco, monospace",resize:"vertical",outline:"none",boxSizing:"border-box"},placeholder:"Enter your custom text here..."}),e.jsx("button",{style:{...X("primary"),marginTop:"12px",width:"100%",fontSize:"14px",fontWeight:"600"},onClick:()=>{g(y),Y()},children:"Update Text"})]})]}),e.jsx("div",{style:{backgroundColor:"dark"===S?"#404040":"#f8f8f8",borderRadius:"8px",padding:"16px",border:"dark"===S?"1px solid #555555":"1px solid #cccccc",textAlign:"left"},children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"18px"},children:[e.jsxs("div",{children:[e.jsx("h4",{style:{marginTop:"0px",marginBottom:"12px",fontSize:"16px",fontWeight:"600",opacity:.9},children:"Basic Settings"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Speed: ",E.speed||60,"ms"]}),e.jsx("input",{type:"range",min:"20",max:"300",value:E.speed||60,onChange:e=>O(t=>({...t,speed:parseInt(e.target.value)})),style:{width:"100%",height:"4px"}}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:"11px",opacity:.6,marginTop:"2px"},children:[e.jsx("span",{children:"Fast"}),e.jsx("span",{children:"Slow"})]})]}),e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Speed Variation: ",E.speedVariation,"ms"]}),e.jsx("input",{type:"range",min:"0",max:"100",value:E.speedVariation,onChange:e=>O(t=>({...t,speedVariation:parseInt(e.target.value)})),style:{width:"100%",height:"4px"}})]}),e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Mistake Rate: ",(100*(E.mistakeFrequency||0)).toFixed(1),"%"]}),e.jsx("input",{type:"range",min:"0",max:"0.5",step:"0.01",value:E.mistakeFrequency||0,onChange:e=>O(t=>({...t,mistakeFrequency:parseFloat(e.target.value)})),style:{width:"100%",height:"4px"}})]})]})]}),e.jsxs("div",{style:{paddingTop:"6px",borderTop:"dark"===S?"1px solid #555555":"1px solid #cccccc"},children:[e.jsx("h4",{style:{marginBottom:"12px",fontSize:"16px",fontWeight:"600",opacity:.9},children:"Pause Timing"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Sentence Pause: ",E.sentencePause||500,"ms",e.jsx("span",{style:{fontSize:"12px",opacity:.7,fontWeight:"normal",display:"block"},children:"After . ! ?"})]}),e.jsx("input",{type:"range",min:"100",max:"1500",step:"50",value:E.sentencePause||500,onChange:e=>O(t=>({...t,sentencePause:parseInt(e.target.value)})),style:{width:"100%",height:"4px"}})]}),e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Word Pause: ",E.wordPause||150,"ms",e.jsx("span",{style:{fontSize:"12px",opacity:.7,fontWeight:"normal",display:"block"},children:"Between words"})]}),e.jsx("input",{type:"range",min:"50",max:"800",step:"25",value:E.wordPause||150,onChange:e=>O(t=>({...t,wordPause:parseInt(e.target.value)})),style:{width:"100%",height:"4px"}})]}),e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Thinking Pause: ",E.thinkingPause||400,"ms",e.jsx("span",{style:{fontSize:"12px",opacity:.7,fontWeight:"normal",display:"block"},children:"Before complex words"})]}),e.jsx("input",{type:"range",min:"100",max:"1200",step:"50",value:E.thinkingPause||400,onChange:e=>O(t=>({...t,thinkingPause:parseInt(e.target.value)})),style:{width:"100%",height:"4px"}})]}),e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Correction Pause: ",E.correctionPause||200,"ms",e.jsx("span",{style:{fontSize:"12px",opacity:.7,fontWeight:"normal",display:"block"},children:"Before fixing mistakes"})]}),e.jsx("input",{type:"range",min:"50",max:"1000",step:"25",value:E.correctionPause||200,onChange:e=>O(t=>({...t,correctionPause:parseInt(e.target.value)})),style:{width:"100%",height:"4px"}})]})]})]}),e.jsxs("div",{style:{paddingTop:"6px",borderTop:"dark"===S?"1px solid #555555":"1px solid #cccccc"},children:[e.jsx("h4",{style:{marginBottom:"12px",fontSize:"16px",fontWeight:"600",opacity:.9},children:"Mistake Types & Effects"}),e.jsxs("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"8px"},children:[e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",fontSize:"13px"},children:[e.jsx("input",{type:"checkbox",checked:(null==(h=E.mistakeTypes)?void 0:h.adjacent)||!1,onChange:e=>O(t=>{var s,i,o;return{...t,mistakeTypes:{adjacent:e.target.checked,random:(null==(s=t.mistakeTypes)?void 0:s.random)||!1,doubleChar:(null==(i=t.mistakeTypes)?void 0:i.doubleChar)||!1,commonTypos:(null==(o=t.mistakeTypes)?void 0:o.commonTypos)||!1}}})}),"Adjacent Keys"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",fontSize:"13px"},children:[e.jsx("input",{type:"checkbox",checked:(null==(u=E.mistakeTypes)?void 0:u.doubleChar)||!1,onChange:e=>O(t=>{var s,i,o;return{...t,mistakeTypes:{adjacent:(null==(s=t.mistakeTypes)?void 0:s.adjacent)||!1,random:(null==(i=t.mistakeTypes)?void 0:i.random)||!1,doubleChar:e.target.checked,commonTypos:(null==(o=t.mistakeTypes)?void 0:o.commonTypos)||!1}}})}),"Double Characters"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",fontSize:"13px"},children:[e.jsx("input",{type:"checkbox",checked:(null==(m=E.mistakeTypes)?void 0:m.commonTypos)||!1,onChange:e=>O(t=>{var s,i,o;return{...t,mistakeTypes:{adjacent:(null==(s=t.mistakeTypes)?void 0:s.adjacent)||!1,random:(null==(i=t.mistakeTypes)?void 0:i.random)||!1,doubleChar:(null==(o=t.mistakeTypes)?void 0:o.doubleChar)||!1,commonTypos:e.target.checked}}})}),"Common Typos"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",fontSize:"13px"},children:[e.jsx("input",{type:"checkbox",checked:E.fatigueEffect||!1,onChange:e=>O(t=>({...t,fatigueEffect:e.target.checked}))}),"Fatigue Effect"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",fontSize:"13px"},children:[e.jsx("input",{type:"checkbox",checked:E.concentrationLapses||!1,onChange:e=>O(t=>({...t,concentrationLapses:e.target.checked}))}),"Concentration Lapses"]}),e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",fontSize:"13px"},children:[e.jsx("input",{type:"checkbox",checked:E.overcorrection||!1,onChange:e=>O(t=>({...t,overcorrection:e.target.checked}))}),"Overcorrection"]})]})]}),e.jsxs("div",{style:{paddingTop:"6px",borderTop:"dark"===S?"1px solid #555555":"1px solid #cccccc"},children:[e.jsx("h4",{style:{marginBottom:"12px",fontSize:"16px",fontWeight:"600",opacity:.9},children:"Cursor Settings"}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e.jsxs("label",{style:{display:"flex",alignItems:"center",gap:"8px",fontSize:"14px"},children:[e.jsx("input",{type:"checkbox",checked:P.showCursor,onChange:e=>L(t=>({...t,showCursor:e.target.checked}))}),"Show Cursor"]}),e.jsxs("div",{children:[e.jsx("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:"Cursor Character:"}),e.jsx("input",{type:"text",value:P.cursorChar,onChange:e=>L(t=>({...t,cursorChar:e.target.value||"|"})),style:{width:"60px",padding:"6px 8px",borderRadius:"4px",border:"dark"===S?"1px solid #555555":"1px solid #cccccc",backgroundColor:"dark"===S?"#2c2c2c":"#ffffff",color:"dark"===S?"#ffffff":"#000000",fontSize:"14px",fontFamily:"monospace",textAlign:"center"},maxLength:2,placeholder:"|"})]}),e.jsxs("div",{children:[e.jsxs("label",{style:{fontSize:"14px",fontWeight:"500",marginBottom:"6px",display:"block"},children:["Blink Speed: ",P.cursorBlinkSpeed,"ms"]}),e.jsx("input",{type:"range",min:"100",max:"2000",step:"50",value:P.cursorBlinkSpeed,onChange:e=>L(t=>({...t,cursorBlinkSpeed:parseInt(e.target.value)})),style:{width:"100%",height:"4px"}}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:"11px",opacity:.6,marginTop:"2px"},children:[e.jsx("span",{children:"Fast"}),e.jsx("span",{children:"Slow"})]})]})]})]}),e.jsx("div",{style:{paddingTop:"16px"},children:e.jsx("button",{style:{...X("primary"),width:"100%",fontSize:"14px",fontWeight:"600",padding:"12px 16px"},onClick:()=>{Y()},children:"Apply Settings & Restart"})})]})})]})]})},exports.KeyboardView=o,exports.MobileKeyboard=n,exports.ShiftState=i,exports.useKeyPressIndicator=r;
//# sourceMappingURL=keyboard.js.map