fix: make borrow notation destination boxes full height

- Updated destination borrow boxes to 95% cell height (was 50%)
- Increased width to 45% (was 40%) for better visibility
- Added showBorrowNotation to DisplayOptionsPreview component
- Fixed example route to pass showBorrowNotation parameter
- Boxes now extend nearly full height of digit cell for kids to write big

🤖 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

@@ -8,18 +8,18 @@
 // This ensures blog post examples use the EXACT same rendering as the live UI preview,
 // maintaining consistency between what users see in documentation vs. the actual tool.
 
-import { type NextRequest, NextResponse } from 'next/server'
 import { execSync } from 'child_process'
+import { type NextRequest, NextResponse } from 'next/server'
 import {
   generateProblems,
   generateSubtractionProblems,
 } from '@/app/create/worksheets/addition/problemGenerator'
+import type { WorksheetOperator } from '@/app/create/worksheets/addition/types'
 import {
-  generateTypstHelpers,
   generateProblemStackFunction,
   generateSubtractionProblemStackFunction,
+  generateTypstHelpers,
 } from '@/app/create/worksheets/addition/typstHelpers'
-import type { WorksheetOperator } from '@/app/create/worksheets/addition/types'
 
 export const dynamic = 'force-dynamic'
 
@@ -31,6 +31,7 @@ interface ExampleRequest {
   showCellBorder?: boolean
   showTenFrames?: boolean
   showTenFramesForAll?: boolean
+  showBorrowNotation?: boolean
   fontSize?: number
   operator?: WorksheetOperator
   // For addition
@@ -57,6 +58,7 @@ function generateExampleTypst(config: ExampleRequest): string {
   const showNumbers = config.showProblemNumbers ?? false
   const showTenFrames = config.showTenFrames ?? false
   const showTenFramesForAll = config.showTenFramesForAll ?? false
+  const showBorrowNotation = config.showBorrowNotation ?? false
 
   if (operator === 'addition') {
     // Use custom addends if provided, otherwise generate a problem
@@ -125,6 +127,7 @@ ${generateProblemStackFunction(cellSize, 3)}
 #let show-numbers = ${showNumbers ? 'true' : 'false'}
 #let show-ten-frames = ${showTenFrames ? 'true' : 'false'}
 #let show-ten-frames-for-all = ${showTenFramesForAll ? 'true' : 'false'}
+#let show-borrow-notation = ${showBorrowNotation ? 'true' : 'false'}
 
 ${generateTypstHelpers(cellSize)}
 
@@ -134,7 +137,7 @@ ${generateSubtractionProblemStackFunction(cellSize, 3)}
 #let subtrahend = ${subtrahend}
 
 #align(center + horizon)[
-  #subtraction-problem-stack(minuend, subtrahend, if show-numbers { 0 } else { none }, show-borrows, show-answers, show-colors, show-ten-frames, show-numbers, false)
+  #subtraction-problem-stack(minuend, subtrahend, if show-numbers { 0 } else { none }, show-borrows, show-answers, show-colors, show-ten-frames, show-numbers, show-borrow-notation)
 ]
 `
   }

apps/web/src/app/create/worksheets/addition/components/DisplayOptionsPreview.tsx

@@ -139,6 +139,7 @@ async function fetchExample(options: {
   showCellBorder: boolean
   showTenFrames: boolean
   showTenFramesForAll: boolean
+  showBorrowNotation: boolean
   operator: 'addition' | 'subtraction' | 'mixed'
   addend1?: number
   addend2?: number
@@ -178,6 +179,7 @@ export function DisplayOptionsPreview({ formState }: DisplayOptionsPreviewProps)
       showCellBorder: formState.showCellBorder ?? true,
       showTenFrames: formState.showTenFrames ?? false,
       showTenFramesForAll: formState.showTenFramesForAll ?? false,
+      showBorrowNotation: formState.showBorrowNotation ?? false,
       operator,
     }
 
@@ -214,6 +216,7 @@ export function DisplayOptionsPreview({ formState }: DisplayOptionsPreviewProps)
     formState.showCellBorder,
     formState.showTenFrames,
     formState.showTenFramesForAll,
+    formState.showBorrowNotation,
     formState.operator,
     operands,
   ])

apps/web/src/app/create/worksheets/addition/typstHelpers.ts

@@ -493,16 +493,16 @@ export function generateSubtractionProblemStackFunction(
         // Show digit if within minuend's actual range
         if i <= m-highest {
           if show-borrow-notation and needs-borrow {
-            // Show digit with small scratch box to the left for modified value (e.g., "12")
+            // Show digit with scratch box to the left for modified value (e.g., "12")
             (box(width: ${cellSizeIn}, height: ${cellSizeIn}, fill: fill-color)[
               #align(center + horizon)[
                 #stack(
                   dir: ltr,
                   spacing: 3pt,
-                  // Small dotted box for student to write modified digit
+                  // Dotted box for student to write modified digit (same height as cell)
                   box(
-                    width: ${cellSizeIn} * 0.4,
-                    height: ${cellSizeIn} * 0.5,
+                    width: ${cellSizeIn} * 0.45,
+                    height: ${cellSizeIn} * 0.95,
                     stroke: (dash: "dotted", thickness: 1pt, paint: gray)
                   )[],
                   // Original digit