@ramme-io/create-app 1.1.9 → 1.2.1

package/template/src/generated/hooks.ts

@@ -1,61 +1,67 @@
-// ------------------------------------------------------------------
-// GENERATED ADAPTER CODE
-// Config: LIVE MODE (HTTP)
-// ------------------------------------------------------------------
-import { useEffect, useState } from 'react';
-
-// Signal IDs defined in your Acme Corp schema
-export type SignalId = 'mrr_stripe' | 'active_users';
-
-export function useGeneratedSignals() {
-  // 1. Initialize state with default values (0)
-  const [signals, setSignals] = useState<Record<SignalId, any>>({
-    'mrr_stripe': { value: 0, unit: 'USD', status: 'stale' },
-    'active_users': { value: 0, unit: '', status: 'stale' }
-  });
-
-  // 2. HTTP Polling Implementation
-  useEffect(() => {
-    // Helper to extract nested data (e.g. "data.finance.mrr")
-    const getNestedValue = (obj: any, path: string) => {
-      return path.split('.').reduce((acc, part) => acc && acc[part], obj);
-    };
+import { create } from 'zustand';
+import { useEffect } from 'react';
+
+// --- 1. SIGNAL STORE ---
+export interface SignalValue {
+  value: any;
+  timestamp: number;
+}
+
+interface SignalStore {
+  signals: Record<string, SignalValue>;
+  updateSignal: (id: string, value: any) => void;
+  updateSignals: (updates: Record<string, any>) => void;
+}
+
+// Initial State matches app.manifest.ts
+const initialState = {
+  living_room_ac: { value: 72, timestamp: Date.now() },
+  living_room_hum: { value: 45, timestamp: Date.now() },
+  server_01: { value: 42, timestamp: Date.now() },
+  front_door_lock: { value: 'LOCKED', timestamp: Date.now() }
+};
+
+export const useSignalStore = create<SignalStore>((set) => ({
+  signals: initialState,
+  
+  updateSignal: (id, value) => set((state) => ({
+    signals: {
+      ...state.signals,
+      [id]: { value, timestamp: Date.now() }
+    }
+  })),
+
+  updateSignals: (updates) => set((state) => {
+    const newSignals = { ...state.signals };
+    Object.entries(updates).forEach(([id, val]) => {
+      newSignals[id] = { value: val, timestamp: Date.now() };
+    });
+    return { signals: newSignals };
+  })
+}));
 
-    const pollEndpoints = async () => {
-      console.log('🔄 Polling /api_mock.json...');
+export const useGeneratedSignals = () => {
+  return useSignalStore((state) => state.signals);
+};
+
+// --- 2. SIMULATION ENGINE ---
+export const useSimulation = () => {
+  const { updateSignals } = useSignalStore();
+
+  useEffect(() => {
+    console.log("[System] Simulation Started");
+    const interval = setInterval(() => {
+      // Simulate random fluctuations for sensors
+      const updates: Record<string, any> = {};
       
-      try {
-        const response = await fetch('/api_mock.json');
-        if (response.ok) {
-          const json = await response.json();
-          
-          // Update Signals based on the paths defined in manifest
-          setSignals(prev => ({
-            ...prev,
-            'mrr_stripe': { 
-              value: getNestedValue(json, 'data.finance.mrr'), 
-              unit: 'USD', 
-              status: 'fresh' 
-            },
-            'active_users': { 
-              value: getNestedValue(json, 'data.users.total'), 
-              unit: '', 
-              status: 'fresh' 
-            }
-          }));
-        }
-      } catch (err) {
-        console.error("API Polling Error:", err);
-      }
-    };
-
-    // Initial Fetch
-    pollEndpoints();
-    
-    // Poll every 5s
-    const interval = setInterval(pollEndpoints, 5000);
-    return () => clearInterval(interval);
-  }, []);
+      // Randomize values slightly
+      updates['living_room_ac'] = Number((72 + (Math.random() * 4 - 2)).toFixed(1));
+      updates['living_room_hum'] = Number((45 + (Math.random() * 6 - 3)).toFixed(1));
+      updates['server_01'] = Math.floor(Math.random() * 100);
+      
+      updateSignals(updates);
+    }, 2000); // Update every 2 seconds
 
-  return signals;
-}
+    return () => clearInterval(interval);
+  }, [updateSignals]);
+};

