feat(phase1.1): create hook module structure with proper exports

- Create new hook modules: useBoard, useCursor, useGameStatus
- Move/copy hook implementations to their own directories
- Create index.ts files for clean module exports
- Update all imports to use new module locations
- Rename useSnake -> useCursor for Unified API alignment
- Rename useRenderer -> useBoard for clarity
- Update main src/index.ts to export from all hook modules
- All TypeScript builds successfully
- Example app remains functional

src/useBoard/index.ts

@@ -0,0 +1 @@
+export * from './useBoard';

src/useBoard/useBoard.ts

@@ -0,0 +1,46 @@
+import { useRef } from "react";
+
+export type BoardData = {
+  cols: number;
+  rows: number;
+};
+
+export function useBoard() {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const renderBoard = (cols: number, rows: number) => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.innerHTML = "";
+
+    const board = document.createElement("div");
+    board.id = "snake-board";
+    board.className = "snake-board";
+
+    for (let r = 0; r < rows; r++) {
+      const rowDiv = document.createElement("div");
+      rowDiv.className = "snake-row";
+      rowDiv.setAttribute("data-r", String(r));
+
+      for (let c = 0; c < cols; c++) {
+        const cellDiv = document.createElement("div");
+        cellDiv.className = "snake-cell";
+        cellDiv.setAttribute("data-r", String(r));
+        cellDiv.setAttribute("data-c", String(c));
+        rowDiv.appendChild(cellDiv);
+      }
+
+      board.appendChild(rowDiv);
+    }
+
+    container.appendChild(board);
+  };
+
+  return {
+    containerRef,
+    renderBoard,
+  };
+}
+
+export type UseBoardType = ReturnType<typeof useBoard>;