@ramme-io/create-app 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"
@@ -18,7 +18,6 @@
     "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",

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.2",
+    "@types/uuid": "^10.0.0",
+    "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",
+    "@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,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.1.5",
+    "@ramme-io/ui": "^1.2.2",
     "mqtt": "^5.3.5",
     "zustand": "^4.5.0",
     "ag-grid-community": "^31.3.1",

package/template/src/App.tsx

@@ -1,8 +1,16 @@
-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 DocsLayout from './templates/docs/DocsLayout';
@@ -12,43 +20,66 @@ 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';
 
-// --- 2. IMPORT THE SEEDER ---
-import { initializeDataLake } from './core/data-seeder';
+// --- 3. DATA SEEDER ---
+import { initializeDataLake } from './engine/runtime/data-seeder';
+
+import ScrollToTop from './components/ScrollToTop';
+import HashLinkScroll from './components/HashLinkScroll';
 
 function App() {
   
-  // ✅ 3. TRIGGER DATA SEEDING ON MOUNT
+  // Trigger data seeding on mount
   useEffect(() => {
     initializeDataLake();
   }, []);
 
   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(dashboardSitemap)}
+              </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

@@ -19,11 +19,11 @@ 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
 

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/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/{core → config}/component-registry.tsx

@@ -13,7 +13,7 @@ import {
 } from '@ramme-io/ui';
 
 // ✅ IMPORT YOUR CUSTOM COMPONENT
-import { SmartTable } from '../blocks/SmartTable';
+import { SmartTable } from '../features/datagrid/SmartTable';
 
 export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
   // IoT Primitives

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[];

package/template/src/data/mock-charts.ts

@@ -1,37 +1,41 @@
-// src/data/mock-charts.ts
-import type { ChartData } from 'chart.js';
+/**
+ * @file mock-charts.ts
+ * @description The "Chart Data Lake".
+ *
+ * ARCHITECTURAL ROLE:
+ * This file stores the structured data required by Recharts components.
+ * Separating this from the tabular `mockData.ts` prevents bloat and allows
+ * for specific optimization of visualization data.
+ */
 