package/template/src/hooks/useDataQuery.ts

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+
+// --- 1. Export the Missing Types (Fixes ts(2305)) ---
+
+export type SortDirection = 'asc' | 'desc';
+
+export interface SortOption {
+  field: string;
+  direction: SortDirection;
+}
+
+export interface FilterOption {
+  field: string;
+  operator: 'equals' | 'contains' | 'gt' | 'lt' | 'neq';
+  value: any;
+}
+
+export interface QueryOptions {
+  filters?: FilterOption[];
+  sort?: SortOption;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface QueryResult<T> {
+  data: T[];
+  total: number;
+  pageCount: number;
+}
+
+// --- 2. Update the Hook Signature (Fixes ts(2345)) ---
+
+export function useDataQuery<T>(
+  rawData: T[], // <--- Now accepts an Array, NOT a string ID
+  options: QueryOptions = {}
+): QueryResult<T> {
+  const { filters, sort, page = 1, pageSize = 10 } = options;
+
+  // A. Filtering Logic
+  const filteredData = useMemo(() => {
+    if (!filters || filters.length === 0) return rawData;
+
+    return rawData.filter((item: any) => {
+      return filters.every((filter) => {
+        const itemValue = item[filter.field];
+        
+        switch (filter.operator) {
+          case 'equals': return itemValue == filter.value;
+          case 'neq': return itemValue != filter.value;
+          case 'contains': 
+            return String(itemValue).toLowerCase().includes(String(filter.value).toLowerCase());
+          case 'gt': return itemValue > filter.value;
+          case 'lt': return itemValue < filter.value;
+          default: return true;
+        }
+      });
+    });
+  }, [rawData, filters]);
+
+  // B. Sorting Logic
+  const sortedData = useMemo(() => {
+    if (!sort) return filteredData;
+
+    return [...filteredData].sort((a: any, b: any) => {
+      const aValue = a[sort.field];
+      const bValue = b[sort.field];
+      if (aValue < bValue) return sort.direction === 'asc' ? -1 : 1;
+      if (aValue > bValue) return sort.direction === 'asc' ? 1 : -1;
+      return 0;
+    });
+  }, [filteredData, sort]);
+
+  // C. Pagination Logic
+  const paginatedResult = useMemo(() => {
+    const startIndex = (page - 1) * pageSize;
+    return sortedData.slice(startIndex, startIndex + pageSize);
+  }, [sortedData, page, pageSize]);
+
+  return {
+    data: paginatedResult,
+    total: filteredData.length,
+    pageCount: Math.ceil(filteredData.length / pageSize),
+  };
+}

package/template/src/hooks/useSignal.ts

@@ -1,73 +1,83 @@
 import { useState, useEffect } from 'react';
+import { useMqtt } from '../contexts/MqttContext';
 import type { Signal } from '../types/signal';
 
-/**
- * Configuration for the Mock Generator.
- * This allows us to simulate specific hardware constraints.
- */
 interface SignalConfig<T> {
   initialValue?: T;
-  min?: number;     // Prevent drifting too low
-  max?: number;     // Prevent drifting too high
-  interval?: number; // Update speed (ms)
-  unit?: string;     // e.g., "°F", "%", "RPM"
+  min?: number;     
+  max?: number;
+  interval?: number; // Mock mode only
+  unit?: string;
+  topic?: string;    // Real mode only
 }
 
-/**
- * The "Universal Socket." 
- * UI Components use this hook to subscribe to data.
- * Currently running in "Synthetic Mode" (Mock) with bounded randomization.
- */
 export function useSignal<T = any>(signalId: string, config: SignalConfig<T> = {}): Signal<T> {
-  // Defaults
   const { 
     initialValue, 
     min = -Infinity, 
     max = Infinity, 
     interval = 2000, 
-    unit 
+    unit,
+    topic 
   } = config;
 
-  // 1. Initialize
+  const { subscribe, unsubscribe, lastMessage, isConnected } = useMqtt();
+
   const [signal, setSignal] = useState<Signal<T>>({
     id: signalId,
     value: initialValue as T,
     unit: unit,
     timestamp: Date.now(),
     status: 'fresh',
+    max: max 
   });
 
+  // --- REAL MODE: MQTT ---
+  useEffect(() => {
+    if (!topic || !isConnected) return;
+    subscribe(topic);
+    return () => unsubscribe(topic);
+  }, [topic, isConnected, subscribe, unsubscribe]);
+
   useEffect(() => {
-    // 2. SIMULATION: Generate synthetic data updates
+    if (!topic || !lastMessage[topic]) return;
+
+    const rawValue = lastMessage[topic];
+    let parsedValue: any = rawValue;
+
+    // Auto-parse numbers and booleans
+    if (!isNaN(Number(rawValue))) parsedValue = Number(rawValue);
+    else if (rawValue.toLowerCase() === 'true' || rawValue === 'on') parsedValue = true;
+    else if (rawValue.toLowerCase() === 'false' || rawValue === 'off') parsedValue = false;
+
+    setSignal(prev => ({
+        ...prev,
+        value: parsedValue,
+        timestamp: Date.now(),
+        status: 'fresh'
+    }));
+  }, [lastMessage, topic]);
+
+  // --- MOCK MODE: SIMULATION ---
+  useEffect(() => {
+    if (topic) return; // Disable mock if topic exists
+
     const timer = setInterval(() => {
       setSignal(prev => {
         let newValue: any = prev.value;
-
-        // Only apply math if it's a number
         if (typeof prev.value === 'number') {
-            // Generate drift
-            const variance = (Math.random() - 0.5) * 2; // +/- 1
+            const variance = (Math.random() - 0.5) * 2; 
             let nextNum = prev.value + variance;
-
-            // 🛡️ CLAMPING: Apply the physical bounds
             if (min !== undefined) nextNum = Math.max(min, nextNum);
             if (max !== undefined) nextNum = Math.min(max, nextNum);
-
             newValue = Number(nextNum.toFixed(1));
         }
-
-        return {
-          ...prev,
-          value: newValue,
-          timestamp: Date.now(),
-          status: 'fresh',
-          unit: unit // Ensure unit persists
-        };
+        return { ...prev, value: newValue, timestamp: Date.now(), status: 'fresh' };
       });
     }, interval); 
 
     return () => clearInterval(timer);
-  }, [signalId, min, max, interval, unit]);
+  }, [topic, min, max, interval]);
 
   return signal;
 }

