fix(worksheets): Add operator to preview query key and update UI labels

Two fixes:

1. **Preview cache invalidation**: Add formState.operator to WorksheetPreview
   query key so preview refreshes when switching between addition/subtraction/mixed

2. **Dynamic UI labels**: Update "Carry Boxes" label to show:
   - "Carry Boxes" for addition mode
   - "Borrow Boxes" for subtraction mode
   - "Carry/Borrow Boxes" for mixed mode

   Description text also updates to match operator type.

Scaffolding for borrowing:
- Borrow boxes (diagonal split boxes showing source → destination)
- Displayed FROM higher place TO lower place (opposite of carries)
- Same underlying field (showCarryBoxes) controls both

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-07 22:34:27 -06:00
parent d93dfac461
commit 97ddc7ee67
2 changed files with 16 additions and 2 deletions

View File

@ -2241,8 +2241,20 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
<ToggleOption
checked={formState.showCarryBoxes ?? true}
onChange={(checked) => onChange({ showCarryBoxes: checked })}
label="Carry Boxes"
description="Help students track regrouping during addition"
label={
formState.operator === 'subtraction'
? 'Borrow Boxes'
: formState.operator === 'mixed'
? 'Carry/Borrow Boxes'
: 'Carry Boxes'
}
description={
formState.operator === 'subtraction'
? 'Help students track borrowing during subtraction'
: formState.operator === 'mixed'
? 'Help students track regrouping (carrying in addition, borrowing in subtraction)'
: 'Help students track regrouping during addition'
}
/>
<ToggleOption

View File

@ -92,6 +92,8 @@ function PreviewContent({ formState, initialData }: WorksheetPreviewProps) {
// V4: Problem size (CRITICAL - affects column layout and problem generation)
formState.digitRange?.min,
formState.digitRange?.max,
// V4: Operator selection (addition, subtraction, or mixed)
formState.operator,
// V4: Mode and conditional display settings
formState.mode,
formState.displayRules, // Smart mode: conditional scaffolding