@ramme-io/create-app 1.2.2 → 1.2.5

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

@@ -0,0 +1,44 @@
+import { useState, useEffect, useRef } from 'react';
+import { appManifest as staticManifest } from '../../config/app.manifest';
+import type { AppSpecification } from '../validation/schema';
+
+export const useLiveBridge = () => {
+  // 1. Initialize with Static Data (Fallback)
+  const [manifest, setManifest] = useState<AppSpecification>(staticManifest);
+  const [isLive, setIsLive] = useState(false);
+  
+  // Use a ref to ensure listeners aren't duplicated in StrictMode
+  const isListening = useRef(false);
+
+  useEffect(() => {
+    if (isListening.current) return;
+    isListening.current = true;
+
+    const handleMessage = (event: MessageEvent) => {
+      // Optional Security Check: if (event.origin !== "http://localhost:3000") return;
+
+      if (event.data?.type === 'RAMME_SYNC_MANIFEST') {
+        const payload = event.data.payload;
+        setManifest(payload);
+        setIsLive(true);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    
+    // ✅ CRITICAL FIX: The Global Handshake Guard
+    // Prevents infinite loops if the component remounts
+    if (window.parent !== window && !(window as any).__RAMME_HANDSHAKE_SENT) {
+       console.log("🔌 [Bridge] Sending Ready Signal...");
+       window.parent.postMessage({ type: 'RAMME_CLIENT_READY' }, '*');
+       (window as any).__RAMME_HANDSHAKE_SENT = true; 
+    }
+
+    return () => {
+        window.removeEventListener('message', handleMessage);
+        isListening.current = false;
+    };
+  }, []);
+
+  return { manifest, isLive };
+};

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

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
 import { useSignalStore } from './useSignalStore';
-// ✅ Import Manifest to get static metadata (min, max, units)
-import { appManifest } from '../../config/app.manifest';
+// ❌ REMOVED: import { appManifest } from '../../config/app.manifest';
+// ✅ ADDED: Live Context
+import { useManifest } from './ManifestContext';
 
 export interface SignalState {
   id: string;
@@ -10,33 +11,21 @@ export interface SignalState {
   min?: number;
   max?: number;
   timestamp?: number;
-  status: 'fresh' | 'stale'; // Simplified status
+  status: 'fresh' | 'stale';
 }
 
-/**
- * @hook useSignal
- * @description The "Signal Selector".
- *
- * ARCHITECTURAL ROLE:
- * This hook is the bridge between the Static Manifest and the Dynamic Store.
- * 1. It finds the signal definition in the Manifest (for min/max/unit).
- * 2. It grabs the live value from the Zustand SignalStore.
- * 3. It merges them into a single object for the UI to consume.
- */
 export const useSignal = (signalId: string): SignalState => {
-  // 1. Get Live Data from Store
-  const signalData = useSignalStore((state: { signals: { [x: string]: any; }; }) => state.signals[signalId]);
+  const signalData = useSignalStore((state) => state.signals[signalId]);
+  
+  // ✅ 1. Consume Live Manifest
+  const appManifest = useManifest();
 
-  // 2. Get Static Definition from Manifest
-  // We use useMemo so we don't search the array on every render
+  // 2. Get Static Definition from Manifest (Live)
   const signalDef = useMemo(() => {
     return appManifest.domain.signals.find((s) => s.id === signalId);
-  }, [signalId]);
+  }, [signalId, appManifest]); // Re-run if manifest updates
 
-  // 3. Merge and Return
   const value = signalData?.value ?? signalDef?.defaultValue ?? 0;
-  
-  // Determine if data is stale (older than 10 seconds)
   const isStale = signalData ? (Date.now() - signalData.timestamp > 10000) : true;
 
   return {

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

@@ -1,122 +1,69 @@
 import { useEffect } from 'react';
 import { useToast } from '@ramme-io/ui';
-// ✅ 1. Correct Imports from Store
 import { useGeneratedSignals, useSimulation } from './useSignalStore';
-// ✅ 2. Correct Import from Manifest
-import { appManifest } from '../../config/app.manifest';
+// ❌ REMOVED: import { appManifest } from '../../config/app.manifest';
+// ✅ ADDED: Live Context
+import { useManifest } from './ManifestContext';
 
-// Minimal Types for internal use (until schema is formalized)
-interface ActionDefinition {
-  type: string;
-  config: Record<string, any>;
-}
+// ... (Interfaces can remain the same) ...
+interface ActionDefinition { type: string; config: Record<string, any>; }
+interface WorkflowDefinition { id: string; name: string; active: boolean; trigger: { type: string; config: { signalId: string; condition: string; }; }; actions: ActionDefinition[]; }
 
-interface WorkflowDefinition {
-  id: string;
-  name: string;
-  active: boolean;
-  trigger: {
-    type: string;
-    config: {
-      signalId: string;
-      condition: string;
-    };
-  };
-  actions: ActionDefinition[];
-}
-
-/**
- * THE RUNTIME LOGIC ENGINE
- * This hook breathes life into the application.
- * It watches for signal changes and executes the workflows defined in the manifest.
- */
 export const useWorkflowEngine = () => {
   const signals = useGeneratedSignals();
   const { addToast } = useToast();
   
-  // 1. Activate the Data Simulation (Randomizer)
-  // This now checks internally if it should run (based on boolean arg)
+  // ✅ 1. Consume Live Manifest
+  const appManifest = useManifest();
+
+  // 2. Activate Simulation (Responsive to toggle)
   useSimulation(appManifest.config.mockMode);
 
-  // 2. Define the Action Executor
   const executeAction = async (action: ActionDefinition, context: any) => {
+    // ... (Same execution logic as before) ...
     console.log(`[Engine] Executing: ${action.type}`, action);
-
     switch (action.type) {
-      case 'send_notification':
-        addToast(action.config.message || 'Notification Sent', 'info');
-        break;
-
-      case 'update_resource':
-        // In a real app, this would call the API
-        addToast(`Updating Resource: ${JSON.stringify(action.config)}`, 'success');
-        break;
-
-      case 'agent_task':
-        // Simulate AI Agent processing
-        console.log(`[AI Agent] Thinking about: "${action.config.prompt}"...`);
+      case 'send_notification': addToast(action.config.message || 'Notification Sent', 'info'); break;
+      case 'update_resource': addToast(`Updating Resource: ${JSON.stringify(action.config)}`, 'success'); break;
+      case 'navigate': window.location.href = action.config.path; break;
+      case 'agent_task': 
         addToast('AI Agent Analyzing...', 'info');
-        
-        setTimeout(() => {
-          // Mock response based on prompt context
-          const response = action.config.prompt?.includes('health') 
-            ? "System Operating Normally." 
-            : "Optimization Recommended.";
-            
-          addToast(`🤖 Agent: "${response}"`, 'success', 5000);
-        }, 1500);
-        break;
-
-      case 'navigate':
-        window.location.href = action.config.path;
+        setTimeout(() => addToast('🤖 Agent: "System Nominal"', 'success', 3000), 1500);
         break;
-
-      default:
-        console.warn('Unknown action type:', action.type);
     }
   };
 
-  // 3. Watch Signals & Trigger Workflows
+  // 3. Watch Signals & Trigger Workflows (Live)
   useEffect(() => {
-    // Safety check for undefined domain/workflows
     if (!appManifest.domain?.workflows) return;
 
-    // We cast to our local type since manifest might be "any"
     (appManifest.domain.workflows as unknown as WorkflowDefinition[]).forEach((flow) => {
       if (!flow.active) return;
 
-      // Check Trigger: Signal Change
       if (flow.trigger.type === 'signal_change') {
         const signalId = flow.trigger.config.signalId;
-        const condition = flow.trigger.config.condition; // e.g., "> 80"
+        const condition = flow.trigger.config.condition;
         
+        // @ts-ignore
         const signal = signals[signalId];
         
         if (signal) {
-          const val = signal.value; // Cleaned up access
-          
+          const val = signal.value;
           try {
-            // Check if condition is met (e.g. "50 > 80")
             const isMet = checkCondition(val, condition); 
-            
-            // Debounce: In a real app, we'd check timestamps to avoid firing every 2ms
-            // For now, we rely on the simulation being slow (2s)
             if (isMet) {
               console.log(`[Engine] Trigger Fired: ${flow.name}`);
               flow.actions.forEach(action => executeAction(action, { signal: val }));
             }
-          } catch (e) {
-            // Ignore parse errors
-          }
+          } catch (e) {}
         }
       }
     });
-  }, [signals, addToast]); 
+  }, [signals, addToast, appManifest.domain.workflows]); // Added dependency
 
   return { 
-    // Exposed for manual triggering (e.g. Buttons)
     triggerWorkflow: (workflowId: string) => {
-      // @ts-ignore
+      // ✅ 4. Manual Triggers now find new workflows instantly
       const flow = appManifest.domain?.workflows?.find(w => w.id === workflowId);
       if (flow) {
         // @ts-ignore
@@ -126,13 +73,11 @@ export const useWorkflowEngine = () => {
   };
 };
 
-// --- HELPER: Safe Condition Checker ---
 const checkCondition = (value: number, condition: string): boolean => {
   if (!condition) return false;
   const parts = condition.trim().split(' ');
   const operator = parts[0];
   const target = parseFloat(parts[1]);
-
   switch (operator) {
     case '>': return value > target;
     case '<': return value < target;

package/template/src/features/datagrid/SmartTable.tsx

@@ -9,9 +9,12 @@ import {
   type ColDef,
   type GridApi 
 } from '@ramme-io/ui';
-import { getResourceMeta, getMockData } from '../../data/mockData';
+import { useJustInTimeSeeder } from '../../engine/runtime/useJustInTimeSeeder';
+import { getResourceMeta } from '../../data/mockData';
 import { AutoForm } from '../../components/AutoForm';
 import { useCrudLocalStorage } from '../../engine/runtime/useCrudLocalStorage';
+import { useManifest } from '../../engine/runtime/ManifestContext';
+import type { ResourceDefinition } from '../../engine/validation/schema';
 
 interface SmartTableProps {
   dataId: string;
@@ -24,11 +27,37 @@ export const SmartTable: React.FC<SmartTableProps> = ({
   title}) => {
   const { addToast } = useToast();
   
-  // 1. DATA KERNEL
-  const meta = getResourceMeta(dataId);
-  const seedData = useMemo(() => getMockData(dataId) || [], [dataId]);
+  const manifest = useManifest();
+
+  // ✅ FIX: Normalize 'meta' to always match 'ResourceDefinition'
+  const meta = useMemo<ResourceDefinition | null>(() => {
+    // 1. Try Dynamic Manifest (Preview Mode)
+    const dynamicResource = manifest.resources?.find((r: ResourceDefinition) => r.id === dataId);
+    
+    if (dynamicResource) {
+      return dynamicResource;
+    }
+
+    // 2. Try Static Data (Deployed Mode)
+    const staticMeta = getResourceMeta(dataId);
+    
+    if (staticMeta) {
+      // ⚠️ Type Patch: Inject 'id' so it satisfies ResourceDefinition
+      // The static file uses the object key as the ID, but the type expects it inline.
+      return {
+        ...staticMeta,
+        id: dataId,
+        // Ensure 'type' strings from mockData match the Zod enum if needed, 
+        // but typically 'text' | 'number' overlaps fine.
+      } as unknown as ResourceDefinition; 
+    }
+
+    return null;
+  }, [manifest, dataId]);
+
+  // ✅ JIT Seeder now receives a valid ResourceDefinition
+  const seedData = useJustInTimeSeeder(dataId, meta);
   
-  // We use the CRUD hook to persist changes to localStorage
   const { 
     data: rowData, 
     createItem, 
@@ -36,14 +65,14 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     deleteItem 
   } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
 
-  // 2. UI STATE
+  // --- UI STATE ---
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [currentRecord, setCurrentRecord] = useState<any>(null);
   const [gridApi, setGridApi] = useState<GridApi | null>(null);
   const [selectedRows, setSelectedRows] = useState<any[]>([]);
   const [quickFilterText, setQuickFilterText] = useState('');
 
-  // 3. COLUMN DEFINITIONS
+  // --- COLUMN DEFINITIONS ---
   const columns = useMemo<ColDef[]>(() => {
     if (!meta?.fields) return [];
 
@@ -57,7 +86,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
         flex: 1,
       };
 
-      // Smart Formatting based on type
       if (f.type === 'currency') {
         col.valueFormatter = (p: any) => p.value ? `$${Number(p.value).toLocaleString()}` : '';
       }
@@ -84,14 +112,12 @@ export const SmartTable: React.FC<SmartTableProps> = ({
       return col;
     });
 
-    // Add Checkbox Selection to the first column
     if (generatedCols.length > 0) {
       generatedCols[0].headerCheckboxSelection = true;
       generatedCols[0].checkboxSelection = true;
       generatedCols[0].minWidth = 180;
     }
 
-    // Add Actions Column
     generatedCols.push({
       headerName: "Actions",
       field: "id",
@@ -109,7 +135,7 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     return generatedCols;
   }, [meta]);
 
-  // 4. HANDLERS
+  // --- HANDLERS ---
   const onGridReady = useCallback((params: any) => {
     setGridApi(params.api);
   }, []);
@@ -140,14 +166,10 @@ export const SmartTable: React.FC<SmartTableProps> = ({
     setIsEditOpen(false);
   };
 
-  // --- RENDER ---
   return (
     <Card className="flex flex-col h-[600px] border border-border shadow-sm overflow-hidden bg-card">
       
-      {/* HEADER TOOLBAR */}
       <div className="p-4 border-b border-border flex justify-between items-center gap-4 bg-muted/5">
-        
-        {/* Left: Title or Bulk Actions */}
         {selectedRows.length > 0 ? (
           <div className="flex items-center gap-3 animate-in fade-in slide-in-from-left-2 duration-200">
             <span className="bg-primary text-primary-foreground text-xs font-bold px-2 py-1 rounded-md">
@@ -173,7 +195,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
           </div>
         )}
 
-        {/* Right: Actions & Filter */}
         <div className="flex items-center gap-2">
           <div className="w-64">
             <SearchInput 
@@ -181,8 +202,7 @@ export const SmartTable: React.FC<SmartTableProps> = ({
               value={quickFilterText}
               onChange={(e) => {
                 setQuickFilterText(e.target.value);
-                gridApi?.setQuickFilter(e.target.value);
-              }}
+                gridApi?.updateGridOptions({ quickFilterText: e.target.value });              }}
             />
           </div>
           <div className="h-6 w-px bg-border mx-1" />
@@ -192,7 +212,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
         </div>
       </div>
 
-      {/* AG GRID */}
       <div className="flex-1 w-full bg-card relative">
         <DataTable 
           rowData={rowData} 
@@ -208,7 +227,6 @@ export const SmartTable: React.FC<SmartTableProps> = ({
         />
       </div>
 
-      {/* EDIT DRAWER */}
       <AutoForm
         isOpen={isEditOpen}
         onClose={() => setIsEditOpen(false)}

package/template/src/features/developer/GhostOverlay.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { Icon } from '@ramme-io/ui';
+import React, { useEffect, useState } from 'react';
+import { Icon, cn } from '@ramme-io/ui';
 
 interface GhostOverlayProps {
   children: React.ReactNode;
@@ -16,51 +16,97 @@ export const GhostOverlay: React.FC<GhostOverlayProps> = ({
   signalId,
   isActive = false,
 }) => {
-  
+  const [isRemoteSelected, setIsRemoteSelected] = useState(false);
+
+  // --- 1. INBOUND BRIDGE: Listen for Builder Selections ---
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleMessage = (event: MessageEvent) => {
+      // Security Check: In prod, you'd check event.origin
+      const { type, payload } = event.data || {};
+
+      if (type === 'RAMME_HIGHLIGHT_BLOCK') {
+        // If the Builder says "Highlight Block X", checking if it's us
+        setIsRemoteSelected(payload?.blockId === componentId);
+        
+        // Optional: Scroll into view if selected remotely
+        if (payload?.blockId === componentId) {
+          document.getElementById(`ghost-${componentId}`)?.scrollIntoView({ 
+            behavior: 'smooth', 
+            block: 'center' 
+          });
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [isActive, componentId]);
+
   if (!isActive) {
     return <>{children}</>;
   }
 
+  // --- 2. OUTBOUND BRIDGE: Signal the Builder ---
   const handleClick = (e: React.MouseEvent) => {
-    // 🛑 Stop the click from triggering app logic (like navigation or toggles)
+    // 🛑 Zero Jank: Stop the click from triggering links/buttons
     e.preventDefault();
     e.stopPropagation();
 
-    // 🚀 THE GHOST BRIDGE: Signal the Parent (The Builder)
+    // 🚀 Signal the Parent
     window.parent.postMessage({
       type: 'RAMME_SELECT_BLOCK',
-      payload: { blockId: componentId }
+      payload: { blockId: componentId, type: componentType }
     }, '*');
+    
+    // Optimistic UI update (optional, usually we wait for parent to confirm)
+    setIsRemoteSelected(true);
   };
 
   return (
     <div 
-      className="relative group cursor-pointer"
-      onClick={handleClick} // ✅ Add Click Handler
+      id={`ghost-${componentId}`}
+      className="relative group isolate" // isolate creates new stacking context
+      onClick={handleClick}
     >
-      {/* The "Ghost" Border */}
-      <div className="absolute inset-0 z-50 border-2 border-dashed border-accent/50 rounded-lg bg-accent/5 group-hover:bg-accent/10 transition-colors pointer-events-none" />
+      {/* --- THE GHOST LAYER --- */}
+      <div className={cn(
+        "absolute inset-0 z-50 rounded-lg transition-all duration-200 pointer-events-auto cursor-pointer",
+        // Default State (Hover)
+        "hover:ring-2 hover:ring-primary/50 hover:bg-primary/5",
+        // Selected State (Remote or Local)
+        isRemoteSelected ? "ring-2 ring-primary bg-primary/10 shadow-[0_0_0_4px_rgba(var(--app-primary-color),0.1)]" : "border-2 border-dashed border-transparent"
+      )} />
 
-      {/* The "Info Tag" */}
-      <div className="absolute top-0 left-0 z-50 p-2 transform -translate-y-1/2 translate-x-2 pointer-events-none">
-        <div className="flex items-center gap-2 bg-accent text-accent-foreground text-xs font-mono py-1 px-2 rounded shadow-sm">
-          <Icon name="box" size={12} />
+      {/* --- INFO BADGE (Top Left) --- */}
+      <div className={cn(
+        "absolute top-0 left-0 z-50 p-2 transform -translate-y-1/2 transition-opacity duration-200",
+        isRemoteSelected || "group-hover:opacity-100 opacity-0"
+      )}>
+        <div className="flex items-center gap-2 bg-foreground text-background text-[10px] font-mono py-1 px-2 rounded shadow-sm border border-border">
+          <Icon name="box" size={10} />
           <span className="font-bold">{componentType}</span>
+          <span className="opacity-50">#{componentId.slice(0, 4)}</span>
         </div>
       </div>
 
-      {/* The "Signal Wire" */}
+      {/* --- DATA WIRE (Bottom Right) --- */}
       {signalId && (
-        <div className="absolute bottom-0 right-0 z-50 p-2 transform translate-y-1/2 -translate-x-2 pointer-events-none">
-           <div className="flex items-center gap-1.5 bg-blue-600 text-white text-xs font-mono py-1 px-2 rounded shadow-sm">
-            <Icon name="activity" size={12} />
-            <span>{signalId}</span>
+        <div className={cn(
+          "absolute bottom-0 right-0 z-50 p-2 transform translate-y-1/2 transition-opacity duration-200",
+          isRemoteSelected || "group-hover:opacity-100 opacity-0"
+        )}>
+           <div className="flex items-center gap-1.5 bg-accent text-accent-foreground text-[10px] font-mono py-1 px-2 rounded shadow-sm border border-accent/20">
+             <Icon name="activity" size={10} />
+             <span>{signalId}</span>
           </div>
         </div>
       )}
 
-      {/* Render the actual component underneath */}
-      <div className="opacity-50 grayscale transition-all duration-200 group-hover:opacity-75 group-hover:grayscale-0 pointer-events-none">
+      {/* --- CONTENT (Frozen) --- */}
+      {/* We disable pointer events on children so buttons don't fire while Ghost is active */}
+      <div className="pointer-events-none select-none">
         {children}
       </div>
     </div>