@synetics/ui 0.7.0-alpha

package/src/showcase/control-flow/components/show-demo.syn

@@ -0,0 +1,53 @@
+/**
+ * Show Demo Component
+ * Demonstrates conditional rendering with Show component
+ */
+
+import type { Accessor, Setter } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+import { CodeBlock } from '../../common/components/code-block.syn';
+
+interface ShowDemoProps {
+  showContent: Accessor<boolean>
+  setShowContent: Setter<boolean>
+  hasError: Accessor<boolean>
+  setHasError: Setter<boolean>
+}
+
+export const ShowDemo = ({ showContent, setShowContent, hasError, setHasError }: ShowDemoProps) => {
+  return (
+    <div>
+      <div style="display: flex; gap: 10px; margin-bottom: 15px;">
+        <DemoButton onClick={() => setShowContent(!showContent())} color="#f59e0b">
+          Toggle Content
+        </DemoButton>
+        <DemoButton onClick={() => setHasError(!hasError())} color="#ef4444">
+          Toggle Error
+        </DemoButton>
+      </div>
+      
+      <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; min-height: 80px;">
+        {showContent() ? (
+          <div style="color: #10b981;">
+            <p style="margin: 0 0 10px 0; font-size: 16px; font-weight: bold;">✓ Content is visible!</p>
+            <p style="margin: 0; color: #94a3b8;">This appears when showContent() is true.</p>
+          </div>
+        ) : (
+          <p style="color: #ef4444;">Content is hidden</p>
+        )}
+
+        {hasError() && (
+          <div style="margin-top: 15px; padding: 10px; background: #7f1d1d; border-left: 3px solid #ef4444; color: #fca5a5;">
+            ⚠️ Error state is active!
+          </div>
+        )}
+      </div>
+      
+      <div style="margin-top: 15px;">
+        <CodeBlock>
+          State: showContent = {showContent() ? 'true' : 'false'}, hasError = {hasError() ? 'true' : 'false'}
+        </CodeBlock>
+      </div>
+    </div>
+  );
+};

package/src/showcase/control-flow/control-flow-test.syn

@@ -0,0 +1,104 @@
+/**
+ * PHASE 2: Control Flow Primitives
+ * Refactored with modular components
+ */
+
+import { createSignal, component } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { ShowDemo } from './components/show-demo.syn';
+import { ForDemo } from './components/for-demo.syn';
+import { IndexDemo } from './components/index-demo.syn';
+
+export const ControlFlowTestPage = component(() => {
+  // Show component signals
+  const [showContent, setShowContent] = createSignal(true);
+  const [hasError, setHasError] = createSignal(false);
+  
+  // For component signals
+  const [items, setItems] = createSignal([
+    { id: 1, name: 'Apple', price: 1.99 },
+    { id: 2, name: 'Banana', price: 0.99 },
+    { id: 3, name: 'Cherry', price: 2.49 },
+  ]);
+  
+  const addItem = () => {
+    const currentItems = items();
+    const ids = currentItems.map(i => i.id);
+    let maxId = 0;
+    for (let i = 0; i < ids.length; i++) {
+      if (ids[i] > maxId) maxId = ids[i];
+    }
+    const newId = maxId + 1;
+    const fruits = ['Orange', 'Grape', 'Mango', 'Pineapple', 'Strawberry'];
+    const randomFruit = fruits[Math.floor(Math.random() * fruits.length)];
+    const randomPrice = (Math.random() * 3 + 0.5).toFixed(2);
+    
+    setItems(currentItems.concat([{ id: newId, name: randomFruit, price: parseFloat(randomPrice) }]));
+  };
+  
+  const removeItem = (id) => {
+    setItems(items().filter(item => item.id !== id));
+  };
+  
+  const sortByPrice = () => {
+    const sorted = items().slice().sort((a, b) => a.price - b.price);
+    setItems(sorted);
+  };
+  
+  // Index component signals
+  const [colors, setColors] = createSignal(['Red', 'Green', 'Blue', 'Yellow']);
+  
+  const shuffleColors = () => {
+    const shuffled = colors().slice();
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      const temp = shuffled[i];
+      shuffled[i] = shuffled[j];
+      shuffled[j] = temp;
+    }
+    setColors(shuffled);
+  };
+  
+  return (
+    <div>
+      <PageHeader 
+        title="Control Flow Primitives"
+        emoji="🎯"
+        color="#f59e0b"
+        description="Testing Show, For, and Index components"
+      />
+      
+      <DemoSection 
+        title="1️⃣ Show - Conditional Rendering" 
+        description="The Show component renders children only when the condition is true. Supports fallback content."
+        borderColor="#f59e0b">
+        <ShowDemo 
+          showContent={showContent}
+          setShowContent={setShowContent}
+          hasError={hasError}
+          setHasError={setHasError}
+        />
+      </DemoSection>
+      
+      <DemoSection 
+        title="2️⃣ For - Keyed List Rendering" 
+        description="ForRegistry efficiently renders lists with proper keying for optimal updates and animations."
+        borderColor="#f59e0b">
+        <ForDemo 
+          items={items}
+          addItem={addItem}
+          removeItem={removeItem}
+          sortByPrice={sortByPrice}
+        />
+      </DemoSection>
+      
+      <DemoSection 
+        title="3️⃣ Index - Index-based Iteration" 
+        description="Index component iterates by array index (not by key). Useful when items have no stable identity."
+        borderColor="#f59e0b">
+        <IndexDemo colors={colors} shuffleColors={shuffleColors} />
+      </DemoSection>
+    </div>
+  );
+});

