@ramme-io/create-app 1.2.1 → 1.2.5

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]);
+};

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

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { useSignalStore } from './useSignalStore';
+// ❌ REMOVED: import { appManifest } from '../../config/app.manifest';
+// ✅ ADDED: Live Context
+import { useManifest } from './ManifestContext';
+
+export interface SignalState {
+  id: string;
+  value: any;
+  unit?: string;
+  min?: number;
+  max?: number;
+  timestamp?: number;
+  status: 'fresh' | 'stale';
+}
+
+export const useSignal = (signalId: string): SignalState => {
+  const signalData = useSignalStore((state) => state.signals[signalId]);
+  
+  // ✅ 1. Consume Live Manifest
+  const appManifest = useManifest();
+
+  // 2. Get Static Definition from Manifest (Live)
+  const signalDef = useMemo(() => {
+    return appManifest.domain.signals.find((s) => s.id === signalId);
+  }, [signalId, appManifest]); // Re-run if manifest updates
+
+  const value = signalData?.value ?? signalDef?.defaultValue ?? 0;
+  const isStale = signalData ? (Date.now() - signalData.timestamp > 10000) : true;
+
+  return {
+    id: signalId,
+    value: value,
+    unit: signalDef?.unit,
+    min: signalDef?.min,
+    max: signalDef?.max,
+    timestamp: signalData?.timestamp,
+    status: isStale ? 'stale' : 'fresh'
+  };
+};

package/template/src/{generated/hooks.ts → engine/runtime/useSignalStore.ts}

@@ -1,7 +1,17 @@
 import { create } from 'zustand';
 import { useEffect } from 'react';
 
-// --- 1. SIGNAL STORE ---
+/**
+ * @file useSignalStore.ts
+ * @description The "Short-Term Memory" of the application.
+ *
+ * ARCHITECTURAL ROLE:
+ * This Zustand store holds the instantaneous value of every Signal (IoT sensor).
+ * It acts as the buffer between the high-speed data stream (MQTT/Simulation)
+ * and the UI components.
+ */
+
+// --- 1. SIGNAL STORE TYPES ---
 export interface SignalValue {
   value: any;
   timestamp: number;
@@ -9,11 +19,13 @@ export interface SignalValue {
 
 interface SignalStore {
   signals: Record<string, SignalValue>;
+  // Single update (used by UI controls)
   updateSignal: (id: string, value: any) => void;
+  // Batch update (used by MQTT/Simulation)
   updateSignals: (updates: Record<string, any>) => void;
 }
 
-// Initial State matches app.manifest.ts
+// Initial State matches your dashboard IDs to prevent "undefined" errors on load
 const initialState = {
   living_room_ac: { value: 72, timestamp: Date.now() },
   living_room_hum: { value: 45, timestamp: Date.now() },
@@ -40,28 +52,43 @@ export const useSignalStore = create<SignalStore>((set) => ({
   })
 }));
 
+/**
+ * Hook to access specific signals in a component.
+ * Usage: const signals = useGeneratedSignals();
+ */
 export const useGeneratedSignals = () => {
   return useSignalStore((state) => state.signals);
 };
 
-// --- 2. SIMULATION ENGINE ---
-export const useSimulation = () => {
+// --- 2. SIMULATION ENGINE (The Missing Piece) ---
+/**
+ * A hook that generates fake data for testing when no MQTT broker is connected.
+ * You can toggle this on/off via the manifest config.
+ */
+export const useSimulation = (isEnabled: boolean = true) => {
   const { updateSignals } = useSignalStore();
 
   useEffect(() => {
-    console.log("[System] Simulation Started");
+    if (!isEnabled) return;
+
+    console.log("[System] Simulation Mode: ON 🎲");
     const interval = setInterval(() => {
-      // Simulate random fluctuations for sensors
+      // Simulate random fluctuations
       const updates: Record<string, any> = {};
       
-      // Randomize values slightly
+      // Randomize values slightly around a baseline
       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);
       
+      // Randomly flip the lock status occasionally (1% chance)
+      if (Math.random() > 0.99) {
+         updates['front_door_lock'] = Math.random() > 0.5 ? 'LOCKED' : 'UNLOCKED';
+      }
+      
       updateSignals(updates);
     }, 2000); // Update every 2 seconds
 
     return () => clearInterval(interval);
-  }, [updateSignals]);
+  }, [isEnabled, updateSignals]);
 };

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

