NEXT STEPS PLAN

Comprehensive guidelines for AI-assisted development within the Editor platform

Universal Visual Compositor - Next Steps Plan 🎯

✅ What We Just Fixed

Resize Slide Bug - FIXED ✅

Current Status: Foundation is Solid 🏗️

🎯 Vision: Imagination to Life

We're building a JSON-based universal prototyping system where:

  1. AI can generate anything through JSON definitions
  2. Everything persists - shapes, connections, behaviors, interactions
  3. Full interactivity - attach functionality to any shape
  4. Animation-ready - integrates with @scroll-trigger for advanced animations
  5. Reusable & Extensible - templates, components, libraries

Key Principle: Before animations, the canvas and builder must be perfect.

📋 Immediate Action Plan

Phase A: JSON-First Architecture (CRITICAL) 🔴

Objective: Make EVERYTHING JSON-definable and serializable

1. Complete Composition Type ✅ (Extend existing)

File: libs/universal-visual-compositor/src/lib/models/visual-element.types.ts

Add:

export interface Composition {
  version: string;
  name: string;
  description?: string;
  metadata: {
    created: string;
    modified: string;
    author?: string;
    tags?: string[];
  };
  canvas: {
    width: number;
    height: number;
    background?: string;
    viewBox?: string;
  };
  elements: VisualElement[];
  connections: Connection[];
  interactions?: InteractionDefinition[];
  animations?: AnimationDefinition[];
  styles?: Record<string, any>;
}

export interface InteractionDefinition {
  id: string;
  elementId: string;
  event: 'click' | 'hover' | 'drag' | 'resize' | 'custom';
  actions: Action[];
  conditions?: Condition[];
}

export interface Action {
  type: 'navigate' | 'emit' | 'animate' | 'transform' | 'setState' | 'script';
  params: Record<string, any>;
}

export interface AnimationDefinition {
  id: string;
  elementIds: string[];
  trigger: 'load' | 'click' | 'scroll' | 'custom';
  timeline: Keyframe[];
}

export interface Keyframe {
  time: number; // 0-1 or milliseconds
  properties: Record<string, any>;
  easing?: string;
}

Files to Create:

Why: Without JSON-first, we can't persist, replicate, or AI-generate complex compositions

2. Composition Service (NEW)

File: libs/universal-visual-compositor/src/lib/services/composition.service.ts

@Injectable({ providedIn: 'root' })
export class CompositionService {
  // Serialize to JSON
  exportComposition(
    elements: VisualElement[],
    connections: Connection[],
    metadata: Partial<Composition['metadata']>
  ): Composition

  // Deserialize from JSON
  importComposition(json: string | Composition): {
    elements: VisualElement[];
    connections: Connection[];
    metadata: Composition['metadata'];
  }

  // Validate composition
  validateComposition(composition: Composition): ValidationResult

  // Save to file
  downloadComposition(composition: Composition, filename: string): void

  // Load from file
  loadCompositionFile(file: File): Promise<Composition>

  // Templates
  getTemplate(name: string): Composition
  saveTemplate(composition: Composition, name: string): void
  listTemplates(): string[]
}

Why: Central service for all serialization, persistence, and template management

3. Update Demo Component with Export/Import

File: apps/gograb-space/src/app/demos/universal-compositor-demo/universal-compositor-demo.component.ts

Add methods:

onExportJSON(): void {
  const composition = this.compositionService.exportComposition(
    this.elements(),
    this.connections(),
    { author: 'Demo User', tags: ['demo', 'test'] }
  );
  this.compositionService.downloadComposition(composition, 'my-composition.json');
}

onImportJSON(event: Event): void {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (!file) return;

  this.compositionService.loadCompositionFile(file).then(composition => {
    const imported = this.compositionService.importComposition(composition);
    this.elements.set(imported.elements);
    this.connections.set(imported.connections);
  });
}

