@ramme-io/create-app 1.2.2 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.2.2",
+  "version": "1.2.6",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"
@@ -9,14 +9,6 @@
     "index.js",
     "template"
   ],
-  "scripts": {
-    "dev": "cd template && vite",
-    "build": "cd template && tsc && vite build",
-    "preview": "cd template && vite preview",
-    "pack-tarball": "npm pack",
-    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/template/dist/**,**/template/node_modules/**' --output 'ramme-starter-context.txt'",
-    "zip:builder": "cd template && zip -r ../base.zip . -x \"node_modules/*\" \"dist/*\" \".DS_Store\" && mv ../base.zip ../../ramme-app-builder/public/base.zip && echo '✅ base.zip updated in Builder!'"
-  },
   "dependencies": {
     "ag-grid-community": "^34.1.2",
     "ag-grid-enterprise": "^34.1.2",
@@ -39,9 +31,12 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   },
-  "pnpm": {
-    "overrides": {
-      "react-router-dom": "6.30.1"
-    }
+  "scripts": {
+    "dev": "cd template && vite",
+    "build": "cd template && tsc && vite build",
+    "preview": "cd template && vite preview",
+    "pack-tarball": "npm pack",
+    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/template/dist/**,**/template/node_modules/**' --output 'ramme-starter-context.txt'",
+    "zip:builder": "cd template && zip -r ../base.zip . -x \"node_modules/*\" \"dist/*\" \".DS_Store\" && mv ../base.zip ../../ramme-app-builder/public/base.zip && echo '✅ base.zip updated in Builder!'"
   }
-}
+}

package/template/package.json

@@ -10,19 +10,20 @@
   },
   "dependencies": {
     "@ai-sdk/google": "^0.0.10",
-    "@ramme-io/ui": "^1.2.2",
-    "@types/uuid": "^10.0.0",
+    "@ramme-io/ui": "^1.2.3",
     "ag-grid-community": "^31.3.1",
     "ag-grid-enterprise": "^31.3.1",
     "ag-grid-react": "^31.3.1",
     "ai": "^3.0.0",
     "framer-motion": "^11.0.0",
     "fs-extra": "^11.2.0",
+    "lucide-react": "^0.454.0",
     "mqtt": "^5.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^2.0.9",
     "react-router-dom": "^6.22.0",
+    "recharts": "^2.12.7",
     "uuid": "^13.0.0",
     "zod": "^3.22.0",
     "zustand": "^4.5.7"
@@ -31,6 +32,7 @@
     "@types/node": "^20.11.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
@@ -38,4 +40,4 @@
     "typescript": "^5.2.0",
     "vite": "^5.2.0"
   }
-}
+}

package/template/pkg.json

@@ -9,26 +9,30 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.2.2",
-    "mqtt": "^5.3.5",
-    "zustand": "^4.5.0",
+    "@ai-sdk/google": "^0.0.10",
+    "@ramme-io/ui": "^1.2.3",
     "ag-grid-community": "^31.3.1",
     "ag-grid-enterprise": "^31.3.1",
     "ag-grid-react": "^31.3.1",
+    "ai": "^3.0.0",
     "framer-motion": "^11.0.0",
     "fs-extra": "^11.2.0",
+    "lucide-react": "^0.454.0",
+    "mqtt": "^5.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
     "react-resizable-panels": "^2.0.9",
-    "ai": "^3.0.0",
-    "@ai-sdk/google": "^0.0.10",
-    "zod": "^3.22.0"
+    "react-router-dom": "^6.22.0",
+    "recharts": "^2.12.7",
+    "uuid": "^13.0.0",
+    "zod": "^3.22.0",
+    "zustand": "^4.5.7"
   },
   "devDependencies": {
     "@types/node": "^20.11.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",

package/template/src/App.tsx

@@ -5,6 +5,7 @@ import { ThemeProvider } from '@ramme-io/ui';
 import { AuthProvider } from './features/auth/AuthContext';
 import { MqttProvider } from './engine/runtime/MqttContext';
 
+
 // --- 1. IMPORT AUTH CLUSTER ---
 import { AuthLayout } from './features/auth/pages/AuthLayout';
 import LoginPage from './features/auth/pages/LoginPage';
@@ -13,6 +14,7 @@ import SignupPage from './features/auth/pages/SignupPage';
 // --- 2. IMPORT TEMPLATES ---
 import DashboardLayout from './templates/dashboard/DashboardLayout';
 import { dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
+import { useDynamicSitemap } from './engine/runtime/useDynamicSitemap';
 import DocsLayout from './templates/docs/DocsLayout';
 import { docsSitemap } from './templates/docs/docs.sitemap';
 import SettingsLayout from './templates/settings/SettingsLayout';
@@ -28,6 +30,7 @@ import { initializeDataLake } from './engine/runtime/data-seeder';
 import ScrollToTop from './components/ScrollToTop';
 import HashLinkScroll from './components/HashLinkScroll';
 
+
 function App() {
   
   // Trigger data seeding on mount
@@ -35,8 +38,14 @@ function App() {
     initializeDataLake();
   }, []);
 
+  const liveDashboardRoutes = useDynamicSitemap(dashboardSitemap);
+
+  console.log("🗺️ ROUTER MAP:", liveDashboardRoutes.map(r => ({ path: r.path, id: r.id })));
+  
+
   return (
     <ThemeProvider>
+      
       <AuthProvider>
         <MqttProvider>
           <ScrollToTop />
@@ -60,7 +69,7 @@ function App() {
               {/* Dashboard Template */}
               <Route path="/dashboard/*" element={<DashboardLayout />}>
               <Route index element={<Navigate to="welcome" replace />} />
