@ramme-io/create-app 1.2.6 → 1.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"

package/template/src/App.tsx

@@ -5,7 +5,6 @@ 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';
@@ -30,7 +29,6 @@ import { initializeDataLake } from './engine/runtime/data-seeder';
 import ScrollToTop from './components/ScrollToTop';
 import HashLinkScroll from './components/HashLinkScroll';
 
-
 function App() {
   
   // Trigger data seeding on mount
@@ -41,7 +39,6 @@ function App() {
   const liveDashboardRoutes = useDynamicSitemap(dashboardSitemap);
 
   console.log("🗺️ ROUTER MAP:", liveDashboardRoutes.map(r => ({ path: r.path, id: r.id })));
-  
 
   return (
     <ThemeProvider>
@@ -61,6 +58,9 @@ function App() {
 
             {/* Fallback for legacy /login access */}
             <Route path="/login" element={<Navigate to="/auth/login" replace />} />
+            
+            {/* ✅ FIX: Redirect legacy /signup to the new location */}
+            <Route path="/signup" element={<Navigate to="/auth/signup" replace />} />
 
             {/* --- PROTECTED APP ROUTES --- */}
             <Route element={<ProtectedRoute />}>
@@ -68,7 +68,7 @@ function App() {
 
               {/* Dashboard Template */}
               <Route path="/dashboard/*" element={<DashboardLayout />}>
-              <Route index element={<Navigate to="welcome" replace />} />
+                <Route index element={<Navigate to="welcome" replace />} />
                 {generateRoutes(liveDashboardRoutes)}
               </Route>
 

package/template/src/engine/runtime/data-seeder.ts

@@ -1,5 +1,4 @@
-// ✅ Match the export from your new mockData.ts
-import { DATA_REGISTRY } from '../../data/mockData'; 
+import { DATA_REGISTRY } from '../../data/mockData';
 
 /**
  * @file data-seeder.ts
@@ -10,16 +9,15 @@ import { DATA_REGISTRY } from '../../data/mockData';
  * from `mockData.ts` into the browser's storage.
  */
 
-// 🔒 SHARED CONSTANT: Ensure everyone uses the same key format
-const DB_PREFIX = 'ramme_mock_'; 
+// 🔒 CRITICAL FIX: Changed from 'ramme_mock_' to 'ramme_db_' to match AuthContext
+const DB_PREFIX = 'ramme_db_'; 
 
 export const initializeDataLake = () => {
   if (typeof window === 'undefined') return;
 
   console.groupCollapsed('🌊 [Data Lake] Initialization');
-  
   Object.entries(DATA_REGISTRY).forEach(([key, seedData]) => {
-    // ✅ FIX: Use the prefix so getMockData() can find it
+    // This now generates 'ramme_db_users', matching AuthContext
     const storageKey = `${DB_PREFIX}${key}`; 
     const existing = localStorage.getItem(storageKey);
 
@@ -30,7 +28,6 @@ export const initializeDataLake = () => {
       console.log(`✅ Collection exists: ${key}`);
     }
   });
-
   console.groupEnd();
 };
 

package/template/src/features/auth/AuthContext.tsx

@@ -1,6 +1,9 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 // Import the User type from your mock data to ensure shape consistency
-import type { User } from '../../data/mockData'; 
+import type { User } from '../../data/mockData';
+// ✅ IMPORT SEEDER AND DATA (Required for Self-Healing)
+import { initializeDataLake } from '../../engine/runtime/data-seeder';
+import { SEED_USERS } from '../../data/mockData';
 
 /**
  * @file AuthContext.tsx
@@ -12,9 +15,9 @@ import type { User } from '../../data/mockData';
  * 1. **Session Persistence:** Checks localStorage on boot.
  * 2. **Data Lake Connection:** Reads from 'ramme_db_users' to validate real accounts.
  * 3. **Simulation:** Adds artificial latency to test loading states.
+ * 4. **Self-Healing:** Automatically re-seeds data if the database is found empty during login.
  */
 
-// ✅ CRITICAL FIX: Match the key used by useCrudLocalStorage and data-seeder
 const USER_DB_KEY = 'ramme_db_users'; 
 const SESSION_KEY = 'ramme_session';
 
@@ -49,8 +52,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const login = async (email: string, password: string) => {
     setIsLoading(true);
     
-    // ✅ FIX: We now use the 'password' variable to satisfy TypeScript (ts(6133))
-    // This also adds a layer of realism to the mock validation.
+    // 1. Validation
     if (!password || password.length < 3) {
       setIsLoading(false);
       throw new Error("Password must be at least 3 characters");
@@ -61,19 +63,20 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
     // Simulate API Delay
     await new Promise(resolve => setTimeout(resolve, 600));
 
-    // ✅ READ FROM THE CORRECT DATA LAKE
-    const storedUsers = localStorage.getItem(USER_DB_KEY);
+    // 2. READ DATA LAKE
+    let storedUsers = localStorage.getItem(USER_DB_KEY);
     
-    // Debugging: See what is actually in storage
-    if (!storedUsers) {
-      console.warn(`⚠️ Data Lake '${USER_DB_KEY}' is empty! Did you run the seeder or signup?`);
-    } else {
-      // Optional: Log count for debugging (remove in production)
-      // console.log(`✅ Data Lake found. Users in DB:`, JSON.parse(storedUsers).length);
+    // 🛡️ SELF-HEALING LOGIC: If DB is empty/missing, re-seed it NOW.
+    // This fixes the "User not found" error on fresh installs.
+    if (!storedUsers || JSON.parse(storedUsers).length === 0) {
+      console.warn("⚠️ Data Lake empty during login. Triggering emergency re-seed...");
+      initializeDataLake(); // Force the seed
+      storedUsers = localStorage.getItem(USER_DB_KEY); // Read it again immediately
     }
 
     const users: User[] = storedUsers ? JSON.parse(storedUsers) : [];
     
+    // 3. Authenticate
     // Case-insensitive email check
     const foundUser = users.find(u => u.email.toLowerCase() === email.toLowerCase());
 
@@ -83,6 +86,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
       localStorage.setItem(SESSION_KEY, JSON.stringify(foundUser));
       setIsLoading(false);
     } else {
+      // Debugging help: List available users if login fails
       console.error("❌ User NOT found. Available emails:", users.map(u => u.email));
       setIsLoading(false);
       throw new Error("Invalid email or password");

package/template/src/features/auth/pages/LoginPage.tsx

@@ -34,11 +34,7 @@ const LoginPage: React.FC = () => {
   return (
     <div className="flex min-h-screen items-center justify-center bg-background p-4 transition-colors duration-300">
       
-      {/* 2. REPLACED <Card> with a native <div> 
-        - Removes conflicting library styles (border-border vs border-t-primary).
-        - Adds 'sm:w-[400px]' for better mobile responsiveness.
-        - Adds 'bg-card' explicitly for theme support.
-      */}
+      {/* 2. REPLACED <Card> with a native <div> */}
       <div className="w-full sm:w-[400px] p-8 rounded-xl shadow-2xl border-t-4 border-t-primary bg-card ring-1 ring-black/5 dark:ring-white/10">
         
         {/* Header */}
@@ -68,7 +64,6 @@ const LoginPage: React.FC = () => {
             autoComplete="email"
             value={formData.email}
             onChange={handleChange}
-            // Explicit background to prevent transparency issues
             className="bg-background"
           />
           
@@ -94,7 +89,8 @@ const LoginPage: React.FC = () => {
         {/* Footer */}
         <div className="mt-8 pt-6 border-t border-border text-center text-sm">
           <span className="text-muted-foreground">Don't have an account? </span>
-          <Link to="/signup" className="font-semibold text-primary hover:text-primary/80 transition-colors">
+          [cite_start]{/* ✅ CRITICAL FIX: Updated path to /auth/signup [cite: 1937] */}
+          <Link to="/auth/signup" className="font-semibold text-primary hover:text-primary/80 transition-colors">
             Create one
           </Link>
         </div>