@ramme-io/create-app 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"

package/template/src/App.tsx

@@ -1,14 +1,14 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { generateRoutes } from './core/route-generator';
-import { useEffect } from 'react'; // <-- 1. Import useEffect
+import { useEffect } from 'react';
 
 // --- 1. IMPORT ALL THREE TEMPLATES ---
 import DashboardLayout from './templates/dashboard/DashboardLayout';
-import { dashboardSitemap as dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
+import { dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
 import DocsLayout from './templates/docs/DocsLayout';
-import { docsSitemap as docsSitemap } from './templates/docs/docs.sitemap';
+import { docsSitemap } from './templates/docs/docs.sitemap';
 import SettingsLayout from './templates/settings/SettingsLayout';
-import { settingsSitemap as settingsSitemap } from './templates/settings/settings.sitemap';
+import { settingsSitemap } from './templates/settings/settings.sitemap';
 
 // Other Imports
 import ProtectedRoute from './components/ProtectedRoute';
@@ -16,12 +16,11 @@ import LoginPage from './pages/LoginPage';
 import NotFound from './pages/styleguide/NotFound';
 
 // --- 2. IMPORT THE SEEDER ---
-import { initializeDataLake } from './core/data-seeder'; 
+import { initializeDataLake } from './core/data-seeder';
 
 function App() {
   
   // ✅ 3. TRIGGER DATA SEEDING ON MOUNT
-  // This checks localStorage and injects our mock database if missing.
   useEffect(() => {
     initializeDataLake();
   }, []);
@@ -30,8 +29,8 @@ function App() {
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route element={<ProtectedRoute />}>
-        {/* Default redirect to the dashboard's root */}
-        <Route path="/" element={<Navigate to="/dashboard" replace />} />
+        {/* ✅ FIX: Redirect root to the new Welcome page */}
+        <Route path="/" element={<Navigate to="/dashboard/welcome" replace />} />
 
         {/* Dashboard Template Routes */}
         <Route path="/dashboard/*" element={<DashboardLayout />}>

package/template/src/blocks/SmartTable.tsx

@@ -1,183 +1,216 @@
-import React, { useState, useMemo } from 'react';
-import { DataTable, Button, Icon, Card, useToast, type ColDef } from '@ramme-io/ui';
+import React, { useState, useMemo, useCallback } from 'react';
+import { 
+  DataTable, 
+  Button, 
+  Icon, 
+  Card, 
+  useToast, 
+  SearchInput,
+  type ColDef,
+  type GridApi 
+} from '@ramme-io/ui';
 import { getResourceMeta, getMockData } from '../data/mockData';
 import { AutoForm } from '../components/AutoForm';
-// ✅ Import types that now definitely exist
-import { useDataQuery, type FilterOption, type SortOption } from '../hooks/useDataQuery';
 import { useCrudLocalStorage } from '../hooks/useCrudLocalStorage';
 
 interface SmartTableProps {
   dataId: string;
   title?: string;
   initialFilter?: Record<string, any>; 
-  initialSort?: SortOption;
 }
 
 export const SmartTable: React.FC<SmartTableProps> = ({ 
   dataId, 
   title,
-  initialFilter, 
-  initialSort 
+  initialFilter
 }) => {
   const { addToast } = useToast();
   
-  // 1. STATE
-  const [page, setPage] = useState(1);
-  const [pageSize] = useState(10); // Kept as state in case we add a selector later
-  
-  // 2. METADATA
+  // 1. DATA KERNEL
   const meta = getResourceMeta(dataId);
-
-  // 3. STORAGE LAYER
-  // Seed data if local storage is empty
   const seedData = useMemo(() => getMockData(dataId) || [], [dataId]);
   
+  // We use the CRUD hook to persist changes to localStorage
   const { 
-    data: rawData, 
+    data: rowData, 
     createItem, 
-    updateItem 
+    updateItem, 
+    deleteItem 
   } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
 
-  // 4. LOGIC LAYER
-  const activeFilters = useMemo<FilterOption[]>(() => {
-    if (!initialFilter) return [];
-    return Object.entries(initialFilter).map(([key, value]) => ({
-      field: key,
-      operator: 'equals',
-      value
-    }));
-  }, [initialFilter]);
-
-  const { data: processedRows, total, pageCount } = useDataQuery(rawData, {
-    filters: activeFilters,
-    sort: initialSort, // Using the prop directly for now (Fixes 'setSort' unused)
-    page,
-    pageSize
-  });
-
-  // 5. UI STATE
+  // 2. 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('');
 
-  // 6. COLUMNS
-  const columns = useMemo(() => {
-    if (meta?.fields) {
-      const cols: ColDef[] = meta.fields.map((f: any) => {
-        const colDef: ColDef = {
-          field: f.key,
-          headerName: f.label,
-          filter: true,
-          sortable: true,
-          flex: 1,
-        };
+  // 3. COLUMN DEFINITIONS
+  const columns = useMemo<ColDef[]>(() => {
+    if (!meta?.fields) return [];
 
-        if (f.key.endsWith('Id')) {
-           const collectionName = f.key.replace('Id', 's'); 
-           const relatedData = getMockData(collectionName);
-           if (relatedData) {
-             colDef.valueFormatter = (params) => {
-               const match = relatedData.find((item: any) => item.id === params.value);
-               return match ? (match.name || match.title || params.value) : params.value;
-             };
-           }
-        }
-
-        if (f.type === 'currency') colDef.valueFormatter = (p: any) => p.value ? `$${p.value}` : '';
-        if (f.type === 'date') colDef.valueFormatter = (p: any) => p.value ? new Date(p.value).toLocaleDateString() : '';
-        
-        if (f.type === 'status') {
-          colDef.cellRenderer = (p: any) => (
-            <span className={`px-2 py-1 rounded-full text-xs font-medium border
-              ${['active', 'paid'].includes(p.value?.toLowerCase()) ? 'bg-green-100 text-green-800 border-green-200' : 
-                ['pending'].includes(p.value?.toLowerCase()) ? 'bg-yellow-100 text-yellow-800 border-yellow-200' : 'bg-slate-100 text-slate-800 border-slate-200'}`}>
+    const generatedCols: ColDef[] = meta.fields.map((f: any) => {
+      const col: ColDef = {
+        field: f.key,
+        headerName: f.label,
+        filter: true,
+        sortable: true,
+        resizable: true,
+        flex: 1,
+      };
+
+      // Smart Formatting based on type
+      if (f.type === 'currency') {
+        col.valueFormatter = (p: any) => p.value ? `$${Number(p.value).toLocaleString()}` : '';
+      }
+      if (f.type === 'date') {
+        col.valueFormatter = (p: any) => p.value ? new Date(p.value).toLocaleDateString() : '';
+      }
+      if (f.type === 'status') {
+        col.cellRenderer = (p: any) => {
+          const statusColors: any = {
+            active: 'bg-green-100 text-green-800',
+            paid: 'bg-green-100 text-green-800',
+            pending: 'bg-yellow-100 text-yellow-800',
+            inactive: 'bg-slate-100 text-slate-600',
+            overdue: 'bg-red-100 text-red-800'
+          };
+          const colorClass = statusColors[String(p.value).toLowerCase()] || 'bg-slate-100 text-slate-800';
+          return (
+            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
               {p.value}
             </span>
           );
-        }
-        return colDef;
-      });
-
-      cols.push({
-        headerName: "Actions",
-        field: "id",
-        width: 100,
-        pinned: 'right',
-        cellRenderer: (params: any) => (
-          <Button variant="ghost" size="sm" onClick={() => { setCurrentRecord(params.data); setIsEditOpen(true); }}>
-            <Icon name="edit-2" className="w-4 h-4 text-slate-500" />
+        };
+      }
+      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",
+      width: 100,
+      pinned: 'right',
+      cellRenderer: (params: any) => (
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => { e.stopPropagation(); setCurrentRecord(params.data); setIsEditOpen(true); }}>
+            <Icon name="edit-2" size={14} className="text-slate-500" />
           </Button>
-        )
-      });
-      return cols;
+        </div>
+      )
+    });
+
+    return generatedCols;
+  }, [meta]);
+
+  // 4. HANDLERS
+  const onGridReady = useCallback((params: any) => {
+    setGridApi(params.api);
+  }, []);
+
+  const onSelectionChanged = useCallback(() => {
+    if (gridApi) {
+      setSelectedRows(gridApi.getSelectedRows());
     }
-    
-    if (processedRows.length > 0) {
-      return Object.keys(processedRows[0]).map(k => ({ field: k, headerName: k.toUpperCase(), flex: 1 }));
+  }, [gridApi]);
+
+  const handleBulkDelete = () => {
+    if (confirm(`Delete ${selectedRows.length} items?`)) {
+      selectedRows.forEach(row => deleteItem(row.id));
+      setSelectedRows([]);
+      addToast(`${selectedRows.length} items deleted`, 'success');
     }
-    return [];
-  }, [meta, processedRows]);
+  };
 
   const handleSave = (record: any) => {
     if (record.id && currentRecord?.id) {
-        updateItem(record);
-        addToast('Record updated successfully', 'success');
+      updateItem(record);
+      addToast('Item updated', 'success');
     } else {
-        const { id, ...newItem } = record;
-        createItem(newItem);
-        addToast('New record created', 'success');
+      const { id, ...newItem } = record;
+      createItem(newItem);
+      addToast('Item created', 'success');
     }
     setIsEditOpen(false);
   };
 
+  // --- RENDER ---
   return (
-    <Card className="p-0 overflow-hidden border border-border flex flex-col h-full min-h-[500px]"> 
-      <div className="p-4 border-b border-border flex justify-between items-center bg-muted/20">
+    <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">
+              {selectedRows.length} Selected
+            </span>
+            <Button size="sm" variant="danger" onClick={handleBulkDelete} iconLeft="trash-2">
+              Delete Selected
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <div className="p-2 bg-primary/10 rounded-md text-primary">
+              <Icon name="table" size={18} />
+            </div>
+            <div>
+              <h3 className="text-base font-bold text-foreground leading-tight">
+                {title || meta?.name || dataId}
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                {rowData.length} records found
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Right: Actions & Filter */}
         <div className="flex items-center gap-2">
-          <h3 className="text-lg font-semibold text-foreground">
-            {title || meta?.name || dataId}
-          </h3>
-          <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
-            {total} records
-          </span>
+          <div className="w-64">
+            <SearchInput 
+              placeholder="Quick search..." 
+              value={quickFilterText}
+              onChange={(e) => {
+                setQuickFilterText(e.target.value);
+                gridApi?.setQuickFilter(e.target.value);
+              }}
+            />
+          </div>
+          <div className="h-6 w-px bg-border mx-1" />
+          <Button size="sm" variant="primary" iconLeft="plus" onClick={() => { setCurrentRecord({}); setIsEditOpen(true); }}>
+            Add New
+          </Button>
         </div>
-        <Button size="sm" variant="outline" onClick={() => { setCurrentRecord({}); setIsEditOpen(true); }}>
-          <Icon name="plus" className="mr-2 w-4 h-4" /> Add Item
-        </Button>
       </div>
 
+      {/* AG GRID */}
       <div className="flex-1 w-full bg-card relative">
         <DataTable 
-          rowData={processedRows} 
+          rowData={rowData} 
           columnDefs={columns} 
-          pagination={false} // We handle pagination logic manually below
+          onGridReady={onGridReady}
+          onSelectionChanged={onSelectionChanged}
+          rowSelection="multiple"
+          pagination={true}
+          paginationPageSize={10}
+          headerHeight={48}
+          rowHeight={48}
+          enableCellTextSelection={true}
         />
-        
-        {/* Pagination Controls */}
-        <div className="p-2 border-t border-border flex justify-between items-center text-sm">
-           <span className="text-muted-foreground">
-             Page {page} of {pageCount || 1}
-           </span>
-           <div className="flex gap-2">
-             <Button 
-               variant="ghost" 
-               size="sm" 
-               disabled={page === 1} 
-               onClick={() => setPage(p => Math.max(1, p - 1))}
-             >
-               Prev
-             </Button>
-             <Button 
-               variant="ghost" 
-               size="sm" 
-               disabled={page >= pageCount} 
-               onClick={() => setPage(p => p + 1)}
-             >
-               Next
-             </Button>
-           </div>
-        </div>
       </div>
 
+      {/* EDIT DRAWER */}
       <AutoForm
         isOpen={isEditOpen}
         onClose={() => setIsEditOpen(false)}

package/template/src/generated/hooks.ts

@@ -1,40 +1,67 @@
-import { useSignal } from '../hooks/useSignal';
+import { create } from 'zustand';
+import { useEffect } from 'react';
 
-export const useGeneratedSignals = () => {
+// --- 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,
   
-  // 🟢 REAL: Connected to public MQTT test broker
-  const living_room_ac = useSignal('living_room_ac', {
-    initialValue: 72,
-    min: 60,
-    max: 90,
-    unit: '°F',
-    topic: 'ramme/test/temp' // <--- The magic link
-  });
-
-  // 🟠 MOCK: Simulation Mode
-  const living_room_hum = useSignal('living_room_hum', {
-    initialValue: 45,
-    min: 40,
-    max: 60,
-    unit: '%'
-  });
-
-  const server_01 = useSignal('server_01', {
-    initialValue: 42,
-    min: 10,
-    max: 95,
-    unit: '%'
-  });
-
-  const front_door_lock = useSignal('front_door_lock', {
-    initialValue: 'LOCKED',
-    unit: ''
-  });
-
-  return {
-    living_room_ac,
-    living_room_hum,
-    server_01,
-    front_door_lock,
-  };
+  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 };
+  })
+}));
+
+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> = {};
+      
+      // 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 () => clearInterval(interval);
+  }, [updateSignals]);
 };

