INTELLIGENT PROPERTIES INTEGRATION

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

🧠 Intelligent Properties Integration Plan

Executive Summary

We have powerful systems that aren't properly connected:

Backend Properties System - MongoDB-backed, category-aware, with templates
Widget Builder - Local property groups without backend sync
Theme System - CSS variables, AI generation, auto-enhancement
AI Generation - Currently producing generic results

Goal: Create a self-improving, intelligent property ecosystem where:

Properties are stored in MongoDB and sync across platforms
Theme system CSS variables are available as property options
AI generation uses real property definitions for accurate results
Usage tracking improves AI recommendations over time

Current State Analysis

1. Backend Properties System (✅ Built, ❌ Not Used)

Location: apis/backend-api/src/app/properties/

Capabilities:

PropertyDefinition - Individual properties with validation, categories, widget types
PropertyTemplate - Grouped properties (Sizing, Colors, Typography, etc.)
CRUD operations with MongoDB storage
Search and filtering by category, control type, widget type
Usage tracking (usageCount) for AI training
Built-in template seeding

Control Types:

type PropertyControlType =
  | 'text' | 'number' | 'boolean' | 'color' | 'select'
  | 'slider' | 'file' | 'icon' | 'richtext' | 'code'
  | 'json' | 'date' | 'datetime' | 'array' | 'object';

Categories:

type PropertyCategory =
  | 'content' | 'appearance' | 'layout'
  | 'behavior' | 'advanced' | 'data' | 'accessibility';

2. Widget Builder (✅ UI, ❌ No Backend Sync)

Current: Local BuilderPropertyGroup with hardcoded templates

Missing:

No connection to Properties API
No persistent property definitions
No usage tracking
No theme variable integration

3. Theme System (✅ Rich, ❌ Not Integrated)

CSS Variables Available:

Colors: --ux-primary, --ux-secondary, --ux-background, etc.
Spacing: --ux-space-xs through --ux-space-xl
Typography: --ux-font-size-*, --ux-font-weight-*
Shadows: --ux-shadow-sm through --ux-shadow-xl
Transitions: --ux-transition-fast, --ux-transition-medium, --ux-transition-slow
Border radius: --ux-radius-xs through --ux-radius-xl

AI Features:

Brand analysis with 12 archetypes
Conversational theme generation
Industry intelligence
Accessibility scoring

4. AI Widget Generation (❌ Generic Results)

Current Problem: AI generates generic properties without knowledge of:

Existing property definitions in the system
Theme CSS variables
Industry best practices
Accessibility requirements

Integration Architecture

┌─────────────────────────────────────────────────────────────────────────┐
│                        INTELLIGENT PROPERTY ECOSYSTEM                     │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                           │
│  ┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐    │
│  │  THEME SYSTEM   │────▶│  PROPERTIES DB  │◀────│  AI GENERATOR   │    │
│  │                 │     │                 │     │                 │    │
│  │ • CSS Variables │     │ • Definitions   │     │ • Smart Prompts │    │
│  │ • Utilities     │     │ • Templates     │     │ • Context Aware │    │
│  │ • AI Generator  │     │ • Usage Stats   │     │ • Theme Aware   │    │
│  └────────┬────────┘     └────────┬────────┘     └────────┬────────┘    │
│           │                       │                       │              │
│           │         ┌─────────────┴─────────────┐         │              │
│           │         │                           │         │              │
│           ▼         ▼                           ▼         ▼              │
│  ┌─────────────────────────────────────────────────────────────────┐    │
│  │                    WIDGET BUILDER                                │    │
│  │                                                                   │    │
│  │  • Property Groups from Templates                                 │    │
│  │  • Theme Variables as Options                                     │    │
│  │  • AI-Generated Properties                                        │    │
│  │  • Real-time Preview                                              │    │
│  │  • Usage Tracking → AI Training                                   │    │
│  └─────────────────────────────────────────────────────────────────┘    │
│                                                                           │
└─────────────────────────────────────────────────────────────────────────┘

Implementation Plan

Phase 1: Frontend Properties API Service

Create a service to connect the Widget Builder to the backend Properties API:

// libs/libs-widgets/widget-builder/src/lib/services/properties-api.service.ts

@Injectable({ providedIn: 'root' })
export class PropertiesApiService {
  private readonly http = inject(HttpClient);
  private readonly apiUrl = inject(API_BASE_URL);
  
