@ramme-io/create-app 1.1.8 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"
@@ -17,7 +17,7 @@
     "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/template/dist/**,**/template/node_modules/**' --output 'ramme-starter-context.txt'"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.1.1",
+    "@ramme-io/ui": "^1.1.3",
     "ag-grid-community": "^34.1.2",
     "ag-grid-enterprise": "^34.1.2",
     "ag-grid-react": "^34.1.2",

package/template/pkg.json

@@ -9,8 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.1.2",
+    "@ramme-io/ui": "^1.1.3",
     "mqtt": "^5.3.5",
+    "zustand": "^4.5.0",
     "ag-grid-community": "^31.3.1",
     "ag-grid-enterprise": "^31.3.1",  
     "ag-grid-react": "^31.3.1",       

package/template/src/components/DynamicBlock.tsx

@@ -3,12 +3,11 @@ import { getComponent } from '../core/component-registry';
 import { useSignal } from '../hooks/useSignal';
 import { getMockData } from '../data/mockData'; 
 
-// 1. THE TRANSLATOR: Maps Data Status ('fresh') to UI Status ('online')
 const mapSignalStatus = (status: string): string => {
   switch (status) {
-    case 'fresh': return 'online';       // Active/Good
-    case 'stale': return 'warning';      // Old data
-    case 'disconnected': return 'offline'; 
+    case 'fresh': return 'online';
+    case 'stale': return 'warning';
+    case 'disconnected': return 'offline';
     case 'error': return 'error';        
     default: return 'offline';
   }
@@ -24,35 +23,29 @@ interface DynamicBlockProps {
 
 export const DynamicBlock: React.FC<DynamicBlockProps> = ({ block }) => {
   const Component = getComponent(block.type);
-  
   const { signalId, dataId, ...staticProps } = block.props;
 
-  // 2. Resolve Data (Crucial Step)
+  // 1. Resolve Data
   const resolvedData = dataId ? getMockData(dataId) : staticProps.data;
 
-  // 3. Signal Wiring (Hooks must run unconditionally)
-  // We pass an empty string if undefined, the hook handles the rest.
+  // 2. Signal Wiring
   const signalState = useSignal(signalId || '');
 
-  // 4. Merge Props
-  // We explicitly type this as Record<string, any> so we can inject new props without TS errors
+  // 3. Merge Props
   const dynamicProps: Record<string, any> = { 
     ...staticProps,
+    // FIX: Pass data as BOTH 'data' (Charts) and 'rowData' (Tables)
     data: resolvedData || [], 
+    rowData: resolvedData || [],
   };
 
-  // 5. Inject Signal Data (If valid)
+  // 4. Inject Signal Data
   if (signalId && signalState) {
-    // Inject the value (formatted with unit)
     dynamicProps.value = `${signalState.value}${signalState.unit || ''}`;
-    
-    // Inject the translated status
     if (signalState.status) {
       dynamicProps.status = mapSignalStatus(signalState.status);
-      
-      // Optional: Auto-map 'variant' for components like Badge that use it
       if (signalState.status === 'error') {
-        dynamicProps.variant = 'destructive'; // UI terminology
+        dynamicProps.variant = 'destructive';
       }
     }
   }

package/template/src/core/component-registry.tsx

@@ -12,33 +12,42 @@ import {
 } from '@ramme-io/ui';
 
 /**
- * The Registry maps the "string" name of a component (from the AI Manifest)
+ * The Registry maps the "string" name of a component (from the JSON manifest)
  * to the actual React component implementation.
  */
 export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
-  // --- Data Display ---
+  // --- Core Components ---
+  DeviceCard,
   StatCard,
   BarChart,
   LineChart,
   PieChart,
   DataTable,
-  
-  // --- IoT & Controls ---
-  DeviceCard,
-  
-  // MAPPING STRATEGY: 
-  // The Wizard generates specific UI intents ("Gauge", "Toggle"). 
-  // For now, we map these to our versatile 'DeviceCard' primitive.
-  // In the future, we will build dedicated components for each.
-  GaugeCard: DeviceCard,      
-  SparklineCard: DeviceCard,  
-  ToggleCard: DeviceCard,     
-  SliderCard: DeviceCard,     
-
-  // --- Layout & Feedback ---
   Card,
   Alert,
   EmptyState,
+
+  // --- 🛡️ ROBUSTNESS ALIASES ---
+  // These mappings allow the manifest to use lowercase or alternate names
+  // without crashing the application.
+  
+  // Tables
+  'table': DataTable,       // Fixes your specific error
+  'Table': DataTable,
+  'grid': DataTable,
+
+  // Charts
+  'chart': BarChart,        // Default generic chart to BarChart
+  'line': LineChart,
+  'bar': BarChart,
+  'pie': PieChart,
+
+  // IoT Fallbacks
+  'DataCard': DeviceCard,
+  'GaugeCard': DeviceCard,
+  'ToggleCard': DeviceCard,
+  'SliderCard': DeviceCard,
+  'SparklineCard': DeviceCard,
 };
 
 /**
@@ -46,12 +55,19 @@ export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
  * Returns a fallback if the component name is unknown.
  */
 export const getComponent = (name: string) => {
-  const Component = COMPONENT_REGISTRY[name];
+  // 1. Try direct lookup
+  let Component = COMPONENT_REGISTRY[name];
+
+  // 2. If not found, try PascalCase (e.g. "deviceCard" -> "DeviceCard")
+  if (!Component) {
+    const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
+    Component = COMPONENT_REGISTRY[pascalName];
+  }
 
   if (!Component) {
     console.warn(`[Registry] Unknown component type: "${name}"`);
     return () => (
-      <Alert variant="warning" title="Unknown Component">
+      <Alert variant="danger" title="Unknown Component">
         The system tried to render <code>{name}</code> but it was not found in the registry.
       </Alert>
     );

package/template/src/pages/DynamicPage.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { PageHeader, Alert } 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 { DynamicBlock } from '../components/DynamicBlock';
+
+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);
+
+  if (!pageConfig) {
+    return (
+      <div className="p-8">
+        <Alert variant="danger" title="404: Page Definition Not Found">
+          The manifest does not contain a page with ID: <code>{pageId}</code>.
+        </Alert>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8 fade-in">
+      <PageHeader 
+        title={pageConfig.title} 
+        description={pageConfig.description} 
+      />
+
+      {/* 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[]; }) => (
+        <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))` 
+            }}
+          >
+            {section.blocks.map(block => (
+               <GhostOverlay 
+                 key={block.id} 
+                 componentId={block.id} 
+                 componentType={block.type}
+                 signalId={block.props.signalId}
+               >
+                 <DynamicBlock block={block} />
+               </GhostOverlay>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DynamicPage;