package/template/src/hooks/useWorkflowEngine.ts

@@ -1,6 +1,123 @@
-// Placeholder for the Generated Engine
+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 = () => {
-  // This will be overwritten by the Builder at runtime
-  console.log(" [Mock] Workflow Engine Mounted");
-  return {};
+  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/Welcome.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  PageHeader, 
+  Card, 
+  Button, 
+  Icon, 
+  Badge,
+  SectionHeader 
+} from '@ramme-io/ui';
+
+const Welcome: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      
+      {/* HERO */}
+      <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-primary to-violet-600 text-primary-foreground p-8 md:p-12">
+        <div className="relative z-10 max-w-2xl">
+          <Badge variant="secondary" className="mb-4 bg-white/20 text-white border-none backdrop-blur-sm">
+            v1.2.0 Starter Kit
+          </Badge>
+          <h1 className="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight">
+            Your Ramme App is Ready.
+          </h1>
+          <p className="text-lg md:text-xl text-primary-foreground/90 mb-8 leading-relaxed">
+            You have successfully scaffolded a production-ready prototype environment. 
+            This kit comes pre-wired with Authentication, Mock Data, and the A.D.A.P.T. architecture.
+          </p>
+          <div className="flex flex-wrap gap-4">
+            <Button 
+              size="lg" 
+              variant="secondary" 
+              className="font-semibold"
+              iconLeft="layout-dashboard"
+              onClick={() => navigate('/dashboard/app')}
+            >
+              Open Live Dashboard
+            </Button>
+            <Button 
+              size="lg" 
+              variant="outline" 
+              className="bg-transparent border-white/30 text-white hover:bg-white/10 hover:text-white"
+              iconLeft="book-open"
+              onClick={() => navigate('/docs')}
+            >
+              Read Documentation
+            </Button>
+          </div>
+        </div>
+        
+        {/* Decorative Background Icon */}
+        <div className="absolute -right-10 -bottom-10 opacity-10 rotate-12">
+          <Icon name="box" size={300} />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        
+        {/* SECTION 1: ARCHITECTURE */}
+        <div className="space-y-4">
+          <SectionHeader title="Project Architecture" />
+          <div className="grid gap-4">
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 h-fit">
+                <Icon name="database" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Data Lake</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Mock data is seeded into <code>localStorage</code> on boot. 
+                  Edit <code>src/data/mockData.ts</code> to change the schema.
+                </p>
+              </div>
+            </Card>
+
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400 h-fit">
+                <Icon name="git-branch" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Logic Engine</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Workflows and signals are processed in real-time by 
+                  <code>useWorkflowEngine.ts</code>. Supports MQTT and simulated sensors.
+                </p>
+              </div>
+            </Card>
+
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 h-fit">
+                <Icon name="layout" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Dynamic Routing</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Pages are generated from <code>app.manifest.ts</code>. 
+                  Visual blocks connect automatically to data sources.
+                </p>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        {/* SECTION 2: RESOURCES */}
+        <div className="space-y-4">
+          <SectionHeader title="Developer Resources" />
+          
+          <Card className="p-6 space-y-6">
+            <div>
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="palette" size={16} className="text-muted-foreground" />
+                Component Library
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Browse the full suite of accessible UI components available in this project.
+              </p>
+              <Button variant="outline" size="sm" onClick={() => navigate('/styleguide')}>
+                View Style Guide
+              </Button>
+            </div>
+
+            <div className="border-t border-border pt-6">
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="settings" size={16} className="text-muted-foreground" />
+                Configuration
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Manage global settings, user profile templates, and billing layouts.
+              </p>
+              <Button variant="outline" size="sm" onClick={() => navigate('/settings')}>
+                Open Settings
+              </Button>
+            </div>
+
+            <div className="border-t border-border pt-6">
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="github" size={16} className="text-muted-foreground" />
+                Community
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Need help? Check the docs or open an issue on GitHub.
+              </p>
+              <a 
+                href="https://github.com/ramme-io/create-app" 
+                target="_blank" 
+                rel="noreferrer"
+                className="inline-flex"
+              >
+                <Button variant="ghost" size="sm">GitHub Repo &rarr;</Button>
+              </a>
+            </div>
+          </Card>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;

