@ramme-io/create-app 1.1.8 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"
@@ -14,10 +14,11 @@
     "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'"
+    "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.1",
+    "@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/pkg.json

@@ -9,27 +9,31 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.1.2",
+    "@ramme-io/ui": "^1.1.5",
     "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",       
-    "framer-motion": "^12.23.12",
-    "fs-extra": "^11.3.1",
+    "ag-grid-enterprise": "^31.3.1",
+    "ag-grid-react": "^31.3.1",
+    "framer-motion": "^11.0.0",
+    "fs-extra": "^11.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-resizable-panels": "^3.0.4",
-    "react-router-dom": "6.30.1"
+    "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"
   },
   "devDependencies": {
-    "@types/node": "^20.14.2",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@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.4",
-    "typescript": "^5.2.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.0",
     "vite": "^5.2.0"
   }
 }

package/template/src/App.tsx

@@ -1,20 +1,31 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { generateRoutes } from './core/route-generator';
+import { useEffect } from 'react'; // <-- 1. Import useEffect
 
 // --- 1. IMPORT ALL THREE TEMPLATES ---
 import DashboardLayout from './templates/dashboard/DashboardLayout';
 import { dashboardSitemap as dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
 import DocsLayout from './templates/docs/DocsLayout';
 import { docsSitemap as docsSitemap } from './templates/docs/docs.sitemap';
-import SettingsLayout from './templates/settings/SettingsLayout'; // <-- NEW
-import { settingsSitemap as settingsSitemap } from './templates/settings/settings.sitemap'; // <-- NEW
+import SettingsLayout from './templates/settings/SettingsLayout';
+import { settingsSitemap as settingsSitemap } from './templates/settings/settings.sitemap';
 
 // Other Imports
 import ProtectedRoute from './components/ProtectedRoute';
 import LoginPage from './pages/LoginPage';
 import NotFound from './pages/styleguide/NotFound';
 
+// --- 2. IMPORT THE SEEDER ---
+import { initializeDataLake } from './core/data-seeder'; 
+
 function App() {
+  
+  // ✅ 3. TRIGGER DATA SEEDING ON MOUNT
+  // This checks localStorage and injects our mock database if missing.
+  useEffect(() => {
+    initializeDataLake();
+  }, []);
+
   return (
     <Routes>
       <Route path="/login" element={<LoginPage />} />
@@ -24,19 +35,15 @@ function App() {
 
         {/* Dashboard Template Routes */}
         <Route path="/dashboard/*" element={<DashboardLayout />}>
-          {' '}
-          {/* <-- Added /* */}
           {generateRoutes(dashboardSitemap)}
         </Route>
 
         {/* Docs Template Routes */}
         <Route path="/docs/*" element={<DocsLayout />}>
-          {' '}
-          {/* <-- Added /* */}
           {generateRoutes(docsSitemap)}
         </Route>
 
-        {/* --- 2. ADD THE NEW SETTINGS LAYOUT ROUTE --- */}
+        {/* Settings Layout Route */}
         <Route path="/settings/*" element={<SettingsLayout />}>
           {generateRoutes(settingsSitemap)}
         </Route>

package/template/src/blocks/SmartTable.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useMemo } from 'react';
+import { DataTable, Button, Icon, Card, useToast, type ColDef } from '@ramme-io/ui';
+import { getResourceMeta, getMockData } from '../data/mockData';
+import { AutoForm } from '../components/AutoForm';
+// ✅ Import types that now definitely exist
+import { useDataQuery, type FilterOption, type SortOption } from '../hooks/useDataQuery';
+import { useCrudLocalStorage } from '../hooks/useCrudLocalStorage';
+
+interface SmartTableProps {
+  dataId: string;
+  title?: string;
+  initialFilter?: Record<string, any>; 
+  initialSort?: SortOption;
+}
+
+export const SmartTable: React.FC<SmartTableProps> = ({ 
+  dataId, 
+  title,
+  initialFilter, 
+  initialSort 
+}) => {
+  const { addToast } = useToast();
+  
+  // 1. STATE
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10); // Kept as state in case we add a selector later
+  
+  // 2. METADATA
+  const meta = getResourceMeta(dataId);
+
+  // 3. STORAGE LAYER
+  // Seed data if local storage is empty
+  const seedData = useMemo(() => getMockData(dataId) || [], [dataId]);
+  
+  const { 
+    data: rawData, 
+    createItem, 
+    updateItem 
+  } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
+
+  // 4. LOGIC LAYER
+  const activeFilters = useMemo<FilterOption[]>(() => {
+    if (!initialFilter) return [];
+    return Object.entries(initialFilter).map(([key, value]) => ({
+      field: key,
+      operator: 'equals',
+      value
+    }));
+  }, [initialFilter]);
+
+  const { data: processedRows, total, pageCount } = useDataQuery(rawData, {
+    filters: activeFilters,
+    sort: initialSort, // Using the prop directly for now (Fixes 'setSort' unused)
+    page,
+    pageSize
+  });
+
+  // 5. UI STATE
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [currentRecord, setCurrentRecord] = useState<any>(null);
+
+  // 6. COLUMNS
+  const columns = useMemo(() => {
+    if (meta?.fields) {
+      const cols: ColDef[] = meta.fields.map((f: any) => {
+        const colDef: ColDef = {
+          field: f.key,
+          headerName: f.label,
+          filter: true,
+          sortable: true,
+          flex: 1,
+        };
+
+        if (f.key.endsWith('Id')) {
+           const collectionName = f.key.replace('Id', 's'); 
+           const relatedData = getMockData(collectionName);
+           if (relatedData) {
+             colDef.valueFormatter = (params) => {
+               const match = relatedData.find((item: any) => item.id === params.value);
+               return match ? (match.name || match.title || params.value) : params.value;
+             };
+           }
+        }
+
+        if (f.type === 'currency') colDef.valueFormatter = (p: any) => p.value ? `$${p.value}` : '';
+        if (f.type === 'date') colDef.valueFormatter = (p: any) => p.value ? new Date(p.value).toLocaleDateString() : '';
+        
+        if (f.type === 'status') {
+          colDef.cellRenderer = (p: any) => (
+            <span className={`px-2 py-1 rounded-full text-xs font-medium border
+              ${['active', 'paid'].includes(p.value?.toLowerCase()) ? 'bg-green-100 text-green-800 border-green-200' : 
+                ['pending'].includes(p.value?.toLowerCase()) ? 'bg-yellow-100 text-yellow-800 border-yellow-200' : 'bg-slate-100 text-slate-800 border-slate-200'}`}>
+              {p.value}
+            </span>
+          );
+        }
+        return colDef;
+      });
+
+      cols.push({
+        headerName: "Actions",
+        field: "id",
+        width: 100,
+        pinned: 'right',
+        cellRenderer: (params: any) => (
+          <Button variant="ghost" size="sm" onClick={() => { setCurrentRecord(params.data); setIsEditOpen(true); }}>
+            <Icon name="edit-2" className="w-4 h-4 text-slate-500" />
+          </Button>
+        )
+      });
+      return cols;
+    }
+    
+    if (processedRows.length > 0) {
+      return Object.keys(processedRows[0]).map(k => ({ field: k, headerName: k.toUpperCase(), flex: 1 }));
+    }
+    return [];
+  }, [meta, processedRows]);
+
+  const handleSave = (record: any) => {
+    if (record.id && currentRecord?.id) {
+        updateItem(record);
+        addToast('Record updated successfully', 'success');
+    } else {
+        const { id, ...newItem } = record;
+        createItem(newItem);
+        addToast('New record created', 'success');
+    }
+    setIsEditOpen(false);
+  };
+
+  return (
+    <Card className="p-0 overflow-hidden border border-border flex flex-col h-full min-h-[500px]"> 
+      <div className="p-4 border-b border-border flex justify-between items-center bg-muted/20">
+        <div className="flex items-center gap-2">
+          <h3 className="text-lg font-semibold text-foreground">
+            {title || meta?.name || dataId}
+          </h3>
+          <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
+            {total} records
+          </span>
+        </div>
+        <Button size="sm" variant="outline" onClick={() => { setCurrentRecord({}); setIsEditOpen(true); }}>
+          <Icon name="plus" className="mr-2 w-4 h-4" /> Add Item
+        </Button>
+      </div>
+
+      <div className="flex-1 w-full bg-card relative">
+        <DataTable 
+          rowData={processedRows} 
+          columnDefs={columns} 
+          pagination={false} // We handle pagination logic manually below
+        />
+        
+        {/* Pagination Controls */}
+        <div className="p-2 border-t border-border flex justify-between items-center text-sm">
+           <span className="text-muted-foreground">
+             Page {page} of {pageCount || 1}
+           </span>
+           <div className="flex gap-2">
+             <Button 
+               variant="ghost" 
+               size="sm" 
+               disabled={page === 1} 
+               onClick={() => setPage(p => Math.max(1, p - 1))}
+             >
+               Prev
+             </Button>
+             <Button 
+               variant="ghost" 
+               size="sm" 
+               disabled={page >= pageCount} 
+               onClick={() => setPage(p => p + 1)}
+             >
+               Next
+             </Button>
+           </div>
+        </div>
+      </div>
+
+      <AutoForm
+        isOpen={isEditOpen}
+        onClose={() => setIsEditOpen(false)}
+        onSubmit={handleSave}
+        title={meta?.name || 'Item'}
+        fields={meta?.fields || []}
+        initialData={currentRecord}
+      />
+    </Card>
+  );
+};

package/template/src/components/AutoForm.tsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react';
+import { Drawer, FormTemplate, Button, type FormField } from '@ramme-io/ui';
+
+interface AutoFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: any) => void;
+  title: string;
+  fields: any[]; // The raw metadata from app.manifest.ts
+  initialData?: any;
+}
+
+export const AutoForm: React.FC<AutoFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  title,
+  fields,
+  initialData
+}) => {
+  
+  // 1. Safe Data Handling
+  const safeData = initialData || {};
+  const isEditMode = !!safeData.id;
+
+  // 2. Schema-to-UI Mapping Engine
+  const formFields = useMemo<FormField[]>(() => {
+    return fields
+      // 🛑 RULE 1: Hide ID field during creation (System handles it)
+      .filter((f: any) => !(f.key === 'id' && !isEditMode))
+      .map((f: any) => {
+      
+      const isIdField = f.key === 'id';
+
+      // Base Configuration for all fields
+      const baseConfig = {
+        name: f.key,
+        label: f.label,
+        required: f.required,
+        placeholder: f.description || `Enter ${f.label.toLowerCase()}`,
+        // Pre-fill data if editing, or use default from schema
+        value: safeData[f.key] !== undefined ? safeData[f.key] : (f.defaultValue || ''),
+        colSpan: 1,
+        // 🛑 RULE 2: If it's the ID field, force it to be disabled (View Only)
+        disabled: isIdField
+      };
+
+      // Intelligent Type Switching
+      switch (f.type) {
+        case 'number':
+        case 'integer':
+        case 'currency':
+          return { 
+            ...baseConfig, 
+            type: 'number',
+            value: Number(baseConfig.value) || 0 
+          };
+
+        case 'boolean':
+          return { 
+            ...baseConfig, 
+            type: 'toggle', 
+            checked: !!baseConfig.value 
+          };
+
+        case 'date':
+          return { 
+            ...baseConfig, 
+            type: 'datepicker', 
+            value: baseConfig.value ? new Date(baseConfig.value) : null 
+          };
+
+        case 'status':
+          return { 
+            ...baseConfig, 
+            type: 'select', 
+            options: [
+              { value: 'Active', label: 'Active' },
+              { value: 'Pending', label: 'Pending' },
+              { value: 'Inactive', label: 'Inactive' },
+              { value: 'Archived', label: 'Archived' }
+            ]
+          };
+
+        case 'textarea':
+          return { 
+            ...baseConfig, 
+            type: 'textarea', 
+            colSpan: 2 
+          };
+
+        case 'email':
+          return { ...baseConfig, type: 'email' };
+
+        default:
+          return { ...baseConfig, type: 'text' };
+      }
+    });
+  }, [fields, safeData, isEditMode]);
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`${isEditMode ? 'Edit' : 'New'} ${title}`}
+      size="500px"
+    >
+      <div className="p-6">
+        <FormTemplate 
+          fields={formFields} 
+          onSubmit={(formData) => {
+            // Merge original ID to ensure we update the correct record
+            onSubmit({ ...safeData, ...formData }); 
+          }} 
+        >
+            <div className="flex justify-end gap-2 mt-8 pt-4 border-t border-border">
+                <Button variant="outline" onClick={onClose} type="button">
+                  Cancel
+                </Button>
+                <Button type="submit" variant="primary">
+                  {isEditMode ? 'Save Changes' : 'Create Record'}
+                </Button>
+            </div>
+        </FormTemplate>
+      </div>
+    </Drawer>
+  );
+};

