@ramme-io/create-app 1.1.9 → 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

@@ -1,24 +1,28 @@
 import React from 'react';
-import { PageHeader, Alert } from '@ramme-io/ui';
+import { PageHeader, Alert, Button, Icon } from '@ramme-io/ui';
 import { appManifest } from '../config/app.manifest';
-import { getComponent } from '../core/component-registry';
 // Reuse the GhostOverlay for structure visualization
 import { GhostOverlay } from '../components/dev/GhostOverlay';
-// Import the component that renders a single block (you likely have this extracted from Dashboard.tsx)
+// 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;
 }
 
-const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
-  // 1. Look up the page definition in the manifest
-  const pageConfig = appManifest.pages?.find((p: { id: string; }) => p.id === pageId);
+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="404: Page Definition Not Found">
+        <Alert variant="danger" title="Page Not Found">
           The manifest does not contain a page with ID: <code>{pageId}</code>.
         </Alert>
       </div>
@@ -26,33 +30,61 @@ const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
   }
 
   return (
-    <div className="space-y-8 fade-in">
+    <div className="space-y-8 fade-in p-6">
       <PageHeader 
         title={pageConfig.title} 
-        description={pageConfig.description} 
+        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>
+        }
       />
 
-      {/* Render Sections */}
-      {pageConfig.sections.map((section: { id: React.Key | null | undefined; title: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined; layout: { columns: any; }; blocks: any[]; }) => (
+      {/* 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={{ 
-              gridTemplateColumns: `repeat(${section.layout?.columns || 3}, minmax(300px, 1fr))` 
+              // ⚡️ 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 => (
-               <GhostOverlay 
-                 key={block.id} 
-                 componentId={block.id} 
-                 componentType={block.type}
-                 signalId={block.props.signalId}
-               >
-                 <DynamicBlock block={block} />
-               </GhostOverlay>
-            ))}
+            {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>
       ))}

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