fix(ts): Remove unused imports and update Grid to MUI v7 size API

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ConstCorrectness

CLAUDE.md

@@ -0,0 +1,52 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+```bash
+npm run dev       # Start dev server (http://localhost:5173)
+npm run build     # tsc -b && vite build
+npm run lint      # ESLint with max-warnings 0
+npm run preview   # Preview production build locally
+```
+
+There is no test suite. Deploys automatically to GitHub Pages on push to `main` via `.github/workflows/deploy.yml`.
+
+## Architecture
+
+Personal technical blog — React 19 + TypeScript + Vite, client-side only, deployed as static files.
+
+**Routing** (React Router DOM 7):
+- `/` → Home with hero and 3D model viewer
+- `/notes` → Searchable, tag-filtered post listing
+- `/notes/:slug` → Individual post (MDX + TOC + comments)
+
+**Content model** — posts are defined in two places:
+1. **Metadata**: `/src/data/notes.ts` — a typed `Note[]` array (slug, title, date, tags, excerpt, category). No YAML frontmatter.
+2. **Content**: `/src/content/notes/{slug}.mdx` — MDX files discovered and lazy-loaded at runtime via `import.meta.glob('../content/notes/*.mdx')` in `NoteView.tsx`.
+
+Adding a new post requires entries in both files.
+
+**MDX pipeline** (configured in `vite.config.ts`):
+- `remark-gfm` + `remark-math` → parse GFM and `$$...$$` LaTeX
+- `rehype-highlight` → code syntax highlighting
+- `rehype-katex` → render math
+- Components are injected via `MDXProvider` in `NoteView.tsx`, mapping HTML elements to MUI Typography variants
+
+**Key libraries:**
+- Three.js + React Three Fiber — 3D model rendering in `ModelViewer.tsx`
+- `react-py` — Python WASM interpreter powering `PythonREPL.tsx`
+- Material-UI 7 with Emotion — all styling; light/dark theme in `/src/theme/`
+- KaTeX — math rendering
+- Giscus — GitHub-backed comments (`GiscusComments.tsx`)
+
+**Theme**: Light/dark toggle persisted in `localStorage`. MUI theme and a React context (`ThemeContext`) are set up in `/src/theme/`. The `ModelViewer` adapts its environment map based on the active theme.
+
+**Interactive components** (embeddable in MDX): `PythonREPL`, `ModelViewer`, `AnatomyAttention` (loads external CDN libs dynamically and uses imperative DOM refs alongside React).
+
+## Conventions
+
+- ESLint flat config (`eslint.config.js`); `react/no-unknown-property` is disabled globally to allow Three.js JSX props.
+- `tsconfig.json` uses project references: `tsconfig.app.json` for `/src`, `tsconfig.node.json` for Vite config.
+- Static assets (`.glb` models, images) live in `/public/`.

src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AppBar, Toolbar, Typography, Button, Box, Container, IconButton } from '@mui/material';
+import { AppBar, Toolbar, Typography, Button, Box, Container } from '@mui/material';
 import CodeIcon from '@mui/icons-material/Code';
 import { Link as RouterLink } from 'react-router-dom';
 import ThemeToggle from './ThemeToggle';

src/components/TableOfContents.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { 
-  Box, 
-  Typography, 
-  List, 
-  ListItem, 
-  ListItemText, 
-  Link 
+import {
+  Box,
+  Typography,
+  List,
+  ListItem,
+  Link
 } from '@mui/material';
 
 interface Heading {

src/components/ThemeToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconButton, useTheme } from '@mui/material';
+import { IconButton } from '@mui/material';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { useThemeContext } from '../theme/useThemeContext';

src/pages/Home.tsx

@@ -112,7 +112,7 @@ const Home: React.FC = () => {
 
         <Grid container spacing={4}>
           {featuredNotes.map((note) => (
-            <Grid item xs={12} md={4} key={note.slug}>
+            <Grid size={{ xs: 12, md: 4 }} key={note.slug}>
               <Paper 
                 elevation={0}
                 component={Link}

src/pages/NoteView.tsx

@@ -1,13 +1,12 @@
 import React, { Suspense, useMemo } from 'react';
 import { useParams, Link as RouterLink } from 'react-router-dom';
-import { 
-  Container, 
-  Box, 
-  Typography, 
-  Button, 
-  Divider, 
-  Chip, 
-  Fade,
+import {
+  Container,
+  Box,
+  Typography,
+  Button,
+  Divider,
+  Chip,
   Stack,
   Skeleton
 } from '@mui/material';

src/pages/NotesList.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useMemo } from 'react';
-import { 
-  Container, 
-  Typography, 
-  Box, 
-  Paper, 
-  TextField, 
-  Chip, 
+import {
+  Container,
+  Typography,
+  Box,
+  TextField,
+  Chip,
   InputAdornment,
   Grid,
   Card,
@@ -15,7 +14,7 @@ import {
 } from '@mui/material';
 import { Link } from 'react-router-dom';
 import SearchIcon from '@mui/icons-material/Search';
-import { notes, type Note } from '../data/notes';
+import { notes } from '../data/notes';
 
 const NotesList: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState('');
@@ -90,7 +89,7 @@ const NotesList: React.FC = () => {
       <Grid container spacing={4}>
         {filteredNotes.length > 0 ? (
           filteredNotes.map((note) => (
-            <Grid item xs={12} md={6} lg={4} key={note.slug}>
+            <Grid size={{ xs: 12, md: 6, lg: 4 }} key={note.slug}>
               <Card 
                 elevation={0}
                 sx={{