Universe Map: Complete Redesign Plan

Date: November 12, 2025
Goal: Create a USABLE, INTEGRATED module composition system

🎯 Core Problems to Solve

1. No Clear Structure: Random floating cards don't show hierarchy
2. No Layout System: Can't define zones/structure
3. Disconnected from Modules: No integration with module library
4. Disconnected from Modularity: No way to package what you build
5. Confusing UX: No clear workflow for building

🚀 The Redesigned System

Three-Panel Layout

┌─────────────┬──────────────────────────┬──────────────┐
│   LEFT      │       CENTER             │    RIGHT     │
│  MODULES    │       CANVAS             │  PROPERTIES  │
│  TREE       │    (Visual Editor)       │   & ACTIONS  │
│             │                          │              │
│ 🔍 Search   │  📊 3 View Modes:        │ ⚙️ Config   │
│ 📦 Library  │  • Tree View             │ 🔗 Connect   │
│ 🌳 Hierarchy│  • Layout View           │ 🎨 Style     │
│ ⭐ Quick    │  • Free-form View        │ 💾 Save      │
│    Actions  │                          │              │
└─────────────┴──────────────────────────┴──────────────┘

📋 View Modes

1. Tree View (Default for Structure)

Universe: My Platform
├─ 🌟 Galaxy: Shop
│  ├─ 🌍 World: Products
│  │  ├─ 📄 Page: List
│  │  └─ 📄 Page: Detail
│  └─ 🌍 World: Cart
├─ 🌟 Galaxy: Blog
│  └─ 🌍 World: Articles
└─ 🌟 Galaxy: Dashboard

Features:

• Expandable tree
• Drag to reorder
• Right-click for actions
• Clear hierarchy

2. Layout View (For Visual Structure)

┌──────────────────────────────────┐
│  Header Zone (Navigation)        │
├───────────────┬──────────────────┤
│  Sidebar      │  Main Content    │
│  Zone         │  Zone            │
│               │                  │
│  • Widget 1   │  • Page 1        │
│  • Widget 2   │  • Page 2        │
└───────────────┴──────────────────┘

Features:

• Visual zones based on layout module
• Drag modules INTO zones
• Resize zones
• Add/remove zones

3. Free-form View (Current Canvas)

     🌟 ──────→ 🌍
      │          │
      └─→ 🌍 ───→ 📄

Features:

• Free positioning
• Visual connections
• For complex relationships

🔄 Integration Points

From Modules Library

Modules Page → Click "Edit Structure" → Universe Map opens
  - Loads module
  - Shows its children
  - Enables editing

To Modularity

Universe Map → Click "Package" → Modularity opens
  - Captures structure
  - Creates template
  - Publishes to library

Round Trip

1. Browse Modules
2. Install module
3. Edit in Universe Map
4. Package variant
5. Publish to Modules
6. Others can install

🎨 Left Panel: Smart Builder

Sections:

1. Quick Actions

   [+ Create Galaxy]
   [+ Create World]
   [+ Create Page]
   [📦 Package as Template]
   

2. Module Library (From @modularity-lib)

   🔍 Search modules...
   
   📦 Structural
   ├─ Galaxy Templates
   ├─ World Templates
   └─ Layout Templates
   
   🎨 Components
   ├─ Navigation
   ├─ Widgets
   └─ Features
   

3. Hierarchy Tree

   Current: Galaxy "Shop"
   
   Structure:
   🌟 Shop (Galaxy)
   ├─ 🌍 Products (World)
   │  ├─ 📄 List
   │  └─ 📄 Detail
   └─ 🌍 Cart (World)
      └─ 📄 Checkout
   

4. Templates (Quick Start)

   🚀 E-commerce
   📝 Blog
   📊 Dashboard
   🎨 Portfolio
   

🎯 Center Canvas: View Switcher

Top Toolbar:

[🌳 Tree] [📐 Layout] [🎨 Free-form] | 🔍 Zoom: 100% | ⚙️ Settings

Smart Context:

• Editing Universe → Show galaxies
• Editing Galaxy → Show worlds + layout zones
• Editing World → Show pages + layout zones
• Editing Page → Show widgets + content areas

⚡ Right Panel: Context Actions

When Galaxy Selected:

Galaxy: Shop

📊 Structure
├─ Layout: 3-Column Grid
├─ Worlds: 2
└─ Pages: 5

⚡ Quick Actions
[+ Add World]
[🎨 Change Layout]
[⚙️ Configure]
[🔗 Add Logic]
[📦 Package]

🎨 Appearance
• Theme: Default
• Icon: 🛒
• Color: Blue

When World Selected:

World: Products

📊 Structure
├─ Layout: Header + Content
├─ Pages: 2
└─ Widgets: 3

