@synetics/ui 0.7.0-alpha

package/src/showcase/common/hooks/use-logger.ts

@@ -0,0 +1,60 @@
+/**
+ * useLogger Hook
+ * Provides logging functions that both update UI and browser console
+ */
+
+import { createSignal } from '@synetics/synetics.dev'
+
+type LogEntry = {
+  timestamp: string;
+  level: 'log' | 'info' | 'warn' | 'error';
+  message: string;
+};
+
+export interface ILogger {
+  log: (message: string) => void;
+  warn: (message: string) => void;
+  error: (message: string) => void;
+  info: (message: string) => void;
+  clear: () => void;
+  logs: () => LogEntry[];
+}
+
+/**
+ * Creates a logger that updates both UI and browser console
+ * @param prefix - Optional prefix for console logs (e.g., '[ComponentName]')
+ * @returns Logger instance with log methods and logs signal
+ */
+export function useLogger(prefix?: string): ILogger {
+  const [logs, setLogs] = createSignal<LogEntry[]>([]);
+
+  const addLog = (level: LogEntry['level'], message: string) => {
+    const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });
+    setLogs((current) => [...current, { timestamp, level, message }]);
+
+    // Also log to browser console
+    const consoleMessage = prefix ? `${prefix} ${message}` : message;
+    switch (level) {
+      case 'error':
+        console.error(consoleMessage);
+        break;
+      case 'warn':
+        console.warn(consoleMessage);
+        break;
+      case 'info':
+        console.info(consoleMessage);
+        break;
+      default:
+        console.log(consoleMessage);
+    }
+  };
+
+  return {
+    log: (message: string) => addLog('log', message),
+    warn: (message: string) => addLog('warn', message),
+    error: (message: string) => addLog('error', message),
+    info: (message: string) => addLog('info', message),
+    clear: () => setLogs([]),
+    logs,
+  };
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Context Components Index
+ */
+
+export { SettingsContext, SettingsProvider } from './settings-provider.syn'
+export { ThemeControls } from './theme-controls.syn'
+export { ThemeContext, ThemeProvider } from './theme-provider.syn'
+export { ThemedBox } from './themed-box.syn'
+export { UserControls } from './user-controls.syn'
+export { UserProfile } from './user-profile.syn'
+export { UserContext, UserProvider } from './user-provider.syn'
+

package/src/showcase/context/components/multi-context-dashboard.syn

