@ramme-io/create-app 1.1.9 → 1.2.1

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>

package/template/src/config/app.manifest.ts

@@ -2,55 +2,55 @@ import type { AppSpecification } from '../types/schema';
 
 export const appManifest: AppSpecification = {
   meta: {
-    name: "Acme Corp Admin",
-    version: "2.0.0",
-    description: "Executive overview of KPI metrics.",
-    author: "Ramme Builder"
+    name: "Ramme System Check",
+    version: "1.0.0",
+    description: "Verifying the Smart Runtime.",
+    author: "Ramme Builder",
   },
   config: {
-    theme: 'corporate', // <--- Switches the visual theme automatically
-    mockMode: false     // <--- Critical: Tells the Adapter Factory to use REAL code (HTTP/MQTT)
+    theme: 'system',
+    mockMode: false,
+    brokerUrl: 'wss://test.mosquitto.org:8081',
   },
-  domain: {
-    signals: [
-      {
-        id: "mrr_stripe",
-        label: "Monthly Revenue",
-        kind: "metric",
-        source: "http", // <--- This triggers your new generateHttpImplementation()
-        endpoint: "/api_mock.json",
-        unit: "USD",
-        defaultValue: 0,
-        refreshRate: 0
-      },
-      {
-        id: "active_users",
-        label: "Active Users",
-        kind: "metric",
-        source: "http",
-        endpoint: "/api_mock.json",
-        unit: "",
-        defaultValue: 0,
-        refreshRate: 0
-      }
-    ],
-    entities: [
-      {
-        id: "widget_mrr",
-        name: "Current MRR",
-        type: "kpi",
-        signals: ["mrr_stripe"],
-        ui: { dashboardComponent: "StatCard", icon: "dollar-sign" },
-        category: ''
-      },
-      {
-        id: "widget_users",
-        name: "Total Users",
-        type: "kpi",
-        signals: ["active_users"],
-        ui: { dashboardComponent: "StatCard", icon: "users" },
-        category: ''
-      }
-    ]
-  }
+  domain: { signals: [], entities: [] },
+  pages: [
+    {
+      id: "dashboard",
+      slug: "dashboard",
+      title: "System Status",
+      description: "Verifying Week 1 Logic Engine",
+      sections: [
+        {
+          id: "sect-users",
+          title: "User Management (CRUD Test)",
+          layout: { columns: 1 },
+          blocks: [
+            {
+              id: "table_users",
+              type: "SmartTable",
+              props: {
+                title: "Active Users",
+                dataId: "users" // ✅ Points to SEED_USERS
+              }
+            }
+          ]
+        },
+        {
+          id: "sect-invoices",
+          title: "Invoices (Relational Test)",
+          layout: { columns: 1 },
+          blocks: [
+            {
+              id: "table_invoices",
+              type: "SmartTable",
+              props: {
+                title: "Recent Invoices",
+                dataId: "invoices" // ✅ Points to SEED_INVOICES
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
 };

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

@@ -5,65 +5,45 @@ import {
   BarChart,
   LineChart,
   PieChart,
-  DataTable,
+  DataTable, 
   Card,
   Alert,
   EmptyState,
+  ToggleSwitch
 } from '@ramme-io/ui';
 
-/**
- * The Registry maps the "string" name of a component (from the JSON manifest)
- * to the actual React component implementation.
- */
+// ✅ IMPORT YOUR CUSTOM COMPONENT
+import { SmartTable } from '../blocks/SmartTable';
+
 export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
-  // --- Core Components ---
+  // IoT Primitives
   DeviceCard,
+  
+  // Data Display
   StatCard,
   BarChart,
   LineChart,
   PieChart,
-  DataTable,
+  
+  // 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,
-
-  // --- 🛡️ ROBUSTNESS ALIASES ---
-  // These mappings allow the manifest to use lowercase or alternate names
-  // without crashing the application.
   
-  // Tables
-  'table': DataTable,       // Fixes your specific error
-  'Table': DataTable,
-  'grid': DataTable,
-
-  // Charts
-  'chart': BarChart,        // Default generic chart to BarChart
-  'line': LineChart,
-  'bar': BarChart,
-  'pie': PieChart,
-
-  // IoT Fallbacks
-  'DataCard': DeviceCard,
-  'GaugeCard': DeviceCard,
-  'ToggleCard': DeviceCard,
-  'SliderCard': DeviceCard,
-  'SparklineCard': DeviceCard,
+  // Forms/Controls
+  ToggleSwitch
 };
 
-/**
- * Helper to safely resolve a component.
- * Returns a fallback if the component name is unknown.
- */
 export const getComponent = (name: string) => {
-  // 1. Try direct lookup
-  let Component = COMPONENT_REGISTRY[name];
-
-  // 2. If not found, try PascalCase (e.g. "deviceCard" -> "DeviceCard")
-  if (!Component) {
-    const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
-    Component = COMPONENT_REGISTRY[pascalName];
-  }
-
+  const Component = COMPONENT_REGISTRY[name];
+  
   if (!Component) {
     console.warn(`[Registry] Unknown component type: "${name}"`);
     return () => (

package/template/src/core/data-seeder.ts

@@ -0,0 +1,35 @@
+// ✅ Match the export from your new mockData.ts
+import { DATA_REGISTRY } from '../data/mockData'; 
+
+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]) => {
+    const storageKey = `${DB_PREFIX}${key}`;
+    const existing = localStorage.getItem(storageKey);
+
+    if (!existing) {
+      console.log(`✨ Seeding collection: ${key} (${seedData.length} records)`);
+      localStorage.setItem(storageKey, JSON.stringify(seedData));
+    } else {
+      console.log(`✅ Collection exists: ${key}`);
+    }
+  });
+
+  console.groupEnd();
+};
+
+/**
+ * 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}`);
+  });
+  window.location.reload();
+};

package/template/src/data/mockData.ts

@@ -1,43 +1,172 @@
-// src/data/mockData.ts
-
-// --- 1. Your Existing Examples ---
-export const mockChartData = [
-  { name: 'Jan', uv: 400, pv: 240 },
-  { name: 'Feb', uv: 300, pv: 139 },
-  { name: 'Mar', uv: 200, pv: 980 },
-  { name: 'Apr', uv: 278, pv: 390 },
-  { name: 'May', uv: 189, pv: 480 },
-  { name: 'Jun', uv: 239, pv: 380 },
-  { name: 'Jul', uv: 349, pv: 430 },
+/**
+ * @file src/data/mockData.ts
+ * @description The "Golden Copy" of seed data. 
+ * These records are injected into localStorage when the app first launches.
+ */
+
+// ✅ 1. Interface for the Metadata (Schema)
+export interface ResourceMeta {
+  name: string;
+  fields: {
+    key: string;
+    label: string;
+    type: string;
+    required?: boolean;
+    defaultValue?: any;
+    description?: string;
+  }[];
+}
+
+// --- DATA INTERFACES ---
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'editor' | 'viewer';
+  status: 'active' | 'pending' | 'banned';
+  avatar?: string;
+  joinedAt: string;
+}
+
+export interface Product {
+  id: string;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+  status: 'in_stock' | 'low_stock' | 'out_of_stock';
+}
+
+export interface Invoice {
+  id: string;
+  userId: string; // Foreign Key -> User
+  amount: number;
+  status: 'paid' | 'pending' | 'overdue';
+  date: string;
+}
+
+export interface Review {
+  id: string;
+  productId: string; // Foreign Key -> Product
+  rating: number;
+  comment: string;
+  author: string;
+  date: string;
+}
+
+export interface ActivityLog {
+  id: string;
+  action: string;
+  entity: string;
+  timestamp: string;
+  user: string;
+}
+
+// --- SEED DATA ---
+
+export const SEED_USERS: User[] = [
+  { id: 'usr_1', name: 'Alex Carter', email: 'alex@example.com', role: 'admin', status: 'active', joinedAt: '2023-01-15' },
+  { id: 'usr_2', name: 'Sarah Jenkins', email: 'sarah@example.com', role: 'editor', status: 'active', joinedAt: '2023-03-22' },
+  { id: 'usr_3', name: 'Mike Ross', email: 'mike@example.com', role: 'viewer', status: 'pending', joinedAt: '2023-05-10' },
+  { id: 'usr_4', name: 'Emily Blunt', email: 'emily@example.com', role: 'editor', status: 'banned', joinedAt: '2023-06-01' },
 ];
 
-export const mockTableData = [
-  { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
-  { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
-  { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
-  { make: 'Mercedes', model: 'EQS', price: 102310, electric: true },
-  { make: 'BMW', model: 'i4', price: 51400, electric: true },
+export const SEED_PRODUCTS: Product[] = [
+  { id: 'prod_1', name: 'ErgoChair Pro', category: 'Furniture', price: 450, stock: 12, status: 'in_stock' },
+  { id: 'prod_2', name: 'Standing Desk', category: 'Furniture', price: 600, stock: 3, status: 'low_stock' },
+  { id: 'prod_3', name: 'Monitor Arm', category: 'Accessories', price: 120, stock: 0, status: 'out_of_stock' },
+  { id: 'prod_4', name: 'Mechanical Keyboard', category: 'Electronics', price: 180, stock: 25, status: 'in_stock' },
 ];
 
-// 2. FIXED: Energy Data (Recharts Format)
-// Recharts expects an Array of Objects, NOT { labels, datasets }
-export const energyHistoryData = [
-  { time: "12am", value: 12 },
-  { time: "4am", value: 19 },
-  { time: "8am", value: 3 },
-  { time: "12pm", value: 5 },
-  { time: "4pm", value: 2 },
-  { time: "8pm", value: 3 }
+export const SEED_INVOICES: Invoice[] = [
+  { id: 'inv_001', userId: 'usr_2', amount: 450.00, status: 'paid', date: '2023-10-01' },
+  { id: 'inv_002', userId: 'usr_1', amount: 1200.50, status: 'pending', date: '2023-10-05' },
+  { id: 'inv_003', userId: 'usr_3', amount: 180.00, status: 'overdue', date: '2023-09-15' },
+  { id: 'inv_004', userId: 'usr_2', amount: 600.00, status: 'paid', date: '2023-10-10' },
 ];
 
-// --- 3. The Lookup Registry ---
-// This allows the Manifest to refer to data by string ID.
-export const MOCK_DATA_REGISTRY: Record<string, any> = {
-  'energy_history': energyHistoryData,
-  'demo_chart': mockChartData,
-  'demo_cars': mockTableData
+export const SEED_REVIEWS: Review[] = [
+  { id: 'rev_1', productId: 'prod_1', rating: 5, comment: 'Life changing comfort!', author: 'Alex Carter', date: '2023-09-01' },
+  { id: 'rev_2', productId: 'prod_4', rating: 4, comment: 'Clicky but loud.', author: 'Mike Ross', date: '2023-09-10' },
+  { id: 'rev_3', productId: 'prod_2', rating: 2, comment: 'Wobbles at max height.', author: 'Sarah Jenkins', date: '2023-09-12' },
+];
+
+export const SEED_LOGS: ActivityLog[] = [
+  { id: 'log_1', action: 'User Created', entity: 'User', user: 'System', timestamp: '2023-10-01T10:00:00Z' },
+  { id: 'log_2', action: 'Invoice Paid', entity: 'Invoice', user: 'Alex Carter', timestamp: '2023-10-02T14:30:00Z' },
+  { id: 'log_3', action: 'Stock Updated', entity: 'Product', user: 'Sarah Jenkins', timestamp: '2023-10-03T09:15:00Z' },
+];
+
+// --- REGISTRIES ---
+
+// 1. Data Registry (The Records)
+export const DATA_REGISTRY: Record<string, any[]> = {
+  users: SEED_USERS,
+  products: SEED_PRODUCTS,
+  invoices: SEED_INVOICES,
+  reviews: SEED_REVIEWS,
+  logs: SEED_LOGS,
 };
 
-export const getMockData = (id: string) => {
-  return MOCK_DATA_REGISTRY[id] || null;
+// 2. Metadata Registry (The Schema/Definitions)
+export const RESOURCE_METADATA: Record<string, ResourceMeta> = {
+  users: {
+    name: 'Users',
+    fields: [
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'email', label: 'Email', type: 'email', required: true },
+      { key: 'role', label: 'Role', type: 'status' },
+      { key: 'status', label: 'Status', type: 'status' },
+      { key: 'joinedAt', label: 'Joined', type: 'date' },
+    ]
+  },
+  products: {
+    name: 'Products',
+    fields: [
+      { key: 'name', label: 'Product Name', type: 'text', required: true },
+      { key: 'category', label: 'Category', type: 'text' },
+      { key: 'price', label: 'Price', type: 'currency' },
+      { key: 'stock', label: 'Stock', type: 'number' },
+      { key: 'status', label: 'Availability', type: 'status' },
+    ]
+  },
+  invoices: {
+    name: 'Invoices',
+    fields: [
+      // ✅ FIX: Changed label from 'User ID' to 'User'
+      { key: 'userId', label: 'User', type: 'text', required: true },
+      { key: 'amount', label: 'Amount', type: 'currency' },
+      { key: 'status', label: 'Status', type: 'status' },
+      { key: 'date', label: 'Date', type: 'date' },
+    ]
+  },
+  reviews: {
+    name: 'Reviews',
+    fields: [
+      // ✅ FIX: Changed label from 'Product ID' to 'Product'
+      { key: 'productId', label: 'Product', type: 'text' },
+      { key: 'rating', label: 'Rating', type: 'number' },
+      { key: 'comment', label: 'Comment', type: 'text' },
+      { key: 'author', label: 'Author', type: 'text' },
+    ]
+  },
+  logs: {
+    name: 'Activity Logs',
+    fields: [
+      { key: 'action', label: 'Action', type: 'text' },
+      { key: 'entity', label: 'Entity', type: 'text' },
+      { key: 'user', label: 'User', type: 'text' },
+      { key: 'timestamp', label: 'Time', type: 'date' },
+    ]
+  }
+};
+
+// --- HELPERS ---
+
+export const getMockData = (id: string) => DATA_REGISTRY[id] || [];
+
+// ✅ Updated to return ResourceMeta or null (instead of never/null)
+export const getResourceMeta = (id: string): ResourceMeta | null => {
+  return RESOURCE_METADATA[id] || null;
 };