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>
Remove expensive cross-platform Electron packaging from the build pipeline
since it duplicates work done by the release pipeline. The build pipeline
now focuses on quick quality checks (linting + TypeScript compilation) for
every PR and main branch push.
🤖 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>
Complete the component refactoring by updating WorkflowStepper to
consume stores directly instead of receiving props.
Changes:
- Updated WorkflowStepper to use useMachineStore and usePatternStore
- Removed 7 props that were being passed from App.tsx
- Added hasError import to WorkflowStepper
- Removed unused hasError import from App.tsx
Now all major components use Zustand stores directly:
- FileUpload: 0 props (was 14)
- ProgressMonitor: 0 props (was 9)
- PatternCanvas: 0 props (was 7)
- PatternSummaryCard: 0 props (was 5)
- WorkflowStepper: 0 props (was 7)
Total props eliminated: 42
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Refactor all child components to consume stores directly instead of
receiving props from App.tsx. This eliminates prop drilling and
simplifies the component tree.
Components updated:
- FileUpload: Now uses useMachineStore, usePatternStore, and useUIStore
directly instead of receiving 14 props
- ProgressMonitor: Now uses useMachineStore and usePatternStore instead
of receiving 9 props
- PatternCanvas: Now uses useMachineStore and usePatternStore instead of
receiving 7 props
- PatternSummaryCard: Now uses useMachineStore and usePatternStore
instead of receiving 5 props
Changes to App.tsx:
- Removed all component props that are now accessed via stores
- Removed unused callbacks: handlePatternLoaded, handlePatternOffsetChange,
handleUpload, handleDeletePattern
- Removed unused imports: PesPatternData, canDeletePattern, useCallback
- Simplified component tree with zero-prop component calls
Benefits:
- Eliminated prop drilling across 37 props total
- Components can access exactly what they need from stores
- Cleaner, more maintainable component interfaces
- Better separation of concerns
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add zustand dependency for modern state management
- Create three separate stores for better code organization:
- useMachineStore: Machine connection, status, and operations
- usePatternStore: Pattern data, offset, and upload state
- useUIStore: Pyodide and UI-specific state
- Migrate App.tsx from useBrotherMachine hook to Zustand stores
- Use useShallow for optimized multi-value selections
- Implement dynamic polling intervals based on machine state
- Add ESLint ignore for .vite build directory
Benefits:
- Better separation of concerns with logical store divisions
- Improved performance through selector-based subscriptions
- Cleaner code replacing 445-line hook with maintainable stores
- Full TypeScript support with proper typing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Rename eslint.config.js to eslint.config.mjs to support ES modules
- Remove unused parameters from interface implementations
- Fix refs access during render in WorkflowStepper by removing redundant check
- Wrap colorBlocks computation in useMemo to fix exhaustive-deps warning
All linting errors and warnings are now resolved.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The gh CLI needs to be run in a git repository to download release
assets. Add checkout step before downloading release assets.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The gh CLI needs to be run in a git repository to determine the target
repo for uploading release assets. Add checkout step to the
upload-to-release job.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Move GitHub Pages deployment to a separate workflow that triggers only
when a release is published, not when drafts are created or updated.
The new workflow downloads release assets directly from the published
release to deploy alongside the web app.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Set Vite base path to /respira/ when building for GitHub Pages
so assets load correctly from the repository subdirectory.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add build-web job that builds the web app
- Publish web app to GitHub Pages root directory
- Keep auto-update files in /update/ subdirectory
- Web app accessible at https://jhbruhn.github.io/respira/
- Auto-update files at /update/win32/x64/ and /update/darwin/arm64/
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Organize files in correct directory structure for auto-updater
- Windows files → update/win32/x64/
- macOS files → update/darwin/arm64/ (ZIP + RELEASES.json only)
- Fix macOS update manifest URL from x64 to arm64
- Exclude Linux packages and macOS DMG (not used for auto-updates)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Upload build outputs as workflow artifacts (windows/macos/linux)
- Add upload-to-release job that consolidates all platform uploads
- Add publish-to-pages job that deploys to GitHub Pages
- Add required permissions for Pages deployment
Build artifacts are now available in two places:
- GitHub Release for manual downloads
- GitHub Pages /update/ for auto-update systems
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Add RELEASES.json to the release artifacts for macOS builds,
which is needed for auto-update functionality.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Provides more breathing room for controls and progress monitor
in the left column on wide screens.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Set minWidth to 1024px (matches Tailwind lg breakpoint)
- Set minHeight to 700px for adequate vertical space
- Prevents window from being resized to mobile single-column layout
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Replace content-pushing error banners with header status indicator
- Add categorized error labels (Python Error, Connection Error, etc.)
- Show detailed error info with solutions in 600px popover on click
- Fix layout shift by always rendering error button (invisible when no error)
- Clear machineError state on disconnect
- Fix TypeScript error in WorkflowStepper ref callback
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Convert NextStepGuide to collapsible floating overlay in bottom-right
- Implement fixed viewport layout (no page scrolling on desktop)
- Make color blocks scrollable with dynamic gradient indicator
- Add responsive behavior: scrollable on mobile, fixed on desktop
- Increase overlay opacity for better readability
- Enable full-height columns that expand to fill available space
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implemented comprehensive responsive design improvements for tablet support
and simplified typography from 12 different font sizes to a clean 5-level
hierarchy using only standard Tailwind classes.
Responsive improvements:
- Canvas height now adapts: 400px (mobile) → 500px (tablet) → 600px (desktop)
- Header stacks vertically on tablets, side-by-side on desktop (1024px+)
- WorkflowStepper scales appropriately for smaller screens
- Canvas overlays are more compact on mobile/tablet
- All components use responsive spacing and padding
Typography system redesign:
- Reduced from 12 sizes to 5 levels (Display, Heading, Subheading, Body, Label)
- Removed arbitrary pixel values (text-[7px], text-[9px], text-[10px], etc.)
- All text now uses standard Tailwind classes (text-xs, text-sm, text-base, text-lg, text-xl)
- Minimum text size is now 12px (text-xs) for better accessibility
- Buttons upgraded to text-sm (14px) for improved touch targets
- Consistent responsive scaling for top-level headers only
Added docs/TYPOGRAPHY_SYSTEM.md with usage guidelines and component mapping.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Fix race condition by using functional state updates in all zoom handlers
- Prevents negative or invalid zoom values from rapid scroll events
- Change zoom range from 10%-1000% to 10%-200% for more reasonable limits
- All zoom operations (wheel, buttons) now safely constrained
- Ensures consistent behavior even with fast mouse wheel scrolling
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Validate pattern (with offset) fits within hoop bounds before upload
- Calculate precise overflow in each direction (left, right, top, bottom)
- Display detailed error message showing exact measurements
- Disable upload button when pattern exceeds hoop bounds
- Position error messages below buttons with smooth slide animation
- Set button sizing: file select (2/3), upload (1/3) for consistent layout
- Pass machineInfo to FileUpload component for hoop dimensions
Prevents uploading patterns that would exceed machine working area and
provides clear feedback on how to adjust pattern position.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
