Phase 4

src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useCallback } from 'react'
+import { useState, useCallback, useEffect } from 'react'
 import { useAppStore, useImageStore, useUIStore } from '@/store'
 import { KernelSelector } from '@/components/kernel/KernelSelector'
 import { PlaybackControls } from '@/components/controls/PlaybackControls'
@@ -22,6 +22,7 @@ import {
   Settings,
   ChevronLeft,
   ChevronRight,
+  Keyboard,
 } from 'lucide-react'
 
 export default function Home() {
@@ -42,7 +43,7 @@ export default function Home() {
     resetConvolution,
   } = useAppStore()
 
-  const { runConvolution, pause, resume, stop, step, reset, isRunning, isPaused, canRun } = useConvolution()
+  const { runConvolution, pause, resume, stop, step, reset, isRunning, isPaused, canRun, toggleStepMode } = useConvolution()
   const { fileInputRef, openFileDialog, handleFileSelect } = useImageLoader()
   const { handleDragOver, handleDragLeave, handleDrop, isDragging } = useDragAndDrop((image, imageData) => {
     setOriginalImage(image, imageData)
@@ -52,11 +53,84 @@ 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 [showShortcuts, setShowShortcuts] = useState(false)
 
   const handleInspectClick = useCallback((x: number, y: number) => {
     setInspectedPosition({ x, y })
   }, [])
 
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Don't trigger shortcuts when typing in inputs
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return
+      }
+
+      switch (e.code) {
+        case 'Space':
+          e.preventDefault()
+          if (isRunning) pause()
+          else if (canRun) runConvolution()
+          else if (isPaused) resume()
+          break
+        case 'ArrowRight':
+          e.preventDefault()
+          step()
+          break
+        case 'ArrowLeft':
+          e.preventDefault()
+          // Step back not implemented yet
+          break
+        case 'Equal':
+        case 'NumpadAdd':
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault()
+            const newZoom = Math.min(20, settings.zoomLevel * 1.2)
+            useAppStore.getState().setZoomLevel(newZoom)
+          }
+          break
+        case 'Minus':
+        case 'NumpadSubtract':
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault()
+            const newZoom = Math.max(0.1, settings.zoomLevel / 1.2)
+            useAppStore.getState().setZoomLevel(newZoom)
+          }
+          break
+        case 'Digit0':
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault()
+            useAppStore.getState().setZoomLevel(1)
+            useAppStore.getState().setPanOffset({ x: 0, y: 0 })
+          }
+          break
+        case 'KeyR':
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault()
+            reset()
+            resetConvolution()
+          }
+          break
+        case 'KeyS':
+          if (e.ctrlKey || e.metaKey) {
+            e.preventDefault()
+            toggleStepMode(!settings.stepMode)
+          }
+          break
+        case 'Slash':
+          if (e.shiftKey) {
+            e.preventDefault()
+            setShowShortcuts(!showShortcuts)
+          }
+          break
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [isRunning, isPaused, canRun, settings.zoomLevel, settings.stepMode, runConvolution, pause, resume, step, reset, resetConvolution, toggleStepMode])
+
   const handleImageLoad = useCallback((data: { image: HTMLImageElement; imageData: ImageData }) => {
     setOriginalImage(data.image, data.imageData)
     resetConvolution()
@@ -400,6 +474,72 @@ export default function Home() {
           </div>
         </div>
       )}
+
+      {/* Shortcuts Modal */}
+      {showShortcuts && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full mx-4 max-h-[80vh] overflow-y-auto">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h2 className="text-xl font-bold flex items-center gap-2">
+                  <Keyboard className="h-5 w-5" />
+                  Keyboard Shortcuts
+                </h2>
+                <Button variant="ghost" size="icon" onClick={() => setShowShortcuts(false)}>
+                  <ChevronLeft className="h-5 w-5" />
+                </Button>
+              </div>
+              <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
+                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded">
+                  <h3 className="font-medium mb-2">Playback</h3>
+                  <dl className="grid grid-cols-2 gap-2 text-xs">
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Space</dt>
+                    <dd>Play / Pause / Resume</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">→</dt>
+                    <dd>Step Forward</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">←</dt>
+                    <dd>Step Backward (future)</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+S</dt>
+                    <dd>Toggle Step Mode</dd>
+                  </dl>
+                </div>
+                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded">
+                  <h3 className="font-medium mb-2">Zoom & Pan</h3>
+                  <dl className="grid grid-cols-2 gap-2 text-xs">
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl++ / =</dt>
+                    <dd>Zoom In</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+-</dt>
+                    <dd>Zoom Out</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+0</dt>
+                    <dd>Reset Zoom & Pan</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Mouse Wheel</dt>
+                    <dd>Zoom at Cursor</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Drag</dt>
+                    <dd>Pan Image</dd>
+                  </dl>
+                </div>
+                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded">
+                  <h3 className="font-medium mb-2">General</h3>
+                  <dl className="grid grid-cols-2 gap-2 text-xs">
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Ctrl+R</dt>
+                    <dd>Reset All</dd>
+                    <dt className="font-mono text-blue-600 dark:text-blue-400">Shift+/</dt>
+                    <dd>Show This Help</dd>
+                  </dl>
+                </div>
+                <div className="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded">
+                  <p className="text-xs text-blue-800 dark:text-blue-300">
+                    <strong>Tip:</strong> Shortcuts don't work when typing in input fields. Click canvas to focus.
+                  </p>
+                </div>
+              </div>
+              <div className="mt-6 flex justify-end">
+                <Button onClick={() => setShowShortcuts(false)}>Got it</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

src/components/kernel/KernelSelector.tsx

@@ -176,6 +176,20 @@ export function KernelSelector() {
     return { sum, hasNonZero, isNormalized: customKernelNormalize }
   }, [customKernelMatrix, customKernelNormalize])
 
+  const filteredKernels = PREDEFINED_KERNELS.filter(
+    (k) =>
+      k.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      k.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      k.description.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const kernelsByCategory = KERNEL_CATEGORIES.map((cat) => ({
+    ...cat,
+    kernels: getKernelsByCategory(cat.value).filter((k) =>
+      k.name.toLowerCase().includes(searchQuery.toLowerCase())
+    ),
+  }))
+
   return (
     <Card className="w-full max-w-2xl">
       <div className="flex items-center justify-between p-4 border-b dark:border-gray-700">
@@ -295,7 +309,7 @@ export function KernelSelector() {
                 Array.from({ length: customKernelSize }, (_, col) => (
                   <input
                     key={`${row}-${col}`}
-                    ref={(el) => { if (matrixInputRefs.current[row]) matrixInputRefs.current[row][col] = el }}
+                    ref={(el) => { if (el && matrixInputRefs.current[row]) matrixInputRefs.current[row][col] = el }}
                     type="number"
                     step="0.1"
                     value={customKernelMatrix[row]?.[col] ?? 0}