feat: preview

.mcp.json

@@ -0,0 +1,35 @@
+{
+  "mcpServers": {
+    "context7": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "@upstash/context7-mcp",
+        "--api-key",
+        "ctx7sk-48cb1995-935a-4cc5-b9b0-535d600ea5e6"
+      ],
+      "env": {}
+    },
+    "brave-search": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
+      "env": {
+        "BRAVE_API_KEY": "BSAcRGGikEzY4B2j3NZ8Qy5NYh9l4HZ"
+      }
+    },
+    "perplexity": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "perplexity-mcp"],
+      "env": {
+        "PERPLEXITY_API_KEY": "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",
+        "PERPLEXITY_TIMEOUT_MS": "600000"
+      }
+    },
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp@latest"]
+    }
+  }
+}

CLAUDE.md

@@ -9,7 +9,7 @@ Printable math worksheet generator (A4 PDF) for children aged 7–9. Claude Code
 ```bash
 npm run build:css          # Build Tailwind CSS (minified)
 npm run build:css:watch    # Watch mode for CSS
-npm run preview            # Serve HTML at localhost:3000
+npm run preview            # Serve HTML at localhost:3000 with live-reload
 npm run dev                # CSS watch + preview server (concurrent)
 npm run pdf -- <file>      # Convert HTML file to PDF
 npm run remove-bg -- <file|dir>  # Remove white background from PNG icons
@@ -185,5 +185,6 @@ Puppeteer settings for A4 worksheets:
 2. Claude creates/updates a JSON config in `tasks/` with `pages[].task` descriptions
 3. Claude reads `src/templates/space-base.html` + `src/examples/space-worksheet.html` as references
 4. Claude generates HTML file in `output/html/` — creates concrete problems from `task` text, assigns unique shuffled icons, builds all pages
-5. Run `npm run pdf -- output/html/<file>.html` to create PDF
-6. Preview with `npm run preview` at localhost:3000
+5. Add a link to the new document in `output/index.html` (card with title and path)
+6. Run `npm run pdf -- output/html/<file>.html` to create PDF
+7. Preview with `npm run preview` at localhost:3000

bs-config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  server: {
+    baseDir: "output",
+    routes: {
+      "/assets": "assets"
+    }
+  },
+  files: [
+    "output/index.html",
+    "output/html/**/*.html",
+    "assets/**/*"
+  ],
+  port: 3000,
+  open: false,
+  notify: false,
+  ui: false
+};

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build:css": "npx @tailwindcss/cli -i src/styles/main.css -o output/css/styles.css --minify",
     "build:css:watch": "npx @tailwindcss/cli -i src/styles/main.css -o output/css/styles.css --watch",
-    "preview": "npx serve output/html --cors -l 3000",
+    "preview": "browser-sync start --config bs-config.cjs",
     "pdf": "node src/scripts/generate-pdf.mjs",
     "dev": "concurrently \"npm run build:css:watch\" \"npm run preview\"",
     "split-sprites": "node src/scripts/split-sprites.mjs",
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.18",
-    "concurrently": "^9.2.1",
-    "serve": "^14.2.5"
+    "browser-sync": "^3.0.4",
+    "concurrently": "^9.2.1"
   }
 }