@synetics/ui 0.7.0-alpha

package/src/showcase/bootstrap/demos/return-value-demo.syn

@@ -0,0 +1,95 @@
+/**
+ * Return Value Demo Component
+ * Demonstrates ApplicationRoot instance returned by pulse()
+ */
+
+import { createSignal, getCurrentAppRoot } from '@synetics/synetics.dev';
+import { ConsoleLogViewer } from '../../common/components/console-log-viewer.syn';
+import { useLogger } from '../../common/hooks/use-logger.ts';
+
+export const ReturnValueDemo = () => {
+  const [inspected, setInspected] = createSignal(false);
+  const [appInfo, setAppInfo] = createSignal<any>(null);
+  
+  // Use the logger hook
+  const logger = useLogger('[ReturnValueDemo]');
+  
+  const inspectApp = () => {
+    const app = getCurrentAppRoot();
+    if (app) {
+      setAppInfo({
+        hasServiceManager: !!app.serviceManager,
+        hasRegistry: !!app.registry,
+        hasEventDelegator: !!app.eventDelegator,
+        rootElement: app.rootElement?.tagName || 'Unknown'
+      });
+      setInspected(true);
+      logger.log(`✅ ApplicationRoot found - Root: <${app.rootElement?.tagName}>`);
+      logger.info(`ServiceManager: ${app.serviceManager ? '✓ Present' : '✗ Missing'}`);
+      logger.info(`Registry: ${app.registry ? '✓ Present' : '✗ Missing'}`);
+      logger.info(`EventDelegator: ${app.eventDelegator ? '✓ Present' : '✗ Missing'}`);
+    } else {
+      logger.error('❌ No ApplicationRoot found!');
+      alert('⚠️ No ApplicationRoot found!');
+    }
+  };
+  
+  return (
+    <div style="margin-bottom: 20px; padding: 20px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 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; margin-bottom: 10px;">
+            This Page is Running in pulse()
+          </div>
+          <div style="color: rgba(255,255,255,0.8); font-size: 14px;">
+            Every Pulsar app starts with pulse() which returns an ApplicationRoot
+          </div>
+        </div>
+      </div>
+      
+      <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap;">
+        <button 
+          onclick={() => inspectApp()}
+          style="padding: 12px 24px; background: white; color: #f59e0b; border: none; border-radius: 6px; cursor: pointer; font-weight: bold;">
+          Inspect ApplicationRoot
+        </button>
+      </div>
+      
+      {inspected() && appInfo() && (
+        <div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 4px solid #10b981;">
+          <div style="color: #10b981; font-weight: bold; margin-bottom: 10px; font-size: 14px;">✓ ApplicationRoot Found!</div>
+          <div style="color: rgba(255,255,255,0.9); font-family: 'Consolas', monospace; font-size: 13px;">
+            <div style="padding: 4px 0;">serviceManager: <span style="color: #60a5fa;">{appInfo().hasServiceManager ? '✓ Available' : '✗ Missing'}</span></div>
+            <div style="padding: 4px 0;">registry: <span style="color: #60a5fa;">{appInfo().hasRegistry ? '✓ Available' : '✗ Missing'}</span></div>
+            <div style="padding: 4px 0;">eventDelegator: <span style="color: #60a5fa;">{appInfo().hasEventDelegator ? '✓ Available' : '✗ Missing'}</span></div>
+            <div style="padding: 4px 0;">rootElement: <span style="color: #60a5fa;">&lt;{appInfo().rootElement}&gt;</span></div>
+          </div>
+        </div>
+      )}
+      
+      <div style="background: rgba(0,0,0,0.3); padding: 15px; border-radius: 6px; border-left: 4px solid #fbbf24;">
+        <div style="color: #fbbf24; font-weight: bold; margin-bottom: 10px; font-size: 14px;">📊 ApplicationRoot API:</div>
+        <div style="color: rgba(255,255,255,0.9); font-family: 'Consolas', monospace; font-size: 13px;">
+          <div style="padding: 4px 0;">const app = pulse(Component, options);</div>
+          <div style="padding: 4px 0;">app.mount(): <span style="color: #10b981;">mounts component</span></div>
+          <div style="padding: 4px 0;">app.unmount(): <span style="color: #ef4444;">unmounts component</span></div>
+          <div style="padding: 4px 0;">app.rootElement: <span style="color: #60a5fa;">HTMLElement</span></div>
+          <div style="padding: 4px 0;">app.serviceManager: <span style="color: #60a5fa;">ServiceManager</span></div>
+          <div style="padding: 4px 0;">app.registry: <span style="color: #60a5fa;">Registry</span></div>
+          <div style="padding: 4px 0;">getCurrentAppRoot(): <span style="color: #60a5fa;">access from components</span></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> pulse() returns an ApplicationRoot instance containing serviceManager, registry, and eventDelegator for the entire app.
+      </div>
+      
+      <ConsoleLogViewer 
+        logs={logger.logs} 
+        onClear={logger.clear}
+        title="ApplicationRoot Inspection Logs"
+      />
+    </div>
+  );
+};

