@ramme-io/create-app 1.2.1 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.2.1",
+  "version": "1.2.5",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"
@@ -9,16 +9,7 @@
     "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": {
-    "@ramme-io/ui": "^1.1.5",
     "ag-grid-community": "^34.1.2",
     "ag-grid-enterprise": "^34.1.2",
     "ag-grid-react": "^34.1.2",
@@ -40,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

@@ -0,0 +1,41 @@
+{
+  "name": "ramme-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@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",
+    "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",
+    "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",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.0",
+    "vite": "^5.2.0"
+  }
+}

package/template/pkg.json

@@ -9,26 +9,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.1.5",
-    "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",
+    "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",
+    "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

@@ -1,10 +1,20 @@
-import { Routes, Route, Navigate } from 'react-router-dom';
-import { generateRoutes } from './core/route-generator';
 import { useEffect } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { generateRoutes } from './engine/renderers/route-generator';
+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';
+import SignupPage from './features/auth/pages/SignupPage';
 
-// --- 1. IMPORT ALL THREE TEMPLATES ---
+// --- 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';
@@ -12,43 +22,74 @@ import { settingsSitemap } from './templates/settings/settings.sitemap';
 
 // Other Imports
 import ProtectedRoute from './components/ProtectedRoute';
-import LoginPage from './pages/LoginPage';
-import NotFound from './pages/styleguide/NotFound';
+import NotFound from './components/NotFound';
+
+// --- 3. DATA SEEDER ---
+import { initializeDataLake } from './engine/runtime/data-seeder';
+
+import ScrollToTop from './components/ScrollToTop';
+import HashLinkScroll from './components/HashLinkScroll';
 
-// --- 2. IMPORT THE SEEDER ---
-import { initializeDataLake } from './core/data-seeder';
 
 function App() {
   
-  // ✅ 3. TRIGGER DATA SEEDING ON MOUNT
+  // Trigger data seeding on mount
   useEffect(() => {
     initializeDataLake();
   }, []);
 
+  const liveDashboardRoutes = useDynamicSitemap(dashboardSitemap);
+
+  console.log("🗺️ ROUTER MAP:", liveDashboardRoutes.map(r => ({ path: r.path, id: r.id })));
+  
+
   return (
-    <Routes>
-      <Route path="/login" element={<LoginPage />} />
-      <Route element={<ProtectedRoute />}>
-        {/* ✅ FIX: Redirect root to the new Welcome page */}
-        <Route path="/" element={<Navigate to="/dashboard/welcome" replace />} />
-
-        {/* Dashboard Template Routes */}
-        <Route path="/dashboard/*" element={<DashboardLayout />}>
-          {generateRoutes(dashboardSitemap)}
-        </Route>
-
-        {/* Docs Template Routes */}
-        <Route path="/docs/*" element={<DocsLayout />}>
-          {generateRoutes(docsSitemap)}
-        </Route>
-
-        {/* Settings Layout Route */}
-        <Route path="/settings/*" element={<SettingsLayout />}>
-          {generateRoutes(settingsSitemap)}
-        </Route>
-      </Route>
-      <Route path="*" element={<NotFound />} />
-    </Routes>
+    <ThemeProvider>
+      
+      <AuthProvider>
+        <MqttProvider>
+          <ScrollToTop />
+          <HashLinkScroll />
+          <Routes>
+            {/* --- NEW AUTH CLUSTER --- */}
+            {/* This handles the layout and background for all auth pages */}
+            <Route path="/auth" element={<AuthLayout />}>
+              <Route index element={<Navigate to="/auth/login" replace />} />
+              <Route path="login" element={<LoginPage />} />
+              <Route path="signup" element={<SignupPage />} />
+            </Route>
+
+            {/* Fallback for legacy /login access */}
+            <Route path="/login" element={<Navigate to="/auth/login" replace />} />
+
+            {/* --- PROTECTED APP ROUTES --- */}
+            <Route element={<ProtectedRoute />}>
+              <Route path="/" element={<Navigate to="/dashboard/welcome" replace />} />
+
+              {/* Dashboard Template */}
+              <Route path="/dashboard/*" element={<DashboardLayout />}>
+              <Route index element={<Navigate to="welcome" replace />} />
+                {generateRoutes(liveDashboardRoutes)}
+              </Route>
+
+              {/* Docs Template */}
+              <Route path="/docs/*" element={<DocsLayout />}>
+                {generateRoutes(docsSitemap)}
+              </Route>
+
+              {/* Settings Template */}
+              <Route path="/settings/*" element={<SettingsLayout />}>
+                {generateRoutes(settingsSitemap)}
+              </Route>
+            </Route>
+
+            {/* 404 Handler */}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </MqttProvider>
+      </AuthProvider>
+      
+    </ThemeProvider>
   );
 }
 

package/template/src/components/AIChatWidget.tsx

@@ -7,7 +7,7 @@ import {
   Button,
   Icon,
 } from '@ramme-io/ui';