-                {generateRoutes(dashboardSitemap)}
+                {generateRoutes(liveDashboardRoutes)}
               </Route>
 
               {/* Docs Template */}
@@ -79,6 +88,7 @@ function App() {
           </Routes>
         </MqttProvider>
       </AuthProvider>
+      
     </ThemeProvider>
   );
 }

package/template/src/components/AppHeader.tsx

@@ -4,9 +4,9 @@
  * @description This is the global application header.
  *
  * @developer_notes
- * STRATEGIC REFACTOR (10/21/2025):
- * 1. Updated logo to include both the `orange.png` image and "Ramme" text.
- * 2. Kept all A.D.A.P.T. manifest, asChild, and z-index fixes.
+ * STRATEGIC REFACTOR:
+ * 1. Cleaned up Ghost Bridge telemetry for production feel.
+ * 2. Kept all A.D.A.P.T. navigation and z-index fixes.
  */
 import React from 'react';
 import { Link } from 'react-router-dom';
@@ -25,7 +25,7 @@ import { useAuth } from '../features/auth/AuthContext';
 import { appManifest } from '../config/navigation';
 import type { ManifestLink } from '../engine/types/manifest-types';
 import TemplateSwitcher from './TemplateSwitcher';
-import rammeLogo from '../assets/orange.png'; // <-- 1. IMPORT THE LOGO
+import rammeLogo from '../assets/orange.png'; 
 
 const AppHeader: React.FC = () => {
   const { theme, availableThemes, setTheme } = useTheme();
@@ -47,13 +47,13 @@ const AppHeader: React.FC = () => {
     // Z-INDEX FIX: Set to z-50 to render above the z-40 sidebar.
     <header className="flex items-center justify-between p-4 bg-card border-b border-border shadow-sm sticky top-0 z-50">
       
-      {/* --- 2. UPDATED LOGO BLOCK --- */}
-      {/* Logo - links to dashboard home */}
+      {/* --- 1. LOGO BLOCK --- */}
       <Link to="/dashboard" className="flex items-center gap-2">
         <img src={rammeLogo} alt="Ramme Logo" className="h-8 w-auto" />
         <h1 className="text-2xl font-bold text-text">Ramme</h1>
       </Link>
 
+      {/* --- 2. USER ACTIONS --- */}
       <div className="flex items-center gap-4">
         <TemplateSwitcher />
         {user && (
@@ -64,14 +64,14 @@ const AppHeader: React.FC = () => {
               </button>
             }
           >
-            {/* 1. User Info (Static) */}
+            {/* User Info */}
             <div className="p-2 text-sm text-muted-foreground">
               <p className="font-semibold text-text">{user.name}</p>
               <p>{user.email}</p>
             </div>
             <MenuDivider />
 
-            {/* 2. Designer-Controlled Nav Links */}
+            {/* Navigation Links */}
             {userNavLinks.map((link: ManifestLink) => (
               <MenuItem
                 key={link.id}
@@ -83,7 +83,7 @@ const AppHeader: React.FC = () => {
             ))}
             <MenuDivider />
 
-            {/* 3. App-Specific: Theme Switcher */}
+            {/* Theme Switcher */}
             <div className="p-2 text-sm text-muted-foreground">
               <p>
                 Active Theme:{' '}
@@ -100,7 +100,7 @@ const AppHeader: React.FC = () => {
             ))}
             <MenuDivider />
 
-            {/* 4. App-Specific: Actions */}
+            {/* Actions */}
             <MenuItem onClick={handleResetData} icon={<Icon name="refresh-cw" />}>
               Reset Data
             </MenuItem>

package/template/src/components/dashboard/ChartLine.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Card } from '@ramme-io/ui';
+
+export const ChartLine: React.FC<{ title: string; description?: string }> = ({ title, description }) => {
+  return (
+    <Card className="p-6 h-full min-h-[300px] flex flex-col">
+      <div className="mb-6">
+        <h3 className="font-semibold text-lg">{title}</h3>
+        {description && <p className="text-sm text-muted-foreground">{description}</p>}
+      </div>
+      
+      {/* Visual Mockup of a Chart */}
+      <div className="flex-1 flex items-end justify-between gap-2 px-2 pb-2 mt-4 border-b border-l border-border/50">
+        {[40, 70, 45, 90, 65, 85, 55, 95, 75, 60, 90, 100].map((h, i) => (
+           <div key={i} className="w-full flex flex-col items-center gap-2 group">
+              <div 
+                className="w-full bg-primary/20 group-hover:bg-primary/80 transition-all rounded-t-sm"
+                style={{ height: `${h}%` }}
+              />
+           </div>
+        ))}
+      </div>
+      <div className="flex justify-between mt-2 text-xs text-muted-foreground px-2">
+         <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
+      </div>
+    </Card>
+  );
+};

package/template/src/components/dashboard/StatCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Card } from '@ramme-io/ui';
+import { ArrowUpRight, ArrowDownRight, Activity, Users, DollarSign, CreditCard } from 'lucide-react';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  trend?: string;
+  status?: 'positive' | 'negative' | 'neutral' | 'offline';
+}
+
+export const StatCard: React.FC<StatCardProps> = ({ 
+  title, 
+  value, 
+  trend, 
+  status = 'neutral' 
+}) => {
+  const statusColors = {
+    positive: 'text-green-600 bg-green-100',
+    negative: 'text-red-600 bg-red-100',
+    neutral: 'text-blue-600 bg-blue-100',
+    offline: 'text-gray-400 bg-gray-100',
+  };
+
+  const getIcon = () => {
+    switch(title?.toLowerCase()) {
+      case 'active users': return <Users size={20} />;
+      case 'revenue': return <DollarSign size={20} />;
+      case 'sales': return <CreditCard size={20} />;
+      default: return <Activity size={20} />;
+    }
+  };
+
+  return (
+    <Card className="p-6 flex flex-col justify-between h-full border-border/60 hover:shadow-md transition-all">
+      <div className="flex justify-between items-start mb-4">
+        <div>
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <h3 className="text-2xl font-bold mt-1 tracking-tight">{value || '--'}</h3>
+        </div>
+        <div className={`p-2 rounded-lg ${statusColors[status] || statusColors.neutral}`}>
+          {getIcon()}
+        </div>
+      </div>
+      
+      {trend && (
+        <div className="flex items-center gap-1 text-xs font-medium">
+          {trend.startsWith('+') ? (
+            <ArrowUpRight size={14} className="text-green-600" />
+          ) : (
+            <ArrowDownRight size={14} className="text-red-600" />
+          )}
+          <span className={trend.startsWith('+') ? 'text-green-600' : 'text-red-600'}>
+            {trend}
+          </span>
+          <span className="text-muted-foreground ml-1">from last month</span>
+        </div>
+      )}
+    </Card>
+  );
+};

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

