IMMEDIATE FIX NEEDED

Comprehensive guidelines for AI-assisted development within the Editor platform

🚨 IMMEDIATE FIX: Widget Reactivity Issue

🎯 THE REAL PROBLEM

We have the correct architecture, but widgets aren't re-rendering after property changes because:

  1. ✅ EditorService uses autoFlashState for editor state (CORRECT)
  2. ✅ Property changes update the flash state (CORRECT)
  3. ❌ Widget components don't receive updated widget objects (BROKEN)

🔍 WHY IT'S BROKEN

The Flow:

User changes backgroundColor → #ad56b3
    ↓
PropertyEditor.onValueChange()
    ↓
PropertiesPanel.queuePropertyChange()
    ↓
(50ms debounce)
    ↓
processPendingChanges()
    ↓
property.setValue(widget, value) → NEW widget object
    ↓
EditorService.updateWidget(newWidget)
    ↓
editorState.update() → Flash state updated ✅
    ↓
❌ WIDGETS DON'T RE-RENDER
    ↓
Widget still shows old color #3b82f6

Why Widgets Don't Update:


✅ THE FIX

Option 1: Make WidgetHostComponent Reactive (Recommended)

Update WidgetHostComponent to compute widget from editorState:

export class WidgetHostComponent {
  private editorService = inject(EditorService);
  
  // ❌ OLD: Static widget input
  widget = input.required<Widget>();
  
  // ✅ NEW: Computed from flash state
  widget = computed(() => {
    const widgetId = this.widgetId();
    const state = this.editorService.editorState();
    return state.widgets.find(w => w.id === widgetId) || null;
  });
}

Option 2: Add Widget Update Signal (Alternative)

Add a signal in EditorService that emits when widgets change:

export class EditorService {
  readonly widgetsUpdated = signal<number>(0);
  
  updateWidget(widget: Widget): void {
    this.editorState.update(...);
    this.widgetsUpdated.update(n => n + 1); // Trigger change detection
  }
}

🎪 CURRENT STATE

What Works:

✅ Property changes are saved to flash state
✅ Flash state persists across refreshes
✅ EditorService.updateWidget() is called correctly
✅ New widget object is created

What Doesn't Work:

❌ Widgets don't receive updated props
❌ UI shows stale values
❌ Refresh page shows correct values (proves flash state works)


🚀 IMMEDIATE ACTION

Need to:

  1. Check how WidgetHostComponent passes widget to child widgets
  2. Make it reactive to editorState changes
  3. Ensure widget components receive updated widget objects
  4. Test that changes reflect immediately

Priority: 🔴 CRITICAL
Impact: Users can't edit widgets
Root Cause: Reactivity chain broken between EditorService and Widget components