-import { useMockChat } from '../hooks/useMockChat';
+import { useMockChat } from '../features/assistant/useMockChat';
 
 interface AIChatWidgetProps {
   onClose: () => void;
@@ -31,7 +31,7 @@ export const AIChatWidget: React.FC<AIChatWidgetProps> = ({ onClose }) => {
       <div className="p-4 border-b flex justify-between items-center bg-muted/50 rounded-t-lg">
         <div className="flex items-center gap-2">
           <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-          <span className="font-semibold text-sm">Bodewell AI</span>
+          <span className="font-semibold text-sm">AI Chat</span>
         </div>
         <Button variant="ghost" size="icon" onClick={onClose} className="h-6 w-6">
           <Icon name="x" size={16} />

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';
@@ -19,13 +19,13 @@ import {
   useTheme,
   type ThemeName,
 } from '@ramme-io/ui';
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from '../features/auth/AuthContext';
 
 // --- STRATEGIC IMPORTS ---
 import { appManifest } from '../config/navigation';
-import type { ManifestLink } from '../core/manifest-types';
+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/AutoForm.tsx

@@ -1,6 +1,19 @@
 import React, { useMemo } from 'react';
 import { Drawer, FormTemplate, Button, type FormField } from '@ramme-io/ui';
 
+/**
+ * @file AutoForm.tsx
+ * @description The "Zero-Boilerplate" Form Engine.
+ * * ARCHITECTURAL ROLE:
+ * This component acts as the bridge between your data schema (JSON) and the UI.
+ * Instead of writing manual form code for every resource (Users, Products, Orders),
+ * this component dynamically generates the correct inputs based on the field type.
+ * * KEY FEATURES:
+ * 1. **Smart Mapping:** Automatically converts 'boolean' -> Toggle, 'date' -> DatePicker, etc.
+ * 2. **Context Aware:** Auto-detects "Create" vs "Edit" mode based on `initialData`.
+ * 3. **Safety Logic:** Automatically hides primary keys during creation and locks them during editing.
+ */
+
 interface AutoFormProps {
   isOpen: boolean;
   onClose: () => void;

package/template/src/{pages/styleguide → components}/NotFound.tsx

@@ -13,7 +13,7 @@ const NotFound: React.FC = () => {
       </p>
       {/* Wrap the Button with the Link component */}
       <Link to="/">
-        <Button size="lg">Return to Style Guide</Button>
+        <Button size="lg">Return to Dashboard</Button>
       </Link>
     </div>
   );

package/template/src/components/PageTitleUpdater.tsx

@@ -6,8 +6,8 @@
  */
 import React, { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { useSitemap } from '../contexts/SitemapContext'; // Import our context hook
-import type { SitemapEntry } from '../core/sitemap-entry';
+import { useSitemap } from '../engine/runtime/SitemapContext'; // Import our context hook
+import type { SitemapEntry } from '../engine/types/sitemap-entry';
 
 // Helper function to recursively find a route by path
 const findRouteByPath = (

package/template/src/components/ProtectedRoute.tsx

@@ -1,8 +1,25 @@
 import React from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
+import { useAuth } from '../features/auth/AuthContext';
 import { Icon } from '@ramme-io/ui';
 
+/**
+ * @file ProtectedRoute.tsx
+ * @description The "Security Gatekeeper" for the application.
+ *
+ * ARCHITECTURAL ROLE:
+ * This component wraps all private routes (Dashboard, Settings, Docs) in `App.tsx`.
+ * It acts as a middleware that checks the user's authentication status before
+ * allowing access to the child components (Outlet).
+ *
+ * KEY FEATURES:
+ * 1. **Auth Verification:** Automatically redirects unauthenticated users to `/login`.
+ * 2. **Loading State:** Displays a spinner while the Auth Provider is initializing,
+ * preventing "flash of login screen" bugs.
+ * 3. **History Management:** Uses `replace` on redirect to ensure the browser
+ * back button works correctly (skips the restricted page).
+ */
+
 const ProtectedRoute: React.FC = () => {
   const { user, isLoading } = useAuth();
 

package/template/src/components/ScrollToTop.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    // "instant" prevents the user from seeing the page scroll up
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'instant', 
+    });
+  }, [pathname]);
+
+  return null;
+};
+
+export default ScrollToTop;

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/app.manifest.ts

@@ -1,4 +1,6 @@
-import type { AppSpecification } from '../types/schema';
+import type { AppSpecification } from '../engine/validation/schema';
+
+
 
 export const appManifest: AppSpecification = {
   meta: {

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

@@ -0,0 +1,69 @@
+import React from 'react';
+// ✅ 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>> = {
+  // 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) => {
+  // 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: "${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/config/navigation.ts

@@ -5,7 +5,7 @@
  * This is the central manifest for all GLOBAL, shared navigation elements.
  * Corrected paths to point within the /settings layout.
  */
-import type { ManifestLink } from '../core/manifest-types';
+import type { ManifestLink } from '../engine/types/manifest-types';
 
 interface AppManifest {
   userMenu: ManifestLink[];