Added shadcn Tooltip component for interactive pattern information. Wrapped all PatternInfo stat boxes and color swatches in tooltips with detailed metadata and explanations. Migrated PatternSummaryCard to use CardHeader/CardTitle/CardDescription for better semantic structure. Fixed Card component spacing issues across all cards.
Changes:
- Installed and added shadcn Tooltip component
- Added tooltips to Size, Stitches, and Colors stat boxes with explanatory text
- Wrapped color swatches in Tooltips with detailed thread information
- Added Separator between pattern stats and colors sections
- Migrated PatternSummaryCard to use CardHeader with semantic title/description
- Fixed Card gap-0 on all cards (FileUpload, PatternSummaryCard, ConnectionPrompt)
- Added explicit padding to PatternSummaryCard: CardHeader (p-4 pb-3) and CardContent (px-4 pt-0 pb-4)
- Updated components.json to use src/ paths instead of @/ aliases to fix shadcn install location
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Migrated ConnectionPrompt to use shadcn/ui Card and CardContent components for consistency with other card-based components (FileUpload, PatternSummaryCard). Maintains the same visual appearance while using the unified Card system.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Migrated FileUpload component to use shadcn/ui Card, Button, Alert, and Progress components. Updated dark mode CSS variables to use media query approach for automatic system theme detection. Fixed Card component padding and button styling for better visual consistency.
Changes:
- Replaced custom div with shadcn Card and CardContent components
- Migrated buttons to shadcn Button component with outline variant for Choose File
- Replaced custom alerts with shadcn Alert components
- Replaced custom progress bars with shadcn Progress component
- Fixed Card padding by adding p-0 to Card and rounded-lg to CardContent
- Changed dark mode from .dark class to @media (prefers-color-scheme: dark)
- Fixed primary-foreground color in dark mode for proper white text contrast
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The src/assets directory only contained a react.svg file that was not referenced anywhere in the codebase. This appears to be leftover boilerplate from the project initialization.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The pyodideLoader was superseded by the worker-based pattern converter (client.ts and worker.ts) which runs Pyodide in a background thread. This legacy code is no longer referenced anywhere in the codebase.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- 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>
Auto-formatted by linter:
- Single quotes → double quotes
- Line wrapping for better readability
No logic changes.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This hook was replaced by useMachineStore (Zustand) and is no longer
used anywhere in the codebase. All functionality has been migrated to
the centralized machine store.
🤖 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>
When the machine reports 0 total stitches in patternInfo, fall back to
using the PEN data stitch count (penStitches.stitches.length) for UI
display. This ensures progress percentage and stitch counts display
correctly even when the machine hasn't fully initialized pattern info.
Updated ProgressMonitor to use derived totalStitches value that prefers
patternInfo.totalStitches but falls back to PEN data when needed.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Removed redundant patternUploaded state from PatternStore and replaced
it with a derived selector usePatternUploaded() in MachineStore that
computes it from patternInfo !== null.
This eliminates duplicate state, removes the need for synchronization
logic, and ensures a single source of truth for pattern upload status.
Updated all components (App, LeftSidebar, FileUpload, PatternCanvas,
WorkflowStepper) to use the derived selector.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Extracted App.tsx (469 lines → 91 lines) into 5 new components:
- ErrorPopover: Displays error details with solutions (84 lines)
- AppHeader: Machine status, workflow stepper, errors (207 lines)
- ConnectionPrompt: Connect button or browser warning (67 lines)
- LeftSidebar: Conditional rendering of controls (42 lines)
- PatternPreviewPlaceholder: Empty state for preview (46 lines)
This improves code organization, maintainability, and reusability.
Each component now has a single, clear responsibility.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Created shared PatternInfo component for displaying pattern statistics
(size, stitch count, colors) used in both FileUpload and PatternSummaryCard.
Reduces code duplication and ensures consistency across the UI.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Shows actual machine stitch count (including lock stitches) in both
FileUpload and PatternSummaryCard components, with original PES count
in lighter gray when they differ.
🤖 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>
The application now properly detects when a Brother PP1 machine is not paired with the operating system. Previously, the connection would appear successful but commands would fail silently.
Changes:
- Enhanced sendCommand() to check for empty or invalid responses during initial connection
- Updated connect() to validate the connection with a test command (getMachineState)
- Properly disconnect and clean up when pairing is not established
- Throw BluetoothPairingError with helpful instructions for the user
When the machine is not paired, users now see a clear error message instructing them to:
1. Long-press the Bluetooth button on the machine
2. Pair via the operating system's Bluetooth settings
3. Try connecting again
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The COLOR_END and CUT commands must be on the same stitch, not separate stitches.
This was causing the machine to execute an extra stitch with the new color before
the jump to the new position.
Changes:
- Combine COLOR_END (X flag) and CUT (Y flag) into single stitch at old position
- Machine now correctly pauses after cut, before jumping to new color section
- Update all color change tests to expect combined COLOR_END+CUT stitch
The correct sequence is now:
1. Finishing lock stitches (old color)
2. COLOR_END+CUT stitch (old color) ← Machine pauses here
3. Jump to new position (new color)
4. Starting lock stitches (new color)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The encoder now adds 8 lock stitches at the very beginning of every pattern,
matching the behavior of the original C# PesxToPen.cs code (Nuihajime_TomeDataPlus
is called when counter <= 2).
Key changes:
- Find first non-MOVE stitch for lock stitch placement
- Add 8 starting lock stitches before main encoding loop
- Calculate forward-looking direction for optimal knot hiding
- Update all 30 tests to account for starting lock stitches
Also added tests to verify:
- DATA_END flag is automatically added to last stitch
- Starting lock stitches are correctly placed at pattern start
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Added tests to verify the encoder correctly handles pattern termination:
- Test that DATA_END flag is added to last stitch even without END flag
- Test that DATA_END flag is added when input has explicit END flag
This ensures patterns are always properly terminated in PEN format,
regardless of whether the input stitches have an END marker.
All 29 tests passing.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Renamed and restructured PEN parsing to match encoder pattern:
Changes:
- Renamed pen/parser.ts → pen/decoder.ts (consistent with encoder.ts)
- Created pen/types.ts for PEN-specific type definitions
- Moved types out of machine.ts (they're format-specific, not machine-specific)
- Unified decoder with encoder test helpers (encoder.test.ts now uses decoder)
New structure:
- decodePenStitch() - decode single 4-byte stitch
- decodeAllPenStitches() - decode all stitches from bytes
- decodePenData() - full decode with color blocks and bounds
- getStitchColor() - helper to get color for a stitch index
Type definitions:
- DecodedPenStitch - individual stitch with coordinates and flags
- PenColorBlock - color block (stitch range for one thread)
- DecodedPenData - complete decoded pattern data
Backward compatibility:
- Added compatibility aliases (isJump, flags, startStitch, endStitch)
- Maintains API compatibility with existing UI code
Also added dist-electron to eslint ignore list.
All tests passing (27/27), build successful, lint clean.
🤖 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>
- Read version from package.json at build time using Vite define
- Create global __APP_VERSION__ constant injected by Vite
- Update document title in App component to include version (e.g., "Respira v0.0.0")
- Works reliably in both web and Electron builds
🤖 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>
Color change finish lock stitches now look FORWARD (Loop C) instead of
backward, aligning the knot with the stop event data for correct tension
when the machine halts for thread color changes.
Lock stitch direction breakdown:
- Loop A (Jump/Entry): Look forward - hides knot under upcoming stitches
- Loop B (End/Cut): Look backward - hides knot inside previous stitches
- Loop C (Color Change): Look forward - aligns with stop event data
Added detailed comments documenting which loop corresponds to each
lock stitch location in the code.
🤖 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>
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>
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>
- 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>
