@synetics/ui 0.7.0-alpha

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

@@ -0,0 +1,170 @@
+/**
+ * PHASE 1: Core Reactivity Tests
+ * Refactored with modular components
+ */
+
+import { createSignal, createEffect, createMemo, batch, useSync } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { SignalDemo } from './components/signal-demo.syn';
+import { MemoDemo } from './components/memo-demo.syn';
+import { EffectDemo } from './components/effect-demo.syn';
+import { BatchDemo } from './components/batch-demo.syn';
+import { RenderEffectDemo } from './components/render-effect-demo.syn';
+import { UntrackDemo } from './components/untrack-demo.syn';
+import { UseSyncDemo } from './components/use-sync-demo.syn';
+import { ConsoleLogViewer } from '../common/components/console-log-viewer.syn';
+import type { LogEntry } from '../common/components/console-log-viewer.syn';
+
+export component ReactivityTestPage() {
+  // Signals
+  const [firstName, setFirstName] = createSignal('John');
+  const [lastName, setLastName] = createSignal('Doe');
+  const [age, setAge] = createSignal(25);
+  
+  // Memos
+  const fullName = createMemo(() => `${firstName()} ${lastName()}`);
+  const isAdult = createMemo(() => age() >= 18);
+  
+  // Effect run counter for batch demo
+  const [effectRunCount, setEffectRunCount] = createSignal(0);
+  const [effectLogs, setEffectLogs] = createSignal<LogEntry[]>([]);
+  
+  const addEffectLog = (message: string) => {
+    const timestamp = new Date().toLocaleTimeString('en-US', { hour12: false });
+    setEffectLogs(logs => [...logs, { timestamp, level: 'log', message }]); // Use updater to avoid tracking effectLogs in effect
+  };
+  
+  const clearEffectLogs = () => setEffectLogs([]);
+  
+  // Effects
+  createEffect(() => {
+    const name = fullName(); // Track fullName changes ONLY (don't track effectRunCount to avoid infinite loop)
+    setEffectRunCount(c => c + 1); // Use updater function, don't read current value
+    const message = `🔄 Effect executed - Full name: ${name}`;
+    addEffectLog(message);
+    console.log(`[Effect] Full name changed to: ${name}`);
+  });
+  
+  // Batch handlers
+  const updateAll = () => {
+    batch(() => {
+      setFirstName('Jane');
+      setLastName('Smith');
+      setAge(30);
+    });
+  };
+  
+  const resetAll = () => {
+    batch(() => {
+      setFirstName('John');
+      setLastName('Doe');
+      setAge(25);
+    });
+  };
+  
+  return (
+    <div>
+      <PageHeader 
+        title="Core Reactivity Tests"
+        emoji="🧪"
+        color="#10b981"
+        description="Testing signals, effects, memos, and hooks"
+      />
+      
+      <DemoSection 
+        title="1️⃣ Multiple Signals" 
+        description="Create and manage multiple reactive signals"
+        borderColor="#3b82f6">
+        <SignalDemo 
+          firstName={firstName}
+          setFirstName={setFirstName}
+          lastName={lastName}
+          setLastName={setLastName}
+          age={age}
+          setAge={setAge}
+        />
+      </DemoSection>
+      
+      <DemoSection 
+        title="2️⃣ Computed Values (Memos)" 
+        description="Derived values that auto-update when dependencies change"
+        borderColor="#8b5cf6">
+        <MemoDemo fullName={fullName} isAdult={isAdult} />
+      </DemoSection>
+      
+      <DemoSection 
+        title="3️⃣ Side Effects (createEffect)" 
+        description="Run code in response to signal changes"
+        borderColor="#10b981">
+        <EffectDemo />
+      </DemoSection>
+      
+      <DemoSection 
+        title="4️⃣ Batched Updates" 
+        description="Update multiple signals without triggering intermediate effects"
+        borderColor="#f59e0b">
+        <BatchDemo 
+          updateAll={updateAll} 
+          resetAll={resetAll} 
+          effectRunCount={effectRunCount}
+        />
+      </DemoSection>
+      
+      <DemoSection 
+        title="📊 Effect Execution Monitor" 
+        description="Real-time tracking of effect runs (watch the counter grow as you change firstName/lastName)"
+        borderColor="#10b981">
+        <div style="padding: 15px; background: #1a1a1a; border-radius: 6px; margin-bottom: 15px;">
+          <div style="text-align: center; padding: 20px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 8px;">
+            <div style="font-size: 48px; font-weight: bold; color: white; margin-bottom: 10px;">
+              {effectRunCount()}
+            </div>
+            <div style="color: white; font-size: 16px;">
+              Total Effect Executions
+            </div>
+          </div>
+        </div>
+        <ConsoleLogViewer 
+          logs={effectLogs} 
+          onClear={clearEffectLogs}
+          title="Effect Execution History"
+          maxHeight="250px"
+        />
+      </DemoSection>
+      
+      <section style="background: #1a1a1a; padding: 20px; border-radius: 8px; border: 2px solid #10b981;">
+        <h3 style="font-size: 20px; margin-bottom: 15px; color: #10b981;">
+          ✅ Test Status
+        </h3>
+        <ul style="list-style: none; padding: 0; color: #9ca3af;">
+          <li style="margin-bottom: 8px;">✅ Multiple signals working</li>
+          <li style="margin-bottom: 8px;">✅ Memos (computed values)</li>
+          <li style="margin-bottom: 8px;">✅ Effects (side effects)</li>
+              <li style="margin-bottom: 8px;">✅ Batch updates</li>
+        </ul>
+      </section>
+
+      <DemoSection
+        title="5️⃣ useSync — External Store Bridge"
+        description="useSync(subscribe, getSnapshot) — bridges non-Pulsar reactive stores into the Pulsar reactive graph."
+        borderColor="#6366f1">
+        <UseSyncDemo />
+      </DemoSection>
+
+      <DemoSection
+        title="6️⃣ untrack — Subscription-Free Read"
+        description="untrack(fn) reads a signal without subscribing. ⚠️ B-01: primitive not yet exported — stub demo."
+        borderColor="#f59e0b">
+        <UntrackDemo />
+      </DemoSection>
+
+      <DemoSection
+        title="7️⃣ createRenderEffect — Sync Before Paint"
+        description="createRenderEffect fires synchronously before paint. ⚠️ B-01: primitive not yet implemented — stub demo."
+        borderColor="#ef4444">
+        <RenderEffectDemo />
+      </DemoSection>
+    </div>
+  );
+}