  // Property Definitions
  listProperties(spaceId: string): Observable<PropertyDefinition[]>;
  getPropertiesForWidgetType(spaceId: string, widgetType: string): Observable<PropertyDefinition[]>;
  searchProperties(spaceId: string, query: string, filters?: SearchFilters): Observable<PropertyDefinition[]>;
  
  // Property Templates
  listTemplates(spaceId: string): Observable<PropertyTemplate[]>;
  getTemplatesForWidgetType(spaceId: string, widgetType: string): Observable<PropertyTemplate[]>;
  seedBuiltInTemplates(spaceId: string): Observable<void>;
  
  // Usage Tracking (for AI training)
  incrementUsage(spaceId: string, propertyId: string): Observable<void>;
}

Phase 2: Theme Variables Integration

Create a mapping from theme CSS variables to property options:

// libs/libs-widgets/widget-builder/src/lib/services/theme-properties-mapper.service.ts

@Injectable({ providedIn: 'root' })
export class ThemePropertiesMapperService {
  private readonly themeManager = inject(ThemeManagerService);
  
  // Get CSS variables as property options
  getColorOptions(): PropertyOption[] {
    return [
      { value: 'var(--ux-primary)', label: 'Primary' },
      { value: 'var(--ux-secondary)', label: 'Secondary' },
      { value: 'var(--ux-surface)', label: 'Surface' },
      { value: 'var(--ux-background)', label: 'Background' },
      // ... all theme colors
    ];
  }
  
  getSpacingOptions(): PropertyOption[] {
    return [
      { value: 'var(--ux-space-xs)', label: 'XS (4px)' },
      { value: 'var(--ux-space-sm)', label: 'SM (8px)' },
      { value: 'var(--ux-space-md)', label: 'MD (16px)' },
      { value: 'var(--ux-space-lg)', label: 'LG (24px)' },
      { value: 'var(--ux-space-xl)', label: 'XL (32px)' },
    ];
  }
  
  getShadowOptions(): PropertyOption[];
  getBorderRadiusOptions(): PropertyOption[];
  getTransitionOptions(): PropertyOption[];
  getFontSizeOptions(): PropertyOption[];
  // ...
}

Phase 3: Intelligent AI Generation

Enhance AI generation to use real property data:

// libs/libs-widgets/widget-builder/src/lib/services/intelligent-widget-generator.service.ts

@Injectable({ providedIn: 'root' })
export class IntelligentWidgetGeneratorService {
  private readonly http = inject(HttpClient);
  private readonly propertiesApi = inject(PropertiesApiService);
  private readonly themeMapper = inject(ThemePropertiesMapperService);
  
  async generateWidget(prompt: string, spaceId: string): Promise<GeneratedWidget> {
    // 1. Get available property templates from backend
    const templates = await firstValueFrom(this.propertiesApi.listTemplates(spaceId));
    
    // 2. Get theme CSS variables
    const themeContext = this.buildThemeContext();
    
    // 3. Build AI prompt with REAL context
    const enrichedPrompt = this.buildIntelligentPrompt(prompt, templates, themeContext);
    
    // 4. Call AI with context-aware prompt
    const result = await this.callAI(enrichedPrompt);
    
    // 5. Track property usage for continuous learning
    this.trackUsage(result.usedProperties);
    
    return result;
  }
  
  private buildIntelligentPrompt(
    userPrompt: string,
    templates: PropertyTemplate[],
    themeContext: ThemeContext
  ): string {
    return `
You are creating a widget for GoGrab Space.

USER REQUEST: ${userPrompt}

AVAILABLE PROPERTY TEMPLATES:
${templates.map(t => `
  - ${t.name} (${t.category}): ${t.properties.map(p => p.key).join(', ')}
`).join('')}

THEME CSS VARIABLES (use these for styling):
Colors: ${themeContext.colors.join(', ')}
Spacing: ${themeContext.spacing.join(', ')}
Shadows: ${themeContext.shadows.join(', ')}
Border Radius: ${themeContext.borderRadius.join(', ')}

RULES:
1. Use ONLY properties from the available templates
2. Use theme CSS variables for colors (e.g., var(--ux-primary))
3. Include accessibility properties (ariaLabel, role)
4. Group properties by category (content, appearance, layout, behavior)
5. Include validation where appropriate

Generate a widget with structured property groups...
    `;
  }
}

Phase 4: Auto-Enhancing Theme System

Create a feedback loop where theme system learns from usage:

// libs/theme-system/theme-runtime/src/lib/services/theme-intelligence.service.ts

