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

package/dist/components/ui/advanced-component-architecture-demo.esm.js

@@ -8,7 +8,7 @@ import { useMobileOptimization } from '../../hooks/use-mobile-optimization'
 import { useReusableArchitecture } from '../../hooks/use-reusable-architecture'
 import { useAccessibilitySupport } from '../../hooks/use-accessibility-support'
 
-export const AdvancedComponentArchitectureDemo= () => {
+export const AdvancedComponentArchitectureDemo: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'patterns' | 'performance' | 'mobile' | 'architecture' | 'accessibility'>('patterns')
   const [showPatternDemo, setShowPatternDemo] = useState(true)
   const [showPerformanceDemo, setShowPerformanceDemo] = useState(true)
@@ -18,69 +18,74 @@ export const AdvancedComponentArchitectureDemo= () => {
 
   // Hooks
   const advancedPatterns = useAdvancedPatterns({
-    enableCompoundComponents,
-    enableRenderProps,
-    enableHigherOrderComponents,
-    enableCustomHooks,
-    enablePerformanceOptimization,
-    enableAccessibilitySupport}, {
-    onPatternApplied, component) => console.log('Pattern applied, pattern, component),
-    onPerformanceOptimized) => console.log('Performance optimized, optimization),
-    onAccessibilityEnhanced) => console.log('Accessibility enhanced, feature)
+    enableCompoundComponents: true,
+    enableRenderProps: true,
+    enableHigherOrderComponents: true,
+    enableCustomHooks: true,
+    enablePerformanceOptimization: true,
+    enableAccessibilitySupport: true
+  }, {
+    onPatternApplied: (pattern, component) => console.log('Pattern applied:', pattern, component),
+    onPerformanceOptimized: (optimization) => console.log('Performance optimized:', optimization),
+    onAccessibilityEnhanced: (feature) => console.log('Accessibility enhanced:', feature)
   })
 
   const componentPerformance = useComponentPerformance({
-    enableMemoization,
-    enableLazyLoading,
-    enableVirtualization,
-    enablePerformanceMonitoring,
-    enableAutoOptimization}, {
-    onPerformanceWarning) => console.log('Performance warning, metrics),
-    onOptimizationApplied, component) => console.log('Optimization applied, type, component),
-    onPerformanceImproved) => console.log('Performance improved, improvement),
-    onMemoryWarning) => console.log('Memory warning, usage)
+    enableMemoization: true,
+    enableLazyLoading: true,
+    enableVirtualization: true,
+    enablePerformanceMonitoring: true,
+    enableAutoOptimization: true
+  }, {
+    onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
+    onOptimizationApplied: (type, component) => console.log('Optimization applied:', type, component),
+    onPerformanceImproved: (improvement) => console.log('Performance improved:', improvement),
+    onMemoryWarning: (usage) => console.log('Memory warning:', usage)
   })
 
   const mobileOptimization = useMobileOptimization({
-    enableTouchOptimization,
-    enablePerformanceOptimization,
-    enableBatteryOptimization,
-    enableAccessibilityOptimization,
-    enableResponsiveOptimization}, {
-    onMobileOptimized) => console.log('Mobile optimized, optimization),
-    onTouchOptimized) => console.log('Touch optimized, feature),
-    onPerformanceOptimized) => console.log('Performance optimized, improvement),
-    onBatteryOptimized) => console.log('Battery optimized, strategy),
-    onAccessibilityEnhanced) => console.log('Accessibility enhanced, feature)
+    enableTouchOptimization: true,
+    enablePerformanceOptimization: true,
+    enableBatteryOptimization: true,
+    enableAccessibilityOptimization: true,
+    enableResponsiveOptimization: true
+  }, {
+    onMobileOptimized: (optimization) => console.log('Mobile optimized:', optimization),
+    onTouchOptimized: (feature) => console.log('Touch optimized:', feature),
+    onPerformanceOptimized: (improvement) => console.log('Performance optimized:', improvement),
+    onBatteryOptimized: (strategy) => console.log('Battery optimized:', strategy),
+    onAccessibilityEnhanced: (feature) => console.log('Accessibility enhanced:', feature)
   })
 
   const reusableArchitecture = useReusableArchitecture({
-    enableComponentComposition,
-    enablePatternSharing,
-    enableStyleSharing,
-    enableBehaviorSharing,
-    enableTemplateSystem,
-    enableComponentRegistry}, {
-    onTemplateCreated) => console.log('Template created, template),
-    onPatternShared) => console.log('Pattern shared, pattern),
-    onStyleShared) => console.log('Style shared, style),
-    onBehaviorShared) => console.log('Behavior shared, behavior),
-    onArchitectureOptimized) => console.log('Architecture optimized, optimization)
+    enableComponentComposition: true,
+    enablePatternSharing: true,
+    enableStyleSharing: true,
+    enableBehaviorSharing: true,
+    enableTemplateSystem: true,
+    enableComponentRegistry: true
+  }, {
+    onTemplateCreated: (template) => console.log('Template created:', template),
+    onPatternShared: (pattern) => console.log('Pattern shared:', pattern),
+    onStyleShared: (style) => console.log('Style shared:', style),
+    onBehaviorShared: (behavior) => console.log('Behavior shared:', behavior),
+    onArchitectureOptimized: (optimization) => console.log('Architecture optimized:', optimization)
   })
 
   const accessibilitySupport = useAccessibilitySupport({
-    enableAriaSupport,
-    enableKeyboardNavigation,
-    enableScreenReaderSupport,
-    enableFocusManagement,
-    enableHighContrast,
-    enableReducedMotion,
-    enableVoiceControl}, {
-    onAriaEnhanced) => console.log('ARIA enhanced, feature),
-    onKeyboardNavigationEnabled) => console.log('Keyboard navigation enabled, feature),
-    onScreenReaderEnhanced) => console.log('Screen reader enhanced, feature),
-    onFocusManagementImproved) => console.log('Focus management improved, feature),
-    onAccessibilityWarning) => console.log('Accessibility warning, warning)
+    enableAriaSupport: true,
+    enableKeyboardNavigation: true,
+    enableScreenReaderSupport: true,
+    enableFocusManagement: true,
+    enableHighContrast: true,
+    enableReducedMotion: true,
+    enableVoiceControl: true
+  }, {
+    onAriaEnhanced: (feature) => console.log('ARIA enhanced:', feature),
+    onKeyboardNavigationEnabled: (feature) => console.log('Keyboard navigation enabled:', feature),
+    onScreenReaderEnhanced: (feature) => console.log('Screen reader enhanced:', feature),
+    onFocusManagementImproved: (feature) => console.log('Focus management improved:', feature),
+    onAccessibilityWarning: (warning) => console.log('Accessibility warning:', warning)
   })
 
   // Demo functions
@@ -90,29 +95,31 @@ export const AdvancedComponentArchitectureDemo= () => {
     const SubComponent = () => <div>Sub Component</div>
     
     const compoundComponent = advancedPatterns.createCompoundComponent(BaseComponent, {
-      Sub})
+      Sub: SubComponent
+    })
     
     // Demonstrate render props
-    const renderPropsData = { message}
+    const renderPropsData = { message: 'Hello from Render Props!' }
     const renderPropsComponent = advancedPatterns.createRenderPropsComponent({
-      data,
-      loading,
-      error,
-      render) => <div>Render Props}</div>
+      data: renderPropsData,
+      loading: false,
+      error: null,
+      render: (data) => <div>Render Props: {data.message}</div>
     })
     
     // Demonstrate higher-order components
     const enhancedComponent = advancedPatterns.createHigherOrderComponent({
-      component,
-      props},
-      enhancers) => (props) => <div className="enhanced"><Component {...props} /></div>
+      component: BaseComponent,
+      props: { enhanced: true },
+      enhancers: [
+        (Component) => (props: any) => <div className="enhanced"><Component {...props} /></div>
       ]
     })
     
     // Demonstrate custom hooks
     const customHookResult = advancedPatterns.createCustomHook('DemoHook', () => 'Custom Hook Result')
     
