@ramme-io/create-app 1.1.8 → 1.2.0

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

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

package/template/src/pages/DynamicPage.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { PageHeader, Alert, Button, Icon } from '@ramme-io/ui';
+import { appManifest } from '../config/app.manifest';
+// Reuse the GhostOverlay for structure visualization
+import { GhostOverlay } from '../components/dev/GhostOverlay';
+// Import the Worker Bee
+import { DynamicBlock } from '../components/DynamicBlock';
+// Import the Hook to control the overlay
+import { useDevTools } from '../hooks/useDevTools';
+
+interface DynamicPageProps {
+  pageId: string;
+}
+
+export const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
+  // 1. Initialize DevTools
+  const { isGhostMode, toggleGhostMode } = useDevTools();
+
+  // 2. Look up the page definition
+  const pageConfig = (appManifest as any).pages?.find((p: any) => p.id === pageId);
+
+  if (!pageConfig) {
+    return (
+      <div className="p-8">
+        <Alert variant="danger" title="Page Not Found">
+          The manifest does not contain a page with ID: <code>{pageId}</code>.
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8 fade-in p-6">
+      <PageHeader 
+        title={pageConfig.title} 
+        description={pageConfig.description}
+        actions={
+          <Button 
+            variant={isGhostMode ? 'accent' : 'outline'} 
+            size="sm"
+            onClick={toggleGhostMode}
+            title="Toggle Ghost Mode (Ctrl+Shift+G)"
+          >
+            <Icon name={isGhostMode ? 'eye' : 'eye-off'} className="mr-2" />
+            {isGhostMode ? 'Ghost Mode: ON' : 'Dev Tools'}
+          </Button>
+        }
+      />
+
+      {/* 4. Render Sections */}
+      {pageConfig.sections.map((section: any) => (
+        <div key={section.id} className="space-y-4">
+          {section.title && <h3 className="text-xl font-semibold">{section.title}</h3>}
+          
+          <div 
+            className="grid gap-6"
+            style={{ 
+              // ⚡️ IMPROVEMENT: Default to 1 column (Full Width) instead of 3.
+              // This fixes the "narrow table" issue immediately.
+              gridTemplateColumns: `repeat(${section.layout?.columns || 1}, minmax(0, 1fr))` 
+            }}
+          >
+            {section.blocks.map((block: any) => {
+              // ⚡️ IMPROVEMENT: Calculate Spanning
+              // Allows a block to stretch across multiple columns if needed.
+              const colSpan = block.layout?.colSpan || 1;
+              const rowSpan = block.layout?.rowSpan || 1;
+
+              return (
+                <div 
+                  key={block.id}
+                  style={{ 
+                    gridColumn: `span ${colSpan}`,
+                    gridRow: `span ${rowSpan}`
+                  }}
+                >
+                   <GhostOverlay 
+                     isActive={isGhostMode}
+                     componentId={block.id} 
+                     componentType={block.type}
+                     signalId={block.props.signalId}
+                   >
+                     <DynamicBlock block={block} />
+                   </GhostOverlay>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DynamicPage;

package/template/src/templates/dashboard/DashboardLayout.tsx

@@ -18,6 +18,7 @@ import { SitemapProvider } from '../../contexts/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';
 import AppHeader from '../../components/AppHeader';
 import { AIChatWidget } from '../../components/AIChatWidget'; // <-- NEW: Import Widget
+import { useWorkflowEngine } from '../../hooks/useWorkflowEngine';
 
 // NavLink wrapper - Correct
 const SidebarNavLink = React.forwardRef<HTMLAnchorElement, any>(
@@ -87,6 +88,7 @@ const AppSidebarContent: React.FC = () => {
 const DashboardLayout: React.FC = () => {
   // 1. STATE: Track if the chat window is open
   const [isChatOpen, setIsChatOpen] = useState(false);
+  useWorkflowEngine();
 
   return (
     <SitemapProvider value={dashboardSitemap}>

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

@@ -1,83 +1,33 @@
 import { type SitemapEntry } from '../../core/sitemap-entry';
-
-// Component Imports
+import { appManifest } from '../../config/app.manifest';
 import Dashboard from '../../pages/Dashboard';
 import AiChat from '../../pages/AiChat';
-import DataGridPage from '../../pages/DataGridPage';
-import Styleguide from '../../pages/styleguide/Styleguide';
-import DataLayout from '../../layouts/DataLayout';
-
-// Style Guide Section Imports
-import TemplatesSection from '../../pages/styleguide/sections/templates/TemplatesSection';
-import LayoutSection from '../../pages/styleguide/sections/layout/LayoutSection';
-import ThemingSection from '../../pages/styleguide/sections/theming/ThemingSection';
-import NavigationSection from '../../pages/styleguide/sections/navigation/NavigationSection';
-import TablesSection from '../../pages/styleguide/sections/tables/TablesSection';
-import ChartsSection from '../../pages/styleguide/sections/charts/ChartsSection';
-import ElementsSection from '../../pages/styleguide/sections/elements/ElementsSection';
-import FormsSection from '../../pages/styleguide/sections/forms/FormsSection';
-import FeedbackSection from '../../pages/styleguide/sections/feedback/FeedbackSection';
-import UtilitiesSection from '../../pages/styleguide/sections/utilities/UtilitiesSection';
-import ColorsSection from '../../pages/styleguide/sections/colors/ColorsSection';
-import IconsSection from '../../pages/styleguide/sections/icons/IconsSection';
 
-// --- ADD THIS IMPORT ---
-import ItemSelectorPage from '../../pages/prototypes/ItemSelectorPage';
+export const dashboardSitemap: SitemapEntry[] = [];
 
+// A. Dynamic Pages from Manifest
+if (appManifest.pages) {
+  appManifest.pages.forEach(page => {
+    const isDashboard = page.slug === 'dashboard';
+    
+    dashboardSitemap.push({
+      id: page.id,
+      title: page.title,
+      // Map root to Dashboard, others to their slug
+      path: isDashboard ? '' : page.slug,
+      icon: isDashboard ? 'layout-dashboard' : 'file-text',
+      component: Dashboard, // Map everything to the Universal Renderer
+    });
+  });
+}
 
-export const dashboardSitemap: SitemapEntry[] = [
-  {
-    id: 'dashboard',
-    path: '',
-    title: 'Home Overview',
-    icon: 'layout-dashboard',
-    component: Dashboard,
-  },
-  
-    // --- ADD THIS NEW SITEMAP ENTRY ---
-  {
-    id: 'entity-selector-prototype',
-    path: 'prototypes/entity-selector',
-    title: 'Entity Prototype',
-    icon: 'beaker',
-    component: ItemSelectorPage,
-  },
-  {
+// B. Dynamic Modules
+if (appManifest.modules?.includes('ai-chat')) {
+  dashboardSitemap.push({
     id: 'ai-chat',
     path: 'ai-chat',
-    title: 'AI Chat',
+    title: 'AI Assistant',
     icon: 'bot',
     component: AiChat,
-  },
-  {
-    id: 'data',
-    path: 'data',
-    title: 'Data',
-    icon: 'database',
-    component: DataLayout,
-    children: [
-      { id: 'users', path: 'users', title: 'Users', component: DataGridPage, icon: 'table' }
-    ],
-  },
-  {
-    id: 'styleguide',
-    path: 'styleguide',
-    title: 'Style Guide',
-    icon: 'palette',
-    component: Styleguide,
-    children: [
-        { id: 'templates', path: 'templates', title: 'Templates', component: TemplatesSection },
-        { id: 'layout', path: 'layout', title: 'Layout', component: LayoutSection },
-        { id: 'theming', path: 'theming', title: 'Theming', component: ThemingSection },
-        { id: 'navigation', path: 'navigation', title: 'Navigation', component: NavigationSection },
-        { id: 'tables', path: 'tables', title: 'Tables', component: TablesSection },
-        { id: 'charts', path: 'charts', title: 'Charts', component: ChartsSection },
-        { id: 'elements', path: 'elements', title: 'Elements', component: ElementsSection },
-        { id: 'forms', path: 'forms', title: 'Forms', component: FormsSection },
-        { id: 'feedback', path: 'feedback', title: 'Feedback', component: FeedbackSection },
-        { id: 'utilities', path: 'utilities', title: 'Utilities', component: UtilitiesSection },
-        { id: 'colors', path: 'colors', title: 'Colors', component: ColorsSection },
-        { id: 'icons', path: 'icons', title: 'Icons', component: IconsSection },
-    ],
-  },
-];
+  });
+}

package/template/src/types/schema.ts

@@ -1,85 +1,138 @@
 import { z } from 'zod';
 
 // ------------------------------------------------------------------
-// 1. Signal Schema
+// 1. DATA RESOURCE DEFINITIONS (SaaS Layer)
 // ------------------------------------------------------------------
+
+export const FieldSchema = z.object({
+  key: z.string(),
+  label: z.string(),
+  type: z.enum(['text', 'number', 'currency', 'date', 'boolean', 'status', 'email', 'image', 'textarea']),
+  required: z.boolean().optional(),
+  description: z.string().optional(),
+  defaultValue: z.any().optional(),
+});
+export type FieldDefinition = z.infer<typeof FieldSchema>;
+
+export const ResourceSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  fields: z.array(FieldSchema),
+  defaultView: z.enum(['table', 'grid', 'list']).optional(),
+  features: z.object({
+    searchable: z.boolean().optional(),
+    creatable: z.boolean().optional(),
+    editable: z.boolean().optional(),
+    deletable: z.boolean().optional(),
+    exportable: z.boolean().optional(),
+  }).optional(),
+});
+export type ResourceDefinition = z.infer<typeof ResourceSchema>;
+
+
+// ------------------------------------------------------------------
+// 2. SIGNAL & IOT DEFINITIONS (Physical Layer)
+// ------------------------------------------------------------------
+
 export const SignalSchema = z.object({
   id: z.string().min(1, "Signal ID is required"),
   label: z.string(),
   description: z.string().optional(),
-  
-  // Classification
   kind: z.enum(['sensor', 'actuator', 'setpoint', 'metric', 'status', 'kpi']),
-  
-  // Data Source Configuration
   source: z.enum(['mock', 'mqtt', 'http', 'derived', 'local']),
   
-  // Protocol-Specific Config 
-  topic: z.string().optional(),      // For MQTT
-  endpoint: z.string().optional(),   // For HTTP
-  jsonPath: z.string().optional(),   // For parsing nested API responses
+  // Connectivity
+  topic: z.string().optional(),      
+  endpoint: z.string().optional(),   
+  jsonPath: z.string().optional(),   
   refreshRate: z.number().optional().default(1000), 
   
-  // Value Configuration
+  // Values
   defaultValue: z.any().optional(),
   unit: z.string().optional(),       
-  
-  // Validation
   min: z.number().optional(),
   max: z.number().optional(),
 });
-
 export type SignalDefinition = z.infer<typeof SignalSchema>;
 
-
-// ------------------------------------------------------------------
-// 2. Entity Schema
-// ------------------------------------------------------------------
 export const EntitySchema = z.object({
   id: z.string(),
   name: z.string(),
   description: z.string().optional(),
-  
-  // Taxonomy
   type: z.string(), 
   category: z.string().default('logical'), 
-
-  // Linkage
   signals: z.array(z.string()), 
-  
-  // UI Hints
   ui: z.object({
     icon: z.string().optional(), 
     color: z.string().optional(),
     dashboardComponent: z.string().optional(),
   }).optional(),
 });
-
-// <--- THIS WAS MISSING
 export type EntityDefinition = z.infer<typeof EntitySchema>;
 
 
 // ------------------------------------------------------------------
-// 3. App Specification (The Root Object)
+// 3. UI LAYOUT DEFINITIONS (Presentation Layer)
 // ------------------------------------------------------------------
+
+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(),
+    rowSpan: z.number().optional(),
+  }).optional(),
+});
+
+export const PageSectionSchema = z.object({
+  id: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  layout: z.object({ 
+    columns: z.number().optional(), 
+    variant: z.enum(['grid', 'stack', 'split']).optional() 
+  }).optional(),
+  blocks: z.array(BlockSchema),
+});
+
+export const PageSchema = z.object({
+  id: z.string(),
+  slug: z.string(),
+  title: z.string(),
+  description: z.string().optional(),
+  icon: z.string().optional(),
+  sections: z.array(PageSectionSchema),
+});
+export type PageDefinition = z.infer<typeof PageSchema>;
+
+
+// MASTER APP SPECIFICATION
 export const AppSpecificationSchema = z.object({
   meta: z.object({
     name: z.string(),
     version: z.string(),
     description: z.string().optional(),
     author: z.string().optional(),
-    createdAt: z.string().optional(),
+    createdAt: z.string().optional(), // <--- ADD THIS LINE
+  }),
+  
+  config: z.object({
+    theme: z.enum(['light', 'dark', 'system', 'corporate', 'midnight', 'blueprint']).default('system'),
+    mockMode: z.boolean().default(true),
+    brokerUrl: z.string().optional(),
   }),
+
+  modules: z.array(z.string()).optional(),
+  resources: z.array(ResourceSchema).optional(),
   
   domain: z.object({
     signals: z.array(SignalSchema),
     entities: z.array(EntitySchema),
   }),
 
-  config: z.object({
-    theme: z.enum(['light', 'dark', 'system', 'corporate', 'midnight', 'blueprint']).default('system'),
-    mockMode: z.boolean().default(true), 
-  }),
+  pages: z.array(PageSchema).optional(),
 });
 
 export type AppSpecification = z.infer<typeof AppSpecificationSchema>;