@synetics/ui 0.7.0-alpha

package/src/showcase/about/about.syn

@@ -0,0 +1,59 @@
+/**
+ * Pulsar UI Showcase - About Page
+ * Refactored with modular components
+ */
+
+import { createSignal, useRouter } from '@synetics/synetics.dev';
+import { DemoButton } from '../common/components/demo-button.syn';
+import { FeatureList } from './components/feature-list.syn';
+import { RouteInfo } from './components/route-info.syn';
+import { DetailsSection } from './components/details-section.syn';
+
+export component AboutPage() {
+  const router = useRouter();
+  const [showDetails, setShowDetails] = createSignal(false);
+  
+  const toggleDetails = () => {
+    setShowDetails(!showDetails());
+  };
+  
+  const goBack = () => {
+    router.navigate('/');
+  };
+  
+  return (
+    <div style="padding: 20px;">
+      <div style="margin-bottom: 30px;">
+        <h2 style="font-size: 32px; margin-bottom: 10px; color: #3b82f6;">
+          ℹ️ About Synetics framework
+        </h2>
+        <p style="font-size: 18px; color: #9ca3af; line-height: 1.6; margin-bottom: 20px;">
+          Pulsar is a reactive UI framework built for performance and developer experience.
+        </p>
+      </div>
+      
+      <div style="background: #1a1a1a; padding: 30px; border-radius: 12px; margin-bottom: 20px;">
+        <h3 style="font-size: 24px; margin-bottom: 20px; color: #10b981;">✨ Key Features</h3>
+        <FeatureList />
+        
+        <DemoButton 
+          onClick={toggleDetails}
+          color="#6b7280"
+          style="margin-top: 20px;">
+          {showDetails() ? '▼ Hide Details' : '▶ Show More Details'}
+        </DemoButton>
+        
+        {showDetails() ? <DetailsSection /> : null}
+      </div>
+      
+      <RouteInfo router={router} />
+      
+      <DemoButton 
+        onClick={goBack}
+        color="#3b82f6"
+        size="lg">
+        ← Back to Home
+      </DemoButton>
+    </div>
+  );
+}

package/src/showcase/about/components/details-section.syn

@@ -0,0 +1,29 @@
+/**
+ * Details Section Component
+ * Expandable details about navigation system
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+interface DetailsSectionProps {
+  showDetails: Accessor<boolean>
+}
+
+export const DetailsSection = ({ showDetails }: DetailsSectionProps) => {
+  return (
+    <div style="margin-top: 20px; padding: 20px; background: #2a2a2a; border-radius: 8px; border-left: 4px solid #3b82f6;">
+      <h4 style="font-size: 18px; margin-bottom: 10px; color: #3b82f6;">Navigation System</h4>
+      <p style="color: #9ca3af; line-height: 1.6;">
+        This page demonstrates Pulsar's built-in client-side routing capabilities. 
+        The Router component uses the HTML5 History API to manage navigation without 
+        full page reloads. Features include:
+      </p>
+      <ul style="color: #9ca3af; margin-top: 10px; margin-left: 20px;">
+        <li>Declarative Route definitions</li>
+        <li>useNavigate() and useRouter() hooks</li>
+        <li>Path parameters and query strings</li>
+        <li>Navigation guards</li>
+      </ul>
+    </div>
+  );
+};

package/src/showcase/about/components/feature-list.syn

@@ -0,0 +1,23 @@
+/**
+ * Feature List Component
+ * Displays key framework features
+ */
+
+export const FeatureList = () => {
+  const features = [
+    '⚡ Signal-based reactivity',
+    '🎯 TypeScript-first design',
+    '🔄 Client-side routing with History API',
+    '📦 Component-based architecture',
+    '🎨 PSR (Pulsar Syntax) file format',
+    '🚀 Optimized build pipeline with Vite'
+  ];
+  
+  return (
+    <ul style="list-style: none; padding: 0; color: #d1d5db; font-size: 16px; line-height: 2;">
+      {features.map(feature => (
+        <li>{feature}</li>
+      ))}
+    </ul>
+  );
+};