package/src/showcase/resource/components/cache-demo.syn

@@ -0,0 +1,141 @@
+/**
+ * Cache Demo Component
+ * Shows stale-while-revalidate caching
+ */
+
+import { createSignal, createResource, onCleanup } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+import { fetchUser } from './mock-api.ts';
+
+export const CacheDemo = () => {
+  const [fetchCount, setFetchCount] = createSignal(0);
+  const [cacheHits, setCacheHits] = createSignal(0);
+  const [lastFetchTime, setLastFetchTime] = createSignal(0);
+  const [isRefetching, setIsRefetching] = createSignal(false);
+  const [isFresh, setIsFresh] = createSignal(true);
+
+  // DOM refs - assigned via ref callbacks after element creation
+  let statusTextRef: HTMLElement | null = null;
+  let progressBarRef: HTMLElement | null = null;
+
+  // Debounce token management (plain vars - no reactivity needed)
+  let debounceTimeout: NodeJS.Timeout | null = null;
+
+  const cachedResource = createResource(() => {
+    setFetchCount(c => c + 1);
+    setLastFetchTime(Date.now());
+    return fetchUser(1);
+  }, { staleTime: 5000 });
+
+  // Interval reads signals outside reactive context (no wire tracking) -> no infinite loop
+  // Refs are set via microtask before first interval tick (100ms)
+  const timerInterval = setInterval(() => {
+    const fetchTime = lastFetchTime();
+    if (fetchTime === 0 || !statusTextRef || !progressBarRef) return;
+
+    const elapsed = Date.now() - fetchTime;
+    const timeLeft = Math.max(0, 5000 - elapsed);
+    const fresh = timeLeft > 0;
+    const timeLeftSeconds = (timeLeft / 1000).toFixed(1);
+    const progressPct = Math.max(0, Math.min(100, (timeLeft / 5000) * 100));
+
+    statusTextRef.style.color = fresh ? '#10b981' : '#ef4444';
+    statusTextRef.textContent = fresh ? `Fresh (${timeLeftSeconds}s left)` : 'Stale';
+    progressBarRef.style.background = fresh ? '#10b981' : '#ef4444';
+    progressBarRef.style.width = `${progressPct}%`;
+
+    if (fresh !== isFresh()) {
+      setIsFresh(fresh);
+    }
+  }, 100);
+
+  onCleanup(() => {
+    clearInterval(timerInterval);
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout);
+      debounceTimeout = null;
+    }
+  });
+  
+  // Debounced refetch with cancellation token
+  const refetchWithCheck = () => {
+    if (debounceTimeout) {
+      clearTimeout(debounceTimeout);
+      debounceTimeout = null;
+    }
+    
+    if (isRefetching()) return;
+    
+    debounceTimeout = setTimeout(async () => {
+      setIsRefetching(true);
+      const elapsed = Date.now() - lastFetchTime();
+      if (cachedResource.data && elapsed < 5000) {
+        setCacheHits(h => h + 1);
+      }
+      await cachedResource.refetch();
+      setIsRefetching(false);
+      debounceTimeout = null;
+    }, 150);
+  };
+  
+  return (
+    <div>
+      <DemoButton 
+        onClick={refetchWithCheck} 
+        color="#8b5cf6" 
+        style="margin-bottom: 15px;"
+        disabled={isRefetching()}
+      >
+        {isRefetching() ? '⏳ Refetching...' : '🔄 Refetch Data'}
+      </DemoButton>
+      
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 15px;">
+        <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; text-align: center;">
+          <div style="font-size: 32px; color: #ef4444; font-weight: bold;">{fetchCount()}</div>
+          <div style="color: #94a3b8; font-size: 12px;">Network Requests</div>
+        </div>
+        
+        <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; text-align: center;">
+          <div style="font-size: 32px; color: #10b981; font-weight: bold;">{cacheHits()}</div>
+          <div style="color: #94a3b8; font-size: 12px;">Cache Hits</div>
+        </div>
+      </div>
+      
+      {cachedResource.data ? (
+        <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #8b5cf6;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
+            <div style="color: #8b5cf6; font-weight: bold;">📦 Cached Data</div>
+            <div 
+              ref={(el) => { statusTextRef = el as HTMLElement; }}
+              style="font-size: 12px; font-weight: bold; color: #94a3b8;"
+            >
+              Waiting for data...
+            </div>
+          </div>
+          
+          <div style="width: 100%; height: 6px; background: #334155; border-radius: 3px; margin-bottom: 15px; overflow: hidden;">
+            <div 
+              ref={(el) => { progressBarRef = el as HTMLElement; }}
+              style="height: 100%; background: #10b981; width: 0%; transition: width 0.1s linear;"
+            ></div>
+          </div>
+          
+          <div style="display: flex; gap: 15px; align-items: center;">
+            <img 
+              src={cachedResource.data?.avatar} 
+              alt={cachedResource.data?.name}
+              style="width: 50px; height: 50px; border-radius: 50%;"
+            />
+            <div>
+              <div style="color: white; font-weight: bold;">{cachedResource.data?.name}</div>
+              <div style="color: #94a3b8; font-size: 12px;">{cachedResource.data?.email}</div>
+            </div>
+          </div>
+          <div style="color: #64748b; font-size: 11px; margin-top: 10px;">
+            💡 Refetch while fresh = instant cache hit. After 5s = stale-while-revalidate.
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/showcase/resource/components/coordination-demo.syn

@@ -0,0 +1,136 @@
+/**
+ * P1-06 — Suspense Coordination Demo
+ * Exercises: waitForAll, isAnyLoading, isAllSuccess, isAnyError
+ *
+ * Shows 3 resources loading at different speeds.
+ * Status badges are derived from the coordination helpers.
+ * "Wait for all" button resolves via waitForAll().
+ */
+
+import {
+  createResource,
+  createSignal,
+  createEffect,
+  waitForAll,
+  refetchAll,
+  isAnyLoading,
+  isAllSuccess,
+  isAnyError,
+} from '@synetics/synetics.dev';
+import { fetchUser, fetchPosts, fetchActivity } from './mock-api.ts';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+export const CoordinationDemo = () => {
+  const [active, setActive] = createSignal(false);
+  const [waitLog, setWaitLog] = createSignal<string[]>([]);
+  const [allDone, setAllDone] = createSignal(false);
+
+  // Lazy resources — do not auto-fetch; refetchAll() triggers loading
+  const userResource = createResource(() => fetchUser(1), { lazy: true });
+  const postsResource = createResource(() => fetchPosts(1), { lazy: true });
+  const activityResource = createResource(() => fetchActivity(1), { lazy: true });
+
+  const resources = [userResource, postsResource, activityResource];
+
+  // Mirror coordination helpers into signals so JSX can read them reactively.
+  // createEffect tracks r.isLoading / r.isSuccess / r.isError (signal getters)
+  // and re-fires whenever any resource state transitions.
+  const [anyLoading, setAnyLoading] = createSignal(false);
+  const [allSuccess, setAllSuccessState] = createSignal(false);
+  const [anyError, setAnyErrorState] = createSignal(false);
+
+  createEffect(() => {
+    setAnyLoading(isAnyLoading(resources));
+    setAllSuccessState(isAllSuccess(resources));
+    setAnyErrorState(isAnyError(resources));
+  });
+
+  const handleStart = async () => {
+    setActive(true);
+    setAllDone(false);
+    setWaitLog(['⏳ waitForAll() called — awaiting all 3 resources...']);
+    refetchAll(resources);
+    await waitForAll(resources);
+    setAllDone(true);
+    setWaitLog(prev => [...prev, '✅ waitForAll() resolved — all resources complete']);
+  };
+
+  const handleReset = () => {
+    setActive(false);
+    setAllDone(false);
+    setWaitLog([]);
+  };
+
+  const statusColor = (loading: boolean, error: boolean, success: boolean) => {
+    if (loading) return '#f59e0b';
+    if (error) return '#ef4444';
+    if (success) return '#10b981';
+    return '#475569';
+  };
+
+  const statusLabel = (r: typeof userResource) => {
+    if (r.isLoading) return 'loading…';
+    if (r.isError) return '✗ error';
+    if (r.isSuccess) return '✓ done';
+    return 'idle';
+  };
+
+  return (
+    <div style="padding: 20px; background: #1e293b; border-radius: 8px;">
+
+      {/* Resource status grid */}
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;">
+        {[
+          { label: 'User (1 s)', r: userResource },
+          { label: 'Posts (0.8 s)', r: postsResource },
+          { label: 'Activity (0.6 s)', r: activityResource },
+        ].map(({ label, r }) => (
+          <div style={`padding: 14px; background: #0f172a; border-radius: 6px; border-left: 3px solid ${statusColor(r.isLoading, r.isError, r.isSuccess)};`}>
+            <div style="color: #94a3b8; font-size: 11px; margin-bottom: 4px;">{label}</div>
+            <div style={`font-size: 13px; font-weight: 600; color: ${statusColor(r.isLoading, r.isError, r.isSuccess)};`}>
+              {statusLabel(r)}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Combined status badges */}
+      {active() ? (
+        <div style="display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;">
+          <span style={`padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 600; background: ${anyLoading() ? '#92400e' : '#1e293b'}; color: ${anyLoading() ? '#fbbf24' : '#475569'}; border: 1px solid currentColor;`}>
+            isAnyLoading {anyLoading() ? '→ true' : '→ false'}
+          </span>
+          <span style={`padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 600; background: ${allSuccess() ? '#064e3b' : '#1e293b'}; color: ${allSuccess() ? '#34d399' : '#475569'}; border: 1px solid currentColor;`}>
+            isAllSuccess {allSuccess() ? '→ true' : '→ false'}
+          </span>
+          <span style={`padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 600; background: ${anyError() ? '#450a0a' : '#1e293b'}; color: ${anyError() ? '#fca5a5' : '#475569'}; border: 1px solid currentColor;`}>
+            isAnyError {anyError() ? '→ true' : '→ false'}
+          </span>
+        </div>
+      ) : null}
+
+      {/* waitForAll log */}
+      {waitLog().length > 0 ? (
+        <div style="margin-bottom: 20px; padding: 12px; background: #0f172a; border-radius: 6px; font-family: monospace; font-size: 12px;">
+          {waitLog().map(line => (
+            <div style={`color: ${line.startsWith('✅') ? '#34d399' : '#94a3b8'}; margin-bottom: 4px;`}>{line}</div>
+          ))}
+          {allDone() ? (
+            <div style="color: #34d399; margin-top: 8px; font-weight: 600;">
+              → isAllSuccess: {String(allSuccess())} · isAnyLoading: {String(anyLoading())}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      <div style="display: flex; gap: 10px;">
+        <DemoButton onClick={handleStart} color="#06b6d4" disabled={active()}>
+          ▶ Start + waitForAll()
+        </DemoButton>
+        <DemoButton onClick={handleReset} color="#475569">
+          ↺ Reset
+        </DemoButton>
+      </div>
+    </div>
+  );
+};

package/src/showcase/resource/components/deduplication-demo.syn

@@ -0,0 +1,33 @@
+/**
+ * Deduplication Demo Component
+ * Shows how 3 components share 1 request
+ */
+
+import { createResource } from '@synetics/synetics.dev';
+import { fetchUser } from './mock-api.ts';
+import { UserCard } from './user-card.syn';
+
+export const DeduplicationDemo = () => {
+  const user1 = createResource(() => fetchUser(1));
+  const user2 = createResource(() => fetchUser(1));
+  const user3 = createResource(() => fetchUser(1));
+  
+  return (
+    <div>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px;">
+        <UserCard resource={user1} label="Component A" />
+        <UserCard resource={user2} label="Component B" />
+        <UserCard resource={user3} label="Component C" />
+      </div>
+      
+      <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #10b981;">
+        <div style="color: #10b981; font-weight: bold; margin-bottom: 5px;">
+          📊 Network Efficiency
+        </div>
+        <div style="color: #94a3b8; font-size: 14px;">
+          3 components requested data, only <strong style="color: #10b981;">1 network request</strong> made!
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/showcase/resource/components/error-resource-demo.syn

@@ -0,0 +1,93 @@
+/**
+ * P1-06 — Error Resource Demo
+ * Exercises: getErrors, isAnyError
+ *
+ * Two lazy resources: one succeeds, one always rejects.
+ * Pressing "Fetch" triggers refetchAll — the bad resource's error
+ * surfaces via isAnyError() and getErrors().
+ */
+
+import {
+  createResource,
+  createSignal,
+  getErrors,
+  isAnyError,
+  refetchAll,
+} from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+const fetchGood = () =>
+  new Promise<{ value: string }>(resolve =>
+    setTimeout(() => resolve({ value: 'response OK' }), 800)
+  );
+
+const fetchBad = () =>
+  new Promise<never>((_, reject) =>
+    setTimeout(() => reject(new Error('Simulated network failure')), 600)
+  );
+
+export const ErrorResourceDemo = () => {
+  const [fetchCount, setFetchCount] = createSignal(0);
+
+  const good = createResource(fetchGood, { lazy: true });
+  const bad  = createResource(fetchBad,  { lazy: true });
+  const resources = [good, bad];
+
+  const stateColor = (r: typeof good) => {
+    if (r.isLoading) return '#f59e0b';
+    if (r.isError)   return '#ef4444';
+    if (r.isSuccess) return '#10b981';
+    return '#475569';
+  };
+
+  const stateLabel = (r: typeof good) => {
+    if (r.isLoading) return 'loading…';
+    if (r.isError)   return '✗ error';
+    if (r.isSuccess) return `✓ ${r.data?.value ?? 'done'}`;
+    return 'idle';
+  };
+
+  const handleFetch = () => {
+    setFetchCount(n => n + 1);
+    refetchAll(resources);
+  };
+
+  return (
+    <div style="padding: 20px; background: #1e293b; border-radius: 8px;">
+
+      {/* Resource status row */}
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;">
+        <div style={`padding: 14px; background: #0f172a; border-radius: 6px; border-left: 3px solid ${stateColor(good)};`}>
+          <div style="color: #94a3b8; font-size: 11px; margin-bottom: 4px;">good resource</div>
+          <div style={`font-size: 13px; font-weight: 600; color: ${stateColor(good)};`}>
+            {stateLabel(good)}
+          </div>
+        </div>
+        <div style={`padding: 14px; background: #0f172a; border-radius: 6px; border-left: 3px solid ${stateColor(bad)};`}>
+          <div style="color: #94a3b8; font-size: 11px; margin-bottom: 4px;">bad resource (always fails)</div>
+          <div style={`font-size: 13px; font-weight: 600; color: ${stateColor(bad)};`}>
+            {stateLabel(bad)}
+          </div>
+        </div>
+      </div>
+
+      {/* getErrors panel — shown reactively when isAnyError() is true */}
+      {isAnyError(resources) ? (
+        <div style="margin-bottom: 20px; padding: 12px; background: #450a0a; border-radius: 6px; border: 1px solid #991b1b;">
+          <div style="color: #fca5a5; font-size: 12px; font-weight: 600; margin-bottom: 8px;">
+            isAnyError → true · getErrors() → {getErrors(resources).length} error(s)
+          </div>
+          {getErrors(resources).map((e, i) => (
+            <div style="font-family: monospace; font-size: 11px; color: #fda4af; padding: 2px 0;">
+              [{i}] {e.message}
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      <DemoButton onClick={handleFetch} color="#ef4444">
+        ▶ Fetch (run #{fetchCount() + 1})
+      </DemoButton>
+    </div>
+  );
+};

package/src/showcase/resource/components/image-card.syn

@@ -0,0 +1,53 @@
+/**
+ * Image Card Component
+ * Single image card with loading state
+ */
+
+import { createSignal, createEffect } from '@synetics/synetics.dev';
+
+interface ImageCardProps {
+  resource: any
+  index: number
+}
+
+export const ImageCard = ({ resource, index }: ImageCardProps) => {
+  // resource.isLoading / isSuccess are JS property getters backed by a signal
+  // internally. They must be read inside createEffect so the reactivity system
+  // tracks them. We bridge into local call-expression signals so the PSR
+  // transformer can promote the JSX ternaries to ShowRegistry.
+  const [loading, setLoading] = createSignal(resource.isLoading);
+  const [success, setSuccess] = createSignal(resource.isSuccess);
+  const [imgSrc, setImgSrc] = createSignal(resource.data);
+
+  createEffect(() => {
+    setLoading(resource.isLoading);
+    setSuccess(resource.isSuccess);
+    setImgSrc(resource.data);
+  });
+
+  return (
+    <div style="aspect-ratio: 3/2; background: #1a1a1a; border-radius: 8px; overflow: hidden; position: relative;">
+      {loading() ? (
+        <div style="width: 100%; height: 100%; display: flex; alignItems: center; justify-content: center; background: #334155;">
+          <div style="text-align: center;">
+            <div style="color: #06b6d4; font-size: 24px; margin-bottom: 5px;">⏳</div>
+            <div style="color: #94a3b8; font-size: 12px;">#{index}</div>
+          </div>
+        </div>
+      ) : null}
+
+      {success() ? (
+        <div style="position: relative; width: 100%; height: 100%;">
+          <img
+            src={imgSrc()}
+            alt={`Image ${index}`}
+            style="width: 100%; height: 100%; object-fit: cover;"
+          />
+          <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 10px;">
+            <div style="color: white; font-size: 12px; font-weight: bold;">Image #{index}</div>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/showcase/resource/components/image-gallery-demo.syn

@@ -0,0 +1,56 @@
+/**
+ * Image Gallery Demo Component
+ * Progressive image loading demo
+ */
+
+import { createSignal, createEffect, createResource, Index } from '@synetics/synetics.dev';
+import { loadImage } from './mock-api.ts';
+import { ImageCard } from './image-card.syn';
+
+export const ImageGalleryDemo = () => {
+  const imageResources = [
+    createResource(() => loadImage(1)),
+    createResource(() => loadImage(2)),
+    createResource(() => loadImage(3)),
+    createResource(() => loadImage(4)),
+    createResource(() => loadImage(5)),
+    createResource(() => loadImage(6))
+  ];
+  
+  const [loadedCount, setLoadedCount] = createSignal(0);
+  
+  createEffect(() => {
+    const loaded = imageResources.filter(r => r.isSuccess).length;
+    setLoadedCount(loaded);
+  });
+  
+  return (
+    <div>
+      <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; margin-bottom: 15px;">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <div>
+            <span style="color: #f59e0b; font-weight: bold;">Progress:</span>
+            <span style="color: white; margin-left: 10px; font-size: 18px;">{loadedCount()} / 6</span>
+          </div>
+          <div style="width: 200px; height: 8px; background: #334155; border-radius: 4px; overflow: hidden;">
+            <div style={`width: ${(loadedCount() / 6) * 100}%; height: 100%; background: #f59e0b; transition: width 0.3s;`}></div>
+          </div>
+        </div>
+      </div>
+      
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
+        <Index each={() => imageResources}>
+          {(resource, index) => (
+            <ImageCard resource={resource()} index={index + 1} />
+          )}
+        </Index>
+      </div>
+      
+      <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #f59e0b; margin-top: 15px;">
+        <div style="color: #64748b; font-size: 12px;">
+          💡 Parallel loading with individual states. Use: galleries, dashboards.
+        </div>
+      </div>
+    </div>
+  );
+};