@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import { useToast } from '@ramme-io/ui';
+import { useGeneratedSignals, useSimulation } from './useSignalStore';
+// ❌ REMOVED: import { appManifest } from '../../config/app.manifest';
+// ✅ ADDED: Live Context
+import { useManifest } from './ManifestContext';
+
+// ... (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[]; }
+
+export const useWorkflowEngine = () => {
+  const signals = useGeneratedSignals();
+  const { addToast } = useToast();
+  
+  // ✅ 1. Consume Live Manifest
+  const appManifest = useManifest();
+
+  // 2. Activate Simulation (Responsive to toggle)
+  useSimulation(appManifest.config.mockMode);
+
+  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': 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(() => addToast('🤖 Agent: "System Nominal"', 'success', 3000), 1500);
+        break;
+    }
+  };
+
+  // 3. Watch Signals & Trigger Workflows (Live)
+  useEffect(() => {
+    if (!appManifest.domain?.workflows) return;
+
+    (appManifest.domain.workflows as unknown as WorkflowDefinition[]).forEach((flow) => {
+      if (!flow.active) return;
+
+      if (flow.trigger.type === 'signal_change') {
+        const signalId = flow.trigger.config.signalId;
+        const condition = flow.trigger.config.condition;
+        
+        // @ts-ignore
+        const signal = signals[signalId];
+        
+        if (signal) {
+          const val = signal.value;
+          try {
+            const isMet = checkCondition(val, condition); 
+            if (isMet) {
+              console.log(`[Engine] Trigger Fired: ${flow.name}`);
+              flow.actions.forEach(action => executeAction(action, { signal: val }));
+            }
+          } catch (e) {}
+        }
+      }
+    });
+  }, [signals, addToast, appManifest.domain.workflows]); // Added dependency
+
+  return { 
+    triggerWorkflow: (workflowId: string) => {
+      // ✅ 4. Manual Triggers now find new workflows instantly
+      const flow = appManifest.domain?.workflows?.find(w => w.id === workflowId);
+      if (flow) {
+        // @ts-ignore
+        flow.actions.forEach(action => executeAction(action, { manual: true }));
+      }
+    }
+  };
+};
+
+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/{core → engine/types}/manifest-types.ts

@@ -1,5 +1,17 @@
 // src/core/manifest-types.ts
 
+import { type IconName } from '@ramme-io/ui';
+
+/**
+ * Defines a simple navigation link structure used in menus.
+ */
+export interface ManifestLink {
+  id: string;
+  title: string;
+  path: string;
+  icon?: IconName;
+}
+
 /**
  * The fundamental unit of the UI.
  * Corresponds to a specific React component in the registry.
@@ -40,12 +52,32 @@ export interface PageDefinition {
   sections: PageSection[];
 }
 
+// ✅ NEW: Full App Specification Types (Matches app.manifest.ts)
+export interface AppMeta {
+  name: string;
+  version: string;
+  description: string;
+  author: string;
+}
+
+export interface AppConfig {
+  theme: 'system' | 'light' | 'dark';
+  mockMode: boolean;
+  brokerUrl?: string; // Added for MQTT
+}
+
+export interface AppDomain {
+  signals: any[];
+  entities: any[];
+}
+
 /**
  * The "Brain" of the application.
  * This JSON structure drives the entire UI.
  */
