Visual enhancements:
- Create design tokens system with semantic colors (primary, success, warning, danger, info, neutral)
- Enhanced button states with hover shadow, active press feedback, and focus rings
- Improved WorkflowStepper with larger circles, gradient progress bar, and green completion indicators
- Enhanced color blocks with larger swatches (w-8 h-8), better shadows, and animated current indicator
- Reorganized ProgressMonitor layout - progress/controls on left, color blocks on right
- Moved disconnect button to header as small, compact button
Accessibility improvements:
- Added comprehensive ARIA labels to all interactive elements
- Implemented proper focus states with color-matched rings
- Added role attributes for navigation and progress elements
- Enhanced screen reader support with descriptive labels
- All buttons now meet 44px touch target requirements
Button improvements across all components:
- Standardized to rounded-lg for softer appearance
- Added hover:shadow-lg for depth perception
- Added active:scale-[0.98] for tactile feedback
- Clean disabled states without grayscale filter
- Keyboard navigation with visible focus rings
- Consistent transition timing (150ms)
Typography:
- Maintained minimum 12px text size throughout
- Proper hierarchy with defined heading sizes
- Improved readability with consistent weights
Documentation:
- Created comprehensive UI design analysis
- Implementation guides and checklists
- Before/after examples
- Design tokens reference
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <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>
- Install @heroicons/react package
- Replace text symbols with proper heroicons:
- Zoom controls: PlusIcon, MinusIcon, ArrowPathIcon
- Color block status: CheckCircleIcon, ArrowRightIcon, CircleStackIcon
- Resume sewing: PlayIcon
- Remove hover:-translate-y-0.5 and active:translate-y-0 from all buttons
- Buttons now have stable hover states (color change and shadow only)
- Improved UI consistency and accessibility with vector icons
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install Tailwind CSS and configure Vite plugin
- Replace all custom CSS classes with Tailwind utility classes
- Migrate all components to use Tailwind styling:
- App.tsx: Responsive layout with modern styling
- MachineConnection: Status badges and action buttons
- FileUpload: File input and progress bars with shimmer effect
- ProgressMonitor: Color blocks, state indicators, and actions
- ConfirmDialog: Modal overlay with backdrop blur
- PatternCanvas: Canvas viewer with floating controls
- Add custom shimmer animation for progress bars
- Fix canvas resizing issue during zoom operations:
- Add ResizeObserver for stable container dimensions
- Use clientWidth/clientHeight instead of offset dimensions
- Cache container size to prevent layout thrashing
- Improve zoom button behavior to zoom towards viewport center
- Maintain consistent design with shadows, borders, and transitions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
