- Add bottomOffset/rightOffset to MyAbacusContext for virtual keyboard avoidance
- NumericKeypad sets offsets when mounted (48px bottom, 100px right)
- Floating abacus repositions above/beside keyboard in portrait/landscape
- PracticeSubNav: fix horizontal overflow with minWidth: 0 on flex children
- SessionProgressIndicator: allow proper flex shrinking
- ActiveSession: reduce padding/gaps, use flex layout to fill available space
- PracticeClient: use fixed positioning with proper insets for all orientations
- Portrait: bottom 48px for keypad
- Landscape: right 100px for keypad
- Desktop: no offsets needed
- Prevent viewport scrolling during practice sessions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Extract standalone DecompositionContext from TutorialContext
- Create reusable DecompositionDisplay and ReasonTooltip components
- Wire prefix-sum "Get Help" button to progressive help system (L1→L2→L3)
- Sync abacus interactions with decomposition step highlighting
- Add currentStepIndex tracking in PracticeHelpPanel
- Make HelpAbacus interactive at L3 to update decomposition display
- Update documentation linking decomposition components
The progressive help system now:
- L1: Shows coach hint when user clicks "Get Help" after typing prefix sum
- L2: Shows interactive decomposition with hoverable explanations
- L3: Shows visual abacus with arrows, synced with decomposition highlighting
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement complete daily practice session system with:
**Practice Components:**
- StudentSelector: Select which student is practicing
- ProgressDashboard: Show student's current level and progress
- PlanReview: Review and approve generated session plan
- ActiveSession: Main practice UI with three-part structure
- SessionSummary: Show results after session completion
- NumericKeypad: Touch-friendly number input for mobile
- VerticalProblem: Columnar problem display
**Session Structure:**
- Part 1 (Abacus): Physical abacus practice, vertical format
- Part 2 (Visualization): Mental math visualizing beads
- Part 3 (Linear): Mental math with sentence format
**Infrastructure:**
- Database schemas for curriculum, skills, sessions
- Session planner with skill-based problem generation
- React Query hooks for session management
- Consolidated device capability detection hooks
- API routes for curriculum and session management
**Problem Generation:**
- ActiveSession now uses actual skill-based algorithm
- Problems generated with appropriate skills constraints
- Storybook stories use real problem generation
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add runtime crop override system for live DevCropTool updates without page reload
- Fix SVG letterboxing in DevCropTool coordinate conversion (screenToSvg/svgToScreen)
- Hide all UI (nav, GameInfoPanel) during crop mode for unobstructed drawing
- Show debug overlay (leftover/crop rectangles) even when no custom crop defined
- Use full map bounds as implicit crop when no custom crop exists
- Ensure map always fits within leftover area (not under UI elements)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add detailed documentation for the advanced precision control system that makes sub-pixel regions (Gibraltar 0.08px, Jersey 0.82px) clickable:
- PRECISION_CONTROLS.md: Complete technical deep-dive
- Automatic cursor dampening (3-25% speed based on region size)
- Auto super-zoom (up to 60x) after 500ms hover on sub-pixel regions
- Quick-escape mechanism (>50px/frame cancels all precision features)
- Crosshair accuracy fix ensuring dampened cursor matches hover highlighting
- Configuration constants, debug logging, performance considerations
- know-your-world/README.md: Game overview and feature documentation
- Game modes, maps, difficulty levels, study mode
- Visual features, technical architecture, component structure
- Development guide, troubleshooting, configuration
- Updated documentation graph:
- Main README → Arcade Games → Know Your World → Precision Controls
- All documentation now reachable from root README
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Created worksheet README and updated root README to ensure all problem
generation documentation is discoverable via linked path.
**Documentation Graph:**
```
README.md (root)
→ apps/web/src/app/create/worksheets/README.md
→ PROBLEM_GENERATION_ARCHITECTURE.md
→ USER_WARNING_IMPROVEMENTS.md
→ .claude/PROBLEM_GENERATION.md
```
**New Files:**
- `apps/web/src/app/create/worksheets/README.md` - Overview of worksheet
system with links to all documentation
**Updated Files:**
- `README.md` - Added "Additional Documentation" section with worksheet
generator and abacus react component links
- `.claude/CLAUDE.md` - Added "Documentation Graph Requirement" at top
stating ALL docs must be reachable from root README
**Why This Matters:**
- Documentation that isn't linked gets forgotten and becomes stale
- New developers start at root README and follow links
- Ensures docs stay discoverable and maintained
- Now enforced as a critical requirement in Claude Code instructions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Problem:**
- player-ownership.ts imported drizzle-orm and @/db at top level
- When RoomMemoryPairsProvider imported client-safe utilities, Webpack bundled ALL imports including database code
- This caused hydration error: "The 'original' argument must be of type Function"
- Node.js util.promisify was being called in browser context
**Solution:**
1. Created player-ownership.client.ts with ONLY client-safe utilities
- No database imports
- Safe to import from 'use client' components
- Contains: buildPlayerOwnershipFromRoomData(), buildPlayerMetadata(), helper functions
2. Updated player-ownership.ts to re-export client utilities and add server-only functions
- Re-exports everything from .client.ts
- Adds buildPlayerOwnershipMap() (async, database-backed)
- Safe to import from server components/API routes
3. Updated RoomMemoryPairsProvider to import from .client.ts
**Result:**
- No more hydration errors on /arcade/room
- Client bundle doesn't include database code
- Server code can still use both client and server utilities
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented a new complement arithmetic game with three distinct modes:
Practice Mode (Linear Track):
- Race against AI opponents on a straight track
- Fixed race goal with finish line
- Traditional racing format with visual progress indicators
Endless Circuit (Circular Track):
- Infinite laps around an oval track
- Continuous gameplay with lap tracking
- AI racers with personality-driven commentary system
Steam Sprint (Train Journey):
- 60-second timed challenge with momentum-based gameplay
- SVG railroad track with dynamic curved paths that vary by route
- Passenger delivery system with station stops
- Momentum decay mechanic balanced by skill level
- Animated sky gradient with time-of-day progression (dawn to night)
- Route progression system with 10 themed routes
- Enhanced pressure gauge and visual effects (steam, coal particles)
- Geographic landmarks themed to each route
Core Features:
- Adaptive difficulty system that learns user performance patterns
- Real-time feedback based on speed and accuracy
- Comprehensive state management with React Context
- Multiple track visualization systems (linear, circular, SVG-based)
- AI personality system with dynamic commentary
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Configure semantic-release for simultaneous publishing to both registries
- Update GitHub Actions workflow with dual authentication setup
- Enhanced documentation across all relevant files
- Package now publishes to both npm and GitHub Packages automatically
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update CONTRIBUTING.md with detailed abacus-react package publishing workflow
- Add prominent NPM publishing section to root README
- Create .claude/AUTOMATED_WORKFLOWS.md for future Claude sessions
- Document commit format requirements: feat(abacus-react): for package releases
- Include troubleshooting info and current status (awaiting NPM_TOKEN)
This ensures future Claude sessions can automatically discover and use the
package publishing workflow without requiring explanation.
- Add comprehensive GitHub Actions workflow for automated Storybook deployments
- Deploy apps/web Storybook to gh-pages/web subdirectory
- Deploy packages/abacus-react Storybook to gh-pages/abacus-react subdirectory
- Create beautiful landing page with navigation to both Storybooks
- Add Component Documentation section to README with direct links
- Support both PR previews and main branch deployments
- Optimize build process with proper dependency management
Replace web print support with professional PDF printing workflow:
- Generate companion PDF automatically with each web flashcard page
- Intercept print attempts (Ctrl+P/Cmd+P, browser print menu)
- Show informative modal explaining PDF advantages
- Open high-quality PDF in new tab for printing
- Include cut marks, registration marks, and proper card layout
- Remove misleading web print CSS and documentation claims
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Document single and two-player matching game modes
- Explain medal system, grid sizes, and scoring mechanics
- Detail technical features like responsive design and accessibility
- Add interactive games section showcasing all three challenge modes
- Update web features list with complete matching game capabilities
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Hero Section Transformation
- Create eye-catching header with emojis and engaging tagline
- Add large colorful soroban SVG (987,654,321) as main hero image
- Write compelling copy focusing on visual beauty and learning effectiveness
- Transform from dry description to exciting, benefit-focused introduction
## Visual Gallery Addition
- Generate 3 spectacular hero SVGs using different color palettes:
* Nature palette (1,234,567) - earth tones for focused learning
* Colorblind-friendly (987,654,321) - universal accessibility
* Mnemonic colors (555,666,777) - memory-optimized hues
- Create organized gallery showcasing the visual diversity
- Add poetic descriptions emphasizing precision and thoughtful design
## Content Strategy
- Lead with emotional impact: "Master the Ancient Art of Mental Math"
- Use powerful action words: "addictive", "ninja", "adventure"
- Highlight unique value propositions with fire emoji callouts
- Balance ancient wisdom with modern technology appeal
- Make learning sound exciting rather than educational
## GitHub Appeal
- Designed to grab attention in repository listings
- Colorful visuals create immediate positive impression
- Professional yet approachable tone appeals to educators and learners
- Clear value proposition for different user types
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Transform README from simple PDF generator description to comprehensive
documentation highlighting interactive web flashcards, quiz modes,
sorting challenges, multiple output formats, APIs, and educational features.
Major additions:
- Interactive web flashcards with quiz modes and sorting challenges
- Multiple output formats (PDF, PNG, SVG, HTML)
- REST API and Node.js integration documentation
- Comprehensive test coverage details
- Enhanced examples and feature categorization
- Updated project structure reflecting actual codebase
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create templates/single-card.typ for individual card rendering
- Includes local copy of create-colored-numeral function
- Supports transparent backgrounds and exact card dimensions
- Used by PNG/SVG generation to avoid PDF intermediate
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 'make examples' to regenerate README images
- Add 'make verify-examples' for CI verification
- Create GitHub Action to verify examples are up to date
- Improve generate_examples.py with better error handling
- Add update-examples.sh convenience script
- Document development workflow in README
This ensures README examples always match the actual code output.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Generate examples showing cutting guides and registration marks
- Add 'Printing Features' section to README
- Show full-page cutting guides for accurate card separation
- Include example with both cutting guides and registration marks
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Create generate_examples.py script to convert PDFs to PNGs
- Generate example images showcasing all major features
- Add image gallery to README showing:
- Basic soroban/numeral pairs
- Color schemes and colored numerals
- Different bead shapes
- Various layouts and options
- Include front/back examples for double-sided cards
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Document all new features (colors, shapes, scaling, skip counting)
- Add Node.js/TypeScript integration section
- Update command-line options documentation
- Include API usage examples
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Clarify page ordering with detailed comments (fronts on odd, backs on even)
- Add PDF metadata for better document properties
- Improve qpdf linearization with object stream preservation
- Document duplex printing behavior in README
- Ensure consistent front/back pairing with explicit pagebreaks
The PDF now clearly alternates between soroban diagrams (odd pages)
and numerals (even pages) for reliable duplex printing with long-edge
binding.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Thomas Hallock