package/template/src/templates/dashboard/dashboard.sitemap.ts

@@ -2,8 +2,18 @@ import { type SitemapEntry } from '../../core/sitemap-entry';
 import { appManifest } from '../../config/app.manifest';
 import Dashboard from '../../pages/Dashboard';
 import AiChat from '../../pages/AiChat';
+import Welcome from '../../pages/Welcome'; // ✅ Import the new page
 
-export const dashboardSitemap: SitemapEntry[] = [];
+export const dashboardSitemap: SitemapEntry[] = [
+  // ✅ 1. The New Landing Page
+  {
+    id: 'welcome',
+    path: 'welcome',
+    title: 'Start Here',
+    icon: 'rocket',
+    component: Welcome,
+  },
+];
 
 // A. Dynamic Pages from Manifest
 if (appManifest.pages) {
@@ -13,10 +23,11 @@ if (appManifest.pages) {
     dashboardSitemap.push({
       id: page.id,
       title: page.title,
-      // Map root to Dashboard, others to their slug
-      path: isDashboard ? '' : page.slug,
+      // ✅ FIX: Map the main dashboard to 'app' instead of root ''
+      // This prevents conflict with the layout root
+      path: isDashboard ? 'app' : page.slug,
       icon: isDashboard ? 'layout-dashboard' : 'file-text',
-      component: Dashboard, // Map everything to the Universal Renderer
+      component: Dashboard,
     });
   });
 }