package/src/showcase/about/components/index.ts

@@ -0,0 +1,7 @@
+/**
+ * About Components Index
+ */
+
+export { DetailsSection } from './details-section.syn';
+export { FeatureList } from './feature-list.syn';
+export { RouteInfo } from './route-info.syn';

package/src/showcase/about/components/route-info.syn

@@ -0,0 +1,29 @@
+/**
+ * Route Info Component
+ * Displays current route information
+ */
+
+interface Router {
+  location: {
+    pathname: string
+    search: string
+  }
+}
+
+interface RouteInfoProps {
+  router: Router
+}
+
+export const RouteInfo = ({ router }: RouteInfoProps) => {
+  return (
+    <div style="background: #2a2a2a; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
+      <h3 style="font-size: 20px; margin-bottom: 15px; color: #f59e0b;">Current Route Info</h3>
+      <p style="color: #9ca3af; margin-bottom: 10px;">
+        <strong style="color: white;">Current Path:</strong> {router.location.pathname}
+      </p>
+      <p style="color: #9ca3af;">
+        <strong style="color: white;">Search Params:</strong> {router.location.search || '(none)'}
+      </p>
+    </div>
+  );
+};

package/src/showcase/bootstrap/bootstrap-test.syn

@@ -0,0 +1,152 @@
+/**
+ * Bootstrap Demo Page
+ * Demonstrates pulse() API for app initialization
+ */
+
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { CodeBlock } from '../common/components/code-block.syn';
+import { IsolatedDemo } from '../common/components/isolated-demo.syn';
+import { BasicDemo } from './demos/basic-demo.syn';
+import { LifecycleDemo } from './demos/lifecycle-demo.syn';
+import { DIDemoInteractive } from './demos/di-demo-interactive.syn';
+import { ReturnValueDemo } from './demos/return-value-demo.syn';
+
+// ConfigService for isolated DI demo
+class ConfigService {
+  theme = 'dark';
+  apiUrl = 'https://api.example.com';
+}
+
+export component BootstrapTestPage() {
+  return (
+    <div>
+      <PageHeader 
+        title="App Bootstrap with pulse()"
+        emoji="⚡"
+        color="#eab308"
+        description="Initialize Pulsar applications with pulse() - the main entry point"
+      />
+      
+      <DemoSection 
+        title="1️⃣ Basic Usage" 
+        description="Minimal app initialization - Interactive Demo with Isolated pulse()"
+        borderColor="#eab308">
+        <IsolatedDemo
+          component={BasicDemo}
+          backgroundColor="linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%)"
+        />
+        <CodeBlock code={`import { pulse } from '@synetics/synetics.dev';
+import App from './app.syn';
+
+// Mount app to #app element
+pulse(App);
+
+// Or specify custom root
+pulse(App, '#root');`} />
+      </DemoSection>
+      
+      <DemoSection 
+        title="2️⃣ Configuration Object" 
+        description="Advanced initialization with lifecycle hooks - Interactive Demo"
+        borderColor="#3b82f6">
+        <LifecycleDemo />
+        <CodeBlock code={`pulse(App, {
+  root: '#app',
+  
+  onMount: (element: HTMLElement) => {
+    console.log('App mounted!', element);
+  },
+  
+  onUnmount: () => {
+    console.log('App unmounting...');
+  },
+  
+  onError: (error: Error) => {
+    console.error('App error:', error);
+    // Custom error handling
+  }
+});`} />
+      </DemoSection>
+      
+      <DemoSection 
+        title="3️⃣ With Dependency Injection" 
+        description="Integrate IoC container for services - Interactive Demo with Isolated pulse()"
+        borderColor="#8b5cf6">
+        <IsolatedDemo
+          component={DIDemoInteractive}
+          services={(sm) => {
+            sm.registerClass('config', ConfigService, {
+              lifetime: 'singleton'
+            });
+          }}
+          backgroundColor="linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)"
+        />
+        <CodeBlock code={`import { pulse, ServiceManager } from '@synetics/synetics.dev';
+import { ConfigService, ApiService } from './services';
+
+// Setup DI container
+const services = new ServiceManager();
+
+services.register('config', () => new ConfigService(), {
+  lifetime: 'singleton'
+});
+
+services.register('api', (sm) => {
+  const config = sm.resolve('config');
+  return new ApiService(config);
+}, {
+  lifetime: 'singleton',
+  dependencies: ['config']
+});
+
+// Initialize with services
+pulse(App, {
+  root: '#app',
+  services
+});`} />
+      </DemoSection>
+      
+      <DemoSection 
+        title="4️⃣ HMR Support" 
+        description="Hot Module Replacement in development"
+        borderColor="#10b981">
+        <div style="padding: 15px; background: #0f172a; border-left: 4px solid #10b981; border-radius: 4px; margin-bottom: 15px;">
+          <p style="margin: 0 0 10px 0; color: #10b981; font-weight: bold;">
+            ✨ Automatic HMR Injection
+          </p>
+          <p style="margin: 0; color: #94a3b8; font-size: 14px; line-height: 1.6;">
+            The Vite plugin automatically injects HMR handling for pulse() calls in development mode. No manual setup needed!
+          </p>
+        </div>
+        <CodeBlock code={`// main.ts
+pulse(App, { root: '#app' });
+
+// Vite plugin auto-injects:
+if (import.meta.hot) {
+  import.meta.hot.accept('./app.syn', (newModule) => {
+    // Hot reload without full page refresh
+  });
+}`} />
+      </DemoSection>
+      
+      <DemoSection 
+        title="5️⃣ Return Value" 
+        description="ApplicationRoot instance for programmatic control - Interactive Demo"
+        borderColor="#f59e0b">
+        <ReturnValueDemo />
+        <CodeBlock code={`const app = pulse(App, { root: '#app' });
+
+// Programmatic control
+app.unmount();  // Unmount application
+app.mount();    // Remount application
+
+// Access root element
+console.log(app.rootElement);
+
+// Check mount status
+console.log(app.isMounted);`} />
+      </DemoSection>
+    </div>
+  );
+}