package/src/showcase/bootstrap/types/config-service.types.ts

@@ -0,0 +1,9 @@
+/**
+ * Config Service Type Definition
+ * Shared interface for DI bootstrap demos
+ */
+
+export interface IConfigService {
+  theme: string;
+  apiUrl: string;
+}

package/src/showcase/common/components/code-block.syn

@@ -0,0 +1,24 @@
+/**
+ * Code Block Component
+ * Displays code or debug info with monospace font.
+ * Accepts content via `code` prop OR JSX children.
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+interface CodeBlockProps {
+  code?: string | number | Accessor<string | number>
+  children?: string | number | Accessor<string | number | JSX.Element>
+  language?: string
+}
+
+export const CodeBlock = ({ code, children, language = 'text' }: CodeBlockProps) => {
+  const raw = code ?? children;
+  const content = typeof raw === 'function' ? raw() : raw;
+
+  return (
+    <div className="code-block">
+      <pre>{content}</pre>
+    </div>
+  );
+};

package/src/showcase/common/components/console-log-viewer.syn

@@ -0,0 +1,133 @@
+/**
+ * ConsoleLogViewer Component
+ * Generic reusable console log display for demos
+ */
+
+
+
+export type LogEntry = {
+  timestamp: string;
+  level: 'log' | 'info' | 'warn' | 'error';
+  message: string;
+};
+
+type ConsoleLogViewerProps = {
+  logs: () => LogEntry[];  // Accessor function, not full Signal tuple
+  onClear: () => void;
+  title?: string;
+  maxHeight?: string;
+};
+
+export component ConsoleLogViewer(props: ConsoleLogViewerProps) {
+  const { logs, onClear, title = 'Console Output', maxHeight = '300px' } = props;
+  
+  const getLevelColor = (level: string) => {
+    switch (level) {
+      case 'error': return '#ef4444';
+      case 'warn': return '#f59e0b';
+      case 'info': return '#3b82f6';
+      default: return '#10b981';
+    }
+  };
+  
+  const getLevelIcon = (level: string) => {
+    switch (level) {
+      case 'error': return '❌';
+      case 'warn': return '⚠️';
+      case 'info': return 'ℹ️';
+      default: return '✓';
+    }
+  };
+  
+  return (
+    <div style={`
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      border-radius: 8px;
+      background: #0f172a;
+      overflow: hidden;
+      margin-top: 20px;
+    `}>
+      <div style={`
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 16px;
+        background: rgba(148, 163, 184, 0.1);
+        border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+      `}>
+        <div style="display: flex; align-items: center; gap: 8px;">
+          <span style="font-size: 16px;">📋</span>
+          <span style="font-weight: 600; color: #e2e8f0; font-size: 14px;">{title}</span>
+          <span style="color: #64748b; font-size: 12px;">({logs().length})</span>
+        </div>
+        <button 
+          onClick={onClear}
+          style={`
+            padding: 6px 12px;
+            background: rgba(239, 68, 68, 0.2);
+            border: 1px solid rgba(239, 68, 68, 0.4);
+            border-radius: 4px;
+            color: #fca5a5;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s;
+          `}
+          onMouseOver={(e) => {
+            e.currentTarget.style.background = 'rgba(239, 68, 68, 0.3)';
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.background = 'rgba(239, 68, 68, 0.2)';
+          }}
+        >
+          Clear Logs
+        </button>
+      </div>
+      
+      <div style={`
+        padding: 12px;
+        max-height: ${maxHeight};
+        overflow-y: auto;
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 12px;
+        line-height: 1.5;
+      `}>
+        {logs().length === 0 ? (
+          <div style="color: #64748b; font-style: italic; text-align: center; padding: 20px;">
+            No logs yet. Interact with the demo to see console output.
+          </div>
+        ) : null}
+        
+        {logs().length > 0 ? (
+          <div>
+            {logs().map((log: LogEntry) => (
+              <div style={`
+                display: flex;
+                gap: 8px;
+                padding: 8px;
+                border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+                transition: background 0.2s;
+              `}
+              onMouseOver={(e) => {
+                e.currentTarget.style.background = 'rgba(148, 163, 184, 0.05)';
+              }}
+              onMouseOut={(e) => {
+                e.currentTarget.style.background = 'transparent';
+              }}
+              >
+                <span style={`color: ${getLevelColor(log.level)}; min-width: 20px;`}>
+                  {getLevelIcon(log.level)}
+                </span>
+                <span style="color: #64748b; min-width: 70px;">
+                  {log.timestamp}
+                </span>
+                <span style={`color: ${getLevelColor(log.level)}; flex: 1; word-break: break-word;`}>
+                  {log.message}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/showcase/common/components/demo-button.syn

@@ -0,0 +1,42 @@
+/**
+ * Demo Button Component
+ * Shared button for showcase demos with consistent styling
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+interface DemoButtonProps {
+  children?: string | number | Accessor<string | number | JSX.Element>
+  label?: string | number | Accessor<string | number>
+  onClick: () => void
+  color?: string
+  disabled?: boolean
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const DemoButton = ({
+  children,
+  label,
+  onClick,
+  color = '#3b82f6',
+  disabled = false,
+  size = 'md'
+}: DemoButtonProps) => {
+  const raw = children ?? label;
+  // Keep as a getter so the transformer can wrap {getLabel()} → () => getLabel()
+  // giving Pulsar a reactive subscription when `label` is a signal-derived arrow fn.
+  const getLabel = typeof raw === 'function' ? raw : () => raw;
+
+  const padding = size === 'sm' ? '6px 12px' : size === 'lg' ? '14px 28px' : '10px 20px';
+  const fontSize = size === 'sm' ? '12px' : size === 'lg' ? '18px' : '14px';
+  const bg = disabled ? '#374151' : color;
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      style={`padding: ${padding}; font-size: ${fontSize}; background: ${bg}; border: none; border-radius: 6px; color: white; cursor: ${disabled ? 'not-allowed' : 'pointer'}; font-weight: 500; font-family: inherit; transition: opacity 0.15s, transform 0.15s; opacity: ${disabled ? '0.5' : '1'};`}>
+      {getLabel()}
+    </button>
+  );
+};

package/src/showcase/common/components/demo-section.syn

@@ -0,0 +1,29 @@
+/**
+ * Demo Section Component
+ * Shared showcase section wrapper with consistent styling
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+interface DemoSectionProps {
+  title: string
+  description?: string
+  borderColor?: string
+  children: JSX.Element | Accessor<JSX.Element>
+}
+
+export const DemoSection = ({ title, description, borderColor = '#3b82f6', children }: DemoSectionProps) => {
+  const renderChildren = typeof children === 'function' ? children() : children;
+
+  return (
+    <section className="demo-section" style={`--section-accent: ${borderColor};`}>
+      <h3 className="demo-section__title">{title}</h3>
+      {description ? (
+        <p className="demo-section__description">{description}</p>
+      ) : null}
+      <div className="demo-section__content">
+        {renderChildren}
+      </div>
+    </section>
+  );
+};

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

@@ -0,0 +1,13 @@
+/**
+ * Common Showcase Components
+ * Shared components used across all showcase demos
+ */
+
+export { CodeBlock } from './code-block.syn';
+export { ConsoleLogViewer } from './console-log-viewer.syn';
+export type { LogEntry } from './console-log-viewer.syn';
+export { DemoButton } from './demo-button.syn';
+export { DemoSection } from './demo-section.syn';
+export { Modal } from './modal.syn';
+export { PageHeader } from './page-header.syn';
+export { StatusIndicator } from './status-indicator.syn';

package/src/showcase/common/components/isolated-demo.syn

@@ -0,0 +1,95 @@
+/**
+ * IsolatedDemo Component
+ * Wraps a demo component with its own pulse() instance and ServiceManager
+ * Ensures demos don't interfere with each other
+ * 
+ * @example
+ * ```tsx
+ * <IsolatedDemo 
+ *   component={MyDemoComponent}
+ *   services={(sm) => {
+ *     sm.register('config', () => new Config(), { lifetime: 'singleton' });
+ *   }}
+ *   backgroundColor="linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)"
+ * />
+ * ```
+ */
+
+import { pulse, ServiceManager, createSignal, onCleanup } from '@synetics/synetics.dev';
+import type { IApplicationRoot } from '@synetics/synetics.dev';
+
+interface IsolatedDemoProps {
+  /** Demo component to mount in isolation */
+  component: () => HTMLElement;
+  /** Optional ServiceManager configuration callback */
+  services?: (serviceManager: ServiceManager) => void;
+  /** Optional background styling */
+  backgroundColor?: string;
+  /** Optional padding */
+  padding?: string;
+}
+
+export const IsolatedDemo = (props: IsolatedDemoProps) => {
+  const [mounted, setMounted] = createSignal(false);
+  const [appRoot, setAppRoot] = createSignal<IApplicationRoot | null>(null);
+  
+  // Create container element
+  const container = document.createElement('div');
+  const rootId = `demo-root-${Math.random().toString(36).substr(2, 9)}`;
+  container.id = rootId;
+  container.style.cssText = `
+    padding: ${props.padding || '20px'};
+    background: ${props.backgroundColor || 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'};
+    border-radius: 8px;
+    margin-bottom: 20px;
+  `;
+  
+  // Mount the demo in isolation
+  const mountDemo = () => {
+    try {
+      // Setup ServiceManager if provided
+      let services: ServiceManager | undefined;
+      if (props.services) {
+        services = new ServiceManager();
+        props.services(services);
+        console.log(`[IsolatedDemo] ServiceManager configured for #${rootId}`);
+      }
+      
+      // Create isolated pulse() instance
+      const app = pulse(props.component, {
+        root: `#${rootId}`,
+        services,
+        onMount: (element: HTMLElement) => {
+          console.log(`[IsolatedDemo] Mounted in #${rootId}`, element);
+          setMounted(true);
+        },
+        onUnmount: () => {
+          console.log(`[IsolatedDemo] Unmounted from #${rootId}`);
+          setMounted(false);
+        },
+        onError: (error: Error) => {
+          console.error(`[IsolatedDemo] Error in #${rootId}:`, error);
+        }
+      });
+      
+      setAppRoot(app);
+      console.log(`[IsolatedDemo] Created isolated app for #${rootId}`);
+    } catch (error) {
+      console.error(`[IsolatedDemo] Failed to mount demo:`, error);
+    }
+  };
+  
+  // Mount on next tick to ensure container is in DOM
+  setTimeout(() => mountDemo(), 0);
+  
+  // Cleanup on unmount
+  onCleanup(() => {
+    const app = appRoot();
+    if (app) {
+      app.unmount();
+      console.log(`[IsolatedDemo] Cleaned up #${rootId}`);
+    }
+  });
+  
+  return container;
+};

package/src/showcase/common/components/modal.syn

@@ -0,0 +1,58 @@
+/**
+ * Modal Component with PortalSlots
+ * Agnostic modal container that allows components to project content
+ * while keeping logic in their own scope
+ */
+
+import { createSignal, PortalSlot } from '@synetics/synetics.dev';
+
+interface IModalProps {
+  /** Unique modal ID for portal targeting */
+  id: string;
+  /** Whether modal is open */
+  isOpen: () => boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Optional custom z-index */
+  zIndex?: number;
+}
+
+export component Modal(props: IModalProps) {
+  const { id, isOpen, onClose, zIndex = 10000 } = props;
+
+  const handleBackdropClick = (e: MouseEvent) => {
+    // Only close if clicking the backdrop itself
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    isOpen() ? (
+      <div 
+        onClick={handleBackdropClick}
+        style={`position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: ${zIndex}; padding: 20px;`}>
+        
+        <div 
+          style="background: #1a1a1a; border: 2px solid #8b5cf6; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3); display: flex; flex-direction: column;"
+          onClick={(e: Event) => e.stopPropagation()}>
+          
+          {/* Header Slot */}
+          <div style="padding: 20px 30px; border-bottom: 1px solid #2a2a2a;">
+            <PortalSlot id={id} name="header" />
+          </div>
+          
+          {/* Body Slot */}
+          <div style="padding: 30px; flex: 1; overflow-y: auto;">
+            <PortalSlot id={id} name="body" />
+          </div>
+          
+          {/* Footer Slot */}
+          <div style="padding: 20px 30px; border-top: 1px solid #2a2a2a; display: flex; gap: 10px; justify-content: flex-end;">
+            <PortalSlot id={id} name="footer" />
+          </div>
+        </div>
+      </div>
+    ) : null
+  );
+}

package/src/showcase/common/components/page-header.syn

@@ -0,0 +1,29 @@
+/**
+ * Page Header Component
+ * Consistent header for showcase pages
+ */
+
+interface PageHeaderProps {
+  title: string
+  emoji?: string
+  color?: string
+  description?: string
+}
+
+export const PageHeader = ({ title, emoji, color = '#10b981', description }: PageHeaderProps) => {
+  const renderTitle = typeof title === 'function' ? title() : title;
+  const renderEmoji = typeof emoji === 'function' ? emoji() : emoji;
+  const renderColor = typeof color === 'function' ? color() : color;
+  const renderDescription = typeof description === 'function' ? description() : description;
+
+  return (
+    <div className="page-header" style={`--section-accent: ${renderColor};`}>
+      <h2 className="page-header__title">
+        {renderEmoji ? `${renderEmoji} ` : ''}{renderTitle}
+      </h2>
+      {renderDescription ? (
+        <p className="page-header__subtitle">{renderDescription}</p>
+      ) : null}
+    </div>
+  );
+};

package/src/showcase/common/components/status-indicator.syn

@@ -0,0 +1,34 @@
+/**
+ * Status Indicator Component
+ * Shows status with emoji and color coding
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+
+type Status = 'error' | 'safe' | 'loading' | 'ok';
+
+interface StatusIndicatorProps {
+  status: Status | Accessor<Status>
+  label?: string | Accessor<string>
+}
+
+export const StatusIndicator = ({ status, label }: StatusIndicatorProps) => {
+  const renderStatus = typeof status === 'function' ? status() : status;
+  const renderLabel = typeof label === 'function' ? label() : label;
+  
+  const statusConfig = {
+    error: { emoji: '🔥', text: 'ERROR', color: '#ef4444' },
+    safe: { emoji: '✅', text: 'SAFE', color: '#10b981' },
+    loading: { emoji: '⏳', text: 'LOADING', color: '#f59e0b' },
+    ok: { emoji: '✓', text: 'OK', color: '#10b981' }
+  };
+  
+  const config = statusConfig[renderStatus] || statusConfig.safe;
+  
+  return (
+    <div style={`padding: 10px; background: #1a1a1a; border: 1px solid #334155; border-radius: 4px; color: ${config.color}; font-size: 12px; display: inline-flex; align-items: center; gap: 6px;`}>
+      <span>{config.emoji}</span>
+      <span>{renderLabel || config.text}</span>
+    </div>
+  );
+};

package/src/showcase/common/examples/logging-example.syn

@@ -0,0 +1,67 @@
+/**
+ * Example: How to use ConsoleLogViewer with useLogger hook
+ * 
+ * This example shows the correct pattern for logging to both
+ * the browser console AND the UI log viewer component.
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+import { ConsoleLogViewer } from '../components/console-log-viewer.syn';
+import { useLogger } from '../hooks/use-logger.ts';
+
+export component LoggingExample() {
+  const [counter, setCounter] = createSignal(0);
+  
+  // ✅ Create a logger instance with optional prefix
+  const logger = useLogger('[LoggingExample]');
+  
+  const handleClick = () => {
+    const newCount = counter() + 1;
+    setCounter(newCount);
+    
+    // ✅ Log to BOTH console AND UI viewer
+    logger.log(`Button clicked ${newCount} times`);
+    logger.info(`Counter value: ${newCount}`);
+    
+    if (newCount > 5) {
+      logger.warn(`You've clicked ${newCount} times - that's a lot!`);
+    }
+    
+    if (newCount > 10) {
+      logger.error(`Stop clicking! (${newCount} clicks)`);
+    }
+  };
+  
+  return (
+    <div>
+      <div style="margin-bottom: 20px;">
+        <button 
+          onClick={handleClick}
+          style="padding: 12px 24px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer;">
+          Click Me ({counter()})
+        </button>
+      </div>
+      
+      {/* ✅ Pass logger.logs (accessor function) and logger.clear */}
+      <ConsoleLogViewer 
+        logs={logger.logs}
+        onClear={logger.clear}
+        title="Example Logs"
+      />
+    </div>
+  );
+}
+
+/**
+ * Logger API:
+ * - logger.log(message)   - Info/success logs (green)
+ * - logger.info(message)  - Informational (blue)
+ * - logger.warn(message)  - Warnings (yellow)
+ * - logger.error(message) - Errors (red)
+ * - logger.clear()        - Clear all logs
+ * - logger.logs           - Accessor function for log entries
+ * 
+ * All methods automatically:
+ * 1. Add timestamped entry to UI viewer
+ * 2. Log to browser console with prefix
+ */