package/template/src/hooks/useWorkflowEngine.ts

@@ -0,0 +1,123 @@
+import { useEffect } from 'react';
+import { useToast } from '@ramme-io/ui';
+// @ts-ignore - These generated hooks exist in the build
+import { useGeneratedSignals, useSimulation } from '../generated/hooks';
+import { appManifest } from '../config/app.manifest';
+// ✅ Import types to fix implicit 'any' errors
+import type { ActionDefinition, WorkflowDefinition } from '../types/schema';
+
+/**
+ * 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)
+  useSimulation();
+
+  // 2. Define the Action Executor
+  // ✅ Explicitly typed 'action'
+  const executeAction = async (action: ActionDefinition, context: any) => {
+    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}"...`);
+        // ✅ FIX: 'loading' is not a valid ToastType. Using 'info' instead.
+        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;
+        break;
+
+      default:
+        console.warn('Unknown action type:', action.type);
+    }
+  };
+
+  // 3. Watch Signals & Trigger Workflows
+  useEffect(() => {
+    if (!appManifest.domain?.workflows) return;
+
+    // ✅ Explicitly typed 'flow'
+    appManifest.domain.workflows.forEach((flow: WorkflowDefinition) => {
+      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"
+        
+        // @ts-ignore
+        const signal = signals[signalId];
+        
+        if (signal) {
+          const val = typeof signal === 'object' ? signal.value : signal;
+          
+          try {
+            // Check if condition is met (e.g. "50 > 80")
+            const isMet = checkCondition(val, condition); 
+            
+            if (isMet) {
+              // Throttling logic would go here to prevent spam
+              console.log(`[Engine] Trigger Fired: ${flow.name}`);
+              flow.actions.forEach(action => executeAction(action, { signal: val }));
+            }
+          } catch (e) {
+            // Ignore parse errors
+          }
+        }
+      }
+    });
+  }, [signals, addToast]); 
+
+  return { 
+    // Exposed for manual triggering (e.g. Buttons)
+    triggerWorkflow: (workflowId: string) => {
+      const flow = appManifest.domain?.workflows?.find(w => w.id === workflowId);
+      if (flow) {
+        flow.actions.forEach(action => executeAction(action, { manual: true }));
+      }
+    }
+  };
+};
+
+// --- 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;
+    case '>=': return value >= target;
+    case '<=': return value <= target;
+    case '==': return value === target;
+    default: return false;
+  }
+};

package/template/src/pages/Dashboard.tsx

@@ -1,105 +1,58 @@
 import React from 'react';
-import { PageHeader, ToggleSwitch, Button, Icon } from '@ramme-io/ui';
-
-// --- IMPORTS ---
-import { getComponent } from '../core/component-registry';
-import { appManifest } from '../config/app.manifest'; 
-import { useGeneratedSignals } from '../generated/hooks';
-import type { EntityDefinition } from '../types/schema';
-import { useAction } from '../hooks/useAction';
-
-// --- DEV TOOLS (Restored) ---
-import { useDevTools } from '../hooks/useDevTools';
-import { GhostOverlay } from '../components/dev/GhostOverlay';
+import { useLocation } from 'react-router-dom';
+import { PageHeader, Alert } from '@ramme-io/ui';
+import { appManifest } from '../config/app.manifest';
+import { DynamicBlock } from '../components/DynamicBlock';
 
 const Dashboard: React.FC = () => {
-  // 1. Initialize State Machine
-  const signals = useGeneratedSignals();
-  const { meta, domain } = appManifest;
+  const location = useLocation();
   
-  // 2. Initialize DevTools
-  const { isGhostMode, toggleGhostMode } = useDevTools();
-  const { sendAction } = useAction();
+  // 1. Determine current slug from URL
+  const pathParts = location.pathname.split('/').filter(Boolean);
+  // If path is root or /dashboard, slug is 'dashboard', else take the last part
+  const currentSlug = pathParts.length > 1 ? pathParts[pathParts.length - 1] : 'dashboard';
+
+  // 2. Find the matching Page Definition
+  const pageDef = appManifest.pages?.find(p => p.slug === currentSlug) 
+    || appManifest.pages?.[0];
+
+  if (!pageDef) {
+    return (
+      <div className="p-8">
+        <Alert variant="warning" title="Page Not Found">
+          Could not find a definition for slug: <code>{currentSlug}</code>
+        </Alert>
+      </div>
+    );
+  }
 
   return (
     <div className="space-y-8 relative">
       <PageHeader
-        title={meta.name || "Command Center"}
-        description={meta.description || "Real-time device monitoring."}
-        actions={
-          // 3. Restore the Toggle Button
-          <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>
-        }
+        title={pageDef.title}
+        description={pageDef.description}
       />
 
-      {/* --- DYNAMIC RUNTIME ENGINE --- */}
-      <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        
-        {domain.entities.map((entity: EntityDefinition) => {
-          // A. Resolve Component & Data
-          const componentType = entity.ui?.dashboardComponent || 'DeviceCard';
-          const Component = getComponent(componentType);
+      {pageDef.sections.map((section) => (
+        <div key={section.id} className="relative">
+          {section.title && (
+            <h3 className="text-lg font-semibold mb-4 text-foreground">
+              {section.title}
+            </h3>
+          )}
           
-          const primarySignalId = entity.signals[0];
-          const signal = primarySignalId ? signals[primarySignalId as keyof typeof signals] : null;
-
-          // B. Prepare Props
-          const dynamicProps: any = {
-            title: entity.name,
-            description: entity.description || `ID: ${entity.id}`,
-            icon: entity.ui?.icon || 'activity',
-            status: 'offline',
-          };
-
-          // C. Inject Signal Data
-          if (signal) {
-            dynamicProps.value = `${signal.value} ${signal.unit || ''}`;
-            dynamicProps.status = 'active';
-
-            if (componentType === 'ToggleCard') {
-              dynamicProps.children = (
-                <div className="flex items-center justify-between mt-2">
-                  <span className="text-sm text-muted-foreground">Active</span>
-                  <ToggleSwitch 
-                    label="Toggle"
-                    checked={(signal.value as any) === true || signal.value === 'true' || signal.value === 1}
-                    // THE UPDATE:
-                    onChange={(val) => sendAction(entity.id, val)} 
-                  />
-                </div>
-              );
-              delete dynamicProps.value; 
-            }
-          }
-
-          return (
-            // 4. Restore the GhostOverlay Wrapper
-            <GhostOverlay
-              key={entity.id}
-              isActive={isGhostMode}
-              componentId={entity.id}
-              componentType={componentType}
-              signalId={primarySignalId}
-            >
-              <Component {...dynamicProps} />
-            </GhostOverlay>
-          );
-        })}
-      </div>
-      
-      {domain.entities.length === 0 && (
-        <div className="p-12 text-center border-2 border-dashed border-slate-200 rounded-lg text-slate-400">
-          <p>No entities defined.</p>
+          <div 
+            className="grid gap-6"
+            style={{ 
+              gridTemplateColumns: `repeat(${section.layout?.columns || 3}, minmax(300px, 1fr))` 
+            }}
+          >
+            {section.blocks.map((block) => (
+              <DynamicBlock key={block.id} block={block} />
+            ))}
+          </div>
         </div>
-      )}
+      ))}
     </div>
   );
 };