package/src/showcase/bootstrap/components/config-service-error-view.syn

@@ -0,0 +1,41 @@
+/**
+ * Config Service Error View
+ * Displays service resolution failure with setup instructions
+ */
+
+export interface ConfigServiceErrorViewProps {
+  error: Error;
+}
+
+export component ConfigServiceErrorView(props: ConfigServiceErrorViewProps) {
+  return (
+    <div>
+      <div style="background: rgba(239, 68, 68, 0.2); padding: 15px; border-radius: 6px; border-left: 4px solid #ef4444; margin-bottom: 15px;">
+        <div style="color: #ef4444; font-weight: bold; margin-bottom: 10px; font-size: 14px;">❌ Service Resolution Failed</div>
+        <div style="color: rgba(255,255,255,0.9); font-size: 13px; line-height: 1.6;">
+          Error: {props.error.message}
+          <div style="font-family: 'Consolas', monospace; padding: 10px; background: rgba(0,0,0,0.3); margin-top: 10px; border-radius: 4px; font-size: 12px;">
+            {props.error.message}
+          </div>
+        </div>
+      </div>
+      
+      <div style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 6px; border-left: 4px solid #f59e0b;">
+        <div style="color: #f59e0b; font-weight: bold; margin-bottom: 10px; font-size: 14px;">⚠️ Setup Required</div>
+        <div style="color: rgba(255,255,255,0.8); font-size: 13px; line-height: 1.6;">
+          To fix this, configure ServiceManager in main.ts:
+          <div style="font-family: 'Consolas', monospace; padding: 10px; background: rgba(0,0,0,0.3); margin-top: 10px; border-radius: 4px; font-size: 12px;">
+            const services = new ServiceManager();<br/><br/>
+            services.register('config', () =&gt; &#123;<br/>
+            &nbsp;&nbsp;return &#123; theme: 'dark', apiUrl: '/api' &#125;;<br/>
+            &#125;, &#123; lifetime: 'singleton' &#125;);<br/><br/>
+            pulse(App, &#123;<br/>
+            &nbsp;&nbsp;root: '#app',<br/>
+            &nbsp;&nbsp;services  // ← Pass here<br/>
+            &#125;);
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/showcase/bootstrap/components/config-service-resolved-view.syn

@@ -0,0 +1,69 @@
+/**
+ * Config Service Resolved View
+ * Displays successful service resolution with theme-aware UI
+ */
+
+import type { IConfigService } from '../types/config-service.types.ts';
+
+export interface ConfigServiceResolvedViewProps {
+  config: IConfigService;
+}
+
+const getThemeStyles = (theme: string) => {
+  if (theme === 'dark') {
+    return {
+      background: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
+      borderColor: '#4b5563',
+      textColor: '#d1d5db'
+    };
+  }
+  return {
+    background: 'linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)',
+    borderColor: '#c084fc',
+    textColor: 'white'
+  };
+};
+
+export component ConfigServiceResolvedView(props: ConfigServiceResolvedViewProps) {
+  const styles = getThemeStyles(props.config.theme);
+  
+  return (
+    <div>
+      <div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 6px; border-left: 4px solid #10b981; margin-bottom: 15px;">
+        <div style="color: #10b981; font-weight: bold; margin-bottom: 10px; font-size: 14px;">✅ Service Resolved Successfully</div>
+        <div style={`color: ${styles.textColor}; font-size: 13px; line-height: 1.6;`}>
+          Component code:
+          <div style="font-family: 'Consolas', monospace; padding: 10px; background: rgba(0,0,0,0.3); margin-top: 10px; border-radius: 4px;">
+            const config = useService&lt;IConfigService&gt;('config');<br/><br/>
+            // ✅ Service is available!<br/>
+            console.log(config.theme); // "{props.config.theme}"<br/>
+            console.log(config.apiUrl); // "{props.config.apiUrl}"
+          </div>
+        </div>
+      </div>
+      
+      <div style={`background: rgba(0,0,0,0.4); padding: 20px; border-radius: 6px; border: 2px solid ${styles.borderColor}; text-align: center; transition: all 0.5s ease; margin-bottom: 15px;`}>
+        <div style="font-size: 32px; margin-bottom: 10px;">{props.config.theme === 'dark' ? '🌙' : '☀️'}</div>
+        <div style={`color: ${styles.textColor}; font-size: 16px; font-weight: bold; margin-bottom: 5px;`}>
+          Theme: {props.config.theme.toUpperCase()}
+        </div>
+        <div style={`color: ${styles.textColor}; font-size: 14px; margin-top: 10px; opacity: 0.9;`}>
+          API Endpoint: {props.config.apiUrl}
+        </div>
+        <div style={`color: ${styles.textColor}; font-size: 12px; opacity: 0.7; margin-top: 10px;`}>
+          This UI adapts based on the resolved ConfigService
+        </div>
+      </div>
+      
+      <div style="background: rgba(16, 185, 129, 0.2); padding: 15px; border-radius: 6px; border-left: 4px solid #10b981;">
+        <div style="color: #10b981; font-weight: bold; margin-bottom: 8px; font-size: 13px;">📊 Resolved Service Instance:</div>
+        <div style={`color: ${styles.textColor}; font-family: 'Consolas', monospace; font-size: 12px;`}>
+          <div style="padding: 3px 0;">typeof config: "object"</div>
+          <div style="padding: 3px 0;">config.theme: "{props.config.theme}"</div>
+          <div style="padding: 3px 0;">config.apiUrl: "{props.config.apiUrl}"</div>
+          <div style="padding: 3px 0; opacity: 0.7;">// Singleton - same instance everywhere</div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/showcase/bootstrap/demos/basic-demo.syn

@@ -0,0 +1,26 @@
+/**
+ * Basic Usage Demo Component
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+export const BasicDemo = () => {
+  const [count, setCount] = createSignal(0);
+  
+  return (
+    <div style="margin-bottom: 20px; padding: 20px; background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); border-radius: 8px;">
+      <div style="text-align: center; color: white; margin-bottom: 20px;">
+        <h3 style="margin: 0 0 15px 0; font-size: 20px; font-weight: bold;">✨ Live Counter Demo</h3>
+        <div style="font-size: 48px; font-weight: bold; margin: 20px 0;">{count()}</div>
+        <button 
+          onclick={() => setCount(count() + 1)}
+          style="padding: 12px 24px; background: white; color: #f59e0b; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+          Increment Counter
+        </button>
+      </div>
+      <div style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 6px; color: white; font-size: 13px;">
+        <strong>💡 This demonstrates:</strong> A reactive component mounted with pulse(App). The counter updates instantly without page reload.
+      </div>
+    </div>
+  );
+};

package/src/showcase/bootstrap/demos/di-demo-interactive.syn

@@ -0,0 +1,94 @@
+/**
+ * DI Demo Component (Interactive)
+ * User clicks button to demonstrate service resolution
+ */
+
+import { createSignal, useService } from '@synetics/synetics.dev';
+import type { IConfigService } from '../types/config-service.types.ts';
+import { ConfigServiceResolvedView } from '../components/config-service-resolved-view.syn';
+import { ConsoleLogViewer } from '../../common/components/console-log-viewer.syn';
+import { useLogger } from '../../common/hooks/use-logger.ts';
+
+export const DIDemoInteractive = () => {
+  const [resolved, setResolved] = createSignal(false);
+  const [config, setConfig] = createSignal<IConfigService | null>(null);
+  const [error, setError] = createSignal<string | null>(null);
+  
+  // Use the logger hook
+  const logger = useLogger('[DIDemoInteractive]');
+  
+  const handleResolve = () => {
+    try {
+      // Resolve service when button clicked
+      const service = useService<IConfigService>('config');
+      setConfig(service);
+      setResolved(true);
+      logger.log(`✅ Service resolved successfully - Theme: ${service.theme}`);
+    } catch (err) {
+      const errorMsg = (err as Error).message;
+      setError(errorMsg);
+      logger.error(`❌ Resolution failed: ${errorMsg}`);
+    }
+  };
+  
+  const getThemeStyles = () => {
+    const theme = config()?.theme;
+    if (theme === 'dark') {
+      return {
+        background: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
+        borderColor: '#4b5563',
+        textColor: '#d1d5db'
+      };
+    }
+    return {
+      background: 'linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)',
+      borderColor: '#c084fc',
+      textColor: 'white'
+    };
+  };
+  
+  return (
+    <div style={`transition: all 0.5s ease;`}>
+      <div style="text-align: center; margin-bottom: 20px;">
+        <div style="font-size: 48px; margin-bottom: 10px;">🔌</div>
+        <div style={`color: ${getThemeStyles().textColor}; font-size: 18px; font-weight: bold; margin-bottom: 20px; transition: color 0.5s ease;`}>
+          Dependency Injection with useService()
+        </div>
+        <button 
+          onclick={() => {
+            if (!resolved()) handleResolve();
+          }}
+          style={`padding: 12px 24px; background: ${resolved() ? '#6b7280' : 'white'}; color: ${resolved() ? 'white' : '#8b5cf6'}; border: none; border-radius: 6px; cursor: ${resolved() ? 'not-allowed' : 'pointer'}; font-weight: bold; opacity: ${resolved() ? '0.6' : '1'};`}>
+          {resolved() ? '✅ Service Resolved' : '⚡ Resolve Service'}
+        </button>
+      </div>
+      
+      {resolved() && config() ? (
+        <ConfigServiceResolvedView config={config()!} />
+      ) : error() ? (
+        <div style="background: rgba(239, 68, 68, 0.2); padding: 15px; border-radius: 6px; border-left: 4px solid #ef4444;">
+          <div style="color: #ef4444; font-weight: bold; margin-bottom: 10px; font-size: 14px;">❌ Resolution Failed</div>
+          <div style="color: rgba(255,255,255,0.9); font-size: 13px;">
+            {error()}
+          </div>
+        </div>
+      ) : (
+        <div style={`background: rgba(0,0,0,0.2); padding: 15px; border-radius: 6px; color: ${getThemeStyles().textColor}; font-size: 13px; line-height: 1.6;`}>
+          <strong>💡 How it works:</strong>
+          <ul style="margin: 10px 0 0 20px;">
+            <li>This demo runs in an isolated pulse() instance</li>
+            <li>ServiceManager configured with ConfigService</li>
+            <li>Click button to trigger useService() resolution</li>
+            <li>Service properties control UI theme</li>
+          </ul>
+        </div>
+      )}
+      
+      <ConsoleLogViewer 
+        logs={logger.logs} 
+        onClear={logger.clear}
+        title="Service Resolution Logs"
+      />
+    </div>
+  );
+};

package/src/showcase/bootstrap/demos/di-demo.syn

@@ -0,0 +1,64 @@
+/**
+ * Dependency Injection Demo Component
+ * Demonstrates REAL useService() hook usage
+ */
+
+import { useService } from '@synetics/synetics.dev';
+import type { IConfigService } from '../types/config-service.types.ts';
+import { ConfigServiceResolvedView } from '../components/config-service-resolved-view.syn';
+import { ConfigServiceErrorView } from '../components/config-service-error-view.syn';
+
+export const DIDemo = () => {
+  // REAL SERVICE RESOLUTION - This is how you use DI in components
+  let config: IConfigService | null = null;
+  let error: Error | null = null;
+  
+  try {
+    config = useService<IConfigService>('config');
+    console.log('[DIDemo] ✅ Service resolved:', config);
+  } catch (err) {
+    error = err as Error;
+    console.warn('[DIDemo] ⚠️ Service not available:', err);
+  }
+  
+  const getThemeStyles = () => {
+    const theme = config?.theme;
+    if (theme === 'dark') {
+      return {
+        background: 'linear-gradient(135deg, #1f2937 0%, #111827 100%)',
+        textColor: '#d1d5db'
+      };
+    }
+    return {
+      background: 'linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)',
+      textColor: 'white'
+    };
+  };
+  
+  return (
+    <div style={`margin-bottom: 20px; padding: 20px; background: ${getThemeStyles().background}; border-radius: 8px; transition: all 0.5s ease;`}>
+      <div style="text-align: center; margin-bottom: 20px;">
+        <div style="font-size: 48px; margin-bottom: 10px;">🔌</div>
+        <div style={`color: ${getThemeStyles().textColor}; font-size: 18px; font-weight: bold; margin-bottom: 20px; transition: color 0.5s ease;`}>
+          Dependency Injection with useService()
+        </div>
+      </div>
+      
+      {config ? (
+        <ConfigServiceResolvedView config={config} />
+      ) : (
+        <ConfigServiceErrorView error={error || new Error('Unknown error')} />
+      )}
+      
+      <div style={`background: rgba(0,0,0,0.2); padding: 15px; border-radius: 6px; color: ${getThemeStyles().textColor}; font-size: 13px; margin-top: 15px; transition: color 0.5s ease;`}>
+        <strong>💡 Real-World Pattern:</strong>
+        <ul style="margin: 10px 0 0 20px; line-height: 1.8;">
+          <li><strong>main.ts:</strong> Register services with ServiceManager, pass to pulse()</li>
+          <li><strong>Component:</strong> Call useService&lt;T&gt;('identifier') to resolve</li>
+          <li><strong>Lifecycle:</strong> Singleton = same instance across all components</li>
+          <li><strong>Type-safe:</strong> Full TypeScript support for service interfaces</li>
+        </ul>
+      </div>
+    </div>
+  );
+};

package/src/showcase/bootstrap/demos/lifecycle-demo.syn

@@ -0,0 +1,74 @@
+/**
+ * Lifecycle Hooks Demo Component
+ * Demonstrates REAL onMount() and onCleanup() lifecycle hooks
+ */
+
+import { createSignal, onMount, onCleanup } from '@synetics/synetics.dev';
+
+export const LifecycleDemo = () => {
+  const [logs, setLogs] = createSignal<string[]>([]);
+  const [mountCount, setMountCount] = createSignal(0);
+  
+  // REAL onMount hook - fires when component mounts
+  onMount(() => {
+    const log = `${new Date().toLocaleTimeString()} - ✅ onMount() called (#${mountCount() + 1})`;
+    setLogs([...logs(), log]);
+    setMountCount(mountCount() + 1);
+    console.log('[LifecycleDemo]', log);
+  });
+  
+  // REAL onCleanup hook - fires when component unmounts
+  onCleanup(() => {
+    const log = `${new Date().toLocaleTimeString()} - 🔴 onCleanup() will be called on unmount`;
+    console.log('[LifecycleDemo]', log);
+  });
+  
+  const addManualLog = () => {
+    const log = `${new Date().toLocaleTimeString()} - 📝 Manual log added`;
+    setLogs([...logs(), log]);
+  };
+  
+  return (
+    <div style="margin-bottom: 20px; padding: 20px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 8px;">
+      <div style="text-align: center; margin-bottom: 20px;">
+        <div style="padding: 30px; background: rgba(16, 185, 129, 0.3); border-radius: 8px; transition: all 0.3s;">
+          <div style="font-size: 48px; margin-bottom: 10px;">✅</div>
+          <div style="color: white; font-size: 18px; font-weight: bold;">
+            {() => 'Component Mounted (onMount fired ' + mountCount() + (mountCount() === 1 ? ' time' : ' times') + ')'}
+          </div>
+          <div style="color: rgba(255,255,255,0.8); font-size: 14px; margin-top: 10px;">
+            REAL onMount() and onCleanup() hooks are active
+          </div>
+        </div>
+      </div>
+      
+      <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 20px;">
+        <button 
+          onClick={() => addManualLog()}
+          style="padding: 12px 24px; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;">
+          Add Log Entry
+        </button>
+      </div>
+      
+      <div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 6px;">
+        <div style="color: #10b981; font-weight: bold; margin-bottom: 10px; font-size: 14px;">📋 Lifecycle Events Log:</div>
+        <div style="max-height: 150px; overflow-y: auto;">
+          {logs().length === 0 ? (
+            <div style="color: rgba(255,255,255,0.6); font-style: italic; font-size: 13px;">
+              onMount() fires automatically when this component mounts. Check console for onCleanup().
+            </div>
+          ) : null}
+          {logs().map((log: string) => (
+            <div style="color: rgba(255,255,255,0.9); padding: 4px 0; font-family: 'Consolas', monospace; font-size: 12px;">
+              {log}
+            </div>
+          ))}
+        </div>
+      </div>
+      
+      <div style="background: rgba(0,0,0,0.2); padding: 15px; border-radius: 6px; color: white; font-size: 13px; margin-top: 15px;">
+        <strong>💡 This demonstrates:</strong> REAL onMount() fires when component mounts. onCleanup() fires when you navigate away (check console).
+      </div>
+    </div>
+  );
+};