@@ -1,56 +1,69 @@
 import React from 'react';
-import {
-  DeviceCard,
-  StatCard,
-  BarChart,
-  LineChart,
-  PieChart,
-  DataTable, 
-  Card,
-  Alert,
-  EmptyState,
-  ToggleSwitch
-} from '@ramme-io/ui';
-
-// ✅ IMPORT YOUR CUSTOM COMPONENT
+// ✅ 1. Import the Master Registry from the UI Library (Tier 1: Atoms)
+// This instantly pulls in Button, Card, Inputs, Layouts, Navigation, etc.
+import { AUTO_REGISTRY } from '@ramme-io/ui';
+
+// ✅ 2. Import Local "Smart Blocks" (Tier 2: Logic)
+// These exist only in the App (Starter), not the UI library.
 import { SmartTable } from '../features/datagrid/SmartTable';
+import { SmartChart } from '../features/visualizations/SmartChart';
 
+// ✅ 3. MERGE EVERYTHING
 export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
-  // IoT Primitives
-  DeviceCard,
-  
-  // Data Display
-  StatCard,
-  BarChart,
-  LineChart,
-  PieChart,
-  
-  // Tables
-  DataTable, // The raw grid
-  
-  // ✅ FIX: Map "SmartTable" to the actual SmartTable component
-  // (Previously it was aliased to DataTable, which broke the UI)
-  SmartTable: SmartTable, 
-  
-  // Layout & Feedback
-  Card,
-  Alert,
-  EmptyState,
-  
-  // Forms/Controls
-  ToggleSwitch
+  // A. The Entire UI Library (~50+ components)
+  ...AUTO_REGISTRY,
+
+  // B. The Smart Blocks (Data-Connected)
+  SmartTable,
+  SmartChart,
+
+  // C. Legacy Aliases (For older AI prompts/manifests)
+  'smart_table': SmartTable,
+  'smart_chart': SmartChart,
+  'stat_card': AUTO_REGISTRY['StatCard'],
+  'chart_line': AUTO_REGISTRY['LineChart'],
+  'chart_bar': AUTO_REGISTRY['BarChart'],
+  'chart_pie': AUTO_REGISTRY['PieChart'],
 };
 
