@synetics/ui 0.7.0-alpha

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

@@ -0,0 +1,15 @@
+/**
+ * Resource Components Index
+ */
+
+export { CacheDemo } from './cache-demo.syn';
+export { CoordinationDemo } from './coordination-demo.syn';
+export { DeduplicationDemo } from './deduplication-demo.syn';
+export { ErrorResourceDemo } from './error-resource-demo.syn';
+export { ImageCard } from './image-card.syn';
+export { ImageGalleryDemo } from './image-gallery-demo.syn';
+export { RefetchClearDemo } from './refetch-clear-demo.syn';
+export { SuspendControlDemo } from './suspend-control-demo.syn';
+export { SuspenseSkeleton } from './suspense-skeleton.syn';
+export { UserCard } from './user-card.syn';
+export { WaitingDemo } from './waiting-demo.syn';

package/src/showcase/resource/components/mock-api.ts

@@ -0,0 +1,67 @@
+/**
+ * Mock API Functions
+ * Simulated API calls for resource demos
+ */
+
+let networkRequestCount = 0;
+
+export async function fetchUser(id: number) {
+  const requestId = ++networkRequestCount;
+  console.log(`[Network #${requestId}] Fetching user ${id}`);
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        id,
+        name: `User ${id}`,
+        email: `user${id}@example.com`,
+        avatar: `https://i.pravatar.cc/150?img=${id}`,
+        requestId,
+      });
+    }, 1000);
+  });
+}
+
+export async function fetchPosts(userId: number) {
+  const requestId = ++networkRequestCount;
+  console.log(`[Network #${requestId}] Fetching posts for user ${userId}`);
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { id: 1, title: 'Getting Started with Pulsar', likes: 42 },
+        { id: 2, title: 'Reactive Programming', likes: 38 },
+      ]);
+    }, 800);
+  });
+}
+
+export async function fetchActivity(userId: number) {
+  const requestId = ++networkRequestCount;
+  console.log(`[Network #${requestId}] Fetching activity for user ${userId}`);
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        totalPosts: 156,
+        followers: 1240,
+        following: 89,
+      });
+    }, 600);
+  });
+}
+
+export async function loadImage(index: number) {
+  return new Promise((resolve) => {
+    setTimeout(
+      () => {
+        resolve(`https://placehold.co/300x200?text=Image+${index}`);
+      },
+      Math.random() * 500 + 300
+    );
+  });
+}
+
+export function resetNetworkCount() {
+  networkRequestCount = 0;
+}

package/src/showcase/resource/components/refetch-clear-demo.syn