package/src/showcase/di/components/circular-dependency-demo.syn

@@ -0,0 +1,113 @@
+/**
+ * Circular Dependency Demo
+ * Shows how ServiceManager detects and throws on circular deps
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { ServiceManager } from '@synetics/synetics.dev';
+
+type Status = 'idle' | 'error' | 'success';
+
+export component CircularDependencyDemo() {
+  const [status, setStatus] = createSignal<Status>('idle');
+  const [message, setMessage] = createSignal('');
+
+  const triggerCircular = () => {
+    const sm = new ServiceManager();
+
+    sm.register('A', (container) => {
+      const b = container.resolve('B');
+      return { name: 'ServiceA', dep: b };
+    });
+
+    sm.register('B', (container) => {
+      const a = container.resolve('A');
+      return { name: 'ServiceB', dep: a };
+    });
+
+    try {
+      sm.resolve('A');
+      setStatus('success');
+      setMessage('Resolved (unexpected — should have thrown)');
+    } catch (err: unknown) {
+      setStatus('error');
+      setMessage(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const triggerValid = () => {
+    const sm = new ServiceManager();
+
+    sm.register('database', () => ({ type: 'postgres', connected: true }), { lifetime: 'singleton' });
+    sm.register('userRepo', (container) => {
+      const db = container.resolve('database');
+      return { findUser: (id: string) => ({ id, db: db.type }) };
+    });
+    sm.register('authService', (container) => {
+      const repo = container.resolve('userRepo');
+      return { login: (id: string) => repo.findUser(id) };
+    });
+
+    try {
+      const auth = sm.resolve('authService');
+      const result = auth.login('usr_1');
+      setStatus('success');
+      setMessage(`✅ Resolved cleanly — authService → userRepo → database (${result.db})`);
+    } catch (err: unknown) {
+      setStatus('error');
+      setMessage(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const reset = () => {
+    setStatus('idle');
+    setMessage('');
+  };
+
+  const statusColors: Record<Status, string> = {
+    idle: '#475569',
+    error: '#ef4444',
+    success: '#10b981'
+  };
+
+  const statusBg: Record<Status, string> = {
+    idle: 'rgba(71, 85, 105, 0.15)',
+    error: 'rgba(239, 68, 68, 0.12)',
+    success: 'rgba(16, 185, 129, 0.12)'
+  };
+
+  return (
+    <div>
+      <div style="display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;">
+        <button
+          onClick={triggerCircular}
+          style="padding: 9px 18px; background: #ef4444; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;">
+          💥 Trigger Circular
+        </button>
+        <button
+          onClick={triggerValid}
+          style="padding: 9px 18px; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;">
+          ✅ Valid Resolution
+        </button>
+        <button
+          onClick={reset}
+          style="padding: 9px 18px; background: #334155; color: white; border: 1px solid #475569; border-radius: 6px; cursor: pointer; font-weight: bold;">
+          ↺ Reset
+        </button>
+      </div>
+
+      <div style={() => `padding: 14px 18px; border-radius: 8px; border: 1px solid ${statusColors[status()]}; background: ${statusBg[status()]}; min-height: 52px; transition: all 0.25s;`}>
+        {status() === 'idle' && (
+          <p style="margin: 0; color: #94a3b8; font-size: 14px;">
+            Click a button above to see the result.
+          </p>
+        )}
+        {status() !== 'idle' && (
+          <p style={() => `margin: 0; color: ${statusColors[status()]}; font-size: 14px; line-height: 1.6; font-family: monospace;`}>
+            {message()}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/showcase/di/components/hierarchical-di-demo.syn

@@ -0,0 +1,81 @@
+/**
+ * Hierarchical DI Demo
+ * Shows parent/child ServiceManager containers
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { ServiceManager } from '@synetics/synetics.dev';
+import { ConsoleLogViewer } from '../../common/components/console-log-viewer.syn';
+import { useLogger } from '../../common/hooks/use-logger.ts';
+
+export component HierarchicalDiDemo() {
+  const [ran, setRan] = createSignal(false);
+  const logger = useLogger('[HierarchicalDI]');
+
+  const runDemo = () => {
+    logger.clear();
+
+    // Parent container — global/app-level services
+    const parent = new ServiceManager();
+    parent.register('config', () => ({
+      appName: 'PulsarApp',
+      version: '2.0',
+      apiUrl: 'https://api.example.com'
+    }), { lifetime: 'singleton' });
+
+    logger.log('✅ Parent container created');
+    logger.log('   Registered: config (singleton)');
+
+    // Child container — scoped/request-level services
+    const child = new ServiceManager(parent);
+    child.register('session', () => ({
+      userId: 'usr_42',
+      token: 'eyJ...',
+      expiresAt: Date.now() + 3600000
+    }), { lifetime: 'scoped' });
+
+    logger.log('✅ Child container created (parent: appServices)');
+    logger.log('   Registered: session (scoped)');
+
+    // Resolution
+    const configFromParent = parent.resolve('config');
+    logger.log(`\n📦 parent.resolve('config')  →  ${configFromParent.appName} v${configFromParent.version}`);
+
+    try {
+      parent.resolve('session');
+    } catch {
+      logger.warn(`⚠️  parent.resolve('session')  →  Not found (as expected)`);
+    }
+
+    const configFromChild = child.resolve('config');
+    logger.log(`📦 child.resolve('config')   →  inherited from parent: ${configFromChild.apiUrl}`);
+
+    const session = child.resolve('session');
+    logger.log(`📦 child.resolve('session')  →  userId: ${session.userId}`);
+
+    logger.log('\n🎉 Hierarchical resolution complete!');
+    setRan(true);
+  };
+
+  return (
+    <div>
+      <div style="margin-bottom: 16px; padding: 14px; background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.25); border-radius: 8px;">
+        <p style="margin: 0 0 8px 0; color: #a7f3d0; font-size: 13px; line-height: 1.6;">
+          Click <strong>Run Demo</strong> to see two service containers — a parent (app-level) and a child (request-level).
+          The child inherits all parent services automatically.
+        </p>
+        <button
+          onClick={runDemo}
+          style="padding: 9px 20px; background: #10b981; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 14px;">
+          ▶ Run Demo
+        </button>
+      </div>
+
+      <ConsoleLogViewer
+        logs={logger.logs}
+        onClear={logger.clear}
+        title="Container Resolution Log"
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,6 @@
+/**
+ * DI demo components index
+ */
+
+export { ServiceLifetimeDemo } from './service-lifetime-demo.syn';
+export { ServiceRegistrationDemo } from './service-registration-demo.syn';

