feat: add landscape-optimized layouts for analytics charts

MOBILE_OPTIMIZATION_GUIDE.md

@@ -14,7 +14,7 @@ The dashboard is now fully optimized for mobile devices with touch-friendly inte
 ✅ Lighthouse mobile score target: ≥ 90  
 ✅ Touch targets: 48×48px (WCAG 2.1 AAA)  
 ✅ Cross-platform (iOS, Android, Web)  
-✅ Page load < 3s on 4G  
+✅ Page load < 3s on 4G
 
 ---
 
@@ -23,41 +23,44 @@ The dashboard is now fully optimized for mobile devices with touch-friendly inte
 ### 1. Touch Gestures
 
 #### Swipe Gestures
+
 - **Swipe-left-to-close**: Close mobile sidebar with a left swipe
 - **Swipe-right-to-open**: Open sidebar from left edge of screen
 - **Swipe-down-to-dismiss**: Dismiss bottom sheet modals with a downward swipe
 
 ```typescript
-import { useSwipeGesture } from './hooks/useSwipeGesture'
+import { useSwipeGesture } from './hooks/useSwipeGesture';
 
 const ref = useSwipeGesture({
   onSwipeLeft: () => closeMenu(),
   onSwipeRight: () => openMenu(),
-  threshold: 50,  // Min distance to register swipe
+  threshold: 50, // Min distance to register swipe
   restraint: 100, // Max perpendicular drift
-})
+});
 ```
 
 #### Pinch-to-Zoom
+
 - **Chart zooming**: Pinch-to-zoom on charts for detailed inspection
 - **Scale range**: 0.5x to 4x zoom with smooth interpolation
 - **Reset button**: Appears when zoomed > 1.1x
 
 ```typescript
-import { usePinchZoom } from './hooks/usePinchZoom'
+import { usePinchZoom } from './hooks/usePinchZoom';
 
 const { ref, scale, reset } = usePinchZoom({
   minScale: 0.5,
   maxScale: 4,
   onScaleChange: (scale) => updateChart(scale),
-})
+});
 ```
 
 ---
 
 ### 2. Mobile-Optimized Charts
 
 **Enhancements:**
+
 - Responsive container heights (180px mobile, 220px+ desktop)
 - Reduced bar sizes on mobile (14px vs 18px)
 - Smaller axis labels (9px font size)
