Widget Builder - UX & Functionality Enhancement Plan

Complete implementation plan to make the widget builder truly functional and intuitive

Widget Builder - UX & Functionality Enhancement Plan 🎯

Status: 🚧 IN PROGRESS
Date: November 17, 2025
Session: 155.5

🎯 Current Problems

Critical Functionality Gaps

❌ Visual Designer Not Functional
- Components show but can't be dragged
- No real canvas interaction
- No component positioning/sizing
- Properties panel disconnected from canvas
❌ Code Tabs Don't Work
- Template/Styles/Factory tabs inactive
- Only Component tab shows code
- No tab switching functionality
- Generated code incomplete
❌ Preview Not Working
- Widget doesn't render in preview
- Breakpoint controls inactive
- Zoom controls non-functional
- No real-time updates
❌ Variants Are Placeholder
- No visual preview of variants
- Can't edit variant styles
- No comparison view
- Limited usefulness
❌ Sidebar UX Issues
- Widget types just listed (not actionable)
- Quick stats don't link anywhere
- No guidance for beginners
- Poor discoverability

🚀 Implementation Plan

Phase 1: Visual Designer (Priority: CRITICAL)

1.1 Drag-and-Drop System

// Add CDK Drag Drop
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

// Features to implement:
- [x] Drag components from palette to canvas
- [ ] Reorder components in canvas
- [ ] Visual drop zones with indicators
- [ ] Snap-to-grid positioning (optional)

1.2 Canvas Interaction

// Enhanced canvas features:
- [ ] Click component to select
- [ ] Highlight selected component
- [ ] Show component bounds
- [ ] Delete with keyboard (Delete key)
- [ ] Undo/Redo support

1.3 Component Properties

// Real property editing:
- [ ] Connect properties panel to selected component
- [ ] Live property updates
- [ ] Property validation
- [ ] Default values from registry

1.4 Layout System

// Component positioning:
- [ ] Vertical stacking (default)
- [ ] Horizontal flex layout (option)
- [ ] Grid layout (advanced)
- [ ] Spacing controls (margin/padding)

Phase 2: Code Generation & Preview (Priority: HIGH)

2.1 Functional Code Tabs

// Code view modes:
readonly codeViewMode = signal<'component' | 'template' | 'styles' | 'factory'>('component');

// Tab content:
- [ ] Component: TypeScript class
- [ ] Template: HTML template
- [ ] Styles: SCSS/CSS
- [ ] Factory: Widget factory pattern

2.2 Code Generator Enhancement

// Improve WidgetCodeGeneratorService:
- [ ] Generate from canvas design
- [ ] Include all components
- [ ] Property bindings
- [ ] Event handlers
- [ ] Proper imports

2.3 Live Preview Implementation

// Widget rendering:
- [ ] Dynamic component creation
- [ ] Property application
- [ ] Style injection
- [ ] Event wiring
- [ ] Error boundaries

2.4 Preview Controls

// Functional controls:
- [ ] Breakpoint switching (base/sm/md/lg/xl/2xl)
- [ ] Zoom levels (50%/75%/100%/125%/150%)
- [ ] Device frames (mobile/tablet/desktop)
- [ ] Orientation toggle (portrait/landscape)

Phase 3: Variants System (Priority: MEDIUM)

3.1 Variant Editor

// Enhanced variant editing:
- [ ] Visual variant editor
- [ ] Style overrides UI
- [ ] Property customization
- [ ] Preview per variant

3.2 Variant Preview

// Side-by-side comparison:
- [ ] Show all variants in grid
- [ ] Highlight differences
- [ ] Quick switch between variants
- [ ] Apply variant to canvas

3.3 Variant Management

// Operations:
- [ ] Duplicate variant
- [ ] Rename variant
- [ ] Delete variant
- [ ] Set default variant
- [ ] Export/Import variants

Phase 4: Sidebar Enhancement (Priority: MEDIUM)

4.1 Widget Type Selection

