feat(worksheets): add customizable operands to preview

Allow users to customize the numbers in the display options preview:
- Add addend1/addend2 parameters to example API route
- Support custom operands or generated defaults
- Enable testing specific cases like regrouping scenarios

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

apps/web/src/app/api/create/worksheets/addition/example/route.ts

@@ -19,6 +19,8 @@ interface ExampleRequest {
   showTenFrames?: boolean
   showTenFramesForAll?: boolean
   fontSize?: number
+  addend1?: number
+  addend2?: number
 }
 
 /**
@@ -26,9 +28,20 @@ interface ExampleRequest {
  * Uses the EXACT same Typst structure as the full worksheet generator
  */
 function generateExampleTypst(config: ExampleRequest): string {
-  // Generate a simple 2-digit + 2-digit problem with carries
+  // Use custom addends if provided, otherwise generate a problem
-  const problems = generateProblems(1, 0.8, 0.5, false, 12345)
+  let a: number
-  const problem = problems[0]
+  let b: number
+
+  if (config.addend1 !== undefined && config.addend2 !== undefined) {
+    a = config.addend1
+    b = config.addend2
+  } else {
+    // Generate a simple 2-digit + 2-digit problem with carries
+    const problems = generateProblems(1, 0.8, 0.5, false, 12345)
+    const problem = problems[0]
+    a = problem.a
+    b = problem.b
+  }
 
   const fontSize = config.fontSize || 14
   const cellSize = 0.35 // Compact cell size for examples
@@ -57,8 +70,8 @@ ${generateTypstHelpers(cellSize)}
 
 ${generateProblemStackFunction(cellSize)}
 
-#let a = ${problem.a}
+#let a = ${a}
-#let b = ${problem.b}
+#let b = ${b}
 #let aT = calc.floor(calc.rem(a, 100) / 10)
 #let aO = calc.rem(a, 10)
 #let bT = calc.floor(calc.rem(b, 100) / 10)

apps/web/src/app/create/worksheets/addition/page.tsx

@@ -5,7 +5,6 @@ import { parseAdditionConfig, defaultAdditionConfig } from '@/app/create/workshe
 import { AdditionWorksheetClient } from './components/AdditionWorksheetClient'
 import type { WorksheetFormState } from './types'
 import { generateWorksheetPreview } from './generatePreview'
-import { generateDisplayExamples } from './generateExamples'
 
 /**
  * Get current date formatted as "Month Day, Year"
@@ -86,17 +85,11 @@ export default async function AdditionWorksheetPage() {
   const previewResult = generateWorksheetPreview(fullConfig)
   console.log('[SSR] Preview generation complete:', previewResult.success ? 'success' : 'failed')
 
-  // Generate visual examples for display options
+  // Pass settings and preview to client
-  console.log('[SSR] Generating display option examples...')
-  const displayExamples = generateDisplayExamples()
-  console.log('[SSR] Display examples generation complete:', displayExamples ? 'success' : 'failed')
-
-  // Pass settings, preview, and examples to client
   return (
     <AdditionWorksheetClient
       initialSettings={initialSettings}
       initialPreview={previewResult.success ? previewResult.pages : undefined}
-      displayExamples={displayExamples || undefined}
     />
   )
 }