@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/components/ui/token-demo.tsx

@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { Button } from './button';
+import { useTheme } from '../../themes';
+import { createTokenManager } from '../../tokens';
+
+export const TokenDemo: React.FC = () => {
+  const { currentTheme, currentThemeConfig } = useTheme();
+  const [tokenManager] = useState(() => createTokenManager());
+  const [exportFormat, setExportFormat] = useState<'json' | 'css' | 'scss' | 'js' | 'ts'>('json');
+  const [exportedTokens, setExportedTokens] = useState<string>('');
+  const [tokenStats, setTokenStats] = useState<any>(null);
+
+  const generateTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const stats = tokenManager.getTokenStats();
+      setTokenStats(stats);
+      return tokens;
+    }
+    return null;
+  };
+
+  const exportTokens = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const exported = tokenManager.exportTokens(tokens, exportFormat);
+      setExportedTokens(exported);
+    }
+  };
+
+  const exportAllFormats = () => {
+    if (currentThemeConfig) {
+      const tokens = tokenManager.generateTokens(currentThemeConfig);
+      const allFormats = ['json', 'css', 'scss', 'js', 'ts'] as const;
+      const results = allFormats.map(format => ({
+        format,
+        content: tokenManager.exportTokens(tokens, format)
+      }));
+      
+      const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
+      setExportedTokens(combined);
+    }
+  };
+
+  const clearTokens = () => {
+    tokenManager.clearTokens();
+    setTokenStats(null);
+    setExportedTokens('');
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            🎨 Design Token System
+            <Badge variant="outline">Story 8</Badge>
+          </CardTitle>
+          <CardDescription>
+            Generate, validate, and export design tokens from your current theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex flex-wrap gap-2">
+            <Button onClick={generateTokens} variant="default">
+              Generate Tokens
+            </Button>
+            <Button onClick={exportTokens} variant="outline">
+              Export {exportFormat.toUpperCase()}
+            </Button>
+            <Button onClick={exportAllFormats} variant="outline">
+              Export All Formats
+            </Button>
+            <Button onClick={clearTokens} variant="destructive">
+              Clear Tokens
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <label className="text-sm font-medium">Export Format:</label>
+            <select
+              value={exportFormat}
+              onChange={(e) => setExportFormat(e.target.value as any)}
+              className="px-3 py-1 border rounded text-sm"
+            >
+              <option value="json">JSON</option>
+              <option value="css">CSS</option>
+              <option value="scss">SCSS</option>
+              <option value="js">JavaScript</option>
+              <option value="ts">TypeScript</option>
+            </select>
+          </div>
+
+          {tokenStats && (
+            <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+              <h4 className="font-semibold mb-3">Token Statistics</h4>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                <div>
+                  <span className="font-medium">Total Themes:</span>
+                  <div className="text-lg font-bold">{tokenStats.totalThemes}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Total Tokens:</span>
+                  <div className="text-lg font-bold">{tokenStats.totalTokens}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Current Theme:</span>
+                  <div className="text-lg font-bold">{currentTheme}</div>
+                </div>
+                <div>
+                  <span className="font-medium">Theme Version:</span>
+                  <div className="text-lg font-bold">{currentThemeConfig?.meta.version || 'N/A'}</div>
+                </div>
+              </div>
+              
+              {tokenStats.tokenBreakdown && (
+                <div className="mt-4">
+                  <h5 className="font-medium mb-2">Token Breakdown:</h5>
+                  <div className="flex flex-wrap gap-2">
+                    {Object.entries(tokenStats.tokenBreakdown).map(([category, count]) => (
+                      <Badge key={category} variant="secondary">
+                        {category}: {count as number}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {exportedTokens && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Exported Tokens</CardTitle>
+            <CardDescription>
+              Tokens exported in {exportFormat.toUpperCase()} format
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="relative">
+              <Button
+                onClick={() => navigator.clipboard.writeText(exportedTokens)}
+                variant="outline"
+                size="sm"
+                className="absolute top-2 right-2"
+              >
+                Copy
+              </Button>
+              <pre className="bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto max-h-96">
+                <code>{exportedTokens}</code>
+              </pre>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Current Theme Info</CardTitle>
+          <CardDescription>
+            Information about the currently active theme
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <h4 className="font-medium mb-2">Theme Details</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Name:</span> {currentThemeConfig?.meta.name}</div>
+                <div><span className="font-medium">Description:</span> {currentThemeConfig?.meta.description}</div>
+                <div><span className="font-medium">Category:</span> {currentThemeConfig?.meta.category}</div>
+                <div><span className="font-medium">Version:</span> {currentThemeConfig?.meta.version}</div>
+                <div><span className="font-medium">Author:</span> {currentThemeConfig?.meta.author}</div>
+              </div>
+            </div>
+            <div>
+              <h4 className="font-medium mb-2">Font Configuration</h4>
+              <div className="space-y-2 text-sm">
+                <div><span className="font-medium">Primary:</span> {currentThemeConfig?.fonts.primary.family}</div>
+                <div><span className="font-medium">Secondary:</span> {currentThemeConfig?.fonts.secondary.family}</div>
+                <div><span className="font-medium">Display:</span> {currentThemeConfig?.fonts.display.family}</div>
+                <div><span className="font-medium">Body:</span> {currentThemeConfig?.fonts.body.family}</div>
+                <div><span className="font-medium">Mono:</span> {currentThemeConfig?.fonts.mono.family}</div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/ui/touch-demo.tsx

@@ -0,0 +1,462 @@
+import React, { useState, useRef } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
+import { Button } from './button'
+import { Badge } from './badge'
+import { useGestures, useTouchOptimization, useMobileTouch } from '../../hooks'
+import { useDevice } from '../../hooks/use-device'
+
+export const TouchDemo: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<'overview' | 'gestures' | 'optimization' | 'mobile'>('overview')
+  const [gestureHistory, setGestureHistory] = useState<Array<{ type: string; details: any; timestamp: Date }>>([])
+  const [touchFeedback, setTouchFeedback] = useState<string>('')
+  
+  const gestureElementRef = useRef<HTMLDivElement>(null)
+  const optimizationElementRef = useRef<HTMLDivElement>(null)
+  const mobileTouchElementRef = useRef<HTMLDivElement>(null)
+  
+  const device = useDevice()
+
+  // Gesture recognition hook
+  const {
+    isGestureActive,
+    currentGestureType,
+    resetGestureState
+  } = useGestures(gestureElementRef, {
+    onSwipe: (gesture: any) => {
+      const gestureInfo = {
+        type: 'Swipe',
+        details: `${gesture.direction} - ${gesture.distance.toFixed(0)}px, ${gesture.velocity.toFixed(1)}px/ms`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onPinch: (gesture: any) => {
+      const gestureInfo = {
+        type: 'Pinch',
+        details: `Scale: ${gesture.scale.toFixed(2)}, Distance: ${gesture.distance.toFixed(0)}px`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onTap: (position: any) => {
+      const gestureInfo = {
+        type: 'Tap',
+        details: `Position: (${position.x}, ${position.y})`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    },
+    onLongPress: (position: any) => {
+      const gestureInfo = {
+        type: 'Long Press',
+        details: `Position: (${position.x}, ${position.y})`,
+        timestamp: new Date()
+      }
+      setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)])
+    }
+  })
+
+  // Touch optimization hook
+  const {
+    optimizationState,
+    performanceMetrics,
+    applyOptimizations,
+    resetOptimizations
+  } = useTouchOptimization(optimizationElementRef, {
+    onTouchPerformanceWarning: (metrics: any) => {
+      console.warn('Touch performance warning:', metrics)
+    },
+    onBatteryOptimization: (enabled: any) => {
+      console.log('Battery optimization:', enabled ? 'enabled' : 'disabled')
+    }
+  })
+
+  // Mobile touch hook
+  const {
+    mobileTouchState,
+    clearAllGestureHints,
+    getTouchFeedbackClasses
+  } = useMobileTouch(mobileTouchElementRef, {
+    onTouchFeedback: (state: any) => {
+      setTouchFeedback(`${state.feedbackType} feedback - ${state.feedbackIntensity} intensity`)
+    },
+    onGestureHint: (hint: any) => {
+      console.log('Gesture hint:', hint)
+    }
+  })
+
+  const clearGestureHistory = () => {
+    setGestureHistory([])
+    resetGestureState()
+  }
+
+  const getPerformanceScoreColor = (score: string) => {
+    switch (score) {
+      case 'excellent': return 'text-green-600'
+      case 'good': return 'text-blue-600'
+      case 'fair': return 'text-yellow-600'
+      case 'poor': return 'text-red-600'
+      default: return 'text-gray-600'
+    }
+  }
+
+  const getBatteryImpactColor = (impact: string) => {
+    switch (impact) {
+      case 'low': return 'text-green-600'
+      case 'medium': return 'text-yellow-600'
+      case 'high': return 'text-red-600'
+      default: return 'text-gray-600'
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Tab Navigation */}
+      <div className="flex flex-wrap gap-2">
+        {[
+          { id: 'overview', label: 'Overview', icon: '📱' },
+          { id: 'gestures', label: 'Gesture Recognition', icon: '👆' },
+          { id: 'optimization', label: 'Touch Optimization', icon: '⚡' },
+          { id: 'mobile', label: 'Mobile Touch', icon: '📱' }
+        ].map((tab) => (
+          <Button
+            key={tab.id}
+            variant={activeTab === tab.id ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setActiveTab(tab.id as any)}
+            className="touch-button"
+          >
+            {tab.icon} {tab.label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Overview Tab */}
+      {activeTab === 'overview' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                🎯 Touch Optimization & Gesture Support
+                <Badge variant="outline">Story 5 Implementation</Badge>
+              </CardTitle>
+              <CardDescription>
+                Comprehensive touch optimization system with gesture recognition, performance monitoring, and mobile-first interactions
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Device Information</h4>
+                  <div className="text-sm space-y-1">
+                    <p>Screen Size: <Badge variant="secondary">{device.screenSize}</Badge></p>
+                    <p>Touch Device: <Badge variant="secondary">{device.touchDevice ? 'Yes' : 'No'}</Badge></p>
+                    <p>Orientation: <Badge variant="secondary">{device.orientation}</Badge></p>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Touch Capabilities</h4>
+                  <div className="text-sm space-y-1">
+                    <p>Max Touch Points: <Badge variant="secondary">{mobileTouchState.deviceCapabilities.maxTouchPoints}</Badge></p>
+                    <p>Haptic Support: <Badge variant="secondary">{mobileTouchState.deviceCapabilities.supportsHaptics ? 'Yes' : 'No'}</Badge></p>
+                    <p>Audio Support: <Badge variant="secondary">{mobileTouchState.deviceCapabilities.supportsAudio ? 'Yes' : 'No'}</Badge></p>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="text-center p-4 bg-gray-50 rounded-lg">
+                  <div className="text-2xl mb-2">👆</div>
+                  <h4 className="font-semibold">Gesture Recognition</h4>
+                  <p className="text-sm text-gray-600">Swipe, pinch, tap, and long press detection</p>
+                </div>
+                <div className="text-center p-4 bg-gray-50 rounded-lg">
+                  <div className="text-2xl mb-2">⚡</div>
+                  <h4 className="font-semibold">Performance Optimization</h4>
+                  <p className="text-sm text-gray-600">Touch event optimization and battery awareness</p>
+                </div>
+                <div className="text-center p-4 bg-gray-50 rounded-lg">
+                  <div className="text-2xl mb-2">📱</div>
+                  <h4 className="font-semibold">Mobile Touch</h4>
+                  <p className="text-sm text-gray-600">Touch feedback, haptics, and gesture hints</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Gesture Recognition Tab */}
+      {activeTab === 'gestures' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                👆 Gesture Recognition
+                <Badge variant={isGestureActive ? 'default' : 'secondary'}>
+                  {isGestureActive ? 'Active' : 'Inactive'}
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Test gesture recognition on the interactive area below. Try swiping, pinching, tapping, and long pressing.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex gap-2">
+                <Button onClick={resetGestureState} variant="outline" size="sm">
+                  Reset Gestures
+                </Button>
+                <Button onClick={clearGestureHistory} variant="outline" size="sm">
+                  Clear History
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {/* Interactive Gesture Area */}
+                <div
+                  ref={gestureElementRef}
+                  className="min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target"
+                  style={{ touchAction: 'manipulation' }}
+                >
+                  <div className="text-center">
+                    <div className="text-4xl mb-2">👆</div>
+                    <p className="font-medium">Gesture Test Area</p>
+                    <p className="text-sm text-gray-600">
+                      {currentGestureType !== 'none' ? `Current: ${currentGestureType}` : 'Touch to start'}
+                    </p>
+                    <p className="text-xs text-gray-500 mt-2">
+                      Swipe, pinch, tap, or long press here
+                    </p>
+                  </div>
+                </div>
+
+                {/* Gesture History */}
+                <div className="space-y-2">
+                  <h4 className="font-semibold">Gesture History</h4>
+                  <div className="max-h-[300px] overflow-y-auto space-y-2">
+                    {gestureHistory.length === 0 ? (
+                      <p className="text-gray-500 text-sm">No gestures detected yet</p>
+                    ) : (
+                      gestureHistory.map((gesture, index) => (
+                        <div key={index} className="p-2 bg-gray-50 rounded text-sm">
+                          <div className="flex justify-between items-start">
+                            <span className="font-medium">{gesture.type}</span>
+                            <span className="text-xs text-gray-500">
+                              {gesture.timestamp.toLocaleTimeString()}
+                            </span>
+                          </div>
+                          <p className="text-gray-600">{gesture.details}</p>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Touch Optimization Tab */}
+      {activeTab === 'optimization' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                ⚡ Touch Optimization
+                <Badge variant={optimizationState.isOptimized ? 'default' : 'secondary'}>
+                  {optimizationState.isOptimized ? 'Optimized' : 'Not Optimized'}
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Monitor touch performance and apply optimizations for better user experience.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex gap-2">
+                <Button onClick={applyOptimizations} variant="default" size="sm">
+                  Apply Optimizations
+                </Button>
+                <Button onClick={resetOptimizations} variant="outline" size="sm">
+                  Reset Optimizations
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {/* Optimization Status */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Optimization Status</h4>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span>Touch Action:</span>
+                      <Badge variant="outline">{optimizationState.currentTouchAction}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Passive Listeners:</span>
+                      <Badge variant={optimizationState.passiveListenersEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.passiveListenersEnabled ? 'Enabled' : 'Disabled'}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Battery Optimization:</span>
+                      <Badge variant={optimizationState.batteryOptimizationEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.batteryOptimizationEnabled ? 'Enabled' : 'Disabled'}
+                      </Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Throttling:</span>
+                      <Badge variant={optimizationState.throttlingEnabled ? 'default' : 'secondary'}>
+                        {optimizationState.throttlingEnabled ? 'Enabled' : 'Disabled'}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Performance Metrics */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Performance Metrics</h4>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span>Touch Events:</span>
+                      <span>{performanceMetrics.touchEventCount}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Avg Duration:</span>
+                      <span>{performanceMetrics.averageTouchDuration.toFixed(1)}ms</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Latency:</span>
+                      <span>{performanceMetrics.touchEventLatency.toFixed(1)}ms</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Performance:</span>
+                      <span className={getPerformanceScoreColor(performanceMetrics.performanceScore)}>
+                        {performanceMetrics.performanceScore}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Battery Impact:</span>
+                      <span className={getBatteryImpactColor(performanceMetrics.batteryImpact)}>
+                        {performanceMetrics.batteryImpact}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Test Area */}
+              <div
+                ref={optimizationElementRef}
+                className="min-h-[200px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target"
+                style={{ touchAction: optimizationState.currentTouchAction }}
+              >
+                <div className="text-center">
+                  <div className="text-2xl mb-2">⚡</div>
+                  <p className="font-medium">Optimization Test Area</p>
+                  <p className="text-sm text-gray-600">
+                    Touch here to test optimizations
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Mobile Touch Tab */}
+      {activeTab === 'mobile' && (
+        <div className="space-y-4">
+          <Card className="touch-card">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                📱 Mobile Touch Behaviors
+                <Badge variant={mobileTouchState.isActive ? 'default' : 'secondary'}>
+                  {mobileTouchState.isActive ? 'Active' : 'Inactive'}
+                </Badge>
+              </CardTitle>
+              <CardDescription>
+                Experience mobile touch feedback, haptics, and gesture hints.
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex gap-2">
+                <Button onClick={clearAllGestureHints} variant="outline" size="sm">
+                  Clear Hints
+                </Button>
+              </div>
+
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                {/* Touch Feedback Status */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Touch Feedback Status</h4>
+                  <div className="space-y-2 text-sm">
+                    <div className="flex justify-between">
+                      <span>Touch Count:</span>
+                      <Badge variant="outline">{mobileTouchState.touchCount}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Feedback Type:</span>
+                      <Badge variant="outline">{mobileTouchState.currentFeedback.feedbackType}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Intensity:</span>
+                      <Badge variant="outline">{mobileTouchState.currentFeedback.feedbackIntensity}</Badge>
+                    </div>
+                    <div className="flex justify-between">
+                      <span>Active Hints:</span>
+                      <Badge variant="outline">{mobileTouchState.activeGestureHints.length}</Badge>
+                    </div>
+                  </div>
+                  {touchFeedback && (
+                    <div className="p-2 bg-blue-50 border border-blue-200 rounded text-sm">
+                      {touchFeedback}
+                    </div>
+                  )}
+                </div>
+
+                {/* Active Gesture Hints */}
+                <div className="space-y-3">
+                  <h4 className="font-semibold">Active Gesture Hints</h4>
+                  <div className="max-h-[200px] overflow-y-auto space-y-2">
+                    {mobileTouchState.activeGestureHints.length === 0 ? (
+                      <p className="text-gray-500 text-sm">No active hints</p>
+                    ) : (
+                      mobileTouchState.activeGestureHints.map((hint: any, index: number) => (
+                        <div key={index} className="p-2 bg-yellow-50 border border-yellow-200 rounded text-sm">
+                          <div className="flex justify-between items-start">
+                            <span className="font-medium">{hint.type}</span>
+                            <span className="text-xs text-gray-500">
+                              {new Date(hint.timeout).toLocaleTimeString()}
+                            </span>
+                          </div>
+                          <p className="text-gray-600">{hint.message}</p>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              {/* Mobile Touch Test Area */}
+              <div
+                ref={mobileTouchElementRef}
+                className={`min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target ${getTouchFeedbackClasses()}`}
+              >
+                <div className="text-center">
+                  <div className="text-4xl mb-2">📱</div>
+                  <p className="font-medium">Mobile Touch Test Area</p>
+                  <p className="text-sm text-gray-600">
+                    {mobileTouchState.isActive ? 'Touch active' : 'Touch to start'}
+                  </p>
+                  <p className="text-xs text-gray-500 mt-2">
+                    Experience haptic feedback and touch sounds
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}