package/template/src/components/DynamicBlock.tsx

@@ -1,59 +1,58 @@
 import React from 'react';
 import { getComponent } from '../core/component-registry';
-import { useSignal } from '../hooks/useSignal';
-import { getMockData } from '../data/mockData'; 
+// @ts-ignore
+import { useGeneratedSignals } from '../generated/hooks';
+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 'error': return 'error';        
+    case 'fresh': return 'online';
+    case 'stale': return 'warning';
+    case 'disconnected': return 'offline';
+    case 'error': return 'error';
     default: return 'offline';
   }
 };
 
-interface DynamicBlockProps {
-  block: {
-    id: string;
-    type: string;
-    props: Record<string, any>;
-  };
-}
-
-export const DynamicBlock: React.FC<DynamicBlockProps> = ({ block }) => {
+export const DynamicBlock: React.FC<any> = ({ block }) => {
   const Component = getComponent(block.type);
-  
-  const { signalId, dataId, ...staticProps } = block.props;
-
-  // 2. Resolve Data (Crucial Step)
-  const resolvedData = dataId ? getMockData(dataId) : staticProps.data;
+  const signals = useGeneratedSignals();
 
-  // 3. Signal Wiring (Hooks must run unconditionally)
-  // We pass an empty string if undefined, the hook handles the rest.
-  const signalState = useSignal(signalId || '');
-
-  // 4. Merge Props
-  // We explicitly type this as Record<string, any> so we can inject new props without TS errors
+  const { signalId, dataId, ...staticProps } = block.props;
+  
   const dynamicProps: Record<string, any> = { 
     ...staticProps,
-    data: resolvedData || [], 
+    dataId,
+    signalId 
   };
 
-  // 5. Inject Signal Data (If valid)
-  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
-      }
+  // --- DATA INJECTION ---
+  if (dataId) {
+    const resolvedData = getMockData(dataId);
+    dynamicProps.data = resolvedData || [];
+    dynamicProps.rowData = resolvedData || [];
+  }
+
+  // --- SIGNAL INJECTION ---
+  if (signalId && signals && signalId in signals) {
+    // @ts-ignore
+    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) 
+        ? signalState.value 
+        : signalState;
+
+      const status = (typeof signalState === 'object' && 'status' in signalState)
+        ? signalState.status
+        : 'fresh'; // Default for raw values
+
+      dynamicProps.value = typeof rawValue === 'number' ? rawValue : String(rawValue);
+      dynamicProps.status = mapSignalStatus(status);
+    } else {
+      dynamicProps.status = mapSignalStatus('disconnected');
     }
   }
 

