- Define semantic color theme in App.css using @theme directive
- Primary (blue), Success (green), Warning (amber), Danger (red)
- Info (cyan), Accent (purple), Secondary (orange), Tertiary (teal)
- Semantic colors reference Tailwind color variables via var()
- Media query-based dark mode for canvas colors
- Migrate all 16 components from direct Tailwind colors to semantic names
- Create cssVariables.ts utility for Konva canvas color access
- Update KonvaComponents to use CSS variables dynamically
- Replace @apply with CSS variables in index.css for v4 compatibility
- Remove unused designTokens.ts file
- Improve light mode contrast with gray-300 app background
- Adjust canvas and info box backgrounds to gray-200
Benefits:
- Easy theme customization by updating App.css @theme block
- Consistent semantic naming across all components
- Proper dark mode support via media queries
- No visual regressions, all colors maintained
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented proper time calculation matching the Brother app algorithm:
- 150ms per stitch + 3000ms startup time per color block
- Calculate total and elapsed time by summing across color blocks
- This fixes the "999 seconds" issue by calculating time accurately
Created timeCalculation utility with:
- convertStitchesToMinutes: Convert stitches to minutes using PP1 formula
- calculatePatternTime: Calculate total/elapsed time per color blocks
Updated ProgressMonitor to show:
- Total Time (calculated from all color blocks)
- Elapsed Time / Total Time (based on current stitch position)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Detects if the browser supports Web Bluetooth API and displays an
informative warning when unsupported. Provides users with clear
options: use a compatible browser or download the desktop app.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Detects if the browser supports Web Bluetooth API and displays an
informative warning when unsupported. Provides users with clear
options: use a compatible browser or download the desktop app.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Moved embroidery format-related code from utils to new formats folder:
Structure:
- src/formats/pen/ - PEN format encoding and parsing
- encoder.ts (was utils/penEncoder.ts)
- encoder.test.ts (was utils/penEncoder.test.ts)
- parser.ts (was utils/penParser.ts)
- PEN constants moved inline to encoder.ts
- src/formats/import/ - Pattern import/conversion (currently PES)
- worker.ts (was workers/patternConverter.worker.ts)
- client.ts (was utils/patternConverterClient.ts)
- pesImporter.ts (was utils/pystitchConverter.ts)
- pyodideLoader.ts (was utils/pyodideLoader.ts)
- constants.ts (PyStitch/pyembroidery constants)
Benefits:
- Better separation of concerns
- PEN encoder is co-located with PEN parser
- Import logic is in one place and extensible for other formats
- Removed utils/embroideryConstants.ts - split into appropriate locations
- Updated all 18 import references across the codebase
All tests passing, build successful.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Enhanced penEncoder test suite with byte-level sequence verification:
- Added helper functions to decode PEN bytes for detailed assertions
- Replaced length-only tests with precise operation order verification
- Added tests for color change sequences (same position and with jump)
- Added test for color change followed by explicit JUMP command
- Added test for long jump sequences with lock stitches
- Verified exact placement of lock stitches, cuts, jumps, and color markers
All 27 tests passing with comprehensive coverage of PEN format encoding.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Extract PEN encoding logic into separate testable module (penEncoder.ts)
- Implement 24 comprehensive tests covering:
- Position encoding and coordinate shifting
- Lock stitch direction calculation (forward/backward)
- Lock stitch generation with rotation
- Full PEN encoding with color changes, jumps, and bounds
- Edge cases (empty arrays, single stitches, TRIM flags)
- Setup vitest for testing
- Refactor pattern converter worker to use extracted penEncoder module
- Fix bounds calculation to include non-MOVE stitches (not just STITCH)
- Remove duplicate function definitions from worker
- Add test scripts: npm run test, npm run test:ui, npm run test:run
All tests passing (24/24) and build successful.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Fix PenData import to use correct source (types/machine instead of penParser)
- Add explicit return type annotations for map callbacks in PatternCanvas
- Add parentheses around arrow function parameters to satisfy linter
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Change let to const for variables that are never reassigned
- Fix React Hook dependency array warnings in useBrotherMachine
- Remove unused refreshPatternInfo dependency from uploadPattern
- Add missing refreshPatternInfo dependency to startMaskTrace
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add lock stitch rotation based on movement direction (matches C# PesxToPen.cs)
- Calculate direction by accumulating vectors up to 5 stitches or 8.0 units
- Scale direction vectors from magnitude 8.0 down to 0.4 for proper lock stitch size
- Generate 8 lock stitches (not 4) alternating between +dir and -dir
- Remove PyStitch duplicate position stitches during color changes
- Add long jump detection with automatic lock stitches and cut commands
- Improve color change sequence: finish locks, cut, jump, COLOR_END, start locks
- Parse PEN data to get actual stitches for rendering (fixes jump stitch colors)
- Add encodeStitchPosition() helper function for coordinate encoding
- Improve pattern info refresh timing after mask trace
- Add detailed logging for PEN encoding and pattern info responses
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit addresses multiple critical issues in pattern rendering and coordinate handling:
1. Fixed Y-axis offset accumulation in penParser.ts
- Corrected sign extension logic for 16-bit signed coordinates
- Changed to interpret full 16-bit value as signed before shifting
- Prevents coordinate drift and offset accumulation
2. Fixed color assignment for tack stitches in patternConverter.worker.ts
- Added detection for small finishing stitches after COLOR_CHANGE commands
- Assigns tack stitches to correct (previous) color instead of new color
- Uses conservative pattern matching (< 1.0 unit, followed by JUMP)
3. Made jump stitches visible in pattern preview (KonvaComponents.tsx)
- Render jump stitches in thread color instead of gray
- Use dashed pattern [8, 4] to distinguish from regular stitches
- Set appropriate opacity (0.8 completed, 0.5 not completed)
- Fixed critical bug: include previous position in jump groups to create proper line segments
4. Updated konvaRenderers.ts for consistency
- Applied same jump stitch rendering logic
- Ensures consistent behavior across rendering methods
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Move Pyodide/PyStitch pattern conversion to a dedicated Web Worker for
non-blocking UI performance. Pyodide now loads in the background on app
startup with real-time progress indicator showing download and initialization
status.
Key changes:
- Create patternConverter.worker.ts with full PES to PEN conversion logic
- Add patternConverterClient.ts singleton for worker management
- Implement progress tracking (0-100%) with step descriptions
- Add inline progress bar in FileUpload component with contextual messaging
- Configure COEP headers for Electron to support Web Workers
- Pass dynamic asset URLs to worker for file:// protocol support
- Update UIStore with progress state management
- Simplify pystitchConverter.ts to delegate to worker client
Benefits:
- Truly non-blocking UI (heavy Python/WASM runs off main thread)
- Real progress feedback during 15MB Pyodide download
- Works in both browser and Electron (dev and production)
- Faster app startup perception with background loading
- Better UX with "waiting" state if user clicks before ready
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove unused imports and variables across multiple files
- Fix TypeScript 'any' type annotations with proper types
- Fix React setState in effect warnings
- Create shared embroidery constants file (embroideryConstants.ts)
- Replace magic number 0x10 with named MOVE constant
- Map PyStitch constants to JS constants using registerJsModule
- Ensure PEN encoding constants remain separate and valid
All build and lint checks now pass successfully.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Correct the encoding of TRIM commands to use the proper bit flag (bit 1)
instead of incorrectly treating them the same as JUMP commands (bit 0).
The PEN format uses two separate flags in the Y-coordinate low byte:
- Bit 0 (0x01): FEED_DATA - Jump stitch (move without stitching)
- Bit 1 (0x02): CUT_DATA - Trim/cut thread command
Previously, both JUMP and TRIM commands were encoded with bit 0, which
prevented the machine from distinguishing between jumps and thread cuts.
Changes:
- Add PEN_CUT_DATA constant (0x02) for TRIM commands
- Update encoding logic to set bit 0 for JUMP (cmd=1)
- Update encoding logic to set bit 1 for TRIM (cmd=2)
- Add detailed comments explaining the PEN format flags
- Document that Y-coordinate flags can be combined
- Document that X-coordinate flags are mutually exclusive
This fix ensures thread cutting happens when intended, matching the
behavior of the original C# implementation in the Asura app.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Enhance the error handling system with detailed descriptions and step-by-step
solutions for all Brother PP1 protocol error codes. This provides users with
clear, actionable guidance when machine errors occur.
Added detailed error information for:
- Thread errors (0x00, 0x60-0x63): Upper/lower thread issues with rethreading steps
- Safety errors (0x01-0x03): Safety device activations and bobbin issues
- Restart errors (0x10-0x1C): System malfunctions with specific error codes (M519411-M51941C)
- Mechanical errors (0x20-0x21): Needle plate and thread lever positioning
- Hoop errors (0x70-0x72): Hoop detection and initialization procedures
- Maintenance errors (0x80, 0x98): Regular inspection and settings constraints
Each error now includes:
- Clear title describing the issue
- Detailed description of what the error means
- Step-by-step solutions for resolution
- Support contact information where applicable
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Major fixes:
- Fix PEN data encoding to properly mark color changes and end markers
- COLOR_END (0x03) for intermediate color blocks
- DATA_END (0x05) for the final stitch only
- Machine now correctly reads total stitch count across all color blocks
- Reset uploadProgress when pattern is deleted to re-enable upload button
- Allow pattern deletion during WAITING states
- Allow pattern upload in COMPLETE states
- Fix pattern state tracking to reset when patternInfo is null
UI improvements:
- Integrate workflow stepper into compact header
- Change app title to "SKiTCH Controller"
- Reduce header size from ~200px to ~70px
- Make Sewing Progress section more compact with two-column layout
- Replace emojis with Heroicons throughout
- Reorganize action buttons with better visual hierarchy
- Add cursor-pointer to all buttons for better UX
- Fix cached pattern not showing info in Pattern File box
- Remove duplicate status messages (keep only state visual indicator)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace vanilla canvas with Konva.js for better interactivity
- Add pan and zoom functionality (mouse wheel zoom, drag to pan)
- Make pattern draggable within hoop coordinate system
- Center canvas on embroidery origin (0,0)
- Default zoom shows entire 100x100mm hoop
- Pass user-defined pattern offset to LAYOUT command
- Replace auto-centering with manual pattern positioning
- Add visual overlays for thread legend, dimensions, pattern position, and zoom controls
- Fix effect dependencies to prevent drag interruption on machine status updates
- Memoize callbacks to prevent unnecessary re-renders
- Create konvaRenderers.ts utility for rendering grid, hoop, stitches, etc.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use PyStitch raw stitches with proper command flag handling
- Import constants from pystitch.EmbConstant (STITCH, JUMP, TRIM, etc.)
- Filter COLOR_CHANGE, STOP, and END command-only stitches
- Properly encode jump/trim stitches with PEN_FEED_DATA flag
- Add pattern centering with moveX/moveY in layout
- Fix color change detection and PEN_COLOR_END marking
- Add comprehensive debug logging for pattern analysis
- Fix machine state helpers for IDLE and MASK_TRACE_COMPLETE states
- Update ProgressMonitor UI for proper button visibility
- Add error handling for undefined error codes
Machine now successfully uploads patterns, completes mask trace,
and transitions to sewing mode.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
