Phase 2

package-lock.json

@@ -28,6 +28,7 @@
         "@types/offscreencanvas": "^2019.7.3",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "canvas": "^3.2.3",
         "eslint": "^9",
         "eslint-config-next": "16.3.0",
         "tailwindcss": "^4",
@@ -3364,6 +3365,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.11.12",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.12.tgz",
@@ -3376,6 +3398,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.18",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.18.tgz",
@@ -3434,6 +3468,31 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/call-bind": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz",
@@ -3514,6 +3573,21 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.3.tgz",
+      "integrity": "sha512-PzE5nJZPz72YUAfo8oTp0u3fqqY7IzlTubneAihqDYAUcBk7ryeCmBbdJBEdaH0bptSOe2VT2Zwcb3UaFyaSWw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || >= 20.9.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3531,6 +3605,13 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3681,6 +3762,32 @@
         }
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -3782,6 +3889,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+      "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.24.5",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.24.5.tgz",
@@ -4424,6 +4541,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "dev": true,
+      "license": "(MIT OR WTFPL)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -4588,6 +4715,13 @@
         }
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4731,6 +4865,13 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -4905,6 +5046,27 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4942,6 +5104,20 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -5927,6 +6103,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
@@ -5950,6 +6139,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/motion-dom": {
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-13.0.0.tgz",
@@ -5990,6 +6186,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/napi-postinstall": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
@@ -6094,6 +6297,39 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.94.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.94.0.tgz",
+      "integrity": "sha512-W5ZNO5KRPB5TkYmGVD9F6YqhsglXJzE6etpbmT+f6EQElhiX/UTG551cnsRGvLG3fyZEg9HwaDmNmj5nwJ4z9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-abi/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-exports-info": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.2.tgz",
@@ -6246,6 +6482,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -6413,6 +6659,34 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "deprecated": "No longer maintained. Please contact the author of the relevant native addon; alternatives are available.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -6435,6 +6709,17 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/pump": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
+      "integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -6466,6 +6751,32 @@
       ],
       "license": "MIT"
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react": {
       "version": "19.2.8",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz",
@@ -6563,6 +6874,21 @@
         }
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -6706,6 +7032,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -6968,6 +7315,53 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6998,6 +7392,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -7215,6 +7619,36 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.5.tgz",
+      "integrity": "sha512-OboTd8mmMhZDNPV+UjQcK9yKAatXu2aJ+r1w4im1Otd4M4fl2hwvdoXUxIYHFTHWK/3y3FarBP70v3vwmGlOxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.17",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
@@ -7321,6 +7755,19 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -7598,6 +8045,13 @@
         }
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -7713,6 +8167,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -30,9 +30,10 @@
     "@types/offscreencanvas": "^2019.7.3",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "canvas": "^3.2.3",
     "eslint": "^9",
     "eslint-config-next": "16.3.0",
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}

src/app/page.tsx

@@ -6,6 +6,7 @@ import { KernelSelector } from '@/components/kernel/KernelSelector'
 import { PlaybackControls } from '@/components/controls/PlaybackControls'
 import { OverlayControls, PaddingControls, KernelInfoPanel } from '@/components/controls/OverlayControls'
 import { ConvolutionCanvas } from '@/components/canvas/ConvolutionCanvas'
+import { StaticConvolutionView } from '@/components/canvas/StaticConvolutionView'
 import { SplitView } from '@/components/canvas/SplitView'
 import { ImageCanvas } from '@/components/canvas/ImageCanvas'
 import { Button, Card, CardContent, Badge } from '@/components/ui'
