- Replace fixed w-[85%] h-[85%] with responsive padding (p-4 sm:p-6)
- Use absolute inset (inset-4 sm:inset-6) for adaptive spacing
- Inner scanning frame now w-full h-full to adapt to viewport
- Works seamlessly across 320px mobile to 1024px+ desktop
- Upgraded color palette with enhanced contrast (5.2:1 to 15:1 ratios)
- Replaced all text-slate-* utilities with semantic color tokens
- Added Fira Code + Fira Sans typography stack
- Converted CSS variables from SCSS to direct hex values
- Updated 26 components with improved color semantics
- Added cursor-pointer and focus states (accessibility phase 1)
- Added aria-labels to 35+ icon-only buttons
- Added prefers-reduced-motion support in globals.css
WCAG AA compliance verified across all text color combinations.
Fixes invisible text issues (slate-500 4.2:1 → muted 5.2:1).
Add comprehensive design system documentation:
- Z-index scale (z-10 through z-[100])
- Spacing scale based on 4pt baseline
- Opacity guidelines for glass/translucent effects
- Transition timing standards (150-300ms)
- Focus state requirements
- Cursor affordance rules
- WCAG AA contrast requirements
- Button state implementation patterns
- Form element best practices
- Modal hierarchy guidance
- Migration checklist
Accessibility improvements:
- Add alt text to OCR preview image in Scanner
- Verify all images have descriptive alt text
- Establish transition consistency guidelines
This ensures design consistency and accessibility across the application.
- Add cursor-pointer to all clickable buttons and interactive elements
- Add focus:ring-2 focus:ring-primary/blue focus:outline-none to all buttons
- Add aria-label to icon-only buttons and actions
- Update focus states from focus-visible to focus for consistency
- Add disabled:cursor-not-allowed for disabled button states
- Improve keyboard navigation with proper focus indicators
Components updated:
- BottomNav: navigation buttons with aria-labels
- Scanner: try again, zoom, word selection, cancel buttons
- ItemComparisonModal: skip and update action buttons
- ConfirmationModal: close, cancel, delete buttons with input focus
- AIOnboarding: all mode toggles, camera, upload, capture, edit, delete buttons
- Plus interactive cards and list items
This ensures WCAG AA compliance for keyboard navigation and visual feedback.
- Increased tesseract.js worker creation timeout from 8s → 20s (accounts for lazy loading and language model download on first run)
- Added allowedDevOrigins to next.config.mjs to permit localhost and .local hostnames
- Resolves OCR timeout on slow connections and first-time initialization
Addressed P3 design opportunities from critique:
1. Technical Jargon Simplification
- "Optical Assist" → "Smart Scan" (clearer scanning intent)
- "Protocol Detected" → "Text Found" (plain language)
- "OCR Matching Key" → "Item ID or Code" (concrete terminology)
- "Select identity from label matrix" → "Tap any text to use it"
- Removed cryptic "Cycle" terminology, added countdown seconds
2. Feature Discoverability
- Added helpful descriptions to Admin manager sections
- Scanner status message now hints at zoom and tap features
- Concrete examples in input placeholders
3. Help & Documentation
- User Management: "Create accounts and control access"
- Category Groups: "Organize items by type or location"
- Sign Out: clearer procedure description
Build: passes with zero errors
Replace static import of tesseract.js (500KB) with dynamic import in Scanner
component. Library now only loads when OCR recognition is actually performed,
not on initial page load.
Performance Impact:
- Removes 500KB from initial bundle
- Library only loads when user activates OCR mode
- Preload strategy in page.tsx still works (loads on-demand if scanner opened)
- No functional change; same behavior, faster initial load
Implementation:
- Remove static import from Scanner.tsx (line 6)
- Replace with dynamic import at point of use (line 166+)
- page.tsx preloadOCR already uses dynamic import (no change needed)
- Improves initial page load time significantly
Build: Passes with zero errors. Compile time: 2.4s.
- Fix null type error in AIOnboarding.tsx line 352: img src attribute
- Fix similar issue in Scanner.tsx line 237: capturedImage null handling
- Use '|| undefined' pattern to satisfy React 19/Next.js 15 type requirements
- Both components now properly handle null/undefined image states
