@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/dist/components/ui/overlay/types.esm.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/components/ui/overlay/types.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/components/ui/performance-demo.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const PerformanceDemo: React.FC;
+//# sourceMappingURL=performance-demo.d.ts.map

package/dist/components/ui/performance-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"performance-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/performance-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAskBnC,CAAA"}

package/dist/components/ui/performance-demo.esm.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { usePerformance, useFrameRate, useMemoryUsage, useBatteryStatus, usePerformanceThrottling } from '../../hooks';
+import { useDevice } from '../../hooks/use-device.js';
+export const PerformanceDemo = () => {
+    const [activeTab, setActiveTab] = useState('overview');
+    const [showRecommendations, setShowRecommendations] = useState(false);
+    const device = useDevice();
+    // Main performance hook
+    const { throttlingEnabled, throttlingReason, performanceMode, getOptimizationRecommendations } = usePerformance({
+        callbacks: {
+            onFPSWarning: (fps) => console.warn(`FPS Warning: ${fps}`),
+            onMemoryWarning: (usage) => console.warn(`Memory Warning: ${(usage * 100).toFixed(1)}%`),
+            onBatteryLow: (level) => console.warn(`Battery Low: ${(level * 100).toFixed(1)}%`),
+            onPerformanceModeChange: (mode) => console.log(`Performance mode changed to: ${mode}`),
+            onThrottlingChange: (enabled, reason) => console.log(`Throttling ${enabled ? 'enabled' : 'disabled'}: ${reason}`)
+        }
+    });
+    // Specialized hooks
+    const { metrics: fpsMetrics, performanceScore: fpsScore, getPerformanceInsights: getFPSInsights } = useFrameRate({
+        callbacks: {
+            onFPSWarning: (fps) => console.warn(`Frame rate warning: ${fps} FPS`),
+            onFPSDrop: (fps, previous) => console.warn(`FPS drop detected: ${previous} → ${fps}`)
+        }
+    });
+    const { metrics: memoryMetrics, memoryTrend, memoryLeakDetected, getOptimizationRecommendations: getMemoryRecommendations, getCleanupSuggestions: getMemoryCleanupSuggestions } = useMemoryUsage({
+        callbacks: {
+            onMemoryWarning: (usage) => console.warn(`Memory usage warning: ${(usage * 100).toFixed(1)}%`),
+            onMemoryLeakDetected: (trend) => console.warn(`Memory leak detected: ${trend} trend`)
+        }
+    });
+    const { metrics: batteryMetrics, batteryLevel, isCharging, isLowPowerMode, isCriticalBattery, getOptimizationRecommendations: getBatteryRecommendations, getPowerSavingSuggestions: getBatteryPowerSuggestions, getBatteryStatus: getBatteryStatusText } = useBatteryStatus({
+        callbacks: {
+            onBatteryLow: (level) => console.warn(`Battery low: ${(level * 100).toFixed(1)}%`),
+            onBatteryCritical: (level) => console.error(`Battery critical: ${(level * 100).toFixed(1)}%`)
+        }
+    });
+    const { metrics, isThrottling, throttleLevel, optimizations, recommendations, performanceSettings, } = usePerformanceThrottling({
+        enablePerformanceMonitoring: true,
+        enableAutomaticThrottling: true,
+        enableUserExperienceOptimization: true,
+        enableBatteryPreservation: true
+    }, {
+        onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
+        onThrottlingApplied: (level, reason) => console.log('Throttling applied:', level, reason),
+        onPerformanceRecovery: (metrics) => console.log('Performance recovery:', metrics),
+        onUserExperienceOptimized: (optimization) => console.log('User experience optimized:', optimization)
+    });
+    // Performance score color mapping
+    const getScoreColor = (score) => {
+        switch (score) {
+            case 'excellent': return 'text-green-600 bg-green-100';
+            case 'good': return 'text-blue-600 bg-blue-100';
+            case 'fair': return 'text-yellow-600 bg-yellow-100';
+            case 'poor': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Performance mode color mapping
+    const getModeColor = (mode) => {
+        switch (mode) {
+            case 'high': return 'text-green-600 bg-green-100';
+            case 'medium': return 'text-yellow-600 bg-yellow-100';
+            case 'low': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Throttling level color mapping
+    const getThrottlingColor = (level) => {
+        switch (level) {
+            case 'none': return 'text-green-600 bg-green-100';
+            case 'light': return 'text-blue-600 bg-blue-100';
+            case 'moderate': return 'text-yellow-600 bg-yellow-100';
+            case 'aggressive': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Memory trend icon
+    const getMemoryTrendIcon = (trend) => {
+        switch (trend) {
+            case 'increasing': return '📈';
+            case 'decreasing': return '📉';
+            case 'stable': return '➡️';
+            default: return '❓';
+        }
+    };
+    // Battery icon
+    const getBatteryIcon = (level, charging) => {
+        if (charging)
+            return '🔌';
+        if (level <= 0.15)
+            return '🔴';
+        if (level <= 0.3)
+            return '🟠';
+        if (level <= 0.5)
+            return '🟡';
+        return '🟢';
+    };
+    const tabs = [
+        { id: 'overview', label: 'Overview', icon: '📊' },
+        { id: 'fps', label: 'Frame Rate', icon: '🎬' },
+        { id: 'memory', label: 'Memory', icon: '🧠' },
+        { id: 'battery', label: 'Battery', icon: '🔋' },
+        { id: 'throttling', label: 'Throttling', icon: '⚡' }
+    ];
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2 border-b pb-4", children: tabs.map((tab) => (_jsxs(Button, { variant: activeTab === tab.id ? 'default' : 'outline', size: "sm", onClick: () => setActiveTab(tab.id), className: "flex items-center gap-2", children: [_jsx("span", { children: tab.icon }), tab.label] }, tab.id))) }), activeTab === 'overview' && (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Performance Summary", _jsxs(Badge, { variant: performanceMode === 'high' ? 'default' : 'secondary', children: [performanceMode.toUpperCase(), " MODE"] })] }), _jsx(CardDescription, { children: "Real-time performance overview and system status" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsx("div", { className: "text-2xl font-bold text-blue-600", children: fpsMetrics.fps }), _jsx("div", { className: "text-sm text-gray-600", children: "FPS" }), _jsx(Badge, { className: `mt-2 ${getScoreColor(fpsScore)}`, children: fpsScore })] }), _jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsxs("div", { className: "text-2xl font-bold text-purple-600", children: [memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-sm text-gray-600", children: "Memory Usage" }), _jsxs("div", { className: "flex items-center justify-center gap-1 mt-2", children: [_jsx("span", { children: getMemoryTrendIcon(memoryTrend) }), _jsx(Badge, { variant: memoryLeakDetected ? 'destructive' : 'secondary', children: memoryLeakDetected ? 'Leak Detected' : memoryTrend })] })] }), _jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsx("div", { className: "text-2xl font-bold text-green-600", children: getBatteryIcon(batteryLevel || 1, isCharging) }), _jsx("div", { className: "text-sm text-gray-600", children: "Battery" }), _jsx(Badge, { variant: isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default', children: getBatteryStatusText() })] })] }), throttlingEnabled && (_jsx("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-yellow-600", children: "\u26A0\uFE0F" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-yellow-800", children: "Performance Throttling Active" }), _jsx("div", { className: "text-sm text-yellow-700", children: throttlingReason })] })] }) })), _jsxs(Button, { variant: "outline", onClick: () => setShowRecommendations(!showRecommendations), className: "w-full", children: [showRecommendations ? 'Hide' : 'Show', " Performance Recommendations"] }), showRecommendations && (_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Optimization Recommendations:" }), _jsx("ul", { className: "space-y-2 text-sm text-gray-700", children: getOptimizationRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), rec] }, index))) })] }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "flex items-center gap-2", children: "\uD83D\uDCF1 Device Information" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Device Type:" }), " ", device.screenSize] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Screen Size:" }), " ", device.screenSize] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Orientation:" }), " ", device.orientation] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Touch Device:" }), " ", device.touchDevice ? 'Yes' : 'No'] })] }) })] })] })), activeTab === 'fps' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAC Frame Rate Monitoring", _jsx(Badge, { className: getScoreColor(fpsScore), children: fpsScore.toUpperCase() })] }), _jsx(CardDescription, { children: "Real-time FPS tracking and performance analysis" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: fpsMetrics.fps }), _jsx("div", { className: "text-xs text-gray-600", children: "Current FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-green-600", children: fpsMetrics.averageFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Average FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-purple-600", children: fpsMetrics.minFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Min FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-orange-600", children: fpsMetrics.maxFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Max FPS" })] })] }), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-blue-800 mb-2", children: "Performance Insights:" }), _jsx("ul", { className: "space-y-1 text-sm text-blue-700", children: getFPSInsights().map((insight, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), insight] }, index))) })] })] })] })), activeTab === 'memory' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83E\uDDE0 Memory Usage Monitoring", _jsx(Badge, { variant: memoryLeakDetected ? 'destructive' : 'secondary', children: memoryLeakDetected ? 'LEAK DETECTED' : memoryTrend.toUpperCase() })] }), _jsx(CardDescription, { children: "Memory usage tracking and leak detection" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-purple-600", children: [memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Usage" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-blue-600", children: [memoryMetrics.usedJSHeapSize ? (memoryMetrics.usedJSHeapSize / 1024 / 1024).toFixed(1) : 'N/A', " MB"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Used" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-green-600", children: [memoryMetrics.jsHeapSizeLimit ? (memoryMetrics.jsHeapSizeLimit / 1024 / 1024).toFixed(1) : 'N/A', " MB"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Limit" })] })] }), _jsxs("div", { className: "p-4 bg-purple-50 border border-purple-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-purple-800 mb-2", children: "Memory Optimization:" }), _jsx("ul", { className: "space-y-1 text-sm text-purple-700", children: getMemoryRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-purple-500", children: "\u2022" }), rec] }, index))) })] }), memoryLeakDetected && (_jsxs("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-red-800 mb-2", children: "Memory Leak Cleanup Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-red-700", children: getMemoryCleanupSuggestions().map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-red-500", children: "\u2022" }), suggestion] }, index))) })] }))] })] })), activeTab === 'battery' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDD0B Battery Status Monitoring", _jsx(Badge, { variant: isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default', children: getBatteryStatusText() })] }), _jsx(CardDescription, { children: "Battery level monitoring and power optimization" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-2xl", children: getBatteryIcon(batteryLevel || 1, isCharging) }), _jsxs("div", { className: "text-xl font-bold text-green-600", children: [batteryLevel ? (batteryLevel * 100).toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Level" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: isCharging ? 'Yes' : 'No' }), _jsx("div", { className: "text-xs text-gray-600", children: "Charging" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-purple-600", children: batteryMetrics.chargingTime || 'N/A' }), _jsx("div", { className: "text-xs text-gray-600", children: "Charging Time" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-orange-600", children: batteryMetrics.dischargingTime || 'N/A' }), _jsx("div", { className: "text-xs text-gray-600", children: "Discharge Time" })] })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-green-800 mb-2", children: "Battery Optimization:" }), _jsx("ul", { className: "space-y-1 text-sm text-green-700", children: getBatteryRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-500", children: "\u2022" }), rec] }, index))) })] }), (isLowPowerMode || isCriticalBattery) && (_jsxs("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-yellow-800 mb-2", children: "Power Saving Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-yellow-700", children: getBatteryPowerSuggestions().map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-yellow-500", children: "\u2022" }), suggestion] }, index))) })] }))] })] })), activeTab === 'throttling' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Performance Throttling", _jsx(Badge, { className: getThrottlingColor(throttleLevel), children: throttleLevel.toUpperCase() })] }), _jsx(CardDescription, { children: "Automatic and manual performance throttling controls" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: isThrottling ? 'Active' : 'Inactive' }), _jsx("div", { className: "text-xs text-gray-600", children: "Throttling Status" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx(Badge, { className: getModeColor(performanceSettings.animationQuality), children: performanceSettings.animationQuality.toUpperCase() }), _jsx("div", { className: "text-xs text-gray-600 mt-1", children: "Performance Mode" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-green-600", children: performanceSettings.memoryOptimization ? 'Yes' : 'No' }), _jsx("div", { className: "text-xs text-gray-600", children: "Battery Optimized" })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-lg font-bold text-blue-600", children: throttleLevel }), _jsx("div", { className: "text-xs text-gray-600", children: "Current Level" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-lg font-bold text-green-600", children: isThrottling ? 'Active' : 'Inactive' }), _jsx("div", { className: "text-xs text-gray-600", children: "Throttling Status" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Performance Settings:" }), _jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Max Concurrent Animations:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.maxConcurrentAnimations })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Frame Rate Limit:" }), _jsxs("div", { className: "text-blue-600", children: [performanceSettings.frameRateLimit, "fps"] })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Animation Quality:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.animationQuality })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Memory Optimization:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.memoryOptimization ? 'Yes' : 'No' })] })] })] }), isThrottling && (_jsxs("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-yellow-800 mb-2", children: "Throttling Information:" }), _jsxs("div", { className: "text-sm text-yellow-700 space-y-1", children: [_jsxs("div", { children: [_jsx("strong", { children: "Level:" }), " ", throttleLevel] }), _jsxs("div", { children: [_jsx("strong", { children: "Performance Score:" }), " ", metrics.performanceScore] }), _jsxs("div", { children: [_jsx("strong", { children: "FPS:" }), " ", metrics.fps] })] })] })), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-blue-800 mb-2", children: "Throttling Recommendations:" }), _jsx("ul", { className: "space-y-1 text-sm text-blue-700", children: recommendations.map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), rec] }, index))) })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-green-800 mb-2", children: "Optimization Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-green-700", children: optimizations.map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-500", children: "\u2022" }), suggestion] }, index))) })] })] })] }))] }));
+};

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

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { usePerformance, useFrameRate, useMemoryUsage, useBatteryStatus, usePerformanceThrottling } from '../../hooks';
+import { useDevice } from '../../hooks/use-device.js';
+export const PerformanceDemo = () => {
+    const [activeTab, setActiveTab] = useState('overview');
+    const [showRecommendations, setShowRecommendations] = useState(false);
+    const device = useDevice();
+    // Main performance hook
+    const { throttlingEnabled, throttlingReason, performanceMode, getOptimizationRecommendations } = usePerformance({
+        callbacks: {
+            onFPSWarning: (fps) => console.warn(`FPS Warning: ${fps}`),
+            onMemoryWarning: (usage) => console.warn(`Memory Warning: ${(usage * 100).toFixed(1)}%`),
+            onBatteryLow: (level) => console.warn(`Battery Low: ${(level * 100).toFixed(1)}%`),
+            onPerformanceModeChange: (mode) => console.log(`Performance mode changed to: ${mode}`),
+            onThrottlingChange: (enabled, reason) => console.log(`Throttling ${enabled ? 'enabled' : 'disabled'}: ${reason}`)
+        }
+    });
+    // Specialized hooks
+    const { metrics: fpsMetrics, performanceScore: fpsScore, getPerformanceInsights: getFPSInsights } = useFrameRate({
+        callbacks: {
+            onFPSWarning: (fps) => console.warn(`Frame rate warning: ${fps} FPS`),
+            onFPSDrop: (fps, previous) => console.warn(`FPS drop detected: ${previous} → ${fps}`)
+        }
+    });
+    const { metrics: memoryMetrics, memoryTrend, memoryLeakDetected, getOptimizationRecommendations: getMemoryRecommendations, getCleanupSuggestions: getMemoryCleanupSuggestions } = useMemoryUsage({
+        callbacks: {
+            onMemoryWarning: (usage) => console.warn(`Memory usage warning: ${(usage * 100).toFixed(1)}%`),
+            onMemoryLeakDetected: (trend) => console.warn(`Memory leak detected: ${trend} trend`)
+        }
+    });
+    const { metrics: batteryMetrics, batteryLevel, isCharging, isLowPowerMode, isCriticalBattery, getOptimizationRecommendations: getBatteryRecommendations, getPowerSavingSuggestions: getBatteryPowerSuggestions, getBatteryStatus: getBatteryStatusText } = useBatteryStatus({
+        callbacks: {
+            onBatteryLow: (level) => console.warn(`Battery low: ${(level * 100).toFixed(1)}%`),
+            onBatteryCritical: (level) => console.error(`Battery critical: ${(level * 100).toFixed(1)}%`)
+        }
+    });
+    const { metrics, isThrottling, throttleLevel, optimizations, recommendations, performanceSettings, } = usePerformanceThrottling({
+        enablePerformanceMonitoring: true,
+        enableAutomaticThrottling: true,
+        enableUserExperienceOptimization: true,
+        enableBatteryPreservation: true
+    }, {
+        onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
+        onThrottlingApplied: (level, reason) => console.log('Throttling applied:', level, reason),
+        onPerformanceRecovery: (metrics) => console.log('Performance recovery:', metrics),
+        onUserExperienceOptimized: (optimization) => console.log('User experience optimized:', optimization)
+    });
+    // Performance score color mapping
+    const getScoreColor = (score) => {
+        switch (score) {
+            case 'excellent': return 'text-green-600 bg-green-100';
+            case 'good': return 'text-blue-600 bg-blue-100';
+            case 'fair': return 'text-yellow-600 bg-yellow-100';
+            case 'poor': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Performance mode color mapping
+    const getModeColor = (mode) => {
+        switch (mode) {
+            case 'high': return 'text-green-600 bg-green-100';
+            case 'medium': return 'text-yellow-600 bg-yellow-100';
+            case 'low': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Throttling level color mapping
+    const getThrottlingColor = (level) => {
+        switch (level) {
+            case 'none': return 'text-green-600 bg-green-100';
+            case 'light': return 'text-blue-600 bg-blue-100';
+            case 'moderate': return 'text-yellow-600 bg-yellow-100';
+            case 'aggressive': return 'text-red-600 bg-red-100';
+            default: return 'text-gray-600 bg-gray-100';
+        }
+    };
+    // Memory trend icon
+    const getMemoryTrendIcon = (trend) => {
+        switch (trend) {
+            case 'increasing': return '📈';
+            case 'decreasing': return '📉';
+            case 'stable': return '➡️';
+            default: return '❓';
+        }
+    };
+    // Battery icon
+    const getBatteryIcon = (level, charging) => {
+        if (charging)
+            return '🔌';
+        if (level <= 0.15)
+            return '🔴';
+        if (level <= 0.3)
+            return '🟠';
+        if (level <= 0.5)
+            return '🟡';
+        return '🟢';
+    };
+    const tabs = [
+        { id: 'overview', label: 'Overview', icon: '📊' },
+        { id: 'fps', label: 'Frame Rate', icon: '🎬' },
+        { id: 'memory', label: 'Memory', icon: '🧠' },
+        { id: 'battery', label: 'Battery', icon: '🔋' },
+        { id: 'throttling', label: 'Throttling', icon: '⚡' }
+    ];
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2 border-b pb-4", children: tabs.map((tab) => (_jsxs(Button, { variant: activeTab === tab.id ? 'default' : 'outline', size: "sm", onClick: () => setActiveTab(tab.id), className: "flex items-center gap-2", children: [_jsx("span", { children: tab.icon }), tab.label] }, tab.id))) }), activeTab === 'overview' && (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Performance Summary", _jsxs(Badge, { variant: performanceMode === 'high' ? 'default' : 'secondary', children: [performanceMode.toUpperCase(), " MODE"] })] }), _jsx(CardDescription, { children: "Real-time performance overview and system status" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsx("div", { className: "text-2xl font-bold text-blue-600", children: fpsMetrics.fps }), _jsx("div", { className: "text-sm text-gray-600", children: "FPS" }), _jsx(Badge, { className: `mt-2 ${getScoreColor(fpsScore)}`, children: fpsScore })] }), _jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsxs("div", { className: "text-2xl font-bold text-purple-600", children: [memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-sm text-gray-600", children: "Memory Usage" }), _jsxs("div", { className: "flex items-center justify-center gap-1 mt-2", children: [_jsx("span", { children: getMemoryTrendIcon(memoryTrend) }), _jsx(Badge, { variant: memoryLeakDetected ? 'destructive' : 'secondary', children: memoryLeakDetected ? 'Leak Detected' : memoryTrend })] })] }), _jsxs("div", { className: "text-center p-4 border rounded-lg", children: [_jsx("div", { className: "text-2xl font-bold text-green-600", children: getBatteryIcon(batteryLevel || 1, isCharging) }), _jsx("div", { className: "text-sm text-gray-600", children: "Battery" }), _jsx(Badge, { variant: isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default', children: getBatteryStatusText() })] })] }), throttlingEnabled && (_jsx("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-yellow-600", children: "\u26A0\uFE0F" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-yellow-800", children: "Performance Throttling Active" }), _jsx("div", { className: "text-sm text-yellow-700", children: throttlingReason })] })] }) })), _jsxs(Button, { variant: "outline", onClick: () => setShowRecommendations(!showRecommendations), className: "w-full", children: [showRecommendations ? 'Hide' : 'Show', " Performance Recommendations"] }), showRecommendations && (_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Optimization Recommendations:" }), _jsx("ul", { className: "space-y-2 text-sm text-gray-700", children: getOptimizationRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), rec] }, index))) })] }))] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "flex items-center gap-2", children: "\uD83D\uDCF1 Device Information" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Device Type:" }), " ", device.screenSize] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Screen Size:" }), " ", device.screenSize] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Orientation:" }), " ", device.orientation] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Touch Device:" }), " ", device.touchDevice ? 'Yes' : 'No'] })] }) })] })] })), activeTab === 'fps' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAC Frame Rate Monitoring", _jsx(Badge, { className: getScoreColor(fpsScore), children: fpsScore.toUpperCase() })] }), _jsx(CardDescription, { children: "Real-time FPS tracking and performance analysis" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: fpsMetrics.fps }), _jsx("div", { className: "text-xs text-gray-600", children: "Current FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-green-600", children: fpsMetrics.averageFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Average FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-purple-600", children: fpsMetrics.minFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Min FPS" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-orange-600", children: fpsMetrics.maxFPS }), _jsx("div", { className: "text-xs text-gray-600", children: "Max FPS" })] })] }), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-blue-800 mb-2", children: "Performance Insights:" }), _jsx("ul", { className: "space-y-1 text-sm text-blue-700", children: getFPSInsights().map((insight, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), insight] }, index))) })] })] })] })), activeTab === 'memory' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83E\uDDE0 Memory Usage Monitoring", _jsx(Badge, { variant: memoryLeakDetected ? 'destructive' : 'secondary', children: memoryLeakDetected ? 'LEAK DETECTED' : memoryTrend.toUpperCase() })] }), _jsx(CardDescription, { children: "Memory usage tracking and leak detection" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-purple-600", children: [memoryMetrics.memoryPercentage ? memoryMetrics.memoryPercentage.toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Usage" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-blue-600", children: [memoryMetrics.usedJSHeapSize ? (memoryMetrics.usedJSHeapSize / 1024 / 1024).toFixed(1) : 'N/A', " MB"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Used" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsxs("div", { className: "text-xl font-bold text-green-600", children: [memoryMetrics.jsHeapSizeLimit ? (memoryMetrics.jsHeapSizeLimit / 1024 / 1024).toFixed(1) : 'N/A', " MB"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Limit" })] })] }), _jsxs("div", { className: "p-4 bg-purple-50 border border-purple-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-purple-800 mb-2", children: "Memory Optimization:" }), _jsx("ul", { className: "space-y-1 text-sm text-purple-700", children: getMemoryRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-purple-500", children: "\u2022" }), rec] }, index))) })] }), memoryLeakDetected && (_jsxs("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-red-800 mb-2", children: "Memory Leak Cleanup Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-red-700", children: getMemoryCleanupSuggestions().map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-red-500", children: "\u2022" }), suggestion] }, index))) })] }))] })] })), activeTab === 'battery' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDD0B Battery Status Monitoring", _jsx(Badge, { variant: isCriticalBattery ? 'destructive' : isLowPowerMode ? 'secondary' : 'default', children: getBatteryStatusText() })] }), _jsx(CardDescription, { children: "Battery level monitoring and power optimization" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-2xl", children: getBatteryIcon(batteryLevel || 1, isCharging) }), _jsxs("div", { className: "text-xl font-bold text-green-600", children: [batteryLevel ? (batteryLevel * 100).toFixed(1) : 'N/A', "%"] }), _jsx("div", { className: "text-xs text-gray-600", children: "Level" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: isCharging ? 'Yes' : 'No' }), _jsx("div", { className: "text-xs text-gray-600", children: "Charging" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-purple-600", children: batteryMetrics.chargingTime || 'N/A' }), _jsx("div", { className: "text-xs text-gray-600", children: "Charging Time" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-orange-600", children: batteryMetrics.dischargingTime || 'N/A' }), _jsx("div", { className: "text-xs text-gray-600", children: "Discharge Time" })] })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-green-800 mb-2", children: "Battery Optimization:" }), _jsx("ul", { className: "space-y-1 text-sm text-green-700", children: getBatteryRecommendations().map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-500", children: "\u2022" }), rec] }, index))) })] }), (isLowPowerMode || isCriticalBattery) && (_jsxs("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-yellow-800 mb-2", children: "Power Saving Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-yellow-700", children: getBatteryPowerSuggestions().map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-yellow-500", children: "\u2022" }), suggestion] }, index))) })] }))] })] })), activeTab === 'throttling' && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Performance Throttling", _jsx(Badge, { className: getThrottlingColor(throttleLevel), children: throttleLevel.toUpperCase() })] }), _jsx(CardDescription, { children: "Automatic and manual performance throttling controls" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-blue-600", children: isThrottling ? 'Active' : 'Inactive' }), _jsx("div", { className: "text-xs text-gray-600", children: "Throttling Status" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx(Badge, { className: getModeColor(performanceSettings.animationQuality), children: performanceSettings.animationQuality.toUpperCase() }), _jsx("div", { className: "text-xs text-gray-600 mt-1", children: "Performance Mode" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-xl font-bold text-green-600", children: performanceSettings.memoryOptimization ? 'Yes' : 'No' }), _jsx("div", { className: "text-xs text-gray-600", children: "Battery Optimized" })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-lg font-bold text-blue-600", children: throttleLevel }), _jsx("div", { className: "text-xs text-gray-600", children: "Current Level" })] }), _jsxs("div", { className: "text-center p-3 border rounded-lg", children: [_jsx("div", { className: "text-lg font-bold text-green-600", children: isThrottling ? 'Active' : 'Inactive' }), _jsx("div", { className: "text-xs text-gray-600", children: "Throttling Status" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-medium text-gray-900", children: "Performance Settings:" }), _jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Max Concurrent Animations:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.maxConcurrentAnimations })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Frame Rate Limit:" }), _jsxs("div", { className: "text-blue-600", children: [performanceSettings.frameRateLimit, "fps"] })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Animation Quality:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.animationQuality })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Memory Optimization:" }), _jsx("div", { className: "text-blue-600", children: performanceSettings.memoryOptimization ? 'Yes' : 'No' })] })] })] }), isThrottling && (_jsxs("div", { className: "p-4 bg-yellow-50 border border-yellow-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-yellow-800 mb-2", children: "Throttling Information:" }), _jsxs("div", { className: "text-sm text-yellow-700 space-y-1", children: [_jsxs("div", { children: [_jsx("strong", { children: "Level:" }), " ", throttleLevel] }), _jsxs("div", { children: [_jsx("strong", { children: "Performance Score:" }), " ", metrics.performanceScore] }), _jsxs("div", { children: [_jsx("strong", { children: "FPS:" }), " ", metrics.fps] })] })] })), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-blue-800 mb-2", children: "Throttling Recommendations:" }), _jsx("ul", { className: "space-y-1 text-sm text-blue-700", children: recommendations.map((rec, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-blue-500", children: "\u2022" }), rec] }, index))) })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-medium text-green-800 mb-2", children: "Optimization Suggestions:" }), _jsx("ul", { className: "space-y-1 text-sm text-green-700", children: optimizations.map((suggestion, index) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx("span", { className: "text-green-500", children: "\u2022" }), suggestion] }, index))) })] })] })] }))] }));
+};