package/src/showcase/di/components/lifetime-card.syn

@@ -0,0 +1,30 @@
+/**
+ * Lifetime Card Component
+ * Displays a single service lifetime with its instance ID
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+export interface LifetimeCardProps {
+  title: string;
+  emoji: string;
+  color: string;
+  description: string;
+  instanceId: Accessor<number | null>;
+}
+
+export component LifetimeCard(props: LifetimeCardProps) {
+  return (
+    <div style={`padding: 15px; background: #0f172a; border: 2px solid ${props.color}; border-radius: 8px;`}>
+      <h4 style={`margin: 0 0 10px 0; color: ${props.color}; font-size: 14px;`}>
+        {props.emoji} {props.title}
+      </h4>
+      <p style="margin: 0 0 10px 0; color: #94a3b8; font-size: 12px; line-height: 1.4;">
+        {props.description}
+      </p>
+      <p style="margin: 0; color: #e2e8f0; font-size: 18px; font-weight: bold;">
+        {props.instanceId() !== null ? `#${props.instanceId()}` : 'Not resolved'}
+      </p>
+    </div>
+  );
+}

package/src/showcase/di/components/registered-services-list.syn

@@ -0,0 +1,29 @@
+/**
+ * Registered Services List Component
+ * Displays the list of currently registered services
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+export interface RegisteredServicesListProps {
+  services: Accessor<string[]>;
+}
+
+export component RegisteredServicesList(props: RegisteredServicesListProps) {
+  return (
+    props.services().length > 0 ? (
+      <div style="padding: 15px; background: #0f172a; border: 2px solid #3b82f6; border-radius: 8px; margin-bottom: 15px;">
+        <h4 style="margin: 0 0 10px 0; color: #3b82f6; font-size: 14px;">
+          📦 Registered Services ({props.services().length})
+        </h4>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+          {props.services().map((service) => (
+            <span style="padding: 6px 12px; background: #1e293b; border: 1px solid #3b82f6; border-radius: 4px; color: #60a5fa; font-size: 12px;">
+              {service}
+            </span>
+          ))}
+        </div>
+      </div>
+    ) : null
+  );
+}

package/src/showcase/di/components/resolution-result.syn

@@ -0,0 +1,34 @@
+/**
+ * Resolution Result Display Component
+ * Shows the result of a service resolution attempt
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+
+export interface ResolutionResultProps {
+  resolvedData: Accessor<string | null>;
+  errorMessage: Accessor<string | null>;
+}
+
+export component ResolutionResult(props: ResolutionResultProps) {
+  return (
+    <div>
+      {props.resolvedData() ? (
+        <div style="padding: 15px; background: #0f172a; border: 2px solid #10b981; border-radius: 8px; margin-bottom: 15px;">
+          <pre style="margin: 0; color: #86efac; font-size: 13px; white-space: pre-wrap; word-break: break-word; font-family: 'Courier New', monospace;">
+            {props.resolvedData()}
+          </pre>
+        </div>
+      ) : null}
+      
+      {props.errorMessage() ? (
+        <div style="padding: 15px; background: #450a0a; border: 2px solid #ef4444; border-radius: 8px;">
+          <pre style="margin: 0; color: #fca5a5; font-size: 13px; white-space: pre-wrap; word-break: break-word; font-family: 'Courier New', monospace;">
+            {props.errorMessage()}
+          </pre>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/showcase/di/components/service-button.syn

@@ -0,0 +1,26 @@
+/**
+ * Service Button Component
+ * Reusable button for service registration and resolution actions
+ */
+
+export interface ServiceButtonProps {
+  onClick: () => void;
+  color: string;
+  children: any;
+}
+
+export component ServiceButton(props: ServiceButtonProps) {
+  return (
+    <button 
+      onClick={props.onClick}
+      style={`padding: 10px 20px; background: ${props.color}; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: opacity 0.2s;`}
+      onMouseOver={(e: MouseEvent) => {
+        (e.target as HTMLElement).style.opacity = '0.8';
+      }}
+      onMouseOut={(e: MouseEvent) => {
+        (e.target as HTMLElement).style.opacity = '1';
+      }}>
+      {props.children}
+    </button>
+  );
+}

