@ramme-io/create-app 1.2.2 → 1.2.5

package/template/src/engine/renderers/DynamicPage.tsx

@@ -1,114 +1,150 @@
-import React from 'react';
-import { PageHeader, Alert, Button, Icon } from '@ramme-io/ui';
-import { appManifest } from '../../config/app.manifest';
-// Reuse the GhostOverlay for structure visualization
-import { GhostOverlay } from '../../features/developer/GhostOverlay';
-// Import the Worker Bee
-import { DynamicBlock } from './DynamicBlock';
-// Import the Hook to control the overlay
-import { useDevTools } from '../../features/developer/useDevTools';
+import React, { Component, type ErrorInfo, useMemo } from 'react';
+import { PageHeader, Alert, Badge } from '@ramme-io/ui';
+import { useManifest, useBridgeStatus } from '../runtime/ManifestContext';
+import { getComponent } from '../../config/component-registry';
+import { getMockData } from '../../data/mockData'; // Keep as fallback
+import { Wifi, WifiOff, AlertTriangle, Loader2, Database, Wand2 } from 'lucide-react';
 
-/**
- * @file DynamicPage.tsx
- * @description The "Layout Engine" of the application.
- *
- * ARCHITECTURAL ROLE:
- * This component is the bridge between the Abstract JSON Manifest and the Concrete DOM.
- * It acts as the "General Contractor," taking the blueprint (Manifest) and instructing
- * the workers (DynamicBlock) where to build.
- *
- * HIERARCHY:
- * App -> Routes -> DynamicPage -> (Iterates Sections) -> DynamicBlock -> (Actual Component)
- *
- * KEY FEATURES:
- * 1. **Manifest Lookup:** Uses the `pageId` prop to find the correct configuration in `app.manifest.ts`.
- * 2. **Grid Composition:** Translates abstract layout numbers (e.g., `columns: 3`) into real CSS Grid styles.
- * 3. **DevTools Integration:** Wraps blocks in `GhostOverlay` (when enabled) to visualize the
- * hidden boundaries and signal connections during development.
- */
+// --- 🛠️ JIT DATA GENERATOR ---
+// This ensures the preview ALWAYS has data, even for new resources not yet in the DB.
+const generateJitData = (resourceDef: any, count = 10) => {
+  if (!resourceDef) return [];
+  
+  return Array.from({ length: count }).map((_, i) => {
+    const row: any = { id: i + 1 };
+    resourceDef.fields.forEach((f: any) => {
+      // Intelligent Mocking based on field type
+      if (f.type === 'status') {
+        row[f.key] = ['Active', 'Pending', 'Closed', 'Archived'][Math.floor(Math.random() * 4)];
+      } else if (f.type === 'boolean') {
+        row[f.key] = Math.random() > 0.3; // 70% true
+      } else if (f.type === 'number' || f.type === 'currency') {
+        row[f.key] = Math.floor(Math.random() * 1000) + 100;
+      } else if (f.type === 'date') {
+        const d = new Date();
+        d.setDate(d.getDate() - Math.floor(Math.random() * 30));
+        row[f.key] = d.toISOString().split('T')[0];
+      } else {
+        row[f.key] = `${f.label} ${i + 1}`;
+      }
+    });
+    return row;
+  });
+};
 