-// The centralized registry of "Heavy Data"
-export const MOCK_CHART_DATA: Record<string, ChartData<any>> = {
+// 1. Define a generic shape for Recharts data
+// Recharts expects an array of objects: [{ name: 'A', value: 10 }, ...]
+export type RechartsData = Record<string, any>[];
+
+export const MOCK_CHART_DATA: Record<string, RechartsData> = {
   
   // ID: energy_history
-  energy_history: {
-    labels: ["12am", "4am", "8am", "12pm", "4pm", "8pm"],
-    datasets: [
-      {
-        label: "Energy (kWh)",
-        data: [12, 19, 3, 5, 2, 3],
-        borderColor: "#3b82f6",
-        backgroundColor: "rgba(59, 130, 246, 0.5)",
-        tension: 0.4
-      }
-    ]
-  },
+  energy_history: [
+    { time: "12am", value: 12 },
+    { time: "4am", value: 19 },
+    { time: "8am", value: 3 },
+    { time: "12pm", value: 5 },
+    { time: "4pm", value: 2 },
+    { time: "8pm", value: 3 }
+  ],
 
   // ID: server_load
-  server_load: {
-    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-    datasets: [
-      {
-        label: "CPU Load %",
-        data: [45, 52, 38, 70, 65, 30, 40],
-        borderColor: "#10b981",
-        backgroundColor: "rgba(16, 185, 129, 0.5)"
-      }
-    ]
-  }
+  server_load: [
+    { day: "Mon", load: 45 },
+    { day: "Tue", load: 52 },
+    { day: "Wed", load: 38 },
+    { day: "Thu", load: 70 },
+    { day: "Fri", load: 65 },
+    { day: "Sat", load: 30 },
+    { day: "Sun", load: 40 }
+  ]
 };
 
 export const getChartData = (id: string) => {
-  return MOCK_CHART_DATA[id] || null;
+  return MOCK_CHART_DATA[id] || [];
 };

package/template/src/{components → engine/renderers}/DynamicBlock.tsx

@@ -1,8 +1,23 @@
 import React from 'react';
-import { getComponent } from '../core/component-registry';
+import { getComponent } from '../../config/component-registry';
 // @ts-ignore
 import { useGeneratedSignals } from '../generated/hooks';
-import { getMockData } from '../data/mockData';
+import { getMockData } from '../../data/mockData';
+
+/**
+ * @file DynamicBlock.tsx
+ * @description The "Runtime Hydrator" for the application.
+ *
+ * ARCHITECTURAL ROLE:
+ * This component acts as the bridge between the Abstract Syntax Tree (JSON Manifest)
+ * and the concrete React UI.
+ *
+ * KEY RESPONSIBILITIES:
+ * 1. **Component Lookup:** Resolves string types ('StatCard') to actual React components.
+ * 2. **Signal Injection:** Subscribes to the real-time Signal Engine and feeds live values to props.
+ * 3. **Data Hydration:** Fetches static or async data (users, logs) based on `dataId`.
+ * 4. **Status Normalization:** Translates system-level signal states into UI-friendly status colors.
+ */
 
 const mapSignalStatus = (status: string): string => {
   switch (status) {
@@ -39,18 +54,23 @@ export const DynamicBlock: React.FC<any> = ({ block }) => {
     const signalState = signals[signalId];
 
     if (signalState) {
-      // ✅ FIX: Handle both Raw Values (Legacy) and Signal Objects (New)
-      // If it's an object with a 'value' property, use that. Otherwise use it directly.
-      const rawValue = (typeof signalState === 'object' && 'value' in signalState) 
+      // ✅ FIX: Check for null and handle objects vs raw values
+      const isSignalObject = typeof signalState === 'object' && signalState !== null;
+
+      // Extract Value
+      const rawValue = (isSignalObject && 'value' in signalState) 
         ? signalState.value 
         : signalState;
 
-      const status = (typeof signalState === 'object' && 'status' in signalState)
+      // Extract Status
+      const rawStatus = (isSignalObject && 'status' in signalState)
         ? signalState.status
         : 'fresh'; // Default for raw values
 
       dynamicProps.value = typeof rawValue === 'number' ? rawValue : String(rawValue);
-      dynamicProps.status = mapSignalStatus(status);
+      
+      // ✅ FIX: Explicitly cast to String to satisfy TypeScript
+      dynamicProps.status = mapSignalStatus(String(rawStatus));
     } else {
       dynamicProps.status = mapSignalStatus('disconnected');
     }

package/template/src/{pages → engine/renderers}/DynamicPage.tsx

@@ -1,12 +1,31 @@
 import React from 'react';
 import { PageHeader, Alert, Button, Icon } from '@ramme-io/ui';
-import { appManifest } from '../config/app.manifest';
+import { appManifest } from '../../config/app.manifest';
 // Reuse the GhostOverlay for structure visualization
-import { GhostOverlay } from '../components/dev/GhostOverlay';
+import { GhostOverlay } from '../../features/developer/GhostOverlay';
 // Import the Worker Bee
-import { DynamicBlock } from '../components/DynamicBlock';
+import { DynamicBlock } from './DynamicBlock';
 // Import the Hook to control the overlay
-import { useDevTools } from '../hooks/useDevTools';
+import { useDevTools } from '../../features/developer/useDevTools';
+
+/**
+ * @file DynamicPage.tsx
+ * @description The "Layout Engine" of the application.
+ *
+ * ARCHITECTURAL ROLE:
+ * This component is the bridge between the Abstract JSON Manifest and the Concrete DOM.
+ * It acts as the "General Contractor," taking the blueprint (Manifest) and instructing
+ * the workers (DynamicBlock) where to build.
+ *
+ * HIERARCHY:
+ * App -> Routes -> DynamicPage -> (Iterates Sections) -> DynamicBlock -> (Actual Component)
+ *
+ * KEY FEATURES:
+ * 1. **Manifest Lookup:** Uses the `pageId` prop to find the correct configuration in `app.manifest.ts`.
+ * 2. **Grid Composition:** Translates abstract layout numbers (e.g., `columns: 3`) into real CSS Grid styles.
+ * 3. **DevTools Integration:** Wraps blocks in `GhostOverlay` (when enabled) to visualize the
+ * hidden boundaries and signal connections during development.
+ */
 
 interface DynamicPageProps {
   pageId: string;

package/template/src/{contexts → engine/runtime}/MqttContext.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useEffect, useRef, useState } from 'react';
 import mqtt, { type MqttClient } from 'mqtt';
+import { appManifest } from '../../config/app.manifest'; // ✅ Connect to the Single Source of Truth
 
 interface MqttContextType {
   isConnected: boolean;
@@ -11,22 +12,33 @@ interface MqttContextType {
 
 const MqttContext = createContext<MqttContextType | null>(null);
 
-// Public Test Broker for "Out of the Box" functionality
-// In a real app, this comes from config.ts
-const DEFAULT_BROKER = 'wss://test.mosquitto.org:8081'; 
+/**
+ * @file MqttContext.tsx
+ * @description The Real-Time Connectivity Layer.
+ *
+ * ARCHITECTURAL ROLE:
+ * This provider establishes a persistent WebSocket connection to the MQTT Broker
+ * defined in `app.manifest.ts`.
+ *
+ * KEY FEATURES:
+ * 1. **Global Connection:** Maintains one connection for the whole app (Singleton pattern).
+ * 2. **Topic Management:** specific components (like DeviceCard) can subscribe to
+ * specific topics on demand using `subscribe()`.
+ * 3. **State Distribution:** Broadcasts the latest messages to any component using `useMqtt()`.
+ */
 
 export const MqttProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [isConnected, setIsConnected] = useState(false);
   const [lastMessage, setLastMessage] = useState<Record<string, string>>({});
   const clientRef = useRef<MqttClient | null>(null);
-  
-  // Track active subscriptions to avoid double-subscribing
   const subscriptions = useRef<Set<string>>(new Set());
 
   useEffect(() => {
-    console.log(`[MQTT] Connecting to ${DEFAULT_BROKER}...`);
+    // ✅ Load Broker URL from the Manifest Config
+    const brokerUrl = appManifest.config.brokerUrl || 'wss://test.mosquitto.org:8081';
+    console.log(`[MQTT] Connecting to ${brokerUrl}...`);
     
-    const client = mqtt.connect(DEFAULT_BROKER);
+    const client = mqtt.connect(brokerUrl);
     clientRef.current = client;
 
     client.on('connect', () => {
@@ -34,12 +46,14 @@ export const MqttProvider: React.FC<{ children: React.ReactNode }> = ({ children
       setIsConnected(true);
     });
 
-    client.on('message', (topic: any, message: { toString: () => any; }) => {
-      const payload = message.toString();
-      setLastMessage((prev) => ({ ...prev, [topic]: payload }));
+    // ✅ FIX: Proper typing for MQTT payload (Buffer)
+    client.on('message', (topic: string, payload: Buffer) => {
+      const messageStr = payload.toString();
+      // console.log(`[MQTT] Msg: ${topic} -> ${messageStr}`); // Optional debug
+      setLastMessage((prev) => ({ ...prev, [topic]: messageStr }));
     });
 
-    client.on('error', (err: any) => {
+    client.on('error', (err) => {
       console.error('[MQTT] Connection error: ', err);
       client.end();
     });

package/template/src/{contexts → engine/runtime}/SitemapContext.tsx

@@ -20,7 +20,7 @@
 
 import { createContext, useContext } from 'react';
 // Import the canonical "schema" for a sitemap entry
-import type { SitemapEntry } from '../core/sitemap-entry';
+import type { SitemapEntry } from '../types/sitemap-entry';
 
 // 1. Create the context
 // We initialize it with an empty array as a safe default.

package/template/src/{core → engine/runtime}/data-seeder.ts

@@ -1,7 +1,17 @@
+// src/core/data-seeder.ts
+
 // ✅ Match the export from your new mockData.ts
-import { DATA_REGISTRY } from '../data/mockData'; 
+import { DATA_REGISTRY } from '../../data/mockData'; 
 
-const DB_PREFIX = 'ramme_db_';
+/**
+ * @file data-seeder.ts
+ * @description The "Big Bang" for the client-side database.
+ * * ARCHITECTURAL ROLE:
+ * This utility ensures that the LocalStorage "Data Lake" is never empty.
+ * On app launch, it checks if data exists. If not, it writes the seed data
+ * from `mockData.ts` into the browser's storage.
+ * * This allows the app to feel "alive" with data immediately after installation.
+ */
 
 export const initializeDataLake = () => {
   if (typeof window === 'undefined') return;
@@ -9,7 +19,8 @@ export const initializeDataLake = () => {
   console.groupCollapsed('🌊 [Data Lake] Initialization');
   
   Object.entries(DATA_REGISTRY).forEach(([key, seedData]) => {
-    const storageKey = `${DB_PREFIX}${key}`;
+    // ⚠️ REMOVED PREFIX ('ramme_db_') so it matches AuthContext
+    const storageKey = key; 
     const existing = localStorage.getItem(storageKey);
 
     if (!existing) {
@@ -27,9 +38,8 @@ export const initializeDataLake = () => {
  * Utility to clear the lake (useful for a "Reset Data" button)
  */
 export const resetDataLake = () => {
-  // ✅ FIX: Use DATA_REGISTRY (the new name)
   Object.keys(DATA_REGISTRY).forEach((key) => {
-    localStorage.removeItem(`${DB_PREFIX}${key}`);
+    localStorage.removeItem(key); // Matches the storageKey above
   });
   window.location.reload();
 };