package/template/src/components/dev/GhostOverlay.tsx

@@ -1,49 +1,11 @@
-/**
- * @file GhostOverlay.tsx
- * @repository ramme-app-starter
- * @description
- * A development-mode wrapper that provides "X-Ray vision" into the
- * application's structure.
- *
- * INTENT & PHILOSOPHY:
- * This component embodies the "Glass Box" doctrine of the Ramme Framework.
- * It allows creators to peer behind the "Visual Fidelity" of the prototype
- * and inspect the "Functional Fidelity" underneath.
- *
- * STRATEGIC VALUE:
- * 1. Traceability: It visually links a UI element (e.g., a Gauge) back to
- * its source definition in the manifest (e.g., Signal ID: 'temp_01').
- * 2. Debugging: It helps creators understand layout boundaries (Grid Cells)
- * and data flow without needing browser DevTools.
- * 3. Education: It reinforces the "Architect" mindset by exposing the
- * component hierarchy.
- *
- * USAGE:
- * Wrap any dynamic component in the `Dashboard.tsx` loop with this overlay.
- * It listens to a global `debugMode` state (likely from a store or context)
- * to toggle its visibility.
- */
-
 import React from 'react';
-import { Badge, Icon } from '@ramme-io/ui';
-// We'll need a way to check if we are in "Debug/Ghost" mode.
-// For now, we can pass it as a prop or assume a context hook exists.
-// import { useDevTools } from '../../contexts/DevToolsContext';
+import { Icon } from '@ramme-io/ui';
 
 interface GhostOverlayProps {
-  /** The actual UI component being wrapped (e.g., DeviceCard) */
   children: React.ReactNode;
-  
-  /** The unique ID of the component from the manifest */
   componentId: string;
-  
-  /** The name of the React component being rendered (e.g., "StatCard") */
   componentType: string;
-  
-  /** (Optional) The ID of the data signal driving this component */
   signalId?: string;
-  
-  /** Whether the overlay is currently active (X-Ray Mode on) */
   isActive?: boolean;
 }
 