-    console.log('Patterns demonstrated, {
+    console.log('Patterns demonstrated:', {
       compoundComponent,
       renderPropsComponent,
       enhancedComponent,
@@ -126,11 +133,11 @@ export const AdvancedComponentArchitectureDemo= () => {
     
     // Demonstrate lazy loading
     const lazyComponent = componentPerformance.lazyLoadComponent('DemoComponent', () => 
-      Promise.resolve({ default) => <div>Lazy Loaded Component</div> })
+      Promise.resolve({ default: () => <div>Lazy Loaded Component</div> })
     )
     
     // Demonstrate virtualization
-    const items = Array.from({ length}, (_, i) => `Item ${i}`)
+    const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`)
     const virtualizedList = componentPerformance.createVirtualizedList(
       items,
       50,
@@ -145,7 +152,7 @@ export const AdvancedComponentArchitectureDemo= () => {
     // Demonstrate auto-optimization
     componentPerformance.autoOptimize('DemoComponent')
     
-    console.log('Performance optimizations demonstrated, {
+    console.log('Performance optimizations demonstrated:', {
       memoizedValue,
       lazyComponent,
       virtualizedList
@@ -180,55 +187,56 @@ export const AdvancedComponentArchitectureDemo= () => {
     // Demonstrate component composition
     const BaseComponent = () => <div>Base Component</div>
     const enhancedComponent = reusableArchitecture.composeComponent(BaseComponent, [
-      (Component) => (props) => <div className="enhanced"><Component {...props} /></div>,
-      (Component) => (props) => <div className="wrapped"><Component {...props} /></div>
+      (Component) => (props: any) => <div className="enhanced"><Component {...props} /></div>,
+      (Component) => (props: any) => <div className="wrapped"><Component {...props} /></div>
     ])
     
     // Demonstrate template creation
     const templateId = reusableArchitecture.createTemplate({
-      name,
-      component,
-      props},
-      styles},
-      behaviors, 'hoverable'],
-      patterns, 'enhanced']
+      name: 'Demo Template',
+      component: BaseComponent,
+      props: { demo: true },
+      styles: { padding: '1rem' },
+      behaviors: ['clickable', 'hoverable'],
+      patterns: ['compound', 'enhanced']
     })
     
     // Demonstrate pattern sharing
     const patternId = reusableArchitecture.sharePattern({
-      name,
-      description,
-      implementation,
-      usage, 'Component2'],
-      category})
+      name: 'Demo Pattern',
+      description: 'A demonstration pattern',
+      implementation: 'Pattern implementation details',
+      usage: ['Component1', 'Component2'],
+      category: 'composition'
+    })
     
     // Demonstrate style sharing
     const styleId = reusableArchitecture.shareStyle({
-      name,
-      css; }',
-      variables},
-      breakpoints},
-      usage]
+      name: 'Demo Style',
+      css: '.demo-style { color: blue; }',
+      variables: { '--demo-color': 'blue' },
+      breakpoints: { mobile: 'max-width: 768px' },
+      usage: ['Component1']
     })
     
     // Demonstrate behavior sharing
     const behaviorId = reusableArchitecture.shareBehavior({
-      name,
-      description,
-      hook,
-      dependencies],
-      usage]
+      name: 'Demo Behavior',
+      description: 'A demonstration behavior',
+      hook: 'useDemoBehavior',
+      dependencies: ['react'],
+      usage: ['Component1']
     })
     
     // Demonstrate component registry
     reusableArchitecture.registerComponent('DemoComponent', BaseComponent, {
-      name,
-      description,
-      category,
-      tags, 'example']
+      name: 'Demo Component',
+      description: 'A demonstration component',
+      category: 'demo',
+      tags: ['demo', 'example']
     })
     
-    console.log('Architecture demonstrated, {
+    console.log('Architecture demonstrated:', {
       enhancedComponent,
       templateId,
       patternId,
@@ -240,15 +248,17 @@ export const AdvancedComponentArchitectureDemo= () => {
   const demonstrateAccessibility = useCallback(() => {
     // Demonstrate ARIA support
     accessibilitySupport.enhanceAriaSupport('DemoElement', {
-      'aria-label',
-      'aria-describedby',
-      'role'})
+      'aria-label': 'Demo Element',
+      'aria-describedby': 'demo-description',
+      'role': 'button'
+    })
     
     // Demonstrate keyboard navigation
     accessibilitySupport.enableKeyboardNavigation('DemoElement', {
-      'Enter',
-      'Space',
-      'Tab'})
+      'Enter': 'Activate',
+      'Space': 'Toggle',
+      'Tab': 'Navigate'
+    })
     
     // Demonstrate screen reader support
     accessibilitySupport.enhanceScreenReaderSupport('DemoElement', 'This is a demo element for screen readers')
@@ -283,11 +293,11 @@ export const AdvancedComponentArchitectureDemo= () => {
   }, [demonstratePatterns, demonstratePerformance, demonstrateMobileOptimization, demonstrateArchitecture, demonstrateAccessibility])
 
   const tabs = [
-    { id, label, icon},
-    { id, label, icon},
-    { id, label, icon},
-    { id, label, icon},
-    { id, label, icon}
+    { id: 'patterns', label: 'Advanced Patterns', icon: '🧩' },
+    { id: 'performance', label: 'Performance', icon: '⚡' },
+    { id: 'mobile', label: 'Mobile Optimization', icon: '📱' },
+    { id: 'architecture', label: 'Reusable Architecture', icon: '🏗️' },
+    { id: 'accessibility', label: 'Accessibility', icon: '♿' }
   ]
 
   return (
@@ -314,7 +324,7 @@ export const AdvancedComponentArchitectureDemo= () => {
         {tabs.map((tab) => (
           <Button
             key={tab.id}
-            variant={activeTab === tab.id ? 'default' }
+            variant={activeTab === tab.id ? 'default' : 'outline'}
             size="sm"
             onClick={() => setActiveTab(tab.id as any)}
             className="flex items-center gap-2"
@@ -338,27 +348,32 @@ export const AdvancedComponentArchitectureDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md="space-y-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-3">
                 <h4 className="font-medium">Pattern Status</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Compound Components={advancedPatterns.hasPattern('Compound Components') ? 'default' }>
-                      {advancedPatterns.hasPattern('Compound Components') ? 'Active' }
+                    <span className="text-sm">Compound Components:</span>
+                    <Badge variant={advancedPatterns.hasPattern('Compound Components') ? 'default' : 'secondary'}>
+                      {advancedPatterns.hasPattern('Compound Components') ? 'Active' : 'Inactive'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Render Props={advancedPatterns.hasPattern('Render Props') ? 'default' }>
-                      {advancedPatterns.hasPattern('Render Props') ? 'Active' }
+                    <span className="text-sm">Render Props:</span>
+                    <Badge variant={advancedPatterns.hasPattern('Render Props') ? 'default' : 'secondary'}>
+                      {advancedPatterns.hasPattern('Render Props') ? 'Active' : 'Inactive'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Higher-Order Components={advancedPatterns.hasPattern('Higher-Order Components') ? 'default' }>
-                      {advancedPatterns.hasPattern('Higher-Order Components') ? 'Active' }
+                    <span className="text-sm">Higher-Order Components:</span>
+                    <Badge variant={advancedPatterns.hasPattern('Higher-Order Components') ? 'default' : 'secondary'}>
+                      {advancedPatterns.hasPattern('Higher-Order Components') ? 'Active' : 'Inactive'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Custom Hooks={advancedPatterns.hasPattern('Custom Hooks') ? 'default' }>
-                      {advancedPatterns.hasPattern('Custom Hooks') ? 'Active' }
+                    <span className="text-sm">Custom Hooks:</span>
+                    <Badge variant={advancedPatterns.hasPattern('Custom Hooks') ? 'default' : 'secondary'}>
+                      {advancedPatterns.hasPattern('Custom Hooks') ? 'Active' : 'Inactive'}
                     </Badge>
                   </div>
                 </div>
@@ -368,13 +383,16 @@ export const AdvancedComponentArchitectureDemo= () => {
                 <h4 className="font-medium">Pattern Analysis</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Total Patterns="text-sm text-cs-text-secondary">{advancedPatterns.patterns.length}</span>
+                    <span className="text-sm">Total Patterns:</span>
+                    <span className="text-sm text-cs-text-secondary">{advancedPatterns.patterns.length}</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Unique Patterns="text-sm text-cs-text-secondary">{advancedPatterns.analyzePatterns().uniquePatterns}</span>
+                    <span className="text-sm">Unique Patterns:</span>
+                    <span className="text-sm text-cs-text-secondary">{advancedPatterns.analyzePatterns().uniquePatterns}</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Optimization Level="outline">{advancedPatterns.patterns.length > 0 ? 'Optimized' }</Badge>
+                    <span className="text-sm">Optimization Level:</span>
+                    <Badge variant="outline">{advancedPatterns.patterns.length > 0 ? 'Optimized' : 'Not Optimized'}</Badge>
                   </div>
                 </div>
               </div>
@@ -400,7 +418,8 @@ export const AdvancedComponentArchitectureDemo= () => {
             {/* Pattern Recommendations */}
             {advancedPatterns.getPatternRecommendations().length > 0 && (
               <div className="p-3 bg-cs-accent/10 rounded-lg">
-                <h4 className="font-medium text-sm mb-2">Pattern Recommendations="text-xs text-cs-text-secondary space-y-1">
+                <h4 className="font-medium text-sm mb-2">Pattern Recommendations:</h4>
+                <ul className="text-xs text-cs-text-secondary space-y-1">
                   {advancedPatterns.getPatternRecommendations().map((recommendation, index) => (
                     <li key={index}>• {recommendation}</li>
                   ))}
@@ -411,7 +430,8 @@ export const AdvancedComponentArchitectureDemo= () => {
             {/* Pattern Validation */}
             {advancedPatterns.validatePatterns().warnings.length > 0 && (
               <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-                <h4 className="font-medium text-sm mb-2 text-yellow-800">Pattern Warnings="text-xs text-yellow-700 space-y-1">
+                <h4 className="font-medium text-sm mb-2 text-yellow-800">Pattern Warnings:</h4>
+                <ul className="text-xs text-yellow-700 space-y-1">
                   {advancedPatterns.validatePatterns().warnings.map((warning, index) => (
                     <li key={index}>• {warning}</li>
                   ))}
@@ -428,8 +448,8 @@ export const AdvancedComponentArchitectureDemo= () => {
           <CardHeader>
             <CardTitle className="text-xl flex items-center gap-2">
               ⚡ Component Performance Optimization
-              <Badge variant={componentPerformance.isPerformanceOptimized() ? 'default' }>
-                {componentPerformance.isPerformanceOptimized() ? 'Optimized' }
+              <Badge variant={componentPerformance.isPerformanceOptimized() ? 'default' : 'secondary'}>
+                {componentPerformance.isPerformanceOptimized() ? 'Optimized' : 'Not Optimized'}
               </Badge>
             </CardTitle>
             <CardDescription>
@@ -437,7 +457,9 @@ export const AdvancedComponentArchitectureDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-2 lg="text-2xl font-bold text-cs-primary">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
+              <div>
+                <p className="text-2xl font-bold text-cs-primary">
                   {componentPerformance.metrics.renderTime.toFixed(2)}ms
                 </p>
                 <p className="text-sm text-cs-text-secondary">Render Time</p>
@@ -481,14 +503,17 @@ export const AdvancedComponentArchitectureDemo= () => {
 
             {/* Performance Analysis */}
             <div className="p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Performance Analysis="grid grid-cols-2 gap-4 text-sm">
+              <h4 className="font-medium text-sm mb-2">Performance Analysis:</h4>
+              <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="font-medium">Needs Optimization="text-cs-text-secondary">
-                    {componentPerformance.analyzePerformance().needsOptimization ? 'Yes' }
+                  <span className="font-medium">Needs Optimization:</span>
+                  <div className="text-cs-text-secondary">
+                    {componentPerformance.analyzePerformance().needsOptimization ? 'Yes' : 'No'}
                   </div>
                 </div>
                 <div>
-                  <span className="font-medium">Optimization Score="text-cs-text-secondary">
+                  <span className="font-medium">Optimization Score:</span>
+                  <div className="text-cs-text-secondary">
                     {componentPerformance.analyzePerformance().optimizationScore.toFixed(1)}%
                   </div>
                 </div>
@@ -498,7 +523,8 @@ export const AdvancedComponentArchitectureDemo= () => {
             {/* Performance Recommendations */}
             {componentPerformance.analyzePerformance().recommendations.length > 0 && (
               <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
-                <h4 className="font-medium text-sm mb-2 text-blue-800">Performance Recommendations="text-xs text-blue-700 space-y-1">
+                <h4 className="font-medium text-sm mb-2 text-blue-800">Performance Recommendations:</h4>
+                <ul className="text-xs text-blue-700 space-y-1">
                   {componentPerformance.analyzePerformance().recommendations.map((recommendation, index) => (
                     <li key={index}>• {recommendation}</li>
                   ))}
@@ -515,8 +541,8 @@ export const AdvancedComponentArchitectureDemo= () => {
           <CardHeader>
             <CardTitle className="text-xl flex items-center gap-2">
               📱 Mobile Optimization
-              <Badge variant={mobileOptimization.isMobileOptimized() ? 'default' }>
-                {mobileOptimization.isMobileOptimized() ? 'Optimized' }
+              <Badge variant={mobileOptimization.isMobileOptimized() ? 'default' : 'secondary'}>
+                {mobileOptimization.isMobileOptimized() ? 'Optimized' : 'Not Optimized'}
               </Badge>
             </CardTitle>
             <CardDescription>
@@ -524,24 +550,29 @@ export const AdvancedComponentArchitectureDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md="space-y-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-3">
                 <h4 className="font-medium">Device Information</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Device Type={mobileOptimization.state.isMobile ? 'default' }>
-                      {mobileOptimization.state.isMobile ? 'Mobile' }
+                    <span className="text-sm">Device Type:</span>
+                    <Badge variant={mobileOptimization.state.isMobile ? 'default' : 'secondary'}>
+                      {mobileOptimization.state.isMobile ? 'Mobile' : 'Desktop'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Touch Device={mobileOptimization.state.isTouchDevice ? 'default' }>
-                      {mobileOptimization.state.isTouchDevice ? 'Yes' }
+                    <span className="text-sm">Touch Device:</span>
+                    <Badge variant={mobileOptimization.state.isTouchDevice ? 'default' : 'secondary'}>
+                      {mobileOptimization.state.isTouchDevice ? 'Yes' : 'No'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Screen Size="outline">{mobileOptimization.state.screenSize}</Badge>
+                    <span className="text-sm">Screen Size:</span>
+                    <Badge variant="outline">{mobileOptimization.state.screenSize}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Orientation="outline">{mobileOptimization.state.orientation}</Badge>
+                    <span className="text-sm">Orientation:</span>
+                    <Badge variant="outline">{mobileOptimization.state.orientation}</Badge>
                   </div>
                 </div>
               </div>
@@ -550,16 +581,20 @@ export const AdvancedComponentArchitectureDemo= () => {
                 <h4 className="font-medium">Optimization Status</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Touch Optimized="outline">{mobileOptimization.analyzeMobileOptimization().touchOptimized ? 'Yes' }</Badge>
+                    <span className="text-sm">Touch Optimized:</span>
+                    <Badge variant="outline">{mobileOptimization.analyzeMobileOptimization().touchOptimized ? 'Yes' : 'No'}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Performance Optimized="outline">{mobileOptimization.analyzeMobileOptimization().performanceOptimized ? 'Yes' }</Badge>
+                    <span className="text-sm">Performance Optimized:</span>
+                    <Badge variant="outline">{mobileOptimization.analyzeMobileOptimization().performanceOptimized ? 'Yes' : 'No'}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Battery Optimized="outline">{mobileOptimization.analyzeMobileOptimization().batteryOptimized ? 'Yes' }</Badge>
+                    <span className="text-sm">Battery Optimized:</span>
+                    <Badge variant="outline">{mobileOptimization.analyzeMobileOptimization().batteryOptimized ? 'Yes' : 'No'}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Accessibility Optimized="outline">{mobileOptimization.analyzeMobileOptimization().accessibilityOptimized ? 'Yes' }</Badge>
+                    <span className="text-sm">Accessibility Optimized:</span>
+                    <Badge variant="outline">{mobileOptimization.analyzeMobileOptimization().accessibilityOptimized ? 'Yes' : 'No'}</Badge>
                   </div>
                 </div>
               </div>
@@ -585,7 +620,8 @@ export const AdvancedComponentArchitectureDemo= () => {
             {/* Mobile Recommendations */}
             {mobileOptimization.analyzeMobileOptimization().recommendations.length > 0 && (
               <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
-                <h4 className="font-medium text-sm mb-2 text-green-800">Mobile Optimization Recommendations="text-xs text-green-700 space-y-1">
+                <h4 className="font-medium text-sm mb-2 text-green-800">Mobile Optimization Recommendations:</h4>
+                <ul className="text-xs text-green-700 space-y-1">
                   {mobileOptimization.analyzeMobileOptimization().recommendations.map((recommendation, index) => (
                     <li key={index}>• {recommendation}</li>
                   ))}
@@ -609,7 +645,9 @@ export const AdvancedComponentArchitectureDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-2 lg="text-2xl font-bold text-cs-primary">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
+              <div>
+                <p className="text-2xl font-bold text-cs-primary">
                   {reusableArchitecture.templates.length}
                 </p>
                 <p className="text-sm text-cs-text-secondary">Templates</p>
@@ -653,14 +691,17 @@ export const AdvancedComponentArchitectureDemo= () => {
 
             {/* Architecture Analysis */}
             <div className="p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Architecture Analysis="grid grid-cols-2 gap-4 text-sm">
+              <h4 className="font-medium text-sm mb-2">Architecture Analysis:</h4>
+              <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="font-medium">Composition Level="text-cs-text-secondary">
+                  <span className="font-medium">Composition Level:</span>
+                  <div className="text-cs-text-secondary">
                     {reusableArchitecture.analyzeArchitecture().compositionLevel}
                   </div>
                 </div>
                 <div>
-                  <span className="font-medium">Reusability Score="text-cs-text-secondary">
+                  <span className="font-medium">Reusability Score:</span>
+                  <div className="text-cs-text-secondary">
                     {reusableArchitecture.analyzeArchitecture().reusabilityScore.toFixed(1)}%
                   </div>
                 </div>
@@ -670,7 +711,8 @@ export const AdvancedComponentArchitectureDemo= () => {
             {/* Architecture Recommendations */}
             {reusableArchitecture.analyzeArchitecture().recommendations.length > 0 && (
               <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg">
-                <h4 className="font-medium text-sm mb-2 text-blue-800">Architecture Recommendations="text-xs text-blue-700 space-y-1">
+                <h4 className="font-medium text-sm mb-2 text-blue-800">Architecture Recommendations:</h4>
+                <ul className="text-xs text-blue-700 space-y-1">
                   {reusableArchitecture.analyzeArchitecture().recommendations.map((recommendation, index) => (
                     <li key={index}>• {recommendation}</li>
                   ))}
@@ -687,8 +729,8 @@ export const AdvancedComponentArchitectureDemo= () => {
           <CardHeader>
             <CardTitle className="text-xl flex items-center gap-2">
               ♿ Accessibility Support
-              <Badge variant={accessibilitySupport.isAccessibilityEnhanced() ? 'default' }>
-                {accessibilitySupport.isAccessibilityEnhanced() ? 'Enhanced' }
+              <Badge variant={accessibilitySupport.isAccessibilityEnhanced() ? 'default' : 'secondary'}>
+                {accessibilitySupport.isAccessibilityEnhanced() ? 'Enhanced' : 'Basic'}
               </Badge>
             </CardTitle>
             <CardDescription>
@@ -696,27 +738,32 @@ export const AdvancedComponentArchitectureDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="grid grid-cols-1 md="space-y-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-3">
                 <h4 className="font-medium">Accessibility Features</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">ARIA Support={accessibilitySupport.state.hasAriaLabels ? 'default' }>
-                      {accessibilitySupport.state.hasAriaLabels ? 'Enabled' }
+                    <span className="text-sm">ARIA Support:</span>
+                    <Badge variant={accessibilitySupport.state.hasAriaLabels ? 'default' : 'secondary'}>
+                      {accessibilitySupport.state.hasAriaLabels ? 'Enabled' : 'Disabled'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Keyboard Navigation={accessibilitySupport.state.hasKeyboardNavigation ? 'default' }>
-                      {accessibilitySupport.state.hasKeyboardNavigation ? 'Enabled' }
+                    <span className="text-sm">Keyboard Navigation:</span>
+                    <Badge variant={accessibilitySupport.state.hasKeyboardNavigation ? 'default' : 'secondary'}>
+                      {accessibilitySupport.state.hasKeyboardNavigation ? 'Enabled' : 'Disabled'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Screen Reader={accessibilitySupport.state.hasScreenReaderSupport ? 'default' }>
-                      {accessibilitySupport.state.hasScreenReaderSupport ? 'Enabled' }
+                    <span className="text-sm">Screen Reader:</span>
+                    <Badge variant={accessibilitySupport.state.hasScreenReaderSupport ? 'default' : 'secondary'}>
+                      {accessibilitySupport.state.hasScreenReaderSupport ? 'Enabled' : 'Disabled'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Focus Management={accessibilitySupport.state.hasFocusManagement ? 'default' }>
-                      {accessibilitySupport.state.hasFocusManagement ? 'Enabled' }
+                    <span className="text-sm">Focus Management:</span>
+                    <Badge variant={accessibilitySupport.state.hasFocusManagement ? 'default' : 'secondary'}>
+                      {accessibilitySupport.state.hasFocusManagement ? 'Enabled' : 'Disabled'}
                     </Badge>
                   </div>
                 </div>
@@ -726,22 +773,26 @@ export const AdvancedComponentArchitectureDemo= () => {
                 <h4 className="font-medium">Accessibility Preferences</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">High Contrast={accessibilitySupport.state.isHighContrast ? 'default' }>
-                      {accessibilitySupport.state.isHighContrast ? 'Enabled' }
+                    <span className="text-sm">High Contrast:</span>
+                    <Badge variant={accessibilitySupport.state.isHighContrast ? 'default' : 'secondary'}>
+                      {accessibilitySupport.state.isHighContrast ? 'Enabled' : 'Disabled'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Reduced Motion={accessibilitySupport.state.isReducedMotion ? 'default' }>
-                      {accessibilitySupport.state.isReducedMotion ? 'Enabled' }
+                    <span className="text-sm">Reduced Motion:</span>
+                    <Badge variant={accessibilitySupport.state.isReducedMotion ? 'default' : 'secondary'}>
+                      {accessibilitySupport.state.isReducedMotion ? 'Enabled' : 'Disabled'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Voice Control={accessibilitySupport.state.isVoiceControlEnabled ? 'default' }>
-                      {accessibilitySupport.state.isVoiceControlEnabled ? 'Enabled' }
+                    <span className="text-sm">Voice Control:</span>
+                    <Badge variant={accessibilitySupport.state.isVoiceControlEnabled ? 'default' : 'secondary'}>
+                      {accessibilitySupport.state.isVoiceControlEnabled ? 'Enabled' : 'Disabled'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Accessibility Level="outline">{accessibilitySupport.state.accessibilityLevel}</Badge>
+                    <span className="text-sm">Accessibility Level:</span>
+                    <Badge variant="outline">{accessibilitySupport.state.accessibilityLevel}</Badge>
                   </div>
                 </div>
               </div>
@@ -766,14 +817,17 @@ export const AdvancedComponentArchitectureDemo= () => {
 
             {/* Accessibility Analysis */}
             <div className="p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Accessibility Analysis="grid grid-cols-2 gap-4 text-sm">
+              <h4 className="font-medium text-sm mb-2">Accessibility Analysis:</h4>
+              <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="font-medium">Accessibility Level="text-cs-text-secondary">
+                  <span className="font-medium">Accessibility Level:</span>
+                  <div className="text-cs-text-secondary">
                     {accessibilitySupport.analyzeAccessibility().level}
                   </div>
                 </div>
                 <div>
-                  <span className="font-medium">Feature Coverage="text-cs-text-secondary">
+                  <span className="font-medium">Feature Coverage:</span>
+                  <div className="text-cs-text-secondary">
                     {accessibilitySupport.analyzeAccessibility().coverage.toFixed(1)}%
                   </div>
                 </div>
@@ -783,7 +837,8 @@ export const AdvancedComponentArchitectureDemo= () => {
             {/* Accessibility Recommendations */}
             {accessibilitySupport.analyzeAccessibility().recommendations.length > 0 && (
               <div className="p-3 bg-green-50 border border-green-200 rounded-lg">
-                <h4 className="font-medium text-sm mb-2 text-green-800">Accessibility Recommendations="text-xs text-green-700 space-y-1">
+                <h4 className="font-medium text-sm mb-2 text-green-800">Accessibility Recommendations:</h4>
+                <ul className="text-xs text-green-700 space-y-1">
                   {accessibilitySupport.analyzeAccessibility().recommendations.map((recommendation, index) => (
                     <li key={index}>• {recommendation}</li>
                   ))}
@@ -794,7 +849,8 @@ export const AdvancedComponentArchitectureDemo= () => {
             {/* Accessibility Warnings */}
             {accessibilitySupport.accessibilityWarnings.length > 0 && (
               <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-                <h4 className="font-medium text-sm mb-2 text-yellow-800">Accessibility Warnings="text-xs text-yellow-700 space-y-1">
+                <h4 className="font-medium text-sm mb-2 text-yellow-800">Accessibility Warnings:</h4>
+                <ul className="text-xs text-yellow-700 space-y-1">
                   {accessibilitySupport.accessibilityWarnings.map((warning, index) => (
                     <li key={index}>• {warning}</li>
                   ))}
@@ -816,39 +872,39 @@ export const AdvancedComponentArchitectureDemo= () => {
         <CardContent className="space-y-4">
           <div className="flex flex-wrap gap-4">
             <Button
-              variant={showPatternDemo ? 'default' }
+              variant={showPatternDemo ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowPatternDemo(!showPatternDemo)}
             >
-              {showPatternDemo ? 'Hide' } Pattern Demo
+              {showPatternDemo ? 'Hide' : 'Show'} Pattern Demo
             </Button>
             <Button
-              variant={showPerformanceDemo ? 'default' }
+              variant={showPerformanceDemo ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowPerformanceDemo(!showPerformanceDemo)}
             >
-              {showPerformanceDemo ? 'Hide' } Performance Demo
+              {showPerformanceDemo ? 'Hide' : 'Show'} Performance Demo
             </Button>
             <Button
-              variant={showMobileDemo ? 'default' }
+              variant={showMobileDemo ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowMobileDemo(!showMobileDemo)}
             >
-              {showMobileDemo ? 'Hide' } Mobile Demo
+              {showMobileDemo ? 'Hide' : 'Show'} Mobile Demo
             </Button>
             <Button
-              variant={showArchitectureDemo ? 'default' }
+              variant={showArchitectureDemo ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowArchitectureDemo(!showArchitectureDemo)}
             >
-              {showArchitectureDemo ? 'Hide' } Architecture Demo
+              {showArchitectureDemo ? 'Hide' : 'Show'} Architecture Demo
             </Button>
             <Button
-              variant={showAccessibilityDemo ? 'default' }
+              variant={showAccessibilityDemo ? 'default' : 'outline'}
               size="sm"
               onClick={() => setShowAccessibilityDemo(!showAccessibilityDemo)}
             >
-              {showAccessibilityDemo ? 'Hide' } Accessibility Demo
+              {showAccessibilityDemo ? 'Hide' : 'Show'} Accessibility Demo
             </Button>
           </div>
         </CardContent>