refactor: expand query key to include display settings

Add display-related fields to WorksheetPreview cache key:
- showCarryBoxes
- showAnswerBoxes
- showPlaceValueColors
- showProblemNumbers
- showCellBorder
- showTenFrames
- showTenFramesForAll

This ensures the preview refreshes when any display setting changes,
preventing stale previews from being shown when toggling visibility options.

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

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

apps/web/.claude/settings.local.json

@@ -33,7 +33,8 @@
       "Bash(git commit -m \"$(cat <<''EOF''\ndocs: add comprehensive merge conflict resolution guide\n\nAdd detailed guide for intelligent diff3-style merge conflict resolution:\n- Explanation of diff3 format (OURS, BASE, THEIRS)\n- 5 resolution patterns with examples (Compatible, Redundant, Conflicting, Delete vs Modify, Rename + References)\n- zdiff3 modern alternative\n- Semantic merge concepts\n- Best practices and anti-patterns\n- Debugging guide for failed resolutions\n- Quick reference checklist\n\nThis guide helps resolve merge conflicts intelligently by understanding the intent of both sides'' changes.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")",
       "Bash(git commit -m \"$(cat <<''EOF''\ndocs: add merge conflict resolution section to CLAUDE.md\n\nAdd quick reference section for merge conflict resolution:\n- Link to comprehensive guide (.claude/MERGE_CONFLICT_RESOLUTION.md)\n- Enable zdiff3 command\n- Quick resolution strategy summary\n- Reminder to test thoroughly after resolution\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")",
       "Bash(git commit -m \"$(cat <<''EOF''\nchore: add auto-approvals for development commands\n\nAdd auto-approvals for common development workflow commands:\n- npm run type-check\n- npm run pre-commit  \n- git add\n- npm info\n- npx tsc\n\nThese commands are safe to run automatically during development and code quality checks.\n\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\n\nCo-Authored-By: Claude <noreply@anthropic.com>\nEOF\n)\")",
-      "Bash(git commit:*)"
+      "Bash(git commit:*)",
+      "Bash(/tmp/worksheet-preview-new.tsx)"
     ],
     "deny": [],
     "ask": []

apps/web/src/app/create/worksheets/components/WorksheetPreview.tsx

@@ -96,7 +96,16 @@ function PreviewContent({
     formState.pAnyStart,
     formState.pAllStart,
     formState.interpolate,
+    formState.showCarryBoxes,
+    formState.showAnswerBoxes,
+    formState.showPlaceValueColors,
+    formState.showProblemNumbers,
+    formState.showCellBorder,
+    formState.showTenFrames,
+    formState.showTenFramesForAll,
     formState.seed, // Include seed to bust cache when problem set regenerates
+    // Note: fontSize, date, rows, total intentionally excluded
+    // (rows and total are derived from primary state)
   ] as const
 
   // Fetch initial batch to get total page count and first few pages