@@ -0,0 +1,135 @@
+/**
+ * Multi-Context Dashboard
+ * One component consuming THREE contexts simultaneously —
+ * visually proves no prop drilling is needed.
+ */
+
+import { useContext } from '@synetics/synetics.dev';
+import { ThemeContext } from './theme-provider.syn';
+import { UserContext } from './user-provider.syn';
+import { SettingsContext } from './settings-provider.syn';
+
+export const MultiContextDashboard = () => {
+  const theme    = useContext(ThemeContext);
+  const user     = useContext(UserContext);
+  const settings = useContext(SettingsContext);
+
+  return (
+    <div>
+      {/* Header */}
+      <div style="margin-bottom: 16px; padding: 10px 14px; background: #1e1b4b; border: 1px solid #4f46e5; border-radius: 8px; display: flex; align-items: center; gap: 10px;">
+        <span style="font-size: 20px;">🧩</span>
+        <div>
+          <p style="margin: 0; font-weight: 700; color: #a5b4fc; font-size: 14px;">MultiContextDashboard</p>
+          <p style="margin: 2px 0 0 0; color: #6366f1; font-size: 12px;">Reads ThemeContext + UserContext + SettingsContext — zero props passed in</p>
+        </div>
+      </div>
+
+      {/* Three context cards side by side */}
+      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px;">
+
+        {/* ── ThemeContext card ── */}
+        <div style={() => `border: 2px solid ${theme.primaryColor()}; border-radius: 8px; overflow: hidden;`}>
+          <div style={() => `padding: 8px 12px; background: ${theme.primaryColor()}22; border-bottom: 1px solid ${theme.primaryColor()}44;`}>
+            <p style="margin: 0; font-size: 11px; font-weight: 700; color: #a78bfa; text-transform: uppercase; letter-spacing: 0.08em;">🎨 ThemeContext</p>
+          </div>
+          <div style="padding: 12px;">
+            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+              <span style="font-size: 18px;">{() => theme.theme() === 'dark' ? '🌙' : '☀️'}</span>
+              <span style={() => `font-weight: 600; color: ${theme.primaryColor()}; font-size: 14px;`}>{theme.theme}</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 8px;">
+              <div style={() => `width: 20px; height: 20px; border-radius: 50%; background: ${theme.primaryColor()}; flex-shrink: 0;`}></div>
+              <span style="color: #94a3b8; font-size: 12px; font-family: monospace;">{theme.primaryColor}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* ── UserContext card ── */}
+        <div style="border: 2px solid #10b981; border-radius: 8px; overflow: hidden;">
+          <div style="padding: 8px 12px; background: #10b98122; border-bottom: 1px solid #10b98144;">
+            <p style="margin: 0; font-size: 11px; font-weight: 700; color: #6ee7b7; text-transform: uppercase; letter-spacing: 0.08em;">👤 UserContext</p>
+          </div>
+          <div style="padding: 12px;">
+            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+              <span style="font-size: 18px;">{() => user.isLoggedIn() ? '🟢' : '🔴'}</span>
+              <span style={() => `font-weight: 600; color: ${user.isLoggedIn() ? '#10b981' : '#ef4444'}; font-size: 14px;`}>
+                {() => user.isLoggedIn() ? 'Logged in' : 'Guest'}
+              </span>
+            </div>
+            <div style="display: flex; flex-direction: column; gap: 2px;">
+              <span style="color: #e2e8f0; font-size: 13px; font-weight: 500;">{() => user.user().name}</span>
+              <span style="color: #64748b; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;">{() => user.user().role}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* ── SettingsContext card ── */}
+        <div style="border: 2px solid #f59e0b; border-radius: 8px; overflow: hidden;">
+          <div style="padding: 8px 12px; background: #f59e0b22; border-bottom: 1px solid #f59e0b44;">
+            <p style="margin: 0; font-size: 11px; font-weight: 700; color: #fcd34d; text-transform: uppercase; letter-spacing: 0.08em;">⚙️ SettingsContext</p>
+          </div>
+          <div style="padding: 12px; display: flex; flex-direction: column; gap: 6px;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="color: #94a3b8; font-size: 12px;">Font size</span>
+              <span style="color: #fcd34d; font-weight: 600; font-size: 13px;">{() => `${settings.fontSize()}px`}</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="color: #94a3b8; font-size: 12px;">Notifications</span>
+              <span style={() => `font-weight: 600; font-size: 13px; color: ${settings.notifications() ? '#10b981' : '#ef4444'};`}>
+                {() => settings.notifications() ? 'ON' : 'OFF'}
+              </span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="color: #94a3b8; font-size: 12px;">Language</span>
+              <span style="color: #fcd34d; font-weight: 600; font-size: 13px; text-transform: uppercase;">{() => settings.language()}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Settings controls — only context not already controlled above */}
+      <div style="padding: 12px 14px; background: #0f0f0f; border: 1px solid #1e293b; border-radius: 8px;">
+        <p style="margin: 0 0 10px 0; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em;">⚙️ Adjust Settings (updates the card above in real-time)</p>
+        <div style="display: flex; flex-wrap: wrap; gap: 12px; align-items: center;">
+
+          {/* Font size slider */}
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <span style="color: #94a3b8; font-size: 12px;">Font:</span>
+            <button
+              onClick={() => settings.setFontSize(Math.max(10, settings.fontSize() - 2))}
+              style="padding: 2px 8px; background: #1e293b; color: #94a3b8; border: 1px solid #334155; border-radius: 4px; cursor: pointer; font-size: 14px;">−</button>
+            <span style="color: #fcd34d; font-size: 13px; font-weight: 600; min-width: 28px; text-align: center;">{() => `${settings.fontSize()}px`}</span>
+            <button
+              onClick={() => settings.setFontSize(Math.min(28, settings.fontSize() + 2))}
+              style="padding: 2px 8px; background: #1e293b; color: #94a3b8; border: 1px solid #334155; border-radius: 4px; cursor: pointer; font-size: 14px;">+</button>
+          </div>
+
+          {/* Notifications toggle */}
+          <button
+            onClick={() => settings.setNotifications(!settings.notifications())}
+            style={() => `padding: 5px 12px; background: ${settings.notifications() ? '#10b98122' : '#ef444422'}; color: ${settings.notifications() ? '#10b981' : '#ef4444'}; border: 1px solid ${settings.notifications() ? '#10b981' : '#ef4444'}; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600;`}>
+            {() => settings.notifications() ? '🔔 Notifs ON' : '🔕 Notifs OFF'}
+          </button>
+
+          {/* Language selector */}
+          <div style="display: flex; gap: 5px;">
+            <button onClick={() => settings.setLanguage('en')} style={() => `padding: 4px 8px; background: ${settings.language() === 'en' ? '#f59e0b' : '#1e293b'}; color: ${settings.language() === 'en' ? '#000' : '#94a3b8'}; border: 1px solid ${settings.language() === 'en' ? '#f59e0b' : '#334155'}; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600;`}>EN</button>
+            <button onClick={() => settings.setLanguage('fr')} style={() => `padding: 4px 8px; background: ${settings.language() === 'fr' ? '#f59e0b' : '#1e293b'}; color: ${settings.language() === 'fr' ? '#000' : '#94a3b8'}; border: 1px solid ${settings.language() === 'fr' ? '#f59e0b' : '#334155'}; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600;`}>FR</button>
+            <button onClick={() => settings.setLanguage('de')} style={() => `padding: 4px 8px; background: ${settings.language() === 'de' ? '#f59e0b' : '#1e293b'}; color: ${settings.language() === 'de' ? '#000' : '#94a3b8'}; border: 1px solid ${settings.language() === 'de' ? '#f59e0b' : '#334155'}; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600;`}>DE</button>
+            <button onClick={() => settings.setLanguage('es')} style={() => `padding: 4px 8px; background: ${settings.language() === 'es' ? '#f59e0b' : '#1e293b'}; color: ${settings.language() === 'es' ? '#000' : '#94a3b8'}; border: 1px solid ${settings.language() === 'es' ? '#f59e0b' : '#334155'}; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600;`}>ES</button>
+            <button onClick={() => settings.setLanguage('ja')} style={() => `padding: 4px 8px; background: ${settings.language() === 'ja' ? '#f59e0b' : '#1e293b'}; color: ${settings.language() === 'ja' ? '#000' : '#94a3b8'}; border: 1px solid ${settings.language() === 'ja' ? '#f59e0b' : '#334155'}; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 600;`}>JA</button>
+          </div>
+        </div>
+      </div>
+
+      {/* Live preview — uses all 3 contexts at once */}
+      <div style="margin-top: 12px; padding: 14px; border-radius: 8px; border: 1px dashed #334155;">
+        <p style="margin: 0 0 6px 0; font-size: 11px; color: #475569; text-transform: uppercase; letter-spacing: 0.06em;">Live preview using all 3 contexts</p>
+        <p style={() => `margin: 0; font-size: ${settings.fontSize()}px; color: ${theme.primaryColor()}; font-weight: 500;`}>
+          {() => (user.isLoggedIn() ? '👋 Hello, ' + user.user().name : '👋 Hello, Guest') + ' — theme: ' + theme.theme() + ', lang: ' + settings.language().toUpperCase()}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/showcase/context/components/settings-provider.syn