@@ -50,6 +51,11 @@ export default function Home() {
 
   const [showComparison, setShowComparison] = useState(false)
   const [sidebarWidth, setSidebarWidth] = useState(320)
+  const [inspectedPosition, setInspectedPosition] = useState<{ x: number; y: number } | null>(null)
+
+  const handleInspectClick = useCallback((x: number, y: number) => {
+    setInspectedPosition({ x, y })
+  }, [])
 
   const handleImageLoad = useCallback((data: { image: HTMLImageElement; imageData: ImageData }) => {
     setOriginalImage(data.image, data.imageData)
@@ -209,6 +215,7 @@ export default function Home() {
                   width={originalImageData.width}
                   height={originalImageData.height}
                   className="w-full h-full"
+                  onInspectClick={handleInspectClick}
                 />
               </div>
 
@@ -260,9 +267,18 @@ export default function Home() {
         {/* Right Sidebar - Info Panels */}
         <aside className="w-80 flex flex-col bg-white dark:bg-gray-800 border-l dark:border-gray-700 overflow-y-auto">
           <div className="p-4 space-y-4">
-            <KernelInfoPanel />
-            <OverlayControls />
-            <PaddingControls />
+            {inspectedPosition ? (
+              <StaticConvolutionView
+                inspectedPosition={inspectedPosition}
+                onClearInspection={() => setInspectedPosition(null)}
+              />
+            ) : (
+              <>
+                <KernelInfoPanel />
+                <OverlayControls />
+                <PaddingControls />
+              </>
+            )}
           </div>
         </aside>
       </main>

src/components/canvas/ConvolutionCanvas.tsx

@@ -9,9 +9,10 @@ interface ConvolutionCanvasProps {
   width?: number
   height?: number
   className?: string
+  onInspectClick?: (x: number, y: number) => void
 }
 
-export function ConvolutionCanvas({ width = 800, height = 600, className }: ConvolutionCanvasProps) {
+export function ConvolutionCanvas({ width = 800, height = 600, className, onInspectClick }: ConvolutionCanvasProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const animationRef = useRef<number | null>(null)
 
@@ -101,6 +102,24 @@ export function ConvolutionCanvas({ width = 800, height = 600, className }: Conv
     height,
   ])
 
+  const handleCanvasClick = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      if (!onInspectClick) return
+      const rect = e.currentTarget.getBoundingClientRect()
+      const canvasX = e.clientX - rect.left
+      const canvasY = e.clientY - rect.top
+
+      // Convert canvas coordinates to image coordinates
+      const imageX = Math.floor((canvasX - panOffset.x) / zoomLevel)
+      const imageY = Math.floor((canvasY - panOffset.y) / zoomLevel)
+
+      if (imageX >= 0 && imageX < width && imageY >= 0 && imageY < height) {
+        onInspectClick(imageX, imageY)
+      }
+    },
+    [onInspectClick, panOffset, zoomLevel, width, height]
+  )
+
   useEffect(() => {
     drawCanvas()
   }, [drawCanvas])
@@ -123,8 +142,9 @@ export function ConvolutionCanvas({ width = 800, height = 600, className }: Conv
         ref={canvasRef}
         width={width}
         height={height}
-        className="block"
+        className="block cursor-crosshair"
         style={{ touchAction: 'none' }}
+        onClick={onInspectClick ? handleCanvasClick : undefined}
       />
     </div>
   )

src/components/canvas/StaticConvolutionView.tsx

@@ -0,0 +1,367 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { useStaticConvolution } from '@/hooks/useStaticConvolution'
+import { useAppStore } from '@/store'
+import { Card, CardContent, Badge, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
+import { cn } from '@/utils/helpers'
+import { Calculator, Grid, Palette } from 'lucide-react'
+
+interface StaticConvolutionViewProps {
+  className?: string
+  inspectedPosition: { x: number; y: number } | null
+  onClearInspection: () => void
+}
+
+export function StaticConvolutionView({ className, inspectedPosition, onClearInspection }: StaticConvolutionViewProps) {
+  const {
+    computeStep,
+    getPaddedImagePreview,
+    kernel,
+    normalize,
+    padding,
+    imageWidth,
+    imageHeight,
+    hasImage,
+    hasKernel,
+  } = useStaticConvolution()
+
+  const { settings } = useAppStore()
+  const [activeChannel, setActiveChannel] = useState(0)
+  const [activeTab, setActiveTab] = useState<string>('overview')
+
+  if (!hasImage || !hasKernel) {
+    return (
+      <Card className={cn('w-full', className)}>
+        <CardContent className="p-6 text-center text-gray-500 dark:text-gray-400">
+          <Grid className="h-12 w-12 mx-auto mb-3 opacity-50" />
+          <p>Upload an image and select a kernel to inspect convolution steps</p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  const step = inspectedPosition ? computeStep(inspectedPosition.x, inspectedPosition.y, activeChannel) : null
+
+  const channelLabels = ['Red', 'Green', 'Blue', 'Alpha']
+  const channelColors = ['text-red-600', 'text-green-600', 'text-blue-600', 'text-gray-600']
+
+  // Get padded image preview for visualization
+  const paddedPreview = inspectedPosition ? getPaddedImagePreview(kernel.length) : null
+  const halfKernel = Math.floor(kernel.length / 2)
+  const centerPx = halfKernel
+  const centerPy = halfKernel
+
+  return (
+    <Card className={cn('w-full flex flex-col', className)}>
+      <CardContent className="p-4 flex-1 flex flex-col min-h-0">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="font-medium flex items-center gap-2">
+            <Calculator className="h-5 w-5" />
+            Static Convolution Inspector
+          </h3>
+          <div className="flex items-center gap-2">
+            <Badge variant="outline" className="text-xs">
+              {padding} padding
+            </Badge>
+            {normalize && <Badge variant="secondary" className="text-xs">Normalized</Badge>}
+          </div>
+        </div>
+
+        {/* Inspected Position Info */}
+        {inspectedPosition && (
+          <div className="mb-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <span className="font-medium">Position: ({inspectedPosition.x}, {inspectedPosition.y})</span>
+                <div className="flex items-center gap-2">
+                  <Palette className="h-4 w-4 text-gray-500" />
+                  <select
+                    value={activeChannel}
+                    onChange={(e) => setActiveChannel(parseInt(e.target.value))}
+                    className="text-sm border border-gray-300 rounded px-2 py-1 dark:border-gray-600 dark:bg-gray-700"
+                  >
+                    {channelLabels.map((label, i) => (
+                      <option key={i} value={i} className={channelColors[i]}>
+                        {label} Channel
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <button
+                onClick={onClearInspection}
+                className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+              >
+                Clear Selection
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Kernel Matrix Display */}
+        <div className="mb-4">
+          <h4 className="text-sm font-medium mb-2">Kernel Matrix ({kernel.length}×{kernel.length})</h4>
+          <div className="grid gap-1 mb-4" style={{ gridTemplateColumns: `repeat(${kernel.length}, 1fr)` }}>
+            {kernel.map((row, i) =>
+              row.map((val, j) => (
+                <div
+                  key={`${i}-${j}`}
+                  className={cn(
+                    'p-2 text-center text-sm font-mono rounded border',
+                    val > 0
+                      ? 'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300 border-green-200'
+                      : val < 0
+                      ? 'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300 border-red-200'
+                      : 'bg-gray-50 text-gray-800 dark:bg-gray-800 dark:text-gray-300 border-gray-200'
+                  )}
+                >
+                  {val.toFixed(val === Math.round(val) ? 0 : 2)}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Step Details Tabs */}
+        {step && (
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0">
+            <TabsList className="grid w-full grid-cols-5 mb-4">
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="patch">Image Patch</TabsTrigger>
+              <TabsTrigger value="multiplications">Multiplications</TabsTrigger>
+              <TabsTrigger value="summation">Summation</TabsTrigger>
+              <TabsTrigger value="padding">Padding</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="overview" className="flex-1 overflow-auto space-y-4">
+              <div className="grid gap-4 sm:grid-cols-2">
+                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                  <h5 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Input Patch (Normalized 0-1)</h5>
+                  <div className="grid gap-0.5 text-xs font-mono" style={{ gridTemplateColumns: `repeat(${kernel.length}, 1fr)` }}>
+                    {step.inputPatch.map((row, i) =>
+                      row.map((val, j) => (
+                        <div
+                          key={`${i}-${j}`}
+                          className={cn(
+                            'p-1.5 text-center rounded border',
+                            val > 0.5 ? 'bg-blue-50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-gray-100 text-gray-800 dark:bg-gray-700'
+                          )}
+                        >
+                          {val.toFixed(3)}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+
+                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                  <h5 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Kernel Values</h5>
+                  <div className="grid gap-0.5 text-xs font-mono" style={{ gridTemplateColumns: `repeat(${kernel.length}, 1fr)` }}>
+                    {step.kernel.map((row, i) =>
+                      row.map((val, j) => (
+                        <div
+                          key={`${i}-${j}`}
+                          className={cn(
+                            'p-1.5 text-center rounded border',
+                            val > 0 ? 'bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300' :
+                            val < 0 ? 'bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300' :
+                            'bg-gray-50 text-gray-800 dark:bg-gray-800 dark:text-gray-300'
+                          )}
+                        >
+                          {val.toFixed(val === Math.round(val) ? 0 : 2)}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+
+                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg sm:col-span-2">
+                  <h5 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">Computation Summary</h5>
+                  <div className="grid gap-2 sm:grid-cols-3 text-sm">
+                    <div className="font-mono">
+                      <span className="text-gray-500">Raw Sum: </span>
+                      <span className="text-blue-600 dark:text-blue-400">{step.sum.toFixed(6)}</span>
+                    </div>
+                    <div className="font-mono">
+                      <span className="text-gray-500">Normalized: </span>
+                      <span className="text-green-600 dark:text-green-400">{step.normalizedValue.toFixed(6)}</span>
+                    </div>
+                    <div className="font-mono">
+                      <span className="text-gray-500">Output (0-255): </span>
+                      <span className="text-purple-600 dark:text-purple-400">{Math.round(step.normalizedValue * 255)}</span>
+                    </div>
+                    <div className="font-mono sm:col-span-3">
+                      <span className="text-gray-500">Progress: </span>
+                      <span>{Math.round(step.progress * 100)}%</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="patch" className="flex-1 overflow-auto">
+              <h5 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+                Image Patch Under Kernel at ({inspectedPosition?.x}, {inspectedPosition?.y}) - Channel: {channelLabels[activeChannel]}
+              </h5>
+              <div className="grid gap-1" style={{ gridTemplateColumns: `repeat(${kernel.length}, 1fr)` }}>
+                {step.inputPatch.map((row, i) =>
+                  row.map((val, j) => (
+                    <div
+                      key={`${i}-${j}`}
+                      className={cn(
+                        'p-3 text-center text-sm font-mono rounded border aspect-square flex items-center justify-center',
+                        val > 0.5 ? 'bg-blue-50 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border-blue-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 border-gray-200'
+                      )}
+                    >
+                      <div className="text-xs text-gray-500">{val.toFixed(3)}</div>
+                      <div className="text-lg font-bold">{val.toFixed(3)}</div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="multiplications" className="flex-1 overflow-auto">
+              <h5 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+                Element-wise Multiplication: Pixel × Kernel
+              </h5>
+              <div className="space-y-4">
+                {step.multiplications.map((row, i) =>
+                  row.map((mult, j) => {
+                    const pixelVal = step.inputPatch[i]?.[j] ?? 0
+                    const kernelVal = step.kernel[i]?.[j] ?? 0
+                    return (
+                      <div key={`${i}-${j}`} className="flex items-center justify-center gap-4 p-2 bg-gray-50 dark:bg-gray-800 rounded">
+                        <div className="w-20 text-right text-sm font-mono text-gray-600 dark:text-gray-400">
+                          {pixelVal.toFixed(3)}
+                        </div>
+                        <span className="text-gray-400">×</span>
+                        <div className="w-20 text-center text-sm font-mono" style={{ color: kernelVal > 0 ? '#16a34a' : kernelVal < 0 ? '#dc2626' : '#6b7280' }}>
+                          {kernelVal.toFixed(2)}
+                        </div>
+                        <span className="text-gray-400">=</span>
+                        <div className="w-24 text-left text-sm font-mono font-medium text-purple-600 dark:text-purple-400">
+                          {mult.toFixed(6)}
+                        </div>
+                      </div>
+                    )
+                  })
+                )}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="summation" className="flex-1 overflow-auto">
+              <h5 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+                Summation: Σ(Pixel × Kernel)
+              </h5>
+              <div className="space-y-2 font-mono text-sm">
+                {step.multiplications.map((row, i) =>
+                  row.map((mult, j) => {
+                    const pixelVal = step.inputPatch[i]?.[j] ?? 0
+                    const kernelVal = step.kernel[i]?.[j] ?? 0
+                    return (
+                      <div key={`${i}-${j}`} className="flex items-center gap-2 text-gray-700 dark:text-gray-300">
+                        <span className="text-gray-400">({pixelVal.toFixed(3)} × {kernelVal.toFixed(2)})</span>
+                        <span className="text-purple-600 dark:text-purple-400">= {mult.toFixed(6)}</span>
+                      </div>
+                    )
+                  })
+                )}
+                <div className="border-t border-gray-300 dark:border-gray-600 pt-2 mt-2 flex items-center justify-between">
+                  <span className="font-medium">Sum:</span>
+                  <span className="font-bold text-blue-600 dark:text-blue-400">{step.sum.toFixed(6)}</span>
+                </div>
+                <div className="flex items-center justify-between text-green-600 dark:text-green-400">
+                  <span>After normalization (÷ {kernel.flat().reduce((a, b) => a + b, 0).toFixed(normalize ? 0 : 2)}):</span>
+                  <span className="font-bold">{step.normalizedValue.toFixed(6)}</span>
+                </div>
+                <div className="flex items-center justify-between text-purple-600 dark:text-purple-400 border-t border-gray-300 dark:border-gray-600 pt-2 mt-2">
+                  <span className="font-medium">Final Output (0-255):</span>
+                  <span className="font-bold text-lg">{Math.round(step.normalizedValue * 255)}</span>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="padding" className="flex-1 overflow-auto">
+              <h5 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+                Padded Image Preview ({padding} padding) - Kernel centered at ({inspectedPosition?.x}, {inspectedPosition?.y})
+              </h5>
+              {paddedPreview && (
+                <div className="space-y-4">
+                  <div className="text-sm text-gray-500 dark:text-gray-400">
+                    Padded dimensions: {paddedPreview.width} × {paddedPreview.height} (original: {imageWidth} × {imageHeight})
+                    <br />
+                    Kernel center position in padded image: ({centerPx}, {centerPy})
+                  </div>
+                  <div className="grid gap-0.5" style={{ gridTemplateColumns: `repeat(${paddedPreview.width}, 1fr)` }}>
+                    {Array.from({ length: paddedPreview.height }, (_, py) =>
+                      Array.from({ length: paddedPreview.width }, (_, px) => {
+                        // Show only first 3 channels (RGB) as grayscale
+                        const idx = (py * paddedPreview.width + px) * 4
+                        const r = paddedPreview.data[idx] ?? 0
+                        const g = paddedPreview.data[idx + 1] ?? 0
+                        const b = paddedPreview.data[idx + 2] ?? 0
+                        const gray = Math.round(0.299 * r + 0.587 * g + 0.114 * b)
+                        const isCenter = px === centerPx && py === centerPy
+                        const isKernelArea =
+                          px >= centerPx - halfKernel &&
+                          px < centerPx + halfKernel + 1 &&
+                          py >= centerPy - halfKernel &&
+                          py < centerPy + halfKernel + 1
+
+                        return (
+                          <div
+                            key={`${px}-${py}`}
+                            className={cn(
+                              'aspect-square text-center text-xs font-mono rounded border flex items-center justify-center',
+                              isCenter
+                                ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border-blue-400 font-bold'
+                                : isKernelArea
+                                ? 'bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 border-yellow-300'
+                                : px < halfKernel || px >= paddedPreview.width - halfKernel || py < halfKernel || py >= paddedPreview.height - halfKernel
+                                ? 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 border-gray-200'
+                                : 'bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-200 border-gray-200'
+                            )}
+                            title={`Padded[${px},${py}] = ${gray}`}
+                          >
+                            {gray}
+                          </div>
+                        )
+                      })
+                    )}
+                  </div>
+                  <div className="flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+                    <span className="flex items-center gap-1">
+                      <span className="w-3 h-3 rounded border bg-blue-100 dark:bg-blue-900/30" />
+                      Kernel Center
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <span className="w-3 h-3 rounded border bg-yellow-50 dark:bg-yellow-900/30" />
+                      Kernel Area
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <span className="w-3 h-3 rounded border bg-gray-100 dark:bg-gray-800" />
+                      Padding Area
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <span className="w-3 h-3 rounded border bg-white dark:bg-gray-900" />
+                      Original Image
+                    </span>
+                  </div>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        )}
+
+        {!inspectedPosition && (
+          <div className="flex-1 flex items-center justify-center text-gray-400">
+            <p className="text-center">Click on the image to inspect a convolution step</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

src/components/ui/Tabs.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import * as React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '@/utils/helpers'
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-gray-100 p-1 text-gray-500 dark:bg-gray-800 dark:text-gray-400',
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-gray-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-gray-900 dark:data-[state=active]:text-white',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:ring-offset-gray-900',
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/ui/index.ts

@@ -4,4 +4,5 @@ export { Select } from './Select'
 export { Slider } from './Slider'
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
 export { Badge } from './Badge'
-export { Tooltip } from './Tooltip'
+export { Tooltip } from './Tooltip'
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs'

src/hooks/useStaticConvolution.ts

@@ -0,0 +1,97 @@
+import { useCallback, useMemo } from 'react'
+import { useAppStore } from '@/store'
+import { computeConvolutionStep, getPixel } from '@/lib/convolution/engine'
+import type { ImageDataExtended, ConvolutionStep, PaddingMode } from '@/types'
+
+export function useStaticConvolution() {
+  const {
+    originalImageData,
+    selectedKernel,
+    customKernelMatrix,
+    customKernelNormalize,
+    settings,
+  } = useAppStore()
+
+  const kernel = selectedKernel?.matrix ?? customKernelMatrix
+  const normalize = selectedKernel?.normalize ?? customKernelNormalize
+  const padding = settings.padding
+
+  // Create extended image data for the engine
+  const extendedImage = useMemo((): ImageDataExtended | null => {
+    if (!originalImageData) return null
+    return {
+      data: originalImageData.data,
+      width: originalImageData.width,
+      height: originalImageData.height,
+      channels: 4,
+    }
+  }, [originalImageData])
+
+  const computeStep = useCallback(
+    (x: number, y: number, channel: number = 0): ConvolutionStep | null => {
+      if (!extendedImage || !kernel) return null
+
+      // Clamp coordinates to valid range
+      const clampedX = Math.max(0, Math.min(x, extendedImage.width - 1))
+      const clampedY = Math.max(0, Math.min(y, extendedImage.height - 1))
+      const clampedChannel = Math.max(0, Math.min(channel, extendedImage.channels - 1))
+
+      return computeConvolutionStep(extendedImage, kernel, padding, normalize, clampedX, clampedY, clampedChannel)
+    },
+    [extendedImage, kernel, padding, normalize]
+  )
+
+  const getPixelValue = useCallback(
+    (x: number, y: number, channel: number = 0): number => {
+      if (!extendedImage) return 0
+      const clampedX = Math.max(0, Math.min(x, extendedImage.width - 1))
+      const clampedY = Math.max(0, Math.min(y, extendedImage.height - 1))
+      const clampedChannel = Math.max(0, Math.min(channel, extendedImage.channels - 1))
+      return getPixel(extendedImage, clampedX, clampedY, clampedChannel, padding)
+    },
+    [extendedImage, padding]
+  )
+
+  const getPaddedImagePreview = useCallback(
+    (kernelSize: number): { width: number; height: number; data: number[] } | null => {
+      if (!extendedImage) return null
+
+      const halfKernel = Math.floor(kernelSize / 2)
+      const paddedWidth = extendedImage.width + 2 * halfKernel
+      const paddedHeight = extendedImage.height + 2 * halfKernel
+      const data: number[] = []
+
+      for (let py = 0; py < paddedHeight; py++) {
+        for (let px = 0; px < paddedWidth; px++) {
+          const origX = px - halfKernel
+          const origY = py - halfKernel
+          // Sample each channel
+          for (let c = 0; c < Math.min(3, extendedImage.channels); c++) {
+            data.push(getPixel(extendedImage, origX, origY, c, padding))
+          }
+          // Alpha channel
+          if (extendedImage.channels > 3) {
+            data.push(getPixel(extendedImage, origX, origY, 3, padding))
+          }
+        }
+      }
+
+      return { width: paddedWidth, height: paddedHeight, data }
+    },
+    [extendedImage, padding]
+  )
+
+  return {
+    computeStep,
+    getPixelValue,
+    getPaddedImagePreview,
+    kernel,
+    normalize,
+    padding,
+    imageWidth: extendedImage?.width ?? 0,
+    imageHeight: extendedImage?.height ?? 0,
+    imageChannels: extendedImage?.channels ?? 0,
+    hasImage: !!extendedImage,
+    hasKernel: !!kernel,
+  }
+}

src/lib/convolution/engine.ts

@@ -1,5 +1,68 @@
 import { PaddingMode, ConvolutionStep, ImageDataExtended } from '@/types'
 
+/**
+ * Computes a single convolution step for a specific pixel position.
+ * Useful for static visualization/inspection without running the full animation.
+ */
+export function computeConvolutionStep(
+  image: ImageDataExtended,
+  kernel: number[][],
+  padding: PaddingMode,
+  normalize: boolean,
+  x: number,
+  y: number,
+  channel: number
+): ConvolutionStep {
+  const { width, height, channels } = image
+  const kernelSize = kernel.length
+  const halfKernel = Math.floor(kernelSize / 2)
+
+  const kernelSum = kernel.flat().reduce((a, b) => a + b, 0)
+  const normalizeFactor = normalize && kernelSum !== 0 ? 1 / kernelSum : 1
+
+  const inputPatch: number[][] = []
+  const multiplications: number[][] = []
+  let sum = 0
+
+  for (let ky = 0; ky < kernelSize; ky++) {
+    const patchRow: number[] = []
+    const multRow: number[] = []
+    for (let kx = 0; kx < kernelSize; kx++) {
+      const px = x + kx - halfKernel
+      const py = y + ky - halfKernel
+      const pixelValue = getPixel(image, px, py, channel, padding)
+      const kernelValue = kernel[ky][kx]
+      patchRow.push(pixelValue)
+      const mult = pixelValue * kernelValue
+      multRow.push(mult)
+      sum += mult
+    }
+    inputPatch.push(patchRow)
+    multiplications.push(multRow)
+  }
+
+  const outputValue = sum
+  const normalizedValue = sum * normalizeFactor
+
+  // Calculate progress (for consistency with generator)
+  const totalPixels = width * height * channels
+  const processedPixels = (y * width + x) * channels + channel + 1
+  const progress = processedPixels / totalPixels
+
+  return {
+    x,
+    y,
+    channel,
+    inputPatch,
+    kernel,
+    multiplications,
+    sum: outputValue,
+    outputValue: normalizedValue,
+    normalizedValue,
+    progress,
+  }
+}
+
 export function getPixel(
   image: ImageDataExtended,
   x: number,

updates.md

@@ -74,4 +74,36 @@
 - Convolution engine implements all 4 padding modes
 - Generator-based step-by-step execution for educational visualization
 - State management handles complex interactions between components
-- Ready for Phase 2 optimization and Phase 3 visualization enhancements
+- Ready for Phase 2 optimization and Phase 3 visualization enhancements
+
+---
+
+## Version 0.3.0 - Phase 2 Complete: Static Convolution Visualization (2026-08-06)
+
+### Completed
+- [x] Added `computeConvolutionStep()` function to convolution engine for single-pixel inspection
+- [x] Created `useStaticConvolution` hook for static inspection capabilities
+- [x] Built `StaticConvolutionView` component with 5 educational tabs:
+  - Overview: Input patch, kernel values, computation summary
+  - Image Patch: Detailed patch view at clicked position
+  - Multiplications: Element-wise pixel × kernel breakdown
+  - Summation: Step-by-step Σ(pixel × kernel) with normalization
+  - Padding: Visual demonstration of padding strategies at borders
+- [x] Implemented click-to-inspect on main ConvolutionCanvas
+- [x] Created reusable Tabs UI component with Radix UI
+- [x] Integrated static inspector into right sidebar (replaces kernel info when active)
+- [x] Added channel selector (Red/Green/Blue/Alpha) for per-channel inspection
+- [x] All 4 padding modes (zero, reflect, replicate, wrap) working in static view
+
+### Technical Achievements
+- Build passes: `npm run build` ✓
+- TypeScript passes: `npm run type-check` ✓
+- Dev server runs without errors ✓
+- Efficient single-pixel computation without full generator execution
+- Reuses existing ConvolutionStep type for consistency
+- Handles edge cases (clamped coordinates, invalid channels)
+
+### In Progress
+- [ ] Phase 3: Animation & Visualization
+- [ ] Phase 4: Interactive Controls
+- [ ] Phase 5: Comparison & Analysis