[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_166":167,"_168":169},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",75,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","865648e0-30fa-11f0-9d7d-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ============================================================================\n// KEYBOARD CONFIGURATION SYSTEM\n// ============================================================================\n\n// Key properties - defines visual and behavioral characteristics\nconst KEY_PROPERTIES = {\n // Regular letter keys (default to lowercase)\n \"a\": { width: \"square\", type: \"letter\", animatable: true },\n \"b\": { width: \"square\", type: \"letter\", animatable: true },\n \"c\": { width: \"square\", type: \"letter\", animatable: true },\n \"d\": { width: \"square\", type: \"letter\", animatable: true },\n \"e\": { width: \"square\", type: \"letter\", animatable: true },\n \"f\": { width: \"square\", type: \"letter\", animatable: true },\n \"g\": { width: \"square\", type: \"letter\", animatable: true },\n \"h\": { width: \"square\", type: \"letter\", animatable: true },\n \"i\": { width: \"square\", type: \"letter\", animatable: true },\n \"j\": { width: \"square\", type: \"letter\", animatable: true },\n \"k\": { width: \"square\", type: \"letter\", animatable: true },\n \"l\": { width: \"square\", type: \"letter\", animatable: true },\n \"m\": { width: \"square\", type: \"letter\", animatable: true },\n \"n\": { width: \"square\", type: \"letter\", animatable: true },\n \"o\": { width: \"square\", type: \"letter\", animatable: true },\n \"p\": { width: \"square\", type: \"letter\", animatable: true },\n \"q\": { width: \"square\", type: \"letter\", animatable: true },\n \"r\": { width: \"square\", type: \"letter\", animatable: true },\n \"s\": { width: \"square\", type: \"letter\", animatable: true },\n \"t\": { width: \"square\", type: \"letter\", animatable: true },\n \"u\": { width: \"square\", type: \"letter\", animatable: true },\n \"v\": { width: \"square\", type: \"letter\", animatable: true },\n \"w\": { width: \"square\", type: \"letter\", animatable: true },\n \"x\": { width: \"square\", type: \"letter\", animatable: true },\n \"y\": { width: \"square\", type: \"letter\", animatable: true },\n \"z\": { width: \"square\", type: \"letter\", animatable: true },\n\n // Number keys (with shift symbols)\n \"1\": { width: \"square\", type: \"number\", animatable: true, shifted: \"!\" },\n \"2\": { width: \"square\", type: \"number\", animatable: true, shifted: \"@\" },\n \"3\": { width: \"square\", type: \"number\", animatable: true, shifted: \"#\" },\n \"4\": { width: \"square\", type: \"number\", animatable: true, shifted: \"$\" },\n \"5\": { width: \"square\", type: \"number\", animatable: true, shifted: \"%\" },\n \"6\": { width: \"square\", type: \"number\", animatable: true, shifted: \"^\" },\n \"7\": { width: \"square\", type: \"number\", animatable: true, shifted: \"&\" },\n \"8\": { width: \"square\", type: \"number\", animatable: true, shifted: \"*\" },\n \"9\": { width: \"square\", type: \"number\", animatable: true, shifted: \"(\" },\n \"0\": { width: \"square\", type: \"number\", animatable: true, shifted: \")\" },\n\n // Symbol keys (with shift symbols)\n \"`\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"~\" },\n \"-\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"_\" },\n \"=\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"+\" },\n \"[\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"{\" },\n \"]\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"}\" },\n \"\\\\\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"|\" },\n \";\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \":\" },\n \"'\": { width: \"square\", type: \"symbol\", animatable: true, shifted: '\"' },\n \",\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"<\" },\n \".\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \">\" },\n \"/\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"?\" },\n\n // AZERTY specific symbols\n \"²\": { width: \"square\", type: \"symbol\", animatable: true },\n \"&\": { width: \"square\", type: \"symbol\", animatable: true },\n \"é\": { width: \"square\", type: \"symbol\", animatable: true },\n '\"': { width: \"square\", type: \"symbol\", animatable: true },\n \"(\": { width: \"square\", type: \"symbol\", animatable: true },\n \"è\": { width: \"square\", type: \"symbol\", animatable: true },\n \"_\": { width: \"square\", type: \"symbol\", animatable: true },\n \"ç\": { width: \"square\", type: \"symbol\", animatable: true },\n \"à\": { width: \"square\", type: \"symbol\", animatable: true },\n \")\": { width: \"square\", type: \"symbol\", animatable: true },\n \"^\": { width: \"square\", type: \"symbol\", animatable: true },\n \"$\": { width: \"square\", type: \"symbol\", animatable: true },\n \"ù\": { width: \"square\", type: \"symbol\", animatable: true },\n \"!\": { width: \"square\", type: \"symbol\", animatable: true },\n \":\": { width: \"square\", type: \"symbol\", animatable: true },\n\n // Modifier and special keys\n \"TAB\": { width: \"wide\", type: \"modifier\", animatable: false, borderAnimation: true },\n \"CAPS\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"SHIFT\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"CTRL\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"ALT\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"ENTER\": { width: \"wide\", type: \"special\", animatable: false, borderAnimation: true },\n \"BKSP\": { width: \"wide\", type: \"special\", animatable: false },\n \"SPACE\": { width: \"spacebar\", type: \"special\", animatable: false, borderAnimation: true },\n // Mac-specific modifier keys\n \"FN\": { width: \"square\", type: \"modifier\", animatable: false },\n \"OPT\": { width: \"square\", type: \"modifier\", animatable: false, glint: true },\n \"CMD\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"←\": { width: \"square\", type: \"arrow\", animatable: false },\n \"↑\": { width: \"square\", type: \"arrow\", animatable: false },\n \"→\": { width: \"square\", type: \"arrow\", animatable: false },\n \"ESC\": { width: \"square\", type: \"special\", animatable: false },\n};\n\n// Keyboard layouts - defines the physical arrangement of keys (lowercase by default)\nconst KEYBOARD_LAYOUTS = {\n qwerty: [\n [\"`\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"-\", \"=\", \"BKSP\"],\n [\"TAB\", \"q\", \"w\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\", \"[\", \"]\", \"\\\\\"],\n [\"CAPS\", \"a\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\", \";\", \"'\", \"ENTER\"],\n [\"SHIFT\", \"z\", \"x\", \"c\", \"v\", \"b\", \"n\", \"m\", \",\", \".\", \"/\", \"SHIFT\"],\n [\"FN\", \"CTRL\", \"OPT\", \"CMD\", \"SPACE\", \"CMD\", \"OPT\", \"←\", \"↑\", \"→\"],\n ],\n\n azerty: [\n [\"²\", \"&\", \"é\", '\"', \"'\", \"(\", \"-\", \"è\", \"_\", \"ç\", \"à\", \")\", \"=\", \"BKSP\"],\n [\"TAB\", \"a\", \"z\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\", \"^\", \"$\", \"\\\\\"],\n [\"CAPS\", \"q\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\", \"m\", \"ù\", \"ENTER\"],\n [\"SHIFT\", \"w\", \"x\", \"c\", \"v\", \"b\", \"n\", \",\", \";\", \":\", \"!\", \"SHIFT\"],\n [\"CTRL\", \"ALT\", \"SPACE\", \"ALT\", \"CTRL\"],\n ],\n\n dvorak: [\n [\"`\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"[\", \"]\", \"BKSP\"],\n [\"TAB\", \"'\", \",\", \".\", \"p\", \"y\", \"f\", \"g\", \"c\", \"r\", \"l\", \"/\", \"=\", \"\\\\\"],\n [\"CAPS\", \"a\", \"o\", \"e\", \"u\", \"i\", \"d\", \"h\", \"t\", \"n\", \"s\", \"-\", \"ENTER\"],\n [\"SHIFT\", \";\", \"q\", \"j\", \"k\", \"x\", \"b\", \"m\", \"w\", \"v\", \"z\", \"SHIFT\"],\n [\"CTRL\", \"ALT\", \"SPACE\", \"ALT\", \"CTRL\"],\n ],\n};\n\n// Current active layout (can be changed dynamically)\nlet ACTIVE_LAYOUT = \"qwerty\";\n\n// Platform detection - for future use\nfunction detectPlatform() {\n if (typeof navigator !== \"undefined\") {\n return navigator.platform.toLowerCase().includes(\"mac\") ? \"mac\" : \"pc\";\n }\n return \"mac\"; // default to Mac on server\n}\n\n// Function to get key position in the current layout\nfunction getKeyPosition(key) {\n const layout = KEYBOARD_LAYOUTS[ACTIVE_LAYOUT];\n\n for (let row = 0; row < layout.length; row++) {\n const col = layout[row].indexOf(key);\n if (col !== -1) {\n return { row, col };\n }\n }\n return null; // Key not found\n}\n\n// Function to get color based on keyboard position\nfunction getKeyColor(key) {\n const position = getKeyPosition(key);\n\n if (!position) {\n // Default color for keys not in layout\n return { r: 200, g: 200, b: 200 };\n }\n\n const { row, col } = position;\n const layout = KEYBOARD_LAYOUTS[ACTIVE_LAYOUT];\n\n // RGB from left to right: Red -> Orange -> Yellow -> Green -> Cyan -> Blue -> Purple\n const maxCols = Math.max(...layout.map((row) => row.length)) - 1;\n const normalizedCol = col / maxCols;\n\n let r, g, b;\n\n // Create RGB spectrum from left to right with smoother transitions\n if (normalizedCol <= 1 / 7) {\n // Red to Red-Orange\n const t = normalizedCol * 7;\n r = 255;\n g = Math.floor(t * 100); // 0 to 100\n b = 0;\n } else if (normalizedCol <= 2 / 7) {\n // Red-Orange to Orange\n const t = (normalizedCol - 1 / 7) * 7;\n r = 255;\n g = Math.floor(100 + t * 65); // 100 to 165\n b = 0;\n } else if (normalizedCol <= 3 / 7) {\n // Orange to Yellow\n const t = (normalizedCol - 2 / 7) * 7;\n r = 255;\n g = Math.floor(165 + t * 90); // 165 to 255\n b = 0;\n } else if (normalizedCol <= 4 / 7) {\n // Yellow to Green\n const t = (normalizedCol - 3 / 7) * 7;\n r = Math.floor(255 - t * 255); // 255 to 0\n g = 255;\n b = 0;\n } else if (normalizedCol <= 5 / 7) {\n // Green to Cyan\n const t = (normalizedCol - 4 / 7) * 7;\n r = 0;\n g = 255;\n b = Math.floor(t * 255); // 0 to 255\n } else if (normalizedCol <= 6 / 7) {\n // Cyan to Blue\n const t = (normalizedCol - 5 / 7) * 7;\n r = 0;\n g = Math.floor(255 - t * 255); // 255 to 0\n b = 255;\n } else {\n // Blue to Purple\n const t = (normalizedCol - 6 / 7) * 7;\n r = Math.floor(t * 255); // 0 to 255\n g = 0;\n b = 255;\n }\n\n // Adjust brightness and saturation based on row\n let brightness, saturation;\n\n switch (row) {\n case 0: // Top row - medium brightness, less saturated\n brightness = 0.85;\n saturation = 0.6;\n break;\n case 1: // Second row - very light, very low saturation (closer to white)\n brightness = 1.4;\n saturation = 0.3;\n break;\n case 2: // Home row - full saturation\n brightness = 1.0;\n saturation = 1.0;\n break;\n case 3: // Lower row - dark\n brightness = 0.5;\n saturation = 1.0;\n break;\n default:\n brightness = 1.0;\n saturation = 1.0;\n }\n\n // Apply saturation (blend with gray)\n const gray = 128;\n r = Math.floor(gray + (r - gray) * saturation);\n g = Math.floor(gray + (g - gray) * saturation);\n b = Math.floor(gray + (b - gray) * saturation);\n\n // Apply brightness\n r = Math.floor(Math.min(255, r * brightness));\n g = Math.floor(Math.min(255, g * brightness));\n b = Math.floor(Math.min(255, b * brightness));\n\n // Ensure values are in valid range\n r = Math.max(0, Math.min(255, r));\n g = Math.max(0, Math.min(255, g));\n b = Math.max(0, Math.min(255, b));\n\n return { r, g, b };\n}\n\n// Helper function to get the row number for a key\nfunction getKeyRowFromKey(key) {\n const position = getKeyPosition(key);\n return position ? position.row : -1;\n}\n\n// Helper function to get key properties\nfunction getKeyProperties(key) {\n return KEY_PROPERTIES[key] ||\n { width: \"square\", type: \"unknown\", animatable: true };\n}\n\n// Helper function to check if key should animate\nfunction shouldKeyAnimate(key) {\n const props = getKeyProperties(key);\n return props.animatable;\n}\n\n// Helper function to check if key is special/modifier\nfunction isSpecialKey(key) {\n const props = getKeyProperties(key);\n return props.type === \"modifier\" || props.type === \"special\";\n}\n\n// Function to switch keyboard layout\nfunction switchKeyboardLayout(layoutName) {\n if (KEYBOARD_LAYOUTS[layoutName]) {\n ACTIVE_LAYOUT = layoutName;\n return true;\n }\n return false;\n}\n\n// ============================================================================\n// ANIMATION AND VISUAL EFFECTS\n// ============================================================================\n\n// ============================================================================\n// MAIN KEYBOARD COMPONENT\n// ============================================================================\nconst PROGRESSIVE_ANIMATIONS = {\n grow: `\n @keyframes grow {\n from { transform: scale(1); }\n to { transform: scale(2); }\n }\n `,\n vibrate: `\n @keyframes vibrate {\n 0%, 100% { transform: scale(2) translateX(0); }\n 25% { transform: scale(2) translateX(-2px); }\n 75% { transform: scale(2) translateX(2px); }\n }\n `,\n spin: `\n @keyframes spin {\n from { transform: scale(2) rotate(0deg); }\n to { transform: scale(2) rotate(360deg); }\n }\n `,\n glint: `\n @keyframes glint {\n 0% { \n background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 30%, #ffffff 50%, #f0f0f0 70%, #f0f0f0 100%);\n background-size: 200% 100%;\n background-position: -100% 0;\n }\n 50% { \n background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 30%, #ffffff 50%, #f0f0f0 70%, #f0f0f0 100%);\n background-size: 200% 100%;\n background-position: 0% 0;\n box-shadow: 0 0 20px rgba(255,255,255,0.8);\n }\n 100% { \n background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 30%, #ffffff 50%, #f0f0f0 70%, #f0f0f0 100%);\n background-size: 200% 100%;\n background-position: 100% 0;\n }\n }\n `,\n borderGlow: `\n @keyframes borderGlow {\n 0% { \n background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 10px rgba(255,255,255,0.3);\n }\n 25% { \n background: conic-gradient(from 90deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 15px rgba(255,255,255,0.5);\n }\n 50% { \n background: conic-gradient(from 180deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 20px rgba(255,255,255,0.7);\n }\n 75% { \n background: conic-gradient(from 270deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 15px rgba(255,255,255,0.5);\n }\n 100% { \n background: conic-gradient(from 360deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 10px rgba(255,255,255,0.3);\n }\n }\n `,\n};\n\n// ============================================================================\n// MAIN KEYBOARD COMPONENT\n// ============================================================================\n\nfunction BabyKeyboard() {\n const [pressedKeys, setPressedKeys] = useState({});\n const [keyTimers, setKeyTimers] = useState({});\n const [shiftPressed, setShiftPressed] = useState(false);\n const [glintingKeys, setGlintingKeys] = useState({});\n const [borderAnimatingKeys, setBorderAnimatingKeys] = useState({});\n const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });\n const [cursorSize, setCursorSize] = useState(20);\n const [currentLayout, setCurrentLayout] = useState(ACTIVE_LAYOUT);\n\n const startKeyAnimation = (key) => {\n // Only animate keys that should be animated\n if (!shouldKeyAnimate(key)) return;\n\n const { r, g, b } = getKeyColor(key);\n const color = `rgb(${r}, ${g}, ${b})`;\n\n // Clear any existing timer for this key\n if (keyTimers[key]) {\n clearTimeout(keyTimers[key].growTimer);\n clearTimeout(keyTimers[key].vibrateTimer);\n clearTimeout(keyTimers[key].spinTimer);\n }\n\n // Immediately light up the key with color change (no transition delay)\n setPressedKeys((prev) => ({\n ...prev,\n [key]: {\n color,\n phase: \"grow\",\n startTime: Date.now(),\n },\n }));\n\n // Set up progressive timers\n const growTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"vibrate\" },\n }));\n }, 2000); // Start growing immediately, vibrate at 2s\n\n const vibrateTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"vibrate\" },\n }));\n }, 3000); // Vibrate at 3s\n\n const spinTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"spin\" },\n }));\n }, 5000); // Spin at 5s\n\n setKeyTimers((prev) => ({\n ...prev,\n [key]: { growTimer, vibrateTimer, spinTimer },\n }));\n };\n\n const stopKeyAnimation = (key) => {\n // Clear timers\n if (keyTimers[key]) {\n clearTimeout(keyTimers[key].growTimer);\n clearTimeout(keyTimers[key].vibrateTimer);\n clearTimeout(keyTimers[key].spinTimer);\n }\n\n // Remove key from pressed state\n setPressedKeys((prev) => {\n const newKeys = { ...prev };\n delete newKeys[key];\n return newKeys;\n });\n\n setKeyTimers((prev) => {\n const newTimers = { ...prev };\n delete newTimers[key];\n return newTimers;\n });\n };\n\n const startGlintAnimation = (key) => {\n setGlintingKeys((prev) => ({ ...prev, [key]: true }));\n setTimeout(() => {\n setGlintingKeys((prev) => {\n const newGlinting = { ...prev };\n delete newGlinting[key];\n return newGlinting;\n });\n }, 1000);\n };\n\n const handleKeyPress = (key, isSpecial = false) => {\n const keyProps = getKeyProperties(key);\n\n if (key === \"SHIFT\") {\n setShiftPressed(true);\n startGlintAnimation(key);\n } else if (keyProps.glint) {\n // Handle CTRL, ALT, CMD, OPT with glint animation\n startGlintAnimation(key);\n } else if (!isSpecial) {\n startKeyAnimation(key);\n }\n };\n\n const handleKeyRelease = (key) => {\n if (key === \"SHIFT\") {\n setShiftPressed(false);\n }\n\n // Stop animation when key is released (only for animatable keys)\n if (shouldKeyAnimate(key)) {\n stopKeyAnimation(key);\n }\n };\n\n const getDisplayKey = (key) => {\n const keyProps = getKeyProperties(key);\n\n // Handle shift state for letters\n if (keyProps.type === \"letter\") {\n return shiftPressed ? key.toUpperCase() : key;\n }\n\n // Handle shift state for numbers and symbols\n if (shiftPressed && keyProps.shifted) {\n return keyProps.shifted;\n }\n\n return key;\n };\n\n // Function to switch layouts\n const switchLayout = (layoutName) => {\n if (switchKeyboardLayout(layoutName)) {\n setCurrentLayout(layoutName);\n // Clear any active animations when switching layouts\n setPressedKeys({});\n Object.values(keyTimers).forEach((timer) => {\n clearTimeout(timer.growTimer);\n clearTimeout(timer.vibrateTimer);\n clearTimeout(timer.spinTimer);\n });\n setKeyTimers({});\n }\n };\n\n useEffect(() => {\n const handleMouseMove = (event) => {\n setCursorPosition({ x: event.clientX, y: event.clientY });\n setCursorSize(Math.min(Math.max(20 + event.movementX * 0.5, 20), 100));\n };\n\n window.addEventListener(\"mousemove\", handleMouseMove);\n\n const handleHardwareKeyDown = (event) => {\n // Prevent default and stop propagation for all key events\n event.preventDefault();\n event.stopPropagation();\n\n const specialKeys = {\n \"`\": \"`\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\",\n \"0\": \"0\",\n \"-\": \"-\",\n \"=\": \"=\",\n \"Backspace\": \"BKSP\",\n \"Tab\": \"TAB\",\n \"[\": \"[\",\n \"]\": \"]\",\n \"\\\\\": \"\\\\\",\n \";\": \";\",\n \"'\": \"'\",\n \",\": \",\",\n \".\": \".\",\n \"/\": \"/\",\n \" \": \"SPACE\",\n \"Enter\": \"ENTER\",\n \"Escape\": \"ESC\",\n \"Alt\": \"OPT\", // Map Alt to OPT for Mac\n \"Control\": \"CTRL\",\n \"Meta\": \"CMD\", // Map Meta (Cmd) to CMD for Mac\n \"Shift\": \"SHIFT\",\n \"CapsLock\": \"CAPS\",\n };\n\n const key = specialKeys[event.key] || event.key.toLowerCase();\n\n // Only start animation if key isn't already pressed\n if (!pressedKeys[key] && !glintingKeys[key]) {\n // Check if it's a special key using our abstracted function\n if (isSpecialKey(key) && !shouldKeyAnimate(key)) {\n handleKeyPress(key, true);\n return;\n }\n\n // Handle all other keys\n handleKeyPress(key, false);\n }\n };\n\n const handleHardwareKeyUp = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n const specialKeys = {\n \"`\": \"`\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\",\n \"0\": \"0\",\n \"-\": \"-\",\n \"=\": \"=\",\n \"Backspace\": \"BKSP\",\n \"Tab\": \"TAB\",\n \"[\": \"[\",\n \"]\": \"]\",\n \"\\\\\": \"\\\\\",\n \";\": \";\",\n \"'\": \"'\",\n \",\": \",\",\n \".\": \".\",\n \"/\": \"/\",\n \" \": \"SPACE\",\n \"Enter\": \"ENTER\",\n \"Escape\": \"ESC\",\n \"Alt\": \"OPT\", // Map Alt to OPT for Mac\n \"Control\": \"CTRL\",\n \"Meta\": \"CMD\", // Map Meta (Cmd) to CMD for Mac\n \"Shift\": \"SHIFT\",\n \"CapsLock\": \"CAPS\",\n };\n\n const key = specialKeys[event.key] || event.key.toLowerCase();\n\n handleKeyRelease(key);\n };\n\n window.addEventListener(\"keydown\", handleHardwareKeyDown, {\n capture: true,\n });\n window.addEventListener(\"keyup\", handleHardwareKeyUp, { capture: true });\n\n return () => {\n window.removeEventListener(\"keydown\", handleHardwareKeyDown, {\n capture: true,\n });\n window.removeEventListener(\"keyup\", handleHardwareKeyUp, {\n capture: true,\n });\n window.removeEventListener(\"mousemove\", handleMouseMove);\n\n // Clean up any remaining timers\n Object.values(keyTimers).forEach((timer) => {\n clearTimeout(timer.growTimer);\n clearTimeout(timer.vibrateTimer);\n clearTimeout(timer.spinTimer);\n });\n };\n }, [pressedKeys, keyTimers, glintingKeys]);\n\n // Get current keyboard layout\n const keyboardRows = KEYBOARD_LAYOUTS[currentLayout];\n\n return (\n <>\n \n\n

\n {keyboardRows.map((row, rowIndex) => (\n

\n {row.map((key) => {\n const keyState = pressedKeys[key];\n const isPressed = !!keyState;\n const isGlinting = !!glintingKeys[key];\n const animationClass = keyState?.phase || \"\";\n const keyProps = getKeyProperties(key);\n const displayKey = getDisplayKey(key);\n\n return (\n {\n e.preventDefault();\n e.stopPropagation();\n if (!isPressed && !isGlinting) {\n handleKeyPress(key, !shouldKeyAnimate(key));\n }\n }}\n onMouseUp={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleKeyRelease(key);\n }}\n onMouseLeave={(e) => {\n e.preventDefault();\n e.stopPropagation();\n handleKeyRelease(key);\n }}\n style={{\n backgroundColor: keyState?.color || \"white\",\n color: isPressed\n ? (getKeyRowFromKey(key) <= 2 ? \"#333\" : \"white\")\n : \"#333\",\n flex: keyProps.width === \"spacebar\"\n ? \"4\"\n : (keyProps.width === \"wide\" ? \"1\" : \"0 0 40px\"),\n }}\n >\n {displayKey}\n

\n );\n })}\n

\n ))}\n \n \n );\n}\n\nfunction App() {\n return (\n

Baby Keyboard 🧸

\n \n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n const animationStyles = [\n PROGRESSIVE_ANIMATIONS.grow,\n PROGRESSIVE_ANIMATIONS.vibrate,\n PROGRESSIVE_ANIMATIONS.spin,\n PROGRESSIVE_ANIMATIONS.glint,\n ].join(\"\\n\");\n\n return new Response(\n `\n \n \n Baby Keyboard 🧸\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n touch-action: manipulation;\n user-select: none;\n cursor: none;\n}\n\n.baby-app {\n width: 100%;\n text-align: center;\n}\n\n.cursor-trail {\n position: fixed;\n pointer-events: none;\n border-radius: 50%;\n background: radial-gradient(\n circle at center, \n rgba(255,105,180,0.7) 0%, \n rgba(255,105,180,0.3) 50%, \n rgba(255,105,180,0.1) 100%\n );\n transform: translate(-50%, -50%);\n z-index: 9999;\n transition: width 0.1s ease, height 0.1s ease;\n}\n\n.layout-switcher {\n margin-bottom: 20px;\n display: flex;\n justify-content: center;\n gap: 10px;\n}\n\n.layout-switcher button {\n padding: 8px 16px;\n border: 2px solid #ccc;\n border-radius: 5px;\n background: white;\n cursor: pointer;\n font-weight: bold;\n transition: all 0.2s ease;\n}\n\n.layout-switcher button:hover {\n background: #f0f0f0;\n}\n\n.layout-switcher button.active {\n background: #007bff;\n color: white;\n border-color: #007bff;\n}\n\n.baby-keyboard {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 10px;\n background-color: #e0e0e0;\n transition: background-color 0.5s ease;\n}\n\n.keyboard-row {\n display: flex;\n justify-content: center;\n gap: 5px;\n}\n\n.key {\n min-width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 2px solid transparent;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0s, color 0s, transform 0.2s ease, box-shadow 0.2s ease;\n font-size: 0.9em;\n font-weight: bold;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n text-align: center;\n background-color: white;\n color: #333;\n}\n\n.special-key {\n background-color: #f0f0f0;\n color: #333;\n}\n\n.key:active {\n transform: scale(0.95);\n}\n\n.key.pressed {\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n border: 2px solid #fff;\n}\n\n/* Progressive animations */\n.grow { \n animation: grow 2s ease-out forwards;\n}\n\n.vibrate { \n animation: vibrate 0.1s infinite;\n}\n\n.spin { \n animation: spin 1s linear infinite;\n}\n\n.glinting {\n animation: glint 1s ease-in-out;\n}\n`;","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// ============================================================================\n// KEYBOARD CONFIGURATION SYSTEM\n// ============================================================================\n\n// Key properties - defines visual and behavioral characteristics\nconst KEY_PROPERTIES = {\n // Regular letter keys (default to lowercase)\n \"a\": { width: \"square\", type: \"letter\", animatable: true },\n \"b\": { width: \"square\", type: \"letter\", animatable: true },\n \"c\": { width: \"square\", type: \"letter\", animatable: true },\n \"d\": { width: \"square\", type: \"letter\", animatable: true },\n \"e\": { width: \"square\", type: \"letter\", animatable: true },\n \"f\": { width: \"square\", type: \"letter\", animatable: true },\n \"g\": { width: \"square\", type: \"letter\", animatable: true },\n \"h\": { width: \"square\", type: \"letter\", animatable: true },\n \"i\": { width: \"square\", type: \"letter\", animatable: true },\n \"j\": { width: \"square\", type: \"letter\", animatable: true },\n \"k\": { width: \"square\", type: \"letter\", animatable: true },\n \"l\": { width: \"square\", type: \"letter\", animatable: true },\n \"m\": { width: \"square\", type: \"letter\", animatable: true },\n \"n\": { width: \"square\", type: \"letter\", animatable: true },\n \"o\": { width: \"square\", type: \"letter\", animatable: true },\n \"p\": { width: \"square\", type: \"letter\", animatable: true },\n \"q\": { width: \"square\", type: \"letter\", animatable: true },\n \"r\": { width: \"square\", type: \"letter\", animatable: true },\n \"s\": { width: \"square\", type: \"letter\", animatable: true },\n \"t\": { width: \"square\", type: \"letter\", animatable: true },\n \"u\": { width: \"square\", type: \"letter\", animatable: true },\n \"v\": { width: \"square\", type: \"letter\", animatable: true },\n \"w\": { width: \"square\", type: \"letter\", animatable: true },\n \"x\": { width: \"square\", type: \"letter\", animatable: true },\n \"y\": { width: \"square\", type: \"letter\", animatable: true },\n \"z\": { width: \"square\", type: \"letter\", animatable: true },\n\n // Number keys (with shift symbols)\n \"1\": { width: \"square\", type: \"number\", animatable: true, shifted: \"!\" },\n \"2\": { width: \"square\", type: \"number\", animatable: true, shifted: \"@\" },\n \"3\": { width: \"square\", type: \"number\", animatable: true, shifted: \"#\" },\n \"4\": { width: \"square\", type: \"number\", animatable: true, shifted: \"$\" },\n \"5\": { width: \"square\", type: \"number\", animatable: true, shifted: \"%\" },\n \"6\": { width: \"square\", type: \"number\", animatable: true, shifted: \"^\" },\n \"7\": { width: \"square\", type: \"number\", animatable: true, shifted: \"&\" },\n \"8\": { width: \"square\", type: \"number\", animatable: true, shifted: \"*\" },\n \"9\": { width: \"square\", type: \"number\", animatable: true, shifted: \"(\" },\n \"0\": { width: \"square\", type: \"number\", animatable: true, shifted: \")\" },\n\n // Symbol keys (with shift symbols)\n \"`\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"~\" },\n \"-\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"_\" },\n \"=\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"+\" },\n \"[\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"{\" },\n \"]\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"}\" },\n \"\\\\\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"|\" },\n \";\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \":\" },\n \"'\": { width: \"square\", type: \"symbol\", animatable: true, shifted: '\"' },\n \",\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"<\" },\n \".\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \">\" },\n \"/\": { width: \"square\", type: \"symbol\", animatable: true, shifted: \"?\" },\n\n // AZERTY specific symbols\n \"²\": { width: \"square\", type: \"symbol\", animatable: true },\n \"&\": { width: \"square\", type: \"symbol\", animatable: true },\n \"é\": { width: \"square\", type: \"symbol\", animatable: true },\n '\"': { width: \"square\", type: \"symbol\", animatable: true },\n \"(\": { width: \"square\", type: \"symbol\", animatable: true },\n \"è\": { width: \"square\", type: \"symbol\", animatable: true },\n \"_\": { width: \"square\", type: \"symbol\", animatable: true },\n \"ç\": { width: \"square\", type: \"symbol\", animatable: true },\n \"à\": { width: \"square\", type: \"symbol\", animatable: true },\n \")\": { width: \"square\", type: \"symbol\", animatable: true },\n \"^\": { width: \"square\", type: \"symbol\", animatable: true },\n \"$\": { width: \"square\", type: \"symbol\", animatable: true },\n \"ù\": { width: \"square\", type: \"symbol\", animatable: true },\n \"!\": { width: \"square\", type: \"symbol\", animatable: true },\n \":\": { width: \"square\", type: \"symbol\", animatable: true },\n\n // Modifier and special keys\n \"TAB\": { width: \"wide\", type: \"modifier\", animatable: false, borderAnimation: true },\n \"CAPS\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"SHIFT\": { width: \"wide\", type: \"modifier\", animatable: false },\n \"CTRL\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"ALT\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"ENTER\": { width: \"wide\", type: \"special\", animatable: false, borderAnimation: true },\n \"BKSP\": { width: \"wide\", type: \"special\", animatable: false },\n \"SPACE\": { width: \"spacebar\", type: \"special\", animatable: false, borderAnimation: true },\n // Mac-specific modifier keys\n \"FN\": { width: \"square\", type: \"modifier\", animatable: false },\n \"OPT\": { width: \"square\", type: \"modifier\", animatable: false, glint: true },\n \"CMD\": { width: \"wide\", type: \"modifier\", animatable: false, glint: true },\n \"←\": { width: \"square\", type: \"arrow\", animatable: false },\n \"↑\": { width: \"square\", type: \"arrow\", animatable: false },\n \"→\": { width: \"square\", type: \"arrow\", animatable: false },\n \"ESC\": { width: \"square\", type: \"special\", animatable: false },\n};\n\n// Keyboard layouts - defines the physical arrangement of keys (lowercase by default)\nconst KEYBOARD_LAYOUTS = {\n qwerty: [\n [\"`\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"-\", \"=\", \"BKSP\"],\n [\"TAB\", \"q\", \"w\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\", \"[\", \"]\", \"\\\\\"],\n [\"CAPS\", \"a\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\", \";\", \"'\", \"ENTER\"],\n [\"SHIFT\", \"z\", \"x\", \"c\", \"v\", \"b\", \"n\", \"m\", \",\", \".\", \"/\", \"SHIFT\"],\n [\"FN\", \"CTRL\", \"OPT\", \"CMD\", \"SPACE\", \"CMD\", \"OPT\", \"←\", \"↑\", \"→\"],\n ],\n\n azerty: [\n [\"²\", \"&\", \"é\", '\"', \"'\", \"(\", \"-\", \"è\", \"_\", \"ç\", \"à\", \")\", \"=\", \"BKSP\"],\n [\"TAB\", \"a\", \"z\", \"e\", \"r\", \"t\", \"y\", \"u\", \"i\", \"o\", \"p\", \"^\", \"$\", \"\\\\\"],\n [\"CAPS\", \"q\", \"s\", \"d\", \"f\", \"g\", \"h\", \"j\", \"k\", \"l\", \"m\", \"ù\", \"ENTER\"],\n [\"SHIFT\", \"w\", \"x\", \"c\", \"v\", \"b\", \"n\", \",\", \";\", \":\", \"!\", \"SHIFT\"],\n [\"CTRL\", \"ALT\", \"SPACE\", \"ALT\", \"CTRL\"],\n ],\n\n dvorak: [\n [\"`\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"0\", \"[\", \"]\", \"BKSP\"],\n [\"TAB\", \"'\", \",\", \".\", \"p\", \"y\", \"f\", \"g\", \"c\", \"r\", \"l\", \"/\", \"=\", \"\\\\\"],\n [\"CAPS\", \"a\", \"o\", \"e\", \"u\", \"i\", \"d\", \"h\", \"t\", \"n\", \"s\", \"-\", \"ENTER\"],\n [\"SHIFT\", \";\", \"q\", \"j\", \"k\", \"x\", \"b\", \"m\", \"w\", \"v\", \"z\", \"SHIFT\"],\n [\"CTRL\", \"ALT\", \"SPACE\", \"ALT\", \"CTRL\"],\n ],\n};\n\n// Current active layout (can be changed dynamically)\nlet ACTIVE_LAYOUT = \"qwerty\";\n\n// Platform detection - for future use\nfunction detectPlatform() {\n if (typeof navigator !== \"undefined\") {\n return navigator.platform.toLowerCase().includes(\"mac\") ? \"mac\" : \"pc\";\n }\n return \"mac\"; // default to Mac on server\n}\n\n// Function to get key position in the current layout\nfunction getKeyPosition(key) {\n const layout = KEYBOARD_LAYOUTS[ACTIVE_LAYOUT];\n\n for (let row = 0; row < layout.length; row++) {\n const col = layout[row].indexOf(key);\n if (col !== -1) {\n return { row, col };\n }\n }\n return null; // Key not found\n}\n\n// Function to get color based on keyboard position\nfunction getKeyColor(key) {\n const position = getKeyPosition(key);\n\n if (!position) {\n // Default color for keys not in layout\n return { r: 200, g: 200, b: 200 };\n }\n\n const { row, col } = position;\n const layout = KEYBOARD_LAYOUTS[ACTIVE_LAYOUT];\n\n // RGB from left to right: Red -> Orange -> Yellow -> Green -> Cyan -> Blue -> Purple\n const maxCols = Math.max(...layout.map((row) => row.length)) - 1;\n const normalizedCol = col / maxCols;\n\n let r, g, b;\n\n // Create RGB spectrum from left to right with smoother transitions\n if (normalizedCol <= 1 / 7) {\n // Red to Red-Orange\n const t = normalizedCol * 7;\n r = 255;\n g = Math.floor(t * 100); // 0 to 100\n b = 0;\n } else if (normalizedCol <= 2 / 7) {\n // Red-Orange to Orange\n const t = (normalizedCol - 1 / 7) * 7;\n r = 255;\n g = Math.floor(100 + t * 65); // 100 to 165\n b = 0;\n } else if (normalizedCol <= 3 / 7) {\n // Orange to Yellow\n const t = (normalizedCol - 2 / 7) * 7;\n r = 255;\n g = Math.floor(165 + t * 90); // 165 to 255\n b = 0;\n } else if (normalizedCol <= 4 / 7) {\n // Yellow to Green\n const t = (normalizedCol - 3 / 7) * 7;\n r = Math.floor(255 - t * 255); // 255 to 0\n g = 255;\n b = 0;\n } else if (normalizedCol <= 5 / 7) {\n // Green to Cyan\n const t = (normalizedCol - 4 / 7) * 7;\n r = 0;\n g = 255;\n b = Math.floor(t * 255); // 0 to 255\n } else if (normalizedCol <= 6 / 7) {\n // Cyan to Blue\n const t = (normalizedCol - 5 / 7) * 7;\n r = 0;\n g = Math.floor(255 - t * 255); // 255 to 0\n b = 255;\n } else {\n // Blue to Purple\n const t = (normalizedCol - 6 / 7) * 7;\n r = Math.floor(t * 255); // 0 to 255\n g = 0;\n b = 255;\n }\n\n // Adjust brightness and saturation based on row\n let brightness, saturation;\n\n switch (row) {\n case 0: // Top row - medium brightness, less saturated\n brightness = 0.85;\n saturation = 0.6;\n break;\n case 1: // Second row - very light, very low saturation (closer to white)\n brightness = 1.4;\n saturation = 0.3;\n break;\n case 2: // Home row - full saturation\n brightness = 1.0;\n saturation = 1.0;\n break;\n case 3: // Lower row - dark\n brightness = 0.5;\n saturation = 1.0;\n break;\n default:\n brightness = 1.0;\n saturation = 1.0;\n }\n\n // Apply saturation (blend with gray)\n const gray = 128;\n r = Math.floor(gray + (r - gray) * saturation);\n g = Math.floor(gray + (g - gray) * saturation);\n b = Math.floor(gray + (b - gray) * saturation);\n\n // Apply brightness\n r = Math.floor(Math.min(255, r * brightness));\n g = Math.floor(Math.min(255, g * brightness));\n b = Math.floor(Math.min(255, b * brightness));\n\n // Ensure values are in valid range\n r = Math.max(0, Math.min(255, r));\n g = Math.max(0, Math.min(255, g));\n b = Math.max(0, Math.min(255, b));\n\n return { r, g, b };\n}\n\n// Helper function to get the row number for a key\nfunction getKeyRowFromKey(key) {\n const position = getKeyPosition(key);\n return position ? position.row : -1;\n}\n\n// Helper function to get key properties\nfunction getKeyProperties(key) {\n return KEY_PROPERTIES[key] ||\n { width: \"square\", type: \"unknown\", animatable: true };\n}\n\n// Helper function to check if key should animate\nfunction shouldKeyAnimate(key) {\n const props = getKeyProperties(key);\n return props.animatable;\n}\n\n// Helper function to check if key is special/modifier\nfunction isSpecialKey(key) {\n const props = getKeyProperties(key);\n return props.type === \"modifier\" || props.type === \"special\";\n}\n\n// Function to switch keyboard layout\nfunction switchKeyboardLayout(layoutName) {\n if (KEYBOARD_LAYOUTS[layoutName]) {\n ACTIVE_LAYOUT = layoutName;\n return true;\n }\n return false;\n}\n\n// ============================================================================\n// ANIMATION AND VISUAL EFFECTS\n// ============================================================================\n\n// ============================================================================\n// MAIN KEYBOARD COMPONENT\n// ============================================================================\nconst PROGRESSIVE_ANIMATIONS = {\n grow: `\n @keyframes grow {\n from { transform: scale(1); }\n to { transform: scale(2); }\n }\n `,\n vibrate: `\n @keyframes vibrate {\n 0%, 100% { transform: scale(2) translateX(0); }\n 25% { transform: scale(2) translateX(-2px); }\n 75% { transform: scale(2) translateX(2px); }\n }\n `,\n spin: `\n @keyframes spin {\n from { transform: scale(2) rotate(0deg); }\n to { transform: scale(2) rotate(360deg); }\n }\n `,\n glint: `\n @keyframes glint {\n 0% { \n background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 30%, #ffffff 50%, #f0f0f0 70%, #f0f0f0 100%);\n background-size: 200% 100%;\n background-position: -100% 0;\n }\n 50% { \n background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 30%, #ffffff 50%, #f0f0f0 70%, #f0f0f0 100%);\n background-size: 200% 100%;\n background-position: 0% 0;\n box-shadow: 0 0 20px rgba(255,255,255,0.8);\n }\n 100% { \n background: linear-gradient(90deg, #f0f0f0 0%, #f0f0f0 30%, #ffffff 50%, #f0f0f0 70%, #f0f0f0 100%);\n background-size: 200% 100%;\n background-position: 100% 0;\n }\n }\n `,\n borderGlow: `\n @keyframes borderGlow {\n 0% { \n background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 10px rgba(255,255,255,0.3);\n }\n 25% { \n background: conic-gradient(from 90deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 15px rgba(255,255,255,0.5);\n }\n 50% { \n background: conic-gradient(from 180deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 20px rgba(255,255,255,0.7);\n }\n 75% { \n background: conic-gradient(from 270deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 15px rgba(255,255,255,0.5);\n }\n 100% { \n background: conic-gradient(from 360deg, transparent 0%, rgba(255,255,255,0.8) 10%, transparent 20%, transparent 100%);\n box-shadow: 0 0 10px rgba(255,255,255,0.3);\n }\n }\n `,\n};\n\n// ============================================================================\n// MAIN KEYBOARD COMPONENT\n// ============================================================================\n\nfunction BabyKeyboard() {\n const [pressedKeys, setPressedKeys] = useState({});\n const [keyTimers, setKeyTimers] = useState({});\n const [shiftPressed, setShiftPressed] = useState(false);\n const [glintingKeys, setGlintingKeys] = useState({});\n const [borderAnimatingKeys, setBorderAnimatingKeys] = useState({});\n const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });\n const [cursorSize, setCursorSize] = useState(20);\n const [currentLayout, setCurrentLayout] = useState(ACTIVE_LAYOUT);\n\n const startKeyAnimation = (key) => {\n // Only animate keys that should be animated\n if (!shouldKeyAnimate(key)) return;\n\n const { r, g, b } = getKeyColor(key);\n const color = `rgb(${r}, ${g}, ${b})`;\n\n // Clear any existing timer for this key\n if (keyTimers[key]) {\n clearTimeout(keyTimers[key].growTimer);\n clearTimeout(keyTimers[key].vibrateTimer);\n clearTimeout(keyTimers[key].spinTimer);\n }\n\n // Immediately light up the key with color change (no transition delay)\n setPressedKeys((prev) => ({\n ...prev,\n [key]: {\n color,\n phase: \"grow\",\n startTime: Date.now(),\n },\n }));\n\n // Set up progressive timers\n const growTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"vibrate\" },\n }));\n }, 2000); // Start growing immediately, vibrate at 2s\n\n const vibrateTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"vibrate\" },\n }));\n }, 3000); // Vibrate at 3s\n\n const spinTimer = setTimeout(() => {\n setPressedKeys((prev) => ({\n ...prev,\n [key]: { ...prev[key], phase: \"spin\" },\n }));\n }, 5000); // Spin at 5s\n\n setKeyTimers((prev) => ({\n ...prev,\n [key]: { growTimer, vibrateTimer, spinTimer },\n }));\n };\n\n const stopKeyAnimation = (key) => {\n // Clear timers\n if (keyTimers[key]) {\n clearTimeout(keyTimers[key].growTimer);\n clearTimeout(keyTimers[key].vibrateTimer);\n clearTimeout(keyTimers[key].spinTimer);\n }\n\n // Remove key from pressed state\n setPressedKeys((prev) => {\n const newKeys = { ...prev };\n delete newKeys[key];\n return newKeys;\n });\n\n setKeyTimers((prev) => {\n const newTimers = { ...prev };\n delete newTimers[key];\n return newTimers;\n });\n };\n\n const startBorderAnimation = (key) => {\n setBorderAnimatingKeys((prev) => ({ ...prev, [key]: true }));\n setTimeout(() => {\n setBorderAnimatingKeys((prev) => {\n const newBorderAnimating = { ...prev };\n delete newBorderAnimating[key];\n return newBorderAnimating;\n });\n }, 2000); // 2 second border animation\n };\n\n const startGlintAnimation = (key) => {\n setGlintingKeys((prev) => ({ ...prev, [key]: true }));\n setTimeout(() => {\n setGlintingKeys((prev) => {\n const newGlinting = { ...prev };\n delete newGlinting[key];\n return newGlinting;\n });\n }, 1000);\n };\n\n const handleKeyPress = (key, isSpecial = false) => {\n const keyProps = getKeyProperties(key);\n\n if (key === \"SHIFT\") {\n setShiftPressed(true);\n startGlintAnimation(key);\n } else if (keyProps.glint) {\n // Handle CTRL, ALT, CMD, OPT with glint animation\n startGlintAnimation(key);\n } else if (!isSpecial) {\n startKeyAnimation(key);\n }\n };\n\n const handleKeyRelease = (key) => {\n if (key === \"SHIFT\") {\n setShiftPressed(false);\n }\n\n // Stop animation when key is released (only for animatable keys)\n if (shouldKeyAnimate(key)) {\n stopKeyAnimation(key);\n }\n };\n\n const getDisplayKey = (key) => {\n const keyProps = getKeyProperties(key);\n\n // Handle shift state for letters\n if (keyProps.type === \"letter\") {\n return shiftPressed ? key.toUpperCase() : key;\n }\n\n // Handle shift state for numbers and symbols\n if (shiftPressed && keyProps.shifted) {\n return keyProps.shifted;\n }\n\n return key;\n };\n\n // Function to switch layouts\n const switchLayout = (layoutName) => {\n if (switchKeyboardLayout(layoutName)) {\n setCurrentLayout(layoutName);\n // Clear any active animations when switching layouts\n setPressedKeys({});\n Object.values(keyTimers).forEach((timer) => {\n clearTimeout(timer.growTimer);\n clearTimeout(timer.vibrateTimer);\n clearTimeout(timer.spinTimer);\n });\n setKeyTimers({});\n }\n };\n\n useEffect(() => {\n const handleMouseMove = (event) => {\n setCursorPosition({ x: event.clientX, y: event.clientY });\n setCursorSize(Math.min(Math.max(20 + event.movementX * 0.5, 20), 100));\n };\n\n window.addEventListener(\"mousemove\", handleMouseMove);\n\n const handleHardwareKeyDown = (event) => {\n // Prevent default and stop propagation for all key events\n event.preventDefault();\n event.stopPropagation();\n\n const specialKeys = {\n \"`\": \"`\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\",\n \"0\": \"0\",\n \"-\": \"-\",\n \"=\": \"=\",\n \"Backspace\": \"BKSP\",\n \"Tab\": \"TAB\",\n \"[\": \"[\",\n \"]\": \"]\",\n \"\\\\\": \"\\\\\",\n \";\": \";\",\n \"'\": \"'\",\n \",\": \",\",\n \".\": \".\",\n \"/\": \"/\",\n \" \": \"SPACE\",\n \"Enter\": \"ENTER\",\n \"Escape\": \"ESC\",\n \"Alt\": \"OPT\", // Map Alt to OPT for Mac\n \"Control\": \"CTRL\",\n \"Meta\": \"CMD\", // Map Meta (Cmd) to CMD for Mac\n \"Shift\": \"SHIFT\",\n \"CapsLock\": \"CAPS\",\n };\n\n const key = specialKeys[event.key] || event.key.toLowerCase();\n\n // Only start animation if key isn't already pressed\n if (!pressedKeys[key] && !glintingKeys[key]) {\n // Check if it's a special key using our abstracted function\n if (isSpecialKey(key) && !shouldKeyAnimate(key)) {\n handleKeyPress(key, true);\n return;\n }\n\n // Handle all other keys\n handleKeyPress(key, false);\n }\n };\n\n const handleHardwareKeyUp = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n const specialKeys = {\n \"`\": \"`\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n \"4\": \"4\",\n \"5\": \"5\",\n \"6\": \"6\",\n \"7\": \"7\",\n \"8\": \"8\",\n \"9\": \"9\",\n \"0\": \"0\",\n \"-\": \"-\",\n \"=\": \"=\",\n \"Backspace\": \"BKSP\",\n \"Tab\": \"TAB\",\n \"[\": \"[\",\n \"]\": \"]\",\n \"\\\\\": \"\\\\\",\n \";\": \";\",\n \"'\": \"'\",\n \",\": \",\",\n \".\": \".\",\n \"/\": \"/\",\n \" \": \"SPACE\",\n \"Enter\": \"ENTER\",\n \"Escape\": \"ESC\",\n \"Alt\": \"OPT\", // Map Alt to OPT for Mac\n \"Control\": \"CTRL\",\n \"Meta\": \"CMD\", // Map Meta (Cmd) to CMD for Mac\n \"Shift\": \"SHIFT\",\n \"CapsLock\": \"CAPS\",\n };\n\n const key = specialKeys[event.key] || event.key.toLowerCase();\n\n handleKeyRelease(key);\n };\n\n window.addEventListener(\"keydown\", handleHardwareKeyDown, {\n capture: true,\n });\n window.addEventListener(\"keyup\", handleHardwareKeyUp, { capture: true });\n\n return () => {\n window.removeEventListener(\"keydown\", handleHardwareKeyDown, {\n capture: true,\n });\n window.removeEventListener(\"keyup\", handleHardwareKeyUp, {\n capture: true,\n });\n window.removeEventListener(\"mousemove\", handleMouseMove);\n\n // Clean up any remaining timers\n Object.values(keyTimers).forEach((timer) => {\n clearTimeout(timer.growTimer);\n clearTimeout(timer.vibrateTimer);\n clearTimeout(timer.spinTimer);\n });\n };\n }, [pressedKeys, keyTimers, glintingKeys]);\n\n // Get current keyboard layout\n const keyboardRows = KEYBOARD_LAYOUTS[currentLayout];\n\n return (\n <>\n \n\n

\n {keyboardRows.map((row, rowIndex) => (\n

\n );\n })}\n

\n ))}\n \n \n );\n}\n\nfunction App() {\n return (\n

Baby Keyboard 🧸

\n \n \n View Source\n \n

Diff · v75