Session 19.3: Widget/Component Editing Plan

🎯 Goal

Enable users to modify generated embeddables (UI components) from the AI Platform Generator.

🏗️ Current State

What's Generated

When AI generates a module, it creates:

Module: "Member Management"
├── Entity: Member
├── Actions: CreateMember, UpdateMember, DeleteMember, GetMember, ListMembers
└── Embeddables:
     ├── MemberList (table view)
     ├── MemberCard (card view)
     ├── MemberForm (create/edit form)
     └── MemberDetail (detail view)

Current Limitations

• ❌ Embeddables are generated as code files in modules/business/{module}/src/lib/components/
• ❌ No visual editor for these components
• ❌ Can't modify layout, styling, or behavior without code changes
• ❌ No integration with widget-builder or editor-web-lib

🎨 Proposed Solution

Option A: Visual Embeddable Editor (Recommended)

Concept: Create a visual editor specifically for module embeddables.

Flow:

User clicks "Edit Component" on MemberList
         ↓
Open Visual Embeddable Editor
         ↓
User modifies:
  - Layout (grid/flex)
  - Fields to display
  - Styling (colors, spacing)
  - Actions (buttons, events)
         ↓
Save changes to ModuleContext
         ↓
Regenerate component code
         ↓
Update module files

Implementation:

1. Create EmbeddableEditorComponent in modularity-lib
2. Visual canvas for component layout
3. Property panels for configuration
4. Live preview
5. Code generation on save

Pros:

• User-friendly
• No code knowledge required
• Integrated with existing module system

Cons:

• Significant development effort
• Need to build new UI

Option B: Widget Builder Integration

Concept: Convert generated embeddables to widgets that can be edited in widget-builder.

Flow:

User clicks "Edit Component" on MemberList
         ↓
Convert embeddable to widget definition
         ↓
Open in Widget Builder
         ↓
User modifies widget
         ↓
Save as custom widget
         ↓
Update module to use custom widget

Implementation:

1. Create EmbeddableToWidgetConverter service
2. Map embeddable properties to widget properties
3. Open widget-builder with converted widget
4. On save, update module's embeddable reference

Pros:

• Reuses existing widget-builder
• Widgets are already visual
• Less new code

Cons:

• Embeddables != Widgets (different purposes)
• May lose module-specific context
• Conversion complexity

Option C: Code Editor with Templates

Concept: Provide a code editor with templates and snippets.

Flow:

User clicks "Edit Component" on MemberList
         ↓
Open Code Editor with component files
         ↓
User modifies .ts, .html, .scss
         ↓
Validate changes
         ↓
Save and rebuild module

Implementation:

1. Embed Monaco Editor
2. Load component files
3. Syntax highlighting + IntelliSense
4. Validation on save
5. Hot reload

Pros:

• Full control
• Professional developer experience
• No abstraction layer

Cons:

• Requires code knowledge
• Not beginner-friendly
• Harder to ensure quality

🎯 Recommended Approach: Hybrid (A + B)

Phase 1: Visual Editor for Simple Changes (Option A)

For common modifications:

• Field visibility
• Column order
• Button labels
• Colors and spacing

UI:

┌────────────────────────────────────────┐
│ Editing: Member List Component         │
├────────────────────────────────────────┤
│ Fields to Display:                     │
│ ☑ Name                                 │
│ ☑ Email                                │
│ ☑ Phone                                │
│ ☐ Address                              │
│                                        │
│ Layout:                                │
│ ○ Table  ● Grid  ○ List               │
│                                        │
│ Actions:                               │
│ ☑ View Details                         │
│ ☑ Edit                                 │
│ ☑ Delete                               │
│                                        │
│ [Preview] [Save Changes] [Cancel]      │
└────────────────────────────────────────┘

Phase 2: Advanced Editor for Complex Changes (Option C)

For advanced modifications:

• Custom logic
• Complex layouts
• Custom actions
• API integration

Access: "Advanced Mode" button in visual editor

🔧 Technical Architecture

Embeddable Metadata Storage

interface EmbeddableCustomization {
  embeddableId: string;
  moduleId: string;
  customizations: {
    layout?: 'table' | 'grid' | 'list';
    visibleFields?: string[];
    fieldOrder?: string[];
    styling?: {
      colors?: Record<string, string>;
      spacing?: Record<string, string>;
    };
    actions?: {
      id: string;
      label: string;
      icon: string;
      actionId: string; // Links to module action
    }[];
  };
  version: number;
  lastModified: string;
}

Storage Location

• Flash Storage: embeddable-custom:{embeddableId}
• MongoDB: space_embeddable_customizations collection

Code Generation

class EmbeddableCodeGenerator {
  generate(embeddable: EmbeddableDefinitionV2, customizations: EmbeddableCustomization): {
    typescript: string;
    html: string;
    scss: string;
  } {
    // Generate .ts, .html, .scss based on customizations
    // Use templates + variable substitution
  }
}

📋 Implementation Checklist

Phase 1: Visual Editor (4-6 hours)

• Create EmbeddableEditorComponent
• Field visibility toggles
• Layout selection (table/grid/list)
• Action configuration
• Live preview
• Save to ModuleContext

Phase 2: Code Generation (3-4 hours)

• Create EmbeddableCodeGenerator
• Template system for .ts, .html, .scss
• Validation logic
• File writing service
• Module rebuild trigger

Phase 3: Integration (2-3 hours)

• Add "Edit Component" buttons to module cards
• Route to embeddable editor
• Context preservation
• Return navigation

🎨 UI Mockup

Module Card with Edit Buttons

┌──────────────────────────────────────┐
│ 👥 Member Management                 │
│                                      │
│ Manage gym members with profiles     │
│                                      │
│ 📊 1 entity  ⚡ 5 actions  🎨 4 UI   │
│                                      │
│ Components:                          │
│ • Member List      [Edit] [Preview]  │
│ • Member Card      [Edit] [Preview]  │
│ • Member Form      [Edit] [Preview]  │
│ • Member Detail    [Edit] [Preview]  │
│                                      │
│ [Edit Module] [Deploy]               │
└──────────────────────────────────────┘

🔗 Integration Points

With modularity-lib

• Embeddables stored in ModuleContext.embeddables
• Modifications update the context
• Workbench shows modified components

With widget-builder

• Optional: Convert embeddable to widget for advanced editing
• Use widget-builder's property panels
• Convert back to embeddable on save

With editor-web-lib

• Embeddables can be placed on pages
• Visual page builder can use module embeddables
• Drag-drop from module palette

🎓 Key Decisions

📁 Files to Create

🚀 Success Criteria

• User can modify embeddable layout
• User can toggle field visibility
• User can configure actions
• Changes persist across sessions
• Code regenerates correctly
• Module rebuilds successfully
• Preview works in real-time

Status: Planning Complete
Next: Implement Phase 1 (Visual Editor)
Estimated Effort: 10-15 hours total