// Better UX:
- [ ] Visual cards with icons
- [ ] Type description on hover
- [ ] Recent types quick access
- [ ] Type search/filter
- [ ] Template suggestions

4.2 Quick Actions

// Add actionable items:
- [ ] "View Properties" → Jump to properties panel
- [ ] "View Variants" → Jump to variants panel
- [ ] "Quick Preview" → Show preview modal
- [ ] "Generate Now" → Instant widget generation

4.3 Progress Indicators

// Show completion:
- [ ] Widget configuration: X%
- [ ] Properties defined: X/Y
- [ ] Variants created: X
- [ ] Flows attached: X

Phase 5: UX Polish (Priority: LOW)

5.1 Onboarding

// First-time experience:
- [ ] Welcome modal with video
- [ ] Interactive tour
- [ ] Template gallery
- [ ] Quick start wizard

5.2 Keyboard Shortcuts

// Power user features:
- [ ] Ctrl+S: Save
- [ ] Ctrl+Z: Undo
- [ ] Ctrl+Y: Redo
- [ ] Delete: Remove selected
- [ ] Ctrl+D: Duplicate
- [ ] Ctrl+P: Preview

5.3 Context Menus

// Right-click actions:
- [ ] Component context menu (edit/delete/duplicate)
- [ ] Canvas context menu (add component)
- [ ] Quick actions for variants

5.4 Error Handling

// User-friendly errors:
- [ ] Validation messages
- [ ] Inline help tooltips
- [ ] Error recovery suggestions
- [ ] Auto-save indicators

📋 Detailed Implementation Steps

Step 1: Fix Visual Designer (CRITICAL)

File: widget-visual-designer.component.ts

Changes Needed:

Add Angular CDK Drag Drop
Implement drop zones
Connect to property panel
Add keyboard support
Emit design changes properly

Code Structure:

interface DesignElement {
  id: string;
  type: string;
  name: string;
  properties: Record<string, any>;
  position: { x: number; y: number };
  size: { width: string; height: string };
  children?: DesignElement[];
}

// Methods to add:
- onDrop(event: CdkDragDrop<DesignElement[]>)
- selectElement(elementId: string)
- updateElementProperties(elementId: string, props: Record<string, any>)
- deleteElement(elementId: string)
- exportDesign(): DesignElement[]

Step 2: Implement Code Tabs (HIGH)

File: widget-builder-workspace.component.ts

Changes Needed:

Add codeViewMode signal handling
Generate all code types
Implement tab switching
Add copy functionality

Template Update:

<div class="code-tabs">
  <button 
    class="code-tab"
    [class.active]="codeViewMode() === 'component'"
    (click)="codeViewMode.set('component')">
    Component
  </button>
  <!-- Repeat for template, styles, factory -->
</div>

<pre class="code-block">
  <code>{{ getCodeForView() }}</code>
</pre>

Method to add:

getCodeForView(): string {
  const code = this.generatedCode();
  switch (this.codeViewMode()) {
    case 'component': return code.code?.component || '';
    case 'template': return code.code?.template || '';
    case 'styles': return code.code?.styles || '';
    case 'factory': return code.code?.factory || '';
    default: return '';
  }
}

Step 3: Fix Live Preview (HIGH)

File: widget-live-preview.component.ts

Current Issue: Widget not rendering, just empty frame

Solution: Dynamic component creation

@Component({
  selector: 'lib-widget-live-preview',
  template: `
    <div class="preview-wrapper" [style.zoom]="zoom()">
      <div class="widget-container" [ngClass]="breakpointClass()">
        <!-- Dynamic widget rendering -->
        <ng-container *ngComponentOutlet="widgetComponent(); inputs: widgetInputs()"></ng-container>
      </div>
    </div>
  `
})
export class WidgetLivePreviewComponent {
  @Input() widget!: any;
  readonly zoom = signal(100);
  readonly breakpoint = signal('base');
  
