🔧 Widget System Fixes Needed

Date: October 27, 2025
Status: IN PROGRESS
Priority: HIGH

🔴 Issues Identified from Logs

1. Duplicate Button Widget Registration ✅ FIXED

Problem:

[WidgetRegistry] 🎯 Successfully loaded 2 widget(s) from 6 module(s)

Button Widget was registered TWICE because the manifest was in both moduleRegistry and widgetModuleLoader.

Fix Applied:

// OLD (caused duplicates):
const allManifests = [
  ...moduleRegistry.getAllModules(),      // ← includes Button Widget
  ...widgetModuleLoader.getAllManifests() // ← ALSO includes Button Widget
];

// NEW (no duplicates):
widgetRegistry.loadFromModules(widgetModuleLoader.getAllManifests());

2. Widget Library Using OLD Registry ⚠️ IN PROGRESS

Problem:

[WidgetLibrary] ⚠️ Using OLD registry: 13 widgets

Dynamic injection isn't finding the NEW WidgetRegistryService from @demos-lib.

Root Cause:

• Circular dependency prevents direct import
• Dynamic injection via injector.get() not finding the service
• Falls back to OLD registry with 13 hardcoded widgets

Attempted Fix: Updated injection strategy to search through all registered services and check for method signatures.

Status: Needs testing

3. No Variants Visible ❌ NOT IMPLEMENTED

Problem:

• User navigates to /editor/catuniverse-1/widgets route
• No variants shown
• No way to view/manage the 12 Button Widget variants

What's Needed: A dedicated Widgets Management UI that shows:

• All registered widgets
• All variants for each widget
• Ability to create/edit/delete widgets
• Ability to create/edit/delete variants
• Preview of each variant
• Drag widgets to canvas
• Space-scoped (reusable across universes within one space)

🎯 User Requirements

Conceptual Model

SPACE (one per user)
  └─ WIDGETS (reusable across all universes in this space)
       ├─ Button Widget
       │    ├─ Variant: Primary
       │    ├─ Variant: Secondary
       │    ├─ Variant: Outline
       │    └─ ... (12 total variants)
       ├─ Text Widget
       ├─ Card Widget
       └─ ...
  
  └─ UNIVERSES (multiple per space)
       ├─ Universe 1
       │    └─ Can use all widgets from space
       ├─ Universe 2
       │    └─ Can use all widgets from space
       └─ ...

Key Points

1. One Space per User - Personal workspace
2. Multiple Universes per Space - Different projects/sites
3. Widgets are Space-Scoped - Create once, use everywhere
4. Variants Enable Reusability - Same widget, different styles

📋 Implementation Plan

Phase 1: Fix Registry Issues (URGENT)

• Remove duplicate Button Widget registration
• Fix dynamic injection in widget-library.component
• Verify NEW registry is being used
• Test that Button Widget shows correctly

Phase 2: Create Widgets Management Route (HIGH PRIORITY)

• Create /editor/:universe/widgets route
• Create Widgets Manager component
• List all registered widgets with metadata
• Show variants for each widget
• Add search/filter functionality
• Add widget preview
• Add variant preview

Phase 3: Widget Builder UI (MEDIUM PRIORITY)

• Create widget builder interface
• Visual widget composer
• Variant creator/editor
• Property configurator
• Style editor
• Preview panel

Phase 4: Space-Level Widget Storage (LOW PRIORITY)

• Store widgets at space level (not universe level)
• Sync widgets across universes
• Widget versioning
• Widget sharing/import/export

🚀 Quick Wins

What Can Be Done NOW:

1. Test the Duplicate Fix

   • Refresh browser
   • Check logs: Should show loaded 1 widget(s) from 1 module(s)

2. Improve Widget Library Injection

   • Better detection strategy
   • Fallback gracefully
   • Clear error messages

3. Add Debug UI to Widgets Route

   • Show current widgets
   • Show variants
   • Basic info display

📊 Expected Logs After Fixes

Good Logs:

[WidgetRegistry] 🎯 Successfully loaded 1 widget(s) from 1 module(s)
[WidgetLibrary] ✨ Using NEW registry: 1 widgets
[WidgetLibrary] Button widget with 12 variants loaded

Bad Logs (what we have now):

[WidgetRegistry] 🎯 Successfully loaded 2 widget(s) from 6 module(s)  ← Duplicate!
[WidgetLibrary] ⚠️ Using OLD registry: 13 widgets  ← Wrong registry!

🎨 Widgets Management UI Mockup

┌─────────────────────────────────────────────────────────┐
│ 🎨 Widgets Manager                          [+ Create]  │
├─────────────────────────────────────────────────────────┤
│                                                          │
│ 🔍 Search widgets...                    [All | Basic ]  │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Button Widget                            [Edit]   │   │
│ │ Interactive button with customizable actions      │   │
│ │                                                    │   │
│ │ ✨ 12 Variants:                                   │   │
│ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐             │   │
│ │ │Primary │ │ Outline│ │ Glass │ │Gradient│       │   │
│ │ └──────┘ └──────┘ └──────┘ └──────┘             │   │
│ │ [View All Variants →]                             │   │
│ └──────────────────────────────────────────────────┘   │
│                                                          │
│ ┌──────────────────────────────────────────────────┐   │
│ │ Text Widget                              [Edit]   │   │
│ │ Rich text with formatting                         │   │
│ │ ✨ 5 Variants                                     │   │
│ └──────────────────────────────────────────────────┘   │
│                                                          │
└─────────────────────────────────────────────────────────┘

🔧 Technical Architecture

Widgets Route Structure

/editor/:universe/widgets
  ├─ widgets-manager.component.ts      (Main container)
  ├─ widget-card.component.ts          (Display widget info)
  ├─ widget-variants-grid.component.ts (Show variants)
  ├─ widget-builder.component.ts       (Create/edit widget)
  └─ variant-editor.component.ts       (Create/edit variant)

Data Flow

User → Widgets Manager
        ↓
    WidgetRegistryService (@demos-lib)
        ↓
    Get all widgets with variants
        ↓
    Display in grid/list
        ↓
    User clicks variant → Preview
    User drags widget → Add to canvas
    User clicks edit → Widget Builder

✅ Success Criteria

Phase 1 Complete When:

• Only 1 Button Widget registered (not 2)
• Widget Library uses NEW registry
• All 12 variants are accessible
• Console logs are clean

Phase 2 Complete When:

• /widgets route exists and works
• All registered widgets visible
• Variants shown for each widget
• Can preview variants
• Can drag widgets to canvas

Full System Complete When:

• Can create custom widgets via UI
• Can create variants via UI
• Widgets stored at space level
• Widgets reusable across universes
• Widget marketplace ready

📚 Related Documentation

• Unified Widget System Architecture
• Button Widget Module Status
• Widget Library Unified

Next Immediate Steps:

1. Test duplicate fix (refresh browser)
2. Test dynamic injection improvement
3. Create basic widgets management route
4. Show variants in UI

Status: 🚧 Fixes Applied - Awaiting Testing