@@ -67,26 +70,55 @@ const { ref, scale, reset } = usePinchZoom({
 - Legend auto-hide on screens < 480px
 
 **Chart Container:**
+
 ```typescript
 import MobileChartContainer from './components/charts/MobileChartContainer'
 
-<MobileChartContainer allowPan allowZoom minHeight={200}>
+<MobileChartContainer allowPan allowZoom minHeight={200} landscapeMinHeight={180}>
   <YourChart />
 </MobileChartContainer>
 ```
 
+#### Landscape-Optimized Analytics Layouts
+
+Provides tablet-optimized landscape compositions for key analytics views (Analytics dashboard, Transaction analytics, Portfolio trends).
+
+```typescript
+import { LandscapeAnalyticsLayout } from './components/charts'
+
+<LandscapeAnalyticsLayout
+  title="Tablet Analytics"
+  subtitle="Side-by-side performance trends"
+  data={analyticsData}
+  charts={[<ActivityTrendChart key="1" />, <FeeTrendChart key="2" />]}
+  sidePanel={<MetricsPanel />}
+  fallbackMessage="Unable to load analytics view"
+/>
+```
+
+**Landscape Features & Compatibility:**
+
+- **Side-by-Side Split Compositions**: Arranges charts and metric panels side-by-side in landscape tablet viewports.
+- **Dynamic Viewport Height**: Constrains chart height (`maxHeight="min(360px, 55vh)"`) to prevent vertical scrolling overflow in landscape mode.
+- **Orientation Awareness**: Detects orientation changes (`isLandscape`, `isTabletLandscape`, `orientation`) via `useResponsive()`.
+- **Manual View Switcher**: Interactive orientation badge and button toggles to switch between Side-by-Side and Stacked compositions.
+- **Input Validation & Security**: Validates corrupt/null/NaN dataset inputs and wraps child components in an ErrorBoundary to recover gracefully from rendering crashes.
+- **Migration & Backward Compatibility**: Fully backward compatible with existing single-column responsive chart wrappers.
+
 ---
 
 ### 3. Bottom Navigation Bar
 
 Quick access to 5 most-used features:
+
 - Home (Overview)
 - Transactions
 - DEX Explorer
 - Wallet
 - More (Settings)
 
 **Touch-friendly:**
+
 - 48×48px touch targets (WCAG AAA)
 - Active state indicator
 - Touch feedback (scale animation)
@@ -107,6 +139,7 @@ import { BottomSheet } from './components/mobile'
 ```
 
 **Features:**
+
 - Slides up from bottom on mobile
 - Drag handle for swipe-to-dismiss
 - Centered modal on desktop
@@ -118,6 +151,7 @@ import { BottomSheet } from './components/mobile'
 ### 5. Mobile Sidebar
 
 **Navigation drawer with:**
+
 - Hamburger menu toggle (top-left)
 - Swipe gestures (left-to-close, right-to-open)
 - Touch-optimized nav items (48×48px)
@@ -128,6 +162,7 @@ import { BottomSheet } from './components/mobile'
 - Theme toggle
 
 **Features:**
+
 - 280px wide drawer
 - Smooth cubic-bezier transitions
 - Escape key support
@@ -140,17 +175,20 @@ import { BottomSheet } from './components/mobile'
 #### CSS Optimizations (`mobile-performance.css`)
 
 **Content Visibility:**
+
 ```css
 .lazy-render {
   content-visibility: auto;
   contain-intrinsic-size: 0 500px;
 }
 ```
+
 - Defers rendering off-screen content
 - Reduces initial paint time
 - Improves scroll performance
 
 **GPU Acceleration:**
+
 ```css
 .gpu-accelerate {
   transform: translateZ(0);
@@ -160,6 +198,7 @@ import { BottomSheet } from './components/mobile'
 ```
 
 **Momentum Scrolling:**
+
 ```css
 .mobile-scroll-container {
   -webkit-overflow-scrolling: touch;
@@ -168,9 +207,11 @@ import { BottomSheet } from './components/mobile'
 ```
 
 **Layout Containment:**
+
 ```css
 @media (max-width: 768px) {
-  .mobile-card, .chart-container {
+  .mobile-card,
+  .chart-container {
     contain: layout style paint;
   }
 }
@@ -188,7 +229,9 @@ import { BottomSheet } from './components/mobile'
 
 ```css
 /* Prevent iOS zoom on input focus */
-input, textarea, select {
+input,
+textarea,
+select {
   font-size: 16px !important;
 }
 ```
@@ -202,6 +245,7 @@ input, textarea, select {
 ### 7. Touch Target Compliance
 
 **WCAG 2.1 Level AAA:**
+
 - Minimum touch target: **48×48px**
 - Small targets: **40×40px** (with spacing)
 
@@ -227,6 +271,7 @@ All buttons, links, and interactive elements meet this standard on mobile.
 ```
 
 **Layout Adjustments:**
+
 - **Mobile (≤768px)**: Single column, touch nav, bottom bar
 - **Tablet (769-1024px)**: Two-column grid, sidebar visible
 - **Desktop (>1024px)**: Full desktop layout
@@ -246,6 +291,7 @@ For notched devices (iPhone X+, Android with gestures):
 ```
 
 **Applied to:**
+
 - Mobile navigation bar
 - Bottom sheets
 - Fixed headers
@@ -266,13 +312,15 @@ For notched devices (iPhone X+, Android with gestures):
 ## Performance Metrics
 
 ### Target Metrics
+
 - **Lighthouse Mobile Score**: ≥ 90
 - **First Contentful Paint (FCP)**: < 1.8s
 - **Largest Contentful Paint (LCP)**: < 2.5s
 - **Time to Interactive (TTI)**: < 3s on 4G
 - **Cumulative Layout Shift (CLS)**: < 0.1
 
 ### Optimization Techniques
+
 1. **Lazy Loading**: `content-visibility: auto` for below-fold content
 2. **Code Splitting**: Dynamic imports for heavy components
 3. **Image Optimization**: `loading="lazy"` attribute
@@ -285,18 +333,21 @@ For notched devices (iPhone X+, Android with gestures):
 ## Testing Guidelines
 
 ### Device Testing
+
 - **iOS**: Safari on iPhone 12+, iPad
 - **Android**: Chrome on Pixel, Samsung devices
 - **Desktop**: Chrome, Firefox, Safari (responsive mode)
 
 ### Touch Testing
+
 1. Test swipe gestures on sidebar
 2. Verify pinch-to-zoom on charts
 3. Check touch target sizes (use browser dev tools)
 4. Test bottom sheet drag-to-dismiss
 5. Validate safe-area insets on notched devices
 
 ### Performance Testing
+
 ```bash
 # Lighthouse mobile audit
 npx lighthouse https://your-app-url --preset=desktop --view
@@ -309,14 +360,14 @@ npx lighthouse https://your-app-url --preset=desktop --view
 
 ## Browser Compatibility
 
-| Feature | Chrome | Safari | Firefox | Edge |
-|---------|--------|--------|---------|------|
-| Swipe Gestures | ✅ | ✅ | ✅ | ✅ |
-| Pinch Zoom | ✅ | ✅ | ✅ | ✅ |
-| Bottom Sheet | ✅ | ✅ | ✅ | ✅ |
-| Safe Area | ✅ | ✅ | ⚠️ | ✅ |
-| Content Visibility | ✅ | ✅ (15+) | ✅ (109+) | ✅ |
-| Touch Events | ✅ | ✅ | ✅ | ✅ |
+| Feature            | Chrome | Safari   | Firefox   | Edge |
+| ------------------ | ------ | -------- | --------- | ---- |
+| Swipe Gestures     | ✅     | ✅       | ✅        | ✅   |
+| Pinch Zoom         | ✅     | ✅       | ✅        | ✅   |
+| Bottom Sheet       | ✅     | ✅       | ✅        | ✅   |
+| Safe Area          | ✅     | ✅       | ⚠️        | ✅   |
+| Content Visibility | ✅     | ✅ (15+) | ✅ (109+) | ✅   |
+| Touch Events       | ✅     | ✅       | ✅        | ✅   |
 
 ---
 
@@ -325,23 +376,25 @@ npx lighthouse https://your-app-url --preset=desktop --view
 ### Converting Modals to Bottom Sheets
 
 **Before:**
+
 ```tsx
-{isOpen && (
-  <div className="modal-overlay">
-    <div className="modal-content">
-      {content}
+{
+  isOpen && (
+    <div className="modal-overlay">
+      <div className="modal-content">{content}</div>
     </div>
-  </div>
-)}
+  );
+}
 ```
 
 **After:**
+
 ```tsx
-import { BottomSheet } from './components/mobile'
+import { BottomSheet } from './components/mobile';
 
 <BottomSheet open={isOpen} onClose={close} title="Title">
   {content}
-</BottomSheet>
+</BottomSheet>;
 ```
 
 ### Adding Swipe to Custom Components
@@ -354,7 +407,7 @@ function MyComponent() {
     onSwipeLeft: handleSwipeLeft,
     onSwipeRight: handleSwipeRight,
   })
-  
+
   return <div ref={ref}>{content}</div>
 }
 ```
@@ -384,5 +437,6 @@ function MyComponent() {
 ## Support
 
 For issues or questions about mobile optimization, see:
+
 - [GitHub Issues](../../issues)
 - [Contributing Guide](./docs/contributing.md)