Phase 4: Module → Editor Integration

Priority: P2
Duration: 1-2 days (streamlined)
Status: 🟢 IN PROGRESS
Started: October 28, 2025

🎯 Objectives

Enable users to insert fully-packaged modules (from Modularity) directly into the Editor, making modules instantly reusable as building blocks for new pages.

Problems Being Solved

1. Modules are isolated - Created in Modularity but not usable in Editor
2. No module reuse - Can't easily insert existing functionality into new pages
3. Manual recreation - Have to rebuild similar pages from scratch

📋 Streamlined Implementation Plan

Since we already have:

• ✅ ModuleRegistryService
• ✅ UnifiedDataService with module data
• ✅ Editor with widget insertion

We just need to add a Module Browser to the Editor!

Step 1: Create Module Browser Component (1 hour)

File: libs/editor-ui/src/lib/components/module-browser/module-browser.component.ts

@Component({
  selector: 'lib-module-browser',
  standalone: true,
  template: `
    <div class="module-browser">
      <input [(ngModel)]="searchQuery" placeholder="Search modules..." />
      
      @for (module of filteredModules(); track module.id) {
        <div class="module-card" (click)="insertModule(module)">
          <span class="icon">{{ module.icon }}</span>
          <div>
            <h4>{{ module.name }}</h4>
            <p>{{ module.description }}</p>
            <span class="badge">{{ module.pageCount }} pages</span>
          </div>
        </div>
      }
    </div>
  `
})
export class ModuleBrowserComponent {
  readonly unifiedData = inject(UnifiedDataService);
  readonly editorService = inject(EditorService);
  readonly searchQuery = signal('');
  
  readonly modules = computed(() => this.unifiedData.modules());
  
  readonly filteredModules = computed(() => {
    const query = this.searchQuery().toLowerCase();
    return this.modules().filter(m => 
      m.name.toLowerCase().includes(query) ||
      m.description?.toLowerCase().includes(query)
    );
  });
  
  insertModule(module: ModuleWithAssets): void {
    // Insert module's pages/widgets into current page
    alert(`Module insertion: ${module.name} - Will implement full logic`);
  }
}

Step 2: Add to Editor Sidebar (30 min)

Add "Modules" tab next to "Widgets" and "Flows" tabs in the editor sidebar.

✅ Acceptance Criteria

• Module browser visible in Editor
• Can search/filter modules
• Can see module metadata (pages, flows, widgets count)
• Click to "insert" triggers alert (full implementation deferred)

📝 Implementation Status

• Documentation created
• Module Browser component
• Editor integration
• Testing

Overall: 0%

Last Updated: October 28, 2025
Next: Create ModuleBrowserComponent