onSaveTemplate(): void {
  const composition = this.compositionService.exportComposition(
    this.elements(),
    this.connections(),
    { name: 'My Template' }
  );
  this.compositionService.saveTemplate(composition, 'custom-template');
}

onLoadTemplate(name: string): void {
  const template = this.compositionService.getTemplate(name);
  const imported = this.compositionService.importComposition(template);
  this.elements.set(imported.elements);
  this.connections.set(imported.connections);
}

Why: Users can save/load/share compositions, demonstrating real-world usage

Phase B: Builder API (EASE OF USE) 🟡

Objective: Make programmatic creation EASY and AI-friendly

4. Composition Builder (NEW)

File: libs/universal-visual-compositor/src/lib/builders/composition.builder.ts

export class CompositionBuilder {
  private elements: VisualElement[] = [];
  private connections: Connection[] = [];

  static create(name: string): CompositionBuilder {
    return new CompositionBuilder(name);
  }

  // Shape builders
  addCircle(id: string, x: number, y: number, radius: number, style?: ShapeStyle): this
  addRectangle(id: string, x: number, y: number, width: number, height: number, style?: ShapeStyle): this
  addText(id: string, x: number, y: number, text: string, style?: TextStyle): this
  addPath(id: string, pathData: string, style?: ShapeStyle): this
  addCustom(element: VisualElement): this

  // Connection builder
  connect(fromId: string, toId: string, style?: ConnectionStyle): this

  // Layout helpers
  arrangeGrid(elementIds: string[], columns: number, gap: number): this
  arrangeFlow(elementIds: string[], direction: 'horizontal' | 'vertical', gap: number): this
  arrangeCircle(elementIds: string[], centerX: number, centerY: number, radius: number): this

  // Groups
  group(elementIds: string[], groupId: string): this
  ungroup(groupId: string): this

  // Styles
  applyStyle(elementIds: string[], style: Partial<ShapeStyle>): this
  applyClass(elementIds: string[], className: string): this

  // Interactions
  onClick(elementId: string, action: Action): this
  onHover(elementId: string, action: Action): this

  // Build
  build(): Composition
  buildElements(): VisualElement[]
  buildWithCanvas(width: number, height: number): Composition
}

Usage Example:

const composition = CompositionBuilder
  .create('flowchart')
  .addRectangle('start', 100, 100, 200, 100, { fill: '#4CAF50' })
  .addRectangle('process', 100, 250, 200, 100, { fill: '#2196F3' })
  .addRectangle('end', 100, 400, 200, 100, { fill: '#F44336' })
  .connect('start', 'process', { pathType: 'straight', endMarker: 'arrow' })
  .connect('process', 'end', { pathType: 'straight', endMarker: 'arrow' })
  .onClick('start', { type: 'navigate', params: { url: '/home' } })
  .build();

Why: AI can generate this code easily, developers love fluent APIs

5. Shape Factories Extension

File: libs/universal-visual-compositor/src/lib/utils/shape-factories.ts (extend existing)

Add:

// Composite shapes
export const CompositeShapes = {
  button: (text: string, style: ButtonStyle) => VisualElement
  input: (placeholder: string, style: InputStyle) => VisualElement
  card: (title: string, content: string, style: CardStyle) => VisualElement
  icon: (iconName: string, size: number) => VisualElement
  arrow: (start: Point, end: Point, style: ArrowStyle) => VisualElement
}

// Layout primitives
export const LayoutPrimitives = {
  flex: (children: VisualElement[], direction: FlexDirection) => VisualElement[]
  grid: (children: VisualElement[], columns: number, gap: number) => VisualElement[]
  stack: (children: VisualElement[], gap: number) => VisualElement[]
}

// Common patterns
export const PatternTemplates = {
  flowchart: (nodes: FlowchartNode[]) => Composition
  wireframe: (sections: WireframeSection[]) => Composition
  diagram: (items: DiagramItem[]) => Composition
  mindMap: (root: MindMapNode) => Composition
}

Why: Pre-built primitives make AI generation much easier and more consistent

