feat: complete process

CLAUDE.md

@@ -14,11 +14,6 @@ npm run dev                # CSS watch + preview server (concurrent)
 npm run pdf -- <file>      # Convert HTML file to PDF
 ```
 
-Generate problems from a task config:
-```bash
-node src/scripts/generate-problems.mjs tasks/<task>.json
-```
-
 Generate images via Banatie API:
 ```bash
 node src/scripts/banatie.mjs --type background --prompt "forest theme" --output assets/backgrounds/forest.png
@@ -30,10 +25,10 @@ node src/scripts/banatie.mjs --type icon --prompt "golden star" --output assets/
 ```
 src/
   styles/main.css              — Tailwind source with A4/print styles
-  templates/space-base.html    — Base template (reference example, see below)
+  templates/space-base.html    — Base template (layout/styling reference)
+  examples/space-worksheet.html — Finished 3-page example (output reference)
   scripts/
     generate-pdf.mjs           — HTML → PDF via Puppeteer
-    generate-problems.mjs      — JSON task → concrete problem list
     banatie.mjs                — Banatie API client for image generation
 tasks/                         — JSON task definition files
 assets/
@@ -49,69 +44,75 @@ output/
 
 ## JSON Task Format
 
-Each task is a JSON file in `tasks/` with this structure:
+Each task is a JSON file in `tasks/` defining a multi-page document. See `tasks/space-exploration-1.json` for a real example.
 
 ```json
 {
-  "id": "multiply-2-3",
-  "title": "Умножение на 2 и 3",
-  "description": "Worksheet for practicing multiplication by 2 and 3",
-  "template": "{a} × {b} = ___",
-  "variables": {
-    "a": { "type": "range", "min": 1, "max": 10 },
-    "b": { "type": "set", "values": [2, 3] }
+  "id": "space-exploration-1",
+  "title": "Исследуй Планету",
+  "description": "3-page space worksheet: addition ±, multiply by 5 ±, multiplication table ±",
+  "labels": {
+    "title": "Исследуй Планету",
+    "subtitle": "Собери ресурсы, решая примеры!",
+    "footerBubble": "Итого собрано на планете:"
+  },
+  "theme": {
+    "style": "space",
+    "template": "space-base",
+    "icons": "assets/icons/pack1/"
   },
-  "problemCount": 20,
   "layout": {
     "columns": 2,
     "problemsPerPage": 20
   },
-  "labels": {
-    "title": "Умножение",
-    "subtitle": "Реши примеры",
-    "name": "Имя: _______________",
-    "date": "Дата: _______________"
-  },
-  "theme": {
-    "background": "assets/backgrounds/forest.png",
-    "icons": "assets/icons/stars/",
-    "iconReward": 1
-  }
+  "pages": [
+    {
+      "task": "A + B ± C, где A от 8 до 16, B от 4 до 8, C от 1 до 3. Знак ± выбирается случайно",
+      "problemCount": 20,
+      "heroImage": "assets/hero-images/spaceship2.jpeg",
+      "footerImage": "assets/footers/planet3.jpeg",
+      "heroDirection": "row-reverse"
+    }
+  ]
 }
 ```
 
 ### Fields
 
-- **template** — problem template with `{variable}` placeholders
-- **variables** — each variable is either `range` (min/max) or `set` (explicit values)
-- **problemCount** — how many problems to generate
+- **pages[]** — array of pages, each with its own task and images
+- **pages[].task** — free-text description of problems to generate (Claude reads this and creates concrete expressions)
+- **pages[].problemCount** — how many problems on this page
+- **pages[].heroImage** — path to hero image for this page
+- **pages[].footerImage** — path to footer panorama for this page
+- **pages[].heroDirection** — `row` (hero left) or `row-reverse` (hero right)
 - **layout.columns** — 1 or 2 column layout
 - **layout.problemsPerPage** — max problems per A4 page
 - **labels** — all visible text (no hardcoded language)
-- **theme.background** — path to background image
-- **theme.icons** — path to icon directory (for collectible rewards)
-- **theme.iconReward** — show an icon every N problems solved
+- **theme.style** — visual theme name (e.g. "space")
+- **theme.template** — which base template to use (e.g. "space-base")
+- **theme.icons** — path to icon directory for problem cards
 
 ## Space Base Template
 
-Reference example: `src/templates/space-base.html`
+Base template: `src/templates/space-base.html`
+Finished example: `src/examples/space-worksheet.html` (3-page output matching `tasks/space-exploration-1.json`)
 
-This is the base visual design for all space-themed worksheets. When generating a new worksheet, use this file as the source of truth for layout, styling, and structure. **Read it first**, then produce a new HTML with these variations:
+The base template defines the visual design for all space-themed worksheets. The example shows a complete generated document. When generating a new worksheet, **read both files first**, then produce a new HTML with these variations:
 
 ### What to vary per worksheet
 
 1. **Hero image** — pick one from `assets/hero-images/spaceship{1-6}.jpeg`
 2. **Footer image** — pick one from `assets/footers/planet{1-6}.jpeg`
 3. **Hero position** — set CSS variable `--hero-direction: row` (hero left) or `row-reverse` (hero right)
-4. **Problem icons** — randomly pick from `assets/icons/pack1/` (minerals and plants, any variant `{name}-{row}-{col}.png`)
+4. **Problem icons** — pick from `assets/icons/pack1/` (minerals and plants, any variant `{name}-{row}-{col}.png`). **Every icon must be unique across the entire document** (no repeats across pages). Shuffle minerals and plants together randomly — do not sort by type
 5. **Problem alignment** — for each problem card, randomly assign `justify-start`, `justify-center`, or `justify-end` within its grid column. No repeating patterns — should look chaotic/scattered
 6. **Title, subtitle, footer text** — set from the task description
-7. **Problems** — generate from the task config (template like `{a} × {b} + {c}`, variable ranges/sets, etc.)
+7. **Problems** — generate directly from the `task` text in JSON config. Claude reads the free-text description and creates concrete math expressions
 
 ### Layout structure (do not change)
 
 - Page: `w-[210mm] h-[297mm]` white container
-- Footer: absolute bottom, `h-[80mm]`, with white-to-transparent fade on top
+- Footer: absolute bottom, `h-[80mm]`, with white-to-transparent fade on top. **No `overflow-hidden`** on footer container (causes 1px hairline artifact in PDF)
 - Footer bubble: absolute `bottom-[12mm]`, pill-shaped with semi-transparent white bg
 - Content area: `px-[12mm] pt-[8mm] pb-[65mm]` flex column
 - Header: hero image `w-[48%]` + title block centered
@@ -135,7 +136,7 @@ This is the base visual design for all space-themed worksheets. When generating
 
 When generating HTML worksheets:
 
-- **Always read** `src/templates/space-base.html` first and use it as the structural reference
+- **Always read** `src/templates/space-base.html` (structure) and `src/examples/space-worksheet.html` (finished output) before generating
 - **Page size:** A4 = 210mm × 297mm
 - **CSS:** Uses Tailwind CDN in the HTML `<script>` tag (not the compiled CSS file)
 - **Page breaks:** Use `break-after: page` between pages
@@ -163,10 +164,9 @@ Puppeteer settings for A4 worksheets:
 
 ## Workflow
 
-1. User describes the math task idea to Claude
-2. Claude creates/updates a JSON config in `tasks/`
-3. Claude runs `node src/scripts/generate-problems.mjs tasks/<task>.json` to get concrete problems
-4. Claude generates HTML file(s) in `output/html/` using the problems and Tailwind classes
-5. Run `npm run build:css` to compile CSS
-6. Run `npm run pdf -- output/html/<file>.html` to create PDF
-7. Preview with `npm run preview` at localhost:3000
+1. User describes the math task idea (or runs `/new-doc`)
+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