package/src/showcase/di/components/service-lifetime-demo.syn

@@ -0,0 +1,135 @@
+/**
+ * Service Lifetime Demo
+ * Shows REAL difference between singleton, transient, and scoped using actual ServiceManager
+ */
+
+import { createSignal, useService, getCurrentAppRoot } from '@synetics/synetics.dev';
+import { SingletonService, TransientService, ScopedService } from '../services/demo-services.ts';
+import type { ISingletonService, ITransientService, IScopedService } from '../services/demo-services.ts';
+import { LifetimeCard } from './lifetime-card.syn';
+import { ConsoleLogViewer } from '../../common/components/console-log-viewer.syn';
+import { useLogger } from '../../common/hooks/use-logger.ts';
+
+export component ServiceLifetimeDemo() {
+  const [singletonId, setSingletonId] = createSignal<number | null>(null);
+  const [transientId, setTransientId] = createSignal<number | null>(null);
+  const [scopedId, setScopedId] = createSignal<number | null>(null);
+  const [resolveCount, setResolveCount] = createSignal(0);
+  
+  // Use the logger hook
+  const logger = useLogger('[ServiceLifetimeDemo]');
+  
+  // Register services on mount
+  const appRoot = getCurrentAppRoot();
+  if (appRoot?.serviceManager) {
+    const sm = appRoot.serviceManager;
+    
+    // Register singleton (only once)
+    if (!sm.isRegistered('singleton-demo')) {
+      sm.registerClass('singleton-demo', SingletonService, { lifetime: 'singleton' });
+    }
+    
+    // Register transient (new instance each time)
+    if (!sm.isRegistered('transient-demo')) {
+      sm.registerClass('transient-demo', TransientService, { lifetime: 'transient' });
+    }
+    
+    // Register scoped (one per scope)
+    if (!sm.isRegistered('scoped-demo')) {
+      sm.registerClass('scoped-demo', ScopedService, { lifetime: 'scoped' });
+    }
+  }
+  
+  const resolveSingleton = () => {
+    try {
+      const service = useService<ISingletonService>('singleton-demo');
+      setSingletonId(service.instanceId);
+      setResolveCount(resolveCount() + 1);
+      logger.log(`🔵 Resolved Singleton - Instance ID: ${service.instanceId}`);
+    } catch (error) {
+      logger.error(`❌ Failed to resolve singleton: ${error}`);
+    }
+  };
+  
+  const resolveTransient = () => {
+    try {
+      const service = useService<ITransientService>('transient-demo');
+      setTransientId(service.instanceId);
+      setResolveCount(resolveCount() + 1);
+      logger.log(`🟢 Resolved Transient - Instance ID: ${service.instanceId} (NEW)`);
+    } catch (error) {
+      logger.error(`❌ Failed to resolve transient: ${error}`);
+    }
+  };
+  
+  const resolveScoped = () => {
+    try {
+      const service = useService<IScopedService>('scoped-demo');
+      setScopedId(service.instanceId);
+      setResolveCount(resolveCount() + 1);
+      logger.log(`🟡 Resolved Scoped - Instance ID: ${service.instanceId}`);
+    } catch (error) {
+      logger.error(`❌ Failed to resolve scoped: ${error}`);
+    }
+  };
+  
+  return (
+    <div>
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px;">
+        <LifetimeCard 
+          title="Singleton"
+          emoji="🔵"
+          color="#8b5cf6"
+          description="One instance for app lifetime"
+          instanceId={singletonId}
+        />
+        
+        <LifetimeCard 
+          title="Transient"
+          emoji="🟢"
+          color="#10b981"
+          description="New instance every resolve"
+          instanceId={transientId}
+        />
+        
+        <LifetimeCard 
+          title="Scoped"
+          emoji="🟡"
+          color="#f59e0b"
+          description="One instance per scope"
+          instanceId={scopedId}
+        />
+      </div>
+      
+      <div style="display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px;">
+        <button 
+          onClick={resolveSingleton}
+          style="padding: 10px 20px; background: transparent; color: #8b5cf6; border: 2px solid #8b5cf6; border-radius: 6px; cursor: pointer; font-size: 14px;">
+          Resolve Singleton
+        </button>
+        <button 
+          onClick={resolveTransient}
+          style="padding: 10px 20px; background: transparent; color: #10b981; border: 2px solid #10b981; border-radius: 6px; cursor: pointer; font-size: 14px;">
+          Resolve Transient
+        </button>
+        <button 
+          onClick={resolveScoped}
+          style="padding: 10px 20px; background: transparent; color: #f59e0b; border: 2px solid #f59e0b; border-radius: 6px; cursor: pointer; font-size: 14px;">
+          Resolve Scoped
+        </button>
+      </div>
+      
+      <div style="padding: 12px; background: rgba(16, 185, 129, 0.2); border-left: 3px solid #10b981; border-radius: 4px;">
+        <p style="margin: 0; color: #10b981; font-size: 13px;">
+          💡 Click buttons to resolve services. Singleton always returns same instance, Transient creates new each time.
+        </p>
+      </div>
+      
+      <ConsoleLogViewer 
+        logs={logger.logs} 
+        onClear={logger.clear}
+        title="Lifetime Resolution Logs"
+      />
+    </div>
+  );
+}