System Analysis Dec 2025
Ecosistema completo para organización y gestión de contenido con interfaces espaciales
Widget System - Architecture Diagram 🏗️
Date: December 9, 2025
Session: 9
Status: ✅ Production Ready
🎯 High-Level System Overview
┌─────────────────────────────────────────────────────────────────────┐
│ GOGRAB SPACE PLATFORM │
│ Widget/Embeddable/Module System │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────┴───────────────┐
│ │
┌───────▼────────┐ ┌────────▼────────┐
│ FRONTEND │ │ BACKEND │
│ (Angular 20) │◄──────────►│ (NestJS) │
└────────────────┘ HTTP/WS └─────────────────┘
│ │
┌───────────┼───────────┐ ┌───────┴────────┐
│ │ │ │ │
┌────▼────┐ ┌───▼────┐ ┌───▼────┐ ┌───▼────┐ ┌─────▼─────┐
│ Builder │ │Showcase│ │Manager │ │Widgets │ │ MongoDB │
│ │ │ │ │ │ │Service │ │ │
└─────────┘ └────────┘ └────────┘ └────────┘ └───────────┘
📦 Frontend Architecture
┌─────────────────────────────────────────────────────────────────────┐
│ WIDGET BUILDER │
│ (WidgetBuilderWorkspaceComponent) │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
│ │ │
┌───────▼────────┐ ┌───▼────┐ ┌───────▼────────┐
│ AI Generate │ │Template│ │ From Component │
│ │ │ │ │ │
└────────┬───────┘ └───┬────┘ └────────┬───────┘
│ │ │
└─────────────┼───────────────┘
│
┌──────────────▼──────────────┐
│ WIZARD FLOW (3 Steps) │
├─────────────────────────────┤
│ 1. Describe (Select Method) │
│ 2. Customize (Properties) │
│ 3. Finalize (Name, Save) │
└──────────────┬──────────────┘
│
┌──────────────▼──────────────┐
│ SAVE TO BACKEND │
│ POST /api/spaces/:id/ │
│ widgets │
└─────────────────────────────┘
🎨 Widget Creation Flow
USER INPUT
│
├─── AI Generate ──────────────────────────────────────┐
│ "Create a pricing card with..." │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ IntelligentWidgetGeneratorService │ │
│ │ • Parse prompt │ │
│ │ • Generate structure │ │
│ │ • Create property groups │ │
│ └──────────────┬──────────────────────┘ │
│ │ │
├─── Template ──────┼──────────────────────────────────┤
│ Select "Button"│ │
│ │ │
│ ┌──────────────▼──────────────────────┐ │
│ │ Pre-defined Template │ │
│ │ • Default properties │ │
│ │ • Property groups │ │
│ └──────────────┬──────────────────────┘ │
│ │ │
└─── Component ─────┼──────────────────────────────────┤
Select "Button"│ │
│ │
┌──────────────▼──────────────────────┐ │
│ WidgetsEmbeddableRegistryService │ │
│ • Load embeddable definition │ │
│ • Generate property groups │ │
│ • Pre-fill metadata │ │
└──────────────┬──────────────────────┘ │
│ │
└──────────────┬───────────────────┘
│
┌──────────────▼──────────────┐
│ CUSTOMIZE PROPERTIES │
│ (Visual Editor) │
│ • Property groups │
│ • Live preview │
│ • Validation │
└──────────────┬──────────────┘
│
┌──────────────▼──────────────┐
│ FINALIZE & SAVE │
│ • Name │
│ • Description │
│ • Category │
│ • Save to MongoDB │
└─────────────────────────────┘
🔄 Variant Creation Flow
WIDGET DETAIL PAGE
│
├─── Create Variant ────────────────────────────────────┐
│ Click "Create Variant" button │
│ │
│ ┌────────────────────────────────────┐ │
│ │ SmartVariantCreatorComponent │ │
│ │ Route: /variant-editor/:id │ │
│ └──────────────┬─────────────────────┘ │
│ │ │
├─── Edit Variant ──┼───────────────────────────────────┤
│ Click "Edit" on existing variant │
│ │ │
│ ┌──────────────▼─────────────────────┐ │
│ │ SmartVariantCreatorComponent │ │
│ │ Route: /variant-editor/:id/:vid │ │
│ └──────────────┬─────────────────────┘ │
│ │ │
└─── Duplicate ─────┼───────────────────────────────────┤
Click "Duplicate" on existing variant │
│ │
└──────────────┬────────────────────┘
│
┌──────────────▼──────────────┐
│ VISUAL PROPERTY EDITOR │
│ • Modify properties │
│ • Live preview │
│ • Name variant │
└──────────────┬──────────────┘
│
┌──────────────▼──────────────┐
│ SAVE VARIANT │
│ PUT /api/spaces/:id/ │
│ widgets/:wid │
│ • Update widget.variants[]│
└─────────────────────────────┘
🗄️ Backend Data Flow
┌─────────────────────────────────────────────────────────────────────┐
│ MONGODB │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────┐ ┌──────────────────────────┐ │
│ │ space_{spaceId} │ │ gograb-api │ │
│ │ ├─ space_widgets │ │ ├─ widgets (global) │ │
│ │ │ ├─ widget_1 │ │ │ ├─ core_widget_1 │ │
│ │ │ ├─ widget_2 │ │ │ ├─ core_widget_2 │ │
│ │ │ └─ widget_3 │ │ │ └─ core_widget_3 │ │
│ │ └─ other_collections │ │ └─ other_collections │ │
│ └──────────────────────────┘ └──────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
▲ ▲
│ │
┌───────────┴───────────┐ ┌──────────┴──────────┐
│ WidgetsService │ │ GlobalResourcesService│
│ • CRUD operations │ │ • CRUD operations │
│ • Space-level widgets │ │ • Global widgets │
│ • Variant management │ │ • Core widgets │
└───────────┬───────────┘ └──────────┬──────────┘
│ │
┌───────────┴───────────┐ ┌──────────┴──────────┐
│ WidgetsController │ │ GlobalResourcesController│
│ /api/spaces/:id/ │ │ /api/global-resources/│
│ widgets │ │ widgets │
└───────────┬───────────┘ └──────────┬──────────┘
│ │
└───────────┬───────────────┘
│
┌───────────▼───────────┐
│ HTTP/REST API │
│ • GET │
│ • POST │
│ • PUT │
│ • DELETE │
└───────────────────────┘
🧩 Component Hierarchy
┌─────────────────────────────────────────────────────────────────────┐
│ APP ROUTES │
│ /space/:spaceId/widgets/ │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────┼───────────────┐
│ │ │
┌───────▼────────┐ ┌───▼────┐ ┌───────▼────────┐
│ Widget Builder │ │Showcase│ │ Widget Manager │
│ │ │ │ │ │
└────────────────┘ └───┬────┘ └────────────────┘
│
┌──────────────┼──────────────┐
│ │ │
┌───────▼────────┐ ┌──▼───┐ ┌───────▼────────┐
│ Widget Guide │ │Detail│ │ Variant Editor │
│ (Browse) │ │ │ │ │
└────────────────┘ └──┬───┘ └────────────────┘
│
┌─────────────┼─────────────┐
│ │ │
┌───────▼────────┐ ┌─▼──┐ ┌───────▼────────┐
│ Variant List │ │Prop│ │ Usage Examples │
│ │ │ │ │ │
└────────────────┘ └────┘ └────────────────┘
🔌 Service Dependencies
┌─────────────────────────────────────────────────────────────────────┐
│ WIDGET SERVICES │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────────────┼───────────────────────┐
│ │ │
┌───────▼────────┐ ┌──────────▼──────────┐ ┌────────▼────────┐
│WidgetsEmbeddable│ │WidgetStorageService │ │IntelligentWidget│
│RegistryService │ │ │ │GeneratorService │
│ │ │ • saveWidget() │ │ │
│ • embeddables() │ │ • getWidget() │ │ • generateWidget│
│ • categories() │ │ • deleteWidget() │ │ (prompt) │
│ • generateProps │ │ • listWidgets() │ │ • analyzePrompt │
│ Groups() │ │ │ │ • createGroups │
└─────────────────┘ └──────────┬──────────┘ └─────────────────┘
│
┌───────────┼───────────┐
│ │ │
┌───────▼────┐ ┌───▼────┐ ┌───▼────┐
│WidgetFlash │ │Property│ │Theme │
│SyncService │ │Registry│ │Mapper │
│ │ │Service │ │Service │
│ • sync() │ │ │ │ │
│ • watch() │ │ • get │ │ • map │
└────────────┘ └────────┘ └────────┘
🎨 UI Component Tree
WidgetBuilderWorkspaceComponent
├─ Header
│ ├─ Back Button
│ ├─ Progress Steps (Describe, Customize, Finalize)
│ └─ Start Over Button
│
├─ Step 1: Describe
│ ├─ Creation Method Tabs
│ │ ├─ AI Generate
│ │ ├─ Templates
│ │ └─ From Component
│ │
│ ├─ AI Section (if AI selected)
│ │ ├─ Prompt Input
│ │ ├─ Generate Button
│ │ ├─ Progress Indicator
│ │ ├─ Result Display
│ │ └─ Suggestions
│ │
│ ├─ Template Grid (if Templates selected)
│ │ └─ Template Cards
│ │
│ └─ Component Grid (if Component selected)
│ └─ Component Cards (by category)
│
├─ Step 2: Customize
│ ├─ Property Groups
│ │ ├─ Group Header (expandable)
│ │ └─ Property Editors
│ │ ├─ String Input
│ │ ├─ Number Input
│ │ ├─ Boolean Toggle
│ │ ├─ Select Dropdown
│ │ ├─ Color Picker
│ │ └─ Array Editor
│ │
│ └─ Live Preview Panel
│ └─ WidgetLivePreviewComponent
│
├─ Step 3: Finalize
│ ├─ Widget Metadata
│ │ ├─ Name Input
│ │ ├─ Description Textarea
│ │ └─ Category Select
│ │
│ ├─ Variant Management
│ │ ├─ Variant List
│ │ └─ Add Variant Button
│ │
│ └─ Save Section
│ ├─ Save Button
│ ├─ Save & Use Button
│ └─ Cancel Button
│
└─ Footer
├─ Previous Button
├─ Next Button
└─ Save Button
🔄 State Management
┌─────────────────────────────────────────────────────────────────────┐
│ SIGNAL-BASED STATE │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────────────┼───────────────────────┐
│ │ │
┌───────▼────────┐ ┌──────────▼──────────┐ ┌────────▼────────┐
│ Creation State │ │ Wizard State │ │ Widget State │
│ │ │ │ │ │
│ • creationMethod│ │ • currentStep │ │ • widgetName │
│ signal │ │ signal │ │ signal │
│ • aiPrompt │ │ • isTransitioning │ │ • widgetDesc │
│ signal │ │ signal │ │ signal │
│ • selectedTemplate│ • stepCompleted │ │ • widgetCategory│
│ signal │ │ computed │ │ signal │
│ • selectedEmbeddable│ │ │ • variants │
│ signal │ │ │ │ signal │
└────────────────┘ └─────────────────────┘ └─────────────────┘
│ │ │
└───────────────────────┼───────────────────────┘
│
┌───────────▼───────────┐
│ COMPUTED SIGNALS │
│ │
│ • availableEmbeddables│
│ • embeddableCategories│
│ • flatPropertyValues │
│ • canProceed │
│ • canSave │
└───────────────────────┘
📊 Data Flow Diagram
USER ACTION
│
├─── Select Creation Method ────────────────────────────────┐
│ (AI, Template, Component) │
│ │
│ ┌────────────────────────────────────┐ │
│ │ creationMethod.set('component') │ │
│ └──────────────┬─────────────────────┘ │
│ │ │
├─── Select Component ───────────────────────────────────────┤
│ Click component card │
│ │ │
│ ┌──────────────▼─────────────────────┐ │
│ │ selectEmbeddable(embeddable) │ │
│ │ • Load property groups │ │
│ │ • Pre-fill metadata │ │
│ │ • Advance to customize │ │
│ └──────────────┬─────────────────────┘ │
│ │ │
├─── Customize Properties ───────────────────────────────────┤
│ Edit property values │
│ │ │
│ ┌──────────────▼─────────────────────┐ │
│ │ updatePropertyValue(key, value) │ │
│ │ • Update signal │ │
│ │ • Trigger live preview │ │
│ └──────────────┬─────────────────────┘ │
│ │ │
└─── Finalize & Save ────────────────────────────────────────┤
Enter name, description, category │
│ │
┌──────────────▼─────────────────────┐ │
│ saveWidget() │ │
│ • Collect all data │ │
│ • Validate │ │
│ • POST to backend │ │
│ • Navigate to detail │ │
└────────────────────────────────────┘ │
│ │
┌──────────────▼─────────────────────┐ │
│ BACKEND │ │
│ • Save to MongoDB │ │
│ • Generate IDs │ │
│ • Return widget │ │
└────────────────────────────────────┘ │
│ │
┌──────────────▼─────────────────────┐ │
│ WIDGET DETAIL PAGE │ │
│ • Display widget │ │
│ • Show variants │ │
│ • Enable editing │ │
└────────────────────────────────────┘ │
│
└───
🎯 System Integration Points
┌─────────────────────────────────────────────────────────────────────┐
│ INTEGRATION POINTS │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────────────────┼───────────────────────┐
│ │ │
┌───────▼────────┐ ┌──────────▼──────────┐ ┌────────▼────────┐
│ Module System │ │ Theme System │ │ Storage System │
│ │ │ │ │ │
│ • Module │ │ • CSS Variables │ │ • GgStorage │
│ Registry │ │ • Theme Mapper │ │ • Flash Sync │
│ • Module │ │ • Dynamic Themes │ │ • IndexedDB │
│ Loader │ │ │ │ │
└────────────────┘ └─────────────────────┘ └─────────────────┘
│ │ │
└───────────────────────┼───────────────────────┘
│
┌───────────▼───────────┐
│ WIDGET SYSTEM │
│ (Central Hub) │
└───────────┬───────────┘
│
┌───────────────────────┼───────────────────────┐
│ │ │
┌───────▼────────┐ ┌──────────▼──────────┐ ┌────────▼────────┐
│ Event System │ │ Action Registry │ │ Log System │
│ │ │ │ │ │
│ • Event Bus │ │ • Action Handlers │ │ • Logger │
│ • Domain Events│ │ • Command Pattern │ │ • Telemetry │
│ • Subscribers │ │ • Inter-module Comm │ │ • Debugging │
└────────────────┘ └─────────────────────┘ └─────────────────┘
🚀 Future Architecture (Priority 5)
┌─────────────────────────────────────────────────────────────────────┐
│ WIDGET BUILDER (Enhanced) │
│ + NX Library Generation │
└─────────────────────────────────────────────────────────────────────┘
│
┌───────────┴───────────┐
│ │
┌───────▼────────┐ ┌──────▼──────┐
│ Save to DB │ │ Generate NX │
│ (Current) │ │ Library │
│ │ │ (NEW!) │
└────────────────┘ └──────┬──────┘
│
┌──────────────────┼──────────────────┐
│ │ │
┌───────▼────────┐ ┌──────▼──────┐ ┌────────▼────────┐
│ Generate Files │ │ Update │ │ Register │
│ │ │ tsconfig │ │ Module │
│ • manifest.ts │ │ │ │ │
│ • component.ts │ │ • Add path │ │ • Module │
│ • service.ts │ │ mapping │ │ Registry │
│ • index.ts │ │ │ │ │
└────────────────┘ └─────────────┘ └─────────────────┘
│ │ │
└──────────────────┼──────────────────┘
│
┌──────────────────▼──────────────────┐
│ RESULT: Widget as NX Library │
│ • Independently buildable │
│ • Dynamically loadable │
│ • Dependency tracked │
│ • Type-safe imports │
└─────────────────────────────────────┘
Document Version: 1.0
Session: 9
Date: December 9, 2025
Status: ✅ Production Ready (Core System)
Next: Priority 5 - NX Library Generation