package/dist/components/ui/semantic-input-system-demo.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const SemanticInputSystemDemo: React.FC;
+//# sourceMappingURL=semantic-input-system-demo.d.ts.map

package/dist/components/ui/semantic-input-system-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic-input-system-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/semantic-input-system-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAye3C,CAAA"}

package/dist/components/ui/semantic-input-system-demo.esm.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Label } from './label.js';
+import { Badge } from './badge.js';
+import { useSemanticInput } from '../../hooks/use-semantic-input.js';
+import { useMobileKeyboardOptimization } from '../../hooks/use-mobile-keyboard-optimization.js';
+import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input.js';
+import { useInputPerformance } from '../../hooks/use-input-performance.js';
+import { useInputAccessibility } from '../../hooks/use-input-accessibility.js';
+export const SemanticInputSystemDemo = () => {
+    const [activeDemo, setActiveDemo] = useState('semantic');
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        phone: '',
+        creditCard: '',
+        amount: '',
+        search: ''
+    });
+    // Initialize hooks with proper interfaces
+    const { semanticState, detectInputType, optimizeKeyboard } = useSemanticInput({ type: 'text', autocomplete: 'on', inputMode: 'text', keyboardType: 'default' }, {}, {
+        enableAutoDetection: true,
+        enableKeyboardOptimization: true,
+        enableAutocomplete: true
+    });
+    const { keyboardState, optimizations, autoOptimizeForInputType } = useMobileKeyboardOptimization({
+        enableKeyboardDetection: true,
+        enablePerformanceMonitoring: true,
+        enableBatteryOptimization: true
+    });
+    const { touchState, touchOptimizations, autoOptimizeTouch } = useTouchFriendlyInput({
+        enableTouchOptimization: true,
+        enablePerformanceMonitoring: true,
+        enableAccessibilitySupport: true
+    });
+    const { performanceMetrics, autoOptimize } = useInputPerformance({
+        enablePerformanceMonitoring: true,
+        enableMemoryManagement: true,
+        enableBatteryOptimization: true
+    });
+    const { accessibilityFeatures, enableARIASupport } = useInputAccessibility({
+        enableARIA: true,
+        enableKeyboardNavigation: true,
+        enableScreenReader: true,
+        enableFocusManagement: true
+    });
+    const handleInputChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        // Detect semantic type and optimize
+        const detectedType = detectInputType(value, field);
+        if (detectedType && detectedType.type !== 'text') {
+            optimizeKeyboard(detectedType);
+            autoOptimizeForInputType(detectedType.type);
+        }
+    };
+    const handleDemoChange = (demo) => {
+        setActiveDemo(demo);
+        // Start relevant monitoring for the selected demo
+        switch (demo) {
+            case 'semantic':
+                break;
+            case 'mobile':
+                // Mobile keyboard detection is already running
+                break;
+            case 'touch':
+                autoOptimizeTouch();
+                break;
+            case 'performance':
+                autoOptimize();
+                break;
+            case 'accessibility':
+                // Call functions safely - simplified to avoid type issues
+                if (typeof enableARIASupport === 'function') {
+                    enableARIASupport();
+                }
+                break;
+        }
+    };
+    const renderSemanticDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "name", children: "Full Name" }), _jsx(Input, { id: "name", value: formData.name, onChange: (e) => handleInputChange('name', e.target.value), placeholder: "Enter your full name", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Detected Type: ", _jsx(Badge, { variant: "secondary", children: semanticState.detectedType?.type || 'text' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", children: "Email Address" }), _jsx(Input, { id: "email", type: "email", value: formData.email, onChange: (e) => handleInputChange('email', e.target.value), placeholder: "Enter your email", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Keyboard: ", _jsx(Badge, { variant: "secondary", children: semanticState.keyboardOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "phone", children: "Phone Number" }), _jsx(Input, { id: "phone", value: formData.phone, onChange: (e) => handleInputChange('phone', e.target.value), placeholder: "Enter your phone number", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Autocomplete: ", _jsx(Badge, { variant: "secondary", children: semanticState.autocompleteEnhanced ? 'Enhanced' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "creditCard", children: "Credit Card" }), _jsx(Input, { id: "creditCard", value: formData.creditCard, onChange: (e) => handleInputChange('creditCard', e.target.value), placeholder: "Enter credit card number", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Touch: ", _jsx(Badge, { variant: "secondary", children: semanticState.touchOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "amount", children: "Amount" }), _jsx(Input, { id: "amount", value: formData.amount, onChange: (e) => handleInputChange('amount', e.target.value), placeholder: "Enter amount", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Performance: ", _jsx(Badge, { variant: "secondary", children: semanticState.isOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "search", children: "Search" }), _jsx(Input, { id: "search", value: formData.search, onChange: (e) => handleInputChange('search', e.target.value), placeholder: "Search...", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Type: ", _jsx(Badge, { variant: "secondary", children: semanticState.detectedType?.type || 'text' })] })] })] }), _jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2", children: "Semantic State" }), _jsx("pre", { className: "text-xs text-gray-700 overflow-auto", children: JSON.stringify(semanticState, null, 2) })] })] }));
+    const renderMobileDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Keyboard State" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Visible: ", _jsx(Badge, { variant: keyboardState.isVisible ? 'default' : 'secondary', children: keyboardState.isVisible ? 'Yes' : 'No' })] }), _jsxs("div", { children: ["Height: ", keyboardState.height, "px"] }), _jsxs("div", { children: ["Type: ", _jsx(Badge, { variant: "outline", children: keyboardState.type })] }), _jsxs("div", { children: ["Platform: ", _jsx(Badge, { variant: "outline", children: keyboardState.platform })] }), _jsxs("div", { children: ["Orientation: ", _jsx(Badge, { variant: "outline", children: keyboardState.orientation })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Keyboard Optimizations" }), _jsx("div", { className: "space-y-2", children: optimizations.map((opt, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: opt.name }), _jsx(Badge, { variant: opt.applied ? 'default' : 'secondary', children: opt.applied ? 'Applied' : 'Pending' })] }, index))) })] })] }), _jsxs("div", { className: "bg-blue-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-blue-800", children: "Mobile Keyboard Features" }), _jsxs("ul", { className: "text-sm text-blue-700 space-y-1", children: [_jsx("li", { children: "\u2022 Automatic keyboard type detection" }), _jsx("li", { children: "\u2022 Platform-specific optimizations" }), _jsx("li", { children: "\u2022 Orientation-aware adjustments" }), _jsx("li", { children: "\u2022 Performance monitoring integration" }), _jsx("li", { children: "\u2022 Battery optimization support" })] })] })] }));
+    const renderTouchDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Touch State" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Touching: ", _jsx(Badge, { variant: touchState.isTouching ? 'default' : 'secondary', children: touchState.isTouching ? 'Yes' : 'No' })] }), _jsxs("div", { children: ["Touch Count: ", touchState.touchCount] }), _jsxs("div", { children: ["Duration: ", touchState.touchDuration, "ms"] }), _jsxs("div", { children: ["Velocity: ", touchState.touchVelocity.toFixed(2), "px/ms"] }), _jsxs("div", { children: ["Gesture: ", _jsx(Badge, { variant: "outline", children: touchState.gestureType })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Touch Optimizations" }), _jsx("div", { className: "space-y-2", children: touchOptimizations.map((opt, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: opt.name }), _jsx(Badge, { variant: opt.applied ? 'default' : 'secondary', children: opt.applied ? 'Applied' : 'Pending' })] }, index))) })] })] }), _jsxs("div", { className: "bg-green-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-green-800", children: "Touch-Friendly Features" }), _jsxs("ul", { className: "text-sm text-green-700 space-y-1", children: [_jsx("li", { children: "\u2022 44px minimum touch targets" }), _jsx("li", { children: "\u2022 Multi-touch gesture support" }), _jsx("li", { children: "\u2022 Touch feedback and animations" }), _jsx("li", { children: "\u2022 Performance monitoring" }), _jsx("li", { children: "\u2022 Accessibility compliance" })] })] })] }));
+    const renderPerformanceDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Performance Metrics" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Frame Rate: ", performanceMetrics.frameRate, " FPS"] }), _jsxs("div", { children: ["Input Latency: ", performanceMetrics.inputLatency.toFixed(2), "ms"] }), _jsxs("div", { children: ["Memory Usage: ", performanceMetrics.memoryUsage, "MB"] }), _jsxs("div", { children: ["Battery Level: ", (performanceMetrics.batteryLevel * 100).toFixed(1), "%"] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Performance Status" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Frame Rate" }), _jsx(Badge, { variant: performanceMetrics.frameRate >= 60 ? 'default' : 'destructive', children: performanceMetrics.frameRate >= 60 ? 'Optimal' : 'Low' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Input Latency" }), _jsx(Badge, { variant: performanceMetrics.inputLatency < 16 ? 'default' : 'destructive', children: performanceMetrics.inputLatency < 16 ? 'Optimal' : 'High' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Memory" }), _jsx(Badge, { variant: performanceMetrics.memoryUsage < 100 ? 'default' : 'destructive', children: performanceMetrics.memoryUsage < 100 ? 'Optimal' : 'High' })] })] })] })] }), _jsxs("div", { className: "bg-purple-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-purple-800", children: "Performance Features" }), _jsxs("ul", { className: "text-sm text-purple-700 space-y-1", children: [_jsx("li", { children: "\u2022 Real-time performance monitoring" }), _jsx("li", { children: "\u2022 Memory usage optimization" }), _jsx("li", { children: "\u2022 Battery-conscious operations" }), _jsx("li", { children: "\u2022 Frame rate optimization" }), _jsx("li", { children: "\u2022 Input latency tracking" })] })] })] }));
+    const renderAccessibilityDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Accessibility Features" }), _jsx("div", { className: "space-y-2", children: accessibilityFeatures.map((feature, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: feature.name }), _jsx(Badge, { variant: feature.enabled ? 'default' : 'secondary', children: feature.enabled ? 'Enabled' : 'Disabled' })] }, index))) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Accessibility Score" }), _jsxs("div", { className: "text-center p-4 bg-blue-50 rounded-lg", children: [_jsxs("div", { className: "text-3xl font-bold text-blue-600", children: [accessibilityFeatures.filter(f => f.enabled).length, "/", accessibilityFeatures.length] }), _jsx("div", { className: "text-sm text-blue-700", children: "Features Enabled" })] })] })] }), _jsxs("div", { className: "bg-orange-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-orange-800", children: "Accessibility Features" }), _jsxs("ul", { className: "text-sm text-orange-700 space-y-1", children: [_jsx("li", { children: "\u2022 ARIA labels and descriptions" }), _jsx("li", { children: "\u2022 Keyboard navigation support" }), _jsx("li", { children: "\u2022 Screen reader optimization" }), _jsx("li", { children: "\u2022 Focus management" }), _jsx("li", { children: "\u2022 High contrast support" })] })] })] }));
+    return (_jsxs("div", { className: "max-w-6xl mx-auto p-6 space-y-6", children: [_jsxs("div", { className: "text-center space-y-4", children: [_jsx("h1", { className: "text-4xl font-bold text-gray-900", children: "\uD83C\uDFAF Story 12: Semantic Input System & Mobile Keyboard Optimization" }), _jsx("p", { className: "text-xl text-gray-600 max-w-3xl mx-auto", children: "Advanced input system with semantic type detection, mobile keyboard optimization, touch-friendly behavior, performance monitoring, and accessibility support." }), _jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Semantic Types" }), _jsx(Badge, { variant: "secondary", children: "Mobile Keyboard" }), _jsx(Badge, { variant: "outline", children: "Touch Optimization" }), _jsx(Badge, { variant: "destructive", children: "Performance" }), _jsx(Badge, { variant: "default", children: "Accessibility" })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2 justify-center", children: [_jsx(Button, { variant: activeDemo === 'semantic' ? 'default' : 'outline', onClick: () => handleDemoChange('semantic'), children: "\uD83E\uDDE0 Semantic Input" }), _jsx(Button, { variant: activeDemo === 'mobile' ? 'default' : 'outline', onClick: () => handleDemoChange('mobile'), children: "\uD83D\uDCF1 Mobile Keyboard" }), _jsx(Button, { variant: activeDemo === 'touch' ? 'default' : 'outline', onClick: () => handleDemoChange('touch'), children: "\uD83D\uDC46 Touch Friendly" }), _jsx(Button, { variant: activeDemo === 'performance' ? 'default' : 'outline', onClick: () => handleDemoChange('performance'), children: "\u26A1 Performance" }), _jsx(Button, { variant: activeDemo === 'accessibility' ? 'default' : 'outline', onClick: () => handleDemoChange('accessibility'), children: "\u267F Accessibility" })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [activeDemo === 'semantic' && '🧠 Semantic Input System', activeDemo === 'mobile' && '📱 Mobile Keyboard Optimization', activeDemo === 'touch' && '👆 Touch-Friendly Interface', activeDemo === 'performance' && '⚡ Performance Monitoring', activeDemo === 'accessibility' && '♿ Accessibility Features'] }), _jsxs(CardDescription, { children: [activeDemo === 'semantic' && 'Intelligent input type detection and mobile keyboard optimization', activeDemo === 'mobile' && 'Platform-aware keyboard behavior and mobile-specific enhancements', activeDemo === 'touch' && 'Touch-optimized interactions with 44px minimum targets', activeDemo === 'performance' && 'Real-time performance monitoring and optimization', activeDemo === 'accessibility' && 'Comprehensive accessibility support and compliance'] })] }), _jsxs(CardContent, { children: [activeDemo === 'semantic' && renderSemanticDemo(), activeDemo === 'mobile' && renderMobileDemo(), activeDemo === 'touch' && renderTouchDemo(), activeDemo === 'performance' && renderPerformanceDemo(), activeDemo === 'accessibility' && renderAccessibilityDemo()] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83C\uDFAF Next Steps" }) }), _jsx(CardContent, { children: _jsxs("ul", { className: "text-sm space-y-2", children: [_jsx("li", { children: "\u2705 Story 12: Semantic Input System [COMPLETE]" }), _jsx("li", { children: "\uD83D\uDD27 Story 13: Touch-Friendly Interface" }), _jsx("li", { children: "\uD83C\uDFA8 Story 14: Advanced Transitions" }), _jsx("li", { children: "\uD83D\uDCF1 Story 15: Mobile Experience Polish" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83D\uDE80 Features" }) }), _jsx(CardContent, { children: _jsxs("ul", { className: "text-sm space-y-2", children: [_jsx("li", { children: "\u2022 Semantic input type detection" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization" }), _jsx("li", { children: "\u2022 Touch-friendly behavior" }), _jsx("li", { children: "\u2022 Performance monitoring" }), _jsx("li", { children: "\u2022 Accessibility compliance" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83D\uDCCA Status" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Components:" }), _jsx(Badge, { variant: "default", children: "6/6" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Hooks:" }), _jsx(Badge, { variant: "default", children: "6/6" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Tests:" }), _jsx(Badge, { variant: "default", children: "Passing" })] })] }) })] })] })] }));
+};

package/dist/components/ui/semantic-input-system-demo.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+import { Label } from './label.js';
+import { Badge } from './badge.js';
+import { useSemanticInput } from '../../hooks/use-semantic-input.js';
+import { useMobileKeyboardOptimization } from '../../hooks/use-mobile-keyboard-optimization.js';
+import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input.js';
+import { useInputPerformance } from '../../hooks/use-input-performance.js';
+import { useInputAccessibility } from '../../hooks/use-input-accessibility.js';
+export const SemanticInputSystemDemo = () => {
+    const [activeDemo, setActiveDemo] = useState('semantic');
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        phone: '',
+        creditCard: '',
+        amount: '',
+        search: ''
+    });
+    // Initialize hooks with proper interfaces
+    const { semanticState, detectInputType, optimizeKeyboard } = useSemanticInput({ type: 'text', autocomplete: 'on', inputMode: 'text', keyboardType: 'default' }, {}, {
+        enableAutoDetection: true,
+        enableKeyboardOptimization: true,
+        enableAutocomplete: true
+    });
+    const { keyboardState, optimizations, autoOptimizeForInputType } = useMobileKeyboardOptimization({
+        enableKeyboardDetection: true,
+        enablePerformanceMonitoring: true,
+        enableBatteryOptimization: true
+    });
+    const { touchState, touchOptimizations, autoOptimizeTouch } = useTouchFriendlyInput({
+        enableTouchOptimization: true,
+        enablePerformanceMonitoring: true,
+        enableAccessibilitySupport: true
+    });
+    const { performanceMetrics, autoOptimize } = useInputPerformance({
+        enablePerformanceMonitoring: true,
+        enableMemoryManagement: true,
+        enableBatteryOptimization: true
+    });
+    const { accessibilityFeatures, enableARIASupport } = useInputAccessibility({
+        enableARIA: true,
+        enableKeyboardNavigation: true,
+        enableScreenReader: true,
+        enableFocusManagement: true
+    });
+    const handleInputChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        // Detect semantic type and optimize
+        const detectedType = detectInputType(value, field);
+        if (detectedType && detectedType.type !== 'text') {
+            optimizeKeyboard(detectedType);
+            autoOptimizeForInputType(detectedType.type);
+        }
+    };
+    const handleDemoChange = (demo) => {
+        setActiveDemo(demo);
+        // Start relevant monitoring for the selected demo
+        switch (demo) {
+            case 'semantic':
+                break;
+            case 'mobile':
+                // Mobile keyboard detection is already running
+                break;
+            case 'touch':
+                autoOptimizeTouch();
+                break;
+            case 'performance':
+                autoOptimize();
+                break;
+            case 'accessibility':
+                // Call functions safely - simplified to avoid type issues
+                if (typeof enableARIASupport === 'function') {
+                    enableARIASupport();
+                }
+                break;
+        }
+    };
+    const renderSemanticDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "name", children: "Full Name" }), _jsx(Input, { id: "name", value: formData.name, onChange: (e) => handleInputChange('name', e.target.value), placeholder: "Enter your full name", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Detected Type: ", _jsx(Badge, { variant: "secondary", children: semanticState.detectedType?.type || 'text' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", children: "Email Address" }), _jsx(Input, { id: "email", type: "email", value: formData.email, onChange: (e) => handleInputChange('email', e.target.value), placeholder: "Enter your email", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Keyboard: ", _jsx(Badge, { variant: "secondary", children: semanticState.keyboardOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "phone", children: "Phone Number" }), _jsx(Input, { id: "phone", value: formData.phone, onChange: (e) => handleInputChange('phone', e.target.value), placeholder: "Enter your phone number", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Autocomplete: ", _jsx(Badge, { variant: "secondary", children: semanticState.autocompleteEnhanced ? 'Enhanced' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "creditCard", children: "Credit Card" }), _jsx(Input, { id: "creditCard", value: formData.creditCard, onChange: (e) => handleInputChange('creditCard', e.target.value), placeholder: "Enter credit card number", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Touch: ", _jsx(Badge, { variant: "secondary", children: semanticState.touchOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "amount", children: "Amount" }), _jsx(Input, { id: "amount", value: formData.amount, onChange: (e) => handleInputChange('amount', e.target.value), placeholder: "Enter amount", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Performance: ", _jsx(Badge, { variant: "secondary", children: semanticState.isOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "search", children: "Search" }), _jsx(Input, { id: "search", value: formData.search, onChange: (e) => handleInputChange('search', e.target.value), placeholder: "Search...", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Type: ", _jsx(Badge, { variant: "secondary", children: semanticState.detectedType?.type || 'text' })] })] })] }), _jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2", children: "Semantic State" }), _jsx("pre", { className: "text-xs text-gray-700 overflow-auto", children: JSON.stringify(semanticState, null, 2) })] })] }));
+    const renderMobileDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Keyboard State" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Visible: ", _jsx(Badge, { variant: keyboardState.isVisible ? 'default' : 'secondary', children: keyboardState.isVisible ? 'Yes' : 'No' })] }), _jsxs("div", { children: ["Height: ", keyboardState.height, "px"] }), _jsxs("div", { children: ["Type: ", _jsx(Badge, { variant: "outline", children: keyboardState.type })] }), _jsxs("div", { children: ["Platform: ", _jsx(Badge, { variant: "outline", children: keyboardState.platform })] }), _jsxs("div", { children: ["Orientation: ", _jsx(Badge, { variant: "outline", children: keyboardState.orientation })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Keyboard Optimizations" }), _jsx("div", { className: "space-y-2", children: optimizations.map((opt, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: opt.name }), _jsx(Badge, { variant: opt.applied ? 'default' : 'secondary', children: opt.applied ? 'Applied' : 'Pending' })] }, index))) })] })] }), _jsxs("div", { className: "bg-blue-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-blue-800", children: "Mobile Keyboard Features" }), _jsxs("ul", { className: "text-sm text-blue-700 space-y-1", children: [_jsx("li", { children: "\u2022 Automatic keyboard type detection" }), _jsx("li", { children: "\u2022 Platform-specific optimizations" }), _jsx("li", { children: "\u2022 Orientation-aware adjustments" }), _jsx("li", { children: "\u2022 Performance monitoring integration" }), _jsx("li", { children: "\u2022 Battery optimization support" })] })] })] }));
+    const renderTouchDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Touch State" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Touching: ", _jsx(Badge, { variant: touchState.isTouching ? 'default' : 'secondary', children: touchState.isTouching ? 'Yes' : 'No' })] }), _jsxs("div", { children: ["Touch Count: ", touchState.touchCount] }), _jsxs("div", { children: ["Duration: ", touchState.touchDuration, "ms"] }), _jsxs("div", { children: ["Velocity: ", touchState.touchVelocity.toFixed(2), "px/ms"] }), _jsxs("div", { children: ["Gesture: ", _jsx(Badge, { variant: "outline", children: touchState.gestureType })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Touch Optimizations" }), _jsx("div", { className: "space-y-2", children: touchOptimizations.map((opt, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: opt.name }), _jsx(Badge, { variant: opt.applied ? 'default' : 'secondary', children: opt.applied ? 'Applied' : 'Pending' })] }, index))) })] })] }), _jsxs("div", { className: "bg-green-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-green-800", children: "Touch-Friendly Features" }), _jsxs("ul", { className: "text-sm text-green-700 space-y-1", children: [_jsx("li", { children: "\u2022 44px minimum touch targets" }), _jsx("li", { children: "\u2022 Multi-touch gesture support" }), _jsx("li", { children: "\u2022 Touch feedback and animations" }), _jsx("li", { children: "\u2022 Performance monitoring" }), _jsx("li", { children: "\u2022 Accessibility compliance" })] })] })] }));
+    const renderPerformanceDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Performance Metrics" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Frame Rate: ", performanceMetrics.frameRate, " FPS"] }), _jsxs("div", { children: ["Input Latency: ", performanceMetrics.inputLatency.toFixed(2), "ms"] }), _jsxs("div", { children: ["Memory Usage: ", performanceMetrics.memoryUsage, "MB"] }), _jsxs("div", { children: ["Battery Level: ", (performanceMetrics.batteryLevel * 100).toFixed(1), "%"] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Performance Status" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Frame Rate" }), _jsx(Badge, { variant: performanceMetrics.frameRate >= 60 ? 'default' : 'destructive', children: performanceMetrics.frameRate >= 60 ? 'Optimal' : 'Low' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Input Latency" }), _jsx(Badge, { variant: performanceMetrics.inputLatency < 16 ? 'default' : 'destructive', children: performanceMetrics.inputLatency < 16 ? 'Optimal' : 'High' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Memory" }), _jsx(Badge, { variant: performanceMetrics.memoryUsage < 100 ? 'default' : 'destructive', children: performanceMetrics.memoryUsage < 100 ? 'Optimal' : 'High' })] })] })] })] }), _jsxs("div", { className: "bg-purple-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-purple-800", children: "Performance Features" }), _jsxs("ul", { className: "text-sm text-purple-700 space-y-1", children: [_jsx("li", { children: "\u2022 Real-time performance monitoring" }), _jsx("li", { children: "\u2022 Memory usage optimization" }), _jsx("li", { children: "\u2022 Battery-conscious operations" }), _jsx("li", { children: "\u2022 Frame rate optimization" }), _jsx("li", { children: "\u2022 Input latency tracking" })] })] })] }));
+    const renderAccessibilityDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Accessibility Features" }), _jsx("div", { className: "space-y-2", children: accessibilityFeatures.map((feature, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: feature.name }), _jsx(Badge, { variant: feature.enabled ? 'default' : 'secondary', children: feature.enabled ? 'Enabled' : 'Disabled' })] }, index))) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Accessibility Score" }), _jsxs("div", { className: "text-center p-4 bg-blue-50 rounded-lg", children: [_jsxs("div", { className: "text-3xl font-bold text-blue-600", children: [accessibilityFeatures.filter(f => f.enabled).length, "/", accessibilityFeatures.length] }), _jsx("div", { className: "text-sm text-blue-700", children: "Features Enabled" })] })] })] }), _jsxs("div", { className: "bg-orange-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-orange-800", children: "Accessibility Features" }), _jsxs("ul", { className: "text-sm text-orange-700 space-y-1", children: [_jsx("li", { children: "\u2022 ARIA labels and descriptions" }), _jsx("li", { children: "\u2022 Keyboard navigation support" }), _jsx("li", { children: "\u2022 Screen reader optimization" }), _jsx("li", { children: "\u2022 Focus management" }), _jsx("li", { children: "\u2022 High contrast support" })] })] })] }));
+    return (_jsxs("div", { className: "max-w-6xl mx-auto p-6 space-y-6", children: [_jsxs("div", { className: "text-center space-y-4", children: [_jsx("h1", { className: "text-4xl font-bold text-gray-900", children: "\uD83C\uDFAF Story 12: Semantic Input System & Mobile Keyboard Optimization" }), _jsx("p", { className: "text-xl text-gray-600 max-w-3xl mx-auto", children: "Advanced input system with semantic type detection, mobile keyboard optimization, touch-friendly behavior, performance monitoring, and accessibility support." }), _jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Semantic Types" }), _jsx(Badge, { variant: "secondary", children: "Mobile Keyboard" }), _jsx(Badge, { variant: "outline", children: "Touch Optimization" }), _jsx(Badge, { variant: "destructive", children: "Performance" }), _jsx(Badge, { variant: "default", children: "Accessibility" })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2 justify-center", children: [_jsx(Button, { variant: activeDemo === 'semantic' ? 'default' : 'outline', onClick: () => handleDemoChange('semantic'), children: "\uD83E\uDDE0 Semantic Input" }), _jsx(Button, { variant: activeDemo === 'mobile' ? 'default' : 'outline', onClick: () => handleDemoChange('mobile'), children: "\uD83D\uDCF1 Mobile Keyboard" }), _jsx(Button, { variant: activeDemo === 'touch' ? 'default' : 'outline', onClick: () => handleDemoChange('touch'), children: "\uD83D\uDC46 Touch Friendly" }), _jsx(Button, { variant: activeDemo === 'performance' ? 'default' : 'outline', onClick: () => handleDemoChange('performance'), children: "\u26A1 Performance" }), _jsx(Button, { variant: activeDemo === 'accessibility' ? 'default' : 'outline', onClick: () => handleDemoChange('accessibility'), children: "\u267F Accessibility" })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [activeDemo === 'semantic' && '🧠 Semantic Input System', activeDemo === 'mobile' && '📱 Mobile Keyboard Optimization', activeDemo === 'touch' && '👆 Touch-Friendly Interface', activeDemo === 'performance' && '⚡ Performance Monitoring', activeDemo === 'accessibility' && '♿ Accessibility Features'] }), _jsxs(CardDescription, { children: [activeDemo === 'semantic' && 'Intelligent input type detection and mobile keyboard optimization', activeDemo === 'mobile' && 'Platform-aware keyboard behavior and mobile-specific enhancements', activeDemo === 'touch' && 'Touch-optimized interactions with 44px minimum targets', activeDemo === 'performance' && 'Real-time performance monitoring and optimization', activeDemo === 'accessibility' && 'Comprehensive accessibility support and compliance'] })] }), _jsxs(CardContent, { children: [activeDemo === 'semantic' && renderSemanticDemo(), activeDemo === 'mobile' && renderMobileDemo(), activeDemo === 'touch' && renderTouchDemo(), activeDemo === 'performance' && renderPerformanceDemo(), activeDemo === 'accessibility' && renderAccessibilityDemo()] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83C\uDFAF Next Steps" }) }), _jsx(CardContent, { children: _jsxs("ul", { className: "text-sm space-y-2", children: [_jsx("li", { children: "\u2705 Story 12: Semantic Input System [COMPLETE]" }), _jsx("li", { children: "\uD83D\uDD27 Story 13: Touch-Friendly Interface" }), _jsx("li", { children: "\uD83C\uDFA8 Story 14: Advanced Transitions" }), _jsx("li", { children: "\uD83D\uDCF1 Story 15: Mobile Experience Polish" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83D\uDE80 Features" }) }), _jsx(CardContent, { children: _jsxs("ul", { className: "text-sm space-y-2", children: [_jsx("li", { children: "\u2022 Semantic input type detection" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization" }), _jsx("li", { children: "\u2022 Touch-friendly behavior" }), _jsx("li", { children: "\u2022 Performance monitoring" }), _jsx("li", { children: "\u2022 Accessibility compliance" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83D\uDCCA Status" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Components:" }), _jsx(Badge, { variant: "default", children: "6/6" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Hooks:" }), _jsx(Badge, { variant: "default", children: "6/6" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Tests:" }), _jsx(Badge, { variant: "default", children: "Passing" })] })] }) })] })] })] }));
+};

package/dist/components/ui/theme-customizer.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { CompleteThemeConfig } from '../../themes/types.js';
+export interface ThemeCustomizerProps {
+    initialTheme?: string;
+    onThemeChange?: (theme: CompleteThemeConfig) => void;
+    showPreview?: boolean;
+    allowCustomization?: boolean;
+    className?: string;
+}
+export interface CustomizationState {
+    colors: {
+        primary: string;
+        secondary: string;
+    };
+    fonts: {
+        primary: string;
+        secondary: string;
+    };
+    spacing: {
+        scale: number;
+    };
+    shadows: {
+        intensity: number;
+    };
+}
+export declare const ThemeCustomizer: React.FC<ThemeCustomizerProps>;
+//# sourceMappingURL=theme-customizer.d.ts.map