⚡ Quick Actions
[+ Add Page]
[+ Add Widget]
[🎨 Change Layout]
[⚙️ Configure]

🔗 Connections
• Data: Product API
• Flow: Search Logic

🏗️ Layout System

When Creating a Module:

┌─────────────────────────────────┐
│ Create Galaxy                    │
├─────────────────────────────────┤
│ Name: [Shop_______________]     │
│                                  │
│ Choose Layout:                   │
│ ┌────┐ ┌────┐ ┌────┐           │
│ │ 1  │ │ 2  │ │ 3  │           │
│ │Col │ │Col │ │Col │   [Custom]│
│ └────┘ └────┘ └────┘           │
│                                  │
│ Preview:                         │
│ ┌──────────────┐                │
│ │  Header      │                │
│ ├──────┬───────┤                │
│ │ Left │ Right │                │
│ └──────┴───────┘                │
│                                  │
│ [Cancel] [Create Galaxy]        │
└─────────────────────────────────┘

Layout Templates:

1. Single Column - Simple stack
2. Two Column - Sidebar + Content
3. Three Column - Sidebar + Content + Right panel
4. Grid - Flexible grid (2x2, 3x3, etc.)
5. Header/Content/Footer - Classic layout
6. Custom - Define your own zones

🎮 User Workflows

Build E-commerce Platform:

1. Click "E-commerce Template" in left panel
   → Creates Universe with 3 Galaxies (Shop, Blog, Admin)

2. Select "Shop" Galaxy
   → Shows 2-column layout with zones
   → Right panel shows "Add World" button

3. Click "Add World" → "Products"
   → Drops into left column zone
   → Auto-creates header/content layout

4. Click "Add Page" → "Product List"
   → Nests under Products world
   → Shows in tree view

5. Click "Package as Template"
   → Opens Modularity
   → Saves "My E-commerce" template

Edit Existing Module:

1. Modules page → Browse galaxies
2. Click "Edit Structure" on "Shop" galaxy
3. Universe Map opens in Tree View
4. See: Shop > Products > List/Detail
5. Click Products world
6. Right panel: "Add Page" → Create "Search"
7. Drag "Search Widget" from library
8. Drop into Products
9. Auto-saves changes

🔗 Integration Architecture

Universe Map Service:

class UniverseMapService {
  // Module Library Integration
  loadModuleFromLibrary(moduleId: string): UniversalModule
  installModuleVariant(variantId: string): void
  
  // Structure Management
  getCurrentHierarchy(): ModuleTreeNode[]
  createChildModule(parentId: string, type: ModuleType): UniversalModule
  moveModule(moduleId: string, newParentId: string): void
  
  // Layout Management
  getAvailableLayouts(): LayoutTemplate[]
  applyLayout(moduleId: string, layoutId: string): void
  createZone(parentId: string, zone: ZoneConfig): void
  
  // Modularity Integration
  packageAsTemplate(moduleId: string): TemplateData
  publishToLibrary(template: TemplateData): void
}

View State Management:

interface UniverseMapState {
  viewMode: 'tree' | 'layout' | 'freeform'
  currentModule: UniversalModule | null
  selectedModules: Set<string>
  activeLayout: LayoutConfig | null
  canvasTransform: CanvasTransform
  connectionMode: boolean
}

📦 Implementation Plan

Phase 1: Core Structure (Day 1)

• Three-panel layout
• View mode switcher
• Tree view component
• Layout view component
• Integration with module service

Phase 2: Module Library Integration (Day 2)

• Load modules from library
• Drag from library to canvas
• Install module variants
• Show module details in panel

Phase 3: Layout System (Day 3)

• Layout templates
• Zone rendering
• Drop into zones
• Zone resizing

Phase 4: Smart Workflows (Day 4)

• Quick actions based on context
• Template quick start
• Auto-nesting logic
• Smart suggestions

Phase 5: Modularity Integration (Day 5)

• Package as template button
• Export structure
• Publish to library
• Round-trip testing

🎯 Success Metrics

• Can create a 3-level hierarchy in < 2 minutes
• Clear visual feedback at every step
• Obvious how to add child modules
• Layout zones make structure clear
• Integration with Modules works seamlessly
• Can package and republish templates
• User says "THIS MAKES SENSE!"

🔥 Key Principles

1. Context-Aware: UI adapts to what you're editing
2. Progressive Disclosure: Show relevant options only
3. Visual Hierarchy: Always clear what's inside what
4. Smart Defaults: Suggest next logical action
5. Seamless Integration: Modules ↔ Universe Map ↔ Modularity
6. Flexible: Support both structured (zones) and free-form

Ready to implement this complete redesign! 🚀