@Injectable({ providedIn: 'root' })
export class ThemeIntelligenceService {
  private readonly http = inject(HttpClient);
  
  // Store theme usage patterns
  trackThemeUsage(themeId: string, patterns: UsagePatterns): void {
    this.http.post('/api/core/theme-usage', { themeId, patterns }).subscribe();
  }
  
  // Get recommendations based on usage
  getThemeRecommendations(industry: string): Observable<ThemeRecommendation[]>;
  
  // Auto-generate new CSS variables based on patterns
  suggestNewVariables(): Observable<SuggestedVariable[]>;
  
  // Analyze theme performance
  analyzeThemePerformance(themeId: string): Observable<PerformanceReport>;
}

Database Collections

space_gograb-core (Global Core)

// core_properties - Shared property definitions
{
  id: "prop_color_primary",
  key: "primaryColor",
  label: "Primary Color",
  controlType: "color",
  category: "appearance",
  defaultValue: "var(--ux-primary)",
  validation: { required: false },
  widgetTypes: ["*"],
  themeVariable: "--ux-primary", // Links to theme system
  metadata: { usageCount: 1234, created: "2025-12-04", author: "system" }
}

// core_property_templates - Reusable property groups
{
  id: "template_appearance",
  name: "Appearance",
  category: "appearance",
  icon: "palette",
  properties: [...],
  metadata: { usageCount: 5678, isBuiltIn: true }
}

// theme_system - Theme configurations (existing)
{
  id: "theme_modern_tech",
  name: "Modern Tech",
  cssVariables: {...},
  usagePatterns: {...}, // AI learning data
  industryOptimizations: {...}
}

space_{slug}_{id} (Per-Space)

// space_widgets - Widget definitions
{
  id: "widget_pricing_card",
  name: "Pricing Card",
  embeddableId: "pricing-widget",
  propertyGroups: [
    { templateId: "template_content", overrides: {...} },
    { templateId: "template_appearance", overrides: {...} }
  ]
}

// space_property_overrides - Custom properties per space
{
  propertyId: "prop_color_primary",
  override: { defaultValue: "#FF6B00", label: "Brand Color" }
}

UI Enhancements

Widget Builder - Property Groups with Backend Sync

// Enhanced property groups from backend templates
readonly propertyGroups = computed(() => {
  const templates = this.templateFromBackend();
  const themeOptions = this.themeMapper.getAllOptions();
  
  return templates.map(template => ({
    ...template,
    properties: template.properties.map(prop => ({
      ...prop,
      // Enhance with theme options
      options: prop.controlType === 'color' 
        ? themeOptions.colors 
        : prop.validation?.options
    }))
  }));
});

AI Generation Panel - Context-Aware

<!-- Show AI what context it has -->
<div class="ai-context-panel">
  <h4>AI Context</h4>
  <div class="context-item">
    <span class="icon">📋</span>
    <span>{{ templateCount() }} property templates available</span>
  </div>
  <div class="context-item">
    <span class="icon">🎨</span>
    <span>{{ themeVariableCount() }} theme variables</span>
  </div>
  <div class="context-item">
    <span class="icon">♿</span>
    <span>Accessibility properties enabled</span>
  </div>
</div>

Implementation Priority

Week 1: Core Integration

✅ Create PropertiesApiService frontend service
✅ Create ThemePropertiesMapperService
✅ Update Widget Builder to fetch templates from backend
✅ Seed built-in templates to space_gograb-core

Week 2: AI Enhancement

✅ Create IntelligentWidgetGeneratorService
✅ Build context-aware AI prompts
✅ Add property usage tracking
✅ Improve AI response parsing

Week 3: Auto-Enhancement

✅ Create ThemeIntelligenceService
✅ Implement usage pattern tracking
✅ Build recommendation engine
✅ Create admin dashboard for insights

Success Metrics

Metric	Current	Target
AI Generation Accuracy	~40%	85%+
Property Reuse Rate	0%	70%+
Theme Variable Usage	0%	90%+
Accessibility Properties	~5%	100%
User Satisfaction	?	4.5/5

Next Steps

Start with PropertiesApiService - Connect frontend to backend
Seed space_gograb-core - Built-in templates available globally
Update Widget Builder - Fetch real templates, not hardcoded
Enhance AI prompts - Use real context for generation
Track everything - Usage data improves AI over time

Last Updated: December 4, 2025 Session: Property System Integration