@@ -0,0 +1,35 @@
+/**
+ * Settings Provider Component
+ * Provides app settings context
+ *
+ * IMPORTANT: signals must be at module level — in PSR/JSX children evaluate
+ * before the parent component body runs, so component-local signals would not
+ * be visible to children via useContext().
+ */
+
+import { createSignal, createContext } from '@synetics/synetics.dev';
+
+interface SettingsProviderProps {
+  children: JSX.Element
+}
+
+// Module-level signals — available before SettingsProvider body executes.
+const [_fontSize, _setFontSize] = createSignal(16);
+const [_notifications, _setNotifications] = createSignal(true);
+const [_language, _setLanguage] = createSignal('en');
+
+export const SettingsContext = createContext({
+  fontSize: _fontSize,
+  setFontSize: _setFontSize,
+  notifications: _notifications,
+  setNotifications: _setNotifications,
+  language: _language,
+  setLanguage: _setLanguage
+});
+
+export const SettingsProvider = (props: SettingsProviderProps) => {
+  return SettingsContext.Provider({
+    value: { fontSize: _fontSize, setFontSize: _setFontSize, notifications: _notifications, setNotifications: _setNotifications, language: _language, setLanguage: _setLanguage },
+    children: typeof props.children === 'function' ? props.children : () => props.children
+  });
+};