-interface DynamicPageProps {
-  pageId: string;
+// --- ERROR BOUNDARY ---
+class BlockErrorBoundary extends Component<{ children: React.ReactNode }, { hasError: boolean, error: string }> {
+  constructor(props: any) { super(props); this.state = { hasError: false, error: '' }; }
+  static getDerivedStateFromError(error: any) { return { hasError: true, error: error.message }; }
+  render() {
+    if (this.state.hasError) return (
+        <div className="h-full min-h-[100px] p-4 border-2 border-dashed border-red-300 bg-red-50/50 rounded-lg flex flex-col items-center justify-center text-red-600 text-xs">
+          <AlertTriangle size={16} className="mb-2 opacity-80" />
+          <span className="font-bold">Render Error</span>
+          <span className="opacity-75 text-center truncate max-w-[200px]">{this.state.error}</span>
+        </div>
+    );
+    return this.props.children;
+  }
 }
 
-export const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
-  // 1. Initialize DevTools
-  const { isGhostMode, toggleGhostMode } = useDevTools();
+// --- MAIN RENDERER ---
+export const DynamicPage = ({ pageId }: { pageId: string }) => {
+  const manifest = useManifest();
+  const status = useBridgeStatus();
+  const isLive = status === 'live';
 
-  // 2. Look up the page definition
-  const pageConfig = (appManifest as any).pages?.find((p: any) => p.id === pageId);
+  const page = useMemo(() => manifest.pages?.find((p: any) => p.id === pageId), [manifest, pageId]);
 
-  if (!pageConfig) {
+  if (!page) {
     return (
-      <div className="p-8">
-        <Alert variant="danger" title="Page Not Found">
-          The manifest does not contain a page with ID: <code>{pageId}</code>.
-        </Alert>
+      <div className="p-8 space-y-4">
+         <Alert variant="info" title="Connecting..."><Loader2 className="animate-spin mr-2" size={16} /> Loading Page...</Alert>
       </div>
     );
   }
 
   return (
-    <div className="space-y-8 fade-in p-6">
-      <PageHeader 
-        title={pageConfig.title} 
-        description={pageConfig.description}
-        actions={
-          <Button 
-            variant={isGhostMode ? 'accent' : 'outline'} 
-            size="sm"
-            onClick={toggleGhostMode}
-            title="Toggle Ghost Mode (Ctrl+Shift+G)"
-          >
-            <Icon name={isGhostMode ? 'eye' : 'eye-off'} className="mr-2" />
-            {isGhostMode ? 'Ghost Mode: ON' : 'Dev Tools'}
-          </Button>
-        }
-      />
+    <div className="space-y-8 animate-in fade-in duration-300 pb-20 p-6 md:p-8">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 border-b border-border pb-6">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight text-foreground">{page.title}</h1>
+          {page.description && <p className="text-muted-foreground text-lg">{page.description}</p>}
+        </div>
+        <div className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-bold border ${isLive ? 'bg-green-100 text-green-700 border-green-200' : 'bg-slate-100 text-slate-500'}`}>
+          {isLive ? <Wifi size={14} className="text-green-600 animate-pulse"/> : <WifiOff size={14} />}
+          {isLive ? 'LIVE PREVIEW' : 'STATIC MODE'}
+        </div>
+      </div>
+      
+      {/* Grid Layout */}
+      <div className="grid gap-8">
+        {page.sections?.map((section: any) => (
+          <section key={section.id} className="space-y-4">
+            {section.title && (
+              <div className="flex items-center gap-2 pb-2 border-b border-dashed border-gray-200">
+                 <h3 className="text-sm font-bold uppercase tracking-wider text-muted-foreground">{section.title}</h3>
+              </div>
+            )}
+            <div className="grid gap-6" style={{ gridTemplateColumns: `repeat(${section.layout?.columns || 1}, minmax(0, 1fr))` }}>
+              {section.blocks.map((block: any) => {
+                const Component = getComponent(block.type);
+                const safeDataId = block.props.dataId?.toLowerCase();
+                
+                // --- 🛡️ HYBRID DATA STRATEGY ---
+                let resolvedData: any[] = [];
+                let isGenerated = false;
+                let autoColumns = undefined;
 
-      {/* 4. Render Sections */}
-      {pageConfig.sections.map((section: any) => (
-        <div key={section.id} className="space-y-4">
-          {section.title && <h3 className="text-xl font-semibold">{section.title}</h3>}
-          
-          <div 
-            className="grid gap-6"
-            style={{ 
-              // ⚡️ IMPROVEMENT: Default to 1 column (Full Width) instead of 3.
-              // This fixes the "narrow table" issue immediately.
-              gridTemplateColumns: `repeat(${section.layout?.columns || 1}, minmax(0, 1fr))` 
-            }}
-          >
-            {section.blocks.map((block: any) => {
-              // ⚡️ IMPROVEMENT: Calculate Spanning
-              // Allows a block to stretch across multiple columns if needed.
-              const colSpan = block.layout?.colSpan || 1;
-              const rowSpan = block.layout?.rowSpan || 1;
+                if (safeDataId) {
+                  // 1. Try Local Storage first
+                  resolvedData = getMockData(safeDataId); 
+                  
+                  // 2. If empty, Generate JIT Data from Manifest
+                  if (!resolvedData || resolvedData.length === 0) {
+                     const resourceDef = manifest.resources?.find((r: any) => r.id.toLowerCase() === safeDataId);
+                     if (resourceDef) {
+                        resolvedData = generateJitData(resourceDef);
+                        isGenerated = true; // Flag for debug overlay
+                     }
+                  }
 
-              return (
-                <div 
-                  key={block.id}
-                  style={{ 
-                    gridColumn: `span ${colSpan}`,
-                    gridRow: `span ${rowSpan}`
-                  }}
-                >
-                   <GhostOverlay 
-                     isActive={isGhostMode}
-                     componentId={block.id} 
-                     componentType={block.type}
-                     signalId={block.props.signalId}
-                   >
-                     <DynamicBlock block={block} />
-                   </GhostOverlay>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
+                  // 3. Auto-Generate Table Columns
+                  const resourceDef = manifest.resources?.find((r: any) => r.id.toLowerCase() === safeDataId);
+                  if (resourceDef && !block.props.columnDefs) {
+                    autoColumns = resourceDef.fields.map((f: any) => ({
+                      field: f.key, headerName: f.label, filter: true, flex: 1,
+                      cellRenderer: f.type === 'status' ? (p: any) => <Badge variant="secondary">{p.value}</Badge> : undefined
+                    }));
+                  }
+                }
+
+                return (
+                  <div key={block.id} style={{ gridColumn: `span ${block.layout?.colSpan || 1}`, gridRow: `span ${block.layout?.rowSpan || 1}` }} className="relative group">
+                     <BlockErrorBoundary>
+                        {/* Debug Overlay */}
+                        <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20 flex gap-1 pointer-events-none">
+                           <div className={`text-white text-[10px] px-2 py-1 rounded backdrop-blur-md flex items-center gap-1 ${isGenerated ? 'bg-amber-600/90' : 'bg-black/80'}`}>
+                              {block.type}
+                              {safeDataId && <> <span className="opacity-50">|</span> {isGenerated ? <Wand2 size={10}/> : <Database size={10}/>} {safeDataId} ({resolvedData.length})</>}
+                           </div>
+                        </div>
+                        
+                        <Component 
+                           {...block.props} 
+                           rowData={resolvedData} 
+                           columnDefs={block.props.columnDefs || autoColumns}
+                           className="w-full h-full shadow-sm bg-card rounded-xl border border-border" 
+                        />
+                     </BlockErrorBoundary>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        ))}
+      </div>
     </div>
   );
-};
-
-export default DynamicPage;
+};

package/template/src/engine/runtime/ManifestContext.tsx

@@ -0,0 +1,79 @@
+import React, { createContext, useContext, useEffect, useState, useRef } from 'react';
+// ✅ FIX 1: Correct Path to Static Manifest
+import { appManifest as staticManifest } from '../../config/app.manifest';
+// ✅ FIX 2: Correct Path to Types
+import type { AppSpecification } from '../validation/schema';
+
+interface ManifestContextType {
+  manifest: AppSpecification;
+  isLive: boolean;
+}
+
+const ManifestContext = createContext<ManifestContextType>({ 
+  manifest: staticManifest, 
+  isLive: false 
+});
+
+export const ManifestProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // 1. Initialize State
+  const [manifest, setManifest] = useState<AppSpecification>(staticManifest);
+  const [isLive, setIsLive] = useState(false);
+  
+  // 2. Global Listener Guard (Refs persist across re-renders)
+  const isListening = useRef(false);
+
+  useEffect(() => {
+    // Prevent double-attaching listeners in StrictMode
+    if (isListening.current) return;
+    isListening.current = true;
+
+    // A. Define the Listener
+    const handleMessage = (event: MessageEvent) => {
+      // Security: Filter out noise, listen only for our specific event
+      if (event.data?.type === 'RAMME_SYNC_MANIFEST') {
+        const payload = event.data.payload;
+        // console.log("⚡️ [Context] Sync Received");
+        setManifest(payload);
+        setIsLive(true);
+      }
+    };
+
+    // B. Attach Listener
+    window.addEventListener('message', handleMessage);
+
+    // C. Send Handshake (ONCE per session)
+    // We check a global window property to ensure we never spam the parent,
+    // even if this Provider is unmounted and remounted by React Router.
+    if (window.parent !== window && !(window as any).__RAMME_HANDSHAKE_SENT) {
+       console.log("🔌 [Context] Handshake Sent 🤝");
+       window.parent.postMessage({ type: 'RAMME_CLIENT_READY' }, '*');
+       (window as any).__RAMME_HANDSHAKE_SENT = true;
+    }
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      isListening.current = false;
+    };
+  }, []);
+
+  return (
+    <ManifestContext.Provider value={{ manifest, isLive }}>
+      {children}
+    </ManifestContext.Provider>
+  );
+};
+
+// --- CONSUMER HOOKS ---
+
+export const useManifest = () => {
+  const context = useContext(ManifestContext);
+  if (!context) return staticManifest;
+  return context.manifest;
+};
+
+// Returns 'live' | 'static' string to match your UI components
+export const useBridgeStatus = () => {
+  const context = useContext(ManifestContext);
+  return context?.isLive ? 'live' : 'static';
+};

package/template/src/engine/runtime/MqttContext.tsx

@@ -1,6 +1,8 @@
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import mqtt, { type MqttClient } from 'mqtt';
-import { appManifest } from '../../config/app.manifest'; // ✅ Connect to the Single Source of Truth
+// ❌ REMOVED: import { appManifest } from '../../config/app.manifest';
+// ✅ ADDED: Live Context
+import { useManifest } from './ManifestContext';
 
 interface MqttContextType {
   isConnected: boolean;
@@ -12,44 +14,38 @@ interface MqttContextType {
 
 const MqttContext = createContext<MqttContextType | null>(null);
 
-/**
- * @file MqttContext.tsx
- * @description The Real-Time Connectivity Layer.
- *
- * ARCHITECTURAL ROLE:
- * This provider establishes a persistent WebSocket connection to the MQTT Broker
- * defined in `app.manifest.ts`.
- *
- * KEY FEATURES:
- * 1. **Global Connection:** Maintains one connection for the whole app (Singleton pattern).
- * 2. **Topic Management:** specific components (like DeviceCard) can subscribe to
- * specific topics on demand using `subscribe()`.
- * 3. **State Distribution:** Broadcasts the latest messages to any component using `useMqtt()`.
- */
-
 export const MqttProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isConnected, setIsConnected] = useState(false);
   const [lastMessage, setLastMessage] = useState<Record<string, string>>({});
   const clientRef = useRef<MqttClient | null>(null);
   const subscriptions = useRef<Set<string>>(new Set());
 
+  // ✅ 1. Consume Live Manifest
+  const appManifest = useManifest();
+
   useEffect(() => {
-    // ✅ Load Broker URL from the Manifest Config
+    // ✅ 2. Hot-Swap Broker Connection
+    // If you change the Broker URL in the Builder, this effect will re-run!
     const brokerUrl = appManifest.config.brokerUrl || 'wss://test.mosquitto.org:8081';
     console.log(`[MQTT] Connecting to ${brokerUrl}...`);
     
+    // Disconnect previous if exists
+    if (clientRef.current) {
+        clientRef.current.end();
+    }
+
     const client = mqtt.connect(brokerUrl);
     clientRef.current = client;
 
     client.on('connect', () => {
       console.log('[MQTT] Connected ✅');
       setIsConnected(true);
+      // Re-subscribe to previous topics if needed
+      subscriptions.current.forEach(t => client.subscribe(t));
     });
 
-    // ✅ FIX: Proper typing for MQTT payload (Buffer)
     client.on('message', (topic: string, payload: Buffer) => {
       const messageStr = payload.toString();
-      // console.log(`[MQTT] Msg: ${topic} -> ${messageStr}`); // Optional debug
       setLastMessage((prev) => ({ ...prev, [topic]: messageStr }));
     });
 
@@ -62,11 +58,10 @@ export const MqttProvider: React.FC<{ children: React.ReactNode }> = ({ children
       console.log('[MQTT] Disconnecting...');
       client.end();
     };
-  }, []);
+  }, [appManifest.config.brokerUrl]); // Only re-connect if URL changes
 
   const subscribe = (topic: string) => {
     if (clientRef.current && !subscriptions.current.has(topic)) {
-      console.log(`[MQTT] Subscribing to: ${topic}`);
       clientRef.current.subscribe(topic);
       subscriptions.current.add(topic);
     }

package/template/src/engine/runtime/data-seeder.ts

@@ -1,5 +1,3 @@
-// src/core/data-seeder.ts
-
 // ✅ Match the export from your new mockData.ts
 import { DATA_REGISTRY } from '../../data/mockData'; 
 
@@ -10,21 +8,23 @@ import { DATA_REGISTRY } from '../../data/mockData';
  * This utility ensures that the LocalStorage "Data Lake" is never empty.
  * On app launch, it checks if data exists. If not, it writes the seed data
  * from `mockData.ts` into the browser's storage.
- * * This allows the app to feel "alive" with data immediately after installation.
  */
 
+// 🔒 SHARED CONSTANT: Ensure everyone uses the same key format
+const DB_PREFIX = 'ramme_mock_'; 
+
 export const initializeDataLake = () => {
   if (typeof window === 'undefined') return;
 
   console.groupCollapsed('🌊 [Data Lake] Initialization');
   
   Object.entries(DATA_REGISTRY).forEach(([key, seedData]) => {
-    // ⚠️ REMOVED PREFIX ('ramme_db_') so it matches AuthContext
-    const storageKey = key; 
+    // ✅ FIX: Use the prefix so getMockData() can find it
+    const storageKey = `${DB_PREFIX}${key}`; 
     const existing = localStorage.getItem(storageKey);
 
     if (!existing) {
-      console.log(`✨ Seeding collection: ${key} (${seedData.length} records)`);
+      console.log(`✨ Seeding collection: ${key} (${(seedData as any[]).length} records)`);
       localStorage.setItem(storageKey, JSON.stringify(seedData));
     } else {
       console.log(`✅ Collection exists: ${key}`);
@@ -39,7 +39,9 @@ export const initializeDataLake = () => {
  */
 export const resetDataLake = () => {
   Object.keys(DATA_REGISTRY).forEach((key) => {
-    localStorage.removeItem(key); // Matches the storageKey above
+    const storageKey = `${DB_PREFIX}${key}`;
+    localStorage.removeItem(storageKey); 
   });
+  console.log("🔥 Data Lake Evaporated (Cleared)");
   window.location.reload();
 };

package/template/src/engine/runtime/useAction.ts

@@ -1,36 +1,25 @@
 import { useCallback } from 'react';
 import { useMqtt } from './MqttContext';
-// ✅ User Verified Path
-import { appManifest } from '../../config/app.manifest';
-
-/**
- * @file useAction.ts
- * @description The "Effectuator" hook.
- *
- * ARCHITECTURAL ROLE:
- * This hook handles outgoing commands from the UI. It abstracts the transport layer,
- * automatically routing actions to the correct destination (MQTT, HTTP, or Mock Console)
- * based on the entity's configuration in the manifest.
- */
+// ❌ REMOVED: import { appManifest } from '../../config/app.manifest';
+// ✅ ADDED: Live Context
+import { useManifest } from './ManifestContext';
 
 export const useAction = () => {
   const { publish, isConnected } = useMqtt();
   
-  // Destructure config/domain from the manifest
+  // ✅ 1. Consume Live Manifest
+  const appManifest = useManifest();
   const { config, domain } = appManifest;
 
   const sendAction = useCallback(async (entityId: string, value: any) => {
-    // 1. Find the Entity definition
-    // Note: If domain.entities is empty (early stage), this is where we'd add fallback logic
+    // 2. Find the Entity definition (Live)
     const entity = domain.entities.find(e => e.id === entityId);
     
     if (!entity) {
-      // For development/debugging, we log this even if the entity is missing
       console.warn(`[Action] Entity ID '${entityId}' not found in manifest.`);
       return;
     }
 
-    // 2. Find the Primary Signal (The target of the action)
     const signalId = entity.signals[0];
     const signal = domain.signals.find(s => s.id === signalId);
 
@@ -39,8 +28,6 @@ export const useAction = () => {
       return;
     }
 
-    // 3. EXECUTE based on Mode & Source
-    
     // --- Mock Mode ---
     if (config.mockMode) {
       console.log(`%c[Mock Action] Setting ${entity.name} to:`, 'color: #10b981; font-weight: bold;', value);
@@ -60,7 +47,6 @@ export const useAction = () => {
 
     // --- Live Mode (HTTP) ---
     if (signal.source === 'http' && signal.endpoint) {
-      console.log(`[HTTP] POST to ${signal.endpoint}:`, value);
       try {
         await fetch(signal.endpoint, {
             method: 'POST',
@@ -68,7 +54,7 @@ export const useAction = () => {
             body: JSON.stringify({ id: signal.id, value })
         });
       } catch (err) {
-        console.log('[HTTP] (Simulation) Request sent.'); 
+        console.log('[HTTP] (Simulation) Request sent.');
       }
     }
 

package/template/src/engine/runtime/useDynamicSitemap.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import { useManifest, useBridgeStatus } from './ManifestContext';
+import { DynamicPage } from '../renderers/DynamicPage';
+import { type SitemapEntry } from '../types/sitemap-entry';
+import { type IconName } from '@ramme-io/ui';
+
+/**
+ * @hook useDynamicSitemap
+ * @description 
+ * - In 'Static Mode' (npm run dev): Merges dynamic pages with the hardcoded sitemap.
+ * - In 'Live Mode' (Builder): REPLACES the sitemap entirely to show only the user's design.
+ */
+export const useDynamicSitemap = (staticSitemap: SitemapEntry[]) => {
+  const manifest = useManifest();
+  const status = useBridgeStatus();
+  const isLive = status === 'live'; // ✅ Detect Live Mode
+
+  return useMemo(() => {
+    // 1. Convert Manifest Pages -> Sitemap Entries
+    const dynamicEntries: SitemapEntry[] = (manifest.pages || []).map((page) => ({
+      id: page.id,
+      path: page.slug,
+      title: page.title,
+      icon: (page.icon as IconName) || 'layout',
+      component: () => <DynamicPage pageId={page.id} />
+    }));
+
+    // 2. ✅ OPTIMIZATION: Exclusive Mode
+    // If we are connected to the Builder (Live) AND have dynamic content,
+    // we drop the static "Showcase" pages. 
+    // This makes the Kernel feel like a blank slate to the user.
+    if (isLive && dynamicEntries.length > 0) {
+        // console.log("🚀 [Sitemap] Live Mode Active: Hiding static pages.");
+        return dynamicEntries;
+    }
+
+    // 3. Static/Hybrid Mode (Keep existing logic for local dev)
+    const staticIds = new Set(staticSitemap.map(s => s.id));
+    const uniqueDynamic = dynamicEntries.filter(d => !staticIds.has(d.id));
+
+    return [...staticSitemap, ...uniqueDynamic];
+  }, [manifest, staticSitemap, isLive]);
+};

package/template/src/engine/runtime/useJustInTimeSeeder.ts

@@ -0,0 +1,76 @@
+/**
+ * @file useJustInTimeSeeder.ts
+ * @description Runtime Data Generator for the Preview Engine.
+ */
+
+import { useMemo } from 'react';
+import { getMockData } from '../../data/mockData';
+import type { ResourceDefinition, FieldDefinition } from '../validation/schema';
+
+// Helper: Generate a semi-realistic value based on field type
+const generateValue = (field: FieldDefinition, index: number) => {
+  const i = index + 1;
+  const label = field.label || 'Item';
+  
+  switch (field.type) {
+    case 'text': 
+      return `${label} ${i}`;
+    case 'number': 
+      return Math.floor(Math.random() * 100) + 1;
+    case 'currency': 
+      return (Math.random() * 1000).toFixed(2);
+    case 'boolean': 
+      return Math.random() > 0.5;
+    case 'date': 
+      // Return a date within the last 30 days
+      const d = new Date();
+      d.setDate(d.getDate() - (i * 2));
+      return d.toISOString();
+    case 'status': 
+      return ['Active', 'Pending', 'Inactive', 'Archived'][index % 4];
+    case 'email': 
+      return `user${i}@example.com`;
+    case 'image':
+      return `https://i.pravatar.cc/150?u=${i}`;
+    case 'textarea':
+      return `This is a sample description for ${label} ${i}. It contains enough text to test multi-line rendering.`;
+    default: 
+      return `${label}-${i}`;
+  }
+};
+
+export const useJustInTimeSeeder = (dataId: string, resourceDef?: ResourceDefinition | null) => {
+  return useMemo(() => {
+    // 1. Priority: Static Data (The "Golden Copy")
+    // If the developer has manually added data to mockData.ts, always use that.
+    const staticData = getMockData(dataId);
+    if (staticData && staticData.length > 0) {
+      return staticData;
+    }
+
+    // 2. Fallback: JIT Generation (The "Safety Net")
+    // If we have a schema but no data, generate it now.
+    if (resourceDef) {
+      console.log(`🌱 [JIT Seeder] Generating 5 mock records for: ${dataId}`);
+      
+      return Array.from({ length: 5 }).map((_, idx) => {
+        const row: Record<string, any> = { 
+          // Generate a robust ID that won't collide with future real IDs
+          id: `jit_${dataId}_${idx + 1}` 
+        };
+        
+        resourceDef.fields.forEach(field => {
+          // Don't overwrite ID if it was part of the fields list
+          if (field.key !== 'id') {
+            row[field.key] = generateValue(field, idx);
+          }
+        });
+        
+        return row;
+      });
+    }
+
+    // 3. Empty State (If no schema is found)
+    return [];
+  }, [dataId, resourceDef]);
+};