+// --- COMPONENT RESOLVER ENGINE ---
 export const getComponent = (name: string) => {
-  const Component = COMPONENT_REGISTRY[name];
+  // 1. Normalize the key to handle case-insensitivity and snake_case
+  // e.g. "page_header" -> "PageHeader", "button" -> "Button"
+  const normalizedName = name.replace(/_/g, '').toLowerCase();
   
+  // 2. Lookup Strategy
+  // We check the exact name, then the lowercase version, then the normalized version
+  const Component = 
+    COMPONENT_REGISTRY[name] || 
+    COMPONENT_MAP_LOWER[name.toLowerCase()] || 
+    COMPONENT_MAP_NORMALIZED[normalizedName];
+
+  // 3. Safety Net (Ghost Placeholder)
   if (!Component) {
-    console.warn(`[Registry] Unknown component type: "${name}"`);
-    return () => (
-      <Alert variant="danger" title="Unknown Component">
-        The system tried to render <code>{name}</code> but it was not found in the registry.
-      </Alert>
+    console.warn(`[Registry] ❌ Unknown component: "${name}"`);
+    
+    return ({ ...props }) => (
+      <div className="p-4 border-2 border-dashed border-red-200 bg-red-50 rounded-lg flex flex-col items-center justify-center text-red-400 min-h-[100px] h-full w-full animate-in fade-in">
+        <span className="text-xs font-mono font-bold uppercase tracking-wider">{name}</span>
+        <span className="text-[10px] mt-1 opacity-75">Component Missing</span>
+        {/* Hidden debug data for developers */}
+        <div className="hidden">{JSON.stringify(props)}</div>
+      </div>
     );
   }
   return Component;
-};
+};
+
+// --- OPTIMIZATION: PRE-CALCULATED LOOKUP MAPS ---
+// We generate these once on startup so we don't map/reduce on every render.
+
+const COMPONENT_MAP_LOWER = Object.keys(COMPONENT_REGISTRY).reduce((acc, key) => {
+    acc[key.toLowerCase()] = COMPONENT_REGISTRY[key];
+    return acc;
+}, {} as Record<string, React.FC<any>>);
+
+const COMPONENT_MAP_NORMALIZED = Object.keys(COMPONENT_REGISTRY).reduce((acc, key) => {
+    acc[key.replace(/_/g, '').toLowerCase()] = COMPONENT_REGISTRY[key];
+    return acc;
+}, {} as Record<string, React.FC<any>>);

package/template/src/engine/renderers/DynamicBlock.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { getComponent } from '../../config/component-registry';
 // @ts-ignore
-import { useGeneratedSignals } from '../generated/hooks';
+import { useGeneratedSignals } from '../runtime/useSignalStore';
 import { getMockData } from '../../data/mockData';
 
 /**