@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/components/ui/touch-demo.js

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