Phase C: Functionality System (INTERACTIVITY) 🟠

Objective: Attach behaviors, interactions, and logic to shapes

6. Interaction Engine (NEW)

File: libs/universal-visual-compositor/src/lib/services/interaction.engine.ts

@Injectable({ providedIn: 'root' })
export class InteractionEngine {
  private interactions = new Map<string, InteractionDefinition[]>();

  // Register interactions from JSON
  registerInteractions(interactions: InteractionDefinition[]): void

  // Handle events
  handleElementClick(elementId: string, event: MouseEvent): void
  handleElementHover(elementId: string, event: MouseEvent): void
  handleElementCustom(elementId: string, eventName: string, data: any): void

  // Execute actions
  private executeAction(action: Action, context: any): void

  // Action handlers
  private navigateAction(params: any): void
  private emitAction(params: any): void
  private animateAction(params: any): void
  private transformAction(params: any): void
  private setStateAction(params: any): void
  private scriptAction(params: any): void // Sandboxed execution
}

Integration:

// In compositor-canvas.component.ts
onElementClick(element: VisualElement, event: MouseEvent): void {
  this.interactionEngine.handleElementClick(element.id, event);
  this.elementSelected.emit({ id: element.id, event });
}

Why: Without interactions, it's just static shapes - we need dynamic behaviors

7. Demo: Interactive Prototype

File: Add to universal-compositor-demo.component.ts

createInteractiveDemo(): void {
  const button = ShapePrimitives.createRectangle({
    id: 'btn-1',
    position: { x: 100, y: 100 },
    bounds: { width: 200, height: 60 },
    style: { fill: '#2196F3', rx: 8, ry: 8 }
  });

  const interaction: InteractionDefinition = {
    id: 'btn-1-click',
    elementId: 'btn-1',
    event: 'click',
    actions: [
      {
        type: 'animate',
        params: {
          property: 'scale',
          from: 1,
          to: 1.1,
          duration: 200,
          easing: 'ease-out'
        }
      },
      {
        type: 'emit',
        params: { event: 'button-clicked', data: { buttonId: 'btn-1' } }
      }
    ]
  };

  this.elements.update(els => [...els, button]);
  this.interactionEngine.registerInteractions([interaction]);
}

Why: Demonstrates real prototyping capability - clickable, animated, interactive

Phase D: Enhanced AI Generator (INTELLIGENCE) 🟢

Objective: AI generates better, data-driven compositions

8. JSON Template Library

Directory: libs/universal-visual-compositor/src/assets/templates/

Create JSON files:

Why: AI loads and modifies templates instead of hardcoding shapes

9. Enhance AI Service

File: libs/universal-visual-compositor/src/lib/services/ai-generation.service.ts (update)

Add:

generateFromPrompt(prompt: string): Composition {
  const intent = this.detectIntent(prompt);
  const template = this.loadTemplate(intent.type);
  const customized = this.customizeTemplate(template, prompt, intent);
  return customized;
}

private loadTemplate(type: string): Composition {
  // Load from JSON files
  return this.compositionService.getTemplate(type);
}

private customizeTemplate(template: Composition, prompt: string, intent: Intent): Composition {
  // Modify template based on prompt
  // Extract colors, sizes, labels, etc. from prompt
  // Update element properties
  return modifiedComposition;
}

private extractParameters(prompt: string): Record<string, any> {
  // "Create a blue button labeled 'Submit'"
  // → { color: 'blue', label: 'Submit', type: 'button' }
}

Why: More flexible, maintainable, and powerful than hardcoded generation

Phase E: Demo Polish (USER EXPERIENCE) 🔵

Objective: Make demo app showcase all capabilities

10. Properties Panel (NEW COMPONENT)

File: apps/gograb-space/src/app/demos/components/properties-panel.component.ts