@@ -0,0 +1,99 @@
+/**
+ * P1-06 — Refetch & Clear Demo
+ * Exercises: refetchAll, clearAll — bulk resource operations
+ *
+ * Two lazy resources are controlled via refetchAll (parallel fetch)
+ * and clearAll (reset both to idle). Request counts and state
+ * transitions are displayed reactively.
+ */
+
+import {
+  createResource,
+  createSignal,
+  refetchAll,
+  clearAll,
+} from '@synetics/synetics.dev';
+import { fetchUser, fetchPosts } from './mock-api.ts';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+export const RefetchClearDemo = () => {
+  const [refetchCount, setRefetchCount] = createSignal(0);
+  const [clearLog, setClearLog] = createSignal<string[]>([]);
+
+  const r1 = createResource(() => fetchUser(1),   { lazy: true });
+  const r2 = createResource(() => fetchPosts(1),  { lazy: true });
+  const resources = [r1, r2];
+
+  const stateLabel = (r: typeof r1) => {
+    if (r.isLoading) return 'loading…';
+    if (r.isSuccess) return '✓ success';
+    if (r.isError)   return '✗ error';
+    return 'idle';
+  };
+
+  const stateColor = (r: typeof r1) => {
+    if (r.isLoading) return '#f59e0b';
+    if (r.isSuccess) return '#10b981';
+    if (r.isError)   return '#ef4444';
+    return '#475569';
+  };
+
+  const handleRefetch = () => {
+    setRefetchCount(n => n + 1);
+    refetchAll(resources);
+  };
+
+  const handleClear = () => {
+    clearAll(resources);
+    const t = new Date().toLocaleTimeString();
+    setClearLog(prev => [...prev, `[${t}] clearAll() — both resources reset to idle`]);
+  };
+
+  return (
+    <div style="padding: 20px; background: #1e293b; border-radius: 8px;">
+
+      {/* Resource status grid */}
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;">
+        {[
+          { label: 'user resource (r1)', r: r1 },
+          { label: 'posts resource (r2)', r: r2 },
+        ].map(({ label, r }) => (
+          <div style={`padding: 14px; background: #0f172a; border-radius: 6px; border-left: 3px solid ${stateColor(r)};`}>
+            <div style="color: #94a3b8; font-size: 11px; margin-bottom: 4px;">{label}</div>
+            <div style={`font-size: 13px; font-weight: 600; color: ${stateColor(r)};`}>
+              {stateLabel(r)}
+            </div>
+            <div style="font-size: 10px; color: #475569; margin-top: 4px; font-family: monospace;">
+              state: "{r.state}"
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* refetchAll call count */}
+      {refetchCount() > 0 ? (
+        <div style="margin-bottom: 14px; padding: 8px 12px; background: #1e3a5f; border-radius: 4px; font-size: 12px; color: #7dd3fc; font-family: monospace;">
+          refetchAll() called {refetchCount()} time(s) — fetches run in parallel
+        </div>
+      ) : null}
+
+      {/* clearAll log */}
+      {clearLog().length > 0 ? (
+        <div style="margin-bottom: 14px; padding: 8px 12px; background: #0f172a; border-radius: 4px;">
+          {clearLog().map(line => (
+            <div style="font-family: monospace; font-size: 11px; color: #94a3b8;">{line}</div>
+          ))}
+        </div>
+      ) : null}
+
+      <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+        <DemoButton onClick={handleRefetch} color="#06b6d4">
+          refetchAll() (#{refetchCount() + 1})
+        </DemoButton>
+        <DemoButton onClick={handleClear} color="#ef4444">
+          clearAll()
+        </DemoButton>
+      </div>
+    </div>
+  );
+};

package/src/showcase/resource/components/suspend-control-demo.syn

@@ -0,0 +1,62 @@
+/**
+ * P1-06 — Suspend Control Demo
+ * Exercises: suspendWaiting, resolveWaiting — imperative Waiting API
+ *
+ * The Waiting container is captured so both resolve and suspend can be
+ * triggered via external buttons, independent of resource state.
+ */
+
+import { Waiting, suspendWaiting, resolveWaiting } from '@synetics/synetics.dev';
+import { DemoButton } from '../../common/components/demo-button.syn';
+
+export const SuspendControlDemo = () => {
+  const loadingFallback = (
+    <div style="text-align: center; padding: 30px; color: #f59e0b;">
+      <div style="font-size: 32px; margin-bottom: 8px;">⏳</div>
+      <div style="font-size: 12px; color: #94a3b8;">data-waiting attribute present — loading state active</div>
+    </div>
+  );
+
+  const content = (
+    <div style="text-align: center; padding: 30px; color: #34d399;">
+      <div style="font-size: 32px; margin-bottom: 8px;">✅</div>
+      <div style="font-size: 14px; font-weight: 600;">Content resolved!</div>
+      <div style="font-size: 12px; color: #64748b; margin-top: 4px;">
+        Call suspendWaiting() to return to loading state
+      </div>
+    </div>
+  );
+
+  // Capture Waiting's HTMLElement for imperative control
+  const waitingEl = (
+    <Waiting default={loadingFallback}>
+      {content}
+    </Waiting>
+  );
+
+  return (
+    <div style="padding: 20px; background: #1e293b; border-radius: 8px;">
+
+      {/* Waiting display */}
+      <div style="margin-bottom: 20px; background: #0f172a; border-radius: 6px; border: 1px solid #334155; min-height: 110px; overflow: hidden;">
+        {waitingEl}
+      </div>
+
+      {/* Controls */}
+      <div style="display: flex; gap: 10px; margin-bottom: 16px;">
+        <DemoButton onClick={() => resolveWaiting(waitingEl as HTMLElement)} color="#10b981">
+          resolveWaiting()
+        </DemoButton>
+        <DemoButton onClick={() => suspendWaiting(waitingEl as HTMLElement)} color="#f59e0b">
+          suspendWaiting()
+        </DemoButton>
+      </div>
+
+      {/* State legend */}
+      <div style="padding: 10px 12px; background: #0f172a; border-radius: 4px; font-size: 11px; color: #64748b; font-family: monospace; line-height: 1.6;">
+        <div>resolveWaiting(el) — removes default, appends children, removes data-waiting attr</div>
+        <div>suspendWaiting(el) — removes children, re-appends default, sets data-waiting attr</div>
+      </div>
+    </div>
+  );
+};

package/src/showcase/resource/components/suspense-skeleton.syn

@@ -0,0 +1,24 @@
+/**
+ * Suspense Skeleton Component
+ * Loading skeleton for waiting demo
+ */
+
+export const SuspenseSkeleton = () => {
+  return (
+    <div style="padding: 15px; background: #1a1a1a; border-radius: 4px;">
+      <div style="color: #06b6d4; margin-bottom: 15px;">⏳ Loading profile...</div>
+      <div style="display: flex; gap: 15px; margin-bottom: 15px;">
+        <div style="width: 60px; height: 60px; border-radius: 50%; background: #334155;"></div>
+        <div style="flex: 1;">
+          <div style="height: 16px; background: #334155; border-radius: 4px; margin-bottom: 8px; width: 40%;"></div>
+          <div style="height: 12px; background: #334155; border-radius: 4px; width: 60%;"></div>
+        </div>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px;">
+        <div style="height: 60px; background: #334155; border-radius: 4px;"></div>
+        <div style="height: 60px; background: #334155; border-radius: 4px;"></div>
+        <div style="height: 60px; background: #334155; border-radius: 4px;"></div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,57 @@
+/**
+ * User Card Component
+ * Displays user data from resource
+ */
+
+import { createSignal, createEffect } from '@synetics/synetics.dev';
+
+interface UserData {
+  avatar: string
+  name: string
+  requestId: number
+}
+
+interface UserCardProps {
+  resource: any
+  label: string
+}
+
+export const UserCard = ({ resource, label }: UserCardProps) => {
+  // Bridge resource signal state into local call-expression signals so
+  // the PSR transformer wraps the JSX ternaries in ShowRegistry.
+  const [loading, setLoading] = createSignal(resource.isLoading);
+  const [userData, setUserData] = createSignal(resource.data);
+
+  createEffect(() => {
+    setLoading(resource.isLoading);
+    setUserData(resource.data);
+  });
+
+  return (
+    <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; border: 1px solid #334155;">
+      <div style="color: #06b6d4; font-size: 12px; margin-bottom: 10px; font-weight: bold;">
+        {label}
+      </div>
+
+      {loading() ? (
+        <div style="text-align: center; padding: 20px; color: #64748b;">⏳</div>
+      ) : null}
+
+      {!loading() && userData() ? (
+        <div style="text-align: center;">
+          <img
+            src={userData().avatar}
+            alt={userData().name}
+            style="width: 60px; height: 60px; border-radius: 50%; margin-bottom: 10px;"
+          />
+          <div style="color: white; font-size: 14px; font-weight: bold;">
+            {userData().name}
+          </div>
+          <div style="color: #64748b; font-size: 11px; margin-top: 5px;">
+            Request #{userData().requestId}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,118 @@
+/**
+ * Waiting Demo Component
+ * Shows coordinated loading with Waiting/Suspense
+ */
+
+import { createResource, createEffect, createSignal, Waiting, resolveWaiting } from '@synetics/synetics.dev';
+import { fetchUser, fetchPosts, fetchActivity } from './mock-api.ts';
+import { SuspenseSkeleton } from './suspense-skeleton.syn';
+
+export const WaitingDemo = () => {
+  const userResource = createResource(() => fetchUser(1));
+  const postsResource = createResource(() => fetchPosts(1));
+  const activityResource = createResource(() => fetchActivity(1));
+
+  // Bridge resource state getters to local reactive signals so the PSR
+  // transformer can detect CallExpressions and make the status indicators reactive.
+  const [userLoading, setUserLoading] = createSignal(userResource.isLoading);
+  const [postsLoading, setPostsLoading] = createSignal(postsResource.isLoading);
+  const [activityLoading, setActivityLoading] = createSignal(activityResource.isLoading);
+
+  createEffect(() => {
+    setUserLoading(userResource.isLoading);
+    setPostsLoading(postsResource.isLoading);
+    setActivityLoading(activityResource.isLoading);
+  });
+  
+  const waitingContainer = (
+    <Waiting default={<SuspenseSkeleton />}>
+      <div style="padding: 15px; background: #1a1a1a; border-radius: 4px;">
+        <div style="color: #10b981; font-weight: bold; margin-bottom: 10px;">✓ All Resources Loaded!</div>
+        <div style="display: flex; gap: 15px; align-items: center; margin-bottom: 15px;">
+          <img 
+            src={userResource.data?.avatar} 
+            alt={userResource.data?.name}
+            style="width: 60px; height: 60px; border-radius: 50%;"
+          />
+          <div>
+            <div style="color: white; font-weight: bold;">{userResource.data?.name}</div>
+            <div style="color: #94a3b8; font-size: 12px;">{userResource.data?.email}</div>
+          </div>
+        </div>
+        
+        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px;">
+          <div style="text-align: center; padding: 10px; background: #0a0a0a; border-radius: 4px;">
+            <div style="color: #06b6d4; font-size: 20px; font-weight: bold;">
+              {activityResource.data?.totalPosts}
+            </div>
+            <div style="color: #94a3b8; font-size: 11px;">Posts</div>
+          </div>
+          <div style="text-align: center; padding: 10px; background: #0a0a0a; border-radius: 4px;">
+            <div style="color: #06b6d4; font-size: 20px; font-weight: bold;">
+              {activityResource.data?.followers}
+            </div>
+            <div style="color: #94a3b8; font-size: 11px;">Followers</div>
+          </div>
+          <div style="text-align: center; padding: 10px; background: #0a0a0a; border-radius: 4px;">
+            <div style="color: #06b6d4; font-size: 20px; font-weight: bold;">
+              {activityResource.data?.following}
+            </div>
+            <div style="color: #94a3b8; font-size: 11px;">Following</div>
+          </div>
+        </div>
+        
+        {postsResource.data?.map(post => (
+          <div style="padding: 10px; background: #0a0a0a; border-radius: 4px; margin-bottom: 8px; border-left: 2px solid #06b6d4;">
+            <div style="color: white; font-size: 13px;">{post.title}</div>
+            <div style="color: #64748b; font-size: 11px;">❤️ {post.likes} likes</div>
+          </div>
+        )) || []}
+      </div>
+    </Waiting>
+  );
+  
+  createEffect(() => {
+    if (!userResource.isLoading && !postsResource.isLoading && !activityResource.isLoading &&
+        userResource.data && postsResource.data && activityResource.data) {
+      resolveWaiting(waitingContainer);
+    }
+  });
+  
+  return (
+    <div>
+      {waitingContainer}
+      
+      <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; margin-top: 15px;">
+        <div style="color: #10b981; font-weight: bold; margin-bottom: 10px;">
+          📊 Resource Loading Status:
+        </div>
+        <div style="display: grid; gap: 8px;">
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #0a0a0a; border-radius: 4px;">
+            <span style="color: #94a3b8; font-size: 13px;">User Resource:</span>
+            <span style={`color: ${userLoading() ? '#f59e0b' : '#10b981'}; font-weight: bold; font-size: 12px;`}>
+              {userLoading() ? '⏳ Loading...' : '✓ Loaded'}
+            </span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #0a0a0a; border-radius: 4px;">
+            <span style="color: #94a3b8; font-size: 13px;">Posts Resource:</span>
+            <span style={`color: ${postsLoading() ? '#f59e0b' : '#10b981'}; font-weight: bold; font-size: 12px;`}>
+              {postsLoading() ? '⏳ Loading...' : '✓ Loaded'}
+            </span>
+          </div>
+          <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; background: #0a0a0a; border-radius: 4px;">
+            <span style="color: #94a3b8; font-size: 13px;">Activity Resource:</span>
+            <span style={`color: ${activityLoading() ? '#f59e0b' : '#10b981'}; font-weight: bold; font-size: 12px;`}>
+              {activityLoading() ? '⏳ Loading...' : '✓ Loaded'}
+            </span>
+          </div>
+        </div>
+      </div>
+      
+      <div style="padding: 15px; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #10b981; margin-top: 15px;">
+        <div style="color: #64748b; font-size: 12px;">
+          💡 Waiting coordinates 3 resources - skeleton shows until ALL are loaded.
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,193 @@
+/**
+ * PHASE 3: Resource Management
+ * Refactored with modular components
+ */
+
+import { createSignal, createEffect } from '@synetics/synetics.dev';
+import { PageHeader } from '../common/components/page-header.syn';
+import { DemoSection } from '../common/components/demo-section.syn';
+import { DemoButton } from '../common/components/demo-button.syn';
+import { DeduplicationDemo } from './components/deduplication-demo.syn';
+import { CacheDemo } from './components/cache-demo.syn';
+import { WaitingDemo } from './components/waiting-demo.syn';
+import { ImageGalleryDemo } from './components/image-gallery-demo.syn';
+import { CoordinationDemo } from './components/coordination-demo.syn';
+import { ErrorResourceDemo } from './components/error-resource-demo.syn';
+import { SuspendControlDemo } from './components/suspend-control-demo.syn';
+import { RefetchClearDemo } from './components/refetch-clear-demo.syn';
+import { resetNetworkCount } from './components/mock-api.ts';
+
+export component ResourceTestPage() {
+  const [showDedupeDemo, setShowDedupeDemo] = createSignal(false);
+  const [showCacheDemo, setShowCacheDemo] = createSignal(false);
+  const [showWaitingDemo, setShowWaitingDemo] = createSignal(false);
+  const [showImagesDemo, setShowImagesDemo] = createSignal(false);
+  const [showCoordinationDemo, setShowCoordinationDemo] = createSignal(false);
+  const [showErrorResourceDemo, setShowErrorResourceDemo] = createSignal(false);
+  const [showSuspendDemo, setShowSuspendDemo] = createSignal(false);
+  const [showRefetchClearDemo, setShowRefetchClearDemo] = createSignal(false);
+  
+  createEffect(() => {
+    if (showDedupeDemo() || showCacheDemo() || showWaitingDemo()) {
+      resetNetworkCount();
+    }
+  });
+  
+  return (
+    <div>
+      <PageHeader 
+        title="Resource Management: Real-World Features"
+        emoji="🌊"
+        color="#06b6d4"
+        description="Deduplication, caching, parallel loading, and suspense"
+      />
+      
+      <div style="background: #1a1a1a; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #f59e0b;">
+        <h3 style="font-size: 20px; margin-bottom: 10px; color: #f59e0b;">
+          ⚡ What Makes Resources Different?
+        </h3>
+        <p style="color: #94a3b8; line-height: 1.6;">
+          Resources provide <strong style="color: white;">deduplication</strong>, 
+          <strong style="color: white;"> caching</strong>, <strong style="color: white;">parallel coordination</strong>, 
+          and <strong style="color: white;">progressive loading</strong> out of the box.
+        </p>
+      </div>
+      
+      <DemoSection 
+        title="1️⃣ Request Deduplication" 
+        description="3 components request same resource = 1 network call, not 3."
+        borderColor="#06b6d4">
+        <div style="margin-bottom: 15px;">
+          <DemoButton 
+            onClick={() => setShowDedupeDemo(!showDedupeDemo())}
+            color="#06b6d4">
+            {showDedupeDemo() ? '🔄 Reset' : '▶️ Run Demo'}
+          </DemoButton>
+        </div>
+        
+        {showDedupeDemo() ? <DeduplicationDemo /> : null}
+      </DemoSection>
+      
+      <DemoSection 
+        title="2️⃣ Cache with Stale-While-Revalidate" 
+        description="Serve cached data instantly, refetch in background. 0ms perceived load."
+        borderColor="#8b5cf6">
+        <div style="margin-bottom: 15px;">
+          <DemoButton 
+            onClick={() => setShowCacheDemo(!showCacheDemo())}
+            color="#8b5cf6">
+            {showCacheDemo() ? '🔄 Reset' : '▶️ Run Demo'}
+          </DemoButton>
+        </div>
+        
+        {showCacheDemo() ? <CacheDemo /> : null}
+      </DemoSection>
+      
+      <DemoSection 
+        title="3️⃣ Suspense Boundaries" 
+        description="Multiple resources coordinate - show skeleton until all ready."
+        borderColor="#10b981">
+        <div style="margin-bottom: 15px;">
+          <DemoButton 
+            onClick={() => setShowWaitingDemo(!showWaitingDemo())}
+            color="#10b981">
+            {showWaitingDemo() ? '🔄 Reset' : '▶️ Run Demo'}
+          </DemoButton>
+        </div>
+        
+        {showWaitingDemo() ? <WaitingDemo /> : null}
+      </DemoSection>
+      
+      <DemoSection 
+        title="4️⃣ Progressive Image Gallery" 
+        description="Real-world demo: Parallel loading with individual states."
+        borderColor="#f59e0b">
+        <div style="margin-bottom: 15px;">
+          <DemoButton 
+            onClick={() => setShowImagesDemo(!showImagesDemo())}
+            color="#f59e0b">
+            {showImagesDemo() ? '🔄 Reset' : '▶️ Load Gallery'}
+          </DemoButton>
+        </div>
+        
+        {showImagesDemo() ? <ImageGalleryDemo /> : null}
+      </DemoSection>
+      
+      <DemoSection
+        title="5️⃣ Multi-Resource Coordination"
+        description="waitForAll, isAnyLoading, isAllSuccess, isAnyError — coordinate 3 parallel resources."
+        borderColor="#06b6d4">
+        <div style="margin-bottom: 15px;">
+          <DemoButton
+            onClick={() => setShowCoordinationDemo(!showCoordinationDemo())}
+            color="#06b6d4">
+            {showCoordinationDemo() ? '🔄 Reset' : '▶ Run Demo'}
+          </DemoButton>
+        </div>
+        {showCoordinationDemo() ? <CoordinationDemo /> : null}
+      </DemoSection>
+
+      <DemoSection
+        title="6️⃣ Error Resource Handling"
+        description="getErrors, isAnyError — surface errors from a resource that always rejects."
+        borderColor="#ef4444">
+        <div style="margin-bottom: 15px;">
+          <DemoButton
+            onClick={() => setShowErrorResourceDemo(!showErrorResourceDemo())}
+            color="#ef4444">
+            {showErrorResourceDemo() ? '🔄 Reset' : '▶ Run Demo'}
+          </DemoButton>
+        </div>
+        {showErrorResourceDemo() ? <ErrorResourceDemo /> : null}
+      </DemoSection>
+
+      <DemoSection
+        title="7️⃣ Imperative Waiting Control"
+        description="suspendWaiting, resolveWaiting — toggle loading/content state on demand."
+        borderColor="#f59e0b">
+        <div style="margin-bottom: 15px;">
+          <DemoButton
+            onClick={() => setShowSuspendDemo(!showSuspendDemo())}
+            color="#f59e0b">
+            {showSuspendDemo() ? '🔄 Reset' : '▶ Run Demo'}
+          </DemoButton>
+        </div>
+        {showSuspendDemo() ? <SuspendControlDemo /> : null}
+      </DemoSection>
+
+      <DemoSection
+        title="8️⃣ Bulk Refetch & Clear"
+        description="refetchAll, clearAll — batch operations across multiple resources."
+        borderColor="#8b5cf6">
+        <div style="margin-bottom: 15px;">
+          <DemoButton
+            onClick={() => setShowRefetchClearDemo(!showRefetchClearDemo())}
+            color="#8b5cf6">
+            {showRefetchClearDemo() ? '🔄 Reset' : '▶ Run Demo'}
+          </DemoButton>
+        </div>
+        {showRefetchClearDemo() ? <RefetchClearDemo /> : null}
+      </DemoSection>
+
+      <section style="background: #1a1a1a; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
+        <h3 style="font-size: 20px; margin-bottom: 10px; color: #10b981;">
+          ✓ Why Use Resources vs Manual Fetch?
+        </h3>
+        <div style="display: grid; gap: 15px; color: #94a3b8;">
+          <div style="padding: 15px; background: #0a0a0a; border-radius: 4px;">
+            <strong style="color: #06b6d4;">Deduplication:</strong> Multiple components, one request
+          </div>
+          <div style="padding: 15px; background: #0a0a0a; border-radius: 4px;">
+            <strong style="color: #8b5cf6;">Cache + Stale Time:</strong> Instant UI, background refresh
+          </div>
+          <div style="padding: 15px; background: #0a0a0a; border-radius: 4px;">
+            <strong style="color: #10b981;">Suspense Coordination:</strong> Wait for all data
+          </div>
+          <div style="padding: 15px; background: #0a0a0a; border-radius: 4px;">
+            <strong style="color: #f59e0b;">Auto State Management:</strong> No manual tracking
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}