🎯 Module Builder vs Editor - Flow Separation

Date: November 5, 2025
Status: 🔧 In Progress
Priority: Critical - UX Confusion

🚨 The Problem

Current Broken Flow:

1. User is in Modularity → Building a new module
2. Goes to "Assets" tab → Needs to select pages
3. No pages exist → Clicks "Create Pages in Editor"
4. Gets redirected to: /space/{space}/editor/{universe}/workspace
5. CONFUSION: User is now editing an existing universe, NOT building module content
6. No clear way to return to module builder with created pages

Why This is Wrong:

• Modularity = Building NEW reusable modules (brand new content)
• Editor = Editing EXISTING universe/galaxy pages (deployed apps)
• These are two different contexts that should NOT be mixed

🎯 The Solution: Editor with Module Context

New Flow:

Modularity Builder (Assets Tab)
    ↓
  No pages available
    ↓
"Create Pages for This Module" button
    ↓
/space/{space}/editor/module/{moduleId}/create
    ↓
Editor in "Module Building Mode"
  - Context: Building content FOR module-{moduleId}
  - Pages created are tagged with moduleId
  - Header shows: "Creating content for Module: {name}"
  - "Return to Module Builder" button visible
    ↓
User creates page(s)
    ↓
Clicks "Save & Return to Module Builder"
    ↓
Back to: /space/{space}/modularity/builder/{moduleId}
    ↓
Assets tab now shows the newly created pages

🏗️ Implementation Plan

1. New Editor Route for Module Content Creation

// libs/editor-web-lib/src/lib/editor.routes.ts

{
  path: 'module/:moduleId/create',
  loadComponent: () => import('./components/module-content-creator/module-content-creator.component')
    .then(m => m.ModuleContentCreatorComponent),
  data: { 
    mode: 'module-builder',
    animation: 'slideLeft'
  }
}

2. Update Page Selector Navigation

// libs/modularity-lib/src/lib/components/page-selector/page-selector.component.ts

goToEditor(): void {
  const moduleId = this.currentModuleId(); // Get from parent/route
  if (moduleId) {
    // Navigate to module content creator
    this.router.navigate(['/space', spaceSlug, 'editor', 'module', moduleId, 'create']);
  } else {
    // Fallback to regular editor
    this.router.navigate(['/space', spaceSlug, 'editor']);
  }
}

3. Create Module Content Creator Component

This component extends EditorUiComponent but:

• Shows module context in header
• Tags pages with moduleId metadata
• Has "Return to Module Builder" action
• Auto-saves pages to be available in Assets tab

4. Update Module Builder to Pass Context

// libs/modularity-lib/src/lib/components/module-builder/module-builder.component.ts

// Pass moduleId to page-selector
<lib-page-selector 
  [moduleId]="moduleId()"
  ...
/>

📋 Route Structure (After Fix)

┌─ Modularity Routes (/space/{space}/modularity)
│
├─ Dashboard           → /
├─ AI Builder          → /ai-builder
├─ Module Builder      → /builder/{moduleId}
│   └─ Assets Tab shows page-selector
│
└─ Editor Routes (/space/{space}/editor)
    │
    ├─ Universe/Galaxy Editor (existing pages)
    │   └─ /{universe}/workspace/{pageId}
    │
    └─ Module Content Creator (NEW - for building modules)
        └─ /module/{moduleId}/create
            └─ Creates pages tagged with moduleId
            └─ "Return to Module Builder" button

✅ Benefits

1. Clear Context: User always knows if they're building a module or editing a deployed app
2. No Lost Work: Pages created are immediately tagged to the module
3. Easy Navigation: Clear path back to module builder
4. Reuses Infrastructure: Leverages existing Editor components
5. Scalable: Can extend to module components, flows, etc.

✅ Implementation Status

Completed:

1. ✅ Added moduleId input to page-selector.component.ts
2. ✅ Updated page-selector.goToEditor() to check for moduleId and navigate accordingly
3. ✅ Updated module-builder to pass moduleId to page-selector
4. ✅ Added route to editor.routes.ts: /space/{space}/editor/module/{moduleId}/create
5. ✅ Route data includes mode: 'module-builder' for context detection

TODO (Future Enhancements):

• Update EditorWorkspaceComponent to detect mode: 'module-builder' from route data
• Show "Building content for Module: {name}" header when in module-builder mode
• Add "Return to Module Builder" button in module-builder mode
• Tag created pages with moduleId metadata
• Auto-refresh page list in Modularity when returning from Editor

🎉 Result

Users now have a clear, contextual flow when building modules:

1. User is in Modularity → Building module XYZ
2. Clicks "Create Pages in Editor"
3. Navigates to: /space/{space}/editor/module/XYZ/create
4. Context preserved: They know they're creating content for module XYZ
5. Pages can be tagged with moduleId for easy packaging
6. (Future) Clear "Return to Module Builder" action