package/src/showcase/context/components/theme-controls.syn

@@ -0,0 +1,51 @@
+/**
+ * Theme Controls Component
+ * UI for controlling theme settings
+ */
+
+import { useContext } from '@synetics/synetics.dev';
+import { ThemeContext } from './theme-provider.syn';
+
+export const ThemeControls = () => {
+  const ctx = useContext(ThemeContext);
+  
+  const colors = [
+    { name: 'Blue', value: '#3b82f6' },
+    { name: 'Green', value: '#10b981' },
+    { name: 'Purple', value: '#8b5cf6' },
+    { name: 'Orange', value: '#f59e0b' }
+  ];
+  
+  return (
+    <div>
+      <div style="margin-bottom: 15px;">
+        <h4 style="margin: 0 0 10px 0; color: white;">Theme Mode:</h4>
+        <div style="display: flex; gap: 10px;">
+          <button
+            onClick={() => ctx.setTheme('light')}
+            style={() => `padding: 8px 16px; background: ${ctx.theme() === 'light' ? '#10b981' : '#334155'}; color: white; border: 2px solid ${ctx.theme() === 'light' ? '#10b981' : '#475569'}; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s;`}>
+            ☀️ Light
+          </button>
+          <button
+            onClick={() => ctx.setTheme('dark')}
+            style={() => `padding: 8px 16px; background: ${ctx.theme() === 'dark' ? '#10b981' : '#334155'}; color: white; border: 2px solid ${ctx.theme() === 'dark' ? '#10b981' : '#475569'}; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s;`}>
+            🌙 Dark
+          </button>
+        </div>
+      </div>
+      
+      <div>
+        <h4 style="margin: 0 0 10px 0; color: white;">Primary Color:</h4>
+        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+          {colors.map(color => (
+            <button
+              onClick={() => ctx.setPrimaryColor(color.value)}
+              style={() => `padding: 8px 16px; background: ${ctx.primaryColor() === color.value ? color.value : '#334155'}; color: white; border: 2px solid ${color.value}; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.2s; opacity: ${ctx.primaryColor() === color.value ? '1' : '0.6'};`}>
+              {color.name}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/showcase/context/components/theme-provider.syn

@@ -0,0 +1,25 @@
+/**
+ * Theme Provider Component
+ * Provides theme context to children
+ */
+
+import { createSignal, createContext } from '@synetics/synetics.dev';
+
+// Module-level signals so useContext() returns reactive values
+// regardless of JSX evaluation order (children render before Provider body).
+const [_theme, _setTheme] = createSignal('light');
+const [_primaryColor, _setPrimaryColor] = createSignal('#3b82f6');
+
+export const ThemeContext = createContext({
+  theme: _theme,
+  setTheme: _setTheme,
+  primaryColor: _primaryColor,
+  setPrimaryColor: _setPrimaryColor
+});
+
+export const ThemeProvider = (props: { children: JSX.Element }) => {
+  return ThemeContext.Provider({
+    value: { theme: _theme, setTheme: _setTheme, primaryColor: _primaryColor, setPrimaryColor: _setPrimaryColor },
+    children: typeof props.children === 'function' ? props.children : () => props.children
+  });
+};

package/src/showcase/context/components/themed-box.syn

@@ -0,0 +1,20 @@
+/**
+ * Themed Box Component
+ * Consumes theme context
+ */
+
+import { useContext } from '@synetics/synetics.dev';
+import { ThemeContext } from './theme-provider.syn';
+
+export const ThemedBox = () => {
+  const ctx = useContext(ThemeContext);
+  
+  return (
+    <div style={() => `padding: 15px; background: ${ctx.theme() === 'dark' ? '#1a1a1a' : '#f1f5f9'}; color: ${ctx.theme() === 'dark' ? 'white' : 'black'}; border: 2px solid ${ctx.primaryColor()}; border-radius: 4px; transition: all 0.3s;`}>
+      <p style="margin: 0; font-weight: bold;">Themed Component</p>
+      <p style="margin: 5px 0 0 0; font-size: 12px; opacity: 0.8;">
+        Theme: {ctx.theme()} | Color: {ctx.primaryColor()}
+      </p>
+    </div>
+  );
+};

package/src/showcase/context/components/user-controls.syn

@@ -0,0 +1,38 @@
+/**
+ * User Controls Component
+ * UI for user authentication controls
+ */
+
+import { useContext } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+import { UserContext } from './user-provider.syn';
+
+export const UserControls = () => {
+  const ctx = useContext(UserContext);
+  
+  const users = [
+    { name: 'Alice', role: 'admin' },
+    { name: 'Bob', role: 'user' },
+    { name: 'Charlie', role: 'moderator' }
+  ];
+  
+  return (
+    <div>
+      {ctx.isLoggedIn() ? (
+        <DemoButton onClick={ctx.logout} color="#ef4444">
+          Logout
+        </DemoButton>
+      ) : (
+        <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+          {users.map(userItem => (
+            <DemoButton 
+              onClick={() => ctx.login(userItem.name, userItem.role)}
+              color="#10b981">
+              Login as {userItem.name}
+            </DemoButton>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/showcase/context/components/user-profile.syn

@@ -0,0 +1,26 @@
+/**
+ * User Profile Component
+ * Consumes user context
+ */
+
+import { useContext } from '@synetics/synetics.dev';
+import { UserContext } from './user-provider.syn';
+
+export const UserProfile = () => {
+  const ctx = useContext(UserContext);
+  
+  return (
+    <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; border-left: 4px solid #10b981;">
+      {ctx.isLoggedIn() ? (
+        <div>
+          <p style="margin: 0; color: white; font-weight: bold;">Welcome, {ctx.user().name}!</p>
+          <p style="margin: 5px 0 0 0; color: #94a3b8; font-size: 12px;">
+            Role: {ctx.user().role}
+          </p>
+        </div>
+      ) : (
+        <p style="margin: 0; color: #94a3b8;">Not logged in</p>
+      )}
+    </div>
+  );
+};

package/src/showcase/context/components/user-provider.syn

@@ -0,0 +1,34 @@
+/**
+ * User Provider Component
+ * Provides user authentication context
+ */
+
+import { createSignal, createContext } from '@synetics/synetics.dev';
+
+// Module-level signals — available before Provider body executes.
+const [_user, _setUser] = createSignal({ name: 'Guest', role: 'visitor' });
+const [_isLoggedIn, _setIsLoggedIn] = createSignal(false);
+
+const _login = (name: string, role: string) => {
+  _setUser({ name, role });
+  _setIsLoggedIn(true);
+};
+
+const _logout = () => {
+  _setUser({ name: 'Guest', role: 'visitor' });
+  _setIsLoggedIn(false);
+};
+
+export const UserContext = createContext({
+  user: _user,
+  isLoggedIn: _isLoggedIn,
+  login: _login,
+  logout: _logout
+});
+
+export const UserProvider = (props: { children: JSX.Element }) => {
+  return UserContext.Provider({
+    value: { user: _user, isLoggedIn: _isLoggedIn, login: _login, logout: _logout },
+    children: typeof props.children === 'function' ? props.children : () => props.children
+  });
+};

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

@@ -0,0 +1,66 @@
+/**
+ * PHASE 5: Context API & Dependency Injection
+ * Refactored with modular components
+ */
+
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { 
+  ThemeContext, 
+  ThemeProvider, 
+  UserContext, 
+  UserProvider, 
+  SettingsContext, 
+  SettingsProvider 
+} from './components/index.ts';
+import { ThemedBox } from './components/themed-box.syn';
+import { UserProfile } from './components/user-profile.syn';
+import { ThemeControls } from './components/theme-controls.syn';
+import { UserControls } from './components/user-controls.syn';
+import { MultiContextDashboard } from './components/multi-context-dashboard.syn';
+
+export component ContextTestPage() {
+  return (
+    <div>
+      <PageHeader 
+        title="Context API & Dependency Injection"
+        emoji="🔌"
+        color="#8b5cf6"
+        description="Demonstrates createContext, useContext, and Provider pattern"
+      />
+      
+      <ThemeProvider>
+        <UserProvider>
+          <SettingsProvider>
+            <DemoSection 
+              title="1️⃣ Theme Context" 
+              description="Share theme state across components without prop drilling"
+              borderColor="#8b5cf6">
+              <div style="margin-bottom: 20px;">
+                <ThemeControls />
+              </div>
+              <ThemedBox />
+            </DemoSection>
+            
+            <DemoSection 
+              title="2️⃣ User Context" 
+              description="Manage user authentication state globally"
+              borderColor="#10b981">
+              <div style="margin-bottom: 20px;">
+                <UserControls />
+              </div>
+              <UserProfile />
+            </DemoSection>
+            
+            <DemoSection 
+              title="3️⃣ Multiple Contexts" 
+              description="One component consuming ThemeContext + UserContext + SettingsContext simultaneously — change theme or user above and watch this update"
+              borderColor="#f59e0b">
+              <MultiContextDashboard />
+            </DemoSection>
+          </SettingsProvider>
+        </UserProvider>
+      </ThemeProvider>
+    </div>
+  );
+}

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

@@ -0,0 +1,67 @@
+/**
+ * For Demo Component
+ * Demonstrates list rendering with ForRegistry
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface CartItem {
+  id: number
+  name: string
+  price: number
+}
+
+interface ForDemoProps {
+  items: Accessor<CartItem[]>
+  addItem: () => void
+  removeItem: (id: number) => void
+  sortByPrice: () => void
+}
+
+export const ForDemo = ({ items, addItem, removeItem, sortByPrice }: ForDemoProps) => {
+  return (
+    <div>
+      <div style="display: flex; gap: 10px; margin-bottom: 15px;">
+        <DemoButton onClick={addItem} color="#10b981">
+          Add Item
+        </DemoButton>
+        <DemoButton onClick={sortByPrice} color="#3b82f6">
+          Sort by Price
+        </DemoButton>
+      </div>
+      
+      <div style="display: grid; gap: 10px;">
+        {items().length === 0 && (
+          <p style="color: #64748b;">No items in cart</p>
+        )}
+        {items().map((item) => (
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px; background: #1a1a1a; border-radius: 4px; border: 1px solid #334155;">
+            <div>
+              <span style="font-weight: bold; color: white; margin-right: 10px;">
+                {item.name}
+              </span>
+              <span style="color: #10b981; font-size: 18px;">
+                ${item.price.toFixed(2)}
+              </span>
+            </div>
+
+            <DemoButton
+              onClick={() => removeItem(item.id)}
+              color="#ef4444"
+              size="sm">
+              Remove
+            </DemoButton>
+          </div>
+        ))}
+      </div>
+      
+      <div style="margin-top: 15px; padding: 10px; background: #1a1a1a; border-radius: 4px;">
+        <strong style="color: white;">Total Items: {items().length}</strong>
+        <span style="margin-left: 20px; color: #10b981;">
+          Total Cost: ${items().reduce((sum, item) => sum + item.price, 0).toFixed(2)}
+        </span>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,41 @@
+/**
+ * Index Demo Component
+ * Demonstrates index-based iteration
+ */
+
+import type { Accessor } from '@synetics/synetics.dev';
+import { Index } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+interface IndexDemoProps {
+  colors: Accessor<string[]>
+  shuffleColors: () => void
+}
+
+export const IndexDemo = ({ colors, shuffleColors }: IndexDemoProps) => {
+  return (
+    <div>
+      <DemoButton 
+        onClick={shuffleColors}
+        color="#8b5cf6"
+        style="margin-bottom: 15px;">
+        Shuffle Colors
+      </DemoButton>
+      
+      <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+        <Index each={colors()}>
+          {(color, index) => (
+            <div style="padding: 15px 25px; background: #1a1a1a; border-radius: 4px; border: 2px solid #8b5cf6;">
+              <div style="font-size: 12px; color: #94a3b8; margin-bottom: 5px;">
+                Index: {index}
+              </div>
+              <div style="font-size: 18px; font-weight: bold; color: white;">
+                {color()}
+              </div>
+            </div>
+          )}
+        </Index>
+      </div>
+    </div>
+  );
+};

package/src/showcase/control-flow/components/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Control Flow Components Index
+ */
+
+export { ForDemo } from './for-demo.syn'
+export { IndexDemo } from './index-demo.syn'
+export { ShowDemo } from './show-demo.syn'
+