-export interface AppManifest {
-  appName: string;
-  version: string;
+export interface AppSpecification {
+  meta: AppMeta;
+  config: AppConfig;
+  domain: AppDomain;
   pages: PageDefinition[];
 }

package/template/src/{types → engine/validation}/schema.ts

@@ -1,5 +1,22 @@
 import { z } from 'zod';
 
+/**
+ * @file schema.ts
+ * @description The "Application Constitution".
+ *
+ * ARCHITECTURAL ROLE:
+ * This file uses Zod to define the strict runtime validation rules for the 
+ * App Manifest. While `manifest-types.ts` handles compile-time TypeScript checks,
+ * this file handles runtime validation, ensuring that any JSON loaded into the 
+ * engine (whether from a file, API, or user input) is structurally sound.
+ *
+ * LAYERS DEFINED:
+ * 1. **SaaS Layer:** Data resources, fields, and tables.
+ * 2. **Physical Layer:** IoT signals, sensors, and entities.
+ * 3. **Logic Layer:** Workflows, triggers, and automated actions.
+ * 4. **Presentation Layer:** Pages, sections, and UI blocks.
+ */
+
 // ------------------------------------------------------------------
 // 1. DATA RESOURCE DEFINITIONS (SaaS Layer)
 // ------------------------------------------------------------------

package/template/src/{pages → features/ai/pages}/AiChat.tsx

@@ -7,7 +7,7 @@ import {
   Message,
   PromptInput,
 } from '@ramme-io/ui';
-import { useMockChat } from '../hooks/useMockChat'; // <--- The new brain
+import { useMockChat } from '../../assistant/useMockChat'; // <--- The new brain
 
 const AiChat: React.FC = () => {
   const { messages, isLoading, sendMessage } = useMockChat();

package/template/src/features/auth/AuthContext.tsx

@@ -0,0 +1,118 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+// Import the User type from your mock data to ensure shape consistency
+import type { User } from '../../data/mockData'; 
+
+/**
+ * @file AuthContext.tsx
+ * @description The Central Identity Manager.
+ * * ARCHITECTURAL ROLE:
+ * This context provides global access to the current user's state (Identity).
+ * It decouples the UI components from the specific authentication implementation.
+ * * KEY FEATURES:
+ * 1. **Session Persistence:** Checks localStorage on boot.
+ * 2. **Data Lake Connection:** Reads from 'ramme_db_users' to validate real accounts.
+ * 3. **Simulation:** Adds artificial latency to test loading states.
+ */
+
+// ✅ CRITICAL FIX: Match the key used by useCrudLocalStorage and data-seeder
+const USER_DB_KEY = 'ramme_db_users'; 
+const SESSION_KEY = 'ramme_session';
+
+interface AuthContextType {
+  user: User | null;
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => void;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Check for existing session on mount
+  useEffect(() => {
+    const storedUser = localStorage.getItem(SESSION_KEY);
+    if (storedUser) {
+      try {
+        setUser(JSON.parse(storedUser));
+      } catch (e) {
+        console.error("Failed to parse session", e);
+        localStorage.removeItem(SESSION_KEY);
+      }
+    }
+    setIsLoading(false);
+  }, []);
+
+  const login = async (email: string, password: string) => {
+    setIsLoading(true);
+    
+    // ✅ FIX: We now use the 'password' variable to satisfy TypeScript (ts(6133))
+    // This also adds a layer of realism to the mock validation.
+    if (!password || password.length < 3) {
+      setIsLoading(false);
+      throw new Error("Password must be at least 3 characters");
+    }
+
+    console.log(`🔐 Attempting login for: ${email}`);
+
+    // Simulate API Delay
+    await new Promise(resolve => setTimeout(resolve, 600));
+
+    // ✅ READ FROM THE CORRECT DATA LAKE
+    const storedUsers = localStorage.getItem(USER_DB_KEY);
+    
+    // Debugging: See what is actually in storage
+    if (!storedUsers) {
+      console.warn(`⚠️ Data Lake '${USER_DB_KEY}' is empty! Did you run the seeder or signup?`);
+    } else {
+      // Optional: Log count for debugging (remove in production)
+      // console.log(`✅ Data Lake found. Users in DB:`, JSON.parse(storedUsers).length);
+    }
+
+    const users: User[] = storedUsers ? JSON.parse(storedUsers) : [];
+    
+    // Case-insensitive email check
+    const foundUser = users.find(u => u.email.toLowerCase() === email.toLowerCase());
+
+    if (foundUser) {
+      console.log("🎉 User found:", foundUser);
+      setUser(foundUser);
+      localStorage.setItem(SESSION_KEY, JSON.stringify(foundUser));
+      setIsLoading(false);
+    } else {
+      console.error("❌ User NOT found. Available emails:", users.map(u => u.email));
+      setIsLoading(false);
+      throw new Error("Invalid email or password");
+    }
+  };
+
+  const logout = () => {
+    setUser(null);
+    localStorage.removeItem(SESSION_KEY);
+  };
+
+  return (
+    <AuthContext.Provider 
+      value={{ 
+        user, 
+        login, 
+        logout, 
+        isAuthenticated: !!user, 
+        isLoading 
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};

package/template/src/features/auth/pages/AuthLayout.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { useTheme, Button, availableThemes, type ThemeConfig } from '@ramme-io/ui';
+
+// --- Temporary Theme Switcher (Unchanged) ---
+const MiniThemeSwitcher = () => {
+  const { setTheme, customTheme, setCustomTheme } = useTheme();
+  
+  const cyberTheme: ThemeConfig = {
+    name: 'Cyberpunk',
+    colors: {
+      primary: '255 238 88', primaryForeground: '0 0 0',
+      secondary: '30 30 35', secondaryForeground: '255 255 255',
+      accent: '0 255 255', accentForeground: '0 0 0',
+      danger: '255 0 85', dangerForeground: '255 255 255',
+      background: '5 5 10', card: '20 20 25', text: '240 240 240',
+      border: '255 238 88', muted: '40 40 50', mutedForeground: '150 150 160',
+      input: '30 30 35', inputBorder: '80 80 90', ring: '255 238 88'
+    },
+    borderRadius: '0px',
+  };
+
+  return (
+    <div className="absolute top-4 right-4 flex gap-2 z-50">
+       {availableThemes.slice(0, 3).map(t => (
+         <Button key={t} size="sm" variant="ghost" onClick={() => setTheme(t)} className="opacity-50 hover:opacity-100">
+           {t}
+         </Button>
+       ))}
+       <Button size="sm" variant="ghost" onClick={() => setCustomTheme(customTheme ? null : cyberTheme)} className="opacity-50 hover:opacity-100">
+         AI
+       </Button>
+    </div>
+  );
+};
+
+export const AuthLayout: React.FC = () => {
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center bg-background text-foreground relative transition-colors duration-300">
+      
+      {/* Background Pattern */}
+      <div className="absolute inset-0 z-0 opacity-[0.03] pointer-events-none bg-[radial-gradient(#888_1px,transparent_1px)] [background-size:16px_16px]" />
+
+      <MiniThemeSwitcher />
+
+      {/* ✅ FIX: Removed the outer <Card>, Header, and Footer.
+         This is now a "Passthrough" layout. It centers the content 
+         but lets the Page (LoginPage/SignupPage) own the UI completely.
+      */}
+      <div className="z-10 relative w-full flex justify-center p-4">
+        <Outlet />
+      </div>
+    </div>
+  );
+};