package/template/src/types/schema.ts

@@ -70,6 +70,39 @@ export const EntitySchema = z.object({
 });
 export type EntityDefinition = z.infer<typeof EntitySchema>;
 
+// ------------------------------------------------------------------
+// ✅ NEW: LOGIC & WORKFLOW DEFINITIONS
+// ------------------------------------------------------------------
+
+export const TriggerSchema = z.object({
+  id: z.string(),
+  type: z.enum(['signal_change', 'manual_action', 'schedule', 'webhook']),
+  config: z.record(z.string(), z.any()), 
+});
+
+export const ActionSchema = z.object({
+  id: z.string(),
+  type: z.enum([
+    'update_resource', 
+    'send_notification', 
+    'mqtt_publish', 
+    'api_call', 
+    'navigate', 
+    'agent_task'
+  ]),
+  config: z.record(z.string(), z.any()),
+});
+
+export const WorkflowSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  active: z.boolean().default(true),
+  trigger: TriggerSchema,
+  actions: z.array(ActionSchema),
+});
+export type WorkflowDefinition = z.infer<typeof WorkflowSchema>;
+export type ActionDefinition = z.infer<typeof ActionSchema>;
+
 
 // ------------------------------------------------------------------
 // 3. UI LAYOUT DEFINITIONS (Presentation Layer)
@@ -78,7 +111,6 @@ export type EntityDefinition = z.infer<typeof EntitySchema>;
 export const BlockSchema = z.object({
   id: z.string(),
   type: z.string(),
-  // ✅ FIX: Explicitly define Key and Value types
   props: z.record(z.string(), z.any()), 
   layout: z.object({
     colSpan: z.number().optional(),
@@ -115,7 +147,7 @@ export const AppSpecificationSchema = z.object({
     version: z.string(),
     description: z.string().optional(),
     author: z.string().optional(),
-    createdAt: z.string().optional(), // <--- ADD THIS LINE
+    createdAt: z.string().optional(),
   }),
   
   config: z.object({
@@ -130,6 +162,8 @@ export const AppSpecificationSchema = z.object({
   domain: z.object({
     signals: z.array(SignalSchema),
     entities: z.array(EntitySchema),
+    // ✅ ADDED WORKFLOWS HERE
+    workflows: z.array(WorkflowSchema).optional(),
   }),
 
   pages: z.array(PageSchema).optional(),