@Component({
  selector: 'app-properties-panel',
  template: `
    @if (selectedElement()) {
      <div class="properties-panel">
        <h3>Properties</h3>

        <!-- Position -->
        <div class="property-group">
          <label>Position</label>
          <input type="number" [(ngModel)]="x" (change)="updatePosition()">
          <input type="number" [(ngModel)]="y" (change)="updatePosition()">
        </div>

        <!-- Size -->
        <div class="property-group">
          <label>Size</label>
          <input type="number" [(ngModel)]="width" (change)="updateSize()">
          <input type="number" [(ngModel)]="height" (change)="updateSize()">
        </div>

        <!-- Style -->
        <div class="property-group">
          <label>Fill</label>
          <input type="color" [(ngModel)]="fill" (change)="updateStyle()">
        </div>

        <!-- Rotation -->
        <div class="property-group">
          <label>Rotation</label>
          <input type="range" min="0" max="360" [(ngModel)]="rotation" (change)="updateRotation()">
        </div>
      </div>
    }
  `
})
export class PropertiesPanelComponent {
  selectedElement = input<VisualElement | null>(null);
  elementChange = output<VisualElement>();

  // Property bindings and update methods
}

Why: Users need precise control and visual feedback

11. Template Gallery (NEW COMPONENT)

File: apps/gograb-space/src/app/demos/components/template-gallery.component.ts

Shows:

Why: Discoverability and reusability

12. Export/Import UI

Add to demo toolbar:

<!-- Export/Import Section -->
<div class="toolbar-section">
  <button (click)="onExportJSON()" class="toolbar-btn">
    Export JSON
  </button>
  <button (click)="fileInput.click()" class="toolbar-btn">
    Import JSON
  </button>
  <input #fileInput type="file" accept=".json" (change)="onImportJSON($event)" hidden>
  <button (click)="onExportSVG()" class="toolbar-btn">
    Export SVG
  </button>
</div>

Why: Essential for real-world usage

Phase F: Real Use Cases (VALIDATION) 🟣

Objective: Prove the system works for actual projects

13. Create 10+ Example Compositions

Files: apps/gograb-space/src/app/demos/examples/

  1. flowchart-approval.json - Approval workflow with decision points
  2. wireframe-dashboard.json - Analytics dashboard layout
  3. diagram-microservices.json - Architecture diagram
  4. prototype-mobile-app.json - Mobile app screens with navigation
  5. mindmap-project.json - Project planning mind map
  6. infographic-timeline.json - Historical timeline
  7. ui-design-system.json - Component library showcase
  8. game-level-design.json - 2D game level layout
  9. org-chart.json - Organizational hierarchy
  10. network-topology.json - Network infrastructure diagram

Each includes:

Why: Demonstrates versatility and production-readiness

📊 Success Metrics

Phase A: JSON-First Architecture

Phase B: Builder API

Phase C: Functionality System

Phase D: Enhanced AI

Phase E: Demo Polish

Phase F: Real Use Cases

🚀 Implementation Order

Week 1: Foundation (Phases A & B)

Days 1-2: JSON types and composition service Days 3-4: Builder API and factories Days 5-7: Testing, refinement, documentation

Week 2: Functionality (Phases C & D)

Days 1-3: Interaction engine and action handlers Days 4-5: Template system and AI improvements Days 6-7: Integration and testing

Week 3: Polish (Phases E & F)

Days 1-3: Properties panel, template gallery, export/import UI Days 4-7: Create all 10 example compositions

✨ Final Vision

After these phases, we will have:

✅ JSON-First: Everything is JSON, AI-generatable, persistable ✅ Builder API: Easy to code, easy to generate ✅ Interactive: Full behavior attachment and execution ✅ AI-Powered: Smart templates, customization, suggestions ✅ Polished Demo: Professional showcase of capabilities ✅ Proven: 10+ real-world use cases

This is imagination to life. This is building anything, connecting anything, animating anything. 🎨✨

🎯 Next Immediate Action

Start with Phase A.1: Create composition.types.ts with complete type definitions.

Ready to implement?