@ramme-io/create-app 1.1.9 → 1.2.1

package/template/src/pages/DynamicPage.tsx

@@ -1,24 +1,28 @@
 import React from 'react';
-import { PageHeader, Alert } from '@ramme-io/ui';
+import { PageHeader, Alert, Button, Icon } from '@ramme-io/ui';
 import { appManifest } from '../config/app.manifest';
-import { getComponent } from '../core/component-registry';
 // Reuse the GhostOverlay for structure visualization
 import { GhostOverlay } from '../components/dev/GhostOverlay';
-// Import the component that renders a single block (you likely have this extracted from Dashboard.tsx)
+// Import the Worker Bee
 import { DynamicBlock } from '../components/DynamicBlock';
+// Import the Hook to control the overlay
+import { useDevTools } from '../hooks/useDevTools';
 
 interface DynamicPageProps {
   pageId: string;
 }
 
-const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
-  // 1. Look up the page definition in the manifest
-  const pageConfig = appManifest.pages?.find((p: { id: string; }) => p.id === pageId);
+export const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
+  // 1. Initialize DevTools
+  const { isGhostMode, toggleGhostMode } = useDevTools();
+
+  // 2. Look up the page definition
+  const pageConfig = (appManifest as any).pages?.find((p: any) => p.id === pageId);
 
   if (!pageConfig) {
     return (
       <div className="p-8">
-        <Alert variant="danger" title="404: Page Definition Not Found">
+        <Alert variant="danger" title="Page Not Found">
           The manifest does not contain a page with ID: <code>{pageId}</code>.
         </Alert>
       </div>
@@ -26,33 +30,61 @@ const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
   }
 
   return (
-    <div className="space-y-8 fade-in">
+    <div className="space-y-8 fade-in p-6">
       <PageHeader 
         title={pageConfig.title} 
-        description={pageConfig.description} 
+        description={pageConfig.description}
+        actions={
+          <Button 
+            variant={isGhostMode ? 'accent' : 'outline'} 
+            size="sm"
+            onClick={toggleGhostMode}
+            title="Toggle Ghost Mode (Ctrl+Shift+G)"
+          >
+            <Icon name={isGhostMode ? 'eye' : 'eye-off'} className="mr-2" />
+            {isGhostMode ? 'Ghost Mode: ON' : 'Dev Tools'}
+          </Button>
+        }
       />
 
-      {/* Render Sections */}
-      {pageConfig.sections.map((section: { id: React.Key | null | undefined; title: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined; layout: { columns: any; }; blocks: any[]; }) => (
+      {/* 4. Render Sections */}
+      {pageConfig.sections.map((section: any) => (
         <div key={section.id} className="space-y-4">
           {section.title && <h3 className="text-xl font-semibold">{section.title}</h3>}
           
           <div 
             className="grid gap-6"
             style={{ 
-              gridTemplateColumns: `repeat(${section.layout?.columns || 3}, minmax(300px, 1fr))` 
+              // ⚡️ IMPROVEMENT: Default to 1 column (Full Width) instead of 3.
+              // This fixes the "narrow table" issue immediately.
+              gridTemplateColumns: `repeat(${section.layout?.columns || 1}, minmax(0, 1fr))` 
             }}
           >
-            {section.blocks.map(block => (
-               <GhostOverlay 
-                 key={block.id} 
-                 componentId={block.id} 
-                 componentType={block.type}
-                 signalId={block.props.signalId}
-               >
-                 <DynamicBlock block={block} />
-               </GhostOverlay>
-            ))}
+            {section.blocks.map((block: any) => {
+              // ⚡️ IMPROVEMENT: Calculate Spanning
+              // Allows a block to stretch across multiple columns if needed.
+              const colSpan = block.layout?.colSpan || 1;
+              const rowSpan = block.layout?.rowSpan || 1;
+
+              return (
+                <div 
+                  key={block.id}
+                  style={{ 
+                    gridColumn: `span ${colSpan}`,
+                    gridRow: `span ${rowSpan}`
+                  }}
+                >
+                   <GhostOverlay 
+                     isActive={isGhostMode}
+                     componentId={block.id} 
+                     componentType={block.type}
+                     signalId={block.props.signalId}
+                   >
+                     <DynamicBlock block={block} />
+                   </GhostOverlay>
+                </div>
+              );
+            })}
           </div>
         </div>
       ))}

package/template/src/pages/Welcome.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  PageHeader, 
+  Card, 
+  Button, 
+  Icon, 
+  Badge,
+  SectionHeader 
+} from '@ramme-io/ui';
+
+const Welcome: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      
+      {/* HERO */}
+      <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-primary to-violet-600 text-primary-foreground p-8 md:p-12">
+        <div className="relative z-10 max-w-2xl">
+          <Badge variant="secondary" className="mb-4 bg-white/20 text-white border-none backdrop-blur-sm">
+            v1.2.0 Starter Kit
+          </Badge>
+          <h1 className="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight">
+            Your Ramme App is Ready.
+          </h1>
+          <p className="text-lg md:text-xl text-primary-foreground/90 mb-8 leading-relaxed">
+            You have successfully scaffolded a production-ready prototype environment. 
+            This kit comes pre-wired with Authentication, Mock Data, and the A.D.A.P.T. architecture.
+          </p>
+          <div className="flex flex-wrap gap-4">
+            <Button 
+              size="lg" 
+              variant="secondary" 
+              className="font-semibold"
+              iconLeft="layout-dashboard"
+              onClick={() => navigate('/dashboard/app')}
+            >
+              Open Live Dashboard
+            </Button>
+            <Button 
+              size="lg" 
+              variant="outline" 
+              className="bg-transparent border-white/30 text-white hover:bg-white/10 hover:text-white"
+              iconLeft="book-open"
+              onClick={() => navigate('/docs')}
+            >
+              Read Documentation
+            </Button>
+          </div>
+        </div>
+        
+        {/* Decorative Background Icon */}
+        <div className="absolute -right-10 -bottom-10 opacity-10 rotate-12">
+          <Icon name="box" size={300} />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        
+        {/* SECTION 1: ARCHITECTURE */}
+        <div className="space-y-4">
+          <SectionHeader title="Project Architecture" />
+          <div className="grid gap-4">
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 h-fit">
+                <Icon name="database" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Data Lake</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Mock data is seeded into <code>localStorage</code> on boot. 
+                  Edit <code>src/data/mockData.ts</code> to change the schema.
+                </p>
+              </div>
+            </Card>
+
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400 h-fit">
+                <Icon name="git-branch" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Logic Engine</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Workflows and signals are processed in real-time by 
+                  <code>useWorkflowEngine.ts</code>. Supports MQTT and simulated sensors.
+                </p>
+              </div>
+            </Card>
+
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 h-fit">
+                <Icon name="layout" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Dynamic Routing</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Pages are generated from <code>app.manifest.ts</code>. 
+                  Visual blocks connect automatically to data sources.
+                </p>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        {/* SECTION 2: RESOURCES */}
+        <div className="space-y-4">
+          <SectionHeader title="Developer Resources" />
+          
+          <Card className="p-6 space-y-6">
+            <div>
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="palette" size={16} className="text-muted-foreground" />
+                Component Library
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Browse the full suite of accessible UI components available in this project.
+              </p>
+              <Button variant="outline" size="sm" onClick={() => navigate('/styleguide')}>
+                View Style Guide
+              </Button>
+            </div>
+
+            <div className="border-t border-border pt-6">
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="settings" size={16} className="text-muted-foreground" />
+                Configuration
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Manage global settings, user profile templates, and billing layouts.
+              </p>
+              <Button variant="outline" size="sm" onClick={() => navigate('/settings')}>
+                Open Settings
+              </Button>
+            </div>
+
+            <div className="border-t border-border pt-6">
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="github" size={16} className="text-muted-foreground" />
+                Community
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Need help? Check the docs or open an issue on GitHub.
+              </p>
+              <a 
+                href="https://github.com/ramme-io/create-app" 
+                target="_blank" 
+                rel="noreferrer"
+                className="inline-flex"
+              >
+                <Button variant="ghost" size="sm">GitHub Repo &rarr;</Button>
+              </a>
+            </div>
+          </Card>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;

package/template/src/templates/dashboard/DashboardLayout.tsx

@@ -18,6 +18,7 @@ import { SitemapProvider } from '../../contexts/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';
 import AppHeader from '../../components/AppHeader';
 import { AIChatWidget } from '../../components/AIChatWidget'; // <-- NEW: Import Widget
+import { useWorkflowEngine } from '../../hooks/useWorkflowEngine';
 
 // NavLink wrapper - Correct
 const SidebarNavLink = React.forwardRef<HTMLAnchorElement, any>(
@@ -87,6 +88,7 @@ const AppSidebarContent: React.FC = () => {
 const DashboardLayout: React.FC = () => {
   // 1. STATE: Track if the chat window is open
   const [isChatOpen, setIsChatOpen] = useState(false);
+  useWorkflowEngine();
 
   return (
     <SitemapProvider value={dashboardSitemap}>

package/template/src/templates/dashboard/dashboard.sitemap.ts

@@ -1,83 +1,44 @@
 import { type SitemapEntry } from '../../core/sitemap-entry';
-
-// Component Imports
+import { appManifest } from '../../config/app.manifest';
 import Dashboard from '../../pages/Dashboard';
 import AiChat from '../../pages/AiChat';
-import DataGridPage from '../../pages/DataGridPage';
-import Styleguide from '../../pages/styleguide/Styleguide';
-import DataLayout from '../../layouts/DataLayout';
-
-// Style Guide Section Imports
-import TemplatesSection from '../../pages/styleguide/sections/templates/TemplatesSection';
-import LayoutSection from '../../pages/styleguide/sections/layout/LayoutSection';
-import ThemingSection from '../../pages/styleguide/sections/theming/ThemingSection';
-import NavigationSection from '../../pages/styleguide/sections/navigation/NavigationSection';
-import TablesSection from '../../pages/styleguide/sections/tables/TablesSection';
-import ChartsSection from '../../pages/styleguide/sections/charts/ChartsSection';
-import ElementsSection from '../../pages/styleguide/sections/elements/ElementsSection';
-import FormsSection from '../../pages/styleguide/sections/forms/FormsSection';
-import FeedbackSection from '../../pages/styleguide/sections/feedback/FeedbackSection';
-import UtilitiesSection from '../../pages/styleguide/sections/utilities/UtilitiesSection';
-import ColorsSection from '../../pages/styleguide/sections/colors/ColorsSection';
-import IconsSection from '../../pages/styleguide/sections/icons/IconsSection';
-
-// --- ADD THIS IMPORT ---
-import ItemSelectorPage from '../../pages/prototypes/ItemSelectorPage';
-
+import Welcome from '../../pages/Welcome'; // ✅ Import the new page
 
 export const dashboardSitemap: SitemapEntry[] = [
+  // ✅ 1. The New Landing Page
   {
-    id: 'dashboard',
-    path: '',
-    title: 'Home Overview',
-    icon: 'layout-dashboard',
-    component: Dashboard,
+    id: 'welcome',
+    path: 'welcome',
+    title: 'Start Here',
+    icon: 'rocket',
+    component: Welcome,
   },
-  
-    // --- ADD THIS NEW SITEMAP ENTRY ---
-  {
-    id: 'entity-selector-prototype',
-    path: 'prototypes/entity-selector',
-    title: 'Entity Prototype',
-    icon: 'beaker',
-    component: ItemSelectorPage,
-  },
-  {
+];
+
+// A. Dynamic Pages from Manifest
+if (appManifest.pages) {
+  appManifest.pages.forEach(page => {
+    const isDashboard = page.slug === 'dashboard';
+    
+    dashboardSitemap.push({
+      id: page.id,
+      title: page.title,
+      // ✅ FIX: Map the main dashboard to 'app' instead of root ''
+      // This prevents conflict with the layout root
+      path: isDashboard ? 'app' : page.slug,
+      icon: isDashboard ? 'layout-dashboard' : 'file-text',
+      component: Dashboard,
+    });
+  });
+}
+
+// B. Dynamic Modules
+if (appManifest.modules?.includes('ai-chat')) {
+  dashboardSitemap.push({
     id: 'ai-chat',
     path: 'ai-chat',
-    title: 'AI Chat',
+    title: 'AI Assistant',
     icon: 'bot',
     component: AiChat,
-  },
-  {
-    id: 'data',
-    path: 'data',
-    title: 'Data',
-    icon: 'database',
-    component: DataLayout,
-    children: [
-      { id: 'users', path: 'users', title: 'Users', component: DataGridPage, icon: 'table' }
-    ],
-  },
-  {
-    id: 'styleguide',
-    path: 'styleguide',
-    title: 'Style Guide',
-    icon: 'palette',
-    component: Styleguide,
-    children: [
-        { id: 'templates', path: 'templates', title: 'Templates', component: TemplatesSection },
-        { id: 'layout', path: 'layout', title: 'Layout', component: LayoutSection },
-        { id: 'theming', path: 'theming', title: 'Theming', component: ThemingSection },
-        { id: 'navigation', path: 'navigation', title: 'Navigation', component: NavigationSection },
-        { id: 'tables', path: 'tables', title: 'Tables', component: TablesSection },
-        { id: 'charts', path: 'charts', title: 'Charts', component: ChartsSection },
-        { id: 'elements', path: 'elements', title: 'Elements', component: ElementsSection },
-        { id: 'forms', path: 'forms', title: 'Forms', component: FormsSection },
-        { id: 'feedback', path: 'feedback', title: 'Feedback', component: FeedbackSection },
-        { id: 'utilities', path: 'utilities', title: 'Utilities', component: UtilitiesSection },
-        { id: 'colors', path: 'colors', title: 'Colors', component: ColorsSection },
-        { id: 'icons', path: 'icons', title: 'Icons', component: IconsSection },
-    ],
-  },
-];
+  });
+}

package/template/src/types/schema.ts

@@ -1,67 +1,146 @@
 import { z } from 'zod';
 
 // ------------------------------------------------------------------
-// 1. Signal Schema
+// 1. DATA RESOURCE DEFINITIONS (SaaS Layer)
 // ------------------------------------------------------------------
+
+export const FieldSchema = z.object({
+  key: z.string(),
+  label: z.string(),
+  type: z.enum(['text', 'number', 'currency', 'date', 'boolean', 'status', 'email', 'image', 'textarea']),
+  required: z.boolean().optional(),
+  description: z.string().optional(),
+  defaultValue: z.any().optional(),
+});
+export type FieldDefinition = z.infer<typeof FieldSchema>;
+
+export const ResourceSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  fields: z.array(FieldSchema),
+  defaultView: z.enum(['table', 'grid', 'list']).optional(),
+  features: z.object({
+    searchable: z.boolean().optional(),
+    creatable: z.boolean().optional(),
+    editable: z.boolean().optional(),
+    deletable: z.boolean().optional(),
+    exportable: z.boolean().optional(),
+  }).optional(),
+});
+export type ResourceDefinition = z.infer<typeof ResourceSchema>;
+
+
+// ------------------------------------------------------------------
+// 2. SIGNAL & IOT DEFINITIONS (Physical Layer)
+// ------------------------------------------------------------------
+
 export const SignalSchema = z.object({
   id: z.string().min(1, "Signal ID is required"),
   label: z.string(),
   description: z.string().optional(),
-  
-  // Classification
   kind: z.enum(['sensor', 'actuator', 'setpoint', 'metric', 'status', 'kpi']),
-  
-  // Data Source Configuration
   source: z.enum(['mock', 'mqtt', 'http', 'derived', 'local']),
   
-  // Protocol-Specific Config 
-  topic: z.string().optional(),      // For MQTT
-  endpoint: z.string().optional(),   // For HTTP
-  jsonPath: z.string().optional(),   // For parsing nested API responses
+  // Connectivity
+  topic: z.string().optional(),      
+  endpoint: z.string().optional(),   
+  jsonPath: z.string().optional(),   
   refreshRate: z.number().optional().default(1000), 
   
-  // Value Configuration
+  // Values
   defaultValue: z.any().optional(),
   unit: z.string().optional(),       
-  
-  // Validation
   min: z.number().optional(),
   max: z.number().optional(),
 });
-
 export type SignalDefinition = z.infer<typeof SignalSchema>;
 
-
-// ------------------------------------------------------------------
-// 2. Entity Schema
-// ------------------------------------------------------------------
 export const EntitySchema = z.object({
   id: z.string(),
   name: z.string(),
   description: z.string().optional(),
-  
-  // Taxonomy
   type: z.string(), 
   category: z.string().default('logical'), 
-
-  // Linkage
   signals: z.array(z.string()), 
-  
-  // UI Hints
   ui: z.object({
     icon: z.string().optional(), 
     color: z.string().optional(),
     dashboardComponent: z.string().optional(),
   }).optional(),
 });
-
-// <--- THIS WAS MISSING
 export type EntityDefinition = z.infer<typeof EntitySchema>;
 
+// ------------------------------------------------------------------
+// ✅ NEW: LOGIC & WORKFLOW DEFINITIONS
+// ------------------------------------------------------------------
+
+export const TriggerSchema = z.object({
+  id: z.string(),
+  type: z.enum(['signal_change', 'manual_action', 'schedule', 'webhook']),
+  config: z.record(z.string(), z.any()), 
+});
+
+export const ActionSchema = z.object({
+  id: z.string(),
+  type: z.enum([
+    'update_resource', 
+    'send_notification', 
+    'mqtt_publish', 
+    'api_call', 
+    'navigate', 
+    'agent_task'
+  ]),
+  config: z.record(z.string(), z.any()),
+});
+
+export const WorkflowSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  active: z.boolean().default(true),
+  trigger: TriggerSchema,
+  actions: z.array(ActionSchema),
+});
+export type WorkflowDefinition = z.infer<typeof WorkflowSchema>;
+export type ActionDefinition = z.infer<typeof ActionSchema>;
+
 
 // ------------------------------------------------------------------
-// 3. App Specification (The Root Object)
+// 3. UI LAYOUT DEFINITIONS (Presentation Layer)
 // ------------------------------------------------------------------
+
+export const BlockSchema = z.object({
+  id: z.string(),
+  type: z.string(),
+  props: z.record(z.string(), z.any()), 
+  layout: z.object({
+    colSpan: z.number().optional(),
+    rowSpan: z.number().optional(),
+  }).optional(),
+});
+
+export const PageSectionSchema = z.object({
+  id: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  layout: z.object({ 
+    columns: z.number().optional(), 
+    variant: z.enum(['grid', 'stack', 'split']).optional() 
+  }).optional(),
+  blocks: z.array(BlockSchema),
+});
+
+export const PageSchema = z.object({
+  id: z.string(),
+  slug: z.string(),
+  title: z.string(),
+  description: z.string().optional(),
+  icon: z.string().optional(),
+  sections: z.array(PageSectionSchema),
+});
+export type PageDefinition = z.infer<typeof PageSchema>;
+
+
+// MASTER APP SPECIFICATION
 export const AppSpecificationSchema = z.object({
   meta: z.object({
     name: z.string(),
@@ -71,15 +150,23 @@ export const AppSpecificationSchema = z.object({
     createdAt: z.string().optional(),
   }),
   
+  config: z.object({
+    theme: z.enum(['light', 'dark', 'system', 'corporate', 'midnight', 'blueprint']).default('system'),
+    mockMode: z.boolean().default(true),
+    brokerUrl: z.string().optional(),
+  }),
+
+  modules: z.array(z.string()).optional(),
+  resources: z.array(ResourceSchema).optional(),
+  
   domain: z.object({
     signals: z.array(SignalSchema),
     entities: z.array(EntitySchema),
+    // ✅ ADDED WORKFLOWS HERE
+    workflows: z.array(WorkflowSchema).optional(),
   }),
 
-  config: z.object({
-    theme: z.enum(['light', 'dark', 'system', 'corporate', 'midnight', 'blueprint']).default('system'),
-    mockMode: z.boolean().default(true), 
-  }),
+  pages: z.array(PageSchema).optional(),
 });
 
 export type AppSpecification = z.infer<typeof AppSpecificationSchema>;