refactor: simplify borrowed 10s box UI and add place value colors

- Convert "Borrowed 10s Box" from sub-option to peer toggle for clarity
- Remove confusing parent/child relationship with "Borrow Boxes"
- Fix preview not updating when toggling borrowed 10s box (default was false, should be true)
- Add place value color from source digit to borrowed 10s box background
- Fix missing operator field in defaultAdditionConfig and V3→V4 migration
- Simplify description to "Box for adding 10 to borrowing digit"

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

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

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

@@ -2361,16 +2361,16 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
                           ? 'Help students track regrouping (carrying in addition, borrowing in subtraction)'
                           : 'Help students track regrouping during addition'
                     }
-                  >
+                  />
-                    {(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
+
-                      <SubOption
+                  {(formState.operator === 'subtraction' || formState.operator === 'mixed') && (
-                        checked={!(formState.showBorrowNotation ?? true)}
+                    <ToggleOption
-                        onChange={(checked) => onChange({ showBorrowNotation: !checked })}
+                      checked={formState.showBorrowNotation ?? true}
-                        label="Hide Borrowed 10s Box"
+                      onChange={(checked) => onChange({ showBorrowNotation: checked })}
-                        parentEnabled={formState.showCarryBoxes ?? true}
+                      label="Borrowed 10s Box"
-                      />
+                      description="Box for adding 10 to borrowing digit"
-                    )}
+                    />
-                  </ToggleOption>
+                  )}
 
                   <ToggleOption
                     checked={formState.showTenFrames ?? false}

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

@@ -179,7 +179,7 @@ export function DisplayOptionsPreview({ formState }: DisplayOptionsPreviewProps)
       showCellBorder: formState.showCellBorder ?? true,
       showTenFrames: formState.showTenFrames ?? false,
       showTenFramesForAll: formState.showTenFramesForAll ?? false,
-      showBorrowNotation: formState.showBorrowNotation ?? false,
+      showBorrowNotation: formState.showBorrowNotation ?? true,
       operator,
     }
 

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

@@ -109,7 +109,7 @@ function generatePageTypst(
         showTenFrames: config.showTenFrames,
         showProblemNumbers: config.showProblemNumbers,
         showCellBorder: config.showCellBorder,
-        showBorrowNotation: 'showBorrowNotation' in config ? config.showBorrowNotation : false,
+        showBorrowNotation: 'showBorrowNotation' in config ? config.showBorrowNotation : true,
       }
     }
   })

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

@@ -467,6 +467,13 @@ export function generateSubtractionProblemStackFunction(
         if i <= m-highest {
           if show-borrow-notation and column-has-borrow {
             if needs-borrow {
+              // Get the color from the place we're borrowing FROM (one position to the left, i.e., i+1)
+              let borrow-source-color = if show-colors and (i + 1) < place-colors.len() {
+                place-colors.at(i + 1)
+              } else {
+                color-none
+              }
+
               // Show digit with visible scratch box to the left for modified value (e.g., "12")
               (box(width: ${cellSizeIn}, height: ${cellSizeIn}, fill: fill-color)[
                 #align(center + horizon)[
@@ -474,10 +481,12 @@ export function generateSubtractionProblemStackFunction(
                     dir: ltr,
                     spacing: 3pt,
                     // Visible dotted box for student to write modified digit (same height as cell)
+                    // Background color is from the place we're borrowing FROM
                     box(
                       width: ${cellSizeIn} * 0.45,
                       height: ${cellSizeIn} * 0.95,
-                      stroke: (dash: "dotted", thickness: 1pt, paint: gray)
+                      stroke: (dash: "dotted", thickness: 1pt, paint: gray),
+                      fill: borrow-source-color
                     )[],
                     // Original digit
                     text(size: ${cellSizePt.toFixed(1)}pt, font: "New Computer Modern Math")[#str(digit)]

apps/web/src/app/create/worksheets/config-schemas.ts

@@ -367,6 +367,7 @@ export const defaultAdditionConfig: AdditionConfigV4Smart = {
   orientation: 'landscape',
   name: '',
   digitRange: { min: 2, max: 2 }, // V4: Default to 2-digit problems (backward compatible)
+  operator: 'addition',
   pAnyStart: 0.25,
   pAllStart: 0,
   interpolate: true,
@@ -471,7 +472,7 @@ function migrateAdditionV2toV3(v2: AdditionConfigV2): AdditionConfigV3 {
  * Adds digitRange field with default of { min: 2, max: 2 } for backward compatibility
  */
 function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
-  // V3 configs didn't have digitRange, so default to 2-digit problems
+  // V3 configs didn't have digitRange or operator, so default to 2-digit addition problems
   const baseFields = {
     version: 4 as const,
     problemsPerPage: v3.problemsPerPage,
@@ -481,6 +482,7 @@ function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
     name: v3.name,
     fontSize: v3.fontSize,
     digitRange: { min: 2, max: 2 }, // V4: Default to 2-digit for backward compatibility
+    operator: 'addition' as const, // V4: Default to addition for backward compatibility
     pAnyStart: v3.pAnyStart,
     pAllStart: v3.pAllStart,
     interpolate: v3.interpolate,
@@ -504,6 +506,7 @@ function migrateAdditionV3toV4(v3: AdditionConfigV3): AdditionConfigV4 {
       showProblemNumbers: v3.showProblemNumbers,
       showCellBorder: v3.showCellBorder,
       showTenFramesForAll: v3.showTenFramesForAll,
+      showBorrowNotation: true, // V4: Default to true for backward compatibility
       manualPreset: v3.manualPreset,
     }
   }