@@ -52,48 +14,53 @@ export const GhostOverlay: React.FC<GhostOverlayProps> = ({
   componentId,
   componentType,
   signalId,
-  isActive = false, // Default to off
+  isActive = false,
 }) => {
   
   if (!isActive) {
     return <>{children}</>;
   }
 
+  const handleClick = (e: React.MouseEvent) => {
+    // 🛑 Stop the click from triggering app logic (like navigation or toggles)
+    e.preventDefault();
+    e.stopPropagation();
+
+    // 🚀 THE GHOST BRIDGE: Signal the Parent (The Builder)
+    window.parent.postMessage({
+      type: 'RAMME_SELECT_BLOCK',
+      payload: { blockId: componentId }
+    }, '*');
+  };
+
   return (
-    <div className="relative group">
-      {/* The "Ghost" Border 
-        - dashed: indicates scaffolding/structure
-        - accent color: differentiates dev tools from UI
-      */}
-      <div className="absolute inset-0 z-50 pointer-events-none border-2 border-dashed border-accent/50 rounded-lg bg-accent/5 group-hover:bg-accent/10 transition-colors" />
+    <div 
+      className="relative group cursor-pointer"
+      onClick={handleClick} // ✅ Add Click Handler
+    >
+      {/* The "Ghost" Border */}
+      <div className="absolute inset-0 z-50 border-2 border-dashed border-accent/50 rounded-lg bg-accent/5 group-hover:bg-accent/10 transition-colors pointer-events-none" />
 
-      {/* The "Info Tag" 
-        - Floats top-left
-        - Displays the technical 'bones' of the component
-      */}
-      <div className="absolute top-0 left-0 z-50 p-2 transform -translate-y-1/2 translate-x-2">
+      {/* The "Info Tag" */}
+      <div className="absolute top-0 left-0 z-50 p-2 transform -translate-y-1/2 translate-x-2 pointer-events-none">
         <div className="flex items-center gap-2 bg-accent text-accent-foreground text-xs font-mono py-1 px-2 rounded shadow-sm">
           <Icon name="box" size={12} />
           <span className="font-bold">{componentType}</span>
-          <span className="opacity-75">#{componentId}</span>
         </div>
       </div>
 
-      {/* The "Signal Wire" 
-        - Floats bottom-right if a signal is connected
-        - Shows the data source wiring
-      */}
+      {/* The "Signal Wire" */}
       {signalId && (
-        <div className="absolute bottom-0 right-0 z-50 p-2 transform translate-y-1/2 -translate-x-2">
+        <div className="absolute bottom-0 right-0 z-50 p-2 transform translate-y-1/2 -translate-x-2 pointer-events-none">
            <div className="flex items-center gap-1.5 bg-blue-600 text-white text-xs font-mono py-1 px-2 rounded shadow-sm">
             <Icon name="activity" size={12} />
-            <span>Signal: {signalId}</span>
+            <span>{signalId}</span>
           </div>
         </div>
       )}
 
       {/* Render the actual component underneath */}
-      <div className="opacity-50 grayscale transition-all duration-200 group-hover:opacity-75 group-hover:grayscale-0">
+      <div className="opacity-50 grayscale transition-all duration-200 group-hover:opacity-75 group-hover:grayscale-0 pointer-events-none">
         {children}
       </div>
     </div>