Modular Universe 🌌

The Modular Universe is the playground where space-builders put together the puzzle pieces to create complete platforms.

Overview

The Modular Universe (@libs-structural/modular-universe) is the central canvas where space-builders:

1. Create Structure - Define the project's (universe) layout using sections, templates, and regions
2. Implement Modules - Connect modularity-lib to add functionality
3. Define Navigation - Create routes, pages, galaxies, and worlds
4. Connect Behavior - Attach Singularity flows for event-driven functionality

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                    MODULAR UNIVERSE CANVAS                       │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐       │
│  │   Modules    │    │  Structure   │    │  Behavior    │       │
│  │    Panel     │    │    Panel     │    │    Panel     │       │
│  │ (Palette)    │    │ (Tree View)  │    │ (Singularity)│       │
│  └──────────────┘    └──────────────┘    └──────────────┘       │
│                                                                 │
│  ┌─────────────────────────────────────────────────────────┐   │
│  │                    CANVAS AREA                           │   │
│  │  ┌─────────────────────────────────────────────────┐     │   │
│  │  │  CanvasSection (Recursive)                      │     │   │
│  │  │  ├── Template Regions                           │     │   │
│  │  │  ├── Flexbox Children                           │     │   │
│  │  │  └── Module Content                             │     │   │
│  │  └─────────────────────────────────────────────────┘     │   │
│  └─────────────────────────────────────────────────────────┘   │
│                                                                 │
│  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐       │
│  │   Routes     │    │   Preview    │    │    Config    │       │
│  │    Panel     │    │    Mode      │    │    Panel     │       │
│  └──────────────┘    └──────────────┘    └──────────────┘       │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key Components

Universe Canvas Builder

The main orchestrator component that manages:

• Canvas state (sections, modules)
• Active tab selection
• Module selection
• Zoom and pan controls
• Save/load operations

Canvas Section

Recursive component for visual layout:

• Supports flexbox and template layouts
• Drag-and-drop for content
• Quick actions (split, add, delete)
• Mobile-friendly click controls

Module Manager

UI for managing UniversalModules:

• Create/edit modules
• Configure routes
• Set module properties
• Use templates for common patterns

Behavior Panel

Singularity integration:

• Attach/detach flows
• Configure triggers
• Map parameters
• Test events

Route Tree Viewer

Navigation visualization:

• Hierarchical route display
• Galaxy/World/Page structure
• Route statistics

Data Flow

User Action → CanvasSection → CanvasBuilder → UniverseModuleService → Backend
                   ↓
           CanvasModuleConverter
                   ↓
           UniversalModule[]
                   ↓
           UniverseRouteService → Routes[]

Integration Points

modularity-lib

• Module manifest loading
• Dynamic component rendering
• Module lifecycle management

singularity-lib

• Flow attachment to modules
• Event triggering
• Workflow execution

storage-system

• Universe persistence
• Flash synchronization
• Multi-tenant isolation

editor-web-lib

• Page creation
• Web component rendering
• HTML/CSS generation

Related Documentation

• Progress Tracking
• Canvas Architecture
• UniversalModule Types
• Singularity Integration

Quick Start

// Navigate to modular-universe
// http://localhost:5200/space/{spaceId}/modular-universe/universe/{universeId}

// The canvas loads with:
// 1. Left sidebar: Module palette, templates
// 2. Center: Canvas editing area
// 3. Right sidebar: Configuration panel
// 4. Bottom: Route tree, preview, structure tabs

Session History