  readonly widgetComponent = computed(() => {
    // Create dynamic component from widget design
    return this.createWidgetComponent(this.widget);
  });
  
  readonly widgetInputs = computed(() => {
    // Map property values to component inputs
    return this.widget.propertyValues || {};
  });
  
  readonly breakpointClass = computed(() => {
    return `breakpoint-${this.breakpoint()}`;
  });
  
  private createWidgetComponent(widget: any): Type<any> {
    // Use Angular Compiler to create component dynamically
    // Or use a renderer component that interprets the design
  }
}

Step 4: Implement Variants Preview (MEDIUM)

File: widget-builder-workspace.component.html

Add Variant Grid with Previews:

<div class="variants-grid">
  @for (variant of variants(); track variant.id) {
    <div class="variant-card">
      <div class="variant-header">
        <input [(ngModel)]="variant.name" />
        <button (click)="removeVariant($index)">×</button>
      </div>
      
      <!-- ADD: Actual preview -->
      <div class="variant-preview-real">
        <lib-widget-live-preview
          [widget]="getVariantPreview(variant)"
          [zoom]="75">
        </lib-widget-live-preview>
      </div>
      
      <!-- ADD: Style overrides -->
      <div class="variant-styles">
        <button (click)="editVariantStyles(variant)">
          Edit Styles
        </button>
      </div>
    </div>
  }
</div>

Method to add:

getVariantPreview(variant: any) {
  return {
    ...this.previewWidget(),
    propertyValues: {
      ...this.previewWidget().propertyValues,
      ...variant.styles
    }
  };
}

🎯 Success Criteria

Minimum Viable Product (MVP)

Drag components to canvas
Click to add components
Edit component properties
See live preview of widget
Switch between code tabs
Create and preview variants
Save and publish widget

Enhanced Features

Undo/Redo functionality
Keyboard shortcuts
Variant style editor
Breakpoint preview
Zoom controls
Template gallery
AI-assisted generation

Polish

Smooth animations
Loading states
Error handling
Help tooltips
Onboarding tour
Context menus

📊 Priority Matrix

Feature	Priority	Effort	Impact	Status
Drag & Drop Canvas	CRITICAL	High	High	🚧
Code Tabs	HIGH	Low	Medium	⏸️
Live Preview	HIGH	High	High	⏸️
Variant Preview	MEDIUM	Medium	Medium	⏸️
Sidebar Actions	MEDIUM	Low	Low	⏸️
Keyboard Shortcuts	LOW	Low	Low	⏸️
Onboarding	LOW	Medium	Medium	⏸️

🚀 Execution Plan

Week 1: Core Functionality

Day 1-2: Visual Designer drag-and-drop
Day 3: Code tabs implementation
Day 4-5: Live preview system

Week 2: Polish & Variants

Day 1-2: Variant system
Day 3: Sidebar enhancements
Day 4-5: Testing & bug fixes

Week 3: Advanced Features

Day 1: Keyboard shortcuts
Day 2-3: Onboarding system
Day 4-5: Final polish & documentation

📚 Technical Dependencies

Required Libraries

@angular/cdk/drag-drop - Drag and drop
@angular/compiler - Dynamic components (already included)
monaco-editor (optional) - Better code editor
highlight.js (optional) - Code syntax highlighting

Services to Enhance

WidgetCodeGeneratorService - Complete code generation
WidgetLivePreviewComponent - Widget rendering
WidgetVisualDesignerComponent - Canvas interaction
PropertyGroupEditorComponent - Property management

✅ Next Steps

✅ Create this plan document
🚧 Implement Visual Designer drag-and-drop
⏸️ Implement Code tabs functionality
⏸️ Fix Live Preview rendering
⏸️ Add Variant previews
⏸️ Enhance Sidebar UX
⏸️ Add keyboard shortcuts
⏸️ Polish and test

Created: November 17, 2025
Status: 🚧 Implementation Starting
Goal: Transform widget builder from beautiful UI to powerful, intuitive tool